/* ============================================================
   the hatfairy — Entwurfsfassung
   Konzept: „Das Skizzenbuch der Modistin“
   Papier & Tinte, gedämpftes Waldgrün als Akzent, gezeichnete Linien.
   ============================================================ */

:root {
  /* Papiere */
  --paper:      #f6f0e4;   /* warmes Filz-Creme */
  --paper-deep: #efe6d3;   /* Skizzenbuch-Karton */
  --paper-card: #faf5e9;   /* helles Blatt, cremig — nie Reinweiß */

  /* Tinte & Töne */
  --ink:        #2b2620;   /* warmes Anthrazit, kein Schwarz */
  --ink-soft:   #5c544a;
  --line:       #cabfa9;   /* Bleistiftlinie */

  /* Akzente — abgenommen von Veronikas eigenem Aquarell (Salbei · Mint · Türkis) */
  --wald:       #256459;   /* Salbei-Teal aus dem Aquarell — der Leitton (6,1:1 auf Papier) */
  --wald-dark:  #1a4a44;   /* tiefes Teal: Knopf beim Überfahren, Upcycling-Tafel */
  /* Der Grund von Kapitel 04. Abgenommen aus dem unteren Zehntel von Veronikas
     Aquarell (Bild 32) — dort liegen ihre dunkelsten Flächen wirklich.
     --wald-dark war mit 19,6 % Helligkeit dunkler als JEDER Farbpixel des
     Bildes und las sich dadurch als Tannengrün statt als Türkis. */
  --anlass-grund: #316662;
  /* Die Upcycling-Tafel (Kap. 05): Krempe im Schatten aus demselben Aquarell,
     eine Spur tiefer als Kap. 04 — Türkis, kein Grün. Gewählt am 18.08. */
  --leben-grund:  #215f58;
  --wald-paper: #e4efea;   /* Minthauch, gewaschen wie nasses Papier */
  --mint:         #7cbcae; /* der mittlere Aquarellton */
  --tuerkis:      #35a49c; /* die türkisen Flecken, sparsam */
  --honig:        #b0833b; /* Holz-Hutform, Messing — und ihre Ockertupfer.
                              02.08. eine Spur abgedunkelt: als Schriftfarbe auf
                              dem Cremepapier lag der alte Ton bei 2,73:1 und
                              damit unter der Lesbarkeitsgrenze; jetzt 3,01:1. */
  --ziegel:       #a4482f; /* der rote Perlenhut, sparsam */
  --petrol-farbe: #16605c; /* Materialfarbe: der handbemalte Hut */

  /* ---- Rollenfarben: eine Rolle, ein Ton ----------------------------------
     Vorher hatte dieselbe Rolle je nach Kapitel eine andere Farbe — das
     Kursiv in den Überschriften kam in vier Tönen vor, die Kartentitel in
     dreien. Ursache waren Einzelwerte, die verstreut im Stylesheet standen
     und nirgends zusammenhingen. Ab hier gilt: jede Rolle hat genau zwei
     Werte — einen für helles Papier, einen für dunklen Grund. Sonst nichts. */
  --akzent:      var(--wald);              /* Akzente auf Papier: Kursiv in
                                              Überschriften, Kartentitel */
  --akzent-hell: #e3c98f;                  /* dieselben Akzente auf dunklem
                                              Grund — helles Sandgold */
  --text-hell:   rgba(246, 240, 228, .95); /* Fließtext und Vorspann auf
                                              dunklem Grund, eine Stufe */

  /* Typografie */
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Alegreya Sans", "Segoe UI", sans-serif;
  --hand:  "Caveat", cursive;

  --maxw: 1120px;
  /* Zwei Textgrößen für die ganze Seite. Vorher hatte jedes Kapitel seine
     eigene: Vorspann zwischen 17,2 und 22,7px, Fließtext zwischen 15,8 und
     17,0px, und die Anlässe sogar in einer anderen Schriftfamilie. */
  --vorspann: clamp(1.12rem, .45vw + .82rem, 1.34rem);
  --fliess:   clamp(1.02rem, .25vw + .90rem, 1.14rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1.075rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

/* Papierton: hauchfeine Struktur ohne teure Filter —
   zwei überlagerte, kaum sichtbare Punktraster. */
body {
  background-image:
    radial-gradient(rgba(43, 38, 32, .028) 1px, transparent 1.5px),
    radial-gradient(rgba(43, 38, 32, .018) 1px, transparent 1.5px);
  background-size: 26px 26px, 17px 17px;
  background-position: 0 0, 9px 13px;
}

::selection { background: var(--wald); color: var(--paper-card); }

/* Leuchtstift: ein echter Markerstrich, kein Kasten.
   Satter Ansatz, zur Mitte dünner werdende Farbe, schiefe runde Enden —
   und mix-blend multiply lässt Tinte und Papierkorn durchscheinen,
   als läge die Farbe wirklich AUF dem Blatt. */
mark {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(100deg,
    rgba(222, 170, 62, .10) 0%,
    rgba(222, 170, 62, .62) 3%,
    rgba(222, 170, 62, .40) 22%,
    rgba(222, 170, 62, .28) 52%,
    rgba(222, 170, 62, .44) 82%,
    rgba(222, 170, 62, .58) 96%,
    rgba(222, 170, 62, .12) 100%);
  border-radius: .6em .22em .7em .28em;
  padding: .08em .32em;
  margin: -.08em -.28em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  mix-blend-mode: multiply;
}

a { color: var(--wald); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--wald);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 420; letter-spacing: -0.01em; }
h2 em, h1 em, h2 i { font-style: italic; }

/* ---------- Kopfzeile ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  margin: 0 auto;
  padding: 1.05rem max(1.5rem, calc((100% - var(--maxw)) / 2 + 1.5rem)) .95rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: box-shadow .3s ease, padding .3s ease;
}
.topbar.scrolled {
  padding-top: .85rem; padding-bottom: .7rem;
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(43, 38, 32, .5);
}
section[id] { scroll-margin-top: 5.5rem; }
/* Die Wortmarke ist Veronikas eigene Handschrift — kein gesetzter Text. */
.wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.wordmark img {
  height: clamp(62px, 6.2vw, 84px);
  width: auto;
  transition: height .3s ease, opacity .2s ease;
}
.topbar.scrolled .wordmark img { height: clamp(50px, 4.9vw, 62px); }
.topnav { display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap; }
.topnav a {
  font-size: .95rem; color: var(--ink-soft);
  text-decoration: none; letter-spacing: .02em;
}
.topnav a:hover { color: var(--wald); }
.nav-cta {
  color: var(--wald) !important;
  border-bottom: 1px solid var(--wald);
  padding-bottom: 1px;
}

/* ---------- Buttons ---------- */
.btn, .btn-ghost {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: .02em;
  text-decoration: none;
  padding: .78rem 1.6rem;
  border-radius: 2px;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn {
  background: var(--wald); color: var(--paper-card);
  border: 1px solid var(--wald);
}
.btn:hover { background: var(--wald-dark); border-color: var(--wald-dark); transform: translateY(-1px); }
.btn-ghost {
  color: var(--ink); border: 1px solid var(--ink);
}
.btn-ghost:hover { color: var(--wald); border-color: var(--wald); transform: translateY(-1px); }

/* ---------- Hero: der Anhänger und die Randzeile ----------
   Die Einladung ist kein Balken, sondern der Warenanhänger, der an jedem
   fertigen Stück hängt: zugespitztes Ende, Messingöse, auf dem Papier
   liegend. Beim Überfahren schwingt er um die Öse, als hinge er am Faden.
   Der Instagram-Verweis steht bewusst DARUNTER und ist nur eine
   handschriftliche Zeile — keine zweite Schaltfläche. Damit verschwindet
   die Knopfleiste, die jede zweite Website hat. */
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.9rem;
}
/* Der Knopf ist ein Stück Ripsband: die feine Querrippe des Gewebes und
   das eingeschnittene Ende, wie es an jedem Hutband sitzt. Davor der
   Bleistift — dasselbe Prinzip wie beim Instagram-Zeichen darunter.
   Die gestrichelte Naht, die alle anderen Knöpfe beim Überfahren zeigen,
   entfällt hier: Sie würde an der Einkerbung abgeschnitten. */
.hero-actions .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  min-height: 54px;
  padding: 0 2.7rem 0 1.8rem;
  border: none;
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .075) 0 2px, rgba(0, 0, 0, .055) 2px 4px),
    linear-gradient(178deg, #2b7266, #215f58 60%, #1c534d);
  color: var(--paper-card);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: .012em;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - 17px) 50%, 100% 100%, 0 100%);
  filter: drop-shadow(0 4px 8px rgba(43, 38, 32, .28));
  transform: rotate(-.5deg);
  transition: transform .4s cubic-bezier(.34, 1.5, .5, 1), filter .25s ease;
}
.hero-actions .btn::before { content: none; }
.hero-actions .btn::after  { content: none; }
.hero-actions .btn .btn-zeichen {
  width: 1.32em;
  height: 1.32em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-actions .btn:hover,
.hero-actions .btn:focus-visible {
  transform: rotate(.3deg) translateY(-1px);
  filter: drop-shadow(0 8px 14px rgba(43, 38, 32, .34));
}

/* Die Randzeile: Grundschrift, das Instagram-Zeichen davor, darunter
   dieselbe Steppnaht wie am Knopf — damit man auf einen Blick sieht,
   dass es ein Link ist. Keine Handschrift: die steht schon im Schriftzug. */
.hero-insta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-left: .15rem;
  padding-bottom: .4rem;
  font-family: var(--sans);
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--wald);
  text-decoration: none;
  transition: color .22s ease;
}
.hero-insta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background-image: linear-gradient(90deg, currentColor 58%, transparent 0);
  background-size: 10px 1.5px;
  opacity: .8;
  transition: opacity .22s ease;
}
.hero-insta:hover,
.hero-insta:focus-visible { color: var(--ziegel); }
.hero-insta:hover::after { opacity: 1; }
.insta-zeichen {
  width: 1.42em;
  height: 1.42em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.insta-zeichen .punkt { fill: currentColor; stroke: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-actions .btn { transition: none; }
  .hero-actions .btn:hover { transform: rotate(-.5deg); }
}

/* Unter 1000 px steht der Hero gestapelt: Der Skizzenfilm bekommt eine
   eigene Lage — rechts angeschnitten, blasser, hinter dem Text (der liegt
   seit der Kommentar-Reparatur sicher davor). Sichtbar, aber im Hintergrund. */
@media (max-width: 999px) {
  .film-schleier {
    left: auto;
    right: -16%;
    width: 82%;
    top: 4%;
    opacity: .38;
  }
}

/* ---------- Handschrift-Notizen ---------- */
.handnote {
  font-family: var(--hand);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--ink-soft);
  transform: rotate(-2.2deg);
}
.handnote-v {
  font-family: var(--hand);
  font-size: 1.25rem;
  color: var(--honig);
  writing-mode: vertical-rl;
  white-space: nowrap;
  position: absolute;
  right: .8rem; top: 50%;
  transform: translateY(-50%);
}

/* ---------- Hero ---------- */
/* Der Hero nimmt die ganze Bühnenbreite — Beschriftung links,
   Randnotiz rechts, dazwischen Luft statt Containerkante. */
.hero {
  position: relative;
  max-width: none;
  margin: 0 auto;
  padding: 4.2rem clamp(1.5rem, 5vw, 5.5rem) 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.kicker {
  font-size: .9rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--honig);
  margin-bottom: 1.4rem;
}
.hero h1 {
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  line-height: 1.04;
  font-weight: 380;
  margin-bottom: 2.9rem;      /* Luft zum Vorspann */
}
.wald { color: var(--wald); font-style: italic; }
.lede {
  font-size: 1.18rem;
  max-width: 34em;
  color: var(--ink-soft);
  margin-bottom: 3.4rem;      /* Luft zum Anhänger */
}
/* Die Anordnung der Hero-Aktionen steht weiter oben beim Anhänger. */
/* Der Zweitlink ist kein zweiter Knopf mehr, sondern dieselbe handschriftliche
   Einladung wie im Fuß — ein Knopf, eine Handlung, daneben der Blick in die
   Werkstatt. */
/* Die frühere freistehende Zeile ist zum Band geworden — siehe oben. */

/* ---------- SVG-Skizzenstil ---------- */
/* Zeichnen-Animation beim Laden */
@keyframes appear { to { opacity: 1; } }

/* ---------- Stichlinie als Trenner ---------- */
.stitch {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 1px;
  background-image: linear-gradient(90deg, var(--honig) 0 10px, transparent 10px 18px);
  background-size: 18px 1px;
  opacity: .65;
}

/* ---------- Sektionsköpfe ---------- */
section { position: relative; }
.sec-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 2.5rem;
}
.sec-no {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  letter-spacing: .12em;
  color: var(--honig);
  display: inline-block;
  margin-bottom: .8rem;
}
/* Auf den Fotobühnen steht die Kapitelnummer in Gold — dort ist der Grund
   dunkel genug (4,5:1). Auf dem helleren Türkis von Nummer vier trägt weder
   Gold (2,1:1) noch das Sandgold der Überschrift (4,1:1) weit genug für eine
   Schrift dieser Größe. Deshalb dort Creme, wie die Überschrift daneben. */
.sec-no.hell { color: var(--paper-card); }
.sec-head h2, .atelier-text h2, .anfrage-inner h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  margin-bottom: 1.1rem;
}
/* Der kursive Teil jeder Kapitelüberschrift trägt die Akzentfarbe. Ohne
   diese Regel erbt er auf den Papierblättern einfach die Tintenfarbe und
   fällt aus der Reihe — genau das war in „Der Weg“ der Fall. Auf dunklem
   Grund überschreiben die Bühnenregeln mit dem hellen Akzent. */
.sec-head h2 em, .atelier-text h2 em, .anfrage-inner h2 em { color: var(--akzent); }
.sec-lede {
  max-width: 38em;
  color: var(--ink-soft);
  font-size: 1.12rem;
}

/* ---------- Rahmen / Platzhalter ---------- */
.frame {
  background: var(--paper-card);
  border: 1px solid var(--line);
  padding: .9rem;
  box-shadow: 4px 5px 0 rgba(43, 38, 32, .07);
}
.frame figcaption {
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: .7rem;
  text-align: center;
}
.frame-sketch { transform: rotate(-1.1deg); }
.frame-photo  { transform: rotate(.8deg); }

.frame img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 3.4;
  object-fit: cover;
}
.frame.tall img { aspect-ratio: 3 / 3.8; }
.frame img.pos-r { object-position: 62% center; }

.placeholder .ph-inner {
  aspect-ratio: 3 / 3.4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .5rem;
  border: 1.5px dashed var(--line);
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 14px,
      rgba(43, 38, 32, .025) 14px 28px);
}
.placeholder.tall .ph-inner { aspect-ratio: 3 / 3.8; }
.ph-label {
  font-family: var(--hand);
  font-size: 1.3rem;
  color: var(--honig);
}
.ph-what {
  font-size: .9rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 0 1.2rem;
}

/* ---------- 01 Vom Strich zum Stück ---------- */
.pairs {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  display: grid;
  gap: 4.5rem;
}
.pair {
  display: grid;
  grid-template-columns: minmax(0, 5fr) auto minmax(0, 5fr);
  gap: 1.6rem;
  align-items: center;
  max-width: 880px;
}
.pair-flip { margin-left: auto; }
.pair-arrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--wald);
}
.pair-note {
  grid-column: 1 / -1;
  justify-self: center;
  text-align: center;
  margin-top: -.4rem;
}

/* ---------- 02 Werkschau ---------- */
.werkschau { background: var(--paper-deep); }
.werke {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}
.werk:nth-child(2) { transform: translateY(1.6rem); }
.werk h3 {
  font-size: 1.35rem;
  margin-top: 1.2rem;
  font-weight: 460;
}
.werk-meta {
  font-size: .92rem;
  color: var(--ink-soft);
  margin-top: .25rem;
}
.jahr {
  font-family: var(--serif);
  font-style: italic;
  color: var(--honig);
}
/* Ein Stück, drei Blicke */
.blicke {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 0;
}
.blicke-titel { margin-bottom: 1.4rem; }
.blicke-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.blicke .frame { transform: none; }
.blicke .frame:nth-child(1) { transform: rotate(-.7deg); }
.blicke .frame:nth-child(3) { transform: rotate(.7deg); }
.blicke .frame img { aspect-ratio: 1 / 1; }

.werk-fussnote {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  text-align: right;
}

/* ---------- 03 Der Weg ---------- */
.schritte {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem 1.5rem 2.5rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.2rem;
  counter-reset: schritt;
  position: relative;
}
/* Der gestrichelte Faden zwischen den Schritten ist entfallen — er kam
   nur in diesem Kapitel vor und hatte sonst nirgends eine Entsprechung. */
.schritt { position: relative; padding-top: 4.4rem; }
.pin {
  position: absolute; top: 1rem; left: 0;
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-card);
  border: 2.4px solid var(--honig);       /* so stark wie der Faden — die vier
                                             Punkte sitzen auf derselben Naht */
  color: var(--wald);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  box-shadow: 2px 3px 0 rgba(43, 38, 32, .08);
}
.schritt h3 { font-size: 1.3rem; font-weight: 460; margin-bottom: .55rem; }
.schritt p { font-size: .99rem; color: var(--ink-soft); hyphens: manual; -webkit-hyphens: manual; }

.entwurf-video {
  max-width: 360px;
  margin: 2.5rem auto 4rem;
  transform: rotate(-.6deg);
}
.entwurf-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.zeit {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}
.zeit p {
  max-width: 46em;
  background: var(--wald-paper);
  border-left: 3px solid var(--wald);
  padding: 1.2rem 1.6rem;
  font-size: 1.05rem;
}

/* ---------- 04 Atelier ---------- */
.atelier { background: var(--paper-deep); }
.atelier-hero {
  max-width: var(--maxw);
  width: calc(100% - 3rem);
  margin: 4.5rem auto 0;
  transform: rotate(-.4deg);
}
.atelier-hero img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 28% center;
}
.atelier-hero + .atelier-grid { padding-top: 3.5rem; }
.atelier-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 5rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 4rem;
  align-items: start;
}
.atelier-text p { margin-bottom: 1.2rem; max-width: 36em; }
.atelier-text p strong { color: var(--wald); font-weight: 700; }

.glossar {
  margin-top: 2.2rem;
  border-top: 1px solid var(--line);
}
.glossar div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.glossar dt {
  font-family: var(--serif);
  font-style: italic;
  color: var(--wald);
  font-size: 1.06rem;
}
.glossar dd { color: var(--ink-soft); font-size: .98rem; }

/* Hausbesuche — als eigener Gedanke abgesetzt, nicht als weiterer Kasten */
.hausbesuch {
  margin-top: 1.4rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--honig);
  hyphens: manual;
  -webkit-hyphens: manual;
}
.hausbesuch strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--wald);
}

.atelier-bilder { display: grid; gap: 1.2rem; }
.atelier-bilder .offset { margin-left: 18%; margin-top: .6rem; }
/* Die Randnotiz steht unter dem Video und gehört zu ihm — also auf dessen
   Achse. Der Einzug von 4 % schob sie daneben; im Blattmodus war sie längst
   zentriert, überall sonst hing sie links. */
.atelier-note { margin: 0; text-align: center; }

/* ---------- 04 Anlässe — Veronikas Türkis trägt die Seite ----------
   Der Untergrund bleibt: --wald-dark ist der tiefste Schattenton aus ihrem
   eigenen Aquarell (Bild 32), Farbwinkel 172° — Türkis, kein Grün; die
   Variablennamen stammen noch aus der ersten Vorgabe und stimmen nicht mehr.
   Fremd wirkte nicht die Farbe, sondern das Mobiliar: als einziges Kapitel
   war dieses zentriert, ohne Blätter, ohne Handschrift. Genau das wird
   angeglichen — linksbündig, drei Anlassblätter statt nackter Spalten. */
.anlaesse {
  background: var(--anlass-grund);
  color: var(--paper);
}
.anlaesse .sec-head h2 { color: var(--paper-card); }
/* Auf dem helleren Türkis trägt das normale Gold nicht mehr (2,1:1).
   In der großen Überschrift reicht ein aufgehelltes Sandgold (3,6:1 —
   für diese Schriftgröße zulässig); im Vorspann, der in Lesegröße steht,
   muss es Creme sein, sonst bliebe es unter der Lesbarkeitsgrenze. */
.anlaesse h2 em { color: var(--akzent-hell); }

/* Eine gemeinsame Spalte für Vorspann und Karten. Ohne sie sitzt jedes Stück
   auf eigener Kante: die Szene ist ein Raster mit zentrierten Feldern, in dem
   der Kopf auf seine Textbreite zusammenschrumpft und mittig hängt, während
   der Vorspann bis an den Fensterrand läuft. Gemessen: Karten bei 74 px,
   Überschrift bei 364, Vorspann bei 0. */
.anlass-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.buehne-anlaesse .sec-head { width: 100%; }

/* Der Leitsatz über den Anlässen — die eigentliche Hauptkategorie.
   Linksbündig wie der Vorspann jedes anderen Kapitels. */
.anlass-leitsatz {
  max-width: none;                 /* zwei Zeilen, Satz für Satz — der Umbruch
                                      steht als <br> im Text, nicht nach Platz */
  margin: -.4rem 0 2.6rem;
  padding: 0;
  text-align: left;
  /* Der Browser bricht sonst rein nach Platz und reißt dabei Wortgruppen
     auseinander, die zusammengehören. `pretty` wägt die letzten Zeilen ab
     und lässt kein einzelnes Wort allein stehen; wo es zwingend ist, halten
     zusätzlich feste Leerzeichen im Text zusammen. */
  text-wrap: pretty;
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.9vw, 1.42rem);
  line-height: 1.62;
  font-weight: 300;
  color: var(--text-hell);
}
.anlass-leitsatz em {
  font-style: italic;
  color: var(--paper-card);
}
/* Marker auf der dunklen Tafel: hellt auf statt abzudunkeln (wie beim Atelier) */
.anlass-leitsatz mark {
  background-image: linear-gradient(100deg,
    rgba(222, 170, 62, .12) 0%,
    rgba(222, 170, 62, .74) 3%,
    rgba(222, 170, 62, .48) 22%,
    rgba(222, 170, 62, .34) 52%,
    rgba(222, 170, 62, .52) 82%,
    rgba(222, 170, 62, .70) 96%,
    rgba(222, 170, 62, .14) 100%);
  mix-blend-mode: screen;
  color: inherit;
}
/* Keine Trennstriche: auf dem dunklen Blatt zerreißen sie den Fluss
   stärker, als die Flatterkante stört. */
.anlass-leitsatz,
.anlass p {
  hyphens: manual;
  -webkit-hyphens: manual;
}

.anlass-grid {
  margin: 0;
  padding: 0 0 5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 2rem;
}
/* Drei helle Blätter auf ihrem Türkis, jedes eine Spur anders gekippt —
   Geschwister der Fragekarten aus Kapitel 03, aber ohne deren Klebestreifen:
   die gehören dorthin und wären hier eine Wiederholung. Stattdessen trägt
   jedes Blatt oben einen feinen Goldstrich. */
.anlass {
  position: relative;
  padding: 2.1rem 1.9rem 1.9rem;
  background: var(--paper-card);
  border: 1px solid rgba(202, 191, 169, .5);
  border-radius: 2px;
  box-shadow: 0 26px 50px -28px rgba(8, 30, 28, .75);
  --kipp: -.5deg;
}
.anlass:nth-child(2) { --kipp: .55deg; }
.anlass:nth-child(3) { --kipp: -.3deg; }
/* Nicht auf einer Linie: die drei Blätter sitzen unterschiedlich hoch, als
   hätte sie jemand nacheinander auf den Tisch gelegt. Zusammen mit den drei
   verschiedenen Schrägen nimmt das dem Raster die Lineal-Strenge. */
