/* =============================================================
   nautic.lu — Stylesheet
   Farbwelt: Tiefenlot-Marine, Fahrwasser-Cyan, Kalkstein der
   Moselufer, Tonnenrot und das Gold des Luxemburger Löwen.
   Typografie: Bricolage Grotesque (Schilder), Inter Tight (Text),
   IBM Plex Mono (alles, was auf einer Seekarte steht: km, Kanäle,
   Fallhöhen, Koordinaten).
   ============================================================= */

/* ---------- Marken ---------- */
:root {
  --tief:      #0A2540;
  --text:      #0A2540;   /* Textrolle von --tief, im Nachtmodus eigen */
  --tief-2:    #10314F;
  --tief-3:    #17415F;
  --fluss:     #1B7FBF;
  --fahrwasser:#35B5E8;
  --schaum:    #D9EAF6;
  --gischt:    #F1F6FA;
  --sand:      #E7DCC6;
  --kalk:      #F6F2E9;
  --tonne:     #E32636;
  --boje:      #E0A21B;
  --steuerbord:#2E9E7A;
  --grau:      #5C7A93;
  --grau-2:    #8AA2B5;
  --linie:     rgba(10, 37, 64, .12);
  --linie-2:   rgba(10, 37, 64, .07);

  --ff-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-data:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --wrap: 1240px;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --shadow-s: 0 1px 3px rgba(10,37,64,.08), 0 6px 18px rgba(10,37,64,.06);
  --shadow-m: 0 2px 6px rgba(10,37,64,.08), 0 18px 44px rgba(10,37,64,.12);
  --shadow-l: 0 30px 70px rgba(10,37,64,.22);

  --head-h: 74px;

  /* --- Rollen statt Farbwerte: Grundlage für den Nachtmodus --- */
  --flaeche:      #ffffff;   /* Kartenflächen, Formulare, Seitengrund */
  --auf-farbe:    #ffffff;   /* Text und Symbole auf farbigem oder dunklem Grund */
  --ok-text:      #1c6b52;   /* Bestätigungen */
  --warn-text:    #7a5600;   /* Hinweise */
  --fehler-text:  #9e1420;   /* Fehler */
  --tinte:        #000000;
  --flaeche-glas: rgba(255, 255, 255, .94);   /* Kopfleiste, Kartenlegende */
  --flaeche-zart: rgba(255, 255, 255, .60);   /* Sprachumschalter */   /* reines Schwarz, wo es gebraucht wird */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* --kopf-h ist die gemessene Höhe, --head-h der Rückfall ohne Skript. */
  scroll-padding-top: calc(var(--kopf-h, var(--head-h)) + 16px);
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* "hidden" machte den Body zum Scrollcontainer — position:sticky hing
     dann an dessen Scrollport statt am Fenster und verhielt sich je nach
     Browser verschieden. "clip" schneidet seitlichen Überlauf genauso ab,
     erzeugt aber keinen Scrollcontainer. Die hidden-Zeile davor bleibt als
     Rückfall für alte Browser stehen. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--fluss); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
h4 { font-size: 1.05rem; font-weight: 600; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }

.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--tief); color: var(--auf-farbe); padding: .8rem 1.2rem; border-radius: 0 0 var(--r-s) 0;
}
.skiplink:focus { left: 0; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Auszeichnungen ---------- */
.eyebrow {
  font-family: var(--ff-data);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fluss);
  margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--fahrwasser); flex: none;
}
.eyebrow--light { color: var(--fahrwasser); }
.eyebrow--light::before { background: var(--boje); }

.data { font-family: var(--ff-data); font-variant-numeric: tabular-nums; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.24rem); color: var(--tief-3); }

/* =============================================================
   Kopfleiste
   ============================================================= */
.masthead {
  position: sticky; top: 0; z-index: 90;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.masthead__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--head-h);
}

/* Über dem Video: gläsern, bis gescrollt wird */
.masthead--over {
  position: fixed; left: 0; right: 0; top: 0;
  background: linear-gradient(to bottom, rgba(10,37,64,.72), rgba(10,37,64,0));
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.masthead--over .brand__name,
.masthead--over .brand__claim,
.masthead--over .mainnav__list a,
.masthead--over .mainnav__toggle { color: var(--auf-farbe); }
.masthead--over .brand__tld { color: var(--fahrwasser); }
.masthead--over .btn--ghost { color: var(--auf-farbe); border-color: rgba(255,255,255,.45); }
.masthead--over .btn--ghost:hover { background: rgba(255,255,255,.14); }
.masthead--over .burger span { background: var(--auf-farbe); }

/* Beim Scrollen ändert sich nur das Aussehen, NICHT die Positionierung.
   Vorher stand hier position:fixed — dadurch fiel die Leiste aus dem
   Textfluss, der Inhalt sprang um ihre Höhe nach oben und lief hinter
   dem halbdurchsichtigen Hintergrund durch. "sticky" bleibt oben kleben
   und hält den Platz frei; genau das ist gewollt.

   Ausnahme ist die Videobühne: dort liegt die Leiste absichtlich über
   dem Video und ist über .masthead--over bereits fixiert. */
.masthead.is-stuck {
  background: var(--flaeche-glas);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--linie);
  box-shadow: 0 1px 20px rgba(10,37,64,.09);
}
/* Der halbdurchsichtige Hintergrund funktioniert nur, wenn der Browser
   backdrop-filter beherrscht. Ohne ihn stünde der Text ungefiltert hinter
   der Leiste — dann lieber deckend weiß. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead.is-stuck { background: var(--flaeche); }
}

.masthead.is-stuck .brand__name { color: var(--text); }
.masthead.is-stuck .brand__tld { color: var(--fahrwasser); }
.masthead.is-stuck .brand__claim { color: var(--grau); }
.masthead.is-stuck .mainnav__list a,
.masthead.is-stuck .mainnav__toggle { color: var(--text); }
.masthead.is-stuck .btn--ghost { color: var(--text); border-color: var(--linie); }
.masthead.is-stuck .burger span { background: var(--tief); }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand__mark { width: 52px; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--ff-display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.03em; color: var(--text);
}
.brand__tld { color: var(--fahrwasser); }
.brand__claim {
  font-family: var(--ff-data); font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grau); margin-top: 4px;
}

.mainnav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.mainnav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.mainnav__list a, .mainnav__toggle {
  display: block; padding: .55rem .7rem; border-radius: var(--r-s);
  font-size: .95rem; font-weight: 500; color: var(--text);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  font-family: var(--ff-body);
  /* Nie umbrechen: "La Moselle" wurde sonst bei knapper Leiste
     zweizeilig, während alle Nachbarn einzeilig blieben. Wird es eng,
     schalten die Knöpfe rechts auf ihre Kurzfassungen um (nautic.js). */
  white-space: nowrap;
}
.mainnav__list a:hover, .mainnav__toggle:hover { background: rgba(53,181,232,.14); }

.has-sub { position: relative; }
.mainnav__toggle::after {
  content: ""; display: inline-block; margin-left: .4rem; width: 6px; height: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 268px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  box-shadow: var(--shadow-m); padding: .5rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu, .submenu.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a { color: var(--text) !important; font-size: .92rem; padding: .55rem .75rem; }
.submenu a:hover { background: var(--gischt); }

.mainnav__actions { display: flex; align-items: center; gap: .6rem; }

.burger {
  display: none; width: 44px; height: 44px; margin-left: auto;
  background: none; border: 0; cursor: pointer; padding: 10px;
  flex-direction: column; justify-content: space-between;
}
.burger span { display: block; height: 2px; width: 100%; background: var(--tief); border-radius: 2px; transition: transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* =============================================================
   Schaltflächen
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.35rem; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--ff-body); font-size: .95rem; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--fluss); color: var(--auf-farbe);
  box-shadow: 0 2px 0 rgba(10,37,64,.18), 0 10px 24px rgba(27,127,191,.28);
}
.btn--primary:hover { background: var(--tief); color: var(--auf-farbe); }
.btn--accent { background: var(--tonne); color: var(--auf-farbe); }
.btn--accent:hover { background: #c31d2c; color: var(--auf-farbe); }
.btn--ghost { border-color: var(--linie); color: var(--text); background: transparent; }
.btn--ghost:hover { background: var(--gischt); color: var(--text); }
.btn--light { background: var(--flaeche); color: var(--text); }
.btn--light:hover { background: var(--schaum); color: var(--text); }
.btn--block { width: 100%; }
.btn--sm { padding: .5rem 1rem; font-size: .86rem; }
.btn--lg { padding: .95rem 1.8rem; font-size: 1.05rem; }

/* =============================================================
   Videobühne
   ============================================================= */
.videohero {
  position: relative;
  min-height: min(92vh, 880px);
  display: flex; align-items: flex-end;
  padding: calc(var(--kopf-h, var(--head-h)) + 4rem) 0 0;
  color: var(--auf-farbe);
  overflow: hidden;
  background: var(--tief);
  isolation: isolate;
}
.videohero__media {
  position: absolute; inset: 0; z-index: -2;
}
.videohero__media video,
.videohero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.videohero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(10,37,64,.62) 0%, rgba(10,37,64,.18) 34%, rgba(10,37,64,.55) 72%, rgba(10,37,64,.92) 100%),
    radial-gradient(120% 80% at 15% 85%, rgba(10,37,64,.6), transparent 60%);
}

.videohero__inner { padding-bottom: 2.5rem; }
/* Kein width:100% — die Regel stand nach .wrap und hat deren
   seitliche Rinne ausgehebelt. Folge: Überschrift und Suchfeld
   klebten auf jeder Breite ab 560px am linken Bildrand. */

.videohero h1 {
  /* 18ch statt 16ch: Der Zeilenkasten muss zur längsten Fassung passen,
     und das ist die deutsche. Mit 16ch brach sie auf jeder Breite auf
     drei Zeilen um, während Französisch und Englisch mit zweien
     auskamen — die Bühne sah je nach Sprache anders aus.

     Untergrenze 2,05rem statt 2,4rem: Unterhalb von rund 510px greift
     nicht mehr 6.4vw, sondern der feste Mindestwert. Bei 2,4rem passte
     "Liegeplätze" auf schmalen Telefonen kaum noch in eine Zeile, und
     die Überschrift lief auf vier Zeilen aus. */
  font-size: clamp(2.05rem, 6.4vw, 5rem);
  letter-spacing: -.035em;
  margin: 0 0 1rem;
  max-width: 18ch;
  text-shadow: 0 2px 30px rgba(10,37,64,.5);
}
.videohero h1 em {
  font-style: normal;
  color: var(--fahrwasser);
}
.videohero__sub {
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  max-width: 56ch; color: rgba(255,255,255,.9);
  margin: 0 0 2rem;
  text-shadow: 0 1px 16px rgba(10,37,64,.6);
}

/* Suchbrücke */
.searchdeck {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-l);
  padding: .85rem;
  box-shadow: var(--shadow-l);
  max-width: 780px;
}
.searchdeck__tabs { display: flex; gap: .3rem; margin-bottom: .75rem; flex-wrap: wrap; }
.searchdeck__tab {
  flex: 1 1 auto;
  padding: .6rem .9rem; border-radius: 999px; border: 1px solid transparent;
  background: rgba(255,255,255,.12); color: var(--auf-farbe); cursor: pointer;
  font-family: var(--ff-body); font-size: .9rem; font-weight: 600;
  transition: background .18s, color .18s;
}
.searchdeck__tab:hover { background: rgba(255,255,255,.24); }
.searchdeck__tab[aria-selected="true"] { background: var(--flaeche); color: var(--text); }
.searchdeck__row { display: flex; gap: .5rem; }
.searchdeck__row input {
  flex: 1; min-width: 0;
  padding: .95rem 1.15rem; border-radius: 999px; border: 0;
  font-family: var(--ff-body); font-size: 1rem; color: var(--text);
  background: var(--flaeche);
}
.searchdeck__row input::placeholder { color: var(--grau-2); }

/* Kennzahlenband unter der Bühne */
.herofacts {
  display: flex; flex-wrap: wrap; gap: 2.2rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
}
.herofacts div { line-height: 1.25; }

/* Sowohl <b> als auch <strong>: Beide Schreibweisen kommen im Bestand vor,
   und eine unbeschriftete Zahl ist schlimmer als keine Zahl. */
.herofacts b,
.herofacts strong {
  display: block; font-family: var(--ff-display); font-size: 1.7rem; font-weight: 800;
  letter-spacing: -.02em;
}
.herofacts span {
  display: block;
  font-family: var(--ff-data); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fact-label, rgba(255,255,255,.68));
}

/* Auf hellem Grund waren Beschriftung und Trennlinie weiß auf weiß —
   die Zahlen standen dort ohne jeden Bezug. */
.herofacts--hell {
  border-top-color: var(--linie);
}
.herofacts--hell b,
.herofacts--hell strong { color: var(--text); }
.herofacts--hell { --fact-label: var(--grau); }

/* =============================================================
   SIGNATUR: Kilometrierungsband
   Der Fluss als Lineal — so wie Skipper tatsächlich navigieren.
   ============================================================= */
.kmband {
  position: relative;
  background: var(--tief);
  color: var(--auf-farbe);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.4rem 0 1.1rem;
  overflow: hidden;
}
.kmband__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap;
}
.kmband__head h2 {
  font-size: 1rem; font-weight: 600; margin: 0;
  font-family: var(--ff-data); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.kmband__head a { color: var(--fahrwasser); font-size: .85rem; text-decoration: none; font-weight: 600; }
.kmband__head a:hover { color: var(--auf-farbe); }

.kmband__scroll {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
}
.kmband__scroll::-webkit-scrollbar { height: 5px; }
.kmband__scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); border-radius: 3px; }

.kmband__track {
  position: relative;
  display: flex; align-items: flex-end;
  gap: 0; min-width: max-content;
  padding: 2.6rem 0 1.6rem;
}
.kmband__track::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1.6rem; height: 3px;
  background: linear-gradient(90deg, var(--fahrwasser), var(--fluss) 55%, var(--fahrwasser));
  border-radius: 2px;
}
.kmtick {
  position: relative; flex: none;
  /* 1,6rem war der Abstand zur Linie — genau so viel, wie Punkt und
     Strich nach oben ragen. Die Kilometerzahl lag deshalb unter dem
     Punkt. Jetzt bleibt Platz für beides. */
  padding: 0 0 2.5rem;
  text-decoration: none; color: var(--auf-farbe);
  display: flex; flex-direction: column; align-items: center;
  min-width: 96px;
}
.kmtick::after {
  content: ""; position: absolute; bottom: 1.6rem; left: 50%;
  width: 2px; height: 10px; background: rgba(255,255,255,.5);
  transform: translate(-50%, 50%);
}
.kmtick__dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2.5px solid var(--tief); background: var(--fahrwasser);
  position: absolute; bottom: 1.6rem; left: 50%;
  transform: translate(-50%, 50%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kmtick__name {
  font-size: .78rem; font-weight: 600; line-height: 1.25; text-align: center;
  max-width: 100px; margin-bottom: .3rem;
}
.kmtick__km {
  font-family: var(--ff-data); font-size: .66rem; color: var(--fahrwasser);
  letter-spacing: .04em;
  /* Etwas Luft nach unten, damit die Zahl den Punkt nicht berührt. */
  margin-bottom: .2rem;
}
.kmtick:hover .kmtick__dot { transform: translate(-50%, 50%) scale(1.45); box-shadow: 0 0 0 4px rgba(53,181,232,.3); }
.kmtick:hover .kmtick__name { color: var(--fahrwasser); }
.kmtick[data-typ="schleuse"] .kmtick__dot { background: var(--tonne); }
.kmtick[data-typ="hafen"] .kmtick__dot { background: var(--boje); }
.kmtick__typ { display: none; }
.kmband__mehr, .kmband__hinweis { display: none; }

/* =============================================================
   Gratis-Versprechen
   ============================================================= */
.promise {
  background: var(--kalk);
  border-block: 1px solid var(--linie-2);
  padding: 2.2rem 0;
}
.promise__inner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.8rem; align-items: center;
}
.promise__text h2 { font-size: 1.5rem; margin-bottom: .35rem; }
.promise__text p { margin: 0; color: var(--tief-3); max-width: 62ch; }

/* =============================================================
   Abschnitte
   ============================================================= */
.section { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.section--tight { padding: clamp(2.4rem, 4vw, 3.6rem) 0; }
.section--gischt { background: var(--gischt); }
.section--tief { background: var(--tief); color: var(--auf-farbe); }
.section--tief h2, .section--tief h3 { color: var(--auf-farbe); }
.section--tief p { color: rgba(255,255,255,.78); }

.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 2.2rem; flex-wrap: wrap;
}
.section__head p { margin: .3rem 0 0; color: var(--grau); max-width: 62ch; }
.section--tief .section__head p { color: rgba(255,255,255,.7); }
.section__head h2 { margin-bottom: 0; }

/* Wellenkante zwischen Abschnitten */
.wave { display: block; width: 100%; height: 56px; }
.wave path { fill: currentColor; }

/* =============================================================
   Anzeigenkarten
   ============================================================= */
.cardgrid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.cardgrid--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* auto-fit statt auto-fill: leere Spuren fallen weg, wenige Karten füllen
   die Zeile — drei Karten stehen so ohne Loch nebeneinander. */
.cardgrid--fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  position: relative;
  background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r-m);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: transparent; }
.card__media {
  position: relative; aspect-ratio: 4 / 3; background: var(--schaum); overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.card:hover .card__media img { transform: scale(1.045); }
.card__badge {
  position: absolute; top: .7rem; left: .7rem;
  background: rgba(10,37,64,.86); color: var(--auf-farbe);
  font-family: var(--ff-data); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .6rem; border-radius: 4px;
  backdrop-filter: blur(6px);
}
.card__badge--miete { background: rgba(46,158,122,.92); }
.card__badge--liegeplatz { background: rgba(224,162,27,.94); color: var(--text); }
.card__badge--gesuch { background: rgba(227,38,54,.9); }
.card__count {
  position: absolute; bottom: .7rem; right: .7rem;
  background: rgba(10,37,64,.72); color: var(--auf-farbe); font-family: var(--ff-data);
  font-size: .68rem; padding: .22rem .5rem; border-radius: 4px;
}
.card__body { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.card__title {
  font-family: var(--ff-display); font-weight: 700; font-size: 1.06rem; line-height: 1.25;
  letter-spacing: -.015em; margin: 0 0 .35rem;
}
.card__title a { color: var(--text); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__meta {
  font-family: var(--ff-data); font-size: .72rem; color: var(--grau);
  display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin-bottom: .7rem;
}
.card__specs {
  list-style: none; margin: 0 0 .9rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.card__specs li {
  font-family: var(--ff-data); font-size: .68rem;
  background: var(--gischt); color: var(--tief-3);
  padding: .22rem .5rem; border-radius: 4px;
}
.card__foot {
  margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: .7rem;
  border-top: 1px solid var(--linie-2); padding-top: .8rem;
}
.card__price {
  font-family: var(--ff-display); font-weight: 800; font-size: 1.22rem;
  letter-spacing: -.02em; color: var(--text);
}
.card__pricetype { font-family: var(--ff-data); font-size: .66rem; color: var(--grau); }
.card__age { font-family: var(--ff-data); font-size: .68rem; color: var(--grau-2); }

/* =============================================================
   Filterleiste
   ============================================================= */
.filterbar {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.1rem; margin-bottom: 2rem; box-shadow: var(--shadow-s);
}
.filterbar__grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  align-items: end;
}
.filterbar__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--linie-2);
  flex-wrap: wrap;
}
.filterbar__count { font-family: var(--ff-data); font-size: .8rem; color: var(--grau); }

/* =============================================================
   Formulare
   ============================================================= */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field > label, .field__label {
  font-family: var(--ff-data); font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--grau); font-weight: 500;
}
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=number], .field input[type=password], .field input[type=url],
.field input[type=search], .field input[type=date], .field select, .field textarea {
  width: 100%; padding: .68rem .85rem;
  border: 1.5px solid var(--linie); border-radius: var(--r-s);
  font-family: var(--ff-body); font-size: .96rem; color: var(--text);
  background: var(--flaeche); transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235C7A93' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 11px;
  padding-right: 2.2rem;
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--fahrwasser);
  box-shadow: 0 0 0 3px rgba(53,181,232,.2);
}
.field__hint { font-size: .8rem; color: var(--grau); }
.field__error { font-size: .85rem; color: var(--tonne); font-weight: 500; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--tonne); }

.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.check {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .6rem .75rem; border: 1.5px solid var(--linie); border-radius: var(--r-s);
  cursor: pointer; font-size: .9rem; transition: border-color .16s, background .16s;
}
.check:hover { border-color: var(--fahrwasser); background: var(--gischt); }
.check input { margin: .2rem 0 0; accent-color: var(--fluss); flex: none; }
.check:has(input:checked) { border-color: var(--fluss); background: rgba(53,181,232,.1); }

.formcard {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l);
  padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--shadow-s);
}
.formsection { border-top: 1px solid var(--linie-2); padding-top: 1.8rem; margin-top: 1.8rem; }
.formsection:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.formsection > h2 {
  font-size: 1.18rem; display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem;
}
.formsection__num {
  font-family: var(--ff-data); font-size: .78rem; font-weight: 500;
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--tief); color: var(--auf-farbe); display: grid; place-items: center;
}
.formgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.formgrid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.span-all { grid-column: 1 / -1; }

/* Bild-Ablage */
.dropzone {
  border: 2px dashed var(--linie); border-radius: var(--r-m);
  padding: 2rem 1.2rem; text-align: center; background: var(--gischt);
  transition: border-color .2s, background .2s; cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--fahrwasser); background: rgba(53,181,232,.09); }
.dropzone strong { display: block; font-family: var(--ff-display); font-size: 1.05rem; margin-bottom: .25rem; }
.dropzone span { font-size: .86rem; color: var(--grau); }
.previewgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin-top: 1rem; }
.previewgrid figure { margin: 0; position: relative; aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; background: var(--schaum); }
.previewgrid img { width: 100%; height: 100%; object-fit: cover; }

/* Honigtopf gegen Werbemüll */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* =============================================================
   Datentabellen (Schleusen, Brücken …)
   ============================================================= */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-m); border: 1px solid var(--linie); background: var(--flaeche); }
table.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 720px; }
table.data-table caption { text-align: left; padding: 1rem 1.1rem; color: var(--grau); font-size: .86rem; }
table.data-table th {
  text-align: left; padding: .8rem 1rem; background: var(--tief); color: var(--auf-farbe);
  font-family: var(--ff-data); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; position: sticky; top: 0; white-space: nowrap;
}
table.data-table td { padding: .8rem 1rem; border-top: 1px solid var(--linie-2); vertical-align: top; }
table.data-table tbody tr:hover { background: var(--gischt); }
table.data-table .num { font-family: var(--ff-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data-table a { font-weight: 600; text-decoration: none; }
table.data-table a:hover { text-decoration: underline; }

/* =============================================================
   POI-Karten (Schleuse, Hafen …)
   ============================================================= */
.poigrid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.poi {
  background: var(--flaeche); border: 1px solid var(--linie-2); border-left: 4px solid var(--fluss);
  border-radius: var(--r-s); padding: 1.2rem 1.3rem;
  transition: box-shadow .2s, transform .2s;
}
.poi:hover { box-shadow: var(--shadow-s); transform: translateY(-2px); }
.poi__top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; }
.poi__name { font-family: var(--ff-display); font-weight: 700; font-size: 1.08rem; margin: 0; letter-spacing: -.015em; }
.poi__name a { color: var(--text); text-decoration: none; }
.poi__km { font-family: var(--ff-data); font-size: .75rem; color: var(--fluss); white-space: nowrap; font-weight: 500; }
.poi__desc { font-size: .92rem; color: var(--tief-3); margin: 0 0 .9rem; }
.poi__data { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .85rem; }
.poi__data li { display: flex; gap: .6rem; }
.poi__data dt, .poi__data .k {
  font-family: var(--ff-data); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grau); min-width: 116px; flex: none; padding-top: .12rem;
}
.poi__data .v { font-weight: 500; }

.flag-land {
  display: inline-block; font-family: var(--ff-data); font-size: .62rem; letter-spacing: .08em;
  padding: .12rem .4rem; border-radius: 3px; background: var(--gischt); color: var(--grau);
  vertical-align: middle;
}

/* =============================================================
   Karte
   ============================================================= */
.mapshell {
  position: relative; border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--linie); box-shadow: var(--shadow-s); background: var(--schaum);
}
#revierkarte { width: 100%; height: clamp(440px, 68vh, 760px); background: var(--schaum); }
.mapshell--teaser #revierkarte { height: 420px; }

.maplegend {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem;
}
.maplegend button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem; border-radius: 999px;
  border: 1.5px solid var(--linie); background: var(--flaeche); cursor: pointer;
  font-family: var(--ff-body); font-size: .85rem; font-weight: 500; color: var(--text);
  transition: border-color .16s, background .16s, opacity .16s;
}
.maplegend button .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.maplegend button[aria-pressed="false"] { opacity: .45; }
.maplegend button:hover { border-color: var(--fahrwasser); }
.maplegend .cnt { font-family: var(--ff-data); font-size: .7rem; color: var(--grau); }

.leaflet-popup-content-wrapper { border-radius: var(--r-m); box-shadow: var(--shadow-m); }
.leaflet-popup-content { margin: 0; width: 280px !important; font-family: var(--ff-body); }
.mappop { padding: .95rem 1.05rem; }
.mappop__type {
  font-family: var(--ff-data); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--auf-farbe); padding: .18rem .45rem; border-radius: 3px; display: inline-block; margin-bottom: .5rem;
}
.mappop h3 { font-size: 1rem; margin: 0 0 .2rem; }
.mappop__km { font-family: var(--ff-data); font-size: .72rem; color: var(--fluss); margin-bottom: .55rem; }
.mappop p { font-size: .85rem; margin: 0 0 .6rem; color: var(--tief-3); }
.mappop dl { display: grid; grid-template-columns: auto 1fr; gap: .18rem .6rem; margin: 0; font-size: .78rem; }
.mappop dt { font-family: var(--ff-data); font-size: .64rem; text-transform: uppercase; color: var(--grau); }
.mappop dd { margin: 0; font-weight: 500; }

/* =============================================================
   Anzeigendetail
   ============================================================= */
.detail { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .95fr); gap: 2.4rem; align-items: start; }

.gallery { border-radius: var(--r-m); overflow: hidden; background: var(--tief); }
.gallery__main { position: relative; aspect-ratio: 16 / 10; background: var(--tief); }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumbs { display: flex; gap: .35rem; padding: .35rem; overflow-x: auto; background: var(--tief-2); }
.gallery__thumbs button {
  flex: none; width: 84px; aspect-ratio: 4/3; border: 2px solid transparent; border-radius: 5px;
  overflow: hidden; padding: 0; cursor: pointer; background: none; opacity: .6; transition: opacity .18s, border-color .18s;
}
.gallery__thumbs button[aria-current="true"], .gallery__thumbs button:hover { opacity: 1; border-color: var(--fahrwasser); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.spectable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spectable th {
  text-align: left; font-family: var(--ff-data); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grau); font-weight: 500;
  padding: .6rem 1rem .6rem 0; width: 44%; vertical-align: top;
}
.spectable td { padding: .6rem 0; border-bottom: 1px solid var(--linie-2); font-weight: 500; }
.spectable tr:last-child td, .spectable tr:last-child th { border-bottom: 0; }

.aside-card {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.4rem; box-shadow: var(--shadow-s); margin-bottom: 1.2rem;
}
/* Früher haftete hier die ERSTE Karte der Randspalte. Eine sticky-Karte
   vor Geschwistern schiebt sich beim Scrollen aber zwangsläufig über sie:
   Sie ist positioniert und malt darüber — auf der Anzeigenseite verschwand
   so die Überschrift des Sicherheitskastens unter der Preiskarte. Deshalb
   haftet jetzt die ganze Randspalte (.detail > aside); die Klasse bleibt
   im Markup, ist aber wirkungslos. */
