/* =========================================================
   DEZZY VISUALS — DESIGN SYSTEM
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
    --black:       #000000;
    --off-black:   #0A0A0A;
    --dark-gray:   #171717;
    --gray:        #777777;
    --light-gray:  #D9D9D9;
    --white:       #FFFFFF;

    --border-dark:  rgba(255,255,255,.12);
    --border-light: rgba(0,0,0,.12);

    /* Kontextfarben — werden pro Sektion umgeschaltet */
    --bg:        var(--black);
    --fg:        var(--white);
    --fg-muted:  var(--gray);
    --fg-soft:   var(--light-gray);
    --border:    var(--border-dark);
    --surface:   var(--off-black);

    /* Eingabefelder bekommen eine eigene Fläche statt nur einer Linie.
       Bei vielen Feldern werden aus Unterlinien sonst lauter Striche
       im Schwarz — der Blick findet keine Struktur.                 */
    --field:        rgba(255,255,255,.085);
    --field-hover:  rgba(255,255,255,.13);
    --field-focus:  rgba(255,255,255,.15);
    /* 3 : 1 gegen Schwarz — WCAG 1.4.11 für Bedienelemente */
    --field-line:   rgba(255,255,255,.36);
    --placeholder:  #858585;

    /* Typo — Archivo, variable Breitenachse (62–125 %) */
    --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --fs-micro:   .6875rem;
    --fs-small:   clamp(.8125rem, .78rem + .2vw, .9375rem);
    --fs-body:    clamp(1rem, .96rem + .2vw, 1.0625rem);
    --fs-lead:    clamp(1.0625rem, 1rem + .5vw, 1.3125rem);
    --fs-h3:      clamp(1.125rem, 1.05rem + .5vw, 1.5rem);
    --fs-h2:      clamp(2rem, 1.35rem + 3vw, 4.25rem);
    --fs-h1:      clamp(2.625rem, 1.5rem + 5.4vw, 7.5rem);
    --fs-statement: clamp(1.5rem, .9rem + 2.9vw, 3.75rem);
    --fs-figure:  clamp(4rem, 2rem + 10vw, 12rem);

    /* Raster */
    --pad-x:      clamp(1.25rem, 5vw, 6rem);
    --section-y:  clamp(5rem, 11vh, 10rem);
    --maxw:       1480px;
    --maxw-text:  60ch;

    /* Motion */
    --ease: cubic-bezier(.22,.61,.36,1);
    --dur:  .55s;

    --header-h: 72px;
    --header-top-inset: env(safe-area-inset-top, 0px);
    --header-offset: calc(var(--header-h) + 1px);
}

/* Flachere Leiste, solange keine Navigation darin steht */
@media (max-width: 719px) {
    :root {
        --header-h: 62px;
        --header-offset: calc(var(--header-h) + var(--header-top-inset) + 1px);
    }
}

/* Unter 380px lässt der verfügbare Platz (Viewport minus 2x20px Rand)
   den regulären Schriftgrad nicht mehr zu: bei 320px sind maximal 37px
   möglich, die Standardformel ergäbe 41px. Deshalb folgt die Headline
   hier direkt der Viewportbreite.                                     */
@media (max-width: 380px) {
    :root { --fs-h1: clamp(2rem, 12.8vw - 5px, 2.875rem); }
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sprungziele landen mit etwas Luft unter der Topbar.
       Der Scrollspy liest genau diesen Wert aus.            */
    scroll-padding-top: calc(var(--header-offset) + 8px);
}

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Kerning und optische Größen aktiv — bei großen Displaygraden
   sichtbar an Paaren wie AV, VI, Y. */
body {
    font-kerning: normal;
    font-optical-sizing: auto;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Markierter Text in Markenfarben statt Systemblau */
::selection { background: var(--white); color: var(--black); }
.section--light ::selection { background: var(--black); color: var(--white); }

/* Bildlaufleiste in der Palette der Seite */
html { scrollbar-color: #2E2E2E var(--black); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: #2A2A2A; border: 3px solid var(--black); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3D3D3D; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 3. FILMKORN ----------
   Feine, statische Textur über der gesamten Seite. Nimmt der
   Fläche das Digitale, ohne dass sie schmutzig wirkt.          */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .055;
    /* Bewusst OHNE mix-blend-mode: das Verrechnen der bildschirmgroßen
       Ebene kostete beim Scrollen 4 ms pro Frame (50 statt 60 fps) und
       erzeugte auf dunklem Grund nur vereinzelte helle Sprenkel.
       Reine Deckkraft ergibt eine gleichmäßigere Textur zum Nulltarif. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------- 4. A11Y ---------- */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: .5rem; left: .5rem;
    z-index: 200;
    padding: .75rem 1.25rem;
    background: var(--white);
    color: var(--black);
    font-size: var(--fs-small);
    font-weight: 600;
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 5. TYPOGRAFIE ---------- */

/* Display: Archivo auf voller Breite (125 %) — Plakat, nicht Interface */
.display {
    font-stretch: 125%;
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.028em;
    text-transform: uppercase;
    text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }

.h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
}

/* Kleine Marken-Auszeichnung. Bewusst sparsam eingesetzt. */
.label {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.45;
    color: var(--fg-soft);
    max-width: var(--maxw-text);
    letter-spacing: -.012em;
}

.body-text { color: var(--fg-soft); max-width: var(--maxw-text); }
.body-text + .body-text { margin-top: 1.15em; }

.small { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); }

