/* ==========================================================================
   Cruvela – Gestaltung der Webseite
   Farben, Schriften und Maße stammen aus dem Gestaltungssystem der App
   (Cruvela/Gestaltung/GESTALTUNG.md). Wer hier etwas ändert, ändert es dort mit.

   Nichts wird von außen geladen: keine Schriftart, kein fremdes Skript,
   kein Zähler. Das eigene Skript (belebung.js) liegt daneben, ruft nichts
   nach draußen und ist reine Zugabe – ohne Skript bleibt alles lesbar.
   Das ist Datenschutz und Haltbarkeit zugleich.
   ========================================================================== */

:root {
  /* Markentöne */
  --tiefsee:            #0B3A43;
  --sand:               #FAF5EC;
  --messing:            #7A5714;

  /* Rollen – hell */
  --flaeche:            #FAF5EC;
  --flaeche-gehoben:    #FFFCF6;
  --fuellung-primaer:   #0B3A43;
  --schrift:            #0B3A43;
  --schrift-gedaempft:  #4A6169;
  --schrift-auf-fuellung: #FFFCF6;
  --akzent:             #7A5714;
  --warnung:            #A32C14;
  --erfolg:             #1B6640;
  --hinweis:            #1D5A87;
  --rand:               #6F7F84;
  --trennlinie:         #E2D8C6;

  /* Maße */
  --winzig:  4px;
  --klein:   8px;
  --mittel:  12px;
  --gross:   16px;
  --sehrgross: 24px;
  --riesig:  32px;
  --radius-klein:  8px;
  --radius:        14px;
  --radius-gross:  20px;

  --breite: 68rem;
  --breite-text: 42rem;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Plastik – die Stufenleiter aus Abschnitt 46 der App (Wahl »3b«).
     Eine Webseite, die flacher aussieht als die App, verspricht das Falsche.
     Licht kommt von oben, senkrecht: Schatten haben nur y-Versatz. Der
     Schattenton ist der Dunst der App (#04181F), nie Schwarz; das Licht ihr
     Lichtton (#FFFCF6). CSS-Weichzeichner ≈ doppelter SwiftUI-Radius. */
  --dunst: 4, 24, 31;
  --licht: 255, 252, 246;

  /* Stufe 1 · aufgelegt (Karten): Kontakt + Streu, Saum oben, Dicke unten */
  --plastik-1:
    inset 0 1px 0 rgba(var(--licht), .65),
    inset 0 -1px 0 rgba(var(--dunst), .14),
    0 2px 6px rgba(var(--dunst), .22),
    0 6px 28px rgba(var(--dunst), .16);

  /* Stufe 2 · greifbar (Knöpfe): kräftiger, Saum voll */
  --plastik-2:
    inset 0 1px 0 rgba(var(--licht), 1),
    inset 0 -1px 0 rgba(var(--dunst), .18),
    0 2px 8px rgba(var(--dunst), .32),
    0 9px 40px rgba(var(--dunst), .21);

  /* Stufe 3 · schwebt (das Telefon-Mock) */
  --plastik-3:
    0 4px 12px rgba(var(--dunst), .38),
    0 14px 68px rgba(var(--dunst), .26);

  /* Gedrückt heißt eingedrückt: Schatten nach innen, kein Saum mehr */
  --plastik-druck:
    inset 0 2px 10px rgba(var(--dunst), .26),
    0 2px 6px rgba(var(--dunst), .22);

  /* Der flache Lichtauftrag von oben (E-46.1: einfarbig heißt flach) */
  --plastik-verlauf: linear-gradient(180deg, rgba(var(--licht), .06), rgba(var(--licht), 0));

  /* Im Dunkeln nichts heben – wird unten überschrieben */
  --plastik-hebung-1: transparent;
  --plastik-hebung-2: transparent;

  /* Der Dunkelsatz, eigens entworfen (E-46.2): Schatten halb, Saum eigens,
     Hebung und Lichtkante. Als eigene Namen, weil auch das Wellenband auf
     heller Seite dunkel ist und denselben Satz braucht. */
  --plastik-1-dunkel:
    inset 0 1px 0 rgba(var(--licht), .95),
    inset 0 -1px 0 rgba(var(--dunst), .14),
    inset 0 0 0 1px rgba(var(--licht), .24),
    0 2px 6px rgba(var(--dunst), .11),
    0 6px 28px rgba(var(--dunst), .08);
  --plastik-2-dunkel:
    inset 0 1px 0 rgba(var(--licht), 1),
    inset 0 -1px 0 rgba(var(--dunst), .18),
    inset 0 0 0 1px rgba(var(--licht), .36),
    0 2px 8px rgba(var(--dunst), .16),
    0 9px 40px rgba(var(--dunst), .11);
  --plastik-3-dunkel:
    inset 0 0 0 1px rgba(var(--licht), .50),
    0 4px 12px rgba(var(--dunst), .19),
    0 14px 68px rgba(var(--dunst), .13);
  --plastik-druck-dunkel:
    inset 0 2px 10px rgba(var(--dunst), .13),
    0 2px 6px rgba(var(--dunst), .11);
  --plastik-verlauf-dunkel: linear-gradient(180deg, rgba(var(--licht), .10), rgba(var(--licht), 0));
}

@media (prefers-color-scheme: dark) {
  :root {
    --flaeche:            #062127;
    --flaeche-gehoben:    #0E3A44;
    --fuellung-primaer:   #6FC3D4;
    --schrift:            #EFE6D8;
    --schrift-gedaempft:  #A8BCC2;
    --schrift-auf-fuellung: #04212A;
    --tiefsee:            #6FC3D4;
    --sand:               #EFE6D8;
    --messing:            #E0B75F;
    --akzent:             #E0B75F;
    --warnung:            #FF9078;
    --erfolg:             #6FD79F;
    --hinweis:            #8CC7F0;
    --rand:               #5F94A0;
    --trennlinie:         #1C3F48;

    /* Im Dunkeln trägt das Licht, nicht der Schatten (E-46.2). */
    --plastik-1: var(--plastik-1-dunkel);
    --plastik-2: var(--plastik-2-dunkel);
    --plastik-3: var(--plastik-3-dunkel);
    --plastik-druck: var(--plastik-druck-dunkel);
    --plastik-verlauf: var(--plastik-verlauf-dunkel);
    --plastik-hebung-1: rgba(var(--licht), .05);
    --plastik-hebung-2: rgba(var(--licht), .08);
  }
}

/* --- Grundlage ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--schrift);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--gross);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.2rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--gross); }
p:last-child { margin-bottom: 0; }

a { color: var(--schrift); text-decoration-color: var(--akzent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  border-radius: var(--radius-klein);
}

img, svg { max-width: 100%; height: auto; }
svg[hidden] { display: none; }

.gedaempft { color: var(--schrift-gedaempft); }
.klein { font-size: 0.9375rem; }
.mittig { text-align: center; }

/* --- Sprungmarke -------------------------------------------------------- */

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fuellung-primaer);
  color: var(--schrift-auf-fuellung);
  padding: var(--mittel) var(--gross);
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}
.sprung:focus { left: 0; }

