/* ============================================================
   Stefan Seitz — Bildhauer
   Farbwelten, Hell/Dunkel und Layoutvarianten als ein System.
   Keine externen Schriften, keine externen Dienste.
   ============================================================ */

/* ---------- 1. Farbwelten -------------------------------- */
/* Voreinstellung: Leinen, hell. Nie reines Weiss.            */

:root {
  --bg:        #f2eee5;
  --flaeche:   #e9e3d6;
  --flaeche-2: #ddd5c4;
  --text:      #2b2721;
  --gedaempft: #655d51;
  --linie:     #d5cdbc;
  --akzent:    #8a6a4a;
  --akzent-text: #6d5133;
  --schatten:  22 18 10;

  --luft-min:    clamp(1rem, 3.5vw, 1.6rem);
  --luft:        clamp(2.4rem, 6vw, 4.5rem);
  --luft-gross:  clamp(4rem, 11vw, 9rem);
  --bahn:        clamp(1rem, 4vw, 3rem);   /* Seitenrand */
  --breite:      74rem;
  --tempo:       .5s cubic-bezier(.22,.61,.36,1);

  /* Kantenform — im Steuerpult umschaltbar */
  --radius:       3px;    /* Bilder, Kacheln */
  --radius-gross: 6px;    /* Kaesten, Tafeln */
  --radius-knopf: 100px;  /* Schaltflaechen */

  /* Grundschriften; die Schriftwelten in Abschnitt 16 ueberschreiben sie */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
}

:root[data-modus="dunkel"] {
  --bg:        #1b1916;
  --flaeche:   #232019;
  --flaeche-2: #2e2a22;
  --text:      #ece7dd;
  --gedaempft: #a89e8e;
  --linie:     #37322a;
  --akzent:    #c9a77c;
  --akzent-text: #d8b98f;
  --schatten:  0 0 0;
}

:root[data-farbwelt="nebel"] {
  --bg:#edeff2; --flaeche:#e2e6ec; --flaeche-2:#d4dae2; --text:#1f262d;
  --gedaempft:#57616d; --linie:#cbd2db; --akzent:#4a6b85; --akzent-text:#3b5a73;
  --schatten: 16 24 34;
}
:root[data-farbwelt="nebel"][data-modus="dunkel"] {
  --bg:#13171b; --flaeche:#1a2026; --flaeche-2:#232b33; --text:#e2e8ee;
  --gedaempft:#98a5b2; --linie:#2b333c; --akzent:#7fa8c6; --akzent-text:#94b9d4;
  --schatten: 0 0 0;
}

:root[data-farbwelt="salbei"] {
  --bg:#eceee7; --flaeche:#e1e5da; --flaeche-2:#d3d9c9; --text:#212619;
  --gedaempft:#586150; --linie:#c9d1bf; --akzent:#5b7a55; --akzent-text:#48633f;
  --schatten: 18 24 14;
}
:root[data-farbwelt="salbei"][data-modus="dunkel"] {
  --bg:#151812; --flaeche:#1c2018; --flaeche-2:#252a20; --text:#e4e8de;
  --gedaempft:#9ba793; --linie:#2b3128; --akzent:#8fb287; --akzent-text:#a3c39b;
  --schatten: 0 0 0;
}

:root[data-farbwelt="ton"] {
  --bg:#f1ece8; --flaeche:#e8e0d9; --flaeche-2:#dcd0c6; --text:#2a2321;
  --gedaempft:#6a5d55; --linie:#dacec5; --akzent:#a05a3c; --akzent-text:#8a4a2f;
  --schatten: 26 16 12;
}
:root[data-farbwelt="ton"][data-modus="dunkel"] {
  --bg:#191413; --flaeche:#211b18; --flaeche-2:#2c2420; --text:#ece3dd;
  --gedaempft:#ab998e; --linie:#332a25; --akzent:#c98462; --akzent-text:#d99a78;
  --schatten: 0 0 0;
}

:root[data-farbwelt="himmel"] {
  --bg:#dfebf6; --flaeche:#cee0f0; --flaeche-2:#bad3e8; --text:#12212d;
  --gedaempft:#455a6c; --linie:#b6cee2; --akzent:#2f6f9f; --akzent-text:#255b83;
  --schatten: 12 26 40;
}
:root[data-farbwelt="himmel"][data-modus="dunkel"] {
  --bg:#0f1a23; --flaeche:#16222c; --flaeche-2:#1f2f3b; --text:#e2ecf5;
  --gedaempft:#92a6b8; --linie:#243543; --akzent:#79aed6; --akzent-text:#90c0e2;
  --schatten: 0 0 0;
}

:root[data-farbwelt="pastell"] {
  --bg:#f0e7f2; --flaeche:#e4d7e8; --flaeche-2:#d6c4dc; --text:#261e28;
  --gedaempft:#5f5266; --linie:#d4c3da; --akzent:#8a5c98; --akzent-text:#6b4177;
  --schatten: 26 18 30;
}
:root[data-farbwelt="pastell"][data-modus="dunkel"] {
  --bg:#181419; --flaeche:#201b22; --flaeche-2:#2b242e; --text:#ede4ef;
  --gedaempft:#a598a9; --linie:#312a34; --akzent:#bb93c8; --akzent-text:#cba8d5;
  --schatten: 0 0 0;
}

/* Systemvorgabe, solange nichts gewaehlt wurde */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) {
    --bg:#1b1916; --flaeche:#232019; --flaeche-2:#2e2a22; --text:#ece7dd;
    --gedaempft:#a89e8e; --linie:#37322a; --akzent:#c9a77c; --akzent-text:#d8b98f;
    --schatten: 0 0 0;
  }
  :root[data-farbwelt="nebel"]:not([data-modus="hell"]) {
    --bg:#13171b; --flaeche:#1a2026; --flaeche-2:#232b33; --text:#e2e8ee;
    --gedaempft:#98a5b2; --linie:#2b333c; --akzent:#7fa8c6; --akzent-text:#94b9d4;
  }
  :root[data-farbwelt="salbei"]:not([data-modus="hell"]) {
    --bg:#151812; --flaeche:#1c2018; --flaeche-2:#252a20; --text:#e4e8de;
    --gedaempft:#9ba793; --linie:#2b3128; --akzent:#8fb287; --akzent-text:#a3c39b;
  }
  :root[data-farbwelt="ton"]:not([data-modus="hell"]) {
    --bg:#191413; --flaeche:#211b18; --flaeche-2:#2c2420; --text:#ece3dd;
    --gedaempft:#ab998e; --linie:#332a25; --akzent:#c98462; --akzent-text:#d99a78;
  }
  :root[data-farbwelt="himmel"]:not([data-modus="hell"]) {
    --bg:#0f1a23; --flaeche:#16222c; --flaeche-2:#1f2f3b; --text:#e2ecf5;
    --gedaempft:#92a6b8; --linie:#243543; --akzent:#79aed6; --akzent-text:#90c0e2;
  }
  :root[data-farbwelt="pastell"]:not([data-modus="hell"]) {
    --bg:#181419; --flaeche:#201b22; --flaeche-2:#2b242e; --text:#ede4ef;
    --gedaempft:#a598a9; --linie:#312a34; --akzent:#bb93c8; --akzent-text:#cba8d5;
  }
}

/* Kantenform — im Steuerpult umschaltbar */
:root[data-kanten="spitz"] { --radius: 0; --radius-gross: 0; --radius-knopf: 0; }
:root[data-kanten="rund"]  { --radius: 18px; --radius-gross: 22px; --radius-knopf: 100px; }

