/* ==========================================================================
   RASTERWERK V2 — ein Stylesheet, keine Abhängigkeiten.
   Grundsatz: Diese Datei lädt nichts von fremden Servern.
   Raster 8 px · 12 Spalten · Papier, Tinte, ein Zinnober.
   ========================================================================== */

@font-face{font-family:"Schibsted Grotesk";src:url("/fonts/schibsted-grotesk.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono.woff2") format("woff2");font-weight:400;font-display:swap}
/* Fallback mit angepasster Breite, damit der Umbruch beim Laden nicht springt */
@font-face{font-family:"Schibsted Fallback";src:local("Helvetica Neue"),local("Helvetica"),local("Arial");size-adjust:97%;ascent-override:92%;descent-override:24%}

:root{
  --papier:#FAFAF8; --papier-2:#F1F1EC; --tinte:#141414; --tinte-2:#3C3C38;
  --grau:#6B6B66; --raster:#DEDEDA;--raster-fein:rgba(222,222,218,.55); --zinnober:#E8380D; --zinnober-text:#C22C08; --papier-auf-tinte:#F4F4EF; --grau-auf-tinte:#A3A39D;
  --sans:"Schibsted Grotesk","Schibsted Fallback","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --rand:clamp(20px,5vw,96px);
  --rinne:clamp(16px,2.2vw,32px);
  --mass:64ch;
  --dauer:.4s; --kurve:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:clamp(17px,.5vw + 15px,18px);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.14em}
p a,li a,dd a{background:linear-gradient(var(--zinnober),var(--zinnober)) no-repeat 0 100%/0 1px;text-decoration:underline;text-decoration-color:var(--raster);transition:background-size .25s var(--kurve),text-decoration-color .25s}
p a:hover,li a:hover,dd a:hover{background-size:100% 1px;text-decoration-color:transparent}
::selection{background:var(--zinnober);color:var(--papier)}
:focus-visible{outline:3px solid var(--zinnober);outline-offset:3px;border-radius:1px}
strong,b{font-weight:600}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.klein{font-size:15px;line-height:1.55;color:var(--grau)}
.label{font:400 12.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grau);margin-bottom:8px}
.dunkel .label{color:var(--grau-auf-tinte)}
.skip{position:absolute;left:var(--rand);top:-100px;background:var(--tinte);color:var(--papier);padding:12px 16px;z-index:100;text-decoration:none}
.skip:focus{top:12px}
.rand{padding-left:var(--rand);padding-right:var(--rand)}
.visuell-versteckt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typografie ---------- */
.h1,h1,.h2,h2,.h3,h3,.display{overflow-wrap:anywhere}
.h1,h1{font-size:clamp(36px,4.6vw,64px);line-height:1;letter-spacing:-.015em;font-weight:700;text-wrap:balance;max-width:20ch}
.display{font-size:clamp(44px,7.4vw,104px);line-height:.96;letter-spacing:-.02em;font-weight:700;max-width:12ch;text-wrap:balance}
.h2,h2{font-size:clamp(28px,3.2vw,44px);line-height:1.08;letter-spacing:-.01em;font-weight:600;text-wrap:balance;max-width:24ch}
.h3,h3{font-size:clamp(20px,1.6vw,24px);line-height:1.25;font-weight:600;text-wrap:balance}
.lead{font-size:clamp(19px,1.4vw,22px);line-height:1.5;max-width:var(--mass);color:var(--tinte-2)}
.dunkel .lead{color:var(--grau-auf-tinte)}
.text>p,.text>ul,.text>ol,.text>table,.text>blockquote{max-width:var(--mass);margin-bottom:1.1em}
.text>h2{margin:2.2em 0 .7em}
.text>h3{margin:1.8em 0 .5em}
.text>h2:first-child,.text>h3:first-child{margin-top:0}
.text>p:last-child{margin-bottom:0}
.text ul:not([class]){list-style:none}
.text ul:not([class]) li{padding-left:22px;position:relative;margin-bottom:.4em}
.text ul:not([class]) li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--tinte)}
.text ol{padding-left:1.4em}
.text ol li{margin-bottom:.4em}
.liste{list-style:none}
.liste li{padding:7px 0 7px 22px;position:relative;border-bottom:1px solid var(--raster);font-size:16px;line-height:1.5}
.liste li:last-child{border-bottom:0}
.liste li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:8px;background:var(--tinte)}
.liste--nein li::before{background:none;border:1px solid var(--grau);top:.9em}
.liste--nein li{color:var(--tinte-2)}
.liste--quadrat li::before{background:var(--zinnober)}
blockquote{border-left:3px solid var(--zinnober);padding:4px 0 4px 20px;color:var(--tinte-2);font-size:1.05em}
hr{border:0;border-top:1px solid var(--tinte);margin:48px 0}
.kasten{background:var(--papier-2);padding:24px 28px;border-left:3px solid var(--zinnober);max-width:var(--mass)}
.kasten p:last-child{margin-bottom:0}
.hinweis{font-size:15px;color:var(--grau);max-width:var(--mass)}
/* Abstand zwischen einer Liste und dem Hinweis darunter. Ohne das klebt der Hinweis an der
   letzten Zeile und liest sich als weiterer Listenpunkt — am Beratungsabschnitt der Preisseite
   aufgefallen (18.09.2026). Eng gefasst auf die Kombination; gemessen wirkt sie an genau einer
   Stelle im ganzen Bau, also verschiebt sie nichts Bestehendes. */
.liste+.hinweis,.wartung-liste+.hinweis{margin-top:20px}

