/* VivaPix — Oeffentlicher Auftritt
   ==========================================================================
   Die zusammengesetzten Bausteine der Startseite. Grundlage sind tokens.css
   und components.css; hier steht kein Farbwert und keine Schriftgroesse, die
   nicht von dort kommt.

   Was hier trotzdem als Zahl steht, sind *Layoutmasse* — die Breite einer
   Karte im Rail, die Groesse eines Icon-Feldes. Die Abstandsskala aus der
   Vorgabe beschreibt Abstaende, nicht Bauteilgroessen; die wenigen noetigen
   Masse stehen deshalb gebuendelt ganz oben statt verstreut im Text.

   Reihenfolge
     1. Masse
     2. Kopfleiste
     3. Wiederkehrende Kleinteile
     4. Hero
     5. Bildvergleich
     6. Vorteile
     7. Live-Uebersicht
     8. Ablauf
     9. Schlussaufruf
    10. Fusszeile
   ========================================================================== */


/* 1. Masse ----------------------------------------------------------------- */
:root {
  --rail-card:   20rem;   /* Breite einer Event-Karte im waagerechten Rail */
  --panel-intro: 21rem;   /* Textspalte neben dem Event-Rail */
  --icon-field:  2.75rem; /* Kantenlaenge der farbigen Icon-Flaeche = 44px */
  --grip-size:   2.75rem; /* Griff des Bildvergleichs, dieselbe Touch-Flaeche */
}


/* 2. Kopfleiste ------------------------------------------------------------
   Die Leiste schwebt als eigene Flaeche auf der Seite statt als Balken am
   Rand zu kleben. Das ist der erste Eindruck und soll nach Kreativplattform
   aussehen, nicht nach Verwaltung. */
.siteheader {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: var(--space-4) var(--page-padding) 0;
}

.siteheader__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Zuckerguss: wo backdrop-filter fehlt, bleibt die halbtransparente
     Flaeche und die Leiste funktioniert unveraendert. */
  backdrop-filter: blur(14px) saturate(1.4);
}


.sitenav {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-inline: auto;
}
.sitenav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--duration-hover) var(--ease-out),
              background var(--duration-hover) var(--ease-out);
}
.sitenav a:hover { color: var(--color-text); background: var(--overlay-hover); }

.siteheader__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}
.siteheader__login { display: none; }
.siteheader__burger { display: inline-flex; }

/* Unter 640px reichen Logo, Themeschalter, Knopf und Burger nicht mehr
   nebeneinander: die Leiste wuerde 435px breit und schoebe die Seite
   waagerecht. Der Knopf weicht deshalb ins Schubfach — der Burger kann das
   nicht, ohne sich selbst zu verstecken. */
@media (max-width: 639px) {
  .siteheader__cta { display: none; }
}

@media (min-width: 1024px) {
  .sitenav { display: flex; }
  .siteheader__actions { margin-inline-start: 0; }
  .siteheader__login { display: inline-flex; }
  .siteheader__burger { display: none; }
}

.mobilnav {
  display: flex;
  flex-direction: column;
  max-width: var(--content-width);
  margin: var(--space-2) auto 0;
  padding: var(--space-2);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.mobilnav a {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.mobilnav a:hover { background: var(--overlay-hover); }

/* Der Aufruf im Schubfach traegt den Markenton, damit er sich von den
   Navigationszeilen darueber abhebt. */
.mobilnav__cta {
  margin-top: var(--space-2);
  background: var(--gradient-primary);
  color: var(--color-text-on-fill) !important;
  font-weight: var(--weight-semibold) !important;
  text-align: center;
}
@media (min-width: 1024px) { .mobilnav { display: none !important; } }



/* 3. Wiederkehrende Kleinteile --------------------------------------------- */

/* Die Zeile ueber einer Ueberschrift. Kleiner Punkt, Grossbuchstaben. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}
/* Der Punkt traegt den Ton des Bereichs, in dem er steht: Coral auf der
   Marke, Teal im B2B-Teilbaum. Deshalb --color-primary und nicht --accent. */
.eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: none;
}

/* Schrift im Markenverlauf. Ohne background-clip bliebe der Text
   unsichtbar — deshalb erst die Vollfarbe, dann der Verlauf nur dort, wo
   der Browser ihn wirklich kann. */
.gradtext { color: var(--color-primary-ink); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradtext {
    background-image: linear-gradient(100deg,
        var(--color-primary) 0%,
        var(--color-primary-violet) 38%,
        var(--color-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}


/* 4. Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-8) var(--page-padding) var(--space-7);
}

/* Der farbige Schimmer hinter dem Hero. Zwei sehr weiche Farbwolken, keine
   Kanten — er soll auffallen, ohne dass man ihn benennen kann. */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 46% at 82% 8%,
        color-mix(in srgb, var(--color-primary-violet) 22%, transparent), transparent 72%),
    radial-gradient(42% 42% at 104% 62%,
        color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 70%),
    radial-gradient(36% 40% at -8% 78%,
        color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 70%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
/* Die Textspalte ist die breitere. Umgekehrt passt "auf einem neuen Level."
   nicht in eine Zeile, und der Verlaufstext bricht mitten im Wortpaar um. */
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-7); }
}

.hero__title { max-width: 22ch; text-wrap: balance; }
.hero__lead  { max-width: 46ch; color: var(--color-text-muted); }
.hero__actions { gap: var(--space-3); margin-top: var(--space-2); }


/* 5. Bildvergleich ---------------------------------------------------------
   Zwei Bilder uebereinander; das obere wird beschnitten. Der Regler ist ein
   echtes <input type="range">: Maus, Finger und Tastatur funktionieren
   damit ohne eigene Zeigerlogik, und der Wert ist auch fuer Screenreader
   ansagbar.

   Alles ausser dem Regler ist pointer-events: none, damit der Griff die
   Bedienung nicht abfaengt. */
.compare {
  position: relative;
  isolation: isolate;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-hero);
  overflow: hidden;
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-lg);
}

