/* ═══════════════════════════════════════════════════════════════════════════
   bauer365.de — ein Stylesheet, keine Framework-Konfiguration.

   Aufbau
     1. Marken-Token          — Farben, Radien, Schatten
     2. Grundlagen            — Reset, Typografie, Bahn
     3. Kopf und Fuß
     4. Bühne
     5. Produkt-Kacheln       — das eigentliche Ziel dieser Seite
     6. Karten und Abschnitte
     7. Rechtsseiten
     8. Bewegung              — und ihre Abschaltung

   ## Was hier bewusst NICHT steht

   Keine Web-Schrift. Eine eingebundene Schriftart von einem fremden Server ist
   eine Verbindung zu einem Dritten bei jedem Aufruf — und die
   Datenschutzerklärung dieser Seite sagt ausdrücklich, dass es keine gibt.
   Selbst gehostet wären es 200 KB für einen Effekt, den die Systemschrift auf
   jedem Gerät bereits erreicht, und zwar in der Fassung, die dort am besten
   aussieht.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Marken-Token ─────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Flächen und Schrift */
  --grund: #fbfbfd;
  --grund-gedeckt: #f3f4f8;
  --karte: #ffffff;
  --schrift: #0e1116;
  --schrift-matt: #5a6270;
  --rand: rgb(12 16 24 / 0.1);
  --rand-stark: rgb(12 16 24 / 0.16);

  /* Akzente. Die Rohtöne sind für FLÄCHEN, die `-text`-Werte für SCHRIFT auf
     dem jeweiligen Grund. Zwei Werte je Farbe sind keine Bequemlichkeit,
     sondern Arithmetik: Gemessen gegen diesen Grund erreicht #f59e0b als
     Schrift 2,08:1 und fällt damit durch. Dieselbe Rechnung wie in der
     Plattform, die für ein `text-white` auf ihrer Bernstein-Fläche 1,91:1
     gemessen hat — deren Zahl, nicht diese: Hier steht ein anderer Ton auf
     einem anderen Grund, und eine geliehene Messung ist keine.

     Umgekehrt gilt die Regel für die FÜLLUNG: Auf Violett (#6d5ae6, 4,93:1)
     ist weisse Schrift lesbar, auf Bernstein (#f59e0b) ist sie es nicht (2,15:1). Der
     Knopf einer Bernstein-Kachel trägt deshalb dunkle Schrift — 8,48:1.

     ALLE Zahlen in dieser Datei rechnet `skripte/kontrast.mjs` bei jedem Bau
     aus DIESEN Token nach; ein Wert, der nicht mehr stimmt, bricht ihn ab.
     Hier standen bis zum Audit vom 14.08.2026 fünf von Hand gerechnete Werte,
     die um bis zu 0,24 danebenlagen — keine Aussage kippte, aber eine zitierte
     Zahl ist nur wert, dass sie nachrechenbar ist. */
  --violett: #7c5cf0;
  --violett-fuell: #6d5ae6;
  --violett-text: #5b4bd0; /* 6,04:1 auf --grund */
  --bernstein: #f59e0b;
  --bernstein-fuell: #f59e0b;
  /* Nicht #b45309, obwohl der auf weissem Grund bestanden hätte.
     Die Schrift steht auch auf der GETÖNTEN Fläche der Tempo-Pille
     (`color-mix(--bernstein 13%, transparent)` ≈ #fdf2df), und dort waren es
     4,54:1 — bestanden, aber ohne Reserve. Eine Zusicherung, die eine
     Rundung von der Grenze entfernt liegt, ist in diesem Repo schon einmal
     um Haaresbreite gekippt. #a1520a erreicht 5,09:1 auf der Tönung und
     5,63:1 auf der Karte. */
  --bernstein-text: #a1520a;
  --cyan: #22d3ee;

  /* Das Orange der Wortmarke.

     Es ist nicht frei gewählt: Es liegt auf dem Verlauf des UNTEREN
     Signet-Bogens (#f59e0b → #fb7185), und zwar bei t ≈ 0,3. Damit trägt die
     Wortmarke keinen fünften Ton, sondern einen, der im Zeichen daneben
     ohnehin vorkommt — nachgerechnet, nicht nach Augenmass: Farbton 28,9°,
     also unzweifelhaft Orange und nicht mehr Bernstein (37,7°). */
  --orange: #f79030;

  /* ── Vendo4u ──────────────────────────────────────────────────────────────
     Die Marke von Vendo4u, aus den gelieferten Logo-Dateien abgelesen: Navy
     #13203F und Blau #1B69C4. Beide stehen auch in src/marke/vendo4u*.svg;
     weichen die offiziellen Werte ab, sind das die einzigen Stellen.

     `--vendo-text` ist NICHT das Markenblau, sondern eine abgedunkelte
     Fassung — dieselbe Rechnung wie bei Bernstein: Auf der getönten Fläche der
     Tempo-Pille (`--vendo` bei 13 % über Weiss ≈ #e1ebf7) erreicht #1B69C4
     4,54:1 und läge damit eine Rundung von der Grenze entfernt. #14538F
     erreicht dort 6,59:1 und auf der Karte 7,88:1.

     Die FÜLLUNG bleibt das echte Markenblau: Weisse Schrift darauf erreicht
     5,43:1, der Knopf braucht also keine Abweichung. */
  --vendo: #1b69c4;
  --vendo-fuell: #1b69c4;
  --vendo-text: #14538f;

  /* Schrift AUF der jeweiligen Füllung — der zweite Teil derselben Rechnung. */
  --auf-violett: #ffffff;
  --auf-bernstein: #1c1408;
  --auf-vendo: #ffffff;

  --radius: 14px;
  --radius-gross: 22px;
  --schatten: 0 1px 2px rgb(15 20 35 / 0.05), 0 18px 40px -24px rgb(30 25 80 / 0.28);
  --schatten-hoch: 0 2px 4px rgb(15 20 35 / 0.06), 0 34px 60px -28px rgb(30 25 80 / 0.4);

  --bahn: 1140px;
  --kopf-hoehe: 68px;
}

