/* ==========================================================================
   Hochtalwelle Schwimmschule Wildschönau – Gestaltung
   Hell und fotobasiert nach dem Screendesign der Kundin (Oktober 2026):
   weiße Kopfzeile, Fotos von Wasser und Bergen, dunkelblaue Überschriften,
   bunte Kurskarten mit Welle und Symbol. Schrift: Montserrat (Regular,
   SemiBold, ExtraBold). Bewegung nur als Reaktion auf Zeigen/Klicken.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-variabel.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --navy: #13286b;          /* Überschriften */
  --navy-tief: #0b1d4f;
  --blau: #0f78c8;          /* Knöpfe und Links (Kontrast 4,6 : 1) */
  --blau-hell: #1a8be0;     /* Schmuck, Wellen */
  --himmel: #eaf5fd;        /* helle Flächen */
  --himmel-2: #d6ebfb;
  --text: #22304f;
  --text-2: #55627e;
  --linie: #dbe7f3;
  --weiss: #fff;

  /* Kursfarben: Fläche (Welle, Symbol) und dunklere Fassung für Text auf Weiß / Knöpfe */
  --k-baby: #1d9be6;        --k-baby-tief: #127bbd;
  --k-kinder: #0c9a95;      --k-kinder-tief: #0a817d;
  --k-schule: #f2b705;      --k-schule-tief: #8a6400;
  --k-erwachsene: #4fa52e;  --k-erwachsene-tief: #367f1c;
  --k-aquafitness: #8c5bd6;   --k-aquafitness-tief: #7445c4;
  --k-brust: #1a6fd8;       --k-brust-tief: #1660c0;
  --k-kraul: #0c9a95;       --k-kraul-tief: #0a817d;
  --k-offen: #f5a700;       --k-offen-tief: #8a6400;
  --k-privat: #f26b1d;      --k-privat-tief: #bf4c0c;

  --akzent: var(--blau-hell);
  --akzent-tief: var(--blau);

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --radius: 22px;
  --breite: 1200px;
  --breite-schmal: 800px;
  --rand: clamp(1rem, 4vw, 2rem);
  --abstand: clamp(3.25rem, 7vw, 5.5rem);
  --kopf-hoehe: 98px;
}

/* Seitenfarbe aus der Verwaltung („Farbe der Seite“) */
body[data-farbe="baby"]       { --akzent: var(--k-baby);       --akzent-tief: var(--k-baby-tief); }
body[data-farbe="kinder"]     { --akzent: var(--k-kinder);     --akzent-tief: var(--k-kinder-tief); }
body[data-farbe="schule"]     { --akzent: var(--k-schule);     --akzent-tief: var(--k-schule-tief); }
body[data-farbe="erwachsene"] { --akzent: var(--k-erwachsene); --akzent-tief: var(--k-erwachsene-tief); }
body[data-farbe="aquafitness"]  { --akzent: var(--k-aquafitness);  --akzent-tief: var(--k-aquafitness-tief); }
body[data-farbe="privat"]     { --akzent: var(--k-privat);     --akzent-tief: var(--k-privat-tief); }
body[data-farbe="brust"]      { --akzent: var(--k-brust);      --akzent-tief: var(--k-brust-tief); }
body[data-farbe="kraul"]      { --akzent: var(--k-kraul);      --akzent-tief: var(--k-kraul-tief); }
body[data-farbe="offen"]      { --akzent: var(--k-offen);      --akzent-tief: var(--k-offen-tief); }

[hidden] { display: none !important; }

