*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html {
    font-size: 16px;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111;
}

#scene-wrapper {
    position: relative;

    width: 1365px;
    height: 768px;

    left: 50%;
    top: 0;

    transform-origin: top center;

    transform:
        translateX(-50%)
        scale(var(--scene-scale, 1));
}

body {
display: block;
}

#storefront {
    position: absolute;

    left: 50%;
    top: 0;

    width: 1365px;
    height: 768px;

    margin: 0;

    transform-origin: 50% 0%;

    transform:
        translateX(-50%)
        scale(var(--scene-scale, 1));

    transition: none;
}

#storefront.entering {
    transform:
        translateX(-70%)
        translateY(-980px)
        scale(5.2);

    transition: transform 5.8s ease-in;
}

#background {
    
    width: 1365px;
    height: auto;
    display: block;
}

#movie-poster{

    position:absolute;

    left:220px;

    top:428px;

    width:92px;

    height:145px;

    transform: rotate(1.2deg);

}

/* =========================================
   Leuchttafel im Schaufenster
========================================= */

#marquee {
    position: absolute;

    left: 341px;
    top: 401px;

    display: flex;
    flex-direction: column;
    gap: 5px;

    transform: rotate(1.4deg);
}

#marquee img {
    width: auto;
    height: 16px;
    margin-right: -1px;
}
.letter-space {
    width: 8px;
    flex-shrink: 0;
}

.marquee-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 190px;
}

#marquee-episode .letter-space {
    width: 4px;
}

/* =========================================
   Eingangstür – Hotspot
========================================= */

#door-hotspot {
    position: absolute;

    left: 760px;
    top: 320px;

    width: 200px;
    height: 400px;

    z-index: 10;
    cursor: pointer;
}

/* =========================================
   Szenenübergang
========================================= */

#scene-transition {
    position: absolute;
    inset: 0;

    background: black;

    opacity: 0;
    pointer-events: none;

    transition: opacity 1.8s ease;

    z-index: 20;
}

#scene-transition.active {
    opacity: 1;
}

/* =========================================
   Geöffnete Eingangstür
========================================= */

/* =========================================
   Geöffnete Eingangstür
========================================= */

#door-open {
    position: absolute;

    left: 750px;
    top: 230px;

    width: 200px;
    height: 550px;

    object-fit: cover;

    z-index: 9;

    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

#door-open.opening {
    opacity: 1;
}

/* =========================================
   Innenraum der Videothek
========================================= */

#videostore {
    position: absolute;

    left: 50%;
    top: 0;

    width: 1365px;
    height: 768px;

    margin: 0;

    opacity: 0;
    
    visibility: hidden;
    transition: opacity 1s ease-in-out;
    z-index: 20;

    transform-origin: top center;
}

#videostore-background {
    width: 100%;
    height: auto;
    display: block;

    transform: translateY(-4%);
}

/* =========================================
   Zeitung auf dem Tresen
========================================= */


#newspaper {

    position: absolute;

    left:170px;
    top: 555px;

    width: 220px;
    height: auto;

    transform: rotate(-2deg);

    z-index: 13;

    cursor: pointer;

}

#videostore-scene {
    position: relative;

    width: 100%;
    height: 100%;
}

/* =========================================
   VHS-Regal – Test-Hotspot
========================================= */

#shelf-hotspot {
    position: absolute;

    left: 200px;
    top: 35px;

    width: 380px;
    height: 720px;

   clip-path: polygon(
    0% 0%,
    100% 19%,
    100% 79%,
    0% 100%
);

    z-index: 10;
}

/* =========================================
   VHS-Kassetten im Regal
========================================= */

#shelf-vhs-layer {
    position: absolute;

    left: 120px;
    top: 20px;


    width: 1365px;
    height: 768px;

    z-index: 11;

    pointer-events: auto;
}

.vhs-case {
    position: absolute;

    left: 10px;
    top: 17px;

    width: 14px;
    height: 75px;

    z-index: 11;

    cursor: pointer;

}

.shelf-vhs {

position: absolute;

left: 10px;
top: 17px;

width: 35px;
height: 75px;

z-index: 11;

cursor: pointer;

}

