/* Konsole ventary Zentrale, Stufe 1. Grundlage: tokens.css aus ventary-ci (Kopie unter /konsole/tokens.css).
   Klassen wie im abgenommenen Mockup (zentrale/mockup-konsole.html). */
@import url("tokens.css");

/* Schriften eingebettet (ventary-ci/fonts): die Konsole lädt nichts von außen und
   sieht im Location-Netz ohne Internet gleich aus. DM Mono liegt nicht in
   ventary-ci; dafür greift die Ersatzschrift aus tokens.css (monospace). */
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Archivo-Black.ttf") format("truetype")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700 800;font-display:swap;src:url("fonts/Archivo-Bold.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Inter-Regular.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/Inter-Medium.ttf") format("truetype")}

  /* Abgeleitete Flächen für die Konsole, ausschließlich aus Tokens */
  :root{--bg:var(--v-petrol);--surface:var(--v-surf-raised);--surface2:var(--v-surf-sunken);--border:var(--v-b-default);
    --text:var(--v-t-primary);--dim:var(--v-t-muted);--silver:var(--v-t-secondary);--mono:var(--v-f-mono)}
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{font-family:var(--v-f-body),system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;font-size:14.5px}
  a{color:var(--v-t-secondary)}
  button,input,select,textarea{font:inherit;color:inherit}
  .topbar{height:5px;background:linear-gradient(90deg,var(--v-petrol-light),var(--v-gold))}
  .hinweisleiste{background:var(--v-surf-deeper);color:var(--v-gold);border-bottom:1px solid var(--v-b-gold);font-size:12px;letter-spacing:.6px;text-transform:uppercase;text-align:center;padding:5px 10px;font-weight:600}
  .mock b{color:var(--v-t-primary)}

  /* Rahmen */
  .app{display:none;min-height:calc(100vh - 32px)}
  .app.aktiv{display:grid;grid-template-columns:230px 1fr}
  nav.seite{background:var(--surface);border-right:1px solid var(--border);padding:18px 14px;display:flex;flex-direction:column;gap:4px}
  .marke{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;border-bottom:1px solid var(--border);margin-bottom:12px}
  .marke .logo{height:44px;width:auto;border-radius:var(--v-r-sm);display:block}
  .marke b{font-family:var(--v-f-head);font-weight:400;font-size:17px;letter-spacing:-.3px}
  .marke small{display:block;color:var(--silver);font-size:12.5px;font-weight:600;font-weight:400;letter-spacing:.4px;text-transform:uppercase}
  nav.seite a.eintrag{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--dim);text-decoration:none;font-weight:500;border:1px solid transparent}
  nav.seite a.eintrag:hover{background:var(--surface2);color:var(--v-t-primary)}
  nav.seite a.eintrag.aktiv{background:var(--v-surf-sunken);border-color:var(--v-petrol-light);color:var(--v-t-primary)}
  nav.seite a.eintrag .n{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--silver)}
  nav.seite .abschnitt{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--silver);padding:14px 12px 4px}
  nav.seite .fuss{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--border);font-size:12px;color:var(--silver);line-height:1.45}
  nav.seite .fuss b{display:block;color:var(--dim);font-weight:600}
  main{padding:22px 30px 60px;min-width:0}
  .kopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 22px;margin-bottom:20px}
  .kopf h1{font-family:var(--v-f-head);font-size:26px;font-weight:800;letter-spacing:-.4px;margin:0;line-height:1.1}
  .kopf .sub{color:var(--dim);font-size:14px;margin-top:4px}
  .kopf .rechts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
  .ansicht{display:none}.ansicht.aktiv{display:block}

  /* Bausteine */
  .card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin:0 0 16px}
  .card h3{font-size:15px;margin:0 0 12px;font-weight:600;color:var(--v-t-secondary)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
  .kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
  .kpi .l{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--silver)}
  .kpi .v{font-family:var(--v-f-head);font-size:24px;font-weight:400;margin-top:2px}
  .kpi .v small{font-size:13px;color:var(--dim);font-weight:500;font-family:var(--v-f-body)}
  .kpi.gruen .v{color:var(--v-sys-on)}.kpi.amber .v{color:var(--v-sys-warn)}.kpi.rot .v{color:var(--v-sys-off)}
  .tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
  table{border-collapse:collapse;width:100%;min-width:640px}
  th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
  tr:last-child td{border-bottom:0}
  th{background:var(--surface2);color:var(--silver);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
  tbody tr.klick{cursor:pointer}tbody tr.klick:hover{background:var(--v-surf-raised)}
  td.k{font-family:var(--mono);color:var(--v-gold);font-weight:500;white-space:nowrap}
  td.mono{font-family:var(--mono);font-size:13px;color:var(--dim);white-space:nowrap}
  .pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);color:var(--dim);border:1px solid var(--border);font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:6px;letter-spacing:.3px;white-space:nowrap}
  .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--silver)}
  .pill.gruen{color:var(--v-t-primary);border-color:var(--v-sys-on)}.pill.gruen .dot{background:var(--v-sys-on);box-shadow:0 0 0 3px rgba(46,204,143,.18)}
  .pill.amber{color:var(--v-t-primary);border-color:var(--v-sys-warn)}.pill.amber .dot{background:var(--v-sys-warn)}
  .pill.rot{color:var(--v-t-primary);border-color:var(--v-sys-off)}.pill.rot .dot{background:var(--v-sys-off)}
  .pill.gold{background:var(--v-gold);color:var(--v-t-on-gold);border-color:var(--v-gold)}
  .pill.teal{background:var(--v-surf-sunken);color:var(--v-t-secondary);border-color:var(--v-petrol-light)}
  .knopf{display:inline-flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:8px 14px;font-weight:500;cursor:pointer;font-size:13.5px}
  .knopf:hover{border-color:var(--v-petrol-light);background:var(--v-surf-sunken)}
  .knopf.primaer{background:var(--v-gold);color:var(--v-t-on-gold);border-color:var(--v-gold);font-weight:700}.knopf.primaer:hover{filter:brightness(1.08)}
  .knopf.gefahr{border-color:var(--v-sys-off);color:var(--v-t-primary)}.knopf.gefahr:hover{background:var(--v-surf-sunken)}
  .knopf.klein{padding:5px 10px;font-size:12.5px}
  .leiste{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
  .leiste .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}
  label.feld{display:block;font-size:12px;color:var(--silver);text-transform:uppercase;letter-spacing:.5px;margin:0 0 5px}
  input.feld,select.feld,textarea.feld{width:100%;background:var(--v-surf-sunken);border:1px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--text);outline:none}
  input.feld:focus,select.feld:focus,textarea.feld:focus{border-color:var(--v-petrol-light)}
  .form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 14px}
  .form .breit{grid-column:1/-1}
  .hinweis{display:flex;gap:10px;align-items:flex-start;background:var(--v-surf-sunken);border:1px solid var(--v-sys-warn);color:var(--v-t-primary);border-radius:10px;padding:10px 14px;font-size:13px;margin:12px 0}
  .hinweis.info{border-color:var(--v-petrol-light)}
  .hinweis.rot{border-color:var(--v-sys-off)}
  .verlauf{list-style:none;margin:0;padding:0}
  .verlauf li{display:grid;grid-template-columns:130px 96px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px}
  .verlauf li:last-child{border-bottom:0}
  .verlauf .z{font-family:var(--mono);color:var(--silver);font-size:12.5px;white-space:nowrap}
  .verlauf .art{font-family:var(--mono);font-size:12px;color:var(--v-gold)}
  .verlauf li.warn .art{color:var(--v-sys-warn)}.verlauf li.fehler .art{color:var(--v-sys-off)}
  .adresse{color:var(--dim);font-size:13.5px}
  .kette{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--dim);font-size:13px}
  .kette b{color:var(--text);font-weight:600}
  .kette .mono{font-family:var(--mono);font-size:12.5px}
  .reiter{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:0 0 16px;flex-wrap:wrap}
  .reiter a{padding:9px 14px;color:var(--dim);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500}
  .reiter a.aktiv{color:var(--v-t-primary);border-bottom-color:var(--v-gold)}
  .code{font-family:var(--mono);font-size:34px;letter-spacing:6px;font-weight:500;color:var(--v-gold);background:var(--v-surf-deeper);border:1px solid var(--border);border-radius:12px;padding:16px 20px;text-align:center;margin:12px 0}
  .oeff{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:12px}
  .oeff div{background:var(--v-surf-sunken);border:1px solid var(--border);border-radius:8px;padding:6px 8px;text-align:center;color:var(--dim)}
  .oeff div b{display:block;color:var(--silver);font-size:11px;text-transform:uppercase}
  .oeff div.heute{border-color:var(--v-gold);color:var(--text)}
  .oeff div.zu{color:var(--silver);opacity:.7}

  /* B-Style LED Signal (ventary-ci): 2px Streifen oben, Farbe nach Rolle */
  .card,.kpi,.tablewrap,dialog{border-top:2px solid var(--v-petrol-light)}
  .kpi.gruen{border-top-color:var(--v-sys-on)}.kpi.amber{border-top-color:var(--v-sys-warn)}.kpi.rot{border-top-color:var(--v-sys-off)}
  .knopf{border-top:2px solid var(--v-petrol-light)}.knopf.primaer{border-top-color:var(--v-gold);box-shadow:0 -1px 6px rgba(198,159,101,.35)}
  .knopf.gefahr{border-top-color:var(--v-sys-off)}
  nav.seite a.eintrag.aktiv{border-top:2px solid var(--v-gold)}
  .anmeldung .karte{border-top:2px solid var(--v-gold)}

  /* Dialog */
  dialog{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:0;width:min(520px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.6)}
  dialog::backdrop{background:rgba(4,10,12,.7)}
  dialog .dk{padding:16px 22px;border-bottom:1px solid var(--border);font-weight:700;font-family:var(--v-f-head);font-size:17px}
  dialog .di{padding:18px 22px}
  dialog .df{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

  /* Anmeldung */
  .anmeldung{display:none;min-height:calc(100vh - 32px);align-items:center;justify-content:center;padding:30px;background:radial-gradient(1200px 600px at 20% -10%,var(--v-surf-raised) 0,transparent 60%),var(--bg)}
  .anmeldung.aktiv{display:flex}
  .anmeldung .karte{width:min(420px,100%);background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px 32px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
  .anmeldung h1{font-family:var(--v-f-head);font-size:28px;margin:14px 0 2px;letter-spacing:-.4px}
  .anmeldung h1 .g{color:var(--v-gold)}
  .anmeldung .sub{color:var(--dim);margin:0 0 22px}
  .anmeldung .fuss{margin-top:22px;font-size:12px;color:var(--silver);text-align:center}

  @media(max-width:900px){.app.aktiv{grid-template-columns:1fr}nav.seite{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border)}nav.seite .marke{width:100%}nav.seite .fuss,nav.seite .abschnitt{display:none}.grid2,.grid3{grid-template-columns:1fr}.verlauf li{grid-template-columns:1fr;gap:2px}}

/* Stufe 1: Sichtbarkeit über das hidden-Attribut statt der Mockup-Klasse aktiv */
.app:not([hidden]){display:grid;grid-template-columns:230px 1fr}
.anmeldung:not([hidden]){display:flex}
@media(max-width:900px){.app:not([hidden]){grid-template-columns:1fr}}
.oeff-gelb{color:var(--v-sys-warn)}.oeff-grün{color:var(--v-sys-on)}.oeff-rot{color:var(--v-sys-off)}
.reiter a.spaeter{opacity:.45;cursor:default}
.hinweis[hidden],.knopf[hidden],[data-nur][hidden]{display:none}

/* Stufe 2: Reiter der Location-Seite */
.reiterinhalt[hidden],.tablewrap[hidden],.karten[hidden]{display:none}
.reiter a .n{font-family:var(--mono);font-size:11px;color:var(--silver);margin-left:4px}
.umschalter{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--surface2)}
.umschalter a{padding:6px 12px;color:var(--dim);text-decoration:none;font-size:13px;font-weight:500}
.umschalter a.aktiv{background:var(--v-gold);color:var(--v-t-on-gold);font-weight:700}
.foto{background:var(--v-surf-sunken);border:1px solid var(--border);border-radius:12px;padding:10px}
.logo-mini{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:var(--v-surf-deeper);border:1px solid var(--border);border-top:2px solid var(--v-petrol-light);color:var(--v-petrol-light);font-family:var(--v-f-head);font-size:13px;object-fit:contain}
td .art{font-family:var(--mono);font-size:12px;color:var(--v-gold)}
tr.warn td .art{color:var(--v-sys-warn)}tr.fehler td .art{color:var(--v-sys-off)}
a.knopf{text-decoration:none}
.legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--dim);align-items:center;margin-top:8px}
.legende i.led{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;box-shadow:0 0 6px currentColor}

