/* ============================================================
   PROB-AR — strona firmowa (prob-ar.de)
   System wizualny: design/branding/logo-icon-concepts-2026-07-13/icon_spec.html
     Nachtblau  #1E2A3A  — atrament
     Messing    #8C6F36  — akcent (matowy)
     Creme      #ECE7D8  — tło
   Kroje: Cinzel 600 (wordmark, etykiety), EB Garamond 400/500 (podstrony prawne),
   Inter 400–600 (tekst strony głównej — ten sam krój co drobny tekst wizytówki).
   Kroje SERWOWANE Z NASZEJ DOMENY, nie z fonts.gstatic.com — inaczej każde
   wejście przekazywałoby adres IP odwiedzającego do Google, co musielibyśmy
   opisać we własnej Datenschutzerklärung (LG München I, 20.01.2022, 3 O 17493/20).
   Obie rodziny na licencji SIL OFL 1.1 — self-hosting dozwolony.
   ============================================================ */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cinzel-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/ebgaramond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  /* Podzbiór łaciński, wagi 400–600, oś opsz przypięta do 14 (tekst) — 29 KB. SIL OFL 1.1. */
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nachtblau: #1e2a3a;
  --messing: #8c6f36;
  --creme: #ece7d8;
  --papier: #f2efe6;
  --gedaempft: #6b6a5f;
  --linie: rgba(30, 42, 58, 0.14);
  /* Tokeny WSPÓLNE strony głównej i podstron (17.09): odtwarzacz filmu stoi też na /app/,
     gdzie nie ma klasy .landing — wcześniej jego odstępy, fokus i drobny druk
     tracił tam wartości (var() bez definicji = deklaracja nieważna, fokus znikał). */
  --messing-hell: #c4a468;
  --leise-dunkel: #aeb4bc;
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-6: 48px;
  --s-8: 64px;
  --s-12: 96px;
  --t-display: clamp(40px, 9vw, 64px);
  --t-titel: clamp(22px, 1.1vw + 18px, 30px);
  --t-lead: 19px;
  --t-text: 17px;
  --t-klein: 14px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --breite: 1080px;
  --ease: cubic-bezier(0.22, 0.08, 0.28, 1);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--creme);
  color: var(--nachtblau);
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

/* --- Wordmark ------------------------------------------------
   Kanoniczny zapis nazwy to „PROB-AR": wersaliki z myślnikiem.
   Zapis wielbłądzi (małe p, sklejone AR) jest WYCOFANY i nie wolno go użyć
   nigdzie na tej stronie — pilnuje tego bramka treści w tools/site-deploy.sh. */
.wordmark {
  font-family: 'Cinzel', 'EB Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--nachtblau);
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
}

.wordmark .bindestrich {
  color: var(--messing);
}

/* --- Strona główna: patrz sekcja LANDING na końcu pliku --- */

/* --- Stopka --------------------------------------------------- */
.fuss {
  padding: 22px 24px 34px;
  text-align: center;
  font-size: 14.5px;
  color: var(--gedaempft);
}

.fuss a {
  color: var(--gedaempft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.fuss a:hover,
.fuss a:focus-visible {
  color: var(--nachtblau);
  border-bottom-color: var(--linie);
}

.fuss__trenner {
  margin: 0 12px;
  color: var(--linie);
}

/* --- Podstrony prawne ------------------------------------------ */
.rechtstext {
  flex: 1;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  padding: 44px 24px 8px;
}

.rechtstext .wordmark {
  font-size: 19px;
  display: inline-block;
  margin-bottom: 46px;
}

/* Wordmark w nagłówku podstrony jest linkiem do strony głównej, ale NIE ma
   wyglądać jak link w tekście — reguła `.rechtstext a` dokłada mu kreskę pod
   spodem, więc trzeba ją tu zdjąć jawnie. */
.rechtstext .wordmark a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}

.rechtstext h1 {
  font-family: 'Cinzel', 'EB Garamond', Georgia, serif;
  font-size: 27px;
  /* „Datenschutzerklaerung" to jedno slowo o szerokosci 363 px w tym kroju, a wnetrze
     kolumny na telefonie 375 px ma 335 px — naglowek byl UCIETY (zmierzone 30.09 takze
     na produkcji, wiec nie byl to regres, tylko usterka, ktora tam stala).
     ⛔ NIE zmniejszac font-size: probowalem clamp() i zabralo 27→22 px takze stronom
     /app/ i /impressum/, ktorych problem NIE dotyczyl. Dzielenie wyrazu dziala
     wylacznie na slowach, ktore sie nie miesza — reszta zostaje nietknieta. */
  hyphens: auto;
  -webkit-hyphens: auto;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.rechtstext h1 + .quelle {
  font-size: 15px;
  color: var(--gedaempft);
  margin-bottom: 34px;
}

.rechtstext h2 {
  font-family: 'Cinzel', 'EB Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 34px 0 10px;
}

.rechtstext p {
  margin-bottom: 14px;
}

.rechtstext ul {
  margin: 0 0 14px 22px;
}

.rechtstext li {
  margin-bottom: 6px;
}

.rechtstext a {
  color: var(--r-link, var(--messing));
  text-decoration: none;
  border-bottom: 1px solid var(--r-link-linie, rgba(140, 111, 54, 0.42));
}

.rechtstext a:hover,
.rechtstext a:focus-visible {
  color: var(--r-link-aktiv, var(--nachtblau));
  border-bottom-color: var(--r-link-aktiv, var(--nachtblau));
}

.rechtstext .anschrift {
  font-style: normal;
  line-height: 1.75;
}

.rechtstext hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 40px 0 22px;
}

.rechtstext .stand {
  font-size: 14px;
  color: var(--gedaempft);
}

@media (max-width: 480px) {
  body {
    font-size: 17px;
  }
  .rechtstext {
    padding: 32px 20px 8px;
  }
}

/* ============================================================
   LANDING (strona główna) — wszystko pod body.landing, żeby podstrony
   prawne, które dzielą ten arkusz, zostały nietknięte.

   Rejestry jak na wizytówce: Cinzel = tożsamość (logotyp, krótkie etykiety),
   Inter = treść, linia mosiężna = zawias między nimi.

   Kontrasty (WCAG 2.x, policzone):
     Creme na Nachtblau ........ 11,74  tekst
     --messing-hell na Nachtblau  6,12  drobny tekst/fokus na ciemnym
     --messing na Nachtblau ..... 3,07  TYLKO linie i duży tekst (myślnik logotypu)
     --messing-text na Papier ... 5,37  drobny tekst mosiężny na jasnym
     --messing na Creme ......... 3,82  TYLKO linie/elementy nietekstowe
     --leise na Creme ........... 6,07  tekst drugorzędny
   Siatka 8 pt: odstępy wyłącznie z --s-*.
   ============================================================ */

.landing {
  --messing-text: #7a5e2b;
  --leise: #56554c;
  --papier: #f4f1e8;
  /* Role kolorów — przełącza je atrybut data-farbe na <html> (blok niżej). */
  --grund: var(--creme);
  --kopf-grund: var(--nachtblau);
  --buehne: var(--nachtblau);
  --tinte: var(--nachtblau);
  --zeichen: var(--messing);
  --raster: rgba(140, 111, 54, 0.18);
  --wir-grund: rgba(140, 111, 54, 0.1);
  --akzent-unterstrich: rgba(122, 94, 43, 0.4);
  --schatten-film: 0 1px 2px rgba(30, 42, 58, 0.12), 0 12px 32px rgba(30, 42, 58, 0.16);

  display: block;
  font-family: var(--sans);
  font-size: var(--t-text);
  line-height: 1.6;
  font-feature-settings: 'kern', 'calt';
  background: var(--grund);
}

.landing [hidden] {
  display: none !important;
}

/* === WARIANT CIEMNY „Nacht" (17.09, do decyzji foundera) =====================
   Włączany JEDNYM atrybutem: <html lang="de" data-farbe="nacht">. Bez atrybutu
   strona jest jasna — reguły powyżej i poniżej nie zmieniają się ani o piksel
   (sprawdzone porównaniem zrzutów przed/po przepięciu na role kolorów).
   To NIE jest odwrócenie kolorów: awers wizytówki rozciągnięty na stronę.
     grunt              Nachtblau #1E2A3A        (L* 16,7) — nagłówek i sekcje zwykłe
     sekcje „papier"    #253347                  (L* 20,9) — uniesione jak papier nad Creme
     scena              #161F2B                  (L* 11,4) — zamknięcie, stopka, podstawa systemu, ramka filmu
     tekst              Creme #ECE7D8            11,74 / 10,34 / 13,43 (grunt / papier / scena)
     tekst drugorzędny  #B3B1A7 (ciepły, z rodziny Creme)   6,75 / 5,94 / 7,72
     akcent tekstowy    #C4A468 (jasny mosiądz)  6,12 / 5,39 / 7,00
     linie              Messing #8C6F36          3,07 / 2,70 — WYŁĄCZNIE ozdobne; jako tekst
                        nie przechodzi AA (3,07 < 4,5), a znaczniki stanu siedzą na „papierze"
                        (2,70 < 3,0 dla grafiki) — dlatego znaczniki dostają jasny mosiądz.
   Jasne prostokąty (film, dokument) osadzone, nie wklejone:
     film     — ramka-bezel ze sceny (6 px) + cienki pierścień Creme: czyta się jak telefon,
                bo to JEST nagranie ekranu telefonu; wzór z podstrony /film/.
     dokument — kartka przygaszona do #F3F1EC (L* 95 zamiast 100), głęboki cień zamiast
                szarej poświaty; szary drobnego druku przyciemniony do #5F646C (5,28),
                bo #6B7078 na przygaszonej kartce spada do 4,41. */
html[data-farbe='nacht'] {
  color-scheme: dark;
}

html[data-farbe='nacht'] .landing {
  --grund: var(--nachtblau);
  --papier: #253347;
  --kopf-grund: var(--nachtblau);
  --buehne: #161f2b;
  --tinte: var(--creme);
  --leise: #b3b1a7;
  --leise-dunkel: #b3b1a7;
  --messing-text: var(--messing-hell);
  --zeichen: var(--messing-hell);
  --linie: rgba(236, 231, 216, 0.14);
  --raster: rgba(196, 164, 104, 0.2);
  --wir-grund: rgba(196, 164, 104, 0.1);
  --akzent-unterstrich: rgba(196, 164, 104, 0.45);
  --schatten-film: 0 0 0 1px rgba(236, 231, 216, 0.14), 0 16px 40px rgba(0, 0, 0, 0.35);
  color: var(--creme);
}

/* Nagłówek i pierwsza sekcja mają ten sam grunt — granicę niesie mosiężna kreska
   na szerokość siatki treści (jak linia na awersie), nie zmiana tła. */
html[data-farbe='nacht'] .kopf {
  background: linear-gradient(var(--messing), var(--messing)) center bottom /
      min(var(--breite), calc(100% - 2 * var(--s-3))) 1px no-repeat,
    var(--kopf-grund);
}

html[data-farbe='nacht'] .film__rahmen {
  padding: 6px;
  border-radius: 22px;
}

html[data-farbe='nacht'] .film__video,
html[data-farbe='nacht'] .film__start {
  border-radius: 16px;
}

html[data-farbe='nacht'] .film__start {
  inset: 6px;
}

html[data-farbe='nacht'] .beleg {
  --b-papier: #f3f1ec;
  --b-leise: #5f646c;
  --b-schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 48px rgba(0, 0, 0, 0.35);
}

/* Zamknięcie i stopka czytają się jako jedna „odwrotna strona" wizytówki. */
html[data-farbe='nacht'] .landing .fuss {
  background: var(--buehne);
  box-shadow: inset 0 1px 0 var(--linie);
}

html[data-farbe='nacht'] .landing .fuss a:hover,
html[data-farbe='nacht'] .landing .fuss a:focus-visible {
  color: var(--creme);
  border-bottom-color: rgba(236, 231, 216, 0.4);
}

/* === WARIANT CIEMNY na podstronach tekstowych (17.09, wybór foundera: „Nacht") ======
   /impressum/, /datenschutz/ i /app/ (cel kodu QR) mają `.rechtstext`, nie `.landing`,
   więc blok wyżej ich nie dotykał — czytelnik szedł z granatowej stopki na kremową kartkę.
   Tu ten sam awers wizytówki, ale strojony pod LEKTURĘ, nie pod ekspozycję:
     grunt           Nachtblau #1E2A3A — ten sam co strona główna (bez „papieru" #253347:
                     tekst prawny to jedna ciągła kolumna, nie ma czego unosić)
     tekst ciągły    Creme #ECE7D8 ...... 11,74  — złamana biel, nie #FFF (15,0): przy
                     szeryfie EB Garamond czysta biel na granacie „świeci" i rozmywa szeryfy
     drugorzędny     #B3B1A7 ............ 6,75   (źródło pod tytułem, „Stand", podpis filmu)
     linki           jasny mosiądz #C4A468 6,12  + kreska 45 % — link rozpoznawalny też bez koloru
     link aktywny    Creme 11,74
     linie           Creme 14 % — tylko rozdzielacze
   Myślnik logotypu zostaje ciemnym mosiądzem (3,07; element graficzny w znaku, jak w nagłówku
   strony głównej). Selektor `body` przez :where(), żeby nie przebić `.landing`/`.kino`. */
:where(html[data-farbe='nacht']) body {
  background: var(--nachtblau);
  color: var(--creme);
}

html[data-farbe='nacht'] .rechtstext {
  --gedaempft: #b3b1a7;
  --linie: rgba(236, 231, 216, 0.14);
  --leise-dunkel: #b3b1a7;
  --r-link: var(--messing-hell);
  --r-link-linie: rgba(196, 164, 104, 0.45);
  --r-link-aktiv: var(--creme);
  /* odtwarzacz na /app/: ramka-bezel ze „sceny" jak na stronie głównej */
  --buehne: #161f2b;
  --schatten-film: 0 0 0 1px rgba(236, 231, 216, 0.14), 0 16px 40px rgba(0, 0, 0, 0.35);
}

html[data-farbe='nacht'] .rechtstext .wordmark {
  color: var(--creme);
}

/* --- Linia mosiężna ------------------------------------------- */
.landing .regel {
  width: 56px;
  height: 1px;
  border: 0;
  background: var(--messing);
}

.landing .regel--mitte {
  margin: var(--s-4) auto;
}

/* --- Hero ------------------------------------------------------ */
/* MATERIAL W PIERWSZYM KADRZE (27.09, decyzja foundera: „wariant A dodaje ciekawosci
   wlasnie w tej czesci landingu, ktora jest teraz pusta i nieciekawa").
   Obraz to RENDER z konfiguratora — nie zdjecie.
   27.09: Weiss-Grau-Meliert, Rechteck-Halbverband 30x20, swiatlo `park`.
   DLACZEGO TEN MATERIAL: to ten sam kamien, ktory widac w nagraniu z apki obok —
   ta sama rzecz w dwoch skalach, w ruchu na ekranie i w detalu wokol niego.
   🔴 DLACZEGO `park`, a nie `sunset`: sunset przesuwa barwe tego materialu o +25 punktow
   ku niebieskiemu (zmierzone B-R: sunset +24,9, park +5,2). Strona twierdzi „Ihre Farben,
   so wie sie in Ihrem Katalog stehen" — render przeklamujacy barwe pracuje przeciwko
   wlasnemu zdaniu. Przy okazji pomiar obalil zalozenie, ze sunset daje wiecej faktury:
   po normalizacji przez jasnosc park wygrywa 1,31x na antracycie i o 10 % na tym materiale.
   ⛔ Plik NIE jest przyciemniony — ciemnienie robi gradient nizej, dzieki czemu material
   zostaje czytelny tam, gdzie gradient slabnie. Przyciemniony plik zabralby go wszedzie. */
.kopf {
  position: relative;
  isolation: isolate;
  background: var(--kopf-grund);
  color: var(--creme);
  padding: var(--s-12) var(--s-3) var(--s-8);
  text-align: center;
  /* Kursor domyslny zamiast belki tekstowej. Hero czyta sie jak plakat, a I-beam
     nad wielkim naglowkiem wyglada, jakby dalo sie w nim pisac (zgloszenie 17.09).
     Zaznaczanie i kopiowanie dziala dalej — to tylko wyglad wskaznika.
     Linki i przyciski w hero maja wlasny kursor, nizej. */
  cursor: default;
}

/* Tlo hero: obraz + gradient. `<img>`, nie `background-image`, zeby dzialal `srcset`
   (telefon bierze 900 px / 125 KB zamiast 2400 px / 638 KB) i `fetchpriority` dla LCP. */
.kopf__tlo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.kopf__tlo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* Gradient jest KONIECZNY, nie ozdobny: tekst hero jest WYSRODKOWANY, wiec nie da sie
   odsunac go w ciemny rog. Przebieg pionowy — mocny tam, gdzie stoja slowa, slabnacy
   ku dolowi, gdzie material ma byc widoczny. Kontrast mierzony na pikselu po zbudowaniu.
   ⚠️ Gdyby kiedys stanal tu material CIEMNY (antracyt), progi trzeba przeliczyc od nowa:
   krem na ciemnym tle wygrywa latwiej, ale mosiezny kicker juz niekoniecznie. */
.kopf__tlo::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Przebieg BOCZNY, nie pionowy: tekst stoi po lewej, wiec ciemno musi byc po lewej,
     a material ma zostac czytelny po prawej — tam, gdzie stoi nagranie z apki.
     Drugi, slaby gradient pionowy chroni dolna krawedz, gdzie akapit siega najdalej.
     Kontrast mierzony na pikselu z UKRYTYM tekstem (inaczej mierzy sie krem wzgledem kremu). */
  background:
    linear-gradient(100deg,
      rgba(22, 32, 44, 0.95) 0%,
      rgba(22, 32, 44, 0.90) 34%,
      rgba(22, 32, 44, 0.68) 58%,
      rgba(22, 32, 44, 0.34) 78%,
      rgba(22, 32, 44, 0.22) 100%),
    linear-gradient(180deg,
      rgba(22, 32, 44, 0.30) 0%,
      rgba(22, 32, 44, 0.00) 34%);
}

