/* =====================================================================
   LMMeier Life Moments — Gestaltung der eigenen Seite.
   Die Farben kommen aus dem Logo: Marineblau als Grund, der Bogen läuft
   von Königsblau in ein helles Cyan. Cyan ist der einzige Akzent.
   ===================================================================== */

:root {
  /* --- Grund ------------------------------------------------------- */
  --nacht: #070D1A;
  --nacht-2: #0C1628;
  --nacht-3: #122038;
  --nacht-linie: #1C2C47;
  --marine: #143977;           /* Logogrund */
  --marine-2: #1E5198;

  --papier: #EEF3FA;
  --papier-2: #E2EAF5;
  --papier-linie: #CBD7E8;
  --tinte: #0B1526;

  /* --- Akzent (aus dem Logo) --------------------------------------- */
  --cyan: #6CE7FA;             /* auf Nacht: 13,2:1 */
  --koenig: #2959C4;           /* Bogen, Mitte */
  --akzent-text: #0F4FA8;      /* auf Papier: 7,0:1 */
  --akzent-tief: #0B3C82;

  /* --- Text -------------------------------------------------------- */
  --auf-nacht: #EAF0F9;
  --auf-nacht-still: #A4B2C8;
  --auf-papier-still: #4C5A70;

  /* --- Korrekturen, gemessen --------------------------------------- */
  --feld-linie: #3B4B66;
  --platzhalter: #808EA6;
  /* Rand einer Geisttaste. NICHT --nacht-linie nehmen: das ist die
     Trennlinie zwischen Abschnitten (1,4:1, dafuer richtig). Der Rand
     eines Bedienelements braucht 3:1 — dieser Wert liegt bei 3,7:1
     gegen --nacht. */
  --taste-linie: #5A6E8C;

  --schrift: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --anzeige: "Instrument Serif", Georgia, serif;

  --mass: 1180px;
  --luft: clamp(4.5rem, 9vw, 8.5rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--auf-nacht);
  font-family: var(--schrift);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.09rem);
  line-height: 1.62;
  overflow-x: hidden;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #A3F2FE; }

h1, h2, h3 {
  font-family: var(--anzeige);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

.mass { width: min(100% - 2.5rem, var(--mass)); margin-inline: auto; }
@media (max-width: 30rem) { .mass { width: min(100% - 1.75rem, var(--mass)); } }

.still { color: var(--auf-nacht-still); }

/* ---------- Auszeichnung ---------------------------------------------- */

.zahl {
  font-family: var(--schrift);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- Sprungmarke und Fokus --------------------------------------
   Der Fokusring war nur an Formularfeldern definiert; Tasten und Links
   bekamen den Browser-Standard, der auf Nachtblau kaum zu sehen ist. */

.sprung {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 60;
  background: var(--cyan);
  color: #041018;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  transition: top 0.18s ease-out;
}
.sprung:focus { top: 0.75rem; color: #041018; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 2px;
}
.teil--hell :where(a, button, summary):focus-visible,
.schluss :where(a, button, summary):focus-visible {
  outline-color: var(--akzent-text);
}

/* ---------- Kopf ------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(7, 13, 26, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 0;
}
/* Der Verlauf des Logos als Kante — er zieht sich als Linie durch die
   ganze Seite: unter dem Kopf, unter jedem Seitenkopf, über der festen
   Leiste, unter jeder Überschrift. */
.kopf::after,
.seiten-kopf::after,
.leiste::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--koenig) 0%, var(--cyan) 45%, var(--koenig) 100%);
}
.kopf::after { position: absolute; left: 0; right: 0; bottom: -2px; }
.kopf-in {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  min-height: 4.25rem;
  padding-block: 0.5rem;
  flex-wrap: wrap;
}
.marke {
  font-family: var(--anzeige);
  font-size: 1.5rem;
  color: var(--auf-nacht);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  flex: 0 0 auto;
}
.marke i { color: var(--cyan); font-style: normal; }

.kopf nav {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.6vw, 1.4rem);
  margin-inline-start: auto;
  flex-wrap: wrap;
}
.kopf nav a {
  color: var(--auf-nacht-still);
  text-decoration: none;
  font-size: clamp(0.86rem, 0.8rem + 0.22vw, 0.95rem);
  font-weight: 500;
  padding: 0.5rem 0.4rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.kopf nav a:hover { color: var(--auf-nacht); border-bottom-color: var(--cyan); }
.kopf nav a[aria-current="page"] { color: var(--auf-nacht); border-bottom-color: var(--cyan); }
/* Reiner Umbruchpunkt für die schmale Navigation — am Bildschirm ab
   58 rem gibt es ihn nicht. */
.kopf .nav-umbruch { display: none; }

@media (max-width: 58rem) {
  /* Die feste Leiste unten trägt den Ruf zur Tat — im Kopf wäre sie
     dieselbe Aktion ein zweites Mal. Die Navigation bekommt dafür die
     ganze Breite.
     58 rem statt 56 rem, weil zwischen 896 und 928 px eine Reihe für
     Marke, Taste und sechs Ziele nicht reicht.
     Mit dem siebten Ziel („KI-Automatisierung") passt bei 390 px keine
     einzelne Reihe mehr — gemessen 423 px Inhalt auf 362 px Platz, und
     solange die Webschrift noch nicht da ist, ist es noch enger. Statt
     die Schrift weiter zu verkleinern oder Ziele wegzuschneiden, bricht
     die Reihe an einer festen Stelle um: drei Ziele oben, vier unten.
     Der Umbruch steht im Markup, damit nicht die Schriftgrösse
     entscheidet, wo er landet. */
  .kopf-in { min-height: 0; gap: 0.25rem; padding-block: 0.35rem 0.15rem; }
  .kopf .kopf-tun { display: none; }
  .kopf .nav-umbruch { display: block; flex-basis: 100%; height: 0; }
  .kopf nav {
    width: 100%;
    margin-inline-start: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
  }
  .kopf nav a {
    padding-inline: 0.25rem;
    font-size: clamp(0.74rem, 0.6rem + 0.6vw, 0.9rem);
    white-space: nowrap;
  }
  .marke { font-size: 1.3rem; }
}

/* Schmales Band knapp über dem Umbruchpunkt (58–63 rem): mit dem siebten
   Ziel („KI-Automatisierung") ist die Reihe hier zu breit und rutschte
   unter Marke und Taste — vorher stand sie daneben. Enger gestellte
   Abstände und Schrift geben die ~150 px zurück, die das siebte Ziel
   braucht; ab 63 rem gilt wieder das normale Mass. */
@media (min-width: 58.0625rem) and (max-width: 63rem) {
  .kopf nav { gap: 0.1rem; }
  .kopf nav a { padding-inline: 0.28rem; font-size: 0.82rem; }
}

/* ---------- Tasten ------------------------------------------------------ */

.taste {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 2px;
  font: 600 1rem/1 var(--schrift);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  /* Verlauf aus dem Logo. Der dunkle Rand liegt bei 8,1:1 gegen die
     Beschriftung — tiefer darf er nicht werden, sonst faellt die
     Lesbarkeit unter 4,5:1. */
  background: linear-gradient(96deg, #35B6E6 0%, #6CE7FA 100%);
  color: #041018;
  box-shadow: 0 8px 22px -12px rgba(41, 89, 196, 0.85);
  transition: background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.taste:hover {
  background: linear-gradient(96deg, #4FCBF2 0%, #A3F2FE 100%);
  color: #041018;
  box-shadow: 0 10px 26px -12px rgba(41, 89, 196, 1);
}
.taste--klein { min-height: 2.75rem; padding: 0.55rem 1.05rem; font-size: 0.92rem; }
.taste--leer {
  background: transparent;
  color: var(--auf-nacht);
  border-color: var(--taste-linie);
}
.taste--leer:hover { background: transparent; color: var(--auf-nacht); border-color: var(--cyan); }
.taste--dunkel { background: var(--tinte); color: var(--papier); }
.taste--dunkel:hover { background: #2A3242; color: var(--papier); }
.taste--leer-hell {
  background: transparent;
  color: var(--tinte);
  border-color: var(--papier-linie);
}
.taste--leer-hell:hover { background: transparent; color: var(--tinte); border-color: var(--akzent-text); }

/* ---------- Auftakt ----------------------------------------------------- */

.auftakt {
  padding-block: clamp(3rem, 7vw, 6.5rem) var(--luft);
  position: relative;
  isolation: isolate;
  /* Der Lichtschein ragt absichtlich ueber den Rand. Ohne diese Klammer
     waechst das Layout mit und die Seite laeuft waagrecht ueber.
     isolation reicht dafuer nicht, das ist nur ein Stapelkontext. */
  overflow: hidden;
  overflow: clip;
}
/* Grosser, weicher Lichtschein in den Logofarben hinter dem Auftakt.
   Er liegt hinter allem (z-index -1) und verändert keinen Kontrast. */
.auftakt::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -30% auto -10%;
  height: 130%;
  background:
    radial-gradient(58% 52% at 78% 18%, rgba(41, 89, 196, 0.42) 0%, rgba(41, 89, 196, 0) 70%),
    radial-gradient(42% 38% at 92% 6%, rgba(108, 231, 250, 0.24) 0%, rgba(108, 231, 250, 0) 72%),
    radial-gradient(50% 44% at 4% 72%, rgba(20, 57, 119, 0.55) 0%, rgba(20, 57, 119, 0) 74%);
  pointer-events: none;
}
.auftakt-gitter {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}
@media (min-width: 62rem) {
  .auftakt-gitter { grid-template-columns: 1.35fr 0.75fr; }
}

.auftakt h1 {
  font-size: clamp(2.9rem, 1.4rem + 6.4vw, 5.6rem);
  margin-bottom: 1.6rem;
}
/* Die Kante braucht `overflow: hidden` für den Auftritt — sonst schneidet sie
   die Unterlängen ab (das kursive g in „Zug"). Der Freiraum muss an der
   Kante selbst liegen, sonst liegt er ausserhalb der Clipping-Region; das
   negative Margin holt den Abstand zur nächsten Zeile zurück. */
.auftakt h1 .zeile { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.auftakt h1 .zeile > span { display: block; }
.auftakt h1 em { font-style: italic; color: var(--cyan); }

.auftakt .fuehrung {
  font-size: clamp(1.06rem, 1rem + 0.42vw, 1.28rem);
  color: var(--auf-nacht-still);
  max-width: 34em;
}
.auftakt-tun {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.1rem;
}
.auftakt-belege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.9rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--nacht-linie);
  font-size: 0.94rem;
  color: var(--auf-nacht-still);
}
.auftakt-belege b { color: var(--auf-nacht); font-weight: 600; }

.auftakt-bild { position: relative; }
/* Kein Zuschnitt. Das Bild ist 1813×2048 und zeigt beide vom Kopf bis zur
   Hüfte — jede feste Bildkante schneidet ein Gesicht an. Der eigene
   Bildhintergrund ist dasselbe Marineblau wie der Seitengrund, also braucht
   es auch keinen Rahmen. */
.auftakt-bild img { width: 100%; height: auto; }
.auftakt-bild figcaption {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  color: var(--auf-nacht-still);
}
.auftakt-bild::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 42%;
  height: 4px;
  background: linear-gradient(90deg, var(--koenig), var(--cyan));
}

/* ---------- Abschnitt --------------------------------------------------- */

.teil { padding-block: var(--luft); }
.teil--hell { background: var(--papier); color: var(--tinte); }
.teil--hell h2, .teil--hell h3 { color: var(--tinte); }
.teil--hell .still { color: var(--auf-papier-still); }
.teil--hell a:not(.taste) { color: var(--akzent-text); }
.teil--hell a:not(.taste):hover { color: var(--akzent-tief); }

.kopfzeile { max-width: 46rem; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
.kopfzeile .strich {
  display: block;
  width: 3.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--koenig), var(--cyan));
  margin-bottom: 1.5rem;
  transform-origin: left center;
}
.kopfzeile h2 { font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.4rem); margin-bottom: 1rem; }
.kopfzeile p { font-size: 1.06rem; }

/* ---------- Preise ------------------------------------------------------ */

.preise { display: grid; gap: 1px; background: var(--papier-linie); border: 1px solid var(--papier-linie); }
@media (min-width: 46rem) { .preise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .preise { grid-template-columns: repeat(4, 1fr); } }

.paket {
  background: var(--papier);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.paket--stern {
  background: var(--tinte);
  color: var(--papier);
  position: relative;
}
.paket--stern::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--koenig), var(--cyan));
}
.paket--stern .still { color: #9AA5B4; }
.paket .name {
  font: 600 0.82rem/1 var(--schrift);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent-text);
}
.paket--stern .name { color: var(--cyan); }
.paket .betrag {
  font-family: var(--anzeige);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.paket .betrag small { display: block; font-family: var(--schrift); font-size: 0.85rem; font-weight: 400; margin-top: 0.5rem; color: var(--auf-papier-still); }
.paket--stern .betrag small { color: #9AA5B4; }
.paket ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.paket li { padding-left: 1.1rem; position: relative; }
.paket li::before { content: "—"; position: absolute; left: 0; color: var(--akzent-text); }
.paket--stern li::before { color: var(--cyan); }
.paket .taste { margin-top: auto; }

.preis-fuss {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: baseline;
  font-size: 0.95rem;
  color: var(--auf-papier-still);
}
.preis-fuss .dazu { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.preis-fuss .dazu b { color: var(--tinte); font-weight: 600; }

/* ---------- Leistungen (nummerierte Folge) ------------------------------ */

.folge { border-top: 1px solid var(--nacht-linie); }
.folge-zeile {
  display: grid;
  gap: 0.6rem 2.5rem;
  padding-block: clamp(1.75rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--nacht-linie);
  align-items: start;
}
@media (min-width: 54rem) {
  .folge-zeile { grid-template-columns: 0.95fr 1.05fr; }
}
.folge-zeile h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.folge-zeile .dazu {
  display: grid;
  gap: 0.35rem;
  font-size: 0.95rem;
  color: var(--auf-nacht-still);
}
.folge-zeile .dazu span { padding-left: 1.05rem; position: relative; }
.folge-zeile .dazu span::before { content: "·"; position: absolute; left: 0.25rem; color: var(--cyan); }

/* ---------- Demos ------------------------------------------------------- */

.demos { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .demos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .demos { grid-template-columns: repeat(3, 1fr); } }

.demo {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--nacht-linie);
  background: var(--nacht-2);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.demo:hover {
  border-color: transparent;
  background:
    linear-gradient(var(--nacht-2), var(--nacht-2)) padding-box,
    linear-gradient(135deg, var(--koenig), var(--cyan)) border-box;
}
/* display: block ist nicht kosmetisch — als leeres Inline-Element hat der
   Streifen keine Hoehe und die Branchenfarbe waere unsichtbar. */
.demo .streifen { display: block; height: 5px; background: var(--ton, var(--cyan)); }
.demo .in { padding: 1.35rem 1.4rem 1.5rem; display: grid; gap: 0.4rem; }
.demo .branche {
  font: 600 0.74rem/1 var(--schrift);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--auf-nacht-still);
}
.demo .name { font-family: var(--anzeige); font-size: 1.5rem; color: var(--auf-nacht); }
.demo p { font-size: 0.93rem; color: var(--auf-nacht-still); }
.demo .oeffnen { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--cyan); }

/* ---------- Referenz ---------------------------------------------------- */

.referenz-gitter { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 58rem) { .referenz-gitter { grid-template-columns: 1fr 1fr; } }

.echt {
  border: 1px solid var(--papier-linie);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: 0.9rem;
  background: var(--papier-2);
}
.echt .marke-zeile { font-weight: 600; color: var(--akzent-text); }
.echt h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); }
/* Freistehender Link: der Link ist der ganze Absatz, also ein Bedienelement
   und kein Fliesstext — 44 px Mindesthöhe. Gilt überall, nicht nur im
   Referenzkasten. */
.hin {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
.echt .hin { color: var(--akzent-text); }

.stimmen { display: grid; gap: 1.25rem; }
.stimme {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--papier-linie);
}
.stimme blockquote { margin: 0 0 0.6rem; font-size: 1rem; }
.stimme .sterne { color: var(--akzent-text); letter-spacing: 0.1em; font-size: 0.85rem; }
.stimme figcaption { font-size: 0.88rem; color: var(--auf-papier-still); }
.stimme figcaption b { color: var(--tinte); font-weight: 600; }

/* ---------- Ablauf ------------------------------------------------------ */

.ablauf { display: grid; gap: 0; }
.schritt {
  display: grid;
  gap: 0.4rem 2rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--nacht-linie);
  align-items: baseline;
}
@media (min-width: 48rem) { .schritt { grid-template-columns: 3.5rem 1fr 8rem; } }
.schritt:first-child { border-top: 1px solid var(--nacht-linie); }
.schritt .nr { font-family: var(--anzeige); font-size: 1.35rem; color: var(--cyan); }
.schritt h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.schritt p { font-size: 0.97rem; color: var(--auf-nacht-still); }
.schritt .wer {
  font: 600 0.78rem/1 var(--schrift);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--auf-nacht-still);
}

/* ---------- Team -------------------------------------------------------- */

.team { display: grid; gap: 2rem; }
@media (min-width: 44rem) { .team { grid-template-columns: 1fr 1fr; } }
.kopf-karte img { width: 100%; height: auto; }
.kopf-karte .rolle {
  display: block;
  margin-top: 1rem;
  font: 600 0.76rem/1 var(--schrift);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan);
}
.kopf-karte h3 { font-size: 1.8rem; margin: 0.55rem 0 0.5rem; }
.kopf-karte p { color: var(--auf-nacht-still); font-size: 0.97rem; }

/* ---------- Fragen ------------------------------------------------------ */

.fragen { border-top: 1px solid var(--papier-linie); }
.frage { border-bottom: 1px solid var(--papier-linie); }
.frage summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  font-family: var(--anzeige);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  position: relative;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  font-family: var(--schrift);
  font-size: 1.5rem;
  color: var(--akzent-text);
  line-height: 1;
}
.frage[open] summary::after { content: "–"; }
.frage .antwort { padding: 0 0 1.4rem; max-width: 52rem; color: var(--auf-papier-still); }

/* ---------- Kontakt ----------------------------------------------------- */

