/* FörderGuide Design Phase A/B: gemeinsame Grundlage fuer Ratgeber- und Landingpages.
   Regeln: weisse Flaechen, duenne Linien statt Tint, eckige Karten, Buttons 6px,
   ein Schatten, ein Verlauf (nur auf gruenen Flaechen), Icons zentriert in festen runden Chips.
   Wird nach den Seiten-Stilen geladen und ueberschreibt sie. */
:root{
  --navy:#085E56;--forest:#05302C;--ice:#C6E3E8;--sky:#5BC0EB;
  --cream:#fff;--green-l:#fff;--border:#D3DDDB;--line:#D3DDDB;
  --fg-shadow:0 4px 24px rgba(5,48,44,.10);
  --fg-grad:linear-gradient(160deg,#085E56,#05302C);
  --fg-surface:#F3F6F5;
}
body{background:#fff}

/* ---- Navigation und Buttons ---- */
.nav-cta,.cta-btn,.hero-btn,.result-cta,.filter-btn,.toggle-btn{border-radius:6px}
.cta-btn{box-shadow:none}

/* ---- Brotkrumen: weiss mit Linie ---- */
.breadcrumb,.crumb{background:#fff;border-bottom:1px solid var(--border)}

/* ---- Tag: eckig, Eisblau nur als kleine Flaeche ---- */
.tag,.prog-badge{background:var(--ice);color:var(--forest);border-radius:0}

/* ---- Kennzahlen, Hinweise, Schritte, Autor, Verwandte: weiss, Linie, eckig ---- */
.fact{background:#fff;border:1px solid var(--border);border-top:3px solid var(--navy);border-radius:0;box-shadow:none}
.fact .v{color:var(--forest)}
.callout{border-radius:0}
.note{background:#fff;border:1px solid var(--border);border-left:4px solid var(--navy);border-radius:0;color:#26332F}
.note strong{color:var(--forest)}
.steps li,.author-box,.related-card,.info-box,.example-box{background:#fff;border:1px solid var(--border);border-radius:0}
.related-card:hover{box-shadow:var(--fg-shadow)}
.faq details,.faq-item{border-radius:0}
.tbl-wrap{border-radius:0}
tr:nth-child(even) td{background:#F6F8F8}
th{background:var(--navy);color:#fff}
.highlight{background:#fff}
.network-card,.card,.path-card,.calc-card,.example-box,.hero-form,.done-card{border-radius:0}
.path-card,.calc-card{box-shadow:var(--fg-shadow)}
.path-card{border:1px solid var(--border)}

.toggle-btn.active{background:#fff;border-color:var(--navy);color:var(--forest)}
.network-card{box-shadow:none;border:1px solid var(--border)}
.card{border:1px solid var(--border);border-top:3px solid var(--navy)}
.card:hover{box-shadow:var(--fg-shadow)}
.hero-form{border-radius:6px}

/* ---- CTA-Boxen: Marken-Verlauf mit Ring (gruene Flaeche) ---- */
.cta-box,.result-box{background:var(--fg-grad);border-radius:0;position:relative;overflow:hidden}
.cta-box::before,.result-box::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:rgba(198,227,232,.07);border:1px solid rgba(198,227,232,.28);pointer-events:none}
.cta-box>*,.result-box>*{position:relative}
.cta-box,.cta-box h3,.cta-box p{color:#fff}
.cta-box p{color:#fff}

/* ---- Icon-Chips: fest, rund, Inhalt exakt zentriert ---- */
.steps li{padding-left:58px;min-height:54px}
.steps li:before,.step-badge,.byline .av,.author-box .av,.ex-icon,.faq-icon{
  display:flex;align-items:center;justify-content:center;flex:none;line-height:1;text-align:center;border-radius:50%}
.steps li:before{left:14px;top:12px;width:30px;height:30px}
.step-badge{width:44px;height:44px}
.faq-icon{width:28px;height:28px}
.faq-icon svg,.step-badge svg,.ex-icon svg{display:block;width:60%;height:60%}

/* ---- Abschnitts-Rhythmus: weiss, sehr helles Grau, dunkelgruen; Karten auf Grau bleiben weiss ---- */
body{overflow-x:clip}
.paths-wrap,.faq-wrap{background:var(--fg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.faq-wrap .faq-item,.container .faq-item{background:#fff;border:1px solid var(--border);border-radius:0;box-shadow:none}
.container:has(>.faq-group-title){background:var(--fg-surface);box-shadow:0 0 0 100vmax var(--fg-surface);clip-path:inset(0 -100vmax);border-top:0}
.related,.faq-section{background:var(--fg-surface);box-shadow:0 0 0 100vmax var(--fg-surface);clip-path:inset(0 -100vmax);padding-top:32px;padding-bottom:32px}
.faq-section .faq-item{background:#fff;border:1px solid var(--border);border-radius:0;padding-left:16px;padding-right:16px}
.article-wrap h2,main h2{border-top:1px solid var(--border);padding-top:28px;margin-top:44px}
.article-wrap h2:first-of-type,main>h2:first-child{border-top:0;padding-top:0;margin-top:32px}

.hero .breadcrumb{background:transparent;border-bottom:0}
.hero .breadcrumb,.hero .breadcrumb a{color:rgba(255,255,255,.85)}

/* ---- Fussleiste und Linkband bleiben dunkelgruen ---- */
footer{background:var(--forest)}

@media(max-width:600px){
  .fact .v{font-size:22px}
  .related-grid,.facts{gap:10px}
}