.aside-card--sticky { position: static; }
.detail > aside {
  position: sticky;
  top: calc(var(--kopf-h, var(--head-h)) + 20px);
  /* Deckel: Ist die Spalte höher als das Fenster, scrollt sie in sich,
     statt dass ihre unteren Karten (Pegel, ELWIS) unerreichbar werden. */
  max-height: calc(100vh - var(--kopf-h, var(--head-h)) - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.aside-card__price {
  font-family: var(--ff-display); font-weight: 800; font-size: 2.1rem; letter-spacing: -.03em;
  line-height: 1.1; margin-bottom: .15rem;
}
.aside-card__pricetype { font-family: var(--ff-data); font-size: .74rem; color: var(--grau); margin-bottom: 1.1rem; }

.taglist { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.taglist li {
  font-size: .85rem; background: var(--gischt); color: var(--tief-3);
  padding: .35rem .7rem; border-radius: 999px;
}
.taglist li::before { content: "✓"; color: var(--steuerbord); margin-right: .35rem; font-weight: 700; }

/* =============================================================
   Bildstreifen
   ============================================================= */
.photostrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px; }
.photostrip__kachel {
  display: block; margin: 0; position: relative; aspect-ratio: 3/4;
  overflow: hidden; text-decoration: none;
}
.photostrip img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.photostrip__kachel:hover img,
.photostrip__kachel:focus-visible img { transform: scale(1.06); }

.photostrip__text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(10,37,64,.88));
  color: var(--auf-farbe); font-family: var(--ff-data); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
/* Der Pfeil macht sichtbar, dass es weitergeht — vorher sahen die Bilder
   anklickbar aus, waren es aber nicht. */
.photostrip__pfeil {
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.photostrip__kachel:hover .photostrip__pfeil,
.photostrip__kachel:focus-visible .photostrip__pfeil { opacity: 1; transform: translateX(0); }
.photostrip__kachel:focus-visible { outline: 3px solid var(--fahrwasser); outline-offset: -3px; }

@media (pointer: coarse) {
  /* Ohne Hover muss der Pfeil dauerhaft sichtbar sein. */
  .photostrip__pfeil { opacity: .8; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .photostrip img { transition: none; }
  .photostrip__kachel:hover img { transform: none; }
  .photostrip__pfeil { transition: none; }
}

/* =============================================================
   Schritte / Hinweise
   ============================================================= */
.steps { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: s; }
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--ff-data); font-size: 1.5rem; font-weight: 500; color: var(--fahrwasser);
}
.step h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.step p { font-size: .93rem; color: var(--grau); margin: 0; }
.section--tief .step p { color: rgba(255,255,255,.72); }

.note {
  border-left: 4px solid var(--boje); background: #FFF9EC;
  padding: 1.1rem 1.3rem; border-radius: 0 var(--r-s) var(--r-s) 0; margin: 1.6rem 0;
}
.note--warn { border-left-color: var(--tonne); background: #FFF1F2; }
.note--ok   { border-left-color: #1E7F4F; background: #F0F9F3; }
.note--info { border-left-color: var(--fahrwasser); background: var(--gischt); }
.note h3 { font-size: 1rem; margin-bottom: .35rem; }
.note p:last-child { margin-bottom: 0; }
.note p { font-size: .93rem; }

/* Kacheln für Revierthemen */
.tiles { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tile {
  position: relative; display: block; text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r-m);
  padding: 1.5rem 1.4rem 1.4rem; color: var(--text);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  overflow: hidden;
}
.tile::after {
  content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: var(--gischt); transition: transform .35s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: transparent; color: var(--text); }
.tile:hover::after { transform: scale(1.5); }
.tile > * { position: relative; z-index: 1; }
.tile__icon { width: 34px; height: 34px; color: var(--fluss); margin-bottom: .9rem; }
.tile h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.tile p { font-size: .9rem; color: var(--grau); margin: 0; }
.tile__count { font-family: var(--ff-data); font-size: .68rem; color: var(--fahrwasser); letter-spacing: .08em; }

/* =============================================================
   Meldungen, Blättern, Leerzustände
   ============================================================= */
.flash-stack { position: sticky; top: var(--kopf-h, var(--head-h)); z-index: 50; }
.flash {
  padding: .9rem 1.2rem; font-size: .94rem; font-weight: 500;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.flash--ok    { background: #E6F6F0; color: #14624A; }
.flash--error { background: #FDECEE; color: var(--fehler-text); }
.flash--info  { background: var(--gischt); color: var(--text); }
.flash--warn  { background: #FFF6E5; color: var(--warn-text); }

.pager ul { display: flex; gap: .35rem; list-style: none; padding: 0; margin: 2.5rem 0 0; justify-content: center; flex-wrap: wrap; }
.pager a, .pager span {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .8rem;
  border-radius: var(--r-s); border: 1px solid var(--linie); text-decoration: none;
  font-family: var(--ff-data); font-size: .88rem; color: var(--text); background: var(--flaeche);
}
.pager a:hover { border-color: var(--fahrwasser); background: var(--gischt); }
.pager .is-current { background: var(--tief); color: var(--auf-farbe); border-color: var(--text); }
.pager__gap { border: 0; background: none; color: var(--grau); }

.empty {
  text-align: center; padding: 4rem 1.5rem; background: var(--gischt);
  border-radius: var(--r-m); border: 1px dashed var(--linie);
}
.empty svg { width: 56px; height: 56px; color: var(--grau-2); margin: 0 auto 1.1rem; }
.empty h2 { font-size: 1.35rem; margin-bottom: .4rem; }
.empty p { color: var(--grau); max-width: 46ch; margin-inline: auto; }

/* =============================================================
   Brotkrumen
   ============================================================= */
.crumbs { border-bottom: 1px solid var(--linie-2); background: var(--gischt); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: .7rem 0; font-size: .82rem; }
.crumbs li + li::before { content: "›"; margin-right: .4rem; color: var(--grau-2); }
.crumbs a { color: var(--grau); text-decoration: none; }
.crumbs a:hover { color: var(--fluss); }
.crumbs span { color: var(--text); font-weight: 500; }

/* =============================================================
   Fußbereich
   ============================================================= */
.footer { background: var(--tief); color: rgba(255,255,255,.76); position: relative; }
.footer__sounding { color: var(--text); background: var(--flaeche); line-height: 0; }
.footer__sounding svg { width: 100%; height: 56px; display: block; }
.footer__sounding path { fill: var(--tief); }

.footer__inner {
  display: grid; gap: 2.4rem;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.2fr;
  padding: 3.4rem 0 2.6rem;
}
.footer__brand img { margin-bottom: 1rem; }
.footer__pitch { font-size: .95rem; max-width: 34ch; }
.footer__free {
  font-size: .88rem; border-left: 3px solid var(--boje); padding-left: .9rem;
  color: rgba(255,255,255,.72); max-width: 36ch;
}
.footer__free strong { color: var(--auf-farbe); }
.footer h2 {
  font-family: var(--ff-data); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fahrwasser); font-weight: 500; margin-bottom: 1rem;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer__col a { color: rgba(255,255,255,.76); text-decoration: none; font-size: .92rem; }
.footer__col a:hover { color: var(--auf-farbe); text-decoration: underline; }
.footer__note { font-size: .86rem; margin-bottom: .8rem; }

.footer__base { border-top: 1px solid rgba(255,255,255,.1); }
.footer__base-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.2rem 0; font-size: .8rem; flex-wrap: wrap;
}
.footer__base p { margin: 0; color: rgba(255,255,255,.55); }
.footer__flag { display: flex; align-items: center; gap: .5rem; }
.flag {
  width: 21px; height: 14px; border-radius: 2px; display: inline-block;
  /* Der mittlere Streifen stand auf var(--flaeche) und wurde damit im
     Dunkelmodus dunkel — aus Weiss-Rot-Blau wurde Rot-Anthrazit-Blau.
     Eine Staatsflagge folgt keinem Farbschema, die drei Werte stehen fest. */
  background: linear-gradient(to bottom, #EA141C 0 33.33%, #FFFFFF 33.33% 66.66%, #51ADDA 66.66% 100%);
}

/* =============================================================
   Reaktionsfähigkeit
   ============================================================= */
/* Ab hier klappt die Leiste ins Mobilmenü — derselbe Punkt für alles,
   was sonst zweispaltig bliebe. Vorher standen hier 1080 und 1100
   nebeneinander und haben sich gegenseitig überstimmt. */






/* =============================================================
   Bewegung nur, wenn erwünscht
   ============================================================= */


/* ---------- Druck ---------- */


/* =========================================================================
   Nachträge: Revierseiten, Konto, Rechtstexte, Suche
   ========================================================================= */

/* ---- Untermenü der Revier- und Kontoseiten ---- */
.subnav { margin-top: 1.8rem; border-bottom: 1px solid var(--schaum); }
.subnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .3rem; flex-wrap: wrap;
}
.subnav a {
  display: block; padding: .6rem .95rem;
  color: var(--grau); text-decoration: none;
  font-size: .93rem; font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subnav a:hover { color: var(--text); border-bottom-color: var(--schaum); }
.subnav a.is-current { color: var(--fluss); border-bottom-color: var(--fluss); font-weight: 600; }
.subnav .data { font-size: .82rem; opacity: .7; }

/* ---- Punkte im Revier ---- */
.poi__meta { font-size: .87rem; color: var(--grau); margin: .15rem 0 .6rem; }
.poi__type {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--poi-farbe, var(--fluss));
}
.poi__foot { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.poi__link { font-size: .87rem; font-weight: 600; }
.poi__flag {
  font-size: .74rem; color: var(--boje);
  border: 1px solid currentColor; border-radius: 20px; padding: .05rem .5rem;
}
.poi__unbestaetigt {
  margin-top: .9rem; padding: .7rem .85rem;
  background: #FFF8EC; border-left: 3px solid var(--boje); border-radius: 0 6px 6px 0;
  font-size: .86rem; line-height: 1.55; color: #6B5518;
}

/* ---- Datentabellen: Ergaenzungen zur Basis weiter oben ---- */
/* Bewusst mit table.-Praefix, damit die Spezifitaet zur Basisregel passt
   und sich die beiden Bloecke nicht gegenseitig ueberstimmen. */
table.data-table tbody th { font-weight: 600; text-align: left; }
table.data-table .mid { text-align: center; }
table.data-table .yes { color: var(--steuerbord); font-size: 1.15rem; }
table.data-table .no  { color: #C9D3DB; font-size: 1.15rem; }
table.data-table .unk { color: var(--grau); }
table.data-table--matrix { min-width: 860px; }

.maphint { margin-top: 1rem; font-size: .86rem; color: var(--grau); line-height: 1.6; }
.mapshell--full #revierkarte { height: min(72vh, 680px); }

/* ---- Kartenlegende ---- */
.maplegend {
  position: absolute; top: 1rem; left: 1rem; z-index: 500;
  background: var(--flaeche-glas); backdrop-filter: blur(6px);
  border-radius: 10px; padding: .8rem; box-shadow: 0 4px 18px rgba(10, 37, 64, .18);
  max-height: calc(100% - 2rem); overflow: auto; max-width: 240px;
}
.maplegend__title {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--grau); margin: 0 0 .5rem; font-weight: 700;
}
.maplegend__item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: 0; padding: .3rem .35rem; border-radius: 5px;
  cursor: pointer; font: inherit; font-size: .84rem; text-align: left; opacity: .42;
}
.maplegend__item.is-on { opacity: 1; }
.maplegend__item:hover { background: var(--gischt); }
.maplegend__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.maplegend__label { flex: 1; }
.maplegend__count { font-family: var(--font-mono, monospace); font-size: .78rem; color: var(--grau); }
.maplegend__locate {
  margin-top: .6rem; width: 100%; border: 1px solid var(--schaum); background: var(--flaeche);
  border-radius: 6px; padding: .4rem; font: inherit; font-size: .82rem; cursor: pointer;
}
.maplegend__locate:hover { background: var(--gischt); }

/* ---- Hervorgehobener Verweis (z. B. Schwebsange) ---- */
.spotlight {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 0;
  background: var(--tief); color: var(--auf-farbe); border-radius: 14px; overflow: hidden;
  text-decoration: none; transition: transform .16s ease, box-shadow .16s ease;
}
.spotlight:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(10, 37, 64, .22); }
.spotlight__text { padding: 2rem 2.2rem; align-self: center; }
.spotlight__text h2 { color: var(--auf-farbe); margin: .2rem 0 .6rem; }
.spotlight__text p { color: rgba(255, 255, 255, .82); font-size: .95rem; line-height: 1.65; }
.spotlight .eyebrow { color: var(--fahrwasser); }
.spotlight__cta {
  display: inline-block; margin-top: 1.1rem; font-weight: 700; color: var(--fahrwasser);
}
.spotlight__cta::after { content: " →"; }
.spotlight__media { display: block; }
.spotlight__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photofig { margin: 1.8rem 0; }
.photofig img { width: 100%; height: auto; border-radius: 12px; display: block; }
.photofig figcaption { margin-top: .6rem; font-size: .85rem; color: var(--grau); }

.checkliste-klein { margin: 0; padding-left: 1.1rem; font-size: .89rem; line-height: 1.75; color: #3A4A57; }
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { padding: .35rem 0; border-bottom: 1px solid var(--schaum); }
.linklist li:last-child { border-bottom: 0; }

/* ---- Formulare, Konto, Rechtstexte ---- */
.formcard--flat { box-shadow: none; border: 0; padding: 0; background: none; }
.field__label { display: block; font-weight: 600; font-size: .92rem; }
.field__opt { font-weight: 400; color: var(--grau); font-size: .85em; }

.authbox { max-width: 460px; margin: 0 auto; }
.authbox__foot { margin-top: 1.4rem; text-align: center; font-size: .9rem; color: var(--grau); }
.authbox__foot span { margin: 0 .4rem; }

.bigsearch { display: flex; gap: .6rem; margin-top: 1.4rem; }
.bigsearch input {
  flex: 1; padding: .9rem 1.1rem; font-size: 1.02rem;
  border: 2px solid var(--schaum); border-radius: 10px; background: var(--flaeche);
}
.bigsearch input:focus { outline: 0; border-color: var(--fluss); }

.editbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.inlineform { display: inline; }

.mylist { display: flex; flex-direction: column; gap: 1rem; }
.myitem {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 1.2rem;
  background: var(--flaeche); border: 1px solid var(--schaum); border-radius: 12px; padding: 1rem;
}
.myitem__media img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; display: block; }
.myitem__body h3 { margin: .3rem 0 .2rem; font-size: 1.05rem; }
.myitem__meta, .myitem__stats { font-size: .85rem; color: var(--grau); margin: .2rem 0; }
.myitem__reason {
  margin-top: .5rem; font-size: .86rem; color: #96202B;
  background: #FBDDDF; padding: .5rem .7rem; border-radius: 6px;
}
.myitem__status {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  padding: .1rem .55rem; border-radius: 20px; text-transform: uppercase;
}
.myitem__status--ok    { background: #DBF3E9; color: var(--ok-text); }
.myitem__status--warn  { background: #FCEFD2; color: #8A6410; }
.myitem__status--info  { background: var(--schaum); color: var(--tief-3); }
.myitem__status--error { background: #FBDDDF; color: #96202B; }
.myitem__actions { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; }

.editimages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.editimage { margin: 0; }
.editimage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.editimage figcaption { margin-top: .4rem; text-align: center; }

.btn--danger { color: var(--tonne); border-color: currentColor; }
.btn--danger:hover { background: var(--tonne); color: var(--auf-farbe); border-color: var(--tonne); }

.legal { line-height: 1.75; }
.legal h2 { margin-top: 2.4rem; font-size: 1.25rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .5rem; }
.legal code { background: var(--gischt); padding: .1rem .4rem; border-radius: 4px; font-size: .88em; }

.faq dt { font-weight: 700; margin-top: 1.4rem; color: var(--text); }
.faq dd { margin: .4rem 0 0; color: #3A4A57; line-height: 1.7; }



/* ---- Person hinter dem Projekt ---- */
.person {
  display: flex; align-items: center; gap: 1.4rem;
  margin: 1.6rem 0 1.4rem; padding: 1.3rem 1.5rem;
  background: var(--gischt); border-radius: 14px;
  border-left: 3px solid var(--fluss);
}
.person__foto { flex: 0 0 auto; display: block; }
.person__foto img {
  width: 112px; height: 112px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: 0 3px 14px rgba(10, 37, 64, .16);
}
.person__text { min-width: 0; }
.person__name {
  font-family: var(--font-display, inherit);
  font-weight: 700; font-size: 1.18rem; color: var(--text);
  margin: 0 0 .1rem; line-height: 1.25;
}
.person__rolle {
  margin: 0 0 .5rem; font-size: .88rem; color: var(--fluss); font-weight: 600;
}
.person__zeile { margin: 0 0 .6rem; font-size: .93rem; color: #3A4A57; line-height: 1.6; }
.person__kontakt { margin: 0; font-size: .89rem; font-weight: 600; }



/* ---- Sprachumschalter ---- */
.langswitch {
  display: inline-flex; align-items: center; gap: 1px;
  border: 1px solid var(--schaum); border-radius: 7px; overflow: hidden;
  background: var(--flaeche-zart); margin-right: .8rem;
}
.langswitch__item {
  padding: .34rem .58rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--grau); text-decoration: none; background: transparent; line-height: 1.2;
}
.langswitch__item:hover { background: var(--gischt); color: var(--text); }
.langswitch__item.is-current { background: var(--fluss); color: var(--auf-farbe); }
.masthead--over .langswitch { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.12); }
.masthead--over .langswitch__item { color: rgba(255,255,255,.85); }
.masthead--over .langswitch__item:hover { background: rgba(255,255,255,.18); color: var(--auf-farbe); }
.masthead--over .langswitch__item.is-current { background: var(--fluss); color: var(--auf-farbe); }
.masthead.is-stuck .langswitch { border-color: var(--schaum); background: var(--flaeche-zart); }
.masthead.is-stuck .langswitch__item { color: var(--grau); }
.masthead.is-stuck .langswitch__item.is-current { background: var(--fluss); color: var(--auf-farbe); }

.langnote {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 2.5rem 0 0; padding: .9rem 1.1rem;
  background: var(--gischt); border: 1px solid var(--linie);
  border-left: 3px solid var(--fahrwasser); border-radius: 0 8px 8px 0;
  font-size: .88rem; line-height: 1.6; color: var(--grau);
}



/* =========================================================================
   Responsives Verhalten — vollständig überarbeitet
   Vorgehen: mobile Eigenheiten zuerst, dann aufsteigende Breakpoints.
   Getestet gegen 320, 360, 390, 414, 768, 1024, 1280 und 1600 px.
   ========================================================================= */

/* ---- Grundlagen, die auf jeder Breite gelten ---- */
html { -webkit-text-size-adjust: 100%; }
img, video, svg, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Lange Wörter (Ortsnamen, Adressen) dürfen umbrechen statt zu überlaufen */
body { overflow-wrap: break-word; }
/* In Überschriften KEINE automatische Silbentrennung: Bei Anzeigentiteln
   wie "homologation Lac de Constance" trennte der Browser sonst mitten im
   Wort ("ho-mologation") — bei Überschriftengröße sieht das kaputt aus.
   overflow-wrap fängt weiterhin den Notfall ab, wenn ein einzelnes Wort
   breiter als die Zeile ist. */
h1, h2, h3, .card__title, .poi__name { overflow-wrap: break-word; hyphens: manual; }

/* Auf Touchgeräten müssen Ziele gross genug sein. */


/* Formularfelder unter 16px lösen auf iOS ein Zoomen aus. */
input, select, textarea { font-size: max(16px, 1rem); }

/* =========================================================================
   Tabellen: unter 720px keine Scrollbalken, sondern gestapelte Karten
   ========================================================================= */


/* =========================================================================
   Breakpoints
   ========================================================================= */

/* ---- Sehr schmal: 320–359 px (iPhone SE, ältere Android) ---- */


/* ---- Telefon: bis 560 px ---- */


/* ---- Grosses Telefon und kleines Tablet: bis 900 px ---- */


/* ---- Tablet quer und kleiner Laptop ---- */
/* Kleiner Laptop: die Leiste ist noch waagerecht (bis 1100 px), aber eng.
   Deshalb erst ab 1101 px — sonst kämpfen die Regeln mit dem Mobilmenü. */


/* ---- Sehr breite Bildschirme: Zeilen nicht ins Unlesbare wachsen lassen ---- */


/* ---- Querformat auf dem Telefon: Videobühne darf nicht die Seite füllen ---- */


/* ---- Geräte mit Aussparung (Notch) ---- */
@supports (padding: max(0px)) {
  .masthead__inner,
  .footer__inner,
  .wrap, .wrap--narrow {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .footer__base { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* ---- Zweispaltige Datenblätter (Anzeigen, Revierpunkte) ----
   Diese Tabellen sind Schlüssel-Wert-Paare. Sie brauchen keine
   data-label-Attribute, sondern nur mehr Luft und Umbruch. */
.spectable { width: 100%; border-collapse: collapse; }
.spectable th, .spectable td { padding: .7rem 0; border-bottom: 1px solid var(--linie-2); vertical-align: top; }
.spectable th { text-align: left; color: var(--grau); font-weight: 600; width: 42%; }



/* =========================================================================
   Positionsverfolgung
   ========================================================================= */
.trackgrid {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 1.6rem; align-items: start;
}

.tracker {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.4rem 1.5rem;
}
.tracker.is-aktiv { border-left: 3px solid var(--steuerbord); }
.tracker h2 { margin: 0 0 .3rem; font-size: 1.25rem; }
.tracker__seit { font-size: .86rem; color: var(--grau); margin: 0 0 1rem; }

.tracker__status {
  font-size: .9rem; color: var(--grau); margin: .6rem 0 1.2rem;
  padding-left: 1.2rem; position: relative;
}
.tracker__status::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--linie);
}
.tracker__status.is-ok::before { background: var(--steuerbord); }
.tracker__status.is-warn::before { background: var(--boje); }
.tracker__status.is-fehler::before { background: var(--tonne); }
.tracker.is-aktiv .tracker__status.is-ok::before { animation: puls 2.2s ease-in-out infinite; }
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,158,122,.5); }
  50%      { box-shadow: 0 0 0 7px rgba(46,158,122,0); }
}

.tracker__werte {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem;
  padding: 1rem 0; border-top: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie-2);
}
.tracker__label {
  display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--grau); font-weight: 600;
}
.tracker__werte strong {
  display: block; font-family: var(--ff-data); font-size: 1.32rem;
  color: var(--text); line-height: 1.25;
}
.tracker__werte strong.is-alt { color: var(--boje); }
.tracker__genau.is-schwach { color: var(--boje); }

.tracker__puffer {
  margin: .8rem 0 0; font-size: .84rem; color: var(--boje);
  background: #FFF8EC; padding: .5rem .7rem; border-radius: 6px;
}

.tracker__naechste { margin-top: 1rem; }
.tracker__ziel {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .6rem 0; border-bottom: 1px solid var(--linie-2);
}
.tracker__ziel:last-child { border-bottom: 0; }
.tracker__zielart {
  font-size: .76rem; font-weight: 700; color: var(--fluss);
  text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto;
}
.tracker__zielname { flex: 1 1 auto; font-weight: 600; min-width: 0; }
.tracker__zieldist { font-family: var(--ff-data); color: var(--text); font-weight: 700; }
.tracker__ukw {
  font-family: var(--ff-data); font-size: .78rem; background: var(--schaum);
  color: var(--tief-3); padding: .1rem .45rem; border-radius: 4px;
}
.tracker__tel { font-size: .82rem; font-weight: 600; }

.tracker__knoepfe { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.tracker__knoepfe .btn { flex: 1 1 auto; justify-content: center; }

.tracker__freigabe {
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--linie-2);
}
.tracker__freigabe h3 { font-size: 1rem; margin: 0 0 .4rem; }
.tracker__freigabe p { font-size: .88rem; color: var(--grau); line-height: 1.6; }
.tracker__freigabe-reihe { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.tracker__freigabe-reihe select { flex: 0 0 auto; }
.tracker__link { margin-top: .9rem; }
.tracker__link input {
  width: 100%; font-family: var(--ff-data); font-size: .82rem;
  padding: .6rem .7rem; border: 1px solid var(--linie); border-radius: 6px;
  background: var(--gischt); margin-bottom: .5rem;
}

.trackmap .mapshell { height: min(66vh, 620px); }
.trackmap #revierkarte { height: 100%; }

/* Sicherheitshinweis deutlich, aber nicht schreiend */
.safety { border-left-width: 4px; }
.safety h3 { color: var(--tonne); }

/* Bootssymbol und Folgeknopf auf der Karte */
.bootmarker { background: none; border: 0; }
.mapfolgen {
  background: var(--flaeche); border: 2px solid rgba(0,0,0,.2); border-radius: 6px;
  padding: .45rem .7rem; font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--grau); cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,.2);
}
.mapfolgen.is-an { color: var(--fluss); border-color: var(--fluss); }




/* =========================================================================
   Tageseinschätzung "Rausfahren?"
   ========================================================================= */
.rausfilter { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.rausfilter .field { min-width: 200px; }

.ampelkarte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  border-left: 5px solid var(--linie); padding: 1.6rem 1.8rem;
}
.ampelkarte--gruen { border-left-color: #2E9E7A; }
.ampelkarte--gelb  { border-left-color: #E0A21B; }
.ampelkarte--rot   { border-left-color: #E32636; }

.ampelkarte__kopf { display: flex; gap: 1.1rem; align-items: center; }
.ampelkarte__licht {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--ampel); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ampel) 18%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .ampelkarte__licht { box-shadow: 0 0 0 6px rgba(0,0,0,.07); }
}
.ampelkarte--gruen .ampelkarte__licht { animation: ampelpuls 3s ease-in-out infinite; }
@keyframes ampelpuls {
  0%, 100% { box-shadow: 0 0 0 6px rgba(46,158,122,.18); }
  50%      { box-shadow: 0 0 0 11px rgba(46,158,122,0); }
}
.ampelkarte__kopf h2 { margin: 0; font-size: 1.4rem; }
.ampelkarte__ort { margin: .15rem 0 0; font-size: .87rem; color: var(--grau); }
.ampelkarte__text { margin-top: 1.2rem; font-size: 1.04rem; line-height: 1.7; }
.ampelkarte__text p { margin: 0 0 .7rem; }
.ampelkarte__text p:last-child { margin-bottom: 0; }

.fenster {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--linie-2);
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
}
.fenster__titel {
  margin: 0; font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--grau);
}
.fenster__spanne {
  background: var(--schaum); color: var(--tief-3); font-family: var(--ff-data);
  font-weight: 700; padding: .35rem .8rem; border-radius: 20px; font-size: .92rem;
}
.fenster__spanne small { font-weight: 400; opacity: .7; margin-left: .3rem; }

/* ---- Begründungen ---- */
.gruende__liste { list-style: none; margin: 1rem 0 0; padding: 0; }
.grund {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .85rem 1rem; border-radius: 8px; margin-bottom: .5rem;
  line-height: 1.65; background: var(--flaeche); border: 1px solid var(--linie-2);
}
.grund__zeichen {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--auf-farbe);
  margin-top: .1rem;
}
.grund--gut     .grund__zeichen { background: #2E9E7A; }
.grund--hinweis .grund__zeichen { background: #5C8AA8; }
.grund--warnung .grund__zeichen { background: #E0A21B; }
.grund--stopp   .grund__zeichen { background: #E32636; }
.grund--warnung { background: #FFFBF3; border-color: #F0DCB4; }
.grund--stopp   { background: #FFF5F5; border-color: #F3C9CD; }

/* ---- Stundenband ---- */
.stundenband {
  display: flex; gap: .3rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: .3rem 0 .8rem; margin-top: 1rem;
}
.stunde {
  flex: 0 0 auto; width: 62px; text-align: center;
  background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: 8px;
  padding: .6rem .3rem; display: grid; gap: .25rem;
}
.stunde.is-kritisch { background: #FFF5F5; border-color: #F3C9CD; }
.stunde__zeit { font-family: var(--ff-data); font-size: .8rem; color: var(--grau); font-weight: 700; }
.stunde__wetter { font-size: 1.25rem; line-height: 1; }
.stunde__temp { font-family: var(--ff-data); font-weight: 700; font-size: .95rem; }
.stunde__wind { font-family: var(--ff-data); font-size: .82rem; color: var(--tief-3); }
.stunde__boe  { font-family: var(--ff-data); font-size: .76rem; color: var(--grau); }
.stunde__boe::before { content: "↑"; opacity: .5; margin-right: 1px; }

/* ---- Rückfragen ---- */
.kifrage {
  background: var(--gischt); border-radius: var(--r-m); padding: 1.5rem 1.6rem;
  border: 1px solid var(--linie);
}
.kifrage h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.kifrage__hinweis { font-size: .88rem; color: var(--grau); margin: 0 0 1.2rem; line-height: 1.6; }
.kifrage__verlauf:not(:empty) { margin-bottom: 1.2rem; }

.kizeile { margin-bottom: .9rem; }
.kizeile__wer {
  display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--grau); margin-bottom: .2rem;
}
.kizeile p {
  margin: 0; padding: .75rem .95rem; border-radius: 10px; line-height: 1.65; font-size: .96rem;
}
.kizeile--ich p { background: var(--schaum); color: var(--text); }
.kizeile--ki  p { background: var(--flaeche); border: 1px solid var(--linie-2); }
.kizeile.is-warten p { color: var(--grau); font-style: italic; }
.kizeile.is-fehler p { background: #FFF5F5; border-color: #F3C9CD; }

.kifrage__vorschlaege { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kifrage__chip {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px;
  padding: .45rem .9rem; font: inherit; font-size: .86rem; color: var(--tief-3);
  cursor: pointer; text-align: left;
}
.kifrage__chip:hover { border-color: var(--fluss); color: var(--fluss); }

.kifrage__eingabe { display: flex; gap: .6rem; }
.kifrage__eingabe input {
  flex: 1; padding: .8rem 1rem; border: 1px solid var(--linie);
  border-radius: 8px; font: inherit; background: var(--flaeche); min-width: 0;
}
.kifrage__eingabe input:focus { outline: 0; border-color: var(--fluss); }



/* ---- Widersprüchliche Quellenangaben ---- */
.poi__abweichend {
  margin-top: .9rem; font-size: .86rem;
  background: #FFF8EC; border-left: 3px solid var(--boje);
  border-radius: 0 6px 6px 0; padding: .6rem .85rem;
}
.poi__abweichend summary { cursor: pointer; font-weight: 600; color: #6B5518; }
.poi__abweichend ul { margin: .6rem 0 0; padding-left: 1.1rem; line-height: 1.7; color: #6B5518; }

/* =========================================================================
   Kopfleiste: Kontomenü und aufgeräumte Aktionsspalte
   ========================================================================= */
.mainnav__actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

/* Sprachumschalter in der Leiste kompakter als zuvor */
.mainnav__actions .langswitch { margin-right: .2rem; }
.mainnav__actions .langswitch__item { padding: .3rem .5rem; font-size: .75rem; }

/* ---- Kontomenü ---- */
.kontomenu { position: relative; }
.kontomenu__knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--linie); border-radius: 40px;
  padding: .3rem .8rem .3rem .3rem; cursor: pointer; font: inherit;
  font-size: .88rem; font-weight: 600; color: var(--text); white-space: nowrap;
}
.kontomenu__knopf:hover { border-color: var(--fluss); }
.kontomenu__kreis {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--fluss); color: var(--auf-farbe); display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
}
.kontomenu__name { max-width: 10ch; overflow: hidden; text-overflow: ellipsis; }

.masthead--over .kontomenu__knopf { border-color: rgba(255,255,255,.35); color: var(--auf-farbe); }
.masthead.is-stuck .kontomenu__knopf { border-color: var(--linie); color: var(--text); }

.submenu--rechts { left: auto; right: 0; }

.submenu__trenner {
  height: 1px; background: var(--linie-2); margin: .4rem 0; padding: 0; list-style: none;
}

/* Gruppenüberschrift im Untermenü. Kleiner und gesperrt gesetzt, damit sie
   als Beschriftung gelesen wird und nicht als weiterer Menüpunkt — sonst
   tippt jemand darauf und wundert sich, dass nichts passiert. */
.submenu__gruppe {
  list-style: none;
  padding: .8rem .9rem .25rem;
  font-family: var(--ff-data);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau-2);
  pointer-events: none;
}
.submenu__gruppe:first-child { padding-top: .3rem; }

/* Der Notruf am Ende: abgesetzt, aber nicht schreiend. Die Notfallseite
   ist kein Ziel, das man täglich ansteuert — sie muss nur sofort zu
   finden sein, wenn es darauf ankommt. */
.submenu__notruf { color: var(--tonne) !important; font-weight: 600; }

/* Einträge nur in der Menüschublade. Auf breiten Bildschirmen bliebe die
   Kopfleiste sonst zu eng — sie ist mit vier Punkten und drei Knöpfen
   bereits ausgereizt. */
.mainnav__nurschublade { display: none; }
@media (max-width: 900px) {
  .mainnav__nurschublade { display: block; }
}
.submenu__link {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: .55rem .9rem; font: inherit; font-size: .93rem; color: var(--grau);
  cursor: pointer; border-radius: 6px;
}
.submenu__link:hover { background: var(--gischt); color: var(--tonne); }
.submenu form { margin: 0; }

/* Ab hier wird die Leiste eng — früher aufs Mobilmenü umschalten,
   damit "Gratis inserieren" nie aus dem Bild geschoben wird. */


/* Das Kontomenü öffnet auch am Desktop per Klick — Hover wäre hier
   unangenehm, weil daraus das Abmelden erreichbar ist. */
.kontomenu .submenu { opacity: 0; visibility: hidden; }
.kontomenu:hover .submenu { opacity: 0; visibility: hidden; }
.kontomenu .submenu.is-open { opacity: 1; visibility: visible; transform: none; }

/* =========================================================================
   Alle Breakpoints, nach Reichweite sortiert
   Reihenfolge ist hier keine Kosmetik: Bei gleicher Spezifitaet gewinnt
   die spaetere Regel. Schmalere Bloecke muessen deshalb NACH breiteren
   stehen, sonst ueberstimmen Tablet-Regeln die fuers Telefon.
   ========================================================================= */

@media (max-width: 1100px) {
  .footer__inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  /* minmax(0, 1fr) statt 1fr: Eine nackte 1fr-Spur schrumpft nicht unter
     die Mindestbreite ihres Inhalts — die Galerie meldet dort die natürliche
     Bildbreite, und die Seite lief auf dem Telefon über 1000px breit. */
  .detail { grid-template-columns: minmax(0, 1fr); }
  .aside-card--sticky { position: static; }
  .detail > aside { position: static; max-height: none; overflow: visible; }
  .trackgrid { grid-template-columns: 1fr; }
  :root { --head-h: 66px; }
  .burger { display: flex; }
  .mainnav {
    position: fixed; inset: var(--kopf-h, var(--head-h)) 0 0 auto; width: min(88vw, 380px);
    background: var(--flaeche); flex-direction: column; align-items: stretch; gap: 0;
    padding: 1.2rem; overflow-y: auto; margin: 0;
    transform: translateX(102%); transition: transform .3s cubic-bezier(.3,.8,.3,1);
    box-shadow: -20px 0 60px rgba(10,37,64,.24);
    border-left: 1px solid var(--linie);
  }
  .mainnav.is-open { transform: translateX(0); }
  .mainnav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .mainnav__list > li { border-bottom: 1px solid var(--linie-2); }
  .mainnav__list a, .mainnav__toggle {
    color: var(--text) !important; padding: .95rem .4rem; font-size: 1.02rem;
    width: 100%; text-align: left; border-radius: 0;
  }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .6rem .4rem;
    display: none; min-width: 0;
  }
  .submenu.is-open { display: block; }
  .mainnav__actions {
    flex-direction: column; align-items: stretch; margin-top: 1.2rem; gap: .7rem;
  }
  .mainnav__actions .btn { width: 100%; justify-content: center; }
  .kontomenu { width: 100%; }
  .kontomenu__knopf {
    width: 100%; justify-content: flex-start; padding: .7rem .9rem;
    border-radius: 8px; color: var(--text) !important;
  }
  .kontomenu__name { max-width: none; }
  .submenu--rechts { right: auto; }
}

@media (max-width: 900px) {
  .promise__inner { grid-template-columns: 1fr; text-align: left; gap: 1.2rem; }
    .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__col--wide { grid-column: 1 / -1; }
  .videohero__inner { padding-bottom: 2rem; }
  .herofacts { gap: 1.4rem 2rem; }
  .herofacts b { font-size: 1.35rem; }
  .spotlight { grid-template-columns: 1fr; }
  .spotlight__media { order: -1; }
  .spotlight__media img { max-height: 210px; }
  .spotlight__text { padding: 1.5rem; }

  .maplegend {
    position: static; max-width: none; margin-top: .8rem;
    box-shadow: none; border: 1px solid var(--linie);
    display: grid; grid-template-columns: 1fr 1fr; gap: .2rem;
  }
  .maplegend__title { grid-column: 1 / -1; }
  .maplegend__locate { grid-column: 1 / -1; }
  .mapshell--full #revierkarte { height: 58vh; min-height: 340px; }

  .subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .subnav ul { flex-wrap: nowrap; }
  .subnav a { white-space: nowrap; }

  /* Verwaltungsbereich: die mobilen Regeln stehen vollstaendig in admin.css.
     Hier standen frueher Kopien davon — mit abweichendem Haltepunkt (900 statt
     940) und einem zusaetzlichen overflow-x:auto. Das overflow setzte die
     automatische Mindestbreite der Nav auf 0, wodurch sie auf dem Telefon auf
     25px zusammenfiel und ihre Links seitlich aus dem Bild liefen. */
  .trackgrid { grid-template-columns: 1fr; }
  .trackmap { order: -1; }
  .trackmap .mapshell { height: 48vh; min-height: 300px; }
}

@media (max-width: 719px) {
  .tablewrap { overflow: visible; border: 0; background: none; }

  table.data-table,
  table.data-table--matrix { min-width: 0; display: block; }
  table.data-table thead { display: none; }
  table.data-table tbody { display: block; }

  /* Als Flexspalte, damit die Zeilenüberschrift per order nach oben
     rutschen kann. Im Quelltext steht sie hinter der Kilometerzelle —
     das ist für die Tabelle richtig (nach Fluss sortiert), ergäbe als
     Karte aber eine Überschrift in der zweiten Zeile. */
  table.data-table tr {
    display: flex;
    flex-direction: column;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--r-m);
    padding: .9rem 1rem;
    margin-bottom: .8rem;
  }
  table.data-table tbody th[scope="row"] { order: -1; }

  /* In der Tabelle ist nowrap richtig — die Kopfzeile soll nicht umbrechen.
     Im Kartenmodus wird die Zeilenüberschrift aber zum Kartentitel, und
     lange Namen wie "Brücke über die Staustufe Stadtbredimus – Palzem"
     schoben die ganze Seite seitlich hinaus. */
  table.data-table th,
  table.data-table tbody th[scope="row"],
  table.data-table tbody th[scope="row"] a {
    white-space: normal;
    overflow-wrap: break-word;
  }
  table.data-table tr:hover { background: var(--flaeche); }

  table.data-table td,
  table.data-table tbody th {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border: 0;
    border-bottom: 1px solid var(--linie-2);
    text-align: right;
  }
  /* Nach der Umsortierung greift :last-child weiterhin auf das
     letzte Element im Quelltext — das ist auch visuell das letzte,
     weil nur die Überschrift verschoben wird. */
  table.data-table tr > *:last-child { border-bottom: 0; }

  /* Die Zeilenüberschrift wird zum Kartentitel. */
  table.data-table tbody th {
    display: block;
    text-align: left;
    font-size: 1.02rem;
    font-weight: 700;
    padding: 0 0 .5rem;
    margin-bottom: .4rem;
    border-bottom: 2px solid var(--schaum);
  }

  /* Beschriftung aus data-label, siehe unten */
  table.data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--grau);
    text-align: left;
    flex: 0 0 auto;
    font-size: .85rem;
  }
  table.data-table td:empty { display: none; }

  table.data-table caption { padding: 0 0 .8rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap, .wrap--narrow { width: calc(100% - 2rem); }
  .brand__mark { width: 42px; }
  .brand__name { font-size: 1.25rem; }
  .brand__claim { display: none; }
  .searchdeck__row { flex-direction: column; }
  .searchdeck__row .btn { width: 100%; }
  .searchdeck__tab { flex: 1 1 45%; font-size: .84rem; }
  .cardgrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer__base-inner { flex-direction: column; align-items: flex-start; }
  .photostrip__kachel { aspect-ratio: 4/3; }
  .section { padding: 2.8rem 0; }
}

@media (max-width: 560px) {
  .person { flex-direction: column; text-align: center; gap: 1rem; padding: 1.4rem 1.2rem; }
  .person__foto img { width: 96px; height: 96px; }
  .steps { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .poigrid { grid-template-columns: 1fr; }
  .previewgrid { grid-template-columns: repeat(3, 1fr); }
  .editimages { grid-template-columns: repeat(2, 1fr); }
  .statgrid { grid-template-columns: 1fr 1fr; }

  .formgrid, .formgrid--2 { grid-template-columns: 1fr; }
  .checkgrid { grid-template-columns: 1fr; }

  .gallery__thumbs { gap: .35rem; }
  .gallery__thumbs img { width: 62px; height: 46px; }

  .detail__aside { margin-top: 2rem; }
  .aside-card--sticky { position: static; }
  .detail > aside { position: static; max-height: none; overflow: visible; }

  .kmband__scroll { -webkit-overflow-scrolling: touch; }
  .filterbar__grid { grid-template-columns: 1fr; }
  .filterbar__foot { flex-direction: column; align-items: stretch; gap: .6rem; }
  .filterbar__foot .btn { width: 100%; }

  .bigsearch { flex-direction: column; }
  .bigsearch .btn { width: 100%; }

  .myitem { grid-template-columns: 1fr; }
  .myitem__media img { width: 100%; height: 160px; }
  .myitem__actions { flex-direction: row; flex-wrap: wrap; }
  .myitem__actions .btn { flex: 1 1 auto; }

  .person { flex-direction: column; text-align: center; }
  .editbar { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .spectable th, .spectable td { display: block; width: auto; }
  .spectable th { padding: .7rem 0 .1rem; border-bottom: 0; font-size: .84rem; }
  .spectable td { padding: 0 0 .7rem; font-weight: 500; }
  .spectable tr { display: block; border-bottom: 1px solid var(--linie-2); }
  .spectable tr:last-child { border-bottom: 0; }
  .tracker { padding: 1.1rem 1.1rem; }
  .tracker__werte { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .tracker__werte strong { font-size: 1.15rem; }
  .tracker__knoepfe .btn { flex: 1 1 100%; }
  .tracker__freigabe-reihe select,
  .tracker__freigabe-reihe .btn { flex: 1 1 100%; }
  .rausfilter { flex-direction: column; gap: .8rem; }
  .rausfilter .field { min-width: 0; }
  .ampelkarte { padding: 1.2rem 1.1rem; }
  .ampelkarte__kopf h2 { font-size: 1.2rem; }
  .ampelkarte__licht { width: 34px; height: 34px; }
  .kifrage__eingabe { flex-direction: column; }
  .kifrage__eingabe .btn { width: 100%; }
  .kifrage__chip { width: 100%; }
  .stunde { width: 56px; }
}

@media (max-width: 359px) {
  :root { --head-h: 60px; }
  .wrap, .wrap--narrow { width: calc(100% - 1.5rem); }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  .lead { font-size: 1rem; }
  .brand__name { font-size: 1.1rem; }
  .brand__mark { width: 34px; }
  .cardgrid { grid-template-columns: 1fr; }
  .herofacts { flex-direction: column; gap: .9rem; }
  .searchdeck { padding: 1rem; }
    .btn { padding: .7rem 1rem; font-size: .92rem; }
}

@media (min-width: 1101px) and (max-width: 1320px) {
  .detail { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 1.8rem; }
  .cardgrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .mainnav__list { gap: .1rem; }
  .mainnav__list a, .mainnav__toggle { padding: .5rem .55rem; font-size: .93rem; }
  .mainnav__actions { gap: .45rem; }
  .kontomenu__name { max-width: 8ch; }
}

@media (min-width: 1600px) {
  .wrap { max-width: 1440px; }
  .cardgrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

@media (pointer: coarse) {
  .btn, .langswitch__item, .pager a, .pager span,
  .mainnav__list a, .mainnav__toggle, .subnav a,
  .poi__link, .filterbar button, .maplegend__item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .check { padding: .35rem 0; }
  .check input[type="checkbox"] { width: 22px; height: 22px; }
  /* Hover-Effekte greifen auf Touch nicht — sie bleiben sonst „kleben". */
  .card:hover, .tile:hover, .stat:hover, .spotlight:hover { transform: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .videohero { min-height: auto; padding-top: calc(var(--kopf-h, var(--head-h)) + 1.6rem); }
  .videohero__inner { padding-bottom: 1.4rem; }
  .mapshell--full #revierkarte { height: 78vh; }
  .mainnav { overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .videohero__media video { display: none; }
}

@media print {
  .masthead, .footer, .kmband, .searchdeck, .btn, .maplegend { display: none !important; }
  body { font-size: 11pt; color: var(--tinte); }
  a { color: var(--tinte); text-decoration: underline; }
  .card, .poi { break-inside: avoid; border: 1px solid #999; }
}



.langnote__zeichen { flex: 0 0 auto; font-size: 1rem; line-height: 1.5; }
.langnote a { font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) {
  .langnote { margin-top: 1.8rem; font-size: .85rem; }
}

/* =========================================================================
   SOS-Kit
   ========================================================================= */
.notruf {
  display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap;
  background: var(--tonne); color: var(--auf-farbe); border-radius: var(--r-m);
  padding: 1.5rem 1.8rem; margin: 2rem 0 1.2rem;
}
.notruf__nr {
  font-family: var(--ff-display); font-size: 3.4rem; font-weight: 800;
  line-height: 1; color: var(--auf-farbe); text-decoration: none; letter-spacing: -.02em;
  padding: .3rem 1.2rem; border: 3px solid rgba(255,255,255,.55); border-radius: 12px;
  flex: 0 0 auto;
}
.notruf__nr:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.notruf__text { flex: 1 1 260px; min-width: 0; }
.notruf__text h2 { margin: 0 0 .3rem; font-size: 1.15rem; color: var(--auf-farbe); }
.notruf__text p { margin: 0; font-size: .93rem; line-height: 1.6; color: rgba(255,255,255,.92); }

.wbox { background: var(--gischt); border-radius: var(--r-m); padding: 1.3rem 1.6rem; }
.wbox h3 { margin: 0 0 .7rem; font-size: 1rem; }
.wliste { margin: 0; padding-left: 1.3rem; line-height: 1.9; }
.wliste li::marker { font-family: var(--ff-data); font-weight: 700; color: var(--tonne); }

/* ---- Funkstufen ---- */
.funkstufe {
  background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--grau);
  border-radius: 0 var(--r-m) var(--r-m) 0; padding: 1.3rem 1.5rem; margin: 1.4rem 0;
}
.funkstufe--mayday { border-left-color: #E32636; }
.funkstufe--pan    { border-left-color: #E0A21B; }
.funkstufe--sec    { border-left-color: #1B7FBF; }
.funkstufe__kopf { display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap; }
.funkstufe__wort {
  font-family: var(--ff-data); font-weight: 700; font-size: .82rem; letter-spacing: .1em;
  padding: .25rem .6rem; border-radius: 4px; background: var(--schaum); color: var(--text);
  white-space: nowrap;
}
.funkstufe--mayday .funkstufe__wort { background: #FBDDDF; color: #8E1620; }
.funkstufe--pan    .funkstufe__wort { background: #FDF0D5; color: #6B5518; }
.funkstufe__kopf h3 { margin: 0; font-size: 1.05rem; }
.funkstufe > p { margin: .7rem 0 0; line-height: 1.7; }
.funkstufe__label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--grau); margin-top: 1.1rem !important;
}
.funkspruch {
  background: var(--tief); color: #E8F2F8; border-radius: 8px;
  padding: 1rem 1.2rem; margin: .5rem 0 0;
  font-family: var(--ff-data); font-size: .88rem; line-height: 1.9;
  /* Umbrechen statt seitlich scrollen: Wer im Notfall auf den Zettel
     schaut, soll den ganzen Satz sehen, ohne wischen zu müssen.
     Fortsetzungszeilen werden eingerückt, damit die Struktur erkennbar
     bleibt. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  padding-left: 2.4rem; text-indent: -1.2rem;
}
.funkspruch em { color: var(--fahrwasser); font-style: normal; font-weight: 700; }

/* ---- Schallsignale ---- */
.sigmuster {
  font-family: var(--ff-data); font-size: 1.15rem; letter-spacing: .18em;
  color: var(--text); white-space: nowrap;
}
.sighint { display: block; font-size: .82rem; color: var(--grau); margin-top: .2rem; }
.signaltab td:first-child { width: 34%; }

/* ---- Checklisten ---- */
.checkliste { list-style: none; counter-reset: ck; margin: 1.2rem 0 0; padding: 0; }
.checkliste li {
  counter-increment: ck; position: relative; padding: .7rem 0 .7rem 2.6rem;
  border-bottom: 1px solid var(--linie-2); line-height: 1.65;
}
.checkliste li:last-child { border-bottom: 0; }
.checkliste li::before {
  content: counter(ck); position: absolute; left: 0; top: .62rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--tief); color: var(--auf-farbe); display: grid; place-items: center;
  font-family: var(--ff-data); font-size: .78rem; font-weight: 700;
}

.notfall {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  margin-bottom: .7rem; overflow: hidden;
}
.notfall > summary {
  cursor: pointer; padding: 1rem 1.3rem; font-weight: 700; font-size: 1.02rem;
  list-style: none; display: flex; align-items: center; gap: .7rem;
}
.notfall > summary::-webkit-details-marker { display: none; }
.notfall > summary::before {
  content: "+"; font-family: var(--ff-data); font-size: 1.2rem; color: var(--tonne);
  width: 1.4rem; flex: 0 0 auto;
}
.notfall[open] > summary::before { content: "−"; }
.notfall[open] > summary { border-bottom: 1px solid var(--linie-2); }
.notfall .checkliste { margin: 0; padding: .4rem 1.3rem 1rem; }

.kitliste { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.kitliste li {
  padding: .6rem 0 .6rem 1.9rem; position: relative;
  border-bottom: 1px solid var(--linie-2); line-height: 1.6;
}
.kitliste li:last-child { border-bottom: 0; }
.kitliste li::before {
  content: "☐"; position: absolute; left: 0; top: .55rem;
  color: var(--fluss); font-size: 1.1rem;
}

@media (max-width: 560px) {
  .notruf { padding: 1.2rem; gap: 1rem; }
  .notruf__nr { font-size: 2.6rem; padding: .2rem .9rem; }
  .funkspruch { font-size: .8rem; padding: .85rem .9rem .85rem 2rem; }
  .signaltab td:first-child { width: auto; }
}

@media print {
  .notruf { background: none !important; color: var(--tinte) !important;
            border: 3px solid #000; }
  .notruf__nr, .notruf__text h2, .notruf__text p { color: var(--tinte) !important; }
  .funkspruch { background: none !important; color: var(--tinte) !important;
                border: 1px solid #000; }
  .funkspruch em { color: var(--tinte) !important; }
  .notfall { break-inside: avoid; }
  .notfall > summary::before { content: ""; }
  .notfall .checkliste { display: block !important; }
  .noprint { display: none !important; }
}

/* =========================================================================
   Knoten
   ========================================================================= */
.vokabeln { display: grid; gap: 1rem; margin: 1.4rem 0 0; grid-template-columns: 1fr 1fr; }
.vokabeln > div {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: .9rem 1.1rem;
}
.vokabeln dt { font-weight: 700; color: var(--text); margin-bottom: .2rem; }
.vokabeln dd { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--grau); }

.knotenliste { display: grid; gap: 1.2rem; }
.knoten {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.4rem 1.6rem; scroll-margin-top: calc(var(--kopf-h, var(--head-h)) + 1rem);
}
.knoten__kopf { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.knoten__nr {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--tief); color: var(--auf-farbe); display: grid; place-items: center;
  font-family: var(--ff-data); font-weight: 700; font-size: .92rem;
}
.knoten__kopf > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.knoten__kopf h2 { margin: 0; font-size: 1.22rem; }
.knoten__alt { margin: .1rem 0 0; font-size: .85rem; color: var(--grau); font-style: italic; }
.knoten__marken { flex: 0 0 auto; padding-top: .35rem; }

.halt { display: inline-flex; gap: 3px; }
.halt i {
  width: 7px; height: 16px; border-radius: 2px; display: block;
  background: var(--linie); 
}
.halt i.is-on { background: var(--fluss); }

.knoten__label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--grau); margin: 1.1rem 0 .3rem;
}
.knoten__label:first-of-type { margin-top: 0; }
.knoten__wofuer { margin: 0; line-height: 1.7; }

.knoten__schritte { counter-reset: kn; list-style: none; margin: .5rem 0 0; padding: 0; }
.knoten__schritte li {
  counter-increment: kn; position: relative; padding: .45rem 0 .45rem 2.1rem;
  line-height: 1.65;
}
.knoten__schritte li::before {
  content: counter(kn); position: absolute; left: 0; top: .5rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1.5px solid var(--fluss); color: var(--fluss);
  display: grid; place-items: center;
  font-family: var(--ff-data); font-size: .72rem; font-weight: 700;
}

.knoten__tipp {
  margin: 1.1rem 0 0; padding: .8rem 1rem; background: var(--gischt);
  border-left: 3px solid var(--boje); border-radius: 0 6px 6px 0;
  font-size: .92rem; line-height: 1.65;
}
.knoten__tipp strong { color: var(--text); }

@media (max-width: 640px) {
  .vokabeln { grid-template-columns: 1fr; }
  .knoten { padding: 1.1rem 1.1rem; }
  .knoten__kopf h2 { font-size: 1.08rem; }
  .knoten__marken { display: none; }
}
@media print {
  .knoten { break-inside: avoid; border: 1px solid #000; }
  .knotenliste { gap: .6rem; }
}

/* =========================================================================
   Videoeinbettung, zwei Klicks
   ========================================================================= */
.videobox { margin: 2.2rem 0 0; }
.videobox h3 { margin: 0 0 .7rem; font-size: 1.1rem; }

.videobox__rahmen {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--r-m); overflow: hidden;
  background: linear-gradient(150deg, var(--tief) 0%, var(--tief-2) 55%, var(--fluss) 140%);
}
@supports not (aspect-ratio: 16 / 9) {
  .videobox__rahmen { height: 0; padding-bottom: 56.25%; }
}
.videobox__rahmen iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.videobox__start {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .8rem; background: none; border: 0; cursor: pointer; padding: 1.5rem;
  color: var(--auf-farbe); font: inherit; text-align: center;
}
.videobox__start:hover .videobox__play { transform: scale(1.08); background: var(--tonne); }
.videobox__play {
  width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.7);
  display: grid; place-items: center; transition: transform .2s ease, background .2s ease;
}
.videobox__play::after {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 20px solid #fff; border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.videobox__text {
  font-weight: 700; font-size: 1rem; letter-spacing: .01em;
}
.videobox__titel {
  font-size: .86rem; opacity: .78; max-width: 30ch; line-height: 1.5;
}
.videobox__hinweis {
  margin: .7rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--grau);
}

@media (max-width: 560px) {
  .videobox__play { width: 54px; height: 54px; }
  .videobox__play::after { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
  .videobox__text { font-size: .92rem; }
}
@media print { .videobox__rahmen { display: none; } }

/* ---- Logo je nach Untergrund ----
   Über der Videobühne ist die Leiste dunkel: dort die helle Fassung.
   Sobald sie beim Scrollen weiß wird, wieder die farbige. */
.brand__mark--hell { display: none; }
.masthead--over .brand__mark--dunkel { display: none; }
.masthead--over .brand__mark--hell   { display: block; }
.masthead--over.is-stuck .brand__mark--dunkel { display: block; }
.masthead--over.is-stuck .brand__mark--hell   { display: none; }


/* Angesprungene Überschriften müssen unter der fixierten Kopfleiste
   hervorkommen — sonst landet man auf dem Abschnitt, sieht aber nur
   dessen Mitte. Betrifft alle Ziele mit id, nicht nur die im SOS-Kit. */
h2[id], h3[id], section[id], article[id] {
  scroll-margin-top: calc(var(--kopf-h, var(--head-h)) + 1.2rem);
}

/* ---- Funkzeugnisse ---- */
.zeugnisse { display: grid; gap: .8rem; margin: 1.3rem 0 1.8rem; }
.zeugnisse > div {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1.1rem; align-items: baseline;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
  padding: .95rem 1.2rem;
}
.zeugnisse dt {
  font-family: var(--ff-data); font-weight: 700; font-size: .95rem;
  color: var(--fluss); letter-spacing: .04em;
}
.zeugnisse dd { margin: 0; line-height: 1.65; font-size: .95rem; }
@media (max-width: 560px) {
  .zeugnisse > div { grid-template-columns: 1fr; gap: .25rem; }
}

/* =========================================================================
   Tageseinschätzung in der Kopfleiste
   Bewusst als Rahmenknopf, nicht gefüllt: "Gratis inserieren" bleibt die
   einzige Hauptaktion, "Heute rausfahren?" steht gleichrangig daneben.
   ========================================================================= */
.heute { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.heute__punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--steuerbord);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--steuerbord) 22%, transparent);
  animation: heutepuls 2.8s ease-in-out infinite;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .heute__punkt { box-shadow: 0 0 0 3px rgba(46,158,122,.22); }
}
@keyframes heutepuls {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46,158,122,.22); }
  50%      { box-shadow: 0 0 0 7px rgba(46,158,122,0); }
}
.masthead--over .heute { color: var(--auf-farbe); border-color: rgba(255,255,255,.45); }
.masthead.is-stuck .heute { color: var(--text); border-color: var(--linie); }

/* ---- Kontospalte in der Fußzeile ---- */
.footer__sub { margin-top: 1.6rem !important; }
.footer__abmelden { margin: 0; }
.footer__abmelden button {
  /* "font: inherit" holte die Größe aus dem Fließtext, also 1rem. Die
     Links daneben stehen aber in .92rem — der Abmelden-Knopf war
     dadurch sichtbar größer als alles andere in der Spalte. Schrift
     und Farbe kommen jetzt von derselben Vorgabe wie die Links. */
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-weight: inherit; line-height: inherit;
  font-size: .92rem;
  color: rgba(255,255,255,.76); text-align: left;
}
.footer__abmelden button:hover { color: var(--auf-farbe); text-decoration: underline; }

@media (max-width: 1100px) {
  .heute { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .heute__punkt { animation: none; }
}

/* ---- Nachgeladene Formulierung ---- */
.ampelkarte__laedt {
  display: flex; align-items: center; gap: .6rem;
  margin: .9rem 0 0; font-size: .85rem; color: var(--grau);
}
.ampelkarte__spinner {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--linie); border-top-color: var(--fluss);
  animation: drehen .8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
.ampelkarte__text { transition: opacity .25s ease; }
.ampelkarte__text.is-formuliert { animation: eingeblendet .35s ease; }
@keyframes eingeblendet { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ampelkarte__spinner { animation: none; border-top-color: var(--linie); }
  .ampelkarte__text.is-formuliert { animation: none; }
}

/* =========================================================================
   Reiseplaner
   ========================================================================= */
.planform__gitter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem; margin-top: 1.2rem;
}
.planform__gitter--zwei { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.planform__knoepfe {
  display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem;
  align-items: center;
}

/* ---- Passt mein Boot ---- */
.passt { border-radius: var(--r-m); padding: 1.3rem 1.5rem; margin: 1.4rem 0; }
.passt h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.passt p { margin: 0; line-height: 1.7; }
.passt ul { margin: .9rem 0 0; padding-left: 1.2rem; line-height: 1.8; }
.passt--ja    { background: #DBF3E9; border-left: 5px solid var(--steuerbord); }
.passt--knapp { background: #FFF8EC; border-left: 5px solid var(--boje); }
.passt--nein  { background: #FBDDDF; border-left: 5px solid var(--tonne); }

/* ---- Etappen ---- */
.etappen { list-style: none; counter-reset: et; margin: 1.6rem 0 0; padding: 0; }
.etappe {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.3rem 1.5rem; margin-bottom: 1rem;
}
.etappe--eng { border-left: 4px solid var(--boje); }
.etappe__kopf { display: flex; gap: 1rem; align-items: flex-start; }
.etappe__nr {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--tief); color: var(--auf-farbe); display: grid; place-items: center;
  font-family: var(--ff-data); font-weight: 700; font-size: .85rem;
}
.etappe__kopf h3 { margin: 0; font-size: 1.12rem; }
.etappe__wasser { margin: .15rem 0 0; font-size: .85rem; color: var(--grau); }
.etappe__zahlen {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1rem 0;
  padding: .7rem 0; border-top: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie-2);
  font-size: .85rem; color: var(--grau);
}
.etappe__zahlen strong {
  font-family: var(--ff-data); font-size: 1.05rem; color: var(--text); margin-right: .25rem;
}
.etappe > p { margin: 0; line-height: 1.7; }
.etappe__warnung {
  margin: .9rem 0 0; padding: .7rem .9rem;
  background: var(--gischt); border-left: 3px solid var(--boje);
  border-radius: 0 6px 6px 0; font-size: .9rem;
}

/* ---- Gespeicherte Pläne ---- */
.planliste { list-style: none; margin: 1rem 0 0; padding: 0; }
.planliste li { border-bottom: 1px solid var(--linie-2); }
.planliste li:last-child { border-bottom: 0; }
.planliste a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .75rem 0; text-decoration: none; color: var(--text);
}
.planliste a:hover strong { text-decoration: underline; }
.planliste span { font-family: var(--ff-data); font-size: .8rem; color: var(--grau); }
.planliste li.is-aktiv a { color: var(--fluss); }

@media (max-width: 640px) {
  .etappe { padding: 1.1rem; }
  .etappe__zahlen { gap: .9rem; }
}
@media print {
  .planform, .planliste, .planform__knoepfe { display: none; }
  .etappe { break-inside: avoid; }
}

/* ---- Startpunkt im Reiseplaner ---- */
.startpunkt {
  background: var(--gischt); border: 1px solid var(--linie);
  border-left: 5px solid var(--fluss); border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: 1.3rem 1.5rem; margin: 1.6rem 0 2rem;
}
.startpunkt__kopf { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.startpunkt__km {
  font-family: var(--ff-data); font-size: .78rem; font-weight: 700;
  color: var(--fluss); background: var(--flaeche); padding: .2rem .55rem; border-radius: 4px;
}
.startpunkt__kopf h3 { margin: 0; font-size: 1.15rem; }
.startpunkt > p { margin: .7rem 0 0; line-height: 1.7; }
.startpunkt__daten { display: grid; gap: .5rem; margin: 1.1rem 0 0; }
.startpunkt__daten > div {
  display: grid; grid-template-columns: 9rem 1fr; gap: .8rem; align-items: baseline;
  font-size: .92rem; line-height: 1.6;
}
.startpunkt__daten dt {
  font-family: var(--ff-data); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--grau);
}
.startpunkt__daten dd { margin: 0; }
@media (max-width: 560px) {
  .startpunkt__daten > div { grid-template-columns: 1fr; gap: .1rem; }
}

/* ---- Betonte Kachel: der Reiseplaner ---- */
.tile--betont {
  border-color: var(--fluss);
  box-shadow: 0 2px 14px rgba(27,127,191,.10);
}
.tile--betont .tile__icon { color: var(--fluss); }
.tile--betont .tile__count { color: var(--fluss); font-weight: 700; }
.tile--betont:hover { border-color: var(--text); }

/* ---- Freies Reiseziel ---- */
.zielbox {
  background: var(--gischt); border: 1px solid var(--linie);
  border-radius: var(--r-m); padding: 1.3rem 1.5rem; margin-top: 1.4rem;
}
/* Nur für Vorleseprogramme — visuell versteckt. Fehlte bisher, dadurch
   standen sr-only-Beschriftungen sichtbar im Layout. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Konto: Verwaltungs-Reiter */
.kontotabs__admin { color: var(--fahrwasser); font-weight: 600; }

/* Reiseplaner: Ziel im Detail */
.zieldetail { margin-top: 2.4rem; padding: 1.4rem 1.5rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--fahrwasser);
  border-radius: 12px; }
.zieldetail h2 { margin-top: 0; }
.zieldetail h3 { margin: 1.4rem 0 .6rem; }

/* Reiseplaner: Klassiker-Schnellwahl */
.klassiker { margin: 0 0 1.6rem; padding: 1.1rem 1.2rem;
  background: linear-gradient(135deg, #F0F7FC, #E6F2FA);
  border: 1px solid var(--linie); border-radius: 12px; }
.klassiker h3 { margin: 0 0 .25rem; }
.klassiker p { margin: 0 0 .85rem; color: var(--tinte-60, #4A5A68); }
.klassiker__label { margin: .9rem 0 .55rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-60, #4A5A68); }
.klassiker__reihe + .klassiker__label { margin-top: 1.5rem; }
.klassiker__reihe { display: flex; gap: .7rem; flex-wrap: wrap; }
.klassiker__karte {
  flex: 1 1 160px; display: flex; flex-direction: column; gap: .15rem;
  padding: .75rem .95rem; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.klassiker__karte:hover, .klassiker__karte:focus-visible {
  border-color: var(--fahrwasser); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(20, 60, 90, .10); text-decoration: none;
}
.klassiker__karte strong { font-size: 1.02rem; }
.klassiker__karte span { font-size: .84rem; color: var(--tinte-60, #4A5A68); }

/* Reiseplaner: Richtungswahl */
.routewahl {
  border: 0; padding: 0; margin: 0 0 1.1rem;
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
}
.routewahl legend {
  font-weight: 600; padding: 0; margin-bottom: .45rem; width: 100%;
}
.routewahl__opt { position: relative; }
.routewahl__opt input { position: absolute; opacity: 0; }
.routewahl__opt span {
  display: inline-block; padding: .55rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--flaeche); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.routewahl__opt input:checked + span {
  background: var(--fahrwasser); border-color: var(--fahrwasser); color: var(--auf-farbe);
}
.routewahl__opt input:focus-visible + span {
  outline: 2px solid var(--fahrwasser); outline-offset: 2px;
}

.zielbox__zeile { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.zielbox__zeile input {
  flex: 1 1 220px; min-width: 0;
  padding: .7rem .9rem; border: 1px solid var(--linie); border-radius: 8px;
  font: inherit; background: var(--flaeche);
}
.zielbox__zeile input:focus-visible { outline: 2px solid var(--fahrwasser); outline-offset: 1px; }
.zielbox__antwort { margin-top: 1.1rem; line-height: 1.75; }
.zielbox__antwort p { margin: 0 0 .7rem; }
.zielbox__antwort p:last-child { margin-bottom: 0; }
.zielbox__antwort.is-warten { color: var(--grau); font-style: italic; }
.zielbox__antwort.is-fehler { color: var(--tonne); }
.zielbox__antwort.is-fertig {
  background: var(--flaeche); border-left: 3px solid var(--fluss);
  border-radius: 0 8px 8px 0; padding: .9rem 1.1rem;
}
.zielbox__hinweis {
  margin: 1rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--grau);
}
@media print { .zielbox { display: none; } }

/* =========================================================================
   Bedienbarkeit auf dem Telefon
   ========================================================================= */
@media (max-width: 719px) {
  /* Safari auf dem iPhone zoomt die Seite automatisch heran, sobald ein
     Eingabefeld mit weniger als 16 px Schrift den Fokus bekommt. Das
     verschiebt das Layout und wirkt wie ein Fehler. 16 px verhindert es.
     Die Auswahl muss so genau sein wie die Regel weiter oben, sonst
     gewinnt dort .field input mit 0,96rem. */
  input, select, textarea,
  .field input[type=text], .field input[type=email], .field input[type=tel],
  .field input[type=number], .field input[type=password], .field input[type=url],
  .field input[type=search], .field input[type=date], .field select, .field textarea,
  .searchdeck__row input, .zielbox__zeile input {
    font-size: 16px;
  }

  /* Der Sprachumschalter war 24 px hoch — für einen Daumen zu wenig.
     Getroffen werden soll die Schaltfläche, nicht der Nachbar. */
  .langswitch__item {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}


/* =============================================================
   Mobilmenü — Farben, Sprachumschalter, Abdunklung
   =============================================================
   Die Schublade ist weiß, die Kopfleiste über der Videobühne setzt
   aber helle Schrift (.masthead--over). Im geöffneten Menü stand
   dadurch Weiß auf Weiß: DE und EN im Sprachumschalter und die
   Beschriftung von "Rausfahren?" waren unsichtbar, sichtbar blieb
   nur der grüne Punkt.

   Entscheidend ist die Schwelle: Die Schublade beginnt bei 1100px,
   die Korrekturen standen vorher bei 900px. Zwischen 901 und 1100
   — also genau auf dem iPad im Hochformat mit 1024px — griffen sie
   deshalb nicht. Beide Werte müssen gleich sein.
   ============================================================= */
@media (max-width: 1100px) {

  /* Sprachumschalter: nach oben, volle Breite, gut zu treffen. */
  .mainnav .langswitch {
    order: -1; margin: 0 0 1rem; width: 100%;
    justify-content: stretch;
    background: var(--gischt); border-color: var(--linie);
  }
  .mainnav .langswitch__item {
    flex: 1; justify-content: center; padding: .6rem; font-size: .88rem;
    color: var(--grau);
  }
  .mainnav .langswitch__item:hover { background: var(--schaum); color: var(--text); }
  .mainnav .langswitch__item.is-current { background: var(--fluss); color: var(--auf-farbe); }

  /* Knöpfe in der Schublade stehen auf Weiß, nicht auf dem Video. */
  .mainnav .btn--ghost,
  .mainnav .heute { color: var(--text); border-color: var(--linie); }
  .mainnav .btn--ghost:hover,
  .mainnav .heute:hover { background: var(--gischt); color: var(--text); }
  .mainnav .kontomenu__knopf { color: var(--text); border-color: var(--linie); }

  /* Abdunklung hinter der Schublade. Trennt Menü und Seite optisch
     und schließt das Menü beim Tippen daneben — bisher ging das nur
     über den Burger oder Escape. */
  .navscrim {
    position: fixed; inset: var(--kopf-h, var(--head-h)) 0 0 0; z-index: 89;
    background: rgba(10, 37, 64, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    display: block; width: 100%; border: 0; padding: 0; margin: 0;
    -webkit-appearance: none; appearance: none; cursor: pointer;
  }
  .navscrim.is-open { opacity: 1; visibility: visible; }
}

@media (min-width: 1101px) { .navscrim { display: none; } }
@media (prefers-reduced-motion: reduce) { .navscrim { transition: none; } }


/* =============================================================
   Mobilmenü: Schublade darf nicht an der Kopfleiste hängen
   =============================================================
   .masthead.is-stuck trägt backdrop-filter. Ein Element mit
   backdrop-filter wird zum umgebenden Block für alle Nachkommen
   mit position:fixed — genau wie transform oder filter. Die
   Schublade liegt im Quelltext innerhalb der Kopfleiste, also
   bezog sich ihr "inset: var(--head-h) 0 0 auto" nicht mehr auf
   das Fenster, sondern auf die 66 Pixel hohe Leiste selbst.
   Ergebnis: oben 66, unten 0 in einem 66 Pixel hohen Kasten —
   die Schublade schrumpfte auf ihre eigene Polsterung, rund 38
   Pixel, und war nur noch ein weißer Streifen.

   Sichtbar wurde das nur, wenn vor dem Öffnen gescrollt wurde,
   denn erst dann setzt die Leiste is-stuck. Am Seitenanfang
   greift .masthead--over ohne Filter, und dort ging alles gut.

   Solange das Menü offen ist, kommt der Filter deshalb weg. Der
   Hintergrund ist ohnehin zu 94 Prozent deckend; für die paar
   Sekunden fällt die Unschärfe nicht auf, und der Bezugsrahmen
   der Schublade ist wieder das Fenster.
   ============================================================= */
.masthead.nav-offen {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.masthead.is-stuck.nav-offen { background: var(--flaeche); }

/* Das hidden-Attribut soll wirken — ohne diese Regel setzt die
   display-Angabe aus dem Menüblock es ausser Kraft. */
.navscrim[hidden] { display: none; }


/* =============================================================
   Sprachumschalter in der Kopfleiste (schmale Geräte)
   =============================================================
   Auf Telefon und Tablet hängt das Skript den Umschalter aus dem
   Menü heraus direkt neben den Menüknopf. Diese Regeln geben ihm
   dort die passende Grösse und schieben ihn nach rechts, sodass
   er und der Knopf ein Paar bilden.
   ============================================================= */
.langswitch--leiste {
  margin-left: auto; margin-right: .5rem;
  order: 0; width: auto; flex: 0 0 auto;
  justify-content: flex-start;
}
.langswitch--leiste .langswitch__item {
  /* 44 Pixel Höhe: dieselbe Trefferfläche wie der Menüknopf daneben. */
  padding: .5rem .6rem; font-size: .78rem; flex: 0 0 auto;
  display: flex; align-items: center;
}

/* Der Menüknopf braucht sein eigenes margin-left:auto nicht mehr,
   sobald der Umschalter davor sitzt und den Platz einnimmt. */
.langswitch--leiste + .burger { margin-left: 0; }

@media (max-width: 359px) {
  /* Ganz schmale Telefone: Umschalter enger, damit Logo, Sprachen
     und Menüknopf zusammen in eine Zeile passen. */
  .langswitch--leiste { margin-right: .25rem; }
  .langswitch--leiste .langswitch__item { padding: .5rem .38rem; font-size: .72rem; }
}


/* =============================================================
   Bedienungsanleitung
   =============================================================
   Drei Listenarten, die es sonst nirgends gibt: das Verzeichnis
   oben, die verlinkten Aufzählungen der Funktionen und die
   nummerierten Abläufe.
   ============================================================= */
.inhaltsliste {
  border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.2rem 1.4rem; margin-top: 2rem; background: var(--gischt);
}
.inhaltsliste h2 {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grau); margin: 0 0 .7rem;
}
.inhaltsliste ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1.4rem;
  counter-reset: verzeichnis;
}
.inhaltsliste li { counter-increment: verzeichnis; }
.inhaltsliste li a {
  display: block; padding: .25rem 0; font-size: .95rem;
  color: var(--text); text-decoration: none; font-weight: 500;
}
.inhaltsliste li a::before {
  content: counter(verzeichnis) ". ";
  color: var(--fluss); font-variant-numeric: tabular-nums; font-weight: 700;
}
.inhaltsliste li a:hover { color: var(--fluss); text-decoration: underline; }

.anleitungsliste { margin: 1.2rem 0 1.4rem; padding: 0; list-style: none; }
.anleitungsliste > li {
  padding: .7rem 0 .7rem 1.3rem; border-bottom: 1px solid var(--linie-2);
  position: relative; line-height: 1.6;
}
.anleitungsliste > li:last-child { border-bottom: 0; }
.anleitungsliste > li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--fahrwasser);
}
.anleitungsliste > li > a { font-weight: 600; }

.schrittliste { margin: 1.2rem 0 1.4rem; padding: 0; list-style: none; counter-reset: schritt; }
.schrittliste > li {
  counter-increment: schritt; position: relative;
  padding: .2rem 0 1rem 2.6rem; line-height: 1.6;
}
.schrittliste > li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  background: var(--fluss); color: var(--auf-farbe);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums;
}

/* Die Sprungmarken dürfen nicht unter der Kopfleiste verschwinden. */
.page-anleitung [id] { scroll-margin-top: calc(var(--kopf-h, var(--head-h)) + 1rem); }

@media (max-width: 640px) {
  .inhaltsliste ol { grid-template-columns: 1fr; }
  .inhaltsliste { padding: 1rem 1.1rem; }
}


/* =============================================================
   Tageseinschätzung: oben im Menü und mit Ladezustand
   ============================================================= */

/* Im Kopfbalken, links neben den Sprachen. Der Platz ist knapp,
   deshalb kompakter als in der Knopfgruppe auf dem Desktop — und
   mit der kurzen Beschriftung, die das Skript einsetzt. */
.heute--leiste {
  margin-left: auto; margin-right: .45rem;
  width: auto; flex: 0 0 auto;
  padding: .45rem .7rem;
  font-size: .8rem;
  gap: .4rem;
}
/* Zwei automatische Aussenabstände würden den freien Platz teilen und
   die beiden auseinanderziehen. Den zweiten also abschalten. */
.heute--leiste + .langswitch--leiste { margin-left: 0; }

/* Der Knopf darf nicht mehr über die volle Menübreite gehen — die
   Regel galt für die Zeit, als er in der Schublade stand. */
@media (max-width: 1100px) {
  .heute.heute--leiste { width: auto; }
}

/* Ladezustand: Der grüne Punkt wird zum Kringel. Beide sind 8 bzw.
   14 Pixel breit, deshalb bekommt der Knopf beim Wechsel keinen
   Sprung — die Breite ist über min-width festgehalten. */
.heute.is-laedt { pointer-events: none; opacity: .85; }
.heute.is-laedt .heute__punkt {
  width: 14px; height: 14px;
  background: none; box-shadow: none;
  border: 2px solid var(--linie); border-top-color: var(--fluss);
  animation: drehen .8s linear infinite;
}
/* Der Kringel muss sich auf drei verschiedenen Untergründen behaupten.
   Reihenfolge von allgemein nach besonders, jede folgende Regel
   sticht die vorige: */

/* 1. Über dem Video: helle Ränder, sonst verschwindet er im Bild. */
.masthead--over .heute.is-laedt .heute__punkt {
  border-color: rgba(255,255,255,.35); border-top-color: #fff;
}
/* 2. Auf der festgestellten weissen Leiste wäre genau das unsichtbar. */
.masthead.is-stuck .heute.is-laedt .heute__punkt {
  border-color: var(--linie); border-top-color: var(--fluss);
}
/* 3. In der weissen Schublade ebenso — dort steht der Knopf nie über
      dem Video, auch wenn die Leiste darüber noch --over trägt. */
@media (max-width: 1100px) {
  .mainnav .heute.is-laedt .heute__punkt {
    border-color: var(--linie); border-top-color: var(--fluss);
  }
}
.heute__text { min-width: 8.5ch; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  /* Ohne Drehung bleibt der Kringel stehen — die geänderte
     Beschriftung sagt trotzdem, dass etwas läuft. */
  .heute.is-laedt .heute__punkt { animation: none; }
}


/* =============================================================
   Kilometerband: senkrecht auf Telefon und Tablet
   =============================================================
   Waagerecht ist es auf dem Desktop ein hübsches Lineal. Auf einem
   Gerät, das man senkrecht scrollt, ist ein waagerecht scrollender
   Streifen dagegen schwer zu bedienen: Der einzige Hinweis darauf,
   dass es weitergeht, war ein fünf Pixel hoher Balken, die Namen
   standen in 0,78 rem, und jede Marke war 96 Pixel breit.

   Deshalb kippt das Band hier in die Senkrechte. Der Fluss läuft
   dann von oben nach unten wie beim Scrollen — Kilometer links,
   Marke auf der Linie, Name rechts. Volle Zeilenbreite als
   Trefferfläche, keine zweite Scrollrichtung.
   ============================================================= */
@media (max-width: 1100px) {

  .kmband { padding: 1.4rem 0 1.6rem; }

  .kmband__scroll {
    overflow: visible;                 /* kein waagerechtes Scrollen mehr */
    padding-bottom: 0;
  }

  .kmband__track {
    display: block; min-width: 0;
    position: relative;
    padding: .4rem 0 .2rem;
  }
  /* Die Flusslinie steht jetzt senkrecht, mittig unter den Marken. */
  .kmband__track::before {
    left: 5.55rem; right: auto; top: 0; bottom: 0;
    width: 3px; height: auto;
    background: linear-gradient(180deg, var(--fahrwasser), var(--fluss) 55%, var(--fahrwasser));
  }

  .kmtick {
    display: grid;
    grid-template-columns: 4.6rem 1.9rem 1fr;
    align-items: center;
    gap: 0 .5rem;
    min-width: 0; padding: 0;
    /* 46 Pixel Zeilenhöhe: bequem mit dem Daumen zu treffen. */
    min-height: 46px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .kmtick:last-child { border-bottom: 0; }
  .kmtick:active { background: rgba(255,255,255,.06); }
  .kmtick::after { display: none; }

  .kmtick__km {
    grid-column: 1; grid-row: 1;
    text-align: right; font-size: .82rem; color: rgba(255,255,255,.75);
    font-variant-numeric: tabular-nums;
  }
  .kmtick__dot {
    grid-column: 2; grid-row: 1;
    position: static; transform: none;
    justify-self: center;
    width: 12px; height: 12px;
  }
  .kmtick__name {
    grid-column: 3; grid-row: 1;
    max-width: none; margin: 0; text-align: left;
    font-size: .95rem; line-height: 1.3;
  }
  .kmtick__typ {
    display: block;
    grid-column: 3; grid-row: 2;
    font-family: var(--ff-data); font-size: .64rem; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(255,255,255,.45);
  }
  .kmtick[data-typ="schleuse"] .kmtick__typ { color: color-mix(in srgb, var(--tonne) 70%, var(--auf-farbe)); }
  .kmtick[data-typ="hafen"]    .kmtick__typ { color: color-mix(in srgb, var(--boje) 70%, var(--auf-farbe)); }
  @supports not (color: color-mix(in srgb, red 50%, blue)) {
    .kmtick[data-typ="schleuse"] .kmtick__typ,
    .kmtick[data-typ="hafen"]    .kmtick__typ { color: rgba(255,255,255,.6); }
  }
  /* Hat eine Zeile eine Artangabe, braucht sie zwei Zeilen Höhe. */
  .kmtick { padding: .45rem 0; }

  /* Zeigefinger statt Mauszeiger: die Vergrösserung beim Überfahren
     bringt hier nichts und lässt die Zeile beim Tippen springen. */
  .kmtick:hover .kmtick__dot { transform: none; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }

  /* Gekürzte Ansicht. Ohne Skript fehlt die Klasse und alles steht da. */
  .kmband__track.is-gekuerzt .kmtick:nth-child(n+7) { display: none; }

  .kmband__mehr { display: block; margin-top: .9rem; }
  /* Das hidden-Attribut muss die display-Angabe darüber schlagen,
     sonst steht der Knopf ohne Skript sichtbar und tot da. */
  .kmband__mehr[hidden] { display: none; }
  .kmband__knopf {
    width: 100%; justify-content: center;
    color: var(--auf-farbe); border-color: rgba(255,255,255,.28);
  }
  .kmband__knopf:hover { background: rgba(255,255,255,.08); color: var(--auf-farbe); }

  .kmband__hinweis {
    display: block; margin: .9rem 0 0;
    font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.5);
  }
}


/* =============================================================
   Tageseinschätzung im Kopfbalken: Telefone
   =============================================================
   Zwischen 700 und 1100 Pixeln passen Logo, Knopf, Sprachen und
   Menüknopf nebeneinander — nachgemessen bei 834 und 1024.
   Darunter nicht: Bei 390 Pixeln sind allein Logo, Sprachen und
   Menüknopf schon 341 Pixel breit, der Knopf braucht weitere 121.
   Der Menüknopf wurde dadurch aus dem Bild geschoben.

   Auf Telefonen bekommt der Knopf deshalb eine eigene Zeile unter
   dem Logo — volle Breite, lange Beschriftung, ordentliche
   Trefferfläche. Sichtbar ist er dort genauso, nur eben nicht
   daneben, sondern darunter. Die Kopfleiste wächst entsprechend,
   und --head-h wächst mit, sonst rutschen Schublade, Abdunklung
   und alle Sprungmarken um denselben Betrag daneben.
   ============================================================= */
@media (max-width: 900px) {
  :root { --head-h: 108px; }

  .masthead__inner {
    flex-wrap: wrap;
    padding-top: .5rem; padding-bottom: .5rem;
    /* Der Abstand von 1,5 rem war fünf Pixel zu viel: Logo, Sprachen
       und Menüknopf brauchen bei 390 Pixeln zusammen 355 von 358, mit
       den grossen Abständen wurde der Menüknopf in eine dritte Zeile
       geschoben. Enger zusammen passen sie in eine. */
    column-gap: .6rem;
    row-gap: .5rem;
  }
  .langswitch--leiste { margin-right: 0; }
  .brand           { order: 1; }
  .langswitch--leiste { order: 2; }
  .burger          { order: 3; }

  .heute--leiste {
    order: 4;
    flex: 1 0 100%;
    width: 100%;
    margin: 0;
    justify-content: center;
    padding: .5rem .8rem;
    font-size: .86rem;
  }
  /* In der eigenen Zeile ist Platz — dort steht wieder die lange
     Fassung. Das Skript setzt sie, diese Regel sorgt nur dafür,
     dass sie nicht abgeschnitten wird. */
  .heute--leiste .heute__text { min-width: 0; }
}

@media (max-width: 359px) {
  /* Gemessen sind es auch hier 110px — mit 102 rutschten die
     obersten acht Pixel jedes Seiteninhalts hinter die feste
     Kopfleiste, weil Abstand und Sprungmarken sich nach dieser
     Angabe richten. */
  :root { --head-h: 110px; }
}


/* =============================================================
   Verkaufsweg unter dem Suchdeck
   =============================================================
   Das Suchdeck deckt nur eine Richtung ab: etwas finden. Wer etwas
   anbieten will, brauchte bisher den Knopf in der Kopfleiste — und
   der steckt unter 1100 Pixeln hinter dem Menüknopf. Auf dem Telefon
   gab es also gar keinen sichtbaren Weg zum Inserieren.
   ============================================================= */
.heroverkauf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding: .95rem 1.2rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-m);
  background: rgba(10,37,64,.35);
}
.heroverkauf__text { margin: 0; color: var(--auf-farbe); line-height: 1.5; }
.heroverkauf__text strong { display: block; font-size: 1rem; }
.heroverkauf__text span {
  display: block; font-size: .88rem; color: rgba(255,255,255,.78);
  max-width: 52ch;
}
.heroverkauf__knopf { flex: 0 0 auto; }

@media (max-width: 700px) {
  .heroverkauf { padding: .9rem 1rem; }
  /* Auf dem Telefon der Knopf über die volle Breite — nebeneinander
     bliebe für den Text nichts übrig. */
  .heroverkauf__knopf { width: 100%; justify-content: center; }
}


/* =============================================================
   Funkkanal und Telefon auf der Revierkarte
   =============================================================
   Zwei Angaben, die am Steuerstand zählen: auf welchem Kanal man
   die Schleuse ruft, und unter welcher Nummer der Hafenmeister
   erreichbar ist. Sie standen bisher irgendwo in der Merkmalsliste
   zwischen Fallhöhe und Uferseite.
   ============================================================= */
.poi__funk {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: .9rem 0 .2rem;
}
.poi__funk-kanal,
.poi__funk-tel {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem; border-radius: 999px;
  border: 1px solid var(--linie);
  background: var(--gischt);
  font-size: .9rem; line-height: 1.2;
  /* 44 Pixel hoch: am Steuerstand trifft man keine kleinen Ziele. */
  min-height: 44px;
}
.poi__funk-kanal svg,
.poi__funk-tel svg { width: 17px; height: 17px; flex: 0 0 auto; }
.poi__funk-label {
  font-family: var(--ff-data); font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--grau);
}
.poi__funk-kanal b,
.poi__funk-tel b { font-weight: 700; color: var(--text); }

.poi__funk-kanal { color: var(--fluss); }
.poi__funk-tel {
  color: var(--fluss); text-decoration: none;
  border-color: color-mix(in srgb, var(--fluss) 35%, var(--linie));
}
.poi__funk-tel:hover { background: var(--schaum); border-color: var(--fluss); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .poi__funk-tel { border-color: var(--linie); }
}

@media (max-width: 480px) {
  /* Auf dem Telefon jede Angabe über die volle Breite — nebeneinander
     wird die Nummer sonst umgebrochen. */
  .poi__funk { flex-direction: column; }
  .poi__funk-kanal, .poi__funk-tel { width: 100%; }
}


/* ---- Törn live: Zugang auf der Karte und als Kachel ---- */
.maplegend__live {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0 0 .7rem; padding: .6rem .8rem; min-height: 44px;
  border-radius: var(--r-s);
  background: var(--fluss); color: var(--auf-farbe);
  font-size: .88rem; font-weight: 600; text-decoration: none;
}
.maplegend__live:hover { background: var(--tief); color: var(--auf-farbe); }
.maplegend__live-punkt {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--flaeche);
  animation: livepuls 1.8s ease-in-out infinite;
}
@keyframes livepuls {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
  50%      { opacity: .55; box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) {
  .maplegend__live-punkt { animation: none; }
}

.tile--live .tile__icon { color: var(--steuerbord); }


/* Der Hinweis, dass eine Anzeige genau eine Art hat, ist kein
   beiläufiger Zusatz — er beantwortet die Frage, die sich an dieser
   Stelle stellt. Deshalb abgesetzt statt in Grau untergehend. */
.field__hint--merk {
  margin-top: .45rem; padding: .55rem .7rem;
  border-left: 3px solid var(--fahrwasser);
  background: var(--gischt);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  color: var(--text);
}
.field__hint--merk em { font-style: normal; font-weight: 700; }


/* =============================================================
   Band am Seitenende: Anzeige aufgeben
   ============================================================= */
.postband { background: var(--kalk); border-top: 1px solid var(--linie); }
.postband__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding: 1.6rem 0;
}
.postband__text { margin: 0; line-height: 1.5; }
.postband__text strong { display: block; font-size: 1.15rem; color: var(--text); }
.postband__text span { display: block; color: var(--grau); font-size: .93rem; max-width: 56ch; }

@media (max-width: 640px) {
  .postband__inner { padding: 1.3rem 0; }
  .postband .btn { width: 100%; justify-content: center; }
}


/* ---- Kopfbild einer Seite ---- */
.seitenbild {
  margin: 1.6rem 0 0;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--gischt);
}
.seitenbild img,
.seitenbild picture { display: block; width: 100%; height: auto; }


/* =============================================================
   Abschnitt: Sprachmodell
   ============================================================= */
.kisec { background: var(--tief); color: var(--auf-farbe); }
.kisec__inner {
  display: flex; align-items: flex-start; gap: 1.6rem;
  padding: 2.6rem 0;
}
.kisec__zeichen {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--fahrwasser);
}
.kisec__zeichen svg { width: 30px; height: 30px; }
.kisec__text { max-width: 74ch; }
.kisec__text .eyebrow { color: var(--fahrwasser); }
.kisec__text h2 { margin: .2rem 0 .8rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.kisec__text p { color: rgba(255,255,255,.82); line-height: 1.65; margin: 0 0 .9rem; }

/* Die Einschränkung ist der wichtigere Teil der Aussage — abgesetzt,
   damit sie nicht als Kleingedrucktes durchgeht. */
.kisec__grenze {
  border-left: 3px solid var(--fahrwasser);
  padding: .1rem 0 .1rem 1rem;
}
.kisec .btn--ghost { color: var(--auf-farbe); border-color: rgba(255,255,255,.35); margin-top: .4rem; }
.kisec .btn--ghost:hover { background: rgba(255,255,255,.1); color: var(--auf-farbe); }

@media (max-width: 700px) {
  .kisec__inner { flex-direction: column; gap: 1rem; padding: 2rem 0; }
  .kisec__zeichen { width: 48px; height: 48px; }
  .kisec__zeichen svg { width: 25px; height: 25px; }
}


/* =============================================================
   Kennzeichnung "KI-unterstützt"
   =============================================================
   Steht nur dort, wo tatsächlich ein Sprachmodell arbeitet: an der
   Tageseinschätzung, am freien Ziel im Reiseplaner und als Hinweis
   in der Fusszeile jeder Seite. Nicht als Schmuck über der ganzen
   Seite — sonst behauptet die Kennzeichnung mehr, als stimmt.
   ============================================================= */
.kibadge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--fahrwasser) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--fahrwasser) 45%, transparent);
  color: var(--fluss);
  font-family: var(--ff-data); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600;
  vertical-align: middle; white-space: nowrap;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .kibadge { background: var(--gischt); border-color: var(--linie); }
}
/* An einer grossen Überschrift sonst zu wuchtig. */
.kibadge--h1 { transform: translateY(-.18em); }

.footer__ki {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0; color: rgba(255,255,255,.7);
}
.footer__ki .kibadge {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.9);
}
.footer__ki a { color: var(--fahrwasser); }
.footer__ki a:hover { color: var(--auf-farbe); }

@media (max-width: 700px) {
  /* In der Basisleiste steht der Hinweis dann in eigener Zeile. */
  .footer__ki { width: 100%; }
}


/* =============================================================
   Törn live in der Kopfleiste
   =============================================================
   An Bord ist das der Knopf, den man ohne Suchen erreichen muss.
   Die Kopfleiste ist fest, also ist er auf jeder Seite ohne
   Scrollen da — anders als die Kachel auf der Startseite oder der
   Knopf in der Kartenlegende, die beide erst gescrollt werden
   müssen.
   ============================================================= */
.livebtn { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.livebtn__welle {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
  overflow: visible;
}
.livebtn__kern { fill: currentColor; stroke: none; }

/* Die Bögen laufen nacheinander nach aussen — das liest sich als
   "sendet gerade". Der rote Punkt vorher sah aus wie eine Ampel und
   stand damit neben der grünen Ampel von "Rausfahren?" wie deren
   Gegenstück: rot gleich halt. Gemeint war das Gegenteil. */
.livebtn__bogen { transform-origin: 10px 10px; }

/* Der innere Bogen steht fest: So ist immer ein Sendesymbol zu sehen.
   Beim ersten Versuch waren beide Bögen animiert und ein Drittel des
   Ablaufs unsichtbar — in dem Moment sah der Knopf wieder aus wie eine
   Lampe, also genau wie das, was weg sollte. */
.livebtn__bogen--1 { opacity: .9; }

/* Nur der äussere Bogen läuft nach aussen und verblasst. */
.livebtn__bogen--2 { opacity: 0; animation: sendewelle 2s ease-out infinite; }

@keyframes sendewelle {
  0%        { opacity: 0;  transform: scale(.6); }
  30%       { opacity: .8; }
  75%, 100% { opacity: 0;  transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung stehen die Bögen einfach da — das Symbol bleibt
     lesbar, es pulsiert nur nicht. */
  .livebtn__bogen { animation: none; opacity: .85; transform: none; }
}

/* Reihenfolge von allgemein nach besonders, wie beim Ladekringel:
   1. über dem Video hell, 2. auf der festgestellten Leiste dunkel,
   3. in der weissen Schublade dunkel — Letzteres aber nur unterhalb
      der Schwelle. Ohne diese Eingrenzung galt die Regel auch auf dem
      Desktop, wo der Knopf in .mainnav__actions sitzt: dunkelblau auf
      dunklem Video, praktisch unsichtbar. */
.masthead--over .livebtn { color: var(--auf-farbe); border-color: rgba(255,255,255,.45); }
.masthead.is-stuck .livebtn { color: var(--text); border-color: var(--linie); }
@media (max-width: 1100px) {
  .mainnav .livebtn { color: var(--text); border-color: var(--linie); }
}

/* Im Kopfbalken: kompakt, direkt neben der Tageseinschätzung. */
.livebtn--leiste {
  margin-right: .45rem;
  padding: .45rem .7rem; font-size: .8rem; gap: .4rem;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  /* Eigene Zeile unter Logo und Sprachen — zwei Knöpfe nebeneinander,
     je zur Hälfte. Untereinander würde die Leiste zu hoch. */
  .heute--leiste, .livebtn--leiste {
    order: 4; flex: 1 1 0; width: auto; margin: 0;
    justify-content: center; padding: .5rem .6rem; font-size: .82rem;
  }
  .heute--leiste { margin-right: .4rem; }
  .livebtn--leiste .livebtn__text, .heute--leiste .heute__text { min-width: 0; }
}


/* ---- Gastansicht der Törnaufzeichnung ---- */
.gastknoepfe { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.6rem 0 .5rem; }
.gastknoepfe__hinweis { margin: 0 0 1.8rem; font-size: .88rem; color: var(--grau); }
@media (max-width: 480px) {
  .gastknoepfe { flex-direction: column; }
  .gastknoepfe .btn { width: 100%; justify-content: center; }
}

/* Vermerk unter dem Live-Knopf in der Kartenlegende. */
.maplegend__livehint {
  margin: -.4rem 0 .7rem; text-align: center;
  font-family: var(--ff-data); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grau);
}


/* ---- Zwei Wege nebeneinander: iOS und Android ---- */
.appwege {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem;
  margin: 1.6rem 0 1.4rem;
}
.appweg h3 {
  margin: 0 0 .8rem; font-size: 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--linie);
}
.appweg .schrittliste { margin: 0; }
@media (max-width: 700px) {
  /* Untereinander — nebeneinander bleibt für die Schrittnummern und
     den Text zu wenig Platz. */
  .appwege { grid-template-columns: 1fr; gap: 1.8rem; }
}


/* ---- Foto zu einem Knoten ---- */
.knoten__bild {
  margin: 1rem 0 1.2rem;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--gischt);
}
.knoten__bild img { display: block; width: 100%; height: auto; }


/* =============================================================
   Schema: Ablauf in der Schleusenkammer
   =============================================================
   Ein einziges SVG, dessen Teile sich je Schritt bewegen. Der
   Zustand steht als data-schritt am Rahmen; alles Weitere macht
   CSS. Das Skript setzt nur die Zahl — fällt es aus, steht das
   Schema auf Schritt 1 und die sechs Texte stehen untereinander.
   ============================================================= */
.schleusenablauf {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.6rem 2rem;
  align-items: start; margin: 1.6rem 0 2rem;
}
.schleusenablauf__bild {
  margin: 0; border: 1px solid var(--linie); border-radius: var(--r-m);
  overflow: hidden; background: #EAF2F8;
}
.schleusenablauf__bild svg { display: block; width: 100%; height: auto; }
.sa__text { font-family: var(--ff-data); font-size: 11px; fill: #5C7A93; }

/* ---- Bewegliche Teile ---------------------------------------
   Kammerwasser: y und Höhe wechseln. Tor: fährt nach oben aus dem
   Bild. Boot: wandert waagerecht und hebt sich mit dem Wasser. */
.sa__wasser, .sa__tor, .sa__boot, .sa__lampe {
  transition: all .9s cubic-bezier(.4,0,.2,1);
}
.sa__boot { transform: translate(430px, 146px); }

.sa__lampe { fill: #24384A; }
.sa__lampe.ist-rot   { fill: #D62030; }
.sa__lampe.ist-gruen { fill: #2E9E7A; }

/* ---- Die sechs Zustände ---- */
/* 1 Wartestelle: unten, Untertor zu, zwei rote Lichter */
[data-schritt="1"] .sa__lampe--links,
[data-schritt="1"] .sa__lampe--rechts { fill: #D62030; }

/* 2 Rot-grün: Öffnung wird vorbereitet */
[data-schritt="2"] .sa__lampe--links  { fill: #D62030; }
[data-schritt="2"] .sa__lampe--rechts { fill: #2E9E7A; }

/* 3 Grün, Untertor offen, Boot fährt ein */
[data-schritt="3"] .sa__lampe--links,
[data-schritt="3"] .sa__lampe--rechts { fill: #2E9E7A; }
[data-schritt="3"] .sa__tor--unten { transform: translateY(-140px); }
[data-schritt="3"] .sa__boot { transform: translate(300px, 146px); }

/* 4 Festmachen: Tor wieder zu, Boot liegt in der Kammer */
[data-schritt="4"] .sa__lampe--links,
[data-schritt="4"] .sa__lampe--rechts { fill: #D62030; }
[data-schritt="4"] .sa__boot { transform: translate(240px, 146px); }

/* 5 Wasser steigt: Kammer füllt sich, Boot hebt sich mit */
[data-schritt="5"] .sa__lampe--links,
[data-schritt="5"] .sa__lampe--rechts { fill: #D62030; }
[data-schritt="5"] .sa__wasser { y: 62px; height: 134px; }
[data-schritt="5"] .sa__boot { transform: translate(240px, 58px); }

/* 6 Obertor offen, Ausfahrt */
[data-schritt="6"] .sa__lampe--links,
[data-schritt="6"] .sa__lampe--rechts { fill: #2E9E7A; }
[data-schritt="6"] .sa__wasser { y: 62px; height: 134px; }
[data-schritt="6"] .sa__tor--oben { transform: translateY(-140px); }
[data-schritt="6"] .sa__boot { transform: translate(60px, 58px); }

/* ---- Texte: immer nur der aktuelle Schritt, sobald das Skript läuft ---- */
.sa__schritt { margin: 0 0 1.4rem; }
.sa__zaehler {
  margin: 0 0 .3rem; font-family: var(--ff-data); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fluss);
}
.sa__schritt h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.sa__schritt p { margin: 0; line-height: 1.65; }
/* Erst wenn das Skript übernommen hat, wird auf einen Schritt
   reduziert. Ohne Skript stehen alle sechs untereinander. */
.schleusenablauf.ist-gesteuert .sa__schritt { display: none; }
.schleusenablauf.ist-gesteuert .sa__schritt.ist-aktiv { display: block; animation: eingeblendet .35s ease; }

.sa__steuerung { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
/* Das hidden-Attribut muss die display-Angabe schlagen, sonst steht
   die Steuerung ohne Skript sichtbar und ohne Wirkung da. */
.sa__steuerung[hidden] { display: none; }
.sa__punkte { display: flex; gap: .35rem; }
.sa__punkt {
  width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.sa__punkt::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--linie); transition: background .2s, transform .2s;
}
.sa__punkt[aria-selected="true"]::before { background: var(--fluss); transform: scale(1.4); }
.sa__spielen { margin-left: auto; }

/* ---- Lichtzeichen ---- */
.lichtzeichen { border-top: 1px solid var(--linie); padding-top: 1.4rem; }
.lichtzeichen h3 { margin: 0 0 .3rem; }
.lichtzeichen__quelle { margin: 0 0 1rem; font-size: .85rem; color: var(--grau); }
.lichtzeichen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.lichtzeichen li { display: flex; align-items: center; gap: .9rem; line-height: 1.55; }
.lichtzeichen__mast {
  display: inline-flex; gap: 4px; padding: 5px 7px; border-radius: 6px;
  background: var(--tief); flex: 0 0 auto;
}
.lichtzeichen__mast i { width: 11px; height: 11px; border-radius: 50%; background: #24384A; }
.lichtzeichen__mast i.ist-rot   { background: #D62030; }
.lichtzeichen__mast i.ist-gruen { background: #2E9E7A; }

@media (max-width: 820px) {
  .schleusenablauf { grid-template-columns: 1fr; }
  .sa__spielen { margin-left: 0; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sa__wasser, .sa__tor, .sa__boot, .sa__lampe { transition: none; }
  .schleusenablauf.ist-gesteuert .sa__schritt.ist-aktiv { animation: none; }
}


/* =============================================================
   Kalender und Forum
   ============================================================= */

/* ---- Terminliste ---- */
.monat {
  font-family: var(--ff-data); font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grau);
  margin: 2.2rem 0 .8rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--linie);
}
.monat:first-child { margin-top: 0; }
.terminliste { list-style: none; margin: 0; padding: 0; }
.termin { border-bottom: 1px solid var(--linie-2); }
.termin:last-child { border-bottom: 0; }
.termin__link {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: .9rem 0; text-decoration: none; color: inherit;
}
.termin__link:hover .termin__inhalt strong { color: var(--fluss); }

/* Das Datum als Block links — beim Überfliegen sucht man den Tag,
   nicht den Titel. */
.termin__tag {
  flex: 0 0 auto; width: 52px; text-align: center;
  border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: .35rem 0; background: var(--gischt);
}
.termin__tag b { display: block; font-size: 1.25rem; line-height: 1.1; color: var(--text); }
.termin__tag small {
  display: block; font-family: var(--ff-data); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grau);
}
.termin__inhalt { display: block; min-width: 0; }
.termin__art {
  display: block; font-family: var(--ff-data); font-size: .64rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fluss);
}
.termin__inhalt strong { display: block; font-size: 1.02rem; line-height: 1.35; margin: .1rem 0 .2rem; }
.termin__meta { display: block; font-size: .88rem; color: var(--grau); }

.termin__kopf { margin: 1.2rem 0 1.6rem; display: grid; gap: .6rem; }
.termin__kopf > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .6rem; }
.termin__kopf dt {
  font-family: var(--ff-data); font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--grau); margin: 0;
}
.termin__kopf dd { margin: 0; }
.termin__autor { margin-top: 1.6rem; font-size: .88rem; color: var(--grau); }

/* ---- Forum ---- */
.bereiche { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.bereich {
  padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--linie);
  font-size: .88rem; text-decoration: none; color: var(--text); background: var(--flaeche);
}
.bereich:hover { border-color: var(--fluss); color: var(--fluss); }
.bereich.is-current { background: var(--fluss); border-color: var(--fluss); color: var(--auf-farbe); }

.themenliste { list-style: none; margin: 0; padding: 0; }
.thema {
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 1px solid var(--linie-2);
}
.thema:last-child { border-bottom: 0; }
.thema > a { flex: 1 1 auto; padding: .9rem 0; text-decoration: none; color: inherit; min-width: 0; }
.thema > a:hover strong { color: var(--fluss); }
.thema__bereich {
  display: block; font-family: var(--ff-data); font-size: .64rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fluss);
}
.thema strong { display: block; font-size: 1.02rem; line-height: 1.35; margin: .1rem 0 .2rem; }
.thema__meta { display: block; font-size: .85rem; color: var(--grau); }
.thema__zahl {
  flex: 0 0 auto; min-width: 46px; text-align: center;
  border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: .3rem 0; background: var(--gischt);
}
.thema__zahl b { font-size: 1rem; color: var(--text); }
/* Angepinntes hebt sich ab, ohne zu schreien. */
.thema--pin { background: var(--gischt); }
.thema--pin > a { padding-left: .8rem; }

.beitrag {
  border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.1rem 1.2rem; margin: 0 0 1rem;
}
.beitrag--start { border-left: 3px solid var(--fluss); }
.beitrag__kopf {
  display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap;
  margin: 0 0 .7rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linie-2);
}
.beitrag__kopf strong { color: var(--text); }
.beitrag__kopf span { font-size: .84rem; color: var(--grau); }
.antworten__titel { font-size: 1rem; margin: 1.8rem 0 1rem; color: var(--grau); }
.antwortform { margin-top: 1.8rem; }

.leer {
  text-align: center; padding: 3rem 1.5rem;
  border: 1px dashed var(--linie); border-radius: var(--r-m);
  background: var(--gischt);
}
.leer h2 { margin: 0 0 .6rem; }
.leer p { margin: 0 auto 1.2rem; max-width: 46ch; color: var(--grau); }

@media (max-width: 560px) {
  .termin__kopf > div { grid-template-columns: 1fr; gap: .15rem; }
  .thema__zahl { min-width: 40px; }
}


/* =============================================================
   Tippziele auf dem Telefon
   =============================================================
   Gemessen an 27 Seiten über zwölf Breiten: zwei Sorten Verweise
   waren zu klein zum sicheren Treffen. Textlinks mitten im Fliesstext
   bleiben, wie sie sind — die trifft man im Lesefluss und nicht mit
   dem Daumen bei Seegang.
   ============================================================= */
@media (max-width: 640px) {
  /* "Auf der Karte", "Position" unter jeder Karteikarte: 23px hoch.
     Mit etwas Polsterung darüber und darunter werden daraus 44. */
  .poi__link {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 .1rem;
  }
  .poi__foot { gap: .2rem 1.1rem; }

  /* Fusszeilenlinks standen mit 16px Höhe dicht an dicht. */
  .footer__col li { margin: 0; }
  .footer__col a { display: block; padding: .5rem 0; }
  .footer__col a:hover { text-decoration: underline; }
}


/* =============================================================
   Teilen
   =============================================================
   Gewöhnliche Verweise, kein fremdes Skript. Die Markenfarben sind
   bewusst nur beim Überfahren zu sehen — vier bunte Kacheln würden
   auf jeder Seite lauter schreien als der Inhalt darunter.
   ============================================================= */
.teilen {
  display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap;
  margin: 2rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
}
.teilen__label {
  font-family: var(--ff-data); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grau);
}
.teilen__knoepfe { display: flex; gap: .4rem; flex-wrap: wrap; }

.teilen__knopf {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: 0 .8rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); color: var(--text);
  font-size: .86rem; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.teilen__knopf svg { width: 17px; height: 17px; flex: 0 0 auto; }
.teilen__knopf:hover { border-color: currentColor; }

.teilen__knopf--whatsapp:hover { color: #1FA855; }
.teilen__knopf--facebook:hover { color: #1877F2; }
.teilen__knopf--linkedin:hover { color: #0A66C2; }
.teilen__knopf--email:hover,
.teilen__knopf--system:hover,
.teilen__knopf--kopie:hover  { color: var(--fluss); }

.teilen__knopf--kopie.ist-kopiert {
  color: var(--steuerbord); border-color: var(--steuerbord);
}

/* Ohne Skript bleibt der Systemknopf weg — sonst stünde dort ein
   Knopf, der nichts tut. */
.teilen__knopf--system[hidden],
.teilen__knopf--kopie[hidden] { display: none; }

@media (max-width: 560px) {
  .teilen { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .teilen__knoepfe { width: 100%; }
  /* Beschriftungen weglassen wäre platzsparend, aber ein nacktes
     Symbol trifft man schlechter und liest man schlechter. */
  .teilen__knopf { flex: 1 1 auto; justify-content: center; }
}


/* Teilen-Leiste am Seitenende: schmaler Abstand, damit sie nicht wie
   ein eigener Abschnitt wirkt, sondern wie ein Abschluss. */
.section--teilen { padding: 0 0 1.6rem; }
.section--teilen .teilen { margin-top: 0; }


/* ---- Wer die Seite gebaut hat ---- */
.footer__macher {
  display: flex; align-items: center; gap: .7rem;
  margin: 0; color: rgba(255,255,255,.55);
  font-size: .82rem;
}
.footer__macher img {
  display: block; width: 132px; height: auto;
  opacity: .72; transition: opacity .18s;
}
.footer__macher a:hover img,
.footer__macher a:focus-visible img { opacity: 1; }

@media (max-width: 700px) {
  /* In der Basisleiste stapeln sich die Angaben ohnehin — hier nur
     dafür sorgen, dass die Zeile nicht mittig ausreisst. */
  .footer__macher { width: 100%; }
}


/* =============================================================
   Zusatzpunkte in der Menü-Schublade
   Kalender, Forum, Anleitung, Über uns und Kontakt stehen auf
   breiten Bildschirmen in der Fußzeile — die Kopfleiste ist dort
   voll genug. Auf Telefon und Tablet scrollt aber niemand bis
   ganz nach unten, deshalb erscheinen dieselben Punkte im Menü,
   abgesetzt durch eine kräftigere Linie.
   ============================================================= */
.mainnav__nurmenue,
.mainnav__trenner { display: none; }

@media (max-width: 1100px) {
  .mainnav__list > li.mainnav__nurmenue { display: block; }

  /* Trennlinie statt Überschrift: kein zusätzlicher Text, der in
     drei Sprachen gepflegt werden müsste, aber trotzdem sichtbar
     ein zweiter Block. Die Unterkante der Liste erbt die feine
     Linie — hier braucht es die kräftigere. */
  .mainnav__list > li.mainnav__trenner {
    display: block; height: 0; padding: 0;
    border-bottom: 0; border-top: 2px solid var(--linie);
    margin: 1rem 0 .3rem;
  }

  /* Die aufgerufene Seite hervorheben. Im Menü ist das die einzige
     Orientierung, welcher Punkt gerade offen ist. */
  .mainnav__list a.is-current {
    background: rgba(53,181,232,.14);
    font-weight: 600;
  }
}

/* -------------------------------------------------------------------------
   Bilder umsortieren (Bearbeiten-Seite und Verwaltung)
   touch-action: none auf den Einträgen, damit der Finger ziehen kann,
   ohne dass die Seite mitscrollt. Gescrollt wird daneben.
   ------------------------------------------------------------------------- */
[data-bildsort] [data-bild-id] {
  position: relative;
  /* pan-y: Mit dem Finger senkrecht scrollen geht weiter — waagerechtes
     Ziehen sortiert. Die Pfeile sind der Weg ganz ohne Ziehen. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.editimage[data-bild-id] figcaption {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
}
[data-bildsort] [data-bild-id].is-gezogen { opacity: .35; }
[data-bildsort] [data-bild-id].is-titelbild img { outline: 3px solid var(--boje, #E32636); outline-offset: -3px; }
[data-bildsort] [data-bild-id].is-titelbild::after {
  content: attr(data-titel-label);
  position: absolute;
  top: .45rem; left: .45rem;
  background: var(--boje, #E32636);
  color: var(--auf-farbe);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .15rem .5rem;
  border-radius: 4px;
  pointer-events: none;
}
.bildsort__geist {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  opacity: .85;
  transform: rotate(2deg);
  filter: drop-shadow(0 8px 18px rgba(10, 35, 60, .35));
}
.bildsort__pfeile {
  display: flex;
  gap: .3rem;
  justify-content: center;
}
.bildsort__pfeil {
  border: 1px solid #CBD6DE;
  background: var(--flaeche);
  border-radius: 6px;
  width: 34px;
  height: 30px;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  color: #2A3A47;
}
.bildsort__pfeil:hover { background: #EEF3F7; }
.bildsort__status { min-height: 1.2em; }
.bildsort__status.is-fehler { color: var(--boje, #E32636); font-weight: 600; }
[data-bildsort] img { -webkit-user-drag: none; user-drag: none; }

/* -------------------------------------------------------------------------
   Aufmacher: das zuletzt eingestellte Boot, groß über dem Raster
   ------------------------------------------------------------------------- */
.spotlight {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  background: var(--flaeche);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  border: 1px solid var(--linie-2);
  margin-bottom: 2.2rem;
}
.spotlight__media {
  position: relative;
  display: block;
  min-height: 320px;
}
.spotlight__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.spotlight__body {
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.spotlight__title {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.15;
  margin: .3rem 0 .5rem;
}
.spotlight__title a { color: var(--text); text-decoration: none; }
.spotlight__title a:hover { color: var(--fluss); }
.spotlight__specs { margin-top: .8rem; }
.spotlight__price {
  margin-top: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
}
.spotlight__amount {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--text);
}
@media (max-width: 860px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight__media { min-height: 0; aspect-ratio: 4 / 3; }
  .spotlight__body { padding: 1.4rem 1.3rem 1.6rem; }
}


/* =============================================================
   CORVNI: der Funk-Assistent als dritter Knopf in der Kopfleiste
   =============================================================
   Optisch gehört er zu "Rausfahren?" und "Törn live" — dieselbe
   Grundform (.btn--ghost.btn--sm), damit die drei als Gruppe und
   nicht als Sammlung gelesen werden. Unterscheiden soll ihn nur
   das Symbol und ein Ring, der in ruhigem Takt nach aussen läuft.

   Der Ring liegt in ::after und nicht in einem eigenen Element:
   So bleibt das Markup ein Link mit Symbol und Wort, und
   Vorleseprogramme bekommen nichts Zusätzliches vorgesetzt.
   ============================================================= */
.corvnibtn {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}

.corvnibtn__mic {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
/* Die Kapsel ist das einzige gefüllte Teil — dadurch liest sich das
   Symbol auch bei 17 Pixeln noch als Mikrofon und nicht als Bündel
   von Strichen. */
.corvnibtn__kapsel { fill: currentColor; stroke: none; }

/* Zwei Bögen rechts, die nacheinander nach aussen laufen: "sendet".
   Derselbe Gedanke wie beim Törn-Knopf, aber seitlich statt rundum —
   sonst sähen die beiden Knöpfe nebeneinander gleich aus. Der innere
   Bogen bleibt sichtbar, damit auch in der Pause ein Sendesymbol
   dasteht. */
.corvnibtn__welle { transform-origin: 11px 10px; }
.corvnibtn__welle--1 { opacity: .85; }
.corvnibtn__welle--2 { opacity: 0; animation: corvniwelle 2.6s ease-out infinite; }

@keyframes corvniwelle {
  0%        { opacity: 0;   transform: scale(.72); }
  22%       { opacity: .95; }
  70%, 100% { opacity: 0;   transform: scale(1.06); }
}

/* Der Ring um den ganzen Knopf. Bewusst lang getaktet und nur kurz
   sichtbar: Ein dauerhaft blinkender Knopf in einer festen Kopfleiste
   zieht bei jedem Scrollen das Auge weg vom Inhalt. Die Farbe ist
   --fahrwasser, weil sie sowohl auf der weissen Leiste als auch über
   dem dunklen Video trägt. */
.corvnibtn::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 999px;
  border: 1.5px solid var(--fahrwasser);
  opacity: 0;
  pointer-events: none;
  animation: corvniring 4.2s ease-out infinite;
}

@keyframes corvniring {
  0%        { opacity: 0;   transform: scale(.97); }
  8%        { opacity: .65; }
  45%, 100% { opacity: 0;   transform: scale(1.13); }
}

/* Beim Berühren hört die Werbung auf — wer den Knopf ohnehin ansteuert,
   braucht nicht mehr darauf hingewiesen zu werden. */
.corvnibtn:hover::after,
.corvnibtn:focus-visible::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung bleibt ein vollständiges Sendesymbol stehen, der
     Ring verschwindet ganz. Das Symbol muss lesbar sein, es muss
     nicht pulsieren. */
  .corvnibtn__welle { animation: none; opacity: .85; transform: none; }
  .corvnibtn__welle--2 { opacity: .5; }
  .corvnibtn::after { animation: none; opacity: 0; }
}

/* Dieselbe Reihenfolge wie beim Törn-Knopf: 1. über dem Video hell,
   2. auf der festgestellten Leiste dunkel, 3. in der weissen Schublade
   dunkel — Letzteres nur unterhalb der Schwelle, sonst schlüge die
   Regel auch auf dem Desktop zu, wo der Knopf über dem Video steht. */
.masthead--over .corvnibtn { color: var(--auf-farbe); border-color: rgba(255,255,255,.45); }
.masthead.is-stuck .corvnibtn { color: var(--text); border-color: var(--linie); }
@media (max-width: 1100px) {
  .mainnav .corvnibtn { color: var(--text); border-color: var(--linie); }
}

/* ---- In der Kopfleiste (unter 1100px, vom Skript umgehängt) ----
   Hier zeigt der Knopf nur das Mikrofon. Drei ausgeschriebene
   Beschriftungen nebeneinander passen auf einem 320 Pixel breiten
   Telefon nicht in eine Zeile; mit Wort wären es zwei Zeilen mehr
   Kopfleiste auf jeder Seite. Die Trefferfläche bleibt bei 44 Pixeln,
   der Sinn steht im aria-label und im title. */
.corvnibtn--leiste {
  margin-right: .45rem;
  /* Die Polsterung ist nicht gegriffen, sondern gemessen: Mit 18 Pixel
     Symbol und dieser Höhe steht der Knopf exakt so hoch wie die beiden
     beschrifteten Nachbarn. Eine Zeile mit drei verschieden hohen
     Knöpfen sieht nach Versehen aus. */
  padding: .52rem .62rem;
  flex: 0 0 auto;
  gap: 0;
}
.corvnibtn--leiste .corvnibtn__text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.corvnibtn--leiste .corvnibtn__mic { width: 18px; height: 18px; }

/* Der sichtbare Kreis ist rund 42 x 35 Pixel — so hoch wie seine
   beiden Nachbarn, damit die Zeile nicht ausfranst. Für einen Daumen
   ist das zu klein. Diese unsichtbare Fläche zieht den Bereich, der
   auf Berührung reagiert, auf 45 Pixel Höhe, ohne die Zeile höher
   zu machen. Sie liegt unter dem Ring in ::after und fängt nichts
   weg, was daneben steht. */
.corvnibtn--leiste::before {
  content: "";
  position: absolute; inset: -5px -2px;
  border-radius: 999px;
}



/* =============================================================
   Notruf: der SOS-Knopf unten rechts
   =============================================================
   Auf jeder Seite, ohne Ausnahme und ohne Scrollen. Die Notfallseite
   selbst ist über das Revier-Menü drei Handgriffe entfernt — zu viele
   für den Moment, in dem man sie braucht.

   Rund, rot, ein Wort: SOS wird auf dem Wasser in allen drei Sprachen
   ohne Nachdenken gelesen. Die Rettungsring-Anmutung kommt aus dem
   weissen Ring, nicht aus einem weiteren Symbol — bei 62 Pixeln bliebe
   neben der Schrift ohnehin kein Platz.
   ============================================================= */
.sosknopf {
  position: fixed;
  z-index: 88;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--tonne);
  color: var(--auf-farbe);
  text-decoration: none;
  border: 2.5px solid rgba(255, 255, 255, .9);
  box-shadow: 0 6px 20px rgba(227, 38, 54, .38), 0 2px 6px rgba(10, 37, 64, .25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease,
              opacity .25s ease, visibility .25s ease;
}
.sosknopf__kern {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .05em;
  line-height: 1;
}
.sosknopf:hover {
  background: #c31d2c;
  color: var(--auf-farbe);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(227, 38, 54, .46), 0 3px 8px rgba(10, 37, 64, .28);
}
.sosknopf:active { transform: translateY(0); }
.sosknopf:focus-visible {
  outline: 3px solid var(--fahrwasser);
  outline-offset: 3px;
}

/* Der Halo. Er läuft langsam und wird nie ganz kräftig: Der Knopf soll
   auffindbar sein, nicht mahnen. Ein schnell blinkender roter Kreis in
   der Ecke macht eine Seite über Bootsanzeigen unruhig. */
.sosknopf::before {
  content: "";
  position: absolute; inset: -2.5px;
  border-radius: 50%;
  border: 2px solid var(--tonne);
  opacity: 0;
  pointer-events: none;
  animation: sospuls 3.4s ease-out infinite;
}

@keyframes sospuls {
  0%        { opacity: 0;   transform: scale(1); }
  10%       { opacity: .55; }
  60%, 100% { opacity: 0;   transform: scale(1.42); }
}

/* Auf der Notfallseite selbst bleibt er stehen — er soll nicht dort
   verschwinden, wo man ihn zuletzt gedrückt hat — aber ohne Puls und
   ohne Signalfarbe. Er zeigt dann nur noch: Du bist schon da. */
.sosknopf--hier {
  background: var(--tief-2);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 4px 14px rgba(10, 37, 64, .3);
}
.sosknopf--hier::before { animation: none; opacity: 0; }
.sosknopf--hier:hover { background: var(--tief); }

/* Solange die Menüschublade offen ist, hat der Knopf nichts über ihr
   zu suchen. Möglich ist die Regel nur, weil er als Geschwister der
   Kopfleiste direkt unter <body> hängt und nicht in der Fusszeile. */
.masthead.nav-offen ~ .sosknopf {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 560px) {
  /* Etwas kleiner und näher an die Ecke: Auf dem Telefon deckt der
     Knopf sonst einen spürbaren Teil der Anzeigenkarten ab. */
  .sosknopf {
    width: 54px; height: 54px;
    right: calc(.75rem + env(safe-area-inset-right, 0px));
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  }
  .sosknopf__kern { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sosknopf::before { animation: none; opacity: 0; }
  .sosknopf:hover { transform: none; }
}

@media print {
  .sosknopf { display: none; }
}

/* Der Notruf schwebt über der letzten Zeile der Fusszeile — dort stehen
   Impressumszeile, Machervermerk und die Flagge. Ab etwa 1400 Pixeln
   Fensterbreite liegt er neben dem 1240 Pixel breiten Satzspiegel und
   verdeckt nichts; darunter schiebt er sich darüber. Also bekommt die
   Zeile genau dann Luft in seiner Höhe. */
@media (max-width: 1400px) {
  .footer__base { padding-bottom: calc(62px + 1.4rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .footer__base { padding-bottom: calc(54px + 1.2rem + env(safe-area-inset-bottom, 0px)); }
}


/* =============================================================
   Zweite Kopfzeile auf dem Telefon: die drei Knöpfe als Gruppe
   =============================================================
   Bis hierher durften die Knöpfe einzeln in der Kopfleiste
   umbrechen. Wohin sie dabei fielen, entschied die Länge der
   Beschriftung — also die Sprache: "Rausfahren?" brach um,
   "Go out?" und "Sortir ?" passten noch neben den Menüknopf und
   blieben oben. Drei Sprachen, drei verschiedene Kopfleisten,
   und die Knöpfe in jeder Sprache anders breit.

   Der Kasten nimmt die volle Zeilenbreite ein. Damit ist die
   Aufteilung eine Sache des Aufbaus und nicht der Wortlänge:
   Zeile eins immer Logo, Sprachen, Menü — Zeile zwei immer die
   drei Knöpfe. Die beiden beschrifteten teilen sich den Platz
   zu gleichen Teilen (flex: 1 1 0 auf einer Basis von null, nicht
   auf ihrer Textbreite), CORVNI bleibt das feste Symbol daneben.
   Auf Deutsch, Französisch und Englisch ergibt das dieselbe
   Zeile mit denselben Massen.

   Erzeugt wird der Kasten in nautic.js, sobald das Fenster unter
   700 Pixel liegt.
   ============================================================= */
.kopfzeile2 {
  order: 4;
  flex: 1 0 100%;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: .5rem;
}

/* order: 0 zurücksetzen. Die beiden tragen aus der Zeit vor diesem
   Kasten ein "order: 4" — das galt für die Kopfleiste selbst, wo es
   sie unter Logo und Sprachen schob. Hier drinnen sortierte es sie
   dagegen hinter CORVNI, das keine Angabe hat: Das Mikrofon stand
   plötzlich vorn. */
.kopfzeile2 .heute--leiste,
.kopfzeile2 .livebtn--leiste {
  order: 0;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin: 0;
  justify-content: center;
  padding: .5rem .6rem;
  font-size: .82rem;
}

.kopfzeile2 .corvnibtn--leiste {
  order: 0;
  flex: 0 0 auto;
  margin: 0;
  /* Gemessen, nicht geschätzt: damit steht er genau so hoch wie die
     beiden beschrifteten Knöpfe daneben. */
  padding: .62rem .7rem;
}

/* Die feste Mindestbreite aus dem Ladezustand ("8.5ch") würde die
   Gleichverteilung wieder aushebeln. In dieser Zeile bestimmt der
   Kasten die Breite, nicht der Text — und ein Wort, das doch einmal
   zu lang ist, endet mit Auslassungspunkten statt mit einem Umbruch,
   der die Kopfleiste höher macht. */
.kopfzeile2 .heute__text,
.kopfzeile2 .livebtn__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zwischen 701 und 1100 Pixeln stehen die drei Knöpfe in einer Zeile
   mit dem Sprachumschalter. Auch dort soll die Leiste in allen drei
   Sprachen gleich aussehen: Ohne Mindestbreite wäre "Go out?" rund
   zwanzig Pixel schmaler als "Rausfahren?", und der ganze Block
   verschöbe sich je nach Sprache. Die 7,4 rem sind so bemessen, dass
   Logo, drei Knöpfe, Sprachen und Menüknopf auch bei 701 Pixeln —
   der engsten Stelle dieses Bereichs — nebeneinander bleiben. */
.heute--leiste,
.livebtn--leiste {
  min-width: 7.4rem;
  justify-content: center;
}


/* =============================================================
   Desktop ab 1101 px: feste Knopfbreiten
   =============================================================
   Damit die Kopfleiste in allen drei Sprachen dieselbe ist, dürfen
   die Knöpfe nicht mehr mit ihrer Beschriftung mitwachsen. Die
   Breiten sind aus den längsten Beschriftungen aller drei Sprachen
   gemessen und dann festgeschrieben:

     kurz  "Rausfahren?" 134 · "En direct" 118 · "CORVNI" 112
     lang  "Sortir aujourd'hui ?" 177 · "Navigation en direct" 190

   Aufgerundet auf 8,4 / 7,4 / 7,1 rem beziehungsweise 11,2 / 12 rem.
   Sollte eine Beschriftung doch einmal länger werden, endet sie mit
   Auslassungspunkten statt die Leiste zu sprengen — box-sizing ist
   global border-box, die Werte enthalten also Polsterung und Rand.
   ============================================================= */
@media (min-width: 1101px) {
  .mainnav__actions .heute     { width: 8.4rem; }
  .mainnav__actions .livebtn   { width: 7.4rem; }
  .mainnav__actions .corvnibtn { width: 7.1rem; }

  .mainnav__actions .heute__text,
  .mainnav__actions .livebtn__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Ab 1280 px hat der Satzspiegel seine volle Breite von 1240 Pixeln.
   Erst dort ist Platz für die vollen Beschriftungen — auch auf
   Französisch, der längsten der drei Sprachen. nautic.js setzt den
   Text an derselben Schwelle um. */
@media (min-width: 1280px) {
  .mainnav__actions .heute   { width: 11.2rem; }
  .mainnav__actions .livebtn { width: 12rem; }
}

/* Notbremse: Wird es trotzdem eng — die Menüpunkte sind in jeder
   Sprache anders lang, die französische Reihe braucht rund sechzig
   Pixel mehr als die englische — rücken die Menüpunkte zusammen.
   Die Knöpfe bleiben unangetastet; lieber ein etwas engeres Menü als
   drei verschieden aussehende Kopfleisten. Gesetzt wird die Klasse
   in nautic.js nach einer Messung. */
.masthead.ist-eng .mainnav__list { gap: 0; }
.masthead.ist-eng .mainnav__list a,
.masthead.ist-eng .mainnav__toggle {
  padding-left: .24rem;
  padding-right: .24rem;
  font-size: .89rem;
}

/* Reicht das Zusammenrücken der Menüpunkte nicht, geben auch die
   Abstände und der Sprachumschalter etwas nach. Nötig wird das nur
   ganz unten im Desktop-Bereich (um 1101 px) und nur in der längsten
   Sprache — dort fehlten sonst rund zwanzig Pixel. */
.masthead.ist-eng .mainnav { gap: .7rem; }
.masthead.ist-eng .langswitch__item { padding: .3rem .35rem; }


/* =============================================================
   Amtliche Wasserstände
   =============================================================
   Zwei Darstellungen aus derselben Quelle: die Karte in der
   Randspalte einer Detailseite und die Tabelle auf der
   Wasserstandsseite. Beide tragen dieselbe Farblogik, damit man
   den Zustand erkennt, ohne den Text zu lesen — aber keine der
   beiden bekommt ein grünes „alles gut": Ein Pegelstand ist eine
   Messung, keine Freigabe.
   ============================================================= */
.pegelkarte__stand {
  margin: 0 0 .8rem;
  font-family: var(--ff-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--text);
}
.pegelkarte__lage {
  display: block;
  font-family: var(--ff-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--grau);
  margin-top: .2rem;
}
.pegelkarte__hinweis {
  margin: .9rem 0 0;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--grau);
}

/* Der farbige Streifen links. Zurückhaltender als eine Fläche und
   auch dann noch erkennbar, wenn die Karte zwischen zwei anderen
   in der Spalte steht. */
.pegelkarte { border-left: 3px solid var(--linie); }
.pegelkarte--normal   { border-left-color: var(--steuerbord); }
.pegelkarte--niedrig  { border-left-color: var(--grau-2); }
.pegelkarte--hoch     { border-left-color: var(--boje); }
.pegelkarte--warnung  { border-left-color: var(--boje); }
.pegelkarte--stop     { border-left-color: var(--tonne); }
.pegelkarte--warnung .pegelkarte__lage,
.pegelkarte--stop .pegelkarte__lage { color: var(--tonne); font-weight: 700; }

/* In der Tabelle genügt ein Punkt vor dem Wort. */
.pegelstatus { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pegelstatus::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grau-2); flex: 0 0 auto;
}
.pegelstatus--normal::before   { background: var(--steuerbord); }
.pegelstatus--niedrig::before  { background: var(--grau-2); }
.pegelstatus--hoch::before     { background: var(--boje); }
.pegelstatus--warnung::before  { background: var(--boje); }
.pegelstatus--stop::before     { background: var(--tonne); }
.pegelzeile--warnung th[scope="row"],
.pegelzeile--stop th[scope="row"] { color: var(--tonne); }

/* ---------------------------------------------------------------
   Pegelband auf der Startseite

   Sechs Stationen als Reihe. Dieselbe Farblogik wie die Pegelkarte
   in der Randspalte — der Streifen sitzt hier oben statt links,
   weil die Kacheln nebeneinander stehen und nicht untereinander.
   --------------------------------------------------------------- */
.pgband__list {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Auf breiten Schirmen hoechstens drei Spalten. Auto-fit macht daraus
   sonst vier — und bei sechs Kacheln sieht vier oben, zwei unten nach
   einer angebrochenen Reihe aus. Drei und drei ist eine Aufteilung. */
@media (min-width: 900px) {
  .pgband__list { grid-template-columns: repeat(3, 1fr); }
}
.pgband__item {
  display: flex; flex-direction: column; gap: .18rem;
  padding: .85rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-top: 3px solid var(--linie);
  border-radius: var(--r-m);
}
.pgband__item--normal  { border-top-color: var(--steuerbord); }
.pgband__item--niedrig { border-top-color: var(--grau-2); }
.pgband__item--hoch,
.pgband__item--warnung { border-top-color: var(--boje); }
.pgband__item--stop    { border-top-color: var(--tonne); }

.pgband__ort  { font-weight: 600; line-height: 1.25; }
.pgband__km   { font-size: .8rem; color: var(--grau-2); }
.pgband__wert { font-size: 1.35rem; font-weight: 700; line-height: 1.15; margin-top: .25rem; }
.pgband__lage { font-size: .85rem; color: var(--grau-2); }

.pgband__item--warnung .pgband__lage,
.pgband__item--stop .pgband__lage { color: var(--tonne); font-weight: 700; }

.pgband__fuss {
  margin-top: 1.1rem; font-size: .85rem; color: var(--grau-2);
  max-width: 68ch;
}

/* Lage an der Staustufe: PEGELONLINE haengt an Stationsnamen "UP"
   (Unterpegel) oder "OP" (Oberpegel) an. Der Kurzname bleibt in den Daten
   unveraendert — er ist Schluessel in pegel_zustand und pegel_abos; hier
   wird nur das ausgeschriebene Wort klein danebengesetzt.
   text-transform: none ist noetig, weil die Trefferstellen (Tabellenkopf,
   Kacheln) teils in Versalien gesetzt sind. */
.pegel-lage {
  font-size: .62em;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: none;
  color: var(--grau-2);
  margin-left: .4em;
  white-space: nowrap;
}

/* In der Kachel steht der Ort ohnehin schon klein, dort reicht weniger
   Verkleinerung. In Tabelle und Randspaltenkarte ebenso. */
.pgband__ort .pegel-lage { font-size: .72em; }
table.data-table tbody th .pegel-lage,
.pegelkarte .pegel-lage { font-size: .8em; }

/* Auf schmalen Karten sonst ein Umbruch mitten im Ortsnamen. */
@media (max-width: 480px) {
  .pgband__ort .pegel-lage { display: block; margin-left: 0; }
}

/* Ein ausgedruckter Wasserstand ist beim Verlassen des Druckers
   schon falsch — dieselbe Regel wie bei der Pegelkarte. */
@media print { .pgband { display: none; } }

@media print {
  /* Ein ausgedruckter Wasserstand ist in dem Moment falsch, in dem
     das Blatt aus dem Drucker kommt. */
  .pegelkarte { display: none; }
}


/* =============================================================
   Nachrichten für die Binnenschifffahrt
   =============================================================
   Amtliche Meldungen, nicht unsere. Deshalb bewusst nüchtern:
   kein Ausrufezeichen, keine Signalfarbe über die ganze Fläche,
   sondern ein Streifen am Rand und der Wortlaut so, wie er
   gekommen ist. Wer eine Sperrung sucht, will sie lesen, nicht
   angeschrien werden.
   ============================================================= */
.elwisblock {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--boje);
  border-radius: var(--r-m);
  background: var(--gischt);
  padding: 1.3rem 1.5rem;
}
.elwisblock__h { margin: 0 0 .4rem; font-size: 1.15rem; }
.elwisblock__d { margin: 0 0 1.1rem; font-size: .9rem; color: var(--grau); }
.elwisblock__quelle {
  margin: 1rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--grau);
}

.elwisliste { list-style: none; margin: 0; padding: 0; }
.elwismeldung + .elwismeldung {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie-2);
}
.elwismeldung h3 { margin: 0 0 .25rem; font-size: 1rem; }
.elwismeldung__zeit {
  margin: 0 0 .45rem;
  font-family: var(--ff-data); font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--grau);
}
.elwismeldung__text { margin: 0; font-size: .92rem; }

.elwiskarte .linklist li { font-size: .88rem; }
.elwiskarte__quelle { margin: .8rem 0 0; font-size: .72rem; color: var(--grau); }

@media print {
  /* Eine Sperrung von gestern auf Papier ist schlimmer als keine. */
  .elwisblock, .elwiskarte { display: none; }
}

/* Stationen ohne Vergleichswert: der Stand bleibt lesbar, tritt aber
   zurück. Meist sind es Oberpegel an einer Staustufe — ihre 614 cm
   neben 215 cm am Nachbarpegel sind kein Hochwasser, sondern ein
   anderer Nullpunkt. */
.pegelzeile--ohnebezug td.data:first-child,
.pegelzeile--ohnebezug th[scope="row"] { color: var(--grau); }
.pegelmarke {
  border: 0; text-decoration: none; cursor: help;
  color: var(--grau-2); font-size: .8em; margin-left: .15em;
}
.pegelkarte__ohne {
  margin: .2rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--grau);
}

/* ------------------------------------------------------------------ *
 * Durchfahrtshöhe einer Brücke
 *
 * Die eine Zahl, wegen der jemand diese Seite überhaupt aufruft. Sie
 * steht deshalb gross und allein, mit dem Wort "mindestens" davor —
 * denn genau das ist die Aussage, und nichts darüber hinaus.
 * ------------------------------------------------------------------ */
.hoehe {
  margin: 2rem 0 0;
  padding: 1.3rem 1.4rem 1.1rem;
  border: 1px solid rgba(10, 37, 64, .12);
  border-left: 4px solid var(--steuerbord);
  border-radius: var(--radius, 10px);
  background: rgba(46, 158, 122, .05);
}
.hoehe > h2 { margin: 0 0 .7rem; font-size: 1.15rem; }
.hoehe p.hoehe__zahl {
  margin: 0 0 .6rem;
  font-family: var(--ff-display);
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--text);
}
.hoehe p.hoehe__zahl--keine { font-size: 1.35rem; color: var(--grau); }
.hoehe > p { margin: 0 0 .8rem; font-size: .9rem; line-height: 1.6; }
.hoehe p.hoehe__heute {
  margin: 0 0 .9rem;
  padding: .7rem .85rem;
  border-radius: 8px;
  background: rgba(46, 158, 122, .12);
  font-size: 1rem;
}
.hoehe__rechnung {
  display: block;
  margin-top: .25rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--grau);
}
.hoehe p.hoehe__ohne {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--grau);
}
.hoehe__daten { margin: .9rem 0 0; }
.hoehe__daten a { color: inherit; }
.hoehe p.hoehe__warn {
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid rgba(10, 37, 64, .1);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--grau);
}
@media (max-width: 560px) {
  .hoehe { padding: 1.1rem 1rem .9rem; }
  .hoehe p.hoehe__zahl { font-size: 1.55rem; }
}

/* Herkunft einer Koordinate — kleine Fußnote unter den Daten. */
.geohinweis {
  margin: 1.2rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--grau);
}
.geohinweis__marke {
  display: inline-block;
  margin-right: .45rem;
  padding: .1rem .45rem;
  border-radius: 4px;
  background: rgba(10, 37, 64, .07);
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
}
.geohinweis__marke--ok {
  background: rgba(46, 158, 122, .15);
  color: #1d6b52;
}

/* =============================================================
   Hafen eintragen — Formular für Betreiber
   ============================================================= */

/* Die Karte, auf der die Lage gesetzt wird. Höhe fest, damit Leaflet
   beim Aufbau nicht auf 0 px rechnet und graue Kacheln zeigt. */
.hafenkarte {
  height: 340px;
  margin: .55rem 0 .4rem;
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
  background: var(--gischt);
}
@media (max-width: 560px) {
  .hafenkarte { height: 260px; }
}
.hafenkarte__stand {
  margin: 0 0 .2rem;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: .78rem;
  color: var(--grau);
}
.hafenkarte__stand[hidden] { display: none; }

.feldhilfe {
  margin: .3rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--grau);
}

.formteil {
  margin: 2.2rem 0 .2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  font-size: 1.15rem;
}

/* Ja/Nein-Felder sollen nicht wie Texteingaben aussehen. */
.field--schalter label {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-weight: 400;
  cursor: pointer;
}
.field--schalter input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  flex: 0 0 auto;
}

/* Aufruf auf der Hafenübersicht. */
.hafencta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--gischt);
}
.hafencta__h { margin: 0 0 .25rem; font-size: 1.2rem; }
.hafencta p  { margin: 0; color: var(--grau); }