/* ---------- Knöpfe und Links ---------- */
.knopf{display:inline-flex;align-items:center;gap:10px;background:var(--tinte);color:var(--papier);text-decoration:none;padding:15px 24px;font-size:16px;font-weight:600;line-height:1.2;border:1px solid var(--tinte);min-height:48px;transition:background .15s,color .15s,border-color .15s;cursor:pointer;font-family:inherit}
.knopf:hover{background:var(--zinnober-text);border-color:var(--zinnober-text);color:#fff}
.knopf--rahmen{background:transparent;color:var(--tinte)}
.knopf--rahmen:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.knopf--hell,.dunkel .knopf--hell{background:var(--papier);color:var(--tinte);border-color:var(--papier)}
.knopf--hell:hover,.dunkel .knopf--hell:hover{background:var(--zinnober);border-color:var(--zinnober);color:#141414}
.knopf::after{content:"→";font-family:var(--mono);font-weight:400;transition:transform .2s var(--kurve)}
.knopf:hover::after{transform:translateX(3px)}
.knopf--ohne::after{content:none}
.link-pfeil{font-weight:600;text-decoration:none;border-bottom:1px solid var(--tinte);padding-bottom:2px}
.link-pfeil::after{content:" →";font-family:var(--mono);font-weight:400}
.link-pfeil:hover{color:var(--zinnober);border-color:var(--zinnober)}
.link-mono{font-family:var(--mono);font-size:15px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;word-break:break-all}
.link-mono:hover{color:var(--zinnober)}
.cta-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:32px}

/* ---------- Kopf ---------- */
.kopf{border-bottom:1px solid var(--tinte);background:var(--papier);position:relative;z-index:20}
.kopf__zeile{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.marke{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinte)}
.marke__zeichen{width:22px;height:auto;color:var(--tinte)}
.marke__rot{fill:var(--zinnober)}
.marke__wort{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:16px}
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.nav__liste{display:flex;gap:clamp(14px,1.8vw,28px);list-style:none}
.nav__liste--neben{display:none}
.nav__liste--sprachen{gap:10px;font-family:var(--mono)}
.nav__liste--sprachen a{font-size:12.5px;letter-spacing:.08em;color:var(--grau);padding:6px 2px}
.nav__liste--sprachen a[aria-current]{color:var(--tinte);border-bottom-color:var(--tinte)}
.nav__liste a{text-decoration:none;font-size:15px;font-weight:500;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.nav__liste a:hover{border-bottom-color:var(--tinte)}
.nav__liste a[aria-current="page"]{border-bottom-color:var(--zinnober)}
.nav__cta{padding:10px 16px;min-height:40px;font-size:14px}
/* Sieben Menüpunkte (seit 05.10.2026 mit «Partner werden», nur .de) passen erst ab 1100 px auf eine Zeile; darunter brach der
   letzte Punkt in zwei Zeilen und der Knopf daneben ebenso (gemessen bei 900–1024 px). Deshalb Menü als Knopf bis 1099 px, und
   kein Umbruch innerhalb eines Punkts. */
.nav__liste a,.nav__cta{white-space:nowrap}
.menue-knopf{display:none;background:none;border:1px solid var(--tinte);padding:10px 14px;font:600 14px/1 var(--sans);color:var(--tinte);align-items:center;gap:10px;min-height:44px;cursor:pointer}
.menue-knopf__balken{width:18px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
@media (max-width:1099px){
  .menue-knopf{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--papier);border-bottom:1px solid var(--tinte);padding:24px var(--rand) 32px;flex-direction:column;align-items:flex-start;gap:24px}
  .kopf[data-offen] .nav{display:flex}
  .nav__liste{flex-direction:column;gap:6px;width:100%}
  .nav__liste a{font-size:clamp(28px,7vw,36px);font-weight:600;letter-spacing:-.01em;display:block;padding:8px 0;border-bottom:0}
  .nav__liste--neben{display:flex;border-top:1px solid var(--raster);padding-top:16px}
  .nav__liste--sprachen{flex-direction:row;gap:20px;width:auto}
  .nav__liste--sprachen a{font-size:15px;padding:8px 0}
  .nav__liste--neben a{font-size:18px;font-weight:500}
  .nav__cta{padding:15px 24px;min-height:48px;font-size:16px;align-self:stretch;justify-content:center}
  .kopf[data-offen] .menue-knopf__balken{border-top-color:transparent;height:2px;background:currentColor;border-bottom:0}
}
@media (max-width:1099px){ .kein-js .nav{display:flex;position:static;border:0;padding:0 0 16px} }

/* ---------- Satzspiegel ---------- */
.satz{display:grid;grid-template-columns:minmax(120px,2fr) minmax(0,9fr) minmax(0,1fr);column-gap:var(--rinne)}
.satz>.inhalt{grid-column:2}
.satz--breit>.inhalt{grid-column:2 / -1}
.randspalte{display:flex;flex-direction:column;gap:4px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);padding-top:.5em}
.randspalte .mono{color:var(--zinnober-text);font-size:13px}
.dunkel .randspalte{color:var(--grau-auf-tinte)}
.dunkel .randspalte .mono{color:var(--zinnober)}
@media (max-width:820px){
  .satz{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .satz>.inhalt,.satz--breit>.inhalt{grid-column:1}
  .randspalte{flex-direction:row;gap:12px;padding-top:0}
}
.abschnitt{padding-top:clamp(56px,8vh,112px);padding-bottom:clamp(56px,8vh,112px);border-top:1px solid var(--tinte)}
.abschnitt--ohne-linie{border-top:0}
.abschnitt--eng{padding-top:clamp(40px,5vh,64px);padding-bottom:clamp(40px,5vh,64px)}
.abschnitt .h2{margin-bottom:24px}
.abschnitt .lead{margin-bottom:32px}
.dunkel{background:var(--tinte);color:var(--papier-auf-tinte)}
.dunkel .h2,.dunkel h2{color:var(--papier)}
.dunkel a{color:inherit}
.dunkel p a{text-decoration-color:var(--grau-auf-tinte)}
.dunkel .liste li{border-color:#333}
.dunkel .liste li::before{background:var(--papier-auf-tinte)}
.papier-2{background:var(--papier-2)}
.seitenkopf{padding-top:clamp(48px,7vh,96px);padding-bottom:clamp(40px,6vh,72px)}
.seitenkopf .h1{margin-bottom:24px}
.seitenkopf .lead{max-width:56ch}
.seitenkopf .label{margin-bottom:20px}
.seitenkopf--raster{position:relative;overflow:hidden}
/* Millimeterpapier im Seitenkopf — dasselbe Muster wie auf der Startseite, nur im Kopf und schwächer.
   Bis zum 17.09.2026 standen hier nur senkrechte Spaltenlinien: ein Satzspiegel, während die Startseite ein
   kariertes Blatt zeigt. Zwei Motive für dieselbe Idee. Jetzt ein Motiv in zwei Dosierungen — volle Fläche,
   wo gezeichnet wird (Startseite), Kopfbereich, wo gelesen wird. Feines Netz 16 px, grobes 128 px, wie in
   `css/start.css`; die groben Linien sitzen einen Punkt versetzt, damit sie die feinen decken. */
.seitenkopf--raster::before{content:"";position:absolute;inset:0 var(--rand);pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,var(--raster-fein) 1px,transparent 1px),
    linear-gradient(to bottom,var(--raster-fein) 1px,transparent 1px),
    linear-gradient(to right,var(--raster) 1px,transparent 1px),
    linear-gradient(to bottom,var(--raster) 1px,transparent 1px);
  background-size:16px 16px,16px 16px,128px 128px,128px 128px;
  background-position:0 0,0 0,-1px -1px,-1px -1px;
  /* nach unten ausblenden: das Papier endet nicht mit einer Kante, sondern läuft aus */
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);
  mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.seitenkopf--raster>*{position:relative}
.brotkrumen{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grau);margin-bottom:24px}
.brotkrumen a{text-decoration:none}
.brotkrumen a:hover{color:var(--zinnober)}
.satz>*{min-width:0}
.zwei-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3vw,48px)}
.drei-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,48px)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--tinte);padding-top:clamp(56px,10vh,140px);padding-bottom:clamp(56px,9vh,120px)}
.hero__raster{position:absolute;inset:0 var(--rand);pointer-events:none;opacity:.55;background:
  repeating-linear-gradient(90deg,var(--raster) 0 1px,transparent 1px calc((100% + var(--rinne)) / 12)),
  repeating-linear-gradient(0deg,var(--raster) 0 1px,transparent 1px 64px);
  transform-origin:top;animation:linien .7s var(--kurve) both}