.anlass:nth-child(2) { margin-top: 2.1rem; }
.anlass:nth-child(3) { margin-top: .8rem; }
/* Die Schräge muss stärker wiegen als `.buehne .reveal { transform: none }`,
   das die Einblende-Verschiebung zurücksetzt. Gleich viele Klassen genügen
   nicht — jene Regel steht später und gewänne den Gleichstand; die Blätter
   lägen kerzengerade. Deshalb die Klasse `reveal` mit in den Selektor. */
.anlaesse .anlass.reveal { transform: rotate(var(--kipp)); }
/* Klebestreifen wie auf den Fragekarten in Kapitel 03 — gleiche Maße, gleicher
   Papierton, gleicher gerissener Rand. Vorher saß hier ein Goldstrich auf der
   Blattkante; der hielt nichts fest und sah nach verrutschter Linie aus. */
.anlass::before {
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  width: 120px; height: 28px;
  transform: translateX(-50%) rotate(-2deg);
  background: linear-gradient(rgba(233, 222, 197, .92), rgba(226, 213, 185, .78));
  box-shadow: 0 1px 3px rgba(43, 38, 32, .14);
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 100%, 3% 96%, 0 78%);
  pointer-events: none;
}
/* Handschrift wie auf den Karten in Kapitel 03 — auf dem hellen Blatt
   trägt Veronikas Türkis die Überschrift. */
.anlass h3 {
  font-family: var(--hand);
  font-size: 1.62rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.15;
  color: var(--akzent);
  margin-bottom: .7rem;
  transform: rotate(-1.4deg);
  transform-origin: 0 100%;
}
.anlass p { color: var(--ink-soft); }
/* Der Alltag zeigt sich einfach: ein Foto, auf den Zettel geklebt —
   gibt der kürzesten Karte ihr Gewicht, ohne den Text aufzublasen. */
.anlass-foto { margin: 1rem 0 .2rem; transform: rotate(.8deg); }
.anlass-foto img {
  display: block;
  width: 100%;
  border: 5px solid #fdfaf3;
  border-bottom-width: 8px;
  box-shadow: 0 2px 6px rgba(43, 38, 32, .28);
}

/* ---------- 06 Anfrage ---------- */
.anfrage { text-align: center; }
.anfrage-inner {
  /* Der Briefbogen liegt in derselben breiten Flucht wie die Karten-
     Blätter davor; das Formular darin behält sein ruhiges Maß. */
  max-width: min(1120px, 94vw);
  margin: 0 auto;
  padding: 5.5rem clamp(1.5rem, 4vw, 3.5rem) 5rem;
}
.anfrage-form { max-width: 880px; margin-inline: auto; }
.anfrage-inner .sec-lede { margin: 0 auto 2.4rem; }
.anfrage-actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
/* Deutlich lesbar statt goldenem Flüstern: Türkis auf dem Briefpapier
   trägt 6,3:1 — das Gold davor lag bei 3,1:1 und ging unter. */
.anfrage-hinweis {
  margin-top: 2rem;
  display: inline-block;
  font-size: 1.35rem;
  color: var(--wald);
}

/* ---------- Der Anfragebogen ----------
   Kein Formular in Kästen, sondern ein Bogen, den man ausfüllt:
   Beschriftung über der Zeile, Zeile darunter. */
.anfrage-form {
  text-align: left;
  margin-top: 2.6rem;
}
.honigtopf {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.feld-block {
  border: none;
  padding: 0;
  margin: 0 0 1.9rem;
}
.feld-block legend {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.22rem;
  color: var(--wald);
  padding: 0;
  margin-bottom: .9rem;
}

.feld { margin: 0 0 1.5rem; }
/* Im Bogen wird nichts getrennt — Trennstriche in Beschriftungen
   sehen nach schlechtem Formular aus, nicht nach Atelier. */
.anfrage-form,
.anfrage-form p,
.anfrage-form label,
.anfrage-form legend {
  hyphens: manual;
  -webkit-hyphens: manual;
}
/* Die Wege-Auswahl steht INNERHALB von „Wie darf ich mich melden?" — ihre
   Beschriftung trägt daher die kleine Feldschrift, nicht noch einmal die
   große Kursive, sonst gäbe es zwei Überschriften gleichen Gewichts. */
/* Der Menüknopf gehört nur aufs Telefon — auf dem großen Schirm steht die
   Menüzeile ja offen da. Ohne diese Regel blitzte er neben DE·EN auf. */
.kopf-knopf { display: none; }

.feld-wege { margin-bottom: 1.5rem; }
/* Eine Rufnummer braucht keine 1200px Schreiblinie */
.feld-wege + .feld input { max-width: 26em; }

/* Safari hinterlegt automatisch ausgefüllte Felder giftgelb — auf dem
   Briefbogen sieht das aus wie eine Fehlermeldung. Die Füllfarbe lässt sich
   nicht direkt setzen, wohl aber mit einem sehr breiten Innenschatten
   überdecken. */
.anfrage-form input:-webkit-autofill,
.anfrage-form input:-webkit-autofill:hover,
.anfrage-form input:-webkit-autofill:focus,
.anfrage-form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--paper-card) inset;
  box-shadow: 0 0 0 40px var(--paper-card) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
.feld-wege legend {
  font-family: var(--sans);
  font-style: normal;
  font-size: .93rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .55rem;
}
.feld-wege .wahl-reihe { gap: .55rem 1.5rem; }
.feld label {
  display: block;
  font-size: .93rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .35rem;
}
.feld-zusatz {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: var(--honig);
}
.feld-hilfe {
  display: block;
  margin-top: .4rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="date"],
.feld select,
.feld textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1.02rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .45rem .1rem;
  transition: border-color .2s, background-color .2s;
}
.feld textarea {
  border: 1px solid var(--line);
  padding: .7rem .8rem;
  resize: vertical;
  line-height: 1.6;
}
.feld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.6rem;
}
.feld input::placeholder,
.feld textarea::placeholder { color: rgba(92, 84, 74, .5); font-style: italic; }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--wald);
  background-color: rgba(37, 100, 89, .06);
}
/* Dateiwahl: der native Knopf sieht in jedem Browser anders aus und
   trägt je nach Sprache anderen Text. Deshalb liegt das echte Feld
   unsichtbar über einem selbst gezeichneten Knopf. */
.datei-feld {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}
.datei-halter { position: relative; display: inline-block; }
.datei-eingabe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.datei-knopf {
  display: inline-block;
  font-family: var(--sans);
  font-size: .92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wald);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .45rem 1rem;
  margin: 0;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.datei-halter:hover .datei-knopf,
.datei-eingabe:focus-visible + .datei-knopf {
  border-color: var(--wald);
  background: rgba(37, 100, 89, .08);
}
.datei-eingabe:focus-visible + .datei-knopf { outline: 2px solid var(--wald); outline-offset: 2px; }
.datei-name {
  font-size: .9rem;
  font-style: italic;
  color: var(--ink-soft);
}

.feld-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  align-items: start;
}
/* Bricht eine Beschriftung auf zwei Zeilen um, sollen die Schreiblinien
   daneben trotzdem auf gleicher Höhe liegen — dafür teilen sich beide
   Felder dieselben Zeilen: Beschriftung · Eingabe · Hinweis. */
@supports (grid-template-rows: subgrid) {
  .feld-paar {
    grid-template-rows: auto auto auto;
  }
  .feld-paar > .feld {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

/* Auswahlfelder: der Punkt sitzt neben der Zeile, nicht in einem Kasten */
.wahl-reihe { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }
.wahl {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
}
.wahl input {
  flex: none;
  margin-top: .28rem;
  accent-color: var(--wald);
  width: 1rem; height: 1rem;
  cursor: pointer;
}
.wahl-breit { margin-top: .4rem; }
.einwilligung {
  margin: 1.6rem 0 2rem;
  font-size: .95rem;
  color: var(--ink-soft);
}
.einwilligung a { color: var(--wald); }

.anfrage-form .anfrage-actions { justify-content: flex-start; }
.anfrage-form button.btn {
  font-family: var(--sans);
  cursor: pointer;
}
.anfrage-form .anfrage-hinweis { display: block; margin-top: 1.6rem; }

@media (max-width: 620px) {
  .feld-paar { grid-template-columns: 1fr; }
  .anfrage-form .anfrage-actions { justify-content: center; }
}

/* ---------- Rechtstexte: Impressum, Datenschutz, Formularantwort ----------
   Derselbe Papierbogen wie der Anfragebrief, nur ruhiger gesetzt. */
.rechtstext {
  padding: 4.5rem 1.5rem 5rem;
}
.rechts-inner {
  position: relative;
  max-width: 50rem;
  margin: 0 auto;
  padding: 3.6rem 3.2rem 3.2rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(43, 38, 32, .05),
    7px 10px 26px -8px rgba(43, 38, 32, .22);
}
.rechts-inner .sec-no {
  display: block;
  margin-bottom: .5rem;
}
.rechts-inner h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 340;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: 1rem;
}
.rechts-inner .sec-lede {
  max-width: 38em;
  margin-bottom: 2.8rem;
  color: var(--ink-soft);
}
.rechts-inner h2 {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 420;
  font-style: italic;
  color: var(--wald);
  margin: 2.4rem 0 .7rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}
.rechts-inner p {
  max-width: 40em;
  margin-bottom: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  hyphens: manual;
  -webkit-hyphens: manual;
}
.rechts-inner p strong { color: var(--ink); font-weight: 600; }
.rechts-inner em { font-style: italic; color: var(--ink); }
.rechts-inner .btn { margin-top: 1.4rem; }

/* Noch zu füllende Angaben — im Entwurf sichtbar, nie zu übersehen */
.platzhalter {
  background: rgba(185, 138, 62, .16);
  border-bottom: 1px dashed var(--honig);
  padding: 0 .25em;
  font-style: italic;
  color: var(--ink);
}
.rechts-fussnote {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}

@media (max-width: 620px) {
  .rechtstext { padding: 3rem 1rem 3.5rem; }
  .rechts-inner { padding: 2.4rem 1.5rem 2rem; }
}

/* ---------- Fußzeile ---------- */
.fuss {
  background: var(--paper-deep);
}
/* ---------- Der Kolophon: die letzte Seite des Atelierbuchs ----------
   Der Faden läuft quer über den Bogen und näht ihn zu — dieselbe Naht,
   die zwischen den Kapiteln liegt. Darauf das Siegel, wie Wachs auf dem
   Umschlag, halb über der Naht. Darunter der Absender: Handnotiz, Name,
   was sie macht, wo sie ist, und der Blick in die Werkstatt. Ganz unten,
   ohne Trennlinie und ohne Aufhebens, das Kleingedruckte. */
.fuss { position: relative; }
/* Die Naht als echte Stichreihe — dieselbe Sprache wie die Unterstreichung
   in der Kopfzeile. Als gestrecktes SVG wurde daraus eine durchgezogene
   Linie, weil die Streckung auch das Strichmuster zieht. */
.fuss::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background-image: linear-gradient(90deg, var(--ziegel) 56%, transparent 0);
  background-size: 13px 2px;
  opacity: .6;
}
.fuss-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem 3.4rem;
  display: grid;
  justify-items: center;
  text-align: center;
}
/* Das Siegel liegt auf der Naht, nicht darunter — es schließt den Bogen. */
.fuss .siegel {
  width: clamp(118px, 13vw, 172px);
  margin-top: -3.4rem;
  transform: rotate(-4deg);
}
.fuss-marke {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(1.32rem, 2.4vw, 1.6rem);
  line-height: 1.3;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.fuss-marke em { font-style: italic; color: var(--wald); }
/* Die beiden Absenderzeilen lesen sich als Untertitel — deshalb nicht
   kleingedruckt, sondern in ruhiger Lesegröße. text-wrap: balance teilt
   die Zeilen gleich lang, statt eine lange und eine kurze zu setzen. */
.fuss-klein {
  margin-top: .8rem;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.fuss-ort {
  margin-top: .6rem;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
/* Am Handy steht der Name auf einer eigenen Zeile — der Gedankenstrich
   wäre dort ein Bindeglied zwischen zwei Zeilen und fällt deshalb weg. */
.marke-bruch { display: none; }
@media (max-width: 560px) {
  .fuss-marke .marke-strich { display: none; }
  .marke-bruch { display: block; }
}
.fuss .hero-insta { margin-top: 1.9rem; font-size: 1.24rem; }
/* Das Kleingedruckte steht als letzte Zeile auf derselben Achse. */
.fuss-credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 2.6rem;
  margin-top: 2.9rem;
  font-size: 1rem;
  color: var(--ink-soft);
}
.fuss-recht a, .fuss-credit a { color: var(--ink-soft); }
.fuss-recht a:hover, .fuss-credit a:hover { color: var(--wald); }
@media (max-width: 700px) {
  .fuss .siegel { margin-top: -2.8rem; }
  .fuss-credit { margin-top: 2.2rem; gap: .5rem 1.6rem; }
}

/* ---------- Scroll-Reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .24s; }
.reveal.d3 { transition-delay: .36s; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .btn-ghost:hover { transform: none; }
}

/* ---------- Responsiv ---------- */
/* Nur auf breiten Schirmen umbrechen — auf dem Telefon steht der Strich
   sonst allein auf einer Zeile. */
@media (max-width: 900px) {
  .br-breit { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 3.5rem; }
  .hero-margin { display: none; }
  .werke { grid-template-columns: 1fr; max-width: 480px; }
  .werk:nth-child(2) { transform: none; }
  .blicke-row { gap: 1rem; }
  .blicke .frame { padding: .5rem; }
  .blicke .frame figcaption { font-size: .7rem; letter-spacing: .08em; }
  .schritte { grid-template-columns: 1fr 1fr; }
  .atelier-grid { grid-template-columns: 1fr; }
  .atelier-bilder { max-width: 460px; }
  .atelier-hero img { aspect-ratio: 4 / 3; object-position: 32% center; }
  /* Einspaltig fallen die Höhenversätze weg — untereinander wären sie
     kein Versatz mehr, nur ungleiche Abstände. */
  .anlass-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .anlass:nth-child(2), .anlass:nth-child(3) { margin-top: 0; }
  .pair, .pair-flip { grid-template-columns: 1fr; margin: 0 auto; max-width: 420px; }
  .pair-arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 560px) {
  .topbar { flex-direction: column; gap: .6rem; align-items: flex-start; }
  .schritte { grid-template-columns: 1fr; }
  .glossar div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ============================================================
   PREMIUM-POLITUR — die Zauber-Schicht
   (Overrides ans Dateiende: gewinnen die Kaskade)
   ============================================================ */

/* ---------- Typografie-Feinschliff ---------- */
h1, h2, h3 {
  font-optical-sizing: auto;
  text-wrap: balance;
}
body { text-rendering: optimizeLegibility; }
.lede { line-height: 1.72; }
.werk-meta, .sec-no { font-variant-numeric: oldstyle-nums; }
p { hyphens: auto; -webkit-hyphens: auto; }
.hero-text p, .sec-lede { hyphens: manual; -webkit-hyphens: manual; }

/* ---------- Navigation: Stich-Unterstreichung ---------- */
/* Die Naht liegt in voller Wortbreite bereit und näht sich beim Aktivieren
   von links auf — so bleibt am Ende das ganze Wort unterstrichen, nicht
   nur der erste Stich. */
.topnav a {
  position: relative;
  padding-bottom: .35rem;
  transition: color .2s ease;
}
.topnav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1.5px;
  width: 0;
  background-image: linear-gradient(90deg, var(--honig) 0 7px, transparent 7px 12px);
  background-size: 12px 1.5px;
  background-repeat: repeat-x;
  transition: width .35s cubic-bezier(.2, .7, .3, 1);
}
.topnav a:hover::after { width: 100%; }
/* Scroll-Spy: die Stich-Naht wandert zum gerade sichtbaren Abschnitt */
.topnav a.active::after { width: 100%; }
.topnav a.active { color: var(--wald); }
.nav-cta { border-bottom: none !important; }
.nav-cta::after { content: none !important; }
.wordmark:hover img { opacity: .74; }

/* ---------- Hero: Schwung & Funkeln ---------- */
.wald { position: relative; white-space: nowrap; }
.swash {
  position: absolute;
  left: 0; bottom: -.18em;
  width: 100%; height: .34em;
  overflow: visible;
  /* Ein Federzug statt einer gleichdicken Linie: die Form ist gefüllt —
     dünn angesetzt, satt in der Mitte, fein auslaufend mit Aufstrich.
     Beim Laden deckt sie sich von links auf, wie mit der Feder gezogen. */
  clip-path: inset(-40% 100% -40% 0);
  animation: swash-auf .9s cubic-bezier(.3, 0, .2, 1) 1.15s forwards;
}
.swash path { fill: var(--honig); stroke: none; }
@keyframes swash-auf { to { clip-path: inset(-40% 0 -40% 0); } }
.spark {
  position: absolute;
  width: 17px; height: 17px;
  fill: var(--honig);
  opacity: 0;
  animation: twinkle 4.5s ease-in-out infinite;
}
.spark.s1 { top: 8%;  right: 12%; animation-delay: 1.6s; }
.spark.s2 { top: 30%; left: 4%;   animation-delay: 2.8s; width: 11px; height: 11px; }
.spark.s3 { bottom: 20%; right: 2%; animation-delay: 3.7s; width: 13px; height: 13px; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  12%      { opacity: .9; transform: scale(1) rotate(18deg); }
  24%      { opacity: 0; transform: scale(.5) rotate(30deg); }
}

/* ---------- Geisterziffern hinter den Sektionsköpfen ----------
   Jedes Kapitel-Erstblatt trägt genau eine: 01/03/04 am Sektionskopf,
   02 auf der Atelier-Karte, 05 am Leben-Kopf, 06 auf dem Briefbogen. */
.sec-head, .leben-kopf { position: relative; }
.sec-head[data-no]::before,
.papier-text[data-no]::before,
.leben-kopf[data-no]::before,
.anfrage-inner[data-no]::after { /* ::after — das ::before des Briefs trägt schon das Tape */
  content: attr(data-no);
  position: absolute;
  right: 1.5rem;
  top: -1.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(7rem, 15vw, 12.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(43, 38, 32, .09);
  pointer-events: none;
  user-select: none;
}
.anlaesse .sec-head[data-no]::before {
  -webkit-text-stroke: 1.5px rgba(246, 240, 228, .13);
}

/* ---------- Rahmen: Elevation, Anheben, Färbung ---------- */
.frame {
  box-shadow:
    0 1px 2px rgba(43, 38, 32, .05),
    5px 7px 18px -6px rgba(43, 38, 32, .18);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s cubic-bezier(.2, .7, .3, 1);
}
/* Zeigegesten gehören Geräten, die zeigen können. Auf dem Telefon gibt es
   kein Zeigen — Safari hängt beim Antippen stattdessen einen KLEBENDEN
   :hover-Zustand an das Angetippte, der erst weicht, wenn man woanders
   hintippt. Ohne diese Schranke blieb jede angetippte Karte angehoben. */
@media (hover: hover) {
  .frame:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow:
      0 2px 4px rgba(43, 38, 32, .06),
      9px 16px 32px -8px rgba(43, 38, 32, .26);
  }
}
.frame img { filter: saturate(.96) contrast(1.03) sepia(.05); }
.entwurf-video video { filter: saturate(.96) contrast(1.02) sepia(.04); }

/* Fotoecken für Fotorahmen (oben links & rechts) */
.frame-photo { position: relative; }
.frame-photo::before,
.frame-photo::after {
  content: "";
  position: absolute;
  top: calc(.9rem - 3px);
  width: 22px; height: 22px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(43, 38, 32, .12);
  z-index: 2;
  pointer-events: none;
}
.frame-photo::before {
  left: calc(.9rem - 3px);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.frame-photo::after {
  right: calc(.9rem - 3px);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Washi-Tape für Skizzen & Video */
.frame-sketch, .entwurf-video { position: relative; }
.frame-sketch::before, .entwurf-video::before {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 96px; height: 26px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: linear-gradient(rgba(233, 222, 197, .92), rgba(226, 213, 185, .78));
  box-shadow: 0 1px 3px rgba(43, 38, 32, .14);
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 100%, 3% 96%, 0 78%);
  z-index: 2;
  pointer-events: none;
}

/* ---------- Reveals: weicher, mit Gewicht ---------- */
.reveal {
  transform: translateY(26px) scale(.988);
  transition: opacity .85s cubic-bezier(.16, .84, .28, 1), transform .85s cubic-bezier(.16, .84, .28, 1);
}
.reveal.in { transform: none; }

/* ---------- Buttons: Faden-Detail ---------- */
.btn, .btn-ghost { position: relative; touch-action: manipulation; }
.btn::after {
  content: "";
  position: absolute; inset: 4px;
  border: 1px dashed rgba(251, 247, 238, .55);
  border-radius: 1px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn-ghost::after {
  content: "";
  position: absolute; inset: 4px;
  border: 1px dashed rgba(43, 38, 32, .35);
  border-radius: 1px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.btn-ghost:hover::after { opacity: 1; border-color: var(--wald); }

/* ---------- Der Weg: Nadelkopf-Pins ---------- */
.pin {
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.schritt:hover .pin {
  transform: translateY(-3px) rotate(-6deg);
  box-shadow: 3px 6px 10px -2px rgba(43, 38, 32, .22);
}

/* ---------- Zeit-Notiz als Karteikarte ---------- */
.zeit p {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--wald);
  box-shadow: 4px 6px 0 rgba(43, 38, 32, .06);
  transform: rotate(-.35deg);
}

/* ---------- Anlässe: Tiefe & Glanz ----------
   Der Schimmer oben war auf den tiefen Grund gerechnet. Auf dem helleren
   Türkis würde er die Überschrift auswaschen — deshalb schwächer. */
.anlaesse {
  background:
    /* Dieselbe Papierstruktur wie auf allen anderen Blättern — zwei
       übereinandergelegte Punktraster, hier in hellem statt dunklem Ton,
       weil der Grund dunkel ist. Vorher war dies die einzige Fläche der
       Seite ohne jede Textur. */
    radial-gradient(rgba(246, 240, 228, .036) 1px, transparent 1.5px),
    radial-gradient(rgba(246, 240, 228, .022) 1px, transparent 1.5px),
    radial-gradient(120% 90% at 50% 0%, rgba(53, 164, 156, .16) 0%, transparent 62%),
    var(--anlass-grund);
  background-size: 26px 26px, 17px 17px, auto, auto;
  background-position: 0 0, 9px 13px, 0 0, 0 0;
  border-top: 1px solid rgba(246, 240, 228, .12);
}
.anlass {
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s cubic-bezier(.2, .7, .3, 1);
}
/* Beim Anheben die eigene Schräge mitnehmen — sonst springt das Blatt
   beim Überfahren gerade und fällt danach zurück. */
.anlaesse .anlass.reveal:hover {
  transform: rotate(var(--kipp)) translateY(-5px);
  box-shadow: 0 34px 60px -28px rgba(8, 30, 28, .85);
}
.anlass h3 {
  display: inline-block;
  background-image: linear-gradient(90deg, var(--honig), var(--honig));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: .25rem;
  transition: background-size .4s cubic-bezier(.2, .7, .3, 1);
}
.anlass:hover h3 { background-size: 100% 1px; }


/* ---------- Scrollbar & Fokus ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 6px;
  border: 2px solid var(--paper-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--honig); }

/* ---------- Scroll-Choreografie (progressiv) ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hero-drift {
      to { transform: translateY(-30px) rotate(.6deg); }
    }
    .stitch {
      transform-origin: left center;
      animation: stitch-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    @keyframes stitch-draw {
      from { transform: scaleX(.15); opacity: 0; }
      to   { transform: scaleX(1); opacity: .65; }
    }
  }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .swash { animation: none; clip-path: none; }
  .spark { animation: none; opacity: 0; }
  .frame, .frame:hover, .anlass, .anlass:hover, .pin { transform: none; transition: none; }
  .topnav a { transition: none; }
  .topnav a::after { transition: none; }
}

/* ---------- Mobil-Korrekturen für die Politur ---------- */
@media (max-width: 900px) {
  .sec-head[data-no]::before,
  .papier-text[data-no]::before,
  .leben-kopf[data-no]::before,
  .anfrage-inner[data-no]::after { font-size: clamp(5rem, 18vw, 8rem); top: -.6rem; }
}
@media (max-width: 560px) {
  .topbar { position: static; }
  }

/* ============================================================
   HERO-BÜHNE & FILM — zweite Politur-Runde
   ============================================================ */

/* ---------- Hero: die Künstlerin + Skizze, geschichtet ---------- */
.hero { padding-bottom: 7.5rem; }
.hero-stage { position: relative; }
.hero-portrait {
  margin-left: 14%;
  transform: rotate(1.1deg);
}
.hero-portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 24% center;
}
.hero-stage .handnote-v { right: -1.3rem; }
.spark.s1 { top: -3%; left: 8%;  right: auto; }
.spark.s2 { top: 34%; right: -4%; left: auto; }
.spark.s3 { bottom: 34%; left: -9%; right: auto; }

/* ---------- Film: Bühne für die Entwurfszeichnung ---------- */
.film {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3.5rem;
  align-items: center;
}
.entwurf-video {
  max-width: 380px;
  margin: 0;
  justify-self: center;
}
.film-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  line-height: 1.22;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.film-quote em { color: var(--wald); }
.film-satz {
  color: var(--ink-soft);
  max-width: 30em;
  hyphens: manual;              /* keine Trennstriche im Fließtext dieser Karte */
  -webkit-hyphens: manual;
}
.film-hand {
  margin-top: 1.4rem;
  color: var(--honig);
  display: inline-block;
}

/* ---------- Skizzenblock: Veronikas Block, fünf Seiten ----------
   Fünf echte Blätter aus demselben Spiralblock als Treppe: das gewählte
   liegt vorn links, die übrigen schauen rechts dahinter hervor, jedes mit
   einem greifbaren Streifen. Ein Klick holt ein Blatt nach vorn und legt es
   gerade. Die Namen stehen als Reihe darunter, der laufende ist
   hervorgehoben — kein Karussell. */
.skizzenblock {
  /* So breit wie der Text darüber, mittig darunter — die Blatthöhe bleibt
     über svh gedeckelt, damit die Reihe im Kapitel-Fenster nie unten
     abgeschnitten wird (Breite × 0.72 = Höhe der Blattreihe). Bei hohen
     Fenstern erreicht der Block die volle Textbreite. */
  margin: 1.1rem auto 0;
  width: min(100%, 76svh);
}
.block-blaetter {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 65%;              /* so hoch wie die Treppe samt vorderem Blatt */
}
/* Fächer: die Blätter sind seitlich versetzt UND gedreht, sonst verdeckt
   das vordere die hinteren. Platz 0 vorn mittig, 1–3 nach rechts gestaffelt. */
.block-blatt {
  position: absolute;
  top: 6%;
  width: 42%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transform-origin: 50% 100%;
  /* Eine Treppe in Leserichtung: Das gewählte Blatt (Platz 0, .vorn) liegt
     vorn links an der Textkante, voll sichtbar. Die übrigen (Platz 1–4)
     schauen als Treppe nach rechts dahinter hervor — wie ein Stapel, dessen
     oberstes Blatt man zu sich gezogen hat. Platz 1 liegt gleich neben dem
     vorderen, Platz 4 außen: die Streifen folgen der Namenzeile darunter.
     Jedes zeigt seinen rechten Streifen, keines kann je ganz verschwinden. */
  left: calc(var(--platz) * 14.5%);
  transform:
    rotate(calc((var(--platz) - 2.5) * 1.8deg))
    translateY(calc((5 - var(--platz)) * 2px));
  z-index: calc(5 - var(--platz));
  transition: left .55s cubic-bezier(.22, 1, .3, 1),
              transform .55s cubic-bezier(.22, 1, .3, 1), filter .35s ease;
  filter: drop-shadow(0 5px 11px rgba(43, 38, 32, .26))
          brightness(calc(1 - (5 - var(--platz)) * 0.03));
}
.block-blatt img {
  display: block;
  width: 100%;
  height: auto;
  border: 6px solid #fdfaf3;
  border-bottom-width: 9px;
  box-shadow: 0 1px 2px rgba(43, 38, 32, .22);
}
.block-blaetter:hover .block-blatt,
.block-blaetter:focus-within .block-blatt {
  left: calc(var(--platz) * 15.5% - 4%);
  transform:
    rotate(calc((var(--platz) - 2.5) * 2.4deg))
    translateY(calc((5 - var(--platz)) * 2px - 4px));
}
.block-blatt.vorn,
.block-blaetter:hover .block-blatt.vorn,
.block-blaetter:focus-within .block-blatt.vorn {
  left: 0;
  transform: translateY(-8px) rotate(-1.2deg) scale(1.04);
  z-index: 20;
  filter: drop-shadow(0 14px 24px rgba(43, 38, 32, .34)) brightness(1);
}
.block-blatt:focus-visible { outline: 2px solid var(--wald); outline-offset: 4px; }
/* Namen als Reihe unter dem Fächer */
.block-namen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .85rem;
  margin: .3rem -2.5rem 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.block-namen button {
  padding: .1rem 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--hand);
  font-size: 1.05rem;
  color: var(--ink-soft);
  opacity: .62;
  border-bottom: 1.5px solid transparent;
  transition: color .25s, opacity .25s, border-color .25s;
}
.block-namen button:hover,
.block-namen button:focus-visible { opacity: 1; color: var(--wald); }
.block-namen button.vorn { opacity: 1; color: var(--honig); border-bottom-color: var(--honig); }
.block-namen button:focus-visible { outline: 2px solid var(--wald); outline-offset: 3px; }
.skizzenblock figcaption {
  margin-top: .55rem;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .block-blatt, .block-namen button { transition: none; }
}

.film-toggle {
  position: absolute;
  right: 1.5rem;
  bottom: 3.6rem;
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--honig);
  background: color-mix(in srgb, var(--paper-card) 78%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 3px 10px rgba(43, 38, 32, .22);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease;
  z-index: 3;
}
.film-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 16px rgba(43, 38, 32, .3);
}
.film-toggle svg { width: 1.05rem; height: 1.05rem; fill: var(--wald); }
.film-toggle .ic-pause { display: none; }
.entwurf-video.playing .ic-pause { display: block; }
.entwurf-video.playing .ic-play { display: none; }
.entwurf-video video { cursor: pointer; }

@media (max-width: 900px) {
  .hero-stage { max-width: 440px; margin: 0 auto; }
  .hero-portrait { margin-left: 10%; }
  .film { grid-template-columns: 1fr; gap: 2.5rem; }
  .film-text { max-width: 480px; margin: 0 auto; text-align: center; }
  .film-text .film-satz { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .film-toggle, .film-toggle:hover { transform: none; transition: none; }
}

/* ============================================================
   MANUFAKTUR-KANTE — das Atelierbuch
   Wonky Serifen, roter Faden, Stempel, Siegel, Musterkarte.
   ============================================================ */

/* ---------- Fraunces: die handgeschnittene Achse ---------- */
h1, h2 {
  font-variation-settings: "SOFT" 45, "WONK" 1;
}
h3, .film-quote {
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.sec-head h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); }

/* Kicker & Kapitelnummern mit Fleuron */
.kicker::after {
  content: " ❦";
  color: var(--honig);
  letter-spacing: 0;
}
.sec-no::before { content: "— "; color: var(--line); }
.sec-no::after  { content: " —"; color: var(--line); }
.ausgabe {
  font-size: 1.15rem;
  color: var(--honig);
  margin-bottom: 1.6rem;
  display: inline-block;
}

/* ---------- Asymmetrie: jede Sektion steht anders ---------- */
.sec-right { text-align: right; }
.sec-right .sec-lede { margin-left: auto; }
.sec-right[data-no]::before { right: auto; left: 1.5rem; }
.sec-center { text-align: center; }
.sec-center .sec-lede { margin-inline: auto; }
.sec-center[data-no]::before { right: 50%; transform: translateX(50%); }

/* ---------- Der rote Faden ---------- */
.thread {
  display: block;
  width: min(100%, var(--maxw));
  height: 64px;
  margin: 0 auto;
  overflow: visible;
}
.thread path {
  fill: none;
  stroke: var(--ziegel);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: .8;
}
@supports (animation-timeline: view()) or (--hf: 1) {
  @media (prefers-reduced-motion: no-preference) {
    .thread path {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: thread-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
    @keyframes thread-draw { to { stroke-dashoffset: 0; } }
  }
}

/* ---------- Stempel ---------- */
.stempel {
  position: absolute;
  top: 5.2rem; right: 2rem;
  padding: .4em .85em;
  border: 3px solid var(--ziegel);
  border-radius: 5px;
  color: var(--ziegel);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transform: rotate(-7deg);
  opacity: .68;
  mix-blend-mode: multiply;
  pointer-events: none;
  box-shadow: inset 0 0 6px rgba(164, 72, 47, .18);
}
.sec-right .stempel { right: auto; left: 2rem; transform: rotate(5deg); }
.stempel-rund {
  position: relative;
  top: auto; left: auto; right: auto;
  display: inline-grid;
  place-items: center;
  width: 8.2rem; height: 8.2rem;
  margin-top: 2.4rem;
  border-radius: 50%;
  border-style: double;
  border-width: 5px;
  text-align: center;
  line-height: 1.25;
  font-size: .78rem;
  transform: rotate(6deg);
}

/* ---------- Initiale im Atelier-Text ---------- */
.atelier-text > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 45, "WONK" 1;
  font-style: italic;
  font-size: 3.6em;
  line-height: .78;
  float: left;
  padding: .06em .12em 0 0;
  color: var(--wald);
}

/* ---------- Musterkarte: Filz-Chips ---------- */
/* Die Musterkarte ist eine KARTE — Papier auf der Werkbank, mit einem
   Klebestreifen festgemacht. Bisher galt das nur im Blattmodus; überall
   sonst (Telefon, und am Schirm bei abgeschalteter Bewegung) trieben neun
   winzige Chips frei im Raum und brachen je nach Breite in vier oder fünf
   Spalten um. Drei quer, drei hoch — wie im Musterbuch einer Modistin,
   und in jeder Ansicht dasselbe. */
.materialkarte {
  position: relative;
  margin-top: 3rem;
  padding: 2rem 1.4rem 1.7rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 22px 40px -28px rgba(43, 38, 32, .55);
  transform: rotate(-.5deg);
}
/* Klebestreifen mittig über die Oberkante — derselbe wie an den übrigen
   Blättern im Buch. */
.materialkarte::before {
  content: "";
  position: absolute;
  top: -.85rem; left: 50%;
  width: 6rem; height: 1.7rem;
  transform: translateX(-50%) rotate(-2deg);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .3) 0 22%, rgba(255, 255, 255, 0) 22%),
    linear-gradient(rgba(233, 222, 197, .97), rgba(224, 210, 180, .94));
  box-shadow: 0 1px 3px rgba(43, 38, 32, .16);
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 100%, 3% 96%, 0 78%);
  z-index: 2;
  pointer-events: none;
}
.mk-titel {
  display: inline-block;
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  color: var(--akzent);
}
.materialkarte ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem .9rem;
}
.materialkarte li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .45rem;
  font-size: .88rem;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-soft);
  letter-spacing: .03em;
}
.chip {
  /* Das Muster füllt seine Spalte und behält sein Format — vorher war es
     auf 3,2 × 2,2 rem festgenagelt und wurde auf dem Telefon zur Briefmarke. */
  width: 100%; aspect-ratio: 3 / 2;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(43, 38, 32, .14),
    inset 0 -8px 12px -8px rgba(43, 38, 32, .38),
    1px 2px 4px rgba(43, 38, 32, .22);
  background-image:
    radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px),
    radial-gradient(rgba(43, 38, 32, .10) 1px, transparent 1.4px);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 3px 2px;
}
.materialkarte li:nth-child(odd) .chip { transform: rotate(-1.6deg); }
.materialkarte li:nth-child(even) .chip { transform: rotate(1.2deg); }
.chip-creme  { background-color: #e9ddc4; }
.chip-petrol { background-color: var(--petrol-farbe); }
.chip-salbei { background-color: var(--mint); }
.chip-tuerkis{ background-color: var(--tuerkis); }
.chip-ziegel { background-color: var(--ziegel); }
.chip-honig  { background-color: var(--honig); }
.chip-tinte  { background-color: var(--ink); }

/* Materialproben — echte Ausschnitte aus Veronikas eigenen Stücken,
   keine Farbkacheln: man sieht Filzflor, Flechtwerk, Ledernarbe, Moiré. */
.chip-haarfilz { background: url(img/web/probe-haarfilz.webp?v=5) center/cover; }
.chip-stroh    { background: url(img/web/probe-stroh.webp?v=4) center/cover; }
.chip-leder    { background: url(img/web/probe-leder.webp?v=4) center/cover; }
.chip-ripsband { background: url(img/web/probe-baender.webp?v=5) center/cover; }
.chip-seide    { background: url(img/web/probe-seide.webp?v=4) center/cover; }
.chip-perlen   { background: url(img/web/probe-perlen.webp?v=4) center/cover; }
.chip-federn   { background: url(img/web/probe-federn.webp?v=4) center/cover; }
.chip-blueten  { background: url(img/web/probe-blueten.webp?v=4) center/cover; }
.chip-tuell    { background: url(img/web/probe-tuell.webp?v=4) center/cover; }

/* ---------- Werkschau: Musterbuch-Exponate ---------- */
.werke { counter-reset: werk; }
.werk { counter-increment: werk; }
.werk h3::before {
  content: "№ 00" counter(werk) "  ·  ";
  font-size: .68em;
  font-style: italic;
  color: var(--honig);
  letter-spacing: .08em;
}
.werk:nth-child(1) .frame { transform: rotate(-1.3deg); }
.werk:nth-child(2) .frame { transform: rotate(.9deg); }
.werk:nth-child(3) .frame { transform: rotate(-.6deg); }

/* Die Maßband-Kante am linken Rand von Kapitel 03 ist entfallen — seit das
   echte Maßband am rechten Bildschirmrand läuft, war sie eine Dublette. */

/* ---------- Anlässe: Gravur ---------- */
.ornament {
  display: block;
  width: 130px;
  height: 22px;
  margin: 0 auto 1.2rem;
}
.sec-center .ornament { margin-inline: auto; }
.ornament path {
  fill: none;
  stroke: var(--honig);
  stroke-width: 1.4;
  stroke-linecap: round;
}
/* Die Trennlinien zwischen den Spalten sind entfallen — die Anlässe sind
   jetzt eigene Blätter und brauchen keine Striche mehr, um sich zu trennen. */

/* ---------- Anfrage: die Briefkarte ---------- */
.anfrage { padding: 5.5rem 1.5rem; }
.anfrage-inner.brief {
  position: relative;
  /* derselbe breite Satzspiegel wie die Karten-Blätter davor */
  max-width: min(1120px, 94vw);
  background: var(--paper-card);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(43, 38, 32, .05),
    7px 10px 26px -8px rgba(43, 38, 32, .22);
  padding: 4rem 3rem 3.5rem;
  transform: rotate(-.4deg);
}
.anfrage-inner.brief::before {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 110px; height: 27px;
  transform: translateX(-50%) rotate(1.6deg);
  background: linear-gradient(rgba(233, 222, 197, .92), rgba(226, 213, 185, .78));
  box-shadow: 0 1px 3px rgba(43, 38, 32, .14);
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 100%, 3% 96%, 0 78%);
}