#vhs-014 .vhs-spine {
    position: absolute;

    left: 13px;
    top: 0;

    width: 14px;
    height: 75px;

    object-fit: fill;

    transform-origin: left center;

    transform:
        perspective(300px)
        rotateY(50deg);

    z-index: 2;
}



#vhs-014 .vhs-front {
    position: absolute;

    left: 14px;
    top: 0;

    height: 75px;
    width: auto;

    opacity: 0;
    pointer-events: none;

    z-index: 1;
}

#vhs-014 .vhs-back {
    position: absolute;

    right: 0px;
    top: 0;

    height: 75px;
    width: auto;

    object-fit: contain;

    z-index: 1;
}




/* =========================================
   Regal – vordere Schrankseite
========================================= */

#shelf-side-overlay {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: auto;

    transform: translateY(-4%);

    pointer-events: none;
    z-index: 12;
}

#shelf-shelf1-overlay {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: auto;

    display: block;

    transform: translateY(-4%);

    pointer-events: none;

    z-index: 12;
}
/* =========================================
   VHS-Großansicht
========================================= */

#vhs-viewer {
    position: absolute;
    inset: 0;

    width: 1365px;
    height: 768px;

    display: none;

    z-index: 100;
}

/* Abdunklung der Videothek */

#vhs-viewer-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.72);

    z-index: 1;
}


/* =========================================
   VHS-Hülle in der Großansicht
========================================= */

#vhs-viewer-case {
    position: absolute;

    left: 50%;
    top: 38%;

    height: 520px;

    z-index: 2;

    cursor: pointer;

    transform:
        translate(-50%, -50%)
        perspective(1200px)
        rotateY(0deg);

    transform-origin: center center;
    transform-style: preserve-3d;

    transition:
        left 0.8s ease,
        top 0.8s ease,
        height 0.8s ease,
        transform 0.8s ease;
}

/* =========================================
   Vorderseite
========================================= */

#vhs-viewer-front {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;
    width: auto;

    object-fit: contain;

    transform: translateZ(10px);

    backface-visibility: hidden;

    z-index: 3;

    filter: drop-shadow(
        0 18px 25px rgba(0, 0, 0, 0.8)
    );
}


/* =========================================
   Rückseite
========================================= */

#vhs-viewer-back {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;
    width: auto;

    object-fit: contain;

    transform:
        rotateY(180deg)
        translateZ(10px);

    backface-visibility: hidden;

    z-index: 1;
}


/* =========================================
   Rücken / schmale Seite
========================================= */

#vhs-viewer-spine {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;
    width: 20px;

    object-fit: fill;

    transform-origin: left center;

    transform:
        rotateY(-90deg)
        translateX(-10px);

    backface-visibility: hidden;

    z-index: 2;
}

/* =========================================
   Shelf VHS (neue Engine)
========================================= */

.shelf-vhs {

    position: absolute;

    left: 10px;
    top: 17px;

    width: 14px;
    height: 75px;

    z-index: 11;

    cursor: pointer;

}
/* ==========================================
   Test-Regalfach
========================================== */

#test-compartment {

    position: absolute;

    left: 0;
    top: 0;

    width: 1365px;
    height: 768px;

    z-index: 9999;

    pointer-events: none;

}

.corner {

    position: absolute;

    width: 5px;
    height: 5px;

    background: red;

    border-radius: 50%;

}

.compartment-test-area {

    position: absolute;

    z-index: 999;

}

/* =========================================
   Drag VHS
========================================= */

.drag-vhs {

    position: absolute;

    width: 240px;
    height: 150px;

    perspective: 1200px;

    z-index: 100;

    pointer-events: none;

}


.drag-vhs-body {

    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    transform:
        rotateY(-62deg);

}


/* Alle drei Flächen */

.drag-vhs-body img {

    position: absolute;

    top: 0;
    left: 0;

    height: 100%;

    backface-visibility: hidden;
}

.drag-vhs-front {

    transform:
        translateZ(14px);

    z-index: 3;

}


.drag-vhs-back {

    transform:
        rotateY(180deg)
        translateZ(14px);

    z-index: 1;

}


