/*
 * EXQR.DE – Dynamische QR-Code-Verwaltung
 * Copyright © 2026 Metrik GmbH. Alle Rechte vorbehalten.
 *
 * Diese Software „EXQR.DE“ ist geistiges Eigentum der Metrik GmbH.
 * Die Nutzung ist ausschließlich dem Unternehmen bzw. der Institution
 * gestattet, das/die mit der Metrik GmbH einen entsprechenden Vertrag
 * geschlossen hat. Kopieren, Weitergabe, Weiterverkauf oder Überlassung
 * an Dritte – ganz oder in Teilen – sind ohne vorherige schriftliche
 * Zustimmung der Metrik GmbH untersagt. Siehe LIZENZ.md.
 */
/* =====================================================================
   style.css – Layout & Komponenten
   ---------------------------------------------------------------------
   Diese Datei beschreibt NUR Aufbau und Verhalten der Oberfläche.
   Alle Farben und Schriften stehen als Variablen in  theme.css  und
   werden hier ausschließlich über var(--…) verwendet. Für optische
   Anpassungen (Farben/Schriften) bitte theme.css bearbeiten, nicht hier.

   Wichtig: theme.css muss im HTML VOR dieser Datei eingebunden werden.
   ===================================================================== */

*{box-sizing:border-box}
body{
  margin:0;color:var(--text);background:var(--bg);
  font-family:var(--font-sans);
  line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1{font-size:1.5rem;margin:0;font-weight:700;letter-spacing:-.02em}
h2{font-size:1.05rem;margin:0 0 .6rem;font-weight:700;letter-spacing:-.01em}
a{color:var(--akzent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--font-mono);font-size:.9em}

/* Buttons */
.btn{
  display:inline-block;background:var(--akzent);color:#fff;border:0;cursor:pointer;
  padding:.6rem 1rem;border-radius:9px;font-size:.95rem;font-weight:600;
  transition:background .15s ease;text-align:center;
}
.btn:hover{background:var(--akzent-dunkel);text-decoration:none}
.btn-klein{padding:.35rem .7rem;font-size:.85rem;border-radius:8px}
.btn-voll{width:100%;padding:.7rem;font-size:1rem;margin-top:.4rem}
.btn-hell{background:var(--btn-hell);color:var(--text)}
.btn-hell:hover{background:var(--btn-hell-h)}

/* Topbar */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--karte);border-bottom:1px solid var(--linie);
  padding:.8rem 1.5rem;
}
.marke{display:inline-flex;align-items:center;gap:.5rem;color:var(--text)}
.marke:hover{text-decoration:none}
.marke .signet{height:26px;width:auto;display:block}
.marke .wortmarke{font-weight:600;font-size:1.6rem;letter-spacing:-.045em;line-height:1;color:var(--text)}
.topbar nav{display:flex;align-items:center;gap:1rem}
.benutzer{color:var(--text-leise);font-size:.85rem}

.inhalt{max-width:1080px;margin:1.5rem auto;padding:0 1.25rem}
.kopfzeile{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem;gap:1rem;flex-wrap:wrap}
.fusszeile{text-align:center;color:var(--text-leise);font-size:.8rem;padding:2rem 0}

/* Filterleiste */
.filterleiste{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  background:var(--karte);padding:.8rem;border:1px solid var(--linie);
  border-radius:var(--radius);margin-bottom:1.2rem;box-shadow:var(--schatten);
}
.filterleiste input[type=search],.filterleiste select{flex:0 1 auto}
input,select{
  font:inherit;padding:.55rem .7rem;border:1px solid var(--linie);
  border-radius:8px;background:var(--karte);color:var(--text);
}
input:focus,select:focus{outline:2px solid var(--akzent);outline-offset:0;border-color:var(--akzent)}
input[type=search]{min-width:230px}

