@font-face {
    font-family:'GT Alpina Typewriter Thin Trial';
    src: url(fonts/GT-Alpina-Typewriter-Thin-Trial.woff2) format("woff2");
    font-display:swap;
}

@font-face {
    font-family:'MapleMono VF';
    src: url(fonts/MapleMono/MapleMono[wght]-VF.woff2) format('woff2');
    font-variation-settings:"wght" 100;
    font-display:swap;
}

:root{
    --bg:#f3f3f3;

    --black:#000;
    --white:#ffffff;
    --blue:#005eff;
    --rosa:#ff7300;
    --light:#daff46;

    --shadow:8px 8px 0 var(--blue);
    --radius:26px;
    --transition:0.15s ease;

    --font-display:'GT Alpina Typewriter Thin Trial';
    --font-mono:'MapleMono VF', monospace;

    --cursor-default:url("images/cursors/default.svg") 30 13, auto;
    --cursor-pointer:url("images/cursors/pointer.svg") 31 8, pointer;
    --cursor-text:url("images/cursors/text.svg") 7 12, text;
    --cursor-impressum:url("images/cursors/impressum.svg") 43 25, crosshair;

    /* Layout values shared with JavaScript */
    --grid:20px;
    --board-start-y:200px/*clamp(160px, 18dvh, 220px)*/;
    --board-bottom-space:clamp(400px, 45dvh, 800px);

    --domino-width:clamp(380px, 36vw, 470px);
    --domino-height:calc(var(--domino-width) * 230 / 470);

    /* Gap between adjacent dominos (in px) - read by JavaScript */
    --domino-gap:10px;

    --domino-face-inset:10px;
    --domino-image-radius:14px;
    --middle-line-size:6px;
    --middle-line-length:calc(var(--domino-height) - 30px);

    --connector-size:calc(var(--domino-height) * 0.61);
    --connector-overlap:calc(var(--connector-size) * -0.57);

    /* Faktor >1 schiebt die verborgenen Connectoren weiter hinaus, damit
       sie vor dem Ausfahren nicht sichtbar sind. Bei Bedarf anpassen. */
    --connector-hide-factor:1.3;
    --connector-hidden-x:calc(var(--connector-overlap) * -1 * var(--connector-hide-factor));
    --connector-hidden-y:calc(var(--connector-overlap) * -1 * var(--connector-hide-factor));
    --connector-side-offset:calc(var(--domino-height) * 0.217);
    --connector-split-offset:calc(var(--domino-width) * 0.106);

    --modal-safe-space:clamp(24px, 5vw, 80px);

    /* Countdown flip timing (kept in :root to avoid duplicate :root blocks) */
    --cd-flip-duration:700ms;
    --cd-half-duration:350ms;
    --cd-easing:cubic-bezier(0.4,0,0.2,1);
}

/* RESET */

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

body{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    background:rgb(228, 239, 255);

    font-family:
        var(--font-mono),
        Helvetica,
        Arial,
        sans-serif;

    overflow-x:hidden;
    overflow-y:auto;

    cursor:var(--cursor-default);
}

a,
button,
[role="button"],
.clickable{
    cursor:var(--cursor-pointer);
}

a{
    color:inherit;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

button{
    font-family:var(--font-display);
    border:none;

    padding:10px 16px;

    z-index:5000;

    background:var(--blue);
    color:white;

    border-radius:10px;

    cursor:var(--cursor-pointer);

    transition:
        background var(--transition),
        transform var(--transition);
}

button:active{
    transform:scale(.95);
}

/* TOPBAR */

.topbar{
    position:fixed;

    width:100%;
    height:12vh;
    padding:4vh;

    display:flex;
    justify-content:space-between;
    /* align children to the bottom edge of the header */
    align-items:flex-end;

    z-index:5000;
}

/* anfang */
.satz{
    /* fixed so it stays in place while scrolling */
    font-size:2rem;
    font-variation-settings:"wght" 200;
    color:var(--rosa);
    z-index:200;
    pointer-events:none;
    justify-content:left;
}

/* Ensure the satz participates in header baseline alignment */
.topbar > .satz{
    /* position the slogan at the bottom of the header */
    align-self:flex-end;
    line-height:1;
    margin:0;
    display:block;

    order:1;
    margin-left:auto;
    text-align:right;
}

/* Place info button area on the left and slogan on the right using flex order */
.topbar-left{
    order:0;

    /* align left group to bottom of header */
    align-self:flex-end;
    display:flex;
    align-items:flex-end;
}

.satz span{
    display:inline-block;
    transform-origin:bottom center;
    animation:kippen 0.5s forwards;
}

@keyframes kippen{
    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(30deg);
    }
}

