/* ==========================================================================
   Bubblemakers Hurghada - Design-System
   Eine Datei fuer die ganze Seite: Grundlagen, Layout, Komponenten.
   Reihenfolge: Variablen -> Reset -> Layout -> Komponenten -> Seitenteile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variablen
   Die Palette kommt aus dem Logo: Seifenblasen-Blau als Basis, dazu die
   schillernden Zweitfarben, die eine Seifenblase im Licht zeigt.
   -------------------------------------------------------------------------- */

:root {
  --tief:      #062a3d;   /* Tiefsee, Text und dunkle Flaechen */
  --tief-2:    #0b3e57;
  --ozean:     #0f8ba3;
  --ozean-h:   #0b6f84;
  --blase:     #35d6e8;
  --blase-2:   #8ae9f4;
  --himmel:    #e6faff;
  --creme:     #f4fdff;
  --sonne:     #ffcf4d;
  --sonne-2:   #fff2cc;
  --koralle:   #ff7a59;
  --koralle-2: #ffe3db;
  --beere:     #ff8fd0;
  --limette:   #8ee36a;
  --lavendel:  #b48bff;

  --text:      #123a4c;
  --text-hell: #5b8395;
  --rand:      #d5eff6;
  --weiss:     #ffffff;

  --font: 'Sour Gummy', 'Baloo 2', 'Trebuchet MS', system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --r-s:  14px;
  --r-m:  22px;
  --r-l:  32px;
  --r-xl: 46px;

  --schatten-s: 0 6px 18px rgba(6, 42, 61, .07);
  --schatten-m: 0 14px 38px rgba(6, 42, 61, .10);
  --schatten-l: 0 26px 60px rgba(6, 42, 61, .18);

  /* Schillernder Seifenblasen-Verlauf, mehrfach wiederverwendet */
  --schiller: linear-gradient(115deg, #8ae9f4 0%, #b48bff 22%, #ff8fd0 42%,
                              #ffcf4d 60%, #8ee36a 78%, #35d6e8 100%);

  --kopf-hoehe: 78px;
}

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Grundfarbe des Wassers: oben hell, wo das Licht einfaellt, nach unten
     etwas tiefer. Die bewegten Lagen darueber setzt site.js (.wasser). */
  background: #bce8f0 linear-gradient(180deg, #e4f8fc 0%, #c2eaf2 50%, #a2dbe7 100%) fixed;
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Sour Gummy ist eine sehr runde Schrift; enge Laufweite haelt lange
   Ueberschriften trotzdem kompakt. */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--tief);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--ozean); text-decoration: none; }
a:hover { color: var(--koralle); }

/* height:auto ist hier keine Kosmetik: Kopf-, Fuss- und Hero-Logo tragen im
   Markup width/height als Seitenverhaeltnis-Angabe (gegen Layoutspruenge).
   Setzt das CSS dann nur die Breite, bleibt die Hoehe aus dem Attribut stehen
   und das Logo wird gestaucht. */
img { max-width: 100%; height: auto; display: block; }

input, select, textarea, button { font: inherit; color: inherit; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

strong, b { font-weight: 700; }

::selection { background: var(--blase); color: var(--tief); }

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

[hidden] { display: none !important; }

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

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--koralle); color: #fff; font-weight: 700;
  padding: 12px 20px; border-radius: 999px;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - clamp(32px, 8vw, 64px), var(--wrap)); margin-inline: auto; }
.wrap--schmal { width: min(100% - clamp(32px, 8vw, 64px), 820px); margin-inline: auto; }

.abschnitt { padding: clamp(52px, 8vw, 96px) 0; position: relative; }
.abschnitt--eng  { padding: clamp(34px, 5vw, 58px) 0; }
/* Helle Abschnitte sind nur noch Schleier ueber dem Wasser - deckend
   waeren sie eine Wand vor dem Unterwasser-Hintergrund. Die Abstufung
   hell / creme / himmel bleibt als unterschiedlich dichter Schleier. */
.abschnitt--hell { background: rgba(255, 255, 255, .42); }
.abschnitt--himmel { background: rgba(230, 250, 255, .08); }
.abschnitt--creme { background: rgba(244, 253, 255, .26); }

.abschnitt--tief {
  background: var(--tief);
  color: #cfeef7;
}
.abschnitt--tief h1, .abschnitt--tief h2, .abschnitt--tief h3, .abschnitt--tief h4 { color: #fff; }
.abschnitt--tief a { color: var(--blase); }

.raster { display: grid; gap: clamp(18px, 2.6vw, 28px); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
/* Wenn eine Spalte deutlich hoeher ist als die andere - etwa eine Preiskarte
   neben einem kurzen Text - sieht zentriert nach Fehler aus. */
.split--oben { align-items: start; }

/* --------------------------------------------------------------------------
   4. Blasen-Ebenen (Canvas) und Zeiger
   -------------------------------------------------------------------------- */

/* Die Blasen liegen vor dem Inhalt, nicht dahinter: die Abschnitte haben
   deckende Hintergrundfarben, hinter denen eine feste Ebene unsichtbar
   waere. Sie halten sich stattdessen in den Raendern links und rechts der
   Textspalte (siehe bubbles.js) und fangen keine Klicks ab. Der Kopf liegt
   bewusst darueber, damit die sticky Leiste sauber bleibt. */
.bm-blasen {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 8;
}

.bm-zeiger {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
}

@media (prefers-reduced-motion: reduce) {
  .bm-blasen, .bm-zeiger { display: none; }
}

/* --------------------------------------------------------------------------
   4b. Unterwasser-Hintergrund
   Offenes, helles Wasser: ein Lichtschein von der Oberflaeche oben rechts,
   weiche Lichtbahnen, die schraeg nach unten fallen und langsam wandern,
   Dunst in der Tiefe und feine Schwebeteilchen (Canvas, site.js).

   Ein gemustertes Lichtnetz (Kaustik) war der erste Versuch - es wirkte
   wie Tapete. Echtes Freiwasser hat keine harten Linien, nur weiche
   Helligkeitsverlaeufe. Darum ausschliesslich Verlaeufe, bewegt per
   transform und opacity: das erledigt die Grafikkarte, ohne dass je Bild
   neu gemalt wird.

   Liegt mit z-index -1 hinter allem Inhalt; die hellen Abschnitte sind
   dafuer nur noch halbdurchsichtige Schleier (siehe 3. Layout).
   -------------------------------------------------------------------------- */

.wasser {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    /* Lichtschein der Oberflaeche, oben rechts ausserhalb des Bildes */
    radial-gradient(ellipse 75% 60% at 76% -14%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .45) 38%, rgba(255, 255, 255, 0) 72%),
    /* Dunst in der Tiefe - Freiwasser wird nach unten satter */
    linear-gradient(180deg, rgba(14, 140, 160, 0) 45%, rgba(14, 130, 152, .12) 100%),
    /* Zu den Raendern hin etwas dunkler, wie auf Unterwasserfotos */
    radial-gradient(ellipse 95% 85% at 62% 28%, rgba(8, 90, 115, 0) 55%, rgba(8, 90, 115, .13) 100%);
  animation: bm-wasser-ein 1.2s ease-out both;
}
@keyframes bm-wasser-ein { from { opacity: 0; } to { opacity: 1; } }

/* Lichtbahnen: ein Faecher aus dem Lichtschein oben rechts. Ein Konus-
   Verlauf mit Mittelpunkt ueber dem Bild liefert von selbst Bahnen, die
   nach unten breiter werden - wie echtes einfallendes Licht. Weiche
   Uebergaenge von einigen Grad statt harter Kanten. Zwei Lagen mit
   verschobenen Bahnen schwenken gegeneinander und atmen versetzt; so
   tauchen Bahnen auf und verblassen, ohne dass sich ein Takt erkennen
   laesst. */
.wasser__strahlen {
  position: absolute; inset: 0;
  transform-origin: 78% -40%;
  -webkit-mask: radial-gradient(ellipse 125% 115% at 78% 0%, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 95%);
          mask: radial-gradient(ellipse 125% 115% at 78% 0%, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 95%);
  will-change: transform, opacity;
}
.wasser__strahlen--a {
  background: conic-gradient(from 160deg at 78% -40%,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0) 5deg,  rgba(255, 255, 255, .55) 8.5deg, rgba(255, 255, 255, 0) 12deg,
    rgba(255, 255, 255, 0) 17deg, rgba(255, 255, 255, .3)  19deg,  rgba(255, 255, 255, 0) 21deg,
    rgba(255, 255, 255, 0) 25deg, rgba(255, 255, 255, .62) 29deg,  rgba(255, 255, 255, .22) 33deg, rgba(255, 255, 255, 0) 36deg,
    rgba(255, 255, 255, 0) 42deg, rgba(255, 255, 255, .38) 45deg,  rgba(255, 255, 255, 0) 50deg,
    rgba(255, 255, 255, 0) 55deg, rgba(255, 255, 255, .26) 58deg,  rgba(255, 255, 255, 0) 62deg,
    rgba(255, 255, 255, 0) 360deg);
  animation: bm-strahlen-schwenk 26s ease-in-out infinite alternate,
             bm-strahlen-atmen 9s ease-in-out infinite alternate;
}
.wasser__strahlen--b {
  background: conic-gradient(from 160deg at 78% -40%,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0) 1deg,  rgba(255, 255, 255, .32) 3deg,   rgba(255, 255, 255, 0) 5deg,
    rgba(255, 255, 255, 0) 12deg, rgba(255, 255, 255, .46) 15deg,  rgba(255, 255, 255, 0) 18deg,
    rgba(255, 255, 255, 0) 33deg, rgba(255, 255, 255, .4)  38deg,  rgba(255, 255, 255, 0) 43deg,
    rgba(255, 255, 255, 0) 49deg, rgba(255, 255, 255, .48) 52deg,  rgba(255, 255, 255, 0) 55deg,
    rgba(255, 255, 255, 0) 360deg);
  animation: bm-strahlen-schwenk 31s ease-in-out -12s infinite alternate-reverse,
             bm-strahlen-atmen 11s ease-in-out -5s infinite alternate-reverse;
}
@keyframes bm-strahlen-schwenk {
  from { transform: rotate(-2.2deg); }
  to   { transform: rotate(2.2deg); }
}
@keyframes bm-strahlen-atmen {
  from { opacity: .35; }
  to   { opacity: 1; }
}

/* Die Shader-Szene (site.js) mit Sandboden und Lichtnetz. Laeuft sie,
   uebernimmt sie auch die Lichtbahnen - die CSS-Lagen sind dann nur noch
   der Rueckfall fuer Geraete ohne WebGL. Gerechnet wird in halber
   Aufloesung, der Browser skaliert weich hoch. */
.wasser__gl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.wasser--gl .wasser__strahlen { display: none; }

/* Schwebeteilchen - gezeichnet von site.js */
.wasser__teilchen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Der System-Zeiger bleibt sichtbar - die Blase schmueckt ihn nur. So ist
   jederzeit klar, worauf gerade geklickt wird. */
a, button, summary, label, [role="button"], .klickbar { cursor: pointer; }

/* --------------------------------------------------------------------------
   5. Logo-Intro
   Das Logo faellt ins Wasser, platscht, taucht auf und fliegt an seinen
   Platz. Ablauf und Wege stehen in site.js, hier nur das Aussehen.
   -------------------------------------------------------------------------- */

.logo-intro {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
}

/* Der Hintergrund steckt in einer eigenen Ebene, damit er sich unabhaengig
   vom Logo ausblenden laesst: beim Uebergang wandert das Logo weiter,
   waehrend der Vorhang darunter schon verschwindet. Auf der Ebene selbst
   ginge das nicht - deren opacity wuerde das Logo mitnehmen. */
.logo-intro::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, var(--himmel) 55%, #cbeff8 100%);
  opacity: 1;
  transition: opacity .56s ease;
}

/* Die Wege (Fall, Eintauchen, Flug an den Platz) rechnet site.js aus und
   faehrt sie mit der Web Animations API. Bis dahin bleibt das Logo
   unsichtbar, sonst stuende es fuer ein Bild schon in der Mitte. */
