/* ===========================================================================
   WERKSTATT — die Seite, auf der das Rad auseinanderfaehrt

   Sprache wie der Rest des Redesigns: kein Glas, keine gerundeten Kaesten,
   Beschriftungen als Haarlinien, Display-Typografie fuer die Auftritte,
   Auftakt und Abschluss als Baender auf #0d0f13.

   Der Aufbau unterscheidet sich in einem Punkt von /service: die Buehne
   steht fest und der Text laeuft daran vorbei. Deshalb zwei Spalten statt
   eines Flusses — und zwar als Raster, nicht als Overlay. Text, der quer
   ueber dem Rad liegt, war die Hauptbeschwerde am ersten Entwurf. Hier
   koennen sich Buehne und Text geometrisch nicht ueberlappen: sie liegen
   in getrennten Rasterspalten.

   Wird nach style.css, content-pages.css und VOR redesign.css geladen.
   Deshalb tragen die eigenen Regeln hier body.werkstatt-page, damit sie
   nicht von der gemeinsamen Ebene ueberschrieben werden.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1 — Seitenrahmen

   main ist in style.css auf min(1100px,100%) begrenzt. Die Buehne braucht
   mehr, also wird die Begrenzung hier aufgehoben und die Breite pro
   Abschnitt gesetzt. redesign.css gibt .page-section bereits 1280px.
   --------------------------------------------------------------------------- */
body.werkstatt-page .werkstatt-main{
  width:100%;
  max-width:none;
  padding-left:0;
  padding-right:0;
  padding-bottom:0;
  overflow-x:clip;
}

/* Der Auftakt ist das Band aus redesign.css. Dort holt margin-top:-48px
   die 48px Weissraum herein, die main oben setzt. Das gilt hier genauso. */

/* ---------------------------------------------------------------------------
   2 — Die Erzaehlung: feste Buehne links, Stationen rechts
   --------------------------------------------------------------------------- */
body.werkstatt-page .wk-story{
  position:relative;
  max-width:1280px;
  margin-inline:auto;
  padding:0 var(--space-gutter);
}

/* Schmale Schirme: Buehne oben festgesetzt, Stationen darunter im Fluss.
   Die Buehne bekommt eine eigene Flaeche, damit die Karten beim
   Vorbeilaufen nicht darunter durchscheinen. */
body.werkstatt-page .wk-stage-col{
  position:sticky;
  top:calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  z-index:4;
  background:var(--bg);
  padding-block:var(--space-2) var(--space-1);
}

body.werkstatt-page .wk-stage{
  position:relative;
  width:100%;
  height:min(46svh, 22rem);
  background:#f4f5f7;
  border:0;
  border-radius:0;
  overflow:hidden;
  transition:background 900ms var(--ease-out);
}
/* Abgedunkelte Buehne fuer die Station "Licht".
   Nicht dunkler: gemessen lag das schwarze Rad bei #14171d nur noch
   3,5 Luminanzstufen ueber dem Grund und verschwand darin. Bei diesem
   Wert sind es 18 Stufen, und die Leuchten stehen trotzdem mit 250 von
   255 als hellstes im Bild. */
body.werkstatt-page .wk-stage[data-dim="true"]{
  background:#2a2f38;
}

body.werkstatt-page .wk-canvas{
  display:block;
  width:100%;
  height:100%;
}

/* Die Fuehrungslinien. Sie liegen UNTER keinem Text, weil der Text
   ausserhalb der Buehne steht. Innerhalb der Buehne ist nur die Linie
   selbst — 1px, keine Flaeche, verdeckt nichts. */
body.werkstatt-page .wk-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
}
body.werkstatt-page .wk-lines path{
  fill:none;
  stroke:var(--fg);
  stroke-width:1;
  opacity:0;
  transition:opacity 280ms linear;
}
body.werkstatt-page .wk-lines circle{
  fill:none;
  stroke:var(--fg);
  stroke-width:1;
  opacity:0;
  transition:opacity 280ms linear;
}
body.werkstatt-page .wk-lines path[data-on="true"],
body.werkstatt-page .wk-lines circle[data-on="true"]{
  opacity:0.75;
}
body.werkstatt-page .wk-stage[data-dim="true"] .wk-lines path,
body.werkstatt-page .wk-stage[data-dim="true"] .wk-lines circle{
  stroke:#fff;
}

