/* www/assets/css/horella-v10.css — Startseite + Unterseiten
   (agb/avv/datenschutz/impressum/widerruf/404). Seit dem Wurzeltausch
   25.08.2026 die aktive Stylesheet-Datei für diese sieben Seiten (vormals
   /v10/assets/css/site.css während der Vorschau). Umbenannt, weil
   www/assets/css/site.css bereits ein anderes, älteres, aktuell
   ungenutztes File belegt (Phase 10a) — dieses hier NICHT überschreiben.
   Herkunft, unveraendert:
   1) @font-face — aus www/assets/css/app.css Zeile 1-30 (Detlef-Entscheidung
      25.08.2026: selbst gehostet statt CDs Google-Fonts-Link, einzige
      bewusste Abweichung von der CD-Lieferung, siehe Audit-Report).
   2) CD-Block A — kompletter <style>-Inhalt aus
      ui_kits/web/2026-08-25_Startseite_v10.html (Design-Projekt
      "Horella Design System", 03cfe906-ab46-4955-ae17-7c66cc6f18fb).
   3) CD-Block B — kompletter <style>-Inhalt aus
      ui_kits/web/2026-08-25_Unterseite_CD_Rahmen.html, selbes Projekt.
   Beide CD-Bloecke stehen hier aneinandergehaengt, byte-identisch zur
   Lieferung — keine Zeile wurde umgeschrieben, entfernt oder neu gescoped.
   Ueberschneidende Selektoren (:root, .wrap, .btn, Header/Footer) sind in
   beiden Bloecken bereits wortgleich; das ist so geliefert, keine Bearbeitung
   hier. */

/* ---- 1) @font-face, selbst gehostet (aus app.css, unveraendert) ---- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-italic-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 2) CD-Block A — 2026-08-25_Startseite_v10.html, <style> unveraendert ---- */
:root{
--ink:#1C2B28;--green:#17796B;--green-dark:#0F5A4F;--green-tint:#E4F0ED;
--apricot:#F2A65A;--apricot-deep:#DE8B33;--apricot-tint:#FDEFDD;
--cream:#FBF7F0;--white:#fff;--muted:#6B7A77;--muted-cream:#5D6B67;
--border:#E6E1D6;--border-strong:#D3CCBC;
--dark:#14332C;--muted-dark:#C9D6D1;
--font:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--r-sm:8px;--r-md:12px;--r-lg:16px;--r-full:999px;
--sh-card:0 4px 12px rgba(28,43,40,.08);--sh-shot:0 12px 28px rgba(28,43,40,.14);--sh-device:0 18px 38px rgba(28,43,40,.22);
--ring:0 0 0 3px rgba(23,121,107,.35);
--pad-sec:96px;--maxw:1152px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 64px}

