/* gambltech.com – Stilblatt nach gt1-konzept.md („Präzision“).
   Drei Markenfarben, Haarlinienraster, Unbounded für Überschriften, Inter für Text und Ziffern.
   Alle Maße in rem, Illustrationen und Marke in px. Keine Verläufe, keine Schatten, keine Radien. */

/*! Inter – Copyright (c) 2016 The Inter Project Authors – SIL Open Font License 1.1, Lizenztext unter /assets/schrift/OFL-Inter.txt */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/schrift/InterVariable-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+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD,
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*! Unbounded – Copyright 2022 The Unbounded Project Authors – SIL Open Font License 1.1, Lizenztext unter /assets/schrift/OFL-Unbounded.txt */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/schrift/Unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-017F, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E9E, U+2000-206F, U+2074, U+20A0-20C0, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Gestaltungs-Token ---------- */
:root {
  color-scheme: dark;
  --grund: #111827;
  --flaeche: #1A2235;
  --flaeche-2: #232D44;
  --weiss: #FFFFFF;
  --text: #E5E9F0;
  --text-2: #A3ACBA;
  --akzent: #00B894;
  --akzent-dunkel: #00A383;
  --akzent-kontrast: #111827;
  --linie: rgb(255 255 255 / 0.12);
  --linie-stark: rgb(255 255 255 / 0.40);
  --balken-1: rgb(255 255 255 / 0.24);
  --balken-2: rgb(255 255 255 / 0.14);
  --schrift-anzeige: 'Unbounded', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --schrift-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mass: 0.5rem;
  --rand: 1rem;
  --marke-h: 1.75rem;
  --abschnitt-abstand: 4rem;
  --dauer-kurz: 120ms;
  --dauer-mittel: 360ms;
}

@media (min-width: 48em) {
  :root { --rand: 2.5rem; --marke-h: 2rem; --abschnitt-abstand: 6rem; }
}

@media (min-width: 80em) {
  :root { --rand: 4rem; }
}

/* ---------- Grundgerüst ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  hyphens: auto;
}

@media (min-width: 48em) {
  body { font-size: 1.0625rem; }
}

main { display: block; min-width: 0; }
img, svg { max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl { margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; hyphens: manual; text-wrap: balance; overflow-wrap: anywhere; }

a { color: inherit; }
.verweis, .fliesstext a, .erklaerung a, .kleindruck a, .vierhundertvier-saetze a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-2);
  text-underline-offset: 0.15em;
}
.verweis:hover, .fliesstext a:hover, .erklaerung a:hover, .kleindruck a:hover, .vierhundertvier-saetze a:hover {
  text-decoration-color: var(--akzent);
}
/* Verweis als eigene Zeile unter einem Satz (Kontakt, Themen) */
.verweis-zeile {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 0.375rem;
}

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

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

.nur-schreibtisch { display: none; }
.nur-druck { display: none; }

@media (min-width: 48em) {
  .nur-schreibtisch { display: block; }
  .nur-handy { display: none; }
}

.sprunglink {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--flaeche);
  color: var(--weiss);
  border: 2px solid var(--akzent);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-300%);
}
.sprunglink:focus { transform: none; }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}
.knopf-primaer:focus-visible { outline-color: var(--weiss); }
.marke:focus-visible { outline-offset: 4px; }

/* ---------- Typografie ---------- */
.anzeige {
  font-family: var(--schrift-anzeige);
  font-size: clamp(2.125rem, 1.25rem + 3.2vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--weiss);
  max-width: 14ch;
}

.seitentitel {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--weiss);
}

.abschnittstitel {
  font-family: var(--schrift-anzeige);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--weiss);
  margin: 0;
  hyphens: manual;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.zwischentitel {
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--text);
}

.einleitung {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  max-width: 34rem;
  color: var(--text);
}

.fliesstext {
  max-width: 38rem;
  line-height: 1.6;
}

.etikett, .fusszeile-titel, .rahmen-etikett {
  font-family: var(--schrift-text);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}

.kleindruck {
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 32rem; /* ≈ 70 Zeichen bei 14 px; 38 rem ergaben 83–86 Zeichen je Zeile */
  color: var(--text-2);
}

.grossziffer {
  display: block;
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  line-height: 1;
  color: var(--weiss);
}

