/* ============================================================
   DRKNSD — Brand Layer
   Abgeleitet aus dem Referenzmaterial vom 11.08.2026
   (_source/Micrographics Moods).

   Leon: "Ist nicht alles geil, manches ist sloppy. Nimm nur die
   geilsten Sachen als Referenz." Uebernommen wurde deshalb NUR:

     1. Die Platte. Grosse ruhige Flaeche, Wortmarke laeuft ueber
        den Rand hinaus. Im Material salbei oder mint, hier
        schwarzweiss (Leon: "schwarz weiss nicht rot").
     2. Die Kopfzeile darueber, zwei Zeilen, mittig, gesperrt.
     3. Das Signet: Barcode, DRK/////NSD, Kapsel mit Projektnummer.
     4. Der Schachbrett-Anschnitt vor der Wortmarke.
     5. Die Micrographic-Bausteine: Venn-Ring, Raute mit
        Revisionsstand, Fadenkreuz-Kachel, Blitz, Punktreihe,
        Gefahrstreifen.
     6. Die Outline-Kapsel als Statusmarke.
     7. Der Sprueh-Zustand. Leon 11.08.: "Gespruehte Sachen sind
        auch geil muessen mit rein." Kante franst aus, drumherum
        koerniger Overspray. Filter stehen in brand.js.

   NICHT uebernommen (das ist der sloppy Teil): die vollstaendig
   verwaschenen Fassungen, in denen nur noch die Silhouette steht,
   und saemtliche Schreibfehler aus dem Material — "AI HANDCRAPED",
   "DONGER!", "PRUECT NO.", "EST 1975". Die Marke ist EST. 2026.
   Ebenfalls draussen: beide Farbfassungen des Materials, siehe
   die Farbnotiz unten.

   Die Schicht liegt ADDITIV ueber style.css und definiert keine
   bestehenden Klassen um. Abschaltbar mit ?nobrand=1.
   ============================================================ */

:root {
  /* KEINE Farbe. Leon am 11.08.2026 zu den Moodbildern: "schwarz
     weiss nicht rot". Das Material hat zwei farbige Fassungen —
     Salbei (#C1CCC7) und Neonrot (#E12B2A) — beide fallen damit
     raus. Aus der roten Fassung bleibt das Layout, aus der Salbei-
     Fassung die Platte; was dort leuchtet, ist hier weiss.
     Die Salbei-Fassung liegt als Schalter bereit, falls sie doch
     noch gewuenscht wird: ?sage=1 (siehe unten). */
  --plate-bg: #ededec;
  --plate-ink: #050505;
}

/* Die Platte ist der Gegenpol zur Seite: auf der dunklen Seite
   hell, auf der hellen Seite schwarz. In einem reinen Schwarzweiss-
   System ist das der einzige Weg, eine Flaeche zu haben, die in
   beiden Modi traegt — eine feste helle Platte waere auf der Bright
   Side ein weisser Kasten auf weissem Grund. */
/* Auf der hellen Seite ist die Platte seit 01.10.2026 KEIN schwarzer
   Kasten mehr. Der Gegenpol-Gedanke stimmt fuer sich, aber nicht in der
   Nachbarschaft, in der die Platte tatsaechlich steht: auf den
   Projektseiten liegt ueber ihr der Film, und dessen Flaeche ist in
   jedem Modus schwarz. Auf der hellen Seite standen damit zwei schwarze
   Bloecke uebereinander und der helle Modus hoerte unter der Kopfzeile
   einfach auf (Leon 01.10.2026: "im White Mode bei der Workseite ist
   irgendwie komisch mit diesen weissen Punkten ... dadurch, dass oben
   der Bereich immer schwarz ist, sollte dann das darunter auch schon
   weiss sein bei der hellen Seite und nicht schwarz").
   Die Platte bleibt trotzdem eine Platte: nicht das Weiss der Seite,
   sondern eine Spur davon abgesetzt, mit derselben gedruckten Kante und
   demselben Halbtonfeld in Schwarz. Der Wechsel schwarz/weiss, der im
   Dark Mode gefaellt, bleibt dort unveraendert (helle Platte auf
   schwarzer Seite). */
html.bright {
  --plate-bg: #f4f4f3;
  --plate-ink: #050505;
}