[data-thema='dark'] {
  color-scheme: dark;

  --grund: #080b12;
  --grund-gedeckt: #0c1018;
  --karte: #10141d;
  --schrift: #eef1f6;
  --schrift-matt: #98a1b3;
  --rand: rgb(255 255 255 / 0.1);
  --rand-stark: rgb(255 255 255 / 0.18);

  /* Gegen #10141d gemessen: Violett 5,97:1, Bernstein 11,04:1, Vendo 7,15:1;
     auf der getönten Pille 5,28 / 8,93 / 6,43:1. */
  --violett-text: #9583f2;
  --bernstein-text: #fbbf24;
  --vendo-text: #63a6e8;

  --schatten: 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 40px -24px rgb(0 0 0 / 0.8);
  --schatten-hoch: 0 2px 4px rgb(0 0 0 / 0.55), 0 34px 60px -28px rgb(0 0 0 / 0.9);
}

/* ── 2. Grundlagen ───────────────────────────────────────────────────────── */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
}

body {
  background: var(--grund);
  color: var(--schrift);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration-color: var(--rand-stark);
  text-underline-offset: 3px;
}

h1,
h2,
h3 {
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
  font-weight: 640;
}

p {
  text-wrap: pretty;
}

/* Ein Fokusring, der überall sichtbar ist — auch auf der Bernstein-Kachel.
   `currentColor` wäre bequem und auf einer farbigen Füllung unsichtbar. */
:focus-visible {
  outline: 2px solid var(--violett);
  outline-offset: 3px;
  border-radius: 4px;
}

[data-thema='dark'] :focus-visible {
  outline-color: var(--cyan);
}