/* ---------- 2. Grundlagen -------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.09rem);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background var(--tempo), color var(--tempo);
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.012em;
  text-wrap: pretty;              /* nicht balance: bricht dt. Silbentrennung */
  hyphens: auto;
  overflow-wrap: break-word;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2rem, 1.2rem + 4.2vw, 4.6rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.65rem); }
h4 { font-size: clamp(1.1rem, 1.03rem + .3vw, 1.28rem); }

p, li { text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }
p { margin: 0 0 1.1em; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.bahn {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--bahn);
}
.bahn--weit { max-width: 100rem; }
.bahn--schmal { max-width: 46rem; }

.abschnitt { padding-block: var(--luft-gross); }
.abschnitt--knapp { padding-block: var(--luft); }

.vorspann {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin: 0 0 1.4rem;
}

.fliess { font-size: 1.06em; line-height: 1.8; }
.fliess--gross { font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem); line-height: 1.72; }
.gedaempft { color: var(--gedaempft); }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.zum-inhalt {
  position: fixed; top: .6rem; left: .6rem; z-index: 200;
  transform: translateY(-160%);
  background: var(--text); color: var(--bg);
  padding: .7rem 1.1rem; border-radius: var(--radius);
  text-decoration: none;
}
.zum-inhalt:focus { transform: none; }

/* ---------- 3. Kopf und Navigation ----------------------- */

.kopf {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tempo), background var(--tempo);
}
.kopf[data-gescrollt="ja"] { border-bottom-color: var(--linie); }

.kopf__innen {
  display: flex; align-items: center; gap: var(--luft-min);
  min-height: 4.6rem;
  padding-block: .8rem;
  transition: min-height var(--tempo);
}
.kopf[data-gescrollt="ja"] .kopf__innen { min-height: 3.7rem; }

.marke {
  font-family: var(--serif);
  font-size: clamp(1.05rem, .98rem + .35vw, 1.3rem);
  letter-spacing: .01em;
  text-decoration: none;
  line-height: 1.2;
  min-width: 0;
  margin-right: auto;
}
.marke span {
  display: block;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin-top: .18em;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem); }
.nav > a {
  position: relative;
  text-decoration: none;
  font-size: .93rem;
  padding-block: .35rem;
  color: var(--text);
  white-space: nowrap;
}
.nav > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.nav > a:hover::after, .nav > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav > a[aria-current="page"] { color: var(--akzent-text); }
.nav > a[aria-current="page"]::after { transform: scaleX(1); background: var(--akzent); }

.knopf-blank {
  appearance: none; background: none; border: 0; color: inherit;
  font: inherit; cursor: pointer; padding: 0;
}

.schalter {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: transparent; color: inherit;
  cursor: pointer;
  transition: border-color .3s, background .3s, transform .3s;
  flex: none;
}
.schalter:hover { border-color: var(--akzent); background: var(--flaeche); }
.schalter:active { transform: scale(.94); }
.schalter svg { width: 1.05rem; height: 1.05rem; fill: none;
  stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.schalter__mond { display: none; }
:root[data-modus="dunkel"] .schalter__sonne { display: none; }
:root[data-modus="dunkel"] .schalter__mond  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) .schalter__sonne { display: none; }
  :root:not([data-modus="hell"]) .schalter__mond  { display: block; }
}

/* Menuknopf nur mobil */
.menue-knopf { display: none; }
.menue-knopf__linien { display: block; width: 1.15rem; height: 9px; position: relative; }
.menue-knopf__linien i {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .25s;
}
.menue-knopf__linien i:nth-child(1) { top: 0; }
.menue-knopf__linien i:nth-child(2) { bottom: 0; }
body[data-menue="offen"] .menue-knopf__linien i:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
body[data-menue="offen"] .menue-knopf__linien i:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* Die mobile Navigation steht in Abschnitt 17. */

/* ---------- 4. Auftakt ----------------------------------- */

.auftakt { position: relative; padding-block: var(--luft-gross) var(--luft); }
.auftakt__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--luft);
  align-items: center;
}
@media (min-width: 900px) {
  .auftakt__raster { grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); }
}
.auftakt__text { min-width: 0; }
.auftakt h1 { margin-bottom: .35em; }
.auftakt__unterzeile {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  font-style: italic;
  color: var(--gedaempft);
  margin: 0 0 1.6rem;
  line-height: 1.4;
}
.auftakt__bild {
  position: relative;
  /* Kein Innenabstand: sonst schiebt der Parallax-Versatz das Bild an eine
     Kante und laesst am Gegenrand einen Streifen Hintergrund im Rahmen
     stehen — gemessen 30.08.2026, sah aus wie ein Rand im Bild. */
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2rem 4rem -1.6rem rgb(var(--schatten) / .38);
}
.auftakt__bild img { width: 100%; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; }

