/* ==========================================================================
   BITFRAME HUB – Startseite
   ========================================================================== */

:root {
    --black: #000000;
    --white: #ffffff;

    /* Diagonale Trennlinien (LINKS geneigt: oben weiter rechts, unten weiter links) */
    --d1-top:    39.0%;   /* erste Trennlinie oben  */
    --d1-bottom: 33.3%;   /* erste Trennlinie unten */
    --d2-top:    72.3%;   /* zweite Trennlinie oben  */
    --d2-bottom: 66.6%;   /* zweite Trennlinie unten */

    /* Panel-Farben */
    --color-rental:     160, 65, 5;    /* warmes Amber/Orange */
    --color-production: 10,  30, 90;   /* Mitternachtsblau    */
    --color-bastian:    0,   65, 50;   /* dunkles Smaragd     */

    --ease-panel: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--black);
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

/* ==========================================================================
   LOGO
   ========================================================================== */

.hub-logo {
    position: fixed;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 500;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.hub-logo span {
    display: block;
    font-size: clamp(2.8rem, 7vw, 8rem);
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--white);
    mix-blend-mode: difference;
    text-align: center;
    line-height: 0.9;
}

/* ==========================================================================
   HUB-WRAPPER
   ========================================================================== */

.hub {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ==========================================================================
   PANEL – Basis
   ========================================================================== */

.panel {
    display: block;
    position: absolute;
    inset: 0;
    cursor: pointer;
    transition:
        clip-path 0.55s var(--ease-panel),
        opacity   0.35s ease;
}

/* Links-geneigte Clip-Paths: oben weiter rechts, unten weiter links */
.panel--rental {
    clip-path: polygon(
        0%              0%,
        var(--d1-top)   0%,
        var(--d1-bottom) 100%,
        0%              100%
    );
    z-index: 3;
}

.panel--production {
    clip-path: polygon(
        var(--d1-top)    0%,
        var(--d2-top)    0%,
        var(--d2-bottom) 100%,
        var(--d1-bottom) 100%
    );
    z-index: 2;
}

.panel--bastian {
    clip-path: polygon(
        var(--d2-top)    0%,
        100%             0%,
        100%             100%,
        var(--d2-bottom) 100%
    );
    z-index: 1;
}

/* ==========================================================================
   PANEL – Hintergrund-Ebenen
   ========================================================================== */

.panel__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.9s var(--ease-panel);
    will-change: transform;
}

/* transform-origin auf die visuelle Mitte jedes Panels setzen,
   damit scale(1.04) vom Panel-Zentrum ausstrahlt, nicht vom Viewport-Zentrum */
.panel--rental     .panel__bg { transform-origin: 19% center; background-position: 15% center; }
.panel--production .panel__bg { transform-origin: 53% center; }
.panel--bastian    .panel__bg { transform-origin: 84% center; }

.panel__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s ease;
    will-change: opacity;
}

/* ==========================================================================
   PANEL – Farbige Overlays (jedes Panel hat seine eigene Farbe)
   ========================================================================== */

.panel__overlay {
    position: absolute;
    inset: 0;
    transition: background 0.5s ease;
}

/* Rental: warmes Amber */
.panel--rental .panel__overlay {
    background:
        linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.05) 55%),
        linear-gradient(150deg,
            rgba(var(--color-rental), 0.65) 0%,
            rgba(var(--color-rental), 0.25) 100%);
}

/* Produktion: Mitternachtsblau */
.panel--production .panel__overlay {
    background:
        linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.05) 55%),
        linear-gradient(150deg,
            rgba(var(--color-production), 0.65) 0%,
            rgba(var(--color-production), 0.25) 100%);
}

/* Bastian: Smaragd */
.panel--bastian .panel__overlay {
    background:
        linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.05) 55%),
        linear-gradient(150deg,
            rgba(var(--color-bastian), 0.65) 0%,
            rgba(var(--color-bastian), 0.25) 100%);
}

/* ==========================================================================
   PANEL – Text-Inhalt
   ========================================================================== */

.panel__content {
    position: absolute;
    /* top statt bottom: alle Subtitles starten auf exakt gleicher Höhe,
       unabhängig davon wie viel Inhalt (Coming Soon, URL etc.) darunter ist */
    top: 64%;
    z-index: 10;
    color: var(--white);
    max-width: 28vw;
}