.kontakt-gitter { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
/* Drei Kinder in zwei Spalten: ohne feste Plätze rutschte die Hinweiszeile
   in die breite Spalte, das Formular in die schmale und die Kontaktkarte
   ganz nach unten. Formular links, Karte rechts daneben — über beide Zeilen. */
@media (min-width: 58rem) {
  .kontakt-gitter {
    grid-template-columns: 1.25fr 0.8fr;
    grid-template-rows: auto 1fr;
  }
  .kontakt-gitter > .formular-notiz { grid-column: 1; grid-row: 1; }
  .kontakt-gitter > .formular { grid-column: 1; grid-row: 2; }
  .kontakt-gitter > .kontakt-karte { grid-column: 2; grid-row: 1 / span 2; }
}

.formular { display: grid; gap: 1rem; }
.feld-paar { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .feld-paar { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: 0.4rem; }
.feld label { font-size: 0.88rem; font-weight: 600; color: var(--auf-nacht); }
.feld input, .feld select, .feld textarea {
  font: 400 1rem/1.5 var(--schrift);
  color: var(--auf-nacht);
  background: var(--nacht-2);
  border: 1px solid var(--feld-linie);
  border-radius: 2px;
  padding: 0.8rem 0.9rem;
  min-height: 3rem;
  width: 100%;
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--platzhalter); }
.feld :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
  border-color: var(--cyan);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formular-notiz { font-size: 0.85rem; color: var(--auf-nacht-still); }
.formular-notiz a { color: var(--cyan); }

.danke {
  border: 1px solid var(--cyan);
  background: var(--nacht-2);
  padding: 1.1rem 1.25rem;
  font-size: 0.97rem;
}

.kontakt-karte {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--nacht-2), var(--nacht-2)) padding-box,
    linear-gradient(150deg, var(--koenig), rgba(108, 231, 250, 0.35) 70%) border-box;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  display: grid;
  gap: 1.15rem;
}
.kontakt-karte h3 { font-size: 1.5rem; }
.kontakt-zeile { display: grid; gap: 0.15rem; }
.kontakt-zeile .l {
  font: 600 0.74rem/1 var(--schrift);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auf-nacht-still);
}
.kontakt-zeile a {
  color: var(--auf-nacht);
  text-decoration: none;
  font-size: 1.06rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.kontakt-zeile a:hover { color: var(--cyan); }

/* ---------- Fuss -------------------------------------------------------- */

.fuss { border-top: 1px solid var(--nacht-linie); padding-block: 3rem 7rem; }
@media (min-width: 58.0625rem) { .fuss { padding-bottom: 3rem; } }
.fuss-oben { display: grid; gap: 2rem; margin-bottom: 2.5rem; }
@media (min-width: 50rem) { .fuss-oben { grid-template-columns: 1fr 1.2fr; } }
.fuss-oben p { color: var(--auf-nacht-still); max-width: 32em; margin-top: 0.75rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-content: start; }
.fuss nav a {
  color: var(--auf-nacht-still);
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
}
.fuss nav a:hover { color: var(--cyan); }
.fuss-unten {
  border-top: 1px solid var(--nacht-linie);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--auf-nacht-still);
}
.fuss-unten .recht { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.fuss-unten a {
  color: var(--auf-nacht-still);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

/* ---------- Feste Leiste am Handy --------------------------------------- */
.leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(7, 11, 20, 0.94);
  backdrop-filter: blur(12px);
  border-top: 0;
}
.leiste::before { position: absolute; left: 0; right: 0; top: -2px; }
.leiste .taste { flex: 1; }
/* 58.0625 rem, nicht 58 rem: bei genau 928 px würden sonst beide Abfragen
   greifen und es gäbe weder oben noch unten eine Taste. */
@media (min-width: 58.0625rem) { .leiste { display: none; } }


/* =====================================================================
   Unterseiten — jede hat ihr eigenes Layout. Keine Seite ist dieselbe
   Seite mit anderem Text.
   ===================================================================== */

/* ---------- Seitenkopf (alle Unterseiten) ------------------------------- */

.seiten-kopf {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
.seiten-kopf::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -20% auto -20%;
  height: 200%;
  background:
    radial-gradient(50% 60% at 82% 10%, rgba(41, 89, 196, 0.34) 0%, rgba(41, 89, 196, 0) 70%),
    radial-gradient(34% 40% at 96% 0%, rgba(108, 231, 250, 0.18) 0%, rgba(108, 231, 250, 0) 70%);
  pointer-events: none;
}
.seiten-kopf::after { position: absolute; left: 0; right: 0; bottom: 0; }
.seiten-kopf .wo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--auf-nacht-still);
  margin-bottom: 1.4rem;
}
.seiten-kopf .wo a { color: var(--auf-nacht-still); text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; }
.seiten-kopf .wo a:hover { color: var(--cyan); }
.seiten-kopf h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.6vw, 4.6rem);
  max-width: 18ch;
}
.seiten-kopf p {
  margin-top: 1.4rem;
  max-width: 36em;
  font-size: clamp(1.04rem, 1rem + 0.35vw, 1.22rem);
  color: var(--auf-nacht-still);
}

/* ---------- Leistungen: lange Zeilen mit haftender Titelspalte ---------- */

.lang-zeile {
  display: grid;
  gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--nacht-linie);
  align-items: start;
}
@media (min-width: 62rem) {
  .lang-zeile { grid-template-columns: 0.8fr 1.2fr; }
  .lang-zeile > :first-child { position: sticky; top: 6.5rem; }
}
.lang-zeile h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); }
.lang-zeile .fuer { margin-top: 1rem; color: var(--auf-nacht-still); }

.punkte { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.punkte li {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--nacht-linie);
}
@media (min-width: 40rem) { .punkte li { grid-template-columns: 13rem 1fr; } }
.punkte b { font-weight: 600; color: var(--auf-nacht); }
.punkte span { color: var(--auf-nacht-still); font-size: 0.97rem; }

/* ---------- Preise: Vergleichstafel ------------------------------------- */

/* Die Tafel wird am Telefon seitlich gewischt. Zwei Dinge muessen dabei
   stimmen: die Zeilenbeschriftung darf nicht mitwandern (sonst weiss man
   nach zwei Spalten nicht mehr, welche Zeile man liest), und es muss
   sichtbar sein, dass rechts noch etwas kommt. */
.tafel-halter {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.tafel-wisch {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--akzent-text);
  margin-bottom: 0.75rem;
}
.tafel-rahmen { position: relative; }
.tafel-rand {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.5rem;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg, rgba(238, 243, 250, 0) 0%, var(--papier) 85%);
}
@media (max-width: 48rem) {
  .tafel-wisch { display: flex; }
  .tafel-rand { display: block; }
}

.tafel {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.tafel th, .tafel td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--papier-linie);
  vertical-align: top;
}
.tafel thead th {
  font: 600 0.78rem/1.3 var(--schrift);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--akzent-text);
  border-bottom: 2px solid var(--tinte);
}
.tafel tbody th {
  font-weight: 600;
  width: 16rem;
  position: sticky;
  left: 0;
  background: var(--papier);
  z-index: 1;
}
.tafel thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--papier);
  z-index: 2;
}
@media (max-width: 48rem) {
  /* 16 rem waeren bei 390 px 256 von 347 px — fuer die Pakete blieben 91 px
     und damit nicht einmal eine ganze Spalte. */
  .tafel tbody th { width: 9rem; hyphens: auto; }
  .tafel th, .tafel td { padding: 0.7rem 0.75rem; }
}
.tafel .ja { color: var(--akzent-text); font-weight: 700; }
.tafel .nein { color: var(--auf-papier-still); }
.tafel tr:last-child td, .tafel tr:last-child th { border-bottom: 0; }
.tafel col.hebe, .tafel .hebe { background: rgba(15, 79, 168, 0.07); }

.zusatz-gitter { border-top: 1px solid var(--papier-linie); margin-top: 2.5rem; }
.zusatz {
  display: grid;
  gap: 0.3rem 2rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--papier-linie);
  align-items: baseline;
}
/* Vier Spalten, nicht drei: das Zeichen hat seine eigene schmale Spalte.
   Ohne sie rutschte es in die 14-rem-Spalte, schob h3 in die Textspalte
   und den Text in die Betragsspalte — die Zeile zerfiel in drei Ecken. */
@media (min-width: 44rem) { .zusatz { grid-template-columns: 2.6rem 13rem 1fr 9rem; } }
.zusatz .betrag-klein { font-family: var(--anzeige); font-size: 1.5rem; }
@media (min-width: 44rem) { .zusatz .betrag-klein { order: 3; text-align: right; } }
.zusatz h3 { font-size: 1.3rem; }
.zusatz p { font-size: 0.95rem; color: var(--auf-papier-still); }

/* ---------- Beispiele: ein Betrieb pro Reihe ---------------------------- */

.demo-lang {
  display: grid;
  gap: 1.25rem clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--nacht-linie);
  align-items: start;
}
@media (min-width: 54rem) { .demo-lang { grid-template-columns: 0.9fr 1.35fr auto; } }
.demo-lang:first-of-type { border-top: 1px solid var(--nacht-linie); }
.demo-lang .band { display: block; width: 3.5rem; height: 4px; background: var(--ton, var(--cyan)); margin-bottom: 1rem; }
.demo-lang h2 { font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.4rem); }
.demo-lang .branche {
  display: block;
  font: 600 0.76rem/1 var(--schrift);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--auf-nacht-still);
  margin-bottom: 0.6rem;
}
.demo-lang p { color: var(--auf-nacht-still); }
.demo-lang .eigen { margin-top: 0.9rem; color: var(--auf-nacht); }
.demo-lang .eigen b { color: var(--cyan); font-weight: 600; }

/* ---------- Über uns: Haltung ------------------------------------------- */

.haltung { display: grid; gap: 0; }
.haltung-zeile {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--papier-linie);
  align-items: baseline;
}
@media (min-width: 48rem) { .haltung-zeile { grid-template-columns: 16rem 1fr; } }
.haltung-zeile:first-child { border-top: 1px solid var(--papier-linie); }
.haltung-zeile h3 { font-size: 1.4rem; }
.haltung-zeile p { color: var(--auf-papier-still); }

.zwei-spalten { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 56rem) { .zwei-spalten { grid-template-columns: 1fr 1fr; } }
.zwei-spalten p + p { margin-top: 1rem; }

/* ---------- Ruf zur Tat am Seitenende ----------------------------------- */

.schluss {
  /* Derselbe Verlauf wie der Strich unter jeder Überschrift: vom hellen
     Cyan des Logos ins Blau. Der Bereich bleibt hell genug, dass dunkle
     Schrift durchgehend über 4,5:1 liegt — 12,6:1 am Cyan-Ende, 4,7:1 am
     blauen. Weisse Schrift ginge hier nicht. */
  background: linear-gradient(120deg, #6CE7FA 0%, #35B6E6 55%, #1E88C8 100%);
  color: var(--tinte);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.schluss h2 { color: var(--tinte); }
.schluss h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); max-width: 20ch; }
.schluss p { margin-top: 1.1rem; max-width: 44em; color: var(--tinte); }
.schluss .tun { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.schluss .taste { background: var(--tinte); color: var(--papier); box-shadow: none; }
.schluss .taste:hover { background: #1B2C46; color: var(--papier); }
.schluss .taste--leer { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.schluss .taste--leer:hover { background: transparent; color: var(--tinte); border-color: var(--tinte); }


/* ---------- Rechtstexte und lange Prosa --------------------------------- */

.recht { max-width: 42rem; }
.recht h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem);
  margin-top: 2.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--nacht-linie);
}
.recht h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.recht h3 { font-size: 1.2rem; margin-top: 1.6rem; }
.recht p { margin-top: 1rem; color: var(--auf-nacht-still); }
.recht p strong, .recht li strong { color: var(--auf-nacht); font-weight: 600; }
.recht ul { margin: 1rem 0 0; padding-left: 1.15rem; color: var(--auf-nacht-still); }
.recht li { margin-top: 0.5rem; }
.recht .stand { font-size: 0.9rem; color: var(--auf-nacht-still); margin-top: 0; }
.recht-inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--nacht-linie);
}
.recht-inhalt a { min-height: 2.75rem; display: inline-flex; align-items: center; font-size: 0.94rem; }

/* ---------- Blog -------------------------------------------------------- */

.artikel-liste { border-top: 1px solid var(--nacht-linie); }
.artikel {
  display: grid;
  gap: 0.4rem 2.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--nacht-linie);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
@media (min-width: 50rem) { .artikel { grid-template-columns: 1fr 12rem; } }
.artikel h2 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); }
.artikel p { color: var(--auf-nacht-still); font-size: 0.97rem; margin-top: 0.35rem; }
.artikel .lesen { color: var(--cyan); font-weight: 600; font-size: 0.94rem; }
.artikel:hover h2 { color: var(--cyan); }

/* ---------- Standortseiten ---------------------------------------------- */

.ort-zahlen {
  display: grid;
  gap: 1px;
  background: var(--nacht-linie);
  border: 1px solid var(--nacht-linie);
  margin-block: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 40rem) { .ort-zahlen { grid-template-columns: repeat(3, 1fr); } }
.ort-zahl { background: var(--nacht); padding: 1.5rem; display: grid; gap: 0.3rem; }
.ort-zahl b { font-family: var(--anzeige); font-size: 2rem; font-weight: 400; line-height: 1; }
.ort-zahl span { font-size: 0.94rem; color: var(--auf-nacht-still); }

/* Nur fuer Screenreader: der Zusatz "(Pflichtfeld)" steht im Text, aber
   sichtbar reicht das Sternchen. */
.nur-lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Blogbeitrag ------------------------------------------------- */

.beitrag { max-width: 40rem; }
.beitrag > p { margin-top: 1.15rem; color: var(--auf-nacht-still); }
.beitrag h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--nacht-linie);
}
.beitrag h3 { font-size: 1.25rem; margin-top: 1.75rem; }
.beitrag ul, .beitrag ol { margin: 1.15rem 0 0; padding-left: 1.15rem; color: var(--auf-nacht-still); }
.beitrag li { margin-top: 0.6rem; }
.beitrag strong { color: var(--auf-nacht); font-weight: 600; }
.beitrag table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 0.95rem; }
.beitrag th, .beitrag td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--nacht-linie); }
.beitrag th { color: var(--auf-nacht); font-weight: 600; }
.beitrag blockquote {
  margin: 1.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--koenig);
  color: var(--auf-nacht-still);
}
.beitrag-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--auf-nacht-still);
}


/* ---------- Icons -------------------------------------------------------
   Eine Familie, eine Strichstaerke (1.6), 24x24, immer currentColor.
   Icons stehen nie allein: sie begleiten Text, sie ersetzen ihn nicht. */

.ikon {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.28em;
}
.ikon--gross { width: 2rem; height: 2rem; stroke-width: 1.4; }
.mit-ikon { display: flex; align-items: flex-start; gap: 0.6rem; }
.ikon-kopf { color: var(--cyan); margin-bottom: 0.9rem; display: block; }
.teil--hell .ikon-kopf { color: var(--akzent-text); }
.paket .ikon-kopf { margin-bottom: 0.35rem; }
.kontakt-zeile { grid-template-columns: auto 1fr; column-gap: 0.75rem; }
.kontakt-zeile .ikon { grid-row: 1 / span 2; align-self: center; color: var(--cyan); }


/* =====================================================================
   Regler-Zustände. Sie hängen an Attributen auf <html>; ohne den Regler
   gilt überall der mittlere Wert, die Seite sieht also unverändert aus.
   ===================================================================== */

/* --- Wie stark trägt der Verlauf --- */
[data-akzent="zurueck"] .kopf::after,
[data-akzent="zurueck"] .seiten-kopf::after,
[data-akzent="zurueck"] .leiste::before { background: var(--nacht-linie); }
[data-akzent="zurueck"] .auftakt::before,
[data-akzent="zurueck"] .seiten-kopf::before { opacity: 0.35; }
[data-akzent="zurueck"] .schluss {
  background: var(--nacht-2);
  color: var(--auf-nacht);
}
[data-akzent="zurueck"] .schluss h2 { color: var(--auf-nacht); }
[data-akzent="zurueck"] .schluss p { color: var(--auf-nacht-still); }
[data-akzent="zurueck"] .schluss .taste {
  background: linear-gradient(96deg, #35B6E6 0%, #6CE7FA 100%);
  color: #041018;
}
[data-akzent="zurueck"] .schluss .taste--leer { color: var(--auf-nacht); border-color: var(--taste-linie); }
[data-akzent="zurueck"] .kopfzeile .strich { background: var(--cyan); width: 2.5rem; }

[data-akzent="getaucht"] .auftakt::before,
[data-akzent="getaucht"] .seiten-kopf::before { opacity: 1.6; }
[data-akzent="getaucht"] .teil--hell {
  background: linear-gradient(168deg, var(--papier) 0%, var(--papier-2) 100%);
}
[data-akzent="getaucht"] .paket--stern {
  background: linear-gradient(150deg, #10305F 0%, var(--tinte) 70%);
}
[data-akzent="getaucht"] .kopfzeile .strich { width: 7rem; height: 4px; }
[data-akzent="getaucht"] .folge-zeile,
[data-akzent="getaucht"] .schritt,
[data-akzent="getaucht"] .demo-lang,
[data-akzent="getaucht"] .lang-zeile {
  border-image: linear-gradient(90deg, var(--koenig), rgba(108, 231, 250, 0.15)) 1;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
[data-akzent="getaucht"] .demo { border-color: transparent; background:
  linear-gradient(var(--nacht-2), var(--nacht-2)) padding-box,
  linear-gradient(150deg, rgba(41, 89, 196, 0.9), rgba(108, 231, 250, 0.25)) border-box; }

/* --- Wie viel Luft --- */
[data-dichte="luftig"] { --luft: clamp(6rem, 12vw, 11rem); }
[data-dichte="luftig"] body { line-height: 1.75; }
[data-dichte="luftig"] .folge-zeile,
[data-dichte="luftig"] .schritt,
[data-dichte="luftig"] .haltung-zeile,
[data-dichte="luftig"] .punkte li,
[data-dichte="luftig"] .zusatz { padding-block: 2.1rem; }
[data-dichte="luftig"] .kopfzeile { margin-bottom: clamp(3.5rem, 6vw, 5rem); }
[data-dichte="luftig"] .paket { padding: clamp(2rem, 3.2vw, 2.75rem); }

[data-dichte="dicht"] { --luft: clamp(2.75rem, 5vw, 4.5rem); }
[data-dichte="dicht"] body { line-height: 1.5; }
[data-dichte="dicht"] .folge-zeile,
[data-dichte="dicht"] .schritt,
[data-dichte="dicht"] .haltung-zeile,
[data-dichte="dicht"] .punkte li,
[data-dichte="dicht"] .zusatz { padding-block: 0.95rem; }
[data-dichte="dicht"] .kopfzeile { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
[data-dichte="dicht"] .paket { padding: 1.1rem 1.2rem; gap: 0.5rem; }
[data-dichte="dicht"] .demos { gap: 0.9rem; }
[data-dichte="dicht"] .auftakt { padding-block: clamp(2rem, 4vw, 3.5rem) var(--luft); }

/* --- Wie laut spricht die Seite --- */
[data-stimme="leise"] .auftakt h1 { font-size: clamp(2.2rem, 1.3rem + 4vw, 3.9rem); }
[data-stimme="leise"] .seiten-kopf h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); }
[data-stimme="leise"] .kopfzeile h2,
[data-stimme="leise"] .schluss h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); }
[data-stimme="leise"] h1, [data-stimme="leise"] h2 { letter-spacing: 0; }
[data-stimme="leise"] .auftakt h1 em { font-style: normal; }

