/* ==========================================================================
   Tischlerei Holzapfel, Fritzlar — Portfolio-Seite 3 von 4 der erfundenen
   Agentur „Eberhard Media" (prototypen/handwerk). Eine Welt, eine Datei.

   DIE WELT      „Still": Eine Tischlerei verkauft Stücke, die es nur einmal
                 gibt. Also ist die Seite eine Galerie mit Bildunterschriften
                 und kein Prospekt — Serifen, große Bilder, wenig Text, viel
                 Rand. Wer sie öffnet, soll zuerst ein Möbel sehen und erst
                 danach einen Satz lesen.

                 Seit dem 2026-09-10 ist der Grund DUNKEL (Entscheidung
                 Maxim). Aufbau, Raster, Schrift, Versatz und Bewegung sind
                 unverändert geblieben; getauscht ist nur die Palette. Der
                 Gedanke dahinter: ein Möbelfoto vor Papier konkurriert mit
                 dem Papier um dieselbe Helligkeit, vor geöltem Holz im
                 Schatten steht es allein da. Die Seite ist damit ein
                 abgedunkelter Ausstellungsraum, kein Prospektbogen.
   ABGRENZUNG    Bewusst nicht die Agenturseite (Schwarz auf Weiß,
                 Plakatschrift in Versalien, eigener Zeiger, Laufband) und
                 nicht handwerk-elektro (Weiß, Karten mit 14 px Rundung,
                 Pillen, Blau, viele schnelle Bewegungen). Zu handwerk-dach
                 grenzt nach dem Umbau alles ab AUSSER der Helligkeit — jene
                 Seite bekommt in derselben Runde einen neuen, hellen Entwurf
                 (eigener PR). Verschieden bleiben Schrift (dort ein
                 Grotesk mit Maschinenschrift daneben, hier eine Serife),
                 Ordnung (dort Höhenskala und Aufmaßblatt, hier Versatz und
                 Bilderband) und Farbe (dort Patina, hier Nussbaum).
                 Hier gilt weiter: KEINE Kästen,
                 KEINE Rundung, KEINE Schatten, KEINE Pillen, KEINE Icons,
                 keine Versalien-Schlagzeile, kein Video, kein Konfigurator,
                 keine Farbfläche.
   MATERIAL      Geöltes Holz im Schatten (#16110D) als Grund, ein zweiter,
                 eine Spur hellerer Ton für Fuß und Anfrage, Tinte (#F2ECE1)
                 als Schrift, Grau (#A1948A) für Nebentext, Sand (#473D33)
                 für jede Linie, Nussbaum (#CD9159) für Links, den einen
                 Strich und den einen Knopf. Genau EIN tieferes Band
                 (#0B0806): die Werkstatt. Sonst kommt alle Farbe aus dem
                 Holz auf den Fotos.

                 --licht (#F5F0E8) ist der alte Papierton und heißt jetzt so,
                 weil er nur noch EINE Aufgabe hat: Schrift, die auf einem
                 Foto liegt (Holztafeln, Vorher/Nachher). Als Grundfarbe
                 kommt er nirgends mehr vor. Wer ihn wieder als Hintergrund
                 setzt, reißt ein weißes Loch in die Seite.
   SCHRIFT       Fraunces (variabel, opsz/wght/SOFT/WONK) für alles Große,
                 Gewicht 300–400, SOFT 30 — eine Serife, die weich ist, ohne
                 nostalgisch zu werden; kursiv für Bildunterschriften und
                 Zitate. Instrument Sans für Fließtext und Bedienung.
                 Der Held-Satz ist bewusst KEIN Plakat: er tritt hinter die
                 Bilder zurück.
   RASTER        12 Spalten, Inhalt bis 1440 px, außen 6vw. Gestaltungsmittel
                 ist der VERSATZ: kein Stück steht auf derselben Höhe wie
                 sein Nachbar, keine Reihe ist symmetrisch. 160 px zwischen
                 den Abschnitten.
   BEWEGUNG      weich und wenig: Bilder blenden ein und gehen dabei von
                 scale(1.04) auf 1 (900 ms), Text blendet ein und steigt
                 12 px (500 ms), das Werk-Band hat Trägheit beim Loslassen,
                 die Holztafel weitet sich, die Lightbox öffnet.
                 Keine Zähler, keine Parallaxe, kein Pinning, kein Laufband.
                 Alles cubic-bezier(.16,1,.3,1) und langsam.
                 prefers-reduced-motion schaltet alles ab und zeigt den
                 fertigen Zustand.

   TRANSFORM-REGEL: Erscheinen läuft als ANIMATION (nicht als Übergang) und
   wird nach `animationend` per `ist-fertig` abgelegt — sonst hielte
   `forwards` das `translate` fest und die Hover-Übergänge derselben
   Elemente kämen nie an. Ein beobachteter Rahmen trägt nie einen
   `clip-path`; der Clip liegt auf dem Kind.

   CSP: kein Inline-Stil, kein Inline-Skript. Werte aus dem Skript kommen
   über `style.setProperty` (--x, --i) oder über Klassen.
   ========================================================================== */

