/* Zahnviertel Runde 3: Lagune, Warmweiß, Pfirsich. Signatur: Zahn als Stadtplan (Hero), Logo mit vier Vierteln. */
:root{--peach:#f0a868;--peach-soft:#fde0c4;--berry:#0a5c58;--logo-h:34px}
body{background:var(--bg)}

/* Marke */
.brand-logo .lv{fill:var(--signal)}
.site-footer .brand-logo{color:#fff}
.site-footer .brand-logo .lv{fill:var(--peach)}

/* Hero: Zahn mit Pfirsich-Hof */
body[data-shape] .hero-media{width:min(100%,470px);position:relative;overflow:visible}
body[data-shape] .hero-media::before{content:"";position:absolute;inset:6% -12% 2% 8%;border-radius:50%;background:var(--peach);opacity:.38;z-index:0;filter:none}
body[data-shape] .hero .eyebrow{display:inline-flex;align-items:center;color:var(--brand)}
body[data-shape] .hero h1{color:var(--brand);text-wrap:balance}
.stat strong{font-family:var(--font-heading);color:var(--brand)}
.section-head h2::before{content:"";display:inline-block;width:.38em;height:.38em;border-radius:50%;background:var(--peach);margin-right:.35em;vertical-align:.08em;box-shadow:0 0 0 .14em var(--peach-soft)}

/* Module: Band mit Innenabstand, Notdienst */
body[data-rhythm] main>section.mod-band{padding:clamp(22px,4.4vw,52px);flex-direction:column;align-items:flex-start;gap:22px}
body[data-rhythm] main>section.mod-tool,body[data-rhythm] main>section.mod-callout{padding:clamp(22px,3.6vw,42px)}
section.mod-band .mod-copy{flex:0 0 auto;width:100%;max-width:none}
section.mod-band .mod-html.prose{max-width:none}
section.mod-band .nd-lead,section.mod-band .nd-note{max-width:70ch}
.nd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:6px 0 22px}
.nd-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22)}
.nd-card strong{font-family:var(--font-heading);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;color:var(--peach)!important;letter-spacing:-.02em}
.nd-card span{color:#fff;font-size:.97rem;line-height:1.5}
.nd-112{background:var(--signal);border-color:transparent}
.nd-112 strong{color:#fff!important}
.nd-lead{margin:0 0 10px;font-weight:600}
.nd-kzv{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 12px;margin:0 0 16px;padding:0}
.nd-kzv div{padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.2)}
.nd-kzv dt{font-size:.8rem;color:rgba(255,255,255,.82);margin:0 0 2px}
.nd-kzv dd{margin:0;font-weight:700;color:#fff}
.nd-note{font-size:.88rem;color:rgba(255,255,255,.86)}
section.mod-signal .btn,section.mod-dark .mod-btn{align-self:flex-start}

/* Ablauf */
.steps-num li>span{background:var(--signal);color:#fff}

/* Werkzeuge */
.mod-tool .mod-copy p:last-child{margin-bottom:0}
.mod-checklist .mod-checks{width:100%;max-width:none}
.mod-tool{padding:clamp(22px,3.6vw,42px)}
.tool-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tool-box select{padding-right:8px}
.tool-result strong{font-family:var(--font-heading)}
.tool-result .small{display:block;margin-top:6px;font-weight:500;color:var(--muted)}

/* Stadt: Band-Illustration */
.city-head.img-band .city-media{border-radius:var(--r-lg)}
.city-head.img-left .city-media{border-radius:var(--r-lg);overflow:hidden}

@media (max-width:640px){
  .city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .city-tile>svg{display:none}
  .nd-kzv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nd-kzv div{padding:8px 10px}
}
@media (max-width:900px){
  .nd-grid{grid-template-columns:1fr}
  body[data-shape] .hero-media{width:min(78vw,300px)}
}

/* Tabellen in Werkzeug-Erklärung */
.tool-explain table{width:100%;max-width:900px;border-collapse:collapse;font-size:.95rem;background:var(--surface)}
.tool-explain th,.tool-explain td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tool-explain thead th{background:var(--tint);color:var(--brand)}
.tool-explain{overflow-x:auto}

/* Illustrationen: nicht beschneiden */
.guide-media{background:var(--tint);align-self:start;border-radius:var(--r-lg);overflow:hidden}
.guide-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}

/* Ratgeber-Artikel (guidePage): Kennzahlen-Kacheln breit genug, keine Silbentrennung in Überschriften */
h1{hyphens:manual;text-wrap:balance}
.gp-kf .keyfacts{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.gp-kf .keyfacts dd{font-size:1.02rem;line-height:1.3;overflow-wrap:break-word;hyphens:manual}
.gp-extra .mod-checklist{margin-top:28px}

/* Flächen mit Weiß-Text: Pfirsich-Schein statt Himbeere im Verlauf, damit kein Weinton entsteht (Kontrast Weiß mindestens 5:1) */
.dark-hero{background:radial-gradient(circle at 85% 10%,rgba(240,168,104,.24),transparent 55%),linear-gradient(150deg,var(--brand),#06403f)}
.cta-band{background:linear-gradient(135deg,var(--brand),#0d6f6a)}