.knopf {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .82rem 1.5rem;
  border: 1px solid var(--text);
  border-radius: var(--radius-knopf);
  background: var(--text); color: var(--bg);
  text-decoration: none;
  font-size: .93rem; letter-spacing: .02em;
  cursor: pointer;
  transition: transform .3s, opacity .3s, background .3s, color .3s;
}
.knopf:hover { transform: translateY(-2px); opacity: .9; }
.knopf--leer { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf--leer:hover { border-color: var(--akzent); background: var(--flaeche); }
.knopf svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 5. Galerie mit drei Layouts ------------------ */

.galerie { margin-top: var(--luft); }

/* Layout A: Raster */
.galerie[data-layout="raster"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3.5vw, 2.8rem);
}
@media (min-width: 560px) { .galerie[data-layout="raster"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .galerie[data-layout="raster"] { grid-template-columns: repeat(3, 1fr); } }
.galerie[data-layout="raster"] .werk__rahmen { aspect-ratio: 3 / 4; }
/* Kunst wird nicht beschnitten: das ganze Werk bleibt sichtbar. */
.galerie[data-layout="raster"] .werk__rahmen img { width: 100%; height: 100%; object-fit: contain; }

/* Layout B: Mosaik — natuerliche Bildhoehen */
.galerie[data-layout="mosaik"] {
  display: block;
  columns: 1;
  column-gap: clamp(1.4rem, 3.5vw, 2.8rem);
}
@media (min-width: 560px) { .galerie[data-layout="mosaik"] { columns: 2; } }
@media (min-width: 1000px) { .galerie[data-layout="mosaik"] { columns: 3; } }
.galerie[data-layout="mosaik"] .werk {
  break-inside: avoid;
  margin-bottom: clamp(1.4rem, 3.5vw, 2.8rem);
  display: block;
}

/* Layout C: Bahn — grosse Bilder, wechselseitig */
.galerie[data-layout="bahn"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--luft-gross);
}
@media (min-width: 820px) {
  .galerie[data-layout="bahn"] .werk {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  .galerie[data-layout="bahn"] .werk:nth-child(even) .werk__rahmen { order: 2; }
  .galerie[data-layout="bahn"] .werk__angaben { padding-block: 0; }
  .galerie[data-layout="bahn"] .werk__titel { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
}
.galerie[data-layout="bahn"] .werk__rahmen { max-height: 82vh; }
.galerie[data-layout="bahn"] .werk__rahmen img { max-height: 82vh; width: auto; margin-inline: auto; }

/* Werkkachel */
.werk { position: relative; min-width: 0; text-decoration: none; color: inherit; }

.werk__rahmen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--flaeche);
  display: block;
}
.werk__rahmen img { width: 100%; }
.werk { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.werk__rahmen { transition: box-shadow .5s, background .5s; }
.werk:hover { transform: translateY(-4px); }
.werk:hover .werk__rahmen {
  box-shadow: 0 1.4rem 2.8rem -1.2rem rgb(var(--schatten) / .34);
}

.werk__lupe {
  position: absolute; inset: auto 1rem 1rem auto;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.werk:hover .werk__lupe, .werk:focus-visible .werk__lupe { opacity: 1; transform: none; }
.werk__lupe svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; }

/* Andeutung: dieses Werk hat mehr Fotos. Bewusst leise — sie soll
   neugierig machen, nicht mit dem Werkbild konkurrieren. Deshalb klein,
   halb durchsichtig und erst beim Ueberfahren der Kachel ganz da. */
.werk__mehr {
  display: flex; align-items: center; gap: .3rem;
  padding-top: .6rem;
  /* Feste Hoehe, auch leer: haelt die Namenszeile einer Rasterreihe auf
     einer Linie. Muss zur Miniaturhoehe unten passen. */
  height: calc(1.6rem + .6rem);
  box-sizing: content-box;
}
.werk__mehr-bilder { display: flex; align-items: center; gap: .25rem; }
.werk__mehr-bilder img {
  width: 1.6rem; height: 1.6rem;
  border-radius: calc(var(--radius) - 1px);
  object-fit: cover;
  opacity: .55;
  filter: saturate(.8);
  transition: opacity var(--tempo), filter var(--tempo), transform var(--tempo);
}
.werk__mehr-zahl {
  font-size: .74rem;
  letter-spacing: .06em;
  /* Keine zusaetzliche Transparenz: --gedaempft allein traegt AA, mit
     opacity .75 fiel der Kontrast im Dunkelmodus auf 4,3 : 1 bei 11,8 px. */
  color: var(--gedaempft);
  margin-inline-start: .1rem;
  transition: opacity var(--tempo), color var(--tempo);
}
.werk:hover .werk__mehr-bilder img,
.werk:focus-visible .werk__mehr-bilder img { opacity: 1; filter: none; }
.werk:hover .werk__mehr-zahl,
.werk:focus-visible .werk__mehr-zahl { color: var(--akzent-text); }

/* Die Miniaturen faechern sich beim Ueberfahren minimal auf. Ohne Bewegung
   bleiben sie schlicht stehen — die Andeutung traegt auch ohne. */
@media (prefers-reduced-motion: no-preference) {
  .werk:hover .werk__mehr-bilder img:nth-child(2) { transform: translateY(-2px); }
  .werk:hover .werk__mehr-bilder img:nth-child(3) { transform: translateY(-3px); }
}

.werk__angaben { padding-block: .9rem .2rem; }
.werk__titel {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 .2rem;
}
.werk__zeile { font-size: .87rem; color: var(--gedaempft); margin: 0; line-height: 1.55; }
.werk__preis {
  display: inline-block; margin-top: .5rem;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--akzent-text);
}

/* ---------- 6. Steuerpult (schwebend) -------------------- */

.pult { position: fixed; right: clamp(.9rem, 3vw, 1.8rem); bottom: clamp(.9rem, 3vw, 1.8rem); z-index: 120; }

.pult__knopf {
  width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 .8rem 2rem -.6rem rgb(var(--schatten) / .35);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .3s;
}
.pult__knopf:hover { transform: rotate(28deg) scale(1.05); border-color: var(--akzent); }
.pult__knopf svg { width: 1.3rem; height: 1.3rem; }

.pult__tafel {
  position: absolute; right: 0; bottom: 3.9rem;
  width: min(20.5rem, calc(100vw - 2 * clamp(.9rem, 3vw, 1.8rem)));
  padding: 1.3rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1.4rem 3.2rem -.8rem rgb(var(--schatten) / .42);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .32s, transform .32s cubic-bezier(.22,.61,.36,1), visibility .32s;

  /* Mit fuenf Gruppen wird die Tafel hoeher als mancher Bildschirm.
     Deshalb begrenzen und innen scrollen lassen, statt oben abzuschneiden. */
  max-height: calc(100dvh - 7rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linie) transparent;
}
@supports not (height: 100dvh) {
  .pult__tafel { max-height: calc(100vh - 7rem); }
}
.pult__tafel::-webkit-scrollbar { width: 5px; }
.pult__tafel::-webkit-scrollbar-track { background: transparent; }
.pult__tafel::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 100px; }
.pult[data-offen="ja"] .pult__tafel { opacity: 1; visibility: visible; transform: none; }

.pult__gruppe + .pult__gruppe { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--linie); }
.pult__titel {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gedaempft); margin: 0 0 .55rem;
}