@keyframes linien{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:.55}}
.hero__inhalt{position:relative;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--rinne);align-items:end}
.hero .label{color:var(--grau);margin-bottom:28px}
.hero .label b{color:var(--zinnober-text);font-weight:400}
.hero .display{margin-bottom:32px}
.hero .display .rot{color:var(--zinnober)}
.hero .lead{max-width:54ch;margin-bottom:8px}
.hero .cta-reihe{margin-top:36px}
.hero__r{justify-self:end;width:clamp(96px,11vw,160px);color:var(--tinte);transform:translateY(-128px)} /* zwei Rasterfelder (2×64px) höher als die Grundlinie des Textes – Betreiber 15.09.2026 */
.hero__r rect{opacity:0;animation:setzen .5s var(--kurve) forwards}
.hero__r rect:nth-child(1){animation-delay:.05s}.hero__r rect:nth-child(2){animation-delay:.1s}.hero__r rect:nth-child(3){animation-delay:.15s}.hero__r rect:nth-child(4){animation-delay:.2s}
.hero__r rect:nth-child(5){animation-delay:.25s}.hero__r rect:nth-child(6){animation-delay:.3s}.hero__r rect:nth-child(7){animation-delay:.35s}.hero__r rect:nth-child(8){animation-delay:.4s}
.hero__r rect:nth-child(9){animation-delay:.45s}.hero__r rect:nth-child(10){animation-delay:.5s}.hero__r rect:nth-child(11){animation-delay:.55s}.hero__r rect:nth-child(12){animation-delay:.6s}
.hero__r rect:nth-child(13){animation-delay:.65s}.hero__r rect:nth-child(14){animation-delay:.7s}.hero__r rect:nth-child(15){animation-delay:.75s}.hero__r rect:nth-child(16){animation-delay:.8s}
.hero__r rect:nth-child(17){animation-delay:.85s}.hero__r rect:nth-child(18){animation-delay:1.05s}
@keyframes setzen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero__fakten{position:relative;display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:clamp(40px,6vh,72px);padding-top:20px;border-top:1px solid var(--tinte);font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--tinte-2)}
.hero__fakten span b{font-weight:400;color:var(--tinte)}
@media (max-width:820px){.hero__inhalt{grid-template-columns:1fr}.hero__r{display:none}}

/* ---------- Grundsätze ---------- */
.grundsaetze{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--tinte);border:1px solid var(--tinte)}
@media (max-width:1100px){.grundsaetze{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grundsaetze{grid-template-columns:1fr}}
.grundsatz{background:var(--papier);padding:28px 24px 32px;display:flex;flex-direction:column;gap:10px}
.grundsatz__modul{width:14px;height:14px;background:var(--tinte);margin-bottom:14px}
.grundsatz:last-child .grundsatz__modul{background:var(--zinnober)}
.grundsatz__nicht{font:400 12.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.grundsatz h3{font-size:22px;letter-spacing:-.01em}
.grundsatz p{font-size:15.5px;color:var(--tinte-2);line-height:1.55}
.grundsatz a{font-size:15px}

/* ---------- Beweis ---------- */
.beweis{background:var(--papier-2);border:1px solid var(--tinte);padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:clamp(24px,3vw,48px);max-width:960px}
.beweis__text p{font-size:16px;color:var(--tinte-2);max-width:40ch}
.beweis__text p:first-of-type{color:var(--tinte);font-size:18px;font-weight:600;margin-bottom:12px}
.beweis__werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px 24px;list-style:none}
.beweis__werte li{border-top:1px solid var(--tinte);padding-top:10px}
.beweis__werte b{display:block;font:400 clamp(28px,3vw,40px)/1 var(--mono);letter-spacing:-.02em;margin-bottom:6px}
.beweis__werte span{font-size:13.5px;color:var(--grau);line-height:1.4;display:block}
@media (max-width:700px){.beweis{grid-template-columns:1fr}}
.beweis-liste{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;list-style:none;font-size:13px;margin-bottom:14px}

/* ---------- Zielgruppen ---------- */
.fuerwen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--rinne)}
.fuerwen article{border-top:3px solid var(--tinte);padding-top:20px}
.fuerwen h3{margin-bottom:10px}
.fuerwen p{font-size:16px;color:var(--tinte-2)}
.fuerwen .label{margin-bottom:14px}

