/* ==========================================================================
   Golfriege ETUF – Willkommens-Overlay mit Statuspanel
   Version 3.0

   Neu gegenüber 2.0:
   - Logo und Begrüßung stehen frei auf dem Video, ohne eigenen Kasten
   - Panel darunter zentriert, deutlich transparenter
   - Schriften der Website: DIN 1451 W01 für Titel, Neue Helvetica W01 für Text
   - Mobil: Video als Hochformat-Ausschnitt, Panel kompakt mit Kurztexten

   Ablage:    files/data/golf/elemente/golf-status-panel.css
   Einbinden: per <link> im HTML-Inhaltselement, weil das Theme-Modul für
              den Redaktions-Account gesperrt ist.

   Zur Bühne: auf etuf.de heißt der Artikel mit dem Video #teaser-area-4.
   Damit dort keine CSS-Klasse gesetzt werden muss, sprechen alle
   Bühnen-Regeln beide Varianten an: :is(.gsp-buehne, #teaser-area-4).
   Wird die Klasse später gesetzt, funktioniert es genauso.
   ========================================================================== */

:root {
  --gsp-navy: #003780;
  --gsp-rot: #ef6535;
  --gsp-offen: #35d07f;
  --gsp-bald: #ffc247;
  --gsp-zu: #ff6b6b;

  /* Die beiden Webfonts lädt das ETUF-Layout bereits, wir erben sie nur. */
  --gsp-font-titel: "DIN 1451 W01", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gsp-font-text: "Neue Helvetica W01", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Bühne und Video
   -------------------------------------------------------------------------- */

:is(.gsp-buehne, #teaser-area-4) {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* Die Mindesthöhe ist der Kern des ganzen Layouts.

   Das Video ist 1280x720, also 16:9. Bei 390 px Fensterbreite wäre es
   damit nur 220 px hoch, bei 1024 px nur 576 px. Auf so flache Flächen
   passt das Overlay nicht. Statt für jede Gerätegröße eine eigene
   Umbruchregel zu pflegen, erzwingt eine einzige Mindesthöhe genug
   Fläche und object-fit:cover beschneidet den Ausschnitt sauber.

     max(340px, ...)   Untergrenze, damit das Panel auch im Querformat passt
     min(640px, 82vh)  Obergrenze, damit das Video nie den Bildschirm sprengt

   Auf breiten Monitoren liegt die natürliche 16:9-Höhe darüber, dort
   greift die Regel gar nicht und es wird nichts beschnitten. */
:is(.gsp-buehne, #teaser-area-4) video,
:is(.gsp-buehne, #teaser-area-4) .ce_player video {
  display: block;
  width: 100%;
  height: auto;
  min-height: max(340px, min(640px, 82vh));
  object-fit: cover;
  object-position: center 42%;
}

/* Sanfte Abdunklung zur Mitte hin, damit Titel und Panel Kontrast haben,
   die Ränder des Videos aber offen bleiben. */
:is(.gsp-buehne, #teaser-area-4)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 74% at 50% 52%, rgba(0, 18, 44, .46) 0%, rgba(0, 18, 44, .18) 58%, rgba(0, 18, 44, 0) 82%),
    linear-gradient(180deg, rgba(0, 18, 44, .22) 0%, rgba(0, 18, 44, 0) 34%);
}

/* --------------------------------------------------------------------------
   2. Overlay-Bühne: Begrüßung oben, Panel darunter
   -------------------------------------------------------------------------- */

.gsp-held {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 34px);
  padding: clamp(16px, 3vw, 40px);
  font-family: var(--gsp-font-text);
}

/* --------------------------------------------------------------------------
   3. Begrüßung: freistehend, kein Kasten
   -------------------------------------------------------------------------- */

.gsp-gruss {
  text-align: center;
  color: #fff;
  /* Nicht in Zeichen begrenzen: DIN 1451 ist schmal, dadurch brach
     "Herzlich willkommen" unnötig auf zwei Zeilen um. */
  max-width: min(94%, 920px);
}

.gsp-gruss__marke svg {
  width: clamp(100px, 10vw, 150px);
  height: auto;
  margin: 0 auto clamp(8px, 1vw, 14px);
  color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0, 14, 36, .45));
}

.gsp-gruss__titel {
  margin: 0;
  font-family: var(--gsp-font-titel);
  /* DIN 1451 W01 gibt es nur im regulären Schnitt, darum kein bold. */
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: .005em;
  text-shadow: 0 2px 6px rgba(0, 14, 36, .55), 0 4px 22px rgba(0, 14, 36, .5);
}

