/* ═══════════════════════════════════════════════════════════
   SPIEGELWERK — arkusz główny (wersja 0.2)
   Kierunek A · Tiefe & Reflexion.
   Wszystko poniżej wynika z design.md — sekcje podane w komentarzach.
   Styl ruchu: 2 · Płynny-premium (limity: design.md §7)
   ═══════════════════════════════════════════════════════════ */

/* ─── fonty lokalne, zero CDN (design.md §4, §14) ─────────── */
@font-face{
  font-family:"Syne";
  src:url("../assets/fonts/syne-var-latin.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"Syne";
  src:url("../assets/fonts/syne-var-latin-ext.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("../assets/fonts/instrumentsans-var-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("../assets/fonts/instrumentsans-var-latin-ext.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;
}

/* ─── tokeny (design.md §3, §4, §5, §7) ───────────────────── */
:root{
  /* przestrzeń */
  --raum-900:oklch(12% 0.010 58);
  --raum-800:oklch(16% 0.012 62);
  --raum-700:oklch(20% 0.014 62);
  --glas:oklch(24% 0.016 62);
  --glas-durch:oklch(24% 0.016 62 / .68);
  --glas-rand:oklch(38% 0.018 66);
  --haar:oklch(30% 0.012 62);

  /* tekst */
  --text:oklch(94% 0.008 78);
  --text-2:oklch(76% 0.012 70);
  --text-3:oklch(62% 0.012 68);

  /* akcent nasycony — jedyny */
  --licht:oklch(78% 0.155 68);
  --licht-tief:oklch(62% 0.140 62);

  /* akcent metaliczny — tylko krawędzie i refleksy, maks. ~2 % powierzchni */
  --chrom-1:oklch(96% 0.020 92);
  --chrom-2:oklch(62% 0.015 70);
  --chrom-3:oklch(88% 0.030 84);

  /* jasna przeciwwaga */
  --papier:oklch(96% 0.012 84);
  --papier-2:oklch(92% 0.014 82);
  --papier-text:oklch(20% 0.020 60);
  --papier-text-2:oklch(38% 0.020 62);
  --papier-haar:oklch(84% 0.016 80);

  /* typografia */
  --ff-display:"Syne",Georgia,serif;
  --ff-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-display:clamp(27px,4.9vw,70px);
  --t-h2:clamp(28px,3.6vw,54px);
  --t-h3:clamp(19px,1.6vw,26px);
  --t-lead:clamp(18px,1.5vw,21px);
  --t-body:17px;
  --t-small:14px;
  --t-label:12px;

  /* cienie i krawędzie (§5) */
  --schatten-nah:0 2px 8px -2px oklch(8% 0.01 60 / .5);
  --schatten-fern:0 30px 60px -20px oklch(8% 0.01 60 / .7);
  --kante-innen:inset 0 1px 0 oklch(95% 0.02 90 / .30);

  /* ruch (§7) */
  --ease:cubic-bezier(.22,1,.36,1);
  --fast:.22s; --mid:.55s; --slow:1.2s;

  /* układ */
  --rand:clamp(20px,5vw,88px);
  --max:1440px;
  --luft:clamp(88px,12vh,160px);
  --r-klein:4px; --r-tafel:10px; --r-rund:999px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  min-height:100vh;
  background:var(--raum-800);
  color:var(--text);
  font:400 var(--t-body)/1.6 var(--ff-body);
  font-synthesis-weight:none;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;}

:focus-visible{outline:2px solid var(--licht);outline-offset:3px;border-radius:2px;}

.hgroup{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand);}

/* ─── pomijanie nawigacji ─────────────────────────────────── */
.skip{
  position:absolute;top:0;left:0;z-index:99;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--licht);color:var(--raum-900);
  padding:.8rem 1.2rem;font-weight:600;text-decoration:none;border-radius:0 0 var(--r-klein) 0;
}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;}

/* ═══ PASEK GÓRNY (§8) ════════════════════════════════════ */
.kopf{
  position:sticky;top:0;z-index:50;
  transition:background var(--mid) var(--ease), border-color var(--mid) var(--ease);
  border-bottom:1px solid transparent;
}
/* Po przewinięciu pasek robi się nieprzezroczysty — BEZ rozmycia tła.
   Rozmyte szkło pod paskiem gryzło się z taflą (§6): jeśli wszystko jest
   szkłem, nic nim nie jest. Pasek ma być deską, tafla szkłem. */
.kopf--gescrollt{
  background:var(--raum-700);
  border-bottom-color:var(--haar);
}
/* Ściszenie: poniżej pierwszego ekranu pasek oddaje pole treści.
   Nawigacja i telefon gasną, marka i jedno CTA zostają czytelne. */