/* Das <picture> um die Bilder ist nur Traeger der WebP-Quelle; das
   Layout haengt am <img>. display: contents nimmt den Wrapper aus dem
   Fluss, damit position: absolute weiter an .compare greift. */
.compare > picture,
.compare__clip > picture { display: contents; }

.compare__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* clip-path statt einer Breitenaenderung: sonst wuerde das obere Bild beim
   Schieben gestaucht statt aufgedeckt. */
.compare__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.compare__range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  /* Senkrecht scrollt die Seite weiter, waagerecht gehoert die Geste dem
     Regler. Ohne das faengt der Regler auf dem Telefon das Scrollen ab. */
  touch-action: pan-y;
}
.compare__range::-webkit-slider-thumb { appearance: none; width: var(--grip-size); height: 100%; }
.compare__range::-moz-range-thumb { width: var(--grip-size); height: 100%; border: none; background: transparent; }
.compare__range:focus { outline: none; }

.compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: var(--color-text-on-fill);
  pointer-events: none;
}

.compare__grip {
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--grip-size);
  height: var(--grip-size);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.compare__range:focus-visible ~ .compare__grip {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.compare__tag {
  position: absolute;
  bottom: var(--space-4);
  z-index: 2;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--overlay-scrim);
  color: var(--color-text-on-fill);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.compare__tag--links  { left: var(--space-4); }
.compare__tag--rechts { right: var(--space-4); }


/* 6. Vorteile --------------------------------------------------------------
   Fuenf Punkte in einer Reihe, getrennt durch feine Linien statt durch
   Kaesten. */
.usps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .usps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); } }
@media (min-width: 1024px) { .usps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.usp {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
@media (min-width: 1024px) {
  .usp + .usp::before {
    content: "";
    position: absolute;
    left: calc(var(--space-6) / -2);
    top: var(--space-1);
    bottom: var(--space-1);
    width: 1px;
    background: var(--color-border);
  }
}

.usp__icon {
  display: grid;
  place-items: center;
  width: var(--icon-field);
  height: var(--icon-field);
  border-radius: var(--radius-sm);
  flex: none;
}
.usp__icon--primary { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.usp__icon--accent  { background: var(--color-accent-soft);  color: var(--color-accent-ink); }
.usp__icon--warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }

.usp__body  { display: flex; flex-direction: column; gap: var(--space-1); }
.usp__titel { font-size: var(--text-body); font-weight: var(--weight-semibold); }


/* 6b. Zielgruppen ----------------------------------------------------------
   Die Weiche unter dem Hero. Zwei Karten, jede in ihrem eigenen Ton.

   Der Ton kommt nicht aus einer Sonderregel je Karte, sondern daraus, dass
   die Karte ihre eigenen --karte-* Werte setzt und alle Bauteile darin nur
   noch diese lesen. Eine dritte Karte braucht damit drei Zeilen, keine
   dreizehn. */
.zielgruppen__kopf { margin-bottom: var(--space-6); }
.zielgruppen__lead { max-width: 52ch; }

.zielgruppen__liste {
  display: grid;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .zielgruppen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.zgcard {
  --karte-ton:  var(--color-primary);
  --karte-ink:  var(--color-primary-ink);
  --karte-soft: var(--color-primary-soft);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}
.zgcard--b2c { --karte-ton: var(--color-b2c); --karte-ink: var(--color-b2c-ink); --karte-soft: var(--color-b2c-soft); }
.zgcard--b2b { --karte-ton: var(--color-b2b); --karte-ink: var(--color-b2b-ink); --karte-soft: var(--color-b2b-soft); }

/* Die farbige Kante oben. Sie macht den Ton der Karte sichtbar, ohne dass
   die Flaeche selbst eingefaerbt werden muss — eine getoente Karte neben
   einer weissen wirkt sonst wie die ausgewaehlte von beiden. */
.zgcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--karte-ton);
}

.zgcard__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--karte-soft);
  color: var(--karte-ink);
  flex: none;
}
.zgcard__icon .icon { width: 1.5rem; height: 1.5rem; }

