/* Goldankauf Nürtingen · Vorschau V2 · Stil
   Grundlage: Skin honig (surveyor-ds): 18px-Lesegrund, 8px-Raster, Radien 10/12/Pille,
   keine Schatten als Tiefe. Ersetzt: die Überschriftenschrift (Bricolage raus) und das Gold
   (sein gemessenes #fccb0c statt Honig). Begründungen: DESIGN.md. */

@font-face { font-family: "Plex"; src: url(../../assets/fonts/plex-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url(../../assets/fonts/plex-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url(../../assets/fonts/plex-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(../../assets/fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
/* Fassung A: Optima aus dem System (macOS, iOS), sonst die freie Linux Biolinum als Ersatz. */
@font-face { font-family: "Optima Web"; src: local("Optima Bold"), local("Optima-Bold"), url(../../assets/fonts/biolinum-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Optima Web"; src: local("Optima Regular"), local("Optima-Regular"), url(../../assets/fonts/biolinum-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Optima Web"; src: local("Optima Italic"), local("Optima-Italic"), url(../../assets/fonts/biolinum-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Palette: aus seinen Dateien (Gold, Anthrazit) und seinem Laden (Stein). */
  --papier: #FAF9F6;
  --stein: #EEEBE5;
  --stein-tief: #E3DFD7;
  --anthrazit: #2B2B2A;
  --gold: #FCCB0C;
  /* Knopfflächen: dasselbe Gold, für große Flächen einen Schritt wärmer und ruhiger,
     weil Farbe auf großer Fläche heller und bunter wirkt als im Logo (DESIGN.md). */
  --gold-flaeche: oklch(0.85 0.16 87);
  --grau: #57554F;
  --linie: #DAD6CE;
  --rahmen: #807C74;
  --hell: #F4F2EE;
  --hell-q: #BDB8AE;
  --linie-dunkel: #45443F;

  --font-text: "Plex", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, "SF Mono", monospace;
  --font-kopf: "Optima Web", Optima, "Linux Biolinum O", Candara, sans-serif;
  --kopf-gewicht: 700;
  --kopf-gewicht-gross: 400;
  --kopf-laufweite: 0;

  --text-meta: 0.8125rem;
  --text-sm: 0.90625rem;
  --text-ui: 1rem;
  --text-base: 1.125rem;
  --text-lead: 1.25rem;
  --text-h3: clamp(1.3125rem, 1.2rem + 0.4vw, 1.5rem);
  --text-h2: clamp(2rem, 1.4rem + 2.2vw, 3.15rem);
  --text-h1: clamp(2.35rem, 1.45rem + 3.1vw, 3.9rem);

  --s-half: 0.25rem; --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s6: 3rem; --s8: 4rem; --s12: 6rem; --s16: 8rem;

  --r-klein: 10px; --r-flaeche: 12px; --r-pille: 999px;
  --wrap: 78rem;
  --rand: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --tap: 3.625rem;
}

/* Fassung B: eine Schrift, ruhig, große leichte Überschriften (Burger-Anmutung). */
:root[data-schrift="b"] {
  --font-kopf: "Plex", "Helvetica Neue", system-ui, sans-serif;
  --kopf-gewicht: 500;
  --kopf-gewicht-gross: 400;
  --kopf-laufweite: -0.015em;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0; background: var(--papier); color: var(--anthrazit);
  font: 400 var(--text-base)/1.65 var(--font-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3 {
  font-family: var(--font-kopf); font-weight: var(--kopf-gewicht);
  letter-spacing: var(--kopf-laufweite); margin: 0; text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: 1.04; font-weight: var(--kopf-gewicht-gross); letter-spacing: -0.012em; }
h2 { font-size: var(--text-h2); line-height: 1.1; font-weight: var(--kopf-gewicht-gross); }
h3 { font-size: var(--text-h3); line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
.wrap { width: min(100% - 2 * var(--rand), var(--wrap)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:where(a, button, [tabindex]):focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 3px; border-radius: 6px; }
.dunkel :where(a, button, [tabindex]):focus-visible { outline-color: var(--gold); }

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

/* ───────────────────────── Grundelemente ───────────────────────── */
.abschnitt { padding-block: clamp(4rem, 2.5rem + 6vw, 8rem); }
.stein { background: var(--stein); }
.dunkel { background: var(--anthrazit); color: var(--hell); }
.i { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-voll { fill: currentColor; stroke: none; }
.einleitung { font-size: var(--text-lead); line-height: 1.55; color: var(--grau); max-width: 34rem; }
.dunkel .einleitung { color: var(--hell-q); }
h2 + .einleitung { margin-top: var(--s3); }
.kopfgruppe { display: grid; gap: var(--s3); margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.kopfgruppe h2 { max-width: 16em; }
.kopfgruppe h2 + .einleitung { margin-top: 0; }  /* sonst Rasterlücke plus Rand, 48 statt 24 px */
.textlink { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .3em; min-height: 2.75rem; }
.textlink:hover { text-decoration-thickness: 3px; }
.textlink .i { width: 1.1rem; height: 1.1rem; }
.notiz { font-size: var(--text-ui); color: var(--grau); }
.dunkel .notiz { color: var(--hell-q); }

/* ───────────────────────── Kopf ───────────────────────── */
.kopf { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--papier) 94%, transparent); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--linie); }
.kopf-reihe { display: flex; align-items: center; gap: var(--s4); min-height: 5.5rem; }
.marke { display: block; flex: none; }
.marke img { height: 3.25rem; width: auto; }
.nav { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); margin-inline: auto; font-weight: 500; }
.nav a { text-decoration: none; padding-block: .75rem; background: linear-gradient(var(--gold), var(--gold)) 0 85% / 0 2px no-repeat; transition: background-size .25s ease; }
.nav a:hover { background-size: 100% 2px; }
.nav a[aria-current="page"] { background-size: 100% 2px; font-weight: 600; }
.kopf-kontakt { display: flex; gap: var(--s1); }
.kopf-kontakt a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 600; min-height: 2.75rem; padding-inline: .9rem; border-radius: var(--r-pille); border: 1.5px solid var(--rahmen); transition-property: border-color, background-color, transform; transition-duration: .18s; }
.kopf-kontakt a:hover { border-color: var(--anthrazit); }
.kopf-kontakt a:active { transform: scale(.96); }

/* ───────────────────────── Drei gleichrangige Wege ───────────────────────── */
.wege { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .5rem; }
.weg { display: flex; align-items: center; gap: .7rem; min-height: 3.25rem; padding: .6rem 1.15rem .6rem .95rem; border-radius: var(--r-klein); background: var(--gold-flaeche); color: var(--anthrazit); text-decoration: none; line-height: 1.2; transition-property: background-color, transform; transition-duration: .18s; }
.weg:hover { background: color-mix(in oklab, var(--gold-flaeche) 92%, var(--anthrazit)); }
.weg:active { transform: scale(.96); transition-duration: .08s; }
.weg-icon { display: contents; }
.weg strong { display: block; font-weight: 600; }
.weg small { display: block; font-size: var(--text-sm); margin-top: .15rem; }
.weg .i { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
/* Die Knöpfe sind so breit wie ihr Text. Ist die Spalte dafür zu schmal (Handy, kleiner Computer),
   teilen sie sich die Breite und zeigen nur Symbol und Wort; unter 380 px steht das Symbol über dem Wort. */
@media (max-width: 1180px) {
  .wege { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .weg { justify-content: center; gap: .35rem; padding: .5rem .25rem; text-align: center; font-size: .9375rem; }
  .weg .i { width: 1.1rem; height: 1.1rem; }
  .weg small, .weg .lang { display: none; }
}
@media (max-width: 380px) { .weg { flex-direction: column; gap: .2rem; } }

/* ───────────────────────── Öffnungsstatus ───────────────────────── */
.offen { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: var(--text-ui); color: var(--grau); }
.offen-punkt { width: .625rem; height: .625rem; border-radius: 50%; border: 2px solid var(--rahmen); flex: none; }
.offen[data-offen="ja"] .offen-punkt { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 28%, transparent); }
.offen-jetzt { color: var(--anthrazit); font-weight: 600; }

/* ───────────────────────── Einstieg ───────────────────────── */
.einstieg { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); }
.einstieg h1 { max-width: 11.5em; }
.einstieg .leit { font-size: var(--text-lead); line-height: 1.55; color: var(--grau); max-width: 31rem; margin-block: var(--s3) var(--s4); }
.einstieg .offen { margin-top: var(--s3); }
.einstieg figure { margin: 0; }
.einstieg figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: var(--r-flaeche); background: var(--stein); }
.bildzeile { display: flex; flex-wrap: wrap; gap: .15rem .6rem; margin-top: .85rem; font-size: var(--text-sm); color: var(--grau); line-height: 1.4; }
.bildzeile strong { color: var(--anthrazit); font-weight: 600; }

/* ruhige Bewegung beim Einstieg: ein Moment, nicht je Abschnitt */
@media (prefers-reduced-motion: no-preference) {
  .js .einstieg figure img { animation: bild-ein 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .js .einstieg .auftritt > * { animation: text-ein .8s cubic-bezier(.2, .7, .2, 1) both; }
  .js .einstieg .auftritt > :nth-child(2) { animation-delay: .08s; }
  .js .einstieg .auftritt > :nth-child(3) { animation-delay: .16s; }
  .js .einstieg .auftritt > :nth-child(4) { animation-delay: .24s; }
  @keyframes bild-ein { from { opacity: 0; transform: scale(1.035); clip-path: inset(6% 0 0 0 round 12px); } to { opacity: 1; transform: none; clip-path: inset(0 round 12px); } }
  @keyframes text-ein { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
}

/* ───────────────────────── Ankauf ───────────────────────── */
.ankauf-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.tafel { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--anthrazit); }
.tafel li { padding-block: clamp(1rem, .6rem + 1.4vw, 1.6rem); border-bottom: 1px solid var(--rahmen); }
.tafel li p:first-child { font-family: var(--font-kopf); font-weight: var(--kopf-gewicht-gross); letter-spacing: var(--kopf-laufweite); font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.2; }
.tafel li p + p { margin-top: .3rem; color: var(--grau); font-size: var(--text-ui); }
.erbe { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.erbe p { max-width: 34rem; }

/* ───────────────────────── Die Messung (dunkel) ───────────────────────── */
.messung-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.messung h2 { max-width: 13em; }
.messung .einleitung { margin-top: var(--s3); max-width: 36rem; }
.videoplatz { margin: 0; position: relative; }
.videoplatz img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 45% 40%; border-radius: var(--r-flaeche); filter: saturate(.92); }
.videoplatz-marke { position: absolute; inset: auto var(--s2) var(--s2) var(--s2); display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: var(--r-klein); background: color-mix(in oklab, var(--anthrazit) 88%, transparent); backdrop-filter: blur(6px); color: var(--hell); font-size: var(--text-sm); line-height: 1.4; }
.videoplatz-marke strong { display: block; color: var(--gold); font-weight: 600; }
.abspielen { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px dashed var(--hell-q); display: grid; place-items: center; flex: none; }
.abspielen::before { content: ""; border-block: .45rem solid transparent; border-left: .7rem solid var(--hell-q); margin-left: .2rem; }
.videoplatz figcaption { margin-top: .75rem; font-size: var(--text-sm); color: var(--hell-q); }

.anzeige { margin-top: var(--s4); background: #1E1E1D; border: 1px solid var(--linie-dunkel); border-radius: var(--r-flaeche); overflow: hidden; }
.anzeige-leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--linie-dunkel); font-size: var(--text-meta); color: var(--hell-q); }
.anzeige-leiste b { color: var(--hell); font-weight: 600; font-size: var(--text-sm); }
.beispiel { padding: .15rem .6rem; border: 1px solid var(--gold); color: var(--gold); border-radius: var(--r-pille); font-weight: 600; }
.anzeige-koerper { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.25rem; padding: 1.1rem 1rem 1rem; align-items: center; }
.kamera { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #111; }
.kamera img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.kamera::before, .kamera::after { content: ""; position: absolute; background: color-mix(in oklab, var(--gold) 70%, transparent); }
.kamera::before { left: 50%; top: 12%; bottom: 12%; width: 1px; }
.kamera::after { top: 58%; left: 12%; right: 12%; height: 1px; }
.messfleck { position: absolute; left: 50%; top: 58%; width: 18%; aspect-ratio: 1; border: 1.5px solid var(--gold); border-radius: 50%; transform: translate(-50%, -50%); }
.anzeige[data-zustand="laeuft"] .messfleck { animation: fleck 1.2s ease-in-out infinite; }
@keyframes fleck { 50% { box-shadow: 0 0 0 .5rem color-mix(in oklab, var(--gold) 18%, transparent); } }
.werte dt { font-size: var(--text-meta); color: var(--hell-q); }
.werte dd { margin: 0; }
.wert { font: 400 clamp(2.75rem, 2rem + 2.4vw, 3.75rem)/1 var(--font-text); font-variant-numeric: tabular-nums; color: var(--gold); letter-spacing: -.02em; margin-block: .25rem .6rem; }
.balken { height: .5rem; border-radius: var(--r-pille); background: #3A3936; overflow: hidden; }
.balken span { display: block; height: 100%; width: calc(var(--anteil, 0) * 1%); background: var(--gold); border-radius: inherit; transition: width .3s linear; }
.wert small { font-size: .5em; margin-left: .15em; color: var(--hell-q); }
.feingehalt { margin-top: .75rem; font-weight: 600; color: var(--hell); }
.feingehalt span { color: var(--hell-q); font-weight: 400; }
.anzeige-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: .8rem 1rem; border-top: 1px solid var(--linie-dunkel); }
.stempel { display: flex; align-items: center; gap: .4rem; font-size: var(--text-sm); color: var(--hell-q); }
.stempel button { font: 600 var(--text-ui)/1 var(--font-mono); min-width: 3.4rem; min-height: 2.75rem; padding-inline: .7rem; border-radius: var(--r-klein); border: 1px solid var(--linie-dunkel); background: transparent; color: var(--hell); cursor: pointer; }
.stempel button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--anthrazit); }
/* Rechner auf /preis/: unter dem Stempel steht sein Karat (Jochen, 07.10.: „wir haben eher diese Karatzahl im Kopf“) */
.stempel-karat button { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; padding-block: .45rem; min-width: 4.6rem; }
.stempel-karat small { font: 400 .75rem/1 var(--font-text); opacity: .85; }
.stempel button:hover:not([aria-pressed="true"]) { border-color: var(--hell-q); }
.messzeit { font: 400 var(--text-sm)/1.3 var(--font-mono); color: var(--hell-q); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .6rem; }
.messzeit i { width: 4.5rem; height: 3px; background: #3A3936; border-radius: 2px; position: relative; overflow: hidden; }
.messzeit i::after { content: ""; position: absolute; inset: 0; width: calc(var(--zeit, 1) * 100%); background: var(--hell-q); }
.anzeige-hinweis { margin-top: .75rem; font-size: var(--text-sm); color: var(--hell-q); max-width: 40rem; }
.aussage { margin: var(--s4) 0 0; padding-left: 1.25rem; border-left: 2px solid var(--gold); max-width: 38rem; }
.aussage p { font-family: var(--font-kopf); font-size: var(--text-h3); line-height: 1.4; letter-spacing: var(--kopf-laufweite); font-weight: 400; }
.aussage footer { margin-top: .5rem; font-size: var(--text-sm); color: var(--hell-q); }

/* ───────────────────────── Ablauf ───────────────────────── */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: schritt; }
.schritte li { counter-increment: schritt; border-top: 2px solid var(--anthrazit); padding-top: var(--s3); }
.schritte li::before { content: counter(schritt); display: block; font-family: var(--font-kopf); font-weight: var(--kopf-gewicht-gross); font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem); line-height: 1; margin-bottom: var(--s3); color: var(--anthrazit); }
.schritte h3 { margin-bottom: .6rem; }
.schritte p { color: var(--grau); }
.ablauf-fuss { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) clamp(1.5rem, 3vw, 3rem); padding: var(--s3); border-radius: var(--r-flaeche); background: var(--stein); }
.ablauf-fuss p { display: flex; gap: .75rem; align-items: baseline; }
.ablauf-fuss p::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--anthrazit); flex: none; transform: translateY(-.1em); }

/* ───────────────────────── Person ───────────────────────── */
.person-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.person figure { margin: 0; }
.person figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 60% 40%; border-radius: var(--r-flaeche); }
.zitat { margin: var(--s4) 0 0; }
.zitat p { font-family: var(--font-kopf); font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); line-height: 1.38; letter-spacing: var(--kopf-laufweite); font-weight: 400; text-indent: -.42em; }
.zitat footer { margin-top: var(--s3); display: grid; gap: .1rem; }
.zitat footer strong { font-weight: 600; }
.zitat footer span { font-size: var(--text-sm); color: var(--grau); }
.lebenslauf { margin-top: var(--s4); color: var(--grau); max-width: 30rem; }