.kopf--leise .nav a:not([aria-current="page"]),
.kopf--leise .telefon{color:var(--text-3);}
.kopf--leise .wortmarke{color:var(--text-2);}
.kopf--leise .nav a:hover,
.kopf--leise .telefon:hover,
.kopf--leise:hover .wortmarke{color:var(--text);}
.kopf__innen{
  max-width:var(--max);margin-inline:auto;
  padding:clamp(14px,2vw,20px) var(--rand);
  display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);
}
.wortmarke{
  font-family:var(--ff-display);font-weight:800;
  font-size:clamp(16px,1.4vw,20px);letter-spacing:.14em;
  color:var(--text);text-decoration:none;white-space:nowrap;
  transition:color var(--fast) var(--ease);
}
.wortmarke:hover{color:var(--licht);}

.nav{display:flex;gap:clamp(14px,1.8vw,30px);margin-inline-start:auto;}
.nav a{
  font-size:var(--t-small);color:var(--text-2);text-decoration:none;
  position:relative;padding:.3rem 0;
  transition:color var(--fast) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--licht);transform:scaleX(0);transform-origin:left;
  transition:transform var(--mid) var(--ease);
}
.nav a:hover{color:var(--text);}
.nav a:hover::after{transform:scaleX(1);}

.kopf__aktionen{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);}

.telefon{
  font-size:var(--t-small);color:var(--text-2);text-decoration:none;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:color var(--fast) var(--ease);
}
.telefon:hover{color:var(--licht);}

/* przełącznik języka (§8) */
.sprache{display:flex;align-items:center;gap:.5rem;}
.sprache__teiler{width:1px;height:12px;background:var(--haar);}
.sprache__btn{
  appearance:none;background:none;border:none;cursor:pointer;padding:.3rem .1rem;
  font:600 var(--t-label)/1 var(--ff-body);letter-spacing:.18em;color:var(--text-3);
  transition:color var(--fast) var(--ease);
}
.sprache__btn:hover{color:var(--text);}
.sprache__btn[aria-pressed="true"]{color:var(--licht);}

/* ─── przyciski (§11.2: jeden mocny CTA w widoku) ─────────── */
.knopf{
  display:inline-flex;align-items:center;gap:.6rem;
  font:600 var(--t-small)/1 var(--ff-body);letter-spacing:.02em;
  padding:.95rem 1.4rem;border-radius:var(--r-rund);border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
             background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.knopf--licht{background:var(--licht);color:oklch(18% 0.03 60);}
.knopf--licht:hover{box-shadow:0 0 0 4px oklch(78% 0.155 68 / .18);transform:translateY(-1px);}
/* Gdy warstwa ruchu żyje, przesunięciem steruje GSAP — CSS oddaje transform,
   żeby dwa źródła nie nadpisywały się nawzajem. Poświata zostaje. */
.bewegung .knopf--magnet{will-change:transform;}
.bewegung .knopf--magnet:hover{transform:none;}
.knopf--rand{background:none;color:var(--text);border-color:var(--haar);}
.knopf--rand:hover{border-color:var(--glas-rand);background:oklch(24% 0.016 62 / .5);}
/* obrys na jasnym tle — sekcja Termin (--papier) */
.knopf--rand-hell{color:var(--papier-text);border-color:var(--papier-haar);}
.knopf--rand-hell:hover{border-color:oklch(70% 0.02 78);background:oklch(100% 0 0 / .55);}
.knopf--dunkel{background:var(--papier-text);color:var(--papier);}
.knopf--dunkel:hover{box-shadow:0 0 0 4px oklch(20% 0.02 60 / .15);transform:translateY(-1px);}

/* menu mobilne */
.menue{
  display:none;appearance:none;background:none;border:1px solid var(--haar);
  border-radius:var(--r-rund);color:var(--text);padding:.6rem .9rem;cursor:pointer;
  font:600 var(--t-label)/1 var(--ff-body);letter-spacing:.16em;
}

/* ═══ TAFLA — element charakterystyczny (§6) ══════════════ */
.tafel{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-tafel);
  background:var(--glas-durch);
  backdrop-filter:blur(2px);
  box-shadow:var(--schatten-nah),var(--kante-innen);
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
@supports not (backdrop-filter:blur(2px)){ .tafel{background:var(--glas);} }

/* 1 px oświetlona krawędź — gradient chromowy, jaśniejszy u góry */
.tafel::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;padding:1px;
  background:linear-gradient(155deg,
    var(--chrom-1) 0%, var(--chrom-3) 14%, var(--chrom-2) 38%, transparent 64%);
  -webkit-mask:linear-gradient(oklch(0% 0 0) 0 0) content-box,linear-gradient(oklch(0% 0 0) 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.55;
  transition:opacity var(--mid) var(--ease);
}
.tafel:hover::before{opacity:.9;}

/* refleks przesuwający się co kilka sekund, kaskadą (§7 pkt 1) */
.tafel::after{
  content:"";position:absolute;inset:-40% -70%;z-index:2;pointer-events:none;
  background:linear-gradient(112deg,
    transparent 44%,
    oklch(96% 0.02 90 / .07) 48%,
    oklch(99% 0.02 90 / .16) 50%,
    oklch(96% 0.02 90 / .07) 52%,
    transparent 57%);
  transform:translateX(-75%);
  animation:reflex 7.5s var(--ease) infinite;
  animation-delay:var(--reflex,0s);
}
@keyframes reflex{
  0%,72%{transform:translateX(-75%);}
  93%,100%{transform:translateX(85%);}
}

/* połysk podążający za kursorem (§6 pkt 5) */
.tafel__glanz{
  position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:radial-gradient(38% 38% at var(--mx,50%) var(--my,50%),
    oklch(92% 0.05 84 / .16) 0%, transparent 70%);
  opacity:0;transition:opacity var(--mid) var(--ease);
}
.tafel:hover .tafel__glanz{opacity:1;}
.tafel__inhalt{position:relative;z-index:4;}
/* tafla jako element siatki: treść wypełnia całą wysokość karty */
.tafel{display:flex;flex-direction:column;}
.tafel>.tafel__inhalt{flex:1;min-width:0;}

/* wariant jasny — dla sekcji na --papier (adaptacja §6 do §8/Termin) */
.tafel--hell{
  background:oklch(99% 0.008 86 / .9);
  box-shadow:0 1px 2px oklch(20% 0.02 60 / .06),inset 0 1px 0 oklch(100% 0 0 / .7);
}
.tafel--hell::before{
  background:linear-gradient(155deg,oklch(78% 0.03 84) 0%,oklch(88% 0.02 82) 30%,transparent 62%);
  opacity:.8;
}
.tafel--hell::after{display:none;}

/* ═══ SEKCJE ══════════════════════════════════════════════ */
.abschnitt{padding-block:var(--luft);}
.abschnitt__innen{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand);}
.abschnitt--tief{background:var(--raum-900);}
.abschnitt--hoch{background:var(--raum-700);}

