/* Konzeptseite Lysi — Wundertrommel mit Uhr, Filmstreifen als Menü, Slide als Seitenwechsel.
   Einstieg = Intro „Monolith + Ladebalken“, Cursor = Punkt als Uhrnabe (beides 14.10.2026). Kein Ton mehr. */

/* Provisorisch seit 16.09.2026 (Lysi: „nehmen wir mal 3“): Familjen Grotesk für alles, auch den großen Satz.
   Noch nicht entschieden — ?schrift=1…5 schaltet die anderen Besetzungen ein (schriftwahl.js). */
@font-face { font-family: "Familjen Grotesk"; src: url("schriften/familjen-grotesk/fonts/FamiljenGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("schriften/familjen-grotesk/fonts/FamiljenGrotesk-VariableItalic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* Überschriften: Quicksand (Lysis Wunsch, 16.09.) — rund und geometrisch, nur groß eingesetzt */
@font-face { font-family: "Quicksand"; src: url("schriften/quicksand/fonts/Quicksand-Variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  /* Farben 15.10.2026 (Lysi, nach Inspo bello.): Salbei als Fläche, Ochsenblut als Schrift und Akzent.
     Vorher Weiß/Schwarz, Sicherung _bau/sicherung-vor-arbeiten-fertig-2026-10-15/stil-vor-farbe.css */
  --grund: #b3c8ab;
  --tinte: #6b0a06;
  --linie: rgba(107, 10, 6, 0.18);
  --flaeche: #a7bd9f;
  --grau: #6e4a42;
  --grotesk: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  /* 18.10.2026 (Lysi): Überschriften und Menü in der Kontakt-Serife EB Garamond statt Quicksand */
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --e: 8px;
  --schieb: 1.2s;
  --kurve: cubic-bezier(0.87, 0, 0.13, 1);      /* anziehen, durchziehen, einrasten */
  --raus: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--grund); color: var(--tinte);
  font-family: var(--grotesk); font-weight: 500; font-size: 13px; line-height: 1.4;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--tinte); outline-offset: 3px; }
.tc { font-variant-numeric: tabular-nums; }

/* ---------- Ecken ---------- */
.ecke { position: fixed; top: calc(var(--e) * 2); font-size: 12px; z-index: 30; }
.oben-links { left: calc(var(--e) * 2); }
.oben-rechts { right: calc(var(--e) * 2); color: var(--grau); }
.ecke.fest { opacity: 0; transition: opacity 0.8s ease 0.3s; }
.ecke.fest.da { opacity: 1; }
.rolle { color: var(--grau); margin-left: 10px; }
#ecke-rechts { display: flex; gap: 18px; align-items: baseline; }
.sprache { color: var(--grau); }
.sprache button { font-size: 12px; color: var(--grau); }
.sprache button.an { color: var(--tinte); }
.sprache button:hover { color: var(--tinte); }
.unten-links { top: auto; left: calc(var(--e) * 2); bottom: calc(var(--e) * 2); z-index: 55; display: flex; gap: 14px; line-height: 24px; }
.unten-rechts { top: auto; right: calc(var(--e) * 2); bottom: calc(var(--e) * 2); z-index: 56; line-height: 24px; color: var(--grau); }   /* über dem Rechtliches-Streifen (z 55) */
.unten-links a { color: var(--grau); text-decoration: none; transition: color 0.3s ease; }
.unten-links a:hover { color: var(--tinte); }

/* ---------- Clip-Knopf (Links, Knöpfe) ---------- */
.clip-knopf {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border: 1px solid var(--tinte); font-size: 13px; text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.clip-knopf:hover, .clip-knopf.voll { background: var(--tinte); color: var(--grund); }
.clip-knopf.voll:hover { background: var(--grund); color: var(--tinte); }

/* ---------- Einstieg: Intro „Monolith + Ladebalken“ (app.js, Intro) ---------- */
.intro-buehne { position: fixed; inset: 0; perspective: 1500px; pointer-events: none; z-index: 2500; }
.intro-mono { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 50% 50%; }
.intro-mono > i { position: absolute; left: 0; top: 0; display: block; backface-visibility: hidden; }
.intro-mono > .f-vorn { background: var(--grund); box-shadow: inset 0 0 0 1px var(--tinte); overflow: hidden; }
.intro-mono .fuell { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--tinte); }
.bild .schwarz { position: absolute; inset: 0; background: var(--tinte); pointer-events: none; }   /* Intro-Scheiben: Ochsenblut wie die Platte (25.10.) */
/* solange das Intro läuft: nichts Unsichtbares anklickbar, Hinweis noch aus */
html.intro-laeuft .trommel, html.intro-laeuft .menue, html.intro-laeuft .ecke.fest { pointer-events: none; }
html.intro-laeuft .hinweis { opacity: 0; }

/* ---------- Seiten + Slide ---------- */
.seiten { position: fixed; inset: 0; transition: transform var(--schieb) var(--kurve); }
.seite { position: absolute; inset: 0; background: var(--grund); visibility: hidden; overflow: hidden; }
.seite.aktiv { visibility: visible; z-index: 1; }
/* Seitenwechsel: alte und neue Seite gleiten zusammen um eine Bildschirmbreite (v1-Slide, von Lysi gewünscht 16.09.) */
.seite.kommt { visibility: visible; z-index: 2; transition: transform var(--schieb) var(--kurve); }
.seite.geht { visibility: visible; z-index: 1; transition: transform var(--schieb) var(--kurve); }
.seite.scroll { overflow-y: auto; scrollbar-width: none; }   /* Scrollbalken aus (Lysi, 16.09.), Scrollen geht weiter */
.seite.scroll::-webkit-scrollbar { display: none; }

/* ---------- Arbeiten: Uhr hinter der Trommel ---------- */
.uhr { position: absolute; left: 50%; transform: translateX(-50%); overflow: visible; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 1.2s ease 0.6s; }
.uhr.da { opacity: 1; }

/* ---------- Arbeiten: Wundertrommel ---------- */
.trommel { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.trommel.zieht { cursor: grabbing; }
.bild {
  position: absolute; left: 0; top: 0;
  width: 132px; height: 74px; margin: -37px 0 0 -66px;
  background: var(--flaeche); overflow: hidden;
  will-change: transform, opacity; cursor: pointer;
}
.bild img, .bild video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.bild::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); pointer-events: none; }
.bild.hinten { pointer-events: none; }
.hinweis, .titel {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 56px;
  white-space: nowrap; pointer-events: none;
}
.hinweis { font-size: 12px; color: var(--grau); transition: opacity 0.6s ease; }
.hinweis.weg { opacity: 0; }
.titel { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.titel span { display: block; overflow: hidden; }
.titel i { display: block; font-style: normal; transform: translateY(105%); transition: transform 0.7s var(--raus); }
.titel .a { color: var(--grau); }
.titel.an i { transform: none; }

/* aufgeklappte Arbeit */
.offen {
  position: fixed; left: 0; top: 0; z-index: 20; transform-origin: 0 0; background: var(--flaeche); overflow: hidden;
  transition: transform 0.8s var(--raus); cursor: none;
}
.offen > img, .offen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offen .gross { opacity: 0; transition: opacity 0.4s ease; }
.offen .gross.bereit { opacity: 1; }
/* Website-Vorschau: echte Seite als lokale Kopie, nach 7 s abgedunkelt mit Frage */
.offen iframe.live { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; opacity: 0; transition: opacity 0.6s ease; }
.offen iframe.live.bereit { opacity: 1; }
.offen .genug {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; opacity: 0; transition: opacity 0.6s ease;
}
.offen .genug.an { opacity: 1; }
.offen .genug p { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 4vw, 52px); letter-spacing: -0.04em; }
.offen .genug .clip-knopf { border-color: #fff; background: #fff; color: #000; }
.offen .genug .clip-knopf:hover { background: transparent; color: #fff; }
html.im-projekt .cz-ebene, html.im-projekt #mauslabel { opacity: 0 !important; }
.offen.crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.42) 100%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.13) 0 1px, transparent 1px 4px);
}
.unterzeile {
  position: fixed; z-index: 21; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: baseline; white-space: nowrap; font-size: 12px;
  opacity: 0; transition: opacity 0.5s ease;
}
.unterzeile.an { opacity: 1; transition-delay: 0.35s; }
.unterzeile .a { color: var(--grau); }
.unterzeile a { margin-left: 8px; }
.mauslabel {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  color: #fff; mix-blend-mode: difference; font-size: 12px; line-height: 1.2;
  opacity: 0; transition: opacity 0.3s ease;
}
.mauslabel.an { opacity: 1; }

