/* =========================================================================
   Skipperfriends – gemeinsames Design-System
   Übernommen von der Live-Website skipperfriends.de:
   Archivo 900 in GROSSBUCHSTABEN für Überschriften, Open Sans für Fließtext,
   Navy #001F4B, Gelb #FFBE24, Himmelblau #7FB8FF, Pillen-Buttons.
   ========================================================================= */

/* ---------- Schriften (lokal, DSGVO-konform, variable Fonts) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/opensans-var-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/opensans-var-latin-ext.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design-Tokens (Werte 1:1 von skipperfriends.de) ---------- */
:root {
  --blue:        #001f4b;   /* Marken-Navy – exakt wie live */
  --blue-mid:    #073066;   /* helleres Blau für Verläufe */
  --blue-soft:   #15568a;   /* Akzent-Blau für Links */
  --sky:         #7fb8ff;   /* Himmelblau der Foto-Bänder */
  --sky-pale:    #d3ebff;   /* helles Wasserblau */
  --yellow:      #ffbe24;   /* Marken-Gelb – exakt wie live */
  --yellow-dark: #e9a700;
  --cream:       #fff3e4;   /* Sand-/Cremeton */
  --sand:        #f7ddb5;
  --ice:         #e6f4fe;   /* Icon-Hellblau */
  --paper:       #f4f9ff;   /* heller Seitenhintergrund */
  --white:       #ffffff;
  --ink:         #14263f;   /* Fließtext dunkel */
  --muted:       #5b6b82;   /* gedämpfter Text */
  --line:        #dfe9f5;   /* Trennlinien */

  --shadow-sm: 0 2px 8px rgba(0, 31, 75, .07);
  --shadow-md: 0 10px 30px rgba(0, 31, 75, .11);
  --shadow-lg: 0 24px 60px rgba(0, 31, 75, .18);

  --radius:    18px;
  --radius-lg: 28px;
  --container:  1160px;

  --font-head: "Archivo", "Archivo Black", Impact, "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, sans-serif;

  --header-h: 76px;

  /* ---------- Bewegungskurven ----------
     Die eingebauten CSS-Kurven (ease, ease-in-out) starten träge und lassen
     jede Reaktion langsamer wirken, als sie ist. Diese drei Kurven ziehen
     sofort an und laufen sanft aus – dadurch fühlt sich dieselbe Dauer
     schneller an. --ease-out für alles, was auf eine Eingabe reagiert,
     --ease-move für Dinge, die über den Bildschirm wandern,
     --ease-drawer für ein- und ausfahrende Flächen wie das Mobil-Menü. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 18px;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Überschriften wie live: Archivo 900, GROSSBUCHSTABEN, eng gesetzt */
h1, h2, h3, h4 {
  font-family: var(--font-head); font-weight: 900; text-transform: uppercase;
  line-height: 1.08; color: var(--blue); margin: 0 0 .5em; letter-spacing: 0;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.3rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.2; }
h4 { font-size: 1.05rem; }
/* Überschriften auf farbigem Grund */
.section--blue h2, .hero h1, .hero h2 { color: var(--white); }
.section--blue h2.h--yellow, h2.h--yellow { color: var(--yellow); }
p { margin: 0 0 1.1rem; }
strong, b { color: inherit; font-weight: 700; }
h1 strong, h2 strong, h3 strong { color: inherit; }
/* Fokusrahmen als Kontur (wird nie abgeschnitten, anders als ein Schatten):
   Navy auf hellem Grund, Weiss auf den dunklen Baendern - so ist der Rahmen
   immer deutlich sichtbar (WCAG 2.4.11 / 1.4.11). */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
/* Sprunglink "Zum Inhalt springen" - liegt versteckt oben und taucht nur auf,
   wenn man ihn mit der Tastatur anspringt (WCAG 2.4.1). */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 2000;
  background: var(--blue); color: #fff; padding: 11px 18px; border-radius: 10px;
  font-family: var(--font-head); font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,31,75,.25);
}
.skip-link:focus { top: 12px; }
.hero :focus-visible,
.section--blue :focus-visible { outline-color: #ffffff; }

/* ---------- Layout-Helfer ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--paper { background: var(--paper); }
.section--ice   { background: var(--ice); }
.section--cream { background: var(--cream); }
.section--blue  { background: var(--blue); color: #e8eefa; }
.section--blue h3 { color: var(--white); }

/* Vollflächige Farbblöcke wie auf der Live-Seite */
.section--sky { background: var(--sky); color: var(--blue); }
.section--sky h2 { color: var(--blue); }
.section--sky .lead, .section--sky p { color: #0d2b57; }
.section--pale { background: var(--sky-pale); }
.section--pale h2 { color: var(--blue); }
.section--yellow { background: var(--yellow); color: var(--blue); }
.section--yellow h2 { color: var(--blue); }
.section--yellow .lead { color: #4a3a10; }

.narrow { max-width: 820px; margin-inline: auto; }
.center { text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-soft); margin-bottom: 1rem;
}
.section--blue .eyebrow, .hero .eyebrow { color: var(--yellow); }
.section--sky .eyebrow, .section--yellow .eyebrow { color: var(--blue); }

/* ---------- Wellen-Übergang zwischen Farbblöcken (Motiv der Live-Seite) ----------
   Sitzt am oberen Rand einer Sektion; der Pfad wird in der Farbe der
   VORHERIGEN Sektion gefüllt, so fließt ein Block in den nächsten. */
.section--waved { padding-top: clamp(96px, 13vw, 170px); }
.sec-wave {
  position: absolute; top: -1px; left: 0; right: 0; pointer-events: none;
  height: clamp(42px, 6vw, 92px); z-index: 1;
}
.sec-wave svg { width: 100%; height: 100%; display: block; }

/* ---------- Rotierender Kreistext (e-text-path der Live-Seite) ---------- */
.circle-badge {
  position: absolute; top: clamp(24px, 4vw, 60px); right: 4%; z-index: 1;
  width: clamp(110px, 12vw, 170px); aspect-ratio: 1; pointer-events: none;
}
/* In gewellten Sektionen unterhalb der Wellenkante beginnen, sonst
   verschwindet der Text in der gleichfarbigen Welle. */
.section--waved .circle-badge { top: calc(clamp(42px, 6vw, 92px) + clamp(14px, 2vw, 26px)); }
.circle-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.circle-badge text {
  font-family: var(--font-body); font-weight: 300; font-size: 11.2px;
  fill: var(--blue); letter-spacing: .06em;
}
/* Das Original-Steuerrad der Live-Seite in der Mitte des Kreistexts.
   Es dreht sich beim Scrollen mit (JS setzt die Drehung).
   Breite so gewählt, dass es fast an den Schriftring stößt: der Textpfad
   liegt bei Radius 46 von 120, die Unterlängen reichen bis etwa 43 –
   das entspricht 71 % der Kastenbreite. */
.circle-badge__wheel {
  position: absolute; top: 50%; left: 50%; width: 78%; height: auto;
  transform: translate(-50%, -50%); will-change: transform;
}
.circle-badge--light text { fill: rgba(255,255,255,.92); }
.circle-badge--left { right: auto; left: 4%; }
@media (max-width: 960px) { .circle-badge { display: none; } }

/* ---------- Bootssteg-Illustration am Fuß eines Farbblocks ---------- */
.jetty-band { margin: clamp(30px, 5vw, 60px) auto 0; max-width: 1100px; padding-inline: 22px; }
.jetty-band img { width: 100%; height: auto; animation: jettyDrift 9s ease-in-out infinite; }
.section .jetty-band { margin-bottom: calc(-1 * clamp(64px, 9vw, 120px)); }
/* Die Boote am Steg schaukeln sacht hin und her – wie auf der Live-Seite */
@keyframes jettyDrift {
  0%, 100% { transform: translateX(-8px); }
  50%      { transform: translateX(8px); }
}

/* ---------- Abschluss-Sektion (VIEL FREUDE BEIM SEGELN …) ----------
   Das Boot segelt beim Scrollen von links bis zur Mitte und liegt dabei
   in bewegten Wellen, die in die Wasserkante des Footers übergehen. */
.closing { text-align: center; overflow: hidden; padding-bottom: 0; }
.closing h2 { max-width: 17em; margin-inline: auto; }
.closing-sea {
  /* Genau so hoch wie Boot (1,2-mal so hoch wie breit) plus Tiefgang:
     die Mastspitze schließt oben bündig ab, darüber bleibt nur der
     schmale Abstand zur Überschrift. */
  position: relative; height: clamp(302px, 38.9vw, 539px);
  margin-top: clamp(4px, .5vw, 8px);
}
.closing-boat {
  /* Kiel taucht in die Wellen ein, der Rumpf bleibt aber gut sichtbar.
     Das Boot steht fest in der Mitte; die Segelfahrt beim Scrollen läuft
     allein über --sail, das JS setzt. Früher wurde dafür "left" verschoben –
     das zwingt den Browser bei jedem einzelnen Bild dazu, die Seite komplett
     neu auszumessen. Über transform passiert das nicht, die Grafikkarte
     erledigt es nebenbei. Ohne JS und bei reduzierter Bewegung bleibt --sail
     ungesetzt, das Boot liegt dann ruhig in der Mitte. */
  position: absolute; bottom: clamp(12px, 1.3vw, 19px); left: 50%;
  width: clamp(230px, 31vw, 430px); will-change: transform;
  transform: translateX(calc(-50% + var(--sail, 0px)));
}
.closing-waves { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(88px, 13vw, 160px); }
.closing-waves .wl {
  position: absolute; left: 0; bottom: 0; width: 200%; height: 100%;
}
/* Alle drei Lagen leicht durchscheinend, die unterste am dichtesten –
   so bleibt der Kiel im Wasser erkennbar. */
.closing-waves .w1 { animation: waveShift 11s linear infinite; opacity: .82; }
.closing-waves .w2 { animation: waveShift 17s linear infinite reverse; opacity: .6; }
.closing-waves .w3 { animation: waveShift 23s linear infinite; opacity: .4; }
@keyframes waveShift { to { transform: translateX(-50%); } }
/* Fließtext groß und luftig wie live (22px/1.5) */
.lead { font-size: clamp(1.15rem, 2.1vw, 1.4rem); line-height: 1.55; color: var(--muted); }
.section--blue .lead, .section--blue p { color: #cfdcf0; }
/* Die ganz großen zentrierten Aussagen der Live-Seite (40px/60px) */
.statement {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.45; font-weight: 400;
  color: var(--white); margin-inline: auto; max-width: 22em;
}
.statement strong { font-weight: 700; }

/* ---------- Buttons: Pillen, GROSSBUCHSTABEN, gesperrt (wie live) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 1em 2.1em; border-radius: 50px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              background .18s var(--ease-out), color .18s var(--ease-out);
}
.btn--primary { background: var(--yellow); color: var(--blue); box-shadow: 0 8px 22px rgba(255,190,36,.38); }
/* Navy mit gelber Schrift – der große Hero-Button der Live-Seite */
.btn--navy { background: var(--blue); color: var(--yellow); letter-spacing: .1em; padding: 1.15em 3em; font-size: 1.02rem; }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.section--blue .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.6); }
.btn--white { background: var(--white); color: var(--blue); }

/* Anheben und Aufhellen nur dort, wo es einen echten Mauszeiger gibt.
   Auf dem Handy kennt der Browser kein "Maus weg" – der Knopf bliebe nach
   dem Antippen angehoben und hell stehen, bis man irgendwo anders hintippt. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { text-decoration: none; transform: translateY(-2px); }
  .btn--primary:hover { background: #ffcb4d; box-shadow: 0 12px 28px rgba(255,190,36,.5); }
  .btn--navy:hover { background: #062a5f; color: #ffcb4d; }
  .btn--ghost:hover { background: var(--blue); color: var(--white); }
  .section--blue .btn--ghost:hover { background: var(--white); color: var(--blue); }
  .btn--white:hover { background: #f0f6ff; }
  .btn:hover:active { transform: translateY(-2px) scale(.97); }
}
/* Kurzes Eindrücken beim Klicken bzw. Antippen. Gilt auf allen Geräten und
   gibt dem Handy die Rückmeldung, die dort ohne Hover-Effekt fehlen würde. */
.btn:active { transform: scale(.97); transition-duration: .1s; }

/* ---------- Steuerrad als Abschnitts-Trenner (wie live) ---------- */
.wheel-divider { display: grid; place-items: center; padding: clamp(28px, 5vw, 56px) 0 0; }
.wheel-divider img { width: clamp(52px, 7vw, 78px); height: auto; opacity: .95; animation: spin 26s linear infinite; }

/* ---------- Store-Badges ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 14px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--yellow); color: var(--blue);
  padding: 12px 26px 12px 22px; border-radius: 50px; min-width: 200px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
  box-shadow: 0 6px 18px rgba(255,190,36,.32);
}
@media (hover: hover) and (pointer: fine) {
  .store-badge:hover { text-decoration: none; transform: translateY(-3px); background: #ffcb4d; box-shadow: 0 12px 26px rgba(255,190,36,.42); }
  .store-badge:hover:active { transform: translateY(-3px) scale(.98); }
}
.store-badge:active { transform: scale(.98); transition-duration: .1s; }
.store-badge svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge span small { font-size: .7rem; opacity: .75; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.store-badge span b { font-family: var(--font-head); font-size: 1.02rem; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
/* dunkle Variante für helle Flächen, auf denen Gelb untergehen würde */
.store-badge--navy { background: var(--blue); color: var(--white); box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) {
  .store-badge--navy:hover { background: #06305f; box-shadow: var(--shadow-md); }
}
/* Store-Badges in den App-Karten der Startseite: gestapelt, volle Breite */
.stores--card { flex-direction: column; gap: 10px; margin-bottom: 16px; }
.stores--card .store-badge { min-width: 0; width: 100%; justify-content: flex-start; padding: 11px 22px; }
.app-card__more {
  display: inline-flex; align-items: center; gap: .3em;
  font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--blue);
}
.app-card__more::after { content: "→"; transition: transform .18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .app-card__more:hover { text-decoration: none; }
  .app-card__more:hover::after { transform: translateX(3px); }
}

/* =========================================================================
   HEADER / NAVIGATION
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease-out);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--font-head); font-weight: 700; font-size: .84rem;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--blue); padding: 6px 2px; position: relative;
}
.nav-links a::after {
  /* Der Strich liegt in voller Breite bereit und wird nur zusammengestaucht.
     Er fährt über transform ein statt über width zu wachsen: Breite ändern
     zwingt den Browser zum Neuausmessen, Stauchen erledigt die Grafikkarte. */
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--yellow); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease-out);
}
.nav-links a:hover { text-decoration: none; }
.nav-links a.active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover::after { transform: scaleX(1); }
}
.nav-right { display: flex; align-items: center; gap: 18px; }

