/* ============================================================
   Der Tisch — Vergleichsfassung „lebendig“ (14.09., ?stoff=lebendig)
   Abras Frage: kriegen wir den Grund unter dem Hero lebendiger hin?
   Vier Zutaten, alle leise, alle per Schalter :root[data-stoff=lebendig]:
     1. Faltenwurf: der dunkle Stoff liegt nicht glatt, sondern in
        breiten, weichen Bahnen — dieselbe Diagonale wie im Hero-Foto.
     2. Licht unter dem Saum: links warm (Leinen), rechts kühl
        (Cleanfix) — die Zweiteilung des Heros läuft in die Seite aus.
     3. Die Werkstattlampe: der Lichtkegel über dem Tisch wird
        spürbar, die Ränder sacken ab (Vignette).
     4. Kreide: in den leeren Ecken die Markierungen des Schneiders —
        Saumlinie, Abnäher, Passzeichen —, die sich beim Scrollen
        zeichnen. Weiß, matt, leicht körnig.
   Ohne den Schalter passiert hier nichts.
   ============================================================ */

@font-face {
  font-family: "Ephesis";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ephesis-400-latin.woff2") format("woff2");
}

/* ── 1 + 2: Faltenwurf und Licht unter dem Saum ── */
:root[data-stoff="lebendig"] main::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Reihenfolge = von oben nach unten gestapelt */
  background-image:
    radial-gradient(56% 34% at 16% 3%, rgba(255, 228, 196, 0.085) 0%, rgba(255, 228, 196, 0.03) 45%, transparent 72%),
    radial-gradient(48% 30% at 86% 2%, rgba(150, 196, 220, 0.10) 0%, rgba(150, 196, 220, 0.035) 45%, transparent 72%),
    radial-gradient(70% 22% at 30% 38%, rgba(255, 236, 210, 0.035), transparent 70%),
    radial-gradient(60% 20% at 76% 64%, rgba(255, 236, 210, 0.03), transparent 70%),
    repeating-linear-gradient(107deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0.11) 210px,
      rgba(0, 0, 0, 0.04) 330px,
      rgba(255, 236, 210, 0.045) 470px,
      rgba(0, 0, 0, 0) 680px),
    repeating-linear-gradient(97deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0.06) 380px,
      rgba(255, 236, 210, 0.025) 620px,
      rgba(0, 0, 0, 0) 910px);
  background-size: 100% 1400px, 100% 1400px, 100% 100%, 100% 100%, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
}

/* ── 3: Die Lampe — deutlicher Kegel, Ränder sacken ab ── */
:root[data-stoff="lebendig"] main::after {
  background:
    radial-gradient(64% 44% at 50% 22%,
      rgba(255, 226, 190, 0.15) 0%,
      rgba(255, 226, 190, 0.085) 32%,
      rgba(255, 226, 190, 0.03) 62%,
      transparent 100%),
    radial-gradient(125% 95% at 50% 45%,
      transparent 52%,
      rgba(0, 0, 0, 0.14) 78%,
      rgba(0, 0, 0, 0.3) 100%);
}

/* ── 4: Kreide ── */
.kreide { display: none; }
:root[data-stoff="lebendig"] .kreide {
  display: block;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  /* Rechts an der Bühnenkante ausgerichtet */
  right: max(var(--rand), calc((100% - var(--breite)) / 2));
}
.kreide--saum   { top: 118px; width: min(420px, 32vw); }