[data-stimme="laut"] .auftakt h1 { font-size: clamp(3.2rem, 1.4rem + 8vw, 6rem); letter-spacing: -0.03em; }
[data-stimme="laut"] .seiten-kopf h1 { font-size: clamp(2.8rem, 1.5rem + 6vw, 5.2rem); letter-spacing: -0.03em; }
[data-stimme="laut"] .kopfzeile h2,
[data-stimme="laut"] .schluss h2 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4rem); letter-spacing: -0.025em; }
[data-stimme="laut"] .demo .name,
[data-stimme="laut"] .demo-lang h2 { font-size: 1.9rem; }


/* =====================================================================
   Grafikelemente — die Seite soll arbeiten, nicht nur dastehen.
   Laufband, Zähler, Systemschiene, Phasen, Gegenüberstellung.
   Alle Anfangszustände setzt erst das Skript; ohne JavaScript steht
   jede Zahl und jeder Satz sofort da.
   ===================================================================== */

:root { --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }

/* ---------- Laufband ---------------------------------------------------- */

.laufband {
  overflow: hidden;
  border-block: 1px solid var(--nacht-linie);
  background: linear-gradient(90deg, rgba(41,89,196,0.10), rgba(108,231,250,0.06), rgba(41,89,196,0.10));
  padding-block: 0.9rem;
  user-select: none;
}
.laufband-spur {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  animation: laufen 34s linear infinite;
}
.laufband-spur span {
  font-family: var(--anzeige);
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem);
  color: var(--auf-nacht);
  white-space: nowrap;
}
.laufband-spur i {
  font-style: normal;
  color: var(--cyan);
  font-size: 1.1rem;
}
@keyframes laufen { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .laufband-spur { animation: none; } }

/* ---------- Zähler ------------------------------------------------------ */

.kennzahlen { border-bottom: 1px solid var(--nacht-linie); }
.zahlen-gitter { display: grid; gap: 1px; background: var(--nacht-linie); }
@media (min-width: 34rem) { .zahlen-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .zahlen-gitter { grid-template-columns: repeat(4, 1fr); } }
.zahl-block {
  background: var(--nacht);
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.1rem, 2vw, 1.5rem);
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.zahl-block .marke {
  font: 600 0.7rem/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--auf-nacht-still);
}
.zahl-block .wert {
  font-family: var(--anzeige);
  font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
/* Verlaufsschrift nur, wenn der Browser sie beherrscht — sonst stünde die
   Zahl auf durchsichtig und wäre weg. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .zahl-block .wert {
    background: linear-gradient(120deg, var(--cyan), #A3F2FE 60%, var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.zahl-block .ziffer { font-weight: 400; }
.zahl-block .wert small { font-size: 0.42em; margin-left: 0.15em; letter-spacing: 0; }
.zahl-block .l { font-size: 0.95rem; color: var(--auf-nacht-still); }

/* ---------- Systemschiene: wie eine Anfrage ankommt --------------------- */

.schiene { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.schiene-linie {
  position: absolute;
  left: 0; right: 0; top: 1.05rem;
  height: 2px;
  background: var(--nacht-linie);
  overflow: hidden;
}
.schiene-linie::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--koenig), var(--cyan));
  transform-origin: left center;
}
.schiene-puls {
  position: absolute;
  top: 0.7rem;
  left: 0;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(108,231,250,0.22), 0 0 18px 2px rgba(108,231,250,0.55);
  animation: pulsen 5.5s linear infinite;
}
@keyframes pulsen {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: calc(100% - 0.7rem); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .schiene-puls { display: none; } }

/* Unter 46 rem stapeln sich die Knoten — dann führt die Schiene senkrecht
   an ihnen entlang statt waagrecht durch leeren Raum. */
@media (max-width: 45.99rem) {
  .schiene-linie {
    left: 1.05rem; right: auto;
    top: 1.05rem; bottom: 1.05rem;
    width: 2px; height: auto;
  }
  .schiene-linie::before { background: linear-gradient(180deg, var(--koenig), var(--cyan)); }
  .schiene-puls {
    left: 0.7rem;
    top: 1.05rem;
    animation-name: pulsen-hoch;
  }
  @keyframes pulsen-hoch {
    0% { top: 1.05rem; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { top: calc(100% - 1.4rem); opacity: 0; }
  }
}

.knoten-reihe { display: grid; gap: 1.75rem; position: relative; }
@media (min-width: 46rem) { .knoten-reihe { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.knoten { display: grid; gap: 0.5rem; align-content: start; }
.knoten .punkt {
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  border: 2px solid var(--koenig);
  background: var(--nacht);
  display: grid;
  place-items: center;
  font: 600 0.78rem/1 var(--mono);
  color: var(--cyan);
  position: relative;
  z-index: 1;
}
.knoten:last-child .punkt { border-color: var(--cyan); }
.knoten h3 { font-size: 1.2rem; margin-top: 0.5rem; }
.knoten p { font-size: 0.92rem; color: var(--auf-nacht-still); }

/* ---------- Phasen mit Status ------------------------------------------- */

.phase { position: relative; padding-left: 2.25rem; }
.phase::before {
  content: "";
  position: absolute;
  left: 0.52rem; top: 1.9rem; bottom: -1.5rem;
  width: 2px;
  background: var(--nacht-linie);
}
.phase:last-child::before { display: none; }
.phase .stand {
  position: absolute;
  left: 0; top: 1.5rem;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  border: 2px solid var(--koenig);
  background: var(--nacht);
}
.phase.jetzt .stand { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 5px rgba(108,231,250,0.16); }
.phase .marke {
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--auf-nacht-still);
}
.phase.jetzt .marke { color: var(--cyan); }

/* ---------- Gegenüberstellung ------------------------------------------- */

.gegen { display: grid; gap: 1px; background: var(--nacht-linie); border: 1px solid var(--nacht-linie); }
@media (min-width: 50rem) { .gegen { grid-template-columns: 1fr 1fr; } }
.gegen-spalte { background: var(--nacht); padding: clamp(1.5rem, 3vw, 2.25rem); }
.gegen-spalte--wir { background: linear-gradient(150deg, rgba(41,89,196,0.16), rgba(108,231,250,0.05) 60%, transparent); }
.gegen-spalte h3 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.gegen-spalte .marke { font: 600 0.72rem/1 var(--mono); letter-spacing: 0.14em; color: var(--auf-nacht-still); }
.gegen-spalte--wir .marke { color: var(--cyan); }
.gegen-liste { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.gegen-liste li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.7rem;
  font-size: 0.97rem;
  color: var(--auf-nacht-still);
  align-items: start;
}
.gegen-liste li b { color: var(--auf-nacht); font-weight: 600; }
.gegen-liste .zeichen { color: var(--auf-nacht-still); font-family: var(--mono); line-height: 1.6; }
.gegen-spalte--wir .gegen-liste .zeichen { color: var(--cyan); }


/* ---------- Signet: die Schleife aus dem Logo als Band im Raum ---------- */

/* Unten rechts lag es hinter dem Team-Bild und war praktisch unsichtbar.
   Die freie Fläche des Auftakts ist die Mitte zwischen Satz und Bild —
   dort steht es gross, hinter dem Inhalt, und wandert mit dem Scrollen
   langsam nach oben aus dem Bild (--sicht von kino.js). */
.signet {
  position: absolute;
  inset: auto auto 2.5rem max(1.25rem, calc(50% - var(--mass) / 2));
  translate: 0 calc((var(--sicht, 0.5) - 0.5) * -110px);
  width: min(46vw, 30rem);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  filter: blur(0.2px) drop-shadow(0 0 42px rgba(41, 89, 196, 0.34));
}
.auftakt { position: relative; }
.auftakt-gitter { position: relative; z-index: 1; }
@media (min-width: 62rem) {
  .signet { inset: auto auto 2.5rem max(1.25rem, calc(50% - var(--mass) / 2)); width: min(26vw, 24rem); }
}
@media (max-width: 61.99rem) {
  /* Am Telefon steht die Schleife hinter der Überschrift, ruhiger und
     ohne den Satz zu stören. */
  .signet { inset: -1rem -2rem auto auto; width: min(64vw, 20rem); }
  .signet[style] { opacity: 0.5 !important; }
}

/* ---------- Tiefe auf den Preiskarten ---------------------------------- */

.preise { perspective: 1200px; }
.paket {
  transform: perspective(1200px) rotateY(var(--dreh-y, 0deg)) rotateX(var(--dreh-x, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1), box-shadow 0.5s ease-out;
  position: relative;
  will-change: transform;
}
.paket[data-raum] {
  transition: transform 0.12s ease-out, box-shadow 0.3s ease-out;
  box-shadow: 0 24px 60px -28px rgba(11, 21, 38, 0.55);
  z-index: 2;
}
.paket::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-out;
  background: radial-gradient(28rem 28rem at var(--kx, 50%) var(--ky, 50%), rgba(108, 231, 250, 0.20), transparent 62%);
}
.paket[data-raum]::after { opacity: 1; }
.paket--stern::after {
  background: radial-gradient(28rem 28rem at var(--kx, 50%) var(--ky, 50%), rgba(108, 231, 250, 0.28), transparent 62%);
}
.paket > * { transform: translateZ(0.01px); }
.paket--stern .betrag, .paket .betrag { transform: translateZ(18px); }
.paket .ikon-kopf { transform: translateZ(26px); }
@media (prefers-reduced-motion: reduce) {
  .paket { transform: none; transition: none; }
  .paket::after { display: none; }
}


/* ---------- Punktraster --------------------------------------------------- */

.raster-feld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1s ease-out;
}
.hat-raster { position: relative; }
.hat-raster > *:not(.raster-feld):not(.lage) { position: relative; z-index: 1; }
.hat-raster > .raster-feld { position: absolute; inset: 0; display: block; z-index: 0; }

/* ---------- Erreichbarkeit ------------------------------------------------ */

.erreichbar {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  font: 500 0.9rem/1.4 var(--mono);
  letter-spacing: 0.02em;
  color: var(--auf-nacht-still);
}
.erreichbar .lampe {
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--auf-nacht-still);
  flex: 0 0 auto;
}
.erreichbar[data-zustand="offen"] { color: var(--cyan); }
.erreichbar[data-zustand="offen"] .lampe {
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(108,231,250,0.55);
  animation: lampe 2.6s ease-out infinite;
}
@keyframes lampe {
  0% { box-shadow: 0 0 0 0 rgba(108,231,250,0.5); }
  70%, 100% { box-shadow: 0 0 0 0.85rem rgba(108,231,250,0); }
}
@media (prefers-reduced-motion: reduce) { .erreichbar .lampe { animation: none; } }

/* Auf dem hellen Schlussverlauf wäre Cyan auf Cyan — 1,00:1. Dort trägt
   der Zustand „offen“ die dunkle Auszeichnung: Text 8,4:1, Lampe mit
   hellem Ring statt hellem Kern. */
.schluss .erreichbar { color: #0E2033; }
.schluss .erreichbar .lampe { background: rgba(11, 21, 38, 0.42); }
.schluss .erreichbar[data-zustand="offen"] { color: var(--akzent-tief); font-weight: 600; }
.schluss .erreichbar[data-zustand="offen"] .lampe {
  background: var(--akzent-tief);
  box-shadow: 0 0 0 0 rgba(11, 60, 130, 0.45);
  animation: lampe-dunkel 2.6s ease-out infinite;
}
@keyframes lampe-dunkel {
  0% { box-shadow: 0 0 0 0 rgba(11, 60, 130, 0.45); }
  70%, 100% { box-shadow: 0 0 0 0.85rem rgba(11, 60, 130, 0); }
}
@media (prefers-reduced-motion: reduce) { .schluss .erreichbar .lampe { animation: none; } }

/* ---------- Marken auf den Demo-Kacheln ----------------------------------- */

.demo .kennung {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--auf-nacht-still);
  margin-bottom: 0.15rem;
}
.demo .kennung .pkt {
  width: 0.42rem; height: 0.42rem;
  border-radius: 50%;
  background: var(--ton, var(--cyan));
}

/* ---------- Preisachse ---------------------------------------------------- */

.achse { margin-top: clamp(2rem, 4vw, 3rem); position: relative; padding-top: 2.6rem; }
.achse-linie {
  position: relative;
  height: 2px;
  background: var(--papier-linie);
  overflow: visible;
}
.achse-linie::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--akzent-text), var(--koenig) 55%, var(--cyan));
  transform-origin: left center;
}
.achse-marke {
  position: absolute;
  top: -2.6rem;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
.achse-marke .betrag-klein {
  display: block;
  font-family: var(--anzeige);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  line-height: 1;
  color: var(--tinte);
}
.achse-marke .n {
  display: block;
  font: 600 0.66rem/1.4 var(--mono);
  letter-spacing: 0.12em;
  color: var(--auf-papier-still);
}
.achse-marke::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.6rem;
  width: 1px; height: 0.6rem;
  background: var(--papier-linie);
}
.achse-marke:first-child { transform: translateX(-0.5rem); text-align: left; }
.achse-marke:first-child::after { left: 0.5rem; }
.achse-marke:last-child { transform: translateX(-100%); text-align: right; }
.achse-marke:last-child::after { left: auto; right: 0.5rem; }


/* ---------- Ziffernregen -------------------------------------------------- */

.regen-feld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease-out;
  /* Die Maske hält die Spalten von der Überschrift fern: links nichts,
     rechts voll. Dazu ein weicher Auslauf nach unten. */
  -webkit-mask-image:
    linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,0.55) 62%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image:
    linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,0.55) 62%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 61.99rem) {
  .regen-feld {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 72%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 72%);
  }
}


/* ---------- Ziffernregen über die ganze Seite ----------------------------- */

.regen-voll {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease-out;
}
/* Alles Sichtbare liegt darüber; die hellen Abschnitte decken den Regen
   ab, dadurch bekommt die Seite Rhythmus statt gleichmässigem Rauschen. */
body > header, body > main, body > footer, body > .leiste, body > .sprung {
  position: relative;
  z-index: 1;
}


/* ---------- Bitleiste statt Strich --------------------------------------- */

