/* ===========================================================================
   styles.css — TRM Pfahlsystem, interaktives Funktionsmodell
   ---------------------------------------------------------------------------
   Abschnitte tragen dieselben Namen wie die data-sid im HTML:
     1. Grundlagen  (Farben, Schrift, Reset, der Schleier)
     2. szene       (die feste Leinwand und ihre Marken)
     3. kopf        (Wortmarke und Kapitelnavigation)
     4. lesespalte  (ein Bildschirm Text pro Kapitel)
     5. Kapitelteile (Teileliste, Tabellen, Zulassungen, offene Module)
     6. werkzeuge   (die Regler, die immer gelten)
     7. fuss
     8. Schmal      (Telefon)

   WARUM dunkel: das Modell ist aus Gusseisen und lebt von Reflexen. Auf
   Papierweiss verliert eine matte Gussoberflaeche ihren Kontrast; auf Nacht
   traegt sie ihn. Ein Akzent, und zwar TRMs eigenes Gruen (#009982 von trm.at,
   auf Nacht eine Stufe heller gesetzt). Es markiert nur, was gerade GILT: das
   aktive Kapitel, das gewaehlte Teil, den Lastabtrag, und die Bemessungswerte
   in dem Moment, in dem sie wirklich zutreffen.

   STAPELUNG: Leinwand (z 1) → Schleier (z 2) → Text (z 10) → Kopf und
   Werkzeuge (z 20). Die Referenz, an der sich diese Seite orientiert, legt die
   Leinwand UEBER den Text — dort ist das Modell ein freigestelltes Objekt auf
   Durchsicht, und darueber zu liegen kostet nichts. Hier steht der Pfahl auf
   einer Erdflaeche, und eine Erdflaeche ist undurchsichtig: ueber dem Text
   wuerde sie ihn zudecken. Also liegt sie darunter, und der Schleier
   dazwischen nimmt ihr links so viel Helligkeit, dass die Schrift ohne Kasten
   steht.
   =========================================================================== */

/* ---- 1. Grundlagen ------------------------------------------------------ */

@font-face {
  font-family: 'Archivo';
  src: url('assets/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  /* optional statt swap: keine Nachlade-Verschiebung, CLS bleibt bei 0. */
  font-display: optional;
}

:root {
  --nacht: #0b0d10;
  --nacht-2: #14171b;
  --papier: #e9e7e3;
  --papier-matt: #9b978f;
  --gruen: #23b79d;
  --linie: rgba(233, 231, 227, 0.17);
  --linie-matt: rgba(233, 231, 227, 0.08);

  --rand: clamp(1.15rem, 4vw, 3.5rem);
  --spalte: min(34rem, 40vw);
}

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] ist nur ein Standardwert von display:none, also schlaegt ihn JEDE
   Regel, die ein display setzt. Gemessen 2026-09-07: ein Regler blieb im
   falschen Kapitel stehen, weil er ein Grid war. */
[hidden] { display: none !important; }

html {
  color: var(--papier);
  background: var(--nacht);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Archivo', 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: clamp(0.98rem, 0.3vw + 0.92rem, 1.06rem);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  /* Waagrecht ziehen dreht das Modell, senkrecht bleibt Scrollen. Zoomen mit
     zwei Fingern bleibt erlaubt — es wegzunehmen ist eine Zugangsbarriere. */
  touch-action: pan-y pinch-zoom;
}

/* Der Schleier. Liegt unter dem Text und unter der Leinwand und nimmt dem
   Modell links so viel Helligkeit, dass die Schrift ohne Kasten steht. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(11, 13, 16, 0.95) 0%,
    rgba(11, 13, 16, 0.88) 24%,
    rgba(11, 13, 16, 0.38) 44%,
    rgba(11, 13, 16, 0) 58%);
}

body.dreht { cursor: grabbing; user-select: none; -webkit-user-select: none; }

h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.06; letter-spacing: -0.022em; }
p { margin: 0 0 1rem; }
em { font-style: normal; font-weight: 600; }

a { color: var(--papier); text-decoration: none; border-bottom: 1px solid var(--gruen); }
a:hover, a:focus-visible { color: var(--gruen); }

:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Seitenangaben. Klein, matt, immer direkt neben der Zahl, die sie belegt. */
.q {
  font-size: 0.68rem; letter-spacing: 0.1em; color: var(--papier-matt);
  white-space: nowrap; font-weight: 400;
}