.zgcard__titel { margin: 0; font-weight: var(--weight-bold); }

/* Der Link spannt sich ueber die ganze Karte auf. Vorgelesen wird trotzdem
   nur der Titel — deshalb liegt der Anker hier und nicht um die Karte. */
.zgcard__link { color: inherit; text-decoration: none; }
.zgcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.zgcard:has(.zgcard__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.zgcard__link:focus-visible { outline: none; }

.zgcard__text { max-width: 42ch; }

.zgcard__punkte {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 auto;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
.zgcard__punkte li { display: flex; align-items: flex-start; gap: var(--space-2); }
.zgcard__haken { margin-top: 0.2em; color: var(--karte-ink); flex: none; }

.zgcard__cta { margin: var(--space-5) 0 0; }

/* Optisch ein Button, technisch keiner: der ganze Kartenlink liegt schon
   darueber. Ein zweiter echter Button waere ein zweites Tabstopp-Ziel zum
   selben Ziel. */
.zgcard__btn {
  background: var(--karte-ton);
  color: var(--color-text-on-fill);
  border: none;
  pointer-events: none;
}
.zgcard--b2b .zgcard__btn { background: var(--karte-ink); }
.zgcard:hover .zgcard__btn { transform: translateY(var(--lift-hover)); }

.zielgruppen__api {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  text-align: center;
}
.zielgruppen__api .icon { color: var(--color-api-ink); flex: none; }
.zielgruppen__api a { color: var(--color-api-ink); font-weight: var(--weight-medium); }


/* 6c. Zielgruppenseiten ----------------------------------------------------
   Die beiden Unterseiten teilen sich alle Bauteile mit der Startseite und
   unterscheiden sich nur im Ton. Statt jede Komponente zu verdoppeln,
   schreibt .ton--* die Markentokens fuer seinen Teilbaum um — Buttons,
   Eyebrow-Punkt, Verlaufsschrift und Glow ziehen ohne eigene Regel nach.

   Kopfleiste und Fusszeile liegen ausserhalb und bleiben deshalb im
   Markenton. Das ist Absicht: die Marke ist Coral, der Weg ist es nicht. */
.ton--b2c {
  --color-primary:        var(--color-b2c);
  --color-primary-ink:    var(--color-b2c-ink);
  --color-primary-strong: var(--color-b2c-ink);
  --color-primary-soft:   var(--color-b2c-soft);
  --color-accent:         var(--color-b2c);
}
.ton--b2b {
  --color-primary:        var(--color-b2b);
  --color-primary-ink:    var(--color-b2b-ink);
  --color-primary-strong: var(--color-b2b-ink);
  --color-primary-soft:   var(--color-b2b-soft);
  --color-primary-violet: #0E7C7A;  /* zweiter Halt: Teal laeuft ins Dunkle */
  --color-accent:         var(--color-b2b);
  --gradient-primary: linear-gradient(135deg, #13C6C3 0%, #0E7C7A 100%);
  --glow-primary: 0 12px 28px rgba(19, 198, 195, 0.26);
}

/* Der Hero ohne Bild braucht keine zwei Spalten. */
.hero--schlank { padding-bottom: var(--space-6); }
.hero__inner--einspaltig { display: block; }
.hero__title--breit { max-width: 20ch; }

.merkmale__kopf { margin-bottom: var(--space-6); }

.merkmale {
  display: grid;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .merkmale { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.merkmal { display: grid; gap: var(--space-2); align-content: start; }
.merkmal__icon {
  display: grid;
  place-items: center;
  width: var(--icon-field);
  height: var(--icon-field);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}
.merkmal__titel { font-weight: var(--weight-semibold); }

/* Das dunkle Vertrauensband der Markenvorgabe. */
.vertrauensband {
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-hero);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}
.vertrauensband__liste {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
@media (min-width: 640px)  { .vertrauensband__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vertrauensband__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.vertrauen { display: grid; gap: var(--space-2); }
.vertrauen b { font-weight: var(--weight-bold); letter-spacing: var(--tracking-heading); }
.vertrauen span { color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent); }

/* Die Bruecke zum jeweils anderen Weg. */
/* Ein leiser Verweis am Ende eines Abschnitts: mittig, mit Symbol,
   gedaempft. Zwei Verwendungen, eine Regel - `.usps__mehr` sah bis zum
   23.08.2026 gar nicht gestaltet aus und stand linksbuendig unter dem
   Raster. Solange der Linktext ein ganzer Satz war, las sich das noch
   wie ein Nachsatz; seit er kurz ist, wirkte er verwaist.

   Gemeinsame Regel statt zweier gleicher: zwei Kopien laufen
   auseinander, sobald jemand eine davon anfasst. */
.wegwechsel,
.usps__mehr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  text-align: center;
}
.wegwechsel .icon,
.usps__mehr .icon { flex: none; }
.wegwechsel a,
.usps__mehr a { color: var(--color-primary-ink); font-weight: var(--weight-medium); }


/* 6d. Motive ---------------------------------------------------------------
   Die Motivseite: die Aufnahme oben, darunter je Welt ein Kopf mit Szenen
   als Chips und ein Raster echter Bilder. Kein Platzhalter - eine Welt
   ohne Bild ist schmaler, nicht leerer. */
.aufnahme {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .aufnahme { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--gutter); }
}
.aufnahme__bild { margin: 0; padding: var(--space-3); }
.aufnahme__bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.aufnahme__bild figcaption { margin-top: var(--space-3); }
.aufnahme__text { max-width: 44ch; }

.motivwelten__lead { max-width: 60ch; }
/* Die Sprungziele aus dem Hero: ohne Abstand liegt die Ueberschrift nach
   dem Sprung unter der schwebenden Kopfleiste. */
#welten, #eigene { scroll-margin-top: 6rem; }
.motivwelten__hinweis { max-width: 40ch; align-self: center; }

.motivwelt {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 1024px) {
  .motivwelt { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gutter); }
  /* Ohne Bilder rueckt der Kopf nicht in eine leere Spalte. */
  .motivwelt--ohne { grid-template-columns: minmax(0, 1fr); }
}
.motivwelt__kopf { display: flex; flex-direction: column; gap: var(--space-3); }
.motivwelt__szenen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.motivraster {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .motivraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Drei Bilder nebeneinander, sobald Platz ist; eines darf breit sein. */
  .motivraster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .motivraster--1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.motivkarte {
  padding: 0;
  overflow: hidden;
}
.motivkarte picture,
.motivkarte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.motivkarte__titel {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-weight: var(--weight-medium);
}


/* 7. Live-Uebersicht ------------------------------------------------------- */
.livesection {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-8) var(--page-padding) 0;
}

.livepanel {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .livepanel {
    grid-template-columns: var(--panel-intro) minmax(0, 1fr);
    gap: var(--space-7);
  }
}
.livepanel__intro > p:last-child { margin-top: var(--space-2); }

/* Auf schmalen Schirmen ein waagerechtes Rail: die naechste Karte ist
   angeschnitten sichtbar und zeigt damit, dass es weitergeht — besser als
   eine halb leere zweite Zeile. Ab Desktop passen alle nebeneinander, dann
   waere ein Rail nur eine kuenstliche Huerde. */
.eventrail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(var(--rail-card), 78vw), 1fr);
  gap: var(--gutter);
  margin: 0;
  /* Platz fuer den Hover-Lift und den Schatten der Karten. */
  padding: var(--space-1) var(--space-1) var(--space-4);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.eventrail > * { scroll-snap-align: start; }

@media (min-width: 1024px) {
  .eventrail {
    grid-auto-columns: minmax(0, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* Unterhalb des Desktops laeuft das Rail bis an den Rand der Karte. Ohne den
   Ausbruch endet die angeschnittene Karte mitten im Innenabstand und sieht
   nach Fehler aus statt nach "hier geht es weiter". Dazu ein kleinerer
   Innenabstand: 48px Rand sind auf einem 390px breiten Schirm ein Drittel
   der Breite. */
@media (max-width: 1023px) {
  .livepanel { padding: var(--space-5); }
  .eventrail {
    margin-inline: calc(var(--space-5) * -1);
    padding-inline: var(--space-5);
    scroll-padding-inline: var(--space-5);
  }
}

.ecard { padding: 0; overflow: hidden; }
.ecard__media { border-radius: 0; }
.ecard__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.ecard__body { display: grid; gap: var(--space-1); padding: var(--space-4); }
.ecard__name { font-weight: var(--weight-semibold); }
.ecard__ort  { display: flex; align-items: center; gap: var(--space-2); }

.ecard__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
/* dt vor dd ist die richtige Reihenfolge im Markup; angezeigt wird die Zahl
   zuerst und die Beschriftung darunter. */
.ecard__stat { display: flex; flex-direction: column; gap: 0; }
.ecard__stat-wert {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}
.ecard__stat-label { margin: 0; }


/* 7b. Tablet ---------------------------------------------------------------
   Ein Tablet aus zwei Kaesten und einem Punkt: Gehaeuse, Schirm, Linse.
   Kein Bild, kein SVG - der Rahmen soll bei jeder Schriftgroesse und in
   beiden Farbwelten stimmen, und das kann eine Datei nicht.

   Umgeschaltet wird mit Radioknoepfen und `:checked` (siehe die Vorlage
   public/_tablet.html). Die Regeln unten sind deshalb Geschwister-
   selektoren: `#tablet-2:checked ~ .tablet__bild--2`. Sie muessen fuer
   jede Position einzeln dastehen - eine allgemeine Regel gibt es in CSS
   dafuer nicht. Drei reichen; ein viertes Bild braeuchte eine Zeile
   mehr, und dann waere es Zeit fuer eine Schleife im Praeprozessor,
   den wir bewusst nicht haben. */
.tablet {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}

.tablet__geraet {
  position: relative;
  width: min(100%, 22rem);
  padding: var(--space-3);
  border-radius: 1.75rem;
  /* Zwei Toene statt eines Fotos: der obere Rand faengt Licht, der
     untere liegt im Schatten. Ohne das wirkt es wie ein Aufkleber. */
  background: linear-gradient(160deg, var(--color-surface-raised), var(--color-surface-sunken));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.tablet__schirm {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--color-surface-sunken);
}

/* Der Punkt ueber dem Schirm. Rein dekorativ, deshalb aria-hidden. */
.tablet__linse {
  position: absolute;
  top: calc(var(--space-3) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-border);
}

/* Die Radioknoepfe steuern nur; sichtbar sind die Beschriftungen. Nicht
   `display: none`: das nimmt sie aus der Tastaturbedienung. */
.tablet__wahl {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tablet__bild {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--dauer-ruhig, 240ms) ease;
}

.tablet__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tablet__unterschrift {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-2);
  font-size: var(--text-sm);
  color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent);
}

/* Die Auswahl greift ueber `:has()` am Container, nicht ueber
   Geschwister: die Knoepfe liegen ausserhalb des Geraets, die Bilder
   darin. Fuer jede Position eine Zeile - eine allgemeine Regel gibt es
   in CSS dafuer nicht, und bei drei Bildern ist das billiger als ein
   Praeprozessor, den wir bewusst nicht haben. */
.tablet:has(#tablet-1:checked) .tablet__bild--1,
.tablet:has(#tablet-2:checked) .tablet__bild--2,
.tablet:has(#tablet-3:checked) .tablet__bild--3 { opacity: 1; }

.tablet:has(#tablet-1:checked) .tablet__knopf--1,
.tablet:has(#tablet-2:checked) .tablet__knopf--2,
.tablet:has(#tablet-3:checked) .tablet__knopf--3 {
  color: var(--color-text);
  border-color: var(--color-text);
  background: var(--color-surface-raised);
}

/* Ein Geraet ohne Rahmen: das <fieldset> ist hier nur die Klammer um
   die Radiogruppe, damit Screenreader "eines von dreien" ansagen. */
.tablet__gruppe {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}

.tablet__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.tablet__knopf {
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
}

.tablet__knopf:hover { color: var(--color-text); }

/* Der Sichtbarkeitsring gehoert an die Beschriftung, weil der
   Radioknopf selbst unsichtbar ist. Ohne diese Regel waere die
   Tastaturbedienung zwar vorhanden, aber nicht zu sehen - und das ist
   dasselbe wie keine. */
.tablet:has(#tablet-1:focus-visible) .tablet__knopf--1,
.tablet:has(#tablet-2:focus-visible) .tablet__knopf--2,
.tablet:has(#tablet-3:focus-visible) .tablet__knopf--3 {
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 2px;
}

.tablet__fuss {
  max-width: 32rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .tablet__bild { transition: none; }
}

/* 8. Ablauf ---------------------------------------------------------------- */
.ablauf__kopf { margin-bottom: var(--space-6); }
.ablauf__lead { max-width: 54ch; }

.ablauf__liste {
  display: grid;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px)  { .ablauf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ablauf__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.schritt { display: grid; gap: var(--space-2); align-content: start; }
.schritt__nummer {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}
.schritt__titel { font-weight: var(--weight-semibold); }


/* 9. Schlussaufruf --------------------------------------------------------- */
.ctaband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-7);
  border-radius: var(--radius-hero);
  background: var(--gradient-primary);
  box-shadow: var(--glow-primary);
  color: var(--color-text-on-fill);
}
.ctaband__text { flex: 1 1 32ch; }
.ctaband__text .t-h1 { color: var(--color-text-on-fill); }
.ctaband__lead {
  max-width: 52ch;
  color: color-mix(in srgb, var(--color-text-on-fill) 84%, transparent);
}
.ctaband__btn {
  background: var(--color-surface);
  color: var(--color-primary-ink);
  box-shadow: var(--shadow-md);
}
.ctaband__btn:hover { transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-lg); }


/* 10. Fusszeile ------------------------------------------------------------ */
.sitefooter {
  margin-top: var(--space-8);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.sitefooter__inner {
  display: grid;
  gap: var(--space-7);
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-8) var(--page-padding) var(--space-6);
}
@media (min-width: 1024px) {
  .sitefooter__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); align-items: start; }
}
/* align-content: start, sonst verteilt das Raster die drei Zeilen
   (Marke, Claim, Knopf) ueber die ganze Hoehe der Linkspalten - und der
   Knopf waechst zu einem Block, der so hoch ist wie die laengste Liste.
   Genau so sah die Fusszeile bis zum 20.08.2026 aus. */
.sitefooter__brand {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  align-content: start;
  align-self: start;
}
.sitefooter__claim { max-width: 34ch; }

/* Feste Spaltenzahl statt auto-fit: mit vier Gruppen brach auto-fit bei
   mittlerer Breite in drei plus eine - und "Rechtliches" stand allein in
   einer zweiten Reihe. Zwei Spalten auf dem Telefon, vier ab Tablet. */
.sitefooter__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
}
@media (min-width: 768px) {
  .sitefooter__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sitefooter__hinweis { margin-top: var(--space-3); max-width: 26ch; }

.linklist {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.linklist a {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  text-decoration: none;
}
.linklist a:hover { color: var(--color-text); }

.sitefooter__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-4) var(--page-padding) var(--space-6);
  border-top: 1px solid var(--color-border);
}


/* 11. Anmeldung -----------------------------------------------------------
   Eine Karte, mittig, sonst nichts. Wer sich anmelden will, soll das tun
   und nicht zu den Preisen abbiegen - deshalb ersetzt diese Ansicht die
   Navigation durch eine reine Wortmarke. */
.anmeldekopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-5) var(--page-padding);
}

.anmelden {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  /* Kopfhoehe abziehen, damit die Karte optisch mittig steht und nicht
     rechnerisch. */
  min-height: calc(100vh - 12rem);
  padding: var(--space-5) var(--page-padding) var(--space-8);
}

.anmelden__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 40% at 50% 0%,
        color-mix(in srgb, var(--color-primary-violet) 20%, transparent), transparent 70%),
    radial-gradient(36% 34% at 88% 88%,
        color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%);
}

