@charset "UTF-8";

/*
 * LA CASTING — Nachbau der Cargo-Seite la-casting.de
 *
 * Eine Datei, kein Build-Schritt, kein Framework, kein CDN, kein
 * Schriftdienst — dieselbe Haltung wie bei der Schwesterseite in
 * `public/` und aus demselben Grund: Strato liefert statische Dateien
 * und PHP, und jede fremde Anfrage traegt die IP-Adresse einer
 * Besucherin zu einem Dritten.
 *
 * ==========================================================================
 * WAS VOM ALTEN ENTWURF BLEIBT
 * ==========================================================================
 *
 * Die rote Outline-Wortmarke, die schwarze Buehne mit dem gelben Absatz,
 * das weisse Papier darunter, die kleingeschriebenen Projekttitel und die
 * graue Fusszeile. Der Aufbau jeder Projektseite ist derselbe: Titel,
 * Regie, Produktion, ein Standbild, das auf den Film zeigt.
 *
 * ==========================================================================
 * WAS SICH AENDERT, UND WARUM
 * ==========================================================================
 *
 * 1. DAS GRUEN IST WEG. Die Navigation stand in rgb(117, 218, 102) auf
 *    Weiss — 1,9:1. Das ist keine Farbe, das ist ein Hinweis darauf, wo
 *    frueher einmal Text war. Die Akzentfarbe ist jetzt das Rot der
 *    Wortmarke (#dc0005, 5,3:1 auf Papier): dieselbe Farbe, die die Seite
 *    ohnehin schon im Kopf traegt. Damit hat die Seite drei Farben statt
 *    fuenf — Rot, Gelb, Tinte — und das Rot sagt ueberall dasselbe:
 *    "hier geht es weiter".
 *
 * 2. DAS GELB BLEIBT, ABER AUF GRUND. Im Original steht der gelbe
 *    Absatz direkt auf dem laufenden Standbild; ueber einer hellen
 *    Stelle verschwindet er. Hier liegt ein Verlauf dazwischen, links
 *    dicht, rechts offen — das Bild bleibt sichtbar, der Text wird
 *    lesbar (12:1 gegen die abgedunkelte Stelle).
 *
 * 3. DIE FUSSZEILE WIRD LESBAR. #808080 auf #e8e8e8 war 3,2:1. Jetzt
 *    #4a4a4a auf #f2f1ef, 8,1:1, bei gleichem ruhigem Eindruck.
 *
 * 4. EINE SPALTENREGEL STATT ZEHN. Cargo hatte pro Zeile ein eigenes
 *    Raster (x12, x11, x10 gemischt). Hier gibt es ein Raster: zwei
 *    Spalten, und was im Original ueber die volle Breite lief, laeuft
 *    weiter ueber die volle Breite (`.projekt--breit`).
 *
 * ==========================================================================
 * DIE MASSE SIND GEMESSEN, NICHT GESCHAETZT
 * ==========================================================================
 *
 * Alles andere steht so da wie auf der alten Seite. Die Zahlen unten
 * sind bei 1440 px aus dem Original ausgelesen (getBoundingClientRect)
 * und hier nachgestellt:
 *
 *   Wortmarke        820 px breit  = 57vw
 *   Inhaltsspalte   1166 px        = 90 % der Breite
 *   Buehne           426 px hoch   (Inhalt plus Polster, keine Mindesthoehe)
 *   gelber Absatz    404 px breit, 14,3 px, fett
 *   Projekttitel     25,9 px, fett, KURSIV
 *   Fliesstext       14,3 px
 *   Navigation       15,6 px
 *   Fusszeile        13,0 px
 *   Spaltenabstand   12 px
 *
 * Cargo rechnete mit einer Wurzelgroesse von 12,96 px; hier steht 16 px
 * und die Groessen stehen als Bruch davon. Wer eine davon aendert,
 * aendert den Vergleich mit dem Original - dann bitte neu messen.
 *
 * Reihenfolge: Schrift, Grundwerte, Geruest, Kopf, Buehne, Projekte,
 * Fliesstext, Fusszeile, Telefon, Bewegung, Druck.
 */

