/* Hufnagel — base.css · Tokens aus Designsprache v1.0 */
:root {
  /* Farbe */
  --nacht: #111410;      --loden: #1C211B;     --moos: #262C24;
  --wollweiss: #E9E3D6;  --leinen: #D6CFC0;    --salbei-tief: #4A5244;
  --lanolin: #C9AF7E;    --text-2: #BDB7AA;    --text-3: #8C877C;
  --fehler: #D9A08B;     --linie: rgb(233 227 214 / .18);
  --linie-hell: rgb(28 33 27 / .2);

  /* Schrift */
  --serif: "Bodoni Moda", "Didot", serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
  --fs-display: clamp(88px, 13.9vw, 200px);
  --fs-h1: clamp(44px, 5vw, 72px);   --fs-h2: clamp(32px, 3vw, 44px);
  --fs-h3: clamp(24px, 2vw, 28px);   --fs-lead: clamp(19px, 1.5vw, 22px);
  --fs-body: clamp(16px, 1.25vw, 18px);
  --fs-label: 12px;  --fs-data: 13px;
  --ls-label: .3em;  --ls-overline: .5em;  --ls-display: -.035em;

  /* Raum */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --rand: clamp(20px, 4.4vw, 64px);  --inhalt-max: 1312px;
  --radius: 0;

  /* Bewegung */
  --atem: cubic-bezier(.2, .7, .2, 1);
  --dauer-kurz: 400ms;  --dauer: 900ms;  --dauer-lang: 1600ms;

  --kapitel: var(--s-11);
}
@media (max-width: 767px) { :root { --kapitel: var(--s-10); } }
@media (prefers-reduced-motion: reduce) {
  :root { --dauer: 200ms; --dauer-lang: 200ms; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nacht); color: var(--wollweiss);
  font-family: var(--sans); font-weight: 300; font-size: var(--fs-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
input { font: inherit; color: inherit; border-radius: 0; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; transition: color var(--dauer-kurz) var(--atem); }
:focus-visible { outline: 1px solid var(--lanolin); outline-offset: 4px; }
::selection { background: var(--lanolin); color: var(--nacht); }

/* Korn 4 % — fest, kachelnd, über allem Dunklen */
.korn {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .04;
  background-size: 256px 256px;
}

/* ---------- Typo-Stile ---------- */
.display { font-family: var(--serif); font-style: italic; font-size: var(--fs-display); line-height: .88; letter-spacing: var(--ls-display); }
.h1 { font-family: var(--serif); font-size: var(--fs-h1); line-height: 1; letter-spacing: -.02em; }
.h2 { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.01em; }
.h3 { font-family: var(--serif); font-style: italic; font-size: var(--fs-h3); line-height: 1.2; }
.lead { font-size: var(--fs-lead); line-height: 1.55; }
.body { font-size: var(--fs-body); line-height: 1.65; color: var(--text-2); max-width: 64ch; }
.overline { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--lanolin); }
.label { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; }
.data { font-family: var(--mono); font-size: var(--fs-data); line-height: 1.9; }
.wortmarke { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: var(--ls-display); line-height: 1; }
@media (max-width: 767px) { .overline { font-size: 11px; } .data { font-size: 12px; } }

.wrap { width: 100%; max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; height: 60px; min-width: 240px; padding: 0 var(--s-5);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase;
  transition: background var(--dauer) var(--atem), color var(--dauer) var(--atem), border-color var(--dauer) var(--atem), letter-spacing var(--dauer) var(--atem);
}
@media (max-width: 767px) { .btn { height: 56px; } }
.btn--primaer-hell { background: var(--loden); color: var(--wollweiss); }
.btn--primaer-hell:hover { background: var(--moos); letter-spacing: .42em; }
.btn--primaer-hell:active { background: var(--nacht); }
.btn--sekundaer-hell { border: 1px solid var(--loden); color: var(--loden); }
.btn--sekundaer-hell:hover { background: var(--loden); color: var(--wollweiss); }
.btn--primaer-dunkel { background: var(--wollweiss); color: var(--loden); }
.btn--primaer-dunkel:hover { background: var(--leinen); letter-spacing: .42em; }
.btn--sekundaer-dunkel { border: 1px solid rgb(233 227 214 / .5); color: var(--wollweiss); }
.btn--sekundaer-dunkel:hover { border-color: var(--wollweiss); background: var(--loden); }
.btn--vergriffen { background: var(--leinen); color: var(--salbei-tief); cursor: default; }
.textlink {
  display: inline-block; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid var(--lanolin);
  transition: color var(--dauer) var(--atem), letter-spacing var(--dauer) var(--atem);
}
.textlink:hover { color: var(--lanolin); letter-spacing: .4em; }
.erzaehllink { font-family: var(--serif); font-style: italic; font-size: 22px; transition: color var(--dauer) var(--atem); }
.erzaehllink:hover { color: var(--lanolin); }

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 88px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 40px;
  border-bottom: 1px solid transparent;
  transition: height var(--dauer) var(--atem), background var(--dauer) var(--atem), border-color var(--dauer) var(--atem);
}
.header .wortmarke { font-size: 28px; transition: font-size var(--dauer) var(--atem); view-transition-name: wortmarke; }
.header.is-fest { height: 64px; background: var(--loden); border-bottom-color: var(--linie); }
.header.is-fest .wortmarke { font-size: 22px; }
.header nav { display: flex; gap: var(--s-6); }
.header nav:last-child { justify-content: flex-end; }
.header nav a, .header nav button { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; }
.header nav a:hover, .header nav button:hover, .header [aria-current="page"] { color: var(--lanolin); }
.header .nur-mobil { display: none; }
@media (max-width: 1023px) {
  .header { padding: 0 var(--rand); }
  .header nav { gap: var(--s-5); }
}
@media (max-width: 767px) {
  .header, .header.is-fest { height: 64px; }
  .header .wortmarke, .header.is-fest .wortmarke { font-size: 22px; }
  .header .nur-desktop { display: none; }
  .header .nur-mobil { display: inline-flex; min-height: 44px; align-items: center; }
  .header nav a, .header nav button { font-size: 11px; letter-spacing: .24em; }
}

/* Mobil-Menü: Vollbild auf Nacht, Überblendung */
.menue {
  position: fixed; inset: 0; z-index: 60; background: var(--nacht);
  display: flex; flex-direction: column; padding: 18px var(--rand) 28px; gap: 28px;
  opacity: 0; visibility: hidden; transition: opacity var(--dauer) var(--atem), visibility 0s linear var(--dauer);
}
.menue.is-offen { opacity: 1; visibility: visible; transition: opacity var(--dauer) var(--atem); }
.menue__kopf { display: flex; justify-content: space-between; }
.menue__kopf button { min-height: 44px; }
.menue__liste { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); }
.menue__liste a { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; }
.menue__liste a:hover, .menue__liste [aria-current="page"] { color: var(--lanolin); }
.menue__fuss { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-2); font-family: var(--mono); font-size: 11px; color: var(--text-2); }

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--nacht);
}
.hero__film { position: absolute; inset: -8% 0; will-change: transform; }
.film-platzhalter {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 30% 72%, rgb(233 227 214 / .10), transparent 70%),
    radial-gradient(ellipse 60% 40% at 75% 60%, rgb(233 227 214 / .07), transparent 70%),
    linear-gradient(180deg, #2A3330 0%, #20261E 45%, #161A15 100%);
}
.film-platzhalter::before, .film-platzhalter::after {
  content: ""; position: absolute; left: -20%; right: -20%; height: 40%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(233 227 214 / .09), transparent 70%);
  animation: nebel 24s var(--atem) infinite alternate;
}
.film-platzhalter::before { top: 45%; }
.film-platzhalter::after { top: 58%; animation-duration: 31s; animation-direction: alternate-reverse; }
.huegel { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; }
@keyframes nebel { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.hero__abdunklung { position: absolute; inset: 0; background: rgb(17 20 16 / .6); }
.hero__laterne { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dauer) var(--atem);
  background: radial-gradient(circle 260px at var(--lx, 50%) var(--ly, 50%), rgb(214 180 120 / .22), rgb(214 180 120 / .06) 45%, transparent 70%); }