/* Salbei-Fassung aus dem Material, nur auf Anforderung. */
html.sage      { --plate-bg: #c3cec8; --plate-ink: #050505; }
html.sage.bright { --plate-bg: #c3cec8; --plate-ink: #050505; }

/* ============================================================
   1 — Die Platte
   Grundbaustein fuer alles Markentragende. Gegenpol zur Seite,
   oben und unten eine gedruckte Kante statt einer Linie.
   ============================================================ */
.plate {
  position: relative;
  background: var(--plate-bg);
  color: var(--plate-ink);
  overflow: hidden;
  padding: var(--gap-l) var(--pad) var(--gap-m);
}
/* Gedruckte Kante: ein feines Raster, das nach innen ausduennt.
   Ersetzt die Trennlinie, die es auf dieser Seite nicht gibt.
   Bewusst klein und schwach — bei 6px Raster und voller Deckung
   liest es sich als Streifenband und nicht als Druckkante. */
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(14px, 1.8vw, 26px);
  background-image: radial-gradient(var(--plate-ink) 34%, transparent 35%);
  background-size: 4px 4px;
  opacity: 0.7;
  pointer-events: none;
}
.plate::before { top: 0;    mask-image: linear-gradient(180deg, #000, transparent); -webkit-mask-image: linear-gradient(180deg, #000, transparent); }
.plate::after  { bottom: 0; mask-image: linear-gradient(0deg,   #000, transparent); -webkit-mask-image: linear-gradient(0deg,   #000, transparent); }

.plate-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ============================================================
   2 — Kopfzeile
   Zwei Zeilen, mittig, gesperrt, in der Hausschraege. Steht ueber
   der Wortmarke und benennt, was die Platte ist.
   ============================================================ */
/* Seit 14.09.2026 nur noch der Kuenstler, eine Zeile (Leon: "Adieu und
   darueber Rammstein"). Vorher zwei gestapelte Zeilen in 15 px ueber
   einem Titel von bis zu 250 px, das stand in keinem Verhaeltnis. */
.eyebrow {
  text-align: center;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(15px, 1.6vw, 24px);
  letter-spacing: 0.04em;
  line-height: 1;
}
.eyebrow span { display: block; }

/* ============================================================
   3 — Wortmarke auf der Platte
   Laeuft absichtlich ueber die Plattenbreite hinaus, wie im
   Material. Der Anschnitt macht die Groesse, nicht die Punktzahl.
   ============================================================ */
.plate-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Das Schachbrett steht dicht an der Wortmarke, im Material
     laeuft es fast ins D hinein. */
  gap: clamp(4px, 0.5vw, 10px);
  margin: clamp(10px, 1.6vw, 24px) 0 clamp(12px, 1.8vw, 26px);
  /* Der Ueberhang: die Zeile ist breiter als die Platte, das
     Schachbrett laeuft links aus dem Bild und das letzte D steht
     hart am rechten Rand. Der Anschnitt macht die Groesse, nicht
     die Punktzahl — so steht die Marke im ganzen Material. */
  width: 124%;
  margin-left: -12%;
}
.plate-mark .mark-word {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(64px, 18.5vw, 320px);
  letter-spacing: -0.05em;
  line-height: 0.8;
  white-space: nowrap;
}

/* Schachbrett-Anschnitt vor der Wortmarke, in der Schraege der
   Kursiven. Echtes Schachbrett per conic-gradient: zwei gekreuzte
   45-Grad-Verlaeufe ergeben Rauten, keine Quadrate — das war der
   erste Versuch und sah nach Karomuster aus. */
.chk {
  flex: 0 0 auto;
  width: clamp(38px, 9.5vw, 156px);
  height: clamp(30px, 7.4vw, 122px);
  background-image: conic-gradient(
    var(--plate-ink) 0 25%,
    transparent 0 50%,
    var(--plate-ink) 0 75%,
    transparent 0
  );
  background-size: 25% 33.34%;
  transform: skewX(-11deg);
}

/* Projekttitel auf der Platte. Er soll genauso angeschnitten
   stehen wie DRKNSD, aber die Titel sind unterschiedlich lang —
   deshalb kommt die Punktzahl aus der Zeichenzahl (--len setzt
   brand.js). Der Deckel bei 17vw haelt kurze Titel davon ab,
   ueber die Plattenhoehe hinauszuwachsen. */
.plate-mark .mark-fit {
  font-size: min(17vw, calc(118vw / var(--len, 6)));
}

/* Untertitel unter der Wortmarke, mittig, zwei Zeilen */
.plate-sub {
  text-align: center;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(12px, 1.25vw, 18px);
  letter-spacing: 0.03em;
  line-height: 1.32;
}
.plate-sub span { display: block; }

/* ============================================================
   4 — Signet
   Barcode, Kennung, Kapsel mit Projektnummer. Wiederkehrende
   Fussmarke, auf jeder Seite dieselbe.
   ============================================================ */
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  font-family: var(--mono);
  font-stretch: 75%;
  text-transform: uppercase;
  color: currentColor;
}
/* Der Barcode ist gezeichnet, kein Bild: unregelmaessige Striche
   aus drei uebereinandergelegten Rastern, damit kein Muster
   durchschlaegt. */
.stamp-code {
  height: 34px;
  background-image:
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 11px);
  background-size: 100% 100%;
}
.stamp-id {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* Die Kapsel: Rahmen mit halbrunden Enden. Einzige Rundung im
   ganzen System und nur hier erlaubt, sie kommt aus dem Material. */
.stamp-no {
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}

/* ============================================================
   5 — Micrographic-Bausteine
   Zeichnungen statt Bilder, damit sie in beiden Modi und in jeder
   Groesse sitzen. Alle erben die Textfarbe.
   ============================================================ */
.mg { display: inline-block; vertical-align: middle; color: currentColor; }
.mg svg { display: block; width: 100%; height: 100%; }
.mg-line { fill: none; stroke: currentColor; stroke-width: 4; }
.mg-fill { fill: currentColor; }

/* Feste Groessenstufen, damit die Bausteine ueber die Seiten
   hinweg gleich gross sind. */
.mg-s { width: 26px; height: 26px; }
/* Instagram in der Markenreihe der Kontaktseite (Leon 14.09.2026). Es
   ist das einzige Zeichen dort, das man anklicken kann, deshalb die
   runden Ecken des Originals und ein Hover wie an den Kontaktzeilen. */
.mg-insta { cursor: pointer; pointer-events: auto; transition: opacity var(--t-base) var(--ease); }
.mg-insta .mg-line { stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .mg-insta:hover { opacity: 0.6; }
}
.mg-m { width: 42px; height: 42px; }
.mg-l { width: 72px; height: 72px; }

/* Kontaktseite: das Instagram-Zeichen steht unten links allein, seit
   Ringe und Statusblock raus sind (01.10.2026, Leon: "dafuer einfach ein
   bisschen groesser dieses Instagram-Icon"). Es ist dort der einzige
   zweite Weg neben der Mailadresse und darf deshalb die Groesse eines
   Griffs haben, nicht die einer Fussnote. Die Stufe steht hier und
   nicht als neue Grundgroesse: ueberall sonst bleibt .mg-s bei 26.
   Die Regel ueberschreibt .mg-s, deshalb muss sie dahinter stehen. */
.contact-room .mg-row-solo .mg-insta { width: 44px; height: 44px; }
@media (max-width: 860px) {
  .contact-room .mg-row-solo .mg-insta { width: 38px; height: 38px; }
}

/* ============================================================
   Bewegung in den Zeichen (Leon 11.08.: "die anderen sachen bewegen
   sich zu wenig, da koennen viel mehr kleine spielerische logo
   animationen rein")

   Jede Gattung hat ihre eigene Bewegung und ihren eigenen Takt. Alle
   Laufzeiten sind Primzahl-nah gewaehlt (7,3 / 9,1 / 11,7 …), damit
   die Zeichen nie gemeinsam in denselben Punkt laufen — im Gleichtakt
   liest sich das als Ladebalken, versetzt als lebendige Tafel.
   Bewegt wird nur INNERHALB des Zeichens, die Kaesten stehen still:
   springende Kaesten wuerden die Zeilen daneben verschieben.
   ============================================================ */

/* Venn: die drei Ringe atmen nacheinander auf und ab */
@keyframes mgBreathe {
  0%, 72%, 100% { transform: scale(1); opacity: 0.85; }
  12%           { transform: scale(1.09); opacity: 1; }
}
.mg-k-venn circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: mgBreathe 7.3s var(--ease) infinite;
}
.mg-k-venn circle:nth-child(2) { animation-delay: -2.4s; }
.mg-k-venn circle:nth-child(3) { animation-delay: -4.8s; }

/* Raute: kippt langsam hin und her, der Revisionsstand bleibt lesbar
   (nur der Rahmen dreht, nicht der Text) */
@keyframes mgTilt {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(45deg); }
}
.mg-k-rhomb path {
  transform-box: fill-box;
  transform-origin: center;
  animation: mgTilt 11.7s var(--ease) infinite;
}

/* Fadenkreuz: der Pfeil laeuft, das Kreuz zuckt */
@keyframes mgScan {
  0%, 60%, 100% { transform: translateX(0); }
  70%           { transform: translateX(6px); }
  80%           { transform: translateX(-3px); }
}
.mg-k-xhair path, .mg-k-xhair line {
  transform-box: fill-box;
  transform-origin: center;
  animation: mgScan 9.1s steps(1, end) infinite;
}

/* Blitz und Warnzeichen: kurzes Aufleuchten, wie eine Kontrollleuchte */
@keyframes mgBlink {
  0%, 88%, 100% { opacity: 1; }
  91%           { opacity: 0.15; }
  94%           { opacity: 1; }
  96%           { opacity: 0.3; }
}
.mg-k-bolt   { animation: mgBlink 6.7s linear infinite; }
.mg-k-hazard { animation: mgBlink 8.3s linear infinite -3.1s; }

/* AI+ : das Plus dreht sich einmal durch und bleibt wieder stehen */
@keyframes mgPlusTurn {
  0%, 76%, 100% { transform: rotate(0deg); }
  90%           { transform: rotate(90deg); }
}
.ai-plus-mark text:last-of-type {
  transform-box: fill-box;
  transform-origin: center;
  animation: mgPlusTurn 10.3s var(--ease) infinite;
}

/* Stern: dreht sich langsam weiter, der Pfeil daneben stoesst kurz an */
@keyframes mgTurn {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.mg-k-star path:first-child {
  transform-box: fill-box;
  transform-origin: center;
  animation: mgTurn 26s linear infinite;
}

/* Pfeilkreuz: schiebt sich in Pfeilrichtung an und faellt zurueck */
@keyframes mgNudge {
  0%, 70%, 100% { transform: translateY(0); }
  78%           { transform: translateY(-7px); }
  86%           { transform: translateY(2px); }
}
.mg-k-arrowUp path {
  transform-box: fill-box;
  transform-origin: center;
  animation: mgNudge 8.9s var(--ease) infinite;
}

/* Kugel: die Punktreihen laufen als Welle durch, der Ring steht still.
   Angefasst werden nur die Punkte — laeuft der Ring mit, dreht sich
   scheinbar der ganze Kasten und die Zeile daneben wirkt schief. */
@keyframes mgWave {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.mg-k-sphere circle:not(:first-child) {
  animation: mgWave 5.3s var(--ease) infinite;
}
.mg-k-sphere circle:nth-child(3n)   { animation-delay: -0.9s; }
.mg-k-sphere circle:nth-child(3n+1) { animation-delay: -1.9s; }

/* Warndreieck: das Ausrufezeichen blinkt, der Rahmen bleibt */
.mg-k-warn rect { animation: mgBlink 5.9s linear infinite -2.2s; }

/* Messkreuz: die Diagonalen ziehen sich kurz zusammen */
@keyframes mgPinch {
  0%, 64%, 100% { transform: scale(1); }
  74%           { transform: scale(0.86); }
  84%           { transform: scale(1.06); }
}
.mg-k-tfx path {
  transform-box: fill-box;
  transform-origin: center;
  animation: mgPinch 12.7s var(--ease) infinite;
}

/* Umlaufzeichen: dreht einmal weiter, hier darf die ganze Figur mit —
   ein halber Umlauf ist genau das, was das Zeichen bedeutet */
@keyframes mgHalfTurn {
  0%, 62%, 100% { transform: rotate(0deg); }
  82%, 92%      { transform: rotate(180deg); }
}
.mg-k-swap svg > * {
  transform-box: view-box;
  transform-origin: center;
  animation: mgHalfTurn 14.3s var(--ease) infinite;
}

/* Doppelkreis: die beiden Koerper schieben sich ineinander */
@keyframes mgDriftA {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
@keyframes mgDriftB {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-5px); }
}
.mg-k-duo circle:first-child { animation: mgDriftA 6.1s var(--ease) infinite; }
.mg-k-duo circle:last-child  { animation: mgDriftB 6.1s var(--ease) infinite; }

/* Kein Ausholen mehr unter dem Zeiger (Leon 02.09. zu den Zeichen in
   der Fussmarke: "die reagieren irgendwie, wenn man darueber hovert,
   ich weiss nicht, ob das eher so irritiert"). Die Zeichen sind
   Beschriftung, kein Bedienelement — was auf Hover reagiert, verspricht
   einen Klick. Idee fuer spaeter, von Leon selbst: dort Easter Eggs
   verstecken, dann DARF es reagieren. */

@media (prefers-reduced-motion: reduce) {
  .mg-k-venn circle, .mg-k-rhomb path, .mg-k-xhair path, .mg-k-xhair line,
  .mg-k-bolt, .mg-k-hazard, .ai-plus-mark text:last-of-type,
  .mg-k-star path:first-child, .mg-k-arrowUp path, .mg-k-sphere circle,
  .mg-k-warn rect, .mg-k-tfx path, .mg-k-swap svg > *, .mg-k-duo circle {
    animation: none;
  }
}

/* Punktreihe: fuenf gefuellte Kreise, aus der Kopfzeile des
   Materials. Traegt Rhythmus in eine Zeile, ohne Text zu sein. */
.dots {
  display: inline-flex;
  gap: 5px;
  vertical-align: middle;
}
.dots i {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: currentColor;
}

/* Gefahrstreifen: schraeges Band. Im Material der Marker fuer
   "hier passiert etwas". Hier: Fortschritt und Ladezustand. */
.hazard {
  background-image: repeating-linear-gradient(
    -45deg,
    currentColor 0 8px,
    transparent 8px 16px
  );
  height: 14px;
}

/* ============================================================
   6 — Statuskapsel
   Outline-Kapsel aus dem Material. Dort traegt sie die einzige
   Farbe, hier steht sie in der Textfarbe — Leon will die Seite
   schwarz weiss. Markiert Live-Werte, sonst nichts.
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 6px 16px;
  color: var(--fg);
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Der Punkt pulst, solange die Zahl live nachlaeuft */
@keyframes pillBeat { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.pill i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pillBeat 1.8s var(--ease) infinite;
}
.plate .pill { color: var(--plate-ink); }

/* ============================================================
   Einsatz 1 — Signaturplatte zwischen Hero und Works
   ============================================================ */
.sig-plate .plate-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Kopfleiste der Platte: links die Herkunft, rechts der Stand.
   Beides klein, beides in Mono, wie eine Typenschild-Zeile. */
.sig-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: clamp(14px, 2vw, 30px);
}
.sig-head .dots { margin: 0 10px; }
.sig-head-l, .sig-head-r { display: inline-flex; align-items: center; gap: 10px; }

/* Fussleiste: Bausteine links, Signet rechts */
.sig-foot {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: clamp(18px, 2.6vw, 36px);
}
.sig-foot-l { display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 28px); }

