/* =========================================================================
   Julian Bubeck — Website
   Umsetzung des verbindlichen visuellen Styleguides (Stand 15.08.2026).
   Eine Schriftfamilie (Inter), zwei Tonwertlagen, Akzentflaeche mit
   organischer Ausfransung, Hierarchie ueber Gewicht und Sperrung.
   ========================================================================= */

/* Zwei Schriften, mehr nicht. Tanker traegt die Ueberschriften, Excon alles
   uebrige — Fliesstext, Bildunterschriften, Versal-Label.

   Excon liegt als **variable Schrift** bei, nicht als Einzelschnitte: eine
   Datei mit 66 kB deckt den ganzen Bereich 100–900 ab. Vier Einzelschnitte
   (Light, Medium, Bold, Black) waeren zusammen 126 kB und koennten weniger.

   Anders als bei Tanker gibt es hier also echte Gewichte, und die tragen die
   Hierarchie:

     300  Fliesstext und Lead — leicht, wie in den Vorlagen
     500  Versal-Label, Kicker, Sprungmarken
     700  Auszeichnung: Werktitel, Jahreszahlen, Knopf, Wortmarke

   900 ist da, wird aber nirgends gebraucht: die Display-Ebene traegt Tanker.
   Wer mehr Druck will, dreht eine der Zahlen hoch — die Datei kann es. */
@font-face { font-family: Excon; font-style: normal; font-weight: 100 900;
  src: url("fonts/excon.ttf") format("truetype"); font-display: swap; }

/* Tanker (Fontshare, Indian Type Foundry) — fette Display-Schrift, nur fuer
   den Titel der Kopfbuehne. Es gibt genau einen Schnitt: Familie "Tanker",
   Stil "Regular", usWeightClass 400. Eine Schnittfassung "Bolt" existiert
   nicht; Tanker ist von Haus aus fett, deshalb nie zusaetzlich fetten —
   `font-weight` bleibt 400, sonst rechnet der Browser eine kuenstliche
   Fettung darueber und die Konturen verschmieren.

   Liegt als OTF vor, nicht als WOFF2: auf diesem Rechner gibt es weder
   fontTools noch brotli noch woff2_compress. 41 kB roh, ueber die Leitung
   komprimiert Cloudflare das. Wer die Werkzeuge hat, sollte subsetten
   (nur Versalien werden gebraucht) und in WOFF2 wandeln — das duerfte auf
   deutlich unter 10 kB fallen. */
@font-face { font-family: Tanker; font-style: normal; font-weight: 400;
  src: url("fonts/tanker.otf") format("opentype"); font-display: swap; }

/* ------------------------------------------------------------------ Farben

   Grundlage sind vier Vorlagen (Refero) und der Fluid-Art-Film aus
   Job/Style/Colours. Die Vorlagen teilen sich vier Grundsaetze, die hier
   uebernommen sind: kein reines Weiss und kein reines Schwarz als Grund,
   genau eine Handlungsfarbe, Haarlinien statt Flaechen zur Trennung,
   keine Schatten.

     hell   OFF+BRAND (#e5e4e0 Pergament) und Creative Giants (#fffef7
            Knochenweiss) — warmes Papier, Tinte, Aschelinie.
     dunkel ORYZO (#100904 warmes Dunkel) und Dala (#000000 Void) — auf die
            Vorlage des eigenen Films gezogen, der nicht braun, sondern
            indigo-schwarz ist.

   Die Sekundaerfarbe ist aus dem Film gemessen, nicht gewaehlt: Median des
   Bildes #27234B, kaeltester Bereich #2A6ECB. Daraus --akzent-2.

   Gemessene Kontraste auf --papier (WCAG, 4,5:1 fuer Fliesstext):

     hell    text-1 17,8:1 · text-2 8,8:1 · text-3 4,8:1 · akzent-1 4,9:1
     dunkel  text-1 17,5:1 · text-2 9,2:1 · text-3 5,5:1 · akzent-1 7,0:1
   ------------------------------------------------------------------------ */

