/* ============================================================
   QISSES — „Die Nachtstraße"
   Das Bild IST die Website: gemalte Straßenszene, jedes
   erleuchtete Fenster ein Kapitel, Klavier im Erker.
   Palette: Nacht #07060B · Ultraviolett #7A2BFF · Plasma #C86BFF
            Honig #F5A83C · Pergament #140E22
   ============================================================ */

@font-face {
    font-family: 'Cinzel Decorative';
    src: url('fonts/cinzel-decorative-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cinzel Decorative';
    src: url('fonts/cinzel-decorative-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo-italic.woff2') format('woff2');
    font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Chivo Mono';
    src: url('fonts/chivo-mono.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
    --nacht: #07060B;
    --pergament: #140E22;
    --ultra: #7A2BFF;
    --plasma: #C86BFF;
    --gold: #D9A441;
    --gold-hell: #F2CC7B;
    --honig: #F5A83C;
    --hell: #F0E9FF;
    --text: #D5CCEE;
    --nebel-txt: #9A8FC2;

    --maerchen: 'Cinzel Decorative', Georgia, serif;
    --body: 'Archivo', 'Helvetica Neue', sans-serif;
    --mono: 'Chivo Mono', 'Courier New', monospace;
}

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

html, body { height: 100%; }

body {
    background: var(--nacht);
    color: var(--text);
    font-family: var(--body);
    font-size: 16.5px;
    line-height: 1.65;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ultra); color: var(--hell); }

button:focus-visible, a:focus-visible {
    outline: 2px solid var(--gold-hell);
    outline-offset: 3px;
}

/* ---------- Preloader: der Zauberspiegel ---------- */

#lade {
    position: fixed; inset: 0; z-index: 100;
    background: var(--nacht) radial-gradient(ellipse 70% 60% at 50% 42%, rgba(122, 43, 255, .14), transparent 70%);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .9s ease;
}
#lade.weg { opacity: 0; pointer-events: none; }

.lade-spiegel {
    width: min(420px, 88vw);
    aspect-ratio: 738 / 1477;
    max-height: 88vh;
    background: url('img/rahmen-panel.webp') no-repeat center / contain;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 20px;
    padding: 17% 22%;
    text-align: center;
}

.lade-wortmarke {
    font-family: var(--maerchen);
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    color: var(--gold-hell);
    text-shadow: 0 0 26px rgba(200, 107, 255, .6);
}
.lade-unter {
    font-family: var(--mono);
    font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
    color: var(--nebel-txt);
}

.lade-balken {
    width: 78%; height: 2px;
    background: rgba(217, 164, 65, .22);
    position: relative;
}
.lade-balken .voll {
    position: absolute; inset: 0 auto 0 0; width: 0%;
    background: linear-gradient(90deg, var(--gold), var(--plasma));
    box-shadow: 0 0 12px rgba(200, 107, 255, .8);
    transition: width .25s ease;
}
.lade-status {
    font-family: var(--mono);
    font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--nebel-txt);
}

.lade-eintritt { display: none; flex-direction: column; align-items: center; gap: 12px; }
#lade.bereit .lade-balken, #lade.bereit .lade-status { display: none; }
#lade.bereit .lade-eintritt { display: flex; }

.btn-ohne-ton {
    font-family: var(--mono);
    font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--nebel-txt);
    background: none; border: none; cursor: pointer;
    text-decoration: underline; text-underline-offset: 4px;
}
.btn-ohne-ton:hover, .btn-ohne-ton:focus-visible { color: var(--hell); }

/* ---------- Generierte Plaketten-Buttons ---------- */

.plakette-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 230px; min-height: 74px;
    padding: 14px 44px;
    background: url('img/plakette.webp') no-repeat center / 100% 100%;
    border: none;
    font-family: var(--maerchen);
    font-weight: 700;
    font-size: .82rem; letter-spacing: .1em;
    color: var(--gold-hell) !important;
    text-decoration: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    cursor: pointer;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
    transition: transform .22s ease, filter .22s ease;
}
.plakette-btn:hover, .plakette-btn:focus-visible {
    transform: scale(1.045);
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(245, 168, 60, .5)) brightness(1.1);
}
.plakette-btn.gross { min-width: 270px; font-size: .9rem; }

/* ---------- Die Welt / Bühne ---------- */

#welt {
    position: fixed; inset: 0;
    overflow: hidden;
    background: var(--nacht);
}
#welt.schwenkbar { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#welt.schwenkbar::-webkit-scrollbar { display: none; }

#zoomer { position: absolute; top: 0; left: 0; will-change: transform; }
#welt.schwenkbar #zoomer { position: relative; }