.lang-toggle {
  /* Innenabstand + runde Knöpfe: die aktive Fläche schwebt mit gleichem
     Abstand im Rahmen, statt ihn auf einer Seite zu überdecken. */
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 999px; background: var(--white); padding: 3px;
}
/* Seit August 2026 sind das echte Verweise auf /en/ statt Umschalt-Knoepfe:
   nur mit eigener Adresse kann Google die englische Fassung ueberhaupt finden. */
.lang-toggle a {
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  border: 0; background: transparent; color: var(--muted); border-radius: 999px;
  padding: 6px 13px; text-decoration: none;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
  display: flex; align-items: center; line-height: 1;
}
.lang-toggle a:hover { color: var(--blue); }
.lang-toggle a.active { background: var(--blue); color: var(--white); }

.nav-toggle {
  display: none; border: 0; background: transparent; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; height: 2.5px; width: 24px; background: var(--blue);
  border-radius: 2px; position: relative;
  /* Beim Öffnen wird der mittlere Strich über "background: transparent"
     ausgeblendet – nicht über opacity, denn opacity auf dem Balken würde die
     beiden anderen Striche mit ausblenden, die als Pseudo-Elemente daran
     hängen. Deshalb muss hier background weich überblendet werden; früher
     stand hier opacity, das ins Leere lief und den Strich hart wegspringen
     ließ, während sich die beiden anderen sauber zum X drehten. */
  transition: transform .25s var(--ease-out), background .2s var(--ease-out);
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top:  7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   WELLE (Marken-Motiv, animiert)
   ========================================================================= */
.wave {
  display: block; width: 100%; height: clamp(48px, 7vw, 96px); line-height: 0;
}
.wave svg { width: 100%; height: 100%; display: block; }
.wave--flip svg { transform: rotate(180deg); }
/* animierte Wellen: mehrere weiße, transparente Schichten – dahinter bleibt das Blau
   sichtbar; wo sie sich überlagern, wird es weißer. Vorderste Schicht = deckend weiß
   und bildet den Übergang zum hellen Bereich darunter. */
.wave-anim {
  position: absolute; left: 0; right: 0; bottom: -1px; pointer-events: none;
  height: clamp(70px, 10vw, 130px); overflow: hidden; z-index: 2;
}
.wave-anim .wl { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; will-change: transform; }
.wave-anim .w3 { animation: waveMove 26s linear infinite; }
.wave-anim .w2 { animation: waveMove 17s linear infinite; }
.wave-anim .w1 { animation: waveMove 12s linear infinite; }
@keyframes waveMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative; color: var(--white); overflow: hidden;
  background: radial-gradient(120% 120% at 15% 0%, var(--blue-mid) 0%, var(--blue) 55%);
  padding: clamp(40px, 4.6vw, 62px) 0 clamp(52px, 6.5vw, 84px);
}
/* Hero mit Wellenband am Fuß: unten so viel Platz, dass zwischen Inhalt
   und Wasserkante ein ruhiger blauer Streifen bleibt (gleiches Maß wie im
   Zahlenband der Startseite). */