/* ICON BUTTONS */

.icon-button{
    /* keep icon-buttons in the flow so header baseline alignment works */
    position:relative;
    width:36px;
    height:36px;

    background:transparent;
    border:none;

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

    overflow:visible;
}

.icon-button img{
    width:36px;
    height:36px;
    object-fit:contain;
    filter:drop-shadow(0 4px 10px rgba(255, 255, 255, 0.25));
    transition:transform var(--transition);
    pointer-events:none;
}

.icon-button:hover,
.icon-button.openinfo{
    transform:rotate(15deg);
    transition:transform var(--transition);
}

/* Scoped icon styling for the topbar-left button only */
.topbar-left .icon-button{
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--white);
    width:80px;
    height:40px;
    padding:2.5px;
    border:2px solid var(--rosa);
    overflow:hidden;

    border-radius:8px;

    align-self:flex-end;
}

.topbar-left .icon-button:hover{
    transform:rotate(-15deg);
    transition:transform var(--transition);
}

.topbar-left .icon-button img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:5px;
    display:block;
    filter:none;
}

/* BOARD */

#board{
    flex:1;
    position:relative;
    padding-bottom:200px;

    /* Reserve space so the footer sits at the bottom of the document
       even before absolute-positioned dominos are added. Adjust 800px. */
    min-height:calc(100vh + var(--board-bottom-space));
    min-height:calc(100dvh + var(--board-bottom-space));
    perspective:1200px;
}

/* DOMINO */

.domino{
    position:absolute;
    width:var(--domino-width);
    height:var(--domino-height);
    display:flex;
    overflow:visible;
    z-index:50;
    transform-style:preserve-3d;

    transform-origin:center center;
    transition:transform var(--flip-duration, 700ms) var(--flip-easing, cubic-bezier(0.4,0,0.2,1));
    will-change:transform;
}

.domino::before{
    content:"";
    position:absolute;

    /* inset the visual face by 5px so adjacent dominos show a 10px gap
       (5px on each side) while the domino bounding box and JS layout
       measurements remain unchanged. */
    inset:0px;

    background:white;

    border:5px solid var(--blue);
    border-radius:var(--radius);

    box-shadow:var(--shadow);

    pointer-events:none;
    z-index:1;
    backface-visibility:hidden;
}

/* Keep the countdown domino visuals unchanged: the pseudo-element
   for countdown dominos should not be inset so the flip artwork
   aligns as before. */
.domino.countdown::before{
    inset:0px;
}

.domino.vertical{
    width:var(--domino-height);
    height:var(--domino-width);

    flex-direction:column;
}

.domino-half{
    flex:1;

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

    position:relative;
    z-index:2;
    cursor:var(--cursor-pointer);
    overflow:visible; /* moved here to remove duplicate .domino-half block */
}

.domino-half img{
    width:80%;
    height:80%;

    object-fit:contain;

    border-radius:14px;

    transition:transform var(--transition);

    cursor:var(--cursor-pointer);

    -webkit-user-drag:none;
}

.domino-half img:hover{
    transform:scale(.95);
}

/* Face-based flip support: front/back faces inside each domino-half.
   The back face is pre-rotated so it appears upright after a parent 180deg flip.
*/

.domino-half .face{
    position:absolute;
    inset:var(--domino-face-inset); /* keep inside border like previous image inset */
    width:calc(100% - (var(--domino-face-inset) * 2));
    height:calc(100% - (var(--domino-face-inset) * 2));
    border-radius:var(--domino-image-radius);
    backface-visibility:hidden;
    transform-style:preserve-3d;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden; /* ensure rounded corners clip image */
}

.domino-half .face img{
    width:80%;
    height:80%;
    object-fit:contain; /* show full thumbnail, cropped by container radius */
    display:block;
    border-radius:var(--domino-image-radius);
    -webkit-user-drag:none;
}

.domino-half .face.back{
    /* counter-rotate the back so it reads upright after the parent flips 180deg */
    transform:rotateX(180deg);
}

.domino-close-button{
    opacity:0;
    position:absolute;
    top:20px;
    right:20px;
    width:36px;
    height:36px;
    padding:6px;
    background:transparent;
    border:none;
    z-index:80;
    transition:opacity var(--transition), transform var(--transition);
}

.domino:hover .domino-close-button{
    opacity:1;
}

/* COUNTDOWN DOMINO */

.domino.countdown .domino-half img{
    opacity:0;
    transition:opacity 0.25s ease, transform var(--transition);
    transform:translateZ(0) scale(1);
    pointer-events:none;
}