/* ---------------------------------------------------------------- Schrift */

/*
 * Space Grotesk, variabel 300–700, aus assets/schriften/ und nicht von
 * Google. Zwei Dateien, 41 KB zusammen. unicode-range trennt die beiden
 * Zeichenvorraete, damit latin-ext nur laedt, wenn ein Titel es braucht
 * ("viererkäffchen", "die expositionsmaßnahme nach verbier").
 */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("schriften/space-grotesk-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("schriften/space-grotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ------------------------------------------------------------ Grundwerte */

:root {
    /* Farben */
    --papier: #ffffff;        /* Grund. Weiss, weil die Wortmarke ein Bild
                                 mit weissem Hintergrund ist — jeder warme
                                 Ton zoege ihr einen Kasten um die Ohren. */
    --tinte: #141414;
    --tinte-leise: #595959;
    --rot: #dc0005;           /* aus der Wortmarke gemessen */
    /*
     * Das Gruen der Navigation, aus der Seite gemessen (U84): #8ed874.
     *
     * Auf Weiss sind das 1,72:1. Fuer Text verlangt WCAG AA 4,5:1, und
     * dieses Blatt hat genau so einen Fall schon einmal repariert (siehe
     * oben, Punkt 3). Es steht hier trotzdem, weil es die Farbe der
     * Marke ist und la-casting.de sie heute schon traegt - angeglichen
     * wird an das Bestehende, nicht neu entschieden.
     *
     * Was dagegen NICHT allein an der Farbe haengt: wo man steht. Die
     * aktuelle Seite ist zusaetzlich unterstrichen und traegt das tiefere
     * Gruen (4,6:1) - wer die beiden Gruentoene nicht unterscheiden kann,
     * sieht die Linie.
     */
    --gruen: #8ed874;
    --gruen-tief: #3f7d2c;
    --rot-tief: #a80004;      /* fuer :hover, 7,6:1 */
    --buehne: #0b0b0b;
    --gelb: #ffdd00;          /* nur auf der Buehne, nie auf Papier */
    --fuss: #f2f1ef;
    --fuss-tinte: #4a4a4a;
    --linie: #e3e1dd;

    /* Mass */
    --spalte: 1400px;         /* Deckel; darunter zaehlen die 90 % */
    --radius: 2px;

    /* Schriftgroessen, aus dem Original gemessen (siehe oben) */
    --text: 0.89rem;          /* 14,3 px */
    --titel: 1.62rem;         /* 25,9 px */
    --navigation: 0.97rem;    /* 15,6 px */
    --fusstext: 0.81rem;      /* 13,0 px */
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    font-size: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--rot);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover { color: var(--rot-tief); }

:focus-visible {
    outline: 2px solid var(--rot);
    outline-offset: 3px;
}

/*
 * Der Sprung in den Inhalt. Sichtbar erst, wenn er gebraucht wird —
 * also sobald er den Fokus hat.
 */
.sprung {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tinte);
    color: var(--papier);
    padding: 0.6rem 1rem;
    z-index: 10;
}

.sprung:focus {
    left: 0;
    color: var(--papier);
}

/* --------------------------------------------------------------- Geruest */

/*
 * Die Inhaltsspalte. Im Original sind es 90 % der Fensterbreite, nicht
 * eine feste Zahl - bei 1440 px also 1296, und der Text beginnt bei
 * x = 65. Genau das steht hier; der Deckel greift erst auf einem sehr
 * breiten Schirm, wo 90 % niemand mehr lesen kann.
 */
.bahn {
    width: min(90%, var(--spalte));
    margin-inline: auto;
}

main { display: block; }

/* ------------------------------------------------------------------ Kopf */

