:root {
  --bg:#f2f2ef; --flaeche:#fff; --linie:#e7e7e2; --linie-zart:#f0f0ec;
  --text:#15161a; --grau:#6e7178; --grau-zart:#a3a6ad;
  --akzent:#1d6b4a; --akzent-zart:rgba(29,107,74,.10);
  --warn:#a8402f; --warn-zart:rgba(168,64,47,.09);
  --feder:cubic-bezier(.32,.72,0,1);
  --schatten:0 1px 2px rgba(20,22,26,.05), 0 12px 28px -18px rgba(20,22,26,.28);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
       -webkit-font-smoothing:antialiased; }
main { max-width:1180px; margin:0 auto; padding:28px 24px 56px; }

header { background:var(--flaeche); border-bottom:1px solid var(--linie);
         padding:0 24px; display:flex; align-items:center; justify-content:space-between;
         height:56px; }
header .marke { font-weight:600; letter-spacing:-.01em; text-decoration:none; color:var(--text); }
header nav { display:flex; align-items:center; gap:18px; font-size:13.5px; }
header nav a { color:var(--grau); text-decoration:none; }
header nav a:hover { color:var(--text); }
header .wer { color:var(--grau-zart); font-size:12.5px; }

h1 { font-size:23px; line-height:1.15; letter-spacing:-.021em; font-weight:600; margin:0 0 4px; }
h2 { font-size:11px; letter-spacing:.075em; text-transform:uppercase; font-weight:600;
     color:var(--grau); margin:0 0 14px; }
h3 { font-size:13px; font-weight:600; margin:22px 0 8px; }
.kopf { display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
        margin-bottom:20px; }
.zurueck { font-size:12.5px; color:var(--grau); text-decoration:none; display:block; margin-bottom:6px; }
.zurueck::before { content:"← "; }

.karte { background:var(--flaeche); border:1px solid var(--linie); border-radius:16px;
         padding:20px; box-shadow:var(--schatten); margin-bottom:18px; }
.karte.schmal { max-width:400px; margin:14vh auto 0; }
.karte.leer { text-align:center; padding:44px 20px; color:var(--grau); }
.zwei { display:grid; grid-template-columns:minmax(260px,1fr) 2fr; gap:18px; align-items:start; }
@media (max-width:860px) { .zwei { grid-template-columns:1fr; } }

table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
     color:var(--grau-zart); font-weight:600; padding:0 10px 8px; }
td { padding:10px; border-top:1px solid var(--linie-zart); }
tbody tr[onclick] { cursor:pointer; transition:background .15s; }
tbody tr[onclick]:hover { background:var(--linie-zart); }
tr.aktiv td { background:var(--akzent-zart); }
table.klein td { font-size:12.5px; padding:5px 10px; }
.zahl { font-variant-numeric:tabular-nums; color:var(--grau); }
.rechts { text-align:right; }

input, select, button { font:inherit; }
input, select { width:100%; padding:9px 11px; border:1px solid var(--linie); border-radius:10px;
                background:#fcfcfb; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline:none; border-color:var(--akzent);
                            box-shadow:0 0 0 3.5px var(--akzent-zart); }
label { display:block; font-size:12px; color:var(--grau); margin:14px 0 5px; }
button { padding:9px 15px; border:0; border-radius:10px; background:var(--akzent); color:#fff;
         cursor:pointer; font-weight:500; transition:transform .1s ease-out, filter .15s; }
button:hover { filter:brightness(1.07); }
button:active { transform:scale(.975); }
button.sek { background:var(--flaeche); color:var(--text); border:1px solid var(--linie); }
button.klein { padding:5px 10px; font-size:12.5px; }
.knoepfe { display:flex; gap:8px; margin-top:18px; }
form { margin:0; }

dialog { border:0; border-radius:16px; padding:24px; box-shadow:var(--schatten);
         width:min(440px,92vw); }
dialog::backdrop { background:rgba(20,22,26,.35); backdrop-filter:blur(2px); }
dialog h2 { font-size:17px; text-transform:none; letter-spacing:-.01em; color:var(--text); }

dl { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; font-size:14px; }
dt { color:var(--grau); font-size:12.5px; }
dd { margin:0; }
ol.ablauf { margin:0; padding-left:20px; }
ol.ablauf li { margin-bottom:9px; }
ul.sperren { margin:0; padding-left:18px; color:var(--warn); font-size:13px; }
ul.sperren li { margin-bottom:4px; }
pre.anweisung { white-space:pre-wrap; font:12.5px/1.6 ui-monospace,SFMono-Regular,monospace;
                background:var(--linie-zart); padding:16px; border-radius:11px;
                max-height:460px; overflow:auto; margin:0; }