.marke{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font:600 var(--t-label)/1 var(--ff-body);
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:clamp(18px,2.4vh,28px);
}
.marke::before{content:"";width:26px;height:1px;background:var(--haar);}

.titel{
  font-family:var(--ff-display);font-weight:800;
  font-size:var(--t-h2);line-height:.96;letter-spacing:-.03em;
  max-width:22ch;text-wrap:balance;
}
.vorspann{
  margin-top:1.2rem;max-width:58ch;
  font-size:var(--t-lead);line-height:1.55;color:var(--text-2);
}

/* znacznik treści zastępczej (wymóg kroku 3) */
.platzhalter-marke{
  display:inline-flex;align-items:center;gap:.4rem;
  font:600 10px/1 var(--ff-body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--licht);border:1px dashed oklch(78% 0.155 68 / .5);
  padding:.36rem .6rem;border-radius:var(--r-rund);
}
.platzhalter-marke--hell{color:var(--licht-tief);border-color:oklch(62% 0.14 62 / .5);}

/* pole obrazu zastępczego (§10: ciemny gradient z ziarnem) */
.bildfeld{
  position:relative;overflow:hidden;border-radius:var(--r-tafel);
  /* widoczne, zanim zdjęcie się doczyta — ta sama ciemność, w którą kadr wpada */
  background:
    radial-gradient(120% 90% at 76% 14%,oklch(32% 0.040 68) 0%,oklch(19% 0.018 60) 48%,oklch(12% 0.010 58) 100%);
}
.bildfeld__bild{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ═══ HERO (§6, §8, §11) ══════════════════════════════════ */
.hero{
  position:relative;
  padding-block:clamp(40px,7vh,90px) clamp(60px,10vh,120px);
  overflow:hidden;
}
.hero__innen{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--rand);
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,3.4vw,52px) clamp(32px,5vw,72px);align-items:start;
}
/* teza idzie przez całą szerokość — Syne w tym stopniu nie mieści się w kolumnie */
.hero__kopf{grid-column:1/-1;position:relative;z-index:2;}
.hero__inhalt{align-self:center;}
.hero__licht{
  position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 74% 22%,oklch(30% 0.045 68) 0%,transparent 62%);
  will-change:transform;
}
.hero__inhalt{position:relative;z-index:2;}

.these{
  font-family:var(--ff-display);font-weight:800;
  font-size:var(--t-display);line-height:.94;letter-spacing:-.03em;
  /* łamanie niesie <br> w HTML */
}
.licht{color:var(--licht);}

