/* NANU Optik – Entwurf A „Im Laden“
   Türkise Wand, ruhige Linien, Tinte statt Schwarz. Schrift und Einstieg (Hero) setzt einstieg.css.
   Der Gleitsicht-Bereich ist derselbe Laden in Rot (html[data-raum="rot"]). */

:root {
  /* Laden (Türkis) */
  --wand: #0596a6;          /* Wandfarbe aus Logo und Laden – nur Flächen, Logo, große Schrift */
  --wand-tief: #04727e;     /* Knöpfe, Links, Akzenttext (5,7 : 1 auf Weiß) */
  --wand-schatten: #057f8c; /* Wand im Schatten: Fläche mit weißer Schrift (4,75 : 1) */
  --wand-hell: #e8f4f5;     /* helle Wand */
  --strich: #b9cccf;        /* ruhige Linie für Zeitleisten, Kapitel, Trenner */
  --strich-dunkel: #5f777b;
  --tinte: #0f3338;         /* tiefes Blaugrün statt Schwarz */
  --tinte-leise: #3d5a5e;
  --linie: #c9dcde;
  --feld: #6f8487;
  --weiss: #ffffff;
  --offen: #1f7a4a;
  --bald: #a15c00;
  --zu: #9e3a31;

  --akzent: var(--wand-tief);
  --akzent-hell: var(--wand-hell);
  --schrift: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --max: 78rem;
  --rand: clamp(1rem, 4vw, 3rem);
  --r-foto: 4px;            /* Fotos und Flächen: kleine, gleichmäßige Ecken */
  --r-tafel: 10px;
  --r-klein: 6px;
  --r-knopf: 14px;
  --kopf-h: 4rem;
  --kopf-hoch: calc(3.75rem + 1px);   /* Kopfleiste bis 75em, mit Linie: darunter klappt das Menü auf */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Kit an den Laden anpassen */
  --nanu-akzent: var(--akzent);
  --nanu-akzent-kontrast: #ffffff;
  --nanu-flaeche: #ffffff;
  --nanu-flaeche-2: var(--akzent-hell);
  --nanu-text: var(--tinte);
  --nanu-text-leise: var(--tinte-leise);
  --nanu-linie: var(--linie);
  --nanu-radius: var(--r-knopf);
  --nanu-schrift: var(--schrift);
  --nanu-fokus: var(--tinte);
  --nanu-feld-linie: var(--feld);
  --nanu-offen: var(--offen);
  --nanu-bald: var(--bald);
  --nanu-zu: var(--zu);
  --nanu-scroll-abstand: 4.75rem;   /* die Kopfleiste bleibt auch am Handy oben stehen */
  color-scheme: light;
}
@media (min-width: 47.5em) { :root { --nanu-scroll-abstand: 5rem; } }

/* Der rote Raum: Gleitsicht */
:root[data-raum="rot"] {
  --rot: #e30613;
  --rot-tief: #c4050f;
  --rot-hell: #fdf0ef;
  --akzent: var(--rot);
  --akzent-hell: var(--rot-hell);
  --tinte: #2b2b2b;
  --tinte-leise: #5c5c5c;
  --linie: #e4d6d4;
  --feld: #7d7471;
  --zu: #7a2a24;
  --strich: #dccbc8;
  --strich-dunkel: #7d7471;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) { html[data-weich] { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1.1875rem;
  line-height: 1.6;
  font-weight: 400;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--tinte); font-weight: 650; line-height: 1.15; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h1 { font-size: clamp(2.25rem, 1.4rem + 2.9vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.04; font-weight: 680; }
h2 { font-size: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem); letter-spacing: -0.022em; line-height: 1.1; }
h3 { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); letter-spacing: -0.012em; line-height: 1.25; font-weight: 620; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--akzent); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
:where(:root[data-raum="rot"]) a { color: var(--rot-tief); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--nanu-fokus); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button, a, summary, label { touch-action: manipulation; }
button { font: inherit; }

.huelle { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; }
[id] { scroll-margin-top: var(--nanu-scroll-abstand); }

.sprung {
  position: absolute; left: 1rem; top: -6rem; z-index: 60;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0.75rem 1.25rem;
  background: var(--tinte); color: #fff; border-radius: 10px; font-weight: 600; text-decoration: none;
}
.sprung:focus { top: 0.75rem; }

/* ---------- Knöpfe (eigene + Kit teilen eine Sprache) ---------- */
.knopf, .nanu-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.8rem 1.4rem;
  border: 2px solid var(--akzent); border-radius: var(--r-knopf);
  background: var(--akzent); color: #fff;
  font: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 140ms var(--ease-out);
}
.knopf:active, .nanu-knopf:active { transform: scale(0.97); }
.knopf--zweit, .nanu-knopf--zweit { background: #fff; color: var(--tinte); border-color: var(--feld); }
.knopf--gross { min-height: 56px; padding: 0.9rem 1.6rem; font-size: 1.125rem; }
.knopf--rot { --akzent: #e30613; background: #e30613; border-color: #e30613; }
.nanu-knopf--text { background: none; border-color: transparent; color: var(--tinte); padding: 0.5rem 0.25rem; min-height: 48px; text-decoration: underline; text-underline-offset: 0.2em; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover, .nanu-knopf:hover { background: color-mix(in srgb, var(--akzent) 84%, #000); border-color: color-mix(in srgb, var(--akzent) 84%, #000); }
  .knopf--zweit:hover, .nanu-knopf--zweit:hover { background: var(--akzent-hell); border-color: var(--akzent); }
  .nanu-knopf--text:hover { background: none; border-color: transparent; text-decoration-thickness: 2px; }
}
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Anruf-Knopf: am Handy „Anrufen“, am Desktop die Nummer (die jeweils andere Angabe hört nur der Screenreader) */
.knopf__nummer { font-variant-numeric: tabular-nums; }
@media not all and (min-width: 64em) { .knopf__nummer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (min-width: 64em) { .knopf__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto;
  display: flex; align-items: center; gap: 0.75rem; min-height: 3.75rem; padding-block: 0.375rem;
}
@media (min-width: 47.5em) { .kopf__innen { gap: 1.25rem; --kopf-luecke: 1.25rem; } }
@media (min-width: 75em) { .kopf__innen { gap: 1.75rem; } }
.kopf__marke { --marke-h: 2.125rem; display: flex; align-items: center; flex: none; min-height: 44px; padding: 4px 0; border-radius: 6px; }
/* Gleitsicht: dasselbe NANU in Rot, darunter die Zeile „gleitsichtbrille.wien“ (zwei Bilder, damit der Seitenwechsel
   das NANU stehen lassen und nur die Zeile ein- oder ausblenden kann, siehe uebergang.css) */
.kopf__marke--gs { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 2px; }
.kopf__nanu { width: auto; height: var(--marke-h); }
.kopf__zusatz { width: auto; height: calc(var(--marke-h) * 87 / 443.2); }
.kopf__status { display: none; align-items: center; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.3; color: var(--tinte-leise); white-space: nowrap; }
.kopf__status b { color: var(--tinte); font-weight: 600; }
.punkt {
  flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--zu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zu) 18%, transparent);
}
[data-zustand="offen"] > .punkt { background: var(--offen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--offen) 20%, transparent); }
[data-zustand="bald"] > .punkt { background: var(--bald); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bald) 20%, transparent); }
.kopf__luecke { flex: 1 1 0; min-width: 0; }
.kopf__nav { display: none; }
.kopf__nav ul { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.kopf__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem;
  color: var(--tinte); font-size: 1rem; font-weight: 500; text-decoration: none; border-radius: var(--r-klein); white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0.75rem calc(100% - 8px); background-size: 0 1.5px;
  transition: background-size 200ms var(--ease-out);
}
.kopf__nav a.ist-rot { color: #c4050f; }
@media (hover: hover) and (pointer: fine) { .kopf__nav a:hover { background-size: calc(100% - 1.5rem) 1.5px; } }
.kopf__tel {
  display: none; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.25rem;
  color: var(--tinte); font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}
:root[data-raum="rot"] .kopf__tel { color: var(--tinte); }
.kopf__tel .ico { color: var(--akzent); }
.kopf__termin { display: none; flex: none; min-height: 44px; padding: 0.45rem 1.1rem; font-size: 1rem; }
.kopf__zurueck {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0 0.6rem 0 0.2rem;
  font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: var(--r-klein);
}
:root[data-raum="rot"] .kopf__zurueck { color: var(--tinte); }
.kopf__zurueck .ico { color: var(--wand-tief); }
/* Telefon und Menü bis 75em: zwei ruhige Symbole rechts in der Leiste */
.kopf__anruf, .kopf__menue {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: var(--r-knopf);
  background: transparent; color: var(--tinte); cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: background-color 150ms ease;
}
.kopf__anruf { width: 2.75rem; justify-content: flex-end; padding-right: 0.25rem; margin-right: calc(-1 * var(--kopf-luecke, 0.75rem)); color: var(--tinte); }
.kopf__anruf .ico { width: 1.5rem; height: 1.5rem; }
.kopf__anruf:active, .kopf__menue:active { background: var(--akzent-hell); }
@media (hover: hover) and (pointer: fine) { .kopf__anruf:hover, .kopf__menue:hover { background: rgb(15 51 56 / 0.06); } }
.kopf__menue { width: 2.75rem; margin-right: -0.6875rem; }
/* drei Striche, offen ein Kreuz */
.kopf__menue-striche { position: relative; width: 22px; height: 2px; border-radius: 1px; background: currentColor; transition: background-color 120ms ease; }
.kopf__menue-striche::before,
.kopf__menue-striche::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform 240ms var(--ease-out);
}
.kopf__menue-striche::before { transform: translateY(-7px); }
.kopf__menue-striche::after { transform: translateY(7px); }
.kopf__menue[aria-expanded="true"] .kopf__menue-striche { background-color: transparent; }
.kopf__menue[aria-expanded="true"] .kopf__menue-striche::before { transform: rotate(45deg); }
.kopf__menue[aria-expanded="true"] .kopf__menue-striche::after { transform: rotate(-45deg); }
@media (max-width: 22.49em) { .kopf__innen { gap: 0.5rem; --kopf-luecke: 0.5rem; } .kopf__zurueck { padding-right: 0.2rem; } }
/* sehr schmal oder große Schrift (rem wächst mit der Lesehilfe): „‹ Startseite“ weicht, damit Telefon und Menü Platz haben.
   Zur Startseite führen weiter das Logo und der erste Menüpunkt. */
