/* ==========================================================================
   Schatzankauf · Variante A „Atelier“ – klassisch-elegant
   Uhrmacher-Atelier bei Kerzenlicht: Nachtschwarz/Anthrazit, Champagner-Gold-Haarlinien,
   zentriert und symmetrisch, Passepartout-Rahmen, Rauten, goldener Balken wie das Roll-up.
   CSP: nur diese Datei (keine Inline-Styles), Ornamente als SVG in static/ oder per CSS gezeichnet.
   Kontrastwerte: src/variante-a/kontrast-paare.json → pruefung/kontrast-a.md
   ========================================================================== */

:root {
  --nacht: #0A0A0B;
  --anthrazit: #16161A;
  --gold: #C9A96A;
  --gold-hell: #D9BD85;          /* Hover auf Goldflächen (10,9:1 mit Nachtschwarz) */
  --gold-flaeche: #1F1B14;       /* gewählte Karte: Gold-Hauch über Anthrazit */
  --altgold: #8A6D32;            /* nur Linien/große Schrift */
  --altgold-text: #7D632D;       /* kleine Goldschrift auf Elfenbein (4,61:1) */
  --elfenbein: #EDE7DA;
  --text: #EDE7DA;
  --text-leise: rgba(237, 231, 218, .8);   /* ≥ 9,6:1 auf Nacht/Anthrazit */
  --platzhalter: #8C8679;        /* Placeholder in Feldern (5,0:1 auf Anthrazit) */
  --linie: rgba(201, 169, 106, .45);       /* dekorative Haarlinie */
  --linie-leise: rgba(201, 169, 106, .22);
  --linie-feld: #806E4C;         /* Feldrahmen: ≥ 3:1 (WCAG 1.4.11) auf Nacht und Anthrazit */
  --fehler: #F0A493;             /* 9,0:1 auf Anthrazit */

  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Jost Fallback", Arial, Helvetica, sans-serif;

  --rand: clamp(1.25rem, .9rem + 1.8vw, 2.5rem);
  --breite: 72rem;
  --abstand: clamp(4rem, 2.6rem + 5.6vw, 8rem);
  --sperr: .22em;
}

/* --- Grundlagen ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--nacht); color-scheme: dark; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--sans); font-weight: 300; font-size: 1.0625rem; line-height: 1.7;
  color: var(--text); background: var(--nacht);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--gold); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-hell); }
img, svg { max-width: 100%; }
picture { display: block; }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.logo { display: block; height: auto; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.inhalt:focus { outline: none; }
.sr-only, .sa-form__vorschau-entfernen-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
::selection { background: var(--gold); color: var(--nacht); }

.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  padding: .75rem 1.25rem; background: var(--gold); color: var(--nacht);
  font-size: .8125rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 1rem; outline-color: var(--elfenbein); }

/* --- Ornamente ------------------------------------------------------------- */
.kicker {
  font-family: var(--sans); font-size: .75rem; font-weight: 400; line-height: 1.6;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem;
}
.akzent { font-style: italic; color: var(--gold); }
.zier { display: flex; align-items: center; justify-content: center; gap: .85rem; color: var(--gold); }
.zier::before, .zier::after {
  content: ""; width: clamp(2.5rem, 7vw, 4.5rem); height: 1px;
  background: linear-gradient(90deg, rgba(201, 169, 106, 0), var(--gold));
}
.zier::after { background: linear-gradient(270deg, rgba(201, 169, 106, 0), var(--gold)); }
.zier--kurz::before, .zier--kurz::after { width: 1.75rem; }
.zier__raute, .raute { display: inline-block; flex: none; width: .42rem; height: .42rem; background: var(--gold); transform: rotate(45deg); }

/* Passepartout: Goldrahmen, dunkler Innenabstand, zweite feine Linie ums Foto, Rauten oben/unten */
.rahmen {
  position: relative; padding: clamp(.55rem, .35rem + .8vw, .95rem);
  background: var(--nacht); border: 1px solid var(--linie);
  transition: border-color .4s ease;
}
.rahmen picture { outline: 1px solid var(--linie-leise); outline-offset: clamp(.25rem, .15rem + .35vw, .45rem); }
.rahmen::before, .rahmen::after {
  content: ""; position: absolute; left: 50%; width: .5rem; height: .5rem;
  background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); z-index: 1;
}
.rahmen::before { top: 0; }
.rahmen::after { top: 100%; }
.rahmen:hover { border-color: var(--gold); }
.rahmen img { display: block; width: 100%; height: auto; object-fit: cover; }
.bild-platzhalter { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border: 1px dashed var(--gold); color: var(--elfenbein); padding: 1rem; text-align: center; }

/* --- Knöpfe und Links ------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3.25rem; padding: .85rem 1.6rem .85rem calc(1.6rem + var(--sperr));
  font-family: var(--sans); font-weight: 400; font-size: .8125rem; line-height: 1.3;
  letter-spacing: var(--sperr); text-transform: uppercase; text-decoration: none; text-align: center;
  border: 1px solid var(--gold); border-radius: 0;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.knopf__text { margin-right: calc(var(--sperr) * -1); }
.knopf__icon { width: 1.05rem; height: 1.05rem; }
.knopf--primaer { background: var(--gold); color: var(--nacht); font-weight: 500; }
.knopf--primaer:hover { background: var(--gold-hell); border-color: var(--gold-hell); color: var(--nacht); }
.knopf--sekundaer { background: transparent; color: var(--gold); }
.knopf--sekundaer:hover { background: rgba(201, 169, 106, .12); color: var(--gold-hell); }
.knopf--klein { min-height: 2.75rem; padding: .55rem 1.1rem .55rem calc(1.1rem + var(--sperr)); font-size: .75rem; }
.knopfreihe { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; margin: 0; }
@media (max-width: 29.99em) {
  .knopfreihe { flex-direction: column; align-items: stretch; }
  .knopfreihe .knopf { width: 100%; }
}
.textlink {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; padding-block: .35rem;
  border-bottom: 1px solid var(--linie);
}
.textlink:hover { color: var(--gold-hell); border-bottom-color: var(--gold); }
.textlink__icon { width: 1rem; height: 1rem; transition: transform .25s ease; }
.textlink:hover .textlink__icon { transform: translateX(3px); }

/* --- Kopf ------------------------------------------------------------------ */
.kopf { position: relative; z-index: 20; background: var(--nacht); border-bottom: 1px solid var(--linie-leise); }
.kopf__leiste {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem;
  max-width: 78rem; margin: 0 auto; padding: .7rem var(--rand) calc(.7rem + 1.25rem);
}
.kopf__tel {
  justify-self: start; display: inline-flex; align-items: center; gap: .6rem;
  min-width: 2.75rem; min-height: 2.75rem; color: var(--gold); text-decoration: none;
  font-size: .8125rem; font-weight: 400; letter-spacing: .14em;
}
.kopf__tel-icon { width: 1.2rem; height: 1.2rem; }
.kopf__marke { display: block; justify-self: center; position: relative; }
.kopf__logo { width: clamp(9.25rem, 7rem + 11vw, 15.5rem); }
/* Querlogo: Der letzte direkte Pfad enthält allein die bisherige Mikro-Unterzeile.
   Nur im A-Header ausblenden; Originaldatei und alle anderen Logo-Einsätze bleiben gleich. */
.kopf__logo > path:last-of-type { display: none; }
.kopf__unterzeile {
  position: absolute; top: calc(max(100%, 50% + 1.375rem) + .25rem); left: 50%; transform: translateX(-50%);
  width: max-content; white-space: nowrap; color: var(--text);
  font-family: var(--sans); font-size: .75rem; font-weight: 400; line-height: 1.3; letter-spacing: .055em;
}
.kopf__rechts { justify-self: end; display: flex; align-items: center; gap: .5rem; }
.kopf__cta { display: none; }
.kopf__menueknopf {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .45rem .7rem;
  background: none; border: 1px solid var(--linie); color: var(--gold); cursor: pointer;
  font-family: var(--sans); font-size: .6875rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
}
.kopf__menueknopf[hidden] { display: none; }
.kopf__menueicon { width: 1.25rem; height: 1.25rem; }
.kopf__menueicon--zu, .kopf--offen .kopf__menueicon--auf { display: none; }
.kopf--offen .kopf__menueicon--zu { display: inline-block; }
.kopf__nav { border-top: 1px solid var(--linie-leise); }
.kopf__liste { list-style: none; margin: 0; padding: .5rem 0; display: flex; flex-direction: column; align-items: center; }
.kopf__link {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1rem;
  font-size: .8125rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-leise); text-decoration: none; position: relative;
}
.kopf__link:hover { color: var(--gold); }
.kopf__link[aria-current="page"] { color: var(--gold); }
.kopf__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: .45rem; width: .32rem; height: .32rem;
  background: var(--gold); transform: translateX(-50%) rotate(45deg);
}
.kopf__nav-cta { text-align: center; margin: .25rem 0 1.5rem; padding-inline: var(--rand); }
.js .kopf:not(.kopf--offen) .kopf__nav { display: none; }
/* Ohne Layout-Sprung: Bei aktivem JavaScript ist das Menü schon beim ersten Zeichnen zugeklappt
   (nicht erst, wenn main.js gelaufen ist). Ohne JavaScript bleibt die Navigation offen. */
@media (scripting: enabled) and (max-width: 47.99em) {
  .kopf:not(.kopf--offen) .kopf__nav { display: none; }
  .kopf__menueknopf[hidden] { display: inline-flex; }
}

@media (min-width: 48em) {
  .kopf__leiste { padding-block: 1.1rem calc(1.1rem + 1.25rem); }
  .kopf__cta { display: inline-flex; }
  .kopf__menueknopf { display: none; }
  .js .kopf:not(.kopf--offen) .kopf__nav, .kopf__nav { display: block; }
  .kopf__nav-cta { display: none; }
  .kopf__liste { flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 0; }
  .kopf__punkt { display: flex; align-items: center; }
  .kopf__punkt + .kopf__punkt::before {
    content: ""; width: .28rem; height: .28rem; background: var(--linie); transform: rotate(45deg);
    margin-inline: clamp(.5rem, 1.6vw, 1.5rem);
  }
  .kopf__link { padding: 0 .25rem; font-size: .75rem; min-height: 3.1rem; }
}
@media (max-width: 29.99em) {
  .kopf__menuetext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kopf__menueknopf { width: 2.75rem; justify-content: center; padding: 0; }
}
@media (max-width: 47.99em) {
  .kopf__tel-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kopf__tel { justify-content: center; border: 1px solid var(--linie); }
}

/* --- Brotkrumen ------------------------------------------------------------ */
.brotkrumen { margin: 0 0 1.75rem; }
.brotkrumen__liste {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .25rem .75rem; font-size: .75rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--text-leise);
}
.brotkrumen__punkt { display: inline-flex; align-items: center; gap: .75rem; }
.brotkrumen__punkt + .brotkrumen__punkt::before { content: ""; width: .3rem; height: .3rem; background: var(--gold); transform: rotate(45deg); }
.brotkrumen a { color: var(--text-leise); text-decoration: none; display: inline-block; padding-block: .3rem; }
.brotkrumen a:hover { color: var(--gold); }
.brotkrumen [aria-current="page"] { color: var(--gold); }

/* --- Abschnitte allgemein -------------------------------------------------- */
.abschnitt { padding: var(--abstand) var(--rand); scroll-margin-top: 1rem; }
.abschnitt--anthrazit { background: var(--anthrazit); border-block: 1px solid var(--linie-leise); }
.abschnitt--anthrazit + .abschnitt--anthrazit { border-top: 0; padding-top: 0; }
.seitenkopf + .abschnitt:not(.abschnitt--anthrazit) { padding-top: clamp(1.5rem, 1rem + 2.5vw, 4rem); }
.abschnitt__kopf { max-width: 46rem; margin: 0 auto clamp(2.5rem, 2rem + 2vw, 3.75rem); text-align: center; }
.abschnitt__kopf .zier { margin-bottom: 1.4rem; }
.abschnitt__titel {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem); font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: var(--elfenbein); line-height: 1.25;
}
.abschnitt__intro { margin: 1.1rem auto 0; max-width: 38rem; color: var(--text-leise); }