.hero__lead{
  margin-top:clamp(20px,3vh,34px);max-width:52ch;
  font-size:var(--t-lead);line-height:1.55;color:var(--text-2);
}
.hero__aktionen{
  margin-top:clamp(24px,3.5vh,40px);
  display:flex;flex-wrap:wrap;gap:.8rem;
}
.hero__fuss{
  margin-top:clamp(24px,3.5vh,40px);padding-top:1.1rem;
  border-top:1px solid var(--haar);
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  font-size:var(--t-small);color:var(--text-3);
}
.hero__fuss b{color:var(--text-2);font-weight:500;}
.hero__fuss time{font-variant-numeric:tabular-nums;}
.hero__fuss>span{font-variant-numeric:tabular-nums;}
/* status otwarcia: kropka zapala się tylko, gdy salon jest czynny (§11 pkt 4) */
#status.offen{color:var(--text-2);display:inline-flex;align-items:center;gap:.5rem;}
#status.offen::before{
  content:"";width:6px;height:6px;border-radius:var(--r-rund);
  background:var(--licht);box-shadow:0 0 0 3px oklch(78% 0.155 68 / .18);
}

/* scena: statyczny kadr + kanwa WebGL na wierzchu */
.buehne{
  position:relative;z-index:1;aspect-ratio:16/10;
  border-radius:var(--r-tafel);overflow:hidden;
  isolation:isolate;          /* `screen` ma mieszać się ze zdjęciem sceny, nie ze stroną */
  box-shadow:var(--schatten-fern);
  will-change:transform;
}
.buehne__still{position:absolute;inset:0;}
.buehne canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;
  opacity:0;transition:opacity var(--slow) var(--ease);
  /* Refleks NA szkle, nie plama NA zdjęciu (§6). Przy `screen` czerń tafli
     nie robi nic, a jasne odbicie okna dokłada światło do kadru pod spodem —
     więc dłoń i lustro ze zdjęcia zostają widoczne przez taflę. */
  mix-blend-mode:screen;
}
.buehne--webgl canvas{opacity:1;}
.buehne__hinweis{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:.8rem 1rem;
  font:600 10px/1.5 var(--ff-body);letter-spacing:.16em;text-transform:uppercase;
  color:oklch(66% 0.015 68);
  background:linear-gradient(to top,oklch(10% 0.01 58 / .8),transparent);
}

/* ═══ HANDSCHRIFT — trzy kroki (§8) ═══════════════════════ */
.schritte{
  margin-top:clamp(36px,6vh,64px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);
}
.schritt{padding:clamp(22px,2.4vw,34px);}
.schritt__nr{
  font:600 var(--t-label)/1 var(--ff-body);letter-spacing:.2em;color:var(--licht);
  font-variant-numeric:tabular-nums;
}
.schritt__titel{
  margin-top:1rem;font-family:var(--ff-display);font-weight:700;
  font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.05;
}
.schritt__text{margin-top:.7rem;color:var(--text-2);font-size:var(--t-small);line-height:1.65;}