/* --- Raster ------------------------------------------------------------- */

.huelle {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

.schmal { max-width: var(--breite-text); }

section { padding-block: clamp(3rem, 8vw, 5.5rem); }
section + section { border-top: 1px solid var(--trennlinie); }

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--trennlinie);
}

.kopf-inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gross);
  padding-block: var(--mittel);
}

.wortmarke {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--klein);
  color: var(--schrift);
}
.wortmarke .zusatz {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent);
  font-weight: 700;
}

.navigation ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gross);
  margin: 0;
  padding: 0;
}
.navigation a {
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--schrift-gedaempft);
  padding: var(--winzig) 0;
  border-bottom: 2px solid transparent;
}
.navigation a:hover,
.navigation a[aria-current="page"] {
  color: var(--schrift);
  border-bottom-color: var(--akzent);
}

@media (max-width: 44rem) {
  .kopf-inhalt { flex-direction: column; align-items: flex-start; gap: var(--klein); }
  .navigation ul { gap: var(--mittel); }
}

/* --- Schaltflächen ------------------------------------------------------ */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--klein);
  min-height: 48px;
  padding: var(--mittel) var(--sehrgross);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.knopf:hover { transform: translateY(-1px); }

/* Antippbar heißt greifbar (Stufe 2) – und gedrückt heißt eingedrückt (E-46.3):
   eine Spur kleiner, der Schatten wandert nach innen, der Saum erlischt.
   Hinein 90 ms, heraus 160 ms – ein Druck ist sofort da, das Loslassen setzt sich. */