.drag-vhs-spine {

    width: 28px;

    transform-origin: left center;

    transform:
        rotateY(-90deg)
        translateX(-14px);

    z-index: 2;

}


/* =========================================
   Three.js VHS Ebene
========================================= */

#three-vhs-container {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 50;

    pointer-events: none;

}

/* =========================================
   Zeitung – 3D-Aufklappen
========================================= */

#newspaper-open {

    position: absolute;

    transform-style: preserve-3d;

    perspective: 1200px;

}


/* =========================================
   Linker Buchdeckel
========================================= */

.newspaper-cover {

    position: absolute;

    left: 50%;
    top: 0;

    width: 50%;
    height: 100%;

    transform-style: preserve-3d;

    transform-origin: left center;

    transition:
        transform 1.2s ease-in-out;

}

.newspaper-cover-open {

    transform:
        rotateY(-180deg);

}

/* =========================================
   Vorder- und Rückseite des Deckels
========================================= */

.newspaper-cover-front,
.newspaper-cover-back {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-size: cover;

    backface-visibility: hidden;

}


/* =========================================
   Vorderseite
========================================= */

.newspaper-cover-front {

    background-position: center;

}


/* =========================================
   Rückseite
========================================= */

.newspaper-cover-back {

    background-size: 200% 100%;
    background-position: left center;

    transform:
        rotateY(180deg);

}


/* =========================================
   Rechte Zeitungsseite
========================================= */

.newspaper-right-page {

    position: absolute;

    right: 0;
    top: 0;

    width: 50%;
    height: 100%;

    background-image:
        url("assets/models/newspaper-open.png");

    background-size: 200% 100%;
    background-position: right center;

    background-repeat: no-repeat;

}

/* =========================================
   Zeitung – Schließen-Button
========================================= */

.newspaper-close {

    position: absolute;

    right: 12px;
    top: 12px;

    width: 36px;
    height: 36px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.75);

    color: white;

    font-size: 28px;
    line-height: 34px;

    cursor: pointer;

    z-index: 300;

}


.newspaper-close:hover {

    background: rgba(0, 0, 0, 0.9);

}

/* =========================================
   Zeitung – Inhalt
========================================= */

.newspaper-content {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 10;

    pointer-events: auto;

}


/* =========================================
   Inhalt einer Zeitungsseite
========================================= */

.newspaper-page-content {

    position: absolute;

    top: 12.5%;

    width: 40%;

    height: 82%;

    overflow: hidden;

}


/* =========================================
   Linke Seite
========================================= */

.newspaper-left-content {

    left: 5%;

}


/* =========================================
   Rechte Seite
========================================= */

.newspaper-right-content {

    left: 55%;

}


/* =========================================
   Einzelne Episode
========================================= */

.newspaper-episode {

    width: 100%;

    margin-bottom: 20px;

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

    color: #17120d;

}


/* =========================================
   Episodentitel
========================================= */

.newspaper-episode h2 {

    margin:
        0 0 8px 0;

    font-size: 20px;

    line-height: 1.05;

}


/* =========================================
   Beschreibung
========================================= */

.newspaper-episode p {

    margin: 0;

    font-size: 15px;

    line-height: 1.3;

}

/* =========================================
   Zeitung – Podcast Player
========================================= */

.newspaper-player {

    width: 100%;

    margin-top: 12px;
    margin-bottom: 18px;

    font-family:
        Arial,
        sans-serif;

    pointer-events: auto;

}


/* =========================================
   Obere Player-Zeile
========================================= */

.newspaper-player-top {

    display: flex;

    align-items: center;

    gap: 6px;

}


/* =========================================
   Allgemeine Buttons
========================================= */

.newspaper-player button {

    border: none;

    background:
        rgba(40, 30, 20, 0.85);

    color: #e8d5b5;

    cursor: pointer;

    height: 24px;

    min-width: 16px;

    padding: 0 4px;

    font-size: 11px;

    flex-shrink: 0;

}


/* =========================================
   Play Button
========================================= */

.newspaper-player-play {

    width: 32px;

    font-size: 16px !important;

}


/* =========================================
   Kapitelname
========================================= */

