/*
Theme Name: HUC
Theme URI: https://huc-tauchen.de
Author: fuer den Herborner Unterwasser Club e.V.
Description: Theme des Herborner Unterwasser Club. Kraeftige Typografie, Tiefwasserfarben, keine externen Dienste.
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: huc
*/

:root {
  --tief:      #041b2a;
  --tief-2:    #072d45;
  --wasser:    #0d4f7c;
  --akzent:    #17a2e0;
  --akzent-hell:#5ec8f5;
  --hell:      #f2f6f8;
  --weiss:     #ffffff;
  --text:      #16242c;
  --text-leise:#5b7182;
  --linie:     rgba(13,79,124,.16);
  --schrift:   "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --breite:    1140px;
  --radius:    4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--wasser); }

.mitte { width: min(100% - 40px, var(--breite)); margin-inline: auto; }

/* ---------------------------------------------------------- Typografie */

h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }

h1 { font-size: clamp(34px, 6vw, 64px); text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-size: clamp(19px, 2.2vw, 23px); }

.augenbraue {
  display: block;
  font-size: 13px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 14px;
}
.augenbraue.dunkel { color: var(--wasser); }

.lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; }

p + p, p + ul, ul + p { margin-top: 1em; }
ul { padding-left: 1.2em; }
li + li { margin-top: .35em; }

/* ---------------------------------------------------------- Kopfbereich */

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  display: flex; align-items: center; gap: 24px;
  /* Wächst mit dem Logo. ⚠️ Die Logodatei ist 460 × 490 px, also selbst etwas
     höher als breit – bei 92 px Breite wird sie 98 px hoch, nicht 92. Mit
     108 px Leiste blieben nur 5 px Luft oben und unten, das wirkte gedrängt.
     Wer das Logo ändert, muss diesen Wert mitziehen. */
  min-height: 120px;
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tief); }
/* Am 15.08.2026 von 46 auf 92 px verdoppelt (Davids Wunsch). Damit trägt
   das Logo die Leiste, statt neben dem Vereinsnamen unterzugehen.
   ⚠️ Zwei Werte hängen daran: die Mindesthöhe oben und die Schwelle fürs
   Klappmenü weiter unten – die Leiste ist nowrap und wird sonst zu breit. */
.marke img { width: 92px; }
.marke b { display: block; font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.marke span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .19em;
               text-transform: uppercase; color: var(--text-leise); }

/* nowrap ist Absicht: mit Umbruch rutschte die Schaltfläche „Schnuppertauchen"
   in eine zweite Zeile unter die Links. Wird es zu eng, greift weiter unten
   das Klappmenü – das ist der ehrlichere Umgang mit Platzmangel. */
.navi { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.navi a {
  padding: 9px 11px; border-radius: var(--radius); white-space: nowrap;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tief); text-decoration: none;
}
.navi a:hover { background: var(--hell); }
.navi a[aria-current="page"] { color: var(--wasser); box-shadow: inset 0 -3px 0 var(--akzent); }

