/* ==========================================================================
   Tysk Berlin — Stylesheet zum finalen Design (tysk-final-design/)
   --------------------------------------------------------------------------
   Die Entwurfsdateien stylen alles inline; hier steht dasselbe als Klassen.
   Reihenfolge: Tokens → Schriften → Reset → Bausteine → Chrome → Seiten.

   Grundsaetze aus HANDOVER.md, die das ganze Blatt durchziehen:
   - Dark Mode ist der EINZIGE Modus. Kein prefers-color-scheme.
   - Radien global 0. Tiefe entsteht aus Ebenenwechsel und 1px-Linien,
     niemals aus Schatten.
   - Trennlinien werden als Rasterfuge gezeichnet: display:grid; gap:1px auf
     --c-hairline, die Kacheln bekommen den Ebenenhintergrund. Deshalb sieht
     man Fugen auch dort, wo gar kein border steht.
   - Horizontales Padding ist ueberall --pad-x, nie ein zentrierter Container.
   ========================================================================== */

/* Farbfassung „Variante K", abgenommen 12.08.2026 (temp-stuff/FARBEN-FINAL.md, gitignored, liegt nur lokal).
   Sie loest die Neon-Gelb-/Pink-/Oxblood-Fassung ab: das Signal ist jetzt ein
   Hunter Lime statt Neon-Gelb, der Zweitakzent ein Ekru statt Magenta, und die
   eine Vollflaeche pro Seite ist neutrales Dunkelgrau statt Oxblood.

   FARBE AENDERN — alles, was dafuer anzufassen ist:
   1. den Wert hier im :root-Block. Sonst nichts im Blatt: es gibt weiter unten
      keinen einzigen rohen Farbwert mehr, auch keine halbtransparenten. Die
      leiten sich per color-mix() aus den Tokens ab.
   2. `--c-on-<farbe>` mitdenken, wenn die neue Farbe die Helligkeit wechselt.
      Auf einer hellen Flaeche steht schwarze Schrift, auf einer dunklen helle.
   3. `pw/site/templates/img/anfahrt-tysk.svg` — die eine Datei ausserhalb
      dieses Blatts, die eine Markenfarbe fuehrt. Sie steht dort in ihrem
      eigenen <style>-Block ganz oben, ebenfalls an genau einer Stelle.
   Klassennamen nennen nie eine Farbe, sondern die Rolle (--signal, --accent,
   .block). Ein Farbwechsel bleibt damit ein Wertwechsel und wird nie zu einer
   Umbenennung quer durch die Templates. */
:root {
	/* Dunkel-Ebenen */
	--c-base:     #000000;   /* Seitengrund, Hero, Overlay */
	--c-surface:  #070707;   /* Prozess-Karten, Footer-Spalten */
	--c-elevated: #101010;   /* Meta-Chips, aktiver Sprach-Tab */
	--c-block:    #2A2A2A;   /* Ankerflaeche: hoechstens EINE Vollflaeche/Seite */
	--c-hairline: #1F1F1F;   /* alle Trennlinien + Raster-Fugen */

	/* Text. Die Kontrastwerte stehen dabei, weil sie im Review geprueft wurden. */
	--c-text:       #F4F4F4; /* Fliesstext, Headlines   17.3:1 */
	--c-text-muted: #969696; /* Sekundaertext            7.1:1 */
	--c-meta:       #868686; /* Spaltenlabels            5.5:1 */
	--c-dim:        #8C8C8C; /* Marke, inaktiver Sprach-Tab  6.3:1 */
	--c-on-block:   #D6D6D6; /* Fliesstext auf --c-block  9.9:1 */
	/* Reines Weiss, kein --c-text: Kachel-Titel stehen auf Fotos, und dort
	   traegt der Verlauf sie nur bei vollem Kontrast. */
	--c-on-media:   #FFFFFF;
	/* --c-ghost ist DEKORATION (3.1:1). Nie fuer etwas verwenden, das
	   gelesen werden soll — das wurde im Review zweimal beanstandet. */
	--c-ghost:      #545454;

	/* Signal. Schrift auf einer Signalflaeche ist IMMER --c-on-signal, nie
	   --c-text: ein dunklerer Gruenton mit heller Schrift verfehlte AA und
	   wurde deshalb verworfen. Einen zweiten Gruenton gibt es nicht. */
	--c-signal:    #77A43D;  /* Primaer-CTA, Links, Fokusring   7.2:1 */
	--c-signal-hi: #8FBF4D;  /* ausschliesslich Hover/Aktiv     9.7:1 */
	--c-on-signal: #000000;  /* Schrift auf --c-signal */

	/* Ekru, sparsam: Outline-Buttons, Material-Kante, Schnittmarken, Kicker auf
	   --c-block. Nie als grosse Flaeche — dafuer ist es zu hell und zerreisst
	   das dunkle Layout; als Button-Fuellung beim Hover geht es. */
	--c-accent:    #E3D083;
	--c-on-accent: #000000;  /* Schrift auf --c-accent */

	/* Abgeleitete Halbtransparenzen. Sie stehen hier und nicht als rgba() an der
	   Fundstelle, damit eine Farbaenderung oben wirklich alles mitnimmt: eine
	   var(--c-accent-line) irgendwo im Blatt haette den alten Ekru-Ton
	   ueberlebt und waere erst Wochen spaeter als Farbstich aufgefallen.
	   color-mix() gibt es seit 2023 in allen aktuellen Browsern. */
	--c-accent-line:  color-mix(in srgb, var(--c-accent) 45%, transparent);
	--c-signal-wash:  color-mix(in srgb, var(--c-signal)  9%, transparent);
	--c-text-line:    color-mix(in srgb, var(--c-text)   40%, transparent);

	--f-display: 'Jost', sans-serif;
	--f-body:    'Nunito Sans', system-ui, sans-serif;
	--f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--pad-x: clamp(18px, 4.5vw, 76px);
	--ease: cubic-bezier(.2, .8, .2, 1);
	--dur: 200ms;
	--dur-slow: 260ms;

	/* Hoehe der Kopfleiste — Scroll-Ziele muessen darunter freibleiben. */
	--header-h: 72px;
}

/* ---------------------------------------------------------------- Schriften */
/* Selbst gehostet, nicht ueber fonts.googleapis.com: ein Aufruf dort uebertraegt
   die IP des Besuchers in die USA und waere in der Datenschutzerklaerung
   anzugeben. Die Dateien liegen in templates/fonts/. */

@font-face {
	font-family: 'Jost';
	src: url('../fonts/jost-variable.woff2') format('woff2-variations');
	font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/nunito-sans-variable.woff2') format('woff2-variations');
	font-weight: 200 1000; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-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+2000-206F, U+2074, 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/ibm-plex-mono-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-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
	font-weight: 500; 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+2000-206F, U+2074, 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/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
	font-weight: 500; 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-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------- Reset */

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

/* hidden muss gewinnen, IMMER.
 *
 * Das Attribut wirkt nur ueber `[hidden] { display: none }` im Stylesheet des
 * Browsers, und jede Autorenregel schlaegt das — Spezifitaet spielt dabei
 * keine Rolle, Autorenregeln stehen grundsaetzlich darueber. In diesem Blatt
 * tragen rund vierzig Klassen ein `display`, und jede davon macht `hidden`
 * an ihrem Element wirkungslos.
 *
 * Konkret hat das die dreistufige Buchung auf /termine/ ausgehebelt:
 * booking.php gibt die Schritte 2 und 3 mit `hidden` aus, booking.js:81
 * schaltet ausschliesslich ueber dasselbe Attribut — aber `.step` steht auf
 * `display: grid`, also standen von Anfang an alle drei Schritte
 * untereinander auf der Seite. Dasselbe traf `.slots`.
 *
 * !important ist hier kein Holzhammer, sondern die einzige Fassung, die
 * haelt: ohne es gewinnt jede spaetere display-Regel wieder. */
[hidden] { display: none !important; }

html { background: var(--c-base); scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--c-base);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: 1.0625rem;   /* 17px — Grundgroesse des Entwurfs */
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--c-signal); text-decoration: none; }
a:hover { color: var(--c-signal-hi); }

:focus-visible { outline: 2px solid var(--c-signal); outline-offset: 4px; }
::selection { background: var(--c-signal); color: var(--c-on-signal); }

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}
h1 { font-size: clamp(2.75rem, 10.5vw, 8.5rem); line-height: .82; letter-spacing: -.05em; }
h2 { font-size: clamp(1.875rem, 4.4vw, 4rem);   line-height: .95; letter-spacing: -.035em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem);   line-height: 1.1; letter-spacing: -.015em; }

p { margin: 0; text-wrap: pretty; }

hr { border: 0; border-top: 1px solid var(--c-hairline); margin: 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* =========================================================== Grundbausteine */

/* Horizontales Seitenmass. Ersetzt den frueheren zentrierten .container:
   das Design ist randlos, die linke Textkante ist die Konstante. */
.wrap { padding-inline: var(--pad-x); }

/* Mono-Zeile ueber jeder Ueberschrift („Zuschnitte aus dem Atelier“). */
.eyebrow {
	font-family: var(--f-mono);
	font-size: .75rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-signal);
}
.eyebrow--muted { color: var(--c-meta); letter-spacing: .18em; }

/* Kleinste Label-Rolle. Untergrenze 0.75rem, darunter nichts. */
.meta {
	font-family: var(--f-mono);
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-meta);
}

.lead {
	font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
	line-height: 1.55;
	color: var(--c-text);
}
.muted { color: var(--c-text-muted); }

/* Film-Grain. Braucht ein Pseudo-Element, ist inline nicht abbildbar. */
.grain { position: relative; }
.grain::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	opacity: .22; mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Schnittmarken in Ekru an zwei gegenueberliegenden Ecken. Rein dekorativ. */
.notch { position: relative; }
.notch::before, .notch::after {
	content: ''; position: absolute; width: 12px; height: 12px;
	opacity: .7; pointer-events: none;
}
.notch::before { left: 10px; top: 10px;
	border-top: 1px solid var(--c-accent); border-left: 1px solid var(--c-accent); }
.notch::after { right: 10px; bottom: 10px;
	border-bottom: 1px solid var(--c-accent); border-right: 1px solid var(--c-accent); }

/* ------------------------------------------------------------------ Buttons */

.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 0 26px;
	font-family: var(--f-display); font-weight: 700; font-size: 1rem;
	letter-spacing: .02em; text-transform: uppercase; text-align: center;
	border: 1px solid transparent; cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease);
}
/* Genau EIN gruener Button gleichzeitig im Bild — die Hierarchie steckt in der
   Wahl der Modifier, nicht im CSS. */
.btn--signal  { background: var(--c-signal); border-color: var(--c-signal); color: var(--c-on-signal); }
.btn--signal:hover { background: transparent; color: var(--c-signal); }

.btn--accent  { background: transparent; border-color: var(--c-accent); color: var(--c-accent); }
.btn--accent:hover { background: var(--c-accent); color: var(--c-on-accent); }

