/* ==================================================
   PRAXISRUNDGANG
   ================================================== */


/* ==================================================
   GRUNDBEREICH
   ================================================== */

.rundgang {
    width:100%;
    max-width:1800px;
    margin:0 auto;
    padding:0 40px;
    box-sizing:border-box;
    overflow:visible;
}


/* ==================================================
   GESAMTE RUNDGANG-GRUPPE
   --------------------------------------------------
   Die stufenlose Skalierung wird per JavaScript
   auf diese komplette Gruppe angewendet.
   ================================================== */

.rundgang-stage {
    width:1300px;
    max-width:none;
    margin:0 auto;
    position:relative;
    left:10%;
    transform:none;
    transform-origin:top left;
    zoom:1;
}


/* ==================================================
   BEGRÜSSUNG
   ================================================== */

.rundgang-start {
    text-align:left;
    margin-bottom:0;
}


.rundgang .hero-welcome {
    position:relative;
    left:-10px;
    margin-bottom:0;
    margin-top:10px;
    white-space:nowrap;
}


.rundgang .hero-subtext {
    display:inline-block;
    margin-left:20px;
    font-family:"SourceSansPro",sans-serif;
    font-size:1.15rem;
    color:#444;
}


/* ==================================================
   BEGRÜSSUNG AUSBLENDEN
   ================================================== */

.rundgang.raum-gewaehlt .rundgang-start {
    opacity:0;
    height:0;
    overflow:hidden;
    margin:0;
}


/* ==================================================
   HAUPTLAYOUT
   ================================================== */

.rundgang-inhalt {
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
    transition:grid-template-columns .7s ease;
}


/* ==================================================
   STARTANSICHT
   ================================================== */

.rundgang:not(.raum-gewaehlt)
.grundriss-spalte {
    margin-top:-640px;
    margin-bottom:-1250px;
    transform-origin:center left;
    transform:scale(.68);
}


/* ==================================================
   RAUMANSICHT
   ================================================== */

.rundgang.raum-gewaehlt
.rundgang-inhalt {
    display:block;
    position:relative;
}


/* ==================================================
   KLEINER GRUNDRISS NEBEN RAUM
   ================================================== */

.rundgang.raum-gewaehlt
.grundriss-spalte {
    position:absolute;
    left:-80px;
    top:-130px;
    width:420px;
    z-index:20;
    transform-origin:center top;
    transform:scale(1.05);
}


/* ==================================================
   GRUNDRISS
   ================================================== */

.grundriss-spalte {
    width:100%;
    transition:
        transform .7s ease,
        margin .7s ease;
}


.grundriss-svg {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:731.5 / 1107.1;
}


/* ==================================================
   RAUMSEITE
   ================================================== */

.raum-panel {
    width:1100px;
    max-width:1100px;
    opacity:0;
    transform:translateX(60px);
    pointer-events:none;
    position:relative;
    z-index:100;
}


.rundgang.raum-gewaehlt
.raum-panel {
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
    position:relative;
    z-index:5;
}


/* ==================================================
   RAUM HERO BILD
   ================================================== */

.raum-hero-bild {
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    height:auto;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    border-radius:5px;
    overflow:hidden;
    box-shadow:
        0 20px 50px
        rgba(0,0,0,.18);
}


/* ==================================================
   ZWEITE BILDEBENE FÜR FADE
   ================================================== */

.raum-hero-bild::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--neues-bild);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:0;
    transition:opacity .9s ease;
    z-index:1;
}


.raum-hero-bild.bildwechsel::before {
    opacity:1;
}


/* ==================================================
   GLASFLÄCHE
   ================================================== */

.raum-overlay {
    position:absolute;
    top:60px;
    right:-40px;
    width:420px;
    height:520px;
    box-sizing:border-box;
    z-index:5;
    padding:30px;
    display:flex;
    flex-direction:column;
    background:rgba(255,255,255,.78);
    backdrop-filter:
        blur(14px)
        saturate(1.15);
    -webkit-backdrop-filter:
        blur(14px)
        saturate(1.15);
    box-shadow:
        0 15px 40px
        rgba(0,0,0,.18);
}


/* ==================================================
   RAUMINHALT
   ================================================== */

.raum-inhalt {
    overflow:visible;
    width:100%;
    box-sizing:border-box;
}


/* ==================================================
   RAUMTEXT
   ================================================== */

#raumText {
    padding-right:35px;
    hyphens:auto;
}


#raumText p {
    line-height:1.65;
    font-size:1.05rem;
}


/* ==================================================
   GLASFLÄCHE AKTIV
   ================================================== */

.rundgang.raum-gewaehlt
.raum-overlay {
    pointer-events:auto;
}


