/* =========================================================
   Eixer See – Stylesheet
   Schriften: ausschließlich System-Schriften (serifenlos).
   Keine externen Fonts, keine Google Fonts – nichts wird
   von Dritt-Servern nachgeladen.
   Farben auf WCAG 2.1 AA geprüft (Text >= 4.5:1, groß >= 3:1).
   ========================================================= */

:root{
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* =========================================================
     DESIGN-TOKENS – Petrol/Teal + Sand (Light)
     Kanonische Farbrollen. Die alten Namen (--paper, --ink,
     --lake-* …) sind weiter unten nur noch Alias auf diese
     Tokens – so zieht das gesamte Stylesheet automatisch mit,
     ohne hunderte var()-Aufrufe anfassen zu müssen.
     Kontraste sind auf WCAG AA geprüft (siehe Kommentare).
     ========================================================= */
  --color-primary:#0F6B79;        /* Seeblau, kräftig            */
  --color-primary-light:#5FB8C4;  /* helles Wasserblau           */
  --color-primary-hover:#0B535E;  /* Hover: abgedunkelt          */
  --color-accent:#E07B3F;         /* Sonnenuntergang-Orange      */
  --color-accent-hover:#C96A31;
  --color-accent-ink:#10201E;     /* dunkler Text AUF Orange (AA: 5.7:1) */
  --color-bg:#F7F2E7;             /* warmes Sand-Weiß            */
  --color-bg-alt:#EFE6D3;         /* Karten/Sections             */
  --color-surface:#FFFDF8;        /* Karten (warmes Weiß)        */
  --color-text:#1E2E2C;           /* dunkles Waldgrün-Grau       */
  --color-text-muted:#4A5C58;
  --color-border:#D8CBA8;
  --color-on-primary:#FFFFFF;     /* Text auf Primär (Light, AA: 6.2:1) */

  /* DLRG-Markenrot – in hell und dunkel gleich (Wiedererkennung). */
  --dlrg-red:#c8102e;
  --dlrg-red-dark:#a30d25;

  /* ---- Alias auf bestehende Rollennamen ---- */
  --paper:var(--color-bg);
  --alt-bg:var(--color-bg-alt);
  --card:var(--color-surface);
  --border-c:var(--color-border);
  --ink:var(--color-text);
  --ink-soft:var(--color-text-muted);
  --lake-1:var(--color-primary);
  --lake-2:var(--color-primary);
  --lake-3:var(--color-primary-light);
  --btn-bg:var(--color-primary);
  --btn-bg-hover:var(--color-primary-hover);
  --btn-fg:var(--color-on-primary);
  --nav-bg:var(--color-bg);
  --nav-border:var(--color-border);
  --nav-active-bg:rgba(15,107,121,.12);

  /* ---- Spacing-Raster (4/8px) ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* ---- Type-Skala ---- */
  --step-0:1rem;
  --step-1:1.15rem;
  --step-2:clamp(1.25rem,1.6vw,1.4rem);
  --step-3:clamp(1.45rem,2.2vw,1.8rem);
  --step-4:clamp(1.65rem,2.7vw,2.2rem);
  --step-5:clamp(2.4rem,6vw,4rem);

  /* ---- Motion ---- */
  --dur-fast:.18s; --dur-med:.35s;
  --ease:cubic-bezier(.16,.8,.24,1);

  --shadow-sm:0 1px 2px rgba(40,32,12,.06), 0 2px 8px rgba(40,32,12,.05);
  --shadow-md:0 2px 6px rgba(40,32,12,.07), 0 10px 26px rgba(40,32,12,.08);
  --shadow-pop:0 8px 30px rgba(40,32,12,.18);

  --radius:16px;
  --radius-sm:10px;
  --card-pad:clamp(22px,3vw,32px);
  --max-w:1140px;
  --nav-h:66px;
}

/* =========================================================
   Dark Mode – Primär dreht dunkel→hell (Sichtbarkeit),
   Hintergrund bleibt tiefes Seegrün statt Schwarz.
   Es werden NUR die --color-* Tokens überschrieben; alle
   Alias und alle nachfolgenden Regeln erben automatisch.
   ========================================================= */