.newspaper-player-chapter {

    flex: 1;

    min-width: 0;

    font-size: 13px;

    font-weight: bold;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* =========================================
   Zeit
========================================= */

.newspaper-player-time {

    font-size: 11px;

    white-space: nowrap;

}


/* =========================================
   Fortschrittsbalken
========================================= */

.newspaper-player-progress {

    display: block;

    width: 100%;

    margin-top: 6px;

    cursor: pointer;

}

/* =========================================
   Rechtlicher Flyer – Storefront
========================================= */

#legal-flyer {

    position: absolute;

    /* Vorläufige Position */
    left: 41%;
    top: 73%;

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

    z-index: 20;

    cursor: pointer;

}

/* =========================================
   Rechtlicher Flyer – Klickflächen
========================================= */

.legal-flyer-hotspot {

    position: absolute;

    cursor: pointer;

    z-index: 30;

    

}


/* Impressum – linke Hälfte des Flyers */

#legal-impressum-hotspot {

    left: 0;
    top: 20%;

    width: 50%;
    height: 75%;

}


/* Datenschutz – rechte Hälfte des Flyers */

#legal-datenschutz-hotspot {

    right: 0;
    top: 20%;

    width: 50%;
    height: 75%;

}


#legal-flyer-image {

    display: block;

    width: 220px;

    height: auto;

    pointer-events: none;

}

/* =========================================
   Rechtliches – Popup
========================================= */

.legal-info-overlay {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    display: flex;

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

    background:
        rgba(0, 0, 0, 0.78);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s ease;

    z-index: 99999;

}


/* Popup sichtbar */

.legal-info-overlay.visible {

    opacity: 1;

    pointer-events: auto;

}


/* =========================================
   Popup-Fenster
========================================= */

.legal-info-window {

    position: relative;

    width: min(900px, 90vw);

    height: min(650px, 85vh);

    background:
        #e5d1ad;

    border:
        3px solid #241b14;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8);

    overflow: hidden;

    transform:
        scale(0.92);

    transition:
        transform 0.35s ease;

}


/* Popup beim Öffnen leicht vergrößern */

.legal-info-overlay.visible
.legal-info-window {

    transform:
        scale(1);

}


/* =========================================
   Schließen-Button
========================================= */

.legal-info-close {

    position: absolute;

    right: 12px;
    top: 12px;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.8);

    color: white;

    font-size: 28px;

    line-height: 40px;

    text-align: center;

    cursor: pointer;

    z-index: 10;

}


.legal-info-close:hover {

    background:
        rgba(0, 0, 0, 1);

}


/* =========================================
   Inhalt
========================================= */

.legal-info-content {

    width: 100%;
    height: 100%;

    padding: 45px 55px;

    overflow-y: auto;

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

    color:
        #17120d;

}


/* =========================================
   Überschrift
========================================= */

#legal-info-title {

    margin:
        0 0 25px 0;

    padding-bottom: 12px;

    border-bottom:
        3px solid #17120d;

    font-size: 34px;

    line-height: 1.1;

}


/* =========================================
   Text
========================================= */

#legal-info-text {

    font-size: 17px;

    line-height: 1.55;

}


#legal-info-text p {

    margin:
        0 0 18px 0;

}


#legal-info-text h2 {

    margin:
        28px 0 10px 0;

    font-size: 22px;

}


#legal-info-text h3 {

    margin:
        22px 0 8px 0;

    font-size: 19px;

}


/* =========================================
   Links
========================================= */

#legal-info-text a {

    color:
        #7b1e16;

    text-decoration:
        underline;

}


/* =========================================
   Smartphone
========================================= */

@media (max-width: 600px) {

    .legal-info-window {

        width: 94vw;

        height: 90vh;

    }


    .legal-info-content {

        padding:
            40px 25px 30px 25px;

    }


    #legal-info-title {

        font-size: 27px;

    }


    #legal-info-text {

        font-size: 15px;

        line-height: 1.5;

    }


    .legal-info-close {

        width: 36px;
        height: 36px;

        font-size: 25px;

        line-height: 36px;

    }

}

/* =========================================
   Rechtlicher Flyer – Innenraum
========================================= */

