/* ============================================================
   Demo-Anwendungen — gemeinsame Bausteine
   Jede Demo bringt darüber hinaus ihr eigenes Chrome mit.
   ============================================================ */

.demo-strip{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:70;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 18px; background:var(--surface); border-bottom:1px solid var(--line);
  font-size:13px;
}
.demo-strip__back{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink-2); }
.demo-strip__back:hover{ color:var(--ink); }
.demo-strip__flag{
  display:inline-flex; align-items:center; gap:7px; margin-left:auto;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--amber); background:var(--amber-soft); border:1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius:999px; padding:4px 11px;
}
.demo-strip__flag i{ width:5px; height:5px; border-radius:50%; background:currentColor; display:block; }
.demo-strip__cta{ flex:none; }

/* ---------- Dokumentations-Artikel ---------- */
/* Der Artikel selbst darf breit sein — die Lesebreite gilt nur für Fließtext.
   Karten, Code, Ketten und Tabellen nutzen die volle Spalte, sonst werden die
   Quellen-Steckbriefe zu zweit auf 78 Zeichen zusammengequetscht. */
.doc{ max-width:1060px; display:flex; flex-direction:column; gap:26px; }
.doc p, .doc ul, .doc ol, .doc .doc__note{ max-width:74ch; }
.doc__lead{ font-size:17px; line-height:1.62; color:var(--ink-2); max-width:74ch; }
.doc section{ display:flex; flex-direction:column; gap:12px; scroll-margin-top:110px; }
.doc h2{ font-family:var(--font-display); font-size:clamp(23px,3vw,30px); font-weight:600; letter-spacing:-.028em; }
.doc h3{
  font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:11px; padding-top:8px; border-top:1px solid var(--line);
}
.doc h3 em{
  font-style:normal; font-family:var(--font-mono); font-size:11.5px; color:var(--accent);
  letter-spacing:.04em; flex:none;
}
.doc h4{ font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:-.015em; margin-top:6px; }
.doc p{ font-size:15.2px; line-height:1.68; color:var(--ink-2); }
.doc p strong, .doc li strong{ color:var(--ink); font-weight:600; }
.doc ul, .doc ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.doc li{ font-size:15.2px; line-height:1.62; color:var(--ink-2); }
.doc code{
  font-family:var(--font-mono); font-size:12.8px; background:var(--surface-3);
  border-radius:5px; padding:2px 5px; color:var(--ink);
}
.doc pre{
  margin:0; overflow-x:auto; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px 16px;
}
.doc pre code{ background:none; padding:0; font-size:12.4px; line-height:1.72; display:block; white-space:pre; color:var(--ink-2); }
.doc pre .kw{ color:var(--accent); }
.doc pre .cm{ color:var(--ink-4); font-style:italic; }
.doc__note{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:13px 16px;
}
.doc__note p{ color:var(--ink-2); font-size:14.5px; }
.doc__warn{ border-left-color:var(--amber); background:var(--amber-soft); }

/* Quellen-Steckbrief */
.srccard{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  padding:15px 16px; display:flex; flex-direction:column; gap:10px;
}
.srccard__h{ display:flex; align-items:center; gap:10px; }
.srccard__ico{
  width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-ink);
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
}
.srccard__n{ font-family:var(--font-display); font-weight:600; font-size:15.5px; letter-spacing:-.018em; }
.srccard__way{ margin-left:auto; }
.srccard{ container-type:inline-size; }
.srccard dl{ margin:0; display:grid; grid-template-columns:112px minmax(0,1fr); gap:9px 16px; }
.srccard dt{ font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); padding-top:3px; }
.srccard dd{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.55; overflow-wrap:anywhere; }
.srccard dd code{ font-size:12.2px; padding:1px 4px; }
/* Bei schmaler Karte stapeln — Containerbreite, nicht Fensterbreite, ist hier
   das richtige Maß: im Sidebar-Layout ist das Fenster breit und die Karte eng. */
@container (max-width: 330px){
  .srccard dl{ grid-template-columns:1fr; gap:2px 0; }
  .srccard dt{ margin-top:9px; }
}
@supports not (container-type: inline-size){
  @media (max-width:560px){ .srccard dl{ grid-template-columns:1fr; gap:2px 0; } .srccard dt{ margin-top:9px; } }
}

.srcgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); gap:14px; }
@media (max-width:420px){ .srcgrid{ grid-template-columns:1fr; } }

/* Mapping-Kette */
.chain{ display:flex; flex-direction:column; gap:8px; }
.chain__i{
  display:grid; grid-template-columns:146px minmax(0,1fr); gap:12px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); padding:9px 12px;
}
.chain__s{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.chain__f{ font-family:var(--font-mono); font-size:12px; color:var(--ink); font-variant-numeric:tabular-nums; }
.chain__out{
  border:1px solid var(--accent-line); background:var(--accent-soft); color:var(--accent-ink);
  border-radius:var(--r-sm); padding:11px 12px; font-family:var(--font-mono); font-size:12px;
}
@media (max-width:620px){ .chain__i{ grid-template-columns:1fr; gap:3px; } }
.chain__f{ overflow-wrap:anywhere; }

/* Inhaltsverzeichnis */
.toc{ display:flex; flex-direction:column; gap:3px; }
.toc a{
  text-decoration:none; color:var(--ink-3); font-size:13.5px; padding:6px 10px; border-radius:7px;
  border-left:2px solid transparent; transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.toc a:hover{ color:var(--ink); background:var(--surface-2); }
.toc a.is-active{ color:var(--accent-ink); border-left-color:var(--accent); background:var(--accent-soft); }

/* Abschluss-CTA auf den Demo-Seiten */
.demo-end{
  border:1px solid var(--accent-line); border-radius:var(--r-xl);
  background:linear-gradient(180deg, var(--accent-soft), var(--surface) 55%);
  padding:clamp(24px,4vw,44px); display:flex; flex-direction:column; align-items:center;
  gap:14px; text-align:center;
}