/* SQL Server und Azure (Entwurf, 27.10.2026): gemeinsame Ergänzungen der drei Seiten Leistung, Plattformvergleich und
   Performance nach der Migration. Quelle: Plaene/SQL-Server-Azure/. Nur Ergänzungen zu site.css mit Präfix azr-.
   Seiteneigene Visuals stehen in azr-leistung.css, azr-vergleich.css und azr-performance.css.
   Bis 27.10.2026 in ENTWURF_ASSETS (build-release.py); seit dem Livegang (vorbereitet 27.10.2026) an den Zieladressen. */

/* ------------------------------------------------------------------ Layout mit Inhaltsverzeichnis (Muster upg.css) */
.azr-layout{display:grid;grid-template-columns:minmax(0,820px) 250px;gap:56px;justify-content:center;align-items:start}
.azr-layout .article{max-width:none;min-width:0}
.azr-toc{order:2;position:sticky;top:110px;font-size:.86rem;max-height:calc(100vh - 130px);overflow:auto;scrollbar-width:thin}
.azr-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}
.azr-toc summary::-webkit-details-marker{display:none}
.azr-toc .azr-toc-aktuell{display:none}
.azr-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.azr-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}
.azr-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}
.azr-toc li a:hover{color:var(--blue)}
.azr-toc li a.aktiv{color:var(--ink);font-weight:600;border-left-color:var(--orange)}
.azr-toc li a.aktiv > b{color:var(--orange)}
.azr-toc-weiter{margin:18px 0 0;padding:14px 0 0 16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.azr-toc-weiter a{display:block;margin-top:6px;color:var(--blue);text-decoration:none;font-weight:600}
@media (max-width:1100px){
  .azr-layout{grid-template-columns:minmax(0,820px);gap:0}
  .azr-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}
  .azr-toc summary{display:flex;justify-content:space-between;gap:12px;padding:10px 0}
  .azr-toc summary::after{content:"▾";color:var(--muted)}
  .azr-toc details[open] summary::after{content:"▴"}
  .azr-toc .azr-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}
  .azr-toc ol{max-height:60vh;overflow:auto;margin-bottom:10px}
  .azr-toc-weiter{display:none}
  .azr-bereit .azr-toc{position:sticky}
}
@media print{.azr-toc{display:none !important}}

/* ------------------------------------------------------------------ Abbildungsrahmen für Visuals
   Aufbau: <figure class="azr-fig" data-azr-ablauf="5000">
             <div class="azr-fig-kopf"><span class="azr-art">Strukturmodell</span><span class="azr-fig-titel">…</span>
               <button class="azr-btn" type="button" data-azr-play>Ablauf ansehen</button></div>
             <div class="azr-fig-buehne">…</div>
             <figcaption>…</figcaption></figure>
   Art: Strukturmodell | Lehrbeispiel | illustrativ (Belegprinzip aus dem Visualkonzept). Endzustand ist immer der statische Zustand. */
.azr-fig{margin:30px 0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.azr-fig-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--blue-50)}
.azr-art{display:inline-block;font:600 .64rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:#fff;color:var(--ink-2);border:1.5px dashed #8193a1;white-space:nowrap}
.azr-art[data-art="lehrbeispiel"]{border-style:solid;border-color:var(--orange);color:#9a3412;background:var(--orange-100)}
.azr-fig-titel{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--ink);flex:1 1 auto;min-width:12em}
.azr-fig-buehne{padding:22px 20px 18px;position:relative}
.azr-fig figcaption{padding:12px 18px 14px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.45;color:var(--muted)}
.azr-fig figcaption b{color:var(--ink-2)}
.azr-dunkel{background:var(--navy);border-color:var(--navy-2);color:#e7eef4}
.azr-dunkel .azr-fig-kopf{background:var(--navy-2);border-color:rgba(255,255,255,.08)}
.azr-dunkel .azr-fig-titel{color:#fff}
.azr-dunkel figcaption{border-color:rgba(255,255,255,.08);color:#a9bccb}

/* Schaltflächen: Ablauf starten, Auswahl (Segmente) */
.azr-btn{display:inline-flex;align-items:center;gap:8px;font:600 .82rem/1 var(--text);padding:8px 14px;border-radius:999px;border:1.5px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer;transition:background .2s,color .2s}
.azr-btn::before{content:"▶";font-size:.7em}
.azr-btn:hover,.azr-btn:focus-visible{background:var(--blue);color:#fff}
.azr-btn[aria-busy="true"]{opacity:.55;pointer-events:none}
.azr-wahl{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:#eef2f5;border:1px solid var(--line)}
.azr-wahl button{font:600 .82rem/1 var(--text);padding:8px 14px;border-radius:999px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.azr-wahl button[aria-pressed="true"]{background:var(--navy);color:#fff}
.azr-wahl button:focus-visible,.azr-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.azr-zustand{margin:14px 0 0;font-size:.92rem;line-height:1.5;color:var(--ink-2);min-height:1.5em}
.azr-zustand b{color:var(--ink)}

/* Kleine Marken in Abbildungen: übernehmen / anpassen / prüfen, offen */
.azr-marke{display:inline-block;font:600 .62rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:#eef2f5;color:var(--ink-2);white-space:nowrap}
.azr-marke[data-azr-m="uebernehmen"]{background:#e7f5ee;color:#14532d}
.azr-marke[data-azr-m="anpassen"]{background:var(--orange-100);color:#9a3412}
.azr-marke[data-azr-m="pruefen"]{background:var(--blue-100);color:var(--blue-700)}
.azr-marke[data-azr-m="offen"]{background:#fff;border:1.5px dashed #8193a1}

/* Tabellen: eigene Scrollfläche statt Seitenüberbreite (Muster upg-tw) */
.azr-tw{overflow-x:auto;margin:14px 0;-webkit-overflow-scrolling:touch}
.azr-tw .table{min-width:620px}
.azr-tw .table td:first-child,.azr-tw .table th:first-child{min-width:11em}

/* Quellenzeile, Hinweis „Lehrbeispiel“ im Fließtext */
.azr-quellen{font-size:.86rem;color:var(--muted);line-height:1.6}
.azr-hinweis{margin:18px 0;padding:12px 16px;border-left:3px solid var(--orange);background:var(--orange-100);border-radius:0 10px 10px 0;font-size:.92rem;color:#5b2a06}

/* Lange Artikeltitel im Hero mit schwebender Karte (Muster hc-hero/bt-hero) */
.page-hero.with-shot.azr-hero .wrap > h1{font-size:clamp(2.2rem,3.6vw,3.5rem)}

/* Ausgeblendete Zustände bleiben ausgeblendet, auch wenn Seiten-CSS display setzt */
.azr-fig [hidden]{display:none !important}

/* Fließtext nach einer Schrittliste (site.css .steps) */
.article .steps + p{margin-top:28px}

/* Auswahl mit Umbruch auf schmalen Bildschirmen */
@media (max-width:640px){.azr-wahl{border-radius:16px}}

/* Weiterlesen 2 × 2 wie im Upgrade-Beitrag */
.azr-related{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.azr-related{grid-template-columns:1fr}.azr-fig-buehne{padding:18px 14px 14px}}

/* Bewegung: Endzustand sofort, wenn reduzierte Bewegung gewünscht */
@media (prefers-reduced-motion:reduce){
  .azr-fig *,.azr-fig *::before,.azr-fig *::after{transition:none !important;animation:none !important}
  .azr-btn[data-azr-play]{display:none}
}