#legal-flyer-store {

    position: absolute;

    /* Position auf dem Notizbrett */
    left: 92%;
    top: 40%;

    /* Größe */
    width: 13%;

    height: auto;

    /* leicht geneigt */
    transform:
        translate(-50%, -50%)
        perspective(1200px)
        rotateZ(6deg)
        rotateY(-25deg);

    transform-origin: center center;

    z-index: 20;

    cursor: pointer;

}


#legal-flyer-store-image {

    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;

}


/* =========================================
   Klickflächen
========================================= */

.legal-flyer-store-hotspot {

    position: absolute;

    cursor: pointer;

    z-index: 10;

}


#legal-impressum-store-hotspot {

    left: 0;
    top: 20%;

    width: 50%;
    height: 75%;

}


#legal-datenschutz-store-hotspot {

    right: 0;
    top: 20%;

    width: 50%;
    height: 75%;

}

/* =========================================
   Telefon – Innenraum
========================================= */

#phone {

    position: absolute;

    left: 23%;
    top: 62%;

    width: 9%;

    height: auto;

    z-index: 20;

    cursor: pointer;

}

/* =========================================
   Kontaktformular – Telefon
========================================= */

.phone-contact-overlay {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    display: flex;

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

    background:
        rgba(0, 0, 0, 0.78);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s ease;

    z-index: 99990;

}


.phone-contact-overlay.visible {

    opacity: 1;

    pointer-events: auto;

}


/* =========================================
   Kontaktfenster
========================================= */

.phone-contact-window {

    position: relative;

    width: min(650px, 90vw);

    max-height: 90vh;

    background:
        #e5d1ad;

    border:
        3px solid #241b14;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.8);

    overflow: hidden;

    transform:
        scale(0.92);

    transition:
        transform 0.35s ease;

}


.phone-contact-overlay.visible
.phone-contact-window {

    transform:
        scale(1);

}


/* =========================================
   Schließen
========================================= */

.phone-contact-close {

    position: absolute;

    right: 12px;
    top: 12px;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.8);

    color: white;

    font-size: 28px;

    line-height: 40px;

    cursor: pointer;

    z-index: 10;

}


.phone-contact-close:hover {

    background:
        rgba(0, 0, 0, 1);

}


/* =========================================
   Inhalt
========================================= */

.phone-contact-content {

    padding:
        40px 50px 45px 50px;

    max-height: 90vh;

    overflow-y: auto;

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

    color:
        #17120d;

}


.phone-contact-content h1 {

    margin:
        0 0 28px 0;

    padding-bottom: 12px;

    border-bottom:
        3px solid #17120d;

    font-size: 34px;

}


/* =========================================
   Formular
========================================= */

#phone-contact-form {

    display: flex;

    flex-direction: column;

}


#phone-contact-form label {

    margin:
        0 0 6px 0;

    font-size: 17px;

    font-weight: bold;

}


#phone-contact-form input,
#phone-contact-form textarea {

    box-sizing: border-box;

    width: 100%;

    margin:
        0 0 18px 0;

    padding:
        10px 12px;

    border:
        1px solid #5b4a39;

    background:
        #f4e8cf;

    color:
        #17120d;

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

    font-size: 16px;

}


#phone-contact-form textarea {

    resize: vertical;

    min-height: 140px;

}


#phone-contact-form input:focus,
#phone-contact-form textarea:focus {

    outline:
        2px solid #7b1e16;

}


/* =========================================
   Senden
========================================= */

.phone-contact-submit {

    align-self: flex-start;

    padding:
        11px 24px;

    border:
        2px solid #241b14;

    background:
        #7b1e16;

    color:
        white;

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

    font-size: 16px;

    cursor: pointer;

}


.phone-contact-submit:hover {

    background:
        #5d1711;

}


/* =========================================
   Smartphone
========================================= */

@media (max-width: 600px) {

    .phone-contact-window {

        width: 94vw;

        max-height: 90vh;

    }


    .phone-contact-content {

        padding:
            40px 25px 30px 25px;

    }


    .phone-contact-content h1 {

        font-size: 27px;

    }


    #phone-contact-form label {

        font-size: 15px;

    }


    #phone-contact-form input,
    #phone-contact-form textarea {

        font-size: 15px;

    }


    .phone-contact-close {

        width: 36px;
        height: 36px;

        font-size: 25px;

        line-height: 36px;

    }

}

