/* TCG Keeper — gemeinsames Stylesheet, Teil 20: Kontrollzentrum / Seitenanpassung
   (Neugestaltung 23.10.2026, Logbuch-Eintrag 157). Reiter statt Klappboxen,
   Speicherleiste, Auswahlkärtchen, Farbzeilen Hell/Dunkel, Farbwähler,
   Vorschaufenster, ⚙️-Fenster auf den Seiten. Nur Farbvariablen aus Teil 1. */

.kz-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.kz-hide{ display:none !important; }
.kz-spacer{ flex:1 1 auto; }
.kz-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; flex:0 0 auto; }
.kz-std{ font-size:11px; color:var(--ink-soft); background:var(--paper-sunken); padding:1px 7px; border-radius:99px; white-space:nowrap; font-weight:500; }
.kz-pill{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; padding:2px 9px; border-radius:99px; background:var(--paper-sunken); color:var(--ink-soft); white-space:nowrap; }
.kz-pill.is-good{ background:var(--good-soft); color:var(--good); font-weight:600; }
.kz-mark{ display:inline-flex; align-items:center; font-size:11px; font-weight:650; color:var(--accent); background:var(--accent-soft); padding:1px 8px; border-radius:99px; white-space:nowrap; }
.kz-mark.is-dirty{ color:var(--gold); background:var(--gold-soft); }
.kz-nowrap{ white-space:nowrap; }
.kz-right{ text-align:right; }
.kz-inline{ display:inline; margin:0; }
.kz-after{ margin-top:12px; }
.kz-wide{ width:100%; justify-content:center; }
.kz-field-hint{ font-size:12px; color:var(--ink-soft); line-height:1.4; }
.kz-intro{ margin:0 0 14px; font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.kz-intro-more{ margin:0 0 14px; font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.kz-intro-more > summary{ cursor:pointer; list-style:none; }
.kz-intro-more > summary::-webkit-details-marker{ display:none; }
.kz-intro-more > summary span{ color:var(--accent); font-weight:600; white-space:nowrap; }
.kz-intro-more[open] > summary{ display:none; }
.kz-intro-more p{ margin:0; }

/* ---- Schnellzugriff, Hinweisband, Kennzahlen ---- */
.kz-quick{ margin:0 0 18px; }
.kz-quick-label{ display:flex; align-items:center; gap:6px; margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.kz-quick-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:10px; }
.kz-quick-tile{ display:flex; align-items:center; gap:10px; padding:8px 14px 8px 10px; border:1px solid var(--line); border-radius:calc(12px * var(--rs, 1));
  background:var(--paper-raised); color:var(--ink); text-decoration:none; min-height:44px; transition:border-color .15s, transform .15s; }
.kz-quick-tile:hover{ border-color:var(--accent); color:var(--ink); transform:translateY(calc(-1px * var(--hover-lift, 1))); }
.kz-quick-tile strong{ display:block; font-size:13.5px; font-weight:600; }
.kz-quick-tile small{ display:block; font-size:11.5px; color:var(--ink-soft); }
.kz-quick-ico{ width:32px; height:32px; border-radius:9px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:16px; }
.kz-banner{ background:var(--gold-soft); color:var(--ink); border:1px solid var(--line); border-radius:calc(12px * var(--rs, 1)); padding:10px 14px; margin:0 0 16px; font-size:13.5px; }
.kz-kpis{ margin-bottom:16px; }

/* ---- Speicherleiste ---- */
.kz-savebar{ position:sticky; top:8px; z-index:30; display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; padding:10px 14px !important; margin:0 0 14px; }
.kz-savebar.is-dirty{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow); }
.kz-save-state{ font-weight:600; color:var(--ink-soft); }
.kz-savebar.is-dirty .kz-save-state{ color:var(--accent); }
.kz-save-list{ font-size:12.5px; color:var(--ink-soft); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:420px; }
.kz-save-label{ flex:1 1 220px; width:auto; min-width:160px; }
@media (max-width:760px){
  .kz-savebar{ position:fixed; left:0; right:0; bottom:0; top:auto; margin:0; border-radius:0; z-index:90; padding:10px 14px 14px !important; }
  .kz-save-list, .kz-save-label{ display:none; }
  .kz{ padding-bottom:70px; }
}

/* ---- Reiter, Werkzeugleiste ---- */
.kz-tabs{ margin-bottom:14px; }
/* Eintrag 158: in der normalen Breite (Rand-Modus) passte „Verlauf & Sicherung“ nicht mehr in eine Zeile und war
   abgeschnitten (die Leiste scrollt ohne sichtbaren Balken). Am Desktop daher umbrechen statt scrollen. */
@media (min-width:761px){
  .kz-tabs{ flex-wrap:wrap; overflow:visible; row-gap:2px; }
  .kz-tabs .dm-tab{ padding:9px 12px; }
}
.dm-tab.has-dirty::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-left:2px; }
.kz-toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 16px; }
.kz-search{ flex:0 1 360px; display:flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:calc(10px * var(--rs, 1)); background:var(--paper-raised); color:var(--ink-soft); }
.kz-search input{ border:0; outline:0; background:transparent; flex:1; min-width:0; font:inherit; font-size:14px; color:var(--ink); }
.kz-search:focus-within{ outline:2px solid var(--accent); outline-offset:1px; }
.kz-chips{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.kz-chip{ display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 13px; border-radius:99px; border:1px solid var(--line); background:var(--paper-raised);
  color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer; }
.kz-chip:hover{ border-color:var(--accent); }
.kz-chip.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }
.kz-pvmode{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; }
.kz-seg{ display:inline-flex; border:1px solid var(--line); border-radius:calc(10px * var(--rs, 1)); overflow:hidden; background:var(--paper-raised); flex-wrap:wrap; }
.kz-seg > button, .kz-seg > label > span{ border:0; background:transparent; min-height:34px; padding:0 12px; font:inherit; font-size:13px; color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; border-right:1px solid var(--line); }
.kz-seg > button:last-child, .kz-seg > label:last-child > span{ border-right:0; }
.kz-seg > button.is-on, .kz-seg > label > input:checked + span{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
.kz-seg-radio > label{ display:inline-flex; margin:0; }
.kz-seg-radio > label > input{ position:absolute; opacity:0; pointer-events:none; }
.kz-seg-radio > label > input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:-2px; }