.anmelden__karte {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  width: 100%;
  max-width: 26rem;
  box-shadow: var(--shadow-lg);
}

.anmelden__knopf { width: 100%; }

.anmelden__fuss {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}


/* 12. Rechtstexte -----------------------------------------------------------
   Impressum und Datenschutzerklaerung. Schmale Spalte und grosszuegige
   Zeilenabstaende: das sind die einzigen Seiten des Auftritts, die jemand
   wirklich von oben nach unten liest — meist, weil er etwas Bestimmtes
   sucht. Zwischenueberschriften duerfen deshalb auffallen. */
.rechtstext {
  max-width: var(--content-narrow);
  margin-inline: auto;
}
.rechtstext h1 { margin-bottom: var(--space-2); }
.rechtstext h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.rechtstext h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.rechtstext p  { margin-bottom: var(--space-4); max-width: 68ch; }
.rechtstext .tabelle { margin-bottom: var(--space-4); }

.rechtstext__liste {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  max-width: 68ch;
  line-height: var(--leading-body);
}
.rechtstext__liste li { margin-bottom: var(--space-3); }

.rechtstext__stand {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* --- Ratgeber ----------------------------------------------------------
   Lange Lesetexte. Dieselben Masse wie .rechtstext — ein Lesetext ist ein
   Lesetext —, aber ein eigener Name: die Rechtstexte folgen einem
   gesetzlichen Muster und duerfen sich nicht mitveraendern, wenn der
   Ratgeber ein anderes Gesicht bekommt. */
.artikel {
  max-width: var(--content-narrow);
  margin-inline: auto;
}
.artikel h1 { margin-bottom: var(--space-2); }
.artikel h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.artikel p { margin-bottom: var(--space-4); max-width: 68ch; }
.artikel ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  max-width: 68ch;
  line-height: var(--leading-body);
}
.artikel ul li { margin-bottom: var(--space-3); }