.leise { color:var(--grau); }
.klein { font-size:12px; }
.fehler { color:var(--warn); background:var(--warn-zart); padding:10px 12px; border-radius:10px;
          font-size:13.5px; }
.entwurf { color:var(--grau); font-size:12.5px; }
.aktiv-marke { color:var(--akzent); font-weight:600; font-size:12px; }
.marke-entwurf, .marke-aktiv, .marke-archiviert {
  font-size:11.5px; padding:2px 9px; border-radius:20px; font-weight:500; }
.marke-entwurf { background:var(--linie-zart); color:var(--grau); }
.marke-aktiv { background:var(--akzent-zart); color:var(--akzent); }
.marke-archiviert { background:var(--warn-zart); color:var(--warn); }

/* ---------------------------------------------------------- Einstellungen */
.leitsatz { color:var(--grau); font-size:13.5px; margin:0 0 20px; }
.karte.dienst { padding:20px 22px 22px; }
.dienstkopf { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
              padding-bottom:14px; border-bottom:1px solid var(--linie-zart); margin-bottom:16px; }
.dienstkopf h2 { font-size:15px; text-transform:none; letter-spacing:-.01em; color:var(--text);
                 margin:0 0 3px; }
.dienstkopf p { margin:0; font-size:13px; }
.marke-status { flex:none; font-size:11.5px; padding:3px 10px; border-radius:20px;
                font-weight:500; white-space:nowrap; }
.marke-status.einsatzbereit { background:var(--akzent-zart); color:var(--akzent); }
.marke-status.unvollstaendig { background:var(--warn-zart); color:var(--warn); }
.marke-status.nicht-eingerichtet { background:var(--linie-zart); color:var(--grau); }

.hinweis { font-size:13px; border-radius:11px; padding:9px 13px; margin:0 0 16px; }
.hinweis.gut { background:var(--akzent-zart); color:var(--akzent); }
.hinweis.warnung { background:var(--warn-zart); color:var(--warn); }
.hinweis code { font-size:12px; background:rgba(20,22,26,.06); padding:1px 5px;
                border-radius:5px; }

.zugangsform { display:grid; gap:0; max-width:560px; }
.zugangsform label { display:block; font-size:12.5px; color:var(--grau); font-weight:500;
                     margin:14px 0 5px; }
.zugangsform input, .zugangsform select, .zugangsform textarea {
  width:100%; font:inherit; font-size:14px; color:var(--text); background:var(--flaeche);
  border:1px solid var(--linie); border-radius:11px; padding:9px 12px;
  transition:border-color .18s var(--feder), box-shadow .18s var(--feder); }
.zugangsform textarea { resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                        font-size:12.5px; }
.zugangsform input:focus, .zugangsform select:focus, .zugangsform textarea:focus {
  outline:none; border-color:var(--akzent); box-shadow:0 0 0 3.5px var(--akzent-zart); }
.zugangsform input::placeholder, .zugangsform textarea::placeholder { color:var(--grau-zart); }
.felder { border:0; padding:0; margin:0; }
.felder[hidden] { display:none; }
.feldhinweis { font-size:12px; color:var(--grau-zart); margin:5px 0 0; }
.knopfreihe { display:flex; align-items:center; gap:10px; margin-top:20px; }
.knopfreihe button.leise { background:none; border:1px solid var(--linie); color:var(--grau);
                           box-shadow:none; }
.knopfreihe button.leise:hover { color:var(--warn); border-color:var(--warn); }
.klein { font-size:12.5px; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition-duration:.01ms !important; }
}

.inline { display:inline; margin:0; }
.inline select { padding:3px 8px; border:1px solid var(--linie);
                  border-radius:8px; font-size:13px; background:var(--flaeche); }

.regelgitter { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
               gap:0 18px; }
.regelgitter label { margin-top:14px; }

/* ---------------------------------------------------------- Ergebnisse */
.knopf { display:inline-block; padding:9px 15px; border-radius:10px; background:var(--akzent);
         color:#fff; text-decoration:none; font-size:14px; font-weight:500;
         box-shadow:var(--schatten); transition:filter .18s var(--feder); }
