/* Richtfunk Franken — Hauptstylesheet
   ACHTUNG: Der :root-Block und Header/Hero liegen zusätzlich als Critical CSS
   in app/views/layout.php. Änderungen dort nachziehen, sonst flackert es. */

:root{
 /* Helles Schema: warmes Weiß als Grund, Signalblau als Akzent.
    Alle Textfarben sind gegen ihren Hintergrund auf >= 4,5:1 geprüft. */
 --bg:#ffffff;--bg-2:#f5f8fc;--surface:#ffffff;--surface-2:#f2f6fb;
 --ink:#0f172a;--ink-soft:#33415c;--dim:#55637d;--dim2:#5b6a85;
 --line:#e2e8f0;--line-2:#cbd5e1;
 --acc:#0369a1;--acc-2:#075985;--acc-tint:#e6f2fb;
 --sig:#15803d;--warn:#b45309;
 --r-sm:10px;--r:14px;--r-lg:20px;
 --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
 --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
 --wrap:1140px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink-soft);font-family:var(--sans);line-height:1.65}
.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}
main{padding-bottom:70px}

h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0 0 .5em;font-weight:640;letter-spacing:-.015em}
h1{font-size:clamp(1.9rem,3.4vw,2.9rem)}
h2{font-size:clamp(1.35rem,2vw,1.75rem);margin-top:2.2em}
h3{font-size:1.12rem;margin-top:1.7em}
p{margin:0 0 1.05em}
strong{color:var(--ink);font-weight:620}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin-bottom:.45em}
code{font-family:var(--mono);font-size:.9em;background:var(--surface);padding:2px 6px;border-radius:5px;color:var(--acc)}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* ---------------- Buttons ---------------- */
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:9px;
 background:var(--acc);color:#ffffff;text-decoration:none;font-weight:640;
 padding:13px 22px;border-radius:99px;font-size:.97rem;font-family:var(--sans);
 /* Reset für <button>: sonst Browser-Standardrahmen und System-Schrift */
 border:1px solid transparent;appearance:none;-webkit-appearance:none;
 cursor:pointer;line-height:1.25;text-align:center;
 transition:background .16s,transform .16s;
}
.btn:hover{background:var(--acc-2);color:#ffffff;transform:translateY(-1px)}
.btn-sm{padding:9px 16px;font-size:.9rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--acc)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}

/* ---------------- Hero ---------------- */
.hero{padding:clamp(46px,7vw,90px) 0 clamp(30px,4vw,48px);max-width:var(--wrap)}
.hero .kicker{
 display:inline-flex;align-items:center;gap:8px;
 font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;
 color:var(--acc);background:var(--acc-tint);border:1px solid #b9dcf2;
 padding:6px 13px;border-radius:99px;margin-bottom:20px;font-weight:600;
}
.hero h1{max-width:19ch}
.hero .lede{max-width:58ch}

/* ---------------- Answer-Box (GEO) ---------------- */
.answer-box{
 background:var(--acc-tint);
 border:1px solid #c5dff2;border-left:3px solid var(--acc);
 border-radius:var(--r);padding:22px 26px;margin:30px 0;
}
.ab-title{
 margin:0 0 8px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
 color:var(--acc);font-weight:660;
}
.ab-text{margin:0;color:var(--ink-soft);font-size:1.02rem}

/* Kennzahlen und Hero-Bereich bekommen auf hellem Grund einen
   zarten Farbverlauf, sonst wirkt die Seite flach. */
/* Hero-Verlauf: NICHT über ein Pseudo-Element mit box-shadow — der Schatten
   ist einfarbig, während die Box einen Verlauf trägt, dadurch entsteht eine
   sichtbare Kante ("geboxt"). Der Verlauf gehört auf den body: der ist von
   Natur aus volle Breite, kann nicht überlaufen und hat keine Kanten. */
.hero{position:relative}
body{
 background:linear-gradient(180deg,#eef4fa 0%,#f6f9fc 46%,#ffffff 100%) no-repeat;
 background-size:100% 620px;
}
.stat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}

/* ---------------- Karten / Raster ---------------- */
.grid{display:grid;gap:16px;margin:26px 0}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
 padding:24px;display:flex;flex-direction:column;
 /* Auf hellem Grund trägt der Rahmen allein zu wenig — ein feiner Schatten
    trennt die Karte vom Seitenhintergrund. */
 box-shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
 transition:border-color .16s,transform .16s,box-shadow .16s;
}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 4px 8px rgba(15,23,42,.06),0 12px 24px rgba(15,23,42,.08)}
.card h3{margin:0 0 8px;font-size:1.14rem}
.card p{margin:0 0 12px;font-size:.95rem;color:var(--dim)}
.card .more{margin-top:auto;color:var(--acc);font-weight:580;font-size:.93rem}
.card-icon{
 width:44px;height:44px;border-radius:11px;background:var(--acc-tint);
 display:grid;place-items:center;margin-bottom:14px;color:var(--acc);
}
.card-icon svg{width:22px;height:22px}