@media (prefers-reduced-transparency: reduce) {
  .kopf__tlo::after { background: rgba(22, 32, 44, 0.92); }
}

/* KOMPOZYCJA PIERWSZEGO KADRU (27.09). Do dzis hero bylo WYSRODKOWANE, a dolna czesc
   (`.kopf__spalten`) i tak schodzila do lewej od 900 px — czyli os zmieniala sie w polowie
   nagłowka. Po wejsciu materialu w tlo jedna os stala sie warunkiem, nie preferencja:
   tekst musi trzymac sie ciemnej strony gradientu, a material zostac po jasnej.
   Decyzja foundera po obejrzeniu makiety: „uklad z makiety byl lepszy z tekstem po lewej".
   Gorne elementy dostaja te sama szerokosc i to samo wyprowadzenie co `.kopf__spalten`,
   wiec wszystko stoi na jednej linii. Wlasne miary tekstu (`max-width`) zostaja nietkniete. */
.kopf {
  text-align: left;
}

.landing .kopf__logo {
  align-items: flex-start;
}

/* ⚠️ WYPROWADZENIE TYLKO OD 900 px. Ponizej tej szerokosci `.kopf__spalten` nie jest
   jeszcze gridem i cala dolna czesc zostaje w `.kopf__inner` (max-width 640 px,
   wysrodkowany). Wyprowadzenie gornych elementow do szerszej osi dawalo DWIE OSIE naraz:
   zmierzone przy 768 px — kreska i H1 na x=24, akapit na x=64. Ponizej 900 px gorne
   elementy po prostu zostaja w tym samym kontenerze co reszta. */
@media (min-width: 900px) {
  .landing .kopf__logo,
  .landing .kopf__kategorie,
  .landing .kopf__titel,
  .landing .kopf .regel--mitte {
    width: min(940px, calc(100vw - 6rem));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ⚠️ Klasa nazywa sie `--mitte`, a kreska stoi teraz przy lewej krawedzi. Nazwy nie
   zmieniam, bo ta sama klasa pracuje w innych sekcjach — nadpisuje wylacznie w `.kopf`. */
.landing .kopf .regel--mitte {
  /* Po zejsciu do lewej kreska ciagnela sie przez cale 940 px i czytala sie jak belka
     dzielaca sekcje. Ma byc ZNAKIEM przy wordmarku.
     ⚠️ NIE przez `width: 88px` — element korzysta z wyprowadzenia `left:50% + translateX(-50%)`,
     ktore przy waskiej szerokosci CENTRUJE zamiast wyprowadzac (zmierzone: kreska ladowala
     na x=151 px przy wordmarku na x=28). Element zostaje w pelnej osi, a krotka jest
     RYSOWANA gradientem. */
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,
    var(--messing) 0 88px,
    transparent 88px);
  margin-left: 0;
  margin-right: 0;
}

.landing .kopf__satz {
  margin-inline: 0;
}

/* ⚠️ Same `align-items` NIE WYSTARCZA. `.kopf__aktionen` jest kolumna do 560 px,
   a od 560 px przechodzi na `flex-direction: row` — i wtedy poziomem steruje
   `justify-content`, nie `align-items`. Bez obu przycisk wracal na srodek w zakresie
   560–900 px (zmierzone przy 768 px: tekst na x=64, przycisk na x=247). */
.landing .kopf__aktionen {
  align-items: flex-start;
  justify-content: flex-start;
}


/* Bez tego dziedziczenie z .kopf zabiera lapke z obu dzialan hero. */
.kopf a,
.kopf button {
  cursor: pointer;
}

.kopf__inner {
  max-width: 640px;
  margin: 0 auto;
}

.kopf__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
}

/* v4: logotyp jest PODPISEM nadawcy, nie nagłówkiem — rolę bohatera przejął
   .kopf__titel. Dwie duże rzeczy na jednym ekranie konkurują o pierwsze spojrzenie. */
.landing .kopf__wordmark {
  color: var(--creme);
  font-size: clamp(26px, 4.4vw, 34px);
  /* letter-spacing dokłada światło po ostatniej literze — kompensacja,
     żeby logotyp stał optycznie na osi */
  margin-left: 0.22em;
}

.kopf__claim {
  font-size: var(--t-klein);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--leise-dunkel);
}

.kopf__kategorie {
  font-size: var(--t-klein);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--messing-hell);
  text-wrap: balance;
}

.kopf__titel {
  margin-top: var(--s-2);
  font-size: clamp(32px, 4.2vw + 18px, 56px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.kopf__satz {
  margin: var(--s-3) auto 0;
  max-width: 32em;
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--leise-dunkel);
  text-wrap: pretty;
}

.kopf__aktionen {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--s-4);
}

.kopf__aktionen .knopf {
  margin-top: 0;
}

/* Drugie działanie hero: link, nie przycisk. 44 px pola trafienia z paddingu. */
.kopf__zweit {
  display: inline-block;
  margin-top: var(--s-1);
  padding: 12px 0;
  color: var(--creme);
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  background: linear-gradient(var(--messing-hell), var(--messing-hell)) 0 calc(100% - 10px) / 100% 1px no-repeat;
}

.kopf__zweit::after {
  content: ' →';
}

@media (hover: hover) {
  .kopf__zweit:hover {
    color: #fff;
  }
}

@media (min-width: 560px) {
  .kopf__aktionen {
    flex-direction: row;
    justify-content: center;
    gap: var(--s-4);
  }

  .kopf__zweit {
    margin-top: 0;
  }
}

/* Mocny przycisk: hero i kontakt (ten sam wygląd, dwa różne zadania). 52 px wysokości = cel dotyku z zapasem. */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 52px;
  margin-top: var(--s-4);
  padding: 0 var(--s-4);
  border-radius: 2px;
  background: var(--creme);
  color: var(--nachtblau);
  font-size: var(--t-text);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  /* ⚠️ Tło BEZ przejścia w stanie spoczynku. Zmierzone 16.09 w WebKit: z
     `transition: background-color` przycisk startował od przezroczystego i przy
     wstrzymanym zegarze animacji (okno w tle) zostawał granat na granacie —
     jedyne CTA strony niewidoczne. Przejście tła żyje tylko w :hover. */
  transition: transform 0.1s var(--ease);
}

@media (hover: hover) {
  .knopf:hover {
    background: #fff;
    transition: background-color 0.18s var(--ease), transform 0.1s var(--ease);
  }
}

.knopf:active {
  transform: scale(0.98);
}

.knopf:focus-visible,
.landing a:focus-visible {
  outline: 2px solid var(--messing-hell);
  outline-offset: 3px;
}

.knopf__pfeil {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s var(--ease);
}

.knopf:hover .knopf__pfeil {
  transform: translateX(2px);
}

.kopf__hinweis {
  margin-top: var(--s-2);
  font-size: var(--t-klein);
  color: var(--leise-dunkel);
}

/* --- Sekcje ---------------------------------------------------- */
.abschnitt {
  padding: var(--s-8) var(--s-3);
}

.abschnitt--papier {
  background: var(--papier);
}