/* --- Schriften (selbst gehostet, CSP font-src 'self') ---------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("/portfolio/tischlerei/assets/fonts/fraunces-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("/portfolio/tischlerei/assets/fonts/fraunces-var-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  src: url("/portfolio/tischlerei/assets/fonts/fraunces-italic-var-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("/portfolio/tischlerei/assets/fonts/fraunces-italic-var-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/portfolio/tischlerei/assets/fonts/instrumentsans-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/portfolio/tischlerei/assets/fonts/instrumentsans-var-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Werte ---------------------------------------------------------------- */
:root {
  /* Der Grund ist geöltes Holz im Schatten, nicht Schwarz: alle vier Töne
     tragen dieselbe warme Achse wie die Fotos. Ein neutrales Grau daneben
     sähe sofort blaustichig aus. */
  --grund: #16110d;
  --grund-tief: #1e1813;    /* Fuß und Anfrage: eine Spur heller, ein Band */
  --tinte: #f2ece1;         /* auf dem Grund 16:1 */
  --grau: #a1948a;          /* auf dem Grund ~6,4:1 — nicht dunkler setzen */
  --sand: #473d33;          /* jede Linie dieser Seite */
  --nuss: #cd9159;          /* Links, ein Strich, ein Knopf; ~7:1 */
  --dunkel: #0b0806;        /* das eine tiefere Band: Werkstatt */
  --licht: #f5f0e8;         /* NUR Schrift auf einem Foto — der alte
                               Papierton, der jetzt nur noch dort vorkommt */

  /* Die Bedienelemente des Browsers (Auswahlliste, Dateiknopf, Scrollleiste)
     bringen sonst ihre helle Fassung mit und stehen als weiße Kästen in der
     Seite. */
  color-scheme: dark;

  --rand: 6vw;
  --breite: 1440px;
  --spalte: minmax(0, 1fr);
  --luft: clamp(96px, 12vw, 176px);   /* Abstand ZWISCHEN zwei Abschnitten;
                                          jeder trägt die Hälfte davon */
  --linie: 1px solid var(--sand);

  --weich: cubic-bezier(0.16, 1, 0.3, 1);
  --t-kurz: 260ms;
  --t-mittel: 500ms;
  --t-lang: 900ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Der Kopf klebt oben; Ankersprünge sollen nicht darunter landen. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  /* Kein Rundungsradius auf dieser Seite. Bilder liegen auf dem Papier. */
  background: var(--grund-tief);
}

h1, h2, h3, h4, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a {
  color: var(--nuss);
  text-decoration-color: color-mix(in srgb, var(--nuss) 35%, transparent);
  text-underline-offset: 0.24em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--t-kurz) var(--weich);
}
a:hover { text-decoration-color: var(--nuss); }

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

/* Sand ist im Dunkeln eine Linienfarbe und trägt keine Schrift mehr. */
::selection { background: var(--nuss); color: var(--grund); }

/* --- Bausteine der Typografie --------------------------------------------- */
.serif,
h1, h2, h3, .manifest__satz, .schritt__titel, .zitat p, .tafel__name, .held__satz {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0;
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.12;
}

.kicker {
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}

h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
}

.fliess {
  color: var(--grau);
  max-width: 34em;
}
.fliess + .fliess { margin-top: 1rem; }

/* Textlink mit langem Pfeil. Der Pfeil ist ein SVG im Dokument; er wächst
   beim Zeigen um 6 px. Knöpfe gibt es auf dieser Seite nur im Formular. */
.weiter {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--nuss);
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--nuss) 30%, transparent);
  transition: border-color var(--t-kurz) var(--weich);
}
.weiter:hover { border-bottom-color: var(--nuss); }
.weiter svg { display: block; overflow: visible; }
.weiter svg line,
.weiter svg polyline { transition: transform var(--t-kurz) var(--weich); }
.weiter:hover svg line { transform: scaleX(1.35); }
.weiter:hover svg polyline { transform: translateX(6px); }

/* --- Raster --------------------------------------------------------------- */
.rahmen {
  width: min(var(--breite), 100% - 2 * var(--rand));
  margin-inline: auto;
}

.raster {
  display: grid;
  grid-template-columns: repeat(12, var(--spalte));
  column-gap: clamp(16px, 2vw, 32px);
}

.abschnitt { padding-block: calc(var(--luft) / 2); }
.abschnitt--eng { padding-block: calc(var(--luft) * 0.31); }

/* --- Kopf ----------------------------------------------------------------- */
/* Keine Leiste, kein Hintergrund — bis zum Scrollen. Dann eine 56-px-Zeile
   auf Papier mit einer Haarlinie darunter. Kein Schatten. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-block: clamp(20px, 2.4vw, 34px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: padding-block var(--t-mittel) var(--weich),
              background-color var(--t-mittel) var(--weich),
              border-color var(--t-mittel) var(--weich);
}
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.kopf.ist-klein {
  padding-block: 12px;
  background: var(--grund);
  border-bottom-color: var(--sand);
}

.marke {
  text-decoration: none;
  color: inherit;
  line-height: 1.05;
}
.marke b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 30, "WONK" 1;
  font-weight: 400;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  letter-spacing: -0.01em;
}
.marke span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
  transition: opacity var(--t-mittel) var(--weich);
}
.kopf.ist-klein .marke span { opacity: 0; }

.kopf__nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.kopf__nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tinte);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-kurz) var(--weich), color var(--t-kurz) var(--weich);
}
.kopf__nav a:hover { border-bottom-color: var(--nuss); color: var(--nuss); }
.kopf__tel {
  font-variant-numeric: tabular-nums;
  color: var(--nuss) !important;
  border-bottom-color: color-mix(in srgb, var(--nuss) 30%, transparent) !important;
}
/* Der WhatsApp-Punkt gehört ins Vollbildmenü des Telefons. Im Kopf des
   Rechners stünde er als sechster Textlink in der Reihe und nähme dem
   Satzspiegel die Ruhe. */
.nur-menu { display: none; }

/* Burger + Vollbildmenü (nur Telefon) */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--tinte);
  cursor: pointer;
  padding: 0;
}
.burger i {
  display: block;
  width: 26px;
  height: 1px;
  margin: 6px auto;
  background: currentColor;
  transition: transform var(--t-kurz) var(--weich), opacity var(--t-kurz) var(--weich);
}
.menu-offen .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-offen .burger i:nth-child(2) { opacity: 0; }
.menu-offen .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Held ----------------------------------------------------------------- */
.held { padding-top: clamp(20px, 4vw, 56px); }

