/* =============================================================================
   BRELYNT · Hauptwebsite (apps/web) – eine Datei für alle Seiten.
   Optik wie Kundenportal und App (Tokens aus apps/portal/src/app/optik.css):
   ruhig, sachlich. Seit Okt. 2026 mit Bauplan-Flächen, Produktbildern in Geräterahmen
   und Zeichnungen (Abschnitt „Ausbau Optik“ am Ende) – Schatten nur an Geräten.
   Hell/Dunkel nach Systemeinstellung, umschaltbar (data-theme auf <html>).
   ============================================================================= */

@font-face{font-family:"Instrument Sans Variable";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/schriften/instrument-sans-latin-wght-normal.woff2) format("woff2-variations");
  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:"Instrument Sans Variable";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/schriften/instrument-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Farben: hell ------------------------------------------------------- */
:root{
  color-scheme:light;
  --paper:#ffffff; --ground:#f4f6f5; --ground-2:#e9edeb;
  --line:#dee2e0; --line-2:#c9cfcc;
  --ink:#1c2733; --ink-2:#3e4b57; --muted:#606c78;
  --accent:#0f6e6e; --accent-soft:#e6f0ef; --accent-line:#b5d4d2; --accent-hover:#0c5c5c; --auf-accent:#ffffff;
  --ok:#2f7d53; --ok-soft:#e8f2ec;
  --warn:#9a6214; --warn-soft:#f6eee1;
  --crit:#b4332f; --crit-soft:#f7e7e6;
  --info:#2b6a8f; --info-soft:#e6eef3;
  --violet:#5e5a8c; --violet-soft:#eeedf4;
  --marke-verlauf:linear-gradient(96deg,#0f6e6e,#1fa79c 60%,#35c2b5);
  --r:6px; --r-gross:10px;
  --sans:"Instrument Sans Variable",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --breite:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#181f28; --ground:#10161d; --ground-2:#1f2832;
    --line:#2c3642; --line-2:#3a4552;
    --ink:#e2e8ee; --ink-2:#bac4ce; --muted:#929eaa;
    --accent:#4ab6b0; --accent-soft:#183030; --accent-line:#2e5d5b; --accent-hover:#5cc4be; --auf-accent:#0b1d1d;
    --ok:#5dbb86; --ok-soft:#172b23;
    --warn:#d9a24f; --warn-soft:#2e2619;
    --crit:#e8716a; --crit-soft:#361e1d;
    --info:#6aa9d6; --info-soft:#172836;
    --violet:#a7a3d6; --violet-soft:#23223a;
    --marke-verlauf:linear-gradient(96deg,#4ab6b0,#7fd9cf 60%,#a6ece3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#181f28; --ground:#10161d; --ground-2:#1f2832;
  --line:#2c3642; --line-2:#3a4552;
  --ink:#e2e8ee; --ink-2:#bac4ce; --muted:#929eaa;
  --accent:#4ab6b0; --accent-soft:#183030; --accent-line:#2e5d5b; --accent-hover:#5cc4be; --auf-accent:#0b1d1d;
  --ok:#5dbb86; --ok-soft:#172b23;
  --warn:#d9a24f; --warn-soft:#2e2619;
  --crit:#e8716a; --crit-soft:#361e1d;
  --info:#6aa9d6; --info-soft:#172836;
  --violet:#a7a3d6; --violet-soft:#23223a;
  --marke-verlauf:linear-gradient(96deg,#4ab6b0,#7fd9cf 60%,#a6ece3);
}

/* --- Grundlagen --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.6 var(--sans);font-feature-settings:"tnum" 1;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2rem,1.3rem + 3.2vw,3.25rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.2rem)}
h3{font-size:1.125rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
[hidden]{display:none!important}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 24px}}
.leise{color:var(--muted)}
.klein{font-size:.875rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--paper);color:var(--ink);padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r);z-index:100}
.skip:focus{top:12px}

/* --- Wortmarke ---------------------------------------------------------- */
.marke{display:inline-flex;align-items:center;text-decoration:none;font-weight:700;font-size:1.25rem;letter-spacing:.08em}
.marke b{background:var(--marke-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

/* --- Knöpfe -------------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r);
  font:600 15px/1.2 var(--sans);text-decoration:none;border:1px solid var(--accent);background:var(--accent);color:var(--auf-accent);cursor:pointer;white-space:nowrap}
.knopf:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--auf-accent)}
.knopf--zweit{background:transparent;color:var(--ink);border-color:var(--line-2)}
.knopf--zweit:hover{background:var(--paper);color:var(--ink);border-color:var(--ink-2)}
.knopf--klein{min-height:38px;padding:8px 14px;font-size:14px}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.knoepfe .knopf{flex:1 1 auto}
@media (min-width:560px){.knoepfe .knopf{flex:0 0 auto}}
.textlink{font-weight:600;text-decoration:none}
.textlink:hover{text-decoration:underline}

/* --- Kopf und Navigation -------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.kopf__innen{display:flex;align-items:center;gap:12px;min-height:64px}
.kopf__nav{display:none;align-items:center;gap:4px;margin-left:18px}
.kopf__nav > a,.kopf__nav summary{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:var(--r);color:var(--ink-2);text-decoration:none;font-weight:550;font-size:15px;cursor:pointer;list-style:none}
.kopf__nav summary::-webkit-details-marker{display:none}
.kopf__nav > a:hover,.kopf__nav summary:hover,.kopf__nav details[open] summary{background:var(--ground);color:var(--ink)}
.kopf__nav a[aria-current="page"]{color:var(--accent)}
.kopf__rechts{margin-left:auto;display:flex;align-items:center;gap:8px}
.kopf__anmelden{display:none;color:var(--ink-2);text-decoration:none;font-weight:550;font-size:15px;padding:8px 10px}
.kopf__anmelden:hover{color:var(--ink)}
.pfeil{width:10px;height:10px;transition:transform .15s}
details[open] > summary .pfeil{transform:rotate(180deg)}
.kopf__start{display:none}
@media (min-width:1000px){
  .kopf__nav{display:flex}
  .kopf__anmelden{display:inline-flex}
  .kopf__start{display:inline-flex}
  .kopf__menue{display:none}
}
/* Produkte-Fenster (Desktop) */
.produkte-fenster{position:absolute;left:16px;right:16px;top:64px;max-width:var(--breite);margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);padding:18px;box-shadow:0 8px 24px -10px rgba(28,39,51,.25)}
.nav-produkte{position:static}
.produkte-fenster__raster{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.produkte-fenster__fuss{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:12px;padding-top:12px;font-size:14px}
.p-link{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:start;padding:10px;border-radius:var(--r);text-decoration:none;color:var(--ink)}
.p-link:hover{background:var(--ground);color:var(--ink)}
.p-link b{display:block;font-weight:600;font-size:15px}
.p-link small{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.ic{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.ic svg{width:20px;height:20px}
/* Menü (Handy) */
.kopf__menue summary{list-style:none;cursor:pointer}
.kopf__menue summary::-webkit-details-marker{display:none}
.menue-knopf{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink);background:transparent}
.menue-knopf svg{width:20px;height:20px}
.menue-blatt{position:fixed;left:0;right:0;top:64px;bottom:0;overflow-y:auto;background:var(--paper);border-top:1px solid var(--line);padding:12px 16px 32px}
.menue-blatt h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px;font-weight:600}
.menue-blatt > a{display:block;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:550}
.menue-blatt .knoepfe .knopf{flex:1 1 100%}
.thema{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r);background:transparent;color:var(--ink-2);cursor:pointer}
.thema svg{width:18px;height:18px}
.thema:hover{color:var(--ink);border-color:var(--ink-2)}

/* --- Abschnitte ------------------------------------------------------------ */
.abschnitt{padding:56px 0}
@media (min-width:900px){.abschnitt{padding:84px 0}}
.abschnitt--weiss{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.oberzeile{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.einleitung{font-size:1.125rem;color:var(--ink-2);max-width:62ch}
.kopfzeile{max-width:760px;margin:0 0 32px}
.kopfzeile--mitte{margin-left:auto;margin-right:auto;text-align:center}
.kopfzeile--mitte .einleitung{margin-left:auto;margin-right:auto}

/* --- Hero ------------------------------------------------------------------- */
.hero{padding:40px 0 56px}
@media (min-width:900px){.hero{padding:72px 0 84px}}
.hero__raster{display:grid;gap:36px;align-items:center}
@media (min-width:1000px){.hero__raster{grid-template-columns:1.05fr 1fr;gap:48px}}
.hero h1{max-width:18ch}
.hero .einleitung{font-size:1.2rem}
.vertrauen{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;color:var(--muted);font-size:14px}
.vertrauen li{display:inline-flex;align-items:center;gap:6px}
.vertrauen svg{width:16px;height:16px;color:var(--ok)}
.seitenhero{padding:40px 0 48px;background:var(--paper);border-bottom:1px solid var(--line)}
@media (min-width:900px){.seitenhero{padding:64px 0 64px}}
.brotkrumen{font-size:14px;color:var(--muted);margin:0 0 14px}
.brotkrumen a{color:var(--muted)}

/* --- Karten und Raster -------------------------------------------------------- */
.raster{display:grid;gap:16px}
@media (min-width:640px){.raster--2,.raster--3,.raster--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.raster--3{grid-template-columns:repeat(3,1fr)}.raster--4{grid-template-columns:repeat(4,1fr)}}
.karte{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);padding:22px}
.abschnitt--weiss .karte{background:var(--ground)}
.karte h3{margin-top:12px}
.karte p:last-child{margin-bottom:0}
.karte--link{display:block;text-decoration:none;color:var(--ink);transition:border-color .15s}
.karte--link:hover{border-color:var(--accent-line);color:var(--ink)}
.karte--link .weiter{display:inline-block;margin-top:10px;color:var(--accent);font-weight:600;font-size:15px}
.karte__kopf{display:flex;align-items:center;gap:10px;justify-content:space-between}
.liste-haken{list-style:none;padding:0;margin:0}
.liste-haken li{position:relative;padding-left:26px;margin:0 0 8px}
.liste-haken li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.liste-haken--leise li::before{border-color:var(--muted)}

/* Pillen (Status, wie im Portal) */
.pille{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;line-height:1;padding:5px 8px;border-radius:999px;background:var(--ground-2);color:var(--ink-2);white-space:nowrap}
.pille--ok{background:var(--ok-soft);color:var(--ok)}
.pille--warn{background:var(--warn-soft);color:var(--warn)}
.pille--crit{background:var(--crit-soft);color:var(--crit)}
.pille--info{background:var(--info-soft);color:var(--info)}
.pille--violet{background:var(--violet-soft);color:var(--violet)}
.pille--accent{background:var(--accent-soft);color:var(--accent)}

/* --- So läuft ein Auftrag (Kette) ------------------------------------------- */
.kette{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:k}
@media (min-width:640px){.kette{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.kette{grid-template-columns:repeat(4,1fr)}}
.kette li{counter-increment:k;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);padding:18px 18px 16px;position:relative}
.abschnitt--weiss .kette li{background:var(--ground)}
.kette li::before{content:counter(k);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--auf-accent);font-weight:700;font-size:14px;margin-bottom:10px}
.kette b{display:block;font-size:1.05rem;margin-bottom:4px}
.kette span{display:block;color:var(--ink-2);font-size:15px}
.kette small{display:block;margin-top:8px;color:var(--muted);font-size:13px}

/* --- Ablauf auf Produktseiten ----------------------------------------------- */
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s;max-width:760px}
.schritte li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:14px;padding:0 0 22px;position:relative}
.schritte li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);font-weight:700;background:var(--paper)}
.schritte li::after{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;background:var(--line)}
.schritte li:last-child::after{display:none}
.schritte b{display:block;margin:4px 0 2px}
.schritte span{color:var(--ink-2)}