.knopf.primaer {
  background-color: var(--fuellung-primaer);
  background-image: var(--plastik-verlauf), linear-gradient(var(--plastik-hebung-2), var(--plastik-hebung-2));
  color: var(--schrift-auf-fuellung);
  box-shadow: var(--plastik-2);
  transition: transform .16s ease-out, box-shadow .16s ease-out, background-color .12s ease;
}
.knopf.sekundaer {
  background-color: var(--flaeche-gehoben);
  background-image: var(--plastik-verlauf), linear-gradient(var(--plastik-hebung-2), var(--plastik-hebung-2));
  color: var(--schrift);
  border-color: var(--rand);
  box-shadow: var(--plastik-2);
  transition: transform .16s ease-out, box-shadow .16s ease-out, background-color .12s ease;
}
.knopf.primaer:active,
.knopf.sekundaer:active {
  transform: scale(.98);
  box-shadow: var(--plastik-druck);
  background-image: none;
  transition-duration: .09s;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mittel);
  margin-top: var(--sehrgross);
}

/* --- Akzentbalken vor Überschriften ------------------------------------- */

.balken {
  display: flex;
  align-items: center;
  gap: var(--mittel);
  margin-bottom: var(--sehrgross);
}
.balken::before {
  content: "";
  width: 4px;
  align-self: stretch;
  min-height: 1.6em;
  background: var(--messing);
  border-radius: 2px;
  flex: none;
}
.balken h2, .balken h3 { margin: 0; }

.etikett {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--akzent);
  margin-bottom: var(--mittel);
}

/* --- Aufmacher ---------------------------------------------------------- */

.aufmacher {
  padding-block: clamp(3rem, 9vw, 6rem);
}
.aufmacher-raster {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
}
@media (max-width: 56rem) {
  .aufmacher-raster { grid-template-columns: 1fr; }
}
.aufmacher p.vorspann {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  color: var(--schrift-gedaempft);
  max-width: 34rem;
}

/* --- Karten ------------------------------------------------------------- */

.karte {
  background-color: var(--flaeche-gehoben);
  /* Stufe 1 der Leiter: liegt auf, ohne zu schweben – Verlauf von oben,
     im Dunkeln zusätzlich die Hebung als zweiter, flacher Auftrag. */
  background-image: var(--plastik-verlauf), linear-gradient(var(--plastik-hebung-1), var(--plastik-hebung-1));
  border: 1px solid var(--trennlinie);
  border-radius: var(--radius);
  padding: var(--sehrgross);
  box-shadow: var(--plastik-1);
}

.raster {
  display: grid;
  gap: var(--gross);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.karte h3 { margin-bottom: var(--klein); }
.karte p { color: var(--schrift-gedaempft); margin-bottom: 0; }

.symbol {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--messing) 16%, transparent);
  color: var(--akzent);
  margin-bottom: var(--gross);
}
.symbol svg { width: 22px; height: 22px; }

/* --- Zahlenreihe -------------------------------------------------------- */

.zahlen {
  display: grid;
  gap: var(--gross);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.zahl {
  background: var(--flaeche-gehoben);
  border: 1px solid var(--trennlinie);
  border-radius: var(--radius);
  padding: var(--gross);
  text-align: center;
}
.zahl b {
  display: block;
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--akzent);
  line-height: 1.1;
}
.zahl span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--schrift-gedaempft);
}

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