:root {
  --papier:     #FBFAF5;   /* warmes Papier, nie #FFFFFF */
  --text-1:     #14130F;
  --text-2:     #4A4842;
  --text-3:     #706C61;
  --linie:      #DCD9D0;   /* Asche, nur als Haarlinie */
  --akzent-1:   #C0450D;   /* Handlungsfarbe: Knopf, Kicker, aktive Marke */
  --akzent-2:   #2C4293;   /* Indigo aus dem Film: Jahreszahlen, Ruhiges */
  --knopf-schrift: #FFFFFF;
  --kante:      url("kante_spine_hell.webp");
  --kante-band: url("kante_band_hell.webp");
  --flaeche:    #EFEDE6;   /* Pergament, zweite Flaeche */
  --schema:     light;
}

html[data-theme="dunkel"] {
  --papier:     #0A0810;
  --text-1:     #F3F0E8;   /* warme Creme, kein Weiss */
  --text-2:     #B4B0A6;
  --text-3:     #8A867C;
  --linie:      #26222F;
  --akzent-1:   #FF6A34;
  --akzent-2:   #6E8FE0;
  --knopf-schrift: #12100A;   /* Tinte auf Ember, nicht Weiss: 6,7:1 statt 2,9:1 */
  --kante:      url("kante_spine_dunkel.webp");
  --kante-band: url("kante_band_dunkel.webp");
  --flaeche:    #16131F;
  --schema:     dark;
}

/* ------------------------------------------------------- Mass und Rundung

   Rundung nach dem gemeinsamen Nenner der Vorlagen: Bild und Karte scharf
   (0), alles Bedienbare vollrund. Creative Giants 1440px, ORYZO 36px, Dala
   Pille — alle drei meinen dasselbe. Dazwischen gibt es nichts.

   Schatten kommen nicht vor. Alle vier Vorlagen sagen das ausdruecklich;
   Tiefe entsteht ueber Flaechenwechsel und Weissraum. */
:root {
  --rund-bild:  0;
  --rund-knopf: 999px;
  --rund-feld:  0;

  /* Typografie. Vorlagenwerte: Display 84–113px, Fliesstext 15–18px,
     Label 11–12px. Negative Sperrung ab Ueberschriftgroesse (-0.03 bis
     -0.04em), leichte positive Sperrung nur an den Versal-Labeln. */
  --sperr-display: -.032em;
  --sperr-label:   .08em;
  --schrift-label: clamp(.65rem, .8vw, .74rem);
}

/* Geometrie. Verhaeltnis 27 zu 210 aus dem Styleguide, rund 13 Prozent. */
:root {
  --spine:  clamp(96px, 13vw, 208px);
  --luft:   clamp(20px, 2.4vw, 40px);   /* Luft zwischen Ausfransung und Satz */
  --label:  clamp(104px, 11vw, 148px);  /* Labelspalte, entspricht 32 mm */
  --spalte: clamp(16px, 1.8vw, 26px);   /* Spaltenabstand, entspricht 6 mm */
  --satz:   1080px;
}

/* ------------------------------------------------------------------- Basis */

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

html {
  color-scheme: var(--schema);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text-1);
  font-family: Excon, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(16px, .55vw + 14.2px, 18px);
  line-height: 1.5;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

/* --------------------------------------------------------- Akzentflaeche */

/* Die Flaeche steht fest, der Satz laeuft daran vorbei. Sie ist nie
   beschnitten und traegt nie Text. */
.kante {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--spine);
  background-image: var(--kante);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* ---------------------------------------------------------------- Gerüst */

.huelle {
  position: relative;
  z-index: 2;   /* über Ebenenraum (0) und fester Akzentfläche (1) */
  padding-left: calc(var(--spine) + var(--luft));
  padding-right: clamp(20px, 5vw, 72px);
}

.satz { max-width: var(--satz); margin: 0 auto; }

/* Zweispaltiges Raster: Labelspalte links, Inhalt rechts. */
.raster {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  gap: var(--spalte);
  align-items: start;
}

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