.btn--ghost   { background: transparent; border-color: var(--c-hairline); color: var(--c-text); }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Auf der Ankerflaeche. Der Knopf steht dort in der Zweitfarbe, nicht im
   Signal: die Kopfleiste ist sticky und traegt auf denselben Seiten bereits
   einen Signal-CTA, teils sogar mit demselben Ziel. Zwei gleich aussehende
   Knoepfe im Bild waeren keine Hierarchie mehr, sondern ein Dopplungsfehler.
   Die Modifier heissen nach der Flaeche, auf der sie liegen — nicht nach der
   Farbe, die sie gerade haben. */
.btn--on-block { background: transparent; border-color: var(--c-accent); color: var(--c-accent); }
.btn--on-block:hover { background: var(--c-accent); color: var(--c-on-accent); }
.btn--on-block-quiet { background: transparent; border-color: var(--c-text-line); color: var(--c-on-block); }
.btn--on-block-quiet:hover { border-color: var(--c-text); color: var(--c-text); }

.btn--lg { min-height: 56px; padding: 0 30px; font-size: 1.0625rem; }
.btn--sm { min-height: 48px; padding: 0 22px; font-size: .9375rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Textlink mit Pfeil und Unterkante — der „leise“ CTA. */
.link-arrow {
	display: inline-flex; align-items: baseline; gap: 12px;
	min-height: 44px; width: fit-content;
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(1.0625rem, 1.6vw, 1.375rem); text-transform: uppercase;
	color: var(--c-text);
	border-bottom: 1px solid var(--c-hairline); padding-bottom: 6px;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-arrow:hover { color: var(--c-signal); border-color: var(--c-signal); }
.link-arrow--mono {
	font-family: var(--f-mono); font-weight: 400; font-size: .8125rem;
	letter-spacing: .18em; color: var(--c-accent);
	border-bottom-color: var(--c-accent-line);
}
.link-arrow--mono:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* --------------------------------------------------------------- Skip-Link */

.skip-link {
	position: fixed; top: 8px; left: 8px; z-index: 200;
	transform: translateY(-200%);
	background: var(--c-signal); color: var(--c-on-signal);
	padding: 12px 18px;
	font-family: var(--f-mono); font-size: .8125rem;
	letter-spacing: .16em; text-transform: uppercase;
}
.skip-link:focus { transform: translateY(0); color: var(--c-base); }

/* ================================================================== Kopfzeile */

.site-header {
	position: sticky; top: 0; z-index: 90;
	background: rgba(0, 0, 0, .92);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--c-hairline);
}
.header-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding-inline: var(--pad-x); min-height: var(--header-h);
}
/* Die Wortmarke ist ein SVG, kein Schriftzug: links das Sechseck mit dem
   ausgesparten Tigerkopf, rechts „Tysk Berlin". Die Datei liegt schwarz auf
   transparent vor — invert dreht sie ins Helle, brightness hebt sie auf die
   Textfarbe. Die Aussparung bleibt transparent und zeigt den Kopfhintergrund. */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img {
	display: block; height: 52px; width: auto;
	filter: invert(1) brightness(1.04);
}

.header-tools { display: flex; align-items: stretch; gap: clamp(6px, 1.5vw, 18px); }

.lang-switch {
	display: flex; align-self: center; gap: 1px;
	background: var(--c-hairline); border: 1px solid var(--c-hairline);
	font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em;
}
.lang-switch a {
	display: flex; align-items: center; padding: 0 10px; min-height: 30px;
	background: var(--c-base); color: var(--c-dim);
}
.lang-switch a:hover { color: var(--c-signal); }
.lang-switch a[aria-current="page"] { background: var(--c-elevated); color: var(--c-text); }

/* Kopf-CTA. Auf Seiten ohne Hero steht er sofort, auf der Startseite faehrt er
   erst auf, wenn der Hero-CTA oben rausgescrollt ist — sonst konkurrieren zwei
   gruene Buttons im selben Bild. Die Umschaltung macht main.js ueber .is-hidden.
   max-width/padding/border-width muessen zusammen auf 0, sonst bleibt eine
   Phantom-Luecke in der Leiste stehen. */
.btn-top {
	display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden;
	padding: 0 clamp(12px, 1.6vw, 20px); min-height: 44px; max-width: 260px;
	background: var(--c-signal); color: var(--c-on-signal);
	border: 1px solid var(--c-signal);
	font-family: var(--f-display); font-weight: 700; font-size: .9375rem;
	letter-spacing: .02em; text-transform: uppercase;
	transition: max-width var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease),
	            border-width var(--dur-slow) var(--ease), opacity var(--dur) var(--ease),
	            background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-top:hover { background: transparent; color: var(--c-signal); }
.btn-top--accent { background: transparent; border-color: var(--c-accent); color: var(--c-accent); }
.btn-top--accent:hover { background: var(--c-accent); color: var(--c-base); }
.btn-top.is-hidden {
	max-width: 0; padding-inline: 0; border-width: 0;
	opacity: 0; pointer-events: none;
}

