/* ehrlich leicht — Vorschau 3 „Ein Tisch, ein Faden, ein Licht".
   Stufe 1: Buehne (Tisch, wanderndes Licht, Korn) + Papier-Boegen mit
   lichtgerichteten Schatten (Crossfade zweier vorgerenderter Zustaende).
   Gesetz: gescrubbt wird nur Raum, getriggert wird nur Inhalt.
   Ohne JS/mit reduced-motion: alles statisch, voll lesbar. */

:root{
  --petrol:#28504C;
  --petrol-tief:#1E3D3A;
  --ton:#F7F5F2;             /* Grundton, faehrt ueber die Seite (nie unter #ECE7DF) */
  --papier-bogen:#FDFCF9;
  /* Schatten-Zustand A: Morgenlicht flach von links oben (lange weiche Wuerfe) */
  --schatten-a:
    1px 2px 2px rgba(56,44,32,.06),
    4px 8px 14px rgba(56,44,32,.07),
    14px 22px 38px -8px rgba(56,44,32,.13),
    30px 44px 70px -18px rgba(120,80,60,.13);
  /* Schatten-Zustand B: Licht hoch (kurze, engere Wuerfe) */
  --schatten-b:
    0 1px 2px rgba(56,44,32,.08),
    0 5px 10px rgba(56,44,32,.08),
    0 14px 26px -8px rgba(56,44,32,.15),
    0 26px 48px -16px rgba(120,80,60,.12);
}

html{scroll-behavior:auto}
body{background:var(--ton);transition:none}

/* ── Buehne ─────────────────────────────────────────────────── */
/* Der Tisch: helle Eiche (Jans Wahl, Variante A) */
#tisch{
  position:fixed;inset:-6% 0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 36%, rgba(244,238,230,0) 30%, rgba(196,180,160,.62) 100%),
    repeating-linear-gradient(92deg, rgba(150,118,88,.05) 0 3px, rgba(150,118,88,0) 3px 9px, rgba(150,118,88,.028) 9px 14px, rgba(150,118,88,0) 14px 26px),
    repeating-linear-gradient(88deg, rgba(120,92,66,.035) 0 60px, rgba(120,92,66,0) 60px 61px, rgba(120,92,66,.05) 61px 62px, rgba(120,92,66,0) 62px 140px),
    linear-gradient(180deg,#EFE7DB 0%,#EAE0D1 55%,#E3D6C3 100%);
}
/* Akzent-Alternative zur Begutachtung (?akzent=warm): warmes Bronze
   statt Petrol fuer alles Klickbare. NUR-JAN-Entscheid, Petrol ist
   Markenfarbe (Logo). */
html[data-akzent="warm"]{--petrol:#6B4A32;--petrol-tief:#54381F}
#licht{position:fixed;inset:0;z-index:-2;pointer-events:none}
#licht .blob{
  position:absolute;width:120vmax;height:120vmax;border-radius:50%;
  will-change:transform,opacity;
}
#licht .b1{ /* das grosse Tageslicht */
  left:-30vmax;top:-46vmax;
  background:radial-gradient(closest-side, rgba(255,253,248,.95) 0%, rgba(250,246,239,.55) 34%, rgba(247,245,242,0) 68%);
}
#licht .b2{ /* die Schreibtischlampe (Buendel), startet unsichtbar */
  left:-10vmax;top:-20vmax;opacity:0;
  background:radial-gradient(closest-side, rgba(255,250,240,.98) 0%, rgba(252,246,236,.6) 26%, rgba(247,245,242,0) 58%);
}
/* Lampen-Vignette: beim Selbst-Check dunkeln die Raender warm ab,
   der Blick faellt in den Lichtkegel auf dem Zettel. Liegt ueber
   dem Inhalt (multiply), unter dem Korn. */
/* Ohne mix-blend-mode: fullscreen-Blending kostete gemessen ~40 fps.
   Warme Lasur mit Alpha sieht auf dem hellen Tisch identisch aus. */
#lampe{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;
  background:radial-gradient(72% 58% at 50% 52%, rgba(120,92,58,0) 40%, rgba(120,92,58,.05) 62%, rgba(120,92,58,.16) 100%);
  will-change:opacity;
}
#korn{
  position:fixed;inset:-40px;z-index:60;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ── Boegen: Papier im Licht ────────────────────────────────── */