/* ═══ LEISTUNGEN (§8, §9) ═════════════════════════════════ */
.leistungen{
  margin-top:clamp(36px,6vh,64px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:clamp(14px,1.6vw,24px);
}
.leistung{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:.9rem;}
/* Mikro-interakcja: przy kursorze rozjaśnia się linia światła pod górną
   krawędzią tafli i cena podchodzi o 2 px. Nic się nie powiększa —
   powiększanie kart to gest sklepu, nie pracowni. */
.tafel:has(.leistung):hover{box-shadow:var(--schatten-nah),inset 0 1px 0 oklch(95% 0.02 90 / .55);}
.leistung__preis{transition:translate var(--fast) var(--ease);}
.tafel:has(.leistung):hover .leistung__preis{translate:0 -2px;}
.leistung__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
.leistung__titel{font-family:var(--ff-display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;text-wrap:balance;}
.leistung__preis{
  font:600 var(--t-small)/1 var(--ff-body);color:var(--licht);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.leistung__text{color:var(--text-2);font-size:var(--t-small);line-height:1.65;flex:1;}
.leistung__meta{
  padding-top:.9rem;border-top:1px solid var(--haar);
  font:600 var(--t-label)/1 var(--ff-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);font-variant-numeric:tabular-nums;
}

/* ═══ TEAM (§8) ═══════════════════════════════════════════ */
.team{
  margin-top:clamp(36px,6vh,64px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);
}
.person{display:flex;flex-direction:column;}
.person .bildfeld{aspect-ratio:4/5;border-radius:0;}
.person__daten{padding:clamp(16px,1.6vw,22px);}
.person__name{font-family:var(--ff-display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;}
.person__rolle{margin-top:.35rem;color:var(--text-2);font-size:var(--t-small);}
.person__meta{
  margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--haar);
  display:flex;justify-content:space-between;gap:1rem;
  font:600 var(--t-label)/1 var(--ff-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}

/* ═══ GALERIE (§8) ════════════════════════════════════════ */
.galerie{
  margin-top:clamp(36px,6vh,64px);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);
}
.galerie .bildfeld{grid-column:span 2;aspect-ratio:3/4;}
.galerie .bildfeld:nth-child(1),
.galerie .bildfeld:nth-child(6){grid-column:span 4;aspect-ratio:16/10;}

/* ═══ PREISE (§8, §9) ═════════════════════════════════════ */
.preise{margin-top:clamp(36px,6vh,64px);max-width:920px;}
.preis-zeile{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  gap:1rem clamp(16px,2.4vw,40px);align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--haar);
}
.preis-zeile:first-child{border-top:1px solid var(--haar);}
/* Wiersz cennika: kreska pod nim zapala się od lewej, cena podchodzi.
   Ten sam gest co podkreślenie w nawigacji — jeden słownik ruchu. */
.preis-zeile{position:relative;transition:border-color var(--fast) var(--ease);}
.preis-zeile::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--licht);transform:scaleX(0);transform-origin:left;
  transition:transform var(--mid) var(--ease);
}
.preis-zeile:hover::after{transform:scaleX(1);}
.preis-zeile__preis{transition:translate var(--fast) var(--ease);}
.preis-zeile:hover .preis-zeile__preis{translate:0 -1px;}
.preis-zeile__name{font-size:var(--t-lead);}
.preis-zeile__dauer{
  font:600 var(--t-label)/1 var(--ff-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.preis-zeile__preis{
  font:600 var(--t-lead)/1 var(--ff-body);color:var(--licht);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.preis-hinweis{
  margin-top:1.6rem;max-width:62ch;font-size:var(--t-small);color:var(--text-3);line-height:1.7;
}

/* ═══ STIMMEN (§8) ════════════════════════════════════════ */
.stimmen{
  margin-top:clamp(36px,6vh,64px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);
}
.stimme{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:1.2rem;}
.stimme blockquote{
  font-family:var(--ff-display);font-weight:500;
  font-size:var(--t-h3);line-height:1.25;letter-spacing:-.015em;
}
.stimme figcaption{
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--haar);
  font:600 var(--t-label)/1 var(--ff-body);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}

/* ═══ TERMIN — sekcja jasna (§8, §11) ═════════════════════ */
.termin{background:var(--papier);color:var(--papier-text);}
.termin .marke{color:var(--papier-text-2);}
.termin .marke::before{background:var(--papier-haar);}
.termin .vorspann{color:var(--papier-text-2);}
.termin__raster{
  margin-top:clamp(36px,6vh,64px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
.formular .platzhalter-marke{margin-bottom:1.6rem;}
.feld{display:grid;gap:.5rem;margin-bottom:1.1rem;}
.feld label{
  font:600 var(--t-label)/1 var(--ff-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--papier-text-2);
}
.feld input,.feld select,.feld textarea{
  font:400 var(--t-body)/1.5 var(--ff-body);color:var(--papier-text);
  background:oklch(99% 0.008 86);border:1px solid var(--papier-haar);
  border-radius:var(--r-klein);padding:.85rem 1rem;width:100%;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.feld textarea{min-height:104px;resize:vertical;}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:oklch(70% 0.02 78);}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{
  outline:none;border-color:var(--licht-tief);
  box-shadow:0 0 0 3px oklch(62% 0.14 62 / .18);
}
.formular__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem;}
.formular__hinweis{font-size:var(--t-small);color:var(--papier-text-2);max-width:34ch;}
.formular__antwort{
  margin-top:1rem;padding:1rem 1.2rem;border-radius:var(--r-klein);
  background:oklch(88% 0.05 84);color:var(--papier-text);font-size:var(--t-small);
  border-left:3px solid var(--licht-tief);
}
.formular__antwort[hidden]{display:none;}
.formular__antwort[data-zustand="fehler"]{
  background:oklch(90% 0.035 60);border-left-color:oklch(52% 0.13 40);
}

.kontakt{padding:clamp(22px,2.4vw,32px);}
.kontakt dt{
  font:600 var(--t-label)/1 var(--ff-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--papier-text-2);margin-top:1.4rem;
}
.kontakt dt:first-of-type{margin-top:0;}
.kontakt dd{margin:.5rem 0 0;font-size:var(--t-body);font-variant-numeric:tabular-nums;}
.kontakt a{color:var(--papier-text);text-decoration:none;border-bottom:1px solid var(--licht-tief);}
.kontakt a:hover{color:var(--licht-tief);}
.kontakt__zeiten{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;font-size:var(--t-small);}
.kontakt__zeiten span:nth-child(even){font-variant-numeric:tabular-nums;text-align:right;}

/* ═══ PODSTRONY — wspólne elementy (§8) ═══════════════════ */
/* pierwsza sekcja pod paskiem: mniej powietrza u góry niż między sekcjami */
.abschnitt--oben{padding-block:clamp(56px,9vh,110px) var(--luft);}
/* nagłówek podstrony, po którym od razu idzie kolejna sekcja */
.abschnitt--kopfzeile{padding-block:clamp(56px,9vh,110px) clamp(28px,4vh,52px);}
.termin__raster--oben{margin-top:0;}

/* aktywna pozycja w nawigacji — kreska zostaje zapalona */
.nav a[aria-current="page"]{color:var(--text);}
.nav a[aria-current="page"]::after{transform:scaleX(1);}

/* przejście do pełnej treści pod zajawką na stronie głównej */
.mehr{margin-top:clamp(28px,4vh,44px);display:flex;flex-wrap:wrap;gap:.8rem;}

/* skrót zaproszenia na termin (strona główna) */
.einladung{
  margin-top:clamp(36px,6vh,64px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,56px);align-items:center;
}
.einladung__aktionen{margin-top:clamp(24px,3.5vh,36px);display:flex;flex-wrap:wrap;gap:.8rem;}

/* ═══ PODSTRONY PRAWNE — impressum, datenschutz ═══════════ */
/* Treści prawnej w demo nie ma. Zamiast pustej strony: jedna tafla
   z pieczęcią i spis tego, co stanęłoby tu po weryfikacji prawnej. */
.rechtsseite{padding-block:clamp(56px,9vh,110px) var(--luft);}
.rechtsseite .titel{max-width:16ch;}

.hinweis-tafel{margin-top:clamp(28px,4vh,44px);max-width:70ch;}
.hinweis{padding:clamp(26px,3.2vw,44px);}
.stempel{
  display:inline-block;margin-bottom:clamp(20px,2.6vh,30px);
  font:600 var(--t-label)/1 var(--ff-body);
  letter-spacing:.3em;text-transform:uppercase;color:var(--licht);
  border:1px dashed oklch(78% 0.155 68 / .55);
  padding:.75rem 1.1rem .75rem 1.4rem;border-radius:var(--r-klein);
  rotate:-2.5deg;
  box-shadow:inset 0 0 0 1px oklch(78% 0.155 68 / .08);
}
.hinweis__text{font-size:var(--t-lead);line-height:1.55;}
.hinweis__zusatz{
  margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--haar);
  font-size:var(--t-small);color:var(--text-3);line-height:1.7;max-width:56ch;
}

.rechtsseite h2.titel{margin-top:clamp(56px,9vh,104px);}
.rechtsliste{margin-top:clamp(24px,3.5vh,40px);max-width:920px;}
.rechtsliste dt{
  padding-top:1.3rem;border-top:1px solid var(--haar);
  font:600 var(--t-label)/1 var(--ff-body);
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);
}
.rechtsliste dd{
  margin:.7rem 0 1.4rem;max-width:62ch;
  font-size:var(--t-small);line-height:1.7;color:var(--text-3);
}
.rechtsliste dd:last-of-type{margin-bottom:0;}

.rechtsseite__fuss{margin-top:clamp(40px,6vh,72px);display:flex;flex-wrap:wrap;gap:.8rem;}

/* ═══ STOPKA ══════════════════════════════════════════════ */
.fuss{background:var(--raum-900);border-top:1px solid var(--haar);}
.fuss__innen{
  max-width:var(--max);margin-inline:auto;padding:clamp(40px,6vh,72px) var(--rand);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:clamp(24px,3vw,48px);
}
.fuss h3{
  font:600 var(--t-label)/1 var(--ff-body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:1rem;
}
.fuss p,.fuss li{font-size:var(--t-small);color:var(--text-2);line-height:1.8;}
.fuss ul{list-style:none;padding:0;}
.fuss a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease);}
.fuss a:hover{color:var(--licht);border-bottom-color:var(--licht);}
.fuss__unten{
  max-width:var(--max);margin-inline:auto;padding:1.2rem var(--rand) 2rem;
  border-top:1px solid var(--haar);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:var(--t-small);color:var(--text-3);
}