/* --- Hero ------------------------------------------------------------------ */
.hero {
  text-align: center; padding-top: clamp(2.25rem, 1.6rem + 2.4vw, 2.75rem); padding-bottom: calc(var(--abstand) - 3rem);
  background:
    radial-gradient(ellipse 62% 42% at 50% 20%, rgba(201, 169, 106, .11), rgba(201, 169, 106, 0) 70%),
    var(--nacht);
}
.hero__buehne { max-width: 54rem; margin: 0 auto; }
.hero__emblem { position: relative; width: clamp(7rem, 5.2rem + 5.4vw, 9rem); margin: 0 auto clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.hero__emblem::before, .seitenkopf--system .seitenkopf__emblem::before {
  content: ""; position: absolute; inset: -24%; z-index: -1; pointer-events: none;
  background: url("/assets/zifferblatt.8472d31a.svg") center / contain no-repeat; opacity: .32;
}
.hero__emblem, .seitenkopf__emblem { isolation: isolate; }
.hero__logo { width: 100%; }
.hero__kicker { margin-bottom: 1rem; }
.hero__display {
  font-family: var(--serif); font-weight: 300; font-size: clamp(3.1rem, 1.9rem + 5.6vw, 6.25rem);
  line-height: .98; letter-spacing: .005em; color: var(--elfenbein); margin: 0 0 1.25rem;
}
.hero__vor, .hero__akzent { display: block; }
.hero__akzent { font-weight: 400; padding-top: .05em; }
.hero__zier { margin-bottom: 1.25rem; }
.hero__h1 {
  font-weight: 500; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.875rem); line-height: 1.3;
  max-width: 56rem; margin: 0 auto .9rem; color: var(--elfenbein);
}
.hero__absatz { max-width: 48rem; margin: 0 auto 2rem; color: var(--text-leise); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.hero__bild { max-width: 60rem; margin: clamp(3rem, 2.2rem + 3.5vw, 5rem) auto 0; }  /* 12.10. Zweitblick: Foto ergänzt die Uhr, statt mit ihr zu konkurrieren */
.hero__picture img { aspect-ratio: 16 / 9; }

/* --- Seitenkopf (Unterseiten) ---------------------------------------------- */
.seitenkopf {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(2.25rem, 1.6rem + 3vw, 4.25rem) var(--rand) clamp(3rem, 2rem + 4vw, 5.5rem);
  background:
    radial-gradient(ellipse 58% 60% at 50% 0%, rgba(201, 169, 106, .10), rgba(201, 169, 106, 0) 70%),
    var(--nacht);
}
.seitenkopf__text { position: relative; isolation: isolate; max-width: 48rem; margin: 0 auto; }
.seitenkopf:not(.seitenkopf--schlicht) .seitenkopf__text::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -6.5rem; width: 30rem; aspect-ratio: 1;
  transform: translateX(-50%); background: url("/assets/zifferblatt.8472d31a.svg") center / contain no-repeat; opacity: .13; pointer-events: none;
}
.seitenkopf__kicker { margin-bottom: .75rem; }
.seitenkopf__h1 {
  font-weight: 300; font-size: clamp(2.3rem, 1.55rem + 3.6vw, 4.5rem); line-height: 1.06;
  color: var(--elfenbein); margin: 0 0 1.4rem;
}
.seitenkopf__absatz { max-width: 38rem; margin: 1.4rem auto 0; color: var(--text-leise); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.seitenkopf__bild { max-width: 70rem; margin: clamp(2.5rem, 2rem + 3vw, 4.5rem) auto 0; }
.seitenkopf__picture img { aspect-ratio: 3 / 2; }
.seitenkopf--mit-bild { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.seitenkopf__emblem { position: relative; width: 4.25rem; margin: 0 auto 1.25rem; }
.seitenkopf__logo { width: 100%; }
.seitenkopf--schlicht { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.seitenkopf--system { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.seitenkopf--system .seitenkopf__emblem { width: clamp(6rem, 4.5rem + 5vw, 8rem); margin-bottom: 2.25rem; }
.seitenkopf--system .seitenkopf__h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.75rem); }

/* --- Kategorien ------------------------------------------------------------ */
.kategorien__liste {
  display: grid; gap: clamp(3rem, 2rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 2.75rem);
  grid-template-columns: minmax(0, 26rem); justify-content: center; max-width: var(--breite); margin: 0 auto;
}
.kategorie { text-align: center; scroll-margin-top: 1.5rem; }
.kategorie__rahmen::after { display: none; }
.kategorie__picture img { aspect-ratio: 4 / 5; }
.kategorie__medaillon {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; margin: -1.7rem auto 1.25rem;
  border: 1px solid var(--gold); border-radius: 50%; background: var(--nacht); color: var(--gold);
  box-shadow: 0 0 0 5px var(--nacht);
}
.kategorie__icon { width: 1.5rem; height: 1.5rem; }
.kategorie__titel { font-size: 1.55rem; letter-spacing: .26em; text-transform: uppercase; color: var(--elfenbein); margin: 0 0 .85rem; }
.kategorie__text { color: var(--text-leise); margin: 0 auto 1.15rem; max-width: 24rem; font-size: 1rem; }
.kategorie__punkte {
  list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.1rem;
  font-size: .75rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.kategorie__punkte li { display: inline-flex; align-items: center; gap: .55rem; }
.kategorie__punkte li::before { content: ""; width: .32rem; height: .32rem; background: currentColor; transform: rotate(45deg); flex: none; }
.kategorie__link { margin: 0; }
@media (min-width: 60em) {
  .kategorien__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .kategorie { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; }
  .kategorie__punkte { align-self: start; }
  .kategorie__link { align-self: end; }
}

/* --- Schritte -------------------------------------------------------------- */
.schritte__liste { list-style: none; margin: 0 auto; padding: 0; max-width: var(--breite); display: grid; gap: 3rem; position: relative; }
.schritt { position: relative; text-align: center; }
.schritt + .schritt::before {
  content: ""; position: absolute; left: 50%; top: -2.6rem; width: 1px; height: 2.2rem;
  background: linear-gradient(180deg, rgba(201, 169, 106, 0), var(--gold));
}
.schritt__nr {
  position: relative; z-index: 1; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.35rem;
  border: 1px solid var(--gold); border-radius: 50%; background: var(--anthrazit);
  font-family: var(--serif); font-size: 1.55rem; font-weight: 500; letter-spacing: .06em; color: var(--gold);
  box-shadow: 0 0 0 6px var(--anthrazit), 0 0 0 7px var(--linie-leise);
}
.schritt__titel { font-size: 1.3rem; letter-spacing: .2em; text-transform: uppercase; color: var(--elfenbein); margin: 0 0 .7rem; }
.schritt__text { color: var(--text-leise); margin: 0 auto; max-width: 23rem; font-size: 1rem; }
.schritte__link { text-align: center; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0; }
@media (min-width: 56em) {
  .schritte__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; }
  .schritt { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .schritt__titel { align-self: end; }
  .schritte__liste::before {
    content: ""; position: absolute; top: 2.25rem; left: 12.5%; right: 12.5%; height: 1px;
    background: linear-gradient(90deg, rgba(201, 169, 106, .15), var(--linie) 20%, var(--linie) 80%, rgba(201, 169, 106, .15));
  }
  .schritt + .schritt::before { display: none; }
}

/* --- Werte (Diskret · Fair · Sofortige Auszahlung) ------------------------- */
.werte__band {
  position: relative; max-width: var(--breite); margin: 0 auto; padding: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem) clamp(1.25rem, .8rem + 2.5vw, 3rem);
  border: 1px solid var(--linie); outline: 1px solid var(--linie-leise); outline-offset: -.6rem;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(201, 169, 106, .08), rgba(201, 169, 106, 0) 70%), var(--anthrazit);
}
.werte__kopf { margin-bottom: clamp(2rem, 1.6rem + 2vw, 3rem); }
.werte__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; }
.wert { text-align: center; padding-inline: clamp(.5rem, 2vw, 1.75rem); }
.wert__ring, .ort__ring {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.1rem;
  border: 1px solid var(--linie); border-radius: 50%; color: var(--gold);
}
.wert__icon, .ort__icon { width: 1.5rem; height: 1.5rem; }
.wert__titel { font-size: 1.35rem; letter-spacing: .22em; text-transform: uppercase; color: var(--elfenbein); margin: 0 0 .55rem; }
.wert__text { color: var(--text-leise); margin: 0 auto; max-width: 20rem; font-size: 1rem; }
@media (min-width: 48em) {
  .werte__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .wert { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .wert__titel { align-self: end; }
  .wert + .wert { border-left: 1px solid var(--linie-leise); }
}

/* --- Orte (Bogen-Karten) --------------------------------------------------- */
.orte__liste {
  list-style: none; margin: 0 auto; padding: 0; max-width: 66rem; display: grid; gap: 1.75rem;
  grid-template-columns: minmax(0, 22rem); justify-content: center;
}
.ort {
  position: relative; text-align: center; padding: 3.25rem 1.75rem 2.25rem;
  border: 1px solid var(--linie); border-radius: 50rem 50rem 0 0;
  background: linear-gradient(180deg, rgba(201, 169, 106, .08), rgba(201, 169, 106, 0) 60%), var(--nacht);
}
.ort::after {
  content: ""; position: absolute; inset: .45rem; border: 1px solid var(--linie-leise); border-radius: inherit; pointer-events: none;
}
.ort__titel { font-size: 1.3rem; letter-spacing: .18em; text-transform: uppercase; color: var(--elfenbein); margin: 0 0 .65rem; }
.ort__text { color: var(--text-leise); margin: 0; font-size: 1rem; }
@media (min-width: 56em) {
  .orte__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .ort { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .ort__titel { align-self: end; }
}

/* --- Liste (Roll-up-Stil) -------------------------------------------------- */
.liste__tafel {
  max-width: 60rem; margin: 0 auto; border: 1px solid var(--linie); background: var(--anthrazit);
  padding: clamp(1rem, .6rem + 2vw, 2.25rem) clamp(1.25rem, .8rem + 3vw, 3.5rem);
}
.liste__eintraege { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 3rem; }
.liste__eintrag { padding-block: 1.35rem; border-bottom: 1px solid var(--linie-leise); }
.liste__eintrag:last-child { border-bottom: 0; }
.liste__titel {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--sans); font-size: .9375rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--elfenbein);
}
.liste__text { margin: .5rem 0 0; padding-left: 1.32rem; color: var(--text-leise); font-size: 1rem; }
@media (min-width: 48em) {
  .liste__eintraege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liste__eintrag:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* --- Wir kaufen u. a. (12.10.2026): Nigels Ankaufsliste, 28 Punkte in drei Gruppen wie Flyer S. 2 ---------------
   Kompakt statt Textblock: Gold-Kopf mit Raute + Haarlinie je Gruppe, Einträge in Cormorant, zwei Spalten je Gruppe
   (unter 360 px eine), ab 64em drei Gruppen nebeneinander. Alles immer sichtbar, Farben über die Hell/Dunkel-Tokens. */
.wir-kaufen { padding-top: clamp(1rem, .4rem + 2.4vw, 2.5rem); }
.wir-kaufen__kopf { margin-bottom: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); }
.wir-kaufen__titel { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); letter-spacing: .03em; text-transform: none; }
.wir-kaufen__gruppen {
  display: grid; gap: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  max-width: 64rem; margin: 0 auto;
}
.wir-kaufen__gruppe { min-width: 0; }
.wir-kaufen__gruppentitel {
  display: flex; align-items: center; gap: .7rem; margin: 0 0 .85rem; padding-bottom: .65rem;
  border-bottom: 1px solid var(--linie-leise);
  font-family: var(--sans); font-size: .75rem; font-weight: 400; line-height: 1.5; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.wir-kaufen__gruppentitel .raute { width: .32rem; height: .32rem; }
.wir-kaufen__liste { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.25rem; }
.wir-kaufen__liste li {
  break-inside: avoid; padding-block: .2rem;
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.125rem, 1.04rem + .35vw, 1.3125rem); line-height: 1.35;
  color: var(--text);   /* 500 statt 400: Haarstriche bleiben auch klein stabil (Astra-Gegencheck 12.10.) */
}
@media (max-width: 22.49rem) { .wir-kaufen__liste { columns: 1; } }
@media (min-width: 64em) {
  .wir-kaufen__gruppen { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.15fr); }
  .wir-kaufen__gruppe:last-child .wir-kaufen__liste { columns: 1; }
}

