/* =========================================================================
   Sculpture Mallorca — Stylesheet

   Reines CSS, keine Frameworks, keine Build-Pipeline.
   Mobile first: die Basisregeln gelten ab 320 Pixel Breite, groessere
   Viewports bekommen Erweiterungen ueber min-width. Geprueft wird gegen
   das iPhone SE (375 x 667), weil das der schmalste Geraetetyp ist, der
   in dieser Zielgruppe real vorkommt.

   Farbe: weisser Grund, schwarze Schrift, Haarlinien in Grau. Kein
   Akzentton. Flaeche entsteht ueber Weissraum, nicht ueber Farbe.

   Der Satzspiegel ist mit 52rem bewusst schmal. Eine Textspalte von 38rem
   in einem 76rem breiten Container laesst auf einem grossen Bildschirm eine
   leere rechte Haelfte stehen, die nicht nach Weissraum aussieht, sondern
   nach unfertig. Schmaler Container, zentriert, Linien enden dort, wo der
   Text endet.

   Breakpoints:
     560px  — Formularfelder nebeneinander
     640px  — Phablet, Schriftgroesse und Faktenkacheln
     700px  — Ablaufliste und Linkliste zweispaltig
     900px  — Navigation wechselt von Overlay auf Inline
   ========================================================================= */

/* =========================================================================
   1. Schriften
   Selbstgehostet, keine Verbindung zu Google oder einem CDN.

   Avenir und Avenir Next sind Monotype-Lizenzschriften und duerfen nicht
   als Webfont ausgeliefert werden. Als Ersatz laeuft Mulish (SIL OFL):
   humanistisch-geometrisch, gleiche Anmutung, nahezu gleiche Laufweite.
   Ueberschriften und Auszeichnungen stehen in Jost (SIL OFL), einer
   geometrischen Grotesk in der Linie der Futura, Gewichtsachse 400 bis 600.

   Beide Dateien sind variabel und decken alle verwendeten Schnitte ab:
   zwei Requests statt sechs, zusammen rund 55 KB. Jost ist auf latin und
   latin-ext beschnitten — deutsche Umlaute und spanische Akzente sind
   vollstaendig enthalten.

   Kein Layoutshift beim Nachladen: zu jeder Schrift steht eine
   Ersatzschrift mit angeglichenen Metriken. size-adjust gleicht die
   Laufweite an, ascent/descent die Zeilenbox. Damit bricht der Text vor
   und nach dem Schriftwechsel an denselben Stellen um, und nichts springt.
   Die Werte sind aus den Schriftdateien gegen Arial berechnet, nicht
   geschaetzt. Rechenweg, falls eine Schrift getauscht wird:
     size-adjust      = mittlere Vorschubbreite A-Za-z der Schrift
                        geteilt durch dieselbe Groesse von Arial
     ascent-override  = ascent  / unitsPerEm / size-adjust
     descent-override = descent / unitsPerEm / size-adjust
   Ascent und Descent stammen aus OS/2 sTypo*, weil in beiden Schriften
   das Flag USE_TYPO_METRICS gesetzt ist.
   ========================================================================= */

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/mulish-var.woff2') format('woff2-variations'),
       url('/assets/fonts/mulish-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/jost-var.woff2') format('woff2-variations'),
       url('/assets/fonts/jost-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Mulish Fallback';
  src: local('Arial'), local('Helvetica'), local('Roboto');
  size-adjust: 99.32%;
  ascent-override: 101.19%;
  descent-override: 25.17%;
  line-gap-override: 0%;
}

/* Jost ist eine Grotesk, die Ersatzschrift daher Arial und nicht mehr
   Times New Roman. Jost laeuft deutlich schmaler als Arial, deshalb der
   kraeftige size-adjust; die hohen Override-Werte folgen aus Josts
   grosszuegigen Vertikalmetriken (ascent 1070, descent 375 bei upem 1000). */
@font-face {
  font-family: 'Jost Fallback';
  src: local('Arial'), local('Helvetica'), local('Roboto');
  size-adjust: 92.16%;
  ascent-override: 116.10%;
  descent-override: 40.69%;
  line-gap-override: 0%;
}

/* =========================================================================
   2. Tokens
   Jeder Textfarbwert ist gegen seinen Hintergrund geprueft, das
   Kontrastverhaeltnis steht daneben. Dekorative Werte sind ausdruecklich
   als solche markiert.
   ========================================================================= */