/* --- Zweispalter Text + Bild ------------------------------------------------------ */
.zwei{display:grid;gap:32px;align-items:center}
@media (min-width:960px){.zwei{grid-template-columns:1fr 1fr;gap:56px}.zwei--umgekehrt > :first-child{order:2}}

/* --- Beispielansichten (UI-Illustrationen) --------------------------------------- */
.ansicht{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-gross);overflow:hidden;font-size:14px;line-height:1.45;color:var(--ink)}
.ansicht__leiste{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--ground)}
.ansicht__leiste .marke{font-size:13px}
.ansicht__titel{font-weight:600;font-size:13px;color:var(--ink-2)}
.ansicht__hinweis{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);border:1px dashed var(--line-2);border-radius:999px;padding:3px 8px;white-space:nowrap}
.ansicht__inhalt{padding:14px}
.ansicht__zeile{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.ansicht__zeile:last-child{border-bottom:0}
.ansicht__zeile b{font-weight:600;display:block}
.ansicht__zeile small{display:block;color:var(--muted);font-size:12.5px}
.ansicht__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ansicht__kpi{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.ansicht__kpi small{display:block;color:var(--muted);font-size:11.5px}
.ansicht__kpi b{font-size:18px;font-weight:650}
.zeitleiste{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:10px 0 2px}
.zeitleiste span{font-size:11px;font-weight:600;text-align:center;padding:6px 4px;border-radius:4px;background:var(--ground-2);color:var(--muted)}
.zeitleiste span.erl{background:var(--accent-soft);color:var(--accent)}
.zeitleiste span.jetzt{background:var(--accent);color:var(--auf-accent)}
.ansicht__notiz{background:var(--ground);border-radius:var(--r);padding:10px 12px;font-size:13.5px;color:var(--ink-2);margin:10px 0 0}
.ansicht__notiz b{color:var(--ink)}
/* Handy-Rahmen */
.handy{width:min(300px,100%);margin:0 auto;border:1px solid var(--line-2);border-radius:28px;padding:10px;background:var(--paper)}
.handy__bild{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--ground)}
.handy__kopf{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--paper);border-bottom:1px solid var(--line);font-size:13px}
.handy__kopf b{font-size:15px}
.handy__karte{background:var(--paper);border:1px solid var(--line);border-radius:12px;margin:10px;padding:12px;font-size:13.5px}
.handy__karte b{display:block;font-size:14.5px}
.handy__karte small{color:var(--muted);display:block}
.handy__knopf{display:block;text-align:center;background:var(--accent);color:var(--auf-accent);border-radius:8px;padding:10px;font-weight:600;font-size:14px;margin-top:10px}
.handy__hinweis{text-align:center;font-size:11px;color:var(--muted);padding:6px 0 10px}