/* ---- Aufteilung ---- */
.kz-layout{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; }
.kz-main{ flex:999 1 560px; min-width:0; }
.kz-tabs-on .kz-panel{ display:none; }
.kz-tabs-on .kz-panel.is-active{ display:block; }
.kz-tabs-on.kz-searching .kz-main .kz-panel{ display:none; }
.kz-tabs-on.kz-searching .kz-main .kz-panel.kz-search-hit{ display:block; }
.kz-panel-inner{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.kz-secnav{ flex:1 1 200px; max-width:230px; position:sticky; top:84px; padding:10px !important; display:flex; flex-direction:column; gap:2px; }
.kz-secnav-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:4px 10px 6px; }
.kz-secnav a{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:9px; color:var(--ink); font-size:13.5px; text-decoration:none; }
.kz-secnav a:hover{ background:var(--paper-sunken); }
.kz-secnav a.is-active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.kz-secnav-reset{ margin-top:8px; justify-content:center; }
.kz-secs{ flex:999 1 420px; min-width:0; }
.kz-layout.is-navtop .kz-secnav{ max-width:none; flex-basis:100%; position:static; flex-direction:row; flex-wrap:wrap; }
.kz-layout.is-navtop .kz-secnav-label{ display:none; }
.kz-searching .kz-secnav{ display:none; }
@media (max-width:900px){ .kz-secnav{ max-width:none; flex-basis:100%; position:static; flex-direction:row; flex-wrap:wrap; } .kz-secnav-label{ display:none; } }
.kz-sec{ scroll-margin-top:84px; }
.kz-sec-icon{ font-size:17px; }
.kz-sec-head{ flex-wrap:wrap; }
.kz-sec-badge{ font-size:11px; font-weight:650; color:var(--gold); background:var(--gold-soft); padding:2px 9px; border-radius:99px; }
.kz-place{ font-size:12px; color:var(--ink-soft); background:var(--paper-sunken); padding:3px 10px; border-radius:99px; }
.kz-onpage{ margin:0; font-size:13.5px; color:var(--ink-soft); }