.hero.is-laterne .hero__laterne { opacity: 1; }
.hero__inhalt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 0 var(--rand); }
.hero__slogan { font-family: var(--serif); font-size: clamp(52px, 9.7vw, 140px); line-height: .9; letter-spacing: -.03em; }
.hero__fuss { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 20px 40px; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.hero__mobil-btn { display: none; }
@media (max-width: 767px) {
  .hero__inhalt .textlink { display: none; }
  .hero__mobil-btn { display: flex; position: absolute; left: var(--rand); right: var(--rand); bottom: 20px; height: 52px; min-width: 0; }
  .hero__fuss { display: none; }
  /* Laterne mobil aus: wandernder Lichtverlauf beim Scrollen */
  .hero__laterne { opacity: 1; background: radial-gradient(ellipse 120% 40% at 50% var(--scrolllicht, 20%), rgb(214 180 120 / .12), transparent 70%); }
}

/* ---------- Kapitel ---------- */
.kapitel-text {
  min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: var(--s-5); padding: var(--kapitel) var(--rand);
}
.kapitel-text .h1 { max-width: 15ch; }
.kapitel-text .body { max-width: 520px; }

.ornament { width: 160px; height: 24px; color: var(--lanolin); margin: 0 auto; }

.split { display: grid; grid-template-columns: 7fr 5fr; gap: 1px; background: var(--linie); }
.split__text { background: var(--nacht); padding: var(--s-9) var(--s-8); display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); }
.split__text .textlink { align-self: flex-start; margin-top: var(--s-2); }
@media (max-width: 1023px) { .split__text { padding: var(--s-8) var(--s-7); } }
@media (max-width: 767px) { .split { grid-template-columns: 1fr; } .split__text { padding: var(--s-8) var(--rand); } }

/* Bild-Platzhalter (bis Fotografie vorliegt) */
.bild {
  position: relative; overflow: hidden; background: var(--moos);
  background-image: repeating-linear-gradient(135deg, rgb(233 227 214 / .05) 0 1px, transparent 1px 8px);
}
.bild--hell { background-color: var(--leinen); color: var(--loden); background-image: repeating-linear-gradient(135deg, rgb(28 33 27 / .07) 0 1px, transparent 1px 8px); }
.bild__notiz { position: absolute; left: 14px; bottom: 12px; right: 14px; font-family: var(--mono); font-size: 11px; line-height: 1.6; }
.bild__notiz b { color: var(--lanolin); font-weight: 400; }
.bild--hell .bild__notiz b { color: var(--salbei-tief); }
.bild__motiv { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Nebel lichtet sich */
/* Unschärfe auf eigener Schicht, damit sie nicht über den Bildrand blutet */
.bild.nebel { background: var(--nacht); }
.nebel__schicht {
  position: absolute; inset: 0; background-color: var(--moos);
  background-image: repeating-linear-gradient(135deg, rgb(233 227 214 / .06) 0 1px, transparent 1px 10px);
  filter: blur(14px) brightness(.45); transform: scale(1.06);
  transition: filter var(--dauer-lang) var(--atem), transform var(--dauer-lang) var(--atem);
}
.nebel .bild__notiz { opacity: 0; transition: opacity var(--dauer-lang) var(--atem); }
.nebel.is-sichtbar .nebel__schicht { filter: none; transform: none; }
.nebel.is-sichtbar .bild__notiz { opacity: 1; }
.split .bild { min-height: 560px; }
@media (max-width: 767px) { .split .bild { min-height: 0; aspect-ratio: 1 / 1; } }

/* Text erscheint zeilenweise */
.steigt { opacity: 0; transform: translateY(8px); transition: opacity var(--dauer) var(--atem), transform var(--dauer) var(--atem); transition-delay: calc(var(--i, 0) * 120ms); }
.steigt.is-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .steigt { transform: none; }
  .nebel__schicht { filter: none; transform: none; opacity: 0; transition: opacity 200ms; }
  .nebel.is-sichtbar .nebel__schicht { opacity: 1; }
}

/* Kapitel III — einziger heller Block */
.uebergang { height: 240px; background: linear-gradient(var(--nacht), var(--wollweiss)); }
.kissen-block { background: var(--wollweiss); color: var(--loden); padding: var(--s-9) 0 var(--s-10); }
.kissen-block__kopf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: var(--s-8); }
.kissen-block .overline { color: var(--salbei-tief); }
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 767px) { .karten { grid-template-columns: 1fr; gap: var(--s-7); } }

.karte { display: flex; flex-direction: column; gap: var(--s-3); }
.karte__bild { aspect-ratio: 4 / 5; }
.karte__bild .bild__motiv { transition: opacity var(--dauer-lang) var(--atem); }
.karte__bild .lifestyle { opacity: 0; }
.karte:hover .karte__bild .lifestyle { opacity: 1; }
.karte__zeile { display: flex; justify-content: space-between; align-items: baseline; }
.karte__name { font-family: var(--serif); font-style: italic; font-size: 24px; }
.karte__preis { font-size: 14px; }
.karte__daten { font-family: var(--mono); font-size: 11px; color: var(--salbei-tief); }
.karte.is-vergriffen .karte__bild { opacity: .55; }
.karte.is-vergriffen .karte__daten { color: #8A6F3E; }
.groessen-tabelle { max-width: 520px; margin: var(--s-9) auto 0; display: flex; flex-direction: column; gap: var(--s-4); }
.groessen-tabelle .overline { color: var(--salbei-tief); }
.kissen-block__fuss { display: flex; justify-content: center; margin-top: var(--s-8); }

/* Zitat */
.zitat { position: relative; height: 80vh; min-height: 480px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 var(--rand); }
.zitat .bild { position: absolute; inset: -8% 0; }
.zitat__dunkel { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 50% 50%, rgb(17 20 16 / .5), transparent 80%), rgb(17 20 16 / .62); }
.zitat blockquote { position: relative; margin: 0; max-width: 680px; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.15; text-wrap: balance; }

/* Werte */
.werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); padding: var(--s-9) 0; border-bottom: 1px solid var(--linie); }
.werte h3 { font-family: var(--serif); font-style: italic; font-size: 26px; margin-bottom: var(--s-2); }
.werte p { font-size: 14px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 1023px) { .werte { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-7); } }
@media (max-width: 479px) { .werte { grid-template-columns: 1fr; } }

/* Aufklapper */
.aufklapper-block { padding: var(--s-9) 0; display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-8); border-bottom: 1px solid var(--linie); }
@media (max-width: 767px) { .aufklapper-block { grid-template-columns: 1fr; gap: var(--s-6); } }
.aufklapper { border-top: 1px solid var(--linie); }
.aufklapper details { border-bottom: 1px solid var(--linie); }
.aufklapper summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 20px 0; cursor: pointer; min-height: 44px; }
.aufklapper summary::-webkit-details-marker { display: none; }
.aufklapper summary .zeichen { font-family: var(--serif); font-size: 22px; line-height: 1; }
.aufklapper summary:hover .label { color: var(--lanolin); }
.aufklapper__inhalt { overflow: hidden; transition: height var(--dauer) var(--atem); }
.aufklapper__inhalt p { padding: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--text-2); max-width: 520px; }
.aufklapper--hell, .aufklapper--hell details { border-color: var(--linie-hell); }
.aufklapper--hell .aufklapper__inhalt p { color: var(--salbei-tief); }

/* ---------- Footer ---------- */
.footer { padding: var(--s-8) 0 var(--s-6); }
.briefe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: end; }
.briefe h2 { font-family: var(--serif); font-style: italic; font-size: 32px; margin-bottom: var(--s-3); }
.briefe p { font-size: 14px; color: var(--text-2); }
.briefe form { display: flex; align-items: flex-end; gap: var(--s-4); }
.briefe .meldung { grid-column: 2; font-size: 14px; color: var(--text-2); min-height: 1.6em; }
@media (max-width: 767px) { .briefe { grid-template-columns: 1fr; } .briefe .meldung { grid-column: 1; } }

.feld { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }
.feld label { font-size: 11px; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); transition: color var(--dauer-kurz) var(--atem); }
.feld input { background: transparent; border: 0; border-bottom: 1px solid rgb(233 227 214 / .4); padding: 10px 0; font-size: 18px; font-weight: 300; outline: none; transition: border-color var(--dauer-kurz) var(--atem); }
.feld input::placeholder { color: var(--text-3); }
.feld:focus-within label { color: var(--lanolin); }
.feld input:focus { border-bottom-color: var(--lanolin); }
.feld.is-fehler input { border-bottom-color: var(--fehler); }
.feld__fehler { font-size: 13px; color: var(--fehler); min-height: 0; }
.briefe button.textlink { padding-bottom: 10px; min-height: 44px; display: inline-flex; align-items: flex-end; }

