/* gos:lagebild v1 — Startseiten-Lagebild (Preis, Chart mit Ereignissen, Routenstatus)
   Welle 6, 13.09.2026. Eigenstaendig, keine Abhaengigkeit zu wizard.css. */
.lagebild{--lb-line:rgba(255,255,255,.09);--lb-line2:rgba(255,255,255,.16);
  --lb-ink:#f8fafc;--lb-ink2:#94a3b8;--lb-ink3:#64748b;--lb-primary:#ff6b35;--lb-amber:#f59e0b;
  padding-block:clamp(28px,4vw,52px)}
.lagebild .lb-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,24px)}
.lagebild .lb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.lagebild h2{font-family:var(--ff-display,'Barlow Condensed',system-ui,sans-serif);font-size:clamp(22px,2.6vw,30px);
  font-weight:700;text-transform:uppercase;margin:0;letter-spacing:.01em;color:var(--lb-ink)}
.lagebild .lb-sub{color:var(--lb-ink2);margin:6px 0 0;font-size:14px;max-width:64ch}
.lagebild .lb-stamp{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;color:var(--lb-ink3);white-space:nowrap}

/* 18.09.: Die Routenspalte ist weg, sie wiederholte fuenf von 65 Punkten der
   Karte darueber. Das Raster hat nur noch ein Kind, also eine volle Spur. */
.lagebild .lb-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,22px);align-items:start}
.lagebild .lb-morerow{margin:10px 0 0}
.lagebild .lb-card{background:linear-gradient(180deg,#141820,#0e1018);border:1px solid var(--lb-line);border-radius:16px}

/* Chart */
.lagebild .lb-chart{padding:clamp(14px,2vw,20px)}
.lagebild .lb-chart-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.lagebild .lb-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lagebild .lb-price b{font-family:var(--ff-display,'Barlow Condensed',sans-serif);font-size:40px;font-weight:700;line-height:1;
  color:var(--lb-ink);font-variant-numeric:tabular-nums}
.lagebild .lb-price span{color:var(--lb-ink2);font-size:14px}
.lagebild .lb-delta{font-family:'IBM Plex Mono',monospace;font-size:12px;padding:4px 9px;border-radius:7px;
  background:rgba(239,68,68,.12);color:#fca5a5}
.lagebild .lb-delta.dn{background:rgba(16,185,129,.12);color:#6ee7b7}
.lagebild .lb-ranges{display:flex;flex-wrap:wrap;gap:6px}  /* 13.09.: ohne Umbruch zwang die fr-Zeile (361px) die Rasterspalte
     auf 390px, bei 343px Container. de/en lagen mit 313px nur 2px
     unter der Grenze. */
.lagebild .lb-ranges button{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--lb-ink2);background:transparent;
  border:1px solid var(--lb-line2);border-radius:8px;padding:7px 12px;cursor:pointer}
.lagebild .lb-ranges button[aria-pressed="true"]{background:rgba(255,107,53,.14);border-color:rgba(255,107,53,.5);color:#ffb694}
.lagebild .lb-ranges button:focus-visible{outline:2px solid var(--lb-primary);outline-offset:2px}
.lagebild .lb-plot{position:relative;margin-top:14px;min-height:180px}
.lagebild .lb-plot svg{display:block;width:100%;height:clamp(200px,26vw,290px)}
.lagebild .lb-tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-108%);transition:opacity .12s;
  background:#0b0e15;border:1px solid var(--lb-line2);border-radius:10px;padding:10px 12px;min-width:170px;max-width:250px;
  box-shadow:0 18px 40px -20px #000;z-index:2}
.lagebild .lb-tip .d{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--lb-ink3)}
.lagebild .lb-tip .v{font-family:var(--ff-display,'Barlow Condensed',sans-serif);font-size:21px;font-weight:700;color:var(--lb-ink)}
.lagebild .lb-tip .e{margin-top:7px;padding-top:7px;border-top:1px solid var(--lb-line);font-size:12.5px;color:var(--lb-ink2)}
.lagebild .lb-tip .s{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--lb-ink3);margin-top:5px}
.lagebild .lb-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;color:var(--lb-ink3);font-size:11.5px;
  font-family:'IBM Plex Mono',monospace}
.lagebild .lb-legend i{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:middle}
.lagebild .lb-legend .l1{background:var(--lb-primary);height:2px;width:15px}
.lagebild .lb-legend .l2{background:var(--lb-amber);transform:rotate(45deg)}
.lagebild .lb-fallback{color:var(--lb-ink3);font-size:13px;padding:22px 4px}

/* Routen */
.lagebild .lb-routes{padding:clamp(14px,2vw,20px)}
.lagebild .lb-routes h3{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lb-ink2);margin:0 0 12px;font-weight:500}
.lagebild .lb-route{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;
  border-top:1px solid rgba(255,255,255,.05)}
