/* ============================================================================
   stil.css — Swiss Gold Exchange, Goldankauf Basel
   Neubau vom 23.09.2026, abends: der Branchenstandard auf Juwelier-Niveau

   Joel hat auf der Entscheidungsseite bewusst den Standard gewaehlt, nicht ein
   Experiment. Massstab: alpen-energie.ch (vom Kunden genannt), goldboerse.ch
   (der Nachbar) und Bucherer / Beyer (Schweizer Juweliere).

   DIE REGELN:
   1. Weiss und Gold. Reinweiss ist der Grund, Perlgrau der zweite Grund.
      Gold ist die eine Aktionsfarbe: jeder Hauptknopf ist gold gefuellt.
   2. Dunkel ist nie Schwarz, sondern warmes Etui-Braun, und nur im Kursband
      oben und im Fuss. Keine schwarzen Bloecke mitten auf der Seite.
   3. Bilder tragen die Seite, Text ist kurz. Farbfotos, hell, das Gold glaenzt.
   4. Gold ist nie Schrift auf Weiss in seinem hellen Ton (2.4:1). Goldschrift
      steht in --gold-tief (5.3:1).

   ABGRENZUNG gegen goldboerse.ch (Schifflaende 3, zwoelf Minuten entfernt):
   dort Elfenbein, Bodoni, Goldverlauf-Knoepfe, kein Foto im Kopf. Hier
   Reinweiss, Montserrat, gold gefuellte Knoepfe ohne Verlauf, grosses Foto.
   ========================================================================== */

/* --- 1 · Schriften, selbst gehostet ------------------------------------- */

/* Montserrat traegt die Ueberschriften: eine geometrische Grotesk, ruhig und
   modern. Seit dem 25.09.2026 fein, in Gewicht 300 (Joel: "wie so Roboto
   Thin ... einfach duenner"). Die Datei ist die Latin-Variable von Google
   Fonts mit der ganzen Achse 100 bis 900 (am 25.09.2026 per Pruefsumme
   bestaetigt); bis dahin gab diese Regel nur 300 bis 700 frei, und es hiess
   irrtuemlich, duenner gehe nicht. SIL Open Font License, 38 KB. */
@font-face {
  font-family: 'Montserrat';
  src: url('schriften/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Hanken Grotesk traegt alles, was gelesen und bedient wird, und jede Zahl.
   Seit dem 23.09.2026 spaet (Joel mochte Atkinson nicht): eine klare, ruhige
   Grotesk mit normalen Ziffern und tabellarischen Zahlen fuer den Rechner.
   SIL Open Font License, Latin-Subset, 35 KB, selbst gehostet. Auch hier
   enthaelt die Datei die ganze Achse 100 bis 900 (Pruefsumme gleich der
   Google-Fonts-Latin-Variable, 25.09.2026); freigegeben war nur 300 bis 800. */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('schriften/hanken-grotesk.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- 2 · Farben und Masse ----------------------------------------------- */

:root {
  /* Grund */
  --weiss: #FFFFFF;
  --perl: #F4F4F2;            /* kleine Flaechen: Reiter, Bildplatzhalter, Tabellenkopf */
  --perl-flaeche: #EAE9E5;    /* Grund der Wechselabschnitte, neutral, kein Creme.
                                 Joel, 23.09.2026: der Wechsel Weiss/Grau war beim
                                 Scrollen kaum sichtbar, #F4F4F2 war zu hell. */
  --gold-zart: #FAF5EA;       /* Ergebnisfeld im Rechner, Stuecktafeln */

  /* Schrift */
  --tinte: #1C1A17;           /* 17.4:1 auf Weiss, 15.8:1 auf Perlgrau */
  --grau: #5D5852;            /* Nebentext, 7.0:1 auf Weiss, 6.4:1 auf Perlgrau */

  /* Linien */
  --linie: #E6E2DC;           /* Trennlinie in einem Bauteil, Zierrat */
  --linie-kraeftig: #8F887F;  /* Rahmen von Bedienelementen, 3.5:1 (WCAG 1.4.11) */

  /* Gold */
  --gold: #C9A24D;            /* Knopfflaeche, Zierlinie, Symbol. Nie Schrift auf Weiss (2.4:1) */
  --gold-hover: #D4AF5F;
  --gold-tief: #8A6516;       /* Goldschrift auf Hell, Fokusring, 5.3:1 auf Weiss */
  --gold-hell: #E6C98A;       /* Gold auf Etui-Braun, 9.5:1 */
  --gold-kanaele: 201 162 77;
  --gold-blass: rgb(var(--gold-kanaele) / 0.38);

  /* Etui-Braun: das einzige Dunkel, nur Kursband und Fuss */
  --leder: #2A2420;
  --auf-leder: #EFEAE3;       /* 12.8:1 */
  --grau-auf-leder: #B9B0A5;  /* 7.2:1 */

  --gruen-punkt: #1E7A3C;     /* nur der Live-Punkt des Kursbands, 5.4:1 auf Weiss */

  /* WhatsApp-Knoepfe: gedaempftes Rolex-Gruen, leicht durchscheinend (Abschnitt 5) */
  --wa-gruen: rgb(12 84 56 / 0.92);
  --wa-gruen-hover: rgb(16 100 67 / 0.94);
  --wa-rand: #0B3F2A;         /* Umrandung, dunkler als die Fuellung (Joel, 25.09.2026 spaet); vorher kein Rand, davor hellgruen */
  --auf-gruen: #F3EEE6;       /* auch fuer die Telefon-Knoepfe (Abschnitt 5) */

  /* Schriftstapel */
  --titel: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --lesen: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --zahlen: var(--lesen);

  /* Groessen. Am 25.09.2026 feiner gemacht (Joel: Titel und die Saetze
     darunter "etwas zu gross ... das muss ein bisschen feiner werden"):
     h1 und h2 rund ein Achtel kleiner, die Lede hoechstens 19 px statt 21 px,
     aber nie unter 18 px (die 18-px-Regel gilt weiter). */
  --fs-h1: clamp(2rem, 1.45rem + 2.2vw, 3.125rem);
  --fs-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --fs-lede: clamp(1.125rem, 1.09rem + 0.15vw, 1.1875rem);

  /* Gewichte: fein fuer die grossen Titel und die Saetze darunter, mittel
     fuer kleine Titel (Karten, Schritte, Kacheln), damit sie am Telefon
     nicht zerfasern. */
  --gewicht-titel: 300;
  --gewicht-titel-klein: 500;
  --gewicht-lede: 300;
  --fs-text: 1.125rem;        /* 18 px, Zielgruppe aelter */
  --fs-klein: 1rem;
  --fs-marke: 0.75rem;

  /* Abstaende */
  --takt: clamp(4rem, 2.6rem + 5vw, 7.5rem);
  --takt-klein: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  --rand: clamp(1rem, 0.5rem + 2.4vw, 3rem);
  --breite: 1280px;
  --spalt: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);

  /* Form: Bilder und Karten 20 px, Knoepfe als Pille, Eingaben 14 px */
  --r-karte: 20px;
  --r-feld: 14px;
  --r-pille: 999px;
  --r-knopf: 10px;            /* Knoepfe: leicht abgerundet, keine Pille (Joel) */

  /* Schatten: warm getoent, nur an Dingen, die ueber etwas liegen */
  --schatten: 0 1px 2px rgb(42 36 32 / 0.05), 0 28px 64px -30px rgb(42 36 32 / 0.32);
  --schatten-sanft: 0 14px 34px -22px rgb(42 36 32 / 0.28);

  /* Feste Leisten */
  --h-ticker: 40px;
  --h-kopf: 76px;
  --h-kopf-klein: 64px;
  --h-kopf-oben: 76px;        /* Hoehe der Kopfleiste ganz oben; unter 80rem 68px (Abschnitt 7) */
  --h-leiste: 64px;

  /* Ebenen */
  --z-ueberspringen: 100;
  --z-ticker: 90;
  --z-kopf: 80;
  --z-summe: 70;
  --z-leiste: 60;

  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --- 3 · Grundlagen ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
  accent-color: var(--gold-tief);
  scroll-padding-top: calc(var(--h-kopf) + 12px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding-block-end: var(--h-ticker);
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--lesen);
  font-size: var(--fs-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 3px; border-radius: 6px; }

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

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

.ueberspringen {
  position: fixed; left: 0.5rem; top: -4rem; z-index: var(--z-ueberspringen);
  background: var(--tinte); color: var(--weiss);
  padding: 0.7rem 1.1rem; border-radius: var(--r-knopf);
  font-weight: 700; font-size: 0.9375rem; text-decoration: none;
  transition: top 0.18s ease;
}
.ueberspringen:focus { top: 0.5rem; }

h1, h2, h3 {
  font-family: var(--titel);
  font-weight: var(--gewicht-titel);
  line-height: 1.12;
  letter-spacing: -0.015em;   /* feine Striche brauchen etwas mehr Luft als fette */
  text-wrap: balance;
  margin: 0;
  color: var(--tinte);
  /* "Datenschutzerklaerung" ist am Telefon breiter als der Bildschirm.
     Getrennt werden nur lange Woerter: am 25.09.2026 stand "Uh-ren" im
     Shoptitel. */
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--gewicht-titel-klein); letter-spacing: -0.01em; line-height: 1.25; }

p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--tinte); text-underline-offset: 0.22em; text-decoration-thickness: 1px; text-decoration-color: var(--gold); }
a:hover { text-decoration-color: var(--tinte); }
strong { font-weight: 800; }

.zahl, .zahl * { font-family: var(--zahlen); font-variant-numeric: tabular-nums lining-nums; }
/* In Ueberschriften bleibt die Ueberschriftenschrift, auch fuer Zahlen. */
h1 .zahl, h2 .zahl, h3 .zahl { font-family: inherit; }

/* Eine Feldbeschriftung. Nie als Kicker ueber einer Ueberschrift. */
.marke {
  display: block;
  font-family: var(--lesen); font-size: var(--fs-marke); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 0.55em;
}

/* --- 4 · Huelle und Abschnitte ----------------------------------------- */

.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

section { padding-block: var(--takt); }
section.eng { padding-block: var(--takt-klein); }
.perl { background: var(--perl-flaeche); }
/* Weiche Uebergaenge (Joel): ein grauer Abschnitt beginnt und endet nicht mit
   einer harten Kante, sondern laeuft ueber 140 px aus dem Weiss heraus und
   wieder hinein. Die Kante zwischen zwei Abschnitten verschwindet. */
section.perl {
  background: linear-gradient(to bottom,
    var(--weiss) 0, var(--perl-flaeche) clamp(80px, 12vw, 160px),
    var(--perl-flaeche) calc(100% - clamp(80px, 12vw, 160px)), var(--weiss) 100%);
}

/* Kopf eines Abschnitts: Ueberschrift und hoechstens ein kurzer Satz. */
.titel { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem); max-width: 46rem; }
.titel h2 + p { margin-top: 0.9rem; color: var(--grau); font-size: var(--fs-lede); font-weight: var(--gewicht-lede); line-height: 1.5; }
/* Auch der erste Satz unter einer Ueberschrift in Bild-Text-Paaren und bei
   den Fragen ist eine Lede: fein wie die anderen. */
.paar__wort > h2 + p, .fragen-block__wort > h2 + p { font-weight: var(--gewicht-lede); }
.titel--zeile {
  max-width: none; display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between; gap: 1rem 2rem;
}

/* --- 5 · Handlungen ----------------------------------------------------- */