.knopf {
  display: inline-block;
  padding: 13px 26px; border-radius: var(--radius);
  background: var(--akzent); color: #00202f !important;
  font-size: 15px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer;
}
.knopf:hover { background: var(--akzent-hell); }
.knopf.rand {
  background: transparent; color: var(--weiss) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.knopf.rand:hover { background: rgba(255,255,255,.12); }
.navi .knopf { padding: 11px 17px; font-size: 14px; margin-left: 10px; }

/* ---------- Untermenüs
   Damit oben alles erreichbar ist, ohne dass die Leiste zur Bleiwüste wird:
   fünf Hauptpunkte, der Rest klappt darunter auf. */
.navi-ast { position: relative; }
.navi-ast > a::after {
  content: "▾"; margin-left: 6px; font-size: 10px; vertical-align: 1px; opacity: .55;
}
.unter {
  position: absolute; left: 0; top: 100%; min-width: 230px; z-index: 60;
  display: none; flex-direction: column; padding: 8px;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: 0 18px 40px rgba(4,27,42,.16);
}
.navi-ast:hover > .unter,
.navi-ast:focus-within > .unter,
.navi-ast.offen > .unter { display: flex; }
.unter a {
  padding: 10px 12px; text-transform: none; letter-spacing: 0;
  font-size: 15px; font-weight: 600; white-space: nowrap;
}

/* Menü für kleine Schirme */
.menue-schalter { display: none; margin-left: auto; background: none; border: 0;
  font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  font-size: 14px; color: var(--tief); padding: 10px; cursor: pointer; }

/* Schwelle fürs Klappmenü. Die Leiste ist nowrap – wird sie zu breit, würde
   die Seite waagerecht scrollen statt umzubrechen.

   Dreimal nachgezogen, jedes Mal nachgemessen statt geschätzt:
   07.08.2026 auf 1200 px (siebter Punkt „Tierwelt")
   15.08.2026 auf 1340 px (Logo von 46 auf 92 px verdoppelt)
   15.08.2026 zurück auf 1200 px („Kontakt" ist raus, der blaue Knopf führt
   ohnehin dorthin). Bei 1210 px liegen zwischen Logo und erstem Menüpunkt
   genau die 24 px Abstand des Flex-Containers – es passt, mehr aber auch
   nicht. Wer einen Menüpunkt ergänzt, muss den Wert wieder anheben.

   Wer am Logo oder an den Menüpunkten dreht, zieht diesen Wert mit. */
@media (max-width: 1200px) {
  .menue-schalter { display: block; }
  .navi {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--weiss); border-bottom: 1px solid var(--linie);
    padding: 8px 20px 20px;
  }
  .navi.offen { display: flex; }
  .navi a { padding: 14px 6px; border-bottom: 1px solid var(--linie); }
  .navi .knopf { margin: 14px 0 0; text-align: center; border-bottom: 0; }

  /* Klein: Untermenüs stehen offen eingerückt da – ein Aufklappen im
     Aufklappmenü ist eine Bedienstufe zu viel. */
  .navi-ast { display: flex; flex-direction: column; }
  .navi-ast > a::after { content: none; }
  .unter {
    position: static; display: flex; min-width: 0;
    border: 0; box-shadow: none; background: none; padding: 0 0 0 18px;
  }
  .unter a { padding: 12px 6px; font-size: 14px; }
}

@media (max-width: 560px) {
  /* Auf dem Handy bleibt es klein – dort zählt jeder Millimeter Leiste. */
  .marke img { width: 56px; }
  .kopf-innen { min-height: 78px; }
  .marke b { font-size: 14px; line-height: 1.2; }
  .marke span span, .marke-text > span { display: none; }
}

/* ---------------------------------------------------------- Bühne */

.buehne {
  position: relative; overflow: hidden;
  background: var(--tief);
  color: var(--weiss);
  padding: clamp(70px, 11vw, 140px) 0 clamp(60px, 9vw, 110px);
}
.buehne-bild {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .55;
  filter: saturate(1.05);
}
.buehne::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,27,42,.4) 0%, rgba(4,27,42,.68) 55%, var(--tief) 100%);
}
.buehne .mitte { position: relative; z-index: 2; }
.buehne h1 { max-width: 15ch; }
.buehne .lead { max-width: 52ch; margin-top: 22px; color: rgba(255,255,255,.88); }
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.buehne.klein { padding: clamp(54px, 8vw, 92px) 0; }
.buehne.klein h1 { font-size: clamp(30px, 4.6vw, 48px); }

/* ---------------------------------------------------------- Abschnitte */

.abschnitt { padding: clamp(56px, 8vw, 96px) 0; }
.abschnitt.hell { background: var(--hell); }
.abschnitt.tief { background: var(--tief-2); color: var(--weiss); }
.abschnitt.tief .augenbraue { color: var(--akzent-hell); }
.abschnitt.tief a { color: var(--akzent-hell); }

.kopfzeile { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 52px); }
.kopfzeile p { margin-top: 14px; color: var(--text-leise); font-size: 18px; }
.abschnitt.tief .kopfzeile p { color: rgba(255,255,255,.75); }