/* Gerätekarten nach ventary-ci DEVICE_CARD.md (B-Style LED). Präfix gkarte-, weil .card
   in der Konsole schon die Kachel ist; Aufbau, Maße und Zustände wie im Showcase. */
.karten{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 14px}
.gkarte{--dev:var(--v-dev-display);width:240px;min-height:172px;position:relative;cursor:pointer;display:flex;flex-direction:column;user-select:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.18));border:1px solid rgba(114,167,160,.12);border-radius:var(--v-r-md);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 4px 14px -3px rgba(0,0,0,.5);padding-top:3px;transition:transform var(--v-t-slow) var(--v-ease),box-shadow var(--v-t-slow),filter var(--v-t-base)}
.gkarte::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--dev);z-index:2;
  box-shadow:0 0 6px color-mix(in srgb,var(--dev) 80%,transparent),0 0 14px color-mix(in srgb,var(--dev) 45%,transparent),0 1px 0 rgba(255,255,255,.25) inset}
.gkarte:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--dev) 28%,transparent)}
.gkarte:hover::before{box-shadow:0 0 10px color-mix(in srgb,var(--dev) 90%,transparent),0 0 22px color-mix(in srgb,var(--dev) 60%,transparent),0 1px 0 rgba(255,255,255,.35) inset}
.gkarte--display{--dev:var(--v-dev-display)}.gkarte--receiver{--dev:var(--v-dev-receiver)}.gkarte--audio{--dev:var(--v-dev-audio)}.gkarte--wall{--dev:var(--v-dev-wall)}
.gkarte-hd{padding:10px 12px 4px;display:flex;align-items:center;gap:8px;height:26px;flex-shrink:0}
.gkarte-title{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--dev) 60%,white 30%);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gkarte-typ{font-family:var(--mono);font-size:9px;color:var(--v-t-dim);letter-spacing:.08em}
.gkarte-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--v-sys-on);box-shadow:0 0 6px var(--v-sys-on)}
/* Mehrbild: je Feld ein Chip. Ein Feld ohne Bild wird nicht verschwiegen,
   sondern durchgestrichen und in der Warnfarbe gezeigt. */