/* --- Vergleich „drei Abos“ ----------------------------------------------------------- */
.vergleich{display:grid;gap:16px}
@media (min-width:860px){.vergleich{grid-template-columns:1fr 1fr}}
.vergleich .karte h3{margin-top:0}
.vergleich__vorher{border-style:dashed}
.vergleich__nachher{border-color:var(--accent-line)}

/* --- Preise ------------------------------------------------------------------------ */
.preise{display:grid;gap:16px;align-items:stretch}
@media (min-width:720px){.preise{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.preise--4{grid-template-columns:repeat(4,1fr)}}
.preis{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);padding:22px}
.preis--hervor{border:2px solid var(--accent)}
.preis h3{margin:8px 0 4px;font-size:1.25rem}
.preis__fuer{color:var(--ink-2);font-size:15px;min-height:3em}
.preis__betrag{font-size:2rem;font-weight:700;letter-spacing:-.02em;margin:8px 0 0}
.preis__betrag small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.preis__einrichtung{color:var(--muted);font-size:14px;margin:2px 0 14px}
.preis .liste-haken{font-size:15px;margin-bottom:18px}
.preis .knopf{margin-top:auto}
.preis__alt{text-decoration:line-through;color:var(--muted);font-weight:500;font-size:1rem;margin-left:6px}
.hinweisbox{background:var(--info-soft);color:var(--ink);border-radius:var(--r-gross);padding:14px 16px;font-size:15px}
.hinweisbox b{color:var(--info)}
.hinweisbox--warn{background:var(--warn-soft)}
.hinweisbox--warn b{color:var(--warn)}

/* Tabellen (nur innen scrollbar, nie die Seite) */
.tabelle-rahmen{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-gross);background:var(--paper)}
.tabelle-rahmen table{border-collapse:collapse;width:100%;min-width:720px;font-size:14.5px}
.tabelle-rahmen th,.tabelle-rahmen td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tabelle-rahmen thead th{position:sticky;top:0;background:var(--paper);font-weight:650}
.tabelle-rahmen td:not(:first-child),.tabelle-rahmen th:not(:first-child){text-align:center}
.tabelle-rahmen tbody th{font-weight:500}
.tabelle-rahmen .gruppe th{background:var(--ground);font-weight:650;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.ja{color:var(--ok);font-weight:700}
.nein{color:var(--muted)}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:14px 0;font-weight:600;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding:0 0 16px;color:var(--ink-2)}