.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Überschriften mit gesetzten Umbrüchen dürfen nicht aus ihrer Spalte
   herauswachsen. --fs-h2 skaliert mit dem Viewport — steht die
   Überschrift aber in einer schmalen Spalte, entsteht eine Extrazeile.
   Deshalb bemisst sie sich hier am eigenen Container.

   --fit ist die gemessene Breite je 1 px Schriftgrad des längsten
   Segments, plus Reserve. Die untere Schranke verhindert, dass die
   Schrift auf schmalen Geräten winzig wird — dort darf sie stattdessen
   umbrechen.                                                        */
.fit { container-type: inline-size; }
.fit-head {
    font-size: max(1.75rem, min(var(--fs-h2), calc(100cqi / var(--fit))));
}
#preiseTitle   { --fit: 17.4; }   /* "KEINE ÜBERRASCHUNGEN." */
@media (max-width: 380px) {
    #preiseTitle { font-size: clamp(1.25rem, 6.8vw, 1.75rem); }
}
#beratungTitle { --fit:  9.9; }   /* "DANN DREHEN."          */
#lookTitle     { --fit:  7.9; }   /* "AUTHENTIC."            */
#kontaktTitle  { --fit: 10.6; }   /* "DEIN NÄCHSTES"         */

.campaign__figure {
    --fit: 10.8;                  /* "3 MUSIC VIDEOS."       */
    font-size: max(2rem, min(clamp(2.5rem, 1.2rem + 5.6vw, 7rem), calc(100cqi / var(--fit))));
}

/* ---------- 6. LAYOUT ---------- */
.section {
    background: var(--bg);
    color: var(--fg);
    padding: var(--section-y) 0;
    position: relative;
    overflow: hidden;
    overflow: clip;
}
/* Flaches Lichtgefälle von oben, Amplitude rund 2 % — bewusst
   unterschwellig, nimmt den dunklen Flächen nur das Tote.        */
.section:not(.section--light)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.022) 0%, transparent 34%);
}
.section > .wrap { position: relative; z-index: 1; }

.section--light {
    --bg:       var(--white);
    --fg:       var(--black);
    /* #777 erreicht auf Weiß nur 4.48 : 1 — leicht abgedunkelt für AA */
    --fg-muted: #737373;
    --fg-soft:  #2E2E2E;
    --border:   var(--border-light);
    --surface:  #F4F4F4;
    --field:        rgba(0,0,0,.055);
    --field-hover:  rgba(0,0,0,.09);
    --field-focus:  rgba(0,0,0,.11);
    --field-line:   rgba(0,0,0,.45);
    --placeholder:  #6B6B6B;
}
/* Auf #0A0A0A erreicht #777 nur 4.42 : 1 — leicht aufgehellt für AA */
.section--off  { --bg: var(--off-black); --fg-muted: #7D7D7D; }
.section--tight { padding-block: clamp(3.5rem, 8vh, 6rem); }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}
/* Randlos — bricht bewusst aus dem Container aus */
.bleed { width: 100%; padding-inline: var(--pad-x); }

.section-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-head .label { display: block; margin-bottom: 1.25rem; }
.section-head .lead  { margin-top: 1.75rem; }

/* ---------- 7. BUTTONS ---------- */
.btn {
    --btn-bg:     var(--fg);
    --btn-fg:     var(--bg);
    --btn-border: var(--fg);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 56px;
    padding: 1rem 2rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
    cursor: pointer;
    transition: color .24s var(--ease), border-color .24s var(--ease), transform .18s var(--ease);

    /* Die Gegenfarbe steigt von unten auf, statt hart umzuspringen */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --btn-hover-bg: var(--bg);
    --btn-hover-fg: var(--fg);
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-hover-bg);
    transform: translateY(100%);
    transition: transform .28s var(--ease);
}
.btn:focus-visible::before { transform: translateY(0); }
.btn:focus-visible { color: var(--btn-hover-fg); }
@media (hover: hover) and (pointer: fine) {
    .btn:not(:disabled):hover::before { transform: translateY(0); }
    .btn:not(:disabled):hover { color: var(--btn-hover-fg); }
}
.btn:not(:disabled):active { transform: scale(.985); }
.btn:disabled { cursor: wait; }

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--fg);
    --btn-border: var(--border);
    --btn-hover-bg: var(--fg);
    --btn-hover-fg: var(--bg);
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--fg); }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 44px; padding: .625rem 1.25rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

.link {
    display: inline-block;
    font-weight: 600;
    padding-bottom: .1em;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    transition: background-size var(--dur) var(--ease);
}
.link:hover { background-size: 0% 1px; }

/* ---------- 8. HEADER ---------- */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(0,0,0,.55);
    border-bottom: 1px solid transparent;
    transition: background .4s var(--ease), border-color .4s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
    .header { backdrop-filter: blur(18px) saturate(140%); }
}
.header.is-scrolled { background: rgba(0,0,0,.9); border-bottom-color: var(--border-dark); }

/* Eine feste, deckende Leiste schließt auf iPhones bis zum oberen
   Bildschirmrand ab; das Logo bleibt unterhalb der Statusleiste. */
@media (max-width: 719px) {
    body { padding-top: var(--header-offset); }
    .header,
    .header.is-scrolled {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-top: var(--header-top-inset);
        background: var(--black);
        backdrop-filter: none;
    }
    body .wrap,
    body .menu {
        padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
        padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
    }
    body .menu { padding-bottom: max(3rem, env(safe-area-inset-bottom, 0px)); }
}


/* Fortschrittslinie an der Unterkante — füllt sich mit der Scroll-
   position. Auf einer Filmseite liest sich das als Timeline, nicht
   als generischer Lesefortschritt. --fortschritt setzt main.js.   */