.kopf__innen { container: kopf / inline-size; }
@container kopf (max-width: 19.75rem) { .kopf__zurueck { display: none; } }

@media (min-width: 47.5em) {
  .kopf__status { display: flex; }
  .kopf__termin { display: inline-flex; }
}
@media (min-width: 47.5em) and (max-width: 74.99em) {
  .kopf__status [data-nanu-status-detail] { display: none; }
  .seite-gs .kopf__status { display: none; }
}
@media (min-width: 75em) {
  .kopf__innen { min-height: var(--kopf-h); }
  .kopf__nav { display: block; }
  .kopf__tel { display: inline-flex; }
  .kopf__menue, .kopf__anruf { display: none; }
  .kopf__marke { --marke-h: 2.375rem; }
}

/* ---------- Menü: kleines Fenster direkt am Menü-Knopf (Eldins Wahl, Runde 11b: Entwurf 1 „Kompakt“) ----------
   Karte rechts unter der Leiste, mit Spitze zu den drei Strichen; reicht nie von Rand zu Rand. Inhalt: Bereiche,
   Termin-Knopf, darunter klein der Live-Status. Dahinter dunkelt ein Schleier die Seite ab (Tippen schließt).
   Öffnen und Schließen per hidden (a.js). */
:root[data-menue-offen] .kopf { z-index: 50; }
.menue {
  position: absolute; z-index: 1; top: calc(100% + 0.625rem); right: max(var(--rand), (100% - var(--max)) / 2);
  width: min(17.5rem, 100% - 2 * var(--rand));
  background: #fff; color: var(--tinte); border: 1px solid var(--linie); border-radius: var(--r-tafel);
  box-shadow: 0 18px 40px -18px rgb(15 51 56 / 0.42), 0 2px 6px rgb(15 51 56 / 0.08);
  transform-origin: calc(100% - 1rem) 0;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), display 180ms allow-discrete;
}
.menue[hidden] { display: none; opacity: 0; transform: scale(0.96); }
@starting-style { .menue:not([hidden]) { opacity: 0; transform: scale(0.96); } }
/* Spitze zeigt auf die drei Striche */
.menue::before {
  content: ""; position: absolute; top: -6.5px; right: 6px; width: 12px; height: 12px;
  background: #fff; border-top: 1px solid var(--linie); border-left: 1px solid var(--linie);
  border-top-left-radius: 2px; transform: rotate(45deg);
}
.menue__innen {
  padding: 0.375rem 1.125rem 1.125rem;
  max-height: calc(100dvh - var(--kopf-hoch) - 1.5rem); overflow-y: auto; overscroll-behavior: contain;
}
.menue__liste { margin: 0; padding: 0; list-style: none; }
.menue__liste a {
  display: flex; align-items: center; min-height: 46px; padding: 0.35rem 0;
  border-bottom: 1px solid var(--linie); color: var(--tinte); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; text-decoration: none;
}
.menue__liste li:last-child a { border-bottom: 0; }
.menue__liste a.ist-rot { color: #c4050f; }
.menue__liste a:active { color: var(--akzent); }
@media (hover: hover) and (pointer: fine) { .menue__liste a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; } }
.menue__fuss { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.menue__termin { width: 100%; min-height: 48px; font-size: 1rem; }
.menue__status { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; line-height: 1.35; color: var(--tinte-leise); }
.menue__status b { color: var(--tinte); font-weight: 600; }
.menue__status .punkt { margin-top: 0.32em; }
.menue-schleier {
  position: fixed; inset: 0; z-index: 45; background: rgb(15 51 56 / 0.28);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 180ms var(--ease-out), display 180ms allow-discrete;
}
.menue-schleier[hidden] { display: none; opacity: 0; }
@starting-style { .menue-schleier:not([hidden]) { opacity: 0; } }
@media (min-width: 47.5em) {
  .menue { width: 19rem; }
  .menue__innen { padding: 0.375rem 1.25rem 1.25rem; }
}

/* ---------- Einstieg mit Fotos ----------
   Grundlage: Bilder liegen übereinander und blenden über. Anordnung und Aussehen legt einstieg.css fest. */
.einstieg { position: relative; display: grid; }
.schau {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: 66svh; width: 100%;
  background: var(--akzent-hell); touch-action: pan-y;
}
.schau__bild { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 900ms var(--ease-out); }
.schau__bild.ist-aktiv { opacity: 1; }
.schau__bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 40%); }