/* ───────────────────────── Bewertungen ───────────────────────── */
.bew-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.bew-seite { position: sticky; top: 8rem; display: grid; gap: var(--s3); }
.bew-note { display: flex; align-items: center; gap: 1rem; }
.bew-zahl { font-family: var(--font-kopf); font-weight: var(--kopf-gewicht-gross); font-size: clamp(3.5rem, 2.8rem + 2.5vw, 5rem); line-height: 1; letter-spacing: var(--kopf-laufweite); }
.sterne { display: inline-flex; gap: .15rem; }
.sterne svg { width: 1.3rem; height: 1.3rem; }
.sterne.klein svg { width: 1rem; height: 1rem; }
.bew-anzahl { font-weight: 600; }
.google-marke { height: 18px; width: auto; margin-block: 10px 5px; }
.bew-links { display: grid; gap: .25rem; justify-items: start; }
.bew-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem); }
.bew { display: grid; gap: .85rem; align-content: start; padding-top: var(--s3); border-top: 1px solid var(--rahmen); }
.bew-meta { display: flex; align-items: center; gap: .75rem; font-size: var(--text-sm); color: var(--grau); }
.bew-text { font-size: var(--text-base); }
.bew-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.bew-autor { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; text-decoration: none; min-height: 2.75rem; }
.bew-autor img { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--stein); }
.bew-quelle { font-size: var(--text-sm); color: var(--grau); text-underline-offset: .25em; min-height: 2.75rem; display: inline-flex; align-items: center; }
.bew-hinweis { margin-top: var(--s4); font-size: var(--text-sm); color: var(--grau); max-width: 44rem; }
.echtheit { margin-top: var(--s2); max-width: 44rem; font-size: var(--text-sm); color: var(--grau); }
.echtheit summary { cursor: pointer; font-weight: 600; color: var(--anthrazit); min-height: 2.75rem; display: flex; align-items: center; gap: .5rem; list-style: none; }
.echtheit summary::-webkit-details-marker { display: none; }
.echtheit summary::before { content: "+"; font: 600 1.1rem/1 var(--font-mono); width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border: 1.5px solid var(--rahmen); border-radius: 50%; }
.echtheit[open] summary::before { content: "−"; }
.echtheit p { margin-top: .4rem; }
.entwurf { background: color-mix(in oklab, var(--gold) 40%, white); padding: 0 .3em; border-radius: 3px; color: var(--anthrazit); font-weight: 600; }
.bew-leer { color: var(--grau); }
.bew-offline { display: grid; gap: var(--s3); }
.bew-offline .hinweisband { padding: var(--s2) var(--s3); border-radius: var(--r-klein); background: var(--stein); color: var(--anthrazit); }
.gerippe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.gerippe li { border-top: 1px solid var(--rahmen); padding-top: var(--s3); display: grid; gap: .6rem; }
.gerippe i { display: block; height: .7rem; border-radius: 4px; background: var(--stein-tief); }
.gerippe i:nth-child(1) { width: 35%; } .gerippe i:nth-child(2) { width: 95%; } .gerippe i:nth-child(3) { width: 80%; } .gerippe i:nth-child(4) { width: 45%; height: 2.25rem; border-radius: var(--r-pille); }