/* Zwei Balken MIT Textlabel — ohne Label waere das Icon mehrdeutig. */
.nav-toggle {
	display: flex; align-items: center; gap: 10px;
	min-height: 44px; min-width: 44px; padding: 0 clamp(8px, 1.5vw, 14px);
	background: transparent; border: 1px solid var(--c-hairline);
	color: var(--c-text); cursor: pointer;
	font-family: var(--f-mono); font-size: .8125rem;
	letter-spacing: .16em; text-transform: uppercase;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-toggle:hover { border-color: var(--c-signal); color: var(--c-signal); }
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars span { display: block; height: 1px; background: currentColor; }

/* ==================================================== Vollbild-Navigation */

.nav-overlay {
	position: fixed; inset: 0; z-index: 100;
	background: var(--c-base);
	display: none; grid-template-rows: auto minmax(0, 1fr) auto;
	opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
.nav-overlay.is-mounted { display: grid; }
.nav-overlay.is-open { opacity: 1; }

/* Bildvorschau je Navigationspunkt. Bewusst <div> mit background-image statt
   <img src>: bei einem <img> wuerde ein leerer Pfad als URL angefordert. */
.nav-overlay__previews { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.nav-preview {
	position: absolute; right: 0; top: 0; width: 46%; height: 100%;
	background-size: cover; background-position: center;
	opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
.nav-preview.is-active { opacity: .9; }
.nav-overlay__veil {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, #000 34%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.88) 100%);
}

.nav-overlay__head {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding-inline: var(--pad-x); min-height: var(--header-h);
	border-bottom: 1px solid var(--c-hairline);
}
.nav-close {
	display: flex; align-items: center; gap: 10px;
	min-height: 44px; padding: 0 14px;
	background: transparent; border: 1px solid var(--c-hairline);
	color: var(--c-text); cursor: pointer;
	font-family: var(--f-mono); font-size: .8125rem;
	letter-spacing: .16em; text-transform: uppercase;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-close:hover { border-color: var(--c-accent); color: var(--c-accent); }

.nav-overlay__body {
	position: relative; overflow-y: auto;
	padding: clamp(24px, 5vh, 64px) var(--pad-x);
}
.nav-main {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp(2px, .6vh, 8px); max-width: 15ch;
}
.nav-main li {
	opacity: 0; transform: translateY(18px);
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.is-open .nav-main li { opacity: 1; transform: translateY(0); }
/* Gestaffelter Einlauf. Sechs Punkte reichen; ein siebter laeuft ohne Verzoegerung. */
.is-open .nav-main li:nth-child(1) { transition-delay:  60ms; }
.is-open .nav-main li:nth-child(2) { transition-delay: 105ms; }
.is-open .nav-main li:nth-child(3) { transition-delay: 150ms; }
.is-open .nav-main li:nth-child(4) { transition-delay: 195ms; }
.is-open .nav-main li:nth-child(5) { transition-delay: 240ms; }
.is-open .nav-main li:nth-child(6) { transition-delay: 285ms; }

.nav-main a {
	display: flex; align-items: baseline; gap: clamp(10px, 2vw, 22px);
	padding: clamp(2px, .5vh, 6px) 0;
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(2.25rem, 7.5vw, 5.5rem); line-height: .94;
	letter-spacing: -.035em; text-transform: uppercase;
	color: var(--c-text);
	transition: color var(--dur) var(--ease);
}
.nav-main a[aria-current] { color: var(--c-signal); }
/* Sobald ein Punkt angesteuert wird, treten die anderen zurueck. Das
   Geschwister-Dimmen laeuft ueber eine Klasse am <ul>, die main.js setzt. */
.nav-main.is-hovering a { color: var(--c-ghost); }
.nav-main.is-hovering a:hover,
.nav-main.is-hovering a:focus-visible { color: var(--c-signal); }

.nav-secondary {
	list-style: none; margin: clamp(28px, 5vh, 56px) 0 0;
	padding: clamp(18px, 3vh, 26px) 0 0;
	border-top: 1px solid var(--c-hairline);
	display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 3vw, 34px);
	max-width: 60ch;
	font-family: var(--f-mono); font-size: .8125rem;
	letter-spacing: .16em; text-transform: uppercase;
}
.nav-secondary a {
	display: inline-flex; align-items: center; min-height: 32px; padding: 6px 0;
	color: var(--c-text-muted);
}
.nav-secondary a:hover { color: var(--c-signal); }
.nav-secondary a[aria-current] { color: var(--c-signal); }

.nav-overlay__foot {
	position: relative;
	display: flex; flex-wrap: wrap; gap: 14px clamp(20px, 4vw, 56px);
	align-items: center; justify-content: space-between;
	padding: 20px var(--pad-x); border-top: 1px solid var(--c-hairline);
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .14em; text-transform: uppercase;
}
.nav-overlay__contact { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.nav-overlay__contact a { color: var(--c-text); }
.nav-overlay__contact a:hover { color: var(--c-signal); }
.nav-overlay__contact .is-social { color: var(--c-text-muted); }
.nav-overlay__foot .lang-switch a[aria-current="page"] {
	background: var(--c-signal); color: var(--c-on-signal);
}

/* ================================================================== Brotkrumen */

.breadcrumb {
	padding: 18px var(--pad-x) 0;
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta);
}
.breadcrumb a { color: var(--c-dim); }
.breadcrumb a:hover { color: var(--c-signal); }
.breadcrumb [aria-current] { color: var(--c-text); }

/* ================================================================= Seitenkopf */

.page-head {
	display: grid; gap: clamp(20px, 2.6vw, 30px);
	padding: clamp(26px, 4vw, 52px) var(--pad-x) clamp(28px, 3.6vw, 48px);
}
.page-head--bordered { border-bottom: 1px solid var(--c-hairline); }
.page-head__row {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: space-between; gap: 24px clamp(28px, 5vw, 72px);
}
.page-head__lead {
	margin-bottom: 6px; max-width: 42ch;
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.55;
	color: var(--c-text-muted);
}
.page-head__intro { max-width: 46ch; }

/* Abschnittskopf mit H2 (Startseite, Unterseiten). */
.section-head {
	display: flex; flex-wrap: wrap; gap: 14px 32px;
	align-items: baseline; justify-content: space-between;
	padding: clamp(48px, 7vw, 104px) var(--pad-x) clamp(24px, 3vw, 40px);
}
.section-head--stacked { display: grid; gap: 18px; }

.section { border-bottom: 1px solid var(--c-hairline); }
.section__body { padding: clamp(24px, 3vw, 40px) var(--pad-x) clamp(48px, 7vw, 96px); }

/* ====================================================================== Hero */

.hero {
	position: relative; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	border-bottom: 1px solid var(--c-hairline);
}
.hero__text {
	display: grid; align-content: center; gap: clamp(22px, 3vw, 38px);
	padding: clamp(48px, 8vw, 128px) var(--pad-x);
}
.hero__text h1 {
	font-size: clamp(2.75rem, 8.6vw, 7.5rem);
	line-height: .86; letter-spacing: -.042em;
}
/* Die hervorgehobene Zeile der Hero-Headline traegt dieselbe Farbe wie die
   Abschluss-Headline weiter unten (.cta-section h2 em) — Anfang und Ende der
   Seite gehoeren zusammen. */
.hero__text h1 em { font-style: normal; color: var(--c-signal); }
.hero__lead { max-width: 44ch; }
/* Das Seitenverhaeltnis der ausgelieferten Datei (1400x1600 in home.php),
   gesetzt als UNTERGRENZE — nicht als feste Groesse.

   Warum nicht `aspect-ratio`: das legt die Hoehe fest, und Grid dehnt einen
   Rasterposten mit fester Hoehe nicht mehr. Zwischen rund 960 und 1350 px
   ist aber die Textspalte die hoehere von beiden — der Fliesstext bricht
   dort auf mehr Zeilen um —, und unter dem Bild klaffte der Hintergrund
   auf: gemessen 69 px bei 1300, 86 px bei 1000, 180 px bei 960.

   Den Ausschlag gibt `min-height: 100%`. Der Standardwert von align-self ist
   `normal`, und `normal` verhaelt sich bei einem Rasterposten MIT
   Seitenverhaeltnis wie `start` — die Box behaelt ihr Format und die Zeile
   bleibt hoeher. Genau das war die Luecke. Ein prozentuales min-height
   loest gegen die fertige Zeilenhoehe auf und zieht die Zelle auf die volle
   Zeile. Damit ist das Seitenverhaeltnis eine Untergrenze — es bestimmt die
   Zeilenhoehe, solange der Text kuerzer ist, und tritt zurueck, sobald er
   laenger wird.

   NICHT `align-self: stretch` benutzen, obwohl es hier dasselbe tut: WebKit
   zieht bei einem gestreckten Rasterposten das Seitenverhaeltnis nicht in
   die Zeilenberechnung, und mit `min-height: 0` fiel die Zelle auf Null
   zusammen. Gemessen in WebKit bei einspaltigem Raster (unter rund 920 px):
   Hero-Zelle 1 px, Marken-Zelle 0 px — auf dem iPhone waren beide Bilder
   schlicht weg, in der Responsive-Ansicht von Chrome dagegen nie, weil
   Blink das Seitenverhaeltnis mitrechnet. Mit `min-height: 100%` liefern
   beide Engines dieselben Hoehen.

   (Ein Platzhalter mit prozentualem padding-top taete es NICHT: bei der
   Zeilenberechnung zaehlt prozentuales Padding als Null, die Zeile bliebe
   bei der Texthoehe und der Platzhalter wuerde abgeschnitten — gemessen
   scrollHeight 1069 gegen clientHeight 881.)

   Der Ausschnitt kann dadurch nur in eine Richtung abweichen: die Zelle wird
   hoeher, nie flacher. object-fit: cover schneidet dann links und rechts
   statt oben und unten — der Kopf bleibt also im Bild, was bei einem
   Hochformat die einzig brauchbare Richtung ist. */
.hero__media {
	position: relative; overflow: hidden;
	aspect-ratio: 7 / 8; min-height: 100%;
	border-left: 1px solid var(--c-hairline);
}
.hero__media img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 52% 40%;
	filter: brightness(.82) contrast(1.06) saturate(.92);
}
.hero__media::before {
	content: ''; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.3) 100%);
}
/* Ohne Bild traegt die Hero-Flaeche nur den Verlauf — kein Loch im Layout. */
.hero__media--empty { background: linear-gradient(160deg, var(--c-elevated), var(--c-base)); }

/* ==================================================================== Ticker */

.ticker {
	position: relative; overflow: hidden;
	border-bottom: 1px solid var(--c-hairline);
	background: var(--c-surface); padding: 13px 0;
}
.ticker__track {
	display: flex; width: max-content;
	font-family: var(--f-mono); font-size: .8125rem;
	letter-spacing: .24em; text-transform: uppercase; color: var(--c-text-muted);
	animation: tyskTicker 34s linear infinite;
}
.ticker__item {
	display: inline-flex; align-items: center;
	gap: clamp(16px, 2vw, 26px); padding-right: clamp(16px, 2vw, 26px);
	white-space: nowrap;
}
/* Jedes dritte Wort in Signalfarbe — Rhythmus, keine Bedeutung. */
.ticker__item:nth-child(3n) { color: var(--c-signal); }
.ticker__mark { height: .9em; width: auto; flex: 0 0 auto; opacity: .85; }
/* Von 0 auf -50%: der Track enthaelt die Wortliste doppelt, dadurch ist der
   Sprung am Ende deckungsgleich mit dem Anfang. */
@keyframes tyskTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ======================================================== Editorial-Index */
/* Kategorienliste der Startseite: Zeilen mit Tigerkopf, Name und Meta-Chip,
   dazu ein Bild, das beim Ueberfahren hinter der Liste aufblendet. */

.index { position: relative; overflow: hidden; border-top: 1px solid var(--c-hairline); }
.index__layers { position: absolute; inset: 0; }
.index__layer {
	position: absolute; inset: 0;
	background-size: cover; background-position: 72% 34%;
	opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
.index__layer.is-active { opacity: 1; }
.index__veil {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, #000 3%, rgba(0,0,0,.8) 32%, rgba(0,0,0,.2) 72%, rgba(0,0,0,.92) 100%);
}
.index__list {
	position: relative; list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1px; background: var(--c-hairline);
}
.index__list > li { background: transparent; }
.index-row {
	display: flex; flex-wrap: wrap; gap: 10px clamp(16px, 4vw, 48px);
	align-items: center; justify-content: space-between;
	padding: clamp(14px, 2.2vw, 26px) var(--pad-x); min-height: 76px;
	transition: background var(--dur) var(--ease);
}
/* Der Alphawert ist gegenueber dem Neon-Gelb (.055) angehoben: Hunter Lime ist
   deutlich dunkler, bei gleichem Alpha waere die Zeile praktisch unmarkiert.
   .09 trifft die Aufhellung des Gruenkanals der alten Fassung. */
.index-row:hover { background: var(--c-signal-wash); }
.index-row__left {
	display: flex; align-items: baseline; gap: clamp(12px, 2.5vw, 32px); min-width: 0;
}
/* Tigerkopf als Kontur-Marke statt Ziffern: er zaehlt nichts und behauptet
   keine Reihenfolge — die Startseite zeigt bewusst nur einen Auszug. */
.index-row__mark {
	align-self: center; height: clamp(30px, 3.4vw, 42px); width: auto;
	flex: 0 0 auto; color: var(--c-dim);
	transition: color var(--dur) var(--ease);
}
.index-row__name {
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(1.75rem, 5.4vw, 4.25rem); line-height: .94;
	letter-spacing: -.038em; text-transform: uppercase; color: var(--c-text);
	transition: color var(--dur) var(--ease);
}
.index__list.is-hovering .index-row__name { color: var(--c-ghost); }
.index-row:hover .index-row__name,
.index-row:focus-visible .index-row__name { color: var(--c-signal); }
.index-row:hover .index-row__mark { color: var(--c-signal); }
.index-row__meta {
	display: grid; gap: 5px; justify-items: end; text-align: right;
	background: var(--c-elevated); padding: 9px 12px; white-space: nowrap;
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted);
}

@media (max-width: 560px) {
	/* Unter 560px immer zweizeilig statt unregelmaessigem Umbruch. */
	.index-row { flex-wrap: nowrap; flex-direction: column; align-items: flex-start; gap: 12px; }
	.index-row__name { font-size: clamp(1.625rem, 8.5vw, 2.5rem); }
	.index-row__meta { justify-items: start; text-align: left; }
}

/* ============================================================ Ablaufschritte */

.steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 1px; background: var(--c-hairline); border-top: 1px solid var(--c-hairline);
}
.steps li {
	background: var(--c-surface);
	display: grid; gap: 16px; align-content: start;
	padding: clamp(28px, 3.5vw, 48px) clamp(20px, 3vw, 40px) clamp(36px, 4.5vw, 60px);
}
/* Geister-Ziffer: 2.5:1 und damit weit unter AA — deshalb aria-hidden im
   Markup. Sie ist Textur, keine Information. */
.steps__num {
	font-family: var(--f-display); font-weight: 300;
	font-size: clamp(3.5rem, 7vw, 6rem); line-height: .8;
	letter-spacing: -.05em; color: var(--c-block);
}
.steps li p { max-width: 38ch; color: var(--c-text-muted); }

/* ===================================================== Zweispaltige Bloecke */

.split {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	border-bottom: 1px solid var(--c-hairline);
}
.split__media { position: relative; overflow: hidden; margin: 0; min-height: clamp(300px, 46vh, 620px); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bildzellen mit festem Seitenverhaeltnis. Ohne sie haengt die Hoehe am Text
   der Nachbarspalte — gemessen 740x872 statt eines definierten Formats.
   min-height muss dabei zurueckgenommen werden, sonst gewinnt es bei schmalen
   Spalten gegen das Seitenverhaeltnis.

   3/4 ist die Vorgabe des Entwurfs: .tysk-portrait kennt drei Varianten
   (1/1, 3/4, 5/4) und steht per data-props auf "hoch" (Ueber Tysk.dc.html:30),
   .tysk-markefig ist fest 3/4 (:31). */
.split__media--portrait,
.split__media--marke { aspect-ratio: 3 / 4; min-height: 0; }
/* Der Marken-Block der Startseite. Der Entwurf gibt hier kein Format vor, die
   Hoehe kam bisher aus der Textspalte — gemessen 937x538 (1,740) gegen 1,218
   im Entwurf. Das Portrait wurde dadurch deutlich staerker angeschnitten als
   gezeichnet, und der Anschnitt verschob sich mit jeder Fensterbreite.
   5/4 ist das flachste der drei Portraitformate des Entwurfs und liegt 2,6 %
   neben dem gemessenen Wert — unterhalb dessen, was man sieht.

   Untergrenze statt festem Format, mit `min-height: 100%` aus demselben
   Grund wie beim Hero — siehe den Block bei .hero__media, dort steht auch,
   warum es nicht `align-self: stretch` sein darf. Hier ist die Zelle
   quer und das Bild hoch, ein Aufziehen zeigt also sogar mehr vom Portrait. */
.split__media--brand { aspect-ratio: 5 / 4; min-height: 100%; }
/* Anschnitte aus dem Entwurf: Ueber Tysk.dc.html:140 (Portrait), :166 (Marke)
   und Startseite.dc.html:216 (Marken-Split der Startseite, ohne festes
   Seitenverhaeltnis — dort gibt der Entwurf nur min-height vor). */
.split__media--portrait img { object-position: 50% 8%; }
.split__media--marke img    { object-position: 50% 25%; }
.split__media--brand img    { object-position: 50% 20%; }
/* Die Bildspalte neben der Ankerflaeche ist im Entwurf flacher als die
   uebrigen Split-Bilder und haengt an der BREITE, nicht an der Fensterhoehe
   (Ueber Tysk.dc.html:230). Mit 46vh wuerde der Streifen auf einem hohen
   Bildschirm immer weiter wachsen, ohne dass mehr Inhalt dazukommt. */
.split__media--samples { min-height: clamp(260px, 30vw, 420px); }
/* Steht der Text links, gehoert die Fuge an seine rechte Kante. */
.split__text--lead { border-left: 0; border-right: 1px solid var(--c-hairline); }
@media (max-width: 860px) { .split__text--lead { border-right: 0; } }
.split__text {
	display: grid; align-content: center; gap: clamp(20px, 2.6vw, 32px);
	padding: clamp(48px, 7vw, 104px) var(--pad-x);
	border-left: 1px solid var(--c-hairline);
}
.split__text p { max-width: 42ch; }
/* Auf einer Spalte hat die linke Kante keine Nachbarin mehr. */
@media (max-width: 860px) { .split__text { border-left: 0; } }

/* Bildunterschrift auf dem Bild. */
.figcap {
	position: absolute; left: 0; bottom: 0; padding: 12px 16px;
	background: rgba(0, 0, 0, .6);
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--c-text);
}

/* Die eine Ankerflaeche pro Seite (frueher Oxblood). Nie zwei. */
.block { background: var(--c-block); color: var(--c-text); }
/* .tile steht weiter unten im Blatt und setzt --c-base bei gleicher
   Spezifitaet. Die Kombination braucht deshalb ihre eigene Regel (0,2,0),
   sonst rendert die Ankerkachel schwarz. */
.tile.block { background: var(--c-block); }
.block p { color: var(--c-on-block); }
.block .eyebrow { color: var(--c-accent); }
.block__panel {
	display: grid; align-content: center; gap: clamp(16px, 2vw, 24px);
	padding: clamp(34px, 4.4vw, 72px) clamp(20px, 3.4vw, 56px);
}
/* Die Ueberschrift der Ankerflaeche ist im Entwurf nie so gross wie eine
   Seiten-h2 — in keinem der drei Blaetter, die eine haben (Ueber Tysk 3.5rem,
   Atelier 3rem, Arbeiten Hosen 2.75rem). Ohne eigene Regel erbt sie die
   globalen 4rem und treibt den ganzen Streifen in die Hoehe: gemessen 64px
   statt 56px. Die beiden Breitengrenzen halten Zeile und Absatz zusammen,
   statt sie ueber die volle Spalte laufen zu lassen. */
.block__panel h2 {
	font-size: clamp(1.875rem, 4.2vw, 3.5rem);
	line-height: .94; letter-spacing: -.04em; max-width: 16ch;
}
.block__panel p { max-width: 46ch; }

/* Material-Teaser: erhoehte Ebene mit Ekru-Oberkante. */
.teaser {
	background: var(--c-elevated);
	border-top: 1px solid var(--c-accent);
	border-bottom: 1px solid var(--c-hairline);
}
.teaser__inner {
	display: grid; gap: clamp(18px, 2.4vw, 28px);
	padding: clamp(44px, 6vw, 88px) var(--pad-x); max-width: 78ch;
}
.teaser h2 { font-weight: 300; font-size: clamp(1.5rem, 3.2vw, 2.75rem); line-height: 1.05; letter-spacing: -.025em; }
.teaser p { max-width: 52ch; color: var(--c-text-muted); }

/* Abschluss-CTA mit sehr grosser Zeile. */
.cta-section { border-bottom: 1px solid var(--c-hairline); }
.cta-section__inner {
	display: grid; gap: clamp(28px, 4vw, 48px);
	padding: clamp(56px, 9vw, 140px) var(--pad-x);
}
.cta-section h2 {
	font-size: clamp(2.5rem, 10vw, 9rem); line-height: .84; letter-spacing: -.045em;
}
.cta-section h2 em { font-style: normal; color: var(--c-signal); }
.cta-section p { max-width: 48ch; color: var(--c-text-muted); }

/* ======================================================= Zuschnitt-Mosaik */
/* Arbeiten-Uebersicht, Atelier und Journal teilen sich dieses Raster.
   Die Fugen sind 1px Hairline-Hintergrund, nicht Rahmen der Kacheln. */

.mosaic {
	display: grid; gap: 1px; background: var(--c-hairline);
	border-bottom: 1px solid var(--c-hairline); padding: 1px 0;
}
/* Justierte Reihen statt handgesetzter Zuschnitte. Der Entwurf legt jede
   Kachel auf eine feste Rasterzelle (Arbeiten.dc.html, `grid-column: 1 / 8`
   usw.); aus dem Seitenbaum kommt aber eine beliebige Zahl an Kategorien in
   beliebiger Reihenfolge. Im 12er-Raster mussten sich die Spannen pro Zeile
   zufaellig auf 12 addieren — taten sie es nicht, blieb der Rest der Zeile
   leer, und `dense` konnte das Loch nur fuellen, wenn spaeter eine passend
   schmale Kachel kam. Flexbox verteilt stattdessen: jede Kachel bringt ihr
   Gewicht --w mit, Basis UND Wachstum haengen daran. Dadurch bleibt das
   Groessenverhaeltnis der Formate zueinander erhalten (Basis und Zuwachs sind
   beide proportional zu --w) und jede Zeile ist per Konstruktion randvoll —
   auch die letzte, auch bei nur einer Kachel darin. */
.mosaic--works {
	display: flex; flex-wrap: wrap;
	/* Wieviel Prozent Breite ein Gewichtspunkt als Basis bekommt. Nur diese
	   Zahl entscheidet, wieviele Kacheln in eine Zeile passen: bei 7% passen
	   Gewichte bis 14 nebeneinander (7+5, 5+4+3, 4+3+3+3), bei 9.5% bis 10. */
	--mosaic-unit: 7%;
}
.mosaic--works > * {
	flex: var(--w) 1 calc(var(--w) * var(--mosaic-unit));
	/* Die Zeilenhoehe ergibt sich aus dem hoechsten Seitenverhaeltnis der
	   Zeile; alle anderen Kacheln werden darauf gestreckt, das Bild deckt
	   ueber object-fit: cover. Ohne Deckel wuerde eine allein in ihrer Zeile
	   stehende Hochkachel ueber die volle Breite mannshoch. */
	max-height: clamp(420px, 46vw, 620px);
}
/* Kachelformate. Das Gewicht ist die alte Spaltenspanne, das Seitenverhaeltnis
   die alte Zelle (Spanne x Spalte zu Zeilenspanne x Zeilenhoehe) — das Mosaik
   behaelt damit den Wechsel aus 7+5 und 5+4+3, den der Entwurf hat. */
.tile--gross { --w: 7; aspect-ratio: 16 / 9; }
.tile--breit { --w: 5; aspect-ratio: 8 / 7; }
.tile--hoch  { --w: 4; aspect-ratio: 9 / 10; }
.tile--klein { --w: 3; aspect-ratio: 2 / 3; }
/* Der Textzuschnitt bekommt kein Seitenverhaeltnis: seine Hoehe kommt aus dem
   Text. Ein Deckel wuerde ihn abschneiden statt ihn nur zu beschneiden. */
.mosaic--works .tile--text { --w: 7; aspect-ratio: auto; max-height: none; }
.mosaic--studio {
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: minmax(clamp(148px, 14.5vw, 236px), auto);
}
/* Justierte Reihen wie im Arbeiten-Mosaik (ADR-0013): der Aufmacher wiegt
   doppelt so viel wie ein normaler Beitrag, die Zeile fuellt sich von selbst.
   Bei 16.5% je Gewichtspunkt steht der Aufmacher neben einem Beitrag (4+2)
   oder drei Beitraege nebeneinander (2+2+2). */
.mosaic--posts {
	display: flex; flex-wrap: wrap;
	--mosaic-unit: 16.5%;
}
.mosaic--posts > * {
	flex: var(--w, 2) 1 calc(var(--w, 2) * var(--mosaic-unit));
	aspect-ratio: 3 / 2;
	max-height: clamp(360px, 38vw, 520px);
}
.mosaic--posts .tile--lead { --w: 4; aspect-ratio: 16 / 9; }
.mosaic--posts .tile--text { aspect-ratio: auto; max-height: none; }

.tile {
	position: relative; display: block; overflow: hidden;
	background: var(--c-base); color: var(--c-text);
	box-shadow: inset 0 0 0 0 var(--c-signal);
	transition: box-shadow var(--dur) var(--ease);
	/* Die Kachel ist ihr eigener Bezug fuer die Schriftgroessen darin. Sonst
	   richtet sich der Titel nach dem Fenster und laeuft in einer schmalen
	   Kachel rechts heraus — die Kachelbreite haengt aber vom Format und von
	   der Zeilenaufteilung ab, nicht vom Fenster. */
	container-type: inline-size;
}
.tile:hover, .tile:focus-visible { box-shadow: inset 0 0 0 1px var(--c-signal); }
/* Im Atelier nicht: die Kacheln sind dort Kontaktwege, deren Inhalt selbst
   verlinkt ist und beim Ueberfahren die Ueberschrift faerbt. Ein Rahmen
   obendrauf sagt dasselbe ein zweites Mal. Der Entwurf kennt den Ring nur im
   Arbeiten-Mosaik (Arbeiten.dc.html, 8x) und in keinem anderen Blatt.
   :focus-visible behaelt ihn — und darueber liegt ohnehin der globale
   Fokus-Umriss aus Zeile 119. */
.mosaic--studio .tile:hover { box-shadow: inset 0 0 0 0 var(--c-signal); }
/* Die Galerie-Kachel im Atelier ist ein <button>, weil sie kein Ziel hat,
   sondern die Lightbox oeffnet. Ohne diesen Block traegt sie den
   Browser-Rahmen und die Systemschrift. */
button.tile {
	border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
	text-align: left; cursor: pointer; width: 100%;
}
.tile img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 45%;
	filter: grayscale(.25) contrast(1.04);
	transition: transform 460ms var(--ease), filter var(--dur-slow) var(--ease);
}
/* Der Zoom sitzt auf dem <img>, nicht auf der Kachel: die Textlagen darueber
   tragen pointer-events:none, damit Titel und Chip nicht mitskalieren. */
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); filter: grayscale(0) contrast(1.08); }
.tile__veil {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(190deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 44%, rgba(0,0,0,.68) 100%);
}
/* Titel UND Chip liegen in EINER absolut positionierten Rasterspalte. Zwei
   getrennt positionierte Kaesten haben den Titel verdeckt, sobald der Chip
   umbrach — ein bottom-clamp kann eine inhaltsabhaengige Hoehe nie nachfuehren. */