.gfelder{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px}
.gfeld{font-family:var(--mono);font-size:11px;line-height:1.6;padding:1px 6px;border:1px solid var(--border);border-radius:7px;background:var(--v-surf-sunken);color:var(--v-t-primary)}
.gfeld.aus{border-color:var(--v-sys-warn);color:var(--v-sys-warn);text-decoration:line-through}
.gkarte-dot.off{background:var(--v-t-dim);box-shadow:none}.gkarte-dot.warn{background:var(--v-sys-warn);box-shadow:0 0 6px var(--v-sys-warn)}.gkarte-dot.err{background:var(--v-sys-off);box-shadow:0 0 6px var(--v-sys-off)}
.gkarte-bd{flex:1;display:flex;flex-direction:column;padding:4px 12px 6px;align-items:center;min-height:0}
.gkarte-ch{font-family:var(--v-f-sub);font-weight:800;color:#fff;font-size:17px;line-height:1.1;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.4);margin-top:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:stretch}
.gkarte-pn{font-family:var(--mono);font-size:12px;font-weight:600;color:color-mix(in srgb,var(--dev) 60%,white 20%);letter-spacing:.04em;margin-top:4px;text-align:center;min-height:14px}
.gkarte-epg{margin-top:8px;padding-top:7px;border-top:1px solid rgba(114,167,160,.1);font-size:10px;color:var(--v-t-muted);line-height:1.35;text-align:center;align-self:stretch;letter-spacing:.01em}
.gkarte-epg .epg-time{font-family:var(--mono);color:var(--v-petrol-light);font-weight:500}
.gkarte-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px 9px;border-top:1px solid rgba(114,167,160,.1)}
.gkarte-fuss .knopf{padding:3px 8px;font-size:11.5px;border-top-width:1px}
.gkarte.is-offline{filter:saturate(.2) brightness(.7);opacity:.55}
.gkarte.is-offline .gkarte-bd::after{content:"OFFLINE";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.2em;color:var(--v-sys-off);background:rgba(0,0,0,.7);padding:4px 12px;border-radius:3px;border:1px solid rgba(224,82,82,.25);z-index:5}
.gkarte.is-powered-off::before{opacity:.35;box-shadow:0 0 3px color-mix(in srgb,var(--dev) 50%,transparent),0 1px 0 rgba(255,255,255,.1) inset}
.gkarte.is-powered-off .gkarte-title{color:var(--v-t-muted)}
.gkarte.is-powered-off .gkarte-bd{justify-content:center}
.gkarte-off{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--v-t-muted)}
.gkarte-off-icon{font-size:22px;color:var(--v-t-dim)}.gkarte-off-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;font-weight:600}.gkarte-off-sub{font-size:10px}