.knopf:hover { filter:brightness(1.07); }
.knopf.sek { background:var(--flaeche); color:var(--text); border:1px solid var(--linie); }
.kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px; }
.kachel { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px;
          border:1px solid var(--linie); text-decoration:none; color:var(--text);
          background:var(--flaeche); transition:border-color .18s var(--feder); }
.kachel:hover { border-color:var(--akzent); }
.kachel.gewaehlt { border-color:var(--akzent); background:var(--akzent-zart); }
.kachel .zahl { font-size:21px; font-weight:600; letter-spacing:-.02em; }
.filterzeile { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
               gap:0 16px; align-items:end; }
.filterzeile label { display:block; font-size:12.5px; color:var(--grau); font-weight:500;
                     margin:12px 0 5px; }
.filterzeile select, .filterzeile input { width:100%; font:inherit; font-size:14px;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:11px;
  padding:9px 12px; color:var(--text); }
.filterzeile select:focus, .filterzeile input:focus { outline:none; border-color:var(--akzent);
  box-shadow:0 0 0 3.5px var(--akzent-zart); }
.filterzeile .knopfreihe { margin-top:12px; }
.breit { overflow-x:auto; }
.breit table { min-width:940px; }
.code { background:var(--linie-zart); border:1px solid var(--linie); border-radius:11px;
        padding:12px 14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
        font-size:12px; line-height:1.5; overflow-x:auto; white-space:pre-wrap;
        word-break:break-all; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.kacheln.kennzahlen { grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); }
.kachel.still { cursor:default; }
.kachel.still:hover { border-color:var(--linie); }
.kachel .zahl.gut { color:var(--akzent); }
.reiterchen { display:flex; gap:4px; }
.reiterchen a { font-size:13px; padding:6px 12px; border-radius:9px; text-decoration:none;
                color:var(--grau); }
.reiterchen a:hover { color:var(--text); background:var(--linie-zart); }
.reiterchen a.gewaehlt { background:var(--akzent-zart); color:var(--akzent); font-weight:500; }
.sortierkopf { color:inherit; text-decoration:none; white-space:nowrap; }
.sortierkopf:hover { color:var(--akzent); }
.pfeil { margin-left:3px; color:var(--akzent); }
.zahl-zelle { text-align:right; font-variant-numeric:tabular-nums; }
th:has(.sortierkopf) { white-space:nowrap; }
.verlauf { margin-top:16px; max-height:320px; overflow-y:auto; border:1px solid var(--linie);
           border-radius:12px; padding:12px 14px; background:var(--linie-zart); }
.verlauf .zeile { margin:0 0 8px; font-size:13.5px; line-height:1.5; }
.verlauf .zeile.agent { color:var(--akzent); }
.verlauf .zeile.kunde { color:var(--text); }
button:disabled, .knopf.aus { opacity:.45; cursor:not-allowed; filter:none; }
button:disabled:hover { filter:none; }
button:disabled:active { transform:none; }

/* Mandantenanzeige im Kopf: der Betreiber sieht mehrere Kunden und muss jederzeit
   erkennen, in wessen Daten er gerade arbeitet. */
header .mandant { color:var(--text); font-size:12.5px; font-weight:500; }
header .mandant select { font:inherit; color:inherit; background:var(--flaeche, transparent);
  border:1px solid var(--linie); border-radius:7px; padding:3px 8px; cursor:pointer; }
header a.wer { text-decoration:none; }
header a.wer:hover { color:var(--text); }

/* Passwortfeld mit Augenknopf. Die Huelle legt `passwortauge.js` selbst an. */
.pw-huelle { position:relative; display:block; }
.pw-huelle input { padding-right:40px; }
.pw-auge { position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; padding:0; display:flex; align-items:center;
  justify-content:center; background:none; border:0; border-radius:8px;
  color:var(--grau); cursor:pointer; }
.pw-auge:hover { background:var(--linie-zart); color:var(--text); filter:none; }
.pw-auge:active { transform:translateY(-50%) scale(.92); }
.pw-auge:focus-visible { outline:2px solid var(--akzent); outline-offset:1px; }

/* Anmelde- und Passwortkarte: der Knopf stand direkt auf dem Feld. */
.karte.schmal h1 { margin:0 0 4px; }
.karte.schmal form button[type="submit"] { width:100%; margin-top:22px; padding:11px 15px; }
.karte.schmal .fehler, .karte.schmal .hinweis { margin:10px 0 0; }