.domino.countdown.show-image .domino-half img{
    opacity:1;
    pointer-events:auto;
}

.countdown-container{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1; /* behind the middle-line (z-index:2) */
    pointer-events:auto;

    /* removed 3D perspective for simpler 2D rotation */
}

.countdown-inner{
    width:100%;
    height:100%;
    position:relative;

    /* simplified: no 3D transform-style, use 2D rotate */
    transition:transform var(--flip-duration, 700ms) var(--flip-easing, cubic-bezier(0.4,0,0.2,1));
}

.countdown-inner img{
    position:absolute;
    inset:var(--domino-face-inset); /* keep inside border */
    width:calc(100% - (var(--domino-face-inset) * 2));
    height:calc(100% - (var(--domino-face-inset) * 2));
    object-fit:cover;
    border-radius:var(--domino-image-radius);
    backface-visibility:hidden;
}

/* CSS-driven flip classes for the countdown domino
   These mirror the JS timing (700ms total, 350ms per half)
   so the visual result is unchanged; JS only toggles classes. */
/* (countdown variables moved to main :root) */

/* DIVIDER */

.middle-line{
    position:relative;
    z-index:2;

    width:var(--middle-line-size);
    height:var(--middle-line-length);

    margin:auto;

    background:var(--blue);

    border-radius:10px;
}

.domino.vertical .middle-line{
    width:var(--middle-line-length);
    height:var(--middle-line-size);
}

/* CONNECTORS */

.connector{
    position:absolute;
    z-index:-1000;

    --x-hidden:0;
    --y-hidden:0;
    --rotation:0deg;

    width:var(--connector-size);
    height:var(--connector-size);

    background:var(--light);
    border-radius:50% 50% 0 0;

    cursor:var(--cursor-pointer);
    pointer-events:none;

    translate:var(--x-hidden) var(--y-hidden);
    rotate:var(--rotation);

    transition:
        translate var(--transition),
        scale var(--transition);
}

.domino:hover .connector.available,
.domino.near .connector.available{
    pointer-events:auto;
    translate:0 0;
}

.connector:hover{
    scale:1.2;
}

/* Prevent connectors from appearing when a domino receives keyboard focus. */
.domino:focus-within .connector.available,
.domino:focus .connector.available{
    pointer-events:none;
    translate:var(--x-hidden) var(--y-hidden);
}

/* CONNECTOR POSITIONEN */

/* links */

.connector.left,
.connector.left-top{
    left:var(--connector-overlap);
    top:var(--connector-side-offset);
    --x-hidden:var(--connector-hidden-x);
    --rotation:270deg;
}

.connector.left-bottom{
    left:var(--connector-overlap);
    bottom:var(--connector-side-offset);
    --x-hidden:var(--connector-hidden-x);
    --rotation:270deg;
}

/* rechts */

.connector.right,
.connector.right-top{
    right:var(--connector-overlap);
    top:var(--connector-side-offset);
    --x-hidden:calc(var(--connector-hidden-x) * -1);
    --rotation:90deg;
}

.connector.right-bottom{
    right:var(--connector-overlap);
    bottom:var(--connector-side-offset);
    --x-hidden:calc(var(--connector-hidden-x) * -1);
    --rotation:90deg;
}

/* oben */

.connector.top,
.connector.top-left{
    top:var(--connector-overlap);
    left:var(--connector-split-offset);
    --y-hidden:var(--connector-hidden-y);
    --rotation:0deg;
}

.connector.top-right{
    top:var(--connector-overlap);
    right:var(--connector-split-offset);
    --y-hidden:var(--connector-hidden-y);
    --rotation:0deg;
}

/* unten */

.connector.bottom,
.connector.bottom-left{
    bottom:var(--connector-overlap);
    left:var(--connector-split-offset);
    --y-hidden:calc(var(--connector-hidden-y) * -1);
    --rotation:180deg;
}

.connector.bottom-right{
    bottom:var(--connector-overlap);
    right:var(--connector-split-offset);
    --y-hidden:calc(var(--connector-hidden-y) * -1);
    --rotation:180deg;
}

/* FOOTER */

.footer-shell{
    display:flex;
    flex-direction:column;
    position:static;
    z-index:4000;
    padding-bottom:3vh;

    color:#ffffff;

    background:var(--rosa);
    cursor:var(--cursor-impressum);
}

.footer-drawer-content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;

    width:100%;

    font-family:var(--font-mono);
    font-variation-settings:"wght" 100;
    line-height:1.25;

    order:2;

    transition:
        max-height .35s ease,
        opacity .2s ease,
        padding .35s ease;
}

