/* ==========================================================================
   Das Musterblatt — Bildwelt für WERKZEICHEN
   Ersetzt am 28.08.2026 die Lagerraum-Grammatik. Seed c5380c4c, zweiter Wurf.

   Der Gedanke: die Seite ist ein Musterblatt. Sie hält sich zurück, damit die
   Ware wirkt. Papier und Tinte, sonst nichts — und genau eine Farbe auf der
   ganzen Seite, nämlich die, die der Kunde für sein Textil wählt. Sie heißt
   --ware und zieht alles mit: Auswahl, Linien, Zeigerring, Knopfkanten.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../schrift/Archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../schrift/JetBrainsMono-var-latin.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}

/* Angemeldet, damit die Warenfarbe weich übergehen kann statt umzuspringen.
   Ohne @property ist eine Custom Property ein Text und lässt sich nicht
   interpolieren. */
@property --ware {
  syntax: '<color>';
  inherits: true;
  initial-value: #202225;
}
@property --ware-tinte {
  syntax: '<color>';
  inherits: true;
  initial-value: #202225;
}
/* Ein helles Teil auf hellem Papier wäre unsichtbar. Deshalb legt sich unter
   die Ware ein Feld — aber nur dann, wenn es gebraucht wird. Bei dunkler Ware
   bleibt es durchsichtig und das Teil schwebt auf dem Blatt. */
@property --feld {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

:root {
  /* Ein Papier, eine Tinte, drei Grauwerte — und die Ware.
     Die Modelaufnahmen liegen auf hellgrauem Studiogrund. Deshalb ist der
     Grund dieser Seite Papier und nicht Nacht: die Fotos setzen sich darauf
     ab, statt darin zu verschwinden. Der Versuch, die Farbwelt eines Flyers
     darüberzulegen, ist am 28.08.2026 zurückgenommen worden. */
  --papier:    #F5F4F1;
  --papier-2:  #ECEBE7;   /* Feld unter heller Ware, ruhige Flächen */
  --tinte:     #16161A;
  --grau-1:    #5E5E5A;   /* Nebentext */
  --grau-2:    #C7C6C1;   /* Haarlinien */
  --nacht:     #16161A;   /* die eine dunkle Bahn */
  --kreide:    #F5F4F1;

  /* Die einzige Farbe der Seite: die, die der Kunde für sein Textil wählt.
     Sie steht auf dem Teil, auf der Auswahl, auf dem Zeigerring und auf der
     Summe. Es gibt keinen zweiten Akzent. */
  --ware:       #202225;
  --ware-tinte: #202225;   /* dieselbe Farbe, auf dem Grund lesbar gemacht */
  --feld: transparent;     /* Untergrund, nur wenn die Ware im Grund verschwindet */

  /* Die aktuelle Bahn. Bauteile lesen nur diese vier Marken und müssen
     deshalb nicht wissen, worauf sie liegen. */
  --grund: var(--papier);
  --schrift: var(--tinte);
  --linie-farbe: var(--grau-2);
  --leise-farbe: var(--grau-1);

  --linie: 1px;
  --spalte: min(1360px, 100% - 2.5rem);

  --luft-s:  .75rem;
  --luft-m:  1.5rem;
  --luft-l:  3.25rem;
  --luft-xl: 5.5rem;

  --ease-aus:   cubic-bezier(.23, 1, .32, 1);
  --ease-durch: cubic-bezier(.77, 0, .175, 1);

  --d-druck:     140ms;
  --d-wahl:      180ms;
  --d-ein:       240ms;
  --d-raus:      140ms;
  --d-farbe:     420ms;
  --d-verfahren: 380ms;

  --t-schild: .70rem;
  --t-notiz:  .82rem;
  --t-text:   1rem;

  --schrift-anzeige: 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --schrift-text:    'Archivo', system-ui, -apple-system, sans-serif;
  --schrift-daten:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

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

/* Eine Klasse, die display setzt, hebelt das hidden-Attribut aus. Genau das
   ist am 28.08.2026 passiert: die Kategorienliste der Einwilligung stand
   offen und das Fenster nahm den halben Bildschirm. Statt vierzig Klassen
   einzeln abzusichern, gilt die Regel hier einmal fuer alle. */
[hidden] { display: none !important; }

/* Bahnen. Hell ist der Normalfall. Genau ein Abschnitt liegt dunkel — der
   Vergleich zwischen Folie und Druck, wo beide Proben davon leben. Alles
   liest --grund und --schrift, deshalb muss kein Bauteil wissen, worauf es
   liegt. */
.bahn-dunkel {
  --grund: var(--nacht);
  --schrift: var(--kreide);
  --linie-farbe: #34343A;
  --leise-farbe: #A3A39E;
  background: var(--grund); color: var(--schrift);
}
.bahn-hell {
  --grund: var(--papier);
  --schrift: var(--tinte);
  --linie-farbe: var(--grau-2);
  --leise-farbe: var(--grau-1);
  background: var(--grund); color: var(--schrift);
}

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, .95rem + .22vw, 1.1rem);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: --ware var(--d-farbe) var(--ease-aus),
              --ware-tinte var(--d-farbe) var(--ease-aus),
              --feld var(--d-farbe) var(--ease-aus);
}
@media (hover: hover) and (pointer: fine) { body { cursor: none; } }

