/* ==========================================================================
   POLISH LAYER
   Kleiner Feinschliff, der nach style.css geladen wird. Kein SCSS-Rebuild
   noetig - einfach diese Datei anpassen, um Look & Feel weiter zu justieren.
   ========================================================================== */

/* Selbst gehostete Schrift (statt Google Fonts <link>): die Seite nutzt
   Montserrat nur in Weight 900 (siehe Bootstrap-Headings-Regel in style.css),
   daher genuegt dieser eine Schnitt. woff2 zuerst (kleiner/schneller),
   ttf als Fallback fuer sehr alte Browser. */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/Montserrat-Black.woff2") format("woff2"),
         url("../fonts/Montserrat-Black.ttf") format("truetype");
}

/* Fixe 650px-Bildbreite responsiv machen: war bisher "width: 650px" ohne
   jede Zwischenstufe zwischen 576px (dort auf 100% ueberschrieben) und
   unendlich - auf einem Tablet (z.B. 820px Viewport-Breite, Wrapper darin
   nochmal nur 95% breit, zwei Spalten teilen sich das) blieb da schlicht
   nicht genug Platz fuer ein 650px breites Bild, es lief ueber/quetschte
   sich. max-width statt fixer width behebt das universell, auf allen
   Breakpoints - die alte @media(576px)-Regel in style.css bleibt als
   Extraschutz bestehen, ist jetzt aber nur noch redundant statt noetig. */
.w-px-650 {
    width: 100%;
    max-width: 650px;
}

/* Optionaler Breiten-Override pro Projekt (project.wrapperWidth in
   projects-data.js, gesetzt als --wrapper-desktop-width Custom Property in
   render-projects.js) - gilt fuer Tablet UND Desktop, mit unterschiedlichen
   Default-Werten falls nicht gesetzt: Tablet hat weniger Platz als Desktop,
   braucht also von Haus aus mehr Wrapper-Breite (95% statt 80%), auch ohne
   projektspezifischen Override. Auf Mobile bleibt .wrapper immer bei 100%
   aus style.css, unabhaengig vom Custom-Property-Wert (diese Regeln greifen
   dort gar nicht). */
@media (min-width: 577px) and (max-width: 991px) {
    .wrapper {
        width: var(--wrapper-desktop-width, 95%);
    }
    /* Wie beim Mobile-Fix: Bootstraps .p-5 (48px Padding) ist auf Tablet
       immer noch zu grosszuegig fuer eine Zwei-Spalten-Zeile. Etwas
       grosszuegiger als der Mobile-Wert (0.75rem), da mehr Platz da ist. */
    .wrapper .p-5 {
        padding: 1.5rem !important;
    }
}
@media (min-width: 992px) {
    .wrapper {
        width: var(--wrapper-desktop-width, 80%);
    }
}

/* Client-/Partner-Logos: einheitliche Breite statt der bisherigen Mischung
   aus w-px-200/300 und h-px-100/150/200 (je nach Logo-Format unterschiedlich
   gewaehlt), damit "in love with" und "make love with" eine saubere,
   gleichmaessige Reihe ergeben statt wild unterschiedlich breiter Logos. */
.logo-img {
    width: 200px;
    height: auto;
}
@media (max-width: 576px) {
    .logo-img {
        width: 150px;
    }
    /* Weniger Abstand zwischen den Logo-Kacheln auf Mobile (vorher 25px aus
       style.css - auf einem schmalen Screen wirkte das unnoetig weitlaeufig). */
    .logo img {
        margin-bottom: 10px;
    }
}

/* Mobile: Media-Panel immer VOR dem Text-Panel zeigen, unabhaengig von
   project.mediaSide (das ist nur fuer Desktop gedacht). Die alte Regel dafuer
   (.wrapper { display: table-caption } in style.css) hat nie funktioniert -
   table-caption steuert nur, wie ein Element sich neben einer <table>
   verhaelt, nicht die Kindreihenfolge in einem gewoehnlichen Flex-Container.
   Ergebnis war reiner DOM-Zufall statt Absicht. Hier: echtes Flex mit
   column-Richtung + order, das garantiert Media zuerst zeigt. */
@media (max-width: 576px) {
    .wrapper {
        display: flex !important;
        flex-direction: column;
    }
    .wrapper .rellax-media {
        order: 1;
    }
    .wrapper .rellax-text {
        order: 2;
    }
    /* Das Media-Panel traegt Bootstraps .p-5 (padding: 3rem !important, also
       48px auf jeder Seite) - auf einem schmalen Screen frisst das viel zu
       viel Platz rund ums eigentliche Bild. Hier deutlich reduzieren.
       Braucht selbst !important + hoehere Spezifitaet, um Bootstraps
       !important-Regel zu schlagen. */
    .wrapper .rellax-media.p-5 {
        padding: 0.75rem !important;
    }
}

/* Cinematic Reveal (Mobile + Tablet, bis 991px): Text-/Media-Panel starten
   leicht skaliert und transparent, JS (setupMobileReveal in
   render-projects.js) fuegt .is-revealed hinzu, sobald das Panel in den
   Viewport scrollt (IntersectionObserver). Ersetzt den Foreground-Parallax
   auf beiden Stufen (Rellax ist dort deaktiviert, siehe index.html). */
@media (max-width: 991px) {
    .reveal-panel {
        opacity: 0;
        transform: scale(1.08);
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        will-change: opacity, transform;
    }
    .reveal-panel.is-revealed {
        opacity: 1;
        transform: scale(1);
    }
}