/* ---------- Menü: Zifferblatt (menue.js, 15.10.2026) ----------
   Spielart „Bogen“ nach Meech213: Desktop oben mittig, Handy unten am Rand. Zeiger zeigen auf die aktive Seite. */
.blatt { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 39; overflow: visible;
  opacity: 0; transition: opacity 0.8s ease; }
.blatt .strich { stroke: rgba(107, 10, 6, 0.28); stroke-width: 1; stroke-linecap: round; transition: stroke 0.3s ease; }
.blatt .strich.gross { stroke: rgba(107, 10, 6, 0.45); }
.blatt .strich.an { stroke: var(--tinte); }
.blatt .hand { fill: var(--tinte); }
.menue a {
  position: fixed; left: 0; top: 0; z-index: 40; white-space: nowrap;
  font-size: 12px; color: rgba(107, 10, 6, 0.45); text-decoration: none; padding: 6px 8px;
  transform: translate(-50%, -50%); transition: color 0.3s ease, opacity 0.8s ease; opacity: 0;
}
.menue a:hover, .menue a:focus-visible { color: var(--tinte); }
.menue a[aria-current="page"] { color: var(--tinte); }
.blatt.da, .menue.da a { opacity: 1; }
/* ---------- Über mich ---------- */
/* Über mich (15.10.2026) nach unknown-untitled.com: ein großer Absatz, linksbündig, leichte Grotesk, enger Durchschuss.
   Schrift über Variable, damit Gotham Light / Montserrat später nur hier getauscht wird. */