/* ---------------- Kennzahlen ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:30px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.stat .v{display:block;font-size:1.75rem;font-weight:700;color:var(--ink);line-height:1.1;letter-spacing:-.02em}
.stat .k{display:block;font-size:.84rem;color:var(--dim);margin-top:6px}
.stat .n{display:block;font-size:.78rem;color:var(--dim2);margin-top:4px}

/* ---------------- Prosa ---------------- */
/* Begrenzte Blöcke werden zentriert (margin-inline:auto). ABER: eine
   74ch-Spalte mittig zwischen 1140px breiten Blöcken sieht eingerückt aus.
   Deshalb bleibt die Lesespalte LINKSBÜNDIG zu den breiten Sektionen und
   begrenzt nur nach rechts — das ist die Satzregel für Fließtext neben
   Vollbreiten-Elementen. Zentriert wird nur, was für sich allein steht
   (Hero, Lede). */
.prose{max-width:74ch}
.lede{
 font-size:clamp(1.02rem,1.2vw,1.14rem);color:var(--ink-soft);
 max-width:62ch;margin-top:.4em;
}
.answer-box,.notice,.faq,.stats,.grid,.zone,.facts,.cta-row,.ortliste,.kontakt-grid{
 max-width:var(--wrap);
}

.prose h2{margin-top:2em}
.prose ul li::marker{color:var(--acc)}

/* Tabellen: der Renderer verpackt sie in .tabelle-scroll, damit breite
   Tabellen auf schmalen Bildschirmen horizontal scrollen statt das
   Layout zu sprengen. */
.tabelle-scroll{
 max-width:74ch;margin:1.5em 0;overflow-x:auto;
 border:1px solid var(--line);border-radius:var(--r-sm);
 background:var(--surface);
 -webkit-overflow-scrolling:touch;
}
.tabelle-scroll table{width:100%;border-collapse:collapse;margin:0;font-size:.95rem}
.tabelle-scroll th,.tabelle-scroll td{
 text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);
 vertical-align:top;
}
.tabelle-scroll thead th{
 background:var(--surface-2);color:var(--ink);font-weight:640;
 font-size:.84rem;letter-spacing:.04em;text-transform:uppercase;
 white-space:nowrap;position:sticky;top:0;
}
.tabelle-scroll tbody th{color:var(--ink);font-weight:600}
.tabelle-scroll tbody tr:last-child th,
.tabelle-scroll tbody tr:last-child td{border-bottom:0}
.tabelle-scroll tbody tr:hover{background:var(--surface-2)}
/* Erste Kopfzelle kann leer sein (Vergleichstabellen) — dann keine
   sichtbare Lücke erzeugen. */
.tabelle-scroll thead th:empty{background:var(--surface)}

/* ---------------- Ortsliste ---------------- */
.zone{margin:30px 0}
.zone-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.zone-head h3{margin:0}
.zone-head .z-meta{font-size:.88rem;color:var(--dim)}
.ortliste{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.ortliste li{margin:0}
.ortliste a{
 display:inline-flex;align-items:center;gap:8px;min-height:40px;
 background:var(--surface);border:1px solid var(--line);border-radius:99px;
 padding:7px 15px;color:var(--ink-soft);text-decoration:none;font-size:.92rem;
}
.ortliste a:hover{border-color:var(--acc);color:var(--ink)}
.ortliste .km{color:var(--dim2);font-size:.83rem;font-variant-numeric:tabular-nums}

/* ---------------- Faktenkarten ---------------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:24px 0}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px}
.fact .fl{display:block;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim2)}
.fact .fv{display:block;font-size:1.12rem;color:var(--ink);font-weight:620;margin-top:5px}
.fact .fn{display:block;font-size:.82rem;color:var(--dim);margin-top:3px}

/* ---------------- FAQ ---------------- */
.faq{margin:36px 0}
.faq details{
 border:1px solid var(--line);border-radius:var(--r-sm);
 margin-bottom:10px;background:var(--surface);overflow:hidden;
}
.faq summary{
 cursor:pointer;padding:15px 20px;font-weight:590;color:var(--ink);
 list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;
 min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-size:1.3rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .fa{padding:15px 20px;color:var(--ink-soft);font-size:.96rem}
.faq .fa p:last-child{margin-bottom:0}

/* ---------------- Hinweisblock ---------------- */
.notice{
 background:var(--surface);border:1px solid var(--line-2);
 border-left:3px solid var(--warn);border-radius:var(--r-sm);
 padding:16px 20px;margin:24px 0;font-size:.95rem;
}
.notice p:last-child{margin-bottom:0}

/* ---------------- Kontaktbereich ---------------- */
.kontakt-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin:28px 0}
.kontakt-karte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.kontakt-karte dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-items:baseline}
.kontakt-karte dt{color:var(--dim2);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.kontakt-karte dd{margin:0;color:var(--ink)}
/* 44px Trefferfläche für Telefon-/Mail-Links in der Kontaktkarte */
.kontakt-karte dd a{display:inline-flex;align-items:center;min-height:44px}
.checkliste{list-style:none;padding:0;margin:16px 0}
.checkliste li{position:relative;padding-left:28px;margin-bottom:10px}
.checkliste li::before{
 content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;
 border-left:2px solid var(--sig);border-bottom:2px solid var(--sig);
 transform:rotate(-45deg);
}

/* ---------------- Breadcrumb ---------------- */
.crumbs{font-size:.86rem;color:var(--dim2);margin:22px 0 6px;display:flex;flex-wrap:wrap;align-items:center}
/* 44px Trefferfläche auch im Breadcrumb — sonst sind die Links nur
   textzeilenhoch (16px). Der negative Rand hält die optische Höhe klein. */
.crumbs a{color:var(--dim);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--acc)}
.crumbs span{margin:0 7px;opacity:.5}