img, canvas, svg { max-width: 100%; display: block; }
img { height: auto; }

::selection { background: var(--ware-tinte); color: var(--grund); }
:root { caret-color: var(--schrift); scrollbar-color: var(--tinte) var(--papier-2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--papier-2); }
::-webkit-scrollbar-thumb { background: var(--tinte); }
::marker { color: var(--ware); }
:where(a) { text-underline-offset: .25em; text-decoration-thickness: 1px; }

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

.nur-fuer-lesegeraete {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprung {
  position: absolute; left: var(--luft-m); top: -100%; z-index: 100;
  padding: .7rem 1.1rem; background: var(--tinte); color: var(--papier);
  font-family: var(--schrift-daten); font-size: var(--t-schild);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.sprung:focus { top: var(--luft-s); }

/* ------------------------------------------------------------ Der Zeigerring */

.zeigerring {
  position: fixed; left: 0; top: 0; z-index: 90;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--ware-tinte);
  pointer-events: none; opacity: 0;
  transition: opacity 260ms var(--ease-aus), border-color var(--d-farbe) var(--ease-aus);
  will-change: transform;
  mix-blend-mode: difference;
  filter: invert(1);
}
.zeigerring[data-an] { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .zeigerring { display: none; }
  body { cursor: auto; }
}

/* -------------------------------------------------------------- Typografie */

.anzeige {
  font-family: var(--schrift-anzeige);
  font-weight: 900;
  font-stretch: 62%;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .82;
  text-wrap: balance;
  margin: 0;
}
.anzeige--riesig { font-size: clamp(2.9rem, 1.1rem + 6.6vw, 6.8rem); }
.anzeige--l      { font-size: clamp(2rem, 1rem + 3.4vw, 3.8rem); }
.anzeige--m      { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem); }

/* Schild: Maschinenschrift, Versalien, nur für kurze Beschriftungen. */
.marke {
  font-family: var(--schrift-daten);
  font-weight: 600;
  font-size: var(--t-schild);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  margin: 0;
  color: var(--leise-farbe);
}
.marke--tinte { color: var(--schrift); }
.marke--ware  { color: var(--ware-tinte); }

/* Notiz: Maschinenschrift, gemischt geschrieben. Alles, was länger als ein
   Schild ist, läuft hier. Ein Satz in Versalien liest sich nicht. */
.notiz {
  font-family: var(--schrift-daten);
  font-size: var(--t-notiz);
  line-height: 1.6;
  margin: 0;
  color: var(--leise-farbe);
  text-wrap: pretty;
}
.daten { font-family: var(--schrift-daten); font-variant-numeric: tabular-nums; }

.fliess { max-width: 62ch; text-wrap: pretty; }
.fliess p { margin: 0 0 var(--luft-m); }
.fliess p:last-child { margin-bottom: 0; }
.gross { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.5; }

.leise { color: var(--leise-farbe); }

a { color: inherit; text-decoration-color: var(--linie-farbe); }
a:hover { text-decoration-color: var(--ware-tinte); }

/* Haarlinie. Das Musterblatt teilt mit Linien, nicht mit Kästen. */
.linie { height: var(--linie); background: var(--linie-farbe); border: 0; margin: 0; }

/* ---------------------------------------------------------------- Knöpfe */

