/* meteo365 v4 — Livecams
   Landing: Intro + Filter-Chips + Card-Grid.
   Akzent: --accent (Orange, Brand). KEIN --brand-cyan / --brand-deep fuer Akzente.
*/

.livecams-page {
  padding-block: 28px 56px;
}

/* ===== HERO (Text links auf Seiten-BG, Verlauf, Bild rechts) ===== */
.livecams-hero {
  position: relative;
  margin: 0 0 26px;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  min-height: 300px;
  display: flex;
  align-items: center;
}
.livecams-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1000px;
  max-width: 100%;
  z-index: -2;
  background-size: cover;
  background-position: center right;
}
/* Kein CSS-Verlauf mehr — der Blend ist in der transparenten PNG eingebacken. */
.livecams-hero__inner {
  position: relative;
  z-index: 1;
  padding: 36px 40px;
  max-width: 640px;
}
.livecams-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: #082636; /* nur Light-Mode; dark/blue siehe unten */
  /* Helles Foto laeuft bis unter die Schrift → heller Schleier hinter den
     dunklen Buchstaben. Siehe Messung im Kopfkommentar dieser Regel. */
  text-shadow: 0 1px 2px rgba(255, 255, 255, .85),
               0 2px 12px rgba(255, 255, 255, .65);
}
html[data-theme="dark"] .livecams-hero__title,
html[data-theme="dark"] .livecams-hero__title {
  color: var(--text);
  /* Dunkles Thema: helle Schrift braucht den dunklen Schleier. */
  text-shadow: 0 1px 2px rgba(3, 22, 32, .70),
               0 2px 14px rgba(3, 22, 32, .55);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .livecams-hero__title,
  html[data-theme="auto"] .livecams-hero__title {
    color: var(--text);
    text-shadow: 0 1px 2px rgba(3, 22, 32, .70),
                 0 2px 14px rgba(3, 22, 32, .55);
  }
}
.livecams-hero__lead {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.55;
}
.livecams-hero__count {
  display: inline-block;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .livecams-hero { min-height: 0; border-radius: 0; margin-bottom: 20px; }
  .livecams-hero__media { display: none; }
  .livecams-hero__inner { padding: 8px 0 0; max-width: none; }
}

/* ===== FILTER CHIPS ===== */
.livecams-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding-bottom: 4px;
}
.livecams-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
  white-space: nowrap;
}
.livecams-chip:hover {
  border-color: var(--accent);
}
.livecams-chip.is-active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.livecams-chip:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ===== GRID ===== */
.livecams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
@media (min-width: 900px) {
  .livecams-grid { gap: 22px; }
}
/* Werbefrei (Premium): der In-Feed-Banner trennte die erste Region von der
   nächsten. Ohne ihn hält dieser leere Platzhalter denselben Abstand
   (volle Breite + 24px wie der Ad-Slot), damit die Lücke bestehen bleibt. */
.livecams-feed-break { grid-column: 1 / -1; height: 0; margin: 24px 0; }

/* Karten-Zoom-Controls in der Startseiten-Optik (.map-btn): dieselben
   --map-control-* Tokens (Lagune-Verlauf, weißes Icon, Glas-Blur). Der
   Livecams-Kartenmodus nutzt den Default-MapLibre-NavigationControl — hier
   nur eingefärbt, nicht ersetzt. */
.livecams-map .maplibregl-ctrl-group {
  background: var(--map-control-bg);
  -webkit-backdrop-filter: var(--map-control-blur);
  backdrop-filter: var(--map-control-blur);
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 24px rgba(4, 39, 58, .24);
}
.livecams-map .maplibregl-ctrl-group button {
  width: 40px; height: 40px;
  background: transparent;
  border: 0;
}
.livecams-map .maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.livecams-map .maplibregl-ctrl-group button:hover {
  background: var(--map-control-bg-hover);
}
.livecams-map .maplibregl-ctrl-group button:disabled { opacity: .45; }
/* Die dunklen +/−-Icons (background-image der Span) auf Weiß zwingen. */
.livecams-map .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: brightness(0) invert(1);
}

/* ===== CARD ===== */
.livecam-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.livecam-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent-soft-border);
}
.livecam-card[hidden] { display: none; }

.livecam-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.livecam-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg);
}
.livecam-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.livecam-card:hover .livecam-card__thumb {
  transform: scale(1.04);
}

/* LIVE-Badge */
.livecam-card__live {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  padding: 4px 9px 4px 8px;
  border-radius: var(--radius-pill);
}
.livecam-card__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4848;
  box-shadow: 0 0 0 0 rgba(255, 72, 72, .55);
  animation: livecam-pulse 1.6s ease-out infinite;
}
@keyframes livecam-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 72, 72, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 72, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 72, 72, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .livecam-card__live-dot { animation: none; }
  .livecam-card:hover .livecam-card__thumb { transform: none; }
}

.livecam-card__body {
  padding: 12px 14px 14px;
  display: grid;
  gap: 4px;
}
.livecam-card__location {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.livecam-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== DETAIL: BACK ===== */
/* Neon-Pille */
.livecam-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #eafaff;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.6px solid transparent;
  background:
    linear-gradient(rgba(6, 14, 24, .62), rgba(6, 14, 24, .62)) padding-box,
    linear-gradient(90deg, #37a8ce, #68c2e3) border-box;
  box-shadow: 0 0 16px rgba(104, 194, 227, .30);
  text-shadow: 0 0 8px rgba(104, 194, 227, .40);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.livecam-back:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(34, 226, 255, .65), 0 0 22px rgba(255, 45, 155, .45);
}
.livecam-back:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .livecam-back { transition: none; } .livecam-back:hover { transform: none; } }

/* ===== DETAIL: HEADER ===== */
.livecam-detail { padding-block: 20px 56px; }

/* Schnellzugriff-Buttons unter dem Player */
.livecam-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.lcj-btn {
  --lcj-blue: #37a8ce;   /* Blau 400 (Skala: 300 #68c2e3 · 500 #1f8fd0) */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--lcj-blue);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.lcj-btn svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--lcj-blue); }
.lcj-btn:hover { border-color: #68c2e3; background: rgba(55, 168, 206, .12); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.lcj-btn:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .lcj-btn { transition: none; } .lcj-btn:hover { transform: none; } }

/* 3-Spalten-Layout: Mittelspalte bleibt 1200px, Sticky-Werbe-Sidebars nur wenn
   daneben genug Platz ist (1200 + 2×280 + Gaps ≈ 1808px). */
.lc-grid { display: block; }
.lc-main { min-width: 0; }
.lc-rail { display: none; }
.ads-slot--leaderboard { margin: 8px auto 6px; text-align: center; min-height: 90px; }
@media (min-width: 1840px) {
  .livecam-detail { --container: 1808px; }
  .livecam-detail .ads-slot--leaderboard { display: none; }   /* entweder Top-Banner ODER Sidebars */
  .lc-grid { display: grid; grid-template-columns: 280px 1200px 280px; gap: 24px; justify-content: center; align-items: stretch; }
  .lc-rail { display: block; }
  .lc-rail__inner { position: sticky; top: 92px; }
  .lc-rail .ads-slot { margin: 0; min-height: 600px; }
  .lc-rail .ads-slot .adsbygoogle { display: block; min-height: 600px; }
}
.livecam-detail__header {
  margin: 0 0 18px;
  display: grid;
  gap: 4px;
}
.livecam-detail__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.livecam-detail__subtitle {
  margin: 8px 0 0;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  max-width: 720px;
  line-height: 1.5;
  color: var(--a200, #a1daee);   /* solide Lagune-Toenung statt Farbverlauf-Text (User-Wunsch 2026-07-16) */
}

/* ===== DETAIL: gestapelt (Player → Werbung → Gemessene Werte) ===== */
.livecam-player-wrap { margin: 0 0 8px; }
.livecam-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 0; }
.livecam-actions .livecam-forecast-cta { margin: 0; }
.livecam-actions .livecam-link { margin: 0; }

/* Gemessene Werte (Stations-Karte) */
.livecam-weather {
  position: relative;
  overflow: hidden;
  /* Himmel-zu-Meer-Verlauf (wie Startseiten-Panels) + Glas-Kante */
  background: linear-gradient(180deg, rgba(19, 122, 162, .55), rgba(13, 80, 110, .6), rgba(10, 65, 93, .82));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 18px 22px;
  max-width: 720px;
  margin: 24px 0 0;
}
/* Leuchtturm-Hintergrund entfernt 2026-07-06 → gesichert in assets/v4/_archive/livecam-lighthouse.md */
.livecam-weather__title, .livecam-weather__body { position: relative; z-index: 1; }

/* „als Bild herunterladen": Pille oben rechts. Klick baut die teilbare Marken-
   Karte (MeteoShareCard) als PNG — 1080×1080, rendert geräteunabhängig gleich. */
.lcw-shot {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .08); color: var(--text);
  font-size: 12px; font-weight: 600;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s;
}
.lcw-shot:hover { background: rgba(255, 255, 255, .16); }
.lcw-shot:disabled { opacity: .6; cursor: default; }
.lcw-shot svg { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 560px) { .lcw-shot span { display: none; } .lcw-shot:disabled span { display: inline; } .lcw-shot { padding: 7px; } }
/* Wind-Flow-Hintergrund — nur oberer Messwert-Block */
.lcw-top { position: relative; overflow: hidden; }
.lcw-wind { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lcw-top > .lcw-head,
.lcw-top > .lcw-hrule,
.lcw-top > .lcw-hero,
.lcw-top > .lcw-gauge,
.lcw-top > .lcw-bft,
.lcw-top > .lcw-chips { position: relative; z-index: 1; }
.livecam-weather__title {
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
/* Live-Punkt vor dem Titel — blau, pulst ab und zu */
.livecam-weather__title::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: #68c2e3; box-shadow: 0 0 0 0 rgba(104,194,227,.55);
  animation: lcw-title-pulse 5s ease-out infinite;
}
@keyframes lcw-title-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(104,194,227,.55); }
  26%  { box-shadow: 0 0 0 7px rgba(104,194,227,0); }
  100% { box-shadow: 0 0 0 0 rgba(104,194,227,0); }
}
@media (prefers-reduced-motion: reduce) { .livecam-weather__title::before { animation: none; } }
.lcw-src { margin: -8px 0 14px; font-size: 11.5px; color: var(--muted); }
.lcw-src b { font-weight: 700; color: var(--text); }
.livecam-weather__loading { color: var(--muted); font-size: 14px; }
.livecam-weather__err { color: var(--muted); font-size: 13px; }
/* Windrichtung im Messwerte-Kopf: eine lange Richtung („from the east-southeast")
   macht den Windblock sonst zu breit → er rutscht in eine eigene Zeile. Auf der
   Cam-Seite steht der Kopf im schmalen 2-Spalten-Bereich; darum den Richtungstext
   umbrechen lassen und die Textspalte cappen, damit der Block kompakt bleibt und in
   der Zeile steht. Nur cam-seitig gescoped — /wetterstationen/ und forecast.php
   (breiter Hero) behalten die einzeilige Anzeige der geteilten Komponente. */