/* ═══ MATERIAL JAKO TLO SEKCJI (27.09) ══════════════════════════════════════
   Siedem sekcji, siedem roznych powierzchni z naszego katalogu. Krycie 0,78 —
   founder po porownaniu trzech natezen na zywej makiecie: „wersja 0,78 daje poczuc
   material". `--krycie-baza` zostaje jako jeden punkt regulacji calosci.

   UKLADY SA ROZNE (27.09, prosba foundera: „aby wszedzie nie bylo tego samego wzoru
   ulozenia"). Po pierwszym wdrozeniu piec z siedmiu sekcji mialo Kreuzverband —
   powtorzenie widac bardziej niz roznice koloru, bo oko czyta RYTM przed odcieniem.
   Teraz: Kreuzverband (anthrazit, Herbst) · Roemischer Verband (grau-schwarz) ·
   Rechteck-Halbverband (naturgrau) · Halbverband (diamantweiss, Herbst-halb) ·
   Reihenverband 4 Groessen (weiss-grau). Material i uklad zmieniaja sie niezaleznie,
   wiec nazwa pliku niesie KOLOR, a uklad jest w nim zaszyty.
   ⚠️ 0,78 to GRANICA, nie zapas: przy najjasniejszym materiale proza schodzi na
   4,55:1 przy progu 4,5:1 (zmierzone 27.09). Kazdy nowy material trzeba przeliczyc,
   a nie zalozyc, ze skoro jeden przeszedl, przejda wszystkie. */
.abschnitt--material {
  position: relative;
  isolation: isolate;
  background: var(--kopf-grund);
}

.abschnitt--material > .tlo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.abschnitt--material > .tlo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abschnitt--material > .tlo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(22, 32, 44, var(--krycie-mat));
}

/* 🔴 KRYCIE NIE MOZE BYC JEDNA LICZBA DLA WSZYSTKICH. Zmierzone 27.09 przy 0,78:
   szare materialy daja proze 4,63–5,65:1, ale ciepla Herbst tylko 4,40:1 — PONIZEJ
   progu 4,5:1. Jasne powierzchnie potrzebuja mocniejszej zaslony, zeby ten sam tekst
   pozostal czytelny. Dlatego krycie liczy sie z BAZY plus dodatek per material,
   a nie ustawia sztywno: jedna zmiana `--krycie-baza` reguluje wtedy calosc. */
.abschnitt--material { --krycie-mat: var(--krycie-baza, 0.78); }
.abschnitt--material.jasny { --krycie-mat: calc(var(--krycie-baza, 0.78) + 0.05); }

/* Sasiadujace sekcje z materialem: bez tego granica miedzy nimi znika i dwie rozne
   powierzchnie czytaja sie jak jedna, zle przycieta. */
.abschnitt--material + .abschnitt--material {
  border-top: 1px solid var(--linie);
}

/* Dwie jasne sekcje pod rząd = podwójny odstęp, który czyta się jak dziura.
   Druga z nich przejmuje oddech pierwszej. Ukryta sekcja referencji (#referenz)
   nadal jest rodzeństwem w DOM, stąd drugi wariant selektora. */
/* ⚠️ Pierwszy człon wyklucza [hidden]: ukryta referencja ma tło Creme i bez tego
   zdejmowała górny odstęp sekcji „Stand heute" (zmierzone 16.09 na zrzucie 1280). */
.abschnitt:not(.abschnitt--papier):not([hidden]) + .abschnitt:not(.abschnitt--papier),
.abschnitt:not(.abschnitt--papier):not([hidden]) + [hidden] + .abschnitt:not(.abschnitt--papier) {
  padding-top: 0 !important;
}

.raster {
  max-width: var(--breite);
  margin: 0 auto;
}

/* Etykieta sekcji: Cinzel + krótka linia mosiężna pod spodem — ten sam gest co na karcie. */
.marke {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: var(--t-klein);
  letter-spacing: 0.16em;
  line-height: 1.3;
  color: var(--tinte);
}

.marke::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  margin-top: var(--s-2);
  background: var(--messing);
}

.marke--hell {
  color: var(--creme);
}

.aussage {
  margin-top: var(--s-4);
  max-width: 24em;
  font-size: var(--t-titel);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.landing .text {
  max-width: 34em;
  color: var(--leise);
}

/* Zdanie o barwie: świadomie CISZEJ niż główny wywód. Mówimy wprost, że o kolorze
   rozstrzyga Musterstein — to zdejmuje z nas zarzut „na ekranie kolor i tak kłamie”,
   zanim padnie, i zgadza się z tym, co stoi w stopce dokumentu „Ihre Vorauswahl”. */
.text--leise{opacity:.82;font-style:italic}

.aussage + .text {
  margin-top: var(--s-2);
  font-size: var(--t-lead);
}

/* Kolejny akapit tego samego wywodu: odstęp pół kroku mniejszy niż między blokami. */
.landing .text + .text,
.stand-liste + .text {
  margin-top: var(--s-2);
}

/* Krótka sekcja „zdanie | wyjaśnienie" (Nachfrage, Gepflegt): na telefonie jedno
   pod drugim, od 960 px obok siebie — inaczej prawa połowa ekranu stoi pusta. */
.satz__text {
  margin-top: var(--s-2);
}

.satz__text .text:first-child {
  font-size: var(--t-lead);
}

/* --- Szkic skali 3 : 40 --------------------------------------- */
/* --- Wege: co dziś pokazuje ułożoną powierzchnię i GDZIE ------
   Zastąpiło szkic skali 3 m² : 40 m² (22.09). Tamta figura rysowała do skali
   liczbę, która nie miała źródła, i stawiała nas w sporze o WIELKOŚĆ cudzego
   Musterparku. Ta lista nie porównuje wielkości — porównuje MIEJSCE, i dlatego
   działa niezależnie od tego, jak duży jest park u czytelnika.
   Musterpark stoi tu jako mocna pozycja (jako jedyny obok palety pokazuje
   ułożoną powierzchnię) — to jest świadome: nie jest naszym konkurentem. */
.wege {
  margin-top: var(--s-6);
}

.wege__titel {
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--leise);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--raster);
}

.wege__liste {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.wege__zeile {
  display: grid;
  /* Nazwa kanału ma stałą kolumnę — oko skacze po niej pionowo, a opisy
     różnią się długością i nie mogą jej rozpychać. */
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--raster);
}

.wege__zeile dt {
  font-weight: 600;
  color: var(--tinte);
  font-size: var(--t-klein);
}

.wege__zeile dd {
  margin: 0;
  color: var(--leise);
  font-size: var(--t-klein);
  line-height: 1.5;
}

/* Nasz wiersz — wyróżniony pozycją i wagą, nie kolorem tła:
   marka jest daną klienta (white-label), więc znaczenie niesie
   kontrast i lewa krawędź, nie barwa. */
.wege__zeile--wir {
  border-bottom: none;
  border-left: 2px solid var(--messing);
  padding-left: var(--s-3);
  margin-left: calc(-1 * var(--s-3) - 2px);
}

.wege__zeile--wir dt,
.wege__zeile--wir dd {
  color: var(--tinte);
}

.wege__zeile--wir dd {
  font-weight: 500;
}

@media (max-width: 40rem) {
  .wege__zeile {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* --- Karty listy (Ihre Materialien) --------------------------- */
.nutzen__titel {
  margin-top: var(--s-1);
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.nutzen__punkt .text {
  margin-top: var(--s-1);
}

/* --- Korzyści -------------------------------------------------- */
.nutzen {
  list-style: none;
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-6);
}

.nutzen__punkt {
  padding-left: var(--s-3);
  border-left: 1px solid var(--messing);
}

.nutzen__titel {
  margin-top: 0;
}

/* --- Film (sekcja #aufnahme i podstrona /film/) -----------------
   Nagranie: pion 590 × 1280, 35 s. Odtwarzanie tylko na kliknięcie.
   Przycisk pokrywa CAŁY kadr — trafienie gdziekolwiek w plakat startuje film. */
.raster--film .film {
  margin-top: var(--s-4);
}

.aufnahme__text {
  margin-top: var(--s-4);
}

.aufnahme__text .text {
  font-size: var(--t-lead);
}

.film {
  width: min(100%, 280px);
  margin-inline: auto;
}

.film__rahmen {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  /* Wartości zapasowe: film stoi też na /app/, gdzie nie ma klasy .landing (i jej tokenów). */
  background: var(--buehne, var(--nachtblau));
  box-shadow: var(--schatten-film, 0 1px 2px rgba(30, 42, 58, 0.12), 0 12px 32px rgba(30, 42, 58, 0.16));
}

.film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 590 / 1280;
  object-fit: cover;
  background: var(--buehne, var(--nachtblau));
}

.film__start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 0;
  cursor: pointer;
  color: var(--creme);
  font: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(30, 42, 58, 0.5), rgba(30, 42, 58, 0.1) 60%);
}

.film__start[hidden] {
  display: none;
}

.film__kreis {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--creme);
  color: var(--nachtblau);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  transition: transform 0.1s var(--ease);
}

.film__kreis svg {
  width: 28px;
  height: 28px;
  /* trójkąt ma środek ciężkości na lewo od środka pola — przesunięcie optyczne */
  margin-left: 3px;
  fill: currentColor;
}

.film__start:active .film__kreis {
  transform: scale(0.97);
}

.film__start:focus-visible {
  outline: none;
}

.film__start:focus-visible .film__kreis {
  outline: 2px solid var(--messing-hell);
  outline-offset: 4px;
}

.film__etikett {
  padding: 4px var(--s-1);
  border-radius: 2px;
  background: rgba(30, 42, 58, 0.72);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.film__dauer {
  margin-left: 4px;
  font-weight: 400;
  font-feature-settings: 'tnum';
  color: var(--leise-dunkel);
}

/* Wyjście po filmie: cichy link, nie drugi przycisk. */
.weiter {
  margin-top: var(--s-3);
}

.weiter__link {
  display: inline-block;
  padding: 12px 0;
  color: var(--messing-text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--akzent-unterstrich);
  line-height: 1.2;
}

.weiter__link::after {
  content: ' →';
}

.weiter__link:hover {
  color: var(--tinte);
  border-bottom-color: var(--tinte);
}

/* --- Bemusterung in drei Schritten (od v4; wcześniej „Das System") ----
   Metafora z samej branży: nawierzchnia stoi na podbudowie. Kolumny = kroki procesu,
   ciemna podstawa = katalog i wygląd marki. Łączniki mosiężne 1 px niosą relację
   „stoi na", więc podstawa jest pełnej szerokości i pod OBOMA kolumnami. */
.system {
  margin-top: var(--s-6);
}

.system__saeulen {
  list-style: none;
  display: grid;
  gap: var(--s-2);
}

.system__nr {
  display: inline-block;
  min-width: 1.4em;
  /* cyfra z Intera: jedynka Cinzela czyta się jak „I" */
  font-family: var(--sans);
  font-size: var(--t-klein);
  letter-spacing: 0;
  font-feature-settings: 'tnum';
  color: var(--tinte);
}

/* HIERARCHIA KROKOW (26.09): rozstrzygniecie foundera — apka jest flagowym komponentem
   systemu, web jest wstepem. Roznice niesie JEDEN sygnal z tej rodziny: WYPELNIENIE.
   Obwodka zostaje przy kazdym kroku, wiec struktura „trzy kroki" jest nadal czytelna,
   ale tylko krok na gruncie ma cialo. Obwodka, wypelnienie, promien i cien to cztery
   rozne sygnaly „osobny obiekt" — wydane na wszystko naraz splaszczaja hierarchie.
   Hierarchia jest POKAZANA, nie wypowiedziana: slowo „flagowy" na stronie cofaloby
   czytelnika do narracji AR, ktora doktryna D zdegradowala.
   ⚠️ Samo wypelnienie bylo ZA SLABE (#1e2a3a vs #253347 ledwo widoczne) — dopiero
   odnosnik `.system__mehr` ustawil oko. Slaby sygnal potrzebuje partnera INNEGO
   rodzaju, a nie mocniejszej wersji siebie. */
.system__saeule {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-3);
  border: 1px solid var(--linie);
  border-radius: 2px;
}

.system__saeule--kern {
  background: var(--papier);
}

/* Rdzen jako jedyny ma DOKAD prowadzic — hierarchia przez funkcje, nie tylko przez
   wypelnienie. Przy okazji naprawia sierote: do 26.09 `/app/` z czterema klipami
   dowodowymi NIE BYLA osiagalna ani z landingu, ani z /film/ — zero odnoszen,
   wylacznie adres bezposredni (landing linkowal 5x do /film/ i ani razu do /app/).
   Podstrona o flagowym komponencie byla nawigacyjnie niewidoczna.
   ⚠️ ADRESAT: `/app/` jest pisana do KLIENTA KONCOWEGO („Der QR-Code auf Ihrer Website
   fuhrt Ihren Endkunden…"), nie do producenta. Dlatego etykieta odnosnika brzmi
   „Was Ihr Kunde sieht", a nie „Was die App kann" — zapowiedz musi odpowiadac temu,
   co czytelnik zastanie po klikniecu, inaczej dziala jak ikona koperty przy funkcji,
   ktorej juz nie ma.
   Pole trafienia >= 44 px tak samo jak w `.stand-liste__link`. */
