/* =========================================================================
   Website Noah Rennebaum
   Galerie-Weiß mit editorialem Twist. Siehe DESIGN.md.
   Farben stammen aus Noahs Logo, nicht aus einer Standardpalette.
   ========================================================================= */

/* Schriften kommen vom eigenen Server, nicht von Google — sonst ginge die
   IP jedes Besuchers in die USA. Erzeugt von _tools/fonts_lokal.py. */
@import url('fonts.css');

:root {
  --ink:        #111111;
  --ink-soft:   #4A4A4A;
  --bg:         #FBFAF8;
  --bg-alt:     #F2F0EC;
  --line:       #DEDAD2;
  --accent:     #00898F;   /* Petrol aus dem Logo */
  --accent-ink: #00686D;   /* abgedunkelt: 6,3:1 auf --bg, texttauglich */
  --coral:      #E75D40;
  --sun:        #FFE059;
  --verkauft:   #D6342C;   /* der rote Punkt der Galerien */

  --display: 'Syne', Georgia, serif;
  --body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --rand: clamp(1.5rem, 5vw, 5rem);
  --max:  1440px;

  --z-nav: 30;
  --z-overlay: 50;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;          /* 17px */
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Das hidden-Attribut muss auch dann greifen, wenn eine eigene Regel weiter
   unten display setzt. Die Browservorgabe [hidden]{display:none} verliert
   sonst gegen jede Autorenregel — versteckte Elemente blieben sichtbar. */
[hidden] { display: none !important; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  /* Syne hat lange Unterlängen (g, j, ö). Bei 1.05 wurden sie am Zeilenkasten
     abgeschnitten — 1.14 plus etwas Luft unten fängt das sicher ab. */
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin: 0;
  padding-bottom: 0.06em;
  text-wrap: balance;
  /* Sicherheitsnetz: ein einzelnes langes Wort darf die Seite nicht
     aufschieben. Ohne das erzwang „Rennebaum" auf 375px-Schirmen
     50px horizontales Scrollen. */
  overflow-wrap: break-word;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Bausteine */
.huelle {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.eng { max-width: 34em; }        /* ~68 Zeichen */

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bg);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* Kleine Auszeichnung über Sektionen */
.eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1rem;
}

/* ------------------------------------------------------------------ Kopf */
.kopf {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  min-height: 72px;
}

.marke {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  display: flex; align-items: center; gap: 0.625rem;
  min-height: 44px;              /* Mindest-Tippziel */
}
.marke img { width: 32px; height: 32px; border-radius: 2px; }

.nav { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); align-items: center; }

.nav a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 200ms ease;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.15rem;
  height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Menüknopf mobil */
.nav-schalter {
  display: none;
  background: none; border: 1px solid var(--line);
  border-radius: 2px; padding: 0.5rem;
  cursor: pointer; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}

@media (max-width: 820px) {
  .nav-schalter { display: inline-flex; }
  .nav {
    position: fixed; inset: 72px 0 auto;
    flex-direction: column; align-items: flex-start;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--rand) 2rem;
    transform: translateY(-120%);
    transition: transform 260ms ease;
  }
  .nav[data-offen="true"] { transform: translateY(0); }
  .nav a { font-size: 1.25rem; font-family: var(--display); padding: 0.75rem 0; width: 100%; }
}

/* ------------------------------------------------------------------ Hero */
/* Die Kunst trägt die Farbe, nicht die Seite. Ein Werk steht direkt im
   Kopfbereich vor einem Farbblock aus dem Logo — das fängt den Blick,
   ohne dass die Oberfläche selbst laut wird. */
.hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 5rem);
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
/* min-width: 0 — sonst weigert sich eine Grid-Spur, unter die
   Mindestbreite ihres Inhalts zu schrumpfen, und die Seite läuft über. */
.hero-grid > * { min-width: 0; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* Bewusste Hierarchie: Das Zitat führt, der Name steht als Wortmarke
   darüber. Ein übergroßer Name auf leerer Fläche trägt eine Startseite
   nicht — die Farbe und die Aussage tun es.
   Die Obergrenze ist so gewählt, dass „Rennebaum" in jeder Spaltenbreite
   auf eine Zeile passt (rund 9,75px Wortbreite je px Schriftgröße). */
.hero h1 {
  /* Obergrenze so gewählt, dass „Rennebaum" (rund 9,75px je px Schriftgröße)
     in die Spalte passt und nicht mitten im Wort umbricht. */
  font-size: clamp(1.75rem, 4.2vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 1.1rem;
}

.hero-leitzitat {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.875rem, 4.4vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--accent-ink);
  margin: 0 0 1.5rem;
  padding-bottom: 0.08em;
  max-width: 15ch;
}

.hero-unter {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 32em;
  font-weight: 300;
}

.hero-aktionen {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: 2rem;
}

/* Werk im Kopfbereich, hinterlegt mit Farbblöcken aus dem Logo.
   Die Bühne hat eine feste Höhe, damit beim Bildwechsel nichts springt —
   die Werke haben sehr unterschiedliche Formate. */
.hero-bild { position: relative; }

/* Die Farbblöcke liegen am Bild-Wrapper, nicht am ganzen hero-bild —
   so ragen sie nie in die Bildunterschrift darunter (die bleibt im Weißen). */
.hero-buehne-wrap { position: relative; }

/* Gelbes Rechteck unten rechts — peekt nach rechts, endet an der Bildunterkante */
.hero-buehne-wrap::before {
  content: '';
  position: absolute;
  inset: 30% -4% 0 40%;
  background: var(--sun);
  z-index: 0;
}
/* Petrolfarbenes Rechteck oben links */
.hero-buehne-wrap::after {
  content: '';
  position: absolute;
  inset: -6% 42% 26% -4%;
  background: var(--accent);
  z-index: 0;
}

/* Feste Standfläche im Format 5:4 — jedes Werk belegt denselben Platz,
   unabhängig davon, ob es hoch oder quer ist. Ohne das nahmen die Bilder
   sehr unterschiedliche Größen an und die Farbblöcke dahinter wirkten
   willkürlich.
   Bewusst ohne eigene Fläche: Das Werk steht direkt auf den Farbblöcken,
   kein weißes Rechteck dazwischen. */
.hero-buehne {
  position: relative; z-index: 1;
  display: grid;
  aspect-ratio: 5 / 4;
  width: 100%;
  cursor: pointer;
  /* Kein overflow: hidden — der clip-path der Lagen begrenzt die Bilder
     bereits exakt auf diese Fläche. Ein Beschnitt hier würde nur den
     Schlagschatten des Werks an den Rändern abschneiden. */
}

/* Wischblende: Das neue Werk wird von links nach rechts freigelegt, das
   alte zieht dabei minimal zur Seite. Eine dünne Kante in einer Logofarbe
   läuft mit der Freigabelinie mit — die Bewegung, die man in Ausstellungs-
   trailern sieht, und deutlich präsenter als ein reines Überblenden. */
.hero-lage {
  grid-area: 1 / 1;
  /* min-*: 0 — sonst wächst die Rasterzelle mit dem Bildinhalt und das
     Werk läuft aus dem Rahmen heraus. */
  min-width: 0; min-height: 0;
  display: block;
  clip-path: inset(0 0 0 100%);
  opacity: 0;
  will-change: clip-path, transform;
}
.hero-lage[data-aktiv="true"] {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  z-index: 2;
}
/* Eingehende Lage: von links nach rechts freilegen */
.hero-lage[data-aktiv="true"][data-bewegt="true"] {
  animation: hero-rein var(--wisch, 900ms) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}
/* Ausgehende Lage: im selben Takt von links nach rechts wegnehmen.
   Kein Verschieben — das alte Werk soll nicht hinter dem neuen
   hervorschauen, sondern genau an der Wischkante verschwinden. */
.hero-lage[data-aktiv="false"][data-bewegt="true"] {
  animation: hero-raus var(--wisch, 900ms) cubic-bezier(0.65, 0, 0.2, 1) forwards;
  z-index: 1;
}

@keyframes hero-rein {
  from { clip-path: inset(0 0 0 100%); opacity: 1; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}
@keyframes hero-raus {
  from { clip-path: inset(0 0 0 0);    opacity: 1; }
  to   { clip-path: inset(0 0 0 100%); opacity: 1; }
}

/* Der Bildkasten spannt immer die volle Standfläche auf; das Werk wird
   darin per object-fit eingepasst. So belegt jedes Werk exakt denselben
   Platz, bleibt aber unbeschnitten.
   Prozentuale max-height greift hier nicht verlässlich, deshalb dieser Weg.
   Der Schatten liegt als drop-shadow auf dem gezeichneten Bild, nicht auf
   dem Kasten — sonst schwebte er um die leeren Ränder herum. */
.hero-lage img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 16px 30px rgba(17, 17, 17, 0.28));
}