.ueber { --u-schrift: var(--grotesk); padding: 150px calc(var(--e) * 2) 120px; }
.u-text {
  margin: 0; max-width: 30em; font-family: var(--u-schrift); font-weight: 380;
  font-size: clamp(26px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -0.03em;
}
.u-text a { text-decoration: none; }
.u-text a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.u-wort { white-space: nowrap; }
.u-text .u-kante { color: var(--grau); }
.u-text .u-weg { opacity: 0; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }.absatz { margin: 48px auto 24px; max-width: 36em; font-size: 13px; }
.knoepfe { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
/* Zeitleiste (16.09., Richtung A): Spuren wie im Schnittprogramm, eine Marke leuchtet über alle Spuren */
.zeitleiste { position: relative; margin: 96px auto 0; max-width: 860px; text-align: left; --kopfbreite: 92px; }
.zl-rahmen { overflow-x: auto; scrollbar-width: none; }
.zl-rahmen::-webkit-scrollbar { display: none; }
.zl-spuren { position: relative; padding-top: 18px; }
.zl-lineal, .zl-zeile { display: grid; grid-template-columns: var(--kopfbreite) 1fr; }
.zl-monate { display: flex; border-bottom: 1px solid var(--linie); }
.zl-monate span { flex: 1; min-width: 0; overflow: hidden; font-size: 10px; color: var(--grau); padding: 0 0 6px 4px; border-left: 1px solid var(--linie); text-transform: lowercase; }
.zl-zeile { height: 40px; border-bottom: 1px solid var(--linie); }
.zl-name { font-size: 11px; display: flex; align-items: center; gap: 6px; white-space: nowrap; position: sticky; left: 0; z-index: 2; background: var(--grund); }
.zl-v { color: var(--grau); font-variant-numeric: tabular-nums; }
.zl-bahn { position: relative; }
.zl-clip {
  position: absolute; top: 6px; bottom: 6px; display: flex; align-items: center; gap: 6px; padding: 0 7px; overflow: hidden;
  border: 1px solid var(--tinte); background: var(--grund); font-size: 11px; text-align: left;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.zl-clip.platzhalter { border-style: dashed; color: var(--grau); }
.zl-marke { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.zl-zahl { margin-left: auto; font-size: 10px; color: var(--grau); font-variant-numeric: tabular-nums; }
.zl-clip.an { background: var(--tinte); color: var(--grund); }
.zl-clip.an .zl-zahl { color: inherit; opacity: 0.6; }
.zeitleiste.wahl .zl-clip:not(.an) { opacity: 0.25; }
.zl-leer { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--grau); }
.zl-kopf {
  position: absolute; top: 4px; bottom: 0; pointer-events: none;
  left: calc(var(--kopfbreite) + (100% - var(--kopfbreite)) * var(--kopf));
  border-left: 1px solid var(--tinte);
}
.zl-kopf span { position: absolute; top: -4px; left: -12px; width: 24px; text-align: center; font-size: 10px; }
.zl-info { min-height: 150px; padding: 18px 0 0 var(--kopfbreite); }
.zl-hinweis { margin: 0; font-size: 12px; color: var(--grau); }
.zl-kopfzeile { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.zl-meta { color: var(--grau); font-size: 12px; }
.zl-bilder { display: flex; gap: 6px; margin-top: 12px; overflow: hidden; }
.zl-bilder img { width: 88px; height: 50px; object-fit: cover; display: block; background: var(--flaeche); }
.clip-knopf.klein { height: 26px; padding: 0 10px; font-size: 12px; margin-top: 14px; }
.filter-chip {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 86px;
  height: 24px; padding: 0 10px; border: 1px solid var(--tinte); font-size: 12px; background: var(--grund);
}

/* ---------- Arbeiten: Raster „Alle Arbeiten“ (14.10.2026) ----------
   Die Trommelkarten fliegen per FLIP in ein ruhiges Raster (app.js, Raster). Uhr bleibt blass dahinter. */
.raster-knopf {
  position: fixed; left: 50%; bottom: calc(var(--e) * 2); transform: translateX(-50%); z-index: 56;
  font-size: 13px; line-height: 24px; color: var(--tinte);
  visibility: hidden; opacity: 0; transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.raster-knopf.da:not(.weg) { visibility: visible; opacity: 1; transition: opacity 0.6s ease; }
@media (hover: hover) { .raster-knopf:hover { opacity: 0.5 !important; } }
html.intro-laeuft .raster-knopf { visibility: hidden; opacity: 0; }
.raster {
  position: absolute; inset: 0; z-index: 2500; overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; pointer-events: none; scrollbar-width: none;
  /* oben weich auslaufen, damit gescrollte Karten nicht hart unter Menü und Ecken stehen */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 100px); mask-image: linear-gradient(to bottom, transparent 0, #000 100px);
}
.raster::-webkit-scrollbar { display: none; }
.raster.sichtbar { visibility: visible; pointer-events: auto; }
.raster.sichtbar.fliegt { pointer-events: none; }
.r-gitter {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 44px 20px;
  max-width: 1440px; margin: 0 auto; padding: 108px 32px 96px;
}
.r-karte { cursor: pointer; }
.r-bild { position: relative; aspect-ratio: 16 / 9; }
.raster .bild.im-raster { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; will-change: auto; transform: none; opacity: 1; }
.r-text { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; transition: opacity 0.5s ease 0.1s; }
.r-text .t { font-size: 14px; color: var(--tinte); }
.r-text .a { font-size: 13px; color: var(--grau); }
.raster.fliegt .r-text { opacity: 0; transition: opacity 0.25s ease; }
.r-karte { transition: opacity 0.6s ease, scale 0.6s ease; }
.raster.hat-offen .r-karte { opacity: 0; scale: 0.94; pointer-events: none; }   /* Projekt offen: Raster tritt zurück wie die Trommel */
.seite.raster-an .uhr.da { opacity: 0.15; transition: opacity 0.9s ease; }
.seite.raster-an .trommel { pointer-events: none; }
.seite.raster-an .hinweis, .seite.raster-an .titel, .seite.raster-an .filter-chip { opacity: 0 !important; pointer-events: none; }
@media (max-width: 1100px) { .r-gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .r-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .r-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; padding: 124px 16px 88px; }
  .raster-knopf { left: auto; right: calc(var(--e) * 2); transform: none; }
}

/* ---------- Kontakt (kontakt.js, 15.10.2026) ----------
   Mitte steht still mit den echten Angaben, darüber und darunter dreht sich dasselbe Band heraus.
   Bandzeilen und Mitte haben dieselbe Schrift und Größe, damit die Mitte wie ein flach gelegtes Stück Band wirkt. */
/* 17.10.2026: Serife zum Ausprobieren nur auf Kontakt (EB Garamond, OFL, lokal). Alle Schriften werden noch überarbeitet. */
@font-face { font-family: "EB Garamond"; src: url("schriften/eb-garamond/eb-garamond-latin-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("schriften/eb-garamond/eb-garamond-latin-wght-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
.kontakt { --k-gross: clamp(18px, 1.55vw, 23px); --k-schrift: "EB Garamond", Garamond, Georgia, serif; }
.k-band { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.k-band li, .k-zeile, .k-text {
  font-family: var(--k-schrift); font-size: var(--k-gross); line-height: 1.3; font-weight: 400; letter-spacing: 0;
  white-space: nowrap; text-align: center;
}
.k-band li { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--k-gross) * 2.6); will-change: transform, opacity; }
.k-band li span { display: block; }
.kursiv { font-style: italic; font-weight: 380; }
.kontakt .kursiv { font-weight: 400; }
/* Hinweis beim Überfahren (Mail „kopieren“, Instagram): klein in der Grotesk rechts neben dem Link, nur mit Maus */
.k-hinweis { position: relative; }
.k-hinweis::after {
  content: attr(data-hinweis); position: absolute; left: 100%; top: 50%; margin-left: 12px; transform: translate(-4px, -45%);
  font-family: var(--grotesk); font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--grau);
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s var(--raus); pointer-events: none; white-space: nowrap;
}
.k-hinweis:hover::after, .k-hinweis:focus-visible::after, .k-mail.kopiert::after { opacity: 1; transform: translate(0, -45%); }
.k-mail.kopiert::after { color: var(--tinte); }
/* Anfrage (17.10.2026, 2. Fassung): eine Zeile „Anfrage schreiben“, Klick klappt die Felder auf.
   Felder ohne Linien und Kästen: man schreibt direkt in die Zeile, wie ein weiteres Stück Band. */
.k-auf {
  padding: 0; border: 0; color: inherit; font: inherit; cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.5s var(--raus), color 0.3s ease;
}
.k-auf:hover, .k-auf:focus-visible { background-size: 0 1px; background-position: 100% 100%; outline: none; }
.k-auf[aria-expanded="true"] { color: var(--grau); background-size: 0 1px; }
/* 25.10. (Lysi): „Anfrage schreiben“ auffälliger, aus drei Varianten A gewählt: gefüllte Fläche */
html[data-anfrage="a"] .k-auf { background: var(--tinte); color: var(--grund); padding: 0.12em 0.75em 0.22em; transition: opacity 0.3s ease; }
html[data-anfrage="a"] .k-auf:hover, html[data-anfrage="a"] .k-auf:focus-visible { background: var(--tinte); opacity: 0.85; }
html[data-anfrage] .k-auf[aria-expanded="true"] { background: none; border-color: transparent; color: var(--grau); animation: none; }
.k-form {
  display: grid; grid-template-rows: 0fr; width: min(17em, calc(100vw - 64px)); margin: 0 auto;
  font-family: var(--k-schrift); font-size: var(--k-gross); text-align: center;
  opacity: 0; transition: grid-template-rows 0.55s var(--raus), opacity 0.35s ease;
}
.k-form.ist-auf { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.55s var(--raus), opacity 0.45s ease 0.15s; }
.k-form-innen { min-height: 0; overflow: hidden; padding-top: 0.15em; }
.k-feld {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; resize: none; overflow: hidden;
  background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat; color: var(--tinte);
  font: inherit; line-height: 1.3; text-align: center; caret-color: var(--tinte);
  transition: background-size 0.4s var(--raus);
}
.k-feld::placeholder { color: var(--grau); opacity: 1; font-style: italic; transition: opacity 0.3s ease; }
.k-feld:focus { outline: none; background-size: 1.4em 1px; }   /* nur ein kurzer Strich mittig zeigt, wo man gerade schreibt */
.k-feld:focus::placeholder { opacity: 0.45; }
.k-senden {
  margin: 0.25em 0 0.1em; padding: 0; border: 0; color: var(--tinte); font: inherit; cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.k-senden:hover, .k-senden:focus-visible { background-size: 0 1px; background-position: 100% 100%; outline: none; transition: background-size 0.4s var(--raus); }
.k-form.sendet .k-senden { opacity: 0.4; cursor: default; }
.k-status { margin: 0; font-family: var(--k-schrift); font-size: calc(var(--k-gross) * 0.8); font-style: italic; line-height: 1.4; color: var(--grau); text-align: center; }
.k-status:empty { display: none; }
.k-status[data-art="ok"] { color: var(--tinte); }
.k-falle, .k-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.k-falle { display: none; }
/* Mitte leicht schräg wie im Vorbild */
.k-mitte { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) rotate(2.5deg); z-index: 2; }
.k-zeile { margin: 0; }
.k-zeile a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--raus); }
.k-zeile a:hover, .k-zeile a:focus-visible { background-size: 100% 1px; }
.k-kopiert { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); font-size: 12px; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; }
.k-kopiert.da { opacity: 1; transform: translate(-50%, 12px); }
/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .bild { width: 92px; height: 52px; margin: -26px 0 0 -46px; }
  .ueber { padding-top: 90px; }
  .zeitleiste { --kopfbreite: 66px; }
  .zl-spuren { min-width: 640px; }
  .zl-info { padding-left: 0; }
  .zl-clip { padding: 0 4px; font-size: 10px; }

  /* Menü sitzt am Handy unten: Hinweis, Titel und Filter darüber, Raster läuft unten frei aus */
  .hinweis, .titel { bottom: 172px; }
  .filter-chip { bottom: 200px; }
  .r-gitter { padding-bottom: 260px; }   /* 25.10.: letzte Beschriftung lag unter dem Menüfeld (206 px) */
  .kontakt { --k-gross: 17px; }
  .rolle { display: none; }
  #ecke-zeit { display: none; }}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
}