.hero--waved { padding-bottom: clamp(96px, 12vw, 152px); }
.hero h1 { color: var(--white); }
.hero .lead { color: #d3dff2; font-size: clamp(1.2rem, 2.3vw, 1.5rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-visual { position: relative; display: flex; justify-content: center; }
.hero-visual img.hero-main { max-height: 440px; width: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
/* Unterzeile direkt unter dem großen App-Namen im Hero */
.hero-sub {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--yellow);
  font-size: clamp(.95rem, 1.9vw, 1.25rem);
  margin: -.35em 0 .9em;
}

/* Zentrierter Hero ohne Bildspalte (Port King / Binnen Skipper) */
.hero-center { text-align: center; max-width: 880px; }
.hero-center .lead { margin-inline: auto; max-width: 36em; }
.hero-center .stores, .hero-center .hero-cta { justify-content: center; }
.hero-center .price-tag { justify-content: center; }

/* Foto-Hero im Stil der Live-Startseite: Bild vollflächig, riesige weiße Headline */
.hero--photo {
  display: grid; place-items: center; text-align: center;
  min-height: clamp(440px, 74vh, 720px);
  padding: clamp(90px, 12vw, 150px) 0;
  background: var(--sky) center/cover no-repeat;
}
.hero--photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,31,75,.30) 0%, rgba(0,31,75,.14) 45%, rgba(0,31,75,.42) 100%);
}
.hero--photo .container { position: relative; z-index: 2; }
.hero--photo h1 {
  font-size: clamp(2.6rem, 8.4vw, 5.6rem); line-height: .98;
  text-shadow: 0 4px 30px rgba(0,31,75,.35);
}
.hero--photo .lead { color: #eef4ff; max-width: 30em; margin-inline: auto; }

/* dekorative bewegte Motive */
.float-wheel {
  position: absolute; width: 120px; opacity: .95;
  animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bob { animation: bob 5.5s ease-in-out infinite; }
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%     { transform: translateY(-14px) rotate(1.5deg); }
}
.sway { animation: sway 7s ease-in-out infinite; transform-origin: bottom center; }
@keyframes sway {
  0%,100% { transform: rotate(-2.5deg); }
  50%     { transform: rotate(2.5deg); }
}

/* =========================================================================
   ZÄHLER
   ========================================================================= */
/* Zahlenband der Startseite: schließt direkt an den Hero an (beides Navy),
   deshalb oben knapp; unten Platz für die animierten Wellen. */
.section--stats {
  padding-top: clamp(30px, 3.4vw, 48px);
  padding-bottom: clamp(96px, 12vw, 152px);
}
/* Sektion direkt hinter dem Wellenband darf ebenfalls enger anschließen */
.section--after-wave { padding-top: clamp(44px, 5.4vw, 74px); }

.counter-row { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; text-align: center; }
.counter-item { min-width: 160px; }
.counter-num {
  font-family: var(--font-head); font-weight: 900; color: var(--yellow);
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1;
}
.counter-label {
  font-family: var(--font-head); font-weight: 700; color: #cfdcf0; margin-top: .5rem;
  text-transform: uppercase; letter-spacing: .1em; font-size: .8rem;
}

/* =========================================================================
   APP-KARTEN (Homepage)
   ========================================================================= */
.app-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.app-card {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); overflow: hidden;
  display: flex; flex-direction: column;
}
@media (hover: hover) and (pointer: fine) {
  .app-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
}
.app-card__top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.app-card__icon { width: 74px; height: 74px; border-radius: 18px; box-shadow: var(--shadow-sm); }
.app-card__badge {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 50px;
}
.badge--live { background: #e4f7ec; color: #1c7a44; }
.badge--soon { background: #fff2cf; color: #8a6400; }
.badge--new  { background: var(--yellow); color: var(--blue); }
.badge--free { background: #e4f7ec; color: #1c7a44; }
.hero .app-card__badge { background: var(--yellow); color: var(--blue); }
.app-card h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: .25rem; }
.app-card p { color: var(--muted); }
.app-card__foot { margin-top: auto; padding-top: 20px; }

/* =========================================================================
   FEATURE-GITTER
   ========================================================================= */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.feature {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}
.feature__ic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ice); color: var(--blue); margin-bottom: 16px;
}
.feature__ic svg { width: 27px; height: 27px; fill: none; stroke: var(--blue); stroke-width: 1.8; }
.feature h3 { margin-bottom: .35rem; }
.feature p { color: var(--muted); margin: 0; font-size: .98rem; }

