/* myoffice.css — Layout des Host-Shells. Farben NUR aus theme.css (§3.3). */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--bs-font);
  background: var(--bs-bg);
  color: var(--bs-text);
}

a { color: var(--bs-akzent); }

/* ---- Kopfleiste ---- */
.kopf {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem 1.2rem;
  background: var(--bs-primary);
  color: var(--bs-on-primary);
}
.kopf .marke { font-weight: 600; font-size: 1.05rem; color: var(--bs-on-primary); text-decoration: none; }
.kopf .nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
.kopf .nav a { color: var(--bs-on-primary); opacity: .88; text-decoration: none; }
.kopf .nav a:hover { opacity: 1; text-decoration: underline; }
.kopf-rechts { display: flex; gap: .5rem; align-items: center; }

.knopf-flach {
  background: transparent; border: 1px solid var(--bs-on-primary);
  color: var(--bs-on-primary); border-radius: 6px;
  padding: .25rem .6rem; font: inherit; cursor: pointer; text-decoration: none;
}

/* ---- Inhalt ---- */
.inhalt { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }
.muted { color: var(--bs-muted); }

.meldung, .fehler {
  border: 1px solid var(--bs-border); border-left-width: 4px;
  background: var(--bs-bg-alt); border-radius: 6px;
  padding: .7rem 1rem; margin-bottom: 1.2rem;
}
.fehler { border-left-color: var(--bs-fehler); }
.fehler ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---- Dashboard ---- */
.kacheln {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.kachel {
  display: block; text-decoration: none; color: inherit;
  background: var(--bs-bg-alt); border: 1px solid var(--bs-border);
  border-radius: 10px; padding: 1rem 1.1rem;
}
.kachel:hover { border-color: var(--bs-primary); }
.kachel h2 { margin: 0 0 .8rem; font-size: 1.05rem; }
.zahlen { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.zahl { display: flex; flex-direction: column; }
.zahl .wert { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.zahl .label { font-size: .8rem; color: var(--bs-muted); }
.warnungen { margin: .9rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: var(--bs-warnung); }
.warnungen .anzahl { font-weight: 600; }

/* ---- Login ---- */
.login-karte {
  max-width: 340px; margin: 12vh auto 0;
  background: var(--bs-bg-alt); border: 1px solid var(--bs-border);
  border-radius: 10px; padding: 1.6rem;
}
.login-karte h1 { margin: 0 0 .2rem; font-size: 1.3rem; }
.login-karte form { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.2rem; }
.login-karte label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--bs-muted); }
.login-karte input {
  font: inherit; padding: .5rem .6rem; border-radius: 6px;
  border: 1px solid var(--bs-border); background: var(--bs-bg); color: var(--bs-text);
}
.knopf {
  font: inherit; padding: .55rem 1rem; border: 0; border-radius: 6px;
  background: var(--bs-primary); color: var(--bs-on-primary); cursor: pointer;
}

/* ---- Host-Leiste, die in die Baustein-Seiten injiziert wird ---- */
/* Die Regeln der Host-Leiste stehen NICHT hier, sondern in app.py bei der
   Leiste selbst: Diese Datei wird auf Baustein-Seiten gar nicht geladen (die
   bringen ihr eigenes Stylesheet mit, der _head.html-Override reicht nur das
   Theme durch) — und genau dort erscheint die Leiste. Hier waren die Regeln
   tot, und die Leiste stand ungestylt da: alle Links ohne Abstand aneinander.
   GESEHEN am 07.09.2026, nicht gemessen; eine gruene Suite haette es nie
   gezeigt. */

/* Sprachwahl im Kopf — der EINE Umschalter des Hauses. Die Bausteine bringen
   eigene mit; im Host sind sie ausgeblendet, und Thai fängt die Sprachschranke. */
.sprachwahl { display: inline-flex; gap: .25rem; }
.sprachwahl a { font-size: .72rem; padding: .2rem .4rem; opacity: .7; }
.sprachwahl a.aktiv { opacity: 1; font-weight: 700; }

/* ---- Benutzerverwaltung ---- */
/* Nur der Host hat sie: wer sich anmelden darf, ist keine Frage eines
   Bausteins. Seit 08.09.2026, als aus einem Benutzer zwei wurden. */
.wer-bin-ich { font-size: .8rem; color: var(--bs-muted); }

table.liste { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
table.liste th, table.liste td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bs-border);
  vertical-align: middle;
}
table.liste th { font-size: .75rem; text-transform: uppercase; color: var(--bs-muted); }
table.liste tr.still { opacity: .5; }
table.liste input {
  font: inherit; font-size: .85rem; padding: .3rem .45rem; border-radius: 5px;
  border: 1px solid var(--bs-border); background: var(--bs-bg); color: var(--bs-text);
  max-width: 11rem;
}
form.inline { display: flex; gap: .3rem; align-items: center; margin: 0; }

/* NICHT `.knopf-flach` — der ist auf `--bs-on-primary` gebaut und lebt im
   dunklen Kopfbalken. Auf dem hellen Inhalt stand er praktisch unsichtbar da.
   GESEHEN am 08.09.2026 im Bild, nicht gemessen. */
.knopf-zeile {
  background: transparent; border: 1px solid var(--bs-border);
  color: var(--bs-text); border-radius: 6px;
  padding: .25rem .6rem; font: inherit; font-size: .85rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knopf-zeile:hover { border-color: var(--bs-primary); color: var(--bs-primary); }

form.anlegen {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  padding: 1rem; border: 1px solid var(--bs-border); border-radius: 8px;
}
form.anlegen label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .8rem; color: var(--bs-muted);
}
form.anlegen label.kasterl { flex-direction: row; align-items: center; gap: .4rem; }
form.anlegen input {
  font: inherit; padding: .45rem .6rem; border-radius: 6px;
  border: 1px solid var(--bs-border); background: var(--bs-bg); color: var(--bs-text);
}
form.anlegen input[type="checkbox"] { width: auto; }
form.anlegen button {
  font: inherit; padding: .5rem 1rem; border: 0; border-radius: 6px;
  background: var(--bs-primary); color: var(--bs-on-primary); cursor: pointer;
}