/* --- Schlussaufruf --------------------------------------------------------------------- */
.schluss{background:var(--paper);border:1px solid var(--accent-line);border-radius:var(--r-gross);padding:28px 22px;display:grid;gap:18px;align-items:center}
@media (min-width:900px){.schluss{grid-template-columns:1.4fr 1fr;padding:40px}}
.schluss h2{margin-bottom:8px}
.schluss p{margin:0;color:var(--ink-2)}
.schluss .knoepfe{margin:0}
@media (min-width:900px){.schluss .knoepfe{justify-content:flex-end}}

/* --- Formular ---------------------------------------------------------------------------- */
.formular{display:grid;gap:14px}
.formular__zwei{display:grid;gap:14px}
@media (min-width:640px){.formular__zwei{grid-template-columns:1fr 1fr}}
.feld label,.feld legend{display:block;font-weight:600;font-size:14.5px;margin:0 0 6px}
.feld small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.feld input,.feld select,.feld textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper);color:var(--ink);font:400 16px/1.4 var(--sans)}
.feld textarea{min-height:120px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.feld fieldset{border:0;padding:0;margin:0}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;font-weight:500;cursor:pointer;margin:0}
.wahl input{width:18px;height:18px;min-height:0;accent-color:var(--accent)}
.haken{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14.5px;color:var(--ink-2)}
.haken input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.honig{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.meldung{border-radius:var(--r);padding:12px 14px;font-weight:500}
.meldung--ok{background:var(--ok-soft);color:var(--ok)}
.meldung--fehler{background:var(--crit-soft);color:var(--crit)}

/* --- Fuß ---------------------------------------------------------------------------------- */
.fuss{background:var(--paper);border-top:1px solid var(--line);padding:48px 0 28px;margin-top:0;font-size:15px}
.fuss__raster{display:grid;gap:28px}
@media (min-width:720px){.fuss__raster{grid-template-columns:1.4fr repeat(3,1fr)}}
.fuss h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 10px}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin:0 0 8px}
.fuss a{color:var(--ink-2);text-decoration:none}
.fuss a:hover{color:var(--ink);text-decoration:underline}
.fuss__unten{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;border-top:1px solid var(--line);margin-top:32px;padding-top:18px;color:var(--muted);font-size:14px}
.fuss__unten a{color:var(--muted)}

/* --- Rechtstexte ------------------------------------------------------------------------------ */
.blatt{max-width:820px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);padding:24px 18px;margin:32px auto 56px}
@media (min-width:720px){.blatt{padding:40px 48px}}
.blatt h1{font-size:clamp(1.75rem,1.4rem + 1.5vw,2.4rem)}
.blatt h2{font-size:1.3rem;margin-top:1.8em}
.blatt h3{font-size:1.05rem;margin-top:1.4em}
.blatt address{font-style:normal;margin:0 0 1em}
.blatt .stand{color:var(--muted);font-size:14px}
.blatt .kasten{background:var(--ground);border-left:3px solid var(--accent);border-radius:var(--r);padding:14px 16px;margin:0 0 1.2em}
.blatt table{border-collapse:collapse;width:100%;margin:0 0 1em;font-size:15px}
.blatt th,.blatt td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.blatt th{width:30%;font-weight:600}
@media (max-width:560px){.blatt th,.blatt td{display:block;width:auto;padding:6px 0}.blatt th{border-bottom:0;padding-top:12px}}
.fassung{display:inline-block;font-size:12px;font-weight:600;color:var(--violet);background:var(--violet-soft);border-radius:999px;padding:3px 9px;margin:0 0 8px}
.neu-abschnitt{border-left:3px solid var(--violet);padding-left:14px;margin-left:-17px}
@media (max-width:719px){.neu-abschnitt{margin-left:0}}

/* --- Merle anrufen: Knopf im Kopf, Leiste unten (Handy), Anruf-Block ------------------- */
.kopf__anruf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--accent-line);border-radius:var(--r);background:var(--accent-soft);color:var(--accent);text-decoration:none;font-weight:650;font-size:15px;white-space:nowrap}
.kopf__anruf:hover{border-color:var(--accent);color:var(--accent-hover)}
.kopf__anruf svg{width:18px;height:18px;flex:none}
.kopf__anruf-text{display:none}
@media (min-width:430px){.kopf__anruf-text{display:inline}}
@media (min-width:1000px) and (max-width:1219px){.kopf__anruf-text{display:none}.kopf__anruf{padding:0}}
@media (max-width:429px){.kopf__anruf{padding:0}}
.anrufleiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--accent);color:var(--auf-accent);text-decoration:none;font-weight:650;font-size:16px}
.anrufleiste:hover{background:var(--accent-hover);color:var(--auf-accent)}
.anrufleiste svg{width:20px;height:20px;flex:none}
.anrufleiste span{font-weight:500;opacity:.92}
@media (max-width:999px){body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}}
@media (min-width:1000px){.anrufleiste{display:none}}
.merle-anruf{display:grid;gap:14px;align-items:center;background:var(--paper);border:1px solid var(--accent-line);border-radius:var(--r-gross);padding:18px 20px;margin:24px 0 0}
.abschnitt--weiss .merle-anruf,.seitenhero .merle-anruf{background:var(--ground)}
@media (min-width:720px){.merle-anruf{grid-template-columns:auto 1fr auto;padding:20px 24px}}
.merle-anruf .ic{width:48px;height:48px}
.merle-anruf .ic svg{width:24px;height:24px}
.merle-anruf p{margin:0;color:var(--ink-2)}
.merle-anruf b{color:var(--ink)}
.merle-anruf__nummer{display:inline-block;margin-top:2px;font-size:clamp(1.45rem,1.1rem + 1.6vw,2rem);font-weight:700;letter-spacing:-.01em;color:var(--accent);text-decoration:none;white-space:nowrap;line-height:1.2}
.merle-anruf__nummer:hover{color:var(--accent-hover)}
.merle-anruf .knoepfe{margin:0}
.merle-anruf--gross{padding:22px}
@media (min-width:720px){
  .merle-anruf--gross{grid-template-columns:auto 1fr}
  .merle-anruf--gross .knoepfe{grid-column:1 / -1}
  .merle-anruf--gross .merle-anruf__nummer{font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem)}
}
@media (min-width:1000px){.seitenhero .merle-anruf--gross{max-width:860px;grid-template-columns:auto 1fr auto}.seitenhero .merle-anruf--gross .knoepfe{grid-column:auto}}