/* ---------- Cases ---------- */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,4vw,56px) var(--rinne)}
.case-karte__link{display:block;position:relative;text-decoration:none;padding-bottom:40px;padding-right:12%}
.geraet{border:1px solid var(--tinte);background:#fff;overflow:hidden;border-radius:4px}
.geraet img{width:100%}
.geraet--desktop{aspect-ratio:1440/900}
.geraet--mobil{aspect-ratio:390/664;border-radius:14px;box-shadow:0 0 0 1px var(--papier)}
.case-karte .geraet--mobil{position:absolute;right:0;bottom:0;width:26%;max-width:150px;background:var(--papier)}
.case-karte__link .geraet{transition:transform .3s var(--kurve),border-color .3s}
.case-karte__link:hover .geraet--desktop{transform:translateY(-4px)}
.case-karte__link:hover .geraet--mobil{transform:translateY(-6px)}
.case-karte__link:hover .geraet{border-color:var(--zinnober)}
.case-karte__text{margin-top:20px;max-width:46ch}
.case-karte__titel{margin-bottom:8px}
.case-karte__titel a{text-decoration:none;background:none}
.case-karte__titel a:hover{color:var(--zinnober)}
.case-karte__text>p{font-size:16px;color:var(--tinte-2)}
.case-karte__meta{font-size:12.5px;color:var(--grau);margin-top:10px;letter-spacing:.02em}
/* Ergebnis je Arbeit (19.09.2026): die Zahl des Betriebs, markiert wie ein Befund – Zinnober-Kante links,
   Quelle klein darunter. Auf der Karte und auf der Detailseite dieselbe Form. */
.case-karte__ergebnis,.ergebnis-zahl{margin-top:14px;padding:10px 14px;border-left:3px solid var(--zinnober);background:var(--papier-2);display:flex;flex-direction:column;gap:4px}
.case-karte__ergebnis strong,.ergebnis-zahl strong{font-size:17px;line-height:1.3;color:var(--tinte)}
.case-karte__ergebnis .mono,.ergebnis-zahl .mono{font-size:12px;color:var(--grau);letter-spacing:.03em}
.ergebnis-zahl{margin-bottom:18px}.ergebnis-zahl strong{font-size:20px}
.case__bild{position:relative;padding-bottom:clamp(40px,6vh,80px);padding-right:calc(var(--rand) + 6%)}
.case__bild .geraet--desktop{max-width:1000px}
.case__bild .geraet--mobil{position:absolute;right:var(--rand);bottom:0;width:18%;max-width:180px;min-width:110px;background:var(--papier)}
.meta-leiste{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px 24px;margin-top:32px;padding-top:20px;border-top:1px solid var(--tinte);font-size:13.5px}
.meta-leiste dt{color:var(--grau);letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;margin-bottom:4px}
.meta-leiste dd a{text-decoration:none;border-bottom:1px solid var(--raster);background:none}
.meta-leiste dd a:hover{border-color:var(--zinnober);color:var(--zinnober)}

/* ---------- Leistungen / Linien ---------- */
.linien{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,4vw,64px)}
.linie{border-top:4px solid var(--tinte);padding-top:24px}
.linie--shop{border-top-color:var(--grau)}
.linie h3{font-size:clamp(22px,2vw,28px);margin-bottom:12px;letter-spacing:-.01em}
.linie>p{font-size:16.5px;color:var(--tinte-2);margin-bottom:16px;max-width:48ch}
.leistungen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--raster);border:1px solid var(--raster)}
.leistungen li{background:var(--papier);padding:20px 22px}
.leistungen h3{font-size:17px;margin-bottom:6px}
.leistungen p{font-size:15px;color:var(--tinte-2);line-height:1.5}
.leistungen .mono{font-size:12.5px;color:var(--grau);display:block;margin-bottom:8px;letter-spacing:.06em}

@media (max-width:900px){.leistungen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.leistungen{grid-template-columns:1fr}}

/* ---------- Vergleich ---------- */
.vergleich{width:100%;border-collapse:collapse;font-size:15.5px}
.vergleich th,.vergleich td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--raster)}
.vergleich thead th{font:400 12.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grau);border-bottom:1px solid var(--tinte);padding-bottom:10px}
.vergleich tbody th{font-weight:600;width:20%}
.vergleich td:last-child{font-weight:600}
.vergleich .ja::before{content:"■ ";color:var(--zinnober);font-size:11px;vertical-align:2px}
@media (max-width:700px){
  .vergleich thead{display:none}
  .vergleich tr{display:block;border-bottom:1px solid var(--tinte);padding:14px 0}
  .vergleich th,.vergleich td{display:block;border:0;padding:4px 0;width:auto}
  .vergleich tbody th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono);font-weight:400;color:var(--grau);margin-bottom:6px}
  .vergleich td::before{content:attr(data-spalte) " · ";font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--grau);text-transform:uppercase}
}

/* ---------- Preise ---------- */
.preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--rinne)}
.preis-karte{border:1px solid var(--tinte);padding:28px 26px 30px;display:flex;flex-direction:column;gap:18px;background:var(--papier)}
.preis-karte__name{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.015em;margin-bottom:6px}
.preis-karte__nutzen{color:var(--tinte-2);font-size:16px}
.preis-karte__preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;border-top:1px solid var(--tinte);border-bottom:1px solid var(--tinte);padding:16px 0}
.preis-karte__preis .mono{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;white-space:nowrap}
.preis-karte__einheit{font-size:13px;color:var(--grau)}
.preis-karte__fuer{font-size:15.5px;color:var(--tinte-2)}
.preis-karte__listen{display:grid;gap:18px}
.preis-karte__listen .label{margin-bottom:4px}
.preis-karte__dauer{font-size:15px;display:flex;gap:12px;align-items:baseline}
.preis-karte__dauer .label{margin:0}
.preis-karte .knopf{margin-top:auto;justify-content:center}
.preise--kompakt .preis-karte{gap:14px}
.tabelle{width:100%;border-collapse:collapse;font-size:15.5px;max-width:900px}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--raster)}
.tabelle thead th{font:400 12.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grau);border-bottom:1px solid var(--tinte)}
.tabelle tbody th{font-weight:600;width:32%}
.tabelle td.mono{white-space:nowrap;font-size:15px}
@media (max-width:640px){
  .tabelle thead{display:none}
  .tabelle tr{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--raster)}
  .tabelle th,.tabelle td{display:block;border:0;padding:0;width:auto}
  .tabelle tbody th{grid-column:1}
  .tabelle td.mono{grid-column:2;grid-row:1;text-align:right}
  .tabelle td:last-child{grid-column:1 / -1;font-size:14px;color:var(--tinte-2)}
}
.tabelle-scroll{overflow-x:auto}

/* ---------- Ablauf ---------- */
/* Der Weg – fünf Stationen als Band vor der Schrittliste (Betreiber 15.09.2026: «mehr bildlich … nur moderner»).
   Bildsprache der Marke: Quadrate, Linien, Mono-Ziffern, Zinnober als einziger Akzent – keine Verläufe, keine Icon-Bibliothek. */