/* Betreibereintrag: erkennbar, aber nicht als Warnung. Eine
   Betreiberangabe ist die naheliegendste Quelle für einen Hafen —
   nur eben keine amtliche. Deshalb neutral grau, nicht rot. */
.poikarte--betreiber .poikarte__marke,
.marke--betreiber {
  background: rgba(92, 122, 147, .14);
  color: var(--grau);
}

/* ---------- Bilder eines Betreiberhafens ---------- */

/* Erstes Bild gross, die übrigen als Reihe darunter. Bei nur einem Bild
   fällt die Reihe weg, ohne dass es eine Sonderregel braucht. */
.poigal {
  display: grid;
  gap: .5rem;
  margin: 1.6rem 0 .5rem;
  grid-template-columns: repeat(3, 1fr);
}
.poigal__bild {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--gischt);
  aspect-ratio: 4 / 3;
}
.poigal__bild:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
.poigal__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bei zwei Bildern soll das zweite nicht als schmaler Rest dastehen. */
.poigal[data-n="2"] .poigal__bild:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.poigal[data-n="1"] { grid-template-columns: 1fr; }

.poigal__quelle {
  margin: 0 0 1.4rem;
  font-size: .78rem;
  color: var(--grau);
}
@media (max-width: 560px) {
  .poigal { grid-template-columns: repeat(2, 1fr); }
}