#buehne {
    position: relative;
    width: 1536px; height: 1024px;
    transform-origin: 0 0;
}
#szene {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Vignette: Bild schmilzt in die Schwärze */
#vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 5;
    background:
        radial-gradient(ellipse 118% 105% at 50% 46%, transparent 0%, transparent 62%, rgba(7, 6, 11, .92) 100%);
}

/* ---------- Lebendiges Licht auf dem Bild ---------- */

.flacker {
    position: absolute; z-index: 2;
    left: calc(var(--fx) - var(--fw) / 2);
    top: calc(var(--fy) - var(--fh) / 2);
    width: var(--fw); height: var(--fh);
    background: radial-gradient(ellipse at center, rgba(var(--farbe), .34), transparent 68%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: kerzenlicht var(--takt) ease-in-out infinite alternate;
}
.flacker.neon-puls { animation-name: neonlicht; }

@keyframes kerzenlicht {
    0% { opacity: .25; transform: scale(.96); }
    35% { opacity: .6; }
    60% { opacity: .38; }
    100% { opacity: .72; transform: scale(1.04); }
}
@keyframes neonlicht {
    0% { opacity: .2; }
    45% { opacity: .65; }
    52% { opacity: .3; }
    58% { opacity: .7; }
    100% { opacity: .45; }
}

/* Sterne */
#sterne { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.stern {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #EFE6FF;
    box-shadow: 0 0 6px rgba(200, 107, 255, .9);
    animation: funkeln var(--takt, 3s) ease-in-out infinite alternate;
    animation-delay: var(--warte, 0s);
}
@keyframes funkeln {
    from { opacity: .1; transform: scale(.7); }
    to { opacity: .9; transform: scale(1.15); }
}

/* Nebel zieht über das Pflaster */
.nebel {
    position: absolute; z-index: 3;
    bottom: -60px;
    pointer-events: none;
    opacity: .34;
    mix-blend-mode: screen;
}
.nebel.n1 { left: -140px; animation: nebelzug 46s ease-in-out infinite alternate; }
.nebel.n2 { right: -200px; bottom: -110px; opacity: .22; transform: scaleX(-1); animation: nebelzug 61s ease-in-out infinite alternate-reverse; }
@keyframes nebelzug {
    from { translate: 0 0; }
    to { translate: 170px -14px; }
}

/* ---------- Die klickbaren Fenster ---------- */

.spot {
    position: absolute; z-index: 8;
    left: var(--sx); top: var(--sy);
    width: var(--sw); height: var(--sh);
    background: radial-gradient(ellipse at center, rgba(200, 107, 255, 0), transparent 70%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
}
.spot::before {
    /* Glut, die beim Zeigen erwacht */
    content: ''; position: absolute; inset: -18%;
    background: radial-gradient(ellipse at center, rgba(245, 200, 120, .32), rgba(200, 107, 255, .18) 55%, transparent 72%);
    opacity: 0;
    transition: opacity .35s ease;
    mix-blend-mode: screen;
    border-radius: 50%;
    pointer-events: none;
}
.spot:hover::before, .spot:focus-visible::before { opacity: 1; }
.spot:focus-visible { outline-offset: -2px; }

/* Schildchen am Fenster */
.spot-schild {
    position: absolute;
    left: 50%; bottom: calc(100% + 6px);
    transform: translateX(-50%) translateY(6px) scale(.92);
    white-space: nowrap;
    font-family: var(--maerchen);
    font-weight: 400;
    font-size: .74rem;
    color: var(--gold-hell);
    background: rgba(14, 9, 26, .92);
    border: 1px solid rgba(217, 164, 65, .55);
    border-radius: 3px;
    padding: 8px 16px 7px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .6), inset 0 0 14px rgba(122, 43, 255, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
}
.spot-schild::after {
    content: ''; position: absolute;
    left: 50%; top: 100%; transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(217, 164, 65, .55);
}
.spot:hover .spot-schild, .spot:focus-visible .spot-schild {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.spot-schild em { font-style: normal; color: var(--plasma); }

/* Laternen-Schild nach links versetzen, damit es im Bild bleibt */
.spot-laterne .spot-schild { left: auto; right: 0; transform: translateY(6px) scale(.92); }
.spot-laterne:hover .spot-schild, .spot-laterne:focus-visible .spot-schild { transform: translateY(0) scale(1); }
.spot-laterne .spot-schild::after { left: auto; right: 40px; }

/* Piano-Spot: goldene Glut, wenn Musik spielt */
.spot-piano.spielt::before {
    opacity: .85;
    background: radial-gradient(ellipse at center, rgba(245, 168, 60, .4), rgba(200, 107, 255, .12) 60%, transparent 75%);
    animation: kerzenlicht 2.6s ease-in-out infinite alternate;
}

/* ---------- Die Fliege ---------- */

#fliege {
    position: absolute; z-index: 9;
    top: 0; left: 0;
    width: 44px; height: 44px;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 0 8px rgba(154, 77, 255, .8));
}
#fliege img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#fliege .frame-flug { display: none; transform: scale(1.28); }
#fliege.fliegt .frame-flug { display: block; }
#fliege.fliegt .frame-ruhe { display: none; }

