/* ==========================================================================
   makres.css – Gestaltung der Website (Fassung v2, freigegeben)
   Regeln: eine Akzentfarbe, nur auf Bedienelementen. Bewegung ausschliesslich
   ueber transform/opacity, jede Animation laeuft genau einmal.
   Schriften selbst gehostet – siehe DEPLOY.md, Punkt 7.
   ========================================================================== */
@font-face{font-family:'Archivo';src:url('/fonts/archivo-800.woff2') format('woff2');
  font-weight:800;font-stretch:125%;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-700.woff2') format('woff2');
  font-weight:700;font-stretch:125%;font-display:swap}
@font-face{font-family:'Plex';src:url('/fonts/plex-sans-400.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('/fonts/plex-sans-600.woff2') format('woff2');
  font-weight:600;font-display:swap}
@font-face{font-family:'PlexMono';src:url('/fonts/plex-mono-400.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'PlexMono';src:url('/fonts/plex-mono-500.woff2') format('woff2');
  font-weight:500;font-display:swap}

/* Angeglichener Systemfallback. Waehrend des Ladens (font-display:swap) und wenn
   eine Datei fehlt, wird eine vorhandene Systemschrift auf die Metriken der
   Zielschrift gezogen: gleiche Zeilenhoehe, gleiche x-Hoehe, kein Layoutsprung.
   Werte aus den ausgelieferten Dateien gemessen, nicht geschaetzt. */
@font-face{font-family:'ArchivoFallback';
  src:local('Arial Bold'),local('Helvetica Bold'),local('Liberation Sans Bold'),local('Roboto Bold'),local('Arial');
  font-weight:700 800;size-adjust:101%;ascent-override:88%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:'PlexFallback';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans'),local('Roboto');
  size-adjust:99.5%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}
@font-face{font-family:'PlexMonoFallback';
  src:local('Menlo'),local('Consolas'),local('Liberation Mono'),local('DejaVu Sans Mono'),local('Courier New');
  size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}

:root{
  --nacht:#0F1114; --kohle:#171A1F; --rauch:#22262C;
  --papier:#EDEEF0; --weiss:#fff;
  --hell:#E8EAED; --stahl:#6B7480; --stahl-d:#8B94A0;
  --signal:#FF5A1F; --status:#2E9E6B;
  --linie:#D5D8DC; --linie-d:rgba(255,255,255,.11);

  --display:'Archivo','ArchivoFallback',system-ui,-apple-system,sans-serif;
  --text:'Plex','PlexFallback',system-ui,-apple-system,sans-serif;
  --mono:'PlexMono','PlexMonoFallback',ui-monospace,SFMono-Regular,monospace;

  --rand:clamp(1.15rem,5vw,3.5rem);
  --abstand:clamp(4.5rem,10vw,9rem);
  --breite:66ch;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--nacht);
     font:400 1.0625rem/1.7 var(--text);-webkit-font-smoothing:antialiased}

h1,h2,h3,.zahl{font-family:var(--display);font-stretch:125%;margin:0}
h1{font-weight:800;font-size:clamp(2.6rem,7.6vw,6rem);line-height:.94;letter-spacing:-.045em}
h2{font-weight:800;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.035em}
h3{font-weight:700;font-size:1.22rem;line-height:1.25;letter-spacing:-.02em}
p{margin:0 0 1.2em}
a{color:inherit}

.bahn{width:100%;max-width:78rem;margin-inline:auto;padding-inline:var(--rand)}
.lese{max-width:var(--breite)}
.band{padding-block:var(--abstand)}
.band--dunkel{background:var(--nacht);color:var(--hell)}
.band--dunkel h1,.band--dunkel h2,.band--dunkel h3{color:#fff}

/* feines Raster, statisch – kostet nichts, gibt Tiefe */
.raster{position:relative;overflow:hidden}
.raster::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--linie-d) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linie-d) 1px,transparent 1px);
  background-size:clamp(3rem,7vw,5.5rem) clamp(3rem,7vw,5.5rem);
  -webkit-mask-image:radial-gradient(120% 90% at 78% 8%,#000 0%,transparent 68%);
  mask-image:radial-gradient(120% 90% at 78% 8%,#000 0%,transparent 68%);opacity:.85}

/* Etikett */
.etikett{font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--stahl);display:flex;align-items:center;gap:.85rem;margin-bottom:1.7rem}
.etikett::before{content:"";width:1.7rem;height:1px;background:var(--signal);flex:none}
.band--dunkel .etikett{color:var(--stahl-d)}


/* Kopf */
.kopf{position:sticky;top:0;z-index:30;background:rgba(15,17,20,.86);backdrop-filter:blur(10px);
      border-bottom:1px solid var(--linie-d)}
.kopf__in{display:flex;align-items:center;gap:2rem;padding-block:1rem}
.marke{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:1.02rem;
  letter-spacing:.02em;color:#fff;text-decoration:none;margin-right:auto;display:flex;align-items:center;gap:.55rem}
.marke::before{content:"";width:9px;height:9px;background:var(--signal);border-radius:1px}
.nav{display:flex;gap:1.8rem;font:500 .84rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.nav a{color:var(--stahl-d);text-decoration:none;padding-block:.4rem;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--signal);transition:right .22s ease}
.nav a:hover{color:#fff}.nav a:hover::after{right:0}
.lang{font:500 .78rem/1 var(--mono);color:var(--stahl-d);letter-spacing:.08em}
.lang b{color:#fff}
@media(max-width:900px){.nav{display:none}}

/* HERO */
.hero{background:var(--nacht);color:var(--hell);padding-block:clamp(3.5rem,9vw,7rem) 0}
.hero__ober{font:500 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--stahl-d);margin-bottom:2.2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.hero__ober span{color:var(--signal)}
.hero h1{max-width:16ch;margin-bottom:1.8rem}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero__zeile{display:block;overflow:hidden}
.hero__zeile>i{display:block;font-style:normal;transform:translateY(102%);
  animation:steig .62s cubic-bezier(.2,.7,.25,1) forwards}
.hero__zeile:nth-child(2)>i{animation-delay:.07s}
.hero__zeile:nth-child(3)>i{animation-delay:.14s}
@keyframes steig{to{transform:none}}
.hero__satz{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#B9C0C9;max-width:44ch}
.hero__unten{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:end;
  padding-bottom:clamp(3rem,6vw,5rem)}
@media(min-width:980px){.hero__unten{grid-template-columns:1.25fr .85fr;gap:4rem}}

.tasten{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.direkt{margin:1.4rem 0 0;font:400 .9rem/1.6 var(--mono);color:var(--stahl-d)}
.direkt a{color:#fff;text-decoration:none;border-bottom:1px solid var(--signal);padding-bottom:1px}

/* Instrumententafel = Typenschild, groß */
.tafel{background:var(--kohle);border:1px solid var(--linie-d);border-radius:5px;
  font:400 .82rem/1.6 var(--mono)}
.tafel__kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem 1.15rem;border-bottom:1px solid var(--linie-d);
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--stahl-d)}
.tafel__nr{color:var(--signal);font-weight:500}
.tafel__leib{padding:.5rem 1.15rem 1rem}
.zeile{display:flex;justify-content:space-between;gap:1.2rem;padding:.55rem 0;
  border-bottom:1px solid rgba(255,255,255,.055)}
.zeile:last-child{border-bottom:0}
.lab{color:var(--stahl-d);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  flex:none;padding-top:.22rem}
.wert{text-align:right;color:var(--hell);overflow-wrap:anywhere}
.tafel--auf .zeile{opacity:0;animation:auf .34s ease-out forwards}
.tafel--auf .zeile:nth-child(1){animation-delay:.30s}
.tafel--auf .zeile:nth-child(2){animation-delay:.37s}
.tafel--auf .zeile:nth-child(3){animation-delay:.44s}
.tafel--auf .zeile:nth-child(4){animation-delay:.51s}
.tafel--auf .zeile:nth-child(5){animation-delay:.58s}
.tafel--auf .zeile:nth-child(6){animation-delay:.65s}
@keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Laufband mit harten Fakten statt Logo-Karussell */
.leiste{border-top:1px solid var(--linie-d);border-bottom:1px solid var(--linie-d);
  background:var(--kohle)}
.leiste__in{display:grid;grid-template-columns:repeat(2,1fr);}
@media(min-width:820px){.leiste__in{grid-template-columns:repeat(4,1fr)}}
.leiste__z{padding:1.6rem var(--rand);border-right:1px solid var(--linie-d);
  border-bottom:1px solid var(--linie-d)}
.leiste__z:last-child{border-right:0}
.leiste__k{font:500 .68rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--stahl-d);margin-bottom:.6rem}
.leiste__w{font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.03em;color:#fff;line-height:1}
.leiste__w small{font-size:.5em;font-weight:700;color:var(--stahl-d);letter-spacing:0}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:.6rem;background:var(--signal);color:#fff;
  font:600 .98rem/1 var(--text);padding:1.05rem 1.7rem;border:0;border-radius:3px;
  cursor:pointer;text-decoration:none;transition:transform .14s ease,background .14s ease}
.knopf:hover{background:#F04A12;transform:translateY(-1px)}
.knopf::after{content:"→";font-family:var(--mono);transition:transform .16s ease}
.knopf:hover::after{transform:translateX(3px)}
.knopf--leise{background:transparent;color:inherit;border:1px solid currentColor;opacity:.75}
.knopf--leise::after{content:none}
.knopf--leise:hover{background:transparent;opacity:1;transform:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

/* Systeme: große Zeilen statt Kärtchen */
.sys{border-top:1px solid var(--linie);display:grid;gap:.6rem 2.5rem;
  grid-template-columns:1fr;padding:2.1rem 0;position:relative}
@media(min-width:900px){.sys{grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) auto;align-items:start}}
.sys:last-of-type{border-bottom:1px solid var(--linie)}
.sys__nr{position:absolute;top:2.15rem;right:0;font:500 .7rem/1 var(--mono);
  letter-spacing:.14em;color:var(--stahl)}
@media(min-width:900px){.sys__nr{display:none}}
.sys h3{margin-bottom:.5rem}
.sys__was{color:#3D434B;margin:0}
.sys__preis{font-family:var(--display);font-stretch:125%;font-weight:800;
  font-size:1.5rem;letter-spacing:-.03em;white-space:nowrap}
.sys__preis small{display:block;font:500 .68rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--stahl);margin-bottom:.45rem;font-family:var(--mono)}
.sys__mehr{font:500 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--signal);text-decoration:none;white-space:nowrap;align-self:center}
.sys__mehr:hover{text-decoration:underline;text-underline-offset:.3em}

/* Projekte */
.pj{display:block;border-top:1px solid var(--linie-d);padding:1.7rem 0;text-decoration:none;
  color:inherit;cursor:pointer;transition:padding-left .2s ease}
.pj:last-of-type{border-bottom:1px solid var(--linie-d)}
.pj:hover,.pj:focus-visible{padding-left:.9rem}
.pj__k{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:baseline}
.pj__n{font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.025em;color:#fff}
.pj__t{font:500 .68rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--stahl-d);border:1px solid var(--linie-d);padding:.36rem .6rem;border-radius:2px}
.pj__s{margin-left:auto;font:400 .82rem/1 var(--mono);color:var(--stahl-d)}
.pj__d{max-height:0;overflow:hidden;opacity:0;transition:max-height .22s ease,opacity .22s ease}
.pj:hover .pj__d,.pj:focus-visible .pj__d{max-height:10rem;opacity:1}
.pj__d p{margin:.9rem 0 0;color:#AEB6BF;max-width:60ch;font-size:.98rem}

/* Ablauf mit Maßstrichen */
.takt{display:grid;grid-template-columns:1fr;gap:0;border-left:1px solid var(--linie)}
@media(min-width:860px){.takt{grid-template-columns:repeat(4,1fr);border-left:0;border-top:1px solid var(--linie)}}
.takt__s{padding:1.9rem 0 1.9rem 1.6rem;border-bottom:1px solid var(--linie);position:relative}
@media(min-width:860px){.takt__s{padding:2.2rem 1.6rem 0 0;border-bottom:0}}
.takt__s::before{content:"";position:absolute;background:var(--signal)}
.takt__s::before{left:-1px;top:1.9rem;width:3px;height:1.6rem}
@media(min-width:860px){.takt__s::before{left:0;top:-1px;width:2.6rem;height:3px}}
.takt__n{font:500 .7rem/1 var(--mono);letter-spacing:.16em;color:var(--signal);margin-bottom:.7rem}
.takt__s h3{font-size:1.05rem;margin-bottom:.4rem}
.takt__s p{font-size:.94rem;color:#3D434B;margin:0}

/* Abgrenzung */
.nicht{display:grid;gap:0;border-top:1px solid var(--linie)}
.nicht__z{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.25rem 0;
  border-bottom:1px solid var(--linie);align-items:baseline}
.nicht__x{font:500 1rem/1 var(--mono);color:var(--signal)}
.nicht__z p{margin:0;font-size:.99rem}
.nicht__z b{font-weight:600}

/* FAQ */
details{border-bottom:1px solid var(--linie);padding:1.25rem 0}
summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;
  display:flex;gap:1.2rem;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;color:var(--signal);
  font:400 1.4rem/1 var(--mono);transition:transform .18s ease}
details[open] summary::after{content:"–"}
details p{margin:1rem 0 0;max-width:62ch;color:#3D434B}

/* Konfigurator */
.konf{background:var(--kohle);border:1px solid var(--linie-d);border-radius:5px;overflow:hidden}
.konf__leiste{display:flex;border-bottom:1px solid var(--linie-d)}
.konf__leiste div{flex:1;padding:1rem 1.2rem;font:500 .72rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--stahl-d);border-right:1px solid var(--linie-d);position:relative}
.konf__leiste div:last-child{border-right:0}
.konf__leiste div[data-an]{color:#fff}
.konf__leiste div[data-an]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--signal)}
.konf__leib{padding:1.9rem}
.stufe{display:none}
.stufe[data-an]{display:block;animation:rein .22s ease-out}
@keyframes rein{from{opacity:0;transform:translateX(11px)}to{opacity:1;transform:none}}
.frage{font-weight:600;font-size:1.08rem;margin-bottom:1.1rem;color:#fff}
.wahl{display:grid;gap:.55rem;grid-template-columns:1fr;margin-bottom:1.6rem}
@media(min-width:640px){.wahl{grid-template-columns:1fr 1fr}}
.wahl label{display:flex;gap:.7rem;align-items:center;border:1px solid var(--linie-d);
  border-radius:3px;padding:.9rem 1rem;cursor:pointer;font-size:.97rem;color:var(--hell);
  transition:border-color .14s ease,background .14s ease}
.wahl label:hover{border-color:var(--stahl)}
.wahl input{accent-color:var(--signal);width:16px;height:16px;flex:none}
.wahl label:has(input:checked){border-color:var(--signal);background:rgba(255,90,31,.07)}
.feld{margin-bottom:1.25rem}
.feld label{display:block;font:500 .72rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--stahl-d);margin-bottom:.55rem}
.feld input,.feld textarea{width:100%;padding:.9rem 1rem;font:inherit;color:var(--hell);
  background:var(--nacht);border:1px solid var(--linie-d);border-radius:3px}
.feld input::placeholder,.feld textarea::placeholder{color:#5C646E}
.feld input:focus,.feld textarea:focus{border-color:var(--signal);outline:none}
.feld textarea{min-height:7rem;resize:vertical}
.hilf{font-size:.86rem;color:var(--stahl-d);margin:.45rem 0 0}
.konf__fuss{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:.4rem}


/* Fuß */
.fuss{background:var(--nacht);color:var(--stahl-d);padding-block:3.5rem 4rem;
  border-top:1px solid var(--linie-d)}
.fuss a{color:var(--stahl-d);text-decoration:none}
.fuss a:hover{color:#fff}
.fuss__gitter{display:grid;gap:2.2rem;grid-template-columns:1fr}
@media(min-width:760px){.fuss__gitter{grid-template-columns:1.4fr 1fr 1fr}}
.fuss__t{font:500 .68rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:#5C646E;margin-bottom:.9rem}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.5rem;font-size:.94rem}

/* Einblenden beim Scrollen – einmalig, danach abgemeldet */
.rein{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rein.da{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hero__zeile>i{transform:none}
  .tafel--auf .zeile{opacity:1}
  .rein{opacity:1;transform:none}
  .pj__d{max-height:10rem;opacity:1}
}

/* --- Ergaenzungen fuer die Live-Seite --------------------------------- */
.sprung{position:absolute;left:-9999px;background:var(--nacht);color:#fff;
  padding:.85rem 1.25rem;z-index:100}
.sprung:focus{left:1rem;top:1rem}
.raster>*{position:relative}
.tafel__stand{padding:.6rem 1.15rem .9rem;border-top:1px solid var(--linie-d);
  font-size:.68rem;color:#5C646E;letter-spacing:.1em;text-transform:uppercase}
.tafel--auf .zeile:nth-child(n+6){animation-delay:.65s}
.sys__bild{margin-top:1rem;border-radius:4px;border:1px solid var(--linie)}
.pj__bild{margin-top:1rem;max-width:34rem;border-radius:4px;border:1px solid var(--linie-d)}
.portrait{border-radius:5px;border:1px solid var(--linie);width:100%}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hinweis{padding:1rem 1.2rem;border-radius:4px;margin-bottom:1.6rem;max-width:54rem;font-size:.97rem}
.hinweis--ok{background:rgba(46,158,107,.12);border:1px solid var(--status);color:#BFF0D8}
.hinweis--err{background:rgba(255,90,31,.12);border:1px solid var(--signal);color:#FFD4C2}
.wartungsband{background:var(--signal);color:#fff;font:600 .875rem/1.4 var(--text);
  padding:.7rem var(--rand);text-align:center}
.wartungsband a{color:#fff}
.pj:focus-within .pj__d{max-height:22rem;opacity:1}
@media print{
  .kopf,.konf,.knopf,.wartungsband{display:none}
  body,.band--dunkel,.hero{background:#fff;color:#000}
  .tafel{background:#fff;color:#000;border:1px solid #999}
}

/* ══════════════════════════════════════════════════════════════
   Blöcke aus dem Redaktionssystem
   Ergänzt die vorhandene Gestaltung, ersetzt nichts davon.
   ══════════════════════════════════════════════════════════════ */

/* Abstandsstufen je Block – vier Werte, nicht frei einstellbar */
.band--knapp{padding-top:0}
.band--weit{padding-top:calc(var(--abstand) * 1.4);padding-bottom:calc(var(--abstand) * 1.4)}
.band--sehrweit{padding-top:calc(var(--abstand) * 1.9);padding-bottom:calc(var(--abstand) * 1.9)}

/* Systeme zweispaltig */
@media(min-width:860px){
  .sysgitter{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
}
.sys__link{color:inherit;text-decoration:none;border-bottom:2px solid transparent}
.sys__link:hover{border-bottom-color:var(--signal)}

/* Angebote */
.ang{display:grid;gap:1.5rem}
@media(min-width:880px){.ang{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}}
.ang__k{border:1px solid var(--linie);background:var(--weiss);padding:1.9rem 1.7rem;
        display:flex;flex-direction:column;gap:1.1rem}
.band--dunkel .ang__k{background:var(--kohle);border-color:var(--linie-d)}
.ang__k--vor{border-color:var(--signal);border-width:2px}
.ang__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
           border-bottom:1px solid var(--linie);padding-bottom:.9rem}
.band--dunkel .ang__kopf{border-bottom-color:var(--linie-d)}
.ang__kopf h3{margin:0;font-size:1.22rem}
.ang__p{margin-left:auto;font-family:var(--display);font-stretch:125%;font-weight:800;
        font-size:1.32rem;color:var(--signal);white-space:nowrap}
.ang__kurz{margin:0;color:var(--stahl)}
.band--dunkel .ang__kurz{color:var(--stahl-d)}
.ang__lt{margin:0 0 .45rem;font:400 .7rem/1 var(--mono);letter-spacing:.13em;
         text-transform:uppercase;color:var(--stahl)}
.ang__l ul{margin:0;padding:0;list-style:none;display:grid;gap:.42rem}
.ang__l li{position:relative;padding-left:1.4rem;font-size:.95rem;line-height:1.5}
.ang__ja li::before{content:"→";position:absolute;left:0;color:var(--signal);font-family:var(--mono)}
.ang__nein li{color:var(--stahl)}
.band--dunkel .ang__nein li{color:var(--stahl-d)}
.ang__nein li::before{content:"✕";position:absolute;left:0;font-size:.8em;top:.15em}
.ang__fuss{margin-top:auto;padding-top:1rem;border-top:1px solid var(--linie);
           display:grid;gap:.3rem}
.band--dunkel .ang__fuss{border-top-color:var(--linie-d)}
.ang__z{font-family:var(--mono);font-size:.86rem}
.ang__h{font-size:.8rem;color:var(--stahl)}

/* Häufige Fragen als offene Liste – wird von KI-Systemen besser übernommen */
.fr{padding:1.35rem 0;border-top:1px solid var(--linie)}
.band--dunkel .fr{border-top-color:var(--linie-d)}
.fr:last-child{border-bottom:1px solid var(--linie)}
.band--dunkel .fr:last-child{border-bottom-color:var(--linie-d)}
.fr__f{margin:0 0 .55rem;font-size:1.06rem;font-family:var(--display);font-stretch:125%}
.fr__a{margin:0;color:var(--stahl);max-width:60ch}
.band--dunkel .fr__a{color:var(--stahl-d)}

/* Handlungsaufruf */
.cta__in{display:flex;flex-wrap:wrap;gap:1.6rem 2.5rem;align-items:center;justify-content:space-between}
.cta__t{margin:0;font-size:clamp(1.3rem,3.4vw,1.9rem)}
.cta__s{margin:.6rem 0 0;color:var(--stahl);max-width:52ch}
.band--dunkel .cta__s{color:var(--stahl-d)}
.cta__w{display:grid;gap:.7rem;justify-items:start}
.cta__d{margin:0;font:400 .92rem/1.6 var(--mono)}
.cta__d a{color:inherit;border-bottom:1px solid var(--signal);text-decoration:none}
.direktlink{color:#fff;border-bottom:1px solid var(--signal);text-decoration:none}

/* Preisrechner */
.rechner{display:grid;gap:2.2rem;margin-top:2.8rem}
@media(min-width:900px){.rechner{grid-template-columns:1.25fr .95fr;gap:3rem;align-items:start}}
.rechner fieldset{border:0;padding:0;margin:0 0 1.6rem}
.rechner legend{padding:0;margin-bottom:.7rem;font:600 .95rem/1.4 var(--text)}
.band--dunkel .rechner legend{color:var(--hell)}
.regler{display:flex;gap:.9rem;align-items:center}
.regler input[type=range]{flex:1;accent-color:var(--signal);height:1.9rem}
.regler input[type=number]{width:4.6rem;padding:.5rem .6rem;font:inherit;
  background:transparent;border:1px solid var(--linie-d);color:inherit;border-radius:2px}
.band--dunkel .regler input[type=number]{color:var(--hell)}
.haken{display:grid;gap:.6rem}
.haken label{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;line-height:1.45}
.haken input{margin-top:.2rem;width:18px;height:18px;accent-color:var(--signal);flex:none}
.haken small{display:block;color:var(--stahl-d);font-size:.83rem}
.rechner__erg .tafel{margin:0}
.rechner__sag{margin:.9rem 0 0;font:400 .9rem/1.5 var(--mono);color:var(--stahl-d);min-height:1.4em}
.rechner__hin{margin:.6rem 0 1.3rem;max-width:44ch}
.rechner__erg .knopf{margin-top:.4rem}

/* Sichtbarer Fokus überall – Voraussetzung für WCAG 2.2 AA */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--signal);outline-offset:2px;border-radius:1px}
/* Automatisch vergebene h1 auf Unterseiten behält die Größe einer h2 */
h1.wie-h2{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.035em}
.cta__t h1,.cta__t h2{margin:0;font-size:clamp(1.3rem,3.4vw,1.9rem)}

/* ══════════════════════════════════════════════════════════════
   Seitenwechsel
   ------------------------------------------------------------
   Reines CSS, kein Skript, keine zusätzliche Anfrage. Der Browser
   blendet die alte Ansicht aus und die neue ein, statt weiß zu
   blitzen. Kopf und Fußzeile bleiben dabei stehen, weil sie einen
   eigenen Namen bekommen — sie werden nicht mitanimiert.
   Wo die Technik fehlt (Firefox), passiert schlicht nichts:
   die Seite lädt wie bisher.
   ══════════════════════════════════════════════════════════════ */
@view-transition{navigation:auto}

/* Elemente, die über den Wechsel hinweg dieselben bleiben */
.kopf{view-transition-name:kopf}
.fuss{view-transition-name:fuss}
main{view-transition-name:inhalt}

/* Der Inhalt tauscht sich aus: der alte weicht nach oben,
   der neue kommt von unten. Kurz gehalten – 220 ms fühlen sich
   flüssig an, ab etwa 400 ms wirkt es zäh. */
::view-transition-old(inhalt){
  animation:mk-weg .16s cubic-bezier(.4,0,1,1) both}
::view-transition-new(inhalt){
  animation:mk-her .24s cubic-bezier(.16,.84,.44,1) both}
@keyframes mk-weg{to{opacity:0;transform:translateY(-8px)}}
@keyframes mk-her{from{opacity:0;transform:translateY(12px)}}

/* Kopf und Fußzeile: kein Zucken, nur weich überblenden */
::view-transition-old(kopf),::view-transition-new(kopf),
::view-transition-old(fuss),::view-transition-new(fuss){
  animation-duration:.16s}

/* Der orangefarbene Strich unter dem aktiven Menüpunkt wandert
   von der alten zur neuen Position, statt zu springen. Das ist
   der eigentliche „Reiterwechsel". */
.nav a[aria-current=page]{color:#fff}
.nav a[aria-current=page]::after{right:0;view-transition-name:navstrich}
::view-transition-group(navstrich){animation-duration:.28s}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat,
   bekommt gar keine. */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}