/* Beschriftung der Buehne: zwei Haarlinien-Zeilen, oben und unten */
body.werkstatt-page .wk-stage-meta{
  position:absolute;
  top:0;
  left:0;
  right:0;
  margin:0;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:var(--space-2);
  font-family:var(--font-ui);
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(17,19,24,0.5);
  border-bottom:1px solid var(--line);
  pointer-events:none;
}
body.werkstatt-page .wk-stage-meta .wk-count{
  font-variant-numeric:tabular-nums;
}
body.werkstatt-page .wk-stage[data-dim="true"] .wk-stage-meta{
  color:rgba(255,255,255,0.5);
  border-bottom-color:rgba(255,255,255,0.14);
}

/* Fortschritt als Striche, nicht als Punkte — Haarlinien-Sprache */
body.werkstatt-page .wk-stage-dots{
  position:absolute;
  bottom:12px;
  left:12px;
  right:12px;
  display:flex;
  gap:6px;
  pointer-events:none;
}
body.werkstatt-page .wk-stage-dots i{
  flex:1 1 0;
  height:1px;
  background:rgba(17,19,24,0.18);
  transition:background 320ms var(--ease-out), height 320ms var(--ease-out);
}
body.werkstatt-page .wk-stage-dots i[data-on="true"]{
  height:2px;
  background:var(--fg);
}
body.werkstatt-page .wk-stage[data-dim="true"] .wk-stage-dots i{
  background:rgba(255,255,255,0.2);
}
body.werkstatt-page .wk-stage[data-dim="true"] .wk-stage-dots i[data-on="true"]{
  background:#fff;
}

/* Hinweis in der Buehne: Ladezustand, fehlendes WebGL, Fehler */
body.werkstatt-page .wk-stage-note{
  position:absolute;
  inset:0;
  margin:0;
  display:grid;
  place-items:center;
  padding:var(--space-4) var(--space-3);
  background:#f4f5f7;
  color:var(--muted);
  font-size:var(--step--1);
  text-align:center;
  text-wrap:balance;
}
body.werkstatt-page .wk-stage-note[hidden]{
  display:none;
}

/* ---------------------------------------------------------------------------
   3 — Die Stationen

   Kein Kasten, kein Rahmen, kein Schatten. Eine Haarlinie oben, darunter
   Hochzeile, Ueberschrift, Text. Genau wie "Kaesten werden Zeilen" im
   Rest des Redesigns.
   --------------------------------------------------------------------------- */
body.werkstatt-page .wk-steps{
  position:relative;
  z-index:3;
}

body.werkstatt-page .wk-stop{
  padding-block:var(--space-4);
}

body.werkstatt-page .wk-stop-inner{
  border-top:1px solid var(--line);
  padding-top:var(--space-3);
}

body.werkstatt-page .wk-grp{
  margin:0 0 var(--space-1);
  font-family:var(--font-ui);
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(17,19,24,0.5);
}

body.werkstatt-page .wk-stop h3{
  margin:0 0 var(--space-2);
  font-family:var(--font-display);
  font-size:var(--step-4);
  font-weight:690;
  line-height:1.02;
  letter-spacing:-0.032em;
  text-wrap:balance;
}

body.werkstatt-page .wk-stop p{
  margin:0 0 var(--space-2);
  font-size:var(--step-0);
  line-height:1.55;
  color:var(--muted);
  max-width:46ch;
}
body.werkstatt-page .wk-stop p b,
body.werkstatt-page .wk-stop p strong{
  color:var(--fg);
  font-weight:650;
}

/* Der Intervall-Block: wieder nur eine Haarlinie */
body.werkstatt-page .wk-when{
  display:block;
  margin-top:var(--space-3);
  padding-top:var(--space-2);
  border-top:1px solid var(--line);
  max-width:46ch;
}
body.werkstatt-page .wk-when-label{
  display:block;
  margin-bottom:4px;
  font-family:var(--font-ui);
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(17,19,24,0.5);
}
body.werkstatt-page .wk-when-text{
  display:block;
  font-size:var(--step-0);
  line-height:1.5;
  color:var(--fg);
}
body.werkstatt-page .wk-when-text b,
body.werkstatt-page .wk-when-text strong{
  font-weight:650;
}
body.werkstatt-page .wk-src{
  display:block;
  margin-top:6px;
  font-size:var(--step--2);
  line-height:1.5;
  color:rgba(17,19,24,0.5);
}

/* Zustaendigkeit: Wort mit Haarlinie, kein farbiges Pill */
body.werkstatt-page .wk-who{
  display:inline-block;
  margin-top:var(--space-2);
  padding-top:6px;
  border-top:1px solid var(--fg);
  font-family:var(--font-ui);
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg);
}