/* Die mitlaufende Kante */
.hero-kante {
  position: absolute; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
.hero-kante[data-laeuft="true"] {
  animation: hero-kante var(--wisch, 900ms) cubic-bezier(0.65, 0, 0.2, 1) forwards;
}
@keyframes hero-kante {
  0%   { left: 0%;   opacity: 0; }
  12%  {              opacity: 1; }
  88%  {              opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein Wischen, kein Versatz — nur hart umschalten */
  .hero-lage,
  .hero-lage[data-aktiv][data-bewegt="true"] { animation: none !important; transform: none !important; }
  .hero-kante { display: none; }
}

/* Gestapelt: Titel fett, darunter Technik und Größe dünn. Steht unter dem
   Bild in reinem Weiß (die Farbblöcke enden an der Bildunterkante). */
.hero-bild-titel {
  position: relative; z-index: 1;
  margin-top: 1.1rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  min-height: 4.2em;                 /* kein Sprung beim Titelwechsel */
  transition: opacity 300ms ease;
}
.hero-bild-titel[data-wechselt="true"] { opacity: 0; }
.hbt-titel {
  font-family: var(--display); font-weight: 700;
  color: var(--ink); font-size: 1.0625rem; line-height: 1.35;
  letter-spacing: -0.01em;
  padding-bottom: 0.06em;            /* Raum für Unterlängen (g, j) */
}
.hbt-zeile {
  font-weight: 300; font-size: 0.875rem; line-height: 1.4;
  color: var(--ink-soft);
}

/* Steuerung: bei automatisch wechselnden Inhalten ist ein Halt
   barrierefreiheitsseitig verpflichtend (WCAG 2.2.2). */
.hero-steuerung {
  position: relative; z-index: 1;
  margin-top: 0.85rem;
  display: flex; align-items: center; gap: 0.85rem;
}
.hero-pause {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-left: -0.6rem;              /* optisch bündig zur Textkante */
  background: none; border: 0; border-radius: 50%;
  color: var(--ink-soft); cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}
.hero-pause:hover { color: var(--accent-ink); background: var(--bg-alt); }
.hero-pause svg { width: 17px; height: 17px; }

.hero-fortschritt {
  position: relative;
  flex: 1; max-width: 160px; height: 2px;
  background: var(--line);
  overflow: hidden;
}
/* Der Balken läuft als CSS-Animation, nicht über JavaScript pro Bild —
   das spart Arbeit im Hauptthread und pausiert sauber mit play-state. */
.hero-fortschritt > span {
  position: absolute; inset: 0 100% 0 0;
  background: var(--accent);
  animation: hero-fortschritt var(--takt, 6000ms) linear forwards;
}
.hero-bild[data-pausiert="true"] .hero-fortschritt > span {
  animation-play-state: paused;
}
@keyframes hero-fortschritt {
  from { right: 100%; }
  to   { right: 0%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein automatischer Wechsel, keine Überblendung, kein Fortschrittsbalken */
  .hero-steuerung { display: none; }
  .hero-lage { transition: none; }
}

/* Farbstreifen aus den drei Logofarben als ruhiger Marken-Akzent */
.farbstreifen {
  display: flex; height: 6px; margin-top: clamp(2.5rem, 5vw, 4rem);
}
.farbstreifen span { flex: 1; }
.farbstreifen span:nth-child(1) { background: var(--accent); flex: 2.4; }
.farbstreifen span:nth-child(2) { background: var(--sun);    flex: 1; }
.farbstreifen span:nth-child(3) { background: var(--coral);  flex: 1.6; }

/* .knopf--leise stand frueher hier — und war damit wirkungslos.
   Die Regel ist jetzt hinter .knopf verschoben (siehe dort), weil bei
   gleicher Spezifitaet die spaetere Regel gewinnt. */

/* --------------------------------------------------------------- Zitat */
.zitat {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  line-height: 1.26;            /* Platz für die Unterlängen von Syne */
  letter-spacing: -0.025em;
  max-width: 20ch;
  margin: 0;
  padding-bottom: 0.08em;
  text-wrap: balance;
}
.zitat-block {
  padding-block: clamp(3rem, 8vw, 7rem);
  border-top: 1px solid var(--line);
}
.zitat-quelle {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1.75rem;
}
.zitat--gross { max-width: 24ch; }

/* --------------------------------------------------------------- Galerie */
.galerie-kopf {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}
.galerie-kopf h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  margin-bottom: 1.5rem;
}
/* Steht kein Vorspann darunter (Ausstellungen), soll auch kein Abstand für
   einen stehen bleiben. */
.galerie-kopf h1:last-child { margin-bottom: 0; }

/* Filterleiste — am Schreibtisch eine Reihe, auf dem Handy ein Kasten zum
   Aufklappen (siehe den Block ab "Filter auf dem Handy" weiter unten). */
.filter-kasten { display: block; }
.filter-schalter { display: none; }        /* nur auf schmalen Geräten sichtbar */
.filter-kasten > summary::-webkit-details-marker { display: none; }
.filter-kasten > summary { list-style: none; }

.filter {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.filter-gruppe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filter-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-right: 0.5rem;
}
.chip {
  display: inline-flex; align-items: center;
  min-height: 44px;              /* Mindest-Touchziel, nicht unterschreiten */
  padding: 0.4rem 1rem;
  border: 1px solid var(--line); border-radius: 100px;
  background: transparent; color: var(--ink);
  font-size: 0.875rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.chip[aria-current="true"], .chip.aktiv {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}

/* Am Schreibtisch überflüssig: Dort hebt man Filter durch nochmaliges Klicken
   auf den Chip auf, und die Leiste darunter hat schon ein Zurücksetzen. */
.filter-zuruecksetzen { display: none; }

/* Zählleiste unter dem Filter */
.galerie-leiste {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-size: 0.875rem; color: var(--ink-soft);
  margin: -1.5rem 0 2rem;
}
.galerie-leiste p { margin: 0; }
.galerie-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; }
.galerie-legende > span { display: inline-flex; align-items: center; gap: 0.45rem; }

/* ------------------------------------------------- Filter auf dem Handy
   Aus der Wolke aus 14 Chips wird ein einzeiliger Schalter. Aufgeklappt steht
   jede Dimension in einer eigenen Zeile — Überschrift oben, Chips darunter.
   Der Umschaltpunkt ist derselbe wie beim Hauptmenü (820px), damit die Seite
   nicht an zwei verschiedenen Breiten das Gesicht wechselt. */
@media (max-width: 820px) {
  .filter-kasten {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.5rem;
  }

  .filter-schalter {
    display: flex; align-items: center; gap: 0.6rem;
    min-height: 52px; padding: 0.5rem 0;
    cursor: pointer;
    font-size: 0.875rem;
    -webkit-tap-highlight-color: transparent;
  }
  .filter-schalter-text {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    font-size: 0.75rem; color: var(--ink);
    flex: none;
  }
  /* Zeigt zusammengeklappt, wonach gerade gefiltert wird. */
  .filter-schalter-stand {
    flex: 1 1 auto; min-width: 0;
    color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: right;
  }
  .filter-pfeil { flex: none; color: var(--ink-soft); transition: transform 200ms ease; }
  .filter-kasten[open] .filter-pfeil { transform: rotate(180deg); }

  .filter {
    display: grid; gap: 1.1rem;
    padding-block: 0.25rem 1.25rem;
    border: 0;
    margin-bottom: 0;
  }
  /* Die Überschrift belegt eine ganze Zeile und schiebt damit alle Chips
     der Dimension darunter — die Chips selbst laufen weiter nebeneinander
     und brechen erst am Rand um. */
  .filter-gruppe { gap: 0.45rem; }
  .filter-label { flex: 0 0 100%; margin: 0 0 0.15rem; }

  /* Chips etwas kompakter, damit mehr in eine Zeile passt — das Tippziel
     bleibt bei 44px, nur die Innenabstände schrumpfen. */
  .chip { padding: 0.35rem 0.85rem; font-size: 0.8125rem; }

  .filter-zuruecksetzen {
    display: inline-flex; align-items: center;
    min-height: 44px;
    font-size: 0.8125rem; color: var(--accent-ink);
  }

  .galerie-leiste { margin: 0 0 1.5rem; }
}

/* Werkraster: echtes Seitenverhältnis, kein Zuschnitt */
.raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
  padding-bottom: clamp(4rem, 10vw, 8rem);
}
@media (min-width: 700px)  { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .raster { grid-template-columns: repeat(3, 1fr); } }

/* Die Galerieübersicht bleibt bewusst großzügig — dort sind die Werke das
   Produkt. Klein sind nur die Miniaturen auf der Werkseite (.werk-weitere). */

.werk-kachel { display: block; text-decoration: none; color: inherit; cursor: pointer; }

/* Alle Werke hängen auf einer gemeinsamen Mittellinie, wie an einer Wand.
   Dadurch stehen die Bildunterschriften bündig, ohne dass ein einziges
   Gemälde beschnitten wird — die Bilder behalten ihr echtes Format und
   sind nur unterschiedlich breit. */
.werk-bild {
  position: relative;
  height: clamp(260px, 30vw, 400px);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.werk-bild picture {
  display: flex; align-items: center; justify-content: center;
  height: 100%; width: 100%;
}
.werk-bild img {
  max-height: 100%; max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
  outline: 1px solid transparent;
  outline-offset: 0;
  transition: filter 220ms ease, outline-color 220ms ease;
}
.werk-kachel:hover .werk-bild img {
  filter: brightness(1.04);
  outline-color: var(--accent);
  outline-offset: 6px;
}
/* Im Shop NICHT doppelt.
   Dort hat die Kachel seit dem Umbau einen eigenen Rahmen (kachel-karte), der
   beim Ueberfahren aufleuchtet. Die zweite Umrandung direkt ums Bild wirkt
   daneben wie ein Fehler. In der Galerie bleibt sie — da ist sie die einzige
   Rueckmeldung. */
.shop-kachel:hover .werk-bild img { outline-color: transparent; outline-offset: 0; }

.werk-titel {
  font-family: var(--display);
  font-weight: 700; font-size: 1.1875rem;
  /* Natürlicher Textfluss (kein Flex-Zentrieren) gibt Syne volle Unterlängen —
     der Bogen des g steht sonst tiefer als der Zeilenkasten. */
  letter-spacing: -0.02em; line-height: 1.4;
  margin-bottom: 0.3rem;
}
.werk-titel .punkt { margin-right: 0.4rem; vertical-align: 0.1em; }
.werk-kachel:hover .werk-titel { color: var(--accent-ink); }

/* Roter Punkt = verkauft. Im Kunstbetrieb die übliche Kennzeichnung. */
.punkt {
  display: inline-block;
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--verkauft);
}
.punkt--verfuegbar {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.edition-marke {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}

.werk-meta {
  font-size: 0.875rem; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem;
}
.werk-meta span { white-space: nowrap; }
.werk-meta span + span::before {
  content: '·'; margin-right: 0.75rem; color: var(--line);
}

.leer-hinweis {
  padding: 4rem 0; color: var(--ink-soft); font-size: 1.0625rem;
}

/* --------------------------------------------------------- Werk-Detail */
.werk-seite { padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 10vw, 8rem); }

.werk-zurueck {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px;              /* Touch-Mindestziel */
  font-size: 0.875rem; font-weight: 500;
  text-decoration: none; color: var(--ink-soft);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  transition: color 180ms ease;
}
.werk-zurueck:hover { color: var(--accent-ink); }

.werk-layout {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1000px) {
  .werk-layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr); }
  .werk-info { position: sticky; top: 104px; }
}