/* Situationsliste (Manöver) */
.situations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.situation {
  display: flex; gap: 14px; align-items: flex-start; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.situation .check {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow);
  display: grid; place-items: center; margin-top: 2px;
}
.situation .check svg { width: 15px; height: 15px; stroke: var(--blue); stroke-width: 2.4; fill: none; }
.situation p { margin: 0; }
.situation b { color: var(--blue); }

/* =========================================================================
   VIDEOS
   ========================================================================= */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
/* Beide Karten sind gleich hoch (Raster). Braucht eine Unterschrift zwei
   Zeilen und die andere nur eine, muss der weisse Streifen den Rest fuellen –
   sonst schaut unter der kuerzeren der schwarze Kartengrund hervor. */
.video-card {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: #000;
  display: flex; flex-direction: column;
}
.video-card video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: #000; flex: none; }
.video-card figcaption {
  background: var(--white); color: var(--blue); font-family: var(--font-head); font-weight: 600;
  padding: 14px 18px; text-align: center;
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
}

/* =========================================================================
   PRESSESTIMMEN
   Kurzes Zitat mit Quelle, darunter die Berichte als Karten mit Link.
   Bewusst nur Anrisse: ganze Artikel zu uebernehmen waere weder erlaubt
   noch hilfreich – Google wertet abgeschriebene Texte ab.
   ========================================================================= */
