/* =====================================================================
   FRESHMEN.MEDIA — Redesign
   Palette "Blackout": kein Akzent-Bunt. Der Akzent ist Helligkeit —
   Bilder liegen gedimmt/entsättigt und werden bei Interaktion
   "aufgezogen" wie ein Kanal am Pult. Neutraltöne kühl gebogen,
   abgeleitet aus dem eigenen Videomaterial.
   ===================================================================== */

:root {
    --blackout: #07080B;
    --haze:     #0E1117;
    --beam:     #EEF2F8;
    --dim:      #79838F;
    --channel:  #BFD4F2;

    --hair:     rgba(191, 212, 242, 0.14);
    --hair-hot: rgba(191, 212, 242, 0.55);

    --face: "museo-sans", "Avenir Next", Avenir, Futura, system-ui, sans-serif;

    --pad: clamp(1.25rem, 4vw, 3.5rem);
    --ease: cubic-bezier(0.22, 0.68, 0.2, 1);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--blackout);
    /* Gutter reservieren: Lightbox und Burger-Menü sperren das Scrollen
       per overflow:hidden — ohne stabilen Gutter verschwindet dabei die
       Scrollbar und die ganze Seite ruckt seitlich (sichtbares Positions-
       Wackeln während der Zoom-Transition, v.a. Firefox). */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    /* Bewusst KEIN background hier: das Schwarz kommt von html. Ein
       opaker body-Hintergrund würde über allem mit negativem z-index
       liegen — dem fixen Detail-Hintergrund und den Team-Layern. */
    color: var(--beam);
    font-family: var(--face);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:focus-visible {
    outline: 1px solid var(--hair-hot);
    outline-offset: 5px;
}

/* Utility-Schrift: Labels, Eyebrows, Navigation */
.util {
    font-size: 0.6875rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 500;
}

/* =====================================================================
   NAVIGATION — transparent, kein Balken.
   ===================================================================== */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1rem, 2.4vw, 1.9rem) var(--pad);
    pointer-events: none;
    transition: padding 420ms var(--ease), background 420ms var(--ease),
                backdrop-filter 420ms var(--ease);
}
.nav > * { pointer-events: auto; }

/* Beim Scrollen (JS setzt data-scrolled): Leiste komprimiert sich nach
   oben und bekommt einen eleganten Grund — Links und Marke stehen nie
   nackt über Bildern. Oben am Seitenanfang bleibt alles transparent. */
