/* ==========================================================================
   Sascha Pabst — Hub, Variante B (dunkel)
   Schwarzer Grund, unscharfer Wortblock, davor der Glas-Pixel als einzige
   scharfe Ebene. Sonst nur Kontakt-Kacheln und Kleintext an den Rändern.
   ========================================================================== */

/* Name und große Überschriften: Archivo Narrow aus Saschas Design-System (seit 2026-10-07, vorher Inter Display —
   „passt besser in die Glaskachel"; Inter steht als ungewählter Standard auf den KI-Slop-Listen). Variable Schrift,
   genutzt im fetten Schnitt; OFL, Lizenz in fonts/OFL-archivonarrow.txt */
@font-face {
  font-family: "Archivo Narrow";
  src: url("fonts/archivonarrow-var.ttf") format("truetype");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-500-latin.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
  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: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-500-latin-ext.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter (OFL, Textschnitt der Familie des Namens): Fließtext in „Über mich" — seit 2026-10-05 statt Newsreader,
   die Serife war die einzige dritte Schrift der Seite und wirkte fremd */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Newsreader (OFL): nur noch für den Vergleich ?aboutschrift=serif */
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-var-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  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: "Newsreader";
  src: url("fonts/newsreader-var-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */
/* Warm statt neutral (seit 2026-10-05): Schwarz leicht ins Tiefbraun, Weiß Richtung Naturpapier — bleibt Schwarz-Weiß,
   wirkt aber wie ein abgedunkelter Raum statt eines Bildschirms. Der kühle Stand davor: ?warm=aus (unten). */
:root {
  --bg:    #0E0C0A;
  --ink:   #EDE8DF;
  /* Grautöne für Schrift: auch die kleinste Schrift (Impressum, DE/EN, Kachel-Nummern, Anzeige) erreicht
     mindestens 4,5 : 1 (WCAG AA, seit 2026-10-06; vorher 2,7 : 1). --ink-4 nur noch für Linien und Deko. */
  --ink-2: rgba(237, 232, 223, .7);
  --ink-3: rgba(237, 232, 223, .54);
  --ink-4: rgba(237, 232, 223, .34);
  --rule:  rgba(237, 232, 223, .14);
  --tile-line: rgba(237, 232, 223, .3);
  --menu-bg: rgba(14, 12, 10, .9);
  --panel: #15120F;
  --mark:  #D2533A;   /* Zinnober: Punkt, Platzhalterfläche in „Über mich", Schrägstrich im Zeichen „ohne KI" (2026-10-06) — sonst nicht */

  --grotesk: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif:   "Newsreader", Georgia, serif;
  --text:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 3vw, 44px);
  /* Bewegungsregel (Sascha, 2026-10-07): alles wie unter Wasser — weich anfahren, langer Auslauf, nichts schnappt.
     --ease für Reaktionen (Hover, Umschalten), --float für Auftauchen (Einblenden, Fenster, Kacheln) */
  --ease: cubic-bezier(.25, .46, .15, 1);
  --float: cubic-bezier(.35, .1, .15, 1);

  color-scheme: dark;
}

/* Hell: dieselbe Seite invertiert — Naturpapier, fast schwarze (warme) Schrift */
:root[data-theme="light"] {
  --bg:    #EDE8DF;
  --ink:   #13110E;
  --ink-2: rgba(19, 17, 14, .78);
  --ink-3: rgba(19, 17, 14, .62);
  --ink-4: rgba(19, 17, 14, .38);
  --rule:  rgba(19, 17, 14, .14);
  --tile-line: rgba(19, 17, 14, .3);
  --menu-bg: rgba(237, 232, 223, .92);
  --panel: #F5F1EA;
  color-scheme: light;
}
/* Vergleich ?warm=aus: die neutralen Töne bis 2026-10-05 */
:root[data-warm="aus"] {
  --bg: #0A0A0A; --ink: #ECEBE6; --ink-2: rgba(236, 235, 230, .7); --ink-3: rgba(236, 235, 230, .54); --ink-4: rgba(236, 235, 230, .34);
  --rule: rgba(236, 235, 230, .14); --tile-line: rgba(236, 235, 230, .3); --menu-bg: rgba(10, 10, 10, .9); --panel: #111;
}
:root[data-warm="aus"][data-theme="light"] {
  --bg: #ECEBE6; --ink: #0A0A0A; --ink-2: rgba(10, 10, 10, .78); --ink-3: rgba(10, 10, 10, .62); --ink-4: rgba(10, 10, 10, .38);
  --rule: rgba(10, 10, 10, .14); --tile-line: rgba(10, 10, 10, .3); --menu-bg: rgba(236, 235, 230, .92); --panel: #F4F3EF;
}

/* --- Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--mark); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Korn: hell, ganz leicht — wie ein Abzug auf schwarzem Papier */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .5;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .04em;
}
.dim { color: var(--ink-2); }

/* Hell: Papier-Anmutung ohne sichtbare Textur — feines Korn plus ganz leichte,
   großflächige Wolkigkeit wie die Faserdichte von ungestrichenem Papier */
[data-theme="light"] body::after {
  mix-blend-mode: multiply;
  opacity: 1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .18  0 0 0 0 .16  0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .32  0 0 0 0 .28  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 220px 220px, 900px 900px;
}