/* ---------- Upcycling-Tafel (Grundfassung) ---------- */
.upcycling {
  background: var(--leben-grund);
  padding: 3.5rem 1.5rem;
  display: grid;
  justify-items: center;
  text-align: center;
}
/* Der Fundus als Regalstreifen: Das Foto ist von Natur aus ein liegendes
   Band, deshalb liegt es als Sockel unter dem Text statt als Kärtchen daneben.
   Die Oberkante löst sich in die Tafel auf, die Schatten des Fotos sind in
   den Tafelton gezogen — so gehört es zur Fläche, statt darauf zu kleben. */
.fundus-band {
  /* Bündig an der Tafel, und mit deren Ton hinterlegt. Die Oberkante des
     Fotos ist weich ausmaskiert — dieser Verlauf ist dafür gemacht, IN die
     grüne Tafel überzugehen. Lag das Band wie zuvor 2,6 rem tiefer, blendete
     es stattdessen ins cremefarbene Papier aus: ein Schmierfleck zwischen
     zwei Flächen. Am Schirm fiel das nie auf, weil dort die ganze Szene grün
     hinterlegt ist; auf dem Telefon trägt nur die Tafel selbst das Grün. */
  margin: 0;
  background: var(--leben-grund);
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.fundus-band img {
  width: 100%;
  height: clamp(190px, 34vw, 340px);
  object-fit: cover;
  object-position: 50% 42%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 100%);
}

.upcycling-satz {
  max-width: 30em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3.2vw, 1.7rem);
  line-height: 1.5;
  color: var(--paper-card);
  hyphens: manual;
}
.upcycling-satz mark {
  background-image: linear-gradient(100deg,
    rgba(222, 170, 62, .12) 0%,
    rgba(222, 170, 62, .74) 3%,
    rgba(222, 170, 62, .48) 22%,
    rgba(222, 170, 62, .34) 52%,
    rgba(222, 170, 62, .52) 82%,
    rgba(222, 170, 62, .70) 96%,
    rgba(222, 170, 62, .14) 100%);
  /* Auf dunklem Grund ist `multiply` falsch — daraus wird ein olivgrüner
     Fleck. Der Ausweg war einmal ein deckendes Honig-Etikett mit dunkler
     Schrift; das sah aber aus wie ein aufgeklebter Zettel und nicht wie
     ein Leuchtstift. Dieselbe Seite hat die richtige Antwort längst: In
     Kapitel 04 hellt `screen` den Grund auf, statt ihn zu verdunkeln —
     der Strich bleibt durchscheinend, die Schrift bleibt cremefarben wie
     im übrigen Satz. Genau das gilt jetzt auch hier. */
  mix-blend-mode: screen;
  color: inherit;
}
.upcycling .leben-nachsatz { margin-top: 1.6rem; font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: var(--honig); }

/* ---------- Kolophon & Siegel ---------- */
.signatur {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 1.8rem;
}
/* Der Schriftzug aus ihrer Hand — schließt die Einladung wie eine Unterschrift. */
.handzug {
  display: block;
  width: min(248px, 62%);
  height: auto;
  margin: 1.4rem 0 2.4rem;
  opacity: .85;
}
/* Der Briefkopf als ein Block: links steht die Einladung, rechts die
   Tusche-Dame am Rand — freigestellt, das Papier reinweiß gerechnet und
   per Multiplikation verschmolzen. Text und Bild gehören zusammen;
   nichts schwebt frei. */
.brief-kopf {
  display: grid;
  /* Erste Spur: derselbe Einzug, den der Bogen darunter von selbst bekommt
     (er ist 880px breit und mittig gesetzt). Dadurch beginnt die Einladung
     genau über der ersten Frage — eine Fluchtlinie statt zweier. */
  grid-template-columns:
    max(0px, (100% - 880px) / 2)
    minmax(0, 1fr)
    clamp(222px, 29.2%, 344px)
    max(0px, (100% - 880px) / 2 - 1.05%);
  /* Die letzte Spur ist die rechte Fluchtlinie, um den durchsichtigen Rand
     des Fotos vermindert (31 von 860 Bildpunkten): so steht Veronika selbst
     bündig mit dem Bogen, nicht ihr leerer Bildrand.
     Kein Spaltenabstand — sonst schöbe der erste Abstand die Einladung
     über die Fluchtlinie hinaus; die Luft zum Porträt setzt der Text selbst */
  gap: 0;
  /* das Porträt sitzt unten bündig und schließt den Kopf ab */
  align-items: end;
  margin: 2rem 0 2.6rem;
  text-align: left;
}
/* Die Einladung hängt oben — sie beginnt auf Höhe von Veronikas Hut,
   nicht auf Höhe ihrer Füße. */
.brief-wort { grid-column: 2; align-self: start; padding-right: 2.6rem; }
.brief-kopf .sec-lede { margin: 0; max-width: 33em; }
/* Zwei Fassungen derselben Einladung: am Desktop mit von Hand gesetzten
   Zeilen, darunter die alte, die sich ihren Umbruch selbst sucht. So bleibt
   der Satz am Handy Zeichen für Zeichen der, der er war. */
.einladung-schmal { display: none; }
@media (max-width: 900px) {
  .einladung-breit { display: none; }
  .einladung-schmal { display: block; }
}
.brief-bild {
  grid-column: 3;
  width: 100%;
  margin: 0;
}
/* Freigestelltes Porträt: Veronika steht ohne Rahmen auf dem Briefbogen,
   der Fuß läuft im Bild selbst weich aus. Kein multiply, kein Deckkraft-
   Trick wie bei einer Zeichnung — das würde ein Foto nur trüben; nur die
   hauseigene Tonung und ein sehr weicher Schatten, der sie aufs Papier
   stellt, statt sie aufgeklebt wirken zu lassen. */
.brief-bild img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.96) contrast(1.03) sepia(.05)
          drop-shadow(0 14px 18px rgba(43, 38, 32, .16));
}
/* Der Name unter dem Bild — von Hand daruntergesetzt, dort wo das Foto
   ausläuft. Am Desktop ist er gestrichen, weil das Porträt dort in den
   Bogen hineinragt und der Zug ihn sonst überliefe. */
.brief-bild figcaption {
  margin-top: -.2rem;
  text-align: center;
  font-size: 1.2rem;
  color: var(--wald);
  transform: rotate(-1.4deg);
}
/* Am Desktop rückt der Bogen an die Einladung heran: die leere Fläche
   unter dem Text fällt weg, die erste Frage steht neben Veronika. */
@media (min-width: 901px) {
  .brief-bild figcaption { display: none; }
  .anfrage-form { margin-top: -150px; }
}
@media (min-width: 1100px) {
  /* ab hier ist Platz für den vollen Zug — weiter hinauf ginge nur noch
     auf Kosten des Porträts: der Strich unter „Wunschtermin" liefe ihr
     sonst durch den Pullover. */
  .anfrage-form { margin-top: -190px; }
}
/* Dazwischen — Handy im Querformat, kleines Tablet, schmal gezogenes
   Fenster: der Kopf steht zweispaltig, aber das Porträt ist klein und die
   Textspalte breit. Die Einladung hängt hier deshalb weder oben noch unten,
   sondern in der Mitte des Porträts, und der Bogen rückt ein Stück nach —
   sonst klafft unter dem Text ein Loch. */
@media (min-width: 561px) and (max-width: 900px) {
  .brief-wort { align-self: center; }
  .anfrage-form { margin-top: -40px; }
}
@media (max-width: 560px) {
  .brief-kopf { grid-template-columns: 1fr; }
  .brief-wort, .brief-bild { grid-column: 1; }
  .brief-wort { padding-right: 0; }
  .brief-bild { width: min(82%, 320px); margin: 2.2rem auto 0; }
}

/* Veronikas eigenes Signet — Tusche auf Papier, kein nachgebautes Wachs. */
.siegel {
  width: clamp(104px, 12vw, 148px);
  height: auto;
  flex: none;
  transform: rotate(-2.5deg);
  opacity: .92;
}

/* Instagram gehört nicht zwischen Impressum und Datenschutz — es ist ein
   Blick in die Werkstatt, keine Pflichtangabe. Als handgeschriebene Zeile
   mit leichtem Schwung, wie eine Randnotiz unter der Absenderin. */
/* Der Verweis im Fuß ist ein Link — das zeigt die Schrift selbst: Die
   Buchstaben laufen als ruhige Welle durch, wie ein Band, das sich bewegt.
   Beim Überfahren schlägt die Welle höher und die Farbe wechselt. */