.tile__caption {
	position: absolute;
	left: clamp(16px, 1.8vw, 28px); right: clamp(16px, 1.8vw, 28px);
	bottom: clamp(16px, 2vw, 26px);
	display: grid; gap: clamp(10px, 1.1vw, 14px); justify-items: start;
	pointer-events: none;
}
/* Weiss auf Verlauf, nicht mix-blend-mode: das war auf hellen Bildpartien
   teilweise unlesbar. Die Hover-Farbe braucht !important, weil sie sonst
   gegen die Grundfarbe verliert, sobald jemand sie inline setzt. */
/* 10cqw ist keine gegriffene Zahl: der Entwurf setzt die Titelgroesse je
   Kachel von Hand (5.4vw auf 7 Spalten, 4.2vw auf 5, 3.2vw auf 4, 2.7vw auf
   3), und das sind umgerechnet 9.3 bis 10.8 Prozent der Kachelbreite. Die
   Handarbeit im Entwurf beschreibt also eine Regel — hier steht sie. */
.tile__title {
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(1.5rem, 10cqw, 5rem); line-height: .88;
	letter-spacing: -.04em; text-transform: uppercase; color: var(--c-on-media);
	transition: color var(--dur) var(--ease);
	/* Ein einzelnes ueberlanges Wort bricht lieber um, als die Kachel zu
	   verlassen. Die Regel oben passt die Groesse an die Breite an, nicht an
	   die Laenge des Titels. */
	overflow-wrap: break-word; hyphens: auto;
}
.tile:hover .tile__title, .tile:focus-visible .tile__title { color: var(--c-signal) !important; }
.tile__meta {
	display: grid; gap: 4px; background: var(--c-elevated); padding: 8px 11px;
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted);
}
.tile__more { color: var(--c-signal); }
.tile__corner { position: absolute; right: 18px; top: 16px; }