/* ---------------------------------------------------------------------------
   4 — Breite Schirme: zwei Spalten, Buehne steht

   Die Stationen laufen in der rechten Spalte, die Buehne bleibt links
   stehen. Beide Spalten sind getrennte Rasterzellen — die Linie endet an
   der Buehnenkante, der Text beginnt dahinter. Kein Overlay.
   --------------------------------------------------------------------------- */
@media (min-width:1000px){
  body.werkstatt-page .wk-story{
    display:grid;
    /* Am unteren Ende des Breakpoints bekommt der Text die schmalere
       Spalte, sonst bleibt fuer die Buehne zu wenig uebrig. */
    grid-template-columns:minmax(0, 1fr) minmax(18rem, 22rem);
    column-gap:var(--space-6);
    align-items:start;
  }

  body.werkstatt-page .wk-stage-col{
    grid-column:1;
    grid-row:1;
    top:calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    /* Die Spalte belegt die Bildhoehe, die Buehne sitzt darin mittig.
       So steht das Rad auf Augenhoehe, egal wie hoch der Schirm ist. */
    height:calc(100svh - var(--nav-h) - env(safe-area-inset-top, 0px));
    display:grid;
    align-content:center;
    background:none;
    padding-block:0;
  }
  /* Ein Fahrrad ist breiter als hoch. Eine hochformatige Buehne zwingt
     die Kamera entweder weit weg oder schneidet das Rad an den Seiten
     ab — gemessen waren es bei 72svh Hoehe bis zu 404 px links. Deshalb
     ein liegendes Format; die freie Hoehe nimmt die Spalte auf. */
  body.werkstatt-page .wk-stage{
    height:auto;
    aspect-ratio:3 / 2;
    max-height:min(72svh, 40rem);
  }

  body.werkstatt-page .wk-steps{
    grid-column:2;
    grid-row:1;
  }

  /* Jede Station belegt eine Bildschirmhoehe, damit die Kamera Zeit zum
     Fahren hat. Die letzte kuerzer, sonst laeuft die Seite leer aus. */
  body.werkstatt-page .wk-stop{
    min-height:88svh;
    display:flex;
    align-items:center;
    padding-block:0;
  }
  body.werkstatt-page .wk-stop:last-child{
    min-height:62svh;
    align-items:flex-start;
    padding-top:var(--space-6);
  }

  /* Nur die aktive Station ist voll da. Die anderen treten zurueck,
     statt zu verschwinden — so bleibt der Zusammenhang lesbar. */
  body.werkstatt-page .wk-stop-inner{
    opacity:0.3;
    transition:opacity 480ms var(--ease-out);
  }
  body.werkstatt-page .wk-stop[data-on="true"] .wk-stop-inner{
    opacity:1;
  }

  /* Die Verbindung zur Buehne setzt auf halber Hoehe des Textblocks an
     — dort endet auch die Fuehrungslinie im Canvas. Zusammen ergeben
     sie eine durchgehende Linie Bauteil -> Text, die nichts verdeckt.

     Die Mitte und nicht die Oberkante: der Block ist hoeher als die
     Buehne, seine Oberkante liegt deshalb meist darueber. Seine Mitte
     faellt dagegen mit der Buehnenmitte zusammen, weil beide in der
     Bildhoehe zentriert sind. */
  body.werkstatt-page .wk-stop-inner{
    position:relative;
  }
  body.werkstatt-page .wk-stop-inner::before{
    content:"";
    position:absolute;
    top:50%;
    right:100%;
    width:var(--space-6);
    height:1px;
    background:var(--fg);
    opacity:0;
    transition:opacity 480ms var(--ease-out);
  }
  body.werkstatt-page .wk-stop[data-on="true"] .wk-stop-inner::before{
    opacity:1;
  }
}

/* Mehr Platz: der Text darf wieder breiter laufen */
@media (min-width:1280px){
  body.werkstatt-page .wk-story{
    grid-template-columns:minmax(0, 1fr) 26rem;
  }
}
@media (min-width:1500px){
  body.werkstatt-page .wk-story{
    grid-template-columns:minmax(0, 1fr) 28rem;
  }
}

/* ---------------------------------------------------------------------------
   5 — Schmale Schirme

   Fuehrungslinien aus: bei 360px Breite ist kein Platz fuer eine Linie,
   die etwas erklaert. Die Hochzeile der Station tut dasselbe in Worten.
   --------------------------------------------------------------------------- */