.taten { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Kein overflow: hidden mehr (25.09.2026): das Randlicht (Abschnitt 28a)
   leuchtet ueber den Rand hinaus und wuerde sonst abgeschnitten. Der
   Glanzstreifen bleibt dafuer selbst in der Knopfform, siehe unten. */
.tat {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 54px; padding: 0.8rem 1.6rem;
  background: var(--gold); color: var(--tinte);
  border: 1px solid var(--gold); border-radius: var(--r-knopf);
  font-family: var(--lesen); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.01em;
  line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.tat svg { width: 20px; height: 20px; flex: 0 0 auto; }
.tat:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.tat:active { transform: translateY(1px); }

/* DER GLANZSTREIFEN. Ein heller Streifen zieht beim Zeigen einmal schraeg
   ueber den Goldknopf, wie Licht ueber poliertes Metall. Seit dem 25.09.2026
   wandert nicht mehr die Flaeche, sondern das Bild darin: die Flaeche bleibt
   in der Knopfform (border-radius: inherit) und braucht kein Abschneiden.
   Das Bild ist dreimal so breit wie der Knopf, der Streifen liegt in seiner
   Mitte; bei 100 % steht er links draussen, bei 0 % rechts draussen. */
.tat::after, .glanz::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 43%, rgb(255 255 255 / 0.55) 49%, rgb(255 255 255 / 0.12) 52%, transparent 57%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  transition: background-position 0.9s var(--kurve);
}
.tat:hover::after, .tat:focus-visible::after,
a:hover .glanz::after, a:focus-visible .glanz::after { background-position: 0 0; }

/* DER SCHATTEN, DER DEM MAUSZEIGER FOLGT (Joel). Jeder Knopf traegt einen
   leisen Schatten; beim Zeigen wird er tiefer und wandert zur Seite, auf der
   der Zeiger steht. bewegung.js setzt dafuer --sx und --sy (je -1 bis 1). */
.tat, .rechner__chip, .rechner__sammeln, .filter button, .korb-knopf, .menue-knopf {
  box-shadow: calc(var(--sx, 0) * 3px) calc(3px + var(--sy, 0) * 3px) 10px -5px rgb(42 36 32 / 0.22);
}
.tat:hover, .rechner__chip:hover, .rechner__sammeln:hover:not(:disabled), .filter button:hover, .korb-knopf:hover, .menue-knopf:hover {
  box-shadow: calc(var(--sx, 0) * 9px) calc(8px + var(--sy, 0) * 9px) 22px -8px rgb(42 36 32 / 0.34);
}
.rechner__chip, .rechner__sammeln, .filter button, .korb-knopf, .menue-knopf { transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease; }

.tat--still {
  background: transparent; color: var(--tinte);
  border-color: var(--linie-kraeftig);
}
.tat--still::after { content: none; }
.tat--still:hover { background: var(--perl); border-color: var(--tinte); }

/* Am Telefon stehen Knoepfe untereinander und gleich breit. */
@media (max-width: 30rem) {
  .taten { flex-direction: column; align-items: stretch; }
  .taten > .tat { width: 100%; }
}

/* WHATSAPP-KNOEPFE (Kundenwunsch): ueberall mit dem WhatsApp-Zeichen.
   Seit dem 25.09.2026 spaet in gedaempftem ROLEX-GRUEN (Joel, nach dem
   Zeigezustand ueber dem dunklen Film: "so schoen in diesem Rolex-Gruen ...
   nicht volle Saettigung, leicht transparent"). Die Markenfarbe liegt um
   #006039; hier etwas weicher und zu 92 % deckend: auf Weiss satt, ueber dem
   dunklen Film noch tiefer. Helle Schrift, das Zeichen im Original-WhatsApp-
   Gruen #25D366. Umrandung 2 px in einem tieferen Waldgruen #0B3F2A, dunkler
   als die Fuellung (Joel, gleicher Abend; ein hellgruener Rand stoerte vorher
   neben dem Goldglanz, danach war eine Weile gar keiner). Das Randlicht
   laeuft auf dieser Umrandung. Gemessen auf Weiss (Mischton #1F6248): Schrift 7.2:1, Zeichen 3.6:1,
   Zeigezustand 6.3:1; die Flaeche selbst hebt sich mit 7:1 vom Weiss ab.
   Vorher weiss mit gruenem Rand. Kein Glanzstreifen: der gehoert dem Gold. */
.tat--wa {
  background: var(--wa-gruen); color: var(--auf-gruen);
  border: 2px solid var(--wa-rand);
}
.tat--wa::after { content: none; }
.tat--wa:hover { background: var(--wa-gruen-hover); }
.tat--wa .wa-zeichen { color: #25D366; width: 22px; height: 22px; }
.wa-zeichen { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; color: #25D366; margin-right: 0.35em; }
.tat .wa-zeichen { margin-right: 0; }

/* TELEFON-KNOEPFE (Joel, 25.09.2026 spaet): im selben Rolex-Gruen wie
   WhatsApp, "alle Buttons, wo Telefonnummer das Thema ist, wie auch
   WhatsApp, in diesem schoenen Gruen". Gruen heisst auf der ganzen Seite
   Kontakt. Helle Schrift, kein Rand, Hoerer-Symbol in der Schriftfarbe.
   (Ein Versuch in Mokka mit Goldrand vom selben Abend gefiel ihm nicht.)
   Gilt fuer jeden Knopf mit tel:-Adresse und fuer "Anrufen" in der
   Kontaktleiste. Das Symbol kommt per ::before, nicht als Bild im HTML: auf
   mehreren Seiten schreibt inhalt.js die Nummer als textContent direkt in
   den Knopf und wuerde ein Kind loeschen. Wo schon ein Symbol steht
   (Startkopf), bleibt es beim einen. Kontraste wie beim WhatsApp-Knopf. */
a.tat[href^="tel:"], .leiste a[href^="tel:"] {
  background: var(--wa-gruen); color: var(--auf-gruen);
  border: 2px solid var(--wa-rand);
}
a.tat[href^="tel:"]:hover, .leiste a[href^="tel:"]:hover { background: var(--wa-gruen-hover); border-color: var(--wa-rand); }
a.tat[href^="tel:"] svg, .leiste a[href^="tel:"] svg { color: var(--auf-gruen); }
a.tat[href^="tel:"]:not(:has(svg))::before {
  content: ''; width: 20px; height: 20px; flex: 0 0 auto;
  background: var(--auf-gruen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M6.6 3h3l1.5 3.8-2 1.3a12 12 0 0 0 5.8 5.8l1.3-2 3.8 1.5v3a1.8 1.8 0 0 1-2 1.8A16.5 16.5 0 0 1 4.8 5a1.8 1.8 0 0 1 1.8-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M6.6 3h3l1.5 3.8-2 1.3a12 12 0 0 0 5.8 5.8l1.3-2 3.8 1.5v3a1.8 1.8 0 0 1-2 1.8A16.5 16.5 0 0 1 4.8 5a1.8 1.8 0 0 1 1.8-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tat--klein { min-height: 44px; padding: 0.55rem 1.15rem; font-size: 0.9375rem; }
.tat[disabled], .tat[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }

/* Ein Textverweis mit Pfeil, fuer "Mehr erfahren". */
.pfeil {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; font-size: 1rem; text-decoration: none; color: var(--tinte);
}
.pfeil::after {
  content: ''; width: 18px; height: 10px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%238A6516' stroke-width='1.6'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.3s var(--kurve);
}
.pfeil:hover::after, a:hover .pfeil::after { transform: translateX(4px); }

/* --- 6 · Das Kursband: die erste Zeile jeder Seite ---------------------- */

/* BOERSENKURSE, nicht die Ankaufspreise des Ladens. Die Trennung steht in
   der Beschriftung. Seit dem 23.09.2026 abends (Joel): ganz unten am
   Bildschirmrand, auf hellem Grund. Am Telefon sitzt es ueber der
   Kontaktleiste. */
.ticker {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-ticker);
  height: var(--h-ticker);
  background: var(--weiss); color: var(--grau);
  border-top: 1px solid var(--gold-blass);
  box-shadow: 0 -8px 24px -18px rgb(42 36 32 / 0.3);
  overflow: hidden;
  transition: transform 0.25s ease;
}
.ticker__zeile {
  display: flex; align-items: stretch; height: 100%;
  max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand);
}
.ticker__zelle {
  display: flex; align-items: center; gap: 0.5rem;
  padding-inline: clamp(0.75rem, 1.6vw, 1.5rem);
  border-inline-end: 1px solid var(--linie);
  white-space: nowrap; flex: 0 0 auto;
}
.ticker__zelle:first-child { padding-inline-start: 0; }
.ticker__zelle:last-child { border-inline-end: 0; margin-inline-start: auto; padding-inline-end: 0; }
.ticker__name { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); }
.ticker__zahl { font-family: var(--zahlen); font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; color: var(--gold-tief); }
.ticker__einheit { font-size: 0.6875rem; color: var(--grau); }

.ticker__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen-punkt); flex: 0 0 auto; animation: ticker-puls 2s ease-in-out infinite; }
@keyframes ticker-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* Ein gepflegter Wert ist kein Live-Wert: grauer Punkt, kein Pulsieren. */
.ticker[data-ticker-zustand='alt'] .ticker__punkt { background: var(--linie-kraeftig); animation: none; }

.ticker__zelle[data-gewechselt='ja'] .ticker__zahl { animation: ticker-wechsel 1.2s ease-out; }
@keyframes ticker-wechsel { 0% { color: var(--tinte); } 100% { color: var(--gold-tief); } }

/* Anhalteknopf nach WCAG 2.2.2, nur dort, wo sich etwas bewegt. */
.ticker__halt {
  display: none; width: 32px; height: 32px; padding: 0;
  align-items: center; justify-content: center;
  background: var(--weiss); border: 1px solid var(--linie-kraeftig); border-radius: 50%;
  color: var(--tinte); cursor: pointer; flex: 0 0 auto;
}
.ticker__halt svg { width: 12px; height: 12px; }
.ticker__halt .ticker__halt-ruht { display: none; }
.ticker[data-ticker-bewegung='aus'] .ticker__halt .ticker__halt-laeuft { display: none; }
.ticker[data-ticker-bewegung='aus'] .ticker__halt .ticker__halt-ruht { display: block; }

/* Unter 62rem passen die vier Metalle nicht nebeneinander: eine Laufbahn.
   Am Schreibtisch steht der Text still, nur die Ziffern wechseln. */
@media (max-width: 62rem) {
  .ticker__zeile { padding-inline: 0; overflow: hidden; }
  .ticker__bahn { display: flex; align-items: stretch; height: 100%; animation: ticker-lauf var(--ticker-dauer, 34s) linear infinite; will-change: transform; }
  .ticker[data-ticker-bewegung='aus'] .ticker__bahn { animation-play-state: paused; }
  .ticker__zeile:hover .ticker__bahn, .ticker__zeile:focus-within .ticker__bahn { animation-play-state: paused; }
  .ticker__halt { display: inline-flex; position: absolute; inset-block-start: 4px; inset-inline-end: 8px; z-index: 1; }
  .ticker__zelle:last-child { margin-inline-start: 0; padding-inline-end: clamp(0.75rem, 1.6vw, 1.5rem); }
}
@keyframes ticker-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__punkt, .ticker__zelle[data-gewechselt='ja'] .ticker__zahl { animation: none; }
  .ticker__bahn { animation: none !important; }
  .ticker__zeile { overflow-x: auto; scroll-snap-type: x mandatory; }
  .ticker__zelle { scroll-snap-align: start; }
  .ticker__halt { display: none !important; }
}
/* DURCHSICHTIG UEBER DUNKLEM GRUND (Joel, 25.09.2026). js/bewegung.js setzt
   html[data-kursband='dunkel'], solange eine dunkle Flaeche (der Guss auf der
   Startseite, das Kopfbild des Shops) hinter der Mitte des Bandes liegt;
   kommt heller Inhalt dahinter, ist das Band sofort wieder weiss. Dieselbe
   Regel wie bei der Kopfleiste: helle Schrift nur ueber Dunkel. Hinter dem
   Band liegt der Film bzw. das Kopfbild selbst, kein eigener Grund (Joel:
   "kein dunkler Hintergrund, sondern transparent"). Der untere Filmrand ist
   dunkler Stein, gemessen rgb(27..42): Schrift und Kurse ueber 9:1. Der
   Schatten der Schrift schuetzt die Zeile dort, wo Gold hell glaenzen kann. */