/* ═══ STICKY CTA — mobile (§8, §11) ═══════════════════════ */
.mobil-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:.7rem clamp(12px,4vw,20px) calc(.7rem + env(safe-area-inset-bottom));
  gap:.6rem;
  background:oklch(14% 0.012 60 / .92);backdrop-filter:blur(14px);
  border-top:1px solid var(--haar);
}
.mobil-cta .knopf{flex:1;justify-content:center;}

/* ═══ RUCH: wejścia sekcji (§7 pkt 4) ═════════════════════ */
/* wejście jedzie na `translate`, nie na `transform` — inaczej nadpisywałoby
   tilt tafli, która trzyma swój obrót właśnie w `transform` (§6 pkt 5) */
.auftritt{opacity:0;translate:0 16px;}
.auftritt--sichtbar{
  opacity:1;translate:0 0;
  transition:opacity var(--mid) var(--ease),translate var(--mid) var(--ease);
  transition-delay:var(--auftritt-delay,0s);
}
.js-aus .auftritt{opacity:1;translate:none;}

/* ═══ WEJŚCIE HERO — czystą animacją CSS, bez JS ══════════
   Świadomie NIE przez `.auftritt`. Tamten mechanizm gasi element
   do opacity:0 i czeka, aż IntersectionObserver go zapali. Dla
   sekcji poniżej zgięcia to bezpieczne — nikt tam jeszcze nie
   patrzy. Dla hero było błędem: gdy obserwator nie zadziała
   (błąd JS, karta w tle, stary silnik), pierwszy ekran zostaje
   CZARNY. Treść nad zgięciem nie ma prawa zależeć od skryptu.

   Animacja z `both` dochodzi do końca sama, bez niczyjej zgody,
   a `prefers-reduced-motion` skraca ją globalnie do zera —
   wtedy hero jest po prostu od razu na miejscu. */