.logo-intro__bild {
  position: relative; z-index: 1;
  width: min(74vw, 620px);
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.logo-intro--laeuft .logo-intro__bild { opacity: 1; }

/* Das Wasser liegt UEBER dem Logo und ist durchscheinend: Was eintaucht,
   wirkt dadurch tuerkis getoent, ganz ohne Maske oder Zuschnitt. Die
   Oberflaeche setzt site.js auf gut zwei Drittel der Logohoehe. */
.logo-intro__wasser {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  top: var(--oberflaeche, 60%);
  background: linear-gradient(180deg, rgba(53, 214, 232, .5) 0%, rgba(15, 139, 163, .72) 45%, rgba(11, 62, 87, .9) 100%);
  transform: translateY(105%);
  pointer-events: none;
}
.logo-intro--laeuft .logo-intro__wasser {
  transform: none;
  animation: bm-wasser-steigt .5s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes bm-wasser-steigt {
  from { transform: translateY(60%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.logo-intro__wellen {
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 34px; overflow: hidden;
  transform-origin: 50% 100%;
}
.logo-intro__welle {
  position: absolute; left: 0; bottom: 0;
  width: 200%; height: 100%;
  animation: bm-welle-lauf 3.4s linear infinite;
}
.logo-intro__welle--hinten { fill: rgba(138, 233, 244, .55); height: 90%; bottom: 6px; animation-duration: 5.2s; animation-direction: reverse; }
.logo-intro__welle--vorn   { fill: rgba(53, 214, 232, .5); }

/* Der Aufprall: die Oberflaeche schlaegt kurz hoch und schaukelt aus. */
.logo-intro__wellen--platsch { animation: bm-welle-platsch 1.1s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes bm-welle-platsch {
  0%   { transform: scaleY(1); }
  12%  { transform: scaleY(2.6); }
  30%  { transform: scaleY(.6); }
  50%  { transform: scaleY(1.6); }
  70%  { transform: scaleY(.85); }
  100% { transform: scaleY(1); }
}

@keyframes bm-welle-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo-intro__spritzer {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  pointer-events: none;
  transition: opacity .5s ease;
}

/* Abschluss: Das Wasser laeuft nach unten ab, der Vorhang blendet aus,
   und das Logo fliegt im Bogen an seinen Platz. */
.logo-intro--ablauf { pointer-events: none; }
.logo-intro--ablauf::before { opacity: 0; }
.logo-intro--ablauf .logo-intro__wasser {
  animation: none;
  transform: translateY(105%);
  transition: transform .8s cubic-bezier(.5, 0, .75, .3);
}
.logo-intro--ablauf .logo-intro__spritzer { opacity: 0; }

.logo-intro--weg {
  animation: bm-intro-aus 480ms ease forwards;
  pointer-events: none;
}
@keyframes bm-intro-aus {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

/* Das Ziel bleibt unsichtbar, solange das Intro-Logo darauf zufliegt -
   sonst stehen beide gleichzeitig da und es blitzt doppelt. */
.logo-morph-ziel { opacity: 0 !important; animation: none !important; }

/* Das Logo im Kopf ploppt bei jedem Seitenaufruf kurz nach - dieselbe
   Bewegung, nur kleiner und schneller, damit es nicht aufhaelt. */
@keyframes bm-plopp-klein {
  0%   { transform: scale(.2) rotate(-6deg); opacity: 0; }
  22%  { transform: scale(1.14) rotate(3deg); opacity: 1; }
  42%  { transform: scale(.94) rotate(-2deg); }
  60%  { transform: scale(1.05) rotate(1deg); }
  78%  { transform: scale(.98) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.kopf__logo-bild { animation: bm-plopp-klein 780ms cubic-bezier(.34, 1.15, .5, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .logo-intro { display: none; }
  .kopf__logo-bild { animation: none; }
}

/* --------------------------------------------------------------------------
   6. Kopfbereich
   -------------------------------------------------------------------------- */

/* Kein backdrop-filter, so verlockend er hier auch waere: Die Blasen-Ebene
   liegt unter dem Kopf und bewegt sich staendig. Ein Weichzeichner darueber
   muesste deshalb in JEDEM Bild neu berechnet werden - fuer die volle
   Fensterbreite. Das war neben den Verlaeufen im Canvas der zweite Grund
   fuer das Ruckeln. Ein fast deckendes Weiss sieht nahezu gleich aus und
   kostet nichts. */
.kopf {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .96);
  border-bottom: 2px solid var(--rand);
}

.kopf__inner {
  width: min(100% - clamp(24px, 5vw, 48px), 1320px);
  margin-inline: auto;
  min-height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: 18px;
}

.kopf__logo { display: flex; align-items: center; flex: none; }
.kopf__logo-bild { height: 50px; width: auto; }
.kopf__logo:hover .kopf__logo-bild { animation: bm-wackel 620ms ease; }

@keyframes bm-wackel {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-2.5deg) scale(1.04); }
  60% { transform: rotate(2deg) scale(1.02); }
}

.kopf__nav {
  margin-left: auto;
  display: flex; align-items: center;
  gap: clamp(10px, 1.5vw, 22px);
  font-weight: 600; font-size: 15.5px;
}

.kopf__link { color: var(--tief); padding: 8px 2px; position: relative; }
.kopf__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 3px; border-radius: 3px; background: var(--blase);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.kopf__link:hover { color: var(--ozean); }
.kopf__link:hover::after, .kopf__link[aria-current="page"]::after { transform: scaleX(1); }
.kopf__link[aria-current="page"] { color: var(--ozean); }

.kopf__cta { flex: none; }

/* Untermenue "Kurse"
   ------------------
   Der Punkt bleibt ein echter Link auf die Uebersichtsseite; das Aufklappen
   uebernimmt ein eigener Knopf daneben. Beides in einem Element waere
   entweder kein Link mehr oder kein bedienbarer Umschalter. */
.kopf__punkt { position: relative; display: flex; align-items: center; gap: 2px; }

.kopf__pfeil {
  border: 0; background: none; padding: 6px 2px;
  font-size: 11px; line-height: 1; color: var(--text-hell);
  display: flex; align-items: center;
  transition: transform .2s ease, color .2s ease;
}
.kopf__pfeil:hover { color: var(--ozean); }
.kopf__punkt[data-offen="true"] .kopf__pfeil { transform: rotate(180deg); color: var(--ozean); }

.kopf__menu {
  position: absolute; top: 100%; left: -14px;
  min-width: 272px;
  background: #fff;
  border: 2px solid var(--rand); border-radius: var(--r-m);
  box-shadow: var(--schatten-m);
  padding: 8px;
  display: flex; flex-direction: column;
  /* Nur transform und opacity - kein display-Wechsel, der sich nicht
     animieren liesse, und kein height, das ein Layout ausloesen wuerde. */
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 5;
}
/* Unsichtbare Bruecke: ohne sie reisst der Hover im Abstand zwischen
   Kopfzeile und Klappe ab und das Menue schliesst auf halbem Weg. */
.kopf__menu::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.kopf__punkt:hover .kopf__menu,
.kopf__punkt:focus-within .kopf__menu,
.kopf__punkt[data-offen="true"] .kopf__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.kopf__menu a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px; border-radius: 12px;
  color: var(--tief); font-weight: 600; font-size: 15px;
}
.kopf__menu a:hover { background: var(--himmel); color: var(--ozean); }
.kopf__menu a[aria-current="page"] { background: var(--himmel); color: var(--ozean); }
.kopf__menu-meta { font-size: 12.8px; font-weight: 600; color: var(--text-hell); }
.kopf__menu a:hover .kopf__menu-meta { color: var(--ozean); }
.kopf__menu-trenner { height: 2px; background: var(--rand); margin: 6px 10px; border-radius: 2px; }

/* Burger
   ------
   Frueher weiss auf weiss mit hauchduennem Rand - auf einem hellen
   Kopfbereich kaum zu sehen. Jetzt eine gefuellte Schaltflaeche in der
   Signalfarbe mit Beschriftung, gross genug zum Treffen mit dem Daumen. */
/* Der Burger steht auf jeder Breite: Auf dem Desktop ergaenzt er die
   Navigationsleiste, damit dort dieselben Seiten erreichbar sind wie am
   Telefon. */
.burger {
  display: flex;
  align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 16px; flex: none;
  border: 0; border-radius: 14px;
  background: var(--ozean); color: #fff;
  font-weight: 700; font-size: 15px;
  box-shadow: var(--schatten-s);
  cursor: pointer;
}
.burger:hover { background: var(--ozean-h); }
.burger__striche { display: block; width: 21px; flex: none; }
.burger__striche span {
  display: block; width: 21px; height: 2.5px; border-radius: 2px;
  background: currentColor; margin: 4px auto;
  transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] .burger__striche span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__striche span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__striche span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.burger__text { line-height: 1; }

/* Ab hier ersetzt das Burger-Menue die Navigationsleiste. Die Buchen-
   Schaltflaeche bleibt zunaechst stehen - sie ist der wichtigste Weg der
   Seite und hat neben dem Burger noch Platz. */
@media (max-width: 1080px) {
  .kopf__nav { display: none; }
  .kopf__cta { margin-left: auto; }
}

/* Knapp oberhalb davon teilen sich Leiste, Buchen und Burger die Zeile -
   dort genuegt das Symbol. */
@media (min-width: 1081px) and (max-width: 1240px) {
  .burger { padding: 0 13px; }
  .burger__text { display: none; }
}

/* Auf schmalen Telefonen wird es neben Logo und Burger zu eng. Der Burger
   hat Vorrang vor der Buchen-Schaltflaeche: ueber ihn ist die Buchung
   weiterhin einen Fingertipp entfernt, umgekehrt waere die Navigation weg.
   Der Nachfahren-Selektor ist noetig, weil `.btn { display:inline-flex }`
   weiter unten in dieser Datei steht und eine Ein-Klassen-Regel schlagen
   wuerde - Media Queries erhoehen die Spezifitaet nicht. */
@media (max-width: 700px) {
  .kopf__inner .kopf__cta { display: none; }
  .kopf__inner .burger { margin-left: auto; }
}

@media (max-width: 560px) {
  .kopf__logo-bild { height: 42px; }
}

/* Ganz schmal bleibt nur das Symbol - der Umriss ist dann bekannt genug. */
@media (max-width: 380px) {
  .burger { padding: 0 13px; }
  .burger__text { display: none; }
}

/* Mobiles Menue */
/* Auch hier ohne Weichzeichner - gleicher Grund wie beim Kopf. Der
   Abdunkler ist dafuer etwas kraeftiger, damit der Inhalt dahinter
   trotzdem zurücktritt. */
.mobilnav {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(6, 42, 61, .55);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
}
.mobilnav[data-offen="true"] { opacity: 1; visibility: visible; }

.mobilnav__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  background: #fff;
  padding: 22px 22px 40px;
  overflow-y: auto;
  border-radius: var(--r-l) 0 0 var(--r-l);
  transform: translateX(102%); transition: transform .28s cubic-bezier(.4, 1.1, .5, 1);
  display: flex; flex-direction: column; gap: 6px;
}
.mobilnav[data-offen="true"] .mobilnav__panel { transform: translateX(0); }

.mobilnav__logo { margin-bottom: 14px; }
.mobilnav__logo img { height: 44px; width: auto; }

.mobilnav__gruppe {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-hell);
  margin: 16px 0 4px;
}
.mobilnav__link {
  display: block; padding: 10px 12px; border-radius: 12px;
  color: var(--tief); font-weight: 600;
}
.mobilnav__link:hover { background: var(--himmel); color: var(--ozean); }
.mobilnav__link[aria-current="page"] { background: var(--himmel); color: var(--ozean); }
.mobilnav__cta { margin-top: 18px; }

/* Schalter fuer die Seitenanimationen - im Menue und im Fussbereich */
.bewegung-schalter {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; background: none; padding: 8px 0;
  font: inherit; font-weight: 600; color: inherit;
  cursor: pointer;
}
.bewegung-schalter[hidden] { display: none; }
.bewegung-schalter__spur {
  position: relative; width: 42px; height: 24px; flex: none;
  border-radius: 12px; background: var(--ozean);
  transition: background .2s ease;
}
.bewegung-schalter__knopf {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transform: translateX(18px); transition: transform .2s ease;
}
.bewegung-schalter[aria-checked="false"] .bewegung-schalter__spur { background: #9aa9b1; }
.bewegung-schalter[aria-checked="false"] .bewegung-schalter__knopf { transform: none; }
.bewegung-schalter__stand { min-width: 2.2em; font-size: .9em; opacity: .8; }
.bewegung-schalter:focus-visible { outline: 3px solid var(--blase); outline-offset: 3px; border-radius: 8px; }
.bewegung-schalter:disabled { cursor: not-allowed; opacity: .6; }

.mobilnav .bewegung-schalter { margin-top: 14px; color: var(--tief); align-self: flex-start; }
.fuss .bewegung-schalter { padding: 0; }

/* --------------------------------------------------------------------------
   7. Schaltflaechen
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  border: 0; border-radius: 999px;
  font-weight: 700; font-size: 16.5px; line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover  { transform: translateY(-2px) scale(1.03); }
.btn:active { transform: translateY(0) scale(.97); }

.btn--primaer { background: var(--ozean); color: #fff; box-shadow: 0 10px 24px rgba(15, 139, 163, .3); }
.btn--primaer:hover { background: var(--ozean-h); color: #fff; }

.btn--koralle { background: var(--koralle); color: #fff; box-shadow: 0 10px 24px rgba(255, 122, 89, .34); }
.btn--koralle:hover { background: #f4633f; color: #fff; }

.btn--sonne { background: var(--sonne); color: var(--tief); box-shadow: 0 10px 24px rgba(255, 207, 77, .4); }
.btn--sonne:hover { background: #ffc226; color: var(--tief); }

.btn--rand { background: #fff; color: var(--tief); border: 2.5px solid var(--rand); }
.btn--rand:hover { border-color: var(--blase); color: var(--ozean); }

.btn--geist { background: rgba(255, 255, 255, .14); color: #fff; border: 2px solid rgba(255, 255, 255, .5); }
.btn--geist:hover { background: #fff; color: var(--tief); }

.btn--klein { padding: 10px 18px; font-size: 15px; }
.btn--breit { width: 100%; }

.btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   8. Wiederkehrende Textbausteine
   -------------------------------------------------------------------------- */

.augenbraue {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--koralle);
  margin-bottom: 12px;
}
.augenbraue::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--schiller); flex: none;
}
.augenbraue--hell { color: var(--sonne); }

.titel-xl { font-size: clamp(2.3rem, 5.6vw, 4.1rem); }
.titel-l  { font-size: clamp(1.9rem, 3.8vw, 2.85rem); }
.titel-m  { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.titel-s  { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.62; color: var(--text); }
.lead--hell { color: #bfe7f3; }

.kopfblock { max-width: 40em; margin-bottom: clamp(26px, 4vw, 44px); }
.kopfblock--mitte { margin-inline: auto; text-align: center; }
.kopfblock--mitte .augenbraue { justify-content: center; }

/* Gemalter Marker hinter einem Wort - traegt den verspielten Ton.
   Bewusst als Hintergrund des Inline-Elements und nicht als Pseudo-Element
   mit z-index:-1: Letzteres verschwindet hinter dem deckenden Hintergrund
   des umgebenden Abschnitts. */
.betont {
  display: inline;
  color: var(--tief);
  padding: 0 .12em;
  border-radius: 6px;
  background-image: linear-gradient(to top, var(--sonne) 0%, var(--sonne) 34%, transparent 34%);
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.betont--blase { background-image: linear-gradient(to top, var(--blase) 0%, var(--blase) 34%, transparent 34%); }
.betont--koralle { background-image: linear-gradient(to top, var(--koralle-2) 0%, var(--koralle-2) 34%, transparent 34%); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: linear-gradient(170deg, rgba(236, 251, 255, .5) 0%, rgba(217, 244, 252, .12) 60%, rgba(203, 238, 248, 0) 100%);
  overflow: hidden;
  padding: clamp(34px, 5vw, 64px) 0 clamp(70px, 9vw, 118px);
}

/* Die farbigen Kleckse sind ausgeblendet: vor dem Unterwasser-Hintergrund
   wirkten sie wie Flecken auf der Scheibe. Das Markup steht noch in den
   Seiten; hier bleibt nur die Regel, die es versteckt. */
.hero__klecks { display: none; }

.hero__inner { position: relative; z-index: 2; }

.hero--start .hero__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 4.5vw, 58px);
  align-items: center;
}

.hero__logo {
  width: min(100%, 480px);
  margin-bottom: 20px;
}
/* Das Logo schwimmt. Die Klasse setzt site.js erst nach dem Intro - die
   FLIP-Messung soll auf einem ruhenden Logo landen. */
.hero__logo.treibt { animation: bm-treiben 5.5s ease-in-out infinite; }
@keyframes bm-treiben {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-7px) rotate(-1deg); }
  65%      { transform: translateY(3px) rotate(.8deg); }
}

.hero__text { min-width: 0; }
.hero__lead { margin-top: 18px; max-width: 32em; }
.hero__aktionen { margin-top: 30px; }

.hero__marken { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.merkmal {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 2px solid var(--rand);
  padding: 9px 16px; border-radius: 999px;
  font-weight: 600; font-size: 14.5px; color: var(--text);
}
.merkmal__punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.merkmal__punkt--blase   { background: var(--blase); }
.merkmal__punkt--sonne   { background: var(--sonne); }
.merkmal__punkt--koralle { background: var(--koralle); }
.merkmal__punkt--limette { background: var(--limette); }

.hero__medien { position: relative; min-width: 0; }

.hero__rahmen {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: clamp(30px, 4vw, 52px);
  overflow: hidden;
  box-shadow: var(--schatten-l);
  border: 6px solid #fff;
  rotate: 1.6deg;
}
.hero__bild { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.hero__karte {
  position: absolute; bottom: -22px; left: -18px;
  background: #fff; border-radius: var(--r-m);
  padding: 15px 20px; max-width: 250px;
  box-shadow: var(--schatten-m);
  rotate: -2.5deg;
}
.hero__karte-titel { font-weight: 700; font-size: 18px; line-height: 1.15; color: var(--tief); }
.hero__karte-meta { font-size: 13.5px; color: var(--text-hell); margin-top: 5px; font-weight: 600; }

/* Aufkleber, absichtlich schief - Kinderzimmer-Optik */
.aufkleber {
  position: absolute; z-index: 3;
  background: var(--sonne); color: var(--tief);
  font-weight: 700; font-size: 15px; line-height: 1.15;
  padding: 12px 16px; border-radius: 18px;
  box-shadow: var(--schatten-m);
  text-align: center;
  rotate: -8deg;
}
.aufkleber--koralle { background: var(--koralle); color: #fff; }
.aufkleber--blase { background: var(--blase); color: var(--tief); }
.aufkleber--oben-rechts { top: -14px; right: -10px; rotate: 7deg; }

/* Kompakter Hero der Unterseiten. Die Breitenbegrenzung gilt nur ohne Bild -
   mit Bild ist der Hero zweispaltig und braucht die volle Spaltenbreite. */
.hero--unter { padding: clamp(30px, 4vw, 52px) 0 clamp(58px, 7vw, 92px); }
.hero--unter:not(.hero--start) .hero__inner { max-width: 760px; }
.hero--unter .hero__lead { max-width: 40em; }
.hero--unter .hero__rahmen { aspect-ratio: 4 / 3.2; }

.krumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-hell);
  margin-bottom: 16px;
}
.krumen a { color: var(--ozean); }
.krumen span { opacity: .5; }

/* Wellen-Trenner am Fuss eines Hero */
.welle {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  height: clamp(40px, 5vw, 70px);
  line-height: 0; pointer-events: none; overflow: hidden;
}
/* Zwei Lagen, doppelt so breit wie der Bildschirm, laufen gegeneinander.
   Die Pfade wiederholen sich nach genau der halben Breite (build.ps1),
   darum springt beim Neubeginn nichts. */
.welle__lage {
  position: absolute; left: 0; bottom: 0;
  width: 200%; height: 100%;
  display: block;
  animation: bm-welle-lauf 16s linear infinite;
}
.welle__lage--hinten { animation-duration: 24s; animation-direction: reverse; }
/* Im Markup steht ein deckendes Creme. Unter jedem Hero folgt ein
   .abschnitt--creme, also bekommt die Welle genau dessen Schleier - sonst
   laege ein undurchsichtiger Streifen ueber dem Wasser. Beide Lagen
   ueberdecken sich am unteren Rand: .08 und .196 ergeben zusammen genau
   die .26 des Abschnitts, damit dort keine Kante sichtbar wird. */
.welle__lage path { fill: rgba(244, 253, 255, .196); fill-opacity: 1; }
.welle__lage--hinten path { fill: rgba(244, 253, 255, .08); }

/* Dunkle Abschnitte bekommen oben und unten eine laufende Welle, die in
   den hellen Nachbarn hineinschwappt. Ein Pseudo-Element mit Maske statt
   zusaetzlichem Markup - so gilt es fuer jeden dunklen Abschnitt. */
.abschnitt--tief::before,
.abschnitt--tief::after {
  content: ''; position: absolute; left: 0; z-index: 1;
  width: calc(100% + 720px); height: 22px;
  background: var(--tief);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12C120 0 240 0 360 12S600 24 720 12V22H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 720px 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12C120 0 240 0 360 12S600 24 720 12V22H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 720px 100%;
  animation: bm-welle-schiebt 9s linear infinite;
  pointer-events: none;
}
/* Die Wellenstreifen sind breiter als der Abschnitt. Nur waagrecht
   abschneiden - nach oben und unten sollen sie ja hinausragen. Ohne das
   vergroessern Mobilbrowser den Layout-Viewport, und alles Fixierte
   (Tiefenmesser, Kugelfisch) rutscht aus dem Bild. */
.abschnitt--tief { overflow-x: clip; }
.abschnitt--tief::before { top: -21px; }
/* Gedreht laeuft die Verschiebung sichtbar nach rechts - darum startet
   diese Lage eine Wellenlaenge weiter links, sonst klaffte dort eine Luecke. */
.abschnitt--tief::after  { bottom: -21px; left: -720px; rotate: 180deg; animation-duration: 12s; }
@keyframes bm-welle-schiebt {
  from { transform: translateX(0); }
  to   { transform: translateX(-720px); }
}

/* --------------------------------------------------------------------------
   10. Karten
   -------------------------------------------------------------------------- */

.karte {
  background: #fff;
  border: 2px solid var(--rand);
  border-radius: var(--r-l);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--schatten-s);
  transition: transform .2s cubic-bezier(.3, 1.3, .5, 1), box-shadow .2s ease, border-color .2s ease;
  height: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.karte:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: var(--schatten-m); border-color: var(--blase); }

.karte__nummer {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 20px; color: #fff;
  flex: none;
}
.karte__nummer--1 { background: var(--blase); color: var(--tief); }
.karte__nummer--2 { background: var(--ozean); }
.karte__nummer--3 { background: var(--koralle); }
.karte__nummer--4 { background: var(--sonne); color: var(--tief); }
.karte__nummer--5 { background: var(--beere); }
.karte__nummer--6 { background: var(--lavendel); }

.karte__emoji {
  width: 56px; height: 56px; border-radius: 20px;
  display: grid; place-items: center;
  font-size: 27px; flex: none;
  background: var(--himmel);
  rotate: -4deg;
}
.karte__emoji--sonne { background: var(--sonne-2); }
.karte__emoji--koralle { background: var(--koralle-2); }
.karte__emoji--limette { background: #e9f9e2; }
.karte__emoji--lavendel { background: #f0e9ff; }

.karte__text { color: var(--text); font-size: 15.8px; margin: 0; }
.karte__text--klein { font-size: 15px; }

/* Kurskarte mit Bild */
.kurskarte {
  background: #fff; border: 2px solid var(--rand);
  border-radius: var(--r-l); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--schatten-s);
  transition: transform .2s cubic-bezier(.3, 1.3, .5, 1), box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.kurskarte:hover { transform: translateY(-6px); box-shadow: var(--schatten-m); border-color: var(--blase); }
.kurskarte--betont { border-color: var(--blase); border-width: 3px; }

.kurskarte__medien { position: relative; height: 205px; background: var(--himmel); }
.kurskarte__bild { width: 100%; height: 100%; object-fit: cover; }

.kurskarte__fahne {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: var(--koralle); color: #fff;
  font-weight: 700; font-size: 13px;
  padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255, 122, 89, .4);
  rotate: 3deg;
}

.kurskarte__body { padding: clamp(20px, 2.6vw, 26px); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.kurskarte__titel { font-size: 1.55rem; }
.kurskarte__text { color: var(--text); font-size: 15.6px; margin: 0; }
.kurskarte__cta { margin-top: auto; align-self: flex-start; }

/* Etiketten */
.etiketten { display: flex; flex-wrap: wrap; gap: 8px; }
.etikett {
  font-weight: 700; font-size: 12.8px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--himmel); color: var(--ozean);
}
.etikett--alter   { background: var(--himmel); color: var(--ozean); }
.etikett--stufe   { background: var(--sonne-2); color: #9a6a06; }
.etikett--dauer   { background: var(--koralle-2); color: #b64a2c; }
.etikett--brevet  { background: #e9f9e2; color: #467a2c; }
.etikett--preis   { background: var(--tief); color: #fff; }

/* --------------------------------------------------------------------------
   11. Preise
   -------------------------------------------------------------------------- */

.preis {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 700; color: var(--tief);
}
.preis__zahl { font-size: clamp(2rem, 3.6vw, 2.7rem); line-height: 1; letter-spacing: -.02em; }
.preis__einheit { font-size: 15px; font-weight: 600; color: var(--text-hell); }

.preis-karte {
  --karten-polster: clamp(22px, 3vw, 30px);
  background: #fff; border: 2px solid var(--rand);
  border-radius: var(--r-l); padding: var(--karten-polster);
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--schatten-s); height: 100%;
  position: relative; overflow: hidden;
  transition: transform .2s cubic-bezier(.3, 1.3, .5, 1), box-shadow .2s ease, border-color .2s ease;
}
.preis-karte:hover { transform: translateY(-5px); box-shadow: var(--schatten-m); border-color: var(--blase); }
.preis-karte--betont { border-color: var(--sonne); border-width: 3px; background: linear-gradient(180deg, #fffaef 0%, #fff 40%); }

/* Bildstreifen am Kartenkopf. Zieht sich ueber das Innenpolster hinweg bis
   an den Rand - deshalb das negative Aussenmass in Polsterbreite.
   Die Hoehe waechst ueber das Seitenverhaeltnis mit der Kartenbreite mit: bei
   einer festen Hoehe bleibt von einem 4:3-Foto in einer breiten Karte nur ein
   schmaler Mittelstreifen uebrig, in dem das Motiv nicht mehr erkennbar ist. */
.preis-karte__medien {
  margin: calc(var(--karten-polster) * -1) calc(var(--karten-polster) * -1) 2px;
  flex: none; line-height: 0; background: var(--himmel);
  border-bottom: 2px solid var(--rand);
}
.preis-karte__bild {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 1; object-fit: cover;
}

.preis-karte__titel { font-size: 1.28rem; color: var(--tief); }
/* Die Karte bleibt weiss, auch wenn der Abschnitt dunkel ist - die helle
   Ueberschriftenfarbe von .abschnitt--tief waere hier unsichtbar. */
.abschnitt--tief .preis-karte { color: var(--text); }
.abschnitt--tief .preis-karte h2,
.abschnitt--tief .preis-karte h3,
.abschnitt--tief .preis-karte h4 { color: var(--tief); }
.preis-karte__unter { font-size: 14.6px; color: var(--text-hell); font-weight: 600; margin: 0; }
.preis-karte__spar {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  background: #e9f9e2; color: #3f7527;
  font-weight: 700; font-size: 13.5px;
  padding: 6px 13px; border-radius: 999px;
}

/* Hinweis auf die Foerderung durch Funny Divers. Steht ueberall dort, wo
   ein Paketpreis genannt wird - der Preis ist der Grund, warum der Hinweis
   dorthin gehoert und nicht in eine Fussnote. */
.gesponsert {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--himmel);
  border: 2px solid var(--rand);
  border-radius: var(--r-m);
  padding: 12px 16px;
  font-size: 14.4px; line-height: 1.5; color: var(--text);
}
.gesponsert__icon { flex: none; font-size: 17px; line-height: 1.35; }
.gesponsert b { color: var(--tief); }

/* Als schmale Zeile unter einer Preiskarte, wo ein ganzer Kasten zu laut
   waere. */
.gesponsert--zeile {
  display: block; background: none; border: 0; padding: 0;
  font-size: 13.4px; color: var(--text-hell); font-weight: 600;
}

/* Preis-Tabelle */
.preistabelle { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.preistabelle th, .preistabelle td { padding: 14px 12px; text-align: left; border-bottom: 2px solid var(--rand); }
.preistabelle th { font-weight: 700; color: var(--tief); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.preistabelle td:last-child, .preistabelle th:last-child { text-align: right; white-space: nowrap; font-weight: 700; }
.preistabelle tr:last-child td { border-bottom: 0; }
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-m); }

/* --------------------------------------------------------------------------
   12. Listen
   -------------------------------------------------------------------------- */

.hakenliste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hakenliste li {
  position: relative; padding-left: 32px;
  font-size: 15.6px; color: var(--text); margin: 0;
}
.hakenliste li::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blase);
}
.hakenliste li::after {
  content: ''; position: absolute; left: 6.5px; top: 9.5px;
  width: 7px; height: 3.5px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}
.hakenliste--sonne li::before { background: var(--sonne); }
.hakenliste--sonne li::after { border-color: var(--tief); }
.hakenliste--hell li { color: #cfeef7; }

.punkteliste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.punkteliste li { position: relative; padding-left: 22px; font-size: 15.6px; margin: 0; }
.punkteliste li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--koralle);
}

/* Voraussetzungs-Kasten - steht auf jeder Kursseite */
.voraussetzungen {
  background: var(--himmel);
  border: 2.5px dashed var(--blase);
  border-radius: var(--r-l);
  padding: clamp(20px, 3vw, 28px);
}
.voraussetzungen__titel { font-size: 1.2rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.voraussetzungen__raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px;
}
.voraussetzungen__label { font-size: 12.6px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ozean); }
.voraussetzungen__wert { font-weight: 600; font-size: 16px; color: var(--tief); margin-top: 3px; }

/* Faktenzeile */
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; text-align: center; }
.fakt__zahl { font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: var(--ozean); }
.fakt__text { font-size: 14.6px; font-weight: 600; color: var(--text-hell); margin-top: 7px; }
.abschnitt--tief .fakt__zahl { color: var(--blase); }
.abschnitt--tief .fakt__text { color: #9dc9d8; }

/* --------------------------------------------------------------------------
   13. Schritte / Ablauf
   -------------------------------------------------------------------------- */

.schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.6vw, 28px); counter-reset: schritt; }
.schritt {
  background: #fff; border: 2px solid var(--rand); border-radius: var(--r-l);
  padding: 26px 24px 24px; position: relative; box-shadow: var(--schatten-s);
}
.schritt__nummer {
  position: absolute; top: -18px; left: 24px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--schiller);
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px; color: var(--tief);
  box-shadow: var(--schatten-s);
  border: 3px solid #fff;
}
.schritt__titel { font-size: 1.12rem; margin: 12px 0 8px; }
.schritt__text { font-size: 15.2px; color: var(--text); margin: 0; }

