/* ===========================================================================
 * expert-spot.css: Experteninterview auf Startseite (#experte) und Leistungsseite (.xs-box unter #sicherheit).
 * Namespaced unter .lp wie home.css; nutzt die Theme-Tokens aus main.css.
 * ======================================================================== */
.lp .expert-spot { border-top: 1px solid var(--border-color); }
.lp .xs-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.lp .xs-body h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 18px; }
.lp .xs-lead { font-size: 1.08rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 26px; }
.lp .xs-cta-row { display: flex; flex-wrap: wrap; gap: 12px 14px; }

.lp .xs-quote {
    position: relative;
    margin: 0;
    padding: 30px 30px 26px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}
.lp .xs-mark { color: var(--accent); opacity: 0.85; margin-bottom: 14px; display: block; }
.lp .xs-quote blockquote { margin: 0 0 22px; }
.lp .xs-quote blockquote p {
    font-size: 1.18rem; line-height: 1.6; font-weight: 600; color: var(--fg);
    font-style: italic; overflow-wrap: anywhere;
}
.lp .xs-person { display: flex; align-items: center; gap: 14px; }
.lp .xs-photo {
    width: 64px; height: 64px; flex: none; border-radius: 50%;
    object-fit: cover; object-position: 50% 30%;
    border: 2px solid var(--border-color);
}
.lp .xs-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.4; }
.lp .xs-who b { color: var(--fg); font-size: 1rem; }
.lp .xs-lang {
    display: inline-block; align-self: flex-start; margin-top: 6px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 3px 9px; border-radius: 99px;
    color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.lp .xs-lang:empty { display: none; }

/* Leistungsseite: Kasten unter dem Sicherheitsabschnitt, Zitat links, unser Angebot rechts */
.lp .xs-box {
    margin-top: 56px;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    border: 1px solid var(--border-color); border-radius: var(--radius);
    background: var(--surface); overflow: hidden;
}
.lp .xs-quote-flat { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 32px; }
.lp .xs-quote-flat .eyebrow { margin-bottom: 14px; }
.lp .xs-quote-flat blockquote p { font-size: 1.1rem; }
.lp .xs-interview-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 20px; }
.lp .xs-interview-row .xs-lang { margin-top: 0; align-self: center; }
.lp .xs-offer {
    padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
    border-left: 1px solid var(--border-color);
}
.lp .xs-offer h3 { font-size: 1.3rem; }
.lp .xs-offer p { color: var(--text-muted); line-height: 1.7; }
.lp .xs-offer .btn { align-self: flex-start; }

html[lang="ja"] .lp .xs-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.35; }

@media (max-width: 900px) {
    .lp .xs-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .lp .xs-box { grid-template-columns: minmax(0, 1fr); }
    .lp .xs-offer { border-left: 0; border-top: 1px solid var(--border-color); }
}
@media (max-width: 600px) {
    .lp .xs-quote { padding: 22px 20px; }
    .lp .xs-quote blockquote p { font-size: 1.05rem; }
    .lp .xs-quote-flat, .lp .xs-offer { padding: 22px 20px; }
    .lp .xs-cta-row .btn, .lp .xs-offer .btn { width: 100%; justify-content: center; align-self: stretch; }
    .lp .xs-photo { width: 54px; height: 54px; }
}
.lp .xs-lang-row { margin: -10px 0 20px; }
.lp .xs-lang-row:has(.xs-lang:empty) { display: none; }