/* Fabrox – Website · nach Styleguide 1.1 (marke/styleguide.html)
   Helle Betonflächen für Inhalte, Anthrazit-Bänder für Kopf, Einstieg und einzelne Abschnitte.
   Schablonenschrift nur für Marke und kurze Überschriften (bis ca. drei Wörter), ganze Sätze in Barlow.
   Orange nie als kleiner Text auf hellem Grund, Grün nur für „live / erledigt“.
   Schriften liegen lokal in /assets/fonts (keine Google-Server). */

@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Stencil Display";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/big-shoulders-stencil-900.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/jetbrains-mono-600.woff2) format("woff2")}

:root{
  /* Markenfarben */
  --orange:#ff5f1f; --orange-hell:#ff7a45; --anthrazit:#141414; --gummi:#262524; --beton:#e9e5de; --beton2:#dcd7ce; --weiss:#ffffff;
  --gruen:#3ccf7a; --gruen-text:#1f7a45; --rot:#c8102e;
  /* Schriften */
  --marke:"Big Shoulders Stencil Display","Arial Narrow",Impact,sans-serif;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,"Liberation Mono",monospace;
  /* Flächen-Variablen (hell) – .dunkel und die Bänder überschreiben sie */
  --bg:var(--beton); --fg:var(--anthrazit); --leise:#5c574f; --linie:var(--beton2); --karte:var(--weiss); --karte-rand:#d3cdc3;
  --feld:var(--weiss); --feld-rand:#b9b3a8; --label:#5c574f; --ok:var(--gruen-text);
  /* Kompatibilität für Inline-Stile in den Seiten */
  --text:var(--fg); --amber:var(--orange); --akzent:var(--orange);
  --breite:1160px;
  color-scheme:light;
}
/* dunkle Bereiche: Kopf, Einstieg, Seitenkopf, Fuß, ausgewählte Bänder */
.dunkel,.kopf,.hero,.seitenkopf,.fuss,.terminal,#funktionen,#nutzen,#kontakt{
  --bg:var(--anthrazit); --fg:var(--beton); --leise:#b3ada3; --linie:#33312f; --karte:#1d1c1b; --karte-rand:#33312f;
  --feld:#0f0f0f; --feld-rand:#4a4743; --label:var(--orange); --ok:var(--gruen); --text:var(--fg);
  color-scheme:dark;
}
#funktionen{--bg:var(--gummi); --karte:#1b1a19}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--beton);color:var(--anthrazit);font:400 17px/1.6 var(--sans);overflow-x:hidden}
body.dunkel{background:var(--anthrazit);color:var(--beton)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--orange);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
p{margin:0 0 1em}
ul,ol{margin:0}
h1,h2,h3,h4{text-wrap:balance}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.innen{max-width:var(--breite);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:12px;top:-60px;z-index:100;background:var(--orange);color:var(--anthrazit);padding:10px 14px;border-radius:2px;font-weight:700}
.sprung:focus{top:12px}