.kopfzeile .strich[data-bits] {
  width: auto;
  height: auto;
  background: none;
  margin-bottom: 1.25rem;
  font: 600 0.8rem/1 var(--mono);
  letter-spacing: 0.42em;
  color: var(--cyan);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .kopfzeile .strich[data-bits] {
    background: linear-gradient(90deg, var(--koenig), var(--cyan) 55%, rgba(108,231,250,0.35));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .teil--hell .kopfzeile .strich[data-bits] {
    background: linear-gradient(90deg, var(--akzent-tief), var(--akzent-text) 55%, rgba(15,79,168,0.4));
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.teil--hell .kopfzeile .strich[data-bits] { color: var(--akzent-text); }
@media (max-width: 30rem) {
  .kopfzeile .strich[data-bits] { font-size: 0.72rem; letter-spacing: 0.3em; }
}


/* ---------- Knoten leuchten im Takt des Pulses --------------------------- */

@keyframes knoten-leuchten {
  0%   { border-color: var(--cyan); color: #041018; background: var(--cyan); box-shadow: 0 0 0 0 rgba(108,231,250,0.55), 0 0 26px 4px rgba(108,231,250,0.5); }
  14%  { border-color: var(--cyan); color: #041018; background: var(--cyan); box-shadow: 0 0 0 0.9rem rgba(108,231,250,0), 0 0 26px 4px rgba(108,231,250,0.25); }
  30%, 100% { border-color: var(--koenig); color: var(--cyan); background: var(--nacht); box-shadow: none; }
}
.knoten .punkt { animation: knoten-leuchten 5.5s linear infinite; }
.knoten-reihe > .knoten:nth-child(1) .punkt { animation-delay: 0.08s; }
.knoten-reihe > .knoten:nth-child(2) .punkt { animation-delay: 1.49s; }
.knoten-reihe > .knoten:nth-child(3) .punkt { animation-delay: 2.89s; }
.knoten-reihe > .knoten:nth-child(4) .punkt { animation-delay: 4.30s; }

@media (prefers-reduced-motion: reduce) { .knoten .punkt { animation: none; } }

/* ---------- Bitzeile über dem Preisfuss ---------------------------------- */

.bitzeile { display: block; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.bitzeile:not([data-bits]) { width: 3.5rem; height: 3px; background: linear-gradient(90deg, var(--koenig), var(--cyan)); }
.teil--hell .bitzeile:not([data-bits]) { background: linear-gradient(90deg, var(--akzent-tief), var(--akzent-text)); }

/* ---------- Betrag beim Entschlüsseln ------------------------------------ */

.paket .betrag [data-code] { font-variant-numeric: tabular-nums; }


/* ---------- Fenster auf den Demo-Kacheln --------------------------------- */

.demo .fenster {
  display: block;
  margin: 0.9rem 1.4rem 0;
  border: 1px solid var(--nacht-linie);
  background: var(--nacht);
  overflow: hidden;
}
.demo .fenster-leiste {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--nacht-linie);
  background: rgba(255,255,255,0.03);
}
.demo .fenster-leiste i {
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--nacht-linie);
  flex: 0 0 auto;
}
.demo .fenster-leiste em {
  font: 500 0.62rem/1 var(--mono);
  font-style: normal;
  color: var(--auf-nacht-still);
  margin-left: 0.45rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo .fenster-flaeche {
  display: block;
  padding: 0.85rem 0.75rem 1rem;
  background: linear-gradient(150deg, var(--ton, var(--koenig)) 0%, transparent 78%);
}
.demo .fenster-titel {
  display: block;
  height: 0.62rem;
  width: 62%;
  background: rgba(255,255,255,0.62);
  margin-bottom: 0.75rem;
}
.demo .fenster-zeile {
  display: block;
  height: 0.3rem;
  width: 88%;
  background: rgba(255,255,255,0.20);
  margin-bottom: 0.34rem;
}
.demo .fenster-zeile.kurz { width: 58%; }
.demo .fenster-reihe { display: flex; gap: 0.34rem; margin-top: 0.75rem; }
.demo .fenster-reihe b {
  display: block;
  flex: 1;
  height: 1.15rem;
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(255,255,255,0.10);
}
.demo:hover .fenster-titel { background: rgba(255,255,255,0.85); }
.demo .fenster-titel, .demo .fenster-zeile, .demo .fenster-reihe b { transition: background 0.35s ease-out; }
.demo:hover .fenster-reihe b { background: rgba(108,231,250,0.22); }
.demo .in { padding-top: 1rem; }

/* Die Nummer der Leistungszeile in Binärschrift ------------------------- */
.folge-zeile .nr[data-code] { font-variant-numeric: tabular-nums; }


/* ---------- Bewertung, sichtbar statt behauptet -------------------------- */

.wertung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--papier-linie);
  margin-bottom: 1.25rem;
}
.sterne-leiste { display: flex; gap: 0.2rem; }
.sterne-leiste .stern {
  width: 1.05rem; height: 1.05rem;
  background: var(--akzent-text);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.wert-zahl {
  font-family: var(--anzeige);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  line-height: 1;
  color: var(--akzent-text);
  font-variant-numeric: tabular-nums;
}
.wert-text { font-size: 0.93rem; color: var(--auf-papier-still); }

/* ---------- Phasenschiene zieht sich ------------------------------------- */

@keyframes linie-ziehen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ablauf .phase::before { transform-origin: top center; }
.ablauf.laeuft .phase::before { animation: linie-ziehen 0.75s cubic-bezier(.22,.61,.36,1) both; }
.ablauf.laeuft .phase:nth-child(2)::before { animation-delay: 0.12s; }
.ablauf.laeuft .phase:nth-child(3)::before { animation-delay: 0.24s; }
.ablauf.laeuft .phase:nth-child(4)::before { animation-delay: 0.36s; }
.ablauf.laeuft .phase:nth-child(5)::before { animation-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) { .ablauf.laeuft .phase::before { animation: none; } }

/* Das Raster in der rechten Spalte darf den Verlauf nicht überstrahlen */
.gegen-spalte--wir .raster-feld { opacity: 0; }


/* ---------- Standpunkte pulsen die Schiene hinunter ---------------------- */

@keyframes stand-puls {
  0%   { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 0 rgba(108,231,250,0.55), 0 0 20px 3px rgba(108,231,250,0.45); }
  12%  { box-shadow: 0 0 0 0.75rem rgba(108,231,250,0), 0 0 20px 3px rgba(108,231,250,0.16); }
  26%, 100% { background: var(--nacht); border-color: var(--koenig); box-shadow: none; }
}
.ablauf .phase .stand { animation: stand-puls 6.5s cubic-bezier(.5,0,.5,1) infinite; }
.ablauf .phase:nth-child(1) .stand { animation-delay: 0.2s; }
.ablauf .phase:nth-child(2) .stand { animation-delay: 1.5s; }
.ablauf .phase:nth-child(3) .stand { animation-delay: 2.8s; }
.ablauf .phase:nth-child(4) .stand { animation-delay: 4.1s; }
.ablauf .phase:nth-child(5) .stand { animation-delay: 5.4s; }
.ablauf .phase.jetzt .stand { background: var(--cyan); border-color: var(--cyan); }
@media (prefers-reduced-motion: reduce) { .ablauf .phase .stand { animation: none; } }

/* ---------- Bitzeile im Schluss und im Seitenkopf ----------------------- */

.schluss .bitzeile { margin: 0 0 1.25rem; }
.schluss .bitzeile:not([data-bits]) { background: linear-gradient(90deg, var(--akzent-tief), rgba(11,60,130,0.35)); }
.schluss .bitzeile[data-bits] { color: var(--akzent-tief); background: none; -webkit-text-fill-color: currentColor; }
.seiten-kopf .bitzeile { margin: 0 0 1.4rem; }
.seiten-kopf .wo { font-family: var(--mono); letter-spacing: 0.02em; }
.lang-zeile .nr[data-code], .schritt .nr[data-code] { font-variant-numeric: tabular-nums; }


/* ---------- Binäre Positionsnummern -------------------------------------- */

.haltung-zeile { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .haltung-zeile { grid-template-columns: 3.6rem 14rem 1fr; }
}
.haltung-zeile .pos, .frage .pos {
  font: 600 0.72rem/1.6 var(--mono);
  letter-spacing: 0.12em;
  color: var(--akzent-text);
  font-variant-numeric: tabular-nums;
}
.teil:not(.teil--hell) .haltung-zeile .pos { color: var(--cyan); }
.frage summary { gap: 0.9rem; }
.frage .pos { flex: 0 0 auto; }


/* ---------- Bitkante auf den Preiskarten --------------------------------- */

.paket .bitkante {
  display: block;
  font: 600 0.6rem/1 var(--mono);
  letter-spacing: 0.34em;
  color: rgba(15, 79, 168, 0.42);
  white-space: nowrap;
  overflow: hidden;
  margin: -0.35rem 0 0.55rem;
  user-select: none;
}
.paket--stern .bitkante { color: rgba(108, 231, 250, 0.55); }


/* ---------- Reglerstände ------------------------------------------------- */

html[data-regen="aus"] .regen-voll,
html[data-regen="aus"] .regen-feld { display: none; }
html[data-signet="aus"] .signet { display: none; }


/* =====================================================================
   Abschnitt für Abschnitt
   ---------------------------------------------------------------------
   Sanftes Einrasten, kein Zwang: `proximity` fängt nur, wenn man ohnehin
   in der Nähe eines Abschnittsanfangs zum Stehen kommt. Damit rutscht
   niemand an Inhalt vorbei, aber niemand sitzt auch fest. Erst ab 58 rem
   und nur, wenn Bewegung erwünscht ist.
   ===================================================================== */

html { scroll-padding-top: 5.5rem; }
@media (max-width: 58rem) { html { scroll-padding-top: 7rem; } }

/* Einheitliches Mass für alle Abschnitte: gleiche Luft oben wie unten,
   gleiche Luft zwischen Kopfzeile und Inhalt. Vorher hatte jeder
   Abschnitt sein eigenes Mass, dadurch wirkte das Scrollen unruhig. */
.teil, .schluss { padding-block: var(--luft); }
.kopfzeile { margin-bottom: clamp(1.75rem, 2.8vw, 2.5rem); }
.seiten-kopf { padding-block: clamp(4rem, 8vw, 7rem) clamp(3.25rem, 6vw, 5.25rem); }
:root { --luft: clamp(3.25rem, 5.2vw, 4.75rem); }

/* ---------- Fortschritt im Kopf ------------------------------------------ */

.fortschritt {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.fortschritt i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--koenig), var(--cyan));
}



/* ---------- Mass der Preiskarten ---------------------------------------- */

.paket { padding: clamp(1.75rem, 2.8vw, 2.5rem); gap: 0.85rem; }
.paket ul { gap: 0.6rem; font-size: 0.97rem; }
.paket .betrag { font-size: clamp(2.4rem, 1.7rem + 2.4vw, 3.4rem); }
.paket .betrag small { margin-top: 0.6rem; font-size: 0.86rem; }
.paket .ikon-kopf { width: 2.1rem; height: 2.1rem; }
.paket .name { font-size: 0.8rem; }



/* ---------- Leistungszeilen prominenter ---------------------------------- */

.folge-zeile { padding-block: clamp(1.5rem, 2.4vw, 2.1rem); }
.folge-zeile .nr {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  padding-top: 0.55rem;
}
.folge-zeile h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }


/* ---------- Kante zwischen den Abschnitten ------------------------------- */

.teil--hell {
  position: relative;
  padding-block: calc(var(--luft) * 1.22) var(--luft);
  border-block: 1px solid var(--papier-linie);
}
.teil--hell::before,
.teil--hell::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--koenig), var(--cyan) 45%, transparent 85%);
  opacity: 0.9;
}
.teil--hell::before { top: 0; }
.teil--hell::after { bottom: 0; transform: scaleX(-1); }


/* ---------- Ausnahmen, die gegen die allgemeinen Regeln bestehen müssen ---
   In dieser Datei werden neue Regeln ans Ende gehängt. Eine Ausnahme mit
   gleicher Spezifität verliert deshalb gegen die allgemeine Regel. Alle
   Ausnahmen stehen hier unten und tragen zwei Klassen. */

.teil.kennzahlen { padding-block: 0 var(--luft); }


/* ---------- Ein Mass für alle Abschnitte -------------------------------- */

.teil.teil, .schluss.schluss { padding-block: var(--luft); }
.teil.kennzahlen { padding-block: 0 var(--luft); }
.seiten-kopf.seiten-kopf { padding-block: clamp(2.5rem, 4.5vw, 3.75rem); }
.auftakt.auftakt { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--luft); }


/* ---------- Auftakt kürzer ----------------------------------------------- */

.auftakt.auftakt { padding-block: clamp(1.75rem, 3.5vw, 3rem) var(--luft); }
.auftakt h1 { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 4.6rem); margin-bottom: 1.1rem; }
.auftakt .fuehrung { font-size: clamp(1rem, 0.97rem + 0.3vw, 1.15rem); max-width: 32em; }
.auftakt-tun { margin-top: 1.5rem; }
.auftakt-belege { margin-top: 1.6rem; padding-top: 1.1rem; }
.auftakt-gitter { gap: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Das Foto ist 1813 × 2048 — ungeschnitten wird der Auftakt dadurch sehr
   hoch. Eine Höhengrenze mit `contain` kürzt den Abschnitt, ohne ein
   Gesicht anzuschneiden. */
.auftakt-bild img { max-height: 24rem; object-fit: contain; object-position: right bottom; }
@media (min-width: 62rem) { .auftakt-bild img { max-height: 30rem; } }
.auftakt-bild figcaption { margin-top: 0.6rem; }


/* ---------- Auftakt, Laufband und Zahlen sind ein Abschnitt -------------- */

.auftakt > .laufband { margin-top: clamp(2rem, 4vw, 3rem); }
.auftakt > .zahlen-gitter { margin-top: 0; }
.auftakt.auftakt { padding-bottom: 0; }
.auftakt > .mass.auftakt-gitter { position: relative; z-index: 1; }


/* ---------- Preistafel: kleiner, aber nicht klein ------------------------ */

.paket.paket { padding: clamp(1.35rem, 2.1vw, 1.75rem); gap: 0.65rem; }
.paket.paket .betrag { font-size: clamp(2rem, 1.5rem + 1.7vw, 2.6rem); }
.paket.paket .betrag small { margin-top: 0.45rem; font-size: 0.8rem; }
.paket.paket ul { gap: 0.45rem; font-size: 0.93rem; }
.paket.paket .ikon-kopf { width: 1.7rem; height: 1.7rem; margin-bottom: 0.25rem; }
.preis-fuss { margin-top: 1.1rem; font-size: 0.9rem; }


/* ---------- Systemabschnitt: kompakter und sauber begrenzt --------------- */

/* Ohne diese Grenze kann die Leinwand des Punktrasters über die Kante des
   Abschnitts hinausreichen und in den darüberliegenden schneiden. */
.hat-raster { overflow: hidden; }

.schiene { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.knoten-reihe { gap: 1.25rem; }
@media (min-width: 46rem) { .knoten-reihe { gap: 0.85rem; } }
.knoten h3 { font-size: 1.1rem; margin-top: 0.35rem; }
.knoten p { font-size: 0.88rem; }
.knoten .punkt { width: 1.85rem; height: 1.85rem; font-size: 0.72rem; }
.schiene-linie { top: 0.92rem; }
.schiene-puls { top: 0.6rem; }
@media (max-width: 45.99rem) {
  .schiene-linie { left: 0.92rem; top: 0.92rem; bottom: 0.92rem; }
  .schiene-puls { left: 0.57rem; }
}


/* ---------- Leistungen, Beispiele, Gegenüberstellung: kompakter ---------- */

.folge-zeile.folge-zeile { padding-block: clamp(1.1rem, 1.8vw, 1.5rem); gap: 0.4rem 2rem; }
.folge-zeile h3 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem); }
.folge-zeile .still { font-size: 0.95rem; }
.folge-zeile .dazu { font-size: 0.88rem; gap: 0.25rem; }

.demos { gap: 1rem; }
.demo .fenster { margin: 0.7rem 1.1rem 0; }
.demo .fenster-flaeche { padding: 0.65rem 0.6rem 0.75rem; }
.demo .fenster-titel { height: 0.52rem; margin-bottom: 0.55rem; }
.demo .fenster-reihe b { height: 0.9rem; }
.demo .in { padding: 0.8rem 1.1rem 1.1rem; gap: 0.28rem; }
.demo .name { font-size: 1.25rem; }
.demo p { font-size: 0.87rem; }
.demo .oeffnen { margin-top: 0.35rem; font-size: 0.84rem; }

.gegen-spalte { padding: clamp(1.2rem, 2.2vw, 1.75rem); }
.gegen-spalte h3 { font-size: 1.3rem; }
.gegen-liste { gap: 0.55rem; margin-top: 1rem; }
.gegen-liste li { font-size: 0.92rem; }


/* ---------- Referenzen und Ablauf: kompakter ---------------------------- */

.referenz-gitter { gap: clamp(1.5rem, 3vw, 2.5rem); }
.echt { padding: clamp(1.2rem, 2.2vw, 1.75rem); gap: 0.65rem; }
.echt h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); }
.stimmen { gap: 0.9rem; }
.stimme blockquote { font-size: 0.94rem; margin-bottom: 0.45rem; }
.stimme figcaption { font-size: 0.85rem; }
.wertung { padding-block: 0.9rem; margin-bottom: 0.9rem; gap: 0.4rem 0.75rem; }
.wert-zahl { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); }
.sterne-leiste .stern { width: 0.9rem; height: 0.9rem; }

.schritt.schritt { padding-block: 1.1rem; gap: 0.3rem 1.75rem; }
.schritt h3 { font-size: 1.2rem; margin-bottom: 0.2rem; }
.schritt p { font-size: 0.92rem; }
.phase { padding-left: 2rem; }
.phase .stand { top: 1.25rem; }
.phase::before { top: 1.6rem; bottom: -1.1rem; }


/* ---------- Schlussblock: kompakter ------------------------------------- */

.schluss.schluss { padding-block: clamp(2.75rem, 4.5vw, 4rem); }
.schluss h2 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); max-width: 22ch; }
.schluss p { margin-top: 0.85rem; font-size: 0.97rem; }
.schluss .tun { margin-top: 1.5rem; }
.schluss .erreichbar { min-height: 2.25rem; font-size: 0.85rem; }
.schluss .bitzeile { margin-bottom: 1rem; }


/* ---------- Seitenkopf der Unterseiten: grösser -------------------------- */

.seiten-kopf.seiten-kopf { padding-block: clamp(3.5rem, 6.5vw, 6rem) clamp(3rem, 5vw, 4.5rem); }
.seiten-kopf h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.4rem); max-width: 17ch; }
.seiten-kopf p { margin-top: 1.5rem; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem); max-width: 40em; }
.seiten-kopf .wo { margin-bottom: 1.6rem; }
.seiten-kopf .bitzeile { margin-bottom: 1.6rem; }


/* =====================================================================
   Ein Wisch, ein Abschnitt
   ---------------------------------------------------------------------
   `scroll-snap-stop: always` ist genau der Halt, den man sich wünscht:
   ein Schwung darf höchstens bis zum nächsten Abschnittsanfang tragen,
   danach muss man erneut wischen. Dadurch kann niemand über einen
   Abschnitt hinwegfliegen, bevor dessen Sequenz gespielt hat.

   Bewusst `proximity` statt `mandatory`: Abschnitte, die höher sind als
   das Fenster, würden sonst festhalten. Nur ab 58 rem — auf dem Telefon
   ist erzwungenes Einrasten ein Bedienfehler — und nur, wenn Bewegung
   erwünscht ist.
   ===================================================================== */

@media (min-width: 58rem) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }
  main > section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 4.5rem;
  }
  .schluss, .fuss { scroll-snap-align: none; }
}


/* ---------- Systemabschnitt wieder grösser ------------------------------- */