html[data-kursband='dunkel'] .ticker {
  background: transparent; box-shadow: none; color: #D3CBBF;
  border-top-color: rgb(230 201 138 / 0.22);
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.6);
}
html[data-kursband='dunkel'] .ticker__zelle { border-inline-end-color: rgb(243 238 230 / 0.14); }
html[data-kursband='dunkel'] :is(.ticker__name, .ticker__einheit) { color: #D3CBBF; }
html[data-kursband='dunkel'] .ticker__zahl { color: var(--gold-hell); }
/* Das Gruen des Live-Punkts ist auf Schwarz zu dunkel; ein helleres Gruen. */
html[data-kursband='dunkel'] .ticker__punkt { background: #4CC477; }
html[data-kursband='dunkel'] .ticker[data-ticker-zustand='alt'] .ticker__punkt { background: #8F887F; }
html[data-kursband='dunkel'] .ticker__halt { background: transparent; border-color: rgb(243 238 230 / 0.45); color: #F3EEE6; }
html[data-kursband='dunkel'] .ticker :focus-visible { outline-color: var(--gold-hell); }
/* Ein gewechselter Kurs blitzt auf Dunkel hell auf statt dunkel. */
html[data-kursband='dunkel'] .ticker__zelle[data-gewechselt='ja'] .ticker__zahl { animation-name: ticker-wechsel-dunkel; }
@keyframes ticker-wechsel-dunkel { 0% { color: #F3EEE6; } 100% { color: var(--gold-hell); } }
/* Weich umschalten erst, wenn der erste Zustand steht (wie bei der Kopfleiste). */
html[data-kursband-weich] .ticker { transition: transform 0.25s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
html[data-kursband-weich] .ticker :is(.ticker__name, .ticker__einheit, .ticker__zahl) { transition: color 0.3s ease; }
html[data-kursband-weich] .ticker__zelle { transition: border-color 0.3s ease; }

/* Die zweite Haelfte der Bahn dient nur dem nahtlosen Lauf. */
.ticker__bahn > [aria-hidden='true'] { display: none; }
@media (max-width: 62rem) { .ticker__bahn > [aria-hidden='true'] { display: flex; } }
@media (prefers-reduced-motion: reduce) { .ticker__bahn > [aria-hidden='true'] { display: none; } }

/* --- 7 · Die Kopfleiste ------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: var(--z-kopf);
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow 0.3s ease;
}
html[data-gescrollt='ja'] .kopf { box-shadow: var(--schatten-sanft); }

/* DURCHSICHTIG AUF ALLEN SEITEN (Joel, 25.09.2026). js/bewegung.js setzt
   html[data-kopf]: 'dunkel', solange eine dunkle Flaeche unter der Leiste
   liegt (der Guss), 'frei' ganz oben auf der Seite, sonst 'fest'. Fest heisst
   weiss wie bisher: laeuft heller Inhalt unter die Leiste, stuende seine
   Schrift sonst hinter den Menuewoertern. Helle Schrift nur ueber Dunkel.
   Ohne Skript und ohne :has() (aeltere Browser verwerfen die ganze Regel)
   bleibt die Leiste weiss. Ist das Menue am Telefon offen, auch. */
html[data-kopf='frei'] .kopf:not(:has(.navi__liste[data-offen='ja'])),
html[data-kopf='dunkel'] .kopf:not(:has(.navi__liste[data-offen='ja'])) {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
}
html[data-kopf='dunkel'] .kopf:not(:has(.navi__liste[data-offen='ja'])) {
  --auf-stein: #F3EEE6;       /* 7.6:1 auch ueber dem gluehenden Tiegel, dank js/guss.js */
  --auf-stein-neben: #D3CBBF; /* 5.5:1 dort */
}
html[data-kopf='dunkel'] .kopf:not(:has(.navi__liste[data-offen='ja'])) :is(.marke-block, .navi__liste a, .kopf__tel) {
  color: var(--auf-stein); text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}
html[data-kopf='dunkel'] .kopf:not(:has(.navi__liste[data-offen='ja'])) .marke-block__ort { color: var(--auf-stein-neben); }
html[data-kopf='dunkel'] .kopf:not(:has(.navi__liste[data-offen='ja'])) .kopf__tel svg { color: var(--gold-hell); }
/* Der WhatsApp-Knopf bleibt auch ueber Dunkel in seinem Rolex-Gruen
   (Abschnitt 5); durchsichtig werden nur die drei hellen Symbolknoepfe. */
html[data-kopf='dunkel'] .kopf:not(:has(.navi__liste[data-offen='ja'])) :is(.sprachwahl > summary, .korb-knopf, .menue-knopf) {
  background: transparent; color: var(--auf-stein); border-color: rgb(243 238 230 / 0.45);
}
html[data-kopf='dunkel'] .kopf:not(:has(.navi__liste[data-offen='ja'])) :is(.sprachwahl > summary, .korb-knopf, .menue-knopf):hover,
html[data-kopf='dunkel'] .kopf:not(:has(.navi__liste[data-offen='ja'])) .sprachwahl[open] > summary { border-color: var(--gold); }
html[data-kopf='dunkel'] .kopf:not(:has(.navi__liste[data-offen='ja'])) :focus-visible { outline-color: var(--gold-hell); }
/* Weich umschalten erst, wenn der erste Zustand steht: sonst blendete die
   Leiste beim Laden der Startseite sichtbar von Weiss auf durchsichtig. */
html[data-kopf-weich] .kopf { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
html[data-kopf-weich] .kopf :is(.marke-block, .marke-block__ort, .navi__liste a, .kopf__tel, .kopf__tel svg) { transition: color 0.3s ease; }
html[data-kopf-weich] .kopf :is(.sprachwahl > summary, .korb-knopf, .menue-knopf) { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.2s ease; }
.kopf__zeile {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: var(--h-kopf);
}
html[data-gescrollt='ja'] .kopf__zeile { min-height: var(--h-kopf-klein); }

.marke-block { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--tinte); flex: 0 0 auto; }
.marke-block__siegel { width: 55px; height: 56px; }
html[data-gescrollt='ja'] .marke-block__siegel { width: 47px; height: 48px; }
/* Duenner seit 27.09.2026 (Joel: "die Schrift muss duenner sein"); vorher 700. */
.marke-block__name { display: block; font-family: var(--titel); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.marke-block__ort { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grau); margin-top: 0.15rem; }

.navi { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.navi__liste { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.2rem); list-style: none; margin: 0 0.5rem 0 0; padding: 0; }
/* Menuewoerter hauchduenn (Joel, 25.09.2026: zuerst 400 statt 600, spaet
   "Ultra-Thin, immer noch zu dick"): 200, Extra-Light, eine Spur gesperrt.
   100 waere bei 16 px fuer aeltere Augen kaum noch lesbar, besonders hell
   ueber dem Film; auf Wunsch moeglich. */
.navi__liste a {
  position: relative; display: inline-block; padding: 0.5rem 0;
  font-size: 1rem; font-weight: 200; letter-spacing: 0.015em; color: var(--tinte); text-decoration: none; white-space: nowrap;
}
.navi__liste a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--kurve);
}
.navi__liste a:hover::after, .navi__liste a[aria-current='page']::after { transform: scaleX(1); }

.kopf__tel {
  display: none; align-items: center; gap: 0.45rem;
  font-weight: 300; font-size: 1rem; text-decoration: none; color: var(--tinte); white-space: nowrap;
}
.kopf__tel svg { width: 18px; height: 18px; color: var(--gold-tief); }
@media (min-width: 80rem) { .kopf__tel { display: inline-flex; } }
/* In den Fremdsprachen sind die Menuewoerter laenger ("Precio del oro", "Cómo
   llegar"); die Kopfleiste liefe ueber den Rand. Die Nummer steht dort im
   Seitenkopf, im Fuss und in der Kontaktleiste, die Kopfleiste traegt WhatsApp. */
html:not([lang|='de']) .kopf__tel { display: none; }
html:not([lang|='de']) .navi__liste { gap: clamp(0.8rem, 1.1vw, 1.1rem); }

.korb-knopf, .menue-knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  background: var(--weiss); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: var(--r-knopf);
  cursor: pointer; text-decoration: none;
  transition: border-color 0.2s ease;
}
.korb-knopf:hover, .menue-knopf:hover { border-color: var(--gold); }
.korb-knopf svg, .menue-knopf svg { width: 20px; height: 20px; }
/* Sprachwahl (werkstatt/sprachen.py setzt sie in jede Seite): ein Knopf im
   Mass des Warenkorbs, darunter die fuenf Sprachen. details/summary, damit sie
   ohne Skript funktioniert und mit der Tastatur bedienbar ist. */
.sprachwahl { position: relative; flex: 0 0 auto; }
.sprachwahl > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; cursor: pointer;
  font: 700 0.8125rem/1 var(--lesen); letter-spacing: 0.06em; color: var(--tinte);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-knopf);
  transition: border-color 0.2s ease;
}
.sprachwahl > summary::-webkit-details-marker { display: none; }
.sprachwahl > summary:hover, .sprachwahl[open] > summary { border-color: var(--gold); }
.sprachwahl > summary:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 3px; }
.sprachwahl__liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 11rem;
  margin: 0; padding: 0.4rem; list-style: none;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
  box-shadow: 0 14px 34px -14px rgb(42 36 32 / .30);
}
.sprachwahl__liste a {
  display: flex; align-items: center; min-height: 44px; padding: 0 0.85rem;
  border-radius: 8px; color: var(--tinte); text-decoration: none; font-weight: 500;
}
.sprachwahl__liste a:hover { background: var(--perl); }
.sprachwahl__liste a[aria-current] { font-weight: 700; color: var(--gold-tief); }
.sprachen-fuss { margin: 1rem 0 0; max-width: none; font-size: 0.875rem; color: var(--grau); }
.sprachen-fuss a { color: inherit; text-decoration: none; }
.sprachen-fuss a:hover { color: var(--tinte); text-decoration: underline; }
.sprachen-fuss a[aria-current] { color: var(--tinte); font-weight: 700; }
.hinweis--sprache { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--grau); }
.navi__sprachen { display: none; }
@media (max-width: 79.99rem) {
  .sprachwahl { display: none; }
  .navi__sprachen { display: flex; gap: 0.5rem; padding-top: 1rem; }
  .navi__liste .navi__sprachen a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 0.5rem; border: 1px solid var(--linie);
    border-radius: var(--r-knopf); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em;
  }
  .navi__liste .navi__sprachen a[aria-current] { border-color: var(--gold); color: var(--gold-tief); }
}
.korb-zahl {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--gold); color: var(--tinte);
  font-size: 0.75rem; font-weight: 700; line-height: 20px; text-align: center;
}
.korb-zahl[data-gefuellt='nein'] { display: none; }
.menue-knopf { display: none; }

/* Die Meldung (z. B. "In den Warenkorb gelegt") */
.meldung {
  position: fixed; left: 50%; bottom: calc(var(--h-leiste) + var(--h-ticker) + 1rem); z-index: var(--z-kopf);
  transform: translateX(-50%); max-width: min(92vw, 34rem);
  background: var(--leder); color: var(--auf-leder);
  padding: 0.85rem 1.25rem; border-radius: var(--r-feld); box-shadow: var(--schatten);
  font-size: 1rem;
}
.meldung[hidden] { display: none; }

/* Unter 80rem: Menueknopf, Aufklappmenue. Bis zum 23.09.2026 lag die Grenze bei
   62rem; zwischen 992 und 1279 px lief die volle Kopfleiste aber ueber den Rand
   (gemessen, auch deutsch). Ab 80rem passt sie in allen fuenf Sprachen. */
@media (max-width: 79.99rem) {
  :root { --h-kopf-oben: 68px; }
  .kopf__zeile { min-height: 68px; gap: 0.75rem; }
  .menue-knopf { display: inline-flex; }
  .navi { gap: 0.5rem; }
  .navi__liste {
    position: absolute; inset: 100% 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--weiss); box-shadow: var(--schatten-sanft);
    border-bottom: 1px solid var(--linie);
    padding: 0.5rem var(--rand) 1.25rem; display: none;
  }
  .navi__liste[data-offen='ja'] { display: flex; }
  .navi__liste a { display: block; padding: 0.95rem 0; border-bottom: 1px solid var(--linie); font-size: 1.125rem; }
  .navi__liste a::after { content: none; }
  .navi__liste li:last-child a { border-bottom: 0; }
}
/* Unter 48rem traegt die feste Leiste unten dieselbe Handlung. */
@media (max-width: 47.99rem) { .kopf__tat { display: none; } }
@media (max-width: 30rem) {
  .marke-block { gap: 0.55rem; min-width: 0; }
  .marke-block__siegel { width: 45px; height: 46px; }
  .marke-block__name { font-size: 0.9375rem; }
  .marke-block__ort { display: none; }
}

/* --- 8 · Der Kopf der Startseite ---------------------------------------- */

/* Links Satz und Knoepfe, rechts der Rechner. Am Telefon: Satz, Knoepfe,
   Rechner. Darueber steht seit dem 25.09.2026 der Guss (8a). Der Goldstaub
   vom 23.09. und Stein mit Wasserzeichen vom 24.09. sind wieder entfernt. */
.start { padding-block: clamp(1.5rem, 0.8rem + 2vw, 3rem) var(--takt-klein); position: relative; }
.start__wort { position: relative; }

/* --- 8a · Der Guss: der Scroll-Film ganz oben auf der Startseite -------- */