/* ───────────────────────── Verkauf ───────────────────────── */
.verkauf-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.verkauf-raster .einleitung { margin-top: 0; }
.verkauf .einleitung + p { margin-top: var(--s2); }
.verkauf .wege-klein { margin-top: var(--s4); display: grid; justify-items: start; gap: 0; }
.notizen { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.notizen div { border-top: 1px solid var(--rahmen); padding-top: var(--s3); }
.notizen h3 { margin-bottom: .5rem; }
.notizen p { color: var(--grau); }
/* Startseite als Drehscheibe (07.10.): jeder Abschnitt endet mit genau einem Link auf seine Seite */
.abschnitt-weiter { margin-top: var(--s4); }
.dmark { margin-top: var(--s4); max-width: 44rem; color: var(--grau); }
.dmark strong { color: var(--anthrazit); }
@media (min-width: 360px) { .ohne-umbruch { white-space: nowrap; } }  /* bei 320 px darf die Adresse am Bindestrich brechen, sonst läuft sie über */
.merkzettel { align-self: start; border-top: 1px solid var(--rahmen); padding-top: var(--s3); max-width: 30rem; }
.merkzettel h3 { margin-bottom: .5rem; }
.merkzettel p { color: var(--grau); }
.merkzettel-folgt { margin-top: var(--s6); }  /* /kontakt/: der Weg zu den Hausbesuchen, nur hier verlinkt (Felix, 07.10.) */
.ablauf-bild { margin: var(--s6) 0 0; position: sticky; top: 7.5rem; }
.ablauf-bild img { width: 100%; height: auto; border-radius: var(--r-flaeche); object-fit: cover; }

/* ───────────────────────── Tüte ───────────────────────── */
.tuete-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.tuete-bild { margin: 0; justify-self: center; width: min(100%, 17rem); }
.tuete-bild img { width: 100%; height: auto; transform: rotate(-3deg); box-shadow: 0 1px 2px rgb(40 36 30 / .12), 0 18px 40px -12px rgb(40 36 30 / .35); border-radius: 3px; }
.tuete-bild figcaption { margin-top: var(--s3); font-size: var(--text-sm); color: var(--grau); text-align: center; }
.handzeile { margin-top: var(--s3); font-family: var(--font-kopf); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.3; font-weight: 400; letter-spacing: var(--kopf-laufweite); max-width: 22em; }
.tuete-raster .notiz { margin-top: var(--s3); max-width: 34rem; font-size: var(--text-base); }

/* ───────────────────────── Besuch ───────────────────────── */
.besuch-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.besuch figure { margin: 0; }
.besuch figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-flaeche); }
.zeiten { margin: var(--s4) 0 0; border-top: 2px solid var(--anthrazit); }
.zeiten div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--rahmen); }
.zeiten dt { font-weight: 600; }
.zeiten dd { margin: 0; font-variant-numeric: tabular-nums; }
.zeiten div[data-heute] { box-shadow: inset 3px 0 0 var(--gold); margin-left: -.9rem; padding-left: .9rem; }  /* Strich links außerhalb, Zeiten bleiben bündig */
.zeiten div[data-heute] dt::after { content: "heute"; display: inline-block; margin-left: .5rem; padding: .1rem .45rem; border-radius: var(--r-pille); background: var(--gold-flaeche); font-size: .75rem; font-weight: 600; line-height: 1.3; vertical-align: .1em; white-space: nowrap; color: var(--anthrazit); }
.besuch .wege { margin-top: var(--s4); }
.besuch .offen { margin-top: var(--s3); }
.besuch-fuss { margin-top: var(--s4); display: grid; gap: var(--s2); }
.ausweis { display: flex; gap: .75rem; align-items: baseline; }
.ausweis::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--anthrazit); flex: none; transform: translateY(-.1em); }
.mailzeile a { font-weight: 600; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* ───────────────────────── Fuß ───────────────────────── */
.vermerk { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--linie-dunkel); font-size: var(--text-sm); }
.fuss .von a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* ───────────────────────── Leiste am Handy ───────────────────────── */
.leiste { display: none; }


/* ───────────────────────── Unterseite ───────────────────────── */
.pfad { font-size: var(--text-sm); color: var(--grau); padding-top: var(--s4); }
.pfad a { text-underline-offset: .25em; }
.wege-zeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.wege-zeile div { border-top: 2px solid var(--anthrazit); padding-top: var(--s3); display: grid; gap: .6rem; align-content: start; }
.wege-zeile p { color: var(--grau); }

/* ───────────────────────── Tablet und Handy ───────────────────────── */
@media (max-width: 1080px) {
  .nav { display: none; }
  .kopf-kontakt { margin-left: auto; }
}
@media (max-width: 900px) {
  :root { --leiste-hoehe: 4.75rem; }
  .kopf-reihe { min-height: 4.25rem; gap: var(--s2); }
  .marke img { height: 2.6rem; }
  .kopf-kontakt a { padding: 0; width: 2.75rem; justify-content: center; }
  .kopf-kontakt a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .einstieg, .ankauf-raster, .messung-raster, .person-raster, .bew-raster, .verkauf-raster, .tuete-raster, .besuch-raster { grid-template-columns: minmax(0, 1fr); }
  .einstieg { gap: var(--s3); padding-top: var(--s3); }
  .einstieg figure { order: -1; }
  .einstieg figure img { aspect-ratio: 4 / 3; object-position: 50% 16%; }
  .einstieg .leit { margin-block: var(--s2) var(--s3); }
  .messung-raster .videoplatz { order: 2; }
  .videoplatz img { aspect-ratio: 4 / 5; }
  .anzeige-koerper { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 1rem; }
  .schritte, .notizen, .wege-zeile { grid-template-columns: minmax(0, 1fr); }
  .ablauf-fuss { grid-template-columns: minmax(0, 1fr); }
  .bew-seite { position: static; }
  .bew-liste, .gerippe { grid-template-columns: minmax(0, 1fr); }
  .person figure { order: -1; }
  .tuete-bild { width: min(62%, 14rem); }
  .zeiten div { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
  .leiste { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--papier) 96%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--linie); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .leiste a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 3.25rem; border-radius: var(--r-klein); background: var(--gold-flaeche); color: var(--anthrazit); text-decoration: none; font-weight: 600; font-size: var(--text-ui); }
  .js .leiste[data-versteckt] { transform: translateY(110%); }
  .einstieg figure img { aspect-ratio: 3 / 2; object-position: 50% 14%; }
  .einstieg h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 2.5rem); }
  .einstieg .leit { font-size: var(--text-base); }
  .bildzeile { margin-top: .6rem; }
}
@media (max-width: 380px) {
  .anzeige-koerper { grid-template-columns: minmax(0, 1fr); }
  .kamera { max-width: 9rem; }
}
.bew-uebersetzt { color: var(--grau); font-size: var(--text-sm); }

/* Vorschau-Hinweise: alles, was Jochen oder Felix noch liefern, sieht gleich aus und ist nie Kundencopy */
.vorschau-notiz { font-size: var(--text-sm); line-height: 1.45; }
p.vorschau-notiz { max-width: 46rem; }  /* nie breiter als ein Lesesatz (Unterseiten 07.10.) */
p.vorschau-notiz, span.vorschau-notiz { display: block; margin-top: .6rem; padding: .55rem .8rem; border: 1.5px dashed var(--rahmen); border-radius: var(--r-klein); color: var(--grau); background: color-mix(in oklab, var(--papier) 70%, transparent); }