#weg.teil { padding-block: calc(var(--luft) * 1.4); }
#weg .knoten .punkt { width: 2.3rem; height: 2.3rem; font-size: 0.8rem; }
#weg .knoten h3 { font-size: 1.35rem; margin-top: 0.55rem; }
#weg .knoten p { font-size: 0.95rem; }
#weg .schiene { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
#weg .knoten-reihe { gap: 1.75rem; }
@media (min-width: 46rem) { #weg .knoten-reihe { gap: 1.25rem; } }
#weg .schiene-linie { top: 1.15rem; }
#weg .schiene-puls { top: 0.8rem; }
@media (max-width: 45.99rem) {
  #weg .schiene-linie { left: 1.15rem; top: 1.15rem; bottom: 1.15rem; }
  #weg .schiene-puls { left: 0.8rem; }
}


/* ---------- Ablauf: kürzer ---------------------------------------------- */

#ablauf .schritt { padding-block: 0.85rem; }
#ablauf .schritt h3 { font-size: 1.1rem; }
#ablauf .schritt p { font-size: 0.88rem; }
#ablauf .phase::before { top: 1.35rem; bottom: -0.85rem; }
#ablauf .phase .stand { top: 1.05rem; width: 0.95rem; height: 0.95rem; }
#ablauf .schritt .nr { font-size: 0.78rem; }
#ablauf .schritt .wer { font-size: 0.7rem; }


/* ---------- Seitenkopf: volle Höhe ---------------------------------------
   Der Kopf einer Unterseite ist die erste Einstellung — er darf den
   Bildschirm tragen, nicht nur eine Zeile sein. Mindesthöhe statt
   Polsterwerten, damit er auf jedem Bildschirm gleich wirkt. */

.seiten-kopf.seiten-kopf {
  min-height: 62dvh;
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
@media (min-width: 58rem) { .seiten-kopf.seiten-kopf { min-height: 70dvh; } }
.seiten-kopf > .mass { width: min(100% - 2.5rem, var(--mass)); }
.seiten-kopf h1 { font-size: clamp(2.8rem, 1.6rem + 5vw, 5rem); }


/* ---------- Haltungsliste: weniger Weissraum ----------------------------- */

.haltung-zeile.haltung-zeile { padding-block: 0.9rem; gap: 0.3rem 1.75rem; }
@media (min-width: 48rem) {
  .haltung-zeile.haltung-zeile { grid-template-columns: 3rem 13rem 1fr; }
}
.haltung-zeile h3 { font-size: 1.15rem; }
.haltung-zeile p { font-size: 0.9rem; }
.haltung-zeile .pos { line-height: 1.9; }


/* =====================================================================
   Prüflisten-Durchgang über die ganze Website
   Die Punkte stehen in derselben Reihenfolge wie die Prüfliste, damit
   man später nachvollziehen kann, warum ein Wert so ist.
   ===================================================================== */

/* §2 tap-delay — 300 ms Verzögerung auf Touch-Geräten abstellen */
a, button, summary, .taste, .demo, input, select, textarea {
  touch-action: manipulation;
}

/* §2 cursor-pointer — anklickbar muss auch so aussehen */
summary, .taste, button { cursor: pointer; }

/* §5 z-index — eine benannte Leiter statt gestreuter Werte:
   0 Grund · 10 klebende Elemente · 30 Kopf · 45 feste Leiste · 100 Vorhang */
:root { --z-grund: 0; --z-klebend: 10; --z-kopf: 30; --z-leiste: 45; --z-vorhang: 100; }
.kopf { z-index: var(--z-kopf); }
.leiste { z-index: var(--z-leiste); }
.tafel tbody th, .tafel thead th:first-child { z-index: var(--z-klebend); }

/* §5 orientation-support — im Querformat auf dem Telefon ist der
   Seitenkopf sonst höher als das Fenster */
@media (max-height: 32rem) and (orientation: landscape) {
  .seiten-kopf.seiten-kopf { min-height: 0; padding-block: 2.5rem; }
  .auftakt.auftakt { padding-block: 1.5rem 2.5rem; }
}

/* §5 fixed-element-offset — die feste Leiste darf den Fussbereich nicht
   verdecken */
@media (max-width: 58rem) { .fuss { padding-bottom: 6.5rem; } }

/* §6 line-height / line-length — Fliesstext auf 65–75 Zeichen */
.beitrag > p, .haltung-zeile p, .knoten p, .demo p { max-width: 68ch; }
.teil p, .schluss p { line-height: 1.62; }

/* §6 number-tabular — Zahlen in Spalten dürfen nicht springen */
.tafel td, .tafel th, .paket .betrag, .zahl-block .wert, .achse-marke .betrag-klein {
  font-variant-numeric: tabular-nums;
}

/* §7 exit-faster-than-enter — Verschwinden ist kürzer als Erscheinen */
.demo, .taste, .kopf nav a, .hin, .kontakt-zeile a {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.demo:hover, .taste:hover { transition-duration: 0.32s; }
/* .paket bleibt aussen vor: dort muss die Kippbewegung dem Zeiger
   sofort folgen (0,12 s) und beim Loslassen ausschwingen (0,5 s). */

/* §7 scale-feedback — spürbarer Druckpunkt auf Tasten und Kacheln */
.taste:active { transform: scale(.978); }

@media (prefers-reduced-motion: reduce) {
  .taste:active { transform: none; }
}

/* §8 touch-friendly-input — Eingabefelder auf Fingergrösse */
.feld input, .feld select, .feld textarea { min-height: 2.9rem; font-size: 1rem; }

/* §8 disabled-states — deutlich und nicht bedienbar */
.taste[disabled], button[disabled], .feld :disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* §9 nav-state-active — der aktuelle Ort ist nicht nur farbig markiert,
   sondern trägt auch mehr Gewicht (§1 color-not-only) */
.kopf nav a[aria-current="page"] { font-weight: 700; }



/* ---------- Wortmarke = das Logo ---------------------------------------- */
/* Statt gesetzter Schrift steht hier die freigestellte Sperrschrift aus dem
   Logo: Kamera, Schleife, LMMeier, Life Moments. Der Alt-Text trägt den
   Namen, deshalb braucht der Link keine zusätzliche Beschriftung. */

.marke img {
  display: block;
  height: 2.1rem;
  width: auto;
  filter: drop-shadow(0 0 18px rgba(41, 90, 200, 0.4));
}
.fuss .marke img { height: 2.5rem; }
@media (max-width: 58rem) { .marke img { height: 1.85rem; } }
@media (max-width: 24.5rem) { .marke img { height: 1.6rem; } }


/* ---------- Scroll-Bindung (kino.js) ------------------------------------ */
/* Jede Regel hat einen Standardwert, der ohne Skript stimmt: --ab 0 heisst
   „nicht weggegangen", --nah 1 heisst „steht in der Mitte", --fuell 1 heisst
   „ganz gefüllt". Das Skript setzt die Werte nur enger. Gearbeitet wird mit
   translate statt transform, damit nichts mit bewegung.js kollidiert. */

.auftakt-satz { translate: 0 calc(var(--ab, 0) * -38px); }
.auftakt-bild { translate: 0 calc(var(--ab, 0) * 26px); }
.auftakt-satz, .auftakt-bild { will-change: translate; }

/* Die Schiene: ohne Skript voll, mit Skript folgt sie dem Lesefortschritt. */
.schiene-linie::before { transform: scaleX(var(--fuell, 1)); transition: transform 0.12s linear; }
@media (max-width: 45.99rem) {
  .schiene-linie::before { transform: scaleY(var(--fuell, 1)); transform-origin: center top; }
}
.knoten .punkt { transition: box-shadow 0.45s ease-out, color 0.45s ease-out; }
.knoten[data-erreicht] .punkt {
  color: var(--nacht);
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 5px rgba(108, 231, 250, 0.17);
}
.knoten h3 { transition: color 0.45s ease-out; }
.knoten[data-erreicht] h3 { color: var(--cyan); }

/* Die Demo-Kacheln: das Fenster hebt sich, wenn die Kachel in die Mitte
   kommt, und die Balken darin füllen sich mit. */
.demo .fenster { translate: 0 calc((1 - var(--nah, 1)) * 12px); }
.demo .fenster-titel,
.demo .fenster-zeile,
.demo .fenster-reihe b {
  transform-origin: left center;
  transform: scaleX(calc(0.25 + 0.75 * var(--nah, 1)));
}
.demo .streifen { opacity: calc(0.35 + 0.65 * var(--nah, 1)); }

@media (prefers-reduced-motion: reduce) {
  .auftakt-satz, .auftakt-bild, .demo .fenster { translate: none; }
  .schiene-linie::before { transform: none; }
  .demo .fenster-titel, .demo .fenster-zeile, .demo .fenster-reihe b { transform: none; }
  .demo .streifen { opacity: 1; }
}


/* ---------- Vergleichstafel: Gruppen, klebender Kopf, Handlungszeile ------ */
/* Aus dem 21st.dev-Muster „Feature Comparison Table" übernommen und auf das
   Haus übersetzt: dreizehn Zeilen am Stück liest niemand, deshalb Gruppen;
   beim Scrollen muss sichtbar bleiben, welche Spalte welches Paket ist,
   deshalb klebt der Kopf; und am Fuss steht der Ruf zur Tat, damit niemand
   zum Anfang zurückscrollen muss. */

.tafel .tafel-gruppe th {
  padding-top: 1.6rem;
  padding-bottom: 0.5rem;
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent-text);
  background: transparent;
  border-bottom: 1px solid currentColor;
  text-align: left;
}
.tafel .tafel-gruppe:first-child th { padding-top: 0.6rem; }
/* Jede Gruppenzeile wiederholt die Spaltenköpfe. Ein klebender Kopf ginge hier
   nicht: die Tafel scrollt waagrecht, und overflow-x:auto zwingt die Y-Achse
   ebenfalls auf auto — der Halter wäre der Scrollport und scrollt vertikal nie.
   Die Wiederholung löst dasselbe Problem ohne verschachtelten Scroller. */
.tafel .tafel-gruppe td {
  padding-top: 1.6rem;
  padding-bottom: 0.5rem;
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* --auf-papier-still, nicht --leise: letzteres ist ein Token der Demo-
     Palette und in dieser Datei nicht definiert. Der Verweis stand nur noch
     als Ausweichwert da und war toter Code. */
  color: var(--auf-papier-still);
  border-bottom: 1px solid currentColor;
  vertical-align: bottom;
}
.tafel .tafel-gruppe:first-child td { padding-top: 0.6rem; }
.tafel .tafel-gruppe td.hebe { color: var(--akzent-text); }

.tafel .tafel-tun td { padding-top: 1.4rem; vertical-align: top; }
.tafel .tafel-tun .taste { width: 100%; justify-content: center; }
.taste--klein { font-size: 0.82rem; padding: 0.55rem 0.9rem; min-height: 2.75rem; }


/* ---------- Bilder, die beim Scrollen ankommen -------------------------- */
/* --nah steht ohne Skript auf 1: Endzustand, nichts versteckt. Das Skript
   setzt den Wert beim Hereinscrollen kleiner. Der Rahmen öffnet sich von
   oben und unten, das Bild legt sich von 1.12 auf 1 zurück. */

[data-bildlauf] {
  --nah: 1;
  clip-path: inset(calc((1 - var(--nah)) * 7%) 0 calc((1 - var(--nah)) * 7%) 0);
  overflow: hidden;
}
[data-bildlauf] > img,
[data-bildlauf] > picture > img,
[data-bildlauf] > a > img {
  transform-origin: 50% 55%;
  scale: calc(1 + (1 - var(--nah)) * 0.12);
  will-change: scale;
}

/* ---------- Zurück nach oben ------------------------------------------- */

.hoch {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(4.9rem + env(safe-area-inset-bottom));
  z-index: var(--z-leiste);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--taste-linie, var(--cyan));
  background: var(--nacht);
  color: var(--auf-nacht);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.6rem);
  pointer-events: none;
  transition: opacity 0.28s ease-out, transform 0.28s cubic-bezier(.22,.61,.36,1);
}
.hoch[data-sichtbar] { opacity: 1; transform: none; pointer-events: auto; }
.hoch:hover { border-color: var(--cyan); color: var(--cyan); }
.hoch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; opacity: 1; pointer-events: auto; }
.hoch svg { flex: 0 0 auto; }
@media (min-width: 46rem) {
  .hoch { bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 26rem) {
  .hoch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hoch { padding: 0.55rem; width: 2.75rem; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  [data-bildlauf] { clip-path: none; }
  [data-bildlauf] > img, [data-bildlauf] > picture > img, [data-bildlauf] > a > img { scale: 1; }
  .hoch { transition: none; }
}
@media print { .hoch { display: none; } [data-bildlauf] { clip-path: none; } }


/* ---------- Demo-Kachel: echte Vorschau statt grauer Balken ------------- */
/* Die Kachel zeigt jetzt das Auftaktbild der jeweiligen Demo und darunter
   den einen Satz, der diese Demo ausmacht. Das Bild sitzt im Fensterrahmen,
   kommt beim Scrollen an (--nah) und rückt beim Überfahren näher. */

.demo .fenster-flaeche {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 0;
  background: var(--nacht-2, #0B1226);
  --nah: 1;
  clip-path: inset(calc((1 - var(--nah)) * 6%) 0 calc((1 - var(--nah)) * 6%) 0);
}
.demo .fenster-flaeche > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 45%;
  scale: calc(1.02 + (1 - var(--nah)) * 0.12);
  filter: saturate(0.92) contrast(1.04);
  transition: scale 0.5s cubic-bezier(.22,.61,.36,1), filter 0.4s ease-out;
}
.demo:hover .fenster-flaeche > img,
.demo:focus-visible .fenster-flaeche > img { scale: 1.08; filter: saturate(1) contrast(1.02); }

/* Der Satz liegt auf einem Verlauf, damit er auf jedem Bild 4,5:1 hält. */
.demo .fenster-satz {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 0.85rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, transparent, rgba(4, 8, 18, 0.55) 42%, rgba(4, 8, 18, 0.9));
}
/* Die Branchenfarbe der Kachel liegt als schmale Kante auf dem Bild. */
.demo .fenster-flaeche::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--ton, var(--cyan));
  transform: scaleX(var(--nah, 1));
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .demo .fenster-flaeche { clip-path: none; }
  .demo .fenster-flaeche > img { scale: 1.02; transition: none; }
  .demo:hover .fenster-flaeche > img { scale: 1.02; }
  .demo .fenster-flaeche::after { transform: none; }
}


/* ---------- Demo-Galerie: zwei Spalten, versetzt, perspektivisch --------- */
/* Nach Ihrer Vorlage: grosse Karten, die rechte Spalte um eine halbe Höhe
   nach unten versetzt, jede Karte fliegt beim Scrollen von unten herein und
   kippt dabei aus der Perspektive — links anders als rechts.

   Aufgeteilt auf drei Eigenschaften, damit sich nichts in die Quere kommt:
   transform trägt die scrollgebundene Bewegung, translate und scale tragen
   Überfahren und Druckpunkt. Ohne Skript stehen --nah auf 1 und --kipp auf 0:
   die Karte liegt dann flach, unverschoben und voll deckend da. */

.demos {
  --nah: 1;
  --kipp: 0;
}
@media (min-width: 52rem) {
  .demos {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem) clamp(2rem, 4vw, 4rem);
    perspective: 1500px;
    perspective-origin: 50% 45%;
  }
  .demos > .demo:nth-child(even) { margin-top: clamp(3rem, 10vw, 10rem); }
  .demos > .demo:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - clamp(1rem, 2vw, 2rem)); }
}
@media (min-width: 64rem) { .demos { grid-template-columns: repeat(2, 1fr); } }

.demo {
  --nah: 1;
  --kipp: 0;
  transform-origin: 50% 60%;
  transform:
    translate3d(0, calc((1 - var(--nah)) * 58px), 0)
    rotateX(calc((1 - var(--nah)) * 5.5deg))
    rotateY(calc(var(--kipp) * -4.5deg))
    scale(calc(0.955 + 0.045 * var(--nah)));
  /* Boden 0.72, nicht 0.55: bei 0.55 fällt .demo p auf 3,4:1 und damit
     unter die geforderten 4,5:1 — auch ein abgebrochener Lauf muss lesbar
     bleiben (CLAUDE.md §6). */
  opacity: calc(0.72 + 0.28 * var(--nah));
  will-change: transform, opacity;
}
/* Überfahren und Druckpunkt laufen über eigene Eigenschaften, nicht über
   transform — sonst würde die Scrollbewegung überschrieben. */
.demo:hover { translate: 0 -4px; }
.demo:active { translate: 0 -1px; scale: 0.995; }

/* Der Pfeil erscheint beim Überfahren, wie in der Vorlage. */
.demo .fenster { position: relative; }
.demo .fenster::after {
  content: "↗";
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ton, var(--cyan));
  color: #06101f;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.28s ease-out, transform 0.28s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.demo:hover .fenster::after,
.demo:focus-visible .fenster::after { opacity: 1; transform: none; }