/* --- Textblock ------------------------------------------------------------- */
.textblock__bild { max-width: 58rem; margin: 0 auto clamp(3rem, 2.4rem + 2.5vw, 4.5rem); }
.textblock__picture img { aspect-ratio: 3 / 2; }
.textblock__text { max-width: 40rem; margin: 0 auto; text-align: center; }
.textblock__text .abschnitt__titel { margin: 1.4rem 0 1.6rem; }
.textblock__absatz { font-size: 1.125rem; margin: 0 0 1.25rem; }
.textblock__zitat { max-width: 40rem; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0; text-align: center; }
.textblock__zitat p {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.12; margin: 1.1rem 0;
}

/* --- FAQ ------------------------------------------------------------------- */
.faq__liste { max-width: 68rem; margin: 0 auto; display: grid; gap: 0 3.5rem; }
.faq__eintrag { padding-block: 1.6rem; border-top: 1px solid var(--linie-leise); }
.faq__frage { display: flex; gap: .9rem; align-items: baseline; font-size: 1.4rem; font-weight: 500; line-height: 1.3; color: var(--elfenbein); }
.faq__frage .raute { transform: translateY(-.18em) rotate(45deg); }
.faq__antwort { margin: .6rem 0 0; padding-left: 1.32rem; color: var(--text-leise); font-size: 1rem; }
@media (min-width: 56em) {
  .faq__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Platzhalter (bleiben sichtbar markiert) ------------------------------- */
.platzhalter-abschnitt { padding-block: 0 clamp(1rem, .75rem + 1vw, 1.5rem); }
.platzhalter-abschnitt:first-child, .abschnitt--anthrazit + .platzhalter-abschnitt { padding-top: var(--abstand); }
.platzhalter-abschnitt:has(+ :not(.platzhalter-abschnitt)) { padding-bottom: var(--abstand); }
.platzhalter {
  max-width: 46rem; margin: 0 auto; padding: 1.6rem 1.5rem; text-align: center; color: var(--elfenbein);
  border: 1px dashed var(--gold);
  background: repeating-linear-gradient(135deg, rgba(201, 169, 106, .07) 0 10px, rgba(201, 169, 106, 0) 10px 20px);
}
.platzhalter__titel { font-size: 1.25rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; }
.platzhalter__text { margin: 0; font-size: .9375rem; font-weight: 400; }

/* --- Kontakt: Visitenkarten-Rückseite in Elfenbein -------------------------- */
.visitenkarte {
  max-width: 36rem; margin: 0 auto; padding: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  background: var(--elfenbein); color: var(--nacht);
  box-shadow: 0 0 0 1px var(--linie), 0 2.25rem 4rem -2rem rgba(0, 0, 0, .9);
}
.visitenkarte__name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); line-height: 1.1; margin: 0; }
.visitenkarte__unterzeile { font-size: .75rem; font-weight: 400; letter-spacing: .26em; color: var(--altgold-text); margin: .5rem 0 1.75rem; }
.visitenkarte__wege { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .55rem; font-size: 1rem; font-weight: 400; }
.visitenkarte__weg { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .75rem; }
.visitenkarte__icon { color: var(--altgold-text); width: 1.15rem; height: 1.15rem; }
.visitenkarte__label { min-width: 4.75rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--altgold-text); }
.visitenkarte a { color: var(--nacht); text-decoration: underline; text-decoration-color: var(--altgold); text-underline-offset: .22em; display: inline-block; padding-block: .2rem; }
.visitenkarte a:hover { color: var(--altgold-text); }
.visitenkarte :focus-visible { outline-color: var(--altgold-text); }
.visitenkarte__werte {
  margin: 0; padding-top: 1rem; border-top: 1px solid var(--altgold);
  font-size: .75rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--altgold-text);
}
.kontakt__hinweis { max-width: 40rem; margin: 2.25rem auto 0; text-align: center; color: var(--text-leise); }
.kontakt__hinweis .textlink { margin-left: .5rem; }

/* --- CTA-Tafel ------------------------------------------------------------- */
.cta-band__tafel {
  position: relative; max-width: 54rem; margin: 0 auto; text-align: center;
  padding: clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem) clamp(1.25rem, .8rem + 3vw, 3.5rem);
  border: 1px solid var(--linie);
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201, 169, 106, .12), rgba(201, 169, 106, 0) 70%), var(--anthrazit);
}
.cta-band__tafel::before { content: ""; position: absolute; inset: .55rem; border: 1px solid var(--linie-leise); pointer-events: none; }
.cta-band__emblem { width: 4.5rem; margin: 0 auto 1.4rem; }
.cta-band__logo { width: 100%; }
.cta-band__text { max-width: 34rem; margin: 1.1rem auto 2rem; color: var(--text-leise); }
.cta-band__knoepfe { position: relative; }

/* --- Rechtstexte ----------------------------------------------------------- */
.recht { padding-top: clamp(1rem, .5rem + 2vw, 2rem); }
.recht__spalte { max-width: 46rem; margin: 0 auto; }
.recht h2 {
  hyphens: auto; overflow-wrap: break-word;
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); font-weight: 500; color: var(--elfenbein);
  margin: 2.5rem 0 .9rem; padding-top: 2rem; border-top: 1px solid var(--linie-leise);
}
.recht section:first-child h2, .recht .recht__stand + section h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.recht h3 { font-family: var(--sans); font-size: .8125rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 1.75rem 0 .6rem; }
.recht p, .recht li { font-size: 1rem; }
.recht ul { padding-left: 1.25rem; margin: 0 0 1em; }
.recht li { margin-bottom: .35rem; }
.recht li::marker { color: var(--gold); }
.recht section { scroll-margin-top: 1rem; }
.recht__stand { color: var(--text-leise); font-size: .875rem; margin-bottom: 2rem; }
.recht .platzhalter { text-align: left; margin: 1rem 0 1.25rem; padding: 1rem 1.25rem; font-size: .9375rem; font-weight: 400; }

/* --- System-Seiten --------------------------------------------------------- */
.system { max-width: 44rem; margin: 0 auto; padding-top: 0; text-align: center; }
.system__text { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); margin: 0 0 2rem; }
.hinweis--vorschau {
  max-width: 36rem; margin: 0 auto 2.25rem; padding: 1rem 1.25rem; font-size: .9375rem; font-weight: 400; color: var(--elfenbein);
  border: 1px dashed var(--gold); background: rgba(201, 169, 106, .07);
}
.system__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; }
@media (max-width: 29.99em) {
  .system__links { flex-direction: column; align-items: stretch; }
  .system__links .knopf { width: 100%; }
}

/* --- Goldbalken (Roll-up) -------------------------------------------------- */
.goldbalken { background: var(--gold); color: var(--nacht); padding: .6rem var(--rand); }
.goldbalken__zeile {
  max-width: var(--breite); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0 1.75rem; font-size: .8125rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.goldbalken__link { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; color: var(--nacht); text-decoration: none; }
.goldbalken__link:hover { color: var(--nacht); text-decoration: underline; text-underline-offset: .3em; }
.goldbalken__link:focus-visible { outline-color: var(--nacht); }
.goldbalken__icon { width: 1.1rem; height: 1.1rem; }
.goldbalken__raute { width: .4rem; height: .4rem; background: var(--nacht); transform: rotate(45deg); }
@media (max-width: 35.99em) {
  .goldbalken__zeile { flex-direction: column; }
  .goldbalken__raute { display: none; }
}

/* --- Fuß ------------------------------------------------------------------- */
.fuss { background: var(--nacht); padding: clamp(3rem, 2.4rem + 3vw, 5rem) var(--rand) clamp(2.5rem, 2rem + 2vw, 3.5rem); text-align: center; }
.fuss__innen { max-width: var(--breite); margin: 0 auto; }
.fuss__emblem { width: 4.5rem; margin: 0 auto 1.1rem; }
.fuss__wortmarke { font-family: var(--serif); font-size: 1.75rem; font-weight: 400; letter-spacing: .3em; margin: 0 -.3em 0 0; color: var(--elfenbein); line-height: 1.2; }
.fuss__unterzeile { font-size: .75rem; font-weight: 400; letter-spacing: .28em; color: var(--gold); margin: .45rem 0 0; }
.fuss__spalten {
  display: grid; gap: 2rem; margin: 2.5rem auto; padding-block: 2.25rem;
  border-block: 1px solid var(--linie-leise);
}
.fuss__kontakt { font-style: normal; }
.fuss__spalten > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding-inline: clamp(.5rem, 2vw, 1.75rem); }
.fuss__kontaktlink, .fuss__ort { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.25rem; color: var(--text); text-decoration: none; font-size: .9375rem; font-weight: 400; }
.fuss__ort { display: block; padding-top: .35rem; line-height: 1.55; text-wrap: balance; }
.fuss__ort .fuss__icon { vertical-align: -.18em; margin-right: .35rem; }
.fuss__kontaktlink:hover { color: var(--gold); }
.fuss__icon { width: 1.05rem; height: 1.05rem; color: var(--gold); }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.fuss__liste a {
  display: inline-block; padding: .35rem 0; color: var(--text-leise); text-decoration: none;
  font-size: .75rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
}
.fuss__liste a:hover, .fuss__liste a[aria-current="page"] { color: var(--gold); }
.fuss__werte { font-size: .75rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem; }
.fuss__copyright { font-size: .8125rem; color: var(--text-leise); margin: 0; }
@media (min-width: 48em) {
  .fuss__spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; }
  .fuss__spalten > * + * { border-left: 1px solid var(--linie-leise); }
}

/* --- Vorschau-Badge (nur Vorschau-Builds) ----------------------------------
   Schmal: ruhige Leiste ganz oben im Seitenfluss – verdeckt nichts.
   Ab 80em: fixierte, senkrecht gesetzte Leiste am linken Rand (Inhalt beginnt dort ≥ 4rem weiter rechts). */
.vorschau-badge {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1rem;
  padding: .15rem var(--rand); background: var(--anthrazit); border-bottom: 1px solid var(--linie-leise);
  font-size: .75rem; line-height: 1.5; letter-spacing: .06em;
}
.vorschau-badge__text { color: var(--elfenbein); font-weight: 400; }
.vorschau-badge__link { color: var(--gold); display: inline-block; padding-block: .2rem; }
@media (min-width: 80em) {
  .vorschau-badge {
    position: fixed; left: 0; top: 50%; z-index: 50; flex-wrap: nowrap; gap: 1rem;
    writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
    padding: 1rem .2rem; line-height: 2; background: rgba(10, 10, 11, .94);
    border: 1px solid var(--linie); border-right: 0;
  }
  .vorschau-badge__link { padding-block: 0; }
}

/* ==========================================================================
   Formulare (Bausteine T3, Klassen sa-form) – dunkel, Gold-Nummernkreise
   ========================================================================== */
/* Pflicht-CSS aus src/gemeinsam/LIESMICH.md */
.sa-form [hidden] { display: none !important; }
.sa-form__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sa-form__karte-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sa-form__karte-input:focus-visible + .sa-form__karte-inhalt { outline: 2px solid var(--gold); outline-offset: 3px; }
.sa-form__datei-knopf { display: none; }
.sa-form--js .sa-form__datei-knopf { display: inline-flex; }
.sa-form--js .sa-form__datei-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sa-form--js .sa-form__datei-input:focus-visible + .sa-form__datei-knopf { outline: 2px solid var(--gold); outline-offset: 3px; }

