/* Fischer Kunst · Schriften. Lokal ausliefern, keine Anfrage nach draußen (kein Google Fonts).
   Beide unter SIL Open Font License, siehe ASSETS.md.
   Fraunces: Volldatei mit den Achsen opsz, SOFT, WONK und wght, weil SOFT der Grund für die Wahl ist. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

/* ==========================================================================
   Fischer Kunst · Tokens
   Einzige Quelle für Farben, Schrift, Abstände, Formen, Ebenen und Bewegung.
   Die Website lädt diese Datei zuerst; ihr Build bricht ab, wenn sie ein Token benutzt, das es hier nicht gibt.
   tokens.json wird daraus erzeugt (_werkzeuge/tokens-json.mjs), nie von Hand bearbeiten.
   Kontraste nach jeder Farbänderung messen: node _werkzeuge/kontrast.mjs --kurz
   ========================================================================== */

:root {
  /* Farbrollen. Die Namen kommen aus den Bildern: Gischt, Flachwasser, Sand, Lagune, Tiefsee, Bernstein. */
  --c-weiss: #ffffff;            /* Schrift auf Bild und dunklen Flächen */
  --c-paper: #f7fafa;            /* Gischt: Seitengrund, die Gischt-Kante hat dieselbe Farbe */
  --c-paper-2: #e6f0f2;          /* Flachwasser: ruhige Flächen */
  --c-paper-3: #d3e4e8;
  --c-sand: #f3e8d6;             /* Sand: genau ein Band je Seite, nie als Seitengrund */
  --c-ink: #122a66;              /* Tiefsee: Text, dunkle Knöpfe. Aus dem Marine der alten Seite (#17337c), dunkler für Lesetext */
  --c-ink-2: #33446f;            /* Sekundärtext */
  --c-ink-3: #4b5a80;            /* Meta */
  --c-nacht: #0e2054;            /* dunkle Bänder und Fuß, hier leuchten die Bilder */
  --c-auf-nacht: #c9d6ea;        /* zweite Textebene auf Nacht */
  --c-linie-nacht: #3a4c7e;      /* Trennlinien auf Nacht */
  --c-lagune: #3b95b9;           /* Markenblau der alten Seite: Flächen und Linien, nie als Schrift auf Hell */
  --c-lagune-tief: #1b6685;      /* Lagune als Schrift auf hellem Grund */
  --c-line: #cbdbdf;             /* nur Trennlinien, nie als einziger Rand eines Bedienelements */
  --c-line-strong: #65778f;      /* Rand von Feldern und Auswahl, mindestens 3:1 (WCAG 1.4.11) */
  --c-accent: #f5ae3d;           /* Bernstein: Hauptknopf. Bernstein ist Harz, und Orange steht am stärksten neben Blau */
  --c-accent-2: #ffc466;         /* Hover auf Akzent */
  --c-accent-soft: #fdeed3;
  --c-focus: #122a66;
  --c-error: #b3261e;
  --c-error-soft: #fdecec;
  --c-error-ink: #8a1c14;
  --c-todo: #fff0a8;             /* Platzhalter, die vor dem Livegang ersetzt werden */
  --c-todo-ink: #574000;
  --scrim: 14 32 84;             /* Nacht als Kanäle, für Verläufe über Bildern */
  --schatten: 0 10px 28px rgb(14 32 84 / 0.28);

  /* Schrift. Fraunces mit SOFT 100: die Enden werden rund wie gegossenes Harz. Figtree liest sich ruhig daneben. */
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fvs-display: "SOFT" 100, "WONK" 0;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;            /* nur Meta: Brotkrumen, Bildunterschrift, Tabellen. Nie für Menü, Knöpfe, Fließtext */
  --fs-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --fs-h2: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem);
  --fs-buehne: clamp(3rem, 1.5rem + 6.4vw, 7.25rem);   /* nur der große Satz auf der Startseite */
  --lh-tight: 1.04;
  --lh-head: 1.12;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-display: 480;
  --ls-head: -0.018em;

  /* Abstände (8er-Raster, fluid) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --sp-8: clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --maxw: 84rem;
  --maxw-text: 42rem;

  /* Formen. Bilder fast eckig wie gerahmte Arbeiten, Bedienelemente rund. */
  --r-bild: 0.25rem;
  --r-sm: 0.5rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-pill: 999px;

  /* Logo in Kopf und Fuß gleich groß. Untergrenze bei 320 px mit sichtbarer Scrollleiste gemessen (Logo, Lücke, Menü-Knopf).
     cqw statt vw: vw zählt die Scrollleiste mit. Kopf und Fuß sind dafür Container. */
  --logo-w: clamp(146px, 6cqw + 124px, 178px);

  /* Breakpoints. CSS-Medienabfragen können keine Tokens lesen: Diese Werte sind die Doku, system.js liest --bp-menu. */
  --bp-handy: 720px;             /* Bühnen-Verlauf von oben statt von links */
  --bp-zwei: 900px;              /* Bild und Text nebeneinander */
  --bp-menu: 1080px;             /* gemessen: Logo, sechs Menüpunkte, Knopf und Abstände brauchen 1050 px plus 15 px Scrollleiste */
  --bp-text: 1100px;             /* Inhaltsverzeichnis neben dem Text */

  /* Gischt-Kante */
  --gischt-h: clamp(5.5rem, 13vw, 13rem);

  /* Ebenen */
  --z-content: 1;
  --z-deco: 2;
  --z-bar: 40;
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-base: 380ms;
  --t-slow: 700ms;

  --header-h: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}
