/* Alles unter dem Hero — die Werkstatt auf dunklem Stoff.
   Der Hero ist helles Leinen unter Bühnenlicht. Darunter geht das
   Leinen in einem weichen Verlauf in denselben Stoff in Braun über —
   gleiche Bindung, gleiches Korn, nur die Farbe wechselt. Darauf, wie auf dem Zuschneidetisch: Etiketten am Faden,
   das Maßband, das Musterbuch, die Kasse, der Bon.
   Diese Datei: Stoff, Übergang, Sektions-Grundlagen, Marke, Fuß, Faden.
   Die Sektionen selbst: leistungen.css, dauer.css, beratung.css,
   werkstatt.css (Über uns + Kontakt), leisten.css (feste Leisten). */

/* ---------- Der Stoff ----------
   Heller Kaffeeton, der nach unten NICHT nachdunkelt: oben, Mitte und Fuß
   liegen dicht beieinander, die Tiefe macht das Licht von oben.
   Der alte Verlauf ins Schwarze liegt noch unter ?stoff=nacht. */
:root {
  --seide: #4f3d30;
  --seide-hell: #594534;
  --seide-tief: #534032;
}

:root[data-stoff="nacht"] {
  --seide: #2a1f19;
  --seide-hell: #3b2c23;
  --seide-tief: #1b1310;
}

body {
  background: var(--seide);
}

main,
.fuss {
  position: relative;
  color: var(--hell);
}

main {
  /* 1:1 dieselben Lagen wie das Leinen im Hero (main::before) — gleiches
     Korn, gleicher 8-px-Rapport, gleiche Werte. Der einzige Unterschied
     ist der Grund darunter: braun statt Leinen.
     Dazu eine Lage mehr: langgezogenes Rauschen, das die einzelnen
     Fasern zeigt — als ginge man mit der Kamera näher ran. Bewusst
     schwach, es soll auffallen wenn man hinsieht, nicht vorher. */
  background-color: var(--seide);
  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.16'/%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.28'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(88, 74, 54, 0.05) 0px, rgba(255, 253, 247, 0.22) 4px, rgba(88, 74, 54, 0.05) 8px),
    repeating-linear-gradient(0deg, rgba(88, 74, 54, 0.045) 0px, rgba(255, 253, 247, 0.18) 4px, rgba(88, 74, 54, 0.045) 8px);
  background-blend-mode: soft-light, multiply, multiply, multiply;
}

/* Der Verlauf: dasselbe Leinen wie am Hero-Fuß liegt oben auf dem
   dunklen Stoff und wird über 380 px weich durchsichtig. Stoff blendet
   in Stoff — kein Plateau, keine Kante. Der Faden läuft hier durch,
   die Zone hat einen Zweck.
   Die Maske ist eine S-Kurve (Smoothstep) mit vielen Stützpunkten:
   Wenige Stützpunkte = Knicke in der Steigung, und jeden Knick liest
   das Auge als Querlinie (Mach-Band). An beiden Enden ist die Steigung
   null, damit weder oben noch unten eine Kante entsteht. */
main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 380px;
  z-index: 0;
  background-color: var(--cloth, #efebe2);
  background-image: 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.28'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(88, 74, 54, 0.05) 0px, rgba(255, 253, 247, 0.22) 4px, rgba(88, 74, 54, 0.05) 8px),
    repeating-linear-gradient(0deg, rgba(88, 74, 54, 0.045) 0px, rgba(255, 253, 247, 0.18) 4px, rgba(88, 74, 54, 0.045) 8px);
  background-blend-mode: multiply, multiply, multiply;
  --uebergang: linear-gradient(180deg,
    #000 0%,
    rgba(0, 0, 0, 0.993) 5%,
    rgba(0, 0, 0, 0.972) 10%,
    rgba(0, 0, 0, 0.939) 15%,
    rgba(0, 0, 0, 0.896) 20%,
    rgba(0, 0, 0, 0.844) 25%,
    rgba(0, 0, 0, 0.784) 30%,
    rgba(0, 0, 0, 0.718) 35%,
    rgba(0, 0, 0, 0.648) 40%,
    rgba(0, 0, 0, 0.575) 45%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.425) 55%,
    rgba(0, 0, 0, 0.352) 60%,
    rgba(0, 0, 0, 0.282) 65%,
    rgba(0, 0, 0, 0.216) 70%,
    rgba(0, 0, 0, 0.156) 75%,
    rgba(0, 0, 0, 0.104) 80%,
    rgba(0, 0, 0, 0.061) 85%,
    rgba(0, 0, 0, 0.028) 90%,
    rgba(0, 0, 0, 0.007) 95%,
    transparent 100%);
  -webkit-mask-image: var(--uebergang);
  mask-image: var(--uebergang);
  pointer-events: none;
}
main > * {
  position: relative;
  z-index: 1;
}

/* Die Lampe über dem Tisch: ein weiches, warmes Licht, das im oberen
   Drittel des Bildschirms steht und bleibt, während der Stoff darunter
   durchzieht. Der Untergrund ist damit nie gleichmäßig — Rhythmus ohne
   Farbe. Fest im Bild (fixed), unter dem Inhalt (z-index 0 gegen 1),
   erscheint erst, wenn der Hero aus dem Bild ist (body.hero-weg). */
main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 46% at 50% 26%,
      rgba(255, 226, 190, 0.075) 0%,
      rgba(255, 226, 190, 0.045) 35%,
      rgba(255, 226, 190, 0.015) 65%,
      transparent 100%);
  opacity: 0;
  transition: opacity 900ms ease-out;
}
body.hero-weg main::after { opacity: 1; }