/* Vorschaubild auf der Punktkarte. */
.poi__bild {
  display: block;
  margin: -1px -1px .9rem;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  aspect-ratio: 16 / 9;
  background: var(--gischt);
}
.poi__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bildprüfung in der Verwaltung. */
.bildpruef {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin: 1rem 0 1.6rem;
}
.bildpruef__el { margin: 0; }
.bildpruef__el img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--gischt);
}
.bildpruef__el figcaption { margin-top: .4rem; }

/* Bild im Kartenpopup. */
.mappop__bild {
  display: block;
  width: calc(100% + 2px);
  margin: -1px -1px .6rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}

/* Bildauswahl beim Bearbeiten — Haken weg heisst löschen. */
.bildwahl {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: .6rem 0 1.4rem;
}
.bildwahl__el {
  margin: 0;
  cursor: pointer;
}
.bildwahl__el img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--gischt);
  transition: opacity .15s;
}
/* Abgewähltes Bild sichtbar zurücknehmen — sonst klickt jemand den Haken
   weg und merkt beim Speichern nicht, dass das Bild verschwindet. */
.bildwahl__el:has(input:not(:checked)) img { opacity: .3; }
.bildwahl__el span {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin-top: .35rem;
  font-size: .82rem;
  color: var(--grau);
}
.bildwahl__el input { width: 1rem; height: 1rem; margin: 0; }