/* Bedienelemente, die ohne JavaScript nichts tun, erscheinen erst mit ihm.
   Ein sichtbarer Knopf ohne Wirkung ist schlechter als kein Knopf.

   `html [...]` statt nur `[...]` — und das ist keine Kosmetik, sondern der
   Grund, warum die Regel bis zum 31.08.2026 an den Kontaktknöpfen wirkungslos
   war: `[data-braucht-js]` und `.knopf` haben dieselbe Spezifität (0,1,0),
   also gewinnt die spätere Regel, und `.knopf { display: inline-flex }` steht
   500 Zeilen weiter unten. Der Themenknopf war nie betroffen — `.thema` setzt
   kein `display` —, weshalb die Lücke nur an den Knöpfen sichtbar wurde, die
   es damals noch gar nicht gab. Das vorangestellte `html` macht daraus (0,1,1)
   und stellt die Absicht wieder her. */
html [data-braucht-js] {
  display: none;
}

html[data-bereit] [data-braucht-js] {
  display: inline-flex;
}

/* Der Gegenpol: sichtbar NUR ohne JavaScript. Er trägt die Zeile im
   Kontaktabschnitt, die ins Impressum führt — dort steht die Adresse, hier
   nicht mehr. Ohne diese Regel stünde der Hinweis auch dann da, wenn die
   Knöpfe daneben längst funktionieren. */
html[data-bereit] [data-ohne-js] {
  display: none;
}

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.bahn--schmal {
  max-width: 760px;
}

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--karte);
  border: 1px solid var(--rand-stark);
  border-radius: 0 0 var(--radius) 0;
}

.sprung:focus {
  left: 0;
}

.augenbraue {
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--schrift-matt);
}

/* ── 3. Kopf und Fuß ─────────────────────────────────────────────────────── */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--grund) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.kopf[data-gescrollt] {
  border-bottom-color: var(--rand);
}

.kopf__innen {
  max-width: var(--bahn);
  margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 40px);
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  gap: 20px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}

.marke__signet {
  width: 30px;
  height: 30px;
  flex: none;
}

.marke__wort {
  font-size: 20px;
  font-weight: 680;
  letter-spacing: -0.03em;
}

