/* TinyTechLab — Entwurf 2026-10-03
   Keine Framework-Abhängigkeit, keine externen Ressourcen.
   Farben stammen aus dem Lack des Fahrzeugs (gemessen: #46AC38 / #3AAA36). */

@font-face{font-family:Plex;src:url(../schriften/plex-sans-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(../schriften/plex-sans-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:PlexMono;src:url(../schriften/plex-mono-500.woff2)format('woff2');font-weight:500;font-display:swap}

:root{
  --gruen:#27791D;        /* auf Weiß 5,47:1, auf #f4f6f3 5,03:1 — gemessen */
  --auf-gruen:#ffffff;    /* Schrift auf grüner Fläche */
  --gruen-hell:#4FBF3C;   /* Lackgrün, auf Dunkel */
  --tinte:#14171a;
  --tinte-weich:#4a5056;
  --grund:#ffffff;
  --grund-weich:#f4f6f3;
  --linie:#dfe3dd;
  --dunkel:#121513;
  --dunkel-2:#1c201d;
  --rand:1.5rem;
  --max:76rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --gruen:#6ED45A; --gruen-hell:#6ED45A;
    /* helles Grün braucht dunkle Schrift: Weiß darauf wären 1,87:1,
       #0C0E0D ergibt 10,36:1 */
    --auf-gruen:#0C0E0D;
    --tinte:#e9ecea; --tinte-weich:#a7afaa;
    --grund:#121513; --grund-weich:#1a1e1b; --linie:#2c322d;
    --dunkel:#0c0e0d; --dunkel-2:#151816;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--grund);color:var(--tinte);
  font:400 clamp(1rem,.96rem + .2vw,1.09rem)/1.65 Plex,system-ui,sans-serif;
  -webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-weight:600;line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.1rem,1.4rem + 3.2vw,4rem)}
h2{font-size:clamp(1.6rem,1.25rem + 1.6vw,2.5rem)}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:inherit}
img,svg{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--gruen-hell);outline-offset:3px;border-radius:2px}