.system__mehr {
  align-self: flex-start;
  margin-top: var(--s-2);
  color: var(--messing-text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--akzent-unterstrich);
  padding: 13px 0 3px;
}

.system__mehr::after {
  content: ' \2192';
}

@media (hover: hover) {
  .system__mehr:hover {
    color: var(--tinte);
    border-bottom-color: currentColor;
  }
}

.system__saeule::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: var(--s-4);
  margin-top: 1px;
  background: var(--messing);
}

/* Na wąskim ekranie kolumny stoją jedna pod drugą — łącznik ma tylko ostatnia,
   inaczej kreska wbiegałaby w kartę poniżej. */
.system__saeule:not(:last-child)::after {
  display: none;
}

.system__ort {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  line-height: 1.3;
  color: var(--messing-text);
}

.system__titel {
  margin-top: var(--s-1);
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.system__saeule .text {
  margin-top: var(--s-1);
  margin-bottom: var(--s-3);
}

.system__rolle {
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--linie);
  font-size: var(--t-klein);
  font-weight: 500;
  color: var(--leise);
}



.system__basis {
  margin-top: calc(var(--s-4) + 2px);
  padding: var(--s-4) var(--s-3);
  background: var(--buehne);
  color: var(--creme);
  border-radius: 2px;
}

.system__basis-marke {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  line-height: 1.3;
  color: var(--messing-hell);
}

.system__basis-teile {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.system__teil + .system__teil {
  padding-top: var(--s-3);
  border-top: 1px solid rgba(236, 231, 216, 0.16);
}

.system__teil-titel {
  font-size: var(--t-titel);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.system__teil p {
  margin-top: var(--s-1);
  max-width: 34em;
  color: var(--leise-dunkel);
}

/* --- Pomocnicze ------------------------------------------------ */
.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Verlegt, nicht eingeblendet: rysunek docięcia ---------------
   Dwa panele ZAWSZE obok siebie, także na 320 px — sens rysunku to porównanie,
   a porównanie jeden pod drugim wymaga pamięci zamiast spojrzenia. */
.kante {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

.kante__bild svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 2px;
}

.kante__wand {
  fill: var(--tinte);
}

.kante__umriss {
  fill: none;
  stroke: var(--tinte);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* Obrys, którego wzór nie respektuje — kreskowany, bo to tylko ślad krawędzi. */
.kante__umriss--offen {
  stroke-dasharray: 4 3;
}

.kante__bild figcaption {
  margin-top: var(--s-1);
  font-size: var(--t-klein);
  line-height: 1.4;
  color: var(--leise);
}

.kante__bild figcaption strong {
  display: block;
  font-weight: 600;
  color: var(--tinte);
}

/* --- Porównanie z kategoriami (tabela) --------------------------
   Wąski ekran: każdy wiersz = nazwa cechy nad trzema komórkami, nazwa kolumny
   z `data-spalte` nad wartością. Od 600 px zwykła tabela. */
.gegenueber {
  width: 100%;
  margin-top: var(--s-6);
  border-collapse: collapse;
  font-size: var(--t-klein);
  line-height: 1.4;
}

.gegenueber,
.gegenueber thead,
.gegenueber tbody {
  display: block;
}

.gegenueber thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gegenueber tr {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--s-2);
  row-gap: var(--s-1);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--linie);
}

.gegenueber tbody tr:last-child {
  border-bottom: 1px solid var(--linie);
}

.gegenueber tbody th {
  grid-column: 1 / -1;
  text-align: left;
  font-size: var(--t-text);
  font-weight: 600;
  line-height: 1.35;
}

.gegenueber td {
  display: block;
  font-weight: 500;
  color: var(--tinte);
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}

.gegenueber td::before {
  content: attr(data-spalte);
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--leise);
}

.gegenueber td.gegenueber__nein {
  font-weight: 400;
  color: var(--leise);
}

/* Kolumna PROB-AR: ten sam ton tła w każdym wierszu = czytelna kolumna,
   bez ikon i bez koloru jako jedynego nośnika znaczenia. */
.gegenueber td.gegenueber__wir {
  margin: -4px 0;
  padding: 4px var(--s-1);
  border-radius: 2px;
  background: var(--wir-grund);
  font-weight: 600;
}

.gegenueber__fazit {
  margin-top: var(--s-3);
}

@media (min-width: 600px) {
  .gegenueber {
    display: table;
    table-layout: fixed;
    font-size: 16px;
  }

  .gegenueber thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .gegenueber tbody {
    display: table-row-group;
  }

  .gegenueber tr {
    display: table-row;
    padding: 0;
  }

  .gegenueber tbody tr:last-child {
    border-bottom: 0;
  }

  .gegenueber th,
  .gegenueber td,
  .gegenueber tbody th {
    display: table-cell;
    padding: 14px var(--s-2);
    border-bottom: 1px solid var(--linie);
    text-align: left;
    vertical-align: top;
  }

  .gegenueber tbody th {
    width: 34%;
    padding-left: 0;
    font-size: 16px;
  }

  .gegenueber thead th {
    padding-top: var(--s-2);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tinte);
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    vertical-align: bottom;
  }

  .gegenueber__ecke {
    width: 34%;
    border-bottom: 1px solid var(--tinte) !important;
  }

  .gegenueber td::before {
    content: none;
  }

  /* Pełna para selektorów z wersji wąskiej — inaczej jej padding 4 px wygrywa
     specyficznością i kolumna PROB-AR stoi wyżej niż sąsiednie (zrzut 17.09). */
  .gegenueber td.gegenueber__wir {
    margin: 0;
    padding: 14px var(--s-2);
    border-radius: 0;
  }

  .gegenueber .gegenueber__wir {
    background: var(--wir-grund);
  }

  /* Granat, nie mosiądz: --messing-text na odcieniu kolumny ma 4,39 (< AA przy 13 px),
     policzone po zmieszaniu tła 17.09. Kolumnę wyróżnia tło i kreska, nie kolor liter. */
  .gegenueber thead .gegenueber__wir {
    color: var(--tinte);
    box-shadow: inset 0 2px 0 var(--messing);
  }
}

/* --- Was bei Ihnen ankommt: wycinek dokumentu -------------------
   Układ i szare tony z dokumentu „Ihre Vorauswahl" (PDF z apki), nie z palety strony:
   to ma czytać się jak przedmiot — kartka, którą producent dostaje do ręki.
   Kontrasty na bieli: --b-leise 4,93 · --b-marke 5,96 · etykieta pomiaru 9,1. */
.beleg {
  --b-tinte: #1f2733;
  --b-leise: #6b7078;
  --b-marke: #5f646c;
  --b-linie: #e3e5e8;
  --b-papier: #fff;
  --b-schatten: 0 1px 2px rgba(30, 42, 58, 0.08), 0 12px 32px rgba(30, 42, 58, 0.1);
  margin-top: var(--s-6);
}

.beleg__blatt {
  padding: var(--s-3);
  background: var(--b-papier);
  color: var(--b-tinte);
  border-radius: 4px;
  box-shadow: var(--b-schatten);
  font-size: var(--t-klein);
  line-height: 1.4;
}

.beleg__marke {
  padding-bottom: var(--s-1);
  border-bottom: 2px solid var(--b-tinte);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b-marke);
}

.beleg__marke--kontakt {
  margin-top: var(--s-3);
  border-bottom-width: 1px;
}

.beleg__position {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-areas:
    'nr kopf'
    '.  mass'
    '.  felder';
  column-gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) 0 var(--s-3);
  border-bottom: 1px solid var(--b-linie);
}

.beleg__nr {
  grid-area: nr;
  align-self: start;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--b-leise);
}

.beleg__kopf {
  grid-area: kopf;
}

.beleg__name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.beleg__nutzung {
  display: inline-block;
  margin-top: var(--s-1);
  padding: 2px var(--s-1);
  border: 1px solid #c9ccd1;
  border-radius: 999px;
  font-size: 12px;
  color: #3d434b;
}

/* Ilość i źródło pomiaru w jednym wierszu, dopóki się mieszczą; gdy nie — źródło
   schodzi pod liczbę. Zawijanie z treści (flex-wrap), nie z progu szerokości:
   przy siatce z kolumną `auto` plakietka zabierała całe miejsce, a liczba dostawała
   0 px i wystawała poza kartkę (poziome przewijanie strony poniżej 320 px, 06.10). */
.beleg__mass {
  grid-area: mass;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-2);
  margin-top: var(--s-2);
}

.beleg__menge {
  font-size: var(--t-klein);
  font-weight: 600;
  white-space: nowrap;
}

.beleg__zahl {
  font-size: 28px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}

.beleg__quelle {
  padding: 2px var(--s-1);
  border-radius: 4px;
  background: #eef0e6;
  font-size: 12px;
  font-weight: 500;
  color: #3f4a2e;
  white-space: nowrap;
}

.beleg__felder,
.beleg__kontakt {
  display: grid;
  row-gap: 6px;
}

.beleg__felder {
  grid-area: felder;
  margin-top: var(--s-2);
}

.beleg__kontakt {
  margin-top: var(--s-2);
}

/* Etykieta i wartość obok siebie, a gdy wartość nie mieści swojego najdłuższego
   słowa („Reihenverband”) — wartość schodzi pod etykietę. Kolumna etykiety ma
   szerokość jak dawna siatka (8,5 × 14 px kartki). */
.beleg__felder div,
.beleg__kontakt div {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-1);
  row-gap: 2px;
  align-items: baseline;
}

.beleg__felder dt,
.beleg__kontakt dt {
  flex: 0 0 calc(var(--t-klein) * 8.5);
}

.beleg__felder dd,
.beleg__kontakt dd {
  flex: 1 1 0%;
  min-width: min-content;
}

.beleg dt {
  font-size: 13px;
  color: var(--b-leise);
}

.beleg dd {
  font-weight: 600;
}

/* Dane kontaktowe są zasłonięte, nie zmyślone: pokazujemy rubryki, nie osobę. */
.beleg__balken {
  display: inline-block;
  width: 7em;
  max-width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--b-linie);
  vertical-align: middle;
}

.beleg__balken--lang {
  width: 10em;
}

.beleg__balken--kurz {
  width: 4.5em;
}

.beleg__unterschrift {
  margin-top: var(--s-2);
  font-size: var(--t-klein);
  line-height: 1.45;
  color: var(--leise);
}

/* --- Referencja (ukryta do pierwszego klienta) ------------------ */
.stimme {
  max-width: 40em;
}

.stimme__zitat p {
  font-size: var(--t-titel);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.stimme__zitat p::before {
  content: '„';
}

.stimme__zitat p::after {
  content: '“';
}

.stimme__quelle {
  margin-top: var(--s-2);
  font-size: var(--t-klein);
  color: var(--leise);
}

.stimme__name {
  display: block;
  font-weight: 600;
  color: var(--tinte);
}

/* --- Podstrona /film/ („kino") ----------------------------------
   ⚠️ Stopka: selektory z `.landing.kino`, bo reguły `.landing .fuss` stoją niżej
   w pliku — przy równej specyficzności wygrywały i dawały szary #56554C na granacie
   (kontrast ~2:1; złapane na zrzucie 16.09, NIE w tabeli kontrastów).
   Cała strona ciemna: film jest bohaterem, jasne tło obok ciemnego kadru
   odciągałoby oko. Działa samodzielnie — nic tu nie zależy od strony głównej. */
body.kino {
  background: var(--nachtblau);
  color: var(--creme);
}

.kino__kopf {
  padding: var(--s-3) var(--s-3) 0;
  text-align: center;
}

.landing .kino__wordmark {
  display: inline-block;
  padding: var(--s-1) 0;
  margin-left: 0.22em;
  font-size: 17px;
  color: var(--creme);
  text-decoration: none;
}

.kino__buehne {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--s-3) var(--s-3) var(--s-8);
}

.kino__satz {
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-align: center;
  text-wrap: balance;
}

/* Film ma się zmieścić w oknie telefonu w całości: szerokość wynika z wysokości okna. */
/* Wariant na stronie po skanie kodu QR (/app/): tam ukladem rzadzi `.rechtstext`,
   wiec film dostaje wlasny odstep i te sama szerokosc co blok tekstu. */
.film--app {
  width: min(100%, 300px);
  margin: var(--s-4) auto;
}

.film--app figcaption {
  margin-top: var(--s-1);
  text-align: center;
}