/* Horizontal zentriert in der visuellen Mitte jedes Drittels */
.panel--rental     .panel__content { left: 19%; transform: translateX(-50%); text-align: center; }
.panel--production .panel__content { left: 53%; transform: translateX(-50%); text-align: center; }
.panel--bastian    .panel__content { left: 84%; transform: translateX(-50%); text-align: center; }

.panel__sub {
    font-size: clamp(0.6rem, 0.8vw, 0.85rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 0.7rem;
    transition: opacity 0.6s ease;
}

.panel__title {
    font-size: clamp(1.6rem, 3.2vw, 3.6rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 0.9;
}

.panel__url {
    display: block;
    margin-top: 0.7rem;
    font-size: clamp(0.55rem, 0.7vw, 0.7rem);
    letter-spacing: 0.12em;
    font-family: monospace;
    opacity: 0.35;
    transition: opacity 0.35s ease;
}

.panel__cta {
    display: block;
    margin-top: 0.9rem;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
}

/* Coming Soon – kein Klick-Cursor, gedämpfter Look */
.panel--coming-soon {
    cursor: default;
}

.panel--coming-soon .panel__title,
.panel--coming-soon .panel__sub {
    opacity: 0.6;
}

.panel--coming-soon .panel__url {
    display: none;
}

.panel--coming-soon .panel__cta {
    opacity: 0.45 !important;
    transform: translateY(0) !important;
    font-style: italic;
    letter-spacing: 0.15em;
}

/* ==========================================================================
   HOVER-STATES (Desktop / Maus)
   ========================================================================== */

.panel:hover .panel__bg    { transform: scale(1.04); }
.panel:hover .panel__video { opacity: 1; }
.panel:hover .panel__sub   { opacity: 1; }
.panel:hover .panel__url   { opacity: 0.6; }

.panel:hover .panel__cta {
    opacity: 0.85;
    transform: translateY(0);
}

/* Coming-soon: kein CTA-Einblenden beim Hover */
.panel--coming-soon:hover .panel__cta {
    opacity: 0.45 !important;
    transform: translateY(0) !important;
}

/* Overlay beim Hover aufhellen – Farbe bleibt sichtbar */
.panel--rental:hover .panel__overlay {
    background:
        linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(150deg,
            rgba(var(--color-rental), 0.45) 0%,
            rgba(var(--color-rental), 0.15) 100%);
}

.panel--production:hover .panel__overlay {
    background:
        linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(150deg,
            rgba(var(--color-production), 0.45) 0%,
            rgba(var(--color-production), 0.15) 100%);
}

.panel--bastian:hover .panel__overlay {
    background:
        linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(150deg,
            rgba(var(--color-bastian), 0.45) 0%,
            rgba(var(--color-bastian), 0.15) 100%);
}

/* ==========================================================================
   HOVER – Trennlinien verschieben sich als Einheit (via :has)
   Wenn ein Panel gehört wird, wächst es ±5.5 % – der Nachbar zieht sich
   um exakt denselben Betrag zurück. So bleibt immer 100 % belegt und
   kein Panel überlappt ein anderes.

   Basis-Trennlinien:
     D1 (Rental ↔ Produktion): oben 39 %, unten 33.3 %
     D2 (Produktion ↔ Bastian): oben 72.3 %, unten 66.6 %
   ========================================================================== */

/* --- Hover Rental: D1 +5.5 % nach rechts --- */
.hub:not(.hub--clicked):has(.panel--rental:hover) .panel--rental {
    clip-path: polygon(-5.5% 0%, 44.5% 0%, 38.8% 100%, -5.5% 100%);
}
.hub:not(.hub--clicked):has(.panel--rental:hover) .panel--production {
    clip-path: polygon(44.5% 0%, 72.3% 0%, 66.6% 100%, 38.8% 100%);
}

/* --- Hover Produktion: D1 −5.5 % nach links, D2 +5.5 % nach rechts --- */
.hub:not(.hub--clicked):has(.panel--production:hover) .panel--rental {
    clip-path: polygon(0% 0%, 33.5% 0%, 27.8% 100%, 0% 100%);
}
.hub:not(.hub--clicked):has(.panel--production:hover) .panel--production {
    clip-path: polygon(33.5% 0%, 77.8% 0%, 72.1% 100%, 27.8% 100%);
}
.hub:not(.hub--clicked):has(.panel--production:hover) .panel--bastian {
    clip-path: polygon(77.8% 0%, 100% 0%, 100% 100%, 72.1% 100%);
}

/* --- Hover Bastian: D2 −5.5 % nach links --- */
.hub:not(.hub--clicked):has(.panel--bastian:hover) .panel--production {
    clip-path: polygon(39% 0%, 66.8% 0%, 61.1% 100%, 33.3% 100%);
}
.hub:not(.hub--clicked):has(.panel--bastian:hover) .panel--bastian {
    clip-path: polygon(66.8% 0%, 105.5% 0%, 105.5% 100%, 61.1% 100%);
}

/* ==========================================================================
   KLICK-ANIMATION – Panel expandiert auf Vollbild
   ========================================================================== */

.panel.panel--expanding {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    z-index: 200 !important;
    transition: clip-path 0.65s var(--ease-panel) !important;
}

.hub--clicked .panel:not(.panel--expanding) {
    opacity: 0;
    transition: opacity 0.3s ease !important;
    pointer-events: none;
}

.hub-logo.logo--hidden {
    opacity: 0;
}

/* ==========================================================================
   ÜBERGANGS-VORHANG
   ========================================================================== */

.curtain {
    position: fixed;
    inset: 0;
    background: var(--black);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.curtain.curtain--active {
    opacity: 1;
}

/* ==========================================================================
   EINTRITTSANIMATION
   ========================================================================== */

@keyframes panelFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* backwards: hält den from-Wert während der Verzögerung (Panel unsichtbar),
   aber lässt nach dem Ende die normalen CSS-Regeln übernehmen (kein forwards-Lock).
   Damit funktionieren opacity-Transitionen beim Klick wieder korrekt. */
.panel {
    animation: panelFadeIn 0.9s ease-out backwards;
}

.panel--rental     { animation-delay: 0.15s; }
.panel--production { animation-delay: 0.30s; }
.panel--bastian    { animation-delay: 0.45s; }

@keyframes logoFadeIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.hub-logo {
    animation: logoFadeIn 0.8s ease-out 0.7s backwards;
}

/* ==========================================================================
   MOBILE – kein Hover verfügbar
   Lösung: Ken-Burns-Zoom auf Hintergrundbilder + Texte immer sichtbar
           + :active-Feedback beim Tippen
   ========================================================================== */

/* Erkennt Geräte ohne echten Hover (Touch) */
@media (hover: none) {

    /* Ken Burns: langsamer, sanfter Zoom – zeigt dass Panels lebendig sind */
    @keyframes kenBurns {
        0%   { transform: scale(1.0); }
        100% { transform: scale(1.1); }
    }

    .panel__bg {
        animation: kenBurns 9s ease-in-out infinite alternate;
    }

    /* Jedes Panel startet an einem anderen Punkt im Zyklus */
    .panel--production .panel__bg { animation-delay: -3s; }
    .panel--bastian    .panel__bg { animation-delay: -6s; }

    /* Alle Texte immer sichtbar (kein Hover nötig) */
    .panel__sub {
        opacity: 1;
    }

    .panel__url {
        opacity: 0.5;
    }

    .panel__cta {
        opacity: 0.75;
        transform: translateY(0);
    }

    /* Coming-soon auf mobile ebenfalls sichtbar */
    .panel--coming-soon .panel__cta {
        opacity: 0.45 !important;
    }

    /* Tipp-Feedback: kurzer Aufhell-Effekt */
    .panel--rental:active .panel__overlay {
        background:
            linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 55%),
            linear-gradient(150deg,
                rgba(var(--color-rental), 0.35) 0%,
                rgba(var(--color-rental), 0.1) 100%);
        transition: background 0.1s ease;
    }

    .panel--production:active .panel__overlay {
        background:
            linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 55%),
            linear-gradient(150deg,
                rgba(var(--color-production), 0.35) 0%,
                rgba(var(--color-production), 0.1) 100%);
        transition: background 0.1s ease;
    }

    .panel--bastian:active .panel__overlay {
        background:
            linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 55%),
            linear-gradient(150deg,
                rgba(var(--color-bastian), 0.35) 0%,
                rgba(var(--color-bastian), 0.1) 100%);
        transition: background 0.1s ease;
    }
}