/* ---------- Der Faden (faden.js) ---------- */
/* Liegt über Hero-Fuß und Verlauf, unter dem Inhalt. Die Hülle
   schneidet ab, was seitlich über den Rand hängt. */
.faden-huelle {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}
.faden {
  display: block;
  overflow: visible;
}
.faden path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faden__kern {
  stroke: url(#faden-kern);
  stroke-width: 2.6;
}
.faden__glanz {
  stroke: url(#faden-glanz);
  stroke-width: 0.9;
}
.faden__schatten {
  stroke: rgba(0, 0, 0, 0.36);
  stroke-width: 3.6;
  transform: translate(2px, 3px);
}

/* ---------- Sektionen ---------- */
.sektion {
  padding-block: var(--raum-7) var(--raum-6);
}
/* Erste Sektion sitzt tiefer: ihr Kopf beginnt noch im Verlauf */
.sektion.leistungen {
  padding-top: 380px;
}
/* Sprungmarken (Kopfzeile, Fuß, Anker): jeder Sprung landet so, dass die
   Sektionsmarke gleich weit unter der festen Kopfzeile steht — Maßstab
   ist „Dauer" (144 px Innenabstand). Wer mehr Innenabstand hat, wird
   per negativem Scroll-Rand angeglichen; Kontakt (0 px) kriegt ihn dazu. */
.sektion.leistungen { scroll-margin-top: -236px; }   /* 380 → 144 */
@media (min-width: 840px) {
  .sektion.kontakt  { scroll-margin-top: 144px; }    /*   0 → 144 (nur dort ist der Innenabstand 0) */
}
.sektion h2 {
  font-size: var(--t-h2);
  line-height: 1.08;
  color: var(--hell);
}
.sektion__kopf {
  display: grid;
  gap: var(--raum-2);
  max-width: 720px;
  margin-bottom: var(--raum-5);
}
.sektion__lead {
  font-size: var(--t-lead);
  color: var(--hell);
  opacity: 0.9;
  max-width: 52ch;
}
.absatz {
  max-width: 58ch;
  font-size: var(--t-body);
  color: var(--hell);
  opacity: 0.9;
}
.absatz + .absatz {
  margin-top: var(--raum-3);
}

/* Die Sektionsmarke: ein kleines Webetikett, wie am Kragen —
   Leinen, Steppnaht am Rand, Versalien. Viermal identisch: der
   Rhythmusgeber der Seite. */
.marke {
  justify-self: start;
  display: inline-block;
  padding: 6px 12px;
  background: var(--leinen-tief);
  outline: 1.5px dashed rgba(74, 44, 24, 0.42);
  outline-offset: -5px;
  font-family: var(--schrift-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.6);
}

@media (max-width: 760px) {
  .sektion {
    padding-block: 80px 56px;
  }
  .sektion.leistungen {
    padding-top: 300px;
    scroll-margin-top: -220px;   /* 300 → 80, wie die anderen auf dem Handy */
  }
  .sektion__kopf {
    margin-bottom: var(--raum-4);
  }
}

/* ---------- Fuß ---------- */
.fuss {
  padding-block: var(--raum-5) calc(var(--raum-4) + 64px); /* Platz für die Leiste unten */
  background: color-mix(in srgb, var(--seide-tief) 94%, #000);  /* eine Spur abgesetzt, damit der Fuß als eigenes Band liest */
  border-top: 1px solid var(--linie-hell);
  font-size: var(--t-klein);
  color: var(--hell-leise);
}
.fuss__raster {
  display: grid;
  gap: var(--raum-4);
  align-items: end;
}
@media (min-width: 840px) {
  .fuss {
    padding-bottom: var(--raum-4);
  }
  .fuss__raster {
    grid-template-columns: auto 1fr auto;
    gap: var(--raum-5);
  }
}
.fuss__naht {
  height: 40px;             /* eng zugeschnitten (schriftzug.js), daher kleiner als vorher */
  width: auto;
  overflow: visible;
  color: var(--faden-hell);
}
.fuss__adresse,
.fuss__recht {
  line-height: 1.6;
}
.fuss__adresse a {
  color: var(--hell);
}
.fuss a:hover {
  color: var(--hell);
  text-decoration: underline;
}

/* Der Wäschestempel: Claims Zeichen, wie mit dem Gummistempel auf den
   Stoff gedrückt — klein, leicht schief, absichtlich ungleichmäßig im
   Druck (Turbulence-Maske, dieselbe Technik wie der Thermodruck des
   Bons). Ein Abdruck, kein Logo-Badge. Ohne Link, bis Claim eine
   eigene Domain hat. */
.fuss__stempel {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 11px 4px;
  border: 1.6px solid currentColor;
  border-radius: 4px;
  transform: rotate(-2.5deg);
  font-family: var(--schrift-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hell-leise);
  opacity: 0.5;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0.55'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23d)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0.55'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23d)'/%3E%3C/svg%3E");
  -webkit-mask-size: 220px 220px;
  mask-size: 220px 220px;
}
.fuss__stempel b { font-weight: 700; }

/* ---------- Fokus auf dunklem Stoff ---------- */
main :focus-visible,
.fuss :focus-visible,
.leiste-unten:focus-visible {
  outline-color: var(--faden-hell);
}

/* ---------- Weniger Bewegung: alle Eingänge sofort da ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-eingang] *,
  [data-eingang] {
    animation: none !important;
    transition: none !important;
  }
}