.farbfeld { display: flex; flex-wrap: wrap; gap: .55rem; }
.farbfeld button {
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  border: 1px solid var(--linie);
  cursor: pointer; padding: 0;
  position: relative;
  transition: transform .28s, border-color .28s;
}
.farbfeld button:hover { transform: scale(1.1); }
.farbfeld button[aria-pressed="true"] { border-color: var(--text); border-width: 2px; }
.farbfeld button[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--akzent);
}
.f-leinen { background: linear-gradient(135deg, #f2eee5 50%, #8a6a4a 50%); }
.f-nebel  { background: linear-gradient(135deg, #edeff2 50%, #4a6b85 50%); }
.f-salbei { background: linear-gradient(135deg, #eceee7 50%, #5b7a55 50%); }
.f-ton    { background: linear-gradient(135deg, #f1ece8 50%, #a05a3c 50%); }
.f-himmel { background: linear-gradient(135deg, #dfebf6 50%, #2f6f9f 50%); }
.f-pastell{ background: linear-gradient(135deg, #f0e7f2 50%, #8a5c98 50%); }

.wahlreihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.wahlreihe--zwei { grid-template-columns: repeat(2, 1fr); }
.wahlreihe button {
  display: grid; gap: .3rem; justify-items: center;
  padding: .5rem .3rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: transparent; color: var(--gedaempft);
  font: inherit; font-size: .74rem;
  cursor: pointer;
  transition: border-color .28s, color .28s, background .28s;
}
.wahlreihe button:hover { border-color: var(--akzent); background: var(--flaeche); }
.wahlreihe button[aria-pressed="true"] { border-color: var(--text); color: var(--text); background: var(--flaeche); }
.wahlreihe svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 7. Lichtkasten ------------------------------- */

/* ---- Aufklappbarer Text ---------------------------------- */
/* Ohne Skript: <details>/<summary> koennen das von sich aus.   */

.klapp {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.klapp__knopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.05rem .2rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gedaempft);
  transition: color .25s;
}
.klapp__knopf::-webkit-details-marker { display: none; }
.klapp__knopf:hover { color: var(--text); }
.klapp[open] .klapp__knopf { color: var(--text); }

/* Plus, das beim Aufklappen zum Minus wird */
.klapp__zeichen {
  position: relative; flex: none; width: 1rem; height: 1rem;
}
.klapp__zeichen::before,
.klapp__zeichen::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1px; background: currentColor;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.klapp__zeichen::after { transform: rotate(90deg); }
.klapp[open] .klapp__zeichen::after { transform: rotate(0deg); }

.klapp__inhalt { padding-bottom: 1.6rem; }
.klapp__inhalt .fliess:last-of-type { margin-bottom: .6rem; }
.klapp__quelle {
  font-family: var(--sans);
  font-size: .78rem; letter-spacing: .1em;
  color: var(--gedaempft);
  margin: 0;
}

:root[data-bewegung="lebendig"] .klapp[open] .klapp__inhalt {
  animation: klapp-auf .45s cubic-bezier(.22,.61,.36,1);
}
@keyframes klapp-auf { from { opacity: 0; transform: translateY(-.4rem); } }

@media (prefers-reduced-motion: reduce) {
  .klapp__zeichen::before, .klapp__zeichen::after { transition: none; }
  :root[data-bewegung="lebendig"] .klapp[open] .klapp__inhalt { animation: none; }
}

.lichtkasten {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(2.9rem, 6vw, 4rem) clamp(.7rem, 3vw, 2.5rem) clamp(.7rem, 2vw, 1.4rem);
  opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
.lichtkasten[data-offen="ja"] { opacity: 1; visibility: visible; }
/* Das hidden-Attribut muss staerker sein als display:grid */
.lichtkasten[hidden] { display: none; }
.lichtkasten__buehne { position: relative; min-height: 0; overflow: hidden; }
.lichtkasten__buehne img {
  position: absolute;
  inset: 0;
  margin: auto;                 /* zentriert in beiden Richtungen */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 2rem 5rem -1.5rem rgb(var(--schatten) / .4);
  animation: bild-ein .45s cubic-bezier(.22,.61,.36,1);
}
@keyframes bild-ein { from { opacity: 0; transform: scale(.985); } }
/* Skizzen bleiben eckig — unabhaengig von der gewaehlten Kantenform */
.werk__rahmen--eckig,
.werk__rahmen--eckig img,
.lichtkasten__buehne img { border-radius: 0; }

.lichtkasten__fuss { text-align: center; padding-top: .8rem; }
.lichtkasten__titel { font-family: var(--serif); font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); margin: 0 0 .1rem; line-height: 1.25; }
.lichtkasten__zeile { font-size: .87rem; color: var(--gedaempft); margin: 0; }
.lichtkasten__zu { position: absolute; top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); }
.lichtkasten__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem;
}
.lichtkasten__pfeil--links  { left: clamp(.4rem, 2vw, 1.6rem); }
.lichtkasten__pfeil--rechts { right: clamp(.4rem, 2vw, 1.6rem); }
.lichtkasten__zaehler {
  position: absolute; top: clamp(.9rem, 3vw, 1.7rem); left: 50%; transform: translateX(-50%);
  font-size: .8rem; letter-spacing: .12em; color: var(--gedaempft);
}

/* ---------- 8. Einzelwerk -------------------------------- */

.werkseite {
  display: grid; grid-template-columns: 1fr; gap: var(--luft);
  padding-block: var(--luft);
}
@media (min-width: 900px) {
  .werkseite { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .werkseite__daten { position: sticky; top: 7rem; }
}
.werkseite__bilder { display: grid; gap: 1.2rem; min-width: 0; }

/* Der Werktitel steht in einer schmalen Spalte neben dem Bild. Die grosse
   h1-Stufe der Galerieseiten erschlaegt sie dort — hier eine eigene, ruhigere
   Stufe. Gemessen 30.08.2026: vorher 73 px in einer 384 px breiten Spalte. */
.werkseite__daten h1 {
  font-size: clamp(1.9rem, 1.4rem + 1.3vw, 2.7rem);
  margin-bottom: .35em;
}

/* Blättern zwischen den Werken: zwei Schaltflächen, eine ganz links, eine
   ganz rechts am Satzspiegel. Sie sollen als Ziel erkennbar sein und nicht
   als zwei Wörter in der Mitte zusammenstehen (Carlo, 30.08.2026). */
.werk-blaettern {
  margin-top: var(--luft);
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: .8rem;
}
.werk-blaettern__zu {
  min-height: 3rem;
  max-width: calc(50% - .4rem);
  padding-inline: 1.15rem;
  font-family: var(--serif);
  font-size: clamp(1rem, .92rem + .35vw, 1.2rem);
  letter-spacing: 0;
  line-height: 1.25;
}
.werk-blaettern__zu--zurueck { text-align: right; }
.werk-blaettern__titel { min-width: 0; }
.werk-blaettern__pfeil {
  flex: none; display: inline-flex; color: var(--gedaempft);
  transition: transform .25s, color .25s;
}
.werk-blaettern__pfeil svg { width: 1.1rem; height: 1.1rem; }
.werk-blaettern__zu:hover .werk-blaettern__pfeil { color: var(--text); }
:root[data-bewegung="lebendig"] .werk-blaettern__zu--vor:hover .werk-blaettern__pfeil { transform: translateX(-.2rem); }
:root[data-bewegung="lebendig"] .werk-blaettern__zu--zurueck:hover .werk-blaettern__pfeil { transform: translateX(.2rem); }

/* Schmale Geräte: zwei Pillen nebeneinander würden bei langen Titeln
   umbrechen oder gequetscht aussehen. Dann untereinander, volle Breite,
   Reihenfolge bleibt: zurück oben, weiter unten. */
@media (max-width: 559px) {
  .werk-blaettern { flex-direction: column; gap: .6rem; }
  .werk-blaettern__zu { max-width: none; width: 100%; }
  .werk-blaettern__zu--vor { justify-content: flex-start; }
  .werk-blaettern__zu--zurueck { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .werk-blaettern__pfeil { transition: none; }
  :root[data-bewegung="lebendig"] .werk-blaettern__zu:hover .werk-blaettern__pfeil { transform: none; }
}

.werkseite__bilder img { width: 100%; border-radius: var(--radius); background: var(--flaeche); }

/* Kleine Vorlage: der Rahmen wird begrenzt, statt das Bild auf Spaltenbreite
   aufzublasen. width:auto am img hilft hier nicht — bei <picture> mit sizes
   meldet der Browser eine gerechnete Groesse, nicht die echten Bildpunkte
   (gemessen 31.08.2026: 289-px-Datei wurde auf 640 px gezogen). */
.werkseite__bilder > .parallax--klein { max-width: 20rem; margin-inline: auto; }

.datenliste { margin: 1.6rem 0; border-top: 1px solid var(--linie); }
.datenliste > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem;
  padding: .78rem 0; border-bottom: 1px solid var(--linie);
}
@media (max-width: 420px) { .datenliste > div { grid-template-columns: 1fr; gap: .1rem; } }
.datenliste dt { color: var(--gedaempft); font-size: .87rem; }
.datenliste dd { margin: 0; min-width: 0; }

.hinweiskasten {
  background: var(--flaeche);
  border-radius: var(--radius-gross);
  padding: 1.3rem 1.4rem;
  font-size: .93rem;
  line-height: 1.65;
}
.hinweiskasten p:last-child { margin-bottom: 0; }

/* ---------- 9. Vita, Listen, Fuss ------------------------ */

.vita { display: grid; gap: 0; margin-top: var(--luft); border-top: 1px solid var(--linie); }
.vita__zeile {
  display: grid; grid-template-columns: 7rem 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.1rem 0; border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
@media (max-width: 520px) { .vita__zeile { grid-template-columns: 1fr; gap: .2rem; } }
.vita__jahr { font-family: var(--serif); font-size: 1.05rem; color: var(--akzent-text); }
.vita__was { min-width: 0; }
.vita__was strong { font-weight: 600; }
.vita__ort { display: block; color: var(--gedaempft); font-size: .9rem; }

.werkliste { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--linie); }
.werkliste li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--linie);
  font-size: .95rem;
}
.werkliste b { font-family: var(--serif); font-weight: 400; font-size: 1.08rem; }
.werkliste span { color: var(--gedaempft); font-size: .88rem; text-align: right; }
@media (max-width: 520px) {
  .werkliste li { grid-template-columns: 1fr; gap: .15rem; }
  .werkliste span { text-align: left; }
}

.zitat {
  border-left: 2px solid var(--akzent);
  padding-left: clamp(1.1rem, 3vw, 2rem);
  margin: 0;
}
.zitat p {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + .85vw, 1.6rem);
  line-height: 1.5;
  font-style: italic;
}
.zitat footer { font-size: .88rem; color: var(--gedaempft); font-style: normal; }

.karten { display: grid; grid-template-columns: 1fr; gap: 1.3rem; margin-top: var(--luft); }
@media (min-width: 700px) { .karten { grid-template-columns: repeat(3, 1fr); } }
.karte {
  background: var(--flaeche); border-radius: var(--radius-gross);
  padding: clamp(1.3rem, 3vw, 1.9rem); min-width: 0;
}
.karte h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.karte p { font-size: .93rem; margin-bottom: 0; color: var(--gedaempft); }

.fuss {
  border-top: 1px solid var(--linie);
  margin-top: var(--luft-gross);
  padding-block: var(--luft) var(--luft-min);
  font-size: .9rem;
}
.fuss__raster {
  display: grid; grid-template-columns: 1fr; gap: var(--luft-min);
}
@media (min-width: 720px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--luft); } }
.fuss h4 {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1rem + .25vw, 1.16rem);
  letter-spacing: .12em;
  text-transform: uppercase; color: var(--gedaempft); margin-bottom: .9rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__unten {
  margin-top: var(--luft); padding-top: 1.2rem; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  color: var(--gedaempft); font-size: .84rem;
}

/* ---------- 10. Sanftes Erscheinen ----------------------- */

.auftauchen { opacity: 0; transform: translateY(18px); }
.auftauchen[data-sichtbar="ja"] {
  opacity: 1; transform: none;
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Wichtig: nichts darf unsichtbar stehen bleiben */
  .auftauchen { opacity: 1 !important; transform: none !important; }
  .nav > a { opacity: 1 !important; transform: none !important; }
}

/* Ohne JavaScript bleibt alles sichtbar */
html:not(.js) .auftauchen { opacity: 1; transform: none; }
html:not(.js) .pult { display: none; }

/* ---------- 11. Slider (Werkschau) ----------------------- */
/* Scrollt in sich selbst — die Seite bleibt frei von        */
/* horizontalem Scrollen.                                    */

.slider { position: relative; margin-top: var(--luft); }

.slider__spur {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bahn);
  padding-bottom: 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--linie) transparent;
  -webkit-overflow-scrolling: touch;
}
.slider__spur::-webkit-scrollbar { height: 6px; }
.slider__spur::-webkit-scrollbar-track { background: transparent; }
.slider__spur::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 100px; }

.slider__folie {
  flex: 0 0 auto;
  width: min(78vw, 22rem);
  scroll-snap-align: start;
  min-width: 0;
}
@media (min-width: 700px)  { .slider__folie { width: min(42vw, 24rem); } }
@media (min-width: 1100px) { .slider__folie { width: 25rem; } }

.slider__folie .werk__rahmen { aspect-ratio: 3 / 4; }
.slider__folie .werk__rahmen img { width: 100%; height: 100%; object-fit: contain; }

.slider__steuer {
  display: flex; gap: .6rem; align-items: center;
  margin-top: .4rem;
}
.slider__steuer .schalter:disabled { opacity: .32; cursor: default; }
.slider__steuer .schalter:disabled:hover { border-color: var(--linie); background: transparent; }
.slider__fortschritt {
  flex: 1; min-width: 0; height: 1px; background: var(--linie);
  position: relative; margin-inline: .6rem;
}
.slider__fortschritt i {
  position: absolute; inset: 0 auto 0 0;
  background: var(--akzent); width: 0;
  transition: width .25s linear;
}

/* ---------- 12. Bewegung: Parallax und Tiefe ------------- */
/* Nur aktiv, wenn im Steuerpult „lebendig“ gewaehlt ist.    */

.parallax { position: relative; overflow: hidden; }
/* Nur verschieben, nie vergroessern — der Versatz bleibt in der Luft,
   die zwischen Bild und Rahmen ohnehin vorhanden ist. */
.parallax > img,
.parallax > picture > img {
  will-change: transform;
  transform: translate3d(0, var(--versatz, 0px), 0);
}
:root[data-bewegung="lebendig"] .parallax > img,
:root[data-bewegung="lebendig"] .parallax > picture > img {
  transition: transform .1s linear;
}

/* Auftakt-Ebenen: Titel und Bild wandern unterschiedlich schnell */
:root[data-bewegung="lebendig"] .ebene {
  transform: translate3d(0, var(--versatz, 0px), 0);
  will-change: transform;
}

/* Wortweises Erscheinen der grossen Ueberschrift */
.wortlauf { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wortlauf > span { display: inline-block; }
/* Woerter, die zusammen in eine Zeile gehoeren — statt eines geschuetzten
   Leerzeichens, das in der Schrift „Buch" doppelt so breit ausfaellt. */
.zusammen { white-space: nowrap; }

/* Japanisch bricht zwischen den Zeichen um, nicht an Leerzeichen. „strict"
   verbietet zusätzlich den Umbruch vor kleinen Kana und vor Satzzeichen —
   das ist die Regel, die japanischer Satz erwartet. */
:lang(ja) { line-break: strict; }
/* Die grosse Ueberschrift soll nicht mitten im Wort brechen. „keep-all"
   verbietet den Umbruch zwischen japanischen Zeichen; erlaubt bleibt er nur
   dort, wo in den Daten ein Zeichen der Breite null (U+200B) steht. Passt
   eine Zeile trotzdem nicht, greift overflow-wrap und bricht doch — besser
   eine unschoene Fuge als ein Wort ueber dem Rand.
   Fliesstext bleibt beim normalen japanischen Umbruch zwischen den Zeichen,
   das ist dort die erwartete Form. „balance" waere hier falsch: es bricht
   nach Zeilenlaenge und traf 一本の幹か|ら生まれる像 (gemessen 30.08.2026). */
:lang(ja) h1 { word-break: keep-all; overflow-wrap: break-word; }
/* Versteckte Ausgangslage NUR, wenn Skript laeuft und Bewegung gewuenscht ist */
html.js[data-bewegung="lebendig"] .wortlauf > span {
  transform: translateY(105%);
  opacity: 0;
}
html.js[data-bewegung="lebendig"] .wortlauf[data-sichtbar="ja"] > span {
  animation: wort-auf .9s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes wort-auf { to { transform: none; opacity: 1; } }

/* Sanftes Mitlaufen der Werkkacheln */
:root[data-bewegung="lebendig"] .auftauchen[data-sichtbar="ja"] {
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
}
:root[data-bewegung="lebendig"] .werk:hover { transform: translateY(-6px); }

/* Feiner Fortschrittsbalken am oberen Rand */
.lesebalken {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 130; pointer-events: none;
  background: var(--akzent);
  transform: scaleX(var(--fortschritt, 0));
  transform-origin: left;
  opacity: 0;
  transition: opacity .3s;
}
:root[data-bewegung="lebendig"] .lesebalken { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .parallax > img, .parallax > picture > img,
  :root[data-bewegung="lebendig"] .parallax > img,
  :root[data-bewegung="lebendig"] .parallax > picture > img {
    --zoom: 1 !important; --versatz: 0px !important; transform: none !important;
  }
  :root[data-bewegung="lebendig"] .ebene { transform: none !important; }
  .wortlauf > span { transform: none !important; opacity: 1 !important; animation: none !important; }
  .lesebalken { display: none; }
}

/* Ohne JavaScript: nichts bleibt verborgen */
html:not(.js) .wortlauf > span { transform: none; opacity: 1; }
html:not(.js) .lesebalken { display: none; }

/* ---------- 13. Hilfsklassen ----------------------------- */
/* Ersetzen die style-Attribute im Markup, damit die
   Sicherheitsrichtlinie ohne 'unsafe-inline' auskommt.       */

button.werk { text-align: left; width: 100%; }

.abstand-oben-gross { margin-top: var(--luft-gross); }
.abstand-oben       { margin-top: var(--luft); }
.abstand-oben-klein { margin-top: var(--luft-min); }
.abstand-oben-mittel{ margin-top: 1.6rem; }
.abstand-oben-weit  { margin-top: 1.8rem; }
.polster-oben-klein { padding-top: var(--luft-min); }

.mass-32ch { max-width: 32ch; }
.mass-52ch { max-width: 52ch; }
.mass-46rem { max-width: 46rem; }

.ohne-strich { text-decoration: none; }
.schrift-klein { font-size: .9rem; }
.schrift-mini  { font-size: .88rem; }
.luecke-klein { height: .6rem; }

.zoombar { cursor: zoom-in; }

.abstand-unten-klein { margin-bottom: var(--luft-min); }
.platzhalter { background: var(--flaeche-2); color: var(--text); padding: .1em .35em; }

/* Staffelung der Wortanimation ohne style-Attribut */
.wort-0{--i:0}.wort-1{--i:1}.wort-2{--i:2}.wort-3{--i:3}.wort-4{--i:4}.wort-5{--i:5}
.wort-6{--i:6}.wort-7{--i:7}.wort-8{--i:8}.wort-9{--i:9}.wort-10{--i:10}.wort-11{--i:11}

/* Seite ruhigstellen, solange der Lichtkasten offen ist */
body[data-fixiert="ja"] { overflow: hidden; }

/* ============================================================
   14. Nacharbeit: durchgehende Kante, ruhigere Unterseiten
   ============================================================ */

/* Eine einzige Aussenkante fuer Kopf, Inhalt und Fuss.
   Vorher sprang die linke Kante zwischen 74rem und 100rem. */
.bahn--weit { max-width: var(--breite); }
.bahn--schmal { max-width: var(--breite); }
.bahn--schmal > * { max-width: 46rem; }   /* Lesebreite, linksbuendig */

/* Bild fuellt seinen Rahmen — sonst sitzt es oben statt mittig,
   weil <picture> ohne Hoehe zwischen Rahmen und Bild steht. */
.werk__rahmen picture,
.auftakt__bild picture,
.werkseite__bilder picture { display: block; width: 100%; height: 100%; }

/* Hochformatige Werke duerfen neben dem Text nicht alles erschlagen */
.auftakt__bild img { max-height: min(78vh, 40rem); object-fit: contain; margin-inline: auto; }

/* Auf Unterseiten steht der Text oben, nicht in der Mitte der Bildhoehe */
.abschnitt .auftakt__raster,
.abschnitt--knapp .auftakt__raster { align-items: start; }

/* ---- Rechtstexte: sachliche Typografie ------------------- */
/* Grosse Serifen-Ueberschriften wirken hier wie Kapitelmarken. */
.rechtstext h2 {
  font-family: var(--sans);
  font-size: clamp(1.02rem, .98rem + .28vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .005em;
  margin-top: 2.4rem;
  margin-bottom: .6rem;
}
.rechtstext h3 {
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  color: var(--gedaempft);
  margin-top: 1.5rem;
  margin-bottom: .4rem;
}
.rechtstext h2 + h3 { margin-top: .9rem; }
.rechtstext p, .rechtstext li { font-size: .98rem; line-height: 1.75; }
.rechtstext ul { padding-left: 1.15rem; }
.rechtstext li { margin-bottom: .35rem; }
.rechtstext h1 { margin-bottom: .6rem; }

/* Blattangabe bei Arbeiten auf Papier */
.werk__blatt { color: var(--gedaempft); }


/* Ohne backdrop-filter waere der Kopf halbdurchsichtig ohne Weichzeichnung —
   der Text stuende dann auf durchscheinendem Inhalt. Dann lieber deckend. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .kopf { background: var(--bg); }
  .pult__knopf, .pult__tafel { background: var(--bg); }
  .lichtkasten { background: var(--bg); }
  .werk__lupe { background: var(--flaeche); }
}

/* ============================================================
   16. Schriftwelten
   Nur Schriften, die auf den Geraeten vorhanden sind — die Seite
   laedt nichts von fremden Servern nach. Jede Welt setzt neben
   den Familien auch Gewicht, Laufweite und Zeilenhoehe, sonst
   wirkt derselbe Text in einer Grotesk duenn und in einer
   Serifenschrift gedraengt.
   ============================================================ */

/* 1. Klassisch — Serifentitel ueber sachlichem Text (Voreinstellung) */
:root[data-schrift="klassisch"] {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --titel-gewicht: 400;
  --titel-laufweite: -.012em;
  --text-familie: var(--sans);
  --text-hoehe: 1.7;
}

/* 2. Buch — durchgehend Serifen, ruhig und lesefreundlich */
:root[data-schrift="buch"] {
  --serif: Baskerville, "Baskerville Old Face", "Book Antiqua", "Bookman Old Style",
           Constantia, Cambria, Georgia, serif;
  --sans:  Constantia, Cambria, Georgia, "Iowan Old Style", serif;
  --titel-gewicht: 400;
  --titel-laufweite: -.006em;
  --text-familie: Constantia, Cambria, Georgia, serif;
  --text-hoehe: 1.75;
}

/* 3. Modern — Grotesk, wie im Ausstellungskatalog */
:root[data-schrift="modern"] {
  --serif: "Helvetica Neue", Helvetica, "Segoe UI", system-ui, Arial, sans-serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --titel-gewicht: 600;
  --titel-laufweite: -.028em;
  --text-familie: var(--sans);
  --text-hoehe: 1.68;
}

/* 4. Atelier — Schreibmaschine im Titel, sachlich im Text */
:root[data-schrift="atelier"] {
  --serif: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
           "Liberation Mono", "Courier New", monospace;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --titel-gewicht: 500;
  --titel-laufweite: -.045em;
  --text-familie: var(--sans);
  --text-hoehe: 1.7;
}

/* Die Werte greifen lassen */
body { font-family: var(--text-familie, var(--sans)); line-height: var(--text-hoehe, 1.7); }
h1, h2, h3, h4 {
  font-weight: var(--titel-gewicht, 400);
  letter-spacing: var(--titel-laufweite, -.012em);
}

/* Die Schreibmaschinenschrift baut breit — Titel etwas zuruecknehmen */
:root[data-schrift="atelier"] h1 { font-size: clamp(1.85rem, 1.1rem + 3.4vw, 3.7rem); }
:root[data-schrift="atelier"] h2 { font-size: clamp(1.45rem, 1.05rem + 1.8vw, 2.3rem); }
:root[data-schrift="atelier"] .auftakt__unterzeile { font-style: normal; }
:root[data-schrift="atelier"] .marke { letter-spacing: -.03em; }

/* Im Buch-Satz wirkt die Kapitaelchen-Zeile zu eng */
:root[data-schrift="buch"] .vorspann,
:root[data-schrift="buch"] .werk__preis { font-family: var(--sans); letter-spacing: .14em; }

/* Grotesk-Titel vertragen kein Kursiv in der Unterzeile */
:root[data-schrift="modern"] .auftakt__unterzeile { font-style: normal; font-weight: 400; }
:root[data-schrift="modern"] .zitat p { font-style: normal; }

/* Vorschau im Steuerpult: das Aa steht in der jeweiligen Schrift */
.schriftprobe { font-size: 1.15rem; line-height: 1; display: block; }
.s-klassisch { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.s-buch      { font-family: Baskerville, "Book Antiqua", Constantia, Cambria, Georgia, serif; }
.s-modern    { font-family: "Helvetica Neue", Helvetica, "Segoe UI", system-ui, Arial, sans-serif; font-weight: 600; }
.s-atelier   { font-family: ui-monospace, Consolas, "Courier New", monospace; }

/* ============================================================
   17. Mobile Navigation — neu aufgebaut
   Grundsatz: nichts startet unsichtbar. Die Links sind immer
   sichtbar; die Einblendung laeuft nur als "from"-Animation.
   Faellt sie aus, steht trotzdem alles da. Genau daran ist die
   erste Fassung gescheitert.
   ============================================================ */

@media (max-width: 860px) {

  .menue-knopf { display: grid; }

  /* Der Vorhang deckt die Seite vollstaendig ab */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 5.4rem var(--bahn) 2rem;
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Geschlossen: unsichtbar und nicht bedienbar — aber die Kinder
       behalten ihre volle Deckkraft. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1),
                visibility .34s;
  }

  body[data-menue="offen"] .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  body[data-menue="offen"] { overflow: hidden; }

  /* Menuepunkte: ruhige Zeilen mit feiner Ziffer, wie im Katalog */
  .nav > a {
    position: relative;
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    align-items: baseline;
    gap: .2rem;
    width: 100%;
    padding-block: .62em;
    border-bottom: 1px solid var(--linie);
    font-family: var(--serif);
    font-size: clamp(1.55rem, 6.4vw, 2.3rem);
    line-height: 1.15;
    text-decoration: none;
    color: var(--text);
  }
  .nav > a:first-of-type { border-top: 1px solid var(--linie); }

  .nav > a::before {
    content: attr(data-nummer);
    font-family: var(--sans);
    font-size: .62rem;
    letter-spacing: .16em;
    color: var(--gedaempft);
    transform: translateY(-.35em);
  }

  .nav > a[aria-current="page"] { color: var(--akzent-text); }
  .nav > a[aria-current="page"]::before { color: var(--akzent); }

  /* Der feine Strich der Desktop-Fassung stoert hier */
  .nav > a::after { display: none; }

  /* Gestaffeltes Erscheinen — nur als Zugabe, nie als Voraussetzung */
  body[data-menue="offen"] .nav > a { animation: nav-zeile .46s cubic-bezier(.22,.61,.36,1) both; }
  body[data-menue="offen"] .nav > a:nth-of-type(1) { animation-delay: .06s; }
  body[data-menue="offen"] .nav > a:nth-of-type(2) { animation-delay: .12s; }
  body[data-menue="offen"] .nav > a:nth-of-type(3) { animation-delay: .18s; }
  body[data-menue="offen"] .nav > a:nth-of-type(4) { animation-delay: .24s; }
  body[data-menue="offen"] .nav > a:nth-of-type(5) { animation-delay: .30s; }
  body[data-menue="offen"] .nav > a:nth-of-type(6) { animation-delay: .36s; }

  /* Fusszeile im Menue: Kontakt statt Einstellungen */
  .nav__fuss {
    margin-top: auto;
    padding-top: 1.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    align-items: baseline;
    font-size: .92rem;
    color: var(--gedaempft);
  }
  .nav__fuss a { text-decoration: none; color: var(--gedaempft); }
  .nav__fuss a:hover { color: var(--text); text-decoration: underline; }
}

@keyframes nav-zeile {
  from { opacity: 0; transform: translateY(14px); }
}

/* Auf grossen Schirmen ist der Vorhang kein Vorhang */
@media (min-width: 861px) {
  .nav__fuss { display: none; }
  .nav > a::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav > a { animation: none !important; transition: none !important; }
}

/* ============================================================
   18. Wortmarke mit Signet
   Das Signet ist gezeichnet, nicht gesetzt — es haengt an keiner
   Schrift und sieht auf jedem Geraet gleich aus. Zwei Stelen:
   die Initialen und zugleich zwei stehende Figuren.
   ============================================================ */

.marke {
  display: grid;
  gap: .3em;
  text-decoration: none;
  line-height: 1;
  min-width: 0;
  margin-right: auto;
}


.marke__name {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.02rem + .6vw, 1.6rem);
  font-weight: 400;
  letter-spacing: .015em;
  white-space: nowrap;
}
/* Der Nachname steht kursiv — ein feiner Unterschied, der die
   Wortmarke zusammenhält, ohne laut zu werden. */
.marke__name em {
  font-style: italic;
  letter-spacing: .005em;
  margin-left: .32em;
}

.marke__rolle {
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gedaempft);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .marke { gap: .5rem; }
  .marke__rolle { letter-spacing: .18em; font-size: .55rem; }
}


/* ------------------------------------------------------------
   Die Ursache, an der die erste und die zweite Fassung des
   Menues gescheitert sind:

   Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer
   alles, was darin "position: fixed" ist. Die Navigation steckt
   im Kopf — also war sie nicht am Fenster ausgerichtet, sondern
   an der 75 px hohen Kopfzeile. Gemessen: 375x118 statt 375x812.
   Sichtbar blieben zufaellig die Zeilen, die in diesen Streifen
   fielen; der Rest war abgeschnitten.

   Solange der Vorhang offen ist, faellt der Weichzeichner also
   weg. Der Kopf rueckt dabei ueber den Vorhang, damit Marke und
   Schliessen-Knopf bedienbar bleiben.
   ------------------------------------------------------------ */

@media (max-width: 860px) {
  body[data-menue="offen"] .kopf {
    position: fixed;
    top: 0; left: 0; right: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    border-bottom-color: transparent;
    z-index: 130;
  }
}

/* ============================================================
   19. Sprachwahl
   Drei Kuerzel, das aktuelle hervorgehoben. Im Kopf schlank
   neben den Schaltern, im Menue und im Fuss etwas luftiger.
   ============================================================ */

.sprachwahl {
  display: flex;
  align-items: center;
  gap: .1rem;
  flex: none;
}

.sprachwahl a {
  display: inline-block;
  padding: .34rem .5rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  color: var(--gedaempft);
  border-radius: var(--radius);
  transition: color .3s, background .3s;
}
.sprachwahl a:hover { color: var(--text); background: var(--flaeche); }
.sprachwahl a[aria-current="true"] {
  color: var(--text);
  font-weight: 600;
}

/* Trennstriche zwischen den Kuerzeln */
.sprachwahl a + a { position: relative; }
.sprachwahl a + a::before {
  content: "";
  position: absolute;
  left: -.05rem; top: 50%;
  width: 1px; height: .82em;
  transform: translateY(-50%);
  background: var(--linie);
}

/* Im Kopf erst ab mittlerer Breite — auf dem Telefon steht sie im Menue */
.sprachwahl--kopf { display: none; }
@media (min-width: 620px) { .sprachwahl--kopf { display: flex; } }

.sprachwahl--menue { display: none; }
@media (max-width: 619px) {
  .sprachwahl--menue { display: flex; width: 100%; margin-bottom: .3rem; }
  .sprachwahl--menue a { padding: .5rem .7rem; font-size: .82rem; }
}

.sprachwahl--fuss { margin-top: 1rem; margin-left: -.5rem; }

@media (prefers-reduced-motion: reduce) {
  .sprachwahl a { transition: none; }
}

/* ---------- Film zur Wandarbeit ------------------------- */
/* Hochformat: der Film bekommt hoechstens die halbe Bahn, damit er auf
   dem Schreibtisch nicht die ganze Seite hoch wird. Kein Autoplay,
   kein loop — der Ton startet nur auf Wunsch. */
.film { margin-left: 0; margin-right: 0; max-width: 34rem; }

.film__bild {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--radius);
  background: var(--linie);
}

.film__zeile {
  display: flex; flex-wrap: wrap; gap: .2rem .8rem;
  margin-top: .7rem;
  font-size: .9rem;
}
.film__titel { font-weight: 500; }

/* ---------- Filter nach Technik ------------------------- */
/* Das Mosaik setzt display:block auf die Kachel und wuerde damit das
   hidden-Merkmal ueberstimmen. Deshalb hier ausdruecklich zurueckgesetzt. */
.galerie .werk[hidden] { display: none; }

.filter {
  display: flex; flex-wrap: wrap;
  gap: .5rem .6rem;
}

.filter__knopf {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--gedaempft);
  font: inherit; font-size: .88rem;
  line-height: 1.2;
  cursor: pointer;
  transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
}
.filter__knopf:hover { color: var(--text); border-color: var(--text); }

