/* =========================================================================
   Klaas Hero – Partikel-Kran · Styles
   Alles mit Präfix kkh- bzw. nur wirksam, solange der Hero die Klasse
   .kkh-aktiv trägt (die setzt das Skript erst, wenn der Kran laden konnte).
   ========================================================================= */
.kkh-aktiv {
  --kkh-blau: #164194;
  --kkh-hell: #B4CDF0;
  --kkh-gedimmt: rgba(180, 205, 240, .66);
  --kkh-linie: rgba(180, 205, 240, .28);
  --kkh-glas: rgba(5, 16, 42, .82);
  --kkh-head: "eurostile-extended", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --kkh-text: "futura-pt", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --kkh-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* Divi-Hintergrund (Video, Bild, Abdunklung) durch den Nachthimmel ersetzen */
.kkh-aktiv.kkh-aktiv {
  background: radial-gradient(60% 70% at 62% 58%, rgba(22, 65, 148, .55) 0%, rgba(14, 46, 99, .35) 38%, rgba(3, 10, 26, 0) 72%),
              radial-gradient(120% 100% at 50% 0%, #061433 0%, #030a1a 70%) !important;
  background-color: #030a1a !important;
}
.kkh-aktiv::before { display: none !important; }
.kkh-aktiv > .et-pb-background-video,
.kkh-aktiv > .et_parallax_bg_wrap,
.kkh-aktiv > .et_pb_background_pattern,
.kkh-aktiv > .et_pb_background_mask { display: none !important; }
.kkh-aktiv > .et_pb_row { position: relative; z-index: 2; }

/* Divi-Module, deren Inhalt jetzt im Hotspot steckt (z. B. Nächste Termine) */
.kkh-aktiv .kkh-versteckt { display: none !important; }

/* Divi-Text schmaler, damit der Kran daneben Platz hat (nur breite Ansicht) */
.kkh-aktiv:not(.kkh-schmal) .kkh-text { max-width: var(--kkh-textbreite, 40%) !important; }
/* Desktop: Hero höchstens fensterhoch (Höhe rechnet das Skript), Divi-Zeile füllt ihn */
.kkh-aktiv.kkh-fenster:not(.kkh-schmal) { height: var(--kkh-hoehe) !important; min-height: 0 !important; box-sizing: border-box !important; }
.kkh-aktiv.kkh-fenster:not(.kkh-schmal) > .et_pb_row { height: 100% !important; }
/* Schmal: Hero so hoch, dass unter Headline und Text Platz für den Kran ist */
.kkh-aktiv.kkh-schmal { min-height: var(--kkh-mobilhoehe, 560px) !important; box-sizing: border-box !important; justify-content: flex-start !important; }
.kkh-aktiv.kkh-schmal > .et_pb_row { height: auto !important; min-height: 0 !important; }

/* ---- Bühne -------------------------------------------------------------------- */
.kkh-buehne { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kkh-buehne canvas { display: block; width: 100% !important; height: 100% !important; }

/* ---- Technische Beschriftungen --------------------------------------------------- */
.kkh-tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.kkh-tag { position: absolute; left: -200px; top: -200px; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 9px/1 var(--kkh-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(180, 205, 240, .55);
  opacity: 0; transition: opacity 1s ease; }
.kkh-tag::before { content: "+"; font-size: 12px; color: rgba(180, 205, 240, .7); transform: translate(-50%, 0); }
.kkh-bereit .kkh-tag { opacity: 1; }
.kkh-schmal .kkh-tags { display: none; }

/* ---- Hinweis ------------------------------------------------------------------ */
.kkh-hinweis { position: absolute; z-index: 3; left: 24px; bottom: 18px; display: flex; align-items: center; gap: 10px; margin: 0;
  font: 10px/1.4 var(--kkh-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--kkh-gedimmt);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.kkh-bereit .kkh-hinweis { opacity: 1; }
.kkh-hinweis-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--kkh-hell); box-shadow: 0 0 10px var(--kkh-hell); }
.kkh-schmal .kkh-hinweis { left: 50%; transform: translateX(-50%); bottom: 14px; font-size: 9px; }

/* ---- Hotspots ----------------------------------------------------------------- */
.kkh-hotspots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.kkh-hs { position: absolute; left: -200px; top: -200px; width: 0; height: 0; opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility .7s; }
.kkh-bereit .kkh-hs { opacity: 1; visibility: visible; }
.kkh-hs.kkh-offen { z-index: 2; }

.kkh-hotspots .kkh-hs-btn { position: absolute; left: 0; top: 0; transform: translate(-11px, -50%);
  display: flex; align-items: center; gap: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: #fff; font: inherit; line-height: 1; text-transform: none; letter-spacing: normal; cursor: pointer; pointer-events: auto; }
.kkh-hs[data-side="left"] .kkh-hs-btn { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%); }
.kkh-hs[data-side="top"] .kkh-hs-btn { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 11px)); }
.kkh-hs[data-side="bottom"] .kkh-hs-btn { flex-direction: column; transform: translate(-50%, -11px); }

.kkh-hs-dot { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; }
.kkh-hs-dot::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 65, 148, .6), 0 0 16px 3px rgba(130, 175, 255, .95); }
.kkh-hs-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(180, 205, 240, .9);
  animation: kkh-puls 2.6s ease-out infinite; }