.marke__365 {
  /* Vier Töne, und die Verteilung ist der Punkt.

     Bis zum 15.08.2026 endete der Verlauf auf Bernstein, und der Übergang
     Cyan → Bernstein lag mitten auf der „6". In sRGB führt dieser Weg durch
     Grün: Die „5" lief ins Olivgrüne aus, statt warm zu enden.

     Jetzt hält Cyan bis 54 % — also über die ganze „6" —, der Wechsel fällt in
     die Lücke zwischen den Ziffern, und die „5" trägt Bernstein → Orange. Der
     Grünstich ist damit nicht weggerechnet, sondern dorthin geschoben, wo
     keine Ziffer steht. Vier Varianten wurden dafür gerendert und verglichen. */
  background: linear-gradient(
    100deg,
    var(--violett) 0%,
    var(--cyan) 54%,
    var(--bernstein) 80%,
    var(--orange) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kopf__nav {
  display: none;
  gap: 4px;
  margin-inline-start: auto;
}

.kopf__nav a {
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 14.5px;
  color: var(--schrift-matt);
  text-decoration: none;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.kopf__nav a:hover {
  color: var(--schrift);
  background: var(--grund-gedeckt);
}

@media (min-width: 900px) {
  .kopf__nav {
    display: flex;
  }
}

/* ── Unter 900 px stand hier nichts ─────────────────────────────────────────

   Bis zum 31.08.2026 war `.kopf__nav` auf schmalen Geräten schlicht
   ausgeblendet, und an ihre Stelle trat nichts. Gemessen auf 390 x 844: Die
   Startseite ist 6,0 Bildschirme hoch, der Kontaktabschnitt beginnt nach 5,1 —
   der einzige Handlungsaufruf der Seite lag also fünf Bildschirme tief, ohne
   jeden Weg dorthin ausser scrollen. Ausgerechnet auf dem Gerät, über das der
   Kanal dieses Hauses läuft.

   Kein Burger-Menü: Vier Sprungmarken rechtfertigen keinen Menüzustand, keinen
   Fokusfänger und kein Skript. Eine waagerecht scrollbare Reihe kostet keines
   davon und ist ohne JavaScript bedienbar.

   `--kopf-hoehe` zieht mit, und das ist keine Kosmetik: Der Wert steht auch in
   `scroll-padding-top`. Bliebe er bei 68 px, verschwände das Ziel jeder
   Sprungmarke unter der Leiste, die gerade dazugekommen ist. */
@media (max-width: 899px) {
  /* 124 px ist gemessen, nicht geschätzt: Die Leiste ist auf 390 px genau
     121 px hoch (Marke 11 px oben + 30 px Zeichen, Reihe 6 px + 34 px + 9 px).
     Aufgerundet, weil der Wert nur noch `scroll-padding-top` speist — dort ist
     ein paar Pixel zu viel ein Abstand und ein paar zu wenig eine Überschrift,
     die unter der Leiste verschwindet. */
  :root {
    --kopf-hoehe: 124px;
  }

  .kopf__innen {
    height: auto;
    flex-wrap: wrap;
    padding-block: 11px 0;
  }

  .kopf__nav {
    display: flex;
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    padding-block: 6px 9px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .kopf__nav::-webkit-scrollbar {
    display: none;
  }

  .kopf__nav a {
    flex: none;
  }
}

.kopf__werkzeuge {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 900px) {
  .kopf__werkzeuge {
    margin-inline-start: 8px;
  }
}

.sprachwahl {
  position: relative;
}

.sprachwahl summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-size: 14px;
  color: var(--schrift-matt);
  user-select: none;
}

.sprachwahl summary::-webkit-details-marker {
  display: none;
}

.sprachwahl summary:hover {
  color: var(--schrift);
  border-color: var(--rand-stark);
}

.sprachwahl summary svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.sprachwahl__liste {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 148px;
  padding: 6px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  display: grid;
  gap: 2px;
}

.sprachwahl__liste a {
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--schrift-matt);
}

.sprachwahl__liste a:hover {
  background: var(--grund-gedeckt);
  color: var(--schrift);
}

.sprachwahl__liste a[aria-current] {
  color: var(--schrift);
  font-weight: 600;
}

.thema {
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--rand);
  border-radius: 999px;
  color: var(--schrift-matt);
  cursor: pointer;
}

.thema:hover {
  color: var(--schrift);
  border-color: var(--rand-stark);
}

.thema svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.fuss {
  border-top: 1px solid var(--rand);
  background: var(--grund-gedeckt);
  padding: 48px 0 40px;
  margin-top: 40px;
}

.fuss__innen {
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
  display: grid;
  gap: 32px;
}

@media (min-width: 760px) {
  .fuss__innen {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
}

.marke--klein .marke__wort {
  font-size: 18px;
}

.marke--klein .marke__signet {
  width: 26px;
  height: 26px;
}

.fuss__zeile {
  margin-top: 12px;
  font-size: 14px;
  color: var(--schrift-matt);
}

.fuss__spalte {
  display: grid;
  align-content: start;
  gap: 9px;
}

.fuss__spalte h2 {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--schrift-matt);
  margin-bottom: 3px;
}

.fuss__spalte a {
  font-size: 15px;
  color: var(--schrift-matt);
  text-decoration: none;
  width: fit-content;
}

.fuss__spalte a:hover {
  color: var(--schrift);
  text-decoration: underline;
}

.fuss__extern {
  font-size: 11px;
  margin-inline-start: 5px;
  opacity: 0.6;
}

/* ── 4. Bühne ────────────────────────────────────────────────────────────── */

.buehne {
  position: relative;
  padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 64px);
  overflow: hidden;
}

