/* =====================================================================================
   Feinschlag Goldschmiede · Bautyp Samtlade mit Lupe
   Aufbau: 1 Grundlagen · 2 Kopf und Schiene · 3 Laden · 4 Vitrine und Konfigurator · 5 Lupe · 6 Werkbank
           7 Trauringe · 8 Reparatur · 9 Stimmen · 10 Jobs · 11 Kontakt · 12 Fuß · 13 Auftritt (scroll-getrieben)
           14 Schub (View Transition) · 15 Handy
   Moderne Technik: @property (tokens.css), color-mix(), :has(), Container-Queries, animation-timeline,
   View Transitions. Jede Stelle hat einen Rückfall; ohne JavaScript ist alles lesbar.
   ===================================================================================== */

/* ---------- 1 · Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--nacht); }
html[data-bewegung="starr"] { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--schrift); font-size: 17px; line-height: 1.55; padding-bottom: var(--unten); overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2 { font-family: var(--schrift-kopf); font-weight: 400; letter-spacing: .005em; }
h1 { font-size: clamp(40px, 5.2vw, 56px); line-height: 1.02; }
h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; text-wrap: balance; }
h3 { font-size: 20px; line-height: 1.25; font-weight: 700; }
a { color: var(--gold-hell); text-underline-offset: 3px; }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 3px; }
.sprung { position: absolute; left: 12px; top: -80px; z-index: 90; padding: 10px 16px; border-radius: 6px; background: var(--gold); color: var(--on-accent); font-weight: 700; }
.sprung:focus { top: 12px; }
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.huelle { width: var(--huelle); margin-inline: auto; }
.klein { font-size: 14px; line-height: 1.45; color: var(--muted); }
.kapitaelchen { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hell); }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.nur-finger { display: none; }
@media (hover: none) { .nur-maus { display: none; } .nur-finger { display: inline; } }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font: 700 15.5px/1 var(--schrift); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background-color .2s; }
.knopf:active { transform: translateY(1px); }
.knopf-haupt { color: var(--on-accent); background-color: var(--metall); background-image: linear-gradient(180deg, var(--metall-hell), var(--metall) 55%, color-mix(in oklab, var(--metall), black 38%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 8px 18px rgb(0 0 0 / .35); }
.knopf-haupt:hover { color: var(--on-accent); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 12px 24px rgb(0 0 0 / .4); }
.knopf-ruhig { color: var(--text); background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .22); }
.knopf-ruhig:hover { background: rgb(255 255 255 / .14); color: #fff; }
.knopf-papier { color: var(--gold-hell); background-color: #1a1409; background-image: linear-gradient(180deg, #2a2112, #15100a); border-color: #6b5320; box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 6px 14px rgb(0 0 0 / .3); }
.knopf-papier:hover { color: #fff; }
.knopf-klein { min-height: 44px; padding: 0 18px; font-size: 14.5px; }

/* Akzentfarbe folgt dem gewählten Metall: im ersten Bildschirm per :has() am Abschnitt, im Kopf (Schiene, Telefon, Termin) über
   data-metall, das js/ring.js setzt. Bewusst nicht für die ganze Seite und nicht an <html> oder <body>: Dort lässt jede Änderung den
   Browser die ganze Seite neu durchrechnen (das waren lange Aufgaben beim Umstellen). */