.werk-haupt img { width: 100%; background: var(--bg-alt); }

/* Miniaturen mit FESTER HÖHE, Breite nach Seitenverhältnis.
   Vorher teilten sich zwei Bilder per 1fr die volle Spaltenbreite — bei
   hochformatigen Werken wurden daraus 384 × 544 Pixel, also mehr als die
   halbe Höhe des Hauptbilds. Eine Miniatur soll eine Miniatur sein. */
.werk-weitere {
  display: flex; flex-wrap: wrap;
  gap: 0.6rem; margin-top: 0.9rem;
}
.werk-weitere button {
  height: 84px;
  min-width: 44px;                 /* Tippziel, auch bei sehr schmalen Bildern */
  padding: 0; border: 1px solid var(--line); background: var(--bg-alt);
  cursor: pointer; overflow: hidden;
  transition: border-color 180ms ease;
}
@media (min-width: 1000px) { .werk-weitere button { height: 96px; } }

/* Spezifischer als die globale Regel img { height: auto } — sonst würde die
   feste Höhe des Knopfes nicht gefüllt. */
.werk-weitere button picture,
.werk-weitere button img {
  height: 100%; width: auto; max-width: none; display: block;
  object-fit: cover;
}
.werk-weitere button:hover,
.werk-weitere button[aria-current="true"] { border-color: var(--accent); }

