/* ════════════════════════════════════════════════════════════════════════
   1337BOT Cockpit · core/shell.css (Lane 0) — Rahmen, Listen, Karten, Detailspalte, Palette, Toasts, Mobil-Sheet.
   Übernommen aus Prototyp v21 (Z. 17-272), alle Regeln unter .cp (html.cp), Prototyp-Vorschauleiste und
   Entwickler-Notizen entfernt. Farben NUR als var(--…) aus core/tokens.css — keine Hex/rgb-Werte hier.
   Seiten-CSS (pages/<seite>.css) hängt ebenfalls unter .cp und nutzt dieselben Klassen.
   ════════════════════════════════════════════════════════════════════════ */
.cp *{box-sizing:border-box}
html.cp,.cp body{height:100%}
.cp body{margin:0;background:var(--bg);color:var(--text);font:15px/24px var(--sans);-webkit-font-smoothing:antialiased}
.cp button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.cp :focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.cp .btn.pri:focus-visible{outline-color:var(--text)}
.cp .inp,.cp select.sel,.cp .pick,.cp .stp,.cp .tgl,.cp .check .box{border-color:var(--ash)}
.cp .row{background:none;border:0;font:inherit;color:inherit;text-align:left;width:100%}
.cp .key{background:none;font:inherit;color:inherit;text-align:left;width:100%}
.cp .pi{background:none;border:0;font:inherit;color:inherit;text-align:left;width:100%}
.cp .pick{width:100%;text-align:left;font:inherit;color:inherit}
.cp .chipv{font:inherit}
.cp .insp-f{flex-wrap:wrap}
.cp .frow{flex-wrap:wrap}
.cp .confirm{flex:1 1 100%;margin-top:8px;padding:12px;border:1px solid var(--accent);background:var(--surface-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.cp .confirm b{flex:1 1 100%}
.cp .chipv,.cp .role{min-height:24px;display:inline-flex;align-items:center}
.cp .chips{gap:6px}
.cp textarea.inp{height:auto;min-height:72px;padding:8px 10px;resize:vertical;line-height:1.4;font:inherit}
.cp .sidebar .grp.collapsed .items{display:block}
.cp .sidebar .grp.collapsed .items .itemrow:not(.pinned){display:none}
/* ⚠ .grp-h .grp-n (Seitenzahl je Gruppe) ist ENTFERNT — Patrick 23.09.2026: „also die ziffern wieder
   entfernen." Damit fällt auch das margin-left:6px weg, das den Pfeil nur von der Ziffer abrücken sollte;
   den rechten Rand hält er über margin-left:auto weiter unten (Zeile ~139). Eine zweite Setzung hier
   gewänne nichts und wäre die zweite Zahl für dieselbe Sache. */
/* Zeile + Nadel liegen NEBENEINANDER (nie Knopf im Knopf). Die Nadel erscheint beim Überfahren oder wenn gepinnt. */
.cp .itemrow{display:flex;align-items:center;min-width:0}
.cp .itemrow .item{flex:1;min-width:0}
.cp .itemrow .pin{flex:0 0 auto;padding:0 8px;height:32px;display:inline-flex;align-items:center;background:none;border:0;cursor:pointer}
.cp .itemrow:hover .pin,.cp .itemrow .pin[aria-pressed="true"],.cp .itemrow .pin:focus-visible{opacity:1}
.cp .itemrow .pin[aria-pressed="true"]{color:var(--accent-t)}
/* Symbol je Zeile — dieselbe Zuordnung wie im alten Panel (shell.js NAV_SVG). */
.cp .item .nav-ico{flex:0 0 15px;opacity:.7;transition:opacity var(--fast)}
.cp .item:hover .nav-ico,.cp .item.active .nav-ico{opacity:1}
/* Wartung: Speichern sichtbar gesperrt, Grund steht in der Leiste (Befund 6). */
.cp .dirty.wartung{background:var(--surface-2);border-top-color:var(--border-2)}
.cp .dirty.wartung .msg{flex-basis:100%}
.cp .dirty .btn[disabled]{opacity:.5;cursor:not-allowed}
.cp .dirty{flex-wrap:wrap}
.cp .dirty .msg{flex:1 1 120px}
.cp .lead{margin:0 0 12px;color:var(--text-2);font-size:15px;line-height:24px;max-width:60ch}
.cp .prog{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 24px;font-size:12px;color:var(--text-2)}
.cp .prog .bar{width:120px;flex:0 0 auto}
.cp .bar{height:4px;background:var(--border);position:relative;display:block}
.cp .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--text-4);transition:width var(--slow) var(--ease-in-out)}
.cp .lnk{background:none;border:0;color:var(--text);font:inherit;cursor:pointer;padding:0;text-align:left;text-decoration:underline;text-decoration-color:var(--ash);text-underline-offset:3px}
.cp .lnk:hover{text-decoration-color:var(--text)}
.cp .ms{border:1px solid var(--border);padding:12px 16px;margin:0 0 24px;position:relative;overflow:hidden}
.cp .ms-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.cp .ms-h .m{font-size:12px}
.cp .ms-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.cp .ms-i{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border-2);padding:4px 8px;color:var(--text-2)}
.cp .ms-i.done{color:var(--ok);border-color:var(--ok-line)}
.cp .ms-i.done::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat}
.cp .ms.hit::after{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--ok);animation:sweep var(--slow) var(--ease-in-out) forwards}
@keyframes sweep{to{left:100%;opacity:0}}
.cp [hidden]{display:none!important}
.cp .insp-h .eyebrow,.cp .grp-h .eyebrow,.cp .diff-h .eyebrow,.cp .sect-h .eyebrow,.cp .ms-h .eyebrow,.cp .pal .eyebrow,.cp .prog .eyebrow{margin-bottom:0}
.cp .srv{background:none;border:0;color:inherit;font:inherit;display:flex;align-items:center;gap:8px;cursor:pointer;padding:0}
.cp .vers{background:none;border:0;font-size:12px;color:var(--text-3);cursor:pointer}
.cp .vers:hover{color:var(--text)}
.cp .setup{display:flex;flex-direction:column;border:1px solid var(--border)}
.cp .su{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px;border-bottom:1px solid var(--border)}
.cp .su:last-child{border-bottom:0}
.cp .su .lnk,.cp .su>span:not(.su-i):not(.m){flex:1}
.cp .su .m{font-size:12px;color:var(--text-3)}
.cp .su-i{width:10px;height:10px;border:1.5px solid var(--ash);flex:0 0 auto}
.cp .su.done .su-i{background:var(--ok);border-color:var(--ok)}
.cp .su-i.warn{border-color:var(--accent);background:var(--accent)}
.cp .su.done .lnk{color:var(--text-2)}
.cp .legal{display:flex;flex-wrap:wrap;gap:14px;font-size:13px}
.cp .legal a{color:var(--text-2)}
.cp .legal a:hover{color:var(--text)}
.cp .ms-i{background:none;cursor:pointer}
.cp .ms-i:hover{border-color:var(--text-3);color:var(--text)}
.cp .testres{flex:1 1 100%;font-size:12px;color:var(--text-2);padding-top:4px}
.cp .testres b{color:var(--ok);font-weight:600}
.cp .insp-f{flex-wrap:wrap}
.cp .toast .lnk{margin-left:8px}
.cp .f.flash{animation:flash 1.2s var(--ease-in-out)}
.cp .cp-kopf-satz{margin:-6px 0 16px;color:var(--text-2);font-size:15px;max-width:60ch}
@keyframes flash{0%,60%{box-shadow:inset 2px 0 0 var(--accent);background:var(--mar-tint)}100%{box-shadow:none;background:none}}
.cp .lockcard,.cp .fresh-card{display:none;border:1px solid var(--border-2);background:var(--surface);padding:16px;margin:0 0 24px;max-width:60ch}
.cp .lockcard p,.cp .fresh-card p{margin:8px 0}
.cp .lockcard .m,.cp .fresh-card .m{font-size:13px;color:var(--text-2)}
.cp body.tier-free .lockcard{display:block}
.cp body.tier-free .view[data-view="giveaway"] .list,.cp body.tier-free .view[data-view="giveaway"] .actions{display:none}
.cp body.tier-free .item[data-view="giveaway"] .lbl::after,.cp body.tier-free .item[data-view="builder"] .lbl::after{content:"Premium";margin-left:6px;font:600 9px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--border-2);padding:0 4px}
.cp body.fresh .fresh-card{display:block}
.cp body.fresh .view[data-view="dashboard"] .metrics,.cp body.fresh #livechip,.cp body.fresh #bellcnt{display:none}
.cp body.fresh .ms-i.done:not(.fdone){color:var(--text-2);border-color:var(--border-2)}
.cp body.fresh .ms-i.done:not(.fdone)::before{display:none}
.cp .tiers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.cp .tier-c{border:1px solid var(--border);padding:10px 12px}
.cp .tier-c p{margin:4px 0 0;font-size:13px;color:var(--text-2)}
.cp .tier-c.on{border-color:var(--mar-line);background:var(--mar-tint)}
.cp .list{container-type:inline-size}
.cp .main{container-type:inline-size;container-name:main}
/* Die Version steht seit 23.09. in der Marke, nicht mehr in der Kopfleiste — und wird auf schmal NICHT mehr ausgeblendet
   (Patrick verlangt sie ausdrücklich). Übrig bleibt hier nur noch .lt. */