.nav[data-scrolled="true"] {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background: rgba(7, 8, 11, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: auto; /* sichtbarer Balken soll keine Klicks durchlassen */
}
/* Der eigene Kasten der Marke wäre auf dem Leisten-Grund doppelt */
.nav[data-scrolled="true"] .nav-mark {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Boot-Phase (Klasse kommt aus nav.php, redesign.js entfernt sie nach
   dem ersten Frame): Zustandswechsel schnappen statt zu animieren —
   kein Aufblinken beim Laden. */
html.boot .nav,
html.boot .nav-mark { transition: none !important; }

/* Wortmarke: auf dem Hero abwesend, wandert beim Scrollen von der
   Bildmitte in die Ecke. Auf Unterseiten (nav--solid) immer sichtbar. */
.nav-mark {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    /* leichter Grund + Blur: die Marke schwebt über scrollendem
       Inhalt (Sektions-Überschriften) und braucht Trennung */
    padding: 0.5rem 0.9rem;
    /* Glyphe bündig mit den Überschriften (beide auf --pad): das
       Kasten-Padding nach links herauskompensieren */
    margin-left: -0.9rem;
    background: rgba(7, 8, 11, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.nav-mark[data-visible="true"],
.nav--solid .nav-mark { opacity: 1; transform: none; }
.nav-mark svg { width: 26px; height: auto; fill: var(--beam); display: block; }
.nav-mark span {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    font-weight: 500;
    white-space: nowrap;
}

.nav-links { display: flex; gap: clamp(1rem, 2.6vw, 2.4rem); }
.nav-links a {
    position: relative;
    padding: 4px 0; /* symmetrisch, sonst hängt der Text über der Mitte */
    color: var(--beam);
    opacity: 0.72;
    transition: opacity 320ms var(--ease);
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 1px; width: 0;
    background: var(--channel);
    transition: width 420ms var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }

/* Burger: drei Haarlinien, kein Kasten. */
.burger {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 8px 8px;
    background: none;
    border: 0;
    cursor: pointer;
    z-index: 60;
}
.burger i {
    display: block;
    width: 26px; height: 1px;
    background: var(--beam);
    transition: transform 420ms var(--ease), opacity 260ms var(--ease);
}
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
    position: fixed;
    inset: 0;
    /* unterhalb der Nav (40): der Burger muss als X über dem Overlay
       sichtbar und klickbar bleiben */
    z-index: 35;
    /* Schattenriss läuft seitlich über — sauber beschneiden, und
       isolate hält seinen z-index:-1 im Overlay */
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    padding: var(--pad);
    background: rgba(7, 8, 11, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 420ms var(--ease), visibility 0s linear 420ms;
}
.menu[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 420ms var(--ease), visibility 0s;
}
.menu a {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hair);
}

@media (max-width: 780px) {
    .nav-links { display: none; }
    .burger { display: flex; }
    /* Marke unsichtbar, aber im Layout: visibility statt display,
       damit der Burger exakt an seinem Platz bleibt (space-between) */
    .nav-mark { visibility: hidden; }
}

/* Bildmarke als Schattenriss HINTER den Menü-Links: mittig, volle
   Höhe (beginnt etwas über den Links, endet etwas darunter) — die
   Seiten laufen symmetrisch aus dem Beschnitt, das ist gewollt. */
.menu-ghost {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* nur leicht beschnitten: ~6% laufen je Seite aus dem Bild,
       die Höhe ergibt sich aus dem Seitenverhältnis */
    width: 112vw;
    height: auto;
    fill: rgba(191, 212, 242, 0.05);
    z-index: -1;
    pointer-events: none;
}
@media (min-width: 781px) {
    .menu { display: none; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
    position: relative;
    height: 100svh;
    min-height: 34rem;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.hero-media {
    position: absolute;
    top: -12%; left: 0;
    width: 100%; height: 124%;
    object-fit: cover;
    will-change: transform;
}
.hero-veil {
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 85% at 50% 45%, transparent 0%, rgba(7,8,11,0.62) 72%, rgba(7,8,11,0.94) 100%),
        linear-gradient(to bottom, rgba(7,8,11,0.7) 0%, transparent 26%, transparent 68%, rgba(7,8,11,0.9) 100%);
}
.hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gleicher Abstand wie innerhalb des Signatur-Lockups (.sig gap),
       damit Logo → Eyebrow → Satz eine gleichmäßige Leiter bilden */
    gap: 1.1rem;
    padding: 0 var(--pad);
    text-align: center;
}
.hero-logo {
    width: clamp(220px, 27vw, 430px);
    height: auto;
    fill: var(--beam);
    filter: drop-shadow(0 0 34px rgba(191, 212, 242, 0.34));
}

/* Signatur-Lockup: Eyebrow zwischen zwei Haarlinien, darunter der Satz.
   Komponiert statt "hingelegt". */
.sig {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    max-width: min(34rem, 88vw);
}
.sig-eyebrow {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    color: var(--beam);
    white-space: nowrap;
}
.sig-eyebrow::before,
.sig-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--hair-hot));
}
.sig-eyebrow::after {
    background: linear-gradient(to left, transparent, var(--hair-hot));
}
.sig p {
    margin: 0;
    font-size: clamp(1.05rem, 2.15vw, 1.55rem);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-wrap: balance;
}

/* Scroll-Hinweis: Linie mit ablaufendem Lichtpunkt. */
.cue {
    position: absolute;
    left: 50%; bottom: clamp(1.6rem, 4vh, 3rem);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    color: var(--dim);
    z-index: 3;
    transition: color 320ms var(--ease);
}
.cue:hover { color: var(--beam); }
.cue-rail {
    position: relative;
    width: 1px; height: 62px;
    background: var(--hair);
    overflow: hidden;
}
.cue-rail::after {
    content: "";
    position: absolute;
    left: 0; top: -30%;
    width: 1px; height: 30%;
    background: linear-gradient(to bottom, transparent, var(--channel));
    animation: travel 2.6s var(--ease) infinite;
}
@keyframes travel {
    0%   { transform: translateY(0); opacity: 0; }
    22%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { transform: translateY(430%); opacity: 0; }
}