/* ============================================================
   Einsatz 2 — Fussmarke am Seitenende
   Dieselbe Zeile auf allen Seiten. Sie schliesst die Seite ab,
   so wie das Signet im Material die Platte abschliesst.
   ============================================================ */
.footmark {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  /* Oben --gap-m statt --gap-l: ueber der Fussmarke steht auf jeder
     Seite schon ein Abschnitt mit eigenem Abstand nach unten (Leon
     14.09.2026, zu viel Schwarz unter GET IN TOUCH). */
  padding: var(--gap-m) var(--pad) var(--gap-m);
  color: var(--fg);
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.footmark-l { display: flex; align-items: flex-end; gap: clamp(14px, 2.4vw, 34px); }
.footmark-col { display: flex; flex-direction: column; gap: 6px; }
.footmark .stamp { width: clamp(150px, 16vw, 210px); }
.footmark .mg-insta { width: 42px; height: 42px; }
/* Pflichtlinks rechts in der Fussmarke (02.10.2026). Dieselbe Schrift
   und Groesse wie das Typenschild links, nur gedimmt, damit sie die
   Marke nicht ueberstimmen. */
.footmark-r { display: flex; gap: clamp(14px, 2vw, 28px); }
.footmark-r a { color: var(--dim); text-decoration: none; }
.footmark-r a:hover { color: var(--fg); }

/* ============================================================
   Einsatz 3 — Micrographic-Bausteine an der Hero
   Sie stehen ueber den bestehenden Beschriftungsbloecken und
   ersetzen dort den kurzen Skalenstrich.
   ============================================================ */
.hero-meta .mg { margin-bottom: 8px; }
.hero-meta.has-mark::before { display: none; }
.hero-meta-right.has-mark { align-items: flex-end; }

/* Die Statuskapsel LIVE COUNT unter dem linken Block ist raus (Leon
   14.09.2026: "bei Total Views steht irgendwie einmal Live und dann
   nochmal Live Count"), damit auch ihre Regel hier. Das LIVE in der
   Zeile darueber bleibt. */

/* ============================================================
   Einsatz 4 — Projektseite
   Kopfzeile ueber dem Titel, Credits als Typenschild.
   ============================================================ */
.detail-eyebrow {
  position: absolute;
  left: var(--pad);
  bottom: calc(40px + clamp(46px, 11vw, 170px) * 0.86 + 14px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg);
}

/* Text und Typenschild sitzen auf einer Salbei-Platte, damit die
   Seite unter dem Film einen Halt bekommt statt weiter ins Schwarz
   zu laufen. Links der Text, rechts die Angaben — ungleich geteilt,
   wie die Platten im Material. */
/* Kein eigener Aussenabstand mehr. Die Platte hatte oben zusaetzlich zu
   ihrem Innenabstand noch einmal 90 Bildpunkte Rand — zusammen mit der
   Luft, die der zentrierte Film ohnehin unter sich laesst, waren das
   fast 300 Bildpunkte zwischen zwei Sektionen, waehrend anderswo 170
   standen. Der Abstand kommt jetzt nur noch aus der Leiter. */
.credit-plate { margin-top: 0; }
.plate-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(18px, 2.4vw, 34px);
}
/* Kennung unter dem grossen Namen: Nummer, Gattung, Auftraggeber, Jahr.
   Sie traegt die Micrographics auf die Platte (Leon 11.08.: "und da
   auch micro graphics einbauen") und ersetzt die Tag-Zeile aus dem
   gestrichenen Intro-Abschnitt. */