/* --- Laufzeit-Umschalter -------------------------------------------------------------- */
.umschalter{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:var(--r-gross);background:var(--paper);margin:0;min-width:0}
.umschalter legend{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.umschalter label{position:relative;display:inline-flex;margin:0;cursor:pointer}
.umschalter input{position:absolute;opacity:0;width:1px;height:1px}
.umschalter span{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:6px 14px;border-radius:var(--r);font-weight:600;font-size:15px;color:var(--ink-2);line-height:1.2}
.umschalter small{font-weight:600;font-size:12px;color:var(--ok)}
.umschalter input:checked + span{background:var(--accent);color:var(--auf-accent)}
.umschalter input:checked + span small{color:var(--auf-accent)}
.umschalter input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.umschalter-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 20px}
.umschalter-zeile p{margin:0;color:var(--muted);font-size:14px}
.preis__laufzeit{color:var(--ok);font-size:13.5px;font-weight:600;margin:2px 0 0;min-height:1.4em}

/* --- Nutzen-Rechner ------------------------------------------------------------------- */
.rechner{display:grid;gap:16px;align-items:start}
@media (min-width:960px){.rechner{grid-template-columns:1.1fr 1fr}}
.rechner__felder{display:grid;gap:14px}
@media (min-width:560px){.rechner__felder{grid-template-columns:1fr 1fr}}
.rechner .feld input,.rechner .feld select{font-variant-numeric:tabular-nums}
.rechner__ergebnis{background:var(--paper);border:2px solid var(--accent);border-radius:var(--r-gross);padding:20px 22px}
.rechner__ergebnis dl{margin:0;display:grid;gap:0}
.rechner__ergebnis dl > div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rechner__ergebnis dt{color:var(--ink-2)}
.rechner__ergebnis dd{margin:0;font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.rechner__ergebnis .summe dd{font-size:1.3rem;color:var(--accent)}
.rechner__ergebnis .amort{background:var(--accent-soft);border-radius:var(--r);padding:12px 14px;margin:14px 0 0;color:var(--ink)}
.beispiel{display:inline-block;font-size:12px;font-weight:600;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:3px 9px;margin:0 0 10px}

/* Schieberegler im Nutzen-Rechner */
.rechner__felder{gap:22px 24px}
.regler{min-width:0}
.regler__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:0 0 6px;min-height:40px}
.regler__kopf label,.regler__kopf > span{font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink-2)}
.regler__wert{flex:none;min-width:7.2ch;padding:2px 8px;margin:0 -8px 0 0;border:1px dashed transparent;border-radius:var(--r);background:none;color:var(--accent);font:700 1.45rem/1.15 var(--sans);font-variant-numeric:tabular-nums;text-align:right;cursor:text;white-space:nowrap}
.regler__wert:hover{border-color:var(--accent-line)}
.regler__wert:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.regler__eingabe{flex:none;width:8.5ch;min-height:40px;padding:4px 8px;border:2px solid var(--accent);border-radius:var(--r);background:var(--paper);color:var(--ink);font:700 1.2rem/1.2 var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.regler small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.regler input[type=range]{--fuell:50%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.regler input[type=range]:focus{outline:none}
.regler input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(to right,var(--accent) 0 var(--fuell),var(--line-2) var(--fuell) 100%)}
.regler input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--line-2)}
.regler input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--accent)}
.regler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--paper);border:3px solid var(--accent);box-shadow:0 1px 4px rgba(15,35,45,.25)}
.regler input[type=range]::-moz-range-thumb{box-sizing:border-box;width:28px;height:28px;border-radius:50%;background:var(--paper);border:3px solid var(--accent);box-shadow:0 1px 4px rgba(15,35,45,.25)}
.regler input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--accent);outline-offset:3px}
.regler input[type=range]:focus-visible::-moz-range-thumb{outline:3px solid var(--accent);outline-offset:3px}
.regler input[type=range]:active::-webkit-slider-thumb{transform:scale(1.08)}
.regler--paket{margin-top:22px}
.umschalter--voll{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
.umschalter--voll label{display:flex}
.umschalter--voll span{width:100%;padding:6px 6px;font-size:14.5px}
@media (max-width:420px){.umschalter--voll{grid-template-columns:repeat(2,1fr)}}
.rechner__ergebnis .zahl{display:inline-block;min-width:4.5ch;text-align:right;font-variant-numeric:tabular-nums}
.rechner__ergebnis .summe .zahl{min-width:7ch}
.rechner__ergebnis .negativ dd{color:var(--crit)}
@media (min-width:960px){.rechner__ergebnis{position:sticky;top:84px}}

/* --- Paketwahl im Buchungsformular ---------------------------------------------------- */
.paketwahl{display:grid;gap:10px}
@media (min-width:720px){.paketwahl{grid-template-columns:repeat(3,1fr)}}
.paketwahl label{position:relative;display:grid;gap:2px;border:1px solid var(--line-2);border-radius:var(--r-gross);padding:14px 14px 12px 44px;cursor:pointer;background:var(--paper);margin:0}
.paketwahl input{position:absolute;left:14px;top:16px;width:20px;height:20px;min-height:0;accent-color:var(--accent)}
.paketwahl label:has(input:checked){border:2px solid var(--accent);padding:13px 13px 11px 43px}
.paketwahl b{font-size:16px}
.paketwahl small{color:var(--muted);font-size:13px;display:block}
.paketwahl .betrag{font-size:1.15rem;font-weight:700;color:var(--ink)}
.auswahl{background:var(--accent-soft);border-radius:var(--r);padding:12px 14px;font-size:15px;color:var(--ink)}

/* --- Team (Über uns) --------------------------------------------------------------------- */
.team{display:grid;gap:16px}
@media (min-width:820px){.team{grid-template-columns:1fr 1fr}}
.person{display:grid;grid-template-columns:128px 1fr;gap:22px;align-items:start}
@media (max-width:420px){.person{grid-template-columns:1fr}}
.person__bild{position:relative;width:128px;height:128px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);font-weight:700;font-size:1.6rem;letter-spacing:.02em}
.person__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.person h3{margin:0}
.person__rolle{color:var(--muted);font-size:14.5px;margin:2px 0 10px}
.person__wege{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px;font-size:15px}
.person__wege a{font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.person__wege a:hover{text-decoration:underline}

/* --- Erklärvideo (Platzhalter bis medien/erklaervideo.mp4 da ist) ---------------------- */
.video{max-width:960px;border:1px solid var(--line-2);border-radius:var(--r-gross);overflow:hidden;background:#0b1015;aspect-ratio:16/9}
.video video{display:block;width:100%;height:100%;object-fit:contain;background:#0b1015}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.kopf,.fuss,.schluss,.anrufleiste{display:none}body{background:#fff;padding-bottom:0}}
.seitenhero .pille{white-space:normal;line-height:1.35}
@media (max-width:480px){.ansicht__leiste .marke{display:none}}


/* =============================================================================
   Ausbau Optik (Okt. 2026): mehr zum Anschauen für Handwerksbetriebe.
   Leitidee „Bauplan“: Millimeterraster, dunkle Blaupausen-Flächen, Ocker vom
   Zollstock als sparsamer Zweitakzent, echte Produktbilder in Geräterahmen.
   ============================================================================= */
:root{
  --plan:#0e3a3e; --plan-2:#134a4f; --plan-text:#e8f3f1; --plan-leise:#a9cbc6; --plan-linie:rgba(191,227,221,.12);
  --zoll:#e2a72e; --zoll-dunkel:#8a5d0f;
  --tint:#e3eeec; --stahl:#e8edf0;
  --raster-fein:rgba(15,110,110,.065); --raster-grob:rgba(15,110,110,.12);
  --geraet:#1d2731; --geraet-kante:#2c3844;
  --schatten:0 30px 60px -30px rgba(18,38,48,.45),0 2px 6px rgba(18,38,48,.08);
  --bild-filter:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --plan:#0b2629; --plan-2:#0f3236; --plan-linie:rgba(191,227,221,.09);
    --zoll:#e8b34a; --zoll-dunkel:#e8b34a;
    --tint:#122427; --stahl:#151e27;
    --raster-fein:rgba(74,182,176,.05); --raster-grob:rgba(74,182,176,.09);
    --geraet:#0a0f14; --geraet-kante:#2c3642;
    --schatten:0 30px 60px -30px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.3);
    --bild-filter:brightness(.88) contrast(1.02);
  }
}
:root[data-theme="dark"]{
  --plan:#0b2629; --plan-2:#0f3236; --plan-linie:rgba(191,227,221,.09);
  --zoll:#e8b34a; --zoll-dunkel:#e8b34a;
  --tint:#122427; --stahl:#151e27;
  --raster-fein:rgba(74,182,176,.05); --raster-grob:rgba(74,182,176,.09);
  --geraet:#0a0f14; --geraet-kante:#2c3642;
  --schatten:0 30px 60px -30px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.3);
  --bild-filter:brightness(.88) contrast(1.02);
}

