/* NANU Optik – Einstieg (Hero) von Entwurf A: „Im Bild“ mit Text-Anordnung „Plakat“ (Eldins Wahl, Runde 5).
   1. Grundlage: Schriften, Ecken, Foto über den ganzen Einstieg, Kopfleiste über dem Foto, Foto-Wechsler.
      Desktop (breites Fenster ab 64em und 3 : 2) zeigt die breite Fassung jedes Fotos (<name>-breit-*.webp)
      rechtsbündig – das Gesicht steht rechts, links bleibt Platz für den Text. Handy, Tablet und schmale
      Fenster: Original mit eigenem Ausschnitt (--fokus-handy), Text in der unteren Hälfte unter den Gesichtern.
   2. Im Bild: Text direkt im Foto, ohne Fläche. Er färbt sich je Foto um (data-ton am Foto, data-schau-ton am
      Einstieg, gesetzt von a.js); ein fast unsichtbarer Lichthof hinter der Textspalte sorgt für 4,5 : 1.
   3. Plakat: der ganze Text unten links, große Überschrift, darunter feine Linie und kleiner Fuß
      (Öffnungszeit und Adresse, im Gleitsicht-Bereich die Garantie). Oben gehört die Fläche dem Foto.
   Die Fotos laufen als Diashow (einstieg.js): Pfeile, Pause mit Fortschrittsring. Jedes Foto ist ein „Raumfoto“:
   Hintergrund, Muster und freigestellte Person liegen als Ebenen übereinander und bewegen sich gegeneinander. */

:root {
  --schrift: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-einstieg: "Instrument Sans", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r-knopf: 6px;
  --r-foto: 5px;
  --r-tafel: 8px;
  --r-klein: 5px;
  --text-breite: min(32rem, 38vw);         /* Textspalte am Desktop */
  --einstieg-hoehe: clamp(36rem, 100svh, 80rem);   /* erster Bildschirm, die Kopfleiste liegt darüber */
  --foto-handy-hoehe: clamp(30rem, 100svh, 56rem);
  --text-oben-handy: calc(var(--foto-handy-hoehe) * 0.66); /* Handy: hier beginnt der Text, unter den Gesichtern */
  --einstieg-grund: #f3f5f5;              /* Handy: Fläche unter dem Foto, wenn der Text länger ist */
}

/* ======================= 1. Grundlage ======================= */

/* ---------- Rest der Seite ---------- */
:root body { font-size: 1.1875rem; line-height: 1.6; }
:root :is(h1, h2, h3, h4) { font-weight: 600; }
:root h2 { font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); letter-spacing: -0.02em; line-height: 1.1; }
:root h3 { font-size: clamp(1.375rem, 1.22rem + 0.45vw, 1.625rem); letter-spacing: -0.01em; }
:root .knopf,
:root .nanu-knopf { font-weight: 600; letter-spacing: 0; }
:root .menue__liste a { font-weight: 600; letter-spacing: -0.012em; }
:root .chronik__jahr,
:root .besuch__tel { font-weight: 600; }
:root .sprung,
:root .leiste a,
:root .nanu-wp__zeile:where(.is-heute) { border-radius: var(--r-klein); }
:root .nanu-karte__inhalt,
:root .nanu-termin__mitbringen,
:root .nanu-check__ergebnis { border-radius: var(--r-tafel); }

/* ---------- Einstieg ---------- */
:root .einstieg { font-family: var(--schrift-einstieg); isolation: isolate; background: var(--einstieg-grund); }
:root .einstieg h1 {
  font-size: clamp(2.375rem, 1.45rem + 2.9vw, 4.25rem); font-weight: 600; letter-spacing: -0.026em; line-height: 1.02; max-width: 13ch;
}
:root .einstieg__lead { font-size: 1.25rem; line-height: 1.5; max-width: 30ch; }
:root .einstieg__status,
:root .einstieg__adresse { max-width: 34ch; }
:root .einstieg__text { position: relative; z-index: 3; }