.plate-kicker {
  display: flex; align-items: center; flex-wrap: wrap;
  margin-top: clamp(14px, 1.8vw, 24px);
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--plate-ink);
  opacity: 0.62;
}
.plate-kicker .meta-sep { background: var(--plate-ink); }

.plate-body-solo { grid-template-columns: 1fr; max-width: 62ch; }
/* Ohne Credits traegt der Text die Platte allein. Nicht ueber die volle
   Breite laufen lassen, sonst wird die Zeile zu lang zum Lesen. */
.plate-body-wide { grid-template-columns: minmax(0, 68ch); }
.plate-text p {
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--plate-ink);
  margin-bottom: 1.1em;
}
.plate-text p:last-child { margin-bottom: 0; }
.credit-plate .credit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.credit-item { display: flex; flex-direction: column; gap: 5px; }
.credit-item .k {
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.62;
}
.credit-item .v {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: -0.01em;
  line-height: 1.12;
}

/* ------------------------------------------------------------
   Angaben auf der Platte statt Erklaertext (Leon 13.08.2026)
   Klickzahl live von YouTube, Veroeffentlichung, Laufzeit.
   Aufbau wie die Tafeln an der Hero: Beschriftung, Wert, Zusatz.
   ------------------------------------------------------------ */
.plate-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 64px);
  margin-top: clamp(20px, 2.6vw, 34px);
  color: var(--plate-ink);
}
.fact { display: flex; flex-direction: column; gap: 3px; }