.produktnummer {
  font-family: var(--schrift-anzeige);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1;
  color: var(--text-2);
}

@media (min-width: 48em) {
  .zwischentitel { font-size: 1.25rem; }
  .etikett, .fusszeile-titel, .rahmen-etikett { font-size: 0.8125rem; }
}

.pfeil {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 0.4em;
  vertical-align: -1px;
  flex: none;
}

/* ---------- Kopfzeile ---------- */
.kopfzeile {
  border-bottom: 1px solid var(--linie);
}

.kopfzeile-innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'marke sprache'
    'navigation navigation';
  align-items: center;
  column-gap: 1rem;
}

.marke {
  grid-area: marke;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 3.5rem;
  min-width: 2.75rem;
  margin-left: calc(var(--marke-h) * -0.154);
  text-decoration: none;
}

.marke-bild {
  display: block;
  height: var(--marke-h);
  width: auto;
}

.marke-druck { display: none; }

@media (max-width: 29.9375em) {
  .marke { margin-left: 0; }
}

.sprachwechsel {
  grid-area: sprache;
  display: inline-flex;
  align-items: stretch;
  justify-self: end;
  height: 2.75rem;
  border: 1px solid var(--linie-stark);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.sprachwechsel > * {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  color: var(--text-2);
  text-decoration: none;
}

.sprachwechsel > * + * { border-left: 1px solid var(--linie); }
.sprachwechsel-aktiv { color: var(--weiss); }
.sprachwechsel a:hover { color: var(--weiss); }

.navigation {
  grid-area: navigation;
  border-top: 1px solid var(--linie);
  margin: 0 calc(-1 * var(--rand));
  padding: 0 var(--rand);
}

.navigation-leiste {
  display: flex;
  gap: 0.625rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.navigation-leiste::-webkit-scrollbar { display: none; }
.navigation-leiste li { flex: none; }

.navigation-eintrag {
  display: inline-block;
  padding: 0.75rem 0;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.navigation-eintrag:hover { color: var(--weiss); }
.navigation-eintrag[aria-current='page'] {
  color: var(--weiss);
  border-bottom-color: var(--akzent);
}

@media (min-width: 48em) {
  .kopfzeile-innen {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'marke navigation sprache';
    height: 4.5rem;
    column-gap: 2rem;
  }
  .marke { min-height: 0; }
  .navigation {
    border-top: 0;
    margin: 0;
    padding: 0;
    justify-self: end;
    min-width: 0;
  }
  .navigation-leiste { gap: 1.5rem; overflow: visible; }
  .navigation-eintrag { font-size: 0.9375rem; padding: 0.5rem 0; }
}

/* ---------- Abschnitte ---------- */
.auftakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-top: 4rem;
}

.auftakt-text { min-width: 0; }
.auftakt-bild { min-width: 0; }
.auftakt .einleitung { margin-top: 1.5rem; }

/* Zweispaltig erst ab 72 em (wie .zweiteilig): bei 64 em blieben neben dem 514 px breiten Quotenbrett nur
   382 px für den Display-Satz, der dann in drei Zeilen brach (Konzept 3: höchstens zwei). */
@media (min-width: 72em) {
  .auftakt {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 3rem;
    align-items: start;
    padding-top: 5rem;
  }
}

.titelblock {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1rem;
  padding-top: 4rem;
}
.titelblock-inhalt { grid-column: 1 / -1; min-width: 0; }
.titelblock .etikett + .seitentitel { margin-top: 0.75rem; }
.titelblock .einleitung { margin-top: 1.5rem; }

@media (min-width: 48em) {
  .titelblock { column-gap: 1.5rem; padding-top: 5rem; }
  .titelblock-inhalt { grid-column: 1 / 8; }
}

.produktbild { margin-top: 3rem; }

.abschnitt {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 0.75rem;
  border-top: 1px solid var(--linie);
  margin-top: var(--abschnitt-abstand);
  padding-top: 1.5rem;
}
.abschnitt-etikett { grid-column: 1 / -1; }
.abschnitt-inhalt { grid-column: 1 / -1; min-width: 0; }
.abschnitt-inhalt > .abschnittstitel + * { margin-top: 1.5rem; }

@media (min-width: 48em) {
  .abschnitt { column-gap: 1.5rem; padding-top: 2rem; }
  .abschnitt-etikett { grid-column: 1 / 4; }
  .abschnitt-inhalt { grid-column: 4 / 13; }
}

.zweiteilig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.zweiteilig > * { min-width: 0; }

@media (min-width: 72em) {
  .zweiteilig {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 3rem;
  }
}

.textblock {
  border-top: 1px solid var(--linie);
  margin-top: 3rem;
  padding-top: 1.5rem;
  max-width: 38rem;
}
.textblock .zwischentitel { margin-top: 2rem; }
.textblock .zwischentitel:first-child { margin-top: 0; }
.textblock .zwischentitel + p { margin-top: 0.5rem; }

/* ---------- Knöpfe ---------- */
.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 0;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 0;
  overflow-wrap: anywhere;
}

.knopf-primaer {
  background: var(--akzent);
  color: var(--akzent-kontrast);
  transition: background-color var(--dauer-kurz);
}
.knopf-primaer:hover { background: var(--akzent-dunkel); }

.knopf-sekundaer {
  border: 1px solid var(--linie-stark);
  color: var(--weiss);
  transition: border-color var(--dauer-kurz);
}
.knopf-sekundaer:hover { border-color: var(--weiss); }

@media (max-width: 47.9375em) {
  .auftakt .knopf, .titelblock .knopf, .kontaktzeile .knopf { width: 100%; }
}

/* ---------- Begriffstabelle, Listen, Produktleiste, Zahlentafel ---------- */
.begriffzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linie);
}
.begriffzeile:last-child { border-bottom: 1px solid var(--linie); }