[data-theme="dark"]{
  --color-primary:#6FCBDA;
  --color-primary-light:#3A8C99;
  --color-primary-hover:#8FDCE9;
  --color-accent:#F0975C;
  --color-accent-hover:#F4A870;
  --color-accent-ink:#10201E;
  --color-bg:#10201E;
  --color-bg-alt:#172C29;
  --color-surface:#1B302C;
  --color-text:#EAF2EF;
  --color-text-muted:#A9BDB8;
  --color-border:#2A423E;
  --color-on-primary:#10201E;     /* dunkler Text auf hellem Primär (AA: 9:1) */
  --nav-active-bg:rgba(111,203,218,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md:0 2px 6px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.3);
  --shadow-pop:0 8px 30px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-primary:#6FCBDA;
    --color-primary-light:#3A8C99;
    --color-primary-hover:#8FDCE9;
    --color-accent:#F0975C;
    --color-accent-hover:#F4A870;
    --color-accent-ink:#10201E;
    --color-bg:#10201E;
    --color-bg-alt:#172C29;
    --color-surface:#1B302C;
    --color-text:#EAF2EF;
    --color-text-muted:#A9BDB8;
    --color-border:#2A423E;
    --color-on-primary:#10201E;
    --nav-active-bg:rgba(111,203,218,.16);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
    --shadow-md:0 2px 6px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.3);
    --shadow-pop:0 8px 30px rgba(0,0,0,.55);
  }
}
@media (prefers-contrast: more){
  :root{ --border-c:#7a938f; --ink-soft:#274442; }
  [data-theme="dark"], :root:not([data-theme="light"]){ --border-c:#6d8a88; --ink-soft:#d5e5e2; }
  .card,.facts,.map-box,.rule,.hero .btn{ border-width:2px !important; }
}

/* ---------- Basis ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); -webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink); background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-sans);
  font-weight:800; letter-spacing:-.02em; line-height:1.18;
  margin:0 0 .45em;
}
h1,h2{text-wrap:balance;}
h1{font-size:var(--step-5);}
h2{font-size:var(--step-4);}
h3{font-size:var(--step-2); font-weight:700;}
h4{font-size:var(--step-1); font-weight:700;}
h5,h6{font-size:var(--step-0); font-weight:700; letter-spacing:0;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
a{color:var(--lake-1); text-underline-offset:3px;}
img{max-width:100%;}

.wrap{max-width:var(--max-w); margin:0 auto; padding:0 24px;}
section{padding:clamp(56px,7vw,88px) 0;}
.alt-bg{background:var(--alt-bg);}

.kicker{
  text-transform:uppercase; letter-spacing:.14em; font-size:.76rem;
  color:var(--lake-2); font-weight:700; margin-bottom:10px;
}
/* Fließtext nutzt die volle Spaltenbreite – keine künstliche Verengung */
.section-head{margin-bottom:38px;}
.section-head p{color:var(--ink-soft); font-size:1.04rem;}

/* ---------- Barrierefreiheit ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-80px; z-index:200;
  background:var(--btn-bg); color:#fff; padding:14px 22px;
  border-radius:0 0 12px 12px; font-weight:700; text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus{top:0;}
:where(a,button,select,input,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--lake-2); outline-offset:3px; border-radius:4px;
}
.hero :where(a,button):focus-visible{outline-color:#fff;}
[data-theme="dark"] .safety-band :where(a,button):focus-visible{outline-color:#eaf5e8;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .safety-band :where(a,button):focus-visible{outline-color:#eaf5e8;}
}
footer :where(a,button):focus-visible{outline-color:#9fe0d4;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .scenic-photo img{transform:none !important;}
}

/* ---------- Navigation ---------- */
nav.site-nav{
  position:sticky; top:0; z-index:60;
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
}
nav.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:10px 24px; min-height:var(--nav-h); flex-wrap:wrap;
}
.brand{
  font-weight:800; font-size:1.2rem; letter-spacing:-.02em;
  color:var(--lake-1); display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; padding:6px 4px; border-radius:8px;
}
.brand img{width:28px; height:28px;}
.nav-right{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.nav-links{list-style:none; display:flex; gap:4px; margin:0; padding:0; flex-wrap:wrap;}
.nav-links a{
  display:inline-flex; align-items:center; min-height:44px;
  padding:6px 12px; border-radius:10px;
  text-decoration:none; color:var(--ink); font-size:.93rem; font-weight:600;
  border-bottom:2px solid transparent;
  transition:background-color .18s ease, color .18s ease;
}
.nav-links a:hover{color:var(--lake-1); background:var(--nav-active-bg);}
.nav-links a.active{
  color:var(--lake-1); background:var(--nav-active-bg); border-bottom-color:var(--lake-1);
}
.nav-controls{display:flex; align-items:center; gap:10px;}
.nav-burger{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:10px;
  border:1px solid var(--border-c); background:var(--card); color:var(--ink); cursor:pointer;
}
.nav-burger svg{width:19px; height:19px;}
.nav-burger:hover{color:var(--lake-1); background:var(--nav-active-bg);}

/* ---------- Sprachwähler mit Flaggen ---------- */
.lang-picker{position:relative;}
.lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:6px 12px;
  border:1px solid var(--border-c); border-radius:10px;
  background:var(--card); color:var(--ink);
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
}
.lang-btn:hover{background:var(--nav-active-bg);}
.lang-btn .chev{width:13px; height:13px; flex:none; opacity:.7;}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg);}
.flag{
  width:22px; height:16px; flex:none; border-radius:3px; display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.16) inset;
}
.lang-list{
  position:absolute; z-index:80; inset-inline-end:0; top:calc(100% + 8px);
  min-width:210px; max-height:min(70vh,420px); overflow-y:auto;
  margin:0; padding:6px; list-style:none;
  background:var(--card); border:1px solid var(--border-c);
  border-radius:14px; box-shadow:var(--shadow-pop);
}
.lang-list[hidden]{display:none;}
.lang-opt{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; min-height:44px; border-radius:9px;
  font-size:.92rem; font-weight:600; color:var(--ink); cursor:pointer;
}
.lang-opt:hover,.lang-opt.focused{background:var(--nav-active-bg);}
.lang-opt[aria-selected="true"]{color:var(--lake-1);}
.lang-opt[aria-selected="true"]::after{content:"✓"; margin-inline-start:auto; font-weight:800;}

#theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--border-c); background:var(--card); color:var(--ink);
  cursor:pointer; padding:0; transition:background-color .18s ease;
}
#theme-toggle:hover{background:var(--nav-active-bg);}
#theme-toggle svg{width:19px; height:19px;}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  /* svh: stabile Höhe auf Mobilgeräten (ein-/ausblendende Browserleisten) */
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:flex; align-items:center;
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 55%; display:block;}
/* Leichter, links betonter Schleier: die Textseite bleibt gut lesbar,
   das Bild kommt (v. a. rechts) klar und ohne diesigen Nebel durch. */
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg,
      rgba(8,26,28,.72) 0%, rgba(8,26,28,.44) 44%,
      rgba(8,26,28,.14) 80%, rgba(8,26,28,.05) 100%),
    linear-gradient(180deg,
      rgba(8,26,28,.20) 0%, rgba(8,26,28,.08) 40%, rgba(8,26,28,.24) 100%);
}
.hero-inner{
  max-width:var(--max-w); margin:0 auto; width:100%;
  padding:96px 24px; position:relative; z-index:2;
  /* Etwas unterhalb der reinen Mitte platzieren, wirkt ruhiger. */
  transform:translateY(clamp(16px,4vh,44px));
}
/* Eingangsanimation: Kicker, Überschrift, Text, Badges, Live-Leiste
   und Button erscheinen nacheinander (Fade + leichtes Hochgleiten). */