/* Kleine Zeichen vor der Beschriftung jeder Angabe. Schachbrett, Balken
   und Skala kommen aus derselben Formenwelt wie die uebrigen
   Micrographics, gebaut aus Verlaeufen statt aus Bilddateien. */
.fact-tag { display: inline-flex; align-items: center; gap: 6px; }
.fact-mg {
  flex: 0 0 auto;
  width: 13px; height: 9px;
  transform: skewX(-11deg);
  opacity: 0.85;
}
.fact-mg.mg-chk {
  background-image: conic-gradient(
    currentColor 0 25%, transparent 0 50%,
    currentColor 0 75%, transparent 0);
  background-size: 50% 50%;
}
.fact-mg.mg-bars {
  background-image: repeating-linear-gradient(90deg,
    currentColor 0 2px, transparent 2px 4px);
}
.fact-mg.mg-scale {
  background-image: repeating-linear-gradient(90deg,
    currentColor 0 1px, transparent 1px 4px);
  background-size: 100% 60%;
  background-repeat: no-repeat;
  background-position: 0 100%;
  border-top: 1.5px solid currentColor;
}

.fact-tag, .fact-sub {
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.fact-val {
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Die Crew laeuft als Fenster, nicht als Liste (Leon 13.08.: "die
   Crewliste sieht man immer noch auf einmal. Das wollen wir nicht. Wir
   wollen immer, dass irgendwie so drei bis vier Namen einzeln zu sehen
   sind").

   Bei Cynical sind es 37 Positionen. Statt sie alle hinzustellen, steht
   ein Fenster von vier Zeilen, durch das die Liste laeuft: jede Zeile
   wechselt einzeln, mit laufender Nummer davor. Die Hoehe der Sektion
   ist damit konstant, egal ob eine Arbeit vier oder vierzig Positionen
   hat. */
.credit-grid-crew {
  display: block !important;
  max-width: 520px;
}
.crew-window {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--plate-ink) 16%, transparent);
}
.crew-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  height: 30px;
  padding: 0 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--plate-ink) 10%, transparent);
  overflow: hidden;
}
.crew-no {
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.42;
  min-width: 2.4em;
}
.crew-role {
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
}
.crew-name {
  margin-left: auto;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 800;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Die Zeile wird pro Frame gesetzt, kein CSS-Uebergang auf denselben
   Werten. */
.crew-line { display: contents; }

/* Die Stuecke der Platte laufen nacheinander ein statt fertig
   dazustehen (Leon 13.08.). Startwert steht hier, den Rest setzt
   project.html pro Element, ohne transition auf denselben Werten. */
.plate-step { opacity: 0; }
.credit-hd {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.credit-hd span {
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.14em;
  opacity: 0.6;
}

/* ============================================================
   Einsatz 5 — Kontaktseite
   Die Kontaktdaten als Typenschild auf der Platte.
   ============================================================ */
.contact-plate .contact-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(20px, 3vw, 40px);
}
.contact-row { display: flex; flex-direction: column; gap: 6px; }
.contact-row .k {
  font-family: var(--mono);
  font-stretch: 75%;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.62;
}
.contact-row .v {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--plate-ink);
}
@media (hover: hover) and (pointer: fine) {
  .contact-row a.v { transition: opacity var(--t-base) var(--ease); }
  .contact-row a.v:hover { opacity: 0.55; }
}