.begriff {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text);
}

.erklaerung {
  margin: 0;
  max-width: 38rem;
}

.begriffzeile .etikett { align-self: start; padding-top: 0.2rem; }

@media (min-width: 48em) {
  .begriffzeile { grid-template-columns: 14rem minmax(0, 1fr); padding: 1.25rem 0; }
  .begriffzeile-gestapelt { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .begriffzeile-deckung { grid-template-columns: 14rem minmax(0, 1fr) auto; }
}

.vorab-live {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.quadrat {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.5em;
  background: var(--weiss);
  vertical-align: 1px;
}

.liste-schlicht {
  list-style: none;
  margin-top: 1rem;
  font-size: 0.9375rem;
}
.liste-schlicht li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--linie);
}
.liste-schlicht li:last-child { border-bottom: 1px solid var(--linie); }

.dreispalter {
  display: grid;
  gap: 2rem 1.5rem;
}
.dreispalter > div {
  min-width: 0;
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
}
.dreispalter .zwischentitel { margin-top: 0.75rem; }

@media (min-width: 48em) {
  .dreispalter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.produktleiste { list-style: none; }
.produktzeile { border-top: 1px solid var(--linie); }
.produktzeile:last-child { border-bottom: 1px solid var(--linie); }

.produktzeile a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'nummer name pfeil'
    'satz satz satz';
  column-gap: 1rem;
  row-gap: 0.5rem;
  align-items: baseline;
  margin: 0 -0.5rem;
  padding: 1.25rem 0.5rem;
  color: var(--text);
  text-decoration: none;
}
.produktzeile a:hover { background: var(--flaeche); }
.produktzeile a:hover .pfeil { transform: translateX(4px); }

.produktzeile .produktnummer { grid-area: nummer; }
.produktname {
  grid-area: name;
  font-family: var(--schrift-anzeige);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--weiss);
}
.produktsatz { grid-area: satz; margin: 0; max-width: 38rem; }
.produktzeile .pfeil {
  grid-area: pfeil;
  align-self: center;
  color: var(--weiss);
  margin: 0;
  transition: transform var(--dauer-kurz);
}

@media (min-width: 48em) {
  /* Namensspalte wächst mit der Namensschrift (clamp 22 → 28 px, „Atlas Plattform“ ≈ 10 em): feste 15 rem
     ließen den längsten Namen ab 1024 px in zwei Zeilen brechen, die erste Zeile war höher als die anderen. */
  .produktzeile a {
    grid-template-columns: 4rem clamp(14.5rem, 12.5rem + 6.4vw, 18rem) minmax(0, 1fr) auto;
    grid-template-areas: 'nummer name satz pfeil';
    align-items: center;
    margin: 0 -0.75rem;
    padding: 1.5rem 0.75rem;
  }
}