@container main (max-width:680px){.cp .topbar .lt{display:none}
.cp .topbar{gap:10px;padding:0 16px}}
@media (max-width:860px){.cp .insp-h kbd{display:none}}
.cp .topbar .tb-btn{white-space:nowrap}
.cp .topbar .srv{white-space:nowrap;min-width:0;flex:0 1 auto;overflow:hidden}
.cp .srv .srv-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp .tb-r{flex:0 0 auto}
.cp .skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--accent);color:var(--void);padding:8px 12px;font:600 13px var(--sans,sans-serif)}
.cp .skip:focus{left:8px}
.cp .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cp .eyebrow{font:600 11px/16px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.cp .app{display:grid;grid-template-columns:var(--sb) minmax(0,1fr) var(--insp);width:100%;max-width:none;margin-inline:0;height:100%;height:100dvh;transition:grid-template-columns var(--base) var(--ease);position:relative}
.cp .app.insp-closed{grid-template-columns:var(--sb) minmax(0,1fr) 0}
.cp .app.insp-closed .inspector{border-left-width:0;visibility:hidden}
/* ⚠⚠ Die Seitenleiste ist wieder RUHIG (23.09.2026, Patrick wörtlich: „der blau orange gradient effekt soll im
   cont sein nicht in der sidenav.“) Hier stand der Verlauf; er liegt jetzt auf .cp .content (weiter unten).
   Eine Flächenfarbe, keine Tönung: die Leiste ist Navigation, sie soll nicht um Aufmerksamkeit werben. */
.cp .sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.cp .brand{padding:16px 16px 12px;border-bottom:1px solid var(--border)}
.cp .brand-word{font:900 30px/28px var(--display);letter-spacing:.02em;text-transform:uppercase}
/* „BOT" in Trail wie im alten Panel (style.css:2170 .brand-lockup .brand-word span). --accent-t statt --accent:
   #d97706 hat im HELLEN Satz nur 2,60:1 auf --surface, --accent-t trägt dort 8,70:1. */
.cp .brand-word b{color:var(--accent-t)}
.cp .brand-sub{font:500 10px/12px var(--mono);letter-spacing:.14em;color:var(--text-3);margin-top:2px}
/* Versionsnummer unter der Marke (Patrick 23.09.: „links oben 1337bot auch mit orange samt versions ausgabe wie beim alten
   design"). EINE Quelle: derselbe Knopf #vers, den shell.js:706 aus /status.version füllt — er ist aus der Kopfleiste
   hierher gezogen, nicht kopiert. Er bleibt auf JEDER Breite sichtbar (früher unter 680 px ausgeblendet). */
.cp .brand .vers{display:block;margin-top:4px;padding:0;font:500 11px/16px var(--mono);letter-spacing:.06em;text-align:left}
.cp .search{margin:12px 12px 4px;display:flex;align-items:center;gap:8px;padding:0 10px;height:32px;border:1px solid var(--border);background:var(--bg);color:var(--text-3);font-size:13px;width:calc(100% - 24px)}
.cp .search kbd{margin-left:auto;font:500 11px var(--mono);border:1px solid var(--border-2);padding:0 5px;color:var(--text-3)}
.cp .nav{flex:1;overflow:auto;padding:8px 8px 12px}
.cp .grp{margin-top:8px}
.cp .grp-h{display:flex;align-items:center;gap:6px;padding:6px 8px;color:var(--text-3);width:100%;text-align:left}
.cp .grp-h .eyebrow{color:inherit}
.cp .grp-h .chev{margin-left:auto;transition:transform var(--fast)}
.cp .grp.collapsed .chev{transform:rotate(-90deg)}
.cp .grp.collapsed .items{display:none}
.cp .item{display:flex;align-items:center;gap:10px;width:100%;height:32px;padding:0 8px 0 10px;color:var(--text-2);text-align:left;border-left:2px solid transparent;transition:color var(--fast),background var(--fast)}
.cp .item:hover{background:var(--surface-2);color:var(--text)}
.cp .item.active{color:var(--text);border-left-color:var(--accent-line);background:var(--mar-tint)}
.cp .dot{width:7px;height:7px;border-radius:50%;background:var(--ash);flex:0 0 7px}
.cp .dot.ok{background:var(--ok)}
.cp .dot.warn{background:var(--warn)}
.cp .dot.err{background:var(--danger)}
.cp .item .lbl{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp .unread{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.5);transition:opacity var(--fast),transform var(--fast)}
.cp .unread.on{opacity:1;transform:scale(1)}
.cp .pin{opacity:0;color:var(--text-3);font-size:12px}
.cp .itemrow:hover .pin,.cp .itemrow .pin[aria-pressed="true"]{opacity:1}
.cp .itemrow .pin[aria-pressed="true"]{color:var(--text-2)}
.cp .acct{border-top:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
/* Avatar/Servericon (Patrick 22.09.): der Anfangsbuchstabe liegt IMMER darunter, das Bild deckt ihn. Fehlt oder
   scheitert das Bild, steht der Buchstabe da — nie ein kaputtes Bildsymbol. */
.cp .ava{position:relative;width:26px;height:26px;border-radius:50%;background:var(--maritime);flex:0 0 auto;overflow:hidden;display:inline-grid;place-items:center}
.cp .ava .ava-b{font:600 11px var(--mono);line-height:1;color:var(--bone);letter-spacing:0}
.cp .ava .ava-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Mitgliedskarte unten links (Patrick 23.09.: „im alten design herzlicher"). Eigener Block MIT Rahmen, Avatar links,
   darunter Name und Tarif untereinander — Form wie public/style.css:2235 (.ui2 .account-chip). Und: ein KNOPF,
   der die Konto-Karte öffnet (vorher war der Streifen reine Anzeige, der Klick tat nichts). */
.cp .acct-btn{flex:1 1 100%;display:flex;align-items:center;gap:10px;min-width:0;padding:7px 10px 7px 7px;border:1px solid var(--border-2);background:var(--surface-2);color:inherit;font:inherit;text-align:left;cursor:pointer}
.cp .acct-btn:hover{border-color:var(--accent)}
.cp .acct-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp .acct-btn .ava{width:32px;height:32px}
.cp .acct-txt{display:grid;gap:1px;min-width:0}
.cp .acct-txt .cp-acct-n{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600}
.cp .acct-btn .tier{margin:0;justify-self:start;border:0;padding:0;font:750 10px var(--mono);letter-spacing:.09em;color:var(--text-3)}
/* Serverwahl als Ausklappmenü unter dem Knopf oben. Bei vielen Servern scrollt die Liste; am Telefon spannt sie sich
   über die Breite, damit nichts über den Rand läuft. */
.cp .srvwrap{position:relative;min-width:0;flex:0 1 auto;display:flex}
.cp .srvmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:max-content;min-width:260px;max-width:min(360px,calc(100vw - 32px));border:1px solid var(--border-2);background:var(--surface);box-shadow:0 10px 30px var(--scrim-2)}
.cp .srvmenu[hidden]{display:none}
.cp .srvmenu-l{max-height:min(52vh,340px);overflow:auto;padding:6px}
.cp .srvmenu-l .setup{display:grid}
.cp .srvmenu-l .su .lnk{display:flex;align-items:center;gap:8px;min-width:0;text-align:left}
.cp .srvmenu-l .su .ava{width:20px;height:20px}
.cp .srvmenu-f{display:grid;gap:8px;justify-items:start;padding:8px;border-top:1px solid var(--border)}
.cp .srvmenu-f .hint{margin:0}
/* Am Telefon hängt das Menü nicht mehr am Knopf (der steht weit rechts und das Menü liefe über den Rand),
   sondern spannt sich unter der Kopfzeile über die Breite. */
@media (max-width:860px){.cp .srvmenu{position:fixed;top:52px;left:16px;right:16px;width:auto;min-width:0;max-width:none}}
.cp .ic{display:inline-block;width:14px;height:14px;background:currentColor;vertical-align:-2px;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.cp .ic-gear{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E")}
.cp .ic-pin{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5M9 3h6l-1 7 3 3H7l3-3z'/%3E%3C/svg%3E")}
.cp .ic-bell{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");width:16px;height:16px}
.cp .tier{margin-left:auto;font:600 10px var(--mono);letter-spacing:.1em;color:var(--text-2);border:1px solid var(--border-2);padding:1px 6px}
.cp .main{display:flex;flex-direction:column;min-width:0;min-height:0}
.cp .topbar{height:48px;display:flex;align-items:center;gap:16px;padding:0 24px;border-bottom:1px solid var(--border)}
.cp .srv{display:flex;align-items:center;gap:8px;font-size:13px}
.cp .srv .ava{width:22px;height:22px;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--maritime)}
.cp .srv .chev{color:var(--text-3)}
.cp .live{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--mono);letter-spacing:.1em;color:var(--text-3)}
.cp .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.cp .live.on{color:var(--ok)}
.cp .live.on::before{background:var(--ok);animation:breathe 3.2s var(--ease-in-out) infinite}
@keyframes pulse{50%{opacity:.35}}
.cp .tb-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.cp .tb-btn{height:30px;padding:0 10px;font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:6px}
.cp .tb-btn:hover{color:var(--text);background:var(--surface-2)}
.cp .bell,.cp .tb-btn.hat-cnt{position:relative}
.cp .bell .cnt,.cp .tb-btn.hat-cnt .cnt{position:absolute;top:3px;right:2px;min-width:15px;height:15px;padding:0 4px;background:var(--accent);color:var(--void);font:600 10px/15px var(--mono);text-align:center}
/* ⚠ 23.09.2026: #inspbtn traegt dieselbe Zahlmarke wie die Glocke — die Speichern-Leiste liegt in der
   Details-Spalte und ist zugeklappt unsichtbar (Zeile 119). Bewusst DERSELBE Baustein statt eines zweiten
   Musters: eine Zahlmarke, eine Quelle (dirtyZahl()). Der Knopf ist auch zugeklappt immer sichtbar. */
/* ⚠⚠ DER VERLAUF (23.09.2026, Patrick: „der blau orange gradient effekt soll im cont sein nicht in der sidenav.“):
   Maritime oben, Trail unten, in der Mitte nichts — dieselbe Form wie vorher in der Seitenleiste, nur hier.
   ZWEI Tönungen aus tokens.css (--cnt-kuehl/--cnt-warm), kein eigener Farbwert.
   ⚠ SCHWÄCHER als in der Seitenleiste, und zwar gemessen, nicht geschätzt: hier liegt MEHR und KLEINERER Text
   auf dem Verlauf. An der schlechtesten Stelle (das Ende, wo die Tönung voll steht), gerechnet auf --bg:
   dunkel oben #121c24 · dunkel unten #231c14 · hell oben #dae0e5 · hell unten #ede1d4. Dort trägt --text-3
   (der schwächste Text, der die 7:1-Vorgabe einhalten muss) 7,70:1 im Dunkeln und 8,01:1 im Hellen.
   ⚠ background-attachment bleibt der Vorgabewert: .content ist der Rollbereich, und der Verlauf soll am
   KASTEN kleben, nicht am Inhalt mitrollen — sonst liefe der Farbverlauf bei langen Seiten ins Nichts.
   ⚠ Karten liegen mit --surface DECKEND darüber; der Verlauf ist Grund, nicht Schleier. */
/* ⚠ 26.09.2026 GETAUSCHT (Patrick: „das orange und blau umgekehrt … orange als hauptfarbe … hebt den oberen bereich als haupt und
   übersicht. das blau runter, als technische symbolik“): Trail oben, Maritime unten. Werte unverändert, nur die Enden getauscht. */
/* ⚠ 27.09.2026 ZURÜCKGETAUSCHT (Patrick: „es soll doch oben blau und unten orange im Hintergrund sein — wirkt doch angenehmer
   und besser“): Maritime oben, Trail unten — die Form vom 23.09. Werte unverändert, nur die Enden. Der Kontrast hängt nicht
   an der Reihenfolge: --text-3 trägt an BEIDEN Enden ≥ 7:1 (dunkel 7,70:1 / hell 8,01:1, Rechnung oben), gemessen von
   tools/check-cockpit-rahmen.mjs an der schlechtesten Stelle beider Enden in beiden Farbsätzen. */
.cp .content{flex:1;overflow:auto;padding:24px 32px 48px;position:relative;background:linear-gradient(180deg,var(--cnt-kuehl) 0,transparent 34%,transparent 66%,var(--cnt-warm) 100%),var(--bg)}
.cp .view{display:none;opacity:0;transform:translateY(4px)}
.cp .view.on{display:block;animation:vin var(--base) var(--ease) forwards}
@keyframes vin{to{opacity:1;transform:none}}
.cp h1{font:900 clamp(22px,2vw,28px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.035em;margin:0;text-wrap:balance}
.cp .head{display:flex;align-items:flex-end;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.cp .head .actions{margin:0 0 0 auto}
/* Unterreiter im Muster der Infoseiten-Navigation (Patrick 25.09.2026): Mono-Oberzeile über dem Titel, senkrechte
   Trenner, aktiver Reiter mit Unterstrich. Oberzeilen: core/unterreiter.js. */
/* 25.09.2026 (Patrick, zweimal betont): Unterreiter wie die Hauptnavigation der Infoseite (_homepage/redesign_01/1337bot-b8.html
   .nav-portal): kein Kasten, feine Trennlinien, Mono-Oberzeile ueber kraeftigem Titel, Orange-Balken unten — waechst beim
   Ueberfahren ein und steht beim aktiven Reiter voll. */
/* ── Unterreiter = Zugangs-Kacheln wie die Kopf-Navigation der Infoseite (Patrick 25.09.2026: „die sub nav soll endlich wie
   die info site nav aussehen, aber dennoch als sub nav" — die Kachel ist das uebergeordnete Feld, das den Rest ausloest).
   Kacheln fuellen die volle Breite, gleiche Hoehe, Ueberzeile (Mono) + Titel + Pfeil; aktiv = orange gefuellt wie
   „Panel oeffnen". EINE zentrale Regel je Selektor (check:cockpit:unterreiter). */
.cp .seg{display:flex;width:100%;max-width:100%;gap:0;padding:0;border:1px solid var(--border);background:var(--surface);margin-bottom:18px;flex-wrap:wrap}
.cp .seg button{position:relative;flex:1 1 170px;min-height:44px;height:auto;max-width:100%;min-width:0;padding:14px 44px 14px 18px;font-size:16px;line-height:1.3;font-weight:600;color:var(--text);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;white-space:normal;overflow-wrap:anywhere;text-align:left;border-left:1px solid var(--border);background:var(--surface);transition:background-color var(--base) var(--ease),color var(--base) var(--ease)}
.cp .seg button:first-child{border-left:0}
/* „In Arbeit“ im Unterreiter (26.09.2026): klein, gedämpft, keine Signalfarbe — ein Hinweis, kein Alarm. */
.cp .seg-arbeit{display:inline-block;margin-left:8px;padding:1px 6px;border:1px dashed var(--border-2);color:var(--text-3);font:600 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.cp .seg button::after{content:"→";position:absolute;right:16px;top:50%;transform:translate(-4px,-50%);opacity:.45;font:500 16px/1 var(--mono);transition:transform var(--base) var(--ease),opacity var(--base) var(--ease)}
.cp .seg button:hover{background:var(--surface-2)}
.cp .seg button:hover::after{transform:translate(0,-50%);opacity:1}
@media (prefers-reduced-motion:reduce){.cp .seg button,.cp .seg button::after{transition:none}}
.cp .seg .seg-eb{font:500 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.cp .seg button.on .seg-eb{color:var(--void);opacity:.72}
.cp .seg button.on{color:var(--void);background:var(--accent);font-weight:700;box-shadow:inset 0 -3px 0 var(--accent-line)}
.cp .seg button.on::after{content:"↘";opacity:1;transform:translate(0,-50%)}
.cp .seg button .n{font:500 11px var(--mono);color:var(--text-3)}

.cp .seg button:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
/* Handy (Baustein B2, G6 25.09.2026, Apple-Prinzip): Unterreiter als EINE wischbare Zeile statt 2x2-Raster — Oberzeile
   bleibt (Infoseiten-Muster), Titel bricht nie um, die Zeile scrollt seitlich. */
@media (max-width:600px){.cp .seg[role]{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}.cp .seg::-webkit-scrollbar{display:none}.cp .seg>button{flex:0 0 auto;min-width:150px;white-space:nowrap;overflow-wrap:normal;padding:12px 40px 12px 14px;gap:3px;scroll-snap-align:start}.cp .seg .seg-t{font-size:15px}}
.cp .area{display:none}
.cp .area.on{display:block}
.cp .chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;font:600 11px/22px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border-2);color:var(--text-2);white-space:nowrap}
.cp .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.cp .chip.ok{color:var(--ok);border-color:var(--ok-line)}
.cp .chip.warn{color:var(--warn);border-color:var(--warn-line)}
.cp .chip.warn::before{animation:pulse 2.4s var(--ease-in-out) infinite}
.cp .chip.pause{color:var(--text-2);border-color:var(--border-2)}
.cp .chip.pause::before{background:none;border:1.5px solid currentColor;width:5px;height:5px}
.cp .chip.err::before{background:var(--danger)}
.cp .chip.err{color:var(--text);border-color:var(--tattoo-line)}
.cp .chip.acc{color:var(--text);border-color:var(--border-2)}
.cp .chip.op{color:var(--text-3);border-style:dashed}
.cp .metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:24px}
.cp .metric{background:var(--surface);padding:12px 16px;min-height:88px}
.cp .metric .eyebrow{margin-bottom:8px}
.cp .num{font:800 24px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.cp .num.roll{animation:roll var(--base) var(--ease)}
@keyframes roll{0%{transform:translateY(-8px);opacity:0}100%{transform:none;opacity:1}}
.cp .delta{font:500 11px var(--mono);color:var(--text-3);margin-top:4px}
.cp .delta.up{color:var(--ok)}
.cp .sect-h{display:flex;align-items:baseline;gap:12px;margin:4px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--mar-line)}
.cp .sect-h h2{font:600 15px/24px var(--sans);margin:0;letter-spacing:-.005em}
.cp .sect-h .eyebrow{margin-left:auto}
.cp .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:24px}
.cp .card{background:var(--surface);border:1px solid var(--border);padding:12px;display:flex;flex-direction:column;gap:8px;transition:border-color var(--fast),background var(--fast);cursor:pointer;text-align:left}
.cp .card:hover{border-color:var(--border-2);background:var(--surface-2)}
.cp .card.sel{border-color:var(--mar-line);background:var(--mar-tint)}
.cp .card.add{justify-content:center;align-items:center;min-height:110px;color:var(--text-3);border-style:dashed}
.cp .card-h{display:flex;align-items:center;gap:8px}
.cp .card-h .t{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp .card-m{font:500 12px var(--mono);color:var(--text-3)}
.cp .card-f{display:flex;align-items:center;gap:8px;margin-top:auto}
.cp .thumb{aspect-ratio:16/9;max-width:100%;background:var(--bg);border:1px solid var(--border);position:relative;overflow:hidden}
.cp .thumb .ov{position:absolute;left:8px;bottom:8px;padding:4px 8px;background:var(--shade);border-left:2px solid var(--accent);font:900 14px/1 var(--display);text-transform:uppercase}
.cp .thumb.live::after{content:"AKTIV";position:absolute;top:6px;right:6px;font:600 9px var(--mono);letter-spacing:.14em;color:var(--ok);border:1px solid var(--ok);padding:1px 5px}
.cp .tgl{margin-left:auto;width:44px;height:24px;border-radius:999px;border:1px solid var(--border-2);position:relative;background:var(--bg);transition:background var(--fast),border-color var(--fast);flex:0 0 auto}
.cp .tgl::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ash);transition:transform 160ms var(--ease-sheet),background var(--fast)}
.cp .tgl[aria-checked="true"]{background:var(--mar-tint-2);border-color:var(--mar-line)}
.cp .tgl[aria-checked="true"]::after{transform:translateX(20px);background:var(--text)}
.cp .tgl.pending::after{background:var(--ash);animation:pulse 1s infinite}
.cp .btn.pending{opacity:.6;cursor:progress;animation:pulse 1s infinite}
.cp .gear{color:var(--text-3);font-size:14px;width:26px;height:26px;display:grid;place-items:center}
.cp .gear:hover{color:var(--text);background:var(--surface-3)}
.cp .list{border:1px solid var(--border);background:var(--surface);margin-bottom:24px}
.cp .row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.9fr) auto;align-items:center;gap:16px;height:40px;padding:0 16px;border-bottom:1px solid var(--border);font-size:14px;cursor:pointer;transition:background var(--fast)}
.cp .row:last-child{border-bottom:0}
.cp .row:hover{background:var(--surface-2)}
.cp .row.sel{background:var(--mar-tint);box-shadow:inset 2px 0 0 var(--maritime)}
.cp .list .row.sel:hover{background:var(--mar-tint-2)}
.cp .row.hd{height:32px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);cursor:default}
.cp .row.hd:hover{background:none}
.cp .row .m{font:500 13px var(--mono);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp .row .act{color:var(--text-3);font-size:12px;white-space:nowrap}
.cp .row .nm{display:flex;align-items:center;gap:8px;min-width:0}
.cp .row .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp .row .nm .ava{width:20px;height:20px}
.cp .row .unread{flex:0 0 8px}
.cp .btn{height:32px;padding:0 12px;border:1px solid var(--border-2);color:var(--text);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:background var(--fast)}
.cp .btn:hover{background:var(--surface-2)}
.cp .btn.pri{background:var(--accent);border-color:var(--accent);color:var(--void)}
.cp .btn.pri:hover{box-shadow:inset 0 0 0 1px var(--bone)}
.cp .btn.sm{height:26px;padding:0 9px;font-size:12px}
.cp .btn.ghost{border-color:transparent;color:var(--text-2)}
.cp .actions{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.cp .filter{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.cp .filter .btn{height:26px;padding:0 10px;font-size:12px}
.cp .filter .btn.on{border-color:var(--border-2);background:var(--mar-tint);color:var(--text)}
.cp .sk{position:relative;overflow:hidden;background:var(--surface-2);color:transparent!important}
.cp .sk{animation:skpulse 1.1s ease-in-out infinite}
@keyframes skpulse{50%{opacity:.55}}
.cp .inspector{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative}
.cp .handle{position:absolute;left:-3px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:2}
.cp .handle:hover{background:var(--mar-line)}
.cp .insp-h{min-height:48px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--mar-line);background:var(--mar-tint)}
.cp .insp-h .eyebrow{white-space:nowrap}
.cp .insp-h .t{font-weight:600;flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.25;overflow-wrap:normal;hyphens:none} /* zwei Zeilen statt „Benachrichtigu…" */
.cp .insp-h kbd{font:500 10px var(--mono);color:var(--text-3);border:1px solid var(--border-2);padding:1px 5px}
.cp .tabs{display:flex;flex-shrink:0;overflow-x:auto;border-bottom:1px solid var(--border);padding:0 16px;position:relative}
.cp .tab{flex:0 0 auto;height:40px;padding:0 10px;font-size:13px;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.cp .tab.on{color:var(--text);border-bottom-color:transparent}
.cp .tabs::after{content:"";position:absolute;bottom:-1px;height:2px;background:var(--accent-line);left:var(--x,16px);width:var(--w,0);transition:left var(--base) var(--ease),width var(--base) var(--ease)}
.cp .insp-b{flex:1;min-height:0;overscroll-behavior:contain;overflow:auto;padding:16px 16px 24px;display:flex;flex-direction:column;gap:16px}
.cp .insp-b>*{animation:vin var(--base) var(--ease) both}
.cp .insp-b>*:nth-child(2){animation-delay:30ms}
.cp .insp-b>*:nth-child(3){animation-delay:60ms}
.cp .insp-b>*:nth-child(n+4){animation-delay:90ms}
.cp .insp-f{flex-shrink:0;border-top:1px solid var(--border);padding:12px 16px;display:flex;gap:8px;background:var(--surface-2)}
.cp .preview{aspect-ratio:16/9;max-width:100%;background:var(--bg);border:1px solid var(--border);position:relative;overflow:hidden}
.cp .preview .ov{position:absolute;left:14px;bottom:14px;padding:8px 12px;background:var(--shade);border-left:3px solid var(--accent)}
.cp .preview .ov .eyebrow{color:var(--text-2)}
.cp .preview .ov .big{font:900 24px/1 var(--display);text-transform:uppercase}
.cp .preview .wm{position:absolute;right:10px;top:8px;font:500 9px var(--mono);letter-spacing:.14em;color:var(--text-3)}
.cp .dc{background:var(--dc-bg);border-left:4px solid var(--accent);padding:10px 12px;font:14px/20px var(--sans);color:var(--dc-text)}
.cp .dc .dc-a{font-weight:600;color:var(--dc-head);margin-bottom:2px}
.cp .dc .dc-t{font-weight:600;color:var(--dc-link)}
.cp .dc .dc-f{font-size:11px;color:var(--dc-mute);margin-top:6px}
.cp .dc .dc-btn{display:inline-block;margin-top:8px;padding:4px 12px;background:var(--dc-btn);font-size:12px;font-weight:500;color:var(--dc-btn-t)}
.cp .field{display:grid;gap:4px}
.cp .field label{font-size:12px;color:var(--text-2)}
.cp .inp{height:32px;padding:0 10px;background:var(--bg);border:1px solid var(--border);color:var(--text);font:14px var(--sans);width:100%}
.cp .inp.mono{font-family:var(--mono);font-size:13px}
.cp .frow{display:flex;align-items:center;gap:10px;min-height:40px;border-bottom:1px solid var(--border)}
.cp .frow:last-child{border-bottom:0}
.cp .frow .l{flex:1;font-size:14px}
.cp .frow .m{font:500 12px var(--mono);color:var(--text-2)}
.cp .copy{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;background:var(--bg);border:1px solid var(--border);padding:6px 8px 6px 10px;font:500 12px var(--mono);color:var(--text-2)}
.cp .copy span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp .copy .btn{flex:0 0 auto}
.cp .diff{border:1px solid var(--border-2);background:var(--bg)}
.cp .diff-h{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}
.cp .diff-h .eyebrow{color:var(--text-2)}
.cp .diff-h .n{margin-left:auto;font:600 11px var(--mono);color:var(--text-2)}
.cp .drow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px}
.cp .drow:last-child{border-bottom:0}
.cp .drow .k{color:var(--text-2);font-size:12px}
.cp .drow .v{font:500 13px var(--mono)}
.cp .drow .old{color:var(--text-3);text-decoration:line-through}
.cp .drow .arr{color:var(--text-3);margin:0 6px}
.cp .drow .new{color:var(--text)}
.cp .drow .bs{display:flex;gap:4px}
.cp .diff-f{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border)}
.cp .msg{background:var(--bg);border:1px solid var(--border);padding:10px 12px;font-size:13px}
.cp .msg .who{font:600 11px var(--mono);color:var(--text-3);margin-bottom:4px}
.cp .msg+.msg{margin-top:8px}
.cp .empty{color:var(--text-3);font-size:13px;padding:22px 0;text-align:center}
.cp .hint{border-left:2px solid var(--border-2);padding:6px 10px;color:var(--text-2);font-size:13px}
.cp .hint.idea{border-left-color:var(--accent);color:var(--text)}
.cp .memhead{display:flex;align-items:center;gap:10px}
.cp .memhead .ava{width:36px;height:36px}
.cp .memhead b{display:block}
.cp .memhead .m{font:500 12px var(--mono);color:var(--text-3)}
.cp .roles{display:flex;flex-wrap:wrap;gap:6px}
.cp .role{font:500 12px var(--mono);border:1px solid var(--border-2);padding:2px 8px;color:var(--text-2);cursor:pointer}
.cp .role.on{border-color:var(--mar-line);background:var(--mar-tint);color:var(--text)}
.cp .role.off{opacity:.4;cursor:not-allowed}
.cp .check{display:flex;align-items:center;gap:10px;min-height:40px;border-bottom:1px solid var(--border);font-size:14px}
.cp .check:last-child{border-bottom:0}
.cp .check .box{width:16px;height:16px;border:1px solid var(--border-2);display:grid;place-items:center;font-size:11px;color:var(--ok)}
.cp .check .box.on{border-color:var(--ok)}
.cp .check a{margin-left:auto;color:var(--text);font-size:12px;text-decoration:underline}
.cp .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cp .key{aspect-ratio:1;border:1px solid var(--border);background:var(--bg);display:flex;flex-direction:column;justify-content:flex-end;padding:10px;font:600 11px var(--mono);color:var(--text-2);cursor:pointer}
.cp .key:hover{border-color:var(--border-2);background:var(--surface-2)}
.cp .key.sel{border-color:var(--mar-line);background:var(--mar-tint);color:var(--text)}
.cp .key .eyebrow{font-size:10px;margin-bottom:2px}
.cp .pal-bg{position:fixed;inset:0;background:var(--scrim);display:none;align-items:flex-start;justify-content:center;padding-top:14vh;z-index:20}
.cp .pal-bg.on{display:flex}
.cp .pal{width:min(560px,92vw);background:var(--surface);border:1px solid var(--border-2)}
.cp .pal input{width:100%;height:48px;padding:0 16px;background:none;border:0;border-bottom:1px solid var(--border);color:var(--text);font:15px var(--sans)}
.cp .pal input:focus{outline:none;box-shadow:inset 0 -2px 0 var(--accent)}
.cp .pal .eyebrow{padding:10px 16px 4px}
.cp .pi{display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;font-size:14px;cursor:pointer}
.cp .pi .k{margin-left:auto;font:500 11px var(--mono);color:var(--text-3)}
.cp .pi:hover{background:var(--surface-2)}
.cp .pi .ico{color:var(--text-3);font:600 11px var(--mono);width:26px}
.cp .toastwrap{position:fixed;right:16px;top:calc(var(--cp-tb-h,48px) + 12px);bottom:auto;display:flex;flex-direction:column;gap:6px;z-index:30}
.cp .toast{background:var(--surface-2);border:1px solid var(--border-2);padding:8px 12px;font-size:13px;border-left:2px solid var(--ok);animation:vin var(--base) var(--ease)}
.cp .toast.err{border-left-color:var(--text)}
.cp .f{display:grid;gap:4px;padding:8px 0;border-bottom:1px solid var(--border)}
.cp .f:last-child{border-bottom:0}
.cp .f-l{display:flex;align-items:center;gap:8px;font-size:14px}
.cp .f-l .rec{font:600 9px var(--mono);letter-spacing:.12em;color:var(--ok);border:1px solid var(--ok-line);padding:0 5px;line-height:16px}
.cp .f-l .unit{margin-left:auto;font:500 11px var(--mono);color:var(--text-3)}
.cp .f-h{font-size:12px;color:var(--text-2)}
.cp .f-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* Durchgang 25.09.2026: .f ist ein Grid — flex-direction allein wirkte nie, jeder Schalter stand UNTER seiner Beschriftung.
   Jetzt wie in den Systemeinstellungen: Beschriftung links, Schalter rechts in derselben Zeile, Hinweis darunter. */
.cp .f.f-tgl{display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;gap:4px 10px}
.cp .f-tgl .f-l{flex:1}
.cp .f-tgl .tgl{margin-left:0}
.cp .f-tgl .f-h{flex-basis:100%}
.cp .stp{display:inline-flex;border:1px solid var(--border);background:var(--bg)}
.cp .stp button{width:32px;height:32px;color:var(--text-2);border-right:1px solid var(--border)}
.cp .stp button:last-child{border-right:0;border-left:1px solid var(--border)}
.cp .stp button:hover{color:var(--text);background:var(--surface-2)}
.cp .stp input{width:64px;height:32px;border:0;background:none;color:var(--text);font:500 14px var(--mono);text-align:center}
.cp .stp input:focus{outline:2px solid var(--accent);outline-offset:-2px}
.cp .f input[type=range]{flex:1;accent-color:var(--text);height:2px;margin:8px 0}
.cp .pick{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 10px;background:var(--bg);border:1px solid var(--border);font-size:14px;cursor:pointer}
.cp .pick .ico{font:600 11px var(--mono);color:var(--text-3)}
.cp .pick .v{flex:1}
.cp .pick .chev{color:var(--text-3)}
.cp .pick.bad{border-color:var(--text)}
.cp .f-err{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--text);border-left:2px solid var(--danger);padding:6px 10px;background:var(--tattoo-tint)}
.cp .f-err b{color:var(--text)}
.cp .f-err .btn{margin-left:auto}
.cp .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cp .chipv{font:500 11px var(--mono);border:1px solid var(--border-2);padding:1px 6px;color:var(--text-2);cursor:pointer}
.cp .chipv:hover{color:var(--text);border-color:var(--text-3)}
/* 25.09.2026: Vorschau als Discord-Nachricht lesbar (Absender-Zeile), damit man sieht, was im Kanal steht. */
.cp .tplprev{margin-top:6px;background:var(--bg);border:1px solid var(--border);border-left:2px solid var(--maritime);padding:6px 10px 8px;font-size:13px;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.cp .tplprev::before{content:"1337BOT · so steht es im Kanal";display:block;margin-bottom:3px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.cp .tplprev:empty{display:none} /* leer = kein Rahmen-Strich unter den Bausteinen */
.cp .tplprev b{color:var(--text)}
.cp .dep{display:none}
.cp .dep.on{display:grid}
.cp .adv{margin-top:6px}
.cp .adv>summary{cursor:pointer;font-size:13px;color:var(--text-2);list-style:none;display:flex;align-items:center;gap:8px;height:32px}
.cp .adv>summary::before{content:"▸";color:var(--text-3);font-size:11px}
.cp .adv[open]>summary::before{content:"▾"}
.cp .adv>summary .n{font:500 11px var(--mono);color:var(--text-3)}
.cp .presets{display:flex;gap:6px;flex-wrap:wrap}
.cp .presets .btn.on{border-color:var(--border-2);background:var(--mar-tint);color:var(--text)}
.cp select.sel{height:32px;padding:0 10px;background:var(--bg);border:1px solid var(--border);color:var(--text);font:14px var(--sans);width:100%}
.cp .dirty{flex-shrink:0;display:none;align-items:center;gap:8px;padding:8px 16px;background:var(--mar-tint);border-top:1px solid var(--mar-line);font-size:13px}
.cp .dirty.on{display:flex}
.cp .dirty .n{font:600 11px var(--mono);color:var(--text)}
.cp .dirty .btn{margin-left:auto}
/* 27.09.2026 (Patrick: „wenn man weiterklicken will aber gespeichert werden muss, dann soll das Speicherfeld kurz wackeln und
   orange Outlines für einen noch kürzeren Moment während der Wackelanimation in der Mitte"): wache() in shell.js setzt
   .wackeln (entfernen, Reflow, setzen — jeder weitere Klick wackelt neu). Zwei Läufe, je 400 ms: das Wackeln waagrecht,
   der Umriss (--accent) nur im mittleren Drittel (33–67 %, in Stufen, ohne Ausblenden). Bei reduzierter Bewegung bleibt
   nur der kurze Umriss. */
.cp .dirty.wackeln{outline:2px solid transparent;outline-offset:-2px;animation:dirty-wackeln 400ms var(--ease) both,dirty-umriss 400ms steps(1,end) both}
@keyframes dirty-wackeln{0%,100%{transform:none}15%{transform:translateX(-6px)}30%{transform:translateX(5px)}45%{transform:translateX(-4px)}60%{transform:translateX(3px)}75%{transform:translateX(-2px)}90%{transform:translateX(1px)}}
@keyframes dirty-umriss{0%{outline-color:transparent}33%{outline-color:var(--accent)}67%{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.cp .dirty.wackeln{animation:dirty-umriss 400ms steps(1,end) both}}
.cp .conn{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);background:var(--bg)}
.cp .conn .chip{margin-right:auto}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 var(--ok-line)}50%{opacity:.7;box-shadow:0 0 0 5px var(--ok-0)}}
.cp .toast.bye{animation:tout var(--base) var(--ease-in-out) forwards}
@keyframes tout{to{opacity:0;transform:translateY(6px)}}
.cp .view.out{display:block;animation:vout var(--fast) var(--ease) forwards}
@keyframes vout{to{opacity:0;transform:translateY(-2px)}}
.cp .btn.pri.said{background:var(--surface-2);border-color:var(--ok);color:var(--ok);transition:background var(--fast),color var(--fast)}
@media (prefers-reduced-motion:reduce){.cp .view.out{display:none}
.cp *{animation:none!important;transition:none!important}
.cp .view.on{opacity:1;transform:none}}
.cp .bottomnav{display:none}
/* 1337BOT-Menüzeichen (22.09.): drei Balken, Trail-„Bit" links am Mittelbalken. Offen: X, das Bit bleibt.
   Eine Quelle in index.html (#menubtn), Klon in der unteren Leiste (#bn-mehr). Zustand über aria-expanded. */