/* --- Bogen ---------------------------------------------------------------- */
.sheet {
  position: relative;   /* Bezug für die Bühne (Glas, Schatten) über den ganzen Bogen */
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;   /* Einflug-Animationen erzeugen keinen kurzen Scrollbalken */
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 0 var(--gutter);
  padding-bottom: env(safe-area-inset-bottom);
}

/* --- Kopfzeile: Rolle · Stand · Menü --------------------------------------- */
.top {
  display: flex; justify-content: space-between; align-items: center;
  height: 60px;
  text-transform: uppercase; letter-spacing: .06em;
}
.top-right { display: flex; align-items: center; gap: 14px; }
.top-right .wide-only { margin-right: 8px; }

/* Hell/Dunkel-Schalter: Kreis, halb gefüllt */
.theme {
  width: 30px; height: 30px;
  display: grid; place-items: center;
}
.theme i {
  width: 13px; height: 13px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
  transition: transform .9s var(--ease);
}
.theme:hover i { transform: rotate(180deg); }

/* Burger: zwei Striche, im geöffneten Menü ein Kreuz */
.burger {
  position: relative;
  width: 30px; height: 30px;
  margin-right: -6px;
}
.burger span {
  position: absolute; left: 6px; right: 6px; height: 1px;
  background: var(--ink);
  transition: transform .8s var(--ease), top .8s var(--ease);
}
.burger span:first-child { top: 12px; }
.burger span:last-child  { top: 18px; }
.burger:hover span:first-child { transform: translateX(-2px); }
.burger:hover span:last-child  { transform: translateX(2px); }
.burger.is-open span:first-child { top: 15px; transform: rotate(45deg); }
.burger.is-open span:last-child  { top: 15px; transform: rotate(-45deg); }

/* --- Feld: Name + Glas-Pixel ----------------------------------------------- */
.field {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 420px;
}
.hero {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

/* Der Wortblock: bewusst außerhalb der Schärfeebene */
.mark {
  /* Obergrenze (2026-10-05, Sascha am 14-Zoll-MacBook: „zu groß wirkt es klobig, lieber ein Tick zu klein"):
     gemessen an seinem Screenshot ~167 pt, gedeckelt knapp darunter. Gilt für alle Bildschirmgrößen. */
  --fs-max: 165px;
  --fs: clamp(84px, min(17vw, 31vh), var(--fs-max));
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: var(--fs);
  line-height: .78;
  letter-spacing: -.03em;   /* Archivo Narrow ist schmal — weniger eng als bei Inter Display (-.06em) */
  color: var(--ink);
  position: relative; z-index: 1;
  user-select: none;
  transition: filter 1.6s cubic-bezier(.4, 0, .2, 1);
}
/* Fokus auf „sp": Zeigt die Platte die Initialen, wird die Schärfentiefe flacher (Blende auf) —
   der Name dahinter versinkt zusätzlich in Unschärfe, nur „sp" bleibt durchs Glas scharf.
   Die Unschärfe addiert sich zur Grundunschärfe der Zeilen; derselbe Wert steht in sculpture.js (FOCUS_SP_EM). */
html.focus-sp .mark, html.focus-film .mark { filter: blur(.08em); }   /* auch während der Rückblende */
/* Rückblende: Live-Anzeige tritt zurück (Saallicht aus) — am Handy läge sie sonst über der Platte in der Bildmitte */
/* (die Zeilen, nicht der Block: dessen Einblend-Animation hält seine Deckkraft fest) */
.readout .ro-line { transition: opacity 1.2s var(--ease); }
html.focus-film .readout .ro-line { opacity: 0; }
.mark .ln { display: block; position: relative; }
.mark .ln + .ln { padding-left: .52em; }
.mark .core {
  display: inline-block;
  filter: blur(var(--blur, .03em)); /* in em: jede Zeile bekommt ihre eigene Unschärfe; Faktor = data-backdrop-blur. --blur überschreibt (hochkant) */
  animation: focus 2.2s var(--ease) both .15s;
}
/* zweiter, weicherer Abzug leicht versetzt — die Verwischung */
.mark .ln::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  padding-left: inherit;
  filter: blur(var(--ghost-blur, .078em));
  opacity: .3;
  transform: var(--ghost-shift, translateY(.05em));
  animation: ghost 2.6s var(--ease) both .15s;
}
@keyframes focus {
  from { filter: blur(calc(var(--blur, .03em) * 6)); opacity: 0; }
  to   { filter: blur(var(--blur, .03em)); opacity: 1; }
}
@keyframes ghost {
  from { opacity: 0; }
  to   { opacity: .3; }
}

.stage {
  position: absolute;
  inset: 0;   /* ganzer Bogen: fällt ein Schatten weit, endet er erst am Seitenrand */
  z-index: 2;
  pointer-events: none;
}
.stage canvas {
  display: block; width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.8s var(--ease) 1.1s; /* erst wenn der Schriftzug scharf gezogen ist */
}
.stage canvas.is-ready { opacity: 1; }
/* Auftritt „Licht findet das Glas" (sculpture.js): die Bühne ist sofort da, das Glas erscheint im Shader */
.stage canvas.is-reveal { transition: none; }
/* Weißblende der Rückblende: Lichthof um die Platte im Licht der Stunde (--sun-rgb), mit feinem, leicht unscharfem
   Spektralsaum — Violett/Blau zur einen, Gelb/Rot zur anderen Seite (Glow-Regel). Lage und Stärke setzt sculpture.js. */