.siegel { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); margin: var(--s-9) 0 var(--s-8); }
.siegel .wortmarke { padding-bottom: .12em; }
.siegel img { height: 72px; width: auto; }
.siegel .wortmarke { font-size: clamp(52px, 10vw, 160px); line-height: .8; letter-spacing: -.04em; text-align: center; }
.footer__zeile { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.footer__zeile nav { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.footer__zeile a:hover { color: var(--lanolin); }

/* ---------- Warenkorb-Schublade ---------- */
.schleier { position: fixed; inset: 0; z-index: 70; background: rgb(17 20 16 / .7); opacity: 0; visibility: hidden; transition: opacity var(--dauer) var(--atem), visibility 0s linear var(--dauer); }
.schleier.is-offen { opacity: 1; visibility: visible; transition: opacity var(--dauer) var(--atem); }
.korb {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(480px, 100%);
  background: var(--wollweiss); color: var(--loden); padding: 28px; display: flex; flex-direction: column; gap: 20px;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dauer) var(--atem), visibility 0s linear var(--dauer);
}
.korb.is-offen { transform: none; visibility: visible; transition: transform var(--dauer) var(--atem); }
.korb__kopf { display: flex; justify-content: space-between; align-items: baseline; }
.korb__kopf h2 { font-family: var(--serif); font-style: italic; font-size: 32px; }
.korb__kopf button { min-height: 44px; }
.korb__liste { flex: 1; overflow-y: auto; border-top: 1px solid var(--linie-hell); }
.korb__posten { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--linie-hell); }
.korb__posten .bild { aspect-ratio: 4 / 5; }
.korb__posten h3 { font-family: var(--serif); font-style: italic; font-size: 20px; }
.korb__posten .karte__daten { margin: 4px 0 8px; }
.menge { display: flex; align-items: center; gap: var(--s-1); font-size: 13px; }
.menge button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.menge button:hover { color: #8A6F3E; }
.korb__leer { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--salbei-tief); text-align: center; padding: var(--s-9) 0; }
.korb__summe { display: flex; justify-content: space-between; font-size: 15px; }
.korb__summe span:first-child { font-weight: 300; }
/* Bestätigung nach der Bestellung: Signet oben, Text darunter */
.korb__danke { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-9) var(--s-4); }
.korb__signet { color: var(--loden); margin-bottom: var(--s-4); animation: tafel-ein var(--dauer-lang) var(--atem) both; }
.korb__signet svg { display: block; height: 104px; width: auto; }
.korb__signet .faden { stroke-dasharray: 1; stroke-dashoffset: 1; animation: faden 1600ms var(--atem) 400ms forwards; }
.korb__danke-titel { font-family: var(--serif); font-style: italic; font-size: 36px; line-height: 1; color: var(--loden); animation: tafel-ein var(--dauer) var(--atem) 900ms both; }
.korb__danke-text { font-size: 16px; line-height: 1.6; color: var(--salbei-tief); max-width: 28ch; animation: tafel-ein var(--dauer) var(--atem) 1100ms both; }
@media (prefers-reduced-motion: reduce) { .korb__signet .faden { animation: none; stroke-dashoffset: 0; } }

/* Hinweis-Leiste (Microcopy) */
.hinweis {
  position: fixed; left: 50%; bottom: 24px; z-index: 85; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--loden); color: var(--wollweiss); border: 1px solid var(--linie); padding: 16px 24px; font-size: 15px;
  transition: opacity var(--dauer) var(--atem), transform var(--dauer) var(--atem);
}
.hinweis.is-sichtbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hinweis button { color: var(--lanolin); margin-left: var(--s-2); text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Lader: der Faden ---------- */
.lader { position: fixed; inset: 0; z-index: 100; background: var(--nacht); display: flex; align-items: center; justify-content: center; transition: opacity 600ms var(--atem); }
.lader svg { height: 132px; width: auto; color: var(--wollweiss); }
.lader .faden { stroke-dasharray: 1; stroke-dashoffset: 1; animation: faden 1600ms var(--atem) 300ms forwards; }
.lader.is-fertig { opacity: 0; pointer-events: none; }
@keyframes faden { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .lader .faden { animation: none; stroke-dashoffset: 0; } }

/* ---------- Produktseite ---------- */
.pdp { background: var(--wollweiss); color: var(--loden); display: grid; grid-template-columns: 1.35fr 1fr; padding-top: 64px; }
.pdp__bilder { display: flex; flex-direction: column; gap: 4px; }
.pdp__bilder .gross { aspect-ratio: 4 / 5; transition: background-color var(--dauer) var(--atem); }
.pdp__bilder .paar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pdp__bilder .paar .bild { aspect-ratio: 1 / 1; }
.pdp__bilder .breit { aspect-ratio: 3 / 2; color: var(--wollweiss); }
.pdp__kauf { position: sticky; top: 64px; align-self: start; padding: 72px 56px; display: flex; flex-direction: column; gap: 28px; }
.pdp__pfad { font-family: var(--mono); font-size: 11px; color: var(--salbei-tief); }
.pdp__pfad a:hover { color: #8A6F3E; }
.pdp__titel { display: flex; flex-direction: column; gap: var(--s-3); }
.pdp__titel .label { letter-spacing: .42em; font-size: 11px; }
.pdp__name { font-family: var(--serif); font-style: italic; font-size: clamp(64px, 6.1vw, 88px); line-height: .9; letter-spacing: -.025em; }
.pdp__preis { font-size: 20px; font-weight: 400; }
.pdp__text { font-size: 17px; line-height: 1.65; }
.pdp__wahl { display: flex; flex-direction: column; gap: var(--s-3); }
.pdp__wahl > .label { font-size: 11px; }
.farbpunkte { display: flex; gap: 6px; }
.farbpunkt { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.farbpunkt span { width: 26px; height: 26px; border-radius: 50%; outline: 1px solid transparent; outline-offset: 4px; transition: outline-color var(--dauer-kurz) var(--atem); }
.farbpunkt[aria-checked="true"] span, .farbpunkt[aria-current="page"] span { outline-color: var(--loden); }
.fuellung button.is-vergriffen:not([aria-checked="true"]) { color: var(--salbei-tief); }
.fuellung button.is-vergriffen span:first-child { text-decoration: line-through; text-decoration-thickness: 1px; }
.btn--vergriffen:disabled { cursor: default; }
.farbpunkt:hover span { outline-color: rgb(28 33 27 / .4); }
.fuellung { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--loden); }
.fuellung button { height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: background var(--dauer) var(--atem), color var(--dauer) var(--atem); }
.fuellung button span:first-child { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.fuellung button span:last-child { font-family: var(--mono); font-size: 10px; }
.fuellung button[aria-checked="true"] { background: var(--loden); color: var(--wollweiss); }
.fuellung button:not([aria-checked="true"]):hover { background: rgb(28 33 27 / .06); }
.pdp__hinweis { font-size: 13px; color: var(--salbei-tief); }
.datenblatt { font-family: var(--mono); font-size: 12px; line-height: 2; border-top: 1px solid var(--linie-hell); border-bottom: 1px solid var(--linie-hell); padding: 14px 0; margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-2); }
.datenblatt dt { white-space: nowrap; }
.datenblatt dt::after { content: " ···········"; color: var(--salbei-tief); }
.datenblatt dd { margin: 0; overflow: hidden; }
.pdp__kauf .btn { height: 64px; }
.pdp__versand { font-size: 13px; color: var(--salbei-tief); line-height: 1.6; }
.klebeleiste { display: none; }
@media (max-width: 1023px) { .pdp__kauf { padding: 56px 40px; } }
@media (max-width: 767px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__bilder { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; }
  .pdp__bilder > * { flex: 0 0 100%; scroll-snap-align: start; }
  .pdp__bilder .paar { display: contents; }
  .pdp__bilder .paar .bild, .pdp__bilder .breit { flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .pdp__kauf { position: static; padding: 18px var(--rand) 48px; gap: 22px; }
  .klebeleiste {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px var(--rand);
    background: var(--wollweiss); border-top: 1px solid var(--linie-hell);
    transform: translateY(100%); transition: transform var(--dauer) var(--atem);
  }
  .klebeleiste.is-sichtbar { transform: none; }
  .klebeleiste .btn { flex: 1; min-width: 0; }
}
.pdp-mehr { background: var(--wollweiss); color: var(--loden); padding: var(--s-9) 0; border-top: 1px solid var(--linie-hell); }
.pdp-mehr .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-8); }
@media (max-width: 767px) { .pdp-mehr .wrap { grid-template-columns: 1fr; gap: var(--s-6); } }

/* 404 / Herkunft-Kopf */
.seite-kopf { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s-5); padding: 160px var(--rand) var(--s-10); }

/* =========================================================
   Bewegung & visuelle Haken (v1.1)
   Alles langsam, eine Kurve (--atem), kein Bounce.
   ========================================================= */