/* Joels Idee vom 24./25.09.2026: fluessiges Gold wird in eine Steinform
   gegossen, und am Ende liegt das Logo in Gold da, gesteuert vom Scrollen.
   Die Buehne klebt unter der Kopfleiste, waehrend der hohe Abschnitt
   durchscrollt; js/guss.js zeichnet je nach Scrollstelle ein Bild des Films
   auf die Leinwand und blendet am Schluss auf das exakte Endbild ueber.

   OHNE JAVASCRIPT UND BEI REDUZIERTER BEWEGUNG steht nur das Endbild da, in
   normaler Hoehe, nichts klebt. Das Skript setzt html[data-guss='an'] erst,
   wenn es wirklich laeuft.

   Die Buehne ist die einzige dunkle Flaeche der Seite, ausdruecklich
   gewollt (Joel, 24.09.2026: dunkle Steinplatte). hausregeln.js kennt sie. */
/* padding 0: jede section traegt sonst --takt oben und unten; hier wuerde
   die Buehne dadurch 64 bis 120 px zu tief kleben und am Ende zu frueh
   loslassen (gemessen am 25.09.2026: 114 px bei 1440 px Breite). */
/* Der Grund hat den Ton des Steins am unteren Filmrand (#1C1E21, gemessen
   am 25.09.2026 in Anfangs-, Mittel- und Endbild). Vorher #0d0d0e: dunkler
   als der Stein, zwischen Film und Auslauf stand ein schwarzes Band. */
.guss { position: relative; padding: 0; background: #1C1E21; color: #efeae3; }

/* Die Steinplatte laeuft hinter der Kopfleiste bis ganz nach oben (Joel,
   25.09.2026): die Buehne rueckt um die Hoehe der Leiste samt ihrer 1 px
   Trennlinie hinauf. Die Leiste ist darueber ganz durchsichtig, mit heller
   Schrift (Abschnitt 7). Wo der Film oben hell ist (der gluehende Tiegel),
   dunkelt js/guss.js den obersten Streifen weich ab, wie bei einem
   Kinoplakat; ohne das waere die helle Schrift dort nicht lesbar. */
.guss { margin-top: calc(-1 * var(--h-kopf-oben) - 1px); }

/* DER WEICHE AUSGANG (Joel, 25.09.2026: "dieser Uebergang ist zu hart").
   Unter der Buehne laeuft der dunkle Grund ueber --guss-auslauf weich ins
   Weiss der Seite. Der Auslauf ist padding-bottom: die klebende Buehne
   laesst am Anfang des Polsters los, js/guss.js rechnet den Filmweg bis
   dorthin, und die Hoehe waechst um den Auslauf, damit der Film gleich lang
   bleibt. Der Verlauf liegt in einem ::after (Weiss mit steigender Deckung
   ueber dem dunklen Grund), nach einer weichen S-Kurve statt linear.
   .guss__dunkel setzt js/bewegung.js hinein: bis dorthin, 42 % in den
   Auslauf hinein, zaehlt der Guss fuer Kopfleiste und Kursband als dunkel.
   Bei 42 % haben helle und dunkle Schrift gleich viel Kontrast (je rund
   3.9:1, Grund etwa #797a7c); erst ab dort ist der Grund heller als dunkel.
   Bis zum 27.09.2026 standen hier 30 %: die Leiste wurde weiss, als der
   Grund noch dunkelgrau war (#535557). Joel: "Der Wechsel auf hell darf
   erst dann stattfinden, wenn es auf hell wird." */
.guss { --guss-auslauf: clamp(10rem, 26vh, 18rem); padding-bottom: var(--guss-auslauf); }
.guss::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--guss-auslauf);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.05) 14%, rgb(255 255 255 / 0.19) 28%,
    rgb(255 255 255 / 0.38) 42%, rgb(255 255 255 / 0.59) 56%, rgb(255 255 255 / 0.78) 70%,
    rgb(255 255 255 / 0.93) 84%, rgb(255 255 255 / 0.99) 94%, #fff 100%);
}
.guss__dunkel {
  position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--guss-auslauf) * 0.58);
  visibility: hidden; pointer-events: none;
}

.guss__buehne {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 16 / 9;
  max-height: calc(100svh - var(--h-ticker));
}
.guss__standbild, .guss__film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.guss__film { visibility: hidden; }
html[data-guss='an'] .guss { height: calc(360vh + var(--guss-auslauf)); }
/* Den hohen Scrollweg und die klebende Buehne setzt CSS selbst, sobald der
   Browser Skripte ausfuehrt und Bewegung erlaubt ist (Media-Merkmal
   "scripting"). So steht das Layout schon im ersten Bild, bevor guss.js
   geladen ist. Vorher zeigte der Browser bei langsamem Netz zuerst die
   Fassung ohne Skript (kleines Logobild, darunter der Startkopf) und sprang
   dann um eine ganze Bildschirmhoehe: Layout-Verschiebung 0.74, gemessen
   25.09.2026 (Tempo-Pruefung). Aeltere Browser ohne "scripting" nehmen
   weiter html[data-guss='an']; ohne Skript und bei reduzierter Bewegung
   bleibt es beim niedrigen Standbild. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .guss { height: calc(360vh + var(--guss-auslauf)); }
  .guss__buehne {
    position: sticky; top: 0;
    aspect-ratio: auto; max-height: none;
    height: 100vh; height: 100svh;
  }
}
/* Die Buehne fuellt den ganzen Bildschirm, auch hinter dem Kursband (Joel,
   25.09.2026 abends: das Band ueber dem Kopfbereich durchsichtig, "kein
   dunkler Hintergrund"). Vorher endete sie ueber dem Band, und hinter dem
   durchsichtigen Band stand nur der dunkle Grund. Am Telefon ist ueber dem
   Guss auch die Kontaktleiste weggefahren (Abschnitt 27). */
html[data-guss='an'] .guss__buehne {
  position: sticky; top: 0;
  aspect-ratio: auto; max-height: none;
  height: 100vh; height: 100svh;
}
html[data-guss='an'] .guss__film { visibility: visible; }
html[data-guss='an'] .guss__standbild { visibility: hidden; }

/* Der Hinweis, dass hier gescrollt wird: unten mittig, verschwindet mit
   dem ersten Stueck Scrollweg. */
.guss__hinweis {
  position: absolute; left: 50%; bottom: calc(var(--h-ticker) + var(--h-leiste-guss, 0px) + clamp(0.75rem, 2.5vh, 1.75rem)); transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 0.35rem;
  margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #efeae3; opacity: 0.85; transition: opacity 0.4s ease;
  pointer-events: none;
}
.guss__hinweis svg { width: 18px; height: 18px; animation: guss-nicken 1.8s ease-in-out infinite; }
@keyframes guss-nicken { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
html[data-guss='an'] .guss__hinweis { display: flex; }
/* Am Telefon liegt die Kontaktleiste auch ueber dem Guss (Abschnitt 27). */
@media (max-width: 47.99rem) { .guss { --h-leiste-guss: var(--h-leiste); } }
/* Am Telefon kein Scroll-Hinweis (Joel, 27.09.2026: "mega viel Leerraum ...
   koennen wir auf das verzichten und alles schoen in der Mitte zentrieren").
   Film und Titel stehen dort als Gruppe mittig (js/guss.js oberkante). */
@media (max-width: 47.99rem) { html[data-guss='an'] .guss__hinweis { display: none; } }

/* DER TITEL IM GUSS (Joel, 25.09.2026 abends: "diesen Bereich kannst du
   hier einfuegen, wir haben unten genug Platz, passe die Schriftfarbe an").
   Nur hochkant am Telefon: js/guss.js verschiebt dann die h1 der Startseite
   in die Buehne und gibt ihr diese Klasse; das Bild rueckt darueber mittig.
   Mittig gesetzt, unter dem mittigen Logo wie auf einer Titeltafel; hell,
   der Takt in Hellgold. Er steht auf dem dunklen Grund unter dem Bild
   (#1C1E21): Schrift 14:1, Takt 10:1. */
.guss__titel {
  position: absolute; z-index: 1; left: var(--rand); right: var(--rand);
  /* 27.09.2026: etwas tiefer, damit der Film tiefer sitzen kann (js/guss.js
     TIEFER). Nicht tiefer als hier: darunter steht der Hinweis "Scrollen".
     Vorher clamp(4.5rem, 12vh, 6.5rem). */
  bottom: calc(var(--h-ticker) + var(--h-leiste-guss, 0px) + clamp(4.25rem, 9.5vh, 5.5rem));
  margin: 0; text-align: center; color: #F3EEE6;
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1.06; letter-spacing: -0.02em;
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.45);
}
.guss__titel .start__takt { color: var(--gold-hell); }
html[data-guss='an'] .guss[data-weg='ja'] .guss__hinweis { opacity: 0; }
.start__raster {
  display: grid; gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'wort' 'rechner';
}
.start__wort { grid-area: wort; }
.start .rechner { grid-area: rechner; }
@media (min-width: 64rem) {
  .start__raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: 'wort rechner';
    align-items: center;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
  }
}
.start h1 { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1.06; letter-spacing: -0.02em; }
/* Der Titel traegt das Suchwort gross und den technischen Takt darunter,
   beides in der einen h1. */
.start__takt { display: block; margin-top: 0.35rem; font-size: 0.5em; letter-spacing: -0.02em; color: var(--gold-tief); }
.start__lede { margin: 1.1rem 0 1.75rem; font-size: var(--fs-lede); font-weight: var(--gewicht-lede); line-height: 1.5; color: var(--grau); max-width: 36ch; }


/* Die Vorteile: eine ruhige Faktenzeile unter dem Kopf, ohne Symbolkreise. */
.vorteile {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.vorteil { padding-inline: 0 clamp(1rem, 2vw, 2rem); }
@media (min-width: 40rem) {
  .vorteil + .vorteil { border-left: 1px solid var(--linie); padding-left: clamp(1rem, 2vw, 2rem); }
}
.vorteil strong { display: block; font-family: var(--titel); font-weight: var(--gewicht-titel-klein); font-size: 1.125rem; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.vorteil > span { font-size: var(--fs-klein); color: var(--grau); line-height: 1.45; }

/* --- 9 · Der Rechner ---------------------------------------------------- */

.rechner {
  position: relative; background: var(--weiss);
  border-radius: 24px;
  box-shadow: 0 1px 3px rgb(42 36 32 / 0.08), 0 18px 44px -26px rgb(42 36 32 / 0.34);
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
}
.rechner__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
.rechner__titel { font-family: var(--titel); font-size: 1.25rem; font-weight: var(--gewicht-titel-klein); letter-spacing: -0.01em; margin: 0; }
.rechner__stand { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--grau); white-space: nowrap; }
.rechner__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

.rechner__geraet { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); }
.rechner__geraet[hidden] { display: none; }

/* Fuenf Metalle passen auf 390 px nicht in eine Zeile. Die Reiter brechen
   deshalb um, statt seitlich aus der Karte zu laufen. */
.rechner__reiter {
  display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.3rem;
  background: var(--perl); border-radius: 12px;
}
.rechner__reiter-knopf {
  flex: 1 0 auto; min-height: 42px; padding: 0.45rem 0.8rem;
  background: transparent; border: 0; border-radius: 8px;
  font-family: var(--lesen); font-size: 0.9375rem; font-weight: 600; color: var(--grau);
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.rechner__reiter-knopf:hover { color: var(--tinte); }
.rechner__reiter-knopf[data-aktiv='ja'] { background: var(--weiss); color: var(--tinte); box-shadow: 0 2px 8px -3px rgb(42 36 32 / 0.25); }

.rechner__sorten .marke, .rechner__gewicht .marke { margin-bottom: 0.5rem; }
.rechner__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rechner__chip {
  min-height: 42px; padding: 0.4rem 0.95rem;
  background: var(--weiss); color: var(--tinte);
  border: 1px solid var(--linie-kraeftig); border-radius: 8px;
  font-family: var(--zahlen); font-size: 0.9375rem; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.rechner__chip:hover { border-color: var(--gold-tief); }
.rechner__chip[data-aktiv='ja'] { background: var(--gold); border-color: var(--gold); color: var(--tinte); }

.rechner__eingabe {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--r-feld);
  background: var(--weiss); padding: 0 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rechner__eingabe:focus-within { border-color: var(--gold-tief); box-shadow: 0 0 0 3px rgb(var(--gold-kanaele) / 0.28); }
.rechner__eingabe input {
  flex: 1; min-width: 0; min-height: 58px; border: 0; background: transparent; outline: none;
  font-family: var(--zahlen); font-size: 1.625rem; font-weight: 700; color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.rechner__eingabe input::placeholder { color: var(--linie-kraeftig); }
.rechner__einheit { font-size: 0.875rem; font-weight: 700; color: var(--grau); letter-spacing: 0.06em; text-transform: uppercase; }

.rechner__ergebnis {
  background: var(--gold-zart); border: 1px solid var(--gold-blass); border-radius: 16px;
  padding: 1rem 1.15rem 1.05rem;
}
.rechner__ergebnis-kopf { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--grau); }
.rechner__ergebnis-wort { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.rechner__ergebnis-kurs { font-variant-numeric: tabular-nums; }
.rechner__ergebnis[data-offen='ja'] .rechner__ergebnis-kurs { color: var(--gold-tief); }
.rechner__ergebnis-zeile { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.3rem; }
.rechner__ergebnis-zahl { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.625rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--tinte); }
.rechner__ergebnis-waehrung { font-size: 1rem; font-weight: 700; color: var(--grau); }

.rechner__sammeln {
  justify-self: start; min-height: 44px; padding: 0.5rem 1.1rem;
  background: var(--weiss); color: var(--tinte);
  border: 1px solid var(--linie-kraeftig); border-radius: var(--r-knopf);
  font-family: var(--lesen); font-size: 0.9375rem; font-weight: 700; cursor: pointer;
}
.rechner__sammeln:hover:not(:disabled) { border-color: var(--tinte); background: var(--perl); }
.rechner__sammeln:disabled { opacity: 0.5; cursor: not-allowed; }

.rechner__posten { border-top: 1px solid var(--linie); }
.rechner__posten[hidden] { display: none; }
.rechner__posten-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 0.5rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--linie); font-size: 0.9375rem; }
.rechner__posten-betrag { font-weight: 700; }
.rechner__posten-betrag[data-offen='ja'] { color: var(--gold-tief); font-weight: 600; }
.rechner__posten-weg { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--grau); cursor: pointer; border-radius: 50%; }
.rechner__posten-weg:hover { background: var(--perl); color: var(--tinte); }
.rechner__posten-weg svg { width: 14px; height: 14px; }