.gegenueber {
  display: grid;
  gap: var(--gross);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.spalte {
  border-radius: var(--radius);
  padding: var(--sehrgross);
  border: 1px solid var(--trennlinie);
}
.spalte.andere { background: transparent; }
.spalte.unsere { background: var(--flaeche-gehoben); border-color: var(--akzent); }
.spalte h3 { display: flex; align-items: center; gap: var(--klein); }
.spalte ul { margin: 0; padding-left: 1.1rem; color: var(--schrift-gedaempft); }
.spalte li { margin-bottom: var(--klein); }
.spalte li::marker { color: var(--akzent); }

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

.preise { display: grid; gap: var(--gross); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.preis {
  background: var(--flaeche-gehoben);
  border: 1px solid var(--trennlinie);
  border-radius: var(--radius);
  padding: var(--sehrgross);
  display: flex; flex-direction: column;
}
.preis.hervor { border-color: var(--akzent); border-width: 2px; }
.preis .betrag {
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--schrift);
  line-height: 1;
  margin-block: var(--klein) var(--winzig);
}
.preis .dazu { font-size: 0.875rem; color: var(--schrift-gedaempft); }
.preis ul { list-style: none; margin: var(--gross) 0 0; padding: 0; font-size: 0.9375rem; }
.preis li { display: flex; gap: var(--klein); margin-bottom: var(--klein); color: var(--schrift-gedaempft); }
.preis li::before { content: "✓"; color: var(--erfolg); font-weight: 700; flex: none; }
.marke {
  align-self: flex-start;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  background: var(--messing); color: var(--schrift-auf-fuellung);
  padding: 2px var(--klein); border-radius: 999px;
}
@media (prefers-color-scheme: dark) {
  .marke { color: #04212A; }
}

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

details {
  border-bottom: 1px solid var(--trennlinie);
  padding-block: var(--gross);
}
details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex; justify-content: space-between; gap: var(--gross);
  min-height: 32px; align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; color: var(--akzent); font-size: 1.4rem; line-height: 1; flex: none;
}
details[open] summary::after { content: "–"; }
details p { margin-top: var(--mittel); color: var(--schrift-gedaempft); }

/* --- Fließtextseiten ---------------------------------------------------- */

.text h2 { margin-top: var(--riesig); }
.text h3 { margin-top: var(--sehrgross); margin-bottom: var(--klein); }
.text ul, .text ol { color: var(--schrift-gedaempft); padding-left: 1.2rem; }
.text li { margin-bottom: var(--klein); }
.text li::marker { color: var(--akzent); }
.text dl { margin: 0 0 var(--gross); }
.text dt { font-weight: 600; margin-top: var(--mittel); }
.text dd { margin: 0 0 var(--klein); color: var(--schrift-gedaempft); }

.hinweiskasten {
  border-left: 4px solid var(--messing);
  background: var(--flaeche-gehoben);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  padding: var(--gross) var(--sehrgross);
  margin-bottom: var(--sehrgross);
}
.hinweiskasten p { margin-bottom: var(--klein); }
.hinweiskasten p:last-child { margin-bottom: 0; }

.platzhalter {
  background: color-mix(in srgb, var(--warnung) 14%, transparent);
  border-radius: var(--radius-klein);
  padding: 1px var(--klein);
  font-weight: 600;
  color: var(--schrift);
}

/* --- Fußzeile ----------------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--trennlinie);
  padding-block: var(--riesig);
  font-size: 0.9375rem;
  color: var(--schrift-gedaempft);
}
.fuss-raster {
  display: grid;
  gap: var(--sehrgross);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--sehrgross);
}
.fuss h3 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--schrift-gedaempft); margin-bottom: var(--mittel); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: var(--klein); }
.fuss a { text-decoration: none; color: var(--schrift-gedaempft); }
.fuss a:hover { color: var(--schrift); text-decoration: underline; }
.fuss-unten {
  border-top: 1px solid var(--trennlinie);
  padding-top: var(--gross);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mittel);
}

/* --- Gerätebild --------------------------------------------------------- */

.geraet { filter: drop-shadow(0 18px 40px rgba(11, 58, 67, .18)); }
@media (prefers-color-scheme: dark) {
  .geraet { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5)); }
}

/* ==========================================================================
   Fassung 2 – mehr Bild, mehr Rhythmus
   ========================================================================== */

/* --- Aufmacher mit Wasserzeichen ---------------------------------------- */

.aufmacher { position: relative; overflow: hidden; }