/* Stufe 2: Ausrollen */
.oeff-pille{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:6px;border:1px solid;background:var(--surface2);white-space:nowrap;color:var(--dim)}
.oeff-pille::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.oeff-pille.gruen{color:var(--v-sys-on)}.oeff-pille.gelb{color:var(--v-sys-warn)}.oeff-pille.rot{color:var(--v-sys-off)}
i.farbe{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
i.farbe.gruen{background:var(--v-sys-on)}i.farbe.gelb{background:var(--v-sys-warn)}i.farbe.rot{background:var(--v-sys-off)}
.feld.klein{padding:4px 8px;width:auto;font-size:13px}
tr.klapp>td{background:var(--v-surf-sunken)}
#tab-ausrollen td.mono{font-size:12px}
#tab-ausrollen th,#tab-ausrollen td,#tab-flotte th,#tab-flotte td{padding:9px 10px}
#tab-ausrollen .pfeil{display:inline-block;width:12px;color:var(--silver)}
#tab-flotte input[type=checkbox],#flotte-alle{width:16px;height:16px;accent-color:var(--v-gold)}
#flotte[hidden],#areiter-standorte[hidden]{display:none}

/* Stufe 2: Stammdaten, Lizenz-Module */
.module{display:grid;gap:8px;margin:6px 0 4px}
.modul{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;background:var(--v-surf-sunken);border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer}
.modul input{display:none}
.modul .schalter{width:40px;height:22px;border-radius:11px;background:var(--v-surf-deeper);border:1px solid var(--border);position:relative;transition:background var(--v-t-base)}
.modul .schalter::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--silver);transition:left var(--v-t-base)}
.modul input:checked+.schalter{background:var(--v-gold);border-color:var(--v-gold)}
.modul input:checked+.schalter::after{left:20px;background:var(--v-t-on-gold)}
.modul input:disabled+.schalter{opacity:.45}
.modul b{display:block;font-size:13.5px}.modul small{color:var(--dim);font-size:12.5px}
.rollen{display:grid;gap:8px;font-size:13px;color:var(--dim)}
.rollen>div{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:start}
.oeff-edit{display:grid;gap:6px}
.oeff-edit>div{display:grid;grid-template-columns:34px 1fr 1fr 56px 62px;gap:8px;align-items:center;font-size:13px}
.oeff-edit>div b{color:var(--silver);font-size:11px;text-transform:uppercase}
.oeff-edit input.feld{padding:6px 10px;font-family:var(--mono)}
.oeff-edit label{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:4px;white-space:nowrap}
.card[hidden],.knopf[hidden],.nur-verwalten[hidden],#kennwort-alt-feld[hidden]{display:none}

/* Stufe 2: Programme, Logos */
.preiterinhalt[hidden]{display:none}
.logo-mini.gross{width:72px;height:72px;font-size:24px;border-radius:12px}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.logo-kachel{background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--v-petrol-light);border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:13px}
.logo-kachel b{font-family:var(--mono);font-weight:500;font-size:12.5px;word-break:break-all}
.logo-kachel .mono{font-family:var(--mono);font-size:11.5px;color:var(--silver)}
.ablage{display:block;border:1px dashed var(--v-b-strong);border-radius:12px;padding:22px;text-align:center;color:var(--dim);background:var(--v-surf-sunken);cursor:pointer}
.ablage.aktiv{border-color:var(--v-gold);color:var(--text)}
img.logo-mini{display:inline-block;padding:3px;object-fit:contain}

/* Stufe 2: Sicherungen, Verlauf */
ol.schritte{margin:0;padding-left:20px;color:var(--dim);font-size:13.5px}ol.schritte li{margin:0 0 6px}ol.schritte b{color:var(--text)}