.film-halo {
  display: none; position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  --halo: color-mix(in srgb, rgb(var(--sun-rgb, 255 255 255)) 30%, white);   /* warmweiß wie die Platte */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 55%, transparent), color-mix(in srgb, var(--halo) 16%, transparent) 45%, transparent);
  filter: blur(4px) drop-shadow(-3px 0 rgb(125 80 255 / .16)) drop-shadow(3px 0 rgb(255 80 45 / .14));
}
/* Angepinnte Notiz: feine Linie vom Mittelpunkt der Oberkante der Platte (roter Punkt wie in der Live-Anzeige)
   schräg nach oben zu einem kurzen Satz — wie eine Anmerkung in einer technischen Zeichnung. Lage aus sculpture.js. */
.pin { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.pin.is-on { opacity: 1; }
.pin-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pin-line polyline { fill: none; stroke: var(--ink-4); stroke-width: 1; }
.pin-dot { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--mark); }
.pin-text {
  position: absolute; transform: translateY(-50%);
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em; white-space: nowrap;
  color: var(--ink-2); transition: opacity .8s var(--ease);
}
.pin-text.is-left { transform: translate(-100%, -50%); text-align: right; }
.pin-text.is-wrap { white-space: normal; line-height: 1.35; }   /* schmal: zwei Zeilen statt aus dem Bild
/* Morph beim Wenden (2026-10-05): Der Satz zieht sich zum Ende der Linie zusammen und verschmilzt zu einem Lichtpunkt,
   der während der Drehung glimmt; landet sie, geht aus dem Licht der neue Satz auf (mit Glanz und Spektralsaum).
   Animiert wird ein innerer Träger (.pin-inner) per transform — das Positionieren bleibt außen; die eigenständige
   `scale`-Eigenschaft griff in Safari hier nicht. Drehpunkt am Satzanfang (am Ende der Linie). */
.pin-inner { display: inline-block; transform-origin: 0 50%; }
/* „Ohne generative KI": Zeichen hinter „Rewind" während der Rückblende — Kreis mit „AI" in Schriftfarbe, Schrägstrich
   im Zinnober (wie der Punkt der Notiz) */
.pin-inner .no-ai { display: inline-block; vertical-align: -.42em; margin-left: .55em; }
.pin-inner .no-ai svg { display: block; width: 18px; height: 18px; }
.no-ai-slash { stroke: var(--mark); }
.pin-text.is-left .pin-inner { transform-origin: 100% 50%; }
.pin-inner.is-melt { animation: pin-schmelzen .6s cubic-bezier(.45, 0, .55, 1) forwards; }
.pin-inner.is-emerge { animation: pin-aufgehen 1.1s var(--float); }
@keyframes pin-schmelzen {
  0%   { transform: scale(1, 1); filter: blur(0); opacity: 1; color: var(--ink-2); text-shadow: 0 0 0 transparent; }
  50%  { color: var(--ink); text-shadow: -1px 0 1px rgb(125 80 255 / .4), 1px 0 1px rgb(255 80 45 / .4), 0 0 8px rgb(var(--sun-rgb, 255 255 255) / .7); }
  100% { transform: scale(.03, .55); filter: blur(1.5px); opacity: 0; color: var(--ink); text-shadow: 0 0 10px rgb(var(--sun-rgb, 255 255 255) / .9); }
}
@keyframes pin-aufgehen {
  0%   { transform: scale(.03, .55); filter: blur(1.5px); opacity: 0; color: var(--ink); text-shadow: 0 0 10px rgb(var(--sun-rgb, 255 255 255) / .9); }
  22%  { opacity: 1; color: var(--ink);
         text-shadow: -1.8px 0 1.2px rgb(125 80 255 / .55), -.9px 0 1px rgb(40 165 255 / .45), .9px 0 1px rgb(255 205 50 / .45),
                      1.8px 0 1.2px rgb(255 80 45 / .55), 0 0 10px rgb(var(--sun-rgb, 255 255 255) / .9); }
  45%  { transform: scale(1, 1); filter: blur(0); }
  100% { transform: scale(1, 1); filter: blur(0); opacity: 1; color: var(--ink-2); text-shadow: 0 0 0 transparent; }
}
/* Der Lichtpunkt: weiche Glut in der Farbe des Lichts mit feinem Farbsaum; glimmt und atmet, solange die Platte dreht */
.pin-glow {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(var(--sun-rgb, 255 255 255) / .95) 0, rgb(var(--sun-rgb, 255 255 255) / .5) 22%, rgb(var(--sun-rgb, 255 255 255) / 0) 68%);
  box-shadow: -2px 0 7px -2px rgb(125 80 255 / .45), 2px 0 7px -2px rgb(255 80 45 / .45);
  opacity: 0; scale: .2;
}
:root[data-theme="light"] .pin-glow { mix-blend-mode: plus-lighter; }
.pin-glow.is-on { animation: pin-licht-an .6s cubic-bezier(.45, 0, .55, 1) forwards, pin-licht-atmen 1.8s ease-in-out .6s infinite; }
.pin-glow.is-out { animation: pin-licht-aus .9s var(--float) forwards; }
@keyframes pin-licht-an { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
@keyframes pin-licht-atmen { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .7; scale: .82; } }
@keyframes pin-licht-aus { from { opacity: 1; scale: 1.15; } to { opacity: 0; scale: .3; } }
/* Umblenden mit Lichtblitz (2026-10-05): Landet die Drehung, blitzt der neue Satz kurz auf — Glanz in der Farbe des
   aktuellen Lichts (--sun-rgb, abends warm) und ein feiner Spektralsaum, beides klingt in ~0,6 s ab. Der Nadelkopf
   glimmt im selben Moment kurz auf. */