.pressezitat {
  max-width: 720px; margin: 34px auto 40px; padding: 0 8px;
  text-align: center; border: 0;
}
.pressezitat p {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.25rem, 3.1vw, 1.7rem); line-height: 1.34;
  color: var(--blue); margin: 0 0 14px; text-wrap: balance;
}
.pressezitat cite {
  font-style: normal; font-size: .92rem; color: rgba(0,31,75,.62);
  letter-spacing: .01em;
}
.presse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
.pressekarte {
  display: flex; flex-direction: column; gap: 9px;
  background: #fff; border: 1px solid rgba(0,31,75,.1); border-radius: var(--radius);
  padding: 22px 24px; text-decoration: none; color: inherit;
  box-shadow: 0 10px 26px rgba(122,84,0,.09);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pressekarte:hover, .pressekarte:focus-visible {
  transform: translateY(-4px); box-shadow: 0 16px 34px rgba(122,84,0,.16);
}
.pressekarte__medium {
  font-family: var(--font-head); font-weight: 600; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: #5b6b82;
}
.pressekarte__titel {
  font-family: var(--font-head); font-weight: 700; font-size: 1.04rem;
  line-height: 1.34; color: var(--blue);
}
.pressekarte__mehr {
  font-weight: 600; font-size: .92rem; color: #0d2f63; margin-top: auto; padding-top: 4px;
}

/* =========================================================================
   FAQ – Aufklapp-Liste (details/summary), zugleich als FAQPage ausgezeichnet
   ========================================================================= */
.faq-list { max-width: 760px; margin: 26px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--white); border: 1px solid var(--line, #d8e5f3); border-radius: var(--radius); box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,31,75,.06)); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 17px 22px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.04rem; color: var(--blue);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--muted); flex: none; transition: transform .2s var(--ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 22px 18px; }
.faq__a p { margin: 0; color: var(--ink); line-height: 1.62; max-width: none; }

/* =========================================================================
   SCREENSHOT-SLIDER
   ========================================================================= */
.shots { padding-bottom: 30px; }
.shots .swiper { padding: 10px 4px 46px; }
.shots .swiper-slide { width: 240px; }
.shots img { border-radius: 20px; box-shadow: var(--shadow-md); }
.swiper-pagination-bullet-active { background: var(--yellow) !important; }
/* Groessere, weiter auseinanderliegende Punkte - leichter zu treffen.
   Wischen und Pfeiltasten bleiben als gleichwertige Alternative (WCAG 2.5.8). */
.shots .swiper-pagination-bullet, .quotes .swiper-pagination-bullet { width: 11px; height: 11px; margin: 0 6px !important; }
/* Auf dem hellblauen Block wäre Gelb kaum sichtbar – dort Navy-Punkte */
.section--pale .swiper-pagination-bullet { background: rgba(0,31,75,.4) !important; }
.section--pale .swiper-pagination-bullet-active { background: var(--blue) !important; }
.swiper-button-next, .swiper-button-prev { color: var(--blue) !important; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 22px !important; font-weight: 700; }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.quotes .swiper { padding-bottom: 50px; }
.quote {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 36px; box-shadow: var(--shadow-sm); height: 100%;
}
.quote__stars { color: var(--yellow); font-size: 1.15rem; letter-spacing: 2px; margin-bottom: 14px; }
.quote p { font-size: 1.08rem; color: var(--ink); font-style: italic; }
/* Auf dem gelben Block: weiße Karten, Sterne und Punkte in Navy */
.section--yellow .quote { border-color: rgba(0,31,75,.14); box-shadow: 0 12px 30px rgba(122,84,0,.16); }
.section--yellow .quote__stars { color: var(--blue); }
.quote__src { display: block; margin-top: 16px; font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); font-style: normal; opacity: .62; }
.voices-note { margin: 28px auto 0; max-width: 620px; font-size: .86rem; line-height: 1.55; color: var(--muted); }
.voices-links { margin: 9px auto 0; font-size: .88rem; color: var(--muted); }
.voices-links a { font-weight: 600; }
.section--yellow .swiper-pagination-bullet { background: rgba(0,31,75,.45) !important; }
.section--yellow .swiper-pagination-bullet-active { background: var(--blue) !important; }
/* Gratis/Pro-Karten auf Gelb: Pro-Rahmen und -Etikett wechseln auf Navy */
.section--yellow .plan { border-color: rgba(0,31,75,.14); }
.section--yellow .plan--pro { border-color: var(--blue); box-shadow: 0 14px 40px rgba(122,84,0,.2); }
.section--yellow .plan__tag--pro { background: var(--blue); color: var(--yellow); }
.section--yellow .plan__note { color: #574210; }

/* =========================================================================
   PERSON (Prof. Knut)
   ========================================================================= */
.person { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; }
.person__photo {
  border-radius: 24px; box-shadow: var(--shadow-md); width: 260px; height: 260px; object-fit: cover;
}
/* Der Seil-Ring des Fotos ist selbst der Rahmen – kein Schatten-Halo darum */
.person__photo--round { border-radius: 50%; box-shadow: none; }
/* sanft schwebendes Foto (wie auf der alten Seite) */
.person__photo--float { animation: floatPhoto 6s ease-in-out infinite; }
/* Zweite Person darunter: Foto auf der anderen Seite, damit der Abschnitt
   nicht zweimal gleich aussieht. Die zweite Runde des Schwebens laeuft
   versetzt, sonst wippen beide Fotos im Gleichschritt. */
.person + .person { margin-top: 56px; }
.person--flip { grid-template-columns: 1fr 260px; }
.person--flip .person__photo--float { animation-delay: -3s; }
@keyframes floatPhoto {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-16px) rotate(1deg); }
}

/* Bewertung im Download-Band. Steht sichtbar auf der Seite, weil Google
   Sterne im Suchergebnis nur zeigt, wenn die Zahl auch fuer Besucher da ist. */