@keyframes eintritt{
  from{opacity:0;translate:0 16px;}
  to{opacity:1;translate:0 0;}
}
.eintritt{
  animation:eintritt var(--mid) var(--ease) both;
  animation-delay:var(--auftritt-delay,0s);
}

/* ═══ RESPONSYWNOŚĆ ═══════════════════════════════════════ */
@media (max-width:1180px){
  .hero__innen{grid-template-columns:1fr;}
  /* w jednej kolumnie kolejność jest: teza → scena → lead z przyciskami */
  .hero__kopf{order:-2;}
  .buehne{aspect-ratio:16/11;order:-1;}
  .team{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .nav{display:none;}
  .nav--offen{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:oklch(18% 0.014 62 / .98);backdrop-filter:blur(16px);
    border-block:1px solid var(--haar);padding:.5rem var(--rand) 1.2rem;
  }
  .nav--offen a{padding:.9rem 0;border-bottom:1px solid var(--haar);font-size:var(--t-lead);}
  .nav--offen a::after{display:none;}
  .menue{display:block;margin-inline-start:auto;}
  .kopf__aktionen .telefon,.kopf__aktionen .knopf{display:none;}
  /* Nawigacja znika, ale wortmarka + menu + DE/PL nadal stoją w jednym
     wierszu. Przy domyślnym gap:16px i wortmarce 227 px suma min-content
     przekraczała szerokość telefonu, więc typografię paska trzeba tu
     ścieśnić — inaczej strona otwiera się oddalona. */
  .kopf__innen{gap:10px;}
  .wortmarke{font-size:15px;letter-spacing:.06em;}
  .menue{padding:.55rem .7rem;letter-spacing:.08em;}
  .kopf__aktionen{gap:.45rem;}
  .sprache{gap:.35rem;}
  .sprache__btn{letter-spacing:.08em;}
  .mobil-cta{display:flex;}
  body{padding-bottom:76px;}
  .schritte,.stimmen{grid-template-columns:1fr;}
  .termin__raster,.einladung{grid-template-columns:1fr;}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr));}
  .galerie .bildfeld{grid-column:span 1;aspect-ratio:3/4;}
  /* dwa kadry szerokie zostają szerokie — przycięte do 3/4 traciłyby wnętrze i ulicę */
  .galerie .bildfeld:nth-child(1),
  .galerie .bildfeld:nth-child(6){grid-column:span 2;aspect-ratio:16/10;}
}
@media (max-width:760px){
  /* poniżej tej szerokości ręczne łamanie tezy nie mieści się — łamie ją tekst,
     dzielenie wyrazów zostaje jako zawór bezpieczeństwa dla „Katalogschnitt” */
  .these br{display:none;}
  .these{hyphens:auto;}
}
@media (max-width:560px){
  .team{grid-template-columns:1fr;}
  .preis-zeile{grid-template-columns:minmax(0,1fr) auto;}
  .preis-zeile__dauer{grid-column:1;order:3;}
  .hero__aktionen .knopf{width:100%;justify-content:center;}
}

/* ═══ BARDZO WĄSKIE EKRANY (≤400 px) ══════════════════════
   Wiersz nagłówka niesie trzy rzeczy naraz: wortmarkę, przycisk
   menu i przełącznik DE/PL. Ich suma min-content nie mieściła się
   w szerokości telefonu, a `white-space:nowrap` na wortmarce
   odbiera flexowi możliwość ścieśnienia — układ rósł ponad
   viewport i przeglądarka mobilna oddalała całą stronę.
   Próg to 400, nie 360, bo etykieta przycisku rośnie po otwarciu
   menu („Menü” → „Schließen”, „Menu” → „Zamknij”) i zmieścić
   trzeba stan szerszy, nie węższy. */