.held__satz {
  grid-column: 1 / 8;
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  font-variation-settings: "opsz" 120, "SOFT" 30, "WONK" 0;
  font-weight: 300;
  line-height: 1.16;
  text-wrap: balance;
}
.held__satz em {
  font-style: italic;
  font-variation-settings: "opsz" 120, "SOFT" 40, "WONK" 1;
}

.held__zeile {
  grid-column: 9 / 13;
  align-self: end;
  font-size: 0.9375rem;
  color: var(--grau);
  border-top: var(--linie);
  padding-top: 0.9rem;
}
.held__zeile b {
  display: block;
  font-weight: 500;
  color: var(--tinte);
  letter-spacing: 0.02em;
}

/* Das Werk-Band. Läuft über den rechten Rand hinaus — der Anschnitt lädt zum
   Ziehen ein. Ohne Skript ist es ein waagerechter Scrollbereich, mit Skript
   kommt Trägheit beim Loslassen dazu. Senkrechtes Rad scrollt die Seite. */
.band-halter { margin-top: clamp(32px, 4.5vw, 64px); }

.band {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-left: max(var(--rand), calc((100vw - var(--breite)) / 2));
  padding-right: var(--rand);
  /* Ohne scroll-padding rastet das erste Stück an der Behälterkante ein und
     frisst dabei genau die linke Polsterung — das Band stünde beim Laden
     schon um 77 px verschoben da. */
  scroll-padding-left: max(var(--rand), calc((100vw - var(--breite)) / 2));
  padding-bottom: 8px;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.band::-webkit-scrollbar { display: none; }
.band.ist-gezogen { cursor: grabbing; scroll-snap-type: none; }
.band.ist-gezogen a { pointer-events: none; }

.werk {
  flex: 0 0 auto;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: block;
}
.werk img {
  /* 70 svh ist die Absicht — aber die Bildunterschrift gehört zum Stück und
     darf nicht unter die Falz rutschen. Deshalb zusätzlich gedeckelt auf
     das, was neben Kopf, Satz und Unterschrift übrig bleibt. */
  height: clamp(300px, min(70svh, 100svh - 380px), 700px);
  width: auto;
  object-fit: cover;
  transition: opacity var(--t-kurz) var(--weich);
}
.werk:hover img { opacity: 0.9; }
.werk figcaption,
.bu {
  margin-top: 0.85rem;
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
}
.werk:hover figcaption { color: var(--nuss); }

.band__steuer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.band__hinweis {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
}
.band__pfeile { display: flex; gap: 0; }
.band__pfeile button {
  width: 52px;
  height: 40px;
  border: var(--linie);
  background: none;
  color: var(--tinte);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--t-kurz) var(--weich), color var(--t-kurz) var(--weich);
}
.band__pfeile button + button { border-left: 0; }
.band__pfeile button:hover { background: var(--nuss); color: var(--grund); }
.band__pfeile button:disabled { color: var(--sand); cursor: default; background: none; }

/* --- Manifest ------------------------------------------------------------- */
.manifest__satz {
  grid-column: 1 / 8;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 300;
  line-height: 1.3;
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0;
  text-wrap: pretty;
}
.manifest__satz + .manifest__satz { margin-top: 1.4rem; }
.manifest__bei {
  grid-column: 9 / 13;
  align-self: start;
}
.manifest__bei img { width: 100%; }
.manifest__weiter { grid-column: 1 / 8; margin-top: 2.5rem; }

/* Der eine Strich in Nussbaum: er zeichnet sich beim Erscheinen. */
.strich {
  grid-column: 1 / 13;
  height: 1px;
  background: var(--nuss);
  transform-origin: left center;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.hat-io.js .strich.zeig { transform: scaleX(0); }
.hat-io.js .strich.zeig.ist-da {
  animation: strich 1100ms var(--weich) forwards;
}
@keyframes strich { to { transform: scaleX(1); } }

/* --- Abschnittskopf ------------------------------------------------------- */
.kopfzeile { grid-column: 1 / 13; margin-bottom: clamp(36px, 4.5vw, 72px); }
.kopfzeile h2 { max-width: 16ch; }
.kopfzeile__bei {
  margin-top: 1.2rem;
  max-width: 42ch;
  color: var(--grau);
}
.kopfzeile--geteilt {
  display: grid;
  grid-template-columns: repeat(12, var(--spalte));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: end;
}
.kopfzeile--geteilt h2 { grid-column: 1 / 8; }
.kopfzeile--geteilt .kopfzeile__bei { grid-column: 9 / 13; margin-top: 0; }

/* --- Arbeiten: das Versatz-Raster ----------------------------------------- */
/* Kein symmetrisches Kartenraster. Jedes Stück hat seine eigene Spaltenzahl
   und seinen eigenen Vorlauf nach unten. Die Reihenfolge ist gesetzt, nicht
   berechnet — sie ist das Layout. */
.stuecke { row-gap: 0; }

.stueck { position: relative; }
.stueck figcaption { margin-top: 0.9rem; }
.stueck__auf {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  color: inherit;
  text-align: left;
}
.stueck__auf img { width: 100%; }
.stueck__auf:hover img { opacity: 0.92; }
.stueck__auf img { transition: opacity var(--t-kurz) var(--weich); }
.stueck__auf:hover figcaption { color: var(--nuss); }

.stueck:nth-child(1) { grid-column: 1 / 8; }
.stueck:nth-child(2) { grid-column: 9 / 13; margin-top: 22%; }
.stueck:nth-child(3) { grid-column: 3 / 10; margin-top: clamp(56px, 8vw, 140px); }
.stueck:nth-child(4) { grid-column: 1 / 5; margin-top: clamp(40px, 6vw, 110px); }
/* Nach unten versetzt, nicht nach oben: ein negativer Vorlauf schöbe das
   Bild über die Bildunterschrift des Stücks darüber. */
.stueck:nth-child(5) { grid-column: 6 / 13; margin-top: clamp(96px, 12vw, 220px); }
.stueck:nth-child(6) { grid-column: 2 / 7; margin-top: clamp(56px, 8vw, 150px); }

.stuecke__weiter {
  grid-column: 8 / 13;
  align-self: end;
  margin-top: clamp(56px, 8vw, 150px);
}

/* --- Vorher/Nachher-Schieber ---------------------------------------------- */
/* Zwei Bilder übereinander; das obere wird per clip-path beschnitten. Der
   Clip liegt auf dem BILD, nie auf dem beobachteten Rahmen — sonst hält der
   IntersectionObserver den Rahmen für unsichtbar und er erscheint nie. */
.vergleich {
  position: relative;
  --x: 50%;
}
.vergleich__bilder { position: relative; }
.vergleich__bilder img { width: 100%; display: block; }
.vergleich__oben {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 var(--x));
}
.vergleich__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 1px;
  background: var(--licht);
  pointer-events: none;
}
.vergleich__griff::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid var(--licht);
  background: color-mix(in srgb, var(--tinte) 40%, transparent);
}
.vergleich__marken {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--licht);
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.vergleich__regler {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: none;
}
.vergleich__regler:focus-visible + .vergleich__griff::after { border-width: 2px; }

