/* Auslandskonto-Check im CI der Design Guidelines 08/2026, live seit GFS-919 (Mockup GFS-831). Liegt über design.css, proof.css und ak.css, Inhalt und Logik bleiben dort. Gleich mit zweitpass-check.de/seite/assets/ci.css bis auf diese Zeile, ändert sich dort etwas, hier nachziehen.
   Helle Fassung: Flächen Weiß und Sand im Wechsel, Text Anthrazit, Braun für Labels und Linien, Gold nur in Headline-Marken und Buttons.
   Pixelgrößen gibt das CI nicht vor; Versalien wirken bei gleicher Größe deutlich wuchtiger als die Live-Headlines, deshalb H1 bis 42 px, Abschnitte bis 32 px. */
:root{--braun:#716551;--sand:#f5f1e8;--anthrazit:#2f302d;--gold:#c9a24a;--navy:#2f302d;--brown:#716551;--paper:#fff;--muted:#716551;--pale:#f5f1e8;--line:#e3ddd0;--hell:#dcd6c9}
body{color:var(--anthrazit);line-height:1.5}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--braun);outline-offset:3px}

/* Headlines: Semibold, Versalien, wichtige Worte weiß auf Gold, Punkt am Ende */
h1,h2,.hero h1,.report-copy h2,.process h2,.faq-layout h2,.last-call h2,.human-copy h2{font-weight:600;text-transform:uppercase;letter-spacing:0;line-height:1.12;color:var(--anthrazit)}
h3{font-weight:600;letter-spacing:0}
.mark{background:var(--gold);color:#fff;padding:.02em .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Sublines und Labels: Semibold, Versalien */
.section-label,.eyebrow,.hero .eyebrow{font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--braun)}
.btn{background:var(--gold);color:var(--anthrazit);border-radius:4px;font-weight:600}
.btn:hover{background:var(--gold);filter:brightness(1.08)}

header{background:#fff;border-bottom:1px solid var(--line)}
.nav>a{color:var(--anthrazit);font-weight:500}
.nav>a:hover{color:var(--braun)}

/* Größen: H1 und H2 der Abschnitte in einer Stufe, Labels darüber bleiben 13 px */
.hero h1,.ok-copy .ok-title{font-size:clamp(28px,2.9vw,42px)}
.proof-heading h2,.process h2,.human-copy h2,.faq-layout h2,.last-call h2,.ok h2{font-size:clamp(24px,2.2vw,32px)}
.ok .talk-box h2{font-size:24px}

/* Hero hell, Foto rechts abgedunkelt mit braun-transparentem Verlauf von unten unter der Report-Karte */
.hero{padding-top:40px;padding-bottom:40px}
.hero h1{margin-bottom:24px}
.hero-lead,.hero .reassurance{color:var(--anthrazit)}
.hero-visual .coast{filter:brightness(.85) saturate(.85)}
.hero-visual:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(113,101,81,.85) 0%,rgba(113,101,81,.45) 30%,rgba(113,101,81,0) 50%);pointer-events:none}
.hero-report-link{z-index:2;border-top:3px solid var(--gold);border-radius:0;color:var(--anthrazit)}
.hero-report-label{font-weight:600;color:var(--braun)}
.hero-report-link>strong{font-weight:600;letter-spacing:0;text-transform:uppercase;font-size:18px;line-height:1.3}