/* Dachzeile: das einzige Gruen ausserhalb dessen, was gerade gilt. */
.dach {
  margin: 0 0 1.05rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gruen);
}

/* ---- 2. szene ----------------------------------------------------------- */

/* Unter dem Text, und fuer Zeiger unsichtbar — gedreht wird ueber
   Fenster-Handler, nicht ueber die Leinwand. */
/* Zwei Buehnen, ein Blickpunkt. Auf dem Desktop traegt `.szene` alles und
   `.szene-vorn` nur die Beschriftungen; auf dem Telefon wird das Bild zweimal
   gezeichnet (js/welt.js) und die zwei Ebenen klemmen den Text zwischen sich. */
.szene, .szene-vorn { position: fixed; inset: 0; pointer-events: none; }
.szene { z-index: 1; }
.szene-vorn { z-index: 14; }
#leinwand, #leinwand-vorn { display: block; width: 100%; height: 100%; }
/* Auf breiten Schirmen gibt es die vordere Ebene nicht — dort steht das Modell
   ohnehin neben der Lesespalte und braucht keine zweite Leinwand. */
#leinwand-vorn { display: none; }

/* Marken: liegen ueber der Leinwand, werden pro Bild neu positioniert. */
.marken { position: absolute; inset: 0; pointer-events: none; }

.marke {
  position: absolute; top: 0; left: 0;
  transform: translate3d(-9999px, -9999px, 0);
  /* max-content und keine max-width: die gemessene Breite muss die echte
     Textbreite sein, sonst klappt die Marke am Bildrand ins Leere. */
  width: max-content;
  padding-left: 2.8rem;
  font-size: 0.74rem; line-height: 1.3;
  opacity: 0; transition: opacity 0.25s ease;
}
.marke.ist-da { opacity: 1; }

/* Beschriftungen liegen ueber Guss und ueber Schraffuren. Ohne eigenen Grund
   ist eine Bemassung auf beidem nicht lesbar — das ist der Grund fuer die
   Kaestchen, nicht Dekoration. */
.marke b, .marke span {
  display: block; width: max-content; white-space: nowrap;
  background: rgba(11, 13, 16, 0.8); padding: 0.05rem 0.4rem;
}
.marke b { font-weight: 600; font-size: 0.8rem; }
.marke span { color: var(--papier-matt); }

/* Die Fuehrungslinie ist echt gezeichnet: Punkt am Bauteil, Strich zum Text. */
.marke::before {
  content: ''; position: absolute; left: 0; top: 0.66em;
  width: 2.4rem; height: 1px; background: var(--papier); opacity: 0.5;
}
.marke::after {
  content: ''; position: absolute; left: -2.5px; top: calc(0.66em - 2.5px);
  width: 5px; height: 5px; border-radius: 50%; background: var(--papier);
}

/* Linksliegende Marke: Fuehrungslinie rechts, Text nach links weg. main.js
   schaltet das um, damit keine Beschriftung aus dem Bild laeuft. */
.marke--links { padding-left: 0; padding-right: 2.8rem; text-align: right; }
.marke--links b, .marke--links span { margin-left: auto; }
.marke--links::before { left: auto; right: 0; }
.marke--links::after { left: auto; right: -2.5px; }

.marke--boden span { font-size: 0.72rem; line-height: 1.3; white-space: normal; width: 8.4rem; }

/* Umbruch statt einer Zeile: der Wortlaut aus dem Folder ist zu lang, um auf
   einem Telefon neben der Spitze noch ins Bild zu passen. */
.marke--last b { white-space: normal; width: 7.8rem; color: var(--gruen); }
.marke--last::before, .marke--last::after { background: var(--gruen); opacity: 1; }

.kein-js {
  position: absolute; inset: auto 0 44% 0; margin: 0;
  padding: 0 var(--rand); text-align: center; color: var(--papier-matt);
}

/* ---- 3. kopf ------------------------------------------------------------ */