.formular__kopf .kicker { margin: 0 0 .9rem; }
.formular__koerper { max-width: 60rem; margin: 0 auto; }
.formular--kontakt .formular__koerper { max-width: 48rem; }
.sa-form { position: relative; margin: 0; }
.sa-form__pflicht-hinweis { text-align: center; font-size: .875rem; color: var(--text-leise); margin: 0 0 1.5rem; }
.sa-form__pflicht { color: var(--gold); }
.sa-form__zusatz { text-transform: none; letter-spacing: .02em; color: var(--text-leise); font-size: .8125rem; }

.sa-form__abschnitt {
  min-width: 0; margin: 0 0 1.5rem; padding: clamp(1.25rem, .9rem + 2.4vw, 2.5rem);
  border: 1px solid var(--linie); background: var(--nacht);
}
.sa-form__abschnitt > :not(legend) { clear: both; }
.sa-form__legende { float: left; width: 100%; display: flex; align-items: center; gap: 1rem; padding: 0; margin: 0 0 1.6rem; }
.sa-form__legende::after { content: ""; flex: 1 1 2rem; height: 1px; background: linear-gradient(90deg, var(--linie), rgba(201, 169, 106, 0)); }
@media (max-width: 39.99em) { .sa-form__legende::after { display: none; } }
.sa-form__nr {
  flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--gold); border-radius: 50%; color: var(--gold);
  font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums;
  box-shadow: 0 0 0 4px var(--nacht), 0 0 0 5px var(--linie-leise);
}
.sa-form__legende-text { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--elfenbein); line-height: 1.25; }
.sa-form__abschnitt-text { color: var(--text-leise); margin: 0 0 .75rem; font-size: 1rem; }
.sa-form__hinweis { font-size: .875rem; color: var(--text-leise); margin: .5rem 0 0; line-height: 1.55; }
.sa-form__hinweis--wichtig { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 1.35rem; color: var(--elfenbein); font-size: .9375rem; font-weight: 400; }
.sa-form__hinweis--wichtig::before { content: ""; flex: none; width: .4rem; height: .4rem; background: var(--gold); transform: translateY(-.1em) rotate(45deg); }

.sa-form__gruppe { min-width: 0; margin: 0 0 1.5rem; padding: 0; border: 0; }
.sa-form__label { display: block; padding: 0; margin: 0 0 .55rem; font-size: .75rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); line-height: 1.5; }
.sa-form__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 1.5rem; }
.sa-form__feld { min-width: 0; }
@media (min-width: 40em) {
  .sa-form__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-form__feld--breit { grid-column: 1 / -1; }
}

/* Radiokarten (Kategorie) */
.sa-form__karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 40em) { .sa-form__karten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sa-form__karte { display: block; position: relative; cursor: pointer; }
.sa-form__karte-inhalt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  min-height: 6.5rem; padding: 1.1rem .5rem; text-align: center;
  border: 1px solid var(--linie-feld); background: var(--anthrazit); color: var(--elfenbein);
  transition: border-color .2s ease, background-color .2s ease;
}
.sa-form__karte-icon { width: 2rem; height: 2rem; color: var(--gold); }
.sa-form__karte-text { font-size: .8125rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; }
.sa-form__karte:hover .sa-form__karte-inhalt { border-color: var(--gold); }
.sa-form__karte-input:checked + .sa-form__karte-inhalt { border-color: var(--gold); background: var(--gold-flaeche); box-shadow: inset 0 0 0 1px var(--gold); }
.sa-form__karte-input:checked + .sa-form__karte-inhalt::after {
  content: ""; position: absolute; top: .65rem; right: .65rem; width: .42rem; height: .42rem; background: var(--gold); transform: rotate(45deg);
}
.sa-form__gruppe--fehler .sa-form__karte-inhalt { border-color: var(--fehler); }

/* Eingabefelder */
.sa-form__eingabe, .sa-form__auswahl, .sa-form__textfeld {
  display: block; width: 100%; min-height: 3.1rem; margin: 0; padding: .8rem 1rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--elfenbein);
  background: var(--anthrazit); border: 1px solid var(--linie-feld); border-radius: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sa-form__eingabe::placeholder, .sa-form__textfeld::placeholder { color: var(--platzhalter); opacity: 1; }
.sa-form__eingabe:hover, .sa-form__auswahl:hover, .sa-form__textfeld:hover { border-color: var(--gold); }
.sa-form__eingabe:focus, .sa-form__auswahl:focus, .sa-form__textfeld:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.sa-form__textfeld { min-height: 7rem; resize: vertical; }
.sa-form__auswahl {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("/assets/pfeil-unten.befbe768.svg"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.1rem;
}
.sa-form__auswahl option { background: var(--anthrazit); color: var(--elfenbein); }
.sa-form__eingabe--iban { font-variant-numeric: tabular-nums; letter-spacing: .06em; text-transform: uppercase; }
[aria-invalid="true"].sa-form__eingabe, [aria-invalid="true"].sa-form__auswahl, [aria-invalid="true"].sa-form__textfeld { border-color: var(--fehler); }
.sa-form__fehler { margin: .45rem 0 0; color: var(--fehler); font-size: .875rem; font-weight: 400; line-height: 1.5; }

/* Uploads */
.sa-form__uploads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 56em) { .sa-form__uploads { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sa-form__upload { min-width: 0; display: flex; flex-direction: column; }
.sa-form__ablage {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.5rem 1rem; text-align: center; border: 1px dashed var(--linie-feld); background: var(--anthrazit);
  transition: border-color .2s ease, background-color .2s ease;
}
.sa-form__ablage:hover, .sa-form__ablage--ziel { border-color: var(--gold); }
.sa-form__ablage--ziel { border-style: solid; background: var(--gold-flaeche); }
.sa-form__ablage--voll { opacity: .72; }
.sa-form__upload--fehler .sa-form__ablage { border-color: var(--fehler); }
.sa-form__ablage-icon { width: 2.25rem; height: 2.25rem; color: var(--gold); }
.sa-form__ablage-titel { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.25; color: var(--elfenbein); margin: 0; }
.sa-form__ablage-text { font-size: .8125rem; line-height: 1.5; color: var(--text-leise); margin: 0; }
.sa-form__ablage-ziehen { font-size: .8125rem; font-style: italic; color: var(--text-leise); margin: 0; }
.sa-form__datei-input { max-width: 100%; font-family: var(--sans); font-size: .875rem; color: var(--text); }
.sa-form__datei-input::file-selector-button {
  margin-right: .75rem; padding: .5rem .9rem; font: inherit; color: var(--gold); background: transparent;
  border: 1px solid var(--gold); cursor: pointer;
}
.sa-form__datei-knopf {
  align-items: center; justify-content: center; gap: .55rem; margin-top: .5rem; min-height: 2.75rem; padding: .55rem 1.1rem;
  font-size: .75rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold); cursor: pointer; transition: background-color .2s ease;
}
.sa-form__datei-knopf:hover { background: rgba(201, 169, 106, .12); }
.sa-form__datei-knopf-icon { width: 1.1rem; height: 1.1rem; }
.sa-form__vorschau { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.sa-form__vorschau-eintrag {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  padding: .5rem; border: 1px solid var(--linie-leise); background: var(--anthrazit);
}
.sa-form__vorschau-eintrag--laedt { opacity: .72; }
.sa-form__vorschau-eintrag--fehler { border-color: var(--fehler); }
.sa-form__vorschau-medium { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; overflow: hidden; border: 1px solid var(--linie-leise); background: var(--nacht); }
.sa-form__vorschau-bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-form__vorschau-icon { width: 1.5rem; height: 1.5rem; color: var(--gold); }
.sa-form__vorschau-info { min-width: 0; display: grid; text-align: left; }
.sa-form__vorschau-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 400; color: var(--elfenbein); }
.sa-form__vorschau-groesse { font-size: .75rem; color: var(--text-leise); }
.sa-form__vorschau-entfernen {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 1px solid var(--linie-feld); color: var(--gold); cursor: pointer;
}
.sa-form__vorschau-entfernen:hover { border-color: var(--gold); }
.sa-form__vorschau-entfernen-icon { width: 1.1rem; height: 1.1rem; }

/* Auszahlung */
.sa-form__gruppe--optionen { margin: 0; }
.sa-form__optionen { display: grid; gap: .6rem; }
.sa-form__option {
  display: flex; align-items: center; gap: .8rem; min-height: 3.1rem; padding: .7rem 1rem; cursor: pointer;
  border: 1px solid var(--linie-feld); background: var(--anthrazit); transition: border-color .2s ease, background-color .2s ease;
}
.sa-form__option:hover { border-color: var(--gold); }
.sa-form__option:has(.sa-form__option-input:checked) { border-color: var(--gold); background: var(--gold-flaeche); }
.sa-form__option-input, .sa-form__check-input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
  border: 1px solid var(--gold); background: var(--nacht); transition: background-color .2s ease, box-shadow .2s ease;
}
.sa-form__option-input { width: 1.2rem; height: 1.2rem; border-radius: 50%; }
.sa-form__option-input:checked { background: var(--gold); box-shadow: inset 0 0 0 4px var(--nacht); }
.sa-form__option-input:focus-visible, .sa-form__check-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sa-form__option-text { font-size: 1rem; font-weight: 400; color: var(--elfenbein); }
.sa-form__bank { display: grid; align-content: start; gap: 1rem; padding: 1.25rem; border: 1px solid var(--linie-leise); background: var(--anthrazit); }
.sa-form__bank .sa-form__eingabe { background: var(--nacht); }
.sa-form__bank-titel { margin: 0; font-size: .75rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.sa-form__bank .sa-form__hinweis { margin: -.6rem 0 0; }

/* Bestätigung, Datenschutz, Absenden */
.sa-form__feld--check {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .85rem; align-items: start;
  margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--linie-leise);
}
.sa-form__check-input { width: 1.3rem; height: 1.3rem; margin-top: .2rem; }
.sa-form__check-input:checked { background: var(--gold) url("/assets/haken.c75e550f.svg") center / 85% no-repeat; }
[aria-invalid="true"].sa-form__check-input { border-color: var(--fehler); }
.sa-form__check-label { font-size: .9375rem; font-weight: 400; color: var(--elfenbein); cursor: pointer; }
.sa-form__feld--check .sa-form__fehler { grid-column: 2; }
.sa-form__datenschutz { margin: 1.25rem 0 0; font-size: .875rem; color: var(--text-leise); line-height: 1.6; }
.sa-form__link { color: var(--gold); text-decoration: underline; }
.sa-form__absenden { display: grid; gap: .85rem; margin-top: 1.6rem; }
.sa-form__knopf {
  display: flex; align-items: center; justify-content: center; gap: .85rem; width: 100%; min-height: 3.75rem; padding: 1rem 1.5rem;
  font-family: var(--sans); font-size: .875rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--nacht); background: var(--gold); border: 1px solid var(--gold); border-radius: 0; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.sa-form__knopf:hover { background: var(--gold-hell); border-color: var(--gold-hell); }
.sa-form__knopf-icon { width: 1.25rem; height: 1.25rem; transition: transform .25s ease; }
.sa-form__knopf:hover .sa-form__knopf-icon { transform: translateX(4px); }
.sa-form__knopf:disabled { opacity: .6; cursor: progress; }
@media (max-width: 29.99em) { .sa-form__knopf { letter-spacing: .16em; padding-inline: 1rem; gap: .6rem; } }
.sa-form__fortschritt { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: .375rem; border: 0; background: rgba(201, 169, 106, .2); }
.sa-form__fortschritt::-webkit-progress-bar { background: rgba(201, 169, 106, .2); }
.sa-form__fortschritt::-webkit-progress-value { background: var(--gold); }
.sa-form__fortschritt::-moz-progress-bar { background: var(--gold); }
.sa-form__status:empty { display: none; }
.sa-form__status { padding: .85rem 1rem; border: 1px solid var(--linie); font-size: .9375rem; font-weight: 400; color: var(--elfenbein); }
.sa-form__status--fehler { border-color: var(--fehler); color: var(--fehler); }
.sa-form__status--erfolg { color: var(--gold); }