/* Tabelle */
.tabelle-wrap{overflow-x:auto;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten)}
table.liste{width:100%;border-collapse:collapse;min-width:760px}
.liste th,.liste td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--linie);vertical-align:middle}
.liste th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-leise);background:var(--flaeche)}
.liste tr:last-child td{border-bottom:0}
.liste .num{text-align:right;font-variant-numeric:tabular-nums}
.liste .ziel{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeile-inaktiv > td{opacity:.55}
.zeile-inaktiv > td.acol{opacity:1}
.inline{display:inline}

/* Spaltenbreiten & Ausrichtung der Übersicht */
.liste .sp-toggle{width:40px;text-align:center;padding-left:.5rem;padding-right:.2rem}
.liste .sp-kunde{width:150px}
.liste .sp-titel{min-width:190px}
.liste .sp-code{width:104px;text-align:center}
.liste .sp-scans{width:64px;text-align:right;font-variant-numeric:tabular-nums}
.liste .sp-code code{background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;padding:.15rem .4rem;font-size:.82rem}
/* Typ-Badge über dem Titel */
.liste .sp-titel .badge{margin-bottom:.25rem}
.liste .titel-text{display:block;font-weight:600}

/* Aktionsspalten: feste Breite, rechts fixiert */
.liste th.acol,.liste td.acol{width:92px;min-width:92px;text-align:center;background:var(--karte);z-index:1}
.liste th.acol{background:var(--flaeche);z-index:2}
.liste .sticky-0{position:sticky;right:0}
.liste .sticky-1{position:sticky;right:92px}
.liste .sticky-2{position:sticky;right:184px}
.liste .acol.acol-first{box-shadow:var(--acol-schatten)}
.acol-leer{color:var(--text-leise)}

/* Icon-Buttons */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--linie);background:var(--karte);color:var(--text);cursor:pointer;padding:0}
.icon-btn:hover{background:var(--btn-hell);text-decoration:none}
.icon-btn .ico{width:18px;height:18px}
.ico-edit:hover{color:var(--akzent);border-color:var(--akzent)}
.ico-del{color:var(--rot)}
.ico-del:hover{background:var(--rot);color:#fff;border-color:var(--rot)}
/* Status-Toggle: aktiv = grün mit dezenter grüner Fläche, inaktiv = neutral gedämpft */
.ico-toggle.ist-an{color:var(--gruen);border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.12)}
.ico-toggle.ist-an:hover{background:rgba(52,211,153,.20)}
.ico-toggle.ist-aus{color:var(--text-leise)}
.ico-toggle.ist-aus:hover{color:var(--text)}
/* Status-Spalte: Hinweis bei statischen Codes (immer aktiv) */
.stat-info{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--text-leise);cursor:help}
.stat-info .ico{width:18px;height:18px}
.stat-info:hover,.stat-info:focus-visible{color:var(--akzent);outline:none}

/* Eigener Tooltip (per JS an <body> gehängt, position:fixed) */
.exqr-tip{
  position:fixed;z-index:100;background:var(--text);color:var(--karte);
  padding:.4rem .6rem;border-radius:7px;font-size:.78rem;font-weight:500;line-height:1.3;
  max-width:220px;box-shadow:var(--schatten);pointer-events:none;white-space:normal;
  opacity:0;transform:translateY(3px);transition:opacity .12s ease,transform .12s ease;
}
.exqr-tip.an{opacity:1;transform:translateY(0)}
.exqr-tip::after{content:"";position:absolute;left:var(--pfeil,50%);transform:translateX(-50%);border:5px solid transparent}
.exqr-tip.oben::after{top:100%;border-top-color:var(--text)}
.exqr-tip.unten::after{bottom:100%;border-bottom-color:var(--text)}

.badge{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.75rem;font-weight:600}
.badge-an{background:var(--badge-an-bg);color:var(--gruen)}
.badge-aus{background:var(--badge-aus-bg);color:var(--rot)}

.leer{color:var(--text-leise);background:var(--karte);padding:2rem;border-radius:var(--radius);text-align:center;border:1px dashed var(--linie)}

/* Editor: Einstellungen (~65 %) + schmale, mitlaufende QR-Vorschau (~35 %) */
.editor{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,7fr);gap:1.5rem;align-items:start}
.editor-haupt{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.editor-haupt > .stil-panel{margin:0}
.formular,.qr-box{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--schatten)}
.formular label{display:block;margin-bottom:1rem;font-size:.9rem;font-weight:600;color:var(--text)}
.formular label input,.formular label select{display:block;width:100%;margin-top:.35rem;font-weight:400}
.formular label.check{display:flex;align-items:center;gap:.5rem;font-weight:400}
.formular label.check input{width:auto;margin:0}