/* Ja/Nein-Angaben als eigene Gruppe.
   Zwischen den Eingabefeldern richteten sie sich oben in der Rasterzelle
   aus, während die Eingaben unter ihrer Beschriftung sitzen — die Zeile
   franste aus. Eigene Reihe, gleiche Höhe, klare Trefferfläche. */
.feldhilfe--gruppe { margin-top: 1.2rem; }
.schaltergruppe {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .7rem;
  margin: .5rem 0 .4rem;
}
.schalter {
  display: flex;
  gap: .5rem;
  align-items: center;
  min-height: 44px;
  padding: .35rem .85rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: .9rem;
  cursor: pointer;
  background: var(--flaeche);
}
.schalter input { width: 1.05rem; height: 1.05rem; margin: 0; flex: 0 0 auto; }
.schalter:has(input:checked) {
  border-color: var(--fluss);
  background: rgba(53, 181, 232, .1);
}

/* ---------- Anhänge eines Termins ---------- */
.anhang__h { margin: 1.8rem 0 .6rem; font-size: 1.15rem; }

.anhangliste { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.anhangliste li + li { margin-top: .4rem; }
.anhangliste a {
  display: flex;
  gap: .8rem;
  align-items: center;
  /* 44 px Zielfläche — am Steuerstand mit klammen Fingern zu treffen. */
  min-height: 44px;
  padding: .5rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 9px;
  background: var(--flaeche);
  text-decoration: none;
  color: inherit;
}
.anhangliste a:hover { border-color: var(--fluss); background: var(--gischt); }
.anhangliste__art {
  flex: 0 0 auto;
  padding: .15rem .45rem;
  border-radius: 4px;
  background: var(--tonne);
  color: var(--auf-farbe);
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .04em;
}
.anhangliste__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.anhangliste__gr   { flex: 0 0 auto; font-size: .82rem; color: var(--grau); }

/* Maßstab über dem Eintrageformular. Bewusst als eigener Kasten und
   nicht als weiterer Hinweiskasten: Es ist keine Warnung, sondern die
   Auskunft, nach der jemand sonst raten müsste. */
.regelkasten {
  margin: 1.6rem 0 2rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--fluss);
  border-radius: 0 12px 12px 0;
  background: var(--gischt);
}
.regelkasten h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.regelkasten p  { margin: 0 0 .7rem; }
.regelkasten ul { margin: 0 0 .7rem; padding-left: 1.1rem; }
.regelkasten li { margin-bottom: .35rem; }
.regelkasten__fuss {
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid var(--linie-2);
  font-size: .9rem;
  color: var(--grau);
}
.regelkasten__fuss a { font-weight: 600; white-space: nowrap; }