/* Display. Alle vier Vorlagen fuehren die Wortmarke gross, leicht und eng:
   Creative Giants 84px/300, Dala 113px/400 bei -.04em, OFF+BRAND 103px/400
   mit Zeilenhoehe .8. Inter liegt hier nur ab 400 vor, also 400 — das ist
   ohnehin Dalas Vorgabe, Ueberschriften nie fett. */
.name {
  margin: 0;
  font-size: clamp(2.2rem, 6.2vw, 4.4rem);
  font-weight: 400;
  letter-spacing: var(--sperr-display);
  text-transform: uppercase;
  line-height: .96;
  text-indent: 0;
}

.rolle {
  margin: 1.15rem 0 0;
  color: var(--akzent-1);
  font-size: var(--schrift-label);
  font-weight: 500;
  letter-spacing: var(--sperr-label);
  text-transform: uppercase;
}

.label {
  margin: 0;
  padding-top: .34em;
  color: var(--text-3);
  font-size: var(--schrift-label);
  font-weight: 500;
  letter-spacing: var(--sperr-label);
  text-transform: uppercase;
}

p { margin: 0 0 .85em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--akzent-1); }

/* Werkverweise: Titel, die auf den Stream fuehren.

   Sie sollen aussehen wie das, was sie sind — ein Werktitel —, nicht wie ein
   Verweis. Also kein Unterstrich und keine eigene Farbe. Dass man sie
   anfassen kann, zeigt sich beim Zeigen (Handlungsfarbe) und beim Tabben
   (das globale :focus-visible greift).

   Der Preis dafuer steht hier, damit ihn niemand uebersieht: **auf einem
   Telefon gibt es kein Zeigen.** Dort ist der Verweis nicht zu erkennen, man
   findet ihn nur durch Ausprobieren. Wer das aendern will, setzt hier ein
   Zeichen dahinter — kein neues Bauteil noetig. */
.werk { text-decoration: none; }
.werk:hover { color: var(--akzent-1); }

/* Das Abspielzeichen hinter dem Werktitel.

   Es loest das Problem, das der reine Verweis hatte: auf einem Telefon gibt es
   kein Zeigen, dort war nicht zu erkennen, dass der Titel anfassbar ist. Ein
   Abspieldreieck sagt das ohne ein Wort und ohne wie ein Verweis auszusehen —
   auf einer Kameraseite ist es ohnehin das vertrauteste Zeichen ueberhaupt.

   Es faerbt sich mit `currentColor`, laeuft also bei jedem Farbwechsel des
   Titels mit. Der Ring steht zurueck und tritt beim Zeigen nach vorn; das
   Dreieck steht immer.

   **Groesse und Farben stehen zusaetzlich als Attribute im Markup.** Ohne sie
   ist ein SVG ohne CSS rund dreihundert Bildpunkte gross und sein Kreis
   schwarz gefuellt — ein Klecks, der die Karte auseinanderzieht. Genau das
   war zu sehen, als ein Browser altes CSS aus dem Zwischenspeicher nahm.
   Praesentationsattribute stehen in der Rangfolge ganz unten, die Regeln hier
   gewinnen also weiterhin; sie sind nur der Boden, auf den das Zeichen faellt,
   wenn das Stylesheet fehlt. */
.werk__spiel {
  width: .52em;
  height: .52em;
  margin-left: .34em;
  /* Auf Versalien zaehlt die Mitte der Versalhoehe, nicht die Grundlinie.
     Das Zeichen sitzt auf der Grundlinie, seine Mitte laege damit rund ein
     Zehntel Geviert zu tief — genau so viel hebt es der Versatz an. */
  vertical-align: baseline;
  transform: translateY(-.10em);
  overflow: visible;
}
.werk__spiel circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  opacity: .5;
  transition: opacity .2s ease;
}
.werk__spiel path { fill: currentColor; }
.werk:hover .werk__spiel circle { opacity: 1; }