/* Höhepunkt erst, wenn der Satz voll da ist (vorher fiel er auf den noch unsichtbaren Text); das weiche Einblenden
   übernimmt hier die Animation selbst */
.pin-inner.is-flash { animation: pin-blitz 1s var(--float); }
.pin-dot.is-flash { animation: pin-glimmen 1s var(--float); }
@keyframes pin-blitz {
  0%   { opacity: .15; color: var(--ink); text-shadow: 0 0 2px rgb(var(--sun-rgb, 255 255 255) / .3); }
  16%  { opacity: 1; color: var(--ink);
         text-shadow: -1.8px 0 1.2px rgb(125 80 255 / .55), -.9px 0 1px rgb(40 165 255 / .45), .9px 0 1px rgb(255 205 50 / .45),
                      1.8px 0 1.2px rgb(255 80 45 / .55), 0 0 10px rgb(var(--sun-rgb, 255 255 255) / .9); }
  45%  { opacity: 1; color: var(--ink);
         text-shadow: -.8px 0 1px rgb(125 80 255 / .3), .8px 0 1px rgb(255 80 45 / .3), 0 0 5px rgb(var(--sun-rgb, 255 255 255) / .35); }
  100% { opacity: 1; color: var(--ink-2); text-shadow: 0 0 0 transparent; }
}
@keyframes pin-glimmen {
  0%   { box-shadow: 0 0 0 0 rgb(210 83 58 / 0); }
  16%  { box-shadow: 0 0 8px 2px rgb(210 83 58 / .75); }
  100% { box-shadow: 0 0 0 0 rgb(210 83 58 / 0); }
}
/* Über der Glasplatte: anklickbar (sculpture.js prüft den Treffer) */
html.pixel-hover { cursor: pointer; }
.no-webgl .stage { display: none; }

/* Live-Anzeige zum Pixel: Position, Drehung, Glaswerte */
.readout {
  position: absolute; right: 0; bottom: 18px;
  z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ro-line { white-space: nowrap; }
.ro-line b {
  font-weight: 400;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
  margin-right: .9em;
}
.readout .t1 { color: var(--ink-2); }
.readout .t1::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--mark);
  margin-right: 8px;
  transform: translateY(-1px);
}
.no-webgl .readout { display: none; }

/* --- Kontakt-Kacheln (aus CONFIG.hub) · Ortszeit --------------------------- */
.base {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  padding: 10px 0 22px;
}
.tiles { display: flex; gap: 6px; }
.tiles { isolation: isolate; }
.tile-link {
  will-change: filter, opacity;   /* Ebene steht von Anfang an — kein Neuanlegen beim Hover */
  width: 68px;   /* feste Spalte, damit unterschiedlich lange Namen das Raster nicht verschieben */
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: filter .8s var(--ease), opacity .8s var(--ease);
}
/* Aufbau (app.js): die Kacheln ziehen im Takt der einfliegenden Glasplatte auf — vorher nicht da, nicht anklickbar.
   Nur der Anfangszustand wird gehalten (backwards): danach gelten wieder Hover-Unschärfe und -Abblenden */