/* Der Instagram-Hinweis im Fuß trägt dieselbe Auszeichnung wie oben im
   Hero: Zeichen plus Zeile, gestrichelte Naht darunter. */

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .sec-right { text-align: left; }
  .sec-right .sec-lede { margin-left: 0; }
  .sec-right[data-no]::before { left: auto; right: 1rem; }
  .stempel { top: 4.2rem; right: 1rem; font-size: .72rem; }
  .sec-right .stempel { left: auto; right: 1rem; }
  .anfrage-inner.brief { padding: 3.2rem 1.4rem 2.6rem; }
  .stempel-rund { width: 7rem; height: 7rem; }
}

/* ============================================================
   LEBENDIGES ATELIERBUCH — Hero-Film, Crop-Fenster, Feenstaub
   ============================================================ */

/* ---------- Hero: es zeichnet auf der Seite ---------- */
/* overflow:hidden hält den Video-Rand im Rahmen. Die Randnotiz unter dem
   Foto wird stattdessen nach innen verankert. */
.hero { overflow: hidden; }
.hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  mix-blend-mode: multiply;
  opacity: .68;
  filter: brightness(1.24) saturate(.42) contrast(1.06) sepia(.14);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 30%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0 30%, #000 62%);
}
.hero-text, .hero-stage { position: relative; z-index: 2; }
/* Die Textspalte startet oben statt mittig — der Block beginnt damit weiter
   oben, und unter dem Anhänger bleibt Luft statt gleichmäßiger Enge. */
.hero-text { align-self: start; }
@supports not (mix-blend-mode: multiply) {
  .hero-film { opacity: .15; }
}

.hero-portrait { position: relative; z-index: 1; }

/* ---------- Crop-Fenster: IG-Oberfläche bleibt draußen ---------- */
.crop-fenster {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 7;
  /* Früher vergrößert (119/148 %), um die Instagram-Oberfläche des alten
     Bildschirmmitschnitts zu verstecken. Die Originale brauchen das nicht. */
  --vw: 100%;
  --vh: 100%;
  --vx: 0%;
  --vy: 0%;
}
.crop-fenster video {
  position: absolute;
  width: var(--vw);
  height: var(--vh);
  left: var(--vx);
  top: var(--vy);
  max-width: none;
  object-fit: cover;
  aspect-ratio: auto;
  filter: saturate(.96) contrast(1.02) sepia(.04);
}
.atelier-film { max-width: 400px; }
.atelier-film .crop-fenster video { cursor: default; }

/* ---------- Modistin-Zeile im Atelier ---------- */
.modistin-zeile {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  flex-wrap: wrap;
  margin-top: 2.4rem;
}
.modistin-mini { max-width: 215px; transform: rotate(-1.4deg); }
.modistin-mini img { aspect-ratio: 1 / 1; }
.modistin-zeile .stempel-rund { margin-top: 0; }

/* ---------- Blatt in der Film-Bühne ---------- */
.film-blatt {
  max-width: 200px;
  margin-top: 2rem;
  transform: rotate(2.2deg);
}
@media (max-width: 900px) {
  .film-blatt { margin-inline: auto; }
}

/* ---------- Werkschau: jede Karte hat eine zweite Seite ---------- */
.wechselbild {
  position: absolute;
  top: .9rem;
  left: .9rem;
  right: .9rem;
  width: calc(100% - 1.8rem) !important;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 1;
}
/* Dasselbe für den zweiten Blick. Auf dem Telefon schaltete jedes Antippen
   ein Bild um — und das nächste Antippen schaltete das vorige zurück. Es sah
   aus, als geschähe es paarweise; in Wahrheit wanderte nur der klebende
   Hover-Zustand von Karte zu Karte. Zurück kam man nur, indem man in den
   Text tippte: dort verliert die Karte ihren Hover. */
@media (hover: hover) {
  .frame:hover .wechselbild { opacity: 1; }
}
/* Die Randnotiz zum zweiten Blick gehört nur auf die Bildbühne —
   dort ist sie ein Papierzettel, Gegenstück zum Titel unten links. */
.frame .wechsel-notiz {
  display: none;
  text-transform: none;
  letter-spacing: 0;
  padding-top: 0;
  text-align: right;
}
/* Der Umblätter-Knopf steht immer im Dokument — script.js setzt ihn ohne
   Rücksicht auf die Gerätebreite. Sichtbar wird er nur dort, wo er gebraucht
   wird; so übersteht er auch das Drehen des Geräts, ohne dass irgendwo
   nachgerechnet werden müsste. */
.zweitblick { display: none; }

/* ---------- Der zweite Blick auf dem Telefon ----------
   Am Schirm holt das Schweben die zweite Aufnahme hervor. Auf einem
   Tastgerät gibt es kein Schweben — dort wird daraus ein Tippen, mit
   einem sichtbaren Ziel: derselben runden Papierscheibe, die bei den
   Atelierfotos die Lupe trägt. Gleiche Größe, gleicher Platz, gleicher
   Schatten; nur das Zeichen ist ein anderes — zwei übereinanderliegende
   Abzüge statt einer Lupe, denn hier wird nicht vergrößert, sondern
   umgeblättert.

   Die Scheibe setzt script.js; ohne Javascript gibt es keinen Knopf und
   die zweite Aufnahme bleibt unsichtbar, wie bisher.

   `.frame img.wechselbild` mit Klasse+Typ: Sonst gewinnt die
   Ausweichregel `.buehne .wechselbild { opacity: 1 }` für Browser ohne
   Zeitstrahl, und die zweite Aufnahme läge dauerhaft oben. */
@media (hover: none) and (max-width: 900px) {
  .frame.hat-zweitblick img.wechselbild { opacity: 0; transition: opacity .4s ease; }
  .frame.hat-zweitblick.zeigt-zweites img.wechselbild { opacity: 1; }
  .verwandlung.hat-zweitblick.zeigt-zweites .vn-neu { opacity: 1; }

  .zweitblick {
    display: block;
    position: absolute; right: .95rem; bottom: .95rem;
    width: 2.2rem; height: 2.2rem; padding: .42rem;
    border: 0; border-radius: 50%;
    background: rgba(250, 245, 233, .93);
    box-shadow: 0 2px 6px rgba(43, 38, 32, .3);
    z-index: 4;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, box-shadow .25s ease;
  }
  .zweitblick svg {
    display: block; width: 100%; height: 100%;
    fill: none; stroke: var(--ink); stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .zweitblick:active { transform: scale(.92); }
  /* Umgeblättert: die Scheibe wird deckend und bekommt einen Honigring —
     dasselbe Signal wie ein gedrückter Knopf, nur in der Sprache des Buches. */
  .zeigt-zweites .zweitblick {
    background: var(--paper-card);
    box-shadow: 0 0 0 2px var(--honig), 0 2px 6px rgba(43, 38, 32, .3);
  }

  /* Die Randnotiz sagt, was da zu sehen ist — sonst bleibt der zweite Blick
     ein Rätsel. Am Schirm ist sie ein Zettel auf der Bühne; hier ein
     schmaler Streifen im Bild, der mit der Aufnahme kommt und geht. */
  .frame.hat-zweitblick .wechsel-notiz {
    display: block;
    position: absolute;
    left: .95rem; bottom: .95rem; right: 3.9rem;
    z-index: 4;
    margin: 0;
    padding: .3rem .7rem .34rem;
    background: var(--paper-card);
    border: 1px solid var(--line);
    box-shadow: 0 2px 6px rgba(43, 38, 32, .22);
    font-family: var(--serif);
    font-style: italic;
    font-size: .95rem;
    font-weight: 380;
    letter-spacing: .005em;
    text-transform: none;
    text-align: left;
    color: var(--ink);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
  }
  .frame.hat-zweitblick.zeigt-zweites .wechsel-notiz { opacity: 1; }
}

/* ---------- Fußnoten-Zeile mit Charakterkopf ---------- */
.fussnote-zeile {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.2rem;
}
.fussnote-zeile .werk-fussnote { padding: 0; max-width: none; margin: 0; }
.fussnote-blatt { max-width: 150px; transform: rotate(2deg); }

/* ---------- Feenstaub ---------- */
.staub {
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--honig);
  box-shadow: 0 0 8px 2px rgba(185, 138, 62, .5);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}