.filter__knopf[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.filter__zahl {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  opacity: .68;
}

.filter__leer { margin-top: var(--luft-min); }

@media (prefers-reduced-motion: reduce) {
  .filter__knopf { transition: none; }
}

/* Raster mit gemischten Formaten (Arbeiten auf Papier: Hoch- und Querformat
   nebeneinander). Der 3:4-Rahmen liesse Querformate in halbleeren Kacheln
   stehen — im Quadrat sitzt beides mittig, ohne dass etwas beschnitten wird. */
.galerie--gemischt[data-layout="raster"] .werk__rahmen { aspect-ratio: 1 / 1; }

/* ---------- Weitere Ansichten einer Skulptur ------------ */
/* Ein ruhiges Raster unter dem Hauptbild. Jede Ansicht ist anklickbar
   und oeffnet den Lichtkasten — dieselbe Bedienung wie in der Galerie. */
.ansichten__titel {
  font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem);
  margin-top: var(--luft-min);
}

.ansichten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 620px) { .ansichten { grid-template-columns: repeat(4, 1fr); } }

.ansichten .parallax { min-width: 0; }
.ansichten img { display: block; width: 100%; height: auto; }

/* Kuenstlerstatement auf der Vita-Seite: kleine Zwischenueberschriften,
   damit der lange Text nicht als Block erschlaegt. */