:root.intro .tiles .tile-link:not(.is-in) { opacity: 0; pointer-events: none; }
.tiles .tile-link.is-in { animation: kachel-auf 1.5s var(--float) backwards; }
@keyframes kachel-auf {   /* taucht auf: steigt, wächst und wird dabei scharf */
  from { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* Kachel wie ein Element im Periodensystem — und ein Pixel */
.tile {
  position: relative;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--tile-line);
  border-radius: 4px;
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  transition: background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.tile-n {
  position: absolute; left: 5px; top: 3px;
  font-size: 9px; font-weight: 400; letter-spacing: .04em;
  color: var(--ink-3);
  transition: color .6s var(--ease);
}
/* Licht auf den Kacheln: dieselbe Sonne wie auf der Glasplatte (Richtung, Stärke, Farbe setzt sculpture.js).
   Die Kante, die zur Sonne zeigt, fängt Licht; je flacher die Sonne, desto deutlicher. Im Hellen werfen die
   Kacheln dazu einen hauchfeinen Schatten vom Licht weg — wie die Platte, nur im Hellen (dort liegt Papier). */
.tile::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(calc(var(--sun-a, 180) * 1deg), rgb(var(--sun-rgb, 255 255 255) / calc(var(--sun-k, .5) * .8)) 0%, transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
:root[data-theme="light"] .tile {
  box-shadow: calc(var(--sun-dx, 0) * 1px) calc(var(--sun-dy, 1) * 1px) 4px rgb(19 17 14 / calc(var(--sun-k, .5) * .14));
}
.tile-c { display: inline-block; transition: transform .7s var(--ease), text-shadow .7s var(--ease); }
.tile-link.is-empty { pointer-events: none; }   /* freier Platz: nur das Quadrat */
/* Kachel 04 „Rewind": Zurückspul-Symbol wie am CD-Spieler, startet die Rückblende im Glas-Pixel. Das Symbol bekommt
   beim Hover denselben Spektralsaum wie die Kürzel (als Schatten, weil text-shadow auf SVG nicht greift). */
.tile-ico { transition: transform .7s var(--ease), filter .7s var(--ease); }
.tile-ico svg { display: block; fill: currentColor; }
/* Kachel 05 „Coming soon": leer, nicht anklickbar, wippt alle paar Sekunden wie angestoßen und kommt zur Ruhe. In der Bewegung franst
   die Kante spektral aus wie eine gekippte Glaskante (Violett/Blau zur einen, Gelb/Rot zur anderen Seite, kein
   RGB-Versatz); die Säume wechseln mit der Kipprichtung. Erst nach dem Einflug der Platte, bei „Bewegung
   reduzieren" gar nicht. */
.tile-link.is-soon { pointer-events: none; }   /* nur Ankündigung — kein Hover, kein Klick */
.tile-link.is-soon .tile-l { text-align: center; line-height: 1.35; }   /* breiter als die Kachel: zwei Zeilen statt in die Nachbarn zu laufen */
/* wippt nur dreimal, dann Ruhe — dauerhaftes Wippen wäre Deko (2026-10-06) */
.tile-link.is-soon .tile { transform-origin: 50% 100%; animation: wippen 6s var(--ease) 6.5s 3; }
.tile-link.is-soon .tile::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  animation: wippen-saum 6s var(--ease) 6.5s 3;
}
@keyframes wippen {
  0%, 60%, 100% { transform: rotate(0deg); }
  66% { transform: rotate(-5deg); }
  74% { transform: rotate(3.5deg); }
  82% { transform: rotate(-1.8deg); }
  90% { transform: rotate(.7deg); }
}
@keyframes wippen-saum {
  0%, 60%, 92%, 100% { box-shadow: none; }
  66% { box-shadow: -2px 0 0 rgb(125 80 255 / .5), -1px 0 0 rgb(40 165 255 / .45), 1px 0 0 rgb(255 205 50 / .45), 2px 0 0 rgb(255 80 45 / .5); }
  74% { box-shadow: 1.6px 0 0 rgb(125 80 255 / .45), .8px 0 0 rgb(40 165 255 / .4), -.8px 0 0 rgb(255 205 50 / .4), -1.6px 0 0 rgb(255 80 45 / .45); }
  82% { box-shadow: -.9px 0 0 rgb(125 80 255 / .35), .9px 0 0 rgb(255 80 45 / .35); }
}
.tile-link.is-copied .tile-l { color: var(--ink); }   /* E-Mail: „Kopiert" kurz hervorgehoben */
.tile-l {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2);
}
@media (hover: hover) {
  /* Hover: die Kachel wird zum kleinen Glas-Pixel — wie die große Platte vergrößert sie leicht, das Kürzel bekommt
     einen Spektralsaum (Violett/Blau zur einen, Gelb/Rot zur anderen Seite, kein RGB-Versatz), dazu ein Glanz im
     Sonnenlicht. Vergleich mit dem alten Umkehren: ?kacheln=alt */
  .tile-link:hover .tile {
    border-color: var(--ink);
    background: linear-gradient(calc(var(--sun-a, 180) * 1deg), rgb(var(--sun-rgb, 255 255 255) / .09), transparent 65%);
  }
  .tile-link:hover .tile-c {
    transform: scale(1.12);
    text-shadow: -1.4px 0 rgb(125 80 255 / .5), -.7px 0 rgb(40 165 255 / .4), .7px 0 rgb(255 205 50 / .4), 1.4px 0 rgb(255 80 45 / .5);
  }
  .tile-link:hover .tile-ico { filter: drop-shadow(-1.3px 0 rgb(125 80 255 / .55)) drop-shadow(1.3px 0 rgb(255 80 45 / .5)); }
  .tile-link:hover .tile-n { color: var(--ink); }
  :root[data-tiles="alt"] .tile-link:hover .tile { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  :root[data-tiles="alt"] .tile-link:hover .tile-c { transform: none; text-shadow: none; }
  :root[data-tiles="alt"] .tile-link:hover .tile-n { color: var(--bg); opacity: .6; }
  .tile-link:hover .tile-l { color: var(--ink); }
  /* Fokus wie beim Objektiv: die gezeigte Kachel bleibt scharf, der Rest wird unscharf */
  .tiles:has(.tile-link:hover) .tile-link:not(:hover) { filter: blur(1.6px); opacity: .45; }
}
.meta { display: flex; flex-direction: column; align-items: flex-end; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 2px; }
.narrow-only { display: none; }

/* --- Fußzeile (Rechtliches bleibt ständig erreichbar) ---------------------- */
.fine {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 38px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.fine-links { display: flex; gap: 20px; }
.fine-links button { color: var(--ink-3); transition: color .6s var(--ease); }
.fine-links button:hover { color: var(--ink); }

/* --- Menü (aus CONFIG.menu) ------------------------------------------------ */
.menu {
  width: 100vw; height: 100vh; height: 100svh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--menu-bg);
  color: var(--ink);
}
.menu::backdrop { background: transparent; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.menu[open] { animation: menu-in .9s var(--float) both; }
@keyframes menu-in { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
.menu-inner {
  height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 0 var(--gutter) env(safe-area-inset-bottom);
}
.menu-head {
  display: flex; justify-content: space-between; align-items: center;
  height: 60px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2);
}
.menu-list {
  display: flex; flex-direction: column; justify-content: center; gap: .1em;
  font-family: var(--grotesk); font-weight: 700;
  font-size: clamp(40px, min(8vw, 11vh), 120px);
  line-height: 1; letter-spacing: -.02em;
}
.menu-item {
  display: flex; align-items: baseline; gap: .4em;
  width: fit-content;
  text-align: left;
  transition: filter .8s var(--ease), opacity .8s var(--ease);
}
.menu-item .n {
  font-family: var(--mono); font-weight: 400;
  font-size: 11px; letter-spacing: .06em;
  color: var(--ink-3);
  transform: translateY(-1.2em);
}
/* Fokus: der gezeigte Eintrag wird scharf, die anderen fallen ins Unscharfe */
@media (hover: hover) {
  .menu-list:has(.menu-item:hover) .menu-item:not(:hover) { filter: blur(.05em); opacity: .35; }
}
.menu-foot {
  display: flex; gap: 18px; align-items: center;
  min-height: 60px;
  text-transform: uppercase; letter-spacing: .06em;
}
.lang { display: flex; gap: .6em; align-items: center; color: var(--ink-3); }
.lang button { padding: 6px 2px; color: var(--ink-3); transition: color .6s var(--ease); }
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { color: var(--ink); }
.top-lang { gap: .45em; }   /* Kopfzeile: DE / EN neben Hell/Dunkel */

/* --- Rechtliches ---------------------------------------------------------- */
.legal {
  width: min(660px, calc(100vw - 2 * var(--gutter)));
  max-height: min(84vh, 900px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
}
.legal::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
.legal[open] { animation: auftauchen .9s var(--float) both; }
.legal[open]::backdrop { animation: menu-in .9s var(--float) both; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
.legal-inner { padding: 0 clamp(20px, 4vw, 36px) clamp(26px, 4vw, 40px); }
.legal-head {
  position: sticky; top: 0;
  display: flex; justify-content: space-between; align-items: center;
  height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  margin: 0 calc(clamp(20px, 4vw, 36px) * -1);
  padding: 0 clamp(20px, 4vw, 36px);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2);
}
.legal-close:hover { color: var(--ink); }
.legal-draft { margin-top: 18px; color: var(--mark); }
.legal article { padding-top: 26px; scroll-margin-top: 60px; }
.legal h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.legal p { font-family: var(--mono); font-size: 12px; line-height: 1.65; color: var(--ink-2); margin-bottom: 10px; max-width: 64ch; }
.legal strong { color: var(--ink); font-weight: 500; }
.legal p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ph { background: none; color: var(--ink); border-bottom: 1px dashed var(--mark); }
/* Über mich: dieselbe Ebene wie „Rechtliches", aber als Künstler-Statement — Name klein wie im Schriftzug,
   Text in der Serife (die Stimme der Person), darunter eine nüchterne Zeile wie ein Etikett */
.about { width: min(620px, calc(100vw - 2 * var(--gutter))); }
.about article { padding-top: 30px; }
/* Kopf: kleines Porträt neben dem Namen, wie auf einer Visitenkarte. Das Foto ist ein Gegenlicht-Abzug auf Weiß:
   multipliziert auf Papier gelegt — im Hellen geht das Weiß im Papier auf und nur die Silhouette steht auf der Seite,
   im Dunklen liegt es als kleiner Abzug auf Naturpapier da. */
.about-head { display: flex; align-items: flex-end; gap: clamp(14px, 3vw, 20px); margin: 0 0 24px; }
.about-photo {
  position: relative;
  flex: none; margin: 0;
  width: clamp(84px, 22vw, 124px); aspect-ratio: 1;
  background: var(--ink); isolation: isolate;
}
/* Glasplatte über dem Porträt (portrait-glass.js): der Canvas zeichnet das Foto samt Glas und ersetzt es sichtbar;
   das Multiplizieren mit dem Papierton passiert im Shader */
.about-glass { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }   /* schiebbar, senkrecht scrollt die Seite */
.about-glass.is-dragging { cursor: grabbing; }
.about-photo.has-glass img { opacity: 0; }
:root[data-theme="light"] .about-photo { background: var(--panel); }
/* Platzhalter statt Porträt: Fläche im Zinnober der Seite (einziger Akzentton), hell wie dunkel */
.about-photo.is-placeholder, :root[data-theme="light"] .about-photo.is-placeholder { background: var(--mark); }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; mix-blend-mode: multiply; }   /* Porträt 4:5 (Saschas Zuschnitt) */
.about-name {
  font-family: var(--grotesk); font-weight: 700;
  font-size: clamp(34px, 7vw, 46px); line-height: .9; letter-spacing: -.02em;
  margin: 0 0 -.06em;
}
.about .about-text {
  font-family: var(--text); font-weight: 400; letter-spacing: -.005em;
  font-size: clamp(16px, 2.2vw, 18px); line-height: 1.55;
  color: var(--ink); max-width: 33em; margin-bottom: 14px;
}
.about .about-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px;
  margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); max-width: none;
}
/* Vergleich ?about=blatt: großes Blatt wie eine Galerie-Seite — Porträt als Spalte bis an die Ränder, Text daneben */
/* etwa halb so groß wie anfangs (2026-10-05, Sascha) — für den kurzen Gruß reicht ein kleines Blatt */
html[data-about="blatt"] .about { width: min(600px, calc(100vw - 2 * var(--gutter))); }
html[data-about="blatt"] .about article {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(20px, 3vw, 32px);
  padding-top: 0; margin: 0 calc(clamp(20px, 4vw, 36px) * -1) calc(clamp(26px, 4vw, 40px) * -1);
}
html[data-about="blatt"] .about-head { display: contents; }
/* Bild rechts, Text links (2026-10-05, Sascha): die Silhouette neigt den Kopf nach links — so schaut sie in den Text */
html[data-about="blatt"] .about-photo { grid-column: 2; grid-row: 1 / span 6; width: 100%; height: 100%; min-height: 340px; aspect-ratio: auto; }
html[data-about="blatt"] .about-photo img { object-fit: cover; object-position: 50% 30%; }
html[data-about="blatt"] .about-name,
html[data-about="blatt"] .about .about-text,
html[data-about="blatt"] .about .about-meta { grid-column: 1; margin-left: clamp(20px, 4vw, 36px); }
html[data-about="blatt"] .about-name { margin-top: clamp(24px, 4vw, 34px); margin-bottom: 16px; font-size: clamp(30px, 3.6vw, 38px); }
html[data-about="blatt"] .about .about-text { font-size: clamp(15px, 1.6vw, 16px); }
html[data-about="blatt"] .about .about-meta { margin-bottom: clamp(20px, 3vw, 28px); align-self: end; }
@media (max-width: 700px) {
  html[data-about="blatt"] .about article { grid-template-columns: minmax(0, 1fr); }
  /* Handy: flaches Band statt bildschirmbreitem Quadrat (2026-10-06, Sascha: „erschlägt") — Kopf und Schultern */
  html[data-about="blatt"] .about-photo { grid-column: 1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 10; }
  html[data-about="blatt"] .about-photo img { object-position: 50% 16%; }
  html[data-about="blatt"] .about-name,
  html[data-about="blatt"] .about .about-text,
  html[data-about="blatt"] .about .about-meta { grid-column: 1; margin-left: clamp(20px, 4vw, 36px); }
  html[data-about="blatt"] .about .about-meta { margin-right: clamp(20px, 4vw, 36px); }
  html[data-about="blatt"] .about-name { margin-top: 26px; }
}
/* Vergleich ?about=band: Porträt als breites Band oben, darunter Name und Text */
html[data-about="band"] .about article { padding-top: 0; }
html[data-about="band"] .about-head { display: block; }
html[data-about="band"] .about-photo { width: auto; aspect-ratio: 16 / 9; margin: 0 calc(clamp(20px, 4vw, 36px) * -1) 26px; }
html[data-about="band"] .about-photo img { object-fit: cover; object-position: 50% 36%; }
.about .about-text:empty { display: none; }
html[data-about-font="mono"] .about .about-text { font-family: var(--mono); font-size: 14px; line-height: 1.65; letter-spacing: 0; }
html[data-about-font="serif"] .about .about-text { font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(17px, 2.4vw, 19px); line-height: 1.5; letter-spacing: 0; }
.about-links { display: flex; gap: 18px; }

/* --- Kontaktformular (Netlify Forms) -------------------------------------- */
.contact { width: min(520px, calc(100vw - 2 * var(--gutter))); }   /* eigene Klasse cf-field: „.field" ist der Hauptbereich der Seite */
.contact-form { display: grid; gap: 18px; padding-top: 26px; }
.cf-field { display: grid; gap: 6px; }
.cf-field > span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.cf-field input, .cf-field textarea {
  font-family: var(--text); font-size: 16px; line-height: 1.5;   /* 16 px: iOS zoomt beim Tippen nicht hinein */
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--tile-line); border-radius: 0;
  padding: 8px 0; resize: vertical; transition: border-color .6s var(--ease);
}
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.contact-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 0; }
.contact-send {
  min-height: 44px; padding: 0 22px;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--ink); border-radius: 4px; transition: background .6s var(--ease), color .6s var(--ease);
}
@media (hover: hover) { .contact-send:hover { background: var(--ink); color: var(--bg); } }
.contact-send:disabled { opacity: .5; cursor: progress; }
.contact-status { font-size: 12px; color: var(--ink-2); }
.contact-form.is-sent .contact-status { color: var(--ink); }
.contact-note { font-size: 11px; line-height: 1.7; color: var(--ink-2); margin: 4px 0 0; }
.contact-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.inline-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* Honigtopf gegen Spam-Bots */
.about-links a { color: var(--ink); }
.about-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Hinweis nach dem Lesen (app.js, ~4 s nach dem Öffnen, einmal): Lichtblitz mit Spektralsaum wie an der Notiz der
   Platte, als Lichtlauf erst „Instagram", dann „E-Mail" */