/* ==================================================
   RAUMTITEL
   ================================================== */

.raum-inhalt h2 {
    padding-right:0;
}


.raum-overlay h2 {
    margin-top:0;
    margin-bottom:15px;
    color:#333;
    line-height:.8;
    white-space:normal;
    overflow-wrap:break-word;
}


/* ==================================================
   TEXTWECHSEL
   ================================================== */

.raum-overlay h2,
#raumText {
    transition:opacity .35s ease;
}


.raum-text-wechsel {
    opacity:0;
}


/* ==================================================
   TITEL NORMAL
   ================================================== */

.titel-normal {
    font-family:"Overpass",sans-serif;
    font-weight:700;
    font-size:2rem;
    color:rgba(0,0,0,.45);
    margin-right:10px;
}


/* ==================================================
   TITEL SCRIPT
   ================================================== */

.titel-script {
    font-family:"Stay Classy Praxis",cursive;
    font-weight:400;
    font-size:3.2rem;
    letter-spacing:.08em;
}


/* ==================================================
   GALERIE + NAVIGATION
   ================================================== */

.raum-unten {
    display:flex;
    align-items:stretch;
    gap:14px;
    position:absolute;
    left:-80px;
    bottom:-15px;
    z-index:500;
}


/* ==================================================
   GALERIE
   ================================================== */

.raum-galerie-overlay {
    display:flex;
    gap:14px;
    position:relative;
    z-index:200;
    pointer-events:auto;
}


#raumGalerie {
    position:relative;
    display:block;
    width:562px;
    height:90px;
    flex:0 0 562px;
}


#raumGalerie
.galerie-wechsel-neu,

#raumGalerie
.galerie-wechsel-alt {
    position:absolute;
    left:0;
    top:0;
    display:flex;
    gap:14px;
    width:max-content;
    height:90px;
}


#raumGalerie
.galerie-wechsel-neu {
    opacity:0;
    z-index:2;
    transition:opacity .85s ease;
}


#raumGalerie
.galerie-wechsel-alt {
    opacity:1;
    z-index:1;
}


/* ==================================================
   GALERIE-BILDER
   ================================================== */

.raum-galerie-overlay img {
    display:block;
    flex:0 0 130px;
    width:130px;
    height:90px;
    object-fit:cover;
    padding:2px;
    box-sizing:border-box;
    background:white;
    border:
        1px solid
        rgba(255,255,255,.8);
    border-radius:0;
    box-shadow:
        0 5px 12px
        rgba(0,0,0,.15);
    cursor:pointer;
    position:relative;
    z-index:600;
    pointer-events:auto;
    transition:
        opacity .85s ease,
        transform .85s ease,
        box-shadow .3s ease;
}


.raum-galerie-overlay img:hover {
    transform:
        translateY(-8px)
        scale(1.05);
    box-shadow:
        0 15px 30px
        rgba(0,0,0,.25);
}


/* ==================================================
   NAVIGATION
   ================================================== */

.raum-navigation {
    position:relative;
    z-index:101;
    display:flex;
    flex-direction:column;
    width:130px;
    height:90px;
    gap:0;
    pointer-events:auto;
}


.raum-navigation button {
    flex:1;
    border:
        1px solid
        rgba(255,255,255,.85);
    border-radius:0;
    background:
        rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:white;
    cursor:pointer;
    font-family:"Overpass",sans-serif;
    font-size:.8rem;
    transition:
        background .25s ease,
        transform .25s ease;
}


.raum-navigation button + button {
    border-top:none;
}


.raum-navigation button:hover {
    background:
        rgba(255,255,255,.35);
    transform:translateX(4px);
}


/* ==================================================
   SCHWEBENDES SCHILD
   ================================================== */

#schwebendesSchild {
    position:absolute;
    display:none;
    padding:15px 25px;
    background:white;
    border-radius:20px;
    font-family:"Overpass",sans-serif;
    font-size:1.2rem;
    z-index:50;
    pointer-events:none;
    opacity:0;
    transform:translateY(20px);
    transition:
        opacity .3s ease,
        transform .3s ease;
}


#schwebendesSchild.aktiv {
    display:block;
    opacity:1;
    transform:translateY(0);
}


/* ==================================================
   LIGHTBOX – GRUNDBEREICH
   ================================================== */

.lightbox {
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    padding:30px 20px 40px;
    background:rgba(0,0,0,.82);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .35s ease,
        visibility .35s ease;
    z-index:2147483647;
}