/* Foto-Ebene: füllt den Einstieg (Desktop) bzw. den ersten Bildschirm (Handy) */
:root .schau { z-index: 0; aspect-ratio: auto; max-height: none; background: var(--einstieg-grund); }
:root .schau__bild { overflow: hidden; }
:root .schau__bild picture { display: contents; }
:root .schau__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Diashow-Steuerung: ‹ 1 / 4 › und Pause oben rechts unter der Kopfleiste, schwebt über dem Foto */
:root .schau__steuerung {
  position: absolute; z-index: 4; top: calc(var(--kopf-h) + 0.75rem); right: max(var(--rand), (100% - var(--max)) / 2);
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0; width: auto; margin: 0; padding: 0.125rem;
  border-radius: 999px; background: rgb(255 255 255 / 0.78); color: var(--tinte);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgb(15 51 56 / 0.12);
  font-family: var(--schrift-einstieg); font-size: 0.9375rem; font-weight: 600; line-height: 1;
}
:root .schau__nr { min-width: 3.25rem; color: inherit; text-align: center; font-variant-numeric: tabular-nums; }
:root .schau__knopf { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; }
@media (hover: hover) and (pointer: fine) { :root .schau__knopf:hover { background: rgb(15 51 56 / 0.08); } }
/* Pause: der Ring füllt sich bis zum nächsten Foto (einstieg.js); angehalten zeigt der Knopf das Dreieck */
:root .schau__pause { position: relative; }
:root .schau__pause .ico { width: 1.05rem; height: 1.05rem; }
:root .schau__ring {
  position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); rotate: -90deg; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 119.38; stroke-dashoffset: 119.38;
  opacity: 0; transition: opacity 200ms var(--ease-out);
}
:root .einstieg:not([data-schau-angehalten]) .schau__ring { opacity: 0.55; }
/* Handy: nur Zahl und Pause – geblättert wird mit Wischen, die Steuerung verdeckt so kein Gesicht */
@media (max-width: 29.99em) {
  :root .schau__steuerung :is([data-schau="zurueck"], [data-schau="weiter"]) { display: none; }
  :root .schau__nr { min-width: 2.75rem; padding-left: 0.625rem; }
}

/* ---------- Raumfoto (einstieg.js) ----------
   Je Foto drei deckungsgleiche Ebenen: hinten die Hintergrundplatte (Foto ohne Person, mit leichtem Tiefenschatten),
   darauf das Muster der alten NANU-Seite in Weiß (Runde 19, Eldins Wahl: hellt nur leicht auf – auf hellen Stellen
   kaum zu sehen, auf dunklen zart), vorn die freigestellte Person.
   einstieg.js bewegt die Ebenen per transform, gezoomt wird vom Gesicht aus. Alles liegt unter Lichthof, Verlauf und Text. */
:root .schau__bild { isolation: isolate; }
:root .schau__bild :is(img, .raum__muster) { transform-origin: var(--fokus-handy, 50%) 40%; }
:root .schau__bild:is(.ist-aktiv, .ist-vorher) :is(img, .raum__muster) { will-change: transform; }
/* nanu-muster-weiss.webp: weiße Linien, Deckkraft = Dunkelheit des alten grauen Musters */
:root .raum__muster {
  position: absolute; inset: 0; pointer-events: none;
  background: url(assets/marke/nanu-muster-weiss.webp) 0 0 / var(--muster-groesse, 10rem) repeat;
  opacity: var(--muster-staerke, 0.12);
}
/* steht hinter der Person noch jemand (Gleitsicht, Foto 1), bleibt dessen Gesicht frei; Lage wie das Foto (cover) */
:root .raum__muster--maske {
  -webkit-mask: var(--muster-maske-handy) var(--fokus-handy, 50%) 50% / cover no-repeat;
  mask: var(--muster-maske-handy) var(--fokus-handy, 50%) 50% / cover no-repeat;
}
/* solange die Person noch lädt, zeigt das Foto noch nichts – statt eines Hintergrunds ohne Person (einstieg.js) */
:root .schau__bild[data-raum-laedt] :is(.raum__platte img, .raum__muster) { opacity: 0; }
/* Fotowechsel räumlich: erst der neue Hintergrund, die Person einen Hauch später (erst ab dem ersten Wechsel) */
:root .einstieg[data-raum-gewechselt] .schau__bild.ist-aktiv .raum__person img {
  animation: raum-person 1000ms 180ms cubic-bezier(0.25, 0.6, 0.25, 1) both;
}
@keyframes raum-person { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  :root .schau__bild :is(img, .raum__muster) { transform: none !important; will-change: auto; }
  :root .einstieg[data-raum-gewechselt] .schau__bild.ist-aktiv .raum__person img { animation: none; }
}
/* Wischen zum Blättern (einstieg.js) auf Foto und Textblock: senkrecht scrollt die Seite, zwei Finger zoomen */
:root .einstieg :is(.schau, .einstieg__text) { touch-action: pan-y pinch-zoom; }

