/* =================================================================
   STIL-LAYER (Stand Oktober 2026)
   Bringt alle Unterseiten und Ratgeber-Beitraege auf den Stil der
   Startseite: Anton-Grossbuchstaben, Navy und Weiss, dunkle Kopf- und
   Schlussflaechen mit runden Ecken, Knoepfe mit Pfeil-Kreis.
   Wird nach perspective.css geladen. Inhalte bleiben unveraendert.
   ================================================================= */

:root{
  --navy:#22334d; --navy-2:#1a2840; --nacht:#0c1119; --slate:#4f6c95; --slate-hell:#a9bbd3;
  --anton:'Anton','Arial Narrow',Impact,sans-serif;
  --accent:#2a4266; --accent-fill:#22334d; --amber:#6b7f99;
  --runde:clamp(48px,9vw,150px);
  --text-k:#3b4457;
}

/* ---------- Grundtypografie ---------- */
body{ font-family:'Inter',system-ui,sans-serif; color:#141414; }
.g-title,.h-hero,.h-sec,.phase h2,.phase-head-text h2,.g-faq h2,.closing h2,.final h2,.sec-head h2{
  font-family:var(--anton); font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:1.12; color:var(--navy); text-wrap:balance; }
.h-sec,.phase h2,.phase-head-text h2,.g-faq h2{ font-size:clamp(2rem,3.6vw,3rem); }
.phase-body p,.phase-body li,.g-lead,.sec-sub{ color:var(--text-k); }
.phase-body a,.g-faq a{ color:var(--navy); text-underline-offset:3px; }

/* Kleine Kicker mit Linie wie auf der Startseite */
.g-kicker,.eyebrow,.pnum{ display:inline-flex; align-items:center; gap:12px; font-family:'Inter',sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:#5d6b80; }
.g-kicker::before,.eyebrow::before,.pnum::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.6; }
.eyebrow i{ font-style:normal; color:inherit; }

/* ---------- Kopfzeile ---------- */
.nav,.nav.zone-dark,.nav.scrolled{ background:#fff !important; border-bottom:1px solid #e7e3dc; box-shadow:none; }
.nav .nav-links a,.nav-wc{ font-family:'Inter',sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--navy) !important; }
.nav .btn,.nav-cta{ border-radius:999px !important; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem !important; font-weight:700; }

/* ---------- Kopfbereich der Unterseiten: dunkel, runde Ecke ---------- */
.g-hero{ position:relative; isolation:isolate; overflow:hidden; color:#fff; background:var(--nacht) url("/img/lobby/hero-dresden-nacht.webp") center 70%/cover no-repeat !important;
  border-bottom-right-radius:var(--runde); padding-top:calc(84px + clamp(48px,7vw,104px)) !important; padding-bottom:clamp(64px,8vw,112px) !important; }
.g-hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,12,20,.92) 0%,rgba(8,12,20,.78) 50%,rgba(8,12,20,.5) 100%); }
.g-hero::after{ display:none !important; }
.g-hero .container{ text-align:left !important; }
.g-hero .g-title{ color:#fff; margin-inline:0; max-width:18ch; font-size:clamp(2.6rem,5.6vw,4.8rem); }
.g-hero .g-kicker{ color:#c7d0dc; }
.g-hero .g-lead{ color:rgba(235,239,245,.82); margin-inline:0; max-width:62ch; }
.g-hero .g-lead b{ color:#fff; }
.g-hero a{ color:#fff !important; }
.g-hero .g-meta{ justify-content:flex-start; color:rgba(226,231,238,.7); }
.g-hero .g-meta svg{ color:var(--slate-hell); }
.g-hero .btn-primary{ background:#f7f5f0; color:var(--nacht) !important; }
.g-hero .btn-ghost{ background:transparent; color:#fff !important; border:1.5px solid rgba(255,255,255,.4); }

/* ---------- Abschnitte ---------- */
.phase{ border-bottom:1px solid #eef0f3; }
.phase-icon{ background:#eef2f7; color:var(--navy); border-radius:14px; }
.aside{ background:#f3f6fa; border-left:3px solid var(--navy); border-radius:14px; }
.mistake{ background:#f6f7f9; border-left:3px solid var(--slate); border-radius:14px; }
.m-label{ font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:.66rem; color:var(--slate); }
.kpi-card,.stat-tile{ background:#fff; border:1px solid #e3e7ee; border-radius:18px; box-shadow:none; }
.kpi-card b{ color:var(--navy); }
.wc-teaser{ background:var(--navy) !important; border-color:var(--navy) !important; border-radius:20px; color:#fff; }
.wc-teaser b{ font-family:var(--anton); font-weight:400; text-transform:uppercase; letter-spacing:.02em; color:#fff; font-size:1.4rem; }
.wc-teaser .wc-sub{ color:rgba(235,239,245,.78); }
.wc-teaser .wc-arrow{ border-color:rgba(255,255,255,.35); color:#fff; background:transparent; }

/* ---------- FAQ: Linien statt Karten ---------- */
.g-faq dl{ gap:0; border-top:1px solid #d9dde3; }
.g-faq dl > div{ background:none; border:0; border-bottom:1px solid #e3e6ea; border-radius:0; box-shadow:none; padding:24px 0; }
.g-faq dt{ font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:1.25rem; color:#141414; }
.g-faq dd{ color:var(--text-k); }

/* ---------- Knoepfe ---------- */
.btn{ height:58px; padding:0 30px; border-radius:999px; font-family:'Inter',sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; gap:12px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s, background-color .25s; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--navy); color:#fff; box-shadow:0 18px 34px -16px rgba(26,40,64,.75); }
.btn-primary:hover{ background:var(--navy-2); }
.btn-primary .arrow{ width:34px; height:34px; padding:9px; margin-right:-18px; border-radius:50%; background:rgba(255,255,255,.16); box-sizing:border-box; }
.btn-ghost{ background:transparent; border:1.5px solid #cfd5de; box-shadow:none; color:var(--navy); }
.btn-ghost:hover{ border-color:var(--navy); background:#fff; }

/* ---------- Schlussbereich: dunkel mit runder Ecke ---------- */
.closing,.final{ position:relative; background:var(--nacht) !important; color:#c9d1dd; border-top-left-radius:var(--runde); border-top:0 !important; margin-top:clamp(40px,6vw,80px); }
.closing h2,.final h2{ color:#fff; font-size:clamp(2.4rem,5vw,4.2rem); }
.closing p,.final p{ color:rgba(226,231,238,.78); }
.closing p.strong-line,.final p.strong-line,.closing .strong-line,.final .strong-line{ color:#fff !important; }
.closing a:not(.btn),.final a:not(.btn){ color:#fff; }
.closing .eyebrow,.final .eyebrow{ color:#9fb0c6; }
.closing .btn-primary,.final .btn-primary{ background:#f7f5f0; color:var(--nacht); box-shadow:0 18px 40px -18px rgba(0,0,0,.7); }
.closing .btn-primary .arrow,.final .btn-primary .arrow{ background:var(--navy); color:#fff; }
.closing .btn-ghost,.final .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.35); background:transparent; }
.closing .btn-ghost:hover,.final .btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:#fff; }

/* ---------- Fusszeile ---------- */
.footer,.footer.footer-schlicht{ background:var(--nacht) !important; border-top:1px solid rgba(255,255,255,.06); }
.footer a,.footer-recht a,.footer-col a{ color:#c4ccd8 !important; }
.footer a:hover,.footer-recht a:hover{ color:#fff !important; }
.footer-col h5{ color:#8e9bb0; }
.footer,.footer p,.footer span{ color:#aab4c3; }

/* ---------- Ratgeber-Uebersicht ---------- */
.art-card{ border:1px solid #e3e7ee; box-shadow:none; }
.art-card:hover{ border-color:var(--navy); }

@media (max-width:700px){
  .g-hero{ border-bottom-right-radius:48px; }
  .closing,.final{ border-top-left-radius:48px; }
  .btn{ height:auto; min-height:56px; padding:10px 24px; white-space:normal; text-align:center; line-height:1.35; letter-spacing:.08em; font-size:.76rem; }
}
@media (prefers-reduced-motion:reduce){ .btn{ transition:none; } .btn:hover{ transform:none; } }

/* ---------- Lange Ueberschriften im Kopfbereich nicht zu hoch ---------- */
.g-hero .g-title{ font-size:clamp(2.4rem,4.6vw,4.2rem); max-width:22ch; }

/* ---------- Seiten mit eigener Vorlage (Werbe-Check, Solar, Impressum, Analysegespraech) ---------- */
.hero h1,.impressum h1,body > main h1:not(.g-title):not(.nur-sr),.wrap > h1,.frage{
  font-family:var(--anton); font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:1.12; color:var(--navy); }
.hero h1 mark,.hero h1 em,.hero h1 span{ background:none; color:var(--slate); font-style:normal; }
.sec-deep h1,.sec-deep h2{ color:#fff; }
.sec h2{ font-family:var(--anton); font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:1.14; }
.btn-amber,.btn-haupt,.btn-next{ background:var(--navy) !important; color:#fff !important; border-radius:999px !important; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.btn-still,.btn-back{ border-radius:999px !important; }
.site-header,.kopf{ background:#fff; }
.wc-teaser .wc-sub,.wc-teaser span{ color:rgba(235,239,245,.8) !important; }
.wc-teaser b{ color:#fff !important; }