.footer-drawer-content.is-active{
    max-height:60vh;
    max-height:60dvh;
    opacity:1;
    pointer-events:auto;
    padding:32px 0 36px;
}

.footer-drawer-content p + p{
    margin-top:0.8rem;
}

.footer-drawer-content[data-footer-content="impressum"]{
    text-align:right;
    font-size:0.8rem;
}

.footer-drawer-content[data-footer-content="kontakt"]{
    text-align:left;
    font-size:0.8rem;
}

.footer{
    order:1;
    width:100%;
    min-height:64px;
    padding:0 16px;

    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:24px;

    font-family:var(--font-mono);
    font-variation-settings:"wght" 100;

    z-index:4000;
}

.footer-column{
    width:calc(50% - 12px);
    min-height:64px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.footer-column-impressum{
    align-items:flex-end;
}

.footer-column-kontakt{
    align-items:flex-start;
}

.footer span{
    margin-top:auto;
    cursor:var(--cursor-pointer);
    display:block;
    min-height:64px;
    line-height:64px;
    font-size:0.8rem;
}

.footer span:hover{
    text-decoration:underline;
}

.footer span.active{
    text-decoration:none;
}

/* MODAL + LIGHTBOX */

.modal,
.lightbox{
    position:fixed;
    inset:0;
    font-size:1.5rem;

    background:rgba(0,0,0,.4);

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

    z-index:9000;
}

.modal-content,
.lightbox-panel{
    font-family:var(--font-mono);
    font-variation-settings:"wght" 400;

    position:relative;

    width:min(800px, calc(100vw - var(--modal-safe-space)));
    width:min(800px, calc(100dvw - var(--modal-safe-space)));

    min-height:240px;
    max-height:80dvh;
    overflow-y:auto;

    background:white;

    border-radius:28px;

    padding:48px;
}

#modal{
    background:rgba(0,0,0,0.6);
    width:100%;
    height:100%;
    font-size:1.5rem;
    margin-bottom:1rem;
    line-height:2rem;
}

.modal-content{
    background:none;
    color:var(--black);
    padding:32px;

    max-width:720px;
    height:100vh;
    padding-bottom:0;
}

#modal-text{
    color:var(--light);
    cursor:var(--cursor-text);
}

#modal-text .uberschrift1{
    font-size:1.5rem;
    text-transform:uppercase;
    font-variation-settings:normal;
    font-weight:100;
    text-align:center;
}

#modal-text .uberschrift2{
    font-size:1.5rem;
    text-decoration:underline;
    font-variation-settings:normal;
    font-weight:100;
    text-align:center;
    margin-bottom:4rem;
}

#modal-text .absatz1{
    font-variation-settings:"wght" 100;
    font-size:1.5rem;
    line-height:2rem;
    text-indent:5rem;
}

#modal-text .absatz2{
    font-variation-settings:"wght" 100;
    font-size:1.5rem;
    line-height:2rem;
    text-align:justify;
    margin-bottom:3rem;
}

#modal-text .absatz3{
    margin-top:10rem;
    margin-bottom:13rem;
    margin-left:5vw;
    margin-right:5vw;
    font-variation-settings:"wght" 100;
    font-size:1.5rem;
    line-height:2rem;
    text-align:center;
}

.lightbox{
    gap:5vw;
    padding:5vw 0;
}

.lightbox-panel{
    border:10px solid var(--blue);
    padding:5vw;
    width:calc((100vw - 5vw) / 2);
    height:min(76vh, 720px);
    height:min(76dvh, 720px);
}

.lightbox-image-panel{
    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:0 80px 80px 0;
    border-left:none;
    box-shadow:
        0 20px 0 var(--blue),
        20px 20px 0 var(--blue);

    animation:slideFromLeft 1s ease both;
}

.lightbox-text-panel{
    padding-right:8vw;
    animation:slideFromRight 1s ease both;
    box-shadow:20px 20px 0 var(--blue);
    border-radius:80px 0 0 80px;
    border-right:none;

    overflow:auto;
}

#lightbox-text h2{
    font-family:var(--font-mono);
    font-variation-settings:normal;
    font-weight:100;
    font-size:1.5rem;
    margin-bottom:1rem;
    text-transform:uppercase;
    cursor:var(--cursor-text);
}

#lightbox-text p{
    font-family:var(--font-mono);
    font-size:1.5rem;
    line-height:1.7rem;
    font-variation-settings:"wght" 100;
    cursor:var(--cursor-text);
}

#lightbox-image{
    width:100%;
    height:100%;

    object-fit:contain;
}