/* --- Drei Hölzer: die Tafeln ---------------------------------------------- */
.tafeln {
  display: flex;
  gap: 2px;
  grid-column: 1 / 13;
}
.tafel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(420px, 80svh, 780px);
  overflow: hidden;
  transition: flex-grow var(--t-lang) var(--weich);
  isolation: isolate;
}
.tafel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.tafel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 14, 9, 0.82) 0%, rgba(20, 14, 9, 0.32) 45%, rgba(20, 14, 9, 0.08) 100%);
}
.tafel__inhalt {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(20px, 2.2vw, 34px);
  color: var(--licht);
}
.tafel__name {
  font-size: clamp(1.5rem, 2.2vw, 2.25rem);
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 1;
  font-weight: 300;
  color: var(--licht);
}
.tafel__daten {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--licht) 82%, transparent);
}
.tafel__daten div { display: flex; gap: 0.6rem; }
.tafel__daten dt {
  min-width: 5.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  padding-top: 0.15rem;
  color: color-mix(in srgb, var(--licht) 62%, transparent);
}
.tafel__daten dd { margin: 0; }
.tafel__mehr {
  margin-top: 1rem;
  max-width: 32ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--licht) 86%, transparent);
  opacity: 0;
  translate: 0 8px;
  transition: opacity var(--t-mittel) var(--weich), translate var(--t-mittel) var(--weich);
}
.tafel:hover,
.tafel:focus-within { flex-grow: 2; }
.tafel:hover .tafel__mehr,
.tafel:focus-within .tafel__mehr { opacity: 1; translate: 0 0; }

/* Die ganze Tafel ist anklickbar (Tastatur bekommt so einen Fokus, der die
   Tafel weitet); sie führt zum Anfrage-Formular. */
.tafel__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -999em;
  overflow: hidden;
}

/* --- Vom Gespräch zum Stück ----------------------------------------------- */
.schritte { grid-column: 1 / 9; }
.schritt {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 2.4vw, 2.5rem);
  padding-block: clamp(22px, 2.6vw, 34px);
  border-top: var(--linie);
}
.schritt:last-child { border-bottom: var(--linie); }
.schritt__nr {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0;
  font-weight: 300;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1;
  color: var(--sand);
  font-variant-numeric: lining-nums;
}
.schritt__titel {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-variation-settings: "opsz" 64, "SOFT" 30, "WONK" 0;
  font-weight: 300;
  margin-bottom: 0.5rem;
}
.schritt__text { color: var(--grau); max-width: 44ch; }
.schritte__bei {
  grid-column: 10 / 13;
  align-self: start;
  border-top: var(--linie);
  padding-top: clamp(22px, 2.6vw, 34px);
  font-size: 0.9375rem;
  color: var(--grau);
}
.schritte__bei p + p { margin-top: 1rem; }

/* --- Werkstatt: das eine tiefere Band ------------------------------------- */
/* Auf Papier war dies das eine DUNKLE Band. In der dunklen Fassung trägt es
   dieselbe Aufgabe, nur andersherum: es geht als einziger Abschnitt noch
   tiefer als der Grund, damit die Werkstattfotos darin zu leuchten scheinen.
   Die Schriftfarben sind hier bewusst NICHT mehr überschrieben — Tinte und
   Grau stimmen auf --dunkel genauso wie auf --grund (17:1 und 6,8:1). Wer
   hier eine Ausnahme wieder einzieht, hat zwei Orte für eine Entscheidung. */
