/* 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;
  --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; }
.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; }
.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, 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, minmax(0, 1fr)); gap: .625rem; }
.weg { display: flex; align-items: center; gap: .85rem; min-height: var(--tap); padding: .75rem 1rem; border-radius: var(--r-klein); background: var(--gold); 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) 86%, white); }
.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.45rem; height: 1.45rem; }

/* ───────────────────────── Ö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: center; 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; }
.versprechen-titel { margin-top: var(--s4); font-weight: 600; color: var(--grau); }
.versprechen { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: .6rem; font-weight: 600; }
.versprechen li { display: flex; align-items: baseline; gap: .7rem; }
.versprechen li::before { content: ""; width: 0; height: 0; border-block: .36em solid transparent; border-left: .55em solid var(--anthrazit); transform: translateY(-.05em); flex: none; }
.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); }
.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: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.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); }

/* ───────────────────────── 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); padding-left: .9rem; }
.zeiten div[data-heute] dt::after { content: " · heute"; font-weight: 400; color: var(--grau); }
.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ß ───────────────────────── */
.fuss { padding-block: var(--s8) calc(var(--s8) + var(--leiste-hoehe, 0px)); font-size: var(--text-ui); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); align-items: start; }
.fuss .marke img { height: 3.5rem; }
.fuss p { color: var(--hell-q); }
.fuss p strong { color: var(--hell); font-weight: 600; }
.fuss-spalten { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s4); }
.fuss a { color: var(--hell); text-underline-offset: .25em; }
.vermerk { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--linie-dunkel); font-size: var(--text-sm); }

/* ───────────────────────── 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, .fuss-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); }
  .wege { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .weg { flex-direction: column; justify-content: center; gap: .35rem; padding: .7rem .4rem; text-align: center; min-height: 4.5rem; }
  .weg small { display: none; }
  .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, .fuss-spalten, .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); 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, 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); }
/* Unterschrift: Platzhalter in Herr Von Muellerhoff (OFL) als Pfade, bis seine echte da ist */
.zitat .unterschrift { width: 13rem; height: auto; margin: 0 0 .35rem -.35rem; }

/* ───────────────────────── 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; }
.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; }
.versprechen li::before { border-block-width: .28em; border-left-width: .42em; }
.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); }

/* 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; }
@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 */
.fuss-seiten { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--linie-dunkel); }
.fuss-seiten ul { list-style: none; margin: var(--s2) 0 0; padding: 0; columns: 3 14rem; column-gap: var(--s4); }
.fuss-seiten li { break-inside: avoid; padding-block: .3rem; color: var(--hell-q); }
.fuss-seiten li span { margin-left: .4rem; font-size: var(--text-meta); color: var(--hell-q); opacity: .8; }
.fuss-seiten li a { font-weight: 600; }

@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; }
}
@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; }
}

/* 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-gold { border-top-color: var(--gold); }
.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: Umschalter ?ablauf=bilder | beleg | zeichnung (Vorschau, 29.09. abends). Ohne Parameter bleibt der Stand. */
.schritt-bild, .schritt-beleg { display: none; }
:root[data-ablauf="bilder"] .schritt-bild, :root[data-ablauf="zeichnung"] .schritt-bild { display: block; margin: 0 0 var(--s3); }
.schritt-bild > * { display: none; }
:root[data-ablauf="bilder"] .schritt-foto, :root[data-ablauf="bilder"] .schritt-rechnung, :root[data-ablauf="zeichnung"] .schritt-zeichnung { display: block; }
.schritt-foto, .schritt-zeichnung { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.schritt-zeichnung { mix-blend-mode: multiply; }
.schritt-foto { object-fit: cover; border-radius: var(--r-flaeche); outline: 1px solid rgb(0 0 0 / .1); outline-offset: -1px; }
.schritt-rechnung { aspect-ratio: 4 / 3; border-radius: var(--r-flaeche); background: var(--stein); padding: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
:root[data-ablauf="bilder"] .schritt-rechnung { display: flex; flex-direction: column; justify-content: space-between; }
.schritt-rechnung .beispiel-marke { align-self: flex-start; padding: .15rem .6rem; border: 1px solid var(--rahmen); border-radius: var(--r-pille); font-size: var(--text-sm); font-weight: 600; color: var(--grau); }
.schritt-rechnung dl { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; margin: 0; font-variant-numeric: tabular-nums; }
.schritt-rechnung dt { color: var(--grau); }
.schritt-rechnung dd { margin: 0; text-align: right; font-family: var(--font-mono); }
.schritt-rechnung dt:last-of-type, .schritt-rechnung dd:last-of-type { padding-top: .6rem; border-top: 1.5px solid var(--anthrazit); color: var(--anthrazit); font-weight: 600; align-self: end; }
.schritt-rechnung dd:last-of-type { font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1.1; }
/* Bei Bild oben wandert die Linie unter das Bild, an die Ziffer */
:root[data-ablauf="bilder"] .schritte li, :root[data-ablauf="zeichnung"] .schritte li { display: flex; flex-direction: column; border-top: 0; padding-top: 0; }
:root[data-ablauf="bilder"] .schritt-bild, :root[data-ablauf="zeichnung"] .schritt-bild { order: -1; }
:root[data-ablauf="bilder"] .schritte li::before, :root[data-ablauf="zeichnung"] .schritte li::before { border-top: 2px solid var(--anthrazit); padding-top: var(--s3); }
:root[data-ablauf="beleg"] .schritt-beleg { display: grid; gap: .2rem; 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); }
:root[data-ablauf="beleg"] .schritte li { display: flex; flex-direction: column; }
:root[data-ablauf="beleg"] .schritt-beleg { margin-top: auto; }
:root[data-ablauf="beleg"] .schritte li > p:not(.schritt-beleg) { margin-bottom: var(--s3); }