/* GENERIERT aus build/client/*.css von build/client-bundle.mjs — nicht hier editieren. */
/* ---- build/client/start-lens.css ---- */
/* Startseite: Sternenhimmel mit Gravitationslinse im Kopfbereich (build/client/start-lens.js).
   Der Baustein liegt als Ebene HINTER dem Kopftext (.wrap darüber); der Himmel ist durchsichtig, der
   Kopfbereich behält seinen Hintergrund aus styles.css. Hell = dunkle Sterne wie auf einer Fotoplatte,
   dunkel = helle Sterne auf Nachthimmel; beides aus --ink/--accent/--gold. */
.hero.start-hero { isolation: isolate; padding-bottom: max(clamp(5.2rem, 9vw, 6.5rem), calc(var(--start-bar-h, 0px) + clamp(1.8rem, 4.8vw, 3.2rem))); }
.hero.start-hero > .wrap { position: relative; z-index: 1; }
.hero .widget.start-lens {
  position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; pointer-events: none;
}
.start-lens__sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.start-lens.is-ready .start-lens__sky { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .start-lens__sky { transition: none; } }

/* Hinweis unten im Kopfbereich: klein, dezent, mit Links und Pause-Knopf */
.start-lens__bar { position: absolute; left: 0; right: 0; bottom: clamp(.9rem, 2.4vw, 1.6rem); }
.start-lens__bar .kr__embed {
  pointer-events: auto; position: relative; z-index: 2; max-width: 64ch; margin-top: .35rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.start-lens__hint {
  pointer-events: auto; margin: 0; max-width: 64ch;
  font-size: .82rem; line-height: 1.6; color: var(--ink-soft);
}
.start-lens__hint > svg { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: .3rem; color: var(--accent); }
.start-lens__pause { margin-left: .35rem; vertical-align: 1px; }
.start-lens__hint a { color: var(--ink-soft); text-underline-offset: 2px; white-space: nowrap; }
.start-lens__hint a:hover { color: var(--accent-ink); }
.start-lens__pause {
  display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .78rem; cursor: pointer;
  color: var(--ink-soft); background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: .15rem .6rem .15rem .45rem;
}
.start-lens__pause:hover { color: var(--ink); border-color: var(--ink-faint); }
.start-lens__pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.start-lens__pause svg { width: 12px; height: 12px; color: currentColor; }
.start-lens__pause .ico-play { display: none; }
.start-lens__pause.is-paused .ico-play { display: inline; }
.start-lens__pause.is-paused .ico-pause { display: none; }

/* Hörbuch-Knopf im Kopfbereich (Wiedergabe über den Vorlese-Player, main.js) */
.start-hb {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: .5rem 1rem .5rem .6rem; text-align: left; transition: background-color .2s, color .2s, transform .15s;
}
.start-hb:hover { color: var(--ink); background: var(--surface); transform: translateY(-1px); }
.start-hb:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.start-hb__ico {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--bg);
}
.start-hb__ico svg { width: 13px; height: 13px; }
.start-hb .ico-pause { display: none; }
.start-hb.is-playing .ico-pause { display: block; }
.start-hb.is-playing .ico-play { display: none; }
@media (max-width: 560px) { .start-hb { font-size: .86rem; } }

/* Porträt etwas kleiner als auf den übrigen Seiten → freier Himmel für den Einstein-Ring (neben dem Namen,
   am Handy neben dem Bild). Das Porträt bleibt Teil des Kopfbereichs. */
@media (min-width: 821px) { .start-hero .hero-portrait { max-width: 400px; justify-self: end; } }
@media (max-width: 820px) { .start-hero .hero-portrait { max-width: min(260px, 70vw); margin-inline: auto; order: 0; } }

/* Himmel bis an den Fensterrand (s. hochziehen() in start-lens.js): Kopfzeile oben durchsichtig, bis gescrollt wird (dann wie überall). */
.ae-sternenkopf .site-header:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Touch (seit 06.11.2026, Paket P1): sichtbarer Griff der Linse zum Verschieben mit dem Finger (start-lens.js) */
.start-lens__griff {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; pointer-events: auto; touch-action: none; z-index: 2;
  border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0 18%, transparent 19% 62%, color-mix(in srgb, var(--accent) 10%, transparent) 63%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent);
  transition: box-shadow .2s ease, scale .2s ease;
}
.start-lens__griff.is-zieht { scale: 1.08; box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 16%, transparent); }