/* Bänder über die volle Breite, ohne zusätzliche Hülle im HTML */
.hero,.seitenkopf,#funktionen,#nutzen,#kontakt{background:var(--bg);color:var(--fg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:40;background:var(--anthrazit);color:var(--beton);border-bottom:1px solid #2e2c2a;padding-top:env(safe-area-inset-top,0px)}
.kopf .innen{display:flex;align-items:center;gap:20px;min-height:72px}
.kopf .marke img{width:150px;height:auto}
/* statisches Logo hat weniger Rand als das animierte (Platz für den Puls) – gleiche optische Größe */
.kopf .marke img[src$="/fabrox-logo-auf-dunkel.svg"]{width:130px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{font:600 15px var(--sans);color:#d8d2c8;text-decoration:none;padding:8px 11px;border-radius:2px}
.nav a:hover{color:var(--weiss);background:#ffffff0d}
.nav a[aria-current="page"]{color:var(--weiss);box-shadow:inset 0 -2px 0 var(--orange)}
.nav .knopf{margin-left:8px;padding:9px 14px;font-size:14px}
.nav .knopf:hover{background:var(--orange-hell);color:var(--anthrazit)}
.nav .knopf.leer:hover{background:transparent;color:var(--weiss)}
.menue{display:none;margin-left:auto;width:44px;height:44px;border-radius:2px;border:1px solid #4a4743;background:transparent;color:var(--beton);cursor:pointer;place-items:center}
.menue svg{width:22px;height:22px}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px var(--sans);letter-spacing:.02em;padding:12px 20px;border-radius:2px;background:var(--orange);color:var(--anthrazit);text-decoration:none;border:2px solid var(--orange);cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.knopf:hover{background:var(--orange-hell);border-color:var(--orange-hell);color:var(--anthrazit)}
.knopf:active{transform:translateY(1px)}
.knopf.leer{background:transparent;color:var(--fg);border-color:var(--fg)}
.kopf .knopf.leer,.hero .knopf.leer,.seitenkopf .knopf.leer,.terminal .knopf.leer,#kontakt .knopf.leer,#nutzen .knopf.leer,#funktionen .knopf.leer{border-color:#4a4743}
.knopf.leer:hover{border-color:var(--orange);background:transparent;color:var(--fg)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Typografie ---------- */
h1{font:900 clamp(46px,7.6vw,96px)/.92 var(--marke);text-transform:uppercase;letter-spacing:.01em;margin:0;color:var(--fg)}
h1.satz{font:600 clamp(34px,5vw,58px)/1.08 var(--sans);text-transform:none;letter-spacing:-.01em}
h2{font:600 clamp(28px,3.6vw,44px)/1.12 var(--sans);letter-spacing:-.01em;margin:0 0 18px;max-width:26ch;color:var(--fg)}
h2.stencil{font:900 clamp(40px,5.6vw,68px)/.92 var(--marke);text-transform:uppercase;letter-spacing:.01em}
h3{font:700 19px/1.3 var(--sans);margin:0 0 8px;color:var(--fg)}
.unterzeile{font:600 clamp(24px,3.1vw,38px)/1.15 var(--sans);margin:16px 0 0;color:var(--fg);text-wrap:balance}
.unterzeile em{font-style:normal;color:var(--orange)}
.label{font:600 13px var(--mono);color:var(--label);letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--leise);max-width:50ch}
.vorspann{color:var(--leise);max-width:62ch;margin-bottom:32px;font-size:18px}
.klein{font-size:14px;color:var(--leise)}
.wert{font-family:var(--mono);font-weight:600}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-block:clamp(56px,8vw,96px);border-top:1px solid var(--beton2)}
.hero+.abschnitt,.band-rahmen+.abschnitt,#funktionen,#nutzen,#kontakt,#funktionen+.abschnitt,#nutzen+.abschnitt,#kontakt+.abschnitt{border-top:0}
.seitenkopf{padding-block:clamp(48px,7vw,84px) clamp(40px,5vw,60px)}
.seitenkopf+.abschnitt{border-top:0}
.seitenkopf .lead{margin-top:20px}
.prompt{font:400 14px var(--mono);font-variant-ligatures:none;color:var(--orange);margin:0 0 20px}
.prompt .cursor::after{content:"";display:inline-block;width:.55em;height:1em;margin-left:4px;vertical-align:-.12em;background:var(--orange);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- Einstieg ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(44px,6vw,80px) clamp(32px,4vw,56px)}
.hero .lead{margin:24px 0 30px}
.hero .hinweis{display:flex;align-items:center;gap:10px;margin:22px 0 0;font:500 14px var(--sans);color:var(--leise)}
.hero .hinweis b{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 4px #3ccf7a2e;font-size:0;color:transparent}

/* ---------- Screenshots ---------- */
.echt{position:relative;margin:0}
.echt-marke{position:absolute;top:-12px;left:18px;z-index:2;padding:4px 10px;border-radius:2px;background:var(--orange);color:var(--anthrazit);font:600 11px var(--mono);letter-spacing:.08em;white-space:nowrap}
.echt figcaption{font:400 12px var(--mono);color:var(--leise);margin-top:12px}
.handy{width:min(290px,100%);justify-self:center}
.handy .bild{border-radius:36px;padding:9px;background:var(--gummi);box-shadow:0 30px 70px #00000066}
.handy .bild img{border-radius:28px}
.fenster{border-radius:6px;background:#1d1c1b;border:1px solid #33312f;box-shadow:0 24px 60px #0000004d;overflow:hidden}
.fenster .tl{height:34px;background:#262524;display:flex;align-items:center;gap:8px;padding:0 12px;font:600 12px var(--sans);color:#d8d2c8;white-space:nowrap;overflow:hidden}
.blatt{border-radius:4px;overflow:hidden;background:var(--weiss);box-shadow:0 24px 60px #0000002e;border:1px solid var(--karte-rand)}
/* Platzhalter für Bilder, die noch den alten Namen zeigen */
.platzhalter-bild{aspect-ratio:16/10;border:2px dashed var(--feld-rand);border-radius:4px;background:repeating-linear-gradient(135deg,#ffffff0f 0 12px,transparent 12px 24px);display:grid;place-items:center;text-align:center;padding:20px;color:var(--leise);font:400 13px/1.5 var(--mono)}
.platzhalter-bild b{display:block;font:700 16px var(--sans);color:var(--fg);margin-bottom:4px}

/* ---------- Listen ---------- */
.punkte{list-style:none;padding:0;display:grid;gap:18px}
.punkte li{position:relative;padding-left:28px;font:700 19px/1.3 var(--sans);color:var(--fg)}
.punkte li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;background:var(--orange)}
.punkte small{display:block;font:400 16px/1.5 var(--sans);color:var(--leise);margin-top:3px}
.punkte.ok li::before{content:"✓";width:auto;height:auto;top:0;background:none;color:var(--ok);font:800 18px var(--sans)}
.punkte.kompakt{gap:12px}
.punkte.kompakt li{font-size:17px}

/* ---------- Zettelwand ---------- */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.zwei.oben{align-items:start}
.zwei.breit-rechts{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.zettelwand{position:relative;min-height:360px}
.zettel{position:absolute;width:clamp(150px,17vw,190px);padding:22px 16px 18px;background:var(--weiss);color:var(--anthrazit);font:600 clamp(17px,1.6vw,20px)/1.25 var(--sans);box-shadow:0 10px 24px #0000001f;transform:rotate(var(--r));animation:kleben .8s cubic-bezier(.3,1.4,.4,1) both;animation-delay:var(--d,0s)}
.zettel::before{content:"";position:absolute;top:-10px;left:50%;width:64px;height:20px;margin-left:-32px;background:#ff5f1fcc;transform:rotate(-3deg)}
@keyframes kleben{from{opacity:0;transform:translateY(-40px) rotate(calc(var(--r) * -2))}to{opacity:1;transform:rotate(var(--r))}}

/* ---------- Kacheln ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.kachel{border:1px solid var(--karte-rand);border-radius:4px;background:var(--karte);padding:22px 24px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kachel h3{font-size:18px}
.kachel p{color:var(--leise);font-size:15.5px;margin:0}
.kachel .mehr{margin-top:auto;padding-top:12px;font:600 14px var(--sans)}
.kachel.hervor{border:2px solid var(--orange)}
.ebene{font:600 12px var(--mono);letter-spacing:.1em;color:var(--label);text-transform:uppercase}

.nutzen{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nutzen>div{border:1px solid var(--karte-rand);border-radius:4px;background:var(--karte);padding:clamp(22px,3vw,32px)}
.nutzen h3{font:700 13px var(--sans);letter-spacing:.14em;color:var(--orange);margin:0 0 20px}

/* ---------- Ablauf ---------- */
.ablauf{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--beton2);border:2px solid var(--beton2);counter-reset:s}
.ablauf li{counter-increment:s;background:var(--weiss);padding:20px 18px 22px;min-width:0}
.ablauf li::before{content:counter(s,decimal-leading-zero);display:block;font:900 44px/1 var(--marke);color:var(--anthrazit);margin-bottom:10px;transition:color .15s}
.ablauf li:hover::before{color:var(--orange)}
.ablauf b{display:block;font:700 17px/1.25 var(--sans);margin-bottom:4px}
.ablauf span{display:block;font-size:14.5px;color:var(--leise);line-height:1.45}

/* ---------- Fortschritt & Roadmap ---------- */
.fortschritt{display:grid;gap:clamp(28px,4vw,40px)}
.fortschritt-kopf{display:grid;gap:14px;max-width:820px}
.fortschritt-zahlen{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;font:600 15px var(--sans);color:var(--leise)}
.fortschritt-zahlen b{font:900 clamp(30px,3.6vw,42px)/1 var(--marke);margin-right:6px;color:var(--fg);font-variant-numeric:tabular-nums}
.z-fertig b{color:var(--ok)}
.fortschritt-balken{position:relative;height:12px;border-radius:2px;background:var(--beton2);overflow:hidden;display:flex}
.fortschritt-balken i,.fortschritt-balken u{display:block;height:100%;width:var(--w);animation:fuellen 1.2s cubic-bezier(.2,.8,.2,1) both}
.fortschritt-balken i{background:var(--gruen)}
.fortschritt-balken u{background:repeating-linear-gradient(135deg,var(--orange) 0 6px,#ff8a5a 6px 12px);animation-delay:.4s}
@keyframes fuellen{from{width:0}}
.fortschritt-raster{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(24px,4vw,44px);align-items:start}
.fortschritt-titel{display:flex;align-items:center;gap:10px;font:700 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin:0 0 16px}
.haken{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gruen);color:var(--anthrazit);font:800 13px var(--sans);letter-spacing:0}
.erledigt{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.erledigt li{position:relative;padding:14px 16px 14px 48px;border-radius:4px;background:var(--karte);border:1px solid var(--karte-rand);min-width:0}
.erledigt li::before{content:"✓";position:absolute;left:14px;top:13px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gruen);color:var(--anthrazit);font:800 12px var(--sans)}
.erledigt li.hervor{grid-column:1/-1;border:2px solid var(--gruen-text)}
.erledigt li.hervor b{font-size:18px}
.erledigt b{display:block;font:700 16px/1.3 var(--sans)}
.erledigt span{display:block;color:var(--leise);font-size:14.5px;line-height:1.4;margin-top:2px}
.naechste{list-style:none;padding:0 0 0 30px;margin:0;display:grid;gap:20px;position:relative}
.naechste::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--beton2)}
.naechste li{position:relative}
.naechste li::before{content:"";position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;border:2px solid #9a948a;background:var(--bg)}
.naechste li.jetzt::before{border-color:var(--orange);background:var(--orange);box-shadow:0 0 0 5px #ff5f1f33;animation:puls 2s ease-in-out infinite}
@keyframes puls{50%{box-shadow:0 0 0 9px #ff5f1f00}}
.naechste b{display:block;font:700 17px var(--sans)}
.naechste span{display:block;color:var(--leise);font-size:14.5px}
.naechste em{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:2px;background:var(--anthrazit);color:var(--orange);font:600 12px var(--mono);font-style:normal}

/* Streifen „Schon geschafft“ unter dem Einstieg */
.band-rahmen{padding-block:28px 0}
.fortschritt-band{display:grid;gap:14px;padding:clamp(18px,3vw,26px) clamp(18px,3vw,28px);border:1px solid var(--karte-rand);border-radius:4px;background:var(--weiss)}
.band-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.band-titel{display:flex;align-items:center;gap:10px;margin:0;font:700 14px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--anthrazit)}
.band-link{font:600 15px var(--sans)}
.band-punkte{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.band-punkte li{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 9px;border-radius:2px;background:var(--beton);border:1px solid var(--beton2);font:600 14px var(--sans)}
.band-punkte li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--gruen);font:800 11px var(--sans);color:var(--anthrazit)}
.band-punkte li:first-child{border-color:var(--gruen-text)}

/* ---------- Dialog-Beispiele ---------- */
.dialog{display:grid;gap:10px;max-width:460px}
.sag{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px 14px 14px 2px;background:var(--karte);border:1px solid var(--karte-rand);font-weight:600}
.sag::before{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--orange) center/15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23141414' d='M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-2.1A7 7 0 0 0 19 12z'/%3E%3C/svg%3E")}
.antwort{padding:12px 14px;border-radius:4px;line-height:1.4;background:var(--karte);border:1px solid var(--karte-rand);border-left-width:4px}
.antwort b{display:block;font-size:13px;color:var(--leise);font-weight:600}
.antwort.amber{border-left-color:var(--orange)}
.antwort.rot{border-left-color:var(--rot)}
.antwort.gruen{border-left-color:var(--gruen)}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font:600 14px var(--sans);padding:6px 12px;border-radius:2px;background:var(--karte);border:1px solid var(--karte-rand)}
.chip.gr{border-color:var(--gruen-text)}
.chip.gr::before{content:"✓ ";color:var(--ok)}
.chip.nie{color:var(--rot);text-decoration:line-through;text-decoration-thickness:2px}
.chip.mono{font-family:var(--mono);font-weight:400}
.chips .t{font:600 13px var(--mono);letter-spacing:.1em;color:var(--leise);margin-right:6px;min-width:6.5em}
.konzept{display:inline-block;padding:2px 10px;border-radius:2px;border:1.5px dashed var(--fg);color:var(--fg);font:600 12px var(--mono);letter-spacing:.08em;vertical-align:middle}
.geplant{display:inline-block;padding:1px 8px;border-radius:2px;background:var(--beton2);color:var(--leise);font:600 11px var(--mono);letter-spacing:.06em;vertical-align:2px;margin-left:6px}

/* ---------- Tarife ---------- */
.tarife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.tarif{border:1px solid var(--karte-rand);border-radius:4px;background:var(--karte);padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.tarif.hervor{border:2px solid var(--orange)}
.tarif h3{font:900 34px/1 var(--marke);text-transform:uppercase;margin:0}
.tarif .fuer{color:var(--leise);margin:0}
.tarif .preis{font:600 15px var(--mono);padding:10px 0;border-block:1px solid var(--linie)}
.tarif ul{list-style:none;padding:0;display:grid;gap:10px}
.tarif li{position:relative;padding-left:1.5em}
.tarif li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--orange)}
.tarif .knopf{margin-top:auto;align-self:flex-start}

/* ---------- Fragen ---------- */
.fragen{display:grid;gap:8px;max-width:820px}
.fragen details{border:1px solid var(--karte-rand);border-radius:4px;background:var(--karte)}
.fragen summary{cursor:pointer;padding:16px 18px;font:700 17px var(--sans);list-style:none;display:flex;justify-content:space-between;gap:12px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";color:var(--fg);font-weight:800;font-size:20px;line-height:1}
.fragen details[open] summary::after{content:"–"}
.fragen details p{padding:0 18px 16px;color:var(--leise);margin:0}

/* ---------- Terminal ---------- */
.terminal{border-radius:4px;background:#0b0b0b;border:1px solid #33312f;padding:clamp(20px,3vw,28px);font:400 15px/1.8 var(--mono);font-variant-ligatures:none;color:var(--beton);overflow-wrap:break-word}
.terminal .p{color:var(--orange)}
.terminal .a{color:var(--gruen)}
.terminal .knoepfe{margin-top:22px;font-family:var(--sans)}

/* ---------- Formular ---------- */
.formular{display:grid;gap:18px;padding:clamp(20px,3vw,30px);border-radius:4px;background:var(--karte);border:1px solid var(--karte-rand)}
#kontakt .formular{background:var(--gummi)}
.formular .reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feld{display:grid;gap:6px;min-width:0}
.feld>label,.formular legend{font:600 14px var(--sans);color:var(--fg)}
.feld .opt,.formular legend .opt{font-weight:400;color:var(--leise)}
.formular input[type=text],.formular input[type=email],.formular input[type=tel],.formular select,.formular textarea{font:400 16px var(--sans);color:var(--fg);background:var(--feld);border:1px solid var(--feld-rand);border-radius:2px;padding:12px;width:100%}
.formular textarea{min-height:120px;resize:vertical}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px #ff5f1f33}
.formular fieldset{border:0;padding:0;margin:0;min-width:0}
.formular legend{padding:0;margin-bottom:10px}
.mehr-angaben summary.knopf{width:fit-content}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl label{display:inline-flex;align-items:center;gap:8px;font:500 15px var(--sans);padding:8px 13px;border-radius:2px;border:1px solid var(--feld-rand);cursor:pointer;user-select:none;color:var(--fg)}
.wahl label:has(input:checked){border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.wahl input{accent-color:var(--orange);width:16px;height:16px;margin:0}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--leise)}
.zustimmung input{accent-color:var(--orange);width:18px;height:18px;margin:3px 0 0;flex:none}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung{padding:14px 16px;border-radius:2px;font-weight:600;border-left:4px solid}
.meldung.fehler{background:#c8102e14;border-color:var(--rot);color:var(--fg)}
.meldung.ok{background:#3ccf7a14;border-color:var(--gruen);color:var(--fg)}
.pflicht{color:var(--fg);font-weight:700}

/* ---------- Direktkontakt ---------- */
.wege{display:grid;gap:10px}
.weg{display:grid;gap:2px;padding:16px 18px;border-radius:4px;border:1px solid var(--karte-rand);background:var(--karte)}
.weg b{font:600 12px var(--mono);letter-spacing:.1em;color:var(--leise);text-transform:uppercase}
.weg a,.weg span{font-size:18px;font-weight:600}

/* ---------- Rechtstexte & Platzhalter ---------- */
.recht{max-width:780px;padding-top:clamp(32px,5vw,56px)}
.recht h2{font-size:clamp(22px,2.6vw,28px);margin-top:40px;max-width:none}
.recht h3{margin-top:28px}
.recht p,.recht li{color:#2d2b28}
.recht ul{padding-left:1.2em;display:grid;gap:6px;margin-bottom:1em}
.platzhalter{background:#c8102e14;color:var(--rot);border:1.5px dashed var(--rot);border-radius:2px;padding:0 6px;font:600 .95em var(--mono);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hinweisbox{border:1.5px dashed var(--rot);background:#c8102e0d;border-radius:4px;padding:16px 18px;margin-bottom:28px;font-size:15px}

/* ---------- Gründer (derzeit ausgeblendet) ---------- */
.personen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;max-width:760px}
.person{display:flex;align-items:center;gap:18px;padding:20px;border:1px solid var(--karte-rand);border-radius:4px;background:var(--karte);min-width:0}
.person-bild{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--anthrazit);color:var(--orange);font:900 22px var(--marke);overflow:hidden}
.person-bild img{width:100%;height:100%;object-fit:cover}
.person h3{margin:0 0 2px;font-size:18px}
.person p{margin:0;color:var(--leise);font-size:15px}

/* ---------- Fuß ---------- */
.fuss{background:var(--anthrazit);color:var(--leise);border-top:1px solid #2e2c2a;padding-block:44px calc(32px + env(safe-area-inset-bottom,0px));font-size:14.5px}
.fuss .innen{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
.fuss .marke img{width:140px;height:auto}
.fuss .claim{font:600 18px/1.3 var(--sans);color:var(--beton);margin:16px 0 8px;max-width:22ch}
.fuss p{margin:8px 0 0;max-width:36ch}
.fuss h2{font:700 12px var(--sans);letter-spacing:.14em;color:#8d877d;margin:0 0 10px;text-transform:uppercase}
.fuss ul{list-style:none;padding:0;display:grid;gap:6px}
.fuss a{color:var(--beton);text-decoration:none}
.fuss a:hover{color:var(--orange)}
.fuss .unten{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:20px;border-top:1px solid #2e2c2a;font:400 13px var(--mono);color:#8d877d}

/* ---------- Schmal ---------- */
@media (max-width:980px){
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tarife{grid-template-columns:1fr}
  .fuss .innen{grid-template-columns:1fr 1fr}
  .fuss .innen>div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .menue{display:grid}
  .kopf .marke img{width:124px}
  .kopf .marke img[src$="/fabrox-logo-auf-dunkel.svg"]{width:108px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;background:var(--anthrazit);box-shadow:0 24px 40px #000c;border-bottom:1px solid #2e2c2a;padding:10px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px));margin:0}
  .nav.offen{display:flex}
  .nav a{font-size:17px;padding:12px 10px}
  .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--orange)}
  .nav .knopf{margin:8px 0 0;padding:13px 16px;font-size:15px}
  .hero,.zwei,.zwei.breit-rechts,.nutzen,.fortschritt-raster{grid-template-columns:1fr}
  .hero .handy{width:min(250px,75%)}
  .zettelwand{min-height:320px;max-width:440px}
  .formular .reihe{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:16px}
  .ablauf,.erledigt{grid-template-columns:1fr}
  .zettel{width:150px}
  .punkte li{font-size:17px}
  .fuss .innen{grid-template-columns:1fr}
  .knoepfe .knopf{flex:1 1 100%}
}