/* ---------- Mobil & Bewegungsverzicht ---------- */
@media (max-width: 900px) {
  .hero-film {
    -webkit-mask-image: linear-gradient(180deg, transparent 0 36%, #000 62%);
    mask-image: linear-gradient(180deg, transparent 0 36%, #000 62%);
    opacity: .78;
    object-position: center 30%;
  }
  .blatt-hinten { top: -5%; left: -3%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-film { display: none; }
  .staub { display: none; }
  .wechselbild { transition: none; }
}

/* ---------- Sprachschalter DE/EN ---------- */
.lang-switch {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .85rem;
  letter-spacing: .12em;
}
.lang-switch a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: .2rem;
}
.lang-switch a:hover { color: var(--wald); }
.lang-switch a[aria-current="page"] {
  color: var(--wald);
  background-image: linear-gradient(90deg, var(--honig) 0 6px, transparent 6px 10px);
  background-size: 100% 1.5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.lang-switch span { color: var(--line); }
@media (max-width: 560px) {
  .lang-switch { position: absolute; top: 1.5rem; right: 1.2rem; }
  .topbar { position: relative; }
}

/* ============================================================
   HERO-FEINSCHLIFF: Skizze vor dem Foto, warmer Passepartout,
   Video auf reine Tusche reduziert.
   ============================================================ */

/* Die gezeichnete Signatur liegt ÜBER dem Porträt */
/* Porträt: warmes Passepartout statt Weiß, feine Tusche-Innenlinie */
.hero-portrait {
  background: #f2e9d6;
  border-color: #d9cbab;
  box-shadow:
    inset 0 0 0 1px rgba(43, 38, 32, .06),
    0 2px 4px rgba(43, 38, 32, .08),
    0 26px 48px -22px rgba(43, 38, 32, .38);
}
.hero-portrait::before,
.hero-portrait::after {
  background: #ece1c9;
  border-color: #d3c4a2;
}
.hero-portrait img {
  outline: 1px solid rgba(43, 38, 32, .16);
  outline-offset: -1px;
}

/* Video: Farbwolken raus, nur ein Hauch Tusche bleibt —
   und die Textspalte bleibt garantiert frei. */
.hero-film {
  filter: grayscale(1) brightness(1.18) contrast(1.08);
  opacity: .68;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 42%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0 42%, #000 70%);
}
@media (max-width: 900px) {
  .hero-film {
    opacity: .55;
    -webkit-mask-image: linear-gradient(180deg, transparent 0 46%, #000 72%);
    mask-image: linear-gradient(180deg, transparent 0 46%, #000 72%);
  }
}

/* ============================================================
   HERO-VEREDELUNG III: weiche Videoränder rundum,
   schwebendes Porträt, freigestellte Randnotiz.
   ============================================================ */

/* Video: alle vier Kanten lösen sich in Papier auf */
.hero-film {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0 40%, #000 64%, #000 88%, transparent 99%),
    linear-gradient(180deg, transparent 0, #000 16%, #000 56%, transparent 96%);
  mask-image:
    linear-gradient(90deg, transparent 0 40%, #000 64%, #000 88%, transparent 99%),
    linear-gradient(180deg, transparent 0, #000 16%, #000 56%, transparent 96%);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  filter: grayscale(1) brightness(1.22) contrast(1.06);
}
@media (max-width: 900px) {
  .hero-film {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%),
      linear-gradient(180deg, transparent 0 44%, #000 64%, #000 84%, transparent 98%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%),
      linear-gradient(180deg, transparent 0 44%, #000 64%, #000 84%, transparent 98%);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
  }
}

/* Porträt: schwebt schief und leicht über der Zeichnung */
.hero-portrait {
  margin: -4% 6% 0 9%;
  transform: rotate(-2.3deg);
  box-shadow:
    inset 0 0 0 1px rgba(43, 38, 32, .06),
    0 3px 8px rgba(43, 38, 32, .07),
    0 42px 70px -32px rgba(43, 38, 32, .45);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-portrait {
    animation: schweben 7.5s ease-in-out infinite alternate;
  }
  @keyframes schweben {
    from { transform: rotate(-2.3deg) translateY(0); }
    to   { transform: rotate(-2.3deg) translateY(-9px); }
  }
}

/* Randnotiz: über allem, nie überdeckt, nie beschnitten */
.hero-stage .handnote-v {
  z-index: 4;
  right: -1.6rem;
  font-size: 1.15rem;
}

/* ============================================================
   HERO-KORREKTUR IV: Die Bewegung ist der Star.
   Videofenster zeigt die zeichnende Hand; Porträt weicht
   nach oben rechts aus; Skizze wechselt auf dessen Ecke.
   ============================================================ */

/* Videofenster: auf die Hand-Zone des Hochformat-Videos gerichtet */
.hero-film {
  object-position: 62% 100%;
  opacity: .8;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0 34%, #000 56%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 90%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0 34%, #000 56%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 90%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}

/* Porträt: kompakter, oben rechts — gibt die Bühne frei */
.hero-portrait {
  width: min(76%, 310px);
  margin: -10% 0 0 auto;
}

/* Skizze: unter die LINKE untere Ecke des Porträts */
/* Randnotiz etwas höher, frei von der Skizze */
.hero-stage .handnote-v { top: 38%; }

@media (max-width: 900px) {
  .hero-film {
    object-position: 58% 76%;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
      linear-gradient(180deg, transparent 0 40%, #000 58%, #000 90%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
      linear-gradient(180deg, transparent 0 40%, #000 58%, #000 90%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
  }
}

/* ============================================================
   HERO-KORREKTUR VI: Das Video lebt auf der LINKEN Seitenhälfte
   (die Porträtspalte sitzt rechts). Zeichnung UND zeichnende Hand
   bleiben frei sichtbar; hinter dem Foto liegt nichts Dunkles mehr.
   Blass wie Bleistift auf Papier, an allen Kanten weich auslaufend.
   ============================================================ */

/* Der Schleier begrenzt das Video auf die linke Hälfte und trägt
   die weiche Ober- und Unterkante. overflow:hidden clippt den Rest. */
.film-schleier {
  position: absolute;
  top: 13%;
  bottom: auto;
  left: 350px;               /* nach rechts gerückt, weg vom Text */
  right: 36%;                 /* Porträtspalte rechts bleibt frei */
  /* Box = Zeichenbereich des Videos (Breite:Höhe ≈ 496:540). Weil das
     Seitenverhältnis der Box zum Bild passt, croppt object-fit:cover
     die Zeichnung NIE seitlich weg — egal wie schmal das Fenster wird. */
  aspect-ratio: 496 / 540;
  height: auto;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 86%, transparent 100%);
}

/* Video: volle Quellbreite (Zeichnung links, Hand rechts im Bild),
   weich in beide Seiten auslaufend, papierblass. Kein Zoom, kein Blend. */
.hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;    /* Zeichnung oben zeigen, leeres Papier unten wegschneiden */
  transform: none;
  mix-blend-mode: normal;
  filter: grayscale(1) brightness(1.3) sepia(.24) contrast(1);
  opacity: .42;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Randnotiz unter der (jetzt linken) Skizze: linksbündig, zwei Zeilen
   wie im Original (der <br> steuert den Umbruch — kein Auto-Umbruch). */
@media (max-width: 900px) {
  .film-schleier {
    inset: 0;                 /* einspaltig: volle Fläche, kein px-Versatz, kein Aspect */
    aspect-ratio: auto;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0 8%, #000 24%, #000 72%, transparent 92%);
    mask-image: linear-gradient(180deg, transparent 0 8%, #000 24%, #000 72%, transparent 92%);
  }
  .hero-film {
    object-position: 50% 22%;
    opacity: .32;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}

/* ============================================================
   SEKTION 03 „DER WEG" — Film-Bühne neu ausbalanciert
   (größeres Video, Textspalte füllt die Höhe, kein toter Raum
   rechts) + Vorlauf-Notiz als bewusst gesetzte Karteikarte.
   ============================================================ */

@media (min-width: 901px) {
  .film {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: stretch;          /* Textspalte auf Videohöhe strecken */
  }
  .entwurf-video {
    max-width: 440px;              /* deutlich größer als zuvor (380px) */
    width: 100%;
    margin: 0;
    justify-self: center;
    align-self: center;
  }
  .film-text {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .film-satz { max-width: 32em; }
  /* Handnotiz + Blatt an den unteren Rand ziehen → Spalte ist gefüllt */
  .film-hand { margin-top: auto; }
  .film-blatt { max-width: 240px; margin-top: 1.6rem; }
}

/* Vorlauf-Notiz: mittige Karteikarte mit Washi-Tape und
   handschriftlicher Überzeile — gehört klar zum Atelierbuch. */
.zeit {
  text-align: center;
  padding-bottom: 5.5rem;
}
/* Drei Zettel nebeneinander: Vorlauf, Preis und Hausbesuch — leicht
   gegeneinander gekippt, als lägen sie auf dem Tisch. */
.zeit-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 2rem;
  max-width: min(1360px, 94vw);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (max-width: 1180px) {
  .zeit-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
}
.zeit-karte {
  position: relative;
  /* Rasterfelder dürfen von sich aus nicht schmaler werden als ihr Inhalt
     (min-width: auto). Eine Karte, deren Inhalt 296 Pixel verlangt, ragt
     deshalb aus ihrer 213 Pixel breiten Spalte heraus — die gedeckelte
     Spalte allein genügt nicht, das Feld selbst muss nachgeben dürfen. */
  min-width: 0;
  max-width: 41rem;
  margin: 0 auto;
  padding: 2.4rem 2.2rem 2.2rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 24px 48px -30px rgba(43, 38, 32, .55);
  --kipp: -.5deg;
  transform: rotate(var(--kipp));
}
.zeit-karte-preis  { --kipp: .6deg; }
.zeit-karte-besuch { --kipp: -.35deg; }
/* In der schmaleren Spalte liest sich Flattersatz ruhiger als Mittelachse —
   und ohne Trennstriche, die im Handschriftlichen unsauber wirken. */
.zeit-karte p {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}
@media (max-width: 860px) {
  /* minmax(0, 1fr) statt 1fr: Eine 1fr-Spalte nimmt als Mindestmaß die
     kleinste Breite ihres Inhalts — will der nicht schmaler, dehnt sich die
     Spalte über den Behälter hinaus und die ganze Seite lässt sich seitwärts
     schieben. Auf 320 Pixeln standen die Zeitkarten so 23 Pixel über. */
  .zeit-karten { grid-template-columns: minmax(0, 1fr); gap: 2.8rem; }
}
.zeit-karte::before {              /* Washi-Tape wie bei Skizze & Video */
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  width: 120px; height: 28px;
  transform: translateX(-50%) rotate(-2deg);
  background: linear-gradient(rgba(233, 222, 197, .92), rgba(226, 213, 185, .78));
  box-shadow: 0 1px 3px rgba(43, 38, 32, .14);
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 100%, 3% 96%, 0 78%);
  pointer-events: none;
}
.zeit-label {
  display: block;
  color: var(--akzent);
  font-size: 1.55rem;
  line-height: 1;
  margin-bottom: .65rem;
}
/* alte Kasten-Optik der Absätze vollständig zurücksetzen */
.zeit p {
  max-width: 34em;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  transform: none;
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--ink-soft);
}
.zeit p strong { color: var(--ink); font-weight: 600; }
.zeit p a {
  color: var(--wald);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(22, 96, 92, .35);
  /* Kein white-space: nowrap. Hier steht ein ganzer Satz im Link — „Am besten
     ist es, wenn Sie früh fragen." misst 243 Pixel am Stück. Unumbrechbar
     zwingt er die Karte auf 296 Pixel Breite, und auf einem schmalen Telefon
     lässt sich dadurch die GANZE Seite seitwärts schieben. Die Unterstreichung
     läuft über den Umbruch hinweg mit, Zeile für Zeile. */
  transition: border-color .2s ease;
}
.zeit p a:hover { border-bottom-color: var(--wald); }

@media (max-width: 900px) {
  .zeit-karte { max-width: 34rem; padding: 1.9rem 1.6rem 1.7rem; }
}

/* ============================================================
   REPARATUR & ÄNDERUNG — heller Werkstattzettel im dunklen
   Anlass-Block: „… und wenn der Hut schon da ist?"
   ============================================================ */
.anlaesse .anlass-grid { padding-bottom: 3rem; }
.hutpflege {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem 5.5rem;
  text-align: center;
}
.hutpflege-zettel {
  position: relative;
  display: inline-block;
  max-width: 44rem;
  padding: 2.2rem 2.6rem 2rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 34px 64px -36px rgba(0, 0, 0, .85);
  transform: rotate(-.45deg);
}
.hutpflege-zettel::before {            /* Washi-Tape wie bei den Karteikarten */
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  width: 120px; height: 28px;
  transform: translateX(-50%) rotate(2deg);
  background: linear-gradient(rgba(233, 222, 197, .92), rgba(226, 213, 185, .78));
  box-shadow: 0 1px 3px rgba(43, 38, 32, .18);
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 100%, 3% 96%, 0 78%);
  pointer-events: none;
}
.hutpflege-label {
  display: block;
  color: var(--honig);
  font-size: 1.55rem;
  line-height: 1;
  margin-bottom: .7rem;
}
/* Schlussgedanke des Zettels — handschriftlich, wie an den Rand notiert */
.hutpflege-zettel p.hutpflege-nachsatz {
  font-family: var(--hand);
  margin-top: 1.2rem;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--wald);
  transform: rotate(-1.2deg);
}
.hutpflege-zettel h3 {
  font-family: var(--serif);
  font-weight: 430;
  font-style: normal;
  font-size: 1.65rem;
  color: var(--ink);
  margin-bottom: .75rem;
}
.hutpflege-zettel p {
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.7;
  max-width: 36em;
  margin: 0 auto;
  /* keine automatische Silbentrennung — ganze Wörter brechen um */
  hyphens: manual;
  -webkit-hyphens: manual;
}

@media (max-width: 900px) {
  .hutpflege { padding-bottom: 4.5rem; }
  .hutpflege-zettel { padding: 1.9rem 1.5rem 1.7rem; }
}

/* ============================================================
   ZAUBER-SCHICHT — sieben Momente aus dem Handwerk
   Messen · Stecken · Nähen · Dämpfen · Fädeln · Entwerten · Knopf
   Alles nur transform/opacity; verschwindet bei Bewegungsverzicht.
   ============================================================ */

/* ---------- 1 · Die Naht näht den Weg (№ 03) ---------- */
/* Eine Nadel näht die Linie, auf der die vier Schritte aufgereiht sind.
   Bewegung und Naht stehen zusammen in script.js: die Nadel taucht auf und
   ab, und genau dort, wo sie heraus- und wieder eintaucht, entsteht ein
   Stich. Hier steht nur, wie das Ganze aussieht und wo es liegt. */
.schritte:has(.naht)::before { display: none; }  /* alte Linie weicht der Naht */
/* Eine <ol> darf nur Listenpunkte enthalten — deshalb sitzt die Naht in
   einem eigenen. Der Halter selbst erzeugt keinen Kasten, das SVG hängt
   also weiterhin absolut an der Liste und nicht am Listenpunkt. */
.naht-halter { display: contents; }
.naht {
  /* Kein viewBox: eine Einheit ist ein Pixel, nichts wird gedehnt.
     Der Nullpunkt liegt auf der Naht, alles darüber ist sichtbar. */
  position: absolute;
  top: calc(1.35rem + 34px);
  left: 0;
  width: 100%;                                  /* ohne Breite nähme das SVG
                                                   seine Standard-300px an */
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.naht-faden {
  fill: none;
  stroke: var(--honig);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .8;
}
.nadel-zwirn {
  fill: none;
  stroke: var(--honig);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .85;
}
.nadel-koerper {
  fill: url(#nadel-stahl);                      /* Stahl statt grauer Strich */
  stroke: rgba(43, 38, 32, .32);
  stroke-width: .3;
}
.nadel { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .nadel { display: block; }
}

/* Aus den Nummernkreisen werden gesteckte Nadeln: Glaskopf + Schaft */
.pin {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85) 0 8%, transparent 34%),
    radial-gradient(circle at 60% 65%, rgba(43, 38, 32, .06), transparent 60%),
    var(--paper-card);
  z-index: 1;
}
.pin::after {                                   /* der Nadelschaft */
  content: "";
  position: absolute;
  left: 50%; top: 88%;
  width: 1.5px; height: 24px;
  background: linear-gradient(180deg, var(--ink-soft), rgba(92, 84, 74, 0));
  transform: rotate(-24deg);
  transform-origin: top center;
  z-index: -1;
}

/* ---------- 2 · Das Maßband am Rand (Scroll-Fortschritt) ---------- */
/* Ein echtes Schneiderband: gelbes Band, an jedem Zentimeter eine schwarze
   Zahl, dazwischen die feine Millimeter-Teilung, alle fünf Millimeter ein
   längerer Strich. Der Zentimeter ist keine feste Pixelzahl, sondern ein
   Bruchteil der Bandhöhe (script.js setzt --cm) — die ganze Seite ist
   57 cm lang, eine durchschnittliche Kopfweite. */
.massband {
  position: fixed;
  top: 76px; right: 0; bottom: 0;
  width: calc(var(--cm, 36px) * 1.5);           /* etwas schlanker als das echte 2:1-Band */
  z-index: 90;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg,           /* Zentimeterlinie, volle Breite */
      rgba(58, 45, 28, .72) 0 1.7px, transparent 1.7px var(--cm, 36px)),
    repeating-linear-gradient(180deg,           /* halbe Zentimeter, linke Kante */
      rgba(58, 45, 28, .6) 0 1.2px, transparent 1.2px calc(var(--cm, 36px) / 2)),
    repeating-linear-gradient(180deg,           /* halbe Zentimeter, rechte Kante */
      rgba(58, 45, 28, .6) 0 1.2px, transparent 1.2px calc(var(--cm, 36px) / 2)),
    repeating-linear-gradient(180deg,           /* Millimeter, linke Kante */
      rgba(58, 45, 28, .5) 0 1px, transparent 1px calc(var(--cm, 36px) / 10)),
    repeating-linear-gradient(180deg,           /* Millimeter, rechte Kante */
      rgba(58, 45, 28, .5) 0 1px, transparent 1px calc(var(--cm, 36px) / 10)),
    repeating-linear-gradient(180deg,           /* helle, blankgegriffene Stellen */
      transparent 0 84px, rgba(252, 246, 228, .16) 118px, transparent 166px,
      transparent 232px, rgba(250, 243, 222, .12) 274px, transparent 318px, transparent 421px),
    repeating-linear-gradient(180deg,           /* dunkle Patina-Wolken */
      transparent 0 46px, rgba(122, 92, 26, .08) 132px, transparent 205px,
      transparent 300px, rgba(105, 78, 22, .07) 356px, transparent 407px, transparent 503px),
    linear-gradient(90deg, #c9a637, #e3ca67 20%, #eed98b 48%, #e5cc64 74%, #c5a133);
  background-size: 100% 100%, 20% 100%, 20% 100%, 13% 100%, 13% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: left top, left top, right top, left top, right top, left top, left top, left top;
  background-repeat: repeat-y;
  border-left: 1px solid rgba(115, 86, 24, .55);
  box-shadow: inset 3px 0 6px rgba(112, 84, 24, .22), inset -2px 0 5px rgba(112, 84, 24, .14), -2px 0 10px -4px rgba(43, 38, 32, .28);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .45s, transform .45s;
}
.massband.sichtbar { opacity: 1; transform: none; }
.massband-skala { position: absolute; inset: 0; }
/* Die Zahlen liegen quer — so, wie man ein hängendes Maßband liest. */
.massband-zahl {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--zahl, 25px);
  line-height: 1;
  letter-spacing: -.03em;
  /* abgeriebene Druckfarbe: warmes Dunkelbraun statt Fabrikschwarz;
     wie stark jede Zahl verblasst ist, würfelt script.js (--blass, --dreh) */
  color: rgba(52, 40, 24, .84);
  opacity: var(--blass, 1);
  transform: translateY(-50%) rotate(var(--dreh, 0deg));
}
.massband-zeiger {                              /* wandert mit dem Fortschritt */
  position: absolute;
  left: 0; right: 0;
  top: 0; height: 0;
  will-change: transform;
}
.massband-zeiger::before {                      /* Ablesekante quer übers Band */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--ziegel);
  box-shadow: 0 0 4px rgba(164, 72, 47, .5);
}
.massband-zeiger::after {                       /* Dreiecksmarke davor */
  content: "";
  position: absolute;
  right: 100%; top: -6px;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-right-color: var(--ziegel);
}
/* Die laufende Kapitelnummer reist mit der Ablesekante. Sie bekommt ein
   eigenes Schildchen, weil sie über Papier, dunkle Fotos und farbige
   Blätter hinwegwandert. */
.kapitel-jetzt {
  position: absolute;
  right: 100%;
  margin-right: 15px;
  top: 50%;
  transform: translateY(-50%);
  padding: .12rem .4rem .16rem;
  background: var(--paper-card);
  border: 1px solid rgba(164, 72, 47, .5);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(43, 38, 32, .18);
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--ziegel);
  opacity: 0;
  transition: opacity .3s;
}
.kapitel-jetzt.da { opacity: 1; }

@media (max-width: 1100px) { .massband { display: none; } }
@media (prefers-reduced-motion: reduce) { .massband { display: none; } }

/* ---------- 3 · entfällt — der Perlensaum ist am 02.08. entfernt worden ---------- */

/* ---------- 4 · Dampf überm Atelier ---------- */
.atelier-film .crop-fenster { overflow: hidden; }
.dampf {
  position: absolute;
  bottom: 28%;
  width: 46px; height: 88px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(251, 247, 238, .55), rgba(251, 247, 238, 0) 70%);
  filter: blur(7px);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .dampf { animation: dampf-zug 8.5s ease-in-out infinite; }
  .dampf.d2 { animation-duration: 10.5s; animation-delay: 3.2s; }
  .dampf.d3 { animation-duration: 12s;  animation-delay: 6.1s; }
}
@keyframes dampf-zug {
  0%   { opacity: 0;   transform: translate(0, 12px) scale(.7); }
  22%  { opacity: .38; }
  55%  { opacity: .16; }
  100% { opacity: 0;   transform: translate(14px, -120px) scale(1.25); }
}

/* ---------- 5 · Das Formular näht mit ---------- */
/* Fokus: statt schlichter Linie zieht sich eine Stichnaht unters Feld */
.feld input[type="text"]:focus,
.feld input[type="email"]:focus,
.feld input[type="date"]:focus,
.feld select:focus {
  border-bottom-color: transparent;
  background-image: repeating-linear-gradient(90deg,
    var(--wald) 0 7px, transparent 7px 12px);
  background-size: 0% 1.6px;
  background-position: left bottom;
  background-repeat: no-repeat;
  animation: naht-ziehen .55s cubic-bezier(.3, 0, .2, 1) forwards;
}
@keyframes naht-ziehen {
  to { background-size: 100% 1.6px; }
}
@media (prefers-reduced-motion: reduce) {
  .feld input:focus, .feld select:focus {
    animation: none;
    background-size: 100% 1.6px;
  }
}
/* Foto gewählt: die Nadel steckt das Bild an den Bogen */
.datei-name { position: relative; transition: color .3s; }
.datei-feld.angeheftet .datei-name { color: var(--wald); }
.nadel-icon {
  width: 15px; height: 15px;
  margin-right: .3rem;
  vertical-align: -2px;
  transform: rotate(20deg);
}
.nadel-icon .ni-kopf { fill: var(--ziegel); }
.nadel-icon .ni-glanz { fill: rgba(255, 255, 255, .7); }
.nadel-icon .ni-schaft { stroke: var(--ink-soft); stroke-width: 1.4; stroke-linecap: round; }

/* ---------- 7 · Stecknadeln an den Fotos ---------- */
/* Die drei kleinen Blicke hängen gesteckt an der Wand, nicht geklebt. */
.blicke-row .frame::before {
  content: none;                                /* kein Washi hier */
}
.blicke-row .frame::after {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0 18%, transparent 45%),
    var(--ziegel);
  box-shadow:
    0 1px 2px rgba(43, 38, 32, .35),
    0 14px 5px -4px rgba(43, 38, 32, .06);      /* Schattenwurf der Nadel */
  transform: translateX(-50%);
}
.blicke-row .frame:nth-child(2)::after { background-color: var(--honig); background-image: radial-gradient(circle at 34% 30%, rgba(255,255,255,.9) 0 18%, transparent 45%); transform: translateX(-58%) translateY(1px); }
.blicke-row .frame:nth-child(3)::after { transform: translateX(-42%); }

/* ---------- 8 · Der Knopf zurück nach oben ---------- */
/* Ein schlichter Knopf mit vier Löchern — beim Klick geht es zum Anfang. */
.knopf-oben {
  position: fixed;
  right: 1.15rem; bottom: 1.3rem;
  width: 52px; height: 52px;
  z-index: 150;
  display: grid; place-items: center;
  padding: 0;
  background: var(--paper-card);
  border: 1.5px solid var(--honig);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 4px var(--paper-card),
    inset 0 0 0 5px rgba(185, 138, 62, .45),
    0 10px 24px -10px rgba(43, 38, 32, .4);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) rotate(-8deg);
  pointer-events: none;
  transition: opacity .4s, transform .4s cubic-bezier(.34, 1.4, .5, 1);
}
.knopf-oben.da {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.knopf-oben svg { display: block; width: 30px; height: 30px; overflow: visible; }
.knopf-oben .kn-loch { fill: var(--paper-deep); stroke: rgba(43, 38, 32, .28); stroke-width: .8; }
.knopf-oben:hover, .knopf-oben:focus-visible {
  transform: rotate(6deg);
}
.knopf-oben:focus-visible { outline: 2px solid var(--wald); outline-offset: 3px; }
@media (max-width: 1100px) {
  .knopf-oben { right: .85rem; bottom: .95rem; }
}

/* ============================================================
   PROBE-BLATT — Man blättert durchs Atelierbuch (Hero + № 01)
   Aktiv nur: großer Schirm + Bewegung erlaubt + Browser kann
   scrollgetriebene Animationen. Sonst bleibt alles die vertraute,
   fließende Seite — auch die eingefrorene englische Ausgabe.
   ============================================================ */

@supports (animation-timeline: view()) or (--hf: 1) {
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {

  /* ---------- Bühnen & Blätter ---------- */
  main { timeline-scope: --bHero; }
  .buehne { position: relative; }
  .buehne > section {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    box-sizing: border-box;
  }
  .buehne-hero { height: 132svh; z-index: 1; view-timeline: --bHero block; }

  /* Der erste Faden entfällt — das Umblättern ist der Übergang */
  .buehne-hero + .thread { display: none; }

  /* Reveals nicht doppelt spielen — die Szene führt Regie */
  .buehne .reveal { opacity: 1; transform: none; }

  /* ---------- Blatt 1: der Hero ---------- */
  .buehne-hero > .hero {
    height: 100svh;
    padding-top: clamp(4rem, 7svh, 6rem);
    padding-bottom: clamp(5rem, 19svh, 12rem); /* preist den Skizzen-Überhang ein */
    align-content: center;
    align-items: center;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 2rem 3.5rem;
  }
  /* Das Blatt weicht leicht zurück, während sich das nächste auflegt */



  /* Blatt 1: EINE Komposition, die als Ganzes mittig steht und mit
     der Blatthöhe wächst — Porträt begrenzt durch Höhe UND Breite,
     damit auf sehr hohen Fenstern die Luft symmetrisch bleibt
     statt unten ein Loch zu reißen. */
  .buehne-hero .hero h1 { font-size: clamp(3.2rem, 8svh, 5.2rem); }
  .buehne-hero .hero .lede { font-size: clamp(1.05rem, 2.1svh, 1.3rem); max-width: 34em; }
  .buehne-hero .hero-actions { margin-top: 1svh; }
  .buehne-hero .hero-portrait { width: min(94%, 56svh); }
  .buehne-hero .film-schleier { top: 12%; }

  /* ---------- Blatt 2: № 01 legt sich auf ---------- */
  .buehne-01 > .strich {
    background-color: var(--paper);
    background-image:
      radial-gradient(rgba(43, 38, 32, .028) 1px, transparent 1.5px),
      radial-gradient(rgba(43, 38, 32, .018) 1px, transparent 1.5px);
    background-size: 26px 26px, 17px 17px;
    background-position: 0 0, 9px 13px;
    border-radius: 18px 18px 0 0;
    box-shadow:
      0 -14px 30px -18px rgba(43, 38, 32, .55),
      0 -36px 80px -30px rgba(43, 38, 32, .35);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    animation: blatt-legen 1ms linear both;
    animation-timeline: --bHero;
    animation-range: 0% 24%;
  }

  /* Kopf der Szene tritt auf, sobald das Blatt liegt */
  .buehne-01 .sec-head {
    padding-top: 5rem;
    padding-bottom: 0;
    animation: szene-auf 1ms linear both;
    animation-timeline: --bHero;
    animation-range: 20% 34%;
  }

  /* Die beiden Paare teilen sich die Bühne: erst das Stroh, dann die Blüten */
  .buehne-01 .pairs {
    position: relative;
    height: 100%;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .buehne-01 .pair {
    position: absolute;
    inset: 0 1.5rem;
    align-content: center;
    margin: 0;
  }
  .buehne-01 .pair:first-child {
    animation: paar-eins 1ms linear both;
    animation-timeline: --bHero;
    animation-range: 28% 74%;
  }
  .buehne-01 .pair:last-child {
    animation: paar-zwei 1ms linear both;
    animation-timeline: --bHero;
    animation-range: 62% 92%;
  }

}
}

/* Die Keyframes stehen außerhalb der Media-Query (harmlos ohne Nutzung) */
@keyframes hero-weichen {
  to { transform: translateY(-4svh) scale(.982); filter: brightness(.93); }
}
@keyframes blatt-legen {
  from { transform: rotate(.65deg) translateY(6px); }
  to   { transform: none; }
}
@keyframes szene-auf {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes paar-eins {
  0%   { opacity: 0; transform: translateY(46px) rotate(.4deg); }
  20%  { opacity: 1; transform: none; }
  78%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-30px) scale(.985); }
}
@keyframes paar-zwei {
  0%   { opacity: 0; transform: translateY(50px) rotate(-.4deg); }
  38%  { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}

/* ============================================================
   № 05 · EIN ZWEITES LEBEN — Reparatur, Änderung, Upcycling
   ============================================================ */
.leben {
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
}
.leben-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 5.5rem 1.5rem 6rem;
  display: grid;
  /* Kopfzeile über die volle Breite, darunter Text links und der eine
     Verwandlungs-Abzug rechts — er trägt die Beweisführung des Kapitels. */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: .4rem 2.6rem;
  align-items: center;
}
.leben-kopf { grid-column: 1 / -1; }
.leben-kopf h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 400;
  margin: .4rem 0 1.2rem;
}
.leben-kopf h2 em { font-style: italic; color: var(--akzent); }
.leben-text p {
  max-width: 36em;
  margin-bottom: 1.15rem;
  color: var(--ink-soft);
  hyphens: manual;
  -webkit-hyphens: manual;
}
.leben-text p strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}
.leben-text p.leben-nachsatz {
  font-family: var(--hand);
  margin-top: 1.4rem;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--wald);
  transform: rotate(-1.2deg);
}
.leben-bild { max-width: 420px; justify-self: center; }
.leben-text p, .upcycling-satz { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 900px) {
  .leben-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .leben-bild { max-width: 340px; }
}

/* Atelier: zwei kleine Materialbilder nebeneinander */
.atelier-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

/* ---------- Aufarbeitung: Vorher/Nachher nebeneinander ---------- */
/* ---------- № 05 · Die Verwandlung ----------
   Ein einziger Abzug trägt beide Zustände: das Vorher liegt unten, das
   Nachher darüber — derselbe Überblend-Griff wie der zweite Blick der
   Werkschau (.wechselbild), nur ans Scrollen der Bühne gebunden. Die
   Zuschnitte sind deckungsgleich angelegt (Zettel auf Zettel, Kordel auf
   Kordel), damit es wie EIN Hut wirkt, der sich erneuert — nicht wie ein
   Bildwechsel. Die Beschriftung wandelt sich mit: das Nachher-Schild legt
   sich mit Papiergrund über das Vorher-Schild. */
.verwandlung {
  justify-self: end;
  /* so groß, wie das Blatt hergibt: die Höhe begrenzt, nicht die Spalte */
  width: min(100%, 66svh);
  transform: rotate(-1.4deg);
  /* darf über die Textspalte hinaus Richtung Bildschirmrand wachsen */
  margin-right: clamp(-6rem, calc((var(--maxw) - 100vw) / 2 + 4rem), 0rem);
}
.verwandlung img { aspect-ratio: 1 / 1; object-fit: cover; }
.verwandlung figcaption { position: relative; }
.verwandlung .vn-neu {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding-top: .7rem;
  background: var(--paper-card);
  opacity: 0;
  transition: opacity .45s ease;
}
/* Ohne Bühne (klassischer Fluss) zeigt die MAUS die Verwandlung — auf dem
   Telefon hätte sie sonst am klebenden Hover gehangen wie die Werkkarten. */
@media (hover: hover) {
  .verwandlung:hover .vn-neu { opacity: 1; }
}
@media (max-width: 900px) {
  .verwandlung { width: min(100%, 420px); justify-self: center; margin-right: 0; }
}
/* Unübersehbar: dieses Bild ist geliehen, bis das echte kommt */
.platzhalter-marke {
  position: absolute;
  top: 5.6rem; right: 2.6rem;
  margin: 0;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(222, 170, 62, .92);
  border: 1px dashed rgba(43, 38, 32, .5);
  padding: .3rem .7rem;
  border-radius: 2px;
  transform: rotate(1.4deg);
}

@supports (animation-timeline: view()) or (--hf: 1) {
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {

  /* Atelier hat zwei Szenen: Raum MIT Vorstellung · Werkstattwissen */
  .buehne-atelier { height: 360svh; }
  .buehne-atelier .atelier-papier  { animation-name: szene-auftritt; animation-range: 0% 39.13%; }
  .buehne-atelier .atelier-szene-b { animation-name: szene-halten;   animation-range: 33.65% 56.52%; }
  .buehne-atelier > section { animation-range: 0% 25.00%; }
  /* Schleier unter dem Text: Das Werkbankfoto ist hell (Arbeitstuch), ohne
     Abdunklung läge der cremefarbene Text bei 1,2:1 und wäre unlesbar. Der
     Verlauf deckt nur das obere Drittel — Schere und Schleier bleiben klar. */
  .atelier-raum .raum-bild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(16, 13, 10, .70) 0%,
      rgba(16, 13, 10, .66) 24%,
      rgba(16, 13, 10, .60) 34%,
      rgba(16, 13, 10, .28) 52%,
      transparent 70%);
    z-index: 2;
    pointer-events: none;
  }

}
}

/* ============================================================
   BLÄTTER — das ganze Atelierbuch, in einem Stück
   Eine Quelle für Bühnen, Szenenfenster und Bildregie.
   Aktiv nur: großer Schirm · Bewegung erlaubt · Timeline-Support.
   Sonst (und in der eingefrorenen EN-Ausgabe) fließt alles klassisch.
   ============================================================ */