/* Lista możliwości na /app/ (przeniesiona z <style> strony 17.09): odstępy z siatki 8 pt. */
.rechtstext .moeglichkeiten {
  margin: 0 0 var(--s-2);
  padding-left: 20px;
}

.rechtstext .moeglichkeiten li {
  margin-bottom: var(--s-1);
  line-height: 1.5;
}

.film--kino {
  margin-top: var(--s-4);
  width: min(100%, 320px, calc(68vh * 590 / 1280));
  width: min(100%, 320px, calc(68svh * 590 / 1280));
}

.kino .film__rahmen {
  box-shadow: 0 0 0 1px rgba(236, 231, 216, 0.14);
}

.kino__punkte {
  margin-top: var(--s-6);
}

.kino__liste {
  list-style: none;
  margin-top: var(--s-3);
}

.kino__liste li {
  padding: var(--s-2) 0;
  border-top: 1px solid rgba(236, 231, 216, 0.14);
}

.kino__liste strong,
.kino__liste span {
  display: block;
}

.kino__liste strong {
  font-weight: 600;
}

.kino__liste span {
  color: var(--leise-dunkel);
}

.kino__hinweis {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(236, 231, 216, 0.14);
  font-size: var(--t-klein);
  color: var(--leise-dunkel);
}

.kino__weiter {
  margin-top: var(--s-6);
  text-align: center;
}

.kino__weiter .knopf {
  margin-top: 0;
}

.landing.kino .fuss,
.landing.kino .fuss a {
  color: var(--leise-dunkel);
}

.landing.kino .fuss a:hover,
.landing.kino .fuss a:focus-visible {
  color: var(--creme);
  border-bottom-color: rgba(236, 231, 216, 0.4);
}

.landing.kino .fuss__trenner {
  color: rgba(236, 231, 216, 0.3);
}

/* --- /film/: dane filmu, rozdziały, transkrypt (24.09) ---------
   Po co rozdziały: film ma 5:06 i przychodzi mailem do przesłania dalej.
   Odbiorca musi wiedzieć, na co patrzy, ZANIM kliknie, i móc wrócić do jednego
   miejsca. Lista jest jednocześnie dowodem — w każdym wierszu stoi obraz produktu,
   więc strona pokazuje materiał także komuś, kto filmu nie odtworzy.
   Kontrasty na granacie policzone: creme 11,74:1 · leise-dunkel 6,95:1 ·
   messing-hell 6,12:1 (wszystkie ≥ 4,5:1 WCAG 2.2 AA). ⛔ `--messing` ma tu 3,07:1
   i NIE wolno go użyć na tekst. */
.kino__meta {
  margin-top: var(--s-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1);
  font-size: var(--t-klein);
  color: var(--leise-dunkel);
  font-variant-numeric: tabular-nums;
}

/* Separator należy do części, PRZED którą stoi — dzięki temu po zawinięciu
   wędruje razem z nią do nowego wiersza i nigdy nie zostaje sam na końcu. */
.kino__meta-teil {
  white-space: nowrap;
}

.kino__meta-teil + .kino__meta-teil::before {
  content: '·';
  margin-right: var(--s-1);
  color: rgba(236, 231, 216, 0.35);
}

/* `.aussage` nie deklaruje koloru, więc na tej stronie dziedziczy `--creme`
   po `body.kino` — sprawdzone w renderze, nie założone. Zostawiona pusta klasa
   byłaby ozdobą; gdyby `.aussage` kiedyś dostała własny kolor, TU trzeba dopisać
   nadpisanie, tak jak `.marke--hell` obok. */

.kapitel {
  margin-top: var(--s-6);
}

.kapitel__hinweis {
  margin-top: var(--s-2);
  font-size: var(--t-klein);
  color: var(--leise-dunkel);
}

.kapitel__liste {
  list-style: none;
  margin-top: var(--s-3);
}

/* Cały wiersz jest celem kliknięcia — miniatura i tekst prowadzą w to samo miejsce,
   więc dzielenie ich na dwa cele tylko mnożyłoby przystanki klawiatury. */
.kapitel__eintrag {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-2);
  align-items: start;
  width: 100%;
  /* Ujemny margines poziomy: tło stanu :hover oddycha poza kolumnę tekstu,
     a sam tekst zostaje w jednej linii pionowej z resztą strony. */
  padding: var(--s-2) var(--s-1);
  margin-inline: calc(var(--s-1) * -1);
  border: 0;
  border-top: 1px solid rgba(236, 231, 216, 0.14);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}

.kapitel__liste li:last-child .kapitel__eintrag {
  border-bottom: 1px solid rgba(236, 231, 216, 0.14);
}

.kapitel__eintrag:hover {
  background-color: rgba(236, 231, 216, 0.05);
}

.kapitel__eintrag:focus-visible {
  outline: 2px solid var(--messing-hell);
  outline-offset: 2px;
}

/* Promień mniejszy niż 16 px ramki filmu: miniatura jest obiektem podrzędnym
   wobec odtwarzacza i ma to być widać bez czytania. */
.kapitel__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(236, 231, 216, 0.12);
}

.kapitel__zeit {
  display: block;
  font-size: var(--t-klein);
  line-height: 1.2;
  color: var(--messing-hell);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* 4 px to odstęp WEWNĄTRZ bloku tekstu (pół kroku siatki), nie rytm układu —
   rytm sekcji dalej idzie wyłącznie z tokenów --s-*. */
.kapitel__titel {
  display: block;
  margin-top: 4px;
  font-size: var(--t-text);
  font-weight: 600;
  line-height: 1.3;
  color: var(--creme);
}

.kapitel__zeile {
  display: block;
  margin-top: 4px;
  font-size: var(--t-klein);
  line-height: 1.5;
  color: var(--leise-dunkel);
}

.kino__einordnung {
  margin-top: var(--s-6);
}

.kino__einordnung .kino__absatz:first-of-type {
  margin-top: var(--s-3);
}

.kino__absatz {
  margin-top: var(--s-2);
  font-size: var(--t-text);
  line-height: 1.6;
  color: var(--creme);
}

/* Teza stoi MIĘDZY akapitami, nie otwiera sekcji jak na stronie głównej.
   Przy odziedziczonym `.aussage + .text` (16 px) miała 32 px nad sobą i 16 px pod —
   przez co czytała się jako nagłówek kolejnego akapitu, a nie jako zdanie osobne.
   Równe światło z obu stron: zdanie jest samodzielne, a to, co po nim, to inny wątek. */
.kino__einordnung .aussage + .kino__absatz {
  margin-top: var(--s-4);
}

/* Transkrypt: dla kogoś, kto dostanie ten link przesłany dalej i ma dwie minuty
   na czytanie zamiast pięciu na oglądanie. Zwinięty, żeby nie konkurował z filmem. */
.transkript {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(236, 231, 216, 0.14);
}

.transkript__schalter {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-klein);
  color: var(--leise-dunkel);
  cursor: pointer;
  list-style: none;
}

.transkript__schalter::-webkit-details-marker {
  display: none;
}

.transkript__schalter::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--messing-hell);
  border-bottom: 1.5px solid var(--messing-hell);
  transform: rotate(-45deg);
  transition: transform 160ms var(--ease);
}

.transkript[open] .transkript__schalter::before {
  transform: rotate(45deg);
}

.transkript__schalter:hover {
  color: var(--creme);
}

.transkript__schalter:focus-visible {
  outline: 2px solid var(--messing-hell);
  outline-offset: 3px;
}

.transkript__inhalt {
  margin-top: var(--s-3);
}

.transkript__block {
  margin-top: var(--s-2);
  font-size: var(--t-text);
  line-height: 1.6;
  color: var(--leise-dunkel);
}

.transkript__zeit {
  margin-right: var(--s-1);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t-klein);
  color: var(--messing-hell);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.transkript__zeit:hover {
  text-decoration: underline;
}

.transkript__zeit:focus-visible {
  outline: 2px solid var(--messing-hell);
  outline-offset: 2px;
}

/* Telefon jest pierwszy: przy ~375 px miniatura 96 px zjadałaby kolumnę tekstu
   i tytuły łamałyby się po dwóch słowach. */
@media (max-width: 400px) {
  .kapitel__eintrag {
    grid-template-columns: 76px 1fr;
  }
}

/* --- Stan ------------------------------------------------------ */
.stand-liste {
  list-style: none;
  margin-top: var(--s-4);
  max-width: 34em;
}

.stand-liste__zeile {
  /* znak | nazwa (nad) + stan (pod) | link — nic nie spada do osobnej linii na 360 px */
  display: grid;
  grid-template-columns: 8px 1fr auto;
  grid-template-areas:
    'zeichen was link'
    '.       status link';
  column-gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--linie);
}

.stand-liste__zeile:first-child {
  border-top: 1px solid var(--linie);
}

/* Znak stanu jest tylko wzmocnieniem — stan niesie SŁOWO obok, nie kolor. */
.stand-liste__zeichen {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--zeichen);
  grid-area: zeichen;
}

.stand-liste__zeichen--live {
  background: var(--zeichen);
}

.stand-liste__was {
  grid-area: was;
  font-weight: 600;
  line-height: 1.4;
}

.stand-liste__status {
  grid-area: status;
  color: var(--leise);
  line-height: 1.4;
}

.stand-liste__link {
  grid-area: link;
  align-self: center;
  color: var(--messing-text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--akzent-unterstrich);
  /* pole trafienia ≥ 44 px bez zmiany wyglądu wiersza (zmierzone 17.09: było 42) */
  padding: 13px 0 3px;
  margin: -13px 0 0;
}

.stand-liste__link::after {
  content: ' →';
}

.stand-liste__link:hover {
  color: var(--tinte);
  border-bottom-color: var(--tinte);
}

/* --- Zamknięcie: kontakt --------------------------------------- */
.abschluss {
  background: var(--buehne);
  color: var(--creme);
  padding: var(--s-8) var(--s-3);
}

.abschluss .marke::after {
  background: var(--messing);
}

.abschluss__satz {
  margin-top: var(--s-4);
  font-size: var(--t-lead);
  color: var(--creme);
}

.knopf--abschluss {
  margin-top: var(--s-4);
}

.abschluss__mail {
  margin-top: var(--s-2);
  color: var(--leise-dunkel);
}

.abschluss__mail a {
  display: inline-block;
  /* 12 px, nie 8: przy 8 pole trafienia miało 37 px (pomiar 17.09).
     Kreska rysowana tłem, żeby została tuż pod literami, a nie na dole pola. */
  padding: 12px 0;
  color: var(--creme);
  text-decoration: none;
  background: linear-gradient(var(--messing), var(--messing)) 0 calc(100% - 9px) / 100% 1px no-repeat;
  line-height: 1.2;
}

.abschluss__mail a:hover {
  color: #fff;
  background-image: linear-gradient(var(--messing-hell), var(--messing-hell));
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

/* Stopka na stronie głównej: ciemniejszy szary, bo #6B6A5F na Creme ma 4,41 (< AA). */
.landing .fuss {
  padding: var(--s-3) var(--s-3) var(--s-4);
  font-size: var(--t-klein);
}

.landing .fuss,
.landing .fuss a {
  color: var(--leise);
}

.landing .fuss a {
  display: inline-block;
  padding: var(--s-1) 0;
}

/* --- Szerszy ekran --------------------------------------------- */
@media (min-width: 720px) {
  .kopf {
    padding: 136px var(--s-4) var(--s-12);
  }

  .abschnitt,
  .abschluss {
    padding: var(--s-12) var(--s-4);
  }

  .nutzen {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }

  .raster--film {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      '.     film'
      'kopf  film'
      'text  film'
      '.     film';
    column-gap: var(--s-8);
  }

  .aufnahme__kopf {
    grid-area: kopf;
  }

  .aufnahme__text {
    grid-area: text;
  }

  .raster--film .film {
    grid-area: film;
    margin-top: 0;
    width: min(100%, 300px);
  }

  .system__saeule {
    padding: var(--s-4);
  }

  .system__basis {
    padding: var(--s-4);
  }

  .system__basis-teile {
    /* Od v4 dwa filary podstawy (katalog · auftritt); `auto-fit` nie wywróci się,
       gdy kiedyś dojdzie trzeci. */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--s-4);
  }

  .system__teil + .system__teil {
    padding-top: 0;
    border-top: 0;
  }
}

/* Druga kolumna obok tekstu dopiero od 960 px. Próg pochodzi ze szkicu skali,
   który tu stał do 22.09 (przy 768 px para pól nie mieściła się w kolumnie).
   Lista `wege` jest elastyczna i zmieściłaby się wcześniej, ale przy 768 px
   dwie kolumny tekstu obok siebie i tak byłyby za wąskie — próg zostaje. */