.bogen{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--papier-bogen) 70%,#FBF8F2 100%);
  border:1px solid rgba(56,44,32,.05);
  border-radius:2px;
  width:min(47.5rem,100% - var(--rand)*2); /* schmal genug, dass der Tisch immer traegt */
  padding-inline:clamp(1.5rem,5vw,4.2rem);
  padding-block:clamp(2.8rem,6.5vh,4.6rem);
  transform:rotate(var(--rot,0deg));
  margin-block:clamp(4.5rem,11vh,8rem);    /* mehr Tisch zwischen den Blaettern */
}
/* Blatt-Versaetze (der Blick wandert ueber den Tisch) setzt erlebnis.js
   via gsap.matchMedia — GSAP besitzt den Transform exklusiv, kein CSS-Konflikt */
.bogen.paar{border-top:0} /* Baseline-Hairlines aus */
.paar + .paar{border-top:0}
/* lichtgerichtete Schatten als Crossfade zweier Pseudos (kein box-shadow-Tween) */
.bogen::before,.bogen::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  pointer-events:none;
}
.bogen::before{box-shadow:var(--schatten-a);opacity:calc(1 - var(--lichtmix,0))}
.bogen::after{box-shadow:var(--schatten-b);opacity:var(--lichtmix,0)}
/* Ueberlappung: jeder Bogen liegt UNTER dem vorigen, wird beim Scrollen frei */
.bogen + .bogen,.bogen.brief{margin-top:calc(-1*clamp(1.6rem,4vh,3rem))}
#ankommen{z-index:11}#brief-1{z-index:10}#brief-alter{z-index:9}#brief-2{z-index:8}
#brief-3{z-index:7}#rueckschlag{z-index:6}#arbeit{z-index:5}#arbeit-rahmen{z-index:4}
#gespraech{z-index:6}
/* Binnen-Spalte im Bogen (Bogen ist breiter als der Text) */
.bogen .jan{max-width:34rem}
.bogen .sie{max-width:14ch}

/* Papier-Linierung nur in Randzonen (nie unter dem Text) */
.bogen .jan p{hyphens:manual}
@media(max-width:40rem){.bogen .jan p{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3}}

/* ── Der Faden (Rosé, wie mit Marker gezogen) ───────────────── */
/* GESETZ nach Jans Feedback: der Marker schreibt NUR auf Papier,
   nie auf den Tisch. Jede Geste ist EIN sauberer Strich, kein
   Doppelzug, keine Uebermalung. */
.faden{
  position:absolute;left:clamp(1.6rem,6vw,6rem);top:auto;width:min(44rem,86%);
  margin-top:-1.2rem;overflow:visible;pointer-events:none;
}
/* Kein mix-blend-mode mehr (kostete gemessen ~10 fps): die Gesten
   liegen seit dem Umbau neben dem Text, nicht darauf. */
.faden path{
  stroke:#E7BFB6;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  fill:none;opacity:.85;
}
#faden-1{height:340px;margin-bottom:-240px} /* laeuft ueber den Blattrand hinaus */
/* Gesten: satte Betonungen an Inhalts-Stellen (getriggert, bleiben stehen) */
.g-zitatstrich{left:auto;right:1.9rem;top:clamp(3rem,7vh,5rem);width:1.15rem;height:12.5rem;margin:0}
.kringel-wort{position:relative}
.g-kringel{left:-.5em;top:-.34em;width:calc(100% + .92em);height:calc(100% + .64em);margin:0}
.g-pfeil{left:.1rem;top:-3.4rem;width:9.5rem;height:3.2rem;margin:0}
.g-haken{position:relative;display:inline-block;left:auto;top:auto;width:1.05em;height:1.05em;margin:0 0 0 .55em;vertical-align:-18%}
.halt{white-space:nowrap}
.g-anstrich{left:-1.5rem;top:.15em;width:.7rem;height:3em;margin:0}
.g-anstrich-label{left:-1.5rem;top:-.3em;width:.62rem;height:1.75em}
.g-randnotiz{left:-.15rem;top:clamp(3.4rem,9vh,6.5rem);height:min(34rem,56%);width:1.05rem;margin:0}
.bogen .jan{position:relative}
.bogen .jan p{position:relative}
.bogen .label{position:relative}
/* Finale: der Faden endet als Unterstreichung unter dem CTA */
.faden-ende{position:static;display:block;width:min(22rem,80%);height:46px;margin:.4rem auto 0;overflow:visible}
.faden-ende path{stroke-width:6;opacity:.9}
/* Unter 1100px: der Zitatstrich hat keinen Platz, Gesten am Text bleiben */
@media(max-width:1099.5px){
  .g-zitatstrich{display:none}
  .g-anstrich{left:-1.1rem;width:.6rem}
  .g-anstrich-label{left:-1.2rem}
}