.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem;
  padding: clamp(1rem, 2.2vw, 1.8rem) var(--rand);
  pointer-events: none;
}
.kopf > * { pointer-events: auto; }

/* Der Kopf ist ueber seiner eigenen Hoehe deckend, damit Text darunter
   durchlaeuft statt dagegen zu stossen; die letzten 1,6rem blenden aus. */
.kopf::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; left: 0; right: 0; height: calc(100% + 1.6rem);
  background: linear-gradient(180deg, var(--nacht) 0%, var(--nacht) calc(100% - 1.6rem), transparent 100%);
  pointer-events: none;
}

.wortmarke { border: 0; display: block; }
.wortmarke b { display: block; font-size: 0.96rem; font-weight: 600; letter-spacing: -0.01em; }
.wortmarke span {
  display: block; margin-top: 0.12rem;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--papier-matt);
}

.kapitelnav { display: flex; align-items: center; gap: 1.1rem; }
.kapitelnav button {
  background: none; border: 0; cursor: pointer;
  padding: 0.2rem 0 0.32rem; border-bottom: 1px solid transparent;
  font: inherit; font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--papier-matt);
  transition: color 0.2s, border-color 0.25s;
}
.kapitelnav button:hover { color: var(--papier); }
.kapitelnav button[aria-current='true'] { color: var(--gruen); border-bottom-color: var(--gruen); }

/* ---- 4. lesespalte ------------------------------------------------------ */

.lesespalte { position: relative; z-index: 10; pointer-events: none; }

.kapitel {
  min-height: 118svh;
  display: flex; align-items: center;
  padding: 7rem var(--rand);
}
/* Nur die Textsaeule faengt Klicks. Alles daneben gehoert dem Modell, und ein
   Zug neben dem Text dreht es, statt ins Leere zu gehen. */
.spalte { width: var(--spalte); pointer-events: auto; }

.kapitel h1, .kapitel h2 {
  font-size: clamp(2rem, 4.4vw, 3.7rem);
  margin-bottom: 1.15rem;
  max-width: 15ch;
}

.fliess { max-width: 42ch; }
.fliess p:last-of-type { margin-bottom: 0; }

.hinweis {
  margin: 1.5rem 0 0;
  font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--papier-matt);
  transition: opacity 0.5s ease;
}
.hinweis.ist-weg { opacity: 0.55; }

/* ---- 5. Kapitelteile ---------------------------------------------------- */

.werk { margin-top: 1.8rem; border-top: 1px solid var(--linie); padding-top: 1.1rem; }

/* Teileliste: eine Zeile pro Teil, anklickbar wie das Teil selbst im Modell. */
.teileliste { list-style: none; margin: 0; padding: 0; }
.teil {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: 0.6rem 0.2rem 0.6rem 0.8rem; cursor: pointer;
  background: none; color: var(--papier);
  border: 0; border-left: 2px solid var(--linie);
  border-bottom: 1px solid var(--linie-matt);
  transition: border-color 0.2s, background 0.2s;
}
.teil:hover { background: rgba(233, 231, 227, 0.045); }
.teil b { display: block; font-weight: 600; font-size: 0.9rem; }
.teil span { display: block; font-size: 0.74rem; color: var(--papier-matt); }
.teil.ist-aktiv { border-left-color: var(--gruen); }
.teil.ist-aktiv b { color: var(--gruen); }

.teil-blatt { margin-top: 1.3rem; border-top: 1px solid var(--gruen); padding-top: 1rem; }
.teil-blatt h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin-bottom: 0.15rem; }
.teil-rolle {
  margin: 0 0 0.7rem; font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gruen);
}
.teil-text { font-size: 0.9rem; color: var(--papier-matt); }

/* "Alle Teile zeigen" — der Weg aus einer Auswahl heraus, im Text und nicht
   irgendwo im Modell versteckt. */
.knopf-still {
  font: inherit; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 1rem; padding: 0.45rem 0.85rem; cursor: pointer;
  background: none; color: var(--papier-matt); border: 1px solid var(--linie);
  transition: color 0.2s, border-color 0.2s;
}
.knopf-still:hover { color: var(--papier); border-color: var(--papier-matt); }