/* ---- Felder ---- */
.kz-fields{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:16px 22px; }
.kz-row.is-dirty{ position:relative; }
.kz-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.kz-field:has(.kz-opts.is-wide){ grid-column:1 / -1; }
.kz-field-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:26px; }
.kz-field-label{ font-weight:600; font-size:14px; }
.kz-reset{ margin-left:auto; width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; opacity:.35; }
.kz-row.is-set .kz-reset, .kz-row.is-dirty .kz-reset{ opacity:1; }
.kz-reset:hover{ border-color:var(--accent); color:var(--accent); }
.kz-opts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.kz-opts.is-wide{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.kz-opt{ position:relative; display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:calc(12px * var(--rs, 1));
  background:var(--paper-raised); cursor:pointer; min-height:44px; font-size:13.5px; line-height:1.35; }
.kz-opt:hover{ border-color:var(--accent); }
.kz-opt input{ position:absolute; opacity:0; pointer-events:none; }
.kz-radio{ width:18px; height:18px; border-radius:50%; border:2px solid var(--ink-faint); flex:0 0 auto; margin-top:1px; box-sizing:border-box; }
.kz-opt:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset; }
.kz-opt input:checked + .kz-radio{ border:5px solid var(--accent); }
.kz-opt input:focus-visible + .kz-radio{ outline:2px solid var(--accent); outline-offset:2px; }
.kz-opt-text{ min-width:0; }
.kz-num{ display:inline-flex; align-items:center; min-height:38px; border:1px solid var(--line); border-radius:calc(8px * var(--rs, 1)); background:var(--paper); overflow:hidden; }
.kz-num input{ width:64px; border:0; background:transparent; text-align:right; font:inherit; font-family:var(--font-mono); font-size:13px; color:var(--ink); padding:0 4px; min-height:36px; }
.kz-num input:focus{ outline:none; }
.kz-num:focus-within{ outline:2px solid var(--accent); outline-offset:1px; }
.kz-num span{ padding:0 9px 0 2px; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.kz-row.is-set .kz-num, .kz-row.is-dirty .kz-num{ border-color:var(--accent); background:var(--paper-raised); }
.kz-px-text{ max-width:140px; }
.kz-range{ display:flex; align-items:center; gap:12px; }
.kz-range input[type=range]{ flex:1; accent-color:var(--accent); min-height:30px; }
.kz-range-out{ font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); min-width:52px; text-align:right; }
.kz-font{ display:flex; flex-direction:column; gap:8px; }
.kz-font-sample{ padding:10px 12px; border:1px dashed var(--line); border-radius:calc(8px * var(--rs, 1)); font-size:16px; color:var(--ink); background:var(--paper); }