.raster { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster.zwei { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Vorschaubild einer Karte. Die Kachel bleibt fest 3:2, sonst stünden in
   einer Reihe verschieden hohe Karten. Das Bild darin wird aber NICHT mehr
   beschnitten (`contain` statt `cover`).

   ⚠️ Warum: `cover` füllt die Kachel und schneidet ab, was nicht hineinpasst.
   Bei querformatigen Fotos fällt das nicht auf, bei Plakaten und Logos sehr
   wohl – „Veranstaltungen 2022" ist 500 × 174, davon blieb knapp die Hälfte
   der Breite übrig, samt Logo. Gemeldet von Rudi aus dem Vorstand, 16.08.2026.

   Der Rest der Kachel bleibt nicht grau, sondern zeigt dasselbe Bild unscharf
   und formatfüllend. Bei 3:2-Bildern ist davon nichts zu sehen – die decken
   die Kachel weiterhin randlos ab. */
.karte-bild {
  display: block; position: relative;
  aspect-ratio: 3/2; overflow: hidden;
  background: var(--hell);
}
.karte .karte-bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* Größer gezogen, weil ein weichgezeichnetes Bild an seinen Rändern
   durchsichtig wird – ohne das Vergrößern läge außen ein heller Saum. */
.karte .karte-bild-grund {
  object-fit: cover;
  transform: scale(1.2);
  filter: blur(20px) saturate(1.3) brightness(.92);
}
.karte-text { padding: 26px 26px 30px; flex: 1; display: flex; flex-direction: column; }
.karte-text p { color: var(--text-leise); }
.karte h3 { margin-bottom: 10px; }
.weiter {
  display: inline-block; padding-top: 18px;
  font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.weiter:hover { text-decoration: underline; }
.karte .weiter { margin-top: auto; }

/* Zahlen */
.zahlen { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.zahl { padding: 28px 24px; background: rgba(255,255,255,.05); border-radius: var(--radius);
        border-left: 3px solid var(--akzent); }
.zahl b { display: block; font-size: clamp(32px, 4.4vw, 46px); font-weight: 800; line-height: 1; }
.zahl span { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 700;
             letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* Zwei Spalten Text + Bild */
.duo { display: grid; gap: clamp(30px, 5vw, 60px); align-items: center;
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.duo img { border-radius: var(--radius); }

/* Termin-/Faktenliste */
.fakten { border-top: 1px solid var(--linie); }
.fakten div {
  display: grid; gap: 6px 30px; grid-template-columns: minmax(150px, 220px) 1fr;
  padding: 18px 0; border-bottom: 1px solid var(--linie);
}
.fakten dt, .fakten b {
  font-size: 13.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wasser);
}
.abschnitt.tief .fakten { border-color: rgba(255,255,255,.16); }
.abschnitt.tief .fakten div { border-color: rgba(255,255,255,.16); }
/* Auf dunklem Grund muessen die Beschriftungen hell sein. Fuer <b> stand das
   schon da, fuer <dt> nicht - dort blieb --wasser auf --tief-2 stehen, also
   1,65:1 Kontrast. Betraf schon "Flaschen fuellen" auf der Seeseite. */
.abschnitt.tief .fakten b,
.abschnitt.tief .fakten dt { color: var(--akzent-hell); }
@media (max-width: 620px) { .fakten div { grid-template-columns: 1fr; } }

/* Aufruf */
.aufruf {
  background: linear-gradient(140deg, var(--wasser), var(--tief));
  color: var(--weiss); text-align: center;
  padding: clamp(56px, 8vw, 96px) 0;
}
.aufruf h2 { max-width: 20ch; margin-inline: auto; }
.aufruf p { max-width: 50ch; margin: 18px auto 0; color: rgba(255,255,255,.85); font-size: 19px; }
.aufruf .knopf { margin-top: 30px; }

/* Personenliste */
.personen { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.person { background: var(--weiss); border: 1px solid var(--linie); padding: 20px 22px; }
.person b { display: block; font-size: 18px; font-weight: 800; }

/* Nur Einträge aus dem Redaktionsbereich haben Foto und Kontaktdaten. Die
   Tauchlehrerliste steht fest im Seitentext und bleibt eine schlichte Karte. */
.person-datensatz { display: flex; align-items: flex-start; gap: 16px; }
.person-text { min-width: 0; flex: 1; }

.person > span, .person-text > span {
  display: block; margin-top: 4px; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--akzent);
}

/* Porträt. Die Archivbilder sind Passbild-Miniaturen – klein gezeigt wirken
   sie ordentlich, groß wären sie unscharf. */
.person-bild { flex: none; width: 64px; height: 64px; }
.person-bild img {
  width: 64px; height: 64px; object-fit: cover; object-position: center top;
  border-radius: 50%; display: block; background: var(--hell);
}
.person-ohne-bild {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--hell); border: 1px dashed #b4c6d2;
  font-size: 17px; font-weight: 800; letter-spacing: .04em; color: #7f9aab;
}

/* Ausklappbare Kontaktdaten */
.person-kontakt { margin-top: 12px; }
.person-kontakt summary {
  cursor: pointer; display: inline-block; list-style: none;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--wasser); text-decoration: underline; text-underline-offset: 3px;
}
.person-kontakt summary::-webkit-details-marker { display: none; }
.person-kontakt summary::after { content: " ▾"; text-decoration: none; font-size: 10px; }
.person-kontakt[open] summary::after { content: " ▴"; }
.person-kontakt summary:hover { color: var(--tief); }
.person-kontakt > div {
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--linie);
  font-size: 15px; line-height: 1.5; color: var(--text-leise);
}
.person-kontakt p { margin: 0 0 8px; }
.person-kontakt p:last-child { margin-bottom: 0; }

/* Bildunterschrift */
figure figcaption {
  margin-top: 10px; font-size: 13.5px; color: var(--text-leise);
}
.abschnitt.tief figcaption, .buehne figcaption { color: rgba(255,255,255,.65); }

/* Hinweiskasten */
.hinweis {
  border-left: 3px solid var(--akzent);
  background: var(--hell);
  padding: 20px 24px; border-radius: var(--radius);
}
.hinweis b { color: var(--wasser); }

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

   Bis hierher gab es dafür KEINE Regeln – weder im Theme noch in der
   statischen Vorlage. Die Felder waren Browser-Standard und standen
   entsprechend gedrängt beieinander. Zwei Dinge sind hier wichtiger als
   Optik:
   - `.falle` MUSS unsichtbar sein. Das ist der Honigtopf gegen Spam; wer ihn
     ausfüllt, dessen Nachricht wird verworfen. Sichtbar wäre er eine Falle
     für echte Besucher.
   - Sichtbarer Fokus bleibt erhalten, sonst ist das Formular mit der Tastatur
     nicht bedienbar. */

.formular { display: flex; flex-direction: column; gap: 22px; }

.feld { display: flex; flex-direction: column; gap: 8px; }
.feld label {
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wasser);
}

.formular input[type="text"],
.formular input[type="email"],
.formular select,
.formular textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  padding: 14px 16px;
  background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.formular textarea { min-height: 170px; resize: vertical; line-height: 1.55; }

.formular input:hover, .formular select:hover, .formular textarea:hover { border-color: #b9cbd8; }
.formular input:focus, .formular select:focus, .formular textarea:focus {
  outline: none; border-color: var(--wasser);
  box-shadow: 0 0 0 3px rgba(31,111,176,.18);
}

/* Der Honigtopf. Nicht display:none – manche Spam-Roboter erkennen das und
   lassen das Feld dann leer. So steht es außerhalb des Bildes, ist für
   Vorleseprogramme ausgeblendet und aus der Tabulatorreihenfolge heraus. */
.falle {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.zustimmung {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.55; color: var(--text-leise);
}
.zustimmung input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--wasser); }

.formular .knopf { align-self: flex-start; }

/* ---------------------------------------------------------- Fuß */

.fuss { background: var(--tief); color: rgba(255,255,255,.72); padding: 60px 0 30px; font-size: 15px; }
.fuss a { color: rgba(255,255,255,.72); text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.fuss-raster { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fuss h4 { color: var(--weiss); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
.fuss ul { list-style: none; padding: 0; }
.fuss li + li { margin-top: 8px; }
.fuss-logo { width: 64px; margin-bottom: 16px; }
.fuss-unten {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13.5px; color: rgba(255,255,255,.5);
}

/* ---------------------------------------------------------- Orca-Vorhang */

/* Seit 15.08.2026: der Film läuft von allein, „Tauch ein." steht darunter
   und kürzt ab. Er darf nur erscheinen, wenn JavaScript läuft – ohne Skript
   säße man vor einer Tür ohne Klinke. Grundzustand ist also „aus"; das
   Inline-Skript im Kopf setzt `js` und macht ihn sichtbar. */
.vorhang { display: none; }
.js .vorhang {
  position: fixed; inset: 0; z-index: 200;
  background: var(--weiss);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(4px, 1.5vh, 18px);
}
.vorhang.fort { display: none; }

/* Trägt Film und Schaltfläche untereinander. Die feste 16:10-Bühne ist weg:
   sie war der Rahmen für das Standbild, das darüberlag.
   ⚠️ Die Spalte gehört HIERHIN, nicht auf `.vorhang` – „Tauch ein." steckt im
   selben Kasten wie der Film und stünde sonst daneben statt darunter. */
.vorhang-buehne {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, 2vh, 22px);
  width: 100%;
}

/* Der Film liegt unsichtbar bereit und läuft erst nach dem Klick.

   Er wird bewusst BREITER gezogen als die Bühne: das Logo nimmt im Film nur
   47 % der Bildbreite ein, das Standbild darüber aber 54 % der Bühne. Ohne
   diese Korrektur schrumpft das Logo im Moment des Klicks sichtbar zusammen.
   Gerechnet: 880 px Film × 47 % ≈ 415 px Logo gegen 720 px Bühne × 54 % ≈ 389 px –
   der Orca legt beim Absprung also leicht zu, statt zu schrumpfen. */
.vorhang video {
  position: relative; left: auto; top: auto; transform: none;
  width: min(96vw, 880px); height: auto; max-height: 80vh;
  /* ⚠️ Seitenverhältnis fest, sonst hat das Element vor dem Laden des Films
     KEINE Höhe – dann steht „Tauch ein." zuerst oben und springt nach unten,
     sobald der Film da ist. Genau das hat David am 15.08.2026 gesehen.
     16:9 ist das echte Maß des Films (880 × 495, nachgemessen). */
  aspect-ratio: 16 / 9;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(125% 125% at 50% 50%, #000 84%, transparent 100%);
          mask-image: radial-gradient(125% 125% at 50% 50%, #000 84%, transparent 100%);
  /* Von Anfang an sichtbar: bis der Film anläuft, zeigt das `poster` dasselbe
     Logo, mit dem er beginnt. Vorher war das Video bis zum Klick unsichtbar –
     jetzt gäbe das ein weißes Loch von einem Wimpernschlag. */
  opacity: 1;
}

/* „Tauch ein." steht unter dem Film und bleibt die ganze Zeit sichtbar – es
   ist die Abkürzung, nicht mehr der Startknopf. Es ist eine Schaltfläche, also
   müssen Rahmen, Hintergrund und Systemaussehen ausdrücklich weg. Der
   Fokusrahmen bleibt für die Tastatur erhalten, aber nur bei :focus-visible. */
.vorhang-tuer {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: none; border: 0; box-shadow: none; padding: 4px 20px;
  font: inherit; color: inherit; -webkit-appearance: none; appearance: none;
  outline: none; cursor: pointer;
}
.vorhang-tuer:focus { outline: none; }
.vorhang-tuer:focus-visible {
  outline: 3px solid var(--wasser); outline-offset: -10px; border-radius: 18px;
}
/* Bleibt stehen, solange der Film läuft – wer nicht warten will, klickt. */

.vorhang-tuer img { width: 54%; transition: transform .3s ease-out; }
.vorhang-tuer .gross {
  font-size: clamp(26px, 5vw, 42px); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #0d3550;
}
.vorhang-tuer:hover img, .vorhang-tuer:focus-visible img { transform: scale(1.04); }
.vorhang-tuer:hover .gross, .vorhang-tuer:focus-visible .gross { color: var(--wasser); }

/* Der Wink, dass hier zu klicken ist: klein und blass, und er kommt erst nach
   vier Sekunden. Wer gleich klickt, bekommt ihn nie zu sehen – er hilft nur
   dem, der davorsitzt und zögert. */
.vorhang-wink {
  margin-top: 18px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: #a8bcc9;
  opacity: 0; animation: wink-auf 1.2s ease-out 4s forwards;
}
@keyframes wink-auf { to { opacity: 1; } }

/* Auf dem Handy fällt die Zeile stärker auf, weil daneben viel weniger steht.
   Vor allem der weite Buchstabenabstand macht sie breit – der geht zuerst. */
@media (max-width: 620px) {
  .vorhang-wink { font-size: 9px; letter-spacing: .16em; margin-top: 14px; }

  /* Auf kleinen Schirmen lässt sich der Film kaum vergrößern – er stößt an
     den Bildschirmrand. Damit das Logo beim Klick trotzdem nicht schrumpft,
     wird hier das Standbild etwas kleiner statt der Film größer. */
  .vorhang-tuer img { width: 46%; }
}

.ueberspringen {
  position: fixed; right: 20px; bottom: 20px; z-index: 210;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #7f9aab;
}
.ueberspringen:hover { color: var(--wasser); }

/* Wer Bewegung abbestellt hat, bekommt gar keinen Film – aber dieselbe Tür,
   damit der Einstieg derselbe bleibt. */
@media (prefers-reduced-motion: reduce) {
  .vorhang video, .vorhang-start { display: none; }
  .js .vorhang .vorhang-ende { opacity: 1; visibility: visible; transform: none; cursor: pointer; }
  html { scroll-behavior: auto; }
}

/* Der Weg zurück zur Animation, unten in der Fußzeile. */
.intro-nochmal {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
}

/* ---------------------------------------------------------- Bildplätze

   Solange keine echten Fotos da sind, steht an jeder Bildstelle eine
   beschriftete Fläche statt eines Archivbildes. Das ist Absicht: ein
   Karibikriff über „Donnerstags im Hallenbad" sieht auf den ersten Blick
   fertig aus und fällt deshalb niemandem als Lücke auf. Eine leere Fläche
   mit Beschriftung schon. */

.bildplatz {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 30px 24px; min-height: 190px;
  background:
    repeating-linear-gradient(45deg, #edf3f8 0 14px, #e4edf4 14px 28px);
  border: 2px dashed #9fb8ca; border-radius: var(--radius);
  color: #5c7688;
}
.bildplatz b {
  font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #3d6076;
}
.bildplatz span { font-size: 14px; line-height: 1.5; max-width: 36ch; }
.bildplatz em { font-style: normal; font-size: 12.5px; letter-spacing: .06em; opacity: .8; }

.karte .bildplatz { aspect-ratio: 3/2; min-height: 0; border-radius: 0; border-width: 0 0 2px; }
figure .bildplatz { aspect-ratio: 4/3; }

/* In der Bühne liegt der Platz hinter dem Text – dort nur ein ruhiges Muster
   und ein Vermerk oben links, damit die Überschrift lesbar bleibt. */
.buehne-bild.bildplatz-buehne {
  opacity: 1;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 16px, transparent 16px 32px),
    var(--tief-2);
  border: 0;
}
.buehne .bildplatz-vermerk {
  position: absolute; z-index: 3; left: 50%; top: 18px; transform: translateX(-50%);
  max-width: min(92vw, 900px);
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  border: 1px dashed rgba(255,255,255,.32); border-radius: 999px;
  padding: 7px 16px; text-align: center;
}

/* ---------------------------------------------------------- WordPress-Zusätze */

.ausgerichtet-mitte, .aligncenter { margin-inline: auto; display: block; }
.alignleft  { float: left;  margin: 0 24px 18px 0; }
.alignright { float: right; margin: 0 0 18px 24px; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
  margin-top: 10px; font-size: 13.5px; color: var(--text-leise);
}
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.beitragstext > * + * { margin-top: 1em; }
.beitragstext h2 { margin-top: 1.6em; }
.beitragstext h3 { margin-top: 1.4em; }
.beitragstext img { border-radius: var(--radius); }
.beitragstext ul { padding-left: 1.2em; }

/* Der erste Absatz trägt den Einstieg – etwas größer, damit die Textwüste
   einen Anfang hat und die Seite nicht mit gleichförmigem Fließtext startet. */
.beitragstext > p:first-child {
  font-size: 19px; line-height: 1.65; color: var(--text);
}

/* Beitragsbild im Textfluss (kleine Archivbilder, die keine Bühne tragen).
   Die Breite kommt aus der echten Bildbreite, gesetzt im PHP – hier steht
   nur, wie es aussieht. */
.beitragsbild {
  margin: 0 0 36px; padding: 0;
}
.beitragsbild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  /* Ein kleines altes Foto wirkt freistehend verloren – ein feiner Rahmen
     macht daraus einen Abzug statt eines Ausschnitts. */
  box-shadow: 0 1px 3px rgba(4,27,42,.12), 0 8px 28px rgba(4,27,42,.10);
}
.beitragsbild figcaption {
  margin-top: 12px; font-size: 14px; color: var(--text-leise);
}

/* Meldungen */
.meldung-datum {
  font-size: 13.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--akzent);
}
.abschnitt.tief .meldung-datum { color: var(--akzent-hell); }

/* Termine */
.termin {
  display: grid; gap: 6px 30px; grid-template-columns: minmax(150px, 200px) 1fr;
  padding: 20px 0; border-bottom: 1px solid var(--linie);
}
.termin:first-child { border-top: 1px solid var(--linie); }
.termin-wann {
  font-size: 13.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wasser);
}
.termin-was { font-size: 19px; font-weight: 800; }
.termin-wo, .termin-hinweis { color: var(--text-leise); font-size: 16px; }
.abschnitt.tief .termin { border-color: rgba(255,255,255,.16); }
.abschnitt.tief .termin-wann { color: var(--akzent-hell); }
.abschnitt.tief .termin-wo, .abschnitt.tief .termin-hinweis { color: rgba(255,255,255,.72); }
@media (max-width: 620px) { .termin { grid-template-columns: 1fr; } }

/* Tauchlehrer vom Dienst – fremde Daten vom HTSV, siehe tlvd.php */
.tlvd dt { white-space: nowrap; }
.tlvd-frei { color: var(--text-leise); font-style: italic; }
.tlvd-zu { color: #a4262c; font-weight: 700; }
.tlvd-hinweis {
  margin-top: 20px; font-size: 15px;
}
.tlvd-quelle {
  margin-top: 10px; font-size: 14px; color: var(--text-leise);
}

/* Süßwasser-Lexikon */
.art-lateinisch {
  font-style: italic; color: var(--text-leise); font-size: 16px;
  margin-top: 4px;
}
/* Auf der dunklen Bühne muss der Name heller sein als das gedämpfte Grau */
.art-lateinisch-gross {
  font-style: italic; font-size: 20px; margin-top: 12px;
  color: rgba(255,255,255,.8);
}
.art-autor {
  margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--linie);
  font-size: 15px; color: var(--text-leise);
}

/* Tauchwissen: Hinweis auf ungeprüfte Entwürfe */
.wissen-entwurf {
  display: inline-block; margin-top: 4px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--akzent);
}

/* Galerie */
.bildraster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bildraster a { display: block; border-radius: var(--radius); overflow: hidden; }
.bildraster img { aspect-ratio: 3/2; object-fit: cover; width: 100%; border-radius: var(--radius); }

/* Bildraster im Fließtext (Reiseberichte, Lexikon): kleinere Kacheln als in
   der Galerie. Die Archivbilder sind rund 484 px breit – in 220-px-Kacheln
   sind sie scharf, in 340er weich. Lieber mehr kleine als wenige matschige. */
.beitragstext .bildraster,
.beitragsbild + .beitragstext .bildraster {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  margin-top: 32px;
}

/* Blätterung */
.blaettern { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; }
.blaettern .page-numbers {
  padding: 10px 16px; border: 1px solid var(--linie); border-radius: var(--radius);
  text-decoration: none; font-weight: 700;
}
.blaettern .page-numbers.current { background: var(--wasser); color: var(--weiss); border-color: var(--wasser); }

/* Adminleiste nicht über den festen Kopf legen */
body.admin-bar .kopf { top: 32px; }
@media (max-width: 782px) { body.admin-bar .kopf { top: 46px; } }