.werk-info h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: 0.5rem;
}
.werk-info-jahr {
  font-family: var(--body); font-size: 1rem; font-weight: 400;
  color: var(--ink-soft); margin-bottom: 2rem;
}

.daten { border-top: 1px solid var(--line); margin: 2rem 0 0; }
.daten div {
  display: grid; grid-template-columns: 8.5rem 1fr;
  gap: 1rem; padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.daten dt { color: var(--ink-soft); margin: 0; }
.daten dd { margin: 0; }

.werktext {
  margin-top: 2rem; font-size: 1rem; color: var(--ink-soft);
  max-width: 34em;
}

/* -------------------------------------------- Projekt-Vorschau (Start) */
.projekt-vorschau { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }

/* Feature-Karte: Bild und Text nebeneinander, damit ein einzelnes Projekt
   nicht verloren wirkt (skaliert auch bei mehreren). */
.projekt-feature {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  border: 1px solid var(--line);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  transition: border-color 200ms ease;
}
@media (min-width: 760px) {
  .projekt-feature { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.projekt-feature:hover { border-color: var(--accent); }
.projekt-feature .werk-bild { height: clamp(220px, 30vw, 320px); margin-bottom: 0; }
.projekt-feature-text { min-width: 0; }
.projekt-feature-mehr {
  display: inline-block; margin-top: 1rem;
  font-size: 0.875rem; font-weight: 600; color: var(--accent-ink);
}

/* Datum und Ort unter dem Ausstellungstitel. */
.termin-zeile {
  display: flex; flex-wrap: wrap; gap: 0.2rem 1rem;
  font-size: 0.9375rem; color: var(--ink-soft);
  margin: 0;
}

/* Dieselbe Kachel in der Übersicht: Rahmen und Hinweis wie auf der Startseite,
   nur untereinander statt nebeneinander, damit sie ins Raster passt. */
.kachel-karte {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  padding: clamp(0.85rem, 2vw, 1.25rem);
  transition: border-color 200ms ease;
}
.kachel-karte:hover { border-color: var(--accent); }
/* Der Hinweis sitzt unten, damit er bei unterschiedlich langen Texten
   auf einer Linie steht. */
.kachel-karte .projekt-feature-mehr { margin-top: auto; padding-top: 1rem; }
.kachel-karte .werk-bild { height: clamp(200px, 24vw, 300px); }

/* ------------------------------------------------------------ Projekt */
/* Beteiligte mit eigenem Auftritt (DJ, Veranstaltungsort, Kooperationen).
   Die Überschrift steht immer allein in ihrer Zeile — daneben zu stehen ließ
   den ersten Namen wie einen Teil der Überschrift wirken. Die Namen selbst
   dürfen nebeneinander und über mehrere Zeilen laufen. */
.mitwirkende { margin: 1.25rem 0 0; }
.mitwirkende-liste {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;
  align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.mitwirkende-liste > li { display: flex; }
.mitwirkende a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px;                       /* Tippziel */
  font-size: 0.9375rem; font-weight: 500;
  color: var(--accent-ink); text-decoration: none;
  transition: color 180ms ease;
}
.mitwirkende a:hover { color: var(--ink); text-decoration: underline; }
.mitwirkende a svg { flex: none; }
.mitwirkende-name {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; color: var(--ink-soft);
}
.mitwirkende-label {
  display: block; margin: 0 0 0.15rem;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}

.bild-zoom {
  display: block; width: 100%; padding: 0;
  border: 0; background: var(--bg-alt); cursor: zoom-in;
  overflow: hidden;
}
.bild-zoom img { width: 100%; height: auto; display: block; transition: filter 220ms ease; }
.bild-zoom:hover img { filter: brightness(1.04); }

.projekt-titelbild {
  max-width: 900px; margin-inline: auto;
  box-shadow: 0 30px 70px -40px rgba(17, 17, 17, 0.6);
}
.projekt-titelbild img { max-height: 78vh; width: auto; margin-inline: auto; object-fit: contain; }

.projekt-layout {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .projekt-layout { grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr); }
}
.projekt-text { font-size: 1.0625rem; line-height: 1.7; max-width: 40em; }
.projekt-text p { margin-bottom: 1.2em; }

.projekt-fakten { border-top: 2px solid var(--ink); padding-top: 1rem; }
.projekt-fakten h2 {
  font-family: var(--body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  line-height: 1.4; margin-bottom: 0.75rem;
}
.projekt-fakten dl { margin: 0; }
.projekt-fakten div {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem;
}
.projekt-fakten dt { color: var(--ink-soft); margin: 0; }
.projekt-fakten dt, .projekt-fakten dd { min-width: 0; overflow-wrap: anywhere; }
.projekt-fakten dd { margin: 0; }

/* Förderblock: abgesetzt, damit der Spendenzweck sichtbar ist */
.foerderblock {
  background: var(--bg-alt);
  border-left: 3px solid var(--coral);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.foerder-inhalt {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .foerder-inhalt { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); align-items: start; }
}
.foerder-text { font-size: 1rem; line-height: 1.7; }
.foerder-text p { margin-bottom: 1em; }

.preis-aufstellung {
  background: var(--bg); border: 1px solid var(--line);
  padding: 1.5rem;
}
.preis-aufstellung h3 {
  font-family: var(--body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  line-height: 1.4; margin-bottom: 1rem;
}
.preis-aufstellung ul { list-style: none; margin: 0; padding: 0; }
.preis-aufstellung li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.9375rem; align-items: baseline;
}

/* Erklaerungen buendig untereinander — wie ein Tabstopp.
   Ohne das rechnet JEDE Zeile ihre Spaltenbreite selbst aus: "40,00 €" ist
   breiter als "3,00 €", also beginnt die Erklaerung dahinter jedes Mal an
   einer anderen Stelle. Mit subgrid teilen sich alle Zeilen dieselben
   Spalten der Liste.
   Der @supports-Rahmen laesst aeltere Browser beim bisherigen Verhalten —
   dort sieht es aus wie vorher, nichts bricht. */
@supports (grid-template-columns: subgrid) {
  .preis-aufstellung ul {
    display: grid; grid-template-columns: auto 1fr;
  }
  .preis-aufstellung li {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}
.preis-aufstellung li:last-child { border-bottom: 0; }
.preis-betrag {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  white-space: nowrap;
}
.preis-zweck { color: var(--ink-soft); font-size: 0.875rem; }

/* Schlichtes Bildraster (Beiträge). Auf der Projektseite steht an dieser
   Stelle die blätterbare Reihe — hier reicht ein Nebeneinander. */
.bild-raster {
  display: grid; gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .bild-raster { grid-template-columns: repeat(2, 1fr); } }
/* Ein einzelnes Bild soll nicht über die halbe Breite hinauswachsen — sonst
   wird eine 800er Fassung auf 1100 Pixel gezogen und wirkt unscharf. */
.bild-raster > :only-child { max-width: 640px; }

/* ------------------------------------------------------------- Beitrag */
/* Der Anriss steht als Vorspann über dem Fließtext — etwas größer, damit man
   beim Überfliegen sofort weiß, worum es geht. */
.beitrag-anriss {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  margin-bottom: 1.6em;
}

.beitrag-nachbarn {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
@media (min-width: 640px) {
  .beitrag-nachbarn { grid-template-columns: 1fr 1fr; }
}
.beitrag-nachbarn a {
  display: grid; gap: 0.25rem;
  text-decoration: none; color: inherit;
  min-height: 44px;
}
.beitrag-nachbarn a:hover strong { color: var(--accent-ink); }
.beitrag-nachbarn strong {
  font-family: var(--display); font-weight: 700;
  font-size: 1.0625rem; line-height: 1.4;
  transition: color 180ms ease;
}

/* ------------------------------------------ Einblicke: Bilderreihe zum Blättern
   Die Reihe ist zuerst eine ganz normale, seitlich scrollbare Liste mit
   Rasterpunkten (scroll-snap). Wischen und Tastatur funktionieren damit auch
   ohne JavaScript; Knöpfe, Punkte und der Selbstlauf kommen erst per JS dazu
   und werden nur eingeblendet, wenn es wirklich etwas zu blättern gibt. */
.einblicke-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem;
}
.einblicke-kopf .eyebrow { margin: 0; }

.slider-steuerung { display: flex; gap: 0.4rem; }
.slider-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.slider-knopf:hover:not([aria-disabled="true"]) { border-color: var(--accent); color: var(--accent-ink); }
/* Nicht disabled, sondern aria-disabled: Der Knopf bleibt fokussierbar,
   sonst verlöre die Tastatur beim letzten Klick den Platz auf der Seite. */
.slider-knopf[aria-disabled="true"] { opacity: 0.32; cursor: default; }

.slider { position: relative; }

.slider-spur {
  display: flex; gap: clamp(0.75rem, 2vw, 1.25rem);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Die Leiste selbst nimmt Tastaturfokus an — der Ring darf nicht abgeschnitten
     werden, deshalb etwas Luft statt overflow: hidden. */
  padding-block: 3px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.slider-spur::-webkit-scrollbar { height: 6px; }
.slider-spur::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.slider-folie {
  flex: 0 0 min(86%, 560px);
  /* Links bündig einrasten: Das nächste Bild schaut am Rand hervor und zeigt
     damit von selbst, dass es weitergeht. */
  scroll-snap-align: start;
}
@media (min-width: 900px) {
  .slider-folie { flex-basis: calc((100% - clamp(0.75rem, 2vw, 1.25rem)) / 2); }
}
/* Ein einzelnes Bild soll die Breite ausnutzen — sonst stünde es schmal und
   linksbündig da, als fehlte daneben etwas. */
.slider-folie--allein { flex-basis: 100%; }
@media (min-width: 900px) { .slider-folie--allein { flex-basis: 100%; } }

/* Feste Bildhöhe: Die Aufnahmen haben unterschiedliche Formate; ohne gemeinsame
   Höhe würde die Reihe beim Blättern hüpfen. */
.slider-folie .bild-zoom {
  height: clamp(220px, 40vh, 400px);
  display: flex; align-items: center; justify-content: center;
}
.slider-folie .bild-zoom img {
  max-height: 100%; max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

.slider-punkte {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.5rem; margin-top: 1rem;
}
.slider-punkt {
  width: 44px; height: 24px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.slider-punkt::before {
  content: ""; display: block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  transition: background 180ms ease, transform 180ms ease;
}
.slider-punkt[aria-current="true"]::before { background: var(--accent-ink); transform: scale(1.4); }
.slider-punkt:hover::before { background: var(--accent); }

/* Wer den Selbstlauf abbestellt hat, bekommt auch keinen weichen Sprung. */
@media (prefers-reduced-motion: reduce) {
  .slider-spur { scroll-behavior: auto; }
}

/* ------------------------------------------------------- Rechtstexte */
.rechtstext p { margin-bottom: 1em; }
.rechts-h2 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  margin: 2.25rem 0 0.7rem;
}
.rechts-h2:first-child { margin-top: 0; }

.rechts-liste {
  margin: 0 0 1.25em;
  padding-left: 1.15em;
  list-style: none;
}
.rechts-liste li {
  position: relative;
  margin-bottom: 0.4em;
}
.rechts-liste li::before {
  content: '';
  position: absolute;
  left: -1.05em; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Lange Adressen (E-Mail, URL) dürfen die Spalte nicht aufschieben */
.rechtstext a { overflow-wrap: break-word; }

/* --------------------------------------------------- Ausstellungen/Vita */
.vita { border-top: 1px solid var(--line); margin-top: 2rem; }
.vita-eintrag {
  display: grid; gap: 0.35rem 2rem;
  grid-template-columns: 1fr;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .vita-eintrag { grid-template-columns: 10rem 1fr auto; align-items: baseline; }
}
.vita-zeit {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  color: var(--accent-ink); letter-spacing: -0.01em;
}
.vita-titel { font-family: var(--display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; }
.vita-ort { font-size: 0.9375rem; color: var(--ink-soft); }

.marker {
  display: inline-block; padding: 0.15rem 0.6rem;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 100px; white-space: nowrap;
}
.marker--aktuell     { background: var(--accent); color: #fff; }
.marker--bevorstehend{ background: var(--sun); color: var(--ink); }
.marker--dauerhaft   { background: var(--bg-alt); color: var(--ink-soft); border: 1px solid var(--line); }

/* --------------------------------------------------------------- Über */
.ueber-layout {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 950px) {
  .ueber-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.ueber-portrait img { width: 100%; background: var(--bg-alt); }
.ueber-bildunterschrift {
  font-size: 0.8125rem; color: var(--ink-soft); margin-top: 0.75rem;
}
.ueber-text h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 2.5rem 0 0.85rem;
}
.ueber-text h2:first-of-type { margin-top: 0; }

/* ---------------------------------------------------- Im Atelier (Fotos) */
.atelier-streifen {
  display: grid; gap: clamp(0.85rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .atelier-streifen { grid-template-columns: repeat(4, 1fr); } }

.atelier-karte { margin: 0; }

.atelier-karte .bild-zoom {
  aspect-ratio: 4 / 5; background: var(--bg-alt);
}
.atelier-karte .bild-zoom img { width: 100%; height: 100%; object-fit: cover; }

.atelier-titel {
  margin-top: 0.7rem;
  font-family: var(--display); font-weight: 700;
  font-size: 0.9375rem; letter-spacing: -0.01em; line-height: 1.3;
  color: var(--ink);
}

/* ------------------------------------------------------------- Videos */
.video-raster {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .video-raster { grid-template-columns: repeat(2, 1fr); } }

.video-karte { margin: 0; }

.video-fassade {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; background: var(--bg-alt); cursor: pointer;
  overflow: hidden; aspect-ratio: 16 / 9;
}
.video-fassade img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter 220ms ease, transform 400ms ease;
}
.video-fassade:hover img { filter: brightness(0.92); transform: scale(1.02); }

.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.video-play-bg { fill: #212121; opacity: 0.82; transition: fill 200ms ease, opacity 200ms ease; }
.video-fassade:hover .video-play-bg { fill: var(--verkauft); opacity: 1; }

/* Sichtbarer Hinweis auf der Kachel: Wer klickt, soll vorher wissen, dass
   damit eine Verbindung zu YouTube entsteht (§ 25 TDDDG, Art. 6 DSGVO). */
.video-hinweis {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.55rem 0.75rem;
  background: rgba(17, 17, 17, 0.78);
  color: #fff;
  font-size: 0.75rem; font-weight: 500; line-height: 1.35;
  text-align: center;
  backdrop-filter: blur(2px);
}

/* Das eingebettete Video ersetzt die Fassade und behält deren Verhältnis */
.video-aktiv { position: relative; cursor: default; }
.video-fassade iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.video-titel {
  margin-top: 0.85rem;
  font-family: var(--display); font-weight: 700;
  font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink);
}

/* --------------------------------------------------------------- Fuß */
.fuss {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem) 2.5rem;
  margin-top: auto;
}
.fuss-innen {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .fuss-innen { grid-template-columns: 1.4fr 1fr 1fr; }
}
.fuss h3 {
  font-family: var(--body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1rem;
  /* Die globalen 1.14 sind für Display-Größen gedacht. Bei 12px reicht das
     nicht für das g in „Folgen" — kleine Überschriften brauchen mehr Luft. */
  line-height: 1.45;
  padding-bottom: 0;
}
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.fuss-liste a {
  color: var(--ink); text-decoration: none; font-size: 0.9375rem;
  /* Volle 44px Tippziel statt nur der Textzeile */
  display: inline-flex; align-items: center; min-height: 44px;
}
.fuss-liste a:hover { color: var(--accent-ink); text-decoration: underline; }

.fuss-schluss a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 0.25rem;
  /* Ohne diese Zeile erben die Rechtslinks die Browser-Unterstreichung. Weil
     jeder Link seitliches Polster hat, laeuft der Strich darueber hinaus und
     bricht am Trennpunkt ab — es sieht aus wie lose Unterstriche zwischen den
     Woertern. Unterstrichen wird deshalb erst beim Zeigen, wie in .fuss-liste. */
  color: var(--ink-soft); text-decoration: none;
}
.fuss-schluss a:hover { color: var(--accent-ink); text-decoration: underline; }

.social a {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none; font-size: 0.9375rem;
  min-height: 44px;
}
.social a:hover { color: var(--accent-ink); }
.social svg { width: 18px; height: 18px; flex: none; }

.fuss-schluss {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.8125rem; color: var(--ink-soft);
}

/* Seite füllt immer die Höhe, Fuß bleibt unten */
html, body { min-height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* ------------------------------------------------------------ Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(17, 17, 17, 0.94);
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[data-offen="true"] { display: flex; }
.lightbox img { max-width: 100%; max-height: 88vh; width: auto; }
.lightbox-zu {
  position: absolute; top: 1rem; right: 1rem;
  min-width: 44px; min-height: 44px;
  background: none; border: 1px solid rgba(255,255,255,0.35);
  color: #fff; cursor: pointer; border-radius: 2px;
}
.lightbox-zu:hover { border-color: #fff; }

/* --------------------------------------------------------- Formulare */
.feld { display: grid; gap: 0.45rem; margin-bottom: 1.25rem; }
.feld label { font-size: 0.875rem; font-weight: 500; }
.feld input, .feld textarea, .feld select {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: 2px;
  background: #fff; min-height: 44px;
  transition: border-color 180ms ease;
}
.feld input:focus, .feld textarea:focus { border-color: var(--accent); }
.feld textarea { min-height: 150px; resize: vertical; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.8rem 1.75rem;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); border-radius: 2px;
  font-weight: 600; font-size: 0.9375rem;
  text-decoration: none; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.knopf:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

/* Der zurueckhaltende Knopf: heller Grund, feiner Rahmen.
   Diese Regel MUSS hinter .knopf stehen. Beide sind Ein-Klassen-Selektoren,
   haben also dieselbe Spezifitaet — bei Gleichstand gewinnt die spaetere.
   Frueher stand sie weiter oben (Zeile ~445) und wurde von .knopf schwarz
   uebermalt; die neun leisen Knoepfe der Website sahen deshalb aus wie
   gefuellte. */
.knopf--leise {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.knopf--leise:hover {
  background: transparent; color: var(--accent-ink);
  border-color: var(--accent);
}

.meldung {
  padding: 1rem 1.25rem; border-radius: 2px;
  border-left: 3px solid var(--accent);
  background: var(--bg-alt); margin-bottom: 1.5rem;
  font-size: 0.9375rem;
}
.meldung--fehler { border-left-color: var(--coral); }

/* Honeypot gegen Spam — für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* ----------------------------------------------------- Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================== Shop */

/* Die Kachel ist dieselbe wie in der Galerie — nur der Preis kommt dazu.
   Deshalb erbt sie .werk-kachel und ergänzt hier nur den Titelaufbau. */
.shop-titel {
  display: flex; align-items: baseline; gap: 0.75rem;
  justify-content: space-between;
}
/* Der Titel darf schrumpfen, der Preis nicht. Zusätzlich muss ein einzelnes
   langes Wort umbrechen dürfen — sonst schiebt es den Preis auf schmalen
   Geräten bis an die Kante, wo er ohne Luft am Rand klebt. */
.shop-titel-text {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.shop-preis {
  flex: none;
  font-family: var(--body);
  font-weight: 700; font-size: 1rem;
  letter-spacing: 0; color: var(--ink);
  white-space: nowrap;
}
.shop-kachel:hover .shop-preis { color: var(--accent-ink); }
.shop-weg { color: var(--verkauft); font-weight: 600; }

/* -------------------------------------------------------- Produktseite */
/* Auf schmalen Geräten zählt die Reihenfolge: Bild, Preis, dann erst weitere
   Ansichten. Stünden die Miniaturen dazwischen, käme der Preis erst nach
   zwei Bildschirmhöhen. */
.shop-seite {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.shop-titelbild { order: 1; }
.shop-kauf      { order: 2; }
.shop-weitere   { order: 3; }

@media (min-width: 900px) {
  .shop-seite {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    grid-template-areas: "bild kauf" "weitere kauf";
    align-items: start;
  }
  /* Am Schreibtisch wieder die ruhige Anordnung: alle Bilder links
     untereinander, der Kaufkasten durchgehend rechts. */
  .shop-titelbild { grid-area: bild; }
  .shop-kauf      { grid-area: kauf; }
  .shop-weitere   { grid-area: weitere; }
}

.shop-titelbild {
  display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.shop-titelbild img {
  width: 100%; height: auto; display: block;
  outline: 1px solid var(--line); outline-offset: 8px;
}

/* Kein eigener Abstand nach oben — den setzt das Raster über gap, sonst
   stünde er auf dem Handy zwischen Kaufkasten und Miniaturen doppelt. */
.shop-weitere {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.75rem;
}
.shop-weitere button {
  display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.shop-weitere img {
  width: 100%; height: auto; display: block;
  outline: 1px solid var(--line); outline-offset: 3px;
  transition: outline-color 180ms ease;
}
.shop-weitere button:hover img { outline-color: var(--accent); }

/* Der Kaufkasten läuft am Schreibtisch mit — beim Lesen einer langen
   Werkbeschreibung bleibt der Preis dadurch im Blick. */
@media (min-width: 900px) {
  .shop-kauf { position: sticky; top: 6rem; align-self: start; }
}

.shop-h1 {
  font-family: var(--display);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.15; letter-spacing: -0.02em;
  margin: 0.35rem 0 0;
}

.shop-gross {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800; letter-spacing: -0.02em;
  margin: 1.25rem 0 0.25rem;
}

/* Was im Preis steckt und was dazukommt — zwei Zeilen statt einer Tabelle.
   Eine Preistabelle auf einer Produktseite liest sich wie eine Rechnung;
   gebraucht wird sie erst in der Kasse. Die Pflichtangaben nach PAngV
   (Verpackung enthalten, Versand gesondert) stehen trotzdem hier. */
.shop-preis-teile {
  margin: 0 0 1.25rem;
  font-size: 0.875rem; line-height: 1.6;
  color: var(--ink-soft);
}

/* Abholadresse hinter einem Aufklapper: braucht nur, wer abholen will. */
.shop-abholung {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
}
.shop-abholung summary {
  cursor: pointer; color: var(--ink-soft);
  padding: 0.25rem 0;
}
.shop-abholung summary:hover { color: var(--ink); }
.shop-abholung p {
  margin: 0.5rem 0 0;
  padding-left: 0.75rem; border-left: 2px solid var(--line);
  line-height: 1.55;
}

/* Die vier Rechtsseiten als eine Zeile. Sie müssen erreichbar sein, aber
   sie sind nicht das, wofür jemand hier ist. */
.shop-rechtslinks {
  margin-top: 0.5rem;
}
.shop-rechtslinks a { white-space: nowrap; }

/* Pflichtangaben unter der Beschreibung — dreispaltig am Schreibtisch,
   damit sie nicht als Textwüste am Seitenende stehen. */
.shop-pflicht {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
  .shop-pflicht { grid-template-columns: repeat(3, 1fr); }
}
.shop-pflicht-block h2 {
  font-family: var(--body);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}
.shop-pflicht-block p {
  font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 0.75rem;
}
.shop-pflicht-block strong { color: var(--ink); font-weight: 600; }

.shop-hinweise {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  font-size: 0.875rem; color: var(--ink-soft); line-height: 1.55;
}
.shop-hinweise li { margin-bottom: 0.5rem; }

.shop-form { margin-top: 1.75rem; }
/* Zwei Wege in die Kasse: mit Versand oder zum Abholen. Beide über die volle
   Breite, damit keiner wie ein Nachgedanke wirkt — der Preis darunter macht
   den Unterschied auf einen Blick klar. */
.shop-knopf {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  line-height: 1.3;
}
/* Der zweite Knopf ist die Nebenstrecke.
   Lieferung ist der Regelfall und bleibt schwarz; Selbstabholung tritt
   sichtbar zurueck — heller Grund, grauer Text, feiner Rahmen.

   Der Hintergrund steht hier ausdruecklich drin, obwohl .knopf--leise ihn
   schon auf transparent setzt: Diese Klasse steht in Zeile 445, .knopf aber
   erst in Zeile 1309. Bei gleicher Spezifitaet gewinnt die spaetere Regel —
   .knopf--leise wird also von .knopf ueberschrieben und war nie wirksam.
   Diese Regel steht NACH .knopf und greift deshalb. */
.shop-knopf--zweit {
  margin-top: 0.6rem;
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}
.shop-knopf--zweit:hover {
  background: transparent;
  color: var(--accent-ink);
  border-color: var(--accent);
}
.shop-knopf-zusatz {
  font-size: 0.75rem; font-weight: 500; opacity: 0.75;
  letter-spacing: 0;
}

.shop-fein {
  margin-top: 0.9rem;
  font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.55;
}
.shop-fein a { color: var(--ink-soft); }

.preis-summe {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0.9rem 0 0; padding-top: 0.75rem;
  border-top: 2px solid var(--ink);
  font-size: 0.9375rem;
}

/* Trenner zwischen den Pflichtseiten im Fuß. Als ::before am Folgelink,
   damit die Reihe ohne leere Zeichen im Markup auskommt und beim Umbruch
   kein Trenner allein in einer Zeile steht. */
.fuss-recht { display: inline-flex; flex-wrap: wrap; align-items: center; }
.fuss-recht a + a::before {
  content: '·'; margin-right: 0.5rem; color: var(--line);
}
/* „Vertrag widerrufen" steht abgesetzt und trägt keinen Trennpunkt — es ist
   eine Handlung, keine weitere Textseite. */
.fuss-recht .fuss-widerruf {
  margin-left: 0.75rem;
  padding-inline: 0.7rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-weight: 600; color: var(--ink);
  text-decoration: none;
}
.fuss-recht .fuss-widerruf::before { content: none; }
.fuss-recht .fuss-widerruf:hover { border-color: var(--accent); color: var(--accent-ink); }

/* -------------------------------------------------- Widerrufsformular */
.feld--gruppe { border: 0; padding: 0; margin-bottom: 1.25rem; }
.feld--gruppe legend {
  padding: 0; margin-bottom: 0.5rem;
  font-size: 0.875rem; font-weight: 600;
}
.wahl {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 44px;                 /* Touch-Mindestziel */
  font-size: 0.9375rem;
}
.wahl input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; }
/* Das Label trägt den Zeiger und füllt die Zeile — so ist die ganze Zeile
   anklickbar und nicht nur der kleine Knopf. */
.wahl label { flex: 1; cursor: pointer; margin: 0; font-weight: 400; }

.feld-hinweis {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.5;
}

/* Ausfülllinie im Muster-Widerrufsformular */
.formular-linie {
  height: 1px; background: var(--line);
  margin: 0.4rem 0 1.4rem;
}

.meldung--erfolg {
  border-left: 3px solid var(--accent);
  background: var(--bg-alt);
}

/* ------------------------------------------------- Verkaufspause
   Der Shop ist zu sehen, aber es wird nicht verkauft. Der Hinweis soll
   auffallen, ohne wie eine Fehlermeldung zu wirken — es ist ja nichts
   kaputt, es ruht nur. */
.shop-pause {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sun);
  background: color-mix(in srgb, var(--sun) 7%, transparent);
  font-size: 0.9375rem; line-height: 1.55;
}
.shop-pause p { margin: 0; }
.shop-pause p + p { margin-top: .35rem; color: var(--ink-soft); }
.shop-pause-titel { font-weight: 600; }

/* ------------------------------------------- Reserviertes Unikat
   Kein Fehlerkasten: Es ist ja nichts kaputt, das Werk ist nur gerade in
   einer anderen Kasse. Ruhig, aber deutlich genug, dass man nicht auf einen
   Kaufknopf wartet, der nicht kommt. */
.shop-reserviert {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  font-size: 0.9375rem; line-height: 1.55;
}
.shop-reserviert p { margin: 0; }
.shop-reserviert p + p { margin-top: .4rem; color: var(--ink-soft); }
.shop-reserviert-titel { font-weight: 600; color: var(--ink); }
/* Der Countdown steht fuer sich — er ist die einzige Zahl, auf die jemand
   wartet. Tabellenziffern, damit er beim Herunterzaehlen nicht zappelt. */
.shop-countdown {
  margin: .7rem 0 !important;
  font-family: var(--display); font-size: 1.75rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink) !important;
}