@media (min-width: 960px) {
  .raster--zwei {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: var(--s-8);
    align-items: end;
  }

  .raster--zwei .wege {
    margin-top: 0;
  }

  .raster--mitte {
    align-items: center;
  }

  /* Etykieta nad obiema kolumnami, zdanie i wyjaśnienie startują z jednej linii. */
  .raster--satz {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-8);
    align-items: start;
  }

  .raster--satz .marke {
    grid-column: 1 / -1;
  }

  .raster--satz .satz__text {
    margin-top: var(--s-4);
    padding-top: 6px;
  }

  .raster--oben {
    align-items: start;
  }

  .raster--zwei .kante,
  .raster--zwei .beleg {
    margin-top: 0;
  }

  /* Trzy kroki obok siebie dopiero tu: przy 720 px karta miałaby ~190 px
     i tekst kroku 2 łamałby się na 9 linii. Łącznik ma wtedy KAŻDA kolumna. */
  .system__saeulen--drei {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
  }

  .system__saeulen--drei .system__saeule:not(:last-child)::after {
    display: block;
  }
}

@media (max-width: 480px) {
  .landing {
    font-size: var(--t-text);
  }

  /* Link pod stanem, nie obok: przy 360 px kolumna stanu miała ~110 px
     i „einsatzbereit für Vorführungen" łamało się na trzy linie. */
  .stand-liste__zeile {
    grid-template-columns: 8px 1fr;
    grid-template-areas:
      'zeichen was'
      '.       status'
      '.       link';
  }

  .stand-liste__link {
    justify-self: start;
    margin: -6px 0 0;
    padding: 14px 0 3px;
  }

  .kopf {
    padding: var(--s-8) var(--s-3) var(--s-6);
  }
}

/* Niski telefon (320 × 568): mniej powietrza nad logotypem, żeby kategoria
   i nagłówek stały w pierwszym ekranie. */
@media (max-width: 480px) and (max-height: 620px) {
  .kopf {
    padding-top: var(--s-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .knopf,
  .knopf:hover,
  .knopf__pfeil,
  .film__kreis,
  .abschluss__mail a:hover,
  .kapitel__eintrag,
  .transkript__schalter::before {
    transition: none;
  }

  .knopf:active,
  .film__start:active .film__kreis,
  .knopf:hover .knopf__pfeil {
    transform: none;
  }
}

/* ── Klipy w sekcjach (wersja dev, 25.09.2026) ─────────────────────────────
   Krótkie wycinki pełnego nagrania: po jednym przy twierdzeniu, którego
   dowodzi. Węższe od głównego odtwarzacza, bo stoją OBOK tekstu, a nie
   zamiast niego — 248 px kontra 280 px.

   `.klip__zeit` niesie znacznik czasu z odnośnikiem do całości. To jest
   OFERTA SPRAWDZENIA, nie ozdoba: zdanie „to jest wycinek" jest twierdzeniem,
   a znacznik pozwala czytelnikowi otworzyć nagranie i wylądować na tych
   samych sekundach. Cztery klipy przestają być czterema filmami i stają się
   jednym nagraniem obejrzanym cztery razy.
   ⚠️ Znaczniki są liczone w czasie nagrania NA STRONIE (1,2×), nie w czasie
   surowego materiału — inaczej odnośnik prowadziłby w złe miejsce. */
.film--klip {
  width: min(100%, 248px);
  margin: var(--s-4) auto 0;
}

.film--klip .film__rahmen {
  border-radius: 12px;
}

.klip__fuss {
  margin-top: var(--s-2);
  text-align: left;
}

.klip__zeit {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.05em;
  /* --leise, nie --gedaempft: --gedaempft jest tokenem kremowej kartki i na granacie
     strony głównej dawał 1,4–1,8 : 1 (pomiar na pikselu, 06.10). --leise przełącza się
     z data-farbe: #56554c na kremie (6,07), #b3b1a7 na granacie. */
  color: var(--leise);
}

.klip__zeit a {
  color: inherit;
  text-underline-offset: 3px;
}

/* Zdanie rozdzielające dwa komponenty na /film/ (25.09). Stoi NAD przyciskiem,
   bo przycisk czyta się szybciej niż akapit — kolejność w DOM jest tu treścią. */
.kino__teil {
  max-width: 52ch;
  margin: 0 auto var(--s-3);
  font-size: var(--t-text);
  line-height: 1.55;
}

/* Oś sekcji „Bemusterung in drei Schritten" — trzy człony w trzech wierszach.
   Układ powtarza strukturę tego, co stoi pod spodem: trzy zdania nad trzema
   kolumnami. Przy zwykłym łamaniu „Beim" zostawało na końcu wiersza, a trzeci
   człon przestawał być czytelny jako osobny krok — zmierzone na zrzucie 1440.
   Nić, która przez nie przechodzi, to `die Entscheidung`: zaczyna się, zapada
   i zostaje na piśmie. Trzy miejsca, trzy czasowniki. */
.aussage--drei span {
  display: block;
  text-wrap: balance;
}

/* ── Kadr AR w pierwszym kadrze (25.09) ──────────────────────────────────────
   Hero argumentował AR, a pokazywał wyłącznie pismo; jedyne działanie prowadziło
   do przeglądarki. Kadr z nagrania stawia flagową część przed pierwszym wyjściem.
   Ramka jak u odtwarzacza (.film__rahmen), bo to ten sam obiekt — telefon w ręku.
   Na wąskim ekranie kadr stoi POD h1 i nad akcjami: pierwszy piksel po nagłówku. */
.kopf__beleg {
  width: min(100%, 248px);
  margin: var(--s-4) auto 0;
}
.kopf__beleg-film,
.kopf__beleg img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--nachtblau);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.28);
}
.kopf__beleg figcaption {
  margin-top: var(--s-2);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--leise-dunkel);
  text-align: center;
}

/* Odwrót dla „prefers-reduced-motion": pętla schodzi, zostaje ta sama klatka.
   Ruch w pierwszym kadrze jest tu treścią (obejście powierzchni = obecność
   w scenie), ale nikomu nie jest narzucany. */
.kopf__beleg img.kopf__beleg-still { display: none; }

@media (prefers-reduced-motion: reduce) {
  .kopf__beleg-film { display: none; }
  .kopf__beleg img.kopf__beleg-still { display: block; }
}

/* ── Hero: nagłówek plakatem, pod nim dwie kolumny (25.09) ───────────────────
   `.kopf` jest celowo wyśrodkowane — hero ma się czytać jak plakat i tego nie
   ruszam. Ale gdy pod h1 stanęło nagranie, przycisk wypadł poza pierwszy ekran
   (zmierzone: CTA na 1101 px przy oknie 900). Rozwiązanie zachowuje plakat:
   wordmark, kategoria i h1 zostają na pełną szerokość, a dopiero POD nimi tekst
   z przyciskiem staje obok nagrania. Na wąskim ekranie kolumny wracają w jedną,
   nagranie pod tekstem — pierwszy piksel po nagłówku pokazuje wtedy produkt. */
.kopf__spalten {
  margin-top: var(--s-6);
}

@media (min-width: 900px) {
  /* Grid siedzi w `.kopf__inner` z `max-width: 640px` — to świadoma miara tekstu
     i jej nie ruszam. Dwie kolumny w 640 px dały 291 px na akapit, czyli łamanie
     co 25 znaków (zmierzone). Wyprowadzam grid poza rodzica wyśrodkowaniem do
     okna, zamiast podnosić limit, który chroni miarę reszty nagłówka. */
  .kopf__spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: var(--s-8);
    align-items: start;
    width: min(940px, calc(100vw - 6rem));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
  }
  .kopf__spalten .kopf__satz { margin-inline: 0; }
  .kopf__spalten .kopf__aktionen { justify-content: flex-start; }
  .kopf__beleg { margin-top: 0; }
}

/* ── Jeden głos typograficzny w pierwszym kadrze (25.09) ─────────────────────
   Zmierzone przed zmianą: wordmark Cinzel 34 px, a H1 — największy napis na
   stronie, 56 px — w Inter. Wordmark mówił „kamień, inskrypcja", H1 mówił „SaaS".
   EB Garamond leżał wczytany i nieużywany poza podstronami prawnymi.

   Po zmianie system ma trzy role i trzy kroje:
     Cinzel      — wordmark i ETYKIETY (tak jak nagłówki sekcji niżej)
     EB Garamond — treść: H1, claim, proza
     Inter       — wyłącznie DANE i elementy sterujące
   Kontrast antykwy z groteskiem jest tym, co odróżnia publikację od interfejsu. */
.kopf__titel {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.04;
}

.kopf__claim {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.01em;
}

/* Kategoria przestaje być osobnym blokiem i staje się ETYKIETĄ nad tytułem —
   tym samym językiem co „AUSGANGSLAGE" czy „IM VERGLEICH" niżej. Dzięki temu
   nie konkuruje z H1 o uwagę, tylko go zapowiada. */
.kopf__kategorie {
  font-family: 'Cinzel', 'EB Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--messing-hell);
  margin-bottom: var(--s-4);
  max-width: none;
  line-height: 1.6;
}

/* Proza hero też w antykwie — Inter zostaje dla danych i elementów sterujących.
   Rozmiar podniesiony z 19 na 21 px: EB Garamond ma niższą wysokość x niż Inter,
   więc przy tym samym kegel czyta się mniejszy. */
.kopf__satz {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 21px;
  line-height: 1.52;
}

/* Opis współpracy obu części na /film/ (25.09). Trzy pozycje, nie proza —
   czytelnik ma rozpoznać strukturę, zanim przeczyta treść. Etykiety w Cinzel,
   jak wszystkie etykiety na stronie; opisy w antykwie, jak cała proza. */
.teile {
  display: grid;
  gap: var(--s-3);
  max-width: 52ch;
  margin: var(--s-4) auto 0;
  text-align: left;
}
.teile dt {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--messing-hell);
  margin-bottom: 2px;
}
.teile dd {
  margin: 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}
.kino__achse {
  max-width: 52ch;
  margin: var(--s-4) auto var(--s-3);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 20px;
  line-height: 1.45;
  text-wrap: balance;
}

/* ── /film/ dołącza do systemu typograficznego (25.09) ───────────────────────
   Landing dostał trzy kroje w trzech rolach, a strona filmu została w Inter —
   zmierzone na produkcji: H1 Inter 19 px, proza Inter 17 px, podczas gdy
   landing miał już EB Garamond. Czytelnik z maila wchodzi prosto tutaj, więc
   rozjazd widać przy pierwszym kliknięciu.

   Ta sama zasada: antykwa niesie treść, grotesk zostaje przy danych
   (znaczniki czasu transkryptu, przyciski, drobny druk techniczny). */
.kino__satz,
.kino__absatz {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

.kino__satz {
  font-size: clamp(21px, 1.1vw + 17px, 26px);
  line-height: 1.38;
  letter-spacing: -0.004em;
}

.kino__absatz {
  font-size: 19px;
  line-height: 1.55;
}

/* Transkrypt zostaje w grotesku: to jest zapis do skanowania wzrokiem
   i wyszukiwania, a nie proza do czytania ciągiem. Znaczniki czasu tym bardziej. */

/* ══════════════════════════════════════════════════════════════════════════
   WARIANT UKŁADU — /film/ na szerokim ekranie (propozycja 01.10.2026)
   ──────────────────────────────────────────────────────────────────────────
   POWÓD: zmierzone na produkcji 30.09 — przy 1440 px treść `/film/` zajmuje
   33 % szerokości kadru. Dwie trzecie to gołe tło. Na telefonie problemu nie
   ma (87 %), więc dotyczy to dokładnie tego ekranu, przy którym siedzi
   producent.

   DECYZJA: pustkę wypełnia TREŚĆ, nie dekoracja. Rozdziały leżą dziś pod
   filmem; obok niego zamykają dziurę informacją, skracają stronę i pozwalają
   kliknąć rozdział bez przewijania.

   ⛔ Czego tu świadomie NIE MA: tekstury w tle. Kostka już jest na ekranie —
   w środku telefonu — i to ona ma sprzedawać. Druga kostka za nią to dwa
   oświetlenia i dwie skale w jednym kadrze.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  .kino__buehne {
    max-width: 1040px;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: var(--s-6);
    align-items: start;
  }
  /* 🔴 DOMYSLNIE KAZDE DZIECKO ZAJMUJE OBA LAMY I IDZIE W KOLEJNOSCI DOM.
     Bez tej reguly scena ma 10 dzieci, a `grid-template-areas` nazywalo 4 obszary:
     elementy bez przypisania wpadaly w auto-placement, a `.kino__einordnung`
     i `.kino__weiter` dostawaly TEN SAM obszar „reszta" i rysowaly sie JEDEN NA
     DRUGIM (zlapane na zrzucie od foundera 01.10, nie w kodzie).
     Ta sama klasa bledu co na `/app/` — tam naprawiona 01.10 tym samym zabiegiem. */
  .kino__buehne > * { grid-column: 1 / -1; }
  /* Zdanie wprowadzające zostaje na osi CAŁEJ sceny i dostaje własne światło
     na dole — bez tego nagłówek „Kapitel" przykleja się do jego ostatniej
     linii i czyta się jak jej ciąg dalszy (złapane na zrzucie, nie w kodzie). */
  .kino__satz {
    max-width: 30ch;
    margin-inline: auto;
    margin-bottom: var(--s-6);
  }
  /* Obie kolumny zaczynają się na tej samej wysokości — film i lista rozdziałów
     mają wyrównane górne krawędzie, więc oko ma jedną linię odniesienia. */
  .film--kino              { grid-column: 1; grid-row: 3; margin-top: 0; }
  .kino__buehne > .kapitel { grid-column: 2; grid-row: 3; margin-top: 0; padding-top: 0; }
  .kino__buehne > .kapitel > .marke:first-child { margin-top: 0; }

  /* Reszta wraca do jednej kolumny o czytelnej mierze — transkrypt to tekst
     ciągły i 1040 px dałoby ~140 znaków w wierszu. */
  .kino__einordnung,
  .kino__weiter { max-width: 62ch; margin-inline: auto; }

  /* Rozdziały stoją teraz obok filmu, więc nie potrzebują własnego nagłówka
     jako separatora pionowego — ale zostaje jako etykieta kolumny. */
  .kapitel__liste { margin-top: var(--s-2); }
}