/* ───────────────────────── Feinschliff: Gründe, Licht, Material ───────────────────────── */
:root {
  --korn-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --korn-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .94 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
/* Papier: weiches Tageslicht von links oben, feines Korn */
body { background: var(--korn-hell), radial-gradient(ellipse 80% 55% at 12% 0%, #fff 0%, rgb(255 255 255 / 0) 62%) no-repeat, var(--papier); background-size: 180px 180px, 100% 70rem, auto; }
/* Stein: fal-Kalkputz, auf den Steinton gezogen */
.stein { background: var(--korn-hell), var(--stein) url(../../assets/bild/putz-1400.webp) center / cover; background-size: 180px 180px, cover; }
/* Dunkel: Anthrazit mit Korn; die Messfläche bekommt einen Lichtkegel hinter der Anzeige */
.dunkel { background: var(--korn-dunkel), var(--anthrazit); background-size: 180px 180px, auto; }
.messung { background: var(--korn-dunkel), radial-gradient(ellipse 55% 65% at 72% 52%, #3B3A36 0%, rgb(43 43 42 / 0) 70%), var(--anthrazit); background-size: 180px 180px, auto, auto; }
.anzeige { box-shadow: 0 0 0 1px rgb(255 255 255 / .02), 0 24px 60px -24px rgb(0 0 0 / .7), 0 0 120px -20px color-mix(in oklab, var(--gold) 14%, transparent); }

/* Bilder: feine Kante, damit helle Fotos nicht in den Grund laufen */
.foto { outline: 1px solid rgb(0 0 0 / .1); outline-offset: -1px; }
.dunkel .foto { outline-color: rgb(255 255 255 / .1); }

/* Einstieg: Namensschild auf dem Porträt, Fußzeile mit Status und Note */
.portraet { position: relative; }
.namensschild { display: flex; flex-wrap: wrap; gap: .15rem .6rem; margin-top: .85rem; font-size: var(--text-sm); color: var(--grau); line-height: 1.4; }
.namensschild strong { color: var(--anthrazit); font-weight: 600; }
/* Die 25 Jahre gehören Jochen, nicht dem Laden, deshalb unter seinem Namen; Jahreszahl statt Zähler (fakten.md § 2). */
.namensschild-jahre { flex-basis: 100%; }
.namensschild-jahre b { color: var(--anthrazit); font-weight: 600; }
.einstieg-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; margin-top: var(--s3); }
.einstieg .einstieg-fuss .offen { margin-top: 0; }
.note-kurz { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--text-ui); color: var(--grau); text-decoration: none; min-height: 2.75rem; }
.note-kurz:empty { display: none; }
.note-kurz:hover .kurz-text { color: var(--anthrazit); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.einstieg h1 { max-width: 12.5em; }

/* Ankauf: Stempel-Makro als Illustration */
.stempel-bild { margin: var(--s6) 0 0; max-width: 21rem; }
.stempel-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-flaeche); }
.stempel-bild figcaption { margin-top: .75rem; font-size: var(--text-sm); color: var(--grau); line-height: 1.5; }


/* Tüte: ein weicher Lichtfleck unter dem Druckstück */
.tuete-bild { position: relative; }
.tuete-bild::before { content: ""; position: absolute; inset: 8% -30% 4%; background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(255 255 255 / 0)); z-index: -1; }
#tuete { isolation: isolate; }

/* Kopf beim Scrollen */
.kopf { transition-property: box-shadow, background-color; transition-duration: .25s; }
.kopf-reihe, .marke img { transition-property: min-height, height; transition-duration: .25s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.kopf[data-klein] { box-shadow: 0 10px 30px -22px rgb(43 43 42 / .5); }
@media (min-width: 901px) {
  .kopf[data-klein] .kopf-reihe { min-height: 4.5rem; }
  .kopf[data-klein] .marke img { height: 2.75rem; }
}

/* Links und Stempel-Knöpfe: gleiche Handschrift */
.textlink { transition: text-decoration-thickness .15s; }
.textlink .i { transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.textlink:hover .i { transform: translate(2px, -2px); }
.stempel button { transition-property: background-color, border-color, color, transform; transition-duration: .18s; }
.stempel button:active { transform: scale(.96); }
.echtheit summary::before { transition: transform .2s; }
.echtheit[open] summary::before { transform: rotate(180deg); }

@media (max-width: 900px) {
  .stempel-bild { max-width: 100%; }
  .stempel-bild img { aspect-ratio: 16 / 10; }
  .leiste { box-shadow: 0 -10px 30px -20px rgb(43 43 42 / .4); }
}

/* Runde 3: Ankauf ausbalanciert, Handy-Knöpfe leichter, Status ruhiger */
.stempel-bild { max-width: none; margin-top: var(--s4); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s3); align-items: end; }
.stempel-bild img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
.ankauf-raster .erbe { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--rahmen); }
.offen-jetzt { font-weight: 500; }
@media (max-width: 900px) {
  .einstieg h1 { font-size: clamp(1.75rem, .9rem + 4.2vw, 2.25rem); }
  .weg .lang { display: none; }
  .stempel-bild { grid-template-columns: minmax(0, 1fr); }
}
/* Fassung B: Plex läuft breiter, deshalb eine Stufe kleiner, damit die drei Zeilen halten */
:root[data-schrift="b"] .einstieg h1 { font-size: clamp(1.75rem, 1rem + 2.9vw, 3.3rem); }

/* Runde 4: Befunde des unabhängigen Reviews */
.messung-raster { align-items: start; }
.messung-raster .videoplatz { margin-top: .4rem; }
.videoplatz-marke { position: static; margin-top: .75rem; display: flex; align-items: center; gap: .8rem; background: transparent; backdrop-filter: none; color: var(--hell-q); border-color: var(--linie-dunkel); }
.videoplatz-marke strong { color: var(--gold); }
.abspielen { width: 2.25rem; height: 2.25rem; }
.stempel-bild { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.stempel-bild img { aspect-ratio: 3 / 2; }
.schritte li { border-top-width: 1px; padding-top: var(--s3); }
.schritte li::before { display: inline-block; font-size: var(--text-h3); font-weight: 700; margin: 0 .6rem 0 0; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--anthrazit); font-family: var(--font-text); font-size: var(--text-ui); }
.schritte h3 { display: inline; }
.schritte p { margin-top: .75rem; }
.ablauf-fuss { background: none; padding: var(--s3) 0 0; border-top: 1px solid var(--rahmen); border-radius: 0; }
.bew-liste { display: block; columns: 2; column-gap: clamp(1.5rem, 3vw, 3rem); }
.bew { break-inside: avoid; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.tuete-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.tuete-bild { width: auto; justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 2vw, 1.5rem); }
.tuete-bild img { transform: none; border-radius: 4px; box-shadow: 0 1px 2px rgb(43 43 42 / .08); }
.tuete-bild figcaption { grid-column: 1 / -1; text-align: left; margin-top: .25rem; }
.tuete-bild::before { display: none; }
.besuch figure img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .zitat p { text-indent: 0; }
  .bew-liste { columns: 1; }
  .besuch figure img { aspect-ratio: 4 / 3; }
  .tuete-bild { grid-template-columns: 1fr 1fr; width: 100%; }
}

/* Runde 4b: Vorschau-Hinweis auf Dunkel lesbar, Tüte nur Vorderseite */
.dunkel p.vorschau-notiz { background: transparent; border-color: var(--linie-dunkel); color: var(--hell-q); }
.dunkel p.vorschau-notiz strong { color: var(--gold); }
.tuete-bild { grid-template-columns: minmax(0, 20rem); justify-content: center; }
.tuete-bild figcaption { text-align: center; }
@media (max-width: 900px) { .tuete-bild { grid-template-columns: minmax(0, 15rem); } }
@media (max-width: 900px) { .tuete-raster { grid-template-columns: minmax(0, 1fr); } .tuete-bild { justify-content: start; } .tuete-bild figcaption { text-align: left; } }

/* Runde 5 (Felix, 29.09.): Geschmacksurteile des Reviews zurückgenommen */
/* Abschnittsüberschriften wieder Optima Bold; die Einstiegszeile bleibt Regular */
:root { --kopf-gewicht-gross: 700; }
:root[data-schrift="b"] { --kopf-gewicht-gross: 400; }
.einstieg h1 { font-weight: 400; }
.tafel li p:first-child, .bew-zahl { font-weight: var(--kopf-gewicht-gross); }
/* Ankauf: Stempel-Makro im Hochformat neben der Bildzeile */
.stempel-bild img { aspect-ratio: 4 / 3; }
/* Ablauf: große Ziffern wie im ersten Stand */
.schritte li { border-top-width: 2px; }
.schritte li::before { display: block; width: auto; height: auto; margin: 0 0 var(--s3); text-align: left; border-radius: 0; box-shadow: none; font-family: var(--font-kopf); font-weight: var(--kopf-gewicht-gross); font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem); line-height: 1; }
.schritte h3 { display: block; margin-bottom: .6rem; }
.schritte p { margin-top: 0; }
/* Video-Hinweis wieder als Band auf dem Foto */
.videoplatz-marke { position: absolute; inset: auto var(--s2) calc(var(--s2) + 2.2rem) var(--s2); margin: 0; display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border: 0; border-radius: var(--r-klein); background: color-mix(in oklab, var(--anthrazit) 88%, transparent); backdrop-filter: blur(6px); color: var(--hell); font-size: var(--text-sm); line-height: 1.4; }
.videoplatz-marke strong { display: block; color: var(--gold); font-weight: 600; }
/* Tüte: vorn und hinten gefächert, weicher Lichtfleck darunter */
.tuete-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.tuete-bild { position: relative; display: block; width: min(100%, 26rem); justify-self: center; aspect-ratio: 26 / 30; }
.tuete-bild::before { display: block; content: ""; position: absolute; inset: 6% -18% 0; background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(255 255 255 / 0)); z-index: -1; }
.tuete-bild img { position: absolute; width: 60%; height: auto; border-radius: 3px; box-shadow: 0 1px 2px rgb(40 36 30 / .12), 0 18px 40px -12px rgb(40 36 30 / .35); }
.tuete-bild .tuete-hinten { right: 0; top: 0; transform: rotate(4deg); }
.tuete-bild .tuete-vorn { left: 0; top: 7%; transform: rotate(-3deg); }
.tuete-bild figcaption { position: absolute; left: 0; right: 0; bottom: -2.2rem; text-align: center; }
@media (max-width: 900px) {
  .tuete-raster { grid-template-columns: minmax(0, 1fr); }
  .tuete-bild { width: min(100%, 22rem); margin-bottom: 2.5rem; }
  .videoplatz-marke { inset: auto .75rem calc(.75rem + 2.2rem) .75rem; }
}
.tuete-bild { aspect-ratio: 1 / 1.34; }
.tuete-bild figcaption { bottom: -2.4rem; }
#tuete { overflow-x: clip; }

/* Runde 6 (Einstiegs-Sitzung, Felix 29.09.: Richtung A „Aufgeräumt“): dieselbe Spalte, weniger darin, mehr Luft */
.einstieg { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3rem, 1.5rem + 5vw, 6.5rem); gap: clamp(2rem, 6vw, 6.5rem); }
:root:not([data-schrift="b"]) .einstieg h1 { font-size: clamp(2rem, 1.1rem + 3.7vw, 4.45rem); }
.einstieg .leit { max-width: 29rem; margin-block: var(--s4) var(--s6); }
.einstieg-fuss { gap: .25rem 2rem; }
/* Status: der Punkt bleibt an der ersten Textzeile, auch wenn der Satz am Handy umbricht */
.einstieg .offen { flex-wrap: nowrap; align-items: flex-start; }
.einstieg .offen-punkt { margin-top: .5rem; }
/* Note: „4,5 aus 42 Bewertungen bei Google“, die Zahl hervorgehoben, der Rest bricht als Satz um */
.note-kurz { flex-wrap: wrap; column-gap: .5rem; row-gap: 0; }
.note-kurz .kurz-zahl { font-weight: 600; color: var(--anthrazit); margin-left: .15rem; }
@media (max-width: 900px) {
  .einstieg .leit { margin-block: var(--s2) var(--s3); }
}
.einstieg .leit strong { font-weight: 600; color: var(--anthrazit); }
/* Niedrige Laptopfenster (1280×720 und ähnlich): Hauptzeile, Leitzeile und die drei Wege im ersten Bildschirm
   (Prüfbatterie 07.10., vorher lagen die Wege unter der Kante) */