.knopf {
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.6rem;
  border: var(--linie) solid var(--schrift);
  background: transparent;
  color: var(--schrift);
  font-family: var(--schrift-daten);
  font-weight: 600; font-size: var(--t-schild);
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  overflow: hidden;
  transition: color var(--d-wahl) var(--ease-aus), transform var(--d-druck) var(--ease-aus);
}
/* Die Füllung wischt von links herein, statt einfach die Farbe zu tauschen. */
.knopf::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--schrift);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-wahl) var(--ease-aus);
}
.knopf > * { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { color: var(--grund); }
  .knopf:hover::before { clip-path: inset(0 0 0 0); }
}
.knopf:active { transform: scale(.975); }
.knopf--haupt { background: var(--schrift); color: var(--grund); border-color: var(--schrift); }
.knopf--haupt::before { background: var(--ware-tinte); clip-path: inset(0 100% 0 0); }
@media (hover: hover) and (pointer: fine) {
  .knopf--haupt:hover { color: var(--grund); }
}
.knopf[disabled], .knopf[aria-disabled='true'] {
  color: var(--leise-farbe); border-color: var(--linie-farbe); cursor: not-allowed; transform: none;
}
.knopf[disabled]::before { clip-path: inset(0 100% 0 0); }
/* Der gefüllte Knopf behält beim Absenden seine dunkle Fläche; die
   Beschriftung „Wird gesendet …" muss darauf lesbar bleiben. */
.knopf--haupt[disabled] { color: var(--grund); border-color: var(--schrift); opacity: .6; }
/* Magnetisch: die Beschriftung rückt dem Zeiger entgegen. */
.knopf .zug {
  display: inline-flex; align-items: center; gap: .7rem;
  transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
  transition: transform 60ms linear;
}

/* --------------------------------------------------------------- Auswahl */

.wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; border: 0; }
.wahl > legend { padding: 0; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.wahl label {
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem;
  border: var(--linie) solid var(--linie-farbe);
  background: transparent;
  font-family: var(--schrift-daten);
  font-weight: 600; font-size: var(--t-schild);
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--d-wahl) var(--ease-aus),
              color var(--d-wahl) var(--ease-aus),
              transform var(--d-druck) var(--ease-aus);
}
@media (hover: hover) and (pointer: fine) {
  .wahl label:hover { border-color: var(--schrift); }
}
.wahl label:active { transform: scale(.98); }
.wahl input:focus-visible + label { outline: 2px solid var(--schrift); outline-offset: 3px; }

/* Das Gewählte wird von einer Linie unterstrichen, die in der Warenfarbe
   hereinwischt. Kein Farbklotz: das Blatt bleibt ruhig. */
.wahl label::after {
  content: '';
  position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
  background: var(--ware-tinte);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-wahl) var(--ease-aus), background-color var(--d-farbe) var(--ease-aus);
}
.wahl input:checked + label { border-color: var(--schrift); color: var(--schrift); }
.wahl input:checked + label::after { clip-path: inset(0 0 0 0); }

/* Gesperrtes: durchgestrichen statt eingefärbt. Farbe ist nie der einzige
   Bedeutungsträger. */
.wahl input:disabled + label {
  color: var(--leise-farbe); border-color: var(--linie-farbe); cursor: not-allowed;
  background-image: linear-gradient(to bottom right,
    transparent calc(50% - .5px), var(--linie-farbe) 50%, transparent calc(50% + .5px));
}

.farbmuster {
  width: 18px; height: 18px; flex: none;
  border: var(--linie) solid var(--schrift);
}

/* Die Farbe stand bis zum 02.09.2026 als style-Attribut am Muster. Damit hätte
   die Content-Security-Policy 'unsafe-inline' für style-src zulassen müssen,
   und das entwertet die Regel. Jetzt trägt das Muster nur noch die Kennung,
   die Farbe steht hier. Die Werte stammen aus inhalt/produkte.json und stehen
   zusätzlich als Beschriftung in den Seiten — wer die JSON ändert, ändert
   beides mit. */