.lightbox.aktiv {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* ==================================================
   LIGHTBOX – BILDBEREICH
   ================================================== */

.lightbox-bild-container {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:fit-content;
    max-width:calc(100vw - 40px);
    margin:0 auto;
    box-sizing:border-box;
}


.lightbox-bild-container
#lightboxBild {
    display:block;
    width:auto;
    max-width:calc(100vw - 40px);
    height:auto;
    max-height:calc(100vh - 190px);
    object-fit:contain;
    box-sizing:border-box;
    border:1px solid white;
    box-shadow:
        0 20px 60px
        rgba(0,0,0,.45);
}


/* ==================================================
   LIGHTBOX – FADE-BILD
   ================================================== */

.lightbox-bild-container
#lightboxBildNeu {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:contain;
    box-sizing:border-box;
    border:none;
    opacity:0;
    pointer-events:none;
    transition:
        opacity .65s ease;
}


/* ==================================================
   LIGHTBOX – NAVIGATION
   ================================================== */

.lightbox-bild-container
.lightbox-zurueck,

.lightbox-bild-container
.lightbox-weiter {
    position:absolute;

    top:100%;

    width:50%;
    height:30px;

    margin:0;
    padding:0;

    box-sizing:border-box;

    border:1px solid rgba(0,0,0,.18);
    border-radius:0;

    background:rgba(255,255,255,.88);

    color:#333;

    font-family:"Overpass",sans-serif;

    font-size:1rem;
    font-weight:400;

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

    cursor:pointer;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    transition:
        background .25s ease,
        transform .25s ease;

    z-index:10;
}


.lightbox-bild-container
.lightbox-zurueck {
    left:0;
}


.lightbox-bild-container
.lightbox-weiter {
    right:0;
    border-left:none;
}


.lightbox-bild-container
.lightbox-zurueck:hover,

.lightbox-bild-container
.lightbox-weiter:hover {
    background:rgba(255,255,255,1);
    transform:translateY(-2px);
}


/* ==================================================
   LIGHTBOX – SCHLIESSEN
   ================================================== */

.lightbox-schliessen {
    position:absolute;
    top:20px;
    right:30px;
    z-index:20;

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

    width:30px;
    height:30px;

    padding:0;

    border:
        1px solid
        rgba(255,255,255,.85);

    border-radius:0;

    background:
        rgba(255,255,255,.12);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    color:white;

    font-family:"Overpass",sans-serif;
    font-size:1rem;
    line-height:1;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease;
}


.lightbox-schliessen:hover {
    background:
        rgba(255,255,255,.35);
    transform:scale(1.05);
}


/* ==================================================
   LIGHTBOX – ZÄHLER
   ================================================== */

#lightboxZaehler {
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    color:white;
    font-family:"Overpass",sans-serif;
    font-size:1rem;
    letter-spacing:.05em;
    text-shadow:
        0 1px 4px
        rgba(0,0,0,.4);
    z-index:20;
}


/* ==================================================
   LIGHTBOX – HINTERGRUND
   ================================================== */

.lightbox-overlay {
    position:absolute;
    inset:0;
    cursor:pointer;
}


/* ==================================================
   TABLET
   --------------------------------------------------
   Nur Außenabstand ändern.
   KEINE Skalierung.
   ================================================== */

@media (max-width:1200px) {

    .rundgang {
        padding:0 25px;
    }

}




/* ==================================================
   MOBIL BIS 800px
   ================================================== */