@media (min-width: 901px) and (max-height: 820px) {
  .einstieg { padding-block: 1.75rem 3rem; }
  :root:not([data-schrift="b"]) .einstieg h1 { font-size: clamp(2rem, 6.4vh + .3rem, 4.45rem); }
  .einstieg .leit { margin-block: var(--s3) var(--s4); }
}

/* Große Zeile in Optima Bold wie auf seiner Tüte (Felix, 29.09.); Fassung B bleibt Plex 400 */
:root:not([data-schrift="b"]) .einstieg h1 { font-weight: 700; }

/* Vorschau: Hintergrund des Einstiegs nur per Link (?grund=licht|kalkstein|papier; fal, auf den Papierton gezogen; DESIGN.md) */
:root[data-grund] .einstieg { position: relative; isolation: isolate; }
:root[data-grund] .einstieg::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); background: center 0 / cover no-repeat; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
:root[data-grund="kalkstein"] .einstieg::before { background-image: image-set(url(../../assets/bild/grund-kalkstein-1200.webp) 1x, url(../../assets/bild/grund-kalkstein-2400.webp) 2x); }
:root[data-grund="papier"] .einstieg::before { background-image: image-set(url(../../assets/bild/grund-papier-1200.webp) 1x, url(../../assets/bild/grund-papier-2400.webp) 2x); }
:root[data-grund="licht"] .einstieg::before { background-image: image-set(url(../../assets/bild/grund-licht-1200.webp) 1x, url(../../assets/bild/grund-licht-2400.webp) 2x); background-position: 0 0; }

/* Ankauf: acht Dinge, die wir ankaufen, als ruhige Objektreihe (fal, als Beispiele beschriftet; Felix 29.09.) */
.ankauf-raster .stempel-bild { margin-top: 0; }
.dinge { list-style: none; margin: clamp(3rem, 2rem + 3vw, 5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1rem, .5rem + 1.5vw, 1.75rem); }
.dinge img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-flaeche); background: var(--hell); }
.dinge h3 { margin-top: 1rem; font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); }
.dinge p { margin-top: .3rem; color: var(--grau); font-size: var(--text-ui); line-height: 1.45; }
.dinge-hinweis { margin-top: var(--s4); font-size: var(--text-sm); color: var(--grau); }
@media (max-width: 900px) {
  .dinge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dinge h3 { margin-top: .7rem; }
  .dinge p { font-size: var(--text-sm); }
}

/* Verkauf: drei Kacheln mit Stücken aus seinem Laden, im System der Ankauf-Reihe (Felix 29.09.) */
.verkauf-kacheln .dinge { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ding-grund { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-flaeche); background: var(--stein); }
.dinge .ding-grund img { position: absolute; inset: 8% 10%; width: 80%; height: 84%; aspect-ratio: auto; object-fit: contain; border-radius: 0; background: none; }
.ding-platz { display: grid; place-items: center; padding: 1rem; border: 1.5px dashed var(--rahmen); background: transparent; color: var(--grau); font-size: var(--text-sm); line-height: 1.45; text-align: center; }
@media (max-width: 900px) {
  /* am Handy als Zeilen: Bild links, Name und Zeile rechts, damit der Abschnitt kurz bleibt */
  .verkauf-kacheln .dinge { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .verkauf-kacheln .dinge li { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); column-gap: var(--s2); }
  .verkauf-kacheln .dinge .ding-grund { grid-row: 1 / span 2; }
  .verkauf-kacheln .dinge h3 { grid-column: 2; margin-top: 0; align-self: end; }
  .verkauf-kacheln .dinge p { grid-column: 2; align-self: start; }
}