/* =========================================
   Kontaktformular – Erfolgsmeldung
========================================= */

.phone-contact-success {

    text-align: center;

    padding:
        30px 10px 20px 10px;

}


.phone-contact-success h2 {

    margin:
        0 0 20px 0;

    font-size: 28px;

}


.phone-contact-success p {

    margin:
        0 0 12px 0;

    font-size: 17px;

    line-height: 1.6;

}


.phone-contact-success-close {

    margin-top: 20px;

    padding:
        11px 24px;

    border:
        2px solid #241b14;

    background:
        #7b1e16;

    color:
        white;

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

    font-size: 16px;

    cursor: pointer;

}


.phone-contact-success-close:hover {

    background:
        #5d1711;

}

/* =========================================
   Datenschutz-Hinweis im Kontaktformular
========================================= */

.phone-contact-privacy {

    margin:
        0 0 22px 0;

    font-size: 14px;

    line-height: 1.5;

}


.phone-contact-privacy-link {

    padding: 0;

    border: none;

    background: none;

    color: #7b1e16;

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

    font-size: inherit;

    text-decoration: underline;

    cursor: pointer;

}


.phone-contact-privacy-link:hover {

    color: #5d1711;

}

/* =========================================
   Fax – Innenraum
========================================= */

#fax {

    position: absolute;

    left: 34%;
    top: 56%;

    width: 11%;

    height: auto;

    z-index: 20;

    cursor: pointer;

    filter: brightness(0.65);

}


/* =========================================
   Fax – Podcast-Bedienfeld
========================================= */

#fax-rss-terminal {
    position: absolute;
    left: 36.8%;
    top: 60.8%;
    width: 7%;
    height: auto;
    z-index: 100;

    opacity: 0;
    pointer-events: none;

    transform:
        perspective(800px)
        rotateX(45deg)
        rotateZ(5deg)
        translate(0, 0)
        scale(1);

    transform-origin: center center;

    transition:
        left 1.2s ease-in-out,
        top 1.2s ease-in-out,
        width 1.2s ease-in-out,
        transform 1.2s ease-in-out,
        opacity 0.25s ease;
}


/* Das eigentliche Bedienfeld */
#fax-rss-panel {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0.65);
}


/* Geöffneter Zustand */
#fax-rss-terminal.open {
    left: 50%;
    top: 50%;
    width: 900px;

    opacity: 1;
    pointer-events: auto;

    transform:
        perspective(800px)
        rotateX(0deg)
        rotateZ(0deg)
        translate(-50%, -50%)
        scale(1);
}

#podcast-rss-button {
    position: absolute;
    left: 33.4%;
    top: 36.45%;
    width: 7%;
    height: auto;
    z-index: 110;
    display: block;
}

#podcast-rss-button img {
    display: block;
    width: 100%;
    height: auto;

    filter:
        brightness(0.82)
        saturate(0.55)
        contrast(0.9);

    opacity: 0.92;
}

#podcast-spotify-button {
    position: absolute;
    left: 44.3%;
    top: 36.1%;
    width: 10.8%;
    height: auto;
    z-index: 110;
    display: block;
}

#podcast-spotify-button img {
    display: block;
    width: 100%;
    height: auto;

    filter:
        brightness(0.92)
        saturate(0.55)
        contrast(0.9);

    opacity: 0.92;
}


#podcast-itunes-button {
    position: absolute;
    left: 58.9%;
    top: 36.0%;
    width: 7.6%;
    height: auto;
    z-index: 110;
    display: block;
}

#podcast-itunes-button img {
    display: block;
    width: 100%;
    height: auto;

    filter:
        brightness(0.92)
        saturate(0.55)
        contrast(0.9);

    opacity: 0.92;
}


#podcast-deezer-button {
    position: absolute;
    left: 46.0%;
    top: 47.6%;
    width: 7.7%;
    height: auto;
    z-index: 110;
    display: block;
}

#podcast-deezer-button img {
    display: block;
    width: 100%;
    height: auto;

    filter:
        brightness(0.92)
        saturate(0.55)
        contrast(0.9);

    opacity: 0.92;
}