.zahlentafel {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
}
.zahl {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.zahl-text { font-size: 0.875rem; color: var(--text-2); }

@media (min-width: 48em) {
  .zahlentafel { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; }
  .zahl { border-bottom: 0; padding: 0.5rem 1.5rem; }
  .zahl:first-child { padding-left: 0; }
  .zahl:last-child { border-right: 0; }
}

.sprachenzeile {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
}
.sprachzelle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--weiss);
}
.sprachzelle .pfeil { margin: 0; color: var(--text-2); }
.sprachenzeile + .fliesstext { margin-top: 1.5rem; }

/* Unter 30 em sind die sechs Zellen 54,5 px breit; mit 0,5 rem Innenabstand und 14 px berührte der Pfeil
   hinter „CKB“ die Haarlinie (gemessen: 6 px Luft nötig, 13 px Kürzel und 0,375 rem Innenabstand geben 7). */
@media (max-width: 29.9375em) {
  .sprachzelle { padding: 0.75rem 0.375rem; gap: 0.125rem; font-size: 0.8125rem; }
}

@media (min-width: 48em) {
  .sprachenzeile { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sprachzelle { font-size: 0.9375rem; }
}

/* ---------- Rahmen-Hülle ---------- */
.rahmen {
  margin: 0;
  width: max-content;
  max-width: 100%;
  background: var(--flaeche);
  border: 1px solid var(--linie);
}

.rahmen-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 2.25rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--linie);
}

.rahmen-titel {
  display: block;
  width: 4.5rem;
  height: 0.5rem;
  background: var(--balken-1);
}

.rahmen-etikett { white-space: nowrap; }

.rahmen-inhalt { padding: 0.75rem 0; }

.rahmen-rollbar .rahmen-inhalt {
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.rahmen-rollbar .ill { max-width: none; }

@media (min-width: 48em) {
  .rahmen-inhalt { padding: 1rem; }
}

/* ---------- Kontaktzeile, Adresse, Platzhalter, 404 ---------- */
.kontaktzeile .knopfzeile { margin-top: 1.5rem; }
.kontaktzeile .kleindruck { margin-top: 1rem; }

.adresse {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--weiss);
  text-decoration: none;
  border-bottom: 2px solid var(--akzent);
  overflow-wrap: anywhere;
}
.adresse + .fliesstext { margin-top: 1.25rem; }

.platzhalter {
  max-width: 38rem;
  margin: 0;
  padding: 1.5rem;
  background: var(--flaeche);
  border-left: 3px solid var(--akzent);
  color: var(--weiss);
}
.platzhalter-gross { padding: 2rem; }
.platzhalter + .kleindruck { margin-top: 1.5rem; }

.vierhundertvier {
  padding: 4rem 0;
  text-align: center;
}
.vierhundertvier-symbol {
  display: inline-block;
  width: 64px;
  height: 64px;
}
.vierhundertvier-ziffer {
  font-family: var(--schrift-anzeige);
  font-weight: 600;
  font-size: clamp(3.5rem, 2rem + 6vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--weiss);
  margin-top: 1.5rem;
}
.vierhundertvier-saetze {
  list-style: none;
  max-width: 34rem;
  margin: 2.5rem auto 0;
  text-align: left;
}
.vierhundertvier-saetze li {
  padding: 1rem 0;
  border-top: 1px solid var(--linie);
}
.vierhundertvier-saetze li:last-child { border-bottom: 1px solid var(--linie); }