/* ───────────────────────── So rechnen wir (Preisseite) ───────────────────────── */
.preis-einstieg { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
.preis-einstieg h1 { max-width: 9em; }
.rechner { margin: 0; background: #1E1E1D; color: var(--hell); border: 1px solid var(--linie-dunkel); border-radius: var(--r-flaeche); overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .02), 0 24px 60px -24px rgb(0 0 0 / .45); }
.rechner-felder { display: grid; gap: 1rem; padding: 1.1rem 1rem; }
.feld { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); align-items: center; gap: .75rem; }
.feld-name { font-size: var(--text-sm); color: var(--hell-q); }
.eingabe { display: flex; align-items: center; gap: .6rem; }
.eingabe input { width: 7.5rem; min-height: 2.75rem; padding: .4rem .7rem; border-radius: var(--r-klein); border: 1px solid var(--rahmen); background: #141413; color: var(--hell); font: 600 var(--text-ui)/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.eingabe input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.eingabe i { font-style: normal; font-size: var(--text-sm); color: var(--hell-q); }
.rechner .stempel { gap: .4rem; }
.rechner-ergebnis { padding: 1rem; border-top: 1px solid var(--linie-dunkel); display: grid; gap: .4rem; }
.rechnung { font: 400 var(--text-sm)/1.4 var(--font-mono); color: var(--hell-q); font-variant-numeric: tabular-nums; }
.summe { display: grid; gap: .2rem; }
.summe span { font-size: var(--text-sm); color: var(--hell); font-weight: 600; }
.summe output { font: 400 clamp(2.5rem, 1.9rem + 2vw, 3.4rem)/1.05 var(--font-text); color: var(--gold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rechner-platz .anzeige-hinweis { color: var(--grau); }
.preis-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.preis-raster .einleitung { margin-block: var(--s3) var(--s2); }
.feintafel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; border-top: 2px solid var(--anthrazit); }
.feintafel th, .feintafel td { text-align: left; padding: .9rem .5rem .9rem 0; border-bottom: 1px solid var(--rahmen); }
.feintafel thead th { font-size: var(--text-sm); font-weight: 600; color: var(--grau); }
.feintafel tbody th { font: 600 clamp(1.375rem, 1.1rem + 1vw, 2rem)/1.1 var(--font-mono); }
.aussage-hell { margin-top: 0; }
.aussage-hell footer { color: var(--grau); }
.merkmale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 4vw, 4rem); }
.merkmale li { border-top: 1px solid var(--rahmen); padding-top: var(--s3); }
.merkmale h3 { margin-bottom: .5rem; }
.merkmale p { color: var(--grau); max-width: 34rem; }
.ablauf-weiter { margin-top: var(--s3); }
.tafel-hinweis { margin-top: .75rem; font-size: var(--text-sm); color: var(--grau); }
.feintafel td:last-child { font-weight: 600; }
.wegtafel th:not(:first-child), .wegtafel td:not(:first-child) { white-space: nowrap; }
.wegtafel th:last-child, .wegtafel td:last-child { text-align: right; padding-right: 0; }

/* Fuß: alle Seiten der fertigen Website, noch nicht gebaute ohne Link */

@media (max-width: 900px) {
  .preis-einstieg, .preis-raster { grid-template-columns: minmax(0, 1fr); }
  .merkmale { grid-template-columns: minmax(0, 1fr); }
  .feld { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
}

/* Handymenü: unter 1080 px ersetzt es die Navigation im Kopf; ohne Skript öffnet es als <details> */
.menue { display: none; }
@media (max-width: 1080px) {
  .menue { display: block; }
  .menue summary { list-style: none; display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding-inline: .9rem; border-radius: var(--r-pille); border: 1.5px solid var(--rahmen); font-weight: 600; cursor: pointer; user-select: none; }
  .menue summary::-webkit-details-marker { display: none; }
  .menue summary:hover { border-color: var(--anthrazit); }
  .menue[open] summary { background: var(--anthrazit); border-color: var(--anthrazit); color: var(--papier); }
  .menue-striche { position: relative; width: 1rem; height: 2px; background: currentColor; border-radius: 1px; }
  .menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 1px; transition: transform .18s ease, top .18s ease; }
  .menue-striche::before { top: -5px; }
  .menue-striche::after { top: 5px; }
  .menue[open] .menue-striche { background: transparent; }
  .menue[open] .menue-striche::before { top: 0; transform: rotate(45deg); }
  .menue[open] .menue-striche::after { top: 0; transform: rotate(-45deg); }
  .menue-liste { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: .25rem var(--rand) 1.25rem; background: var(--papier); border-bottom: 1px solid var(--linie); box-shadow: 0 24px 40px -28px rgb(43 43 42 / .45); }
  .menue-liste a { display: flex; align-items: center; min-height: 3.25rem; border-bottom: 1px solid var(--linie); font-size: var(--text-lead); font-weight: 600; text-decoration: none; }
  .menue-liste a:last-child { border-bottom: 0; }
  .menue-liste a[aria-current="page"] { text-decoration: underline var(--gold) 2px; text-underline-offset: .35em; }
}
@media (max-width: 900px) {
  .menue summary { padding-inline: .8rem; }
}
@media (max-width: 380px) {
  .kopf-reihe { gap: .5rem; }
  .kopf-kontakt { gap: .3rem; }
  .marke img { height: 2.35rem; }
  .menue summary { padding-inline: .65rem; gap: .45rem; }
}
/* Unter 340 px passt das Wort „Menü“ nicht mehr neben Marke und zwei Symbole (Überlauf 8 px bei 320, Prüfbatterie 07.10.):
   der Knopf wird zum Quadrat wie die Symbole daneben, das Wort bleibt für Screenreader */
@media (max-width: 340px) {
  .menue summary { padding: 0; width: 2.75rem; justify-content: center; }
  .menue summary span:not(.menue-striche) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* Handy und Tablet: das Porträt läuft randlos vom Kopf bis zu beiden Seiten (Felix, 29.09. abends) */
@media (max-width: 900px) {
  .einstieg:has(.portraet) { padding-top: 0; }
  .einstieg .portraet { margin-inline: calc(-1 * var(--rand)); overflow: hidden; }
  .einstieg .portraet img { border-radius: 0; }
  .einstieg .portraet .namensschild { padding-inline: var(--rand); }
  .js .einstieg .portraet img { animation-name: bild-ein-randlos; }
  @keyframes bild-ein-randlos { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }
}

/* ───────────────────────── Schaufenster (Kaufen) ───────────────────────── */
.kaufen-einstieg { align-items: center; }
.kaufen-bild { margin: 0; }
.kaufen-bild .ding-grund { background: radial-gradient(120% 90% at 40% 35%, #F3F0EA 0%, var(--stein) 55%, var(--stein-tief) 100%); border-radius: var(--r-flaeche); padding: clamp(.75rem, 2vw, 1.5rem); display: grid; place-items: center; aspect-ratio: 1; }
.kaufen-bild .ding-grund img { width: 88%; height: auto; aspect-ratio: auto; object-fit: contain; background: none; border-radius: 0; }  /* nicht die Porträt-Regel aus .einstieg figure img */
.schaufenster-notiz { max-width: 46rem; margin-bottom: var(--s4); }
.waren-titel { margin: var(--s4) 0 var(--s2); }
.waren { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ware { display: grid; gap: .35rem; align-content: start; padding: 1.25rem 1.25rem 1rem; background: var(--papier); border-radius: var(--r-flaeche); border-top: 3px solid var(--rahmen); }
.ware h4 { margin: 0; font: 600 var(--text-h3)/1.25 var(--font-kopf); letter-spacing: var(--kopf-laufweite); text-wrap: balance; }
.ware-art { font-size: var(--text-sm); color: var(--grau); }
.ware-preis { margin-top: .5rem; font: 600 clamp(1.6rem, 1.3rem + 1vw, 2rem)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ware-fuss { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: var(--text-sm); color: var(--grau); }
.ware .textlink { margin-top: .35rem; justify-self: start; }
@media (max-width: 1080px) {
  .waren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kaufen-bild .ding-grund { aspect-ratio: 4 / 3; }
  .kaufen-bild .ding-grund img { width: auto; max-height: 17rem; }
}
@media (max-width: 600px) {
  .waren { grid-template-columns: minmax(0, 1fr); }
}

/* Ablauf: Rechenbeleg unter jedem Schritt (Felix, 29.09. abends). Am Computer liegen Ziffer, Titel, Text und Beleg per Subgrid auf gemeinsamen Linien. */
.schritte .schritt-beleg { display: grid; gap: .2rem; align-content: start; margin-top: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-klein); background: var(--stein); color: var(--anthrazit); }
.schritt-beleg span { font-size: var(--text-sm); color: var(--grau); }
.schritt-beleg b { font: 600 var(--text-ui)/1.35 var(--font-mono); font-variant-numeric: tabular-nums; }
.schritt-beleg small { font-size: var(--text-sm); color: var(--grau); }
@media (min-width: 901px) {
  .schritte { row-gap: 0; }
  .schritte li { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
}

/* Jochens Wahl „Die breiten wie vorher“ (entscheidungen.json, Frage knoepfe): die Knöpfe bis 29.09. spätabends */
:root[data-knoepfe="breit"] .wege { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
:root[data-knoepfe="breit"] .weg { justify-content: flex-start; gap: .85rem; min-height: var(--tap); padding: .75rem 1rem; text-align: left; font-size: inherit; background: var(--gold); box-shadow: none; }
:root[data-knoepfe="breit"] .weg:hover { background: color-mix(in oklab, var(--gold) 86%, white); }
:root[data-knoepfe="breit"] .weg .i { width: 1.45rem; height: 1.45rem; stroke-width: 1.7; }
:root[data-knoepfe="breit"] .weg small { display: block; }
:root[data-knoepfe="breit"] .weg .lang { display: inline; }
:root[data-knoepfe="breit"] .leiste a { background: var(--gold); box-shadow: none; }
@media (max-width: 900px) {
  :root[data-knoepfe="breit"] .wege { gap: .5rem; }
  :root[data-knoepfe="breit"] .weg { flex-direction: column; justify-content: center; gap: .35rem; padding: .7rem .4rem; text-align: center; min-height: 4.5rem; }
  :root[data-knoepfe="breit"] .weg small, :root[data-knoepfe="breit"] .weg .lang { display: none; }
}

/* ───────── Runde 7 (30.09.): Rückmeldungen aus Felix' Testlesern ─────────
   Umschalter per Link wie ?grund=: ?jahre=spalte|bild|aus · ?pfeil=text|kreis|aus. Gründe: DESIGN.md, Runde 7. */

/* Vertrauen auf einen Blick (30.09. abends, ersetzt die Zahlenreihe 25+ · 6+ · Kostenlos): Bedeutung zuerst, die Zahl steht im Satz,
   alles gleich groß, je ein Liniensymbol im Stil der Knöpfe (Uhr, Ort, Lupe wie auf seiner Tüte). Felix: Die nackten Zahlen sagten
   auf den ersten Blick nichts, „Kostenlos“ war unnötig laut. Kein Laufband: bewegter Text ist für ältere Leser schwer lesbar.
   „Über“ statt fester Zähler, damit die Aussagen nie falsch werden (fakten.md § 2). */
.vertrauen { display: none; list-style: none; margin: 0; padding: var(--s2) 0 0; border-top: 1px solid var(--linie); gap: .55rem; max-width: 36rem; }
.vertrauen li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); column-gap: .75rem; align-items: start; font-size: var(--text-ui); line-height: 1.45; color: var(--grau); }
.vertrauen .i { width: 1.3rem; height: 1.3rem; margin-top: .05rem; color: var(--anthrazit); stroke-width: 1.6; }
.vertrauen b { font-weight: 600; color: var(--anthrazit); }
:root[data-jahre="spalte"] .vertrauen-spalte, :root[data-jahre="bild"] .vertrauen-bild { display: grid; }
:root:is([data-jahre="spalte"], [data-jahre="bild"], [data-jahre="oben"]) .namensschild-jahre { display: none; }
/* „oben“ (Empfehlung): am Computer in der Textspalte, am Handy direkt unter dem Porträt, damit die Knöpfe nicht weiter nach unten rutschen */
@media (min-width: 901px) { :root[data-jahre="oben"] .vertrauen-spalte { display: grid; } }
@media (max-width: 900px) { :root[data-jahre="oben"] .vertrauen-bild { display: grid; } }
.vertrauen-spalte { margin: 0 0 var(--s4); }
:root:is([data-jahre="spalte"], [data-jahre="oben"]) .einstieg .leit { margin-block: var(--s3) var(--s3); }
.vertrauen-bild { margin-top: var(--s2); max-width: none; }
@media (max-width: 900px) {
  .einstieg .portraet .vertrauen-bild { margin-inline: var(--rand); }
  .vertrauen li { font-size: var(--text-sm); }
}

/* Weiter nach unten: klar beschriftet, sanft wippend, verschwindet beim ersten Scrollen und kommt oben wieder.
   Nur mit Skript, sonst bliebe er stehen. Am Handy steht er auf einem weichen Boden, damit er nicht über dem Text schwebt. */
.weiter { display: none; }
.js:is([data-pfeil="text"], [data-pfeil="kreis"]) .weiter {
  display: flex; justify-content: center; position: fixed; z-index: 25; inset: auto 0 0 0;
  padding: 2.5rem 1rem max(1.25rem, env(safe-area-inset-bottom)); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.weiter-knopf {
  pointer-events: auto; display: inline-flex; align-items: center; gap: .75rem; white-space: nowrap;
  padding: .45rem .45rem .45rem 1.25rem; min-height: 3.25rem; border-radius: var(--r-pille);
  background: color-mix(in oklab, var(--papier) 94%, transparent); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px rgb(43 43 42 / .35);
  color: var(--anthrazit); font-weight: 600; font-size: var(--text-ui); text-decoration: none;
}
.weiter-kreis { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--gold-flaeche); }
.weiter-knopf:hover .weiter-kreis { background: color-mix(in oklab, var(--gold-flaeche) 88%, var(--anthrazit)); }
.js[data-pfeil="kreis"] .weiter-knopf { padding: .45rem; }
.js[data-pfeil="kreis"] .weiter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js[data-pfeil="kreis"] .weiter-kreis { width: 2.9rem; height: 2.9rem; }
.js .weiter[data-weg] { opacity: 0; transform: translateY(1rem); }
.js .weiter[data-weg] .weiter-knopf { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .weiter-knopf { animation: weiter-ein .6s .9s cubic-bezier(.2, .7, .2, 1) both; }
  .js .weiter svg { animation: wippen 1.8s 1.6s ease-in-out 3; }
  @keyframes weiter-ein { from { opacity: 0; transform: translateY(.75rem); } }
  @keyframes wippen { 0%, 100% { transform: none; } 45% { transform: translateY(3px); } 65% { transform: translateY(-1px); } }
}
@media (max-width: 900px) {
  .js:is([data-pfeil="text"], [data-pfeil="kreis"]) .weiter { padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); background: linear-gradient(color-mix(in oklab, var(--papier) 0%, transparent), var(--papier) 62%); }
}

/* Preisseite (30.09.): Der Satz zum Angebot steht vorn und kräftig, der Pflichthinweis zum Kurs bleibt darunter lesbar. */
.rechner-platz .anzeige-hinweis { font-size: var(--text-ui); line-height: 1.55; }
.rechner-platz .anzeige-hinweis strong { display: block; margin-bottom: .2rem; color: var(--anthrazit); font-weight: 600; }

/* Einstieg: Porträt oben an der Hauptzeile statt mittig zur Textspalte, die mit der Vertrauenszeile länger geworden ist (Felix, 30.09.) */
@media (min-width: 901px) { .einstieg .portraet { align-self: start; margin-top: .6rem; } }
.anzeige-leiste .beispiel { white-space: nowrap; flex: none; }

/* Ablauf als Rechenbeleg (30.09., nach den Karten): links die drei Schritte als ruhige Liste, rechts ein Beleg,
   der die Hauptzeile „Gramm für Gramm vorgerechnet“ einlöst. Gewicht × Goldanteil = reines Gold, × Tageskurs = Metallwert;
   die 58,5 % sind dieselbe Zahl wie auf der Messanzeige darüber. Gold markiert nur den Stempel und die Summe. */
.ablauf-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.ablauf-text .einleitung { margin-top: var(--s3); }
.ablauf-schritte { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s4); counter-reset: s; }
.ablauf-schritte li { counter-increment: s; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--s2); position: relative; }
.ablauf-schritte li::before { content: counter(s); grid-row: span 2; font: var(--kopf-gewicht) 2rem/1 var(--font-kopf); color: var(--anthrazit); padding-top: .1rem; }
/* feine Linie von Ziffer zu Ziffer */
.ablauf-schritte li:not(:last-child)::after { content: ""; position: absolute; left: .55rem; top: 2.6rem; bottom: calc(-1 * var(--s4) + .4rem); width: 1px; background: var(--linie); }
.ablauf-schritte h3 { margin-bottom: .4rem; }
.ablauf-schritte p { color: var(--grau); }

.beleg { margin: 0; position: sticky; top: 7.5rem; }
.beleg-papier {
  background: #fff; border-radius: 4px 4px 0 0; padding: var(--s4) var(--s4) calc(var(--s4) + 10px);
  /* unten gerissen wie ein Kassenbon: Zacken 18 px breit, 9 px tief */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
}
.beleg { filter: drop-shadow(0 0 .6px rgb(43 43 42 / .45)) drop-shadow(0 12px 22px rgb(43 43 42 / .06)); }
.beleg-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: var(--s2); margin-bottom: var(--s1); border-bottom: 1px solid var(--anthrazit); font: 500 var(--text-sm)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.beleg-kopf span { color: var(--grau); text-transform: none; letter-spacing: 0; font-family: var(--font-text); }
.beleg-rechnung { width: 100%; border-collapse: collapse; font: 400 var(--text-ui)/1.35 var(--font-mono); font-variant-numeric: tabular-nums; }
.beleg-rechnung th { text-align: left; font: 400 var(--text-ui)/1.35 var(--font-text); color: var(--grau); padding: .7rem 1rem .7rem 0; }
.beleg-rechnung td { text-align: right; white-space: nowrap; padding: .7rem 0; color: var(--anthrazit); font-weight: 500; }
.beleg-rechnung tr { border-bottom: 1px dotted var(--rahmen); }
.beleg-rechnung tbody:last-of-type tr:last-child { border-bottom: 0; }
.beleg-rechnung .beleg-nr { width: 2rem; text-align: left; vertical-align: top; padding-right: .5rem; font: var(--kopf-gewicht) 1.1rem/1.35 var(--font-kopf); color: var(--rahmen); border-bottom: 0; }
.beleg-rechnung tbody + tbody tr:first-child th, .beleg-rechnung tbody + tbody tr:first-child td { border-top: 1px solid var(--linie); }
/* Summe: doppelt unterstrichen wie in jeder Rechnung, Wert groß */
.beleg-summe th { color: var(--anthrazit); font-weight: 600; padding-top: 1rem; }
.beleg-summe td { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; padding-top: 1rem; }
.beleg-summe { border-top: 3px double var(--anthrazit); }
.beleg figcaption { margin-top: var(--s3); font-size: var(--text-sm); line-height: 1.5; color: var(--grau); }
.schritt-beleg em, .beleg em { font: inherit; color: inherit; font-style: normal; }
.beleg-mark {
  background: linear-gradient(color-mix(in oklab, var(--gold-flaeche) 70%, transparent), color-mix(in oklab, var(--gold-flaeche) 70%, transparent)) 0 88% / 100% .42em no-repeat;
  padding-inline: .12em; margin-inline: -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.beleg-zahl { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
[data-waage] { min-width: 4ch; }
.nochmal { display: none; }
@media (max-width: 900px) {
  .ablauf-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .beleg { position: static; }
  .ablauf-bild { position: static; margin-top: 0; }
  .beleg-papier { padding: var(--s3) var(--s3) calc(var(--s3) + 10px); }
  .beleg-rechnung, .beleg-rechnung th { font-size: var(--text-sm); }
  .beleg-rechnung .beleg-nr { width: 1.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .nochmal:not([hidden]) {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--s2); min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
    font: 600 var(--text-ui)/1.2 var(--font-text); color: var(--anthrazit);
    text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .3em;
  }
  .js .nochmal:hover { text-decoration-thickness: 3px; }
  .js .nochmal[data-still] { visibility: hidden; }
  .js .nochmal .i { width: 1.1rem; height: 1.1rem; }

  /* Beleg schreibt sich Zeile für Zeile, jede Zeile, sobald sie im Bild ist; die Liste links bleibt ruhig */
  [data-spiel] .beleg-rechnung tr { transition: opacity .4s ease, visibility .4s, transform .4s cubic-bezier(.2, .7, .2, 1); }
  [data-spiel] .beleg-rechnung tr:not([data-an]) { opacity: 0; visibility: hidden; transform: translateY(.4rem); }
  [data-spiel] .beleg-summe { transition: border-color .4s ease; }
  [data-spiel] .beleg-mark { transition: background-size .7s cubic-bezier(.2, .7, .2, 1); }
  [data-spiel] .beleg-mark:not([data-an]) { background-size: 0% .42em; }
}

/* Niedrige Laptopfenster: Der Weiter-Knopf säße mittig über „Route planen“ (Prüfbatterie 07.10.). Steht am Ende,
   weil die Grundregel des Knopfs weiter oben gleich spezifisch ist */
@media (min-width: 901px) and (max-height: 820px) {
  .js:is([data-pfeil="text"], [data-pfeil="kreis"]) .weiter { display: none; }
}

/* Textseiten: Impressum, Datenschutz, Echtheit der Bewertungen (Auftrag Unterseiten 07.10.).
   Ruhiger Lesesatz ohne Einstieg und ohne Besuchsabschnitt: schmale Spalte für angenehme Zeilenlänge,
   Abstände zwischen Absätzen (p hat in stil.css keinen Rand), Zwischenüberschriften eine Stufe kleiner,
   Adressblock und Angabenliste für Impressum und Verantwortlichen. Nur Tokens aus stil.css. */
.textseite { padding-block: var(--s6) clamp(4rem, 2.5rem + 6vw, 8rem); }
.lesesatz { max-width: 40rem; }
.lesesatz h1 { font-size: var(--text-h2); line-height: 1.1; }
.lesesatz > * + * { margin-top: var(--s2); }
.lesesatz > h1 + * { margin-top: var(--s4); }
.lesesatz > h2 { font-size: var(--text-h3); margin-top: var(--s6); }
.lesesatz > h2 + * { margin-top: var(--s1); }
.lesesatz > p.vorschau-notiz { margin-top: var(--s2); }
.lesesatz > .einleitung { max-width: none; }
.lesesatz > .textlink { margin-top: var(--s3); }
.lesesatz a:not(.textlink) { text-underline-offset: .25em; }
.adresse { font-style: normal; }
.adresse strong { font-weight: 600; }
.angaben { margin-block: var(--s2) 0; display: grid; gap: var(--s1); }
.angaben div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s2); }
.angaben dt { color: var(--grau); }
.angaben dd { margin: 0; }
@media (max-width: 30rem) { .angaben div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* /kontakt/ · Anfrageformular (07.10.). Die Feld-Bausteine des Rechners (.feld, .eingabe) sind für die dunkle
   Rechnerfläche gebaut (dunkles Feld, helle Schrift, schmale Zahleneingabe rechtsbündig) und taugen nicht für
   Name und Freitext auf Papier. Deshalb ein eigenes, ruhiges Formular mit den Tokens aus stil.css:
   weiße Felder mit grauer Kante, Beschriftung über dem Feld, Gold nur auf dem Absenden-Knopf (Handlung). */
.anfrage { display: grid; gap: var(--s4); max-width: 40rem; }
.anfrage-feld { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.anfrage-feld > label, .anfrage-feld legend { font-weight: 600; padding: 0; }
.anfrage-frei { font-weight: 400; color: var(--grau); }
.anfrage-hilfe { font-size: var(--text-sm); color: var(--grau); line-height: 1.5; }
.anfrage-hilfe a { color: var(--anthrazit); font-weight: 600; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.anfrage input[type="text"], .anfrage textarea {
  width: 100%; min-height: 3.25rem; padding: .7rem .9rem; border: 1px solid var(--rahmen); border-radius: var(--r-klein);
  background: #fff; color: var(--anthrazit); font: 400 var(--text-base)/1.5 var(--font-text);
  transition-property: border-color; transition-duration: .15s;
}
.anfrage textarea { resize: vertical; min-height: 7.5rem; }
.anfrage input[type="text"]:hover, .anfrage textarea:hover { border-color: var(--anthrazit); }
.anfrage :is(input, textarea):focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 2px; border-color: var(--anthrazit); }
.anfrage-wahl { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin-top: .2rem; }
.anfrage-wahl label { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; cursor: pointer; }
.anfrage-wahl input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--anthrazit); }
.anfrage-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.anfrage-senden { display: grid; gap: .25rem; justify-items: start; }
.anfrage-knopf {
  min-height: 3.25rem; padding: .6rem 1.5rem; border: 0; border-radius: var(--r-klein); background: var(--gold-flaeche);
  color: var(--anthrazit); font: 600 var(--text-ui)/1.2 var(--font-text); cursor: pointer;
  transition-property: background-color, transform; transition-duration: .18s;
}
.anfrage-knopf:hover { background: color-mix(in oklab, var(--gold-flaeche) 92%, var(--anthrazit)); }
.anfrage-knopf:active { transform: scale(.96); transition-duration: .08s; }
@media (max-width: 900px) {
  .anfrage-zwei { grid-template-columns: minmax(0, 1fr); }
}

/* Seitenfuß, Fassung A (Felix, 07.10.): Spalten mit kleinen Überschriften wie bei Burger, Lepple und Friedrich */
.fuss-neu { padding-block: var(--s8) calc(var(--s6) + var(--leiste-hoehe, 0px)); font-size: var(--text-sm); line-height: 1.55; }
.fn-raster { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2.2fr) minmax(0, 1.8fr); gap: var(--s4) clamp(1.5rem, 3vw, 3rem); align-items: start; }
.fuss-neu .marke img { height: 3.25rem; }
.fn-zeile { margin-top: var(--s2); max-width: 15rem; }
.fuss-neu .offen { margin-top: var(--s2); font-size: var(--text-sm); }
.fn-titel { margin: .35rem 0 .9rem; font: 600 .75rem/1.2 var(--font-text); letter-spacing: .12em; text-transform: uppercase; }
.fn-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.fn-gruppe li a, .fn-route { display: inline-block; padding-block: .2rem; }
.fuss-neu a { text-decoration: none; transition-property: text-decoration-color; transition-duration: .15s; }
.fuss-neu a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.fn-zeiten { margin: .9rem 0 .5rem; display: grid; gap: .3rem; border-top: 0; }
/* die Tabellenform der Zeiten aus dem Besuchsabschnitt (.zeiten) im Fuß zurücknehmen: keine Striche, kein Band, kein „· heute“ */
.fn-zeiten div, .fn-zeiten div[data-heute] { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: .5rem; margin: 0; padding: 0; border: 0; box-shadow: none; }
.fn-zeiten dt { font-weight: 400; }
.fn-zeiten div[data-heute] dt::after { content: none; }
.fn-zeiten dd { margin: 0; }
.fn-route::after { content: " →"; }
.fn-schluss { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; font-size: var(--text-meta, .8125rem); }
.fn-schluss p { margin: 0; }
.fn-pflicht { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.fuss-neu .vermerk { margin-top: var(--s2); padding-top: 0; border-top: 0; font-size: var(--text-meta, .8125rem); }

/* Fassung A: dunkel wie heute */
.fuss-neu.dunkel .fn-titel, .fuss-neu.dunkel .fn-zeile, .fuss-neu.dunkel .fn-zeiten dt, .fuss-neu.dunkel .fn-schluss { color: var(--hell-q); }
.fuss-neu.dunkel .fn-schluss { border-color: var(--linie-dunkel); }
.fuss-neu.dunkel p { color: var(--hell-q); }
.fuss-neu.dunkel a { color: var(--hell); }
.fuss-neu.dunkel .offen { color: var(--hell-q); }
.fuss-neu.dunkel .offen-jetzt { color: var(--hell); }
.fuss-neu.dunkel .fn-zeiten [data-heute] dd { color: var(--hell); font-weight: 600; }
.fuss-neu.dunkel .fn-zeiten [data-heute] dt { color: var(--gold); }

@media (max-width: 1100px) {
  .fn-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fn-marke { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; }
  .fn-marke .fn-zeile, .fn-marke .offen { margin-top: 0; }
}
@media (max-width: 700px) {
  .fn-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .fn-marke { display: block; }
  .fn-marke .fn-zeile, .fn-marke .offen { margin-top: var(--s2); }
  .fn-besuch { grid-column: 1 / -1; }
  .fn-schluss { flex-direction: column; }
}

/* Prüfung „stiefmütterlich“ (07.10.): Fehler behoben */
/* ③ Fuß: der Statuspunkt bleibt neben dem Text, auch in der schmalen Spalte */
.fuss-neu .offen { flex-wrap: nowrap; align-items: flex-start; }
.fuss-neu .offen-punkt { margin-top: .4em; }
/* ④ Objektbilder im Einstieg: mittig, nicht auf ein Gesicht ausgerichtet */
.einstieg figure img.objekt { object-position: 50% 50%; }
/* ⑦ Bewertungen ohne Daten (Google oder Funktion fällt aus): kein leeres Versprechen, nur die Wege zu Google */
#bewertungen[data-leer] .bew-leer { display: none; }
#bewertungen[data-leer] .bew-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
/* ⑫ Formular /kontakt/: eigene Auswahlknöpfe statt Browser-Grundform, runder Fokus, kein Griff am Textfeld */
.anfrage-wahl input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; border: 1.5px solid var(--rahmen); border-radius: 50%; background: #fff; cursor: pointer; transition-property: border-color; transition-duration: .15s; }
.anfrage-wahl input::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--anthrazit); transform: scale(0); transition: transform .15s ease; }
.anfrage-wahl input:checked { border-color: var(--anthrazit); }
.anfrage-wahl input:checked::before { transform: scale(1); }
.anfrage-wahl input:hover { border-color: var(--anthrazit); }
.anfrage-wahl input:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 2px; }
.anfrage textarea { resize: none; }