/* --------------------------------------------------------------------------
   14. Fragen-Akkordeon
   -------------------------------------------------------------------------- */

.fragen { display: flex; flex-direction: column; gap: 12px; }

.frage {
  background: #fff; border: 2px solid var(--rand);
  border-radius: var(--r-m); overflow: hidden;
  transition: border-color .2s ease;
}
.frage:has(.frage__knopf[aria-expanded="true"]) { border-color: var(--blase); }

.frage__knopf {
  width: 100%; background: none; border: 0;
  padding: 18px 22px;
  display: flex; align-items: center; gap: 16px;
  text-align: left; font-weight: 700; font-size: 1.06rem;
  color: var(--tief);
}
.frage__text { flex: 1; }
.frage__zeichen {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--himmel); color: var(--ozean);
  display: grid; place-items: center;
  font-size: 20px; line-height: 1; font-weight: 700;
  transition: transform .22s ease, background .2s ease;
}
.frage__knopf[aria-expanded="true"] .frage__zeichen { background: var(--blase); color: #fff; transform: rotate(180deg); }

.frage__antwort { padding: 0 22px 20px; color: var(--text); font-size: 15.8px; max-width: 62ch; }

/* --------------------------------------------------------------------------
   15. Kundenstimmen
   -------------------------------------------------------------------------- */

.stimme {
  background: #fff; border: 2px solid var(--rand); border-radius: var(--r-l);
  padding: clamp(22px, 3vw, 30px);
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  box-shadow: var(--schatten-s);
  position: relative;
}
.stimme::before {
  content: '\201C';
  position: absolute; top: 6px; right: 22px;
  font-size: 76px; line-height: 1; color: var(--himmel);
  font-weight: 700;
}
.stimme__sterne { color: var(--sonne); font-size: 18px; letter-spacing: 2px; }
.stimme__text { font-size: 16px; color: var(--text); margin: 0; position: relative; z-index: 1; }
.stimme__quelle { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.stimme__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--schiller);
  display: grid; place-items: center;
  font-weight: 700; color: var(--tief); font-size: 16px;
}
.stimme__name { font-weight: 700; color: var(--tief); font-size: 15.5px; line-height: 1.25; }
.stimme__meta { font-size: 13.6px; color: var(--text-hell); font-weight: 600; }