@media (max-width:999px){
  body.werkstatt-page .wk-lines{
    display:none;
  }
  body.werkstatt-page .wk-stop-inner{
    opacity:1;
  }
  body.werkstatt-page .wk-stop{
    min-height:0;
  }
  /* Die Buehne liegt fest oben; darunter darf kein Text durchscheinen,
     wenn er hochlaeuft. Ein kurzer Verlauf blendet die Kante weich ab. */
  body.werkstatt-page .wk-stage-col::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:calc(-1 * var(--space-2));
    height:var(--space-2);
    pointer-events:none;
    background:linear-gradient(to bottom, var(--bg), transparent);
  }
}

/* ---------------------------------------------------------------------------
   6 — Statische Ansicht

   Gilt bei prefers-reduced-motion, ohne WebGL und ohne JavaScript. Die
   Buehne steht nicht mehr fest, es wird nichts gefahren und nichts
   zerlegt. Alle Stationen stehen gleichzeitig als Text da — dieselbe
   Erklaerung, nur ohne Bewegung.
   --------------------------------------------------------------------------- */
body.werkstatt-page .wk-story[data-mode="static"] .wk-stage-col{
  position:static;
  padding-block:var(--space-2);
}
body.werkstatt-page .wk-story[data-mode="static"] .wk-stage-col::after{
  display:none;
}
body.werkstatt-page .wk-story[data-mode="static"] .wk-stage{
  height:auto;
  aspect-ratio:4 / 3;
}
body.werkstatt-page .wk-story[data-mode="static"] .wk-stage-dots{
  display:none;
}
body.werkstatt-page .wk-story[data-mode="static"] .wk-lines{
  display:none;
}
body.werkstatt-page .wk-story[data-mode="static"] .wk-stop{
  min-height:0;
  padding-block:var(--space-3) 0;
  display:block;
}
body.werkstatt-page .wk-story[data-mode="static"] .wk-stop-inner{
  opacity:1;
}
body.werkstatt-page .wk-story[data-mode="static"] .wk-stop-inner::before{
  display:none;
}
@media (min-width:1000px){
  /* Zwei Spalten bleiben, aber beide laufen mit — die Buehne steht nicht
     mehr, also darf sie auch nicht die ganze Spalte blockieren. */
  body.werkstatt-page .wk-story[data-mode="static"]{
    grid-template-columns:minmax(0, 1fr) minmax(20rem, 30rem);
    align-items:start;
  }
  body.werkstatt-page .wk-story[data-mode="static"] .wk-stage{
    height:auto;
  }
}

@media (prefers-reduced-motion: reduce){
  body.werkstatt-page .wk-stage,
  body.werkstatt-page .wk-stage-dots i,
  body.werkstatt-page .wk-stop-inner,
  body.werkstatt-page .wk-stop-inner::before,
  body.werkstatt-page .wk-lines path,
  body.werkstatt-page .wk-lines circle{
    transition:none;
  }
}

/* ---------------------------------------------------------------------------
   7 — Wartungsplan als Tabelle

   Eine Tabelle ist hier die richtige Form: drei Spalten, die man
   zeilenweise vergleicht. Also auch als Tabelle gebaut und nicht als
   Kaesten verkleidet — Haarlinien statt Rahmen.
   --------------------------------------------------------------------------- */
body.werkstatt-page .wk-table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
body.werkstatt-page .wk-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--step-0);
  min-width:34rem;
}
body.werkstatt-page .wk-table th,
body.werkstatt-page .wk-table td{
  text-align:left;
  vertical-align:top;
  padding:var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom:1px solid var(--line);
}
body.werkstatt-page .wk-table thead th{
  font-family:var(--font-ui);
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(17,19,24,0.5);
  border-bottom-color:var(--fg);
}
body.werkstatt-page .wk-table tbody th{
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:650;
  letter-spacing:-0.02em;
  white-space:nowrap;
  padding-right:var(--space-3);
}
body.werkstatt-page .wk-table td{
  color:var(--muted);
  line-height:1.5;
}
body.werkstatt-page .wk-table .wk-src{
  margin-top:4px;
}

/* ---------------------------------------------------------------------------
   8 — Zwei Listen: selbst machbar / in die Werkstatt
   --------------------------------------------------------------------------- */
body.werkstatt-page .wk-duo{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
}
@media (min-width:860px){
  body.werkstatt-page .wk-duo{
    grid-template-columns:1fr 1fr;
    gap:var(--space-8);
  }
}
body.werkstatt-page .wk-duo h3{
  margin:0 0 var(--space-2);
  padding-bottom:var(--space-1);
  border-bottom:1px solid var(--fg);
  font-family:var(--font-display);
  font-size:var(--step-2);
  font-weight:650;
  letter-spacing:-0.028em;
}
body.werkstatt-page .wk-list{
  list-style:none;
  margin:0;
  padding:0;
}
body.werkstatt-page .wk-list li{
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--line);
  font-size:var(--step-0);
  line-height:1.5;
  color:var(--muted);
}