/* Textzuschnitt: schliesst das Raster ab, statt eine leere Flaeche zu lassen. */
.tile--text {
	display: grid; align-content: center; gap: clamp(14px, 1.6vw, 20px);
	padding: clamp(26px, 3.4vw, 48px) clamp(20px, 3vw, 44px);
	overflow: visible;
}
.tile--text:hover { box-shadow: none; }
.tile--text p { max-width: 42ch; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55; }
.tile--text h2 { font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: .92; letter-spacing: -.038em; }

/* Kachel ohne Bild (Kontaktfelder im Atelier). */
.tile--plain { display: grid; gap: 12px; align-content: end; padding: clamp(20px, 2vw, 28px); }
.tile--plain .tile__title { font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.05; letter-spacing: -.025em; color: var(--c-text); }
.social-row {
	display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 2.4vw, 34px);
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(1.25rem, 1.8vw, 1.625rem); letter-spacing: -.02em;
}

/* Spaltenbreiten im 6er-Raster. Das sind Layout-Konstanten der jeweiligen
   Kachelrolle (Karte, Zeiten, Telefon …) und keine Inhalte — deshalb Klassen
   und keine style-Attribute im Template. */
.tile--w2 { grid-column: span 2; }
.tile--w3 { grid-column: span 3; }
.tile--w4 { grid-column: span 4; }
.tile--w6 { grid-column: span 6; }
.tile--h2 { grid-row: span 2; }
.tile--h3 { grid-row: span 3; }

/* Zwischen Tablet und kleinem Desktop wird der Gewichtspunkt breiter, damit
   nicht vier Kacheln in eine Zeile geraten und der Titel im Zuschnitt bricht.
   Bei 9.5% passen Gewichte bis 10 nebeneinander — also zwei mittlere Formate
   oder drei schmale. */
@media (max-width: 1200px) {
	.mosaic--works { --mosaic-unit: 9.5%; }
}
/* Im Journal reicht der Platz darunter nur noch fuer zwei Beitraege
   nebeneinander; der Aufmacher nimmt dann die ganze Zeile. */
@media (max-width: 1080px) {
	.mosaic--posts { --mosaic-unit: 20%; }
}

/* Mobil stapelt das Raster von allein; nur die Kachelproportion muss gesetzt
   werden, sonst haben die Bildkacheln keine Hoehe mehr. */
@media (max-width: 900px) {
	.mosaic { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
	.mosaic > * { grid-column: auto !important; grid-row: auto !important; }
	/* Arbeiten- und Journal-Mosaik sind Flexbox, die Rasterangaben oben laufen
	   dort ins Leere: eine Kachel pro Zeile, und der Hoehendeckel faellt weg,
	   sonst beschneidet er das Seitenverhaeltnis der vollbreiten Kachel. */
	.mosaic--works > *, .mosaic--posts > * { flex: 1 1 100%; max-height: none; }
	.mosaic .tile--img { aspect-ratio: 4 / 5; }
	.mosaic .tile--wide { aspect-ratio: 5 / 4; }
}

/* ================================================================== Archiv */
/* Die Journal-Uebersicht traegt oben den Kontaktbogen und darunter das Archiv.
   Eine Zeile statt einer Kachel: ein Archiv wird ueberflogen, nicht
   betrachtet. Das Vorschaubild ist Wiedererkennung, kein Motiv — 80px, und
   damit ein Bruchteil dessen, was eine Kachel kostet. */

/* Die Spalten stehen an der Liste, nicht an der Zeile: haette jede Zeile ihr
   eigenes Raster, richtete sich die Titelspalte nach der Laenge der jeweiligen
   Rubrik — die Titel stuenden dann treppenfoermig gegeneinander. Ueber subgrid
   erben Zeile und Verweis dieselben Spuren, ohne dass irgendwo eine feste
   Breite geraten werden muss. */
.archive {
	list-style: none; margin: 0; padding: 0 var(--pad-x);
	display: grid; grid-template-columns: 80px max-content 1fr auto;
}
.archive li, .archive__row {
	grid-column: 1 / -1;
	display: grid; grid-template-columns: subgrid;
}
.archive li + li { border-top: 1px solid var(--c-hairline); }
.archive__row {
	align-items: center;
	gap: clamp(16px, 2vw, 30px);
	padding: clamp(14px, 1.6vw, 20px) 0;
	color: var(--c-text);
	transition: color var(--dur) var(--ease);
}
.archive__thumb {
	position: relative; overflow: hidden;
	aspect-ratio: 1; background: var(--c-elevated);
}
.archive__thumb img {
	width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(.4) contrast(1.04);
	transition: filter var(--dur-slow) var(--ease), transform 460ms var(--ease);
}
.archive__row:hover .archive__thumb img,
.archive__row:focus-visible .archive__thumb img { filter: grayscale(0) contrast(1.08); transform: scale(1.06); }
.archive__meta {
	/* nowrap, damit die Spalte sich an der laengsten Rubrik ausrichtet: bricht
	   eine Zeile um, faellt ihr Beitrag zur Spaltenbreite weg und die Spur
	   wird nach der zweitlaengsten bemessen. */
	display: flex; gap: 10px; white-space: nowrap;
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .12em; text-transform: uppercase; color: var(--c-meta);
}
.archive__text { display: grid; gap: 5px; }
.archive__title {
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.15;
	letter-spacing: -.02em;
	transition: color var(--dur) var(--ease);
}
.archive__row:hover .archive__title,
.archive__row:focus-visible .archive__title { color: var(--c-signal); }
.archive__summary {
	color: var(--c-text-muted); font-size: .9375rem; line-height: 1.45;
	/* Zwei Zeilen: die uebernommenen Anrisse sind mal ein Halbsatz, mal vier
	   Zeilen Terminliste, und eine Archivzeile darf davon nicht aufgehen. */
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	overflow: hidden;
}
.archive__more { color: var(--c-signal); font-size: 1.125rem; }

@media (max-width: 700px) {
	/* Rubrik und Datum wandern unter den Titel, der Pfeil faellt weg — bei
	   vier Spalten bliebe fuer den Titel sonst eine Handbreit. */
	.archive { grid-template-columns: 64px 1fr; }
	.archive__row { align-items: start; }
	.archive__text { grid-column: 2; }
	.archive__meta { grid-column: 2; order: 2; }
	.archive__more { display: none; }
}

/* Ab Seite 2 steht das Archiv direkt unter dem Seitenkopf. Der volle
   Abschnittsabstand liesse dort ein Loch, das auf Seite 1 der Kontaktbogen
   fuellt. */
.archive-section--alone .section-head { padding-top: clamp(20px, 2.4vw, 36px); }

/* Blaetterer. Nur das Archiv blaettert, der Kontaktbogen steht auf Seite 1. */
.pager { padding: clamp(28px, 3.4vw, 44px) var(--pad-x) clamp(40px, 5vw, 72px); }
.pager ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 1px;
	font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .1em;
}
.pager a, .pager__gap {
	display: block; padding: 10px 15px;
	background: var(--c-elevated); color: var(--c-text-muted);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pager a:hover { background: var(--c-signal); color: var(--c-on-signal); }
.pager__current a { background: var(--c-signal); color: var(--c-on-signal); }
.pager__gap { background: none; }

/* ================================================================ Datenblatt */

.datasheet {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1px; background: var(--c-hairline);
	border-top: 1px solid var(--c-hairline); border-bottom: 1px solid var(--c-hairline);
}
.datasheet__col {
	background: var(--c-surface);
	display: grid; gap: clamp(18px, 2vw, 24px); align-content: start;
	padding: clamp(26px, 3vw, 44px) clamp(20px, 2.4vw, 34px);
}
.datasheet__col--intro { align-content: center; gap: 14px; }
.datasheet__col--intro h2 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); }
.datasheet__col--intro p { max-width: 34ch; color: var(--c-text-muted); }

.specs { margin: 0; display: grid; gap: clamp(12px, 1.4vw, 16px); }
.specs > div { padding-top: clamp(12px, 1.4vw, 16px); border-top: 1px solid var(--c-hairline); }
/* Ab Tablet zweispaltig: Label links, Wert rechts. Darunter untereinander. */
@media (min-width: 560px) {
	.specs > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 4px 20px; }
}
.specs dt {
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta);
}
.specs dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--c-text); }

/* Schmale Kennzahlenliste (Ueber Tysk, Jobs-Rail). */
.factlist {
	margin: 0; padding-top: clamp(16px, 2vw, 22px);
	border-top: 1px solid var(--c-hairline);
	display: grid; gap: 10px;
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .14em; text-transform: uppercase;
}
.factlist > div { display: flex; gap: 16px; justify-content: space-between; }
.factlist dt { color: var(--c-meta); }
.factlist dd { margin: 0; color: var(--c-text); text-align: right; }