.livecam-weather .msv-wind-card { white-space: normal; }
.livecam-weather .msv-hero-windtxt { max-width: 160px; }
/* ---- Aktuell-Widget (Messwerte · Redesign 2026-07) ---- */
.lcw-head { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0 0 11px; }
/* Trennstrich unter dem Datum: links Linie, ab der Hälfte auslaufend transparent */
.lcw-hrule { height: 1px; margin: 0 0 15px; background: linear-gradient(90deg, color-mix(in srgb, var(--text) 22%, transparent) 0%, color-mix(in srgb, var(--text) 22%, transparent) 42%, transparent 100%); }
.lcw-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 2px 8px 2px 7px; border-radius: var(--radius-pill); }
.lcw-badge::before { content: ''; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; animation: lcw-pulse 2s infinite; }
@keyframes lcw-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow: 0 0 0 5px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.lcw-station { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -.01em; line-height: 1.1; }
.lcw-measured { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.lcw-measured svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
.lcw-measured__lbl { font-weight: 600; }
.lcw-measured time { color: var(--text); font-variant-numeric: tabular-nums; }
.lcw-dist { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.lcw-dist.is-near { color: #1e8e4e; }

.lcw-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lcw-hero__main { flex: 1 1 260px; min-width: 0; }
.lcw-hero__aside { display: flex; flex-direction: column; gap: 14px; }
.lcw-hero__windrow { display: flex; align-items: center; gap: 22px; }
.lcw-hero__aside .lcw-bft { margin: 0; }
.lcw-hero__templbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.lcw-hero__temprow { display: flex; align-items: center; gap: 11px; }
/* Wind/Böen-Kasten — Chart-Farben (Wind #5aa02c, Böen #0e9e6e) */
.lcw-wg { display: flex; flex-direction: column; gap: 22px; min-width: 132px; }
.lcw-wg__item { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.lcw-wg__item svg { width: 24px; height: 24px; flex: 0 0 auto; }
.lcw-wg__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lcw-wg__item small { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lcw-wg__item b { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.lcw-wg__item b i { font-size: 11px; font-weight: 600; font-style: normal; color: var(--muted); margin-left: 2px; }
.lcw-wg__item.is-wind { --acc: #5aa02c; background: rgba(90,160,44,.10); }
.lcw-wg__item.is-wind svg, .lcw-wg__item.is-wind b { color: #5aa02c; }
.lcw-wg__item.is-gust { --acc: #0e9e6e; background: rgba(14,158,110,.10); }
.lcw-wg__item.is-gust svg, .lcw-wg__item.is-gust b { color: #0e9e6e; }
.lcw-hero__temp { font-family: var(--font-display); font-weight: 600; font-size: 54px; line-height: .92; color: var(--text); letter-spacing: -.02em; }
/* Temperatur im Kasten (abgerundet, Hintergrund = Temperatur-Farbe) */
.lcw-hero__tempbox { display: inline-flex; align-items: baseline; padding: 8px 16px; border-radius: 18px; border: 1.5px solid transparent; }
.lcw-hero__tempbox .lcw-hero__temp { font-size: 44px; line-height: 1; color: inherit; }
.lcw-hero__tempbox .lcw-hero__unit { font-size: 18px; color: inherit; opacity: .8; margin-left: 2px; }

/* Animiertes Thermometer */
.lcw-therm { width: 22px; height: 46px; flex: 0 0 auto; display: block; }
.lcw-therm__tube { fill: none; stroke: var(--line); stroke-width: 2; }
.lcw-therm__bulb { fill: var(--accent); }
.lcw-therm__col { fill: var(--accent); transform-box: fill-box; transform-origin: bottom; animation: lcw-therm-in .8s ease-out both, lcw-therm 8s ease-in-out 1.2s infinite; }
@keyframes lcw-therm-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lcw-therm { 0%, 68%, 100% { transform: scaleY(1); } 80% { transform: scaleY(1.09); } 90% { transform: scaleY(.99); } }
@media (prefers-reduced-motion: reduce) { .lcw-therm__col { animation: none; } }
.lcw-hero__unit { font-size: 22px; font-weight: 600; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.lcw-hero__feels { margin-top: 12px; font-size: 13px; color: var(--muted); }
.lcw-hero__feels b { color: #68c2e3; font-weight: 800; }
/* Temperatur-Regler (Farbskala + Knopf, adaptives Fenster) */
.lcw-gauge { max-width: none; width: calc(100% - 70px); margin: 16px 0 2px; }   /* linke Spalte, 70px schmaler */
.lcw-gauge__bar { position: relative; height: 8px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.lcw-gauge__knob { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--k); border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.18), 0 0 10px 1px var(--k); }
.lcw-gauge__labels { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 7px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lcw-gauge__mid { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 600; color: var(--text); }   /* folgt der Knopf-Position (left inline aus JS) */
/* Temperatur-Trend (Δ letzte ~3 h) */
.lcw-trend { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lcw-trend svg { width: 15px; height: 15px; flex: 0 0 auto; }
.lcw-trend.is-up { color: #f2820c; }
.lcw-trend.is-down { color: #37a8ce; }
.lcw-trend b { font-variant-numeric: tabular-nums; }
.lcw-trend span { color: var(--muted); font-weight: 500; }
.lcw-hero__temp { transition: color var(--t) var(--ease), text-shadow var(--t) var(--ease); }
.lcw-hero__sub { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* Windkompass (Farbe Beaufort-getönt, inline gesetzt) */
.lcw-cmp { position: relative; width: 130px; height: 130px; flex: 0 0 auto; }
.lcw-cmp__svg { width: 100%; height: 100%; display: block; }
.lcw-cmp__card { fill: var(--muted); font-size: 9px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; font-family: var(--font-sans); }
.lcw-cmp__card.is-n { fill: var(--text); font-size: 11px; font-weight: 800; }
.lcw-cmp__stem { stroke-width: 2.4; stroke-linecap: round; }
.lcw-cmp__head { stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(0,0,0,.5)); }
.lcw-cmp__read { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.lcw-cmp__read b { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: .01em; }
.lcw-cmp__read b.is-calm { color: var(--muted); font-weight: 600; }
.lcw-cmp__read span { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 3px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* Beaufort */
.lcw-bft { margin: 18px 0 0; }
.lcw-bft__top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.lcw-bft__num { font-size: 11px; font-weight: 800; color: #fff; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.lcw-bft__lbl { font-size: 13px; font-weight: 600; color: var(--text); }
.lcw-bft__scale { display: flex; gap: 3px; }
.lcw-bft__seg { flex: 1; height: 6px; border-radius: 3px; background: var(--line); transition: background var(--t) var(--ease); }

/* Metrik-Chips */
.lcw-chips { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 12px 8px; }
.lcw-chips li { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: rgba(128,140,160,.07); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lcw-chips svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--muted); }
/* Leuchtende Border-Leiste unten: Mitte hell, Seiten transparent + Schein */
.lcw-chips li::after, .lcw-wg__item::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--acc, var(--line)) 50%, transparent 100%);
  box-shadow: 0 0 8px var(--acc, transparent); pointer-events: none;
}
/* Kachel-Farben nach Metrik (Chart-Palette) */
.lcw-chips li.is-gust  { background: rgba(14,158,110,.08); --acc: #0e9e6e; }
.lcw-chips li.is-gust  svg { color: #0e9e6e; }
.lcw-chips li.is-hum   { background: rgba(104,194,227,.09); --acc: #68c2e3; }
.lcw-chips li.is-hum   svg { color: #68c2e3; }
.lcw-chips li.is-dew   { background: rgba(225,29,116,.08); --acc: var(--accent-alt); }
.lcw-chips li.is-dew   svg { color: var(--accent-alt); }
.lcw-chips li.is-press { background: rgba(104,194,227,.10); --acc: #68c2e3; }
.lcw-chips li.is-press svg { color: #68c2e3; }
.lcw-chips li.is-rain  { background: rgba(21,141,189,.09); --acc: #158dbd; }
.lcw-chips li.is-rain  svg { color: #158dbd; }
.lcw-chips__v { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lcw-chips__v b { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.lcw-chips__v b i { font-size: 13px; font-weight: 600; font-style: normal; color: var(--muted); margin-left: 2px; }
.lcw-chips__v small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* 6-h-Verlaufs-Chart (Regen-Bars hinten + Temp/Wind/Böen-Linien, Pille pro Punkt) */
.lcw-chart { --c-temp: var(--accent); --c-wind: #5aa02c; --c-gust: #0e9e6e; --c-rain: #158dbd;
  position: relative; margin: 20px 0 0; padding: 17px 0 0; }
/* Trennlinie über der Überschrift: in der Mitte kräftig, außen auslaufend */
.lcw-chart::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text) 42%, transparent) 50%, transparent 100%);
}
/* Kästchen-Raster im Chart-Hintergrund (horizontal kräftiger, vertikal dezenter) */
.lcw-grid-h { stroke: color-mix(in srgb, var(--text) 5%, transparent); stroke-width: 1; }
.lcw-grid-v { stroke: color-mix(in srgb, var(--text) 3%, transparent); stroke-width: 1; }
.lcw-chart__head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.lcw-chart__title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: auto; }
.lcw-chart__cvs { display: inline-flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.lcw-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--muted); }
.lcw-lg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lcw-lg.is-temp i { background: var(--c-temp); }
.lcw-lg.is-wind i { background: var(--c-wind); }
.lcw-lg.is-gust i { background: var(--c-gust); }
.lcw-lg.is-rain i { background: var(--c-rain); }
.lcw-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.lcw-ln { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.lcw-ln.is-temp { stroke: var(--c-temp); }
.lcw-ln.is-wind { stroke: var(--c-wind); }
.lcw-ln.is-gust { stroke: var(--c-gust); stroke-dasharray: 5 4; }
.lcw-ln__dot { fill: var(--surface); stroke-width: 1.5; }
.lcw-ln__dot.is-temp { stroke: var(--c-temp); }
.lcw-ln__dot.is-wind { stroke: var(--c-wind); }
.lcw-ln__dot.is-gust { stroke: var(--c-gust); }
.lcw-ln__dot.is-last.is-temp { fill: var(--c-temp); }
.lcw-ln__dot.is-last.is-wind { fill: var(--c-wind); }
.lcw-ln__dot.is-last.is-gust { fill: var(--c-gust); }
/* Punkt-Pillen */
.lcw-pp.is-temp { fill: var(--c-temp); }
.lcw-pp.is-wind { fill: var(--c-wind); }
.lcw-pp.is-gust { fill: var(--c-gust); }
.lcw-pp__t { fill: #fff; font-size: 10px; font-weight: 700; text-anchor: middle; font-family: var(--font-sans); }
/* Regen-Bars */
.lcw-rain { } /* Fill = vertikaler Blau-Verlauf (inline url(#…rain)) */
.lcw-rain__v { fill: var(--c-rain); font-size: 10px; font-weight: 700; text-anchor: middle; font-family: var(--font-sans); }
.lcw-chart__lbl { fill: var(--muted); font-size: 9px; text-anchor: middle; font-family: var(--font-sans); }

/* Prognose (ICON-EU) */
.livecam-forecast, .livecam-waves { max-width: 720px; margin: 24px 0 0; }
.livecam-forecast__title, .livecam-waves__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Gezeiten (FES2022) */
.livecam-tides { max-width: 720px; margin: 24px 0 0; }
.livecam-tides__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Zeitraffer-Sektion (fertiges 24h-mp4) — Lagune-Glass-Karte wie .livecam-weather.
   Der Wrap trägt das Seitenverhältnis der Cam (inline); object-fit:contain passt ein
   evtl. abweichendes mp4-Format ohne Beschnitt ein. */
.livecam-timelapse {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(19, 122, 162, .55), rgba(13, 80, 110, .6), rgba(10, 65, 93, .82));
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 18px 22px 20px; max-width: 1024px; margin: 24px 0 0;
}
.lctl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.lctl-head .livecam-timelapse__title { margin: 0; }
.lctl-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(104, 194, 227, .16); border: 1px solid rgba(104, 194, 227, .42);
  color: #cbe9f4; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.lctl-badge svg { width: 13px; height: 13px; }
.livecam-timelapse__wrap {
  position: relative; overflow: hidden; border-radius: 12px; background: #05161f;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 8px 22px rgba(4, 39, 58, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.livecam-timelapse__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #05161f; }
.lctl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 12px; }
.livecam-timelapse__note {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; font-size: 12px; color: #bcdcf2;
}
.livecam-timelapse__note svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .85; }
.lctl-more {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(104, 194, 227, .14); border: 1px solid rgba(104, 194, 227, .42);
  color: #cbe9f4; font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: background var(--t) var(--ease);
}
.lctl-more:hover { background: rgba(104, 194, 227, .26); }
.lctl-more svg { width: 14px; height: 14px; }
.lct { display: flex; flex-direction: column; gap: 14px; }
.lct-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.lct-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lct-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 28%, transparent); }
.lct-row__ic, .lct-row__ic svg { width: 16px; height: 16px; display: block; }
.lct-row.is-h .lct-row__ic, .lct-row.is-h .lct-row__lbl { color: #68c2e3; }
.lct-row.is-l .lct-row__ic, .lct-row.is-l .lct-row__lbl { color: #5fb39a; }
.lct-row__lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.lct-row__time { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.lct-row__h { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lct-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.lct-next { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.lct-next b { color: var(--text); font-variant-numeric: tabular-nums; }
.lct-next__ic, .lct-next__ic svg { width: 15px; height: 15px; display: block; }
.lct-next.is-h .lct-next__ic { color: #68c2e3; }
.lct-next.is-l .lct-next__ic { color: #5fb39a; }
.lct-range { font-size: 11.5px; color: var(--muted); }
.lct-range b { color: var(--text); font-variant-numeric: tabular-nums; }
.lct-chart { width: 100%; height: auto; display: block; }
.lct-line { fill: none; stroke: #68c2e3; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lct-zero { stroke: var(--text); stroke-opacity: .18; stroke-dasharray: 3 3; stroke-width: 1; }
.lct-zero__t { fill: var(--muted); font-size: 9px; text-anchor: end; opacity: .7; }
.lct-day { stroke: var(--text); stroke-opacity: .12; stroke-width: 1; }
.lct-tick { stroke: var(--text); stroke-opacity: .05; stroke-width: 1; }
.lct-hr { fill: var(--muted); font-size: 8px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.lct-daylbl { fill: var(--muted); font-size: 8.5px; font-weight: 700; }
.lct-ex { stroke: var(--surface); stroke-width: 1.5; }
.lct-ex.is-h { fill: #68c2e3; }
.lct-ex.is-l { fill: #5fb39a; }
.lct-ex__t { fill: var(--muted); font-size: 7.5px; text-anchor: middle; font-variant-numeric: tabular-nums; }
/* „aktuell"-Marker FEST blau (#1573ad, Marken-Blau 500) statt --accent-alt:
   letzteres ist je nach data-cam-theme Magenta oder Blau → sah pro Browser anders
   aus. Fest blau ist konsistent und passt zum blauen Gezeiten-Chart. */
.lct-now { stroke: #1573ad; stroke-width: 1.5; stroke-dasharray: 2 2; stroke-opacity: .85; }
.lct-now__dot { fill: #1573ad; stroke: var(--surface); stroke-width: 2; }
.lct-now__pill { fill: #1573ad; }
.lct-now__t { fill: #fff; font-size: 10px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
/* Hover-Tooltip (nur Desktop; Maus über der Kurve) */
.lct-hov { stroke: var(--text); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.lct-hov__dot { fill: #fff; stroke: #1573ad; stroke-width: 2; pointer-events: none; }
.lct-hov__pill { fill: rgba(8, 49, 69, .94); pointer-events: none; }
.lct-hov__t { fill: #fff; font-size: 9px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; pointer-events: none; }
.lct-hit { fill: transparent; pointer-events: all; cursor: crosshair; }
.lct-foot { margin: 0; font-size: 10.5px; color: var(--muted); opacity: .85; }
.lct-chart text { font-family: var(--font-sans); }

/* Hafen — nächste Kreuzfahrtschiffe */
.livecam-port { max-width: 720px; margin: 24px 0 0; }
.livecam-port__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lcps-lede { font-size: 11.5px; color: var(--muted); margin: 0 0 8px; }
.lcps-list { display: grid; gap: 8px; }
.lcps { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.lcps.is-in { border-color: var(--accent-soft-border); background: var(--accent-soft-bg); }
.lcps__ic { flex: 0 0 auto; color: #68c2e3; }
.lcps__ic svg { width: 24px; height: 24px; display: block; }
.lcps__body { min-width: 0; flex: 1 1 auto; }
.lcps__top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.lcps__flag { font-size: 15px; line-height: 1; }
.lcps__name { font-size: 14px; font-weight: 700; color: var(--text); }
.lcps__badge { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 1px 6px; border-radius: var(--radius-pill); }
.lcps__date { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.lcps__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lcps__meta i { font-style: normal; opacity: .5; margin: 0 1px; }

/* Sonne (Auf-/Untergang) */
.livecam-sun { max-width: 720px; margin: 24px 0 0; }
.livecam-sun[hidden] { display: none; }
.livecam-sun__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lcsun { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 14px 16px 12px; }
.lcsun__svg { width: 100%; height: auto; display: block; max-height: 130px; }
.lcsun__horizon { stroke: var(--line); stroke-width: 1.5; }
.lcsun__track { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 4; stroke-linecap: round; }
.lcsun__done { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.lcsun__dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--glow)); }
.lcsun__dot.is-night { fill: var(--muted); filter: none; }
.lcsun__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.lcsun__t { display: flex; align-items: center; gap: 7px; }
.lcsun__ic { color: var(--accent); flex: 0 0 auto; }
.lcsun__ic svg { width: 20px; height: 20px; display: block; }
.lcsun__t--set .lcsun__ic { color: var(--accent-alt); }
.lcsun__lbl { font-size: 12.5px; color: var(--muted); }
.lcsun__t b { font-size: 15px; font-weight: 700; color: var(--text); }
.lcsun__len { font-size: 11.5px; color: var(--muted); text-align: center; white-space: nowrap; }
.lcsun__polar { font-size: 14px; font-weight: 600; color: var(--text); text-align: center; padding: 10px 0; }
@media (max-width: 460px) {
  .lcsun__row { flex-wrap: wrap; }
  .lcsun__len { order: 3; flex-basis: 100%; margin-top: 4px; }
}
.livecam-warnings[hidden] { display: none; }
.livecam-warnings__title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lcwn-list { display: grid; gap: 10px; }
/* Warnkarten als aufklappbare Zeile (2026-07-24): kompakte Summary-Zeile
   (Dreieck · Stufe · Gefahr · Zeit · Chevron), Details (Überschrift + Rohtext)
   erst auf Klick. Spart Höhe. Lagune-Glas + farbiger Stufen-Balken links bleiben. */
.lcwn {
  border: 1px solid rgba(255, 255, 255, .10); border-left: 4px solid var(--wc);
  border-radius: 14px; overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wc) 16%, transparent), color-mix(in srgb, var(--wc) 6%, transparent)),
    linear-gradient(180deg, rgba(19, 145, 176, .13), rgba(10, 65, 93, .20));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(4, 39, 58, .18), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.lcwn__sum { display: flex; align-items: center; gap: 10px; padding: 11px 15px; cursor: pointer; list-style: none; }
.lcwn__sum::-webkit-details-marker { display: none; }
.lcwn--flat .lcwn__sum { cursor: default; }
.lcwn__ic { flex: 0 0 auto; color: var(--wc); display: inline-flex; }
.lcwn__ic svg { width: 22px; height: 22px; display: block; }
.lcwn__badge { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.lcwn__hazard { font-size: 14px; font-weight: 700; color: var(--text); }
.lcwn__when { font-size: 11.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.lcwn__chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted); transition: transform var(--t) var(--ease); }
.lcwn[open] .lcwn__chev { transform: rotate(180deg); }
.lcwn__detail { padding: 0 15px 13px 47px; }
.lcwn__headline { font-size: 13px; font-weight: 600; color: var(--text); }
.lcwn__desc { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.lcwn.is-upcoming { opacity: .82; }
/* „Alles ruhig"-Karte (keine Warnungen): schlichte Zeile, kein Aufklappen. */
.lcwn--ok { display: flex; align-items: center; gap: 10px; padding: 12px 15px; }
.lcwn__ok { font-size: 13.5px; font-weight: 600; color: var(--text); }

/* Umwelt-Kacheln (UV / AQI / Pollen / Wassertemp) */
.livecam-env { max-width: 720px; margin: 24px 0 0; }
.livecam-env__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.livecam-env__loading, .livecam-env__err { color: var(--muted); font-size: 13px; }
/* ===== Gesundheitswetter-Kacheln (Neubau 2026-07-24) =====
   Moderne Glaskarten (frostig hell) mit Icon-Badge, großem Wert/Stufenwort und
   einer Mini-Skala je Kachel. Die env-Sektion gibt dafür ihre blaue Glasbühne ab
   (sonst Glas-auf-Glas) — Reset steht hinter der Sammelregel, siehe unten. */
.lce-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lce {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 14px 15px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(4, 39, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .12);
}
html[data-theme="light"] .lce {
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62));
  border-color: rgba(8, 49, 69, .12);
  box-shadow: 0 6px 18px rgba(8, 49, 69, .10), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.lce__top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lce__ic {
  flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; color: #fff; background: var(--c);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 45%, transparent);
}
.lce__ic svg { width: 17px; height: 17px; }
.lce__lbl { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; line-height: 1.2; }
.lce__val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lce__main { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.05; }
.lce__lvl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lce__scale { display: flex; gap: 3px; margin-top: 1px; }
.lce__seg { flex: 1; height: 6px; border-radius: 3px; background: var(--s); opacity: .22; transition: opacity var(--t) var(--ease); }
.lce__seg.is-past { opacity: .5; }
.lce__seg.is-on { opacity: 1; height: 7px; margin-top: -.5px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--s) 32%, transparent); }
.lce__sub { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }
/* Stunden-Detail-Prognose */
.lff { --lff-box: rgba(104,194,227,.10); }
.lff__tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.lff-tab { flex: 0 0 110px; display: flex; flex-direction: column; min-width: 110px; padding: 0; overflow: hidden; background: color-mix(in srgb, var(--surface) 28%, transparent); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--text); position: relative; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.lff-tab:hover { border-color: var(--accent-soft-border); }
.lff-tab.is-active { border-color: #68c2e3; border-bottom-color: var(--lff-box); border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: rgba(104,194,227,.22); margin-bottom: -1px; position: relative; z-index: 1; }
.lff-tab__hd { display: flex; align-items: baseline; justify-content: center; gap: 5px; padding: 6px 6px 5px; border-bottom: 1px solid var(--line); }
.lff-tab__day { font-size: 13px; font-weight: 700; color: var(--text); }
.lff-tab__date { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.lff-tab__grid { display: grid; grid-template-columns: 1fr 1fr; }
.lff-tab__cell { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 27px; padding: 5px 4px; }
.lff-tab__c-max b { font-size: 16px; font-weight: 700; color: var(--text); }
.lff-tab__c-min { font-size: 13px; font-weight: 600; color: var(--muted); }
.lff-tab__rain { display: inline-flex; align-items: center; gap: 3px; color: #68c2e3; }
.lff-tab__rain b { font-size: 13px; font-weight: 700; color: var(--text); }
.lff-tab__rain svg { width: 14px; height: 14px; display: block; }
.lff-tab__wind { color: var(--accent-alt); }
.lff-tab__wind svg { width: 17px; height: 17px; display: block; }
/* Wetterwarnung: Dreieck oben rechts in der Tageskachel (2026-07-24) */
.lff-tab__warn { position: absolute; top: 5px; right: 6px; line-height: 0; z-index: 2; }
.lff-tab__warn svg { display: block; filter: drop-shadow(0 1px 1px rgba(6, 40, 60, .4)); }
/* Warn-Zeile im Stundenraster: kurze Zeile, Dreieck zentriert je betroffener Stunde */
.lff-cell--warn { height: 22px; }
.lff-cell--warn svg { display: block; filter: drop-shadow(0 1px 1px rgba(6, 40, 60, .35)); }
/* Fußzeile Modell + Lauf unter Prognose/Wellen (2026-07-24) */
.lff-meta { margin: 10px 2px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--muted); }

.lff__panel { margin-top: 14px; }
.lff__head { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 6px; text-transform: capitalize; }
/* Stunden-Box: oben Border, Seiten laufen nach unten transparent aus; aktiver Tab öffnet hinein */
.lff__box { position: relative; background: var(--lff-box); border-top: 1px solid rgba(104,194,227,.5); }
.lff__box::before, .lff__box::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; background: linear-gradient(to bottom, rgba(104,194,227,.5), transparent 82%); }
.lff__box::before { left: 0; }
.lff__box::after { right: 0; }
.lff__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(104,194,227,.45) transparent; }
.lff__scroll::-webkit-scrollbar { height: 9px; }
.lff__scroll::-webkit-scrollbar-track { background: transparent; }
.lff__scroll::-webkit-scrollbar-thumb { background: rgba(104,194,227,.42); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.lff__scroll::-webkit-scrollbar-thumb:hover { background: rgba(104,194,227,.65); background-clip: padding-box; }
.lff__grid { position: relative; width: max-content; min-width: 100%; padding: 8px 4px; box-sizing: border-box; }
/* Temp-/Böen-Charts */
.lff-tchart, .lff-gchart { display: block; }
.lff-tc-lbl { fill: var(--text); font-size: 15px; font-weight: 700; text-anchor: middle; font-family: var(--font-sans); }
.lff-gc-lbl { fill: var(--text); font-size: 11px; font-weight: 600; text-anchor: middle; font-family: var(--font-sans); }
/* Tages-Kopfzeile über allen Stunden */
.lff-row--days { margin-bottom: 4px; }
.lff-day { flex: 0 0 auto; box-sizing: border-box; height: 24px; }
.lff-day > span { position: sticky; left: 0; display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px 0; font-size: 12px; font-weight: 700; color: var(--text); text-transform: capitalize; white-space: nowrap; }
.lff-day > span small { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; }
.lff-gap { flex: 0 0 auto; }
.lff-lbl { position: sticky; left: 0; z-index: 2; width: -moz-fit-content; width: fit-content; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 9px 8px 3px 0; }
.lff-row { display: flex; position: relative; z-index: 1; }
.lff-cell { width: 57px; flex: 0 0 57px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--text); box-shadow: inset -1px 0 0 color-mix(in srgb, var(--text) 7%, transparent); }
.lff-cell--time { height: 22px; font-size: 11px; color: var(--muted); font-weight: 600; }
.lff-cell--icon { height: 44px; }
.lff-cell--icon img { width: 34px; height: 34px; filter: drop-shadow(0 1px 2px rgba(10,34,51,.30)); }
.lff-cell--temp { flex: 0 0 48px; width: 48px; height: 30px; margin: 0 2px; border-radius: 6px; font-size: 12.5px; font-weight: 700; }
.lff-cell--wind { height: 64px; flex-direction: column; gap: 4px; line-height: 1.15; }
.lff-arrow { width: 22px; height: 22px; display: block; }
.lff-calm { color: var(--muted); font-size: 15px; line-height: 1; }
.lff-wd { font-size: 10px; color: var(--muted); font-weight: 600; }
.lff-wv { font-size: 12px; color: var(--text); font-weight: 700; }
.lff-cell--bft { height: 34px; }
.lff-cell--bft i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.lff-cell--gust { height: 24px; font-size: 12px; font-weight: 600; }
.lff-cell--precip { height: 24px; font-size: 12px; color: var(--muted); }
.lff-cell--precip.is-wet { color: #158dbd; font-weight: 700; }
.lff-cell--waveh, .lff-cell--waveper { height: 24px; font-size: 12px; font-weight: 600; }
.lff-cell--wavedir { height: 40px; flex-direction: column; line-height: 1.15; }
.lff-wave-arrow { color: #68c2e3; }

/* ===== Wellen-/Surf-Widget ===== */
.lcwv-hero { position: relative; min-height: 300px; border-radius: 12px; overflow: hidden; }
.lcwv-sea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lcwv-w { transform-box: fill-box; animation: lcwv-wave linear infinite; }
@keyframes lcwv-wave { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lcwv-w { animation: none; } }
/* Sichtbarkeits-Gate: außerhalb des Viewports pausieren (IntersectionObserver in
   livecam-waves.js setzt .lcwv-offscreen). Spart CPU/Akku beim Wegscrollen. */
.lcwv-offscreen .lcwv-w, .lcwv-offscreen .lcwv-flow { animation-play-state: paused; }
.lcwv-stats { position: absolute; inset: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,20,40,.6); }
.lcwv-main { position: absolute; top: 15px; left: 18px; display: flex; flex-direction: column; }
.lcwv-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .9; }
.lcwv-eyebrow em { font-style: normal; font-weight: 600; opacity: .85; letter-spacing: .02em; }
.lcwv-h { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; }
.lcwv-h-arrow { width: 40px; height: 40px; flex: 0 0 auto; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,20,40,.5)); }
.lcwv-h-v { display: inline-flex; align-items: baseline; gap: 4px; }
.lcwv-h b { font-family: var(--font-display); font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.lcwv-h i { font-size: 18px; font-style: normal; font-weight: 600; opacity: .9; }
.lcwv-sub { font-size: 13px; font-weight: 600; margin-top: 6px; opacity: .95; }
/* Wassertemp-Kasten als Glaskarte (2026-07-24) — dunkles Blau-Glas in
   Lagune 800 #0a415d, hebt sich vom Ozean ab. */
.lcwv-sst { position: absolute; left: 18px; bottom: 14px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: linear-gradient(180deg, rgba(10,65,93,.58), rgba(10,65,93,.36));
  border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 10px 15px; text-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(4,39,58,.22), inset 0 1px 0 rgba(255,255,255,.16); }
.lcwv-sst__row { display: inline-flex; align-items: center; gap: 9px; }
.lcwv-thermo { width: 42px; height: 34px; flex: 0 0 auto; display: block; }
.lcwv-sst__row b { font-size: 23px; font-weight: 800; color: #eaf6ff; line-height: 1; }
.lcwv-sst small { font-size: 10.5px; font-weight: 600; color: #bcdcf2; }
/* Radar-Legende neben dem Wassertemp-Kasten (2026-07-24) — spart die Höhe,
   die sie vorher unter der Scheibe belegte. Zwei Zeilen, an der Box-Höhe. */
.lcwv-radarwrap .msr-leg { display: none; } /* geteilte Legende hier unterdrückt (legend:false) */
.lcwv-leg { position: absolute; right: 306px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
  font-size: 12px; font-weight: 600; color: #dbeefb; text-shadow: 0 1px 3px rgba(0,20,40,.6); pointer-events: none; }
.lcwv-leg span { display: inline-flex; align-items: center; }
.lcwv-leg i { width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; flex: 0 0 auto; }
.lcwv-strip { margin-top: 14px; background: rgba(104,194,227,.10); border-radius: 10px; }
.lcwv-band { border-radius: 0; height: 26px; font-size: 12.5px; font-weight: 700; }
.lcwv-warrow { width: 20px; height: 20px; color: #68c2e3; }
/* Wellen-Streifen wie Vorhersage */
.lcwv-fc { margin-top: 16px; }
.lcwv-tabarrow { width: 24px; height: 24px; color: #63b6ea; display: block; }
/* EWAM-Tageskachel zierlicher als Forecast-Kachel */
.lcwv-fc .lff-tab { flex-basis: 92px; min-width: 92px; }
.lcwv-fc .lff-tab__hd { padding: 5px 5px 4px; gap: 4px; }
.lcwv-fc .lff-tab__day { font-size: 12px; }
.lcwv-fc .lff-tab__date { font-size: 9.5px; }
.lcwv-fc .lff-tab__cell { min-height: 23px; padding: 3px 4px; }
.lcwv-fc .lff-tab__c-max b { font-size: 14px; }
.lcwv-fc .lff-tab__c-min { font-size: 12px; }
.lff-tab__c-max b i { font-size: 11px; font-weight: 600; font-style: normal; color: var(--muted); margin-left: 1px; }
/* Surf-Radar-Kompass auf reduzierter Land/Meer-Karte */
@keyframes lcwv-flow { from { transform: translateY(0); } to { transform: translateY(var(--fd, 40px)); } }
.lcwv-flow { animation: lcwv-flow linear infinite; }
@media (prefers-reduced-motion: reduce) { .lcwv-flow, .lcwv-w { animation: none !important; } }
.lcwv-radarwrap { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; }
.lcwv-radar { position: relative; width: 280px; height: 280px; max-width: 100%; margin: 0 auto; }
.lcwv-radar__map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #0a3149; }
.lcwv-radar__scrim { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(4,22,36,0) 42%, rgba(4,22,36,.5) 100%); }
.lcwv-radar__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lcwv-radar__leg { display: flex; justify-content: center; gap: 18px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.lcwv-radar__leg span { display: inline-flex; align-items: center; }
.lcwv-legdot { width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

/* Beschreibung */
.livecam-about { max-width: 820px; margin: 32px 0 0; }
.livecam-about__title { margin: 0 0 10px; font-size: clamp(18px, 2vw, 22px); font-weight: 700; }
/* about-Text kommt aus der DB mit \n\n zwischen den Absätzen (ein einziges <p>).
   pre-line lässt diese Umbrüche als Absätze durch, sonst kollabieren sie zu einer
   Textwand. Mehrfach-Leerzeichen bleiben normal zusammengefasst. */
.livecam-about__text { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; white-space: pre-line; }

/* Mini-Karte */
.livecam-map-section { margin: 32px 0 0; }
.livecam-map-section__title { margin: 0 0 12px; font-size: clamp(18px, 2vw, 22px); font-weight: 700; }
.livecam-map {
  height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}

/* ===== NOTICE-BANNER (Wartung / Fehlermeldung) ===== */
.livecam-notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .38);
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-sm);
  color: #92590b;
  font-size: 14px;
  font-weight: 500;
}
html[data-theme="dark"] .livecam-notice,
@media (prefers-color-scheme: dark) {
  .livecam-notice { color: #fbd38d; background: rgba(245, 158, 11, .18); }
}

/* ===== SPONSOR-BOX ===== */
.livecam-link {
  margin: 20px 0 0;
  padding: 12px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.livecam-link__lede {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
.livecam-link__a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.livecam-link__a:hover { color: var(--accent-hover); text-decoration: none; }

/* ===== DETAIL: PLAYER =====
 * aspect-ratio wird inline gesetzt (16/9, 4/3, …) — Override moeglich pro Cam.
 */
.livecam-player {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9; /* fallback */
}
.livecam-player-note {
  margin: 10px 4px 0;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.livecam-player__video,
.livecam-player__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.livecam-player__embed,
.livecam-player__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.livecam-player__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 4px 9px 4px 8px;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.livecam-player__offline {
  position: relative;
  width: 100%;
  height: 100%;
}
.livecam-player__offline-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.65));
  color: #fff;
}
.livecam-player__offline-overlay strong {
  font-size: clamp(18px, 2vw, 22px);
  margin-bottom: 6px;
}
.livecam-player__offline-overlay p {
  max-width: 480px;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 14px;
}

/* ===== DETAIL: FORECAST CTA ===== */
.livecam-forecast-cta {
  display: inline-block;
  margin: 18px 0 0;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.livecam-forecast-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* ===== DETAIL: NEARBY ===== */
.livecam-nearby { margin: 40px 0 0; }
.livecam-nearby__title {
  margin: 0 0 16px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
}

/* ===== EMPTY ===== */
.livecams-empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* ===== SEO-TEXTBLOCK ===== */
.livecams-seo {
  margin: 48px 0 0;
  max-width: 820px;
}
.livecams-seo__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
}
.livecams-seo__sub {
  margin: 22px 0 6px;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 700;
}
.livecams-seo__p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* ===== FAQ (Akkordeon) ===== */
.livecams-faq {
  margin: 44px 0 0;
  max-width: 820px;
}
.livecams-faq__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
}
.livecams-faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin: 0 0 10px;
  overflow: hidden;
}
.livecams-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 14px 44px 14px 16px;
  position: relative;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.livecams-faq__q::-webkit-details-marker { display: none; }
.livecams-faq__q::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
}
.livecams-faq__item[open] .livecams-faq__q::after { content: "–"; }
.livecams-faq__q:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
.livecams-faq__a {
  padding: 0 16px 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ===== PREMIUM-CARD (Sidebar-Light) ===== */
.livecams-premium {
  margin: 36px 0 0;
}
.livecams-premium__card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 24px;
  padding: 22px 26px;
  background: var(--premium-pattern), var(--premium-bg);
  /* Reihenfolge: 3 Tropfen, dann die Welle. Nur die Welle fuellt die
     Flaeche; die Tropfen behalten ihre feste Groesse. Nichts kachelt. */
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat;
  border: 1px solid var(--premium-border);
  border-radius: 20px;
  box-shadow: var(--premium-shadow);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* Anheben statt Farbwechsel — die Tiefe ist das Gestaltungsmittel. */
.livecams-premium__card:hover,
.livecams-premium__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(3, 22, 32, .40), var(--premium-shadow);
}
.livecams-premium__badge {
  grid-column: 1;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--premium-ink);
}
.livecams-premium__title {
  grid-column: 1;
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 700;
}
.livecams-premium__lede {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
/* Versenkt: der Preis liegt IM Kasten, der Knopf liegt DARAUF. */
.livecams-premium__price {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  color: var(--premium-price-ink);
  background: var(--premium-price-bg);
  box-shadow: var(--premium-price-shadow);
  white-space: nowrap;
}
.livecams-premium__cta {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 12px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--premium-cta-bg);
  color: var(--premium-cta-ink);
  box-shadow: var(--premium-cta-shadow);
  font-size: 13px;
  font-weight: 700;
}
.livecams-premium__card:hover .livecams-premium__cta {
  box-shadow: 0 4px 8px rgba(0, 0, 0, .34),
              0 1px 0 rgba(255, 255, 255, .55) inset,
              0 -2px 0 rgba(120, 70, 0, .20) inset;
}
@media (max-width: 560px) {
  .livecams-premium__card { grid-template-columns: 1fr; }
  .livecams-premium__price { grid-column: 1; grid-row: auto; justify-self: start; }
}
/* Wer Bewegung reduziert haben will, bekommt keine Anhebung. */
@media (prefers-reduced-motion: reduce) {
  .livecams-premium__card { transition: none; }
  .livecams-premium__card:hover { transform: none; }
}

/* ============================================================
   Zweites Cam-Theme „soft" — Hintergrund wie im Standard belassen,
   nur der laute Magenta-UI-Akzent wird durch das Marken-Blau 500
   (#1573ad) ersetzt. Orange (Logo) bleibt. Datenfarben unverändert.
   Umschaltung: <html data-cam-theme="soft">.
   ============================================================ */
html[data-cam-theme="soft"] {
  --accent-alt:             #1573ad;                 /* Blau 500 (Marke) statt Magenta */
  --accent-alt-hover:       #0f4c6e;                 /* Blau 700 */
  --accent-alt-ink:         #ffffff;
  --accent-alt-soft-bg:     rgba(21, 115, 173, .16);
  --accent-alt-soft-border: rgba(21, 115, 173, .40);
}

/* ============================================================
   v2-Designsprache „Lagune & Sonne" (2026-07-16)
   Port des Entwurfs auf die echte Seite: Heading mit Orange-Leiste,
   einheitliche Sektions-Header mit Tuerkis-Akzent, Glas-Karten
   statt solider --surface-Bloecke.
   NUR Optik — HTML/JS/Datenlogik unberuehrt.
   ============================================================ */

/* Heading ueber der Cam: Praesenz durch Orange-Akzentleiste (kein Farbverlauf-Text) */
.livecam-detail__header {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin-bottom: 16px;
}

/* Einheitliche Sektions-Header (16px + Tuerkis-Akzentbalken, wie im Entwurf) */
.livecam-forecast__title,
.livecam-waves__title,
.livecam-tides__title,
.livecam-port__title,
.livecam-sun__title,
.livecam-env__title,
.livecam-about__title,
.livecam-map-section__title,
.livecam-timelapse__title,
.livecam-nearby__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--text);
}
.livecam-forecast__title::before,
.livecam-waves__title::before,
.livecam-tides__title::before,
.livecam-port__title::before,
.livecam-sun__title::before,
.livecam-env__title::before,
.livecam-about__title::before,
.livecam-map-section__title::before,
.livecam-timelapse__title::before,
.livecam-nearby__title::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #68c2e3;
}

/* Glas-Karten fuer Sektions-Inhalte (Sonne, Hafen-Anlaeufe, Gezeiten-Zeilen) */
.lcsun,
.lcps,
.lct-row {
  background: rgba(255, 255, 255, .055);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* Einheitliche Spaltenbreite (v2): alle Sektionen fluchten mit dem Player.
   Vorher: Daten-Sektionen 720px, About 820px, Karte/Nearby voll → ausgefranste
   Kanten + tote Flaeche rechts. Der Entwurf laeuft auf EINER Breite. */
.livecam-weather,
.livecam-forecast,
.livecam-waves,
.livecam-tides,
.livecam-env,
.livecam-sun,
.livecam-port,
.livecam-about {
  max-width: none;
}
/* Fliesstext bleibt lesbar schmal — die Sektion fluchtet trotzdem */
.livecam-about__text { max-width: 70ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   v4-Design-Angleichung — Übertrag der Wetter-Detailseite auf die Cam-Seite
   ---------------------------------------------------------------------------
   Bisher: kleine graue Versal-Titel, keine Trenner, uneinheitliche Abstände.
   Detailseite: Trennlinie je Abschnitt, ruhiger 26-px-Rhythmus, echtes h2 links
   und optionale Mono-Meta rechts (.fc-sec / .fc-sec-h).
   Bewusst als eigener Block am Dateiende — leicht zu prüfen, leicht zurückzunehmen.
   ═══════════════════════════════════════════════════════════════════════════ */

.livecam-warnings,
.livecam-forecast,
.livecam-waves,
.livecam-tides,
.livecam-port,
.livecam-env,
.livecam-sun,
.livecam-about,
.livecam-map-section,
.livecam-nearby {
  margin-top: 26px;
  padding: 24px 2px 8px;
  border-top: 1px solid var(--line);
}
/* Erster Abschnitt nach dem Player braucht keinen doppelten Trenner. */
.livecam-warnings:first-of-type { border-top: 0; padding-top: 8px; }

.livecam-warnings__title,
.livecam-forecast__title,
.livecam-waves__title,
.livecam-tides__title,
.livecam-port__title,
.livecam-env__title,
.livecam-sun__title,
.livecam-about__title,
.livecam-map-section__title,
.livecam-nearby__title {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--text);
}

/* Der 720-px-Deckel stammt aus dem alten, schmalen Layout. Die Detailseite lässt
   ihre Abschnitte die Spaltenbreite nutzen — hier ebenso, aber mit einer Grenze,
   damit Fließtext lesbar bleibt. */
.livecam-forecast,
.livecam-waves,
.livecam-tides,
.livecam-port,
.livecam-env,
.livecam-sun { max-width: none; }

@media (max-width: 640px) {
  .livecam-warnings__title,
  .livecam-forecast__title,
  .livecam-waves__title,
  .livecam-tides__title,
  .livecam-port__title,
  .livecam-env__title,
  .livecam-sun__title,
  .livecam-about__title,
  .livecam-map-section__title,
  .livecam-nearby__title { font-size: 15.5px; }
}

/* ── Zwei-Spalten-Bereich: Messwerte links, Zusatzspalte rechts ──────────────
   Ueber die volle Breite wirkte der Messwerte-Block leer (Temperatur, Werte,
   Kompass — und ein Drittel Luft). Schmaler wirkt er dichter, und rechts
   entsteht Platz fuer „Umwelt heute" (UV/Luftqualitaet) bzw. den Werbe-Slot.
   Wetterwarnungen bleiben BEWUSST volle Breite weiter oben: eine Warnung darf
   nicht in einer Spalte stehen, die je nach Abo-Status Werbung traegt. */
.lc-two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.lc-two__main, .lc-two__side { min-width: 0; }
/* Die Abschnitts-Trennlinie soll nur einmal ueber dem Raster liegen. */
.lc-two__side > .livecam-env { margin-top: 26px; }
@media (max-width: 980px) {
  .lc-two { grid-template-columns: 1fr; gap: 0; }
  .lc-two__side > .livecam-env { margin-top: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Gestaltungs-Durchgang: Lagune-Panels für die Datenblöcke
   ---------------------------------------------------------------------------
   Idee: Die Wetter-Detailseite wirkt ruhig, weil Inhalte auf FLÄCHEN liegen und
   Farbe nur dort auftaucht, wo sie etwas bedeutet (Temperatur-Skala, Beaufort).
   Auf der Cam-Seite schwebten die Widgets bisher auf blankem Grund — dadurch
   wirkte alles gleich laut. Jede Datengruppe bekommt jetzt eine eigene Bühne im
   Lagune-Verlauf; die Trennlinie entfällt dort, weil das Panel schon gliedert.
   Nur die Textabschnitte (Über, Karte, Nachbar-Cams) behalten die Linie.
   ═══════════════════════════════════════════════════════════════════════════ */

.livecam-weather,
.livecam-forecast,
.livecam-waves,
.livecam-tides,
.livecam-port,
.livecam-env,
.livecam-sun { border-top: 0; padding: 0; margin-top: 26px; }

.livecam-weather__body,
.livecam-forecast__body,
.livecam-waves__body,
.livecam-tides__body,
.livecam-port__body,
.livecam-env__body,
.livecam-sun__body {
  position: relative;
  padding: 18px 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    linear-gradient(180deg, rgba(19, 145, 176, .13), rgba(10, 65, 93, .20));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(4, 39, 58, .18);
  overflow: hidden;
}
/* Sonne + Mond stehen jetzt (User-Wunsch 2026-07-24) in einem gemeinsamen
   Glaskasten wie die anderen Datenblöcke — die frühere „kein Panel im Panel"-
   Regel (Bühne entzogen) ist entfernt; das Paar (.msp, 12px rund) sitzt in der
   Glasbühne des __body. */
/* Gesundheitswetter: keine blaue Glasbühne — die Kacheln SIND jetzt das Glas
   (frostig hell). Muss NACH der Sammelregel stehen, um sie zu überschreiben. */
.livecam-env__body { padding: 0; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Sonnen-Akzent an der Oberkante der GEMESSENEN Werte: der eine Block, der
   „jetzt gerade" zeigt, darf sich vom Rest abheben — sparsam, eine Kante. */
.livecam-weather__body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-sun), var(--brand-cyan));
  opacity: .85;
}

/* Abschnittsköpfe etwas luftiger über der Fläche. */
.livecam-weather__title,
.livecam-forecast__title,
.livecam-waves__title,
.livecam-tides__title,
.livecam-port__title,
.livecam-env__title,
.livecam-sun__title { margin: 0 0 12px; }

@media (max-width: 640px) {
  .livecam-weather__body,
  .livecam-forecast__body,
  .livecam-waves__body,
  .livecam-tides__body,
  .livecam-port__body { padding: 14px 13px 16px; border-radius: 12px; }
}

/* ===== LANDING: Filterleiste mit Ansicht-Umschalter (Liste / Karte) ===== */
.livecams-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
.livecams-bar .livecams-filter { margin: 0; flex: 1 1 auto; }

.livecams-view {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.livecams-view__btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.livecams-view__btn:hover { color: var(--text); }
.livecams-view__btn.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}
.livecams-view__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ===== LANDING: Karte ===== */
.livecams-map { margin: 0 0 26px; }
.livecams-map[hidden] { display: none; }
.livecams-map__canvas {
  width: 100%;
  height: clamp(360px, 58vh, 620px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}
.livecams-map__hint {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--muted);
}

/* Popup an einem Cam-Punkt: Vorschaubild + Name + Aufruf. */
.lcmp-pop .maplibregl-popup-content {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.lcmp-pop .maplibregl-popup-tip { border-top-color: var(--surface); border-bottom-color: var(--surface); }
.lcmp { display: block; color: inherit; text-decoration: none; }
.lcmp__img { display: block; width: 100%; height: 130px; object-fit: cover; }
.lcmp__body { display: grid; gap: 2px; padding: 10px 12px 12px; }
.lcmp__loc {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--accent);
}
.lcmp__name { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text); }
.lcmp__cta { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--accent); }

/* ===== LANDING: interne Verlinkung ===== */
.livecams-links { margin: 34px 0 0; }
.livecams-links__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text);
}
.livecams-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.livecams-links__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.livecams-links__link:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
  .livecams-bar { gap: 10px; }
  .livecams-view { width: 100%; justify-content: center; }
  .livecams-view__btn { flex: 1 1 0; justify-content: center; }
}

/* ===== Vorhersage-Tageskacheln im Glas-Look (2026-07-23) =====
   Zieht die Tages-Umschalter auf denselben Entwurf wie die übrigen Karten
   (Sonne, Hafen-Anläufe, Gezeiten): weiche Fläche, oben abgerundet, unten offen
   in die blaue Box. Farbmischung über --text, damit heller und blauer Modus
   dieselbe Regel tragen. Maße (110px / 92px Breite) bleiben unangetastet —
   an ihnen hängen die JS-Konstanten für den Scroll-Versatz. */
.lff-tab {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--text) 7%, transparent),
              color-mix(in srgb, var(--text) 3%, transparent));
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
}
.lff-tab:hover {
  background: linear-gradient(180deg, rgba(104, 194, 227, .16), rgba(104, 194, 227, .05));
  border-color: rgba(104, 194, 227, .45);
}
.lff-tab.is-active {
  background: linear-gradient(180deg, rgba(104, 194, 227, .30), var(--lff-box));
  border-color: rgba(104, 194, 227, .55);
  border-bottom-color: var(--lff-box);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.lff-tab__hd { border-bottom-color: color-mix(in srgb, var(--text) 10%, transparent); }

/* Die Box darunter schließt den Rahmen unten wieder ab. */
.lff__box { border-radius: 0 0 14px 14px; }

/* ===== DETAIL: Partner-Knopf unter dem Player (2026-07-23) =====
   War vorher „Mehr erfahren" + Textlink weit unten bei den Aktionen. Jetzt ein
   Knopf mit Verlauf direkt unter der Webcam: Standort-Nadel, Name, Pfeil. */
/* Knopf-Zeile: Partner + Facebook nebeneinander, bricht auf Mobil um. */
.livecam-social { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 14px 0 0; }
.livecam-social .livecam-partner { margin: 0; }

/* Facebook-Knopf — gleiche Pill-Form wie der Partner, aber Facebook-Blau.
   margin-left:auto schiebt ihn ans rechte Ende der Zeile (Partner bleibt links);
   greift auch ohne Partner. */
.livecam-fb {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(135deg, #2d88ff 0%, #1877f2 100%);
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(24, 119, 242, .30);
  text-shadow: 0 1px 2px rgba(6, 30, 70, .45);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.livecam-fb:hover {
  background: linear-gradient(135deg, #4596ff 0%, #2a86f6 100%);
  box-shadow: 0 9px 24px rgba(24, 119, 242, .38), 0 0 0 3px rgba(45, 136, 255, .18);
  transform: translateY(-1px);
}
.livecam-fb:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(24, 119, 242, .26); }
.livecam-fb:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.livecam-fb__icon { width: 20px; height: 20px; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(6, 30, 70, .35)); }

.livecam-partner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(104, 194, 227, .45);
  background: linear-gradient(135deg, #1f9fd0 0%, #0e6288 100%);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(10, 65, 93, .26);
  /* Schatten unter der Schrift: der Verlauf wird links hell (#1f9fd0), da
     verliert Weiß sonst an Kontrast. */
  text-shadow: 0 1px 2px rgba(6, 40, 60, .55);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.livecam-partner:hover {
  background: linear-gradient(135deg, #37b0dd 0%, #12719c 100%);
  box-shadow: 0 9px 24px rgba(10, 65, 93, .34), 0 0 0 3px rgba(104, 194, 227, .18);
  transform: translateY(-1px);
}
.livecam-partner:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(10, 65, 93, .26); }
.livecam-partner:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.livecam-partner__pin   { width: 19px; height: 19px; flex: 0 0 auto; color: #a1daee; filter: drop-shadow(0 1px 1px rgba(6, 40, 60, .45)); }
.livecam-partner__arrow { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; filter: drop-shadow(0 1px 1px rgba(6, 40, 60, .45)); }
@media (prefers-reduced-motion: reduce) {
  .livecam-partner { transition: none; }
  .livecam-partner:hover { transform: none; }
}

/* ===== DETAIL: Schnellzugriff als klebende Reiterleiste (2026-07-23) =====
   Übernimmt den Entwurf der Reiterleiste aus forecast.php (.fc-tabs): klebt
   unter Kopf- und Titelleiste (0–61px + 61–85px), Glas-Hintergrund, aktiver
   Reiter mit oranger Unterkante. Inhalt bleibt der Schnellzugriff der Cam. */
.livecam-jump {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 14px 0 8px;
  padding: 5px 5px 0;
  position: sticky;
  top: 85px;
  z-index: 1100;
  /* Frostig-weißes Glas mit einem Hauch Türkis (Lagune), fast deckend — sonst
     blutet Werbung/Inhalt beim Scrollen durch (User 2026-07-24). Nur Webcam-
     Seiten (.livecam-jump). */
  background: linear-gradient(180deg, rgba(198, 233, 246, .95), rgba(164, 214, 235, .92));
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgba(8, 49, 69, .10);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 6px 18px rgba(4, 39, 58, .16);
}
.livecam-jump::-webkit-scrollbar { display: none; }
html[data-theme="light"] .livecam-jump { background: linear-gradient(180deg, rgba(205, 236, 247, .96), rgba(172, 218, 238, .93)); }

.lcj-btn {
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: rgba(8, 49, 69, .72);   /* Navy — lesbar auf dem hellen Glas */
  cursor: pointer;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.lcj-btn svg { width: 16px; height: 16px; color: currentColor; }
.lcj-btn:hover {
  color: #08313d;
  background: rgba(8, 49, 69, .06);
  border-color: transparent;
  border-bottom-color: transparent;
  transform: none;
  box-shadow: none;
}
.lcj-btn.is-active {
  color: #08313d;
  background: rgba(8, 49, 69, .06);
  border-bottom-color: var(--accent);
}
/* Warnungen-Reiter: Dreieck in Warnfarbe (Amber), damit es signalisiert. */
.lcj-btn--warn svg { color: #f2820c; }
/* Mini-Cam im Sticky-Balken, wenn der Player raus scrollt (2026-07-24):
   nur ein klickbares „Live-Cam" mit magenta Puls-Punkt, kein Standbild. */
.lcj-cam {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; margin: 0 4px 3px 0; border: 0; cursor: pointer;
  background: rgba(8, 49, 69, .06); border-radius: var(--radius-pill);
}
.lcj-cam:hover { background: rgba(8, 49, 69, .11); }
.lcj-cam__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .03em; color: #08313d; }
.lcj-cam__dot { width: 7px; height: 7px; border-radius: 50%; background: #e0245e;
  box-shadow: 0 0 0 0 rgba(224, 36, 94, .55); animation: lcj-cam-pulse 1.6s ease-out infinite; }
@keyframes lcj-cam-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 36, 94, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(224, 36, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 36, 94, 0); }
}
@media (prefers-reduced-motion: reduce) { .lcj-cam__dot { animation: none; } }

@media (max-width: 640px) {
  .livecam-jump { margin: 10px 0 6px; padding: 3px 4px 0; }
  .lcj-btn { font-size: 12px; padding: 7px 12px; }
  .lcj-cam img { width: 36px; height: 22px; }
}

/* ===== Messwerte: Titel lag auf der Panel-Kante (2026-07-23) =====
   Der Lagune-Durchgang setzte die Sektionen auf padding:0. Bei .livecam-weather
   bleibt aber die eigene Bühne (Verlauf + 18px Radius + overflow:hidden) — der
   Titel saß dadurch exakt auf der gerundeten Oberkante und wurde beschnitten. */
.livecam-weather { padding: 16px 18px 18px; }
@media (max-width: 640px) { .livecam-weather { padding: 13px 12px 14px; } }

/* Pillen im 6-Stunden-Verlauf feiner: sie standen als dicke Blöcke über den
   Linien und nahmen dem Verlauf die Ruhe. Maße kommen aus ppill() im JS. */
.lcw-pp__t { font-size: 9px; font-weight: 600; }
.lcw-rain__v { font-size: 9px; font-weight: 600; }

/* ===== Messwerte: ausgebaute Windrose + Beaufort-Skala (2026-07-23) =====
   Nur auf der Cam-Seite. Die geteilte Stations-Komponente bleibt unberührt —
   livecam-weather.js ersetzt deren Rose nachträglich und hängt Regen und
   Beaufort-Skala an. Grundmaße kommen weiter aus .msv-dial. */
.lcw-dial__inner { fill: none; stroke: var(--line); stroke-width: 1.5; opacity: .5; }
.lcw-dial__tick { stroke: var(--muted); stroke-width: 1.2; opacity: .4; stroke-linecap: round; }
.lcw-dial__tick.is-maj { stroke-width: 1.8; opacity: .75; }
.lcw-dial__bft {
  fill: var(--text); font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  text-anchor: middle; font-variant-numeric: tabular-nums;
}
.lcw-dial__bftu {
  fill: var(--muted); font-family: var(--font-mono); font-size: 6px;
  text-anchor: middle; letter-spacing: .1em;
}
/* Beaufort-Skala über die volle Breite unter dem Kopf-Inhalt (der Kopf ist flex). */
.lcw-bftwrap { flex: 1 1 100%; }
.lcw-bftwrap .lcw-bft { margin: 2px 0 0; }
/* Regenzeile: bei echtem Regen hervorheben, bei 0 ruhig mitlaufen. */
.msv-hero-row.is-wet b { color: #68c2e3; }

/* ===== Karten-Controls im start.php-Design (2026-07-24) =====
   Eigene .map-btn-Zoom-Buttons auf der Standort-Karte (livecam-map.js), gleiche
   Optik wie start.php (Azur-Glas). start.css ist hier nicht geladen → .map-btn
   hier definieren. Tokens (--map-control-*) sind global (tokens.css). */
.livecam-map { position: relative; }   /* Anker für das Control-Overlay */
.lc-mapctrl { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.lc-mapctrl .map-btn {
  width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: var(--map-control-bg); -webkit-backdrop-filter: var(--map-control-blur); backdrop-filter: var(--map-control-blur);
  color: var(--map-control-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 24px rgba(4, 39, 58, .24);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.lc-mapctrl .map-btn:hover { background: var(--map-control-bg-hover); transform: translateY(-1px); }
.lc-mapctrl .map-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Eigener Karten-Marker (2026-07-24): Tropfen-Pin + pulsierender Ring */
.lc-marker { position: relative; width: 40px; height: 52px; cursor: pointer; }
.lc-marker__pin { display: block; filter: drop-shadow(0 5px 7px rgba(6, 40, 60, .45)); }
.lc-marker__halo {
  position: absolute; left: 20px; top: 18.6px; width: 40px; height: 40px;
  margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(244, 169, 50, .45);
  z-index: -1; animation: lc-marker-pulse 2.2s ease-out infinite;
}
@keyframes lc-marker-pulse {
  0%   { transform: scale(.45); opacity: .6; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .lc-marker__halo { animation: none; opacity: 0; } }

/* ===== Über-Text + Standort-Karte nebeneinander (2026-07-24) =====
   Bei Paar (Text UND Karte) 2 Spalten; sonst normal (eine Spalte).
   Ein gemeinsamer Trenner oben statt zwei einzelner. */
.lc-about-map { margin-top: 26px; border-top: 1px solid var(--line); padding: 24px 2px 8px; }
.lc-about-map > .livecam-about,
.lc-about-map > .livecam-map-section {
  margin-top: 0; border-top: 0; padding-top: 0;
}
.lc-about-map.is-pair { display: grid; grid-template-columns: 1fr; gap: 22px; }
.lc-about-map.is-pair .livecam-about__text { max-width: none; }
@media (min-width: 900px) {
  .lc-about-map.is-pair { grid-template-columns: minmax(0, 1fr) clamp(360px, 38%, 470px); gap: 30px; align-items: start; }
  .lc-about-map.is-pair .livecam-map { height: 360px; }
}

/* ===== Webcam-Verzeichnis-Tabelle auf der Landing (2026-07-24) ===== */
.livecams-dir { margin: 40px 0 0; }
.livecams-dir__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 14px; color: var(--text); }
.livecams-dir__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.livecams-dir__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.livecams-dir__table th,
.livecams-dir__table td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.livecams-dir__table thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); background: color-mix(in srgb, var(--text) 5%, transparent);
}
.livecams-dir__table tbody tr:last-child td { border-bottom: 0; }
.livecams-dir__table tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.livecams-dir__table td:nth-child(2),
.livecams-dir__table td:nth-child(3) { color: var(--muted); }
.livecams-dir__link { color: var(--text); font-weight: 600; text-decoration: none; }
.livecams-dir__link:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 640px) {
  .livecams-dir__table th,
  .livecams-dir__table td { padding: 9px 12px; }
}

/* ===== „Alle Webcams" — offene Link-Liste unter den Nachbar-Cams (2026-07-24) ===== */
.livecam-switch { margin: 28px 0 0; }
.livecam-switch__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 14px; color: var(--text); }
.livecam-switch__panel {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 26px;
}
.livecam-switch__region { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
/* Mehrere Regionen in EINER Spalte (Levante + Spanien): zweite darunter absetzen. */
.livecam-switch__region-block + .livecam-switch__region-block { margin-top: 16px; }
.livecam-switch__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.livecam-switch__list a { color: var(--text); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.livecam-switch__list a:hover { color: var(--accent); text-decoration: none; }
/* Die gerade gezeigte Cam: orange hervorgehoben, kein Link auf sich selbst. */
.livecam-switch__list li.is-current span {
  display: inline-block; color: var(--accent); font-size: 13.5px; font-weight: 700; line-height: 1.35;
}

/* ===== Wellen-Hero mobil: absoluter Aufbau überlappt → stapeln (2026-07-24) ===== */
@media (max-width: 640px) {
  .lcwv-hero { min-height: 0; }
  .lcwv-stats { position: static; height: auto; padding: 15px 15px 2px; }
  .lcwv-main { position: static; }
  .lcwv-sst { position: static; margin-top: 12px; }
  .lcwv-leg {
    /* relative + z-index, sonst malt das absolut liegende See-SVG (Geschwister)
       über die dann statische Legende — die Radar-Scheibe entkommt dem nur, weil
       ihr Inneres schon position:relative ist. WICHTIG: right/top der Basisregel
       zurücksetzen, sonst schiebt `right:306px` die relativ positionierte Legende
       306px nach links aus dem Bild (genau der „Legende weg"-Fehler). */
    position: relative; z-index: 1; right: auto; top: auto; transform: none;
    flex-direction: row; flex-wrap: wrap;
    gap: 6px 18px; margin: 12px 15px 0;
  }
  .lcwv-radarwrap { position: static; transform: none; margin: 14px auto 16px; }
  .lcwv-radar { margin: 0 auto; }
}

/* Mobile Sicherheiten: langer Partner-Name / Über-Text bricht statt zu überlaufen */
@media (max-width: 640px) {
  .livecam-partner { max-width: 100%; }
  .livecam-partner__name { overflow-wrap: anywhere; }
  /* Beide Knöpfe volle Breite, sauber gestapelt statt gequetscht. */
  .livecam-social { gap: 8px; }
  .livecam-social .livecam-partner, .livecam-fb { flex: 1 1 100%; justify-content: center; max-width: 100%; margin-left: 0; }
}

/* ===== Mobile: Charts + Radar lesbar/kleiner (2026-07-24) ===== */
@media (max-width: 640px) {
  /* 6-Stunden-Chart & Gezeiten-Kurve schrumpften zu stark → Mindestbreite +
     horizontal wischbar (wie die Vorhersage-Streifen), damit sie lesbar bleiben. */
  .lcw-chartscroll, .lct-chartwrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  /* Fade-Hinweis nur beim Tide-Chart (der scrollt); der 6h-Chart passt jetzt
     ganz aufs Display → keine Maske (sonst „Schatten" über den letzten Werten). */
  .lct-chartwrap {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
  }
  .lcw-chartscroll::-webkit-scrollbar, .lct-chartwrap::-webkit-scrollbar { display: none; }
  /* 6-Stunden-Chart: keine Mindestbreite mehr — die Breite kommt jetzt aus dem JS
     (an den Viewport angepasst), damit die Stunden zusammenrücken und es passt. */
  .lct-chartwrap .lct-chart { min-width: 580px; }
  /* Surf-Radar-Scheibe auf dem Handy deutlich kleiner (war 280 px, zu dominant). */
  .lcwv-radarwrap .msr-disc,
  .lcwv-radarwrap .lcwv-radar { width: 210px; height: 210px; }
}

/* Werbe-Overflow-Fix (Seite nicht sprengen) ist global nach base.css gezogen. */

/* ===== Zeitraffer-Sammelseite /livecams/timelapse/ (2026-08-09) ===== */
.tlpage { padding-bottom: 40px; }
.tlpage-hero { margin: 6px 0 22px; }
.tlpage-hero__title {
  margin: 0 0 8px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
  font-weight: 800; letter-spacing: -.01em; color: var(--text);
}
.tlpage-hero__sub { margin: 0; max-width: 62ch; color: #bcdcf2; font-size: 14.5px; line-height: 1.55; }

.tlgrid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.tlg-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(19, 122, 162, .55), rgba(13, 80, 110, .6), rgba(10, 65, 93, .82));
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.tlg-media {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: #05161f; cursor: pointer; aspect-ratio: 16 / 9;
  overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.tlg-media--playing { cursor: default; }
.tlg-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.tlg-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #05161f; }
.tlg-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(6, 30, 44, .72); border: 1px solid rgba(104, 194, 227, .42);
  color: #cbe9f4; font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  backdrop-filter: blur(4px);
}
.tlg-badge svg { width: 13px; height: 13px; }
.tlg-play {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  color: #fff; transition: background var(--t) var(--ease);
  background: radial-gradient(circle at 50% 50%, rgba(6, 30, 44, .18), rgba(6, 30, 44, .42));
}
.tlg-play svg {
  width: 58px; height: 58px; padding: 15px; border-radius: 999px;
  background: rgba(6, 30, 44, .62); border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 8px 22px rgba(4, 39, 58, .4); transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.tlg-media:hover .tlg-play { background: radial-gradient(circle at 50% 50%, rgba(6, 30, 44, .28), rgba(6, 30, 44, .5)); }
.tlg-media:hover .tlg-play svg { transform: scale(1.06); background: rgba(104, 194, 227, .32); }
.tlg-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px 13px; }
.tlg-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.25; }
.tlg-link {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  color: #cbe9f4; font-size: 12.5px; font-weight: 700; text-decoration: none;
  white-space: nowrap; opacity: .88; transition: opacity var(--t) var(--ease);
}
.tlg-link:hover { opacity: 1; }
.tlg-link svg { width: 14px; height: 14px; }

@media (max-width: 560px) {
  .tlgrid { grid-template-columns: 1fr; gap: 14px; }
  .tlg-play svg { width: 50px; height: 50px; padding: 13px; }
}

/* ===== Mediathek: Hero · Filter · Sektionen · Theater (2026-08-09) ===== */
/* Featured-Hero */
.tlhero { margin: 4px 0 26px; }
.tlhero__stage {
  position: relative; overflow: hidden; border-radius: 20px; cursor: pointer;
  aspect-ratio: 16 / 7; background: #05161f; border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.tlhero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.tlhero.is-ready .tlhero__vid { opacity: 1; }
.tlhero__grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 30, 45, .82) 0%, rgba(4, 30, 45, .45) 42%, rgba(4, 30, 45, .05) 70%), linear-gradient(0deg, rgba(4, 30, 45, .7), transparent 45%); }
.tlhero__meta { position: absolute; left: clamp(18px, 4vw, 40px); bottom: clamp(16px, 3.4vw, 34px); right: 18px; max-width: 560px; color: #fff; }
.tlhero__tag {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
  background: rgba(244, 169, 50, .92); color: #241300; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.tlhero__title { margin: 0; font-size: clamp(1.35rem, 1rem + 2vw, 2.3rem); font-weight: 800; line-height: 1.12; text-shadow: 0 2px 18px rgba(0, 0, 0, .4); }
.tlhero__region { margin: 6px 0 0; font-size: 14px; color: #d6eefb; opacity: .92; }
.tlhero__play {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(6, 30, 44, .55); color: #fff; font-size: 14.5px; font-weight: 700;
  backdrop-filter: blur(6px); transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.tlhero__play:hover { background: rgba(104, 194, 227, .34); transform: translateY(-1px); }
.tlhero__play svg { width: 18px; height: 18px; }

/* Filter-Chips */
.tlfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.tlfilter__chip {
  cursor: pointer; padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: #cbe9f4; background: rgba(104, 194, 227, .1); border: 1px solid rgba(104, 194, 227, .3);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.tlfilter__chip:hover { background: rgba(104, 194, 227, .2); }
.tlfilter__chip.is-on { background: rgba(104, 194, 227, .9); border-color: rgba(104, 194, 227, .9); color: #04202e; }

/* Sektionen + Regionsgruppen */
.tlsec { margin: 0 0 34px; }
.tlsec__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.tlsec__title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.tlsec--tl .tlsec__title { position: relative; }
.tlgroup { margin: 0 0 26px; }
.tlgroup.is-filtered { display: none; }
.tlgroup__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 13px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tlgroup__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 9px; }
.tlgroup__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: rgba(104, 194, 227, .16); border: 1px solid rgba(104, 194, 227, .34);
  color: #cbe9f4; font-size: 11.5px; font-weight: 700;
}
.tlgroup__all {
  display: inline-flex; align-items: center; gap: 4px; color: #9fd2ea; font-size: 12.5px; font-weight: 700;
  text-decoration: none; opacity: .9; transition: opacity var(--t) var(--ease);
}
.tlgroup__all:hover { opacity: 1; }
.tlgroup__all svg { width: 14px; height: 14px; }

/* Karten-Zusatz (Hover-Vorschau + Event-Sub) */
.tlg-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; background: #05161f; }
.tlg-sub { flex: 0 0 auto; color: #9fd2ea; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* Theater-Player */
body.tl-noscroll { overflow: hidden; }
.tltheater {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 4vw, 44px); background: rgba(3, 18, 27, .86); backdrop-filter: blur(6px);
  animation: tlfade .18s var(--ease);
}
@keyframes tlfade { from { opacity: 0; } to { opacity: 1; } }
.tltheater[hidden] { display: none; }
.tltheater__box { margin: 0; width: min(1200px, 100%); }
.tltheater__vid {
  display: block; width: 100%; max-height: 82vh; border-radius: 14px; background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.tltheater__cap { margin: 12px 2px 0; color: #eaf7fc; font-size: 15px; font-weight: 700; }
.tltheater__close {
  position: absolute; top: clamp(10px, 2.5vw, 22px); right: clamp(10px, 2.5vw, 22px); cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px;
  background: rgba(6, 30, 44, .7); border: 1px solid rgba(255, 255, 255, .26); color: #fff;
  transition: background var(--t) var(--ease);
}
.tltheater__close:hover { background: rgba(104, 194, 227, .32); }
.tltheater__close svg { width: 22px; height: 22px; }

/* Höhepunkte-Sektion beim Regionsfilter ausblenden */
.tlsec[data-region="event"].is-filtered { display: none; }

@media (max-width: 640px) {
  .tlhero__stage { aspect-ratio: 4 / 3; }
  .tlgroup__head { align-items: flex-start; }
}

/* ===== Nachbar-Karten: Entfernung (2026-08-10) =====
   Nur auf der Cam-Detailseite — die Landing rendert den Ort weiterhin ohne
   diesen Wrapper, bleibt also unberührt. */
.livecam-card__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; min-width: 0;
}
.livecam-card__dist {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: #9fd2ea; white-space: nowrap;
}
.livecam-card__dist svg { width: 11px; height: 11px; flex: 0 0 auto; opacity: .85; }
/* Gleicher Standort: als Pille abgesetzt, damit der Bezug sofort auffällt. */
.livecam-card__dist.is-same {
  padding: 1px 8px; border-radius: 999px; color: #cbe9f4;
  background: rgba(104, 194, 227, .16); border: 1px solid rgba(104, 194, 227, .40);
}

/* ===== Flughafen-Cam: 3D-Live-Karte + Flugbrett unter dem Bild (2026-08-11) ===== */
.livecam-air { margin: 20px 0 0; }
.livecam-air__title { margin: 0 0 5px; font-size: 18px; font-weight: 800; color: var(--text); }
.livecam-air__lead { margin: 0 0 14px; max-width: 70ch; color: #bcdcf2; font-size: 13.5px; line-height: 1.55; }

/* Karte (mit Live-Liste im iframe) volle Breite oben, Bewegungsbrett darunter. */
.lcair-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }

/* Eingebettete 3D-Karte */
.lcair-map {
  position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: #05161f;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.lcair-map-frame { display: block; width: 100%; height: clamp(440px, 64vh, 680px); border: 0; }
.lcair-full {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  background: rgba(6, 22, 34, .74); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px);
  color: #eaf7fc; font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: background var(--t) var(--ease);
}
.lcair-full:hover { background: rgba(104, 194, 227, .32); }
.lcair-full svg { width: 15px; height: 15px; }

/* Ankunfts-/Abflugbrett (Klassen .apb* werden auch von airport-board.js erzeugt).
   Auf reale Breite begrenzt — zwei schmale Spalten füllen 100 % nicht sinnvoll. */
.apb {
  display: flex; flex-direction: column; min-width: 0; max-width: 640px;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, rgba(19, 122, 162, .5), rgba(13, 80, 110, .58), rgba(10, 65, 93, .8));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 13px 15px 8px;
}
.apb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.apb-h { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
.apb-stamp-wrap { font-size: 11px; color: #9fc7de; white-space: nowrap; }
.apb-stamp-wrap b { color: var(--text); font-weight: 700; }
.apb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; min-width: 0; }
/* Schmale Screens: An-/Abflug NICHT untereinander, sondern als Reiter-Umschalter —
   Überschriften werden Tabs (nebeneinander), nur die aktive Liste wird gezeigt.
   display:contents an .apb-col hebt die Verschachtelung auf, damit Überschriften +
   Listen direkte Grid-Items von .apb-cols werden. JS (airport-board.js) schaltet
   die Klasse .apb--dep. Standard = Ankünfte. */
@media (max-width: 560px) {
  .apb-cols { grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 0; }
  .apb-col { display: contents; }
  .apb-col-h {
    grid-row: 1; margin: 0; cursor: pointer; justify-content: center; user-select: none;
    padding: 9px 6px; border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, .05);
    border-bottom: 2px solid transparent; transition: opacity .15s, background .15s, border-color .15s;
  }
  .apb-col-h--arr { grid-column: 1; }
  .apb-col-h--dep { grid-column: 2; }
  .apb-list { grid-column: 1 / -1; grid-row: 2; margin: 8px 0 0; padding-left: 11px; }
  /* aktive Liste zeigen, andere aus; inaktiven Reiter dämpfen */
  .apb:not(.apb--dep) [data-apb-dep], .apb.apb--dep [data-apb-arr] { display: none; }
  .apb:not(.apb--dep) .apb-col-h--dep, .apb.apb--dep .apb-col-h--arr { opacity: .42; }
  /* aktiven Reiter markieren + farbiger linker Rand der Liste (Ankünfte gelb, Abflüge grün) */
  .apb:not(.apb--dep) .apb-col-h--arr { background: rgba(255, 230, 0, .12); border-bottom-color: #ffe600; }
  .apb.apb--dep .apb-col-h--dep { background: rgba(40, 249, 21, .12); border-bottom-color: #28f915; }
  .apb:not(.apb--dep) [data-apb-arr] { border-left: 3px solid #ffe600; }
  .apb.apb--dep [data-apb-dep] { border-left: 3px solid #28f915; }
}
.apb-col { min-width: 0; }
.apb-col-h {
  margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.apb-col-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
/* Farben wie die Flieger: Ankünfte = landend GELB, Abflüge = startend GRÜN. */
.apb-col-h--arr { color: #ffe600; }
.apb-col-h--arr::before { background: #ffe600; }
.apb-col-h--dep { color: #28f915; }
.apb-col-h--dep::before { background: #28f915; }
.apb-list { list-style: none; margin: 0 0 10px; padding: 0; }
.apb-row {
  display: flex; align-items: baseline; gap: 9px; min-width: 0;
  padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.apb-row:last-child { border-bottom: 0; }
.apb-time { flex: 0 0 auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.apb-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.apb-call { font-size: 13px; font-weight: 700; color: var(--text); }
.apb-route { font-size: 11.5px; color: #bcdcf2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apb-lbl { opacity: .68; }
.apb-priv { font-style: italic; opacity: .7; }
.apb-empty { list-style: none; padding: 8px 0; color: #9fc7de; font-size: 12.5px; }

/* Board + Tages-Statistik nebeneinander (Board max 640, Statistik füllt den Rest). */
.lcair-board-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.lcair-board-row .apb { flex: 1 1 420px; }
.airstats { position: relative; overflow: hidden; flex: 1 1 320px; min-width: 0;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, rgba(19, 122, 162, .5), rgba(13, 80, 110, .58), rgba(10, 65, 93, .8));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 15px 17px; color: var(--text); }
.airstats[hidden] { display: none; }
/* dezenter Lichtschein oben rechts — später hier die Europa-Grafik */
.airstats::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(115% 75% at 88% -8%, rgba(104, 194, 227, .16), transparent 58%); }
.airstats > *:not(.airstats-map) { position: relative; z-index: 1; }

/* Stilisierte Europa-Karte (feste Fluglinien) als dezenter Hintergrund. */
.airstats-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .42; }
.airstats-land { fill: rgba(130, 190, 220, .08); stroke: rgba(155, 210, 238, .16); stroke-width: .9; stroke-linejoin: round; }
.airstats-arc { fill: none; stroke: rgba(120, 200, 235, .5); stroke-width: 1; stroke-linecap: round; }
.airstats-city { fill: rgba(185, 222, 240, .8); }
.airstats-cityt { fill: rgba(185, 222, 240, .5); font-size: 8px; font-weight: 600; font-family: var(--font-display, sans-serif); }
.airstats-hubglow { fill: rgba(232, 59, 139, .3); }
.airstats-hub { fill: #e83b8b; stroke: #fff; stroke-width: 1; }
.airstats-hubt { fill: rgba(255, 255, 255, .85); font-size: 9px; font-weight: 700; font-family: var(--font-display, sans-serif); }
.airstats-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; }

/* Kopf: links Titel + Ankunft/Abflug-Pillen, rechts der Hero „Flüge heute" */
.airstats-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.airstats-headL { min-width: 0; }
.airstats-hero { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto;
  padding: 7px 16px 8px; border-radius: 22px;
  background: rgba(104, 194, 227, .1); border: 1px solid rgba(104, 194, 227, .3);
  box-shadow: 0 2px 10px -4px rgba(104, 194, 227, .35); }
.airstats-hero__ic { width: 26px; height: 26px; flex: 0 0 auto; color: #68c2e3; opacity: .95;
  filter: drop-shadow(0 0 6px rgba(104, 194, 227, .5)); }
.airstats-big { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.5px; }
.airstats-today__lbl { font-size: 11.5px; color: #bcdcf2; margin-top: 3px; }
.airstats-today__split { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
.airstats-t { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 11.5px; color: #cfe3f0; }
.airstats-t::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.airstats-t b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.airstats-t--arr::before { background: #ffe600; box-shadow: 0 0 6px rgba(255, 230, 0, .6); }
.airstats-t--dep::before { background: #28f915; box-shadow: 0 0 6px rgba(40, 249, 21, .55); }

.airstats-sec { margin-top: 16px; }
.airstats-h { margin: 0 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9fc7de; }
.airstats-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.airstats-bar { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) 88px auto; align-items: center; gap: 10px;
  padding: 3px 5px; margin: 0 -5px; border-radius: 7px; transition: background .12s; }
.airstats-bar:hover { background: rgba(255, 255, 255, .05); }
.airstats-bar__r { font-size: 11px; font-weight: 700; color: #7fa6bd; text-align: right; font-variant-numeric: tabular-nums; }
.airstats-bar__l { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
.airstats-bar__lt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.airstats-bar:hover .airstats-bar__l { color: #fff; }
.airstats-logo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 21px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 1px 3px rgba(0, 0, 0, .3); }
.airstats-bar__t { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.airstats-bar__f { display: block; height: 100%; border-radius: 4px; transform-origin: left center; animation: airstatsGrow .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes airstatsGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.airstats-bar__n { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.airstats-stamp { margin-top: 15px; font-size: 10.5px; color: #9fc7de; }
@media (prefers-reduced-motion: reduce) { .airstats-bar__f { animation: none; } }
@media (max-width: 720px) { .airstats-bar { grid-template-columns: 1.4em minmax(0, 1fr) 60px auto; } }

/* ===== Flughafen-Cam: Kopf mit Dashboard-Knopf (Etappe 1, 2026-08-11) ===== */
.livecam-air__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 14px; flex-wrap: wrap; }
.livecam-air__intro { min-width: 0; flex: 1 1 340px; }
/* Auffälliger Magenta-Knopf (User 2026-08-20). */
.livecam-air__dash {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 18px; border-radius: 12px; border: 1px solid rgba(225, 29, 116, .55);
  background: linear-gradient(180deg, #e83b8b 0%, #cf1668 100%);
  color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1;
  box-shadow: 0 4px 14px rgba(225, 29, 116, .35);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.livecam-air__dash:hover { background: linear-gradient(180deg, #ef4f97 0%, #db2277 100%); box-shadow: 0 6px 18px rgba(225, 29, 116, .45); transform: translateY(-1px); }
.livecam-air__dash svg { width: 19px; height: 19px; flex: 0 0 auto; }
.livecam-air__dash-live { display: inline-flex; align-items: center; gap: 6px; margin-left: 3px; padding-left: 11px; border-left: 1px solid rgba(255, 255, 255, .35); font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.livecam-air__dash-live b { color: #fff; font-variant-numeric: tabular-nums; }
.livecam-air__dash-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); animation: airdashPulse 2s infinite; }

/* ===== Höhepunkte & Events dieser Cam (aus dem Mediathek-Manifest) ===== */
/* ---- Media-Zeile: Timelapse (links, breiter) + Cam-Videos (rechts, verlinkt) ---- */
/* align-items: stretch → die rechte Kachel wird so hoch wie der Timelapse links. */
.livecam-media-row { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; margin: 24px 0 0; }
/* Zwei Spalten nur, wenn der Timelapse wirklich sichtbar ist (JS entfernt [hidden])
   UND Videos existieren; sonst bleibt es einspaltig. */
.livecam-media-row:has(.livecam-timelapse:not([hidden])):has(.livecam-events) {
  grid-template-columns: minmax(0, 1fr) clamp(220px, 25%, 300px);
}
/* Timelapse innerhalb der Zeile füllt seine Spalte – ohne eigenes max-width/margin. */
.livecam-media-row .livecam-timelapse { max-width: none; margin: 0; }

.livecam-events { margin: 0; }
.livecam-events__title { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 12px; }
.livecam-events__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Einspaltig (kein sichtbarer Timelapse — eigene Videos ODER „Neu in der Mediathek"-Teaser):
   die 2 Karten als kompakte Reihe, nicht über die ganze Seitenbreite. */
.livecam-media-row:not(:has(.livecam-timelapse:not([hidden]))) .livecam-events { max-width: 620px; }
.livecam-media-row:not(:has(.livecam-timelapse:not([hidden]))) .livecam-events__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --- Zwei-Spalten-Fall: rechte Spalte als EINE Kachel (wie der Timelapse), gleiche Höhe --- */
.livecam-media-row:has(.livecam-timelapse:not([hidden])) .livecam-events {
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, rgba(19, 122, 162, .55), rgba(13, 80, 110, .6), rgba(10, 65, 93, .82));
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 15px 15px 16px;
}
.livecam-media-row:has(.livecam-timelapse:not([hidden])) .livecam-events__title { font-size: .95rem; letter-spacing: .01em; margin: 0; }
/* Videos untereinander, füllen die Kachelhöhe zu gleichen Teilen */
.livecam-media-row:has(.livecam-timelapse:not([hidden])) .livecam-events__grid { flex: 1 1 auto; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 12px; }
.livecam-media-row:has(.livecam-timelapse:not([hidden])) .livecam-events__card { display: flex; flex-direction: column; min-height: 0; }
.livecam-media-row:has(.livecam-timelapse:not([hidden])) .livecam-events__thumb { flex: 1 1 auto; aspect-ratio: auto; min-height: 96px; }
.livecam-media-row:has(.livecam-timelapse:not([hidden])) .livecam-events__more { margin-top: 0; }

/* Schmale Viewports: zwei Spalten quetschen sich (Titel bricht buchstabenweise) →
   Zeitraffer und Höhepunkte UNTEREINANDER stapeln und die Events wieder als
   normales Kartenraster statt gestreckter Kachel darstellen. */
@media (max-width: 640px) {
  .livecam-media-row:has(.livecam-timelapse:not([hidden])):has(.livecam-events) {
    grid-template-columns: 1fr;
  }
  .livecam-media-row:has(.livecam-timelapse:not([hidden])) .livecam-events__grid {
    grid-auto-rows: auto; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .livecam-media-row:has(.livecam-timelapse:not([hidden])) .livecam-events__thumb {
    aspect-ratio: 16 / 9; min-height: 0; flex: 0 0 auto;
  }
}

.livecam-events__card { display: block; margin: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; }
.livecam-events__card:hover { border-color: var(--accent, #68c2e3); transform: translateY(-2px); box-shadow: var(--shadow); }
.livecam-events__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #05161f; overflow: hidden; }
.livecam-events__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.livecam-events__play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px; background: rgba(5, 22, 31, .55); border: 1px solid rgba(255, 255, 255, .5); color: #fff; transition: background .15s, transform .15s; }
.livecam-events__card:hover .livecam-events__play { background: rgba(104, 194, 227, .85); transform: scale(1.07); }
.livecam-events__play svg { width: 22px; height: 22px; margin-left: 2px; }
.livecam-events__cap { display: block; padding: 9px 12px 11px; }
.livecam-events__t { display: block; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.livecam-events__d { display: block; margin-top: 3px; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- „Alle Höhepunkte & Events" / „Zur Mediathek" – heller Logo-Orange-Button,
       weiße Schrift MIT Text-Schatten, flach (kein Halo, kein Box-Schatten).
       Größe wie „Alle Zeitraffer ansehen" (.lctl-more), NICHT volle Kachelbreite. --- */
.livecam-events__more {
  align-self: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--brand-sun-2); color: #fff; font-weight: 700; font-size: 12.5px;
  text-decoration: none; text-shadow: 0 1px 2px rgba(90, 45, 0, .45);
  background: linear-gradient(180deg, #f9c268 0%, var(--brand-sun) 100%);
  transition: filter .15s ease, transform .12s ease;
}
.livecam-events__more:hover { filter: brightness(1.06); }
.livecam-events__more:active { transform: translateY(1px); }
.livecam-events__more svg { width: 14px; height: 14px; }

/* Verlinkungs-Pille zu den Ortsseiten (Station/Vorhersage/Luft/Wellen/Sonne).
   Gleiche Optik wie .livecam-events__more, aber links unter dem Abschnitt. */
.lc-morelink {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--brand-sun-2); color: #fff; font-weight: 700; font-size: 12.5px;
  text-decoration: none; text-shadow: 0 1px 2px rgba(90, 45, 0, .45);
  background: linear-gradient(180deg, #f9c268 0%, var(--brand-sun) 100%);
  transition: filter .15s ease, transform .12s ease;
}
.lc-morelink:hover { filter: brightness(1.06); text-decoration: none; }
.lc-morelink:active { transform: translateY(1px); }
.lc-morelink svg { width: 14px; height: 14px; }

/* --- In-Place-Theater: Klick auf eine Video-Kachel öffnet das Video groß,
       OHNE die Seite zu wechseln (livecam-events.js baut das Overlay). --- */
.lc-theater[hidden] { display: none; }
.lc-theater { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 32px); background: rgba(4, 18, 26, .86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.lc-theater__box { position: relative; width: min(1100px, 96vw); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
.lc-theater__vid { width: 100%; max-height: 82vh; background: #000; border-radius: 12px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.lc-theater__cap { margin: 0; text-align: center; color: #e8f3fb; font-size: .95rem; font-weight: 600; }
.lc-theater__close { position: absolute; top: -14px; right: -6px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 30, 42, .9); color: #fff; cursor: pointer; transition: background .15s, transform .15s; }
.lc-theater__close:hover { background: var(--brand-sun); color: #0a415d; transform: scale(1.06); }
.lc-theater__close svg { width: 18px; height: 18px; }
body.lc-theater-open { overflow: hidden; }
@media (max-width: 600px) { .lc-theater__close { top: -46px; right: 0; } }

/* ===== Mediathek: „Weitere Höhepunkte & Events" (CSS-Toggle, kein JS) ===== */
.tlsec__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tlgrid--clamp > .tlg-card:nth-child(n+4) { display: none; }  /* Mediathek: nur 3 zeigen, Rest via „Mehr Videos" (NICHT an .tlsec__toggle koppeln!) */
.tlsec__more { display: flex; width: fit-content; margin: 16px auto 0; align-items: center; gap: 7px; padding: 10px 18px; cursor: pointer; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); font-weight: 600; font-size: .92rem; color: var(--text); transition: background .15s, border-color .15s; }
.tlsec__more:hover { background: var(--surface); border-color: var(--accent, #68c2e3); }
.tlsec__more svg { width: 17px; height: 17px; transition: transform .2s; }
.tlsec__toggle:checked ~ .tlsec__more svg { transform: rotate(180deg); }
.tlsec__more-b { display: none; }
.tlsec__toggle:checked ~ .tlsec__more .tlsec__more-a { display: none; }
.tlsec__toggle:checked ~ .tlsec__more .tlsec__more-b { display: inline; }

/* ===== Live-Dashboard: Vollbild-Karte mit schwebenden Panels (2026-08-16) ===== */
body.airdash-open { overflow: hidden; }
/* base.css reserviert global `html { scrollbar-gutter: stable }` — der leere Track
   bleibt sonst als Streifen am rechten Rand stehen (Safari dunkel = Overlay-Grund,
   Firefox hell = Seiten-Grund). Body-`overflow:hidden` allein reicht browserübergreifend
   NICHT. Deshalb im offenen Dashboard die WURZEL hart sperren + Gutter-Reservierung
   aufheben — dann kann die Seite gar nicht scrollen, kein Streifen, in jedem Browser. */
html.airdash-open { overflow: hidden !important; scrollbar-gutter: auto !important; }
body.airdash-drag { user-select: none; }
.airdash { position: fixed; inset: 0; z-index: 9500; background: #04121b; display: flex; flex-direction: column; animation: airdashFade .18s var(--ease); }
.airdash[hidden] { display: none; }
@keyframes airdashFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes airdashPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* KEINE Kopfleiste mehr — alles schwebt über der Karte (wie die Erdbeben-Seite).
   Titel + Logo oben mittig; Pillen · Datum/Uhrzeit · Schließen oben rechts.
   Gemeinsame Glass-Optik: dunkelblaues Panel wie die Liste rechts. */
.airdash-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; animation: airdashPulse 2s infinite; flex: 0 0 auto; }

/* Titel + Logo, oben mittig */
.airdash-title { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; max-width: calc(100% - 24px); }
.airdash-titlepill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px;
  background: rgba(8,40,58,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(104,194,227,.28); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.airdash-titletxt { font-weight: 700; font-size: 14px; color: #eaf7fc; letter-spacing: .01em; white-space: nowrap; }
.airdash-title .airdash-logo { height: 34px; width: auto; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }

/* Oben rechts: Cluster aus Pillen + Datum/Uhrzeit-Kachel + Schließen */
.airdash-topright { position: absolute; top: 12px; right: 12px; z-index: 21;
  display: flex; align-items: center; gap: 9px; }
.airdash-clockcard { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px;
  padding: 5px 12px; border-radius: 12px; background: rgba(8,40,58,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(104,194,227,.28); box-shadow: 0 3px 12px rgba(0,0,0,.42); }
.airdash-date { font-size: 11px; color: #bcdcf2; opacity: .9; line-height: 1.15; font-variant-numeric: tabular-nums; }
.airdash-time { font-family: var(--font-mono, ui-monospace, monospace); font-size: 15px; color: #eaf7fc; line-height: 1.15; font-variant-numeric: tabular-nums; }
.airdash-close { width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border-radius: 10px; background: rgba(8,40,58,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(104,194,227,.28); color: #eaf7fc; box-shadow: 0 3px 12px rgba(0,0,0,.42); transition: background .15s, border-color .15s, color .15s; }
.airdash-close:hover { background: rgba(244,169,50,.92); border-color: rgba(244,169,50,.92); color: #241300; }
.airdash-close svg { width: 20px; height: 20px; }

/* Kategorie-Pillen (im Cluster oben rechts, links vom Datum): dunkelblaues Glas
   wie die Liste, Rand dezent in der Gruppenfarbe (--pc), Icon trägt die Farbe. */
.airdash-pills { display: flex; gap: 9px; }
.airdash-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; cursor: pointer;
  border-radius: 999px; font: inherit; line-height: 1; color: var(--pc, #68c2e3);
  /* Hintergrund wie das Listen-Panel rechts; Rand dezent in der Gruppenfarbe
     (gedämpft, kein Neon-Halo), Farbe trägt das Icon. */
  background: rgba(8, 40, 58, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--pc, #68c2e3) 62%, transparent);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .42);
  transition: opacity .15s, filter .15s, border-color .15s; }
.airdash-pill__ic { display: inline-flex; }
.airdash-pill__ic svg { width: 16px; height: 16px; display: block; }
.airdash-pill b { color: #fff; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.airdash-pill [data-ad-pill-l] { color: #d3e6f2; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.airdash-pill:hover { filter: brightness(1.14); }
.airdash-pill.is-off { opacity: .38; filter: grayscale(.55); box-shadow: 0 3px 10px rgba(0,0,0,.4); }

/* Karte fuellt den ganzen Body; Cam + Wetter schweben darueber. */
.airdash-body { position: relative; flex: 1; min-height: 0; }
.airdash-map { position: absolute; inset: 0; background: #05161f; }
.airdash-map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Webcam schwebt oben links, verschiebbar (Griff oben) + groessenverstellbar (Kreis unten rechts). */
/* overflow VISIBLE, damit der Größengriff außerhalb des Videos sitzen darf
   (sonst verdeckt ihn die Player-Steuerleiste beim Hover). Die runden Ecken +
   das Clipping wandern auf den Video-Slot. */
.airdash-cam { position: absolute; left: 16px; top: 16px; width: 380px; z-index: 5;
  border-radius: 12px; overflow: visible; background: #000;
  box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14); }
.airdash-cam-slot { border-radius: 12px; overflow: hidden; display: block; }
.airdash-cam-bar { position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 6; cursor: move;
  background: linear-gradient(180deg, rgba(4,20,30,.55), rgba(4,20,30,0)); }
.airdash-cam-slot .livecam-player-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; }
/* Größengriff hängt am äußeren Eck ÜBER allem (auch der Video-Steuerleiste). */
.airdash-cam-grip { position: absolute; right: -8px; bottom: -8px; z-index: 40; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(104,194,227,.95); border: 2px solid #fff; cursor: nwse-resize; box-shadow: 0 2px 8px rgba(0,0,0,.6);
  transition: width .12s var(--ease), height .12s var(--ease), right .12s var(--ease), bottom .12s var(--ease); }
.airdash-cam-grip:hover { width: 30px; height: 30px; right: -12px; bottom: -12px; }

/* Wetter UNTEN LINKS als Cluster: große mitdrehende Windrose + zwei Kacheln
   (Temp/Feuchte mit Thermometer · Regen/Druck). Container selbst transparent —
   jede Kachel/Rose bringt ihr eigenes Glas mit. */
.airdash-wx { position: absolute; left: 16px; right: auto; bottom: 16px; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: #eaf7fc; }
/* Kacheln + Rose nebeneinander (gleich hoch); der Zeitstempel als Pille darunter. */
.adwx-main { display: flex; align-items: stretch; gap: 10px; }
.airdash-wx > * { --glass: rgba(8,40,58,.82); }

/* Windrose — Instrument-Look: Verlauf-Face, Skalenstriche, glühender Windpfeil. */
.adwx-rose { position: relative; flex: 0 0 auto; width: 156px;
  display: flex; flex-direction: column; align-items: center; padding: 10px 9px 9px; border-radius: 18px;
  background: rgba(8,40,58,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(104,194,227,.28); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.adwx-rose svg { width: 138px; height: 138px; display: block; }
.adwx-glow { fill: none; stroke: var(--wc, #68c2e3); stroke-width: 2; opacity: .5;
  filter: drop-shadow(0 0 4px var(--wc, #68c2e3)); }
.adwx-face { fill: url(#adwxFace); }
.adwx-ring { fill: none; stroke: rgba(180,220,240,.5); stroke-width: 1.4; }
.adwx-tick { stroke: rgba(180,220,240,.45); stroke-width: 1; }
.adwx-tick--maj { stroke: rgba(210,235,248,.85); stroke-width: 1.6; }
.adwx-nmark { fill: #ff5a48; filter: drop-shadow(0 0 3px rgba(255,80,60,.7)); }
.adwx-card { fill: #eef7fc; font-size: 12px; font-weight: 800; text-anchor: middle; }
.adwx-card--min { fill: #9cc0d6; font-size: 10.5px; font-weight: 700; }
.adwx-arrowg { filter: drop-shadow(0 0 4px var(--wc, #68c2e3)); }
.adwx-warr { stroke: var(--wc, #68c2e3); stroke-width: 5.5; stroke-linecap: round; }
.adwx-whead { fill: var(--wc, #68c2e3); }
.adwx-wtail { fill: var(--wc, #68c2e3); }
.adwx-hub { fill: #0b2f45; stroke: rgba(234,247,252,.85); stroke-width: 1.6; }
.adwx-hub2 { fill: #eaf7fc; }
.adwx-windnum { margin-top: 5px; font-size: 20px; font-weight: 800; line-height: 1; }
.adwx-windnum small { font-size: 11px; font-weight: 600; color: #9fc7de; }
.adwx-windsub { margin-top: 3px; font-size: 10.5px; color: #bcdcf2; white-space: nowrap; }
.adwx-windgust { margin-top: 1px; color: #9fc7de; }

/* Kacheln rechts der Rose */
.adwx-tiles { display: flex; flex-direction: column; gap: 8px; }
.adwx-tile { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 11px; padding: 9px 13px; border-radius: 14px; min-width: 148px;
  background: rgba(8,40,58,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(104,194,227,.28); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.adwx-thermo { width: 22px; height: 54px; flex: 0 0 auto; }
.adwx-thermo .th-tube { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.28); stroke-width: 1.2; }
.adwx-thvals { min-width: 0; }
.adwx-big { font-size: 28px; font-weight: 800; line-height: 1; }
.adwx-big small { font-size: 13px; font-weight: 600; color: #9fc7de; margin-left: 2px; }
.adwx-sub { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-size: 11px; color: #9fc7de; }
.adwx-sub b { color: #eaf7fc; font-weight: 700; }
.adwx-rp { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
.adwx-rpitem { display: flex; align-items: center; gap: 9px; }
.adwx-rpitem b { font-size: 15px; font-weight: 700; color: #eaf7fc; }
.adwx-rpitem b small { font-size: 10px; font-weight: 600; color: #9fc7de; }
.adwx-rpitem > div > span { display: block; font-size: 10px; color: #9fc7de; margin-top: 1px; }
.adwx-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.adwx-ic--rain { fill: #68c2e3; }
.adwx-ic--pres { color: #9fc7de; }
/* Zeitstempel der Wetterdaten als Pille (zentriert unter dem Cluster). */
.adwx-stamp { align-self: center; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 999px; font-size: 10.5px; color: #bcdcf2; font-variant-numeric: tabular-nums;
  background: rgba(8,40,58,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(104,194,227,.28); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.adwx-stamp svg { width: 12px; height: 12px; opacity: .8; flex: 0 0 auto; }

/* Map-Controls im Parent UNTER der iframe-Control-Spalte (right:314/top:64, 4×40px
   + 6er-Lücken → Unterkante ~242): Wetter (top:248) und Liste (top:294) ein-/ausblenden.
   AN = aktiv = orange (3D), AUS (`.is-off`) = neutrale Glas-Optik wie die anderen Knöpfe. */
.airdash-wxbtn, .airdash-listbtn { position: absolute; right: 314px; left: auto; bottom: auto; z-index: 6;
  width: 40px; height: 40px; display: grid; place-items: center; border: 0;
  border-radius: var(--radius-sm, 10px); cursor: pointer;
  background: linear-gradient(180deg, #f8b84f 0%, #ef9410 100%); color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(150,75,0,.42);
  transition: background .15s, box-shadow .15s, transform .15s, filter .15s; }
.airdash-wxbtn { top: 248px; }
.airdash-listbtn { top: 294px; }
.airdash-wxbtn:hover, .airdash-listbtn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.airdash-wxbtn.is-off, .airdash-listbtn.is-off {   /* aus → neutral wie die Karten-Bedienknöpfe */
  background: var(--map-control-bg, rgba(10,65,93,.95)); color: var(--map-control-ink, #fff);
  -webkit-backdrop-filter: var(--map-control-blur, blur(16px)); backdrop-filter: var(--map-control-blur, blur(16px));
  box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.airdash-wxbtn svg, .airdash-listbtn svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(60,30,0,.7)); }
.airdash-wxbtn.is-off svg, .airdash-listbtn.is-off svg { filter: none; }   /* auf dunklem Grund kein Schatten nötig */

/* ── Ausziehblatt (Bottom-Sheet) — Wrapper. DESKTOP unsichtbar: Webcam + Wetter
   bleiben schwebende, absolut positionierte Panels wie bisher (display:contents
   löst den Wrapper auf). Nur mobil wird daraus das Blatt unten. ── */
.airdash-sheet, .airdash-sheet-inner { display: contents; }
.airdash-sheet-grip { display: none; }

@media (max-width: 760px) {
  /* MOBIL: 3D-Karte = Vollbild-Hintergrund; Webcam + Wetter im Ausziehblatt unten. */
  .airdash-sheet {
    display: flex; flex-direction: column;
    position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 30;
    background: linear-gradient(180deg, rgba(10,50,70,.94), rgba(5,24,36,.985));
    border-top-left-radius: 18px; border-top-right-radius: 18px;
    box-shadow: 0 -12px 42px rgba(0,0,0,.5); will-change: transform;
    transform: translateY(calc(100% - 112px));                 /* eingeklappt: Griff + Vorschau */
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
  }
  /* Drei Schnappstufen (eingeklappt · nur Webcam · Webcam+Wetter) treibt jetzt das JS
     per Inline-transform — die Basisregel oben ist der eingeklappte Startzustand. */
  .airdash-sheet-grip { display: flex; align-items: center; justify-content: center;
    height: 28px; flex: 0 0 auto; border: 0; background: transparent; cursor: grab; touch-action: none; }
  .airdash-sheet-grip span { width: 46px; height: 5px; border-radius: 999px; background: rgba(234,247,252,.42); }
  .airdash-sheet-inner { display: flex; flex-direction: column; gap: 14px;
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 12px 22px; }

  /* Panels im Blatt: statisch, volle Breite. !important überschreibt den vom Desktop-
     Drag/Resize gespeicherten Inline-Style (left/top/width 380px), der sonst überläuft. */
  .airdash-cam { position: static !important; left: auto !important; top: auto !important; width: 100% !important; z-index: auto; }
  .airdash-wx  { position: static; left: auto; right: auto; bottom: auto; width: 100%; }
  /* Wetterdaten NEBENEINANDER: links Kacheln (Temp + Rest), rechts Windrose. */
  .adwx-main { flex-direction: row; align-items: flex-start; gap: 12px; }
  .adwx-tiles { flex: 1 1 auto; min-width: 0; }
  .adwx-rose { flex: 0 0 auto; width: 144px; }
  .adwx-rose svg { width: 128px; height: 128px; }
  /* Kacheln natürliche Höhe (flex:1 1 0 bräuchte eine Container-Höhe, die es mobil
     bei align-items:flex-start nicht gibt → sonst kollabieren sie und überlappen). */
  .adwx-tile { flex: 0 0 auto; min-width: 0; }
  .adwx-thermo { height: 44px; }
  /* Desktop-only Bedienelemente weg — die LISTEN-Umschaltung bleibt (siehe unten). */
  .airdash-cam-bar, .airdash-cam-grip, .airdash-wxbtn { display: none !important; }

  /* Kopf: Titel-Pille links, Uhr + X rechts, darunter Pillen-Reihe, darunter das Logo. */
  .airdash-title { top: 10px; left: 10px; transform: none; align-items: flex-start; }
  .airdash-titletxt { font-size: 12px; }
  .airdash-topright { top: 10px; right: 10px; gap: 6px; }
  .airdash-clockcard { padding: 4px 9px; }
  .airdash-time { font-size: 13px; }
  .airdash-pills { position: fixed; top: 52px; left: 8px; right: 8px; z-index: 22;
    overflow-x: auto; flex-wrap: nowrap; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  .airdash-pills::-webkit-scrollbar { display: none; }
  .airdash-pill { flex: 0 0 auto; padding: 5px 9px; }
  .airdash-pill [data-ad-pill-l] { display: none; }
  /* Logo UNTER die Pillen ziehen (lag sonst dahinter). */
  .airdash-title .airdash-logo { position: fixed; top: 88px; left: 12px; height: 22px; z-index: 20;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
  /* Listen-Umschaltung bleibt: eigener Knopf unten rechts, über dem eingeklappten Blatt. */
  /* Listen-Umschalter oben an die Map-Control-Spalte (rechts) anheften — als 5. Knopf
     unter den iframe-Steuerknöpfen (die bei top:80 stehen, 4×40 + 3×6 ≈ 258). */
  .airdash-listbtn { top: 266px; bottom: auto; right: 12px; left: auto; }
}