/* ==========================================================================
WERKBANK-ANSICHT (K2 08.11.2026, K3a, K3½, K4a–f, Hex-Crawl X1 08.11.2026 – Hülle werkstattneutral) — Hülle nach Photoshop-Vorbild
Roadmap: admin/ROADMAP-WERKBANK.md · Rückbau: diese Datei + in index.php
+ den Block „WERKBANK“ in index.php entfernen. Mobile (≤ 900 px) und Druck
sehen die Hülle nie; alles hier hängt an body.werkbank.
Farbwelt: dunkles Chrom (#141311 / #1c1b19 / #272522), Akzent Rot #c0392b,
der Bogen bleibt Pergament.
========================================================================== */
/* ---- Hüllenteile sind in der klassischen Ansicht unsichtbar ------------- */
.wb-kopf, .wb-rail, .wb-opt, .wb-schiene, .wb-pal, .wb-status, .wb-menu { display: none; }
.wb-modal { display: none; }
/* Umschalter in der klassischen Kopfzeile (neben dem Ansichts-Modus-Knopf): nur Desktop ab 1100 px */
.wb-umschalter { display: none; }
@media (min-width: 1100px) {
html[data-mobile="0"] .wb-umschalter { display: inline-flex; align-items: center; gap: 6px; margin-left: 0; }
html[data-mobile="0"] .wb-umschalter .ic16 { width: 15px; height: 15px; }
}
.wb-umschalter kbd, .wb-kopf kbd {
border: 1px solid #4a463f; border-radius: 3px; padding: 0 4px; font-size: 9px; color: #8f8878;
font-family: Inter, system-ui, sans-serif; line-height: 14px;
}
.wb-umschalter kbd { border-color: #a68a6a; color: #d9c9a8; }
/* ---- Grundgerüst -------------------------------------------------------- */
body.werkbank {
display: grid;
grid-template-rows: 36px 44px 1fr 28px;
grid-template-columns: 44px minmax(0, 1fr) 40px;
grid-template-areas:
"kopf kopf kopf"
"rail opt pal"
"rail buehne pal"
"status status status";
height: 100vh; height: 100dvh; max-width: none; box-shadow: none;
background: #1c1b19; overflow: hidden;
font-family: Inter, system-ui, 'Segoe UI', sans-serif;
}
body.werkbank > header, body.werkbank > nav#main-nav, body.werkbank > footer,
body.werkbank > .nav-backdrop { display: none !important; }
body.werkbank.wb-pal-offen { grid-template-columns: 44px minmax(0, 1fr) var(--wb-pal-w, 280px); } /* X1b: Breite per Ziehgriff (--wb-pal-w auf body) */
body.werkbank .wb-kopf, body.werkbank .wb-opt, body.werkbank .wb-status { display: flex; }
body.werkbank .wb-rail, body.werkbank .wb-schiene { display: flex; }
body.werkbank.wb-pal-offen .wb-schiene { display: none; }
body.werkbank.wb-pal-offen .wb-pal { display: flex; }
/* Gemeinsames Chrom */
.wb-kopf, .wb-rail, .wb-opt, .wb-schiene, .wb-pal, .wb-status { color: #d9d4c7; font-size: 13px; box-sizing: border-box; }
.wb-kopf button, .wb-rail a, .wb-opt button, .wb-schiene button, .wb-pal h3 button, .wb-status button { font: inherit; cursor: pointer; }
.wb-kopf .ic, .wb-rail .ic, .wb-opt .ic, .wb-schiene .ic, .wb-menu .ic, .wb-umschalter .ic,
.ic16 { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic { width: 22px; height: 22px; }
.ic16 { width: 16px; height: 16px; stroke-width: 1.8; }
/* ---- Kopfzeile (36 px) -------------------------------------------------- */
.wb-kopf {
grid-area: kopf; align-items: center; justify-content: space-between;
padding: 0 12px 0 14px; background: #141311; border-bottom: 1px solid #2e2c28;
}
.wb-kopf-titel { display: flex; align-items: center; gap: 10px; }
.wb-kopf-titel .wb-marke { font-family: 'Grenze Gotisch', 'Cinzel', serif; font-size: 17px; letter-spacing: .08em; color: #f1ede3; }
.wb-kopf-titel .wb-marke a { color: inherit; text-decoration: none; }
.wb-kopf-titel .wb-untertitel { color: #6f695c; font-size: 11px; }
.wb-kopf-rechts { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #8f8878; }
.wb-kopf-rechts .wb-btn, body.werkbank .wb-kopf .view-mode-toggle {
height: 24px; border: 1px solid #3d3a35; background: #272522; color: #d9d4c7; border-radius: 4px;
padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
font-family: Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; position: static; transform: none;
}
.wb-kopf-rechts .wb-btn:hover, body.werkbank .wb-kopf .view-mode-toggle:hover { background: #34312d; color: #fff; border-color: #3d3a35; }
.wb-kopf-rechts .wb-btn[hidden] { display: none; }
.wb-kopf-rechts .wb-btn-hilfe { padding: 0 6px; gap: 4px; }
/* ---- Werkstatt-Leiste links (44 px) ------------------------------------- */
.wb-rail {
grid-area: rail; flex-direction: column; align-items: center; padding-top: 4px;
background: #141311; border-right: 1px solid #2e2c28; overflow: hidden;
}
.wb-rail a, .wb-rail button {
position: relative; width: 44px; height: 44px; border: 0; background: transparent; color: #bfb9ab;
display: flex; align-items: center; justify-content: center; border-radius: 6px; text-decoration: none; flex: 0 0 auto;
}
.wb-rail a:hover, .wb-rail button:hover { background: #2b2926; color: #fff; }
.wb-rail a.active, .wb-rail button[aria-expanded="true"] { background: #c0392b; color: #fff; }
.wb-rail small { position: absolute; right: 5px; bottom: 3px; font-size: 8px; color: #9b9484; line-height: 1; font-family: Inter, system-ui, sans-serif; }
.wb-rail a.active small { color: #f3d4cf; }
.wb-rail hr { width: 26px; border: 0; border-top: 1px solid #3a3733; margin: 5px auto; flex: 0 0 auto; }
@media (max-height: 760px) { .wb-rail a, .wb-rail button { height: 38px; } .wb-rail hr { margin: 3px auto; } }
/* K6d (09.11.2026, W22): Würfeln-Knopf mit Pfeil (Split-Button) + Menü „Ganz zufällig“ */
body.werkbank .wb-opt-slot[data-slot="wuerfeln"] { gap: 0; }
body.werkbank .wb-opt-slot[data-slot="wuerfeln"] #wb-btn-wuerfeln { border-radius: 5px 0 0 5px; }
.wb-opt button.wb-split { width: 24px; padding: 0; justify-content: center; border-radius: 0 5px 5px 0; border-left: 1px solid rgba(0,0,0,.35); }
.wb-opt button.wb-split .ic16 { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wb-wurf-menu { position: fixed; z-index: 1250; min-width: 300px; background: #1c1b19; border: 1px solid #3d3a35; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.5); padding: 4px; font-family: Inter, system-ui, sans-serif; }
.wb-wurf-menu[hidden] { display: none; }
.wb-wurf-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: #f1ede3; font: 13px Inter, system-ui, sans-serif; text-align: left; cursor: pointer; height: auto; }
.wb-wurf-menu button:hover, .wb-wurf-menu button:focus-visible { background: #3a2522; }
.wb-wurf-menu button span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.wb-wurf-menu button small { color: #8f8878; font-size: 11px; }
.wb-wurf-menu button kbd { font: 10px Inter, system-ui, sans-serif; border: 1px solid #4a4640; border-radius: 3px; padding: 0 5px; color: #a39d8f; }
.wb-wurf-menu .ic16 { width: 18px; height: 18px; stroke: #c0392b; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
@media print { .wb-wurf-menu { display: none !important; } }
/* K6c (09.11.2026, W21): Zähler an den Icons – rote Plakette wie WhatsApp (Peters Wahl), weiß umrandet auf dem aktiven Icon */
.wb-rail .wb-zahl {
position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
border-radius: 8px; background: #e53935; color: #fff; font: 700 10px/16px Inter, system-ui, sans-serif; text-align: center;
box-shadow: 0 0 0 2px #141311; pointer-events: none;
}
.wb-rail .wb-zahl[hidden] { display: none; }
.wb-rail a.active .wb-zahl { background: #fff; color: #c0392b; box-shadow: 0 0 0 2px #c0392b; }
.wb-rail a:hover .wb-zahl { box-shadow: 0 0 0 2px #2b2926; }
/* K6b (09.11.2026, W20): Schnellsuche – Knopf in der Kopfzeile, Fenster oben mittig */
.wb-suche-knopf {
margin: 0 auto; height: 24px; width: 300px; max-width: 32vw; display: inline-flex; align-items: center; gap: 8px;
padding: 0 6px 0 9px; border: 1px solid #3d3a35; border-radius: 5px; background: #1c1b19; color: #8f8878;
font: 12px Inter, system-ui, sans-serif; cursor: text;
}
.wb-suche-knopf:hover { border-color: #6f695c; color: #d9d4c7; }
.wb-suche-knopf span { flex: 1 1 auto; text-align: left; }
.wb-suche-knopf kbd { font: 10px Inter, system-ui, sans-serif; border: 1px solid #3d3a35; border-radius: 3px; padding: 0 4px; color: #8f8878; }
.wb-suche-knopf .ic16 { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.wb-suche { position: fixed; inset: 0; z-index: 1400; background: rgba(10, 9, 8, .45); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.wb-suche[hidden] { display: none; }
.wb-suche-box { width: 520px; max-width: calc(100vw - 40px); background: #1c1b19; border: 1px solid #3d3a35; border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.5); overflow: hidden; font-family: Inter, system-ui, sans-serif; color: #d9d4c7; }
.wb-suche-zeile { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid #2e2c28; color: #8f8878; }
.wb-suche-zeile .ic16 { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; flex: 0 0 auto; }
.wb-suche-zeile input { flex: 1 1 auto; height: 48px; border: 0; background: none; color: #f1ede3; font: 15px Inter, system-ui, sans-serif; outline: none; }
.wb-suche-zeile input::placeholder { color: #6f695c; }
.wb-suche-liste { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.wb-suche-liste li { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.wb-suche-liste li.an { background: #3a2522; color: #fff; }
.wb-suche-liste li .ic { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wb-suche-liste li .ohne-ic { width: 18px; flex: 0 0 auto; }
.wb-suche-liste li .nm { flex: 1 1 auto; }
.wb-suche-liste li .wo { color: #6f695c; font-size: 11px; }
.wb-suche-liste li kbd { font: 10px Inter, system-ui, sans-serif; border: 1px solid #4a4640; border-radius: 3px; padding: 0 5px; color: #a39d8f; }
.wb-suche-liste li.leer { color: #6f695c; cursor: default; }
.wb-suche-fuss { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid #2e2c28; font-size: 11px; color: #6f695c; }
.wb-suche-fuss kbd { font: 10px Inter, system-ui, sans-serif; border: 1px solid #3d3a35; border-radius: 3px; padding: 0 4px; margin-right: 3px; }
@media print { .wb-suche, .wb-suche-knopf { display: none !important; } }
/* Leerzustand: Inline-Farben der Werkstatt-Texte (z. B. Hexkarte #6a4a22) auf dunklem Grund lesbar machen */
body.werkbank.wb-leer #wb-leer > .wb-leer-text p[style] { color: #8f8878 !important; }
/* Aufklappmenü „Weitere Seiten“ (Einzelwürfe, Bibliothek …) */
body.werkbank .wb-menu {
display: none; position: fixed; left: 48px; z-index: 1200; min-width: 210px;
background: #272522; border: 1px solid #3d3a35; border-radius: 6px; padding: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 13px;
}
body.werkbank .wb-menu.offen { display: block; }
.wb-menu h4 { margin: 4px 8px 6px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8f8878; }
.wb-menu a { display: block; padding: 6px 10px; border-radius: 4px; color: #d9d4c7; text-decoration: none; }
.wb-menu a:hover { background: #34312d; color: #fff; }
.wb-menu a.active { background: #3a2522; color: #fff; }
/* ---- Optionsleiste oben (44 px) ----------------------------------------- */
.wb-opt {
grid-area: opt; align-items: center; gap: 8px; padding: 0 10px; min-width: 0;
background: #1c1b19; border-bottom: 1px solid #2e2c28; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.wb-opt-slot { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 0 auto; }
.wb-opt-slot:empty, .wb-opt-slot.ist-leer { display: none; }
/* K6a (09.11.2026, W23): feste Positionen – Titel · Eintrag · Würfeln · Befehle stehen immer an derselben Stelle,
egal welche Werkstatt; nur „eigen“ (Werkzeuge der Werkstatt) und „etage“ dürfen leer sein. */
body.werkbank .wb-opt-slot[data-slot="titel"] { display: flex; flex: 0 0 250px; width: 250px; overflow: hidden; }
body.werkbank .wb-opt-slot[data-slot="wahl"] { display: flex; flex: 0 0 320px; width: 320px; }
body.werkbank .wb-opt-slot[data-slot="wuerfeln"] { display: flex; flex: 0 0 auto; }
body.werkbank .wb-opt-slot[data-slot="befehle"] { display: flex; flex: 0 0 138px; width: 138px; }
body.werkbank .wb-opt .gr-titel { min-width: 0; overflow: hidden; }
body.werkbank .wb-opt .gr-titel > * { flex: 0 0 auto; }
body.werkbank .wb-opt .gr-titel > [class$="-atlas-status"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.werkbank .wb-opt-fallback { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wb-wahl.aus { opacity: .45; }
.wb-wahl select:disabled { cursor: default; }
.wb-wahl select:disabled:hover { background: #272522; }
.wb-opt button.primaer:disabled { background: #3a2522; border-color: #4a2a26; color: #9a7f7a; }
.wb-opt button.primaer:disabled:hover { background: #3a2522; }
.wb-befehle-platz { display: flex; gap: 6px; }
.wb-opt button.wb-pl { width: 30px; padding: 0; justify-content: center; font-size: 0; }
.wb-opt button.wb-pl::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--wb-ic) center / 16px 16px no-repeat; mask: var(--wb-ic) center / 16px 16px no-repeat; }
.wb-opt button.wb-pl-leeren { color: #e08a7f; }
/* K3a: Eintrag-Wahl als Aufklappliste — die gehobene Tab-Leiste bleibt (versteckt) im Slot als Datenquelle */
body.werkbank .wb-opt .wb-opt-slot .gr-wahl { display: none; } /* schlägt die Flex-Regel der gehobenen Gruppen unten (K4a: jede Werkstatt) */
.wb-wahl { display: inline-flex; align-items: center; gap: 6px; color: #8f8878; font-size: 11px; }
.wb-wahl[hidden] { display: none; }
.wb-wahl select {
height: 30px; width: 220px; max-width: 220px; border: 1px solid #3d3a35; background: #272522; color: #f1ede3; border-radius: 5px;
padding: 0 8px; font: inherit; font-size: 13px; cursor: pointer;
}
.wb-wahl select:hover { background: #34312d; }
.wb-opt button.wb-ikon { width: 30px; padding: 0; justify-content: center; }
.wb-opt button.wb-ikon .ic16 { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wb-opt button.wb-gefahr { color: #e08a7f; }
.wb-opt-trenner { width: 1px; height: 22px; background: #3a3733; margin: 0 4px; flex: 0 0 auto; }
.wb-opt-slot[data-slot="eigen"]:empty + .wb-opt-slot[data-slot="etage"]:empty { display: none; }
.wb-opt-slot[data-slot="befehle"] + .wb-opt-trenner:has(+ .wb-opt-slot[data-slot="eigen"]:empty) { visibility: hidden; } /* Trenner vor leeren Werkzeugen unsichtbar, Platz bleibt */
.wb-opt-platz { flex: 1 1 auto; }
/* K6e (10.11.2026): Tasten-Knopf statt grauer Zeile + Tastenübersicht */
.wb-opt button.wb-tasten-knopf { flex: 0 0 auto; height: 26px; padding: 0 6px 0 8px; gap: 6px; font-size: 12px; color: #d9d4c7; border-color: #4a4640; background: #2a2825; }
.wb-opt button.wb-tasten-knopf:hover { background: #3a3631; border-color: #8f8878; color: #fff; }
.wb-tasten-knopf .ic16 { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.wb-tasten-knopf kbd, .wb-tasten kbd { display: inline-block; min-width: 18px; text-align: center; font: 600 11px Inter, system-ui, sans-serif; line-height: 16px; color: #f1ede3; background: #3a3733; border: 1px solid #5a554d; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }
.wb-tasten { position: fixed; inset: 0; z-index: 1400; background: rgba(10, 9, 8, .5); display: flex; justify-content: center; align-items: flex-start; padding-top: 9vh; }
.wb-tasten[hidden] { display: none; }
.wb-tasten-box { width: 760px; max-width: calc(100vw - 40px); max-height: 82vh; display: flex; flex-direction: column; background: #1c1b19; border: 1px solid #3d3a35; border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.5); font-family: Inter, system-ui, sans-serif; color: #d9d4c7; overflow: hidden; }
.wb-tasten-kopf { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid #2e2c28; }
.wb-tasten-kopf h3 { margin: 0; font: 600 16px Inter, system-ui, sans-serif; color: #f1ede3; letter-spacing: 0; text-transform: none; }
.wb-tasten-wo { flex: 1 1 auto; color: #8f8878; font-size: 12px; }
#wb-tasten-zu { border: 0; background: none; color: #8f8878; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
#wb-tasten-zu:hover, #wb-tasten-zu:focus-visible { color: #fff; }
.wb-tasten-inhalt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding: 12px 16px 6px; overflow-y: auto; }
.wb-tasten section.breit { grid-column: 1 / -1; }
.wb-tasten h4 { margin: 4px 0 6px; font: 600 10.5px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8f8878; }
.wb-tasten ul { list-style: none; margin: 0 0 8px; padding: 0; }
.wb-tasten ul.spalten { columns: 3; column-gap: 24px; }
.wb-tasten li { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: 13px; break-inside: avoid; }
.wb-tasten li .t { flex: 0 0 118px; display: inline-flex; align-items: center; gap: 3px; }
.wb-tasten ul.spalten li .t { flex-basis: 30px; }
.wb-tasten li .t i { font-style: normal; color: #6f695c; font-size: 11px; }
.wb-tasten li.aus { opacity: .38; }
.wb-tasten-fuss { padding: 9px 16px; border-top: 1px solid #2e2c28; font-size: 11.5px; color: #8f8878; }
.wb-tasten-fuss kbd { font-size: 10px; line-height: 14px; min-width: 14px; }
@media print { .wb-tasten, .wb-tasten-knopf { display: none !important; } }
.wb-opt-fallback { font-weight: 600; color: #f1ede3; white-space: nowrap; }
/* Knöpfe in der Optionsleiste (eigene + gehobene) */
.wb-opt button, body.werkbank .wb-opt .gr-befehle button {
height: 30px; border: 1px solid #3d3a35; background: #272522; color: #d9d4c7; border-radius: 5px;
padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-family: inherit;
text-transform: none; letter-spacing: 0; line-height: 1; white-space: nowrap; box-shadow: none; transition: background .15s;
}
.wb-opt button:hover, body.werkbank .wb-opt .gr-befehle button:hover { background: #34312d; color: #fff; }
.wb-opt button.primaer { background: #c0392b; border-color: #c0392b; color: #fff; font-weight: 600; }
.wb-opt button.primaer:hover { background: #d3473a; }
.wb-opt button.primaer kbd { font-size: 10.5px; font-weight: 700; line-height: 15px; background: rgba(0,0,0,.18); opacity: 1; border: 1px solid rgba(255,255,255,.4); border-radius: 3px; padding: 0 3px; font-family: inherit; }
.wb-opt button:disabled, body.werkbank .wb-opt .gr-befehle button:disabled { opacity: .38; cursor: default; }
body.werkbank .wb-opt .gr-befehle button:disabled:hover { background: #272522; color: #d9d4c7; }
body.werkbank .wb-opt .gr-befehle [class*="-btn-danger"]:disabled:hover { color: #e08a7f; }
.wb-opt button[hidden] { display: none; }
body.werkbank .wb-opt .gr-befehle button.wk-icon-btn,
body.werkbank .wb-opt .gr-befehle [class*="-btn-danger"] { width: 30px; padding: 0; justify-content: center; font-size: 0; color: #d9d4c7; }
body.werkbank .wb-opt .gr-befehle [class*="-btn-danger"] { color: #e08a7f; }
body.werkbank .wb-opt .gr-befehle button.wk-icon-btn::before {
content: ""; display: block; width: 16px; height: 16px; background: currentColor;
-webkit-mask: var(--wb-ic) center / 16px 16px no-repeat; mask: var(--wb-ic) center / 16px 16px no-repeat;
}
/* Icon-Satz „Strich“ (admin/werkzeug/icons.py) als Masken — Emoji-Text wird per font-size:0 ausgeblendet */
body.werkbank .wb-opt [id$="-btn-print-one"], body.werkbank .wb-opt [id$="-btn-druck"], body.werkbank .wb-opt .wb-pl-druck { --wb-ic: url("data:image/svg+xml;utf8,"); }
body.werkbank .wb-opt [id$="-btn-export"], body.werkbank .wb-opt .wb-pl-export { --wb-ic: url("data:image/svg+xml;utf8,"); }
body.werkbank .wb-opt [id$="-btn-import"], body.werkbank .wb-opt .wb-pl-import { --wb-ic: url("data:image/svg+xml;utf8,"); }
body.werkbank .wb-opt [id$="-btn-clear"], body.werkbank .wb-opt [id$="-btn-leeren"], body.werkbank .wb-opt .wb-pl-leeren { --wb-ic: url("data:image/svg+xml;utf8,"); }
/* Gehobene Gewölbe-Gruppen: Pergament-Styling der Werkstatt wird im Chrom neutralisiert */
body.werkbank .wb-opt .gr-titel { font-family: inherit; color: #d9d4c7; gap: 8px; }
body.werkbank .wb-opt .gr-titel [class$="-atlas-title-main"] { font-size: 13px; font-weight: 600; color: #f1ede3; font-variant: normal; letter-spacing: 0; white-space: nowrap; }
body.werkbank .wb-opt .gr-titel [class$="-atlas-title-sep"] { color: #6f695c; }
body.werkbank .wb-opt .gr-titel [class$="-atlas-status"] { font-size: 13px; letter-spacing: 0; text-transform: none; font-variant: normal; color: #8f8878; white-space: nowrap; }
body.werkbank .wb-opt .gr-befehle { gap: 6px; }
body.werkbank .wb-opt .gr-wahl {
position: static; display: flex; flex-wrap: nowrap; gap: 4px; padding: 0; margin: 0; min-height: 0; max-width: none;
background: none; border: 0; box-shadow: none; overflow-x: auto; scrollbar-width: thin;
}
body.werkbank .wb-opt .gr-wahl:empty::before { color: #6f695c; font-size: 12px; padding: 0; }
body.werkbank .wb-opt .gr-wahl > [data-tab-id] {
background: #272522; border: 1px solid #3d3a35; color: #d9d4c7; border-radius: 5px; height: 30px; box-sizing: border-box;
font-family: inherit; font-size: 12px; padding: 0 4px 0 10px; flex: 0 0 auto;
}
body.werkbank .wb-opt .gr-wahl > [data-tab-id]:hover { background: #34312d; color: #fff; }
body.werkbank .wb-opt .gr-wahl > [data-tab-id].active { background: #3a2522; border-color: #c0392b; color: #fff; }
body.werkbank .wb-opt .gr-wahl [class$="-tab-rename"], body.werkbank .wb-opt .gr-wahl [class$="-tab-close"] {
background: transparent; border: 0; color: #8f8878; height: auto; padding: 0 3px; font-size: 13px;
}
body.werkbank .wb-opt .gr-wahl [class$="-tab-rename"]:hover, body.werkbank .wb-opt .gr-wahl [class$="-tab-close"]:hover { color: #fff; background: transparent; }
/* Die (jetzt leere) Kopfzeile bleibt als Anker im Bogen (atlasHinweis hängt sich dahinter) */
body.werkbank #main-content [id$="-atlas-header"] { display: none; }
body.werkbank #main-content .gr-titel, body.werkbank #main-content .gr-wahl,
body.werkbank #main-content .gr-etage, body.werkbank #main-content .gr-befehle { display: none; } /* Sicherheitsnetz, falls Heben fehlschlägt */
body.werkbank .wb-opt .gr-titel, body.werkbank .wb-opt .gr-wahl,
body.werkbank .wb-opt .gr-etage, body.werkbank .wb-opt .gr-befehle { display: flex; }
/* ---- Bühne: main wird zur Bühne, der Bogen bleibt Pergament -------------- */
body.werkbank > main#main-content {
grid-area: buehne; overflow: auto; min-width: 0; min-height: 0; padding: 22px 28px; box-sizing: border-box;
background: #e3d6bc; background-image: radial-gradient(circle at 50% 30%, #eadfc8, #d9cbae);
font-family: 'Asul', sans-serif; /* wie main in styles.css */
}
body.werkbank > main#main-content > .werkstatt-heading { display: none; } /* steht in der Optionsleiste */
/* K3a (W10): der Bogen ist ein Dokument — feste Lesebreite, zentriert, Schatten auf der Bühne */
body.werkbank > main .container-dungeon { max-width: 1150px !important; margin: 0 auto; } /* !important: M4-Regel der Werkstatt (≥ 1400 px: max-width none) */
body.werkbank > main .container-dungeon .gw-col-map { top: 0; max-height: calc(100vh - 152px); } /* M4-Sticky: die Bühne scrollt, nicht das Fenster */
body.werkbank .container-dungeon .dungeon-sheet { box-shadow: 0 6px 24px rgba(0,0,0,.35); }
body.werkbank #main-content details.hex-crawl-howto { display: none; } /* Spickzettel lebt im „?“-Modal (W12) */
body.werkbank:not(.wb-leer) #main-content .gr-wuerfeln { display: none; } /* Sicherheitsnetz, falls Heben fehlschlägt */
/* ---- K3½ (W17): Bögen aller Werkstätten — jeder Bogen ein Dokument auf der Bühne ----------
Gewölbe hat .container-dungeon (oben). Alle anderen Seiten: jedes Top-Level-Element der Bühne
(Wrapper .character-generator-form, .container, Tab-Container, section.register-werkstatt /
.namen-generator, …) wird auf 1150 px begrenzt und zentriert.
Innere Bögen behalten ihre eigene Breite (900 px, Entscheidung Peter 08.11.) und bekommen den
Schatten des Gewölbe-Musters. Kopfzeile und Formular bleiben im Bogen (K4). */
body.werkbank > main#main-content > .character-generator-form,
body.werkbank > main#main-content > .container,
body.werkbank > main#main-content > [id$="-tabs-container"],
body.werkbank > main#main-content > #hkw-tabs,
body.werkbank > main#main-content > .trp-leiste,
body.werkbank > main#main-content > .trp-bogen,
body.werkbank > main#main-content > .register-werkstatt,
body.werkbank > main#main-content > .namen-generator,
body.werkbank > main#main-content > .wildnis-actions,
body.werkbank > main#main-content > .character-generator-footer { max-width: 1150px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
/* Bewusst nicht in der Liste: .character-sheet (900 px), *-empty-state (700 px), .trp-leer (640 px), .bibliothek-werkstatt (900 px, s. u.), .blog-entry-page (Startseite, W9) – die behalten ihre eigene Breite und werden nur zentriert (sind sie schon). */
/* Werkstatt-Überschrift ausblenden – steht in der Optionsleiste (auch die im Wrapper der Einzelwürfe) */
body.werkbank > main#main-content > .character-generator-form > h1,
body.werkbank > main#main-content > .container > .character-generator-form > h1,
body.werkbank > main#main-content > .bibliothek-werkstatt > h1 { display: none; }
body.werkbank > main#main-content > .trp-werkstatt .trp-intro { margin-top: 0; } /* hing mit −8 px an der Überschrift */
/* Formular-Boxen (900 px) mittig unter der Kopfzeile – einige Werkstätten setzen margin-left: 0 (fiel im 1200-px-Kasten nicht auf) */
body.werkbank #main-content .character-generator-form > form { margin-left: auto; margin-right: auto; }
/* Schatten nach dem Gewölbe-Muster – die Inset-Schatten des Pergament-Rahmens bleiben */
body.werkbank #main-content .character-sheet { box-shadow: inset 0 0 0 1px #5d3a18, inset 0 0 40px rgba(120,80,30,.18), 0 6px 24px rgba(0,0,0,.35); }
body.werkbank #main-content .register-werkstatt,
body.werkbank #main-content .namen-generator { box-shadow: 0 6px 24px rgba(0,0,0,.35); }
body.werkbank #main-content .character-generator-form > form,
body.werkbank #main-content .trp-bogen { box-shadow: 0 3px 14px rgba(0,0,0,.22); }
/* Wrapper ohne eigene Bogen-Box werden in der Werkbank selbst zum Pergament-Blatt: Hexkarte = der Tab-Bereich
#hkw-tabs (Karte + Heft; das Formular hat wie überall schon seine Box), Bibliothek = der ganze Wrapper.
Trupp braucht nichts: Formular-Box + .trp-bogen haben eigene Rahmen. */
body.werkbank > main#main-content > #hkw-tabs:has(.hkw-tab),
body.werkbank > main#main-content > .bibliothek-werkstatt {
background-color: #fdfaf3; background-image: url('images/paper-fibers.png');
border: 5px double #4a3728; padding: 24px 28px; box-sizing: border-box;
box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
body.werkbank > main#main-content > .bibliothek-werkstatt { max-width: 900px; } /* eigene Breite der Bibliothek bleibt */
/* Fraktionen-Werkstatt (goladirs-monster-werkstatt.php) trägt .register-werkstatt, bringt aber Rahmen/Innenabstand des Registers nicht mit (Peter 08.11., 14:18) */
body.werkbank > main#main-content > .container-gmw.register-werkstatt { padding: 25px 30px; border: 5px double #4a3728; box-sizing: border-box; }
body.werkbank > main#main-content > .container-gmw.register-werkstatt > h1 { display: none; }
/* (K3½-Regel für .hkw-kartenrahmen entfällt seit X1: Karte = Leinwand) */
/* ---- Hex-Crawl-UX X1 (08.11.2026): Karte = Leinwand, Feldtafel = Palette „Feld“ (Roadmap ROADMAP-HEXKARTE-UX.md, H2) ----
Kein Bogen: die Karte füllt die Bühne, die Bühne scrollt nicht (Mausrad zoomt, Ziehen verschiebt). Kopf, Tab-Leiste und
Formular liegen in der Hülle, Werkzeugzeile (.gr-werkzeug) in der Optionsleiste, Feldtafel + Bögen (.gr-feld) in der Palette. */
body.werkbank > main#main-content:has(> #hkw-tabs > .hkw-tab) { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
body.werkbank > main#main-content > .hkw-werkstatt { display: none; } /* B8: leerer Rest des Wrappers */
body.werkbank > main#main-content > #hkw-tabs:has(> .hkw-tab) { flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; display: flex; flex-direction: column; }
body.werkbank #hkw-tabs > .hkw-tab { flex: 1 1 auto; min-height: 0; margin: 0; display: flex; flex-direction: column; }
body.werkbank #hkw-tabs .hkw-raster { flex: 1 1 auto; min-height: 0; display: block; }
body.werkbank #hkw-tabs .hkw-kartenrahmen { height: 100%; max-height: none; border: 0; background: transparent; box-sizing: border-box; }
body.werkbank #hkw-tabs .hkw-karte { width: 100%; height: 100%; box-sizing: border-box; padding: 18px 24px; }
body.werkbank #hkw-tabs .hkw-karte svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 24px rgba(60,40,15,.28)); }
/* Werkzeugzeile der Karte in der Optionsleiste */
body.werkbank .wb-opt .hkw-werkzeug { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; font-family: inherit; }
body.werkbank .wb-opt .hkw-werkzeug .hkw-info { display: none; } /* B6: Hilfe steht im Spickzettel, Startwert im Kartenkopf */
body.werkbank .wb-opt .hkw-werkzeug button {
height: 30px; min-width: 30px; border: 1px solid #3d3a35; background: #272522; color: #d9d4c7; border-radius: 5px;
padding: 0 8px; font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
body.werkbank .wb-opt .hkw-werkzeug button:hover { background: #34312d; color: #fff; }
body.werkbank .wb-opt .hkw-werkzeug label {
height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #3d3a35; border-radius: 5px;
background: #272522; color: #d9d4c7; font-size: 13px; white-space: nowrap; cursor: pointer;
}
body.werkbank .wb-opt .hkw-werkzeug label:has(input:checked) { background: #3a2522; border-color: #c0392b; color: #fff; }
body.werkbank .wb-opt .hkw-werkzeug input[type=checkbox] { width: 14px; height: 14px; margin: 0; accent-color: #c0392b; }
/* Palette „Feld“: breiter (320 px), eigener Scroll, Inhalt bleibt Pergament (W3) */
body.werkbank.wb-pal-offen.wb-pal-breit { grid-template-columns: 44px minmax(0, 1fr) var(--wb-pal-w, 400px); } /* X1b: Hexkarte Standard 400 px */
body.werkbank .wb-palette-feld { flex: 1 1 auto; }
body.werkbank .wb-palette-feld .wb-pal-body { flex: 1 1 auto !important; padding: 8px; }
body.werkbank #wb-pal-feld .hkw-feldpanel { max-height: none; border: 0; border-radius: 6px; background: #f3e9cf; padding: 10px 12px; }
body.werkbank #wb-pal-feld .hkw-boegen { margin-top: 8px; }
body.werkbank #wb-pal-feld .hkw-feldpanel.hkw-tafel { padding-top: 0; } /* X2: der feste Kopf bringt seinen Abstand selbst mit */
body.werkbank #wb-pal-feld { padding-top: 0; }
body.werkbank #wb-pal-feld .hkw-boegen:empty { display: none; }
body.werkbank #wb-pal-feld .hkw-bogen-box { border-radius: 6px; overflow: hidden; }
/* X3 (10.11.2026): Palette „Ebenen“ – Schalter wie Photoshop-Ebenen, dunkel */
body.werkbank #wb-pal-ebenen .hkw-ebenen { display: block; margin: 0; font-family: Inter, system-ui, sans-serif; color: #d9d4c7; }
body.werkbank #wb-pal-ebenen .hkw-eb-kopf { display: flex; gap: 6px; margin: 2px 0 10px; }
body.werkbank #wb-pal-ebenen .hkw-eb-titel { display: none; }
body.werkbank #wb-pal-ebenen .hkw-eb-kopf button { flex: 1 1 0; height: 28px; border: 1px solid #3d3a35; background: #272522; color: #d9d4c7; border-radius: 5px; font: 12px Inter, system-ui, sans-serif; cursor: pointer; }
body.werkbank #wb-pal-ebenen .hkw-eb-kopf button:hover { background: #34312d; color: #fff; }
body.werkbank #wb-pal-ebenen .hkw-eb-kopf button.an { background: #3a2522; border-color: #c0392b; color: #fff; }
body.werkbank #wb-pal-ebenen .hkw-eb-liste { display: block; border: 1px solid #2e2c28; border-radius: 6px; overflow: hidden; }
body.werkbank #wb-pal-ebenen .hkw-eb-liste li { display: block; border-bottom: 1px solid #2e2c28; }
body.werkbank #wb-pal-ebenen .hkw-eb-liste li:last-child { border-bottom: 0; }
body.werkbank #wb-pal-ebenen .hkw-eb-liste label { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; font-size: 13px; }
body.werkbank #wb-pal-ebenen .hkw-eb-liste label:hover { background: #24221f; }
body.werkbank #wb-pal-ebenen .hkw-eb-liste input { width: 15px; height: 15px; margin: 0; accent-color: #c0392b; grid-row: span 2; }
body.werkbank #wb-pal-ebenen .hkw-eb-liste li.fest { display: block; }
body.werkbank #wb-pal-ebenen .hkw-eb-liste li.fest label { cursor: default; color: #8f8878; }
body.werkbank #wb-pal-ebenen .hkw-eb-s { display: block; grid-column: 2; font-size: 11px; color: #8f8878; }
body.werkbank #wb-pal-ebenen .hkw-eb-liste label:has(input:not(:checked)) .hkw-eb-t { color: #8f8878; }
body.werkbank #wb-pal-ebenen .hkw-eb-hinweis { display: block; margin: 10px 2px 0; font-size: 11px; color: #6f695c; }
body.werkbank:has(#hkw-tabs .hkw-tab-active.hkw-spieler) #wb-pal-feld :is(.hkw-boegen, .hkf-ausarbeiten) { display: none; } /* Spieler-Ansicht: Regel der Werkstatt greift außerhalb des Tabs nicht */
/* ---- X1b (08.11.2026): Paletten als Reiter-Gruppe + Ziehgriff (gilt für alle Werkstätten) ---- */
.wb-pal { position: relative; }
.wb-pal-griff { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 6; touch-action: none; }
.wb-pal-griff:hover, body.wb-pal-zieht .wb-pal-griff { background: rgba(192, 57, 43, .5); }
body.wb-pal-zieht { cursor: col-resize; user-select: none; }
body.wb-pal-zieht main#main-content { pointer-events: none; } /* Karte/Bühne reagiert während des Ziehens nicht */
.wb-pal-reiter { display: flex; align-items: stretch; flex: 0 0 auto; height: 36px; background: #141311; border-bottom: 1px solid #2e2c28; overflow: hidden; }
.wb-pal-reiter button.reiter {
display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-right: 1px solid #2e2c28; border-bottom: 2px solid transparent;
background: none; color: #8f8878; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
cursor: pointer; white-space: nowrap; min-width: 0;
}
.wb-pal-reiter button.reiter:hover { color: #f1ede3; background: #1c1b19; }
.wb-pal-reiter button.reiter.an { color: #f1ede3; background: #1c1b19; border-bottom-color: #c0392b; }
.wb-pal-reiter button.reiter .ic16 { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.wb-pal-reiter button.reiter span { overflow: hidden; text-overflow: ellipsis; }
.wb-pal-reiter .zu-kn { margin-left: auto; width: 36px; flex: 0 0 auto; border: 0; background: none; color: #8f8878; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wb-pal-reiter .zu-kn:hover { color: #fff; background: #1c1b19; }
.wb-pal-reiter .zu-kn .ic16 { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.werkbank .wb-pal .wb-palette > h3 { display: none; } /* Titel steht im Reiter */
body.werkbank .wb-pal .wb-palette:not(.wb-aktiv) { display: none; }
body.werkbank .wb-pal .wb-palette.wb-aktiv { flex: 1 1 auto; min-height: 0; border-bottom: 0; }
body.werkbank .wb-pal .wb-palette.wb-aktiv .wb-pal-body { flex: 1 1 auto; }
/* ---- Leerzustand (W11, K4a werkstattneutral): kein Eintrag → Karte #wb-leer der Hülle auf der Bühne ------
Die Hülle hebt Leerzustand-Text ([id$="-empty-state"]), ggf. Speicher-Hinweis und das Formular (.gr-wuerfeln)
in die Karte; alles andere auf der Bühne ist ausgeblendet. */
body.werkbank.wb-leer > main#main-content { display: flex; align-items: flex-start; justify-content: center; }
body.werkbank.wb-leer > main#main-content > *:not(#wb-leer) { display: none !important; }
body.werkbank.wb-leer #wb-leer {
max-width: 680px !important; width: 100%; margin: 24px auto; display: flex; flex-direction: column; box-sizing: border-box; /* !important gegen die 1150-px-Regel für .container-dungeon (Stil-Anker) */
background: #272522; border: 1px solid #3d3a35; border-radius: 10px; box-shadow: 0 10px 36px rgba(0,0,0,.4);
font-family: Inter, system-ui, sans-serif; color: #d9d4c7;
}
body.werkbank.wb-leer #wb-leer > [class*="-speicher-hinweis"] { display: flex; margin: 0; border-radius: 10px 10px 0 0; }
body.werkbank.wb-leer #wb-leer > .wb-leer-text {
display: grid !important; max-width: none; margin: 0; padding: 26px 34px 6px; text-align: left; background: none; border: 0; box-shadow: none; border-radius: 0;
grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; font-family: inherit;
}
body.werkbank.wb-leer #wb-leer > .wb-leer-text::before { /* Icon je Werkstatt (--wb-leer-ic), ersetzt Icon/Vignette der Werkstatt */
content: ''; grid-row: 1 / 3; margin: 2px 0 0; width: 34px; height: 34px;
background: #c0392b; -webkit-mask: var(--wb-leer-ic) center / 34px 34px no-repeat; mask: var(--wb-leer-ic) center / 34px 34px no-repeat;
}
body.werkbank.wb-leer #wb-leer > .wb-leer-text [class$="-empty-icon"], body.werkbank.wb-leer #wb-leer > .wb-leer-text [class$="-empty-vignette"], body.werkbank.wb-leer #wb-leer > .wb-leer-text [class$="-leer-icon"] { display: none; }
body.werkbank.wb-leer #wb-leer { --wb-leer-ic: url("data:image/svg+xml;utf8,"); }
body.werkbank.wb-leer #wb-leer > [id^="gewoelbe"] { --wb-leer-ic: url("data:image/svg+xml;utf8,"); }
body.werkbank.wb-leer #wb-leer > [id^="burgen"] { --wb-leer-ic: url("data:image/svg+xml;utf8,"); }
body.werkbank.wb-leer #wb-leer > [id^="hkw"] { --wb-leer-ic: url("data:image/svg+xml;utf8,"); }
body.werkbank.wb-leer #wb-leer > .wb-leer-text > * { grid-column: 2; } /* alle Textzeilen rechts vom Icon (Hexkarte hat zwei
) */
body.werkbank.wb-leer #wb-leer > .wb-leer-text h2 { margin: 0; font-family: 'Grenze Gotisch', 'Cinzel', serif; font-weight: 500; font-size: 26px; color: #f1ede3; letter-spacing: .02em; }
body.werkbank.wb-leer #wb-leer > .wb-leer-text p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: #8f8878; }
body.werkbank.wb-leer #wb-leer > .wb-leer-text { font-style: normal; text-align: left; color: #d9d4c7; }
body.werkbank.wb-leer #wb-leer > .gr-wuerfeln { max-width: none; margin: 0; padding: 12px 34px 28px; background: none; border: 0; box-shadow: none; }
/* ---- Formular im Chrom (Palette + Leerzustand): Pergament-Regeln der Werkstatt neutralisiert --- */
body.werkbank .wb-dunkel, body.werkbank .wb-dunkel .gw-form { font-family: Inter, system-ui, sans-serif; color: #d9d4c7; font-size: 13px; }
body.werkbank .wb-dunkel fieldset.gw-f-block { border: 0; border-top: 1px solid #3a3733; background: none; padding: 10px 0 8px; margin: 0; border-radius: 0; }
body.werkbank .wb-dunkel fieldset.gw-f-block:first-child { border-top: 0; padding-top: 0; }
body.werkbank .wb-dunkel .gw-f-frage { font-family: inherit; font-variant: normal; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #8f8878; margin: 0 0 8px; display: flex; align-items: center; }
body.werkbank .wb-dunkel .gw-f-nr { width: 18px; height: 18px; line-height: 18px; font-size: 10px; background: #c0392b; color: #fff; margin-right: 7px; text-transform: none; }
body.werkbank .wb-dunkel .gw-f-arten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
body.werkbank.wb-leer .wb-dunkel .gw-f-arten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
body.werkbank .wb-dunkel .gw-f-art > span { border: 1px solid #3d3a35; background: #1c1b19; color: #d9d4c7; padding: 5px 3px 4px; border-radius: 5px; overflow: hidden; }
body.werkbank .wb-dunkel .gw-f-art b { font-size: 11px; color: #f1ede3; white-space: nowrap; }
body.werkbank .wb-dunkel .gw-f-art small { font-size: 9px; color: #8f8878; font-style: normal; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.werkbank.wb-leer .wb-dunkel .gw-f-art b { font-size: 12px; }
body.werkbank.wb-leer .wb-dunkel .gw-f-art small { font-size: 10px; }
body.werkbank .wb-dunkel .gw-f-art input:checked + span { border: 1px solid #c0392b; background: #3a2522; }
body.werkbank .wb-dunkel .gw-f-art input:focus-visible + span, body.werkbank .wb-dunkel .gw-f-seg input:focus-visible + span { outline: 2px solid #d9a441; }
body.werkbank .wb-dunkel .gw-f-zeile { gap: 10px 14px; }
body.werkbank .wb-dunkel .gw-f-feld { gap: 4px; min-width: 0; }
body.werkbank .wb-dunkel .gw-f-feld > span { font-weight: 400; color: #8f8878; font-family: inherit; font-size: 11px; letter-spacing: .02em; }
body.werkbank .wb-dunkel .gw-f-seg { border: 1px solid #3d3a35; background: #1c1b19; border-radius: 5px; overflow: hidden; }
body.werkbank .wb-dunkel .gw-f-seg label > span { padding: 5px 9px; border-right: 1px solid #3d3a35; color: #d9d4c7; font-size: 12px; }
body.werkbank .wb-dunkel .gw-f-seg label:last-of-type > span { border-right: 0; }
body.werkbank .wb-dunkel .gw-f-seg input:checked + span { background: #c0392b; color: #fff; }
body.werkbank .wb-dunkel .gw-f-seg input[type=number] { width: 60px; background: #1c1b19; color: #f1ede3; font-size: 12px; }
body.werkbank .wb-dunkel .gw-f-seg input[type=number]::placeholder { color: #6f695c; }
body.werkbank .wb-dunkel select, body.werkbank .wb-dunkel .gw-f-mehr select {
height: 30px; border: 1px solid #3d3a35; background: #1c1b19; color: #f1ede3; border-radius: 5px; padding: 0 8px; font: inherit; font-size: 12px; max-width: 100%;
}
body.werkbank .wb-dunkel .gw-f-info { font-style: normal; color: #6f695c; font-size: 11px; line-height: 1.4; margin-top: 8px; }
body.werkbank .wb-dunkel .gw-f-weitere { border: 1px solid #3a3733; background: none; border-radius: 6px; margin: 0 0 12px; }
body.werkbank .wb-dunkel .gw-f-weitere > summary { padding: 7px 10px; font-family: inherit; font-variant: normal; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #8f8878; }
body.werkbank .wb-dunkel .gw-f-mehr { padding: 2px 10px 12px; grid-template-columns: 1fr; gap: 8px; }
body.werkbank.wb-leer .wb-dunkel .gw-f-mehr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
body.werkbank .wb-dunkel .gw-f-mehr label { color: #8f8878; font-size: 11px; font-weight: 400; margin: 0; display: block; }
body.werkbank .wb-dunkel .gw-f-mehr label.gw-f-haken { display: flex; align-items: center; gap: 7px; color: #d9d4c7; font-size: 12px; }
body.werkbank .wb-dunkel .gw-f-haken input[type=checkbox] { width: 14px; height: 14px; margin: 0; accent-color: #c0392b; }
body.werkbank .wb-dunkel .gw-f-bewohner > b { font-family: inherit; font-weight: 400; color: #8f8878; font-size: 11px; }
body.werkbank .wb-dunkel .btn-submit {
width: 100%; height: 36px; margin-top: 4px; padding: 0 16px; border: 0; border-radius: 6px; background: #c0392b; color: #fff;
font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer;
}
body.werkbank.wb-leer .wb-dunkel .btn-submit { width: auto; min-width: 220px; height: 38px; font-size: 14px; }
body.werkbank .wb-dunkel .btn-submit:hover { background: #d3473a; transform: none; }
body.werkbank .wb-dunkel .btn-submit:disabled { opacity: .5; cursor: default; }
/* ---- Palettenrand rechts (280 px, K3a: Palette „Würfeln“) ---------------- */
.wb-pal { grid-area: pal; flex-direction: column; min-height: 0; background: #1c1b19; border-left: 1px solid #2e2c28; overflow: hidden; }
.wb-palette { display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid #2e2c28; }
.wb-palette:last-child { flex: 1 1 auto; border-bottom: 0; }
.wb-palette h3 {
margin: 0; height: 32px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px;
font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #f1ede3; text-transform: uppercase; background: #141311; border-bottom: 1px solid #2e2c28;
}
.wb-palette h3 .ic18 { width: 16px; height: 16px; color: #8f8878; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.wb-palette h3 span { flex: 1 1 auto; }
.wb-palette h3 button { width: 24px; height: 24px; border: 0; background: transparent; color: #8f8878; border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 0; }
.wb-palette h3 button:hover { background: #2b2926; color: #fff; }
.wb-pal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px 10px; scrollbar-width: thin; }
body.werkbank .wb-pal-body.container-dungeon { max-width: none; margin: 0; color: #d9d4c7; font-family: Inter, system-ui, sans-serif; } /* Klasse nur als Stil-Anker für die Formular-Regeln der Werkstatt */
body.werkbank .wb-pal-body .gr-wuerfeln { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.wb-palette[hidden] { display: none; }
.wb-palette:not(:last-child) .wb-pal-body { flex: 0 1 auto; }
/* ---- Palette/Leer-Karte: Kachel-Formulare „bw-f-…“ (Burg, Wirtshaus) im Chrom (K4a) ----
Die Werkstatt-Regeln hängen an #-roll-form (ID-Spezifität) — deshalb hier mit #wb-pal / #wb-leer davor. */
body.werkbank #wb-pal .wb-dunkel .bw-form, body.werkbank #wb-leer .wb-dunkel .bw-form { display: block; background: none; border: 0; padding: 0; margin: 0; max-width: none; box-shadow: none; font-family: Inter, system-ui, sans-serif; color: #d9d4c7; font-size: 13px; }
body.werkbank #wb-pal .wb-dunkel .bw-f-block, body.werkbank #wb-leer .wb-dunkel .bw-f-block { border: 0; border-top: 1px solid #3a3733; background: none; padding: 10px 0 8px; margin: 0; border-radius: 0; min-width: 0; }
body.werkbank #wb-pal .wb-dunkel .bw-f-block:first-child, body.werkbank #wb-leer .wb-dunkel .bw-f-block:first-child { border-top: 0; padding-top: 0; }
body.werkbank #wb-pal .wb-dunkel .bw-f-frage, body.werkbank #wb-leer .wb-dunkel .bw-f-frage { font-family: inherit; font-variant: normal; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #8f8878; margin: 0 0 8px; display: flex; align-items: center; }
body.werkbank #wb-pal .wb-dunkel .bw-f-nr, body.werkbank #wb-leer .wb-dunkel .bw-f-nr { width: 18px; height: 18px; line-height: 18px; font-size: 10px; background: #c0392b; color: #fff; margin-right: 7px; font-variant: normal; }
body.werkbank #wb-pal .wb-dunkel .bw-f-kacheln, body.werkbank #wb-leer .wb-dunkel .bw-f-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
body.werkbank #wb-pal .wb-dunkel .bw-f-kachel > span, body.werkbank #wb-leer .wb-dunkel .bw-f-kachel > span { border: 1px solid #3d3a35; background: #1c1b19; color: #d9d4c7; padding: 5px 3px 4px; border-radius: 5px; overflow: hidden; }
body.werkbank #wb-pal .wb-dunkel .bw-f-kachel b, body.werkbank #wb-leer .wb-dunkel .bw-f-kachel b { font-size: 11px; color: #f1ede3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.werkbank #wb-pal .wb-dunkel .bw-f-kachel small, body.werkbank #wb-leer .wb-dunkel .bw-f-kachel small { font-size: 9px; color: #8f8878; font-style: normal; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.werkbank #wb-pal .wb-dunkel .bw-f-kachel input:checked + span, body.werkbank #wb-leer .wb-dunkel .bw-f-kachel input:checked + span { border: 1px solid #c0392b; background: #3a2522; padding: 5px 3px 4px; }
body.werkbank #wb-pal .wb-dunkel .bw-f-kachel:hover > span, body.werkbank #wb-leer .wb-dunkel .bw-f-kachel:hover > span { background: #34312d; border-color: #6f695c; }
body.werkbank #wb-pal .wb-dunkel .bw-f-kachel input:focus-visible + span, body.werkbank #wb-leer .wb-dunkel .bw-f-kachel input:focus-visible + span { outline: 2px solid #d9a441; }
body.werkbank #wb-pal .wb-dunkel .bw-f-kachel.bw-f-aktiv > span, body.werkbank #wb-leer .wb-dunkel .bw-f-kachel.bw-f-aktiv > span { outline: 1px dashed #d9a441; outline-offset: -3px; }
body.werkbank #wb-pal .wb-dunkel .bw-f-kachel.bw-f-aktiv b::before, body.werkbank #wb-leer .wb-dunkel .bw-f-kachel.bw-f-aktiv b::before { color: #d9a441; }
body.werkbank #wb-pal .wb-dunkel .bw-f-info, body.werkbank #wb-leer .wb-dunkel .bw-f-info { font-family: inherit; font-style: normal; color: #6f695c; font-size: 11px; line-height: 1.4; margin-top: 8px; }
body.werkbank #wb-pal .wb-dunkel .bw-f-legende-muster, .bw-f-tabwert, body.werkbank #wb-leer .wb-dunkel .bw-f-legende-muster, .bw-f-tabwert { color: #d9a441; font-family: inherit; font-style: normal; font-size: 10px; }
body.werkbank #wb-pal .wb-dunkel .bw-f-weitere, body.werkbank #wb-leer .wb-dunkel .bw-f-weitere { border: 1px solid #3a3733; background: none; border-radius: 6px; margin: 0 0 12px; }
body.werkbank #wb-pal .wb-dunkel .bw-f-weitere > summary, body.werkbank #wb-leer .wb-dunkel .bw-f-weitere > summary { padding: 7px 10px; font-family: inherit; font-variant: normal; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #8f8878; }
body.werkbank #wb-pal .wb-dunkel .bw-f-mehr, body.werkbank #wb-leer .wb-dunkel .bw-f-mehr { padding: 2px 10px 12px; grid-template-columns: 1fr; gap: 8px; }
body.werkbank #wb-pal .wb-dunkel .bw-f-mehr label, body.werkbank #wb-leer .wb-dunkel .bw-f-mehr label { color: #8f8878; font-size: 11px; font-weight: 400; margin: 0; display: block; font-family: inherit; font-variant: normal; letter-spacing: 0; text-transform: none; }
body.werkbank #wb-pal .wb-dunkel select, body.werkbank #wb-leer .wb-dunkel select { width: 100%; height: 30px; border: 1px solid #3d3a35; background: #272522; color: #f1ede3; border-radius: 5px; padding: 0 8px; font: inherit; font-size: 12px; cursor: pointer; }
body.werkbank #wb-pal .wb-dunkel :is(input[type=submit], button[type=submit]), body.werkbank #wb-leer .wb-dunkel :is(input[type=submit], button[type=submit]) { width: 100%; height: 36px; margin: 4px 0 0; padding: 0 16px; border: 0; border-radius: 6px; background: #c0392b; color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; }
body.werkbank #wb-pal .wb-dunkel input[type=submit]:hover, body.werkbank #wb-leer .wb-dunkel input[type=submit]:hover { background: #d3473a; }
body.werkbank #wb-pal .wb-dunkel input[type=submit]:disabled, body.werkbank #wb-leer .wb-dunkel input[type=submit]:disabled { opacity: .5; cursor: default; }
body.werkbank #wb-leer .wb-dunkel .bw-f-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
body.werkbank #wb-leer .wb-dunkel .bw-f-kachel b { font-size: 12px; } body.werkbank #wb-leer .wb-dunkel .bw-f-kachel small { font-size: 10px; }
body.werkbank #wb-leer .wb-dunkel .bw-f-mehr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
body.werkbank #wb-leer .wb-dunkel input[type=submit] { width: auto; min-width: 220px; height: 38px; font-size: 14px; }
/* ---- Palette/Leer-Karte: Kachel-Formulare „trp-…“ (Trupp, gleiche Bauart wie bw-f) im Chrom (K4f) ----
Die Werkstatt-Regeln hängen an #-roll-form (ID-Spezifität) — deshalb hier mit #wb-pal / #wb-leer davor. */
body.werkbank #wb-pal .wb-dunkel .trp-form, body.werkbank #wb-leer .wb-dunkel .trp-form { display: block; background: none; border: 0; padding: 0; margin: 0; max-width: none; box-shadow: none; font-family: Inter, system-ui, sans-serif; color: #d9d4c7; font-size: 13px; }
body.werkbank #wb-pal .wb-dunkel .trp-block, body.werkbank #wb-leer .wb-dunkel .trp-block { border: 0; border-top: 1px solid #3a3733; background: none; padding: 10px 0 8px; margin: 0; border-radius: 0; min-width: 0; }
body.werkbank #wb-pal .wb-dunkel .trp-block:first-child, body.werkbank #wb-leer .wb-dunkel .trp-block:first-child { border-top: 0; padding-top: 0; }
body.werkbank #wb-pal .wb-dunkel .trp-frage, body.werkbank #wb-leer .wb-dunkel .trp-frage { font-family: inherit; font-variant: normal; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #8f8878; margin: 0 0 8px; display: flex; align-items: center; }
body.werkbank #wb-pal .wb-dunkel .trp-nr, body.werkbank #wb-leer .wb-dunkel .trp-nr { width: 18px; height: 18px; line-height: 18px; font-size: 10px; background: #c0392b; color: #fff; margin-right: 7px; font-variant: normal; }
body.werkbank #wb-pal .wb-dunkel .trp-kacheln, body.werkbank #wb-leer .wb-dunkel .trp-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
body.werkbank #wb-pal .wb-dunkel .trp-kachel > span, body.werkbank #wb-leer .wb-dunkel .trp-kachel > span { border: 1px solid #3d3a35; background: #1c1b19; color: #d9d4c7; padding: 5px 3px 4px; border-radius: 5px; overflow: hidden; }
body.werkbank #wb-pal .wb-dunkel .trp-kachel b, body.werkbank #wb-leer .wb-dunkel .trp-kachel b { font-size: 11px; color: #f1ede3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.werkbank #wb-pal .wb-dunkel .trp-kachel small, body.werkbank #wb-leer .wb-dunkel .trp-kachel small { font-size: 9px; color: #8f8878; font-style: normal; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.werkbank #wb-pal .wb-dunkel .trp-kachel input:checked + span, body.werkbank #wb-leer .wb-dunkel .trp-kachel input:checked + span { border: 1px solid #c0392b; background: #3a2522; padding: 5px 3px 4px; }
body.werkbank #wb-pal .wb-dunkel .trp-kachel:hover > span, body.werkbank #wb-leer .wb-dunkel .trp-kachel:hover > span { background: #34312d; border-color: #6f695c; }
body.werkbank #wb-pal .wb-dunkel .trp-kachel input:focus-visible + span, body.werkbank #wb-leer .wb-dunkel .trp-kachel input:focus-visible + span { outline: 2px solid #d9a441; }
body.werkbank #wb-pal .wb-dunkel .trp-kachel.trp-aktiv > span, body.werkbank #wb-leer .wb-dunkel .trp-kachel.trp-aktiv > span { outline: 1px dashed #d9a441; outline-offset: -3px; }
body.werkbank #wb-pal .wb-dunkel .trp-kachel.trp-aktiv b::before, body.werkbank #wb-leer .wb-dunkel .trp-kachel.trp-aktiv b::before { color: #d9a441; }
body.werkbank #wb-pal .wb-dunkel .trp-info, body.werkbank #wb-leer .wb-dunkel .trp-info { font-family: inherit; font-style: normal; color: #6f695c; font-size: 11px; line-height: 1.4; margin-top: 8px; }
body.werkbank #wb-pal .wb-dunkel .trp-frage-klein, .trp-auswahl, body.werkbank #wb-leer .wb-dunkel .trp-frage-klein, .trp-auswahl { color: #d9a441; font-family: inherit; font-style: normal; font-size: 10px; }
body.werkbank #wb-pal .wb-dunkel .trp-weitere, body.werkbank #wb-leer .wb-dunkel .trp-weitere { border: 1px solid #3a3733; background: none; border-radius: 6px; margin: 0 0 12px; }
body.werkbank #wb-pal .wb-dunkel .trp-weitere > summary, body.werkbank #wb-leer .wb-dunkel .trp-weitere > summary { padding: 7px 10px; font-family: inherit; font-variant: normal; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #8f8878; }
body.werkbank #wb-pal .wb-dunkel .trp-mehr, body.werkbank #wb-leer .wb-dunkel .trp-mehr { padding: 2px 10px 12px; grid-template-columns: 1fr; gap: 8px; }
body.werkbank #wb-pal .wb-dunkel .trp-mehr label, body.werkbank #wb-leer .wb-dunkel .trp-mehr label { color: #8f8878; font-size: 11px; font-weight: 400; margin: 0; display: block; font-family: inherit; font-variant: normal; letter-spacing: 0; text-transform: none; }
body.werkbank #wb-pal .wb-dunkel select, body.werkbank #wb-leer .wb-dunkel select { width: 100%; height: 30px; border: 1px solid #3d3a35; background: #272522; color: #f1ede3; border-radius: 5px; padding: 0 8px; font: inherit; font-size: 12px; cursor: pointer; }
body.werkbank #wb-pal .wb-dunkel :is(input[type=submit], button[type=submit]), body.werkbank #wb-leer .wb-dunkel :is(input[type=submit], button[type=submit]) { width: 100%; height: 36px; margin: 4px 0 0; padding: 0 16px; border: 0; border-radius: 6px; background: #c0392b; color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; }
body.werkbank #wb-pal .wb-dunkel input[type=submit]:hover, body.werkbank #wb-leer .wb-dunkel input[type=submit]:hover { background: #d3473a; }
body.werkbank #wb-pal .wb-dunkel input[type=submit]:disabled, body.werkbank #wb-leer .wb-dunkel input[type=submit]:disabled { opacity: .5; cursor: default; }
body.werkbank #wb-leer .wb-dunkel .trp-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
body.werkbank #wb-pal .wb-dunkel .trp-k2, body.werkbank #wb-leer .wb-dunkel .trp-k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.werkbank #wb-leer .wb-dunkel .trp-kachel b { font-size: 12px; } body.werkbank #wb-leer .wb-dunkel .trp-kachel small { font-size: 10px; }
body.werkbank #wb-leer .wb-dunkel .trp-mehr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
body.werkbank #wb-leer .wb-dunkel input[type=submit] { width: auto; min-width: 220px; height: 38px; font-size: 14px; }
/* ---- Palette/Leer-Karte: Kachel-Formulare „hkw-f-…“ (Hexkarte, gleiche Bauart wie bw-f) im Chrom (K4e) ----
Die Werkstatt-Regeln hängen an #-roll-form (ID-Spezifität) — deshalb hier mit #wb-pal / #wb-leer davor. */
body.werkbank #wb-pal .wb-dunkel .hkw-form, body.werkbank #wb-leer .wb-dunkel .hkw-form { display: block; background: none; border: 0; padding: 0; margin: 0; max-width: none; box-shadow: none; font-family: Inter, system-ui, sans-serif; color: #d9d4c7; font-size: 13px; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-block, body.werkbank #wb-leer .wb-dunkel .hkw-f-block { border: 0; border-top: 1px solid #3a3733; background: none; padding: 10px 0 8px; margin: 0; border-radius: 0; min-width: 0; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-block:first-child, body.werkbank #wb-leer .wb-dunkel .hkw-f-block:first-child { border-top: 0; padding-top: 0; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-frage, body.werkbank #wb-leer .wb-dunkel .hkw-f-frage { font-family: inherit; font-variant: normal; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #8f8878; margin: 0 0 8px; display: flex; align-items: center; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-nr, body.werkbank #wb-leer .wb-dunkel .hkw-f-nr { width: 18px; height: 18px; line-height: 18px; font-size: 10px; background: #c0392b; color: #fff; margin-right: 7px; font-variant: normal; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-kacheln, body.werkbank #wb-leer .wb-dunkel .hkw-f-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-kachel > span, body.werkbank #wb-leer .wb-dunkel .hkw-f-kachel > span { border: 1px solid #3d3a35; background: #1c1b19; color: #d9d4c7; padding: 5px 3px 4px; border-radius: 5px; overflow: hidden; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-kachel b, body.werkbank #wb-leer .wb-dunkel .hkw-f-kachel b { font-size: 11px; color: #f1ede3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-kachel small, body.werkbank #wb-leer .wb-dunkel .hkw-f-kachel small { font-size: 9px; color: #8f8878; font-style: normal; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-kachel input:checked + span, body.werkbank #wb-leer .wb-dunkel .hkw-f-kachel input:checked + span { border: 1px solid #c0392b; background: #3a2522; padding: 5px 3px 4px; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-kachel:hover > span, body.werkbank #wb-leer .wb-dunkel .hkw-f-kachel:hover > span { background: #34312d; border-color: #6f695c; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-kachel input:focus-visible + span, body.werkbank #wb-leer .wb-dunkel .hkw-f-kachel input:focus-visible + span { outline: 2px solid #d9a441; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-kachel.hkw-f-aktiv > span, body.werkbank #wb-leer .wb-dunkel .hkw-f-kachel.hkw-f-aktiv > span { outline: 1px dashed #d9a441; outline-offset: -3px; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-kachel.hkw-f-aktiv b::before, body.werkbank #wb-leer .wb-dunkel .hkw-f-kachel.hkw-f-aktiv b::before { color: #d9a441; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-info, body.werkbank #wb-leer .wb-dunkel .hkw-f-info { font-family: inherit; font-style: normal; color: #6f695c; font-size: 11px; line-height: 1.4; margin-top: 8px; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-legende-muster, .hkw-f-tabwert, body.werkbank #wb-leer .wb-dunkel .hkw-f-legende-muster, .hkw-f-tabwert { color: #d9a441; font-family: inherit; font-style: normal; font-size: 10px; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-weitere, body.werkbank #wb-leer .wb-dunkel .hkw-f-weitere { border: 1px solid #3a3733; background: none; border-radius: 6px; margin: 0 0 12px; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-weitere > summary, body.werkbank #wb-leer .wb-dunkel .hkw-f-weitere > summary { padding: 7px 10px; font-family: inherit; font-variant: normal; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #8f8878; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-mehr, body.werkbank #wb-leer .wb-dunkel .hkw-f-mehr { padding: 2px 10px 12px; grid-template-columns: 1fr; gap: 8px; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-mehr label, body.werkbank #wb-leer .wb-dunkel .hkw-f-mehr label { color: #8f8878; font-size: 11px; font-weight: 400; margin: 0; display: block; font-family: inherit; font-variant: normal; letter-spacing: 0; text-transform: none; }
body.werkbank #wb-pal .wb-dunkel select, body.werkbank #wb-leer .wb-dunkel select { width: 100%; height: 30px; border: 1px solid #3d3a35; background: #272522; color: #f1ede3; border-radius: 5px; padding: 0 8px; font: inherit; font-size: 12px; cursor: pointer; }
body.werkbank #wb-pal .wb-dunkel :is(input[type=submit], button[type=submit]), body.werkbank #wb-leer .wb-dunkel :is(input[type=submit], button[type=submit]) { width: 100%; height: 36px; margin: 4px 0 0; padding: 0 16px; border: 0; border-radius: 6px; background: #c0392b; color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; }
body.werkbank #wb-pal .wb-dunkel input[type=submit]:hover, body.werkbank #wb-leer .wb-dunkel input[type=submit]:hover { background: #d3473a; }
body.werkbank #wb-pal .wb-dunkel input[type=submit]:disabled, body.werkbank #wb-leer .wb-dunkel input[type=submit]:disabled { opacity: .5; cursor: default; }
body.werkbank #wb-leer .wb-dunkel .hkw-f-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
body.werkbank #wb-pal .wb-dunkel .hkw-f-2, body.werkbank #wb-leer .wb-dunkel .hkw-f-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.werkbank #wb-leer .wb-dunkel .hkw-f-kachel b { font-size: 12px; } body.werkbank #wb-leer .wb-dunkel .hkw-f-kachel small { font-size: 10px; }
body.werkbank #wb-leer .wb-dunkel .hkw-f-mehr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
body.werkbank #wb-leer .wb-dunkel input[type=submit] { width: auto; min-width: 220px; height: 38px; font-size: 14px; }
/* ---- Palette/Leer-Karte: einfache Formulare (label > select; Siedlung, Figuren) im Chrom (K4c) ---- */
body.werkbank #wb-pal :is(form.wb-dunkel, .wb-dunkel form), body.werkbank #wb-leer :is(form.wb-dunkel, .wb-dunkel form) { display: flex; flex-direction: column; align-items: stretch; gap: 10px; background: none; border: 0; padding: 0; margin: 0; max-width: none; box-shadow: none; font-family: Inter, system-ui, sans-serif; color: #d9d4c7; font-size: 13px; }
body.werkbank #wb-leer :is(form.wb-dunkel, .wb-dunkel form) { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
body.werkbank #wb-pal :is(form.wb-dunkel, .wb-dunkel form) > label, body.werkbank #wb-leer :is(form.wb-dunkel, .wb-dunkel form) > label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; font-family: inherit; font-variant: normal; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #8f8878; min-width: 0; }
body.werkbank #wb-leer :is(form.wb-dunkel, .wb-dunkel form) > label { flex: 1 1 160px; }
body.werkbank #wb-pal .wb-dunkel label > input[type=text], body.werkbank #wb-leer .wb-dunkel label > input[type=text],
body.werkbank #wb-pal .wb-dunkel label > input[type=number], body.werkbank #wb-leer .wb-dunkel label > input[type=number] { height: 30px; border: 1px solid #3d3a35; background: #272522; color: #f1ede3; border-radius: 5px; padding: 0 8px; font: inherit; font-size: 12px; }
body.werkbank #wb-leer :is(form.wb-dunkel, .wb-dunkel form) > :is(input[type=submit], button[type=submit]) { flex: 1 0 100%; width: auto; }
/* K4f: Einzelwürfe – gehobener Wrapper (Gefolge) trägt die Überschrift mit; Modus-Leiste im Chrom.
styles.css setzt auf `.character-generator-form > form …[type=submit]` fast alles mit !important – hier deshalb ebenfalls. */
body.werkbank .wb-dunkel.character-generator-form > form :is(input[type=submit], button[type=submit]) {
background: #c0392b !important; color: #fff !important; border: 0 !important; padding: 0 16px !important; font-family: Inter, system-ui, sans-serif !important;
font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: 6px !important; margin: 4px 0 0 !important; width: 100%;
}
body.werkbank .wb-dunkel.character-generator-form > form.gef-modusleiste button.gef-modusknopf {
background: #272522 !important; color: #d9d4c7 !important; border: 1px solid #3d3a35 !important; border-radius: 5px !important; margin: 0 !important; padding: 0 8px !important;
font-size: 12px !important; letter-spacing: 0 !important; width: auto; flex: 1 1 auto;
}
body.werkbank .wb-dunkel.character-generator-form > form.gef-modusleiste button.gef-modusknopf.aktiv { background: #3a2522 !important; border-color: #c0392b !important; color: #fff !important; }
body.werkbank .wb-dunkel > h1 { display: none; }
body.werkbank #wb-pal .wb-dunkel form.gef-modusleiste, body.werkbank #wb-leer .wb-dunkel form.gef-modusleiste { flex-direction: row; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
body.werkbank #wb-pal .wb-dunkel button.gef-modusknopf, body.werkbank #wb-leer .wb-dunkel button.gef-modusknopf { flex: 1 1 auto; width: auto; height: 28px; margin: 0; padding: 0 8px; border: 1px solid #3d3a35; border-radius: 5px; background: #272522; color: #d9d4c7; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; }
body.werkbank #wb-pal .wb-dunkel button.gef-modusknopf.aktiv, body.werkbank #wb-leer .wb-dunkel button.gef-modusknopf.aktiv { background: #3a2522; border-color: #c0392b; color: #fff; }
/* Palette „Verknüpfungen“ (K3a): Edit-Block der Werkstatt (Region, Siedlung, SL-Notizen) im Chrom */
body.werkbank .wb-pal [class*="-edit-block"] { margin: 0; padding: 0; background: none; border: 0; font-family: Inter, system-ui, sans-serif; }
body.werkbank .wb-pal [class*="-edit-row"] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
body.werkbank .wb-pal [class*="-edit-label"] { display: flex; flex-direction: column; gap: 4px; font-family: inherit; font-size: 11px; letter-spacing: .02em; text-transform: none; color: #8f8878; }
body.werkbank .wb-pal [class*="-edit-label"] > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
body.werkbank .wb-pal [class$="-region-link"] a, body.werkbank .wb-pal [class$="-settlement-link"] a { font-size: 11px; color: #d9a441; text-decoration: none; white-space: nowrap; }
body.werkbank .wb-pal [class$="-region-link"] a:hover, body.werkbank .wb-pal [class$="-settlement-link"] a:hover { color: #fff; text-decoration: underline; }
body.werkbank .wb-pal [class*="-edit-field"] {
width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #3d3a35; border-radius: 5px;
background: #1c1b19; color: #f1ede3; font-family: inherit; font-size: 12px;
}
body.werkbank .wb-pal [class*="-edit-field"]::placeholder { color: #6f695c; }
body.werkbank .wb-pal [class*="-edit-field"]:focus { outline: 1px solid #c0392b; border-color: #c0392b; }
body.werkbank .wb-pal textarea[class*="-edit-field"] { height: auto; min-height: 56px; padding: 6px 8px; line-height: 1.4; resize: vertical; }
body.werkbank .wb-pal [class$="-position-chip"] { display: inline-block; margin-top: 4px; font-size: 10px; color: #8f8878; border: 1px solid #3d3a35; border-radius: 10px; padding: 1px 7px; align-self: flex-start; }
/* ---- Paletten-Schiene rechts (40 px, eingeklappt) ------------------------ */
.wb-schiene {
grid-area: pal; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px;
background: #141311; border-left: 1px solid #2e2c28; overflow: hidden;
}
.wb-schiene button {
position: relative; width: 32px; height: 32px; border: 0; background: transparent; color: #bfb9ab;
display: flex; align-items: center; justify-content: center; border-radius: 5px; flex: 0 0 auto;
}
.wb-schiene button:hover { background: #2b2926; color: #fff; }
.wb-schiene button:disabled { color: #4f4b44; cursor: default; }
.wb-schiene button:disabled:hover { background: transparent; color: #4f4b44; }
.wb-schiene .ic18 { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wb-schiene hr { width: 22px; border: 0; border-top: 1px solid #3a3733; margin: 0 0 4px; }
.wb-schiene #wb-pal-auf { color: #bfb9ab; margin-bottom: 2px; }
.wb-schiene #wb-pal-auf .ic16 { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* ---- Spickzettel-Modal (W12): nutzt .wk-modal aus styles.css, nur breiter ----- */
body.werkbank .wb-modal { display: none; }
body.werkbank .wb-modal.open { display: flex; z-index: 1300; }
body.werkbank .wb-modal .wk-modal { max-width: 860px; max-height: calc(100vh - 48px); }
body.werkbank .wb-modal details.hex-crawl-howto { display: block; margin: 0; max-width: none; border: 0; background: none; }
body.werkbank .wb-modal details.hex-crawl-howto > summary { display: none; }
body.werkbank .wb-modal .hex-crawl-howto-body { padding: 4px 6px 10px; }
/* ---- Statuszeile (28 px) ------------------------------------------------ */
.wb-status {
grid-area: status; align-items: center; justify-content: space-between; gap: 12px;
padding: 0 12px; background: #141311; border-top: 1px solid #2e2c28; font-size: 11px; color: #8f8878; min-width: 0;
}
.wb-status-links { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wb-status-rechts { white-space: nowrap; flex: 0 0 auto; }
.wb-status-rechts a { color: #8f8878; text-decoration: none; }
.wb-status-rechts a:hover { color: #fff; text-decoration: underline; }
.wb-status-rechts .wb-sep { margin: 0 6px; color: #4f4b44; }
/* ---- Druck: Hülle nie sichtbar, Bühne fließt ----------------------------- */
@media print {
.wb-kopf, .wb-rail, .wb-opt, .wb-schiene, .wb-pal, .wb-status, .wb-menu, .wb-modal, .wb-umschalter { display: none !important; }
body.werkbank { display: block !important; height: auto !important; overflow: visible !important; background: none !important; }
body.werkbank > main#main-content { overflow: visible !important; padding: 0 !important; background: none !important; }
}
/* ---------- K3b (10.11.2026): Palette „Atlas“ ---------- */
.wb-atlas-suche { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.wb-atlas-suche input { flex: 1 1 auto; height: 28px; min-width: 0; border: 1px solid #3d3a35; border-radius: 5px; background: #1c1b19; color: #f1ede3; padding: 0 8px; font: 12.5px Inter, system-ui, sans-serif; }
.wb-atlas-suche input:focus { outline: none; border-color: #8f8878; }
.wb-atlas-suche span { flex: 0 0 auto; font: 11px Inter, system-ui, sans-serif; color: #8f8878; }
.wb-atlas-liste { list-style: none; margin: 0; padding: 0; border: 1px solid #2e2c28; border-radius: 6px; overflow: hidden; }
.wb-atlas-liste li { display: flex; align-items: center; border-bottom: 1px solid #2e2c28; }
.wb-atlas-liste li:last-child { border-bottom: 0; }
.wb-atlas-liste li[hidden] { display: none; }
.wb-atlas-liste li .nm { flex: 1 1 auto; min-width: 0; text-align: left; height: 34px; padding: 0 10px; border: 0; background: none; color: #d9d4c7; font: 13px Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.wb-atlas-liste li:hover { background: #24221f; }
.wb-atlas-liste li.an { background: #3a2522; box-shadow: inset 3px 0 0 #c0392b; }
.wb-atlas-liste li.an .nm { color: #fff; font-weight: 600; }
.wb-atlas-liste li .kn { flex: 0 0 auto; width: 28px; height: 28px; margin-right: 3px; border: 0; border-radius: 4px; background: none; color: #8f8878; font-size: 14px; cursor: pointer; opacity: 0; }
.wb-atlas-liste li:hover .kn, .wb-atlas-liste li.an .kn, .wb-atlas-liste li .kn:focus-visible { opacity: 1; }
.wb-atlas-liste li .kn:hover { background: #34312d; color: #fff; }
.wb-atlas-liste li .kn.gefahr:hover { background: #c0392b; color: #fff; }
.wb-pal-hinweis { margin: 10px 2px 0; font: 11px Inter, system-ui, sans-serif; color: #6f695c; }
.wb-pal-hinweis kbd { font: 10px Inter, system-ui, sans-serif; border: 1px solid #3d3a35; border-radius: 3px; padding: 0 4px; }
/* ---------- K3c (10.11.2026): Palette „Räume“ ---------- */
.wb-raum-liste { list-style: none; margin: 0; padding: 0; }
.wb-raum-liste button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 5px; background: none; color: #d9d4c7; font: 13px Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.wb-raum-liste button:hover { background: #24221f; color: #fff; }
.wb-raum-liste li.an button { background: #3a2522; color: #fff; }
.wb-raum-liste .nr { flex: 0 0 auto; min-width: 26px; height: 22px; line-height: 22px; text-align: center; border-radius: 4px; background: #2e2c28; color: #f1ede3; font-weight: 700; font-size: 12px; }
.wb-raum-liste li.an .nr { background: #c0392b; }
.wb-raum-liste .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.werkbank .wb-flash { outline: 3px solid #c0392b; outline-offset: 2px; transition: outline-color .3s; }
/* ---------- K3b: Etagen in der Optionsleiste (Gewölbe, Marker gr-etage) ---------- */
body.werkbank .wb-opt-slot[data-slot="etage"] { display: flex; align-items: center; gap: 6px; }
body.werkbank .wb-opt .gewoelbe-floor-switch { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; flex-wrap: nowrap; }
body.werkbank .wb-opt .gewoelbe-floor-switch-label { color: #8f8878; font: 11px Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0; margin: 0 2px 0 4px; }
body.werkbank .wb-opt .gewoelbe-floor-pill, body.werkbank .wb-opt .gewoelbe-reroll-btn {
height: 30px; padding: 0 10px; border: 1px solid #3d3a35; border-radius: 5px; background: #272522; color: #d9d4c7;
font: 13px Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0;
}
body.werkbank .wb-opt .gewoelbe-floor-pill:hover, body.werkbank .wb-opt .gewoelbe-reroll-btn:hover { background: #34312d; color: #fff; }
body.werkbank .wb-opt .gewoelbe-floor-pill small { color: #8f8878; }
body.werkbank .wb-opt .gewoelbe-floor-pill.active { background: #3a2522; border-color: #c0392b; color: #fff; font-weight: 600; }
body.werkbank .wb-opt .gewoelbe-floor-deeper { background: #272522; color: #e7c862; font-weight: 600; }
/* ---------- K3c: Fragen (beide Ansichten) und Meldungen (Werkbank) ---------- */
.wb-dialog { position: fixed; inset: 0; z-index: 1500; background: rgba(10, 9, 8, .5); display: flex; justify-content: center; align-items: flex-start; padding-top: 16vh; }
.wb-dialog[hidden] { display: none; }
.wb-dialog-box { width: 440px; max-width: calc(100vw - 32px); background: #1c1b19; border: 1px solid #3d3a35; border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.5); padding: 18px 18px 14px; font-family: Inter, system-ui, sans-serif; color: #d9d4c7; }
.wb-dialog-box h3 { margin: 0 0 8px; font: 600 15px Inter, system-ui, sans-serif; color: #f1ede3; letter-spacing: 0; text-transform: none; border: 0; padding: 0; }
.wb-dialog-box p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: #cfc8b8; white-space: pre-line; }
.wb-dialog-box p[hidden], .wb-dialog-box input[hidden] { display: none; }
.wb-dialog-box input { display: block; width: 100%; box-sizing: border-box; height: 34px; margin: 4px 0 14px; border: 1px solid #5a554d; border-radius: 5px; background: #272522; color: #fff; padding: 0 10px; font: 14px Inter, system-ui, sans-serif; }
.wb-dialog-box input:focus { outline: none; border-color: #c0392b; }
.wb-dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.wb-dialog-knoepfe button { height: 32px; padding: 0 14px; border: 1px solid #3d3a35; border-radius: 5px; background: #272522; color: #d9d4c7; font: 13px Inter, system-ui, sans-serif; cursor: pointer; }
.wb-dialog-knoepfe button:hover { background: #34312d; color: #fff; }
.wb-dialog-knoepfe button:focus-visible { outline: 2px solid #e7c862; outline-offset: 1px; }
#wb-dialog-ja { background: #3a2522; border-color: #8f6a3e; color: #fff; font-weight: 600; }
#wb-dialog-ja.gefahr { background: #c0392b; border-color: #c0392b; }
#wb-dialog-ja:hover { filter: brightness(1.12); }
.wb-meldungen { position: fixed; left: 56px; bottom: 34px; z-index: 1450; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
body:not(.werkbank) .wb-meldungen { left: 50%; transform: translateX(-50%); bottom: 16px; }
.wb-meldung { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; max-width: 460px; padding: 9px 8px 9px 14px; border-radius: 7px; background: #1c1b19; border: 1px solid #3d3a35; border-left: 3px solid #8f8878; color: #f1ede3; font: 13px/1.4 Inter, system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.wb-meldung.fehler { border-left-color: #e53935; }
.wb-meldung span { flex: 1 1 auto; white-space: pre-line; }
.wb-meldung button { flex: 0 0 auto; width: 22px; height: 22px; border: 0; background: none; color: #8f8878; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.wb-meldung button:hover { color: #fff; }
@media print { .wb-dialog, .wb-meldungen { display: none !important; } }
/* K3b: schmale Bühne (breite Palette) – Titel und Eintrag geben zuerst nach, statt dass die Leiste seitlich scrollt */
body.werkbank .wb-opt-slot[data-slot="titel"] { flex: 0 1 250px; min-width: 140px; }
body.werkbank .wb-opt-slot[data-slot="wahl"] { flex: 0 1 320px; min-width: 190px; }
body.werkbank .wb-opt-slot[data-slot="wahl"] select { min-width: 0; }
/* Etagen kompakt: Neu-würfeln als Symbol, Etagen als Nummern (voller Name im Tooltip) */
body.werkbank .wb-opt .gewoelbe-floor-switch-label { display: none; }
body.werkbank .wb-opt .gewoelbe-reroll-btn { font-size: 0; width: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
body.werkbank .wb-opt .gewoelbe-reroll-btn::before { content: '↻'; font-size: 16px; line-height: 1; }
body.werkbank .wb-opt .gewoelbe-floor-pill.gr-etage-knopf { font-size: 0; min-width: 30px; padding: 0 8px; }
body.werkbank .wb-opt .gewoelbe-floor-pill.gr-etage-knopf::before { content: 'E' attr(data-kurz); font-size: 13px; }
body.werkbank .wb-opt .gewoelbe-floor-pill.gr-etage-knopf small { display: none; }
body.werkbank .wb-opt .gewoelbe-floor-deeper { font-size: 0; width: 30px; padding: 0; }
body.werkbank .wb-opt .gewoelbe-floor-deeper::before { content: '⬇'; font-size: 14px; }