/* ---------- Kopfleiste über dem Foto ---------- */
:root .kopf--ueber-foto {
  position: fixed; inset: 0 0 auto 0;
  background: transparent; border-bottom-color: transparent;
  transition: background-color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
/* weicher heller Hauch hinter der Leiste: das Foto bleibt sichtbar, wird oben nur leicht weich und hell,
   damit Menü, Telefon und Öffnungszeit auf jedem Foto 4,5 : 1 erreichen. Läuft nach unten ins klare Foto aus. */
:root .kopf--ueber-foto::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 -2.5rem 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.4) 55%, rgb(255 255 255 / 0));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent);
  transition: opacity 220ms var(--ease-out);
}
:root .kopf--ueber-foto .kopf__status { color: var(--tinte); }
/* „Gleitsicht“ in Rot: über dem Foto dunkler, damit es auch auf hellen, rötlichen Stellen 4,5 : 1 erreicht */
:root:not([data-kopf-fest]) .kopf--ueber-foto .kopf__nav a.ist-rot { color: #8e0710; }
/* gescrollt oder Menü offen: Leiste mit weißer Fläche */
:root:is([data-kopf-fest], [data-menue-offen]) .kopf--ueber-foto { background: #fff; border-bottom-color: var(--linie); }
:root:is([data-kopf-fest], [data-menue-offen]) .kopf--ueber-foto::before { opacity: 0; }

/* ---------- Handy und Tablet: Foto füllt den ersten Bildschirm, Text liegt in der unteren Hälfte ---------- */
@media not all and (min-width: 64em) and (min-aspect-ratio: 3/2) {
  :root .einstieg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  :root .schau { grid-area: 1 / 1; align-self: start; height: var(--foto-handy-hoehe); }
  /* So hoch ist das Foto selbst: nach der Breite bemessen, damit das Gesicht nicht den ganzen Bildschirm füllt
     (Runde 19: 124vw statt 155vw – die Gesichter wirkten zu groß; enge Nahaufnahmen setzen --bild-handy noch kleiner);
     darunter läuft es in den Grund aus. Die Überschrift rückt bis an das Fotoende heran (1,5 rem darüber), höchstens
     auf zwei Drittel des Bildschirms – so bleibt keine leere Fläche zwischen Foto und Text. Auf breiten Tablets so hoch
     wie der erste Bildschirm. Oben bündig: über dem Kopf liegt der Streifen, den export-raum.mjs („oben“) angesetzt hat. */
  :root {
    --bild-handy-std: 124vw;
    --text-oben-handy: min(calc(var(--foto-handy-hoehe) * 0.66),
      calc(clamp(calc(var(--foto-handy-hoehe) * 0.5), var(--bild-handy-std), var(--foto-handy-hoehe)) - 1.5rem));
  }
  :root .schau__bild { bottom: auto; height: clamp(calc(var(--foto-handy-hoehe) * 0.45), var(--bild-handy, var(--bild-handy-std)), var(--foto-handy-hoehe)); }
  :root .schau__bild img { object-position: var(--fokus-handy, 50%) 0; }
  :root .raum__muster--maske { -webkit-mask-position: var(--fokus-handy, 50%) 0; mask-position: var(--fokus-handy, 50%) 0; }
  :root .einstieg__text { grid-area: 1 / 1; align-self: start; padding: var(--text-oben-handy) 0 1.5rem; }
}

/* ---------- Desktop: Foto von Rand zu Rand, Text links in der Spalte ---------- */
@media (min-width: 64em) and (min-aspect-ratio: 3/2) {
  :root .einstieg {
    grid-template-columns:
      [voll-start] max(var(--rand), (100% - var(--max)) / 2)
      [text-start] minmax(0, var(--text-breite)) [text-ende]
      minmax(0, 1fr)
      max(var(--rand), (100% - var(--max)) / 2) [voll-ende];
    grid-template-rows: minmax(0, 1fr);
    min-height: var(--einstieg-hoehe);
  }
  :root .schau { position: absolute; inset: 0; height: auto; }
  :root .schau__bild :is(img, .raum__muster) { transform-origin: 72% 40%; }
  /* breite Fassung rechtsbündig: das Gesicht bleibt rechts, links wird bei schmaleren Fenstern beschnitten */
  :root .schau__bild img { object-position: 100% var(--fokus-y, 42%); }
  :root .raum__muster { --muster-groesse: 11.25rem; }
  :root .raum__muster--maske {
    -webkit-mask-image: var(--muster-maske-breit); mask-image: var(--muster-maske-breit);
    -webkit-mask-position: 100% var(--fokus-y, 42%); mask-position: 100% var(--fokus-y, 42%);
  }
  :root .einstieg__text {
    grid-column: text-start / text-ende; grid-row: 1; align-self: center;
    width: auto; margin: 0; padding: calc(var(--kopf-h) + 3rem) 0 3rem;
  }
  :root .einstieg__lead { font-size: 1.375rem; margin-top: 1.4rem; }
  :root .einstieg .knopfreihe { margin-top: 2.25rem; }
  :root .einstieg__status { margin-top: 2rem; }
  :root .einstieg--gs .einstieg__lead { font-size: 1.25rem; margin-top: 1.25rem; max-width: 32ch; }
  :root .einstieg--gs .knopfreihe { margin-top: 1.5rem; }
  :root .einstieg--gs .einstieg__status { margin-top: 1.5rem; }
}
@media (min-width: 64em) and (min-aspect-ratio: 3/2) and (max-height: 50em) {
  :root .einstieg h1 { font-size: clamp(2.375rem, 1rem + 2.6vw, 3.4rem); }
  :root .einstieg__text { padding: calc(var(--kopf-h) + 1.75rem) 0 1.75rem; }
  :root .einstieg__lead { font-size: 1.25rem; margin-top: 1.1rem; }
  :root .einstieg .knopfreihe { margin-top: 1.5rem; }
  :root .einstieg__status { margin-top: 1.25rem; }
  :root .einstieg--gs .einstieg__lead { font-size: 1.1875rem; }
  :root .einstieg--gs .knopfreihe { margin-top: 1rem; }
  :root .einstieg--gs .einstieg__status { display: none; }
  :root .einstieg--gs .knopf--gross { min-height: 52px; padding: 0.75rem 1.3rem; font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root .kopf--ueber-foto, :root .kopf--ueber-foto::before { transition: none; }
}


/* ======================= 2. Im Bild ======================= */

:root {
  --bild-tinte: #0f3338;
  --bild-grund-hell: #f3f5f5;
  --bild-grund-dunkel: #0f3338;
  --bild-wechsel: 900ms cubic-bezier(0.4, 0, 0.2, 1);
  --text-breite: min(33rem, 39vw);
}
:root[data-raum="rot"] {
  --bild-tinte: #232323;
  --bild-grund-hell: #f6f3f2;
  --bild-grund-dunkel: #262220;
}

/* ---------- Ton je Foto: Schriftfarbe und Lichthof ---------- */
:root .einstieg {
  --bild-text: var(--bild-tinte);
  --bild-zahl: #c4050f;                 /* „2 Monate“ im Gleitsicht-Bereich, große Schrift */
  --bild-hell: 1;                       /* welcher Lichthof gerade gilt */
  --bild-dunkel: 0;
  --bild-hof: 0.5;                      /* Stärke des Lichthofs, je Foto unten feiner eingestellt */
  --einstieg-grund: var(--bild-grund-hell);
}
:root .einstieg:is([data-schau-ton="dunkel"], :not([data-schau-ton]):has(.schau__bild.ist-aktiv[data-ton="dunkel"])) {
  --bild-text: #ffffff;
  --bild-zahl: #ff8a80;
  --bild-hell: 0;
  --bild-dunkel: 1;
  --einstieg-grund: var(--bild-grund-dunkel);
}

:root .einstieg :is(h1, .einstieg__lead, .einstieg__status, .einstieg__status b, .einstieg__adresse) {
  color: var(--bild-text);
  transition: color var(--bild-wechsel);
}

/* ---------- Große Schrift ---------- */
:root .einstieg h1 {
  font-size: clamp(2.625rem, 1.3rem + 3.3vw, 4.75rem); font-weight: 620; letter-spacing: -0.032em; line-height: 0.98; max-width: 11.5ch;
}
:root .einstieg__lead { font-size: 1.3125rem; line-height: 1.45; max-width: 29ch; font-weight: 450; }
:root .einstieg__status { font-size: 1.0625rem; }
:root .einstieg__status b { font-weight: 650; }
:root .einstieg__adresse { font-size: 1.0625rem; margin-top: 0.2rem; }

/* Zweiter Knopf: nur Linie und Schrift, keine weiße Fläche */
:root .einstieg .knopf--zweit {
  background: transparent; color: var(--bild-text); border-color: currentColor;
  transition: color var(--bild-wechsel), border-color var(--bild-wechsel), background-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  :root .einstieg .knopf--zweit:hover { background: color-mix(in srgb, currentColor 12%, transparent); border-color: currentColor; }
}
:root .einstieg { --nanu-fokus: var(--bild-text); }

:root .einstieg--gs h1 { font-size: clamp(2.625rem, 1.3rem + 3vw, 4.375rem); }
:root .einstieg--gs .einstieg__lead { font-size: 1.25rem; }

/* ---------- Lichthof hinter der Textspalte (Desktop) ---------- */
:root .einstieg::before,
:root .einstieg::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  inset: 0 auto 0 0; width: min(62rem, 70%);
  transition: opacity var(--bild-wechsel);
}
:root .einstieg::before {
  background:
    radial-gradient(ellipse var(--hof-rx, 58%) var(--bild-hof-hoehe, 64%) at var(--hof-x, 34%) var(--bild-hof-y, 52%), rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.72) 45%, rgb(255 255 255 / 0) 100%);
  opacity: calc(var(--bild-hell) * var(--bild-hof));
}
:root .einstieg::after {
  background:
    radial-gradient(ellipse var(--hof-rx, 58%) var(--bild-hof-hoehe, 64%) at var(--hof-x, 34%) var(--bild-hof-y, 52%), rgb(10 14 14 / 0.9) 0%, rgb(10 14 14 / 0.66) 45%, rgb(10 14 14 / 0) 100%);
  opacity: calc(var(--bild-dunkel) * var(--bild-hof));
}
/* Stärke je Foto: so wenig wie möglich, so viel wie nötig für 4,5 : 1. --bild-hof-y/--bild-hof-hoehe: Lage und Höhe des Lichthofs (Plakat setzt ihn tief) */
:root .einstieg:has(.schau__bild.ist-aktiv img[src*="hero-frau-lachen"]) { --bild-hof: 0.62; }
:root .einstieg:has(.schau__bild.ist-aktiv img[src*="start-mutter-tochter"]) { --bild-hof: 0.7; }
:root .einstieg:has(.schau__bild.ist-aktiv img[src*="start-paar-fenster"]) { --bild-hof: 0.95; --bild-hof-hoehe: 86%; --bild-hof-y: 60%; }
:root .einstieg:has(.schau__bild.ist-aktiv img[src*="start-frau-locken"]) { --bild-hof: 0.7; }
:root .einstieg:has(.schau__bild.ist-aktiv img[src*="start-herbstlaub"]) { --bild-hof: 0.85; }
:root .einstieg:has(.schau__bild.ist-aktiv img[src*="start-liegestuhl"]) { --bild-hof: 0.95; --bild-hof-hoehe: 86%; --bild-hof-y: 60%; }
:root .einstieg:has(.schau__bild.ist-aktiv img[src*="gs-mutter-tochter"]) { --bild-hof: 0.75; }
:root .einstieg:has(.schau__bild.ist-aktiv img[src*="gs-frau-blond"]) { --bild-hof: 0.8; }

/* ---------- Erster Eindruck: Text kommt gestaffelt (das Foto setzt sich per einstieg.js) ---------- */
:root .einstieg__text > * { animation: bild-auf 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
:root .einstieg__text > :nth-child(1) { animation-delay: 150ms; }
:root .einstieg__text > :nth-child(2) { animation-delay: 300ms; }
:root .einstieg__text > :nth-child(3) { animation-delay: 420ms; }
:root .einstieg__text > :nth-child(4) { animation-delay: 520ms; }
:root .einstieg__text > :nth-child(n + 5) { animation-delay: 600ms; }
@keyframes bild-auf { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

/* ---------- Handy und Tablet: Foto läuft unten immer hell aus ---------- */
@media not all and (min-width: 64em) and (min-aspect-ratio: 3/2) {
  :root .einstieg { transition: background-color var(--bild-wechsel); }
  :root .einstieg::before,
  :root .einstieg::after { display: none; }
  /* Eldin (Runde 19): der Übergang ist am Handy immer hell, auch bei dunklen Fotos – Schrift bleibt dunkel */
  :root .einstieg:is([data-schau-ton="dunkel"], :not([data-schau-ton]):has(.schau__bild.ist-aktiv[data-ton="dunkel"])) {
    --bild-text: var(--bild-tinte); --bild-zahl: #c4050f; --bild-hell: 1; --bild-dunkel: 0; --einstieg-grund: var(--bild-grund-hell);
  }
  /* Jedes Foto läuft unten in den hellen Grund aus. Der Verlauf liegt auf dem Foto selbst und blendet mit ihm über:
     dicht, wo die Überschrift beginnt, ganz zu am unteren Fotorand. */
  :root .schau__bild { --grund-rgb: 243 245 245; }
  :root[data-raum="rot"] .schau__bild { --grund-rgb: 246 243 242; }
  :root .schau__bild::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(to bottom,
      rgb(var(--grund-rgb) / 0) min(calc(var(--text-oben-handy) - 9.5rem), calc(100% - 12.5rem)),
      rgb(var(--grund-rgb) / 0.82) min(calc(var(--text-oben-handy) - 0.75rem), calc(100% - 3.75rem)),
      rgb(var(--grund-rgb) / 0.97) min(calc(var(--text-oben-handy) + 1rem), calc(100% - 1.5rem)),
      rgb(var(--grund-rgb)) 100%);
  }
  :root .einstieg h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem); }
  :root .einstieg__lead { font-size: 1.25rem; }
}