/* Lese-Faden: Scrollfortschritt als 1-px-Lanolinlinie */
.lesefaden { position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 55; background: var(--lanolin); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* Hero mit Foto */
.hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: saturate(.8); transform: scale(1.14); }
body.ist-bereit .hero__bild { animation: fernsicht 14s var(--atem) forwards; }
@keyframes fernsicht { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.hero--foto .hero__abdunklung {
  background:
    radial-gradient(ellipse 50% 42% at 50% 48%, rgb(17 20 16 / .5), transparent 78%),
    linear-gradient(180deg, rgb(17 20 16 / .62) 0%, rgb(17 20 16 / .22) 34%, rgb(17 20 16 / .3) 62%, rgb(17 20 16 / .86) 100%);
}
.hero--foto .hero__slogan { text-shadow: 0 0 60px rgb(17 20 16 / .35); }

/* Slogan: Zeilen steigen aus einer Maske */
.hero__slogan .zeile { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__slogan .zeile > span { display: inline-block; transform: translateY(105%); }
body.ist-bereit .hero__slogan .zeile > span { animation: zeile-hoch var(--dauer-lang) var(--atem) forwards; }
body.ist-bereit .hero__slogan .zeile:nth-child(2) > span { animation-delay: 160ms; }
@keyframes zeile-hoch { to { transform: none; } }
.hero__auftakt { opacity: 0; transform: translateY(8px); transition: opacity var(--dauer) var(--atem), transform var(--dauer) var(--atem); }
body.ist-bereit .hero__auftakt { opacity: 1; transform: none; transition-delay: 500ms; }
body.ist-bereit .hero__auftakt.textlink { transition-delay: 900ms; }
.hero__pfeil { display: inline-block; animation: atmen 3.2s var(--atem) infinite; }
@keyframes atmen { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } }

/* Laufband */
.laufband { overflow: hidden; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--nacht); }
.laufband__spur { display: flex; width: max-content; animation: laufband 60s linear infinite; }
.laufband__spur span { font-family: var(--mono); font-size: 12px; color: var(--text-2); padding: 18px 28px; white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.laufband__spur span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lanolin); margin-left: 28px; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
@keyframes laufband { to { transform: translateX(-50%); } }

/* Ornament: Wellenfaden zeichnet sich */
.ornament path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dauer-lang) var(--atem) 300ms; }
.ornament.is-sichtbar path { stroke-dashoffset: 0; }

/* Der Weg — Faden folgt dem Scroll */
.weg { position: relative; height: 280vh; border-top: 1px solid var(--linie); }
.weg__buehne { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: var(--s-8); padding: 64px var(--rand) 0; max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; }
.weg__kopf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); }
.weg__strecke { position: relative; padding-bottom: 150px; }
@media (max-width: 767px) { .weg__strecke { padding-bottom: 0; } }
.weg__faden { width: 100%; height: 160px; display: block; overflow: visible; }
.weg__faden path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.weg__spur { stroke: var(--linie); stroke-width: 1; }
.weg__zug { stroke: var(--wollweiss); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--weg, 0)); }
.weg__stationen { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; left: 0; right: 0; height: 160px; }
.weg__stationen li { position: absolute; width: 22%; transform: translateX(-50%); padding-top: 28px; text-align: center; opacity: .28; transition: opacity var(--dauer) var(--atem); }
.weg__stationen li.is-erreicht { opacity: 1; }
.weg__punkt { position: absolute; left: 50%; top: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--nacht); border: 1px solid var(--text-3); transform: translateX(-50%); transition: background var(--dauer) var(--atem), border-color var(--dauer) var(--atem), box-shadow var(--dauer-lang) var(--atem); }
.weg__stationen li.is-erreicht .weg__punkt { background: var(--lanolin); border-color: var(--lanolin); box-shadow: 0 0 0 8px rgb(201 175 126 / .12); }
.weg__nr { display: block; font-family: var(--mono); font-size: 11px; color: var(--lanolin); margin-bottom: 6px; }
.weg__stationen h3 { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.1; margin-bottom: 6px; }
.weg__stationen p { font-size: 14px; color: var(--text-2); line-height: 1.5; }
@media (max-width: 1023px) { .weg__stationen h3 { font-size: 22px; } .weg__stationen p { font-size: 13px; } }
@media (max-width: 767px) {
  .weg { height: auto; padding: var(--s-10) 0; }
  .weg__buehne { position: static; height: auto; padding: 0 var(--rand); gap: var(--s-7); }
  .weg__faden { display: none; }
  .weg__stationen { position: relative; height: auto; display: flex; flex-direction: column; gap: var(--s-6); padding-left: 28px; border-left: 1px solid var(--linie); }
  .weg__stationen::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: var(--lanolin); transform-origin: 50% 0; transform: scaleY(var(--weg, 0)); }
  .weg__stationen li { position: relative; width: auto; transform: none; text-align: left; padding-top: 0; left: auto !important; top: auto !important; }
  .weg__punkt { left: -35px; top: 4px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .weg { height: auto; padding: var(--s-10) 0; }
  .weg__buehne { position: static; height: auto; }
}

/* Zitat: Wörter füllen sich mit Licht beim Scrollen */
[data-woerter] .wort { opacity: .2; transition: opacity var(--dauer-kurz) var(--atem); }
[data-woerter] .wort.is-hell { opacity: 1; }

/* Zahlen */
.fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); padding: var(--s-9) 0; border-bottom: 1px solid var(--linie); }
.fakt { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--lanolin); border-top-width: 1px; }
.fakt__zahl { font-family: var(--serif); font-style: italic; font-size: clamp(64px, 7vw, 112px); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fakt__text { font-family: var(--mono); font-size: 12px; color: var(--text-2); line-height: 1.7; }
@media (max-width: 767px) { .fakten { grid-template-columns: 1fr; gap: var(--s-7); } }

/* Siegel: Buchstaben steigen einzeln */
.siegel .wortmarke span { display: inline-block; opacity: 0; transform: translateY(.25em); transition: opacity var(--dauer-lang) var(--atem), transform var(--dauer-lang) var(--atem); transition-delay: calc(var(--b) * 70ms); }
.siegel.is-sichtbar .wortmarke span { opacity: 1; transform: none; }
.siegel img { opacity: 0; transition: opacity var(--dauer-lang) var(--atem); }
.siegel.is-sichtbar img { opacity: 1; }

/* Bilder atmen beim Hover */
.karte__bild > svg { transition: transform var(--dauer-lang) var(--atem); }
.karte:hover .karte__bild > svg { transform: scale(1.04); }
.karte__name { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dauer) var(--atem); }
.karte:hover .karte__name { background-size: 100% 1px; }
.split > .bild .nebel__schicht { transition: filter var(--dauer-lang) var(--atem), transform 2400ms var(--atem); }
.split > .bild.is-sichtbar:hover .nebel__schicht { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .hero__bild, body.ist-bereit .hero__bild { animation: none; transform: none; }
  .hero__slogan .zeile > span { transform: none; animation: none !important; }
  .laufband__spur, .hero__pfeil { animation: none; }
  [data-woerter] .wort { opacity: 1; }
}
@media (max-width: 767px) {
  .hero--foto { justify-content: flex-start; padding-top: 18vh; }
  .hero--foto .hero__bild { object-position: 30% 70%; }
  .hero--foto .hero__abdunklung {
    background: linear-gradient(180deg, rgb(17 20 16 / .7) 0%, rgb(17 20 16 / .55) 42%, rgb(17 20 16 / .15) 62%, rgb(17 20 16 / .75) 100%);
  }
}

/* Wer dahinter steckt — Bogenporträt & Steckbrief-Karte */
.mensch { padding: var(--s-10) var(--rand); max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; border-top: 1px solid var(--linie); }
.mensch__kopf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); margin-bottom: var(--s-9); }
.mensch__raster { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s-9); align-items: center; }

.mensch__bild { margin: 0; position: relative; padding: 0 0 48px 0; }
/* Bogen: oben voll gerundet, unten gerade — wie ein Stallfenster */
.mensch__bogen { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; overflow: hidden; isolation: isolate; }
.mensch__bogen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: saturate(.85) blur(14px) brightness(.45); transform: scale(1.08); transition: filter var(--dauer-lang) var(--atem), transform 2400ms var(--atem); }
.mensch__bogen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 55%, rgb(17 20 16 / .35)); pointer-events: none; }
.mensch__bild::before { content: ""; position: absolute; top: -18px; left: 18px; right: -18px; bottom: 30px; border: 1px solid var(--lanolin); border-radius: 999px 999px 0 0; opacity: 0; transform: translate(-10px, 10px); transition: opacity var(--dauer-lang) var(--atem), transform var(--dauer-lang) var(--atem); pointer-events: none; }
.mensch__bild.is-sichtbar .mensch__bogen img { filter: saturate(.85); transform: scale(1); }
.mensch__bild.is-sichtbar::before { opacity: .7; transform: none; transition-delay: 500ms; }