:root {
  --bg:        #FFFFFF;
  --fg:        #0B0B0B;   /* Haupttext, 19,8:1 auf Weiss */
  --muted:     #565656;   /* Sekundaertext, 7,3:1 auf Weiss */
  --rule:      #E4E4E4;   /* NUR Linien und Raender, nie Text */
  --rule-soft: #F1F1F1;   /* NUR Flaechen, z. B. Hinweiskaesten */
  --bg-alt:    #E3DCD2;   /* NUR alternierende Abschnittsflaechen, grayed beige */
  --fg-invert: #FFFFFF;   /* Text auf schwarzer Flaeche, 19,8:1 */
  --muted-invert: #B9B9B9;/* Sekundaertext auf --fg, 8,4:1 */
  --footer-bg:    #7A6F60; /* mushroom, nur Fuss-Hintergrund */
  --footer-muted: #E9E3D9; /* Sekundaertext auf --footer-bg */
  --error:     #A32017;   /* 6,4:1 auf Weiss */
  --error-bg:  #FCF1F0;

  --sans:  'Mulish', 'Mulish Fallback', Arial, Helvetica, sans-serif;
  /* Heisst --display und nicht --serif: Jost ist eine Grotesk. Der Token
     bezeichnet die Rolle (Ueberschriften, Auszeichnung), nicht die Gattung. */
  --display: 'Jost', 'Jost Fallback', Arial, Helvetica, sans-serif;

  --pad:        clamp(1.375rem, 6vw, 5rem);
  --maxw:       52rem;   /* Satzspiegel: Inhalt, Linien, Abschnitte */
  --maxw-wide:  76rem;   /* Kopf und Fuss duerfen breiter laufen als der Text */
  --maxw-prose: 38rem;    /* rund 68 Zeichen, Fliesstext nie voll ausgereizt */
  --gap-section: clamp(3.5rem, 11vw, 7rem);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
   3. Reset
   min-width: 0 verhindert, dass Flex- und Grid-Kinder ihren Container
   sprengen — die haeufigste Ursache fuer horizontales Scrollen.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
* { margin: 0; }

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

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;               /* WCAG: mindestens 1,5 im Fliesstext */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 640px) { body { font-size: 1.0625rem; } }

p, li, h1, h2, h3, td, summary, dd, dt { overflow-wrap: break-word; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

strong, b { font-weight: 700; }

/* =========================================================================
   4. Fokus und Skiplink
   :focus-visible statt :focus — der Ring erscheint bei Tastaturbedienung
   und nicht bei jedem Mausklick.
   ========================================================================= */
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--fg-invert); }

.skip-link {
  position: absolute; left: 1rem; top: -6rem; z-index: 100;
  background: var(--fg); color: var(--fg-invert);
  padding: .75rem 1.25rem; font-size: .9rem; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* =========================================================================
   5. Helfer
   ========================================================================= */
.muted { color: var(--muted); }
.small { font-size: .875rem; }

.eyebrow {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

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

/* Abstandsklassen statt style-Attributen. Inline-Styles waeren mit der
   Content-Security-Policy dieser Seite (style-src 'self') gar nicht
   erlaubt — sie muesste dafuer um 'unsafe-inline' aufgeweicht werden. */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 2.5rem; }

/* Der Container, auf dem alles sitzt. */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* =========================================================================
   6. Kopf und Navigation
   Mobil: Overlay ueber die ganze Flaeche. Auf 375 Pixel ist ein
   Seitenpanel zu eng, um Menuepunkte in Ruhe zu setzen.
   Ab 900px: Inline-Navigation.
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  max-width: var(--maxw-wide); margin-inline: auto;
  padding: .875rem var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand {
  display: inline-flex; align-items: baseline; gap: .4ch; flex: none;
  white-space: nowrap;
  font-family: var(--display); font-size: 1.125rem; line-height: 1.2;
  text-decoration: none; letter-spacing: .005em;
  /* Zielgroesse: die Wortmarke ist nur 22 Pixel hoch und waere damit unter
     dem Mindestmass von 24 x 24 (WCAG 2.2, 2.5.8). Der Innenabstand hebt
     die Trefferflaeche, ohne das Schriftbild zu aendern. */
  padding-block: .75rem; margin-block: -.75rem;
}
.brand-name-2 { color: var(--muted); }
@media (min-width: 640px) { .brand { font-size: 1.3125rem; } }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px;            /* Mindest-Zielgroesse 44 x 44 */
  margin-right: -.5rem;                  /* optischer Ausgleich zum Rand */
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  z-index: 60;
}
.nav-toggle-bar { display: block; height: 1px; width: 24px; background: currentColor; }