.lagebild .lb-route:first-of-type{border-top:0}
.lagebild .lb-route .nm{font-weight:600;font-size:14px;color:var(--lb-ink)}
.lagebild .lb-route .mt{color:var(--lb-ink3);font-size:12px;margin-top:3px}
.lagebild .lb-state{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 9px;white-space:nowrap;border:1px solid}
.lagebild .st-crit{color:#fca5a5;border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1)}
.lagebild .st-warn{color:#fcd34d;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.lagebild .st-ok{color:#6ee7b7;border-color:rgba(16,185,129,.38);background:rgba(16,185,129,.1)}
.lagebild .lb-more{display:inline-block;margin-top:12px;font-size:12.5px;color:#ffb694;text-decoration:none;
  border-bottom:1px solid rgba(255,107,53,.4)}
.lagebild .lb-more:hover{color:#fff}

/* Ereignisse */
.lagebild .lb-events{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--lb-line);
  border:1px solid var(--lb-line);border-radius:14px;overflow:hidden;margin-top:clamp(14px,2vw,20px)}
.lagebild .lb-ev{background:#0e1018;padding:13px 15px}
.lagebild .lb-ev time{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--lb-amber);letter-spacing:.06em}
.lagebild .lb-ev h4{font-size:13.5px;font-weight:600;margin:5px 0 4px;color:var(--lb-ink)}
.lagebild .lb-ev p{margin:0;color:var(--lb-ink3);font-size:12.5px;line-height:1.5}
.lagebild .lb-ev .src{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#475569;margin-top:6px;display:block}
/* 18.09.: Die Quellenzeile verlinkt jetzt den Primaerbeleg. Ohne eigenes
   Aussehen liest sie sich wie toter Text und wird nicht angeklickt. */
.lagebild .lb-ev a.src{color:var(--lb-ink3);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.16)}
.lagebild .lb-ev a.src:hover,.lagebild .lb-ev a.src:focus-visible{color:var(--lb-amber);border-bottom-color:currentColor}

@media (max-width:900px){
  .lagebild .lb-grid{grid-template-columns:minmax(0,1fr)}
  .lagebild .lb-grid>*{min-width:0}
  .lagebild .lb-price b{font-size:34px}
}
@media (max-width:520px){
  /* 13.09.: die vier Zeitknoepfe brachen sonst 3+1 um (fr 361px bei 315px
     Platz). Zwei gleiche Spalten stehen in jeder Sprache ruhig. */
  .lagebild .lb-ranges{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .lagebild .lb-ranges button{padding:7px 8px;text-align:center}
}
@media (prefers-reduced-motion:reduce){.lagebild *{transition:none!important;animation:none!important}}

/* ---- Leuchtende Status-Chips ---------------------------------------- */
.lagebild .lb-state{position:relative}
.lagebild .st-crit{color:#fca5a5;border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.12);
  box-shadow:0 0 16px -3px rgba(239,68,68,.7);animation:lbGlowCrit 3.4s ease-in-out infinite}
.lagebild .st-warn{color:#fcd34d;border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.12);
  box-shadow:0 0 16px -3px rgba(245,158,11,.65);animation:lbGlowWarn 4.2s ease-in-out infinite}
.lagebild .st-ok{color:#6ee7b7;border-color:rgba(16,185,129,.46);background:rgba(16,185,129,.12);
  box-shadow:0 0 14px -4px rgba(16,185,129,.55)}
.lagebild .lb-state::before{content:"";width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:1px}
.lagebild .st-crit::before{background:#ef4444;box-shadow:0 0 8px 0 rgba(239,68,68,.9)}
.lagebild .st-warn::before{background:#f59e0b;box-shadow:0 0 8px 0 rgba(245,158,11,.85)}
.lagebild .st-ok::before{background:#10b981;box-shadow:0 0 8px 0 rgba(16,185,129,.8)}
@keyframes lbGlowCrit{0%,100%{box-shadow:0 0 12px -3px rgba(239,68,68,.5)}50%{box-shadow:0 0 22px 0 rgba(239,68,68,.75)}}
@keyframes lbGlowWarn{0%,100%{box-shadow:0 0 12px -3px rgba(245,158,11,.45)}50%{box-shadow:0 0 20px 0 rgba(245,158,11,.7)}}

/* Status-Erklaerung unter der Routenliste */
.lagebild .lb-legendbox{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.07)}
.lagebild .lb-legendbox h4{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lb-ink2);margin:0 0 9px;font-weight:500}
.lagebild .lb-legrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:baseline;margin-bottom:7px}
.lagebild .lb-legrow p{margin:0;font-size:12px;color:var(--lb-ink3);line-height:1.45}
.lagebild .lb-why{margin:12px 0 0;font-size:12.5px;color:var(--lb-ink2);line-height:1.5}

/* ---- Mini-Komposition im Hero (v2) ---------------------------------- */
.lb-mini{--lb-line:rgba(255,255,255,.1);--lb-ink:#f8fafc;--lb-ink2:#94a3b8;--lb-ink3:#7c8899;
  position:relative;width:min(100%,820px);margin:26px auto 30px;padding:14px 18px 16px;border-radius:18px;text-align:left;
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(255,107,53,.12),transparent 55%),
    linear-gradient(180deg,rgba(22,26,35,.9),rgba(12,14,21,.78));
  border:1px solid var(--lb-line);box-shadow:0 26px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb-mini .m-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.07)}
.lb-mini .m-live{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lb-ink2)}
.lb-mini .m-dot{width:7px;height:7px;border-radius:50%;background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.16),0 0 12px 0 rgba(16,185,129,.55);animation:lbPulse 2.8s ease-in-out infinite}
@keyframes lbPulse{0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.16),0 0 10px 0 rgba(16,185,129,.45)}
  50%{box-shadow:0 0 0 6px rgba(16,185,129,.06),0 0 18px 2px rgba(16,185,129,.65)}}