/* QR-Vorschau: klar abgesetzt, oben „sticky" beim Scrollen */
.qr-box{position:sticky;top:4.25rem}
.qr-box h2{margin-top:0;font-size:1.05rem}
.qr-flaeche{background:#fff;padding:1.1rem;border:1px solid var(--linie);border-radius:12px;display:flex;justify-content:center;align-items:center;min-height:240px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)}
.qr-flaeche svg{max-width:300px;width:100%;height:auto}
.qr-buttons{display:flex;gap:.5rem;margin:.9rem 0}
.qr-buttons .btn{flex:1}
.kurzlink{font-size:.85rem;color:var(--text-leise);word-break:break-all}
.hinweis-klein{font-size:.8rem;color:var(--text-leise)}

/* Stil-Panel: in klar beschriftete Gruppen gegliedert */
.stil-panel{margin:.7rem 0;border:1px solid var(--linie);border-radius:12px;padding:.5rem .9rem .9rem;background:var(--flaeche)}
.stil-panel summary{cursor:pointer;font-weight:700;font-size:.92rem;padding:.45rem 0;list-style:none;display:flex;align-items:center;gap:.4rem}
.stil-panel summary::-webkit-details-marker{display:none}
.stil-panel summary::before{content:"▸";color:var(--text-leise);transition:transform .15s}
.stil-panel[open] summary::before{transform:rotate(90deg)}
.stil-gruppe{margin:.7rem 0 0;padding-top:.7rem;border-top:1px solid var(--linie)}
.stil-gruppe:first-of-type{border-top:0;padding-top:.2rem}
.stil-gruppe-titel{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-leise);margin:0 0 .5rem}
.stil-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .7rem}
.stil-grid label,.stil-logo label{display:flex;flex-direction:column;font-size:.8rem;font-weight:600;gap:.25rem;color:var(--text)}
.stil-grid input,.stil-grid select,.stil-logo input{font-weight:400}
.stil-grid input[type=color]{height:34px;padding:2px;cursor:pointer}
.stil-grid label.check2{flex-direction:row;align-items:center;gap:.4rem;font-weight:400;align-self:end}
.stil-grid label.check2 input{width:auto}
.stil-grid label.voll{grid-column:1 / -1}
.stil-logo{display:flex;flex-direction:column;gap:.5rem}
.stil-logo input[type=range]{width:100%}
.stil-warnung{display:none;background:var(--warnung-bg);color:var(--warnung-text);border:1px solid var(--warnung-linie);padding:.5rem .7rem;border-radius:8px;font-size:.8rem;margin:.2rem 0 .6rem}

/* Meldungen */
.ok{background:var(--ok-bg);color:var(--ok-text);padding:.7rem 1rem;border-radius:9px;margin-bottom:1rem}
.fehler{background:var(--fehler-bg);color:var(--fehler-text);padding:.7rem 1rem;border-radius:9px;margin-bottom:1rem}