.schau__steuerung {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; padding-top: 0.75rem;
}
.schau__nr { color: var(--tinte-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.schau__knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 44px; min-height: 44px; padding: 0 0.6rem;
  border: 1.5px solid var(--feld); border-radius: var(--r-knopf); background: #fff; color: var(--tinte);
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.schau__knopf .ico { width: 1.2rem; height: 1.2rem; }
.schau__ico-start { display: none; fill: currentColor; }
[data-schau-angehalten] .schau__ico-start { display: block; }
[data-schau-angehalten] .schau__ico-pause { display: none; }
@media (hover: hover) and (pointer: fine) { .schau__knopf:hover { border-color: var(--tinte); } }

.einstieg__text { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; padding: 1.5rem 0 2.5rem; }
@media (max-width: 39.99em) { .einstieg .knopfreihe { display: grid; } }
.einstieg__lead { margin-top: 1rem; font-size: 1.25rem; line-height: 1.5; max-width: 34ch; color: var(--tinte); }
.einstieg .knopfreihe { margin-top: 1.75rem; }
.einstieg__status { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.45; color: var(--tinte-leise); }
.einstieg__status .punkt { align-self: center; }
.einstieg__status b { color: var(--tinte); font-weight: 600; }
.einstieg__adresse { margin-top: 0.35rem; color: var(--tinte-leise); font-size: 1.0625rem; line-height: 1.55; }
@media (min-width: 40em) and (max-width: 63.99em) { .schau { aspect-ratio: 3 / 2; max-height: 64svh; } }

/* ---------- Abschnitte ---------- */
.abschnitt-kopf { display: grid; gap: 1rem; max-width: 46rem; }
.abschnitt-kopf p { font-size: 1.1875rem; color: var(--tinte-leise); max-width: 62ch; }

/* ---------- Rundgang ---------- */
/* Foto und Text im Wechsel (Desktop: 12-Spalten-Raster, Foto 7 Spalten, Seiten wechseln). Bewegung „Fluss“ (Runde 17,
   Eldins Wahl): Jedes Foto kommt beim Scrollen schräg von unten und von der Seitenmitte herein, etwas kleiner, landet
   weich an seinem Platz, wenn es die Fenstermitte erreicht, und gleitet dann nach oben außen weiter – abwechselnd
   links und rechts, eine Schlangenlinie durch den Laden. Bewegt wird nur das Foto als Ganzes (transform); ohne
   scroll-gesteuerte Animation oder bei „Bewegung reduzieren“ steht es still an seinem Platz. */
.rundgang { padding: 3.5rem 0 4rem; overflow-x: clip; }
.rundgang__stationen { display: grid; gap: 3.5rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
/* --s: Richtung zur Seitenmitte (1 Foto links, -1 Foto rechts); --x: Seitenweg – am Handy kleiner, damit das Foto
   nie über den Bildschirmrand ragt */
.station { --s: 1; --x: 10%; display: grid; }
.station:nth-child(even) { --s: -1; }
.station__bild { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-foto); background: var(--wand-hell); }
.station__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.station__text { display: grid; gap: 0.75rem; justify-items: start; margin-top: 1.25rem; }
.station__nr { font-size: 0.9375rem; font-weight: 650; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--wand-tief); }
.station__text p { font-size: 1.125rem; }
.station__text .knopf { margin-top: 0.5rem; }
.station--gleitsicht :is(.station__nr, h3) { color: #c4050f; }

@media (min-width: 64em) {
  .rundgang { padding: 7rem 0 9rem; }
  .rundgang__stationen { gap: 7rem; margin-top: 4.5rem; }
  .station { --x: 16%; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: center; }
  .station__bild { grid-column: 1 / 8; grid-row: 1; }
  .station__text { grid-column: 9 / 13; grid-row: 1; margin: 0; gap: 0.9rem; }
  .station:nth-child(even) .station__bild { grid-column: 6 / 13; }
  .station:nth-child(even) .station__text { grid-column: 1 / 5; }
  .station__text p { font-size: 1.1875rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .station__bild { animation: station-fluss linear both; animation-timeline: view(); animation-range: cover; }
    /* Handy (Runde 19, Eldin): nur das Hereinfliegen – das Foto landet in der Fenstermitte und bleibt dann stehen,
       statt wieder hinauszugleiten. Scroll-gebunden: nach oben gescrollt fliegt es zurück und kommt beim nächsten
       Herunterscrollen wieder herein. */
    @media (max-width: 63.99em) {
      .station__bild { animation-name: station-rein; animation-range: cover 0% cover 50%; }
    }
  }
}
@keyframes station-fluss {
  0% { transform: translate(calc(var(--s) * var(--x)), 22%) scale(0.84); animation-timing-function: ease-out; }
  50% { transform: none; animation-timing-function: ease-in; }
  100% { transform: translate(calc(var(--s) * -8%), -14%) scale(0.92); }
}
@keyframes station-rein {
  0% { transform: translate(calc(var(--s) * var(--x)), 22%) scale(0.84); animation-timing-function: ease-out; }
  100% { transform: none; }
}

/* ---------- Außerdem (ruhige Liste) ---------- */
.auch { padding: 3.5rem 0 4.5rem; }
.auch__raster { display: grid; gap: 1.5rem; border-top: 1px solid var(--linie); padding-top: 2.5rem; }
.auch__liste { margin: 0; display: grid; }
.auch__liste > div { display: grid; gap: 0.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.auch__liste > div:first-child { padding-top: 0; }
.auch__liste dt { font-weight: 620; font-size: 1.25rem; letter-spacing: -0.01em; }
.auch__liste dd { margin: 0; color: var(--tinte-leise); font-size: 1.125rem; }
@media (min-width: 52em) {
  .auch { padding: 4rem 0 6.5rem; }
  .auch__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
  .auch__raster h2 { grid-column: 1 / 5; }
  .auch__liste { grid-column: 5 / 13; }
  .auch__liste > div { grid-template-columns: 13rem 1fr; column-gap: 2rem; padding: 1.25rem 0; }
  .auch__liste > div:first-child { padding-top: 0.35rem; }
  .auch__liste dd { font-size: 1.1875rem; }
}

/* ---------- Brillenwand (Marken): Laufband (Eldins Wahl, Runde 12b: Entwurf 4) ----------
   Helle Wand. Zwei Reihen Markennamen ziehen langsam gegeneinander durchs Bild, oben die sechs großen Marken groß;
   zwischen den Namen der Ball aus dem „A“ von NANU. Läuft von selbst, lässt sich wischen und ziehen (a.js → laufband(),
   ohne Skript per CSS-Animation), Knopf zum Anhalten. Handy linksbündig, Desktop mittig.
   Runde 16 (Eldins Wahl): kompakter – weniger Luft, Laufband etwas kleiner, Frage und Anhalte-Knopf in einer Zeile
   (.wand__fuss); am Handy ist der Knopf ein runder Symbol-Knopf, das Wort bleibt für Vorleseprogramme. */
.wand { background: var(--wand-hell); color: var(--tinte); padding: 3.25rem 0 3rem; overflow: hidden; }
.wand h2 { max-width: 18ch; color: var(--tinte); }
.wand__einleitung { margin-top: 0.6rem; max-width: 38ch; font-size: 1.0625rem; color: var(--tinte-leise); }
.lauf { display: grid; gap: 0.125rem; margin-top: 1.5rem; }
.lauf__reihe {
  overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.lauf__spur { display: flex; width: max-content; animation: lauf 70s linear infinite; }
.lauf__reihe--gross .lauf__spur { animation-duration: 48s; }
.lauf__reihe--zurueck .lauf__spur { animation-direction: reverse; }
@keyframes lauf { to { transform: translateX(-33.333%); } }
.wand[data-angehalten] .lauf__spur { animation-play-state: paused; }
/* mit Skript: a.js bewegt die Reihen selbst */
.wand[data-lauf-an] .lauf__spur { animation: none; will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .wand[data-lauf-an] .lauf__reihe { cursor: grab; }
  .wand[data-lauf-an] .lauf__reihe[data-zieht] { cursor: grabbing; }
}
.lauf__liste { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.lauf__liste li {
  --ball: 0.625rem;
  display: flex; align-items: center; white-space: nowrap;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-weight: 550; line-height: 1.3; color: var(--tinte-leise);
}
/* Trenner: der Ball aus dem „A“ des Logos */
.lauf__liste li::after {
  content: ""; flex: none; width: var(--ball); height: var(--ball); margin-inline: 0.85em;
  background: url(assets/marke/nanu-ball.svg) center / contain no-repeat;
}
.lauf__reihe--gross .lauf__liste li { --ball: 0.9375rem; font-size: clamp(2.125rem, 1.3rem + 3.4vw, 4.25rem); font-weight: 620; letter-spacing: -0.03em; line-height: 1.12; color: var(--tinte); }
.lauf__reihe--gross .lauf__liste li::after { margin-inline: 0.5em; }
.wand__fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.lauf__halt {
  display: none; flex: none; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem;
  border: 1px solid var(--linie); border-radius: 999px; background: #fff; color: var(--tinte);
  font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.wand[data-lauf-an] .lauf__halt { display: inline-flex; }
.lauf__halt .ico { width: 1rem; height: 1rem; }
.lauf__ico-start, .lauf__halt[aria-pressed="true"] .lauf__ico-pause { display: none; }
.lauf__halt[aria-pressed="true"] .lauf__ico-start { display: block; }
@media (hover: hover) and (pointer: fine) { .lauf__halt:hover { border-color: var(--tinte-leise); } }
.wand__frage { max-width: 36ch; font-size: 1.0625rem; color: var(--tinte-leise); }
.wand__frage a { color: var(--wand-tief); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; text-underline-offset: 0.2em; }
@media not all and (min-width: 64em) {
  .lauf__halt { justify-content: center; width: 48px; min-height: 48px; padding: 0; }
  .lauf__halt .ico { width: 1.125rem; height: 1.125rem; }
  .lauf__halt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 64em) {
  .wand { padding: 4.5rem 0 4.25rem; text-align: center; }
  .wand h2 { max-width: none; }
  .wand__einleitung { max-width: none; margin-top: 0.75rem; font-size: 1.1875rem; }
  .wand :is(h2, .wand__einleitung) { margin-inline: auto; }
  .lauf { gap: 0.375rem; margin-top: 2.25rem; }
  .wand__fuss { justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
  .lauf__liste li { --ball: 0.6875rem; }
  /* Desktop: Ball im Verhältnis zur großen Schrift kleiner */
  .lauf__reihe--gross .lauf__liste li { --ball: 1.125rem; }
  .wand__frage { max-width: none; font-size: 1.1875rem; }
}
/* weniger Bewegung: nichts läuft, Kopien weg, Namen umbrechend */
@media (prefers-reduced-motion: reduce) {
  .lauf { gap: 1.25rem; }
  .lauf__spur { width: auto; animation: none; }
  .lauf__reihe { -webkit-mask-image: none; mask-image: none; }
  .lauf__liste { flex-wrap: wrap; max-width: 60rem; padding-inline: var(--rand); }
  .lauf__liste[aria-hidden] { display: none; }
  .lauf__liste li:last-child::after { display: none; }
  .wand .lauf__halt { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 64em) {
  .lauf__liste { justify-content: center; margin-inline: auto; }
}

/* ---------- Der Meister ---------- */
.meister { padding: 4.5rem 0 4.5rem; }
.meister__raster { display: grid; gap: 2rem; }
.meister__bild { margin: 0; }
.meister__bild img { width: 100%; max-width: 28rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-foto); }
.meister__text { display: grid; gap: 1.1rem; align-content: start; max-width: 40rem; }
.meister__text h2 { margin-bottom: 0.25rem; }
.zitat { margin: 1rem 0 0; padding: 0; }
.zitat p { font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); line-height: 1.32; font-weight: 500; letter-spacing: -0.015em; color: var(--tinte); }
@media (min-width: 52em) { .zitat p { text-indent: -0.42em; } }
.zitat footer { margin-top: 0.75rem; font-size: 1.0625rem; color: var(--tinte-leise); }
.zitat footer::before { content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: 0.6rem; vertical-align: middle; background: var(--strich-dunkel); }
.chronik__titel { margin-top: 4rem; }
.chronik { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0; }
.chronik li { position: relative; display: grid; gap: 0.15rem; padding: 0 0 1.75rem 2rem; }
.chronik li::before { content: ""; position: absolute; left: 5.5px; top: 0.6rem; bottom: -0.6rem; width: 2px; background: var(--strich); border-radius: 2px; }
.chronik li:last-child::before { display: none; }
.chronik li::after { content: ""; position: absolute; left: 0; top: 0.4rem; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--wand-tief); }
.chronik__jahr { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; color: var(--wand-tief); font-variant-numeric: tabular-nums; }
.chronik__datum { font-size: 1rem; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.chronik b { margin-top: 0.35rem; font-weight: 620; font-size: 1.1875rem; }
.chronik__text { font-size: 1.0625rem; color: var(--tinte-leise); max-width: 34ch; }
@media (min-width: 52em) {
  .meister { padding: 7rem 0 6.5rem; }
  .meister__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: center; }
  .meister__bild { grid-column: 1 / 6; }
  .meister__text { grid-column: 7 / 13; }
}
@media (min-width: 64em) {
  .chronik__titel { margin-top: 6rem; }
  .chronik { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1.5rem; margin-top: 2.25rem; }
  .chronik li { padding: 2.25rem 0 0; align-content: start; }
  .chronik li::before { left: 0; right: -1.5rem; top: 5.5px; bottom: auto; width: auto; height: 2px; }
  .chronik li:last-child::before { display: block; right: 0; }
  .chronik li::after { top: 0; left: 0; }
}

/* ---------- Welche Form passt zu mir? (Fassungsberater aus Entwurf B, im Stil von A) ---------- */
.formwahl { padding: 4.5rem 0; }
.formwahl .abschnitt-kopf { margin-bottom: 2rem; }
.tafel { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-tafel); padding: clamp(1.25rem, 3.5vw, 2.75rem); }
.berater { display: grid; gap: 2rem; }
.berater__links, .berater__rechts { display: grid; gap: 1.75rem; align-content: start; min-width: 0; }
.berater__gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.berater__legende { padding: 0; margin: 0 0 0.75rem; font-weight: 600; font-size: 1.1875rem; }
.berater__wahlen { display: grid; gap: 0.625rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.berater__wahlen--stil { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 40em) { .berater__wahlen--gesicht { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.berater__wahl.nanu-wahl { justify-items: center; text-align: center; padding: 0.875rem 0.625rem 1rem; gap: 0.25rem; align-content: start; }
.berater__wahl.nanu-wahl::after { top: 0.75rem; right: 0.75rem; margin-top: 0; }
.berater__wahlen--stil .berater__wahl.nanu-wahl { justify-items: start; text-align: left; padding: 0.875rem 2.75rem 0.875rem 1rem; align-content: center; }
.berater__wahlen--stil .berater__wahl.nanu-wahl::after { top: 50%; margin-top: -0.625rem; }
.berater__gesicht { width: 3.25rem; height: 3.75rem; margin-bottom: 0.25rem; fill: #fff; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; color: var(--tinte-leise); }
.berater__wahl:has(> input:checked) .berater__gesicht { color: var(--akzent); }
.berater__ergebnis { display: grid; gap: 1.25rem; }
.berater__ergebnis[hidden] { display: none; }
.berater__ergebnis:focus { outline: none; }
.berater__titel { font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); }
.berater__formen { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; }
.berater__form {
  display: grid; grid-template-columns: clamp(7rem, 30%, 9.5rem) minmax(0, 1fr); gap: 0.2rem 1.25rem; align-items: center;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--linie);
}
.berater__form:last-child { padding-bottom: 0; border-bottom: 0; }
.berater__brille { grid-row: span 2; width: 100%; height: auto; overflow: visible; align-self: center; }
.berater__name, .berater__grund { grid-column: 2; margin: 0; }
.berater__name { align-self: end; font-size: 1.1875rem; font-weight: 650; line-height: 1.2; }
.berater__grund { align-self: start; font-size: 1.0625rem; line-height: 1.5; color: var(--tinte-leise); hyphens: auto; }
/* wenig Platz (schmales Handy, große Schrift): Zeichnung über dem Text statt daneben */
.berater__formen { container-type: inline-size; }
@container (max-width: 17rem) {
  .berater__form { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .berater__brille { grid-row: auto; width: 7.5rem; margin-bottom: 0.4rem; }
  .berater__name, .berater__grund { grid-column: 1; }
}
.berater__tipp { font-size: 1.0625rem; color: var(--tinte-leise); }
.berater__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.berater__fuss p { font-size: 1.0625rem; color: var(--tinte-leise); max-width: 26em; }
.berater__leer { padding: 1rem 1.25rem; border-radius: var(--r-klein); background: var(--akzent-hell); font-size: 1.0625rem; }
.berater__leer[hidden] { display: none; }
.brille__glas { fill: var(--akzent-hell); }
.brille__rahmen { fill: none; stroke: var(--tinte); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.brille__rahmen.brille__dick { stroke-width: 10; }
.brille__rahmen.brille__duenn { stroke-width: 2.5; }
@keyframes berater-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.berater__ergebnis.is-neu .berater__form { animation: berater-ein 320ms var(--ease-out) backwards; }
.berater__ergebnis.is-neu .berater__form:nth-child(2) { animation-delay: 50ms; }
.berater__ergebnis.is-neu .berater__form:nth-child(3) { animation-delay: 100ms; }
@media (max-width: 63.99em) { .berater__ergebnis { padding-top: 1.75rem; border-top: 1px solid var(--linie); } }
@media (min-width: 64em) {
  .formwahl { padding: 7rem 0 6rem; }
  .berater { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; }
  .berater__rechts { padding-left: 3rem; border-left: 1px solid var(--linie); }
}
@media (min-width: 64em) and (max-width: 74em) { .berater__wahlen--stil { grid-template-columns: 1fr; } }
/* Handy: Auswahl kompakt, damit die drei Formen gleich darunter im Bild sind. Die Kurztexte der Karten
   lesen Screenreader weiter in der Karte; fürs Auge steht der Text der gewählten Gesichtsform unter den Karten. */
.berater__links { container-type: inline-size; }
.berater__wahl-text { display: none; }
@media (max-width: 39.99em) {
  .berater__links { gap: 1.5rem; }
  .berater__legende { margin-bottom: 0.625rem; }
  .berater__wahlen { gap: 0.5rem; }
  .berater__wahlen .nanu-wahl__text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .berater__wahl.nanu-wahl { padding: 0.75rem 0.5rem 0.875rem; gap: 0.125rem; }
  .berater__gesicht { width: 2.75rem; height: 3.125rem; }
  .berater__wahl-text:not([hidden]) { display: block; margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--tinte-leise); }
  .berater__wahl-text b { color: var(--tinte); font-weight: 600; }
  /* Stil: drei Felder nebeneinander, das gewählte gefüllt (wie die Glasarten im Simulator) */
  .berater__wahlen--stil { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
  .berater__wahlen--stil .berater__wahl.nanu-wahl { min-height: 3rem; padding: 0.625rem 0.375rem; justify-items: center; text-align: center; }
  .berater__wahlen--stil .berater__wahl.nanu-wahl::after { display: none; }
  .berater__wahlen--stil .berater__wahl:has(> input:checked) { background: var(--akzent); border-color: var(--akzent); box-shadow: none; color: #fff; }
}
/* schmales Handy oder große Schrift: Stil-Felder untereinander, Zeichen und Wahlkreis rücken auseinander */
@container (max-width: 17.5rem) {
  .berater__wahlen--stil { grid-template-columns: 1fr; }
  .berater__wahlen--gesicht .berater__gesicht { width: 2.5rem; height: 2.875rem; }
  .berater__wahlen--gesicht .berater__wahl.nanu-wahl::after { top: 0.5rem; right: 0.5rem; }
}

/* ---------- Galerie ---------- */
.bilder { padding: 4rem 0 4.5rem; background: var(--wand-hell); }
.bilder h2 { margin-bottom: 1.75rem; }
.bilder__raster.nanu-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.bilder__raster .nanu-galerie__link { border-radius: var(--r-klein); background: #fff; }
.bilder__raster .nanu-galerie__link:first-child { grid-column: 1 / -1; border-radius: var(--r-foto); }
.bilder__raster .nanu-galerie__link:last-child .nanu-galerie__bild { object-position: 50% 70%; }
@media (max-width: 51.99em) { .bilder__raster .nanu-galerie__link:last-child { grid-column: 1 / -1; } .bilder__raster .nanu-galerie__link:last-child .nanu-galerie__bild { aspect-ratio: 16 / 9; } }
.nanu-galerie__bild { aspect-ratio: 4 / 3; }
@media (min-width: 52em) {
  .bilder { padding: 6rem 0; }
  .bilder__raster.nanu-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .bilder__raster .nanu-galerie__link:first-child { grid-column: 1 / 3; grid-row: 1 / 3; border-radius: var(--r-foto); }
  .bilder__raster .nanu-galerie__link:first-child .nanu-galerie__bild { aspect-ratio: auto; height: 100%; }
}
.nanu-lightbox__text { font-size: 1.0625rem; }

/* ---------- Besuch ---------- */
.besuch { padding: 4.5rem 0 4.5rem; }
.besuch__raster { display: grid; gap: 3rem; }
.besuch__info { display: grid; gap: 1.25rem; align-content: start; }
.besuch__adresse { font-style: normal; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem); line-height: 1.45; font-weight: 500; }
.besuch__kontakt { display: grid; gap: 0.25rem; justify-items: start; }
.besuch__tel {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 52px;
  font-size: 1.625rem; font-weight: 650; letter-spacing: -0.015em; color: var(--tinte); text-decoration: none; font-variant-numeric: tabular-nums;
}
.besuch__tel .ico { color: var(--akzent); width: 1.1em; height: 1.1em; }
.besuch__mail { display: inline-flex; align-items: center; min-height: 48px; font-size: 1.125rem; overflow-wrap: anywhere; }
.besuch__zeiten-titel { margin-top: 1rem; }
.besuch__fragen { margin: 2rem 0 0; display: grid; gap: 1.25rem; }
.besuch__fragen dt { font-weight: 620; font-size: 1.1875rem; }
.besuch__fragen dd { margin: 0.25rem 0 0; color: var(--tinte-leise); font-size: 1.125rem; max-width: 52ch; }
@media (min-width: 64em) {
  .besuch { padding: 7rem 0; }
  .besuch__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
  .besuch__info { grid-column: 1 / 6; }
  .besuch__ort { grid-column: 7 / 13; }
}

/* Wochenplan (Kit) */
.nanu-wp__zeile { padding: 0.7rem 0.75rem; font-size: 1.125rem; }
.nanu-wp__zeile:where(.is-heute) { box-shadow: none; background: var(--akzent-hell); border-radius: 10px; }
.nanu-wp__heute { font-size: 0.9375rem; padding: 0.1rem 0.55rem; }
.nanu-wp__hinweis { font-size: 1.0625rem; }
.nanu-wp__anlass { font-size: 1rem; }

/* Karte (Kit) */
.nanu-karte__flaeche { border-radius: var(--r-foto); border-color: var(--linie); background: var(--wand-hell); }
.nanu-karte__skizze { color: #fff; }
.nanu-karte__inhalt { box-shadow: 0 10px 30px -14px rgb(15 51 56 / 0.4); border-radius: 12px; }
.nanu-karte__adresse { font-size: 1.0625rem; }
.nanu-karte__parken { font-size: 1.0625rem; }
.nanu-karte__hinweis { font-size: 1.0625rem; line-height: 1.45; }
.nanu-karte__gross { min-height: 48px; }
@media (max-width: 29.99em) { .nanu-karte__inhalt { padding: 1rem; } .nanu-karte__laden { padding-inline: 0.9rem; font-size: 1rem; } }
@media (min-width: 64em) { .nanu-karte__flaeche { border-radius: var(--r-foto); } }

/* ---------- Termin ---------- */
.termin { padding: 4.5rem 0 5rem; background: var(--akzent-hell); }
.termin__raster { display: grid; gap: 2rem; }
.termin__einleitung { display: grid; gap: 1rem; align-content: start; max-width: 34rem; }
.termin__einleitung p { font-size: 1.1875rem; }
.termin__einleitung a { font-weight: 600; white-space: nowrap; }
.termin__assistent { background: #fff; border-radius: var(--r-tafel); padding: 1.25rem; box-shadow: 0 1px 2px rgb(15 51 56 / 0.06); scroll-margin-top: var(--nanu-scroll-abstand); }
@media (min-width: 64em) {
  .termin { padding: 7rem 0; }
  .termin__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
  .termin__einleitung { grid-column: 1 / 5; position: sticky; top: 8rem; }
  .termin__assistent { grid-column: 5 / 13; padding: 2.25rem 2.5rem 2.5rem; }
}

/* Termin-Assistent (Kit) – an die Ladensprache angepasst */
.nanu-termin { gap: 1.5rem; }
.nanu-termin__punkt-knopf { font-size: 1rem; min-height: 48px; }
.nanu-termin__nr { width: 2rem; height: 2rem; font-size: 0.9375rem; }
.nanu-termin__balken { height: 4px; }
.nanu-termin__auswahl { font-size: 1.0625rem; }
.nanu-termin__titel { font-size: 1.5rem; letter-spacing: -0.012em; }
.nanu-wahl { min-height: 56px; border-width: 1.5px; padding: 1rem 3rem 1rem 1.1rem; }
.nanu-wahl:where(:has(> input:checked)) { border-color: var(--akzent); background: var(--akzent-hell); box-shadow: inset 0 0 0 1px var(--akzent); }
.nanu-wahl__titel { font-size: 1.125rem; }
.nanu-wahl__text { font-size: 1rem; line-height: 1.45; }
.nanu-wahl--klein { min-height: 48px; padding: 0.6rem 2.6rem 0.6rem 0.9rem; }
.nanu-termin__mitbringen { border-radius: 12px; }
.nanu-termin__mitbringen-liste li { font-size: 1.0625rem; }
.nanu-tag { min-height: 5.25rem; flex-basis: 4.75rem; }
.nanu-tag__wt { font-size: 0.9375rem; }
.nanu-tag__mo { font-size: 0.875rem; }
.nanu-slot { min-height: 52px; font-size: 1.0625rem; }
.nanu-termin__tageszeit-titel { font-size: 1rem; }
.nanu-termin__notiz, .nanu-termin__pflichthinweis, .nanu-termin__leer { font-size: 1.0625rem; }
.nanu-feld__label { font-size: 1.0625rem; }
.nanu-feld__hinweis { font-size: 1rem; }
.nanu-feld__eingabe { min-height: 52px; font-size: max(1.0625rem, 16px); }
.nanu-fehler { font-size: 1.0625rem; }
.nanu-haken { min-height: 48px; font-size: 1.0625rem; }
.nanu-termin__lead { font-size: 1.125rem; }
.nanu-termin__zusammenfassung { font-size: 1.0625rem; }
.nanu-termin__blaettern { width: 48px; height: 48px; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--tinte); color: #fff; padding: 3.5rem 0 2.5rem; }
.fuss__raster { display: grid; gap: 2rem; }
.fuss__marke img { width: 8.5rem; height: auto; }
.fuss p { margin-top: 0.75rem; font-size: 1.0625rem; line-height: 1.6; color: rgb(255 255 255 / 0.88); }
.fuss__titel { font-size: 1.125rem; font-weight: 620; color: #fff; letter-spacing: 0; }
.fuss__liste { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.fuss__liste a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: 1.0625rem; overflow-wrap: anywhere; }
.fuss a:focus-visible, .fuss button:focus-visible { outline-color: #fff; }
.fuss__lesehilfe { margin-top: 1rem; }
.fuss {
  --nanu-flaeche: transparent; --nanu-text: #fff; --nanu-feld-linie: rgb(255 255 255 / 0.7);
  --nanu-akzent: #fff; --nanu-akzent-kontrast: var(--tinte); --nanu-fokus: #fff;
}
.nanu-lesehilfe { min-height: 48px; font-size: 1rem; }
@media (min-width: 52em) {
  .fuss { padding: 4.5rem 0 3.5rem; }
  .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; column-gap: 2.5rem; }
}

/* ---------- Handy-Leiste ---------- */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 18px -12px rgb(15 51 56 / 0.35);
}
.leiste a {
  display: grid; justify-items: center; align-content: center; gap: 0.15rem; min-height: 56px;
  color: var(--tinte); font-size: 0.9375rem; font-weight: 600; text-decoration: none; border-radius: 12px;
  user-select: none; -webkit-user-select: none;
  transition: background-color 120ms ease, transform 120ms var(--ease-out);
}
.leiste a:active { background: var(--akzent-hell); transform: scale(0.97); }
.leiste .ico { width: 1.5rem; height: 1.5rem; color: var(--akzent); }
.leiste a:nth-child(2) { background: var(--akzent); color: #fff; margin-inline: 0.25rem; }
.leiste a:nth-child(2) .ico { color: #fff; }
body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 47.5em) {
  .leiste { display: none; }
  body { padding-bottom: 0; }
}

/* ================= Gleitsicht-Bereich ================= */
/* Garantie-Hinweis im Einstieg (Eldins Wahl, Runde 12c): kleines Schild über den Knöpfen, führt zu #garantie.
   Maße in em, damit das Schild am Handy als Ganzes kleiner werden kann und in eine Zeile passt (einstieg.css). */
.garantie-hinweis {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0.35em 0.85em 0.35em 0.55em;
  border: 1px solid rgb(196 5 15 / 0.28); border-radius: 999px; background: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -10px rgb(43 43 43 / 0.45);
  color: var(--tinte); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.garantie-hinweis b { color: var(--rot-tief); font-weight: 700; }
.garantie-hinweis__schild { flex: none; width: 1.5em; height: 1.5em; fill: var(--rot-hell); stroke: var(--rot-tief); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.garantie-hinweis__schild path + path { fill: none; stroke-width: 2; }
.garantie-hinweis .ico { flex: none; width: 1em; height: 1em; color: var(--rot-tief); }
@media (hover: hover) and (pointer: fine) {
  .garantie-hinweis:hover span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
}
.einstieg--gs .knopfreihe { margin-top: 1.5rem; }

/* Ratgeber mit Kapiteln */
:root[data-raum="rot"] { --nanu-scroll-abstand: 8rem; }
.ratgeber { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; }
.kapitel {
  position: sticky; top: var(--kopf-hoch); z-index: 20; margin-inline: calc(-1 * var(--rand));
  background: #fff; border-bottom: 1px solid var(--linie); box-shadow: 0 6px 14px -12px rgb(43 43 43 / 0.35);
}
.kapitel__liste {
  display: flex; gap: 0.25rem; margin: 0; padding: 0.45rem var(--rand); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.kapitel__liste::-webkit-scrollbar { display: none; }
.kapitel__liste a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.95rem;
  border: 1.5px solid transparent; border-radius: var(--r-knopf); white-space: nowrap;
  color: var(--tinte); font-size: 1rem; font-weight: 500; text-decoration: none;
}
.kapitel__liste a[aria-current="true"] { border-color: var(--akzent); background: var(--akzent-hell); font-weight: 600; }
@media (min-width: 64em) {
  :root[data-raum="rot"] { --nanu-scroll-abstand: 5.5rem; }
  .ratgeber { display: grid; grid-template-columns: 14rem minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); }
  .kapitel { top: 6rem; align-self: start; margin: 5.5rem 0 0; background: none; border: 0; box-shadow: none; }
  .kapitel__liste { flex-direction: column; gap: 0; padding: 0; overflow: visible; border-left: 1px solid var(--linie); }
  .kapitel__liste a {
    display: flex; min-height: 44px; padding: 0.3rem 0 0.3rem 1.1rem; margin-left: -1px;
    border: 0; border-left: 2px solid transparent; border-radius: 0; white-space: normal;
    font-size: 1.0625rem; line-height: 1.3; color: var(--tinte-leise);
  }
  .kapitel__liste a[aria-current="true"] { background: none; border-left-color: var(--akzent); color: var(--tinte); }
}
@media (hover: hover) and (pointer: fine) { .kapitel__liste a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 0.2em; } }

.kapitel-abschnitt { padding: 3.25rem 0 3.5rem; border-top: 1px solid var(--linie); }
.kapitel-abschnitt:first-child { border-top: 0; }
.kapitel-abschnitt > h2 { margin-bottom: 1.25rem; max-width: 22ch; }
.unterkopf { margin: 3rem 0 1.25rem; }
.fliesstext { display: grid; gap: 1rem; max-width: 64ch; }
.fliesstext p { font-size: 1.1875rem; }
@media (min-width: 64em) { .kapitel-abschnitt { padding: 5.5rem 0 5rem; } }

/* Selbst-Check */
.selbstcheck-tafel { margin-top: 2.25rem; padding: 1.5rem 1.25rem 1.75rem; border-radius: var(--r-tafel); background: var(--akzent-hell); max-width: 48rem; }
.selbstcheck-tafel > h3 { margin-bottom: 1.25rem; }
.nanu-check__titel { font-size: 1.375rem; }
.nanu-check__zaehler { font-size: 1rem; color: var(--tinte-leise); }
.nanu-check__hilfe { font-size: 1.0625rem; }
.nanu-check__marke { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; color: var(--tinte-leise); }
.nanu-check__ergebnis { background: #fff; border-radius: 14px; }
.nanu-check__text { font-size: 1.125rem; }
.nanu-check__hinweis { font-size: 1.0625rem; }
@media (min-width: 64em) { .selbstcheck-tafel { padding: 2rem 2.25rem 2.25rem; } }

/* Probe am Beratungstisch (Simulator) */
.anleitung { counter-reset: schritt; display: grid; gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; max-width: 64ch; }
.anleitung li { counter-increment: schritt; position: relative; padding-left: 2.6rem; font-size: 1.125rem; }
.anleitung li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0.05em; display: grid; place-items: center;
  width: 1.85rem; height: 1.85rem; border-radius: 50%; border: 2px solid var(--akzent); color: var(--akzent);
  font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.beratungstisch { margin-top: 1.75rem; padding: 0.75rem; border-radius: var(--r-tafel); background: var(--akzent-hell); }
.nanu-sim { gap: 1.1rem; }
.nanu-sim__buehne { border-radius: var(--r-foto); box-shadow: 0 1px 2px rgb(43 43 43 / 0.12); }
.nanu-sim__steuerung { padding: 0 0.25rem; }
.nanu-sim__legende { font-size: 1.0625rem; }
.nanu-sim__glas { background: #fff; min-height: 56px; }
.nanu-sim__glas:where(:has(> input:checked)) { background: var(--akzent); }
.nanu-sim__glas-name { font-size: 1.0625rem; }
.nanu-sim__glas-kurz { font-size: 1rem; }
/* gewähltes Glas: Kurztext ohne Abblenden, sonst nur 3,8 : 1 auf Rot (mit voller Deckkraft 4,9 : 1) */
.nanu-sim__glas:where(:has(> input:checked)) > .nanu-sim__glas-kurz { opacity: 1; }
.nanu-sim__sprung-titel { font-size: 1rem; }
.nanu-sim__sprung-knopf, .nanu-sim__zonen-knopf { min-height: 48px; font-size: 1rem; background: #fff; }
.nanu-sim__zonen-knopf:where([aria-pressed="true"]) { background: #fff; }
.nanu-sim__hilfe { font-size: 1.0625rem; padding: 0 0.25rem 0.25rem; }
.nanu-sim__laden { font-size: 0.9375rem; }
/* Handy: Bild bündig oben in der Tafel (größer), Bedienung darunter mit Rand */
@media (max-width: 39.99em) {
  .beratungstisch { padding: 0 0.75rem 0.75rem; }
  .beratungstisch .nanu-sim__buehne { margin-inline: -0.75rem; border-radius: var(--r-tafel) var(--r-tafel) 0 0; box-shadow: none; }
  .nanu-sim__steuerung, .nanu-sim__hilfe { padding-inline: 0; }
  .nanu-sim__sprung-titel { font-size: 1.0625rem; }
}
@media (min-width: 64em) { .anleitung { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: none; } .beratungstisch { padding: 1.25rem; } }
.zonen { display: grid; gap: 1.25rem; margin: 2rem 0 0; }
.zonen__zone { padding-top: 0.85rem; border-top: 4px solid; }
.zonen__zone--fern { border-color: rgb(63 123 217); }
.zonen__zone--zwischen { border-color: rgb(47 158 110); }
.zonen__zone--nah { border-color: rgb(224 154 42); }
.zonen dt { font-weight: 620; font-size: 1.1875rem; }
.zonen dd { margin: 0.25rem 0 0; color: var(--tinte-leise); font-size: 1.0625rem; }
@media (min-width: 52em) { .zonen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

/* Qualität */
.kriterien { display: grid; margin: 1.75rem 0 0; }
.kriterien > div { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.kriterien dt { font-weight: 620; font-size: 1.1875rem; }
.kriterien dd { margin: 0.3rem 0 0; color: var(--tinte-leise); font-size: 1.125rem; max-width: 58ch; }
@media (min-width: 52em) {
  .kriterien { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .kriterien > div { padding: 1.35rem 0; }
}
.vergleiche { display: grid; gap: 2rem; }
.vergleich-bild { margin: 0; }
.vergleich-bild .nanu-vergleich__buehne { border-radius: var(--r-foto); }
.vergleich-bild figcaption { margin-top: 0.85rem; font-size: 1.0625rem; color: var(--tinte-leise); max-width: 52ch; }
.vergleich-bild figcaption b { color: var(--tinte); font-weight: 620; }
.nanu-vergleich__label { font-size: 0.9375rem; }
@media (min-width: 52em) { .vergleiche { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stufen { display: grid; gap: 2rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.stufe { display: grid; gap: 0.6rem; align-content: start; }
.stufe__glas { width: 100%; max-width: 13rem; height: auto; margin-bottom: 0.5rem; }
.stufe__rand { fill: #efc9c6; }
.stufe__klar { fill: #fff; }
.stufe__fassung { fill: none; stroke: var(--tinte); stroke-width: 4; }
.stufe h4 { font-size: 1.25rem; font-weight: 620; letter-spacing: -0.01em; }
.stufe p { font-size: 1.0625rem; color: var(--tinte-leise); }
.stufen__legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; font-size: 1rem; color: var(--tinte-leise); }
.stufen__legende span { display: inline-flex; align-items: center; gap: 0.5rem; }
.stufen__legende i { width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 2px solid var(--tinte); background: #fff; }
.stufen__legende i.ist-rand { background: #efc9c6; }
.preis-hinweis { margin-top: 1.75rem; max-width: 60ch; font-size: 1.1875rem; font-weight: 500; color: var(--tinte); }
@media (min-width: 52em) { .stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }

.glas-extra { display: grid; gap: 2rem; margin-top: 3rem; }
.glas-extra__bild { margin: 0; }
.glas-extra__bild img { width: 100%; max-width: 30rem; }
.glas-extra__bild figcaption { margin-top: 0.5rem; font-size: 1rem; color: var(--tinte-leise); }
.glas-extra__text h4 { font-size: 1.25rem; font-weight: 620; margin-bottom: 0.75rem; }
@media (min-width: 64em) { .glas-extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3rem; } }

/* Listen mit Zeichen */
.haken-liste, .punkt-liste, .minus-liste { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.haken-liste li, .punkt-liste li, .minus-liste li { position: relative; padding-left: 2rem; font-size: 1.125rem; }
.haken-liste li::before {
  content: ""; position: absolute; left: 0.3rem; top: 0.28em; width: 0.5rem; height: 0.95rem;
  border: solid var(--akzent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.punkt-liste li::before { content: ""; position: absolute; left: 0.35rem; top: 0.55em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--akzent); }
.minus-liste li::before { content: ""; position: absolute; left: 0.2rem; top: 0.78em; width: 0.9rem; height: 2.5px; border-radius: 2px; background: var(--tinte-leise); }

/* Ablauf */
.ablauf { display: grid; gap: 2rem; }
.ablauf > h2 { margin-bottom: -0.75rem; }   /* Abstand zur Liste wie bei den anderen Kapiteln (1,25rem), trotz gap */
.schritte { counter-reset: schritt; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.schritte li { counter-increment: schritt; position: relative; padding: 0 0 1.75rem 3.5rem; }
.schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; border: 2.5px solid var(--akzent); color: var(--akzent);
  font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums;
}
.schritte li::after { content: ""; position: absolute; left: calc(1.2rem - 1.5px); top: 2.4rem; bottom: 0; width: 3px; background: var(--strich); }
.schritte li:last-child { padding-bottom: 0; }
.schritte li:last-child::after { display: none; }
.schritte h3 { font-size: 1.25rem; padding-top: 0.35rem; }
.schritte p { margin-top: 0.35rem; font-size: 1.125rem; color: var(--tinte-leise); max-width: 52ch; }
.ablauf__bild { margin: 0; }
.ablauf__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 50%; border-radius: var(--r-foto); }
@media (max-width: 63.99em) { .ablauf__bild img { aspect-ratio: 3 / 2; max-width: 34rem; border-radius: var(--r-foto); } }
@media (min-width: 64em) {
  .ablauf { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 3.5rem; row-gap: 0; align-items: start; }
  .ablauf > h2 { grid-area: 1 / 1; margin-bottom: 1.25rem; }
  .ablauf > .schritte { grid-area: 2 / 1; }
  .ablauf__bild { grid-area: 1 / 2 / 3 / 3; position: sticky; top: 8rem; margin-top: 0.35rem; }
}

/* Fotos in Eingewöhnung, Garantie, Vor- und Nachteile: am Handy gleich unter der Überschrift,
   am Desktop neben dem Text (.text-mit-bild) oder als breites Band über dem Inhalt (--band) */
.abschnitt-bild { margin: 0 0 1.75rem; }
.abschnitt-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-foto); }
.abschnitt-bild--breit img { aspect-ratio: 2 / 1; }
.text-mit-bild { display: grid; }
@media (max-width: 63.99em) { .text-mit-bild__bild img { max-width: 34rem; } }
@media (min-width: 52em) {
  .abschnitt-bild--band { margin-bottom: 2rem; }
  .abschnitt-bild--band img { aspect-ratio: 21 / 9; object-position: 50% 42%; }
  .abschnitt-bild--breit img { aspect-ratio: 5 / 2; object-position: 50% 20%; }
  .abschnitt-bild--oben img { object-position: 50% 0%; }   /* Gesicht am oberen Bildrand */
}
/* Bild neben Überschrift und Text (Runde 15b): die Überschrift steht im Raster, das Bild reicht über beide Zeilen */
.text-mit-bild > h2, .ablauf > h2 { margin-bottom: 1.25rem; max-width: 22ch; }
@media (min-width: 64em) {
  .text-mit-bild { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 3.5rem; align-items: start; }
  .text-mit-bild > h2 { grid-area: 1 / 1; }
  .text-mit-bild__bild { grid-area: 1 / 2 / 3 / 3; margin: 0.35rem 0 0; }
  .text-mit-bild__bild img { aspect-ratio: 4 / 3; }
  .text-mit-bild > .fliesstext { grid-area: 2 / 1; }
}

/* Eingewöhnung */
.normal-oder-nicht { display: grid; gap: 2rem; margin-top: 2.25rem; }
.normal-oder-nicht h3 { margin-bottom: 1rem; font-size: 1.375rem; }
.normal-oder-nicht__spalte--kommen .knopf { margin-top: 1.5rem; }
@media (min-width: 52em) { .normal-oder-nicht { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } }
.faktoren { display: grid; gap: 0; margin: 0 0 2rem; padding: 0; list-style: none; }
.faktoren li { position: relative; padding: 0.7rem 0 0.7rem 1.6rem; border-bottom: 1px solid var(--linie); font-size: 1.125rem; }
.faktoren li::before { content: ""; position: absolute; left: 0.2rem; top: 1.25rem; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--strich-dunkel); }
@media (min-width: 52em) { .faktoren { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }

/* Garantie als Weg */
.weg { display: grid; gap: 0; margin: 2rem 0 0; padding: 0; list-style: none; }
.weg li { position: relative; padding: 0 0 2rem 2.25rem; }
.weg li::before { content: ""; position: absolute; left: 0; top: 0.3rem; z-index: 1; width: 15px; height: 15px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px #fff; }
.weg li::after { content: ""; position: absolute; left: 6px; top: 0.6rem; bottom: -0.3rem; width: 3px; background: var(--strich); }
.weg li:last-child::after { display: none; }
.weg li:last-child { padding-bottom: 0; }
.weg__wann { display: block; font-size: 1rem; font-weight: 600; color: var(--akzent); }
:root[data-raum="rot"] .weg__wann { color: var(--rot-tief); }
.weg h3 { margin-top: 0.25rem; font-size: 1.375rem; }
.weg p { margin-top: 0.4rem; font-size: 1.125rem; color: var(--tinte-leise); max-width: 40ch; }
@media (min-width: 52em) {
  .weg { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
  .weg li { padding: 2.25rem 0 0; }
  .weg li::before { top: 0; }
  .weg li::after { left: 0; right: -2rem; top: 6px; bottom: auto; width: auto; height: 3px; }
  .weg li:last-child::after { display: block; right: 0; }
}

/* Vor- und Nachteile */
.abwaegen { display: grid; gap: 2.25rem; }
.abwaegen h3 { margin-bottom: 1rem; font-size: 1.375rem; }
@media (min-width: 52em) { .abwaegen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } }

/* Häufige Fragen */
.fragen { border-top: 1px solid var(--linie); max-width: 50rem; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  position: relative; display: flex; align-items: center; min-height: 60px; padding: 0.9rem 3rem 0.9rem 0;
  font-size: 1.1875rem; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::before, .fragen summary::after {
  content: ""; position: absolute; right: 0.6rem; top: 50%; width: 1.1rem; height: 2.5px; margin-top: -1px;
  border-radius: 2px; background: var(--akzent); transition: transform 200ms var(--ease-out);
}
.fragen summary::after { transform: rotate(90deg); }
.fragen details[open] summary::after { transform: rotate(0deg); }
.fragen details p { padding: 0 0 1.4rem; font-size: 1.125rem; color: var(--tinte-leise); max-width: 62ch; }
@media (hover: hover) and (pointer: fine) { .fragen summary:hover { color: var(--akzent); } }

/* Termin im roten Raum */
.kapitel-abschnitt--termin .termin__assistent { margin-top: 2rem; border: 1px solid var(--linie); box-shadow: 0 10px 30px -22px rgb(43 43 43 / 0.45); }
@media (min-width: 64em) { .kapitel-abschnitt--termin .termin__assistent { padding: 2.25rem 2.5rem 2.5rem; } }

/* ================= Impressum ================= */
.recht { padding: 3rem 0 4.5rem; }
.recht__kopf { display: grid; gap: 1rem; max-width: 46rem; padding-bottom: 2rem; border-bottom: 1px solid var(--linie); }
.recht__kopf p { font-size: 1.1875rem; color: var(--tinte-leise); }
.recht__inhalt { display: grid; gap: 3.5rem; margin-top: 2.5rem; }
.recht section { display: grid; gap: 1rem; max-width: 46rem; }
.recht h2 { margin-bottom: 0.25rem; }
.recht h3 { font-size: 1.3125rem; margin-top: 1rem; }
.recht p, .recht li { font-size: 1.125rem; }
.recht ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.recht__daten { display: grid; margin: 0; }
.recht__daten > div { display: grid; gap: 0.15rem; padding: 0.85rem 0; border-bottom: 1px solid var(--linie); }
.recht__daten dt { font-weight: 620; }
.recht__daten dd { margin: 0; color: var(--tinte-leise); font-size: 1.125rem; overflow-wrap: anywhere; }
@media (min-width: 52em) {
  .recht { padding: 5rem 0 7rem; }
  .recht__daten > div { grid-template-columns: 15rem 1fr; column-gap: 1.5rem; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .schau__bild { transition: none; }
  .berater__ergebnis.is-neu .berater__form { animation: none; }
  .menue, .menue[hidden] { transform: none; }
  @starting-style { .menue:not([hidden]) { transform: none; } }
  .kopf__menue-striche, .kopf__menue-striche::before, .kopf__menue-striche::after { transition: none; }
  .knopf:active, .leiste a:active { transform: none; }
  .kopf__nav a { transition: none; }
}