/* ══════════════════════════════════════════════════════════════════════════
   PIN-Roboter — Oberfläche
   Grundlage: docs/06-ux-konzept.md, freigegeben vom PO am 07.08.2026.

   Zwei Regeln, die alles andere tragen:

   1. Farbe ist nie das einzige Unterscheidungsmerkmal (WCAG 2.2 AA). Jeder
      Zustand trägt zusätzlich Symbol und Text.
   2. Unter jeder Glasfläche liegt eine DECKENDE Farbe mit geprüftem Kontrast.
      Der Unschärfeeffekt ist Zugabe, nie Voraussetzung — fällt er aus, ändert
      sich die Lesbarkeit nicht.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Grundflächen. Die Neutralen haben einen Blaustich Richtung Akzent —
     ein reines Mittelgrau wirkt unentschieden. */
  --grund:       #e8ecf3;
  --grund-tief:  #dbe2ee;

  /* Glas. --karte ist die Zusage, --glas die Zugabe. */
  --karte:       #ffffff;
  --glas:        rgba(255, 255, 255, .78);
  --glas-rand:   rgba(255, 255, 255, .85);
  --rand:        #c3cddd;

  /* WCAG 2.2, Kriterium 1.4.11 verlangt 3:1 für die Begrenzung von
     Bedienelementen. Der dekorative --rand genügt dafür nicht. */
  --rand-bedien: #6b7280;

  --text:        #101623;
  --gedaempft:   #55606f;

  /* Semantik. Gemessen mit pruefungen/barrierefreiheit/kontraste.mjs. */
  --ok:          #0f7b3f;  --ok-hg:        #e2f2e9;
  --warnung:     #8a5300;  --warnung-hg:   #fbf0dd;
  --fehler:      #a51f1f;  --fehler-hg:    #fbe7e7;
  --unbekannt:   #45505f;  --unbekannt-hg: #e7ebf1;

  /* Königsblau, bewusst weit weg von Grün, Amber und Rot: Der Akzent darf nie
     mit einer Zustandsfarbe verwechselbar sein. */
  --akzent:      #1e3a8f;
  --akzent-hg:   #e3e9f8;
  --auf-akzent:  #ffffff;

  /* ── Abstandsraster ───────────────────────────────────────────────────
     Vor dem 09.08.2026 standen hier 37 verschiedene Abstandswerte, jeder
     einzeln nach Augenmaß gesetzt. Das Ergebnis waren Kacheln, die
     nebeneinander unterschiedlich weit atmeten — sichtbar unruhig, ohne dass
     man den Grund benennen konnte.

     Jetzt gilt eine Vierer-Reihe (4/8/12/16/24/32 px). Sie ist nicht schöner
     als andere Werte, aber sie ist EINE, und Gleichmaß entsteht nur aus
     Wiederholung. Neue Abstände werden aus dieser Reihe genommen, nicht
     erfunden. */
  --r1: .25rem;   /*  4px — innerhalb einer Zeile, Symbol zu Text */
  --r2: .5rem;    /*  8px — zwischen Geschwistern, Knopf zu Knopf */
  --r3: .75rem;   /* 12px — innerhalb einer Gruppe */
  --r4: 1rem;     /* 16px — Standardinnenabstand, Zellen, Kartenrand */
  --r5: 1.5rem;   /* 24px — zwischen Kacheln und Tafeln */
  --r6: 2rem;     /* 32px — großzügige Leerzustände */

  /* Kartenrandwerte, die überall gleich sein müssen: Kopf, Leib, Zelle.
     Sie hängen am Raster, damit eine Änderung alle Flächen zugleich trifft. */
  --karte-x:  var(--r5);   /* waagerechter Innenabstand jeder Karte */
  --karte-y:  var(--r4);   /* senkrechter Innenabstand von Kopf und Fuß */
  --zelle-y:  var(--r3);   /* Zeilenhöhe der Tabellen */

  --radius:       18px;
  --radius-klein: 10px;
  --schatten:
     0 1px 2px rgba(16, 22, 35, .05),
     0 8px 24px -8px rgba(16, 22, 35, .14),
     0 24px 48px -24px rgba(16, 22, 35, .18);

  --schrift:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maschine: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:#0c1017; --grund-tief:#070a10;
    --karte:#181f2d; --glas:rgba(24,31,45,.76); --glas-rand:rgba(120,140,175,.16);
    --rand:#2b3648; --rand-bedien:#8a94a3;
    --text:#e7ecf4; --gedaempft:#98a4b6;
    --ok:#5dcb8d; --ok-hg:#10281c; --warnung:#e3ad5c; --warnung-hg:#2a2013;
    --fehler:#f28c8c; --fehler-hg:#2c1717; --unbekannt:#a3aec0; --unbekannt-hg:#1d242f;
    --akzent:#93b4ff; --akzent-hg:#1a2440; --auf-akzent:#0c1017;
    --schatten: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh;
  background: var(--grund); color: var(--text);
  font: 15px/1.55 var(--schrift);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }
.nurLeser { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Der Lichtschein hinter dem Glas. Ruhig und kontrastarm — nur so bleibt der
   Textkontrast auf den Karten in einem berechenbaren Band. */
.schein {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(58rem 40rem at 12% -8%,  color-mix(in oklab, var(--akzent) 16%, transparent), transparent 62%),
    radial-gradient(46rem 34rem at 92% 6%,   color-mix(in oklab, var(--ok) 11%, transparent),     transparent 60%),
    radial-gradient(52rem 40rem at 68% 104%, color-mix(in oklab, var(--akzent) 12%, transparent), transparent 62%),
    linear-gradient(168deg, var(--grund), var(--grund-tief));
}
.schein::after {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(34rem 26rem at 50% 50%,
              color-mix(in oklab, var(--akzent) 9%, transparent), transparent 65%);
  animation: wandern 46s ease-in-out infinite alternate;
}
@keyframes wandern {
  from { transform: translate3d(-8%, -4%, 0); }
  to   { transform: translate3d(10%, 6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .schein::after { animation: none; }
  * { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────── Glasflächen */

.tafel, .leiste, .seitenkopf {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .tafel, .leiste, .seitenkopf {
    background: var(--glas);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    border-color: var(--glas-rand);
  }
}
/* Wer Transparenz im System abgeschaltet hat, bekommt volle Deckung. */
@media (prefers-reduced-transparency: reduce) {
  .tafel, .leiste, .seitenkopf {
    background: var(--karte) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: var(--rand) !important;
  }
}

/* ─────────────────────────────────────────────────────────────── Gerüst */

.rahmen {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 15.5rem 1fr;
  gap:var(--r4); padding:var(--r4);
  max-width: 1500px; margin: 0 auto; min-height: 100vh;
}

.leiste {
  position: sticky; top: var(--r4); align-self: start;
  max-height: calc(100vh - 2 * var(--r4));
  display: flex; flex-direction: column; padding:var(--r4) var(--r3);
  overflow-y: auto;
}
.marke-kopf { display:flex; align-items:center; gap:var(--r3); padding:var(--r1) var(--r2) var(--r4); }
.marke-zeichen {
  width:2.1rem; height:2.1rem; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--akzent); color:var(--auf-akzent); font-weight:700; font-size:.82rem;
  letter-spacing:-.03em;
}
.marke-text { font-weight:660; letter-spacing:-.02em; line-height:1.15; min-width:0; }
.marke-text small {
  display:block; font-weight:400; font-size:.74rem; color:var(--gedaempft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

nav.bereiche { display:flex; flex-direction:column; gap:var(--r1); }
.bereich-titel {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--gedaempft); font-weight:600; padding:var(--r4) var(--r3) var(--r1);
}
nav.bereiche a, .leiste .knopf-leiste {
  display:flex; align-items:center; gap:var(--r2); width:100%;
  padding:var(--r2) var(--r3); border:0; border-radius:var(--radius-klein);
  background:transparent; color:var(--gedaempft); text-decoration:none;
  font:inherit; font-weight:520; font-size:.92rem; text-align:left; cursor:pointer;
  transition: background .16s, color .16s;
}
nav.bereiche a:hover, .leiste .knopf-leiste:hover { background:var(--akzent-hg); color:var(--akzent); }
nav.bereiche a[aria-current="page"] { background:var(--akzent-hg); color:var(--akzent); font-weight:650; }
nav.bereiche svg, .leiste .knopf-leiste svg { flex:none; width:1.05rem; height:1.05rem; }
.zahl-bereich {
  margin-left:auto; font:600 .74rem/1 var(--maschine);
  padding:var(--r1) var(--r2); border-radius:5px; background:var(--fehler-hg); color:var(--fehler);
}

.leiste-fuss { margin-top:auto; padding-top:var(--r4); border-top:1px solid var(--rand); }
.angemeldet { display:flex; align-items:center; gap:var(--r2); padding:var(--r1) var(--r2); min-width:0; }
.konto-kreis {
  width:1.9rem; height:1.9rem; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--akzent-hg); color:var(--akzent); font-weight:660; font-size:.76rem;
}
.konto-text { font-size:.84rem; line-height:1.25; min-width:0; }
.konto-text b { font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.konto-text span { color:var(--gedaempft); font-size:.76rem; }

main { min-width:0; display:flex; flex-direction:column; gap:var(--r4); }
/* Ein Einschub, der mehrere Karten enthaelt, muss seinen Abstand selbst
   herstellen: main verteilt nur zwischen seinen direkten Kindern.
   AUSDRUECKLICH nur die beiden HTMX-Einschuebe der Lage-Seite — ein
   allgemeines "main > div" traf auch den Seitenkopf und legte dessen
   Zeilenaufbau auf Spalten um. */
#alarme, #lage { display:flex; flex-direction:column; gap:var(--r4); }
#alarme:empty, #lage:empty { display:none; }

.seitenkopf { display:flex; align-items:flex-start; gap:var(--r4); padding:var(--karte-y) var(--karte-x); flex-wrap:wrap; }
.seitenkopf h2 { margin:0; font-size:1.32rem; font-weight:680; letter-spacing:-.025em; text-wrap:balance; }
.seitenkopf .unterzeile { margin:var(--r1) 0 0; }
.kopf-rechts { margin-left:auto; display:flex; gap:var(--r2); align-items:center; flex-wrap:wrap; }

h2 { font-size:1.32rem; margin:0 0 var(--r1); letter-spacing:-.025em; font-weight:680; }
h2:focus { outline:none; }   /* bekommt beim Seitenwechsel den Fokus, ist aber kein Bedienelement */
.unterzeile { color:var(--gedaempft); margin:0; font-size:.9rem; }

.zurueck {
  display:inline-flex; align-items:center; gap:var(--r1); color:var(--akzent);
  text-decoration:none; font-size:.86rem; font-weight:560; margin-bottom:var(--r1);
}
.zurueck:hover { text-decoration:underline; }

/* ─────────────────────────────────────────────────────────────── Kennzahlen */

/* Alle Kacheln gleich hoch, und die Zahlen auf EINER Linie.
   Vorher richtete sich jede Kachel nach ihrem eigenen Inhalt: „Brauchen
   Aufmerksamkeit" braucht zwei Zeilen Überschrift, „Handlungsbedarf" eine —
   also standen die Zahlen nebeneinander auf verschiedener Höhe. Das ist die
   Unregelmäßigkeit, die man sieht, ohne sie benennen zu können.
   grid-auto-rows:1fr gibt allen dieselbe Höhe, margin-top:auto schiebt die
   Zahl in jeder Kachel an dieselbe Stelle. */
.lage { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
        gap:var(--r4); grid-auto-rows:1fr; }
.kachel { display:flex; flex-direction:column; }
.kachel .zahl { margin-top:auto; }
.kachel {
  background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius);
  padding:var(--karte-y) var(--karte-x); box-shadow:var(--schatten);
  text-decoration:none; color:inherit; transition: border-color .15s, transform .12s;
}
@supports (backdrop-filter: blur(1px)) {
  .kachel { background:var(--glas); backdrop-filter:blur(22px) saturate(150%);
            -webkit-backdrop-filter:blur(22px) saturate(150%); border-color:var(--glas-rand); }
}
@media (prefers-reduced-transparency: reduce) {
  .kachel { background:var(--karte) !important; backdrop-filter:none !important;
            -webkit-backdrop-filter:none !important; border-color:var(--rand) !important; }
}
a.kachel:hover { border-color:var(--akzent); transform:translateY(-1px); }
.kachel .zahl {
  font:700 2rem/1.1 var(--schrift); letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.kachel .bez {
  font-size:.74rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--gedaempft); font-weight:620; margin-bottom:var(--r1);
}
.kachel .fuss { font-size:.8rem; color:var(--gedaempft); margin-top:var(--r1); display:block; }
.kachel.ok .zahl { color:var(--ok); }
.kachel.warnung .zahl { color:var(--warnung); }
.kachel.fehler .zahl { color:var(--fehler); }
.kachel.unbekannt .zahl { color:var(--unbekannt); }

/* Verlaufsbalken: „34 verifiziert" sagt weniger als „34 von 36, 1 gesperrt". */
.balken { display:flex; height:6px; border-radius:3px; overflow:hidden; margin-top:var(--r2); gap:2px; }
.balken i { display:block; }
.balken .b-ok { background:var(--ok); }
.balken .b-warn { background:var(--warnung); }
.balken .b-krit { background:var(--fehler); }
.balken .b-ruh { background:var(--unbekannt); opacity:.45; }

/* ─────────────────────────────────────────────────────────────── Tafeln */

.tafel { overflow:hidden; }
.tafel > h3 {
  margin:0; padding:var(--karte-y) var(--karte-x); border-bottom:1px solid var(--rand);
  font-size:1rem; font-weight:650; letter-spacing:-.015em;
  display:flex; align-items:center; gap:var(--r3); flex-wrap:wrap;
}
.tafel > h3 .zaehler {
  font:600 .74rem/1 var(--maschine); padding:var(--r1) var(--r2); border-radius:5px;
  background:var(--akzent-hg); color:var(--akzent);
}
.tafel > h3 .rechts { margin-left:auto; display:flex; gap:var(--r2); align-items:center; }

.zweispaltig { display:grid; grid-template-columns:1.55fr 1fr; gap:var(--r4); align-items:start; }
.zweispaltig > * { min-width:0; }
@media (max-width:1100px) { .zweispaltig { grid-template-columns:1fr; } }

/* ─────────────────────────────────────────────────────────────── Tabellen */

.rollbar {
  overflow-x:auto;
  /* Zwei Verläufe, die nur erscheinen, wenn tatsächlich etwas außerhalb liegt:
     Der weiße Deckverlauf sitzt fest am Rand, der graue Schatten scrollt mit
     und wird vom weißen verdeckt, sobald man am Ende angekommen ist. So sieht
     man, dass rechts mehr steht — ohne Rollbalken, den macOS ausblendet. */
  background:
    linear-gradient(to right, var(--karte) 30%, transparent) left / 2.5rem 100% no-repeat,
    linear-gradient(to left,  var(--karte) 30%, transparent) right / 2.5rem 100% no-repeat,
    radial-gradient(farthest-side at 0    50%, rgba(16,22,35,.14), transparent) left / .7rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(16,22,35,.14), transparent) right / .7rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
table { width:100%; border-collapse:collapse; font-size:.89rem; }
th {
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--gedaempft); font-weight:620; padding:var(--r2) var(--karte-x); white-space:nowrap;
  border-bottom:1px solid var(--rand);
}
td { padding:var(--zelle-y) var(--karte-x); border-bottom:1px solid var(--rand); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition: background .13s; }
tbody tr:hover { background:var(--akzent-hg); }
/* ── Klickbare Zeilen ─────────────────────────────────────────────────────
   Bis zum 09.08.2026 trug jede Zeile einen eigenen „Öffnen"-Knopf. Bei
   25 Zeilen sind das 25 Knöpfe, die alle dasselbe sagen — Lärm, der das
   Auge von den Daten abzieht, und ein zusätzliches Ziel, das getroffen
   werden will.

   Jetzt öffnet die ganze Zeile. Barrierefrei bleibt das nur mit einem
   ECHTEN Link in der ersten Zelle: Er trägt den Namen, ist mit der Tastatur
   erreichbar, und ein Screenreader liest „Link: Kardiologie Nord" statt
   einer stummen Fläche. Der Zeilenklick ist reine Mausbequemlichkeit
   obendrauf (siehe zeilenklick in oberflaeche.js) — fällt JavaScript aus,
   funktioniert die Liste unverändert. */
tr.klickbar { cursor:pointer; }
tr.klickbar a.zeilenziel { color:inherit; text-decoration:none; font-weight:600; }
tr.klickbar:hover a.zeilenziel { color:var(--akzent); text-decoration:underline; }
/* Sichtbarer Zeilenfokus: Wer mit der Tastatur navigiert, muss sehen,
   welche Zeile das Enter treffen würde — nicht nur welcher Link. */
tr.klickbar:focus-within { background:var(--akzent-hg); box-shadow:inset 3px 0 0 var(--akzent); }

td.zeit { white-space:nowrap; color:var(--gedaempft); font-variant-numeric:tabular-nums; font-family:var(--maschine); font-size:.82rem; }
td.geraet { font-weight:570; }
tr.quittiert { opacity:.62; }
tr.stillgelegt { opacity:.6; }

/* ─────────────────────────────────────────────────────────────── Zustandsmarken */

.marke {
  display:inline-flex; align-items:center; gap:var(--r1);
  padding:var(--r1) var(--r2); border-radius:999px;
  font-size:.78rem; font-weight:600; white-space:nowrap;
}
.marke .sym { font-weight:800; }
.marke.ok { background:var(--ok-hg); color:var(--ok); }
.marke.warnung { background:var(--warnung-hg); color:var(--warnung); }
.marke.fehler { background:var(--fehler-hg); color:var(--fehler); }
.marke.unbekannt { background:var(--unbekannt-hg); color:var(--unbekannt); }

.handlung {
  margin-top:var(--r1); font-size:.84rem; color:var(--gedaempft);
  border-left:3px solid var(--warnung); padding-left:var(--r2);
}
.leer { padding:var(--r6) var(--r4); text-align:center; color:var(--gedaempft); font-size:.9rem; }

/* ─────────────────────────────────────────────────────────────── Bedienelemente */

select, input[type=search], input[type=text], input[type=password], input:not([type]) {
  padding:var(--r2) var(--r3); border:1px solid var(--rand-bedien); border-radius:var(--radius-klein);
  background:var(--karte); color:var(--text); font:inherit; font-size:.9rem;
}
input::placeholder { color:var(--gedaempft); }
select:focus, input:focus { border-color:var(--akzent); }

.knopf {
  padding:var(--r2) var(--r3); border:1px solid var(--rand-bedien); border-radius:var(--radius-klein);
  background:var(--karte); color:var(--text); font:inherit; font-size:.88rem;
  font-weight:560; cursor:pointer; transition: border-color .16s, color .16s, transform .1s;
  text-decoration:none; display:inline-flex; align-items:center; gap:var(--r1);
}
.knopf:hover { border-color:var(--akzent); color:var(--akzent); }
.knopf:active { transform:translateY(1px); }
.knopf.warnend { color:var(--fehler); border-color:var(--fehler); }
.knopf.warnend:hover { background:var(--fehler-hg); color:var(--fehler); }
.knopf.gesperrt { opacity:.45; cursor:default; }
.knopf.gesperrt:hover { border-color:var(--rand-bedien); color:var(--text); }
/* In Tabellenzeilen zählt jeder Pixel: Bei acht Spalten entscheidet die
   Aktionsspalte darüber, ob die Tabelle ins Bild passt. */
.knopf.klein { padding:var(--r1) var(--r2); font-size:.82rem; }
td.aktionen > * { margin-left:var(--r1); }
/* Die Aktionsspalte braucht rechts nicht den vollen Kartenrand: Die Knöpfe
   tragen ihren eigenen Rand, und die Spalte steht ohnehin am Zeilenende. */
tr > td.aktionen:last-child, tr > th:last-child { padding-right:var(--r3); }
.knopf.haupt {
  background:var(--akzent); color:var(--auf-akzent); border-color:var(--akzent); font-weight:620;
}
.knopf.haupt:hover { filter:brightness(1.12); color:var(--auf-akzent); border-color:var(--akzent); }

.hinweis {
  display:block; padding:var(--r3) var(--r4); border-radius:var(--radius-klein);
  background:var(--akzent-hg); font-size:.87rem; line-height:1.55;
  border:1px solid color-mix(in oklab, var(--akzent) 22%, transparent);
}
.hinweis strong { display:block; margin-bottom:var(--r1); }
.hinweis.warnend { background:var(--warnung-hg); border-color:color-mix(in oklab, var(--warnung) 30%, transparent); }
.hinweis.gut { background:var(--ok-hg); border-color:color-mix(in oklab, var(--ok) 30%, transparent); }

code {
  font-family:var(--maschine); font-size:.86em; font-variant-numeric:tabular-nums;
  background:var(--unbekannt-hg); padding:var(--r1) var(--r1); border-radius:4px;
}
.kennung { font:.82rem/1.4 var(--maschine); color:var(--gedaempft); font-variant-numeric:tabular-nums; }

.puls { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok);
  animation:puls 2s ease-in-out infinite; }
@keyframes puls { 0%,100%{opacity:1} 50%{opacity:.25} }
@media (prefers-reduced-motion: reduce) { .puls { animation:none; } }

/* ─────────────────────────────────────────────────────────────── Live-Suche */

.suchleiste {
  display:flex; gap:var(--r3); align-items:center; flex-wrap:wrap;
  padding:var(--r3) var(--r4); border-bottom:1px solid var(--rand);
}
.suchfeld { position:relative; flex:1 1 16rem; min-width:12rem; max-width:26rem; }
.suchfeld svg {
  position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
  width:1rem; height:1rem; color:var(--gedaempft); pointer-events:none;
}
.suchfeld input { width:100%; padding-left:2.1rem; }
.suchstand { font-size:.8rem; color:var(--gedaempft); white-space:nowrap; }
/* HTMX setzt diese Klasse waehrend einer laufenden Abfrage. Ein Hauch
   Transparenz zeigt, dass gearbeitet wird — ohne Springen. */
.htmx-request .traegt { opacity:.55; transition:opacity .15s; }

/* ─────────────────────────────────────────────────────────────── Formulare */

.maske { padding:var(--r4); display:flex; flex-direction:column; gap:var(--r4); }
/* Ein Knopf ist so breit wie seine Beschriftung — auch in einer Maske.
   Ohne diese Regel zieht das voreingestellte align-items:stretch der
   Flex-Spalte ihn über die ganze Kartenbreite. Ein style="width:auto" half
   dagegen nicht: Die Breite kommt hier von align-self, nicht von width.
   Am 10.08.2026 vom PO an "Mailserver speichern" und "Regel speichern"
   gesehen. */
.maske > .knopf, .maske > button, .maske > form > .knopf { align-self:flex-start; }
.feldgruppe { display:flex; flex-direction:column; gap:var(--r1); flex:1 1 14rem; min-width:0; }
.feldgruppe label { font-size:.81rem; font-weight:600; }
.feldreihe { display:flex; gap:var(--r4); flex-wrap:wrap; }
.maske input, .maske select { width:100%; }
.maske input[readonly] { background:var(--unbekannt-hg); color:var(--gedaempft); }
.maske fieldset {
  border:1px solid var(--rand); border-radius:var(--radius-klein); padding:var(--r4) var(--r4);
  display:flex; flex-direction:column; gap:var(--r4); margin:0;
}
.maske legend { font-size:.84rem; font-weight:640; padding:0 var(--r2); }
.hilfe { margin:0; font-size:.82rem; color:var(--gedaempft); line-height:1.5; }
.optional { font-weight:400; color:var(--gedaempft); }
.ankreuz { display:flex; align-items:flex-start; gap:var(--r2); }
.ankreuz input { width:1.15rem; height:1.15rem; margin:var(--r1) 0 0; flex:none; }
.ankreuz label { font-size:.9rem; font-weight:500; }

form label { display:block; margin:var(--r4) 0 var(--r1); font-weight:560; font-size:.9rem; }
.feldhinweis { color:var(--gedaempft); font-size:.84rem; margin:var(--r2) 0 0; }

.filter, .filterleiste {
  display:flex; gap:var(--r4); align-items:flex-end; flex-wrap:wrap;
  padding:var(--karte-y) var(--karte-x); border-bottom:1px solid var(--rand);
}
.filterleiste .feldgruppe { flex:0 1 15rem; }
.filterleiste .knopf { height:2.35rem; }

.ausklapp { border-top:1px solid var(--rand); }
.ausklapp > summary {
  padding:var(--r3) var(--r4); cursor:pointer; font-weight:600; font-size:.9rem;
  color:var(--akzent); list-style-position:inside;
}
.ausklapp > summary:hover { background:var(--akzent-hg); }
.ausklapp[open] > summary { border-bottom:1px solid var(--rand); }

.blaettern {
  display:flex; align-items:center; justify-content:space-between; gap:var(--r4);
  padding:var(--r3) var(--r4); border-top:1px solid var(--rand); font-size:.86rem;
  color:var(--gedaempft); flex-wrap:wrap;
}

td.aktionen { text-align:right; white-space:nowrap; }
td.aktionen > * { display:inline-flex; vertical-align:middle; margin:0 0 0 var(--r2); }
td.aktionen > *:first-child { margin-left:0; }
td.aktionen .reihe { margin:0 0 0 var(--r2); }
td.klein, .klein { font-size:.84rem; color:var(--gedaempft); }

/* ── Knopfanordnung ───────────────────────────────────────────────────────
   Eine Regel, damit Knöpfe nicht auf jeder Seite woanders stehen:

     • Die Haupthandlung steht RECHTS am Ende der Reihe — dort endet die
       Lesebewegung, und dort erwartet sie jedes andere Programm auch.
     • Nebenhandlungen stehen links davon, in der Reihenfolge ihrer
       Häufigkeit.
     • Destruktives wird ABGESETZT (margin-left:auto in der Zeilenaktion),
       damit „Löschen" nicht direkt neben „Speichern" liegt. Der häufigste
       Fehlgriff in Oberflächen ist der Nachbarknopf.

   Zahlenspalten laufen rechtsbündig mit Tabellenziffern: Nur so lassen sich
   Größenordnungen im Vorbeischauen vergleichen. */
.reihe-enden { display:flex; gap:var(--r3); flex-wrap:wrap; align-items:flex-end; }
.reihe-eng   { display:flex; gap:var(--r1); align-items:center; }
.knopfreihe  { display:flex; gap:var(--r2); align-items:center; margin-left:auto; }
td.zahl-zelle, th.zahl-zelle { text-align:right; font-variant-numeric:tabular-nums; }


/* ─────────────────────────────────────────────────────────────── Beziehungen */

/* Zweispaltige Auskunft: Bezeichnung links, Wert rechts. Bei schmalem
   Fenster untereinander - erzwungene Spalten waeren auf dem Tablet unlesbar. */
.angaben { display:grid; grid-template-columns:auto 1fr; gap:var(--r2) var(--r4); margin:0; }
.angaben dt { color:var(--gedaempft); font-size:.9rem; }
.angaben dd { margin:0; }
@media (max-width:34rem) { .angaben { grid-template-columns:1fr; gap:var(--r1); }
  .angaben dd { margin-bottom:var(--r2); } }

/* Aufzaehlung mit Handlung am Zeilenende (z. B. Mitnutzer eines Konnektors). */
.beziehungsliste { list-style:none; margin:var(--r3) 0; padding:0;
  display:flex; flex-direction:column; gap:var(--r1); }
.beziehungsliste li { display:flex; align-items:center; justify-content:space-between;
  gap:var(--r3); padding:var(--r2) var(--r3); border:1px solid var(--rand);
  border-radius:var(--radius-klein); }
.inlineform { margin:0; }

.beziehungen {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:var(--r3);
}
.beziehung {
  display:flex; flex-direction:column; gap:var(--r1); padding:var(--r3) var(--r4);
  border:1px solid var(--rand); border-radius:var(--radius-klein);
  background:transparent; color:inherit; font:inherit; text-align:left;
  text-decoration:none; cursor:pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.beziehung:hover { border-color:var(--akzent); background:var(--akzent-hg); transform:translateY(-1px); }
.beziehung .zahl { font:700 1.5rem/1.15 var(--schrift); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.beziehung .was { font-size:.8rem; color:var(--gedaempft); font-weight:550; }
.beziehung .hin { font-size:.74rem; color:var(--akzent); font-weight:600; margin-top:var(--r1); }

/* ─────────────────────────────────────────────────────────────── Baum */

.baum { display:flex; flex-direction:column; }
.ast {
  display:flex; align-items:center; gap:var(--r3); width:100%;
  padding:var(--r2) var(--r4); border:0; border-bottom:1px solid var(--rand);
  background:transparent; color:var(--text); font:inherit; text-align:left;
  text-decoration:none; cursor:pointer; transition: background .13s;
}
.ast:last-child { border-bottom:none; }
.ast:hover { background:var(--akzent-hg); }
.ast-name { font-weight:570; }
.ast-art { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gedaempft); font-weight:620; }
.ast-zahlen { margin-left:auto; display:flex; gap:var(--r4); font-size:.8rem; color:var(--gedaempft); flex-wrap:wrap; }
.ast-zahlen span { font-variant-numeric:tabular-nums; }
.ast-pfeil { color:var(--gedaempft); flex:none; }

/* ─────────────────────────────────────────────────────────────── Verlauf */

.eintrag { display:flex; gap:var(--r3); padding:var(--r3) var(--r4); border-bottom:1px solid var(--rand); align-items:flex-start; }
.eintrag:last-child { border-bottom:none; }
.eintrag-streifen { width:3px; border-radius:2px; align-self:stretch; flex:none; background:var(--unbekannt); opacity:.4; }
.eintrag.e-fehler .eintrag-streifen { background:var(--fehler); opacity:1; }
.eintrag.e-warnung .eintrag-streifen { background:var(--warnung); opacity:1; }
.eintrag.e-ok .eintrag-streifen { background:var(--ok); opacity:1; }
.eintrag-text { min-width:0; flex:1; }
.eintrag-text b { display:block; font-weight:600; font-size:.91rem; }
.eintrag-text .wann { font:.76rem/1 var(--maschine); color:var(--gedaempft); margin-top:var(--r1); display:block; }

/* ─────────────────────────────────────────────────────────────── Anmeldung */

body.anmeldeseite { display:grid; place-items:center; min-height:100vh; padding:var(--r5); }
body.anmeldeseite main { width:100%; max-width:480px; }
main.anmeldung { width:100%; max-width:480px; }
.anmeldeinhalt { padding:var(--r5); }
.anmeldeinhalt .unterzeile { margin-bottom:var(--r4); }
.anmeldeinhalt form input { width:100%; }
.anmeldeinhalt .knopf.haupt { margin-top:var(--r5); width:100%; justify-content:center; padding:var(--r3) var(--r4); }
.schritte { padding-left:var(--r5); margin:var(--r4) 0; }
.schritte li { margin-bottom:var(--r4); }
.geheimnis { margin:var(--r2) 0; padding:var(--r3) var(--r4); background:var(--unbekannt-hg); border-radius:var(--radius-klein); text-align:center; }
.geheimnis code {
  font-size:1.05rem; letter-spacing:.08em; background:none; padding:0;
  user-select:all;   /* ein Klick markiert alles — es wird abgetippt */
}

/* ─────────────────────────────────────────────────────────────── Sonstiges */

.uebernahme { display:flex; gap:var(--r2); align-items:center; flex-wrap:wrap; margin:0; }
.uebernahme select, .uebernahme input { font-size:.84rem; padding:var(--r1) var(--r2); max-width:11rem; }
pre.modell {
  background:var(--unbekannt-hg); border:1px solid var(--rand); border-radius:var(--radius-klein);
  padding:var(--r4) var(--r4); overflow-x:auto; font-size:.82rem; line-height:1.5; margin:var(--r2) 0 0;
  white-space:pre-wrap; word-break:break-word;
}

th.wahl, td.wahl { width:2.6rem; text-align:center; }
td.wahl input, th.wahl input { width:1.15rem; height:1.15rem; margin:0; }
a.sortlink { color:inherit; text-decoration:none; display:inline-block; white-space:nowrap; }
a.sortlink:hover { color:var(--akzent); text-decoration:underline; }
th[aria-sort="ascending"] a.sortlink, th[aria-sort="descending"] a.sortlink { color:var(--akzent); font-weight:700; }

.massenleiste {
  display:flex; gap:var(--r4); align-items:flex-end; flex-wrap:wrap;
  padding:var(--karte-y) var(--karte-x); border-top:1px solid var(--rand); background:var(--unbekannt-hg);
}
.massenleiste .hilfe { flex:1 1 100%; margin:0; }
.massenleiste .feldgruppe { flex:0 1 18rem; }
.massenleiste output { font-weight:700; color:var(--akzent); }

@media (max-width:860px) {
  .rahmen { grid-template-columns:1fr; padding:var(--r3); }
  .leiste { position:static; max-height:none; }
  nav.bereiche { display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); }
  .bereich-titel { grid-column:1 / -1; }
  th, td { padding:var(--r2) var(--r3); }
}

/* Der Hinweispfeil am Zeilenende einer klickbaren Zeile. Er ersetzt den
   früheren „Öffnen"-Knopf: Er sagt dasselbe, kostet aber kein Ziel, keinen
   Fokusstopp und keine Screenreader-Ansage (aria-hidden). */
.pfeil-hin { color:var(--gedaempft); font-size:1.1rem; line-height:1; }
tr.klickbar:hover .pfeil-hin { color:var(--akzent); }
.suchstand.treffer { padding:var(--r2) var(--karte-x) 0; margin:0; }

/* Einzeilige Zellen mit Auslassungszeichen. Der vollständige Wert steht im
   title — sichtbar beim Verweilen, ohne dass er jede Zeile dreimal so hoch
   macht. Betrifft den Aufrufkontext des Konnektors: drei Kennungen, die man
   selten liest, aber gelegentlich vollständig braucht. */
td.einzeilig { max-width:11rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Ersatz für frühere Inline-Styles ─────────────────────────────────────
   Zwölf Stellen im Java-Code trugen ihren Abstand direkt im style-Attribut.
   Sie umgingen damit das Raster und waren von außen nicht auffindbar — genau
   so sind die 37 Einzelwerte entstanden. Hier stehen sie als benannte
   Klassen, damit eine Änderung wieder an einer Stelle greift. */
.karte-leib {
  padding:var(--karte-y) var(--karte-x);
  display:flex; flex-direction:column; gap:var(--r4); align-items:stretch;
}
/* Ein Knopf oder Formular im Karteninhalt behält seine natürliche Breite. */
.karte-leib > form, .karte-leib > .knopf, .karte-leib > form > .knopf { align-self:flex-start; }
.karte-eng   { padding:var(--r3) var(--karte-x); }
.karte-blank { padding:0; }
.reihe-frei  { display:flex; gap:var(--r3); flex-wrap:wrap; }
.abstand-oben { margin-top:var(--r3); }
.zeile-schmal { padding:var(--r2) 0; }
/* Die zweite Filterzeile des Protokolls: Suche und Reihenfolge, getrennt von
   den Auswahlfeldern darüber. Zwei Zeilen sind hier richtiger als eine lange:
   Die obere filtert WAS, die untere WELCHES GERÄT und in welcher Ordnung. */
.filter-suche { border-bottom:1px solid var(--rand); }
.filter-suche .suchfeld { flex:1 1 18rem; }

/* Die Spalte mit dem Namen braucht eine Mindestbreite: Ohne sie bricht
   „Konnektor Allgemeinmedizin Mitte" auf drei Zeilen und macht die Zeile
   dreimal so hoch. Ausdrücklich NICHT über th:first-child — das traf die
   Ankreuzspalte und blies sie von 42 auf 176 px auf. */
td.geraet { min-width:11rem; }

/* Innenabstand der Zellen: außen am Kartenrand ausgerichtet, innen enger.
   Bei acht Spalten kosten 24 px je Seite zusammen 384 px — mehr als ein
   Drittel der verfügbaren Breite, nur für Luft zwischen Spalten. */
th, td { padding-left:var(--r3); padding-right:var(--r3); }
tr > th:first-child, tr > td:first-child { padding-left:var(--karte-x); }
tr > th:last-child,  tr > td:last-child  { padding-right:var(--karte-x); }

/* Ein Knopf am Ende einer Feldreihe.
   Vorher steckte er in einer .feldgruppe — und die hat flex:1 1 14rem, wächst
   also auf die halbe Reihenbreite. Das Ergebnis war ein "Umbenennen"-Knopf so
   breit wie das Eingabefeld daneben, mit dem Text linksbündig irgendwo darin.

   Ein Knopf ist so breit wie seine Beschriftung. Und er steht auf der
   Grundlinie des Feldes, zu dem er gehört — nicht auf Höhe von dessen
   Beschriftung. */
.feldaktion { display:flex; align-items:flex-end; flex:0 0 auto; }
.feldaktion .knopf { white-space:nowrap; }
/* Ein Hilfetext unter einer Feldreihe nimmt die ganze Breite ein — sonst
   klebt er neben dem Knopf und wirkt wie dessen Beschriftung. */
.feldreihe > .hilfe.feldbreit { flex:1 1 100%; margin-top:calc(-1 * var(--r2)); }
/* Der Tagestrenner im Zeitstrahl: enger als eine Bereichsüberschrift in der
   Seitenleiste, weil er zwischen Einträgen steht und nicht über einer Liste. */
.bereich-titel.tagestrenner { padding:var(--r3) var(--karte-x) var(--r1); }
/* Ankreuzfelder, die in einer Reihe stehen statt untereinander — die
   Ereignisarten im Zeitstrahlfilter. */
.ankreuz.nebeneinander { display:inline-flex; margin-right:var(--r3); }

/* Die Kennung steht unter dem Namen statt in einer eigenen Spalte. Zehn
   Spalten passten nicht ins Bild; die Kennung wird gelesen, wenn man ein
   bestimmtes Gerät sucht, nicht beim Überfliegen der Liste. */
.kennung.zweitzeile { display:block; font-size:.74rem; }
/* Die Versionszeile im Kopf der Seitenleiste: leiser als die Agentenzahl —
   sie wird gebraucht, wenn etwas nicht funktioniert, nicht im Alltag. */
.marke-text small.version { opacity:.72; font-variant-numeric:tabular-nums; }

/* ── Sichten statt Häkchenwand ────────────────────────────────────────────
   Vier Karten, von denen genau eine gewählt ist. Jede beantwortet eine Frage,
   die jemand wirklich hat — „gab es Probleme?" statt „möchte ich
   PEVIM_NICHT_AKTIV sehen?".

   Das Auswahlfeld bleibt im Markup und wird nur optisch versteckt: Ein
   Screenreader liest weiterhin eine Optionsgruppe, und die Tastaturbedienung
   mit Pfeiltasten funktioniert unverändert. */
.sichten { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
           gap:var(--r2); border:0; padding:0; margin:0; flex:1 1 100%; }
.sicht {
  display:flex; flex-direction:column; gap:var(--r1);
  padding:var(--r3); border:1px solid var(--rand-bedien);
  border-radius:var(--radius-klein); cursor:pointer;
  transition: border-color .15s, background .15s;
}
.sicht:hover { border-color:var(--akzent); background:var(--akzent-hg); }
/* Die Sichten sind seit dem 11.08.2026 Links, keine Radios: Ein Link traegt
   nur Zeitraum und Sicht, und genau das setzt eine Feinauswahl zurueck. Die
   Regel fuer das versteckte Radio bleibt fuer aeltere Markup-Reste stehen. */
.sicht { text-decoration:none; color:inherit; }
.sicht input { position:absolute; opacity:0; width:1px; height:1px; }
.sicht:focus-visible { outline:3px solid var(--akzent); outline-offset:2px; }
/* Hinweis unter den Sichten, ueber die volle Breite des Rasters. */
.sichten-fuss { grid-column:1/-1; margin:0; }
/* Abstand aus dem Raster statt aus einem Inline-Style. */
.abstand-oben { margin-top:var(--r4); }
.sicht:focus-within { outline:3px solid var(--akzent); outline-offset:2px; }
.sicht.gewaehlt { border-color:var(--akzent); background:var(--akzent-hg); border-width:2px; padding:calc(var(--r3) - 1px); }
.sicht-name { font-weight:640; font-size:.9rem; }
/* Farbe ist nie das einzige Merkmal (WCAG 2.2 AA): Die gewählte Sicht trägt
   zusätzlich ein Häkchen im Namen. */
.sicht.gewaehlt .sicht-name::before { content:"✓ "; color:var(--akzent); font-weight:800; }
.sicht-was { font-size:.8rem; color:var(--gedaempft); line-height:1.4; }

.feinauswahl { flex:1 1 100%; border:0; }
.feinauswahl-leib { padding:var(--r3) 0 0; display:flex; flex-direction:column; gap:var(--r3); }
.artgruppe { border:1px solid var(--rand); border-radius:var(--radius-klein);
             padding:var(--r3); margin:0; }
.artgruppe legend { font-size:.8rem; font-weight:640; padding:0 var(--r1); }
.feldgruppe.schmal { flex:0 1 14rem; }
/* Die Netzwerkadresse steht immer in einer eigenen Zeile unter der Kennung.
   Zusammen in einer Zeile brach die Kombination je nach Länge des Namens mal
   um und mal nicht — die Liste wirkte dadurch unruhig, ohne dass sich sagen
   ließ, woran es liegt. */
.kennung.zweitzeile.adresse { opacity:.85; }
/* Eine Knopfreihe am Anfang der Zeile — anders als .knopfreihe, die ans Ende
   rückt. In einem Karteninhalt gibt es kein Feld, an dessen Ende sich ein
   Knopf ausrichten könnte. */
.knopfreihe-links { display:flex; gap:var(--r2); align-items:center; flex-wrap:wrap; }

/* Ein Feld für eine Zahl braucht keine 14 Rem. Die Vorgabe der .feldgruppe
   ist auf Text ausgelegt; "60" darin sieht aus wie ein vergessenes Feld —
   und schiebt den Knopf daneben aus dem Blickfeld. */
.feldgruppe.zahlenfeld { flex:0 0 9rem; }

/* In einer Reihe, die mit einem Knopf endet, dürfen die Felder schmaler
   beginnen. Sonst übersteigt die Summe der Mindestbreiten die Zeile um
   wenige Pixel — und der Knopf rutscht in die nächste Zeile, sichtbar
   losgelöst von dem, was er tut. Gemessen am 10.08.2026: 794 px Bedarf bei
   761 px Platz. */
.reihe-enden .feldgruppe:not(.zahlenfeld) { flex:1 1 12rem; }


/* ══════════════════════════════════════════════════════════════════════════
   Strukturansicht der Organisation
   ══════════════════════════════════════════════════════════════════════════
   Ein Organigramm aus HTML statt aus SVG. Die Linien zeichnen ::before und
   ::after, die Knoten sind gewoehnliche Verweise in verschachtelten Listen.
   Damit ist die Ansicht ohne Zusatzaufwand tastaturbedienbar, vorlesbar,
   durchsuchbar (Strg+F) und umbruchfaehig - alles Dinge, die ein gezeichnetes
   Diagramm erst muehsam nachbilden muesste.                                */

.sinnbild { width:1.15rem; height:1.15rem; flex:none; }

/* ── Umschalter Struktur / Liste ─────────────────────────────────────── */
.ansichtswahl { display:flex; gap:var(--r1); margin:0 0 var(--r4);
  padding:var(--r1); background:var(--glas); border:1px solid var(--rand);
  border-radius:var(--radius-klein); width:fit-content; }
.ansichtswahl .wahl {
  display:inline-flex; align-items:center; gap:var(--r2);
  padding:var(--r2) var(--r4); border-radius:calc(var(--radius-klein) - 3px);
  color:var(--gedaempft); text-decoration:none; font-size:.92rem; font-weight:600;
  transition:background .15s, color .15s;
}
.ansichtswahl .wahl:hover { background:var(--akzent-hg); color:var(--text); }
.ansichtswahl .wahl.aktiv { background:var(--akzent); color:var(--auf-akzent); }
.ansichtswahl .wahl.aktiv svg { color:var(--auf-akzent); }

/* ── Legende ─────────────────────────────────────────────────────────── */
.strukturlegende { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--r2) var(--r5); margin:0 0 var(--r5); font-size:.86rem; }
.strukturlegende > span { display:inline-flex; align-items:center; gap:var(--r1); }
.strukturlegende .sinnbild { width:1rem; height:1rem; }
.ampel-ok        { color:var(--ok); }
.ampel-warnung   { color:var(--warnung); }
.ampel-fehler    { color:var(--fehler); }
.ampel-unbekannt { color:var(--unbekannt); }

/* ── Baum ────────────────────────────────────────────────────────────── */
.strukturfeld { overflow-x:auto; padding-bottom:var(--r2); }
.strukturbaum { list-style:none; margin:0; padding:0; }
.strukturbaum:not(.wurzel) { margin-left:var(--r5); padding-left:var(--r5);
  border-left:2px solid var(--rand); }
.strukturast { position:relative; margin:var(--r2) 0; }

/* Der waagerechte Strich vom senkrechten Ast zur Karte. Rein dekorativ -
   die Verschachtelung steht fuer Screenreader in der Listenstruktur. */
.strukturbaum:not(.wurzel) > .strukturast::before {
  content:""; position:absolute; left:calc(-1 * var(--r5) - 2px); top:1.75rem;
  width:var(--r5); height:2px; background:var(--rand);
}

/* ── Karte ───────────────────────────────────────────────────────────── */
.strukturkarte {
  display:flex; align-items:center; gap:var(--r4);
  padding:var(--r3) var(--r4);
  background:var(--karte); border:1px solid var(--rand);
  border-left:4px solid var(--rand);
  border-radius:var(--radius-klein);
  color:inherit; text-decoration:none;
  box-shadow:0 1px 2px rgba(16,22,35,.04);
  transition:border-color .15s, box-shadow .15s, transform .12s;
}
.strukturkarte:hover { box-shadow:var(--schatten); transform:translateY(-1px); }
.strukturkarte:focus-visible { outline:3px solid var(--akzent); outline-offset:2px; }

/* Der farbige Streifen links traegt die Ampel. Er ist NIE die einzige
   Aussage: Rechts steht dasselbe als Sinnbild mit Text (WCAG 1.4.1). */
.strukturkarte.ok        { border-left-color:var(--ok); }
.strukturkarte.warnung   { border-left-color:var(--warnung); }
.strukturkarte.fehler    { border-left-color:var(--fehler); }
.strukturkarte.unbekannt { border-left-color:var(--unbekannt); }

.kartensinnbild { display:grid; place-items:center; flex:none;
  width:2.75rem; height:2.75rem; border-radius:var(--radius-klein);
  background:var(--akzent-hg); color:var(--akzent); }
.kartensinnbild .sinnbild { width:1.5rem; height:1.5rem; }

/* Kein gap: Die drei Zeilen stehen ohnehin untereinander, und ein roher
   Zwischenwert waere der Anfang der naechsten Unregelmaessigkeit. Der Abstand
   kommt aus der Zeilenhoehe. */
.kartentext { display:flex; flex-direction:column; line-height:1.4; min-width:0; flex:1; }
.kartenname { font-weight:650; font-size:1rem; }
.kartenart  { color:var(--gedaempft); font-size:.84rem; }
.kartenzahlen { display:flex; flex-wrap:wrap; gap:var(--r1) var(--r3);
  margin-top:var(--r1); font-size:.84rem; color:var(--gedaempft); }
.kartenzahl { display:inline-flex; align-items:center; gap:var(--r1); }
.kartenzahl .sinnbild { width:.95rem; height:.95rem; }
.kartenzahl .zahlwort { color:var(--gedaempft); }
.strukturleer { font-size:.84rem; color:var(--gedaempft); font-style:italic; }

.kartenampel { flex:none; display:grid; place-items:center;
  width:2rem; height:2rem; border-radius:999px; }
.kartenampel .sinnbild { width:1.15rem; height:1.15rem; }
.kartenampel.ok        { background:var(--ok-hg);        color:var(--ok); }
.kartenampel.warnung   { background:var(--warnung-hg);   color:var(--warnung); }
.kartenampel.fehler    { background:var(--fehler-hg);    color:var(--fehler); }
.kartenampel.unbekannt { background:var(--unbekannt-hg); color:var(--unbekannt); }

/* ── Auf- und Zuklappen ──────────────────────────────────────────────── */
.strukturzweig > summary {
  display:inline-flex; align-items:center; gap:var(--r2);
  margin:var(--r2) 0 0 var(--r5);
  padding:var(--r1) var(--r3);
  color:var(--gedaempft); font-size:.86rem; cursor:pointer;
  border-radius:var(--radius-klein);
}
.strukturzweig > summary:hover { background:var(--akzent-hg); color:var(--text); }
.strukturzweig > summary:focus-visible { outline:3px solid var(--akzent); outline-offset:2px; }
.zweigzahl { display:inline-grid; place-items:center; min-width:1.5rem; height:1.5rem;
  padding:0 var(--r1); border-radius:999px;
  background:var(--akzent-hg); color:var(--akzent); font-weight:700; font-size:.8rem; }

/* Auf schmalen Geraeten faellt die Einrueckung kleiner aus, sonst bleibt bei
   fuenf Ebenen fuer den Namen kein Platz mehr. */
@media (max-width:48rem) {
  .strukturbaum:not(.wurzel) { margin-left:var(--r3); padding-left:var(--r3); }
  .strukturbaum:not(.wurzel) > .strukturast::before {
    left:calc(-1 * var(--r3) - 2px); width:var(--r3);
  }
  .strukturzweig > summary { margin-left:var(--r3); }
  .kartenzahl .zahlwort { display:none; }   /* die Zahl samt Sinnbild genuegt */
}

/* ── Geraete unter ihrer Einheit ─────────────────────────────────────── */
.geraetereihe { list-style:none; display:flex; flex-wrap:wrap; gap:var(--r2);
  margin:var(--r2) 0 0 var(--r5); padding:0; }
.geraetechip {
  display:flex; align-items:center; gap:var(--r2);
  padding:var(--r2) var(--r3);
  background:var(--glas); border:1px solid var(--rand);
  border-left:3px solid var(--rand);
  border-radius:var(--radius-klein);
  color:inherit; text-decoration:none; font-size:.86rem;
  transition:border-color .15s, background .15s;
}
.geraetechip:hover { background:var(--akzent-hg); }
.geraetechip:focus-visible { outline:3px solid var(--akzent); outline-offset:2px; }
.geraetechip.ampel-ok        { border-left-color:var(--ok); }
.geraetechip.ampel-warnung   { border-left-color:var(--warnung); }
.geraetechip.ampel-fehler    { border-left-color:var(--fehler); }
.geraetechip.ampel-unbekannt { border-left-color:var(--unbekannt); }
.chipsinnbild { display:grid; place-items:center; flex:none;
  width:1.75rem; height:1.75rem; border-radius:6px;
  background:var(--grund-tief); color:var(--gedaempft); }
.chipsinnbild .sinnbild { width:1.05rem; height:1.05rem; }
.chiptext { display:flex; flex-direction:column; line-height:1.25; }
.chipname { font-weight:600; }
.chipzusatz { color:var(--gedaempft); font-size:.78rem; }
.chipampel { display:grid; place-items:center; flex:none; }
.chipampel .sinnbild { width:1rem; height:1rem; }
.geraetechip.ampel-ok        .chipampel { color:var(--ok); }
.geraetechip.ampel-warnung   .chipampel { color:var(--warnung); }
.geraetechip.ampel-fehler    .chipampel { color:var(--fehler); }
.geraetechip.ampel-unbekannt .chipampel { color:var(--unbekannt); }

/* Der Konnektor ist Technik, kein Kartenterminal - andere Grundfarbe des
   Sinnbilds, damit die beiden Reihen sich auf einen Blick unterscheiden. */
.konnektorchip .chipsinnbild { background:var(--akzent-hg); color:var(--akzent); }
.konnektorchip.mitgenutzt { border-style:dashed; border-left-style:solid; }
.konnektorchip.mitgenutzt .chipsinnbild { background:var(--grund-tief); color:var(--gedaempft); }

div.geraetereihe { display:block; }
.geraetemehr { display:inline-flex; align-items:center; gap:var(--r2);
  padding:var(--r2) var(--r3); border:1px dashed var(--rand-bedien);
  border-radius:var(--radius-klein); color:var(--akzent);
  text-decoration:none; font-size:.86rem; font-weight:600; }
.geraetemehr:hover { background:var(--akzent-hg); }
.geraetemehr:focus-visible { outline:3px solid var(--akzent); outline-offset:2px; }

@media (max-width:48rem) {
  .geraetereihe { margin-left:var(--r3); }
}

/* Wer Bewegung reduziert haben moechte, bekommt keine (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .strukturkarte { transition:none; }
  .strukturkarte:hover { transform:none; }
}