/* Die Aurora spannt sich über die BÜHNE, nicht über eine feste Höhe.

   Die erste Fassung war `height: 620px`. Das ist eine Zahl, die für den
   deutschen Text auf einem breiten Fenster passt und sonst geraten ist: Der
   Abschnitt wächst mit der Textlänge (Französisch ist hier zwei Zeilen länger
   als Englisch) und mit der Fensterbreite. Wird er kürzer als 620 px, schneidet
   das `overflow: hidden` der Bühne mitten ins Leuchten — eine waagerechte Kante
   quer über die Seite, also das Gegenteil dessen, was ein weicher Farbschleier
   tun soll.

   Die Maske nimmt der Sache die Zahl: Sie blendet relativ zur eigenen Höhe aus,
   und die Höhe ist jetzt die des Abschnitts. Damit liegt der Übergang auf jedem
   Seitenverhältnis und in jeder Sprache an derselben Stelle. */
.buehne__aurora {
  position: absolute;
  inset: -25% -10% -5% -10%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}

[data-thema='dark'] .buehne__aurora {
  opacity: 0.42;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  display: block;
}

.aurora--violett {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  left: 2%;
  top: 4%;
  background: radial-gradient(circle, var(--violett) 0%, transparent 68%);
}

.aurora--cyan {
  width: 34vw;
  height: 34vw;
  max-width: 460px;
  max-height: 460px;
  left: 34%;
  top: 0;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 68%);
}

.aurora--bernstein {
  width: 40vw;
  height: 40vw;
  max-width: 540px;
  max-height: 540px;
  right: 2%;
  top: 10%;
  background: radial-gradient(circle, var(--bernstein) 0%, transparent 68%);
}

.buehne__innen {
  position: relative;
  max-width: 860px;
}

.buehne__titel {
  margin-top: 16px;
  font-size: clamp(40px, 7.4vw, 76px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.buehne__text {
  margin-top: 20px;
  max-width: 62ch;
  font-size: clamp(17px, 1.9vw, 20.5px);
  color: var(--schrift-matt);
}

.buehne__knoepfe {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.buehne__vertrauen {
  margin-top: 26px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--schrift-matt);
  opacity: 0.85;
}

/* Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 570;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 0.16s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.knopf svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.knopf--voll {
  background: linear-gradient(120deg, var(--violett-fuell), #5b4bd0);
  color: var(--auf-violett);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--violett) 70%, transparent);
}

.knopf--voll:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--violett) 78%, transparent);
}

.knopf--leer {
  border-color: var(--rand-stark);
  color: var(--schrift);
  background: var(--karte);
}

.knopf--leer:hover {
  border-color: var(--schrift-matt);
  transform: translateY(-1px);
}

/* ── 5. Produkt-Kacheln ──────────────────────────────────────────────────── */

.abschnitt {
  padding: clamp(48px, 7vw, 84px) 0;
}

.abschnitt--gedeckt {
  background: var(--grund-gedeckt);
  border-block: 1px solid var(--rand);
}

.abschnitt__kopf {
  max-width: 660px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.abschnitt__kopf h2 {
  margin-top: 12px;
  font-size: clamp(28px, 4vw, 40px);
}

.abschnitt__text {
  margin-top: 14px;
  color: var(--schrift-matt);
}

.produkte {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
}

@media (min-width: 940px) {
  .produkte {
    grid-template-columns: 1fr 1fr;
  }
}

/* Wer eine Produktfarbe trägt, holt sie hier — EINE Vorgabe, EIN Umschalter
   (`.produkt--vendo, .spur--vendo` weiter unten). Die vier Zeilen standen
   zuerst nur an `.produkt`; als die Bezugs-Spuren dazukamen, wäre die
   naheliegende Lösung gewesen, sie zu wiederholen. Beim dritten Block hätte
   sie jemand an einer Stelle vergessen, und die Spur trüge dann die
   Vorgabefarbe eines fremden Produkts — plausibel aussehend und falsch. */
.produkt,
.spur {
  --akzent: var(--violett);
  --akzent-fuell: var(--violett-fuell);
  --akzent-text: var(--violett-text);
  --auf-akzent: var(--auf-violett);
}

.produkt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

.produkt--vendo,
.spur--vendo {
  --akzent: var(--vendo);
  --akzent-fuell: var(--vendo-fuell);
  --akzent-text: var(--vendo-text);
  --auf-akzent: var(--auf-vendo);
}

/* ── Zwei Signete, eines je Modus ───────────────────────────────────────────
   PureTenant liegt als gefüllte Kachel vor und trägt auf beiden Gründen. Das
   Vendo4u-Zeichen ist eine Strichmarke ohne Fläche: Sein Navy verschwindet auf
   dunklem Grund. Es kommt deshalb in zwei Dateien, und die Umschaltung hängt
   an `[data-thema]` — dieselbe Bedingung wie das übrige Aussehen.

   Nicht per `prefers-color-scheme` IM SVG: Ein per `<img>` geladenes SVG ist
   ein eigenes Dokument und sieht die Wahl der Seite nicht. Es läge für jeden
   falsch, der den Umschalter im Kopf benutzt. */
.produkt__signet--dunkel {
  display: none;
}

[data-thema='dark'] .produkt__signet--hell {
  display: none;
}

[data-thema='dark'] .produkt__signet--dunkel {
  display: block;
}

/* Der Streifen oben ist die einzige Stelle, an der die Kachel ihre Farbe
   ungebrochen zeigt — auf einer Fläche ohne Schrift ist jeder Ton erlaubt. */
.produkt::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--akzent) 0%,
    color-mix(in srgb, var(--akzent) 40%, transparent) 55%,
    transparent 100%
  );
}