/* ---------- Cursor: Punkt als Uhrnabe (cursor.js, 14.10.2026) — nur mit Maus ---------- */
html.cz-an, html.cz-an * { cursor: none !important; }
.cz-ebene { position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: 0; transition: opacity 0.25s; }
html.cz-da .cz-ebene { opacity: 1; }
.cz-ebene.diff { mix-blend-mode: difference; }
.cz-ebene > * { position: absolute; left: 0; top: 0; }
/* Punkt = Uhrnabe mit Niete. Groß angelegt (40px) und nur herunterskaliert, kein will-change — sonst unscharf.
   Niete: Mitte durchsichtig, in difference zeigt sie den Grund (wie die weiße Niete der Uhr). */
.cz-punkt { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 6px, #fff 6.6px); }
.cz-strich { width: 1.5px; height: 22px; margin: -11px 0 0 -0.75px; background: #fff; opacity: 0; will-change: transform, opacity; }
.cz-wort { width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: #000; color: #fff;
  display: flex; align-items: center; justify-content: center; font: 400 12px var(--grotesk); letter-spacing: 0.01em; opacity: 0; }

/* ---------- Handschrift beim Überfahren (handschrift.js) ---------- */
.handschrift { position: fixed; inset: 0; z-index: 58; pointer-events: none; }
.handschrift .hs { position: fixed; overflow: visible; opacity: 1; transition: opacity 0.3s ease; will-change: opacity; }

/* Rechtliches über scrollendem Text — Standard C: schmaler weißer Streifen unten, Inhalt läuft sauber darunter weg.
   Vergleichsfassungen: ?recht=a weiche Unterlage nur hinter den Wörtern, ?recht=b blendet beim Scrollen weg */
.unten-links::before {
  content: ""; position: absolute; inset: -10px -100vw -12px -12px; z-index: -1;
  background: linear-gradient(to top, var(--grund) 72%, rgba(179,200,171,0) 100%);
  pointer-events: none;   /* Streifen darf keine Klicks schlucken */
}
body[data-recht="a"] .unten-links::before {
  inset: -6px -12px -6px -12px;
  background: radial-gradient(120% 140% at 30% 50%, var(--grund) 55%, rgba(179,200,171,0) 100%);
}
body[data-recht="b"] .unten-links::before { display: none; }
/* 19.10. (Lysi: „grüner Strich“): über der offenen Projektansicht schnitt der Streifen die Bilder durch */
body.spalte-auf .unten-links::before { display: none; }
/* 20.10. (Lysi): Streifen ganz raus, er lief auch auf „Über mich“ als grüner Strich durchs Bild */
.unten-links::before { display: none; }
body[data-recht="b"] .unten-links { transition: opacity 0.35s ease; }
body[data-recht="b"].scrollt .unten-links { opacity: 0; }

/* ---------- Erklärtext je Projekt (15.10.2026), drei Platzierungen zur Wahl: ?text=a|b|c ---------- */
.unterzeile.erkl { white-space: normal; background: var(--grund); }
.erkl .z { color: transparent; transition: color 0.25s ease; }
.erkl .z.kante, .vorspann .z.kante { color: var(--grau); }
.erkl .z.da, .vorspann .z.da { color: var(--tinte); }
.vorspann .z { color: transparent; }
/* A: Spalte rechts neben der Box */
.erkl-a { transform: none; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; }
.erkl-a .t { font-family: var(--serif); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; line-height: 1.05; }
.erkl-a .erkl-text { margin: 22px 0 0; font-size: 15px; line-height: 1.5; max-width: 30ch; }
.erkl-a a { margin: auto 0 0; }
/* B: Untertitel-Block unter der Box */
.erkl-b { transform: none; padding: 0 0 14px; box-shadow: 0 0 0 14px var(--grund); display: grid; grid-template-columns: minmax(180px, 26%) 1fr; column-gap: 32px; row-gap: 2px; align-items: start; }
.erkl-b .t { grid-column: 1; }
.erkl-b .a { grid-column: 1; }
.erkl-b a { grid-column: 1; margin: 6px 0 0; justify-self: start; }
.erkl-b .erkl-text { grid-column: 2; grid-row: 1 / span 3; margin: 0; font-size: 14px; line-height: 1.5; max-width: 60ch; }
@media (max-width: 640px) {   /* Handy: Text unter Titel und Art statt daneben, sonst lief er unters Menü (25.10.) */
  .erkl-b { grid-template-columns: 1fr; }
  .erkl-b .erkl-text { grid-column: 1; grid-row: auto; margin-top: 12px; font-size: 13px; }
}
/* C: Vorspann in der Box */
.offen .vorspann { position: absolute; inset: 0; z-index: 3; background: var(--flaeche); display: flex; align-items: center; justify-content: center; padding: 8%;
  transition: opacity 0.7s ease; }
.offen .vorspann.weg { opacity: 0; }
.offen .vorspann p { margin: 0; max-width: 24ch; font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 2.3vw, 34px); line-height: 1.2; letter-spacing: -0.03em; }
/* Umschalter für die Auswahl, nur mit ?text= sichtbar */
.erkl-wahl { position: fixed; right: 16px; bottom: 14px; z-index: 70; display: flex; gap: 10px; font-size: 12px; color: var(--grau); }
.erkl-wahl a { color: var(--grau); text-decoration: none; }
.erkl-wahl a.an { color: var(--tinte); text-decoration: underline; }

/* ---------- Projektansicht „Spalte“ (spalte.js, 15.10.2026, Prinzip obys): Screenshots laufen senkrecht durch ---------- */
.trommel { transition: opacity 0.5s ease; }
.trommel.weg-spalte { opacity: 0; pointer-events: none; }
.spalte-ebene { position: fixed; inset: 0; z-index: 30; cursor: grab; transition: opacity 0.45s ease; touch-action: none; }
.spalte-ebene.schliesst { pointer-events: none; }
.spalte-zu { transition: opacity 0.3s ease; }
.spalte-ebene.schliesst .spalte-zu { opacity: 0; }
.spalte-buehne { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 50%; overflow: hidden; }
.spalte-rolle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.spalte-bild { position: absolute; left: 0; top: 0; margin: 0; backface-visibility: hidden; will-change: transform;
  background: var(--flaeche); box-shadow: 0 1px 0 rgba(107, 10, 6, 0.08), 0 18px 40px rgba(60, 20, 10, 0.12); }
.spalte-bild img, .spalte-bild video { display: block; width: 100%; height: 100%; object-fit: cover; }
.spalte-bild.mobil { border-radius: 14px; overflow: hidden; }
/* 19.10.: angeklicktes Kartenbild liegt beim Abflug über dem ersten Serienbild, bis das geladen ist (spalte.js) */
.spalte-bild .spalte-start { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.5s ease; }
.spalte-bild .spalte-start.weg { opacity: 0; }
.spalte-info { position: fixed; left: 6vw; top: 50%; width: min(300px, 24vw); transform: translateY(calc(-50% + 12px)); opacity: 0;
  transition: opacity 0.6s ease, transform 0.8s var(--raus); z-index: 31; }
.spalte-info.an { opacity: 1; transform: translateY(-50%); }
.spalte-info h2 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 34px; letter-spacing: -0.03em; line-height: 1.02; }
.spalte-info .art { margin: 8px 0 0; font-size: 12px; color: var(--grau); }
.spalte-info .text { margin: 24px 0 0; font-size: 15px; line-height: 1.5; }
.spalte-info .credit { margin: 16px 0 0; font-size: 12px; line-height: 1.45; color: var(--grau); }
.spalte-info a { display: inline-block; margin-top: 22px; font-size: 12px; color: var(--tinte); }
.spalte-zu { position: fixed; right: 6vw; top: 50%; z-index: 31; transform: translateY(-50%); background: none; border: 0; padding: 8px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }
.spalte-haelfte { position: fixed; z-index: 32; background-size: cover; background-position: center; pointer-events: none;
  transition: transform 0.9s var(--raus), opacity 0.9s ease; }
