/* Die Lösung als geneigte Umlaufbahn: vier Glaskacheln kreisen um das Porträt.
   Gepinnt über den Track, der Winkel kommt aus dem Scrollfortschritt (JS).
   Drei Stufen: Desktop, Tablet (≤1100px), Mobil (≤600px). */

.lo { position: relative; --lo-glass: rgba(250, 247, 241, 0.74); --lo-rim: rgba(255, 255, 255, 0.9);
  --lo-edge: rgba(191, 174, 134, 0.55); --lo-shadow: 0 30px 70px -30px rgba(26, 23, 20, 0.45); --lo-halo: rgba(191, 174, 134, 0.34); }
[data-theme='dark'] .lo { --lo-glass: rgba(255, 255, 255, 0.07); --lo-rim: rgba(255, 255, 255, 0.28);
  --lo-edge: rgba(191, 174, 134, 0.5); --lo-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); --lo-halo: rgba(191, 174, 134, 0.2); }

.lo-track { position: relative; height: 420vh; }
.lo-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 66%, var(--lo-halo), transparent 70%), var(--bg); }

.lo-head { position: absolute; z-index: 40; left: clamp(20px, 4vw, 56px); top: calc(var(--topnav-scroll-offset, 84px) + clamp(8px, 3vh, 36px));
  max-width: min(46ch, 42vw); pointer-events: none; }
.lo-eye { margin: 0 0 12px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); }
.lo-eye::before { content: ''; width: 26px; height: 1px; background: var(--ws-gold); }
[data-theme='dark'] .lo-eye { color: var(--ws-gold); }
.lo-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -0.015em; color: var(--fg); }
.lo-h .red { font-style: italic; font-weight: 400; color: var(--accent-text); }
[data-theme='dark'] .lo-h .red { color: var(--ws-gold); }
.lo-sub { margin: 14px 0 0; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.7; color: var(--fg-mute); text-wrap: pretty; }
.lo-sub strong { font-weight: 400; font-style: italic; color: var(--fg); }

.lo-count { position: absolute; z-index: 40; right: clamp(20px, 4vw, 56px); top: calc(var(--topnav-scroll-offset, 84px) + clamp(40px, 9vh, 104px));
  text-align: right; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); }
.lo-count b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 40px); letter-spacing: 0; color: var(--fg); }

.lo-person { position: absolute; z-index: 10; left: 50%; bottom: 0; width: min(1100px, 89vw, 170vh); transform: translateX(-50%); pointer-events: none; }
/* Kein drop-shadow auf dem Freisteller: er vergrößert jeden fast unsichtbaren
   Kantenpixel zu einem sichtbaren Schleier. Stattdessen ein weicher Bodenschatten. */
.lo-person img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.lo-person::after { content: ''; position: absolute; z-index: 0; left: 22%; right: 22%; bottom: 1%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26, 23, 20, 0.22), transparent); filter: blur(14px); pointer-events: none; }

.lo-rail { position: absolute; z-index: 40; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(260px, 50vw); height: 1px; background: var(--line); }
.lo-rail i { position: absolute; left: 0; top: 0; height: 1px; width: 0%; background: var(--ws-gold); }

/* Glaskachel */
.lo-card { position: absolute; left: 0; top: 0; width: clamp(200px, 19vw, 272px); padding: 18px 18px 20px; border-radius: 18px; color: var(--fg); overflow: hidden;
  background: var(--lo-glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--lo-rim), inset 0 0 0 1px var(--lo-edge), inset 0 -1px 0 rgba(0, 0, 0, 0.12), var(--lo-shadow);
  will-change: transform, opacity; transform-origin: 50% 50%; cursor: default;
  transition: box-shadow 500ms var(--ease-expo), background 500ms var(--ease-expo); }
.lo-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 400ms ease;
  background: radial-gradient(260px 200px at var(--mx, 50%) var(--my, 0%), rgba(232, 214, 176, 0.22), rgba(232, 214, 176, 0.06) 45%, transparent 75%); }
[data-theme='dark'] .lo-card::before { background: radial-gradient(260px 200px at var(--mx, 50%) var(--my, 0%), rgba(191, 174, 134, 0.14), rgba(191, 174, 134, 0.04) 45%, transparent 75%); }
.lo-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 46%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent); opacity: 0.6; }
.lo-card:hover::before, .lo-card:focus-visible::before { opacity: 1; }
.lo-card:hover, .lo-card:focus-visible { outline: none; box-shadow: inset 0 1px 0 var(--lo-rim), inset 0 0 0 1px rgba(216, 190, 147, 0.95), 0 0 44px -10px rgba(191, 174, 134, 0.6), var(--lo-shadow); }
.lo-card > * { position: relative; z-index: 1; }
.lo-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); }
[data-theme='dark'] .lo-top { color: var(--ws-gold); }
.lo-arr { display: inline-flex; width: 26px; height: 26px; border-radius: 999px; align-items: center; justify-content: center; font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--lo-edge); transition: transform 500ms var(--ease-expo), background 400ms; }
.lo-card:hover .lo-arr { transform: translate(2px, -2px); background: rgba(191, 174, 134, 0.3); }
.lo-card h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.12; color: var(--fg); }
.lo-lede { margin: 6px 0 0; font-style: italic; font-size: 13px; color: var(--accent-text); }
[data-theme='dark'] .lo-lede { color: var(--ws-gold); }
.lo-body { margin: 10px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--fg-mute); }