.header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--white);
    transform: scaleX(var(--fortschritt, 0));
    transform-origin: left center;
    opacity: 0;
    transition: opacity .45s var(--ease);
    pointer-events: none;
}
.header.is-scrolled::after { opacity: .9; }

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    /* Höhe bleibt konstant. Eine Verdichtung beim Scrollen verkürzt
       das Dokument und lässt den Inhalt unter dem Finger wegspringen. */
    min-height: var(--header-h);
}

/* Primary Logo, horizontale Fassung — eine Datei, kein gesetzter Text.
   Die Größe wird ausschließlich über die BREITE gesteuert. Die Höhe
   ergibt sich daraus, weil die Logo-Schutzregel am Dateiende jedem
   Logo height:auto erzwingt.                                        */
.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.brand__logo {
    width: 240px;
    height: auto;
}
/* Die neue horizontale Wortmarke ist besonders breit. Auf schmaleren
   Ansichten bleibt neben dem Logo ausreichend Platz für die Navigation. */
@media (min-width: 720px) and (max-width: 1199px) {
    .brand__logo { width: 160px; }
    .header__inner { gap: 1rem; }
    .header .nav__list { gap: .75rem; }
}
@media (max-width: 719px) { .brand__logo { width: 200px; } }
@media (max-width: 359px) { .brand__logo { width: 180px; } }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2rem); }
.nav__link {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--light-gray);
    padding: .5rem 0;
    position: relative;
    transition: color .3s var(--ease);
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { color: var(--white); }

/* Punkt am Kampagnen-Eintrag, solange die Kampagne läuft.
   Gleiche Geste wie "● 3 ARTISTS GESUCHT" im Hero.            */
.nav__dot, .menu__dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: .5em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    animation: pulse 2.4s var(--ease) infinite;
}
.menu__dot { width: 9px; height: 9px; margin-left: .35em; vertical-align: .35em; }

.header__cta { display: none; }

/* Ab 720 px die volle Navigation — dort passt sie mit 76 px Reserve
   hinein. Vorher erschien sie erst ab 1000 px und die Leiste blieb auf
   Tablets fast leer: über 500 px Nichts zwischen Logo und Menütaste.
   Der Knopf kommt erst dazu, wenn auch er noch Platz hat.          */
@media (min-width: 720px) { .nav { display: block; } }
@media (min-width: 1000px) { .header__cta { display: inline-flex; } }

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    margin-right: -12px;
    background: none; border: 0; cursor: pointer;
}
.nav-toggle__box { position: relative; width: 24px; height: 12px; }
.nav-toggle__box span {
    position: absolute;
    left: 0;
    width: 100%; height: 1.5px;
    background: var(--white);
    transition: transform .4s var(--ease);
}
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { transform: translateY(-5.25px) rotate(-45deg); }
@media (min-width: 720px) { .nav-toggle { display: none; } }

.menu {
    position: fixed;
    inset: var(--header-offset) 0 0;
    z-index: 99;
    background: var(--black);
    padding: clamp(1.5rem, 6vw, 3rem) var(--pad-x) 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 720px) { .menu { display: none; } }

.menu__list { display: flex; flex-direction: column; }
.menu__link {
    display: block;
    padding: .5rem 0;
    font-size: clamp(1.75rem, 8vw, 2.75rem);
    font-stretch: 125%;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.028em;
    text-transform: uppercase;
    color: var(--white);
}
.menu__meta { display: grid; gap: 1rem; }

/* ---------- 9. HERO ----------
   Der Bildbereich wird oben und unten von schmalen Balken
   begrenzt — ein Kinoformat, kein Website-Header.             */
.hero {
    position: relative;
    /* Der Inhalt sitzt unten, deshalb fällt der gesamte Leerraum nach oben.
       Ohne Deckelung wächst die Lücke unter der Topbar auf hohen Monitoren
       unbegrenzt mit (bei 1440 px Höhe waren es über 500 px).             */
    min-height: min(calc(100svh - var(--header-offset)), 42rem);
    display: flex;
    align-items: flex-end;
    padding: clamp(3rem, 7vh, 4.5rem) 0 clamp(3rem, 8vh, 5rem);
    background: var(--black);
    overflow: hidden;
    isolation: isolate;
    --bar: 0px;
}
/* Letterbox und der höhere Deckel gelten nur im Querformat.
   Auf hochkant gehaltenen Tablets entstünde sonst wieder eine
   große Lücke unter der Topbar.                                */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
    .hero {
        --bar: clamp(28px, 5.5svh, 64px);
        min-height: min(calc(100svh - var(--header-offset)), 50rem);
    }
}

.hero__media,
.hero__stage {
    position: absolute;
    left: 0; right: 0;
    top: var(--bar); bottom: var(--bar);
    z-index: -2;
    overflow: hidden;
}
/* Bei mehreren Clips liegen zwei Videoelemente übereinander und
   blenden weich ineinander — deshalb absolut positioniert.      */
.hero__media video,
.hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s var(--ease);
}
.hero__media video.is-an,
.hero__media img.is-an { opacity: 1; }

.hero__stage { display: grid; place-items: center; }
.hero__stage img {
    width: clamp(420px, 88vw, 1080px);
    height: auto;
    opacity: .06;
    /* --py wird beim Scrollen gesetzt (main.js, Modul Parallax) */
    transform: translate3d(0, calc(-4% + var(--py, 0px)), 0);
    will-change: transform;
}
.hero__stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(115% 75% at 50% 0%, rgba(255,255,255,.09) 0%, transparent 62%);
}

.hero__overlay {
    position: absolute;
    left: 0; right: 0;
    top: var(--bar); bottom: var(--bar);
    z-index: -1;
    background:
        radial-gradient(125% 105% at 50% 45%, transparent 42%, rgba(0,0,0,.55) 100%),
        linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.4) 48%, rgba(0,0,0,.6) 100%);
}