@supports (animation-timeline: view()) or (--hf: 1) {
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {

  main { timeline-scope: --bHero, --bwerke, --batelier, --bweg, --banlaesse, --bleben; }
  .thread { display: none; }

  /* Kein scroll-snap: Bild auf/ab rechnet die Sprungweite jetzt selbst
     (script.js) — Rastpunkte würden dem nur in die Quere kommen. */
  .buehne-hero { height: 200svh; }

  /* Werkschau — sechs Werke im gleichen Takt.
     Die Bühne ist 760svh hoch, der Zeitstrahl also 860svh lang; 1 % = 8,6svh,
     und der Nullpunkt liegt 100svh vor dem Aufliegen des Blattes.
     Jedes Werk bekommt exakt 80svh, immer in derselben Folge:

       13svh  Überblendung vom Vorgänger (der geht, dieses kommt)
       30svh  erste Ansicht allein          ← hier hält Bild ab/auf an
       12svh  Wechsel auf die zweite Ansicht
       25svh  zweite Ansicht allein
       ————
       80svh

     Damit das Aus- und das Einblenden zweier Werke deckungsgleich laufen,
     ist jedes Fenster 93,02svh lang (die Keyframes blenden über 14 % ein und
     aus: 0,14 · 93,02 = 13,02svh) und beginnt 80svh nach dem vorigen.
     Werk 1 muss schon während des Aufsteigens dastehen, sein Fenster ist
     deshalb länger — es blendet über werk-erst mit denselben 13svh. */
  .buehne-werke { height: 760svh; margin-top: -100svh; z-index: 2; view-timeline: --bwerke block; }
  .buehne-werke .werkschau .sec-head { animation: werk-erst 1ms linear both; animation-timeline: --bwerke; animation-range: 0.00% 15.12%; }
  .buehne-werke .werk:nth-of-type(1) { animation: werk-erst 1ms linear both; animation-timeline: --bwerke; animation-range: 0.00% 20.93%; }
  .buehne-werke .werk:nth-of-type(2) { animation: szene-auftritt 1ms linear both; animation-timeline: --bwerke; animation-range: 19.42% 30.23%; }
  .buehne-werke .werk:nth-of-type(3) { animation: szene-auftritt 1ms linear both; animation-timeline: --bwerke; animation-range: 28.72% 39.53%; }
  .buehne-werke .werk:nth-of-type(4) { animation: szene-auftritt 1ms linear both; animation-timeline: --bwerke; animation-range: 38.02% 48.84%; }
  .buehne-werke .werk:nth-of-type(5) { animation: szene-auftritt 1ms linear both; animation-timeline: --bwerke; animation-range: 47.32% 58.14%; }
  .buehne-werke .werk:nth-of-type(6) { animation: szene-auftritt 1ms linear both; animation-timeline: --bwerke; animation-range: 56.63% 67.44%; }
  .buehne-werke .werk-schluss { animation: szene-halten 1ms linear both; animation-timeline: --bwerke; animation-range: 67.44% 76.74%; }
  /* Jedes Werk atmet: das ganze Bild geht langsam von 1,04 auf 1 zurück —
     Motiv, Detailaufnahme und unscharfer Grund gemeinsam, deshalb am Rahmen
     und nicht am einzelnen Foto.

     Der zweite Blick löst den ersten dann ab, statt sich über ihn zu legen:
     im selben Fenster weicht in der ersten Hälfte das Motiv, in der zweiten
     kommt die Detailaufnahme. Zwei halbdurchsichtige Fotos übereinander
     sahen sonst wie ein Geisterbild aus — der helle Rand des unteren Fotos
     schien durch das obere hindurch. Safari und Firefox überspringen die
     Zwischenschritte beim Mausrad, Chrome und Edge gleiten hindurch und
     zeigten es bei jedem Rad-Dreh. */
  .buehne-werke .werk:nth-of-type(1) .frame { animation: blatt-atmen 1ms linear both; animation-timeline: --bwerke; animation-range: 0.00% 20.93%; }
  .buehne-werke .werk:nth-of-type(1) .frame > img:first-child { animation: bild-ab 1ms linear both; animation-timeline: --bwerke; animation-range: 15.12% 16.51%; }
  .buehne-werke .werk:nth-of-type(1) .wechselbild,
  .buehne-werke .werk:nth-of-type(1) .wechsel-notiz { animation: wechsel-spaet 1ms linear both; animation-timeline: --bwerke; animation-range: 15.12% 16.51%; }
  .buehne-werke .werk:nth-of-type(2) .frame { animation: blatt-atmen 1ms linear both; animation-timeline: --bwerke; animation-range: 19.42% 30.23%; }
  .buehne-werke .werk:nth-of-type(2) .frame > img:first-child { animation: bild-ab 1ms linear both; animation-timeline: --bwerke; animation-range: 24.42% 25.81%; }
  .buehne-werke .werk:nth-of-type(2) .wechselbild,
  .buehne-werke .werk:nth-of-type(2) .wechsel-notiz { animation: wechsel-spaet 1ms linear both; animation-timeline: --bwerke; animation-range: 24.42% 25.81%; }
  .buehne-werke .werk:nth-of-type(3) .frame { animation: blatt-atmen 1ms linear both; animation-timeline: --bwerke; animation-range: 28.72% 39.53%; }
  .buehne-werke .werk:nth-of-type(3) .frame > img:first-child { animation: bild-ab 1ms linear both; animation-timeline: --bwerke; animation-range: 33.72% 35.12%; }
  .buehne-werke .werk:nth-of-type(3) .wechselbild,
  .buehne-werke .werk:nth-of-type(3) .wechsel-notiz { animation: wechsel-spaet 1ms linear both; animation-timeline: --bwerke; animation-range: 33.72% 35.12%; }
  .buehne-werke .werk:nth-of-type(4) .frame { animation: blatt-atmen 1ms linear both; animation-timeline: --bwerke; animation-range: 38.02% 48.84%; }
  .buehne-werke .werk:nth-of-type(4) .frame > img:first-child { animation: bild-ab 1ms linear both; animation-timeline: --bwerke; animation-range: 43.02% 44.42%; }
  .buehne-werke .werk:nth-of-type(4) .wechselbild,
  .buehne-werke .werk:nth-of-type(4) .wechsel-notiz { animation: wechsel-spaet 1ms linear both; animation-timeline: --bwerke; animation-range: 43.02% 44.42%; }
  .buehne-werke .werk:nth-of-type(5) .frame { animation: blatt-atmen 1ms linear both; animation-timeline: --bwerke; animation-range: 47.32% 58.14%; }
  .buehne-werke .werk:nth-of-type(5) .frame > img:first-child { animation: bild-ab 1ms linear both; animation-timeline: --bwerke; animation-range: 52.33% 53.72%; }
  .buehne-werke .werk:nth-of-type(5) .wechselbild,
  .buehne-werke .werk:nth-of-type(5) .wechsel-notiz { animation: wechsel-spaet 1ms linear both; animation-timeline: --bwerke; animation-range: 52.33% 53.72%; }
  .buehne-werke .werk:nth-of-type(6) .frame { animation: blatt-atmen 1ms linear both; animation-timeline: --bwerke; animation-range: 56.63% 67.44%; }
  .buehne-werke .werk:nth-of-type(6) .frame > img:first-child { animation: bild-ab 1ms linear both; animation-timeline: --bwerke; animation-range: 61.63% 63.02%; }
  .buehne-werke .werk:nth-of-type(6) .wechselbild,
  .buehne-werke .werk:nth-of-type(6) .wechsel-notiz { animation: wechsel-spaet 1ms linear both; animation-timeline: --bwerke; animation-range: 61.63% 63.02%; }
  .buehne-werke > section { animation: blatt-legen 1ms linear both; animation-timeline: --bwerke; animation-range: 0.00% 13.37%; }
  .buehne-atelier { height: 360svh; margin-top: -100svh; z-index: 3; view-timeline: --batelier block; }
  .buehne-atelier .atelier-papier { animation: szene-auftritt 1ms linear both; animation-timeline: --batelier; animation-range: 0.00% 39.13%; }
  .buehne-atelier .atelier-szene-b { animation: szene-halten 1ms linear both; animation-timeline: --batelier; animation-range: 39.13% 56.52%; }
  .buehne-atelier > section { animation: blatt-legen 1ms linear both; animation-timeline: --batelier; animation-range: 0% 25.00%; }
  .buehne-weg { height: 440svh; margin-top: -100svh; z-index: 4; view-timeline: --bweg block; }
  .buehne-weg .szene-schritte { animation: szene-auftritt 1ms linear both; animation-timeline: --bweg; animation-range: 0.00% 33.33%; }
  /* Karten vor Film: das Kapitel führt erst den Ablauf, dann die Bedingungen —
     der Film ist der Ausklang. Reihenfolge im Markup und hier identisch,
     sonst rechnet die Tastensteuerung die Ruhelagen falsch. */
  .buehne-weg .szene-karten { animation: szene-auftritt 1ms linear both; animation-timeline: --bweg; animation-range: 33.33% 48.15%; }
  .buehne-weg .szene-film { animation: szene-halten 1ms linear both; animation-timeline: --bweg; animation-range: 48.15% 62.96%; }
  /* Die drei Karten legen sich nacheinander aufs Blatt, von links her.
     Die Fenster liegen im Zeitstrahl des Kapitels: das Blatt steht ab
     91,2 svh allein, die Ruhelage von Bild ab/auf liegt bei 120 svh —
     die letzte Karte ist bei 116 svh gelegt, also rechtzeitig davor.
     (svh ab Kapitelanfang; 1 % des Zeitstrahls = 5,4 svh, Null bei −100.) */
  .buehne-weg .zeit-karte:nth-child(1) { animation: karte-legen 1ms linear both; animation-timeline: --bweg; animation-range: 35.56% 37.41%; }
  .buehne-weg .zeit-karte:nth-child(2) { animation: karte-legen 1ms linear both; animation-timeline: --bweg; animation-range: 36.85% 38.70%; }
  .buehne-weg .zeit-karte:nth-child(3) { animation: karte-legen 1ms linear both; animation-timeline: --bweg; animation-range: 38.15% 40.00%; }
  .buehne-weg > section { animation: blatt-legen 1ms linear both; animation-timeline: --bweg; animation-range: 0% 21.30%; }
  .buehne-anlaesse { height: 280svh; margin-top: -100svh; z-index: 5; view-timeline: --banlaesse block; }
  .buehne-anlaesse .szene { animation: szene-halten 1ms linear both; animation-timeline: --banlaesse; animation-range: 0.00% 47.37%; }
  .buehne-anlaesse > section { animation: blatt-legen 1ms linear both; animation-timeline: --banlaesse; animation-range: 0% 30.26%; }
  .buehne-leben { height: 360svh; margin-top: -100svh; z-index: 6; view-timeline: --bleben block; }
  /* Szene A läuft bis 50 %: das Nachher steht nach der Verwandlung
     (Fenster 29,5–33,5 %) volle 9,5 Punkte allein — vorher begann der
     Abgang schon bei 33,65 %, das Ergebnis war kaum zu sehen. */
  .buehne-leben .leben-szene-a { animation: szene-auftritt 1ms linear both; animation-timeline: --bleben; animation-range: 0.00% 50.00%; }
  /* Die Verwandlung. Das Blatt klebt ab 26,3 % (vh geteilt durch Bühnenlauf,
     fensterunabhängig); die Szene beginnt ihren Abgang bei 33,65 %. Dazwischen
     liegt das Fenster: erst steht das Vorher (dort landet auch Bild ab, Ruhe
     bei ~28 %), von 29,5 bis 33,5 % löst es sich ins Nachher auf — Bild und
     Schild gemeinsam. Danach steht das Nachher bis 43 % unangetastet, ehe
     die Szene ihren Abgang beginnt. Muster identisch zur Werkschau, damit
     Antrieb und Tastensteuerung die Bereiche mitlesen. */
  .buehne-leben .leben-szene-a .wechselbild,
  .buehne-leben .leben-szene-a .vn-neu { animation: wechsel-auf 1ms linear both; animation-timeline: --bleben; animation-range: 29.50% 33.50%; }
  .buehne-leben .leben-szene-b { animation: szene-halten 1ms linear both; animation-timeline: --bleben; animation-range: 50.00% 64.00%; }
  .buehne-leben > section { animation: blatt-legen 1ms linear both; animation-timeline: --bleben; animation-range: 0% 25.00%; }

  /* ---------- Blattpapier ---------- */
  .buehne-werke > .werkschau,
  .buehne-atelier > .atelier,
  .buehne-weg > .weg {
    background-color: var(--paper);
    background-image:
      radial-gradient(rgba(43, 38, 32, .028) 1px, transparent 1.5px),
      radial-gradient(rgba(43, 38, 32, .018) 1px, transparent 1.5px);
    background-size: 26px 26px, 17px 17px;
    background-position: 0 0, 9px 13px;
  }
  .buehne:not(.buehne-hero) > section {
    border-radius: 18px 18px 0 0;
    box-shadow:
      0 -14px 30px -18px rgba(43, 38, 32, .55),
      0 -36px 80px -30px rgba(43, 38, 32, .35);
  }

  /* ---------- Szenen ---------- */
  .buehne .szene {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    padding-top: 4.5rem;
    overflow: hidden;
  }

  /* ---------- Werke: Kino-Bühne ---------- */
  .buehne-werke .werkschau { padding: 0; }
  .buehne-werke .werke { display: contents; }
  /* Der Rahmen füllt die ganze Bühne und atmet — beim Aufziehen ragte er
     sonst seitlich über den Schirm hinaus und brächte einen Querbalken. */
  .buehne-werke .werk { position: absolute; inset: 0; overflow: hidden; }

  .buehne-werke .werk .frame {
    position: absolute;
    inset: 0;
    width: auto; height: auto;
    margin: 0; padding: 0;
    border: none; background: none;
    box-shadow: none; border-radius: 0;
    transform: none;
    overflow: hidden;
  }
  /* unscharfe Bildbühne */
  .buehne-werke .werk .frame::before {
    content: "";
    position: absolute;
    clip-path: none;
    inset: -6%;
    width: auto; height: auto;
    border: none; box-shadow: none; transform: none;
    background: var(--bild) center / cover no-repeat;
    filter: blur(38px) brightness(.62) saturate(.85);
    z-index: 0;
  }
  .buehne-werke .werk .frame::after {
    content: "";
    position: absolute;
    clip-path: none;
    inset: 0;
    width: auto; height: auto;
    border: none; box-shadow: none; transform: none;
    background:
      radial-gradient(120% 80% at 50% 42%, transparent 38%, rgba(20, 16, 12, .42)),
      linear-gradient(0deg, rgba(20, 16, 12, .3), transparent 40%);
    z-index: 1;
  }
  /* das vollständige Motiv — Maße explizit, weil <img> ein ersetztes Element ist */
  .buehne-werke .werk .frame img {
    position: absolute;
    top: 7svh; left: 50%;
    width: calc(100% - 8vw);
    height: calc(100% - 19svh);
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 24px 46px rgba(0, 0, 0, .5));
  }
  .buehne-werke .werk .wechselbild { opacity: 0; transition: none; }

  /* Auftakt: Überschrift und erstes Werk teilen sich die Szene */
  .buehne-werke .sec-head {
    position: absolute;
    inset: 0 0 auto 0;
    background: linear-gradient(180deg, rgba(20, 16, 12, .58) 18%, rgba(20, 16, 12, .3) 62%, transparent);
    padding-bottom: 3.5rem;
    display: grid;
    justify-items: center;
    text-align: center;
    padding: 5.6rem 1.5rem 0;
    z-index: 5;
    pointer-events: none;
    color: var(--paper-card);
    text-shadow: 0 2px 20px rgba(20, 16, 12, .75);
  }
  .buehne-werke .sec-head h2 { color: var(--paper-card); }
  .buehne-werke .sec-head .sec-lede { color: var(--text-hell); max-width: 44em; margin-inline: auto; }
  .buehne-werke .sec-head .stempel { display: none; }
  /* Die Geisterziffer stört auf der Bildbühne */
  .buehne-werke .sec-head::before { display: none; }
  /* Der zweite Blick: Detail oder die Zeichnung, aus der das Stück wurde */
  .buehne-werke .werk .wechselbild {
    position: absolute;
    top: 7svh; left: 50%;
    width: calc(100% - 8vw);
    height: calc(100% - 19svh);
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 3;
    filter: drop-shadow(0 24px 46px rgba(0, 0, 0, .5));
  }
  .buehne-werke .werk .wechsel-notiz,
  .buehne-werke .werk .frame .wechsel-notiz {
    display: block;
    position: absolute;
    right: 4vw; bottom: 12svh;
    z-index: 4;
    opacity: 0;
    margin: 0;
    max-width: 42vw;
    background: var(--paper-card);
    border: 1px solid var(--line);
    padding: .42rem 1.15rem .48rem;
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.5vw, 1.45rem);
    font-style: italic;
    font-weight: 380;
    letter-spacing: .005em;
    text-transform: none;
    text-align: right;
    color: var(--ink);
    text-shadow: none;
    box-shadow: 0 16px 34px -18px rgba(20, 16, 12, .8);
    transform: rotate(.9deg);
    transform-origin: 100% 100%;
    animation-name: zettel-legen;                 /* statt reinem Einblenden */
    animation-timing-function: cubic-bezier(.22, .9, .3, 1);
  }

  /* Etiketten */
  .buehne-werke .werk h3 {
    position: absolute;
    left: 4vw; bottom: 12svh;
    z-index: 4;
    margin: 0;
    background: var(--paper-card);
    border: 1px solid var(--line);
    padding: .5rem 1.3rem .55rem;
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    box-shadow: 0 16px 34px -18px rgba(20, 16, 12, .8);
    transform: rotate(-.8deg);
  }
  .buehne-werke .werk .werk-meta {
    position: absolute;
    left: 4.6vw; bottom: 7.6svh;
    z-index: 4;
    margin: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: .2rem .8rem;
    transform: rotate(-.8deg);
  }
  /* Kapitelschluss: ein rein typografisches Blatt, das übergibt */
  .buehne-werke .werk-schluss {
    position: absolute;
    inset: 0;
    max-width: none;                 /* das Blatt nutzt die ganze Breite */
    display: grid;
    /* Die Spalten richten sich nach dem, was Porträt und Karte wirklich
       brauchen — nicht nach einem Breitenverhältnis. Die Gruppe steht mittig,
       dadurch ist die Luft links und rechts bei jeder Fensterbreite gleich. */
    grid-template-columns: auto minmax(0, 36em);
    justify-content: center;
    gap: 0 clamp(2rem, 4.5vw, 5rem);
    /* "safe center" statt "center": mittig, solange das Blatt Platz hat —
       läuft es über, rutscht es nach oben statt unter die klebende Kopfzeile.
       Das obere Polster hält den Auftakt "Über mich" unter der Leiste frei. */
    align-content: safe center;
    align-items: center;
    justify-items: stretch;
    padding: max(6.6rem, 12.5svh) clamp(1.5rem, 5vw, 5.5rem) clamp(5.2rem, 10.9svh, 8.2rem);
  }
  .buehne-werke .werk-schluss .schluss-links {
    width: clamp(240px, 47svh, 540px);       /* das Bild ist 4:5 hoch */
    max-width: 100%;
    justify-self: end;
    gap: clamp(.7rem, 1.6svh, 1.2rem);
  }
  .buehne-werke .werk-schluss .schluss-bild {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .buehne-werke .werk-schluss .schluss-text { justify-self: start; }

  /* ---------- Weg ---------- */
  .buehne-weg .szene-schritte { overflow: hidden; }
  .buehne-weg .szene-schritte .sec-head { padding-top: 0; padding-bottom: 1.6rem; }
  /* Kopf und Schritte gehen mit den Karten-Blättern in die breitere Flucht;
     die Schrift wächst maßvoll mit. Die Naht misst sich bei jedem Bild
     selbst an Reihe und Nadelköpfen — sie näht einfach die längere Bahn.
     Pins und Naht-Geometrie bleiben unverändert. */
  .buehne-weg .szene-schritte .sec-head,
  .buehne-weg .schritte { max-width: min(1360px, 94vw); }
  .buehne-weg .schritte { gap: clamp(2.2rem, 3.2vw, 3.4rem); }
  .buehne-weg .schritt h3 { font-size: clamp(1.3rem, 2.6svh, 1.55rem); }
  .buehne-weg .schritt p { font-size: clamp(.99rem, 1.95svh, 1.16rem); }
  .buehne-weg .schritte,
  .buehne-weg .film,
  .buehne-weg .zeit { padding-bottom: 0; }
  /* Die drei Karten dürfen breiter stehen als die Textspalte — sonst würde
     die Umgebung sie auf 1120px zusammenziehen und sie blieben schmal. */
  .buehne-weg .szene-karten .zeit { max-width: none; }
  .buehne-weg .szene-karten .szene-kopf { max-width: min(1360px, 94vw); }

  /* ---------- Atelier ---------- */
  .buehne-atelier .atelier-grid { align-items: center; padding-top: 0; padding-bottom: 0; }
  /* Der Blatt-Titel — gleiche Familie wie die Kapitelköpfe. Trägt zwei
     Blätter: „Die Zutaten für Ihren Hut" und das Kartenblatt im Weg —
     darum nicht mehr auf das Atelier eingeschränkt. */
  .buehne-atelier .atelier-szene-b { align-content: center; }
  .buehne .szene-kopf {
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem clamp(1.2rem, 3svh, 3rem);
  }
  .buehne .szene-kopf .sec-no {
    display: inline-block;
    position: relative;
    padding-left: 3.6rem;
    margin-bottom: .7rem;
    font-size: clamp(.8rem, 1.1vw, .95rem);
    letter-spacing: .34em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--honig);
  }
  .buehne .szene-kopf .sec-no::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 2.8rem; height: 1px;
    background: var(--honig);
  }
  .buehne .szene-kopf h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.2rem, 5.6svh, 3.8rem);
    font-weight: 380;
    line-height: 1;
    letter-spacing: -.014em;
    color: var(--ink);
  }
  .buehne .szene-kopf h3 em {
    font-style: italic;
    color: var(--akzent);
  }

  /* Die Musterkarte — ein echtes Kärtchen mit Stoffproben, wie es
     im Atelier neben der Werkbank hinge. Kein loses Geschwebe. */
  /* Die Karte übernimmt Breite und Gewicht der Atelier-Karte im Blatt
     davor. Wie diese darf die Szene dafür etwas aus dem Satzspiegel
     ausscheren — so bleibt dem Video daneben seine Breite. */
  .buehne-atelier .atelier-szene-b .atelier-grid {
    width: 100%;
    max-width: min(1240px, 96vw);
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
  .buehne-atelier .atelier-szene-b .materialkarte {
    position: relative;
    margin: 0 auto;
    max-width: none;
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: clamp(1.6rem, 4svh, 2.8rem) clamp(1.8rem, 4.5svh, 3rem) clamp(1.5rem, 3.8svh, 2.6rem);
    box-shadow: 0 28px 52px -30px rgba(43, 38, 32, .6);
    transform: rotate(-.7deg);
  }
  .buehne-atelier .atelier-szene-b .materialkarte::before {
    content: "";
    position: absolute;
    top: -.9rem; left: 50%;
    width: 6.6rem; height: 1.8rem;
    transform: translateX(-50%) rotate(-2deg);
    /* Derselbe Klebestreifen wie am Video daneben: deckend, damit er die
       Kartenkante wirklich überdeckt. Vorher lag er bei 62 % — dadurch
       schien die Haarlinie der Karte hindurch. */
    background:
      linear-gradient(115deg, rgba(255, 255, 255, .3) 0 22%, rgba(255, 255, 255, 0) 22%),
      linear-gradient(rgba(233, 222, 197, .97), rgba(224, 210, 180, .94));
    box-shadow: 0 1px 3px rgba(43, 38, 32, .16);
    clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 100%, 3% 96%, 0 78%);
    z-index: 2;
    pointer-events: none;
  }
  .buehne-atelier .atelier-szene-b .mk-titel {
    font-size: clamp(1.6rem, 3.4svh, 2.2rem);
    margin-bottom: clamp(1rem, 2.4svh, 1.8rem);
    color: var(--akzent);
  }
  .buehne-atelier .atelier-szene-b .materialkarte ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(.9rem, 2.4svh, 1.7rem) 1.6rem;
  }
  .buehne-atelier .atelier-szene-b .materialkarte li {
    font-size: clamp(.92rem, 1.8svh, 1.08rem);
    line-height: 1.25;
  }
  .buehne-atelier .atelier-szene-b .materialkarte .chip {
    width: 100%; height: clamp(3.6rem, 9svh, 5.4rem);
    margin-bottom: .5rem;
  }
  /* Rechts: das Video als zweites Stück auf der Werkbank — groß,
     leicht gegen die Karte gekippt, die Handnotiz darunter */
  .buehne-atelier .atelier-szene-b .atelier-bilder {
    display: grid;
    justify-items: center;
    gap: clamp(.7rem, 1.6svh, 1.4rem);
  }
  .buehne-atelier .atelier-szene-b .entwurf-video {
    width: 100%;
    max-width: clamp(280px, 38svh, 470px);
    margin: 0;
    transform: rotate(.8deg);
  }
  .buehne-atelier .atelier-szene-b .atelier-note {
    margin: 0;
    font-size: clamp(1.15rem, 2.2svh, 1.45rem);
    text-align: center;
  }
  .atelier-raum { padding: 0; }
  .atelier-raum .raum-bild { position: absolute; inset: 0; }
  .atelier-raum .raum-bild::before {
    content: "";
    position: absolute; inset: -6%;
    background: var(--bild) center / cover no-repeat;
    filter: blur(30px) brightness(.6);
    z-index: 0;
  }
  .atelier-raum .raum-bild img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  /* Schleier unter dem Text: Das Werkbankfoto ist hell (Arbeitstuch), ohne
     Abdunklung läge der cremefarbene Text bei 1,2:1 und wäre unlesbar. Der
     Verlauf deckt nur das obere Drittel — Schere und Schleier bleiben klar. */
  .atelier-raum .raum-bild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(16, 13, 10, .70) 0%,
      rgba(16, 13, 10, .66) 24%,
      rgba(16, 13, 10, .60) 34%,
      rgba(16, 13, 10, .28) 52%,
      transparent 70%);
    z-index: 2;
    pointer-events: none;
  }
  .atelier-raum .raum-text,
  .atelier-raum .raum-note { z-index: 3; }

  /* ---------- Anlässe ---------- */
  .buehne-anlaesse .sec-head { padding-top: 0; }
  .buehne-anlaesse .anlass-grid { padding-bottom: 0; }
  /* Die drei Anlass-Zettel standen als einzige Kartengruppe noch im engen
     Satzspiegel — jetzt in derselben breiten Flucht wie die Schritte, die
     Drei Fragen und die Musterkarte. Kopf und Leitsatz gehen mit. */
  .buehne-anlaesse .sec-head,
  .buehne-anlaesse .anlass-inner { max-width: min(1360px, 94vw); }

  /* ---------- Zweites Leben ---------- */
  .buehne-leben .leben-grid {
    padding-top: 0;
    padding-bottom: 0;
    /* Auto-Abstände zentrieren senkrecht, kollabieren aber bei knapper
       Höhe auf null — nichts rutscht mehr unter die Kopfleiste. */
    margin-block: auto;
  }
  /* Der Kopf klebte unter der festen Kopfleiste: die Szene zentriert ihren
     Inhalt im SICHTBAREN Bereich — das obere Polster hält die Leiste frei. */
  .buehne-leben .leben-szene-a {
    display: flex;
    flex-direction: column;
    padding-top: 6.5rem;   /* die Kopfleiste ist ~6rem hoch, plus Luft */
    box-sizing: border-box;
  }
  .leben-szene-b { padding: 0; }
  .leben-szene-b { background: var(--leben-grund); }
  .leben-szene-b .upcycling {
    position: absolute;
    inset: 0 0 34% 0;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    background: var(--leben-grund);
    padding: 4rem 1.5rem 0;
    z-index: 2;
  }
  /* Der Regalstreifen trägt den Text von unten */
  .leben-szene-b .fundus-band {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    height: 42%;
    z-index: 1;
  }
  .leben-szene-b .fundus-band img {
    height: 100%;
    object-position: 50% 46%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 100%);
  }
  /* Typografie der Upcycling-Bühne — ging bei einer CSS-Operation
     verloren und ist hier wiederhergestellt */
  .leben-szene-b .upcycling-satz {
    max-width: 30em;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.6svh, 2.2rem);
    font-weight: 380;
    line-height: 1.5;
    color: var(--paper-card);
    hyphens: manual;
  }
  .leben-szene-b .upcycling-satz mark {
    background-image: linear-gradient(100deg,
      rgba(222, 170, 62, .12) 0%,
      rgba(222, 170, 62, .74) 3%,
      rgba(222, 170, 62, .48) 22%,
      rgba(222, 170, 62, .34) 52%,
      rgba(222, 170, 62, .52) 82%,
      rgba(222, 170, 62, .70) 96%,
      rgba(222, 170, 62, .14) 100%);
    mix-blend-mode: screen;
    color: inherit;
    box-shadow: none;
  }
  .leben-szene-b .leben-nachsatz {
    margin: 2.2rem 0 0;
    font-size: clamp(1.9rem, 4.2svh, 2.7rem);   /* lesbar aus der Distanz */
    color: var(--honig);
  }

}
}