/* =====================================================================
   SEKTIONS-KOPF — Label + Haarlinie, über die beim Erscheinen ein
   Lichtwisch läuft (gleiche Sprache wie der Scroll-Cue).
   ===================================================================== */
.section-head {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: clamp(5rem, 11vh, 8rem) var(--pad) clamp(2rem, 4vh, 3rem);
}
.section-head h2 {
    margin: 0;
    /* gleiche Größe wie die Kachel-Titel (.tiles .card-title) */
    font-size: clamp(1.15rem, 2.35vw, 2.05rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--beam);
}
.section-head .rail {
    flex: 1;
    height: 1px;
    background: var(--hair);
}

/* =====================================================================
   SEKTIONS-REVEAL — Inhalte faden beim ERSTEN Hereinscrollen gestaffelt
   ein (einmalig, pro Tab-Session — kein Replay nach Rückkehr von
   Unterseiten). Das Verstecken injiziert ein Inline-Skript im <head>
   VOR dem ersten Paint (sonst blinkt der Inhalt kurz auf); ohne JS
   bleibt alles sofort sichtbar. --i vergibt das JS pro Kind.
   ===================================================================== */
/* :not(svg): Wasserzeichen-Marken vom Reveal ausnehmen — deren
   fill-forwards-Endzustand (transform: none) würde sonst das
   Zentrier-translate dauerhaft kaputt machen */
.reveal-go > :not(svg) {
    animation: g-in 740ms var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 145ms);
}

/* =====================================================================
   RAHMEN-SWEEP — ein Lichtkopf läuft langsam am Kartenrand entlang:
   harte Kante in Laufrichtung (0 Attack), dahinter ein Schweif, der
   über den gesamten Umlauf ausklingt (100 % Decay). Umgesetzt als
   rotierender Conic-Gradient, auf einen 1px-Ring maskiert — ein
   SVG-Strich kann keinen Verlauf entlang des Pfads.
   ===================================================================== */
@property --beam-a {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.frame {
    position: absolute;
    inset: 0;
    padding: 1px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 900ms var(--ease);
    /* Zwei Lichtköpfe im 180°-Abstand, Schweif je ein halber Umlauf. */
    background: conic-gradient(from var(--beam-a),
        rgba(191, 212, 242, 0)    0%,
        rgba(191, 212, 242, 0.02) 15%,
        rgba(191, 212, 242, 0.10) 31%,
        rgba(191, 212, 242, 0.38) 44%,
        var(--channel)            49.8%,
        rgba(191, 212, 242, 0)    50%,
        rgba(191, 212, 242, 0.02) 65%,
        rgba(191, 212, 242, 0.10) 81%,
        rgba(191, 212, 242, 0.38) 94%,
        var(--channel)            99.8%,
        rgba(191, 212, 242, 0)    100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    /* Animation hängt dauerhaft am Element und wird nur pausiert bzw.
       fortgesetzt: Pause friert den Winkel ein, der Beam fadet an der
       Stelle aus, an der er stand — kein Rücksprung auf 0°. Pausiert
       kostet sie nichts. */
    animation: beam-orbit 8s linear infinite;
    animation-play-state: paused;
}
.card.is-live .frame,
.card:focus-visible .frame {
    opacity: 1;
    animation-play-state: running;
}
@media (hover: hover) {
    .card:hover .frame,
    .g-item:hover .frame {
        opacity: 1;
        animation-play-state: running;
    }
}
/* Galerie-Kacheln: gleicher Beam wie die Karten der Hauptseite */
.g-item:focus-visible .frame {
    opacity: 1;
    animation-play-state: running;
}
@keyframes beam-orbit {
    to { --beam-a: 360deg; }
}

/* =====================================================================
   KARTEN-GRUNDFORM — Leistungen, Portfolio, Team teilen den
   Dim→Live-Mechanismus.
   ===================================================================== */
.card {
    position: relative;
    overflow: hidden;
    background: var(--blackout);
    isolation: isolate;
    display: flex;
    align-items: flex-end;
}
.card-img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    /* Bilder stehen standardmäßig fast voll da — der erste Eindruck
       ist die Show, nicht die Probe. Das Aufziehen setzt nur noch den
       letzten Kick obendrauf. */
    filter: brightness(0.8) saturate(0.94);
    transition: transform 1100ms var(--ease), filter 1100ms var(--ease);
    z-index: -2;
}
.card-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(7,8,11,0.86) 0%, rgba(7,8,11,0.22) 52%, transparent 100%);
    z-index: -1;
}
.card.is-live .card-img,
.card:focus-visible .card-img {
    filter: brightness(1) saturate(1.06);
    transform: scale(1.075);
}
@media (hover: hover) {
    .card:hover .card-img {
        filter: brightness(1) saturate(1.06);
        transform: scale(1.075);
    }
}