/* Schon angehängte Dateien im Bearbeitungsformular. Bewusst schlicht:
   Es ist eine Bestandsliste zum Aufräumen, keine Galerie. */
.anhangraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .9rem;
  margin: 0 0 1.6rem;
}
.anhangraster__el {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: .6rem;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);
  text-align: center;
}
.anhangraster__el img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}
.anhangraster__pdf {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--gischt);
  color: var(--tonne);
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: .8rem;
  letter-spacing: .06em;
}
.anhangraster__el small {
  display: block;
  font-size: .75rem;
  color: var(--grau);
  overflow-wrap: anywhere;
}
.anhangraster figcaption { margin-top: auto; }

/* Absagen — am Fuss des Bearbeitungsformulars, deutlich abgesetzt,
   damit niemand versehentlich draufkommt. */
.absagen {
  margin: 2.5rem 0 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--gischt);
}
.absagen h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.absagen p  { margin: 0 0 .9rem; font-size: .92rem; color: var(--grau); }

/* "Wer kommt" auf der Notfallseite. Bewusst zurückhaltend: Die Seite
   ist eine Gedächtnisstütze, keine Bildergalerie. Die Aufnahmen stehen
   dort, weil sie eine Frage beantworten, die Text schlecht beantwortet
   — woran erkenne ich das Boot, das mich sucht. */
.helfer {
  margin: 2rem 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--gischt);
}
.helfer h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.helfer p  { margin: 0 0 1rem; }
.helfer__bilder { margin-bottom: 1rem; }
.helfer__bilder figure { margin: 0 0 1rem; }
.helfer__bilder figure:last-child { margin-bottom: 0; }
/* Kein erzwungenes Seitenverhältnis: Die Aufnahme der Basis ist ein
   Band von 3,4:1 — in ein 4:3-Fenster geschnitten wären beide Boote
   wieder weg. Jedes Bild behält seine Form. */
.helfer__bilder img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  display: block;
}
.helfer__bilder figcaption {
  margin-top: .45rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--grau);
}
.helfer__km { margin: 0 0 .8rem; font-weight: 500; }
.helfer__quelle { margin: 0; font-size: .8rem; color: var(--grau); }

/* Print: Die Notfallseite wird ausgedruckt an Bord mitgenommen —
   Fotos kosten dort nur Tinte. */
@media print { .helfer__bilder { display: none; } }

/* ==========================================================================
   Bootsprofil — Prüfmarken und Formular
   Die Marke ist leer und versteckt, solange kein Profil gesetzt ist. Ohne
   Profil sieht die Seite deshalb aus wie zuvor; es gibt keinen leeren Kasten
   und keinen Sprung im Aufbau, wenn das Skript später etwas hineinschreibt.
   ========================================================================== */

/* Eigene display-Regeln und das hidden-Attribut vertragen sich nur, wenn
   hidden ausdrücklich gewinnt — sonst überschreibt die Klassenregel es. */
.bp-marke[hidden] { display: none; }

.bp-marke {
  display: block;
  margin: 1.1rem 0 1.4rem;
  padding: .95rem 1.1rem;
  background: var(--gischt);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--grau-2);
  border-radius: 0 10px 10px 0;
  font-size: .95rem;
  line-height: 1.55;
}

.bp-marke__block { display: block; }
.bp-marke__block + .bp-marke__block { margin-top: .7rem; }

.bp-marke__wort {
  display: inline-block;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .16rem .55rem;
  border-radius: 999px;
  margin-right: .55rem;
  vertical-align: .05em;
}

/* Bewusst kein sattes Grün als Freigabe: eine Rechnung aus unseren Daten
   ist kein Freifahrtschein. Der Abstand steht immer als Zahl daneben. */
.bp-marke__wort--fits  { background: #E3F1EC; color: var(--ok-text); }
.bp-marke__wort--tight { background: #FCEFD2; color: var(--warn-text); }
.bp-marke__wort--no    { background: #FDE3E6; color: var(--fehler-text); }
.bp-marke__wort--unknown { background: var(--schaum); color: var(--tief-3); }

.bp-marke__satz { display: inline; }
.bp-marke__satz--heute {
  display: block;
  margin-top: .35rem;
  color: var(--grau);
  font-size: .9rem;
}
.bp-marke__fussnote {
  display: block;
  margin-top: .4rem;
  color: var(--grau);
  font-size: .84rem;
}
.bp-marke__block--hinweis { color: var(--grau); }

.bp-marke__link {
  display: inline-block;
  margin-top: .6rem;
  font-size: .84rem;
  color: var(--fluss);
}

/* Färbt den Streifen nach dem strengsten Urteil in der Marke. */
.bp-marke:has(.bp-marke__wort--fits)  { border-left-color: #2E9E7A; }
.bp-marke:has(.bp-marke__wort--tight) { border-left-color: var(--boje); }
.bp-marke:has(.bp-marke__wort--no)    { border-left-color: var(--tonne); }

/* ---------- Formular ---------- */

.bp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 1.2rem;
}

.field--unit .field__unitrow {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.field--unit .field__unitrow input { flex: 1 1 auto; min-width: 0; }
.field__unit {
  flex: 0 0 auto;
  color: var(--grau);
  font-size: .92rem;
}

.bp-flash {
  margin-left: .8rem;
  font-size: .9rem;
  font-weight: 600;
}
.bp-flash--ok   { color: var(--ok-text); }
.bp-flash--warn { color: #8A6410; }

@media (max-width: 560px) {
  .bp-grid { grid-template-columns: 1fr; }
  .bp-marke { padding: .85rem .9rem; }
}

/* ---------- Bootsprofil: Kurzform in Tabellen und Kartenpopups ---------- */

.bp-marke--kurz { display: inline-flex; }
.bp-marke--kurz[hidden] { display: none; }

.bp-kurz {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  margin-left: .5rem;
  white-space: nowrap;
  font-size: .78rem;
  padding: .1rem .45rem;
  border-radius: 999px;
}
.bp-kurz__wort { font-weight: 700; letter-spacing: .04em; }
/* Das Maß gehört dazu: ohne Zahl liest sich das Wort wie eine Freigabe. */
.bp-kurz__mass { font-variant-numeric: tabular-nums; opacity: .85; }

.bp-kurz--fits    { background: #E3F1EC; color: var(--ok-text); }
.bp-kurz--tight   { background: #FCEFD2; color: var(--warn-text); }
.bp-kurz--no      { background: #FDE3E6; color: var(--fehler-text); }
.bp-kurz--unknown { background: var(--schaum); color: var(--tief-3); }

/* Im Kartenpopup steht die Marke allein in ihrer Zeile. */
.mappop .bp-marke--kurz { margin: .1rem 0 .35rem; }
.mappop .bp-kurz { margin-left: 0; }

/* In der Kartenansicht bricht die Tabelle auf Karten um — dann gehört die
   Marke unter den Wert und nicht daneben. */
@media (max-width: 720px) {
  .data-table .bp-kurz { margin-left: .4rem; }
}

@media print { .bp-marke, .bp-kurz { display: none !important; } }

/* ==========================================================================
   Versorgung — Merkmalsleiste, Matrix, Filter
   ========================================================================== */

.vers { margin: 2rem 0; }
.vers__leer { color: var(--grau); }

.vers__liste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .1rem 1.6rem;
}

.vers__item {
  display: grid;
  grid-template-columns: 1.1rem 1fr auto;
  align-items: baseline;
  /* Die Liste streckt alle Karten einer Zeile auf gleiche Höhe. Ohne
     align-content dehnte sich dabei auch die innere Rasterzeile — und der
     Punkt (align-self: center) rutschte in die Mitte der hohen Zelle statt
     neben das Wort. Sichtbar, sobald der Nachbar eine Detailzeile trägt. */
  align-content: start;
  gap: .1rem .55rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--linie-2);
}

.vers__zeichen {
  width: .62rem; height: .62rem;
  border-radius: 50%;
  align-self: center;
  background: var(--grau-2);
}
.vers__item--ja        .vers__zeichen { background: #2E9E7A; }
.vers__item--teilweise .vers__zeichen { background: var(--boje); }
.vers__item--nein      .vers__zeichen { background: transparent; box-shadow: inset 0 0 0 2px var(--grau-2); }
/* Unbekannt ist bewusst blass und nicht rot: Es ist keine Verneinung. */
.vers__item--unbekannt .vers__zeichen { background: transparent; box-shadow: inset 0 0 0 1px var(--linie); }
.vers__item--unbekannt .vers__name,
.vers__item--unbekannt .vers__stufe { color: var(--grau-2); }

.vers__name  { font-weight: 600; }
.vers__stufe { font-size: .86rem; color: var(--grau); text-align: right; }
.vers__detail {
  grid-column: 2 / -1;
  font-size: .86rem;
  color: var(--grau);
  margin-top: .1rem;
}
.vers__hinweis { margin-top: 1rem; font-size: .88rem; color: var(--grau); }

/* ---------- Kürzel in Listen ---------- */

.vers-kurz { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-left: .4rem; }
.vers-kuerzel {
  font-size: .7rem;
  text-decoration: none;
  border-bottom: 0;
  padding: .08rem .38rem;
  border-radius: 999px;
  background: var(--schaum);
  color: var(--tief-3);
  white-space: nowrap;
}
.vers-kuerzel--teilweise { background: #FCEFD2; color: var(--warn-text); }

/* ---------- Matrix ---------- */

.data-table--matrix .part { color: var(--boje); }
.data-table--matrix .unk  { color: var(--grau-2); }

/* ---------- Filter ---------- */

.vers-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: 1rem 0 .8rem;
}
.vers-filter__h {
  font-size: .82rem;
  font-weight: 600;
  color: var(--grau);
  margin-right: .3rem;
}
.vers-filter__btn {
  font: inherit;
  font-size: .84rem;
  padding: .3rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
}
.vers-filter__btn:hover { border-color: var(--fluss); }
.vers-filter__btn[aria-pressed="true"] {
  background: var(--tief);
  border-color: var(--text);
  color: var(--auf-farbe);
}

/* Zeilen ohne Angabe zum gefilterten Merkmal: nicht ausgeblendet, aber
   sichtbar abgesetzt. Sie auszublenden hiesse zu behaupten, dort gäbe es
   das Merkmal nicht — und das wissen wir nicht. */
.data-table--matrix tr.vers-offen { opacity: .55; }
.data-table--matrix tr.vers-offen th[scope="row"] { font-weight: 400; }

@media (max-width: 640px) {
  .vers__liste { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Offline-Band
   Steht ganz oben und ist nicht zu übersehen. Es ist die einzige Stelle,
   an der die Seite zugibt, dass ihre Zahlen alt sein können — dann muss sie
   es auch deutlich tun.
   ========================================================================== */

.offlineband {
  position: relative;
  z-index: 60;
  background: var(--boje);
  color: #2A1D00;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  padding: .55rem 1rem;
  padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
}

/* Die Kopfleiste klebt oben; das Band muss über ihr stehen und darf sie
   nicht überdecken. */
.hat-offlineband .masthead { top: auto; }

@media print { .offlineband { display: none; } }

/* ==========================================================================
   Revier offline verfügbar machen
   ========================================================================== */

.ko {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Bricht der Knopf in eine eigene Zeile um, verteilt align-content die
     Zeilen sonst über die volle Höhe des Kastens — daher der grosse
     Leerraum zwischen Text und Knopf auf schmalen Geräten. */
  align-content: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 1.2rem 0 0;
  padding: 1.1rem 1.3rem;
  background: var(--gischt);
  border: 1px solid var(--linie);
  border-radius: 12px;
}
.ko[hidden] { display: none; }

.ko__text { flex: 1 1 320px; min-width: 0; }
.ko__h { font-size: 1.02rem; margin: 0 0 .3rem; }
.ko__d { margin: 0; font-size: .9rem; color: var(--grau); line-height: 1.5; }

.ko__stand { margin: .5rem 0 0; font-size: .88rem; font-weight: 600; }
.ko__stand--ok   { color: var(--ok-text); }
.ko__stand--warn { color: #8A6410; }

.ko__balken {
  margin-top: .6rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--schaum);
  overflow: hidden;
}
.ko__balken[hidden] { display: none; }
.ko__fuellung {
  display: block;
  height: 100%;
  width: 0;
  background: var(--fluss);
  border-radius: 999px;
  /* Kurz, aber nicht null: Ein Balken, der in Sprüngen springt, wirkt
     hakelig; einer mit langer Animation hinkt der Wahrheit hinterher. */
  transition: width .25s linear;
}

.ko__knoepfe {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ko__knoepfe button[hidden] { display: none; }

@media (max-width: 700px) {
  /* Kein Flexbox mehr, sondern schlicht untereinander.
     Mit flex-direction, justify-content und align-content liessen sich die
     Abstände zwar auch steuern, aber jeder dieser Werte kann den Kasten
     wieder auseinanderziehen. Bei einem Element, das ohnehin nur gestapelt
     wird, ist der einfache Fluss das Verlässlichere. */
  .ko { display: block; }
  .ko[hidden] { display: none; }

  .ko__text { margin-bottom: 1rem; }
  .ko__knoepfe { display: block; }
  .ko__knoepfe button { width: 100%; }
  .ko__knoepfe button + button { margin-top: .5rem; }
}

@media print { .ko { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ko__fuellung { transition: none; }
}

/* ==========================================================================
   Nachtmodus

   Zwei Wege hinein, in dieser Reihenfolge:
     1. Die Systemeinstellung des Geräts (prefers-color-scheme)
     2. Ein Schalter in der Menüschublade, der sie überschreibt

   Der Schalter setzt data-nacht am <html>. Steht dort nichts, entscheidet
   das System. So funktioniert es auch ohne JavaScript.

   Warum gedämpftes Blaugrau und nicht Schwarz: An Bord blendet ein weisser
   Bildschirm, ein reinschwarzer mit weisser Schrift flimmert dafür beim
   Lesen. Der mittlere Weg ist der augenschonendere.

   Umgeschaltet werden nur Rollen, nie einzelne Bauteile. Wenn eine Farbe
   hier fehlt, liegt sie noch fest im Blatt — dann gehört sie erst auf eine
   Rollenvariable, sonst wird der Nachtmodus zum Flickenteppich.
   ========================================================================== */

/* --- Die Werte --- */
:root[data-nacht="an"] {
  --flaeche-glas: rgba(20, 32, 43, .94);
  --flaeche-zart: rgba(34, 51, 67, .70);
  --flaeche:     #14202B;   /* Karten, Formulare, Seitengrund */
  --auf-farbe:   #F2F6F9;   /* Text auf farbigem oder dunklem Grund */
  --text:        #E4EDF4;   /* Fliesstext */
  --grau:        #9DB2C4;   /* gedämpfter Text — heller als am Tag */
  --grau-2:      #7A90A3;

  --tief:        #0A1721;   /* dunkle Flächen: noch dunkler als der Grund */
  --tief-2:      #142430;
  --tief-3:      #1B303E;

  --gischt:      #1A2833;   /* getönte Abschnitte */
  --schaum:      #223343;   /* hervorgehobene Flächen */
  --kalk:        #1E2A33;
  --sand:        #2A3B33;

  --fluss:       #57B4E8;   /* Verweise: heller, sonst kaum lesbar */
  --fahrwasser:  #6FCBF0;
  --tonne:       #FF6B75;
  --boje:        #F0BC5A;
  --steuerbord:  #4FC79C;

  --ok-text:     #6FD3AE;
  --warn-text:   #EFC169;
  --fehler-text: #FF8A93;
  --tinte:       #F2F6F9;   /* was am Tag schwarz ist, ist nachts hell */

  --linie:       rgba(226, 238, 247, .16);
  --linie-2:     rgba(226, 238, 247, .09);

  /* Schatten tragen im Dunkeln nicht — Tiefe entsteht über die Flächen. */
  --shadow-s: 0 1px 2px rgba(0,0,0,.4);
  --shadow-m: 0 2px 8px rgba(0,0,0,.45);
  --shadow-l: 0 20px 50px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* Ohne Schalter entscheidet das Gerät. */
@media (prefers-color-scheme: dark) {
  :root:not([data-nacht="aus"]) {
    --flaeche-glas: rgba(20, 32, 43, .94);
    --flaeche-zart: rgba(34, 51, 67, .70);
    --flaeche:     #14202B;
    --auf-farbe:   #F2F6F9;
    --text:        #E4EDF4;
    --grau:        #9DB2C4;
    --grau-2:      #7A90A3;

    --tief:        #0A1721;
    --tief-2:      #142430;
    --tief-3:      #1B303E;

    --gischt:      #1A2833;
    --schaum:      #223343;
    --kalk:        #1E2A33;
    --sand:        #2A3B33;

    --fluss:       #57B4E8;
    --fahrwasser:  #6FCBF0;
    --tonne:       #FF6B75;
    --boje:        #F0BC5A;
    --steuerbord:  #4FC79C;

    --ok-text:     #6FD3AE;
    --warn-text:   #EFC169;
    --fehler-text: #FF8A93;
    --tinte:       #F2F6F9;

    --linie:       rgba(226, 238, 247, .16);
    --linie-2:     rgba(226, 238, 247, .09);

    --shadow-s: 0 1px 2px rgba(0,0,0,.4);
    --shadow-m: 0 2px 8px rgba(0,0,0,.45);
    --shadow-l: 0 20px 50px rgba(0,0,0,.5);

    color-scheme: dark;
  }
}

/* --- Nachbesserungen, die keine Farbvariable abdeckt --- */

/* Bilder und Karten wirken im Dunkeln überstrahlt. Ein leichter Rückzug
   nimmt die Härte, ohne die Farben zu verfälschen. */
:root[data-nacht="an"] .card img,
:root[data-nacht="an"] .poi__bild img {
  filter: brightness(.92);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-nacht="aus"]) .card img,
  :root:not([data-nacht="aus"]) .poi__bild img {
    filter: brightness(.92);
  }
}

/* Der Schalter selbst */
.nachtschalter {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: inherit;
  /* Klein wie das Kleingedruckte drumherum: Der Schalter ist eine
     Einstellung, kein Aufruf zum Handeln. */
  font-size: .82rem;
  padding: .38rem .7rem;
  margin-top: .6rem;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.nachtschalter:hover { border-color: var(--fluss); }
/* In der Fusszeile steht er neben dem Kleingedruckten, nicht darüber.

   Und dort gilt die andere Rolle: Die Fusszeile ist immer dunkel, auch am
   Tag. --text ist tagsüber dunkelblau — der Knopf wäre dann unsichtbar.
   Auf dunklem Grund heisst die Rolle --auf-farbe. */
.footer__base-inner .nachtschalter {
  margin-top: 0;
  color: var(--auf-farbe);
  border-color: rgba(255, 255, 255, .28);
}
.footer__base-inner .nachtschalter:hover { border-color: var(--fahrwasser); }
.footer__base-inner .nachtschalter__zustand { color: rgba(255, 255, 255, .62); }
@media (max-width: 700px) {
  .footer__base-inner .nachtschalter { margin-top: .8rem; }
}
.nachtschalter__zustand {
  font-size: .78rem;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Bilder im Fliesstext
   Aufnahmen aus assets/img/schwebsange/. Die Kamera liefert 4:3; Breite und Hoehe
   stehen im Markup, damit beim Laden nichts springt (kein Layout-Shift).
   Im Druck bleiben sie weg — eine ausgedruckte Hafenseite braucht die Angaben,
   nicht sechs Fotos.                                                          */
.photofig--inline { margin: 1.5rem 0 1.9rem; }
.photofig--inline img { border-radius: 10px; }
.photofig--inline figcaption { font-size: .82rem; }

/* Zusatz hinter einem Wert in der Datenliste, z. B. „Kanal 11 an der Tankstelle" */
.poi__hinweis { color: var(--grau); font-size: .85em; }

@media print {
  .photofig--inline { display: none; }
}

/* ---------------------------------------------------------------- .spotlight, zweimal vergeben
   Es gibt zwei Kacheln dieses Namens: die dunkle Hinweiskachel (weiter oben,
   weisse Schrift auf --tief) und den hellen Aufmacher fuer das zuletzt
   eingestellte Boot (--flaeche, also weiss). Die zweite steht spaeter in der
   Datei und gewinnt bei gleicher Spezifitaet — sie ueberschreibt den dunklen
   Grund, laesst die Textfarben der ersten aber stehen. Ergebnis auf
   /haefen: weisse Schrift auf weissem Grund, Titel und Absatz unsichtbar.
   Im Dunkelmodus faellt es nicht auf, weil dort beide Flaechen dunkel sind.

   Die dunkle Kachel traegt deshalb jetzt zusaetzlich .spotlight--dunkel und
   holt sich hier zurueck, was ihr die zweite Definition genommen hat.        */
.spotlight--dunkel {
  grid-template-columns: 1.15fr .85fr;
  background: var(--tief);
  color: var(--auf-farbe);
  border: 0;
  box-shadow: none;
  margin-bottom: 0;
}
.spotlight--dunkel:hover { box-shadow: 0 14px 36px rgba(10, 37, 64, .22); }
.spotlight--dunkel .spotlight__media { min-height: 0; }
.spotlight--dunkel .spotlight__media img { position: static; }

@media (max-width: 900px) {
  .spotlight--dunkel { grid-template-columns: 1fr; }
  .spotlight--dunkel .spotlight__media { aspect-ratio: auto; }
}

/* Hochformat im Fliesstext: nicht auf Satzspiegelbreite ziehen, sonst wird das
   Bild fast einen Meter hoch. Mittig, begrenzt, Beschriftung darunter zentriert. */
.photofig--hoch { max-width: 420px; margin-left: auto; margin-right: auto; }
.photofig--hoch img { border-radius: 12px; }
.photofig--hoch figcaption { text-align: center; }
@media (max-width: 700px) { .photofig--hoch { max-width: 100%; } }

/* =============================================================
   Apps: Store-Knöpfe, Leiste in der Videobühne, Abschnitt #app
   =============================================================
   Die Knöpfe sind im Stil der offiziellen Store-Badges gebaut
   (schwarz, Logo, zweizeilig). Die iPhone-App ist bis zur Freigabe
   ein nicht klickbarer Hinweis ("Bald im App Store"); der Schalter
   dafür steht in includes/app.php (APP_IOS_LIVE).
   nautic.js setzt data-geraet="ios|android" am <html> — dann steht
   der passende Store vorne.
   ============================================================= */
.storebadges { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.storebadge {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 52px; padding: .45rem 1.05rem .45rem .8rem;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.35);
  background: #000; color: #fff; text-decoration: none; line-height: 1.1;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.storebadge:hover,
a.storebadge:focus-visible {
  color: #fff; transform: translateY(-2px);
  border-color: var(--fahrwasser);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 0 3px rgba(53,181,232,.25);
}
.storebadge__icon { width: 26px; height: 26px; flex: 0 0 auto; }
.storebadge__txt { display: flex; flex-direction: column; }
.storebadge__txt small {
  font-size: .66rem; letter-spacing: .02em; opacity: .85; white-space: nowrap;
}
.storebadge__txt b {
  font-family: var(--ff-body); font-size: 1.12rem; font-weight: 600;
  letter-spacing: -.01em; white-space: nowrap;
}
.storebadge.is-bald { opacity: .62; cursor: default; border-style: dashed; }
.storebadge.is-bald .storebadge__txt small { color: var(--boje); opacity: 1; font-weight: 600; }

html[data-geraet="ios"] .storebadge--ios { order: -1; }
html[data-geraet="android"] .storebadge--play { order: -1; }

.storebadges--klein { margin-top: .5rem; gap: .45rem; }
.storebadges--klein .storebadge { min-height: 42px; padding: .3rem .8rem .3rem .6rem; border-radius: 10px; }
.storebadges--klein .storebadge__icon { width: 20px; height: 20px; }
.storebadges--klein .storebadge__txt b { font-size: .92rem; }
.storebadges--klein .storebadge__txt small { font-size: .58rem; }
.footer__app { margin: 1.1rem 0 0; }

/* ---- Leiste in der Videobühne ---- */
.heroapp {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
  margin-top: .8rem; padding: .95rem 1.2rem;
  border: 1px solid rgba(53,181,232,.45);
  border-radius: var(--r-m);
  background: linear-gradient(100deg, rgba(10,37,64,.55), rgba(27,127,191,.35));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.heroapp__text { margin: 0; color: var(--auf-farbe); line-height: 1.5; }
.heroapp__text strong { display: block; font-size: 1rem; }
.heroapp__text span { display: block; font-size: .88rem; color: rgba(255,255,255,.8); max-width: 52ch; }
.heroapp__text a { color: var(--fahrwasser); white-space: nowrap; }
@media (max-width: 700px) {
  .heroapp { padding: .9rem 1rem; }
  .heroapp .storebadges { width: 100%; }
  .heroapp .storebadge { flex: 1 1 150px; justify-content: center; }
}

/* ---- Abschnitt #app ---- */
.appsec {
  position: relative; overflow: hidden;
  color: var(--auf-farbe);
  background:
    radial-gradient(120% 80% at 85% 10%, rgba(53,181,232,.35), transparent 60%),
    radial-gradient(90% 70% at 10% 100%, rgba(27,127,191,.45), transparent 65%),
    linear-gradient(170deg, var(--tief) 0%, #0d3a63 55%, #0f4c7d 100%);
}
.appsec::after {
  /* Wellenkante unten, im Ton des folgenden Abschnitts */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px;
  background: var(--flaeche);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C150 5 300 5 450 26 S750 48 900 24 S1100 4 1200 20 V48 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C150 5 300 5 450 26 S750 48 900 24 S1100 4 1200 20 V48 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.appsec__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 3rem; align-items: center;
  padding-bottom: 2.5rem;
}
.appsec h2 { color: var(--auf-farbe); margin-bottom: .6rem; }
.appsec__lead { color: rgba(255,255,255,.82); max-width: 56ch; margin: 0 0 1.6rem; }
.appsec__module {
  list-style: none; margin: 0 0 1.8rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.appsec__module li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.05rem; border-radius: var(--r-m);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.appsec__nr {
  flex: 0 0 auto; font-family: var(--ff-data); font-size: .75rem;
  color: var(--boje); padding-top: .2rem;
}
.appsec__module h3 { margin: 0 0 .25rem; font-size: 1.02rem; color: var(--auf-farbe); }
.appsec__module p { margin: 0; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.75); }
.appsec__privat {
  margin: .9rem 0 0; font-family: var(--ff-data); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fahrwasser);
}

.appsec__bild {
  position: relative; min-height: 460px;
  display: flex; justify-content: center; align-items: center;
}
.appsec__wellen {
  position: absolute; inset: 10% 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(53,181,232,.18) 0 2px, transparent 2px 26px);
  animation: appsec-puls 9s ease-in-out infinite;
}
@keyframes appsec-puls { 50% { transform: scale(1.06); opacity: .7; } }

.appphone {
  position: relative; width: 230px; aspect-ratio: 9 / 19.5;
  border-radius: 38px; padding: 9px;
  background: #0b0f14;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12), var(--shadow-l), 0 30px 80px rgba(0,0,0,.45);
}
.appphone img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
  border-radius: 30px;
}
.appphone--2, .appphone--3 { position: absolute; width: 190px; opacity: .92; }
.appphone--1 { z-index: 2; }
.appphone--2 { left: 2%; transform: rotate(-8deg) translateY(24px); z-index: 1; }
.appphone--3 { right: 2%; transform: rotate(8deg) translateY(24px); z-index: 1; }

.appphone--leer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  background:
    radial-gradient(80% 50% at 50% 100%, rgba(53,181,232,.45), transparent 70%),
    linear-gradient(180deg, #0d3a63, var(--tief));
  outline: 9px solid #0b0f14; outline-offset: -9px;
}
.appphone--leer img { width: 96px; height: auto; border-radius: 0; object-fit: contain; }
.appphone--leer span { font-family: var(--ff-display); font-weight: 800; font-size: 1.5rem; }
.appphone--leer small { font-family: var(--ff-data); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fahrwasser); }

@media (max-width: 960px) {
  .appsec__inner { grid-template-columns: 1fr; gap: 2rem; }
  .appsec__bild { min-height: 400px; order: -1; }
}
@media (max-width: 560px) {
  .appsec__module { grid-template-columns: 1fr; }
  .appsec__bild { min-height: 360px; }
  .appphone { width: 190px; }
  .appphone--2, .appphone--3 { width: 150px; }
  .appsec .storebadge { flex: 1 1 150px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .appsec__wellen { animation: none; }
  a.storebadge:hover { transform: none; }
}


/* =============================================================
   Kilometerband Desktop: Punkte AUF der Flusslinie + ziehbar
   =============================================================
   Vorher lag der Punkt 1,6 rem über der Linie: .kmtick endet
   selbst schon 1,6 rem über der Unterkante der Spur, und der Punkt
   stand noch einmal 1,6 rem darüber. Jetzt sitzt er mittig auf
   der Linie. Nur ab 1101 px — die Senkrechte bleibt unberührt. */
@media (min-width: 1101px) {

  .kmband__track::before {
    height: 5px; border-radius: 5px;
    bottom: calc(1.6rem - 2.5px);
    box-shadow: 0 0 10px rgba(53,181,232,.45);
  }
  .kmtick { padding-bottom: 1.4rem; }

  .kmtick__dot {
    bottom: 0;                               /* Mitte = Unterkante .kmtick = Linienmitte */
    width: 17px; height: 17px;
    border: 3px solid var(--tief);           /* stanzt die Linie aus */
    box-shadow: 0 0 0 2px var(--fahrwasser);
    z-index: 1;
  }
  .kmtick:hover .kmtick__dot {
    transform: translate(-50%, 50%) scale(1.3);
    box-shadow: 0 0 0 2px var(--fahrwasser), 0 0 0 7px rgba(53,181,232,.25);
  }
  /* Verbindungsstrich Zahl → Punkt, oberhalb des Punkts statt quer durch */
  .kmtick::after {
    bottom: 12px; height: 9px;
    transform: translateX(-50%);
    background: rgba(255,255,255,.35);
  }

  /* Scrollen sichtbar machen: weiche Kanten, Pfeile, Griff-Cursor */
  .kmband__rahmen { position: relative; }
  .kmband__scroll {
    cursor: grab;
    scrollbar-width: auto;
    scrollbar-color: rgba(53,181,232,.55) rgba(255,255,255,.06);
  }
  .kmband__scroll::-webkit-scrollbar { height: 8px; }
  .kmband__scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 4px; }
  .kmband__scroll::-webkit-scrollbar-thumb { background: rgba(53,181,232,.55); border-radius: 4px; }
  .kmband__scroll.is-ziehen { cursor: grabbing; user-select: none; }
  .kmband__scroll.is-ziehen .kmtick { pointer-events: none; }

  .kmband__rahmen::before,
  .kmband__rahmen::after {
    content: ""; position: absolute; top: 0; bottom: .5rem; width: 70px;
    pointer-events: none; z-index: 2; transition: opacity .2s;
  }
  .kmband__rahmen::before { left: 0;  background: linear-gradient(90deg, var(--tief), transparent); }
  .kmband__rahmen::after  { right: 0; background: linear-gradient(270deg, var(--tief), transparent); }
  .kmband__rahmen.am-anfang::before,
  .kmband__rahmen.am-ende::after { opacity: 0; }

  .kmband__pfeil {
    position: absolute; top: 50%; z-index: 3;
    transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(53,181,232,.6);
    background: rgba(10,25,45,.85); color: var(--fahrwasser);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
    transition: opacity .2s, background .2s;
  }
  .kmband__pfeil:hover { background: var(--fahrwasser); color: var(--tief); }
  .kmband__pfeil--l { left: -6px; }
  .kmband__pfeil--r { right: -6px; }
  .kmband__rahmen.am-anfang .kmband__pfeil--l,
  .kmband__rahmen.am-ende   .kmband__pfeil--r { opacity: 0; pointer-events: none; }
}
@media (max-width: 1100px) {
  .kmband__pfeil { display: none; }
}

/* Kilometerband Desktop: Zieh-Hinweis */
@media (min-width: 1101px) {
  .kmband__zieh {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    margin: .2rem auto 0; width: max-content;
    padding: .35rem .9rem; border-radius: 999px;
    border: 1px dashed rgba(53,181,232,.55);
    background: rgba(53,181,232,.08);
    color: var(--fahrwasser);
    font-family: var(--ff-data); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    cursor: grab; user-select: none;
    transition: opacity .4s, transform .4s;
  }
  .kmband__zieh svg { width: 18px; height: 18px; flex: none; animation: kmband-hand 1.8s ease-in-out infinite; }
  .kmband__zieh-pfeil { display: inline-block; animation: kmband-links 1.8s ease-in-out infinite; }
  .kmband__zieh-pfeil--r { animation-name: kmband-rechts; }
  .kmband__zieh.is-weg { opacity: 0; transform: translateY(-4px); pointer-events: none; }
  @keyframes kmband-hand   { 0%,100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
  @keyframes kmband-links  { 0%,100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(-4px); opacity: 1; } }
  @keyframes kmband-rechts { 0%,100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(4px); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .kmband__zieh svg, .kmband__zieh-pfeil { animation: none; }
  }
}
@media (max-width: 1100px) { .kmband__zieh { display: none; } }

/* =============================================================
   Verein: Motor Yacht Club Luxembourg (19.09.2026)
   Clubseite /mycl, Kasten auf der Funkseite, Kalender-Plakette,
   Kursband auf der Startseite, Karte auf der Schwebsange-Seite.
   Das eine laute Element ist der Kursplan auf dunklem Wasser mit
   seinen Bojen — alles andere bleibt im gewohnten Ton der Seite.
   ============================================================= */
[hidden].mycl-kasten, .mycl-kasten[hidden] { display: none; }

.mycl-plakette {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--boje); color: #0A2540;
  font-family: var(--ff-body); font-size: .8rem; font-weight: 700; line-height: 1;
  padding: .38rem .8rem .38rem .55rem; border-radius: 999px;
}
.mycl-plakette svg { flex: none; color: #fff7e0; }

/* ---------- Bühne ---------- */
.mycl-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(460px, 72vh, 700px);
  display: flex; align-items: flex-end;
  padding: 5rem 0 clamp(4.5rem, 9vw, 7rem);
  color: #fff;
  background: #0A2540;
}
.mycl-hero__bild, .mycl-hero__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
}
.mycl-hero__bild img { object-fit: cover; object-position: center 60%; }
.mycl-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,37,64,.10) 0%, rgba(10,37,64,.35) 45%, rgba(10,37,64,.88) 100%),
    linear-gradient(90deg, rgba(10,37,64,.55) 0%, rgba(10,37,64,0) 65%);
}
.mycl-hero--ohnebild {
  background:
    radial-gradient(120% 80% at 80% 110%, #1B7FBF 0%, rgba(27,127,191,0) 60%),
    radial-gradient(90% 70% at 10% 0%, #17415F 0%, rgba(23,65,95,0) 70%),
    #0A2540;
}
.mycl-hero__inhalt { position: relative; }
.mycl-hero__marke { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.mycl-hero__schild {
  display: inline-flex; background: #fff; border-radius: var(--r-m);
  padding: .55rem .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.mycl-hero__logo { display: block; height: 52px; width: auto; }
.mycl-hero h1 { color: #fff; max-width: 14ch; margin-bottom: .35em; }
.mycl-hero__lead { max-width: 40rem; font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: rgba(255,255,255,.88); }
.mycl-hero__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.mycl-btn--glas {
  color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mycl-btn--glas:hover { background: rgba(255,255,255,.18); color: #fff; }

.mycl-welle { position: absolute; left: 0; width: 100%; height: 46px; display: block; pointer-events: none; }
.mycl-welle path { fill: currentColor; }
.mycl-welle--hero { bottom: -1px; color: var(--flaeche); }
.mycl-welle--oben { top: -45px; color: var(--tief); }

.mycl-kopf { max-width: 46rem; margin-bottom: 2.2rem; }

/* ---------- Ausbildung ---------- */
.mycl-scheine__raster {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.mycl-schein {
  background: var(--flaeche); border: 1px solid var(--linie); border-top: 5px solid var(--fluss);
  border-radius: var(--r-s) var(--r-s) var(--r-m) var(--r-m);
  padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column;
}
.mycl-schein--cotier { border-top-color: var(--steuerbord); }
.mycl-schein--radio  { border-top-color: var(--boje); }
.mycl-schein h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.mycl-schein__was { font-weight: 500; margin-bottom: .6rem; }
.mycl-schein__wie { font-size: .93rem; color: var(--grau); }
.mycl-schein__preis { margin-top: auto; padding-top: 1rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem; }
.mycl-schein__preis .data { font-size: 1.7rem; font-weight: 500; color: var(--text); }
.mycl-schein__preis small { font-size: .82rem; color: var(--grau); }
.mycl-schein__naechst { font-size: .9rem; margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--linie-2); }
.mycl-scheine__fuss { max-width: 52rem; margin-top: 1.8rem; font-size: .93rem; color: var(--grau); }

/* ---------- Kursplan auf dunklem Wasser ---------- */
.mycl-plan { position: relative; background: var(--tief); color: #fff; margin-top: 45px; }
.mycl-plan h2 { color: #fff; }
.mycl-plan .lead { color: rgba(255,255,255,.78); }
.mycl-fahrplan { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.mycl-kurs {
  display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) auto; gap: 1.4rem;
  padding: 1.6rem 0; border-bottom: 1px solid rgba(255,255,255,.14);
  scroll-margin-top: calc(var(--kopf-h, var(--head-h)) + 20px);
}
.mycl-kurs:target { background: linear-gradient(90deg, rgba(53,181,232,.12), rgba(53,181,232,0)); }
.mycl-kurs__tag { text-align: center; padding-top: .15rem; }
.mycl-kurs__tagzahl { display: block; font-family: var(--ff-display); font-weight: 800; font-size: 2.7rem; line-height: .95; color: #fff; }
.mycl-kurs__monat { display: block; font-family: var(--ff-data); font-size: .8rem; color: var(--fahrwasser); margin-top: .25rem; }
.mycl-kurs h3 { color: #fff; font-size: 1.25rem; margin-bottom: .35rem; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.mycl-kurs__laeuft {
  font-family: var(--ff-body); font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: var(--steuerbord); color: #fff; padding: .22rem .6rem; border-radius: 999px;
}
.mycl-kurs__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: .9rem; color: rgba(255,255,255,.68); margin-bottom: .35rem; }
.mycl-kurs__meta strong { color: #fff; font-weight: 600; }
.mycl-kurs__zeit { font-size: .95rem; color: rgba(255,255,255,.88); margin: 0; }

.mycl-rinne { position: relative; display: flex; flex-wrap: wrap; gap: .2rem 0; margin-top: 1rem; }
.mycl-rinne__boje { position: relative; min-width: 4.6rem; padding-top: 1.35rem; }
.mycl-rinne__boje::before {           /* das Fahrwasser zwischen den Bojen */
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(111,203,240,.55) 0 6px, transparent 6px 11px);
}
.mycl-rinne__boje:last-child::before { right: auto; width: 14px; }
.mycl-rinne__boje::after {
  content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--fahrwasser); background: var(--tief); box-sizing: border-box;
}
.mycl-rinne__boje--vorbei::after { background: var(--fahrwasser); }
.mycl-rinne__boje--offen::after { border-style: dashed; opacity: .55; }
.mycl-rinne__boje span { display: block; font-family: var(--ff-data); font-size: .72rem; color: rgba(255,255,255,.7); white-space: nowrap; }

.mycl-kurs__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; text-align: right; }
.mycl-kurs__preis { font-size: 1.35rem; color: #fff; margin: 0; }
.mycl-kurs__kal { font-size: .82rem; color: var(--fahrwasser); }
.mycl-kurs__kal:hover { color: #fff; }
.mycl-kurs--laeuft .mycl-kurs__tagzahl { color: rgba(255,255,255,.6); }
.mycl-plan .mycl-quelle { color: rgba(255,255,255,.6); margin-top: 1.4rem; }
.mycl-plan .note { color: var(--text); }

.mycl-quelle { font-size: .84rem; color: var(--grau); }
.mycl-quelle--ende { text-align: center; }

/* ---------- Funk ---------- */
.mycl-funk__raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.mycl-funk__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.mycl-funk__daten { margin: 0; background: var(--gischt); border-radius: var(--r-m); padding: .4rem 1.3rem; }
.mycl-funk__daten > div { padding: .85rem 0; border-bottom: 1px solid var(--linie-2); }
.mycl-funk__daten > div:last-child { border-bottom: 0; }
.mycl-funk__daten dt { font-size: .82rem; color: var(--grau); }
.mycl-funk__daten dd { margin: .1rem 0 0; font-weight: 600; font-size: 1.05rem; }
.mycl-funk__frist dd { color: var(--tonne); }

/* ---------- Club ---------- */
.mycl-club__raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.mycl-club__unter { font-size: 1.1rem; margin-top: 1.8rem; }
.mycl-club__termine { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.mycl-club__termine li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.mycl-club__termine .data { font-size: .85rem; color: var(--grau); min-width: 6.5rem; }
.mycl-club__termine small { color: var(--grau); }
.mycl-club__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.mycl-kontakt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); padding: 1.4rem 1.5rem; }
.mycl-kontakt h3 { font-size: 1.15rem; }
.mycl-kontakt dl { margin: 0; }
.mycl-kontakt dl > div { padding: .65rem 0; border-bottom: 1px solid var(--linie-2); }
.mycl-kontakt dt { font-size: .8rem; color: var(--grau); }
.mycl-kontakt dd { margin: .15rem 0 0; font-size: .95rem; overflow-wrap: anywhere; }
.mycl-kontakt__hafen { font-size: .88rem; color: var(--grau); margin-top: 1rem; }

.mycl-galerie { display: grid; gap: .8rem; margin-top: clamp(2rem, 5vw, 3.2rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mycl-galerie--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mycl-galerie--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mycl-galerie--1 { grid-template-columns: minmax(0, 1fr); }
.mycl-galerie figure { margin: 0; }
.mycl-galerie img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); }
.mycl-galerie + .mycl-quelle { margin-top: .7rem; }

/* ---------- Kasten Funkseite / Kalender ---------- */
.mycl-kasten, .mycl-termin {
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); border-left: 5px solid var(--boje);
  border-radius: var(--r-m); padding: 1.2rem 1.4rem; margin: 1.8rem 0 0;
}
.mycl-kasten__kopf, .mycl-termin__kopf { display: flex; align-items: center; gap: 1rem; }
.mycl-kasten__logo, .mycl-termin__logo, .mycl-swkarte__logo {
  flex: none; height: 46px; width: auto; background: #fff; border-radius: var(--r-s); padding: .3rem .45rem;
}
.mycl-kasten__h { font-family: var(--ff-display); font-weight: 800; font-size: 1.12rem; margin: 0 0 .2rem; }
.mycl-kasten__d { font-size: .93rem; color: var(--grau); margin: 0; }
.mycl-kasten__liste { list-style: none; margin: 1rem 0 0; padding: 0; }
.mycl-kasten__liste li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .2rem 1rem; padding: .5rem 0; border-top: 1px solid var(--linie-2); font-size: .93rem; }
.mycl-kasten__liste span { color: var(--grau); }
.mycl-kasten__knoepfe, .mycl-termin__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.mycl-termin { margin: 0 0 1.6rem; }
.mycl-termin__club { margin: .35rem 0 0; font-weight: 700; }
.mycl-termin__club a { color: var(--text); text-decoration: none; }
.mycl-termin__club a:hover { color: var(--fluss); }
.mycl-termin__daten { margin: 1rem 0 0; }
.mycl-termin__daten > div { display: grid; grid-template-columns: 8rem 1fr; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--linie-2); font-size: .94rem; }
.mycl-termin__daten dt { color: var(--grau); }
.mycl-termin__daten dd { margin: 0; }

.termin__verein {
  display: inline-block; vertical-align: .12em; margin-left: .35rem;
  background: var(--boje); color: #0A2540; font-family: var(--ff-body);
  font-size: .68rem; font-weight: 700; padding: .16rem .5rem; border-radius: 999px;
}
.kalfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.kalfilter a {
  display: inline-flex; padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--linie);
  color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.kalfilter a:hover { border-color: var(--fluss); color: var(--fluss); }
.kalfilter a[aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--flaeche); }
.kalfilter__hinweis { font-size: .92rem; color: var(--grau); margin: -.4rem 0 1.4rem; }

/* ---------- Startseite: Kursband ---------- */
.kursband { background: linear-gradient(180deg, var(--schaum), var(--gischt)); }
.kursband__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
.kursband__text p { color: var(--tief-3); }
.kursband__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.kursband__liste a {
  display: flex; align-items: center; gap: 1.1rem; text-decoration: none; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); padding: .8rem 1.1rem;
}
.kursband__liste a:hover { border-color: var(--fluss); }
.kursband__tag { flex: none; width: 3.4rem; text-align: center; }
.kursband__tag b { display: block; font-family: var(--ff-display); font-size: 1.8rem; line-height: 1; }
.kursband__tag small { display: block; font-family: var(--ff-data); font-size: .72rem; color: var(--fluss); }
.kursband__inhalt strong { display: block; font-size: 1rem; }
.kursband__inhalt span { display: block; font-size: .86rem; color: var(--grau); }

/* ---------- Schwebsange ---------- */
.mycl-swkarte__logo { display: block; margin-bottom: .7rem; border: 1px solid var(--linie-2); }
.mycl-swkarte p { font-size: .93rem; }
.mycl-swkarte__naechst { color: var(--grau); }

/* ---------- Schmal ---------- */
@media (max-width: 860px) {
  .mycl-funk__raster, .mycl-club__raster, .kursband__raster { grid-template-columns: minmax(0, 1fr); }
  .mycl-galerie, .mycl-galerie--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .mycl-hero { min-height: 520px; padding-top: 3.5rem; }
  .mycl-hero__logo { height: 42px; }
  .mycl-kurs { grid-template-columns: 3.6rem minmax(0, 1fr); gap: .4rem 1rem; }
  .mycl-kurs__tagzahl { font-size: 2.1rem; }
  .mycl-kurs__rechts { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; text-align: left; gap: .5rem 1rem; margin-top: .6rem; }
  .mycl-rinne__boje { min-width: 4.1rem; }
  .mycl-termin__daten > div { grid-template-columns: 1fr; gap: .1rem; }
  .mycl-welle { height: 30px; }
  .mycl-welle--oben { top: -29px; }
  .mycl-plan { margin-top: 29px; }
}
/* Auf der Funkseite gelten .nfk p / .nfk a — dort gezielt zurücksetzen */
.nfk .mycl-kasten p { margin: 0; }
.nfk .mycl-kasten .mycl-kasten__h { margin-bottom: .2rem; }
.nfk .mycl-kasten .mycl-kasten__knoepfe { margin-top: 1rem; }
.nfk .mycl-kasten a.btn--primary { color: var(--auf-farbe); }
.nfk .mycl-kasten a.btn--ghost { color: var(--text); }
@media (max-width: 400px) {
  .mycl-rinne { gap: .7rem 0; }
  .mycl-rinne__boje { min-width: 3.5rem; }
}
/* Das MYCL-Logo ist weiss/gold und braucht dunklen Grund */
.mycl-hero__schild { background: #0A2540; border: 1px solid rgba(255,255,255,.28); }
.mycl-kasten__logo, .mycl-termin__logo, .mycl-swkarte__logo { background: #0A2540; border: 0; }
.mycl-hero__logo { height: 58px; }
/* ---------- Startseite: Club-Kachel in der Videobühne ---------- */
.heroclub {
  display: flex; align-items: center; gap: 1rem 1.3rem; flex-wrap: wrap;
  margin-top: .8rem; padding: .95rem 1.2rem;
  border: 1px solid rgba(224,162,27,.55); border-radius: var(--r-m);
  background: linear-gradient(100deg, rgba(10,37,64,.6), rgba(224,162,27,.18));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--auf-farbe); text-decoration: none;
}
.heroclub:hover { border-color: var(--boje); }
.heroclub__logo { flex: none; height: 44px; width: auto; }
.heroclub__text { flex: 1 1 18rem; line-height: 1.5; }
.heroclub__text strong { display: block; font-size: 1rem; }
.heroclub__text span { display: block; font-size: .88rem; color: rgba(255,255,255,.82); max-width: 56ch; }
.heroclub__knopf { flex: 0 0 auto; }
@media (max-width: 700px) {
  .heroclub { padding: .9rem 1rem; }
  .heroclub__knopf { width: 100%; justify-content: center; }
}