.benefit-strip{font-weight:500;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.benefit-strip span{color:var(--gold)}

/* Report auf Sand */
.report-section{background:var(--sand)}
.proof-heading>p{color:var(--anthrazit)}
.full-report{border-top-color:#ddd5c4}
.report-tab{color:var(--anthrazit);border-bottom-color:#ddd5c4}
.report-tab>span{color:var(--braun);font-weight:600}
.report-tab strong{font-weight:600}
.report-tab small{color:var(--braun)}
.report-tab[aria-pressed=true]{background:#fff;border-left:3px solid var(--gold);border-radius:0}
.report-view img{box-shadow:0 18px 45px rgba(47,48,45,.16)}

/* Ablauf auf Weiß */
.process-steps li{border-top:2px solid var(--gold)}
.step-no{color:var(--braun);font-weight:600;letter-spacing:0}
.process-steps p{color:var(--anthrazit)}

/* Gespräch auf Sand */
.human-section{background:var(--sand);border:0}
.human-copy .section-label{color:var(--braun)}
.human-copy>p:not(.section-label),.human-copy p,.conversation-agenda p{color:var(--anthrazit)}
.conversation-agenda li{border-top-color:#ddd5c4}
.conversation-agenda li>span{color:var(--braun);font-weight:600}
.human-copy .human-outcome{border-left-color:var(--gold)}
.human-person .portrait{box-shadow:0 0 0 3px var(--gold);background-color:var(--braun)}
.human-person .signature,.human-person .signature span{color:var(--anthrazit)}
.press>span:first-child{color:var(--braun);text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:600}

/* FAQ auf Weiß */
.faq details{border-top-color:var(--line)}
.faq details:last-child{border-bottom-color:var(--line)}
.faq summary{font-weight:600;color:var(--anthrazit)}
.faq summary>span{color:var(--braun)}
.faq details p{color:var(--anthrazit)}

/* Schlussaufruf auf Sand, mit Goldlinie als Abschluss vor dem Footer */
.last-call{background:var(--sand);border-top:3px solid var(--gold)}
.last-call p:not(.section-label),.last-call small{color:var(--anthrazit)}

.site-footer{background:#fff;border-top:1px solid var(--line);color:var(--anthrazit)}
.site-footer .links a{color:var(--anthrazit);border-bottom-color:var(--line)}

/* Check: Fragen auf Weiß, Auswahl in Braun */
.wizard-aside{border-right-color:var(--line)}
.wizard-aside h3{font-weight:600;text-transform:uppercase;line-height:1.2;color:var(--anthrazit)}
.profile-summary{border-top-color:var(--gold)}
.question-title{font-weight:600;letter-spacing:0;color:var(--anthrazit)}
.track>div{background:var(--gold)}
.option{color:var(--anthrazit);border-color:var(--line);border-radius:4px}
.option:before{border-color:#b9b09f}
.option:hover{border-color:var(--braun)}
.option[aria-pressed=true]{background:var(--sand);border-color:var(--braun)}
.option[aria-pressed=true]:before{border-color:var(--braun)}
.options.multi .option[aria-pressed=true]:before{border-color:var(--braun);background-color:var(--braun)}
.input{border-color:#cfc7b6;border-radius:4px;color:var(--anthrazit)}
select.input{color:var(--anthrazit)}
select.input:focus,select.input:focus-visible{border-color:var(--braun);box-shadow:0 0 0 3px rgba(201,162,74,.25)}
.combo-list{border-color:#cfc7b6;box-shadow:0 10px 30px rgba(47,48,45,.12)}
.combo-list li{color:var(--anthrazit)}
.check input{accent-color:var(--braun)}
.link-action{color:var(--anthrazit)}
.resume-dialog::backdrop{background:rgba(47,48,45,.7)}
.resume-dialog h2{color:var(--anthrazit)}

/* Bestätigung: Gesprächskasten in Braun, damit er sich vom Sand abhebt */
.ok-top{background:var(--sand)}
.ok-badge{color:var(--anthrazit)}
.ok-hint a{color:var(--anthrazit)}
.talk-box{background:var(--braun);box-shadow:0 24px 60px rgba(47,48,45,.2)}
.ok .talk-box h2{text-transform:uppercase;color:#fff}
.talk-box>p,.talk-note{color:var(--sand)}
.talk-box .section-label,.talk-points li>span{color:#fff}
.talk-points,.talk-cta{border-top-color:rgba(245,241,232,.3)}
.ok-pages b{color:var(--braun)}
.ok-pages strong{color:var(--anthrazit)}
.fan-back,.fan-front{box-shadow:0 20px 45px rgba(47,48,45,.18)}

@media(max-width:760px){
	/* proof.css nimmt der Leiste mobil das Polster oben, weil sie dort ohne obere Linie direkt unter dem Hero saß; mit der Linie aus dem CI klebte die erste Zeile daran */
	.benefit-strip{padding-top:20px}
	/* Bricht ein Punkt um, steht die Folgezeile unter dem Text statt unter dem Häkchen */
	.benefit-strip>div{display:flex;align-items:baseline}
	.benefit-strip span{flex:none}
	.hero{padding-top:8px;padding-bottom:22px}
	.hero-visual{height:400px}
	.hero-visual .coast{object-position:center 35%}
	.hero-report-link>strong{font-size:16px}
	.question-title{font-size:24px}
}
/* Lange Wörter wie „Auslandsanbindung“ passen in Semibold ohne negatives Letter-Spacing bei 24 px nicht in 320 px */
@media(max-width:360px){
	.question-title{font-size:21px}
}