/* ============================================================ Klebende Rail */
/* Formular-, Jobs-, Legal- und Beitragsseiten teilen sich dasselbe Muster:
   links eine schmale Spalte, die mitlaeuft, rechts der Inhalt. */

/* Die Trennlinie zwischen Rail und Inhalt ist eine echte Kante an der
   Inhaltsspalte und keine 1px-Fuge, durch die der Rasterhintergrund scheint.
   Der Fugen-Trick setzt voraus, dass beide Zellen gefuellt sind — die Rail ist
   aber sticky und align-self:start, also nur so hoch wie ihr Inhalt. Darunter
   lag der Grund des Rasters frei: ueber 2000px --c-hairline statt Schwarz. */
.railgrid {
	display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	background: var(--c-base);
	border-top: 1px solid var(--c-hairline); border-bottom: 1px solid var(--c-hairline);
}
/* Vier Rail-Seiten, vier Breiten. Der Entwurf gibt jeder ihre eigene — was
   links steht, ist eben unterschiedlich viel: ein Fortschritt in drei
   Schritten braucht mehr Platz als eine Datumsangabe. Die 300px des Rumpfes
   sind nur noch der Rueckfall fuer eine Rail-Seite ohne Modifier. */
.railgrid--form  { grid-template-columns: minmax(240px, .42fr) minmax(0, 1fr); } /* Bestellen.dc.html:28, Termin.dc.html:27 */
.railgrid--job   { grid-template-columns: clamp(268px, 24vw, 330px) minmax(0, 1fr); } /* Jobs.dc.html:35 */
.railgrid--legal { grid-template-columns: clamp(238px, 22vw, 290px) minmax(0, 1fr); } /* Impressum.dc.html:28 */
.railgrid--post  { grid-template-columns: clamp(168px, 15vw, 208px) minmax(0, 1fr); } /* Journal Beitrag.dc.html:27 */
.rail {
	position: sticky; top: calc(var(--header-h) + 16px); align-self: start;
	display: grid; gap: clamp(18px, 2vw, 26px); align-content: start;
	padding: clamp(26px, 3vw, 44px) clamp(20px, 2.4vw, 34px);
}
.rail__step { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--c-hairline); }
.rail__num {
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .18em; color: var(--c-meta);
}
.rail__label { font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: -.015em; }
.rail__hint { font-size: .9375rem; color: var(--c-text-muted); }
.railgrid__content {
	display: grid; gap: clamp(28px, 3.4vw, 48px); align-content: start;
	border-left: 1px solid var(--c-hairline);
	padding: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 48px) clamp(48px, 6vw, 88px);
}
/* Unter 980px stapelt der Split — dann darf nichts mehr kleben, und die
   Trennlinie wandert von links nach oben. */
@media (max-width: 980px) {
	.railgrid { grid-template-columns: 1fr; }
	.rail { position: static; }
	.railgrid__content { border-left: 0; border-top: 1px solid var(--c-hairline); }
}

/* ============================================================== Formulare */

fieldset {
	border: 0; border-top: 1px solid var(--c-hairline);
	margin: 0; padding: clamp(20px, 2.4vw, 30px) 0 0;
	display: grid; gap: clamp(16px, 2vw, 22px);
}
legend {
	padding: 0;
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(1.25rem, 2vw, 1.625rem); text-transform: uppercase;
	letter-spacing: -.015em; color: var(--c-text);
}
/* „Optional“ gehoert zur Ueberschrift, ist aber keine Ueberschrift — der
   Entwurf setzt es klein in Mono daneben (Bestellen.dc.html:216). In der
   Versalienzeile mitgesetzt las es sich wie ein zweites Wort des Titels. */
.legend__opt {
	font-family: var(--f-mono); font-weight: 400; font-size: .75rem;
	letter-spacing: .16em; color: var(--c-meta);
}
/* 66ch wie im Entwurf (Bestellen.dc.html:173, Termin.dc.html:165). Ohne die
   Grenze laufen Eingabefelder ueber die volle Spaltenbreite — ein 1000px
   breites Textfeld liest sich nicht, und der Entwurf laesst rechts bewusst
   Luft stehen. */
.form { display: grid; gap: clamp(26px, 3.2vw, 40px); max-width: 66ch; }

.field { display: grid; gap: 8px; }
.field > label, .field__label {
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta);
}
.field .req { color: var(--c-accent); }

/* Feldstil zentral: :focus, ::placeholder und der Zugriff vom Elternteil aufs
   Kind sind inline nicht abbildbar — genau dafuer existiert diese Regel. */
.field input, .field select, .field textarea,
.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form select, .form textarea {
	width: 100%; padding: 14px 16px;
	background: var(--c-surface); border: 1px solid var(--c-hairline);
	color: var(--c-text); font: inherit; font-size: 1rem;
}
.field textarea, .form textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus,
.form input:focus, .form select:focus, .form textarea:focus {
	outline: none; border-color: var(--c-signal);
	box-shadow: inset 0 0 0 1px var(--c-signal);
}
.field ::placeholder, .form ::placeholder { color: var(--c-meta); opacity: 1; }
/* Select-Pfeil als Verlaufsdreieck: kein SVG, kein Glyph, keine Extra-Datei. */
.field select, .form select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%),
		linear-gradient(135deg, var(--c-text-muted) 50%, transparent 50%);
	background-position: right 20px center, right 14px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 560px) { .duo { grid-template-columns: 1fr; } }

.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 1rem; line-height: 1.5; }
.check input { margin-top: .3rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--c-signal); }
.check span { color: var(--c-text-muted); }

.form-hint { font-size: .875rem; color: var(--c-meta); }
.form-error { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .08em; color: var(--c-accent); }
.form-errors {
	border-left: 2px solid var(--c-accent); background: var(--c-surface);
	padding: 16px 20px; display: grid; gap: 8px;
}
.form-errors ul { margin: 0; padding-left: 1.2rem; color: var(--c-on-block); }

/* Honeypot und das versteckte Datei-Feld: fuer Menschen unsichtbar, aber
   nicht display:none — sonst fuellen Bots es gar nicht erst aus.

   input.hp muss mitgenannt werden: das versteckte Datei-Feld steht in einem
   .field, und .field input (0,1,1, weiter oben) schlaegt .hp (0,1,0). Es
   bekaeme sonst width:100% samt Polsterung und Rahmen und wuerde als absolut
   positioniertes Element ueber den rechten Rand hinausragen — die Seite
   scrollt dann waagerecht. */
.hp, input.hp {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Sichtbare Ablagezone; das echte <input type="file"> liegt darin in .hp. */
.dropzone {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
	padding: 18px 20px; cursor: pointer;
	background: var(--c-surface); border: 1px dashed var(--c-hairline);
	transition: border-color var(--dur) var(--ease);
}
/* Hover bleibt zurueckhaltend: Das Signal ist hier fuer den Fokus reserviert,
   sonst sieht ein ueberfahrenes Feld aus wie ein fokussiertes. */
.dropzone:hover { border-color: var(--c-text-muted); }
.dropzone:focus-within { border-color: var(--c-signal); }
.dropzone__btn {
	font-family: var(--f-display); font-weight: 700; font-size: .9375rem;
	text-transform: uppercase; letter-spacing: .02em; color: var(--c-signal);
}
.dropzone__note { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-meta); }

.form-actions { display: grid; gap: 12px; justify-items: start; }

/* Bestaetigung nach dem Absenden. */
.confirm {
	display: grid; gap: 18px; justify-items: start;
	border-left: 2px solid var(--c-signal); background: var(--c-surface);
	padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
}
.confirm__mark {
	display: grid; place-items: center; width: 48px; height: 48px;
	background: var(--c-signal); color: var(--c-on-signal);
	font-size: 1.5rem; font-weight: 700;
}

/* ======================================================= Buchung (Termin) */

/* Die Rail ist hier der Fortschritt — anders als im Anfrageformular, wo aktive
   Zustaende bewusst verworfen wurden: hier gibt es echte Schritte. */
.rail__step { border-left: 2px solid transparent; padding-left: 14px; transition: border-color var(--dur) var(--ease); }
.rail__step.is-active { border-left-color: var(--c-signal); }
.rail__step.is-active .rail__label { color: var(--c-signal); }
.rail__step.is-done .rail__num::after { content: ' ✓'; color: var(--c-signal); }
/* Nur erledigte Schritte sind anklickbar — vorwaerts geht es ausschliesslich
   ueber „Weiter“, sonst liesse sich die Pruefung eines Schritts uebergehen. */
.rail__step.is-done[data-goto] { cursor: pointer; }
.rail__step.is-done[data-goto]:hover .rail__label { color: var(--c-signal); }

.step {
	display: grid; gap: clamp(20px, 2.4vw, 30px);
	/* Ziel beim Schrittwechsel. Ohne den Abstand schoebe die klebende
	   Kopfzeile die Oberkante des Schritts unter sich. Gleiche Rechnung wie
	   bei .legal-section. */
	scroll-margin-top: calc(var(--header-h) + 24px);
}
/* Der Schritt bekommt beim Wechsel den Fokus, damit Tastatur und Screenreader
   mitkommen. Sichtbar umranden muss man ihn deshalb nicht — er ist kein
   Bedienelement, und der Rahmen um den halben Bildschirm verwirrt mehr, als
   er hilft. Die Elemente darin behalten ihren eigenen Fokusring. */
.step:focus { outline: none; }
.step-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* Terminart: echtes <input type="radio">, visuell versteckt im Label. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1px; background: var(--c-hairline); }
/* Die Trennlinien des Rasters sind 1px-Fugen ueber der eigenen Hintergrund-
   farbe. Geht die Zahl der Karten nicht in der Zahl der Spalten auf, bleibt in
   der letzten Reihe ein Platz frei — dort steht dann dieselbe Farbe
   ganzflaechig, ein grauer Block neben den schwarzen Karten. Der Fueller
   schliesst ihn.
   Angehaengt wird er in booking.js: die Spaltenzahl kommt aus `auto-fit` und
   haengt an der Breite, und CSS hat keinen Selektor, der zaehlt, wie viele
   Karten in der letzten Reihe stehen. */