/* ---------- Desktop ---------- */
@media (min-width: 64em) and (min-aspect-ratio: 3/2) {
  :root .einstieg__text { padding: calc(var(--kopf-h) + 2.5rem) 0 2.5rem; }
  :root .einstieg__lead { margin-top: 1.5rem; }
  :root .einstieg .knopfreihe { margin-top: 2rem; }
  :root .einstieg__status { margin-top: 1.75rem; }
  :root .einstieg--gs .einstieg__lead { max-width: 34ch; }
  /* Gleitsicht: Öffnungszeit steht schon in der Kopfleiste; nach Ladenschluss ist sie länger und schöbe den Einstieg über den Bildschirm */
  :root .einstieg--gs .einstieg__status { display: none; }
}
@media (min-width: 64em) and (min-aspect-ratio: 3/2) and (max-height: 50em) {
  :root .einstieg h1 { font-size: clamp(2.5rem, 1rem + 2.8vw, 3.6rem); }
  :root .einstieg__text { padding: calc(var(--kopf-h) + 1.5rem) 0 1.5rem; }
  :root .einstieg__lead { font-size: 1.25rem; margin-top: 1.1rem; }
  :root .einstieg .knopfreihe { margin-top: 1.4rem; }
  :root .einstieg__status { margin-top: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root .einstieg__text > * { animation: none; }
  :root { --bild-wechsel: 1ms; }
}


/* ======================= 3. Plakat ======================= */

:root {
  --text-breite: min(36rem, 41vw);   /* breit genug für „Ihre Brille vom“ in Plakatgröße */
}

/* ---------- Plakat-Fuß: feine Linie, zwei kleine Angaben ---------- */
:root .einstieg__text::before {
  content: ""; display: block; height: 1px; max-width: 26rem; pointer-events: none;
  background: var(--bild-text); opacity: 0.32;
  transform-origin: left center;
  transition: background-color var(--bild-wechsel);
  animation: plakat-linie 900ms 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
:root .einstieg__status,
:root .einstieg__adresse { margin-top: 0; font-size: 1.0625rem; line-height: 1.4; }
:root .einstieg__status { align-items: flex-start; }
:root .einstieg__status .punkt { align-self: flex-start; margin-top: 0.36em; }
:root .einstieg__status,
:root .einstieg__adresse { max-width: 26rem; }
:root .einstieg__ort { font-weight: 650; }

/* Gleitsicht: der Garantie-Hinweis steht über den Knöpfen (Reihenfolge im HTML, gestaffelt wie alle Kinder);
   am Handy folgen darunter Linie und Öffnungszeit, am Desktop endet der Text mit den Knöpfen */
:root .einstieg--gs .einstieg__text::before { max-width: 30rem; }
@keyframes plakat-linie { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- Handy und Tablet ---------- */
@media not all and (min-width: 64em) and (min-aspect-ratio: 3/2) {
  :root .einstieg__text { display: flex; flex-direction: column; }
  :root .einstieg h1 { font-size: clamp(2.875rem, 1.4rem + 6vw, 4.5rem); line-height: 0.96; letter-spacing: -0.034em; max-width: 11.5ch; }
  :root .einstieg__lead { margin-top: 1.1rem; }
  :root .einstieg .knopfreihe { margin-top: 1.5rem; }
  :root .einstieg__text::before { order: 4; margin-top: 1.75rem; }
  :root .einstieg__status { order: 5; margin-top: 1rem; }
  :root .einstieg__adresse { order: 6; margin-top: 0.85rem; }
  /* Garantie-Hinweis vor den Knöpfen; die Schrift wird so klein, dass das Schild in eine Zeile passt
     (Schild gut 21 em breit, alle Maße des Schilds in em – a.css) */
  :root .einstieg--gs .garantie-hinweis { order: 3; align-self: flex-start; margin-top: 1.5rem; font-size: min(1rem, (100vw - 2 * var(--rand)) / 21.6); }
  :root .einstieg--gs .einstieg__status { order: 6; margin-top: 1rem; }
  :root .einstieg--gs .knopfreihe { order: 3; margin-top: 1rem; }
}
/* breite Handys und Tablets: Öffnungszeit und Adresse nebeneinander */
@media (min-width: 30em) and (max-width: 63.99em), (min-width: 30em) and (max-aspect-ratio: 1499/1000) {
  :root .einstieg:not(.einstieg--gs) .einstieg__text {
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 18rem) minmax(0, 1fr); column-gap: 0;
  }
  :root .einstieg:not(.einstieg--gs) .einstieg__text > * { grid-column: 1 / -1; }
  :root .einstieg:not(.einstieg--gs) .einstieg__text::before { grid-column: 1 / 3; grid-row: 4; max-width: none; }
  :root .einstieg:not(.einstieg--gs) :is(.einstieg__status [data-nanu-status-detail], .einstieg__ort, .einstieg__parken) { display: block; }
  :root .einstieg:not(.einstieg--gs) .einstieg__status { grid-column: 1; grid-row: 5; padding-right: 1.5rem; }
  :root .einstieg:not(.einstieg--gs) .einstieg__adresse { grid-column: 2; grid-row: 5; margin-top: 1rem; }
}

/* ---------- Desktop: alles unten links, oben nur Foto ---------- */
@media (min-width: 64em) and (min-aspect-ratio: 3/2) {
  :root .einstieg {
    --bild-hof-y: 70%;          /* Lichthof sitzt tief, hinter dem Text; oben bleibt das Foto unberührt */
    --bild-hof-hoehe: 56%;
  }
  /* Lichthof folgt der Textspalte: auf breiten Bildschirmen rückt die Spalte zur Mitte (--max), die Mitte des Hofs
     mit ihr. Die Fläche bleibt so breit wie der Einstieg, damit nirgends eine Kante entsteht (100 % = Breite des Einstiegs). */
  :root .einstieg::before,
  :root .einstieg::after { inset: 0; width: auto; }
  :root .einstieg {
    --hof-rx: calc(0.62 * min(62rem, 70vw));
    --hof-x: calc(max(var(--rand), (100% - var(--max)) / 2) + var(--text-breite) * 0.4);
  }
  /* Der Fuß liegt tief über der unruhigen Straße – dort etwas mehr Lichthof als in „Im Bild“ */
  :root .einstieg:has(.schau__bild.ist-aktiv img[src*="hero-frau-lachen"]) { --bild-hof: 0.72; }
  /* bei 16 : 10 rückt die Frau im Büro näher an Knöpfe und Garantie-Zahl */
  :root .einstieg:has(.schau__bild.ist-aktiv img[src*="gs-frau-blond"]) { --bild-hof: 0.92; }
  :root .einstieg__text {
    align-self: end;
    display: grid; grid-template-columns: minmax(0, 1fr);
    padding: calc(var(--kopf-h) + 2rem) 0 3.25rem;
  }
  :root .einstieg h1 {
    grid-row: 1;
    font-size: min(5.25rem, 5.8vw); font-weight: 620; line-height: 0.95; letter-spacing: -0.036em; max-width: none;
  }
  :root .einstieg__lead { grid-row: 2; margin-top: 1.4rem; font-size: 1.3125rem; max-width: 31ch; }
  :root .einstieg .knopfreihe { grid-row: 3; margin-top: 2rem; }
  :root .einstieg__text::before { grid-row: 4; margin-top: 2.25rem; }
  :root .einstieg__status { grid-row: 5; padding-top: 1rem; }
  :root .einstieg__adresse { grid-row: 6; margin-top: 0.3rem; }

  /* Gleitsicht: Überschrift etwas kleiner (längerer Text), Garantie-Hinweis über den Knöpfen, keine Linie darunter */
  :root .einstieg--gs h1 { font-size: min(4.5rem, 5vw); }
  :root .einstieg--gs .einstieg__lead { font-size: 1.25rem; max-width: 34ch; }
  :root .einstieg--gs .garantie-hinweis { grid-row: 3; justify-self: start; margin-top: 1.6rem; font-size: 1.0625rem; }
  :root .einstieg--gs .knopfreihe { grid-row: 4; margin-top: 1.1rem; }
  :root .einstieg--gs .einstieg__text::before { display: none; }
}
@media (min-width: 64em) and (min-aspect-ratio: 3/2) and (max-height: 50em) {
  :root .einstieg h1 { font-size: min(4.5rem, 5.2vw, 8.2vh); }
  :root .einstieg--gs h1 { font-size: min(4rem, 4.6vw, 7.4vh); }
  :root .einstieg__text { padding: calc(var(--kopf-h) + 1.25rem) 0 2.25rem; }
  :root .einstieg__lead { font-size: 1.25rem; margin-top: 1.1rem; }
  :root .einstieg .knopfreihe { margin-top: 1.5rem; }
  :root .einstieg__text::before { margin-top: 1.75rem; }
  :root .einstieg__status { padding-top: 0.85rem; }
  :root .einstieg--gs .einstieg__lead { font-size: 1.1875rem; }
  :root .einstieg--gs .garantie-hinweis { margin-top: 1.25rem; }
  :root .einstieg--gs .knopfreihe { margin-top: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root .einstieg__text::before { animation: none; }
}