/* ── Trust-Zeile im Hero (Vorschlag, wartet auf Jans Go) ────── */
.trust-zeile{display:flex;align-items:center;gap:.55rem;margin-top:.5rem;white-space:nowrap;max-width:none}
@media(max-width:640px){.trust-zeile{white-space:normal}}
.trust-zeile .sterne{margin:0}
.trust-zeile .sterne svg{width:13px;height:12px;fill:#C99A63}

/* ── Zettel (Selbst-Check) ──────────────────────────────────── */
.zettelzone{position:relative;z-index:9}
.check{
  background:
    repeating-linear-gradient(180deg, transparent 0 2.05rem, rgba(56,44,32,.05) 2.05rem calc(2.05rem + 1px)),
    linear-gradient(180deg,#FFFFFF,#FCFAF5);
  border:1px solid rgba(56,44,32,.06);border-radius:2px;
  box-shadow:var(--schatten-b);
  width:min(44rem,100%);margin-inline:auto;
  transform:rotate(-.4deg);
}
.check li{border-top-color:rgba(74,56,36,.10);cursor:pointer;user-select:none;position:relative;padding-left:2.6rem}
.check li::before{
  content:"";position:absolute;left:.15rem;top:calc(50% - .62rem);
  width:1.15rem;height:1.15rem;border-radius:50%;
  border:1.5px solid var(--sekundaer);transition:border-color 200ms var(--ease-ui);
}
.check li:hover::before{border-color:var(--petrol)}
.check li:focus-visible{outline:2px solid var(--petrol);outline-offset:4px}
.check li .haken{position:absolute;left:.15rem;top:calc(50% - .62rem);width:1.15rem;height:1.15rem;overflow:visible}
.check li .haken path{stroke:var(--petrol);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;
  stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .4s cubic-bezier(.22,.61,.36,1)}
.check li.an .haken path{stroke-dashoffset:0}
.check li:first-child::before,.check li:first-child .haken{top:calc(50% - .32rem)}
.check .schwelle{transition:opacity 300ms var(--ease)}
.check.genug .schwelle{opacity:.55}
.check .antwort{margin-top:var(--s5)}
html.js .check .antwort .btn{
  background:transparent;color:var(--petrol);
  box-shadow:inset 0 0 0 1.5px rgba(40,80,76,.55);
  transition:background 260ms var(--ease),color 260ms var(--ease),box-shadow 260ms var(--ease),transform 220ms var(--ease);
}
html.js .check.genug .antwort .btn{
  background:var(--petrol);color:var(--papier);
  box-shadow:0 1px 1px rgba(30,61,58,.12),0 3px 6px rgba(30,61,58,.12),0 10px 24px -6px rgba(30,61,58,.35);
  transform:translateY(-1px);
}

/* ── Wie ich arbeite: die Quer-Passage ──────────────────────── */
.arbeit-buehne{position:relative;z-index:3}
.arbeit-innen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(2rem,5vh,3.5rem)}
.arbeit-buehne .label{
  position:relative;margin-bottom:clamp(1.4rem,3.5vh,2.4rem);letter-spacing:.14em;
  /* steht ueber dem ersten Blatt, nicht am Bildrand (Anstrich folgt mit) */
  margin-left:calc(50vw - min(19rem, 50vw - 1.5rem) + clamp(1.5rem,5vw,3.4rem));
  padding-inline:0;max-width:none;width:max-content;
}
/* EIN aufgefalteter Plan: ein einziges langes Blatt zieht quer durch,
   drei Etappen darauf, getrennt durch Falzkanten, verbunden durch die
   Rosé-Achse. Ein Objekt statt drei Schnipsel. */
.arbeit-track{
  display:flex;align-items:flex-start;
  padding-inline:calc(50vw - min(19rem, 50vw - 1.5rem));
  will-change:transform;
}
.arbeit-blatt{
  display:flex;width:max-content;margin:0;
  padding:clamp(1.9rem,4vh,2.6rem) 0 clamp(2rem,4.5vh,2.9rem);
  position:relative;
}
.etappe-sp{
  width:min(37rem,84vw);flex:0 0 auto;position:relative;
  padding-inline:clamp(1.8rem,4vw,3.2rem);
}
.etappe-sp .jan p{font-size:17.5px;line-height:1.6}
/* Falzkante: das Papier ist gefaltet, nicht geschnitten */
.etappe-sp + .etappe-sp{
  border-left:1px solid rgba(56,44,32,.09);
  box-shadow:inset 7px 0 14px -12px rgba(56,44,32,.55);
}
.etappe-sp .jan{max-width:none}
/* Einleitung ueber den drei Ebenen (bleibt beim Gleiten stehen) */
.arbeit-intro{margin-bottom:clamp(.9rem,2.2vh,1.5rem)}
.arbeit-intro .jan{max-width:46rem}
.arbeit-intro .jan p{margin:0;font-size:17.5px;line-height:1.6}
/* Etappen-Ziffer im Duktus der Ablauf-Liste des Finales */
.etappe{
  display:block;font-family:var(--stimme);font-style:italic;font-weight:400;
  font-size:2rem;line-height:1;color:var(--petrol);
  margin-bottom:.1rem;
}
.etappe-titel{
  font-family:var(--stimme);font-style:italic;font-weight:400;
  font-size:1.45rem;line-height:1.2;color:var(--tinte);
  margin:0 0 .85rem;
}
/* die Rosé-Achse laeuft ueber den ganzen Plan und verbindet die Etappen */
.arbeit-blatt::after{
  content:"";position:absolute;
  left:clamp(1.8rem,4vw,3.4rem);right:clamp(1.8rem,4vw,3.4rem);
  top:calc(clamp(1.9rem,4vh,2.6rem) + 5.15rem);
  height:2px;border-radius:2px;background:#E7BFB6;opacity:.7;
  pointer-events:none;
}
/* Mobil und ohne Animation: ruhig untereinander */
/* Mobil und ohne Animation: der Plan liegt gefaltet untereinander */
@media(max-width:1099.5px){
  .arbeit-innen{min-height:0;display:block}
  .arbeit-track{display:block;padding-inline:0}
  .arbeit-buehne .label{margin-left:calc(var(--rand) + 1.4rem);padding-inline:0;width:max-content}
  .arbeit-blatt{
    display:block;width:min(47.5rem,100% - var(--rand)*2);margin:0 auto;
    padding-block:clamp(2.2rem,5vh,3rem);
  }
  .etappe-sp{width:auto;padding-inline:clamp(1.5rem,5vw,4.2rem);padding-block:clamp(1.4rem,3.5vh,2rem)}
  .etappe-sp + .etappe-sp{
    border-left:0;border-top:1px solid rgba(56,44,32,.09);
    box-shadow:inset 0 7px 14px -12px rgba(56,44,32,.55);
  }
  .arbeit-blatt::after{display:none}
  .etappe{font-size:2.2rem;margin-bottom:.6rem}
}
html:not(.anim) .arbeit-innen{min-height:0;display:block}
html:not(.anim) .arbeit-track{display:block;padding-inline:0}
html:not(.anim) .arbeit-buehne .label{margin-left:calc(var(--rand) + 1.4rem);padding-inline:0;width:max-content}
html:not(.anim) .arbeit-blatt{display:block;width:min(47.5rem,100% - var(--rand)*2);margin:0 auto}
html:not(.anim) .etappe-sp{width:auto}
html:not(.anim) .arbeit-blatt::after{display:none}

/* ── Marginalie (Ehrlich, bevor wir sprechen): die Randnotiz ── */
.marginalie{
  position:relative;width:min(46rem,100% - var(--rand)*2);
  padding-block:clamp(5rem,12vh,9rem);
  padding-left:clamp(2rem,5vw,3.6rem);
}
/* Der fruehere ::before-Anstrich ist jetzt eine echte Faden-Geste (.g-randnotiz im HTML) */
.marginalie .label{letter-spacing:.2em}
.marginalie .jan p{color:#4A443C} /* eine Spur waermer und fester: die ehrlichste Stelle traegt ruhig */
.marginalie .jan p:first-of-type{font-size:21px}
.marginalie.paar{border-top:0}

/* ── Der leere Brief (Finale) ───────────────────────────────── */
.bogen.leer{
  text-align:center;
  padding-block:clamp(4.5rem,10vh,7.5rem);
  box-shadow:none;
}
.bogen.leer .sie{margin-inline:auto}
.bogen.leer .jan{margin-inline:auto;text-align:left;max-width:32rem}
.bogen.leer .ablauf li{border-top:1px solid rgba(74,56,36,.12)}
.bogen.leer .ablauf li::before{
  font-family:var(--stimme);font-style:italic;font-weight:400;
  font-size:2rem;color:var(--petrol);padding-top:0;line-height:1;
}
.bogen.leer .btn{font-size:18px;padding:21px 34px}
.bogen.leer .mikro a{color:var(--petrol)}

/* ── Petrol = alles Klickbare, Rosé nur Marker ──────────────── */
a{color:var(--petrol)}
.jan a:not(.btn),.check a:not(.btn),.fuss a{color:var(--petrol)}
.nav a{color:var(--tinte)}
.nav a:hover{border-color:var(--petrol)}
a.btn{color:var(--papier);text-decoration:none}
a.btn,.btn{
  background:var(--petrol);
  box-shadow:0 1px 1px rgba(30,61,58,.12),0 3px 6px rgba(30,61,58,.12),0 10px 24px -6px rgba(30,61,58,.35);
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),background 220ms var(--ease-ui);
}
.btn:hover{background:var(--petrol-tief);transform:translateY(-2px);
  box-shadow:0 1px 1px rgba(30,61,58,.12),0 6px 12px rgba(30,61,58,.16),0 18px 40px -8px rgba(30,61,58,.45)}
.btn:active{transform:translateY(0) scale(.985)}
a:focus-visible,button:focus-visible{outline-color:var(--petrol)}

/* ── Getriggerte Inhalts-Auftritte: Initialzustaende nur mit .anim ── */
html.anim .t-zeile{opacity:0;transform:translateY(8px);filter:blur(4px)}
html.anim .t-block{opacity:0;transform:translateY(18px)}
html.anim .t-still{opacity:0;transform:translateY(6px)}
html.anim .da.t-zeile,html.anim .da.t-block,html.anim .da.t-still{opacity:1;transform:none;filter:none}
.t-zeile{transition:opacity .5s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1),filter .5s cubic-bezier(.19,1,.22,1)}
.t-block{transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.t-still{transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .4s cubic-bezier(.22,.61,.36,1)}
/* Prints/Notizen behalten ihre Blatt-Rotation beim Auftritt */
html.anim .print.t-still,html.anim .notiz.t-still,html.anim .foto-print.t-still{transform:translateY(10px) rotate(var(--rot,0deg))}
html.anim .print.t-still.da,html.anim .notiz.t-still.da,html.anim .foto-print.t-still.da{transform:rotate(var(--rot,0deg))}

/* ── Stimmen: Foto-Prints und Rezensions-Notizen auf dem Tisch ── */
.prints{display:grid;gap:clamp(1.4rem,3vw,2.4rem);margin-top:var(--s7)}
@media(min-width:700px){.prints{grid-template-columns:repeat(2,minmax(0,1fr))}}
.print{
  margin:0;background:linear-gradient(180deg,#FFFFFF,#FDFBF6);
  border:1px solid rgba(56,44,32,.06);border-radius:2px;
  padding:10px 10px 0;
  transform:rotate(var(--rot,0deg));
  box-shadow:var(--schatten-b);
}
.print-frame{
  aspect-ratio:4/5;background:#F2EEE7;border:1px solid rgba(56,44,32,.05);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.print-frame video{width:100%;height:100%;object-fit:cover;display:block}
.print-hinweis{
  padding:1rem 1.4rem;text-align:center;font-size:14px;color:var(--sekundaer);
}
.print figcaption{
  padding:12px 6px 14px;font-size:14px;color:var(--sekundaer);
  display:flex;align-items:center;gap:.55rem;
}
/* Andis Handy-Video: Ausschnitt tiefer, weniger Decke, mehr von ihm */
.print-frame video{object-position:50% 72%}
/* Sprachnachricht: die Tonspur liegt als Rosé-Linie auf dem Papier */
.audio-frame{
  flex-direction:column;justify-content:center;gap:1.4rem;
  padding:1.4rem 1.2rem;background:linear-gradient(180deg,#FFFFFF,#FCFAF5);
}
.audio-frame .tonspur{width:100%;height:5.5rem;flex:none}
.audio-frame .tonspur path{
  fill:none;stroke:#E7BFB6;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;mix-blend-mode:multiply;
}
.audio-frame audio{width:100%;display:block}
.notizen{display:grid;gap:clamp(1.2rem,2.6vw,2rem);margin-top:clamp(1.6rem,3.5vh,2.6rem)}
@media(min-width:700px){.notizen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.notiz{
  background:
    repeating-linear-gradient(180deg, transparent 0 1.75rem, rgba(56,44,32,.045) 1.75rem calc(1.75rem + 1px)),
    linear-gradient(180deg,#FFFFFF,#FCFAF5);
  border:1px solid rgba(56,44,32,.06);border-radius:2px;
  box-shadow:var(--schatten-a);
  padding:1.3rem 1.4rem 1.1rem;
  transform:rotate(var(--rot,0deg));
}
.sterne{display:flex;gap:.25rem;margin-bottom:.7rem}
.sterne svg{width:15px;height:14px;fill:#C99A63}
.notiz-text{font-size:17px;line-height:1.55;margin:0 0 1rem}
.notiz footer{display:flex;align-items:center;gap:.6rem;font-size:14px;color:var(--sekundaer)}
.avatar{
  width:2rem;height:2rem;border-radius:50%;overflow:hidden;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:#F1ECE4;border:1px solid rgba(56,44,32,.10);
  font-family:var(--stimme);font-style:italic;font-size:1rem;color:var(--tinte);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.notiz-name{color:var(--tinte);font-weight:700}
.notiz-quelle::before{content:"· ";color:var(--sekundaer)}
/* Muster-Kennzeichnung: dezent erkennbar, faellt beim Ersetzen automatisch weg */
[data-muster] .print-hinweis::before{content:"";display:block}
[data-muster]{outline:1px dashed rgba(40,80,76,.28);outline-offset:4px}

/* ── Foto-Prints und Trust-Notiz: Material liegt auf den Briefen ── */
.foto-print{
  position:absolute;right:-7.5rem;top:7rem;width:15.5rem;margin:0;
  background:linear-gradient(180deg,#FFFFFF,#FDFBF6);
  border:1px solid rgba(56,44,32,.06);border-radius:2px;
  padding:9px 9px 0;box-shadow:var(--schatten-b);
  transform:rotate(var(--rot,0deg));z-index:2;
}
.foto-print img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.foto-print figcaption{padding:10px 4px 12px;font-size:13.5px;color:var(--sekundaer);line-height:1.45}
.foto-print .print-platz{
  aspect-ratio:4/5;background:#F2EEE7;border:1px solid rgba(56,44,32,.05);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:13px;color:var(--sekundaer);padding:1rem;
}
.jan-print{right:auto;left:-11.5rem;top:9rem;width:13.5rem}
/* Vorher-Nachher: zwei Momente in einem Rahmen.
   Vorher leicht entfaerbt (aelterer Moment), Nachher naeher ran
   und hoeher gesetzt (weniger Waschbecken). */
.vn-print{width:17rem}
.vn-frame{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#F2EEE7;overflow:hidden}
.vn-frame img{display:block;width:100%;height:100%;aspect-ratio:2/3;object-fit:cover}
.vn-frame img:first-child{filter:grayscale(.14) saturate(.92) contrast(.99)}
.vn-frame img:last-child{object-position:50% 22%;transform:scale(1.14);transform-origin:50% 30%}
.trust-notiz{position:absolute;right:-8.5rem;bottom:-4.5rem;width:19.5rem;z-index:2;transform:rotate(var(--rot,0deg))}
.trust-notiz footer{white-space:nowrap}
@media(max-width:1099.5px){
  .foto-print,.trust-notiz{position:static;margin:1.8rem auto 0;width:min(17rem,86%);display:block}
  .jan-print{margin:1.2rem 0 1.6rem}
}

.fuss{border-top:0;background:#F0EAE0;box-shadow:inset 0 18px 24px -20px rgba(74,56,36,.14)}

@media(prefers-reduced-motion:reduce){
  #licht .b2{opacity:0}
  #lampe{opacity:0!important}
  .faden path{stroke-dashoffset:0!important}
  html.anim .t-zeile,html.anim .t-block,html.anim .t-still{opacity:1;transform:none;filter:none;transition:none}
}
@media(max-width:640px){
  .bogen{padding-inline:clamp(1.2rem,5vw,2rem)}
  .bogen + .bogen,.bogen.brief{margin-top:-1.6rem}
}