/* Die längste Headline-Zeile "DEIN VIDEO." misst 7,492 x Schriftgrad.
   Beim Maximum von 7.5rem sind das 899px — 56rem (896px) reichten nicht
   und die Zeile brach um. 64rem lässt Luft.                          */
.hero__content { position: relative; max-width: 64rem; }
.hero__headline { margin-bottom: 1.75rem; }
.hero__sub {
    font-size: var(--fs-lead);
    line-height: 1.45;
    color: var(--light-gray);
    max-width: 44ch;
    margin-bottom: 2.25rem;
    letter-spacing: -.012em;
}
.hero__price { margin-top: 1.75rem; font-size: var(--fs-small); color: var(--light-gray); }

@media (max-width: 559px) {
    .hero .btn-row { flex-direction: column; align-items: stretch; }
    .hero .btn-row .btn { width: 100%; }
}

.hero__flag {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.75rem;
    padding: .5rem 1rem;
    border: 1px solid var(--border-dark);
    background: rgba(255,255,255,.05);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.hero__flag .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--white);
    animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .3; transform: scale(.8); }
}

/* Marker in den Letterbox-Balken — Bezug auf Kamera-Bildgrenzen */
.hero__meta {
    position: absolute;
    left: var(--pad-x); right: var(--pad-x);
    bottom: calc(var(--bar) / 2);
    transform: translateY(50%);
    display: none;
    justify-content: space-between;
    font-size: var(--fs-micro);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gray);
    pointer-events: none;
}
@media (min-width: 900px) { .hero__meta { display: flex; } }

/* Kamera-Overlay: rein dekorativ, ohne Einfluss auf die Bedienung. */
.hero__camera {
    position: absolute;
    top: calc(var(--bar) + .875rem);
    left: max(var(--pad-x), env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255,255,255,.75);
    font: 500 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .08em;
    pointer-events: none;
}
.hero__rec { display: inline-flex; align-items: center; gap: .5rem; }
.hero__rec-dot { width: 6px; height: 6px; border-radius: 50%; background: #ed4949; }
.hero__timecode { font-variant-numeric: tabular-nums; min-width: 11ch; }
.hero.is-camera-running .hero__rec-dot { animation: cameraRec 2.4s ease-in-out infinite; }
.hero__focus { position: relative; width: fit-content; max-width: 100%; margin-bottom: 1.75rem; }
.hero__focus .hero__headline { margin-bottom: 0; }
.hero__focus-frame { position: absolute; inset: -10px -9px; opacity: .3; pointer-events: none; }
.hero__focus-frame i { position: absolute; width: 14px; height: 14px; border: solid rgba(255,255,255,.8); }
.hero__focus-frame i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.hero__focus-frame i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.hero__focus-frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.hero__focus-frame i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.hero.is-focus-ready .hero__focus-frame { animation: cameraFocus 1.6s var(--ease) both; }
@keyframes cameraRec { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes cameraFocus {
    0% { transform: scale(1.035, 1.12); opacity: 0; }
    35% { opacity: .7; }
    65% { transform: scale(1); opacity: .85; }
    100% { transform: scale(1); opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
    .hero.is-camera-running .hero__rec-dot,
    .hero.is-focus-ready .hero__focus-frame { animation: none; }
}

/* ---------- 10. STATEMENT ----------
   Trägt eine Sektion allein. Ersetzt Karten-Raster durch Sprache. */
.statement {
    font-size: var(--fs-statement);
    font-stretch: 112%;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.028em;
    text-transform: uppercase;
    color: var(--fg-muted);
    max-width: 24ch;
}
.statement b { font-weight: 700; color: var(--fg); }
.statement span { display: block; }
.statement span + span { margin-top: .35em; }

/* Zeilenweiser Aufbau — die eine bewusste Bewegung der Seite */
.statement--reveal.is-reveal-ready span {
    opacity: 0;
    transform: translateY(.3em);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
}
.statement--reveal.is-reveal-ready.is-in span { opacity: 1; transform: none; }

.statement--wide { max-width: 34ch; }

/* Asymmetrischer Abschluss einer Sektion — bricht die 50/50-Splits auf */
.push-right {
    margin-top: clamp(3rem, 7vw, 5.5rem);
    margin-left: auto;
    max-width: 46ch;
}

/* ---------- 11. LOOK-BAND ----------
   Randlose, breite Bahn. Bricht den Sektionsrhythmus auf.      */
.band {
    position: relative;
    min-height: clamp(22rem, 52vh, 34rem);
    display: flex;
    align-items: center;
    padding: clamp(3rem, 8vh, 6rem) 0;
    border-block: 1px solid var(--border-dark);
    background: var(--off-black);
    --fg-muted: #7D7D7D;
    overflow: hidden;
}
.band__mark {
    position: absolute;
    top: 50%; right: -4%;
    transform: translate3d(0, calc(-50% + var(--py, 0px)), 0);
    will-change: transform;
    width: clamp(300px, 42vw, 720px);
    opacity: .05;
    pointer-events: none;
}
/* .band__mark sitzt auf <picture> — das Seitenverhältnis muss das <img> tragen */
.band__mark img { width: 100%; height: auto; }
.band__inner { position: relative; z-index: 1; }
.band__text { margin-top: 2rem; max-width: 46ch; color: var(--light-gray); }
/* Die Stilaussage ist eine Kernbotschaft, nicht Fließtext —
   deshalb abgesetzt und etwas kräftiger. */
.band__claim {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-dark);
    color: var(--white);
}

/* Ab Desktop steht die Erläuterung neben der Aussage statt darunter —
   sonst blieben rechts über 60 % der Fläche ungenutzt.            */
@media (min-width: 1000px) {
    .band__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: clamp(3rem, 6vw, 6rem);
        align-items: end;
    }
    .band__text { margin-top: 0; padding-bottom: .35em; }
}

/* ---------- 12. PORTFOLIO ---------- */
.work-grid {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.5rem);
    grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }

.work { display: block; position: relative; }
.work__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--dark-gray);
}
/* Das <picture> muss die Kachel ausfüllen: height:100% am <img>
   bezieht sich sonst auf das <picture> mit automatischer Höhe und
   bleibt wirkungslos — das Vorschaubild füllte die Kachel nicht.  */
.work__media picture { display: block; width: 100%; height: 100%; }
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.work:hover .work__media img { transform: scale(1.04); }

.work__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.05));
    opacity: 0;
    transition: opacity .45s var(--ease);
}
.work:hover .work__play, .work:focus-visible .work__play { opacity: 1; }
.work__play svg { width: 54px; height: 54px; stroke: var(--white); fill: none; stroke-width: 1; }

.work__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
}
.work__artist { font-weight: 700; font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; }
.work__song { font-size: var(--fs-small); color: var(--fg-muted); }
.work__style { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }

/* Pre-Launch: freie Plätze */
.slot {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    aspect-ratio: 16 / 9;
    padding: clamp(1.125rem, 3vw, 1.5rem);
    border: 1px solid var(--border);
    background: linear-gradient(150deg, rgba(255,255,255,.04) 0%, transparent 58%), var(--off-black);
}
.slot__num { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; font-stretch: 125%; line-height: 1; color: rgba(255,255,255,.13); }
.slot__title { margin-bottom: .375rem; }
.slot__state { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); }

/* ---------- 13. PREISE — Karten ---------- */
.plans {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: stretch;
}
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.625rem, 3.2vw, 2.25rem);
    border: 1px solid var(--border);
    background: var(--bg);
}
.plan--featured {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}
.plan--featured .plan__note { color: var(--gray); }
.plan--featured .plan__list li { border-color: var(--border-dark); }
.plan--featured .btn {
    --btn-bg: var(--white); --btn-fg: var(--black); --btn-border: var(--white);
    --btn-hover-bg: var(--black); --btn-hover-fg: var(--white);
}

.plan__badge {
    align-self: flex-start;
    margin-bottom: 1.25rem;
    padding: .3125rem .6875rem;
    background: var(--white);
    color: var(--black);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
/* Gleiches Textkästchen wie der ausgezeichnete Badge (geschütztes
   Leerzeichen), damit Name und Preis auf einer Linie stehen. */
.plan__badge--leer { visibility: hidden; }

.plan__name {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 1rem;
}
.plan--featured .plan__name { color: var(--gray); }
.plan__price {
    font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);
    font-stretch: 125%;
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.04em;
}
.plan__note { font-size: var(--fs-small); color: var(--fg-muted); margin-top: .625rem; }
/* Verweis auf den geerbten Umfang — nimmt den Eindruck,
   das teurere Paket enthielte weniger.                     */
.plan__inherit {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.plan__inherit + .plan__list { margin-top: 1.25rem; }
.plan__list li:first-child { border-top: 0; }

.plan__list { margin: 1.75rem 0; flex-grow: 1; }
.plan__list li {
    position: relative;
    padding: .4375rem 0 .4375rem 1.375rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
    line-height: 1.45;
}
.plan__list li::before {
    content: '';
    position: absolute;
    left: 0; top: 1.02em;
    width: 8px; height: 1px;
    background: currentColor;
    opacity: .5;
}

/* Die Zeilen, die sich gegenüber dem Standardpaket ändern */
.plan__list li.is-up {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-weight: 600;
    color: var(--fg);
}
.plan__list li.is-up::before { opacity: 1; height: 2px; top: 1em; }
.plan__up {
    flex-shrink: 0;
    padding: .0625rem .375rem;
    border: 1px solid var(--border);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* Info-Blöcke */
.info-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--border);
}
@media (min-width: 860px) { .info-grid { grid-template-columns: repeat(3, 1fr); } }
.info__title { margin-bottom: 1.25rem; }
.info__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .4375rem 0;
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
}
.info__row:first-of-type { border-top: 0; }
.info__row dt { color: var(--fg-soft); }
.info__row dd { margin: 0; font-weight: 600; white-space: nowrap; }
.info__row--total { border-top: 1px solid currentColor; margin-top: .375rem; padding-top: .75rem; font-weight: 700; }
.info__row--total dt { color: inherit; font-weight: 700; }

/* Technikliste im FAQ — gleiche Form wie die Leistungslisten der
   Pakete. Das Format der Ortsnamen mit Mittelpunkten trägt hier
   nicht, weil die Zeilen länger sind.                          */
.technik { margin-top: 1.25em; }
.technik li {
    position: relative;
    padding: .5rem 0 .5rem 1.375rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
    line-height: 1.45;
}
.technik li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 8px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}

/* Einzugsgebiet — echte Orte statt einer Behauptung */
.area {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .625rem;
    margin-top: 1rem;
    font-size: var(--fs-small);
    color: var(--fg-soft);
}
.area li::after { content: ' ·'; color: var(--fg-muted); }
.area li:last-child::after { content: ''; }

