/* ELIZA GOLD – Website. Maße 1:1 aus dem Entwurf: Desktop „Main“ (1440), Handy „Mobile“ (390), Umbruch bei 760 px. */

/* ---------- Schriften (lokal, keine Anfrage an Google) ---------- */
@font-face {
  font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/albert-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/albert-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Century Gothic azena"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/century-gothic-azena.woff2") format("woff2");
}

:root {
  --grau: #F3F2F3;
  --text: #000;
  --text-2: #3d3d3d;
  --leise: #595959;
  --linie: #d6d4d6;
  --hover: #5c4a24;
  --rand: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--grau); color: var(--text);
  font-family: "Avenir Next", "Avenir", "Albert Sans", system-ui, sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
a:hover { color: var(--hover); }
button { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.symbol-knopf { background: none; border: 0; padding: 10px; cursor: pointer; display: flex; color: inherit; text-decoration: none; }

/* ---------- Ankündigungsleiste ---------- */
.leiste {
  height: 32px; background: #fff; display: flex; align-items: center; justify-content: center;
  gap: 28px; position: relative; padding: 0 48px;
}
.leiste[hidden] { display: none; }
.leiste .symbol-knopf { padding: 6px; }
.leiste-meldungen { min-width: 0; overflow: hidden; }
.leiste-text { margin: 0; font-size: 12px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leiste-text a { font-weight: 500; text-decoration: none; }
.leiste-text .kurz { display: none; }
.leiste-zu { position: absolute; right: 20px; top: 4px; }

/* ---------- Vollbild-Abschnitte (Hero, Glanz, Laden) ---------- */
.buehne { position: relative; overflow: hidden; color: #fff; height: max(560px, 56.25vw); }
.buehne a { color: #fff; }
.buehne > picture img, .buehne-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.verlauf-oben { position: absolute; inset: 0 0 auto 0; height: 140px; background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,0)); pointer-events: none; }
.verlauf-unten { position: absolute; inset: auto 0 0 0; height: 300px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.36)); pointer-events: none; }
.hero .verlauf-unten { background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.38)); }
.buehne-text { position: absolute; left: 0; bottom: 0; max-width: 640px; padding: 0 var(--rand) 26px; }
.buehne-text h1, .buehne-text h2 { margin: 0 0 12px; font-size: 36px; font-weight: 400; line-height: 1.15; }
.buehne-text p { margin: 0 0 18px; font-size: 14px; line-height: 1.45; }
.cta {
  display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
.buehne .cta:hover { color: #fff; opacity: .8; }

.hero { background: #b9a99a; height: max(560px, min(56.25vw, calc(100svh - 32px))); }
.glanz { background: #a8958a; }
.laden { background: #8f8a8f; }
.glanz img { object-position: 50% 35%; }
.laden img { object-position: 70% 30%; }

/* Hero-Film. Ein Clip füllt die Bühne. ZWEITER HERO-CLIP: sobald im HTML ein zweites <video class="hero-clip">
   steht und data-clips="2" gesetzt ist, teilt sich die Bühne – Desktop nebeneinander, Handy übereinander. */
.hero-medien { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.hero-medien[data-clips="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-clip { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-pause {
  position: absolute; right: 24px; bottom: 26px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.hero-pause svg { width: 12px; height: 12px; }
.hero-pause .zeichen-play { display: none; }
.hero-pause[aria-pressed="true"] .zeichen-pause { display: none; }
.hero-pause[aria-pressed="true"] .zeichen-play { display: block; }

/* ---------- Kopf ---------- */
.kopf {
  position: absolute; top: 0; left: 0; right: 0; height: 76px; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  padding: 0 var(--rand); color: #fff;
}
.menue-knopf { justify-self: start; display: flex; align-items: center; gap: 12px; background: none; border: 0; color: #fff; font-size: 14px; cursor: pointer; padding: 10px 0; }
.marke { display: flex; align-items: center; justify-content: center; gap: 14px; text-decoration: none; }
.marke-emblem { height: 34px; width: auto; }
.marke-wort { height: 19px; width: auto; }
.kopf-service { justify-self: end; display: flex; align-items: center; gap: 6px; }
.kopf svg { width: 18px; height: 18px; }
.fuss-unten svg { width: 16px; height: 16px; }

/* ---------- Menü (Seitenleiste) ---------- */
.menue {
  margin: 0; padding: 0; border: 0; width: min(420px, 100vw); max-width: none; height: 100dvh; max-height: none;
  background: #fff; color: #000; inset: 0 auto 0 0;
}
.menue-innen { height: 100%; overflow-y: auto; }
.menue::backdrop { background: rgba(0,0,0,.35); }
.menue-kopf { display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 var(--rand); }
.menue-kopf img { height: 18px; width: auto; }
.menue nav { display: flex; flex-direction: column; padding: 16px var(--rand) 40px; }
.menue nav a { font-size: 22px; font-weight: 400; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--linie); }
.menue nav a.klein { font-size: 13px; font-weight: 400; border: 0; padding: 8px 0; color: var(--leise); }
.menue nav .abstand { height: 24px; }

/* ---------- Kollektion ---------- */
.kollektion-kopf { padding: 56px var(--rand) 32px; }
.kollektion-kopf h2 { margin: 0 0 12px; font-size: 36px; font-weight: 400; line-height: 1.15; }
.einleitung { max-width: 620px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.kachel {
  display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 640 / 875;
  background: linear-gradient(to right bottom, #E0E0E0, #F3F2F3);
}
.kachel img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; mix-blend-mode: multiply; }
.kachel span { padding: 0 12px 16px; font-size: 12px; font-weight: 400; }

/* ---------- Newsletter ---------- */
.newsletter { background: #fff; }
.newsletter-innen { max-width: 820px; margin: 0 auto; padding: 48px var(--rand) 56px; }
.newsletter h2 { margin: 0 0 14px; font-size: 26px; font-weight: 400; line-height: 1.2; }
.newsletter .einleitung { margin: 0 0 22px; }
.formular { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.formular label { font-size: 11px; color: var(--leise); }
.feld { display: flex; align-items: center; border-bottom: 1px solid #8a8a8a; }
.feld input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 13px; padding: 8px 0; color: #000; border-radius: 0; }
.feld input::placeholder { color: #767676; }
.feld:focus-within { border-bottom-color: #000; }
.feld button { background: none; border: 0; padding: 10px 2px; cursor: pointer; display: flex; color: #000; }
.feld svg { width: 16px; height: 16px; }
.danke { font-size: 13px; line-height: 1.5; padding: 8px 0; }

/* ---------- Instagram ---------- */
.insta-kopf { padding: 48px var(--rand) 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; }
.insta-kopf div { display: flex; flex-direction: column; gap: 8px; }
.insta-kopf h2 { font-size: 26px; font-weight: 400; line-height: 1.2; }
.insta-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.insta-raster a { display: block; }
.insta-raster img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.insta-raster a:hover img { opacity: .9; }

/* ---------- Fußzeile (Unterseiten) ---------- */
.fuss-unten { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--rand) 20px; font-size: 11px; }
.fuss-unten strong { font-weight: 500; }
.azena-wort { font-family: "Century Gothic azena", "Century Gothic", Futura, sans-serif; letter-spacing: .02em; }

/* ---------- Unterseiten (Impressum, Datenschutz, 404) ---------- */
.seite-kopf { position: relative; height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 var(--rand); background: #fff; }
.seite-kopf .zurueck { justify-self: start; font-size: 12px; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.seite-kopf .zurueck svg { width: 14px; height: 14px; }
.seite-kopf .marke-wort { height: 18px; }
.text-seite { max-width: 760px; margin: 0 auto; padding: 56px var(--rand) 72px; font-size: 14px; line-height: 1.6; }
.text-seite h1 { font-size: 36px; font-weight: 400; line-height: 1.15; margin: 0 0 32px; }
.text-seite h2 { font-size: 18px; font-weight: 500; margin: 36px 0 10px; }
.text-seite h3 { font-size: 14px; font-weight: 500; margin: 20px 0 6px; }
.text-seite p, .text-seite ul { margin: 0 0 12px; }
.text-seite ul { padding-left: 20px; }
.text-seite address { font-style: normal; margin: 0 0 12px; }
.text-seite a { text-underline-offset: 3px; }
.luecke { background: #fff3c4; color: #5c4a24; padding: 1px 6px; border-radius: 3px; font-weight: 500; }
.stand { color: var(--leise); font-size: 12px; margin-top: 40px; }
.seite-fuss { border-top: 1px solid var(--linie); }
.seite-fuss .fuss-unten { padding-top: 20px; }
.seite-fuss .fuss-unten a { text-decoration: none; }
.azena-link { color: #767676; }

/* ---------- Handy (Entwurf „Mobile“, 390) ---------- */
@media (max-width: 760px) {
  :root { --rand: 16px; }
  .leiste { gap: 4px; padding: 0 36px; }
  .leiste-text { font-size: 11px; letter-spacing: 0; }
  .leiste-text .lang { display: none; }
  .leiste-text .kurz { display: inline; }
  .leiste svg { width: 12px; height: 12px; }
  .leiste-zu { right: 8px; }

  .buehne { height: auto; aspect-ratio: 3 / 4; }
  .hero { height: max(520px, min(693px, calc(100svh - 32px))); aspect-ratio: auto; }
  .verlauf-oben { height: 120px; background: linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,0)); }
  .verlauf-unten, .hero .verlauf-unten { height: 240px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.42)); }
  .hero .verlauf-unten { height: 280px; }
  .buehne-text { right: 0; padding: 0 16px 22px; }
  .hero .buehne-text { right: 64px; }
  .buehne-text h1 { margin: 0 0 10px; font-size: 28px; line-height: 1.15; }
  .buehne-text h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.2; }
  .buehne-text p { margin: 0 0 16px; font-size: 13px; }
  .buehne .cta { font-size: 11px; }
  .glanz img { object-position: 50% 30%; }
  .laden img { object-position: 50% 25%; }
  .hero-clip { object-position: 46% 50%; }
  .hero-medien[data-clips="2"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .hero-pause { right: 14px; bottom: 18px; }
  .hero-pause svg { width: 11px; height: 11px; }

  .kopf { height: 60px; padding: 0 6px; }
  .menue-knopf { padding: 13px; }
  .menue-knopf span { display: none; }
  .marke { gap: 9px; }
  .marke-emblem { height: 26px; }
  .marke-wort { height: 13px; }
  .kopf-service { gap: 0; }
  .kopf-service .symbol-knopf { padding: 13px 8px; }
  .kopf-service .symbol-knopf:last-child { padding: 13px 10px 13px 8px; }
  .menue-kopf { height: 60px; }

  .kollektion-kopf { padding: 40px 16px 24px; }
  .kollektion-kopf h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.2; }
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel span { padding: 0 10px 12px; font-size: 11px; }

  .newsletter-innen { padding: 36px 16px 40px; }
  .newsletter h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.25; }
  .newsletter .einleitung { margin: 0 0 20px; }
  .formular { max-width: none; }
  .feld button { padding: 12px 2px; }

  .insta-kopf { padding: 36px 16px 20px; }
  .insta-kopf h2 { font-size: 22px; }
  .insta-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .fuss-unten { padding: 14px 16px; }

  .seite-kopf { height: 60px; }
  .seite-kopf .zurueck span { display: none; }
  .seite-kopf .marke-wort { height: 13px; }
  .text-seite { padding: 36px 16px 56px; }
  .text-seite h1 { font-size: 28px; margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ======================================================================
   RUNDE 2 (26.10.2026): neues Emblem, Sortiment-Regal, Altgold-Rechner, große Fußzeile, Live-Öffnungsstatus
   ====================================================================== */
:root { --gold: #C5A260; --gold-strich: #B08D45; --gold-dunkel: #7d6330; --nacht: #0D1612; }

/* ---------- Hero: dezente Zeile mit Sternen + Öffnungsstatus ---------- */
.hero-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 18px 0 0 !important; font-size: 12px !important; color: rgba(255,255,255,.92); }
.hero-info a { text-decoration: none; }
.hero-info a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.stern { color: var(--gold); }

/* ---------- Live-Öffnungsstatus (site.js füllt [data-offen]) ---------- */
.offen { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.offen::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9a9a9a; flex: none; }
.offen.ist-offen::before { background: #3fae6a; box-shadow: 0 0 0 3px rgba(63,174,106,.22); }
.offen[hidden] { display: none; }
.laden-zeiten { font-size: 13px !important; opacity: .95; }
.laden-zeiten .offen { margin-left: 10px; }
.cta-reihe { display: flex; flex-wrap: wrap; gap: 14px 28px; }

/* ---------- Produktraster: Foto-Kachel (echtes Foto, ohne multiply) ---------- */
.kachel--foto img { mix-blend-mode: normal; object-fit: cover; }

/* ---------- Strichzeichnungen (Gold auf hell) ---------- */
.zeichnung { display: block; overflow: visible; color: var(--gold-strich); }
.zeichnung * { vector-effect: non-scaling-stroke; }
.zeichnung .zl { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.zeichnung .zf { fill: var(--zeichen-grund, #fff); stroke: currentColor; stroke-width: 1.25; stroke-linejoin: round; }
.zeichnung .zd { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 4.2; }

/* ---------- Sortiment-Regal (azena „ek2“: randlos, Einrasten, Pfeile nur mit Maus) ---------- */
.regal-sek { --ek-h: 500px; --ek-gap: 20px; --ek-rand: var(--rand); padding: 72px 0 36px; background: var(--grau); }
.regal-kopf { padding: 0 var(--rand) 24px; font-size: 36px; font-weight: 400; line-height: 1.15; max-width: 1100px; }
.regal-kopf h2, .regal-kopf p { display: inline; font: inherit; }
.regal-kopf p { color: #8a8a8a; }
.regal { position: relative; }
.regal-schiene { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ek-rand); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.regal-schiene::-webkit-scrollbar { display: none; }
.regal-schiene:focus-visible { outline: 2px solid var(--gold-strich); outline-offset: -2px; }
.regal-reihe { display: flex; gap: var(--ek-gap); width: max-content; margin: 0; padding: 12px var(--ek-rand) 36px; list-style: none; }
.regal-reihe > li { flex: none; width: 380px; scroll-snap-align: start; scroll-margin-top: 80px; }
.regal-reihe > li.ist-breit { width: 460px; }
.ek-karte {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; height: var(--ek-h); overflow: hidden;
  border-radius: 18px; background: #fff; box-shadow: 2px 4px 12px rgba(34,29,26,.07);
}
.ek-text { display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 0; }
.ek-eb { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dunkel); }
.ek-h { margin: 0; font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.ek-p { margin: 2px 0 0; max-width: 32ch; font-size: 14px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.ek-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 0; }
.ek-links a { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.ek-karte .zeichnung { width: 82%; height: auto; margin: 0 auto 30px; }
.ek-karte--foto { background: #e9eaec; }
.ek-foto { display: block; flex: 1; min-height: 0; margin-top: 18px; }
.ek-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.regal-pfeil {
  position: absolute; z-index: 3; top: calc(12px + var(--ek-h) / 2); width: 48px; height: 48px; margin-top: -24px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #000;
  background: rgba(243,242,243,.82); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(42,37,33,.10), 0 6px 16px -6px rgba(34,29,26,.28);
  transition: opacity .5s cubic-bezier(.15,0,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), background-color .2s;
}
.regal-pfeil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.regal-pfeil--zurueck { left: 24px; }
.regal-pfeil--vor { right: 24px; }
.regal-pfeil:hover { background: rgba(255,255,255,.95); }
.regal-pfeil[disabled] { opacity: 0; transform: scale(.8); pointer-events: none; }
@media not ((hover: hover) and (pointer: fine)), (max-width: 760px) { .regal-pfeil { display: none; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ek-karte { transition: transform .3s cubic-bezier(0,0,.5,1), box-shadow .3s cubic-bezier(0,0,.5,1); }
  .ek-karte:hover { transform: scale(1.01); box-shadow: 2px 4px 16px rgba(34,29,26,.14); }
}

/* ---------- Knöpfe ---------- */
.knopf-voll, .knopf-rand, .knopf-hell {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 0;
  font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  white-space: nowrap; text-align: center;
}
.knopf-voll { background: #000; color: #fff; border: 1px solid #000; }
.knopf-voll:hover { background: #2a2a2a; color: #fff; }
.knopf-voll[disabled] { opacity: .6; cursor: progress; }
.knopf-rand { background: transparent; color: #000; border: 1px solid #000; }
.knopf-rand:hover { background: #000; color: #fff; }
.knopf-hell { background: var(--gold); color: #0b0b0b; border: 1px solid var(--gold); }
.knopf-hell:hover { background: #d8b878; color: #0b0b0b; }

/* ---------- Altgold-Bereich (Rechner seit Runde 6 entfernt) ---------- */
.altgold { background: #fff; scroll-margin-top: 0; }

/* ---------- Große Fußzeile ---------- */
.mega { background: var(--nacht); color: #fff; padding: 88px var(--rand) 28px; }
.mega a { color: #fff; text-decoration: none; }
.mega a:hover { color: var(--gold); }
.mega-oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 40px; align-items: end; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.14); }
.mega-name {
  display: block; font-size: clamp(72px, 14vw, 240px); font-weight: 800; line-height: .86; letter-spacing: -.035em; text-transform: uppercase; color: #fff;
}
.mega-name span { display: block; }
.mega .mega-name:hover { color: #fff; }
.mega-sitemap { display: flex; flex-direction: column; gap: 10px; font-size: 18px; font-weight: 400; }
.mega-sitemap a { color: rgba(255,255,255,.82); }
.mega-daten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding: 48px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.mega-block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); }
.mega-block address { font-style: normal; }
.mega-emblem { width: 52px; height: 52px; margin-bottom: 6px; }
.mega-titel { margin: 0 0 2px; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.mega-block .mega-titel:first-of-type { margin-top: 0; }
.mega-link { font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.mega-tel { font-size: 26px; font-weight: 400; letter-spacing: .01em; color: #fff; }
.zeiten { margin: 0; display: grid; gap: 4px; }
.zeiten div { display: grid; grid-template-columns: 70px auto; }
.zeiten dt { color: rgba(255,255,255,.6); }
.zeiten dd { margin: 0; color: #fff; }
.offen--gross { margin: 8px 0 0; font-size: 14px; color: #fff; }
.mega-sterne { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; }
.sterne-zahl { grid-row: span 2; font-size: 48px; font-weight: 400; line-height: 1; color: #fff; }
.sterne-reihe { color: var(--gold); letter-spacing: .12em; font-size: 16px; }
.sterne-anzahl { font-size: 13px; color: rgba(255,255,255,.78); border-bottom: 1px solid rgba(255,255,255,.3); justify-self: start; }
.mega-klein { margin: 0; font-size: 11px; color: rgba(255,255,255,.45); }
.mega-unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 22px; font-size: 11px; color: rgba(255,255,255,.55); }
.mega-recht { display: flex; gap: 18px; }
.mega-unten a { color: rgba(255,255,255,.7); }
.mega-azena { color: rgba(255,255,255,.6) !important; }

/* Kopf + Menü mit neuem Emblem */
.menue-marke { display: flex; align-items: center; gap: 10px; }
.menue-kopf .menue-marke img:first-child { height: 30px; width: auto; }
.seite-kopf .marke { gap: 10px; }
.seite-kopf .marke-emblem { height: 30px; width: auto; }

/* ---------- Runde 2: Handy ---------- */
@media (max-width: 760px) {
  .hero-info { font-size: 11px !important; margin-top: 14px !important; }
  .laden-zeiten { font-size: 12px !important; }
  .laden-zeiten .offen { display: flex; margin: 6px 0 0; }
  .regal-sek { --ek-h: 450px; --ek-gap: 14px; padding: 48px 0 20px; }
  .regal-kopf { font-size: 26px; line-height: 1.2; }
  .regal-reihe > li { width: 300px; }
  .regal-reihe > li.ist-breit { width: 330px; }
  .ek-text { padding: 24px 24px 0; }
  .ek-h { font-size: 23px; }
  .mega { padding: 56px 16px 24px; }
  .mega-oben { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 36px; }
  .mega-name { font-size: 25vw; }
  .mega-sitemap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 16px; }
  .mega-daten { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 36px 0; }
  .mega-unten { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .mega-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================================================================
   RUNDE 3 (27.10.2026): Botans Vorgabe – nur echte Fotos, 8 Kategorien, Schwerpunkte Armreifen + Altgold.
   PO 00:10: Anlagegold + Altgold als satt gefüllte Karten mit Animationen (Start beim Hineinscrollen).
   ====================================================================== */
:root {
  --flasche: #0E3A2F; --flasche-hell: #1B5A47; --anthrazit: #232528; --creme: #F3E6C4;
  --verlauf-gold: linear-gradient(135deg, #EBD293 0%, #CDA75C 52%, #A47A2C 100%);
  --verlauf-flasche: linear-gradient(135deg, #1D5C49 0%, #0E3A2F 70%);
  --verlauf-anthrazit: linear-gradient(135deg, #36393D 0%, #1C1E21 100%);
}

/* ---------- Hero aus echten Fotos ---------- */
.hero-fotos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-foto { display: block; min-width: 0; height: 100%; overflow: hidden; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-foto--a img { object-position: 50% 42%; }
.hero-foto--b img { object-position: 50% 55%; }
.hero--foto .verlauf-oben { height: 170px; background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,0)); }
.hero--foto .verlauf-unten { right: 50%; height: 360px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55)); }
.hero--foto .cta-reihe { margin-top: 2px; }

/* ---------- Gemeinsame Bausteine ---------- */
.gross-h { margin: 0; font-size: clamp(40px, 4.2vw, 62px); font-weight: 400; line-height: 1.03; letter-spacing: -.02em; text-wrap: balance; }
.gross-p { margin: 0; max-width: 44ch; font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.knopf-rand--hell { color: #fff; border-color: rgba(255,255,255,.75); }
.knopf-rand--hell:hover { background: #fff; color: #000; }
.pfeil-link { display: inline-block; align-self: flex-start; margin-top: 14px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.foto { margin: 0; display: flex; flex-direction: column; min-width: 0; background: linear-gradient(to right bottom, #E0E0E0, #F3F2F3); }
.foto picture { display: block; overflow: hidden; }
.foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.foto--quadrat img { aspect-ratio: 1 / 1; }
.foto figcaption { padding: 12px 14px 16px; font-size: 12px; line-height: 1.4; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .foto img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .foto:hover img { transform: scale(1.025); }
}

/* Gefüllte Farbflächen (statt leerer weißer Karten) – Strichzeichnung in Gold bzw. Dunkel */
.kat-bild.kat-bild--gruen, .foto--gruen { background: var(--verlauf-flasche); --zeichen-grund: #15493B; }
.kat-bild--gruen .zeichnung, .foto--gruen .zeichnung { color: #E6C77E; }
.kat-bild.kat-bild--gold, .foto--gold { background: var(--verlauf-gold); --zeichen-grund: #F1DDA6; }
.kat-bild--gold .zeichnung, .foto--gold .zeichnung { color: #3A2C10; }
.kat-bild.kat-bild--anthrazit, .foto--anthrazit { background: var(--verlauf-anthrazit); --zeichen-grund: #2C2F33; }
.kat-bild--anthrazit .zeichnung, .foto--anthrazit .zeichnung { color: #DDB866; }
.foto--gruen figcaption, .foto--anthrazit figcaption { color: rgba(255,255,255,.88); }
.foto--gold figcaption { color: #2B2213; }
.flaeche { display: grid; place-items: center; aspect-ratio: 4 / 5; }
.flaeche .zeichnung { width: 74%; height: auto; }
.funkeln { fill: #FFF6D8; }

/* ---------- Sortiment: Übersicht der 8 Kategorien ---------- */
.sortiment { background: var(--grau); padding: 72px 0 64px; }
.sortiment .regal-kopf { padding-bottom: 36px; }
.kat-index { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px 12px; margin: 0; padding: 0 var(--rand); list-style: none; }
.kat-index a { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.kat-bild { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(to right bottom, #E0E0E0, #F3F2F3); }
.kat-bild picture { position: absolute; inset: 0; }
.kat-bild img { width: 100%; height: 100%; object-fit: cover; }
.kat-bild .zeichnung { width: 76%; height: auto; }
.kat-text { display: flex; flex-direction: column; gap: 4px; }
.kat-name { font-size: 14px; line-height: 1.3; }
.kat-mark { font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dunkel); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kat-bild img, .kat-bild .zeichnung { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .kat-index a:hover .kat-bild img, .kat-index a:hover .kat-bild .zeichnung { transform: scale(1.05); }
}

/* ---------- Schwerpunkt Armreifen ---------- */
.armreifen { background: #fff; }
.armreifen-innen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.armreifen-text { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 14px; padding: 88px 56px 72px var(--rand); }
.modelle { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.modelle li { display: flex; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--linie); font-size: 22px; font-weight: 400; line-height: 1.2; }
.modelle .nr { flex: none; width: 22px; font-size: 11px; font-weight: 500; color: var(--gold-dunkel); font-variant-numeric: tabular-nums; }
.modelle-mehr { margin: 0; font-size: 13px; color: var(--leise); }
.armreifen-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-content: start; }
.armreifen-bilder .bild-gross { grid-column: 1 / -1; }

/* ---------- Schwerpunkt Altgold-Ankauf ---------- */
.altgold { background: #fff; }
.ankauf { padding: 72px var(--rand) 24px; }
.ankauf-buehne {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 48px; align-items: center;
  max-width: 1392px; margin: 0 auto; padding: 64px 56px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 90% at 85% 20%, #22654F 0%, rgba(34,101,79,0) 60%), var(--verlauf-flasche);
}
.ankauf-text { display: flex; flex-direction: column; gap: 16px; }
.ankauf .ek-eb { color: var(--gold); }
.ankauf .gross-h { font-size: clamp(40px, 4.4vw, 66px); color: #fff; }
.ankauf .gross-p { color: rgba(255,255,255,.82); }
.ankauf-szene { margin: 0; }
.szene { display: block; width: 100%; height: auto; overflow: hidden; } /* Teile fliegen von der Kante herein, nie über Text/Knöpfe */
.szene text { font-family: inherit; font-variant-numeric: tabular-nums; }
.szene-zeile { display: flex; justify-content: center; gap: 0; margin: 8px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(243,230,196,.75); }
.szene-zeile span + span::before { content: "→"; margin: 0 12px; color: var(--gold); }
/* Standbild (ohne JS / reduzierte Bewegung): Gold liegt auf der Waage, Geld darüber, Anzeige zeigt das Endgewicht */
.ag-t0, .ag-t1, .ag-t2, .ag-puls, .ag-funke { opacity: 0; }

.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1392px; margin: 16px auto 0; padding: 0; list-style: none; }
.schritt { position: relative; display: flex; flex-direction: column; padding: 28px 28px 30px; border-radius: 18px; color: #fff; overflow: hidden; }
.schritt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(243,230,196,.85); opacity: 0; pointer-events: none; }
.schritt--anthrazit { background: var(--verlauf-anthrazit); color: #fff; --s-strich: #E2C47E; --s-grund: #2E3135; }
.schritt--gold { background: var(--verlauf-gold); color: #1F1808; --s-strich: #2B2213; --s-grund: #F2DEA7; }
.schritt--gruen { background: var(--verlauf-flasche); color: #fff; --s-strich: #E2C47E; --s-grund: #15493B; }
.schritt--gold::after { box-shadow: inset 0 0 0 2px rgba(43,34,19,.55); }
.schritt-bild { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 0 18px; overflow: visible; color: var(--s-strich); }
.schritt-bild .sl { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.schritt-bild .sf { fill: var(--s-grund); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.schritt-bild .sv { fill: currentColor; stroke: none; }
.schritt-bild .s2-glas { fill: rgba(255,255,255,.3); }
.s2-anzeige text { fill: #F2DEA7; }
.s2-d0, .s3-welle { opacity: 0; }
.schritt-nr { font-size: 13px; font-weight: 500; letter-spacing: .08em; opacity: .75; font-variant-numeric: tabular-nums; }
.schritt h3 { margin: 8px 0 8px; font-size: 24px; font-weight: 400; line-height: 1.2; text-wrap: balance; }
.schritt p { margin: 0; max-width: 36ch; font-size: 14px; line-height: 1.55; opacity: .86; }
.schritt a { color: inherit; }


/* ---------- Kapitel im Bulgari-Raster ---------- */
.kapitel { background: var(--grau); }
.kapitel + .kapitel { padding-top: 2px; }
.k-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.k-raster > li { display: flex; min-width: 0; }
.k-raster > li > * { flex: 1; min-width: 0; }
.k-raster > .ist-breit { grid-column: span 2; }
.k-text { display: flex; flex-direction: column; gap: 12px; padding: 56px 32px 32px; background: var(--grau); }
.k-text h2 { margin: 0; font-size: 30px; font-weight: 400; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.k-text p { margin: 0; max-width: 36ch; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.k-text .ek-eb { color: var(--gold-dunkel); }
.k-text--gross { padding: 72px 56px 40px var(--rand); }
.k-text--gross h2 { font-size: clamp(40px, 4.2vw, 62px); line-height: 1.03; }
.k-text--gross p { font-size: 15px; max-width: 42ch; }
.k-merk { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 4px !important; padding: 7px 12px; border: 1px solid var(--gold-strich); border-radius: 999px; font-size: 12px !important; color: var(--gold-dunkel) !important; }
.k-merk svg { width: 18px; height: 18px; flex: none; }

/* Anlagegold: satte Anthrazit-Karte über zwei Spalten mit Barren-Animation */
.barren-karte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 24px; padding: 48px 40px;
  color: #fff; background: radial-gradient(90% 80% at 75% 70%, rgba(214,175,91,.18), rgba(214,175,91,0) 60%), var(--verlauf-anthrazit);
}
.barren-text { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.barren-text .ek-eb { color: var(--gold); }
.barren-text h2 { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.1; }
.barren-text p { margin: 0 0 8px; max-width: 32ch; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.8); }
.ba-licht { transform: translateX(-240px); }

/* ---------- Besuch ---------- */
.besuch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--verlauf-flasche); color: #fff; }
.besuch a { color: #fff; }
.besuch-bild { position: relative; margin: 0; min-height: 600px; }
.besuch-bild picture, .besuch-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.besuch-bild img { object-fit: cover; object-position: 50% 30%; }
.besuch-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 88px 64px; }
.besuch-text .ek-eb { color: var(--gold); }
.besuch-text h2 { margin: 0; font-size: 36px; font-weight: 400; line-height: 1.15; }
.besuch-text > p:not(.ek-eb):not(.offen) { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82); }
.besuch .zeiten { margin: 6px 0 0; font-size: 14px; }
.besuch .zeiten dt { color: rgba(255,255,255,.62); }
.besuch .zeiten dd { color: #fff; }
.besuch .knopf-hell { color: #0b0b0b; }

/* ======================================================================
   ANIMATIONEN – nur wenn site.js „anim-an“ setzt (IntersectionObserver da, keine reduzierte Bewegung).
   Ohne das bleibt jede Szene ein ruhiges Standbild. Bewegt werden nur transform und opacity.
   ====================================================================== */
.anim-an .anim:not(.im-bild), .anim-an .anim:not(.im-bild) * { animation-play-state: paused !important; }
.ag-ring, .ag-kette, .ag-muenze, .ag-funke, .ag-euro, .ag-schein, .s1-pin, .s1-tuer, .s2-lupe, .s2-585, .s3-punkt, .s3-welle, .s3-euro,
.ba-barren, .ba-muenze, .funkeln { transform-box: fill-box; transform-origin: 50% 50%; }
/* Achtung: nie auf Elemente mit transform-Attribut anwenden (verschiebt sonst deren Geometrie). */

/* Altgold wird zu Geld (Schleife 9 s) */
.anim-an .ag-ring { animation: ag-ring 9s infinite both; }
.anim-an .ag-kette { animation: ag-kette 9s infinite both; }
.anim-an .ag-muenze { animation: ag-muenze 9s infinite both; }
.anim-an .ag-t0 { animation: ag-t0 9s infinite both; }
.anim-an .ag-t1 { animation: ag-t1 9s infinite both; }
.anim-an .ag-t2 { animation: ag-t2 9s infinite both; }
.anim-an .ag-t3 { animation: ag-t3 9s infinite both; }
.anim-an .ag-puls { animation: ag-puls 9s infinite both; }
.anim-an .ag-funke { animation: ag-funke 9s infinite both; }
.anim-an .ag-f2 { animation-delay: .12s; }
.anim-an .ag-f3 { animation-delay: .24s; }
.anim-an .ag-f4 { animation-delay: .36s; }
.anim-an .ag-schein { transform-origin: 50% 100%; animation: ag-schein 9s cubic-bezier(.2,.8,.2,1) infinite both; }
.anim-an .ag-s2 { animation-delay: .18s; }
.anim-an .ag-s3 { animation-delay: .36s; }
.anim-an .ag-euro { animation: ag-euro 9s infinite both; }
@keyframes ag-ring {
  0%, 4% { opacity: 0; transform: translateY(-210px) rotate(-30deg); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  5.5% { opacity: 1; }
  10.5% { transform: none; animation-timing-function: cubic-bezier(0,.55,.45,1); }
  12% { transform: translateY(-9px) rotate(3deg); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  13.5%, 38% { opacity: 1; transform: none; }
  45%, 100% { opacity: 0; transform: translateY(-14px) scale(.55); }
}
@keyframes ag-kette {
  0%, 11% { opacity: 0; transform: translateY(-210px) rotate(20deg); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  12.5% { opacity: 1; }
  17.5% { transform: none; animation-timing-function: cubic-bezier(0,.55,.45,1); }
  19% { transform: translateY(-7px) rotate(-2deg); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  20.5%, 39% { opacity: 1; transform: none; }
  46%, 100% { opacity: 0; transform: translateY(-14px) scale(.55); }
}
@keyframes ag-muenze {
  0%, 18% { opacity: 0; transform: translateY(-210px) rotate(-120deg); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  19.5% { opacity: 1; }
  24.5% { transform: none; animation-timing-function: cubic-bezier(0,.55,.45,1); }
  26% { transform: translateY(-8px) rotate(6deg); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  27.5%, 40% { opacity: 1; transform: none; }
  47%, 100% { opacity: 0; transform: translateY(-14px) scale(.55); }
}
@keyframes ag-t0 { 0%, 10.5% { opacity: 1; } 10.6%, 92% { opacity: 0; } 92.1%, 100% { opacity: 1; } }
@keyframes ag-t1 { 0%, 10.5% { opacity: 0; } 10.6%, 17.5% { opacity: 1; } 17.6%, 100% { opacity: 0; } }
@keyframes ag-t2 { 0%, 17.5% { opacity: 0; } 17.6%, 24.5% { opacity: 1; } 24.6%, 100% { opacity: 0; } }
@keyframes ag-t3 { 0%, 24.5% { opacity: 0; } 24.6%, 92% { opacity: 1; } 92.1%, 100% { opacity: 0; } }
@keyframes ag-puls { 0%, 27% { opacity: 0; } 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes ag-funke {
  0%, 37% { opacity: 0; transform: scale(0); }
  41% { opacity: 1; transform: scale(1.3) rotate(45deg); }
  47%, 100% { opacity: 0; transform: scale(.2) rotate(90deg); }
}
@keyframes ag-schein {
  0%, 42% { opacity: 0; transform: translateY(90px) scale(.55); }
  50% { opacity: 1; transform: translateY(-6px) scale(1.03); }
  54%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes ag-euro {
  0%, 52% { opacity: 0; transform: scale(0) rotate(-90deg); }
  58% { opacity: 1; transform: scale(1.18) rotate(8deg); }
  62%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: scale(.8); }
}

/* Drei Schritte (gemeinsame Schleife 7,5 s: erst 01, dann 02, dann 03) */
.anim-an .schritt--anthrazit::after { animation: hl-1 7.5s infinite both; }
.anim-an .schritt--gold::after { animation: hl-2 7.5s infinite both; }
.anim-an .schritt--gruen::after { animation: hl-3 7.5s infinite both; }
@keyframes hl-1 { 0%, 1% { opacity: 0; } 4%, 27% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes hl-2 { 0%, 29% { opacity: 0; } 32%, 59% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes hl-3 { 0%, 61% { opacity: 0; } 64%, 91% { opacity: 1; } 95%, 100% { opacity: 0; } }
.anim-an .s1-weg, .anim-an .s2-haken, .anim-an .s3-linie { stroke-dasharray: 1; }
.anim-an .s1-weg { animation: s1-weg 7.5s infinite both; }
.anim-an .s1-pin { animation: s1-pin 7.5s infinite both; }
.anim-an .s1-tuer { transform-origin: 0 50%; animation: s1-tuer 7.5s cubic-bezier(.3,.7,.3,1) infinite both; }
.anim-an .s2-lupe { animation: s2-lupe 7.5s ease-in-out infinite both; }
.anim-an .s2-d0 { animation: s2-d0 7.5s infinite both; }
.anim-an .s2-d1 { animation: s2-d1 7.5s infinite both; }
.anim-an .s2-585 { animation: s2-585 7.5s infinite both; }
.anim-an .s2-haken { animation: s2-haken 7.5s infinite both; }
.anim-an .s3-linie { animation: s3-linie 7.5s cubic-bezier(.4,0,.2,1) infinite both; }
.anim-an .s3-punkt { animation: s3-punkt 7.5s infinite both; }
.anim-an .s3-welle { animation: s3-welle 7.5s ease-out infinite both; }
.anim-an .s3-euro { animation: s3-euro 7.5s infinite both; }
@keyframes s1-weg { 0%, 2% { stroke-dashoffset: 1; opacity: 1; } 20%, 93% { stroke-dashoffset: 0; opacity: 1; } 99% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes s1-pin {
  0%, 17% { opacity: 0; transform: translateY(-48px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  18% { opacity: 1; }
  23% { transform: none; animation-timing-function: cubic-bezier(0,.55,.45,1); }
  25.5% { transform: translateY(-8px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  28%, 93% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: none; }
}
@keyframes s1-tuer { 0%, 28% { transform: none; } 34%, 93% { transform: scaleX(.3); } 99%, 100% { transform: none; } }
@keyframes s2-lupe {
  0%, 30% { opacity: 0; transform: translate(90px, 26px); }
  37% { opacity: 1; transform: none; }
  42% { transform: translate(-14px, 7px); }
  47% { transform: translate(8px, -4px); }
  51%, 93% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: none; }
}
@keyframes s2-d0 { 0%, 44% { opacity: 1; } 44.1%, 99.9% { opacity: 0; } 100% { opacity: 1; } }
@keyframes s2-d1 { 0%, 44% { opacity: 0; } 44.1%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes s2-585 { 0%, 48% { opacity: 0; transform: scale(.5); } 53% { opacity: 1; transform: scale(1.12); } 56%, 93% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes s2-haken { 0%, 54% { stroke-dashoffset: 1; opacity: 1; } 61%, 93% { stroke-dashoffset: 0; opacity: 1; } 99% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes s3-linie { 0%, 62% { stroke-dashoffset: 1; opacity: 1; } 76%, 93% { stroke-dashoffset: 0; opacity: 1; } 99% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes s3-punkt { 0%, 75% { opacity: 1; transform: scale(0); } 79% { transform: scale(1.4); } 81%, 93% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes s3-welle { 0%, 79% { opacity: 0; transform: none; } 80% { opacity: .9; transform: none; } 90%, 100% { opacity: 0; transform: scale(3.4); } }
@keyframes s3-euro { 0%, 79% { opacity: 0; transform: scaleX(0); } 84% { opacity: 1; transform: scaleX(1.1); } 87%, 93% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }

/* Anlagegold: Barren schieben herein und stapeln sich, Münze rollt dazu, danach wandert ein Glanz */
.anim-an .ba-a { animation: ba-rein 1s cubic-bezier(.2,.8,.2,1) .1s both; }
.anim-an .ba-b { animation: ba-rein 1s cubic-bezier(.2,.8,.2,1) .45s both; }
.anim-an .ba-c { animation: ba-fall .8s 1.05s both; }
.anim-an .ba-muenze { animation: ba-rollen 1.1s cubic-bezier(.2,.8,.2,1) 1.5s both; }
.anim-an .ba-licht { animation: ba-licht 5s linear 2.5s infinite both; }
@keyframes ba-rein { 0% { opacity: 0; transform: translateX(-300px); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ba-fall {
  0% { opacity: 0; transform: translateY(-140px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  15% { opacity: 1; }
  65% { transform: none; animation-timing-function: cubic-bezier(0,.55,.45,1); }
  80% { transform: translateY(-9px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  100% { opacity: 1; transform: none; }
}
@keyframes ba-rollen { 0% { opacity: 0; transform: translateX(180px) rotate(360deg); } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ba-licht { 0% { transform: translateX(-160px); } 30%, 100% { transform: translateX(420px); } }

/* Platzhalter-Flächen: Zeichnung steigt auf, ein Funkeln */
.anim-an .flaeche .zeichnung { animation: hochkommen 1.1s cubic-bezier(.2,.8,.2,1) both; }
.anim-an .flaeche .funkeln { animation: funkeln 4.8s ease-in-out 1s infinite both; }
@keyframes hochkommen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes funkeln { 0% { opacity: 0; transform: scale(0); } 8% { opacity: 1; transform: scale(1.4) rotate(45deg); } 16%, 100% { opacity: 0; transform: scale(0) rotate(90deg); } }

/* ---------- Runde 3: mittlere Breiten ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  .kat-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .armreifen-innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .armreifen-text { padding-right: 32px; }
  .ankauf-buehne { grid-template-columns: minmax(0, 1fr); padding: 48px 40px; }
  .schritt { padding: 22px 20px 24px; }
  .k-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barren-karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* ---------- Runde 3: Handy ---------- */
@media (max-width: 760px) {
  .hero-fotos { grid-template-columns: minmax(0, 1fr); }
  .hero-foto--b { display: none; }
  .hero--foto .verlauf-oben { height: 130px; }
  .hero--foto .verlauf-unten { right: 0; height: 320px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6)); }
  .hero--foto .buehne-text { right: 0; }

  .gross-h { font-size: 34px; line-height: 1.08; }
  .gross-p { font-size: 14px; }

  .sortiment { padding: 48px 0 40px; }
  .sortiment .regal-kopf { padding-bottom: 24px; }
  .kat-index { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; }
  .kat-index a { gap: 8px; }
  .kat-name { font-size: 11px; line-height: 1.25; hyphens: auto; }
  .kat-mark { font-size: 9px; letter-spacing: .05em; }

  .armreifen-innen { grid-template-columns: minmax(0, 1fr); }
  .armreifen-text { position: static; padding: 48px 16px 32px; }
  .modelle li { font-size: 19px; padding: 11px 0; }

  .ankauf { padding: 40px 12px 12px; }
  .ankauf-buehne { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 36px 20px 28px; border-radius: 14px; }
  .ankauf .gross-h { font-size: 36px; }
  .szene-zeile { font-size: 9.5px; letter-spacing: .06em; }
  .szene-zeile span + span::before { margin: 0 7px; }
  .schritte { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .schritt { padding: 22px 20px 24px; border-radius: 14px; }
  .schritt-bild { max-width: 240px; margin-bottom: 12px; }
  .schritt h3 { font-size: 21px; }

  .k-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-raster > .ist-breit, .k-raster > .breit-handy { grid-column: 1 / -1; }
  .k-raster > .breit-handy .foto img { aspect-ratio: 1 / 1; }
  .k-text { padding: 40px 16px 28px; }
  .k-text h2 { font-size: 26px; }
  .k-text--gross { padding: 44px 16px 28px; }
  .k-text--gross h2 { font-size: 34px; }
  .k-raster--paare .k-text { padding: 22px 14px 18px; gap: 8px; }
  .k-raster--paare .k-text h2 { font-size: 19px; line-height: 1.15; hyphens: auto; }
  .k-raster--paare .k-text p { font-size: 12px; line-height: 1.45; }
  .k-raster--paare .k-text .ek-eb { font-size: 9.5px; letter-spacing: .06em; }
  .k-merk { padding: 5px 9px; font-size: 10.5px !important; gap: 6px; }
  .k-merk svg { width: 15px; height: 15px; }
  .foto figcaption { padding: 10px 10px 12px; font-size: 11px; }
  .barren-karte { grid-template-columns: minmax(0, 1fr); padding: 36px 20px 24px; gap: 12px; }
  .barren-text h2 { font-size: 28px; }

  .besuch { grid-template-columns: minmax(0, 1fr); }
  .besuch-bild { min-height: 0; aspect-ratio: 4 / 5; }
  .besuch-text { padding: 40px 16px 48px; }
  .besuch-text h2 { font-size: 26px; line-height: 1.2; }
}

/* ======================================================================
   RUNDE 4 (27.10.2026): Sortiment als Kartenreihe nach azena.ai „Leistungen“ (Apple-Kartendesign), PO 26.10. 22:30.
   .kr = Kartenreihe: Track mit Einrasten > Reihe > Karte (400 × 640, Radius 24, satte Fläche) + Text darunter,
   darunter Punkte + Pfeile (site.js, Block „Kartenreihe“). Maße in der Karte in cqi (1 cqi = 1 % Kartenbreite).
   Ebenen: Karte = eigener Stapelkontext; Bild/Szene liegen mit z-index -1 unter dem Text, der Titel-Link deckt die ganze Karte.
   ====================================================================== */
.karten { background: var(--grau); padding: 72px 0 64px; }
.karten .regal-kopf { padding-bottom: 36px; }
.kr { --kr-w: 400px; --kr-gap: 20px; --kr-rand: var(--rand); position: relative; }
.kr-track { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--kr-rand); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kr-track::-webkit-scrollbar { display: none; }
.kr-track:focus-visible { outline: 2px solid var(--gold-strich); outline-offset: -2px; }
.kr-row { display: flex; align-items: flex-start; gap: var(--kr-gap); width: max-content; margin: 0; padding: 4px var(--kr-rand) 8px; list-style: none; }
.kr-item { flex: none; width: var(--kr-w); scroll-snap-align: start; }
.kr-card {
  --kr-bg: var(--verlauf-flasche); --kr-tx: #fff; --kr-eb: var(--gold);
  position: relative; isolation: isolate; container-type: inline-size; width: 100%; aspect-ratio: 400 / 640; overflow: hidden;
  border-radius: 24px; background: var(--kr-bg); color: var(--kr-tx);
}
.kr-card--creme { --kr-bg: linear-gradient(160deg, #F8F2E4 0%, #EADDC2 100%); --kr-tx: #1F1A12; --kr-eb: #7d6330; }
.kr-card--gruen { --kr-bg: radial-gradient(110% 70% at 80% 85%, #22654F 0%, rgba(34,101,79,0) 65%), var(--verlauf-flasche); }
.kr-card--anthrazit { --kr-bg: radial-gradient(100% 70% at 70% 85%, rgba(214,175,91,.16), rgba(214,175,91,0) 60%), var(--verlauf-anthrazit); --kr-eb: #DDB866; }
.kr-card--gold { --kr-bg: var(--verlauf-gold); --kr-tx: #1F1808; --kr-eb: #4A3812; }
.kr-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2.2cqi; padding: 8cqi 8cqi 0; }
.kr-eb { margin: 0; font-size: max(11px, 3cqi); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kr-eb); }
.kr-h { margin: 0; font-size: 9.5cqi; font-weight: 400; line-height: 1.03; letter-spacing: -.025em; text-wrap: balance; }
.kr-h a { color: inherit; text-decoration: none; }
.kr-h a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kr-h a:focus-visible { outline: none; }
.kr-h a:focus-visible::after { box-shadow: inset 0 0 0 3px var(--gold); }
.kr-chips { display: flex; flex-wrap: wrap; gap: 1.6cqi; margin: 1.6cqi 0 0; padding: 0; list-style: none; }
.kr-chips li { padding: 1.3cqi 2.8cqi; border-radius: 99px; background: rgba(255,255,255,.66); box-shadow: inset 0 0 0 1px rgba(125,99,48,.22); font-size: max(11px, 3.1cqi); line-height: 1.2; white-space: nowrap; }
.kr-marke { margin: 1cqi 0 0; padding: 1.3cqi 3cqi; border-radius: 99px; background: rgba(31,24,8,.85); color: #F3E6C4; font-size: max(11px, 3.1cqi); font-weight: 500; letter-spacing: .04em; }
.kr-knopf { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 44px; margin-top: 2cqi; padding: 0 5cqi; border-radius: 99px; background: var(--gold); color: #0b0b0b; font-size: max(12px, 3.2cqi); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.kr-knopf:hover { background: #d8b878; color: #0b0b0b; }
.kr-media { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 60%; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
.kr-media--hoch { height: 68%; }
.kr-media--niedrig { height: 50%; }
.kr-media picture, .kr-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kr-media img { object-fit: cover; object-position: 50% 50%; }
.kr-stage { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; padding: 0 5cqi 6cqi; }
.kr-stage--altgold { padding: 0 3cqi 5cqi; }
.kr-cap { margin: 18px 0 0; padding-right: 8px; font-size: 15px; line-height: 1.45; color: var(--leise); text-wrap: pretty; }
.kr-cap b { font-weight: 500; color: #000; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kr-card { transition: transform .4s cubic-bezier(0,0,.5,1); }
  .kr-card:hover { transform: scale(1.012); }
}
/* Steuerung: Punkte-Pille + Pfeile */
.kr-steuer { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; padding: 0 var(--rand); }
html:not(.kr-js) .kr-steuer { display: none; }
.kr-punkte { display: flex; align-items: center; height: 48px; padding: 0 12px; border-radius: 999px; background: rgba(42,37,33,.07); }
.kr-punkt { display: grid; place-items: center; width: 22px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .4s cubic-bezier(.22,.61,.36,1); -webkit-tap-highlight-color: transparent; }
.kr-punkt span { display: block; width: 8px; height: 8px; border-radius: 99px; background: #8a8178; transition: width .4s cubic-bezier(.22,.61,.36,1), background-color .3s; }
.kr-punkt.ist-aktiv { width: 46px; }
.kr-punkt.ist-aktiv span { width: 30px; background: #000; }
.kr-punkt:focus-visible { outline: 2px solid var(--gold-strich); outline-offset: -6px; border-radius: 12px; }
.kr-pfeil { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(42,37,33,.07); color: #000; cursor: pointer; transition: background-color .2s, opacity .3s; }
.kr-pfeil:hover { background: rgba(42,37,33,.14); }
.kr-pfeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kr-pfeil[disabled] { opacity: .35; cursor: default; }

/* Trauringe: zwei Ringe schieben ineinander, Goldfarbe wechselt Gelb → Weiß → Rosé */
.tr-rand { fill: none; stroke: #8C6722; stroke-width: 15; }
.tr-band { fill: none; stroke: #D9B45F; stroke-width: 11; }
.tr-licht { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 1.5; }
.tr-funke, .bu-funke { fill: #FFF6D8; }
.tr-funke { fill: #fff; }
.tr-namen text { fill: #4A3812; font-family: inherit; }
.tr-n1, .tr-n2, .tr-n3 { opacity: 0; }
/* Burma-/Ajda-Ring: drei Bänder, Schraffur wandert = Ring dreht sich */
.bu-rand { fill: #1B5A47; stroke: #E2C47E; stroke-width: 1.6; }
.bu-oeffnung { fill: #0A2C22; stroke: #E2C47E; stroke-width: 1.2; }
.bu-flaeche { fill: #15493B; stroke: #E2C47E; stroke-width: 1.6; stroke-linejoin: round; }
.bu-dreh { fill: none; stroke: #E2C47E; stroke-width: 1.5; stroke-linecap: round; }
.bu-punkte { fill: none; stroke: #F1D78F; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0 8; }
.bu-namen { fill: #E2C47E; font-family: inherit; }
.tr-l, .tr-r, .tr-funke, .bu-funke { transform-box: fill-box; transform-origin: 50% 50%; }

.anim-an .tr-l { animation: tr-l 1.3s cubic-bezier(.2,.8,.2,1) both; }
.anim-an .tr-r { animation: tr-r 1.3s cubic-bezier(.2,.8,.2,1) both; }
.anim-an .tr-band { animation: tr-band 7.5s 1.3s infinite both; }
.anim-an .tr-rand { animation: tr-rand 7.5s 1.3s infinite both; }
.anim-an .tr-n0 { opacity: 0; }
.anim-an .tr-n1 { animation: tr-n1 7.5s 1.3s infinite both; }
.anim-an .tr-n2 { animation: tr-n2 7.5s 1.3s infinite both; }
.anim-an .tr-n3 { animation: tr-n3 7.5s 1.3s infinite both; }
.anim-an .tr-funke, .anim-an .bu-funke { animation: funkeln 3.75s ease-in-out 1.2s infinite both; }
@keyframes tr-l { from { opacity: 0; transform: translateX(-90px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tr-r { from { opacity: 0; transform: translateX(90px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tr-band { 0%, 28% { stroke: #D9B45F; } 33%, 61% { stroke: #E7E8EC; } 66%, 94% { stroke: #E9AA8E; } 100% { stroke: #D9B45F; } }
@keyframes tr-rand { 0%, 28% { stroke: #8C6722; } 33%, 61% { stroke: #8F939B; } 66%, 94% { stroke: #A3634B; } 100% { stroke: #8C6722; } }
@keyframes tr-n1 { 0%, 30% { opacity: 1; } 31%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tr-n2 { 0%, 30% { opacity: 0; } 31%, 63% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes tr-n3 { 0%, 63% { opacity: 0; } 64%, 97% { opacity: 1; } 98%, 100% { opacity: 0; } }

.anim-an .bu-zeichnen { stroke-dasharray: 1; animation: bu-zeichnen 1.3s cubic-bezier(.4,0,.2,1) both; }
.anim-an .bu-z1 { animation-delay: .15s; }
.anim-an .bu-z2 { animation-delay: .3s; }
.anim-an .bu-muster { animation: bu-ein .6s ease 1.2s both; }
.anim-an .bu-dreh--l { animation: bu-l 1.8s linear 1.2s infinite both; }
.anim-an .bu-dreh--r { animation: bu-r 1.8s linear 1.2s infinite both; }
.anim-an .bu-punkte { animation: bu-p 1.8s linear 1.2s infinite both; }
@keyframes bu-zeichnen { 0% { stroke-dashoffset: 1; fill-opacity: 0; } 65% { fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes bu-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes bu-l { from { transform: none; } to { transform: translateX(-18px); } }
@keyframes bu-r { from { transform: none; } to { transform: translateX(18px); } }
@keyframes bu-p { to { stroke-dashoffset: -16; } }

/* Fotos in den Karten: ruhiger Zoom, solange die Karte zu sehen ist */
.anim-an .kr-media img { animation: kr-zoom 14s ease-in-out infinite alternate both; }
@keyframes kr-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }

/* ---------- Logo: Kopf größer, Footer groß (hell auf dunkel) ---------- */
.marke-emblem { height: 46px; }
.marke-wort { height: 20px; }
.mega-marke { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); color: #fff; text-decoration: none; }
.mega .mega-marke:hover { color: #fff; }
.mega-emblem-gross { flex: none; width: clamp(120px, 21vw, 330px); height: auto; }

/* ---------- Runde 4: mittlere Breiten ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  .kr { --kr-w: 360px; }
  .mega-oben { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Runde 4: Handy ---------- */
@media (max-width: 760px) {
  .karten { padding: 48px 0 40px; }
  .karten .regal-kopf { padding-bottom: 24px; }
  .kr { --kr-w: 84vw; --kr-gap: 12px; }
  .kr-cap { font-size: 14px; margin-top: 14px; }
  .kr-steuer { margin-top: 22px; }
  .kr-punkte { height: 44px; padding: 0 8px; }
  .kr-punkt { width: 18px; height: 44px; }
  .kr-punkt.ist-aktiv { width: 38px; }
  .kr-punkt.ist-aktiv span { width: 24px; }
  .kr-pfeil { width: 44px; height: 44px; }

  .marke-emblem { height: 34px; }
  .marke-wort { height: 14px; }
  .mega-marke { flex-direction: column; align-items: flex-start; gap: 24px; }
  .mega-emblem-gross { width: 120px; }

  /* Ankauf-Schritte als wischbare Kartenreihe */
  .schritte { display: flex; gap: 12px; margin: 12px -12px 0; padding: 0 12px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none; }
  .schritte::-webkit-scrollbar { display: none; }
  .schritt { flex: 0 0 84%; scroll-snap-align: start; }
}

/* Runde 4 – Szenen in den Karten groß: Bühne füllt den Raum unter dem Titel, Szene mittig */
.kr-stage { top: 30%; display: flex; align-items: center; justify-content: center; padding: 0 4cqi 5cqi; }
.kr-stage .szene { width: 100%; max-height: 100%; }
.kr-stage--altgold { top: 27%; padding: 0 2cqi 4cqi; }
.kr-stage--barren { top: 34%; padding: 0 2cqi 6cqi; }
/* Anlagegold-Karte: Münze rollt herein, sechs Barren fallen nacheinander und stapeln sich, danach wandert ein Glanz */
.kb-muenze, .kb-barren { transform-box: fill-box; transform-origin: 50% 50%; }
.kb-licht { transform: translateX(-260px); }
.anim-an .kb-muenze { animation: ba-rollen 1.2s cubic-bezier(.2,.8,.2,1) .1s both; }
.anim-an .kb-barren { animation: kb-fall .55s both; }
.anim-an .kb-b1 { animation-delay: .7s; }
.anim-an .kb-b2 { animation-delay: .9s; }
.anim-an .kb-b3 { animation-delay: 1.1s; }
.anim-an .kb-b4 { animation-delay: 1.35s; }
.anim-an .kb-b5 { animation-delay: 1.55s; }
.anim-an .kb-b6 { animation-delay: 1.8s; }
.anim-an .kb-licht { animation: kb-licht 5s linear 2.6s infinite both; }
@keyframes kb-fall {
  0% { opacity: 0; transform: translateY(-170px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  20% { opacity: 1; }
  70% { transform: none; animation-timing-function: cubic-bezier(0,.55,.45,1); }
  84% { transform: translateY(-7px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  100% { opacity: 1; transform: none; }
}
@keyframes kb-licht { 0% { transform: translateX(-200px); } 30%, 100% { transform: translateX(460px); } }

/* ======================================================================
   RUNDE 5 (27.10.2026, PO 01:22): echte Schrift, Altgold ohne Grün und ohne „Geld“, Anlagegold mit Foto.
   Schrift: Avenir Next (Botans Logo) nur lokal – sie wird NICHT als Webfont ausgeliefert (Linotype, keine Einbettung).
   Apple-Geräte haben sie; alle anderen sehen das eingebettete Albert Sans. Überschriften 400, Kicker 500, Text 400.
   Wortmarke „ELIZA GOLD“ = Vektorpfade aus Avenir Next Regular (landing/schrift/eliza-gold-wortmarke.svg), fill=currentColor.
   ====================================================================== */
.marke-wort, .kopf .marke-wort { display: block; width: auto; height: 21px; }   /* .kopf svg (Icons 18 px) nicht übernehmen */
.menue-wort { display: block; width: auto; height: 17px; color: var(--gold); }
.seite-kopf .marke-wort { height: 18px; color: var(--gold-strich); }
.mega-name { display: flex; flex-direction: column; gap: .16em; line-height: 1; }
.mega-zeile { display: block; width: auto; height: .74em; }

/* Altgold: Creme, Sand, warmes Gold, Anthrazit – echte Fotos, dezente Prüf-Chips */
.kr-card--sand { --kr-bg: linear-gradient(160deg, #F6EEDD 0%, #E4D5B5 100%); --kr-tx: #1F1A12; --kr-eb: #7d6330; }
.kr-media--ankauf img { object-position: 50% 74%; }
.kr-media--barren img { object-position: 50% 62%; }
.pruef-chips { position: absolute; z-index: 2; left: 6cqi; bottom: 6cqi; display: flex; flex-direction: column; align-items: flex-start; gap: 2cqi; margin: 0; padding: 0; list-style: none; }
.pc {
  display: inline-flex; align-items: center; gap: 1.8cqi; padding: 1.9cqi 3.6cqi; border-radius: 99px;
  background: rgba(35,37,40,.86); color: #F6EEDC; font-size: max(12px, 3.3cqi); font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px -8px rgba(0,0,0,.45);
}
.pc svg { width: max(14px, 3.9cqi); height: auto; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pruef-chips--quer { left: 55%; top: 15%; bottom: auto; gap: 10px; }
.pruef-chips--quer .pc { gap: 8px; padding: 9px 16px; font-size: 14px; }
.pruef-chips--quer .pc svg { width: 16px; }
.anim-an .pc { animation: pc-ein 8s infinite both; }
.anim-an .pc-2 { animation-delay: .55s; }
.anim-an .pc-3 { animation-delay: 1.1s; }
@keyframes pc-ein { 0%, 4% { opacity: 0; transform: translateY(10px); } 11%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }

.ankauf-buehne.ankauf-buehne--foto { position: relative; display: block; min-height: 620px; padding: 0; overflow: hidden; color: #1F1A12; background: #F4EDDF; }
.ankauf-foto { position: absolute; inset: 0; }
.ankauf-foto picture, .ankauf-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ankauf-foto img { object-fit: cover; object-position: 72% 50%; }
.ankauf-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(246,240,228,.97) 0%, rgba(246,240,228,.93) 30%, rgba(246,240,228,.5) 46%, rgba(246,240,228,0) 62%); }
.ankauf-buehne--foto .ankauf-text { position: relative; z-index: 3; max-width: 580px; padding: 88px 56px; }
.ankauf .ankauf-buehne--foto .ek-eb { color: var(--gold-dunkel); }
.ankauf .ankauf-buehne--foto .gross-h { color: #1F1A12; }
.ankauf .ankauf-buehne--foto .gross-p { color: var(--text-2); }
.ankauf .ankauf-buehne--foto .ankauf-unterzeile { font-size: 18px; color: #1F1A12; }
.anim-an .ankauf-foto img, .anim-an .barren-bild img { animation: kr-zoom 16s ease-in-out infinite alternate both; }

/* Ankauf-Schritte: Creme / Anthrazit / Sand, feine Gold-Linien */
.schritt--creme { background: linear-gradient(160deg, #FBF6EA 0%, #EFE5CF 100%); color: #1F1A12; --s-strich: #9A7228; --s-grund: #FFFDF6; }
.schritt--sand { background: linear-gradient(160deg, #F2E8D0 0%, #E3D3AF 100%); color: #1F1A12; --s-strich: #8C6722; --s-grund: #F9F1DF; }
.schritt--creme::after, .schritt--sand::after { box-shadow: inset 0 0 0 2px rgba(140,103,34,.5); }
.s2-display { fill: #15171A; stroke: currentColor; stroke-width: 1; }
.s3-siegel { fill: currentColor; }
.s3-siegel-haken { fill: none; stroke: var(--s-grund); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s3-angebot { transform-box: fill-box; transform-origin: 50% 50%; }
.anim-an .s3-angebot { animation: s3-euro 7.5s infinite both; }


/* Anlagegold-Abschnitt: Foto rechts, sanfter Glanz */
.barren-karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; }
.barren-text { justify-content: center; padding: 56px 40px; }
.barren-bild { position: relative; min-height: 440px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
.barren-bild picture, .barren-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.barren-bild img { object-fit: cover; object-position: 50% 64%; }
.glanzlicht { position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%); mix-blend-mode: screen;
  background: linear-gradient(105deg, rgba(255,236,190,0) 38%, rgba(255,236,190,.26) 50%, rgba(255,236,190,0) 62%); }
.anim-an .glanzlicht { animation: glanz 7s ease-in-out 1s infinite both; }
@keyframes glanz { 0% { transform: translateX(-100%); } 38%, 100% { transform: translateX(100%); } }

@media (max-width: 760px) {
  .marke-wort, .kopf .marke-wort { height: 15px; }
  .ankauf-buehne.ankauf-buehne--foto { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }   /* Runde 3 setzte align-items: center */
  .ankauf-foto { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .ankauf-foto img { object-position: 80% 50%; }
  .ankauf-foto::after { background: linear-gradient(0deg, rgba(244,237,223,1) 0%, rgba(244,237,223,0) 32%); }
  .pruef-chips--quer { left: 12px; top: 12px; gap: 6px; }
  .pruef-chips--quer .pc { padding: 6px 12px; font-size: 12px; gap: 6px; }
  .pruef-chips--quer .pc svg { width: 14px; }
  .ankauf-buehne--foto .ankauf-text { padding: 4px 20px 28px; }
  .ankauf .ankauf-buehne--foto .ankauf-unterzeile { font-size: 16px; }
  .barren-karte { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .barren-text { padding: 36px 20px 8px; }
  .barren-bild { min-height: 0; aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%); mask-image: linear-gradient(180deg, transparent 0, #000 26%); }
}

/* RUNDE 6 (27.10.2026, PO 01:42): Gramm-Rechner und Ausweis-Hinweis entfernt. Der Altgold-Bereich endet mit den 3 Schritten. */
.ankauf { padding-bottom: 72px; }
@media (max-width: 760px) { .ankauf { padding-bottom: 40px; } }

/* ======================================================================
   RUNDE 7 (27.10.2026, PO freigegeben): Model-Bilder (KI-gestützt) in den Karten und als erstes Bild der Abschnitte,
   Glanz und Besuch wieder als Vollbild. Karten-Bilder gehen bis an den Rand; Text oben auf ruhigem Himmel:
   hell = dunkle Schrift auf hellem Schleier, dunkel = weiße Schrift auf leichtem dunklem Verlauf.
   ====================================================================== */
.kr-media--voll { height: 100%; -webkit-mask-image: none; mask-image: none; }
.kr-media--voll::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 48%; pointer-events: none; }
.kr-card--bild-hell { --kr-tx: #1F1A12; --kr-eb: #5C4419; }
.kr-card--bild-hell .kr-media--voll::after { background: linear-gradient(180deg, rgba(250,245,238,.78) 0%, rgba(250,245,238,.4) 52%, rgba(250,245,238,0) 100%); }
.kr-card--bild-dunkel { --kr-tx: #fff; --kr-eb: #F1D78F; }
.kr-card--bild-dunkel .kr-media--voll::after { background: linear-gradient(180deg, rgba(18,14,10,.64) 0%, rgba(18,14,10,.3) 52%, rgba(18,14,10,0) 100%); }
.kr-card--bild .kr-marke { background: rgba(31,24,8,.82); }

/* Armreifen-Abschnitt 2 × 2: Model-Bild, Modelle-Foto (ganz sichtbar), Stapel, Zick-Zack */
.foto--modelle img { object-fit: contain; background: #E3E3E5; }

/* Model-Bild als großes Feld im Bulgari-Raster: 2 Spalten × 2 Zeilen auf dem Desktop */
.k-raster > .k-model { grid-column: span 2; grid-row: span 2; }
.k-model .foto picture { position: relative; flex: 1 1 auto; min-height: 0; }
.k-model .foto img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 30%; }
/* Ringe: Anlagegold-Karte über die volle Breite */
.k-raster > .ist-voll { grid-column: 1 / -1; }

/* Vollbilder Glanz + Besuch */
.glanz img { object-position: 50% 40%; }
.laden img { object-position: 50% 50%; }
.laden .verlauf-unten { height: 380px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5)); }

@media (min-width: 761px) and (max-width: 1100px) {
  .k-raster > .k-model { grid-column: 1 / -1; grid-row: auto; }
  .k-model .foto picture { flex: none; aspect-ratio: 4 / 5; }
}
@media (max-width: 760px) {
  .k-raster > .k-model, .k-raster > .ist-voll { grid-column: 1 / -1; grid-row: auto; }
  .k-model .foto picture { flex: none; aspect-ratio: 4 / 5; }
  .glanz img, .laden img { object-position: 50% 30%; }
  .laden .verlauf-unten { height: 300px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55)); }
}

/* ======================================================================
   RUNDE 8 (27.10.2026): Hero-Film v2 wieder online (Markup + site.js, Stile von Runde 1/2 genügen).
   Armreifen-Abschnitt neu: Einstiegsbild neben dem Text, darunter sechs Modelle (je ein Model-Bild 4:5, Name + Satz),
   Botans beschriftetes Foto klein darunter. Handyfotos 4-2/4-3 sind hier raus.
   ====================================================================== */
.armreifen-text { position: static; align-self: center; }
.armreifen-einstieg { position: relative; margin: 0; min-height: 600px; overflow: hidden; }
.armreifen-einstieg picture, .armreifen-einstieg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.armreifen-einstieg img { object-fit: cover; object-position: 50% 30%; }
.armreif-modelle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 2px 0 0; padding: 0; list-style: none; }
.modell { margin: 0; height: 100%; display: flex; flex-direction: column; background: linear-gradient(to right bottom, #E0E0E0, #F3F2F3); }
.modell picture { display: block; overflow: hidden; }
.modell img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.modell figcaption { display: flex; flex-direction: column; gap: 6px; padding: 18px 24px 26px; }
.modell-name { font-size: 28px; font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
.modell-satz { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.armreifen-zusatz { display: flex; align-items: center; gap: 24px; margin: 0; padding: 28px var(--rand) 64px; }
.armreifen-zusatz picture { flex: none; width: 240px; }
.armreifen-zusatz img { width: 100%; height: auto; border-radius: 4px; }
.armreifen-zusatz figcaption { max-width: 36ch; font-size: 14px; line-height: 1.5; color: var(--leise); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .modell img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .modell:hover img { transform: scale(1.025); }
}
@media (max-width: 760px) {
  .armreifen-einstieg { min-height: 0; aspect-ratio: 4 / 5; }
  .armreif-modelle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modell figcaption { padding: 12px 12px 16px; gap: 4px; }
  .modell-name { font-size: 20px; }
  .modell-satz { font-size: 12px; }
  .armreifen-zusatz { gap: 14px; padding: 20px 16px 40px; }
  .armreifen-zusatz picture { width: 130px; }
  .armreifen-zusatz figcaption { font-size: 13px; }
}

/* ======================================================================
   RUNDE 8 b (27.10.2026, PO 02:39 „alles konsolidieren“): 7 Abschnitte – Hero (Film), Sortiment, Armreifen, Schmuck,
   Gold (Altgold + Anlagegold), Besuch, Footer. Wo viel ist: Wischreihe (.kr) mit Punkten + Pfeilen. Nur Model-Bilder.
   ====================================================================== */
.kr-item[hidden] { display: none; }
html.kr-js .kr--passt .kr-steuer { display: none; }
.karten + .karten { padding-top: 24px; }
.kr-card--produkt { aspect-ratio: 4 / 5; background: #E9E5DE; }
.kr-media--oben img { object-position: 50% 25%; }
.kr-name { margin: 16px 0 0; font-size: 21px; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }
.kr-name + .kr-cap { margin-top: 4px; }
.kr-marke--ecke { position: absolute; z-index: 2; left: 5cqi; top: 5cqi; margin: 0; }
.kr-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--rand) 24px; }
html:not(.kr-js) .kr-filter { display: none; }
.kr-filter button { min-height: 40px; padding: 0 18px; border: 1px solid rgba(0,0,0,.25); border-radius: 999px; background: transparent; color: #000; font-size: 14px; cursor: pointer; }
.kr-filter button:hover { border-color: #000; }
.kr-filter button[aria-pressed="true"] { background: #000; border-color: #000; color: #fff; }

/* Gold: Altgold (2/3) + Anlagegold (1/3) */
.gold { background: #fff; padding: 72px 0; }
.gold .regal-kopf { padding-bottom: 36px; }
.gold-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; padding: 0 var(--rand); }
.gold .ankauf { padding: 0; }
.gold .ankauf-buehne.ankauf-buehne--foto { min-height: 500px; max-width: none; }
.gold .ankauf-buehne--foto .ankauf-text { max-width: 470px; padding: 56px 44px; }
.gold .ankauf-foto::after { background: linear-gradient(90deg, rgba(246,240,228,.97) 0%, rgba(246,240,228,.92) 34%, rgba(246,240,228,.45) 48%, rgba(246,240,228,0) 60%); }
.gold .pruef-chips--quer { left: 57%; top: 9%; }
.gold .ankauf .gross-h { font-size: clamp(36px, 3.4vw, 52px); }
.gold .schritte { margin-top: 16px; gap: 16px; }
.gold .schritt { padding: 20px 20px 22px; }
.gold .schritt-bild { max-width: 200px; margin-bottom: 10px; }
.gold .schritt h3 { margin: 6px 0; font-size: 19px; }
.gold .schritt p { font-size: 13px; }
.anlage-karte { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100%; overflow: hidden; border-radius: 18px; background: #16181A; color: #fff; }
.anlage-bild { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.anlage-bild picture, .anlage-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.anlage-bild img { object-fit: cover; object-position: 50% 72%; }
.anlage-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,16,.9) 0%, rgba(14,14,16,.55) 36%, rgba(14,14,16,0) 60%); }
.anlage-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 36px 32px; }
.anlage-text .ek-eb { color: var(--gold); }
.anlage-text h3 { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.1; }
.anlage-text p { margin: 0 0 8px; max-width: 30ch; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.84); }
.anim-an .anlage-bild img { animation: kr-zoom 16s ease-in-out infinite alternate both; }

/* Besuch: Google-Bewertung */
.laden .bewertung { margin: 0 0 16px; font-size: 13px; }
.laden .bewertung a { text-decoration: none; }

@media (min-width: 761px) and (max-width: 1100px) {
  .gold-raster { grid-template-columns: minmax(0, 1fr); }
  .anlage-karte { min-height: 520px; }
}
@media (max-width: 760px) {
  .kr-name { margin-top: 12px; font-size: 19px; }
  .kr-filter { gap: 6px; padding: 0 16px 18px; }
  .kr-filter button { min-height: 38px; padding: 0 14px; font-size: 13px; }
  .gold { padding: 48px 0; }
  .gold .regal-kopf { padding-bottom: 24px; }
  .gold-raster { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 12px; }
  .gold .ankauf-buehne--foto .ankauf-text { max-width: none; padding: 4px 20px 28px; }
  .gold .pruef-chips--quer { left: 12px; top: 12px; }
  .gold .schritte { margin: 12px -12px 0; padding: 0 12px 6px; }
  .anlage-karte { min-height: 0; }
  .anlage-bild { position: relative; inset: auto; z-index: 0; order: 2; aspect-ratio: 4 / 3; }   /* Handy: Bild unter dem Text, kein Knopf über den Barren */
  .anlage-bild img { object-position: 50% 78%; }
  .anlage-bild::after { background: linear-gradient(180deg, rgba(22,24,26,1) 0%, rgba(22,24,26,0) 30%); }
  .anlage-text { padding: 28px 22px; }
  .anlage-text h3 { font-size: 28px; }
}

/* ======================================================================
   RUNDE 9 (27.10.2026, PO 03:04): Anlagegold ist Karte 04 in der Reihe der Ankauf-Schritte (gleiches Format).
   Altgold-Foto über volle Breite, darunter die Wischreihe 01–04: ab 1101 px vier nebeneinander, sonst wischbar mit Punkten.
   ====================================================================== */
.gold-raster { grid-template-columns: minmax(0, 1fr); }
.gold .ankauf-buehne.ankauf-buehne--foto { min-height: 540px; }
.gold .pruef-chips--quer { left: 55%; top: 12%; }
.kr--schritte { --kr-w: 300px; --kr-gap: 16px; }
.kr--schritte .kr-row { align-items: stretch; margin: 0; padding: 16px var(--kr-rand) 8px; }
.kr--schritte .kr-steuer { margin-top: 20px; }
.schritt-reihe { list-style: none; }
@media (min-width: 1101px) {
  .kr--schritte .kr-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: auto; }
  .kr--schritte .kr-item { width: auto; }
}
/* Karte 04 Anlagegold: Anthrazit, Barrenfoto oben bildfüllend mit weichem Verlauf */
.schritt--anlage { background: #232528; color: #fff; --s-strich: #E2C47E; }
.schritt-foto { position: relative; height: 170px; margin: -20px -20px 14px; overflow: hidden; }
.schritt-foto picture, .schritt-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.schritt-foto img { object-fit: cover; object-position: 50% 68%; }
.schritt-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35,37,40,0) 35%, rgba(35,37,40,.6) 70%, #232528 100%); }
.schritt--anlage .schritt-nr { color: var(--gold); opacity: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.schritt--anlage p { color: rgba(255,255,255,.84); }
.schritt--anlage .pfeil-link { color: #F1D78F; }
.anim-an .schritt-foto img { animation: kr-zoom 16s ease-in-out infinite alternate both; }
@media (max-width: 760px) {
  .kr--schritte { --kr-w: 84vw; --kr-gap: 12px; }
  .kr--schritte .kr-row { padding: 12px 12px 6px; }
  .schritt-foto { height: 180px; }
}

/* Runde 9, PO 03:07: weicher Verlauf hinter Hero-Überschrift, Unterzeile und Knöpfen – kein Kasten, keine Kante.
   Desktop: von unten links dunkel nach oben rechts transparent. Handy: von unten nach oben. Liegt über Film und Poster. */
.hero.buehne .verlauf-unten {
  inset: 0; height: auto;
  background: radial-gradient(115% 95% at 0% 100%, rgba(0,0,0,.48) 0%, rgba(0,0,0,.36) 30%, rgba(0,0,0,.16) 50%, rgba(0,0,0,0) 68%);
}
@media (max-width: 760px) {
  .hero.buehne .verlauf-unten { height: auto; background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.32) 26%, rgba(0,0,0,.12) 44%, rgba(0,0,0,0) 62%); }
}

/* ======================================================================
   RUNDE 10 (27.10.2026, PO: Übergang zum Footer „eine Katastrophe“): Besuch-Bild läuft unten weich in die Footer-Farbe
   (--nacht #0D1612) aus, oben weich aus dem Weiß des Gold-Abschnitts; weniger Weißraum davor. Keine harten Kanten.
   ====================================================================== */
.gold { padding-bottom: 36px; }
.laden { background: var(--nacht); }
.laden::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: 16%; pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.55) 35%, rgba(255,255,255,0) 100%); }
.laden .verlauf-unten { height: 44%;
  background: linear-gradient(180deg, rgba(13,22,18,0) 0%, rgba(13,22,18,.5) 38%, rgba(13,22,18,.86) 72%, #0D1612 100%); }
@media (max-width: 760px) {
  .gold { padding-bottom: 20px; }
  .laden { aspect-ratio: 4 / 5.6; }
  .laden::before { height: 12%; }
  .laden .verlauf-unten { height: 66%;
    background: linear-gradient(180deg, rgba(13,22,18,0) 0%, rgba(13,22,18,.5) 30%, rgba(13,22,18,.85) 62%, #0D1612 100%); }
}

/* PO 27.10. 03:18: großes Logo + Schriftzug im Footer entfernt – Sitemap allein oben */
.mega-oben { grid-template-columns: minmax(0, 1fr); align-items: start; }

/* Fix 27.10. 03:37: alte Handy-Regel `.schritt { flex: 0 0 84% }` (Runde 4) machte die Karten in der Wischreihe breiter als den Bildschirm */
.kr--schritte .schritt { flex: none; width: var(--kr-w); }