/* ═══ mtextur JANA — das Kleid (16.09.2026) ══════════════════════════════════════════
   Grundbausteine 1:1 aus dem Prisma-Cockpit (bausteine/cockpit_chrome.css): Farben, Kopf,
   Reiter, Filterband, Listen-Standard, Knöpfe, Fuss, Nebel statt Scrollbalken.
   Eigen sind nur Zeitleiste, Weiche, Ampel, Knochen und das Dashboard. */
:root{--accent:#e8a020;--accent-l:#fdf3e0;--titel:#726b5a;--text:#645e4f;--dim:#827a66;--hint:#827a66;--dark:#544b3f;--border:#e9e7e2;--warn:#C41664;--soft:#f8f8f6;--font:"Lucida Sans","Lucida Sans Unicode",sans-serif;
  --gleis:#6495ED;--gleis-l:#eef3fd;--gruen:#5bab46;--gelb:#e8a020;--rot:#C41664}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* schlägt jedes display:flex einer Klasse — sonst stehen alle Überlagerungen offen (gemessen 16.09.) */
html,body{height:100%;margin:0;overflow:hidden}
body{font-family:var(--font);color:var(--text);font-weight:400;background:#fff;font-size:14px}
a{color:inherit;text-decoration:none}
.app{height:100vh;display:flex;flex-direction:column}
/* ── Kopf: Logo links, Reiter Mitte, rechts Sprache · Zahnrad · Logout · Marke ── */
.header{height:50px;padding:0 16px 0 24px;display:flex;align-items:center;flex:none;background:#fff;position:relative;z-index:10}
.header::after{content:'';position:absolute;left:0;right:0;top:100%;height:32px;pointer-events:none;z-index:1;
 background:linear-gradient(to bottom,rgba(53,44,34,.30) 0%,rgba(53,44,34,.10) 4%,rgba(53,44,34,0) 8%),linear-gradient(to bottom,rgba(255,255,255,.62) 0%,rgba(255,255,255,.22) 52%,rgba(255,255,255,0) 100%)}
.header:has(.hlang-menu:not([hidden])){z-index:50}
.logo{display:flex;align-items:center;gap:9px;margin-right:20px;flex-shrink:0}
.logo-svg{display:block;height:26px;width:auto}
.stepper{display:flex;align-items:center;margin:0 auto}
.step{display:flex;align-items:center;gap:6px;padding:0 12px;white-space:nowrap;color:var(--dim);font-size:13.5px;font-weight:700;height:50px;position:relative;cursor:pointer;background:none;border:none;font-family:inherit}
.step:not(.active):hover{color:var(--accent)}
.step.active{color:var(--titel);cursor:default}
.step.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--accent)}
.step .cnt{font-size:12px;font-weight:400;color:var(--hint)}
.ico{background-size:contain;background-repeat:no-repeat;background-position:center;background-image:var(--icd)}
.step .ico{width:24px;height:24px;flex:none}
.step.active .ico{background-image:var(--icb)}
.step:not(.active):hover .ico{background-image:var(--ics)}
.i-dash{--icd:url("/assets/cockpit_overview_2_dim-40862422.svg");--icb:url("/assets/cockpit_overview_2_braun-1590f652.svg");--ics:url("/assets/cockpit_overview_2_safran-1b2209e8.svg")}
.i-hst{--icd:url("/assets/cockpit_hersteller_dim-2dfbcc6d.svg");--icb:url("/assets/cockpit_hersteller_braun-a90a9ca9.svg");--ics:url("/assets/cockpit_hersteller_safran-5eb34658.svg")}
.i-set{--icd:url("/assets/cockpit_settings_dim-6d2baf56.svg");--icb:url("/assets/cockpit_settings_braun-d689b998.svg");--ics:url("/assets/cockpit_settings_safran-11214561.svg")}
.i-jana{--icd:url("/assets/jana_dim-02f1cc5c.svg");--icb:url("/assets/jana_braun-29427ab1.svg");--ics:url("/assets/jana_safran-88d14353.svg")}
.i-scr{--icd:url("/assets/cockpit_scriba_dim-2c17775f.svg");--icb:url("/assets/cockpit_scriba_braun-357a9b39.svg");--ics:url("/assets/cockpit_scriba_safran-f735db3d.svg")}
.i-dku{--icd:url("/assets/cockpit_doku_dim-5f6e0ac0.svg");--icb:url("/assets/cockpit_doku_braun-705e8f3e.svg");--ics:url("/assets/cockpit_doku_safran-4d9c8f57.svg")}
.h-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.hlang{position:relative;display:inline-flex}
.hlang-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:#fff;border-radius:8px;padding:4px 9px;font-size:12.5px;font-weight:700;color:var(--titel);cursor:pointer;font-family:inherit}
.hlang-btn:hover{border-color:var(--accent)}
.hlang-btn .caret{font-size:8px;color:var(--hint)}
.hlang-menu{position:absolute;top:32px;right:0;z-index:80;background:#fff;border:1px solid var(--border);border-radius:9px;box-shadow:0 10px 30px rgba(53,44,34,.22);padding:4px;display:flex;flex-direction:column;min-width:58px}
.hlang-menu button,.hlang-menu a{border:none;background:none;text-align:left;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--text);border-radius:6px;cursor:pointer;font-family:inherit;white-space:nowrap}
.hlang-menu button:hover,.hlang-menu a:hover{background:var(--accent-l);color:var(--accent)}
.hlang-menu button.on{color:var(--accent)}
.lgout img{width:15px;height:15px;display:block}
.setbtn{width:30px;height:30px;border:none;background:none;padding:0;cursor:pointer;flex:none;display:block;background-image:var(--icd);background-size:24px 24px;background-repeat:no-repeat;background-position:center}
.setbtn:hover{background-image:var(--ics)}
.setbtn.on{background-image:var(--icb)}
.marke{display:flex;align-items:center;gap:8px;font-size:26px;font-weight:700;color:var(--titel);line-height:1;user-select:none;white-space:nowrap}
.marke .my{color:var(--accent)}
.marke img{width:28px;height:28px;display:block}
/* ── Filterband vollbreit unter dem Kopf ── */
.kopfzeile{display:flex;align-items:center;gap:14px;padding:11px 24px;flex:none;background:var(--soft);border-bottom:1px solid var(--border);position:relative;z-index:20;min-height:54px;flex-wrap:wrap}
.kopfzeile .titel{font-size:18px;font-weight:700;color:var(--titel);margin-right:6px;white-space:nowrap}
.kopfzeile .rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
/* ── Inhaltsfläche, Scroll ohne Balken, Nebel als Überlauf-Zeichen ── */
.body{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 24px 0;position:relative}
.scrollwrap{flex:1;min-height:0;position:relative}
.scroll{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:26px}
.scroll::-webkit-scrollbar{display:none}
.fog{position:absolute;left:0;right:0;bottom:0;height:34px;pointer-events:none;opacity:0;transition:opacity .18s;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.92))}
.fog.on{opacity:1}
.fogup{position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;opacity:0;transition:opacity .18s;background:linear-gradient(to bottom,rgba(255,255,255,.92),rgba(255,255,255,0))}
.fogup.on{opacity:1}
.fog .arr,.fogup .arr{position:absolute;left:50%;transform:translateX(-50%);width:34px;height:34px;color:var(--accent);background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.fog .arr{bottom:2px;--m:url("/assets/prisma_chevron_down-d0622c01.svg")}
.fogup .arr{top:2px;--m:url("/assets/prisma_chevron_up-ee831f8a.svg")}
/* ── Listen-Standard: brauner klebender Kopf, weisse Trenner, Sortierspalte safran ── */
.rl-t{width:100%;border-collapse:collapse;table-layout:fixed}
.rl-t th{position:sticky;top:0;background:var(--titel);color:#fff;z-index:2;user-select:none;text-align:left;padding:7px 14px;border-bottom:2px solid #645e4f;border-left:2px solid #fff;font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-t th a{display:block;color:#fff}
.rl-t th:first-child{border-left:none}
.rl-t th.sort:hover{background:#827a66}
.rl-t th.on{background:var(--accent)}
.rl-t th.num,.rl-t td.num{text-align:right}
.rl-t td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:9px 14px;border-bottom:2px solid #fff;vertical-align:middle}
.rl-t tbody tr:nth-child(even) td{background:var(--soft)}
.rl-t tbody tr:nth-child(odd) td{background:#faf9f7}
.rl-t tbody tr.zeile{cursor:pointer}
.rl-t tbody tr.zeile:hover td{background:#fdf6ea}
.rl-t tbody tr:hover td.nm{color:var(--accent)}
.rl-t td.nm{font-weight:700}
.rl-t td.opt{color:var(--dim);font-size:12px}
.leer{color:var(--dim);padding:18px 0;font-size:14px}
/* ── Knöpfe, Felder, Segmente, Marken ── */
.btn{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--titel);background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;line-height:1.2}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.prim{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.prim:hover{filter:brightness(1.06);color:#fff}
.btn.gruen{background:#8fb02c;border-color:#8fb02c;color:#fff}   /* Lindengrün (PUSH-Ton, FACHREGELN) = der vorgeschlagene Weg (Philipp 17.09.) */
.btn.gruen:hover{filter:brightness(1.06);color:#fff}
.btn.blau{background:#5b87c0;border-color:#5b87c0;color:#fff}   /* Kornblumenblau = kein Fall / Testmail */
.btn.blau:hover{filter:brightness(1.06);color:#fff}
.btn.warn{color:var(--warn)}
.btn.warn:hover{border-color:var(--warn)}
.btn.klein{padding:5px 11px;font-size:12.5px}
.btn.ibtn{padding:5px 9px}
.btn:disabled{opacity:.45;cursor:default}
.fi{border:1px solid var(--border);border-radius:8px;padding:6px 11px;font-family:inherit;font-size:13.5px;color:var(--text);background:#fff;min-width:0}
.fi:focus{outline:none;border-color:var(--accent)}
textarea.fi{resize:vertical;min-height:64px;line-height:1.45}
select.fi{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M0 0h8L4 6z' fill='%23827a66'/></svg>");background-repeat:no-repeat;background-position:right 8px center;padding-right:22px}
.fld{width:220px}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex:none;background:#fff}
.seg button,.seg a,.seg label,.seg span{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.4px;border:none;background:#fff;color:var(--dim);padding:5px 11px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.seg > * + button,.seg > * + a,.seg > * + label,.seg > * + span{border-left:1px solid var(--border)}   /* Trennstrich zwischen den Reitern — die Knopf-Regel darüber löscht sonst den Rand (Philipp 17.09.) */
.seg .gl{padding:0;background:currentColor;border:0;width:12px;height:12px}   /* Knochen im Segment: die «.seg span»-Regel malte sie weiss auf weiss (Philipp 17.09.) */
.seg .on{background:var(--accent);color:#fff;cursor:default;border-left-color:var(--accent)}
.seg .on + *{border-left-color:var(--accent)}
.seg :not(.on):hover{color:var(--accent)}
.pill{display:inline-block;border-radius:20px;padding:2px 9px;font-size:11.5px;font-weight:700;border:1px solid var(--border);color:var(--dim);text-transform:uppercase;letter-spacing:.02em}
.pill.sf{border-color:var(--accent);color:var(--accent)}
.pill.wn{border-color:var(--warn);color:var(--warn)}
.pill.bl{border-color:var(--gleis);color:var(--gleis)}
.count{font-size:13px;color:var(--hint)}
.hint{font-size:12.5px;color:var(--hint);margin-top:12px;line-height:1.45}
.meld{position:fixed;left:50%;top:62px;transform:translateX(-50%);z-index:90;background:var(--titel);color:#fff;padding:9px 18px;border-radius:9px;font-size:13.5px;font-weight:700;box-shadow:0 10px 30px rgba(53,44,34,.28);animation:meldweg .4s 3.2s forwards}
.meld.alert{background:var(--warn)}
@keyframes meldweg{to{opacity:0;visibility:hidden}}
/* Masken-Zeichen: nimmt die Schriftfarbe an, eine Datei für jede Farbe */
.gl{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;vertical-align:-4px}
.gl-post{--m:url("/assets/art_post-87578eba.svg")}.gl-mail{--m:url("/assets/art_mail-04257d67.svg")}.gl-anruf{--m:url("/assets/art_anruf-264b0fc8.svg")}.gl-li_anfrage{--m:url("/assets/art_li_anfrage-0b24fb3c.svg")}.gl-li_nachricht{--m:url("/assets/art_li_nachricht-ef59e1fd.svg")}.gl-videocall{--m:url("/assets/art_videocall-9f2cb477.svg")}.gl-praesentation{--m:url("/assets/art_praesentation-10d0f97c.svg")}.gl-re_vernetzt{--m:url("/assets/art_re_vernetzt-00b32ca5.svg")}.gl-re_antwort{--m:url("/assets/art_re_antwort-eb3f10ad.svg")}
.gl-event{--m:url("/assets/z_event-363a06f7.svg")}.gl-add{--m:url("/assets/z_add-d6f2b153.svg")}.gl-close{--m:url("/assets/z_close-41f6870a.svg")}.gl-edit{--m:url("/assets/z_edit-23630a62.svg")}.gl-delete{--m:url("/assets/z_delete-56e2494c.svg")}.gl-check{--m:url("/assets/z_check-9c86634b.svg")}.gl-search{--m:url("/assets/z_search-ade0a7b0.svg")}.gl-bones{--m:url("/assets/bones_braun-401cc90a.svg")}
.rl-t th.wk,.rl-t td.wk{text-align:center;padding-left:6px;padding-right:6px}
.zl-weg{font-size:16px;font-weight:700;opacity:.55}.zl-weg:hover{opacity:1}.zl-weg.warn[data-scharf]{opacity:1;color:var(--warn);font-size:12px;width:auto;padding:0 6px;white-space:nowrap}
.rl-t th.wk{padding-top:7px;padding-bottom:7px}
.rl-t .wk input{width:15px;height:15px;cursor:pointer;vertical-align:middle;accent-color:var(--accent)}
/* ── Spaltenfilter (Muster Excel, Philipp 16.09.): Kopf = Knopf, darunter das Menü mit Sortieren ▲▼ und Häkchen ── */
.rl-t th.fk{overflow:visible;padding:0;position:sticky}
.rl-t th.fk .fkb{display:block;width:100%;text-align:left;background:none;border:0;color:#fff;font:inherit;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:7px 14px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-t th.fk[data-fk="faellig_k"] .fkb{text-align:center;padding:7px 0;text-overflow:clip}   /* Ampel-Kopf ●: 36 px schmal — ohne «…» (gemessen 16.09.) */
.rl-t th.fk.on{background:var(--accent)}
.rl-t th.fk:hover{background:#827a66}.rl-t th.fk.on:hover{background:var(--accent)}
.fkm{position:absolute;top:100%;left:0;z-index:60;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(53,44,34,.22);padding:8px;min-width:210px;max-height:min(70vh,520px);overflow-y:auto;scrollbar-width:none;text-transform:none;letter-spacing:0;font-weight:400;color:var(--text);cursor:default;white-space:nowrap}
.fkm::-webkit-scrollbar{display:none}
.rl-t th.fk:last-child .fkm,.rl-t th.fk:nth-last-child(2) .fkm{left:auto;right:0}
.fks{display:flex;gap:4px;margin-bottom:6px}
.fks button{flex:1;font-family:inherit;font-size:12px;font-weight:700;color:var(--dim);background:#fff;border:1px solid var(--border);border-radius:7px;padding:5px 8px;cursor:pointer}
.fks button:hover{color:var(--accent);border-color:var(--accent)}
.fks button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fkg{border-top:1px solid var(--soft);padding-top:6px;margin-top:4px}
.fkt{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--hint);font-weight:700;padding:2px 6px 4px}
.fkg label{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;font-size:13px;cursor:pointer}
.fkg label:hover{background:var(--accent-l);color:var(--accent)}
.fkc{accent-color:var(--accent)}
/* ── Knochen: drei Stufen, Klick setzt, gleicher Klick löscht ── */
.kn{display:inline-flex;gap:2px;align-items:center;vertical-align:middle}
.kn button{border:0;background:none;padding:0;width:20px;height:20px;cursor:pointer;background-size:18px 18px;background-repeat:no-repeat;background-position:center;background-image:url("/assets/bones_dim-8e0c4652.svg");opacity:.35}
/* Aktive Knochen in SAFRAN (Philipp 16.09.), nicht Braun; beim Zeigen: die Stufe unterm Cursor voll, der Rest blass */
.kn button.on{background-image:url("/assets/bones_safran-c196ece5.svg");opacity:1}
.kn:has(button:hover) button{opacity:.35;background-image:url("/assets/bones_dim-8e0c4652.svg")}
.kn button:hover,.kn button:has(~ button:hover){background-image:url("/assets/bones_safran-c196ece5.svg");opacity:1}
.kn.gross button{width:28px;height:28px;background-size:24px 24px}
/* ── Ampel ── */
.amp{display:inline-block;width:12px;height:12px;border-radius:50%;background:#d9d6cf;vertical-align:middle;flex:none}
.amp.gruen{background:var(--gruen)}.amp.gelb{background:var(--gelb)}.amp.rot{background:var(--rot)}
.amp.gross{width:22px;height:22px;box-shadow:0 0 0 4px #fff,0 0 0 5px var(--border)}
/* ── Dashboard: Blöcke ── */
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start}
.block{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px 10px}
.block h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);display:flex;align-items:center;gap:8px}
.block h3 .n{margin-left:auto;font-size:13px;color:var(--titel)}
.block .z{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--soft);font-size:14px;color:var(--text)}
.block .z:hover{color:var(--accent)}
.block .z b{color:var(--titel);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block .z .d{font-size:12.5px;color:var(--dim);white-space:nowrap}
.block .z:hover b{color:var(--accent)}
.kenn{display:flex;gap:26px;flex-wrap:wrap}
.kenn .k{min-width:110px}
.kenn .k b{display:block;font-size:26px;font-weight:700;color:var(--titel);line-height:1.1}
.kenn .k span{font-size:12px;color:var(--dim)}
.amplabel{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;color:var(--titel)}
.amplabel small{font-weight:400;font-size:12.5px;color:var(--dim)}
/* ── Hersteller-Blatt: Stammdaten links, Zeitleiste rechts ── */
.blatt{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:28px;align-items:start}
.karte{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.karte + .karte{margin-top:16px}
.karte h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);display:flex;align-items:center;gap:8px}
.karte h3 .tun{margin-left:auto;display:inline-flex;gap:4px}
.karte .inline .vwz > label{width:100px}
.karte .inline .knopfzeile{margin-top:12px}
.karte .inline .seg,.form .karte .seg.prio{display:flex;flex:1;min-width:0}   /* Priorität in der schmalen Karte: das Segment füllt die Zeile, «unbewertet» ragt nicht mehr hinaus (Philipp 17.09.) */
.karte .inline .seg label,.form .karte .seg.prio label{flex:1 1 auto;justify-content:center;padding:5px 4px;gap:3px;min-width:0}
.karte .inline .seg .gl-bones{width:11px!important;height:11px!important;flex:none}
.karte h2{margin:0 0 6px;font-size:18px;color:var(--titel);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.st{display:grid;grid-template-columns:110px 1fr;gap:5px 12px;font-size:14px;line-height:1.4}
.st dt{color:var(--dim);font-size:12.5px;padding-top:2px}
.st dd{margin:0;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.st dd a{color:var(--accent)}
.ansicht [data-feld]{cursor:text;border-radius:4px}
.ansicht [data-feld]:hover{background:var(--accent-l)}
.person{padding:10px 0;border-top:1px solid var(--soft);display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13.5px}
.person:first-of-type{border-top:0}
.person .pn{font-weight:700;color:var(--titel)}
.anrede-schnell{vertical-align:middle;margin-right:6px}
.anrede-schnell button{padding:2px 8px;font-size:11px;border:0;background:#fff;color:var(--dim);font-weight:700;cursor:pointer;font-family:inherit}
.anrede-schnell button + button{border-left:1px solid var(--border)}
.anrede-schnell button:hover{color:#fff;background:var(--accent)}
.person .pf{color:var(--dim);font-size:12.5px;grid-column:1}
.person .pk{grid-column:1;display:flex;gap:12px;flex-wrap:wrap}
.person .pk a{color:var(--accent);display:inline-flex;align-items:center;gap:4px}
.person .tun{grid-column:2;grid-row:1/span 3;display:flex;gap:2px;align-items:flex-start}
.ibt{width:26px;height:26px;border:0;background:none;color:var(--dim);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px}
.ibt:hover{color:var(--accent);background:var(--accent-l)}
.ibt.warn:hover{color:var(--warn);background:#fbe9f0}
.ibt .gl{width:16px;height:16px}
.warnbox{border:1px solid var(--warn);color:var(--warn);border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:14px;background:#fff}
.warnbox a{text-decoration:underline}
/* ── Die Zeitleiste nach der Skizze (zeitleiste.svg): Datum links, Linie mit Knoten, Inhalt rechts; oben die Weiche ── */
.zlk{padding:18px 22px 10px}
.zlkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.zlkopf h2{font-size:22px;color:var(--titel)}
.zlmeta{font-size:13.5px;color:var(--dim);margin-top:3px}
.zlplus{font-size:15px;padding:10px 22px;letter-spacing:.04em}
.zlh{font-size:13px;font-weight:700;color:var(--titel);text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px}
.zlh::first-letter{text-transform:uppercase}
.zl2{list-style:none;margin:0;padding:0;position:relative}
.zl2 li{display:grid;grid-template-columns:64px 44px 1fr auto;column-gap:10px;align-items:start;position:relative;padding:8px 0 26px}
.zl2 li::before{content:'';position:absolute;left:calc(64px + 10px + 21px);top:0;bottom:0;width:3px;background:#dcd8d0}
.zl2 li:first-child::before{top:22px}
.zl2 li:last-child::before{bottom:auto;height:22px}
.zl2 .d{font-size:14px;color:var(--dim);padding-top:10px;text-align:left}
.zl2 .pkt{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;background:var(--titel);color:#fff;display:flex;align-items:center;justify-content:center;border:0;padding:0}
.zl2 .pkt .gl{width:20px;height:20px;vertical-align:0}
.zl2 li.ein .pkt{background:var(--gleis)}
.zl2 .pkt.ring{background:#fff;border:4px solid var(--accent);cursor:pointer;box-shadow:0 0 0 4px #fff}
.zl2 .pkt.ring:hover{background:var(--accent-l)}
.zl2 .pkt.ring.leer{border-color:#dcd8d0;cursor:default}
.zl2 .pkt.grau{width:22px;height:22px;background:#dcd8d0;margin:11px 0 0 11px}
.zl2 li.start .d{padding-top:10px}
.zl2 .inh{padding-top:6px;min-width:0}
.zl2 .inh b{display:block;font-size:19px;font-weight:700;color:var(--titel);line-height:1.2}
.zl2 li.start .inh{padding-top:9px}
.zl2 .sub{font-size:14.5px;color:var(--dim);margin-top:4px;line-height:1.35;white-space:pre-line}
.zl2 .tun{display:inline-flex;gap:2px;padding-top:8px;opacity:0;transition:opacity .15s}
.zl2 li:hover .tun{opacity:1}
.zlbtn{border-color:var(--accent);color:var(--accent);padding:10px 22px;font-size:15px}
/* Der Abzweig: Kurve von der Linie zu den Gleisen, Gleise als blaue Pillen, «anderes …» grau, der Strich mit dem Wink */
.abzweig{grid-column:2 / -1;display:flex;align-items:center;gap:0;margin-top:14px;min-height:46px;position:relative}
/* Die Kurve kommt von UNTEN aus der Linie und biegt nach oben in die Gleise ein (Skizze, Philipp 16.09.) */
.abzweig .kurve{width:44px;height:40px;flex:none;align-self:flex-start;border-left:3px solid var(--accent);border-top:3px solid var(--gleis);border-top-left-radius:26px;margin-left:21px;margin-top:22px;margin-right:6px}
.zl2 li.vor::before{background:linear-gradient(to bottom,var(--accent) 0,var(--accent) 132px,#dcd8d0 132px)}
.gleis2{font-family:inherit;font-size:16px;font-weight:700;color:var(--gleis);background:#fff;border:3px solid var(--gleis);border-radius:26px;padding:8px 26px;cursor:pointer;margin-left:14px;position:relative;z-index:1}
/* Zwischen den Chips ein kurzes Gleisstück (Skizze), keine Überdeckung (Philipp 16.09.) */
.gleis2::before{content:'';position:absolute;left:-17px;top:50%;width:14px;height:3px;background:var(--gleis);margin-top:-1.5px}
.abzweig .kurve + form .gleis2::before,.abzweig .kurve + .gleis2::before{display:none}
.abzweig .kurve + form .gleis2,.abzweig .kurve + .gleis2{margin-left:-3px}
.gleis2:hover{background:var(--gleis-l)}
.gleis2.andere{color:var(--dim);border-color:#c9c4b9;font-weight:400}
.gleis2.andere:hover{color:var(--accent);border-color:var(--accent);background:#fff}
.abzweig form{display:inline}
.abzweig .strich{width:48px;height:3px;background:var(--gleis);margin-left:0}
.abzweig .wink{font-size:15px;color:var(--dim);margin-left:12px;white-space:nowrap}
/* ── Formulare: eine Kante für alle Bezeichner ── */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;max-width:1000px;align-items:stretch}
.form .karte{margin-top:0}   /* im Raster gilt nur der Raster-Abstand — «.karte + .karte» schob AKQUISE 16 px tiefer als STAMMDATEN (Philipp 16.09.) */
.form .voll{grid-column:1/-1}
.vwz{display:flex;align-items:flex-start;gap:10px;margin-top:8px}
.vwz > label{width:120px;flex:none;font-size:12.5px;color:var(--dim);padding-top:7px}
.vwz .fi{flex:1}
.vwz .zwei{display:flex;gap:8px;flex:1;min-width:0}
.vwz .zwei .fi{flex:1 1 0;width:0;min-width:0}   /* Felder teilen sich die Zeile — ohne width:0 ragte das Telefonfeld aus der Karte (Philipp 16.09.) */
.vwz .zwei .fi.kurz{flex:0 0 90px;width:90px}
.check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer;padding-top:7px}
.themenwahl{display:flex;gap:6px;flex-wrap:wrap;padding-top:4px}
.themenwahl label{border:1px solid var(--border);border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:700;color:var(--dim);cursor:pointer;user-select:none}
.themenwahl label:has(input:checked){border-color:var(--accent);color:var(--accent);background:var(--accent-l)}
.themenwahl input[type=checkbox],.themenwahl input[type=radio]{display:none}
.themenwahl .thneu{border:1px dashed var(--border);border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:700;color:var(--dim);background:#fff;cursor:pointer;font-family:inherit}
.themenwahl .thneu:hover{color:var(--accent);border-color:var(--accent)}
.themenwahl .thneu-fi{padding:3px 11px;font-size:12.5px;border-radius:20px;width:180px}
.artwahl{display:flex;gap:6px;flex-wrap:wrap}
.artwahl label{border:1px solid var(--border);border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:700;color:var(--dim);cursor:pointer;display:inline-flex;align-items:center;gap:6px;user-select:none}
.artwahl label.ein{border-style:dashed}
.artwahl label:hover{color:var(--accent)}
.artwahl label:has(input:checked){border-color:var(--accent);background:var(--accent);color:#fff}
.artwahl input{display:none}
.knopfzeile{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.knopfzeile .rechts{margin-left:auto;display:flex;gap:10px}
.pbox{border-top:1px solid var(--soft);padding-top:12px;margin-top:12px}
.fehler{border:1px solid var(--warn);color:var(--warn);border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:14px}
/* ── Überlagerung fürs Schritt-Formular (Haus-Optik der Ungesichert-Wacht) ── */
.ov{position:fixed;inset:0;z-index:95;background:rgba(60,55,45,.55);display:flex;align-items:center;justify-content:center}
.ovk{background:#fff;border-radius:14px;padding:22px 24px 18px;width:min(720px,94vw);max-height:92vh;overflow:auto;scrollbar-width:none;box-shadow:0 14px 44px rgba(53,44,34,.34)}
.ovk::-webkit-scrollbar{display:none}
.ovk h3{margin:0 0 14px;font-size:16px;color:var(--titel)}
/* ── Zahnrad ── */
.zr{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;align-items:start}
.zr .karte + .karte{margin-top:0}
/* Zahnrad-Reiter im Band + Schalter aus button_to-Formularen (display:contents → Rahmen am Knopf selbst) */
.seg.reiter a,.seg.reiter span{padding:6px 12px;letter-spacing:.5px}
.tmseg button + button,.tmseg form + form button{border-left:1px solid var(--border)}
.tmseg.aus button.on{background:var(--warn);border-left-color:var(--warn)}
.regel{display:grid;grid-template-columns:150px 170px 1fr;gap:8px 12px;align-items:center;padding:7px 0;border-top:1px solid var(--soft);font-size:13.5px}
.regel .nach{font-weight:700;color:var(--titel)}
.regel .gw{display:flex;gap:4px;flex-wrap:wrap}
.regel .gw label{border:1px solid var(--border);border-radius:20px;padding:2px 9px;font-size:11.5px;font-weight:700;color:var(--dim);cursor:pointer;user-select:none}
.regel .gw label:has(input:checked){border-color:var(--gleis);color:var(--gleis);background:var(--gleis-l)}
.regel .gw input{display:none}
.thz{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--soft);font-size:14px}
.thz b{color:var(--titel);flex:1}
.thz .n{font-size:12px;color:var(--dim)}
.thz .kmarken{display:inline-flex;gap:4px;flex:none;min-width:96px}
/* ── Mail-Werkstatt: links Eingaben, rechts die Vorschau im echten Rahmen ── */
.werk{display:grid;grid-template-columns:minmax(420px,560px) 1fr;gap:24px;align-items:start}
.werk .karte + .karte{margin-top:14px}
.werk-r{position:sticky;top:0}
.vsk{display:flex;align-items:center;justify-content:space-between;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin:0 0 8px}
#vorschau{width:100%;height:calc(100vh - 230px);min-height:520px;border:1px solid var(--border);border-radius:12px;background:#f8f8f6}
.empfl{max-height:220px;overflow:auto;scrollbar-width:none;border:1px solid var(--soft);border-radius:8px;padding:4px 10px}
.empfl::-webkit-scrollbar{display:none}
.empf{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid var(--soft);font-size:13px}
.empf:first-child{border-top:0}
.empf b{color:var(--titel)}.empf span{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empf.ohne b{color:var(--warn)}
.sigk{display:inline-flex;margin-left:8px;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex:none}   /* wie in Prisma: EIN Segment [ALH|PHA], aktiv safran */
.sigk button{border:0;border-left:1px solid var(--border);background:#fff;color:var(--dim);font:700 12px/1 inherit;letter-spacing:.4px;padding:8px 10px;cursor:pointer}
.sigk button:first-child{border-left:0}
.sigk button:hover{color:var(--accent)}
.sigk button.on{background:var(--accent);color:#fff;border-left-color:var(--accent)}
.sigk button.on + button{border-left-color:var(--accent)}
.mailbild{max-width:760px;margin-top:16px;background:#f8f8f6;border-radius:12px;padding:20px;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;color:#645e4f}
.step .cnt.neu{color:#fff;background:var(--accent);border-radius:10px;padding:0 6px;font-weight:700}
.gl-inbox{--m:url("/assets/z_inbox-36f454be.svg")}.gl-hoststar{--m:url("/assets/hoststar-3535c2e5.svg")}.gl-print{--m:url("/assets/z_print-081597aa.svg")}.gl-copy{--m:url("/assets/z_content_copy-6ccb79b3.svg")}
.kopiert{position:fixed;left:50%;bottom:60px;transform:translateX(-50%);background:var(--titel);color:#fff;padding:8px 16px;border-radius:9px;font-size:13px;font-weight:700;z-index:99}
/* ── DOKU (Hefte) — Machart Cockpit › DOKU ── */
.dokt2 td{padding-top:8px;padding-bottom:8px}
.doknm{font-weight:700;color:var(--titel)}
.dokfn{font-size:11px;color:var(--hint);font-style:italic;margin-top:1px}
.punkt{border:0;background:none;padding:0;width:22px;height:22px;font-size:16px;line-height:1;color:#d9d6cf;cursor:pointer}
.punkt.on{color:var(--accent)}
.punkt:hover{color:var(--accent)}
.gl-auge{--m:url("/assets/z_visibility-0b3760ec.svg")}.gl-laden{--m:url("/assets/z_download-98a6c261.svg")}.gl-ersetzen{--m:url("/assets/z_history-3ea37414.svg")}
.dropzone{position:fixed;inset:60px 24px 44px;z-index:80;border:3px dashed var(--accent);border-radius:16px;background:rgba(253,243,224,.9);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--accent);pointer-events:none}
/* ── Fristen-Tabelle im Zahnrad: Werktage je Schrittart, CH / EU ── */
.frt{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 6px}
.frt th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);font-weight:700;padding:4px 8px 6px 0}
.frt td{padding:3px 8px 3px 0;border-top:1px solid var(--soft);color:var(--titel);font-weight:700;white-space:nowrap}
.frt td .fi{width:76px;text-align:center;padding:4px 6px}
.frt tr.ein td{color:var(--gleis)}
.frt th:nth-child(2),.frt th:nth-child(3){width:96px}
/* ── Fuss ── */
.footer{height:34px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-top:1px solid var(--border);background:#fff;font-size:12px;color:var(--hint)}
.footer .fm{color:var(--accent)}
/* ── Anmelden ── */
.anm{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--soft)}
.anmk{background:#fff;border:1px solid var(--border);border-radius:16px;padding:34px 38px;width:380px;text-align:center;box-shadow:0 14px 44px rgba(53,44,34,.12)}
.anmk .marke{justify-content:center;margin:14px 0 4px}
.anmk .claim{font-size:12.5px;color:var(--dim);margin-bottom:26px}
.anmk .btn{width:100%;justify-content:center;margin-top:10px}
.anmk .hint{margin-top:18px}
@media (max-width:1100px){.blatt{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

/* Hersteller-Import (17.09.): Formular zweispaltig, Zusammenfassung als Pillen, Pille lindengrün */
.impf{display:grid;grid-template-columns:150px 1fr;gap:12px 16px;align-items:center}
.impf .fi{width:100%;box-sizing:border-box}
.impsum{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.pill.gr{border-color:#8fb02c;color:#8fb02c}