@keyframes slideFromLeft{
    from{
        transform:translateX(-120vw);
    }

    to{
        transform:translateX(0);
    }
}

@keyframes slideFromRight{
    from{
        transform:translateX(120vw);
    }

    to{
        transform:translateX(0);
    }
}

.lightbox-nav{
    position:absolute;
    top:50%;
}

.lightbox-nav.left{
    left:20px;
}

.lightbox-nav.right{
    right:20px;
}

/* Position the close button inside the lightbox text panel */
.lightbox-panel .lightbox-close{
    position:absolute;
    top:20px;
    right:20px;
    width:45px;
    height:45px;
    padding:6px;
    background:transparent;
    border:none;
    z-index:100;
}

.lightbox-panel .lightbox-close img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.hidden{
    display:none;
}


    /* Mobile / touch media query: make minimal, scoped changes so the site
       is usable on smartphones. Connector elements are always visible so
       users can tap them without hovering. Touch targets slightly larger. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {

        /* Ensure connectors are visible and tappable on touch devices
           but only for dominos that have connectors enabled (set by JS)
           starting at the first domino with two images. */
        .domino.connectors-enabled .connector,
        .domino.connectors-enabled .connector.available {
            translate: 0 0 !important;
            pointer-events: auto !important;
            opacity: 1 !important;
            z-index: -6000; /* above domino but below modal */
        }

        /* Slightly larger connector hit area for thumbs */
        .domino.connectors-enabled .connector {
            width: calc(var(--connector-size) * 1.05);
            height: calc(var(--connector-size) * 1.05);
        }

        /* Make close button easier to tap */
        .domino-close-button {
            top: 6px;
            right: 6px;
            width: 44px;
            height: 44px;
            padding: 8px;
        }

        /* Reduce the prominent fixed 'satz' position so it doesn't cover touch targets */
        .satz {
            line-height: 1;
            font-size: 1.5rem;
            max-width: 78vw;
        }
        
        /* Mobile lightbox: stack panels vertically and animate from top/bottom
           Text panel will be flush with the top of the viewport. */
        .lightbox{
            display:flex;
            flex-direction:column;
            height:100vh;

            margin:0;
        
            align-items: stretch;
            /* remove top padding so the first panel can touch the top */
            padding: 0 2vw 4vw;
            gap: 9vw;
            justify-content: flex-start;
        }

        .lightbox-panel{
            /* don't force equal flex for panels on mobile; use natural height */
            flex: 0 0 auto;
            padding:6vw;
            box-sizing:border-box;
            width: 100%;
            width: calc(100vw - (var(--modal-safe-space) * 2));
            max-width: none;
            border-radius: 20px;
            border: 10px solid var(--blue);
        }

        /* Slide-in animations for stacked lightbox */
        @keyframes slideFromTop {
            from { transform: translateY(-120vh); opacity: 0; }
            to   { transform: translateY(0); opacity: 1; }
        }

        @keyframes slideFromBottom {
            from { transform: translateY(120vh); opacity: 0; }
            to   { transform: translateY(0); opacity: 1; }
        }

        .lightbox-text-panel {
            order: -1;
            animation: slideFromTop 0.7s ease both;
            max-height: calc(50vh);
        
            margin-top: 0;
            padding-top: 10vh;
            border-radius: 0 0 30px 30px;
            border-top: none;
            box-shadow: 20px 20px 0 var(--blue),
            20px -20px 0 var(--blue);
        
        }

        .lightbox-image-panel {
            order: 0;
            margin-bottom: 0;
            padding:4vw;
            padding-bottom: 10vh;
            animation: slideFromBottom 0.7s ease both;
            display:flex;
            align-items:center;
            justify-content:center;
            border-bottom: none;
            border-radius: 30px 30px 0 0;
            box-shadow: 20px 20px 0 var(--blue);
            
        }

        /* Mobile: reposition navigation buttons and rotate arrows +90deg */
        /* Text panel: nav at top center */
        .lightbox-nav.right {
            top: 15px;
            left: 50%;
            right: auto;
            transform: translateX(-50%) rotate(180deg);
        }

        /* Image panel: nav at bottom center */
         .lightbox-nav.left {
            top: auto;
            bottom: 15px;
            left: 50%;
            right: auto;
            transform: translateX(-50%) rotate(180deg);
        }

        /* Rotate the arrow images themselves for clarity and center origin */
        .lightbox-nav img {
            transform: rotate(90deg);
            transform-origin: center;
            transition: transform var(--transition);
        }

        .hidden{
    display:none;
}
    }