/* ═══════════════════════════════════════════════════════════════════════════
   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;

  /* ── 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. */
[data-braucht-js] {
  display: none;
}

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

.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 {
  background: linear-gradient(100deg, var(--violett) 0%, var(--cyan) 55%, var(--bernstein) 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;
  }
}

.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__zeile--matt {
  margin-top: 2px;
  opacity: 0.75;
}

.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;
  }
}

.produkt {
  --akzent: var(--violett);
  --akzent-fuell: var(--violett-fuell);
  --akzent-text: var(--violett-text);
  --auf-akzent: var(--auf-violett);

  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 {
  --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__nummer {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--violett-text);
  margin-bottom: 12px;
}

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

.karte p {
  margin-top: 9px;
  font-size: 15px;
  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__adresse {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--schrift-matt);
}

/* ── 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 steht unter `html[data-js]`:
   Ohne JavaScript setzt niemand `data-sichtbar`, und die Seite bliebe
   unsichtbar — ein Effekt, der den Inhalt verschluckt, ist kein Effekt. */
html[data-js] [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-js] [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-js] [data-auftritt] {
    opacity: 1;
    transform: none;
  }
}