.spalte-nadel { position: fixed; z-index: 33; width: 3px; margin-left: -1.5px; background: var(--tinte); transform-origin: 50% 0; pointer-events: none;
  border-radius: 0 0 2px 2px; transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.4s ease 0.1s; }
@media (max-width: 760px) {
  /* Handy (Lysi 16.10.): Text oben unter der Kopfzeile, unten bleibt das Menü frei */
  .spalte-info { left: 16px; right: 16px; top: 52px; width: auto; transform: translateY(-8px); padding-right: 76px; }
  .spalte-info.an { transform: none; }
  .spalte-info h2 { font-size: 24px; }
  .spalte-info .art { margin-top: 4px; }
  .spalte-info .text { margin-top: 10px; font-size: 13px; line-height: 1.45; }
  .spalte-info .credit { margin-top: 8px; }
  .spalte-info a { margin-top: 10px; }
  .spalte-info .spalte-zu { position: absolute; right: 0; top: 2px; transform: none; padding: 4px 0 4px 8px; }
  .spalte-buehne { top: auto; }
}

/* ---------- Handy-Fuß (Lysi 16.10.): unten links nur „Rechtliches“ klein, das Menü ist das Einzige zum Bedienen.
   „Alle Arbeiten“ sitzt zwischen Trommel und Menü. ---------- */
.unten-links .nur-handy { display: none; }
@media (max-width: 640px) {
  .unten-links a { display: none; }
  .unten-links a.nur-handy { display: inline; font-size: 10px; opacity: 0.8; }
  .raster-knopf { left: 50%; right: auto; bottom: 236px; transform: translateX(-50%); }
  .hinweis, .titel { bottom: 196px; }
}

/* ---------- Handy-Wendeltreppe (app.js, Treppe, 16.10.2026): Karten etwa doppelt so groß, Uhr tritt zurück ---------- */
@media (max-width: 640px) {
  html.treppe .bild { width: 230px; height: 130px; margin: -65px 0 0 -115px; box-shadow: 0 14px 30px rgba(60, 20, 10, 0.14); transition: box-shadow 0.6s ease; }
  /* Intro: die gestapelten Schatten ergaben einen braunen Fleck hinter dem Stapel (Lysi, 25.10.) */
  html.treppe.intro-laeuft .bild { box-shadow: none; }
  html.treppe .uhr { opacity: 0.22; }
  .treppe-wahl { top: 54px; bottom: auto; right: 16px; }
}

/* ---------- Über mich nach bello. (16.10.2026): Raster aus feinen Linien wie ein Schaukasten ----------
   Oben links das große Wort, rechts Foto 1; unten links „Das bin ich.“ + Foto 2, rechts Zeile + Text im Aufbau. */
.ueber.u-raster {
  display: grid; grid-template-columns: 1.65fr 1fr; grid-template-rows: auto auto;
  max-width: 1320px; margin: 0 auto; padding: 0; border: 1px solid var(--linie);
  margin-top: 118px; margin-bottom: 96px; width: calc(100% - 64px);
}
.u-zelle { border: 0 solid var(--linie); padding: 22px; min-width: 0; }
.u-wort-zelle { border-right-width: 1px; border-bottom-width: 1px; display: flex; align-items: flex-end; min-height: 46vh; }
.u-gross { margin: 0; font-family: var(--serif); font-weight: 700; color: var(--tinte); line-height: 0.86;
  font-size: min(190px, calc((min(100vw, 1384px) - 64px) * 0.6226 / 5.05 - 8px)); letter-spacing: -0.055em; white-space: nowrap; }
.u-foto { margin: 0; background: var(--flaeche); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.u-foto span { font-size: 12px; color: var(--grau); }
.u-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-foto-1 { border-bottom-width: 1px; padding: 0; min-height: 46vh; }
.u-ich { border-right-width: 1px; }
.u-ich-titel { margin: 0 0 22px; font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 3.6vw, 56px); letter-spacing: -0.04em; line-height: 1; }
.u-foto-2 { aspect-ratio: 4 / 3; }
.u-mehr { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.u-zeile { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.4vw, 38px); letter-spacing: -0.03em; line-height: 1.08; max-width: 18ch; }
.u-raster .u-text { font-size: 15px; line-height: 1.6; max-width: 52ch; margin: 0; }
@media (max-width: 760px) {
  .ueber.u-raster { grid-template-columns: 1fr; width: calc(100% - 32px); margin-top: 72px; margin-bottom: 210px; }
  .u-wort-zelle { border-right-width: 0; min-height: 0; padding-top: 40px; }
  .u-gross { font-size: 14.6vw; }
  .u-foto-1 { min-height: 0; aspect-ratio: 4 / 5; }
  .u-ich { border-right-width: 0; border-bottom-width: 1px; }
  .u-zeile { font-size: 26px; }
}

.u-foto-1 img { object-position: center 30%; }