.aufmacher::before {
  content: "";
  position: absolute;
  inset: -20% -30% auto auto;
  width: 60rem; height: 60rem;
  background: radial-gradient(circle at center,
              color-mix(in srgb, var(--messing) 13%, transparent) 0%,
              transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.aufmacher > * { position: relative; z-index: 1; }

/* --- Wellenband (dunkler Abschnitt) ------------------------------------- */

.band {
  background: var(--tiefsee);
  color: var(--schrift-auf-fuellung);
  position: relative;
  border: 0;
}
@media (prefers-color-scheme: dark) {
  .band { background: #0E3A44; color: var(--schrift); }
}
.band h2 { color: inherit; }
.band .gedaempft { color: color-mix(in srgb, currentColor 68%, transparent); }
.band .balken::before { background: var(--messing); }
@media (prefers-color-scheme: dark) { .band .balken::before { background: #E0B75F; } }
.band .etikett { color: #E0B75F; }
/* Das Band ist auf beiden Erscheinungsbildern dunkel – seine Karten und Knöpfe
   bekommen deshalb immer den Dunkelsatz der Leiter. */
.band {
  --plastik-1: var(--plastik-1-dunkel);
  --plastik-2: var(--plastik-2-dunkel);
  --plastik-druck: var(--plastik-druck-dunkel);
  --plastik-verlauf: var(--plastik-verlauf-dunkel);
  --plastik-hebung-1: rgba(var(--licht), .05);
  --plastik-hebung-2: rgba(var(--licht), .08);
}

.band .karte {
  background: color-mix(in srgb, #FFFFFF 7%, transparent);
  border-color: color-mix(in srgb, currentColor 18%, transparent);
}
.band .karte p { color: color-mix(in srgb, currentColor 72%, transparent); }
.band .symbol { background: color-mix(in srgb, #E0B75F 20%, transparent); color: #E0B75F; }
.band .knopf.primaer { background: #E0B75F; color: #04212A; }
.band .knopf.sekundaer { border-color: color-mix(in srgb, currentColor 40%, transparent); color: inherit; }
.band .zahl {
  background: color-mix(in srgb, #FFFFFF 7%, transparent);
  border-color: color-mix(in srgb, currentColor 18%, transparent);
}
.band .zahl b { color: #E0B75F; }
.band .zahl span { color: color-mix(in srgb, currentColor 65%, transparent); }

.welle { display: block; width: 100%; height: clamp(28px, 4vw, 56px); }
.welle path { fill: var(--flaeche); }

/* --- Anspruchsband ------------------------------------------------------ */

.anspruch {
  text-align: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.anspruch p.gross {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.25;
  max-width: 30ch;
  margin: 0 auto var(--gross);
  text-wrap: balance;
}
.anspruch p.gross em { font-style: normal; color: #E0B75F; }

/* --- Schaufenster: abwechselnd Bild und Text ---------------------------- */

.schaufenster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}
.schaufenster + .schaufenster { margin-top: clamp(3rem, 7vw, 5rem); }
.schaufenster.gedreht .bild { order: 2; }
@media (max-width: 54rem) {
  .schaufenster { grid-template-columns: 1fr; gap: var(--sehrgross); }
  .schaufenster.gedreht .bild { order: 0; }
}
.schaufenster .bild {
  background: var(--flaeche-gehoben);
  border: 1px solid var(--trennlinie);
  border-radius: var(--radius-gross);
  padding: var(--sehrgross);
}
.schaufenster h3 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 600;
  margin-bottom: var(--mittel);
}
.schaufenster p { color: var(--schrift-gedaempft); }
.merkliste { list-style: none; margin: var(--gross) 0 0; padding: 0; }
.merkliste li {
  display: flex; gap: var(--mittel); margin-bottom: var(--mittel);
  color: var(--schrift-gedaempft); font-size: 0.9375rem;
}
.merkliste li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: .55em;
  border-radius: 50%; background: var(--messing);
}

/* --- Vergleichstabelle -------------------------------------------------- */

.vergleich-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.vergleich {
  width: 100%;
  border-collapse: collapse;
  min-width: 34rem;
  background: var(--flaeche-gehoben);
  border: 1px solid var(--trennlinie);
  border-radius: var(--radius);
  overflow: hidden;
}
table.vergleich th, table.vergleich td {
  padding: var(--mittel) var(--gross);
  text-align: left;
  border-bottom: 1px solid var(--trennlinie);
  font-size: 0.9375rem;
}
table.vergleich thead th {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--schrift-gedaempft); font-weight: 700;
  background: color-mix(in srgb, var(--messing) 8%, transparent);
}
table.vergleich th[scope="row"] { font-weight: 600; color: var(--schrift); }
table.vergleich td { text-align: center; color: var(--schrift-gedaempft); width: 22%; }
table.vergleich thead th:not(:first-child) { text-align: center; }
table.vergleich tbody tr:last-child th,
table.vergleich tbody tr:last-child td { border-bottom: 0; }
.ja { color: var(--erfolg); font-weight: 700; }
.nein { color: var(--schrift-gedaempft); opacity: .55; }

/* Auf dem Handy passt die Tabelle ohne Scrollen, wenn sie enger gesetzt wird –
   die meisten sehen die Seite auf dem Telefon. */
@media (max-width: 40rem) {
  table.vergleich { min-width: 0; }
  table.vergleich th, table.vergleich td {
    padding: var(--klein) var(--klein);
    font-size: 0.8125rem;
  }
  table.vergleich td { width: 5rem; }
  table.vergleich thead th {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }
}

/* --- Ablauf in Schritten ------------------------------------------------ */

.schritte {
  display: grid;
  gap: var(--gross);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  counter-reset: schritt;
}
.schritt {
  position: relative;
  padding: var(--sehrgross) var(--gross) var(--gross);
  border: 1px solid var(--trennlinie);
  border-radius: var(--radius);
  background: var(--flaeche-gehoben);
}
.schritt::before {
  counter-increment: schritt;
  content: counter(schritt);
  position: absolute; top: -14px; left: var(--gross);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--messing); color: #FFFCF6;
  font-size: 0.8rem; font-weight: 700;
}
@media (prefers-color-scheme: dark) { .schritt::before { color: #04212A; } }
.schritt h3 { margin-bottom: var(--klein); font-size: 1.05rem; }
.schritt p { color: var(--schrift-gedaempft); font-size: 0.9375rem; margin: 0; }

/* --- Karten: etwas mehr Leben ------------------------------------------- */

.karte { transition: transform .15s ease, border-color .15s ease; }
.raster .karte:hover { transform: translateY(-2px); border-color: var(--rand); }

/* --- Hinweiszeile mit Symbol -------------------------------------------- */

.netzhinweis {
  display: flex; gap: var(--mittel); align-items: flex-start;
  background: color-mix(in srgb, var(--hinweis) 12%, transparent);
  border-radius: var(--radius);
  padding: var(--gross);
  font-size: 0.9375rem;
  color: var(--schrift);
  margin-top: var(--gross);
}
.netzhinweis svg { flex: none; width: 20px; height: 20px; color: var(--hinweis); margin-top: 2px; }
.netzhinweis p { margin: 0; color: var(--schrift-gedaempft); }
.netzhinweis strong { color: var(--schrift); }

/* --- Wellen: Feinschliff ------------------------------------------------ */

.welle.unten { transform: rotate(180deg); }
.band + section { border-top: 0; }
.band .vorspann, .band p { color: inherit; }
.band .schritt {
  background: color-mix(in srgb, #FFFFFF 7%, transparent);
  border-color: color-mix(in srgb, currentColor 18%, transparent);
}
.band .schritt p { color: color-mix(in srgb, currentColor 72%, transparent); }
.band .schritt h3 { color: inherit; }
.band .schritt::before { background: #E0B75F; color: #04212A; }
.band .gedaempft strong { color: inherit; }

/* --- Preise: zwei Angebote nebeneinander -------------------------------- */

.preise.zwei {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 24rem));
  justify-content: center;
}

/* ==========================================================================
   Fassung 4 – die Seite lebt
   Alles hier ist Zugabe über belebung.js: Ohne Skript ist nichts versteckt,
   und „Bewegung reduzieren“ hält über den Block ganz oben alles still.
   ========================================================================== */

/* --- Einblenden beim Lesen ---------------------------------------------- */

/* Erst das Skript versteckt (Klasse kommt aus belebung.js), … */
.einblendbar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--reihe, 0) * 90ms);
}
/* … und der Beobachter zeigt wieder her. */
.einblendbar.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .einblendbar { opacity: 1; transform: none; }
}

/* --- Der Aufmacher lebt -------------------------------------------------- */

.js .puls {
  animation: pulsieren 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.js .puls-ring {
  animation: ausschwingen 2.6s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes pulsieren {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}
@keyframes ausschwingen {
  from { transform: scale(1);   opacity: .5; }
  to   { transform: scale(2.8); opacity: 0; }
}

.tickend { font-variant-numeric: tabular-nums; }

/* --- Die Wellen wogen ----------------------------------------------------
   Der Pfad bewegt sich nur senkrecht: oben bleibt er randlos gefüllt,
   nur die Wellenkante hebt und senkt sich. */

.js .welle path {
  animation: wogen 7s ease-in-out infinite alternate;
}
.js .welle.unten path {
  animation-delay: -3.5s;
}
@keyframes wogen {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

/* --- Die Fahrt: Seeweg neben den Schaufenstern --------------------------- */

.fahrt { display: block; }

.fahrt-linie { display: none; }

@media (min-width: 54.0625rem) {
  .js .fahrt {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
  }
  .js .fahrt-linie { display: block; position: relative; }
}

.fahrt-linie svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.route-grund {
  fill: none;
  stroke: var(--trennlinie);
  stroke-width: 2.5;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
}
.route-zug {
  fill: none;
  stroke: var(--tiefsee);
  stroke-width: 3;
  stroke-linecap: round;
}

.fahrt-station {
  fill: var(--flaeche);
  stroke: var(--rand);
  stroke-width: 2.5;
  transition: fill .3s ease, stroke .3s ease;
}
.fahrt-station.angelaufen {
  fill: var(--messing);
  stroke: var(--messing);
}
.fahrt-ziffer {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  fill: var(--schrift-gedaempft);
  transition: fill .3s ease;
}
.fahrt-ziffer.angelaufen { fill: var(--schrift-auf-fuellung); }
@media (prefers-color-scheme: dark) {
  .fahrt-ziffer.angelaufen { fill: #04212A; }
}

.fahrt-schiff .schiff-kreis { fill: var(--fuellung-primaer); }
.fahrt-schiff .schiff-segel { fill: var(--schrift-auf-fuellung); }

/* --- Das Bordzeit-Demo ---------------------------------------------------- */

.demo { display: flex; flex-direction: column; gap: var(--gross); }

.demo-titel {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--akzent);
  margin: 0;
}

.demo-uhren {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mittel);
}
.demo-uhr {
  background: var(--flaeche);
  border: 1.5px solid var(--trennlinie);
  border-radius: var(--radius);
  padding: var(--gross);
}
.demo-uhr.bord { border-color: var(--messing); }
.demo-uhr .demo-etikett {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--schrift-gedaempft);
}
.demo-uhr.bord .demo-etikett { color: var(--akzent); }
.demo-uhr b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--schrift);
}
.demo-uhr .demo-unter {
  font-size: 0.75rem;
  color: var(--schrift-gedaempft);
}

.demo-regler { display: block; font-size: 0.875rem; color: var(--schrift-gedaempft); }
.demo-regler input[type="range"] {
  display: block;
  width: 100%;
  margin-top: var(--klein);
  accent-color: var(--akzent);
}

.demo-status {
  display: flex;
  gap: var(--klein);
  align-items: flex-start;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--schrift);
  min-height: 3.2em; /* damit der Kasten beim Wechsel der Meldung nicht springt */
}
.demo-lampe {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 0.3em;
  background: var(--erfolg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--erfolg) 22%, transparent);
}
.demo-lampe.gelb {
  background: var(--akzent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent);
}
.demo-lampe.rot {
  background: var(--warnung);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warnung) 22%, transparent);
}

/* --- Echte App-Ansichten im Telefonrahmen -------------------------------- */

.telefon {
  --rahmen: #0B3A43;
  border: 10px solid var(--rahmen);
  border-radius: 44px;
  overflow: hidden;
  max-width: 300px;
  margin-inline: auto;
  background: var(--rahmen);
  /* Stufe 3 der Leiter: das Gerät schwebt – derselbe Wurf wie Blätter und
     Marken in der App, statt eines eigenen Schattens. */
  box-shadow: var(--plastik-3);
}
@media (prefers-color-scheme: dark) {
  .telefon { --rahmen: #04161B; }
}
.telefon img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
}

.telefonreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: var(--riesig);
}
.telefonreihe figure { margin: 0; }
.telefonreihe figcaption {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--schrift-gedaempft);
  margin-top: var(--mittel);
  max-width: 300px;
  margin-inline: auto;
}

/* --- Erhöhter Kontrast: Kanten statt Modellierung (E-46.6) ---------------- */

@media (prefers-contrast: more) {
  .karte,
  .band .karte,
  .knopf.primaer,
  .knopf.sekundaer,
  .telefon {
    box-shadow: none;
    background-image: none;
  }
  .karte { border-width: 1.5px; }
  .knopf.sekundaer { border-width: 2px; }
}