/* Vertrauensleiste */
.sa-form__vertrauen { list-style: none; margin: 2rem 0 0; padding: 2rem 0 0; display: grid; gap: 1.75rem; border-top: 1px solid var(--linie-leise); }
.sa-form__vertrauen-eintrag { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.sa-form__vertrauen-icon { width: 1.75rem; height: 1.75rem; color: var(--gold); margin-bottom: .35rem; }
.sa-form__vertrauen-titel { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--elfenbein); }
.sa-form__vertrauen-text { font-size: .875rem; color: var(--text-leise); }
@media (min-width: 40em) {
  .sa-form__vertrauen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .sa-form__vertrauen-eintrag + .sa-form__vertrauen-eintrag { border-left: 1px solid var(--linie-leise); }
}

/* Kontaktformular: eine gerahmte Tafel */
.sa-form--kontakt { padding: clamp(1.25rem, .9rem + 2.4vw, 2.5rem); border: 1px solid var(--linie); background: var(--nacht); }

/* --- Bewegung: nur dezent, nur ohne „reduzierte Bewegung“ ----------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero__emblem::before { animation: a-zifferblatt 1.6s ease-out both; }
  .hero__zier::before { transform-origin: right center; animation: a-linie 1.4s .2s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__zier::after { transform-origin: left center; animation: a-linie 1.4s .2s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes a-zifferblatt { from { opacity: 0; transform: scale(.92) rotate(-6deg); } to { opacity: .32; transform: none; } }
  @keyframes a-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Breite Bildschirme ---------------------------------------------------- */
@media (min-width: 64em) {
  .hero__picture img { aspect-ratio: 2 / 1; }
  .seitenkopf__picture img { aspect-ratio: 12 / 5; }
  .textblock__picture img { aspect-ratio: 2 / 1; }
}

/* --- Startbild-Band (static/hero/, seit 13.10.2026 Goldschmuck statt Taschenuhr auf Münzen) --------------
   Eigene Regeln statt der aus bilder.json generierten (das Foto steht bewusst nicht in bilder.json). */
.bild--a-hero-schmuck { background-color: #090709; }
.bild--a-hero-schmuck img { object-position: 50% 50%; }

/* ==========================================================================
   Hell/Dunkel-Umschalter (11.10.2026) – Standard DUNKEL, heller Modus über html[data-thema="hell"]
   (gesetzt von thema.js vor dem ersten Zeichnen). Farben: Elfenbein #EDE7DA als Grund,
   Nachtschwarz/Anthrazit als Schrift, Altgold #7D632D für kleine Goldschrift (4,61:1),
   Champagner #C9A96A auf Hell nur dekorativ (Goldbalken als Fläche mit Nachtschwarz darauf).
   Kontrastpaare: src/variante-a/kontrast-paare-hell.json → pruefung/kontrast-a-hell.md
   ========================================================================== */

/* --- Schalter im Kopf ------------------------------------------------------ */
.kopf__thema {
  display: none; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 1px solid var(--linie); color: var(--gold); cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.thema-js .kopf__thema { display: inline-grid; }
.kopf__thema:hover { border-color: var(--gold); color: var(--gold-hell); }
.kopf__thema-icon { width: 1.3rem; height: 1.3rem; }
.kopf__thema-icon--mond, [data-thema="hell"] .kopf__thema-icon--sonne { display: none; }
[data-thema="hell"] .kopf__thema-icon--mond { display: block; }
/* Mobil: rechts zwei Quadrat-Knöpfe (Schalter + Menü) – Menütext erst ab 36em, darunter etwas kleineres Logo */
@media (max-width: 35.99em) {
  .kopf__menuetext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kopf__menueknopf { width: 2.75rem; justify-content: center; padding: 0; }
}
@media (max-width: 29.99em) {
  .kopf__leiste { gap: .5rem; }
  .kopf__rechts { gap: .25rem; }
  .kopf__logo { width: clamp(5.75rem, 100vw - 14.25rem, 9.25rem); }
  .kopf__tel, .kopf__thema, .kopf__menueknopf { width: 2.5rem; min-width: 2.5rem; height: 2.5rem; min-height: 2.5rem; }
}

/* --- Heller Modus: Farbmarken --------------------------------------------- */
html[data-thema="hell"] {
  color-scheme: light;
  --nacht: #EDE7DA;              /* Grund: Elfenbein */
  --anthrazit: #F6F2EA;          /* Wechselabschnitte, Felder, Tafeln: helles Papier */
  --gold: #7D632D;               /* kleine Goldschrift, Icons, Rahmen, Fokusring: Altgold-Text (4,61:1 / 5,09:1) */
  --gold-hell: #5C4920;          /* Hover */
  --gold-flaeche: #E4D7BD;       /* gewählte Karte/Option */
  --elfenbein: #16161A;          /* Rolle „helle Schrift“ → Anthrazit; Visitenkarte wird dadurch dunkel (Vorderseite) */
  --text: #16161A;
  --text-leise: rgba(22, 22, 26, .8);
  --platzhalter: #6A6357;
  --linie: rgba(125, 99, 45, .5);
  --linie-leise: rgba(125, 99, 45, .26);
  --linie-feld: #8A6D32;         /* Feldrahmen ≥ 3:1 auf Elfenbein und Papier */
  --fehler: #9E2B1E;
}

/* Logos und Embleme: Champagner → Altgold, Elfenbein-Wortmarke → Nachtschwarz (CSS schlägt Präsentationsattribute) */
html[data-thema="hell"] .logo [fill="#C9A96A"], html[data-thema="hell"] .logo [fill="#c9a96a"] { fill: #8A6D32; }
html[data-thema="hell"] .logo [fill="#EDE7DA"], html[data-thema="hell"] .logo [fill="#ede7da"] { fill: #0A0A0B; }

/* Kerzenlicht-Scheine: auf Hell als warmer Weißschein (ein Goldschein würde kleine Altgold-Schrift unter 4,5:1 drücken) */
html[data-thema="hell"] .hero {
  background: radial-gradient(ellipse 62% 42% at 50% 20%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%), var(--nacht);
}
html[data-thema="hell"] .seitenkopf {
  background: radial-gradient(ellipse 58% 60% at 50% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%), var(--nacht);
}
html[data-thema="hell"] .werte__band {
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%), var(--anthrazit);
}
html[data-thema="hell"] .ort { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), var(--nacht); }
html[data-thema="hell"] .cta-band__tafel {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%), var(--anthrazit);
}
html[data-thema="hell"] .platzhalter {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .5) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
}
html[data-thema="hell"] .hinweis--vorschau { background: rgba(255, 255, 255, .5); }
html[data-thema="hell"] .hero__emblem::before, html[data-thema="hell"] .seitenkopf--system .seitenkopf__emblem::before,
html[data-thema="hell"] .seitenkopf:not(.seitenkopf--schlicht) .seitenkopf__text::before { background-image: url("/assets/zifferblatt-hell.94498bde.svg"); }

/* Hover-Flächen: aufhellen statt abdunkeln (Altgold-Schrift bleibt ≥ 4,5:1) */
html[data-thema="hell"] .knopf--sekundaer:hover, html[data-thema="hell"] .sa-form__datei-knopf:hover { background: rgba(255, 255, 255, .6); }