/* Kachel oben rechts nach Kate-Moss-Layout (16.10.2026): Sage-Fläche, Name senkrecht, halbes Gesicht als Streifen */
.u-streifen-zelle { container-type: size; background: var(--grund); display: flex; justify-content: flex-end; align-items: stretch; gap: 0; padding: 0; position: relative; }
.u-streifen-zelle .u-senkrecht { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; margin-right: 6px;
  font-family: var(--serif); font-weight: 700; color: var(--tinte); letter-spacing: -0.02em; line-height: 0.82; white-space: nowrap;
  font-size: calc(100cqh / 11.6); }
.u-streifen-zelle .u-streifen { position: absolute; inset: 0 0 0 auto; width: 46%; height: 100%; object-fit: cover; object-position: left 25%; filter: grayscale(1) contrast(1.05); }
.u-streifen-zelle .u-senkrecht { position: absolute; right: 48%; top: 50%; translate: 0 -50%; margin: 0; }
.u-foto-2 img { object-position: center 30%; }
@media (max-width: 760px) {
  .u-streifen-zelle { aspect-ratio: 4 / 5; }
  .u-streifen-zelle .u-senkrecht { right: 54%; }
  .u-streifen-zelle .u-streifen { max-width: 52%; }
}

/* ---------- Über mich, Variante B (16.10.2026): ganze Seite nach Kate-Moss-Layout ----------
   Viel Fläche, der Name senkrecht direkt am halben Gesicht, zwei kleine Textspalten links unten und rechts. */
.u-km { position: relative; height: calc(100vh - 120px); min-height: 560px; margin: 104px 32px 40px; border: 1px solid var(--linie);
  display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-rows: 1fr; align-items: center; column-gap: 10px; overflow: hidden; }
.km-name { grid-column: 2; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: end;
  font-family: var(--serif); font-weight: 700; color: var(--tinte); letter-spacing: -0.03em; line-height: 0.8; white-space: nowrap;
  font-size: calc((100vh - 200px) / 9.3); }
.km-bild { grid-column: 3; height: calc(100vh - 200px); min-height: 480px; width: auto; aspect-ratio: 855 / 2048; object-fit: cover; display: block; }
.km-links { grid-column: 1; align-self: end; justify-self: end; max-width: 30ch; padding: 0 34px 34px 0; text-align: left; }
.km-zeile { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.15; letter-spacing: -0.02em; }
.km-knopf { display: inline-block; margin-top: 22px; padding: 9px 18px; border: 1px solid var(--tinte); color: var(--tinte); text-decoration: none; font-size: 12px; }
.km-knopf:hover { background: var(--tinte); color: var(--grund); }
.km-rechts { grid-column: 4; align-self: center; max-width: 30ch; padding-left: 34px; }
.km-rechts .u-text { font-size: 13px; line-height: 1.55; margin: 0; }
.km-ecke { position: absolute; margin: 0; font-size: 12px; color: var(--tinte); }
.km-lo { left: 22px; top: 18px; } .km-ro { right: 22px; top: 12px; font-family: var(--serif); font-weight: 700; font-size: 28px; letter-spacing: -0.04em; }
.km-ru { right: 22px; bottom: 18px; color: var(--grau); }
.erkl-wahl.ueber-wahl { bottom: 34px; }
@media (max-width: 760px) {
  .u-km { height: auto; min-height: 0; margin: 72px 16px 210px; grid-template-columns: auto auto; justify-content: center; row-gap: 22px; padding: 56px 0 22px; }
  .km-name { grid-column: 1; grid-row: 1; font-size: 42px; }
  .km-bild { grid-column: 2; grid-row: 1; height: 62vh; min-height: 0; }
  .km-links, .km-rechts { grid-column: 1 / -1; justify-self: stretch; max-width: none; padding: 0 18px; }
  .km-links { grid-row: 2; } .km-rechts { grid-row: 3; }
}

.ueber[hidden] { display: none !important; }
.ueber.u-km { padding: 0; }
@media (max-width: 760px) { .ueber.u-km { padding: 56px 0 22px; } }
/* Variante B, Korrektur: alles in einer Zeile, Name so lang wie das Bild hoch */
.u-km { height: calc(100vh - 150px); }
.km-name, .km-bild, .km-links, .km-rechts { grid-row: 1; }
.km-bild { height: calc(100vh - 240px); min-height: 420px; }
.km-name { font-size: calc((100vh - 240px) / 10.4); }
@media (max-width: 760px) {
  .u-km { height: auto; }
  .km-links { grid-row: 2; } .km-rechts { grid-row: 3; }
  .km-bild { height: 62vh; }
  .km-name { font-size: calc(62vh / 10.4); }
}

/* ===== Über mich, Variante C (18.10.2026, Lysi): zwei echte Fotos übereinander, nach seiner Referenz ===== */
/* 18.10. (Lysi): Fotos schwarzweiß, Schrift Ochsenblut, Grund bleibt Salbei — ohne Hintergrundbild, Foto mit harter Kante (weicher Rand verworfen) */
.ueber.u-zwei { position: relative; height: 100%; min-height: 560px; padding: 0; overflow: hidden; background: var(--grund); isolation: isolate; }
.z-vorne { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0;
  width: min(58vw, calc(66vh * 1800 / 1560)); aspect-ratio: 1800 / 1560; }