/* ---------------- Footer ---------------- */
.site-foot{border-top:1px solid var(--line);background:var(--bg-2);padding:44px 0 30px;margin-top:64px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:32px}
.foot-brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:660;margin-bottom:12px}
.site-foot p{font-size:.9rem;color:var(--dim);max-width:44ch}
.foot-adr{font-size:.86rem !important;color:var(--dim2) !important;margin-top:14px}
.site-foot strong{display:block;color:var(--ink);margin-bottom:12px;font-size:.94rem}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{margin-bottom:8px}
/* Trefferflächen: Marke und Footer-Links brauchen 44px Höhe.
   Ohne min-height sind sie nur textzeilenhoch (30px bzw. 24px). */
.brand{min-height:44px}
ul.plain a{color:var(--dim);text-decoration:none;font-size:.92rem;display:inline-flex;align-items:center;min-height:44px}
ul.plain a:hover{color:var(--acc)}
ul.plain li{margin-bottom:2px}
.fineprint{
 margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line);
 font-size:.82rem !important;color:var(--dim2) !important;max-width:none !important;
}

/* ---------------- Mobile ---------------- */
.nav a[aria-current]{color:var(--acc);background:var(--acc-tint)}
/* Der Button in der Navigation ist ein <a> und erbt sonst .nav a{color:dim}
   — das ergab Kontrast 1,21:1 auf dem hellen Grund. Muss NACH .nav a stehen. */
.nav a.btn{color:#ffffff;background:var(--acc)}
.nav a.btn:hover{color:#ffffff;background:var(--acc-2)}
.nav .btn{margin-left:8px}
.navtoggle{display:none}
.navbtn{display:none}

@media(max-width:960px){
 .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
 .kontakt-grid{grid-template-columns:1fr}
}
@media(max-width:1010px){
 .navbtn{
  display:block;margin-left:auto;width:44px;height:44px;cursor:pointer;
  position:relative;border-radius:9px;border:1px solid var(--line-2);
 }
 .navbtn span,.navbtn span::before,.navbtn span::after{
  content:"";position:absolute;left:12px;width:20px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s;
 }
 .navbtn span{top:21px}
 .navbtn span::before{top:-6px;left:0}
 .navbtn span::after{top:6px;left:0}
 .nav{
  position:fixed;inset:66px 0 0;background:var(--bg);
  flex-direction:column;align-items:stretch;gap:0;padding:18px;
  transform:translateX(100%);transition:transform .22s;overflow-y:auto;
  margin-left:0;
 }
 .nav a{padding:15px 14px;font-size:1.05rem;border-radius:10px;min-height:44px;display:flex;align-items:center}
 .nav .btn{margin:14px 0 0;justify-content:center}
 .navtoggle:checked ~ .nav{transform:translateX(0)}
 .navtoggle:checked ~ .navbtn span{background:transparent}
 .navtoggle:checked ~ .navbtn span::before{transform:translateY(6px) rotate(45deg)}
 .navtoggle:checked ~ .navbtn span::after{transform:translateY(-6px) rotate(-45deg)}
}
@media(max-width:620px){
 .foot-grid{grid-template-columns:1fr;gap:26px}
 .hero{padding-top:34px}
 .answer-box{padding:18px 20px}
 .card{padding:20px}
 .prose table{font-size:.88rem}
 .prose th,.prose td{padding:9px 10px}
}