/* Goldener Balken bleibt Champagner (Fläche) mit Nachtschwarz darauf (8,8:1) */
html[data-thema="hell"] .goldbalken { background: #C9A96A; color: #0A0A0B; }
html[data-thema="hell"] .goldbalken__link, html[data-thema="hell"] .goldbalken__link:hover { color: #0A0A0B; }
html[data-thema="hell"] .goldbalken__link:focus-visible { outline-color: #0A0A0B; }
html[data-thema="hell"] .goldbalken__raute { background: #0A0A0B; }

/* Visitenkarte: auf hellem Grund die dunkle Vorderseite (Anthrazit) mit Champagner-Schrift */
html[data-thema="hell"] .visitenkarte { box-shadow: 0 0 0 1px var(--linie), 0 2rem 3.5rem -2rem rgba(10, 10, 11, .45); }
html[data-thema="hell"] .visitenkarte__unterzeile, html[data-thema="hell"] .visitenkarte__icon,
html[data-thema="hell"] .visitenkarte__label, html[data-thema="hell"] .visitenkarte__werte { color: #C9A96A; }
html[data-thema="hell"] .visitenkarte__werte { border-top-color: #8A6D32; }
html[data-thema="hell"] .visitenkarte a { text-decoration-color: #C9A96A; }
html[data-thema="hell"] .visitenkarte a:hover { color: #D9BD85; }
html[data-thema="hell"] .visitenkarte :focus-visible { outline-color: #C9A96A; }

/* Formular: heller Select-Pfeil und Haken (Elfenbein auf Altgold, 4,61:1) */
html[data-thema="hell"] .sa-form__auswahl { background-image: url("/assets/pfeil-unten-hell.22f284ba.svg"); }
html[data-thema="hell"] .sa-form__check-input:checked { background-image: url("/assets/haken-hell.d1b1ce83.svg"); }

/* Vorschau-Badge (nur Vorschau-Builds), breite Bildschirme */
@media (min-width: 80em) {
  html[data-thema="hell"] .vorschau-badge { background: rgba(246, 242, 234, .96); }
}

/* --- Sehr schmale Handys (< 360 px, 11.10.2026): gesperrte Wortmarke im Fuß und Orte-Titel liefen über (Querscrollen bei 320 px) */
@media (max-width: 22.49em) {
  .fuss__wortmarke { font-size: 1.45rem; }
  .ort__titel { font-size: 1.15rem; letter-spacing: .12em; }
  .abschnitt__titel { letter-spacing: .12em; }
}

/* ==========================================================================
   Bewegung & Tiefe (12.10.2026) – DESIGN.md §9. „Vitrine bei Kerzenlicht“: Licht streicht über Gold und Glas,
   eine Sekunden-Raute läuft am Zifferblatt, Abschnitte steigen weich auf, Karten heben sich unter dem Zeiger.
   Regeln: nur transform/opacity (bzw. CSS-Variablen auf kleinen Ebenen); alles nur bei prefers-reduced-motion:
   no-preference (die globale reduce-Regel oben bleibt); Startzustände der Reveals nur mit JS (html.fx + .fx-warte
   aus effekte.js); Neigung/Zeigerlicht nur bei feinem Zeiger. Hero-Foto (LCP) und Hero-Text werden nie ausgeblendet.
   ========================================================================== */
:root {
  --fx-ease: cubic-bezier(.16, 1, .3, 1);          /* klingt aus wie eine Unruh, die zur Ruhe kommt */
  --fx-ease-weich: cubic-bezier(.45, .05, .25, 1);
  --fx-licht: rgba(214, 180, 118, .09);            /* Kerzenlicht auf Tafeln und Karten */
  --fx-licht-foto: rgba(255, 238, 206, .16);
  --fx-glanz: rgba(255, 247, 228, .3);             /* Glanzband über Goldflächen */
  --fx-kante: rgba(255, 233, 186, .95);            /* Licht auf der Goldkante der Vitrine */
  --fx-tiefe: 0 1.6rem 2.6rem -1.4rem rgba(0, 0, 0, .9), 0 0 3.25rem -.75rem rgba(201, 169, 106, .2);
}
html[data-thema="hell"] {
  --fx-licht: rgba(255, 255, 255, .45);
  --fx-licht-foto: rgba(255, 246, 228, .14);
  --fx-glanz: rgba(255, 255, 255, .42);
  --fx-kante: rgba(150, 112, 44, .95);
  --fx-tiefe: 0 1.5rem 2.6rem -1.3rem rgba(70, 52, 20, .32);
}
.hero__glas, .hero__kante { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* --- Zifferblatt: Sekunden-Raute auf dem äußeren Ring. Läuft NICHT endlos (WCAG 2.2.2): effekte.js „zieht sie auf“ –
     von 12 Uhr auf die echte Sekunde, kurz live weiter, dann steht sie (Bewegung gesamt < 5 s). Ohne JS: still bei 12 Uhr. */
  .hero__emblem::after, .seitenkopf--system .seitenkopf__emblem::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: .38rem; height: .38rem; margin: -.19rem 0 0 -.19rem;
    background: var(--gold); opacity: .9; pointer-events: none;
    transform: translateY(calc(clamp(7rem, 5.2rem + 5.4vw, 9rem) * -.729)) rotate(45deg);
    animation: fx-sekunde 60s linear infinite paused, fx-sanft .6s 1.2s ease-out backwards;
  }
  .seitenkopf--system .seitenkopf__emblem::after { transform: translateY(calc(clamp(6rem, 4.5rem + 5vw, 8rem) * -.729)) rotate(45deg); }
  @keyframes fx-sekunde { from { rotate: 0turn; } to { rotate: 1turn; } }
  @keyframes fx-sanft { from { opacity: 0; } }

  /* --- Vitrine (Hero): Lichtreflex einmal über Glas und Goldkante */
  .hero__glas, .hero__kante { display: block; position: absolute; pointer-events: none; }
  .hero__glas { inset: clamp(.55rem, .35rem + .8vw, .95rem); overflow: hidden; }
  /* Glas und Goldkante teilen Breite und Weg: der Reflex trifft Glas und Kante an derselben Stelle */
  .hero__glas::before, .hero__kante::after {
    content: ""; position: absolute; top: -12%; bottom: -12%; left: 0; width: 55%;
    background: linear-gradient(115deg, rgba(255, 246, 224, 0) 22%, rgba(255, 246, 224, .1) 38%, rgba(255, 246, 224, .25) 50%,
      rgba(255, 246, 224, .1) 62%, rgba(255, 246, 224, 0) 78%);
    transform: translateX(-110%);
  }
  .hero__rahmen.fx-glanz .hero__glas::before, .hero__rahmen.fx-glanz .hero__kante::after { animation: fx-reflex 2.2s .2s var(--fx-ease-weich) both; }
  .hero__kante {
    inset: -1px; padding: 1px; overflow: hidden;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  }
  .hero__kante::after { background: linear-gradient(115deg, rgba(255, 233, 186, 0) 30%, var(--fx-kante) 50%, rgba(255, 233, 186, 0) 70%); }
  @keyframes fx-reflex { from { transform: translateX(-110%); } to { transform: translateX(200%); } }

  /* --- Goldbalken: ein Glanzlauf, wenn er ins Bild kommt (Klasse von effekte.js) */
  .goldbalken { position: relative; overflow: hidden; }
  .goldbalken::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 250, 236, 0), var(--fx-glanz) 50%, rgba(255, 250, 236, 0));
    transform: translateX(-105%);
  }
  .goldbalken.fx-glanz::after { animation: fx-lauf 1.8s .1s var(--fx-ease-weich) both; }
  @keyframes fx-lauf { from { transform: translateX(-105%); } to { transform: translateX(400%); } }

  /* --- Tiefe in jedem Passepartout: das Foto gleitet langsamer als sein Rahmen (Scroll-Driven, Compositor) */
  .rahmen picture { overflow: hidden; }
  @supports (animation-timeline: view()) {
    .rahmen picture img { scale: 1.07; animation: fx-tiefe linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes fx-tiefe { from { translate: 0 -2.8%; } to { translate: 0 2.8%; } }
    @keyframes fx-tiefe-klein { from { translate: 0 -1.8%; } to { translate: 0 1.8%; } }
  }

  /* --- Reveals: nur mit JS und nur unterhalb des ersten Bildschirms (effekte.js) */
  .fx .fx-warte:not(.schritte__liste) { opacity: 0; }
  .fx .fx-ein:not(.schritte__liste) {
    transform-origin: 50% 100%;
    animation: fx-auf .85s var(--fx-ease) calc(var(--fx-i, 0) * 80ms) backwards;
  }
  @keyframes fx-auf { from { opacity: 0; transform: perspective(1000px) translate3d(0, 16px, 0) rotateX(3deg); } }
  @keyframes fx-auf-klein { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
  /* Ornament im Abschnittskopf: Haarlinien ziehen sich auf, die Raute dreht sich ein */
  .fx .fx-ein .zier::before { transform-origin: right center; animation: a-linie 1s calc(var(--fx-i, 0) * 80ms + .15s) cubic-bezier(.2, .7, .2, 1) backwards; }
  .fx .fx-ein .zier::after { transform-origin: left center; animation: a-linie 1s calc(var(--fx-i, 0) * 80ms + .15s) cubic-bezier(.2, .7, .2, 1) backwards; }
  .fx .fx-ein .zier__raute { animation: fx-raute .7s calc(var(--fx-i, 0) * 80ms + .1s) var(--fx-ease) backwards; }
  @keyframes fx-raute { from { transform: rotate(-45deg) scale(.2); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }
  /* Schritte I–IV: die Verbindungslinie zieht sich, die Ringe erscheinen nacheinander auf ihr */
  .schritt { --fx-s: 0s; }
  .schritt:nth-child(2) { --fx-s: .22s; }
  .schritt:nth-child(3) { --fx-s: .44s; }
  .schritt:nth-child(4) { --fx-s: .66s; }
  .fx .schritte__liste.fx-warte .schritt, .fx .schritte__liste.fx-warte .schritt + .schritt::before { opacity: 0; }
  .fx .schritte__liste.fx-warte::before { transform: scaleX(0); }
  .fx .schritte__liste.fx-ein::before { transform-origin: left center; animation: a-linie 1s .05s cubic-bezier(.3, 0, .3, 1) backwards; }
  .fx .schritte__liste.fx-ein .schritt { animation: fx-auf .8s var(--fx-ease) var(--fx-s) backwards; }
  .fx .schritte__liste.fx-ein .schritt__nr { animation: fx-ring .9s var(--fx-ease) var(--fx-s) backwards; }
  .fx .schritte__liste.fx-ein .schritt + .schritt::before { transform-origin: center top; animation: fx-linie-y .5s calc(var(--fx-s) - .15s) var(--fx-ease-weich) backwards; }
  @keyframes fx-ring { from { transform: scale(.86); } }
  @keyframes fx-linie-y { from { transform: scaleY(0); opacity: 0; } }

  /* --- Tastatur: gleichwertig erkennbar, aber ohne Bewegung – Goldrahmen sofort, Schein in 150 ms, keine Hebung */
  .kategorie { position: relative; z-index: 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
  .kategorie:has(:focus-visible) .rahmen { border-color: var(--gold); transition-duration: 0s; }
  .kategorie__rahmen::after {
    display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background: none; transform: none; box-shadow: var(--fx-tiefe); opacity: 0; transition: opacity .5s cubic-bezier(.22, 1, .36, 1);
  }
  .kategorie:has(:focus-visible) .kategorie__rahmen::after { opacity: 1; transition-duration: .15s; }

  /* --- Hell/Dunkel: kreisförmige Überblendung vom Schalter aus (View Transitions, thema.js) */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
}

/* --- Zeiger-Tiefe: nur Maus/Trackpad (Touch: keine Neigung, kein Zeigerlicht) ------------------------------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Vitrine: Neigung max. ±2,2° zur Maus, das Foto liegt tiefer im Rahmen, Licht auf Glas und Goldkante */
  .hero__bild { perspective: 1800px; }
  .hero__rahmen.fx-aktiv { transform: rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)); will-change: transform; }
  .hero__rahmen.fx-aktiv .hero__picture img {
    transform: translate3d(calc(var(--fx-nx, 0) * -6px), calc(var(--fx-ny, 0) * -4px), 0); will-change: transform;
  }
  .hero__glas::after, .hero__kante::before {
    content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; opacity: 0;
    transform: translate(var(--fx-dx, 0px), var(--fx-dy, 0px)); transition: opacity .8s var(--fx-ease);
  }
  .hero__glas::after { width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem; background: radial-gradient(closest-side, rgba(255, 244, 220, .12), rgba(255, 244, 220, 0)); }
  .hero__kante::before { width: 26rem; height: 26rem; margin: -13rem 0 0 -13rem; background: radial-gradient(closest-side, var(--fx-kante), rgba(255, 233, 186, 0)); }
  .hero__bild:hover .hero__glas::after, .hero__bild:hover .hero__kante::before { opacity: 1; }
  /* Läuft der einmalige Reflex noch, wenn der Zeiger kommt: in 200 ms ausblenden, damit sich die Lichter nicht addieren */
  .hero__glas::before, .hero__kante::after { transition: opacity .2s ease; }
  .hero__bild:hover .hero__glas::before, .hero__bild:hover .hero__kante::after { opacity: 0; }

  /* Visitenkarte (Kontakt): liegt wie eine echte Karte in der Hand – Neigung max. ±2,5°, Glanz folgt dem Zeiger */
  .visitenkarte { position: relative; overflow: hidden; }
  .visitenkarte.fx-aktiv { transform: perspective(1400px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)); will-change: transform; }
  .visitenkarte::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 30rem; height: 30rem; margin: -15rem 0 0 -15rem; border-radius: 50%;
    pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
    transform: translate(var(--fx-dx, 0px), var(--fx-dy, 0px)); transition: opacity .8s var(--fx-ease);
  }
  .visitenkarte:hover::after { opacity: 1; }
  html[data-thema="hell"] .visitenkarte::after { background: radial-gradient(closest-side, rgba(255, 244, 220, .12), rgba(255, 244, 220, 0)); }

  /* Kategorien: Karte hebt sich 4 px, Goldrahmen leuchtet auf, Foto rückt ~2 % näher, Licht folgt dem Zeiger */
  .kategorie:hover { transform: translateY(-4px); }
  .kategorie:hover .rahmen { border-color: var(--gold); }
  .kategorie:hover .kategorie__rahmen::after { opacity: 1; }
  .kategorie__picture img { transition: scale .9s cubic-bezier(.22, 1, .36, 1); }
  .kategorie:hover .kategorie__picture img { scale: 1.09; }
  .kategorie__picture { position: relative; }
  .kategorie__picture::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 26rem; height: 26rem; margin: -13rem 0 0 -13rem; border-radius: 50%;
    pointer-events: none; opacity: 0; background: radial-gradient(closest-side, var(--fx-licht-foto), rgba(255, 238, 206, 0));
    transform: translate(var(--fx-dx, 0px), var(--fx-dy, 0px)); transition: opacity .8s var(--fx-ease);
  }
  .kategorie:hover .kategorie__picture::after { opacity: 1; }
  .kategorie__rahmen.fx-aktiv .kategorie__picture::after { will-change: transform; }

  /* Orte-Bögen, Werte-Band, Liste, CTA-Tafel: reine Info-Flächen – sie heben sich NICHT (wirkten sonst klickbar);
     nur Kerzenlicht folgt dem Zeiger, Haarlinien leuchten auf */
  .ort, .werte__band, .liste__tafel, .cta-band__tafel { position: relative; isolation: isolate; overflow: hidden; transition: border-color .5s ease; }
  .ort::before, .werte__band::before, .liste__tafel::before, .cta-band__tafel::after {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 30rem; height: 30rem; margin: -15rem 0 0 -15rem;
    border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, var(--fx-licht), rgba(214, 180, 118, 0));
    transform: translate(var(--fx-dx, 0px), var(--fx-dy, 0px)); transition: opacity .8s var(--fx-ease);
  }
  .ort::before { width: 22rem; height: 22rem; margin: -11rem 0 0 -11rem; }
  .ort:hover::before, .werte__band:hover::before, .liste__tafel:hover::before, .cta-band__tafel:hover::after { opacity: 1; }
  .fx-aktiv::before, .cta-band__tafel.fx-aktiv::after { will-change: transform; }
  .ort:hover { border-color: var(--gold); }
  .ort::after { transition: border-color .5s ease; }
  .ort:hover::after { border-color: var(--linie); }
  .werte__band:hover, .liste__tafel:hover, .cta-band__tafel:hover { border-color: var(--gold); }
  .wert__ring { transition: border-color .5s ease; }
  .wert:hover .wert__ring { border-color: var(--gold); }

  /* Goldene Knöpfe: ein Glanz zieht beim Darüberfahren einmal durch */
  .knopf--primaer, .sa-form__knopf { position: relative; overflow: hidden; }
  .knopf--primaer::after, .sa-form__knopf::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 250, 236, 0), rgba(255, 250, 236, .24) 50%, rgba(255, 250, 236, 0));
    transform: translateX(-110%);
  }
  .knopf--primaer:hover::after, .sa-form__knopf:hover::after { transform: translateX(200%); transition: transform .8s var(--fx-ease-weich); }
}