.bewertung {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  margin: -6px 0 4px; font-size: .97rem; color: rgba(255,255,255,.82);
}
.bewertung strong { color: #fff; }
/* Echte Teil-Sterne: zwei identische Reihen uebereinander, die gelbe wird
   auf den Bruchteil beschnitten. Ein "½" als Zeichen sah aus wie ein
   Tippfehler, und Unicode kennt keinen halben Stern. */
.sterne {
  position: relative; display: inline-block; font-size: 1.05rem;
  letter-spacing: .06em; line-height: 1; white-space: nowrap;
}
.sterne__leer { color: rgba(255,255,255,.32); }
.sterne__voll {
  position: absolute; inset: 0; color: var(--yellow); overflow: hidden;
  width: var(--anteil);
}

/* =========================================================================
   PRICE / CTA-BAND
   ========================================================================= */
.price-tag {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  justify-content: center; text-align: center;
  background: rgba(248,192,43,.14); border: 1px solid rgba(248,192,43,.5);
  padding: 10px 20px; border-radius: 999px; margin-bottom: 22px;
}
.price-tag b {
  font-family: var(--font-head); font-weight: 900; text-transform: uppercase;
  font-size: 1.35rem; color: var(--yellow); letter-spacing: .01em;
}
.price-tag span { color: #d3dff2; font-size: .98rem; }

.qr-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.qr-item { text-align: center; }
.qr-item img { width: 128px; height: 128px; background: #fff; padding: 8px; border-radius: 14px; }
.qr-item small {
  display: block; margin-top: 10px; color: #cfdcf0; font-family: var(--font-head);
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
}

/* =========================================================================
   Prominenter Download-Block (oben)
   ========================================================================= */
/* Download-Spalten: Knopf, darunter mittig der passende QR-Code, darunter
   die Zielgruppe. So steht jeder Code genau unter seinem Knopf. */
.get-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 46px; align-items: flex-start; }
.get-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.get-col .qr { width: 158px; height: 158px; background: #fff; padding: 8px; border-radius: 16px; box-shadow: var(--shadow-sm); }
.get-col .store-badge { min-width: 210px; justify-content: center; }
/* nur die Bildunterschrift, nicht das kleine Wort im Knopf */
.get-col > small {
  color: #cfdcf0; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; margin-top: -4px;
}
.subhead { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }

/* =========================================================================
   FOOTER – wie die Live-Seite: Creme-Band mit hellblauer Wellenkante oben,
   Versalien-Links, Sandschräge mit Seegras unten.
   ========================================================================= */
.site-footer {
  position: relative; background: var(--cream); color: var(--blue);
  /* kompaktes Band: Textblock sitzt tief, kurz über der Sandkante */
  padding: clamp(72px, 9vw, 118px) 0 clamp(56px, 7vw, 92px);
  overflow: hidden; text-align: center;
}
/* Hellblaue Welle als Wasserkante am oberen Rand. Bewusst HELLER (#d3ebff)
   als das Himmelblau der Abschluss-Sektion darüber – exakt wie auf der
   Live-Seite gemessen: tiefes Wasser -> flaches Wasser -> Sand. Nicht
   "korrigieren", der Dreiklang ist das Ufer-Motiv. */
.footer-wave {
  position: absolute; top: -1px; left: 0; right: 0; pointer-events: none;
  height: clamp(46px, 6.5vw, 96px);
}
.footer-wave svg { width: 100%; height: 100%; display: block; }
/* Sandschräge unten: drei versetzte Keile wie der Elementor-Trenner der Live-Seite */
.footer-sand {
  position: absolute; left: 0; right: 0; bottom: -1px; pointer-events: none;
  height: clamp(48px, 6.5vw, 88px);
}
.footer-sand svg { width: 100%; height: 100%; display: block; }
/* Seegras wächst aus dem Sand */
.footer-plant {
  position: absolute; bottom: 0; z-index: 1; pointer-events: none;
  transform-origin: bottom center; animation: sway 6s ease-in-out infinite;
}
.footer-plant.p1 { left: 13%;  height: clamp(165px, 21vw, 300px); animation-duration: 6.5s; }
.footer-plant.p2 { right: 15%; height: clamp(135px, 17.5vw, 245px); animation-duration: 5.4s; animation-delay: -2s; }
.site-footer .container { position: relative; z-index: 2; }
.site-footer img.f-logo { height: 38px; margin: 0 auto 26px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin-bottom: 18px; }
.footer-nav a {
  font-family: var(--font-body); font-weight: 400; font-size: .92rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue);
}
.footer-nav a:hover { color: var(--blue-soft); text-decoration: none; }
.footer-copy { color: #8a6a40; font-size: .88rem; margin: 0; }

/* Handy: schmaler Fuß – Pflanzen kleiner und ganz an den Rand, damit sie
   nicht in der Copyright-Zeile stehen. Diese bricht dafür auf zwei Zeilen um.
   Muss NACH der Grundregel stehen, sonst gewinnt deren margin: 0. */
@media (max-width: 700px) {
  .footer-plant.p1 { left: 0; height: clamp(96px, 26vw, 130px); }
  .footer-plant.p2 { right: 0; height: clamp(80px, 22vw, 110px); }
  .site-footer { padding-bottom: clamp(78px, 22vw, 118px); }
  .footer-copy { max-width: 16em; margin: 0 auto; line-height: 1.5; text-align: center; }
  .footer-nav { gap: 10px 22px; }

  /* Preis-Pille: nebeneinander wird auf schmalen Bildschirmen unleserlich
     (vor allem beim englischen „Free to download"). Deshalb gestapelt. */
  .price-tag { flex-direction: column; align-items: center; gap: 3px; padding: 12px 22px; }
  .price-tag b { font-size: 1.2rem; }
  .price-tag span { font-size: .92rem; }
}

/* =========================================================================
   GRATIS / PRO – Preisvergleich
   ========================================================================= */
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; align-items: start; }
.plan {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 34px 36px; box-shadow: var(--shadow-sm);
}
.plan--pro { border-color: rgba(255,190,36,.75); box-shadow: 0 14px 40px rgba(255,190,36,.16); }
.plan__tag {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .12em; padding: 6px 14px; border-radius: 50px; margin-bottom: 14px;
}
.plan__tag--free { background: #e4f7ec; color: #1c7a44; }
.plan__tag--pro  { background: var(--yellow); color: var(--blue); }
.plan h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom: 1rem; }
.plan__note { margin: 18px 0 0; font-size: .88rem; color: var(--muted); }
/* Kleingedruckter Hinweis unter den beiden Plänen */
.plan__disclaimer {
  margin: clamp(22px, 3vw, 34px) auto 0; max-width: 62em; text-align: center;
  font-size: .82rem; line-height: 1.55; color: #6a5417;
}
.section--yellow .plan__disclaimer { color: #574210; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 32px; font-size: .97rem; color: var(--ink); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--yellow) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001f4b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 13px 13px;
}

/* =========================================================================
   KARTEN-LEGENDE
   ========================================================================= */
.maplegend {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  margin-top: 24px; font-size: .88rem; color: var(--muted);
}
.section--sky .maplegend { color: #0d2b57; }
.maplegend__i { display: inline-flex; align-items: center; gap: 9px; }
/* Auf Himmelblau: weiße Pillen, damit auch die Linien-Farbmuster klar lesbar sind */
.section--sky .maplegend__i {
  background: rgba(255,255,255,.85); border-radius: 50px; padding: 5px 14px;
}
.mk { display: inline-block; flex: none; }
.mk--blue, .mk--amber {
  width: 15px; height: 15px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,31,75,.18);
}
.mk--blue  { background: #042048; }
.mk--amber { background: #E0A200; }
.mk--line-orange, .mk--line-red, .mk--line-anchor, .mk--dash { width: 26px; height: 0; border-top-width: 3px; border-top-style: solid; }
.mk--line-orange { border-top-color: #E8820E; }
.mk--line-red    { border-top-color: #B85651; }
.mk--line-anchor { border-top-color: #1f6feb; }
.mk--dash        { border-top-color: #3d5878; border-top-style: dashed; border-top-width: 2px; }

/* =========================================================================
   INTERAKTIVE SEEKARTE (Binnen Skipper)
   ========================================================================= */
.lakemap {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.lakemap__bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--blue); color: var(--white);
}
.lakemap__lakes { display: flex; flex-wrap: wrap; gap: 6px; }
.lakemap__lake {
  font-family: var(--font-head); font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .09em;
  border: 0; border-radius: 50px; padding: 9px 18px; cursor: pointer;
  background: rgba(255,255,255,.13); color: #e8eefa;
  transition: background .16s var(--ease-out), color .16s var(--ease-out);
}
/* Wichtig gerade hier: Ein hängengebliebener Hover sieht auf dem Handy aus
   wie ein zweiter ausgewählter See. */
@media (hover: hover) and (pointer: fine) {
  .lakemap__lake:hover { background: rgba(255,255,255,.24); }
}
.lakemap__lake.is-active { background: var(--yellow); color: var(--blue); }
.lakemap__tools { display: flex; gap: 8px; }
.lakemap__btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .09em;
  background: rgba(255,255,255,.13); color: #fff; border: 0; border-radius: 50px; padding: 9px 16px;
  transition: background .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lakemap__btn:hover { background: rgba(255,255,255,.26); }
}
.lakemap__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.lakemap__stage { position: relative; height: clamp(420px, 62vh, 660px); background: var(--sky-pale); }
.lakemap__canvas { position: absolute; inset: 0; }
.lakemap__canvas canvas { outline: none; }

.lakemap__loading {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; justify-items: center;
  background: var(--sky-pale); color: #3e5068; font-size: .95rem; z-index: 3; text-align: center; padding: 20px;
}
.lakemap__loading[hidden] { display: none; }
.lakemap__spin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(0,31,75,.15); border-top-color: var(--blue); animation: spin .9s linear infinite;
}

.lakemap__layers {
  position: absolute; top: 12px; left: 12px; z-index: 4; width: min(260px, calc(100% - 24px));
  background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 14px 16px; max-height: calc(100% - 24px); overflow: auto;
}
.lakemap__layers[hidden] { display: none; }
.lakemap__layers-h {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: .68rem; color: var(--muted); margin: 0 0 8px;
}
.lakemap__layers-h + .lakemap__check { margin-top: 0; }
.lakemap__check + .lakemap__layers-h { margin-top: 16px; }
.lakemap__check { display: flex; align-items: center; gap: 9px; font-size: .9rem; padding: 7px 0; min-height: 32px; cursor: pointer; }
.lakemap__check input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
/* Stufenwahl der Tiefenlinien: eingerueckt unter ihrem Haken, damit die
   Zugehoerigkeit sichtbar ist. Drei Schaltflaechen, die gewaehlte ausgefuellt. */
.lakemap__depth { display: flex; gap: 6px; margin: 2px 0 6px 25px; }
.lakemap__depth button {
  flex: 1; font: inherit; font-size: .78rem; line-height: 1.1;
  padding: 8px 6px; min-height: 30px; border: 1px solid var(--line, #d8dce3); border-radius: 7px;
  background: transparent; color: inherit; cursor: pointer; white-space: nowrap;
}
.lakemap__depth button[aria-pressed="true"] {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600;
}
/* Der Bezug der Tiefenangaben: kleiner als die Schalter, weil es ein Vorbehalt
   ist und keine Bedienung. */
.lakemap__depth-note {
  margin: 0 0 8px 25px; font-size: .72rem; line-height: 1.35; opacity: .75;
}

.lakemap__panel {
  position: absolute; right: 12px; top: 12px; bottom: 12px; z-index: 5;
  width: min(340px, calc(100% - 24px)); overflow: auto;
  background: rgba(255,255,255,.98); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 20px 22px 24px;
}
.lakemap__panel[hidden] { display: none; }
.lakemap__close {
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: var(--muted); padding: 2px 6px; border-radius: 8px;
}
.lakemap__close:hover { color: var(--blue); background: var(--paper); }
.lakemap__cat {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--blue-soft);
  background: var(--ice); border-radius: 50px; padding: 4px 11px; margin-bottom: 10px;
}
.lakemap__panel h3 { font-size: 1.15rem; margin: 0 0 12px; padding-right: 24px; }
.lakemap__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.lakemap__tags span {
  font-size: .74rem; font-weight: 600; background: #e4f7ec; color: #1c7a44;
  border-radius: 50px; padding: 4px 10px;
}
.lakemap__rows { margin: 0 0 14px; display: grid; gap: 9px; }
.lakemap__row dt {
  font-family: var(--font-head); font-weight: 700; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 1px;
}
.lakemap__row dd { margin: 0; font-size: .92rem; }
/* Mehrere Unterlagen untereinander statt in einer Zeile aneinandergereiht –
   die Titel sind lang ("Kostenverzeichnis (PDF)") und brächen sonst um. */
.lakemap__links { display: grid; gap: 4px; }
.lakemap__notes {
  font-size: .89rem; color: var(--muted); line-height: 1.55;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.lakemap__hint { margin: 0; padding: 12px 18px 14px; font-size: .84rem; color: var(--muted); background: var(--paper); }

/* Textalternative zur Karte: gleiche Orte/Zonen als aufklappbare Liste,
   voll tastatur- und screenreadertauglich. */
.lakemap__list { border-top: 1px solid var(--line, #d8dce3); background: var(--paper); }
.lakemap__list > summary { cursor: pointer; padding: 13px 18px; font-family: var(--font-head); font-weight: 600; color: var(--blue); }
.lakemap__list-body { padding: 2px 18px 16px; font-size: .92rem; }
.lakemap__list-body h4 { font-family: var(--font-head); font-weight: 700; color: var(--blue); margin: 14px 0 6px; font-size: .95rem; }
.lakemap__list-body ul { margin: 0 0 6px; padding-left: 20px; }
.lakemap__list-body li { margin-bottom: 5px; line-height: 1.5; }
/* Anklickbarer Ortsname: springt zur Karte und zeigt den Ort */
.lakemap__jump { font: inherit; font-weight: 700; color: var(--blue); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; line-height: inherit; }
.lakemap__jump:hover { text-decoration: underline; }
.lakemap__jump:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.lakemap.is-full .lakemap__list, .lakemap.is-pseudo-full .lakemap__list { display: none; }

/* Vollbild */
.lakemap.is-full, .lakemap.is-pseudo-full { border-radius: 0; border: 0; display: flex; flex-direction: column; }
.lakemap.is-pseudo-full { position: fixed; inset: 0; z-index: 300; }
.lakemap.is-full .lakemap__stage, .lakemap.is-pseudo-full .lakemap__stage { flex: 1; height: auto; }
.lakemap.is-full .lakemap__hint, .lakemap.is-pseudo-full .lakemap__hint { display: none; }

/* MapLibre-Bedienelemente an das Marken-Design angleichen */
.lakemap .maplibregl-ctrl-group { border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.lakemap .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.lakemap .maplibregl-ctrl-attrib { font-size: 11px; }
.lakemap .maplibregl-ctrl-scale { border-color: var(--blue); color: var(--blue); background: rgba(255,255,255,.75); }

@media (max-width: 720px) {
  .lakemap__panel { left: 12px; right: 12px; top: auto; width: auto; max-height: 62%; }
  .lakemap__stage { height: clamp(400px, 70vh, 560px); }
}

/* =========================================================================
   Rechtsseiten (Datenschutz / Impressum)
   ========================================================================= */
.legal { max-width: 820px; margin-inline: auto; }
.legal h1 { margin-bottom: 1.4rem; text-transform: uppercase; letter-spacing: .01em; }
.legal h2 { font-size: 1.25rem; margin-top: 2.2rem; text-transform: uppercase; letter-spacing: .06em; }
.legal h3 { margin-top: 1.4rem; }
.legal p, .legal li { color: var(--ink); }
.legal a { word-break: break-word; }
/* Impressum im Stil der alten Seite: navy, zentriert, gelber Titel */
.imprint { background: var(--blue); color: #cdd9ee; text-align: center; }
.imprint .container { max-width: 720px; }
.imprint h1 {
  color: var(--yellow); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2rem, 5.5vw, 3.1rem); margin-bottom: 2.2rem;
}
.imprint h2 {
  color: var(--white); text-transform: uppercase; letter-spacing: .14em;
  font-size: 1rem; margin: 0 0 1.1rem;
}
.imprint p { color: #cdd9ee; margin: .25rem 0; }
.imprint a { color: var(--yellow); }
.imprint a:hover { color: #ffd15a; }
.imprint .block + .block { margin-top: 2.4rem; }
.imprint .wave-divider { margin: 2.6rem auto; width: 96px; height: 12px; color: var(--yellow); }
.imprint .wave-divider svg { width: 100%; height: 100%; display: block; }

/* =========================================================================
   Scroll-Reveal  (nur wenn JS aktiv -> ohne JS bleibt alles sichtbar)
   ========================================================================= */
/* Kürzer und mit kürzerem Weg als vorher (war .6s und 26px): Der Text steht
   schneller lesbar da, der Effekt bleibt trotzdem deutlich. Den leichten
   zeitlichen Versatz innerhalb einer Gruppe setzt main.js. */
html.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .38s var(--ease-out), transform .38s var(--ease-out);
}
html.js .reveal.in { opacity: 1; transform: none; }

/* =========================================================================
   Dauerbewegung anhalten, solange sie niemand sieht
   Wellen, Steuerräder und schwankende Motive laufen endlos. Ohne diese Regel
   rechnet der Browser auch für Motive weit außerhalb des Bildschirms weiter –
   das kostet auf dem Handy spürbar Akku. main.js hängt die Klasse an, sobald
   ein Motiv aus dem Bild scrollt, und nimmt sie beim Zurückscrollen weg.
   Angehalten heißt eingefroren, nicht zurückgesetzt: Die Bewegung läuft dort
   weiter, wo sie stehen geblieben ist – es gibt also keinen sichtbaren Sprung.
   ========================================================================= */
.fx-paused { animation-play-state: paused !important; }

/* =========================================================================
   Reduzierte Bewegung – eine einzige Liste für die ganze Seite
   Vorher standen die Ausnahmen an zwei getrennten Stellen. Beim Nachtragen
   wurde der Steuerrad-Trenner übersehen und drehte sich als einziges Motiv
   weiter, obwohl am Gerät "Bewegung reduzieren" eingeschaltet war. Alles
   Dauerbewegte steht deshalb jetzt hier zusammen.
   Bewusst NICHT dabei: der Ladekreisel der Seenkarte – ein Ladeanzeiger, der
   stillsteht, wirkt wie eine abgestürzte Seite.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .jetty-band img,
  .closing-waves .wl,
  .wave-anim .wl,
  .wheel-divider img,
  .float-wheel,
  .bob,
  .sway,
  .person__photo--float,
  .footer-plant { animation: none !important; }
}

/* =========================================================================
   Sprach-Sichtbarkeit (JS setzt <html lang>)
   ========================================================================= */
[data-lang-only="en"] { display: none; }
html[lang="en"] [data-lang-only="de"] { display: none; }
html[lang="en"] [data-lang-only="en"] { display: revert; }

/* =========================================================================
   Cookie-Hinweis
   ========================================================================= */
.cookie {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: min(680px, calc(100% - 32px)); background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 20px 22px; z-index: 200; display: none;
}
.cookie.show { display: block; }
.cookie p { margin: 0 0 14px; font-size: .95rem; }
.cookie .cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie .btn { padding: .6em 1.3em; font-size: .92rem; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-cta, .stores { justify-content: center; }
  .hero-visual { order: -1; }
  .hero-visual img.hero-main { max-height: 300px; }
  .presse-grid { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  /* einspaltig gehoert das Foto nach oben, auch wenn es im Text danach steht */
  .person--flip .person__photo { order: -1; }
  .person--flip { display: flex; flex-direction: column; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  /* Geschlossenes Menü liegt über dem Bildschirmrand. Es zusätzlich
     auszublenden ist nötig, weil es sonst je nach Höhe unten hervorlugt –
     das war der weiße Streifen über der Kopfleiste. */
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line); padding: 8px 0;
    box-shadow: var(--shadow-md); transform: translateY(-140%);
    visibility: hidden; z-index: -1;
    /* Dieser Zustand ist zugleich das Schließen – bewusst kürzer als das
       Öffnen darunter: Wer zumacht, will die Fläche weghaben, nicht ihr
       zusehen. Beim Öffnen darf es einen Tick ruhiger zugehen. */
    transition: transform .2s var(--ease-drawer), visibility 0s linear .2s;
  }
  .nav-links.open {
    transform: translateY(0); visibility: visible; z-index: 1;
    transition: transform .28s var(--ease-drawer), visibility 0s;
  }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 14px 24px; }
  .nav-links a::after { display: none; }
  .app-cards, .video-grid, .situations, .feature-grid, .footer-grid, .plan-grid { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}
@media (max-width: 960px) {
  .plan-grid { grid-template-columns: 1fr; }
}