html.is-motion-paused { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }

/* ==========================================================================
   Base · Reset, Typografie, Hilfsklassen
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-motion-paused) { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Browser rücken figure um 40 px ein, dann sind Bild und Karte daneben ungleich breit */
figure { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
/* Ausschnitt folgt dem Fokuspunkt des Bildes (--fokus setzt der Build am <img>, Werte aus der Gesichtserkennung) */
img { object-position: var(--fokus, 50% 50%); }
picture img { width: 100%; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--fvs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
  /* Überschriften trennen nie automatisch („Einla-dung“ wirkt zerrissen). Wo ein Wort auf 320 px nicht passt,
     steht im Text ein weiches Trennzeichen (&shy;). overflow-wrap ist nur das Netz gegen Querscrollen. */
  overflow-wrap: break-word;
  hyphens: manual;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* Nötig, damit Akkordeons auf Höhe auto animieren können */
:root { interpolate-size: allow-keywords; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: var(--fw-bold); }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--c-accent); color: var(--c-ink); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Hilfsklassen */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.container {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.kicker { margin-bottom: var(--sp-3); font-weight: var(--fw-semi); color: var(--c-lagune-tief); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-2); max-width: var(--maxw-text); }

/* Skip-Link */
.skip-link {
  position: fixed;
  top: var(--sp-3); left: var(--sp-3);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-weiss);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--c-accent); }

main:focus { outline: none; }

/* Platzhalter, die vor dem Livegang gefüllt werden (Build zählt sie) */
.todo { background: var(--c-todo); color: var(--c-todo-ink); padding-inline: 0.3em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ==========================================================================
   Komponenten · Knopf, Kopf, Menü, Fuß, Schnellkontakt, Karte, FAQ, Inhaltsverzeichnis, Formular, Tabelle
   Werte nur über Tokens. Neue Bausteine hier und auf der Referenzseite index.html zeigen.
   ========================================================================== */

/* ---------- Knopf: zwei Textebenen, die beim Hover nach oben rollen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--sp-5);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn__roll { display: inline-grid; overflow: hidden; }
.btn__text { grid-area: 1 / 1; transition: transform var(--t-base) var(--ease-out); }
.btn__text--clone { transform: translateY(110%); }
.btn:hover .btn__text { transform: translateY(-110%); }
.btn:hover .btn__text--clone { transform: none; }
.btn--accent { background: var(--c-accent); color: var(--c-ink); }
.btn--accent:hover { background: var(--c-accent-2); }
.btn--ink { background: var(--c-ink); color: var(--c-weiss); }
.btn--ink:hover { background: var(--c-accent); color: var(--c-ink); }
.btn--ghost { border-color: var(--c-ink); color: var(--c-ink); background: transparent; }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-paper); }
.btn--hell { border-color: currentColor; color: var(--c-weiss); background: transparent; }
.btn--hell:hover { background: var(--c-weiss); border-color: var(--c-weiss); color: var(--c-ink); }
.btn--sm { min-height: 44px; padding: 0 var(--sp-4); }
.btn-gruppe { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Kopf ----------
   Auf Seiten mit Bild ganz oben (Klasse kopf-hell am body) liegt der Kopf durchsichtig über dem Bild,
   beim Scrollen wird er zur Fläche. Höhe ändert sich nie, sonst springt die Seite. */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  container-type: inline-size;
  background: var(--c-paper);
  color: var(--c-ink);
  transition: background-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
}
.header.is-scrolled { box-shadow: 0 1px 0 var(--c-line); }
.kopf-hell .header { margin-bottom: calc(-1 * var(--header-h)); background: transparent; color: var(--c-weiss); }
.kopf-hell .header.is-scrolled, html.is-menu-open .kopf-hell .header { background: var(--c-paper); color: var(--c-ink); }
.header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-h);
}
.header__logo, .footer__logo { display: flex; align-items: center; min-height: 44px; flex: 0 0 auto; color: inherit; }
.logo { display: block; width: var(--logo-w); height: auto; }
.nav { margin-left: auto; display: none; }
.nav__list { display: flex; gap: var(--sp-5); list-style: none; }
.nav .nav__link { display: inline-block; padding: var(--sp-2) 0; text-decoration: none; font-weight: var(--fw-medium); box-shadow: inset 0 0 0 var(--c-accent); transition: box-shadow var(--t-fast); }
.nav .nav__link:hover, .nav .nav__link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--c-accent); }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.btn--cta { display: none; }
/* Umbruch gemessen: Logo, Menü, Knopf und Abstände brauchen 957 px, dazu 15 px Scrollleiste */
@media (min-width: 1080px) {
  .nav { display: block; }
  .header__actions { margin-left: var(--sp-5); }
  .btn--cta { display: inline-flex; }
  .menu-toggle { display: none !important; }
}

/* Menü-Knopf: immer mit Wort */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--sp-3);
  border: 2px solid currentColor;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  text-decoration: none;
  cursor: pointer;
}
.menu-toggle__icon { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
html.js .menu-toggle--nojs { display: none; }
html:not(.js) [data-menu-toggle] { display: none; }

/* Mobilmenü: Geschwister nach dem Kopf, eigene Ebene über allem außer Sprunglink */
.menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--gutter);
  background: var(--c-paper);
  color: var(--c-ink);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__list { list-style: none; }
