/* Upgrade-Entscheidungshilfe „Wird unsere Anwendung durch ein Upgrade schneller?“ (Entwurf, 23.10.2026).
   Nur Ergänzungen zu site.css mit Präfix upg-: Layout mit mitlaufendem Inhaltsverzeichnis, Treppe (Stufe 0–3), Stufenmarke, Versuchsblock mit
   Etiketten, Hinweis über der Lese-Abfrage, Tabellen-Hülle, Hero-Karte, CTA mit h2, Weiterlesen 2 × 2.
   JavaScript (upg.js) nur für das Inhaltsverzeichnis; ohne es bleibt alles statisch lesbar. Eingetragen in ENTWURF_ASSETS (build-release.py). */

/* Layout mit Inhaltsverzeichnis (Kopie von bpc.css, Präfix upg-): Desktop mitlaufend rechts neben dem Artikel, unter 1101 px
   oben als einklappbare, haftende Leiste mit dem aktuellen Abschnitt (upg.js). Ohne JavaScript steht es oben, geöffnet. */
.upg-layout{display:grid;grid-template-columns:minmax(0,820px) 250px;gap:56px;justify-content:center;align-items:start}
.upg-layout .article{max-width:none;min-width:0}
.upg-toc{order:2;position:sticky;top:110px;font-size:.86rem;max-height:calc(100vh - 130px);overflow:auto;scrollbar-width:thin}
.upg-toc summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:4px 0 12px}
.upg-toc summary::-webkit-details-marker{display:none}
.upg-toc .upg-toc-aktuell{display:none}
.upg-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.upg-toc li a{display:block;padding:6px 0 6px 16px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none;line-height:1.35;transition:color .2s,border-color .2s}
.upg-toc li a b{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-bottom:2px}
.upg-toc li a:hover{color:var(--blue)}
.upg-toc li a.aktiv{color:var(--ink);font-weight:600;border-left-color:var(--orange)}
.upg-toc li a.aktiv > b{color:var(--orange)}
@media (max-width:1100px){
  .upg-layout{grid-template-columns:minmax(0,820px);gap:0}
  .upg-toc{position:static;order:0;top:78px;z-index:30;margin:0 0 18px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;padding:4px 16px;box-shadow:0 8px 24px rgba(5,28,44,.08);max-height:none;overflow:visible}
  .upg-toc summary{display:flex;justify-content:space-between;gap:12px;padding:10px 0}
  .upg-toc summary::after{content:"▾";color:var(--muted)}
  .upg-toc details[open] summary::after{content:"▴"}
  .upg-toc .upg-toc-aktuell{display:inline;font-family:var(--text);text-transform:none;letter-spacing:0;font-size:.86rem;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
  .upg-toc ol{max-height:60vh;overflow:auto;margin-bottom:10px}
  .upg-bereit .upg-toc{position:sticky}
}
@media print{.upg-toc{display:none !important}}

/* Treppe: vier Stufen, links heute, rechts Funktionen. Statisch; Text ist echter Text. */
.upg-treppe{margin:30px 0 8px}
.upg-treppe ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:end}
.upg-treppe li{--h:0;display:flex;flex-direction:column;justify-content:flex-start;min-height:calc(96px + var(--h) * 46px);padding:14px 14px 16px;border-radius:12px 12px 0 0;background:var(--blue-100);border-top:4px solid var(--blue);box-sizing:border-box}
.upg-treppe li:nth-child(1){--h:0;background:#eef2f5;border-top-color:#8193a1}
.upg-treppe li:nth-child(2){--h:1}
.upg-treppe li:nth-child(3){--h:2}
.upg-treppe li:nth-child(4){--h:3;border-top-color:var(--orange)}
.upg-treppe .upg-st{font:500 .72rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.upg-treppe .upg-sn{font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1.2;color:var(--ink);margin:4px 0 6px}
.upg-treppe .upg-sa{font-size:.86rem;line-height:1.4;color:var(--ink-2)}
.upg-treppe-boden{height:4px;background:var(--ink-2);border-radius:2px;opacity:.25}
.upg-treppe figcaption{margin-top:12px;font-size:.88rem;color:var(--muted)}
@media (max-width:640px){
  .upg-treppe ol{grid-template-columns:1fr;gap:6px;align-items:stretch}
  .upg-treppe li{min-height:0;margin-left:calc(var(--h) * 18px);border-radius:10px;border-top:0;border-left:4px solid var(--blue)}
  .upg-treppe li:nth-child(1){border-left-color:#8193a1}
  .upg-treppe li:nth-child(4){border-left-color:var(--orange)}
  .upg-treppe-boden{display:none}
}

/* Stufenmarke in den Versuchen: kleine Treppe, aktive Stufen orange */
.upg-marke{display:inline-flex;align-items:center;gap:10px;margin:0 0 4px;font:500 .74rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.upg-marke-bild{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.upg-marke-bild i{display:block;width:6px;background:var(--line);border-radius:1px}
.upg-marke-bild i:nth-child(1){height:4px}.upg-marke-bild i:nth-child(2){height:8px}
.upg-marke-bild i:nth-child(3){height:12px}.upg-marke-bild i:nth-child(4){height:16px}
.upg-marke-bild i.an{background:var(--orange)}
.article .upg-marke + h2{margin-top:.2em}
.article .upg-marke{margin-top:2.2em}

/* Versuchsblock: Erwartung / Änderung / Beobachtung / Folgerung */
.upg-versuch{margin:22px 0;border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 22px}
.upg-versuch > p{margin:14px 0}
.upg-xl{display:inline-block;font:600 .64rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-right:6px;vertical-align:.12em;background:#eef2f5;color:var(--ink-2);border:1.5px solid transparent;white-space:nowrap}
.upg-xl[data-x="erwartung"]{background:#fff;border:1.5px dashed #8193a1}
.upg-xl[data-x="aenderung"]{background:#fff;border-color:var(--ink-2);color:var(--ink)}
.upg-xl[data-x="beobachtung"]{background:var(--navy);color:#fff}
.upg-xl[data-x="folgerung"]{background:var(--orange-100);color:#9a3412}

/* Tabellen: eigene Scrollfläche statt Seitenüberbreite */
.upg-tw{overflow-x:auto;margin:14px 0;-webkit-overflow-scrolling:touch}
.upg-tw .table{min-width:520px}
.upg-tw .table td:first-child{min-width:13em}
.upg-tw .table td.n,.upg-tw .table th.n{text-align:right;white-space:nowrap}
.upg-tw-stufen .table{min-width:0}

/* Hinweis über der Lese-Abfrage */
.upg-lesend{display:inline-flex;align-items:center;gap:8px;margin:18px 0 -8px;padding:6px 12px;border-radius:999px;background:#e7f5ee;color:#14532d;font-size:.9rem;font-weight:600}
.upg-lesend::before{content:"";width:8px;height:8px;border-radius:50%;background:#16a34a}

/* Hero-Karte: Kurzfassung aus Versuch 1 */
.upg-karte{padding:18px 22px 20px;color:#cfe0ec}
.upg-karte dl{margin:0;display:grid;gap:14px}
.upg-karte dt{font:500 .72rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7fa3bd;margin-bottom:6px}
.upg-karte dd{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.upg-karte dd span{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;font-size:.82rem;line-height:1.35}
.upg-karte dd b{display:block;font-family:var(--display);font-weight:600;font-size:1.25rem;color:#fff}
.upg-karte dd span:last-child b{color:#f7b27a}
.upg-karte a{display:inline-block;margin-top:14px;color:#9ccbea;font-size:.88rem}

/* CTA als Abschnitt mit h2 (Gestalt wie .art-cta h3) */
.art-cta h2{color:#fff;font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;margin:10px 0 12px;text-wrap:balance}

/* Weiterlesen: vier Karten als 2 × 2 */
.upg-related{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.upg-related{grid-template-columns:1fr}}

/* Quellenzeile */
.upg-quellen a{word-break:break-word}

/* Sprungziele unter der festen Kopfleiste sichtbar halten (wie bpc-ab, 23.10.2026) */
.upg-artikel section[id]{scroll-margin-top:100px}
@media (max-width:1100px){.upg-artikel section[id]{scroll-margin-top:150px}}