#podcast-amazon-button {
    position: absolute;
    left: 33.0%;
    top: 47.5%;
    width: 7.7%;
    height: auto;
    z-index: 110;
    display: block;
}

#podcast-amazon-button img {
    display: block;
    width: 100%;
    height: auto;

    filter:
        brightness(0.92)
        saturate(0.55)
        contrast(0.9);

    opacity: 0.92;
}

#podcast-rtl-button {
    position: absolute;
    left: 58.75%;
    top: 48.2%;
    width: 7.6%;
    height: auto;
    z-index: 110;
    display: block;
}

#podcast-rtl-button img {
    display: block;
    width: 100%;
    height: auto;

    filter:
        brightness(0.92)
        saturate(0.55)
        contrast(0.9);

    opacity: 0.92;
}

#fax-stop-button {
    position: absolute;

    left: 85.0%;
    top: 18.2%;

    width: 8%;
    height: 11.5%;

    z-index: 120;

    border: none;
    padding: 0;
    margin: 0;

    background: transparent;
    cursor: pointer;
}

#podcast-podimo-button {
    position: absolute;
    left: 33.0%;
    top: 60.2%;
    width: 7.9%;
    height: auto;
    z-index: 110;
    display: block;
}

#podcast-podimo-button img {
    display: block;
    width: 100%;
    height: auto;

    filter:
        brightness(0.92)
        saturate(0.55)
        contrast(0.9);

    opacity: 0.92;
}


#podcast-addict-button {
    position: absolute;
    left: 45.9%;
    top: 60.6%;
    width: 7.8%;
    height: auto;
    z-index: 110;
    display: block;
}

#podcast-addict-button img {
    display: block;
    width: 100%;
    height: auto;

    filter:
        brightness(0.92)
        saturate(0.55)
        contrast(0.9);

    opacity: 0.92;
}

/* =========================================
   RSS-Feed – Kopiermeldung
========================================= */

#rss-copy-popup {
    position: fixed;
    inset: 0;

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

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.25s ease;

    z-index: 99999;
}

#rss-copy-popup.visible {
    opacity: 1;
    pointer-events: auto;
}

#rss-copy-popup-window {
    width: min(420px, 85vw);

    padding: 28px 35px;

    background: #e5d1ad;

    border: 3px solid #241b14;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8);

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

    color: #17120d;

    text-align: center;

    transform: scale(0.92);

    transition: transform 0.25s ease;
}

#rss-copy-popup.visible #rss-copy-popup-window {
    transform: scale(1);
}

#rss-copy-popup-title {
    margin: 0 0 14px 0;

    font-size: 24px;
    font-weight: bold;
}

#rss-copy-popup-text {
    font-size: 16px;
    line-height: 1.5;
}

/* =========================================
   Specials-Katalog – Stapel auf dem Tresen
========================================= */

#specials-catalog {

    position: absolute;

    left: 56%;
    top: 56.5%;

    width: 9%;
    height: auto;

    transform:
        perspective(800px)
        rotateX(58deg)
        rotateZ(2deg);

    transform-origin: center center;

    z-index: 13;

    cursor: pointer;

    opacity: 1;

    transition:
        left 1.4s ease-in-out,
        top 1.4s ease-in-out,
        width 1.4s ease-in-out,
        transform 1.4s ease-in-out,
        opacity 0.15s ease;

}


/* =========================================
   Specials-Katalog – physisches Cover
========================================= */

#specials-catalog-front {

    position: absolute;

    left: 58.5%;
    top: 55.2%;

    width: 5.5%;
    height: auto;

    transform:
        perspective(800px)
        rotateX(70.5deg)
        rotateZ(21.5deg);

    transform-origin: center center;

    z-index: 14;

    opacity: 0;

    pointer-events: none;

    transition:
        left 1.4s ease-in-out,
        top 1.4s ease-in-out,
        width 1.4s ease-in-out,
        transform 1.4s ease-in-out,
        opacity 0.15s ease;

}


/* =========================================
   Physisches Cover – Zielposition
========================================= */

#specials-catalog-front.move-right {

    left: 62.5%;
    top: 50%;

    width: 25%;

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

}