/* Der Filmografie-Kicker steht schon in der Handlungsfarbe; ein Farbwechsel
   beim Zeigen bliebe dort unsichtbar. Deshalb dort ein Unterstrich. */
.kicker .werk:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--akzent-1); outline-offset: 3px; border-radius: 2px; }

/* -------------------------------------------------------------- Sektionen */

.kopf { padding: clamp(72px, 13vh, 152px) 0 clamp(40px, 6vh, 76px); }

/* Trennung durch Haarlinien, nicht durch Weissraum allein. */
.sektion {
  padding: clamp(38px, 5.6vh, 66px) 0;
  border-top: 1px solid var(--linie);
}

.sektion > .raster > div > h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .01em;
}

.jahr {
  color: var(--akzent-2);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}

.titel { font-weight: 700; }

.kachel {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-bild);
}
.kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- Umschalter */

/* Die feste Lage traegt die Zeile, nicht der einzelne Knopf. Sonst muesste
   jeder Knopf die Breite des anderen kennen, um daneben zu passen. */
.schalterzeile {
  position: fixed;
  top: clamp(14px, 2.4vh, 26px);
  right: clamp(16px, 3.4vw, 40px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 10px);
}

.umschalter {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em .95em;
  background: var(--papier);
  color: var(--text-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund-knopf);
  font: inherit;
  font-size: var(--schrift-label);
  font-weight: 500;
  letter-spacing: var(--sperr-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.umschalter:hover { color: var(--akzent-1); border-color: var(--akzent-1); }
.umschalter .punkt {
  width: .5em; height: .5em; border-radius: 50%;
  background: var(--akzent-1);
}

/* Sprachwahl. Beide Kuerzel stehen da, die geltende Fassung traegt die
   Textfarbe, die andere bleibt zurueck. Beim Zeigen leuchtet die andere in
   der Handlungsfarbe: sie ist es, die der Klick holt. */
.sprachwahl { gap: .3em; }
.sprachwahl__wahl,
.sprachwahl__strich { transition: color .2s ease; }
.sprachwahl__wahl { color: var(--text-3); }
.sprachwahl__strich { color: var(--linie); }
.sprachwahl:hover .sprachwahl__wahl { color: var(--akzent-1); }
html[data-sprache="de"] .sprachwahl__wahl[data-wahl="de"],
html[data-sprache="en"] .sprachwahl__wahl[data-wahl="en"] { color: var(--text-1); }

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

.fuss {
  border-top: 1px solid var(--linie);
  padding: clamp(28px, 4vh, 44px) 0 clamp(34px, 5vh, 56px);
  color: var(--text-3);
  font-size: var(--schrift-label);
  font-weight: 500;
  letter-spacing: var(--sperr-label);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  justify-content: space-between;
}
.fuss a { text-decoration: none; }

/* Sprungmarke fuer Tastatur und Screenreader */
.skip {
  position: absolute; left: -9999px;
  background: var(--papier); color: var(--text-1);
  padding: .7em 1.1em; border: 1px solid var(--akzent-1); z-index: 9;
}
.skip:focus { left: var(--luft); top: var(--luft); }

/* ----------------------------------------------------------------- Schmal */

@media (max-width: 720px) {
  /* Flaeche wandert an die Oberkante, Ausfransung zeigt in den Textbereich. */
  .kante {
    inset: 0 0 auto 0;
    width: 100%;
    height: clamp(132px, 26vw, 200px);
    background-image: var(--kante-band);
    background-position: center top;
  }
  .huelle { padding-left: clamp(20px, 6vw, 34px); padding-right: clamp(20px, 6vw, 34px); }
  .kopf { padding-top: clamp(148px, 30vw, 226px); }

  .raster { grid-template-columns: 1fr; gap: .55rem; }
  .label { padding-top: 0; }
  .schalterzeile { top: auto; bottom: clamp(14px, 3vh, 22px); right: clamp(16px, 5vw, 24px); }
}

@media print {
  .kante, .schalterzeile { display: none; }
  .huelle { padding-left: 0; }
  body { background: #fff; color: #000; }
}