@keyframes kkh-puls { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(2.3); opacity: 0; } }

.kkh-hs-line { flex: none; width: 22px; height: 1px; background: linear-gradient(90deg, rgba(180, 205, 240, .9), rgba(180, 205, 240, .2)); }
.kkh-hs[data-side="left"] .kkh-hs-line { background: linear-gradient(270deg, rgba(180, 205, 240, .9), rgba(180, 205, 240, .2)); }
.kkh-hs[data-side="top"] .kkh-hs-line, .kkh-hs[data-side="bottom"] .kkh-hs-line { width: 1px; height: 14px; }
.kkh-hs[data-side="top"] .kkh-hs-line { background: linear-gradient(0deg, rgba(180, 205, 240, .9), rgba(180, 205, 240, .2)); }
.kkh-hs[data-side="bottom"] .kkh-hs-line { background: linear-gradient(180deg, rgba(180, 205, 240, .9), rgba(180, 205, 240, .2)); }

.kkh-hs-label { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 11px; border-radius: 999px;
  background: rgba(4, 12, 32, .62); border: 1px solid var(--kkh-linie); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 500 12px/1.2 var(--kkh-head); letter-spacing: .05em; white-space: nowrap; color: #fff;
  transform: translateX(var(--kkh-sx, 0px)); transition: background .2s, border-color .2s; }