.gsp-gruss__text {
  margin: clamp(6px, .8vw, 12px) auto 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.4vw, 21px);
  line-height: 1.45;
  opacity: .92;
  text-shadow: 0 1px 10px rgba(0, 14, 36, .55);
}

/* --------------------------------------------------------------------------
   4. Panel
   -------------------------------------------------------------------------- */

.gsp {
  width: min(524px, 100%);
  padding: 14px 15px 11px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .17);

  /* Deckkraft nicht weiter senken. Gegen echte Videoframes gemessen lag
     der Textkontrast bei 30 % nur bei 3,9:1 und bei 42 % bei 4,5:1, jeweils
     in der hellen Szene mit dem weißen Willkommensschild. Erst 48 % halten
     WCAG AA (4,5:1) auch dort sicher ein. Das Panel bleibt damit zu gut
     der Hälfte durchsichtig. */
  background: rgba(4, 24, 54, .48);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 16px 44px rgba(0, 12, 32, .34);

  color: #fff;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

/* Ohne backdrop-filter braucht es mehr Deckkraft, sonst wird nichts lesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gsp { background: rgba(4, 24, 54, .82); }
}

.gsp a { color: inherit; text-decoration: none; }
.gsp p { margin: 0; }
.gsp svg { display: block; }

/* Kurzfassungen sind nur mobil sichtbar */
.gsp-kurz { display: none; }

/* --------------------------------------------------------------------------
   5. Kachelraster
   -------------------------------------------------------------------------- */

.gsp__kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gsp-kachel {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 12px;
  padding: 10px 11px 9px;
}

.gsp-kachel__kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.gsp-kachel__icon { flex: 0 0 auto; opacity: .58; }
.gsp-kachel__icon svg { width: 16px; height: 16px; }

.gsp-kachel__name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .64;
}

.gsp-kachel__wert {
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.gsp-kachel__detail {
  font-size: 11px;
  opacity: .66;
  margin-top: 1px;
}

.gsp-kachel__detail:empty { display: none; }

/* Statuspunkt */
.gsp-kachel__wert::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .4);
}

[data-zustand="offen"] .gsp-kachel__wert::before {
  background: var(--gsp-offen);
  box-shadow: 0 0 0 3px rgba(53, 208, 127, .2);
}

[data-zustand="bald"] .gsp-kachel__wert::before {
  background: var(--gsp-bald);
  box-shadow: 0 0 0 3px rgba(255, 194, 71, .2);
}

[data-zustand="zu"] .gsp-kachel__wert::before {
  background: var(--gsp-zu);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, .16);
}

[data-zustand="zu"] .gsp-kachel__wert { opacity: .84; }

/* --------------------------------------------------------------------------
   6. Kontakt-Buttons
   -------------------------------------------------------------------------- */

