/* ============================================================
   ROOT VARIABLES
============================================================ */
:root {
    --lrad-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --lrad-text-color: #222222;
    --lrad-popup-bg: #ffffff;

    --lrad-hotspot-color: #ff5722;
    --lrad-hotspot-radius: 40px; /* Desktop static size */
    --lrad-mobile-min-opacity: 0.4; /* Wird per Inline-Style aus Optionen gesetzt */
    --lrad-hover-radius: 60px; /* Desktop-Hover-Zone */

    --lrad-h1-size: 32px;
    --lrad-h2-size: 26px;
    --lrad-h3-size: 22px;
    --lrad-h4-size: 18px;
}

/* ============================================================
   GENERAL ROOM LAYOUT
============================================================ */
.lrad-room {
    position: relative;
    font-family: var(--lrad-font-family);
    color: var(--lrad-text-color);
}

.lrad-room-inner {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.lrad-room-image {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   ROOM HELP ICONS
============================================================ */
.lrad-room-help-overlay {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    gap: 6px;
    z-index: 20;
}

.lrad-room-help-trigger {
    border: none;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.8);
    color: #333;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
@media (max-width: 1023px) {
    .lrad-room-help-overlay {
        right: 8px;
        top: 8px;
        gap: 5px;
    }

    .lrad-room-help-trigger {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }
}
@media (max-width: 767px) {
    .lrad-room-help-overlay {
        right: 6px;
        top: 6px;
        gap: 4px;
    }

    .lrad-room-help-trigger {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }
}


.lrad-room-help-trigger:hover,
.lrad-room-help-trigger:focus-visible {
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.12);
}

/* ============================================================
   HOTSPOT BASE STYLE (shared desktop & mobile)
============================================================ */
.lrad-hotspot-desktop,
.lrad-hotspot-mobile {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid #ffffff;
    background-color: var(--lrad-hotspot-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.lrad-hotspot-icon-image {
    max-width: 70%;
    max-height: 70%;
    display: block;
}

/* ============================================================
   NEU: UNSICHTBARER HOTSPOT (kein Icon, kein Kreis)
   - bleibt klickbar
   - soll sich NICHT sichtbar machen bei Hover/Fokus
============================================================ */

/* Grundzustand: Kreis/Border/Background entfernen */
.lrad-hotspot-desktop.lrad-hotspot--invisible,
.lrad-hotspot-mobile.lrad-hotspot--invisible {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Inhalt im Button ausblenden (Icon-Bild, Fallback-●, Custom-Bild) */
.lrad-hotspot--invisible .lrad-hotspot-icon-image,
.lrad-hotspot--invisible .lrad-hotspot-icon {
    display: none !important;
}

/* Desktop: auch bei Hover/Fokus unsichtbar bleiben (wie Sound-Hotspot) */
@media (min-width: 1024px) {
    .lrad-hotspot-desktop.lrad-hotspot--invisible {
        opacity: 0 !important;
        transform: translate(-50%, -50%) !important;
    }

    .lrad-hotspot-desktop.lrad-hotspot--invisible:hover,
    .lrad-hotspot-desktop.lrad-hotspot--invisible:focus-visible {
        opacity: 0 !important;
        transform: translate(-50%, -50%) !important;
        outline: none !important;
    }
}

/* Mobile: ebenfalls komplett unsichtbar (kein 0.4 Default) */
@media (max-width: 1023px) {
    .lrad-hotspot-mobile.lrad-hotspot--invisible {
        opacity: 0 !important;
        transform: translate(-50%, -50%) !important;
        outline: none !important;
    }

    .lrad-hotspot-mobile.lrad-hotspot--invisible:hover,
    .lrad-hotspot-mobile.lrad-hotspot--invisible:focus-visible {
        opacity: 0 !important;
        transform: translate(-50%, -50%) !important;
        outline: none !important;
    }
}


/* SPEZIALFALL: GERÄUSCH-HOTSPOT → UNSICHTBAR (kein Kreis) */
.lrad-hotspot-desktop[data-mode="sound"],
.lrad-hotspot-mobile[data-mode="sound"] {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Auch im Hover/Fokus kein sichtbarer Effekt */
.lrad-hotspot-desktop[data-mode="sound"]:hover,
.lrad-hotspot-desktop[data-mode="sound"]:focus-visible,
.lrad-hotspot-mobile[data-mode="sound"]:hover,
.lrad-hotspot-mobile[data-mode="sound"]:focus-visible {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   DESKTOP-HOTSPOTS (≥1024px)
============================================================ */
@media (min-width: 1024px) {

    /* Desktop-Hotspots nutzen feste Größe */
    .lrad-hotspot-desktop {
        width: var(--lrad-hotspot-radius);
        height: var(--lrad-hotspot-radius);
        /* Standard-Opacity über Variable steuerbar (0 = unsichtbar, 1 = sichtbar) */
        opacity: var(--lrad-desktop-default-opacity, 0);
    }

    /* Näheradius */
    .lrad-hotspot-desktop::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: calc(var(--lrad-hover-radius) * 2);
        height: calc(var(--lrad-hover-radius) * 2);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: transparent;
    }
	/* Näheradius ignorieren: keine Hover-Zone (Desktop) */
.lrad-hotspot-desktop.lrad-hotspot--no-radius::before {
    display: none;
}


    /* Für Geräusch-Hotspots: keine extra Pseudo-Fläche sichtbar
       (die Klickfläche wird durch width/height definiert, bleibt aber unsichtbar) */
    .lrad-hotspot-desktop[data-mode="sound"]::before {
        display: none;
    }

    /* Hover macht Hotspot sichtbar (außer sound, siehe oben) */
    .lrad-hotspot-desktop:hover,
    .lrad-hotspot-desktop:focus-visible {
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1.1);
        outline: none;
    }

    /* MOBILE-HOTSPOTS AUF DESKTOP VERSTECKEN */
    .lrad-hotspot-mobile {
        display: none !important;
    }
}


/* ============================================================
   MOBILE-HOTSPOTS (<1024px)
============================================================ */
/* ============================================================
   MOBILE-HOTSPOTS (<1024px)
============================================================ */
@media (max-width: 1023px) {

    /* Desktop-Hotspots komplett ausblenden */
    .lrad-hotspot-desktop {
        display: none !important;
    }

    /* Tablet: Kreis kleiner */
    .lrad-hotspot-mobile {
        width: 30px;
        height: 30px;
        opacity: var(--lrad-mobile-min-opacity);
    }

    .lrad-hotspot-mobile:hover,
    .lrad-hotspot-mobile:focus-visible {
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Smartphones: Kreis noch kleiner */
@media (max-width: 767px) {
    .lrad-hotspot-mobile {
        width: 22px;
        height: 22px;
    }
}
@media (max-width: 1023px) {
  .lrad-hotspot-icon-image {
    max-width: 80%;
    max-height: 80%;
  }
}


/* ============================================================
   POPUP BACKDROP
============================================================ */
.lrad-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    /* Sehr hoher z-index, damit über Header/Footer aller Themes */
    z-index: 2147483647;
}

.lrad-popup[aria-hidden="false"] {
    display: flex;
}

body.lrad-popup-open {
    overflow: hidden;
}

/* ============================================================
   POPUP CONTENT
============================================================ */
.lrad-popup-content {
    background: var(--lrad-popup-bg);
    color: var(--lrad-text-color);
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.lrad-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lrad-popup-title {
    margin: 0;
    font-size: var(--lrad-h1-size);
}

.lrad-popup-header-actions {
    display: flex;
    gap: 6px;
}

.lrad-help-button,
.lrad-audio-button,
.lrad-close-button {
    border: none;
    cursor: pointer;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.8);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.lrad-help-button:hover,
.lrad-audio-button:hover,
.lrad-close-button:hover,
.lrad-help-button:focus-visible,
.lrad-audio-button:focus-visible,
.lrad-close-button:focus-visible {
    outline: none;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.12);
}

/* ============================================================
   POPUP - HELP TEXT
============================================================ */
.lrad-help-text {
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(0,0,0,0.03);
    display: none;
}

/* ============================================================
   POPUP BODY
============================================================ */
.lrad-popup-body {
    margin-top: 15px;
}
/* Kein “Luftloch” durch Standard-Margins/leer-Paragraphen am Anfang */
.lrad-popup-body > :first-child {
    margin-top: 0 !important;
}

/* Medien im Popup sauber blocken */
.lrad-popup-body img,
.lrad-popup-body video,
.lrad-popup-body iframe {
    display: block;
    max-width: 100%;
}

.lrad-popup-body iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

.lrad-popup-body h1 { font-size: var(--lrad-h1-size); }
.lrad-popup-body h2 { font-size: var(--lrad-h2-size); }
.lrad-popup-body h3 { font-size: var(--lrad-h3-size); }
.lrad-popup-body h4 { font-size: var(--lrad-h4-size); }

/* ============================================================
   MENU GRID
============================================================ */

/* Grid mit 3 Spalten auf Desktop:
   - Jede Kachel nimmt 1/3 ein
   - Jeder 4. Eintrag rutscht automatisch in die nächste Zeile */
.lrad-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

/* Eine Kachel belegt immer genau eine Grid-Spalte */
.lrad-menu-item {
    width: 100%;
}

/* Kachel-Inhalt bleibt wie gehabt */
.lrad-menu-item-button {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #dddddd;
    padding: 10px;
    background: var(--lrad-popup-bg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.lrad-menu-item-button:hover,
.lrad-menu-item-button:focus-visible {
    outline: none;
    background-color: #f3f3f3;
}

.lrad-menu-icon {
    max-width: 70px;
    max-height: 70px;
}

.lrad-menu-item-title {
    font-weight: 600;
    text-align: center;
}

.lrad-menu-item-desc {
    font-size: 0.9em;
    margin-top: 4px;
}

/* Auf kleineren Screens sanft herunterbrechen:
   - bis 900px: 2 Spalten
   - bis 600px: 1 Spalte */
@media (max-width: 900px) {
    .lrad-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .lrad-menu-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   MENU DETAIL
============================================================ */
.lrad-menu-detail {
    margin-top: 10px;
}

.lrad-menu-detail-title {
    font-size: var(--lrad-h2-size);
}

.lrad-menu-back-button {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 999px;
    border: 1px solid #ccc;
    padding: 4px 10px;
    background: #f3f3f3;
    cursor: pointer;
}

/* ============================================================
   RESPONSIVE POPUP
============================================================ */
@media (max-width: 600px) {
    .lrad-popup-content {
        width: 95%;
        padding: 15px;
    }
}
.lrad-collection-content {
    margin-top: 10px;
}
.lrad-hotspot--hidden { display: none !important; }

/* ============================================================
   CODE-GATE UI
============================================================ */
.lrad-codegate-ui {
  padding: 10px 4px;
  text-align: center;
}

.lrad-codegate-title {
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 6px;
}

.lrad-codegate-sub {
  opacity: .8;
  margin-bottom: 14px;
}

.lrad-codegate-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 14px 0;
  flex-wrap: wrap;
}

.lrad-codegate-box {
  width: 42px;
  height: 52px;
  border: 2px solid rgba(0,0,0,.15);
  border-radius: 10px;
  font-size: 22px;
  text-align: center;
  outline: none;
}

.lrad-codegate-box:focus {
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

.lrad-codegate-actions {
  margin-top: 8px;
}

.lrad-codegate-submit {
  border: none;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  background: rgba(0,0,0,.08);
}

.lrad-codegate-submit:hover,
.lrad-codegate-submit:focus-visible {
  background: rgba(0,0,0,.12);
  outline: none;
}

.lrad-codegate-error {
  color: #b00020;
  font-weight: 600;
  margin-top: 6px;
}
.lrad-codegate-hint{
  margin: 10px auto 0 auto;
  padding: 10px 12px;
  max-width: 520px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  text-align: left;
}
/* ============================================================
   SPIEL NEU STARTEN BUTTON
============================================================ */
.lrad-reset-btn {
  border: none;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  background: rgba(0,0,0,.08);
}

.lrad-reset-btn:hover,
.lrad-reset-btn:focus-visible {
  background: rgba(0,0,0,.14);
  outline: none;
}
/* ============================================================
   POPUP FOOTER: Hinweise-Text (klickbar)
============================================================ */
.lrad-popup-footer {
    margin-top: 12px;
    text-align: right;
    font-size: 13px;
    opacity: 0.8;
    display: none; /* wird per JS nur bei Inhalt eingeblendet */
}

.lrad-extra-info-link,
.lrad-extra-info-back {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: underline;
    color: inherit;
    font-size: 13px;
}
.lrad-extra-info-back {
    display: inline-block;
    margin-bottom: 10px;
    opacity: 0.9;
}
/* Hinweis-Link direkt unter dem Hilfetext */
.lrad-extra-info-anchor {
    margin-top: 8px;
    text-align: right;
    font-size: 13px;
    opacity: 0.85;
}