.werkstatt { background: var(--dunkel); }
.werkstatt__text {
  grid-column: 1 / 6;
  align-self: center;
  /* Das kleine Foto darunter rutscht um denselben Betrag nach oben (siehe
     .werkstatt__klein). Ist der Text das höchste Element der Zeile, liefe es
     ihm sonst ins Wort — bis zum 2026-09-10 lag es über „Kommen Sie vorbei". */
  padding-bottom: calc(clamp(20px, 7vw, 90px) + 1.5rem);
}
.werkstatt__gross { grid-column: 6 / 13; }
.werkstatt__gross img { width: 100%; }
.werkstatt__klein {
  grid-column: 2 / 5;
  margin-top: clamp(-90px, -7vw, -20px);
  position: relative;
  z-index: 2;
}
.werkstatt__klein img { width: 100%; }
.werkstatt__zahlen {
  grid-column: 6 / 13;
  align-self: end;
  margin-top: clamp(28px, 3.4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  border-top: var(--linie);
  padding-top: 1.4rem;
}
.werkstatt__zahlen dt {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0;
  font-weight: 300;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1.1;
}
.werkstatt__zahlen dd {
  display: block;
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  color: var(--grau);
}

/* --- Stimmen -------------------------------------------------------------- */
.stimmen { row-gap: clamp(48px, 6vw, 88px); }
.zitat { grid-column: 1 / 7; }
.zitat:nth-of-type(2) { grid-column: 7 / 13; margin-top: clamp(40px, 6vw, 96px); }
.zitat p {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 1;
  line-height: 1.3;
  text-wrap: pretty;
}
.zitat footer {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: var(--linie);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
}
.sterne {
  grid-column: 1 / 13;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 1.4rem;
  border-top: var(--linie);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem;
  font-size: 0.875rem;
  color: var(--grau);
}
.sterne b { color: var(--tinte); font-weight: 500; }
.sterne svg { color: var(--nuss); }

/* --- Anfrage -------------------------------------------------------------- */
.anfrage { background: var(--grund-tief); }
.anfrage__form { grid-column: 1 / 8; }
.anfrage__bei { grid-column: 9 / 13; }

fieldset { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
legend, .feld__marke {
  padding: 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 1rem;
}

/* Die Stück-Auswahl: Textmarken mit Haarlinie, keine Pillen, keine Kästen.
   Die Auswahl macht die Linie dick und den Text zu Nussbaum. */
.wahl { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl label {
  cursor: pointer;
  font-size: 1.0625rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--sand);
  transition: color var(--t-kurz) var(--weich), border-color var(--t-kurz) var(--weich),
              border-width var(--t-kurz) var(--weich);
}
.wahl label:hover { color: var(--nuss); }
.wahl input:checked + label {
  color: var(--nuss);
  border-bottom: 2px solid var(--nuss);
  padding-bottom: calc(0.3rem - 1px);
}
.wahl input:focus-visible + label { outline: 2px solid var(--nuss); outline-offset: 4px; }

.felder { display: grid; gap: 1.75rem; }
.felder--zwei { grid-template-columns: 1fr 1fr; }
.feld { display: block; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--grau); opacity: 1; } /* Browser-Grau lag bei 3,8:1 auf dem Grund */
.feld > span {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.5rem;
}
.feld input,
.feld textarea,
.feld select {
  width: 100%;
  font: inherit;
  color: var(--tinte);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sand);
  padding: 0.45rem 0;
  border-radius: 0;
  transition: border-color var(--t-kurz) var(--weich);
}
.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  outline: 0;
  border-bottom-color: var(--nuss);
  border-bottom-width: 2px;
  padding-bottom: calc(0.45rem - 1px);
}
.feld textarea { resize: vertical; min-height: 6.5rem; }
.feld--datei input { padding: 0.6rem 0; font-size: 0.9375rem; color: var(--grau); }
/* Der Dateiknopf ist der einzige Kasten, den der Browser mitbringt. Eckig,
   Haarlinie, kein Grau — sonst säße hier ein Fremdkörper. */
.feld--datei input::file-selector-button {
  font: inherit;
  font-size: 0.875rem;
  color: var(--tinte);
  background: none;
  border: 1px solid var(--sand);
  border-radius: 0;
  padding: 0.4rem 1rem;
  margin-right: 1rem;
  cursor: pointer;
}
.feld--datei input::file-selector-button:hover { border-color: var(--nuss); color: var(--nuss); }
.hinweis { font-size: 0.8125rem; color: var(--grau); margin-top: 0.5rem; }
/* Der Hinweis steht als zweites <span> im selben <label> wie die Feldmarke
   und würde deren Versalien erben. */
.feld > .hinweis {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  margin-bottom: 0;
}

/* Der einzige Knopf der Seite. Eckig, Nussbaum, Text auf Papier. */
.knopf {
  display: inline-block;
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--grund);
  background: var(--nuss);
  border: 1px solid var(--nuss);
  padding: 0.95rem 2.2rem;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-kurz) var(--weich), color var(--t-kurz) var(--weich);
}
.knopf:hover { background: var(--tinte); border-color: var(--tinte); }

.antwort {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nuss);
  font-size: 0.9375rem;
  color: var(--tinte);
  max-width: 46ch;
}
.antwort:empty { display: none; }

.karte-fuss { margin-top: 2rem; }
.karte-fuss svg { width: 100%; height: auto; display: block; }
/* Die schematische Karte holt ihre Farben aus der Palette, damit sie einen
   Wechsel des Grundtons mitmacht. Ihr Grund ist derselbe wie der des
   Abschnitts — sichtbar ist nur das Liniennetz, nicht das Feld. */
.karte__grund { fill: var(--grund-tief); }
.karte__wege { fill: none; stroke: var(--sand); stroke-width: 1; }
.karte__strecke { fill: none; stroke: var(--grau); stroke-width: 1; stroke-dasharray: 3 4; }
.karte__punkt { fill: var(--nuss); }
.karte__ring { fill: none; stroke: var(--nuss); stroke-width: 1; }
.karte__schrift { fill: var(--grau); }

.kontaktliste { display: grid; gap: 1.4rem; }
.kontaktliste div { border-top: var(--linie); padding-top: 0.8rem; }
.kontaktliste dt {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.3rem;
}
.kontaktliste dd { margin: 0; font-size: 1.0625rem; }
.kontaktliste dd a { color: var(--nuss); }

/* --- Fuß ------------------------------------------------------------------ */
.fuss {
  background: var(--grund-tief);
  border-top: var(--linie);
  padding-block: clamp(48px, 6vw, 84px) clamp(32px, 4vw, 48px);
  font-size: 0.9375rem;
}
.fuss__raster { row-gap: 2.5rem; }
.fuss__marke { grid-column: 1 / 4; }
.fuss__spalte { grid-column: span 3; }
.fuss h3 {
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.9rem;
}
.fuss ul { display: grid; gap: 0.5rem; }
.fuss a { color: var(--tinte); text-decoration-color: color-mix(in srgb, var(--tinte) 25%, transparent); }
.fuss a:hover { color: var(--nuss); }
.fuss__unten {
  grid-column: 1 / 13;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 1.4rem;
  border-top: var(--linie);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: 0.8125rem;
  color: var(--grau);
}
.fuss__prototyp { max-width: 62ch; }