/* ---- Farben ---- */
.kz-colors-head, .kz-color-row{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 34px; gap:10px 16px; align-items:center; }
.kz-colors-head{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:0 0 6px; }
.kz-color-row{ padding:12px 0; border-top:1px solid var(--line); }
.kz-color-row.is-dirty{ background:linear-gradient(90deg, var(--gold-soft), transparent 70%); }
.kz-color-name{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.kz-var{ font-size:11px; color:var(--ink-soft); }
.kz-color-cell{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kz-sw{ width:34px; height:34px; border-radius:calc(9px * var(--rs, 1)); border:1px solid rgba(28,34,51,.2); cursor:pointer; padding:0; flex:0 0 auto; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }
.kz-sw:hover, .kz-sw:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.kz-hex{ width:98px; min-height:34px; border:1px solid var(--line); border-radius:calc(8px * var(--rs, 1)); background:var(--paper); padding:0 9px; font-family:var(--font-mono); font-size:13px; color:var(--ink); text-transform:uppercase; }
.kz-hex::placeholder{ color:var(--ink-faint); }
.kz-hex:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.kz-hex.is-invalid{ border-color:var(--danger); }
.kz-color-cell .kz-hex:not(:placeholder-shown){ border-color:var(--accent); background:var(--paper-raised); font-weight:600; }
.kz-was{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); }
.kz-warn{ font-size:11.5px; font-weight:600; color:#8A4B00; background:#FBE9DA; padding:3px 8px; border-radius:8px; line-height:1.35; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .kz-warn{ color:#F0B27A; background:#3A2612; } }
:root[data-theme="dark"] .kz-warn{ color:#F0B27A; background:#3A2612; }
@media (max-width:640px){
  .kz-colors-head{ display:none; }
  .kz-color-row{ grid-template-columns:1fr 1fr; }
  .kz-color-name{ grid-column:1 / -1; }
  .kz-color-row .kz-reset{ grid-column:2; justify-self:end; }
}

/* ---- Logos & Symbole, Kacheln ---- */
.kz-logos td{ vertical-align:middle; }
.kz-na{ color:var(--ink-faint); font-family:var(--font-mono); }
.kz-logo-pv{ display:inline-flex; align-items:center; gap:6px; min-height:30px; }
.kz-logo-box{ display:inline-block; border-radius:5px; background:var(--paper-sunken); border:1px dashed var(--line); }
.kz-sym-box{ display:inline-block; border-radius:50%; background:var(--line); }
.kz-tiles{ display:flex; flex-direction:column; }
.kz-tile-row{ display:flex; flex-direction:column; gap:6px; padding:12px 0; border-top:1px solid var(--line); }
.kz-tile-row:first-child{ border-top:0; padding-top:0; }
.kz-tile-ctl{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.kz-tile-ctl input[type=range]{ flex:1 1 220px; accent-color:var(--accent); min-height:30px; }
.kz-perrow{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); min-width:96px; }

/* ---- Bilder ---- */
.kz-bg-slots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:16px; margin-bottom:8px; }
.kz-auth-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:14px; }
.kz-img-slot{ display:flex; flex-direction:column; gap:8px; }
.kz-drop{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:140px; padding:12px; text-align:center;
  border:2px dashed var(--line); border-radius:calc(12px * var(--rs, 1)); background:var(--paper); cursor:pointer; overflow:hidden; }
.kz-img-slot.is-compact .kz-drop{ min-height:110px; }
.kz-drop:hover, .kz-drop.is-over{ border-color:var(--accent); background:var(--accent-soft); }
.kz-drop img{ max-width:100%; max-height:120px; border-radius:8px; object-fit:cover; display:block; }
.kz-drop-empty{ color:var(--ink-faint); font-size:13px; }
.kz-drop-hint{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); }
.kz-drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.kz-pos{ display:grid; grid-template-columns:repeat(3, 34px); gap:5px; }
.kz-pos-cell{ position:relative; width:34px; height:28px; }
.kz-pos-cell input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.kz-pos-cell span[aria-hidden]{ display:block; width:100%; height:100%; border:1px solid var(--line); border-radius:6px; background:var(--paper-raised); pointer-events:none; }
.kz-pos-cell input:checked + span{ background:var(--accent); border-color:var(--accent); }
.kz-pos-cell input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.kz-readable{ margin:14px 0 0; font-size:13px; padding:8px 12px; border-radius:9px; }
.kz-readable.is-good{ background:var(--good-soft); color:var(--good); }
.kz-readable.is-warn{ background:var(--gold-soft); color:var(--gold); }

