:root {
    --background: #050914;
    --background-soft: #0b1122;
    --surface: rgba(8, 13, 28, 0.78);

    --text: #f5f1e8;
    --text-muted: #b8bfd0;

    --gold: #d8b46a;
    --gold-light: #f3d690;

    --border: rgba(216, 180, 106, 0.32);

    --shadow:
        0 28px 90px rgba(0, 0, 0, 0.58);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--background);
}

body {
    min-height: 100vh;
    margin: 0;

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(50, 55, 105, 0.32),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #080d1c 0%,
            var(--background) 74%
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

button,
a {
    font: inherit;
}

a {
    color: inherit;
}

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

.museum-header {
    position: relative;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: min(1500px, calc(100% - 40px));
    margin: 0 auto;
    padding: 22px 0;
}

.museum-logo {
    color: var(--gold-light);

    font-size: 1.05rem;
    letter-spacing: 0.12em;

    text-decoration: none;
    text-transform: uppercase;
}

.language-switcher {
    display: flex;
    gap: 5px;

    padding: 4px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: rgba(5, 9, 20, 0.78);
}

.language-button {
    min-width: 42px;
    padding: 7px 11px;

    border: 0;
    border-radius: 999px;

    color: var(--text-muted);
    background: transparent;

    cursor: pointer;
}

.language-button:hover {
    color: var(--text);
}

.language-button[aria-pressed="true"] {
    color: #1b1421;
    background: var(--gold-light);
}

/* --------------------------------------------------
   Eingangshalle
-------------------------------------------------- */

.entrance-hall {
    width: min(1536px, 100%);
    margin: 0 auto;

    padding: 38px 20px 80px;

    text-align: center;
}

.intro {
    max-width: 780px;
    margin: 0 auto 38px;
}

.eyebrow {
    margin: 0 0 12px;

    color: var(--gold-light);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.26em;
    text-transform: uppercase;
}

h1 {
    margin: 0;

    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 1;

    text-wrap: balance;
}

.intro-text {
    max-width: 670px;
    margin: 22px auto 0;

    color: var(--text-muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(1rem, 1.8vw, 1.18rem);
    line-height: 1.7;
}

/* --------------------------------------------------
   Museumskarte
-------------------------------------------------- */

.museum-map-wrapper {
    width: 100%;

    padding: clamp(6px, 1vw, 14px);

    border: 1px solid var(--border);
    border-radius: 24px;

    background: var(--surface);

    box-shadow: var(--shadow);

    backdrop-filter: blur(12px);
}

.museum-map {
    position: relative;

    overflow: hidden;

    width: 100%;

    /*
       Das Bild ist 1536 × 1024 Pixel groß.
       Das entspricht einem Seitenverhältnis von 3:2.
    */
    aspect-ratio: 3 / 2;

    border-radius: 17px;

    background: #040813;
}

.museum-map img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* --------------------------------------------------
   Klickbare Raumbeschriftungen
-------------------------------------------------- */

.room-hotspot {
    position: absolute;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(130px, 13vw, 210px);
    min-height: 42px;

    padding: 9px 14px;

    border: 1px solid rgba(238, 207, 143, 0.62);
    border-radius: 999px;

    color: #fff8e7;

    background:
        linear-gradient(
            180deg,
            rgba(24, 25, 44, 0.92),
            rgba(7, 10, 23, 0.94)
        );

    box-shadow:
        0 9px 25px rgba(0, 0, 0, 0.58),
        inset 0 0 16px rgba(216, 180, 106, 0.08);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(0.68rem, 1vw, 0.92rem);
    font-weight: 700;
    line-height: 1.25;

    text-align: center;
    text-decoration: none;

    transform: translate(-50%, -50%);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;

    backdrop-filter: blur(8px);
}

.room-hotspot::before {
    position: absolute;
    inset: -7px;

    border: 1px solid transparent;
    border-radius: inherit;

    content: "";
}

.room-hotspot:hover,
.room-hotspot:focus-visible {
    z-index: 5;

    border-color: var(--gold-light);

    background:
        linear-gradient(
            180deg,
            rgba(65, 48, 88, 0.97),
            rgba(17, 15, 39, 0.97)
        );

    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.66),
        0 0 22px rgba(216, 180, 106, 0.28);

    outline: none;

    transform:
        translate(-50%, -50%)
        scale(1.06);
}

/* --------------------------------------------------
   Positionen der acht Räume
-------------------------------------------------- */

/* Oben links */

.room-hotspot--rem {
    top: 48%;
    left: 15%;
}

/* Oben Mitte links */

.room-hotspot--mythology {
    top: 44%;
    left: 33%;
}

/* Oben Mitte rechts */

.room-hotspot--culture {
    top: 45%;
    left: 64%;
}

/* Oben rechts */

.room-hotspot--lucid {
    top: 48%;
    left: 84%;
}

/* Unten links */

.room-hotspot--art {
    top: 86%;
    left: 15%;
}

/* Unten Mitte links */

.room-hotspot--psychology {
    top: 90%;
    left: 34%;
}

/* Unten Mitte rechts */

.room-hotspot--generator {
    top: 90%;
    left: 64%;
}

/* Unten rechts */

.room-hotspot--nightmare {
    top: 86%;
    left: 84%;
}

/* --------------------------------------------------
   Hinweis unter der Karte
-------------------------------------------------- */

.instruction {
    margin: 24px 0 0;

    color: var(--text-muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

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

.museum-footer {
    width: min(1500px, calc(100% - 40px));
    margin: 0 auto;

    padding: 24px 0 40px;

    border-top: 1px solid var(--border);

    color: var(--text-muted);

    font-style: italic;
    text-align: center;
}

/* --------------------------------------------------
   Tablet
-------------------------------------------------- */

@media (max-width: 950px) {
    .museum-header {
        width: calc(100% - 28px);
    }

    .entrance-hall {
        padding-right: 10px;
        padding-left: 10px;
    }

    .room-hotspot {
        width: clamp(105px, 15vw, 150px);
        min-height: 34px;

        padding: 6px 9px;

        font-size: clamp(0.56rem, 1.3vw, 0.74rem);
    }
}

/* --------------------------------------------------
   Mobilgeräte
-------------------------------------------------- */

@media (max-width: 700px) {
    .museum-header {
        width: calc(100% - 22px);
        padding-top: 14px;
    }

    .museum-logo {
        max-width: 190px;

        font-size: 0.75rem;
        line-height: 1.35;
    }

    .entrance-hall {
        padding-top: 24px;
        padding-bottom: 56px;
    }

    .intro {
        margin-bottom: 28px;
    }

    .museum-map-wrapper {
        overflow-x: auto;

        padding: 5px;

        border-radius: 15px;
    }

    /*
       Die Karte bleibt auf Mobilgeräten groß genug.
       Sie kann horizontal verschoben werden.
    */

    .museum-map {
        width: 950px;
        max-width: none;

        aspect-ratio: 3 / 2;

        border-radius: 11px;
    }

    .room-hotspot {
        width: 130px;
        min-height: 34px;

        padding: 6px 8px;

        font-size: 0.67rem;
    }

    .instruction::after {
        display: block;

        margin-top: 7px;

        color: var(--gold);

        font-size: 0.8rem;

        content: "Auf dem Plan nach links und rechts wischen.";
    }
}

/* --------------------------------------------------
   Reduzierte Bewegung
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .room-hotspot {
        transition: none;
    }
}