.huelle{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.springen{position:absolute;left:var(--rand);top:.4rem;z-index:99;padding:.6rem 1rem;
  background:var(--gruen-hell);color:#06130a;font-weight:600;border-radius:.4rem;transform:translateY(-200%)}
.springen:focus{transform:none}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--grund) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf__reihe{display:flex;align-items:center;gap:1rem;min-height:4.25rem}
.marke{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:600;letter-spacing:-.02em}
.marke svg{width:2.1rem;color:var(--gruen)}
.marke b{font-weight:600}
.marke span{color:var(--tinte-weich);font-weight:400}
.navi{margin-left:auto;display:flex;align-items:center;gap:.25rem}
/* :not(.knopf) ist nötig: ".navi a" ist spezifischer als ".knopf--voll" und
   überschrieb sonst dessen weiße Schrift mit der grauen Navigationsfarbe —
   grün auf grün, gemessen 1,95:1 statt der geforderten 4,5:1. */
.navi a:not(.knopf){text-decoration:none;padding:.5rem .7rem;border-radius:.4rem;
  font-size:.95rem;color:var(--tinte-weich)}
.navi a:not(.knopf):hover,.navi a:not(.knopf)[aria-current]{color:var(--tinte);
  background:var(--grund-weich)}
.knopf{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:.5rem;
  text-decoration:none;font-weight:600;font-size:.97rem;border:2px solid transparent;transition:.15s}
.knopf--voll{background:var(--gruen);color:var(--auf-gruen)}
.knopf--voll:hover{background:color-mix(in srgb,var(--gruen) 85%,#000);color:var(--auf-gruen)}
.knopf--rand{border-color:currentColor}
.knopf--rand:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.navi-schalter{display:none;margin-left:auto;background:none;border:1px solid var(--linie);
  border-radius:.4rem;padding:.55rem .7rem;color:inherit;font:inherit;cursor:pointer}
@media (max-width:62rem){
  .navi{position:fixed;inset:4.25rem 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--grund);border-bottom:1px solid var(--linie);padding:.5rem var(--rand) 1.25rem;display:none}
  .navi[data-offen]{display:flex}
  .navi a:not(.knopf){padding:.85rem .25rem;border-bottom:1px solid var(--linie);font-size:1.05rem}
  .navi .knopf{margin-top:.9rem;justify-content:center;border-bottom:0}
  .navi-schalter{display:block}
}

/* ---------- Held ---------- */
.held{position:relative;background:var(--dunkel);color:#f1f4f1;overflow:clip}
.held__bild{position:absolute;inset:0}
.held__bild img{width:100%;height:100%;object-fit:cover;object-position:52% 42%;opacity:.42}
.held::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--dunkel) 18%,color-mix(in srgb,var(--dunkel) 72%,transparent) 55%,transparent 88%)}
.held__inhalt{position:relative;z-index:2;padding-block:clamp(4rem,10vw,8.5rem);max-width:40rem}
.held h1{color:#fff}
.held h1 em{font-style:normal;color:var(--gruen-hell)}
.held p{font-size:clamp(1.08rem,1rem + .45vw,1.3rem);color:#cfd6d0;max-width:34rem}
.held__knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
/* Die Figur von der alten Startseite, rechts neben dem Text.
   Unter 72rem ausgeblendet: dort reicht die Breite nicht für Text UND Figur,
   sie würde sich überlagern. aria-hidden, weil sie nichts erklärt, was nicht
   auch im Text steht. */
.held__figur{display:none}
@media(min-width:72rem){
  /* Bis an den Fensterrand, nicht nur bis zur Inhaltsspalte: rechts davon
     stand sonst ein Streifen leer. Bezug ist .held__inhalt (das ist
     position:relative), deshalb muss der Rand der Huelle und der halbe
     Ueberhang zur Fensterbreite herausgerechnet werden. Die linken 14 % des
     Films sind ohnehin ausgeblendet (so ist er gerendert), die duerfen ueber
     den Textbereich ragen - nur das Deckende darf es nicht. */
  /* Der Film steht im Markup in .held__inhalt (damit er auf dem Telefon
     zwischen Absatz und Knoepfen landet). Waere .held__inhalt hier weiter
     position:relative, bezoege sich right:0 auf die Inhaltsspalte statt aufs
     Fenster - eine Rechnung ueber 100vw hat den Film dann um die halbe
     Rollbalkenbreite ueber die Kante geschoben (gemessen 11 bis 13 px). Also
     wird .held__inhalt hier statisch und seine Kinder tragen das z-index
     selbst; der Bezug ist damit wieder .held. */
  .held__inhalt{position:static}
  .held__inhalt > :not(.held__figur){position:relative;z-index:2}
  .held__figur{display:block;position:absolute;bottom:clamp(1rem,4vh,3rem);z-index:1;
    right:0;width:clamp(26rem,54vw,58rem);margin:0;pointer-events:none}
  .held__figur img,.held__figur video{width:100%;height:auto;display:block}
  /* Platz schaffen, damit die Figur die Zeilen nicht anschneidet */
  .held__inhalt{padding-right:clamp(18rem,38vw,34rem);box-sizing:content-box}
}

/* Schmale Anzeigen: das Hintergrundfoto raus, dafuer der Film ueber den
   Knoepfen und ueber die volle Fensterbreite. Das Foto war dort ohnehin nur
   ein dunkler Schleier - auf 375 px ist vom Fahrzeug nichts zu erkennen.
   Die negative Aussenkante hebt den Huellenrand auf; .held hat overflow:clip,
   es entsteht also kein waagerechter Rollbalken. */
@media(max-width:71.99rem){
  .held__bild{display:none}
  .held__figur{display:block;position:static;z-index:1;pointer-events:none;
    width:100vw;max-width:none;margin:1.6rem 0 .2rem calc(-1 * var(--rand))}
  .held__figur img,.held__figur video{width:100%;height:auto;display:block}
}

/* Film: bis die Alphapruefung in FILM_SKRIPT durch ist, steht das Standbild
   da. Erst dann wird getauscht - sonst blitzt in Safari ein schwarzer
   Kasten auf, weil es VP9-WebM zwar abspielt, aber ohne Alphakanal. */
.film{position:relative}
.film__standbild{display:block}
.film__video{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.film--laeuft .film__video{opacity:1}
.film--laeuft .film__standbild{visibility:hidden}

/* Der Film blendet nur nach LINKS und RECHTS aus - in und gegen die
   Fahrtrichtung, so ist er gerendert. Oben und unten hat er harte Kanten,
   und ueber dem Heldenfoto zeichnet das ein sichtbares Rechteck. Die
   Maske nimmt sie weg. Unten erst ab 90 %: darueber stehen noch die
   Raeder, die sollen nicht verblassen. */
.held__film{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 90%,transparent 100%)}

/* Der Safari-Rueckfall ist ein DECKENDES Video, auf die Hintergrundfarbe
   gebacken. Die trifft auf 5 von 255 genau - genug, dass die senkrechten
   Kanten als Rechteck sichtbar werden. Deshalb hier zusaetzlich nach links
   und rechts ausblenden; die Maske arbeitet auf dem Element, nicht auf dem
   Videoinhalt, und ist damit vom Codec unabhaengig. */
.held__film.film--fest{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 90%,transparent 100%),
                     linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 90%,transparent 100%),
             linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.held .knopf--rand{color:#fff}
.augenmerk{display:inline-flex;align-items:center;gap:.5rem;font:500 .82rem/1 PlexMono,ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gruen);margin-bottom:1.1rem}
/* Auf dunklen Flächen trägt das helle Lackgrün, auf hellen nicht. */
.held .augenmerk,.anfrage .augenmerk,.zahlen .augenmerk{color:var(--gruen-hell)}
.augenmerk::before{content:"";width:1.8rem;height:2px;background:currentColor}

/* Schmale Fenster: Der Abstand zwischen Kopfzeile und Augenmerk kam aus
   padding-block:clamp(4rem,…) und lag bei 64 px — auf einem Telefon ist das
   ein Drittel der sichtbaren Höhe, bevor überhaupt etwas dasteht. Und
   "RHEINLAND-PFALZ & SAARLAND" brach bei allen Breiten unter 640 px auf zwei
   Zeilen um; bei 320 px passt es ab 12 px Schriftgröße in eine (gemessen
   2026-10-07, Sperrung dabei unverändert). */
@media(max-width:40rem){
  .held__inhalt{padding-block-start:clamp(1.75rem,7vw,4rem)}
  .held .augenmerk{font-size:12px;margin-bottom:.85rem}
}

/* ---------- Zahlenleiste ---------- */
.zahlen{background:var(--dunkel-2);color:#e7ebe8;border-top:1px solid #272c28}
.zahlen ul{list-style:none;margin:0;padding:1.6rem 0;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.zahlen b{display:block;font:500 1.7rem/1.1 PlexMono,monospace;color:var(--gruen-hell)}
.zahlen span{font-size:.9rem;color:#a4aca6}

/* ---------- Abschnitte ---------- */
.block{padding-block:clamp(3.5rem,7vw,6rem)}
.block--weich{background:var(--grund-weich)}
.block__kopf{max-width:46rem;margin-bottom:2.5rem}
.block__kopf p{color:var(--tinte-weich);font-size:1.08rem;margin-bottom:0}

/* Schaubild der Ausstattung: freigestelltes Rendering, deshalb KEIN Rahmen und
   keine Hintergrundfläche - die Transparenz ist der Witz daran, es steht damit
   auf hellem wie auf dunklem Grund. */
.schaubild{margin:0 0 3rem;max-width:60rem}
.schaubild img{width:100%;height:auto;display:block}
.schaubild figcaption{margin-top:.6rem;font-size:.9rem;color:var(--tinte-weich)}

/* Dreierreihe aus Bildern mit Unterschrift - verträgt Zeichnung und Foto
   nebeneinander, weil beide denselben Rahmen und dieselbe Höhe bekommen. */
.bildreihe{display:grid;gap:1.25rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.bildreihe figure{margin:0}
.bildreihe img{width:100%;height:auto;display:block;border-radius:.9rem}
.bildreihe figcaption{margin-top:.5rem;font-size:.9rem;color:var(--tinte-weich)}

/* ---------- Angebotskarten ---------- */
.karten{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));list-style:none;margin:0;padding:0}
.karte{display:flex;flex-direction:column;background:var(--grund);border:1px solid var(--linie);
  border-radius:.9rem;overflow:hidden;transition:border-color .15s,transform .15s}
.karte:hover{border-color:var(--gruen);transform:translateY(-2px)}
.karte__bild{aspect-ratio:3/2;background:var(--grund-weich)}
.karte__bild img{width:100%;height:100%;object-fit:cover}
.karte__text{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1}
.karte h3{margin-bottom:.4rem}
.karte h3 a{text-decoration:none}
.karte h3 a::after{content:"";position:absolute;inset:0}
.karte{position:relative}
.karte p{color:var(--tinte-weich);font-size:.98rem;flex:1}
.eckdaten{list-style:none;margin:1rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;font:500 .82rem/1.4 PlexMono,monospace;color:var(--tinte-weich)}
.eckdaten li{display:flex;align-items:center;gap:.35rem}
.eckdaten li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--gruen);flex:none}

/* ---------- Zweispalter ---------- */
.duo{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr}
@media(min-width:52rem){.duo{grid-template-columns:1fr 1fr}.duo--kippen>*:first-child{order:2}}
.duo__bild{border-radius:.9rem;overflow:hidden;background:var(--grund-weich)}
.duo__bild img{width:100%}

.liste{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.55rem}
.liste li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.liste li::before{content:"";flex:none;width:1.1rem;height:1.1rem;margin-top:.33rem;border-radius:.25rem;
  background:var(--gruen);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.3 12.1 2.5 8.3l1.4-1.4 2.4 2.4 5.8-5.8 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.liste--offen li::before{background:var(--tinte-weich);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- Ablauf ---------- */
.ablauf{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.ablauf li{counter-increment:s;padding-top:3.2rem;position:relative}
.ablauf li::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font:500 1.5rem/1 PlexMono,monospace;color:var(--gruen);
  border-top:3px solid var(--gruen);padding-top:.8rem;width:100%}
.ablauf h3{font-size:1.1rem;margin-bottom:.3rem}
.ablauf p{color:var(--tinte-weich);font-size:.97rem;margin:0}

/* ---------- Referenzen ---------- */
.refs{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.refs li{padding:.9rem 1.1rem;background:var(--grund);border:1px solid var(--linie);border-radius:.6rem;font-size:.97rem}
.refs a{text-decoration:none;font-weight:600}
.refs a:hover{color:var(--gruen)}
.refs small{display:block;color:var(--tinte-weich);font-size:.85rem;font-weight:400}
.refs a[rel~="external"]::after{content:" ↗";color:var(--tinte-weich);font-weight:400}

/* ---------- Anfrage ---------- */
.anfrage{background:var(--dunkel);color:#eef2ef}
.anfrage h2{color:#fff}
.anfrage p{color:#c2cac4}
.anfrage .duo__bild{background:#1d211e}
.feld{display:grid;gap:.35rem;margin-bottom:.9rem}
.feld label{font-size:.9rem;font-weight:600}
.feld input,.feld select,.feld textarea{font:inherit;padding:.65rem .8rem;border-radius:.45rem;
  border:1px solid #333a35;background:#191d1a;color:#eef2ef}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--gruen-hell)}
.feld--paar{display:grid;gap:.9rem;grid-template-columns:1fr 1fr}
@media(max-width:34rem){.feld--paar{grid-template-columns:1fr}}
.hinweis{font-size:.85rem;color:#99a39c;margin-top:.8rem}
/* Ohne JavaScript ist das Anfrageformular nicht benutzbar - die Rechenaufgabe
   kommt vom Server, und ohne sie weist der Endpunkt jede Eingabe ab. Dann lieber
   das Formular ausblenden und im noscript-Feld die Adresse anbieten. Die Marke
   setzt ein Zweizeiler im Kopf; ein <style> im body wäre ungültiges HTML. */
html:not(.js) #anfrage-formular{display:none}

/* ---------- Fuß ---------- */
.fuss{background:var(--dunkel-2);color:#b9c2bc;padding-block:3rem 2rem;font-size:.94rem}
.fuss__gitter{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-bottom:2rem}
.fuss h2{color:#f0f3f1;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:PlexMono,monospace;font-weight:500;margin-bottom:.9rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--gruen-hell);text-decoration:underline}
.fuss__unten{border-top:1px solid #2a302c;padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  align-items:center;font-size:.86rem;color:#8d968f}
.fuss__unten .marke svg{color:var(--gruen-hell);width:1.6rem}

/* Fuß: Logo etwas größer, Kontaktliste im Anfrageblock ohne Häkchen */
.fuss__unten .marke svg{width:1.9rem}
.anfrage .liste li::before{background:var(--gruen-hell)}

/* ---------- Preise ---------- */
.preise{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.preis{background:var(--grund);border:1px solid var(--linie);border-radius:.9rem;
  padding:1.6rem 1.5rem;display:flex;flex-direction:column}
.preis b{font:500 clamp(2rem,1.6rem + 1.5vw,2.9rem)/1 PlexMono,monospace;color:var(--gruen);
  letter-spacing:-.02em;margin-bottom:.5rem}
.preis h3{font-size:1.1rem;margin-bottom:.35rem}
.preis p{color:var(--tinte-weich);font-size:.97rem;margin:0}
.preis__fuss{max-width:46rem}
.preis__fuss p{margin-bottom:.9rem}
.preis__fuss .knopf{margin-top:.6rem}
.hinweis-hell{font-size:.92rem;color:var(--tinte-weich);padding:.8rem 1rem;
  border-left:3px solid var(--gruen);background:var(--grund)}
.preiszeile{font:500 .95rem/1.7 PlexMono,monospace;color:#cfd6d0;
  padding:.8rem 0;border-block:1px solid #2c322d;margin-bottom:1.6rem}
.preiszeile b{color:var(--gruen-hell)}

/* ---------- Unterseiten ---------- */
.brot{font-size:.9rem;color:var(--tinte-weich);margin-bottom:1.5rem;
  display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.brot a{text-decoration:none}
.brot a:hover{color:var(--gruen);text-decoration:underline}
.brot span[aria-hidden]{opacity:.5}

/* Auf den Angebotsseiten die Illustration VOLLSTÄNDIG zeigen - sie ist
   gezeichnet, nicht fotografiert, und jedes Detail darin ist Absicht.
   Ein Zuschnitt (object-fit:cover) schnitte oben und unten etwas weg. */
.duo__bild.gross{margin:0 auto 2.5rem;max-width:44rem}
.duo__bild.gross img{width:100%;height:auto;display:block}

.satz{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start;grid-template-columns:1fr}
@media(min-width:56rem){.satz{grid-template-columns:minmax(0,1fr) 20rem}}
.satz__text{max-width:42rem}
.satz__text.schmal{max-width:44rem}
.satz__text h2{font-size:clamp(1.3rem,1.15rem + .7vw,1.7rem);margin-top:2rem}
.satz__text h2:first-child{margin-top:0}
.satz__text .liste{margin-bottom:1.2rem}
.einstieg{font-size:1.1rem;color:var(--tinte-weich);padding:1.1rem 1.3rem;
  background:var(--grund-weich);border-radius:.7rem;border-left:3px solid var(--gruen)}

/* Eckdaten-Kasten auf den Angebotsseiten */
.daten{position:sticky;top:5.5rem;background:var(--grund-weich);
  border:1px solid var(--linie);border-radius:.9rem;padding:1.5rem}
.daten h2{font:500 .8rem/1 PlexMono,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinte-weich);margin:0 0 1rem}
.daten table{width:100%;border-collapse:collapse;font-size:.95rem;margin-bottom:1.2rem}
.daten th,.daten td{text-align:left;vertical-align:top;padding:.5rem 0;
  border-bottom:1px solid var(--linie)}
.daten th{font-weight:600;padding-right:.9rem;width:45%}
.daten td{color:var(--tinte-weich)}
.daten tr:last-child th,.daten tr:last-child td{border-bottom:0}
.daten__preis{font-size:.95rem;margin-bottom:1.2rem}
.daten__preis b{font-family:PlexMono,monospace;color:var(--gruen)}
.daten .knopf{width:100%;justify-content:center}
.daten__fuss{font-size:.82rem;color:var(--tinte-weich);margin:.9rem 0 0}
@media(max-width:56rem){.daten{position:static}}

.anfrage .satz__text,.anfrage h1{color:#eef2ef}
.anfrage abbr{text-decoration:none;color:var(--gruen-hell)}

/* ---------- Impressionen-Streifen ----------
   Waagerechtes Scrollen mit Einrastpunkten. Kein Karussell, das von selbst
   weiterspringt: die Bahn bewegt sich nur, wenn jemand sie bewegt - per
   Wischen, Pfeiltaste oder Knopf. Ohne JavaScript bleibt sie scrollbar. */
.streifen{padding-bottom:clamp(3rem,6vw,4.5rem);overflow:hidden}
.streifen__kopf{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;max-width:none;margin-bottom:2rem}
.streifen__kopf h2{margin-bottom:0}
.streifen__knoepfe{display:flex;gap:.5rem;flex:none}
.rund{width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid var(--linie);
  background:var(--grund);color:var(--tinte);font-size:1.5rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:.15s}
.rund:hover:not(:disabled){border-color:var(--gruen);color:var(--gruen)}
.rund:disabled{opacity:.35;cursor:default}

.bahn{list-style:none;margin:0;padding:0 max(var(--rand),(100vw - var(--max))/2 + var(--rand));
  display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:thin;
  scrollbar-color:var(--linie) transparent}
@media (prefers-reduced-motion:reduce){.bahn{scroll-behavior:auto}}
.bahn::-webkit-scrollbar{height:8px}
.bahn::-webkit-scrollbar-thumb{background:var(--linie);border-radius:4px}
.folie{flex:0 0 min(26rem,78vw);scroll-snap-align:start}
.folie figure{margin:0}
.folie picture{display:block;border-radius:.8rem;overflow:hidden;background:var(--grund-weich);
  aspect-ratio:4/3}
.folie img{width:100%;height:100%;object-fit:cover}
.folie figcaption{margin-top:.7rem;font-size:.92rem;color:var(--tinte-weich)}
.bahn:focus-visible{outline:3px solid var(--gruen-hell);outline-offset:4px;border-radius:.4rem}

/* ---------- Werkstattbuch ----------
   Breite Projektkacheln: Bild und Text nebeneinander, damit die Erklärung
   neben dem steht, was sie erklärt. Unter 52rem untereinander. */
.projekte{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.projekt{display:grid;gap:0;background:var(--grund);border:1px solid var(--linie);
  border-radius:.9rem;overflow:hidden;grid-template-columns:1fr}
@media(min-width:52rem){.projekt{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}}
.block--weich .projekt{background:var(--grund)}
.projekt__bild{background:var(--grund-weich)}
.projekt__bild picture{display:block;height:100%}
.projekt__bild img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:52rem){.projekt__bild img{aspect-ratio:3/2}}
.projekt__text{padding:1.4rem 1.6rem 1.6rem}
.projekt__text h3{margin-bottom:.5rem}
.projekt__text p{color:var(--tinte-weich);margin-bottom:0}
.projekt__text .eckdaten{margin-top:1rem}
.anfrage .satz__text h2{color:#fff}
.anfrage .satz__text p{color:#c2cac4}

/* Arbeiten ohne Bild: kompakte Spalten, damit die Liste nicht endlos wird */
.weitere{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.weitere li{padding:1.1rem 1.3rem;background:var(--grund-weich);
  border-radius:.7rem;border-left:3px solid var(--gruen)}
.weitere h3{font-size:1.05rem;margin-bottom:.35rem}
.weitere p{color:var(--tinte-weich);font-size:.96rem;margin:0}

/* Sprungmenü des Werkstattbuchs — die Seite ist lang, also eine Übersicht voran */
.sprungmenue{margin:0 0 2.5rem;padding:1.3rem 1.5rem;background:var(--grund-weich);
  border-radius:.9rem;max-width:52rem}
.sprungmenue h2{font:500 .8rem/1 PlexMono,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinte-weich);margin:0 0 .9rem}
.sprungmenue ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem .9rem}
.sprungmenue a{font-size:.97rem;text-decoration:none;padding:.3rem .6rem;border-radius:.35rem;
  background:var(--grund);border:1px solid var(--linie);display:inline-block}
.sprungmenue a:hover{border-color:var(--gruen);color:var(--gruen)}
.block[id]{scroll-margin-top:5rem}

/* Honigtopf — für Menschen unsichtbar, aber nicht display:none: manche Bots
   überspringen genau das. Tastaturnutzer erreichen das Feld nicht (tabindex=-1). */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Rechenaufgabe im Anfrageformular */
.rechenaufgabe{border-top:1px solid #333a35;padding-top:1.1rem;margin-top:1.2rem}
.rechenaufgabe label{font-size:1rem}
.rechenaufgabe input{max-width:9rem}
.meldung{padding:.8rem 1rem;border-radius:.5rem;font-size:.95rem;margin:.4rem 0 1rem}
.meldung[data-art="fehler"]{background:#4a1f1f;color:#ffd9d9;border-left:3px solid #e06a6a}
.meldung[data-art="gut"]{background:#17351a;color:#d6f5d9;border-left:3px solid var(--gruen-hell)}

/* ---------- Freigestellte Figur im Anfrageblock ----------
   Sie steht auf der unteren Innenkante des Abschnitts, statt in einem Kasten
   zu schweben. Das Bild ist unten bündig beschnitten, deshalb genügt
   bottom:0 — overflow:clip fängt ab, was seitlich übersteht.
   Unter 64rem ausgeblendet: dort ist die Spalte zu schmal, die Figur würde
   den Text überlagern. aria-hidden, weil sie nichts erklärt. */
.anfrage{position:relative;overflow:clip}
.figur-frei{display:none}
@media(min-width:64rem){
  .figur-frei{display:block;position:absolute;bottom:0;z-index:1;
    right:max(var(--rand), (100vw - var(--max))/2 + var(--rand));
    width:clamp(15rem,20vw,21rem);pointer-events:none}
  .figur-frei img{width:100%;height:auto;display:block}
  /* Platz schaffen, damit die Figur den Text nicht überdeckt */
  .anfrage__rechts{padding-right:clamp(13rem,18vw,19rem);min-height:22rem}
}

/* ---------- Ausstattungsseite ---------- */
.geraete{margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.geraete h2{margin-bottom:1.2rem}
.geraeteliste{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.geraeteliste li{padding:1.2rem 1.4rem;background:var(--grund-weich);
  border-radius:.8rem;border-left:3px solid var(--gruen)}
.geraeteliste h3{font-size:1.05rem;margin-bottom:.4rem}
.geraeteliste p{color:var(--tinte-weich);font-size:.97rem;margin:0}