/* ============================================================================
   Die Sammlung (gamroth-sammlung) · Vorlage 6
   Schaukasten-Palette, Etikett-Typografie, Objektindex links, Laufkarte rechts.
   scrollcraft.css bleibt unangetastet; hier nur Tokens + eigenes Markup.
   ========================================================================== */

/* Etikettschrift: IBM Plex Mono, lokal (SPEC §7 — keine externen Font-Hosts). */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibmplexmono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sc-canvas:     #F6F4EE;   /* Karteikarton */
  --sc-surface:    #E4E6E3;   /* Schaukastengrau */
  --sc-ink:        #23262A;   /* Graphit */
  --sc-ink-soft:   #5C6066;
  --sc-accent:     #2B4A73;   /* Stempelblau */
  --sc-accent-ink: #F2F4F6;

  --sc-font-display: "Charter", "Iowan Old Style", "Georgia", serif;
  --sc-font-text:    "Charter", "Iowan Old Style", "Georgia", serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --sc-shadow-color: 210 15% 25%;

  --idx-w: 15.5rem;
  --lk-w: 12.5rem;
  --karte-grund: #FDFCF8;
  --linie: color-mix(in oklab, var(--sc-ink) 16%, transparent);
}

html { scroll-behavior: smooth; }

/* ------------------------------------------------------------ Grundraster */
main {
  padding-left: var(--idx-w);
}

.station-innen {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

/* ------------------------------------------------------------ Objektindex */
.index {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--idx-w);
  z-index: var(--sc-z-chrome);
  background: var(--sc-canvas);
  border-right: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  padding: var(--sc-6) var(--sc-5);
  gap: var(--sc-6);
}
.index-kopf { display: grid; gap: var(--sc-2); }
.index-marke {
  margin: 0;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink);
}
.index-person { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.index-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-base);
  color: var(--sc-accent);
  text-decoration-thickness: 1px;
  width: fit-content;
}
.index-toggle { display: none; }
.index-nav { border-top: 1px solid var(--linie); padding-top: var(--sc-5); }
.index-liste {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 2px;
}
.index-liste a {
  display: flex;
  align-items: baseline;
  gap: var(--sc-3);
  padding: 0.55rem 0.5rem;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
  border-radius: var(--sc-r-sm);
  color: var(--sc-ink);
}
.index-liste a:hover { background: color-mix(in oklab, var(--sc-surface) 70%, transparent); }
.index-liste a[aria-current="true"] { background: var(--sc-surface); }
.idx-nr {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  color: var(--sc-accent);
  letter-spacing: var(--sc-track-wide);
}
.idx-name { font-size: var(--sc-t-sm); }
.index-demo {
  margin-top: auto;
  margin-bottom: 0;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  border: 1px solid var(--linie);
  border-radius: var(--sc-r-sm);
  padding: 0.35rem 0.5rem;
  width: fit-content;
}

/* -------------------------------------------------------------- Etiketten */
.etikett-kopf {
  margin: 0 0 var(--sc-4);
  display: flex;
  align-items: baseline;
  gap: var(--sc-3);
  font-family: var(--sc-font-mono);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  font-size: var(--sc-t-xs);
}
.etikett-nr {
  color: var(--sc-accent-ink);
  background: var(--sc-accent);
  padding: 0.15rem 0.45rem;
  border-radius: var(--sc-r-sm);
}
.etikett-art { color: var(--sc-ink-soft); }

.etikett-zeilen {
  margin: var(--sc-6) 0 0;
  border-top: 1px solid var(--linie);
}
.etikett-zeile {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--sc-4);
  padding: var(--sc-4) 0;
  border-bottom: 1px solid var(--linie);
}
.etikett-zeile dt {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  padding-top: 0.2rem;
}
.etikett-zeile dd { margin: 0; }

.tel-gross {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xl);
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-accent);
  display: inline-block;
  padding-block: 0.15rem;
}
.tel-zusatz { display: block; margin-top: var(--sc-2); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

.exponat-caption {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-ink-soft);
  margin-top: var(--sc-2);
}