.card-body {
    padding: clamp(1.3rem, 2.6vw, 2.4rem);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
}
.card-title {
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1.15;
    text-wrap: balance;
}
.card-sub {
    margin: 0;
    color: var(--dim);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    transition: color 420ms var(--ease);
}
.card-more {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--dim);
    transition: color 420ms var(--ease);
}
.card-more i {
    display: block;
    height: 1px; width: 26px;
    background: currentColor;
    transition: width 520ms var(--ease), background 420ms var(--ease);
}
.card.is-live .card-more, .card:focus-visible .card-more,
.card.is-live .card-sub,  .card:focus-visible .card-sub { color: var(--beam); }
.card.is-live .card-more i,
.card:focus-visible .card-more i { width: 72px; background: var(--channel); }
@media (hover: hover) {
    .card:hover .card-more, .card:hover .card-sub { color: var(--beam); }
    .card:hover .card-more i { width: 72px; background: var(--channel); }
}

/* =====================================================================
   LEISTUNGEN — 2×2, 1px-Fugen wie das Raster eines Pults.
   ===================================================================== */
.tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* gleiche Abstände wie das Portfolio-Raster (.works) */
    gap: clamp(1rem, 2vw, 2rem);
    padding: 0 var(--pad);
    height: min(88svh, 64rem);
    min-height: 36rem;
}
.tiles .card-title { font-size: clamp(1.15rem, 2.35vw, 2.05rem); }

@media (max-width: 780px) {
    /* Vier Bänder statt Briefschlitze. */
    .tiles {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: min(42svh, 22rem);
        height: auto;
        min-height: 0;
    }
    .tiles .card-title { font-size: 1.3rem; }
}

/* =====================================================================
   PORTFOLIO — großes Raster: 2/3 + 1/3 im Wechsel, alle 16:9-nah.
   ===================================================================== */
/* Zwei große Kacheln pro Reihe mit echtem Abstand — das Schwarz
   dazwischen trennt die Farbwelten der Eventfotos, statt sie wie
   bei 1px-Fugen gegeneinander laufen zu lassen. */
.works {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(18rem, 30vw, 28rem);
    gap: clamp(1rem, 2vw, 2rem);
    padding: 0 var(--pad);
}
.work .card-title { font-size: clamp(1.1rem, 2vw, 1.7rem); }
.work[data-extra="true"] { display: none; }
/* "Mehr zeigen": nachgeladene Kacheln steigen gestaffelt ein — gleiche
   Bewegung wie Galerie und Team (g-in), Index über --x */
.works[data-expanded="true"] .work[data-extra="true"] {
    display: flex;
    opacity: 0;
    animation: g-in 650ms var(--ease) forwards;
    animation-delay: calc(var(--x) * 90ms);
}

@media (max-width: 780px) {
    .works {
        grid-template-columns: 1fr;
        grid-auto-rows: clamp(13rem, 52vw, 18rem);
    }
}

.works-toggle {
    display: flex;
    justify-content: center;
    padding: clamp(1.6rem, 4vh, 2.6rem) var(--pad) 0;
}
.works-toggle button {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hair);
    color: var(--dim);
    font-family: var(--face);
    padding: 0.7rem 2.2rem;
    cursor: pointer;
    transition: color 320ms var(--ease), border-color 320ms var(--ease);
}
.works-toggle button:hover { color: var(--beam); border-color: var(--hair-hot); }

/* =====================================================================
   TEAM — Kontaktkarten 16:9 über einem Büro-Hintergrund.
   ===================================================================== */