/* ---------------------------------------------------------------------------
   9 — Haftungsabgrenzung und FAQ
   --------------------------------------------------------------------------- */
body.werkstatt-page .wk-note{
  max-width:60ch;
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--muted);
  padding-top:var(--space-2);
  border-top:1px solid var(--line);
}
body.werkstatt-page .wk-note b,
body.werkstatt-page .wk-note strong{
  color:var(--fg);
  font-weight:650;
}

body.werkstatt-page .wk-faq{
  border-top:1px solid var(--line);
}
body.werkstatt-page .wk-faq details{
  border-bottom:1px solid var(--line);
  padding:var(--space-2) 0;
}
body.werkstatt-page .wk-faq summary{
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:650;
  letter-spacing:-0.022em;
  line-height:1.25;
  display:flex;
  gap:var(--space-2);
  align-items:baseline;
  justify-content:space-between;
}
body.werkstatt-page .wk-faq summary::-webkit-details-marker{
  display:none;
}
body.werkstatt-page .wk-faq summary::after{
  content:"+";
  flex:0 0 auto;
  font-family:var(--font-ui);
  font-weight:400;
  color:rgba(17,19,24,0.5);
}
body.werkstatt-page .wk-faq details[open] summary::after{
  content:"\2013";
}
body.werkstatt-page .wk-faq details p{
  margin:var(--space-2) 0 0;
  max-width:60ch;
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--muted);
}

/* ---------------------------------------------------------------------------
   10 — Abschluss als Band, wie der Auftakt
   --------------------------------------------------------------------------- */
body.werkstatt-page .werkstatt-main > section.wk-outro{
  width:100vw;
  margin-inline:calc(50% - 50vw);
  max-width:100vw;
  overflow-x:clip;
  margin-top:var(--space-section);
  padding:var(--space-page) var(--space-gutter);
  background:#0d0f13;
  color:#fff;
}
body.werkstatt-page .wk-outro > *{
  max-width:1280px;
  margin-inline:auto;
}
body.werkstatt-page .wk-outro h2{
  margin:0 0 var(--space-2);
  color:#fff;
  font-family:var(--font-display);
  font-size:var(--step-5);
  font-weight:690;
  line-height:1.02;
  letter-spacing:-0.035em;
  max-width:18ch;
  text-wrap:balance;
}
body.werkstatt-page .wk-outro p{
  margin:0 0 var(--space-4);
  color:rgba(255,255,255,0.72);
  font-size:var(--step-1);
  line-height:1.5;
  max-width:52ch;
}
body.werkstatt-page .wk-outro .wk-outro-eyebrow{
  margin:0 0 var(--space-2);
  font-family:var(--font-ui);
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
body.werkstatt-page .wk-outro .cta-primary{
  background:#fff;
  color:#0d0f13;
  border-color:#fff;
}
body.werkstatt-page .wk-outro .cta-secondary{
  color:#fff;
  border-color:rgba(255,255,255,0.35);
}
/* Adresse und Oeffnungszeiten.
   redesign.css macht aus .page-pill-list Textmarken in var(--muted) —
   das ist Dunkelgrau und stand auf dem schwarzen Band bei Kontrast 1,1.
   Im Band muss von Weiss aus gedaempft werden, nicht von Schwarz. */
body.werkstatt-page .wk-outro .page-pill-list{
  margin-top:var(--space-6);
  padding-top:var(--space-3);
  border-top:1px solid rgba(255,255,255,0.18);
}
body.werkstatt-page .wk-outro .page-pill-list li{
  color:rgba(255,255,255,0.6);
}

/* Hinweis, der nur in der statischen Ansicht erscheint. Ohne JavaScript
   steht er von Anfang an da: das HTML liefert die Seite statisch aus,
   und das Skript schaltet erst danach auf "scroll" um. */
body.werkstatt-page .wk-static-hint{
  margin:var(--space-2) 0 0;
  padding-top:var(--space-2);
  border-top:1px solid var(--line);
  font-size:var(--step--1);
  line-height:1.5;
  color:var(--muted);
  max-width:52ch;
}
body.werkstatt-page .wk-story[data-mode="scroll"] .wk-static-hint{
  display:none;
}

/* Nur fuer Screenreader */
body.werkstatt-page .wk-sr{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}