/* Geschlossen ist das Overlay nicht nur verschoben, sondern per visibility
   ausgeblendet. Ohne das bleiben die Menuepunkte ausserhalb des Bildschirms
   mit der Tabulatortaste erreichbar, und der Fokus verschwindet fuer den
   Nutzer spurlos nach oben. Die Verzoegerung sorgt dafuer, dass die
   Ausblendung erst nach der Bewegung greift. */
.primary-nav {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  padding: 6rem var(--pad) 2.5rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .35s var(--ease), visibility 0s linear .35s;
  overflow-y: auto;
}
.primary-nav.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .35s var(--ease), visibility 0s;
}

/* Ohne JavaScript waere das Overlay nicht zu oeffnen. Dafuer laedt der
   <noscript>-Block im Layout ein zweites, winziges Stylesheet, das die
   Navigation ausklappt (assets/css/nojs.css). Ueber <noscript> statt ueber
   eine per Skript gesetzte Klasse, weil eine Klasse erst nach dem ersten
   Frame ankaeme und die Navigation sichtbar zusammenklappen wuerde. */
.primary-nav ul { list-style: none; padding: 0; display: grid; gap: 1.5rem; }
.primary-nav a {
  font-family: var(--display); font-size: 1.5rem; text-decoration: none;
  display: inline-block;
}
.primary-nav a[aria-current="page"] { text-decoration: underline; }
.primary-nav .nav-lang a { font-family: var(--sans); font-size: 1rem; color: var(--muted); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .primary-nav {
    position: static; transform: none; visibility: visible;
    padding: 0; overflow: visible; background: none;
  }
  .primary-nav ul { display: flex; gap: 2rem; align-items: center; }
  .primary-nav li { white-space: nowrap; }
  .primary-nav a { font-family: var(--sans); font-size: .9375rem; }
  .primary-nav .nav-lang a { font-size: .9375rem; }
}

/* Wenn das Overlay offen ist, soll der Hintergrund nicht mitscrollen. */
body.nav-open { overflow: hidden; }
@media (min-width: 900px) { body.nav-open { overflow: visible; } }

/* =========================================================================
   7. Breadcrumb
   Trennzeichen aus dem CSS, damit es nicht vorgelesen wird.
   ========================================================================= */
.breadcrumb {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.25rem var(--pad) 0;
  font-size: .8125rem; color: var(--muted);
}
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: '/'; color: var(--rule); }
.breadcrumb a { text-decoration: none; display: inline-block; padding-block: .2rem; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--fg); }

/* =========================================================================
   8. Schaltflaechen
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.75rem;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  text-decoration: none; text-align: center;
  border: 1px solid var(--fg); border-radius: 0;
  transition: background .2s var(--ease), color .2s var(--ease);
  cursor: pointer;
}
.btn-primary { background: var(--fg); color: var(--fg-invert); }
.btn-primary:hover { background: var(--bg); color: var(--fg); }
.btn-ghost { background: none; color: var(--fg); }
.btn-ghost:hover { background: var(--fg); color: var(--fg-invert); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* =========================================================================
   9. Abschnitte und Fliesstext
   ========================================================================= */
.section {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--gap-section) var(--pad);
}
.section + .section {/* padding-top: 0; */}
.section-rule { border-top: 1px solid var(--rule); padding-top: var(--gap-section); }

/* Alternierende Flaechen, ein ganz helles Grau. .section ist selbst nur so
   breit wie der Satzspiegel; die Flaeche muss aber randlos ueber die volle
   Breite laufen. Der Box-Shadow-Trick malt die Farbe mit gewaltigem Spread
   weit ueber den eigenen Rahmen hinaus, clip-path kappt das Ergebnis oben
   und unten exakt an der eigenen Boxkante (0), laesst es links und rechts
   aber unbeschnitten (-100vmax) — sonst wuerde die Flaeche in angrenzende
   Abschnitte hinein"bluten". Kein zusaetzliches Element, kein JavaScript.
   nth-of-type zaehlt nur <section>-Tags: cta-band ist deshalb bewusst ein
   <div>, sonst verschoebe es die Zaehlung. */
.section:nth-of-type(even) {
  background: var(--bg-alt);
  box-shadow: 0 0 0 100vmax var(--bg-alt);
  clip-path: inset(0 -100vmax);
}