/* ---------- Szenen-Keyframes (gehören zum Blätter-Block) ---------- */
/* ============================================================
   NIEDRIGE BILDSCHIRME — 1366×768 und Verwandte
   Die Blätter sind 100svh hoch, der Satz steht aber in rem und
   schrumpft nicht mit. Auf 768px Höhe gemessen lief „Anlässe"
   40px oben unter die Kopfzeile und 25px unten aus dem Bild.
   („Der Weg" tat das auch — bis der Hausbesuch als dritte Karte
   zu Vorlauf und Preis gewandert ist. Seither passt das Blatt
   in voller Schriftgröße und braucht hier nichts mehr.)
   Erst unter 900px Fensterhöhe; große Schirme bleiben unberührt.
   ============================================================ */
@supports (animation-timeline: view()) or (--hf: 1) {
@media (min-width: 901px) and (max-height: 900px) and (prefers-reduced-motion: no-preference) {

  .buehne-anlaesse .sec-head { padding-bottom: 1rem; }
  .buehne-anlaesse .anlass-leitsatz { margin-bottom: 1.4rem; }
  .buehne-anlaesse .szene > svg { margin-top: .7rem; }
  .buehne-anlaesse .anlass { padding-top: 1.3rem; padding-bottom: 1.3rem; }

}
}

/* Die drei Hinweiskarten werden nacheinander aufs Blatt gelegt: von links
   herein, noch schief in der Hand, und dann in ihre eigene leichte Schräge.
   Die Endlage steht in --kipp, damit jede Karte ihre bleibt. */
@keyframes karte-legen {
  0%   { opacity: 0; transform: translateX(-18%) rotate(-6deg); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) rotate(var(--kipp)); }
}

/* pointer-events läuft mit: eine ausgeblendete Szene liegt weiter über den
   anderen und würde sonst die Maus abfangen — Deckkraft 0 heißt nicht
   „nicht da". Ohne das ist jeder Link auf einem verdeckten Blatt tot, und
   der Mauszeiger verrät es (das Video zeigt eine Hand über fremdem Text). */
@keyframes szene-auftritt {
  0%   { opacity: 0; transform: translateY(6svh); pointer-events: none; }
  14%  { opacity: 1; transform: none; pointer-events: auto; }
  86%  { opacity: 1; transform: none; pointer-events: auto; }
  100% { opacity: 0; transform: translateY(-4svh); pointer-events: none; }
}
@keyframes szene-halten {
  0%   { opacity: 0; transform: translateY(6svh); pointer-events: none; }
  14%  { opacity: 1; transform: none; pointer-events: auto; }
  100% { opacity: 1; transform: none; pointer-events: auto; }
}
/* Für die langen Fenster am Kapitelanfang (Werk 1, Werkschau-Kopf): dieselben
   13svh Überblendung wie überall — bei 180svh Fensterlänge sind das 7,24 %. */
@keyframes werk-erst {
  0%     { opacity: 0; transform: translateY(6svh); pointer-events: none; }
  7.24%  { opacity: 1; transform: none; pointer-events: auto; }
  92.76% { opacity: 1; transform: none; pointer-events: auto; }
  100%   { opacity: 0; transform: translateY(-4svh); pointer-events: none; }
}
@keyframes blatt-atmen {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}
/* Das Motiv geht in der ersten Hälfte des Wechselfensters, die Detailaufnahme
   kommt in der zweiten. Dazwischen steht für einen Wimpernschlag nur der
   weiche Grund der Bühne — wie wenn eine Kamera die Schärfe neu setzt. So
   liegen nie zwei halbdurchsichtige Fotos übereinander. */
@keyframes bild-ab {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes wechsel-spaet {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes zettel-legen {
  from { opacity: 0; transform: translate(1rem, .8rem) rotate(3.4deg); }
  to   { opacity: 1; transform: translate(0, 0) rotate(.9deg); }
}
@keyframes wechsel-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   MUT — Hero über die volle Breite, Werkschau-Kopf mit Schwung
   Chris, 31.07.: „zu brav … da darf mehr Leben, Schwung und
   Stimmung rein". Asymmetrie statt Mittelachse, Größensprünge
   statt Gleichmaß — aber in derselben Atelierbuch-Sprache.
   ============================================================ */

/* Die Musterbuch-Nummer am Werk kollidierte mit der Kapitelziffer
   („№ 01" oben, „№ 001" unten). Das Kapitel gewinnt. */
.werk h3::before { content: none; }

@media (min-width: 901px) {
  /* ---------- Blatt 1: der Hero, randlos ---------- */
  .hero { padding-bottom: 7.5rem; }

  /* Die Ausgaben-Zeile wird zur Marginalie am linken Rand */
  .hero .ausgabe {
    display: inline-block;
    padding-left: 3.4rem;
    position: relative;
  }
  .hero .ausgabe::before {
    content: "";
    position: absolute;
    left: 0; top: .72em;
    width: 2.6rem; height: 1px;
    background: var(--honig);
    opacity: .8;
  }
}

@supports (animation-timeline: view()) or (--hf: 1) {
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {

  .buehne-hero > .hero {
    padding-inline: clamp(1.5rem, 5vw, 5.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: 2rem clamp(2.5rem, 6vw, 7rem);
  }
  .buehne-hero .hero h1 {
    font-size: clamp(3.4rem, 9.2svh, 6.4rem);
    line-height: .98;
    letter-spacing: -.014em;
  }
  .buehne-hero .hero .lede { max-width: 32em; }
  .buehne-hero .hero-portrait { width: min(100%, 64svh); }
  /* ---------- Blatt 2: der Auftakt der Werkschau ----------
     Kein zentrierter Kasten mehr: Titel links, Geisterziffer
     rechts, der Schleier fällt diagonal — die Bühne bleibt frei. */
  .buehne-werke .sec-head {
    display: block;
    text-align: left;
    justify-items: start;
    padding: clamp(5.4rem, 12svh, 8.5rem) clamp(1.5rem, 4vw, 4.5rem) 4.5rem;
    background:
      linear-gradient(100deg,
        rgba(16, 13, 10, .84)  0%,
        rgba(16, 13, 10, .70) 38%,
        rgba(16, 13, 10, .44) 62%,
        rgba(16, 13, 10, .11) 81%,
        rgba(16, 13, 10, 0)   93%),
      linear-gradient(180deg, rgba(16, 13, 10, .5) 0%, transparent 76%);
    text-shadow: 0 2px 22px rgba(16, 13, 10, .8);
  }

  /* Die Geisterziffer gehört zurück — groß, hell, am rechten Rand */
  .buehne-werke .sec-head::before {
    display: block;
    content: attr(data-no);
    right: clamp(1rem, 3.5vw, 4rem);
    top: clamp(-3rem, -4svh, -1.5rem);
    font-size: clamp(8rem, 27svh, 21rem);
    -webkit-text-stroke: 2px rgba(246, 240, 228, .17);
    color: transparent;
    text-shadow: none;
  }

  .buehne-werke .sec-head .sec-no {
    display: inline-block;
    position: relative;
    padding-left: 3.6rem;
    margin-bottom: .9rem;
    font-size: clamp(.8rem, 1.1vw, .95rem);
    letter-spacing: .34em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--honig);
  }
  .buehne-werke .sec-head .sec-no::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 2.8rem; height: 1px;
    background: var(--honig);
  }

  .buehne-werke .sec-head h2 {
    max-width: 15em;
    margin: 0;
    font-size: clamp(2.6rem, 7.4svh, 5.6rem);
    line-height: .95;
    letter-spacing: -.018em;
    font-weight: 380;
  }
  /* Der Nachsatz rutscht als Zeile darunter ein — Zeitschriften-Vorspann */
  .buehne-werke .sec-head h2 em {
    display: block;
    margin-left: clamp(1.6rem, 7vw, 7rem);
    margin-top: .12em;
    font-size: .52em;
    letter-spacing: .01em;
    color: var(--akzent-hell);
  }

  .buehne-werke .sec-head .sec-lede {
    max-width: 44em;
    margin: 1.5rem 0 0;
    font-size: clamp(1.12rem, 2.4svh, 1.35rem);
    line-height: 1.5;
    color: rgba(246, 240, 228, .95);
  }
  /* Derselbe Leuchtstift, nur andersherum gedacht: multiply kann
     ausschließlich abdunkeln und stirbt auf dem Foto. screen kann
     ausschließlich aufhellen — der Honig leuchtet auf, statt zu
     verschmieren. Verlauf und Kappen bleiben identisch zum Papier. */
  .buehne-werke .sec-head mark {
    background-image: linear-gradient(100deg,
      rgba(222, 170, 62, .12) 0%,
      rgba(222, 170, 62, .74) 3%,
      rgba(222, 170, 62, .48) 22%,
      rgba(222, 170, 62, .34) 52%,
      rgba(222, 170, 62, .52) 82%,
      rgba(222, 170, 62, .70) 96%,
      rgba(222, 170, 62, .14) 100%);
    mix-blend-mode: screen;
    color: inherit;
    box-shadow: none;
  }
}
}

/* ============================================================
   KAPITELSCHLUSS № 01 · und der Atelierraum, der spricht
   Der Flieder-Dreiklang ist entfallen (er wiederholte nur, was
   jeder zweite Blick ohnehin zeigt). An seiner Stelle: ein Blatt,
   das das Kapitel schließt und ans Atelier übergibt.
   ============================================================ */
/* Grundfassung — gilt mobil und überall dort, wo nicht geblättert wird */
.werk-schluss {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 1rem;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 780px) {
  .werk-schluss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
.schluss-bild { transform: rotate(-1.1deg); }
.schluss-bild img { display: block; width: 100%; height: auto; }
.werk-schluss .schluss-auftakt {
  margin-bottom: .7rem;
  color: var(--honig);
}
.werk-schluss .schluss-satz em {
  font-style: italic;
  color: var(--akzent);
}
.werk-schluss .schluss-satz {
  margin: 0;
  hyphens: manual;
  -webkit-hyphens: manual;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 380;
  line-height: 1.05;
  letter-spacing: -.014em;
}
/* Über mich: Veronikas eigener Text, am Schluss von Kapitel 01.
   Eigene Stufe zwischen der großen Zeile und der Überleitung — Fließtextmaß,
   damit die Anrede leise bleibt und die Einladung darunter wieder heraussticht. */
/* Das eingeklebte Blatt: Veronikas eigener Text liegt als eigenes Papier auf
   der Buchseite — leicht gedreht, mit Klebestreifen und ihrem Namenszug.
   So ist auf einen Blick klar, dass hier sie spricht und nicht die Seite. */
.werk-schluss .schluss-links {
  display: grid;
  justify-items: center;
  gap: 1.3rem;
}
.werk-schluss .vita-blatt {
  position: relative;
  margin: 1.6rem 0 0;
  max-width: 40.5em;
  padding: 1.9rem 1.75rem 1.35rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  box-shadow:
    4px 5px 0 rgba(43, 38, 32, .07),
    0 18px 36px -26px rgba(43, 38, 32, .6);
  transform: rotate(.85deg);
}
/* Klebestreifen, oben links über die Kante gelegt */
.werk-schluss .vita-blatt::before {
  content: "";
  position: absolute;
  top: -14px; left: 9%;
  width: 108px; height: 30px;
  transform: rotate(-3.4deg);
  background:
    linear-gradient(115deg, rgba(255,255,255,.34) 0 22%, rgba(255,255,255,0) 22%),
    linear-gradient(rgba(226, 212, 180, .96), rgba(210, 193, 156, .9));
  box-shadow: 0 2px 5px rgba(43, 38, 32, .18);
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 100%, 3% 96%, 0 78%);
  pointer-events: none;
}
/* Zweiter Klebestreifen, oben rechts — von Hand geklebt, also NICHT die
   Spiegelung des ersten: etwas kürzer, anders gekippt, der Riss läuft in
   die andere Richtung und der Glanz kommt von der anderen Seite. Mit nur
   einem Streifen sähe es aus, als würde der Zettel gleich abfallen. */
.werk-schluss .vita-blatt::after {
  content: "";
  position: absolute;
  top: -11px; right: 11%;
  width: 94px; height: 27px;
  transform: rotate(2.6deg);
  background:
    linear-gradient(65deg, rgba(255,255,255,.30) 0 20%, rgba(255,255,255,0) 20%),
    linear-gradient(rgba(226, 212, 180, .94), rgba(210, 193, 156, .88));
  box-shadow: 0 2px 5px rgba(43, 38, 32, .16);
  clip-path: polygon(98% 0, 3% 5%, 0 24%, 2% 100%, 96% 95%, 100% 76%);
  pointer-events: none;
}
.werk-schluss .vita-blatt .schluss-siegel {
  /* Die Mitte des Siegels liegt auf der unteren rechten Ecke des Blattes —
     wie ein Stempel, der halb über die Kante gesetzt wurde. */
  --siegel: 86px;
  position: absolute;
  width: var(--siegel);
  right: calc(var(--siegel) / -2);
  bottom: calc(var(--siegel) / -2);
  margin: 0;
  opacity: .92;
  transform: rotate(-9deg);
}
.werk-schluss .schluss-links .schluss-nach { margin-top: .25rem; text-align: center; }
.werk-schluss .vita-name {
  margin: .95rem 0 0;
  text-align: left;
  font-family: var(--hand);
  font-size: 2.05rem;
  line-height: 1;
  color: var(--wald);
  transform: rotate(-1.8deg);
  transform-origin: left center;
}
.werk-schluss .schluss-vita {
  margin: 0;
}
.werk-schluss .schluss-vita p {
  margin: 0 0 .78rem;
  color: var(--ink-soft);
  font-size: var(--fliess);
  line-height: 1.62;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.werk-schluss .schluss-vita p:last-child { margin-bottom: 0; }

.werk-schluss .schluss-nach {
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
  hyphens: manual;
}
.werk-schluss .schluss-siegel {
  width: 84px; height: auto;
  margin-top: 1.6rem;
  opacity: .9;
  transform: rotate(-2.5deg);
}

.szene-kopf {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.6rem 1.5rem 0;
}
/* Die Karten darunter tragen einen Klebestreifen, der über ihre Oberkante
   ragt. Ohne Luft überdeckte er auf dem Telefon die Überschrift — die Regel
   muss NACH der Grundregel stehen, sonst gewinnt diese. */
@media (max-width: 900px) {
  .szene-kopf { padding-bottom: 1.8rem; }
}
.szene-kopf .sec-no { display: block; margin-bottom: .4rem; }
.szene-kopf h3 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  font-weight: 380;
  line-height: 1.05;
}
.szene-kopf h3 em { font-style: italic; color: var(--akzent); }

@supports (animation-timeline: view()) or (--hf: 1) {
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {

  /* ---------- Blatt: Kapitelschluss ---------- */
  .buehne-werke .werk-schluss { display: grid; }
  .buehne-werke .werk-schluss .schluss-auftakt {
    position: relative;
    margin: 0 0 clamp(.5rem, 1.3svh, 1.1rem);
    padding-left: 3.6rem;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    color: var(--honig);
  }
  .buehne-werke .werk-schluss .schluss-auftakt::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 2.8rem; height: 1px;
    background: var(--honig);
  }
  .buehne-werke .werk-schluss .schluss-satz {
    margin: 0;
    max-width: 20em;
    font-family: var(--serif);
    font-size: clamp(1.42rem, 3.7svh, 2.55rem);
    font-weight: 380;
    line-height: 1.05;
    letter-spacing: -.018em;
    color: var(--ink);
  }
  .buehne-werke .werk-schluss .schluss-satz .wald { position: relative; }
  .buehne-werke .werk-schluss .vita-blatt {
    margin: clamp(1.35rem, 3svh, 2.1rem) 0 0;
    max-width: 36em;
    padding: clamp(1.05rem, 2.3svh, 1.9rem) clamp(1.25rem, 2.2vw, 1.9rem) clamp(.8rem, 1.5svh, 1.25rem);
  }
  .buehne-werke .werk-schluss .vita-name {
    margin-top: clamp(.5rem, 1.2svh, .85rem);
    font-size: clamp(1.5rem, 3.1svh, 1.95rem);
  }
  .buehne-werke .werk-schluss .schluss-vita { margin: 0; max-width: none; }
  .buehne-werke .werk-schluss .schluss-vita p {
    margin-bottom: clamp(.42rem, 1.05svh, .62rem);
    font-size: clamp(1.02rem, 1.92svh, 1.2rem);
    line-height: 1.52;
  }
  .buehne-werke .werk-schluss .schluss-nach {
    margin: clamp(.85rem, 1.9svh, 1.4rem) 0 0;
    font-size: clamp(1.02rem, 2.05svh, 1.32rem);
    line-height: 1.45;
    color: var(--ink-soft);
  }
  .buehne-werke .werk-schluss .vita-blatt .schluss-siegel {
    --siegel: clamp(66px, 6vw, 98px);
    height: auto;
    opacity: .9;
    transform: rotate(-9deg);
  }
  .buehne-werke .werk-schluss .schluss-links .schluss-nach {
    margin: clamp(.3rem, 1svh, .8rem) 0 0;
    text-align: center;
  }
  /* Auch hier: auf dem Foto hellt der Stift auf, statt abzudunkeln */
  .atelier-raum .raum-text mark {
    background-image: linear-gradient(100deg,
      rgba(222, 170, 62, .12) 0%,
      rgba(222, 170, 62, .74) 3%,
      rgba(222, 170, 62, .48) 22%,
      rgba(222, 170, 62, .34) 52%,
      rgba(222, 170, 62, .52) 82%,
      rgba(222, 170, 62, .70) 96%,
      rgba(222, 170, 62, .14) 100%);
    mix-blend-mode: screen;
    color: inherit;
  }
}
}


/* ============================================================
   EINE TEXTGRÖSSE FÜR DIE GANZE SEITE
   Steht bewusst am Ende: die Kapitel bringen eigene Größen mit,
   die hier zusammengeführt werden. Vorspann und Fließtext haben
   damit auf jedem Blatt dieselbe Größe, Schrift und Laufweite.
   ============================================================ */
.buehne .sec-head .sec-lede,
.buehne .raum-text p,
.buehne .anlass-leitsatz,
.buehne .leben-szene-a p,
.anfrage-inner .sec-lede,
.rechts-inner .sec-lede,
.sec-lede {
  font-family: var(--sans);
  font-size: var(--vorspann);
  font-weight: 400;
  line-height: 1.6;
}
.buehne .schritt p,
.buehne .zeit-karte p,
.buehne .anlass p,
.schritt p,
.zeit-karte p,
.anlass p {
  font-size: var(--fliess);
  line-height: 1.66;
}

/* ============================================================
   RÜCKFALL — Browser ohne Bildlauf-Zeitstrahl (heute: Firefox)
   Firefox kann `animation-timeline` erst ab Version 156, ausgeliefert
   wird 153. Dort entfällt die ganze Blätter-Choreografie und die Seite
   fließt klassisch untereinander. Das ist so gebaut und richtig — nur
   sind drei Stellen dabei nie nachgezogen worden. Alles hier greift
   ausschließlich im Rückfall; Chrome und Safari sehen davon nichts.
   ============================================================ */
@supports not (animation-timeline: view()) {

  /* 1 · Die Platzhalter-Marke auf dem KI-Atelierfoto war ein kleines
     Schild in der Ecke und aus dem Bild gescrollt, sobald man weiterlas.
     Das Foto stand dann als echtes Werkstattbild da. Jetzt ein Band über
     die volle Bildbreite — beim Erscheinen des Fotos nicht zu übersehen. */
  .atelier-raum .platzhalter-marke {
    top: 0; right: 0; left: 0;
    padding: .55rem 1rem;
    text-align: center;
    border-radius: 0;
    border-width: 0 0 1px 0;
    letter-spacing: .14em;
  }

  /* 2 · Die Klebestreifen der drei Karten ragten 13px in die Überschrift
     „Drei Fragen“ hinein. Auf dem Blatt hielt eine svh-Angabe den Abstand,
     die hier nicht greift. */
  .szene-karten .szene-kopf { padding-bottom: 2.2rem; }

  /* 3 · Die Blätter selbst laufen hier sehr wohl — kleben, Bühnenhöhen und
     Szenenstapel kann Firefox seit Jahren. Nur der Zeitstrahl fehlt, der die
     Szenen ein- und ausblendet. Ohne ihn würden die animation-Kurzschreibungen
     auf der Dokumentzeit laufen: 1ms lang, danach im Endzustand hängen — also
     alles unsichtbar. Deshalb hier abgeschaltet und auf „sichtbar" gestellt.
     Den Ablauf übernimmt script.js (Abschnitt „Blätter ohne Zeitstrahl").
     Grundzustand bewusst sichtbar: fällt das Skript aus, steht der Inhalt
     immer noch da — nur ohne Choreografie. */
  .buehne .szene,
  .buehne .werk,
  .buehne > section,
  .buehne .sec-head,
  .buehne .wechselbild,
  .buehne .wechsel-notiz,
  .buehne .vn-neu,
  .buehne .zeit-karte,
  .buehne .frame > img:first-child {
    animation: none !important;
    opacity: 1;
    /* Der Einblend-Effekt (.reveal) bringt eine 0,8-Sekunden-Überblendung mit.
       Sie ist hier falsch: den Verlauf gibt der Antrieb Bild für Bild vor, und
       eine zweite Blende darüber lässt jeden Wert hinterherhinken — die Szene
       käme immer zu spät und stünde beim Anhalten noch im Übergang. */
    transition: none !important;
  }
  /* Kein pauschales `transform: none` hier: die Lage mancher Teile steht
     genau darin. Das zweite Bild eines Werks etwa wird mit translateX(-50%)
     mittig gestellt — genullt rutschte es um seine halbe Breite nach rechts
     und lag neben dem ersten statt darüber. `animation: none` allein genügt:
     ohne Animation bleibt kein Endzustand hängen, den man wegräumen müsste. */

}

/* ============================================================
   Kurze Schirme: das Schlussblatt trägt Veronikas ganzen Text.
   Unter 720px Fensterhöhe wird die Stufenleiter eine Nummer
   kleiner gesetzt, damit nichts unten abgeschnitten wird.
   ============================================================ */
@supports (animation-timeline: view()) or (--hf: 1) {
@media (min-width: 901px) and (max-height: 720px) and (prefers-reduced-motion: no-preference) {
  .buehne-werke .werk-schluss .schluss-satz { font-size: 1.34rem; }
  .buehne-werke .werk-schluss .schluss-auftakt { font-size: 1rem; margin-bottom: .45rem; }
  .buehne-werke .werk-schluss .vita-blatt { padding: .85rem 1.05rem .6rem; margin-top: .8rem; }
  .buehne-werke .werk-schluss .schluss-vita p {
    font-size: .92rem;
    line-height: 1.44;
    margin-bottom: .34rem;
  }
  .buehne-werke .werk-schluss .vita-name { font-size: 1.3rem; margin-top: .35rem; }
  .buehne-werke .werk-schluss .vita-blatt .schluss-siegel { --siegel: 58px; }
  .buehne-werke .werk-schluss .schluss-links .schluss-nach { font-size: 1rem; margin-top: .3rem; }
}
}