.summe { background: var(--gold-zart); border: 1px solid var(--gold); border-radius: 16px; padding: 0.9rem 1.15rem; }
.summe[hidden] { display: none; }
.summe__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.summe__wort { font-weight: 700; font-size: 0.9375rem; }
.summe__zahl { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); font-weight: 700; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 0.4rem; }
.summe__waehrung { font-size: 0.9375rem; color: var(--grau); }
.summe__fuss { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--grau); max-width: none; }

/* Die Preisliste: ohne JavaScript IST sie der Rechner. */
.rechner__preise { margin-top: 1rem; border-top: 1px solid var(--linie); padding-top: 0.6rem; }
.rechner__preise summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; cursor: pointer; list-style: none;
  font-size: 0.9375rem; font-weight: 700; color: var(--tinte);
}
.rechner__preise summary::-webkit-details-marker { display: none; }
.rechner__preise summary::after {
  content: ''; width: 10px; height: 10px; border-right: 2px solid var(--gold-tief); border-bottom: 2px solid var(--gold-tief);
  transform: rotate(45deg) translateY(-3px); transition: transform 0.25s ease;
}
.rechner__preise[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.rechner__preise table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin-top: 0.4rem; }
.rechner__preise td, .rechner__preise th { padding: 0.45rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.rechner__preise .r { text-align: right; }
.rechner__gruppe th { padding-top: 0.9rem; font-size: var(--fs-marke); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grau); }
.rechner__metall small { display: block; font-size: 0.8125rem; color: var(--grau); }
.rechner__kurs { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.rechner__hinweis { font-size: 0.875rem; color: var(--grau); margin-top: 0.75rem; }

/* Am Telefon klebt die Summe am unteren Rand des Rechners. */
@media (max-width: 47.99rem) {
  .summe { position: sticky; inset-block-end: 0; z-index: var(--z-summe); box-shadow: 0 -10px 24px -18px rgb(42 36 32 / 0.35); }
}

/* DER KOMPAKTE RECHNER (Joel, 23.09.2026 abends: "zu gross, er muss im
   Headerbereich Platz haben"). Am Schreibtisch passt er damit in den ersten
   Bildschirm: Reiter in einer Zeile, kleinere Chips und Felder. Am Telefon
   bleiben die Tippflaechen bei mindestens 40 px. */
.rechner { padding: clamp(0.95rem, 0.7rem + 0.6vw, 1.3rem); border-radius: 20px; }
.rechner__kopf { margin-bottom: 0.7rem; }
.rechner__titel { font-size: 1.125rem; }
.rechner__geraet { gap: 0.75rem; }
.rechner__sorten .marke, .rechner__gewicht .marke { margin-bottom: 0.35rem; }
.rechner__chips { gap: 0.35rem; }
.rechner__chip { min-height: 40px; padding: 0.3rem 0.75rem; font-size: 0.875rem; }
.rechner__eingabe input { min-height: 50px; font-size: 1.375rem; }
.rechner__ergebnis { padding: 0.7rem 0.95rem 0.8rem; border-radius: 14px; }
.rechner__ergebnis-zahl { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); }
.rechner__sammeln { min-height: 40px; padding: 0.4rem 1rem; font-size: 0.875rem; }
.rechner__preise { margin-top: 0.6rem; padding-top: 0.35rem; }
.rechner__preise summary { min-height: 40px; font-size: 0.875rem; }
@media (min-width: 64rem) {
  .rechner__reiter { flex-wrap: nowrap; padding: 0.25rem; }
  .rechner__reiter-knopf { flex: 1 1 auto; min-height: 36px; padding: 0.3rem 0.5rem; font-size: 0.8125rem; }
  .rechner__chip { min-height: 36px; }
}

/* --- 10 · Sichtbare Luecken --------------------------------------------- */

/* Eine Zahl, die niemand bestaetigt hat, bleibt sichtbar offen. */
.lueck {
  border-bottom: 1px dashed var(--gold);
  width: fit-content;
  font-family: var(--zahlen);
  white-space: nowrap;
}
/* Lange Platzhalter wie {{AUSWEIS_AUFBEWAHRUNG}} duerfen im Fliesstext und in
   Tabellen umbrechen, sonst schieben sie am Telefon die Seite seitlich. */
.rechtstext .lueck, .blattdaten .lueck, .karte .lueck, .punkte .lueck, .hinweis .lueck { white-space: normal; overflow-wrap: anywhere; }
/* Sind die Preise vom Inhaber bestaetigt (inhalt.js), verschwindet die Linie
   an den Preisen. Andere Luecken (Firma, Jahr) bleiben offen. */
html[data-preise='bestaetigt'] .preis__wert.lueck,
html[data-preise='bestaetigt'] .rechner__kurs .lueck,
html[data-preise='bestaetigt'] .rechner__stand .lueck { border-bottom: 0; }

/* --- 11 · Kopf der Unterseiten ------------------------------------------ */

.seitenkopf { padding-block: clamp(1.5rem, 0.8rem + 2vw, 3rem) var(--takt-klein); }
.seitenkopf__raster { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 56rem) { .seitenkopf__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.seitenkopf__lede { margin: 1.1rem 0 1.75rem; font-size: var(--fs-lede); font-weight: var(--gewicht-lede); line-height: 1.5; color: var(--grau); max-width: 42ch; }
.seitenkopf__bild { overflow: hidden; border-radius: var(--r-karte); aspect-ratio: 4 / 3; background: var(--perl); }
.seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; animation: einschweben 1.8s var(--kurve) both; }
.seitenkopf__bild--film { aspect-ratio: 16 / 9; background: var(--perl); }
.seitenkopf__bild--film video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Post-Seite: das Erklaervideo nimmt den ganzen Kopf ein, von Rand zu Rand.
   Der Grund des Films ist Weiss wie die Seite, deshalb bleiben die Balken
   links und rechts unsichtbar, wenn der Bildschirm breiter ist als 16:9.
   Hoehe hoechstens der sichtbare Bereich unter der Kopfleiste. */
.seitenkopf--film { padding-top: 0; }
.filmbuehne { position: relative; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.filmbuehne video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  max-height: calc(100svh - var(--h-kopf) - var(--h-ticker));
  object-fit: contain; background: var(--weiss);
}
.filmbuehne__ton {
  position: absolute; left: 50%; bottom: clamp(3.5rem, 2rem + 4vw, 5.5rem); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 48px; padding: 0.7rem 1.35rem;
  font: 600 1rem/1 var(--lesen); color: var(--tinte);
  background: var(--weiss); border: 1.5px solid var(--gold); border-radius: var(--r-knopf);
  box-shadow: 0 6px 18px -8px rgb(42 36 32 / .28);
  cursor: pointer; transition: transform .2s var(--kurve), box-shadow .2s var(--kurve);
}
.filmbuehne__ton svg { color: var(--gold-tief); }
.filmbuehne__ton:hover { transform: translateX(-50%) translateY(-1px); box-shadow: 0 10px 24px -10px rgb(42 36 32 / .32); }
.filmbuehne__ton:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 3px; }
.filmbuehne[data-film-ton-an] .filmbuehne__ton { display: none; }
/* Am Telefon ist der Film nur gut 200 px hoch: der Knopf wuerde die Tafeln
   verdecken. Er steht dort unter dem Film statt darauf. */
@media (max-width: 40rem) {
  /* relative statt static: das Randlicht im Knopf braucht ihn als Bezug. */
  .filmbuehne__ton { position: relative; inset: auto; transform: none; display: flex; width: max-content; margin: 0.9rem auto 1rem; }
  .filmbuehne__ton:hover { transform: translateY(-1px); }
}
.seitenkopf__unter { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.seitenkopf--schmal .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); }
.seitenkopf--schmal { padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

/* Das Kopfbild des Shops (Joel, 25.09.2026): eines der Schwarzweissbilder mit
   Gold, randlos, hinter der durchsichtigen Kopfleiste bis ganz nach oben wie
   der Guss auf der Startseite. Titel, Text und Knoepfe stehen links darauf,
   hell. js/bewegung.js kennt es als dunkle Flaeche, die Leiste schreibt
   darueber ebenfalls hell.
   Das Bild ist in der Datei gespiegelt und abgedunkelt, links hinter dem
   Text am staerksten (bilder/HERKUNFT.md): kein Verlauf und kein filter im
   CSS. Hinter dem Text liegt es so unter Helligkeit 80 von 255.
   Ab 75rem endet der Text vor dem Schmuck (Spalte 34rem). Darunter laeuft
   der Text ueber das ganze Bild, dann legt sich ein gleichmaessiger
   Schleier darueber: auch das hellste Gold liegt danach unter 85. */
/* VOLLFLAECHIG seit dem 25.09.2026 abends (Joel: "keine weissen Zeilen
   unten"): das Bild fuellt den ganzen ersten Bildschirm, das Kursband liegt
   durchsichtig darauf (Abschnitt 6), am Telefon faehrt die Kontaktleiste
   weg (Abschnitt 27). Unten haelt das Polster die Knoepfe frei vom Band.
   Es beginnt um die wirkliche Hoehe der Kopfleiste hoeher (--h-kopf-oben),
   sonst fehlten unter 80rem unten 8 px. */
.kopfbild {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  margin-top: calc(-1 * var(--h-kopf-oben) - 1px);
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--h-kopf-oben) + clamp(1.5rem, 0.5rem + 3vw, 3.5rem)) 0 calc(var(--h-ticker) + clamp(2rem, 1rem + 3vw, 4rem));
  background: #0d0d0e;
}
.kopfbild__bild {
  position: absolute; inset: 0; z-index: -1;
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
}
.kopfbild > .huelle { width: 100%; }
.kopfbild__wort { max-width: 34rem; }
.kopfbild h1 { color: #F3EEE6; }
.kopfbild .seitenkopf__lede, .kopfbild .pfad, .kopfbild .pfad a, .kopfbild .hinweis { color: #D3CBBF; }
.kopfbild :is(h1, .seitenkopf__lede, .pfad, .hinweis) { text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }
/* Den Sprachhinweis setzt werkstatt/sprachen.py in en/ fr/ it/ es/ unter den Titel. */
.kopfbild .hinweis::before { text-shadow: none; background: rgb(201 162 77 / 0.18); border-color: rgb(230 201 138 / 0.5); color: var(--gold-hell); }
.kopfbild .pfad [aria-hidden] { color: rgb(211 203 191 / 0.6); }
.kopfbild .pfad a:hover { color: #F3EEE6; }
.kopfbild .tat--still { color: #F3EEE6; border-color: rgb(243 238 230 / 0.55); }
.kopfbild .tat--still:hover { background: rgb(243 238 230 / 0.12); border-color: #F3EEE6; }
.kopfbild :focus-visible { outline-color: var(--gold-hell); }
@media (max-width: 74.99rem) {
  .kopfbild::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(13 13 14 / 0.45); }
  .kopfbild__bild { object-position: 62% 50%; }
}

.pfad { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.875rem; color: var(--grau); margin-bottom: 1.1rem; }
.pfad a { color: var(--grau); text-decoration: none; }
.pfad a:hover { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--gold); }
.pfad [aria-hidden] { color: var(--linie-kraeftig); }

/* --- 12 · Bildkacheln: das Sortiment ----------------------------------- */

.kacheln { display: grid; gap: var(--spalt); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kacheln > * { grid-column: span 2; }
  .kacheln--fuenf > :nth-child(-n+2) { grid-column: span 3; }
}
.kachel { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: var(--tinte); }
.kachel__bild { position: relative; overflow: hidden; border-radius: var(--r-karte); aspect-ratio: 4 / 3; background: var(--perl); margin-bottom: 0.9rem; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--kurve); }
.kachel:hover .kachel__bild img, .kachel:focus-visible .kachel__bild img { transform: scale(1.045); }
.kachel h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: var(--gewicht-titel-klein); letter-spacing: -0.015em; }
.kachel p { color: var(--grau); font-size: var(--fs-klein); line-height: 1.5; margin: 0 0 0.5rem; }
.kachel .pfeil { margin-top: auto; }

/* --- 13 · Preise je Gramm ----------------------------------------------- */

.preise { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 52rem) { .preise { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.preis {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte);
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.preis__name { font-size: var(--fs-marke); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grau); }
.preis__wert { font-family: var(--zahlen); font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.preis__einheit { font-size: 0.875rem; color: var(--grau); }
.preise__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: 1.5rem; }
.preise__fuss p { font-size: var(--fs-klein); color: var(--grau); margin: 0; max-width: 60ch; }

/* --- 14 · Schritte mit Bild -------------------------------------------- */

.schritte { display: grid; gap: var(--spalt); grid-template-columns: minmax(0, 1fr); counter-reset: schritt; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } .schritte--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } .schritte--fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.schritt { counter-increment: schritt; }
.schritt__bild { position: relative; overflow: hidden; border-radius: var(--r-karte); aspect-ratio: 4 / 3; background: var(--perl); margin-bottom: 1.1rem; }
.schritt__bild img { width: 100%; height: 100%; object-fit: cover; }
.schritt h3 { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.45rem; }
.schritt h3::before {
  content: counter(schritt);
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--tinte);
  font-family: var(--zahlen); font-size: 0.9375rem; font-weight: 700;
}
.schritte--fuenf .schritt h3 { font-size: 1.0625rem; }
.schritt p { font-size: var(--fs-klein); color: var(--grau); line-height: 1.5; }
/* Ohne Bild: Schritte als nummerierte Liste auf Karten */
.schritte--ohne .schritt { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem); }
.perl .schritte--ohne .schritt { border-color: transparent; }