.kopf {
    padding-top: 1.6rem;        /* im Original 26 px ueber der Wortmarke */
    padding-bottom: 0;
}

/*
 * Die Wortmarke ist das einzige Bild im Kopf und traegt den Namen der
 * Agentur — sie ist deshalb ein Link zur Startseite und hat ein alt.
 * Die Breite ist gedeckelt, damit sie auf einem breiten Schirm nicht
 * zum Plakat wird; im Original lief sie auf 2100 px aus.
 */
/*
 * 57vw - im Original 820 px bei 1440. Das ist gross, und das ist der
 * Auftritt der Seite: die Wortmarke IST die Startseite, alles andere
 * steht darunter. Der Deckel greift erst jenseits von 1750 px.
 */
.wortmarke {
    display: inline-block;
    width: min(57vw, 1000px);
}

.wortmarke img { width: 100%; }

/*
 * Navigation: Worte mit senkrechten Strichen dazwischen, wie im
 * Original ("Werbung | TV | Spielfilm | Über uns"). Der Strich steht
 * in CSS und nicht im Text - er trennt, er bedeutet nichts, und ein
 * Screenreader soll ihn nicht vorlesen.
 */
.navigation {
    margin-top: 1rem;
    padding-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.55rem;
    font-size: var(--navigation);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.navigation .strich {
    color: rgba(0, 0, 0, 0.3);
    font-weight: 400;
    user-select: none;
}

.navigation a {
    color: var(--gruen);
    text-decoration: none;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid transparent;
}

.navigation a:hover,
.navigation a:focus-visible { color: var(--gruen-tief); }

/*
 * Die aktuelle Seite ist UNTERSTRICHEN und traegt das tiefere Gruen: wer
 * die beiden Gruentoene nicht unterscheiden kann, sieht die Linie. Bis
 * U84 war sie rot - das stammte aus der Wortmarke und stand nun neben
 * gruenen Geschwistern.
 */
.navigation a[aria-current="page"] {
    color: var(--gruen-tief);
    border-bottom-color: var(--gruen-tief);
}

/* ---------------------------------------------------------------- Buehne */

/*
 * Die Startseite: neun Standbilder laufen im Wechsel, davor der gelbe
 * Absatz. Ohne JavaScript bleibt das erste Bild stehen — das ist kein
 * Ausfall, das ist dieselbe Seite mit einem Bild.
 */
/*
 * Keine Mindesthoehe: im Original ist die Buehne so hoch wie ihr Inhalt
 * plus Polster - bei 1440 px sind das 426 px, und die ganze Startseite
 * passt damit auf einen Schirm. Eine Mindesthoehe in vh haette sie auf
 * einem hohen Fenster aufgeblasen und die Fusszeile hinausgeschoben.
 */
.buehne {
    position: relative;
    isolation: isolate;
    background: var(--buehne);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.buehne__bilder {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.buehne__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}

.buehne__bild.ist-da { opacity: 1; }

/*
 * Der Verlauf. Links deckt er fast ganz, rechts gar nicht — der gelbe
 * Absatz steht links, das Gesicht im Bild meistens rechts.
 */
.buehne::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        100deg,
        rgba(8, 8, 8, 0.82) 0%,
        rgba(8, 8, 8, 0.78) 26%,
        rgba(8, 8, 8, 0.4) 58%,
        rgba(8, 8, 8, 0.1) 100%
    );
}

.buehne__text {
    padding-block: clamp(3rem, 7.5vw, 6.75rem);
    max-width: 25.25rem;          /* 404 px, wie gemessen */
    color: var(--gelb);
    font-weight: 700;             /* im Original ein <b> */
    font-size: var(--text);
    line-height: 1.55;
}

.buehne__text p { margin: 0 0 1.4em; }
.buehne__text p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Seiten */

.seite {
    padding-block: 1.25rem clamp(2.5rem, 6vw, 4rem);
}