@media (max-width:800px) {

    .rundgang {
        padding:0 15px;
        overflow-x:hidden;
    }


    /* ==================================================
       MOBILE STARTANSICHT
       ================================================== */

    .rundgang:not(.raum-gewaehlt)
    .rundgang-stage {
        left:0;
    }


    .rundgang:not(.raum-gewaehlt)
    .grundriss-panel {
        display:flex;
        justify-content:center;
    }


    .rundgang:not(.raum-gewaehlt)
    .grundriss-spalte {
        margin-top:-430px;
        margin-bottom:-850px;
        transform:scale(1);
        transform-origin:center top;
    }


    .rundgang:not(.raum-gewaehlt)
    .hero-welcome {
        left:53px;
        font-size:clamp(6.4rem,10vw,6.4rem);
    }


    .rundgang:not(.raum-gewaehlt)
    .hero-subtext {
        display:block;
        margin-left:0;
        margin-top:12px;
        max-width:100%;
        font-family:"SourceSansPro",sans-serif;
        font-size:3.2rem;
        line-height:1.4;
        white-space:normal;
    }


    /* ==================================================
       MOBILE DETAILANSICHT
       ================================================== */

    .rundgang.raum-gewaehlt
    .rundgang-stage {
        left:0;
    }


    .rundgang.raum-gewaehlt
    .raum-panel {
        width:100%;
        max-width:100%;
        margin-top:40px;
    }


    /* ==================================================
       MOBILE HAUPTBILD
       ================================================== */

    .rundgang.raum-gewaehlt
    .raum-hero-bild {
        width:100%;
        min-height:0;
        aspect-ratio:16 / 9;
        position:relative;
        overflow:visible;
        margin-bottom:0;
    }


    /* ==================================================
       MOBILE GRUNDRISS ÜBER DEM HAUPTBILD
       ================================================== */

    .rundgang.raum-gewaehlt
    .grundriss-spalte {
        position:absolute;
        left:15px;
        top:-170px;
        width:680px;
        max-width:calc(100% - 30px);
        z-index:20;
        transform-origin:left top;
        transform:scale(1);
    }


    /* ==================================================
       MOBILE GLASBOX
       ================================================== */

    .rundgang.raum-gewaehlt
    .raum-overlay {
        position:absolute;

        top:calc(100% + 20px);

        left:0;
        right:auto;
        bottom:auto;

        width:100%;
        height:auto;

        min-height:clamp(
            430px,
            70vw,
            620px
        );

        box-sizing:border-box;
        padding:28px;
        z-index:30;
    }


    .rundgang.raum-gewaehlt
    .raum-overlay h2 {
        margin-top:1.6rem;
        margin-bottom:15px;
        line-height:.9;
    }


    /* ==================================================
       MOBILE RAUMTITEL
       ================================================== */

    .rundgang.raum-gewaehlt
    .titel-normal {
        font-size:4.58rem;
    }


    .rundgang.raum-gewaehlt
    .titel-script {
        font-size:6.8rem;
    }


    /* ==================================================
       MOBILE RAUMTEXT
       ================================================== */

    .rundgang.raum-gewaehlt
    #raumText {
        padding-right:0;
    }


    .rundgang.raum-gewaehlt
    #raumText p {
        font-size:4.35rem;
        line-height:1.55;
    }


    /* ==================================================
       MOBILE GALERIE
       2 x 2 Raster
       ================================================== */

    .rundgang.raum-gewaehlt
    .raum-unten {
        position:relative;
        left:auto;
        bottom:auto;
        width:100%;
        display:flex;
        flex-direction:column;
        gap:18px;
        margin-top:25px;
        z-index:40;
    }


    .rundgang.raum-gewaehlt
    #raumGalerie {
        position:relative;
        width:100%;
        height:auto;
        flex:none;
    }


    .rundgang.raum-gewaehlt
    #raumGalerie .galerie-wechsel-neu,

    .rundgang.raum-gewaehlt
    #raumGalerie .galerie-wechsel-alt {
        position:relative;
        left:auto;
        top:auto;
        width:100%;
        height:auto;

        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:14px;
    }


    .rundgang.raum-gewaehlt
    #raumGalerie img {
        display:block;
        width:100%;
        height:auto;
        aspect-ratio:4 / 3;
        object-fit:cover;

        padding:2px;

        box-sizing:border-box;

        background:white;

        border:
            1px solid
            rgba(255,255,255,.8);

        border-radius:0;

        box-shadow:
            0 5px 12px
            rgba(0,0,0,.15);

        cursor:pointer;
    }


    /* ==================================================
       MOBILE NAVIGATION
       Unterhalb der Galerie
       ================================================== */

    .rundgang.raum-gewaehlt
    .raum-navigation {
        position:relative;
        left:auto;
        bottom:auto;
        width:100%;
        height:120px;
        display:flex;
        flex-direction:row;
        gap:0;
        margin-top:18px;
        z-index:100;
    }


    .rundgang.raum-gewaehlt
    .raum-navigation button {
        width:50%;
        height:120px;
        flex:1;
        box-sizing:border-box;

        border:
            1px solid
            rgba(0,0,0,.18);

        border-radius:0;

        background:
            rgba(255,255,255,.85);

        color:#333;

        font-family:"Overpass",sans-serif;

        font-size:4rem;

        cursor:pointer;

        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);

        transition:
            background .25s ease,
            transform .25s ease;
    }


    .rundgang.raum-gewaehlt
    .raum-navigation button + button {
        border-top:
            1px solid
            rgba(0,0,0,.18);

        border-left:none;
    }


    .rundgang.raum-gewaehlt
    .raum-navigation button:hover {
        background:
            rgba(255,255,255,1);

        transform:
            translateY(-2px);
    }


    /* ==================================================
       SMARTPHONE PORTRAIT
       ================================================== */

    @media (max-width:700px)
    and (orientation:portrait) {

        .rundgang {
            width:100%;
            max-width:100%;
            padding:0 15px;
            box-sizing:border-box;
            overflow-x:hidden;
        }


        .rundgang .grundriss-svg {
            display:block;
            width:100%;
            max-width:100%;
            height:auto;
        }

    }

}