.gsp-aktionen {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.gsp-aktion {
  flex: 1 1 0;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.gsp-aktion svg { width: 13px; height: 13px; }

.gsp-aktion:hover,
.gsp-aktion:focus-visible {
  background: var(--gsp-rot);
  border-color: var(--gsp-rot);
  color: #fff;
  transform: translateY(-1px);
}

.gsp-aktion:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --------------------------------------------------------------------------
   7. Wetterfußzeile
   -------------------------------------------------------------------------- */

.gsp__fuss {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
}

.gsp-wetter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  font-size: 12px;
  min-width: 0;
}

.gsp-wetter__icon { flex: 0 0 auto; opacity: .85; color: #ffd479; }
.gsp-wetter__icon svg { width: 18px; height: 18px; }

.gsp-wetter__temp { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.gsp-wetter__grad { font-size: .68em; font-weight: 600; opacity: .8; margin-left: 1px; }
.gsp-wetter__lage { opacity: .8; }

.gsp-wetter__meta {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 11px;
  opacity: .7;
  flex: 0 0 auto;
}

.gsp-wetter__meta li { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.gsp-wetter__meta svg { width: 11px; height: 11px; opacity: .8; }

.gsp__datum {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  opacity: .5;
  white-space: nowrap;
  flex: 0 0 auto;
}

.gsp-wetter:not([data-geladen]) { opacity: .5; }

/* --------------------------------------------------------------------------
   8. Mittlere Breiten
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .gsp { width: min(452px, 100%); }
  .gsp-wetter__meta { gap: 8px; }
  .gsp-wetter__meta li:nth-child(2) { display: none; } /* "gefühlt" fällt zuerst weg */
}

/* --------------------------------------------------------------------------
   9. Schmale Fenster: Abdunklung nach unten verlagern,
   weil das Panel dort mehr Fläche einnimmt
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  :is(.gsp-buehne, #teaser-area-4)::after {
    background:
      radial-gradient(ellipse 90% 54% at 50% 66%, rgba(0, 18, 44, .5) 0%, rgba(0, 18, 44, .2) 62%, rgba(0, 18, 44, 0) 88%),
      linear-gradient(180deg, rgba(0, 18, 44, .3) 0%, rgba(0, 18, 44, 0) 30%);
  }
}

/* --------------------------------------------------------------------------
   10. Kompaktfassung: Panel klein, Texte gekürzt

   Greift auf Handys (schmal) und ebenso bei flachen Fenstern, etwa einem
   Handy im Querformat. Dort ist nicht die Breite das Problem, sondern
   die Höhe, deshalb die zweite Bedingung.
   -------------------------------------------------------------------------- */

@media (max-width: 767px), (max-height: 620px) {
  .gsp-held {
    justify-content: space-between;
    gap: 12px;
    padding: clamp(18px, 5vw, 28px) 14px 16px;
  }

  /* Begrüßung */
  /* Mobil ohne Logo, dafür tiefer gesetzt, damit der Text nicht am
     oberen Videorand klebt. */
  .gsp-gruss { max-width: 26ch; margin-top: clamp(40px, 16vw, 72px); }
  .gsp-gruss__marke { display: none; }
  .gsp-gruss__titel { font-size: 27px; }
  .gsp-gruss__text { font-size: 13px; }

  /* Panel: kompakt, ohne Fließtexte */
  .gsp {
    width: 100%;
    padding: 11px 11px 9px;
    border-radius: 15px;
    background: rgba(4, 24, 54, .56);
  }

  .gsp__kacheln { gap: 6px; }

  .gsp-kachel { padding: 8px 9px; border-radius: 10px; }
  .gsp-kachel__kopf { gap: 5px; margin-bottom: 3px; }
  .gsp-kachel__icon svg { width: 14px; height: 14px; }
  .gsp-kachel__name { font-size: 9px; letter-spacing: .07em; }

  .gsp-kachel__wert { font-size: 12.5px; gap: 6px; }
  .gsp-kachel__wert::before { width: 6px; height: 6px; box-shadow: none; }

  /* Lange Fassung raus, Kurzfassung rein */
  .gsp-lang { display: none; }
  .gsp-kurz { display: inline; }

  /* Beschreibungstexte von Platz und Range weg, die Uhrzeiten von
     Sekretariat und Gastronomie bleiben, weil sie den Nutzen tragen. */
  .gsp-kachel__detail:not([data-feld]) { display: none; }
  .gsp-kachel__detail[data-feld] { font-size: 10.5px; }

  /* Buttons nur als Icon, aber mit fingerfreundlicher Höhe.
     Gemessen waren 26 px zu knapp; 36 px liegen über der 24-px-Grenze
     von WCAG 2.5.8 und nahe an den empfohlenen 44 px. Platz ist da,
     im Test blieben auf einem 390er Handy 281 px Video frei. */
  .gsp-aktionen { gap: 5px; margin-top: 7px; }
  .gsp-aktion { height: 36px; font-size: 0; gap: 0; border-radius: 9px; }
  .gsp-aktion svg { width: 16px; height: 16px; }

  /* Wetter auf das Wesentliche */
  .gsp__fuss { margin-top: 8px; padding-top: 7px; min-height: 0; }
  .gsp-wetter { font-size: 11.5px; gap: 7px; }
  .gsp-wetter__icon svg { width: 16px; height: 16px; }
  .gsp-wetter__temp { font-size: 13.5px; }
  .gsp-wetter__meta { display: none; }
  .gsp__datum { font-size: 9.5px; }
}

/* Sehr schmale Geräte: Begrüßungstext opfern, Titel und Logo kleiner */
@media (max-width: 360px) {
  .gsp-gruss__text { display: none; }
  .gsp-gruss__titel { font-size: 24px; }
}

/* Sehr flache Fenster: Begrüßung ganz weglassen. Wenn die Höhe knapp ist,
   ist die Statusinformation wichtiger als der Willkommensgruß. */
@media (max-height: 620px) {
  .gsp-gruss { display: none; }
  .gsp-held { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .gsp-aktion { transition: none; }
  .gsp-aktion:hover { transform: none; }
}