.stimme--platzhalter { border-style: dashed; background: #fbfeff; }
.stimme--platzhalter .stimme__text { color: var(--text-hell); font-style: italic; }

/* --------------------------------------------------------------------------
   16. Blog
   -------------------------------------------------------------------------- */

.beitrag-karte {
  background: #fff; border: 2px solid var(--rand); border-radius: var(--r-l);
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
  box-shadow: var(--schatten-s);
  transition: transform .2s cubic-bezier(.3, 1.3, .5, 1), box-shadow .2s ease, border-color .2s ease;
}
.beitrag-karte:hover { transform: translateY(-5px); box-shadow: var(--schatten-m); border-color: var(--blase); }
.beitrag-karte__medien { height: 180px; background: var(--himmel); }
.beitrag-karte__medien img { width: 100%; height: 100%; object-fit: cover; }
.beitrag-karte__body { padding: 22px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.beitrag-karte__meta { font-size: 13.4px; font-weight: 600; color: var(--text-hell); }
.beitrag-karte__titel { font-size: 1.24rem; }
.beitrag-karte__titel a { color: var(--tief); }
.beitrag-karte__titel a:hover { color: var(--ozean); }
.beitrag-karte__text { font-size: 15.2px; color: var(--text); margin: 0; }
.beitrag-karte__mehr { margin-top: auto; font-weight: 700; font-size: 15px; }

/* Fliesstext eines Beitrags oder einer Rechtsseite */
.fliesstext { max-width: 68ch; }
.fliesstext h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin: 2em 0 .6em; }
.fliesstext h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin: 1.6em 0 .5em; }
.fliesstext h2:first-child, .fliesstext h3:first-child { margin-top: 0; }
.fliesstext p, .fliesstext ul, .fliesstext ol { font-size: 16.8px; }
.fliesstext ul, .fliesstext ol { padding-left: 1.3em; }
.fliesstext li { margin-bottom: .55em; }
.fliesstext code {
  background: var(--himmel); border-radius: 6px; padding: 2px 7px;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .88em;
}

.merksatz {
  background: var(--sonne-2);
  border-left: 6px solid var(--sonne);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: 20px 24px;
  margin: 1.8em 0;
  font-weight: 600; color: #6b4c05;
}
.merksatz--blase { background: var(--himmel); border-left-color: var(--blase); color: var(--tief); }
.merksatz--koralle { background: var(--koralle-2); border-left-color: var(--koralle); color: #8f3a1e; }

/* --------------------------------------------------------------------------
   17. Rechtsseiten
   -------------------------------------------------------------------------- */

.recht-block { margin-bottom: 2.4em; }
.recht-block h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: .55em; }

.recht-dl { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 10px 22px; margin: 0; font-size: 16.2px; }
.recht-dl dt { font-weight: 700; color: var(--text-hell); }
.recht-dl dd { margin: 0; color: var(--text); }
@media (max-width: 620px) {
  .recht-dl { grid-template-columns: 1fr; gap: 2px; }
  .recht-dl dd { margin-bottom: 12px; }
}

.recht-stand { font-size: 14.5px; color: var(--text-hell); font-weight: 600; margin-top: 2.5em; }

/* --------------------------------------------------------------------------
   18. Formulare
   -------------------------------------------------------------------------- */

.formkarte {
  background: #fff; border: 2px solid var(--rand);
  border-radius: var(--r-l); padding: clamp(22px, 3.4vw, 36px);
  box-shadow: var(--schatten-m);
}

.feld { margin-bottom: 20px; }
.feld > label, .feld__label {
  display: block; font-weight: 700; font-size: 14.6px;
  color: var(--tief); margin-bottom: 8px;
}
.feld .optional { font-weight: 600; color: var(--text-hell); font-size: 13.4px; }

.eingabe {
  width: 100%;
  border: 2px solid var(--rand); border-radius: var(--r-s);
  padding: 13px 15px;
  background: #fbfeff; color: var(--tief);
  font-weight: 500;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.eingabe:focus { outline: none; border-color: var(--blase); box-shadow: 0 0 0 4px rgba(53, 214, 232, .18); }
.eingabe::placeholder { color: #9fbecb; font-weight: 400; }
textarea.eingabe { min-height: 110px; resize: vertical; }
select.eingabe { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8ba3' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 42px; }

.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }

/* Kurs-Auswahl als Chips */
.kurswahl { display: flex; flex-direction: column; gap: 20px; }
.kurswahl__gruppe-titel {
  font-size: 12.6px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-hell); margin-bottom: 10px;
}
.kurswahl__optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }

.chip {
  display: flex; align-items: center; gap: 11px;
  border: 2px solid var(--rand); border-radius: var(--r-m);
  padding: 13px 15px; background: #fbfeff;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.chip:hover { border-color: var(--blase); transform: translateY(-2px); }
.chip input { flex: none; width: 20px; height: 20px; accent-color: var(--ozean); margin: 0; }
.chip__text { display: flex; flex-direction: column; line-height: 1.25; }
.chip__name { font-weight: 700; font-size: 15.4px; color: var(--tief); }
.chip__meta { font-size: 13.2px; color: var(--text-hell); font-weight: 600; margin-top: 2px; }
.chip:has(input:checked) { border-color: var(--ozean); background: var(--himmel); }

/* Auswahl plus Info-Knopf.
   Der Knopf steht bewusst NEBEN dem Label und nicht darin: ein Klick auf
   irgendetwas innerhalb eines <label> schaltet das zugehoerige Ankreuzfeld
   um - man wuerde den Kurs buchen, waehrend man nur nachlesen wollte. */
.wahl { display: flex; align-items: stretch; gap: 8px; }
.wahl .chip { flex: 1; min-width: 0; }

.wahl__info {
  flex: none; width: 42px;
  border: 2px solid var(--rand); border-radius: var(--r-m);
  background: #fff; color: var(--ozean);
  font-weight: 700; font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.wahl__info:hover { border-color: var(--blase); background: var(--himmel); }

/* --------------------------------------------------------------------------
   18b. Info-Fenster (Kursinfos auf der Buchungsseite)
   Ein einziges Fenster im Dokument, das je nach Knopf neu befuellt wird -
   dreissig vorgehaltene Dialoge waeren dreissig Mal derselbe Aufbau.
   -------------------------------------------------------------------------- */

.infofenster {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  padding: clamp(14px, 4vw, 34px);
  background: rgba(6, 42, 61, .55);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.infofenster[data-offen="true"] { opacity: 1; visibility: visible; }

.infofenster__karte {
  position: relative;
  width: min(100%, 560px);
  max-height: min(84vh, 720px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 2px solid var(--rand); border-radius: var(--r-l);
  box-shadow: var(--schatten-l);
  padding: clamp(22px, 3.4vw, 32px);
  transform: translateY(14px) scale(.97);
  transition: transform .22s cubic-bezier(.3, 1.15, .5, 1);
}
.infofenster[data-offen="true"] .infofenster__karte { transform: none; }

.infofenster__zu {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px;
  border: 2px solid var(--rand); border-radius: 12px;
  background: #fff; color: var(--tief);
  font-size: 19px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}
.infofenster__zu:hover { border-color: var(--koralle); color: var(--koralle); }

.infofenster__titel { font-size: 1.32rem; padding-right: 48px; }
.infofenster__lead { font-size: 15.4px; color: var(--text); margin: 12px 0 0; }

.infofenster__daten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  background: var(--himmel);
  border: 2.5px dashed var(--blase);
  border-radius: var(--r-m);
  padding: 16px 18px;
  margin-top: 18px;
}
.infofenster__label {
  font-size: 12.2px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-hell); margin-bottom: 3px;
}
.infofenster__wert { font-size: 14.8px; font-weight: 600; color: var(--tief); line-height: 1.4; }

.infofenster__abschnitt { margin-top: 18px; }
.infofenster__abschnitt-titel {
  font-size: 12.2px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-hell); margin-bottom: 9px;
}
.infofenster__fuss { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Ankreuzfeld mit Beschreibung */
.ankreuz {
  display: flex; align-items: flex-start; gap: 13px;
  border: 2px solid var(--rand); border-radius: var(--r-m);
  padding: 15px 17px; background: #fbfeff;
  transition: border-color .18s ease, background .18s ease;
}
.ankreuz:hover { border-color: var(--blase); }
.ankreuz input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ozean); }
.ankreuz__text b { display: block; font-size: 15.4px; color: var(--tief); }
.ankreuz__text span { display: block; font-size: 14px; color: var(--text-hell); margin-top: 2px; }
.ankreuz:has(input:checked) { border-color: var(--ozean); background: var(--himmel); }