/*
 * Die Projektseiten des Originals tragen KEINE Ueberschrift - nach der
 * Navigation kommt sofort der erste Film. Eine Seite ganz ohne h1 ist
 * aber fuer jemanden, der sie vorgelesen bekommt, eine Seite ohne
 * Namen. Also steht sie da und ist nur nicht zu sehen.
 */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Impressum und Datenschutz haben im Original eine sichtbare. */
.seite__titel {
    margin: 0 0 1.5rem;
    font-size: var(--titel);
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

/* ------------------------------------------------------------- Projekte */

/*
 * Zwei Spalten mit 12 px dazwischen - so eng wie im Original, wo die
 * beiden Standbilder einer Zeile 577 px breit sind und 1166 px
 * zusammen fuellen. Der Abstand nach unten ist groesser: dort trennt
 * er zwei Projekte, hier nur zwei Bilder desselben Blicks.
 */
.projekte {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 3rem) 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Was im Original ueber die ganze Zeile lief, laeuft es hier auch. */
.projekt--breit { grid-column: 1 / -1; }

/*
 * Kursiv und kleingeschrieben, wie auf der alten Seite. Die Titel sind
 * dort in "New Hero" gesetzt (einer Cargo-Schrift, die es hier nicht
 * gibt); Space Grotesk traegt denselben Satz in derselben Groesse.
 * Alle Projekte gleich gross - auch die ueber die volle Breite.
 */
.projekt__titel {
    margin: 0;
    font-size: var(--titel);
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/*
 * "Regie Jan Bonny", Etikett fett, Name daneben, je eine Zeile - genau
 * die Form des Originals. Es bleibt trotzdem eine Definitionsliste:
 * fuer Augen eine Zeile, fuer einen Screenreader ein Paar.
 */
.projekt__angaben {
    margin: 0.4rem 0 0;
    font-size: var(--text);
    line-height: 1.45;
}

.projekt__angaben dt,
.projekt__angaben dd { display: inline; margin: 0; }

.projekt__angaben dt { font-weight: 700; }

.projekt__angaben dt::after { content: " "; }

.projekt__angaben dd::after { content: "\A"; white-space: pre; }

/* Der Nebensatz in geschweiften Klammern aus dem Original. */
.projekt__hinweis {
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    color: var(--tinte-leise);
    border-left: 2px solid var(--rot);
    padding-left: 0.7rem;
}

.projekt__bild {
    display: block;
    position: relative;
    margin-top: 1.1rem;
    background: #ebe9e5;
    border-radius: var(--radius);
    overflow: hidden;
}

.projekt__bild img {
    width: 100%;
    transition: transform 0.6s ease, filter 0.4s ease;
}

/*
 * Nur das VERLINKTE Standbild reagiert. Wo der Film fehlt, ist das
 * Bild ein Bild - es unter dem Zeiger zucken zu lassen, waere ein
 * Versprechen, das kein Klick einloest.
 */
a.projekt__bild:hover img,
a.projekt__bild:focus-visible img {
    transform: scale(1.012);
    filter: saturate(1.06);
}

/*
 * Das Standbild zeigt auf einen Film, nicht auf eine Seite. Ohne
 * Abspielzeichen ist das geraten; mit ist es gesagt.
 */
.projekt__spiel {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.7rem 0.32rem 0.55rem;
    background: rgba(10, 10, 10, 0.72);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    backdrop-filter: blur(3px);
}

.projekt__bild:hover .projekt__spiel,
.projekt__bild:focus-visible .projekt__spiel { background: var(--rot); }

.projekt__spiel svg {
    width: 0.62rem;
    height: 0.62rem;
    fill: currentColor;
}

/* --------------------------------------------------------- Fliesstext */

/*
 * Ueber uns, Impressum, Datenschutz: eine Spalte, 62 Zeichen, sonst
 * nichts. Lange Rechtstexte lesen sich an keiner anderen Breite.
 */
.text {
    max-width: 62ch;
    font-size: var(--text);
}

.text h2 {
    margin: 2.4rem 0 0.6rem;
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.text h3 {
    margin: 1.8rem 0 0.4rem;
    font-size: 1.02rem;
    font-weight: 600;
}

.text h2:first-child,
.text h3:first-child { margin-top: 0; }

.text p { margin: 0 0 1.05em; }

.text ul {
    margin: 0 0 1.05em;
    padding-left: 1.15em;
}

.text li { margin-bottom: 0.3em; }

.text a { color: var(--rot); }

.text--eng { max-width: 46ch; }

/* ------------------------------------------------------------- Fusszeile */

.fuss {
    margin-top: clamp(3rem, 7vw, 5rem);
    background: var(--fuss);
    color: var(--fuss-tinte);
    border-top: 1px solid var(--linie);
    font-size: var(--fusstext);
}

/*
 * Zwei Spalten, zwei Zeilen: oben links der Absender, darunter die
 * Nummer und die Adresse, rechts daneben die beiden Rechtsverweise.
 * Genau so steht es im Original (dort als zwei Rasterzeilen mit je
 * zwei Spalten, die rechte obere leer).
 */
.fuss__raum {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 2.5rem;
    padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
}

.fuss__absender { grid-column: 1; grid-row: 1; }
.fuss__kontakt  { grid-column: 1; grid-row: 2; }
.fuss__recht    { grid-column: 2; grid-row: 2; }

/*
 * Auf der Startseite endet der Inhalt mit der Kante der Buehne.
 * Dahinter noch einen weissen Streifen zu setzen, hiesse ein Loch in
 * die Seite zu schneiden - die Fusszeile schliesst dort direkt an.
 */
main:has(.buehne) + .fuss { margin-top: 0; }

.fuss__name {
    color: var(--tinte);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.fuss p { margin: 0 0 0.25rem; }

.fuss a {
    color: var(--fuss-tinte);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.fuss a:hover {
    color: var(--rot);
    border-bottom-color: var(--rot);
}

/* --------------------------------------------------------------- Telefon */

@media (max-width: 760px) {
    /*
     * Auf dem Telefon darf die Wortmarke nicht 57vw bleiben: 57 % von
     * 375 px sind 214 px, und darin ist "LACASTING" nicht mehr zu
     * lesen. Hier nimmt sie fast die ganze Breite.
     */
    .wortmarke { width: 88vw; }

    .bahn { width: 90%; }

    .projekte { grid-template-columns: minmax(0, 1fr); }

    /*
     * Auf dem Telefon steht der Absatz ueber dem ganzen Bild, nicht
     * neben ihm - der seitliche Verlauf wuerde ihn auf halber Zeile
     * loslassen. Also deckt er hier gleichmaessig und etwas dichter.
     */
    .buehne::before {
        background: linear-gradient(
            180deg,
            rgba(8, 8, 8, 0.88) 0%,
            rgba(8, 8, 8, 0.82) 60%,
            rgba(8, 8, 8, 0.88) 100%
        );
    }

    .fuss__raum { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
    .fuss__absender,
    .fuss__kontakt,
    .fuss__recht { grid-column: 1; grid-row: auto; }
}

/* -------------------------------------------------------------- Bewegung */

/*
 * Wer Bewegung abbestellt hat, bekommt das erste Standbild und sonst
 * nichts. Die Diaschau haelt sich in `diaschau.js` an dieselbe Regel —
 * sie startet dann gar nicht erst.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ----------------------------------------------------------------- Druck */

@media print {
    .navigation,
    .buehne__bilder,
    .projekt__spiel { display: none; }

    .buehne { min-height: auto; background: none; }
    .buehne::before { display: none; }
    .buehne__text { color: var(--tinte); }

    body { font-size: 11pt; }

    a { color: inherit; }
}