/* --- Millimeterraster (Hero, Seitenkopf) ------------------------------------ */
.hero,.seitenhero{position:relative;isolation:isolate}
.hero::before,.seitenhero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(var(--raster-grob) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,var(--raster-grob) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(var(--raster-fein) 1px,transparent 1px) 0 0/8px 8px,
    linear-gradient(90deg,var(--raster-fein) 1px,transparent 1px) 0 0/8px 8px;
  -webkit-mask-image:radial-gradient(120% 90% at 85% 10%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 85% 10%,#000 30%,transparent 78%)}
.hero h1{font-weight:700;letter-spacing:-.025em;line-height:1.08}
@media (min-width:1000px){.hero h1{font-size:clamp(2.6rem,1.6rem + 2.4vw,3.5rem)}}
.seitenhero h1{font-weight:700;letter-spacing:-.022em}
.seitenhero__raster{display:grid;gap:36px;align-items:center}
@media (min-width:1000px){.seitenhero__raster{grid-template-columns:1.05fr .95fr;gap:48px}}
.seitenhero__raster > *{min-width:0}

/* --- Abschnittsflächen im Wechsel ------------------------------------------- */
.abschnitt--tint{background:var(--tint)}
.abschnitt--stahl{background:var(--stahl)}
.abschnitt--tint .karte,.abschnitt--stahl .karte{background:var(--paper)}
.abschnitt--plan{position:relative;isolation:isolate;background:var(--plan);color:var(--plan-text)}
.abschnitt--plan::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(var(--plan-linie) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,var(--plan-linie) 1px,transparent 1px) 0 0/40px 40px}
.abschnitt--plan h2,.abschnitt--plan h3{color:#fff}
.abschnitt--plan .einleitung{color:var(--plan-leise)}
.abschnitt--plan .oberzeile{color:var(--zoll)}
.abschnitt--plan .kette li{background:var(--paper);border-color:transparent;color:var(--ink)}
.abschnitt--plan .kette b{color:var(--ink)}
.abschnitt--plan .kette li::before{background:var(--plan);color:var(--zoll);box-shadow:inset 0 0 0 2px var(--zoll)}

/* --- Zollstock-Kante (Nutzenstreifen, Schlussaufruf) ------------------------- */
.zollkante{position:relative}
.zollkante::after{content:"";position:absolute;left:0;right:0;top:0;height:12px;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--zoll) 0 2px,transparent 2px 40px),
    repeating-linear-gradient(90deg,var(--zoll) 0 1px,transparent 1px 8px);
  background-size:100% 12px,100% 6px;background-repeat:no-repeat;opacity:.85}