/* Handy/Tablet hochkant: Bewegung kürzer und flacher */
@media (max-width: 47.99em) and (prefers-reduced-motion: no-preference) {
  .fx .fx-ein:not(.schritte__liste) { animation-name: fx-auf-klein; animation-duration: .6s; animation-delay: calc(var(--fx-i, 0) * 60ms); }
  .fx .schritte__liste.fx-ein .schritt { animation-name: fx-auf-klein; animation-duration: .6s; }
  @supports (animation-timeline: view()) {
    .rahmen picture img { scale: 1.045; animation-name: fx-tiefe-klein; }
  }
}
/* Touch (kein Hover): keine Foto-Verlagerung beim Scrollen – der Finger bewegt die Seite, das Foto bleibt ruhig im Rahmen */
@media (hover: none) {
  .rahmen picture img { animation: none; scale: none; translate: none; }
}
/* ==========================================================================
   Uhr + Münzen im Hero. 12.10.2026 abends (Nigel: „eine echte Uhr nehmen“): ECHTES Uhrenfoto (werkzeug/uhr_a.py) in
   einer runden, dunklen Vitrine – Goldring + zweite Haarlinie wie das Passepartout, Rand läuft weich ins Schwarz aus.
   Die Vitrine bleibt auch im hellen Modus dunkel (Foto unverändert, kein Nebel). Links Gold-, rechts Silbermünze
   (CSS-3D, echte Münzfotos), die sich ruhig drehen; Pause-Knopf (WCAG 2.2.2), ohne JS / reduzierte Bewegung: Stillstand.
   ========================================================================== */
.hero__schau { position: relative; width: clamp(18rem, 11rem + 22vw, 32rem); max-width: 100%; margin: 0 auto 1.6rem; }
.schau {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); align-items: center;
  gap: clamp(.5rem, .2rem + 1.4vw, 1.25rem); padding-block: .5rem;
}
.uhrfoto {
  position: relative; grid-column: 2; grid-row: 1; aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: #0A0A0B; border: 1px solid rgba(201, 169, 106, .5);
  outline: 1px solid var(--linie-leise); outline-offset: clamp(.3rem, .2rem + .4vw, .5rem);
  box-shadow: 0 0 2.6rem rgba(201, 169, 106, .10);
}
.uhrfoto__picture, .uhrfoto__bild { display: block; width: 100%; height: 100%; }
.uhrfoto__bild { object-fit: cover; }
.uhrfoto::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle, rgba(10, 10, 11, 0) 64%, rgba(10, 10, 11, .38) 85%, #0A0A0B 100%);
}
html[data-thema="hell"] .uhrfoto { border-color: #8A6D32; box-shadow: 0 .75rem 1.75rem -1.1rem rgba(70, 52, 20, .45); }

/* Echte Fotoseiten + geschlossener Zylindermantel (64 Tangentenflächen).
   cqw bezieht sich nur auf die jeweilige Münze: Dicke und Riffelung skalieren auch mobil.
   100 * tan(pi/64) = 4,913 %; 4,96 % überlappt die Nähte minimal gegen Subpixel-Spalten. */
.muenze { position: relative; width: 84%; justify-self: center; translate: 0 22%; aspect-ratio: 1; perspective: 40rem; container-type: inline-size; }
.muenze--gold {
  grid-column: 1; grid-row: 1; --ruhe: 28deg; --dauer: 14s; --versatz: 0s; --dicke: 7.1cqw;
  --metall: #B18A42; --rille-hell: #E1BD70; --rille-dunkel: #725323;
}
.muenze--silber {
  grid-column: 3; grid-row: 1; --ruhe: -28deg; --dauer: 17s; --versatz: -5s; --dicke: 6.3cqw;
  --metall: #8D9090; --rille-hell: #D7D8D2; --rille-dunkel: #535758;
}
.muenze__koerper { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(var(--ruhe)); }
.muenze__rand {
  position: absolute; left: 50%; top: 50%; width: 4.96cqw; height: var(--dicke);
  transform: translate(-50%, -50%) rotateZ(var(--winkel)) translateY(-50cqw) rotateX(90deg);
  backface-visibility: hidden;
  background:
    linear-gradient(0deg, rgba(0,0,0,.24), transparent 22% 76%, rgba(255,255,255,.3)),
    repeating-linear-gradient(90deg, var(--rille-dunkel) 0 12%, var(--metall) 24% 34%, var(--rille-hell) 44% 50%);
}
.muenze__rand:nth-child(1) { --winkel: 0deg; }
.muenze__rand:nth-child(2) { --winkel: 5.625deg; }
.muenze__rand:nth-child(3) { --winkel: 11.25deg; }
.muenze__rand:nth-child(4) { --winkel: 16.875deg; }
.muenze__rand:nth-child(5) { --winkel: 22.5deg; }
.muenze__rand:nth-child(6) { --winkel: 28.125deg; }
.muenze__rand:nth-child(7) { --winkel: 33.75deg; }
.muenze__rand:nth-child(8) { --winkel: 39.375deg; }
.muenze__rand:nth-child(9) { --winkel: 45deg; }
.muenze__rand:nth-child(10) { --winkel: 50.625deg; }
.muenze__rand:nth-child(11) { --winkel: 56.25deg; }
.muenze__rand:nth-child(12) { --winkel: 61.875deg; }
.muenze__rand:nth-child(13) { --winkel: 67.5deg; }
.muenze__rand:nth-child(14) { --winkel: 73.125deg; }
.muenze__rand:nth-child(15) { --winkel: 78.75deg; }
.muenze__rand:nth-child(16) { --winkel: 84.375deg; }
.muenze__rand:nth-child(17) { --winkel: 90deg; }
.muenze__rand:nth-child(18) { --winkel: 95.625deg; }
.muenze__rand:nth-child(19) { --winkel: 101.25deg; }
.muenze__rand:nth-child(20) { --winkel: 106.875deg; }
.muenze__rand:nth-child(21) { --winkel: 112.5deg; }
.muenze__rand:nth-child(22) { --winkel: 118.125deg; }
.muenze__rand:nth-child(23) { --winkel: 123.75deg; }
.muenze__rand:nth-child(24) { --winkel: 129.375deg; }
.muenze__rand:nth-child(25) { --winkel: 135deg; }
.muenze__rand:nth-child(26) { --winkel: 140.625deg; }
.muenze__rand:nth-child(27) { --winkel: 146.25deg; }
.muenze__rand:nth-child(28) { --winkel: 151.875deg; }
.muenze__rand:nth-child(29) { --winkel: 157.5deg; }
.muenze__rand:nth-child(30) { --winkel: 163.125deg; }
.muenze__rand:nth-child(31) { --winkel: 168.75deg; }
.muenze__rand:nth-child(32) { --winkel: 174.375deg; }
.muenze__rand:nth-child(33) { --winkel: 180deg; }
.muenze__rand:nth-child(34) { --winkel: 185.625deg; }
.muenze__rand:nth-child(35) { --winkel: 191.25deg; }
.muenze__rand:nth-child(36) { --winkel: 196.875deg; }
.muenze__rand:nth-child(37) { --winkel: 202.5deg; }
.muenze__rand:nth-child(38) { --winkel: 208.125deg; }
.muenze__rand:nth-child(39) { --winkel: 213.75deg; }
.muenze__rand:nth-child(40) { --winkel: 219.375deg; }
.muenze__rand:nth-child(41) { --winkel: 225deg; }
.muenze__rand:nth-child(42) { --winkel: 230.625deg; }
.muenze__rand:nth-child(43) { --winkel: 236.25deg; }
.muenze__rand:nth-child(44) { --winkel: 241.875deg; }
.muenze__rand:nth-child(45) { --winkel: 247.5deg; }
.muenze__rand:nth-child(46) { --winkel: 253.125deg; }
.muenze__rand:nth-child(47) { --winkel: 258.75deg; }
.muenze__rand:nth-child(48) { --winkel: 264.375deg; }
.muenze__rand:nth-child(49) { --winkel: 270deg; }
.muenze__rand:nth-child(50) { --winkel: 275.625deg; }
.muenze__rand:nth-child(51) { --winkel: 281.25deg; }
.muenze__rand:nth-child(52) { --winkel: 286.875deg; }
.muenze__rand:nth-child(53) { --winkel: 292.5deg; }
.muenze__rand:nth-child(54) { --winkel: 298.125deg; }
.muenze__rand:nth-child(55) { --winkel: 303.75deg; }
.muenze__rand:nth-child(56) { --winkel: 309.375deg; }
.muenze__rand:nth-child(57) { --winkel: 315deg; }
.muenze__rand:nth-child(58) { --winkel: 320.625deg; }
.muenze__rand:nth-child(59) { --winkel: 326.25deg; }
.muenze__rand:nth-child(60) { --winkel: 331.875deg; }
.muenze__rand:nth-child(61) { --winkel: 337.5deg; }
.muenze__rand:nth-child(62) { --winkel: 343.125deg; }
.muenze__rand:nth-child(63) { --winkel: 348.75deg; }
.muenze__rand:nth-child(64) { --winkel: 354.375deg; }
.muenze__seite {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--metall);
  box-shadow: 0 0 0 .2px var(--metall);
}
.muenze__seite--vorn { transform: translateZ(calc(var(--dicke) / 2)); }
.muenze__seite--hinten { transform: rotateY(180deg) translateZ(calc(var(--dicke) / 2)); }
.muenze__seite img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* US-Münzprägung: Kehrprägung; bei Drehung um die senkrechte Achse steht der Revers kopf.
   Echte zweite Aufnahme, niemals gespiegelte Schrift. */
.muenze__seite--hinten img { transform: rotate(180deg); }
/* Glanz: wandert über die Seite, die gerade zum Betrachter zeigt (synchron zur Drehung) */
.muenze__seite::after {
  content: ""; position: absolute; inset: -15%; pointer-events: none; opacity: 0; transform: translateX(-70%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 250, 235, .18) 50%, rgba(255, 255, 255, 0) 62%);
}
html[data-thema="hell"] .muenze::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -10%; height: 12%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 52, 20, .3), rgba(70, 52, 20, 0));
}
/* Pause-Knopf (nur mit JS sichtbar, bei reduzierter Bewegung nie) */
.schau__pause {
  position: absolute; top: 0; right: 0; display: none; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--linie-feld); border-radius: 50%; background: transparent; color: var(--gold); cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.schau--bereit + .schau__pause:not([hidden]) { display: inline-grid; }