/* --- Grundlagen ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); }
body {
  margin: 0; background: #fff; color: var(--text);
  font-family: var(--font); font-size: 1.0625rem; font-weight: 400; line-height: 1.7;
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
body.nav-offen { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0 0 .6em; color: var(--navy); font-weight: 800; line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
h3 { font-size: 1.2rem; font-weight: 800; }
p, ul, ol, dl, blockquote, figure { margin: 0 0 1.1em; }
p { text-wrap: pretty; }
strong { font-weight: 800; color: var(--navy); }
em { font-style: normal; font-weight: 600; color: var(--blau); }
a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blau-hell); outline-offset: 3px; border-radius: 6px; }

.visually-hidden {
  position: absolute !important; 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: 1rem; top: -4rem; z-index: 100; padding: .7rem 1.1rem;
  background: var(--navy); color: #fff; font-weight: 600; border-radius: 12px; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.container { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--rand), var(--breite-schmal)); }

/* --- Knöpfe ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.5rem; border: 2px solid transparent; border-radius: 999px;
  font: 600 1rem/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn::after {
  content: ""; width: 1.05em; height: 1.05em; flex: none; background: currentColor;
  -webkit-mask: var(--pfeil) center / contain no-repeat; mask: var(--pfeil) center / contain no-repeat;
}
.btn--ohne-pfeil::after, .btn--rand::after { display: none; }
.btn:hover { text-decoration: none; }
.btn--klein { min-height: 42px; padding: .5rem 1.15rem; font-size: .95rem; }
.btn--blau, .btn--see, .btn--sonne { background: var(--blau); color: #fff; }
.btn--blau:hover, .btn--see:hover, .btn--sonne:hover { background: #0b62a5; color: #fff; }
.btn--akzent { background: var(--akzent-tief); color: #fff; }
.btn--akzent:hover { filter: brightness(.92); color: #fff; }
.btn--rand, .btn--ghost { background: #fff; color: var(--blau); border-color: var(--blau); }
.btn--rand:hover, .btn--ghost:hover { background: var(--himmel); color: var(--blau); }
.btn--weiss, .btn--hell { background: #fff; color: var(--navy); }
.btn--weiss:hover, .btn--hell:hover { background: var(--himmel); color: var(--navy); }
.knopf-zeile { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* WhatsApp: eigener Knopf und jeder Knopf, der auf wa.me verweist (auch aus der Verwaltung) */
:root { --wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.5a9.5 9.5 0 0 0-8.2 14.3L2.5 21.5l4.8-1.3A9.5 9.5 0 1 0 12 2.5Zm0 1.8a7.7 7.7 0 1 0 0 15.4 7.7 7.7 0 0 0 0-15.4Z'/%3E%3Cpath d='M9.1 7.6c.2 0 .5 0 .7.5l.8 1.8c.1.2.1.4 0 .6l-.6.8c-.1.2-.1.4 0 .5a6.6 6.6 0 0 0 3.1 2.9c.2.1.4.1.5-.1l.7-.8c.2-.2.4-.2.6-.1l1.8.8c.3.1.5.3.5.6 0 1-.9 2.1-2.2 2.1-3.6 0-7.2-3.5-7.2-7.2 0-1.3 1.1-2.4 2.1-2.4Z'/%3E%3C/svg%3E"); }
.ico--whatsapp { --ico: var(--wa); }
.btn--whatsapp, a.btn[href^="https://wa.me/"] { background: #25d366; border-color: #25d366; color: #fff; }
.btn--whatsapp:hover, a.btn[href^="https://wa.me/"]:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }
.btn--whatsapp::before, a.btn[href^="https://wa.me/"]::before {
  content: ""; width: 1.3em; height: 1.3em; flex: none; background: currentColor;
  -webkit-mask: var(--wa) center / contain no-repeat; mask: var(--wa) center / contain no-repeat;
}
.btn--whatsapp::after, a.btn[href^="https://wa.me/"]::after { display: none; }
.btn--symbol { width: 42px; padding: 0; gap: 0; }
.btn--symbol .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:root { --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }

/* --- Linien-Symbole (Maske, übernehmen die Textfarbe) ---------------------- */
.ico {
  display: inline-block; flex: none; width: 1.35em; height: 1.35em; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ico--baby       { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12.5' r='8.5'/%3E%3Cpath d='M9.2 11.5h.01M14.8 11.5h.01'/%3E%3Cpath d='M9.6 15.2a3.4 3.4 0 0 0 4.8 0'/%3E%3Cpath d='M12 4c-1.6 1.4-.6 3.2 1.2 3'/%3E%3C/svg%3E"); }
.ico--kind       { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.6'/%3E%3Cpath d='M12 8.5v6.5M7.5 11.5 12 10l4.5 1.5M9.5 21l2.5-6 2.5 6'/%3E%3C/svg%3E"); }
.ico--gruppe     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='5' cy='9' r='2.2'/%3E%3Ccircle cx='19' cy='9' r='2.2'/%3E%3Cpath d='M6.5 20v-1.5a5.5 5.5 0 0 1 11 0V20M2 19.5v-.8a3.5 3.5 0 0 1 4.6-3.3M22 19.5v-.8a3.5 3.5 0 0 0-4.6-3.3'/%3E%3C/svg%3E"); }
.ico--kraulen    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17.5' cy='6.5' r='2'/%3E%3Cpath d='m3.5 12.5 5-3.2 3.2 2.6 3.3-2.2'/%3E%3Cpath d='M2 17c2 0 2-1.5 4-1.5s2 1.5 4 1.5 2-1.5 4-1.5 2 1.5 4 1.5 2-1.5 4-1.5'/%3E%3C/svg%3E"); }
.ico--hantel     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7v10M17 7v10M4 9.5v5M20 9.5v5M7 12h10'/%3E%3C/svg%3E"); }
.ico--person     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20.5a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
.ico--welle      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2'/%3E%3Cpath d='M2 12c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2'/%3E%3Cpath d='M2 17c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2'/%3E%3C/svg%3E"); }
.ico--herz       { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.6-4.6-9-9.3C2 7.4 4.3 4.5 7.4 4.5c1.9 0 3.5 1 4.6 2.6 1.1-1.6 2.7-2.6 4.6-2.6 3.1 0 5.4 2.9 4.4 6.2-1.4 4.7-9 9.3-9 9.3Z'/%3E%3C/svg%3E"); }
.ico--herz-voll  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5s-7.9-4.8-9.4-9.7C1.5 7.1 4 3.8 7.4 3.8c1.9 0 3.5 1 4.6 2.5 1.1-1.5 2.7-2.5 4.6-2.5 3.4 0 5.9 3.3 4.8 7-1.5 4.9-9.4 9.7-9.4 9.7Z'/%3E%3C/svg%3E"); }
.ico--schild     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.3 7.5 9.5 4.3-1.2 7.5-4.9 7.5-9.5V6Z'/%3E%3C/svg%3E"); }
.ico--berge      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 19 6.5-11 4 6.5 2.5-3.8L22 19Z'/%3E%3Cpath d='m7 10.5 1.5 1.5 1.5-1.4'/%3E%3C/svg%3E"); }
.ico--brief      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6.5L20.5 7'/%3E%3C/svg%3E"); }
.ico--geschenk   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8.5' width='17' height='12' rx='2'/%3E%3Cpath d='M3.5 12.5h17M12 8.5v12'/%3E%3Cpath d='M12 8.5C10.5 5 6.5 4.8 6.8 7 7 8.4 10.2 8.5 12 8.5c1.8 0 5-.1 5.2-1.5.3-2.2-3.7-2-5.2 1.5Z'/%3E%3C/svg%3E"); }
.ico--alter      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6.5' r='3'/%3E%3Cpath d='M6 21v-2.5a6 6 0 0 1 12 0V21'/%3E%3C/svg%3E"); }
.ico--dauer      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E"); }
.ico--preis      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 6.5a7 7 0 1 0 0 11'/%3E%3Cpath d='M4 10h9M4 14h9'/%3E%3C/svg%3E"); }
.ico--ort        { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.ico--termin     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ico--eltern     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='6' r='2.6'/%3E%3Cpath d='M4 21v-5a4 4 0 0 1 8 0v5'/%3E%3Ccircle cx='17' cy='10.5' r='2'/%3E%3Cpath d='M14 21v-3a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E"); }
.ico--ziel       { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h12l-2.5 4 2.5 4H5'/%3E%3C/svg%3E"); }
.ico--info       { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.8h.01'/%3E%3C/svg%3E"); }
.ico--stern      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9Z'/%3E%3C/svg%3E"); }
.ico--sonne      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E"); }
.ico--datei      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); }
.ico--zertifikat { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='M8.6 13.4 7 21l5-2.6 5 2.6-1.6-7.6'/%3E%3C/svg%3E"); }

.ico--ente       { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7.5' r='3.5'/%3E%3Cpath d='M5.6 8.3H3a1.3 1.3 0 0 0 1.3 1.4h1.8M9.3 6.9h.01'/%3E%3Cpath d='M7.3 10.6C5.3 11.6 4 13.4 4 15.5 4 18.3 6.9 20 11 20h3.5c3.6 0 6.5-2.2 6.5-5.6 0-1.1-.3-2.1-.9-2.9-1.1.8-2.4 1.2-3.8 1.2-2 0-3.6-.9-4.7-2.8'/%3E%3Cpath d='M10 15.6c1.6 1.2 4 1.2 5.6 0'/%3E%3C/svg%3E"); }
.ico--brust           { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6.5' r='2.4'/%3E%3Cpath d='M3.5 11.5c3 0 4.6-1.6 6-2.8M20.5 11.5c-3 0-4.6-1.6-6-2.8'/%3E%3Cpath d='M2 15.5c1.7 0 1.7-1.2 3.3-1.2s1.7 1.2 3.4 1.2 1.7-1.2 3.3-1.2 1.7 1.2 3.4 1.2 1.7-1.2 3.3-1.2 1.7 1.2 3.3 1.2'/%3E%3Cpath d='M2 19.5c1.7 0 1.7-1.2 3.3-1.2s1.7 1.2 3.4 1.2 1.7-1.2 3.3-1.2 1.7 1.2 3.4 1.2 1.7-1.2 3.3-1.2 1.7 1.2 3.3 1.2'/%3E%3C/svg%3E"); }
.ico--aqua            { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.5' r='2'/%3E%3Cpath d='M6.5 5.5 12 9l5.5-3.5M12 9v4.5M8.5 17l3.5-3.5 3.5 3.5'/%3E%3Cpath d='M2 20.5c1.7 0 1.7-1.2 3.3-1.2s1.7 1.2 3.4 1.2 1.7-1.2 3.3-1.2 1.7 1.2 3.4 1.2 1.7-1.2 3.3-1.2 1.7 1.2 3.3 1.2'/%3E%3C/svg%3E"); }
.ico--zahnrad         { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5.6'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Cpath stroke-width='3' stroke-linecap='butt' d='M12 3.4v2.8M12 17.8v2.8M3.4 12h2.8M17.8 12h2.8M5.9 5.9l2 2M18.1 18.1l-2-2M5.9 18.1l2-2M18.1 5.9l-2 2'/%3E%3C/svg%3E"); }
.ico--lunge           { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5V12M12 9.5c-1 .9-1.6 1.2-2.2 1.2M12 9.5c1 .9 1.6 1.2 2.2 1.2'/%3E%3Cpath d='M9.2 7.3C6.4 8.6 4 13.4 4 17.6c0 1.6 1 2.6 2.5 2.3l2.6-.6c1-.2 1.6-1 1.6-2V9c0-1.3-.5-2-1.5-1.7Z'/%3E%3Cpath d='M14.8 7.3c2.8 1.3 5.2 6.1 5.2 10.3 0 1.6-1 2.6-2.5 2.3l-2.6-.6c-1-.2-1.6-1-1.6-2V9c0-1.3.5-2 1.5-1.7Z'/%3E%3C/svg%3E"); }
.ico--stoppuhr        { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 13.5V9.5M10 2.5h4M12 2.5V6M18.2 7.3l1.4-1.4'/%3E%3C/svg%3E"); }
.ico--taucherbrille   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5h13A1.5 1.5 0 0 1 18 10v3.2a3.3 3.3 0 0 1-3.3 3.3h-1.6a2 2 0 0 1-1.8-1.2l-.4-.9a1.1 1.1 0 0 0-2 0l-.4.9a2 2 0 0 1-1.8 1.2H5.3A3.3 3.3 0 0 1 2 13.2V10a1.5 1.5 0 0 1 1.5-1.5Z'/%3E%3Cpath d='M21 4v11.5a5 5 0 0 1-5 5h-2.5'/%3E%3C/svg%3E"); }
.ico--gluehbirne      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1.1 1 1.8V16h5v-.3c0-.7.4-1.4 1-1.8A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E"); }
.ico--chat            { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h10A1.5 1.5 0 0 1 15.5 7v6a1.5 1.5 0 0 1-1.5 1.5H9l-3.5 3v-3H4A1.5 1.5 0 0 1 2.5 13V7A1.5 1.5 0 0 1 4 5.5Z'/%3E%3Cpath d='M15.5 9.5H20a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5h-1.5v3l-3.5-3h-4a1.5 1.5 0 0 1-1.5-1.5v-1'/%3E%3C/svg%3E"); }

/* Ein 💙 im Text der Kundin wird zum Herz-Symbol (render.php, herz_symbol) */
.herz { width: 1.05em; height: 1.05em; margin-left: .12em; vertical-align: -0.14em; color: var(--blau-hell); }

/* Kleiner Wellenstrich unter Überschriften (wie im Screendesign) */
.welle-strich {
  display: block; width: 130px; height: 14px; margin: .2rem 0 1.4rem; background: var(--blau-hell);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 14' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M2 9c14-7 28-7 42 0s28 7 42 0 28-7 42 0'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 14' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M2 9c14-7 28-7 42 0s28 7 42 0 28-7 42 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.kopfzeile {
  position: sticky; top: 0; z-index: 50; background: #fff;
  box-shadow: 0 1px 0 var(--linie);
  transition: box-shadow .25s;
}
.kopfzeile.ist-gescrollt { box-shadow: 0 8px 30px -18px rgba(19, 40, 107, .35); }
.kopfzeile-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--kopf-hoehe); }
.marke { display: block; flex: none; }
.marke img { width: auto; height: 82px; }

.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; }
.nav-punkt { position: relative; display: flex; align-items: center; }
.nav-link {
  display: block; padding: .55rem .75rem; border-radius: 10px;
  color: var(--navy); font-weight: 600; font-size: .98rem; text-decoration: none;
}
.nav-link:hover { color: var(--blau); }
.nav-link[aria-current="page"], .nav-punkt--aktiv > .nav-link { color: var(--blau); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .55em; text-decoration-color: var(--blau-hell); }
.nav-punkt--knopf { margin-left: .75rem; }
.nav-punkt--whatsapp { margin-left: .5rem; }

.nav-auf { width: 26px; height: 34px; margin-left: -.5rem; padding: 0; background: none; border: 0; color: var(--navy); cursor: pointer; }
.nav-auf::before {
  content: ""; display: block; width: 8px; height: 8px; margin: -3px auto 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
[data-offen="true"] > .nav-auf::before { transform: translateY(4px) rotate(225deg); }

.nav-unter {
  list-style: none; margin: 0; padding: .5rem; position: absolute; top: calc(100% + .45rem); left: -.75rem;
  width: 300px; background: #fff; border: 1px solid var(--linie); border-radius: 16px;
  box-shadow: 0 24px 50px -24px rgba(19, 40, 107, .4);
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
}
.nav-unter::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
[data-offen="true"] > .nav-unter { opacity: 1; visibility: visible; }
.nav-unter a {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px;
  color: var(--navy); font-weight: 600; text-decoration: none;
}
.nav-unter a:hover, .nav-unter a[aria-current="page"] { background: var(--himmel); }
.punkt { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--blau-hell); }
.punkt--baby { background: var(--k-baby); } .punkt--kinder { background: var(--k-kinder); }
.punkt--schule { background: var(--k-schule); } .punkt--erwachsene { background: var(--k-erwachsene); }
.punkt--aquafitness { background: var(--k-aquafitness); } .punkt--privat { background: var(--k-privat); }
.punkt--brust { background: var(--k-brust); } .punkt--kraul { background: var(--k-kraul); } .punkt--offen { background: var(--k-offen); }
.nav-unter .nav-unter-sub a { padding: .4rem .75rem .4rem 2.3rem; font-weight: 400; font-size: .95rem; }
.nav-unter .nav-unter-sub .punkt { width: 9px; height: 9px; }

.nav-schalter {
  display: none; position: relative; width: 48px; height: 48px; flex: none; cursor: pointer;
  background: var(--himmel); border: 0; border-radius: 12px; color: var(--navy);
}
.nav-schalter-striche, .nav-schalter-striche::before, .nav-schalter-striche::after {
  position: absolute; left: 50%; width: 22px; height: 2px; margin-left: -11px; background: currentColor; border-radius: 2px;
}
.nav-schalter-striche { top: 50%; margin-top: -1px; }
.nav-schalter-striche::before, .nav-schalter-striche::after { content: ""; left: 0; margin-left: 0; }
.nav-schalter-striche::before { top: -7px; }
.nav-schalter-striche::after { top: 7px; }
.nav-schalter[aria-expanded="true"] .nav-schalter-striche { background: transparent; }
.nav-schalter[aria-expanded="true"] .nav-schalter-striche::before { transform: translateY(7px) rotate(45deg); }
.nav-schalter[aria-expanded="true"] .nav-schalter-striche::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1099px) {
  :root { --kopf-hoehe: 76px; }
  .marke img { height: 58px; }
  .nav-schalter { display: block; }
  .nav {
    position: fixed; inset: var(--kopf-hoehe) 0 0 0; overflow-y: auto; padding: 1rem var(--rand) 3rem;
    background: #fff; border-top: 1px solid var(--linie); display: none;
  }
  body.nav-offen .nav { display: block; }
  .nav-liste { flex-direction: column; align-items: stretch; gap: 0; max-width: 560px; margin-inline: auto; }
  .nav-punkt { flex-wrap: wrap; border-bottom: 1px solid var(--linie); }
  .nav-link { flex: 1; padding: .95rem .25rem; font-size: 1.15rem; font-weight: 600; }
  .nav-auf { display: none; }
  .nav-unter { position: static; width: 100%; opacity: 1; visibility: visible; box-shadow: none; border: 0; margin: 0 0 .75rem; padding: 0; }
  .nav-punkt--knopf { border-bottom: 0; margin: 1.5rem 0 0; }
  .nav-punkt--knopf .btn { width: 100%; min-height: 52px; }
  .nav-punkt--whatsapp { border-bottom: 0; margin: .75rem 0 0; }
  .nav-punkt--whatsapp .btn { width: 100%; min-height: 52px; gap: .55rem; padding: .75rem 1.5rem; }
  .nav-punkt--whatsapp .btn-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ==========================================================================
   Titelbild der Startseite
   ========================================================================== */
.titelbild {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(540px, 72vh, 740px); display: flex; align-items: center;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(6rem, 10vw, 8rem);
}
.titelbild-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
.titelbild::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 40%, rgba(255,255,255,.6) 60%, rgba(255,255,255,0) 80%);
}
.titelbild-text { max-width: 720px; }
.titelbild h1 { margin-bottom: .35rem; font-size: clamp(2rem, 3.3vw, 2.7rem); }
.titelbild-text p { color: var(--text); }
.titelbild-text .titelbild-unter { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 600; color: var(--blau-hell); line-height: 1.3; }
.titelbild-schluss { font-weight: 800; color: var(--navy) !important; }
.titelbild-schluss .herz { width: 1.3em; height: 1.3em; margin-left: .3em; vertical-align: -0.3em; }
.welle-unten { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(40px, 6vw, 90px); fill: #fff; }
.welle-unten .welle-hell { fill: rgba(255,255,255,.5); }
.titelbild:has(+ .section--eis) .welle-unten path:last-child,
.seitenkopf:not(.seitenkopf--hell):has(+ .section--eis) .welle-unten path:last-child { fill: var(--himmel); }
.titelbild-text .eyebrow { color: var(--blau); }
.titelbild--gutschein::before { background: linear-gradient(270deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.35) 70%, rgba(255,255,255,.12) 100%); }
.titelbild--gutschein .titelbild-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.titelbild--gutschein .titelbild-text { max-width: 560px; }
.titelbild--gutschein .gutschein-karte { max-width: 520px; }

/* ==========================================================================
   Kopfbereich der Unterseiten (Foto mit Welle)
   ========================================================================== */
.seitenkopf {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(5rem, 9vw, 7.5rem);
}
.seitenkopf-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.seitenkopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11,29,79,.78) 0%, rgba(11,29,79,.5) 50%, rgba(11,29,79,.15) 100%);
}
.seitenkopf-text { max-width: 46rem; }
.seitenkopf h1 { color: #fff; margin-bottom: .5rem; }
.seitenkopf .eyebrow { display: inline-block; padding: .25rem .85rem; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; }
.seitenkopf-lead { max-width: 40rem; margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; color: #fff; }
.seitenkopf-knopf { margin: 1.6rem 0 0; }
.brotkrumen { margin-bottom: 1.2rem; font-size: .9rem; }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .55rem; }
.brotkrumen li { display: flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.85); }
.brotkrumen li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.brotkrumen a { color: #fff; text-decoration: none; font-weight: 600; }
.brotkrumen a:hover { text-decoration: underline; }
body[data-farbe] .seitenkopf .eyebrow { background: var(--akzent); }
body[data-farbe="schule"] .seitenkopf .eyebrow, body[data-farbe="offen"] .seitenkopf .eyebrow { color: var(--navy-tief); }
body[data-farbe="schule"] .btn--akzent, body[data-farbe="offen"] .btn--akzent { color: var(--navy-tief); }

/* ==========================================================================
   Abschnitte
   ========================================================================== */
.section { position: relative; padding-block: var(--abstand); }
.section--eis { background: var(--himmel); }
.section--sonne { background: #fff7e4; }
.section--eis::before, .section--eis::after {
  content: ""; position: absolute; left: 0; width: 100%; height: clamp(16px, 2.6vw, 38px);
  background: var(--himmel); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C240 2 480 2 720 20s480 18 720-4v22Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C240 2 480 2 720 20s480 18 720-4v22Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.section--eis::before { bottom: calc(100% - 3px); }
.section--eis::after { top: calc(100% - 3px); transform: scaleY(-1); }
.titelbild + .section--eis::before, .seitenkopf:not(.seitenkopf--hell) + .section--eis::before, .section--eis + .section--eis::before,
.section--eis:has(+ .section--eis)::after, .section--eis:has(+ .bildband)::after, .section--eis:last-child::after { display: none; }
.section + .section:not([class*="section--"]):not(.cta-band) { padding-top: 0; }
.titelbild + .section:not([class*="section--"]) { padding-top: clamp(1rem, 2.5vw, 2rem); }
.section[class*="section--"] + .section:not([class*="section--"]):not(.cta-band) { padding-top: var(--abstand); }
.section-head { max-width: 48rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin-bottom: 0; }
.section-head h2::after {
  content: ""; display: block; width: 130px; height: 14px; margin-top: .6rem; background: var(--blau-hell);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 14' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M2 9c14-7 28-7 42 0s28 7 42 0 28-7 42 0'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 14' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M2 9c14-7 28-7 42 0s28 7 42 0 28-7 42 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center h2::after { margin-inline: auto; }
.section-lead { margin: 1rem 0 0; font-size: 1.1rem; color: var(--text-2); }
.eyebrow { margin: 0 0 .5rem; font-size: .95rem; font-weight: 600; color: var(--akzent-tief); }
.anschluss { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.fliesstext { max-width: 70ch; }
.fliesstext h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.fliesstext h3 { margin-top: 1.5em; }
.fliesstext > :first-child { margin-top: 0; }
.fliesstext ul:not(.check-list) { padding-left: 1.2rem; }
.section-head--center + .fliesstext { margin-inline: auto; }

.check-list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.check-list li { position: relative; padding-left: 2.1rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ==========================================================================
   Kurskarten
   ========================================================================== */
.kurse { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.kurs {
  --kurs: var(--blau-hell); --kurs-tief: var(--blau);
  display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden;
  background: #fff; border-radius: var(--radius); color: var(--text); text-decoration: none;
  box-shadow: 0 2px 0 rgba(19,40,107,.04), 0 18px 40px -26px rgba(19,40,107,.45);
  border: 1px solid var(--linie);
  transition: box-shadow .2s, border-color .2s;
}
.kurs:hover { border-color: var(--kurs); box-shadow: 0 24px 50px -26px rgba(19,40,107,.55); }
.kurs--baby       { --kurs: var(--k-baby);       --kurs-tief: var(--k-baby-tief); }
.kurs--kinder     { --kurs: var(--k-kinder);     --kurs-tief: var(--k-kinder-tief); }
.kurs--schule     { --kurs: var(--k-schule);     --kurs-tief: var(--k-schule-tief); }
.kurs--erwachsene { --kurs: var(--k-erwachsene); --kurs-tief: var(--k-erwachsene-tief); }
.kurs--aquafitness  { --kurs: var(--k-aquafitness);  --kurs-tief: var(--k-aquafitness-tief); }
.kurs--privat     { --kurs: var(--k-privat);     --kurs-tief: var(--k-privat-tief); }
.kurs--brust      { --kurs: var(--k-brust);      --kurs-tief: var(--k-brust-tief); }
.kurs--kraul      { --kurs: var(--k-kraul);      --kurs-tief: var(--k-kraul-tief); }
.kurs--offen      { --kurs: var(--k-offen);      --kurs-tief: var(--k-offen-tief); }
.kurs-bild { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--himmel); }
.kurs-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kurs-welle { position: absolute; left: 0; bottom: -1px; width: 100%; height: 46px; }
.kurs-welle .farbe { fill: var(--kurs); }
.kurs-welle .weiss { fill: #fff; }
.kurs-symbol {
  position: relative; z-index: 1; display: grid; place-items: center; width: 74px; height: 74px; margin-top: -44px;
  border-radius: 50%; background: var(--kurs); border: 5px solid #fff; color: #fff;
}
.kurs--schule .kurs-symbol, .kurs--offen .kurs-symbol { color: var(--navy); }
.kurs-symbol .ico { width: 2rem; height: 2rem; }
.kurs-text { display: flex; flex-direction: column; align-items: center; flex: 1; padding: .9rem 1.4rem 1.6rem; }
.kurs-name { margin: 0 0 .4rem; font-size: 1.3rem; font-weight: 800; color: var(--navy); line-height: 1.2; }
.kurs-beschreibung { margin: 0 0 1.3rem; color: var(--text-2); line-height: 1.55; }
.kurs-mehr {
  margin-top: auto; display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.4rem; border-radius: 999px;
  background: var(--kurs-tief); color: #fff; font-weight: 600; transition: filter .2s;
}
.kurs--schule .kurs-mehr, .kurs--offen .kurs-mehr { background: var(--kurs); color: var(--navy-tief); }
.kurs-unter { display: block; margin: -.1rem 0 1.1rem; color: var(--kurs-tief); font-weight: 600; font-size: .9rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1.4; }
.kurs-unter + .kurs-beschreibung { margin-top: -.5rem; }
/* Fünf Karten (z.B. Erwachsenenschwimmen): drei oben, zwei breitere unten */
@media (min-width: 1000px) {
  .kurse:has(> .kurs:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kurse:has(> .kurs:nth-child(5):last-child) > .kurs { grid-column: span 2; }
  .kurse:has(> .kurs:nth-child(5):last-child) > .kurs:nth-child(n+4) { grid-column: span 3; }
  .kurse:has(> .kurs:nth-child(5):last-child) > .kurs:nth-child(n+4) .kurs-bild { aspect-ratio: 16 / 7; }
}
.kurs-mehr::after { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: var(--pfeil) center / contain no-repeat; mask: var(--pfeil) center / contain no-repeat; }
.kurs:hover .kurs-mehr { filter: brightness(.92); }

/* ==========================================================================
   Vorteile / Symbol-Spalten
   ========================================================================== */
.merkmale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.merkmal { padding: .5rem clamp(1rem, 2.5vw, 2rem); text-align: center; }
.merkmal + .merkmal { border-left: 1px solid var(--linie); }
.merkmal-symbol { display: inline-grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: .8rem; color: var(--navy); }
.section--eis .merkmal-symbol { border-radius: 50%; background: var(--himmel-2); color: var(--navy); }
.merkmal-symbol .ico { width: 2.6rem; height: 2.6rem; }
.section--eis .merkmal-symbol .ico { width: 2rem; height: 2rem; }
.merkmal-titel { margin-bottom: .4rem; font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.merkmal-text { color: var(--text-2); line-height: 1.6; }
.merkmal-text p { margin: 0 0 .8em; }
.merkmal-text > :last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .merkmal + .merkmal { border-left: 0; border-top: 1px solid var(--linie); padding-top: 1.5rem; margin-top: 1rem; }
}

/* Lernziele, Schritte, Fakten */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.steps li { counter-increment: schritt; position: relative; padding-top: 3.6rem; }
.steps li::before {
  content: counter(schritt); position: absolute; top: 0; left: 0; display: grid; place-items: center;
  width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--akzent); color: #fff; font-weight: 800; font-size: 1.2rem;
}
.steps h3 { margin-bottom: .4rem; }
.steps p { color: var(--text-2); }

.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; margin: 0; }
.fakt { padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--himmel); }
.section--eis .fakt { background: #fff; }
.fakt dt { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; color: var(--text-2); }
.fakt dt .ico { color: var(--akzent-tief); }
.fakt dd { margin: .3rem 0 0; font-weight: 600; font-size: 1.1rem; color: var(--navy); line-height: 1.35; }

/* ==========================================================================
   Bild & Text, Kästen
   ========================================================================== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.split--reverse .split-media { order: 2; }
.split:not(:has(.split-media)) { grid-template-columns: minmax(0, 1fr); }
.split.split--text { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.split-media img { width: 100%; max-height: 640px; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 50px -30px rgba(19,40,107,.55); }
.split-text > :last-child { margin-bottom: 0; }
.split-text h2::after { content: ""; display: block; width: 110px; height: 12px; margin-top: .55rem; background: var(--blau-hell);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 14' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M2 9c14-7 28-7 42 0s28 7 42 0 28-7 42 0'/%3E%3C/svg%3E") left center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 14' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M2 9c14-7 28-7 42 0s28 7 42 0 28-7 42 0'/%3E%3C/svg%3E") left center / contain no-repeat; }
.split-zitat { margin: 0 0 1.3rem; padding: 0; font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 800; color: var(--navy); line-height: 1.45; }
.split-zitat p { margin: 0; }
.split-zitat cite { display: block; margin-top: .4rem; font-style: normal; font-weight: 600; font-size: .95rem; color: var(--text-2); }

.info-box { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 18px; background: var(--himmel); }
.section--eis .info-box:not([class*="info-box--"]) { background: #fff; }
.info-box--eis { background: var(--himmel); }
.info-box--sonne { background: #fff3d6; }
.info-box--wiese { background: #e7f4e1; }
.info-box > :last-child { margin-bottom: 0; }
.info-box h3 { margin-bottom: .5rem; }
.info-box--zitat { padding: 0 0 0 1.4rem; background: none; border-left: 4px solid var(--akzent); border-radius: 0; font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 800; color: var(--navy); line-height: 1.45; }
.info-box--zitat cite { display: block; margin-top: .5rem; font-style: normal; font-weight: 600; font-size: 1rem; color: var(--text-2); }

/* Text mit großem Symbol (z.B. „Meine Philosophie“) */
.symboltext { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: start; max-width: 64rem; }
.symboltext-symbol { color: var(--blau-hell); }
.symboltext-symbol .ico { width: clamp(4rem, 9vw, 6.5rem); height: clamp(4rem, 9vw, 6.5rem); }
.symboltext h2 { margin-bottom: .6rem; }
.symboltext-einleitung { font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.symboltext-schluss { position: relative; margin: 1.8rem 0 0; padding-top: 1.3rem; font-size: 1.1rem; font-weight: 800; color: var(--navy); }
.symboltext-schluss::before { content: ""; position: absolute; top: 0; left: 0; width: 110px; height: 3px; border-radius: 3px; background: var(--blau-hell); }
.symboltext-text > :last-child { margin-bottom: 0; }
@media (max-width: 600px) { .symboltext { grid-template-columns: minmax(0, 1fr); } }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); color: var(--text); }
.card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.4rem 1.5rem; }
.card-body > :last-child { margin-bottom: 0; }
.card-date { margin-bottom: .3rem; font-weight: 600; font-size: .92rem; color: var(--akzent-tief); }
.card-cta { margin-top: auto; padding-top: .6rem; font-weight: 600; }
.price { font-size: 1.8rem; font-weight: 800; color: var(--navy); margin-bottom: .6rem; }

.hinweisband {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--radius); background: var(--himmel);
}
.hinweisband-text { flex: 1 1 24rem; }
.hinweisband-text > :last-child { margin-bottom: 0; }

.einzelbild img { width: 100%; border-radius: var(--radius); }
.einzelbild figcaption { margin-top: .6rem; color: var(--text-2); font-size: .95rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--linie); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .85rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
thead th { background: var(--himmel); font-size: .95rem; color: var(--navy); }
tbody tr:last-child > * { border-bottom: 0; }

/* Fotoimpressionen und Lightbox */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .9rem; }
.gallery-bild { display: block; overflow: hidden; border-radius: 16px; background: var(--himmel); }
.gallery-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery--ganz .gallery-bild img { aspect-ratio: auto; object-fit: contain; }
.gallery--streifen { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.gallery--streifen .gallery-bild { flex: 0 0 min(80%, 430px); scroll-snap-align: start; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 4vmin; background: rgba(11, 29, 79, .92); }
.lightbox.ist-offen { display: grid; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 12px; }
.lightbox-zu { position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: #fff; border: 0; color: var(--navy); font-size: 1.8rem; line-height: 1; }

/* ==========================================================================
   Gutschein
   ========================================================================== */
.gutschein { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.gutschein-karte {
  position: relative; aspect-ratio: 1.55; padding: 4.5% 5%; border-radius: 22px; transform: rotate(-3deg); container-type: inline-size;
  background: linear-gradient(150deg, #fff 0%, var(--himmel) 100%); border: 2px solid var(--navy);
  box-shadow: 0 34px 60px -30px rgba(19,40,107,.55), inset 0 0 0 7px #fff, inset 0 0 0 9px rgba(19,40,107,.15);
  color: var(--navy);
}
.gutschein-logo { position: absolute; right: 6%; bottom: 10%; width: 28%; transform: rotate(3deg); }
.gutschein-wort { margin: 0; font-size: 11cqw; font-weight: 800; line-height: 1; color: var(--navy); }
.gutschein-fuer { margin: 1.2cqw 0 3.6cqw; font-weight: 600; font-size: 3.1cqw; line-height: 1.35; color: var(--text-2); }
.gutschein-zeilen { display: grid; gap: 2.4cqw; width: 54%; }
.gutschein-zeilen span { display: block; padding-bottom: .6cqw; border-bottom: 2px dotted rgba(19,40,107,.4); font-weight: 600; font-size: 3cqw; line-height: 1.3; }
.gutschein-spruch { position: absolute; left: 6.5cqw; bottom: 5cqw; margin: 0; font-weight: 600; font-size: 3cqw; color: var(--blau); }
.gutschein-text > :last-child { margin-bottom: 0; }

.angebote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 1040px; margin-inline: auto; }
@media (max-width: 759px) { .angebote { grid-template-columns: minmax(0, 1fr); } }
.angebot {
  --kurs: var(--navy); --kurs-tief: var(--navy);
  display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: var(--radius);
  border: 1px solid var(--linie); box-shadow: 0 18px 40px -28px rgba(19,40,107,.45);
}
.angebot--baby { --kurs: var(--k-baby); } .angebot--kinder { --kurs: var(--k-kinder); }
.angebot--schule { --kurs: var(--k-schule); } .angebot--erwachsene { --kurs: var(--k-erwachsene); }
.angebot--aquafitness { --kurs: var(--k-aquafitness); } .angebot--privat { --kurs: var(--k-privat); }
.angebot--brust { --kurs: var(--k-brust); } .angebot--kraul { --kurs: var(--k-kraul); } .angebot--offen { --kurs: var(--k-offen); }
.angebot-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.5rem 1.5rem 1rem; }
.angebot-symbol { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--kurs); color: #fff; }
.angebot--schule .angebot-symbol, .angebot--offen .angebot-symbol { color: var(--navy); }
.angebot-symbol .ico { width: 1.8rem; height: 1.8rem; }
.angebot h3 { margin: .2rem 0 .5rem; font-size: 1.25rem; font-weight: 800; }
.angebot-kopf p { color: var(--text-2); line-height: 1.6; }
.angebot-kopf > div > :last-child { margin-bottom: 0; }
.angebot-bild { position: relative; margin-top: auto; }
.angebot-bild img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.angebot-bild .welle-oben { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); max-width: none; height: 36px; fill: #fff; z-index: 1; }

/* Foto-Band mit Satz (z.B. Abschluss der Gutschein-Seite) */
.bildband { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: clamp(260px, 32vw, 400px); padding: 3rem 0; }
.bildband-foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.bildband .welle-oben { position: absolute; left: 0; top: -1px; width: 100%; height: clamp(24px, 4vw, 60px); fill: #fff; }
.bildband-satz .herz { color: #fff; }
.bildband-satz {
  justify-self: start; max-width: 30rem; margin: 0 0 0 clamp(1rem, 6vw, 5rem); padding: 1.4rem 1.8rem; transform: rotate(-4deg);
  background: var(--blau); color: #fff; border-radius: 14px; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800; line-height: 1.4;
  box-shadow: 0 20px 40px -20px rgba(11,29,79,.6);
}

/* Aufruf-Band (hell, wie „Gutschein per E-Mail bestellen“) */
.cta-band { padding-block: clamp(2rem, 5vw, 3.5rem); }
.cta-innen {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2rem); align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.25rem); border-radius: var(--radius); background: var(--himmel);
}
.cta-symbol { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--navy); color: #fff; }
.cta-symbol .ico { width: 2rem; height: 2rem; }
.cta-text h2 { margin: 0 0 .35rem; font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.cta-text p { margin: 0; color: var(--text-2); }
.cta-knoepfe { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; }
@media (min-width: 861px) {
  .cta-text { padding-left: clamp(1rem, 3vw, 2rem); border-left: 1px solid var(--himmel-2); }
}
@media (max-width: 860px) {
  .cta-innen { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .cta-knoepfe { flex-direction: row; flex-wrap: wrap; }
}

.map-consent { padding: 1.75rem; border: 2px dashed var(--linie); border-radius: 18px; background: var(--himmel); }
.map-frame { width: 100%; min-height: 380px; border: 0; border-radius: 18px; }

/* Dateien zum Herunterladen */
.downloads { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.download { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.3rem 0; border-bottom: 1px solid var(--linie); }
.download > .ico { width: 2.4rem; height: 2.4rem; color: var(--akzent-tief); }
.download-text { flex: 1 1 18rem; }
.download-text h3 { margin-bottom: .2rem; }
.download-text > :last-child { margin-bottom: 0; }
.download-folgt { padding: .5rem .9rem; border-radius: 999px; background: var(--himmel); font-weight: 600; font-size: .92rem; color: var(--text-2); }

/* Partner */
.partner { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.5rem 2rem; }
.partner-link { display: block; text-decoration: none; }
.partner-logo { max-height: 72px; width: auto; }
.partner-name { font-weight: 800; font-size: 1.15rem; color: var(--navy); }
.partner p { margin-top: .5rem; color: var(--text-2); font-size: .97rem; }

/* ==========================================================================
   Listen der Verwaltung
   ========================================================================== */
.news { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(1.5rem, 4vw, 2.5rem); }
.news-eintrag { overflow: hidden; border-radius: var(--radius); background: #fff; border: 1px solid var(--linie); }
.news-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.news-text { padding: 1.3rem 1.4rem 1.5rem; }
.news-datum { margin-bottom: .3rem; font-weight: 600; font-size: .9rem; color: var(--blau); }
.news-text h3 { font-size: 1.2rem; font-weight: 800; }
.news-text > :last-child { margin-bottom: 0; }
.liste-leer { color: var(--text-2); }


.stimmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.stimme { margin: 0; padding: 1.6rem 1.6rem 1.4rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--linie); }
.section--eis .stimme { border-color: transparent; }
.stimme blockquote { margin: 0 0 .9rem; }
.stimme blockquote::before { content: ""; display: block; width: 2rem; height: 2rem; margin-bottom: .6rem; background: var(--blau-hell); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 7.5c-3 1-4.5 3-4.5 6.5v3h5v-5H8M19.5 7.5c-3 1-4.5 3-4.5 6.5v3h5v-5h-2.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 7.5c-3 1-4.5 3-4.5 6.5v3h5v-5H8M19.5 7.5c-3 1-4.5 3-4.5 6.5v3h5v-5h-2.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.stimme blockquote p { margin: 0; font-size: 1.08rem; color: var(--text); }
.stimme figcaption { font-weight: 600; color: var(--navy); }
.stimmen-hinweis { margin: 1.5rem 0 0; font-size: .88rem; color: var(--text-2); }

.faq-liste { max-width: 52rem; display: grid; gap: .7rem; }
.section-head--center + .faq-liste { margin-inline: auto; }
.faq { border-radius: 16px; background: #fff; border: 1px solid var(--linie); }
.section--eis .faq { border-color: transparent; }
.faq summary { position: relative; display: block; padding: 1.05rem 3.2rem 1.05rem 1.3rem; cursor: pointer; list-style: none; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 1.3rem; top: 50%; width: 15px; height: 2.5px; border-radius: 2px; background: var(--blau); }
.faq summary::after { transform: rotate(90deg); }
.faq[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--blau); }
.faq-antwort { padding: 0 1.3rem 1.2rem; color: var(--text-2); }
.faq-antwort > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Fußbereich
   ========================================================================== */
.fuss {
  position: relative; isolation: isolate; overflow: hidden; color: rgba(255,255,255,.88);
  padding: clamp(5.5rem, 9vw, 7.5rem) 0 2rem; background: var(--navy);
}
.fuss-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.fuss::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(19,40,107,.62) 0%, rgba(19,40,107,.78) 45%, rgba(11,29,79,.92) 100%); }
.fuss .welle-oben { position: absolute; left: 0; top: -1px; width: 100%; height: clamp(40px, 6vw, 80px); fill: #fff; }
main:has(> .section--eis:last-child) + .fuss .welle-oben { fill: var(--himmel); }
main:has(> .bildband:last-child) + .fuss .welle-oben { display: none; }
main:has(> .bildband:last-child) + .fuss { padding-top: clamp(3.5rem, 6vw, 5rem); }
.fuss-raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.fuss-marke img { width: 200px; margin-bottom: 1rem; }
.fuss-spruch { font-weight: 600; font-size: 1.1rem; color: #fff; }
.fuss-titel { margin-bottom: .8rem; font-size: 1rem; font-weight: 800; color: #fff; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.fuss a { color: rgba(255,255,255,.88); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss p { color: rgba(255,255,255,.88); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.18); font-size: .9rem; }
.fuss-unten p { margin: 0; }
.fuss-unten nav { display: flex; gap: 1.4rem; }
.fuss-knoepfe { margin: 1.1rem 0 0; }
.mobil-leiste { display: none; }
@media (max-width: 959px) {
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-marke { grid-column: 1 / -1; }
}

/* ==========================================================================
   Erwachsenenschwimmen (Oktober 2026): heller Seitenkopf, Kurskarten mit
   Beschreibung, zentrierte Angebotskarten, Foto mit Symbol-Liste
   ========================================================================== */
.seitenkopf-absatz { max-width: 40rem; margin-top: 1rem; }
.seitenkopf-absatz p { margin: 0 0 .8em; color: #fff; font-size: 1.05rem; }
.seitenkopf-knopf { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.6rem; }
.seitenkopf-link { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .35em; }
.seitenkopf-link:hover { color: #fff; text-decoration-thickness: 2.5px; }

.seitenkopf--hell { color: var(--text); padding: 0 0 clamp(.5rem, 2vw, 1.25rem); isolation: auto; }
.seitenkopf--hell::before { display: none; }
.seitenkopf-band { position: relative; height: clamp(140px, 18vw, 260px); overflow: hidden; }
.seitenkopf--hell .seitenkopf-foto { z-index: 0; }
.seitenkopf--hell .welle-unten { z-index: 1; }
.seitenkopf--hell .welle-unten .welle-hell { fill: var(--akzent); }
.seitenkopf--hell .brotkrumen { margin: .4rem 0 .6rem; }
.seitenkopf--hell .brotkrumen li { color: var(--text-2); }
.seitenkopf--hell .brotkrumen a { color: var(--blau); }
.seitenkopf-titel { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: center; margin-top: clamp(.25rem, 1.5vw, 1rem); }
.seitenkopf-titel--symbol { grid-template-columns: auto minmax(0, 1fr); }
.seitenkopf-symbol {
  display: grid; place-items: center; width: clamp(76px, 10vw, 124px); aspect-ratio: 1; border-radius: 50%;
  background: var(--akzent); color: #fff; box-shadow: 0 18px 38px -20px rgba(19,40,107,.6);
}
.seitenkopf-symbol .ico { width: 54%; height: 54%; }
body[data-farbe="schule"] .seitenkopf-symbol, body[data-farbe="offen"] .seitenkopf-symbol { color: var(--navy); }
.seitenkopf--hell h1 { margin-bottom: .3rem; color: var(--navy); }
@media (max-width: 480px) {
  /* schmale Handys: Symbol über die Überschrift, damit Kursnamen wie „Brustschwimmen“ ganz bleiben */
  .seitenkopf-titel--symbol { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .seitenkopf-titel--symbol .seitenkopf-symbol { width: 64px; }
  .seitenkopf-titel--symbol h1 { font-size: clamp(1.75rem, 9.6vw, 2.1rem); }
}
.seitenkopf--hell .seitenkopf-lead { color: var(--akzent-tief); font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.seitenkopf--hell .seitenkopf-absatz p { color: var(--text); }
.seitenkopf--hell .seitenkopf-link { color: var(--blau); }
.seitenkopf--hell + .section:not([class*="section--"]) { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

.kursdetails { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.kursdetail:not([class*="kurs--"]) { --kurs: var(--blau-hell); --kurs-tief: var(--blau); }
.kursdetail {
  --karte: #f4f9fe;
  display: flex; flex-direction: column; overflow: hidden; background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 18px 40px -28px rgba(19,40,107,.45);
}
.kursdetail .kurs-bild { aspect-ratio: 16 / 8; }
.kursdetail .kurs-welle .weiss { fill: var(--karte); }
.kursdetail .kurs-symbol { margin: -44px 0 0 1.5rem; }
.kurs--schule.kursdetail .kurs-symbol, .kurs--offen.kursdetail .kurs-symbol { color: var(--navy); }
.kursdetail-text { display: flex; flex-direction: column; flex: 1; padding: .6rem 1.6rem 1.6rem; }
.kursdetail h3 { margin: .3rem 0 .7rem; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.kursdetail-knopf { margin: auto 0 0; padding-top: .6rem; }
.btn--kurs { background: var(--kurs-tief); color: #fff; }
.btn--kurs:hover { filter: brightness(.92); color: #fff; }
.kurs--schule .btn--kurs, .kurs--offen .btn--kurs { background: var(--kurs); color: var(--navy-tief); }

.angebote--mittig { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); max-width: none; }
.angebote--mittig .angebot-kopf { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 1.75rem 1.5rem 1.1rem; }
.angebote--mittig .angebot-symbol { width: 84px; height: 84px; }
.angebote--mittig .angebot-symbol .ico { width: 2.3rem; height: 2.3rem; }
.angebote--mittig .angebot:not([class*="angebot--"]) .angebot-symbol { background: var(--himmel); color: var(--navy); }
.angebote--mittig h3::after {
  content: ""; display: block; width: 64px; height: 9px; margin: .55rem auto 0; background: var(--blau-hell);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 14' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M2 9c14-7 28-7 42 0s28 7 42 0 28-7 42 0'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 14' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M2 9c14-7 28-7 42 0s28 7 42 0 28-7 42 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bildliste { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: stretch; }
.bildliste--ohne-bild { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.bildliste-bild img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 50px -30px rgba(19,40,107,.55); }
.bildliste-kasten { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--himmel); }
.section--eis .bildliste-kasten { background: #fff; }
.bildliste-kasten h3 { margin-bottom: 1.1rem; font-size: 1.3rem; }
.symbolliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.symbolliste li { display: flex; align-items: center; gap: .9rem; color: var(--navy); line-height: 1.4; }
.symbolliste-symbol { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: #fff; color: var(--blau); }
.section--eis .symbolliste-symbol { background: var(--himmel); }
.symbolliste-symbol .ico { width: 1.5rem; height: 1.5rem; }
.bildliste-hinweis { max-width: 38rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; text-align: center; color: var(--navy); font-weight: 600; }

.split--ohne-rahmen { align-items: center; }
/* Spalten mit Symbol, die an einen Abschnitt angeschlossen sind: als hellblauer Kasten */
.anschluss > .merkmale { padding: clamp(1rem, 2.5vw, 1.5rem) 0; border-radius: var(--radius); background: var(--himmel); }
.section--eis .anschluss > .merkmale { background: #fff; }
.split--ohne-rahmen .split-media img { max-height: none; border-radius: 0; box-shadow: none; object-fit: contain; }

/* ==========================================================================
   Kinderseiten (Entwürfe der Kundin vom 20.10.2026): Titelbild mit Drache,
   Drachenlevels, kompakte Symbolleiste, gelbes Band mit Drache
   ========================================================================== */
.titelbild--figur { min-height: clamp(440px, 58vh, 600px); padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 6vw, 5.5rem); }
.titelbild--figur::before { background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 36%, rgba(255,255,255,.4) 56%, rgba(255,255,255,0) 70%); }
.titelbild--figur .titelbild-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.titelbild--figur .titelbild-text { max-width: 560px; }
.titelbild--figur h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); }
.titelbild--figur .titelbild-text .titelbild-unter { font-size: clamp(1.4rem, 2.5vw, 1.95rem); font-weight: 800; }
.titelbild--figur .titelbild-text p:not([class]) { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--navy); }
/* Der Drache steht mit seinen Spritzern im Wasser – die Welle unten liegt davor */
.titelbild-figur { justify-self: end; width: min(100%, 560px); height: auto; margin-bottom: clamp(-6rem, -7vw, -3rem); }

.stufen { list-style: none; margin: 0; padding: 0; counter-reset: stufe; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.stufe {
  --stufe: var(--blau-hell);
  counter-increment: stufe; position: relative; display: flex; flex-direction: column; padding: .9rem .9rem 1.4rem; text-align: center;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 18px 40px -30px rgba(19,40,107,.5);
}
.stufe::before {
  content: counter(stufe); position: absolute; z-index: 1; top: .8rem; left: .8rem; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--stufe); color: #fff; font-size: 1.55rem; font-weight: 800; line-height: 1;
  box-shadow: 0 6px 14px -6px rgba(19,40,107,.55);
}
.stufe-bild { aspect-ratio: 460 / 256; }
.stufe-bild img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.stufe-name {
  position: relative; margin: -1.3rem 0 .9rem; padding: .55rem 1rem .6rem; border-radius: 14px; background: var(--stufe); color: #fff;
  font-size: 1.25rem; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,.18); box-shadow: 0 10px 20px -12px rgba(19,40,107,.55);
}
.stufe-text { color: var(--navy); line-height: 1.5; }
.stufe-text p { margin: 0 0 .6em; }
.stufe-text > :last-child { margin-bottom: 0; }
/* Farben mit genug Kontrast für weiße Schrift */
.stufe--hellblau { --stufe: #1b86d4; }
.stufe--gruen    { --stufe: #2c8a2f; }
.stufe--blau     { --stufe: #1a52c8; }
.stufe--orange   { --stufe: #d97400; }
.stufe--tuerkis  { --stufe: var(--k-kinder-tief); }
.stufe--violett  { --stufe: var(--k-aquafitness-tief); }

/* kompakte Leiste: viele kurze Punkte mit kleinem Symbol (z.B. „Was dich erwartet“) */
.merkmale--leiste {
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 190px), 1fr)); row-gap: 1.4rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(.5rem, 2vw, 1.5rem); border-radius: var(--radius); background: var(--himmel);
}
.section--eis .merkmale--leiste { background: #fff; }
.merkmale--leiste .merkmal { padding: .25rem clamp(.5rem, 1.2vw, 1rem); }
.merkmale--leiste .merkmal + .merkmal { border: 0; margin: 0; padding-top: .25rem; }
.merkmale--leiste .merkmal-symbol { width: 3.6rem; height: 3.6rem; margin-bottom: .6rem; border-radius: 50%; background: #fff; color: var(--blau); box-shadow: 0 8px 18px -12px rgba(19,40,107,.5); }
.merkmale--leiste .merkmal-symbol .ico { width: 1.9rem; height: 1.9rem; }
.merkmale--leiste .merkmal-titel { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
@media (min-width: 1000px) {
  .merkmale--leiste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .merkmale--leiste .merkmal + .merkmal { border-left: 1px solid var(--himmel-2); }
}
/* eigenes Bild statt Symbol */
.merkmal-bild { display: block; width: clamp(110px, 12vw, 150px); height: auto; aspect-ratio: 6 / 5; object-fit: contain; margin: 0 auto .7rem; }

.kursdetails--breit .kurs-bild { aspect-ratio: 5 / 2; }
/* Zeichnung unten rechts in der Karte – der Text lässt ihr unten Platz */
.kursdetail--figur { position: relative; }
.kursdetail--figur .kursdetail-text { padding-bottom: clamp(9rem, 14vw, 11rem); }
.kursdetail-figur { position: absolute; right: .75rem; bottom: .5rem; width: clamp(150px, 17vw, 210px); height: auto; pointer-events: none; }

.hinweisband--sonne { background: #fff6d6; border: 2px solid #f4c43c; }
/* der Drache schaut wie im Entwurf oben und links über den Rand des Bandes */
.hinweisband--figur { position: relative; margin-block: clamp(1.5rem, 4vw, 2.5rem); padding-left: clamp(14.5rem, 29vw, 24rem); }
.hinweisband-figur { position: absolute; left: -.75rem; top: 50%; width: clamp(220px, 27vw, 360px); height: auto; transform: translateY(-56%); pointer-events: none; }
.hinweisband--figur h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.hinweisband--figur .hinweisband-text a { font-weight: 800; }

/* ==========================================================================
   Kleinere Bildschirme
   ========================================================================== */
@media (max-width: 860px) {
  .titelbild { display: block; min-height: 0; padding: 0 0 4.5rem; }
  .titelbild-foto { position: static; height: 240px; z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .titelbild--gutschein .titelbild-innen { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 0; }
  .titelbild--gutschein .gutschein-karte { width: min(100%, 340px); margin: -130px auto 0; }
  .titelbild::before { display: none; }
  .titelbild-innen { padding-top: 2rem; }
  .split, .split.split--text, .gutschein { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split-media { order: 0; }
  .gutschein-karte { max-width: 460px; }
  .angebot-kopf { grid-template-columns: minmax(0, 1fr); }
  .bildliste { grid-template-columns: minmax(0, 1fr); }
  .bildliste-bild img { min-height: 0; height: auto; }
  /* Titelbild mit Drache: der Drache steht oben rechts im Foto, der Text darunter */
  .titelbild--figur { padding-bottom: 3.5rem; }
  .titelbild--figur .titelbild-innen { display: block; }
  .titelbild-figur { position: absolute; z-index: 1; top: clamp(.5rem, 3vw, 1.25rem); right: 3%; width: min(56vw, 290px); margin: 0; }
  .titelbild--figur h1 { font-size: clamp(1.75rem, 8.6vw, 2.6rem); }
}
@media (min-width: 560px) and (max-width: 999px) {
  .stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* Band mit Drache: Drache mittig darüber, Text darunter */
  .hinweisband--figur { justify-content: center; margin-top: 5.5rem; padding: 4.5rem 1.25rem 1.5rem; text-align: center; }
  .hinweisband-figur { left: 50%; top: 0; width: 230px; transform: translate(-50%, -62%); }
}
@media (max-width: 759px) {
  /* lange Wörter wie „Erwachsenenschwimmen“ in großen Überschriften trennen */
  h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .mobil-leiste {
    display: flex; gap: .6rem; position: fixed; z-index: 40; left: var(--rand); right: var(--rand);
    bottom: calc(.9rem + env(safe-area-inset-bottom));
  }
  .mobil-leiste .btn { flex: 1; padding-inline: .9rem; white-space: nowrap; box-shadow: 0 16px 36px -10px rgba(11,29,79,.5); }
  .mobil-leiste .btn--blau { flex: 1.3; }
  body[data-seite="kontakt"] .mobil-leiste, body.nav-offen .mobil-leiste { display: none; }
  .fuss { padding-bottom: calc(2rem + 84px); }
  .fuss-raster { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 380px) {
  .mobil-leiste .btn { font-size: .9rem; padding-inline: .6rem; }
}

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

@media print {
  .kopfzeile, .mobil-leiste, .welle-unten, .welle-oben { display: none !important; }
  .seitenkopf, .fuss { color: #000; }
  .seitenkopf *, .fuss * { color: #000 !important; }
  .seitenkopf::before, .fuss::before, .seitenkopf-foto, .fuss-foto { display: none; }
}