/* Grössere Karten verlangen grössere Schrift darunter. */
@media (min-width: 52rem) {
  .demo .name { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }
  .demo .fenster { margin: 1.1rem 1.4rem 0; }
  .demo .in { padding: 1.2rem 1.4rem 1.6rem; }
  .demo p { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .demo { transform: none; opacity: 1; }
  .demo:hover { translate: none; }
  .demo .fenster::after { transition: none; }
  .demos > .demo:nth-child(even) { margin-top: 0; }
}


/* ---------- Lage: die Schweiz aus echten Geodaten ------------------------ */
/* Der Umriss stammt aus Natural Earth (world-atlas 110m), einmal mit
   d3.geoMercator projiziert und als Pfad eingebacken — die Seite lädt weder
   d3 noch Geodaten nach. Die Quelle liegt in _karte-quelle.html und gehört
   nicht auf den Server. Marke und Koordinaten von Baar sind echt. */

/* Die Karte steht im Abschnitt „Der Weg", rechts neben der Schiene: dort
   beantwortet sie die Frage, wo die Anfrage eigentlich ankommt. Sie liegt
   hinter dem Inhalt, deshalb z-index 0 und Kopfzeile und Schiene darüber. */
#weg { position: relative; isolation: isolate; }
#weg .kopfzeile, #weg .schiene { position: relative; z-index: 1; }

.lage {
  position: absolute;
  /* 2 % statt -3 %: mit negativem Anteil ragte die Karte 19 px über die
     Abschnittskante in den Vorgänger — gemessen bei 1280 px. Rechts bleibt
     sie bewusst angeschnitten; oben beginnt sie IM Abschnitt. */
  inset: 2% -7% auto auto;
  width: min(50vw, 33rem);
  height: auto;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.lage-umriss {
  fill: rgba(41, 89, 196, 0.16);
  stroke: rgba(108, 231, 250, 0.62);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}
.lage-punkt circle { fill: none; stroke: var(--cyan); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.lage-punkt circle:last-of-type { fill: var(--cyan); stroke: none; }
.lage-punkt circle:first-of-type { opacity: 0.5; }
.lage-punkt path { fill: none; stroke: rgba(108, 231, 250, 0.6); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lage-punkt text {
  fill: var(--cyan);
  font: 600 20px var(--mono);
  letter-spacing: 0.16em;
}
.lage-punkt text.lage-klein { font-size: 15px; fill: rgba(108, 231, 250, 0.65); letter-spacing: 0.08em; }

/* Der Auftakt-Inhalt liegt darüber. */
.auftakt-gitter, .laufband, .zahlen-gitter { position: relative; z-index: 1; }

/* Beim Scrollen wandert die Karte etwas langsamer als der Text. --sicht
   setzt kino.js auf jeden Abschnitt und vererbt sich bis hierher. */
.lage { translate: 0 calc((var(--sicht, 0.5) - 0.5) * -46px); }

@media (max-width: 61.99rem) {
  /* Am Telefon steht sie ruhiger und stört den Satz nicht. */
  /* Am Telefon steht sie ruhig hinter dem Inhalt und rechts angeschnitten. */
  .lage { inset: 1% -22% auto auto; width: min(76vw, 21rem); opacity: 0.42; }
  .lage-punkt text { font-size: 26px; }
  .lage-punkt text.lage-klein { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lage { translate: none; } }
@media print { .lage { display: none; } }


/* Signet am Telefon */
@media (max-width: 61.99rem) {
  /* Einspaltig gibt es keine Lücke neben dem Bild: das Signet legt sich
     mittig hinter den Satz und bleibt weit unter dem Text an Deckkraft. */
  .signet { inset: auto auto 1.5rem 50%; translate: -50% 0; opacity: 0.5; }
}


/* ---------- Preiskarten: was beim Überfahren geschieht -------------------- */
/* Die Karte hebt sich, ihre Kante nimmt die Akzentfarbe an und die Marke auf
   der Preisachse darüber leuchtet mit. Kein Skalieren: eine Preiskarte, die
   grösser wird, verschiebt ihre Nachbarn und wirkt wie ein Werbebanner. */
.preise .paket {
  transition: translate 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.32s ease-out, box-shadow 0.32s ease-out;
}
.preise .paket:hover,
.preise .paket:focus-within {
  translate: 0 -6px;
  border-color: var(--cyan);
  box-shadow: 0 18px 44px -22px rgba(7, 13, 26, 0.55);
}
.preise .paket:hover .betrag,
.preise .paket:focus-within .betrag { color: var(--akzent-text); }

/* Die Achse zeichnet sich mit dem Lesen: --sicht des Abschnitts treibt die
   Linie von links nach rechts, die Marken erscheinen der Reihe nach. */
.achse { --achse-auf: clamp(0, calc((var(--sicht, 1) - 0.18) * 2.4), 1); }
.achse-linie, .achse > div::before {
  transform-origin: left center;
  scale: var(--achse-auf, 1) 1;
}
.achse-marke {
  opacity: clamp(0, calc((var(--achse-auf, 1) - var(--m, 0) * 0.16) * 3), 1);
  transition: color 0.25s ease-out;
}
.achse-marke:nth-child(1) { --m: 0; }
.achse-marke:nth-child(2) { --m: 1; }
.achse-marke:nth-child(3) { --m: 2; }
.achse-marke:nth-child(4) { --m: 3; }
.achse-marke:nth-child(5) { --m: 4; }
@media (prefers-reduced-motion: reduce), print {
  .achse-linie, .achse > div::before { scale: 1; }
  .achse-marke { opacity: 1; }
  .preise .paket { transition: none; }
}

/* Das Live-Fenster: Desktop-Breite, auf die Fläche geschrumpft. Zeiger
   gehen durch die Kachel (der Link liegt darüber), gescrollt wird es von
   galerie.js — nie vom Besucher direkt. */
.fenster-flaeche { position: relative; }
.fenster-flaeche .lauf-live {
  position: absolute;
  top: 0; left: 0;
  border: 0;
  transform-origin: top left;
  pointer-events: none;
  background: var(--nacht-2);
  opacity: 0;
  transition: opacity 0.45s ease-out;
}
.fenster-flaeche .lauf-live[data-da] { opacity: 1; }

/* ---------- Überspringen ------------------------------------------------- */
/* Die gepinnte Bahn ist zehn Kacheln lang. Wer die Demos nicht braucht, soll
   nicht daran vorbeiscrollen müssen — die Taste springt an ihr Ende. Unten
   rechts, weit weg vom Zähler unten links. */
.galerie-weiter {
  position: absolute;
  /* Mittig, nicht rechts: dort sitzt die Nach-oben-Taste (position: fixed)
     und verdeckte sie vollständig. */
  left: 50%;
  translate: -50% 0;
  bottom: 2.6rem;
  z-index: 3;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 0.82rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auf-nacht-still);
  background: rgba(12, 22, 40, 0.72);
  border: 1px solid var(--taste-linie);
  border-radius: 2rem;
  cursor: pointer;
  transition: color 0.25s ease-out, border-color 0.25s ease-out;
}
.galerie-weiter::after { content: "↓"; font-size: 1.1em; }
.galerie-weiter:hover { color: var(--cyan); border-color: var(--cyan); }
.galerie-weiter:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- Das Trio: drei Branchen als Highlight ------------------------- */
/* Auf der Startseite stehen nur die drei zahlungsfähigsten Branchen. Zehn
   Kacheln waren aus Kundensicht zu lang — wer in zwanzig Sekunden entscheidet,
   ob er anruft, scrollt nicht durch zehn Vorschauen. Die restlichen sieben
   stehen auf beispiele.html.

   Die Mitte ist echtes Highlight: sie steht vorn und grösser, die beiden
   aussen sind perspektivisch zurückgekippt und richten sich auf, während der
   Abschnitt durchs Bild wandert. --sicht setzt kino.js auf jeden Abschnitt. */
.kopfzeile--mitte { text-align: center; margin-inline: auto; max-width: 46rem; }
.kopfzeile--mitte .strich { margin-inline: auto; }
/* Der Erklärsatz hat eine eigene max-width — ohne auto-Ränder klebte der
   Block links, während die Überschrift darüber mittig stand. */
.kopfzeile--mitte .still { margin-inline: auto; text-align: center; }
.kopfzeile--mitte h2 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); }

/* Die drei laufen in derselben Bahn von rechts nach links wie vorher die
   zehn — nur ist der Weg jetzt kurz. Keine eigene Perspektive hier: jede
   Kachel bringt in der Bahn ihre Kippung mit (--nah, --kipp aus kino.js),
   und zwei Perspektiven übereinander arbeiten gegeneinander. */
.demos-mehr { margin-top: 2.5rem; text-align: center; }

/* ---------- Laufband: jedes Wort in seinem Feld -------------------------- */
/* Freistehende Serifenwörter auf Nacht wirkten wie ein Fliesstext, der
   versehentlich läuft. Als gefasste Felder liest man sie als Liste von
   Leistungen — und die Marine-Fläche bindet sie an das Logo. */
.laufband-spur span {
  padding: 0.42em 0.85em;
  border: 1px solid rgba(108, 231, 250, 0.28);
  border-radius: 0.45rem;
  background: rgba(20, 57, 119, 0.42);
  line-height: 1.1;
}
.laufband-spur i { opacity: 0.55; }

/* ---------- Die Karte zeichnet sich mit dem Lesefortschritt -------------- */
/* --fuell setzt kino.js auf #weg (dasselbe Signal wie die Schiene) und
   vererbt sich bis hierher. Der Umriss läuft als Strichmuster von 0 auf
   volle Länge, die Füllung kommt hinterher, der Standortpunkt zuletzt —
   erst wenn der Besucher die letzten Schritte gelesen hat.
   Ohne JavaScript fehlt data-zeichnet: dann greift keine dieser Regeln und
   die Karte ist vollständig da (CLAUDE.md §1). */
.lage[data-zeichnet] .lage-umriss {
  stroke-dasharray: var(--laenge);
  stroke-dashoffset: calc(var(--laenge) * (1 - var(--fuell, 1)));
  fill-opacity: calc(max(0, var(--fuell, 1) - 0.35) / 0.65);
}
.lage[data-zeichnet] .lage-punkt {
  /* Ab zwei Dritteln des Abschnitts, dann rasch. */
  opacity: clamp(0, calc((var(--fuell, 1) - 0.62) * 5), 1);
}
.lage[data-zeichnet] .lage-punkt circle:last-of-type {
  scale: calc(0.3 + 0.7 * clamp(0, calc((var(--fuell, 1) - 0.62) * 5), 1));
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .lage[data-zeichnet] .lage-umriss { stroke-dasharray: none; fill-opacity: 1; }
  .lage[data-zeichnet] .lage-punkt { opacity: 1; }
  .lage[data-zeichnet] .lage-punkt circle:last-of-type { scale: 1; }
}
@media print {
  .lage[data-zeichnet] .lage-umriss { stroke-dasharray: none; fill-opacity: 1; }
  .lage[data-zeichnet] .lage-punkt { opacity: 1; }
}



/* ---------- Einrasten weicht Lenis ------------------------------------- */
/* Lenis unterstützt CSS-scroll-snap nicht (siehe sanft.js). Sobald das
   Skript läuft, setzt es data-sanft und das Einrasten wird abgeschaltet —
   ohne Lenis bleibt es wie bisher. */
html[data-sanft].rastet { scroll-snap-type: none; }
html[data-sanft] { scroll-behavior: auto; }


/* ---------- Galerie: Karte und Bildunterschrift getrennt ----------------- */
/* Nach dem Vorbild lenis.dev/showcase: die Vorschau ist eine freistehende
   Karte, die Beschriftung steht darunter auf dem Seitengrund — nicht in
   einem Kasten. Zwei Zeilen, mehr nicht: Name, darunter eine stille Zeile.
   Der Fensterrahmen bleibt: er sagt „das ist eine Website", nicht „das ist
   ein Bild". */

.demos .demo {
  border: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.demos .demo .streifen { display: none; }
.demos .demo .fenster {
  margin: 0;
  border-radius: 0.7rem;
  border: 1px solid var(--nacht-linie);
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85);
}
/* Die Branchenfarbe sitzt jetzt als Kante oben auf dem Fenster, nicht mehr
   als eigener Streifen über der Karte. */
.demos .demo .fenster-leiste { border-top: 3px solid var(--ton, var(--cyan)); }

.demos .demo .in {
  padding: 1.15rem 0.15rem 0;
  display: grid;
  gap: 0.2rem;
}
.demos .demo .name {
  font-family: var(--anzeige);
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem);
  line-height: 1.15;
  color: var(--auf-nacht);
}
.demos .demo .branche {
  font: 400 0.98rem/1.4 var(--schrift);
  letter-spacing: 0;
  text-transform: none;
  color: var(--auf-nacht-still);
}
.demos .demo:hover .name { color: var(--cyan); }

@media (max-width: 45.99rem) {
  .demos .demo .in { padding-top: 0.9rem; }
  .demos .demo .branche { font-size: 0.92rem; }
}


/* ---------- Durch die Demo scrollen -------------------------------------- */
/* Vorbild lenis.dev/showcase: die Vorschau bleibt nicht stehen, sondern
   fährt beim Scrollen durch die ganze Startseite der Demo — als würde
   jemand die Website vor Ihren Augen durchblättern.

   Das Bild steht NICHT im HTML. kino.js hängt es erst ein, wenn die Kachel
   in die Nähe kommt und das Fenster breit genug ist (ab 60 rem). Ohne
   JavaScript, am Telefon und bei Datensparmodus bleibt es beim Auftaktfoto —
   deshalb versteckt hier auch nichts auf ein Skript. */

.demo .fenster-flaeche > img.lauf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* natürliche Höhe, nicht beschnitten — verschoben wird mit translate */
  inset: 0 0 auto 0;
  height: auto;
  object-fit: fill;
  translate: 0 calc(var(--lauf, 0) * -84.43%);
  will-change: translate;
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity 0.6s ease-out;
  z-index: 1;
}
.demo .fenster-flaeche > img.lauf[data-da] { opacity: 1; }
/* Der Satz muss über der laufenden Vorschau bleiben. */
.demo .fenster-satz { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .demo .fenster-flaeche > img.lauf { translate: none; }
}


/* ---------- Führungsfaden ------------------------------------------------ */
/* Ein Faden am linken Rand, der sich mit dem Lesen zeichnet. Er steht nicht
   im HTML — faden.js baut ihn, erst ab 66 rem. Darunter fehlt er, und es
   fehlt kein Inhalt. Reine Dekoration, deshalb aria-hidden. */

.faden {
  position: absolute;
  left: 0;
  width: 14px;
  pointer-events: none;
  z-index: var(--z-grund);
}
/* Sobald der Rand breit genug ist, rückt der Faden neben die Inhaltsspalte. */
@media (min-width: 84rem) {
  .faden { left: max(0px, calc(50% - var(--mass) / 2 - 1.6rem)); }
}
.faden svg { display: block; overflow: visible; }
.faden-grund {
  stroke: var(--nacht-linie);
  stroke-width: 1.5;
}
.faden-spur {
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(108, 231, 250, 0.5));
}
.faden-knoten {
  position: absolute;
  left: 0;
  width: 14px;
  height: 0;
  translate: 0 -50%;
}
.faden-knoten > i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--tinte);
  border: 1.5px solid var(--nacht-linie);
  transition: background 0.4s ease-out, border-color 0.4s ease-out, scale 0.4s cubic-bezier(.22,.61,.36,1);
}
.faden-knoten[data-erreicht] > i {
  background: var(--cyan);
  border-color: var(--cyan);
  scale: 1.25;
  box-shadow: 0 0 12px 2px rgba(108, 231, 250, 0.45);
}

body { position: relative; }


/* ---------- Galerie waagrecht: die Demos wandern durchs Bild -------------- */
/* galerie.js baut den Abschnitt um und setzt data-galerie="waagrecht" auf
   <html>. Ohne Skript, am Telefon und bei prefers-reduced-motion greift
   nichts hiervon — dort bleibt das zweispaltige Raster. */

[data-galerie="waagrecht"] .galerie-bahn { position: relative; }
[data-galerie="waagrecht"] .galerie-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* Beide Werte gegen dieselbe Bezugsbreite: --vw ist die Fensterbreite ohne
     senkrechten Scrollbalken (gesetzt in sanft.js). Mit der Einheit vw wäre
     die Bühne um die Balkenbreite zu breit, und der Ausbruch aus .mass schöbe
     die rechte Kante über den Rand — 8 px Seitwärtsscroll auf der Seite. */
  width: var(--vw, 100vw);
  margin-inline-start: calc(50% - var(--vw, 100vw) / 2);
  overflow: hidden;
  display: flex;
  align-items: center;
}
[data-galerie="waagrecht"] .demos {
  display: flex;
  grid-template-columns: none;
  width: max-content;
  align-items: center;
  gap: clamp(4rem, 8vw, 8.5rem);
  /* max(), damit die erste Kachel auch dann Rand hat, wenn das Fenster
     schmaler ist als die Inhaltsspalte — sonst klebt sie am Bildrand. */
  padding-inline: max(1.25rem, calc(50vw - var(--mass) / 2));
  will-change: translate;
}
/* Die versetzte zweite Spalte gilt nur senkrecht. Waagrecht stehen alle
   auf einer Linie — ein Versatz liest sich hier als Fehler, nicht als
   Rhythmus. Abgestuft wird über Kippung und Tiefe. */
[data-galerie="waagrecht"] .demos .demo:nth-child(even) { margin-block-start: 0; translate: none; }
[data-galerie="waagrecht"] .demos .demo {
  width: clamp(23rem, 42vw, 36rem);
  flex: 0 0 auto;
}
/* Senkrechter Einflug aus: hier trägt die Waagrechte die Bewegung. */
[data-galerie="waagrecht"] .demos .demo .fenster {
  translate: none;
  transform:
    perspective(1600px)
    rotateY(calc(var(--kipp, 0) * -18deg))
    translateZ(calc((var(--nah, 1) - 1) * 90px))
    scale(calc(0.9 + 0.1 * var(--nah, 1)));
  transform-origin: center center;
  transition: none;
}
[data-galerie="waagrecht"] .demos .demo { opacity: calc(0.78 + 0.22 * var(--nah, 1)); }
/* Die Beschriftung bleibt voll deckend — sie muss auf jeder Position
   lesbar sein (4,5:1). Abgestuft wird über Grösse und Kippung, nicht
   über den Kontrast von Text. */
[data-galerie="waagrecht"] .demos .demo .in { opacity: 1; }

/* Der Zählerstand unten links: welche Demo, wie weit. */
.galerie-stand {
  position: absolute;
  left: max(1.25rem, calc(50vw - var(--mass) / 2));
  bottom: clamp(1.5rem, 4vh, 3rem);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--auf-nacht-still);
}
.galerie-stand b { color: var(--cyan); font-weight: 500; }
.galerie-stand i {
  display: block;
  width: clamp(4rem, 9vw, 7rem);
  height: 2px;
  background: var(--nacht-linie);
  position: relative;
  overflow: hidden;
}
.galerie-stand i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--koenig), var(--cyan));
  transform-origin: left center;
  transform: scaleX(var(--stand, 0));
}


/* ---------- Gezeichneter Rahmen auf Tasten ------------------------------- */
/* Beim Überfahren zeichnet sich ein Rahmen um die Taste: erst laufen die
   waagrechten Linien aus der Mitte nach aussen, dann wachsen die
   senkrechten dazu. Zwei Pseudoelemente, kein SVG, keine Markup-Änderung.
   Er liegt 5 px ausserhalb der Taste und fängt keine Zeiger ab, also
   ändert sich das Trefferfeld nicht. */

.taste { position: relative; --rahmen: var(--cyan); }
.teil--hell .taste,
.paket .taste { --rahmen: var(--akzent-tief); }
.taste::before,
.taste::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 7px;
  pointer-events: none;
  border: 1.5px solid transparent;
}
.taste::before {
  border-top-color: var(--rahmen);
  border-bottom-color: var(--rahmen);
  transform: scaleX(0);
  transition: transform 0.26s cubic-bezier(.22,.61,.36,1);
}
.taste::after {
  border-left-color: var(--rahmen);
  border-right-color: var(--rahmen);
  transform: scaleY(0);
  transition: transform 0.26s cubic-bezier(.22,.61,.36,1) 0.14s;
}
.taste:hover::before, .taste:focus-visible::before { transform: scaleX(1); }
.taste:hover::after,  .taste:focus-visible::after  { transform: scaleY(1); }

/* ---------- Preiskarten: die Zeilen antworten mit ------------------------ */
/* Nacheinander, nicht alle zugleich — 45 ms Abstand liest sich als Bewegung
   von oben nach unten, gleichzeitig wäre es ein Ruck. */

.paket li { transition: transform 0.34s cubic-bezier(.22,.61,.36,1), color 0.28s ease-out; }
.paket li::before { transition: color 0.28s ease-out, transform 0.34s cubic-bezier(.22,.61,.36,1); }
.paket:hover li { transform: translateX(4px); }
.paket:hover li::before { transform: translateX(-2px); }
.paket:hover li:nth-child(1) { transition-delay: 0s; }
.paket:hover li:nth-child(2) { transition-delay: 0.045s; }
.paket:hover li:nth-child(3) { transition-delay: 0.09s; }
.paket:hover li:nth-child(4) { transition-delay: 0.135s; }
.paket:hover li:nth-child(5) { transition-delay: 0.18s; }
.paket:hover li:nth-child(1)::before { transition-delay: 0s; }
.paket:hover li:nth-child(2)::before { transition-delay: 0.045s; }
.paket:hover li:nth-child(3)::before { transition-delay: 0.09s; }
.paket:hover li:nth-child(4)::before { transition-delay: 0.135s; }
.paket:hover li:nth-child(5)::before { transition-delay: 0.18s; }

/* Der Betrag rückt eine Spur heraus, der Name bekommt seine Akzentfarbe. */
.paket .betrag > span,
.paket .name { transition: transform 0.34s cubic-bezier(.22,.61,.36,1), color 0.28s ease-out; }
.paket:hover .betrag > span { transform: translateY(-2px); }
.paket:hover .name { color: var(--akzent-tief); }
.paket--stern:hover .name { color: var(--cyan); }

/* ---------- Vergleichstafel: die Zeile unter dem Zeiger ------------------ */

.tafel tbody tr { transition: background 0.2s ease-out; }
.tafel tbody tr:hover { background: color-mix(in oklch, var(--akzent-tief) 7%, transparent); }
.tafel tbody tr:hover th { color: var(--akzent-tief); }

@media (prefers-reduced-motion: reduce) {
  .taste::before, .taste::after { display: none; }
  .paket li, .paket:hover li,
  .paket:hover li::before,
  .paket:hover .betrag > span { transform: none; transition: none; }
  .tafel tbody tr { transition: none; }
}


/* ---------- Schrift kommt mit dem Scrollen (schrift.js) ------------------ */
/* Sechs Gruppen, sechs Arten. Alles hängt an html[data-schrift="an"] — das
   Attribut setzt erst das Skript, und erst nach einem echten Bild. Ohne
   JavaScript, bei prefers-reduced-motion und nach der Zeitsicherung (1,8 s)
   greift keine einzige dieser Regeln, und alles steht, wo es hingehört. */

/* 1 · Überschriften — Wort für Wort aus einem Fenster mit harter Kante.
   Kein Verblassen: ein halb durchsichtiges Wort fiele unter 4,5:1. */
[data-schrift="an"] .wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Unterlängen (g, j, p) dürfen nicht am Fensterrand abgeschnitten
     werden — Luft unten, dieselbe Luft wieder abgezogen. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