/* Feinschliff 07.10. (Felix: alle drei Empfehlungen ja) */

/* ① Besuchsabschnitt der Unterseiten: die ganze Woche steht im Fuß und auf /kontakt/, hier nur, ob jetzt offen ist */
.besuch-kurz .offen { margin-top: var(--s4); font-size: var(--text-base); }
.besuch-kurz .offen-punkt { width: .75rem; height: .75rem; }
.besuch-kurz .wege { margin-top: var(--s3); }
.besuch-kurz .besuch-fuss .textlink { margin-top: var(--s1); justify-self: start; }
.besuch-kurz .wege + .textlink { display: inline-flex; margin-top: var(--s4); }
@media (min-width: 901px) {
  .besuch-kurz .besuch-raster { align-items: center; }
  .besuch-kurz figure img { aspect-ratio: 4 / 3; }
}

/* ③ Pflichtseiten: Kopfband auf Stein wie ein Seitenanfang, darunter Überschrift links, Text rechts */
.ts-kopf { background: var(--stein); border-bottom: 1px solid var(--linie); }
.ts-kopf .wrap { padding-block: 0 clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.ts-kopf .pfad { padding-top: var(--s4); }
.ts-kopf h1 { margin-top: var(--s4); font-size: var(--text-h1); max-width: 14em; }
.ts-kopf .einleitung { margin-top: var(--s3); max-width: 38rem; font-size: var(--text-lead); color: var(--grau); }
.textseite.ts-raster { display: grid; padding-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.ts-teil { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s2) clamp(2rem, 4vw, 4rem); padding-block: var(--s4) var(--s6); border-top: 1px solid var(--linie); }
.ts-teil:first-child { border-top: 0; padding-top: 0; }
.ts-teil > h2 { font-size: var(--text-h3); line-height: 1.25; margin: 0; max-width: 16em; }
.ts-teil > .lesesatz { max-width: 40rem; }
.ts-teil > .lesesatz > :first-child { margin-top: 0; }
.ts-ohne > .lesesatz { grid-column: 1 / -1; }  /* Seiten ohne Zwischenüberschrift beginnen links */
@media (max-width: 900px) { .ts-teil { grid-template-columns: minmax(0, 1fr); } }

/* ⑤ Menü (Linie beim Überfahren bleibt gold, Felix 07.10.: „die mochte ich eigentlich“; die aktuelle Seite unterscheidet sich durch fette Schrift) */
.menue-fuss { display: none; }
@media (max-width: 1080px) {
  /* Die Seite dahinter tritt zurück, das Menü steht als Fläche davor */
  .menue[open] .menue-liste { box-shadow: 0 0 0 100vmax rgb(43 43 42 / .42); clip-path: inset(0 0 -100vmax 0); }
  .menue-liste { padding-bottom: 0; }
  .menue-liste > a { justify-content: space-between; gap: 1rem; }
  .menue-liste > a::after { content: ""; width: .55rem; height: .55rem; border-top: 2px solid var(--rahmen); border-right: 2px solid var(--rahmen); transform: rotate(45deg); margin-right: .3rem; flex: none; }
  .menue-liste > a[aria-current="page"]::after { border-color: var(--gold); }
  .menue-liste > a:nth-last-child(1 of a) { border-bottom: 1px solid var(--linie); }
  /* Unten im Menü: ob jetzt offen ist, und wo der Laden liegt */
  .menue-fuss { display: grid; gap: .35rem; padding-block: var(--s3) 1.5rem; }
  .menue-fuss .offen { margin: 0; flex-wrap: nowrap; align-items: flex-start; }
  .menue-fuss .offen-punkt { margin-top: .45rem; }
  .menue-ort { margin: 0; padding-left: 1.525rem; font-size: var(--text-sm); color: var(--grau); }
  .menue-ort a { display: inline; min-height: 0; border: 0; font-size: inherit; color: var(--anthrazit); font-weight: 600; text-decoration: underline var(--gold) 2px; text-underline-offset: .3em; }
}

/* Kontaktknöpfe im Kopf: beim Überfahren flach gold wie die Knöpfe auf der Seite, keine Goldkante (Felix, 07.10.) */
.kopf-kontakt a:hover { border-color: var(--gold); background: var(--gold); }
.lesesatz > .stand { margin-top: var(--s4); font-size: var(--text-sm); color: var(--grau); }

/* Rangfolge der drei Wege (Felix 07.10., Fassung A): Anrufen bleibt gold, WhatsApp und Route hell mit feiner Kante wie die Kopfknöpfe */
.weg:not(:first-child), .leiste a:not(:first-child) { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--rahmen); }
.weg:not(:first-child):hover { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--anthrazit); }
/* Anrufen in Logogold mit sanft grauer Kante, damit die drei Wege eine Reihe bilden (Felix 07.10., mittlere Fassung aus _vergleich/rangfolge/anrufen/) */
.weg:first-child, .leiste a:first-child { background: var(--gold); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--rahmen) 55%, var(--linie)); }
.weg:first-child:hover { background: var(--gold); box-shadow: inset 0 0 0 1.5px var(--anthrazit); }