@media (max-width:900px){
}
.weg-details{max-width:820px}
.weg-details summary{cursor:pointer;font:400 13px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grau);padding:10px 0;border-top:1px solid var(--tinte);border-bottom:1px solid var(--raster);list-style:none}
.weg-details summary::-webkit-details-marker{display:none}
.weg-details summary::before{content:"+";display:inline-block;width:18px;color:var(--zinnober-text)}
.weg-details[open] summary::before{content:"–"}
/* Vorher / Nachher – schematisch, in der Bildsprache der Marke; kein Kundenmaterial */
.vorher-nachher{display:block;width:100%;max-width:960px;height:auto;margin:8px 0 12px}
.vorher-nachher text{font:12px var(--mono);letter-spacing:.1em}
.ablauf{list-style:none;counter-reset:schritt;max-width:820px}
.schritt{display:grid;grid-template-columns:64px 1fr auto;gap:12px 20px;padding:24px 0;border-top:1px solid var(--raster);counter-increment:schritt}
.schritt:first-child{border-top:1px solid var(--tinte)}
.schritt::before{content:counter(schritt,decimal-leading-zero);font:400 clamp(22px,2vw,28px)/1.1 var(--mono);color:var(--zinnober-text)}
.schritt h3{margin-bottom:6px}
.schritt p{font-size:16px;color:var(--tinte-2);max-width:52ch}
.schritt__dauer{font:400 12.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--grau);text-transform:uppercase;white-space:nowrap;padding-top:6px}
@media (max-width:600px){.schritt{grid-template-columns:48px 1fr}.schritt__dauer{grid-column:2}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;border-top:1px solid var(--tinte)}
.faq__item{border-bottom:1px solid var(--raster)}
.faq__item summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:20px 0;cursor:pointer}
.faq__item summary::-webkit-details-marker{display:none}
.faq__frage{font-size:clamp(18px,1.5vw,21px);font-weight:600}
.faq__zeichen{flex:0 0 auto;width:14px;height:14px;position:relative;margin-top:6px}
.faq__zeichen::before,.faq__zeichen::after{content:"";position:absolute;background:var(--tinte);left:0;top:6px;width:14px;height:2px}
.faq__zeichen::after{transform:rotate(90deg);transition:transform .2s}
.faq__item[open] .faq__zeichen::after{transform:rotate(0)}
.faq__item summary:hover .faq__frage{color:var(--zinnober)}
.faq__antwort{padding:0 40px 24px 0;max-width:62ch;color:var(--tinte-2)}
.faq__antwort p{margin-bottom:.9em}
.faq__antwort p:last-child{margin-bottom:0}

/* ---------- Formular ---------- */
.formular{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));min-width:0;gap:20px 24px;max-width:760px}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld--breit{grid-column:1 / -1}
.feld label,.feld legend{font-weight:600;font-size:15.5px}
.feld label .opt,.feld legend .opt{font-weight:400;color:var(--grau);font-size:14px}
.feld input,.feld textarea,.feld select{font:inherit;font-size:17px;padding:13px 14px;border:1px solid var(--tinte);background:#fff;color:var(--tinte);border-radius:0;width:100%;min-height:48px}
.feld textarea{min-height:160px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:3px solid var(--zinnober);outline-offset:1px;border-color:var(--tinte)}
.feld [aria-invalid="true"]{border-color:var(--zinnober);border-width:2px}
.feld__fehler{font-size:14px;color:var(--zinnober-text);display:none}
.feld [aria-invalid="true"]~.feld__fehler,.feld--fehler .feld__fehler{display:block}
.feld__hilfe{font-size:14px;color:var(--grau)}
.auswahl{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0}
.auswahl label{border:1px solid var(--tinte);padding:10px 14px;font-size:15px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.auswahl input{position:absolute;opacity:0;width:1px;height:1px}
.auswahl input:checked+span{color:var(--papier)}
.auswahl label:has(input:checked){background:var(--tinte);color:var(--papier)}
.auswahl label:has(input:focus-visible){outline:3px solid var(--zinnober);outline-offset:3px}
.honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formular__fuss{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.formular__status{grid-column:1 / -1;padding:20px 24px;border-left:3px solid var(--tinte);background:var(--papier-2);display:none}
.formular__status[data-art="fehler"]{border-color:var(--zinnober)}
.formular__status[data-art]{display:block}
.formular__status p{margin-bottom:.5em}
.formular__status p:last-child{margin-bottom:0}
.kontakt-raster>*{min-width:0}
.kontakt-raster{display:grid;grid-template-columns:minmax(0,3fr) minmax(240px,1.4fr);gap:clamp(32px,5vw,80px)}
@media (max-width:900px){.kontakt-raster{grid-template-columns:1fr}}
.kontakt-neben>div{border-top:1px solid var(--tinte);padding:20px 0 28px}
.kontakt-neben p{font-size:16px;color:var(--tinte-2)}
.kontakt-neben .link-mono{display:inline-block;margin-top:6px;font-size:17px;color:var(--tinte)}

/* ---------- Kontakt-CTA und Fuss ---------- */
.kontakt-cta{padding-top:clamp(64px,10vh,128px);padding-bottom:clamp(64px,10vh,128px)}
.kontakt-cta .h2{margin-bottom:20px;max-width:18ch}
.kontakt-cta .cta-reihe{margin-top:36px}
.kontakt-cta .link-mono{color:var(--papier-auf-tinte);border-color:var(--grau-auf-tinte)}
.kontakt-cta .link-mono:hover{color:var(--zinnober);border-color:var(--zinnober)}
.fuss{border-top:1px solid #333;font-size:15px}
.fuss__raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.4fr);gap:40px var(--rinne);padding-top:56px;padding-bottom:48px}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--zinnober)}
.fuss__marke svg{margin-bottom:16px;color:var(--papier-auf-tinte)}
.fuss__marke p{margin-bottom:14px;color:var(--grau-auf-tinte)}
.fuss__marke strong{color:var(--papier)}
.fuss__nav ul{list-style:none;columns:2;column-gap:24px}
.fuss__nav li{margin-bottom:8px;break-inside:avoid}
.fuss__beweis .klein{color:var(--grau-auf-tinte)}
.fuss__beweis .klein a{border-bottom:1px solid var(--grau-auf-tinte)}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:20px;padding-bottom:28px;border-top:1px solid #333;font-size:13.5px;color:var(--grau-auf-tinte)}
.fuss__unten .mono{font-size:12px}
@media (max-width:820px){.fuss__raster{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
.vierhundertvier{padding-top:clamp(64px,12vh,160px);padding-bottom:clamp(64px,12vh,160px)}
.vierhundertvier .display{margin-bottom:24px}

/* ---------- Reveal ---------- */
.js [data-reveal]{transform:translateY(14px);transition:transform .5s var(--kurve)}
.js [data-reveal].sichtbar{transform:none}
/* Bewusst ohne Deckungs-Animation: Zwischenzustände mit Teil-Deckung verfaelschen Kontrastmessungen (axe/Lighthouse) und lassen Leser vor leeren Flaechen sitzen. */

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .hero__r rect{opacity:1}
  .js [data-reveal]{transform:none}
}
@media print{.kopf,.fuss,.kontakt-cta,.menue-knopf{display:none}body{font-size:12pt}a{text-decoration:none}}

/* Abstände (statt Inline-Styles, wegen strenger CSP) */
.abstand-oben-20{margin-top:20px}.abstand-oben-24{margin-top:24px}.abstand-oben-28{margin-top:28px}.abstand-oben-32{margin-top:32px}
.abstand-oben-48{margin-top:48px}.abstand-unten-24{margin-bottom:24px}
address.kasten{font-style:normal}
.formular__felder{display:contents}
.formular__hinweis{margin:0;max-width:40ch}

/* ---------- Personen (Studio) ---------- */
.personen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,3vw,48px);margin:32px 0 36px;max-width:820px}
.personen--eine{max-width:440px}
.person{border-top:1px solid var(--tinte);padding-top:20px}
.person__bild{aspect-ratio:4/5;background:var(--papier-2);border:1px solid var(--raster);margin-bottom:18px;max-width:280px;overflow:hidden}
.person__bild:empty{background:repeating-linear-gradient(90deg,var(--raster) 0 1px,transparent 1px 24px),repeating-linear-gradient(0deg,var(--raster) 0 1px,transparent 1px 24px),var(--papier-2)}
.person__bild img{width:100%;height:100%;object-fit:cover;display:block}
.person h3{margin-bottom:4px}
.person .label{margin-bottom:12px}
.person p:last-child{font-size:16px;color:var(--tinte-2);margin:0;max-width:40ch}