/* ---- Vorschaufenster ---- */
.kz-preview{ flex:1 1 300px; max-width:350px; position:sticky; top:84px; padding:14px !important; display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 100px); overflow:auto; }
.kz-preview.is-hidden-mode{ display:none; }
.kz-preview.is-float{ position:static; max-width:min(92vw, 420px); max-height:none; }
@media (max-width:1100px){ .kz-preview{ max-width:none; flex-basis:100%; position:static; max-height:none; } }
.kz-pv-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kz-pv-tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.kz-pv-tabs .kz-chip{ min-height:30px; font-size:12px; padding:0 10px; }
.kz-pv-row{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.kz-pv-row .kz-seg > button{ min-height:30px; padding:0 9px; }
.kz-pv-panes{ display:flex; flex-direction:column; gap:10px; }
.kz-pv-pane{ display:flex; flex-direction:column; gap:6px; color:var(--ink); }
.kz-pv-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.kz-pv-frame{ position:relative; isolation:isolate; border:1px solid var(--line); border-radius:calc(12px * var(--rs, 1)); background:var(--paper); color:var(--ink); padding:12px;
  overflow:hidden; margin:0 auto; width:100%; font-family:var(--font-base); }
.kz-pv-frame[data-dev="tablet"]{ max-width:250px; }
.kz-pv-frame[data-dev="phone"]{ max-width:180px; }
.kz-pv-bg{ position:absolute; inset:0; z-index:-1; background-image:var(--bg-page-image); background-size:var(--bg-page-size, cover); background-repeat:var(--bg-page-repeat, no-repeat);
  background-position:var(--bg-page-position, center top); filter:var(--bg-page-filter, none); transform:scale(var(--bg-page-scale, 1)); }
.kz-pv-bg::after{ content:""; position:absolute; inset:0; background:var(--paper); opacity:var(--bg-page-veil-op, 0); }
.kz-pv-content{ display:flex; flex-direction:column; gap:8px; font-size:13px; }
.kz-pv-content[hidden]{ display:none; }
.kz-pv-btns{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.kz-pv-btns .btn{ font-size:12px; padding:calc(6px * var(--ds, 1)) calc(10px * var(--ds, 1)); }
.kz-pv-link{ color:var(--accent); font-size:12.5px; }
.kz-pv-mini-tabs{ margin:0 !important; }
.kz-pv-mini-tabs .dm-tab{ padding:5px 8px; font-size:12px; }
.kz-pv-content .flash{ margin:0; padding:7px 10px; font-size:12px; }
.kz-pv-box{ padding:calc(10px * var(--ds, 1)) !important; display:flex; flex-direction:column; gap:6px; }
.kz-pv-box p{ margin:0; font-size:12.5px; }
.kz-pv-soft{ color:var(--ink-soft); }
.kz-pv-gold{ color:var(--gold); font-weight:600; }
.kz-pv-box .form-input{ min-height:32px; font-size:12px; }
.kz-pv-tiles{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
.kz-pv-tiles[hidden]{ display:none !important; }
.kz-pv-tile .thumb-wrap{ aspect-ratio:245/337; }
.kz-pv-tile .tile-body{ padding:6px 8px 8px; font-size:12px; }
.kz-pv-tile.tile-pocket{ background:var(--pocket-tile-bg); }
.kz-pv-chips{ display:flex; align-items:center; gap:4px; }
.kz-pv-mini-top{ height:18px; background:var(--paper-raised); border:1px solid var(--line); border-radius:6px; }
.kz-pv-hello{ font-size:14px; }
.kz-pv-kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.kz-pv-kpis .stat-tile{ min-height:38px; padding:0; }
.kz-pv-block{ min-height:60px; padding:0 !important; }
.kz-pv-cta{ align-self:flex-start; font-size:12px; }
.kz-pv-open{ display:flex; gap:8px; flex-wrap:wrap; }
.kz-pv-open .form-select{ flex:1 1 140px; min-height:34px; font-size:13px; width:auto; }

/* ---- flache Tabellen (Seitentexte, Boxen) ---- */
.kz-tip{ display:flex; gap:12px; align-items:flex-start; padding:12px 16px !important; margin:0 0 16px; background:var(--paper-sunken); }
.kz-tip > span{ font-size:20px; }
.kz-tip p{ margin:0; font-size:13.5px; line-height:1.55; }
.kz-flat{ padding:0 !important; overflow:hidden; }
.kz-flat .data-table{ width:100%; }
.kz-flat-foot{ padding:10px 16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); }
.kz-old{ color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--line); }
.kz-new{ margin-top:4px; color:var(--accent); font-weight:600; }
.kz-texts td{ vertical-align:top; }

/* ---- Vorlagen ---- */
.kz-presets{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap:16px; }
.kz-preset{ display:flex; flex-direction:column; gap:10px; padding:16px !important; }
.kz-preset.is-active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow); }
.kz-preset header{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kz-preset-icon{ width:38px; height:38px; border-radius:10px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:20px; }
.kz-preset-sw{ display:flex; gap:3px; align-items:center; }
.kz-preset-sw span{ flex:1; height:26px; border-radius:5px; border:1px solid rgba(28,34,51,.15); }
.kz-preset-sw i{ width:8px; }
.kz-preset-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.kz-preset.is-new{ border-style:dashed; }
.kz-form-grid{ display:grid; grid-template-columns:1fr 90px; gap:10px; align-items:end; }
.kz-form-grid label{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--ink-soft); }
.kz-form-grid .kz-check, .kz-form-grid > .btn, .kz-form-grid .kz-dialog-actions{ grid-column:1 / -1; }
.kz-check{ display:flex !important; flex-direction:row !important; gap:8px; align-items:center; font-size:13.5px !important; font-weight:500 !important; color:var(--ink) !important; margin:6px 0; }
.kz-check input{ width:18px; height:18px; accent-color:var(--accent); }