.prose { max-width: var(--maxw-prose); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  font-size: clamp(1.5rem, 5.5vw, 2.125rem);
  margin-top: clamp(2.75rem, 8vw, 4rem);
  margin-bottom: -.15rem;
}
.prose h3 {
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  letter-spacing: 0; line-height: 1.5;
  margin-top: 2.25rem; margin-bottom: -.5rem;
}
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .5rem; }
.prose a { text-decoration: underline; }

/* Der Absatz, der eine Seite eroeffnet. */
.lead {
  font-size: clamp(1.125rem, 4vw, 1.375rem);
  line-height: 1.5;
  font-weight: 300;
  max-width: 34rem;
}

/* Ein einzelner, herausgestellter Satz. Kein Zitat — deshalb kein
   <blockquote>, sondern nur Typografie. */
.statement {
  font-family: var(--display);
  font-size: clamp(1.375rem, 5vw, 2rem);
  line-height: 1.3;
  max-width: 30rem;
  margin-block: clamp(2.5rem, 8vw, 4rem);
}

/* =========================================================================
   9b. Werkabbildung
   Die Beschriftung ist bewusst einzeilig gehalten: ein Freitext mit den
   Angaben, die gerade vorliegen, durch " | " getrennt (z. B. "Kuenstler |
   Titel | Material") — ohne Platzhalter fuer das, was noch fehlt. Darunter,
   deutlich kleiner, der Fotonachweis.

   Kein Text ueber dem Bild: auf einer Fotografie ist kein Kontrastwert
   zugesichert, und diese Seite belegt jeden einzelnen. Die Schrift steht
   deshalb immer unter der Abbildung, nie darauf.

   Die Breite ist auf 45rem begrenzt, das entspricht der natuerlichen Breite
   der Dateien (720 Pixel). Groesser hochgerechnet wuerden sie weich.
   ========================================================================= */
.artwork {
  max-width: 45rem;
  margin: clamp(2rem, 7vw, 3.5rem) auto;
}
.artwork-hoch { max-width: 26rem; }

.artwork img {
  width: 100%; height: auto;
  background: var(--bg-alt);   /* Flaeche steht, bevor das Bild da ist */
}

.artwork-label {
  margin-top: .875rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  max-width: 34rem;
}

.artwork-caption {
  font-size: .8125rem; color: var(--muted); line-height: 1.5;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artwork-desc {
  font-size: .8125rem; color: var(--muted); line-height: 1.6;
  margin: .5rem 0 0;
}
.artwork-credit {
  font-size: .6875rem; color: var(--muted); letter-spacing: .04em;
  line-height: 1.5;
  margin: .35rem 0 0;
}

/* Breites Einzelbild, z. B. auf dem Hub. Laeuft bis 75rem (rund 1200px)
   auf dem Desktop, darunter schrumpft es mit der Containerbreite. Als
   eigenstaendiger Block ausserhalb einer .section gedacht, deshalb der
   eigene Aussenabstand per padding-inline. */
.artwork-breit {
  max-width: 75rem;
  padding-inline: var(--pad);
  box-sizing: border-box;
}

/* =========================================================================
   10. Seitenkopf
   ========================================================================= */
.page-hero {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2.5rem, 9vw, 5rem) var(--pad) clamp(1.5rem, 5vw, 2.5rem);
}
.page-hero h1 {
  font-size: clamp(2rem, 8vw, 3.5rem);
  max-width: 20ch;
  margin-bottom: 1.25rem;
}

/* Startseite: groesser, mit mehr Luft darunter. */
.home-hero { padding-top: clamp(3rem, 12vw, 7rem); }
.home-hero h1 {
  font-size: clamp(2.125rem, 8.5vw, 4.25rem);
  max-width: 16ch;
}