/* ══════════════════════════════════════════════════════════════════════════
   WARIANT UKŁADU — /app/ na szerokim ekranie (propozycja 01.10.2026)
   ──────────────────────────────────────────────────────────────────────────
   Zmierzone na produkcji 30.09: przy 1440 px treść `/app/` zajmuje 43 %
   szerokości. Ten sam zabieg co na `/film/` — pustkę zamyka TREŚĆ: lista
   „Was die App kann" przenosi się obok filmu zamiast pod niego.

   ⚠️ Zaczepione o `body.app-seite`, nie o `.rechtstext` — ta klasa niesie
   TAKŻE `/datenschutz/` i `/impressum/`, a tam układ dwukolumnowy nie ma sensu
   (to teksty ciągłe). Bez tego haka jedna reguła zmieniłaby trzy strony naraz.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  .app-seite .rechtstext {
    max-width: 1040px;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: var(--s-6);
    align-items: start;
  }
  /* 🔴 Domyslnie KAZDY dzieciak zajmuje oba lamy i idzie w kolejnosci DOM.
     Bez tej reguly elementy bez jawnego przypisania wpadaja w wolne komorki
     siatki i rozsypuja strone — zmierzone na zrzucie: wordmark, H1 i akapit
     wprowadzajacy nalozyly sie na siebie w jednej komorce. */
  .app-seite .rechtstext > * { grid-column: 1 / -1; }

  /* Film i lista stoja obok siebie w TYM SAMYM wierszu. Numer wiersza musi byc
     jawny — auto-placement umiescilby liste pod filmem, czyli tam, gdzie byla. */
  .app-seite .rechtstext > .film      { grid-column: 1; grid-row: 4; margin-top: 0; }
  .app-seite .rechtstext > .app-liste { grid-column: 2; grid-row: 4; }
  .app-seite .rechtstext > .app-liste > h2:first-child { margin-top: 0; }

  /* Tekst ciagly ponizej wraca do czytelnej miary. */
  .app-seite .rechtstext > h1,
  .app-seite .rechtstext > h1 + p,
  .app-seite .rechtstext > .app-liste ~ * { max-width: 62ch; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WARIANT DO OCENY — materiał w tle `/film/` (prośba foundera 01.10.2026)
   ──────────────────────────────────────────────────────────────────────────
   Dwa podejścia, bo zastrzeżenie jest konkretne: na tej stronie kostka JUŻ JEST
   na ekranie — w środku atrapy telefonu. Druga kostka za nią to dwa oświetlenia
   i dwie skale w jednym kadrze, a mniejsza ma sprzedawać.
     · `.kino__buehne--material`      materiał pod CAŁĄ sceną, łącznie z telefonem
     · `.kino__einordnung--material`  scena z telefonem czysta, materiał dopiero pod nią
   Krycie z tego samego mechanizmu co sekcje landingu (`--krycie-mat`), żeby kontrast
   liczył się jedną regułą, a nie drugą liczbą obok.
   ══════════════════════════════════════════════════════════════════════════ */
.kino__buehne--material,
.kino__einordnung--material {
  position: relative;
  isolation: isolate;
  /* 🔴 KRYCIE POLICZONE, NIE PRZEJETE Z LANDINGU. Sekcje landingu maja CIEMNY tekst
     na JASNYM materiale i tam 0,78 jest granica. Tu jest odwrotnie — JASNY tekst na
     CIEMNYM materiale — wiec zapas lezy po drugiej stronie. Zmierzone na pikselu
     (material surowy RGB 69/81/102, antracyt):
     ⚠️ POMIAR MUSI ISC Z UKRYTYM TEKSTEM. Pierwszy rachunek robilem na sredniej
     obszaru, w ktorym LEZA LITERY — p95 wyszedl 227 (prawie biel), bo to byly piksele
     tekstu, nie tla. Z ukrytym tekstem p95 tla = RGB 74/79/90, czyli material surowy
     138/136/146. Dopiero to jest podstawa rachunku.
     Zmierzone kolory RZECZYWISTE (getComputedStyle, nie z CSS-a na oko):
       krem #ece7d8 (236,231,216) — glowny tekst
       hinweis      (179,177,167) — przypis, WASKIE GARDLO
     Kontrast na najjasniejszym tle (p95):
       0,55 -> krem 6,64:1 OK · hinweis 3,82:1  PONIZEJ 4,5
       0,65 -> krem 7,89:1 OK · hinweis 4,53:1  ledwo
       0,70 -> krem 8,55:1 OK · hinweis 4,91:1  <- WYBRANE, zapas 0,41
     ⇒ Sam krem dopuscilby nawet 0,40. Caly material zaslania JEDNO zdanie przypisu.
     Jesli chcemy mocniejsza teksture — wyjac `kino__hinweis` spod materialu, a nie
     podnosic krycie. ⚠️ Kazdy inny material przeliczyc od nowa. */
  /* 🔴 0,79 DLA WEISSGRAU, nie 0,70 jak dla antracytu (02.10.2026).
     Kalkmeliert jest ZNACZNIE jasniejszy — najjasniejszy fragment RGB 185/191/210
     kontra 128 u antracytu. Przy jasnym tekscie na tej stronie zapas lezy po stronie
     ZASLONY, nie materialu. Zmierzone na p95 tla, z ukrytym tekstem:
       0,70 -> krem 6,59:1 OK · przypis 3,79:1  PONIZEJ 4,5
       0,76 -> krem 7,71:1 OK · przypis 4,43:1  nadal ponizej
       0,79 -> krem 8,34:1 OK · przypis 4,79:1  <- WYBRANE, zapas 0,29
     ⚠️ Kazdy kolejny material przeliczyc od nowa — ta liczba nie przenosi sie. */
  --krycie-mat: 0.79;
}
.kino__buehne--material > .tlo,
.kino__einordnung--material > .tlo {
  position: absolute;
  inset-block: 0;
  z-index: -1;
  overflow: hidden;
  /* ⚠️ Scena ma `max-width: 1040px`, wiec tlo przyciete do niej konczy sie WIDOCZNA
     pionowa krawedzia (zmierzone: jasnosc 47,9 w srodku kontra 40,6 po bokach).
     Powierzchnia urwana w polowie czyta sie jak blad, nie jak material — stad
     wyjscie na pelna szerokosc okna. */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}
.kino__buehne--material > .tlo img,
.kino__einordnung--material > .tlo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kino__buehne--material > .tlo::after,
.kino__einordnung--material > .tlo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(22, 32, 44, var(--krycie-mat));
}
/* Sekcja z materiałem potrzebuje własnego oddechu i pełnej szerokości — bez tego
   tekstura dotyka pierwszej linii i czyta się jak przypadkowe tło, nie powierzchnia. */
.kino__einordnung--material {
  padding-block: var(--s-7);
  padding-inline: var(--s-5);
}

/* ══════════════════════════════════════════════════════════════════════════
   WARIANT DO OCENY — materiał NIERUCHOMY, strona przesuwa się po nim (02.10.2026)
   ──────────────────────────────────────────────────────────────────────────
   Founder pamiętał wersję, „gdzie tłem był jeden materiał i na nim się przesuwała
   strona". Takiej nie było — tło w `--material` ma `position: absolute`, więc jedzie
   razem z treścią. Tu `fixed` przykleja je do okna: kostka stoi, przesuwa się tekst.
   Efekt jest mocniejszy, bo materiał czyta się jak PODŁOŻE, a nie jak wypełnienie
   prostokąta — czyli dokładnie tak, jak leży w rzeczywistości.

   ⚠️ CENA, KTÓRĄ TRZEBA ZMIERZYĆ PRZED WDROŻENIEM: `position: fixed` z dużym obrazem
   bywa kosztowny przy przewijaniu na telefonie (Safari iOS historycznie repaintuje
   cały kadr). Do sprawdzenia na urządzeniu, nie w przeglądarce na biurku.
   ⚠️ `prefers-reduced-motion` tego NIE obejmuje — to nie jest animacja, tylko
   odniesienie pozycjonowania. Ale efekt paralaksy odczuwają podobnie te same osoby,
   więc jeśli wejdzie na stałe, warto dać wyłącznik.
   ══════════════════════════════════════════════════════════════════════════ */