.team {
    position: relative;
    /* eigener Stacking-Context: hält die negativen z-Layer (Bürobild,
       Schleier) in der Sektion, egal was html/body-Hintergründe tun */
    isolation: isolate;
    padding: 0 var(--pad) clamp(4rem, 9vh, 7rem);
}
.team-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.52) saturate(0.8);
    z-index: -2;
}
/* Fallback ohne Bürofoto: kalter Raumverlauf. */
.team-bg--placeholder {
    background-image:
        radial-gradient(90% 70% at 20% 10%, rgba(191,212,242,0.09), transparent 60%),
        radial-gradient(80% 60% at 85% 90%, rgba(191,212,242,0.05), transparent 55%);
    filter: none;
}
/* Nur die Ränder laufen ins Schwarz der Nachbarsektionen — die Mitte
   bleibt weitgehend offen, damit das Büro wirklich zu sehen ist. */
.team-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, var(--blackout) 0%, rgba(7,8,11,0.28) 22%, rgba(7,8,11,0.28) 78%, var(--blackout) 100%);
    z-index: -1;
}
.team-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
    max-width: 72rem;
    margin: 0 auto;
}
.mate {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--hair);
}
.mate .card-img { background-position: center 22%; }
.mate .card-title { font-size: clamp(1.1rem, 1.9vw, 1.5rem); }
/* Kontaktzeilen: aufgeräumt versteckt, fahren beim Aufziehen hoch. */
.mate-contact {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 640ms var(--ease), opacity 520ms var(--ease);
}
.mate-contact a {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: rgba(238, 242, 248, 0.85);
    width: fit-content;
    border-bottom: 1px solid transparent;
    transition: border-color 320ms var(--ease);
}
.mate-contact a:hover { border-color: var(--hair-hot); }
.mate.is-live .mate-contact,
.mate:focus-visible .mate-contact,
.mate:focus-within .mate-contact { max-height: 8rem; opacity: 1; }
@media (hover: hover) {
    .mate:hover .mate-contact { max-height: 8rem; opacity: 1; }
}

/* =====================================================================
   KONTAKT — großformatige Direktkontakte, kein Formular.
   ===================================================================== */
.contact-section {
    position: relative;
    /* wie .team: eigener Stacking-Context für den negativen Logo-Layer */
    isolation: isolate;
    overflow: hidden;
    /* Sektionsabstand liegt HIER statt auf .contact — so ist die
       .contact-Box deckungsgleich mit ihrem Inhalt und die Bildmarke
       zentriert exakt auf Mail/Telefon/Socials */
    padding-bottom: clamp(5rem, 11vh, 8rem);
}
/* Bildmarke als Wasserzeichen. Reines Schwarz auf #07080B ist physisch
   unsichtbar (4 RGB-Stufen) — daher minimal HELLER als der Grund, das
   Auge liest es trotzdem als schwarzen Schattenriss. Sichtbarkeit über
   den Alpha-Wert justieren: 0.04 = flüchtig, 0.10 = deutlich. */
.contact-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* größer als der Textblock: ragt ~10% oben und unten darüber
       hinaus (bleibt trotzdem unter der Überschrift — der Sektions-
       kopf hat mehr Abstand als der Überstand) */
    height: 120%;
    width: auto;
    max-width: 94vw;
    fill: rgba(191, 212, 242, 0.06);
    z-index: -1;
    pointer-events: none;
}
.contact {
    position: relative; /* Bezugsrahmen für .contact-mark */
    padding: 0 var(--pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.2rem, 5vh, 3.4rem);
    text-align: center;
}
.contact-lede {
    margin: 0;
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.02em;
    max-width: 24ch;
    text-wrap: balance;
}
.contact-lede strong { font-weight: 500; }
.contact-direct {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    align-items: center;
}
.contact-direct a {
    position: relative;
    font-size: clamp(1.15rem, 2.6vw, 1.9rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    padding-bottom: 0.45rem;
}
.contact-direct a::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    height: 1px; width: 100%;
    transform: translateX(-50%) scaleX(0.35);
    background: var(--hair);
    transition: transform 520ms var(--ease), background 420ms var(--ease);
}
.contact-direct a:hover::after {
    transform: translateX(-50%) scaleX(1);
    background: var(--hair-hot);
}
.contact-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.3rem;
    color: var(--dim);
}
.socials { display: flex; gap: 1.6rem; }
.socials a {
    color: var(--dim);
    transition: color 320ms var(--ease), transform 320ms var(--ease);
}
.socials a:hover { color: var(--beam); transform: translateY(-2px); }
.socials svg { width: 20px; height: 20px; fill: currentColor; display: block; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
    border-top: 1px solid var(--hair);
    padding: clamp(1.4rem, 3vh, 2rem) var(--pad);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--dim);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}