/* --- Lightbox (eigenes <dialog>, kein Fremdskript) ------------------------ */
dialog.leuchte {
  width: 100vw;
  max-width: 100vw;
  height: 100svh;
  max-height: 100svh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--grund);
  color: var(--tinte);
  overflow: hidden;
}
/* Deutlich tiefer als der Grund — sonst ist auf einer dunklen Seite kaum zu
   sehen, dass überhaupt etwas darüber liegt. */
dialog.leuchte::backdrop { background: rgba(6, 4, 3, 0.86); }
.leuchte__innen {
  display: grid;
  /* minmax(0, 1fr), nicht 1fr: sonst wäre der Boden der mittleren Zeile die
     Mindesthöhe des Bildes und ein hohes Stück schöbe sich über den Fuß. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  padding: clamp(14px, 2vw, 28px) var(--rand);
  gap: clamp(12px, 1.6vw, 20px);
}
.leuchte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: var(--linie);
  padding-bottom: 0.8rem;
}
.leuchte__zaehler {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}
.leuchte__zu {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--tinte);
  cursor: pointer;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--sand);
}
.leuchte__zu:hover { color: var(--nuss); border-bottom-color: var(--nuss); }
.leuchte__buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: clamp(20px, 3vw, 48px);
  min-height: 0;
  align-items: center;
}
.leuchte__bild {
  position: relative;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
/* Absolut in den Rahmen gelegt statt max-height: 100% — als Rasterkind in einer
   auto-Zeile löste sich das Prozent nicht auf, und jedes Hochformat (928 × 1152)
   ragte 36 % unter den Rahmen (2026-09-12). So passt jedes Stück hinein. */
.leuchte__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.leuchte__text { align-self: center; }
.leuchte__text h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 1;
  margin-bottom: 1rem;
}
.leuchte__werk {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  font-size: 0.875rem;
}
.leuchte__werk div { display: flex; gap: 0.8rem; border-top: var(--linie); padding-top: 0.45rem; }
.leuchte__werk dt {
  min-width: 6rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
  padding-top: 0.15rem;
}
.leuchte__werk dd { margin: 0; }
.leuchte__text p { color: var(--grau); font-size: 0.9375rem; }
.leuchte__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: var(--linie);
  padding-top: 0.8rem;
}
.leuchte__blaettern { display: flex; gap: 0; }
.leuchte__blaettern button {
  width: 52px;
  height: 40px;
  border: var(--linie);
  background: none;
  color: var(--tinte);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.leuchte__blaettern button + button { border-left: 0; }
.leuchte__blaettern button:hover { background: var(--nuss); color: var(--grund); }
.leuchte__hinweis {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
}

/* Ohne Skript gibt es keine Lightbox — dann ist das Stück einfach ein Bild.
   Der Knopf bleibt bedienbar, sagt aber nichts Falsches: script.js gibt ihm
   erst dann `aria-haspopup`, wenn es die Leuchte wirklich gibt. */
.leuchte:not([open]) { display: none; }

/* --- Kleine Seiten (Impressum, Datenschutz, 404) -------------------------- */
.text-seite { grid-column: 2 / 10; }
.text-seite h1 { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 1.5rem; }
.text-seite h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
}
.text-seite p,
.text-seite li { color: var(--grau); max-width: 62ch; }
.text-seite p + p { margin-top: 1rem; }
.text-seite ul { margin-top: 0.8rem; display: grid; gap: 0.45rem; }
.text-seite ul li { padding-left: 1.2rem; position: relative; }
.text-seite ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 1px;
  background: var(--sand);
}
.text-seite__vorlauf {
  border-top: 1px solid var(--nuss);
  padding-top: 1rem;
  margin-bottom: 2.5rem;
  color: var(--tinte) !important;
  max-width: 62ch;
}
.fehler { text-align: left; }
.fehler__nr {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  font-weight: 300;
  font-size: clamp(5rem, 16vw, 13rem);
  line-height: 0.9;
  color: var(--sand);
}

/* --- Erscheinen beim Scrollen --------------------------------------------- */
/* Animation, kein Übergang; nach animationend legt script.js sie ab
   (ist-fertig), damit `forwards` kein `translate` festhält. */
.hat-io.js .zeig { opacity: 0; }
.hat-io.js .zeig.ist-da { animation: text-auf var(--t-mittel) var(--weich) forwards; }
.hat-io.js .zeig--bild { opacity: 1; }
.hat-io.js .zeig--bild img { opacity: 0; }
.hat-io.js .zeig--bild.ist-da img { animation: bild-auf var(--t-lang) var(--weich) forwards; }
.hat-io.js .zeig.ist-fertig,
.hat-io.js .zeig--bild.ist-fertig img { animation: none; opacity: 1; }