.menu__link { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); font-family: var(--font-display); font-size: var(--fs-h4); font-variation-settings: var(--fvs-display); text-decoration: none; }
.menu__link--unter { padding-block: var(--sp-2); padding-left: var(--sp-5); border-bottom: 0; font-family: var(--font); font-size: var(--fs-base); }
.menu__gruppe { padding-block: var(--sp-2); border-bottom: 1px solid var(--c-line); list-style: none; }
.menu__link[aria-current="page"] { box-shadow: inset 4px 0 0 var(--c-accent); padding-left: var(--sp-3); }
.menu__contact { margin-top: var(--sp-4); color: var(--c-ink-2); }
html.is-menu-open { overflow: hidden; }

/* ---------- Brotkrumen ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink-3); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); }
.breadcrumb a { text-underline-offset: 0.2em; }

/* ---------- Fuß ---------- */
.footer { container-type: inline-size; padding-block: var(--sp-8) var(--sp-6); background: var(--c-nacht); color: var(--c-weiss); }
.footer :focus-visible { outline-color: var(--c-accent); }
.footer__logo { color: var(--c-weiss); }
.footer__top { display: grid; gap: var(--sp-7); }
.footer__claim { margin-top: var(--sp-5); max-width: 26rem; color: var(--c-auf-nacht); }
.footer__sozial { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-4); list-style: none; }
.footer__sozial a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__cols { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.footer__heading { margin-bottom: var(--sp-2); font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--fs-h4); color: var(--c-weiss); }
.footer__list { list-style: none; display: grid; gap: 0; }
.footer__list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer__list a:hover { text-decoration: underline; }
.footer__bottom { display: flex; flex-direction: column; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--c-linie-nacht); color: var(--c-auf-nacht); font-size: var(--fs-sm); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); list-style: none; }
.footer__legal a, .motion-toggle { display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--sp-2); color: inherit; }
.motion-toggle { padding-inline: 0; border: 0; background: none; font-size: inherit; text-decoration: underline; cursor: pointer; }
/* Links stehen im HTML zuerst, das Copyright kommt am Handy zuletzt. Breit steht es links. */
@media (min-width: 720px) { .footer__bottom { flex-direction: row-reverse; justify-content: space-between; align-items: center; } }
@media (min-width: 960px) { .footer__top { grid-template-columns: 1fr 2fr; } }

/* ---------- Schnellkontakt am Handy: ab 500 px weich ein, am Fuß, am Formular und bei offenem Menü weich aus ---------- */
.quickbar {
  position: fixed;
  left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: var(--z-bar);
  display: flex;
  gap: var(--sp-2);
  width: min(30rem, calc(100% - 2 * var(--sp-3)));
  padding: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--c-nacht);
  box-shadow: var(--schatten);
  opacity: 0;
  translate: -50% 1rem;
  visibility: hidden;
  transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
}
.quickbar.is-visible { opacity: 1; translate: -50% 0; visibility: visible; transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out), visibility 0s; }
html:not(.js) .quickbar { display: none; }
.quickbar__link { flex: 0 1 auto; display: flex; white-space: nowrap; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--sp-3); border-radius: var(--r-pill); color: var(--c-weiss); font-weight: var(--fw-bold); text-decoration: none; }
.quickbar__link--main { flex: 1 1 auto; background: var(--c-accent); color: var(--c-ink); }
.quickbar :focus-visible { outline-color: var(--c-accent); }
@media (min-width: 1080px) { .quickbar { display: none; } }

/* ---------- Cookie-Hinweis: klein unten links, sperrt die Seite nicht. Solange er steht, pausiert der Schnellzugriff. ---------- */
.cookie-hinweis {
  position: fixed;
  left: var(--sp-3); right: var(--sp-3); bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: var(--z-bar);
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  max-width: 26rem;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-nacht);
  color: var(--c-weiss);
  box-shadow: var(--schatten);
}
.cookie-hinweis[hidden] { display: none; }
.cookie-hinweis__text { margin: 0; font-size: var(--fs-sm); }
.cookie-hinweis a { color: inherit; }
.cookie-hinweis :focus-visible { outline-color: var(--c-accent); }
html.is-cookie-hinweis { scroll-padding-bottom: 12rem; }
html.is-cookie-hinweis .quickbar { display: none; }

/* ---------- Karte ---------- */
.card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--c-paper-2); overflow: hidden; }
.card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.card__media img { aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { padding: var(--sp-5); display: grid; gap: var(--sp-2); }
.card__meta { font-size: var(--fs-sm); color: var(--c-ink-3); margin: 0; }
.card__title { font-size: var(--fs-h3); }
.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:focus-visible { outline: none; }
.card__text { color: var(--c-ink-2); margin: 0; }
.article-list { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); list-style: none; }

/* ---------- FAQ (details/summary, JSON-LD liest der Build aus diesem Markup) ---------- */
.faq { display: grid; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__question { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; font-weight: var(--fw-bold); cursor: pointer; list-style: none; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; font-size: 1.4em; line-height: 1; }
.faq__item[open] .faq__question::after { content: "−"; }
.faq__answer { padding-bottom: var(--sp-5); color: var(--c-ink-2); max-width: var(--maxw-text); }
.faq__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-base) var(--ease-out), content-visibility var(--t-base) allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }

/* ---------- Inhaltsverzeichnis ---------- */
.toc { padding: var(--sp-5); border-radius: var(--r-sm); background: var(--c-paper-2); }
.toc__title { font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.toc ol { padding-left: 1.2em; display: grid; gap: var(--sp-2); }

/* ---------- Formular ---------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.field { display: grid; gap: var(--sp-2); }
.field__label { font-weight: var(--fw-semi); }
.form__group { display: grid; gap: var(--sp-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.form__legend { padding: 0; margin-bottom: var(--sp-1); font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--fs-h4); }
.field__required { color: var(--c-error); }
.field__optional { font-weight: var(--fw-regular); color: var(--c-ink-3); }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-paper);
  color: var(--c-ink);
  font: inherit;
}
.field__input:hover { border-color: var(--c-ink-3); }
.field__input:focus-visible { border-color: var(--c-ink); outline-offset: 2px; }
.field__input--area { min-height: 10rem; resize: vertical; }
.field__input--auswahl {
  -webkit-appearance: none;
  appearance: none;
  padding-right: calc(var(--sp-4) * 2 + 1em);
  background: var(--c-paper) url("/designsystem/assets/icons/pfeil-unten.svg") right var(--sp-4) center / 1em no-repeat;
}
.field__input[aria-invalid="true"] { border-color: var(--c-error); }
.field__error { margin: 0; color: var(--c-error); font-weight: var(--fw-medium); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: var(--fs-sm); color: var(--c-ink-2); margin: 0; }
.form__status:empty { display: none; }
.form__status { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--c-accent-soft); }
.form__status--error { background: var(--c-error-soft); color: var(--c-error-ink); }

/* ---------- Tabelle ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
caption { text-align: left; font-weight: var(--fw-bold); padding-bottom: var(--sp-3); }
th, td { text-align: left; vertical-align: top; padding: var(--sp-3); border-bottom: 1px solid var(--c-line); }

/* ==========================================================================
   Muster · Abschnitte aus Komponenten: Flut (Startbühne), Gischt-Kante, Termine, Kursblatt, Kategorien,
   Werke mit Filter und Großansicht, Seitenkopf, CTA-Band, Textseiten
   ========================================================================== */

/* ---------- Abschnitte ---------- */
.section { padding-block: var(--sp-8); }
.section--soft { background: var(--c-paper-2); }
.section--sand { background: var(--c-sand); }
.section--nacht { position: relative; background: var(--c-nacht); color: var(--c-weiss); }
.section--nacht :focus-visible { outline-color: var(--c-accent); }
.section--nacht .lead { color: var(--c-auf-nacht); }
.section--kante { padding-block: calc(var(--sp-8) + var(--gischt-h) * 0.5); overflow: clip; }
.section-head { margin-bottom: var(--sp-7); max-width: var(--maxw-text); }
.section-head .lead, .section-head .antwort { margin-top: var(--sp-4); }
.container--text { max-width: calc(var(--maxw-text) + 2 * var(--gutter)); }
.mehr-link { margin-top: var(--sp-6); font-weight: var(--fw-semi); }

/* ---------- Gischt: Kante wie auslaufendes Harz ----------
   Fertiges Bild in Papierfarbe statt CSS-Maske: Eine Maske schneidet der Browser vorab auf den sichtbaren Bereich zu,
   schwingt die Welle dann per translate zur Seite, fehlt am Rand ein Streifen. Farbe ändern: _werkzeuge/gischt.mjs neu rechnen. */
.gischt {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: var(--gischt-h);
  pointer-events: none;
}
.gischt--oben { top: -1px; bottom: auto; scale: 1 -1; }
.gischt--oben.gischt--spiegel, .gischt--spiegel { scale: -1 1; }
.gischt--oben.gischt--spiegel { scale: -1 -1; }
.gischt__welle {
  position: absolute;
  inset: 0 -12%;
  background: url("/designsystem/assets/deko/gischt-papier.webp") repeat-x 0 100% / auto 100%;
}
.gischt__welle--hinten { top: -30%; opacity: 0.45; background-position: 37% 100%; }
.gischt__grund { position: absolute; inset: 100% 0 auto; height: 70vh; background: var(--c-paper); }
@media (prefers-reduced-motion: no-preference) {
  .gischt--laeuft .gischt__welle { animation: brandung 11s ease-in-out infinite alternate; }
  .gischt--laeuft .gischt__welle--hinten { animation-duration: 15s; animation-delay: -6s; }
}
@keyframes brandung {
  from { translate: -2.5% 0.35rem; }
  to { translate: 2.5% -0.45rem; }
}

/* ---------- Tondo: Ulrikes runde Arbeiten als Form, Bild fertig gerechnet in assets/tondo/ (Kanäle, Referenz) ---------- */
.tondo { display: block; width: 100%; max-width: 28rem; aspect-ratio: 1; }

/* ---------- Flut: Startbühne. Ein echtes Bild füllt alles, die Seite läuft als Gischt darüber. ---------- */
.flut {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(100svh, 62rem);
  padding-block: calc(var(--header-h) + var(--sp-6)) calc(var(--gischt-h) + var(--sp-6));
  overflow: clip;
  background: var(--c-nacht);
  color: var(--c-weiss);
}
.flut__meer { position: absolute; inset: 0; z-index: -2; margin: 0; }
.flut__meer picture { height: 100%; }
.flut__meer img { width: 100%; height: 100%; object-fit: cover; }
.flut::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(var(--scrim) / 0.5) 0, rgb(var(--scrim) / 0) 11rem),
    linear-gradient(95deg, rgb(var(--scrim) / 0.8) 0%, rgb(var(--scrim) / 0.62) 36%, rgb(var(--scrim) / 0) 72%);
}
.flut__inhalt { display: grid; gap: var(--sp-5); justify-items: start; }
.flut__titel { max-width: 11em; font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--fs-buehne); font-weight: var(--fw-display); letter-spacing: var(--ls-head); line-height: 1; }
.flut__ort { display: block; margin-bottom: var(--sp-4); font-family: var(--font); font-variation-settings: normal; font-size: var(--fs-lead); font-weight: var(--fw-semi); letter-spacing: 0; line-height: 1.3; }
.flut__lead { max-width: 34rem; margin: 0; font-size: var(--fs-lead); line-height: 1.45; }
.flut__werk { position: absolute; right: var(--gutter); bottom: calc(var(--gischt-h) + var(--sp-3)); margin: 0; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: rgb(var(--scrim) / 0.72); font-size: var(--fs-sm); }
@media (max-width: 720px) {
  .flut { align-items: start; }
  .flut::before { background: linear-gradient(180deg, rgb(var(--scrim) / 0.74) 0%, rgb(var(--scrim) / 0.62) 58%, rgb(var(--scrim) / 0) 86%); }
  .flut__werk { display: none; }
}