/* -------------------------------------------------- 001 · Inventartafel */
.station--tafel {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--sc-7);
}
.tafel {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  width: 100%;
}
.tafel-name {
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: var(--sc-t-3xl);
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  margin: 0 0 var(--sc-2);
  text-wrap: balance;
}
.tafel-person { margin: 0; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }
.tafel-lead {
  margin: var(--sc-5) 0 0;
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  max-width: 40ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------ 002 · Das Regal */
.regal-stage {
  background: var(--sc-surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sc-6);
}
.regal-kopf {
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  padding-top: var(--sc-6);
}
.regal-kopf h2 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug);
  margin: 0;
}
.regal-unterzeile { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); max-width: 52ch; }
.regal-rail {
  align-items: stretch;
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  /* Endpolster rechts: das letzte Exponat kommt am Ende der Fahrt frei vor der
     fixierten Laufkarte zum Stehen, statt unter ihr zu enden. */
  padding-right: calc(var(--lk-w) + clamp(3rem, 6vw, 6rem));
  padding-bottom: var(--sc-7);
  width: max-content;
}
.exponat {
  width: clamp(17rem, 30vw, 24rem);
  flex: none;
  background: var(--karte-grund);
  border: 1px solid var(--linie);
  border-radius: var(--sc-r-sm);
  padding: var(--sc-5);
  box-shadow: var(--sc-e1);
  display: flex;
  flex-direction: column;
  gap: var(--sc-2);
  margin: 0;
}
.exponat--bild { padding: var(--sc-3); gap: 0; }
.exponat--bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--sc-r-sm) - 2px);
  min-height: 0;
  flex: 1;
}
.exponat--bild .exponat-caption { padding: var(--sc-3) var(--sc-2) var(--sc-1); margin: 0; }
.exponat-nr {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-accent);
  margin: 0;
}
.exponat-problem {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug);
  margin: 0;
  text-wrap: balance;
}
.exponat-begriff {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
  padding-bottom: var(--sc-2);
  border-bottom: 1px solid var(--linie);
}
.exponat-zeile { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }

/* ------------------------------------------------------- 003 · Ablauf */
.station--ablauf { padding-block: clamp(5rem, 10vw, 8rem); }
.station--ablauf .station-innen {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.ablauf-bild { margin: 0; position: sticky; top: var(--sc-7); }
.ablauf-bild img { display: block; width: 100%; height: auto; border-radius: var(--sc-r-sm); border: 1px solid var(--linie); }
.ablauf-text h2, .station--person h2, .werkzeug-tafel h2, .anfrage-plakette h2 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug);
  margin: 0 0 var(--sc-5);
  text-wrap: balance;
}
.ablauf-liste {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: schritt;
  display: grid;
  gap: var(--sc-5);
}
.ablauf-liste li {
  counter-increment: schritt;
  border-top: 1px solid var(--linie);
  padding-top: var(--sc-4);
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--sc-4);
}
.ablauf-liste li::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-sm);
  color: var(--sc-accent);
  grid-row: 1 / span 2;
  padding-top: 0.15rem;
}
.ablauf-schritt { margin: 0; font-weight: 700; }
.ablauf-detail { margin: var(--sc-1) 0 0; color: var(--sc-ink-soft); }

/* ------------------------------------------------------- 004 · Person */
.station--person { padding-block: clamp(5rem, 10vw, 8rem); background: var(--sc-surface); }
.station-innen--person {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.person-bild { margin: 0; }
.person-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sc-r-sm);
  border: 1px solid var(--linie);
  background: var(--karte-grund);
  padding: var(--sc-2);
}
.etikett-zeilen--person { margin-top: var(--sc-4); }
.stimmen { margin-top: var(--sc-7); }
.stimmen-hinweis {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-4);
  max-width: 60ch;
}
.stimme { margin: 0 0 var(--sc-5); padding-left: var(--sc-4); border-left: 2px solid var(--sc-accent); }
.stimme blockquote { margin: 0; }
.stimme p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.4; text-wrap: pretty; }
.stimme figcaption {
  margin-top: var(--sc-2);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-ink-soft);
}

/* ----------------------------------------------------- 005 · Werkzeug */
.station--werkzeug { padding-block: clamp(5rem, 10vw, 8rem); }
.werkzeug-tafel {
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  border-radius: var(--sc-r-md);
  padding: clamp(2rem, 5vw, 4rem);
  max-width: 46rem;
}
.werkzeug-tafel .etikett-nr { background: var(--sc-accent-ink); color: var(--sc-accent); }
.werkzeug-tafel .etikett-art { color: color-mix(in oklab, var(--sc-accent-ink) 78%, var(--sc-accent)); }
.werkzeug-intro { margin: 0 0 var(--sc-4); font-size: var(--sc-t-lg); line-height: 1.44; text-wrap: pretty; }
.werkzeug-text { margin: 0; line-height: var(--sc-leading-body); color: color-mix(in oklab, var(--sc-accent-ink) 88%, var(--sc-accent)); }
.werkzeug-hinweis {
  margin: var(--sc-5) 0 0;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-accent-ink) 80%, var(--sc-accent));
}