/* ---- Gespräch buchen (/termin/) ---- */
.terminplan{max-width:980px}
.terminplan [hidden]{display:none!important}
.termin-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}
.termin-kopf b{font-size:17px;font-weight:600;text-align:center}
.termin-kopf .knopf{padding:10px 14px;min-height:40px;font-size:14.5px}
.termin-kopf .knopf:disabled{opacity:.35;cursor:default;background:transparent;color:var(--tinte)}
.termin-raster{display:grid;grid-template-columns:58px repeat(5,minmax(0,1fr));gap:6px}
.termin-raster .raster-kopf{text-align:center;font-weight:600;font-size:15px;padding:6px 0 4px}
.termin-raster .raster-kopf small{display:block;font-weight:400;color:var(--grau);font-family:var(--mono);font-size:12.5px}
.termin-raster .raster-uhr{font-size:13.5px;color:var(--grau);display:flex;align-items:center;justify-content:flex-end;padding-right:8px}
.termin-raster .slot{display:block;width:100%;border:1px solid var(--tinte);background:#fff;color:var(--tinte);padding:10px 4px;font:inherit;font-size:14px;line-height:1.2;cursor:pointer;min-height:42px;transition:background .12s,color .12s}
.termin-raster .slot:hover{background:var(--tinte);color:var(--papier)}
.termin-raster .slot.gewaehlt{background:var(--zinnober);border-color:var(--zinnober);color:#141414;font-weight:600}
.termin-raster .slot.belegt,.termin-raster .slot.vorbei,.termin-raster .slot.gesperrt{background:var(--papier-2);border-color:var(--raster);color:var(--grau);cursor:not-allowed}
.termin-raster .slot.belegt{font-size:12.5px}
.termin-legende{margin-top:14px;max-width:none}
.termin-form{margin-top:32px}
.gewaehlt-zeile{border-left:3px solid var(--zinnober);background:var(--papier-2);padding:12px 16px;font-size:17px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.gewaehlt-zeile .leise{background:none;border:0;padding:0;font:inherit;font-size:14.5px;color:var(--grau);text-decoration:underline;cursor:pointer}
.gewaehlt-zeile .leise:hover{color:var(--zinnober-text)}
.haekchen{display:flex;gap:10px;align-items:flex-start;font-weight:400!important;font-size:15.5px;line-height:1.5}
.haekchen input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--zinnober)}
.termin-fehler{color:var(--zinnober-text);font-weight:600;margin:6px 0;grid-column:1 / -1}
.termin-ok{border-left:3px solid var(--tinte);background:var(--papier-2);padding:22px 26px;margin-top:24px;max-width:640px}
.termin-ok b{display:block;font-size:22px;margin-bottom:10px}
.termin-ok p{margin:0}
.termin-ok .label{margin-bottom:6px}
@media (max-width:640px){.termin-raster{grid-template-columns:44px repeat(5,minmax(0,1fr));gap:4px}.termin-raster .slot{padding:9px 2px;font-size:12.5px;min-height:38px}.termin-raster .slot.belegt{font-size:10.5px}.termin-raster .raster-kopf{font-size:13px}.termin-raster .raster-kopf small{font-size:11px}.termin-raster .raster-uhr{font-size:12px;padding-right:5px}.termin-kopf b{font-size:14.5px}.termin-kopf .knopf{padding:8px 10px;font-size:13px}}
@media (max-width:420px){.termin-kopf{flex-wrap:wrap;justify-content:center}.termin-kopf b{order:-1;flex:1 0 100%;margin-bottom:6px}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dunkel .link-pfeil{border-color:currentColor}

/* ---------- Wartungsstufen auf der Preisseite (12.09.2026, Anregung des Betreibers). Drei Karten als Leiter:
   der Preis gross und ruhig, darunter ein Satz, der sagt, wofür die Stufe da ist. Die «Alles aus …»-Zeile steht
   abgesetzt, damit die Steigerung auf einen Blick erkennbar ist, ohne sie in jeder Liste zu wiederholen.
   Häkchen statt Aufzählungspunkte – eine Wartungsliste ist eine Zusicherung, kein Inhaltsverzeichnis. */
.wartung-stufen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--rinne);margin-top:30px;align-items:stretch}
.wartung-stufe{
  position:relative;border:1px solid var(--tinte);
  padding:28px 26px 30px;background:var(--papier);
  display:flex;flex-direction:column;
}
.wartung-stufe--empfohlen{box-shadow:inset 0 0 0 1px var(--tinte)}
.wartung-stufe__marke{
  position:absolute;top:-11px;left:22px;margin:0;
  background:var(--tinte);color:var(--papier);
  font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:6px 10px;border-radius:3px;
}
.wartung-stufe__kopf{padding-bottom:16px;border-bottom:1px solid var(--linie);margin-bottom:16px}
.wartung-stufe__name{margin:0;font-size:15px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--grau)}
.wartung-stufe__preis{margin:6px 0 0;font-size:27px;line-height:1.1;color:var(--tinte)}
.wartung-stufe__satz{margin:10px 0 0;font-size:16px;font-style:italic;color:var(--tinte-2,var(--tinte))}
.wartung-stufe__davor{margin:0 0 12px;font-size:14px;color:var(--grau)}
.wartung-liste{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.wartung-liste li{position:relative;padding-left:24px;font-size:15px;line-height:1.5}
.wartung-liste li::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:9px;height:5px;border-left:2px solid var(--gut,#1F7A3A);border-bottom:2px solid var(--gut,#1F7A3A);
  transform:rotate(-45deg);
}
@media (max-width:700px){
  .wartung-stufe{padding:24px 20px 26px}
  .wartung-stufe__preis{font-size:24px}
}

/* ---------- Website-Check: zwei Spalten, Zeilen geteilt (Subgrid) ---------- */
/* Beschriftung, Feld und Hilfetext teilen sich je Reihe dieselben drei Zeilen.
   So stehen die Eingaben links und rechts auf einer Linie, auch wenn nur eine
   Seite einen Hilfetext hat oder eine Beschriftung umbricht. */
.check-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
.check-form .feld-reihe{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto auto;column-gap:24px}
.check-form .feld-reihe>.feld{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:6px;align-content:start}
.check-form .feld__hilfe{margin:0;align-self:start}
.check-form .feld--haken .haken{grid-row:2;display:flex;align-items:center;gap:12px;min-height:48px;font-weight:400;font-size:16px;line-height:1.45;cursor:pointer}
.check-form input[type="checkbox"]{width:24px;height:24px;min-height:0;padding:0;flex:0 0 auto;accent-color:var(--zinnober);cursor:pointer}
.check-form input[type="checkbox"]:focus-visible{outline:3px solid var(--zinnober);outline-offset:2px}
@media (max-width:640px){
  .check-form{grid-template-columns:1fr}
  .check-form .feld-reihe{grid-template-columns:1fr;grid-template-rows:none;row-gap:20px}
  .check-form .feld-reihe>.feld{display:flex;flex-direction:column;grid-row:auto}
  .check-form .feld--haken .haken{min-height:0}
}

/* ==========================================================================
   Die fünf Stationen · Werkbank
   Wortgleich aus der Variante v4 übernommen (Commit 883ac53), wo sie als
   «Blatt 4» stand, bis die Stationen am 17.09.2026 neben das Vorher-Nachher-Bild
   wanderten. Betreiber, 17.09.2026: «v4 hatte die 5 schritte schöner dargestellt
   … ein kasten mit animierten logos». Fünf Spalten, je eine Zeichnung, die bei
   Hover, Fokus oder Tipp getuscht wird; unter 760 px klappen sie auf.
   ========================================================================== */
/* ==========================================================================
   Die fünf Stationen · Werkbank (Ablauf-Seite)
   ========================================================================== */
.werkbank{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--tinte);border-bottom:0;background:var(--papier);align-items:stretch}
.station{position:relative;border-right:1px solid var(--tinte);display:flex;flex-direction:column;transition:background .3s,opacity .7s var(--kurve) var(--verzug),transform .7s var(--kurve) var(--verzug)}
/* Ab zwei Spalten teilen alle Stationen einer Reihe zwei Zeilenhöhen: Kopf und Rumpf. Damit liegt auch die
   Trennlinie unter dem Kopf auf einer Linie, obwohl «Umsetzung und Abnahme» zweizeilig ist und
   «Festpreis · 2 Arbeitstage» umbricht (Betreiber 16.09.2026: «die oberen Trennlinien auch in eine Linie»). */