.farbmuster[data-hex='#202225'] { background: #202225; }   /* Textil Schwarz */
.farbmuster[data-hex='#F2F2F0'] { background: #F2F2F0; }   /* Textil Weiß */
.farbmuster[data-hex='#9BA0A5'] { background: #9BA0A5; }   /* Textil Grau */
.farbmuster[data-hex='#1F4E9C'] { background: #1F4E9C; }   /* Textil Blau */
.farbmuster[data-hex='#B3232B'] { background: #B3232B; }   /* Textil Rot */
.farbmuster[data-hex='#1F7A4C'] { background: #1F7A4C; }   /* Textil Grün */
.farbmuster[data-hex='#F4F4F2'] { background: #F4F4F2; }   /* Folie Weiß */
.farbmuster[data-hex='#1B1B1D'] { background: #1B1B1D; }   /* Folie Schwarz */
.farbmuster[data-hex='#C9A227'] { background: #C9A227; }   /* Folie Gold */
.farbmuster[data-hex='#B8BCC0'] { background: #B8BCC0; }   /* Folie Silber */
.farbmuster[data-hex='#C1121F'] { background: #C1121F; }   /* Folie Rot */
.farbmuster[data-hex='#0B4F9E'] { background: #0B4F9E; }   /* Folie Blau */

/* ---------------------------------------------------------------- Felder */

label.feld { display: block; }
.feld-marke { display: block; margin-bottom: .5rem; }

input[type='text'], input[type='email'], input[type='tel'], input[type='number'],
input[type='date'], input[type='file'], textarea, select {
  width: 100%;
  padding: .8rem 0;
  background: transparent;
  border: 0; border-bottom: var(--linie) solid var(--linie-farbe);
  color: var(--schrift);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  transition: border-color var(--d-wahl) var(--ease-aus);
}
input:focus, textarea:focus { outline: none; border-bottom-color: var(--ware-tinte); }

/* Wer mit der Maus in ein Feld klickt, weiß, wo er ist. Wer mit der Tastatur
   durchgeht, sieht auf einem Textfeld nur diese eine Unterlinie — und eine
   Haarlinie in Warenfarbe ist als einzige Anzeige zu wenig. Bei
   :focus-visible wird sie deshalb doppelt so stark. Der Rahmen bleibt weg,
   das Musterblatt kennt keine Kästen; die Höhe bleibt gleich, weil das
   Innenmaß den zusätzlichen Bildpunkt zurückgibt. */
input[type='text']:focus-visible, input[type='email']:focus-visible,
input[type='tel']:focus-visible, input[type='number']:focus-visible,
input[type='date']:focus-visible, input[type='file']:focus-visible,
textarea:focus-visible, select:focus-visible {
  border-bottom-width: 2px;
  padding-bottom: calc(.8rem - 1px);
}
input[type='number'] { font-family: var(--schrift-daten); font-variant-numeric: tabular-nums; }
textarea { min-height: 6.5rem; resize: vertical; border: var(--linie) solid var(--linie-farbe); padding: .8rem; }
::placeholder { color: var(--leise-farbe); opacity: 1; }

input[type='color'] {
  width: 100%; height: 2.8rem; padding: 2px;
  background: transparent; border: var(--linie) solid var(--schrift); cursor: pointer;
}

input[type='range'] { width: 100%; height: 24px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: var(--linie); background: var(--linie-farbe); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: var(--ware-tinte); border: var(--linie) solid var(--schrift);
  transition: background-color var(--d-farbe) var(--ease-aus);
}
input[type='range']::-moz-range-track { height: var(--linie); background: var(--linie-farbe); }
input[type='range']::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ware-tinte); border: var(--linie) solid var(--schrift);
}

/* -------------------------------------------------------------- Hinweise */

.hinweis {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem 1rem;
  align-items: start;
  padding: 1rem 0;
  border-top: var(--linie) solid var(--schrift);
  font-size: var(--t-notiz);
  font-family: var(--schrift-daten);
  line-height: 1.6;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--d-raus) var(--ease-aus), transform var(--d-raus) var(--ease-aus);
}
.hinweis[hidden] { display: none; }
.hinweis--zeigt { opacity: 1; transform: none; transition-duration: var(--d-ein); }
html:not(.js) .hinweis { opacity: 1; transform: none; }
.hinweis::before {
  content: '→'; grid-column: 1; color: var(--ware-tinte);
  font-family: var(--schrift-text); font-weight: 700;
  transition: color var(--d-farbe) var(--ease-aus);
}
.hinweis > span, .hinweis p { grid-column: 2; margin: 0; max-width: 78ch; }
.hinweis .knopf { grid-column: 2; justify-self: start; padding: .7rem 1.1rem; }

/* -------------------------------------------------------------- Kopf, Fuß */

.kopf {
  position: sticky; top: 0; z-index: 40;
  --fortschritt: 0;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--linie) solid var(--linie-farbe);
}
/* Wie weit ist das Blatt gelesen. Läuft über die Scroll-Zeitachse und damit
   ausserhalb des Hauptstrangs. */
.kopf::after {
  content: '';
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--ware-tinte);
  transform-origin: left;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .kopf::after { animation: fortschritt linear both; animation-timeline: scroll(); }
  }
}
@keyframes fortschritt { to { transform: scaleX(1); } }

.kopf__reihe {
  width: var(--spalte); margin-inline: auto;
  display: flex; align-items: baseline; gap: var(--luft-m);
  padding-block: .9rem;
}
/* Zweizeilige Marke: WERKZEICHEN gross, darunter der Absender leicht nach
   rechts eingerückt. Der Versatz ist an die Schriftgrösse der zweiten Zeile
   gekoppelt, damit er bei jeder Grösse gleich aussieht. */
.wortmarke {
  display: inline-grid; justify-items: start; gap: .18em;
  text-decoration: none; line-height: 1;
}
.wortmarke b {
  font-family: var(--schrift-anzeige); font-weight: 900; font-stretch: 62%;
  text-transform: uppercase; letter-spacing: -.01em; font-size: 1.35rem;
  line-height: 1;
}
.wortmarke small {
  margin-inline-start: 2.4em;
  font-family: var(--schrift-daten); font-size: var(--t-schild);
  letter-spacing: .16em; text-transform: uppercase; color: var(--leise-farbe);
}
.kopf__mitte { flex: 1; }
.kopf__kontakt { display: flex; align-items: center; gap: var(--luft-m); }
.kopf__anruf { font-family: var(--schrift-daten); font-size: var(--t-schild);
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }

.fuss {
  margin-top: 0;
  border-top: var(--linie) solid var(--schrift);
  padding-block: var(--luft-l);
}
.fuss p { margin: 0 0 .5rem; }
.fuss__reihe { display: grid; gap: var(--luft-l); }
@media (min-width: 52rem) { .fuss__reihe { grid-template-columns: 2fr 1fr 1fr; } }

.daumenleiste {
  background: var(--grund); color: var(--schrift);
  position: fixed; inset: auto 0 0 0; z-index: 45;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: var(--linie) solid var(--schrift);
  background: var(--grund);
}
.daumenleiste[hidden] { display: none; }
.daumenleiste .knopf { justify-content: center; border: 0; padding: 1.1rem .6rem; letter-spacing: .1em; }
.daumenleiste .knopf + .knopf { border-left: var(--linie) solid var(--schrift); }
@media (min-width: 62rem) { .daumenleiste { display: none; } }

/* ------------------------------------------------------------ Seitenraster */

.bahn { width: var(--spalte); margin-inline: auto; }
.abschnitt { padding-block: var(--luft-xl); }
.abschnitt + .abschnitt { border-top: var(--linie) solid var(--linie-farbe); }
[id] { scroll-margin-top: 5rem; }

/* Blattkopf: Nummer links, Überschrift, Haarlinie. Kein Etikett über der
   Überschrift, sondern eine Zeile daneben, wie auf einem Musterblatt. */
.blattkopf { display: grid; gap: var(--luft-m); margin-bottom: var(--luft-l); }
.blattkopf__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--luft-m); padding-bottom: .6rem;
  border-bottom: var(--linie) solid var(--schrift);
}
/* Bei 390 px wurde daraus „BLATT / 02" über zwei Zeilen: die Überschrift nimmt
   sich den Platz, und „Blatt 02" ist mit gesperrter Laufweite breiter, als es
   aussieht. Eine Blattnummer bricht nicht um. */
.blattkopf__zeile .marke { white-space: nowrap; }

/* --------------------------------------------- Scrollgetriebene Enthüllung */

/* Nur an Anzeigenzeilen, nicht an jedem Element. Läuft in CSS und damit
   ausserhalb des Hauptstrangs; der Rückfall setzt eine Klasse. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .enthuellt {
      animation: enthuellen linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}
/* Der eine Auftritt beim Ankommen. Zeilenweise, versetzt, und nur hier.
   Der Versatz stand bis zum 02.09.2026 als style="--nr:0" an jeder Zeile.
   Ein style-Attribut hätte die Content-Security-Policy gezwungen,
   'unsafe-inline' für style-src zuzulassen; die Reihenfolge steht ohnehin im
   Markup, also zählt sie das CSS selbst ab. */
@media (prefers-reduced-motion: no-preference) {
  .setzt > * {
    animation: setzen .7s var(--ease-aus) both;
    animation-delay: 0ms;
  }
  .setzt > :nth-child(2) { animation-delay: 70ms; }
  .setzt > :nth-child(3) { animation-delay: 140ms; }
  .setzt > :nth-child(4) { animation-delay: 210ms; }
  .setzt > :nth-child(5) { animation-delay: 280ms; }
}
@keyframes setzen {
  from { opacity: 0; transform: translateY(.35em); clip-path: inset(0 0 110% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 -30% 0); }
}

@keyframes enthuellen {
  from { clip-path: inset(0 0 105% 0); opacity: .2; }
  to   { clip-path: inset(0 0 -20% 0); opacity: 1; }
}
/* Rückfall für Browser ohne scrollgetriebene Animationen. Nur mit
   JavaScript: sonst bliebe die Überschrift für immer verdeckt, weil niemand
   die Klasse setzt. Ohne Skript ist sie einfach sofort da. */
@supports not (animation-timeline: view()) {
  html.js .enthuellt {
    clip-path: inset(0 0 105% 0); opacity: .2;
    transition: clip-path .7s var(--ease-aus), opacity .7s var(--ease-aus);
  }
  html.js .enthuellt.ist-da { clip-path: inset(0 0 -20% 0); opacity: 1; }
}

/* ------------------------------------------------------------------ Ruhe */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .knopf:hover, .knopf:active, .wahl label:hover, .wahl label:active { transform: none; }
  .hinweis { transform: none; }
  .enthuellt { clip-path: none; opacity: 1; }
  .knopf .zug { transform: none; }
}

/* ------------------------------------------------------------ Einwilligung */

/* Eine schmale Leiste unten, keine Wand. Sie deckt den ersten Bildschirm
   nicht zu und liegt über der Daumenleiste, damit Anrufen erreichbar bleibt:
   Kontakt darf nie an einer Cookie-Frage hängen. */
.einwilligung {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: var(--grund); color: var(--schrift);
  border-top: var(--linie) solid var(--ware-tinte);
  transform: translateY(100%);
  transition: transform 320ms var(--ease-aus);
}
.einwilligung--zeigt { transform: none; }
/* Solange die Leiste steht, bekommt die Seite unten Platz. Sonst verdeckt
   sie den Hauptknopf, und das Erste, was die Seite tut, waere im Weg stehen. */
html.einwilligung-offen body { padding-bottom: 9rem; }
@media (min-width: 62rem) { html.einwilligung-offen body { padding-bottom: 6.5rem; } }
.einwilligung__innen {
  width: var(--spalte); margin-inline: auto;
  display: grid; gap: var(--luft-m);
  padding-block: 1rem 1.1rem;
}
@media (min-width: 62rem) {
  .einwilligung__innen {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .einwilligung__wahl { grid-column: 1 / -1; }
}
.einwilligung__text p { margin: 0; }
.einwilligung__text .notiz { max-width: 78ch; margin-top: .3rem; }
.einwilligung__text a { color: var(--schrift); text-decoration-color: var(--ware-tinte); }

.einwilligung__wahl { display: grid; gap: .6rem; }
.einwilligung__wahl[hidden] { display: none; }
.einwilligung__zeile {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  padding-top: .6rem; border-top: var(--linie) solid var(--linie-farbe);
}
.einwilligung__zeile span span { display: block; }
.einwilligung__zeile input { margin-top: .25rem; accent-color: var(--ware-tinte); }

/* Ablehnen und Zustimmen stehen nebeneinander, gleich groß, gleich auffällig. */
.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.einwilligung__knoepfe .knopf { flex: 1 1 auto; justify-content: center; padding: .85rem 1.2rem; }
.einwilligung__mehr { flex: 0 0 auto; }

@media (max-width: 61.99rem) {
  .einwilligung { bottom: 4.2rem; }
}