/* Signet auf der Kontaktseite. Die Seite ist genau ein Bildschirm
   hoch, deshalb keine Platte, sondern nur die Marke unten links —
   gegenueber dem Modus-Schalter, auf einer Hoehe mit ihm. */
.contact-stamp {
  position: absolute;
  right: clamp(20px, 5vw, 88px);
  /* Hoch genug, dass der Modus-Schalter in der Ecke frei bleibt */
  bottom: 62px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  color: var(--fg);
  pointer-events: none;
}
.contact-stamp .stamp { width: clamp(140px, 15vw, 190px); }

/* ============================================================
   Sprueh-Zustand
   Leon 11.08.: "Gespruehte Sachen sind auch geil muessen mit
   rein." Die Filter stehen in brand.js, hier haengen sie an den
   Stellen, an denen der Zustand auch etwas erzaehlt: an der
   Wortmarke, am Schachbrett und an den technischen Zeichen. Die
   Beschriftung bleibt sauber — Kleinschrift mit Overspray ist
   nicht mehr gespruehte Typo, sondern unleserlich.
   ============================================================ */
/* Die Wortmarke traegt den Sprueh-Zustand NICHT mehr als SVG-Filter
   (Leon 14.09.2026: "wenn ich runter scrolle, dann stottert dieses
   Mercedes so links und rechts ... der Maustracker hat auch Probleme
   hinterher zu kommen"). Gemessen in WebKit bei Leons Fenster: mit dem
   Filter 844 ms je Bild beim Scrollen, ohne 17 ms. Der Filter rechnet
   Rauschen, Weichzeichner und Verschiebung auf einer 300-Punkt-Schrift,
   und das bei jeder Bewegung der Einfahrt neu.
   Stattdessen liegt der Overspray als eigene Ebene hinter der Schrift:
   derselbe Text, nur als weicher Schatten, gestanzt durch eine
   Punktmaske (--spray-dots, einmal von brand.js gerechnet). Das ist der
   "mist"-Teil des Filters, und genau der ist es, den man sieht. Die
   Ebene wird einmal gemalt und faehrt danach nur mit. Das Schachbrett
   auf der Platte bleibt ohne Filter, es ist dort ausgeblendet. */