/* =========================================
   PageFlip – äußerer Buchbereich
========================================= */

#specials-catalog-open {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 50%;

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

    z-index: 1001;

    pointer-events: auto;

}


/* =========================================
   PageFlip-Seiten
========================================= */

.specials-flip-page {

    position: relative;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    overflow: hidden;

}


/* =========================================
   PageFlip – Cover
========================================= */

.specials-flip-cover {

    background-image:
        url("assets/models/specials-front.png");

}


/* =========================================
   PageFlip – Schnellschuss
========================================= */

.specials-flip-schnellschuss {

    background-image:
        url("assets/models/schnellschuss.png");

}


/* =========================================
   PageFlip – Specials
========================================= */

.specials-flip-specials {

    background-image:
        url("assets/models/specials.png");

}


/* =========================================
   PageFlip – leere Seite
========================================= */

.specials-flip-blank {

    background-image:
        url("assets/models/blanko.png");

}


/* =========================================
   Schnellschuss – Inhaltsbereich
========================================= */

.specials-flip-schnellschuss
.specials-catalog-schnellschuss-content {

    position: absolute;

    left: 9%;
    top: 31.8%;

    width: 82%;
    height: 60%;

    overflow: hidden;

    pointer-events: auto;

}


/* =========================================
   Schnellschuss – Episode
========================================= */

.specials-flip-schnellschuss
.specials-catalog-episode {

    position: relative;

    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    pointer-events: auto;

}


/* =========================================
   Schnellschuss – Episodenbild
========================================= */

.specials-flip-schnellschuss
.specials-catalog-episode img {

    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;

    user-select: none;

}


/* =========================================
   Specials – Inhaltsbereich
========================================= */

.specials-flip-specials
.specials-catalog-specials-content {

    position: absolute;

    left: 8%;
    top: 27%;

    width: 84%;
    height: 58%;

    display: grid;

    grid-template-rows:
        repeat(3, 1fr);

    gap: 0.5%;

    pointer-events: none;

}


/* =========================================
   Specials – Episode
========================================= */

.specials-flip-specials
.specials-catalog-episode {

    position: relative;

    width: 100%;
    height: 100%;

    margin: 0;

    padding:
        0.5% 3%;

    box-sizing: border-box;

    border: 0;

    background: transparent;

    text-align: left;

    cursor: pointer;

    pointer-events: auto;

    overflow: hidden;

}


/* =========================================
   Episode – Titel
========================================= */

.specials-catalog-episode-title {

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

    font-size:
        clamp(
            9px,
            0.72vw,
            14px
        );

    font-weight:
        bold;

    line-height:
        1.05;

    color:
        #17120d;

}


/* =========================================
   Episode – Beschreibung
========================================= */

.specials-catalog-episode-description {

    margin-top:
        1%;

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

    font-size:
        clamp(
            7px,
            0.52vw,
            11px
        );

    line-height:
        1.15;

    color:
        #17120d;

}


/* =========================================
   Lautsprecher
========================================= */

#volume-speaker {
    position: absolute;

    left: 84%;
    top: 3%;

    width: 8%;

    height: auto;

    z-index: 14;

    pointer-events: auto;

    touch-action: none;

    user-select: none;
    -webkit-user-select: none;

    -webkit-touch-callout: none;

    -webkit-user-drag: none;
}

/* =========================================
   TV – VHS-Bildschirm
========================================= */

#tv-vhs-display {

    position: absolute;

    left: 70.5%;
    top: 7.0%;

    width: 11.0%;
    height: 14%;

    z-index: 13;

    overflow: hidden;

    pointer-events: none;

}


/* =========================================
   TV – CRT-Vignette
========================================= */

#tv-vhs-display::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.00) 32%,
            rgba(0, 0, 0, 0.16) 50%,
            rgba(0, 0, 0, 0.38) 70%,
            rgba(0, 0, 0, 0.68) 88%,
            rgba(0, 0, 0, 0.82) 100%
        );
}

#cookie-poster {
    position: absolute;

    left: 26%;
    top: 65%;

    width: 5%;

    height: auto;

    transform: rotate(5deg);

    z-index: 10;

    pointer-events: none;
}