.z-bild { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.z-links, .z-rechts { position: absolute; top: 31%; margin: 0; color: var(--tinte); }
.z-links { left: 7%; }
.z-rechts { left: 69%; width: 27%; }
.z-name, .z-rolle { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.z-name { cursor: default; outline-offset: 4px; }
.z-rechts .u-text { margin: 8px 0 0; font-size: 11px; line-height: 1.45; font-weight: 450; }
.z-rechts .u-text .u-kante { color: var(--grau); }
/* Kinderfoto 2011: klein über dem Namen, nur beim Überfahren */
.z-2011 { position: absolute; left: 0; bottom: calc(100% + 10px); width: 132px; height: auto; display: block;
  opacity: 0; translate: 0 6px; rotate: -3deg; filter: grayscale(1); pointer-events: none; transition: opacity 0.25s ease, translate 0.25s ease; }
.z-links:hover .z-2011, .z-name:focus-visible + .z-2011 { opacity: 1; translate: 0 0; }
.z-unten { position: absolute; left: 50%; bottom: 56px; translate: -50% 0; margin: 0; font-size: 12px; color: var(--tinte); }
@media (max-width: 760px) {
  .ueber.u-zwei { height: auto; min-height: 100%; padding: 96px 16px 220px; }
  .z-vorne { position: relative; left: auto; top: auto; translate: none; width: 100%; aspect-ratio: auto; }
  .z-bild { height: auto; aspect-ratio: 1800 / 1560; }
  .z-links { left: 5%; top: 6%; } .z-rechts { position: static; width: auto; margin-top: 18px; }
  .z-rechts { background: var(--grund); margin-top: 0; padding: 16px; }
  .z-rechts .u-text { font-size: 14px; line-height: 1.5; }
  .z-unten { display: none; }
}

/* ===== 18.10.2026 (Lysi): Überschriften, Menü und Projekttitel in EB Garamond (wie Kontakt) =====
   Die Überschriften waren für Quicksand 700 mit enger Laufweite gesetzt; Garamond braucht weniger Gewicht und Enge. */
.offen .genug p, .erkl-a .t, .offen .vorspann p, .spalte-info h2, .u-gross, .u-ich-titel, .u-zeile, .km-zeile, .km-ro,
.u-streifen-zelle .u-senkrecht, .km-name { font-weight: 500; letter-spacing: -0.01em; }
.menue a { font-family: var(--serif); font-size: 15px; }
.titel { font-family: var(--serif); font-size: 15px; }
.titel .a { font-style: italic; }
.z-name, .z-rolle { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: 0.03em; }
.z-links { left: 4%; }

/* ===== 18.10.2026 (Lysi): Handy — Treppe um die Uhr, grünes Menüfeld, „Alle Arbeiten“ im Menüfeld ===== */
.raster-knopf.zu { visibility: hidden !important; opacity: 0 !important; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.menue-feld { display: none; }
@media (max-width: 640px) {
  /* Uhr kräftig mitten auf der Treppe; liegt zwischen hinteren (z < 1250) und vorderen Karten */
  html.treppe-c .uhr { opacity: 1; z-index: 1250; }
  html.treppe-c .uhr:not(.da) { opacity: 0; }
  .menue-feld { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 176px; z-index: 38; pointer-events: none;
    background: linear-gradient(to bottom, rgba(179, 200, 171, 0) 0, var(--grund) 18px); }
  .raster-knopf { bottom: 142px; z-index: 56; }
  .hinweis, .titel { bottom: 184px; }
  .filter-chip { bottom: 212px; }
}

/* ===== 19.10.2026 (Lysi): Handy — „Alle Arbeiten“ als vierter Menüpunkt links unter „Arbeiten“, Zifferblatt 30 px höher ===== */
.menue a.m-alle { display: none; }
@media (max-width: 640px) {
  .menue a.m-alle { display: block; transform: translate(-100%, -50%); }
  .raster-knopf { display: none; }
  .hinweis, .titel { bottom: 214px; }
  .filter-chip { bottom: 242px; }
  .menue-feld { height: 206px; }
}

/* ===== Über mich, Variante D (20.10.2026, ?ueber=d): Mix aus Entwurf 2 (großer Name) und C (Beschriftung) =====
   Der Abschnitt scrollt selbst (.seite.scroll). Die Bühne ist drei Bildschirme hoch, innen klebt ein Bildschirm fest.
   ueber.js setzt --a (Öffnen 0…1) und --t (Beschriftung 0…1). */
.ueber.u-d { position: relative; padding: 0; background: var(--grund); }
.d-buehne { height: 300vh; height: 300dvh; position: relative; }
.d-fest { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; --a: 0; --t: 0; }
.d-wort { position: absolute; left: 0; right: 0; margin: 0; text-align: center; white-space: nowrap; z-index: 2;
  font-family: var(--serif); font-weight: 500; font-size: 19vw; line-height: 0.78; letter-spacing: -0.03em; color: var(--tinte); will-change: transform; }
.d-w1 { top: calc(50% - 0.78em - 2.6vh); transform: translate(calc(var(--a) * -22vw), calc(var(--a) * -62vh)); }
.d-w2 { top: calc(50% + 2.6vh); transform: translate(calc(var(--a) * 22vw), calc(var(--a) * 62vh)); }
.d-fenster { position: absolute; left: 50%; top: 50%; translate: -50% -50%; overflow: hidden; z-index: 1;
  width: calc(14vw + var(--a) * 86vw); height: calc(5.2vh + var(--a) * 94.8vh); }
.d-fenster img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05);
  object-position: 50% calc(17% - var(--a) * 17%); scale: calc(1.7 - var(--a) * 0.7); transform-origin: 50% 17%; }   /* offen: oberer Bildrand, damit der Kopf unter dem Menü-Zeiger frei bleibt */
.d-links, .d-rechts { position: absolute; top: 19%; margin: 0; z-index: 3; color: var(--tinte);
  opacity: var(--t); translate: 0 calc((1 - var(--t)) * 18px); }
.d-links { left: 4.5%; }
.d-rechts { right: 4.5%; width: min(400px, 32vw); background: var(--grund); padding: 20px 22px 22px; }   /* auf dem Beton war der Absatz nicht lesbar */
.d-links .z-name, .d-rolle { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 42px); letter-spacing: -0.01em; line-height: 1; text-transform: none; margin: 0; }
.d-rechts .u-text { margin: 14px 0 0; font-size: 14px; line-height: 1.5; font-weight: 500; }
.d-rechts .u-text .u-kante { color: var(--grau); }
.d-links .z-2011 { top: calc(100% + 14px); bottom: auto; translate: 0 -8px; }
.d-links:hover .z-2011, .d-links .z-name:focus-visible + .z-2011 { translate: 0 0; }
.d-hinweis { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; font-size: 12px; color: var(--grau); z-index: 3; opacity: calc(1 - var(--a) * 5); }
@media (max-width: 760px) {
  .d-wort { font-size: 21vw; }
  .d-fenster { width: calc(30vw + var(--a) * 70vw); height: calc(5vh + var(--a) * 95vh); }
  .d-buehne { height: 240vh; height: 240dvh; }
  .d-links { display: none; }   /* der Name steht am Handy schon oben links */
  /* Handy: das Zifferblatt deckt unten alles zu, deshalb steht der Text unter der Bühne und scrollt übers Foto hoch (ueber.js hängt ihn um) */
  .d-rechts.d-fluss { position: relative; top: auto; right: auto; width: auto; opacity: 1; translate: none; margin-top: -30vh;
    background: var(--grund); padding: 24px 16px 260px; z-index: 3; }
  .d-rolle { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .d-buehne { height: auto; } .d-fest { position: relative; --a: 1; --t: 1; } }

/* ===== Über mich, Variante E (20.10.2026, ?ueber=e): A ohne Rasterlinien, der Name groß statt „Art Director.“,
   unten das Stuhlfoto ungeschnitten. ===== */
.ueber-e .ueber.u-raster, .ueber-e .u-zelle { border: 0 !important; }
.ueber-e .u-gross { white-space: normal; max-width: 6ch; line-height: 0.84; letter-spacing: -0.02em;
  font-size: min(200px, calc((min(100vw, 1384px) - 64px) * 0.6226 / 4.35 - 8px)); }
.ueber-e .u-foto-2 { aspect-ratio: 1800 / 1560; }
.ueber-e .u-foto-2 img { object-position: center; filter: grayscale(1) contrast(1.05); }
@media (max-width: 760px) { .ueber-e .u-gross { font-size: 19vw; } }
.ueber-e .u-streifen-zelle .u-senkrecht { display: none; }   /* Name steht schon groß links, dreimal war zu viel */

/* ---------- Über mich Variante F (20.10.2026, Lysi: „fast 1:1“ nach kaviengcreative.com/#about) ----------
   Aufbau wie die Referenz: Name in zwei Hälften um ein Foto, Trennlinie, Text groß in der Serife,
   Faktenzeile zwischen zwei Linien, unten groß der Weg zu Instagram. Farben bleiben Salbei/Ochsenblut. */
.ueber.u-f { --f-rand: 40px; padding: 0; background: var(--grund); color: var(--tinte); }
.f-kopf { position: relative; height: 100vh; height: 100dvh; min-height: 640px; }
.f-unterzeile { position: absolute; left: 66.6%; top: 90px; margin: 0; font-size: 15px; color: var(--grau); }
.f-bild { position: absolute; left: 50%; top: 50%; width: min(36vw, 62vh); aspect-ratio: 1800 / 1560; margin: 0; translate: -50% -50%; }
.f-bild img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); }
.f-name { position: absolute; z-index: 1; margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1;
  font-size: min(9.6vw, 19vh); letter-spacing: -0.035em; white-space: nowrap; pointer-events: none; }