/* Drehender Schriftring mit Signet */
.mensch__ring { position: absolute; right: -36px; bottom: 0; width: 168px; height: 168px; background: var(--nacht); border-radius: 50%; border: 1px solid var(--linie); animation: ring 40s linear infinite; }
.mensch__ring text { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; fill: var(--lanolin); }
.mensch__signet { position: absolute; right: 22px; bottom: 50px; width: auto; height: 56px; pointer-events: none; }
@keyframes ring { to { transform: rotate(360deg); } }

/* Steckbrief-Karte */
.steckbrief { position: relative; background: var(--moos); border: 1px solid var(--linie); padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); }
.steckbrief::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(201 175 126 / .22); pointer-events: none; }
.steckbrief__kopf { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--lanolin); padding-bottom: var(--s-4); border-bottom: 1px solid var(--linie); }
.steckbrief__name { font-family: var(--serif); font-size: clamp(48px, 5vw, 76px); line-height: .95; letter-spacing: -.025em; margin-top: var(--s-3); }
.steckbrief__rolle { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; }
.steckbrief__text { font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 46ch; }
.steckbrief__felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin: var(--s-3) 0 0; }
.steckbrief__felder > div { background: var(--loden); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: 6px; transition: background var(--dauer) var(--atem), opacity var(--dauer) var(--atem), transform var(--dauer) var(--atem); }
.steckbrief__felder > div:hover { background: var(--nacht); }
.steckbrief__felder dt { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--lanolin); }
.steckbrief__felder dd { margin: 0; font-family: var(--serif); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.2; }
.steckbrief__faden { width: 120px; height: 20px; color: var(--lanolin); margin: var(--s-3) 0 0; }

@media (max-width: 1023px) { .mensch__raster { gap: var(--s-8); } .steckbrief { padding: var(--s-6); } }
@media (max-width: 767px) {
  .mensch__raster { grid-template-columns: 1fr; gap: var(--s-8); }
  .mensch__bild { max-width: 340px; width: 86%; margin: 0 auto; }
  .mensch__ring { width: 128px; height: 128px; right: -28px; }
  .mensch__signet { height: 42px; right: 15px; bottom: 54px; }
  .steckbrief { padding: var(--s-5); }
  .steckbrief::before { inset: 6px; }
  .steckbrief__felder { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mensch__bogen img { filter: saturate(.85); transform: none; }
  .mensch__ring { animation: none; }
}

/* Echte Fotografie in Bildflächen */
.bild__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.nebel .bild__foto { filter: saturate(.85) blur(14px) brightness(.45); transform: scale(1.06); transition: filter var(--dauer-lang) var(--atem), transform 2400ms var(--atem); }
.nebel.is-sichtbar .bild__foto { filter: saturate(.85); transform: none; }
.split > .bild.is-sichtbar:hover .bild__foto, .pdp__bilder .bild:hover .bild__foto { transform: scale(1.03); }
.pdp__bilder .bild__foto { transition: transform 2400ms var(--atem), filter var(--dauer-lang) var(--atem); }
@media (prefers-reduced-motion: reduce) { .nebel .bild__foto { filter: saturate(.85); transform: none; } }

/* Bildausschnitte — Motiv bleibt in jedem Format im Bild */
.foto--wolle-leinen { object-position: 46% 36%; }              /* Wollkuppe + Signet */
.foto--wollkorb { object-position: 50% 62%; }                  /* Korb samt Henkel */
.zitat .foto--wollkorb { object-position: 50% 56%; }
.pdp__bilder .detail { aspect-ratio: 1 / 1; }
.pdp__bilder .detail .bild__foto { object-position: 45% 47%; transform: scale(1.45); transform-origin: 45% 47%; }
.pdp__bilder .detail:hover .bild__foto { transform: scale(1.52); }
.pdp__bilder .breit .bild__foto { object-position: 50% 60%; }
@media (max-width: 767px) {
  .foto--wolle-leinen { object-position: 46% 42%; }
  .split .foto--wollkorb { object-position: 50% 64%; }
}
.split--umgekehrt { grid-template-columns: 5fr 7fr; }
@media (max-width: 767px) {
  .split--umgekehrt { grid-template-columns: 1fr; }
  .split--umgekehrt > .bild { order: -1; }
}

/* =========================================================
   Motion Graphics (v1.2) — je Abschnitt ein eigenes Motiv
   ========================================================= */

/* Wollflocken im Licht */
.flocken { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity var(--dauer-lang) var(--atem); }
body.ist-bereit .flocken, .zitat .flocken { opacity: 1; }
.zitat .flocken { z-index: 0; }
.zitat blockquote { z-index: 1; }

/* Kapitelzahlen: große, nur umrissene Ziffern in der Tiefe */
.kapitel--tiefe { position: relative; isolation: isolate; }
.kapitelzahl {
  position: absolute; z-index: -1; left: 50%; top: 50%; margin: -.52em 0 0 -.5em; width: 1em; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(260px, 34vw, 520px); line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgb(233 227 214 / .09); pointer-events: none; user-select: none; white-space: nowrap;
}
.split__text .kapitelzahl { font-size: clamp(200px, 22vw, 360px); left: auto; right: 4%; margin: -.52em 0 0; width: auto; }
.kapitelzahl--hell { -webkit-text-stroke-color: rgb(28 33 27 / .1); font-size: clamp(200px, 26vw, 400px); }
.split__text { overflow: hidden; }

/* Kapitel I: Höhenlinien des Hunsrücks */
.kapitel-text.kapitel--tiefe { overflow: hidden; }
.topo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%); }
.topo__linie { fill: none; stroke: rgb(233 227 214 / .11); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 3200ms var(--atem); transition-delay: calc(var(--k) * 140ms); }
.topo__linie--stark { stroke: rgb(201 175 126 / .28); }
.topo.is-sichtbar .topo__linie { stroke-dashoffset: 0; }
.topo g { animation: topo-atmen 26s ease-in-out infinite alternate; transform-origin: 50% 55%; }
@keyframes topo-atmen { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.04) rotate(1.2deg); } }
.topo__pin circle { fill: var(--lanolin); }
.topo__puls { fill: none !important; stroke: var(--lanolin); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: puls 3.6s var(--atem) infinite; }
.topo__puls--2 { animation-delay: 1.8s; }
@keyframes puls { from { transform: scale(1); opacity: .9; } to { transform: scale(7); opacity: 0; } }
.koordinate { position: absolute; left: var(--rand); bottom: var(--s-7); display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 11px; color: var(--text-3); text-align: left; }
.koordinate span:first-child { color: var(--lanolin); }

