/* =====================================================================
   Ausgangslage (id ausgangslage)
   Links: animierte Trichter-Illustration auf Rasterkachel, rechts Text.
   Metapher: Aufmerksamkeit (Glas-Münzen) fällt in einen Trichter. Ohne Plan
   prallt das meiste ab, mit Plan gleitet unten ein Lime-Baustein aus dem Hals,
   dockt auf dem Turm „Anfragen“ an und wird dessen neues oberstes Segment.
   Turmsegment und Baustein sind dasselbe Symbol (#al-seg, 40 x 26 mit Noppen).
   Standardzustand im Markup = Endzustand (gilt ohne JS und bei reduced motion).
   ===================================================================== */
#ausgangslage .al-layout{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:clamp(48px,7vw,104px);align-items:center}

/* --- Kachel --- */
#ausgangslage .al-art{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;isolation:isolate}
#ausgangslage .al-grid{position:absolute;inset:0;z-index:0;pointer-events:none}
#ausgangslage .al-glow{position:absolute;left:14%;right:14%;width:auto;bottom:-16%;height:48%;z-index:0;opacity:.9}
#ausgangslage .al-stage{position:absolute;top:0;bottom:0;left:50%;height:100%;aspect-ratio:1/1;max-width:100%;transform:translateX(-50%);z-index:1}
#ausgangslage .al-svg{display:block;width:100%;height:100%;max-width:none;overflow:hidden}

/* SVG-Gruppen, die per Web Animations API bewegt werden: Ursprung im Nutzerkoordinatensystem */
#ausgangslage .al-coin,
#ausgangslage .al-brick,
#ausgangslage .al-gbar,
#ausgangslage .al-lime-grow,
#ausgangslage .al-lime-halo,
#ausgangslage .al-lime-flash{transform-box:view-box;transform-origin:0 0}
#ausgangslage .al-coin--ghost{opacity:.26}
#ausgangslage .al-coin--spare,
#ausgangslage .al-brick,
#ausgangslage .al-lime-flash{opacity:0}

/* Plan-Zustand (Standard) und Ohne-Plan-Zustand (.al-off, nur während des Intros) */
#ausgangslage .al-funnel,
#ausgangslage .al-neckglow,
#ausgangslage .al-guide,
#ausgangslage .al-lid{transition:opacity .6s var(--ease)}
#ausgangslage .al-lid{opacity:0}
#ausgangslage .al-off .al-funnel{opacity:.5}
#ausgangslage .al-off .al-neckglow,
#ausgangslage .al-off .al-guide{opacity:0}
#ausgangslage .al-off .al-lid{opacity:1}

/* Vom Skript gesetzte Zustände: .al-live (Münzen nur sichtbar, solange sie fliegen), .al-pre (vor dem Intro) */
#ausgangslage .al-live .al-coin{opacity:0}
#ausgangslage .al-pre .al-gbar{transform:translateY(var(--h))}
#ausgangslage .al-pre .al-lime-grow,
#ausgangslage .al-pre .al-lime-halo{transform:translateY(136px)}
#ausgangslage .al-pre .al-tag{opacity:0}

/* --- Schalter „Ohne Plan / Mit Plan“ --- */
#ausgangslage .al-chip{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 11px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid var(--line-2);box-shadow:0 6px 18px rgba(20,20,20,.06);font-family:"WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;font-weight:500;font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
#ausgangslage .al-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(194,242,28,.22),0 0 10px var(--glow);transition:background .45s var(--ease),box-shadow .45s var(--ease)}
#ausgangslage .al-off .al-dot{background:rgba(20,20,20,.22);box-shadow:none}
#ausgangslage .al-chip-txt{display:grid}
#ausgangslage .al-chip-txt > span{grid-area:1/1;transition:opacity .35s var(--ease),transform .35s var(--ease)}
#ausgangslage .al-t-off{opacity:0;transform:translateY(-4px)}
#ausgangslage .al-off .al-t-off{opacity:1;transform:none}
#ausgangslage .al-off .al-t-on{opacity:0;transform:translateY(4px)}

/* --- Schild „Anfragen“ an der Turmspitze (Koordinaten in Prozent der 480er Bühne).
   Das Skript setzt top passend zur jeweiligen Turmhöhe, Standbild: Oberkante y 318 --- */
#ausgangslage .al-tag{position:absolute;left:56.25%;top:66.25%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:var(--graphite);color:#F6F6F2;box-shadow:0 10px 24px rgba(20,20,20,.18);font-family:"WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;font-weight:500;font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
#ausgangslage .al-tag::before{content:"";position:absolute;left:-3px;top:50%;width:8px;height:8px;border-radius:1px;background:var(--graphite);transform:translateY(-50%) rotate(45deg)}
#ausgangslage .al-tag-ico{display:block;width:10px;height:10px;filter:drop-shadow(0 0 4px rgba(194,242,28,.6))}

/* --- Text --- */
#ausgangslage .al-copy .v3-pill{align-self:flex-start}
#ausgangslage .al-problems{font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:700;font-size:clamp(20px,1.8vw,25px);line-height:1.36;letter-spacing:-.012em;color:var(--ink);max-width:34ch;margin:34px 0 0}
/* Wort für Wort von --muted zu --ink, gesteuert über --p aus wgfx-scrub (ohne --p: voll eingefärbt) */
#ausgangslage .al-w{color:color-mix(in srgb,var(--ink) calc(clamp(0,(var(--p,1) * (var(--n,40) + 8) - var(--i,0)) / 4,1) * 100%),var(--muted))}
#ausgangslage .al-next{font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:46ch;margin:28px 0 0;padding-top:26px;border-top:1px solid var(--line)}
#ausgangslage .al-next strong{font-weight:500;color:var(--ink)}

@media (max-width:900px){
  #ausgangslage .al-layout{grid-template-columns:minmax(0,1fr);gap:44px}
  #ausgangslage .al-copy{order:-1}
  #ausgangslage .al-art{max-height:300px}
  #ausgangslage .al-problems{max-width:none;margin-top:28px}
  #ausgangslage .al-next{font-size:17px;max-width:none}
}
@media (max-width:420px){
  #ausgangslage .al-chip{top:12px;left:12px;padding:6px 11px 6px 9px;font-size:10px}
  #ausgangslage .al-tag{padding:6px 10px 6px 8px;font-size:10px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  #ausgangslage .al-w{color:var(--ink)}
  #ausgangslage .al-funnel,
  #ausgangslage .al-neckglow,
  #ausgangslage .al-guide,
  #ausgangslage .al-lid,
  #ausgangslage .al-dot,
  #ausgangslage .al-chip-txt > span{transition:none}
}