/* ---------- Bildkopf der Unterseiten: gleiche Bildsprache, ruhiger ---------- */
.kopfbild {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(26rem, 62vh, 40rem);
  padding-block: calc(var(--header-h) + var(--sp-6)) calc(var(--gischt-h) * 0.7 + var(--sp-5));
  overflow: clip;
  background: var(--c-nacht);
  color: var(--c-weiss);
}
.kopfbild__bild { position: absolute; inset: 0; z-index: -2; margin: 0; }
.kopfbild__bild picture { height: 100%; }
.kopfbild__bild img { width: 100%; height: 100%; object-fit: cover; }
.kopfbild::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(var(--scrim) / 0.55) 0, rgb(var(--scrim) / 0.1) 12rem),
    linear-gradient(95deg, rgb(var(--scrim) / 0.82) 0%, rgb(var(--scrim) / 0.62) 45%, rgb(var(--scrim) / 0.05) 85%);
}
.kopfbild .breadcrumb ol { color: var(--c-weiss); }
.kopfbild :focus-visible { outline-color: var(--c-accent); }
.kopfbild__lead { max-width: 40rem; margin: var(--sp-4) 0 0; font-size: var(--fs-lead); line-height: 1.45; }
.kopfbild .gischt { height: calc(var(--gischt-h) * 0.7); }
@media (max-width: 720px) {
  .kopfbild::before { background: linear-gradient(180deg, rgb(var(--scrim) / 0.72) 0%, rgb(var(--scrim) / 0.66) 100%); }
}

/* ---------- Seitenkopf ohne Bild ---------- */
.page-head { padding-block: var(--sp-7) var(--sp-5); }
.page-head .lead { margin-top: var(--sp-4); }
.page-head .btn { margin-top: var(--sp-5); }
.page-head__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) var(--sp-7); align-items: end; }
/* Lange Wortketten wie „Harz/Härter/Silikonformen“ dürfen umbrechen, sonst läuft die Seite bei 320 px quer */
.page-head__text { max-width: var(--maxw-text); color: var(--c-ink-2); overflow-wrap: anywhere; }
@media (min-width: 960px) { .page-head__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---------- Termine: eine Zeile je Termin, Datum als größtes Element ---------- */
.termine-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) var(--sp-7); }
.termine-block h2 + .lead { margin-top: var(--sp-4); }
.termine-block .mehr-link { margin-top: 0; }
@media (min-width: 1000px) {
  .termine-block { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; align-items: start; }
  .termine-block > .termine, .termine-block > .termine__leer, .termine-block > .termine-spalte { grid-column: 2; grid-row: 1 / span 2; }
  .termine-block .mehr-link { grid-column: 1; grid-row: 2; }
}
.termine { display: grid; list-style: none; border-top: 2px solid var(--c-ink); }
.termin {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  grid-template-columns: 1fr;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
.termin__datum { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--fs-h4); line-height: 1.2; }
.termin__tag { display: block; font-family: var(--font); font-variation-settings: normal; margin-bottom: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-ink-3); }
.termin__titel { font-family: var(--font); font-variation-settings: normal; font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: 0; line-height: 1.35; }
.termin__titel a { text-decoration-color: var(--c-lagune); }
.termin__meta { margin: var(--sp-1) 0 0; color: var(--c-ink-2); }
.termin__status { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.termin__aktion { justify-self: start; }
.termine__leer { margin: 0; padding-block: var(--sp-5); border-bottom: 1px solid var(--c-line); }
.termine-spalte { display: grid; gap: var(--sp-5); min-width: 0; }
.termine-bisher__titel { font-family: var(--font); font-variation-settings: normal; font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: 0; line-height: 1.35; }
.termine-bisher__liste { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); list-style: none; color: var(--c-ink-2); }
.termine-bisher__liste a { color: inherit; text-decoration-color: var(--c-lagune); }
@media (min-width: 720px) {
  .termin { grid-template-columns: 14.5rem minmax(0, 1fr) auto; align-items: center; }
}

