/* Verwaltung: hell und ruhig, dunkel wenn das Gerät es will.
   Abstände in logischen Eigenschaften — Arabisch spiegelt dann von selbst. */

:root {
  --bg: #f6f7f9;
  --flaeche: #ffffff;
  --rand: #dfe3e8;
  --text: #12181f;
  --leise: #5f6b7a;
  --akzent: #2f6fed;
  --gut: #16a34a;
  --schlecht: #dc2626;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1218;
    --flaeche: #151d26;
    --rand: #26313d;
    --text: #e9eef4;
    --leise: #93a4b8;
    --akzent: #5b8dff;
    --gut: #22c55e;
    --schlecht: #f87171;
    --warn: #fbbf24;
    --warn-bg: #3a2c08;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100svh;
}

.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.szene { display: none; }
.szene.an { display: block; }

.marke { display: flex; align-items: baseline; gap: .4rem; letter-spacing: .16em; }
.marke b { font-weight: 800; }
.marke span { font-size: .65rem; color: var(--leise); letter-spacing: .28em; }
.marke.gross { justify-content: center; margin-block-end: 1.5rem; font-size: 1.3rem; }

/* ---- Anmeldung ---- */
#s-login.an { display: grid; place-items: center; min-height: 100svh; padding: 1.5rem; }
.schmal { width: min(100%, 24rem); }

/* ---- Gerüst ---- */
.kopf {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .7rem 1.2rem; background: var(--flaeche); border-block-end: 1px solid var(--rand);
  position: sticky; inset-block-start: 0; z-index: 10;
}
.wachs { flex: 1; }
.firma { font-weight: 600; }
.wer { color: var(--leise); font-size: .85rem; }

.nav {
  display: flex; gap: .3rem; overflow-x: auto; padding: .5rem 1.2rem;
  background: var(--flaeche); border-block-end: 1px solid var(--rand);
}
.nav button {
  border: 0; background: transparent; color: var(--leise); font: inherit; cursor: pointer;
  padding: .5rem .9rem; border-radius: 999px; white-space: nowrap;
}
.nav button.an { background: var(--akzent); color: #fff; font-weight: 600; }

.inhalt { padding: 1.4rem 1.2rem 4rem; max-width: 68rem; margin-inline: auto; }

/* ---- Bausteine ---- */
.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.2rem; margin-block-end: 1.1rem;
}
h1 { font-size: 1.4rem; margin-block-end: 1rem; }
h2 { font-size: 1.05rem; margin-block-end: .7rem; }
.hinweis { color: var(--leise); font-size: .9rem; margin-block-end: .8rem; }
.fehler { color: var(--schlecht); min-height: 1.3em; margin-block-start: .6rem; font-size: .9rem; }

label { display: block; font-size: .85rem; color: var(--leise); margin-block: .7rem .25rem; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--rand); border-radius: 8px; padding: .55rem .7rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }

button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); padding: .5rem .9rem; }
button.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; width: 100%; margin-block-start: 1.1rem; padding: .65rem; }
button.klein { padding: .3rem .6rem; font-size: .85rem; }
button.leise { background: transparent; border-color: transparent; color: var(--leise); }
button.gefahr { color: var(--schlecht); }
button:disabled { opacity: .55; cursor: default; }

.reihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.reihe > * { flex: 1 1 10rem; }
.reihe > button { flex: 0 0 auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: .55rem .4rem; border-block-end: 1px solid var(--rand); vertical-align: middle; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); font-weight: 600; }
td.rechts, th.rechts { text-align: end; }
tr.aus td { opacity: .5; }

.marke-punkt { display: inline-block; inline-size: .6em; block-size: .6em; border-radius: 50%; margin-inline-end: .45em; }
.marke-punkt.ein { background: var(--gut); }
.marke-punkt.aus { background: var(--rand); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem; }
.kachel { border: 1px solid var(--rand); border-radius: var(--radius); padding: .8rem; background: var(--bg); }
.kachel .name { font-weight: 600; }
.kachel .zeile { color: var(--leise); font-size: .85rem; }
.kachel.ein { border-inline-start: 4px solid var(--gut); }
.kachel.abw { border-inline-start: 4px solid var(--warn); }

/* Abwesenheits-Knöpfe: klein und leise, bis einer aktiv ist. */
.abw-knoepfe { display: flex; flex-wrap: wrap; gap: .25rem; margin-block-start: .5rem; }
.abw-knoepfe .abw { font-size: .75rem; padding: .2rem .5rem; opacity: .65; }
.abw-knoepfe .abw:hover { opacity: 1; }
.abw-knoepfe .abw.an { background: var(--warn); border-color: var(--warn); color: #1a1200; opacity: 1; font-weight: 600; }

.pille {
  display: inline-block; font-size: .72rem; font-weight: 600; vertical-align: middle;
  background: var(--warn); color: #1a1200; border-radius: 999px; padding: .1rem .55rem; margin-inline-start: .4rem;
}

/* Zugangsdaten im Einmal-Fenster: groß genug zum Vorlesen und Abtippen. */
.zugangswert {
  background: var(--bg); border: 1px solid var(--rand); border-radius: 8px;
  padding: .6rem .8rem; font-size: 1.05rem; word-break: break-all; user-select: all;
}
.zugangswert.gross { font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; }

.warnbox { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--radius); padding: .8rem; margin-block-end: .8rem; }
.warnbox b { color: var(--warn); }

.code-gross {
  font-size: 2.6rem; font-weight: 800; letter-spacing: .35em; text-indent: .35em;
  text-align: center; padding: 1rem; background: var(--bg); border: 2px dashed var(--akzent);
  border-radius: var(--radius); margin-block: .8rem;
}

.hinweis-blase {
  position: fixed; inset-block-end: 1.2rem; inset-inline-start: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--flaeche); padding: .6rem 1.1rem; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 50; font-size: .9rem;
}
.hinweis-blase.an { opacity: 1; }

.mandant, .sprache { width: auto; padding: .35rem .5rem; font-size: .9rem; }

dialog {
  border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche);
  color: var(--text); padding: 1.2rem; width: min(94vw, 26rem);  margin: auto;
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }

.protokoll { font-size: .85rem; }
.protokoll td { vertical-align: top; }
.protokoll .daten { color: var(--leise); word-break: break-word; }

@media (max-width: 620px) {
  .kopf { gap: .5rem; }
  .wer { display: none; }
  th.eng, td.eng { display: none; }
}