.produkt:hover,
.produkt:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--schatten-hoch);
  border-color: color-mix(in srgb, var(--akzent) 42%, var(--rand));
}

/* Der Schein folgt dem Zeiger. Die beiden Werte setzt `seite.js`; ohne
   JavaScript bleibt er in der Mitte stehen und fällt nicht auf. */
.produkt__schein {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    380px circle at var(--zeiger-x, 50%) var(--zeiger-y, 0%),
    color-mix(in srgb, var(--akzent) 16%, transparent),
    transparent 70%
  );
}

.produkt:hover .produkt__schein {
  opacity: 1;
}

.produkt__kopf {
  display: flex;
  align-items: center;
  gap: 14px;
}

.produkt__signet {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  flex: none;
}

.produkt__name {
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.028em;
}

.produkt__kicker {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

.produkt__tempo {
  align-self: flex-start;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--akzent) 13%, transparent);
  color: var(--akzent-text);
  font-size: 13px;
  font-weight: 620;
}

.produkt__tempo svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}

.produkt__claim {
  margin-top: 18px;
  font-size: clamp(18px, 2.1vw, 21px);
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.produkt__text {
  margin-top: 10px;
  color: var(--schrift-matt);
}

.produkt__punkte {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.produkt__punkte li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}

.produkt__punkte svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  fill: none;
  stroke: var(--akzent-text);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.produkt__fuss {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.knopf--produkt {
  background: var(--akzent-fuell);
  color: var(--auf-akzent);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--akzent) 80%, transparent);
}

.knopf--produkt:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--akzent) 85%, transparent);
}

.produkt__ziel {
  font-size: 12.5px;
  color: var(--schrift-matt);
}

/* ── 6. Karten ───────────────────────────────────────────────────────────── */

.karten {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}

@media (min-width: 780px) {
  .karten--drei {
    grid-template-columns: repeat(3, 1fr);
  }
}

.karte {
  position: relative;
  padding: 26px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}

.karte h3 {
  font-size: 18.5px;
}

.karte p {
  margin-top: 9px;
  font-size: 15px;
  color: var(--schrift-matt);
}

/* ── 6b. Bezugs-Spuren ─────────────────────────────────────────────────────
   Zwei Spuren statt drei gleicher Karten: Der Bezugsweg gehört zum Produkt,
   nicht zur Firma. Begründung in skripte/seite-start.mjs über spur().

   Der Block heisst SPUR und nicht Bahn: `.bahn` ist seit jeher der zentrierte
   Inhaltsstreifen jeder Sektion. Die erste Fassung hiess so, und damit trug
   JEDER Container auf JEDER Seite plötzlich Rahmen, Polster und
   Kartenhintergrund. Kein Gate konnte das sehen — beide Klassen existierten,
   beide waren benutzt. Gefunden hat es der Blick in den fertigen Baum.

   Die Zahl sitzt auf einer Tönung von 13 % über der Karte und trägt
   --akzent-text. Genau diese Paarung rechnet kontrast.mjs für BEIDE
   Produktfarben nach; ein frei gewählter Ton hier wäre ungeprüft. */