/* Buchungspositionen: je Auswahl ein Block mit Datum und Personenzahl */
.positionen { display: flex; flex-direction: column; gap: 14px; }
.position {
  border: 2px solid var(--rand); border-radius: var(--r-m);
  padding: 16px 18px; background: #fff;
}
.position__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.position__name { font-weight: 700; font-size: 15.8px; color: var(--tief); }
.position__preis { font-weight: 700; font-size: 15.4px; color: var(--ozean); white-space: nowrap; }
.position__felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.position__label { font-size: 12.6px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-hell); margin-bottom: 6px; display: block; }

.zaehler { display: flex; align-items: center; gap: 10px; }
.zaehler__knopf {
  width: 40px; height: 40px; flex: none;
  border: 2px solid var(--rand); border-radius: 12px;
  background: #fff; color: var(--ozean);
  font-size: 20px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  transition: border-color .16s ease, background .16s ease;
}
.zaehler__knopf:hover { border-color: var(--blase); background: var(--himmel); }
.zaehler__wert { min-width: 34px; text-align: center; font-weight: 700; font-size: 17px; color: var(--tief); }

/* Hinweise und Fehler */
.hinweis {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--himmel); border-radius: var(--r-s);
  padding: 12px 15px; font-size: 14.4px; color: var(--text);
  margin-top: 10px;
}
.hinweis--sonne { background: var(--sonne-2); color: #6b4c05; }
.hinweis__icon { flex: none; font-size: 16px; line-height: 1.4; }

.fehler { color: #c0392b; font-weight: 700; font-size: 14.4px; margin-top: 9px; }
.erfolg { color: #1a8f62; font-weight: 700; font-size: 15px; margin-top: 9px; }
.formnotiz { font-size: 13.6px; color: var(--text-hell); margin: 9px 0 0; }

.eingabe--fehler { border-color: #e08b7f; box-shadow: 0 0 0 4px rgba(224, 139, 127, .16); }

/* Fieldsets in Formularen sehen aus wie jedes andere Feld */
fieldset.feld { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.feld > legend { padding: 0; }

/* Begleitperson beim Bubblemaker */
.begleitung__notiz { margin: 0 0 12px; }
.begleitung__wahl { display: flex; flex-direction: column; gap: 10px; }

/* Riff-Check gegen Spam: Seifenblasen mit Meerestieren platzen lassen */
.riffcheck__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.riffcheck__frage { margin: 0; font-weight: 600; font-size: 15.4px; color: var(--tief); min-width: 0; }
.riffcheck__frage b { color: var(--ozean); }
.riffcheck__ziel { display: inline-block; width: 32px; height: 32px; vertical-align: -10px; margin-left: 2px; }
.riffcheck__ziel .riffbild { width: 100%; height: 100%; }

/* Die Szene: ein Stueck Riff mit Wasser, Licht, Seegras und Sand.
   Bewusst eine feste Hoehe statt aspect-ratio: zusammen mit einer
   Mindesthoehe leitet der Browser aus dem Seitenverhaeltnis eine
   Mindestbreite ab - auf dem Handy wurde dadurch das ganze Formular
   breiter als der Bildschirm. */
.riffcheck__riff {
  position: relative;
  width: 100%; min-width: 0;
  height: 230px;
  height: clamp(220px, 58vw, 290px);
  border: 2px solid var(--rand); border-radius: var(--r-m);
  background: linear-gradient(180deg, #45bddb 0%, #2396c6 34%, #176fa9 70%, #115c92 100%);
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.riffcheck__riff:focus { outline: none; }
.riffcheck__riff.eingabe--fehler { border-color: #e08b7f; box-shadow: 0 0 0 4px rgba(224, 139, 127, .16); }

.riffcheck__kulisse { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.riffcheck__licht {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(70% 45% at 50% -8%, rgba(255, 255, 255, .45), transparent 70%),
    linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, .11) 24%, transparent 31%),
    linear-gradient(82deg, transparent 52%, rgba(255, 255, 255, .09) 59%, transparent 67%),
    linear-gradient(96deg, transparent 70%, rgba(255, 255, 255, .07) 75%, transparent 80%);
}
.riffcheck__oberflaeche { position: absolute; top: 2%; left: 0; width: 100%; height: 13%; }
.riffcheck__grund { position: absolute; left: 0; bottom: 0; width: 100%; height: 44%; }
.riffcheck__seegras {
  position: absolute; bottom: 4%; left: 1%;
  height: 72%; width: 11%; min-width: 28px;
  transform-origin: 50% 100%;
  animation: bm-seegras 5s ease-in-out infinite;
}
.riffcheck__seegras--rechts { left: auto; right: 1%; height: 62%; animation-delay: -2.5s; }

/* kleine Luftperlen, die langsam nach oben steigen */
.riffcheck__perle {
  position: absolute; left: var(--x); bottom: 12%;
  width: var(--s); height: var(--s); border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .9) 0 22%, rgba(255, 255, 255, .08) 45%);
  animation: bm-perle var(--d) linear var(--v) infinite;
}

.riffcheck__tiere { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.riffcheck__tiere:empty::after {
  content: ""; position: absolute; left: 50%; top: 42%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0 7%, transparent 15%),
    radial-gradient(circle, transparent 56%, rgba(255, 255, 255, .18) 70%, rgba(255, 255, 255, .6) 98%);
  animation: bm-warten 1.4s ease-in-out infinite;
}

/* Eine Blase. Die Position (left/top) setzt das Skript; die Blase selbst
   bleibt ruhig, nur ihr Koerper treibt - so kommen sich Zentrierung und
   Animation nicht in die Quere. */
.riffblase {
  position: absolute;
  width: 13.5%; min-width: 48px; max-width: 72px;
  height: auto; aspect-ratio: 1 / 1;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
@supports not (aspect-ratio: 1 / 1) {
  .riffblase { width: 56px; height: 56px; }
}
.riffblase input {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 3; opacity: 0; margin: 0; padding: 0; cursor: pointer; border-radius: 50%;
  -webkit-appearance: none; appearance: none;
}
.riffblase:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 3px; }

.riffblase__koerper {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  pointer-events: none;
  animation: bm-treiben var(--dauer, 4s) ease-in-out calc(var(--i) * -.55s) infinite;
}
.riffblase--grund .riffblase__koerper { animation-name: bm-wippen; }

.riffblase__tier {
  display: block;
  width: 78%; height: 78%;
  transform: scaleX(var(--blick, 1));
  transition: width .25s cubic-bezier(.3, 1.6, .5, 1), height .25s cubic-bezier(.3, 1.6, .5, 1);
}
.riffbild { display: block; width: 100%; height: 100%; overflow: visible; }
.riffblase__name {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.riffblase__film {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, 0) 14%),
    radial-gradient(circle at 70% 78%, rgba(255, 255, 255, .55) 0 3%, rgba(255, 255, 255, 0) 7%),
    radial-gradient(circle, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .1) 66%, rgba(210, 245, 255, .38) 90%, rgba(255, 255, 255, .7) 99%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 3px 10px rgba(4, 40, 70, .18);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .22s ease;
}
.riffblase:hover .riffblase__film { transform: scale(1.06); }
/* schillernder Rand, dreht sich langsam wie ein echter Seifenfilm */
.riffblase__film::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 143, 208, .75), rgba(255, 214, 102, .6), rgba(142, 227, 106, .55), rgba(92, 220, 240, .75), rgba(180, 139, 255, .75), rgba(255, 143, 208, .75));
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 80%, #000 97%, transparent 100%);
          mask: radial-gradient(circle, transparent 62%, #000 80%, #000 97%, transparent 100%);
  opacity: .55;
  mix-blend-mode: screen;
  animation: bm-schillern 7s linear infinite;
}

/* Spritzer beim Platzen: ein Kranz feiner Troepfchen */
.riffblase__spritzer {
  position: absolute; top: -22%; right: -22%; bottom: -22%; left: -22%; z-index: 2; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 4%,  #fff 0 3%, transparent 4%),
    radial-gradient(circle at 83% 17%, #fff 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 96% 50%, #fff 0 3%, transparent 4%),
    radial-gradient(circle at 83% 83%, #fff 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 50% 96%, #fff 0 3%, transparent 4%),
    radial-gradient(circle at 17% 83%, #fff 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 4% 50%,  #fff 0 3%, transparent 4%),
    radial-gradient(circle at 17% 17%, #fff 0 2.5%, transparent 3.5%);
  opacity: 0;
}

/* geplatzt: Film weg, Troepfchen fliegen, das Tier ist frei */
.riffblase:has(input:checked) .riffblase__film { transform: scale(1.45); opacity: 0; }
.riffblase:has(input:checked) .riffblase__spritzer { animation: bm-spritzer .45s ease-out; }
.riffblase:has(input:checked) .riffblase__tier {
  width: 96%; height: 96%;
  -webkit-filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)) drop-shadow(0 2px 3px rgba(4, 40, 70, .25));
          filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)) drop-shadow(0 2px 3px rgba(4, 40, 70, .25));
}
.riffblase:has(input:checked) .riffbild { animation: bm-frei .5s cubic-bezier(.3, 1.5, .5, 1); }

.riffcheck__riff--neu .riffblase { animation: bm-auftauchen .55s cubic-bezier(.3, 1.4, .5, 1) calc(var(--i) * 50ms) backwards; }
.riffcheck__riff--wackel { animation: bm-riff-wackel .45s ease; }

@keyframes bm-treiben {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(3px, -5px); }
  66%      { transform: translate(-3px, -2px); }
}
@keyframes bm-wippen {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -2px); }
}
@keyframes bm-auftauchen {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes bm-schillern { to { transform: rotate(360deg); } }
@keyframes bm-spritzer {
  0%   { opacity: 1; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.15); }
}
@keyframes bm-frei {
  0%   { transform: translate(0, 0) rotate(0deg); }
  35%  { transform: translate(0, -12%) rotate(-10deg); }
  70%  { transform: translate(0, 2%) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes bm-seegras {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes bm-perle {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .8; }
  100% { transform: translate(6px, -190px); opacity: 0; }
}
@keyframes bm-warten {
  0%, 100% { transform: scale(.85); opacity: .6; }
  50%      { transform: scale(1); opacity: 1; }
}
@keyframes bm-riff-wackel {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@media (max-width: 420px) {
  .riffcheck__frage { font-size: 14.4px; }
  .riffcheck__ziel { width: 28px; height: 28px; vertical-align: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .riffblase__koerper, .riffcheck__riff--neu .riffblase, .riffblase__film::before,
  .riffblase:has(input:checked) .riffbild, .riffblase:has(input:checked) .riffblase__spritzer,
  .riffcheck__seegras, .riffcheck__perle, .riffcheck__tiere:empty::after,
  .riffcheck__riff--wackel { animation: none; }
  .riffcheck__perle { display: none; }
  .riffblase__tier, .riffblase__film { transition: none; }
}

.captcha-neu {
  width: 46px; height: 46px; flex: none;
  border: 2px solid var(--rand); border-radius: 12px;
  background: #fff; color: var(--ozean); font-size: 19px;
  display: grid; place-items: center;
}
.captcha-neu:hover { border-color: var(--blase); background: var(--himmel); }

/* Honeypot */
.honigtopf { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Seitenspalte der Buchung */
.buchung-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 40px);
  align-items: start;
}
@media (max-width: 940px) { .buchung-raster { grid-template-columns: 1fr; } }

.seitenkarte {
  background: #fff; border: 2px solid var(--rand);
  border-radius: var(--r-l); padding: clamp(22px, 3vw, 28px);
  box-shadow: var(--schatten-s);
}
.seitenkarte + .seitenkarte { margin-top: 20px; }
.seitenkarte__titel { font-size: 1.18rem; margin-bottom: 14px; }

.summe { display: flex; flex-direction: column; gap: 10px; }
.summe__zeile { display: flex; justify-content: space-between; gap: 14px; font-size: 15.2px; }
.summe__zeile > span:last-child { font-weight: 700; white-space: nowrap; }
.summe__gesamt {
  border-top: 2px solid var(--rand); padding-top: 13px; margin-top: 4px;
  font-size: 18px; font-weight: 700; color: var(--tief);
}
.summe__rabatt { color: #3f7527; }

/* Automatisch erkannte Sparpakete */
.summe__name { display: block; }
.summe__zusatz { display: block; margin-top: 2px; font-size: 12.8px; font-weight: 700; color: #3f7527; }
.summe__zeile--paket > span:last-child { color: var(--tief); }
.summe__tipp {
  display: flex; align-items: flex-start; gap: 9px;
  background: #e9f9e2; border: 2px dashed #a9dd8f; border-radius: var(--r-s);
  padding: 10px 13px; font-size: 13.8px; line-height: 1.45; color: #2f5a1c;
  animation: bm-chip-plopp .3s ease-out;
}
.summe__tipp b { color: #2f5a1c; }
.summe__tipp-icon { flex: none; font-size: 18px; line-height: 1.2; }

/* Preisuebersicht der Buchungsseite.
   Am Desktop laeuft sie in der Seitenspalte mit: Die Spalte wird dafuer so
   hoch wie das Formular gestreckt, die Karte klebt unter der Kopfleiste.
   Die maximale Hoehe haelt eine lange Auswahl im Bild, der Rest scrollt
   innerhalb der Karte. */
.buchung-raster > .side-col { align-self: stretch; }
.preiskarte__leiste { display: none; }

@media (min-width: 941px) {
  .preiskarte {
    position: sticky; top: calc(var(--kopf-hoehe) + 20px);
    max-height: calc(100vh - var(--kopf-hoehe) - 40px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}

/* Auf schmalen Bildschirmen steht die Spalte unter dem Formular - dort
   gaebe es nichts, woran die Karte kleben koennte. Sie parkt deshalb als
   Leiste mit der laufenden Summe am unteren Rand und klappt per Tipp auf.
   Solange nichts gewaehlt ist, bleibt sie weg. */
@media (max-width: 940px) {
  :root { --preisleiste-h: 62px; }
  .preiskarte {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    margin: 0 !important;
    padding: 0 18px;
    border-radius: 22px 22px 0 0; border-bottom: 0;
    box-shadow: 0 -14px 40px rgba(6, 42, 61, .2);
    max-height: var(--preisleiste-h); overflow: hidden;
    transition: max-height .32s ease;
  }
  .preiskarte--leer { display: none; }
  .preiskarte--offen { max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
  .preiskarte__titel { display: none; }
  .preiskarte__inhalt { padding-bottom: 18px; }

  .preiskarte__leiste {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 10px;
    width: 100%; height: var(--preisleiste-h);
    padding: 0; border: 0; background: #fff;
    font: inherit; text-align: left; color: var(--tief);
  }
  .preiskarte__leiste-titel { font-weight: 700; font-size: 16px; }
  .preiskarte__leiste-summe { margin-left: auto; font-weight: 700; font-size: 17px; color: var(--ozean); }
  .preiskarte__pfeil { flex: none; font-size: 14px; color: var(--text-hell); transition: transform .3s ease; }
  .preiskarte--offen .preiskarte__pfeil { transform: rotate(180deg); }

  /* Fussbereich und Belohnungs-Fisch nicht unter der Leiste verstecken */
  body:has(.preiskarte:not(.preiskarte--leer)) { padding-bottom: var(--preisleiste-h); }
  body:has(.preiskarte:not(.preiskarte--leer)) .belohnung { bottom: calc(var(--preisleiste-h) + 14px); }
}

@media (max-width: 940px) and (prefers-reduced-motion: reduce) {
  .preiskarte, .preiskarte__pfeil { transition: none; }
}

/* Geschenk-Banner */
.geschenk {
  display: flex; align-items: center; gap: 12px;
  background: var(--schiller);
  border-radius: var(--r-m); padding: 15px 22px;
  font-weight: 700; color: var(--tief);
  margin-bottom: clamp(22px, 3vw, 30px);
  box-shadow: var(--schatten-s);
}
.geschenk__emoji { font-size: 24px; flex: none; }

/* --------------------------------------------------------------------------
   19. Kontaktzeilen
   -------------------------------------------------------------------------- */

.kontaktliste { display: flex; flex-direction: column; gap: 12px; }
.kontaktzeile {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 2px solid var(--rand);
  border-radius: var(--r-m); padding: 14px 17px;
  transition: border-color .18s ease, transform .18s ease;
}
.kontaktzeile:hover { border-color: var(--blase); transform: translateY(-2px); }
.kontaktzeile__icon {
  width: 44px; height: 44px; flex: none; border-radius: 14px;
  display: grid; place-items: center; font-size: 21px;
  background: var(--himmel);
}
.kontaktzeile__label { font-size: 12.8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-hell); }
.kontaktzeile__wert { font-weight: 700; font-size: 16.4px; color: var(--tief); }
.kontaktzeile a.kontaktzeile__wert:hover { color: var(--ozean); }

/* --------------------------------------------------------------------------
   20. Bildband
   -------------------------------------------------------------------------- */

.bildband {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 21 / 9; min-height: 280px;
  box-shadow: var(--schatten-m);
}
.bildband__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.bildband__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 42, 61, .85) 0%, rgba(6, 42, 61, .45) 48%, rgba(6, 42, 61, 0) 78%);
}
.bildband__inhalt {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: clamp(22px, 4vw, 48px);
  max-width: 36em;
}
.bildband__titel { color: #fff; font-size: clamp(1.4rem, 2.9vw, 2.3rem); }
.bildband__text { color: #d6f0f8; font-size: clamp(.98rem, 1.4vw, 1.08rem); font-weight: 500; }

/* --------------------------------------------------------------------------
   21. Aufruf-Band
   -------------------------------------------------------------------------- */

.aufruf {
  background: var(--tief);
  border-radius: var(--r-xl);
  padding: clamp(34px, 5vw, 62px) clamp(24px, 4vw, 54px);
  text-align: center;
  position: relative; overflow: hidden;
}
.aufruf::before {
  content: ''; position: absolute; top: -110px; left: 50%; transform: translateX(-50%);
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 214, 232, .22), transparent 68%);
  pointer-events: none;
}
.aufruf__inner { position: relative; z-index: 1; }
.aufruf__titel { color: #fff; margin-bottom: 14px; }
.aufruf__text { color: #bfe7f3; max-width: 44em; margin: 0 auto 26px; font-size: 1.06rem; }
.aufruf .btn-reihe { justify-content: center; }

/* --------------------------------------------------------------------------
   22. Vertrauensband
   -------------------------------------------------------------------------- */

.vertrauen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.vertrauen__item {
  background: #fff; border: 2px solid var(--rand); border-radius: var(--r-m);
  padding: 18px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.vertrauen__icon { font-size: 27px; }
.vertrauen__titel { font-weight: 700; font-size: 15.5px; color: var(--tief); line-height: 1.25; }
.vertrauen__text { font-size: 13.8px; color: var(--text-hell); font-weight: 600; }

/* Betreuungsschluessel: Instruktor plus Kinder als Figuren */
.schluessel {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap;
  background: var(--himmel); border-radius: var(--r-l);
  padding: clamp(24px, 3.4vw, 34px);
}
.schluessel__gruppe { display: flex; align-items: center; gap: 6px; }
.schluessel__figur { font-size: 34px; line-height: 1; }
.schluessel__figur--gross { font-size: 44px; }
.schluessel__doppelpunkt { font-size: 30px; font-weight: 700; color: var(--ozean); }
.schluessel__label { font-weight: 700; font-size: 15px; color: var(--tief); text-align: center; width: 100%; }

/* --------------------------------------------------------------------------
   23. Fussbereich
   -------------------------------------------------------------------------- */

.fuss {
  background: var(--tief);
  color: #a9d3e2;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: clamp(40px, 6vw, 76px);
  position: relative;
}

.fuss__raster {
  width: min(100% - clamp(32px, 8vw, 64px), var(--wrap));
  margin-inline: auto;
  padding: clamp(38px, 5vw, 62px) 0 clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.fuss__logo { height: 54px; width: auto; margin-bottom: 16px; }
.fuss__ueber { font-size: 14.8px; line-height: 1.65; max-width: 32em; }

.fuss__spalte-titel {
  color: #fff; font-weight: 700; font-size: 15.5px; margin-bottom: 14px;
}
.fuss__links { display: flex; flex-direction: column; gap: 9px; font-size: 14.8px; }
.fuss__links a { color: #a9d3e2; }
.fuss__links a:hover { color: var(--blase); }

.fuss__leiste { border-top: 1px solid rgba(169, 211, 226, .22); }
.fuss__leiste-inner {
  width: min(100% - clamp(32px, 8vw, 64px), var(--wrap));
  margin-inline: auto;
  padding: 18px 0;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13.6px;
}

/* --------------------------------------------------------------------------
   24. Einblenden beim Scrollen
   -------------------------------------------------------------------------- */

/* --verz setzt site.js: Was gleichzeitig in den Blick kommt, erscheint
   nacheinander. */
.zeig {
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.3, 1.1, .5, 1);
  transition-delay: var(--verz, 0ms);
}
.zeig.sichtbar { opacity: 1; transform: none; }

/* Karten tauchen auf statt nur einzublenden: von unten, leicht gedreht,
   ueber die Zielgroesse hinaus und zurueck.
   Als Animation mit fill "backwards" und nicht als Transition: Nach dem
   Auftauchen gehoert transform wieder der Hover-Regel der Karte - eine
   Animation mit "both" hielte es fuer immer fest. Die Hover-Transition
   selbst wird hier wiederhergestellt, weil .zeig sie sonst ueberschreibt. */
.karte.zeig, .kurskarte.zeig, .preis-karte.zeig, .schritt.zeig, .beitrag-karte.zeig, .vertrauen.zeig {
  transform: none;
  transition: transform .2s cubic-bezier(.3, 1.3, .5, 1), box-shadow .2s ease, border-color .2s ease;
}
.karte.zeig.sichtbar, .kurskarte.zeig.sichtbar, .preis-karte.zeig.sichtbar,
.schritt.zeig.sichtbar, .beitrag-karte.zeig.sichtbar, .vertrauen.zeig.sichtbar {
  animation: bm-auftauchen .75s cubic-bezier(.3, 1.2, .5, 1) var(--verz, 0ms) backwards;
}
@keyframes bm-auftauchen {
  0%   { opacity: 0; transform: translateY(46px) scale(.9) rotate(-2.5deg); }
  55%  { opacity: 1; transform: translateY(-6px) scale(1.03) rotate(.8deg); }
  80%  { transform: translateY(2px) scale(.99) rotate(-.3deg); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .zeig { opacity: 1; transform: none; }
}

/* Dasselbe, wenn jemand die Animationen ueber den Schalter abgeschaltet
   hat. site.js setzt data-bewegung="aus" schon im <head>. */
[data-bewegung="aus"] *, [data-bewegung="aus"] *::before, [data-bewegung="aus"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
}
[data-bewegung="aus"] { scroll-behavior: auto !important; }
[data-bewegung="aus"] .zeig { opacity: 1; transform: none; }
[data-bewegung="aus"] .bm-blasen, [data-bewegung="aus"] .bm-zeiger,
[data-bewegung="aus"] .logo-intro { display: none; }
[data-bewegung="aus"] .kopf__logo-bild { animation: none; }

/* --------------------------------------------------------------------------
   25. Kleinere Bildschirme
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .hero__rahmen { aspect-ratio: 4 / 3.4; rotate: 0deg; }
  .hero__karte { position: static; margin-top: 26px; rotate: 0deg; max-width: none; }
  .bildband { aspect-ratio: 4 / 3; }
  .bildband__schleier { background: linear-gradient(0deg, rgba(6, 42, 61, .9) 8%, rgba(6, 42, 61, .3) 62%, rgba(6, 42, 61, .1) 100%); }
  .fuss__raster { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 480px) {
  .btn { width: 100%; }
  .btn-reihe { flex-direction: column; }
  .aufkleber { display: none; }
}

/* --------------------------------------------------------------------------
   26. Druck
   -------------------------------------------------------------------------- */

@media print {
  .kopf, .fuss, .bm-blasen, .bm-zeiger, .logo-intro, .mobilnav, .welle,
  .infofenster, .tiefe, .tiefe-schleier, .route, .route__boot, .belohnung,
  .karussell__filter, .karussell__pfeil, .karussell__punkte, .wasser { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .zeig { opacity: 1; transform: none; animation: none !important; }
  .abschnitt--tief::before, .abschnitt--tief::after { display: none; }
}

/* --------------------------------------------------------------------------
   27. Paket-Karussell
   Grundform ohne JavaScript: eine Reihe zum Wischen. karussell.js setzt
   .karussell--js (Filter sichtbar) und .karussell--3d (Drehkarussell).
   -------------------------------------------------------------------------- */

.karussell { --breite: min(318px, 78vw); position: relative; }

.hakenliste--zeile {
  flex-direction: row; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; margin: -8px auto clamp(26px, 4vw, 40px);
}

.karussell__filter { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; }
.karussell--js .karussell__filter { display: flex; }

.karussell__chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2.5px solid var(--rand); background: #fff; color: var(--tief);
  font-weight: 700; font-size: 15px; line-height: 1;
  padding: 10px 14px 10px 16px; border-radius: 999px;
  transition: transform .18s cubic-bezier(.3, 1.5, .5, 1), background .2s ease, border-color .2s ease, color .2s ease;
}
.karussell__chip:hover { transform: translateY(-2px) rotate(-1.5deg); border-color: var(--blase); }
.karussell__chip:active { transform: scale(.95); }
.karussell__chip[aria-pressed="true"] { background: var(--tief); border-color: var(--tief); color: #fff; }
.karussell__anzahl {
  background: var(--himmel); color: var(--ozean);
  border-radius: 999px; font-size: 12.5px; padding: 3px 8px;
}
.karussell__chip[aria-pressed="true"] .karussell__anzahl { background: var(--sonne); color: var(--tief); }

.abschnitt--tief .karussell__chip { background: rgba(255, 255, 255, .07); color: #fff; border-color: rgba(255, 255, 255, .25); }
.abschnitt--tief .karussell__chip:hover { border-color: var(--blase); color: #fff; }
.abschnitt--tief .karussell__chip[aria-pressed="true"] { background: var(--sonne); border-color: var(--sonne); color: var(--tief); }
.abschnitt--tief .karussell__chip[aria-pressed="true"] .karussell__anzahl { background: var(--tief); color: var(--sonne); }

.karussell__hinweis {
  text-align: center; max-width: 42em; min-height: 3.2em;
  margin: 0 auto 6px;
  color: var(--text-hell); font-weight: 600; font-size: 15px; line-height: 1.5;
}
.abschnitt--tief .karussell__hinweis { color: #9dc9d8; }

.karussell__buehne { position: relative; }

.karussell__liste {
  list-style: none; margin: 0; padding: 12px 4px 26px;
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.karussell__karte { flex: 0 0 var(--breite); scroll-snap-align: center; margin: 0; }
.karussell__schwimmer { height: 100%; position: relative; }
.karussell__karte .preis-karte { height: 100%; }
.karussell__cta { margin-top: auto; align-self: flex-start; }
/* Im dunklen Abschnitt faerbt `.abschnitt--tief a` sonst die Schrift
   der Schaltflaeche blau - auf Koralle unlesbar. */
.karussell .karussell__cta, .karussell .karussell__cta:hover { color: #fff; }

.karussell__pfeil, .karussell__punkte { display: none; }

/* --- Drehkarussell ------------------------------------------------------ */

.karussell--3d .karussell__hinweis { min-height: 3em; }

.karussell--3d .karussell__buehne {
  /* Seitenkarten duerfen nicht ueber den Bildschirmrand hinausragen - aus
     demselben Grund wie bei den Wellen der dunklen Abschnitte. */
  overflow-x: clip;
  perspective: 1500px;
  perspective-origin: 50% 40%;
  padding: 26px 0 18px;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  cursor: grab;
}
.karussell--zieht .karussell__buehne { cursor: grabbing; }

.karussell--3d .karussell__liste {
  display: block; position: relative;
  height: var(--hoehe, 540px);
  padding: 0; overflow: visible;
  transform-style: preserve-3d;
}

.karussell--3d .karussell__karte {
  position: absolute; top: 0; left: 50%;
  width: var(--breite); height: 100%;
  margin-left: calc(var(--breite) / -2);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Beim Messen der natuerlichen Kartenhoehe */
.karussell--messen .karussell__karte,
.karussell--messen .karussell__schwimmer,
.karussell--messen .karussell__karte .preis-karte { height: auto !important; }

/* Wippen wie auf Wellen. Liegt auf einem eigenen Element, weil das
   transform der Karte selbst in jedem Bild vom Skript gesetzt wird. */
.karussell--3d .karussell__schwimmer {
  animation: bm-schwimmen 3.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.62s);
}
@keyframes bm-schwimmen {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(.7deg); }
}

.karussell--3d .karussell__karte .preis-karte {
  box-shadow: var(--schatten-m);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.karussell--3d .karussell__karte .preis-karte:hover { transform: none; }
.karussell--3d .karussell__karte--vorn .preis-karte { box-shadow: 0 30px 60px rgba(6, 42, 61, .28); border-color: var(--blase); }

/* Die hinteren Karten treten zurueck. Eine Deckschicht statt eines
   Filters, der in jedem Bild neu gerechnet werden muesste. */
.karussell--3d .karussell__schwimmer::after {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--r-l);
  background: rgba(6, 42, 61, .22);
  opacity: 1; transition: opacity .35s ease;
  pointer-events: none;
}
.abschnitt--tief .karussell--3d .karussell__schwimmer::after { background: rgba(6, 42, 61, .45); }
.karussell--3d .karussell__karte--vorn .karussell__schwimmer::after { opacity: 0; }
.karussell--3d .karussell__karte:not(.karussell__karte--vorn) { cursor: pointer; }

/* Blasen, die hinter der gerade eingerasteten Karte aufsteigen */
.karussell--3d .karussell__schwimmer::before {
  content: ''; position: absolute; left: -14%; right: -14%; bottom: 0; height: 70%;
  background:
    radial-gradient(circle at 10% 90%, rgba(138, 233, 244, .9) 0 7px, transparent 8px),
    radial-gradient(circle at 22% 70%, rgba(255, 255, 255, .85) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 85%, rgba(180, 139, 255, .75) 0 9px, transparent 10px),
    radial-gradient(circle at 78% 60%, rgba(255, 255, 255, .85) 0 5px, transparent 6px),
    radial-gradient(circle at 95% 40%, rgba(53, 214, 232, .8) 0 6px, transparent 7px),
    radial-gradient(circle at 4% 45%, rgba(255, 143, 208, .7) 0 5px, transparent 6px);
  opacity: 0; transform: translateZ(-1px);
  pointer-events: none;
}
.karussell--3d .karussell__karte--blubb .karussell__schwimmer::before {
  animation: bm-karten-blasen 1.3s cubic-bezier(.3, .6, .4, 1) both;
}
@keyframes bm-karten-blasen {
  0%   { opacity: 0; transform: translateY(20px) scale(.8); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-160px) scale(1.15); }
}

/* Neue Filterauswahl: kurz abtauchen und auftauchen */
.karussell--platsch .karussell__liste { animation: bm-karussell-platsch .65s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes bm-karussell-platsch {
  0%   { opacity: 0; transform: translateY(40px) scale(.94); }
  100% { opacity: 1; transform: none; }
}

.karussell--3d .karussell__pfeil {
  display: grid; place-items: center;
  position: absolute; top: 50%; z-index: 200;
  width: 54px; height: 54px; padding: 0 0 4px;
  border-radius: 50%; border: 2.5px solid var(--rand);
  background: #fff; color: var(--tief);
  font-size: 34px; font-weight: 700; line-height: 1;
  box-shadow: var(--schatten-m);
  transform: translateY(-50%);
  transition: transform .18s cubic-bezier(.3, 1.5, .5, 1), border-color .2s ease, color .2s ease;
}
.karussell--3d .karussell__pfeil:hover { border-color: var(--blase); color: var(--ozean); transform: translateY(-50%) scale(1.1); }
.karussell--3d .karussell__pfeil:active { transform: translateY(-50%) scale(.92); }
.karussell__pfeil--zurueck { left: max(0px, calc(50% - var(--breite) / 2 - 150px)); }
.karussell__pfeil--vor     { right: max(0px, calc(50% - var(--breite) / 2 - 150px)); }

.karussell--3d .karussell__punkte {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 8px;
}
.karussell__punkt {
  width: 12px; height: 12px; padding: 0;
  border: 0; border-radius: 999px;
  background: var(--rand);
  transition: width .3s cubic-bezier(.3, 1.4, .5, 1), background .2s ease;
}
.abschnitt--tief .karussell__punkt { background: rgba(255, 255, 255, .25); }
.karussell__punkt:hover { background: var(--blase); }
.karussell__punkt[aria-current="true"] { width: 34px; background: var(--schiller); }

.karussell--allein .karussell__pfeil,
.karussell--allein .karussell__punkte { display: none !important; }

@media (max-width: 560px) {
  .karussell--3d .karussell__pfeil { top: auto; bottom: -46px; width: 46px; height: 46px; font-size: 28px; transform: none; }
  .karussell--3d .karussell__pfeil:hover { transform: scale(1.08); }
  .karussell--3d .karussell__pfeil:active { transform: scale(.92); }
  .karussell__pfeil--zurueck { left: 0; }
  .karussell__pfeil--vor { right: 0; }
  .karussell--3d .karussell__punkte { margin-top: 20px; padding-inline: 56px; min-height: 30px; align-items: center; }
  .karussell__chip { font-size: 14px; padding: 9px 12px 9px 13px; }
}

/* --------------------------------------------------------------------------
   28. Tiefenmesser
   Auf breiten Schirmen eine Leiste am rechten Rand mit Taucher, darunter
   ein duenner Fortschrittsbalken am unteren Rand.
   -------------------------------------------------------------------------- */

.tiefe-schleier {
  position: fixed; inset: 0; z-index: 7;
  background: linear-gradient(180deg, rgba(6, 42, 61, 0) 0%, rgba(6, 42, 61, .6) 100%);
  opacity: 0;
  pointer-events: none;
}

.tiefe {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: 5px;
  pointer-events: none;
}
.tiefe__schiene { position: absolute; inset: 0; background: rgba(6, 42, 61, .08); }
.tiefe__fuellung {
  position: absolute; inset: 0;
  background: var(--schiller);
  transform: scaleX(var(--tiefe, 0)); transform-origin: 0 50%;
}
.tiefe__taucher, .tiefe__marke { display: none; }

@media (min-width: 1300px) {
  .tiefe {
    left: auto; right: 14px;
    top: calc(var(--kopf-hoehe) + 40px); bottom: 40px;
    width: 46px; height: auto;
  }
  .tiefe__schiene {
    left: 50%; right: auto; width: 4px; margin-left: -2px;
    border-radius: 4px;
    background: repeating-linear-gradient(180deg, rgba(15, 139, 163, .28) 0 6px, transparent 6px 12px);
  }
  .tiefe__fuellung {
    border-radius: 4px;
    background: linear-gradient(180deg, var(--blase), var(--ozean) 60%, var(--tief));
    transform: scaleY(var(--tiefe, 0)); transform-origin: 50% 0;
  }
  .tiefe__marke {
    display: block; position: absolute; right: 12px;
    font-size: 11px; font-weight: 700; color: var(--text-hell);
    white-space: nowrap; line-height: 1;
  }
  /* Oben steht ohnehin der Taucher mit seiner Anzeige. */
  .tiefe__marke--oben { display: none; }
  .tiefe__marke--unten { bottom: -18px; right: -12px; }

  .tiefe__taucher {
    display: block; position: absolute; top: 0; left: 50%;
    width: 38px; height: 38px; margin-left: -19px;
    transform: translateY(calc(var(--tiefe, 0) * var(--weg, 0px)));
  }
  .tiefe__figur {
    transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
    animation: bm-taucher-paddeln 2.4s ease-in-out infinite;
    filter: drop-shadow(0 3px 5px rgba(6, 42, 61, .2));
  }
  .tiefe--ab .tiefe__figur  { transform: rotate(150deg); }
  .tiefe--auf .tiefe__figur { transform: rotate(-20deg); }

  .tiefe__wert {
    position: absolute; right: calc(100% + 6px); top: 50%;
    transform: translateY(-50%);
    background: var(--tief); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1;
    padding: 5px 8px; border-radius: 999px;
    white-space: nowrap;
  }

  .tiefe__blase {
    position: absolute; left: 50%;
    width: var(--gr, 7px); height: var(--gr, 7px); margin-left: calc(var(--gr, 7px) / -2);
    border-radius: 50%;
    border: 1.5px solid rgba(15, 139, 163, .7);
    background: radial-gradient(circle at 35% 35%, #fff 0 25%, rgba(138, 233, 244, .4) 26%);
    animation: bm-tiefe-blase 1.5s ease-out forwards;
  }
}
@keyframes bm-taucher-paddeln {
  0%, 100% { translate: 0 0; }
  50%      { translate: 2px -2px; }
}
@keyframes bm-tiefe-blase {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -70px) scale(1.2); }
}

/* --------------------------------------------------------------------------
   29. Tagesroute
   -------------------------------------------------------------------------- */

.schritte--route { position: relative; }
.route {
  position: absolute; top: 0; left: 0;
  overflow: visible; pointer-events: none;
  display: none;
}
.schritte--route-an .route { display: block; }
.route__spur  { stroke: rgba(15, 139, 163, .22); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.route__linie { stroke: var(--koralle); stroke-width: 3.5; stroke-dasharray: 9 9; stroke-linecap: round; }

.route__boot {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 54px; height: 38px;
  margin: -44px 0 0 -27px;
  pointer-events: none;
  display: none;
  transform-origin: 50% 100%;
}
.schritte--route-an .route__boot { display: block; }
.route__boot-wippen { animation: bm-boot-wippen 1.8s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bm-boot-wippen {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-3px); }
}

/* Noch nicht erreichte Nummern warten klein und blass. */
.schritte--route .schritt__nummer {
  z-index: 2;
  transform: scale(.72); opacity: .55;
  transition: transform .5s cubic-bezier(.3, 1.9, .5, 1), opacity .3s ease;
}
.schritte--route .schritt__nummer.erreicht {
  transform: scale(1.12); opacity: 1;
  box-shadow: 0 0 0 5px rgba(255, 207, 77, .45), var(--schatten-s);
}

/* --------------------------------------------------------------------------
   30. Kursfinder
   -------------------------------------------------------------------------- */

.finder {
  position: relative;
  background: #fff; border: 2px solid var(--rand);
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 42px);
  box-shadow: var(--schatten-m);
  text-align: center;
}

.finder__fortschritt { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.finder__fortschritt span {
  width: 40px; height: 8px; border-radius: 999px;
  background: var(--rand);
  transition: background .3s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.finder__fortschritt span.an { background: var(--schiller); transform: scaleY(1.25); }

.finder__frage { border: 0; margin: 0; padding: 0; min-width: 0; }
.finder__legende {
  display: block; width: 100%; padding: 0;
  font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.2;
  color: var(--tief); margin-bottom: 22px;
}

.finder__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.finder__chip {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 150px; padding: 16px 18px 14px;
  border: 2.5px solid var(--rand); border-radius: var(--r-m);
  background: var(--creme); color: var(--tief);
  font-weight: 700; font-size: 16px; line-height: 1.2;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), border-color .2s ease, background .2s ease;
}
.finder__emoji { font-size: 32px; line-height: 1; transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.finder__chip:hover { transform: translateY(-4px) rotate(-1.5deg); border-color: var(--blase); background: #fff; }
.finder__chip:hover .finder__emoji { transform: scale(1.2) rotate(8deg); }
.finder__chip[aria-pressed="true"] { border-color: var(--ozean); background: var(--himmel); }
.finder__chip--gewaehlt { animation: bm-chip-plopp .22s ease-out; border-color: var(--koralle); background: var(--koralle-2); }
@keyframes bm-chip-plopp {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(.96); }
}

.finder--rein { animation: bm-finder-rein .5s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes bm-finder-rein {
  from { opacity: 0; transform: translateX(40px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.finder__ergebnis.finder--rein { animation-name: bm-finder-blubb; animation-duration: .7s; }
@keyframes bm-finder-blubb {
  0%   { opacity: 0; transform: translateY(50px) scale(.85); }
  60%  { opacity: 1; transform: translateY(-8px) scale(1.03); }
  100% { opacity: 1; transform: none; }
}

.finder__ergebnis { position: relative; }
.finder__karte {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  text-align: left;
  background: #fff; border: 3px solid var(--sonne);
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--schatten-m);
}
.finder__bild { background: var(--himmel); min-height: 220px; }
.finder__bild img { width: 100%; height: 100%; object-fit: cover; }
.finder__text { padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.finder__text .augenbraue { margin-bottom: 0; }
.finder__beschreibung { margin: 0; font-size: 15.6px; }
.finder__zusatz {
  margin: 0; font-size: 14.4px; line-height: 1.5;
  background: var(--sonne-2); border-radius: var(--r-s); padding: 10px 14px;
}
.finder__text .btn-reihe { margin-top: 4px; }

.finder__nebenbei { margin: 18px 0 0; font-size: 15px; font-weight: 600; color: var(--text-hell); }
.finder__neu, .finder__zurueck {
  border: 0; background: none; padding: 4px 6px;
  font-weight: 700; color: var(--ozean); text-decoration: underline; text-underline-offset: 3px;
}
.finder__neu:hover, .finder__zurueck:hover { color: var(--koralle); }
.finder__leiste { margin-top: 16px; min-height: 28px; }

.finder__blasen { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.finder__blasen i {
  position: absolute; bottom: 10%;
  left: calc(8% + var(--n) * 10.5%);
  width: calc(8px + var(--n) * 1.6px); height: calc(8px + var(--n) * 1.6px);
  border-radius: 50%;
  border: 2px solid rgba(15, 139, 163, .55);
  background: radial-gradient(circle at 35% 35%, #fff 0 22%, rgba(138, 233, 244, .35) 24%);
  opacity: 0;
  animation: bm-finder-blase 1.6s cubic-bezier(.3, .6, .4, 1) calc(var(--n) * 70ms) both;
}
@keyframes bm-finder-blase {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-240px) translateX(12px) scale(1.2); }
}

.preis__zahl.zaehlt { font-variant-numeric: tabular-nums; }
.preis__zahl.gezaehlt { animation: bm-zahl-plopp .35s cubic-bezier(.3, 1.8, .5, 1); display: inline-block; }
@keyframes bm-zahl-plopp {
  50% { transform: scale(1.12); }
}

@media (max-width: 640px) {
  .finder__karte { grid-template-columns: 1fr; }
  .finder__bild { min-height: 0; aspect-ratio: 2 / 1; }
  .finder__chip { min-width: 0; flex: 1 1 40%; }
}

/* --------------------------------------------------------------------------
   31. Belohnung fuer Blasen-Profis
   -------------------------------------------------------------------------- */

.belohnung {
  position: fixed; right: clamp(12px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px);
  z-index: 9990;
  display: flex; align-items: flex-end; gap: 4px;
  max-width: min(430px, calc(100vw - 24px));
  pointer-events: none;
}
.belohnung__fisch {
  flex: none; order: 2;
  transform: translateX(160%) rotate(10deg);
  transition: transform .9s cubic-bezier(.3, 1.3, .5, 1);
}
.belohnung__fisch svg { display: block; transform: scaleX(-1); }
.belohnung__stacheln { transform-origin: 58px 52px; transform: scale(.7); opacity: 0; }
.belohnung__schwanz { transform-origin: 22px 52px; animation: bm-fisch-schwanz .5s ease-in-out infinite alternate; }

.belohnung__blase {
  position: relative; order: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: #fff; border: 3px solid var(--blase);
  border-radius: 26px 26px 6px 26px;
  padding: 16px 20px 18px;
  box-shadow: var(--schatten-l);
  margin-bottom: 70px;
  opacity: 0; transform: scale(.4) translateY(30px); transform-origin: 100% 100%;
  transition: opacity .3s ease .7s, transform .5s cubic-bezier(.3, 1.6, .5, 1) .7s;
  pointer-events: auto;
}
.belohnung__titel { font-size: 1.3rem; color: var(--tief); line-height: 1.1; padding-right: 26px; }
.belohnung__text { font-size: 15px; color: var(--text); line-height: 1.45; font-weight: 600; }
.belohnung__zu {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; padding: 0 0 2px;
  border: 0; border-radius: 50%;
  background: var(--himmel); color: var(--tief);
  font-size: 22px; line-height: 1; font-weight: 700;
}
.belohnung__zu:hover { background: var(--koralle-2); color: var(--koralle); }

.belohnung--da .belohnung__fisch { transform: none; }
.belohnung--da .belohnung__fisch svg { animation: bm-fisch-schweben 2.6s ease-in-out .9s infinite; }
.belohnung--da .belohnung__stacheln { animation: bm-fisch-aufblasen .7s cubic-bezier(.3, 1.8, .5, 1) .75s both; }
.belohnung--da .belohnung__blase { opacity: 1; transform: none; }

.belohnung--weg .belohnung__fisch { transform: translateX(160%) rotate(-10deg); transition-duration: .6s; }
.belohnung--weg .belohnung__blase { opacity: 0; transform: scale(.5); transition-delay: 0s; transition-duration: .25s; }

@keyframes bm-fisch-aufblasen {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes bm-fisch-schweben {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); }
  50%      { transform: scaleX(-1) translateY(-8px) rotate(3deg); }
}
@keyframes bm-fisch-schwanz {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(10deg); }
}

@media (max-width: 480px) {
  .belohnung__fisch svg { width: 84px; height: 73px; }
  .belohnung__blase { margin-bottom: 52px; }
  .belohnung .btn { width: auto; }
}

/* --------------------------------------------------------------------------
   32. Sprachen
   -------------------------------------------------------------------------- */

/* Sprachumschalter in der Kopfleiste. Die Klappe arbeitet wie das
   Kurse-Menue (kopf__punkt, kopf__pfeil, kopf__menu - site.js); nur der
   Knopf sieht anders aus, weil er allein und nicht neben einem Link steht. */
.sprachwahl { flex: none; }
.kopf__inner .sprachwahl__knopf {
  gap: 6px; min-height: 46px; padding: 0 11px;
  border: 2px solid var(--rand); border-radius: 14px; background: #fff;
  font: inherit; font-weight: 700; font-size: 14.5px; line-height: 1; color: var(--tief);
  cursor: pointer;
}
.kopf__inner .sprachwahl__knopf:hover { border-color: var(--blase); color: var(--ozean); }
.kopf__punkt.sprachwahl[data-offen="true"] .sprachwahl__knopf { transform: none; border-color: var(--blase); color: var(--ozean); }
.sprachwahl__globus { flex: none; }
.sprachwahl__pfeil { font-size: 10px; color: var(--text-hell); transition: transform .2s ease; }
.sprachwahl[data-offen="true"] .sprachwahl__pfeil { transform: rotate(180deg); }

.kopf__menu.sprachwahl__menu { left: auto; right: 0; min-width: 196px; }
.kopf__menu a.sprachwahl__link { flex-direction: row; align-items: center; gap: 11px; }
.kopf__menu a.sprachwahl__link[aria-current="true"] { background: var(--himmel); color: var(--ozean); }

.sprachwahl__kurz {
  flex: none; min-width: 30px; padding: 3px 0; border-radius: 8px;
  background: var(--himmel); color: var(--ozean);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-align: center; line-height: 1.2;
}
[aria-current="true"] > .sprachwahl__kurz { background: var(--blase); color: #fff; }

/* Landesflagge als runde Blase vor der Kurzbezeichnung. Fixe Groesse und
   overflow:hidden, damit das Flaggen-Emoji nie den Kreis sprengt; ein
   duenner Rand haelt sie auch auf hellem Grund sichtbar von der Blase ab. */
.sprachwahl__flagge {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  background: #fff; border: 1px solid var(--rand);
  font-size: 15px; line-height: 1;
}
[aria-current="true"] > .sprachwahl__flagge { border-color: var(--blase); }

/* Im mobilen Menue als Raster zum Antippen */
.mobilnav__sprachen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mobilnav__sprache {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 12px;
  color: var(--tief); font-weight: 600; font-size: 15px;
}
.mobilnav__sprache:hover, .mobilnav__sprache[aria-current="true"] { background: var(--himmel); color: var(--ozean); }

/* Auf dem Telefon faellt die Buchen-Schaltflaeche weg (Abschnitt 6); dann
   uebernimmt der Sprachumschalter den Abstand zum Logo. */
@media (max-width: 700px) {
  .kopf__inner .sprachwahl { margin-left: auto; }
  .kopf__inner .sprachwahl + .burger { margin-left: 0; }
}
@media (max-width: 420px) {
  .kopf__inner .sprachwahl__knopf { padding: 0 9px; }
  .sprachwahl__globus { display: none; }
}

/* Die Navigationsleiste ist auf Deutsch gerade breit genug. Uebersetzungen
   laufen meist laenger ("Forfaits famille", "Семейные пакеты") - dort
   uebernimmt das Burger-Menue schon etwas frueher. */
@media (min-width: 1081px) and (max-width: 1340px) {
  html:not([lang="de"]) .kopf__nav { display: none; }
  html:not([lang="de"]) .kopf__cta { margin-left: auto; }
  html:not([lang="de"]) .burger__text { display: inline; }
  html:not([lang="de"]) .burger { padding: 0 16px; }
}
@media (min-width: 1081px) and (max-width: 1240px) {
  html[lang="de"] .sprachwahl__globus { display: none; }
}

/* Kyrillisch und Arabisch hat Sour Gummy nicht. Der Browser wuerde ohnehin
   Zeichen fuer Zeichen ausweichen - hier steht, wohin: auf gut lesbare
   Systemschriften statt auf die erstbeste. */
:lang(ru) { --font: 'Sour Gummy', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif; }
:lang(ar) { --font: 'Sour Gummy', 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Geeza Pro', system-ui, sans-serif; }
[lang="ar"] body { font-family: var(--font); }

/* Sperrung zerreisst die arabische Schreibschrift, Grossbuchstaben gibt es
   nicht. */
:lang(ar) { letter-spacing: 0 !important; }
[lang="ar"] .augenbraue, [lang="ar"] .mobilnav__gruppe { text-transform: none; }

/* --- Von rechts nach links ------------------------------------------------ */

[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.2em; }
[dir="rtl"] .fliesstext ul, [dir="rtl"] .fliesstext ol { padding-left: 0; padding-right: 1.3em; }
[dir="rtl"] .hakenliste, [dir="rtl"] .punkteliste, [dir="rtl"] .karussell__liste { padding-right: 0; }
[dir="rtl"] .karussell__liste { padding: 12px 4px 26px; }
[dir="rtl"] .karussell--3d .karussell__liste { padding: 0; }

[dir="rtl"] .hakenliste li { padding-left: 0; padding-right: 32px; }
[dir="rtl"] .hakenliste li::before { left: auto; right: 0; }
[dir="rtl"] .hakenliste li::after { left: auto; right: 6.5px; }
[dir="rtl"] .punkteliste li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .punkteliste li::before { left: auto; right: 0; }

[dir="rtl"] .kopf__nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .kopf__link::after { transform-origin: right; }
[dir="rtl"] .kopf__menu { left: auto; right: -14px; }
[dir="rtl"] .kopf__menu.sprachwahl__menu { right: auto; left: 0; }
@media (max-width: 1080px) {
  [dir="rtl"] .kopf__cta { margin-left: 0; margin-right: auto; }
}
@media (min-width: 1081px) and (max-width: 1340px) {
  [dir="rtl"] .kopf__cta { margin-left: 0; margin-right: auto; }
}
@media (max-width: 700px) {
  [dir="rtl"] .kopf__inner .sprachwahl { margin-left: 0; margin-right: auto; }
}

[dir="rtl"] .mobilnav__panel {
  right: auto; left: 0;
  border-radius: 0 var(--r-l) var(--r-l) 0;
  transform: translateX(-102%);
}
[dir="rtl"] .mobilnav[data-offen="true"] .mobilnav__panel { transform: translateX(0); }

[dir="rtl"] .bewegung-schalter__knopf { left: auto; right: 3px; transform: translateX(-18px); }
[dir="rtl"] .bewegung-schalter[aria-checked="false"] .bewegung-schalter__knopf { transform: none; }

[dir="rtl"] .preistabelle th, [dir="rtl"] .preistabelle td { text-align: right; }
[dir="rtl"] .preistabelle td:last-child, [dir="rtl"] .preistabelle th:last-child { text-align: left; }

[dir="rtl"] .schritt__nummer { left: auto; right: 24px; }
[dir="rtl"] .frage__knopf { text-align: right; }
[dir="rtl"] .stimme::before { right: auto; left: 22px; }

[dir="rtl"] .merksatz { border-left: 0; border-right: 6px solid var(--sonne); border-radius: var(--r-m) 0 0 var(--r-m); }
[dir="rtl"] .merksatz--blase { border-right-color: var(--blase); }
[dir="rtl"] .merksatz--koralle { border-right-color: var(--koralle); }

[dir="rtl"] select.eingabe { background-position: left 14px center; padding-right: 15px; padding-left: 42px; }
[dir="rtl"] .infofenster__zu { right: auto; left: 12px; }
[dir="rtl"] .infofenster__titel { padding-right: 0; padding-left: 48px; }
[dir="rtl"] .riffcheck__ziel { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .finder__karte { text-align: right; }
[dir="rtl"] .belohnung__titel { padding-right: 0; padding-left: 26px; }
[dir="rtl"] .belohnung__zu { right: auto; left: 8px; }
@media (max-width: 940px) {
  [dir="rtl"] .preiskarte__leiste { text-align: right; }
  [dir="rtl"] .preiskarte__leiste-summe { margin-left: 0; margin-right: auto; }
}

/* Das Paket-Karussell bewegt sich weiter von links nach rechts - Pfeile,
   Wischen und Pfeiltasten passen so ohne Sonderfall zusammen. Die Karten
   selbst lesen sich von rechts nach links. */
[dir="rtl"] .karussell__buehne, [dir="rtl"] .karussell__punkte { direction: ltr; }
[dir="rtl"] .karussell__karte { direction: rtl; }

/* Telefonnummern, E-Mail-Adressen und Preise bleiben in sich lesbar. */
[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }