/* ITN Marina App 3.0 – Design „Klar“ (15.10.2026, Wunsch Jens: „aufgeräumt wie eine echte App, mit unseren Farben zum Umschalten“).
   Gilt NUR bei <html class="design-klar"> (Cookie kapp1_design=klar, gesetzt in assets/js/theme.js). Das bisherige Design
   („Klassisch“) bleibt unverändert. Grundsätze: eine Navigation (Reiter unten, überall), keine Leisten oben außer einer schlichten
   Kopfzeile, große Überschriften, viel Luft, weiße Karten auf hellgrauem Grund, eine Akzentfarbe (unser Blau).
   Wird NACH dark.css geladen und benutzt eigene Variablen, damit Hell/Dunkel weiter funktioniert. */

html.design-klar {
  --kl-bg: #f4f6f8; --kl-card: #ffffff; --kl-ink: #0f1e2e; --kl-muted: #5b6b7c; --kl-line: #e8edf1;
  --kl-accent: #0b6e91; --kl-accent-dark: #0b4f8a; --kl-accent-soft: #e3f0f5; --kl-wave: #00a8e8; --kl-on-accent: #ffffff;
  --kl-max: 1100px;   /* 15.10.2026 (Jens): am Rechner so breit wie das bisherige Design (.wrap 1100 px) – sonst ist z. B. die Karte zu klein */
}
html.design-klar[data-theme="dark"] {
  --kl-bg: var(--dk-bg, #0b141e); --kl-card: var(--dk-card, #13202d); --kl-ink: var(--dk-ink, #e6eef6); --kl-muted: var(--dk-muted, #9fb2c4);
  --kl-line: var(--dk-line, #22313f); --kl-accent: #3aa6cf; --kl-accent-dark: #2a8bb2; --kl-accent-soft: rgba(58,166,207,.16);
}

/* ── Grund und Inhaltsbreite: wie eine App, auch am Rechner mittig ─────────────────────────────────────────────── */
html.design-klar body { background: var(--kl-bg); color: var(--kl-ink); }
html.design-klar main.wrap { max-width: var(--kl-max); padding: 8px 20px 32px; }
html.design-klar h1 { font-size: 30px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; color: var(--kl-ink); margin: 6px 0 14px; }
html.design-klar h2, html.design-klar .sec-h { font-size: 18px; font-weight: 700; color: var(--kl-ink); }
html.design-klar .sec-h .ic { color: var(--kl-accent); }
html.design-klar .muted, html.design-klar small { color: var(--kl-muted); }

/* ── Kopf wie im bisherigen Design (Wunsch Jens 15.10.2026): Hafenzeile mit Sprache + Hell/Dunkel, darunter der blaue Balken
   mit ITN-Logo – nur ohne die Bereichsknöpfe oben (Navigation = Reiter unten) und auf die Inhaltsbreite ausgerichtet ──────── */
html.design-klar .ctxbar-in { max-width: var(--kl-max); }
html.design-klar .appbar-in { max-width: var(--kl-max); min-height: 54px; padding: 6px 14px; justify-content: flex-start; flex-wrap: nowrap; }
html.design-klar .appbar .cattabs, html.design-klar .appbar-menu { display: none; }
html.design-klar .appbar .brand { margin: 0; max-width: none; }
html.design-klar .appbar .icon-btn { position: static; }
html.design-klar .appbar .bell { margin-left: auto; }
html.design-klar .appbar-back { margin-right: 6px; }

/* ── Aktionen: statt Knopfreihe große Kacheln wie in einer App (4 nebeneinander) ──────────────────────────────── */
html.design-klar .actionbar { position: static; background: transparent; border: 0; box-shadow: none; padding: 0; }
html.design-klar .actionbar-in { max-width: var(--kl-max); margin: 0 auto; display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 30px) / 4); gap: 10px; padding: 8px 20px 6px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; }   /* mehr als 4 Aktionen: seitlich wischen statt zweiter Reihe */
html.design-klar .actionbar-in::-webkit-scrollbar { display: none; }
html.design-klar .actionbar .abtn { scroll-snap-align: start; }
html.design-klar .actionbar .abtn { display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--kl-ink); font-size: 12px; font-weight: 500; text-align: center; }
html.design-klar .actionbar .abtn .ic { box-sizing: content-box; width: 24px; height: 24px; padding: 15px; border-radius: 18px;
  background: var(--kl-card); color: var(--kl-accent); }
html.design-klar .actionbar .abtn span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
html.design-klar .actionbar .abtn-primary, html.design-klar .actionbar .abtn[aria-current] { background: transparent; color: var(--kl-ink); }
html.design-klar .actionbar .abtn-primary .ic { background: var(--kl-accent); color: var(--kl-on-accent); }
html.design-klar .actionbar .abtn[aria-current] .ic { outline: 2px solid var(--kl-accent); outline-offset: -2px; }
html.design-klar .actionbar .abtn-more { display: none; }
html.design-klar .actionbar .abtn-wide { display: flex; }

/* ── Reiter unten: die eine Navigation – auf jedem Gerät ─────────────────────────────────────────────────────── */
html.design-klar .tabbar { display: flex; position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--kl-max);
  bottom: 0; z-index: 950; background: var(--kl-card); border-top: 1px solid var(--kl-line);
  padding: 6px 4px calc(8px + var(--k1-safe-b, 0px)); box-sizing: border-box; }
html.design-klar .tab { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 3px 1px; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 500; color: var(--kl-muted);
  text-decoration: none; cursor: pointer; min-height: 48px; }
html.design-klar .tab-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 15px; }
html.design-klar .tab .ic { width: 22px; height: 22px; }
html.design-klar .tab-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.design-klar .tab.is-on { color: var(--kl-accent); font-weight: 600; }
html.design-klar .tab.is-on .tab-ic { background: var(--kl-accent-soft); }
html.design-klar .tab .badge { position: absolute; top: 0; right: calc(50% - 30px); }

/* ── Karten, Listen, Knöpfe ─────────────────────────────────────────────────────────────────────────────────── */
html.design-klar .card { background: var(--kl-card); border: 0; border-radius: 20px; box-shadow: none; padding: 18px; margin-bottom: 16px; }
html.design-klar .card-wave { border-top: 0; }
html.design-klar .list-item { border-bottom-color: var(--kl-line); padding: 14px 0; }
html.design-klar .list-item:last-child { border-bottom: 0; }
html.design-klar .li-ic { background: var(--kl-accent-soft); color: var(--kl-accent); border-radius: 12px; }
html.design-klar .btn { border-radius: 14px; font-weight: 600; box-shadow: none; }
html.design-klar .btn-primary, html.design-klar .btn-wave { background: var(--kl-accent); border-color: var(--kl-accent); color: var(--kl-on-accent); }
html.design-klar .btn-primary:hover, html.design-klar .btn-wave:hover { background: var(--kl-accent-dark); border-color: var(--kl-accent-dark); transform: none; box-shadow: none; }
html.design-klar .btn-light { background: var(--kl-card); color: var(--kl-accent); border-color: var(--kl-line); }
html.design-klar .fact, html.design-klar .panel-facts .fact { background: var(--kl-bg); border-radius: 14px; }
html.design-klar .info-box { border-left: 0; border-radius: 14px; background: var(--kl-accent-soft); color: var(--kl-ink); }
html.design-klar .tile-ic, html.design-klar .empty-ic { background: var(--kl-accent-soft); color: var(--kl-accent); }
html.design-klar .searchbar { border-radius: 16px; border-color: transparent; background: var(--kl-card); box-shadow: none; }

/* Willkommensbereich: ruhige Karte in unserem Blau statt Verlauf mit Wellen */
html.design-klar .hero { background: var(--kl-accent-dark); border-radius: 24px; box-shadow: none; text-align: left; padding: 22px 20px; margin: 4px 0 16px; }
html.design-klar .hero::before, html.design-klar .hero::after { display: none; }
html.design-klar .hero-inner { max-width: none; margin: 0; }
html.design-klar .hero .hero-title { font-size: 28px; letter-spacing: -.5px; margin: 0 0 8px; color: #ffffff; }
html.design-klar .hero-title span { color: #8fd9f5; }
html.design-klar .hero-sub { margin: 0 0 18px; max-width: none; font-size: 15px; line-height: 1.5; opacity: .9; }
html.design-klar .hero-actions { justify-content: flex-start; margin-bottom: 18px; }
html.design-klar .hero-actions .btn-wave { background: #ffffff; border-color: #ffffff; color: var(--kl-accent-dark); }
html.design-klar .hero-stats { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px 18px; }
/* 15.10.2026: Datum „20.11.2026“ lief am Handy über „Offene Anfragen“ – jede Kennzahl mind. so breit wie ihr Inhalt, sonst Umbruch */
html.design-klar .hero-stat-item { text-align: left; flex: 1 1 0; min-width: min-content; }   /* nie schmaler als die Zahl – sonst nächste Zeile */
html.design-klar .hero-stat-num { color: #ffffff; font-size: clamp(17px, 5vw, 22px); white-space: nowrap; }
html.design-klar .hero-stat-label { opacity: .8; letter-spacing: .4px; }

/* Abschnitte der Startseite (Sandstreifen) ruhiger */
html.design-klar .section-alt { background: transparent; box-shadow: none; clip-path: none; padding: 8px 0 0; }
html.design-klar .section-eyebrow { display: none; }
html.design-klar .section-title, html.design-klar .sec-title { font-size: 20px; text-align: left; letter-spacing: -.3px; }
html.design-klar .sec-intro { text-align: left; }

/* Fuß: leise */
html.design-klar .foot { background: transparent; border-top: 0; }
html.design-klar .foot-in { max-width: var(--kl-max); }

/* ── Modul „Hafen“ (Buchen, Rechnungen …): gleicher Grund, ruhige Karten ───────────────────────────────────── */
html.design-klar .fe-neu, html.design-klar body.fe-neu { background: var(--kl-bg); }
html.design-klar .mbn-hero, html.design-klar .mbn-sum, html.design-klar .mbn-tiles a { box-shadow: none; }

/* Umschalter im Menü › Darstellung: passende Beschriftung (gilt in beiden Designs) */
html:not(.design-klar) .sheet-design .dsg-lbl-klassisch, html.design-klar .sheet-design .dsg-lbl-klar { display: none; }
/* Im Design „Klar“ ist die untere Reiterleiste immer die Navigation – der alte Test-Umschalter entfällt dort */
html.design-klar .sheet-nav { display: none; }

/* Dunkel: die Regeln aus dark.css sind spezifischer (:root[data-theme="dark"] …) – für „Klar“ gleich stark nachziehen */
:root[data-theme="dark"].design-klar .card { background: var(--kl-card); border: 0; box-shadow: none; }
:root[data-theme="dark"].design-klar .tabbar { background: var(--kl-card); border-top-color: var(--kl-line); }
:root[data-theme="dark"].design-klar .actionbar { background: transparent; border: 0; }
:root[data-theme="dark"].design-klar .actionbar .abtn { background: transparent; color: var(--kl-ink); border: 0; }
:root[data-theme="dark"].design-klar .actionbar .abtn .ic { background: var(--kl-card); color: var(--kl-accent); }
:root[data-theme="dark"].design-klar .actionbar .abtn-primary .ic { background: var(--kl-accent); color: #ffffff; }
:root[data-theme="dark"].design-klar .hero { background: #10456b; }

/* Doppelte Wege im Inhalt (15.10.2026): Häfen – „Karte · Liste · Route planen · Seekarten“ stehen schon als Kacheln oben und in den
   Reitern unten; im bisherigen Design blendet map.css sie nur am Handy aus, in „Klar“ überall. Die echten Filter (.chips-filter) bleiben. */
html.design-klar .chips-nav { display: none; }

/* Breite Bildschirme: Aktionskacheln mit fester Breite links bündig statt über 1100 px verteilt */
@media (min-width: 700px) {
  html.design-klar .actionbar-in { grid-auto-columns: 104px; justify-content: start; }
}

/* ── Häfen am Handy (15.10.2026, Jens) ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Karte/Liste: die blaue Karte „Route planen“ entfällt – Route steht in den Kacheln und im Reiter Navigation */
  html.design-klar .route-cta { display: none; }
  /* Filter zum Aufklappen: Schnellfilter stecken jetzt in „Filter“ (guide.js) */
  html.design-klar .filters details > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
  html.design-klar .filters details > .chips-filter { margin: 8px 0 12px; }
  /* Karte und Liste zusammen: Häfen im sichtbaren Ausschnitt unter der Karte (harbors-map.js) */
  html.design-klar .map-list { display: block; margin-top: 14px; }
}
.map-list { display: none; }
html.design-klar .map-list-h { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
html.design-klar .map-list-n { color: var(--kl-muted); font-weight: 600; font-size: 15px; }
html.design-klar .map-list-ul { list-style: none; margin: 0 0 12px; padding: 0; background: var(--kl-card); border-radius: 20px; overflow: hidden; }
html.design-klar .map-list-ul li + li { border-top: 1px solid var(--kl-line); }
html.design-klar .map-list-a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-height: 44px; color: var(--kl-ink); text-decoration: none; }
html.design-klar .map-list-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
html.design-klar .map-list-txt strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.design-klar .map-list-tag { flex: none; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
html.design-klar .map-list-tag.is-fit { background: #e4f3e9; color: #1f6b3a; }

/* Hinweis „Karten für unterwegs speichern“ (gilt in beiden Designs) */
.offline-tip { display: flex; gap: 14px; align-items: flex-start; }
.offline-tip[hidden] { display: none; }
.offline-tip-ic { flex: none; display: inline-flex; width: 44px; height: 44px; border-radius: 14px; align-items: center; justify-content: center;
  background: #e3f0f5; color: #0b6e91; }
.offline-tip-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.offline-tip-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
html[data-theme="dark"] .offline-tip-ic { background: rgba(58,166,207,.16); color: #3aa6cf; }
html.design-klar .map-list-txt .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* lange Preistexte: eine Zeile */

/* Seekarten (Karten offline + Seezeichen): am Handy Knopf unter den Text – lange Reviernamen liefen unter den Knopf */
@media (max-width: 767.98px) {
  html.design-klar .chart-item { flex-wrap: wrap; }
  html.design-klar .chart-item .chart-body { flex: 1 1 100%; min-width: 0; }
  html.design-klar .chart-item .chart-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
}

/* Seekarten: Sprungknöpfe oben (gilt in beiden Designs) */
.charts-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.charts-jump .btn { justify-content: center; }
#karten, #seezeichen { scroll-margin-top: 16px; }