.statement__titel {
  font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem);
  margin-top: var(--luft-min);
  margin-bottom: .35em;
}
.statement__titel:first-of-type { margin-top: 1rem; }

/* ---------- Aktuelles ----------------------------------- */
/* Teaser als Liste: Bild links, Text rechts. Der ganze Block ist ein
   Verweis, damit auch das Bild anklickbar ist und nicht nur die Zeile. */
.beitraege { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--luft); }

.beitrag__verweis {
  display: grid;
  gap: 1rem clamp(1.2rem, 3vw, 2.2rem);
  text-decoration: none; color: inherit;
  align-items: start;
}
@media (min-width: 700px) {
  .beitrag__verweis { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
}

.beitrag__bild {
  display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--flaeche);
  transition: box-shadow .5s;
}
.beitrag__bild img { display: block; width: 100%; height: auto; }
.beitrag__verweis:hover .beitrag__bild {
  box-shadow: 0 1.2rem 2.4rem -1.1rem rgb(var(--schatten) / .32);
}

.beitrag__text { display: block; min-width: 0; }

.beitrag__datum {
  display: block;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gedaempft);
  margin-bottom: .3rem;
}

.beitrag__titel {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.7rem);
  line-height: 1.2;
  margin-bottom: .4rem;
}
.beitrag__verweis:hover .beitrag__titel { text-decoration: underline; text-underline-offset: .18em; }