.spuren {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}

@media (min-width: 780px) {
  .spuren {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

.spur {
  padding: 26px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}

.spur__kopf {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rand);
}

.spur__punkt {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--akzent-fuell);
}

.spur__kopf h3 {
  font-size: 18.5px;
}

.spur__weg {
  margin-top: 3px;
  font-size: 14px;
  color: var(--schrift-matt);
}

.spur__stationen {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 16px;
}

.spur__station {
  display: flex;
  gap: 13px;
}

.spur__nummer {
  flex: none;
  align-self: start;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--akzent-text);
  background: color-mix(in srgb, var(--akzent) 13%, var(--karte));
}

.spur__station h4 {
  font-size: 16px;
  font-weight: 600;
}

.spur__station p {
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--schrift-matt);
}

.spur__fuss {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rand);
  font-size: 14px;
  color: var(--schrift-matt);
}

.abschnitt--kontakt {
  text-align: center;
}

.kontakt h2 {
  margin-top: 12px;
  font-size: clamp(28px, 4vw, 40px);
}

.kontakt .abschnitt__text {
  margin-inline: auto;
  max-width: 52ch;
}

.kontakt .knopf {
  margin-top: 26px;
}

.kontakt__wege {
  justify-content: center;
}

.kontakt__hinweis {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--schrift-matt);
}

/* ── Die E-Mail-Adresse ─────────────────────────────────────────────────────
   Sie kommt OHNE `href` aus dem Bau — erst `seite.js` macht einen Link daraus
   (Begründung in skripte/mail-schutz.mjs). Beide Zustände müssen deshalb
   aussehen wie das, was sie sind: ohne Skript ein Text, mit Skript ein Link.
   Ein unterstrichener Text, der auf nichts zeigt, wäre ein gebrochenes
   Versprechen an den Zeiger. */
a.mail,
a.tel {
  text-decoration: none;
}

a.mail[href],
a.tel[href] {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rand-stark);
}

a.mail[href]:hover {
  color: var(--schrift);
  text-decoration-color: currentColor;
}

/* Der Knopf bleibt ein Knopf. */
a.mail.knopf,
a.mail.knopf[href] {
  text-decoration: none;
}

/* ── 7. Rechtsseiten ─────────────────────────────────────────────────────── */

.recht__kopf {
  margin-bottom: 34px;
}

.recht__kopf h1 {
  font-size: clamp(30px, 4.6vw, 42px);
}

.recht__untertitel {
  margin-top: 10px;
  color: var(--schrift-matt);
}

.recht__block {
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--rand);
}

.recht__block h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.recht__block p,
.recht__block address {
  color: var(--schrift-matt);
  font-style: normal;
}

.recht__block p + p,
.recht__block address + p {
  margin-top: 8px;
}

.recht__offen {
  font-style: italic;
  opacity: 0.9;
}

.recht__zurueck {
  margin-top: 40px;
  font-size: 15px;
}

.hinweis {
  padding: 22px 24px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund-gedeckt);
}

.hinweis h2 {
  font-size: 16px;
  margin-bottom: 8px;
}

.hinweis p,
.hinweis li {
  font-size: 15px;
  color: var(--schrift-matt);
}

/* Der Kasten mit den offenen Pflichtangaben trägt bewusst die Warnfarbe, nicht
   die Markenfarbe: Er beschreibt einen Zustand, der sich ändern soll. */
.hinweis--offen {
  border-color: color-mix(in srgb, var(--bernstein) 45%, var(--rand));
  background: color-mix(in srgb, var(--bernstein) 8%, var(--grund-gedeckt));
}