.footer nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer a { transition: color 320ms var(--ease); }
.footer a:hover { color: var(--beam); }

/* =====================================================================
   SEITENÜBERGANG — Cross-Document View Transition: das geklickte
   Kachelbild (bekommt seinen view-transition-name per JS im Moment
   des Klicks) morpht in den Detail-Hero. Schnell gehalten: 400ms.
   Browser ohne Support navigieren einfach normal — kein Fallback nötig.
   ===================================================================== */
@view-transition {
    navigation: auto;
}
::view-transition-group(*) {
    animation-duration: 360ms;
    animation-timing-function: var(--ease);
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 260ms;
}
/* Hell (Kachel) und Dunkel (Hero) blenden während des Morphs
   ineinander — das Bild wird dunkler, während es wächst. */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* Der Schleier bekommt einen eigenen Layer ÜBER dem fliegenden Bild
   und blendet in Morph-Länge ein — sonst fällt das Bild am Ende
   sichtbar hinter den Verlauf ("Snap"). */
::view-transition-new(detail-veil),
::view-transition-old(detail-veil) {
    animation-duration: 360ms;
}

/* Lightbox-Zoom (same-document): Thumbnail ↔ Vollbild, bewusst knackig */
::view-transition-group(lb-zoom) {
    animation-duration: 320ms;
}
/* Ohne das werden die Snapshots auf die interpolierende Box GESTRECKT —
   cover-Kachel (3:2) gegen contain-Vollbild verzerrt dann sichtbar
   ("Wackeln", v.a. Firefox). contain hält beide formstabil; Anfangs-
   und Endzustand sind deckungsgleich mit den echten Elementen. */
::view-transition-old(lb-zoom),
::view-transition-new(lb-zoom) {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* normaler Fade statt plus-lighter: das additive Mischen zweier
       fast identischer Bilder pumpt sichtbar in der Helligkeit */
    mix-blend-mode: normal;
}
::view-transition-image-pair(lb-zoom) {
    isolation: none;
}
/* Nur Firefox (dessen Transition-Engine jittert beim Interpolieren
   zweier Snapshots in der Position): Alt-Snapshot ausblenden, es
   fliegt nur noch das eine Bild — ruhig, minimaler Sprung am Start.
   @supports (-moz-appearance) matcht ausschließlich Gecko. */
@supports (-moz-appearance: none) {
    ::view-transition-old(lb-zoom) { display: none; }
}

/* =====================================================================
   BLACKOUT-BLENDE — Fallback für Browser ohne Cross-Document View
   Transitions (Firefox): Abblende auf Schwarz, Navigation, Aufblende.
   Die html.fx-enter-Klasse setzt ein Inline-Skript im <head> VOR dem
   ersten Paint, nur wenn der Browser keine MPA-Transitions kann.
   ===================================================================== */
.blackout {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--blackout);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms linear;
}
html.fx-enter .blackout {
    opacity: 1;
    transition: none;
}

/* =====================================================================
   DETAILSEITE
   ===================================================================== */
.detail-hero {
    position: relative;
    min-height: 100svh;
    /* KEIN overflow: hidden hier — das würde die Sticky-Galerie
       lahmlegen (sticky pinnt dann an der Sektion statt am Viewport).
       Das Beschneiden brauchte nur der alte Parallax-Hintergrund;
       der ist inzwischen position: fixed. */
    display: flex;
    align-items: center;
}
/* Hintergrund steht fest (kein Parallax): fixed hinter dem Inhalt,
   negative z-Indizes legen ihn hinter alles, auch hinter den Footer. */