.card-grid__filler { background: var(--c-surface); }
.select-card { position: relative; cursor: pointer; }
.select-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.select-card__inner {
	display: grid; gap: 8px; height: 100%;
	padding: clamp(18px, 2vw, 26px);
	background: var(--c-surface);
	box-shadow: inset 0 0 0 0 var(--c-signal);
	transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.select-card__inner strong {
	font-family: var(--f-display); font-weight: 700; font-size: 1.25rem;
	text-transform: uppercase; letter-spacing: -.015em;
}
.select-card__inner .meta { display: block; }
.select-card:hover .select-card__inner { background: var(--c-elevated); }
.select-card input:checked + .select-card__inner {
	background: var(--c-elevated); box-shadow: inset 0 0 0 2px var(--c-signal);
}
.select-card input:focus-visible + .select-card__inner { outline: 2px solid var(--c-signal); outline-offset: 2px; }

/* Die Radios liegen in einer eigenen `radiogroup`, der Telefonlink daneben.
   `display: contents` loest den Wrapper aus dem Raster heraus, sodass alle
   Karten Geschwister im selben Grid bleiben — ohne den Link in eine Rolle zu
   zwingen, in die er nicht gehoert. */
.card-grid__options { display: contents; }

/* Terminart, die es nur telefonisch gibt: sieht aus wie jede andere Karte und
   traegt bewusst KEINE dauerhafte Auszeichnung.
   ❌ Verworfen: ein Ekru-Rahmen um die Karte. In diesem Formular ist ein
   Rahmen die Sprache fuer „ausgewaehlt" — er stand permanent da und blieb
   auch dann stehen, wenn daneben eine echte Terminart angeklickt wurde. Das
   sah nach zwei Auswahlen gleichzeitig aus.
   Was die Karte unterscheidet, sagt jetzt ausschliesslich ihr Text. */
.select-card--phone .select-card__inner { align-content: start; }
.select-card__tel {
	font-family: var(--f-mono); font-size: .875rem; letter-spacing: .06em;
	color: var(--c-text-muted);
}
/* Nicht auf .select-card gelegt: die Regel muss die Grundfarbe des globalen
   `a`-Selektors schlagen, und der faerbt den Link sonst gruen wie einen
   Textlink. */
a.select-card--phone { color: var(--c-text); }
/* Hover und Fokus wie bei den Radios — sie sind voruebergehend und deshalb
   nicht mit einer Auswahl zu verwechseln. */
a.select-card--phone:focus-visible { outline: 2px solid var(--c-signal); outline-offset: 2px; }

.calendar { max-width: 460px; background: var(--c-surface); border: 1px solid var(--c-hairline); padding: clamp(16px, 2vw, 22px); }
.calendar-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-bottom: 16px;
	font-family: var(--f-mono); font-size: .8125rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--c-text);
}
.cal-nav {
	width: 38px; height: 38px;
	background: transparent; border: 1px solid var(--c-hairline);
	color: var(--c-text); cursor: pointer; font-size: 1.1rem; line-height: 1;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cal-nav:hover:not(:disabled) { border-color: var(--c-text-muted); }
.cal-nav:disabled { opacity: .3; cursor: default; }

.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.calendar-weekdays span {
	padding: 6px 0; font-family: var(--f-mono); font-size: .6875rem;
	letter-spacing: .1em; text-transform: uppercase; color: var(--c-meta);
}
.calendar-days button {
	aspect-ratio: 1; background: var(--c-base); border: 1px solid transparent;
	color: var(--c-text); cursor: pointer; font: inherit; font-size: .9375rem;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.calendar-days button:hover:not(:disabled) { border-color: var(--c-text-muted); }
/* Ein Tag ohne freie Zeit ist ausgebucht, nicht kaputt — deshalb der
   Cursor-Wechsel zusaetzlich zur Transparenz. */
.calendar-days button:disabled { color: var(--c-ghost); opacity: .35; cursor: default; }
.calendar-days button.selected { background: var(--c-signal); color: var(--c-on-signal); font-weight: 700; }
.calendar-days .empty { background: transparent; visibility: hidden; }
/* Waehrend die Zeiten aus E!A geladen werden, ist das Raster nicht bedienbar. */
.calendar[aria-busy="true"] .calendar-days { opacity: .4; pointer-events: none; }
.calendar-status { min-height: 1.25rem; margin-top: 12px; font-size: .875rem; color: var(--c-text-muted); }

.slots { display: grid; gap: 12px; }
.slots h3 { font-family: var(--f-mono); font-weight: 400; font-size: .75rem; letter-spacing: .18em; color: var(--c-meta); }
.slot-grid { display: flex; flex-wrap: wrap; gap: 1px; background: var(--c-hairline); }
.slot-grid button {
	min-width: 88px; padding: 14px 18px;
	background: var(--c-surface); border: 0; color: var(--c-text);
	cursor: pointer; font-family: var(--f-mono); font-size: .9375rem; letter-spacing: .06em;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.slot-grid button:hover { background: var(--c-elevated); }
.slot-grid button.selected { background: var(--c-signal); color: var(--c-on-signal); font-weight: 500; }

/* Zusammenfassungs-Chip ueber den Kontaktfeldern: auf Schritt 3 muss sichtbar
   bleiben, was gebucht wird. */
.recap {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
	background: var(--c-elevated); border-left: 2px solid var(--c-signal);
	padding: 14px 18px;
	font-family: var(--f-mono); font-size: .8125rem;
	letter-spacing: .1em; text-transform: uppercase; color: var(--c-text);
}
.recap button {
	background: transparent; border: 0; padding: 0; cursor: pointer;
	font: inherit; color: var(--c-signal); text-decoration: underline;
}

.summary { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.summary dt { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); }
.summary dd { margin: 0; color: var(--c-text); }

[data-submit]:disabled { opacity: .6; cursor: progress; }

/* Rueckfallebene ohne API/JavaScript. */
.ea-embed { scroll-margin-top: 2rem; }
.ea-embed iframe { width: 100%; border: 0; height: 1150px; display: block; }
@media (max-width: 640px) { .ea-embed iframe { height: 1550px; } }

/* ============================================================== Rechtstexte */

.legal-index { display: grid; gap: 12px; }
.legal-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-index a {
	display: flex; gap: 12px; align-items: baseline;
	padding: 8px 0 8px 14px; border-left: 2px solid transparent;
	font-size: .9375rem; color: var(--c-text-muted);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal-index a:hover { color: var(--c-text); }
.legal-index a.is-active { color: var(--c-text); border-left-color: var(--c-signal); }
.legal-index__num { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; color: var(--c-meta); }

.legal-switch { display: grid; gap: 4px; }
.legal-switch a, .legal-switch span {
	display: block; padding: 10px 0; border-top: 1px solid var(--c-hairline);
	font-family: var(--f-mono); font-size: .8125rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted);
}
.legal-switch [aria-current] { color: var(--c-signal); }

/* Der Fliesstext der Rechtstexte kommt als HTML aus dem Editor. Die Struktur
   entsteht deshalb aus Elementselektoren, nicht aus Klassen — im Editor lassen
   sich keine vergeben. */
.prose { max-width: 68ch; display: grid; gap: clamp(18px, 2vw, 26px); }
.prose > * { margin: 0; }
/* #C9C9C9 und #D7D7D7 (.post-tile p) sind bewusste Einzelwerte aus dem
   Entwurf, keine vergessenen Tokens: Lesekolumne und Kachel-Teaser stehen dort
   je eine Nuance unter --c-text. Sie sind neutral und wandern bei einem
   Farbwechsel nicht mit. */
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.62; color: #C9C9C9; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); padding-top: clamp(14px, 1.6vw, 20px); }
.prose h3 { color: var(--c-text); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 8px; }
.prose a { text-decoration: underline; text-underline-offset: .2em; }
.prose address { font-style: normal; color: var(--c-text); line-height: 1.6; }
.prose strong { color: var(--c-text); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: 12px 0; text-align: left; border-top: 1px solid var(--c-hairline); }
.prose th { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); font-weight: 400; }

/* Zweispaltige Aufzaehlung (Versandkosten, Eckdaten). Der Entwurf setzt sie
   als Definitionsliste mit 1px-Fugen, nicht als Tabelle — es sind Paare aus
   Bezeichnung und Wert, keine Matrix aus Zeilen und Spalten.
   Muster: Konzepte/Impressum Konzepte.dc.html.

   Dort steht um jedes Paar noch ein <div>, damit die Fuge als grid-gap mit
   durchscheinendem Hintergrund entsteht. Hier nicht: der Inhalt kommt aus dem
   Editor, und eine verschachtelte <div>-Huelle ueberlebt keine Redaktion.
   Die Fuge kommt stattdessen als border-top je Zeile — dasselbe Bild, mit dem
   Markup, das der Editor von selbst erzeugt, und identisch zu .prose th/td
   direkt darueber. */
/* Kein grid-gap zwischen den Spalten, sondern padding am dt: die Fuge ist eine
   durchgehende Linie ueber die volle Breite, und ein gap risse sie genau
   zwischen Bezeichnung und Wert auf. */
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 0; border-bottom: 1px solid var(--c-hairline); }
.prose dt, .prose dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--c-hairline); }
.prose dt { padding-right: 20px; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); align-self: baseline; }
.prose dd { color: #C9C9C9; font-size: 1.0625rem; line-height: 1.62; }

/* Mobil untereinander statt nebeneinander: bei 130px Labelspalte bliebe fuer
   den Wert sonst zu wenig uebrig. Die Fuge gehoert dann nur noch ueber das
   Label, sonst stuende zwischen Bezeichnung und ihrem Wert eine Linie. */
@media (max-width: 560px) {
	.prose dl { grid-template-columns: 1fr; }
	.prose dd { padding-top: 0; border-top: 0; }
	.prose dt { padding-right: 0; padding-bottom: 4px; }
}

/* Nummerierte Abschnitte einer Legal-Seite. Die Ziffer kommt aus dem CSS-
   Zaehler, damit sie beim Umsortieren im Editor nicht auseinanderlaeuft. */
.legal-sections { counter-reset: legalsection; display: grid; gap: 0; }
.legal-section {
	counter-increment: legalsection;
	padding: clamp(26px, 3vw, 44px) 0;
	border-top: 1px solid var(--c-hairline);
	scroll-margin-top: calc(var(--header-h) + 32px);
	display: grid; gap: clamp(14px, 1.6vw, 20px);
}
.legal-section > h2::before {
	content: counter(legalsection, decimal-leading-zero);
	display: block; margin-bottom: 10px;
	font-family: var(--f-mono); font-weight: 400; font-size: .75rem;
	letter-spacing: .18em; color: var(--c-meta);
}
.notice { border-left: 2px solid var(--c-accent); padding: 14px 18px; background: var(--c-surface); }
.notice p { color: var(--c-text-muted); font-size: .9375rem; }

/* ================================================================= Journal */

/* Journal-Kacheln tragen Saetze statt Einzelwoertern; der Entwurf setzt sie
   entsprechend kleiner an (3.6vw auf 4 von 6 Spalten, 2.1vw auf 2) — rund 6
   Prozent der Kachelbreite. */
.post-tile .tile__title { font-size: clamp(1.125rem, 6cqw, 3.25rem); }
.post-chip {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--c-signal);
}
.post-chip time { color: var(--c-text-muted); }
.post-tile p { max-width: 44ch; color: #D7D7D7; font-size: 1rem; line-height: 1.5; }

/* Beitragsseite: Aufmacher, dann Meta-Rail und Lesekolumne. */
.post-hero { position: relative; overflow: hidden; aspect-ratio: 16 / 8; background: var(--c-surface); }
.post-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-hero::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.92) 100%);
}
.post-hero__caption {
	position: absolute; z-index: 1; left: var(--pad-x); right: var(--pad-x);
	bottom: clamp(20px, 3vw, 44px); display: grid; gap: 14px; justify-items: start;
}
.post-hero__caption h1 { font-size: clamp(2rem, 6vw, 5rem); line-height: .9; letter-spacing: -.04em; }
@media (max-width: 760px) { .post-hero { aspect-ratio: 4 / 3; } }