.beitrag__vorspann { display: block; color: var(--gedaempft); }

.beitrag__mehr {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .6rem;
  font-size: .9rem; color: var(--akzent-text);
}
.beitrag__mehr svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease; }
.beitrag:hover .beitrag__mehr svg { transform: translateX(.2rem); }

/* Einzelner Beitrag */
.beitragseite { max-width: 42rem; }
.beitragseite h1 { margin-top: .1em; }

.beitrag__abbildung { display: block; margin: var(--luft-min) 0 0; }
.beitrag__abbildung img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); background: var(--flaeche);
}
.beitrag__abbildung figcaption { margin-top: .6rem; }
.beitragseite .fliess { margin-top: var(--luft-min); }

@media (prefers-reduced-motion: reduce) {
  .beitrag__bild { transition: none; }
}

/* Kleine Vorlage im Beitrag: begrenzen statt aufblasen — wie auf der
   Werkseite. Bei 338 px Quellbreite waere die Anzeige sonst 600 px. */
.beitrag__abbildung--klein { max-width: 21rem; }

/* ---------- Auftakt: Luft unter dem Bild ---------------- */
/* Zwischen dem Auftaktbild und dem naechsten Abschnitt standen zuvor
   zwei volle Abstaende uebereinander (unten am Auftakt und oben am
   Abschnitt), zusammen rund 134 px. Der folgende Abschnitt rutscht damit
   unnoetig weit nach unten. Gemessen 31.08.2026, Wunsch von Carlo. */