@keyframes text-auf {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes bild-auf {
  from { opacity: 0; scale: 1.04; }
  to { opacity: 1; scale: 1; }
}

/* Staffel: zweites, drittes Kind kommen später. */
.hat-io.js .zeig--2.ist-da { animation-delay: 110ms; }
.hat-io.js .zeig--3.ist-da { animation-delay: 220ms; }

/* --- Telefon und Tablet --------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --rand: 5vw; }
  .held__satz { grid-column: 1 / 10; }
  .held__zeile { grid-column: 1 / 8; margin-top: 2rem; }
  .manifest__satz { grid-column: 1 / 10; }
  .manifest__bei { grid-column: 1 / 8; margin-top: 2.5rem; }
  .manifest__weiter { grid-column: 1 / 10; }
  .kopfzeile--geteilt h2 { grid-column: 1 / 10; }
  .kopfzeile--geteilt .kopfzeile__bei { grid-column: 1 / 10; margin-top: 1.2rem; }
  .schritte { grid-column: 1 / 10; }
  .schritte__bei { grid-column: 1 / 10; margin-top: 2.5rem; }
  .werkstatt__text { grid-column: 1 / 7; }
  .werkstatt__gross { grid-column: 7 / 13; }
  .werkstatt__klein { grid-column: 1 / 5; }
  .werkstatt__zahlen { grid-column: 5 / 13; }
  .anfrage__form { grid-column: 1 / 9; }
  .anfrage__bei { grid-column: 1 / 9; margin-top: 3rem; }
  .zitat, .zitat:nth-of-type(2) { grid-column: 1 / 10; margin-top: 0; }
  .zitat:nth-of-type(2) { margin-top: clamp(40px, 6vw, 72px); }
  .text-seite { grid-column: 1 / 13; }
  .fuss__marke { grid-column: 1 / 7; }
  .fuss__spalte { grid-column: span 6; }
  /* Untereinander: Bild in fester Höhe, darunter der ganze Text, dann der Fuß —
     und die Leuchte selbst scrollt. Vorher stand der Text in einem 34-svh-Kasten,
     der still innen scrollte, und endete sichtbar mitten im Satz. */
  dialog.leuchte { overflow-y: auto; }
  .leuchte__innen { height: auto; min-height: 100%; grid-template-rows: auto auto auto; }
  .leuchte__buehne { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52svh auto; align-items: start; }
  .leuchte__text { align-self: start; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 68px; }
  .burger { display: block; }

  /* Vollbildmenü auf Papier. Punkte in Fraunces groß. */
  .kopf__nav {
    position: fixed;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0;
    padding: 0 var(--rand);
    background: var(--grund);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-kurz) var(--weich), visibility var(--t-kurz);
  }
  .menu-offen .kopf__nav { opacity: 1; visibility: visible; }
  .kopf__nav a {
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0;
    font-weight: 300;
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.5;
    border-bottom: 0;
  }
  .kopf__tel {
    font-family: "Instrument Sans", sans-serif !important;
    font-size: 1.125rem !important;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: var(--linie) !important;
    width: 100%;
  }
  .nur-menu {
    display: block;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: 1.125rem !important;
    margin-top: 0.6rem;
  }
  .kopf { z-index: 80; }
  .burger { position: relative; z-index: 90; }

  .werk img { height: clamp(300px, 58svh, 520px); }
  .band { scroll-snap-type: x mandatory; }

  /* Versatz auf dem Telefon: eine Spalte, aber nicht bündig. */
  .stueck:nth-child(n) {
    grid-column: 1 / 13;
    margin-top: clamp(40px, 9vw, 64px);
  }
  .stueck:nth-child(1) { margin-top: 0; }
  .stueck:nth-child(2),
  .stueck:nth-child(4) { grid-column: 3 / 13; }
  .stueck:nth-child(6) { grid-column: 1 / 11; }
  .stuecke__weiter { grid-column: 1 / 13; margin-top: clamp(40px, 9vw, 64px); }

  /* Die drei Hölzer stehen untereinander und sind alle offen. */
  .tafeln { flex-direction: column; gap: 2px; }
  .tafel { height: clamp(340px, 62svh, 520px); flex: 1 1 auto; }
  .tafel__mehr { opacity: 1; translate: 0 0; }

  .werkstatt__text,
  .werkstatt__gross,
  .werkstatt__klein,
  .werkstatt__zahlen { grid-column: 1 / 13; }
  .werkstatt__gross { margin-top: 2.5rem; }
  .werkstatt__text { padding-bottom: 0; }
  .werkstatt__klein { margin-top: 2rem; grid-column: 1 / 9; }
  .werkstatt__zahlen { margin-top: 2.5rem; }

  .felder--zwei { grid-template-columns: 1fr; }
  .fuss__marke, .fuss__spalte { grid-column: 1 / 13; }
  .schritt { grid-template-columns: 3rem 1fr; }

  /* Ab hier ist das Raster kein Raster mehr, sondern eine Spalte. Die Werte
     aus der 1080er-Stufe (1 / 10, 1 / 9) sind dort Satzspiegel — auf 390 px
     sind sie ein Viertel Bildschirm, den niemand nutzt: der Satz bricht nach
     fünf Wörtern um, und die Eingabefelder werden 229 px breit. Lauftext,
     Überschriften und das Formular nehmen deshalb die ganze Breite; den
     bewussten Versatz behalten allein die Bilder (.stueck, .manifest__bei,
     .werkstatt__klein). */
  .held__satz,
  .held__zeile,
  .manifest__satz,
  .manifest__weiter,
  .kopfzeile--geteilt h2,
  .kopfzeile--geteilt .kopfzeile__bei,
  .schritte,
  .schritte__bei,
  .anfrage__form,
  .anfrage__bei,
  .zitat,
  .zitat:nth-of-type(2) { grid-column: 1 / 13; }
}

@media (max-width: 520px) {
  .held__satz { font-size: clamp(1.5rem, 7vw, 2rem); }
  .werk img { height: 52svh; }
  .leuchte__innen { padding-inline: 5vw; }
}

/* --- Ruhe ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .hat-io.js .zeig,
  .hat-io.js .zeig--bild img { opacity: 1 !important; }
  .hat-io.js .strich.zeig { transform: none !important; }
  .tafel__mehr { opacity: 1; translate: 0 0; }
}

/* --- Kleinteile ----------------------------------------------------------- */

/* Sprungmarke für die Tastatur. Sitzt außerhalb des Bildes, bis sie den
   Fokus bekommt. */
.springmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tinte);
  color: var(--grund);
  padding: 0.8rem 1.4rem;
  text-decoration: none;
}
.springmarke:focus { left: 0; }