@media (min-width:760px){
  .station{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  .station__detail{display:grid}
}
/* Der Strich über «Ergebnis» liegt bei allen fünf Stationen auf einer Linie: Die Karten sind gleich hoch
   (align-items:stretch), der Ergebnis-Block klebt unten (margin-top:auto) und ist überall einzeilig –
   deshalb beginnt er überall auf derselben Höhe, auch wenn Titel oder Beschreibung unterschiedlich lang sind.
   Betreiber 15.09.2026: «Die Abgrenzungsstriche bei 5 Stationen sollten auf eine Linie».
   ⚠ Hier stand in v4 eine überzählige schliessende Klammer ohne Regel davor — ein Rest, den Browser
   stillschweigend überlesen und der deshalb nie auffiel. Beim Übernehmen am 17.09.2026 entfernt. */
.station:last-child{border-right:0}
.station__kopf{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"nr titel" "nr dauer";column-gap:14px;row-gap:4px;align-items:start;text-align:left;
  width:100%;padding:22px 20px;background:none;border:0;border-bottom:1px solid var(--raster);color:var(--tinte);font-family:inherit;cursor:pointer;
}
.station__nr{grid-area:nr;font:14px/1 var(--mono);width:34px;height:34px;border:1px solid var(--tinte);display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.station__titel{grid-area:titel;font-size:clamp(18px,1.4vw,21px);font-weight:650;line-height:1.2;letter-spacing:-.01em}
.station__dauer{grid-area:dauer;font:12.5px/1.4 var(--mono);color:var(--grau);letter-spacing:.03em}
.station__detail{padding:20px 20px 24px;flex:1;display:flex;min-width:0}
/* Drei feste Zeilen: Skizze, Text (dehnt sich), Ergebnis. So beginnt der Ergebnis-Block in allen fünf Stationen auf derselben Höhe. */
.station__innen{display:grid;grid-template-rows:auto 1fr auto;gap:16px;width:100%;height:100%}
.station__bild{width:120px;height:90px;flex:none}
/* Die Tusche: --tusch verzögert je Station (nur dort gesetzt, wo ohne Hover beim Erscheinen getuscht wird), --pfad je Linie */
.station__strich path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--kurve) calc(var(--tusch,0ms) + var(--pfad,0ms))}
.station__strich path:nth-child(2){--pfad:.2s}
.station__strich path:nth-child(3){--pfad:.4s}
.station__strich path:nth-child(4){--pfad:.55s}
.station__strich path:nth-child(5){--pfad:.7s}
.station__rot{opacity:0;transition:opacity .3s calc(var(--tusch,0ms) + .9s)}
/* Der Satz steht in Ruhe lesbar da (Tinte-2); Hover, Fokus oder Tipp tuscht die Zeichnung und färbt auf Tinte */
.station__detail p{font-size:15px;line-height:1.5;color:var(--tinte-2);transition:color .35s}
/* Der Strich über «Ergebnis» liegt bei allen fünf Stationen auf einer Linie: Platz für zwei Zeilen, unten ausgerichtet (Betreiber 15.09.2026). */
.station__ergebnis{font:12px/1.42 var(--mono);letter-spacing:.02em;color:var(--tinte-2);border-top:1px solid var(--raster);padding-top:12px;margin-top:auto;height:5.3em;transition:color .35s,border-color .35s}
.station__ergebnis span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte);margin-bottom:2px}
.station:hover,.station:focus-within,.station[data-offen]{background:var(--papier-2)}
.station:hover .station__nr,.station:focus-within .station__nr,.station[data-offen] .station__nr{background:var(--zinnober-text);border-color:var(--zinnober-text);color:var(--papier)}
.station:hover .station__strich path,.station:focus-within .station__strich path,.station[data-offen] .station__strich path{stroke-dashoffset:0}
.station:hover .station__rot,.station:focus-within .station__rot,.station[data-offen] .station__rot{opacity:1}
.station:hover .station__detail p,.station:focus-within .station__detail p,.station[data-offen] .station__detail p{color:var(--tinte)}
.station:hover .station__ergebnis,.station:focus-within .station__ergebnis,.station[data-offen] .station__ergebnis{color:var(--tinte);border-color:var(--zinnober)}
.station:hover .station__ergebnis span,.station:focus-within .station__ergebnis span,.station[data-offen] .station__ergebnis span{color:var(--zinnober-text)}
/* Ohne Bewegung oder ohne JS: alles sichtbar */
html:not(.bewegt) .station__strich path{stroke-dashoffset:0;transition:none}
html:not(.bewegt) .station__rot{opacity:1;transition:none}
html:not(.bewegt) .station__detail p{color:var(--tinte-2)}
html:not(.js) .station__kopf{cursor:default}
@media (hover:none) and (min-width:760px){
  .station{--tusch:calc(var(--verzug) * 4)}
  .abschnitt.im-bild .station__strich path{stroke-dashoffset:0}
  .abschnitt.im-bild .station__rot{opacity:1}
}
/* Der Aufbau, den v4 zeigte: Nicht die Zeichnungen tuschen sich von selbst — die Kästen fahren beim
   Hereinscrollen nacheinander von unten ein (0,7 s, Verzug 0/90/180/270/360 ms je Station, siehe --verzug
   weiter unten). Getuscht wird erst beim Darüberfahren, Antippen oder mit der Tastatur. In v4 hing das an
   der Klasse «im-bild»; hier übernimmt das vorhandene «sichtbar», das der Reveal-Beobachter ohnehin setzt.
   Betreiber 17.09.2026: «schau dir nochmal die letzte, gängige v4 an. da war es 100% richtig». */