/* Layout für Hochformat / kleine Screens */
@media (max-width: 768px), (orientation: portrait) and (max-width: 1024px) {

    html, body, .hub {
        height: 100dvh;
    }

    /* Logo auf Mobile ausblenden */
    .hub-logo {
        display: none;
    }

    /* Rental: Panel__bg endet genau an der Trennlinie (~35vh).
       bottom:auto löst die inset:0-Bindung, height:35vh setzt die
       Unterkante des Divs auf die Schnittlinie → Bildboden = Kante. */
    .panel--rental .panel__bg {
        bottom: auto;
        height: 35vh;
        background-size: cover;
        background-position: 20% center;
    }

    /* Diagonale Trennlinien LINKS geneigt (horizontal):
       linke Seite tiefer, rechte Seite höher */
    .panel--rental {
        clip-path: polygon(0% 0%, 100% 0%, 100% 33%, 0% 36%);
        z-index: 3;
    }

    .panel--production {
        clip-path: polygon(0% 36%, 100% 33%, 100% 66%, 0% 69%);
        z-index: 2;
    }

    .panel--bastian {
        clip-path: polygon(0% 69%, 100% 66%, 100% 100%, 0% 100%);
        z-index: 1;
    }

    /* Hover Hochformat – Trennlinien verschieben sich als Einheit.
       Basis: DH1 links=36%/rechts=33%, DH2 links=69%/rechts=66%.
       Expansion ±3 %; Bildschirmkanten werden durch overflow:hidden abgeschnitten. */

    /* --- Hover Rental: DH1 +3 % nach unten --- */
    .hub:not(.hub--clicked):has(.panel--rental:hover) .panel--rental {
        clip-path: polygon(0% -3%, 100% -3%, 100% 36%, 0% 39%);
    }
    .hub:not(.hub--clicked):has(.panel--rental:hover) .panel--production {
        clip-path: polygon(0% 39%, 100% 36%, 100% 66%, 0% 69%);
    }

    /* --- Hover Produktion: DH1 −3 % nach oben, DH2 +3 % nach unten --- */
    .hub:not(.hub--clicked):has(.panel--production:hover) .panel--rental {
        clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 33%);
    }
    .hub:not(.hub--clicked):has(.panel--production:hover) .panel--production {
        clip-path: polygon(0% 33%, 100% 30%, 100% 69%, 0% 72%);
    }
    .hub:not(.hub--clicked):has(.panel--production:hover) .panel--bastian {
        clip-path: polygon(0% 72%, 100% 69%, 100% 100%, 0% 100%);
    }

    /* --- Hover Bastian: DH2 −3 % nach oben --- */
    .hub:not(.hub--clicked):has(.panel--bastian:hover) .panel--production {
        clip-path: polygon(0% 36%, 100% 33%, 100% 63%, 0% 66%);
    }
    .hub:not(.hub--clicked):has(.panel--bastian:hover) .panel--bastian {
        clip-path: polygon(0% 66%, 100% 63%, 100% 103%, 0% 103%);
    }

    /* Subtiler Hintergrundscale im Hochformat */
    .panel:hover .panel__bg { transform: scale(1.025); }

    /* Videos im Hochformat beim Hover ausblenden (Bandbreite sparen) */
    .panel:hover .panel__video { opacity: 0; }

    /* Text mittig im jeweiligen horizontalen Drittel */
    .panel__content {
        bottom: auto;
        text-align: center !important;
        transform: none !important;
    }

    /* Vertikale Mitte jedes Drittels (mittig im unteren Bereich) */
    .panel--rental     .panel__content { top: 20%; left: 50%; transform: translate(-50%, -50%) !important; }
    .panel--production .panel__content { top: 54%; left: 50%; transform: translate(-50%, -50%) !important; }
    .panel--bastian    .panel__content { top: 86%; left: 50%; transform: translate(-50%, -50%) !important; }

    .panel__content {
        max-width: 85vw;
    }

    .panel__title {
        font-size: clamp(1.6rem, 6.5vw, 3rem);
        white-space: normal;
    }

    .panel__sub {
        font-size: clamp(0.65rem, 2.5vw, 0.9rem);
    }

    /* Logo: oberes Drittel */
    .hub-logo {
        top: 17%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: none;
        opacity: 1;
    }

    .hub-logo span {
        font-size: clamp(2.4rem, 12vw, 5.5rem);
        letter-spacing: 0.25em;
    }

    /* Eintrittsverzögerung auf mobile reduzieren */
    .panel--rental,
    .panel--production,
    .panel--bastian {
        animation-delay: 0.1s !important;
    }
}

/* ==========================================================================
   FEIN-OPTIMIERUNGEN
   ========================================================================== */

.panel--production,
.panel--bastian {
    background: var(--black);
}

.panel:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: -4px;
}