/* Beschreibung der vorderen Kachel, nur Mobil (dort haben die Kacheln keinen Fließtext) */
.lo-caption { display: none; }

.lo-foot { max-width: 1400px; margin: 0 auto; padding: clamp(22px, 3vh, 34px) clamp(24px, 4vw, 40px) clamp(40px, 7vh, 90px);
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--fg-mute); border-top: 1px solid var(--line); }
.lo-foot .red { color: var(--accent-text); }
[data-theme='dark'] .lo-foot .red { color: var(--ws-gold); }
.lo-foot a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text);
  text-decoration: none; border-bottom: 1px solid rgba(191, 174, 134, 0.6); padding-bottom: 3px; }
[data-theme='dark'] .lo-foot a { color: var(--ws-gold); }

/* ── Tablet ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .lo-track { height: 380vh; }
  .lo-head { max-width: min(52ch, 58vw); }
  .lo-person { width: min(118vw, 158vh); }
  .lo-card { width: clamp(180px, 25vw, 230px); padding: 15px 15px 17px; }
  .lo-top { margin-bottom: 16px; }
  .lo-body { font-size: 12px; }
}

/* Hohe Tablets hochkant: Porträt größer, damit die Bühne nicht leer wirkt */
@media (max-width: 1100px) and (orientation: portrait) {
  .lo-person { width: 158vw; }
}
/* Niedrige Fenster: Unterzeile weg, damit das Band für die Bahn hoch genug bleibt */
@media (max-height: 640px) {
  .lo-sub { display: none; }
  .lo-h { font-size: clamp(22px, 2.8vw, 36px); }
}

/* ── Mobil ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lo-track { height: 340vh; }
  .lo-head { left: 20px; right: 20px; max-width: none; }
  .lo-h { font-size: clamp(26px, 8.4vw, 34px); }
  .lo-sub { display: none; }
  .lo-count { display: none; }
  /* Bild breiter als der Screen und unten angeschnitten: Oberkörper und Gesicht bleiben groß */
  .lo-person { width: 190vw; bottom: -4vh; }
  .lo-card { width: 150px; padding: 12px 12px 14px; border-radius: 14px; }
  .lo-top { margin-bottom: 10px; font-size: 8.5px; letter-spacing: 0.14em; }
  .lo-top > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
  .lo-arr { width: 20px; height: 20px; font-size: 10px; }
  .lo-card h3 { font-size: 14.5px; }
  .lo-lede { font-size: 12px; }
  .lo-body { display: none; }
  .lo-caption { display: block; position: absolute; z-index: 45; left: 16px; right: 16px; bottom: 30px; padding: 14px 16px; border-radius: 14px;
    background: var(--lo-glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: inset 0 1px 0 var(--lo-rim), inset 0 0 0 1px var(--lo-edge), var(--lo-shadow); }
  .lo-caption span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
  [data-theme='dark'] .lo-caption span { color: var(--ws-gold); }
  .lo-caption p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--fg); transition: opacity 320ms ease; }
  .lo-rail { bottom: 14px; }
}

/* ── Ohne Bewegung: kein Pin, Kacheln als Raster unter dem Bild ── */
@media (prefers-reduced-motion: reduce) {
  .lo-track { height: auto; }
  .lo-stage { position: relative; height: auto; overflow: visible; padding: calc(var(--topnav-scroll-offset, 84px) + 20px) clamp(20px, 4vw, 56px) 40px;
    display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .lo-head, .lo-count, .lo-person, .lo-caption, .lo-rail { position: static; transform: none; grid-column: 1 / -1; max-width: none; width: auto; }
  .lo-count, .lo-rail, .lo-caption { display: none; }
  .lo-person { width: min(880px, 100%); justify-self: center; }
  .lo-card { position: relative; width: auto; transform: none !important; opacity: 1 !important; filter: none !important; }
  .lo-body { display: block; }
}

/* Aussage rechts oben statt Zähler: Serife, rechtsbündig, auf Höhe der Überschrift */
.lo-count.lo-claim { margin: 0; top: calc(var(--topnav-scroll-offset, 84px) + clamp(64px, 13vh, 150px)); max-width: min(360px, 30vw);
  font-family: var(--font-display); font-size: clamp(13.5px, 1.2vw, 16px); line-height: 1.6; letter-spacing: 0; text-transform: none; text-wrap: pretty; color: var(--fg-mute); }
.lo-count.lo-claim strong { font-weight: 400; font-style: italic; color: var(--fg); }
.lo-count.lo-claim sup { font-size: 0.55em; vertical-align: super; line-height: 0; }
@media (max-width: 1100px) { .lo-count.lo-claim { max-width: min(300px, 34vw); font-size: 13px; } }

/* Tiefe über --lo-d statt opacity: die Glaskachel selbst bleibt voll deckend, damit der
   backdrop-filter stabil bleibt; Glasfläche, Schatten-Tönung und Inhalt blenden stattdessen. */
.lo-card { opacity: 1; background: color-mix(in srgb, var(--lo-glass) calc(var(--lo-d, 1) * 100%), transparent);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: flat; contain: layout paint style; }
.lo-card > * { opacity: var(--lo-d, 1); }
.lo-card::after { opacity: calc(0.6 * var(--lo-d, 1)); }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .lo-card > * { opacity: 1; } }