@keyframes heroRise{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-inner > *{
  opacity:0;
  animation:heroRise .7s cubic-bezier(.16,.8,.24,1) both;
}
.hero-inner > *:nth-child(1){animation-delay:.05s;}
.hero-inner > *:nth-child(2){animation-delay:.16s;}
.hero-inner > *:nth-child(3){animation-delay:.27s;}
.hero-inner > *:nth-child(4){animation-delay:.38s;}
.hero-inner > *:nth-child(5){animation-delay:.49s;}
.hero-inner > *:nth-child(6){animation-delay:.60s;}
.hero .kicker{color:#eaf6f2; text-shadow:0 1px 8px rgba(0,0,0,.5);}
.hero h1{
  font-size:clamp(2.4rem,6vw,4rem); margin-bottom:.18em;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.hero p.lead{
  font-size:clamp(1.05rem,1.6vw,1.28rem);
  max-width:none; margin:0; color:#f2f8f7;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
/* Badges in zwei gleichmäßigen Zeilen zu je 4. */
.hero .badges{
  display:flex; flex-direction:column;
  gap:12px; margin-top:24px; padding:0; list-style:none;
}
.hero .badge-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(10,28,30,.74); border:1px solid rgba(255,255,255,.5);
  color:#fff; padding:10px 16px; border-radius:999px;
  font-size:.88rem; font-weight:600;
}
.badge .ico{font-size:1rem; line-height:1;}

/* Badges außerhalb des Hero (z. B. Freizeit-Section): themenfähige Optik
   auf normalem Seitenhintergrund statt dunkler Foto-Overlay-Variante. */
.badges-plain{
  display:flex; flex-direction:column;
  gap:12px; margin:24px 0 0; padding:0; list-style:none;
}
.badges-plain .badge-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
}
.badges-plain .badge{
  background:var(--card); border-color:var(--border-c); color:var(--ink);
}

/* ---------- Hero-Aktionen ----------
   Drei gleich gestaltete Pill-Buttons in einer Reihe: Sprungmarken zu
   Wetter, Sicherheit und Anfahrt – einheitlich dezent/transparent,
   mit sanftem Hover-Lift. */
/* Dezente Live-Werte (Wasser/Luft/UV) im Hero – schlichte Zeile, verlinkt
   auf die Wetter-Section. Kein Kachel-Look, bewusst zurückhaltend. */
.hero-wx{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin-top:20px; padding:9px 16px;
  border-radius:999px; text-decoration:none; color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hero-wx:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.30);}
.hero-wx-item{display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
/* Feiner Trennstrich zwischen den Werten */
.hero-wx-item + .hero-wx-item{
  padding-left:16px; border-left:1px solid rgba(255,255,255,.22);
}
.hero-wx-lab{
  font-size:.7rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
}
.hero-wx-val{font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums;}

/* UV-Stufe als farbiges Chip (WHO-Skala) */
.hero-wx-uv{
  display:inline-flex; align-items:baseline; gap:5px;
  padding:2px 10px; border-radius:999px;
  font-size:.82rem; font-weight:800; line-height:1.5;
}
.hero-wx-uv-n{font-variant-numeric:tabular-nums; opacity:.9;}
.uv-low{background:#39a06a; color:#04210c;}
.uv-mod{background:#ecc233; color:#332900;}
.uv-high{background:#ef8a2b; color:#331800;}
.uv-vhigh{background:#e24a3b; color:#fff;}
.uv-extreme{background:#9b59c4; color:#fff;}

.hero-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-top:26px;
}
.hero-actions .btn{margin-top:0;}
.hero-actions .btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.28);}
.hero-actions .btn:active{transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .hero-actions .btn:hover{transform:none;}
}
.live-dot{
  width:9px; height:9px; border-radius:50%; background:#5fdba0; flex:none;
  box-shadow:0 0 0 0 rgba(95,219,160,.5);
  animation:livePulse 2.4s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(95,219,160,.5);}
  70%{box-shadow:0 0 0 7px rgba(95,219,160,0);}
  100%{box-shadow:0 0 0 0 rgba(95,219,160,0);}
}
@media (prefers-reduced-motion: reduce){ .live-dot{animation:none;} }

/* ---------- Hero mobil ----------
   Kompakter, weniger leerer Himmel, volle Breite für Live-Werte und Buttons. */
@media (max-width:640px){
  /* Vollbild-Hero: Text oben, Kacheln (Wetter + Buttons) unten – dazwischen
     bleibt viel vom See sichtbar. */
  .hero{ min-height:calc(100svh - var(--nav-h)); align-items:stretch; }
  .hero-inner{
    display:flex; flex-direction:column;
    padding:32px 20px 18px; transform:none;
  }
  .hero .kicker{ letter-spacing:.12em; font-size:.72rem; }
  .hero h1{ font-size:clamp(2.5rem,12vw,3.1rem); }
  .hero p.lead{ font-size:1.04rem; }

  /* Live-Werte in EINER Zeile (kein Umbruch), kompakt skaliert.
     margin-top:auto schiebt Wetterpille + Buttons an den unteren Rand. */
  .hero-wx{
    width:100%; margin-top:auto; padding:12px 8px;
    flex-wrap:nowrap; gap:0; justify-content:space-around;
    /* Durchsichtiger als die Desktop-Variante – Seebild bleibt gut sichtbar. */
    background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  }
  /* Label über dem Wert statt daneben – größere, besser lesbare Zahlen. */
  .hero-wx-item{
    flex-direction:column; align-items:center; gap:3px;
  }
  /* Trennstriche zwischen Wasser | Luft | UV */
  .hero-wx-item + .hero-wx-item{
    margin-left:4px; padding-left:14px;
    border-left:1px solid rgba(255,255,255,.3);
  }
  .hero-wx-lab{ font-size:.6rem; letter-spacing:.02em; }
  .hero-wx-val{ font-size:1.15rem; }
  .hero-wx-uv{ padding:2px 9px; font-size:.85rem; gap:4px; }

  /* Zwei Buttons nebeneinander als zwei gleich breite Kacheln. */
  .hero-actions{ width:100%; margin-top:20px; gap:10px; flex-wrap:nowrap; }
  .hero-actions .btn{
    flex:1 1 0; min-width:0; width:auto; justify-content:center;
    padding:13px 10px; font-size:.9rem; white-space:nowrap;
  }
}

/* ---------- Wetter-Section (alle Live-Werte, cleanes Layout ohne Icons) ---------- */
/* Kicker "Live am See" + Stand-Zeitpunkt in einer Zeile. */
.wx-kicker{display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;}
.wx-kicker-stand{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  text-transform:none; color:var(--ink-soft);
}

/* Flex statt Grid: die Kacheln wachsen gleichmäßig und füllen die Zeile
   immer über die volle Breite (kein Leerraum bei ungerader Kachelzahl).
   Markup ist eine <dl> (Begriff/Wert) – Label zuerst im DOM, damit
   Screenreader "Wasser: 21,5 °C" vorlesen; visuell ebenso Label oben. */
.wx-grid{display:flex; flex-wrap:wrap; gap:12px; margin:0;}
.wx-card{
  position:relative; overflow:hidden;
  /* min-width 1/4-Zeile: max. 4 Kacheln pro Reihe – die 8 Open-Meteo-Werte
     teilen sich dadurch in zwei volle Viererreihen auf. */
  flex:1 1 0; min-width:calc(25% - 9px);
  display:flex; flex-direction:column; gap:6px;
  padding:18px 20px; border-radius:14px;
  background:var(--card); border:1px solid var(--border-c);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* Feine Akzentlinie oben – nimmt die Seefarbe auf, bleibt dezent. */
.wx-card::before{
  content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--lake-2), transparent 70%);
  opacity:.65;
}
.wx-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
@media (prefers-reduced-motion: reduce){
  .wx-card{transition:none;}
  .wx-card:hover{transform:none;}
}
.wx-lab{
  margin:0; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft);
}
.wx-val{
  margin:0; font-size:1.75rem; font-weight:800; color:var(--ink);
  letter-spacing:-.02em; line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.wx-unit{font-size:.5em; font-weight:700; color:var(--ink-soft); margin-inline-start:4px; letter-spacing:0;}
.wx-group{margin-bottom:26px;}
.wx-group:last-of-type{margin-bottom:0;}
.wx-group-h{
  display:flex; align-items:center; gap:12px;
  margin:0 0 12px; font-size:.78rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
}
/* Linie hinter der Gruppenüberschrift – gliedert, ohne zu trennen. */
.wx-group-h::after{content:""; flex:1; height:1px; background:var(--border-c);}
.wx-note{margin:26px 0 0; font-size:.86rem; color:var(--ink-soft);}
/* Mobil: Kacheln zu zweit pro Reihe, aber kompakter und aufgeräumter –
   weniger Höhe, engerer Label/Wert-Abstand, ausgewogene Einheit. */
@media (max-width:640px){
  .wx-grid{gap:9px;}
  .wx-card{
    min-width:calc(50% - 5px); padding:13px 14px; gap:3px;
    justify-content:center;
  }
  .wx-lab{font-size:.67rem; letter-spacing:.04em;}
  .wx-val{font-size:1.5rem;}
  .wx-unit{font-size:.5em;}
  .wx-card:hover{transform:none;}
}

/* ---------- Buttons ----------
   Rollen: Primary (Petrol) · Secondary (Outline) · Accent (Orange, warmer
   Fokus-CTA). Akzent trägt bewusst DUNKLEN Text (AA), da Weiß auf Orange
   durchfällt. Im Dark Mode dreht Primär hell → Text wird dort dunkel
   (--color-on-primary). */
.btn{
  display:inline-flex; align-items:center; gap:var(--space-2);
  min-height:48px; padding:13px 26px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:700; font-size:.97rem;
  border:2px solid transparent; border-radius:999px;
  text-decoration:none; margin-top:var(--space-5); cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:hover{background:var(--btn-bg-hover);}
.btn:active{transform:translateY(1px);}
.btn.compact{margin-top:0;}
/* Sekundär: Outline in Primärfarbe */
.btn--secondary{
  background:transparent; color:var(--color-primary);
  border-color:var(--color-primary); box-shadow:none;
}
.btn--secondary:hover{background:var(--nav-active-bg);}
/* Akzent: warmer Orange-CTA mit dunklem Text */
.btn--accent{
  background:var(--color-accent); color:var(--color-accent-ink);
  border-color:transparent;
}
.btn--accent:hover{background:var(--color-accent-hover);}
.hero .btn{
  background:rgba(10,30,32,.66); color:#fff;
  border-color:rgba(255,255,255,.7);
}
/* Der Haupt-CTA im Hero wird zum warmen Akzent (solide, gut über dem Foto). */
.hero .btn--accent{
  background:var(--color-accent); color:var(--color-accent-ink);
  border-color:transparent;
}
.hero .btn--accent:hover{background:var(--color-accent-hover);}
.hero .btn:not(.btn--accent):hover{background:rgba(10,30,32,.8);}
/* CTA in DLRG-Rot – deutlich als Verweis auf die DLRG erkennbar. */
.safety-band .btn{background:var(--dlrg-red); color:#fff; border-color:var(--dlrg-red);}
.safety-band .btn:hover{background:var(--dlrg-red-dark); border-color:var(--dlrg-red-dark);}

/* ---------- Karten & Raster ---------- */
.grid{display:grid; gap:24px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr;}
  /* Einspaltig: hochformatiges Mobilbild fast in voller Höhe, nur
     oben/unten leicht angeschnitten (kein Zoom auf einen Ausschnitt). */
}
.card{
  background:var(--card); border-radius:var(--radius); padding:var(--card-pad);
  border:1px solid var(--border-c); box-shadow:var(--shadow-sm);
}
.card h3{color:var(--color-primary);}
.card p{color:var(--ink-soft);}

/* Aktivitäten-Karten (Freizeit): Icon-Chip statt Foto, Link unten bündig. */
/* Icon-Chip und Überschrift stehen nebeneinander (gleiche Höhe);
   Beschreibung und Link darunter über die volle Breite. */
.act-card{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto 1fr auto;
  column-gap:14px; row-gap:14px;
  align-items:center;
}
.act-ico{
  grid-column:1; grid-row:1; margin:0;
  width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center; font-size:1.55rem;
  background:var(--alt-bg); border:1px solid var(--border-c);
}
.act-card h3{grid-column:2; grid-row:1; margin:0;}
.act-card p{grid-column:1 / -1; grid-row:2; margin:0; align-self:start;}
.card-link{
  grid-column:1 / -1; grid-row:3; margin:0; justify-self:start;
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:.95rem; color:var(--lake-1);
  text-decoration:none;
}
.card-link:hover{text-decoration:underline; text-underline-offset:3px;}

.scenic-photo{
  border-radius:var(--radius); overflow:hidden; margin-bottom:24px;
  box-shadow:var(--shadow-md); background:var(--alt-bg);
}
.scenic-photo img{width:100%; display:block; object-fit:cover;}
.scenic-photo.tile img{height:190px;}
.ueber-content p{text-align:justify; text-wrap:pretty; hyphens:auto;}

/* ---------- „Über den See“: interaktive Luftbildkarte ---------- */
.lake-map{
  position:relative; width:100%; margin-bottom:28px;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-md); background:var(--alt-bg);
  line-height:0;
  /* Verhindert das native Ziehen (Geisterbild) und Text-Markieren auf der Karte */
  user-select:none; -webkit-user-select:none;
}
.lake-map picture{display:block; width:100%;}
.lake-map img{
  width:100%; height:auto; display:block; object-fit:contain;
  -webkit-user-drag:none; user-drag:none; pointer-events:none;
}

.lake-pin{
  position:absolute; transform:translate(-50%,-50%);
  width:20px; height:20px; border-radius:50%;
  background:var(--lake-1); border:3px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  cursor:pointer; padding:0; line-height:1;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lake-pin::after{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(19,110,110,.45);
  animation:lakePinPulse 2.4s ease-out infinite;
}
.lake-pin:hover, .lake-pin:focus-visible{background:var(--lake-2); transform:translate(-50%,-50%) scale(1.12);}
.lake-pin[aria-expanded="true"]{background:var(--color-accent, var(--lake-2));}

@keyframes lakePinPulse{
  0%{box-shadow:0 0 0 0 rgba(19,110,110,.45);}
  70%{box-shadow:0 0 0 12px rgba(19,110,110,0);}
  100%{box-shadow:0 0 0 0 rgba(19,110,110,0);}
}
@media (prefers-reduced-motion: reduce){
  .lake-pin::after{animation:none;}
  .lake-pin{transition:none;}
}

.lake-popover{
  position:absolute; z-index:5; max-width:280px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--border-c); border-radius:12px;
  box-shadow:var(--shadow-md); padding:14px 16px;
}
.lake-popover-close{
  position:absolute; top:6px; right:6px; width:26px; height:26px;
  border:none; background:transparent; color:var(--ink-soft);
  font-size:1.2rem; line-height:1; cursor:pointer; border-radius:50%;
}
.lake-popover-close:hover{background:var(--alt-bg);}
.lake-popover-title{margin:0 24px 6px 0; font-size:1rem; font-weight:800;}
.lake-popover-text{margin:0; font-size:.9rem; line-height:1.5; color:var(--ink-soft);}

/* Entfernungslinien (Badeplattform) und Inselverbindung teilen sich ein SVG.
   Die einzelnen Gruppen werden per .dist-on / .islands-on ein-/ausgeblendet. */
.lake-dist{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
.lake-dist-line, .lake-dist-lbl, .lake-islands-line{
  opacity:0; transition:opacity var(--dur-med) var(--ease);
}
.lake-map.dist-on .lake-dist-line,
.lake-map.dist-on .lake-dist-lbl,
.lake-map.islands-on .lake-islands-line{opacity:1;}

.lake-dist-line line, .lake-islands-line line{
  fill:none; stroke:rgba(10,30,32,.55); stroke-width:9; stroke-linecap:round;
}
.lake-dist-line--top line, .lake-islands-line--top line{
  stroke:#fff; stroke-width:4; stroke-dasharray:14 11;
}
.lake-dist-lbl rect{fill:var(--lake-1); stroke:#fff; stroke-width:2;}
.lake-dist-lbl text{
  fill:#fff; font-size:28px; font-weight:800;
  text-anchor:middle; dominant-baseline:central;
  font-family:inherit;
}
@media (prefers-reduced-motion: reduce){
  .lake-dist-line, .lake-dist-lbl, .lake-islands-line{transition:none;}
}

/* Auf Mobilgeräten wird die interaktive Luftbildkarte nicht angezeigt –
   die Pins sind auf kleinen Displays zu dicht zum sicheren Antippen. */
@media (max-width:640px){
  .lake-map{display:none;}
}

/* ---------- News ---------- */
.news-item{border-inline-start:4px solid var(--lake-2); padding:2px 0 2px 18px;}
html[dir="rtl"] .news-item{padding:2px 18px 2px 0;}
.news-item .date{
  font-size:.78rem; color:var(--lake-1); font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;
}
.news-title{
  font-size:var(--step-1); font-weight:800; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 .3em;
}
.news-readmore{margin-top:var(--space-4);}
.news-empty{color:var(--ink-soft); font-style:italic;}

/* ---------- Sicherheit ----------
   Keine Sonderfarbe mehr: Die Sektion rotiert wie alle anderen im
   Zwei-Farben-Wechsel (Grundton/Alt) mit. Text nutzt die Standard-Themefarben;
   nur der CTA bleibt in DLRG-Rot (siehe .safety-band .btn oben). Die Bausteine
   (.callout, .rule, .dlrg-quote, .dlrg-facts) sind bereits themenfähig. */

/* Echte Kacheln mit Rand, Inhalt zentriert. */
.dlrg-facts{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:24px;
}
.dlrg-fact{
  flex:1 1 0; min-width:200px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:20px 18px; border-radius:14px;
  background:var(--card); border:1px solid var(--border-c);
}
.dlrg-fact-n{font-size:1.3rem; font-weight:800; color:var(--ink); letter-spacing:-.01em;}
.dlrg-fact-l{font-size:.86rem; color:var(--ink-soft);}
.safety-band > .wrap > p{margin-top:18px; color:var(--ink-soft);}
@media (max-width:640px){
  .dlrg-fact{min-width:calc(50% - 7px); padding:16px 14px;}
}

.callout{
  margin:28px 0; padding:20px 22px; border-radius:14px;
  background:rgba(200,16,46,.08); border:1px solid rgba(200,16,46,.3);
  border-inline-start:5px solid var(--dlrg-red); color:var(--ink);
}
.callout strong{color:var(--dlrg-red);}
.callout-head{margin-bottom:10px;}
.callout-list{margin:0; padding:0; list-style:none; display:grid; gap:8px;}
.callout-list li{
  position:relative; padding-inline-start:20px; line-height:1.5;
}
.callout-list li::before{
  content:""; position:absolute; inset-inline-start:0; top:.6em;
  width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55;
}
[data-theme="dark"] .callout{
  background:rgba(120,26,18,.42); border-color:rgba(255,168,152,.55);
  border-inline-start-color:#ff9c8a; color:#ffeeea;
}
[data-theme="dark"] .callout strong{color:#ffd9d1;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .callout{
    background:rgba(120,26,18,.42); border-color:rgba(255,168,152,.55);
    border-inline-start-color:#ff9c8a; color:#ffeeea;
  }
  :root:not([data-theme="light"]) .callout strong{color:#ffd9d1;}
}

/* Verbotstafeln */
.rules-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px 22px; flex-wrap:wrap; margin:42px 0 0;
}
.rules-head h3{margin:0;}
.rules-grid{
  display:grid; gap:12px; margin:18px 0 0; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.rule{
  display:flex; align-items:center; gap:14px;
  background:var(--alt-bg); border:1px solid var(--border-c);
  border-inline-start:4px solid var(--dlrg-red);
  padding:14px 16px; border-radius:13px; color:var(--ink);
}
[data-theme="dark"] .rule{
  background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.15);
  border-inline-start-color:#ff9c8a; color:#f2f8f0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rule{
    background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.15);
    border-inline-start-color:#ff9c8a; color:#f2f8f0;
  }
}
.rule-ico{
  position:relative; flex:none;
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; font-size:1.25rem; line-height:1;
  background:rgba(255,140,120,.16); border:1px solid rgba(255,150,132,.42);
}
/* Diagonaler Verbotsstrich über dem Symbol */
.rule-ico::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(to top left,
    transparent calc(50% - 1.5px), #ff8f7c calc(50% - 1.5px),
    #ff8f7c calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.rule-txt{font-size:.96rem; line-height:1.4;}
.rule-txt b{display:block; font-weight:700;}
.rule-txt span{display:block; color:var(--ink-soft); font-size:.85rem; margin-top:2px;}
[data-theme="dark"] .rule-txt span{color:#d5e8d2;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rule-txt span{color:#d5e8d2;}
}

.dlrg-quote{
  margin:36px 0 0; padding:30px 34px; position:relative;
  background:rgba(200,16,46,.08); border:1px solid rgba(200,16,46,.3);
  border-inline-start:5px solid var(--dlrg-red); border-radius:var(--radius);
}
.dlrg-quote p{
  margin:0; font-size:clamp(1.08rem,1.5vw,1.24rem);
  font-weight:600; line-height:1.5; color:var(--ink);
  display:flex; align-items:flex-start; gap:12px;
}
.dlrg-quote .quote-ico{font-size:1.15em; line-height:1.3; flex:none;}
[data-theme="dark"] .dlrg-quote{
  background:rgba(120,26,18,.42); border-color:rgba(255,168,152,.55);
  border-inline-start-color:#ff9c8a;
}
[data-theme="dark"] .dlrg-quote p{color:#ffeeea;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dlrg-quote{
    background:rgba(120,26,18,.42); border-color:rgba(255,168,152,.55);
    border-inline-start-color:#ff9c8a;
  }
  :root:not([data-theme="light"]) .dlrg-quote p{color:#ffeeea;}
}

/* ---------- Fakten-Tabellen ---------- */
.facts{
  width:100%; border-collapse:collapse;
  background:var(--card); border:1px solid var(--border-c);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
}
.facts th,.facts td{
  padding:8px 20px; border-bottom:1px solid var(--border-c);
  text-align:start; vertical-align:top; line-height:1.35;
}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:none;}
.facts th{font-weight:700; color:var(--lake-1); width:45%;}
.facts td{color:var(--ink-soft);}
.facts td a{display:inline-block; padding:9px 2px; margin:-9px 0;}

/* ---------- Split-Card ----------
   Zweigeteilte Karte: Haupttext + Kontakt-/Info-Seitenspalte. Genutzt von
   Region (wito) und Gastronomie (Haus am See), damit beide „Anlaufstellen“-
   Module gleich aufgebaut sind statt einer Tabelle vs. Karte. */
.split-card{
  display:grid; gap:0; overflow:hidden;
  /* Seitenspalte richtet sich nach ihrem Inhalt (kurze Kontaktzeilen) statt
     proportional zu skalieren – sonst bleibt dort viel Leerraum stehen. */
  grid-template-columns:1fr minmax(240px,300px);
  background:var(--card); border:1px solid var(--border-c);
  border-radius:var(--radius); box-shadow:var(--shadow-md);
}
@media (max-width:860px){ .split-card{grid-template-columns:1fr;} }
.split-main{padding:34px 36px;}
.split-main p{color:var(--ink-soft); text-align:justify; text-wrap:pretty; hyphens:auto;}
.split-side{
  padding:34px 36px;
  background:linear-gradient(160deg, rgba(11,85,97,.09), rgba(63,180,176,.07));
  border-inline-start:1px solid var(--border-c);
}
@media (max-width:860px){
  .split-side{border-inline-start:0; border-top:1px solid var(--border-c);}
}
.split-side h3{
  margin-bottom:16px; color:var(--lake-1); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.11em;
}
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.contact-list li{display:flex; gap:12px; align-items:flex-start;}
.contact-list .ci{
  flex:none; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center; font-size:1rem;
  background:rgba(11,85,97,.10); border:1px solid var(--border-c);
}
.contact-list .cl{
  display:block; font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--lake-2);
}
.contact-list a{font-weight:600; display:inline-block; padding:3px 0;}
.contact-list .cv{color:var(--ink-soft); font-size:.95rem;}
.split-tags{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none;}
.split-tags li{
  padding:7px 13px; border-radius:999px; font-size:.83rem; font-weight:600;
  background:var(--alt-bg); border:1px solid var(--border-c); color:var(--ink-soft);
}