/* ---------- Hinweis ---------- */

#fenster-hinweis {
    position: absolute; z-index: 20;
    left: 50%; bottom: 52px;
    transform: translateX(-50%);
    font-family: var(--maerchen);
    font-size: .78rem;
    color: var(--gold-hell);
    background: rgba(14, 9, 26, .88);
    border: 1px solid rgba(217, 164, 65, .5);
    border-radius: 3px;
    padding: 10px 22px 9px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s ease;
}
#fenster-hinweis.sichtbar { opacity: 1; }

/* ---------- Schleier & Portal ---------- */

#schleier {
    position: fixed; inset: 0; z-index: 40;
    background: radial-gradient(ellipse at center, rgba(7, 5, 14, .68), rgba(5, 3, 10, .9));
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}
#schleier.zu { opacity: 1; pointer-events: auto; }

#portal {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: 3vh 2vw;
    pointer-events: none;
}
#portal[hidden] { display: none; }

#portal-rahmen {
    position: relative;
    width: min(960px, 96vw);
    aspect-ratio: 1478 / 988;
    max-height: 94vh;
    background: url('img/kartusche.webp?v=2') no-repeat center / 100% 100%;
    filter: drop-shadow(0 30px 80px rgba(0, 0, 0, .8));
    pointer-events: auto;
}

#portal-zu {
    position: absolute; z-index: 5;
    top: 7.5%; right: 6%;
    width: 58px; height: 58px;
    background: url('img/medaillon.webp') no-repeat center / contain;
    border: none;
    cursor: pointer;
    color: var(--gold-hell);
    font-family: var(--maerchen);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease, filter .2s ease;
}
#portal-zu span { font-size: 1.5rem; line-height: 1; margin-top: -3px; text-shadow: 0 0 8px rgba(0,0,0,.8); }
#portal-zu:hover, #portal-zu:focus-visible {
    transform: scale(1.12) rotate(90deg);
    filter: drop-shadow(0 0 14px rgba(245, 168, 60, .6));
}

#portal-inhalt {
    position: absolute;
    inset: 18.5% 13.5% 18% 13.5%;
}

.tafel {
    display: none;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 22px 18px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(217, 164, 65, .5) transparent;
}
#portal-mehr {
    position: absolute; z-index: 5;
    bottom: 10%; left: 50%;
    transform: translateX(-50%);
    font-family: var(--maerchen);
    font-size: 1.5rem;
    color: var(--gold-hell);
    text-shadow: 0 0 12px rgba(245, 168, 60, .8);
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    animation: winken 1.6s ease-in-out infinite;
}
#portal-mehr.sichtbar { opacity: 1; }
@keyframes winken {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

.tafel::-webkit-scrollbar { width: 6px; }
.tafel::-webkit-scrollbar-thumb { background: rgba(217, 164, 65, .45); border-radius: 3px; }
.tafel.offen { display: block; }

/* ---------- Typografie im Portal ---------- */

.tafel-label {
    font-family: var(--mono);
    font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--plasma);
    margin-bottom: 12px;
}
.tafel-label.klein { margin-bottom: 4px; color: var(--nebel-txt); }

.tafel h1, .tafel h2 {
    font-family: var(--maerchen);
    font-weight: 700;
    color: var(--gold-hell);
    line-height: 1.22;
    margin-bottom: 14px;
    text-shadow: 0 0 24px rgba(122, 43, 255, .35);
}
.tafel h1 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.tafel h2 { font-size: clamp(1.15rem, 2.2vw, 1.6rem); }
.tafel h1 em, .tafel h2 em {
    font-style: normal;
    color: var(--plasma);
    text-shadow: 0 0 20px rgba(200, 107, 255, .55);
}
.tafel h3 {
    font-family: var(--body);
    font-weight: 680;
    font-size: 1.06rem;
    color: var(--hell);
    margin-bottom: 5px;
}
.tafel p { max-width: 62ch; margin-bottom: 13px; }
.tafel p strong { font-weight: 700; color: var(--hell); }
.tafel p em { font-style: italic; color: var(--hell); }
.tafel a { color: var(--plasma); text-decoration: underline; text-underline-offset: 3px; }

.zitat { font-style: italic; color: var(--nebel-txt); font-size: .94rem; }
.hausregel, .kontakt-note { font-style: italic; color: var(--nebel-txt); margin-top: 20px; font-size: .9rem; }