/* ---------- 14. ACCORDION ---------- */
.acc { border-top: 1px solid var(--border); }
.acc:last-of-type { border-bottom: 1px solid var(--border); }
.acc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1rem, 2.4vw, 1.375rem) 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.018em;
    transition: color .3s var(--ease);
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__summary:hover { color: var(--fg-muted); }
.acc__icon { position: relative; flex-shrink: 0; width: 15px; height: 15px; }
.acc__icon::before, .acc__icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 1.5px;
    background: currentColor;
    transition: transform .4s var(--ease);
}
.acc__icon::after { transform: rotate(90deg); }
.acc[open] .acc__icon::after { transform: rotate(0deg); }
.acc__body { padding-bottom: clamp(1.125rem, 3vw, 1.75rem); max-width: var(--maxw-text); color: var(--fg-soft); }

/* Kopf der Beratungssektion — Aussage links, Erläuterung rechts.
   Vorher standen beide untereinander links, rechts blieben 48 % leer. */
.split-head { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
    .split-head {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        align-items: end;
        gap: clamp(2.5rem, 5vw, 5rem);
    }
}

/* FAQ — Überschrift links, Fragen rechts. Zwölf Einträge über die
   volle Breite ließen rechts 43 % ungenutzt und die Aufklapp-Kreuze
   trieben weit vom Text ab.                                        */
.faq-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1000px) {
    .faq-grid {
        grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
        gap: clamp(3rem, 6vw, 6rem);
    }
    .faq-grid__head {
        position: sticky;
        top: calc(var(--header-h) + 3rem);
        align-self: start;
    }
}

/* ---------- 15. KANÄLE ---------- */
.channels { display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--border); }
@media (min-width: 700px) { .channels { grid-template-columns: repeat(3, 1fr); border-top: 0; } }

.channel {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
    transition: color .3s var(--ease), padding-left .4s var(--ease);
}
@media (min-width: 700px) {
    .channel { border-top: 1px solid var(--border); border-bottom: 0; padding-right: 1.5rem; }
}
.channel:hover { padding-left: .5rem; }
.channel__icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }
.channel__name { font-weight: 700; font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; }
.channel__hint { display: block; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); margin-top: .125rem; }

/* ---------- 16. ABLAUF — Call Sheet ----------
   Aufbau einer echten Drehdisposition: durchlaufende Zeilen
   über die volle Breite, tabellarische Ziffern, keine Kacheln. */
.callsheet { border-top: 1px solid var(--border); }
.callsheet__row {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: .25rem 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.875rem) 0;
    border-bottom: 1px solid var(--border);
    transition: background .45s var(--ease);
}
@media (min-width: 860px) {
    .callsheet__row { grid-template-columns: 6rem minmax(0, 16rem) minmax(0, 1fr); gap: 2rem; align-items: baseline; }
}
.callsheet__row:hover { background: rgba(255,255,255,.025); }
.section--light .callsheet__row:hover { background: rgba(0,0,0,.025); }

.callsheet__tc {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--fg-muted);
    padding-top: .35em;
}
.callsheet__title {
    font-size: clamp(1.125rem, 1rem + .9vw, 1.75rem);
    font-stretch: 112%;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.022em;
    text-transform: uppercase;
}
.callsheet__body {
    font-size: var(--fs-small);
    color: var(--fg-soft);
    max-width: 46ch;
    /* Unter 860px hat die Zeile nur zwei Spalten: Nummer (3.5rem) und
       Titel. Ohne diese Zuweisung landet der Text in der zweiten Reihe
       der ERSTEN Spalte — also in 56 px Breite, ein Wort je Zeile.    */
    grid-column: 2;
}
@media (min-width: 860px) {
    .callsheet__body { grid-column: auto; }
}

/* ---------- 17. ÜBER MICH ---------- */
.about { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 860px) { .about { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); } }
.about__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--dark-gray); }
.about__photo picture { display: block; width: 100%; height: 100%; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__sig {
    margin-top: 2rem;
    font-size: var(--fs-small);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* ---------- 18. LAUNCH-KAMPAGNE ---------- */
.campaign__figure {
    font-stretch: 125%;
    font-weight: 700;
    line-height: .88;
    letter-spacing: -.04em;
    text-transform: uppercase;
}
.campaign__figure span { display: block; }
.campaign__figure span:nth-child(2) { color: var(--fg-muted); }

.looks {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2.5rem;
    margin: clamp(2rem, 4vw, 3rem) 0;
    padding-block: 1.25rem;
    border-block: 1px solid var(--border);
}
.looks li {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    font-size: clamp(1rem, .95rem + .5vw, 1.375rem);
    font-stretch: 112%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.018em;
}
.looks li span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; color: var(--fg-muted); }

/* Klappbares Bewerbungsformular. Zugeklappt bleibt die Kampagnen-
   Sektion kompakt; die Zeile selbst ist der Handlungsaufruf.
   Umgesetzt mit <details>, also ohne JavaScript bedienbar.        */
.apply {
    margin-top: clamp(2rem, 4vw, 3rem);
    border: 1px solid transparent;
}
/* Aufgeklappt rahmt der Rand das Formular */
.apply[open] { border-color: var(--border); background: rgba(255,255,255,.02); }

/* Zugeklappt ist die Zeile der Primärbutton: gefüllte Fläche,
   gleiche Gegenfarben-Bewegung wie .btn — damit unmissverständlich
   erkennbar ist, dass man sie drücken kann.                      */
.apply__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 72px;
    padding: clamp(1.125rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
    cursor: pointer;
    list-style: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--fg);
    color: var(--bg);
    border: 1px solid var(--fg);
    transition: color var(--dur) var(--ease), background .35s var(--ease);
}
.apply__summary::-webkit-details-marker { display: none; }
.apply__summary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--bg);
    transform: translateY(100%);
    transition: transform .5s var(--ease);
}
.apply__summary:hover::before,
.apply__summary:focus-visible::before { transform: translateY(0); }
.apply__summary:hover, .apply__summary:focus-visible { color: var(--fg); }