[data-schrift="an"] .wort > i {
  display: inline-block;
  font-style: inherit;
  /* Jedes Wort hat sein eigenes Fenster im Fortschritt: 0,12 Versatz je
     Wort — dadurch laufen zwei bis drei zugleich, nie alle. */
  /* Die Staffelung ist immer 45 % des Wegs, geteilt durch die Wortzahl —
     so erreicht auch das letzte Wort einer neunwortigen Überschrift die 1.
     Vorher waren 0,12 je Wort festverdrahtet: ab dem sechsten Wort blieb
     die Zeile dauerhaft treppenförmig stehen. */
  --t: clamp(0, calc((var(--auf, 1) - var(--i, 0) / var(--n, 1) * 0.45) / 0.55), 1);
  translate: 0 calc((1 - var(--t)) * 118%);
}
[data-schrift="an"] .wort:nth-of-type(1) { --i: 0; }
[data-schrift="an"] .wort:nth-of-type(2) { --i: 1; }
[data-schrift="an"] .wort:nth-of-type(3) { --i: 2; }
[data-schrift="an"] .wort:nth-of-type(4) { --i: 3; }
[data-schrift="an"] .wort:nth-of-type(5) { --i: 4; }
[data-schrift="an"] .wort:nth-of-type(6) { --i: 5; }
[data-schrift="an"] .wort:nth-of-type(7) { --i: 6; }
[data-schrift="an"] .wort:nth-of-type(8) { --i: 7; }
[data-schrift="an"] .wort:nth-of-type(9) { --i: 8; }
[data-schrift="an"] .wort:nth-of-type(10) { --i: 9; }
[data-schrift="an"] .wort:nth-of-type(11) { --i: 10; }
[data-schrift="an"] .wort:nth-of-type(12) { --i: 11; }
[data-schrift="an"] .wort:nth-of-type(13) { --i: 12; }
[data-schrift="an"] .wort:nth-of-type(14) { --i: 13; }
[data-schrift="an"] .wort:nth-of-type(15) { --i: 14; }
[data-schrift="an"] .wort:nth-of-type(16) { --i: 15; }

/* 2 · Leistungszeilen — die Zeile hebt sich, der Text darin eine Spur
   weniger. Zwei Tempi lesen sich reicher als ein gleichmässiger Ruck. */
[data-schrift="an"] .folge-zeile,
[data-schrift="an"] .lang-zeile,
[data-schrift="an"] .haltung-zeile { translate: 0 calc((1 - var(--zeile, 1)) * 26px); }
[data-schrift="an"] .folge-zeile > *:last-child,
[data-schrift="an"] .lang-zeile > *:last-child,
[data-schrift="an"] .haltung-zeile > *:last-child { translate: 0 calc((1 - var(--zeile, 1)) * 11px); }

/* 3 · Preiskarten — jede steigt einzeln auf, von links nach rechts
   versetzt. Deckkraft bleibt 1: abgestuft wird über den Weg, nie über den
   Kontrast von Text. */
[data-schrift="an"] .preise .paket { translate: 0 calc((1 - var(--karte, 1)) * 42px); }

/* 4 · Gegenüberstellung — die zwei Spalten fahren aus entgegengesetzten
   Richtungen zusammen. */
[data-schrift="an"] .gegen-spalte { translate: calc((1 - var(--spalte, 1)) * -34px) 0; }
[data-schrift="an"] .gegen-spalte--wir { translate: calc((1 - var(--spalte, 1)) * 34px) 0; }

/* 5 · Ablaufschritte — schieben sich von links herein, gestaffelt. */
[data-schrift="an"] .ablauf .schritt { translate: calc((1 - var(--phase, 1)) * -22px) 0; }

/* 6 · Referenz — rückt aus der Tiefe näher. */
[data-schrift="an"] .stimme,
[data-schrift="an"] .referenz-gitter figure { scale: calc(0.965 + 0.035 * var(--stimme, 1)); }

@media print {
  [data-schrift="an"] .wort > i,
  [data-schrift="an"] .folge-zeile, [data-schrift="an"] .lang-zeile, [data-schrift="an"] .haltung-zeile,
  [data-schrift="an"] .folge-zeile > *:last-child, [data-schrift="an"] .lang-zeile > *:last-child,
  [data-schrift="an"] .haltung-zeile > *:last-child,
  [data-schrift="an"] .preise .paket,
  [data-schrift="an"] .gegen-spalte, [data-schrift="an"] .gegen-spalte--wir,
  [data-schrift="an"] .ablauf .schritt { translate: none; }
  [data-schrift="an"] .stimme, [data-schrift="an"] .referenz-gitter figure { scale: 1; }
  [data-schrift="an"] .wort { overflow: visible; }
}


/* 7 · Vergleichstafel — Zeile für Zeile, damit man die dreizehn Zeilen
   wirklich liest statt an ihnen vorbeizuwischen. */
[data-schrift="an"] .tafel tbody tr { translate: 0 calc((1 - var(--reihe, 1)) * 14px); }

/* 8 · Zusatzleistungen und Fragen — die Kante links zeichnet sich von oben
   nach unten, der Betrag rechts rückt heran. Keine achte Hebebewegung. */
[data-schrift="an"] .zusatz,
[data-schrift="an"] .frage,
[data-schrift="an"] .punkte li {
  position: relative;
}
[data-schrift="an"] .zusatz::after,
[data-schrift="an"] .frage::after,
[data-schrift="an"] .punkte li::after {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(0.5rem, 1.4vw, 1rem));
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--akzent-text, var(--cyan));
  transform-origin: top center;
  transform: scaleY(var(--posten, 0));
  pointer-events: none;
}
[data-schrift="an"] .zusatz .betrag-klein { translate: calc((1 - var(--posten, 1)) * 16px) 0; }

@media print {
  [data-schrift="an"] .tafel tbody tr,
  [data-schrift="an"] .zusatz .betrag-klein { translate: none; }
  [data-schrift="an"] .zusatz::after,
  [data-schrift="an"] .frage::after,
  [data-schrift="an"] .punkte li::after { display: none; }
}

/* 9 · Teamkarten — das Bild wird von unten aufgedeckt wie ein Abzug, der
   entwickelt wird. Der Text darunter bleibt, wo er ist: er soll nicht
   wandern, während man ihn liest. */
[data-schrift="an"] .team .kopf-karte > img {
  clip-path: inset(0 0 calc((1 - var(--abzug, 1)) * 22%) 0);
  scale: calc(1 + (1 - var(--abzug, 1)) * 0.04);
  transform-origin: 50% 100%;
}

@media print {
  [data-schrift="an"] .team .kopf-karte > img { clip-path: none; scale: 1; }
}

/* 10 · Der ganze Rest — jeder Absatz, jede Kleinschrift, jede
   Zwischenüberschrift, jeder Listenpunkt, jede Taste. Die kleinste
   Bewegung von allen und nach Art des Elements verschieden, damit die
   Seite nicht gleichmässig zappelt. Nie über die Deckkraft: Text bleibt
   bei jedem Zwischenstand über 4,5:1. */

[data-schrift="an"] main p,
[data-schrift="an"] main blockquote { translate: 0 calc((1 - var(--rest, 1)) * 14px); }
/* Zwischenüberschriften bewegen sich nicht eigenständig: ihr Abstand zum
   eigenen Absatz ist 0 px, und translate löst keinen Neuaufbau aus. Sie
   fahren mit ihrer Zeile (--zeile) bzw. ihrer Phase (--phase) mit. */
[data-schrift="an"] main li,
[data-schrift="an"] main dt,
[data-schrift="an"] main dd { translate: 0 calc((1 - var(--rest, 1)) * 11px); }
/* Kleinschrift kommt von der Seite statt von unten — bei 0,7 rem liest sich
   eine senkrechte Bewegung wie ein Wackler. */
[data-schrift="an"] main small,
[data-schrift="an"] main figcaption,
[data-schrift="an"] main .still,
[data-schrift="an"] main .rolle,
[data-schrift="an"] main .marke-zeile,
[data-schrift="an"] main .branche,
[data-schrift="an"] main .kennung,
[data-schrift="an"] main .l { translate: calc((1 - var(--rest, 1)) * -10px) 0; }
/* Beträge und Namen rücken heran statt zu wandern — sie sind der Anker
   ihrer Karte und sollen nicht die Zeile darunter verschieben. */
/* .betrag fehlt hier bewusst: eine Preiszahl, die beim Scrollen wächst,
   wirkt billig. Sie steht still — das ist der hochwertigere Auftritt. */
[data-schrift="an"] main .name,
[data-schrift="an"] main .wert { scale: calc(0.972 + 0.028 * var(--rest, 1)); transform-origin: left center; }
/* Tasten heben sich als Letztes: erst lesen, dann klicken. */
[data-schrift="an"] main .taste { translate: 0 calc((1 - var(--rest, 1)) * 16px); }

@media print {
  [data-schrift="an"] main p, [data-schrift="an"] main blockquote,
  [data-schrift="an"] main li, [data-schrift="an"] main dt, [data-schrift="an"] main dd,
  [data-schrift="an"] main small, [data-schrift="an"] main figcaption,
  [data-schrift="an"] main .still, [data-schrift="an"] main .rolle,
  [data-schrift="an"] main .marke-zeile, [data-schrift="an"] main .branche,
  [data-schrift="an"] main .kennung, [data-schrift="an"] main .l,
  [data-schrift="an"] main .taste { translate: none; }
  [data-schrift="an"] main .name,
  [data-schrift="an"] main .wert { scale: 1; }
}

/* ---------- Die Galerie-Überschrift trägt den Abschnitt ------------------ */
/* Die Galerie ist der Höhepunkt der Seite; eine Überschrift in derselben
   Grösse wie überall wäre dort zu leise. */

#beispiele .kopfzeile { max-width: 54rem; }
#beispiele .kopfzeile h2 {
  font-size: clamp(2.6rem, 1.4rem + 6.2vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}
#beispiele .kopfzeile p { font-size: clamp(1.06rem, 1rem + 0.4vw, 1.3rem); max-width: 42rem; }

/* ---------- Vergleichstafel: übersichtlich und heller -------------------- */
/* Karten wären hier die schlechtere Wahl: bei einem Vergleich müsste man
   zwischen ihnen hin- und herspringen, um zwei Werte gegenüberzustellen.
   Was die dreizehn Zeilen schwer lesbar machte, war nicht die Tabellenform,
   sondern dass jede Zeile gleich aussah. Vier Eingriffe:
     1 abwechselnde Zeilentönung — das Auge hält die Zeile
     2 Gruppen als eigenes Band statt als blosse Textzeile
     3 die empfohlene Spalte durchgehend getönt und seitlich gefasst
     4 „ja" als Häkchen in Akzentfarbe, „nein" als ruhiger Strich */

.tafel tbody tr:nth-of-type(even):not(.tafel-gruppe):not(.tafel-tun) {
  background: color-mix(in oklch, var(--cyan) 9%, transparent);
}
.tafel .tafel-gruppe th,
.tafel .tafel-gruppe td {
  background: color-mix(in oklch, var(--koenig) 12%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--koenig) 28%, transparent);
  color: var(--akzent-tief);
  padding-top: 1.1rem;
  padding-bottom: 0.65rem;
}
.tafel .tafel-gruppe th { border-radius: 0.4rem 0 0 0.4rem; }
.tafel .tafel-gruppe td:last-child { border-radius: 0 0.4rem 0.4rem 0; }

/* Die empfohlene Spalte: deutlicher getönt und mit einer Kante gefasst, damit
   man sie von oben bis unten als eine Spalte liest. */
.tafel col.hebe, .tafel .hebe {
  background: color-mix(in oklch, var(--koenig) 10%, transparent);
}
.tafel thead th.hebe {
  border-top: 3px solid var(--akzent-text);
  color: var(--akzent-tief);
}
.tafel td.hebe, .tafel thead th.hebe {
  box-shadow: inset 1px 0 0 color-mix(in oklch, var(--koenig) 26%, transparent),
              inset -1px 0 0 color-mix(in oklch, var(--koenig) 26%, transparent);
}

.tafel .ja { color: var(--akzent-text); font-weight: 700; }
.tafel .nein { color: var(--auf-papier-still); opacity: 0.75; }

/* Die Zeile unter dem Zeiger gewinnt gegen die Zebra-Tönung. */
.tafel tbody tr:not(.tafel-gruppe):hover {
  background: color-mix(in oklch, var(--koenig) 16%, transparent);
}

/* ---------- Icons: geometrische Bedienzeichen ----------------------------- */
/* Strichzeichnungen, keine Illustrationen: 24×24, 1,5 px in currentColor,
   damit dasselbe Zeichen auf Nacht und auf Papier funktioniert. Der Rahmen
   nimmt die Akzentfarbe leicht auf — so gehört das Zeichen zur Marke und
   nicht zu einem Icon-Satz von der Stange. */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.7rem;
  border: 1px solid color-mix(in oklch, currentColor 26%, transparent);
  border-radius: 0.6rem;
  background: color-mix(in oklch, currentColor 7%, transparent);
  color: var(--cyan);
  flex: none;
}
.teil--hell .ico { color: var(--akzent-text); }
.ico--gross { width: 3.1rem; height: 3.1rem; }
.ico-zug {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--gross .ico-zug { width: 1.6rem; height: 1.6rem; }
/* Das Zeichen rückt mit seinem Posten heran (--posten, Gruppe 8) bzw. mit
   seiner Zeile (--zeile). Kein eigener Auftritt — sonst zappelt die Seite. */
[data-schrift="an"] .zusatz .ico { scale: calc(0.86 + 0.14 * var(--posten, 1)); }
[data-schrift="an"] .folge-zeile .ico { scale: calc(0.9 + 0.1 * var(--zeile, 1)); }
@media (prefers-reduced-motion: reduce), print {
  .zusatz .ico, .folge-zeile .ico { scale: 1; }
}
.gegen-spalte .ico { margin-block: 0.4rem 0.9rem; }
.zusatz .ico { margin-bottom: 0; align-self: center; }
@media (max-width: 43.99rem) { .zusatz .ico { margin-bottom: 0.3rem; } }
.paket .ico { margin-bottom: 0.1rem; }
.schluss-icos { display: flex; gap: 0.8rem; margin: 0 0 1.4rem; }
.schluss-icos .ico { margin-bottom: 0; }

/* ---------- Auflistung: das kleine Fenster ------------------------------- */
/* Dieselbe Aufnahme wie in der Bahn darüber, nur klein und oben
   angeschnitten: man erkennt die Seite wieder, ohne dass die Liste zur
   zweiten Galerie wird. */
.demo-lang-schau {
  display: block;
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--nacht-linie);
  border-top: 3px solid var(--ton, var(--cyan));
  border-radius: 0.5rem;
  background: var(--nacht-2);
  margin-bottom: 1rem;
}
.demo-lang-schau img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Der Anschnitt wandert mit dem Scrollen von oben nach unten durch die
     ganze Demo-Startseite (--lauf aus kino.js, 0 → 1). Über object-position
     statt translate: so braucht die Regel keine Bild- oder Fensterhöhe und
     bleibt richtig, wenn eine Vorschau neu aufgenommen wird. */
  object-position: center calc(var(--lauf, 0) * 100%);
}
@media (prefers-reduced-motion: reduce), print {
  .demo-lang-schau img { object-position: center top; }
}
.demo-lang:hover .demo-lang-schau { border-color: var(--ton, var(--cyan)); }
@media (min-width: 48rem) { .demo-lang-schau { max-width: 13rem; } }

/* ---------- Gegenüberstellung: Paare auf gleicher Höhe -------------------- */
/* Der Sinn zweier Spalten ist der Vergleich Zeile für Zeile. Vorher liefen
   die Punkte auseinander, weil jede Zeile so hoch war wie ihr Text — der
   dritte Punkt links stand neben dem vierten rechts, und damit war das
   Gegenüber nicht mehr lesbar. Eine gemeinsame Mindesthöhe stellt sie
   wieder paarweise gegenüber; beide Spalten haben sechs Punkte. */
.gegen-liste {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gegen-liste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  min-height: 4.1rem;
  padding: 0.55rem 0.7rem;
  margin-inline: -0.7rem;
  border-radius: 0.5rem;
  border-bottom: 1px solid color-mix(in oklch, var(--nacht-linie) 70%, transparent);
  transition: background 0.22s ease-out, translate 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.gegen-liste li:last-child { border-bottom: 0; }
.gegen-liste li:hover { background: rgba(28, 44, 71, 0.42); translate: 3px 0; }

.zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}
.zeichen .ico-zug { width: 1.5rem; height: 1.5rem; stroke-width: 1.4; }
/* Kein Rot: die linke Spalte ist nicht falsch, sie ist alt. Gedämpftes
   Blaugrau sagt „vorbei", ohne den Besucher für seine heutige Seite zu
   tadeln — er soll anrufen, nicht sich schämen. */
.zeichen--nein { color: var(--platzhalter); }
.zeichen--ja { color: var(--cyan); }
.gegen-liste li:hover .zeichen--ja { color: #A3F2FE; }

@media (max-width: 47.99rem) {
  /* Am Telefon stehen die Spalten untereinander — dort ist die gemeinsame
     Höhe sinnlos und würde nur Luft erzeugen. */
  .gegen-liste li { min-height: 0; }
}
@media (prefers-reduced-motion: reduce), print {
  .gegen-liste li { transition: none; translate: none; }
}

/* ---------- Termin: der Kalender auf der Seite ---------------------------- */
/* Zwei Klicks statt einem: das Calendly-Widget lädt rund 100 kB fremdes
   Skript und setzt Cookies. Wer nur die Telefonnummer sucht, soll das nicht
   bezahlen — und ohne Einwilligung gehört es nicht geladen. Der Platzhalter
   ist vollständiger Inhalt: Dauer, Gesprächsinhalt und der Weg per Telefon
   stehen auch ohne JavaScript da (§1). */
.termin-halter {
  border: 1px solid var(--papier-linie);
  border-top: 3px solid var(--akzent-text);
  border-radius: 0.7rem;
  background: #fff;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: grid;
  gap: 1rem;
  justify-items: start;
  margin-top: 2rem;
}
.termin-halter h3 { margin: 0; }
.termin-liste {
  display: grid;
  gap: 0.55rem;
  margin: 0.2rem 0 0.4rem;
  padding: 0;
  list-style: none;
  color: var(--auf-papier-still);
}
.termin-liste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
}
.termin-liste .zeichen { width: 1.4rem; height: 1.4rem; color: var(--akzent-text); }
.termin-liste .ico-zug { width: 1.2rem; height: 1.2rem; }
.termin-hinweis { font-size: 0.86rem; color: var(--auf-papier-still); max-width: 56ch; }
.termin-feld { width: 100%; margin-top: 0.5rem; border-radius: 0.5rem; overflow: hidden; }

/* Die erste Zeile jeder Paketliste sagt, dass nichts wegfällt: jedes Paket
   enthält alles aus dem günstigeren. Kursiv gedämpft, damit sie Auskunft
   bleibt und nicht Verkaufszeile. */