.hinweis--offen h2 {
  color: var(--bernstein-text);
}

.hinweis ul {
  margin: 12px 0 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 6px;
}

.hinweis li strong {
  color: var(--schrift);
  font-weight: 600;
}

.hinweis li span {
  opacity: 0.75;
}

/* ── 8. Bewegung ─────────────────────────────────────────────────────────── */

/* Einblenden beim Scrollen. Der Ausgangszustand hängt an `html[data-belebt]`,
   das vom Kopf-Skript kommt: Es muss VOR dem ersten Malen stehen, sonst blitzt
   der Inhalt einmal auf und verschwindet wieder.

   Wer es wieder wegnimmt, ist derselbe: Setzt `seite.js` bis zum `load` kein
   `data-bereit`, entfällt das Verstecken. Sonst bliebe die Seite unsichtbar,
   sobald diese eine Datei nicht ankommt — und ein Effekt, der den Inhalt
   verschluckt, ist kein Effekt. Siehe skripte/layout.mjs. */
html[data-belebt] [data-auftritt] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-belebt] [data-auftritt][data-sichtbar] {
  opacity: 1;
  transform: none;
}

.aurora {
  animation: schweben 22s ease-in-out infinite alternate;
}

.aurora--cyan {
  animation-duration: 28s;
  animation-delay: -6s;
}

.aurora--bernstein {
  animation-duration: 25s;
  animation-delay: -12s;
}

@keyframes schweben {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(2.5%, 4%, 0) scale(1.12);
  }
}

/* Wer Bewegung abbestellt hat, bekommt keine — und zwar auch keine
   „dezente". Das betrifft ausdrücklich das Einblenden: Ein Inhalt, der erst
   nach einer Animation erscheint, ist ohne sie schlicht sofort da. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html[data-belebt] [data-auftritt] {
    opacity: 1;
    transform: none;
  }
}

/* ── Papier ─────────────────────────────────────────────────────────────────

   Impressum und Datenschutzerklärung sind die Seiten, die Einkauf und
   Compliance ausdrucken und ablegen. Bis zum 31.08.2026 gab es dafür keine
   einzige Regel: Gedruckt wurde die Bildschirmfassung mitsamt Kopfleiste,
   Sprachwahl, Themenknopf und Fussnavigation — und jeder Link stand ohne seine
   Adresse da, also als Wort ohne Ziel.

   Was hier NICHT steht, ist `print-color-adjust: exact`. Im A4-Blatt der
   Marketing-Vorlage ist es die eine unverzichtbare Zeile; hier wäre es der
   Fehler. Ein Rechtsdokument in Tiefschwarz kostet eine Patrone und liest sich
   schlechter als schwarz auf weiss. */
@media print {
  html,
  body {
    background: #fff;
    color: #000;
  }

  /* Bedienelemente haben auf Papier keine Wirkung — und was keine Wirkung hat,
     ist dort kein Element, sondern ein Fleck. */
  .sprung,
  .kopf,
  .fuss,
  .buehne__aurora,
  .produkt__schein,
  .recht__zurueck {
    display: none;
  }

  .abschnitt,
  .recht {
    padding: 0;
  }

  .bahn {
    max-width: none;
    padding-inline: 0;
  }

  /* Ein Verweis, dessen Ziel man nicht sieht, ist auf Papier nur ein
     unterstrichenes Wort. Externe Adressen werden deshalb ausgeschrieben —
     interne nicht, die stehen als Pfad da und sagen ohne Domain nichts. */
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    word-break: break-all;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  .recht__block,
  .hinweis,
  .karte,
  .produkt,
  .spur {
    break-inside: avoid;
  }

  /* Ohne diese Zeile druckt der Browser leere Flächen: Die Einblendung hängt an
     einem Beobachter, und was beim Druck nie im Blickfeld war, ist noch bei
     `opacity: 0`. */
  [data-auftritt] {
    opacity: 1;
    transform: none;
  }
}