.daten { border-collapse: collapse; width: 100%; margin-top: 0.85rem; }
/* Kein text-transform: aus N_Sd wuerde NSD, und ein falsch gesetztes
   Formelzeichen kostet mehr Vertrauen als Grossbuchstaben bringen. */
.daten caption {
  text-align: left; padding-bottom: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.05em; font-weight: 600;
  color: var(--papier-matt);
}
.daten th, .daten td {
  text-align: left; padding: 0.44rem 0.6rem 0.44rem 0;
  border-bottom: 1px solid var(--linie-matt); vertical-align: baseline;
  font-size: 0.88rem;
}
.daten th { font-weight: 400; color: var(--papier-matt); }
/* Zahlen brechen nie um — „1.117 kN" auf zwei Zeilen liest sich als zwei
   Werte. Ein Werkstoffname darf umbrechen, sonst schiebt er die Tabelle auf
   einem 390er Schirm ueber den Rand (gemessen 2026-09-07). */
.daten td:nth-child(2) { font-weight: 600; white-space: nowrap; }
.daten td.umbruch { white-space: normal; }
.daten td:last-child { text-align: right; width: 3.2rem; }

/* Die Lasttabelle sagt, dass die Werte erst gelten, wenn die Spitze im
   tragfaehigen Boden steht. Frueher tat sie das mit opacity — und eine
   abgedunkelte Tabelle faellt durch die Kontrastpruefung: acht Knoten, alle in
   dieser Tabelle. Jetzt traegt die FARBE der Zahl die Aussage: matt, solange
   sie nicht gilt, gruen, sobald sie gilt. Die Beschriftungen behalten immer
   ihren vollen Kontrast. */
.daten--last td:nth-child(2) { color: var(--papier-matt); transition: color 0.5s ease; }
.daten--last.ist-gueltig td:nth-child(2) { color: var(--gruen); }

.liste { margin: 0; padding-left: 1.05rem; font-size: 0.9rem; }
.liste li { margin-bottom: 0.42rem; }

/* Leere Regale. Sichtbar leer, nicht versteckt. */
.slots { list-style: none; margin: 0; padding: 0; }
.slots li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.58rem 0; border-bottom: 1px dashed var(--linie);
  color: var(--papier-matt); font-size: 0.88rem;
}
.slots em {
  font-style: normal; font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--papier-matt);
  border: 1px solid var(--linie); padding: 0.08rem 0.45rem; white-space: nowrap;
}

/* Kapitelregler: gehoeren dem Kapitel, in dem sie stehen. */
.k-regler { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; margin-top: 1.3rem; }
.k-regler label {
  font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--papier-matt);
}
.k-regler output { font-weight: 600; font-size: 0.92rem; text-align: right; }
.k-regler input { grid-column: 1 / -1; }

.schuhwahl { border: 0; margin: 1.3rem 0 0; padding: 0; }
.schuhwahl legend {
  padding: 0 0 0.55rem; font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--papier-matt);
}
.schuh {
  font: inherit; font-size: 0.86rem;
  padding: 0.48rem 0.9rem; margin-right: 0.45rem; cursor: pointer;
  background: none; color: var(--papier-matt);
  border: 1px solid var(--linie);
  transition: color 0.2s, border-color 0.2s;
}
.schuh:hover { color: var(--papier); }
.schuh.ist-aktiv { color: var(--gruen); border-color: var(--gruen); font-weight: 600; }

/* Der Rohrzaehler: die Zahl, die sich beim Rammen aendert. */
.strang { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.strang-zahl { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--gruen); }
.strang-quelle { margin: 0; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--papier-matt); }

.status {
  margin: 1.1rem 0 0; padding-top: 0.85rem;
  border-top: 1px solid var(--linie-matt);
  font-size: 0.84rem; color: var(--papier-matt);
}
.status.ist-tragend { color: var(--gruen); }

/* ---- 6. werkzeuge ------------------------------------------------------- */

/* Ein weicher Grund hinter der Leiste. Ohne ihn haengt sie ueber der Erde und
   die Beschriftungen verlieren gegen den hellsten Fleck des Bodens — je nach
   Kapitel und Drehung, also nicht vorhersagbar. */