/* --- Nutzenstreifen ----------------------------------------------------------- */
.nutzen{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nutzen__liste{list-style:none;margin:0;padding:34px 0 26px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px}
@media (min-width:900px){.nutzen__liste{grid-template-columns:repeat(4,1fr);padding:42px 0 34px}}
.nutzen__liste li{display:grid;gap:4px;padding-left:14px;border-left:2px solid var(--accent-line)}
.nutzen__liste b{font-size:clamp(2rem,1.4rem + 2.2vw,2.9rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.nutzen__liste span{color:var(--ink-2);font-size:15px;line-height:1.35;max-width:22ch}

/* --- Fotoplätze: Bauplan-Zeichnung, bis das Foto da ist ------------------------ */
.foto{position:relative;margin:0;overflow:hidden;border-radius:var(--r-gross);background:#0e3a3e}
.foto--16x9{aspect-ratio:16/9}
.foto--4x3{aspect-ratio:4/3}
.foto--1x1{aspect-ratio:1/1}
.foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto__bild{opacity:0;transition:opacity .6s ease}
.foto.ist-geladen .foto__bild{opacity:1}
.foto.ist-geladen .foto__ersatz{visibility:hidden;transition:visibility 0s .6s}

/* --- Geräterahmen (per CSS, keine fremden Mockups) ---------------------------- */
.geraet{margin:0}
.geraet img{display:block;width:100%;height:auto;filter:var(--bild-filter)}
.laptop{position:relative;background:var(--geraet);border:1px solid var(--geraet-kante);border-radius:14px;padding:10px 10px 12px;box-shadow:var(--schatten)}
.laptop::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-12px;height:12px;border-radius:0 0 14px 14px;
  background:linear-gradient(#5d6973,#39444e 45%,#28323b);box-shadow:0 14px 24px -14px rgba(0,0,0,.5)}
.laptop::before{content:"";position:absolute;left:50%;bottom:-12px;width:14%;height:4px;transform:translateX(-50%);border-radius:0 0 6px 6px;background:rgba(0,0,0,.35);z-index:1}
.laptop__schirm{border-radius:5px;overflow:hidden;background:#fff}
.laptop__leiste{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;background:#eef1f0;border-bottom:1px solid #dde2e0}
.laptop__leiste i{width:8px;height:8px;border-radius:50%;background:#c9cfcc;flex:none}
.laptop__leiste span{margin:0 auto;padding:2px 12px;border-radius:999px;background:#fff;border:1px solid #dde2e0;font:500 11px/1.4 var(--sans);color:#606c78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
@media (max-width:520px){.laptop{padding:6px 6px 8px;border-radius:10px}.laptop__leiste{height:18px;padding:0 6px;gap:4px}.laptop__leiste i{width:5px;height:5px}.laptop__leiste span{font-size:8px;padding:0 6px}.laptop::after{height:8px;bottom:-8px}.laptop::before{bottom:-8px;height:3px}}
.handyrahmen{position:relative;background:var(--geraet);border:1px solid var(--geraet-kante);border-radius:16%/7.4%;padding:5.5% 4.5%;box-shadow:var(--schatten)}
.handyrahmen::before{content:"";position:absolute;top:2.4%;left:50%;width:30%;height:1.6%;min-height:5px;transform:translateX(-50%);border-radius:999px;background:#000;z-index:1}
.handyrahmen .geraet__schirm{border-radius:11%/5%;overflow:hidden;background:#fff;padding-top:9%}

/* --- Collage: Foto + Laptop + Handy überlappend ------------------------------- */
.collage{position:relative;margin:0;width:100%}
.collage > *{position:absolute}
.collage__unter{position:static;display:block;margin-top:18px;text-align:right;font-size:12.5px;color:var(--muted)}
/* a: Foto, Laptop, Handy */
.collage--a{aspect-ratio:100/80}
.collage--a .collage__foto{top:0;right:0;width:80%}
.collage--a .collage__laptop{left:0;top:23%;width:80%}
.collage--a .collage__handy{right:2%;bottom:0;width:23%}
/* b: Laptop + Handy */
.collage--b{aspect-ratio:100/74}
.collage--b .collage__laptop{left:0;top:0;width:86%}
.collage--b .collage__handy{right:0;bottom:0;width:24%}
/* c: Foto + Handy */
.collage--c{aspect-ratio:100/84}
.collage--c .collage__foto{left:0;top:0;width:82%}
.collage--c .collage__handy{right:3%;bottom:0;width:30%}
/* d: Foto + Laptop */
.collage--d{aspect-ratio:100/78}
.collage--d .collage__foto{right:0;top:0;width:72%}
.collage--d .collage__laptop{left:0;bottom:4%;width:82%}
/* e: nur Laptop */
.collage--e{aspect-ratio:100/66}
.collage--e .collage__laptop{left:3%;top:2%;width:94%}
.collage--e::before{content:"";position:absolute;inset:8% 0 0 12%;border-radius:var(--r-gross);background:var(--plan);
  background-image:linear-gradient(var(--plan-linie) 1px,transparent 1px),linear-gradient(90deg,var(--plan-linie) 1px,transparent 1px);background-size:24px 24px}
/* f: Foto 4:3, Laptop, Handy (Lager & Fahrzeuge) */
.collage--f{aspect-ratio:100/80}
.collage--f .collage__foto{top:0;right:0;width:62%}
.collage--f .collage__laptop{left:0;top:26%;width:78%}
.collage--f .collage__handy{right:2%;bottom:0;width:22%}
.collage-rahmen{margin:0;min-width:0}
.abos-kopf{margin:0 0 32px;align-items:end}
.abos-kopf .kopfzeile{margin:0}
.gewerke-band{padding:32px 0}
@media (min-width:900px){.gewerke-band{padding:40px 0}}
/* Einmaliger Auftritt beim Laden (ohne JavaScript, Inhalt bleibt sichtbar) */
@keyframes einschweben{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.collage--auftritt .collage__foto{animation:einblenden .7s ease-out both}
.collage--auftritt .collage__laptop{animation:einschweben .8s .15s cubic-bezier(.2,.7,.2,1) both}
.collage--auftritt .collage__handy{animation:einschweben .8s .35s cubic-bezier(.2,.7,.2,1) both}

/* --- Illustrierte Kette Anruf → Rechnung --------------------------------------- */
.bildkette{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.bildkette::before{content:"";position:absolute;left:10%;right:10%;top:32px;border-top:2px dashed var(--zoll);opacity:.8}
.bildkette li{position:relative;display:grid;justify-items:center;gap:10px;text-align:center}
.bildkette__ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--plan-2);border:2px solid var(--plan-leise);color:#fff}
.bildkette li:last-child .bildkette__ic{border-color:var(--zoll);color:var(--zoll)}
.bildkette__ic svg{width:30px;height:30px}
.bildkette b{font-size:15px;font-weight:650;color:var(--plan-text)}
.abschnitt:not(.abschnitt--plan) .bildkette__ic{background:var(--paper);border-color:var(--accent-line);color:var(--accent)}
.abschnitt:not(.abschnitt--plan) .bildkette b{color:var(--ink)}
@media (max-width:560px){.bildkette::before{top:22px}.bildkette__ic{width:44px;height:44px}.bildkette__ic svg{width:22px;height:22px}.bildkette b{font-size:12.5px}}
html.js .bildkette li{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
html.js .bildkette::before{transform:scaleX(0);transform-origin:left;transition:transform 1.1s ease}
html.js .bildkette.ist-sichtbar::before{transform:none}
html.js .bildkette.ist-sichtbar li{opacity:1;transform:none}
html.js .bildkette.ist-sichtbar li:nth-child(2){transition-delay:.15s}
html.js .bildkette.ist-sichtbar li:nth-child(3){transition-delay:.3s}
html.js .bildkette.ist-sichtbar li:nth-child(4){transition-delay:.45s}
html.js .bildkette.ist-sichtbar li:nth-child(5){transition-delay:.6s}

/* --- Gewerke-Kacheln ----------------------------------------------------------- */
.gewerke-kacheln{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.gewerke-kacheln{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.gewerke-kacheln{grid-template-columns:repeat(6,1fr);gap:14px}}
.gewerke-kacheln li{display:grid;gap:8px}
.gewerke-kacheln span{font-weight:600;font-size:15px;color:var(--ink)}
.zwei + .gewerke-kacheln{margin-top:44px}
/* Fuß: Knopftext war durch .fuss a überdeckt (schon vorher unlesbar) */
.fuss a.knopf,.fuss a.knopf:hover{color:var(--auf-accent);text-decoration:none}

/* --- Schlussaufruf als Bauplan-Fläche ------------------------------------------- */
.schluss{position:relative;isolation:isolate;overflow:hidden;background:var(--plan);border-color:var(--plan);color:var(--plan-text);padding-top:40px}
.schluss::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--plan-linie) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,var(--plan-linie) 1px,transparent 1px) 0 0/40px 40px}
.schluss h2{color:#fff}
.schluss p{color:var(--plan-leise)}
.schluss a:not(.knopf){color:#fff}
.schluss .knopf{background:#fff;border-color:#fff;color:#0e3a3e}
.schluss .knopf:hover{background:var(--plan-text);border-color:var(--plan-text);color:#0e3a3e}
.schluss .knopf--zweit{background:transparent;border-color:rgba(232,243,241,.55);color:#fff}
.schluss .knopf--zweit:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff}
.schluss:focus-within .knopf:focus-visible{outline-color:var(--zoll)}

/* Karten mit Bausteinen: Symbolfläche etwas kräftiger */
.karte--link .ic{transition:background-color .15s,color .15s}
.karte--link:hover .ic{background:var(--accent);color:var(--auf-accent)}

@media (prefers-reduced-motion: reduce){
  .collage--auftritt > *{animation:none!important}
  html.js .bildkette li,html.js .bildkette::before{opacity:1!important;transform:none!important;transition:none!important}
  .foto__bild{transition:none}
}
@media print{.hero::before,.seitenhero::before,.abschnitt--plan::before{display:none}}
/* Beispielansichten: Browser-Standardrand von <figure> entfernen (machte sie auf dem Handy schmal) */
figure.ansicht,figure.handy{margin:0}
@media (max-width:480px){.ansicht__zeile{flex-wrap:wrap}.ansicht__zeile > div{flex:1 1 55%;min-width:0}}