/* Kapitel II: Stempel auf dem Bild */
.stempel { position: absolute; z-index: 2; right: 24px; bottom: 24px; width: 132px; height: 132px; border-radius: 50%;
  background: rgb(17 20 16 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgb(233 227 214 / .25);
  opacity: 0; transform: scale(.92); transition: opacity var(--dauer-lang) var(--atem) 600ms, transform var(--dauer-lang) var(--atem) 600ms; }
.stempel text { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; fill: var(--wollweiss); }
.stempel text, .stempel defs { transform-origin: 100px 100px; animation: ring 36s linear infinite; }
.stempel__faden { stroke: var(--lanolin); stroke-width: 2.5; stroke-linecap: round; }
.nebel.is-sichtbar .stempel { opacity: 1; transform: none; }
@media (max-width: 767px) { .stempel { width: 96px; height: 96px; right: 14px; bottom: 14px; } }

/* Strichzeichnungen (gemeinsam) */
.strich { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.strich [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1800ms var(--atem); transition-delay: calc(var(--d, 0) * 220ms + 200ms); vector-effect: non-scaling-stroke; }
.strich.is-gezeichnet [pathLength] { stroke-dashoffset: 0; }
.strich--gold { stroke: var(--lanolin); }

/* Der Weg: Zeichen je Station */
.weg__zeichen { display: block; width: 40px; height: 40px; margin: 0 auto 10px; color: var(--wollweiss); }
.weg__stationen li.is-erreicht .weg__zeichen [pathLength] { stroke-dashoffset: 0; }
.weg__stationen li .weg__zeichen [pathLength] { transition-delay: 150ms; }
@media (max-width: 767px) { .weg__zeichen { margin: 0 0 8px; width: 34px; height: 34px; } }

/* Zahlen: kleine Bewegungsgrafiken */
.fakt__grafik { width: 120px; height: 60px; color: rgb(233 227 214 / .25); margin-bottom: var(--s-2); }
.fakt__grafik .strich--gold { transition-duration: 2200ms; }
.fakt__balken rect { fill: var(--lanolin); opacity: .85; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 900ms var(--atem); transition-delay: calc(var(--d) * 110ms + 300ms); }
.fakt__balken rect:nth-child(odd) { opacity: .45; }
.fakt__balken.is-gezeichnet rect { transform: scaleY(1); }

/* Werte: Zeichen */
.werte__zeichen { width: 44px; height: 44px; color: var(--lanolin); margin-bottom: var(--s-4); }

/* Kapitel III: Leinenstruktur im hellen Block */
.kissen-block { position: relative; background-image:
  repeating-linear-gradient(0deg, rgb(28 33 27 / .025) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(90deg, rgb(28 33 27 / .02) 0 1px, transparent 1px 4px); }

/* Footer: Faden unter dem Siegel */
.siegel__faden { width: 220px; height: 30px; color: var(--lanolin); margin-top: calc(var(--s-5) * -1); }

@media (prefers-reduced-motion: reduce) {
  .topo__linie, .strich [pathLength] { stroke-dashoffset: 0; transition: none; }
  .topo g, .topo__puls, .stempel text, .stempel defs { animation: none; }
  .fakt__balken rect { transform: none; transition: none; }
  .stempel { opacity: 1; transform: none; }
}

/* Herkunft: Höhenlinienkarte im Hero */
.topo--karte { z-index: 0; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 62%, #000 35%, transparent 80%); mask-image: radial-gradient(ellipse 80% 80% at 70% 62%, #000 35%, transparent 80%); }
.topo--karte .topo__linie { stroke: rgb(233 227 214 / .16); }
.topo--karte .topo__linie--stark { stroke: rgb(201 175 126 / .4); }
.topo__label { font-family: var(--mono); font-size: 13px; fill: var(--wollweiss); letter-spacing: .04em; opacity: 0; transition: opacity var(--dauer-lang) var(--atem) 2400ms; }
.topo__label--klein { font-size: 10px; fill: var(--text-2); }
.topo.is-sichtbar .topo__label { opacity: 1; }
.hero .hero__inhalt { z-index: 1; }
@media (max-width: 767px) { .topo__label { font-size: 18px; } .topo__label--klein { font-size: 13px; } }

/* Produktseite: Größenvergleich, maßstabsgetreu */
.massstab { margin: var(--s-4) 0 0; display: flex; align-items: flex-end; gap: var(--s-5); }
.massstab svg { width: 150px; height: auto; flex: none; overflow: visible; }
.massstab rect { fill: transparent; stroke: rgb(28 33 27 / .35); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke;
  transition: fill var(--dauer) var(--atem), stroke var(--dauer) var(--atem); }
.massstab text { font-family: var(--mono); font-size: 10px; fill: var(--salbei-tief); transition: fill var(--dauer) var(--atem); }
.massstab__feld.is-aktiv rect { fill: var(--tint); stroke: var(--loden); stroke-dasharray: none; }
.massstab__feld.is-aktiv text { fill: var(--loden); }
.massstab__feld.is-aktiv { animation: mass-atmen var(--dauer) var(--atem); transform-box: fill-box; transform-origin: 0 100%; }
@keyframes mass-atmen { from { transform: scale(.94); } to { transform: none; } }
.massstab figcaption { font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--salbei-tief); padding-bottom: 2px; }
.massstab figcaption b { font-weight: 400; color: var(--loden); display: block; font-size: 12px; }

/* =========================================================
   v1.3 — Film, Kino, Wortmasken, Zeiger, Seitenwechsel
   ========================================================= */

/* Filme blenden erst ein, wenn das erste Bild läuft */
video[data-film] { opacity: 0; transition: opacity var(--dauer-lang) var(--atem); background: var(--nacht); }
video[data-film].is-bereit { opacity: 1; }
.film-hintergrund { filter: saturate(.85); }

/* Kino: vom Fenster zur vollen Fläche */
.kino { position: relative; height: 230vh; background: var(--nacht); }
.kino__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.kino__rahmen {
  position: absolute; inset: 0;
  clip-path: inset(calc((1 - var(--auf, 0)) * 22%) calc((1 - var(--auf, 0)) * 26%));
  will-change: clip-path;
}
.kino__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.25 - var(--auf, 0) * .25 + var(--p, 0) * .04)); filter: saturate(.85); }
.kino__schleier { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgb(17 20 16 / .55), rgb(17 20 16 / .1) 30%, rgb(17 20 16 / .15) 60%, rgb(17 20 16 / .75)),
  rgb(17 20 16 / calc(.15 + var(--p, 0) * .25)); }
.kino__titel { position: absolute; left: var(--rand); bottom: 18vh; display: flex; flex-direction: column; gap: var(--s-4); max-width: 760px;
  opacity: calc((var(--auf, 0) - .55) * 3); transform: translateY(calc((1 - var(--auf, 0)) * 40px)); }
.kino__nr { font-family: var(--mono); font-size: 12px; color: var(--lanolin); letter-spacing: .1em; }
.kino__headline { font-family: var(--serif); font-size: clamp(72px, 12vw, 200px); line-height: .86; letter-spacing: var(--ls-display); }
.kino__unterzeile { font-size: var(--fs-lead); color: var(--text-2); max-width: 40ch; }
.kino__leiste { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: var(--s-4); padding: 20px var(--rand); font-family: var(--mono); font-size: 11px; color: var(--text-2); border-top: 1px solid var(--linie);
  opacity: calc((var(--auf, 0) - .7) * 4); }
.kino__rec { display: inline-flex; align-items: center; gap: 8px; color: var(--wollweiss); }
.kino__rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--fehler); animation: atmen 2.4s var(--atem) infinite; }
@media (max-width: 767px) {
  .kino { height: 180vh; }
  .kino__titel { bottom: 14vh; }
  .kino__leiste span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kino { height: auto; } .kino__buehne { position: relative; } .kino__rahmen { clip-path: none; } }

/* Zitat mit Film */
.zitat .bild { background: var(--nacht); }
.zitat__marke { position: absolute; z-index: 1; left: var(--rand); right: var(--rand); bottom: 20px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--text-2); }

/* Herkunft: Film unter der Karte */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.hero--herkunft .hero__abdunklung { background: radial-gradient(ellipse 60% 50% at 50% 42%, rgb(17 20 16 / .6), rgb(17 20 16 / .35) 70%), linear-gradient(180deg, rgb(17 20 16 / .5), transparent 30%, transparent 65%, rgb(17 20 16 / .9)); }

/* Kissen-Übersicht: Foto-Kopf */
.seite-kopf--foto { position: relative; min-height: 88vh; overflow: hidden; isolation: isolate; color: var(--wollweiss); }
.seite-kopf__bild { position: absolute; inset: -8% 0; z-index: -2; }
.seite-kopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: saturate(.85); transform: scale(1.1); transition: transform 6s var(--atem); }
body.ist-bereit .seite-kopf__bild img { transform: scale(1); }
.seite-kopf__dunkel { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 45% at 50% 52%, rgb(17 20 16 / .55), transparent 80%), linear-gradient(180deg, rgb(17 20 16 / .6), rgb(17 20 16 / .4) 45%, rgb(17 20 16 / .85)); }
.seite-kopf--foto .body { color: var(--wollweiss); }

/* Headlines: Wörter steigen aus der Maske */
.worte.steigt { opacity: 1; transform: none; }
.wort-maske { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wort-innen { display: inline-block; transform: translateY(108%); transition: transform 1300ms var(--atem); transition-delay: calc(var(--w) * 70ms + var(--i, 0) * 120ms); }
.worte.is-sichtbar .wort-innen { transform: none; }
@media (prefers-reduced-motion: reduce) { .wort-innen { transform: none !important; animation: none !important; } }

/* Laterne auf Karten, Steckbrief, Zahlen */
.karte__bild::after, .steckbrief::after, .fakt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dauer) var(--atem);
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgb(255 244 220 / .22), transparent 70%);
}
.steckbrief::after, .fakt::after { background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), rgb(201 175 126 / .1), transparent 70%); }
.fakt { position: relative; }
.karte:hover .karte__bild::after, .steckbrief:hover::after, .fakt:hover::after { opacity: 1; }
.karte__bild { position: relative; }

/* Zeiger: Ring aus Lanolin */
.zeiger, .zeiger-punkt { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; opacity: 0; transition: opacity var(--dauer-kurz) var(--atem); }
body.hat-zeiger .zeiger, body.hat-zeiger .zeiger-punkt { opacity: 1; }
.zeiger { width: 0; height: 0; }
.zeiger::before { content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgb(201 175 126 / .7);
  transition: transform var(--dauer) var(--atem), background var(--dauer) var(--atem), border-color var(--dauer) var(--atem); }