/* Die Artikelkarten der Uebersicht: Titel, Teaser, Stand. Bewusst ohne
   Bilder — es gibt noch keine, die zu den Artikeln gehoeren, und ein
   Platzhalterfoto verspricht einen Bildartikel, der keiner ist. */
.ratgeberliste { display: grid; gap: var(--space-4); }
.ratgeberliste .card { display: block; }
.ratgeberliste .card:hover { border-color: var(--color-border-strong); }

/* --- Die drei Wege ----------------------------------------------------
   Drei gleichwertige Karten. Bewusst schlichter als die Zielgruppenkarten
   darüber: dort wird entschieden, hier wird erklärt. Wären beide gleich
   auffällig, konkurrierten zwei Entscheidungen um denselben Blick. */
.wege__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}

.wegkarte {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.wegkarte__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

/* Der Preisanker im Hero. Klein und unter den Knöpfen: er beantwortet
   eine Frage, die man sich stellt, nachdem man verstanden hat, worum es
   geht — nicht davor. */
.hero__preis {
  margin: var(--space-2) 0 0;
  opacity: .8;
}

/* --- Cookie-Hinweis ---------------------------------------------------
   Unten und über allem, aber nicht bildschirmfüllend: was hier gefragt
   wird, ist eine Nebensache, und ein Hinweis, der die halbe Seite
   verdeckt, erzieht zum Wegklicken statt zum Lesen. */
.cookiehinweis {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border, rgba(127, 127, 127, .25));
  border-radius: var(--radius-md, .75rem);
  background: var(--color-surface, #fff);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

.cookiehinweis[hidden] { display: none; }

.cookiehinweis__text { flex: 1 1 22rem; }
.cookiehinweis__text p { margin: 0 0 .35rem; }

/* Beide Knöpfe gleich groß. Ein „Ablehnen", das kleiner oder blasser ist
   als „Einverstanden", ist keine freie Entscheidung — und genau daran
   scheitern die meisten Banner. */
.cookiehinweis__knoepfe {
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.cookiehinweis__knoepfe .btn { min-width: 9rem; justify-content: center; }


/* Galerieabschnitt auf der Preisseite ---------------------------------------
   „Mehr als eine KI-Fotobox". Steht unter den Preiskarten und traegt,
   was jedes Paket gleichermassen enthaelt - deshalb ruhiger als die
   Karten darueber und ohne eigenen Preis. */
.galerieteil__kopf,
.galerieteil__text { max-width: 62ch; }

.galerieteil__weg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.galerieteil__schritt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}
/* Die Nummer statt eines Pfeils zwischen den Kacheln. Ein Pfeil muesste
   ausserhalb des Chips liegen, und ein Pseudoelement liegt immer darin;
   jeder Weg dorthin ist ein Rechenspiel mit negativen Abstaenden, das
   beim ersten Umbruch auseinanderfaellt. Die Zahl steht innen, bricht
   sauber um und wird obendrein vorgelesen. */
.galerieteil__schritt::before {
  counter-increment: schritt;
  content: counter(schritt);
  display: grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
}

.galerieteil__karte { margin-top: var(--space-5); max-width: 62ch; }

.galerieteil__zusagen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
}
@media (min-width: 640px) {
  .galerieteil__zusagen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .galerieteil__zusagen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.galerieteil__zusagen li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.galerieteil__zusagen .icon { color: var(--color-success); flex: none; }

.galerieteil__fuss { margin-top: var(--space-5); max-width: 62ch; }


/* Die drei Wege -------------------------------------------------------------
   Das Ablaufbild unter „Mehr als eine KI-Fotobox". Drei Spalten mit je
   einem senkrechten Ablauf; auf dem Telefon untereinander.

   Bewusst Text und kein Bild: ein Ablaufdiagramm als Grafik ist auf
   einem Telefon unlesbar, in der Suche unsichtbar und fuer einen
   Screenreader gar nicht da. */
.dreiwege {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 900px) {
  .dreiwege { grid-template-columns: repeat(3, 1fr); }
}

.dreiwege__spalte {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

/* Die dritte Spalte nimmt die Sorge weg, die sonst niemand ausspricht.
   Sie bekommt deshalb den Ton des Bereichs - nicht mehr, aber sichtbar. */
.dreiwege__spalte--bleibt {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dreiwege__titel {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dreiwege__schritte {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
}

/* Der Pfeil zwischen zwei Schritten. Als Pseudoelement am *vorherigen*
   Schritt, damit er im Abstand steht und nicht in der naechsten Zeile -
   und damit er nicht vorgelesen wird. */
.dreiwege__schritte li {
  position: relative;
  padding-inline-start: var(--space-4);
}
.dreiwege__schritte li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border-strong);
}
/* Die senkrechte Linie verbindet die Punkte - sie endet vor dem
   letzten, weil dort das Ziel steht und keine Fortsetzung. */
.dreiwege__schritte li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: calc(0.55em + 6px);
  bottom: calc(var(--space-3) * -1);
  width: 2px;
  background: var(--color-border);
}

.dreiwege__ziel {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.dreiwege__ziel::before {
  background: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}


/* Leistungsliste in der Preiskarte ------------------------------------------
   Steht zwischen der Momentezahl und dem Beschreibungstext: erst die
   Zahl, die sich abstufen laesst, dann was in jedem Paket gleich ist. */
.paket__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
}
.paket__liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.paket__liste .icon {
  flex: none;
  margin-top: 0.15em;
  color: var(--color-success);
}


/* Schrittliste der Themenseiten -------------------------------------------
   Wie `.ablauf__liste`, aber mit festen Stufen statt `auto-fit`.

   Der Grund ist die Zahl fuenf. `auto-fit` waehlt die Spaltenzahl nach
   dem Platz, und bei fuenf Karten trifft es fast immer vier - dann steht
   die fuenfte allein in einer zweiten Zeile und sieht aus wie ein
   Nachtrag. Ausgerechnet Schritt fuenf ist der, an dem der Gast sein
   Bild bekommt.

   Deshalb: bis 900 px zwei, darueber drei (3+2 liest sich als Gruppe),
   und ab 1200 px alle fuenf nebeneinander. */
.schritte {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--gutter);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .schritte { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Die Karte mit der gemessenen Zahl. Sie steht bewusst neben und nicht in
   der Schrittliste - eine Messung ist kein Schritt. */
.faktenkarte { margin-top: var(--space-5); max-width: 62ch; }

/* Die Trigger-Adresse zum Abtippen. Monospace, umbrechend und
   auswaehlbar: sie wird auf einem Telefon gelesen und auf einem
   Windows-Rechner eingegeben. */
.triggeradresse {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: 1.6;
  overflow-wrap: anywhere;
  user-select: all;
}

/* "Eine Galerie, drei Arten von Bildern" (21.08.2026): die Dreiwege-Karten
   mit einer Paketzeile am Fuss. */
.bildarten__paket {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Sprachumschalter (22.08.2026)
   --------------------------------------------------------------------------
   Bewusst zurückhaltend: zwei Wörter, keine Flaggen. Eine Flagge steht für
   ein Land und nicht für eine Sprache — Deutsch wird in drei Ländern
   gesprochen, und Englisch in Dutzenden. Wer eine Fahne sucht und seine
   nicht findet, hält die Seite für nicht für ihn gemacht.

   Auf schmalen Bildschirmen fällt der Umschalter aus der Kopfleiste; dort
   steht er im Schubfach und in der Fußzeile. */
.sprachwahl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.sprachwahl__label { display: none; }

.sprachwahl__knopf,
.sprachwahl__aktiv {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  line-height: 1.2;
}

.sprachwahl__knopf {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.sprachwahl__knopf:hover,
.sprachwahl__knopf:focus-visible {
  color: var(--color-text);
  background: var(--color-surface-sunken);
}

.sprachwahl__aktiv {
  color: var(--color-text);
  font-weight: 600;
}

/* In der Kopfleiste ist der Platz knapp — dort steht nur die *andere*
   Sprache, die aktive ergibt sich aus der Seite. */
.siteheader__actions .sprachwahl__aktiv { display: none; }

@media (max-width: 900px) {
  .siteheader__actions .sprachwahl { display: none; }
}

.mobilnav__sprache {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.mobilnav__sprache .sprachwahl__label { display: inline; }

.sitefooter .sprachwahl__label { display: inline; }

/* --- Vorher-Nachher auf den Anlassseiten --------------------------------
   Derselbe .compare wie im Hero, nur nicht in einer Rasterspalte, sondern
   allein im Fluss - deshalb eine Breite, sonst stuende ein 4:3-Bild ueber
   die ganze Seitenbreite und das Gesicht darin wuerde groesser als der
   Titel darueber. Kopf und Bild bleiben gleich breit, damit die
   Textkante die Bildkante trifft. */
.vergleichsblock { display: grid; gap: var(--space-5); }
.vergleichsblock__kopf { max-width: 56rem; }
.vergleichsblock__bild { max-width: 56rem; width: 100%; }

/* --- Codeblock auf der API-Seite ------------------------------------------
   Waagerecht scrollbar, nie die Seite: eine curl-Zeile ist laenger als ein
   Telefon breit. */
.code {
  margin: 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--color-text);
  tab-size: 2;
}