.lb-mini .m-stamp{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--lb-ink3);white-space:nowrap}

.lb-mini .m-body{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;gap:clamp(14px,2.4vw,26px);align-items:center}
.lb-mini .m-price{display:flex;flex-direction:column;gap:3px;min-width:130px}
.lb-mini .m-lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--lb-ink3)}
.lb-mini .m-val{font-family:var(--ff-display,'Barlow Condensed',sans-serif);font-size:clamp(30px,3.6vw,40px);font-weight:700;
  line-height:1;color:var(--lb-ink);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.lb-mini .m-val span{font-size:13px;color:var(--lb-ink2);font-weight:600;margin-left:5px;letter-spacing:.04em}
.lb-mini .m-delta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#fca5a5}
.lb-mini .m-delta.dn{color:#6ee7b7}
.lb-mini .m-spark{display:block;height:56px;border-radius:10px;text-decoration:none}
.lb-mini .m-spark svg{display:block;width:100%;height:56px}
.lb-mini .m-routes{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:340px}
.lb-mini .m-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid;border-radius:999px;padding:5px 11px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.04em;text-decoration:none;white-space:nowrap;
  transition:filter .15s,transform .15s}
.lb-mini .m-chip i{width:6px;height:6px;border-radius:50%;display:inline-block}
.lb-mini .m-chip.st-crit{color:#fca5a5;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.1);
  box-shadow:0 0 14px -3px rgba(239,68,68,.65);animation:lbGlowCrit 3.4s ease-in-out infinite}
.lb-mini .m-chip.st-crit i{background:#ef4444;box-shadow:0 0 8px 0 rgba(239,68,68,.9)}
.lb-mini .m-chip.st-warn{color:#fcd34d;border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.1);
  box-shadow:0 0 14px -3px rgba(245,158,11,.6);animation:lbGlowWarn 4.2s ease-in-out infinite}
.lb-mini .m-chip.st-warn i{background:#f59e0b;box-shadow:0 0 8px 0 rgba(245,158,11,.85)}
.lb-mini .m-chip.st-ok{color:#6ee7b7;border-color:rgba(16,185,129,.42);background:rgba(16,185,129,.1);
  box-shadow:0 0 12px -4px rgba(16,185,129,.5)}
.lb-mini .m-chip.st-ok i{background:#10b981;box-shadow:0 0 8px 0 rgba(16,185,129,.8)}
.lb-mini .m-chip:hover{filter:brightness(1.25);transform:translateY(-1px)}
.lb-mini .m-chip:focus-visible{outline:2px solid #ff6b35;outline-offset:2px}

@media (max-width:860px){
  .lb-mini{margin:20px auto 26px;padding:12px 14px 14px}
  .lb-mini .m-body{grid-template-columns:1fr;gap:12px;justify-items:center;text-align:center}
  .lb-mini .m-price{align-items:center;min-width:0}
  .lb-mini .m-spark{width:100%;height:44px}
  .lb-mini .m-spark svg{height:44px}
  .lb-mini .m-routes{justify-content:center;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .lagebild .st-crit,.lagebild .st-warn,.lb-mini .m-chip,.lb-mini .m-dot{animation:none}
}

/* ---- Zeitraum-Buttons leuchten ------------------------------------- */
.lagebild .lb-ranges button{transition:box-shadow .18s,border-color .18s,color .18s,background .18s}
.lagebild .lb-ranges button:hover{border-color:rgba(255,107,53,.45);color:#ffb694;
  box-shadow:0 0 14px -4px rgba(255,107,53,.7)}
.lagebild .lb-ranges button[aria-pressed="true"]{box-shadow:0 0 16px -3px rgba(255,107,53,.75),inset 0 0 12px -6px rgba(255,107,53,.9)}