.werkzeuge::before {
  /* Der Kasten muss deutlich groesser sein als der Verlauf, sonst schneidet
     seine Kante den Verlauf ab und aus dem weichen Grund wird ein Panel. */
  content: ''; position: absolute; inset: -5rem -7rem -4rem -8rem;
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 62% 68%, rgba(11, 13, 16, 0.86) 0%, rgba(11, 13, 16, 0.6) 42%, rgba(11, 13, 16, 0) 72%);
}

.werkzeuge {
  position: fixed; z-index: 20; right: var(--rand); bottom: var(--rand);
  display: flex; align-items: flex-end; gap: 1.05rem;
  padding-top: 0.85rem; border-top: 1px solid var(--linie);
  max-width: min(40rem, 52vw);
  animation: auf 0.5s ease both;
}
@keyframes auf { from { opacity: 0; transform: translateY(0.6rem); } }

.wz-regler { display: grid; gap: 0.3rem; width: clamp(6.5rem, 10vw, 9rem); }
.wz-regler label {
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--papier-matt);
}

.wz-knopf {
  font: inherit; font-size: 0.68rem; letter-spacing: 0.1em;
  padding: 0.48rem 0.85rem; cursor: pointer;
  background: none; color: var(--papier-matt);
  border: 1px solid var(--linie);
  transition: color 0.2s, border-color 0.2s;
}
.wz-knopf:hover { color: var(--papier); border-color: var(--papier-matt); }

/* Schieberegler: flache Schiene, runder Griff — Werkzeug, kein Spielzeug. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer;
  touch-action: auto;                 /* der Regler gehoert dem Finger, nicht der Drehung */
}
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--linie); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--linie); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; margin-top: -5px; border-radius: 50%;
  background: var(--papier); border: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%; background: var(--papier); border: 0;
}
input[type="range"]:hover::-webkit-slider-thumb { background: var(--gruen); }
input[type="range"]:hover::-moz-range-thumb { background: var(--gruen); }

/* ---- 7. fuss ------------------------------------------------------------ */

/* Durchscheinend, damit das Modell ueber die ganze Seitenlaenge laeuft. */
.fuss {
  position: relative; z-index: 10;
  background: rgba(11, 13, 16, 0.86);
  backdrop-filter: blur(6px);
  padding: clamp(2.5rem, 6vh, 4rem) var(--rand) 0;
  border-top: 1px solid var(--linie);
}
.fuss p { max-width: 58ch; font-size: 0.82rem; color: var(--papier-matt); }
.fuss a { color: var(--papier); }
.wdm-seal { margin-left: calc(var(--rand) * -1); }

/* ---- 8. Schmal ---------------------------------------------------------- */

