/* Page-CSS diktat.html (ehem. <style>-Block; CSP-Externalisierung 11.07.2026;
   lädt NACH site.css – Kaskaden-Reihenfolge beibehalten!) */
#d-ui{scroll-margin-top:84px}
:root{--red-dark:#c1181e;--ink-soft:#3c3c44;--shadow-sheet:none;--ok:#1c7c3c;--ok-soft:#e8f5ec;--warn:#b06f00;--warn-soft:#fff8ec;--paper:#f6f4ec}
/* ===== Werkbank-Leiste: Suche + Artikel-Kette (V5, 08.07.2026) ===== */
/* Balken-Anker: Spine hängt optisch HINTER der Werkbank-Leiste, Niete vorn (Stefan, 08.07.) */
.pf-spine{top:-46px}
.pf-spine::before{display:none}   /* Niete sitzt hier auf der Leiste, nicht am Track */
.pf-fill{top:-46px;border-top:46px solid var(--red)}

  
  .bastel-badge{display:inline-flex;align-items:center;gap:7px;background:var(--red);color:#fff;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:5px 13px;vertical-align:middle}
  .bastel-badge svg{width:13px;height:13px}
  .eyebrow .eb-rest{margin-left:10px;vertical-align:middle}
.bastel-line{margin:2px 0 16px;font-size:.98rem;color:var(--muted)}
  .w-intro{max-width:none} /* Demo-Seite: Lead nutzt die volle Kastenbreite (Stefan 05.07.) */
  .yeandi-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#191925;border:1px solid #2b2b38;border-bottom:3px solid #13b5a6;border-radius:14px;padding:18px 20px;margin:16px 0 8px}
  .yeandi-card img{width:56px;height:56px;flex:none;border-radius:14px}
  .yeandi-tx{flex:1;min-width:230px}
  .yeandi-tx .wordmark{display:block;font-size:1.25rem;font-weight:800;color:#fff;letter-spacing:-.01em}
  .yeandi-tx .wordmark span{color:#13b5a6}
  .yeandi-tx .slogan{display:block;margin-top:2px;color:#b9bcc2;font-size:.95rem}
  .yeandi-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
  .yeandi-badges span{font-size:.72rem;font-weight:700;color:#e6e8eb;border:1px solid #34344a;background:#121019;border-radius:999px;padding:4px 10px}
  .yeandi-badges b{color:#13b5a6;font-weight:700}
  .sec a.yeandi-btn{color:#0c1513}
  .sec a.yeandi-btn:hover{color:#fff}
  .yeandi-btn{flex:none;font:inherit;font-weight:700;color:#0c1513;background:#13b5a6;border-radius:10px;padding:11px 18px;text-decoration:none}
  .yeandi-btn:hover{background:#0c9488;color:#fff}
  @media print{.yeandi-card{display:none}}
  .d-optin,.d-panel{border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:20px 20px 16px;margin:22px 0}
  .d-optin p{margin:0 0 12px;color:var(--ink-soft)}
  .d-optin .small,.d-panel .small{font-size:.88rem;color:var(--muted)}
  .d-models{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin:0 0 14px}
  .d-model{display:block;cursor:pointer}
  .d-model input{position:absolute;opacity:0}
  .d-model .card{display:block;height:100%;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);padding:14px 16px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
  .d-model:hover .card{transform:translateY(-4px);border-color:var(--red);box-shadow:0 14px 34px rgba(176,31,36,.16)}
  .d-model:hover input:checked + .card{box-shadow:0 0 0 1px var(--red),0 14px 34px rgba(176,31,36,.16)}
  @media (prefers-reduced-motion:reduce){.d-model .card{transition:border-color .18s ease,box-shadow .18s ease}.d-model:hover .card{transform:none}}
  .d-model input:checked + .card{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
  .d-model .t{display:block;font-weight:700;color:var(--ink)}
  .d-model .s{display:block;font-size:.88rem;color:var(--muted);margin-top:4px;line-height:1.5}
  .d-start{font:inherit;font-weight:700;font-size:1rem;color:#fff;background:var(--red);border:0;border-radius:10px;padding:12px 22px;cursor:pointer}
  .d-start:hover{background:var(--red-dark)}
  .d-start[disabled]{opacity:.55;cursor:default}
  .d-status{margin:10px 0 0;font-size:.92rem;color:var(--muted);min-height:1.4em}
  .d-modes{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:0 0 16px}
  .d-modes button{font:inherit;font-size:.88rem;padding:7px 16px;border:0;background:var(--bg);color:var(--ink);cursor:pointer}
  .d-modes button[aria-pressed="true"]{background:var(--red);color:#fff;font-weight:700}
  .d-recrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 14px}
  .d-rec{font:inherit;font-weight:700;font-size:1rem;color:#fff;background:var(--red);border:0;border-radius:999px;padding:13px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
  .d-rec:hover{background:var(--red-dark)}
  .d-rec[disabled]{opacity:.55;cursor:default}
  .d-rec .dot{width:10px;height:10px;border-radius:50%;background:#fff}
  .d-rec.live .dot{animation:dblink 1s infinite}
  @keyframes dblink{50%{opacity:.25}}
  @media (prefers-reduced-motion:reduce){.d-rec.live .dot{animation:none}}
  .d-timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);min-width:52px}
  .d-level{flex:1 1 160px;max-width:260px;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
  .d-level i{display:block;height:100%;width:0;background:var(--red);transition:width .08s linear}
  .d-out{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:16px;margin:14px 0 6px}
  .d-out[hidden]{display:none}
  .d-out .txt{white-space:pre-wrap;color:var(--ink);font-size:1.05rem;line-height:1.65;min-height:1.6em}
  .d-out .meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:.85rem;color:var(--muted)}
  .d-copy{font:inherit;font-size:.85rem;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);cursor:pointer}
  .d-copy:hover{border-color:var(--red);color:var(--red)}
  @media print{.d-optin,.d-panel{display:none}}

/* Mehr aus der Werkstatt */