.plate-mark .mark-word { position: relative; }
.plate-mark .mark-word[data-spray]::after {
  content: attr(data-spray);
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  color: transparent;
  /* Zwei gleiche Schatten uebereinander heben die Deckung am Rand an,
     wie slope 1.9 im Filter. 18px Radius entspricht dessen
     stdDeviation 9. */
  text-shadow: 0 0 18px var(--plate-ink), 0 0 18px var(--plate-ink);
  -webkit-mask-image: var(--spray-dots);
          mask-image: var(--spray-dots);
  -webkit-mask-size: var(--spray-dots-size, 128px);
          mask-size: var(--spray-dots-size, 128px);
  pointer-events: none;
}
.plate .mg,
.footmark .mg,
.contact-stamp .stamp,
.footmark .stamp,
.plate .stamp {
  filter: url(#drk-spray-s);
}
/* Halbtonfeld hinter der Wortmarke: ein weiter, sehr flacher
   Sprueh-Schatten, wie das Overspray auf den Sticker-Boegen. Er
   sitzt auf der Platte, nicht auf der Marke, damit die Typo
   selbst ihre Deckung behaelt. */
.plate .plate-inner::before {
  content: "";
  position: absolute;
  left: -6%; right: -6%;
  top: 18%; height: 64%;
  /* Kein negativer z-index: .plate hat keinen eigenen
     Stapelkontext, das Feld waere hinter der Plattenfarbe
     verschwunden. Ohne z-index malt der Browser das ::before vor
     allen anderen Kindern, es liegt also von selbst darunter. */
  background:
    radial-gradient(60% 50% at 28% 45%, var(--plate-ink) 0%, transparent 70%),
    radial-gradient(45% 40% at 76% 60%, var(--plate-ink) 0%, transparent 72%);
  opacity: 0.14;
  /* Weiche Kante ringsum (01.10.2026). Das Feld greift absichtlich
     6 Prozent ueber die Satzbreite hinaus, damit es nicht als Kasten
     unter der Wortmarke steht. `.plate` schneidet aber mit
     `overflow: hidden` ab — und sobald das Fenster schmaler ist als die
     Satzbreite, liegt diese Schnittkante mitten im Verlauf statt
     ausserhalb. Die linke Ellipse sitzt bei 28 Prozent mit 60 Prozent
     Radius, reicht also rechnerisch bis -32 Prozent: links wurde sie
     immer gekappt. Zu sehen war eine senkrechte Kante im Schatten
     (Leon 01.10.2026: "der Schatten unter der Schrift ist so
     abgeschnitten, man sieht so Kanten beim Schatten links und rechts,
     zum Beispiel unter Deutschland bei der Projektseite. Check das mal
     bei allen Unterseiten").
     Die Maske laesst den Verlauf an allen vier Raendern auf null
     laufen, bevor der Schnitt greift. Damit gibt es keine Kante mehr,
     unabhaengig von der Fensterbreite und auf jeder Unterseite, weil
     alle Platten dieselbe Regel benutzen. */
  -webkit-mask-image:
    radial-gradient(72% 72% at 50% 50%, #000 42%, transparent 100%);
  mask-image:
    radial-gradient(72% 72% at 50% 50%, #000 42%, transparent 100%);
  /* Ohne Spruehfilter seit 14.09.2026: das Feld ist so weich und so
     flach, dass der Filter im Bild nicht zu unterscheiden war, er war
     aber der groesste Posten beim Scrollen (nur dieses Feld ohne Filter:
     23 statt 844 ms je Bild). */
  pointer-events: none;
}

/* Bewusst NICHT an prefers-reduced-motion gehaengt: der Sprueh-
   Zustand ist eine Textur, keine Bewegung. Wer weniger Animation
   will, will nicht weniger Druck. */

/* ============================================================
   Auftritt
   Die Platte faehrt beim Scrollen nicht ein, sie steht. Nur die
   Bausteine schreiben sich auf, wie die Beschriftung an der Hero
   (micro.js). Das haelt die Bewegung auf der Seite einheitlich.
   ============================================================ */
.brand-hidden { visibility: hidden; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .plate { padding: var(--gap-m) var(--pad) var(--gap-s); }
  .plate-mark { width: 122%; margin-left: -11%; }
  .sig-head { font-size: 8.5px; letter-spacing: 0.06em; }
  .sig-head .dots i { width: 8px; height: 8px; }
  /* Auf dem Handy stehen Bausteine und Signet untereinander,
     nebeneinander wird beides briefmarkengross. */
  .sig-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footmark { flex-direction: column; align-items: flex-start; gap: 22px; }
  .footmark .stamp { width: 190px; }
  .mg-l { width: 54px; height: 54px; }
  .detail-eyebrow { font-size: 8.5px; gap: 8px; }
  /* minmax(0, 1fr) statt 1fr. Ein 1fr-Track darf auf die Mindestbreite
     seines Inhalts wachsen, und die Crew-Zeilen sind nowrap: sobald im
     Fenster eine Zeile wie "Marcel Handke, Gorden Schirmer, Frank ..."
     auftaucht, sprang die Spalte auf 520 Punkte (max-width der Liste)
     und die Platte schnitt rechts ab — Namen fehlten, die Kopfzeile
     CREW lief aus dem Bild (gemessen 14.09.2026 bei Gesegnet, 390 und
     375 breit: rechte Kante bei 534 Punkten). Mit 0 als Untergrenze
     bleibt die Spalte so breit wie die Platte und der Name kuerzt sich
     mit Auslassungspunkten, wie es .crew-name vorsieht. */
  .plate-body { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .credit-grid-crew { max-width: none; }
  .credit-plate .credit-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .contact-stamp { right: var(--pad); bottom: 52px; gap: 12px; }
  .contact-stamp .stamp { width: 150px; }
}

/* ------------------------------------------------------------
   Freigestellte Aufnahmen (Leon 13.08.2026)
   "Dieser Totenkopfwuerfel muss auf jeden Fall freigestellt werden."
   und "das muss eher wie so ein Micrographic-Element sein. Das ist
   jetzt kein eigener Bereich auf einmal, sondern das wird einfach ins
   Design implementiert."

   Die Aufnahmen liegen als schwarze Figur auf weissem Grund. Ein
   Alphakanal waere ein zweiter Export pro Clip; der Blendmodus macht
   dasselbe im Browser und kostet nichts:

     dunkle Seite: invertieren, dann screen. Aus Weiss wird Schwarz und
                   faellt weg, aus der Figur wird Weiss und bleibt.
     helle Seite:  multiply. Weiss faellt weg, die Figur bleibt schwarz,
                   so wie das Zeichen ueberall sonst auf der hellen
                   Seite schwarz bleibt.
   ------------------------------------------------------------ */
.mg-cut { display: none; }
/* Das Canvas traegt die freigestellte Figur, das Video liegt versteckt
   dahinter und liefert nur die Bilder. Groesse kommt aus denselben
   Klassen, deshalb erbt das Canvas sie ueber mg-cut-canvas. */
.mg-cut-canvas { display: block; pointer-events: none; }

/* Kopf neben der Ueberschrift von Latest Projects. Sitzt auf der
   Grundlinie der Zeile und laeuft mit, kein eigener Block. */
.latest-hd-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.6vw, 26px);
}
.mg-head {
  width: clamp(56px, 6.4vw, 104px);
  height: auto;
  flex: 0 0 auto;
  margin-bottom: -2%;
}


/* Der Wuerfel mit dem Apfel auf der Kontaktseite ist raus (Leon
   25.08.2026). Regeln mit entfernt, damit keine Karteileiche stehen
   bleibt, die beim naechsten Umbau wieder auftaucht. */

/* ============================================================
   Titel faehrt beim Scrollen ein
   Leon 01.09.2026: "auf der Unterseite kann auch irgendwie eine Art
   Onscroll-Animation sein, wenn man vom Video runter scrollt, dann kann
   sich der Songtitel rein animieren."
   Den Fortschritt schreibt project.html als --tp (0 bis 1) auf
   .plate-mark. Bewegt werden nur transform und opacity, damit die
   Platte nicht in der Hoehe wandert.
   ============================================================ */
.plate-mark.mark-slide .mark-word {
  opacity: var(--tp, 1);
  transform: translate3d(calc(-7% * (1 - var(--tp, 1))), calc(0.12em * (1 - var(--tp, 1))), 0);
  will-change: transform, opacity;
}
/* Das Schachbrett kommt ein Stueck weiter von aussen und behaelt dabei
   seine Schraege — ohne das skewX hier stuende es waehrend der Fahrt
   aufrecht und wuerde sich am Ende geraderuecken. */
.plate-mark.mark-slide .chk {
  opacity: var(--tp, 1);
  transform: skewX(-11deg) translate3d(calc(-42% * (1 - var(--tp, 1))), 0, 0);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .plate-mark.mark-slide .mark-word,
  .plate-mark.mark-slide .chk { opacity: 1; }
  .plate-mark.mark-slide .mark-word { transform: none; }
  .plate-mark.mark-slide .chk { transform: skewX(-11deg); }
}

/* Die drei Ringe ueber TOTAL VIEWS deutlich kleiner (Leon 02.10.2026:
   "diese Micrographic mit diesen drei Kreisen, die kann viel kleiner").
   Nur an der Hero, in Fussmarke und Signet behalten die Ringe ihre
   Stufe. Von 42 auf 22 Punkte, knapp ueber der Hoehe der Zahl darunter. */
.hero-meta-left .mg-row .mg-k-venn { width: 22px; height: 22px; }