.zeiger.is-gross::before { transform: scale(1.7); background: rgb(201 175 126 / .08); }
.zeiger.is-text::before { transform: scale(2.6); background: rgb(17 20 16 / .55); border-color: var(--lanolin); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.zeiger__text { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--wollweiss); white-space: nowrap; opacity: 0; transition: opacity var(--dauer-kurz) var(--atem); }
.zeiger.is-text .zeiger__text { opacity: 1; transition-delay: 150ms; }
.zeiger-punkt::before { content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--lanolin); }

/* Seitenwechsel über Nacht (View Transitions) — Wortmarke bleibt stehen */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 600ms var(--atem) both seite-aus; }
::view-transition-new(root) { animation: 900ms var(--atem) both seite-ein; }
@keyframes seite-aus { to { opacity: 0; filter: blur(6px); } }
@keyframes seite-ein { from { opacity: 0; transform: translateY(12px); } }
::view-transition-group(wortmarke) { animation-duration: 900ms; animation-timing-function: var(--atem); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; } }

/* =========================================================
   v1.4 — Herkunft: Vorstellung (interaktiv) & Beweiskette
   ========================================================= */

/* Porträt: kippt mit der Maus, Ebenen bewegen sich unterschiedlich weit */
.mensch__bild::before { display: none; }
.mensch__bild { padding: 0; perspective: 1400px; }
.mensch__buehne { position: relative; transform-style: preserve-3d; padding: 22px 22px 56px 0;
  transform: rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg)); transition: transform 1200ms var(--atem); }
.mensch__bild.is-aktiv .mensch__buehne { transition-duration: 300ms; }
.mensch__rahmen { position: absolute; top: 0; left: 22px; right: 0; bottom: 34px; border: 1px solid var(--lanolin); border-radius: 999px 999px 0 0;
  transform: translate3d(calc(var(--dx, 0) * -14px), calc(var(--dy, 0) * -14px), -40px); opacity: 0; transition: opacity var(--dauer-lang) var(--atem) 400ms, transform 1200ms var(--atem); }
.mensch__bild.is-sichtbar .mensch__rahmen { opacity: .75; }
.mensch__bogen { transform: translate3d(calc(var(--dx, 0) * 6px), calc(var(--dy, 0) * 6px), 20px); transition: transform 1200ms var(--atem); }
.mensch__bogen img { object-position: 50% 62%; }
.mensch__licht { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity var(--dauer) var(--atem);
  background: radial-gradient(circle 280px at var(--lx, 50%) var(--ly, 40%), rgb(255 240 210 / .6), transparent 70%); }
.mensch__bild.is-aktiv .mensch__licht { opacity: 1; }
.mensch__ring { right: -30px; bottom: 6px; transform: translate3d(calc(var(--dx, 0) * 18px), calc(var(--dy, 0) * 18px), 60px); }
.mensch__signet { right: 28px; bottom: 56px; transform: translate3d(calc(var(--dx, 0) * 18px), calc(var(--dy, 0) * 18px), 61px); }
.mensch__unterzeile { display: flex; justify-content: space-between; margin-top: var(--s-4); padding-right: 22px; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.mensch__unterzeile span:first-child { color: var(--wollweiss); }
@media (prefers-reduced-motion: reduce) { .mensch__buehne, .mensch__rahmen, .mensch__bogen { transform: none !important; } }

/* Unterschrift zeichnet sich */
.unterschrift { width: 100%; max-width: 560px; height: auto; overflow: visible; margin-top: var(--s-2); }
.unterschrift text { font-family: var(--serif); font-style: italic; font-size: 96px; letter-spacing: -.02em; fill: transparent; stroke: var(--wollweiss); stroke-width: .8;
  stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset 3600ms var(--atem), fill 1400ms var(--atem) 2600ms; }
.unterschrift tspan { fill: inherit; }
.steckbrief.is-sichtbar .unterschrift text { stroke-dashoffset: 0; fill: var(--wollweiss); }
@media (prefers-reduced-motion: reduce) { .unterschrift text { stroke-dashoffset: 0; fill: var(--wollweiss); transition: none; } }

/* Reiter */
.reiter { position: relative; display: flex; gap: 2px; margin-top: var(--s-4); border-bottom: 1px solid var(--linie); }
.reiter button { flex: 1; min-height: 48px; padding: 0 var(--s-2); font-size: 11px; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2);
  transition: color var(--dauer-kurz) var(--atem), background var(--dauer) var(--atem); }
.reiter button:hover { color: var(--wollweiss); background: rgb(233 227 214 / .03); }
.reiter button[aria-selected="true"] { color: var(--wollweiss); }
.reiter__strich { position: absolute; bottom: -1px; left: 0; height: 1px; width: 25%; background: var(--lanolin); transform: translateX(calc(var(--r, 0) * 100%)); transition: transform var(--dauer) var(--atem); }
.reiter__zeit { height: 1px; background: transparent; overflow: hidden; }
.reiter__zeit i { display: block; height: 100%; width: 100%; background: rgb(201 175 126 / .45); transform-origin: 0 50%; transform: scaleX(0); }
.steckbrief.laeuft .reiter__zeit i { animation: reiter-zeit 7s linear forwards; }
@keyframes reiter-zeit { to { transform: scaleX(1); } }
.tafeln { display: grid; min-height: 236px; }
.tafel[hidden] { display: none; }
.tafel { grid-area: 1 / 1; padding-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.tafel.is-aktiv { animation: tafel-ein 900ms var(--atem) both; }
@keyframes tafel-ein { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.tafel__text { font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 46ch; }
.tafel__gross { font-family: var(--serif); font-size: clamp(30px, 3vw, 42px); line-height: 1.05; letter-spacing: -.015em; }
.tafel__zeichen { width: 44px; height: 44px; color: var(--lanolin); }
.tafel.is-aktiv .tafel__zeichen [pathLength] { stroke-dashoffset: 0; }
.tafel__schritte { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); flex-wrap: wrap; counter-reset: s; }
.tafel__schritte li { counter-increment: s; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--linie); font-family: var(--mono); font-size: 12px;
  opacity: 0; transform: translateY(6px); animation: schritt 900ms var(--atem) forwards; }
.tafel__schritte li::before { content: "0" counter(s); color: var(--lanolin); }
.tafel__schritte li:nth-child(2) { animation-delay: 180ms; } .tafel__schritte li:nth-child(3) { animation-delay: 360ms; }
@keyframes schritt { to { opacity: 1; transform: none; } }
.steckbrief__felder { margin-top: var(--s-2); }

/* Beweiskette */
.beweise { position: relative; padding: var(--s-11) var(--rand) var(--s-10); border-top: 1px solid var(--linie); overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgb(201 175 126 / .06), transparent 70%); }
.beweise__kopf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); max-width: 900px; margin: 0 auto var(--s-9); }
.beweise__kopf .h1 { font-size: clamp(48px, 6.4vw, 96px); }
.beweise__kopf .body { max-width: 52ch; }
.beweise__kette { position: relative; max-width: var(--inhalt-max); margin: 0 auto; }
.beweise__faden { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 60px; overflow: visible; z-index: 0; }
.beweise__faden path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.beweise__spur { stroke: var(--linie); stroke-width: 1; }
.beweise__zug { stroke: var(--lanolin); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--kette, 0)); }
.beweise__licht { fill: var(--wollweiss); filter: drop-shadow(0 0 6px rgb(201 175 126 / .9)); opacity: var(--kette, 0); }
.beweise__liste { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.beweis { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: 72px var(--s-6) var(--s-6); min-height: 460px; outline: none;
  background: linear-gradient(180deg, rgb(38 44 36 / .0), rgb(38 44 36 / .55)); border: 1px solid transparent; border-top: 0;
  transition: background var(--dauer) var(--atem), border-color var(--dauer) var(--atem), transform 1200ms var(--atem); }
.beweis::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dauer) var(--atem);
  background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 30%), rgb(201 175 126 / .12), transparent 70%); }
.beweis:hover, .beweis:focus-visible { background: linear-gradient(180deg, rgb(38 44 36 / .35), rgb(38 44 36 / .9)); border-color: var(--linie); transform: translateY(-8px); }
.beweis:hover::after, .beweis:focus-visible::after { opacity: 1; }
.beweis__knoten { position: absolute; left: var(--s-6); top: 24px; width: 13px; height: 13px; border-radius: 50%; background: var(--nacht); border: 1px solid var(--lanolin);
  transition: background var(--dauer) var(--atem), box-shadow var(--dauer-lang) var(--atem); }