.bewegt [data-reveal]:not(.sichtbar) .station{opacity:0;transform:translateY(22px)}
.werkbank__platte{height:22px;border:1px solid var(--tinte);background:
  repeating-linear-gradient(to right,var(--tinte) 0 1px,transparent 1px 8px) 0 100%/100% 6px no-repeat,
  repeating-linear-gradient(to right,var(--tinte) 0 1px,transparent 1px 40px) 0 100%/100% 12px no-repeat,
  var(--papier-2)}
@media (max-width:1099px){
  .werkbank{grid-template-columns:repeat(3,minmax(0,1fr))}
  .station{border-bottom:1px solid var(--tinte)}
  .station:nth-child(3n){border-right:0}
  .station:nth-child(3){border-right:0}
  .station:nth-child(4),.station:nth-child(5){border-right:1px solid var(--tinte)}
  .station:nth-child(5){border-right:0}
  .station:nth-child(4){grid-column:1 / 3}
}
@media (max-width:759px){
  .werkbank{grid-template-columns:minmax(0,1fr)}
  .station{border-right:0;border-bottom:1px solid var(--tinte)}
  .station:nth-child(4){grid-column:auto}
  .station:nth-child(4),.station:nth-child(5){border-right:0}
  .station:last-child{border-bottom:0}
  .station__kopf{border-bottom:0;padding:18px var(--rand-innen,18px)}
  .station__kopf::after{content:"";grid-column:2;justify-self:start;width:10px;height:10px;border-right:1px solid var(--tinte);border-bottom:1px solid var(--tinte);transform:rotate(45deg);margin-top:4px;transition:transform .3s var(--kurve)}
  .station[data-offen] .station__kopf::after{transform:rotate(225deg)}
  .station__detail{display:grid;grid-template-rows:0fr;padding:0 18px;flex:none;transition:grid-template-rows .4s var(--kurve),padding .4s var(--kurve)}
  .station__innen{min-height:0;overflow:hidden;gap:14px}
  .station__ergebnis{margin-top:0}
  .station[data-offen] .station__detail{grid-template-rows:1fr;padding:0 18px 22px}
  .station:hover:not([data-offen]){background:var(--papier)}
  .station:hover:not([data-offen]) .station__nr{background:transparent;border-color:var(--tinte);color:var(--tinte)}
  .station:hover:not([data-offen]) .station__strich path{stroke-dashoffset:1}
  html:not(.js) .station__detail{grid-template-rows:1fr;padding:0 18px 22px}
  html:not(.js) .station__kopf::after{display:none}
}
.befund,.paket,.station,.stueck,.schriftfeld__zelle,.vergleich,.stueckliste-feld{--verzug:0ms}
.befund:nth-child(2),.paket:nth-child(2),.station:nth-child(2),.schriftfeld__zelle:nth-child(2){--verzug:90ms}
.befund:nth-child(3),.paket:nth-child(3),.station:nth-child(3),.schriftfeld__zelle:nth-child(3){--verzug:180ms}
.station:nth-child(4),.schriftfeld__zelle:nth-child(4){--verzug:270ms}
.station:nth-child(5),.schriftfeld__zelle:nth-child(5){--verzug:360ms}