/* Wer keine Bewegung will (prefers-reduced-motion), bekommt den Inhalt sofort
   ohne Skalier-/Fade-Animation - unabhaengig vom JS-Timing. */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
    .reveal-panel {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Natives Scroll-Drift fuers Hintergrundbild auf Mobile + Tablet (Progressive
   Enhancement): wo der Browser CSS View-Timelines unterstuetzt, driftet das
   Bild rein ueber die GPU-Compositor-Pipeline mit - kein JS-Scroll-Listener
   noetig (siehe setupBackgroundParallax(), das den Listener auf dieser Stufe
   bewusst nicht mehr anhaengt). Browser ohne Unterstuetzung ignorieren den
   @supports-Block komplett, das Bild bleibt dann einfach ruhig/statisch. */
@media (max-width: 991px) {
    @supports (animation-timeline: view()) {
        [data-bg-parallax] .section-bg-img {
            animation: bg-drift-mobile linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
    }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
    [data-bg-parallax] .section-bg-img {
        animation: none !important;
    }
}
@keyframes bg-drift-mobile {
    from {
        transform: translateY(-24px);
    }
    to {
        transform: translateY(24px);
    }
}

/* Natives scroll-snap deaktivieren: kollidiert mit Lenis' Inertia-Scrolling
   (der Browser wuerde versuchen, hart an Sektionsgrenzen einzurasten,
   waehrend Lenis gleichzeitig sanft weiterscrollt -> Ruckeln). */
.gallery {
    scroll-snap-type: none !important;
    overflow-y: visible !important;
}

.gallery .content-rellax {
    scroll-snap-align: none !important;
}

html.lenis {
    height: auto;
}

html.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

html.lenis.lenis-stopped {
    overflow: hidden;
}

/* Etwas mehr Ruhe/Kontrast in den Text-Panels + softer Rahmen */
.rellax-text {
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Grosszuegigerer Zeilenabstand + etwas Tracking bei den Rollen-Labels */
.lead {
    letter-spacing: 0.06em;
    opacity: 0.85;
}

.list-inline-item {
    margin-bottom: 0.35rem;
    line-height: 1.6;
}

h1,
h2 {
    letter-spacing: -0.01em;
}
/* Kein eigenes font-family fuer h2 setzen: es gibt kein @font-face fuer
   "Montserrat-Bold" (die .ttf-Dateien in assets/ werden nirgends eingebunden),
   das ist tote CSS aus der Vorlage. Die tatsaechlich wirksame Schrift fuer alle
   Ueberschriften kommt aus Bootstraps eigener Headings-Regel (Google Font
   "Montserrat", Weight 900) - h2 erbt die automatisch, keine Extra-Regel noetig. */

/* Sanfter "Glow" beim Hover ueber klickbare Projekt-Bilder/Videos, damit klar
   wird, dass da etwas passiert (YouTube-Link, Lightbox, ...) */
.rellax > a img,
.rellax > img {
    transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.rellax > a:hover img {
    transform: scale(1.015);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.25);
    filter: brightness(1.05);
}

.rellax > a {
    display: inline-block;
    cursor: pointer;
}

/* Kontaktzeile & Footer minimal aufwerten */
.lead-contact {
    letter-spacing: 0.04em;
}

.content a[href^="mailto"],
.content a[href^="tel"] {
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Fokus-Sichtbarkeit fuer Tastatur-Nutzer (Barrierefreiheit) */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #f8f9fa;
    outline-offset: 3px;
}

/* Etwas Luft und eine feine Trennlinie oberhalb des Footers */
.bg-a-pagani.text-right {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Nav-Titel etwas knackiger */
.navbar-brand {
    letter-spacing: 0.01em;
}

/* Sprach-Umschalter im Nav */
.lang-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #f8f9fa;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.65rem;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lang-toggle:hover {
    border-color: #f8f9fa;
    background-color: rgba(255, 255, 255, 0.08);
}

/* Touch-Ziel auf min. 44x44px bringen (Apple HIG / Material Design
   Mindestempfehlung) - vorher war der Button mit 0.25rem/0.65rem Padding +
   0.8rem Schrift deutlich kleiner und schwer zu treffen. Gilt bis 991px, weil
   Tablets genauso Touch-Geraete sind wie Handys. */
@media (max-width: 991px) {
    .lang-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem 0.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   LIGHTBOX
   Dafuer gab es bisher UEBERHAUPT KEIN CSS (weder hier noch in style.css) -
   #light/#fade waren also die ganze Zeit ganz normale, sichtbare <div>s im
   Dokumentfluss statt eines versteckten Overlays, und der Schliessen-Button
   hatte kein sichtbares "X" und keine Mindestgroesse. Hier: sauber
   standardmaessig versteckt (JS in render-projects.js schaltet beim
   Oeffnen/Schliessen nur noch zwischen "none" und "flex" um).
   ========================================================================== */
#fade {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1055;
}

#light {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1060;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#light #lightbox-video {
    max-width: min(90vw, 1100px);
    max-height: 85vh;
    width: auto;
    height: auto;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.boxclose {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #f8f9fa;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    z-index: 1061;
}

.boxclose::before {
    content: "\00d7"; /* × - rein dekorativ, das eigentliche Label kommt von aria-label im HTML */
}

.boxclose:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #f8f9fa;
}

/* Projekt-Beschreibung (unter Titel/Subtitle, ueber den Credits) */
.project-description {
    max-width: 32rem;
    opacity: 0.9;
    line-height: 1.5;
    margin-bottom: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .rellax > a img,
    .rellax > img {
        transition: none;
    }
}