/* Zentrierte Seiten (Login, Fallback, Setup) */
.zentriert{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.login-karte{background:var(--karte);padding:2rem;border-radius:var(--radius);box-shadow:var(--schatten);width:100%;max-width:360px;border:1px solid var(--linie)}
.login-karte h1{text-align:center;margin-bottom:.2rem}
.login-karte .untertitel{text-align:center;color:var(--text-leise);margin:0 0 1.2rem}
.login-karte label{display:block;margin-bottom:.9rem;font-size:.9rem;font-weight:600}
.login-karte label input{display:block;width:100%;margin-top:.35rem;font-weight:400}

.hinweis-karte{background:var(--karte);padding:2.5rem;border-radius:var(--radius);box-shadow:var(--schatten);max-width:440px;text-align:center;border:1px solid var(--linie)}
.hinweis-symbol{width:56px;height:56px;border-radius:50%;background:var(--btn-hell);color:var(--akzent);font-size:1.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}

/* Responsiv */
@media (max-width:860px){
  .editor{grid-template-columns:1fr}
  .qr-box{order:-1;position:static}
}

/* ---------- Header: Navigation + Theme-Umschalter ---------- */
.topbar nav{gap:.6rem}
.nav-links{display:flex;gap:.2rem;margin-right:.4rem}
.nav-links a{padding:.4rem .7rem;border-radius:8px;color:var(--text-leise);font-size:.9rem;font-weight:600}
.nav-links a:hover{background:var(--btn-hell);text-decoration:none;color:var(--text)}
.nav-links a.aktiv{background:var(--btn-hell);color:var(--text)}
.theme-btn{background:var(--btn-hell);color:var(--text);border:0;cursor:pointer;width:36px;height:36px;border-radius:8px;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center}
.theme-btn:hover{background:var(--btn-hell-h)}

/* ---------- Übersicht: QR-Thumbnail ---------- */
.liste .qr-thumb{width:52px}
.liste .qr-thumb .mini{width:44px;height:44px;background:#fff;border:1px solid var(--linie);border-radius:6px;padding:2px;display:block}
.liste .qr-thumb .mini svg{width:100%;height:100%;display:block}

/* ---------- Kurzlink kopieren ---------- */
.kurzlink-zeile{display:flex;align-items:center;gap:.4rem;margin:.2rem 0 .6rem}
.kurzlink-zeile code{flex:1;background:var(--flaeche);padding:.4rem .55rem;border-radius:7px;border:1px solid var(--linie);font-size:.8rem;word-break:break-all}
.kopieren-btn{flex:0 0 auto}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--text);color:var(--karte);padding:.6rem 1rem;border-radius:9px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.toast.an{opacity:1}

/* ---------- Statistik ---------- */
.zeit-schalter{display:inline-flex;border:1px solid var(--linie);border-radius:9px;overflow:hidden;background:var(--karte)}
.zeit-schalter a{padding:.4rem .8rem;font-size:.85rem;font-weight:600;color:var(--text-leise);border-right:1px solid var(--linie)}
.zeit-schalter a:last-child{border-right:0}
.zeit-schalter a:hover{background:var(--btn-hell);text-decoration:none;color:var(--text)}
.zeit-schalter a.aktiv{background:var(--akzent);color:#fff}
.kpi-reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.2rem}
.kpi{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.15rem}
.kpi-wert{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-label{font-size:.78rem;color:var(--text-leise);text-transform:uppercase;letter-spacing:.03em}
.chart-scroll{overflow-x:auto;padding-bottom:.2rem}
.balken .bar{fill:var(--akzent);transition:fill .12s}
.balken .bar:hover{fill:var(--akzent-dunkel)}
.balken .bar-label{fill:var(--text-leise);font-size:10px}
.mini-code{font-size:.72rem;color:var(--text-leise);word-break:break-all}
.kunde-balken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.kunde-balken .kb-kopf{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:.25rem}
.kunde-balken .kb-kopf strong{font-variant-numeric:tabular-nums}
.kunde-balken .kb-spur{height:9px;background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;overflow:hidden}
.kunde-balken .kb-fuell{height:100%;background:var(--akzent);border-radius:6px}
@media (max-width:760px){ .kpi-reihe{grid-template-columns:repeat(2,1fr)} }

/* ---------- Sparkline im Editor ---------- */
.spark-box{margin:.8rem 0;padding:.8rem;border:1px solid var(--linie);border-radius:9px;background:var(--flaeche)}
.spark-kopf{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.spark-kopf h2{margin:0;font-size:.95rem}
.spark-zahlen{font-size:.8rem;color:var(--text-leise)}
.spark-zahlen strong{color:var(--text);font-variant-numeric:tabular-nums}
.spark svg{display:block;width:100%;height:44px}
.spark .spark-flaeche{fill:var(--akzent);opacity:.15}
.spark .spark-linie{fill:none;stroke:var(--akzent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}

/* ---------- Vorlagen-Zeile im Editor ---------- */
.vorlagen-zeile{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.2rem 0 .6rem;padding-bottom:.6rem;border-bottom:1px solid var(--linie)}
.vorlagen-zeile select{flex:1;min-width:120px}

/* ---------- Kundenverwaltung ---------- */
.kunden-logo{width:40px;height:40px;object-fit:contain;background:#fff;border:1px solid var(--linie);border-radius:6px;padding:2px}
.kunden-logo-leer{width:40px;height:40px;border:1px dashed var(--linie);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-leise);font-size:.7rem}
.formular-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--schatten);margin-bottom:1.2rem}
.formular-karte h2{margin-bottom:.8rem}
.zeile-felder{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.zeile-felder label{flex:1;min-width:160px;display:flex;flex-direction:column;font-size:.85rem;font-weight:600;gap:.3rem}
.zeile-felder label input{font-weight:400}

/* Login-Markenlockup */
.login-marke{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-bottom:.3rem;color:var(--text)}
.login-marke .signet{height:34px;width:auto}
.login-marke .wortmarke{font-weight:600;font-size:2.1rem;letter-spacing:-.045em;line-height:1}

/* Öffentliche Startseite / Fehlerseite */
.start-body{background:var(--bg)}
.start-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:2rem}
.start-marke{display:flex;align-items:center;gap:.7rem;color:var(--text)}
.start-marke .signet{height:60px;width:auto}
.start-marke .wortmarke{font-weight:600;font-size:3.7rem;letter-spacing:-.045em;line-height:1}
.start-marke-klein{justify-content:center;margin-bottom:.4rem}
.start-marke-klein .signet{height:30px}
.start-marke-klein .wortmarke{font-size:1.85rem}
.start-sub{color:var(--text-leise);font-size:1.05rem;margin:0;max-width:34rem}
.start-btn{font-size:1.05rem;padding:.75rem 2rem}

/* Lösch-Button (Admin) */
.btn-loeschen{background:transparent;color:var(--rot);border:1px solid var(--linie)}
.btn-loeschen:hover{background:var(--rot);color:#fff;border-color:var(--rot)}

/* Typ-Badges */
.badge-dyn{background:var(--badge-dyn-bg);color:var(--akzent)}
.badge-stat{background:var(--badge-stat-bg);color:var(--text-leise)}
.badge-neutral{background:transparent;color:var(--text-leise)}

/* Übersicht: mehr Spalten -> breiter */
table.liste{min-width:920px}
.spalte-toggle{width:34px;text-align:center}
.zeile-toggle{background:transparent;border:0;cursor:pointer;color:var(--text-leise);font-size:1rem;line-height:1;padding:.2rem .3rem;border-radius:6px}
.zeile-toggle:hover{background:var(--btn-hell);color:var(--text)}

/* Detail-/Ausklapp-Zeile */
.detail-zeile > td{background:var(--flaeche)}
.detail-grid{display:flex;flex-wrap:wrap;gap:1.2rem;margin:.2rem 0 .6rem}
.detail-grid > div{font-size:.85rem}
.detail-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-leise);margin-bottom:.15rem}
.detail-verlauf .detail-label{margin-bottom:.3rem}
.verlauf-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.verlauf-liste li{font-size:.82rem;color:var(--text)}
.verlauf-zeit{color:var(--text-leise);font-variant-numeric:tabular-nums;margin-right:.4rem}
.verlauf-user{font-weight:600;margin-right:.4rem}
.verlauf-alt,.verlauf-neu{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-leise);margin:0 .15rem 0 .35rem}