/* ---------- Kursblatt: großes Bild, daneben der Kurs. Abwechselnd links und rechts. ---------- */
.kursblaetter { display: grid; gap: var(--sp-8); }
.kursblatt { display: grid; gap: var(--sp-5) var(--sp-7); align-items: center; }
.kursblatt__bild { display: block; overflow: hidden; border-radius: var(--r-bild); }
.kursblatt__bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: scale var(--t-slow) var(--ease-out); }
.kursblatt__bild:hover img { scale: 1.025; }
.kursblatt__text { display: grid; gap: var(--sp-4); justify-items: start; }
.kursblatt__text p { margin: 0; }
@media (min-width: 900px) {
  .kursblatt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .kursblatt:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .kursblatt:nth-child(even) .kursblatt__bild { order: 2; }
}
.antwort { max-width: var(--maxw-text); font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-2); }

/* ---------- Eckdaten: Definitionsliste statt Tabelle ---------- */
.eckdaten { display: grid; gap: 0; margin: 0; width: 100%; }
.eckdaten__zeile { display: grid; grid-template-columns: minmax(6.5rem, 2fr) minmax(0, 5fr); gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.eckdaten dt { font-weight: var(--fw-semi); }
.eckdaten dd { margin: 0; color: var(--c-ink-2); }

/* ---------- Vorstellung ---------- */
.vorstellung { display: grid; gap: var(--sp-6) var(--sp-8); align-items: center; }
.vorstellung__bild { max-width: 34rem; overflow: hidden; border-radius: var(--r-bild); }
.vorstellung__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.vorstellung__text { display: grid; gap: var(--sp-4); justify-items: start; max-width: 40rem; }
.vorstellung__text p { margin: 0; }
@media (min-width: 900px) { .vorstellung { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---------- Kategorien: vier ungleich große Flächen, die Bilder tragen das Band ---------- */
.kategorien { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: minmax(0, 1fr); list-style: none; }
.kategorie__link { display: block; color: inherit; text-decoration: none; }
.kategorie__bild { display: block; overflow: hidden; border-radius: var(--r-bild); }
.kategorie__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale var(--t-slow) var(--ease-out); }
.kategorie__link:hover .kategorie__bild img { scale: 1.03; }
.kategorie__name { display: block; margin-top: var(--sp-3); font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--fs-h3); line-height: 1.15; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 0.16em; transition: text-decoration-color var(--t-fast); }
.kategorie__link:hover .kategorie__name { text-decoration-color: currentColor; }
.kategorie__text { display: block; margin-top: var(--sp-1); color: var(--c-auf-nacht); }
@media (min-width: 760px) {
  .kategorien { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kategorie:nth-child(1) { grid-column: span 7; }
  .kategorie:nth-child(2) { grid-column: span 5; }
  .kategorie:nth-child(3) { grid-column: span 5; }
  .kategorie:nth-child(4) { grid-column: span 7; }
  /* Feste Höhe statt Seitenverhältnis: So schließen beide Bilder einer Reihe bündig ab */
  .kategorie__bild img { aspect-ratio: auto; height: clamp(17rem, 34vw, 32rem); }
}

/* ---------- Neuigkeiten ---------- */
.meldungen { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); list-style: none; }
.meldung { display: grid; gap: var(--sp-2); align-content: start; }
.meldung__bild { display: block; margin-bottom: var(--sp-3); overflow: hidden; border-radius: var(--r-bild); }
.meldung__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.meldung__zeit { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-lagune-tief); }
.meldung__titel { font-size: var(--fs-h4); }
.meldung p { margin: 0; }

.archiv { display: grid; list-style: none; border-top: 2px solid var(--c-ink); }
.archiv__eintrag { display: grid; gap: var(--sp-2) var(--sp-6); padding-block: var(--sp-6); border-bottom: 1px solid var(--c-line); }
.archiv__zeit { margin: 0; font-weight: var(--fw-semi); color: var(--c-lagune-tief); }
.archiv__inhalt { display: grid; gap: var(--sp-3); max-width: var(--maxw-text); }
.archiv__inhalt p { margin: 0; }
.archiv__titel { font-size: var(--fs-h3); }
.archiv__bild { overflow: hidden; border-radius: var(--r-bild); }
.archiv__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.archiv__bild--logo { padding: var(--sp-5); background: var(--c-weiss); }
.archiv__bild--logo img { aspect-ratio: auto; object-fit: contain; }
@media (min-width: 900px) {
  .archiv__eintrag { grid-template-columns: 11rem minmax(0, 1fr) 15rem; align-items: start; }
  .archiv__bild img { aspect-ratio: 1; }
  .archiv__bild--logo img { aspect-ratio: auto; }
}

/* ---------- Galerie: Filter, Werke in Zeilen ohne Beschnitt, Großansicht ---------- */
.filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.filter__knopf {
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 2px solid var(--c-ink);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.filter__knopf:hover { background: var(--c-paper-2); }
.filter__knopf[aria-pressed="true"] { background: var(--c-ink); color: var(--c-weiss); }
html:not(.js) .filter { display: none; }

/* Zeilen füllen die Breite, jedes Werk behält sein Format. Reihenfolge bleibt die des Quelltexts, darum kein Masonry. */
.werke { --zeile: 8rem; --hoechstens: 21rem; display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.werk { --ar: 1; flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--zeile)); min-width: 0; max-width: min(100%, calc(var(--ar) * var(--hoechstens))); }
.werk[hidden] { display: none; }
.werk__link { position: relative; display: block; overflow: hidden; border-radius: var(--r-bild); color: var(--c-weiss); text-decoration: none; }
.werk__link img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; transition: scale var(--t-slow) var(--ease-out); }
.werk__link:hover img { scale: 1.02; }
.werk__schild { position: absolute; inset: auto 0 0; padding: var(--sp-5) var(--sp-3) var(--sp-2); background: linear-gradient(0deg, rgb(var(--scrim) / 0.85), rgb(var(--scrim) / 0)); font-size: var(--fs-sm); line-height: 1.3; opacity: 0; transition: opacity var(--t-fast); }
.werk__link:hover .werk__schild, .werk__link:focus-visible .werk__schild { opacity: 1; }
.werk__verkauft { position: absolute; top: var(--sp-2); right: var(--sp-2); width: 0.75rem; height: 0.75rem; border: 2px solid var(--c-weiss); border-radius: 50%; background: var(--c-error); }
@media (min-width: 640px) { .werke { --zeile: 14rem; --hoechstens: 32rem; } }
@media (min-width: 1200px) { .werke { --zeile: 16rem; } }
.werke__ende { margin-top: var(--sp-4); color: var(--c-ink-3); font-size: var(--fs-sm); }