.auftakt { padding-bottom: var(--luft-min); }
.auftakt + .abschnitt { padding-top: var(--luft); }

/* Einspaltig steht das Bild unter dem Text und wird sonst sehr hoch.
   Ab 900 px sitzt es neben dem Text und darf wieder gross sein. */
@media (max-width: 899px) {
  .auftakt__bild img { max-height: min(58vh, 30rem); }
}

/* Einspaltig (unter 700 px) steht das Teaserbild ueber dem Text und wuerde
   in voller Breite den zweiten Beitrag weit nach unten schieben. */
@media (max-width: 699px) {
  .beitrag__bild { max-width: 16rem; }
}

/* Zitate und Quellen in Beitraegen */
.beitragseite .zitat--beitrag { margin: var(--luft-min) 0 0; }
.zitat--beitrag p { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); overflow-wrap: break-word; }
.zitat footer a { color: inherit; overflow-wrap: anywhere; }
.beitrag__quellen {
  margin-top: var(--luft);
  padding-top: var(--luft-min);
  border-top: 1px solid var(--linie, rgba(0,0,0,.12));
  font-size: .92rem;
}
.beitrag__quellen-titel { font-size: 1rem; margin: 0 0 .6rem; }
.beitrag__quellen ul { margin: 0; padding-left: 1.1rem; }
.beitrag__quellen li { margin-top: .35rem; overflow-wrap: anywhere; }