.about-links a.is-callout { animation: link-blitz .9s cubic-bezier(.25, .6, .3, 1); }
.about-links a.is-callout:nth-child(2) { animation-delay: .12s; }
@keyframes link-blitz {
  0%   { text-shadow: 0 0 0 transparent; }
  18%  { text-shadow: -1.6px 0 1px rgb(125 80 255 / .5), -.8px 0 1px rgb(40 165 255 / .4), .8px 0 1px rgb(255 205 50 / .4),
                      1.6px 0 1px rgb(255 80 45 / .5), 0 0 10px rgb(var(--sun-rgb, 255 255 255) / .85); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* --- Auftritt ------------------------------------------------------------- */
.in { animation: rise 1.6s var(--float) both; animation-delay: calc(var(--d, 0) * 100ms + 300ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
/* Hell/Dunkel: weich überblenden statt umschalten (View Transition, app.js) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .9s; animation-timing-function: cubic-bezier(.35, .1, .15, 1); }

/* --- Namens-Varianten: Standard ist hochkant (im <html> gesetzt, seit 2026-10-05);
   zum Vergleichen ?name=hierarchie | zeile | anschnitt | stapel (stapel = zwei gleich große Zeilen) */
html[data-name="hierarchie"] .mark .l1 { font-size: .34em; padding-left: .05em; }
html[data-name="hierarchie"] .mark .l2 { font-size: 1.32em; padding-left: 0; }

html[data-name="zeile"] .mark { --fs: clamp(56px, 10.5vw, 210px); white-space: nowrap; }
html[data-name="zeile"] .mark .ln { display: inline-block; }
html[data-name="zeile"] .mark .ln + .ln { padding-left: .26em; }

html[data-name="anschnitt"] .mark .l1 { font-size: .3em; padding-left: .08em; }
html[data-name="anschnitt"] .mark .l2 { font-size: 2.15em; padding-left: 0; }

/* hochkant: „sascha" senkrecht vor „pabst", von unten nach oben gelesen (wie ein Buchrücken). Die Tinte ist genau
   so lang wie das „p" hoch ist (Mittellänge bis Unterlänge) und sitzt deckungsgleich daneben — oben drüber wird es ruhig.
   Wie „pabst" behandelt: gleiche Laufweite relativ zur Schrift (−0,0227 em) und gleiche Unschärfe in Pixeln —
   beide liegen auf demselben Papier (sonst wirkte „sascha" schärfer und enger). Alles relativ, gilt bei jeder Größe;
   Werte gemessen an der Tinte, nicht an den Buchstabenkästen. Neu gemessen für Archivo Narrow (2026-10-07, Sascha:
   „muss ein bisschen runter und kann einen Tick größer sein") — mit den alten Inter-Werten endete „sascha" 20 px über
   der Unterlänge des „p"; jetzt Tinte = „p"-Höhe auf den Pixel (Desktop 154 px, Handy 85,5 px). */
html[data-name="hochkant"] .mark { display: flex; align-items: flex-start; }
html[data-name="hochkant"] .mark .l1 {
  font-size: .3542em; padding-left: 0; letter-spacing: -.0227em;
  writing-mode: vertical-rl; transform: rotate(180deg);
  margin-top: .8277em; margin-right: .1em;
  --blur: calc(var(--fs) * .0396);             /* = .03em von „pabst" (1,32em) */
  --ghost-blur: calc(var(--fs) * .103);        /* = .078em von „pabst" */
  --ghost-shift: translateX(calc(var(--fs) * -.066));   /* zweiter Abzug „unter" die gedrehte Schrift */
  /* einen Tick heller: Dieselbe Unschärfe frisst die dünneren Striche der kleinen Schrift stärker als die von
     „pabst". Die Striche werden darum minimal kräftiger (wie ein etwas fetterer Schnitt) — so behält „sascha"
     nach dem Verwischen mehr Kraft: im Dunklen heller, im Hellen dunkler. Das Glas rastert denselben Strich. */
  -webkit-text-stroke: .02em currentColor;
}
html[data-name="hochkant"] .mark .l2 { font-size: 1.32em; padding-left: 0; }
/* schmal: die senkrechte Spalte kostet Breite — Name etwas kleiner, damit der Seitenrand frei bleibt */
@media (max-width: 900px) { html[data-name="hochkant"] .mark { --fs: clamp(60px, 23.5vw, var(--fs-max)); } }

/* --- Niedrige Desktop-Bildschirme ----------------------------------------- */
@media (min-width: 901px) and (max-height: 820px) {
  .mark { --fs: clamp(84px, min(16vw, 28vh), var(--fs-max)); }
}

/* --- Tablet / Phone ------------------------------------------------------- */
@media (max-width: 900px) {
  .wide-only { display: none; }        /* Ortszeit wandert nach unten zum Stand */
  .narrow-only { display: inline; }
  .meta { align-items: flex-start; }
  .field { flex-direction: column; min-height: 0; }
  .hero { height: min(100vw, 64svh); margin: 0 calc(var(--gutter) * -1); width: auto; align-self: stretch; }
  .mark { --fs: clamp(64px, 25vw, 200px); }
  .readout { position: static; align-self: flex-end; margin-top: 6px; }
  .base { flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 28px; }
  .meta { order: 2; }
  .fine { flex-wrap: wrap; padding: 12px 0; row-gap: 6px; }
}
@media (max-width: 380px) {
  .tiles { gap: 2px; }
  .tile-link { width: 64px; }
  .tile { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .legal[open], .legal[open]::backdrop, .tiles .tile-link.is-in, .in, .mark .core, .mark .ln::after, .menu[open], .tile-link.is-soon .tile, .tile-link.is-soon .tile::after,
  .pin-inner.is-flash, .pin-dot.is-flash, .pin-inner.is-melt, .pin-inner.is-emerge, .pin-glow.is-on, .pin-glow.is-out,
  .about-links a.is-callout { animation: none; }
  .stage canvas { transition: none; }
  .mark { transition: none; }
}