.f-n1 { left: var(--f-rand); top: 66%; translate: 0 -100%; }
.f-n2 { right: var(--f-rand); top: 88%; translate: 0 -100%; }
.f-ueber { display: grid; grid-template-columns: 26.7% 1fr; padding: 180px var(--f-rand) 0; border-top: 1px solid var(--linie); }
.f-marke { margin: 0; padding-top: 0.55em; font-size: 14px; }
.ueber-f .f-ueber .u-text { margin: 0; max-width: 20em; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 38px); line-height: 1.3; letter-spacing: -0.01em; }
/* Die Referenz baut den Text nicht auf: er steht fertig da, wenn man runterscrollt */
.ueber-f .f-ueber .u-text .u-weg { opacity: 1; }
.ueber-f .f-ueber .u-text .u-kante { color: inherit; }
.f-fakten { margin: 220px var(--f-rand) 0; padding: 18px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.f-fakten div { display: grid; grid-template-columns: 178px 1fr; padding: 6px 0; }
.f-fakten dt { color: var(--grau); font-size: 15px; }
.f-fakten dd { margin: 0; font-size: 15px; }
.f-hallo { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 300px var(--f-rand) 0; padding-bottom: 96px;
  font-family: var(--serif); font-size: min(8vw, 150px); line-height: 0.9; white-space: nowrap; letter-spacing: -0.035em; color: var(--tinte); text-decoration: none; }
.f-hallo .f-pfeil { font-family: var(--grotesk); font-weight: 300; font-size: 0.7em; transition: transform 0.4s var(--raus); }
.f-hallo:hover .f-pfeil { transform: translate(0.08em, -0.08em); }
@media (max-width: 760px) {
  .ueber.u-f { --f-rand: 16px; }
  .f-kopf { height: auto; min-height: 0; padding: 92px 0 56px; }
  .f-unterzeile { position: static; margin: 0 var(--f-rand) 56px auto; width: 50%; font-size: 13px; }
  .f-bild { position: static; translate: none; width: 64%; margin: 0 auto; }
  .f-name { position: static; translate: none; font-size: 19vw; }
  .f-n1 { margin: 40px 0 0 var(--f-rand); }
  .f-n2 { margin: -0.18em var(--f-rand) 0 0; text-align: right; }
  .f-ueber { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; }
  .ueber-f .f-ueber .u-text { font-size: 22px; }
  .f-fakten { margin-top: 110px; }
  .f-fakten div { grid-template-columns: 1fr; padding: 8px 0; }
  .f-fakten dt, .f-fakten dd { font-size: 13px; }
  .f-hallo { margin-top: 160px; font-size: 13vw; padding-bottom: 230px; white-space: normal; }
}

/* Menü schlanker auf dem Desktop (20.10.2026, Lysi): ?menue=b|c, Handy bleibt wie es ist */
@media (min-width: 641px) {
  html.menue-b .menue a, html.menue-c .menue a { font-size: 13px; padding: 4px 6px; }
  html.menue-c .blatt .strich { stroke: rgba(107, 10, 6, 0.16); }
}

/* ---------- Über mich F, Handy-Kopf (25.10.2026, Lysi wählt Fassung 1): Unterzeile raus, Foto über die ganze Breite,
   „Lysander“ ragt oben links, „Lenzmann“ unten rechts über die Bildkante ---------- */
@media (max-width: 760px) {
  .f-kopf { position: relative; padding: 118px var(--f-rand) 84px; }
  .f-unterzeile { display: none; }
  .f-bild { width: 100%; margin: 0; }
  .f-name { position: absolute; font-size: 21vw; margin: 0; }
  .f-n1 { left: calc(var(--f-rand) - 0.04em); top: 118px; translate: 0 -58%; }
  .f-n2 { top: auto; right: var(--f-rand); bottom: 84px; translate: 0 60%; }
}

/* ---------- Intro „Daumenkino“ (25.10.2026, app.js IntroV): Bildfenster in der Mitte, rot, solange noch kein Bild da ist ---------- */
.iv-kino { position: fixed; z-index: 2500; width: min(42vw, 420px); aspect-ratio: 16 / 9; translate: -50% -50%;
  background: var(--tinte); overflow: hidden; pointer-events: none; }
.iv-kino img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; }
.iv-kino img.an { opacity: 1; }
@media (max-width: 640px) { .iv-kino { width: 76vw; } }

/* ---------- Handy-Menü (25.10.2026, Lysi): „Rechtliches“ als fünfter Punkt rechts unter „Kontakt“, Spiegel zu „Alle Arbeiten“ —
   der Bogen wird symmetrisch, die Ecke unten links bleibt leer. Etwas blasser, damit es nicht mit den Seiten konkurriert. ---------- */
.menue a.m-recht { display: none; }
@media (max-width: 640px) {
  .menue a.m-recht { display: block; transform: translate(0, -50%); color: rgba(107, 10, 6, 0.32); }
  .menue a.m-recht:hover, .menue a.m-recht:focus-visible, .menue a.m-recht[aria-current="page"] { color: var(--tinte); }
  .unten-links a.nur-handy { display: none; }
}

/* ===== 25.10.2026 (Lysi): Handy — „Rechtliches“ als Ebene über den Seiten, Menü bleibt stehen (menue.js, Recht) ===== */
.recht-ebene { position: fixed; inset: 0; z-index: 29; background: var(--grund); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; translate: 0 12px; transition: opacity 0.4s ease, translate 0.5s var(--raus), visibility 0s linear 0.5s; }
.recht-ebene.an { visibility: visible; opacity: 1; translate: 0 0; transition: opacity 0.4s ease, translate 0.5s var(--raus); }
.recht-ebene .recht { max-width: 36em; margin: 0 auto; padding: 96px 16px 0; font-size: 13px; }
.recht-ebene > div:last-child .recht { padding-bottom: 240px; }   /* frei über dem Menübogen */
.recht-ebene h1 { font-family: var(--serif); font-weight: 400; font-size: 40px; margin: 0 0 32px; }
.recht-ebene h2 { font-size: 12px; font-weight: 500; color: var(--grau); margin: 28px 0 6px; }
.recht-ebene p { margin: 0; }
.recht-ebene p + p { margin-top: 10px; }
.recht-ebene .entwurf { display: none; }