/* ==================================================================
   Lizenzserver – Ergänzungen zum z2j.de-Stil (z2j.css bleibt unverändert)
   ================================================================== */

:root{
  --ok: #2e8e36;           /* Grün aus dem Ehlert.IT-Logo */
  --ok-soft: #eef7ee;
  --ok-line: #b9dcbb;
  --warn: #b26a00;
  --warn-soft: #fff6e8;
  --warn-line: #f1d19c;
}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.stack{display:flex; flex-direction:column; gap:16px;}
.stack > .row2, .stack > .row{margin-bottom:0;}

/* Kopf: Logo + Untertitel */
.brand-logo{width:38px; height:38px;}
.brand-sub{font-weight:400; color: var(--on-bg-muted); margin-left:4px;}
.topnav-form{display:flex; margin:0 0 0 12px;}
.topnav .topnav-out{
  font: inherit; font-size:15px; background:none; border:0; cursor:pointer;
  color: var(--on-bg-muted); padding: 20px 10px 18px; border-bottom:2px solid transparent;
}
.topnav .topnav-out:hover{color:#fff;}

/* Meldungen */
.notice + .notice{margin-top:10px;}
.notice-top{margin-bottom:18px;}
.notice-ok{border-color: var(--ok-line); border-left-color: var(--ok); background: var(--ok-soft);}
.notice-warn{border-color: var(--warn-line); border-left-color: var(--warn); background: var(--warn-soft);}

/* Formularfelder */
.field label{margin-bottom:6px;}
.field-help{margin-top:6px; font-size:13px; color: var(--muted);}
.input-mono{font-family: var(--mono); letter-spacing:.02em;}
.input-gruppe{display:flex; gap:8px;}
.input-gruppe .input{flex:1; min-width:0;}
.input:user-invalid:not(:focus){border-color: var(--danger-line);}
.teil-titel{font-weight:650; font-size:14px; color: var(--ink-2); margin: 4px 0 10px; padding:0;}
.btn-sm{padding:6px 12px; font-size:14px;}
.btn-gross{padding:13px 24px; font-size:16px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.btn.is-busy{pointer-events:none; opacity:.75;}

/* Auswahlkarten (Radio) */
.wahl{display:grid; grid-template-columns:1fr 1fr; gap:12px; border:0; padding:0; margin:0;}
.wahl legend{grid-column:1 / -1;}
@media (max-width:700px){ .wahl{grid-template-columns:1fr;} }
.wahl-karte{
  position:relative; display:flex; flex-direction:column; gap:4px; margin:0;
  padding:14px 16px 14px 44px; border:1px solid var(--line-strong); border-radius: var(--radius-s);
  cursor:pointer; font-weight:400; background:#fff; transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.wahl-karte:hover{border-color:#b6bcc6;}
.wahl-karte input{position:absolute; left:16px; top:17px; accent-color: var(--accent); width:16px; height:16px; margin:0;}
.wahl-karte:has(input:checked){border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset;}
.wahl-karte:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px;}
.wahl-titel{font-weight:650; color: var(--ink);}
.wahl-text{font-size:14px; color: var(--muted);}

/* Datenbankschritt: nur den gewählten Teil zeigen (ohne JavaScript per :has) */
.modus-teil{display:flex; flex-direction:column; gap:16px; padding-top:4px;}
[data-dbform]:has(input[name="modus"][value="anlegen"]:checked) .modus-teil[data-modus="vorhanden"],
[data-dbform]:has(input[name="modus"][value="vorhanden"]:checked) .modus-teil[data-modus="anlegen"]{display:none;}

/* ------------------------------------------------------------------
   Installer
   ------------------------------------------------------------------ */
.install{max-width:900px; margin:0 auto;}
.install-head{margin: 0 0 26px;}
.eyebrow-light{margin:0 0 6px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,.78);}
.install-title{font-size: clamp(30px, 4.4vw, 44px); line-height:1.1; letter-spacing:-.025em; margin:0 0 10px; color:#fff; font-weight:700; text-shadow: 0 1px 12px rgba(0,0,0,.18);}
.install-lead{margin:0; color: var(--on-bg-muted); font-size:17px; max-width:620px;}
.install-card .h1{font-size:24px;}
.install-steps{padding-top:16px; padding-bottom:16px;}

.stepper{display:flex; gap:6px; list-style:none; margin:0; padding:0; width:100%; counter-reset:none;}
.stepper li{flex:1 1 auto; display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; color: var(--muted); position:relative;}
.stepper li:not(:last-child)::after{content:""; flex:1; height:2px; background: var(--line); margin: 0 4px; min-width:8px;}
.stepper li.is-done:not(:last-child)::after{background: var(--ok);}
.stepper-nr{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:13px; border:2px solid var(--line-strong); color: var(--muted); background:#fff;
}
.stepper-bez{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.stepper li.is-current{color: var(--ink); font-weight:650;}
.stepper li.is-current .stepper-bez{overflow:visible;}
.stepper li.is-current .stepper-nr{border-color: var(--accent); background: var(--accent); color:#fff;}
.stepper li.is-done .stepper-nr{border-color: var(--ok); background: var(--ok); color:#fff;}
.stepper li.is-current{min-width:max-content;}
@media (max-width:860px){
  .stepper li:not(.is-current) .stepper-bez{display:none;}
}
@media (max-width:520px){
  .stepper{gap:4px;}
  .stepper li{flex:0 0 auto;}
  .stepper li.is-current{flex:1 0 auto;}
  .stepper li:not(:last-child)::after{display:none;}
  .stepper-nr{width:24px; height:24px;}
}

/* Systemprüfung */
.checklist{list-style:none; margin:0 0 14px; padding:0; border:1px solid var(--line); border-radius: var(--radius-s); overflow:hidden;}
.checklist li{display:grid; grid-template-columns: 26px minmax(160px, 1fr) 1.4fr; gap:12px; align-items:center; padding:11px 14px; border-top:1px solid var(--line); font-size:14px;}
.checklist li:first-child{border-top:0;}
.check-titel{font-weight:600; color: var(--ink);}
.check-text{color: var(--muted);}
@media (max-width:700px){ .checklist li{grid-template-columns:26px 1fr;} .check-text{grid-column:2;} }
.check-icon{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; color:#fff;}
.check-ok .check-icon{background: var(--ok);}
.check-ok .check-icon::before{content:"✓";}
.check-warn .check-icon{background: var(--warn);}
.check-warn .check-icon::before{content:"!";}
.check-warn{background: var(--warn-soft);}
.check-fehler .check-icon{background: var(--danger);}
.check-fehler .check-icon::before{content:"✕";}
.check-fehler{background: var(--danger-soft);}
.check-fehler .check-text{color: var(--danger);}
.check-wait .check-icon{border:2px solid var(--line-strong); border-top-color: var(--accent); animation: dreh 0.9s linear infinite;}
@keyframes dreh{to{transform:rotate(360deg);}}

/* Passwortregeln */
.pw-regeln{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 8px;}
.pw-regeln li{font-size:13px; padding:3px 10px 3px 24px; border-radius:999px; background: var(--paper-2); border:1px solid var(--line); color: var(--muted); position:relative;}
.pw-regeln li::before{content:"○"; position:absolute; left:9px; top:2px;}
.pw-regeln li.is-ok{background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok);}
.pw-regeln li.is-ok::before{content:"✓";}

/* Zwei-Faktor */
.zweifaktor{display:grid; grid-template-columns: auto 1fr; gap:28px; align-items:start;}
@media (max-width:700px){ .zweifaktor{grid-template-columns:1fr;} .qr-box{justify-self:center;} }
.qr-box{padding:10px; border:1px solid var(--line); border-radius: var(--radius); background:#fff; line-height:0; box-shadow: 0 8px 24px -14px rgba(0,0,0,.35);}
.qr-box svg{display:block; width:232px; height:232px;}
.code-zeile{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px;}
.code-gross{font-size:16px; padding:8px 12px; letter-spacing:.08em;}
.code-umbruch{word-break:break-all;}
[data-verdeckt]{filter: blur(5px); user-select:none;}
.input-code{max-width:220px; font-family: var(--mono); font-size:24px; letter-spacing:.3em; text-align:center;}

/* Abschluss */
.erfolg{display:flex; gap:18px; align-items:center; margin-bottom:22px;}
.erfolg .h1{margin-bottom:4px;}
.erfolg .p{margin:0;}
.erfolg-icon{flex-shrink:0; width:56px; height:56px; border-radius:50%; background: var(--ok); color:#fff; display:grid; place-items:center; font-size:28px; font-weight:800; box-shadow: 0 0 0 6px var(--ok-soft);}
.ergebnis-raster{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:800px){ .ergebnis-raster{grid-template-columns:1fr;} }
.ergebnis-teil{border:1px solid var(--line); border-radius: var(--radius-s); padding:16px 18px; display:flex; flex-direction:column; gap:10px; min-width:0;}
.ergebnis-teil h3{margin:0; font-size:16px; letter-spacing:-.01em;}
.ergebnis-teil .muted{margin:0;}
.ergebnis-teil .code{word-break:break-all;}
.codes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.codes li{font-family: var(--mono); font-size:14px; text-align:center; padding:7px 8px; background: var(--paper-2); border:1px solid var(--line); border-radius:4px; letter-spacing:.06em;}
.schluessel{font-family: var(--mono); font-size:12px; line-height:1.5; word-break:break-all; padding:10px 12px; background: var(--paper-2); border:1px solid var(--line); border-radius:4px;}
.liste{margin:0; padding-left:18px; font-size:14px; display:flex; flex-direction:column; gap:6px;}

/* ------------------------------------------------------------------
   Anmeldung
   ------------------------------------------------------------------ */
.anmelden{max-width:440px; margin: 2vh auto 0;}
.anmelden .card-b{display:flex; flex-direction:column; gap:16px;}
.anmelden-kopf{display:flex; gap:14px; align-items:center;}
.anmelden-kopf img{width:52px; height:52px;}
.anmelden-kopf .h1{margin:0; font-size:22px;}
.anmelden-kopf .muted{margin:0;}
.link-klein{font-size:14px; color: var(--muted);}

/* ------------------------------------------------------------------
   Übersicht
   ------------------------------------------------------------------ */
.seiten-kopf{margin: 0 0 22px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;}
.seiten-kopf h1{font-size: clamp(26px, 3.4vw, 36px); line-height:1.1; letter-spacing:-.02em; margin:0; color:#fff; text-shadow: 0 1px 12px rgba(0,0,0,.18);}
.seiten-kopf p{margin:6px 0 0; color: var(--on-bg-muted);}
.kpi4{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom:18px;}
@media (max-width:900px){ .kpi4{grid-template-columns: repeat(2, 1fr);} }
.kpi4 .card{padding:18px 20px;}
.kpi4 .v{font-size:30px; font-weight:700; letter-spacing:-.02em; font-variant-numeric: tabular-nums; color: var(--ink);}
.kpi4 .t{font-size:13px; color: var(--muted); margin-top:2px;}
.kpi4 .card.ist-warn .v{color: var(--accent-strong);}
.raster2{display:grid; grid-template-columns: 1fr 1fr; gap:18px;}
@media (max-width:900px){ .raster2{grid-template-columns:1fr;} }
.leer{color: var(--muted); font-size:14px; padding: 6px 0;}
.mono{font-family: var(--mono); font-size:13px;}

/* ------------------------------------------------------------------
   Verwaltung
   ------------------------------------------------------------------ */
.zurueck{margin:0 0 6px !important; font-size:14px;}
.zurueck a, .seiten-kopf a.hell{color: rgba(255,255,255,.85); text-decoration:none;}
.zurueck a:hover, .seiten-kopf a.hell:hover{color:#fff; text-decoration:underline;}
.mono-titel{font-family: var(--mono); letter-spacing:.01em;}
.btn-hell{background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color:#fff;}
.btn-hell:hover{background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.55);}
.abstand{margin-top:18px;}
.abstand-oben{margin-top:14px !important;}
.abstand-unten{margin-bottom:18px;}
.klein{font-size:12px;}
.nowrap{white-space:nowrap;}
.umbruch{word-break:break-word; white-space:normal;}
.kurz{max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.text-gefahr{color: var(--danger); font-weight:650;}
.badge-gut{background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok);}

/* Filterzeile im Kartenkopf */
.card-h.filter{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-start;}
.card-h.filter .input[type="search"]{flex:1 1 240px; min-width:0;}
.card-h.filter select{flex:0 1 auto; width:auto; min-width:150px;}
.card-h.filter .input-datum{width:auto; flex:0 0 160px;}
.schalter{display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:14px; margin:0; cursor:pointer;}
.schalter input{accent-color: var(--accent); width:16px; height:16px; margin:0;}

/* Tabellen */
.tabelle-rahmen{overflow-x:auto;}
.tabelle-rahmen > .table{min-width:720px;}
.tabelle-kompakt th, .tabelle-kompakt td{padding:8px 8px;}
.tabelle-kompakt tbody th{width:34%; color: var(--muted); font-weight:600; font-size:13px; white-space:nowrap;}
.tabelle-form td{vertical-align:middle;}
.tabelle-form .input{padding:7px 10px; min-width:90px;}
.tabelle-form select{min-width:120px;}
.regel-param{display:flex; flex-wrap:wrap; gap:8px 14px;}
.regel-param label{display:flex; align-items:center; gap:6px; margin:0; font-weight:500; font-size:13px; color: var(--muted); white-space:nowrap;}
.regel-param .input{width:84px; min-width:0;}
.tabelle-fuss{margin:12px 0 0;}
.blaettern{display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:14px; flex-wrap:wrap;}
.blaettern .muted{margin-right:auto;}

/* Formulare */
.feld-fehler{margin-top:6px; font-size:13px; color: var(--danger); font-weight:600;}
.formular-fuss{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.row4{display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-bottom:18px;}
.row6{display:grid; grid-template-columns: repeat(6, 1fr); gap:14px; margin-bottom:12px;}
.row-plz{display:grid; grid-template-columns: 120px 1fr 1fr; gap:18px; margin-bottom:18px;}
@media (max-width:1000px){ .row6{grid-template-columns: repeat(3, 1fr);} }
@media (max-width:900px){ .row4{grid-template-columns: repeat(2, 1fr);} }
@media (max-width:600px){ .row4, .row6, .row-plz, .row2{grid-template-columns:1fr;} }
.feld-unten{display:flex; align-items:flex-end; padding-bottom:12px;}
.wahl3{grid-template-columns: repeat(3, 1fr); margin-bottom:18px;}
@media (max-width:700px){ .wahl3{grid-template-columns:1fr;} }
.input-mono{font-family: var(--mono);}
textarea.input-mono{font-size:13px; min-height:150px; word-break:break-all;}

/* Aktionen in Tabellen, aufklappbare Sperre */
.aktionen-inline{display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start; margin:0;}
.seiten-kopf .aktionen-inline .btn{background:#fff;}
details.sperren{position:relative;}
details.sperren > summary{list-style:none; cursor:pointer;}
details.sperren > summary::-webkit-details-marker{display:none;}
.sperren-feld{display:flex; gap:6px; margin-top:6px; min-width:300px;}
.sperren-feld .input{padding:6px 10px; font-size:14px;}
details.aufklapp > summary{list-style:none; display:inline-flex;}
details.aufklapp > summary::-webkit-details-marker{display:none;}

/* Reiter (Protokoll) */
.reiter{display:flex; gap:4px; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:4px;}
.reiter a{color:#fff; text-decoration:none; padding:7px 16px; border-radius:999px; font-size:14px; font-weight:600;}
.reiter a.is-active{background:#fff; color: var(--ink);}

/* Dokument */
.dokument-karte{margin-bottom:18px; border-color: var(--ok-line);}
.anmelden-breit{max-width:720px;}
.grid > *, .raster2 > *{min-width:0;}
.seiten-kopf .code{background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color:#fff;}
@media (max-width:900px){ .grid{grid-template-columns:1fr;} }
/* Verwaltungsnavigation: alle Punkte inkl. Abmelden auf Desktop sichtbar */
.topnav{gap:0;}
.topnav a, .topnav .topnav-out{padding-left:8px; padding-right:8px; font-size:14px;}
.topnav-form{margin-left:4px;}
@media (max-width:1240px){ .brand-sub{display:none;} }

/* Einstellungen: nur den gewählten Versandweg zeigen (ohne JavaScript per :has) */
.versand-teil{display:flex; flex-direction:column; gap:14px; padding-top:6px; border-top:1px solid var(--line);}
[data-mailform]:not(:has(input[name="mail_art"][value="smtp"]:checked)) .versand-teil[data-versand="smtp"],
[data-mailform]:not(:has(input[name="mail_art"][value="microsoft365"]:checked)) .versand-teil[data-versand="microsoft365"]{display:none;}
.ereignisse{display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:12px;}
.ereignis{align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius: var(--radius-s); background:#fff;}
.ereignis input{margin-top:3px;}
.input-test{flex:1 1 240px; width:auto; min-width:0;}
details.anleitung{border:1px solid var(--line); border-radius: var(--radius-s); padding:12px 16px; background: var(--paper-2);}
details.anleitung > summary{cursor:pointer; font-weight:600; font-size:14px;}
details.anleitung[open] > summary{margin-bottom:10px;}
details.anleitung .code{word-break:break-all;}
.field-help .schalter{margin-top:6px; display:flex;}
@media (max-width:1440px){ .topbar .brand-name{display:none;} }