.post-rail { display: grid; gap: clamp(18px, 2vw, 24px); align-content: start; }
.post-rail__row { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--c-hairline); }
.post-rail__key { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-meta); }
.post-rail__val { color: var(--c-text); }
.share { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.share a, .share button {
	background: transparent; border: 0; padding: 0; cursor: pointer;
	font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .12em;
	text-transform: uppercase; color: var(--c-signal);
}

.prose blockquote, .pullquote {
	margin: clamp(10px, 1.4vw, 18px) 0; max-width: 22ch;
	padding-left: clamp(16px, 2vw, 26px);
	border-left: 2px solid var(--c-accent);
	font-family: var(--f-display); font-weight: 300;
	font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.05;
	letter-spacing: -.035em; color: var(--c-text);
}
.prose blockquote p, .pullquote p { color: inherit; font-size: inherit; line-height: inherit; }
.pullquote strong, .prose blockquote strong { font-weight: 700; }

.figure-duo { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-hairline); }
.figure-duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.figure-duo figcaption { grid-column: 1 / -1; padding-top: 10px; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-meta); }
@media (max-width: 560px) { .figure-duo { grid-template-columns: 1fr; } }

/* „Weiter im Journal“ */
.next-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1px; background: var(--c-hairline); }
.next-posts .tile { aspect-ratio: 16 / 9; }

/* ==================================================== Kategorie-Detailseite */

.cut-tabs {
	display: flex; flex-wrap: wrap; gap: 1px;
	background: var(--c-hairline);
	border-top: 1px solid var(--c-hairline); border-bottom: 1px solid var(--c-hairline);
}
.cut-tabs button {
	flex: 1 1 180px; display: grid; gap: 6px; justify-items: start;
	padding: 16px clamp(16px, 2vw, 24px);
	background: var(--c-base); border: 0; cursor: pointer;
	color: var(--c-text-muted); text-align: left;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cut-tabs button:hover { background: var(--c-surface); color: var(--c-text); }
.cut-tabs button[aria-selected="true"] { background: var(--c-elevated); color: var(--c-text); box-shadow: inset 0 2px 0 0 var(--c-signal); }
.cut-tabs__name { font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: -.015em; }
.cut-tabs__tag { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-meta); }

.detail {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 1px; background: var(--c-hairline); border-bottom: 1px solid var(--c-hairline);
}
@media (max-width: 980px) { .detail { grid-template-columns: 1fr; } }
.detail__gallery { position: relative; background: var(--c-surface); overflow: hidden; touch-action: pan-y; }
.detail__gallery button.shot {
	display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in;
}
.detail__gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.detail__counter {
	position: absolute; left: 16px; top: 14px; z-index: 2;
	background: var(--c-elevated); padding: 6px 10px;
	font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; color: var(--c-text);
}
.gal-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	display: grid; place-items: center; width: 44px; height: 44px;
	background: rgba(0,0,0,.55); border: 1px solid var(--c-hairline);
	color: var(--c-text); cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gal-nav:hover { background: var(--c-signal); color: var(--c-on-signal); }
.gal-nav--prev { left: 12px; }
.gal-nav--next { right: 12px; }

.detail__text {
	background: var(--c-base);
	display: grid; gap: clamp(18px, 2.2vw, 26px); align-content: start;
	padding: clamp(28px, 3.4vw, 52px) clamp(20px, 3vw, 44px);
}
.detail__text p { max-width: 52ch; color: var(--c-text-muted); }

/* Dreierzeile „Maß / Anprobe / Nachbau“. */
.trio {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 1px; background: var(--c-hairline); border-bottom: 1px solid var(--c-hairline);
}
.trio > div { background: var(--c-surface); display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
.trio p { color: var(--c-text-muted); font-size: 1rem; }

.sibling-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sibling-list a {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 12px 0; border-top: 1px solid var(--c-hairline);
	font-family: var(--f-display); font-weight: 700; font-size: 1.125rem;
	text-transform: uppercase; letter-spacing: -.015em; color: var(--c-text);
}
.sibling-list a:hover { color: var(--c-signal); }

/* ================================================================= Fusszeile */

.site-footer { border-top: 1px solid var(--c-hairline); }
.footer-cols {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: 1px; background: var(--c-hairline);
}
.footer-col {
	background: var(--c-surface);
	display: grid; gap: 12px; align-content: start;
	padding: clamp(28px, 3.5vw, 44px) clamp(18px, 3vw, 36px);
}
.footer-col h2, .footer-col__label {
	font-family: var(--f-mono); font-weight: 400; font-size: .75rem;
	letter-spacing: .18em; text-transform: uppercase; color: var(--c-meta);
	margin: 0;
}
.footer-col address { font-style: normal; font-size: 1rem; line-height: 1.6; color: var(--c-text); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 1rem; line-height: 1.5; }
.footer-hours { margin: 0; display: grid; gap: 6px; font-size: .96875rem; line-height: 1.5; color: var(--c-text-muted); }
.footer-hours > div { display: flex; justify-content: space-between; gap: 14px; }
.footer-hours dd { margin: 0; color: var(--c-text); }
.footer-hours .is-closed { color: var(--c-text-muted); }
.footer-contact { display: grid; gap: 6px; font-size: 1rem; line-height: 1.5; }
.footer-contact a[href^="tel"], .footer-contact a[href^="mailto"] { color: var(--c-text); }
.footer-contact a:hover { color: var(--c-signal); }
.footer-col nav { display: grid; gap: 22px; }
.footer-col a[aria-current] { color: var(--c-text); }

.footer-bottom {
	display: flex; flex-wrap: wrap; gap: 14px 28px;
	align-items: center; justify-content: space-between;
	padding: 20px var(--pad-x); border-top: 1px solid var(--c-hairline);
	font-family: var(--f-mono); font-size: .75rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-muted);
}
.footer-bottom p { margin: 0; }

/* ======================================================== Mobile Schnellbar */
/* Traegt auf schmalen Geraeten den Kopf-CTA und die Telefonnummer, deshalb
   verschwinden .btn-top und .lang-switch dort. */

.mobilebar {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
	grid-template-columns: 1fr 1fr; gap: 1px;
	background: var(--c-hairline); border-top: 1px solid var(--c-hairline);
}
.mobilebar a {
	display: flex; align-items: center; justify-content: center; min-height: 56px;
	background: var(--c-base); color: var(--c-text);
	font-family: var(--f-display); font-weight: 700; font-size: .9375rem;
	letter-spacing: .02em; text-transform: uppercase;
}
.mobilebar a.is-primary { background: var(--c-signal); color: var(--c-on-signal); }

@media (max-width: 760px) {
	.mobilebar { display: grid; }
	body { padding-bottom: 58px; }
	.btn-top, .header-tools .lang-switch { display: none !important; }
}

/* ================================================================= Lightbox */

.lightbox {
	position: fixed; inset: 0; z-index: 150; background: var(--c-base);
	display: none; grid-template-rows: auto minmax(0, 1fr) auto;
	opacity: 0; transition: opacity var(--dur) var(--ease);
}
.lightbox.is-mounted { display: grid; }
.lightbox.is-open { opacity: 1; }
.lightbox__head {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 0 clamp(14px, 2.5vw, 32px); min-height: 64px;
	border-bottom: 1px solid var(--c-hairline);
}
.lightbox__title { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.lightbox__title strong {
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1; letter-spacing: -.03em;
	text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lightbox__pos { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .16em; color: var(--c-signal); }
.lightbox__stage {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 0;
}
.lightbox__figure {
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; padding: clamp(14px, 2.5vw, 40px); min-height: 0;
	touch-action: pan-y;
}
.lightbox__figure img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__rail {
	display: flex; align-items: center; justify-content: center; gap: 18px;
	width: clamp(56px, 7vw, 96px);
	background: var(--c-base); border: 0; color: var(--c-text-muted); cursor: pointer;
	font-family: var(--f-mono); font-size: .8125rem;
	letter-spacing: .22em; text-transform: uppercase;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lightbox__rail:hover { background: var(--c-signal); color: var(--c-on-signal); }
.lightbox__rail--prev { border-right: 1px solid var(--c-hairline); }
.lightbox__rail--next { border-left: 1px solid var(--c-hairline); }
.lightbox__bar { display: flex; gap: 1px; padding: 0 clamp(14px, 2.5vw, 32px); border-top: 1px solid var(--c-hairline); min-height: 46px; }
.lightbox__bar button { flex: 1 1 0; display: flex; align-items: center; min-width: 0; height: 46px; padding: 0; background: transparent; border: 0; cursor: pointer; }
.lightbox__bar span { display: block; width: 100%; height: 3px; background: var(--c-hairline); transition: background var(--dur) var(--ease); }
.lightbox__bar button:hover span { background: var(--c-text-muted); }
.lightbox__bar button[aria-current] span { background: var(--c-signal); }
/* Unter 760px tragen die Randschienen keine Beschriftung mehr. */
@media (max-width: 760px) { .lightbox__rail span:last-child { display: none; } }

/* ================================================================ Karte */

/* Eine Nuance ueber --c-surface, damit die Karte sich vom Mosaik absetzt. */
.map-tile { background: #0B0B0B; }
.map-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.map-tile:hover img { transform: none; }
/* Der Puls liegt auf dem Marker, den anfahrt-tysk.svg selbst zeichnet
   (Quadrat und Ring bei 681/378 im viewBox 1200x720). Das gefuellte Quadrat
   steht deshalb nur einmal, im SVG — hier kommt allein der Ring dazu, der
   sich bewegt.

   Die Position stammt aus dem Entwurf (Atelier.dc.html:158). Sie kann nur ein
   Kompromiss sein: die Kachel hat nicht das Seitenverhaeltnis des SVG, und
   object-fit:cover verschiebt den Bildinhalt je nach Format. Bei 56.8% sitzt
   der Ring waagerecht immer richtig, senkrecht je nach Kachel bis zu 5px
   daneben — als Halo faellt das nicht auf, als zweites Quadrat schon. */
.map-pulse {
	position: absolute; z-index: 1; left: 56.8%; top: 52.5%;
	width: 46px; height: 46px; border: 1px solid var(--c-signal);
	transform: translate(-50%, -50%); animation: tyskPulse 2.4s var(--ease) infinite;
}
@keyframes tyskPulse {
	0%   { opacity: .9; transform: translate(-50%, -50%) scale(.6); }
	70%  { opacity: 0;  transform: translate(-50%, -50%) scale(1.5); }
	100% { opacity: 0;  transform: translate(-50%, -50%) scale(1.5); }
}

/* ============================================================ Bearbeiten-Link */

.edit-link {
	padding: 12px var(--pad-x); border-top: 1px solid var(--c-hairline);
	font-family: var(--f-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
}