@media (max-width: 56rem) {
  :root { --spalte: 100%; }

  /* Oben genug Deckung fuer die Wortmarke, dann dem Modell aus dem Weg, dann
     wieder zu, wo der Text anfaengt. */
  /* Der Schleier deckt den Text ab, nicht die Erde. 0,72 unten statt 0,97:
     bei 0,97 war der Boden hinter dem Text schwarz, und dann kann er auch
     wegbleiben. Bei 0,72 auf einem Boden um 100/255 steht die Schrift mit
     etwa 9:1 darauf — deutlich ueber der Anforderung — und die Erde ist noch
     Erde. */
  body::before {
    background: linear-gradient(180deg,
      rgba(11, 13, 16, 0.7) 0%,
      rgba(11, 13, 16, 0.16) 14%,
      rgba(11, 13, 16, 0.2) 30%,
      rgba(11, 13, 16, 0.58) 44%,
      rgba(11, 13, 16, 0.72) 56%);
  }

  /* Der Text steht unten, das Modell bekommt das obere Drittel. */
  /* 48vh: die Kapitel mit Teileliste, Tabelle oder Slots brauchen den Platz,
     und seit der Text unter dem Modell durchlaeuft statt darunter zu warten,
     darf er frueher anfangen — die erste Zeile steht knapp unter der Spitze,
     der Rest scrollt hinter dem Pfahl vorbei. */
  .kapitel { min-height: 100svh; padding: 48vh var(--rand) 6.5rem; align-items: flex-start; }

  /* Auf dem Telefon liegt die Buehne UEBER dem Text, wie in der Referenz: der
     Text scrollt unter dem Modell durch. Damit die undurchsichtige Erdflaeche
     den Text dabei nicht zudeckt, wird die Leinwand selbst nach unten
     ausgeblendet — sie loest sich in die Seite auf, statt auf ihr zu enden.
     Das ist der Unterschied zur Referenz, deren Modell ohnehin freigestellt
     auf Durchsicht steht. */
  .szene, .szene-vorn { top: 8.5rem; bottom: 0; height: auto; }
  /* Keine Blende mehr auf der hinteren Leinwand: sie IST jetzt der Hintergrund,
     die Erde soll bis zur Unterkante durchlaufen und der Text darauf liegen.
     Die Blende war der Kompromiss, solange es nur eine Ebene gab — sie loeste
     das Modell in die Seite auf und nahm dabei die Erde gleich mit. */
  #leinwand-vorn { display: block; }

  .kopf { flex-direction: column; gap: 0.85rem; }
  .kapitelnav {
    width: 100%; gap: 0.85rem;
    overflow-x: auto; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .kapitelnav::-webkit-scrollbar { display: none; }
  .kapitelnav button { flex: 0 0 auto; font-size: 0.6rem; letter-spacing: 0.06em; }

  .werkzeuge {
    left: 0; right: 0; bottom: 0; max-width: none;
    padding: 0.6rem var(--rand) 0.75rem;
    gap: 0.85rem; justify-content: space-between;
    background: rgba(11, 13, 16, 0.94);
    backdrop-filter: blur(6px); border-top: 1px solid var(--linie);
  }
  .wz-regler { width: auto; flex: 1; }
  /* Die Ansicht setzt sich bei jedem Kapitelwechsel selbst zurueck — auf dem
     Telefon kostet der Knopf mehr Platz als er bringt. */
  .wz-knopf { display: none; }

  .fuss { padding-bottom: 6rem; }
  .marke { font-size: 0.68rem; }
  .marke--boden span { width: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------
   9. Rahmen-Modus — die Seite als Modell im Fenster einer anderen Seite
   ---------------------------------------------------------------------
   index.html?rahmen=1 setzt html.im-rahmen (Inline-Skript im <head>).
   WARUM: die Studio-Seite zeigt dieses Modell in einem kleinen Fenster
   (auf dem Telefon rund 400 x 560 px). Die ganze Seite passt dort nicht
   hinein: Kopf, Kapitelleiste, Ueberschrift und Fliesstext druecken das
   Modell zusammen oder liegen darauf. Im Rahmen ist die Seite deshalb nur
   noch das Modell und die Regler, die es bedienen. Alles andere bleibt im
   Dokument, wird aber nicht gezeigt.
   Ohne den Parameter greift keine dieser Regeln — die eigenstaendige
   Seite sieht aus wie vorher.
   --------------------------------------------------------------------- */
html.im-rahmen, html.im-rahmen body { height: 100%; overflow: hidden; }
html.im-rahmen .kopf,
html.im-rahmen .lesespalte,
html.im-rahmen .fuss,
html.im-rahmen .wdm-seal,
html.im-rahmen body::before { display: none !important; }
/* Die Leinwand endet ueber der Reglerzeile, statt unter ihr durchzulaufen:
   so sitzt das Modell in der Mitte der FREIEN Flaeche und nichts liegt darauf. */
html.im-rahmen .szene,
html.im-rahmen .szene-vorn { top: 0; bottom: 4rem; height: auto; border-bottom: 0; }
/* Die Regler als eine Zeile ueber die ganze Breite, auch im breiten Fenster —
   unten rechts stuenden sie dort vor dem Modell. */
html.im-rahmen .werkzeuge {
  left: 0; right: 0; bottom: 0; max-width: none;
  height: 4rem; box-sizing: border-box; padding: 0 var(--rand);
  gap: 1rem; flex-wrap: nowrap; align-items: center; justify-content: center;
  background: rgba(11, 13, 16, 0.94); border-top: 1px solid var(--linie);
  animation: none;
}
html.im-rahmen .wz-regler { width: auto; flex: 0 1 9rem; }