/* Aufgeklappt tritt die Zeile zurück — jetzt zählt das Formular */
.apply[open] .apply__summary {
    background: transparent;
    color: var(--fg);
    border-color: transparent;
    border-bottom: 1px solid var(--border);
}
.apply[open] .apply__summary::before { display: none; }
.apply[open] .apply__summary:hover { background: rgba(255,255,255,.04); }

.apply__title {
    font-size: clamp(1.25rem, 1.05rem + .9vw, 1.875rem);
    font-stretch: 112%;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.022em;
    text-transform: uppercase;
}
.apply__meta { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.apply__hint {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: inherit;
    opacity: .62;
}
@media (max-width: 480px) { .apply__hint { display: none; } }

.apply[open] .apply__summary { border-bottom: 1px solid var(--border); }
.apply[open] .acc__icon::after { transform: rotate(0deg); }

.apply__body {
    padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem) clamp(2rem, 4vw, 2.75rem);
}
.apply[open] .apply__body { animation: accIn .45s var(--ease); }
@keyframes accIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 19. FORMULARE ---------- */
.form { display: grid; gap: 1.625rem; }
.form-grid { display: grid; gap: 1.625rem; }
@media (min-width: 700px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: flex; flex-direction: column; gap: .5rem; }
.field > label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.field input, .field select, .field textarea {
    width: 100%;
    min-height: 54px;
    padding: .875rem 1rem;
    /* Bewusst background-COLOR statt der Kurzschreibweise: "background"
       würde background-size und -position zurücksetzen, wovon der
       Auswahlpfeil unten abhängt.                                    */
    background-color: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 0;
    color: var(--fg);
    font-size: var(--fs-body);
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
    appearance: none;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field select {
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% - 1px),
                         calc(100% - 14px) calc(50% - 1px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.75rem;
}
.field select option { background: var(--black); color: var(--white); }
.section--light .field select option { background: var(--white); color: var(--black); }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover {
    background-color: var(--field-hover);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    background-color: var(--field-focus);
    border-color: var(--fg);
}
.field__hint { font-size: var(--fs-micro); color: var(--fg-muted); }

.check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: .875rem;
    align-items: start;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--fg-soft);
    cursor: pointer;
}
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fg); cursor: pointer; }

.form__status { padding: .875rem 1.125rem; border: 1px solid var(--border); font-size: var(--fs-small); }
.form__status[hidden] { display: none; }

/* Formulargruppen — vierzehn Felder am Stück lesen sich als Wand.
   Die Nummerierung greift die Sprache der Drehdisposition auf.    */
.fs {
    border: 0;
    padding: 0;
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.fs:first-of-type { padding-top: 0; border-top: 0; }
.fs__legend {
    padding: 0 0 1.25rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- 20. KONTAKT ---------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); } }

.contact-list { margin-top: 2.5rem; }
.contact-list__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .875rem 0;
    border-top: 1px solid var(--border);
}
.contact-list__key { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }

/* ---------- 21. WATERMARK ---------- */
.watermark {
    position: absolute;
    right: -6%; bottom: -12%;
    transform: translate3d(0, var(--py, 0px), 0);
    will-change: transform;
    width: clamp(300px, 44vw, 740px);
    opacity: .04;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.watermark img { width: 100%; height: auto; }
.watermark ~ .wrap { position: relative; z-index: 1; }

/* ---------- 22. FOOTER ---------- */
.footer {
    background: var(--black);
    color: var(--white);
    border-top: 1px solid var(--border-dark);
    padding: clamp(3.5rem, 8vw, 6rem) 0 2.25rem;
}
.footer__top { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 860px) {
    .footer__top {
        /* Vorher "auto auto" — die Spalten klebten am rechten Rand und
           in der Mitte blieb eine tote Fläche.                       */
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}
.footer__logo { width: clamp(140px, 18vw, 180px); height: auto; }
.footer__claim { margin-top: 1.5rem; font-size: var(--fs-small); line-height: 1.65; color: var(--gray); max-width: 32ch; }
.footer__col-title { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); margin-bottom: 1.125rem; }
.footer__list { display: grid; gap: .5rem; }
.footer__list a { font-size: var(--fs-small); color: var(--light-gray); transition: color .3s var(--ease); }
.footer__list a:hover { color: var(--white); }
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.75rem;
    /* Platz für den festen Nach-oben-Knopf neben den rechtlichen Links. */
    padding-right: 4.25rem;
    border-top: 1px solid var(--border-dark);
    font-size: var(--fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__legal a:hover { color: var(--white); }

/* ---------- ZURÜCK NACH OBEN ----------
   Erscheint erst nach einer Bildschirmhöhe. Bewegt wird nur über
   transform und opacity, damit beim Ein- und Ausblenden kein Layout
   neu berechnet wird.                                             */
.totop {
    position: fixed;
    right: clamp(1rem, 3vw, 2.25rem);
    bottom: clamp(1rem, 3vw, 2.25rem);
    z-index: 90;

    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;

    /* Deckend dunkel, damit der Knopf auch über der weißen Preis-
       Sektion trägt. Halbdurchsichtig wurde er dort zum grauen Kasten. */
    background: rgba(10,10,10,.92);
    border: 1px solid rgba(255,255,255,.3);
    color: var(--white);
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .4s var(--ease), transform .4s var(--ease),
                visibility .4s, background .4s var(--ease), color .4s var(--ease),
                border-color .4s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
    .totop { backdrop-filter: blur(14px) saturate(140%); }
}
.totop.is-sichtbar { opacity: 1; visibility: visible; transform: none; }

.totop svg { width: 20px; height: 20px; }

/* Beim Überfahren dreht sich das Verhältnis um. Der dunkle Rand bleibt,
   sonst wäre der Knopf über der weißen Sektion unsichtbar.          */
.totop:hover,
.totop:focus-visible {
    background: var(--white);
    color: var(--black);
    border-color: rgba(0,0,0,.85);
}

/* Mobil bleibt der Knopf im Footer und verdeckt keine Inhalte. */
@media (max-width: 719px) {
    .footer__bottom { padding-right: 0; }
    .totop {
        position: static;
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        margin-left: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* ---------- 23. REVEAL ----------
   Bewusst nur an wenigen Stellen, nicht auf jedem Block.       */
.reveal.is-reveal-ready {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-reveal-ready.is-in { opacity: 1; transform: none; }

/* ---------- 24. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal.is-reveal-ready { opacity: 1; transform: none; }
    .work:hover .work__media img { transform: none; }
    .channel:hover { padding-left: 0; }
    .statement--reveal.is-reveal-ready span { opacity: 1; transform: none; }
    .btn:not(:disabled):active { transform: none; }
    .nav__dot, .menu__dot { animation: none; }
    .totop { transition: opacity .001ms, visibility .001ms; transform: none; }
    .hero__stage img, .band__mark, .watermark { --py: 0px !important; }
    .hero__media video, .hero__media img { transition: none; }
}

/* ---------- 25. LOGO-SCHUTZ ----------
   Das DV-Logo darf unter keinen Umständen verzerrt oder gestreckt
   werden. Diese Regel steht bewusst am Ende der Datei und ist über
   den doppelten Attributselektor spezifischer als jede Komponenten-
   regel darüber. Damit bleibt jedes Logo formattreu, egal in welchen
   Container es später gesetzt wird.
   Sichtbar wird das Problem sonst nur, wenn width auf dem <picture>
   sitzt, das height-Attribut aber auf dem <img> stehen bleibt.       */
img[src*="assets/logos/"][src],
img[srcset*="assets/logos/"][srcset] {
    height: auto;
    object-fit: contain;
}

/* ---------- 26. PRINT ---------- */
@media print {
    .header, .menu, .hero__media, .hero__stage, .hero__meta, .watermark, .band__mark { display: none !important; }
    body::after { display: none !important; }
    body { background: #fff; color: #000; }
    .section, .band { --bg: #fff; --fg: #000; --fg-soft: #333; --border: rgba(0,0,0,.2); background: #fff; color: #000; }
}

/* Kompakter Paketvergleich: Unterschiede oben, gemeinsamer Umfang darunter. */
.plan__highlights li { font-weight: 700; font-size: var(--fs-lead); }
.plan__included { font-size: var(--fs-small); margin-bottom: 1.25rem; }
.plans-common { margin-top: 2rem; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--border); }
.plans-common__list { display: grid; gap: .75rem 2rem; margin-top: 1.5rem; }
.plans-common__list li { padding-left: 1rem; position: relative; font-size: var(--fs-small); }
.plans-common__list li::before { content: '–'; position: absolute; left: 0; }
@media (min-width: 700px) { .plans-common__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plans-common__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Social-Profilnamen in Kontakt und Footer. */
.social-profile { display: inline-flex; align-items: center; gap: .625rem; font-size: var(--fs-small); }
.social-profile__icon { width: 20px; height: 20px; flex: 0 0 20px; }
.footer__list .social-profile { color: var(--light-gray); }

/* Local Archivo: no external font requests. License: assets/fonts/OFL.txt. */
@font-face {
    font-family: 'Archivo';
    src: url('../assets/fonts/archivo-variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

/* Legal pages share the site's type and spacing, with a readable text column. */
.legal-main { padding-top: calc(var(--header-h) + 4rem); }
.legal-intro { padding-bottom: 3rem; border-bottom: 1px solid var(--border); }
.legal-intro h1 { font-size: clamp(2.25rem, 6vw, 5.5rem); line-height: 1.03; letter-spacing: -.045em; font-weight: 650; }
.legal-subtitle { margin-top: 1.5rem; color: var(--fg-soft); font-size: var(--fs-lead); }
.legal-layout { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr); gap: 4rem; padding-top: 3rem; }
.legal-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.legal-nav a { color: var(--fg-soft); padding: .35rem 0; }
.legal-nav a[aria-current] { color: var(--white); border-bottom: 1px solid currentColor; }
.legal-nav span { margin-top: 1rem; font-size: var(--fs-small); color: var(--fg-soft); }
.legal-copy { max-width: 70ch; min-width: 0; overflow-wrap: anywhere; }
.legal-copy section + section { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.legal-copy h2 { font-size: var(--fs-h3); line-height: 1.3; margin-bottom: 1rem; }
.legal-copy p { color: var(--fg-soft); line-height: 1.8; }
.legal-copy p + p { margin-top: 1rem; }
.legal-copy a { text-decoration: underline; text-underline-offset: .2em; }
.legal-notice { border: 1px solid var(--field-line); padding: 1.25rem; margin-bottom: 2.5rem; }
.legal-missing { text-decoration: underline dotted; text-underline-offset: .3em; }
.form__privacy { font-size: var(--fs-small); }
@media (max-width: 719px) {
    .legal-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .legal-intro { padding-bottom: 2rem; }
    .legal-page .header__inner { gap: .75rem; }
    .legal-page .brand__logo { width: 180px; max-width: 45vw; }
    .legal-page .header .btn {
        flex-shrink: 0;
        padding-inline: .75rem;
        white-space: nowrap;
    }
}