/* =============================================================================
   ANS ENDE VON lp24-map.css (oder lp24.css) ANHÄNGEN
   Gezeiten-Wellengrafik — JS: template/lib/lp24/lp24-tides.js
   ============================================================================= */

.lp24-tides {
  --lp24-tides-fill-top: #7fc8e8;
  --lp24-tides-fill-bottom: #7fc8e8;
  --lp24-tides-line: #0077a8;
  --lp24-tides-now: #e2231a;
  margin: 1.5rem 0;
  background: #f7fbfd;
  border-radius: var(--lp24-radius, 0.75rem);
  padding: 1rem 1.25rem 0.75rem;
}

.lp24-tides__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.lp24-tides__gridline {
  stroke: var(--lp24-gray-200, #e5e7eb);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.lp24-tides__area {
  /* Füllung kommt aus dem Gradient in der SVG selbst */
}

.lp24-tides__line {
  stroke: var(--lp24-tides-line);
  stroke-width: 2.5;
}

.lp24-tides__dot {
  fill: #fff;
  stroke: var(--lp24-tides-line);
  stroke-width: 2;
}

.lp24-tides__dot--high {
  stroke: #0077a8;
}

.lp24-tides__dot--low {
  stroke: #5aa9c4;
}

.lp24-tides__label {
  font-size: 11px;
  fill: var(--lp24-gray-700, #374151);
  font-weight: 600;
}

.lp24-tides__label--sub {
  font-size: 10px;
  font-weight: 400;
  fill: var(--lp24-gray-500, #6b7280);
}

.lp24-tides__nowline {
  stroke: var(--lp24-tides-now);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.lp24-tides__nowdot {
  fill: var(--lp24-tides-now);
  stroke: #fff;
  stroke-width: 2;
}

.lp24-tides__label--now {
  fill: var(--lp24-tides-now);
  font-weight: 700;
  font-size: 12px;
}

.lp24-tides__source {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--lp24-gray-500, #6b7280);
  text-align: right;
}

.lp24-tides__source a {
  color: var(--lp24-orange, #cc6601);
  text-decoration: none;
}
.lp24-tides__source a:hover {
  text-decoration: underline;
}

.lp24-tides__error {
  margin: 0;
  padding: 1rem 0;
  color: var(--lp24-gray-500, #6b7280);
  font-size: 0.875rem;
  text-align: center;
}

@media (max-width: 480px) {
  .lp24-tides {
    padding: 0.75rem 0.75rem 0.5rem;
  }
  .lp24-tides__label {
    font-size: 10px;
  }
  .lp24-tides__label--sub {
    font-size: 9px;
  }
}

/* =============================================================================
   HERO-INTEGRATION
   Formatfüllende Variante: Container heißt im Hero-HTML-Feld
   .lp24-hero-tides-container (statt der generischen .lp24-tides-Box für den
   Artikelbereich). Gleiches :has()-Muster wie bei Wassertemperatur-Karte
   und Flugkarte weiter oben in dieser Datei — layout.html bleibt
   unverändert. Die id bleibt "lp24-tides", damit lp24-tides.js ohne
   Änderung funktioniert; nur die zusätzliche Klasse steuert das Aussehen.

   HTML im CP-HTML-Feld (Geschwister-Struktur):
     <div class="lp24-hero-text"> ...Titel/Subtitle/Teaser... </div>
     <div class="lp24-hero-tides-container" id="lp24-tides" data-hours="30"></div>
   ============================================================================= */

.lp24-hero:has(.lp24-hero-tides-container) .lp24-hero-inner {
  position: relative;
  /* Exakt das Seitenverhältnis der SVG-viewBox (720 x 260) aus
     lp24-tides.js — dadurch skaliert preserveAspectRatio="none" x und y
     gleichmäßig, keine Verzerrung. Bewusst flacher als die 16:9-Boxen der
     anderen Hero-Varianten, weil eine Wellengrafik keine große Höhe
     braucht (siehe Projektdoku Abschnitt "kann auch weniger hoch sein"). */
  aspect-ratio: 720 / 260;
  min-height: 220px;
  max-height: 55vh;
  height: auto;
  overflow: hidden;
}

.lp24-hero-tides-container {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #eaf6fb 0%, #d7edf7 55%, #c3e3f2 100%);
  display: flex;
  align-items: stretch;
}

.lp24-hero-tides-container .lp24-tides__svg {
  width: 100%;
  height: 100%;
}

/* Text-Card oben links, exakt wie bei den anderen Hero-Map-Varianten */
.lp24-hero:has(.lp24-hero-tides-container) .lp24-hero-text {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 3;
  max-width: 20rem;
  padding: .875rem 1.125rem;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--lp24-radius-sm, 0.5rem);
  box-shadow: var(--lp24-shadow, 0 4px 12px rgba(0, 0, 0, .10));
}

.lp24-hero:has(.lp24-hero-tides-container) .lp24-page-title {
  font-size: 1.125rem;
  line-height: 1.25;
  margin: 0 0 .25rem;
}
.lp24-hero:has(.lp24-hero-tides-container) .lp24-hero-subtitle {
  font-size: .875rem;
  margin: 0 0 .35rem;
}
.lp24-hero:has(.lp24-hero-tides-container) .lp24-hero-teaser p {
  font-size: .8125rem;
  line-height: 1.45;
  margin: 0;
}

/* Quellenangabe als Overlay unten rechts statt Fließtext unter der Box */
.lp24-hero-tides-container .lp24-tides__source {
  position: absolute;
  bottom: .75rem;
  right: 1rem;
  margin: 0;
  padding: .25rem .625rem;
  background: rgba(255, 255, 255, .72);
  border-radius: var(--lp24-radius-sm, 0.5rem);
  font-size: .6875rem;
}

/* Etwas kräftigere Beschriftungen, da sie jetzt auf einem Farbverlauf
   statt auf weißem Grund liegen — Lesbarkeit sichern */
.lp24-hero-tides-container .lp24-tides__label,
.lp24-hero-tides-container .lp24-tides__label--now {
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

@media (max-width: 700px) {
  .lp24-hero:has(.lp24-hero-tides-container) .lp24-hero-text {
    top: .75rem;
    left: .75rem;
    right: .75rem;
    max-width: none;
  }
  .lp24-hero-tides-container .lp24-tides__source {
    display: none;
  }
}