.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgb(var(--scrim) / 0.96); color: var(--c-weiss); }
.lightbox::backdrop { background: rgb(var(--scrim) / 0.9); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lightbox :focus-visible { outline-color: var(--c-accent); }
.lightbox__buehne { position: relative; min-height: 0; }
/* Absolut in der Bühne: Prozent-Höhen greifen in einer Grid-Zeile sonst nicht, das Bild liefe unter die Leiste */
.lightbox__bild { position: absolute; inset: var(--sp-5) var(--sp-3) var(--sp-3); width: calc(100% - 2 * var(--sp-3)); height: calc(100% - var(--sp-5) - var(--sp-3)); object-fit: contain; }
.lightbox__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom)); }
.lightbox__text { margin: 0; }
.lightbox__titel { display: block; font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--fs-h4); line-height: 1.2; }
.lightbox__daten { display: block; color: var(--c-auf-nacht); }
.lightbox__knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lightbox__knopf { min-height: 44px; padding: 0 var(--sp-3); border: 2px solid currentColor; border-radius: var(--r-pill); background: transparent; color: inherit; font-size: var(--fs-base); font-weight: var(--fw-semi); cursor: pointer; }
.lightbox__knopf:hover { background: var(--c-weiss); border-color: var(--c-weiss); color: var(--c-ink); }

/* ---------- Galerie-Übersicht ---------- */
.reihe { display: grid; gap: var(--sp-5) var(--sp-7); padding-block: var(--sp-7); border-top: 1px solid var(--c-line); }
.reihe:first-child { border-top: 0; padding-top: 0; }
.reihe__text { display: grid; gap: var(--sp-3); justify-items: start; align-content: start; }
.reihe__text p { margin: 0; color: var(--c-ink-2); }
.reihe__bilder { display: grid; gap: var(--sp-2); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.reihe__bilder img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-bild); }
@media (min-width: 900px) { .reihe { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

.galerie-nav { margin-bottom: var(--sp-6); }
.galerie-nav__liste { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); list-style: none; border-bottom: 1px solid var(--c-line); }
.galerie-nav__link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: var(--fw-medium); }
.galerie-nav__link:hover, .galerie-nav__link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--c-accent); }

/* ---------- Hinweis aus der Galerie zu den Kursen ---------- */
.querverweis { display: grid; gap: var(--sp-3) var(--sp-6); align-items: center; padding: var(--sp-6); border-radius: var(--r-sm); background: var(--c-sand); }
.querverweis p { margin: 0; }
.querverweis__titel { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
@media (min-width: 800px) { .querverweis { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- Schritte: echter Ablauf, darum nummeriert ---------- */
.steps { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; counter-reset: schritt; }
.steps__item { counter-increment: schritt; display: grid; gap: var(--sp-2); align-content: start; }
.steps__item::before { content: counter(schritt); font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--fs-h2); line-height: 1; color: var(--c-lagune-tief); }
.steps__item h3 { font-size: var(--fs-h4); }
.steps__item p { margin: 0; color: var(--c-ink-2); }

/* ---------- Partner ---------- */
.partner { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; }
.partner__eintrag { display: grid; gap: var(--sp-3); align-content: start; }
.partner__logo { position: relative; display: grid; place-items: center; height: 11rem; padding: var(--sp-4); border-radius: var(--r-bild); background: var(--c-weiss); }
.partner__logo.link-ext::after { position: absolute; top: var(--sp-3); right: var(--sp-3); margin: 0; }

/* ---------- Produkte aus dem Shop: ganze Karte ist der Link, das Extern-Zeichen sitzt auf dem Bild ---------- */
.produkte { display: grid; gap: var(--sp-5) var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; }
.produkt__link { position: relative; display: grid; gap: var(--sp-2); align-content: start; color: inherit; text-decoration: none; }
.produkt__link picture { display: block; overflow: hidden; border-radius: var(--r-bild); }
.produkt__link img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale var(--t-slow) var(--ease-out); }
.produkt__link:hover img { scale: 1.02; }
.produkt__link:hover .produkt__name { text-decoration: underline; }
.produkt__link.link-ext::after { position: absolute; top: var(--sp-2); right: var(--sp-2); margin: 0; color: var(--c-weiss); filter: drop-shadow(0 1px 2px rgb(var(--scrim) / 0.7)); }
.produkt__name { font-weight: var(--fw-semi); }
.produkt__preis { font-size: var(--fs-sm); color: var(--c-ink-3); }
@media (min-width: 900px) { .produkte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); } }
.partner__logo img { width: auto; max-width: 100%; max-height: 9rem; object-fit: contain; }
.partner__eintrag p { margin: 0; color: var(--c-ink-2); }
.partner__name { font-size: var(--fs-h4); }

