/* Page-CSS security-header-csp-haertung.html (ehem. <style>-Block; CSP-Externalisierung 11.07.2026;
   lädt NACH site.css – Kaskaden-Reihenfolge beibehalten!) */
/* ===== Werkstatt-Artikel im Flow-Design (Muster: Cookie-Seite, migriert 08.07.2026) ===== */
/* ===== Werkbank-Leiste: Suche + Artikel-Kette ===== */
.pf-spine{top:-46px}
.pf-spine::before{display:none}
.pf-fill{top:-46px;border-top:46px solid var(--red)}
/* ===== Artikel-Bausteine ===== */
/* Alt-Bausteine der Werkstatt, hell adaptiert */
.code,pre.code{position:relative;margin:1.2em 0}
.code pre,pre.code{background:#20242b;color:#e8e9ec;border-radius:12px;padding:16px 20px;overflow-x:auto;font-size:.88rem;line-height:1.55;box-shadow:0 10px 24px rgba(28,28,34,.18);margin:0}
.code code{font-family:ui-monospace,Consolas,monospace}
.code-cap{font-size:.9rem;color:var(--sm,#5b6068);margin:0 0 .5em}
.code-copy{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;font-size:.78rem;font-weight:600;font-family:inherit;color:#cdd2d8;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:7px;cursor:pointer;opacity:.7;transition:opacity .15s ease,background .15s ease,color .15s ease}
.code-copy:hover,.code-copy:focus{opacity:1;background:rgba(255,255,255,.18);color:#fff;outline:none}
.code-copy.copied{color:#7ee0a0;border-color:rgba(126,224,160,.45);background:rgba(126,224,160,.12)}
/* Langes Skript: feste Hoehe mit eigenem Scrollbalken (Stefan, 31.07.2026). Diese Seite laedt
   werkstatt-artikel.css NICHT, deshalb hier dieselben Regeln - bei Aenderungen BEIDE pflegen. */
.page-flow .code-box{position:relative;margin:1.2em 0}
/* Knopf aus der Scrollbar-Spur heraus (Stefan, 31.07.2026) - identisch zu werkstatt-artikel.css */
.page-flow .code-box .code-copy{right:22px}
.page-flow .code-box pre.code{max-height:27rem;overflow:auto;margin:0;scrollbar-width:thin;scrollbar-color:#586173 #20242b}
.page-flow .code-box pre.code::-webkit-scrollbar{width:11px;height:11px}
.page-flow .code-box pre.code::-webkit-scrollbar-track{background:#191d23;border-radius:0 12px 12px 0}
.page-flow .code-box pre.code::-webkit-scrollbar-thumb{background:#586173;border:2px solid #20242b;border-radius:7px}
.page-flow .code-box pre.code::-webkit-scrollbar-thumb:hover{background:#6e788c}
.page-flow .code-box .code-hint{margin:6px 2px 0;font-size:.8rem;color:#7d7666;font-style:italic}
.result{margin:18px 0;padding:13px 17px;background:#fff;border-left:3px solid var(--red);border-radius:0 8px 8px 0;box-shadow:0 8px 20px rgba(120,96,44,.08)}
.result strong{color:var(--red)}
p code,li code{background:#f1e9d3;color:#8f181c;border-radius:5px;padding:1px 6px;font-size:.88em;font-family:ui-monospace,Consolas,monospace}
.faq{margin-top:6px}
.faq-item{border-top:1px solid #ddd2b8;padding:16px 0}
.faq-item:first-of-type{border-top:0}
.faq-item h3{margin:0 0 .35em}
.faq-item p{margin:0;color:var(--sm,#5b6068)}
/* Mehr aus der Werkstatt */
/* ===== uebernommene Sonder-Styles des Artikels ===== */

  .hdr-demo{border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:18px 18px 12px;margin:22px 0}
  .hdr-demo-head strong{display:block;color:var(--ink);margin-bottom:4px}
  .hdr-demo-head span{display:block;font-size:.92rem;color:var(--muted);margin-bottom:12px}
  .hdr-table{width:100%;border-collapse:collapse;font-size:.9rem}
  .hdr-table td{padding:7px 10px;border-top:1px solid var(--line);vertical-align:top}
  .hdr-table td:first-child{white-space:nowrap;font-family:Consolas,"Cascadia Code",monospace;font-size:.84rem;color:var(--ink)}
  .hdr-ok{color:var(--red);font-weight:700;white-space:nowrap}
  .hdr-miss{color:var(--muted);white-space:nowrap}
  .hdr-val{font-family:Consolas,"Cascadia Code",monospace;font-size:.78rem;color:var(--muted);word-break:break-all}
  .hdr-note{font-size:.85rem;color:var(--muted);margin:10px 0 2px}
  @media print{.hdr-demo{display:none}}


/* Integration ins Site-Design (Batch 08.07.2026): schlanker Hero ueber Artikel/Demo-Inhalt */