.schau__pause:hover { border-color: var(--gold); color: var(--gold-hell); }
.schau__pause-icon { width: .95rem; height: .95rem; }
.schau__pause-icon--weiter, .schau__pause[aria-pressed="true"] .schau__pause-icon--halt { display: none; }
.schau__pause[aria-pressed="true"] .schau__pause-icon--weiter { display: block; }
@media (prefers-reduced-motion: reduce) { .schau__pause { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  .schau--bereit .muenze__koerper { animation: fx-muenze-dreh var(--dauer) linear var(--versatz) infinite; }
  .schau--bereit .muenze__seite--vorn::after { animation: fx-glanz-vorn var(--dauer) linear var(--versatz) infinite; }
  .schau--bereit .muenze__seite--hinten::after { animation: fx-glanz-hinten var(--dauer) linear var(--versatz) infinite; }
  @keyframes fx-muenze-dreh { from { transform: rotateX(8deg) rotateY(-180deg); } to { transform: rotateX(8deg) rotateY(180deg); } }
  @keyframes fx-glanz-vorn { 0%, 32% { opacity: 0; transform: translateX(-70%); } 44%, 56% { opacity: 1; } 68%, 100% { opacity: 0; transform: translateX(70%); } }
  @keyframes fx-glanz-hinten { 0% { opacity: 1; transform: translateX(0); } 18% { opacity: 0; transform: translateX(70%); } 82% { opacity: 0; transform: translateX(-70%); } 100% { opacity: 1; transform: translateX(0); } }
  .schau--ruht .muenze__koerper, .schau--ruht .muenze__seite::after { animation-play-state: paused; }
}

/* Druck: alles sichtbar und ruhig, auch wenn noch nicht durchgescrollt wurde (Codex-Review P2) */
@media print {
  .fx .fx-warte, .fx .fx-warte .schritt, .fx .fx-ein { opacity: 1 !important; animation: none !important; transform: none !important; }
  .fx .fx-warte::before, .fx .fx-warte .schritt::before { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   Einwilligung Browser-Speicher (12.10.2026) – teile/einwilligung.html, static/einwilligung.js.
   Kleine Vitrinen-Karte unten: Anthrazit, Goldrahmen + innere Haarlinie (Passepartout), Rauten am Titel,
   drei GLEICHWERTIGE Outline-Knöpfe (Ablehnen so leicht wie Zustimmen). Nicht modal, fixed → kein Layout-Sprung;
   solange offen, bekommt die Seite unten Platz (--einwilligung-hoehe aus dem ResizeObserver).
   ========================================================================== */
.einwilligung {
  position: fixed; z-index: 60; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom));
  width: min(44rem, calc(100% - 1.5rem)); max-height: min(calc(100dvh - 1.5rem), 80dvh); translate: -50% 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--anthrazit); color: var(--text); border: 1px solid var(--linie);
  box-shadow: 0 1.6rem 3rem -1.2rem rgba(0, 0, 0, .9), 0 0 2.5rem -.75rem rgba(201, 169, 106, .14);
}
html.einwilligung-offen body { padding-bottom: calc(var(--einwilligung-hoehe, 0px) + .75rem); }
html.einwilligung-offen { scroll-padding-bottom: calc(var(--einwilligung-hoehe, 0px) + 1.5rem); }
.einwilligung__innen { position: relative; padding: 1.35rem clamp(1rem, .55rem + 2vw, 2rem) 1rem; text-align: center; }
.einwilligung__innen::before { content: ""; position: absolute; inset: .4rem; border: 1px solid var(--linie-leise); pointer-events: none; }
.einwilligung__titel {
  display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 0 .7rem;
  font-size: 1.125rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--elfenbein);
}
.einwilligung__titel::before, .einwilligung__titel::after { content: ""; flex: none; width: .36rem; height: .36rem; background: var(--gold); transform: rotate(45deg); }
.einwilligung__titel:focus:not(:focus-visible) { outline: none; }
.einwilligung__text p { max-width: 36rem; margin: 0 auto .3rem; font-size: .9375rem; font-weight: 400; line-height: 1.55; color: var(--text-leise); }
.einwilligung__knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 0; }
.einwilligung__knopf {
  width: 100%; min-height: 2.75rem; padding: .55rem .6rem .55rem calc(.6rem + .16em);
  font-size: .75rem; letter-spacing: .16em; background: var(--anthrazit);
}
.einwilligung__links { display: flex; justify-content: center; align-items: center; gap: .8rem; margin: .7rem 0 0; font-size: .8125rem; }
.einwilligung__links a { display: inline-block; padding-block: .3rem; }
.einwilligung__trenner { width: .3rem; height: .3rem; background: var(--gold); transform: rotate(45deg); opacity: .7; }
/* Einstellungen: je Kategorie Name · Zustand, darunter die Beschreibung */
.einwilligung__details { margin: 1rem 0 0; text-align: left; border-top: 1px solid var(--linie-leise); }
.einwilligung__kategorie { padding: .8rem 0; border-bottom: 1px solid var(--linie-leise); }
.einwilligung__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; margin: 0; }
.einwilligung__name { font-size: .8125rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--elfenbein); }
label.einwilligung__name { cursor: pointer; flex: 1; padding-block: .6rem; }
.einwilligung__immer { font-size: .75rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.einwilligung__beschreibung { margin: 0; font-size: .875rem; font-weight: 400; line-height: 1.55; color: var(--text-leise); }
.einwilligung__speichern { margin: .75rem 0 0; }
/* Schalter (role="switch"): Stellung UND Farbe zeigen den Zustand; Rahmen ≥ 3:1 (WCAG 1.4.11) */
.einwilligung__schalter {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 3rem; height: 1.625rem; margin: 0;
  border: 1px solid var(--linie-feld); border-radius: 1rem; background: var(--nacht); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.einwilligung__schalter::before {
  content: ""; position: absolute; top: 50%; left: .22rem; width: 1.05rem; height: 1.05rem; margin-top: -.525rem;
  border-radius: 50%; background: var(--text-leise); transition: translate .2s ease, background-color .2s ease;
}
.einwilligung__schalter:checked { background: var(--gold-flaeche); border-color: var(--gold); }
.einwilligung__schalter:checked::before { translate: 1.3rem 0; background: var(--gold); }
/* Handy: kompakt (deckt höchstens rund ein Drittel des ersten Bildschirms), die drei Knöpfe bleiben gleich groß in
   EINER Zeile – Beschriftung dafür in normaler Schreibweise statt gesperrter Versalien */
@media (max-width: 35.99em) {
  .einwilligung { width: calc(100% - 1rem); bottom: max(.5rem, env(safe-area-inset-bottom)); max-height: min(calc(100dvh - 1rem), 80dvh); }
  .einwilligung__innen { padding: .95rem .8rem .55rem; }
  .einwilligung__innen::before { inset: .3rem; }
  .einwilligung__titel { margin-bottom: .45rem; font-size: 1rem; letter-spacing: .16em; gap: .55rem; }
  .einwilligung__text p { margin-bottom: .15rem; font-size: .875rem; line-height: 1.43; }
  .einwilligung__knoepfe { gap: .4rem; margin-top: .75rem; }
  .einwilligung__knopf { padding: .35rem .2rem; font-size: .75rem; line-height: 1.25; letter-spacing: .02em; text-transform: none; font-weight: 500; text-wrap: balance; }
  .einwilligung__links { margin-top: .35rem; }
  .einwilligung__details { margin-top: .7rem; }
  .einwilligung__kategorie { padding: .5rem 0 .6rem; }
  .einwilligung__beschreibung { font-size: .8125rem; line-height: 1.5; }
  .einwilligung__speichern { margin-top: .7rem; }
}
@media (max-width: 23.99em) {
  .einwilligung__titel { letter-spacing: .12em; }
}
@media (prefers-reduced-motion: no-preference) {
  .einwilligung:not([hidden]) { animation: ew-ein .45s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes ew-ein { from { opacity: 0; translate: -50% .75rem; } }
}
html[data-thema="hell"] .einwilligung { box-shadow: 0 1.4rem 2.6rem -1.1rem rgba(70, 52, 20, .4), 0 0 0 1px rgba(125, 99, 45, .06); }
html[data-thema="hell"] .einwilligung__knopf:hover { background: rgba(255, 255, 255, .6); }
.knopf[hidden] { display: none; }

/* Tabelle „Einträge im Browser-Speicher“ (Datenschutz Abschnitt 6); schmal als gestapelte Karten */
.recht__tabelle { margin: 1.25rem 0 1.5rem; }
.recht__tabelle table { width: 100%; border-collapse: collapse; font-size: .9375rem; font-weight: 400; line-height: 1.55; }
.recht__tabelle caption { text-align: left; padding-bottom: .6rem; font-size: .8125rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.recht__tabelle th, .recht__tabelle td { text-align: left; vertical-align: top; padding: .75rem .9rem .75rem 0; border-top: 1px solid var(--linie-leise); }
.recht__tabelle thead th { padding-top: 0; border-top: 0; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise); }
.recht__tabelle tbody th { font-weight: 500; color: var(--elfenbein); white-space: nowrap; }
.recht__kategorie { display: block; margin-top: .15rem; font-size: .6875rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.recht__einwilligung { margin: 1rem 0 0; }
@media (max-width: 47.99em) {
  .recht__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .recht__tabelle table, .recht__tabelle caption, .recht__tabelle tbody, .recht__tabelle tr, .recht__tabelle th, .recht__tabelle td { display: block; }
  .recht__tabelle tr { padding: .85rem 0; border-top: 1px solid var(--linie-leise); }
  .recht__tabelle th, .recht__tabelle td { padding: 0; border: 0; white-space: normal; }
  .recht__tabelle td::before {
    content: attr(data-label); display: block; margin-top: .55rem; font-size: .6875rem; font-weight: 400;
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  }
}
@media print {
  .einwilligung { display: none !important; }
  html.einwilligung-offen body { padding-bottom: 0; }
}

/* generiert aus src/assets/bilder/bilder.json (Fokus + Platzhalterfarbe) */
.bild--a-antik-silberschatulle{background-color:#5c4e40}
.bild--a-antik-silberschatulle img{object-position:45% 50%}
.bild--a-detail-uhrwerk{background-color:#252218}
.bild--a-detail-uhrwerk img{object-position:50% 45%}
.bild--a-galerie-armbanduhr{background-color:#0c0c0c}
.bild--a-galerie-armbanduhr img{object-position:50% 50%}
.bild--a-galerie-blumenring{background-color:#1b1b19}
.bild--a-galerie-blumenring img{object-position:50% 50%}
.bild--a-galerie-engel-kerzen{background-color:#000000}
.bild--a-galerie-engel-kerzen img{object-position:50% 50%}
.bild--a-galerie-kompass{background-color:#453618}
.bild--a-galerie-kompass img{object-position:45% 55%}
.bild--a-galerie-taschenuhr-kette{background-color:#403f36}
.bild--a-galerie-taschenuhr-kette img{object-position:50% 55%}
.bild--a-galerie-tropfenring{background-color:#16181b}
.bild--a-galerie-tropfenring img{object-position:50% 50%}
.bild--a-hero-taschenuhr{background-color:#000000}
.bild--a-hero-taschenuhr img{object-position:62% 55%}
.bild--a-schmuck-goldreif{background-color:#000000}
.bild--a-schmuck-goldreif img{object-position:50% 45%}
.bild--a-uhren-skelett-taschenuhr{background-color:#332715}
.bild--a-uhren-skelett-taschenuhr img{object-position:50% 50%}
.bild--a-werkstatt-haende{background-color:#12130e}
.bild--a-werkstatt-haende img{object-position:55% 55%}
.bild--b-antik-kerzenleuchter{background-color:#d5d5c3}
.bild--b-antik-kerzenleuchter img{object-position:50% 55%}
.bild--b-detail-ringe-stoff{background-color:#e1cbc6}
.bild--b-detail-ringe-stoff img{object-position:50% 50%}
.bild--b-galerie-holzschale{background-color:#a76c23}
.bild--b-galerie-holzschale img{object-position:50% 50%}
.bild--b-galerie-perlen{background-color:#d0cdc5}
.bild--b-galerie-perlen img{object-position:60% 45%}
.bild--b-galerie-saphirring{background-color:#c2cbd2}
.bild--b-galerie-saphirring img{object-position:50% 50%}
.bild--b-galerie-schatulle{background-color:#b4b2af}
.bild--b-galerie-schatulle img{object-position:50% 45%}
.bild--b-hero-ringe-kiesel{background-color:#e7e2d8}
.bild--b-hero-ringe-kiesel img{object-position:50% 55%}
.bild--b-schmuck-ring-rose{background-color:#aa8966}
.bild--b-schmuck-ring-rose img{object-position:50% 50%}
.bild--b-uhren-taschenuhr-offen{background-color:#b9a273}
.bild--b-uhren-taschenuhr-offen img{object-position:45% 55%}
.bild--b-werkstatt-zahnraeder{background-color:#878577}
.bild--b-werkstatt-zahnraeder img{object-position:50% 50%}