body { --metall: var(--gold); --metall-hell: var(--gold-hell); }
.lade-vitrine:has(#m-weiss:checked),  .kopf[data-metall="weiss"]  { --metall: #cfd8ea; --metall-hell: #eef2fa; }
.lade-vitrine:has(#m-rose:checked),   .kopf[data-metall="rose"]   { --metall: #e8a595; --metall-hell: #f8cdc1; }
.lade-vitrine:has(#m-silber:checked), .kopf[data-metall="silber"] { --metall: #bfc7d4; --metall-hell: #e6ebf3; }

/* ---------- 2 · Kopf und Schiene ---------- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--kopf); background: linear-gradient(180deg, color-mix(in oklab, var(--nacht) 97%, transparent), color-mix(in oklab, var(--nacht) 90%, transparent)); border-bottom: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.kopf-innen { height: 100%; width: var(--huelle); margin-inline: auto; display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); align-items: center; gap: 18px; }
.marke { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--gold-hell); justify-self: start; }
.marke-zeichen { width: 36px; height: 36px; color: var(--metall); }
.marke-text { display: grid; line-height: 1.1; }
.marke-text b { font: 400 26px/1 var(--schrift-kopf); color: var(--text); letter-spacing: .01em; }
.marke-text small { margin-top: 4px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.kopf-rechts { justify-self: end; display: flex; align-items: center; gap: 14px; }
.kopf-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font: 700 16px/1 var(--schrift); letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.kopf-tel svg { width: 20px; height: 20px; color: var(--metall); flex: none; }
.kopf-tel:hover { color: var(--metall-hell); }

/* Schiene: kleine Steine auf einer Messingschiene */
.schiene { position: relative; height: 64px; padding-inline: 8px; }
.schiene ol { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0px, .3vw, 6px); height: 100%; }
.schiene a { position: relative; display: grid; grid-template-rows: 42px 6px 16px; justify-items: center; width: clamp(54px, 5.3vw, 76px); height: 100%; padding-top: 1px; color: var(--muted); text-decoration: none; }
.stein-bild { width: 32px; height: 32px; align-self: end; margin-bottom: 4px; filter: drop-shadow(0 3px 2px rgb(0 0 0 / .65)); transition: transform .42s cubic-bezier(.3, 1.5, .5, 1), filter .3s; }
.schild { grid-row: 3; margin-top: 1px; font-size: 10px; font-weight: 700; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: color .25s; }
.schiene a:hover .stein-bild, .schiene a:focus-visible .stein-bild { transform: translateY(-5px) scale(1.1); }
.schiene:has(a:hover) a:not(:hover):not([aria-current]) { opacity: .62; }
.schiene a:hover .schild, .schiene a:focus-visible .schild { color: #fff; }
.schiene a[aria-current="location"] .stein-bild { transform: translateY(-6px) scale(1.16); filter: drop-shadow(0 0 9px color-mix(in oklab, var(--metall-hell) 65%, transparent)) drop-shadow(0 3px 2px rgb(0 0 0 / .65)); }
.schiene a[aria-current="location"] .schild { color: var(--metall-hell); }
.marke-abschnitt { display: none; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--metall-hell); }
.bahn { position: absolute; left: 0; right: 0; top: 43px; height: 6px; border-radius: 3px; overflow: hidden; background: linear-gradient(180deg, #f6e3a4 0%, #b88a2e 40%, #5f420f 62%, #d4a748 100%); box-shadow: 0 2px 5px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .55); z-index: -1; }
.bahn-lauf { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / .0), rgb(255 255 255 / .85)); transform: scaleX(0); transform-origin: left; mix-blend-mode: soft-light; }
/* der Schlitten: leuchtender Stempel unter dem aktiven Stein; wandert beim Sprung als geteiltes Element mit */
.schlitten { position: absolute; left: 50%; top: 41px; width: 36px; height: 10px; margin-left: -18px; border-radius: 5px; background: linear-gradient(180deg, #fff6cf, var(--metall-hell) 40%, var(--metall) 75%); box-shadow: 0 0 14px color-mix(in oklab, var(--metall-hell) 80%, transparent), 0 2px 4px rgb(0 0 0 / .6); view-transition-name: schlitten; pointer-events: none; }

/* ---------- 3 · Laden (Samt) ---------- */
.lade { --samt: #101a36; position: relative; isolation: isolate; scroll-margin-top: calc(var(--kopf) - 1px);
  --samt-hell: color-mix(in oklab, var(--samt), white 22%);
  --samt-tief: color-mix(in oklab, var(--samt), black 58%);
  background:
    radial-gradient(120% 70% at 50% -8%, var(--samt-hell) 0%, transparent 62%),
    radial-gradient(70% 50% at 10% 100%, color-mix(in oklab, var(--samt), white 8%) 0%, transparent 70%),
    repeating-linear-gradient(98deg, rgb(255 255 255 / .026) 0 1px, rgb(0 0 0 / .03) 1px 3px),
    linear-gradient(180deg, var(--samt), var(--samt-tief)); }
.lade[data-samt="nacht"] { --samt: #101a36; }
.lade[data-samt="anthrazit"] { --samt: #222a35; }
.lade[data-samt="saphir"] { --samt: var(--saphir); }
.lade[data-samt="rubin"] { --samt: var(--rubin); }
.lade[data-samt="smaragd"] { --samt: var(--smaragd); }

.lade-front { position: relative; z-index: 3; height: 58px; display: flex; align-items: center; gap: 18px; padding-inline: max(var(--rand), calc((100% - 1380px) / 2));
  background: linear-gradient(180deg, #43321d 0%, #2a1e11 46%, #17100a 100%); border-top: 1px solid #b08a34; border-bottom: 2px solid #060402;
  box-shadow: 0 16px 34px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .14); }
.lade-front::after { content: ""; position: absolute; inset: auto 0 -26px 0; height: 26px; background: linear-gradient(180deg, rgb(0 0 0 / .4), transparent); pointer-events: none; }
.knauf { flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: conic-gradient(from var(--glanz), #6c4e17, #f7e6a8 10%, #8a6420 22%, #e8c76b 36%, #5e4313 52%, #f2dc92 68%, #7d5a1b 84%, #6c4e17);
  box-shadow: inset 0 -4px 6px rgb(0 0 0 / .5), inset 0 2px 3px rgb(255 255 255 / .55), 0 5px 8px rgb(0 0 0 / .65); }
.lade-nr { font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: #d7bd82; }
.schildchen { margin-left: auto; padding: 5px 16px; border: 1px solid #b08a34; border-radius: 3px; background: #0d0a05; color: var(--gold-hell); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; box-shadow: inset 0 0 0 3px #0d0a05, inset 0 0 0 4px #5a431a; }

.lade-inhalt { padding-block: clamp(52px, 6vw, 92px) var(--abstand); }
.lade-kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 90px); align-items: end; margin-bottom: clamp(30px, 4vw, 56px); }
.lade-kopf .kapitaelchen { grid-column: 1 / -1; }
.lade-kopf h2 { grid-column: 1; }
.lade-kopf .lead { grid-column: 2; padding-bottom: 6px; }

/* ---------- 4 · Vitrine, Bühne und Konfigurator ---------- */
.lade-vitrine { --samt: #101a36; padding-top: var(--kopf); }
/* Den Ton der Steinfarbe nimmt nur das Samtkissen im Canvas an (js/ring.js). Hintergrund von Lade und Bühne bleiben Nachtblau:
   Sonst müsste bei jeder Wahl eine große Fläche mit Verläufen neu gezeichnet werden (das waren die langen Aufgaben). */
.vitrine { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 54px); align-items: start; padding-block: clamp(18px, 2.2vw, 30px) clamp(40px, 4.4vw, 68px); }
.vitrine-kopf { display: grid; gap: 8px; margin-bottom: clamp(12px, 1.6vw, 20px); }
.vitrine-kopf .kapitaelchen { margin: 0; }
.vitrine-kopf .lead { max-width: 56ch; }
.vitrine-kopf h1 { color: var(--text); }

.buehne { position: relative; aspect-ratio: 1.12 / 1; border-radius: 16px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 56% at 50% 0%, rgb(255 244 214 / .30) 0%, transparent 70%),
    radial-gradient(90% 70% at 50% 100%, #0c1630 0%, transparent 78%),
    linear-gradient(180deg, #0a1328, #050a16);
  border: 1px solid color-mix(in oklab, var(--metall) 34%, transparent);
  box-shadow: 0 18px 28px rgb(0 0 0 / .4); }
.buehne::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 90px rgb(0 0 0 / .6); will-change: transform; }
.buehne::before { content: ""; position: absolute; inset: 10px; z-index: 3; pointer-events: none; border: 1px solid color-mix(in oklab, var(--metall) 36%, transparent);
  border-radius: 10px;
  -webkit-mask: linear-gradient(#000 0 0) top left / 30px 30px no-repeat, linear-gradient(#000 0 0) top right / 30px 30px no-repeat, linear-gradient(#000 0 0) bottom left / 30px 30px no-repeat, linear-gradient(#000 0 0) bottom right / 30px 30px no-repeat;
  mask: linear-gradient(#000 0 0) top left / 30px 30px no-repeat, linear-gradient(#000 0 0) top right / 30px 30px no-repeat, linear-gradient(#000 0 0) bottom left / 30px 30px no-repeat, linear-gradient(#000 0 0) bottom right / 30px 30px no-repeat; }
.buehne-licht { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: conic-gradient(from 180deg at 50% -8%, transparent 150deg, rgb(255 240 205 / .14) 172deg, rgb(255 240 205 / .22) 180deg, rgb(255 240 205 / .14) 188deg, transparent 210deg); }
.ring-huelle { position: absolute; inset: 0; z-index: 1; touch-action: pan-y; cursor: grab; }
.ring-huelle:active { cursor: grabbing; }
.ring-ruhig { position: absolute; left: 50%; top: 53%; width: min(86%, 560px); transform: translate(-50%, -50%); }
.ring-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.ring-huelle.ist-bereit .ring-canvas { display: block; }
.ring-huelle.ist-bereit .ring-ruhig { visibility: hidden; }
.ring-huelle.baut-um .ring-canvas { animation: ring-baut .5s cubic-bezier(.2, .9, .3, 1); }
@keyframes ring-baut { from { transform: scale(.955); opacity: .55; } to { transform: none; opacity: 1; } }
.buehne-hinweis { position: absolute; left: 22px; bottom: 16px; z-index: 4; margin: 0; max-width: 60%; font-size: 13.5px; color: var(--muted); pointer-events: none; }
.vorfuehrung { position: absolute; z-index: 5; top: 20px; left: 22px; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgb(8 14 30 / .82); border: 1px solid color-mix(in oklab, var(--metall) 45%, transparent); font-size: 13.5px; color: var(--text); }
.vorfuehrung[hidden] { display: none; }
.vorfuehrung i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--metall-hell); }
.vorfuehrung i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--metall-hell); animation: puls 1.6s ease-out infinite; }
@keyframes puls { from { transform: scale(1); opacity: .8; } to { transform: scale(2.8); opacity: 0; } }

.konfig { position: relative; isolation: isolate; container-type: inline-size; container-name: konfig; padding: 18px 22px 18px; border-radius: 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / .075), rgb(255 255 255 / .03)); border: 1px solid rgb(255 255 255 / .14); }
.konfig::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 24px 50px rgb(0 0 0 / .35); will-change: transform; }
.konfig-kopf { margin-bottom: 10px; }
.konfig-kopf h2 { font-size: clamp(26px, 2.2vw, 31px); margin-bottom: 4px; }
.gruppen { display: grid; gap: 10px 18px; }
.gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.gruppe legend, .gruppe > label { display: block; padding: 0; margin-bottom: 7px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hell); }
.gruppe > label output { margin-left: 8px; letter-spacing: .04em; color: var(--text); font-size: 14px; text-transform: none; }
.wahl { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.chip { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 52px; min-height: 44px; padding: 4px 4px; border-radius: 12px; border: 1px solid transparent; color: var(--muted); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; outline: none; }
.chip-text { font-size: 12.5px; font-weight: 600; line-height: 1.1; text-align: center; }
.chip:hover { background: rgb(255 255 255 / .07); color: var(--text); }
.chip:has(input:checked) { background: color-mix(in oklab, var(--metall) 14%, transparent); border-color: var(--metall); color: #fff; }
.chip:has(input:focus-visible) { outline: 3px solid var(--gold-hell); outline-offset: 2px; }
.chip.zeigt { animation: zeigt 1s ease-out 1; }
@keyframes zeigt { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--metall-hell) 80%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.wahl-text .chip { flex-direction: row; min-width: 0; padding-inline: 16px; border-color: rgb(255 255 255 / .16); border-radius: 999px; min-height: 44px; }
.wahl-text .chip-text { font-size: 14px; }
.ico { width: 36px; height: 36px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .5)); }
.probe { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 -3px 5px rgb(0 0 0 / .35), inset 0 2px 3px rgb(255 255 255 / .5), 0 3px 5px rgb(0 0 0 / .5); }
.probe[data-metall="gelb"] { background: conic-gradient(from 200deg, #7a5313, #f6e29a, #b9852b, #fbebb2, #8a5f17, #f1d78a, #7a5313); }
.probe[data-metall="weiss"] { background: conic-gradient(from 200deg, #7d8798, #f5f8fd, #aeb7c6, #ffffff, #8c96a8, #eef2f9, #7d8798); }
.probe[data-metall="rose"] { background: conic-gradient(from 200deg, #8c4f3e, #fbc7b8, #c9806d, #ffdacd, #9a5744, #f4b9a8, #8c4f3e); }
.probe[data-metall="silber"] { background: conic-gradient(from 200deg, #6f7682, #ffffff, #a6adb9, #f3f5f8, #7d8490, #e8ebf0, #6f7682); }
.g-metall .chip-text, .g-farbe .chip-text, .g-schliff .chip-text { font-size: 12px; }

.regler { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--metall); cursor: pointer; -webkit-appearance: none; appearance: none; }
.regler::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--metall) 0 var(--fuell, 33%), rgb(255 255 255 / .22) var(--fuell, 33%)); }
.regler::-moz-range-track { height: 6px; border-radius: 3px; background: rgb(255 255 255 / .22); }
.regler::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--metall); }
.regler::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; border: 0; background: conic-gradient(from 200deg, #7a5313, #fff2c0, #b9852b, #fff, #8a5f17, #f1d78a, #7a5313); box-shadow: 0 3px 8px rgb(0 0 0 / .6), inset 0 -2px 3px rgb(0 0 0 / .3); }
.regler::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--metall-hell); box-shadow: 0 3px 8px rgb(0 0 0 / .6); }
.feld, .feld-zeile .feld { display: grid; gap: 6px; }
.gruppe .feld { display: block; }
input.feld, .gruppe input[type="text"] { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .06); color: var(--text); font: 500 16px/1 var(--schrift); }
input.feld::placeholder { color: color-mix(in oklab, var(--muted), transparent 25%); }

/* Preis */
.preis { margin-top: 12px; padding: 12px 18px 12px; border-radius: 14px; border: 1px solid transparent; position: relative;
  background: linear-gradient(180deg, #0a0f20, #0c142c) padding-box, conic-gradient(from var(--lauf), color-mix(in oklab, var(--metall) 70%, transparent), rgb(255 255 255 / .12), color-mix(in oklab, var(--metall) 70%, transparent), rgb(255 255 255 / .08), color-mix(in oklab, var(--metall) 70%, transparent)) border-box; transition: --lauf 1.6s ease; }
.preis:hover { --lauf: 180deg; }
.preis-haupt { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.preis-kopf { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.preis-summe { font: 400 clamp(44px, 4.4vw, 56px)/1 var(--schrift-kopf); color: var(--metall-hell); letter-spacing: .01em; }
.preis-summe .waehrung { font-size: .6em; margin-right: 2px; }
.preis-summe.puls { animation: preis-puls .5s ease-out; }
@keyframes preis-puls { 0% { transform: scale(1.06); color: #fff; } 100% { transform: none; } }
.preis-zeilen { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / .12); }
.preis-zeilen > div { display: grid; grid-template-columns: 88px auto 1fr; gap: 4px 12px; align-items: baseline; }
.preis-zeilen dt { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.preis-zeilen dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.preis-zeilen dd.klein { font-weight: 400; }
.konfig-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.konfig-knoepfe .knopf-haupt { flex: 1 1 180px; }
.konfig-fuss { margin-top: 12px; }

@container konfig (min-width: 520px) {
  .gruppen { grid-template-columns: 1fr 1fr; }
  .g-breit { grid-column: 1 / -1; }
  .preis-zeilen { grid-template-columns: repeat(3, 1fr); }
  .preis-zeilen > div { display: grid; grid-template-columns: 1fr; gap: 2px; }
}
@container konfig (min-width: 600px) {
  .gruppen { grid-template-columns: auto 1fr; }
}

/* ---------- 5 · Lupe ---------- */
.lupe-raster { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); gap: clamp(22px, 3vw, 54px); align-items: stretch; }
.lupe-buehne { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; isolation: isolate; cursor: none; touch-action: pan-y;
  background: radial-gradient(60% 70% at 50% 40%, color-mix(in oklab, var(--samt), white 18%), transparent 80%), linear-gradient(180deg, color-mix(in oklab, var(--samt), black 25%), color-mix(in oklab, var(--samt), black 62%));
  border: 1px solid rgb(255 255 255 / .16); box-shadow: inset 0 0 80px rgb(0 0 0 / .5), 0 26px 50px rgb(0 0 0 / .4); }
.lupe-grund { position: absolute; inset: 0; background: repeating-linear-gradient(98deg, rgb(255 255 255 / .03) 0 1px, rgb(0 0 0 / .04) 1px 3px); pointer-events: none; }
.lupe-ring { position: absolute; inset: 0; }
.lupe-ruhig { position: absolute; left: 50%; top: 52%; height: 96%; width: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
.lupe-basis, .lupe-zoom { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.lupe-ring.ist-bereit .lupe-basis, .lupe-ring.ist-bereit .lupe-zoom { display: block; }
.lupe-ring.ist-bereit .lupe-ruhig { visibility: hidden; }
.lupe-zoom { z-index: 2; -webkit-mask-image: radial-gradient(circle at var(--lx, -400px) var(--ly, -400px), #000 calc(var(--lr, 120px) - 2px), transparent var(--lr, 120px)); mask-image: radial-gradient(circle at var(--lx, -400px) var(--ly, -400px), #000 calc(var(--lr, 120px) - 2px), transparent var(--lr, 120px)); pointer-events: none; }
.lupe-rand { position: absolute; z-index: 3; left: 0; top: 0; width: calc(var(--lr, 120px) * 2 + 12px); height: calc(var(--lr, 120px) * 2 + 12px); margin: calc(var(--lr, 120px) * -1 - 6px) 0 0 calc(var(--lr, 120px) * -1 - 6px); border-radius: 50%; pointer-events: none; display: none; transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
  border: 6px solid transparent; background: conic-gradient(from 20deg, #6c4e17, #f7e6a8, #8a6420, #e8c76b, #5e4313, #f2dc92, #7d5a1b, #6c4e17) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box; -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box; mask-composite: exclude;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / .55)); }
.lupe-buehne.aktiv .lupe-rand { display: block; }
.lupe-buehne .buehne-hinweis { z-index: 4; }
.lupe-liste { align-self: center; display: grid; gap: 14px; padding: 22px; border-radius: 16px; background: rgb(6 12 30 / .45); border: 1px solid rgb(255 255 255 / .14); }
.lupe-liste h3 { font: 400 26px/1.1 var(--schrift-kopf); }
.lupe-liste ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lupe-liste li { display: grid; gap: 2px; padding-left: 16px; border-left: 2px solid var(--gold); }
.lupe-liste li b { color: var(--gold-hell); font-size: 15px; letter-spacing: .04em; }
.lupe-liste li span { color: var(--muted); font-size: 15.5px; }

/* ---------- 6 · Werkbank (klebend) ---------- */
.werkbank { --samt: #222a35; }
.wb-lauf { position: relative; }
.js .wb-lauf { height: 600vh; }
.kleb { position: relative; display: block; }
.js .kleb { position: sticky; top: 0; height: calc(100vh - var(--unten)); height: calc(100svh - var(--unten)); overflow: hidden; padding-top: var(--kopf); }
.kleb-innen { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(290px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(22px, 3vw, 54px); padding-block: 18px 22px; }
.js .kleb-innen { height: 100%; }
.wb-kopf { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.wb-kopf .kapitaelchen { margin: 0; }
.wb-kopf h2 { font-size: clamp(28px, 3vw, 40px); }
.wb-szene { position: relative; min-height: 0; border-radius: 16px; overflow: hidden; background: #0c1224; display: grid; align-items: center; border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 26px 50px rgb(0 0 0 / .45); align-self: start; }
.wb-svg { width: 100%; height: auto; max-height: calc(100svh - var(--kopf) - 175px); margin-inline: auto; }
.wb-tafel { position: absolute; left: 16px; bottom: 16px; z-index: 2; min-width: 190px; padding: 10px 16px 11px; border-radius: 6px; background: linear-gradient(180deg, #232c26, #161c18); border: 3px solid #6b4c27; box-shadow: 0 8px 16px rgb(0 0 0 / .5), inset 0 0 18px rgb(0 0 0 / .5); }
.wb-tafel-zeile { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #cfe3d4; }
.wb-tafel-wert { margin-top: 3px; font: 400 21px/1.15 var(--schrift-kopf); color: #f4efe3; }
.wb-thermo { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .14); }
.wb-thermo-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wb-thermo-kopf { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hell); }
.wb-thermo-saeule { display: block; height: 12px; border-radius: 6px; background: #121a30; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.wb-thermo-saeule i { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(90deg, #ffd36b, #ff7a2f 60%, #ff3c2a); transform: scaleX(.02); transform-origin: left; }
.wb-thermo-wert { font-size: 15px; color: var(--text); white-space: nowrap; }
.wb-thermo-wert b { font: 400 34px/1 var(--schrift-kopf); font-variant-numeric: tabular-nums; color: var(--gold-hell); }
.wb-text { position: relative; align-self: stretch; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 20px 24px 22px; border-radius: 16px; background: rgb(6 10 22 / .5); border: 1px solid rgb(255 255 255 / .14); }
.wb-zaehler { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.wb-zaehler b { font: 400 66px/1 var(--schrift-kopf); letter-spacing: 0; color: var(--gold-hell); margin-right: 6px; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.schritt h3 { font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--schrift-kopf); margin-bottom: 8px; color: var(--text); }
.schritt p { color: var(--muted); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; }
.js .schritte { display: grid; align-content: start; }
.js .schritt { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s; pointer-events: none; }
.js .schritt.ist-aktiv { opacity: 1; transform: none; pointer-events: auto; }
.wb-weg { display: none; grid-column: 1 / -1; list-style: none; margin: 16px 0 0; padding: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.js .wb-weg { display: grid; }
.wb-weg li { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 4px solid rgb(255 255 255 / .16); color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: border-color .3s, color .3s; }
.wb-weg b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(255 255 255 / .12); font-size: 13px; }
.wb-weg li.ist-fertig { border-top-color: color-mix(in oklab, var(--gold) 55%, transparent); }
.wb-weg li.ist-aktiv { border-top-color: var(--gold); color: var(--gold-hell); }
.wb-weg li.ist-aktiv b { background: var(--gold); color: var(--on-accent); }
.schritt-meta { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .14); display: grid; gap: 10px; }
.schritt-meta div { display: grid; gap: 1px; }
.schritt-meta dt { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hell); }
.schritt-meta dd { margin: 0; color: var(--text); font-size: 15.5px; }
.js .wb-zaehler { display: block; }
html:not(.js) .wb-zaehler, html:not(.js) .wb-tafel, html:not(.js) .wb-thermo { display: none; }
html:not(.js) .schritte { counter-reset: s; gap: 22px; }
html:not(.js) .schritt { counter-increment: s; }
html:not(.js) .schritt h3::before { content: counter(s) ". "; color: var(--gold-hell); }
[data-bewegung="starr"] .js .wb-lauf, .js[data-bewegung="starr"] .wb-lauf { height: auto; }
.js[data-bewegung="starr"] .kleb { position: static; height: auto; overflow: visible; }
.js[data-bewegung="starr"] .kleb-innen { height: auto; }
.js[data-bewegung="starr"] .schritte { gap: 22px; counter-reset: s; }
.js[data-bewegung="starr"] .schritt { opacity: 1; transform: none; pointer-events: auto; grid-area: auto; counter-increment: s; }
.js[data-bewegung="starr"] .schritt h3::before { content: counter(s) ". "; color: var(--gold-hell); }
.js[data-bewegung="starr"] .wb-weg, .js[data-bewegung="starr"] .wb-zaehler, .js[data-bewegung="starr"] .wb-tafel, .js[data-bewegung="starr"] .wb-thermo { display: none; }

/* ---------- 7 · Trauringe ---------- */
.trau-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.trau-karte { container-type: inline-size; display: grid; align-content: start; gap: 8px; padding: 18px 18px 22px; border-radius: 16px; background: linear-gradient(180deg, rgb(0 0 0 / .26), rgb(0 0 0 / .42)); border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); box-shadow: 0 20px 40px rgb(0 0 0 / .35); transition: transform .35s, border-color .35s; }
.trau-karte:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--gold) 70%, transparent); }
.trau-karte img { width: 100%; height: auto; aspect-ratio: 480 / 380; border-radius: 10px; background: radial-gradient(70% 70% at 50% 35%, rgb(255 240 210 / .20), transparent 75%), rgb(0 0 0 / .25); }
.trau-karte h3 { font: 400 clamp(26px, 8cqi, 34px)/1.1 var(--schrift-kopf); margin-top: 6px; }
.trau-material { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hell); }
.trau-karte p:not(.trau-material):not(.trau-preis) { color: var(--muted); }
.trau-preis { margin-top: 4px; color: var(--muted); }
.trau-preis b { font: 400 28px/1 var(--schrift-kopf); color: var(--gold-hell); margin-left: 4px; }
.trau-weg { list-style: none; counter-reset: w; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.trau-weg li { counter-increment: w; position: relative; display: grid; gap: 4px; padding: 14px 0 0; border-top: 2px solid color-mix(in oklab, var(--gold) 55%, transparent); }
.trau-weg li::before { content: counter(w); position: absolute; top: -17px; left: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--on-accent); font: 700 15px/1 var(--schrift); }
.trau-weg b { font-size: 17px; margin-top: 8px; }
.trau-weg span { color: var(--muted); font-size: 15.5px; }

/* ---------- 8 · Reparatur ---------- */
.rep-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); gap: clamp(22px, 3vw, 54px); align-items: start; }
.rep-leistungen { container-type: inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.leistung { display: grid; align-content: start; gap: 6px; padding: 20px 20px 18px; border-radius: 14px; background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .16); transition: transform .3s, background-color .3s, border-color .3s, box-shadow .3s; }
.leistung h3 { font-size: 19px; }
.leistung p { color: var(--muted); font-size: 15.5px; }
.leistung .leistung-preis { margin-top: 4px; color: var(--gold-hell); font-weight: 700; font-size: 15px; }
/* Die Wahl im Reparaturzettel leuchtet die passende Karte an (:has) */
.rep-raster:has(#t-anliegen option[value="weiten"]:checked) .leistung[data-leistung="weiten"],
.rep-raster:has(#t-anliegen option[value="kette"]:checked) .leistung[data-leistung="kette"],
.rep-raster:has(#t-anliegen option[value="stein"]:checked) .leistung[data-leistung="stein"],
.rep-raster:has(#t-anliegen option[value="umarbeiten"]:checked) .leistung[data-leistung="umarbeiten"],
.rep-raster:has(#t-anliegen option[value="reinigen"]:checked) .leistung[data-leistung="reinigen"],
.rep-raster:has(#t-anliegen option[value="schaetzen"]:checked) .leistung[data-leistung="schaetzen"] { transform: translateY(-4px); background: rgb(255 255 255 / .1); border-color: var(--gold); box-shadow: 0 16px 30px rgb(0 0 0 / .4), 0 0 0 1px var(--gold); }
@container (max-width: 560px) { .rep-leistungen .leistung { grid-column: 1 / -1; } }

.zettel { position: relative; padding: 34px 26px 24px; color: var(--tinte); border-radius: 4px; display: grid; gap: 14px;
  background-color: var(--papier); background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgb(60 40 10 / .06) 31px 32px), linear-gradient(180deg, var(--papier), var(--papier-2));
  box-shadow: 0 26px 46px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .5); transform: rotate(.5deg); }
.zettel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: radial-gradient(circle at 10px 0, var(--smaragd) 0 6px, transparent 6.5px) 0 0 / 22px 14px repeat-x; opacity: .9; }
.zettel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.zettel-kopf h3 { font: 400 30px/1 var(--schrift-kopf); color: var(--tinte); }
.zettel-nr { padding: 3px 10px; border: 2px solid #8b1f2d; color: #8b1f2d; font-weight: 800; letter-spacing: .14em; font-size: 12.5px; text-transform: uppercase; transform: rotate(-3deg); border-radius: 3px; }
.zettel .klein { color: var(--tinte-muted); }
.feld { display: grid; gap: 6px; }
.feld label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zettel input, .zettel select, .zettel textarea, .bewerbung input, .bewerbung select { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 6px; font: 500 16px/1.3 var(--schrift); }
.zettel input, .zettel select, .zettel textarea { border: 1px solid #b5a98d; background: rgb(255 255 255 / .75); color: var(--tinte); }
.zettel textarea { resize: vertical; min-height: 84px; }
.zettel input:focus-visible, .zettel select:focus-visible, .zettel textarea:focus-visible { outline-color: #0b5c47; }
.formular-meldung { min-height: 1.4em; font-weight: 700; color: #0b5c47; }
.bewerbung .formular-meldung { color: var(--gold-hell); }

/* ---------- 9 · Stimmen und Zahlen ---------- */
.stimmen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.stimme { container-type: inline-size; position: relative; display: grid; align-content: space-between; gap: 22px; padding: 30px 26px 24px; border-radius: 16px; background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03)); border: 1px solid rgb(255 255 255 / .14); }
.stimme::before { content: "„"; position: absolute; left: 24px; top: 14px; font: 400 76px/.8 var(--schrift-kopf); color: var(--gold); opacity: .8; }
.stimme blockquote p { padding-top: 46px; font-size: clamp(17px, 5.2cqi, 21px); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.stimme figcaption { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .16); }
.stimme figcaption b { color: var(--gold-hell); }
.stimme figcaption span { color: var(--muted); font-size: 15px; }
.zahlen { list-style: none; margin: clamp(34px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.zahlen li { display: grid; gap: 4px; padding-top: 16px; border-top: 2px solid color-mix(in oklab, var(--gold) 55%, transparent); }
.zahlen b { font: 400 clamp(40px, 4.6vw, 56px)/1 var(--schrift-kopf); color: var(--gold-hell); font-variant-numeric: tabular-nums; }
.zahlen span { color: var(--muted); }

/* ---------- 10 · Jobs ---------- */
.jobs-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: clamp(22px, 3vw, 54px); align-items: start; }
.jobs-stellen { display: grid; gap: 14px; }
.stelle { display: grid; gap: 6px; padding: 22px 24px; border-radius: 14px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .14); border-left: 4px solid var(--gold); }
.stelle h3 { font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--schrift-kopf); }
.stelle-art { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hell); }
.stelle p:last-child { color: var(--muted); }
.jobs-bewerbung { display: grid; gap: 16px; padding: 24px; border-radius: 16px; background: rgb(6 10 22 / .55); border: 1px solid rgb(255 255 255 / .16); }
.jobs-bewerbung h3 { font: 400 28px/1.1 var(--schrift-kopf); }
.schritte-klein { list-style: none; counter-reset: b; margin: 0; padding: 0; display: grid; gap: 12px; }
.schritte-klein li { counter-increment: b; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }
.schritte-klein li::before { content: counter(b); grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--on-accent); font-weight: 700; }
.schritte-klein b { align-self: end; }
.schritte-klein span { grid-column: 2; color: var(--muted); font-size: 15.5px; }
.bewerbung { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .14); }
.bewerbung .feld label { color: var(--gold-hell); }
.bewerbung input, .bewerbung select { border: 1px solid rgb(255 255 255 / .24); background: rgb(255 255 255 / .06); color: var(--text); }
.bewerbung select option { background: #1b2230; color: #f4efe3; }
.bild-platzhalter { aspect-ratio: var(--format, 16 / 9); display: grid; place-items: center; margin-top: clamp(26px, 3vw, 44px); padding: 20px; border: 2px dashed rgb(255 255 255 / .3); border-radius: 14px; background: rgb(0 0 0 / .22); text-align: center; }
.bild-platzhalter figcaption { max-width: 60ch; color: var(--muted); font-size: 14.5px; }

/* ---------- 11 · Kontakt ---------- */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(18px, 2.4vw, 36px); align-items: start; }
.kontakt-karte, .oeffnung, .anfahrt { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: 16px; background: rgb(6 10 28 / .5); border: 1px solid rgb(255 255 255 / .16); }
.kontakt-karte h3, .oeffnung h3, .anfahrt h3 { font: 400 26px/1.1 var(--schrift-kopf); }
.kontakt-tel { font: 400 clamp(34px, 3.4vw, 46px)/1 var(--schrift-kopf); color: var(--gold-hell); text-decoration: none; letter-spacing: .01em; }
.kontakt-tel:hover { color: #fff; }
address { font-style: normal; line-height: 1.6; }
.heute-zeile { padding: 10px 14px; border-radius: 10px; background: color-mix(in oklab, var(--gold) 16%, transparent); border: 1px solid color-mix(in oklab, var(--gold) 50%, transparent); font-weight: 700; }
.zeiten { list-style: none; margin: 0; padding: 0; display: grid; }
.zeiten li { position: relative; display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgb(255 255 255 / .12); color: var(--muted); }
.zeiten li span:first-child { color: var(--text); font-weight: 600; }
.zeiten li.heute { color: #fff; }
.zeiten li.heute span:first-child { color: var(--gold-hell); }
.zeiten li.heute::before { content: ""; position: absolute; left: -16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--gold-hell); }
.karte { display: grid; gap: 6px; }
.karte svg { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 24px rgb(0 0 0 / .4); }
.karte figcaption { font-size: 13px; color: var(--muted); }
.anfahrt p { color: var(--muted); font-size: 15.5px; }
.anfahrt p b { color: var(--text); }

/* ---------- 12 · Fuß ---------- */
.fuss { display: grid; justify-items: center; gap: 6px; padding: 38px var(--rand) 0; background: #060a16; border-top: 1px solid color-mix(in oklab, var(--gold) 28%, transparent); text-align: center; font-size: 14.5px; color: var(--muted); }
.fuss p { max-width: none; }
.fuss-name { font: 400 26px/1.1 var(--schrift-kopf); color: var(--text); }
.fuss-links { display: flex; gap: 22px; }
.fuss-demo { font-size: 13px; }
.fuss-zeile { width: 100%; max-width: none; margin: 0; padding: 22px 20px 26px; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- 13 · Auftritt: scroll-getrieben, mit Rückfall ---------- */
@keyframes auftritt { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
@keyframes front-zieht { from { transform: translateY(30px) scale(1.012); } to { transform: none; } }
@keyframes glanz-dreh { from { --glanz: -70deg; } to { --glanz: 170deg; } }
@keyframes bahn-lauf { to { transform: scaleX(1); } }

/* native Fassung (Chrome, Edge, Safari 26) */
@media (prefers-reduced-motion: no-preference) {
  html.sda:not([data-bewegung="starr"]) [data-auftritt] { animation: auftritt linear both; animation-timeline: view(); animation-range: entry 0px entry 320px; }
  html.sda:not([data-bewegung="starr"]) .lade:not(.lade-vitrine) > .lade-front, html.sda:not([data-bewegung="starr"]) .wb-lauf { animation: none; }
  html.sda:not([data-bewegung="starr"]) .lade > .lade-front { animation: front-zieht linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  html.sda:not([data-bewegung="starr"]) .knauf { animation: glanz-dreh linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  html.sda:not([data-bewegung="starr"]) .bahn-lauf { animation: bahn-lauf linear both; animation-timeline: scroll(root block); }
}
/* Rückfall: IntersectionObserver in js/main.js setzt .ist-da, die Schiene läuft über JavaScript */
@media (prefers-reduced-motion: no-preference) {
  html.js.kein-sda:not([data-bewegung="starr"]) [data-auftritt] { opacity: 0; transform: translateY(32px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
  html.js.kein-sda:not([data-bewegung="starr"]) [data-auftritt].ist-da { opacity: 1; transform: none; }
}

/* ---------- 14 · Schub (View Transition beim Sprung zwischen den Laden) ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) { animation-duration: .7s; }
  ::view-transition-old(root) { animation: lade-aus .38s cubic-bezier(.5, 0, 1, .6) both; }
  ::view-transition-new(root) { animation: lade-ein .72s cubic-bezier(.16, .84, .3, 1) both; }
  ::view-transition-group(schlitten) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .9, .2, 1); }
}
@keyframes lade-aus { to { opacity: 0; transform: translateY(-3%) scale(.985); } }
@keyframes lade-ein { from { opacity: 0; transform: translateY(8%) scale(.985); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
.kopf { view-transition-name: kopf; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- 15 · Breite Fenster, schmale Fenster, Handy ---------- */
@media (max-width: 1240px) {
  .vitrine { grid-template-columns: minmax(0, 1fr); }
  .buehne { aspect-ratio: 1.5 / 1; max-height: 70vh; }
  .konfig { max-width: none; }
  .lupe-raster, .rep-raster, .jobs-raster { grid-template-columns: minmax(0, 1fr); }
  .kontakt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anfahrt { grid-column: 1 / -1; }
  .kleb-innen { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
}
@media (max-width: 1100px) {
  .kopf-innen { grid-template-columns: auto 1fr auto; }
  .marke-sub { display: none; }
  .schild { position: absolute; font-size: 0; letter-spacing: 0; line-height: 0; white-space: nowrap; pointer-events: none; }
  .schiene a { grid-template-rows: 42px 6px 6px; width: 46px; }
  .schiene { height: 60px; }
}
@media (max-width: 899px) {
  :root { --kopf: 62px; --unten: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .kopf { view-transition-name: kopf; }
  .kopf-innen { grid-template-columns: 1fr auto; }
  .marke-zeichen { width: 30px; height: 30px; }
  .marke-text b { font-size: 23px; }
  /* Schiene wandert nach unten und hält die Steine in einer Reihe */
  .schiene { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 6px 4px env(safe-area-inset-bottom, 0px); display: flex; justify-content: center; background: linear-gradient(180deg, color-mix(in oklab, var(--nacht) 94%, transparent), var(--nacht)); border-top: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); box-shadow: 0 -10px 30px rgb(0 0 0 / .45); view-transition-name: schiene; }
  .schiene ol { gap: 0; width: 100%; justify-content: space-around; }
  .schiene a { width: auto; flex: 1; min-width: 40px; grid-template-rows: 42px 6px 0; }
  .bahn { top: 46px; left: 6px; right: 6px; }
  .schlitten { top: 44px; width: 30px; margin-left: -15px; }
  .marke-abschnitt { display: block; }
  .stein-bild { width: 30px; height: 30px; }
  .kopf-tel { justify-content: center; width: 44px; min-height: 44px; border-radius: 50%; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .22); }
  .kopf-tel-text { display: none; }
  .kopf-rechts { gap: 8px; }
  .lade-kopf { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .lade-kopf h2, .lade-kopf .lead { grid-column: 1; }
  .lade-front { height: 50px; gap: 12px; }
  .knauf { width: 30px; height: 30px; }
  .vitrine-kopf .lead { font-size: 16px; }
  .buehne { aspect-ratio: 1 / 1; max-height: none; }
  .ring-ruhig { width: 94%; }
  .buehne-hinweis { max-width: 70%; font-size: 12.5px; left: 16px; bottom: 12px; }
  .vorfuehrung { top: 14px; left: 14px; font-size: 12.5px; }
  .trau-raster, .stimmen-raster { grid-template-columns: minmax(0, 1fr); }
  .trau-weg { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-leistungen { grid-template-columns: minmax(0, 1fr); }
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); }
  .zettel { transform: none; }
  .feld-zeile { grid-template-columns: minmax(0, 1fr); }
  .lupe-buehne { aspect-ratio: 1 / 1; }
  /* Werkbank am Handy: Szene oben, Text darunter, alles in einem klebenden Bild */
  .kleb-innen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; padding-block: 8px 10px; row-gap: 10px; }
  .wb-kopf { margin-bottom: 0; gap: 4px 12px; }
  .wb-kopf h2 { font-size: 22px; }
  .wb-kopf .kapitaelchen { font-size: 11px; }
  .wb-svg { max-height: 34svh; }
  .wb-tafel { left: 8px; bottom: 8px; min-width: 0; padding: 6px 10px 7px; border-width: 2px; }
  .wb-tafel-zeile { font-size: 9px; letter-spacing: .14em; }
  .wb-tafel-wert { font-size: 14px; }
  .wb-thermo { padding-top: 8px; gap: 5px; }
  .wb-thermo-kopf { font-size: 10px; }
  .wb-thermo-saeule { height: 8px; }
  .wb-thermo-wert b { font-size: 24px; }
  .wb-text { padding: 12px 16px; gap: 4px; }
  .wb-weg { gap: 6px; margin-top: 4px; }
  .wb-weg li { padding-top: 6px; font-size: 0; gap: 0; border-top-width: 3px; }
  .wb-weg b { width: 22px; height: 22px; font-size: 12px; }
  .schritt-meta { display: none; }
  .wb-zaehler b { font-size: 38px; }
  .schritt h3 { font-size: 21px; margin-bottom: 4px; }
  .schritt p { font-size: 15.5px; line-height: 1.45; }
}
@media (max-width: 520px) {
  .preis-zeilen > div { grid-template-columns: 88px auto 1fr; }
  .wahl-text .chip { padding-inline: 14px; }
  .lade-nr { letter-spacing: .2em; }
  .schildchen { padding-inline: 10px; }
  .jobs-bewerbung, .kontakt-karte, .oeffnung, .anfahrt { padding: 18px; }
  .zeiten li { flex-direction: column; gap: 0; }
}
@media (min-width: 1800px) {
  body { font-size: 18px; }
}