.cp .cp-menue{display:none;width:44px;min-width:44px;padding:0;justify-content:center;flex:0 0 auto}
.cp .cp-hb{display:block;width:24px;height:24px;fill:currentColor;flex:0 0 auto}
.cp .cp-hb rect{transform-box:fill-box;transform-origin:center;transition:transform var(--base) var(--ease)}
.cp .cp-hb__bit{fill:var(--accent)}
.cp .cp-hb__m{transform-origin:right center}
.cp [data-menue][aria-expanded="true"] .cp-hb__o{transform:translateY(5.75px) rotate(45deg)}
.cp [data-menue][aria-expanded="true"] .cp-hb__u{transform:translateY(-5.75px) rotate(-45deg)}
.cp [data-menue][aria-expanded="true"] .cp-hb__m{transform:scaleX(0)}
.cp [data-menue]:hover,.cp [data-menue][aria-expanded="true"]{color:var(--text)}
.cp .bottomnav #bn-mehr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cp .bottomnav #bn-mehr .cp-hb{width:22px;height:22px}
@media (max-width:860px){.cp .cp-menue{display:inline-flex}}
@media (max-width:1180px){
.cp .app,.cp .app.insp-closed{grid-template-columns:var(--sb) minmax(0,1fr)}
.cp .inspector{position:fixed;inset:0 0 0 auto;width:min(560px,100%);height:100vh;height:100dvh;border-left:1px solid var(--border);z-index:17;box-shadow:-24px 0 64px var(--scrim);visibility:hidden;transform:translateX(100%)}
.cp .app:not(.insp-closed) .inspector{visibility:visible;transform:none}
.cp .handle{display:none}
}
@media (max-width:860px){
.cp .app,.cp .app.insp-closed{grid-template-columns:minmax(0,1fr)}
.cp .sidebar{display:none}
.cp .sidebar.open{display:flex;position:fixed;inset:0;width:100%;z-index:18;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.cp #cp-nav-schliessen{display:flex;align-self:flex-end;margin:8px 12px}
.cp .content{padding:18px 16px calc(76px + env(safe-area-inset-bottom,0px))}
.cp .inspector{width:100%;border:0;box-shadow:none;transform:translateY(100%)}
.cp .insp-h{padding-top:env(safe-area-inset-top,0px)}
.cp .dirty,.cp .insp-f{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.cp .topbar{gap:6px;padding:4px 12px;flex-wrap:wrap;height:auto;min-height:56px}
.cp .topbar .mono{display:none}
.cp .topbar .srv{flex:1 1 120px}
.cp .bottomnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;inset:auto 0 0;height:calc(56px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);z-index:14;padding-bottom:env(safe-area-inset-bottom,0px)}
.cp .bottomnav button{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:inherit;font-size:10.5px;font-weight:600;line-height:1.15;color:var(--text-2)}
.cp .bottomnav button{padding-inline:2px}
.cp .bottomnav button>span{max-width:100%;overflow:hidden;white-space:nowrap;letter-spacing:-.02em}
.cp .bottomnav button>.nav-ico{width:20px;height:20px;flex:0 0 auto}
.cp .bottomnav button>.dot{display:none}
.cp .bottomnav button.on{color:var(--text);box-shadow:inset 0 2px 0 var(--accent)}
.cp .keys{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ⚠ Reihenfolge ist Absicht: dieser Block steht NACH den Schubladen-Regeln fuer 1180 px und 860 px.
   Davor gewannen sie bei gleicher Spezifitaet — bei 1024 px lag die breite Flaeche dann auf top:0 und
   verdeckte die Kopfzeile (gemessen an der Attrappe, 23.09.2026). */
/* Entscheidung 64 (Patrick, 23.09.2026): „Der Overlay-Builder oeffnet ueber die volle Breite."
   In der 360-px-Detailspalte wurde die Buehne fuer 1920 x 1080 rund 327 x 184 px gross — unbrauchbar.
   Ein Objekt mit `breit:true` (shell.js, objektZeichnen) legt die Detailspalte als Flaeche ueber den
   Inhalt: UNTER der Kopfzeile (--cp-tb-h wird gemessen, nicht geraten) und NEBEN der Seitenleiste,
   damit Serverwahl, Design-Umschalter und Navigation erreichbar bleiben. Unter 861 px gilt weiter die
   bestehende Vollbild-Schublade — die ist schon voll breit, hier waere nichts zu gewinnen. */
@media (min-width:861px){
.cp .app.insp-breit:not(.insp-closed) .inspector{position:absolute;top:var(--cp-tb-h,48px);right:0;bottom:0;left:var(--sb);width:auto;max-width:none;height:auto;z-index:16;visibility:visible;transform:none;border-left:0;border-top:1px solid var(--border);box-shadow:none}
.cp .app.insp-breit .handle{display:none}
}

@media (pointer:coarse),(max-width:860px){
.cp .btn,.cp .btn.sm,.cp .filter .btn,.cp .tb-btn,.cp .item,.cp .search,.cp .tab,.cp .seg button,.cp .adv>summary,.cp .pick,.cp .pop-l button,.cp .pi{min-height:44px;height:auto}
.cp .inp,.cp select.sel{min-height:44px;font-size:16px}
.cp .stp button{width:44px;height:44px}
.cp .stp input{height:44px;font-size:16px}
.cp .f input[type=range]{height:28px}
/* Touchziele ≥ 32 px (Ziel-Loop Runde 1, Befund 9): Verweisknöpfe (.lnk), Schalter (.tgl, Knopf mitwachsend) und
   Platzhalter-Chips (.chipv) waren 24 px hoch — auch in Zeilen, deren Text kein Teil des Ziels ist (Funktionen). */
.cp .lnk{min-height:32px;display:inline-flex;align-items:center}
.cp .tgl{width:52px;height:32px}
.cp .tgl::after{width:26px;height:26px}
.cp .tgl[aria-checked="true"]::after{transform:translateX(20px)}
.cp .chipv{min-height:32px}
.cp .grp-h{min-height:36px}
}
/* Gesperrter Schalter sichtbar gesperrt (Karten-Schalter bei ausServer/gesperrt, Bedienung 4) — bleibt da, der Klick nennt den Grund. */
.cp .tgl[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
/* Kopfzeilen-Knopf sichtbar gesperrt (Details ohne Auswahl, Bedienung 8) — bleibt klickbar, der Klick nennt den Grund. */
.cp .tb-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.cp .fnl{border:1px solid var(--border);background:var(--surface);margin-bottom:24px;container-type:inline-size}
.cp .fnr{display:flex;align-items:center;gap:10px;min-height:44px;padding-right:16px;border-bottom:1px solid var(--border)}
.cp .fnr:last-child{border-bottom:0}
.cp .fnr .fo{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 0 4px 16px;text-align:left}
.cp .fnr .fo:hover{background:var(--surface-2)}
.cp .fn-ic{width:24px;flex:0 0 24px;font:600 11px var(--mono);color:var(--text-3)}
.cp .fn-n{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px}
.cp .fn-n>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp .fn-m{font-size:12px;color:var(--text-2)}
.cp .fn-c{font:500 12px var(--mono);color:var(--text-3);white-space:nowrap}
.cp .fn-lk{display:none;white-space:nowrap;font-size:13px}
.cp .fnr .tgl{margin-left:0}
@container (max-width:480px){.cp .fn-c{display:none}}
.cp body.tier-free .fnr[data-lock="premium"] .fn-lk,.cp .fnr[data-lock="addon"] .fn-lk{display:inline}
.cp body.tier-free .fnr[data-lock="premium"] .tgl,.cp .fnr[data-lock="addon"] .tgl{opacity:.4}
.cp body.op-off .fnr[data-fnr="tickets"]{display:none}
.cp .fnbar{display:flex;align-items:center;gap:10px;padding:6px 12px;margin:0 0 16px;border:1px solid var(--border-2);background:var(--surface-2);font-size:13px;color:var(--text-2)}
.cp .fnbar b{color:var(--text)}
.cp .fnbar .tgl{margin-left:auto}
.cp #insp-fn{margin:0;border-width:0 0 1px}
.cp .offcard{display:none;border:1px solid var(--border-2);background:var(--surface);padding:16px;margin:0 0 24px;max-width:60ch}
.cp .offcard p{margin:8px 0 0}
.cp body.op-off .view[data-view="tickets"] .offcard{display:block}
.cp body.op-off .view[data-view="tickets"] .seg,.cp body.op-off .view[data-view="tickets"] .area,.cp body.op-off .view[data-view="tickets"] .prog,.cp body.op-off .view[data-view="tickets"] .head .actions{display:none}
.cp body.tier-free .view[data-view="giveaway"] .prog,.cp body.tier-free .needs [data-insp="giveaway"]{display:none}
.cp .fresh-only{display:none}
.cp body.fresh .fresh-only{display:block}
.cp body.fresh .needs,.cp body.fresh .no-fresh{display:none}
.cp body:not(.tier-free) .t-free,.cp body.tier-free .t-prem{display:none!important}
.cp .lim{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0}
.cp .lim .m{font:500 12px var(--mono);color:var(--text-2)}
.cp .btn[disabled]{opacity:.45;cursor:not-allowed}
.cp .conn{flex-wrap:wrap}
.cp .conn .btn{white-space:nowrap}
.cp .insp-b{overflow-x:auto;overflow-wrap:anywhere}
.cp .insp-b>*{min-width:0;max-width:100%}
.cp .f,.cp .field{min-width:0}
.cp .row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp #insp.lk #insp-b .f,.cp #insp.lk #insp-b .adv,.cp #insp.lk #insp-b .diff,.cp #insp.lk #insp-f{display:none}
.cp #insp.lk #dirty{display:none!important}
.cp #insp.off #insp-b,.cp #insp.off #insp-f,.cp #insp.off #insp-tabs,.cp #insp.off #insp-fn{display:none}
.cp #insp.off #dirty{display:none!important}
.cp #insp-lk{margin:0;border-width:0 0 1px}
.cp #insp-lk .lnk{margin-left:auto}
.cp body.op-off [data-fnv="tickets"]{display:none!important}
.cp .tagp{font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--border-2);padding:0 5px;line-height:16px}
.cp body.tier-free .f[data-prem] input,.cp body.tier-free .f[data-prem] select,.cp body.tier-free .f[data-prem] .tgl,.cp body.tier-free .f[data-prem] .pick{opacity:.5}
@media (max-width:860px){.cp .acct .tier{margin-left:0}}
.cp .tw-off{display:none}
.cp body.fresh:not(.tw-ok) .tw-off{display:block}
.cp body.fresh:not(.tw-ok) .tw-on{display:none}
.cp .pc-only{display:none}
@media (max-width:860px){.cp .pc-only{display:inline-flex}}
.cp body:not(.tier-free) .tc-prem,.cp body.tier-free .tc-free{border-color:var(--mar-line);background:var(--mar-tint)}
.cp .agb{display:flex;align-items:center;gap:8px;font-size:13px;padding:8px 0}
.cp .agb input{width:16px;height:16px;accent-color:var(--text)}
.cp .agb a{color:var(--text)}
.cp .pop{border:1px solid var(--border-2);background:var(--surface-2);margin-top:4px;display:flex;flex-direction:column}
.cp .pop .inp{border-width:0 0 1px}
.cp .pop-l{max-height:220px;overflow:auto;display:flex;flex-direction:column}
.cp .pop-l button{height:32px;padding:0 10px;text-align:left;font-size:13px;color:var(--text-2)}
.cp .pop-l button:hover,.cp .pop-l button:focus{background:var(--surface-3);color:var(--text)}
.cp .pop-l button[aria-selected="true"]{background:var(--mar-tint);color:var(--text)}
.cp .dx .thumb{position:relative}
.cp .band{position:absolute;left:0;top:0;font:600 10px/18px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:0 8px;background:var(--shade);color:var(--text-2);border-bottom:1px solid var(--border-2)}
.cp .dx-wm{position:absolute;inset:0;display:grid;place-items:center;font:900 28px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--text-4);pointer-events:none}
.cp .dxp{position:relative}
.cp .dx-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.cp a.btn{text-decoration:none}
.cp .wz-bg{position:fixed;inset:0;background:var(--scrim);z-index:40;display:flex;align-items:center;justify-content:center;padding:24px}
.cp .wz-bg[hidden]{display:none!important}
.cp .wz-card{width:min(640px,100%);max-height:calc(100vh - 48px);background:var(--surface);border:1px solid var(--border-2);display:flex;flex-direction:column;min-width:0}
.cp .wz-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 20px 10px;border-bottom:1px solid var(--mar-line)}
.cp .wz-h h2{font:900 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;margin:0;flex:1 1 100%;order:3}
.cp .wz-h .m{font:500 12px var(--mono);color:var(--text-2)}
.cp .wz-h .wz-x{margin-left:auto}
.cp .wz-dots{display:flex;gap:6px;padding:10px 20px 0}
.cp .wz-dot{flex:1;height:6px;min-width:0;background:var(--border);border:0;padding:0}
.cp .wz-dot.done{background:var(--ok)}
.cp .wz-dot.no,.cp .wz-dot.later{background:var(--border-2)}
.cp .wz-dot.on{background:var(--accent)}
.cp .wz-b{flex:1;overflow:auto;overflow-x:hidden;padding:12px 20px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cp .wz-b .lead{margin:0}
.cp .wz-f{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;border-top:1px solid var(--border);background:var(--surface-2)}
.cp .wz-f .pri{margin-left:auto}
.cp .wz-arts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cp .wz-art{min-height:72px;border:1px solid var(--border);background:var(--bg);padding:12px;text-align:left;font-weight:600;display:flex;align-items:center}
.cp .wz-art[aria-checked="true"]{border-color:var(--mar-line);background:var(--mar-tint)}
.cp .wz-fn{border:1px solid var(--border)}
.cp .wz-fr{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-bottom:1px solid var(--border);font-size:14px}
.cp .wz-fr:last-child{border-bottom:0}
.cp .wz-fr .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp .wz-fr .tgl{margin-left:0}
.cp .wz-fn .eyebrow{padding:8px 12px 0;margin:0}
.cp body.tier-free .wz-fr[data-lock="premium"] .tgl,.cp .wz-fr[data-lock="addon"] .tgl{opacity:.4}
.cp .wz-sum .su .m{margin-left:auto}
@media (max-width:860px){.cp .wz-bg{padding:0}
.cp .wz-card{width:100%;max-height:none;height:100%;border:0}
.cp .wz-f .btn{flex:1 1 auto;justify-content:center}
.cp .wz-f .btn.pri{order:-1;flex:1 1 100%;margin-left:0}
.cp .wz-arts{grid-template-columns:minmax(0,1fr)}}
.cp .row>span.st{min-width:0;white-space:normal;overflow-wrap:anywhere}
.cp .fempty{display:none;border:1px dashed var(--border-2);padding:20px 16px;margin:0 0 24px;text-align:center}
.cp .fempty p{margin:0 0 12px;color:var(--text-2);font-size:14px}
.cp body.fresh .fempty{display:block}
.cp body.fresh .fe>:not(.lockcard){display:none}
.cp body.tier-free .fempty.prem{display:none}
.cp .btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.cp body.fresh .seg .n{display:none}
.cp body.fresh .item .dot{background:var(--ash)}
.cp body.fresh #tk-unread{display:none}
.cp body.fresh [data-fnfail]{display:none!important}
.cp body.fresh [data-insp="db-last"]{display:none}
.cp .fresh-inl{display:none}
.cp body.fresh .fresh-inl{display:inline-flex}
.cp body.fresh .no-fresh-inl{display:none}
.cp .lockcard.addon{display:block}
.cp body:not(.kp-no) .kp-miss{display:none!important}
.cp body.kp-no .kp-ok{display:none!important}
.cp body.op-off .item[data-view="tickets"] .dot{background:var(--ash)}
.cp body.op-off #tk-unread{display:none}
.cp body.op-off .op-hide{display:none}
.cp .live{white-space:nowrap}
.cp .item .unread:not(.on){display:none}
.cp .itemrow .pin{display:none}
.cp .itemrow:hover .pin,.cp .itemrow .pin[aria-pressed="true"],.cp .itemrow:focus-within .pin{display:inline-flex}
.cp .toastwrap{z-index:45}
.cp .mob-only{display:none}
.cp .fempty .list{text-align:left;margin:12px 0 0}
.cp .fempty:has(>.list:not([hidden])){border:0;padding:0;text-align:left}
.cp .fempty .lim{justify-content:flex-start}
.cp .maint-bar{display:none}
.cp body.maint .maint-bar{display:block;margin:0 0 16px;padding:8px 12px;border:1px solid var(--border-2);border-left:2px solid var(--ash);background:var(--surface-2);font-size:13px}
.cp .clipres{flex:1 1 100%;font-size:12px}
@media (max-width:860px){.cp .toastwrap{top:calc(var(--cp-tb-h,48px) + 12px + env(safe-area-inset-top,0px));bottom:auto;left:8px;right:8px}
.cp .mob-only{display:inline-flex}
.cp .wz-h .eyebrow{display:none}}
.cp .list{display:grid;column-gap:16px;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.6fr) auto}
.cp .list>.row{grid-column:1/-1;grid-template-columns:subgrid}
.cp .view[data-view="tickets"] .list{grid-template-columns:12px minmax(0,2.4fr) minmax(0,1.1fr) minmax(0,.6fr) auto}


.cp body.tier-free .item[data-view="giveaway"] .dot{background:var(--ash)}
.cp body.fresh.svc .needs{display:grid}
.cp body.fresh.svc #bellcnt:not([hidden]){display:block}
.cp body.fresh.wz-brand .wzs-on{display:inline-flex}
.cp body.fresh.wz-brand .wzs-off{display:none}
.cp body.fresh.wz-fertig .fresh-card{display:none}
.cp .fempty:has(>[data-actgrid]){border:0;padding:0;text-align:left}
.cp .needs .card-h .t{white-space:normal}
@media (max-width:420px){.cp .fnr .fo{flex-wrap:wrap;row-gap:0}
.cp .fnr .fo .fn-n{flex:1 1 calc(100% - 40px)}
.cp .fn-n>span:first-child{white-space:normal}
.cp .fnr .fo>.chip{margin:0 0 6px 36px}}
.cp .acct{flex-wrap:wrap;row-gap:4px}
.cp .acct-alt{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline;font-size:12px;color:var(--text-3)}
.cp .list{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto}
.cp .view[data-view="tickets"] .list{grid-template-columns:12px minmax(0,2.4fr) minmax(0,1fr) minmax(0,.6fr) auto}
.cp .list.cmdl{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto}
.cp .row,.cp .list>.row{height:auto;min-height:40px;padding-top:6px;padding-bottom:6px}
.cp .row.hd,.cp .list>.row.hd{min-height:32px;padding-top:4px;padding-bottom:4px}
.cp .row>span.m,.cp .row .nm span,.cp .row.hd>span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
.cp .row>span.m.cut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.cp .card-h .t{white-space:normal;overflow-wrap:break-word}
.cp .wz-fr .n{white-space:normal}
@media (max-width:420px){.cp .metric{padding:10px 8px}
.cp .metric .eyebrow{letter-spacing:.04em}}
.cp .modwarn{display:grid;gap:6px;border:1px solid var(--border-2);border-left:3px solid var(--accent);background:var(--surface-2);padding:12px 14px;font-size:14px;color:var(--text)}
.cp .modwarn b{font-size:16px;line-height:22px}
.cp body.fresh:not(.tw-ok) .modwarn{display:none}
.cp body.fresh.needs-on .needs{display:grid}
.cp body.fresh.needs-on #bellcnt:not([hidden]){display:block}

/* Shared narrow-content layout: no data columns disappear. */
.cp #cp-nav-schliessen{display:none}
.cp .inspector .inp,.cp .inspector .sel{min-width:0;max-width:100%}
.cp .insp-h,.cp .dirty,.cp .insp-f{flex-wrap:wrap}
.cp .dirty .btn{margin-left:0}
.cp .insp-h .t{min-width:0}
.cp .toastwrap{max-width:calc(100vw - 32px);overflow-wrap:anywhere}
.cp .cp-dialog{max-height:calc(100dvh - 32px);overflow:auto}
@container main (max-width:664px){
.cp .list,.cp .view[data-view="tickets"] .list,.cp .list.cmdl{grid-template-columns:minmax(0,1fr)}
.cp .list>.row{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;align-items:start}
.cp .list>.row>*,.cp .row .nm span{min-width:0;white-space:normal;overflow-wrap:anywhere}
.cp .list>.row>:first-child{grid-column:1/-1}
}
@media (max-width:860px){.cp #cp-nav-schliessen{display:flex}}
@media (max-width:420px){.cp .metrics{grid-template-columns:minmax(0,1fr)}.cp .tiers{grid-template-columns:minmax(0,1fr)}}
/* ── Feste Breite des Inhalts — EINMAL für ALLE Seiten (Patrick 23.09.: „das soll durchgehend sein, damit wir eine
   linie verfolgen und das design lesbarer ist"). Die Zahl steht als EINE Gestaltungsmarke --inhalt-max in
   core/tokens.css; hier wird sie nur angewandt. Vorher deckelten sich drei Seiten selbst (auto.css 1180,
   deck.css 1160, giveaway.css 1180) und dreizehn gar nicht — diese drei max-width sind ersatzlos entfernt
   (ihr `container: … / inline-size` bleibt stehen, sonst kippen die Container-Abfragen dieser Seiten).
   ⚠⚠ RICHTIGSTELLUNG 23.09.2026: hier stand eine ausführliche Begründung dafür, warum der Inhalt auf
   1180 gedeckelt sei und nicht auf die 1640 des alten Panels. Das war FALSCH und hat in die Irre geführt:
   --inhalt-max in core/tokens.css steht auf 1640, und tools/check-cockpit-rahmen.mjs prüft genau diese
   Marke. Gedeckelt wird also auf 1640, wie im alten Panel (style.css:770).
   Die 1180 weiter unten sind eine ANDERE Zahl für eine ANDERE Sache: die Fensterbreite, unter der die
   Detailspalte nicht mehr eigene Rasterspalte, sondern angedockte Fläche ist (position:fixed). Sie ist ein
   Umbruchpunkt des Layouts, kein Deckel für den Inhalt. Zwei Zahlen, zwei Bedeutungen — wer sie
   verwechselt, ändert die eine und wundert sich über die andere.
   ⚠⚠ UMGESTELLT 27.09.2026 (Patrick: „Das gesamte Design ist jetzt zentral zentriert, das soll wieder linksbündig
   sein"). Bis dahin stand hier ein ZENTRIERTER Rahmen: `.app{max-width:…;margin-inline:auto}` rückte das ganze Panel
   samt Seitenleiste in die Fenstermitte, und `.content{padding-inline:max(32px,(100% - --inhalt-max)/2)}` setzte den
   Inhalt zusätzlich mittig in seine Spalte. Beides ist weg. Jetzt gilt:
   · Die Navigation klebt am linken Fensterrand, die Detailspalte am rechten (das Raster .app füllt das Fenster).
   · Der Inhalt beginnt linksbündig direkt neben der Navigation mit 32 px Innenabstand (Grundregel .content oben,
     Zeile ~226; unter 861 px 16 px, Zeile ~789).
   · Der Deckel für die Lesbarkeit bleibt — als max-width auf den KINDERN von .content (Kopf, Unterreiter, Seite),
     nicht auf .content selbst: der Inhaltsbereich trägt den Farbverlauf und den Rollbalken, die müssen die ganze
     Spalte füllen. --inhalt-max steht weiter EINMAL in core/tokens.css (1640, wie das alte Panel).
   · Unter 1180 px (Detailspalte angedockt, position:fixed) ändert sich nichts: dort war schon vorher kein Deckel
     wirksam, weil 1180 − 240 − 64 < 1640. Die Ausnahme-Regel von damals (padding-inline:32px) bleibt stehen, sie ist
     jetzt bloß dieselbe Zahl wie die Grundregel.
   Prüfstände: tools/check-cockpit-rahmen.mjs (rechnet die Inhaltsbreite je Fensterbreite, linksbündig),
   tools/check-deck-szenen-links.mjs (kein margin-inline:auto auf .app, keine zentrierende padding-Formel). */
.cp .content>*{max-width:var(--inhalt-max)}
.cp .cp-gratis{min-width:0;border:1px solid var(--border);padding:18px;background:var(--surface);margin-block:16px}
/* Übersicht: höchstens 4 Gratis-Karten in EINER Reihe (Bausatz-Raster hat 3 Spalten → 3+1 mit Lücke), 26.09.2026 */
.cp .cp-gratis--kompakt .cp-raster{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

.cp .cp-gratis h2,.cp .cp-gratis h3{margin:0;color:var(--text)}


.cp .cp-gratis__links-toggle{display:flex;flex-wrap:wrap;margin-top:12px}
.cp .cp-gratis__links-toggle .btn{max-width:100%;white-space:normal}
@media (min-width:861px) and (max-width:1180px){.cp .app:not(.insp-closed) .content{padding-inline:32px}}
@media (max-width:860px){.cp .content{padding-inline:16px}}

/* Mehr Wärme, sparsam dosiert (Patrick 23.09.: „bisschen mehr orange akzente … aber nicht zu viel").
   Orange trägt genau EINE Aussage: hier bist du / das ist an / das kommt als Nächstes.
   Der Seiten-Kicker ist die Überschriftenmarke der Seite (EINER je Seite) — wie im alten Panel, wo der Eyebrow
   seit style.css:2176 orange ist. Die Kicker in der Seitenleiste, in der Detailspalte und die Zähler am rechten
   Rand von .sect-h bleiben GRAU: wären sie auch orange, markierte Orange nichts mehr.
   --accent-t, nicht --accent: 11 px Mono ist normaler Text (≥ 7:1); #d97706 hat im Hellen nur 2,60:1. */
.cp .head .eyebrow{color:var(--accent-t)}

/* ── EINE Stufenleiter für Überschriften und Einleitungen, für ALLE Seiten (Patrick 23.09.: „der titel zieht die
   gesamte aufmerksamkeit auf sich"). Vorher setzte jede Seite ihre Überschriften selbst — auto.css bis 52px,
   deck.css bis 54px, alerts.css bis 48px, giveaway.css bis 44px. Deshalb war der Titel mal der lauteste Ton
   auf der Seite und mal nicht: das war nicht gestaltet, das war gewachsen.
   Die Leiter (Fenster 414px → 1920px Inhalt):  h1 22→28 · h2 19→24 · h3 16→18 · h4 15 · Fließtext 15.
   ⚠ Kleiner ist nicht besser: die Stufen bleiben bei JEDER Breite auseinander (414px: 22/19/16/15), die
   Überschrift sagt also weiter sofort, wo man ist. Sie benennt die Seite nur, statt sie zu beherrschen —
   die lauteste Stelle ist damit das, was der Kunde tun oder sehen will.
   ⚠ Die seiteneigenen Größen MUSSTEN raus: pages/*.css wird NACH shell.css geladen und hätte bei gleicher
   Spezifität immer gewonnen. Entfernt in alerts.css:7, auto.css:3/9/41, deck.css:4/29, giveaway.css:16/39,
   chat.css, tickets.css. Offen (fremde Spuren, nicht angefasst): studio.css, entdecken.css, builder.css. */
.cp .content h2{margin:0 0 6px;font:900 clamp(19px,1.8cqi,24px)/1.1 var(--display);letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}
.cp .content h3{margin:0 0 6px;font:900 clamp(16px,1.3cqi,18px)/1.2 var(--display);letter-spacing:.02em;text-transform:uppercase}
.cp .content h4{margin:0 0 8px;font:600 15px/22px var(--sans);letter-spacing:0}
.cp .content .lead,.cp .content .hero p{max-width:70ch;color:var(--text-2);font:15px/24px var(--sans)}

/* ── Hauptknopf: Kante trug im hellen Satz nicht (--accent = #d97706 auf --bg nur 2,80:1, gefordert 3:1 nach
   WCAG 1.4.11). Die FLÄCHE bleibt Trail — das ist die CDi-Regel und daran hängt der Primärknopf. Nur die KANTE
   wechselt auf --accent-line: dunkel 8,50:1 (#f59e0b), hell 4,89:1 (#a3520a) gegen --bg.
   ⚠ RICHTIGSTELLUNG 23.09.2026: hier stand „wechselt auf --accent-t: dunkel 8,50, hell 9,35". Zwei Fehler.
     Die Regel darunter setzt --accent-line, NICHT --accent-t; im dunklen Satz sind beide #f59e0b (daher fiel
     es nicht auf), im hellen Satz NICHT (--accent-t #603300 = 9,35:1, --accent-line #a3520a = 4,89:1). Die
     9,35 beschrieben also eine Farbmarke, die der Code nie benutzt hat. 4,89 erfüllt die geforderten 3:1
     weiterhin — die Kante ist in Ordnung, nur die Zahl war falsch. Nachgerechnet, nicht abgeschrieben.

   ⚠⚠ AUSNAHME ZUR HAUSLATTE 7:1 — ENTSCHIEDEN VON PATRICK AM 23.09.2026, HIER FESTGEHALTEN
   Die Beschriftung des Hauptknopfes (--void auf --accent) liegt bei 5,41:1 in BEIDEN Farbsätzen und
   BLEIBT DORT. Grund: ≥ 7:1 ist auf der Fläche --accent RECHNERISCH UNMÖGLICH.
     · --accent = #d97706, relative Leuchtdichte L = 0,2796.
     · OBERGRENZE, GEMESSEN: der günstigste denkbare Text ist reines Schwarz und ergibt
       (0,2796 + 0,05) / (0 + 0,05) = 6,59:1. Reines Weiß ergibt 3,19:1.
     · Es gibt also KEINE Textfarbe, die auf #d97706 sieben zu eins trägt. Wer 7:1 will, muss die
       FLÄCHE ändern — und die bleibt Trail (Markenregel). Reines Schwarz ist zusätzlich verboten.
   ⚠ Die gesetzliche Norm (WCAG AA, 4,5:1) ist mit 5,41 ERFÜLLT. Die 7:1 waren die strengere
     HAUSLATTE für Fließtext, nicht die Rechtslage. Patrick: die Marke bleibt, die Ausnahme wird
     dokumentiert und mit einer Probe festgenagelt, damit sie nicht schleichend schlechter wird.
   ⚠ Die Probe dazu ist check-knopfkontrast.mjs. Sie wird ROT, sobald der Wert UNTER 5,41 fällt, und
     sie liest --accent/--void aus tokens.css, statt die Zahlen nachzubauen. Diese Ausnahme gilt
     ausschließlich für .btn.pri auf --accent — sie ist kein Freibrief für anderen Text.
   ⚠ Gesperrt: opacity .45 drückte die Beschriftung auf 1,41:1 (dunkel) bzw. 2,53:1 (hell) — unlesbar. Ein
   gesperrter Knopf darf blass sein, nicht stumm: statt Durchsichtigkeit trägt er jetzt --surface-2 mit
   --text-3 (gemessen ≥ 7:1, steht als Paarung schon in check-hell-modus.mjs) und behält seine Beschriftung. */
.cp .btn.pri{border-color:var(--accent-line)}
/* ⚠ GEDRÜCKT (23.09.2026): für .btn.pri gab es KEINEN :active-Zustand — „gedrückt" war undefiniert, der
   Knopf sah beim Drücken aus wie beim Überfahren. (Befund am Rand: im ganzen Cockpit gab es bis heute
   nirgends ein :active. Hier wird nur der Hauptknopf gebaut, der Rest ist nicht mein Auftrag.)
   GEMESSEN wie die anderen Zustände:
     · Der Innenring ist --void auf --accent = 5,41:1 — über den 3:1 aus WCAG 1.4.11 für
       Bedienelement-Teile. Überfahren nutzt --bone und liegt bei nur 2,60:1; der gedrückte Ring ist
       also nicht bloß anders, sondern deutlich kräftiger. Zwei Zustände, zwei unterscheidbare Zeichen.
     · FLÄCHE UND BESCHRIFTUNG WERDEN NICHT ANGEFASST. Darum bleibt die Beschriftung auch gedrückt bei
       5,41:1 — der gedrückte Zustand kann die Ausnahme oben nicht verschlechtern. Das ist der Grund für
       einen Ring statt einer dunkleren Fläche (eine dunklere Fläche hätte die Lesbarkeit verschoben).
     · translateY(1px) gibt das Nachgeben. Es ist ein STATISCHER Zustand, keine Bewegung: der
       reduced-motion-Block (Zeile 444) schaltet nur animation/transition ab, der Versatz bleibt also
       auch dort sichtbar — richtig, denn „gedrückt" ist eine Rückmeldung, keine Zierde. */
.cp .btn.pri:active{box-shadow:inset 0 0 0 2px var(--void);transform:translateY(1px)}
.cp .btn.pri[disabled],.cp .btn.pri[aria-disabled="true"]{opacity:1;background:var(--surface-2);border-color:var(--border-2);color:var(--text-3)}
/* EINE OBS-Quelle (24.09.2026): gemeinsamer Hinweis + eingeklappte Einzelquellen, siehe core/quelle.js */
/* 27.09.2026 (Patrick: „oranger Block ist wahrscheinlich zu viel, aber immer gleich bei allen und getrennt, damit der Blick
   geführt ist"): kein Kasten mit Akzentrand mehr, sondern ein FUSS — Trennlinie oben, kleine Überzeile, Satz, Textlink;
   die linke Akzentkante (inset, --accent-line) ist der einzige Farbtupfer. In der Details-Spalte (#insp-b ist eine
   Flex-Spalte) rutscht er mit margin-top:auto ganz nach unten: Einstellungen oben, Quelle unten — bei allen gleich. */
.cp .cp-quelle-hinweis{display:grid;gap:6px;justify-items:start;margin-top:18px;padding:12px 0 0 12px;border-top:1px solid var(--border);box-shadow:inset 2px 0 0 var(--accent-line)}
.cp .cp-quelle-hinweis>.eyebrow{margin:0}
.cp .cp-quelle-hinweis>p{margin:0;color:var(--text-2);font-size:13px;line-height:1.45}
.cp .cp-quelle-hinweis>p strong{color:var(--text)}
.cp .cp-quelle-hinweis>.cp-einzelquellen{justify-self:stretch;margin-top:6px}
.cp .insp-b>.cp-quelle-hinweis,.cp .insp-b>:has(>.cp-quelle-hinweis:last-child){margin-top:auto}
.cp .cp-einzelquellen{margin-top:12px;border:1px solid var(--border);background:var(--surface)}
.cp .cp-einzelquellen>summary{cursor:pointer;padding:10px 14px;color:var(--text-2);font-weight:600}
.cp .cp-einzelquellen>.hint{margin:0 14px 10px}
.cp .cp-einzelquellen[open]>summary{border-bottom:1px solid var(--border);margin-bottom:10px}

/* Eingebettete Overlays (Entdecken, Gewinnspiel-Vorschau): Chrome legt hinter einen iframe einen hellen Grund, wenn
   dessen Farbschema nicht zum dunklen Cockpit passt (color-scheme:dark auf :root). Die Overlay-Seiten setzen keins,
   also "normal" auch am Rahmen, dann bleibt er durchsichtig. Befund 24.09.2026: Glücksrad-Welten auf hellgrauem Grund. */
.cp iframe{color-scheme:normal}
/* Hervorheben wie in einer Tour (Einrichtung angedockt, 25.09.2026): Rahmen pulst dreimal, dann weg. */
.cp .cp-hervor{outline:2px solid var(--accent);outline-offset:3px;animation:cp-hervor 1.2s ease-in-out 3}
@keyframes cp-hervor{50%{outline-color:transparent;outline-offset:8px}}
@media (prefers-reduced-motion:reduce){.cp .cp-hervor{animation:none}}

/* ── Handy (G7 Nachbesserung, 25.09.2026): Liste mit beschrifteter Bedienspalte; entworfen von GPT, gegengeprueft. ── */
@media (max-width:600px){
  .cp .cp-gratis{
    min-width:0;
  }


  .cp .cp-gratis__links-toggle{
    min-width:0;
  }

  .cp .cp-gratis__links-toggle .btn{
    width:100%;
    min-width:0;
    min-height:44px;
  }
}

/* 25.09.2026 (Patrick): Gratis auf der Übersicht nur als kleine Teaser-Karten, am Ende der Seite. */


/* ═══ Seitenbausatz (25.09.2026, core/bausatz.js) — EIN Aussehen für Block, Karte, Zeile, Raster auf allen Seiten ═══ */
.cp .cp-block{margin:0 0 20px;padding:16px 18px;border:1px solid var(--border);background:var(--surface)}
.cp .cp-block__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.cp .cp-block__titel{min-width:0}
.cp .cp-block__titel h3{margin:2px 0 0;font:700 18px/1.2 var(--display,inherit);letter-spacing:.01em}
.cp .cp-block__titel p{margin:4px 0 0;max-width:72ch;font-size:13px;color:var(--text-2)}
.cp .cp-block__aktion{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cp .cp-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@container main (max-width:1100px){.cp .cp-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sichtcheck 25.09.2026: minmax(0,1fr) statt 1fr — 1fr wächst auf die Mindestbreite des Inhalts (lange Zeilen liefen am Handy hinaus). */
@container main (max-width:700px){.cp .cp-raster{grid-template-columns:minmax(0,1fr)}.cp .cp-block__kopf{flex-direction:column}}
.cp .cp-karte{display:flex;align-items:flex-start;gap:12px;min-width:0;min-height:88px;padding:12px 14px;border:1px solid var(--border);background:var(--bg);text-align:left;cursor:pointer;transition:border-color var(--fast),background var(--fast)}
.cp .cp-karte:hover,.cp .cp-karte:focus-visible{border-color:var(--accent-line);background:var(--surface-2)}
.cp .cp-karte__k{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border-2);font:700 11px var(--mono);color:var(--text-2)}
/* 26.09.2026 (Patrick): Schrittnummern tragen den Akzent, die aktive Karte ist dezent hervorgehoben. */
.cp .cp-karte__k--nr{border-color:var(--accent-line);color:var(--accent-t);background:var(--mar-tint)}
.cp .cp-karte--an{border-color:var(--accent-line);box-shadow:inset 3px 0 0 var(--accent)}
.cp .cp-karte__main{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.cp .cp-karte__kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cp .cp-karte__t{font-weight:600;color:var(--text)}
/* Sichtcheck 25.09.2026: die ruhende Bildkarte trägt ihren Titel als h3 — er soll aussehen wie auf jeder anderen Karte,
   nicht wie eine Abschnittsüberschrift (die Stufenleiter .cp .content h3 schlug sonst durch: Versalien, Displayschrift). */
.cp .content .cp-bildkarte .cp-karte__t{margin:0;font:inherit;font-weight:600;text-transform:none;letter-spacing:normal;color:var(--text)}
.cp .cp-karte__text{font-size:13px;color:var(--text-2)}
.cp .cp-karte__auf{flex:0 0 auto;align-self:flex-end;font:600 11px var(--mono);letter-spacing:.06em;color:var(--text-3)}
.cp .cp-karte:hover .cp-karte__auf{color:var(--accent)}
/* Bildkarte (25.09.2026): Banner 5:1 wie die Teaser des alten Panels, darunter Titel, Satz, Angaben, Knöpfe. */
.cp .cp-bildkarte{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);background:var(--bg)}
.cp .cp-bildkarte__bild{display:block;width:100%;aspect-ratio:5/1;object-fit:cover;border-bottom:1px solid var(--border);background:var(--surface-2)}
.cp .cp-bildkarte__bild--leer{display:grid;place-items:center;font-size:28px}
.cp .cp-bildkarte__bild--ganz{aspect-ratio:3/1;object-fit:contain;padding:6px}
.cp .cp-bildkarte__main{display:flex;flex-direction:column;gap:6px;flex:1;padding:12px 14px}
.cp .cp-bildkarte__main h3,.cp .cp-bildkarte__main p{margin:0}
.cp .cp-bildkarte__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;padding-top:6px}
/* Ganze Karte öffnet (25.09.2026): Knopf über Bild + Text, Schalter oben rechts auf Höhe des Chips, Fuß mit höchstens einer Sofortaktion. */
.cp .cp-bildkarte--klick{position:relative;container-type:inline-size;transition:border-color var(--fast),background var(--fast)}
.cp .cp-bildkarte--klick:hover,.cp .cp-bildkarte--klick:has(.cp-bildkarte__auf:focus-visible){border-color:var(--accent-line);background:var(--surface-2)}
.cp .cp-bildkarte__auf{display:flex;flex-direction:column;width:100%;flex:1;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cp .cp-bildkarte__auf:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px}
/* 26.09.2026 (Gegenprüfung Fable S2): der Schalter steht absolut oben rechts — Platz für ihn hält jetzt der ganze
   Textteil frei, nicht nur die Kopfzeile (am Handy lief der Satz unter den Schalter). */
.cp .cp-bildkarte--schalter .cp-bildkarte__main{padding-right:80px}
.cp .cp-bildkarte__schalter{position:absolute;top:12px;right:14px;display:flex} /* Fable R4 B1: ohne flex blieb .tgl inline (2 px breit) */
.cp .cp-bildkarte--b5 .cp-bildkarte__schalter{top:calc(100cqw / 5 + 12px)}
.cp .cp-bildkarte--b3 .cp-bildkarte__schalter{top:calc(100cqw / 3 + 12px)}
.cp .cp-bildkarte__fuss{display:flex;flex-direction:column;gap:6px;padding:0 14px 12px}
.cp .cp-bildkarte__fuss .cp-bildkarte__knoepfe{padding-top:0}
.cp .cp-liste{border:1px solid var(--border);background:var(--bg)}
.cp .cp-zeile{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px;border:0;border-bottom:1px solid var(--border);background:transparent;text-align:left;cursor:pointer}
.cp .cp-zeile:last-child{border-bottom:0}
.cp .cp-zeile:hover,.cp .cp-zeile:focus-visible{background:var(--surface-2)}
.cp .cp-zeile__main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.cp .cp-zeile__t{font-weight:600;color:var(--text)}
.cp .cp-zeile__text{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp .cp-zeile__meta{font-size:12px;color:var(--text-3)}
.cp .cp-zeile__auf{color:var(--text-3)}

/* ── STATUSTAFEL + ZAHNRAD (27.09.2026, Bausatz tafel/zelle) ──────────────────────────────────────────────────────────
   Patrick: „man weiß nicht, wo zuerst hin … kompakter, eigens erstellte Cards … 4–5 nebeneinander nicht wie Malen nach
   Zahlen“ + „statt Öffnen › ein Zahnrad, das auf das Einstellungsmenü rechts hinweist“. Zweimal mit Codex gegengeprüft:
   EINE Fläche mit 1-px-Fugen statt loser Kästen · Kante NUR beim Problem (keine Mint-Kante je aktiver Zelle — das war
   die Wiederholung) · höchstens 5 Spalten, bei wenigen Zellen gedeckelt · schmal wird jede Zelle eine Zeile.
   Nur Marken aus tokens.css (Hell-Modus zieht mit). */
.cp .cp-zahnrad{display:block;width:18px;height:18px}
.cp #inspbtn .cp-zahnrad{width:15px;height:15px;flex:0 0 auto}
.cp .cp-karte__auf--rad{align-self:center;color:var(--text-3)}
.cp .cp-karte:hover .cp-karte__auf--rad,.cp .cp-karte:focus-visible .cp-karte__auf--rad{color:var(--accent-t)}
.cp .cp-tafel__hinweis p{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 12px;border:1px solid var(--warn-line);border-left:3px solid var(--warn);background:var(--cnt-warm);font-size:14px;color:var(--text)}
.cp .cp-tafel__hinweis i{font-style:normal;color:var(--warn);font:700 12px var(--mono)}
.cp .cp-tafel__hinweis b{font-weight:600}
.cp .cp-tafel__hinweis .btn{margin-left:auto}
.cp .cp-tafel{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(210px,calc((100% - 5px) / 5)),1fr));border-top:1px solid var(--border);border-left:1px solid var(--border)}
.cp .cp-tafel--n1{max-width:380px}
.cp .cp-tafel--n2{max-width:760px}
.cp .cp-tafel--n3{max-width:1140px}
.cp .cp-zelle{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--bg);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background var(--fast)}
.cp .cp-zelle--prob::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--warn)}
.cp .cp-zelle:has(.cp-zelle__auf:hover),.cp .cp-zelle:has(.cp-zelle__auf:focus-visible){background:var(--surface-2)}
.cp .cp-zelle__auf{display:grid;grid-template-rows:auto auto auto 1fr;gap:4px;flex:1;min-height:128px;padding:12px 16px 6px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cp div.cp-zelle__auf{cursor:default}
.cp .cp-zelle__auf:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px}
.cp .cp-zelle__kopf{display:flex;align-items:center;justify-content:space-between;min-height:30px}
.cp .cp-zelle__st{display:inline-flex;align-items:center;gap:6px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.cp .cp-zelle__st i{font-style:normal;width:12px;text-align:center}
.cp .cp-zelle__st--ok{color:var(--ok)}
.cp .cp-zelle__rad{display:grid;place-items:center;width:32px;height:32px;margin-right:-8px;border:1px solid transparent;color:var(--text-2)}
.cp .cp-zelle__auf:hover .cp-zelle__rad,.cp .cp-zelle__auf:focus-visible .cp-zelle__rad{color:var(--accent-t);border-color:var(--border-2)}
.cp .cp-zelle__name{font-weight:600;font-size:16px;line-height:22px;color:var(--text)}
.cp .cp-zelle--ruht .cp-zelle__name{color:var(--text-2)}
.cp .cp-zelle__satz{font-size:12.5px;line-height:18px;color:var(--text-3)}
.cp .cp-zelle__wert{align-self:end;display:flex;align-items:baseline;gap:6px;min-height:34px;padding-top:4px}
.cp .cp-zelle__wert b{font:800 30px/30px var(--display);color:var(--text)}
.cp .cp-zelle__wert span{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.cp .cp-zelle__fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 16px 10px}
.cp .cp-zelle__betrieb{font:500 12px var(--mono);color:var(--text-3);min-width:0;overflow-wrap:anywhere}
.cp .cp-zelle__betrieb i{font-style:normal}
.cp .cp-zelle__betrieb--prob{color:var(--warn)}
.cp .cp-zelle__fuss .btn{flex:0 0 auto;white-space:nowrap}
@container main (max-width:700px){
  .cp .cp-tafel{grid-template-columns:minmax(0,1fr)}
  .cp .cp-tafel--n1,.cp .cp-tafel--n2,.cp .cp-tafel--n3{max-width:none}
  .cp .cp-zelle__auf{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:12px;min-height:0}
  .cp .cp-zelle__kopf{grid-column:1 / -1}
  .cp .cp-zelle__wert{grid-column:2;grid-row:2 / span 2;align-self:center;padding:0;min-height:0}
}