.beweis.is-erreicht .beweis__knoten { background: var(--lanolin); box-shadow: 0 0 0 8px rgb(201 175 126 / .12); }
.beweis__nr { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lanolin); }
.beweis__zeichen { width: 56px; height: 56px; color: var(--wollweiss); transition: color var(--dauer) var(--atem), transform 1200ms var(--atem); }
.beweis:hover .beweis__zeichen, .beweis:focus-visible .beweis__zeichen { color: var(--lanolin); transform: translateY(-4px); }
.beweis__wort { font-family: var(--serif); font-size: clamp(40px, 3.6vw, 60px); line-height: .95; letter-spacing: -.025em; margin-top: auto; }
.beweis__text { font-size: 15px; line-height: 1.6; color: var(--text-2); max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 1200ms var(--atem), opacity var(--dauer) var(--atem); }
.beweis:hover .beweis__text, .beweis:focus-visible .beweis__text, .beweis.is-offen .beweis__text { max-height: 160px; opacity: 1; }
.beweis__beleg { font-family: var(--mono); font-size: 11px; color: var(--text-2); padding-top: var(--s-3); border-top: 1px solid var(--linie); }
.beweise__sitz { display: flex; align-items: baseline; justify-content: center; gap: var(--s-4); margin-top: var(--s-9); font-family: var(--mono); font-size: 12px; color: var(--text-2); letter-spacing: .1em; text-transform: uppercase; }
.beweise__sitz strong { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.01em; text-transform: none; color: var(--wollweiss); }
.beweise__puls { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lanolin); align-self: center; margin-right: var(--s-3); }
.beweise__puls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--lanolin); animation: puls-css 3.6s var(--atem) infinite; }
@keyframes puls-css { from { transform: scale(1); opacity: .9; } to { transform: scale(6); opacity: 0; } }

@media (max-width: 1100px) {
  .beweise__liste { grid-template-columns: repeat(2, 1fr); }
  .beweise__faden { display: none; }
  .beweis { min-height: 380px; }
}
@media (hover: none), (max-width: 767px) { .beweis__text { max-height: 160px; opacity: 1; } }
@media (max-width: 767px) {
  .beweise { padding-top: var(--s-10); }
  .beweise__liste { grid-template-columns: 1fr; gap: var(--s-4); }
  .beweis { min-height: 0; padding: 56px var(--s-5) var(--s-5); }
  .beweis:hover { transform: none; }
  .beweise__sitz { flex-direction: column; align-items: center; gap: var(--s-2); }
  .tafeln { min-height: 280px; }
}

/* Sitz: stilisierte Deutschlandkarte mit Leuchtpunkt */
.sitz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-9); align-items: center; max-width: 1100px; margin: var(--s-10) auto 0; padding-top: var(--s-9); border-top: 1px solid var(--linie); }
.sitz__karte { margin: 0; position: relative; }
.sitz__karte svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.sitz__flaeche { fill: url(#punkt-raster); opacity: 0; transition: opacity 2200ms var(--atem) 600ms; }
#punkt-raster circle { fill: rgb(233 227 214 / .32); }
.sitz__umriss { fill: none; stroke: rgb(233 227 214 / .55); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3200ms var(--atem); }
.sitz__fluss { fill: none; stroke: rgb(201 175 126 / .45); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2600ms var(--atem) 1400ms; }
.sitz__schein { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 1600ms var(--atem) 1800ms; animation: schein-atmen 6s ease-in-out infinite alternate; }
@keyframes schein-atmen { from { transform: scale(.85); } to { transform: scale(1.15); } }
.sitz__leitlinie { fill: none; stroke: var(--lanolin); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1200ms var(--atem) 2400ms; }
.sitz__name { font-family: var(--serif); font-style: italic; font-size: 26px; fill: var(--wollweiss); opacity: 0; transition: opacity var(--dauer-lang) var(--atem) 3000ms; }
.sitz__klein { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; fill: var(--lanolin); opacity: 0; transition: opacity var(--dauer-lang) var(--atem) 3200ms; }
.sitz__pin { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity 900ms var(--atem) 2000ms, transform 900ms var(--atem) 2000ms; }
.sitz__kern { fill: var(--lanolin); filter: drop-shadow(0 0 6px rgb(201 175 126 / .9)); }
.sitz__welle { fill: none; stroke: var(--lanolin); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: puls 3.6s var(--atem) infinite; }
.sitz__welle--2 { animation-delay: 1.2s; } .sitz__welle--3 { animation-delay: 2.4s; }
.sitz__karte.is-sichtbar .sitz__flaeche { opacity: 1; }
.sitz__karte.is-sichtbar .sitz__umriss, .sitz__karte.is-sichtbar .sitz__fluss, .sitz__karte.is-sichtbar .sitz__leitlinie { stroke-dashoffset: 0; }
.sitz__karte.is-sichtbar .sitz__schein, .sitz__karte.is-sichtbar .sitz__name, .sitz__karte.is-sichtbar .sitz__klein { opacity: 1; }
.sitz__karte.is-sichtbar .sitz__pin { opacity: 1; transform: none; }

.sitz__text { display: flex; flex-direction: column; gap: var(--s-4); }
.sitz__label { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lanolin); }
.sitz__ort { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5vw, 76px); line-height: .95; letter-spacing: -.02em; }
.sitz__absatz { font-size: var(--fs-body); line-height: 1.65; color: var(--text-2); max-width: 46ch; }
.sitz__daten { margin: var(--s-3) 0 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.sitz__daten > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 14px var(--s-5); background: var(--nacht); transition: background var(--dauer) var(--atem); }
.sitz__daten > div:hover { background: var(--moos); }
.sitz__daten dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.sitz__daten dd { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; text-align: right; }
@media (max-width: 900px) {
  .sitz { grid-template-columns: 1fr; gap: var(--s-7); }
  .sitz__karte svg { max-width: 340px; }
  .sitz__text { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .sitz__flaeche, .sitz__schein, .sitz__name, .sitz__klein, .sitz__pin { opacity: 1; transform: none; transition: none; }
  .sitz__umriss, .sitz__fluss, .sitz__leitlinie { stroke-dashoffset: 0; transition: none; }
  .sitz__welle, .sitz__schein { animation: none; }
}

/* Porträt fix: keine Neigung, keine Verschiebung */
.mensch__buehne, .mensch__rahmen, .mensch__bogen, .mensch__ring, .mensch__signet { transform: none !important; }
@media (max-width: 480px) { .reiter button { letter-spacing: .12em; font-size: 10px; padding: 0 2px; } }

.korb__summe small { font-size: 12px; color: var(--salbei-tief); }
.korb__summe { gap: var(--s-4); align-items: baseline; }

/* Newsletter: unsichtbares Feld gegen Bots, Hinweis zur Bestätigung */
.feld-falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.briefe form { position: relative; }
.briefe__hinweis { grid-column: 2; font-size: 12px; line-height: 1.6; color: var(--text-3); max-width: 52ch; margin-top: calc(var(--s-3) * -1); }
.briefe__hinweis a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--lanolin); text-underline-offset: 3px; }
@media (max-width: 767px) { .briefe__hinweis { grid-column: 1; } }

/* Rechtsseiten */
.recht { padding: 160px var(--rand) var(--s-10); max-width: 860px; margin: 0 auto; }
.recht__kopf { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-8); padding-bottom: var(--s-6); border-bottom: 1px solid var(--linie); }
.recht__kopf .h1 { font-size: clamp(44px, 6vw, 80px); }
.recht__text { display: flex; flex-direction: column; gap: var(--s-7); }
.recht__abschnitt h2 { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.4vw, 32px); margin-bottom: var(--s-3); }
.recht__abschnitt p { font-size: 16px; line-height: 1.7; color: var(--text-2); max-width: 68ch; }
.recht__abschnitt a { color: var(--wollweiss); text-decoration: underline; text-decoration-color: var(--lanolin); text-underline-offset: 4px; }
.recht__daten { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 6px var(--s-5); margin: 0; font-size: 16px; }
.recht__daten dt { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.recht__daten dd { margin: 0; color: var(--wollweiss); }
.recht__platzhalter { margin-top: var(--s-3); padding: 12px 16px; border: 1px dashed rgb(201 175 126 / .5); font-family: var(--mono); font-size: 12px !important; color: var(--lanolin) !important; }
.recht__stand { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
@media (max-width: 560px) { .recht__daten { grid-template-columns: 1fr; gap: 2px; } .recht__daten dd { margin-bottom: var(--s-3); } }

/* Produktkarte: ruhige Leinenfläche, bis das Shopify-Foto da ist */
.karte__warten { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .18) 50%, transparent 70%) var(--leinen); background-size: 220% 100%; animation: karte-warten 2.4s var(--atem) infinite; }
@keyframes karte-warten { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.karte__bild .bild__foto { animation: foto-ein var(--dauer) var(--atem) both; }
@keyframes foto-ein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .karte__warten, .karte__bild .bild__foto { animation: none; } }

/* Hero-Fuß: nur noch der Pfeil, rechts */
.hero__fuss { justify-content: flex-end; }