.zier-linie {
    border: none;
    height: 14px;
    margin: 8px 0 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14' preserveAspectRatio='none'%3E%3Cpath d='M4 7 H120 M200 7 H316 M120 7 C 136 1, 152 13, 160 7 S 188 1, 200 7' stroke='%23D9A441' stroke-width='1.1' fill='none' opacity='.7'/%3E%3Ccircle cx='160' cy='7' r='2.2' fill='%23C86BFF'/%3E%3C/svg%3E") no-repeat left center / 320px 14px;
}

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 26px; padding: 0; }
.tags li {
    font-family: var(--mono);
    font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
    color: #C9B790;
    border: 1px solid rgba(217, 164, 65, .4);
    border-radius: 2px;
    padding: 5px 9px 4px;
    background: rgba(122, 43, 255, .1);
    transform: rotate(-.5deg);
}
.tags li:nth-child(2n) { transform: rotate(.6deg); }

.eintrag { margin-bottom: 28px; }

.messwerte { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
.messwert { flex: 1 1 160px; min-width: 150px; padding-top: 12px; border-top: 1px solid rgba(217, 164, 65, .35); }
.messwert dt {
    font-family: var(--maerchen);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--plasma);
    text-shadow: 0 0 16px rgba(200, 107, 255, .45);
    margin-bottom: 6px;
}
.messwert dd { font-size: .88rem; color: var(--nebel-txt); }

.sequenz { list-style: none; counter-reset: schritt; padding: 0; margin-top: 8px; }
.sequenz li {
    counter-increment: schritt;
    position: relative;
    padding: 15px 0 13px 64px;
    border-bottom: 1px solid rgba(217, 164, 65, .22);
}
.sequenz li::before {
    content: counter(schritt, decimal-leading-zero);
    position: absolute; left: 2px; top: 15px;
    font-family: var(--maerchen);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--gold);
    text-shadow: 0 0 14px rgba(245, 168, 60, .45);
}
.sequenz h3 { margin-bottom: 2px; }
.sequenz p { margin: 0; font-size: .92rem; }

.telemetrie { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 20px 0; }
.telemetrie dt {
    font-family: var(--mono);
    font-size: .54rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--nebel-txt);
    margin-bottom: 2px;
}
.telemetrie dd {
    font-family: var(--maerchen);
    font-weight: 700;
    font-size: .92rem;
    color: var(--gold-hell);
}

.legal h3 { font-size: .95rem; margin-top: 18px; }
.legal p { font-size: .85rem; }

/* ---------- Unterzeile ---------- */

#unterzeile {
    position: fixed; z-index: 30;
    left: 0; right: 0; bottom: 10px;
    text-align: center;
    font-family: var(--mono);
    font-size: .56rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(154, 143, 194, .75);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
#unterzeile button {
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    color: rgba(217, 164, 65, .85);
    background: none; border: none; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
#unterzeile button:hover, #unterzeile button:focus-visible { color: var(--gold-hell); }
#unterzeile .trenner { opacity: .4; margin: 0 7px; }
#klavier-klein .an { color: var(--plasma); }

/* ---------- Responsive ---------- */

@media (max-width: 860px), (orientation: portrait) and (max-width: 1024px) {
    #fenster-hinweis { bottom: 74px; font-size: .68rem; padding: 8px 14px 7px; width: max-content; max-width: 88vw; white-space: normal; text-align: center; }
    #portal { padding: 0; }
    #portal-rahmen {
        width: 96vw;
        aspect-ratio: auto;
        height: min(88dvh, 780px);
        background-size: 100% 100%;
    }
    #portal-inhalt { inset: 17.5% 13% 17% 13%; }
    #portal-zu { top: 3%; right: 2%; width: 48px; height: 48px; }
    .tafel { padding-right: 10px; }
    .tafel h1 { font-size: 1.2rem; }
    .tafel h2 { font-size: 1.1rem; }
    .spot-schild { display: none; }
    #unterzeile { bottom: 6px; }
}

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

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    #fliege, .nebel { display: none; }
    .flacker { opacity: .4; }
}

/* ---------- Kein JavaScript ---------- */

.no-js #lade { display: none; }
.no-js body { overflow: auto; }
.no-js #welt { position: relative; height: auto; }
.no-js #buehne { transform: scale(.5); transform-origin: 0 0; }
.no-js #portal { position: relative; display: block; padding: 20px; pointer-events: auto; }
.no-js #portal[hidden] { display: block; }
.no-js #portal-rahmen { aspect-ratio: auto; height: auto; background: var(--pergament); }
.no-js #portal-inhalt { position: relative; inset: auto; padding: 30px; }
.no-js .tafel { display: block; height: auto; border-bottom: 1px solid rgba(217, 164, 65, .3); }
.no-js #fliege { display: none; }