/* ---------- Karte ---------- */
.map-box{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-md); border:1px solid var(--border-c);
  background:var(--alt-bg);
}
.map-box iframe{width:100%; height:440px; border:0; display:block;}
/* Zwei-Klick-Lösung: Die Karte wird erst nach aktiver Zustimmung geladen.
   Vorher geht keine Anfrage an OpenStreetMap – daher kein Banner nötig. */
.map-consent{
  min-height:440px; padding:36px 28px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:4px;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(11,85,97,.05) 14px 28px),
    var(--alt-bg);
}
.map-consent .mc-ico{font-size:2.1rem;}
.map-consent h3{margin:8px 0 2px;}
.map-consent p{max-width:56ch; color:var(--ink-soft); font-size:.94rem; margin:0;}
.map-consent .mc-small{font-size:.82rem;}

/* ---------- Footer ----------
   Schlank & übersichtlich: Marke + Kurzbeschreibung + die zwei Pflichtlinks
   (Impressum/Datenschutz) in einer Zeile, zentriert, auf Textbreite begrenzt –
   kein mehrspaltiges Link-Grid mehr. */
footer.site-footer{background:#0c2426; color:#d3e7e3;}
footer.site-footer a{color:#a5e4d8;}
.footer-top{
  max-width:60ch; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--space-3); padding:var(--space-7) 0 var(--space-6);
}
.footer-brand{
  display:inline-flex; align-items:center; gap:10px;
  font-size:1.25rem; font-weight:800; letter-spacing:-.02em;
  color:#fff; text-decoration:none;
}
.footer-brand img{width:30px; height:30px;}
.footer-about{color:#b9d3ce; font-size:.94rem; margin:0;}
.footer-legal{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px var(--space-5); margin-top:var(--space-2);
}
.footer-legal a{
  display:inline-block; padding:8px 0; text-decoration:none;
  color:#cfe6e1; font-size:.9rem; font-weight:600;
}
.footer-legal a:hover{color:#fff; text-decoration:underline;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:var(--space-4) 0 var(--space-6);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px;
}
.fine{font-size:.82rem; color:#a9c4c0; margin:0;}
.footer-meta{display:flex; justify-content:center; gap:8px 18px; flex-wrap:wrap; font-size:.82rem; color:#a9c4c0;}

/* ---------- Mobil ---------- */
@media (max-width:760px){
  nav.site-nav .wrap{padding:8px 16px; gap:10px; row-gap:0; min-height:0;}
  .nav-right{display:contents;}
  .brand{order:1; margin-inline-end:auto; font-size:1.06rem;}
  .nav-controls{order:2;}
  .nav-burger{display:inline-flex;}
  .lang-btn{font-size:.82rem; padding:6px 10px;}
  .lang-btn .lang-name{display:none;}
  .lang-list{min-width:190px;}

  /* Burger-Menü als schwebendes Panel – exakt die Optik des Sprachwählers
     (.lang-list): gleiche Kartenfläche, Radien, Schatten und Zeilenhöhen. */
  .nav-links{
    /* Bezugspunkt ist die sticky Navigationsleiste; 16px = Innenabstand der
       Leiste, dadurch bündig mit der rechten Kante des Burger-Buttons. */
    position:absolute; z-index:80;
    inset-inline-end:16px; top:calc(100% + 8px);
    min-width:190px; max-height:min(70vh,420px); overflow-y:auto;
    width:auto; margin:0; padding:6px; gap:2px;
    flex-direction:column; align-items:stretch;
    background:var(--card); border:1px solid var(--border-c);
    border-radius:14px; box-shadow:var(--shadow-pop);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-links a{
    min-height:44px; width:100%;
    padding:9px 11px; border-radius:9px;
    font-size:.92rem; border-bottom:none;
  }
  nav.site-nav.nav-open .nav-links{
    opacity:1; visibility:visible; transform:translateY(0);
  }
}
@media (max-width:640px){
  /* Mobile-Hero: kompakter, damit Titel, Badges, Live-Leiste und CTA
     möglichst ohne Scrollen in den sichtbaren Bereich passen. */
  .hero{min-height:calc(100svh - var(--nav-h));}
  .hero-inner{padding:40px 20px 18px; transform:none;}
  .hero h1{margin-bottom:.1em;}
  .hero p.lead{font-size:1.02rem;}
  /* Badges fließen als eine kompakte, natürlich umbrechende Gruppe – dadurch
     passen mehr pro Zeile, die Gruppe wird flacher und gibt mehr vom Foto frei. */
  .hero .badges{flex-direction:row; flex-wrap:wrap; gap:8px; margin-top:18px;}
  .hero .badge-row{display:contents;}
  .hero .badge{
    padding:7px 12px; font-size:.8rem; gap:6px;
    background:rgba(10,28,30,.5); border-color:rgba(255,255,255,.38);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  }
  .badges-plain .badge-row{display:contents;}
  .badges-plain .badge{padding:7px 12px; font-size:.8rem; gap:6px;}
  .badge .ico{font-size:.92rem;}
  .hero-actions{margin-top:20px; gap:10px;}
  .wrap{padding:0 20px;}
  section{padding:52px 0;}
  .card{padding:22px;}
  .split-main,.split-side{padding:26px 22px;}
  .facts th,.facts td{padding:8px 15px;}
  .facts th{width:42%;}
  .dlrg-quote{padding:26px 22px;}
  .map-box iframe,.map-consent{height:340px; min-height:340px;}
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.legal-page{padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,88px);}
.legal-page h1{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:.3em;}
.legal-langnote{
  color:var(--ink-soft); font-size:.9rem; margin:0 0 28px;
  padding-inline-start:14px; border-inline-start:3px solid var(--border-c);
}
.legal{max-width:none;}
.legal h2{
  font-size:clamp(1.15rem,1.8vw,1.35rem); margin:38px 0 .5em;
  padding-bottom:8px; border-bottom:1px solid var(--border-c);
}
.legal h3{font-size:1.02rem; margin:24px 0 .4em;}
.legal p,.legal li{color:var(--ink-soft);}
.legal ul{margin:0 0 1em; padding-inline-start:22px;}
.legal li{margin-bottom:7px;}
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; padding:2px 6px; border-radius:5px;
  background:var(--alt-bg); border:1px solid var(--border-c); color:var(--ink);
}
.legal-address{
  font-style:normal; white-space:pre-line; line-height:1.7;
  padding:16px 18px; margin:0 0 1em;
  background:var(--card); border:1px solid var(--border-c);
  border-inline-start:4px solid var(--lake-2); border-radius:12px;
}
.legal-dl{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0 0 1em;}
.legal-dl dt{font-weight:700; color:var(--ink);}
.legal-dl dd{margin:0; color:var(--ink-soft);}
@media (max-width:520px){
  .legal-dl{grid-template-columns:1fr; gap:2px 0;}
  .legal-dl dd{margin-bottom:10px;}
}
.legal-stand{
  margin-top:34px; padding-top:16px; font-size:.88rem;
  color:var(--ink-soft); border-top:1px solid var(--border-c);
}
/* Kurzüberblick oben in der Datenschutzerklärung */
.legal-tldr{
  background:var(--card); border:1px solid var(--border-c);
  border-radius:var(--radius); padding:24px 26px; margin-bottom:8px;
  box-shadow:var(--shadow-sm);
}
.legal-tldr ul{margin-bottom:0;}
/* Warnhinweis bei unvollständigen Betreiberdaten */
.legal-warn{
  background:#fdf3e3; border:1px solid #d99a2b; border-inline-start:5px solid #d99a2b;
  color:#5c3d05; border-radius:13px; padding:18px 20px; margin:0 0 30px;
}
.legal-warn p{color:inherit; margin-bottom:.6em;}
.legal-warn p:last-child{margin-bottom:0;}
.legal-warn code{background:#fff; border-color:#e0c489; color:#5c3d05;}
.legal-warn .lw-small{font-size:.87rem; opacity:.85;}
[data-theme="dark"] .legal-warn{background:#3a2c10; border-color:#d99a2b; color:#f6e3bd;}
[data-theme="dark"] .legal-warn code{background:#241b08; border-color:#7a5c1c; color:#f6e3bd;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .legal-warn{background:#3a2c10; border-color:#d99a2b; color:#f6e3bd;}
  :root:not([data-theme="light"]) .legal-warn code{background:#241b08; border-color:#7a5c1c; color:#f6e3bd;}
}

/* ---------- News-Karten mit Bild / Karussell ---------- */
.news-card{padding:0; overflow:hidden; display:flex; flex-direction:column;}
.news-card .news-item{padding:24px 26px;}
.news-media{
  position:relative; overflow:hidden; background:var(--alt-bg);
  aspect-ratio:16/10;
}
.news-media > img{width:100%; height:100%; object-fit:cover; display:block;}
.news-media-placeholder svg{width:100%; height:100%; display:block;}

/* Alle Meldungen über die volle Breite, mit Bild/Text nebeneinander
   (ab Tablet-Breite), statt eines mehrspaltigen Rasters. */
.news-list, .news-more{display:flex; flex-direction:column; gap:24px;}
.news-more{margin-top:24px;}
.news-more[hidden]{display:none;}
@media (min-width:761px){
  .news-card{flex-direction:row;}
  .news-card .news-media{flex:1 1 52%; aspect-ratio:auto;}
  .news-card .news-item{
    flex:1 1 48%; display:flex; flex-direction:column; justify-content:center;
    padding:38px 44px;
  }
  .news-card .news-item .date{font-size:.84rem;}
  .news-card .news-item .news-body{font-size:1.1rem; line-height:1.6;}
}

/* Ausklapp-Button für weitere Meldungen (nur wenn mehr als 3 vorhanden) */
.news-toggle{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:24px; padding:15px 22px;
  background:var(--card); border:1px solid var(--border-c); border-radius:999px;
  color:var(--lake-1); font:inherit; font-weight:700; font-size:.95rem; cursor:pointer;
  transition:background-color .18s ease;
}
.news-toggle:hover{background:var(--nav-active-bg);}
.news-toggle-ico{display:inline-flex; transition:transform .25s ease;}
.news-toggle-ico svg{width:18px; height:18px;}
.news-toggle.is-open .news-toggle-ico{transform:rotate(180deg);}
@media (prefers-reduced-motion: reduce){ .news-toggle-ico{transition:none;} }
.news-track{
  display:flex; height:100%;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.news-track img{width:100%; height:100%; object-fit:cover; flex:0 0 100%;}
@media (prefers-reduced-motion: reduce){ .news-track{transition:none;} }

.news-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(10,28,30,.55); color:#fff;
  border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease, background-color .2s ease;
}
.news-media:hover .news-arrow,
.news-media:focus-within .news-arrow{opacity:1;}
.news-arrow:focus-visible{opacity:1; outline:3px solid #fff; outline-offset:2px;}
.news-arrow:hover{background:rgba(10,28,30,.8);}
.news-arrow svg{width:20px; height:20px;}
.news-arrow.prev{inset-inline-start:10px;}
.news-arrow.next{inset-inline-end:10px;}
/* Auf Touch-Geräten Pfeile dauerhaft zeigen (kein Hover) */
@media (hover:none){ .news-arrow{opacity:1;} }

.news-dots{
  position:absolute; inset-inline:0; bottom:10px;
  display:flex; justify-content:center; gap:7px; z-index:2;
}
.news-dot{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.25);
  transition:background-color .2s ease, transform .2s ease;
}
.news-dot[aria-current="true"]{background:#fff; transform:scale(1.25);}
.news-dot:focus-visible{outline:3px solid #fff; outline-offset:2px;}

/* ---------- Scroll-Reveal ----------
   Dezentes Einblenden beim Scrollen. Nur aktiv, wenn JS läuft (.js) – ohne
   JS bleibt alles sofort sichtbar. Klassen vergibt app.js; bei
   prefers-reduced-motion wird gar nicht erst versteckt. */
.js .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  will-change:opacity, transform;
}
.js .reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ---------- News-Artikel (eigene Seite, "Mehr erfahren") ---------- */
.news-article-source{color:var(--ink-soft); font-size:.9rem; margin:0 0 24px;}
.news-article-hero{
  margin:0 0 32px; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-md);
}
.news-article-hero img{width:100%; max-height:480px; object-fit:cover; display:block;}
.news-article-body h3{
  margin:36px 0 .5em; font-size:var(--step-2); color:var(--ink);
}
.news-article-body p{color:var(--ink-soft); line-height:1.7;}
.news-article-body ul{margin:0 0 1em; padding-inline-start:22px; color:var(--ink-soft);}
.news-article-body li{margin-bottom:7px;}