/* =========================================================================
   11. Ablauf in Schritten
   ========================================================================= */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps li {
  counter-increment: step;
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0;
  display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem 1rem;
  align-items: start;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-size: 1.125rem; color: var(--muted);
  line-height: 1.5;
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
/* Beide ausdruecklich in die zweite Spalte. Ohne diese Zuweisung landet der
   Absatz durch die automatische Platzierung in der naechsten Zeile wieder in
   der schmalen Nummernspalte und wird auf 2,5 rem zusammengequetscht. */
.steps h3, .steps p { grid-column: 2; }
.steps h3 { font-family: var(--sans); font-weight: 700; font-size: 1rem; margin: 0 0 .25rem; }
.steps p { margin: 0; color: var(--muted); }
@media (min-width: 700px) {
  .steps li { grid-template-columns: 3.5rem 14rem 1fr; padding: 1.75rem 0; }
  .steps h3 { grid-column: 2; margin-bottom: 0; }
  .steps p { grid-column: 3; }
}

/* =========================================================================
   12. Linkliste — Verweise auf weiterfuehrende Seiten
   Der Pfeil kommt aus dem CSS und nicht als Zeichen aus dem HTML: U+2192
   fehlt im Latin-Subset der eingebundenen Schriften und wuerde sonst aus
   einer Systemschrift nachgeladen werden.
   ========================================================================= */
.linklist { margin-top: 2rem; }
.linklist-title {
  font-family: var(--sans); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .5rem;
}
.linklist ul { list-style: none; padding: 0; }
.linklist li { border-top: 1px solid var(--rule); }
.linklist li:last-child { border-bottom: 1px solid var(--rule); }
.linklist a {
  display: grid; gap: .3rem;
  padding: 1.25rem 2.5rem 1.25rem 0;
  text-decoration: none; position: relative;
}
.linklist a:hover .linklist-name { text-decoration: underline; }
.linklist-name { font-family: var(--display); font-size: 1.1875rem; line-height: 1.25; }
.linklist-desc { color: var(--muted); font-size: .875rem; line-height: 1.55; }
/* Pfeilspitze aus zwei Raendern, ohne Schriftzeichen und ohne Bilddatei. */
.linklist a::after {
  content: ''; position: absolute; right: .5rem; top: 1.75rem;
  width: .5rem; height: .5rem;
  border-top: 1px solid var(--fg); border-right: 1px solid var(--fg);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.linklist a:hover::after { transform: rotate(45deg) translate(2px, -2px); }
@media (min-width: 700px) {
  .linklist a { grid-template-columns: 20rem 1fr; gap: 1.5rem; align-items: baseline; }
}

/* =========================================================================
   13. Signatur-Element: Massstab
   Zeigt das zentrale Fachargument der Seite — fast alle Skulpturen in
   Privatgaerten sind zu klein — als reine CSS/SVG-Grafik, ohne Bilddatei.
   Der Container ist aria-hidden, die Aussage steht daneben als Text.
   ========================================================================= */
.scale-figure {
  margin-top: clamp(2.5rem, 8vw, 3.5rem);
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
}
.scale-figure svg { width: 100%; height: auto; }
.scale-legend {
  display: grid; gap: .35rem;
  margin-top: 1.25rem; font-size: .8125rem; color: var(--muted);
}
.scale-legend span { display: block; }
@media (min-width: 700px) {
  .scale-legend { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.5rem; }
}

/* =========================================================================
   14. Faktenkacheln
   ========================================================================= */
.facts { list-style: none; padding: 0; display: grid; gap: 0; }
.facts li { border-top: 1px solid var(--rule); padding: 1.25rem 0; }
.facts li:last-child { border-bottom: 1px solid var(--rule); }
.facts dt, .facts .fact-label {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: .35rem;
}
.facts .fact-value { font-family: var(--display); font-size: 1.375rem; line-height: 1.2; }
@media (min-width: 640px) {
  .facts { grid-template-columns: 1fr 1fr; column-gap: var(--pad); }
}

/* =========================================================================
   15. FAQ
   <details> statt JS-Akkordeon: der Text steht im HTML und ist damit auch
   ohne JavaScript lesbar und fuer Crawler sichtbar.
   ========================================================================= */
.faq-list { max-width: var(--maxw-prose); }
.faq-list details { border-top: 1px solid var(--rule); }
.faq-list details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq-list summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.1875rem; line-height: 1.3;
  padding: 1.25rem 2.5rem 1.25rem 0;
  position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ''; position: absolute; right: .5rem; top: 1.9rem;
  width: .75rem; height: 1px; background: var(--fg);
}
.faq-list summary::before {
  content: ''; position: absolute; right: .875rem; top: 1.53rem;
  width: 1px; height: .75rem; background: var(--fg);
  transition: opacity .2s var(--ease);
}
.faq-list details[open] summary::before { opacity: 0; }
.faq-answer { padding: 0 0 1.5rem; color: var(--muted); max-width: 34rem; }
.faq-answer > * + * { margin-top: .85rem; }

/* =========================================================================
   16. Definitionsliste, fuer Kontakt- und Rechtsseiten
   ========================================================================= */
.deflist { display: grid; gap: 0; }
.deflist > div { border-top: 1px solid var(--rule); padding: 1rem 0; }
.deflist > div:last-child { border-bottom: 1px solid var(--rule); }
.deflist dt {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: .25rem;
}
.deflist dd { margin: 0; }
@media (min-width: 640px) {
  .deflist > div { display: grid; grid-template-columns: 14rem 1fr; gap: 1.5rem; align-items: baseline; }
  .deflist dt { margin-bottom: 0; padding-top: .2rem; }
}

/* =========================================================================
   17. Formular
   ========================================================================= */
.contact-form { max-width: 34rem; }
.field { margin-bottom: 1.5rem; }
.field label, .fieldset-legend {
  display: block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem;
}
.field-hint { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: .75rem .875rem; font: inherit; color: inherit;
  background: var(--bg); border: 1px solid var(--fg); border-radius: 0;
  min-height: 48px;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field.has-error input, .field.has-error textarea { border-color: var(--error); border-width: 2px; }
/* Fehler nie nur ueber Farbe: zusaetzlich Text, aria-invalid, aria-describedby. */
.field-err { color: var(--error); font-size: .875rem; margin-top: .4rem; font-weight: 600; }

.field-row { display: grid; gap: 1.5rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.topic-set { border: 0; padding: 0; margin: 0 0 1.5rem; min-inline-size: 0; }
/* <legend> bringt eigenes Innenabstands-Verhalten mit und stuende sonst
   gegenueber den uebrigen Beschriftungen eingerueckt. */
.topic-set legend { padding: 0; }
.topic-options { display: grid; gap: .5rem; }
.topic-options label {
  display: flex; align-items: center; gap: .625rem;
  font-weight: 400; font-size: 1rem; margin: 0;
  min-height: 44px; cursor: pointer;
}
/* 24 Pixel, damit auch das Bedienelement selbst die Mindestzielgroesse
   erreicht und nicht nur die umschliessende Beschriftung. */
.topic-options input { width: 1.5rem; height: 1.5rem; min-height: 0; accent-color: var(--fg); flex: none; }
@media (min-width: 560px) { .topic-options { grid-template-columns: 1fr 1fr; } }

.notice { padding: 1rem 1.125rem; margin-bottom: 2rem; }
.notice-ok  { background: var(--rule-soft); border-left: 3px solid var(--fg); }
.notice-err { background: var(--error-bg); border-left: 3px solid var(--error); color: #6C1710; }

/* Honeypot: fuer Menschen unsichtbar, fuer Bots im DOM. Nicht display:none —
   manche Bots ueberspringen unsichtbare Felder. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   18. Handlungsaufforderung am Seitenende
   ========================================================================= */
.cta-band {
  border-top: 1px solid var(--rule);
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2.5rem, 9vw, 4.5rem) var(--pad);
}
.cta-band p {
  font-family: var(--display); font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  line-height: 1.3; max-width: 26rem;
}

/* =========================================================================
   19. Tabellen — horizontal scrollbar statt Seitenueberlauf
   ========================================================================= */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 700; white-space: nowrap; }

/* =========================================================================
   20. Fuss
   ========================================================================= */
.site-footer {
  background: var(--footer-bg); color: var(--footer-muted);
  margin-top: var(--gap-section);
}
.footer-inner {
  max-width: var(--maxw-wide); margin-inline: auto;
  padding: clamp(2.5rem, 9vw, 4rem) var(--pad) 2rem;
  display: grid; gap: 2.5rem;
}
@media (min-width: 640px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } }

.footer-wordmark {
  font-family: var(--display); font-size: 1.3125rem; color: var(--fg-invert);
  margin-bottom: .5rem;
}
.footer-tagline { font-size: .875rem; max-width: 22rem; }

.site-footer h2 {
  font-family: var(--sans); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-invert); margin-bottom: .875rem;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: .875rem; }
.footer-col a { text-decoration: none; display: inline-block; padding-block: .2rem; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .18);
  max-width: var(--maxw-wide); margin-inline: auto;
  padding: 1.25rem var(--pad) 2rem;
  font-size: .8125rem;
}
.footer-credit {
  max-width: var(--maxw-wide); margin-inline: auto;
  padding: 0 var(--pad) 1.5rem;
  font-size: .75rem; opacity: .65;
}
.footer-credit a { color: inherit; }

/* =========================================================================
   21. Fehlerseite
   ========================================================================= */
.error-page { padding-block: clamp(3rem, 12vw, 7rem); }