.kreide path {
  fill: none;
  stroke: rgba(255, 248, 236, 0.3);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
/* Zweiter, feinerer Strich leicht versetzt: Kreide deckt nie gleichmäßig */
.kreide .kreide__spur {
  stroke: rgba(255, 252, 244, 0.17);
  stroke-width: 1.1;
  transform: translate(1.5px, -1.2px);
}
.kreide text {
  font-family: "Ephesis", cursive;
  font-size: 34px;
  fill: rgba(255, 248, 236, 0.4);
  letter-spacing: 0.02em;
  transition: opacity 0.9s ease-out;
}
/* Eingang: Linie für Linie gezogen, dann die Notiz */
.kreide.wartet path { stroke-dashoffset: 1; }
.kreide.wartet text { opacity: 0; }
.kreide.ist-da path {
  animation: kreide-zieht 1.1s cubic-bezier(0.5, 0, 0.25, 1) both;
  animation-delay: calc(var(--i, 0) * 0.32s);
}
.kreide.ist-da text { opacity: 1; transition-delay: 1.4s; }
@keyframes kreide-zieht {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@media (max-width: 1100px) {
  .kreide--saum { display: none !important; }
}
@media (max-width: 760px) {
  :root[data-stoff="lebendig"] .kreide { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kreide path { animation: none !important; stroke-dashoffset: 0 !important; }
  .kreide text { opacity: 1 !important; }
}


/* ============================================================
   Der helle Tisch — Vergleichsfassung „hell“ (14.09., ?stoff=hell)
   Abras Gefühl: dem Schneider hat das Braun nicht gefallen, und der
   helle Hero passt besser zu einem hellen Tisch. Also: der Tisch ist
   ungebleichtes Leinen bei Tageslicht. Der Hero-Stoff liegt darauf,
   die Nähte der Seite laufen in dunklem Kastanien-Garn wie in der
   Stickerei, und Kork, Mahagoni und Messing sind die dunklen Anker.
   Technik: dieselben Tokens, nur umgehängt — alles, was auf dem
   dunklen Stoff „hell“ war, ist hier „Tinte“. Die Kopfzeile, die
   Anruf-Leiste und der Hero bleiben, wie sie sind (außerhalb von main).
   ============================================================ */
:root[data-stoff="hell"] body { background: #ece3d3; }
:root[data-stoff="hell"] main,
:root[data-stoff="hell"] .fuss {
  --seide: #ece3d3;
  --seide-hell: #f2eadc;
  --seide-tief: #e0d4c1;
  --hell: #2b1d15;
  --hell-leise: #6f5b4f;
  --hell-fein: #9a877a;
  --faden-hell: #5c3a20;
  --linie-hell: rgba(43, 29, 21, 0.14);
}
/* Leinen statt Wolle: dieselben Lagen, aber der Grund ist hell — die
   Bindung darf feiner sein, das Korn leiser. */
:root[data-stoff="hell"] main {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.12'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23a)' opacity='0.16'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(88, 74, 54, 0.045) 0px, rgba(255, 253, 247, 0.25) 4px, rgba(88, 74, 54, 0.045) 8px),
    repeating-linear-gradient(0deg, rgba(88, 74, 54, 0.04) 0px, rgba(255, 253, 247, 0.2) 4px, rgba(88, 74, 54, 0.04) 8px);
  background-blend-mode: soft-light, multiply, multiply, multiply;
}
/* Leichte Falten im Leinen und Licht unter dem Saum — leiser als auf
   dem dunklen Stoff, Licht auf Hell trägt weniger */
:root[data-stoff="hell"] main::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(48% 30% at 86% 2%, rgba(120, 170, 200, 0.16) 0%, rgba(120, 170, 200, 0.05) 45%, transparent 72%),
    radial-gradient(56% 34% at 16% 3%, rgba(255, 245, 225, 0.5) 0%, rgba(255, 245, 225, 0.18) 45%, transparent 72%),
    repeating-linear-gradient(107deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(70, 50, 30, 0.05) 210px,
      rgba(70, 50, 30, 0.02) 330px,
      rgba(255, 252, 245, 0.28) 470px,
      rgba(0, 0, 0, 0) 680px),
    repeating-linear-gradient(97deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(70, 50, 30, 0.03) 380px,
      rgba(255, 252, 245, 0.16) 620px,
      rgba(0, 0, 0, 0) 910px);
  background-size: 100% 1400px, 100% 1400px, auto, auto;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
/* Tageslicht statt Lampe: kein Lichtkegel, nur ein Hauch Vignette,
   damit der Tisch eine Mitte hat */
:root[data-stoff="hell"] main::after {
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(70, 50, 30, 0.07) 80%, rgba(70, 50, 30, 0.14) 100%);
}
/* Der Saum-Schatten auf hellem Grund: etwas leichter, sonst wird es ein Balken */
:root[data-stoff="hell"] .saum__schatten-nah  { opacity: 0.72; }
:root[data-stoff="hell"] .saum__schatten-weit { opacity: 0.7; }
/* Die Leine hängt außerhalb von main: dunkler Zwirn auf hellem Leinen */
:root[data-stoff="hell"] .leine__kern { stroke: #7a5c3c; }
:root[data-stoff="hell"] .leine__drall { stroke: rgba(255, 250, 240, 0.55); }
:root[data-stoff="hell"] .leine__schatten { stroke: rgba(40, 24, 10, 0.28); }
/* Das Webetikett der Sektionen: auf dem hellen Leinen als etwas
   helleres, aufgenähtes Stück Stoff mit Schatten */
:root[data-stoff="hell"] .marke {
  background: #f8f3ea;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 10px -6px rgba(43, 29, 21, 0.45);
}
/* Fuß: ein Band eine Spur dunkler, die Naht oben in Garn */
:root[data-stoff="hell"] .fuss {
  background: #e3d8c6;
  border-top-color: rgba(43, 29, 21, 0.14);
}
/* Kreide: auf hellem Leinen nicht (weiß auf hell sieht man nicht) */
:root[data-stoff="hell"] .kreide { display: none; }
/* Die Kasse: ihre Mahagoni-Lasur war für den dunklen Grund gerechnet —
   auf Leinen wurde daraus Rosa. Auf Hell muss die Beize decken. */
:root[data-stoff="hell"] .kasse__holz { fill: rgba(123, 47, 31, 0.58); }
:root[data-stoff="hell"] .kasse__holz--tief { fill: rgba(105, 38, 24, 0.78); }
:root[data-stoff="hell"] .kasse.klingelt .kasse__lade-front,
:root[data-stoff="hell"] .kasse.hat-geklingelt .kasse__lade-front { fill: rgba(150, 70, 50, 0.85); }