.kkh-hs-num { font: 10px/1 var(--kkh-mono); color: var(--kkh-hell); opacity: .85; }
.kkh-hs-kurz, .kkh-schmal .kkh-hs-lang, .kkh-hs.kkh-v-kurz .kkh-hs-lang { display: none; }
.kkh-schmal .kkh-hs-kurz, .kkh-hs.kkh-v-kurz .kkh-hs-kurz { display: inline; }
/* Wenig Platz: nur die Nummer; Titel bleibt im Panel und für Screenreader (aria-label am Button) */
.kkh-hs.kkh-v-nr .kkh-hs-lang, .kkh-hs.kkh-v-nr .kkh-hs-kurz { display: none !important; }
.kkh-hs.kkh-v-nr .kkh-hs-label { gap: 0; padding: 7px 9px; }
/* Kein freier Platz für das Label: nur der Punkt (Text bleibt für Screenreader erhalten) */
.kkh-hs.kkh-ohne-label .kkh-hs-label, .kkh-hs.kkh-ohne-label .kkh-hs-line { opacity: 0; pointer-events: none; }
.kkh-hs-btn:hover .kkh-hs-label, .kkh-hs.kkh-offen .kkh-hs-label, .kkh-hs-btn:focus-visible .kkh-hs-label,
.kkh-hs-btn[aria-expanded="true"] .kkh-hs-label { background: var(--kkh-blau); border-color: rgba(180, 205, 240, .6); }
.kkh-hotspots .kkh-hs-btn:focus-visible { outline: none; }
.kkh-hs-btn:focus-visible .kkh-hs-dot { outline: 2px solid #fff; outline-offset: 3px; }

.kkh-hs-panel { position: absolute; left: -11px; top: 26px; width: 300px; padding: 18px 18px 12px; border-radius: 12px;
  background: var(--kkh-glas); border: 1px solid rgba(180, 205, 240, .22);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: auto; text-align: left; }
.kkh-hs[data-panel="left"] .kkh-hs-panel { left: auto; right: -11px; }
.kkh-hs[data-v="up"] .kkh-hs-panel { top: auto; bottom: 26px; transform: translateY(-6px); }
.kkh-hs.kkh-offen .kkh-hs-panel { opacity: 1; visibility: visible; transform: none; }
.kkh-schmal .kkh-hs-panel { display: none; }

/* Inhalt (im Panel und in der Leiste unten gleich) */
.kkh-hs-kicker { margin: 0 0 6px; font: 10px/1.4 var(--kkh-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--kkh-gedimmt); }
.kkh-hs-titel { margin: 0 0 12px; font: 500 17px/1.25 var(--kkh-head); color: #fff; }
.kkh-hs-text { margin: 0 0 12px; font: 15px/1.45 var(--kkh-text); color: rgba(255, 255, 255, .8); }
.kkh-hotspots .kkh-hs-links, .kkh-sheet .kkh-hs-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(180, 205, 240, .14); }
.kkh-hotspots .kkh-hs-links li, .kkh-sheet .kkh-hs-links li { margin: 0; padding: 0; list-style: none; }
.kkh-hotspots .kkh-hs-links a, .kkh-sheet .kkh-hs-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid rgba(180, 205, 240, .14); color: #fff; text-decoration: none; font: 15px/1.3 var(--kkh-text); }
.kkh-hotspots .kkh-hs-links a::after, .kkh-sheet .kkh-hs-links a::after { content: "→"; color: var(--kkh-hell); transition: transform .2s; }
.kkh-hotspots .kkh-hs-links a:hover, .kkh-hotspots .kkh-hs-links a:focus-visible,
.kkh-sheet .kkh-hs-links a:hover, .kkh-sheet .kkh-hs-links a:focus-visible { color: var(--kkh-hell); outline: none; }
.kkh-hotspots .kkh-hs-links a:hover::after, .kkh-sheet .kkh-hs-links a:hover::after { transform: translateX(4px); }

/* Termine: Datum klein über dem Titel */
.kkh-hotspots .kkh-hs-links .kkh-termin, .kkh-sheet .kkh-hs-links .kkh-termin { align-items: center; }
.kkh-hotspots span.kkh-termin, .kkh-sheet span.kkh-termin { display: flex; padding: 10px 2px; border-bottom: 1px solid rgba(180, 205, 240, .14); color: #fff; }
.kkh-termin-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kkh-termin-datum { font: 10px/1.4 var(--kkh-mono); letter-spacing: .08em; color: var(--kkh-gedimmt); }
.kkh-termin-titel { font: 15px/1.3 var(--kkh-text); }

/* Leiste unten für schmale Bildschirme – hängt am <body>, damit nichts darüber liegt */
.kkh-sheet { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 2147483000; padding: 20px 18px 10px;
  border-radius: 14px; background: rgba(5, 16, 42, .94); border: 1px solid rgba(180, 205, 240, .22);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  --kkh-blau: #164194; --kkh-hell: #B4CDF0; --kkh-gedimmt: rgba(180, 205, 240, .66);
  --kkh-head: "eurostile-extended", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --kkh-text: "futura-pt", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --kkh-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.kkh-sheet[hidden] { display: none; }
.kkh-sheet .kkh-sheet-zu { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid rgba(180, 205, 240, .3); background: none; color: #fff; font: 18px/1 Arial, sans-serif; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .kkh-hs-dot::after { animation: none; opacity: .6; }
}