/* ---------- Fußzeile ---------- */
.fusszeile {
  border-top: 1px solid var(--linie);
  margin-top: var(--abschnitt-abstand);
  padding: 3rem 0 2rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.fusszeile-spalten {
  display: grid;
  gap: 2rem 1.5rem;
}
.fusszeile-spalte { min-width: 0; }
.fusszeile-titel { margin-bottom: 0.75rem; }
.fusszeile ul { list-style: none; }
.fusszeile li { margin: 0.35rem 0; }
.fusszeile a {
  color: var(--text-2);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fusszeile a:hover { color: var(--weiss); }

.fusszeile-kleindruck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  color: var(--text-2);
}
.fusszeile-kleindruck p { margin: 0; }
.fusszeile-marke {
  display: block;
  height: 1.5rem;
  width: auto;
  margin-left: calc(1.5rem * -0.154);
}
.fusszeile-kleindruck .sprachwechsel { margin-left: auto; }

@media (min-width: 48em) {
  .fusszeile-spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Illustrationen (Inline-SVG) ---------- */
.ill { display: block; }
.ill-handy { width: 100%; height: auto; }
.ill text {
  font-family: var(--schrift-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ill-ziffer { font-size: 13px; }
.ill-ziffer-klein { font-size: 12px; }
.ill-kopf { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--text-2); }
.ill-kopf-gross { font-size: 13px; }
.ill-weiss { fill: var(--weiss); }
.ill-text-2 { fill: var(--text-2); }
.ill-akzent { fill: var(--akzent); }
.ill-flaeche-2 { fill: var(--flaeche-2); }
.ill-balken-1 { fill: var(--balken-1); }
.ill-balken-2 { fill: var(--balken-2); }
.ill-stufe-1 { fill: rgb(255 255 255 / 0.9); }
.ill-stufe-2 { fill: rgb(255 255 255 / 0.7); }
.ill-stufe-3 { fill: rgb(255 255 255 / 0.5); }
.ill-stufe-4 { fill: rgb(255 255 255 / 0.35); }
.ill-stufe-5 { fill: rgb(255 255 255 / 0.25); }
.ill-linie { fill: none; stroke: var(--linie); }
.ill-linie-rand { fill: none; stroke: var(--linie); }
.ill-linie-stark-rand { fill: none; stroke: var(--linie-stark); }
.ill-akzent-rand { fill: none; stroke: var(--akzent); }
.ill-text-2-rand { fill: none; stroke: var(--text-2); }
.ill-chip-aktiv { fill: var(--flaeche-2); stroke: var(--linie-stark); }

.ill-strich { visibility: hidden; }
.ist-aktiv .ill-strich { visibility: visible; }
.ill-zelle text { transition: fill 480ms; }
.ill-zelle.tickt text { fill: var(--akzent); transition: fill var(--dauer-kurz); }

/* ---------- Bewegung ---------- */
@keyframes zeile-ein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.auftakt .ill-zeile {
  animation: zeile-ein var(--dauer-mittel) ease-out both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.ill-zeile-1 { --i: 0; }
.ill-zeile-2 { --i: 1; }
.ill-zeile-3 { --i: 2; }
.ill-zeile-4 { --i: 3; }
.ill-zeile-5 { --i: 4; }
.ill-zeile-6 { --i: 5; }
.ill-zeile-7 { --i: 6; }
.ill-zeile-8 { --i: 7; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0ms !important;
  }
  .produktzeile a:hover .pfeil { transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --linie: rgb(255 255 255 / 0.30);
    --balken-2: rgb(255 255 255 / 0.22);
  }
  :focus-visible { outline-width: 3px; }
}

@media (forced-colors: active) {
  .rahmen, .knopf-sekundaer, .knopf-primaer, .sprachwechsel, .platzhalter { border: 1px solid CanvasText; }
  .ill-akzent { fill: Highlight; }
  .ill-akzent-rand { stroke: Highlight; }
  .ill-balken-1, .ill-balken-2, .ill-flaeche-2, .ill-weiss, .ill-text-2 { fill: CanvasText; }
  .ill-linie, .ill-linie-rand, .ill-linie-stark-rand, .ill-text-2-rand { stroke: CanvasText; }
  .navigation-eintrag[aria-current='page'] { border-bottom-color: Highlight; }
}

/* ---------- Druck ---------- */
@media print {
  :root {
    --grund: #FFFFFF;
    --flaeche: #FFFFFF;
    --weiss: #111827;
    --text: #111827;
    --text-2: #4A4F5B;
    --linie: #C8CCD2;
    --linie-stark: #70747D;
  }
  body { font-size: 11pt; }
  .sprunglink, .navigation, .sprachwechsel, .rahmen, .knopf-sekundaer, .fusszeile-spalten, .fusszeile-marke, .marke picture { display: none; }
  .marke-druck { display: block; height: 24px; width: auto; }
  .knopf-primaer { background: none; color: var(--text); border: 1px solid var(--akzent); }
  .adresse { border-bottom-color: var(--akzent); }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.85em; color: var(--text-2); }
  .zweiteilig { grid-template-columns: minmax(0, 1fr); }
}