/* ---------- CTA-Band ---------- */
.cta-band__inner { display: grid; gap: var(--sp-4); justify-items: start; }
.cta-band__inner > * { max-width: 46rem; }
.cta-band__inner p { margin: 0; }

/* ---------- Kontakt ---------- */
.contact { display: grid; gap: var(--sp-7); align-items: start; }
.contact__card { padding: var(--sp-5); border-radius: var(--r-sm); background: var(--c-paper-2); }
.contact__card p { overflow-wrap: anywhere; }
.contact__title { font-size: var(--fs-h4); margin-bottom: var(--sp-4); }
@media (min-width: 900px) { .contact { grid-template-columns: 2fr 1fr; } }

/* ---------- Fließtext und Textseiten: Text links, Inhaltsverzeichnis rechts und mitlaufend ---------- */
.prose { max-width: var(--maxw-text); overflow-wrap: break-word; hyphens: auto; }
.prose h2 { font-size: var(--fs-h3); margin: var(--sp-7) 0 var(--sp-4); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h4); margin: var(--sp-6) 0 var(--sp-3); }
.prose ul, .prose ol { padding-left: 1.2em; margin-bottom: var(--sp-4); display: grid; gap: var(--sp-2); }
.prose ul li::marker { color: var(--c-ink-2); }
.prose .table-wrap { margin-block: var(--sp-5); }
.article__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); padding-bottom: var(--sp-8); }
@media (min-width: 1100px) {
  .article__body { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; justify-content: start; }
  .article__body .toc { order: 2; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

/* ---------- Kleinere Muster ---------- */
/* Abschnitt direkt unter dem Seitenkopf: Der Kopf bringt schon Luft mit */
.section--kompakt { padding-top: var(--sp-5); }

/* Kursseite: Kopf mit Fakten links und dem echten Stück rechts */
.kurskopf { display: grid; gap: var(--sp-6) var(--sp-8); align-items: start; }
.kurskopf__text { display: grid; gap: var(--sp-5); justify-items: start; }
.kurskopf__text .lead, .kurskopf__text .btn { margin-top: 0; }
.kurskopf__bild { overflow: hidden; border-radius: var(--r-bild); }
.kurskopf__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.kurskopf__bild { order: -1; }
@media (min-width: 960px) {
  .kurskopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kurskopf__bild { order: 0; }
}

.vorlagen { display: grid; gap: var(--sp-3); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.vorlagen img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-bild); }
@media (max-width: 759px) { .vorlagen { gap: var(--sp-2); } }

/* Schmuck: drei Themen nebeneinander */
.drei-texte { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-bottom: var(--sp-7); }
.drei-texte h2 { margin-bottom: var(--sp-3); font-size: var(--fs-h3); }
.drei-texte p { margin: 0; color: var(--c-ink-2); }

/* Über mich: am Handy Porträt, Text, Bild. Am Desktop der Text links, beide Bilder rechts. */
.ueber { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6) var(--sp-8); align-items: start; }
.ueber__bild { overflow: hidden; border-radius: var(--r-bild); }
.ueber__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ueber__unterschrift { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-3); }
@media (min-width: 960px) {
  .ueber { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; }
  .ueber .prose { grid-column: 1; grid-row: 1 / span 2; }
  .ueber__bild { grid-column: 2; }
}

/* Artikel-Titel: lange Überschriften, ruhigere Stufe als die H1 der Seiten */
.titel-artikel { font-size: var(--fs-h2); }

.eckdaten--breit { max-width: 52rem; }
.eckdaten--breit .eckdaten__zeile { grid-template-columns: 9rem minmax(0, 1fr); }

.section--kante:has(> .gischt--spiegel) { padding-bottom: calc(var(--sp-8) + var(--gischt-h)); }
.cta-band { padding-bottom: var(--sp-6); }

/* Fischer Kunst · Icons
   Linien-Icons (24 × 24, Strich 2, runde Enden) in assets/icons/. Als Maske über .icon--name, Farbe folgt dem Text. */
.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon--extern { --icon: url("/designsystem/assets/icons/extern.svg"); }
.icon--pfeil-rechts { --icon: url("/designsystem/assets/icons/pfeil-rechts.svg"); }
.icon--info { --icon: url("/designsystem/assets/icons/info.svg"); }

/* Externe Links: Zeichen nach dem Text (setzt der Build mit der Klasse link-ext) */
.link-ext::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask: url("/designsystem/assets/icons/extern.svg") center / contain no-repeat;
  mask: url("/designsystem/assets/icons/extern.svg") center / contain no-repeat;
}

/* Fischer Kunst · Bewegung
   Bewegung ist eine Schicht obendrauf. Ohne sie steht jeder Inhalt sichtbar im Endzustand.
   Ruhige Fassung: prefers-reduced-motion oder Klasse is-motion-paused auf <html> (Schalter im Fuß, gespeichert). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
html.is-motion-paused *, html.is-motion-paused *::before, html.is-motion-paused *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}

/* ==========================================================================
   Seiten · nur, was es genau einmal auf der Website gibt.
   Alles Wiederverwendbare gehört ins Designsystem (components.css oder patterns.css).
   ========================================================================== */
.page-kontakt .quickbar { display: none; }