/* Die Stücke im Werk-Band sind Knöpfe (sie öffnen die Leuchte) und müssen
   deshalb ihr Knopf-Aussehen ablegen. */
.werk {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.werk .bu { display: block; transition: color var(--t-kurz) var(--weich); }
.werk:hover .bu { color: var(--nuss); }

/* Der lange Pfeil wächst nach rechts, nicht aus der Mitte. */
.weiter svg line { transform-origin: left center; }
.weiter svg polyline { transform-origin: right center; }

.hinweis { display: block; }

/* Offenes Vollbildmenü: die Seite dahinter soll nicht mitscrollen. */
.menu-offen, .leuchte-offen { overflow: hidden; } /* hinter dem Menü und hinter der Leuchte scrollt die Seite nicht mit */

/* --- Druck ---------------------------------------------------------------- */
/* Gedruckt wird auf Papier, und Papier ist weiß. Die dunkle Fassung muss
   dafür umgedreht werden — ein bloßes `background: #fff` ließe helle
   Schrift auf weißem Grund zurück, also unsichtbar. */
@media print {
  .kopf, .band__steuer, .burger, dialog.leuchte { display: none; }
  :root {
    --grund: #fff;
    --grund-tief: #fff;
    --dunkel: #fff;
    --tinte: #1f1a15;
    --grau: #4a423b;
    --sand: #b9ac97;
    --nuss: #6f4322;
    --licht: #1f1a15;
    color-scheme: light;
  }
  body { background: #fff; color: #1f1a15; }
  .tafel::after { display: none; }
  .tafel__inhalt { position: static; color: #1f1a15; }
}

/* --- Cookie-Banner (seit 2026-09-11) ---------------------------------------
   Das Markup baut cookies.js — dieselbe Datei auf allen fünf Handwerk-Seiten.
   Hier nur das Aussehen, in der Sprache dieser Seite: der etwas hellere Grund
   des Fußes, eine Sandlinie, Fraunces im Titel, Nussbaum für Knöpfe und
   Schalter, keine Rundung am Rahmen, kein Schatten.
   „Alle akzeptieren" und „Nur notwendige" sind gleich stark — Ablehnen darf
   nicht mühsamer sein als Zustimmen. Unten links, auf dem Telefon unten über
   die volle Breite. `[hidden]` braucht bei `.cookie__details` eine eigene
   Regel, weil `display: grid` die des Browsers schlägt. */
.cookie { position: fixed; z-index: 300; left: var(--rand); bottom: 1.5rem; width: min(31rem, calc(100% - 2 * var(--rand))); background: var(--grund-tief); color: var(--tinte); border: var(--linie); font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; opacity: 0; translate: 0 1rem; transition: opacity .4s var(--weich), translate .4s var(--weich); }
.cookie--da { opacity: 1; translate: 0 0; }
/* Die Absatzabstände der Seite gelten hier nicht — das Raster setzt sie. */
.cookie p { margin: 0; }
.cookie__innen { display: grid; gap: 1rem; padding: 1.6rem 1.7rem 1.3rem; max-height: calc(100svh - 3rem); overflow-y: auto; }
.cookie__titel { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.01em; }
.cookie__text { font-size: .92rem; line-height: 1.6; color: var(--grau); }
.cookie__text a { color: var(--nuss); }
.cookie__details { display: grid; border-top: var(--linie); }
.cookie__details[hidden] { display: none; }
.cookie__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding-block: .85rem; border-bottom: var(--linie); }
label.cookie__zeile { cursor: pointer; }
.cookie__art b { display: block; font-weight: 600; font-size: .92rem; }
.cookie__art span { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.5; color: var(--grau); }
.cookie__immer { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.cookie__schalter { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 2.6rem; height: 1.4rem; margin: 0; border: 1px solid var(--grau); border-radius: 999px; background: transparent; cursor: pointer; transition: background-color var(--t-kurz) var(--weich), border-color var(--t-kurz) var(--weich); }
.cookie__schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.4rem - 8px); height: calc(1.4rem - 8px); border-radius: 50%; background: var(--grau); transition: translate var(--t-kurz) var(--weich), background-color var(--t-kurz) var(--weich); }
.cookie__schalter:checked { background: var(--nuss); border-color: var(--nuss); }
.cookie__schalter:checked::after { translate: 1.2rem 0; background: var(--grund); }
.cookie__schalter:focus-visible, .cookie__knopf:focus-visible, .cookie__text a:focus-visible { outline: 1px solid var(--nuss); outline-offset: 3px; }
.cookie__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie__knopf { flex: 1 1 9rem; padding: .85rem 1rem; border: 1px solid var(--nuss); background: var(--nuss); color: var(--grund); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background-color var(--t-kurz) var(--weich), border-color var(--t-kurz) var(--weich); }
.cookie__knopf:hover { background: var(--tinte); border-color: var(--tinte); }
.cookie__knopf--leise { flex: 0 0 auto; background: transparent; border-color: transparent; color: var(--tinte); text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: .25em; }
.cookie__knopf--leise:hover { background: transparent; border-color: transparent; color: var(--nuss); }
.cookie--offen .cookie__knopf--leise { flex: 1 1 100%; border-color: var(--nuss); text-decoration: none; }
.cookie__prototyp { font-size: .75rem; line-height: 1.5; color: var(--grau); }
@media (max-width: 600px) {
  .cookie { left: 0; right: 0; bottom: 0; width: auto; border-width: 1px 0 0; }
  .cookie__innen { padding: 1.3rem var(--rand) 1.1rem; max-height: 85svh; }
}
.cookie-link { appearance: none; padding: 0; border: 0; background: none; font: inherit; color: var(--tinte); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tinte) 25%, transparent); cursor: pointer; }
.cookie-link:hover { color: var(--nuss); }