/* 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);
}

.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. */
.wegwechsel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  text-align: center;
}
.wegwechsel .icon { flex: none; }
.wegwechsel a { color: var(--color-primary-ink); 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; }


/* 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, 1.2fr); gap: var(--space-8); }
}
.sitefooter__brand { display: grid; gap: var(--space-4); justify-items: start; }
.sitefooter__claim { max-width: 34ch; }

.sitefooter__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-5);
}
.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);
}