/* Schmale Schirme: Bild, dann ihr Text, dann erst die Einladung weiterzugehen.
   Ohne das stünde "Schauen Sie rein" mitten im Kapitel, noch vor "Über mich". */
@media (max-width: 779px) {
  .werk-schluss .schluss-links { display: contents; }
  .werk-schluss .schluss-bild { order: 1; }
  .werk-schluss .schluss-text { order: 2; }
  .werk-schluss .schluss-links .schluss-nach { order: 3; margin-top: 1.6rem; }
}

/* ============================================================
   Breite Schirme: ab 1280px steht genug Platz für eine Stufe
   mehr — Porträt, Karte und Schrift wachsen um rund ein Zehntel,
   damit das Blatt nicht leer wirkt. Darunter bleibt es wie zuvor,
   sonst würde die Karte zu schmal und der Text zu hoch.
   ============================================================ */
@supports (animation-timeline: view()) or (--hf: 1) {
@media (min-width: 1280px) and (min-height: 721px) and (prefers-reduced-motion: no-preference) {
  .buehne-werke .werk-schluss { grid-template-columns: auto minmax(0, 39.5em); }
  .buehne-werke .werk-schluss .schluss-links { width: clamp(260px, 51.5svh, 594px); }
  .buehne-werke .werk-schluss .vita-blatt {
    margin: clamp(1.45rem, 3.2svh, 2.3rem) 0 0;
    max-width: 39.5em;
    padding: clamp(1.15rem, 2.5svh, 2.1rem) clamp(1.4rem, 2.4vw, 2.1rem) clamp(.9rem, 1.65svh, 1.4rem);
  }
  .buehne-werke .werk-schluss .schluss-vita p { font-size: clamp(1.12rem, 2.1svh, 1.32rem); }
  .buehne-werke .werk-schluss .schluss-satz { font-size: clamp(1.56rem, 4.05svh, 2.8rem); }
  .buehne-werke .werk-schluss .schluss-auftakt { font-size: clamp(1.2rem, 1.65vw, 1.55rem); }
  .buehne-werke .werk-schluss .vita-name {
    margin-top: clamp(.55rem, 1.3svh, .95rem);
    font-size: clamp(1.65rem, 3.4svh, 2.15rem);
  }
  .buehne-werke .werk-schluss .schluss-links .schluss-nach {
    margin: clamp(.9rem, 2svh, 1.5rem) 0 0;
    font-size: clamp(1.12rem, 2.25svh, 1.45rem);
  }
}
}

/* ============================================================
   02 · Das Atelier — eine Papierseite.
   Aufbau: zwei Spalten, zwei Zeilen. Links oben die Textkarte,
   links unten die beiden Abzüge, rechts über beide Zeilen das
   große Bild. Die einzige Überlappung ist gewollt: die Karte
   schiebt sich über die linke Kante des großen Bildes.
   Die Unruhe kommt aus verschiedenen Breiten, verschiedenen
   Seitenverhältnissen und kleinen Drehungen — nicht aus
   Verschiebungen, die kollidieren können.
   ============================================================ */
.atelier-papier { max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.5rem; display: grid; gap: 2rem; }
.papier-text h2 { font-size: clamp(2rem, 5vw, 3rem); margin: .4rem 0 1rem; }
.papier-text h2 em { font-style: italic; color: var(--akzent); }
.papier-text p { color: var(--ink-soft); font-size: var(--vorspann); line-height: 1.62; hyphens: manual; -webkit-hyphens: manual; }
.papier-detail { display: grid; grid-template-columns: 1.04fr 1.1fr; gap: 1.1rem; align-items: start; }
.papier-detail .frame, .pb-gross { margin: 0; }
.papier-detail img, .pb-gross img { display: block; width: 100%; height: auto; }

/* Die Lupe */
.lupe { position: relative; cursor: zoom-in; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.lupe:hover, .lupe:focus-visible { transform: translateY(-3px) rotate(-.5deg); box-shadow: 0 16px 30px -18px rgba(43,38,32,.55), 4px 5px 0 rgba(43,38,32,.07); }
.lupe:focus-visible { outline: 2px solid var(--wald); outline-offset: 4px; }
.lupe-zeichen {
  position: absolute; right: .95rem; bottom: .95rem;
  width: 1.85rem; height: 1.85rem; padding: .34rem;
  border-radius: 50%; background: rgba(250,245,233,.93);
  box-shadow: 0 2px 6px rgba(43,38,32,.3);
  fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round;
  pointer-events: none; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.lupe:hover .lupe-zeichen, .lupe:focus-visible .lupe-zeichen { transform: scale(1.12); background: var(--paper-card); }
.lupe-schirm {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: clamp(1.5rem, 5vh, 4rem);
  background: rgba(28,22,16,0);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background .45s ease, backdrop-filter .45s ease; cursor: zoom-out;
}
.lupe-schirm.an { background: rgba(28,22,16,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lupe-gross { margin: 0; max-width: min(88vw, 1000px); max-height: 88vh; padding: clamp(.5rem,1.2vh,1rem); }
.lupe-gross img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(88vh - 2rem); }
.lupe-gross .lupe-zeichen { display: none; }
@media (prefers-reduced-motion: reduce) { .lupe, .lupe-schirm, .lupe-gross { transition: none !important; } }

@supports (animation-timeline: view()) or (--hf: 1) {
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .buehne-atelier .atelier-papier {
    position: absolute; inset: 0; max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 39em) clamp(380px, 57svh, 660px);
    grid-template-rows: auto auto;
    justify-content: center;
    align-content: safe center;
    column-gap: 0;
    row-gap: clamp(1rem, 2.6svh, 2.1rem);
    padding: max(7.3rem, 12.5svh) clamp(1.5rem, 5vw, 5.5rem) clamp(3rem, 6svh, 5rem);
  }
  /* rechts: das große Bild über beide Zeilen, als 4:5 beschnitten */
  .buehne-atelier .pb-gross { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .buehne-atelier .pb-gross img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 54% 42%; }
  /* links oben: die Karte, einzige gewollte Überlappung */
  .buehne-atelier .papier-text {
    grid-column: 1; grid-row: 1; align-self: end;
    position: relative; z-index: 3;
    margin-right: clamp(-3rem, -2.2vw, -1.4rem);
    padding: clamp(1.4rem, 3svh, 2.4rem) clamp(1.6rem, 2.6vw, 2.4rem);
    background: var(--paper-card);
    border: 1px solid var(--line);
    box-shadow: 4px 5px 0 rgba(43,38,32,.06), 0 18px 36px -26px rgba(43,38,32,.5);
  }
  .buehne-atelier .papier-text h2 { font-size: clamp(1.9rem, 4.4svh, 2.9rem); line-height: 1.04; margin: .3rem 0 1rem; }
  .buehne-atelier .papier-text p  { font-size: clamp(1.04rem, 2.05svh, 1.26rem); line-height: 1.62; }
  /* links unten: die beiden Abzüge — verschieden breit, verschieden hoch */
  .buehne-atelier .papier-detail {
    grid-column: 1; grid-row: 2; align-self: start;
    max-width: clamp(280px, 66svh, 760px);
    gap: clamp(.9rem, 1.8vw, 1.7rem);
  }
  .buehne-atelier .papier-detail .frame:first-child { transform: rotate(-2.3deg); }
  .buehne-atelier .papier-detail .frame:first-child img { aspect-ratio: 1 / 1; object-fit: cover; }
  .buehne-atelier .papier-detail .frame:last-child  { transform: rotate(1.9deg); }
  .buehne-atelier .papier-detail .frame:last-child img { aspect-ratio: 5 / 6; object-fit: cover; }
}
}

/* ============================================================
   03 · „Zwischen erstem Strich und letztem Stich“ — auf das Maß
   der letzten Blätter gebracht: Gruppe mittig, Video an der
   Bildschirmhöhe, Textspalte in Schriftbreite wie bei 02.
   ============================================================ */
@supports (animation-timeline: view()) or (--hf: 1) {
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .buehne-weg .szene-film .film {
    max-width: none;
    grid-template-columns: clamp(300px, 45svh, 520px) minmax(0, 39em);
    justify-content: center;
    align-items: center;
    column-gap: clamp(2.4rem, 4.5vw, 5rem);
    padding: max(6.6rem, 11svh) clamp(1.5rem, 5vw, 5.5rem) clamp(2rem, 4svh, 3.5rem);
  }
  .buehne-weg .szene-film .entwurf-video { max-width: none; width: 100%; }
  .buehne-weg .szene-film .film-quote { font-size: clamp(2rem, 4.4svh, 2.9rem); line-height: 1.16; }
  .buehne-weg .szene-film .film-satz {
    max-width: none;
    font-size: clamp(1.04rem, 2.05svh, 1.26rem);
    line-height: 1.62;
  }
}
}

/* ============================================================
   AUF DEM TELEFON — Kopfzeile, Menüblatt, Hero-Reihenfolge
   Diese Regeln stehen bewusst am Dateiende: Sie sollen die
   älteren Handy-Regeln weiter oben überstimmen.
   ============================================================ */
@media (max-width: 900px) {

  /* ---------- Kopfzeile: eine Zeile, und sie klebt wieder ----------
     Vorher stapelte sie sich dreizeilig auf 188px und stand still —
     ein Viertel des Bildschirms, bevor die Seite überhaupt begann. */
  .topbar {
    position: sticky;
    top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .62rem clamp(.9rem, 4vw, 1.4rem);
  }
  /* Über die HÖHE begrenzen, nicht über die Breite: Der Schriftzug ist
     900×646, bei 132px Breite wurde die Kopfzeile sonst 116px hoch. */
  .wordmark img { height: 44px; width: auto; }

  /* Der Menüknopf ist eine Stichnaht — dieselbe Sprache wie die
     Unterstreichung im Menü und die Naht über dem Kolophon. */
  .kopf-knopf {
    order: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem; height: 2.6rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  .kopf-knopf svg { width: 26px; height: 18px; overflow: visible; }
  .kopf-knopf path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-dasharray: 5 4;
    transition: transform .28s cubic-bezier(.22,1,.3,1), opacity .2s ease;
    /* Ohne transform-box bezieht sich 50% 50% auf den (flachen) Kasten der
       Linie selbst — die Striche drehten sich dann nicht ins Kreuz. */
    transform-box: view-box;
    transform-origin: 50% 50%;
  }
  .kopf-knopf[aria-expanded="true"] { color: var(--wald); }
  .kopf-knopf[aria-expanded="true"] path:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .kopf-knopf[aria-expanded="true"] path:nth-child(2) { opacity: 0; }
  .kopf-knopf[aria-expanded="true"] path:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .kopf-knopf:focus-visible { outline: 2px solid var(--wald); outline-offset: 2px; }

  .lang-switch { position: static; order: 2; margin-left: auto; }
  /* Das Menüblatt ist ein Kind der Kopfzeile — es würde sonst über Signet,
     Sprache und Knopf liegen. Die drei kommen darüber. */
  .topbar > .wordmark,
  .topbar > .lang-switch,
  .topbar > .kopf-knopf { position: relative; z-index: 101; }
  /* Solange das Blatt offen ist, bleibt die Seite dahinter stehen */
  body.menue-offen { overflow: hidden; }

  /* ---------- Das Menüblatt ----------
     Kein graues Kastenmenü, sondern ein Blatt Papier, das sich unter
     der Kopfzeile hervorschiebt — mit einer Stichnaht als Oberkante. */
  .topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99;
    display: grid;
    gap: .1rem;
    padding: 4.9rem clamp(1.4rem, 6vw, 2.4rem) 1.9rem;
    background: var(--paper-card);
    box-shadow: 0 22px 40px -26px rgba(43, 38, 32, .75);
    transform: translateY(-102%);
    transition: transform .42s cubic-bezier(.22, 1, .3, 1);
  }
  .topnav::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background-image: linear-gradient(90deg, var(--ziegel) 56%, transparent 0);
    background-size: 13px 2px;
    opacity: .55;
  }
  body.menue-offen .topnav { transform: translateY(0); }
  .topnav a {
    padding: .62rem 0;
    font-family: var(--serif);
    font-size: 1.32rem;
    background-size: 0 1.5px;          /* Stich-Naht erst beim Aktiven */
  }
  .topnav a.active { color: var(--wald); background-size: 100% 1.5px; }
  .topnav a.nav-cta { color: var(--akzent); }
  /* Solange zu, ist das Blatt für Finger und Vorlesehilfen unsichtbar */
  .topnav { visibility: hidden; }
  body.menue-offen .topnav { visibility: visible; }

  /* Schleier über der Seite, damit der Blick am Blatt bleibt */
  .menue-schleier {
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(43, 38, 32, .34);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s;
  }
  body.menue-offen .menue-schleier { opacity: 1; visibility: visible; }

  /* ---------- Der Hero in Telefon-Reihenfolge ----------
     Titel, dann der Film als eigener Streifen, dann Veronika, dann
     Vorspann und Einladung. Vorher lag ihr Porträt ganz unten und der
     Film als blasser Schleier hinter dem Text. */
  /* align-items: center aus der Grundregel würde die Zeilen in der Spalte
     mittig setzen — die Ausgabe-Zeile stand dadurch 106px eingerückt. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 1.5rem;
    padding-bottom: 2.6rem;
    gap: 0;
  }
  .hero-text { display: contents; }
  .hero .ausgabe      { order: 1; margin-bottom: .2rem; }
  .hero .kicker       { order: 2; margin-bottom: .7rem; font-size: .82rem; letter-spacing: .18em; }
  .hero h1            { order: 3; margin-bottom: 1.1rem; }
  .hero .film-schleier{ order: 4; }
  .hero-stage         { order: 5; }
  .hero .lede         { order: 6; margin: 1.5rem 0 1.9rem; }
  .hero-actions       { order: 7; }

  /* Der Filmstreifen: eine eigene Bahn, in der man die Zeichnung
     wirklich entstehen sieht — statt eines Schleiers hinter der Schrift. */
  .hero .film-schleier {
    position: relative;
    inset: auto;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%;
    aspect-ratio: 2 / 1;
    opacity: 1;
    border-radius: 2px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .hero .hero-film {
    object-position: 50% 42%;
    opacity: .92;
    filter: grayscale(1) brightness(1.06) contrast(1.12) sepia(.1);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  /* Veronika direkt unter den Titel — groß genug, dass man sie ansieht */
  .hero-stage { position: relative; margin: 1.2rem auto 0; width: min(100%, 320px); }
  .hero-stage .hero-portrait { width: 100%; margin: 0; }
  .hero-margin { display: none; }          /* die vertikale Randnotiz hat hier keinen Platz */

  /* ---------- Kein seitliches Wackeln ----------
     Die Namenzeile des Skizzenblocks greift mit negativen Rändern über
     ihren Kasten hinaus — auf dem Telefon schob das die ganze Seite 12px
     nach rechts. Und die Naht-Grafik zeigt in der einspaltigen Ansicht
     ohnehin nichts, ihre weit ausgelegten Hilfsflächen aber schon. */
  .block-namen { margin-inline: 0; }
  .naht { display: none; }
  /* Das Siegel hängt am großen Schirm bewusst halb über die Kartenecke —
     auf dem Telefon schob genau das die Seite seitlich hinaus. Hier legt
     es sich nur noch mit einer Ecke über den Rand. */
  .werk-schluss .vita-blatt .schluss-siegel {
    --siegel: 62px;
    right: -.5rem;
    bottom: -.9rem;
  }
}

/* ---------- Rückmeldung des Anfragebogens ----------
   Die Antwort erscheint jetzt IM Formular statt auf einer eigenen Seite —
   niemand verliert mehr seine Eingaben, nur weil etwas nachzureichen war.
   Ein Zettel im Bild der Seite: Papier, Waldgrün, gestrichelte Kante. */
.form-hinweis {
  display: grid;
  gap: .3rem;
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem 1.05rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ziegel);
  box-shadow: 3px 4px 0 rgba(43, 38, 32, .05);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.form-hinweis strong {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 500;
  color: var(--ziegel);
}
.form-hinweis.gut { border-left-color: var(--wald); }
.form-hinweis.gut strong { color: var(--wald); }
/* Nach dem Absenden steht der Zettel allein — dann darf er atmen. */
.form-fertig {
  margin: 2.4rem 0 0;
  padding: 1.6rem 1.6rem 1.7rem;
  border-left-width: 4px;
}

@media (max-width: 900px) {
  /* Zwischen „Die Zutaten für Ihren Hut" und der Musterkarte lagen auf dem
     Telefon 155 Pixel Leere. Drei Abstände hintereinander: der Szenenkopf
     bringt seinen mit, das Raster noch einmal 5 rem, die Karte selbst 3 rem.
     Am Schirm liegen die beiden nebeneinander, dort fällt es nicht auf. */
  .atelier-szene-b .atelier-grid { padding-top: 0; }
  .atelier-szene-b .atelier-text > .materialkarte:first-child { margin-top: 1.5rem; }
}

/* ============================================================
   DIE QUITTUNG — was nach dem Absenden dasteht
   ============================================================
   Wer den Bogen abschickt, hat einer Fremden seinen Namen, seine
   Adresse und oft sein Gesicht anvertraut. Darauf mit einem grün
   umrandeten Kasten zu antworten ist die Bildsprache einer
   Fehlermeldung — nur in Grün. Hier liegt stattdessen ein Blatt
   im Atelierbuch: Klebestreifen, ihre Handschrift, ihr Siegel.
   Und darunter, klein und ruhig, was tatsächlich angekommen ist —
   samt der Adresse, an die geantwortet wird. Wer sich vertippt
   hat, sieht es in diesem Moment und nicht erst nach zwei Wochen
   Warten. Dieselbe Karte trägt auch das Nachhaken; nur Farbe und
   Wort wechseln, damit ein Haken nicht wie ein Systemfehler
   aussieht.
   Die Karte kommt aus anfrage.php und wird vom Script an die
   Stelle des Bogens gesetzt — so gibt es sie genau einmal, und
   sie kann zwischen Seite und Server nicht auseinanderlaufen. */

.quittung {
  position: relative;
  /* Das Blatt umschließt den Text, statt ihn schwimmen zu lassen: breiter
     als der Satzspiegel wirkt es wie ein Formularkasten, dem man Papier
     untergelegt hat. Ein Brief ist so breit wie seine Zeilen. */
  max-width: 34em;
  margin: 2.6rem 0 0;
  padding: 2.3rem 2.1rem 1.9rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  box-shadow:
    4px 5px 0 rgba(43, 38, 32, .07),
    0 18px 36px -26px rgba(43, 38, 32, .6);
  transform: rotate(-.7deg);
  /* Die Karte tritt an die Stelle des Bogens — mitten in den Briefbogen,
     der seine Inhalte mittig setzt. Ein Beleg mit zentrierten Zeilen ist
     aber keiner. Die Karte bringt ihre eigene Achse mit. */
  text-align: left;
}
/* Klebestreifen, von Hand geklebt: zwei ungleiche Streifen. Ein einzelner
   sähe aus, als fiele das Blatt gleich ab; zwei gespiegelte sähen gedruckt
   aus. Also unterschiedlich lang, anders gekippt, Glanz von je anderer Seite. */
.quittung::before,
.quittung::after {
  content: "";
  position: absolute;
  pointer-events: none;
  box-shadow: 0 2px 5px rgba(43, 38, 32, .17);
}
.quittung::before {
  top: -13px; left: 8%;
  width: 104px; height: 29px;
  transform: rotate(-3.1deg);
  background:
    linear-gradient(115deg, rgba(255,255,255,.34) 0 22%, rgba(255,255,255,0) 22%),
    linear-gradient(rgba(226, 212, 180, .96), rgba(210, 193, 156, .9));
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 100%, 3% 96%, 0 78%);
}
.quittung::after {
  top: -10px; right: 12%;
  width: 88px; height: 26px;
  transform: rotate(2.9deg);
  background:
    linear-gradient(65deg, rgba(255,255,255,.30) 0 20%, rgba(255,255,255,0) 20%),
    linear-gradient(rgba(226, 212, 180, .94), rgba(210, 193, 156, .88));
  clip-path: polygon(98% 0, 3% 5%, 0 24%, 2% 100%, 96% 95%, 100% 76%);
}

/* Das eine Wort in ihrer Handschrift — es trägt den ganzen Moment. */
.quittung-wort {
  margin: 0 0 .35rem;
  font-family: var(--hand);
  font-size: clamp(2.5rem, 5.4vw, 3.5rem);
  line-height: .95;
  color: var(--wald);
  transform: rotate(-1.4deg);
  transform-origin: left center;
}
.quittung-satz {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fliess);
  line-height: 1.62;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.quittung-satz + .quittung-satz { margin-top: .7rem; }

/* Der Beleg: durch eine Naht abgesetzt, wie im übrigen Buch. */
.quittung-beleg {
  margin: 1.55rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px dashed var(--line);
  /* Ein Gitter über ALLE Zeilen, nicht je Zeile eines: nur so richten sich
     die Werte am längsten Wort aus statt an einem geratenen Maß. */
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .62rem 1.4rem;
  align-items: baseline;
}
.quittung-beleg dt {
  font-size: .93rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.quittung-beleg dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.quittung-beleg .beleg-still { color: var(--ink-soft); font-style: italic; }

/* Das Siegel sitzt halb über der unteren Ecke — wie ein Stempel, den
   jemand über die Kante gesetzt hat. Nur beim Gelingen: ein Siegel unter
   einer Rückfrage wäre eine Unterschrift unter etwas Halbfertiges. */
.quittung-siegel {
  --siegel: 88px;
  position: absolute;
  width: var(--siegel);
  height: auto;
  right: calc(var(--siegel) / -2.6);
  bottom: calc(var(--siegel) / -2.6);
  margin: 0;
  opacity: .92;
  transform: rotate(-9deg);
}

/* Ein Haken ist kein Systemfehler — dieselbe Karte, anderes Wort,
   anderer Ton. Kein Siegel, kein Beleg. */
.quittung--haken .quittung-wort { color: var(--ziegel); }

/* Die technische Notiz liegt am Fuß der Karte und drängt sich nicht auf. */
.quittung-notiz {
  margin: 1.5rem 0 0;
  font-size: .82rem;
  color: var(--ink-soft);
  opacity: .72;
}
.quittung-notiz summary {
  cursor: pointer;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .78rem;
}
.quittung-notiz pre {
  margin: .7rem 0 0;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: .8rem;
}

/* Im Bogen steht die Karte über der Knopfreihe. Ohne Luft nach unten stößt
   ihre gekippte Ecke an den Knopf — das sieht nach Unfall aus, nicht nach
   einem Blatt, das jemand dazugelegt hat. */
.anfrage-form .quittung { margin: 2.2rem 0 2.1rem; }

/* Steht die Karte allein auf der Antwortseite (ohne Javascript), braucht
   sie Luft ringsum und einen Weg zurück. */
.quittung-buehne {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3.5rem, 12vh, 7rem) 1.5rem clamp(4rem, 14vh, 8rem);
}
.quittung-buehne .quittung { margin-top: 0; }
.quittung-zurueck { margin: 3.2rem 0 0; }

@media (max-width: 900px) {
  .quittung {
    padding: 2rem 1.4rem 1.7rem;
    transform: rotate(-.45deg);
  }
  .quittung::before { left: 6%; width: 88px; }
  .quittung::after  { right: 8%; width: 74px; }
  .quittung-beleg { grid-template-columns: 1fr; gap: .08rem; }
  .quittung-beleg dd { margin-bottom: .5rem; }
  .quittung-beleg dd:last-child { margin-bottom: 0; }
  .quittung-siegel { --siegel: 62px; right: -14px; bottom: -18px; }
}