/* ============ EINE Sektions-Grammatik ============ */
section{padding:var(--pad-sec) 0}
.s-cream{background:var(--cream)}
.s-white{background:var(--white)}
.s-dark{background:var(--dark);color:#fff}
.eyebrow{display:inline-flex;align-items:center;background:var(--green-tint);color:var(--green-dark);font-weight:600;font-size:13.5px;letter-spacing:.01em;border-radius:var(--r-full);padding:6px 14px}
.s-dark .eyebrow{background:rgba(255,255,255,.12);color:#EAF3F0}
h1{font-size:56px;line-height:1.05;letter-spacing:-.026em;font-weight:800;text-wrap:balance}
h2{font-size:38px;line-height:1.12;letter-spacing:-.022em;font-weight:800;text-wrap:balance}
h3{font-size:17.5px;line-height:1.35;font-weight:700}
.head{margin-bottom:48px}
.head h2{margin-top:16px}
.head .lede{margin-top:14px}
.head-c{text-align:center;max-width:660px;margin-left:auto;margin-right:auto}
.lede{font-size:19px;line-height:1.6;color:var(--muted-cream);text-wrap:pretty}
.s-dark .lede{color:var(--muted-dark)}
.p{margin-top:14px;font-size:17px;line-height:1.65;color:var(--muted-cream);text-wrap:pretty}
.s-dark .p{color:var(--muted-dark)}
.foot-note{margin-top:22px;font-size:15px;color:var(--muted)}
.s-dark .foot-note{color:#9FB3AD}

/* Split: Text + Visual, Seite wechselt sich ab */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.hero-split{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.split.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.split.flip .col-text{order:2}
.split.flip .col-vis{order:1}

/* EIN Button-Paar */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--green);color:#fff;border-radius:var(--r-sm);padding:12px 26px;font-weight:600;font-size:16px;transition:background .15s ease}
.btn:hover{background:var(--green-dark);color:#fff}
.btn-lg{min-height:56px;padding:16px 32px;font-size:17.5px}
.btn-sm{min-height:44px;padding:10px 18px;font-size:15px}
.btn-ghost{background:transparent;color:var(--green-dark);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--green-tint);color:var(--green-dark)}
.cta-row{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.cta-micro{margin-top:14px;font-size:14.5px;color:var(--muted)}

/* EINE Karten-Familie, drei Größen */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-card)}
.s-white .card{background:var(--cream)}
.card h3{margin-bottom:8px}
.card p{font-size:16px;line-height:1.6;color:var(--muted-cream);text-wrap:pretty}
.num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r-full);background:var(--apricot-tint);border:1px solid var(--apricot);color:#7A4A10;font-weight:700;font-size:14.5px;font-feature-settings:'tnum' 1;margin-bottom:16px}
.tile{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 12px;text-align:center;font-size:14.5px;font-weight:600;line-height:1.35;box-shadow:var(--sh-card)}
.s-cream .tile{background:var(--white)}
.tiles-note{margin-top:20px;text-align:center;font-size:15px;color:var(--muted)}

/* EIN Listen-Marker */
.checks{margin-top:26px;list-style:none;display:grid;gap:13px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.5;font-weight:500;text-wrap:pretty}
.checks li svg{flex:none;margin-top:4px}
.checks.tight li{font-weight:600}

/* EIN Bild-Rahmen */
.shot{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-shot);overflow:hidden}
.s-white .shot{border-color:var(--border-strong)}
.shot-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);background:#F7F3EC}
.dot{width:10px;height:10px;border-radius:50%;background:var(--border-strong)}
.shot-bar span{margin-left:8px;font-size:13px;color:var(--muted);font-weight:500}
.shot-body{padding:16px}
.shot-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.shot-head b{font-size:15.5px;font-weight:700}
.pill{font-size:12.5px;font-weight:600;color:var(--green-dark);background:var(--green-tint);border-radius:var(--r-full);padding:5px 11px;white-space:nowrap}
.plan{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.plan .col{display:grid;gap:8px;align-content:start}
.day{font-size:12px;font-weight:600;color:var(--muted);text-align:center}
.sh{border-radius:var(--r-sm);padding:8px 9px;font-size:12px;font-weight:600;line-height:1.3;border-left:3px solid var(--green);background:var(--green-tint);color:var(--green-dark)}
.sh em{display:block;font-style:normal;font-weight:500;color:var(--muted-cream);font-size:11.5px;margin-top:2px}
.sh.a{border-left-color:var(--apricot-deep);background:var(--apricot-tint);color:#7A4A10}
.sh.a em{color:#8A5C24}
.sh.g{background:#F1EFE9;border-left-color:var(--border-strong);color:var(--muted-cream)}
.sh.o{background:repeating-linear-gradient(135deg,#F4F1EA,#F4F1EA 6px,#EDE9E0 6px,#EDE9E0 12px);border-left-color:var(--border-strong);color:var(--muted);font-weight:500}

/* Bericht-Tabelle im gleichen Rahmen */
.rep-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-size:12.5px;font-weight:600;border-radius:var(--r-full);padding:5px 11px;border:1px solid var(--border);color:var(--muted-cream);background:var(--white)}
.chip.on{background:var(--green-tint);border-color:#BFDBD4;color:var(--green-dark)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--border)}
th:first-child,td:first-child{text-align:left}
th{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
td{font-feature-settings:'tnum' 1;font-weight:600}
td.n{color:var(--muted-cream);font-weight:500}
tr:last-child td{border-bottom:0}
.neg{color:#B4443A}
.pos{color:var(--green-dark)}

/* Störer */
.shot-wrap{position:relative;padding-top:74px}
.stoerer{position:absolute;z-index:2;top:0;right:-30px;display:grid;place-items:center;text-align:center;background:var(--apricot);color:var(--ink);padding:22px 26px;border-radius:26px;box-shadow:0 10px 22px rgba(28,43,40,.20);border:2px solid #fff;transform:rotate(-9deg)}
.stoerer::before{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(28,43,40,.32);border-radius:19px}
.stoerer b{display:block;font-size:21px;font-weight:800;letter-spacing:-.012em;line-height:1.12;max-width:8.6em}
.stoerer i{display:block;font-style:normal;font-size:15.5px;font-weight:600;line-height:1.2;margin-top:5px;color:#3A2A12}

/* Geräte — gleiche Rahmen-Logik, nur gedreht */
.fan{position:relative;width:100%;aspect-ratio:528/520}
.ph{position:absolute;background:#fff;border-radius:34px;padding:7px;box-shadow:var(--sh-device);border:1px solid var(--border);transform-origin:center}
.ph img{width:100%;border-radius:28px}
.ph.p1{width:35.98%;left:5.49%;top:50%;transform:translateY(calc(-50% + 6.3%)) rotate(-8deg);z-index:1}
.ph.p2{width:35.98%;left:58.52%;top:50%;transform:translateY(calc(-50% + 6.3%)) rotate(8deg);z-index:1}
.ph.p3{width:39.77%;left:15.34%;top:50%;transform:translateY(calc(-50% + 0.9%)) rotate(-4deg);z-index:2}
.ph.p4{width:44.70%;left:27.65%;top:50%;transform:translateY(calc(-50% - 1.2%));z-index:3}
.tabs{position:relative;width:100%;aspect-ratio:528/420}
.tabwrap{position:absolute;transform-origin:center}
.tab{position:relative;background:#fff;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 22px 46px rgba(0,0,0,.45)}
.tab .crop{position:relative;overflow:hidden}
.tab img{position:absolute;max-width:none}
.wa{width:56.82%;left:1.14%;top:24.76%;transform:rotate(-2deg);z-index:2}
.wa .crop{aspect-ratio:300/280}
.wa img{width:223.67%;left:-61.67%;top:-34.64%}
.wb{width:35.23%;left:60.80%;top:7.74%;transform:rotate(3.5deg);z-index:1}
.wb .crop{aspect-ratio:186/303}
.wb img{width:223.66%;left:-61.83%;top:-2.97%}
.art{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-shot);background:var(--dark)}
.art svg{width:100%;height:auto}

/* Header / Footer — CD-Baustein, identisch auf allen acht Seiten.
   Hoehe verriegelt: 72px Inhaltszeile + 1px Trennlinie = 73px, bei jeder Breite.
   .nav traegt die Hoehe selbst und liegt INNERHALB von .wrap — kein Padding-Konflikt mehr. */
.site-header{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px;min-height:72px;padding:0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink);white-space:nowrap}
.nav-r{display:flex;align-items:center;gap:6px;font-size:15px}
.navlink{display:inline-flex;align-items:center;height:44px;padding:0 12px;color:var(--ink);font-weight:500;border-radius:var(--r-sm)}
.navlink:hover{color:var(--green-dark);background:var(--green-tint)}
.burger{display:none;width:44px;height:44px;flex:0 0 auto;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:pointer}
.burger:hover{background:var(--green-tint);border-color:#BFDBD4}
.hdr-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:59;background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 14px 28px rgba(28,43,40,.12)}
.hdr-menu[data-open="true"]{display:block}
.hdr-menu-in{max-width:var(--maxw);margin:0 auto;padding:8px 20px 14px;display:grid;gap:2px}
.hdr-menu a{display:flex;align-items:center;min-height:48px;padding:0 8px;font-size:16.5px;font-weight:500;color:var(--ink);border-radius:var(--r-sm)}
.hdr-menu a:hover{background:var(--green-tint);color:var(--green-dark)}
.cta-band{text-align:center}
.cta-band .lede{max-width:44em;margin:12px auto 0}
.cta-band .btn{margin-top:30px}
.cta-band .btn:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.site-footer{background:var(--white);border-top:1px solid var(--border);padding:26px 0 30px;font-size:14.5px;color:var(--muted-cream)}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-links{display:flex;gap:2px;flex-wrap:wrap}
.footer-links a{color:var(--muted-cream);display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-sm)}
.footer-links a:hover{color:var(--green-dark);background:var(--green-tint)}
.footer-legal{margin-top:6px;font-size:13.5px;color:var(--muted)}

/* ============ Mobil ============ */
@media (max-width:900px){
:root{--pad-sec:56px}
.wrap{padding:0 20px}
h1{font-size:33px;letter-spacing:-.02em}
h2{font-size:27px}
.lede{font-size:16.5px}
.head{margin-bottom:32px}
.split{grid-template-columns:minmax(0,1fr);gap:34px}
.split.flip{grid-template-columns:minmax(0,1fr)}
.hero-split{grid-template-columns:minmax(0,1fr)}
.split.flip .col-text{order:1}
.split.flip .col-vis{order:2}
.grid-3{grid-template-columns:minmax(0,1fr);gap:12px}
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{padding:22px}
.cta-row{margin-top:24px;display:grid;gap:10px}
.cta-row .btn{width:100%}
.nav{height:72px;min-height:72px}
.navlink{display:none}
.burger{display:inline-flex}
.nav-cta{min-height:38px;height:38px;padding:0 14px;font-size:14.5px}
.stoerer{top:8px;right:-4px;padding:15px 17px;border-radius:19px}
.shot-wrap{padding-top:46px}
.stoerer::before{inset:4px;border-radius:14px}
.stoerer b{font-size:15.5px}
.stoerer i{font-size:12px;margin-top:3px}
.plan{grid-template-columns:repeat(3,minmax(0,1fr))}
.ph{border-radius:24px;padding:5px}
.ph img{border-radius:20px}
.cta-band .btn{width:100%}
.footer-top{justify-content:center;text-align:center}
.site-footer{text-align:center}
}

/* ---- 3) CD-Block B — 2026-08-25_Unterseite_CD_Rahmen.html, <style> unveraendert ---- */
:root{
--ink:#1C2B28;--green:#17796B;--green-dark:#0F5A4F;--green-tint:#E4F0ED;
--apricot:#F2A65A;--apricot-tint:#FDEFDD;
--cream:#FBF7F0;--white:#fff;--muted:#6B7A77;--muted-cream:#5D6B67;
--border:#E6E1D6;--border-strong:#D3CCBC;
--font:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--r-sm:8px;--r-md:12px;--r-lg:16px;--r-full:999px;
--ring:0 0 0 3px rgba(23,121,107,.35);
--maxw:1152px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 64px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--green);color:#fff;border-radius:var(--r-sm);padding:12px 26px;font-weight:600;font-size:16px;transition:background .15s ease}
.btn:hover{background:var(--green-dark);color:#fff}
.btn-sm{min-height:44px;padding:10px 18px;font-size:15px}

/* Header / Footer — CD-Baustein, identisch auf allen acht Seiten.
   Höhe verriegelt: 72px Inhaltszeile + 1px Trennlinie = 73px, bei jeder Breite. */
.site-header{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px;min-height:72px;padding:0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink);white-space:nowrap}
.nav-r{display:flex;align-items:center;gap:6px;font-size:15px}
.navlink{display:inline-flex;align-items:center;height:44px;padding:0 12px;color:var(--ink);font-weight:500;border-radius:var(--r-sm)}
.navlink:hover{color:var(--green-dark);background:var(--green-tint)}
.burger{display:none;width:44px;height:44px;flex:0 0 auto;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:pointer}
.burger:hover{background:var(--green-tint);border-color:#BFDBD4}
.hdr-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:59;background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 14px 28px rgba(28,43,40,.12)}
.hdr-menu[data-open="true"]{display:block}
.hdr-menu-in{max-width:var(--maxw);margin:0 auto;padding:8px 20px 14px;display:grid;gap:2px}
.hdr-menu a{display:flex;align-items:center;min-height:48px;padding:0 8px;font-size:16.5px;font-weight:500;color:var(--ink);border-radius:var(--r-sm)}
.hdr-menu a:hover{background:var(--green-tint);color:var(--green-dark)}
.site-footer{background:var(--white);border-top:1px solid var(--border);padding:26px 0 30px;font-size:14.5px;color:var(--muted-cream)}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-links{display:flex;gap:2px;flex-wrap:wrap}
.footer-links a{color:var(--muted-cream);display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-sm)}
.footer-links a:hover{color:var(--green-dark);background:var(--green-tint)}
.footer-legal{margin-top:6px;font-size:13.5px;color:var(--muted)}

/* Textseite — nur Rahmen, kein Inhalt. Der Rechtstext wird 1:1 hier eingesetzt. */
.legal{padding:72px 0 96px}
.legal-in{max-width:720px}
.legal h1{font-size:40px;line-height:1.1;letter-spacing:-.024em;font-weight:800}
.legal .stand{margin-top:12px;font-size:14.5px;color:var(--muted)}
.legal-body{margin-top:36px}
.legal-body h2{font-size:22px;line-height:1.25;letter-spacing:-.012em;font-weight:700;margin-top:38px}
.legal-body h3{font-size:17.5px;font-weight:700;margin-top:26px}
.legal-body p,.legal-body li{font-size:16.5px;line-height:1.7;color:var(--muted-cream);text-wrap:pretty}
.legal-body p{margin-top:14px}
.legal-body ul,.legal-body ol{margin-top:14px;padding-left:22px;display:grid;gap:8px}
.legal-body a{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}
.slot{border:1.5px dashed var(--border-strong);border-radius:var(--r-md);background:var(--white);padding:22px 24px;color:var(--muted)}
.slot b{display:block;color:var(--ink);font-size:15.5px}
.slot p{margin-top:8px;font-size:15px;color:var(--muted)}
.legal-back{margin-top:56px;padding-top:24px;border-top:1px solid var(--border)}

@media (max-width:900px){
.wrap{padding:0 20px}
.nav{height:72px;min-height:72px}
.navlink{display:none}
.burger{display:inline-flex}
.nav-cta{min-height:38px;height:38px;padding:0 14px;font-size:14.5px}
.legal{padding:48px 0 64px}
.legal h1{font-size:31px;letter-spacing:-.02em}
.legal-body h2{font-size:20px}
.footer-top{justify-content:center;text-align:center}
.site-footer{text-align:center}
}