.detail-media {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: brightness(0.58) saturate(0.94);
    view-transition-name: detail-hero;
}
.detail-veil {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(7,8,11,0.97) 0%, rgba(7,8,11,0.9) 38%, rgba(7,8,11,0.34) 74%, rgba(7,8,11,0.5) 100%);
    view-transition-name: detail-veil;
}
.detail-inner {
    position: relative;
    width: min(66ch, 100%);
    padding: clamp(6rem, 14vh, 9rem) var(--pad) clamp(3rem, 8vh, 5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3vh, 2.2rem);
}
.back {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    align-self: flex-start;
    padding: 0.7rem 1.4rem 0.7rem 1.1rem;
    border: 1px solid var(--hair);
    color: var(--beam);
    background: transparent;
    transition: border-color 320ms var(--ease);
}
.back:hover {
    border-color: var(--hair-hot);
}
/* Pfeil: Linie mit Spitze, zieht sich beim Hover nach links. */
.back i {
    position: relative;
    display: block;
    width: 24px; height: 1px;
    background: currentColor;
    transition: transform 380ms var(--ease);
}
.back i::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 7px; height: 7px;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.back:hover i { transform: translateX(-6px); }
.detail-inner h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4.6vw, 3.5rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.08;
    text-wrap: balance;
}
.detail-sub { margin: 0; color: var(--dim); letter-spacing: 0.08em; }
.detail-body { display: flex; flex-direction: column; gap: 1.1rem; }
.detail-body p {
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.1rem);
    line-height: 1.72;
    color: rgba(238, 242, 248, 0.82);
    max-width: 62ch;
}
.detail-body h2, .detail-body h3 {
    margin: 1.2rem 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.detail-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hair);
}
.detail-body li {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--hair);
    display: flex;
    align-items: baseline;
    gap: 1rem;
    color: rgba(238, 242, 248, 0.9);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}
.detail-body li::before {
    content: "";
    flex: none;
    width: 14px; height: 1px;
    background: var(--channel);
    opacity: 0.65;
    transform: translateY(-0.32em);
}
/* Listenpunkt mit FontAwesome-Icon (CMS-Syntax "* fa:icon-name Text"):
   Icon ersetzt den Strich */
.detail-body li.li-fa::before { display: none; }
.detail-body li.li-fa .fa-solid {
    flex: none;
    width: 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--channel);
    opacity: 0.85;
}

@media (max-width: 780px) {
    .detail-hero { align-items: flex-end; }
    .detail-veil {
        background: linear-gradient(to top,
            rgba(7,8,11,0.97) 0%, rgba(7,8,11,0.92) 46%, rgba(7,8,11,0.5) 78%, rgba(7,8,11,0.62) 100%);
    }
    .detail-inner { padding-top: 8rem; }
}

/* =====================================================================
   HERO-GALERIE — rechts über dem Hintergrundbild, Bilder faden schnell
   nacheinander ein (Stagger über --i), Klick öffnet die Lightbox.
   ===================================================================== */
.detail-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
    align-items: center;
}
/* Sticky-Full-Height: die Spalte ist viewporthoch und klebt am oberen
   Rand — die vier Kacheln stehen still, während der Text scrollt. */
.hero-gallery {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100svh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.6rem, 1vw, 1rem);
    align-content: center;
    padding: clamp(5rem, 10vh, 7rem) var(--pad) clamp(2rem, 4vh, 3rem) 0;
}
.g-item {
    position: relative; /* Anker für den .frame-Beam */
    padding: 0;
    border: 1px solid var(--hair);
    background: var(--blackout);
    cursor: zoom-in;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    opacity: 0;
    /* Basisverzögerung 420ms: erst wenn Morph (360ms) bzw. Aufblende
       (220ms) durch sind — sonst frisst der Seitenübergang den Stagger
       und man sieht vom Einfaden nichts. */
    animation: g-in 460ms var(--ease) forwards;
    animation-delay: calc(420ms + var(--i) * 90ms);
    transition: border-color 320ms var(--ease);
}
.g-item:hover { border-color: var(--hair-hot); }
.g-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    transform: scale(1.001);
    transition: filter 500ms var(--ease), transform 700ms var(--ease);
}
.g-item:hover img { filter: brightness(1); transform: scale(1.04); }
/* "+N"-Kachel: mehr Bilder, als auf eine Seite passen — der Rest
   liegt in der Lightbox. */
.g-more { position: relative; }
.g-more::after {
    content: "+" attr(data-more);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(7, 8, 11, 0.6);
    color: var(--beam);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.14em;
}
@keyframes g-in {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: none; }
}

/* Ein einzelnes Bild: groß statt im 2er-Raster (gibt es erst ab 2) */
.hero-gallery--single { grid-template-columns: 1fr; }
.hero-gallery--single .g-item { aspect-ratio: 16 / 10; }

/* Klick-Fokus: kein Standard-Ring (Firefox' gepunkteter innerer Rahmen,
   Chromes Outline). Tastatur-Fokus behält den :focus-visible-Stil. */