@media (max-width:400px){
  .kopf__innen{gap:7px;padding-inline:14px;}
  .wortmarke{font-size:13px;letter-spacing:.02em;}
  .menue{padding:.5rem .55rem;letter-spacing:.04em;}
  .kopf__aktionen{gap:.4rem;}
}

/* ═══ REDUCED MOTION — wyłącza wszystko (§7 pkt 6) ════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .tafel{transform:none!important;}
  .tafel__glanz{display:none;}
  .auftritt{opacity:1;translate:none;}
  .eintritt{animation:none;opacity:1;translate:none;}
  .hero__licht,.buehne{transform:none!important;}
}

/* ═══ ZIARNO — tekstura na całej stronie ══════════════════
   Fotografia w §10 jest ziarnista; interfejs dookoła był
   gładki jak render. Jedna warstwa szumu na wierzchu zszywa
   zdjęcia z tłem i odbiera stronie plastik.

   To NIE jest ruch — ziarno stoi. Dlatego zostaje włączone
   także przy `prefers-reduced-motion` i na dotyku.
   Kryteria: 5,5 % krycia, `overlay`, kafel 180 px. Powyżej
   ok. 8 % zaczyna brudzić bursztyn i szarzyć czerń. */
body::after{
  content:"";
  position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  /* `overlay`, nie zwykłe krycie: szum ma modulować to, co pod spodem, a nie
     kłaść siwej mgły na czerni. §3 mówi, że najgłębsza czerń ma zostać czernią. */
  transform:translateZ(0);   /* własna warstwa kompozytora */
}
/* Druk nie potrzebuje szumu z ekranu. */
@media print{ body::after{display:none;} }

/* ═══ LENIS — przewijanie z bezwładnością ═════════════════
   Reguły wymagane przez bibliotekę. `scroll-behavior:auto`
   jest konieczne: natywne `smooth` z §rdzenia biłoby się
   z interpolacją Lenisa i dawało dwa ruchy naraz. */
html.lenis,html.lenis body{height:auto;}
html.lenis{scroll-behavior:auto;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}

/* ═══ CTA W MENU MOBILNYM (§5 zamówienia) ═════════════════
   W pasku CTA znika poniżej 900 px. Dolny sticky bar je niesie,
   ale kto otworzył menu, ma podjąć decyzję tam, gdzie patrzy —
   nie szukać przycisku na dole ekranu. */
.nav__cta{display:none;}
@media (max-width:900px){
  .nav--offen .nav__cta{
    display:inline-flex;justify-content:center;
    margin-top:1rem;width:100%;
  }
  /* wewnątrz menu to zwykły przycisk, nie pozycja listy */
  .nav--offen .nav__cta::after{display:none;}
  .nav--offen a.nav__cta{border-bottom:none;padding:.95rem 1.4rem;font-size:var(--t-small);}
  /* .nav a ma wyzszą wagę niż .knopf--licht — kolor trzeba oddać jawnie */
  .nav .nav__cta{color:oklch(18% 0.03 60);}
}

/* ═══ KRÓTKI LEAD W HERO NA WĄSKICH EKRANACH (§5) ═════════
   Cztery zdania na 390 px spychają przyciski poniżej zgięcia.
   Wersja krótka niesie tę samą obietnicę w jednym zdaniu. */
.hero__lead--kurz{display:none;}
@media (max-width:560px){
  .hero__lead--lang{display:none;}
  .hero__lead--kurz{display:block;}
}

/* ═══ DOTYK: cały ruch wyłączony (§4 zamówienia) ══════════
   `pointer:coarse` to ten sam próg, którym §6 odsiewa WebGL.
   Na telefonie zostaje typografia, kolor, ziarno i zdjęcia —
   i to wystarcza. Ruch był dekoracją, więc może zniknąć. */
@media (pointer:coarse){
  /* wejścia też są ruchem — na dotyku treść po prostu jest, od razu.
     Przy okazji znika ryzyko pustej sekcji, gdyby obserwator zawiódł. */
  .auftritt{opacity:1!important;translate:none!important;}
  .eintritt{animation:none;opacity:1;translate:none;}
  .tafel{transform:none!important;}
  .tafel::after{animation:none;opacity:0;}
  .tafel__glanz{display:none;}
  .knopf--licht:hover{transform:none;}
  .preis-zeile::after{display:none;}
  .hero__licht{transform:none!important;}
}

/* Drogowskaz cenowy w stopce hero (§5 zamówienia: cena bez długiego
   przewijania). Dwie kwoty, nie jedna — sama „od 42 €" przy damskim
   cięciu za 68 € czytałaby się jak zwabianie ceną, czego zabrania §9. */
.hero__fuss a{
  color:var(--text-2);text-decoration:none;
  border-bottom:1px solid var(--haar);
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.hero__fuss a:hover{color:var(--licht);border-bottom-color:var(--licht);}