/* --- 15 · Bild und Text ------------------------------------------------- */

.paar { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 5rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 56rem) {
  .paar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .paar--kehr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .paar--kehr .paar__bild { order: 2; }
}
.paar__bild { overflow: hidden; border-radius: var(--r-karte); aspect-ratio: 5 / 4; background: var(--perl); }
.paar__bild img, .paar__bild video { width: 100%; height: 100%; object-fit: cover; }
.paar__bild--film { aspect-ratio: 16 / 9; }
.paar__wort h2 { margin-bottom: 1rem; }
.paar__wort > p { color: var(--grau); }
.paar__wort .taten, .paar__wort .punkte { margin-top: 1.5rem; }

/* --- 16 · Punkte mit Haken ---------------------------------------------- */

.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem 2rem; }
@media (min-width: 48rem) { .punkte--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.punkte li { position: relative; padding-left: 2.1rem; line-height: 1.5; }
.punkte li::before {
  content: ''; position: absolute; left: 0; top: 0.12em; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--gold-zart) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A6516' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E") no-repeat center / 0.8rem;
  border: 1px solid var(--gold-blass);
}
.punkte li strong { display: block; font-weight: 700; }
.punkte li span { color: var(--grau); font-size: var(--fs-klein); }
/* Offene Punkte: ohne Haken, denn ein Haken vor einer Luecke waere ein Versprechen. */
.punkte--offen li { padding-left: 0; }
.punkte--offen li::before { content: none; }
.punkte--nein li::before {
  background: var(--perl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235D5852' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") no-repeat center / 0.7rem;
  border-color: var(--linie);
}

/* --- 17 · Karten fuer Text --------------------------------------------- */

.karten { display: grid; gap: var(--spalt); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karte, .feld {
  position: relative; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--r-karte);
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
}
.perl .karte, .perl .feld { border-color: transparent; }
.karte h3 { margin-bottom: 0.6rem; }
.karte p { color: var(--grau); font-size: var(--fs-klein); line-height: 1.55; }
.karte__zeichen { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-zart); color: var(--gold-tief); border: 1px solid var(--gold-blass); margin-bottom: 1rem; }
.karte__zeichen svg { width: 20px; height: 20px; }
.karte--gold { background: var(--gold-zart); border-color: var(--gold-blass); }
.feld--papier { background: var(--perl); border-color: transparent; }
/* Die Warenkorb-Summe (vom Skript gebaut) steht auf zartem Gold, nicht dunkel. */
.feld--kohle { background: var(--gold-zart); border-color: var(--gold-blass); }

/* --- 19 · Fragen -------------------------------------------------------- */

.fragen-block { display: grid; gap: clamp(2rem, 1rem + 3vw, 5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .fragen-block { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .fragen-block__wort { position: sticky; top: calc(var(--h-kopf) + 2rem); } }
.fragen-block__wort p { color: var(--grau); margin: 1rem 0 1.75rem; }

.fragen { display: grid; gap: 0.75rem; }
.frage { background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.perl .frage { border-color: transparent; }
.frage[open] { border-color: var(--gold-blass); box-shadow: var(--schatten-sanft); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding: 0.9rem 1.25rem; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.35;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--perl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231C1A17' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E") no-repeat center / 12px;
  transition: transform 0.3s var(--kurve), background-color 0.3s ease;
}
.frage[open] summary::after { transform: rotate(45deg); background-color: var(--gold); }
.frage__text { padding: 0 1.25rem 1.2rem; color: var(--grau); font-size: var(--fs-klein); line-height: 1.6; }

/* Aufklappbares "Genauer erklaert": der Inhalt bleibt, die Textwand geht. */
.mehr { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin-top: 2rem; }
.mehr summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; cursor: pointer; list-style: none; font-weight: 700;
}
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary::after { content: ''; width: 10px; height: 10px; border-right: 2px solid var(--gold-tief); border-bottom: 2px solid var(--gold-tief); transform: rotate(45deg) translateY(-3px); transition: transform 0.25s ease; }
.mehr[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.mehr__inhalt { padding-bottom: 1.5rem; color: var(--grau); }
.mehr__inhalt p, .mehr__inhalt li { font-size: var(--fs-klein); }

/* --- 20 · Tabellen ------------------------------------------------------ */

.tabellenkasten { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); }
.perl .tabellenkasten { border-color: transparent; }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-klein); }
.tabelle caption { text-align: left; padding: 1rem 1.25rem 0; font-weight: 700; }
.tabelle th, .tabelle td { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle thead th { font-size: var(--fs-marke); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); background: var(--perl); }
.tabelle tbody th { font-weight: 700; white-space: nowrap; }
.tabelle tr:last-child th, .tabelle tr:last-child td { border-bottom: 0; }
.tabelle .r { text-align: right; font-variant-numeric: tabular-nums; }

/* --- 21 · Hinweis ------------------------------------------------------- */

/* Ein Randvermerk mit kleinem goldenem Zeichen, keine Seitenlinie. */
.hinweis {
  position: relative; padding: 0.1rem 0 0.1rem 2rem;
  font-size: var(--fs-klein); color: var(--grau); max-width: 64ch; line-height: 1.55;
}
.hinweis::before {
  content: 'i'; position: absolute; left: 0; top: 0.15em;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-zart); border: 1px solid var(--gold-blass); color: var(--gold-tief);
  font-family: var(--titel); font-size: 0.75rem; font-weight: 700; font-style: normal;
}

/* --- 22 · Der Abschluss: goldener Kino-Look -------------------------------- */

/* Nach einer Vorlage, die Joel am 23.09.2026 abends gefunden hat ("CTA +
   Footer", im Original schwarz mit Video), umgesetzt in Gold: ein eigenes
   Goldbild gleitet langsam wie eine Kamerafahrt, darueber ein goldener
   Schleier, der Satz steht gross in der Mitte, ein weisser und ein Glasknopf.
   Oben laeuft die Seite weich ins Gold, unten weich in den weissen Fuss mit
   dem grossen Logo. Kein Video von fremden Servern, keine fremden Schriften. */
.schluss {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(7rem, 5rem + 8vw, 11rem);
  text-align: center; background: var(--perl);
}
.schluss__bild { position: absolute; inset: 0; z-index: -2; }
.schluss__bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
  animation: kamerafahrt 26s ease-in-out infinite alternate;
}
@keyframes kamerafahrt {
  from { transform: scale(1.14) translate3d(-2.5%, 1%, 0); }
  to { transform: scale(1.14) translate3d(2.5%, -1.5%, 0); }
}
/* Weiche Uebergaenge: oben aus dem Weiss der Seite, unten in den Fuss. */
.schluss::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--weiss) 0, rgb(255 255 255 / 0) 150px),
    linear-gradient(to top, var(--weiss) 0, rgb(255 255 255 / 0) 150px);
}
.schluss__wort { position: relative; max-width: 52rem; margin-inline: auto; }
/* Text auf einem Bild muss lesbar sein: hinter dem Satz liegt ein weicher,
   heller Lichtfleck, der das Bild zur Mitte hin aufhellt. */
.schluss__wort::before {
  content: ''; position: absolute; inset: -3.5rem -5rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.86), rgb(255 255 255 / 0.62) 55%, rgb(255 255 255 / 0) 100%);
}
.schluss__wort h2 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.875rem);
  line-height: 1.04; letter-spacing: -0.025em; font-weight: var(--gewicht-titel);
  /* Zwei Zeilen statt drei (Joel, 25.09.2026 spaet): 14ch brach
     "Gold bewerten lassen: zuerst ein Foto" dreimal; 22ch mit
     text-wrap: balance ergibt zwei ausgewogene Zeilen. */
  max-width: 22ch; margin-inline: auto; color: var(--tinte);
}
.schluss__wort p {
  margin: 1.25rem auto 2.25rem; max-width: 40ch;
  font-size: var(--fs-lede); font-weight: var(--gewicht-lede); line-height: 1.5; color: var(--tinte);
}
.schluss .taten { justify-content: center; gap: 1rem; }
/* Der Glasknopf: halbdurchsichtig, weichgezeichnet, mit feiner Lichtkante. */
.schluss .tat--still {
  background: rgb(255 255 255 / 0.45); border-color: transparent; color: var(--tinte);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 4px 14px -6px rgb(90 64 16 / 0.25), inset 0 1px 1px rgb(255 255 255 / 0.45);
}
.schluss .tat--still::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.8) 0%, rgb(255 255 255 / 0.25) 22%, rgb(255 255 255 / 0) 42%, rgb(255 255 255 / 0) 58%, rgb(255 255 255 / 0.25) 78%, rgb(255 255 255 / 0.8) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.schluss .tat--still:hover { background: rgb(255 255 255 / 0.7); }
@media (prefers-reduced-transparency: reduce) {
  .schluss .tat--still { background: rgb(255 255 255 / 0.85); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Der Fuss schliesst ohne Linie an den Uebergang an. */
.schluss + .fuss, main:has(> .schluss:last-child) + .fuss { border-top: 0; padding-top: var(--takt-klein); }

/* --- 23 · Rechtstexte --------------------------------------------------- */

.rechtstext { max-width: 72ch; }
.rechtstext h2 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); margin: 2.75rem 0 0.9rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { margin: 1.75rem 0 0.6rem; }
.rechtstext p, .rechtstext li { color: var(--grau); font-size: var(--fs-klein); line-height: 1.65; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem 1.5rem; margin: 0 0 1.25rem; }
@media (min-width: 40rem) { .rechtstext dl { grid-template-columns: 12rem minmax(0, 1fr); } }
.rechtstext dt { font-weight: 700; font-size: var(--fs-klein); }
.rechtstext dd { margin: 0 0 0.5rem; color: var(--grau); font-size: var(--fs-klein); }

/* --- 24 · Der Shop ------------------------------------------------------ */

.stuecke { display: grid; gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.stueck { position: relative; display: flex; flex-direction: column; }
.stueck__bild { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--r-karte); background: var(--perl); margin-bottom: 0.95rem; }
.stueck__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--kurve); }
.stueck:hover .stueck__bild img { transform: scale(1.045); }
.stueck__leer { width: 100%; height: 100%; display: grid; place-items: center; color: var(--grau); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; }
.stueck__inhalt { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.stueck__titel { order: 1; } .stueck__daten { order: 2; } .stueck__preis { order: 4; }
/* Die Stuecknummer steht UNTER Titel und Daten, nie als Dachzeile darueber. */
.stueck__nr { order: 3; font-size: 0.8125rem; color: var(--grau); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 0.02em; }
.stueck__titel { font-family: var(--titel); font-size: 1.0625rem; font-weight: var(--gewicht-titel-klein); line-height: 1.3; margin: 0; }
.stueck__titel a { color: inherit; text-decoration: none; }
.stueck__titel a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.stueck__daten { font-size: 0.875rem; color: var(--grau); margin: 0; font-variant-numeric: tabular-nums; }
.stueck__preis { font-family: var(--zahlen); font-size: 1.1875rem; font-weight: 700; margin-top: auto; padding-top: 0.35rem; font-variant-numeric: tabular-nums lining-nums; }
.stueck[data-verkauft='ja'] .stueck__bild img { filter: grayscale(1); opacity: 0.55; }
.stueck__stempel {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--weiss); background: var(--leder); border-radius: var(--r-pille); padding: 0.35rem 0.75rem;
}
/* Beispielstuecke (26.09.2026, js/shop-seiten.js): derselbe Stempel wie
   "Verkauft", die Schrift in Hellgold (9.5:1 auf Etui-Braun). Keine
   Goldflaeche: Gold als Flaeche heisst "hier druecken". */