.g-item::-moz-focus-inner,
.lightbox button::-moz-focus-inner { border: 0; }
.g-item:focus:not(:focus-visible),
.lightbox button:focus:not(:focus-visible) { outline: none; }
@media (max-width: 980px) {
    .detail-hero--split { display: flex; flex-direction: column; align-items: stretch; }
    /* gestapelt: kein Sticky, normale Höhe, Seite scrollt normal */
    .hero-gallery {
        position: static;
        height: auto;
        padding: 0 var(--pad) clamp(2.5rem, 6vh, 4rem);
    }
}

/* =====================================================================
   DETAIL-LOCK (ab Desktop) — die Seite behält ihre normale Scrollbar,
   aber beim Scrollen bewegt sich einzig der Text: Hintergrund fixed,
   Galerie sticky, Footer fixiert am unteren Rand.
   ===================================================================== */
@media (min-width: 981px) {
    /* transparent: das fixe Hintergrundbild bleibt hinter dem Footer
       sichtbar, der Schleier liefert genug Kontrast */
    .detail-lock .footer {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 30;
    }
    /* Platz über dem fixierten Footer, damit die letzte Textzeile
       nicht darunter verschwindet */
    .detail-lock .detail-inner {
        padding-bottom: clamp(7rem, 14vh, 9rem);
    }
}

/* =====================================================================
   LIGHTBOX — Vollbild, Vor/Zurück, Zähler.
   ===================================================================== */
/* Wichtig: .lightbox { display: grid } würde das display:none des
   hidden-Attributs überstimmen — dann fängt das unsichtbare Overlay
   sämtliche Klicks der Seite ab. */
.lightbox[hidden] { display: none; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background: rgba(7, 8, 11, 0.96);
    opacity: 0;
    transition: opacity 240ms var(--ease);
}
.lightbox[data-open="true"] { opacity: 1; }
/* Feste Bühne: das Bild bekommt immer die volle Fläche und wird per
   object-fit: contain in BEIDE Richtungen skaliert — kleine Bilder
   hoch, große runter. Kein Rahmen: der würde die Letterbox-Ränder
   mit einfassen. */
.lb-stage {
    margin: 0;
    min-width: 0;
    height: 100svh;
    padding: clamp(3rem, 7vh, 5rem) 0;
}
.lb-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 200ms var(--ease);
}
.lightbox button {
    background: none;
    border: 0;
    color: var(--dim);
    cursor: pointer;
    transition: color 320ms var(--ease);
}
.lightbox button:hover { color: var(--beam); }
.lb-close {
    position: absolute;
    top: clamp(1rem, 3vh, 2rem);
    right: var(--pad);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.6rem;
    z-index: 2;
}
.lb-nav { padding: clamp(0.8rem, 2vw, 2rem); align-self: stretch; }
.lb-nav i {
    position: relative;
    display: block;
    width: 26px; height: 1px;
    background: currentColor;
}
.lb-nav i::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px; height: 8px;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
.lb-prev i::before { left: 0; transform: translateY(-50%) rotate(45deg); }
.lb-next i::before { right: 0; transform: translateY(-50%) rotate(-135deg); }
.lb-count {
    position: absolute;
    bottom: clamp(1rem, 3vh, 2rem);
    left: 50%;
    transform: translateX(-50%);
    color: var(--dim);
}

/* Video-Einbettung — sitzt in der linken Infospalte unter dem Text */
.detail-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 1px solid var(--hair);
}
.detail-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =====================================================================
   LEGAL (Impressum / Datenschutz) — bewusst minimal: Textspalte auf
   Schwarz, sonst nichts.
   ===================================================================== */
.legal {
    max-width: 72ch;
    margin: 0 auto;
    padding: clamp(7rem, 16vh, 10rem) var(--pad) clamp(4rem, 10vh, 7rem);
}
.legal h1 {
    margin: 0 0 2.2rem;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.1;
}
.legal h2, .legal h3 {
    margin: 2.4em 0 0.7em;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.legal p, .legal li {
    margin: 0 0 1em;
    line-height: 1.75;
    color: rgba(238, 242, 248, 0.82);
    font-size: 0.95rem;
}
.legal ul, .legal ol { padding-left: 1.2rem; }
.legal a {
    border-bottom: 1px solid var(--hair);
    transition: border-color 320ms var(--ease);
}
.legal a:hover { border-color: var(--hair-hot); }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}