/* ------------------------------------------------------ 006 · Anfrage */
.station--anfrage { padding-block: clamp(5rem, 10vw, 8rem) 0; }
.station-innen--anfrage {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.anfrage-plakette {
  background: var(--karte-grund);
  border: 1px solid var(--linie);
  border-radius: var(--sc-r-sm);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--sc-e1);
}
.anfrage-bild { margin: 0; display: grid; gap: var(--sc-5); }
.anfrage-bild img { display: block; width: 100%; height: auto; border-radius: var(--sc-r-sm); border: 1px solid var(--linie); }

.fuss {
  margin-top: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--linie);
  padding: var(--sc-5) clamp(1.25rem, 4vw, 4rem) var(--sc-7);
  max-width: 68rem;
  margin-inline: auto;
}
.fuss-demo {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.fuss-zeile {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-5);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}
.fuss-zeile a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------------------- Laufkarte */
/* Nur visuell verborgen, bleibt im Accessibility-Tree (kein display:none). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.laufkarte {
  width: var(--lk-w);
  background: var(--karte-grund);
  border: 1px solid var(--linie);
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e2);
  padding: var(--sc-4);
  position: relative;
}
/* Lochung am linken Rand: die Karte hing an einem Haken. */
.laufkarte::before {
  content: "";
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--sc-canvas);
  border: 1px solid var(--linie);
}
.lk-titel {
  margin: 0 0 var(--sc-3);
  padding-left: 1.4rem;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.lk-stationen {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--linie);
}
.lk-station {
  display: flex;
  align-items: center;
  gap: var(--sc-2);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: var(--sc-t-xs);
}
.lk-nr {
  font-family: var(--sc-font-mono);
  color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-wide);
}
.lk-name { color: var(--sc-ink-soft); flex: 1; }
.lk-stempel {
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  border: 1px solid var(--linie);
  flex: none;
  position: relative;
  transition: background var(--sc-d-base) var(--sc-ease-out),
              border-color var(--sc-d-base) var(--sc-ease-out),
              transform var(--sc-d-base) var(--sc-ease-out);
}
.lk-gestempelt .lk-nr, .lk-gestempelt .lk-name { color: var(--sc-ink); }
.lk-gestempelt .lk-stempel {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
  transform: rotate(-8deg);
}
.lk-gestempelt .lk-stempel::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  border: 1.5px solid var(--sc-accent-ink);
  opacity: 0.9;
}
@keyframes lk-druck {
  0% { transform: scale(1.6) rotate(-8deg); opacity: 0.4; }
  60% { transform: scale(0.92) rotate(-8deg); }
  100% { transform: scale(1) rotate(-8deg); opacity: 1; }
}
.lk-frisch .lk-stempel { animation: lk-druck 420ms var(--sc-ease-out); }
.lk-naechste {
  margin: var(--sc-3) 0 0;
  font-size: var(--sc-t-xs);
  display: grid;
  gap: 0.15rem;
}
.lk-naechste-label {
  font-family: var(--sc-font-mono);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.lk-naechste-wert { font-size: var(--sc-t-sm); color: var(--sc-ink); }
.lk-naechste-wert a {
  color: var(--sc-accent);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -0.5rem;
}

/* Angeheftet: fixiert am rechten Rand, bis sie im Finale andockt. */
.laufkarte.lk-fixiert {
  position: fixed;
  right: clamp(0.75rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: calc(var(--sc-z-chrome) + 5);
  transition: transform 600ms var(--sc-ease-in-out), opacity 600ms var(--sc-ease-out);
}
.laufkarte.lk-andocken { transition: transform 600ms var(--sc-ease-in-out); }

.lk-dock {
  margin-top: var(--sc-2);
  border: 1px dashed var(--linie);
  border-radius: var(--sc-r-sm);
  padding: var(--sc-3);
  min-height: 4rem;
}
.lk-dock-label {
  margin: 0 0 var(--sc-2);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.lk-dock .laufkarte { box-shadow: var(--sc-e1); width: 100%; }

/* ------------------------------------------------------------- Mobil */
@media (max-width: 900px) {
  :root { --idx-w: 0rem; }
  main { padding-left: 0; padding-top: var(--kopf-h, 7.5rem); }
  .station { scroll-margin-top: var(--kopf-h, 7.5rem); }

  .index {
    inset: 0 0 auto 0;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--linie);
    padding: var(--sc-3) var(--sc-4);
    gap: var(--sc-3);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .index-kopf { flex: 1; gap: 0.1rem; }
  .index-person { display: none; }
  .index-tel { min-height: 44px; }
  .js .index-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 var(--sc-4);
    background: var(--sc-surface);
    border: 1px solid var(--linie);
    border-radius: var(--sc-r-sm);
    font-family: var(--sc-font-mono);
    font-size: var(--sc-t-xs);
    letter-spacing: var(--sc-track-wide);
    text-transform: uppercase;
    cursor: pointer;
  }
  .index-nav { flex-basis: 100%; border-top: 0; padding-top: 0; }
  .js .index-nav { display: none; }
  .js .index.ist-offen .index-nav { display: block; border-top: 1px solid var(--linie); padding-top: var(--sc-3); }
  .index-demo { display: none; }

  .station--tafel { min-height: calc(100svh - var(--kopf-h, 7.5rem)); }

  .station--ablauf .station-innen,
  .station-innen--person,
  .station-innen--anfrage { grid-template-columns: 1fr; }
  .ablauf-bild { position: static; max-width: 30rem; }
  .person-bild { max-width: 22rem; }
  .anfrage-bild { max-width: 26rem; }
  .etikett-zeile { grid-template-columns: 1fr; gap: var(--sc-1); }

  /* Laufkarte als kompakte Leiste unten links; rechts bleibt Platz für den
     Bußgeldlotse-Knopf. */
  .laufkarte.lk-fixiert {
    top: auto;
    right: auto;
    left: 0.75rem;
    bottom: 0.75rem;
    transform: none;
    width: min(58vw, 13rem);
    padding: 0.5rem 0.65rem;
  }
  .laufkarte.lk-fixiert::before { display: none; }
  .laufkarte.lk-fixiert .lk-titel { display: none; }
  .laufkarte.lk-fixiert .lk-stationen { display: flex; border-top: 0; gap: 0.35rem; }
  .laufkarte.lk-fixiert .lk-station { border-bottom: 0; padding: 0; }
  /* Visuell kompakt, aber Nummer + Name bleiben für Screenreader erhalten
     (sr-only-Muster statt display:none). */
  .laufkarte.lk-fixiert .lk-nr, .laufkarte.lk-fixiert .lk-name {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .laufkarte.lk-fixiert .lk-naechste { margin-top: 0.35rem; }
  .laufkarte.lk-fixiert .lk-naechste-label { display: none; }
  .laufkarte.lk-fixiert .lk-naechste-wert { font-size: var(--sc-t-xs); }
  body.hat-laufkarte-fixiert .fuss { padding-bottom: 7rem; }
  /* Auf dem Telefon wird die Laufkarte erst beim Losgehen mitgenommen: bei
     Scroll 0 ist sie ausgeblendet, damit sie die Hero-Telefonzeile nie
     verdeckt (K8). Der Stempel-Zustand ist davon unberührt. */
  .laufkarte.lk-fixiert:not(.lk-unterwegs) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
  }
  .laufkarte.lk-fixiert { transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); }
}

/* Bußgeldlotse-Pill (Drittanbieter-Embed, .bgl-fab): auf schmalen Telefonen
   kollidierte die volle Pill (162px breit, unten rechts) mit der Ecke der
   Hero-Telefonnummer. Das Embed bietet keinen Positions-Parameter, darum
   wird die Pill hier per Override auf einen reinen Icon-Knopf (56px)
   verkleinert — das aria-label des Knopfs bleibt, nur der Schriftzug
   verschwindet. Die Zonen von Telefonnummer (links) und Knopf (rechts)
   berühren sich damit bei keiner Scroll-Position mehr. button.bgl-fab
   schlägt das zur Laufzeit injizierte .bgl-fab des Embeds per Spezifität.
   640px = eigener Mobil-Breakpoint des Embeds. */
@media (max-width: 640px) {
  button.bgl-fab {
    width: 56px;
    padding: 0;
    justify-content: center;
  }
  button.bgl-fab span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lk-frisch .lk-stempel { animation: none; }
  .laufkarte.lk-fixiert, .laufkarte.lk-andocken { transition: none; }
}