/* Editor: Typ-Hinweis & Assistenten */
.typ-hinweis{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:.5rem .7rem;font-size:.85rem;margin-bottom:1rem}
.typ-stat .assist{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .7rem;margin-bottom:.8rem;padding:.6rem;border:1px solid var(--linie);border-radius:8px;background:var(--flaeche)}
.typ-stat .assist label{margin:0}
.typ-stat .assist-url,.typ-stat .assist-text,.typ-stat .assist-tel{grid-template-columns:1fr}
.typ-stat textarea,.formular textarea{width:100%;font:inherit;padding:.55rem .7rem;border:1px solid var(--linie);border-radius:8px;background:var(--karte);color:var(--text);resize:vertical}

/* ---------- Hilfe / FAQ-Bedienungsanleitung ---------- */
.hilfe-intro{max-width:760px;color:var(--text);margin:.2rem 0 1.2rem;font-size:.98rem}
.hilfe-schnellstart{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--schatten);max-width:760px;margin-bottom:1.4rem}
.hilfe-schnellstart h2{margin-top:0}
.hilfe-schnellstart ol{margin:.2rem 0 0;padding-left:1.2rem}
.hilfe-schnellstart li{margin:.35rem 0}
.hilfe-sprung{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem}
.hilfe-sprung a{padding:.4rem .8rem;border-radius:999px;background:var(--flaeche);border:1px solid var(--linie);color:var(--text);font-size:.85rem;font-weight:600}
.hilfe-sprung a:hover{background:var(--btn-hell);text-decoration:none;color:var(--text)}
.hilfe-block{max-width:760px;margin:0 0 2rem;scroll-margin-top:1rem}
.hilfe-block h2{font-size:1.2rem;padding-bottom:.4rem;border-bottom:2px solid var(--akzent);display:inline-block}
.hilfe-tag{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-leise);border:1px solid var(--linie);border-radius:999px;padding:.1rem .5rem;margin-left:.4rem;vertical-align:middle}
.hilfe-blockinfo{color:var(--text-leise);font-size:.9rem;margin:.4rem 0 .9rem}
.faq{border:1px solid var(--linie);border-radius:10px;background:var(--karte);margin-bottom:.5rem;overflow:hidden}
.faq summary{cursor:pointer;font-weight:600;font-size:.95rem;padding:.75rem 1rem;list-style:none;display:flex;align-items:center;gap:.55rem;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";flex:0 0 auto;width:1.1rem;text-align:center;font-weight:700;color:var(--akzent);transition:transform .15s}
.faq[open] summary::before{content:"–"}
.faq[open] summary{border-bottom:1px solid var(--linie)}
.faq summary:hover{background:var(--flaeche)}
.faq-antwort{padding:.75rem 1rem .85rem 2.65rem;font-size:.92rem;color:var(--text);line-height:1.55}
.faq-antwort code{font-size:.85em}

/* ---------- Lizenz-/Kundenkennung: Warnhinweis ---------- */
.liz-warnung{background:var(--warnung-bg);color:var(--warnung-text);border:1px solid var(--warnung-linie);border-radius:10px;padding:.7rem 1rem;margin:0 0 1.1rem;font-size:.88rem;line-height:1.5}
.liz-warnung code{font-size:.85em}


/* --- Übersicht: Sticky-Topbar + Logo-Morph + Listen-Accordion (05.09.2026) --- */
.topbar{position:sticky;top:0;z-index:50}
.marke .wortmarke{
  display:inline-block;overflow:hidden;white-space:nowrap;max-width:6em;opacity:1;transform:translateX(0);
  transition:max-width .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,transform .4s cubic-bezier(.4,0,.2,1),margin-left .4s ease;
}
.topbar.kompakt .marke .wortmarke{max-width:0;opacity:0;transform:translateX(-.7em);margin-left:-.5rem}
@media (prefers-reduced-motion:reduce){.marke .wortmarke{transition:none}}

.liste-accordion{margin-top:.2rem}
.liste-acc-kopf{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:.7rem 1rem;color:var(--text);font:inherit;font-weight:600;cursor:pointer;
  transition:border-radius .2s ease,background .15s ease;
}
.liste-acc-kopf:hover{background:var(--btn-hell)}
.liste-accordion.auf .liste-acc-kopf{border-bottom-left-radius:0;border-bottom-right-radius:0}
.liste-acc-kopf .acc-titel{display:inline-flex;align-items:center;gap:.5rem}
.liste-acc-kopf .acc-anzahl{background:var(--btn-hell);color:var(--text-leise);border-radius:999px;padding:.08rem .5rem;font-size:.8rem;font-variant-numeric:tabular-nums}
.liste-acc-kopf .acc-chevron{transition:transform .3s ease;color:var(--text-leise)}
.liste-accordion.auf .liste-acc-kopf .acc-chevron{transform:rotate(180deg)}
.liste-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.liste-accordion.auf .liste-acc-body{grid-template-rows:1fr}
.liste-accordion.kein-anim .liste-acc-body{transition:none}
.liste-acc-inner{min-height:0;overflow:hidden}
.liste-accordion .tabelle-wrap{border-top-left-radius:0;border-top-right-radius:0;border-top:0}