.stueck__stempel--beispiel { color: var(--gold-hell); }
.korbzeile__beispiel { margin: 0.2rem 0 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-tief); }

.shop-werkzeug {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.shop-werkzeug[hidden] { display: none; }
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter button {
  min-height: 44px; padding: 0.5rem 1.1rem;
  background: var(--weiss); border: 1px solid var(--linie-kraeftig); border-radius: var(--r-knopf);
  font-family: var(--lesen); font-size: 0.9375rem; font-weight: 600; color: var(--tinte); cursor: pointer;
}
.filter button:hover { border-color: var(--gold-tief); }
.filter button[aria-pressed='true'] { background: var(--gold); border-color: var(--gold); }
.shop-werkzeug label { font-size: 0.875rem; font-weight: 600; color: var(--grau); }
.shop-werkzeug select {
  min-height: 44px; padding: 0.4rem 2.4rem 0.4rem 1rem;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238A6516' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 1rem center / 11px 7px;
  color: var(--tinte); border: 1px solid var(--linie-kraeftig); border-radius: var(--r-knopf);
  font-family: var(--lesen); font-size: 0.9375rem;
  appearance: none; -webkit-appearance: none;
}
.shop-zahl { margin-left: auto; font-size: 0.875rem; color: var(--grau); font-variant-numeric: tabular-nums; }

.beispielband {
  max-width: none; border: 1px dashed var(--gold); border-radius: 16px; background: var(--gold-zart);
  padding: 0.9rem 1.2rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  font-size: var(--fs-klein); color: var(--grau);
}
.beispielband strong { color: var(--tinte); }

.stueckseite { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 56rem) { .stueckseite { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.stueckseite__bild { overflow: hidden; border-radius: var(--r-karte); background: var(--perl); aspect-ratio: 1; display: grid; place-items: center; }
.stueckseite__bild img { width: 100%; height: 100%; object-fit: cover; }
.stueckseite__wort h1 { font-size: var(--fs-h2); margin-bottom: 0.8em; }
.stueckseite__wort > p { color: var(--grau); }
.stueckseite__preis { display: block; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; margin: 1.4rem 0 1.25rem; }
.stueckseite__wort .feld { margin-top: 2rem; }

.blattdaten { width: 100%; border-collapse: collapse; }
.blattdaten th, .blattdaten td { padding: 0.65rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.blattdaten th { font-size: var(--fs-marke); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); width: 11rem; padding-right: 0.75rem; }
.blattdaten td { font-size: var(--fs-klein); font-variant-numeric: tabular-nums; }
.blattdaten th + td, .blattdaten td + td { padding-left: 1rem; }
.blattdaten tr:last-child th, .blattdaten tr:last-child td { border-bottom: 0; }
/* Eine Zelle, die einen Satz traegt statt eines Wertes. */
.blattdaten--wort td { font-variant-numeric: normal; line-height: 1.55; color: var(--grau); }
@media (max-width: 36rem) { .blattdaten th { width: auto; } }

.korbliste { border-top: 1px solid var(--linie); }
.korbzeile { display: grid; gap: 1rem; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
@media (max-width: 36rem) {
  .korbzeile { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
  .korbzeile > :last-child { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .korbzeile__bild { width: 64px !important; height: 64px !important; }
}
/* Die Summe im Warenkorb sitzt schon in einer zartgoldenen Karte. */
.feld--kohle .summe { background: none; border: 0; padding: 0; }
.korbzeile__bild { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; background: var(--perl); }
.korbzeile__weg { background: none; border: 0; padding: 0.5rem; min-height: 44px; min-width: 44px; color: var(--grau); font-family: var(--lesen); font-size: 0.875rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--gold); }
.korbzeile__weg:hover { color: var(--tinte); }
.still-knopf { background: none; border: 0; padding: 0.5rem 0; min-height: 44px; font-family: var(--lesen); font-size: 0.9375rem; font-weight: 600; color: var(--grau); cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--gold); }
.still-knopf:hover { color: var(--tinte); }
.leerstand { text-align: left; color: var(--grau); max-width: 46rem; margin-block: 1rem 2rem; }

/* --- 25 · Aktuelles ----------------------------------------------------- */

.beitraege { display: grid; gap: var(--spalt); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .beitraege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.beitraege .feld h2 { font-size: var(--fs-h3); font-weight: var(--gewicht-titel-klein); letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 0.4rem; }
.beitraege .feld p { color: var(--grau); font-size: var(--fs-klein); line-height: 1.55; }
.beitrag__datum { display: block; font-size: 0.875rem; font-weight: 700; color: var(--gold-tief); margin-bottom: 0.9rem; font-variant-numeric: tabular-nums; }

/* --- 26 · Der Fuss ------------------------------------------------------ */

/* Der Fuss ist weiss (Joel, 23.09.2026 abends), und das Logo des Kunden steht
   hier gross und freigestellt: der eine Ort, an dem es ganz zur Geltung kommt. */
.fuss { background: var(--weiss); color: var(--grau); border-top: 1px solid var(--linie); padding-block: var(--takt) 2rem; font-size: var(--fs-klein); }
.fuss a { color: var(--tinte); text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.fuss h2 { font-family: var(--titel); color: var(--tinte); font-size: 1rem; font-weight: var(--gewicht-titel-klein); letter-spacing: 0; margin-bottom: 1rem; }
.fuss__raster { display: grid; gap: 2.25rem 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .fuss__raster { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.55rem; }
.fuss__logo { width: clamp(200px, 20vw, 280px); height: auto; margin: -0.5rem 0 1.5rem; }
.fuss p { max-width: 34ch; }
.fuss .sprachen-fuss { max-width: none; }   /* sonst bricht die Sprachzeile nach "Italiano" um */
.fuss__recht { margin-top: var(--takt-klein); padding-top: 1.25rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; align-items: baseline; font-size: 0.875rem; }

/* --- 27 · Kontaktleiste am Telefon -------------------------------------- */

.leiste { display: none; }
@media (max-width: 47.99rem) {
  .leiste {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: center;
    height: var(--h-leiste);
    position: fixed; inset: auto 0 0 0; z-index: var(--z-leiste);
    padding: 0 0.75rem;
    background: rgb(255 255 255 / 0.97); border-top: 1px solid var(--linie);
    box-shadow: 0 -10px 30px -20px rgb(42 36 32 / 0.35);
    transition: transform 0.25s ease;
  }
  .leiste a {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 46px; border-radius: var(--r-knopf); text-decoration: none;
    font-size: 1rem; font-weight: 700; color: var(--tinte);
    border: 1px solid var(--linie-kraeftig);
  }
  /* WhatsApp rechts im Rolex-Gruen wie alle WhatsApp-Knoepfe (Abschnitt 5). */
  .leiste a:last-child { background: var(--wa-gruen); color: var(--auf-gruen); border: 2px solid var(--wa-rand); }
  .leiste a:last-child svg { color: #25D366; }
  .leiste svg { width: 19px; height: 19px; }
  body { padding-bottom: calc(var(--h-leiste) + var(--h-ticker)); }
  .ticker { inset-block-end: var(--h-leiste); }
  html[data-rechner-sichtbar='ja'] .ticker { transform: translateY(var(--h-leiste)); }
  /* Solange der Rechner im Bild ist, ist der Betrag die Handlung. */
  html[data-rechner-sichtbar='ja'] .leiste { transform: translateY(110%); }
  /* UEBER DUNKLEM GRUND (der Guss, die erste Ansicht der Startseite) bleibt
   die Leiste seit dem 27.09.2026 stehen, durchsichtig: nur die zwei gruenen
   Knoepfe liegen auf dem Film, darueber das durchsichtige Kursband (Joel:
   "dass man zu jeder Zeit auf Anrufen klicken kann ... man koennte mit
   diesem Platz fuellen"). Vorher fuhr sie ueber Dunkel weg (25.09.2026:
   "den Anrufbereich weiter runter, dass man es in der ersten Ansicht nicht
   sieht"). Titel und Scroll-Hinweis im Guss sitzen darum um die Hoehe der
   Leiste hoeher (Abschnitt 8a). */
  html[data-kursband='dunkel'] .leiste { background: transparent; border-top-color: transparent; box-shadow: none; }
}

/* --- 28 · Bewegung beim Hereinscrollen ---------------------------------- */

/* Nur wenn js/bewegung.js laeuft und keine Bewegungsruhe gilt. Ohne Skript
   steht alles im Endzustand da.
   Seit dem 25.09.2026 abends nach rolex.com in drei Arten (bewegung.js 3):
   FENSTER (Kacheln, Karten, Preise, Bilder, Rechner) ziehen sich weit von
   unten hoch, bis 340 px, in 1.25 s mit starker Abbremsung, gestaffelt von
   links nach rechts (140 ms). Die Deckung kommt schneller als der Weg, damit
   nichts als leerer Kasten hochschwebt.
   TEXT kommt 40 px von unten, KNOEPFE 24 px und 180 ms nach dem Text. */
html[data-bewegung='an'] [data-zeigen]:not([data-gezeigt]) { opacity: 0; transform: translate3d(0, var(--hub), 0); }
html[data-bewegung='an'] [data-zeigen] {
  --hub: 40px; --weg: 0.9s; --deckung: 0.9s; --staffel: 90ms; --vorlauf: 0ms; --zug: var(--kurve);
  transition: opacity var(--deckung) var(--kurve), transform var(--weg) var(--zug);
  transition-delay: calc(var(--vorlauf) + var(--i, 0) * var(--staffel));
}
html[data-bewegung='an'] [data-zeigen='fenster'] {
  --hub: clamp(140px, 30vh, 340px); --weg: 1.25s; --deckung: 0.6s; --staffel: 140ms;
  --zug: cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-bewegung='an'] [data-zeigen='knopf'] {
  --hub: 24px; --weg: 0.75s; --deckung: 0.6s; --staffel: 100ms; --vorlauf: 180ms;
}

/* DER VORHANG ("maske", Joel, 25.09.2026 spaet): Ueberschrift und Einleitung
   im Startkopf und die Vorteil-Leiste steigen aus einer unsichtbaren Kante
   hoch. Weg und Ausschnitt laufen gleich: das Element steht um seine eigene
   Hoehe tiefer und ist unten um dieselbe Hoehe abgeschnitten; beides geht mit
   derselben Kurve auf null. So bleibt die Unterkante stehen, und der Text
   hebt sich aus ihr. Am Ende ein paar Punkte Luft, damit Unterlaengen (g, p)
   nicht angeschnitten sind; danach nimmt bewegung.js die Maske ganz ab. */
html[data-bewegung='an'] [data-zeigen='maske'] {
  --hub: 100%; --weg: 1.1s; --deckung: 0.7s; --staffel: 160ms;
  --zug: cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity var(--deckung) var(--kurve), transform var(--weg) var(--zug), clip-path var(--weg) var(--zug);
}
html[data-bewegung='an'] [data-zeigen='maske']:not([data-gezeigt]) { clip-path: inset(0 0 100% 0); }
html[data-bewegung='an'] [data-zeigen='maske'][data-gezeigt] { clip-path: inset(-0.3em -0.3em -0.4em -0.3em); }
/* Im Startkopf kommt der Rechner nach dem Text. */
html[data-bewegung='an'] .start [data-zeigen='fenster'] { --vorlauf: 300ms; }

/* Die Trennlinien der Vorteil-Leiste zeichnen sich von oben nach unten in
   Gold und werden dann zur Haarlinie. Solange die Spalte noch ein Element mit
   data-zeigen traegt, ersetzt ein ::before die Randlinie; ist alles gezeigt,
   gilt wieder die Randlinie in derselben Farbe. */
@media (min-width: 40rem) {
  html[data-bewegung='an'] .vorteil + .vorteil:has(> [data-zeigen]) { position: relative; border-left-color: transparent; }
  html[data-bewegung='an'] .vorteil + .vorteil:has(> [data-zeigen])::before {
    content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
    background: var(--gold); transform: scaleY(0); transform-origin: top;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s ease;
    transition-delay: calc(var(--linie-i, 1) * 160ms), calc(var(--linie-i, 1) * 160ms + 0.7s);
  }
  html[data-bewegung='an'] .vorteil + .vorteil:has(> [data-gezeigt])::before { transform: scaleY(1); background-color: var(--linie); }
  .vorteil:nth-child(3) { --linie-i: 2; }
  .vorteil:nth-child(4) { --linie-i: 3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* --- 28a · Das Randlicht ------------------------------------------------ */

/* Nach einer Bildschirmaufnahme, die Joel am 25.09.2026 mitgebracht hat
   ("Border glow"): ein Lichtbogen liegt auf dem Rand eines Knopfs und steht
   immer dort, wo der Mauszeiger ist. Hier in Gold, und zweimal eingesetzt:
   1. Kommt ein Knopf oder ein Icon zum ersten Mal ins Bild, laeuft das Licht
      einmal ganz um den Rand herum und erlischt.
   2. Danach ruht der Rand. Naehert sich der Mauszeiger, leuchtet der Rand an
      der naechsten Stelle auf und folgt ihm.
   Alles haengt an html[data-randlicht='an'], das js/bewegung.js (Abschnitt 5)
   erst setzt, wenn es laeuft. Ohne Skript, ohne @property und bei
   reduzierter Bewegung bleibt jeder Knopf und jedes Icon, wie es war. */

/* A · KNOEPFE. Das Skript legt in jeden Knopf ein leeres
   <span class="randlicht"> und fuehrt darauf --rl-x und --rl-y (die Stelle
   des Lichts, in px ab der linken oberen Aussenecke) und --rl-staerke. */
html[data-randlicht='an'] :is(.sprachwahl > summary, .leiste a, .filter button, .rechner__chip,
  .rechner__sammeln, .rechner__reiter, .rechner__posten-weg, .preis, .schritt,
  .paar__bild, .seitenkopf__bild, .stueckseite__bild) { position: relative; }

.randlicht {
  /* Farben auf hellem Grund: ein sattes Gold als Kante, weiches Gold als Hof. */
  --rl-kern: #C8942A;
  --rl-licht: rgb(222 176 68 / 0.92);
  --rl-hof: rgb(218 166 48 / 0.8);
  --rl-hof-weit: rgb(218 166 48 / 0.42);
  position: absolute; inset: calc(-1 * var(--rl-rand, 1px));
  border-radius: inherit; pointer-events: none;
  opacity: var(--rl-staerke, 0);
  transition: opacity 0.6s var(--kurve);
  /* Der Hof: ein Schein um den leuchtenden Bogen, innen wie aussen. Er liegt
     auf der Huelle, nicht auf dem maskierten Rand, sonst schnitte die Maske
     ihn mit ab. */
  filter: drop-shadow(0 0 4px var(--rl-hof)) drop-shadow(0 0 14px var(--rl-hof-weit));
}
.randlicht[data-rl-lauf] { transition: none; }
.randlicht[data-rl-nah] { transition-duration: 0.18s; }
/* Die Kante: ein Lichtkreis um die Stelle, sichtbar nur im Rand selbst. */
.randlicht::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: var(--rl-breite, 2px);
  background: radial-gradient(circle var(--rl-r, 48px) at var(--rl-x, 50%) var(--rl-y, 0px),
    var(--rl-kern) 0%, var(--rl-kern) 16%, var(--rl-licht) 42%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Auf dem gold gefuellten Knopf ist die Kante hell wie Licht auf poliertem
   Metall, der Hof faellt golden nach aussen. */
.tat:not(.tat--still, .tat--wa) > .randlicht {
  --rl-kern: #FFFBEF;
  --rl-licht: rgb(255 236 186 / 0.95);
  --rl-hof: rgb(226 176 60 / 0.95);
  --rl-hof-weit: rgb(226 176 60 / 0.5);
}
/* Auf dunklem Grund (Kopfbild des Shops, durchsichtige Kopfleiste ueber dem
   Guss) ein helles Champagnergold. */
.kopfbild .randlicht,
html[data-kopf='dunkel'] .kopf:not(:has(.navi__liste[data-offen='ja'])) .randlicht,
.tat--wa > .randlicht, .leiste a:last-child > .randlicht,
a.tat[href^="tel:"] > .randlicht, .leiste a[href^="tel:"] > .randlicht {
  --rl-kern: #FBE8B4;
  --rl-licht: rgb(240 212 140 / 0.9);
  --rl-hof: rgb(232 198 122 / 0.75);
  --rl-hof-weit: rgb(232 198 122 / 0.38);
}

/* B · RUNDE ICONS: Haken, Hinweis-i, Schrittnummer, Fragen-Plus. Sie sind
   Pseudo-Elemente und koennen kein Kind tragen. Ihr Rand wird deshalb aus
   Hintergrundschichten gebaut: innen die Fuellung (padding-box), darunter im
   Rand (border-box) ein Kegelverlauf mit dem Lichtbogen und die ruhige
   Randfarbe. Den Lauf fuehrt CSS allein: --rl-winkel dreht den Bogen,
   --rl-bogen blendet ihn ein und aus. Beide muessen registriert sein, sonst
   springen sie statt zu laufen; darum prueft das Skript CSS.registerProperty. */
@property --rl-winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --rl-bogen { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --rl-fuellung { syntax: '<color>'; inherits: false; initial-value: transparent; }

/* :where haelt diese Grundregel ohne Gewicht, damit die Regeln je Icon darunter
   (Farbe des Bogens, Schein) sie ueberschreiben koennen. */
html[data-randlicht='an'] :where(.punkte li, .hinweis:not(.kopfbild .hinweis), .schritt h3)::before,
html[data-randlicht='an'] :where(.frage summary)::after {
  --rl-bogen-farbe: #B8862A;
  --rl-ring: conic-gradient(from var(--rl-winkel), var(--rl-bogen), transparent 75deg 285deg, var(--rl-bogen));
  border: 1.5px solid transparent;
  box-shadow: 0 0 14px -3px var(--rl-bogen);
}
html[data-randlicht='an'] .punkte li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A6516' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E") no-repeat center / 0.8rem padding-box,
    linear-gradient(var(--gold-zart), var(--gold-zart)) padding-box,
    var(--rl-ring) border-box,
    linear-gradient(var(--gold-blass), var(--gold-blass)) border-box;
}
html[data-randlicht='an'] .punkte--nein li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235D5852' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") no-repeat center / 0.7rem padding-box,
    linear-gradient(var(--perl), var(--perl)) padding-box,
    var(--rl-ring) border-box,
    linear-gradient(var(--linie), var(--linie)) border-box;
}
/* Das Hinweis-i auf dem dunklen Kopfbild hat eine durchscheinende Fuellung;
   dort wuerde der Randverlauf durchschimmern. Es bleibt, wie es war. */
html[data-randlicht='an'] .hinweis:not(.kopfbild .hinweis)::before {
  background:
    linear-gradient(var(--gold-zart), var(--gold-zart)) padding-box,
    var(--rl-ring) border-box,
    linear-gradient(var(--gold-blass), var(--gold-blass)) border-box;
}
/* Die goldene Schrittnummer: ein heller Bogen auf dem Gold. */
html[data-randlicht='an'] .schritt h3::before {
  --rl-bogen-farbe: #FFF4D2;
  background:
    linear-gradient(var(--gold), var(--gold)) padding-box,
    var(--rl-ring) border-box,
    linear-gradient(var(--gold), var(--gold)) border-box;
  box-shadow: 0 0 14px -3px rgb(from var(--rl-bogen) 212 164 58 / alpha);
}
/* Das Fragen-Plus: die Fuellung wechselt beim Oeffnen weich von Perlgrau zu
   Gold (--rl-fuellung ist registriert und laesst sich deshalb ueberblenden). */
html[data-randlicht='an'] .frage summary::after {
  --rl-fuellung: var(--perl);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231C1A17' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E") no-repeat center / 12px padding-box,
    linear-gradient(var(--rl-fuellung), var(--rl-fuellung)) padding-box,
    var(--rl-ring) border-box,
    linear-gradient(var(--rl-fuellung), var(--rl-fuellung)) border-box;
  transition: transform 0.3s var(--kurve), --rl-fuellung 0.3s ease;
}
html[data-randlicht='an'] .frage[open] summary::after { --rl-fuellung: var(--gold); --rl-bogen-farbe: #FFF4D2; }

/* Der Lauf: einmal im Uhrzeigersinn um den Kreis, von oben, ein- und
   ausgeblendet. data-rl-kreis setzt das Skript beim ersten Erscheinen und
   nimmt es danach wieder weg; --rl-verzug staffelt eine Liste. */
@keyframes rl-kreis {
  0% { --rl-winkel: 0deg; --rl-bogen: transparent; }
  20% { --rl-bogen: var(--rl-bogen-farbe); }
  65% { --rl-bogen: var(--rl-bogen-farbe); }
  100% { --rl-winkel: 360deg; --rl-bogen: transparent; }
}
/* Dasselbe unter zweitem Namen: nur ein neuer Name startet die Animation neu. */
@keyframes rl-kreis-zeiger {
  0% { --rl-winkel: 0deg; --rl-bogen: transparent; }
  20% { --rl-bogen: var(--rl-bogen-farbe); }
  65% { --rl-bogen: var(--rl-bogen-farbe); }
  100% { --rl-winkel: 360deg; --rl-bogen: transparent; }
}
html[data-randlicht='an'] :is(.punkte li, .hinweis, .schritt h3)[data-rl-kreis]::before,
html[data-randlicht='an'] .frage summary[data-rl-kreis]::after {
  animation: rl-kreis 1.3s cubic-bezier(0.45, 0, 0.25, 1) var(--rl-verzug, 0ms) both;
}
/* Mit der Maus: zeigt man auf die Zeile, den Schritt oder die Frage, laeuft
   das Licht noch einmal um das Icon. */
@media (hover: hover) and (pointer: fine) {
  html[data-randlicht='an'] :is(.punkte li, .hinweis):hover::before,
  html[data-randlicht='an'] .schritt:hover h3::before,
  html[data-randlicht='an'] .frage summary:hover::after {
    animation: rl-kreis-zeiger 1.1s cubic-bezier(0.45, 0, 0.25, 1) both;
  }
}

/* --- 29 · Drucken ------------------------------------------------------- */

@media print {
  .kopf, .leiste, .ticker, .korb-knopf, .menue-knopf, .schluss__bild { display: none !important; }
  body { padding: 0; color: #000; background: #fff; font-size: 11pt; }
  .fuss { background: #fff; color: #000; }
  .fuss a, .fuss h2, .fuss__name { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* DER ZWISCHENTITEL AM TELEFON (Joel, 27.09.2026: "da muss ein Titel hin").
   Hochkant steht die h1 im Guss (js/guss.js); ohne sie begann der Kopf
   unter dem Film mit dem Fliesstext. Die h2 zeigt sich nur, wenn die h1
   nicht mehr im Kopf steht. Der Telefonknopf faellt dort weg: die
   Kontaktleiste unten traegt "Anrufen" schon. Dazu weniger Weiss zwischen
   Film und Text (kuerzerer Auslauf, kleineres Polster oben). */
.start__zwischen { display: none; margin: 0; }
.start__wort:not(:has(#start-titel)) .start__zwischen { display: block; }
.start__wort:not(:has(#start-titel)) .start__lede { margin-top: 0.75rem; }
@media (max-width: 47.99rem) {
  .start__tel { display: none; }
  .guss { --guss-auslauf: clamp(6rem, 15vh, 8rem); }
  .start { padding-top: 0.25rem; }
}