/* ---- Für Benutzer, Verlauf ---- */
.kz-two{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:18px; align-items:start; }
.kz-two.is-wide-left{ grid-template-columns:minmax(0, 1.7fr) minmax(min(100%, 320px), 1fr); }
@media (max-width:980px){ .kz-two.is-wide-left{ grid-template-columns:1fr; } }
.kz-two > .pc-box, .kz-side > .pc-box{ margin:0; }
.kz-side{ display:flex; flex-direction:column; gap:18px; }
.kz-checks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:8px; margin:0 0 14px; }
.kz-check-card{ display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:calc(12px * var(--rs, 1)); cursor:pointer; font-size:13.5px; min-height:44px; }
.kz-check-card:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.kz-check-card input{ width:18px; height:18px; accent-color:var(--accent); }
.kz-userlist{ list-style:none; margin:0; padding:0; }
.kz-userlist li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
.kz-userlist li:first-child{ border-top:0; }
.kz-userlist li form{ margin-left:auto; }
.kz-versions{ display:flex; flex-direction:column; }
.kz-version{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line); }
.kz-version:first-child{ border-top:0; padding-top:0; }
.kz-version-no{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); min-width:42px; padding-top:2px; }
.kz-version-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.kz-version-title{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.kz-version-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:3px; }
.kz-version-changes summary{ cursor:pointer; font-size:12.5px; color:var(--accent); margin-top:3px; }
.kz-version-changes ul{ margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-soft); }
.kz-version-changes code{ font-size:11.5px; }
.kz-pager{ display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.kz-row-btns{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.kz-import{ margin:0; }
.kz-import-preview{ margin-top:14px; padding:12px; border:1px solid var(--accent); border-radius:10px; background:var(--accent-soft); font-size:13px; }
.kz-import-preview ul{ margin:6px 0 10px; padding-left:18px; }
.kz-resets{ list-style:none; margin:0 0 12px; padding:0; }
.kz-resets li{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid var(--line); font-size:13.5px; }
.kz-resets li:first-child{ border-top:0; }
.kz-own-reset{ margin-top:18px; }

/* ---- Fenster: Aufbau, Dialoge ---- */
.lightbox-panel.kz-dialog{ width:min(92vw, 560px); }
.lightbox-panel.kz-aufbau{ width:min(94vw, 760px); max-width:min(94vw, 760px); }
.kz-dialog-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; }
.kz-dialog-more{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.kz-a-sec{ display:flex; flex-direction:column; gap:10px; padding:14px 0; border-top:1px solid var(--line); }
.kz-a-sec:first-of-type{ border-top:0; padding-top:0; }
.kz-a-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.kz-a-line{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; }
.kz-a-line > span:first-child{ font-size:14px; font-weight:500; }
.kz-a-line small{ display:block; font-size:12px; color:var(--ink-soft); font-weight:400; }
.kz-a-areas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap:8px; }
.kz-a-areas label{ display:flex; flex-direction:column; gap:4px; font-size:13px; }
.kz-a-areas .form-select{ min-height:34px; font-size:13px; }
.kz-taborder{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.kz-taborder li{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:var(--paper-raised); }
.kz-taborder li.is-drag{ opacity:.5; }
.kz-grip{ cursor:grab; color:var(--ink-faint); }
.kz-taborder-name{ flex:1; font-size:14px; }
.kz-switch{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-soft); }
.kz-switch input{ accent-color:var(--danger); }

/* ---- Farbwähler ---- */
.lightbox-panel.kz-picker{ width:min(94vw, 480px); max-width:min(94vw, 480px); display:flex; flex-direction:column; gap:12px; }
.kz-picker-top{ display:flex; gap:12px; }
.kz-sv{ position:relative; flex:1; height:160px; border-radius:10px; cursor:crosshair; touch-action:none; }
.kz-sv:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.kz-sv-knob{ position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45); pointer-events:none; }
.kz-picker-side{ width:132px; display:flex; flex-direction:column; gap:6px; }
.kz-compare{ display:flex; height:54px; border-radius:9px; overflow:hidden; border:1px solid var(--line); }
.kz-compare span{ flex:1; }
.kz-compare-l{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft); }
.kz-hue{ width:100%; height:16px; -webkit-appearance:none; appearance:none; border-radius:99px; background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); outline:none; }
.kz-hue::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.4); cursor:pointer; }
.kz-hue::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 1px rgba(0,0,0,.4); cursor:pointer; }
.kz-picker-fields{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.kz-picker-fields label{ display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700; color:var(--ink-soft); }
.kz-picker-fields .kz-hex{ width:100%; text-transform:none; }
.kz-contrast{ display:flex; flex-wrap:wrap; gap:6px; }
.kz-cbadge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 9px; border-radius:8px; }
.kz-cbadge b{ padding:0 6px; border-radius:4px; border:1px solid rgba(0,0,0,.1); }
.kz-cbadge.is-good{ background:var(--good-soft); color:var(--good); }
.kz-cbadge.is-mid{ background:var(--gold-soft); color:var(--gold); }
.kz-cbadge.is-bad{ background:var(--danger-soft); color:var(--danger); }
.kz-pal-tabs{ display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--line); }
.kz-pal-tabs button{ border:0; background:transparent; padding:7px 9px; font:inherit; font-size:12.5px; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; }
.kz-pal-tabs button.is-on{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.kz-palette{ display:grid; grid-template-columns:repeat(auto-fill, minmax(70px, 1fr)); gap:8px; max-height:190px; overflow:auto; }
.kz-pal{ display:flex; flex-direction:column; align-items:center; gap:2px; border:0; background:transparent; cursor:pointer; padding:2px; border-radius:8px; }
.kz-pal:hover, .kz-pal:focus-visible{ background:var(--paper-sunken); outline:none; }
.kz-pal span:first-child{ width:100%; height:28px; border-radius:6px; border:1px solid rgba(28,34,51,.18); }
.kz-pal span:nth-child(2){ font-family:var(--font-mono); font-size:11px; color:var(--ink); }
.kz-pal small{ font-size:10px; color:var(--ink-soft); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- ⚙️ auf den Seiten, Vorschau-Hinweisband ---- */
.kz-gear-btn span[aria-hidden]{ font-size:15px; }
.lightbox-panel.kz-gear-panel{ width:min(94vw, 720px); max-width:min(94vw, 720px); }
.kz-gear-sec{ margin:0 0 16px; }
.kz-gear-sec h4{ margin:0 0 10px; font-size:14.5px; }
.kz-gear-panel .kz-fields{ grid-template-columns:1fr; }
.kz-gear-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.kz-gear-status{ margin:0; font-size:13px; color:var(--ink-soft); min-height:1em; }
.kz-preview-banner{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:400; display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  max-width:calc(100vw - 32px); padding:10px 14px; border-radius:12px; background:var(--ink); color:var(--paper); box-shadow:0 12px 30px -10px rgba(0,0,0,.5); font-size:13.5px; }
.kz-preview-banner[hidden]{ display:none; }
.kz-preview-banner .btn{ background:var(--paper-raised); color:var(--ink); }
@media (max-width:760px){ .kz-preview-banner{ bottom:84px; } }
[data-kz-setting-only][hidden], .kz-pv-pane[hidden], .kz-preview[hidden]{ display:none !important; }
.kz-mark[hidden], .kz-warn[hidden], .kz-sec-badge[hidden], .kz-was[hidden], .kz-readable[hidden]{ display:none !important; }
.kz-pv-head strong{ white-space:nowrap; }
.kz .btn:disabled, .kz-panel .btn:disabled, .kz-secnav .btn:disabled{ opacity:.4; cursor:default; pointer-events:none; }
.kz-panel .pc-box-head .btn{ white-space:nowrap; }
.kz-secgroup{ display:flex; flex-direction:column; gap:18px; }
.kz-secgroup > .box-order-item > .kz-sec{ margin:0; }