.paket .enthaelt {
  font-style: italic;
  color: var(--auf-papier-still);
  list-style: none;
  margin-inline-start: -1.2em;
}
/* Die Standard-Karte steht auf Nacht — dieselbe Zeile braucht dort den
   gemessenen Nacht-Ton: #4C5A70 erreichte 2,61:1, #A4B2C8 liegt bei 7,2:1. */
.paket--stern .enthaelt { color: var(--auf-nacht-still); }

/* ---------- Das Signet zeichnet sich beim Ankommen ------------------------ */
/* Aus dem Logo als echte Strichzeichnung (signet.svg): Kamera zuerst, das
   Auge folgt, die Schleife zieht zuletzt durch. Ohne JavaScript steht es
   vollständig da — erst data-signet-zeichnet (bewegung.js, nach einem
   echten Bild) startet den Zug, und der endet von selbst. */
svg.signet { fill: none; }
[data-signet-zeichnet] svg.signet .signet-kamera,
[data-signet-zeichnet] svg.signet .signet-loch,
[data-signet-zeichnet] svg.signet .signet-schleife {
  stroke-dasharray: var(--laenge, 600);
  stroke-dashoffset: var(--laenge, 600);
  animation: signet-ziehen 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
[data-signet-zeichnet] svg.signet .signet-loch { animation-delay: 0.55s; animation-duration: 0.4s; }
[data-signet-zeichnet] svg.signet .signet-schleife { animation-delay: 0.35s; animation-duration: 1.7s; }
@keyframes signet-ziehen { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce), print {
  [data-signet-zeichnet] svg.signet .signet-kamera,
  [data-signet-zeichnet] svg.signet .signet-loch,
  [data-signet-zeichnet] svg.signet .signet-schleife {
    animation: none; stroke-dasharray: none; stroke-dashoffset: 0;
  }
}


/* =====================================================================
   MOBIL-KORREKTUR (Rückmeldung Matthias, Screenshots IMG_3765–3792)
   Der Desktop bleibt Zeile für Zeile so, wie er war — das war die
   Vorgabe. Alles Bauliche hier hängt an einer max-width unter 64 rem
   (1024 px). Die einzige Regel ohne Abfrage ist der Kursiv-Riegel in
   A2; sie rechnet am Desktop denselben Wert aus wie bisher und ändert
   dort sichtbar nichts.
   A1 waagrechter Überlauf · A2 schiefe Überschriften · A3 Strich durch
   die Wörter · A4 Vergleichstafel · A5 Kleinkram.
   ===================================================================== */

/* ---- A2 · Schiefe Überschriften ----------------------------------------
   schrift.js verpackt jedes Wort in ein <i>. <i> ist im Browser von Haus
   aus kursiv. Der Gegenzug stand bisher nur unter [data-schrift="an"] —
   also erst nach einem doppelten requestAnimationFrame. In WebKit (das
   ist die Engine auf dem iPhone) ist die Überschrift bis dahin messbar
   kursiv, und wenn aufloesen() auf data-schrift="fertig" schaltet, bleibt
   sie es für den Rest der Sitzung. Genau das zeigen die Bilder: „Welche
   der drei brauchen Sie?" und „Reden wir 30 Minuten." stehen geneigt,
   während jede andere Überschrift gerade steht.
   Ohne Bedingung, weil der Fehler an keiner Bildschirmbreite hängt. */
.wort > i { font-style: inherit; }

/* Zweiter Riegel fürs Telefon: kein Wort darf treppenförmig stehen
   bleiben, wenn der Fortschritt aus schrift.js nicht ankommt. */
@media (max-width: 63.99rem) {
  .wort { overflow: visible; }
  [data-schrift="an"] .wort > i { translate: none; }
}


/* ---- A1 · Waagrechter Überlauf: +33 px auf jeder Seite ------------------
   Gemessen: scrollWidth 423 px bei clientWidth 390 px, auf allen Seiten.
   Die feste Leiste unten trägt drei Tasten mit flex: 1. Flex-Kinder haben
   implizit min-width: auto und schrumpfen deshalb nie unter ihre
   Textbreite; zusammen mit 1,5 rem Innenabstand je Taste braucht die
   Leiste rund 423 px. Dadurch liess sich JEDE Seite seitlich schieben —
   daher die links abgeschnittenen Texte auf der Preise-Seite
   („treuung" statt „Betreuung", „cal-SEO" statt „Local-SEO").
   min-width: 0 erlaubt das Schrumpfen, der engere Innenabstand gibt den
   Rest. Die Höhe von 3 rem bleibt: das Fingerziel darf nicht kleiner
   werden. */
@media (max-width: 30rem) {
  .leiste { gap: 0.4rem; padding-inline: 0.55rem; }
  .leiste .taste {
    min-width: 0;
    padding-inline: 0.5rem;
    font-size: 0.88rem;
    white-space: nowrap;
  }
}

/* Gürtel und Hosenträger: sollte doch einmal etwas ausscheren, darf die
   Seite trotzdem nicht seitlich wandern. clip statt hidden — hidden auf
   <html> setzt position: sticky im Kopf ausser Kraft. */
@media (max-width: 63.99rem) {
  html, body { overflow-x: clip; }
}


/* ---- A3 · Der Strich lief durch die Wörter ------------------------------
   Unter 46 rem wird .schiene-linie zu einer senkrechten Linie bei
   left: 0.92rem (im Abschnitt #weg bei 1.15rem). Die gestapelten .knoten
   hatten aber keinen linken Innenabstand — Titel und Text beginnen bei 0,
   die Linie lief also mitten durch „Besuch", „Anfrage", „Termin".
   Jetzt hat jeder Knoten zwei Spalten: links die Ziffer im selben Kanal
   wie die Linie, rechts der Text. */
@media (max-width: 45.99rem) {
  .knoten {
    grid-template-columns: 1.85rem 1fr;
    column-gap: 0.85rem;
    align-items: start;
  }
  .knoten .punkt { grid-column: 1; grid-row: 1; }
  .knoten h3 { grid-column: 2; grid-row: 1; margin-top: 0; align-self: center; }
  .knoten p  { grid-column: 2; grid-row: 2; margin-top: 0.15rem; }
  #weg .knoten { grid-template-columns: 2.3rem 1fr; }
}


/* ---- A4 · Vergleichstafel: aus der Tabelle werden Karten ----------------
   Am Telefon war die Tafel unbrauchbar, aus drei Gründen zugleich:
     1 Die Gruppentitel („UMFANG UND ZEIT") stehen in Mono mit 0,16 em
       Sperrung und sind breiter als ihre 9-rem-Zelle — sie schoben sich
       über „VORENTWURF".
     2 Die erste Spalte klebt (position: sticky), hat in der Gruppenzeile
       aber background: transparent. Beim Wischen liefen die Paketspalten
       sichtbar darunter durch.
     3 Standard und Premium lagen ausserhalb des Bildes.
   Statt seitlich zu wischen steht jetzt je Leistung eine Karte mit vier
   beschrifteten Zeilen; der Paketname kommt aus data-p. Kein zweiter
   Scroller, keine überlappenden Köpfe, alles untereinander lesbar.
   Die Tabelle bleibt dabei eine Tabelle — th, scope und die Reihenfolge
   ändern sich nicht, für Vorlesesoftware bleibt der Zusammenhang. */
@media (max-width: 45.99rem) {
  .tafel-wisch, .tafel-rand { display: none; }
  .tafel-halter { overflow-x: visible; overscroll-behavior-x: auto; }

  .tafel, .tafel thead, .tafel tbody, .tafel tr, .tafel th, .tafel td {
    display: block;
    width: auto;
  }
  .tafel { min-width: 0; font-size: 1rem; }
  .tafel thead { display: none; }

  /* Gruppentitel: eigenes Band über den Karten, volle Breite, kein
     Sperrsatz mehr, der aus der Zelle läuft. */
  .tafel .tafel-gruppe td { display: none; }
  .tafel .tafel-gruppe th {
    width: auto;
    position: static;
    margin: 2rem 0 0.85rem;
    padding: 0.55rem 0.85rem;
    font: 600 0.74rem/1.35 var(--mono);
    letter-spacing: 0.1em;
    border-radius: 0.4rem;
    border-bottom: 0;
  }
  .tafel .tafel-gruppe:first-child th { margin-top: 0.5rem; }

  /* Eine Leistung = eine Karte. */
  .tafel tbody tr:not(.tafel-gruppe):not(.tafel-tun) {
    background: var(--papier);
    border: 1px solid var(--papier-linie);
    border-radius: 0.6rem;
    margin-bottom: 0.85rem;
    padding: 0;
    overflow: hidden;
  }
  .tafel tbody tr:nth-of-type(even):not(.tafel-gruppe):not(.tafel-tun),
  .tafel tbody tr:not(.tafel-gruppe):hover {
    background: var(--papier);
  }

  .tafel tbody tr:not(.tafel-gruppe):not(.tafel-tun) > th[scope="row"] {
    width: auto;
    position: static;
    background: color-mix(in oklch, var(--koenig) 6%, transparent);
    padding: 0.7rem 0.95rem 0.65rem;
    font: 600 1.02rem/1.3 var(--schrift);
    color: var(--tinte);
    border-bottom: 1px solid var(--papier-linie);
    hyphens: manual;
  }

  /* Wertzeile: links das Paket, rechts der Wert. */
  /* Kein Flex hier: Werte wie „ja, vollständig" bestehen aus einem <span>
     und einem Textknoten. Als Flex-Behälter würde daraus zwei Kinder, und
     space-between risse sie auseinander — „ja" links, „, vollständig"
     rechts. Der Paketname steht deshalb absolut in der linken Spalte, der
     Wert bleibt normaler Textfluss und damit in einem Stück. */
  .tafel tbody tr:not(.tafel-gruppe):not(.tafel-tun) > td {
    position: relative;
    padding: 0.55rem 0.95rem 0.55rem 7.6rem;
    min-height: 2.1rem;
    border-bottom: 1px solid color-mix(in oklch, var(--papier-linie) 55%, transparent);
    text-align: right;
    font-size: 0.95rem;
  }
  .tafel tbody tr:not(.tafel-gruppe):not(.tafel-tun) > td:last-child {
    border-bottom: 0;
  }
  .tafel tbody tr:not(.tafel-gruppe):not(.tafel-tun) > td::before {
    content: attr(data-p);
    position: absolute;
    left: 0.95rem;
    top: 0.62rem;
    width: 6.2rem;
    text-align: left;
    font: 600 0.72rem/1.4 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--auf-papier-still);
  }
  /* Die empfohlene Spalte bleibt erkennbar — aber als Zeile, nicht als
     Spalte: getönt und links gefasst. Die seitlichen Innenschatten der
     Spaltenfassung ergäben hier zwei sinnlose Striche. */
  .tafel tbody tr:not(.tafel-gruppe):not(.tafel-tun) > td.hebe {
    background: color-mix(in oklch, var(--koenig) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--akzent-text);
  }
  .tafel tbody tr:not(.tafel-gruppe):not(.tafel-tun) > td.hebe::before {
    color: var(--akzent-tief);
  }

  /* Die Handlungszeile am Fuss wird zu vier gestapelten Tasten. */
  .tafel .tafel-tun { margin-top: 1.75rem; }
  .tafel .tafel-tun > th[scope="row"] {
    width: auto;
    position: static;
    background: transparent;
    padding: 0 0 0.75rem;
    border-bottom: 0;
    font: 600 0.74rem/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--akzent-text);
  }
  .tafel .tafel-tun > td {
    padding: 0 0 0.55rem;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
  }
  .tafel .tafel-tun .taste { min-height: 3rem; }

  /* Der Zeilenversatz aus schrift.js stellte die Karten schief. */
  [data-schrift="an"] .tafel tbody tr { translate: none; }
}


/* ---- A5 · Kleinkram, der am Telefon anstösst ---------------------------- */
@media (max-width: 45.99rem) {
  /* Die 2-px-Kante links neben .zusatz/.frage/.punkte sitzt ausserhalb
     des Elements und ragte am Rand des Masses über die Kante hinaus. */
  [data-schrift="an"] .zusatz::after,
  [data-schrift="an"] .frage::after,
  [data-schrift="an"] .punkte li::after { left: -0.4rem; }

  /* Fingerziele: nichts unter 44 px. */
  .fuss-unten a, .fuss nav a { min-height: 2.75rem; }
}


/* =====================================================================
   M · Website-Abo / Finanzierung
   ---------------------------------------------------------------------
   Nachtraeglich angehaengt. Ausschliesslich neue Klassennamen, damit die
   Mobil-Korrekturen A1–A5 und das Desktop-Layout unberuehrt bleiben.
   Einzige Ausnahme: .paket .betrag .monat — eine zusaetzliche Zeile
   innerhalb der bestehenden Preiskachel, ohne deren Regeln zu aendern.
   ===================================================================== */

/* --- Monatszeile in den Paketkacheln ---------------------------------- */
.paket .betrag .monat {
  display: block;
  font-family: var(--schrift);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  margin-top: 0.55rem;
  color: var(--akzent-text);
  /* Laufender Text, keine Tabellenziffern — die erbt sonst von .betrag (§6). */
  font-variant-numeric: normal;
}
.paket--stern .betrag .monat { color: var(--cyan); }
.paket .betrag .monat a {
  color: inherit;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
  text-underline-offset: 3px;
}
.paket .betrag .monat a:hover { color: var(--akzent-tief); }
.paket--stern .betrag .monat a:hover { color: #A3F2FE; }

/* --- Der Erklaerkasten ------------------------------------------------ */
.abo {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--papier-linie);
  background: var(--papier);
  color: var(--tinte);
  padding: clamp(1.35rem, 3vw, 2.4rem);
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.abo--nacht {
  background: var(--nacht-2);
  border-color: var(--nacht-linie);
  color: var(--auf-nacht);
}
.abo-marke {
  display: block;
  font: 600 0.76rem/1.3 var(--schrift);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent-text);
}
.abo--nacht .abo-marke { color: var(--cyan); }
.abo h2, .abo h3 {
  font-size: clamp(1.65rem, 1.15rem + 1.7vw, 2.35rem);
  margin: 0.4rem 0 0;
}
.abo p { font-size: 0.98rem; color: var(--auf-papier-still); }
.abo--nacht p { color: var(--auf-nacht-still); }
.abo p strong, .abo p b { color: var(--tinte); font-weight: 600; }
.abo--nacht p strong, .abo--nacht p b { color: var(--auf-nacht); }

/* Hoehere Spezifitaet als .abo p — sonst gewinnt dessen Schriftgroesse. */
.abo p.abo-preis {
  font-family: var(--anzeige);
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tinte);
  overflow-wrap: break-word;
}
.abo--nacht p.abo-preis { color: var(--auf-nacht); }
.abo p.abo-preis small {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--schrift);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--auf-papier-still);
}
.abo--nacht p.abo-preis small { color: var(--auf-nacht-still); }

.abo-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.95rem; }
@media (min-width: 46rem) {
  .abo-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1.8rem; }
}
.abo-punkte li { padding-left: 1.15rem; position: relative; }
.abo-punkte li::before { content: "—"; position: absolute; left: 0; color: var(--akzent-text); }
.abo--nacht .abo-punkte li::before { color: var(--cyan); }
.abo-punkte b { color: var(--akzent-text); font-weight: 600; }
.abo--nacht .abo-punkte b { color: var(--cyan); }

/* --- Laufzeit-Tafel: scrollt am Telefon im eigenen Kasten -------------- */
.abo-tafel-halter { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.abo-tafel {
  width: 100%;
  min-width: 27rem;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.abo-tafel th, .abo-tafel td {
  text-align: left;
  padding: 0.62rem 0.8rem 0.62rem 0;
  border-bottom: 1px solid var(--papier-linie);
  vertical-align: top;
}
.abo--nacht .abo-tafel th, .abo--nacht .abo-tafel td { border-bottom-color: var(--nacht-linie); }
.abo-tafel thead th {
  font: 600 0.7rem/1.3 var(--schrift);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent-text);
}
.abo--nacht .abo-tafel thead th { color: var(--cyan); }
.abo-tafel tbody th { font-weight: 600; white-space: nowrap; }
.abo-tafel td { font-variant-numeric: tabular-nums; }
.abo-tafel tbody tr:last-child th, .abo-tafel tbody tr:last-child td { border-bottom: 0; }
.abo p.abo-wisch { display: none; font: 500 0.8rem/1.4 var(--schrift); color: var(--auf-papier-still); }
.abo--nacht p.abo-wisch { color: var(--auf-nacht-still); }
@media (max-width: 33rem) { .abo p.abo-wisch { display: block; } }

.abo p.abo-fuss { font-size: 0.86rem; }
/* Verweise auf Papiergrund: Cyan traegt dort nicht.
   Bewusst nur auf die neu ergaenzten Stellen begrenzt. */
.abo a, .zusatz p a, .haltung-zeile p a, a.hin-hell { color: var(--akzent-text); }
.abo a:hover, .zusatz p a:hover, .haltung-zeile p a:hover, a.hin-hell:hover { color: var(--akzent-tief); }
.haltung-zeile p b { color: var(--tinte); font-weight: 600; }
.abo--nacht a { color: var(--cyan); }
.abo--nacht a:hover { color: #A3F2FE; }
.zusatz p b { color: var(--tinte); font-weight: 600; }
.abo-tun { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.abo-tun .taste { flex: 1 1 auto; }
@media (min-width: 34rem) { .abo-tun .taste { flex: 0 0 auto; } }

/* --- Schmaler Hinweisstreifen (Startseite, Blog) ---------------------- */
.abo-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin-top: 1.5rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--nacht-linie);
  border-left: 3px solid var(--cyan);
  background: var(--nacht-2);
  font-size: 0.97rem;
  color: var(--auf-nacht-still);
}
.abo-zeile b { color: var(--auf-nacht); font-weight: 600; }
.abo-zeile--hell {
  border-color: var(--papier-linie);
  border-left-color: var(--akzent-text);
  background: var(--papier-2);
  color: var(--auf-papier-still);
}
.abo-zeile--hell b { color: var(--tinte); }
.abo-zeile .hin { white-space: nowrap; }

/* --- Herkunftszeile ueber den Kundenstimmen ---------------------------- */
/* Stellt klar, dass die drei Stimmen aus Social-Media- und Content-
   Projekten stammen — nicht von der Referenzkundin daneben. */
.stimmen .marke-zeile { font-weight: 600; color: var(--akzent-text); font-size: 0.92rem; }

/* --- Entwurfsmarkierung in den AGB (dunkle Rechtsseiten) --------------- */
.recht .entwurf {
  border: 1px solid var(--nacht-linie);
  border-left: 3px solid var(--cyan);
  background: var(--nacht-2);
  color: var(--auf-nacht-still);
  padding: 0.85rem 1.1rem;
  margin: 1rem 0 0;
  font-size: 0.9rem;
}
.recht .entwurf b, .recht .entwurf strong { color: var(--cyan); font-weight: 600; }