:root { --blue:#1f3a5f; --accent:#2f7d8c; --bg:#f5f7f9; --card:#fff; --text:#1b2530; --muted:#5d6b78; --danger:#b3261e; --ok:#2e7d32; --warn:#c47f04; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
header.topbar { background:var(--blue); color:#fff; padding:10px 20px; display:flex; align-items:center; gap:14px; }
header.topbar .brand b { letter-spacing:.04em; }
.spacer { flex:1; }
.layout { display:flex; min-height:calc(100vh - 52px); }
.sidebar { width:210px; background:#fff; border-right:1px solid #e2e8ee; padding:12px 0; flex-shrink:0; }
.navlink { display:block; padding:8px 16px; color:var(--text); text-decoration:none; font-size:14px; }
.navlink:hover { background:#eef3f7; } .navlink.active { background:#e3edf3; border-right:3px solid var(--accent); font-weight:600; }
.content { flex:1; min-width:0; } main { max-width:1150px; margin:20px auto; padding:0 20px; }
h1 { font-size:20px; color:var(--blue); margin:4px 0 16px; }
.card { background:var(--card); border-radius:8px; padding:16px 20px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.card h2 { margin:0 0 12px; font-size:15px; color:var(--blue); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:6px 8px; border-bottom:1px solid #e6ecf1; vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; color:#fff; background:var(--muted); }
.badge.ok { background:var(--ok); } .badge.warn { background:var(--warn); } .badge.crit { background:var(--danger); }
label { display:block; margin:10px 0 4px; font-size:13px; color:var(--muted); }
input,select,textarea { width:100%; padding:8px 10px; border:1px solid #c9d4dd; border-radius:6px; font-size:14px; font-family:inherit; }
button { background:var(--blue); color:#fff; border:0; border-radius:6px; padding:8px 14px; font-size:14px; cursor:pointer; margin:10px 6px 0 0; }
button:hover { background:#2a4d7a; } button.secondary { background:#e7edf2; color:var(--text); }
button.danger { background:var(--danger); }
.error { color:var(--danger); font-size:13px; min-height:18px; margin-top:6px; }
.muted { color:var(--muted); font-size:12px; }
.state { text-align:center; padding:36px; color:var(--muted); }
form.login { max-width:380px; margin:60px auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.kv th { width:190px; }
code { background:#eef3f7; padding:1px 5px; border-radius:4px; font-size:12px; }
.secret { background:#fff8e1; border-left:4px solid var(--warn); padding:10px 14px; margin-top:10px; word-break:break-all; }
@media (max-width:820px){ .layout{flex-direction:column} .sidebar{width:100%;display:flex;overflow-x:auto} }

/* ---------------- JV-0: Jarvis, der persoenliche Arbeitsplatz ----------------
   Ein Faden, keine Kachelwand. Deshalb eine begrenzte Textbreite: Fliesstext ueber die volle
   Bildschirmbreite ist auf einem grossen Monitor unlesbar. */
.jv main, main.jv { max-width: 760px; }
.jv-kopf h1 { font-size: 22px; }
.jv-kopf p { font-size: 15px; line-height: 1.55; margin: 8px 0; }
.jv-punkt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0;
            border-top: 1px solid #eef2f6; font-size: 14px; }
.jv-punkt:first-of-type { border-top: 0; }
.jv-marke { flex: 0 0 1.2rem; color: var(--muted); }
.jv-marke.jv-kritisch { color: var(--danger); }
.jv-marke.jv-wichtig { color: var(--warn); }
/* Die Gegenfrage ist optisch abgesetzt, aber nicht laut: Sie ist ein Einwand, keine Warnung. */
.jv-gegenfrage { border-left: 3px solid var(--accent); background: #f2f7f9;
                 padding: 10px 14px; margin: 14px 0 6px; border-radius: 0 6px 6px 0; }
.jv-gegenfrage p { margin: 0 0 6px; font-size: 15px; }
.jv-stand { margin-top: 12px; padding-top: 8px; border-top: 1px solid #eef2f6; }
/* Quellen sind aufklappbar — immer da, nie im Weg. */
.jv-quelle { margin-top: 4px; font-size: 12px; color: var(--muted); }
.jv-quelle summary { cursor: pointer; }
.jv-eingabe input { font-size: 15px; }
.jv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.jv-chips button, .jv-chip { font-size: 12px; padding: 6px 12px; margin: 0;
  border-radius: 14px; background: #eef3f7; color: var(--text); border: 0;
  text-decoration: none; display: inline-block; }
.jv-antwort { margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef2f6; }

/* ---------------- Mobile: bedienbar, nicht nur lesbar ----------------
   Befunde aus dem V4-Produktreview: die Kopfzeile brach auf 134 px Hoehe um, Tabellen
   sprengten die Seite, Schaltflaechen waren 32 px hoch. */
.tabelle-scroll, .card > table { max-width: 100%; }
@media (max-width: 820px) {
  header.topbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
  header.topbar .brand span { display: none; }          /* der Zusatz kostet eine ganze Zeile */
  .sidebar { width: 100%; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .navlink { white-space: nowrap; padding: 12px 14px; }  /* 44 px Beruehrungsflaeche */
  main { padding: 0 12px; margin: 12px auto; }
  /* Eine Tabelle scrollt IN SICH, statt die Seite zu sprengen. */
  .card { overflow-x: auto; }
  table { min-width: 0; }
  button, .navlink, summary { min-height: 44px; }
  button { padding: 11px 16px; }
  input, select, textarea { font-size: 16px; padding: 11px 12px; }  /* 16 px verhindert Zoom */
  .jv-kopf h1 { font-size: 19px; }
  .jv-chips button, .jv-chip { min-height: 44px; padding: 12px 14px; }
}

/* Sehr schmal (Telefon hochkant): die Kopfzeile darf nicht ein Fuenftel des Bildschirms
   kosten. Gemessen wurden 191 px, weil Name, Arbeitsbereich, Betriebsampel und Abmelden
   nebeneinander nicht passen und dreimal umbrechen. */
@media (max-width: 480px) {
  header.topbar { padding: 6px 10px; gap: 6px; font-size: 13px; }
  header.topbar .brand b { font-size: 13px; }
  header.topbar > a[title='Systemzustand'], header.topbar .muted { display: none; }
  header.topbar button { padding: 8px 10px; font-size: 12px; min-height: 38px; }
  /* Der Arbeitsbereich bleibt sichtbar, aber gekuerzt — die Rangfolge Person ▸ Bereich
     bleibt erhalten, nur der Funktionszusatz weicht. */
  header.topbar .jv-kontextknopf {
    max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}