.kino__buehne--przyklejone > .tlo {
  position: fixed;
  inset: 0;
  left: 0;
  width: 100vw;
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   WARIANT DO OCENY — `/app/` na JEDNYM NIERUCHOMYM TLE (02.10.2026)
   ──────────────────────────────────────────────────────────────────────────
   Founder: „to nieruchome tlo wyglada bardziej premium" — w odroznieniu od
   naprzemiennych tel, gdzie co druga sekcja ma inny material.
   Material stoi, przesuwa sie cala strona: kamien czyta sie jak PODLOZE, pod ktorym
   lezy caly dokument, a nie jak tapeta pocieta na pasy.

   ⚠️ CENA, KTORA TRZEBA OBEJRZEC: naprzemienne tla pelnily TAKZE role separatora
   sekcji. Bez nich piec krokow moze zlac sie w jedna sciane. Jesli tak wyjdzie,
   rozgraniczenie musi wrocic innym srodkiem (odstep, linia, numer kroku), a nie
   powrotem do pasow.
   ══════════════════════════════════════════════════════════════════════════ */
.app-jedno-tlo { position: relative; isolation: isolate; --krycie-mat: 0.80; }

.app-jedno-tlo > .tlo--jedno {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.app-jedno-tlo > .tlo--jedno img { width: 100%; height: 100%; object-fit: cover; }
.app-jedno-tlo > .tlo--jedno::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(22, 32, 44, var(--krycie-mat));
}
/* Sekcje przestaja niesc wlasne tlo — inaczej przykrylyby to jedno. */
.app-jedno-tlo .abschnitt,
.app-jedno-tlo .abschnitt--papier,
.app-jedno-tlo .abschnitt--material,
.app-jedno-tlo .abschluss { background: transparent; }
/* Granica miedzy sasiadujacymi sekcjami materialu byla rysowana linia tylko wtedy,
   gdy obie mialy tlo. Teraz wszystkie sa przezroczyste, wiec linia musi zniknac —
   inaczej dzieli jednolita powierzchnie bez powodu. */
.app-jedno-tlo .abschnitt--material + .abschnitt--material { border-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   WARIANT A DO OCENY — landing na JEDNYM NIERUCHOMYM TLE (03.10.2026)
   ──────────────────────────────────────────────────────────────────────────
   Zmierzone na produkcji: 11 sekcji, z tego SIEDEM z materialem, a sekcje 4–8 to
   piec materialow POD RZAD = 4 669 px = 5,2 ekranu = 54 % calej strony bez przerwy.
   To nie jest naprzemiennosc, tylko jeden dlugi blok z dwiema granatowymi wyspami.
   Po trzeciej teksturze oko przestaje je odrozniac i czyta jako „jakis kamien" —
   czyli kazda kolejna kosztuje wage strony, nie dodajac informacji.

   Ten wariant: JEDEN material pod calym dokumentem, przyklejony do okna.
   Ten sam jezyk, co wdrozone 02.10 `/app/` i `/film/` — trzy strony przestaja mowic
   trzema roznymi jezykami tla.

   ⚠️ CENA: landing ma 9,5 ekranu, trzy razy wiecej niz `/film/`. Jedno tlo przez taka
   dlugosc moze znuzyc — tego nie przewidze przy biurku, trzeba zobaczyc.
   ⚠️ Pasy pelnily TAKZE role separatora sekcji. Bez nich rozgraniczenie musi uniesc
   odstep i typografia.
   ══════════════════════════════════════════════════════════════════════════ */
.landing--jedno-tlo { position: relative; isolation: isolate; --krycie-mat: 0.79; }

.landing--jedno-tlo > .tlo--jedno {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.landing--jedno-tlo > .tlo--jedno img { width: 100%; height: 100%; object-fit: cover; }
.landing--jedno-tlo > .tlo--jedno::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(22, 32, 44, var(--krycie-mat));
}
/* Sekcje przestaja niesc wlasne tlo — inaczej przykrylyby to jedno. */
.landing--jedno-tlo .abschnitt,
.landing--jedno-tlo .abschnitt--papier,
.landing--jedno-tlo .abschnitt--material,
.landing--jedno-tlo .abschluss { background: transparent; }
.landing--jedno-tlo .abschnitt--material + .abschnitt--material { border-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   WARIANT F — JEDEN RENDER, JEDNO KRYCIE, ZERO PRZESKOKOW (03.10.2026)
   ──────────────────────────────────────────────────────────────────────────
   Founder: „to moze byc ten sam material na calosci i ten sam kadr, aby zachowac
   spojnosc, tylko naglowek musimy jakos lekko wyroznic, moze kolor czcionki albo cos.
   Tlem ma byc jeden spojny render bez zadnych przeskokow".

   Do dzis byly DWA rendery tego samego materialu (hero `hero/wg-park`, reszta
   `mat/weissgrau`) i DWA rozne traktowania (gradient boczny kontra jednolite krycie).
   Tutaj: jeden obraz, jedno krycie, zadnej warstwy nad naglowkiem.

   ⭐ KRYCIE 0,82 — POLICZONE DLA NAJOSTRZEJSZEGO WYMAGANIA, nie usrednione.
   Jedno krycie musi uniesc WSZYSTKIE kolory tekstu na stronie:
     krem  #ece7d8 (236,231,216)   9,16:1
     kicker mosiezny (196,164,104) 4,78:1   <- WASKIE GARDLO
     claim/przypis   (179,177,167) 5,26:1
   Sama tresc strony wystarczylaby przy 0,79; naglowek podnosi do 0,82. Trzy punkty
   roznicy — tyle kosztuje spojnosc i jest to cena pomijalna.

   ⛔ CZEGO TU NIE MA: gradientu nad naglowkiem. Kazdy gradient to przeskok w materiale,
   a material ma byc jeden i ciagly. Naglowek odznacza sie TYPOGRAFIA — rozmiarem H1,
   mosieznym kickerem i wlasnym swiatlem — a nie zmiana tla pod soba.
   ══════════════════════════════════════════════════════════════════════════ */
.landing--jeden-render { --krycie-mat: 0.82; }

/* 🔴 NAGLOWEK TEZ MUSI BYC PRZEZROCZYSTY (03.10.2026).
   `.kopf` niesie wlasne `background: var(--kopf-grund)` = rgb(30,42,58) — czyli
   plaski granat, ktory PRZYKRYWA material. Zmierzone przez getComputedStyle: tlo
   bylo na miejscu, `position: fixed` dzialalo, obraz zaladowany — a naglowek i tak
   wychodzil granatowy. Moja regula przezroczystosci obejmowala `.abschnitt`,
   `.abschnitt--papier`, `.abschnitt--material` i `.abschluss`, ale NIE `.kopf`.
   ⚠️ Lista elementow do wyczyszczenia musi pokrywac KAZDY pojemnik z wlasnym tlem —
   inaczej jeden z nich cicho zasloni material i wyglada to jak blad wdrozenia. */
/* ⚠️ SPECYFICZNOSC, NIE KOLEJNOSC. Pierwsza wersja tej reguly byla ostatnia w pliku
   i NIE DZIALALA: `html[data-farbe='nacht'] .kopf` (linia 341) ma (0,2,1), a
   `.landing--jeden-render .kopf` tylko (0,2,0) — atrybut plus element bija dwie klasy.
   getComputedStyle pokazywal `rgb(30,42,58)` mimo poprawnego pliku i poprawnego odcisku.
   Stad `html[data-farbe]` z przodu: (0,3,1). */
html[data-farbe] .landing--jeden-render .kopf,
html[data-farbe] .landing--jeden-render .kopf__inner,
html[data-farbe] .landing--jeden-render .fuss,
html[data-farbe] .landing--jeden-render .abschnitt,
html[data-farbe] .landing--jeden-render .abschluss { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   WARIANT G — JEDEN RENDER, ale MATERIAL WYRAZNIE WIDOCZNY (03.10.2026)
   ──────────────────────────────────────────────────────────────────────────
   Founder: „chcialem taka wersje jak w F, ale z tym jasnym gradientem, ktory obecnie
   mamy w naglowku na landingu — tam material jest lepiej widoczny".

   Dzis material widac po PRAWEJ stronie naglowka, bo gradient schodzi tam do 0,22.
   Rownomiernie na calej stronie tak sie nie da — przy 0,22 tlo ma RGB 148/151/156
   i kicker spada do 1,79:1. Ale 0,65 juz sie da, pod jednym warunkiem.

   ⭐ WARUNEK: zamiast przyciskac material, ROZJASNIAMY TEKST.
   Zmierzone przy kryciu 0,65 (tlo RGB 78/85/94):
     krem   #ece7d8  6,10:1  — zostaje bez zmian
     kicker #c4a468  3,18:1  -> #efc87f  4,67:1   rozjasnienie x1,22
     claim  #b3b1a7  3,51:1  -> #d0cdc2  4,66:1   rozjasnienie x1,16
   ⇒ MOSIADZ POZOSTAJE MOSIADZEM, tylko jasniejszym. Przy kryciu 0,50 trzeba by juz
   #fff39a, czyli cytryny — i tam konczy sie tozsamosc marki, dlatego 0,50 odpada.

   Cien tekstu dolozony jako MARGINES, nie zamiennik kontrastu: formalnie WCAG go nie
   liczy, ale realnie ratuje litery na najjasniejszych ziarnach kruszywa.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-farbe] .landing--jasne { --krycie-mat: 0.65; }

html[data-farbe] .landing--jasne .kopf__kategorie,
html[data-farbe] .landing--jasne .marke,
html[data-farbe] .landing--jasne .kicker { color: #efc87f; }

html[data-farbe] .landing--jasne .kopf__claim,
html[data-farbe] .landing--jasne .text--leise,
html[data-farbe] .landing--jasne .kino__hinweis,
html[data-farbe] .landing--jasne .klip__zeit { color: #d0cdc2; }

html[data-farbe] .landing--jasne .kopf__titel,
html[data-farbe] .landing--jasne .kopf__kategorie,
html[data-farbe] .landing--jasne .marke {
  text-shadow: 0 1px 3px rgba(22, 32, 44, 0.55);
}

/* ══════════════════════════════════════════════════════════════════════════
   WARIANT H — GRA SWIATLA OD LEWEJ DO PRAWEJ, na calej stronie (03.10.2026)
   ──────────────────────────────────────────────────────────────────────────
   Founder: „przeciez to nie ten sam gradient, nie ma tej gry swiatla od lewej do prawej
   jak w naglowku na landingu obecnie".

   Mial racje: warianty F i G mialy krycie JEDNOLITE. Tutaj wraca gradient boczny —
   ciemno po lewej, gdzie stoi tekst, jasno po prawej, gdzie material ma oddychac.
   Roznica wobec dzisiejszego naglowka: tam gradient obejmuje TYLKO hero, tu idzie przez
   caly dokument razem z nieruchomym tlem.

   ⭐ ZASIEG GRY SWIATLA JEST POLICZONY, NIE PRZEPISANY Z HERO.
   W hero gradient konczy sie na 0,22, bo po prawej NIE STOI TEKST — jest tam nagranie
   z apki. Na calej stronie stoi: cztery akapity zaczynaja sie za x=720.
   Zmierzone przy kolorach z wariantu G (kicker #efc87f, claim #d0cdc2):
     prawy koniec 0,22 -> kicker 1,85:1   PONIZEJ progu
     prawy koniec 0,50 -> kicker 3,33:1   nadal ponizej
     prawy koniec 0,65 -> kicker 4,75:1   <- MINIMUM
   ⇒ gradient idzie 0,95 -> 0,65, rozpietosc 0,30. W hero jest 0,73, ale tamta liczba
   jest nieosiagalna wszedzie tam, gdzie po prawej stoja slowa.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-farbe] .landing--gra-swiatla > .tlo--jedno::after {
  background:
    linear-gradient(100deg,
      rgba(22, 32, 44, 0.95) 0%,
      rgba(22, 32, 44, 0.90) 28%,
      rgba(22, 32, 44, 0.82) 50%,
      rgba(22, 32, 44, 0.72) 76%,
      rgba(22, 32, 44, 0.65) 100%),
    linear-gradient(180deg,
      rgba(22, 32, 44, 0.22) 0%,
      rgba(22, 32, 44, 0.00) 30%);
}
@media (prefers-reduced-transparency: reduce) {
  html[data-farbe] .landing--gra-swiatla > .tlo--jedno::after {
    background: rgba(22, 32, 44, 0.86);
  }
}

/* ── Nawigacja stron (wdrozona 06.10.2026, decyzja Kuby) ─────────────────────
   Lista DYNAMICZNA: kazda strona pokazuje POZOSTALE strony, nie siebie
   (start: App · Film · Kontakt; /app/: Startseite · Film · Kontakt;
   /film/: Startseite · App · Kontakt). Dlatego nie ma stylu „biezaca strona”.
   Wiersz wordmarku = wiersz nawigacji. Zero dodatkowej wysokosci w pierwszym kadrze:
   linki stoja w linii z logotypem, po prawej, na tej samej linii bazowej.
   Bez paska, tla, obwodki, cienia i przyklejenia — nawigacja jest podpisem strony,
   nie interfejsem. Inter = element sterujacy (system trzech krojow z site.css).
   Wordmark = Startseite (konwencja), wiec w liscie nie ma pozycji „Start”. */

.nawi-zeile {
  display: flex;
  /* zawijanie z tresci, nie z progu szerokosci: lista schodzi pod logotyp dokladnie
     wtedy, gdy sie nie miesci (zmierzone 06.10: /app/ przy 375 px z „Startseite”
     przewijal poziomo do 384 px, a landing z „App” miescil sie w wierszu) */
  flex-wrap: wrap;
  row-gap: var(--s-1);
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--s-2);
  align-self: stretch;          /* w .kopf__logo (kolumna, align-items:flex-start) */
  width: 100%;
}

/* /app/: po zawinieciu (telefon) lista stala tuz nad H1 — wieksza przerwa pod lista
   niz nad nia, zeby nawigacja nalezala do logotypu, nie do naglowka */
.raster > .nawi-zeile {
  margin-bottom: var(--s-1);
}

.nawi-zeile .wordmark {
  text-decoration: none;
}

.nawi__liste {
  list-style: none;
  display: flex;
  gap: var(--s-3);
}

.nawi__link {
  /* pole dotyku >= 44 px wysokosci bez zmiany optycznej pozycji tekstu */
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--creme);
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  .nawi__link:hover {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
  }
}

.nawi__link:focus-visible {
  outline: 2px solid var(--messing-hell);
  outline-offset: 4px;
  border-radius: 1px;
}

/* telefon: logotyp i trzy pozycje musza zmiescic sie w jednym wierszu przy 320 px */
@media (max-width: 400px) {
  .nawi__liste { gap: var(--s-2); }
  .nawi__link { font-size: 14px; }
}

/* /film/: naglowek byl wysrodkowany i ZASLONIETY przez nieruchome tlo z <main>
   (elementFromPoint na wordmarku = DIV.tlo; zmierzone na prob-ar.de 06.10).
   Wlasny kontekst warstw + ta sama os co tresc ponizej. */
.nawi-kopf {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: calc(940px + 2 * var(--s-3));
  margin: 0 auto;
  width: 100%;
}

.nawi-kopf .kino__wordmark {
  margin-left: 0.22em;
}

/* ponizej 360 px lista i tak stoi pod logotypem (zawijanie wyzej) — tam wraca
   szerszy odstep miedzy pozycjami, bo miejsca w wierszu jest dosc. */
@media (max-width: 359px) {
  .nawi__liste { gap: var(--s-3); }
}