/* DokuTool Keinhoerster
   ---------------------------------------------------------------------------
   Gestaltungssprache nach Emil Kowalski, uebertragen auf ein Werkzeug, das im
   Stoerungsfall benutzt wird: ruhige Neutraltoene, ein einziger Akzent, feine
   Raender, weiche mehrschichtige Tiefe, kurze Bewegungen mit exponentiellem
   Auslauf. Zierrat gibt es nicht, Sorgfalt liegt in den Zustaenden.

   Aufbau:  Marken  |  Grundlagen  |  Geruest  |  Flaechen  |  Tabellen
            Formulare  |  Rueckmeldung  |  Bausteine  |  Druck
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- Marken --- */

:root {
  color-scheme: light;

  /* Neutrale Skala, leicht kuehl. Von der Flaeche zum Text. */
  --n-0:  #ffffff;
  --n-1:  #fbfbfc;
  --n-2:  #f5f5f7;
  --n-3:  #eeeef1;
  --n-4:  #e4e4e8;
  --n-5:  #d6d6dc;
  --n-8:  #6c6c77;
  --n-10: #5b5b66;
  --n-12: #18181b;

  --grund:      var(--n-1);
  --flaeche:    var(--n-0);
  --erhoben:    var(--n-0);
  --schwebe:    var(--n-2);
  --vertieft:   var(--n-2);
  --linie:      var(--n-4);
  --linie-fein: var(--n-3);

  --text:    var(--n-12);
  --text-2:  var(--n-10);
  --text-3:  var(--n-8);
  --text-um: #ffffff;          /* Schrift auf dunkler Flaeche */

  /* Ein Akzent, sonst nichts. Traegt Links, aktive Punkte, Fokus. */
  --akzent:       #0d7377;
  --akzent-hell:  #e6f2f2;
  --akzent-linie: #b9dcdd;

  /* Zustandsfarben, nur fuer Zustaende. */
  --gut:        #126b33;
  --gut-hell:   #e8f5ec;
  --warn:       #a1560c;
  --warn-hell:  #fbf0e4;
  --fehler:     #b02525;
  --fehler-hell:#fbeaea;

  /* Tiefe: Versatz plus weiche Streuung, nie ein farbiger Schein. */
  --schatten-1: 0 1px 1px rgba(24, 24, 27, .04), 0 1px 2px rgba(24, 24, 27, .04);
  --schatten-2: 0 1px 2px rgba(24, 24, 27, .04), 0 4px 12px rgba(24, 24, 27, .05);
  --schatten-3: 0 2px 6px rgba(24, 24, 27, .06), 0 14px 32px rgba(24, 24, 27, .12);

  --rund-1: 6px;
  --rund-2: 9px;
  --rund-3: 13px;

  /* Bewegung: kurz, exponentieller Auslauf, nie federnd. */
  --ease:    cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --kurz:    120ms;
  --mittel:  200ms;
  --lang:    420ms;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-fest: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --n-0:  #0a0a0b;
    --n-1:  #0a0a0b;
    --n-2:  #17171a;
    --n-3:  #1d1d21;
    --n-4:  #27272c;
    --n-5:  #343439;
    --n-8:  #8b8b95;
    --n-10: #a6a6b0;
    --n-12: #ededf0;

    --grund:      #0a0a0b;
    --flaeche:    #121215;
    --erhoben:    #17171a;
    --schwebe:    #1d1d21;
    --vertieft:   #0f0f11;
    --linie:      #27272c;
    --linie-fein: #202024;

    --text:    var(--n-12);
    --text-2:  var(--n-10);
    --text-3:  var(--n-8);
    --text-um: #0a0a0b;

    --akzent:       #3fb3b8;
    --akzent-hell:  #10292a;
    --akzent-linie: #1d4547;

    --gut:        #5ec27f;
    --gut-hell:   #12241a;
    --warn:       #d99a52;
    --warn-hell:  #26190c;
    --fehler:     #ec8a8a;
    --fehler-hell:#2a1414;

    --schatten-1: 0 1px 2px rgba(0, 0, 0, .5);
    --schatten-2: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .45);
    --schatten-3: 0 2px 8px rgba(0, 0, 0, .55), 0 16px 36px rgba(0, 0, 0, .6);
  }
}

/* ------------------------------------------------------------ Grundlagen --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 590;
  letter-spacing: -0.021em;
  line-height: 1.25;
  text-wrap: balance;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: .9375rem; }

p { margin: 0; }
p + p { margin-top: .75rem; }

a {
  color: var(--akzent);
  text-decoration: none;
  transition: color var(--kurz) var(--ease);
}
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: var(--rund-1);
}

.symbol {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.14em;
}

/* Zahlen, Adressen, Nummern: gleiche Breite, damit Spalten stehen. */
.einheitlich {
  font-family: var(--schrift-fest);
  font-size: .875em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.leer { color: var(--text-3); }

/* -------------------------------------------------------------- Geruest --- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .5rem 1.25rem;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linie-fein);
  flex-wrap: wrap;
}

.marke {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  color: var(--text);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marke:hover { text-decoration: none; }
.marke span {
  color: var(--text-3);
  font-weight: 450;
  font-size: .8125rem;
  letter-spacing: 0;
}

.hauptnavigation {
  display: flex;
  gap: .125rem;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}
.hauptnavigation a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .55rem;
  border-radius: var(--rund-1);
  color: var(--text-2);
  font-size: .875rem;
  font-weight: 480;
  white-space: nowrap;
  transition: background var(--kurz) var(--ease), color var(--kurz) var(--ease);
}
.hauptnavigation a:hover { background: var(--schwebe); color: var(--text); text-decoration: none; }
.hauptnavigation a.aktiv { background: var(--schwebe); color: var(--text); font-weight: 540; }
.hauptnavigation .symbol { color: var(--text-3); font-size: 1.05rem; }
.hauptnavigation a.aktiv .symbol { color: var(--akzent); }

/* Verwaltung als Klappmenue. Ohne JavaScript oeffnet und schliesst es ueber
   das details-Element, mit JavaScript zusaetzlich per Klick daneben. */
.menue { position: relative; }
.menue summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .55rem;
  border-radius: var(--rund-1);
  color: var(--text-2);
  font-size: .875rem;
  font-weight: 480;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: background var(--kurz) var(--ease), color var(--kurz) var(--ease);
}
.menue summary::-webkit-details-marker { display: none; }
.menue summary:hover { background: var(--schwebe); color: var(--text); }
.menue summary.aktiv { background: var(--schwebe); color: var(--text); font-weight: 540; }
.menue summary .symbol { color: var(--text-3); font-size: 1.05rem; }
.menue summary.aktiv .symbol { color: var(--akzent); }

.menueliste {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 30;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .3rem;
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
  box-shadow: var(--schatten-3);
  animation: menue-ein var(--mittel) var(--ease) both;
}
.menueliste a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .55rem;
  border-radius: var(--rund-1);
  color: var(--text-2);
  font-size: .875rem;
  white-space: nowrap;
  transition: background var(--kurz) var(--ease), color var(--kurz) var(--ease);
}
.menueliste a:hover { background: var(--schwebe); color: var(--text); text-decoration: none; }
.menueliste a.aktiv { color: var(--text); font-weight: 540; }
.menueliste .symbol { color: var(--text-3); font-size: 1.05rem; }
.menueliste a.aktiv .symbol { color: var(--akzent); }

@keyframes menue-ein {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kontoleiste { display: flex; align-items: center; gap: .5rem; }
.wer {
  color: var(--text-2);
  font-size: .8125rem;
  padding: .3rem .45rem;
  border-radius: var(--rund-1);
  transition: background var(--kurz) var(--ease), color var(--kurz) var(--ease);
}
.wer:hover { background: var(--schwebe); color: var(--text); text-decoration: none; }

.inhalt {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 4rem;
}
.inhalt.schmal { max-width: 25.5rem; padding-top: 4.5rem; }

.fuss {
  border-top: 1px solid var(--linie-fein);
  padding: 1.1rem 1.25rem;
  color: var(--text-3);
  font-size: .8125rem;
  text-align: center;
}

/* ------------------------------------------------------------- Flaechen --- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--schatten-1);
  margin-bottom: 1.5rem;
}
.karte > h2 { margin-bottom: .85rem; }
.karte.mittig { text-align: center; }

.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.spalten .karte { margin-bottom: 0; }

.kopfzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.kopfzeile h1 + .hinweis, .kopfzeile h1 + .steckbriefkopf { margin-top: .35rem; }

.hinweis {
  color: var(--text-2);
  font-size: .875rem;
  max-width: 68ch;
}
.hinweis.breit { margin-bottom: 1.25rem; }
.feldhinweis { display: inline-block; color: var(--text-3); font-weight: 450; font-size: .8125rem; }
.fussnotiz { color: var(--text-3); font-size: .8125rem; margin-top: 1.75rem; }
.untertitel {
  display: block;
  margin-top: .3rem;
  color: var(--text-3);
  font-size: .875rem;
  font-weight: 450;
  letter-spacing: -0.006em;
}

/* Kacheln der Uebersicht: Zahl, Bezeichnung, sonst nichts. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.kachel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
  padding: .85rem .95rem;
  box-shadow: var(--schatten-1);
}
.kachel .zahl {
  display: block;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kachel .beschriftung { color: var(--text-2); font-size: .8125rem; }
.kachel.warnung { border-color: color-mix(in srgb, var(--warn) 45%, var(--linie)); }
.kachel.warnung .zahl { color: var(--warn); }

/* ------------------------------------------------------------- Tabellen --- */

.tabellenrahmen { overflow-x: auto; margin: 0 -.35rem; padding: 0 .35rem; }

table.liste {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
table.liste th {
  padding: .3rem .5rem .5rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 550;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
table.liste td {
  padding: .5rem;
  text-align: left;
  border-bottom: 1px solid var(--linie-fein);
  vertical-align: top;
}
table.liste tbody tr { transition: background var(--kurz) var(--ease); }
table.liste tbody tr:hover { background: var(--schwebe); }
table.liste tr:last-child td { border-bottom: none; }
table.liste td:first-child, table.liste th:first-child { padding-left: .25rem; }
table.liste td:last-child,  table.liste th:last-child  { padding-right: .25rem; }
.rechts { text-align: right; }
td.schmal { width: 1%; white-space: nowrap; }
tr.gedimmt td { color: var(--text-3); }
tr.gedimmt a { color: var(--text-2); }

.listenkopf {
  margin: 0 0 .9rem;
  color: var(--text-2);
  font-size: .875rem;
}
.listenkopf strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Gerätename mit Symbol der Geräteart. */
.geraetename { display: inline-flex; align-items: center; gap: .45rem; }
.geraetename .symbol { color: var(--text-3); font-size: 1.05rem; }

/* ------------------------------------------------------------ Formulare --- */

.formular { display: flex; flex-direction: column; }
.formular label, .geraeteformular label {
  margin: 1rem 0 .3rem;
  font-size: .8125rem;
  font-weight: 540;
  color: var(--text);
}
.formular > label:first-of-type { margin-top: 0; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: .9375rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
  padding: .45rem .6rem;
  box-shadow: var(--schatten-1);
  transition: border-color var(--kurz) var(--ease), box-shadow var(--kurz) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:hover, select:hover, textarea:hover { border-color: var(--n-5); }
input:focus, select:focus, textarea:focus {
  border-color: var(--akzent);
  outline: none;
  box-shadow: 0 0 0 3px var(--akzent-hell);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
textarea { min-height: 4.5rem; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - .8rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--vertieft);
  color: var(--text-3);
  cursor: not-allowed;
}

.feldgitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.25rem;
}
.feldgitter > div { display: flex; flex-direction: column; }

.ankreuzfeld {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1rem 0 .3rem;
  font-size: .875rem;
  font-weight: 480;
  cursor: pointer;
}
.ankreuzfeld input { width: auto; box-shadow: none; accent-color: var(--akzent); }

.knopfleiste {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.35rem;
}
.knopfleiste .knopf { margin-top: 0; }

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 520;
  line-height: 1.2;
  padding: .48rem .85rem;
  border: 1px solid var(--text);
  border-radius: var(--rund-2);
  background: var(--text);
  color: var(--text-um);
  box-shadow: var(--schatten-1);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--kurz) var(--ease), border-color var(--kurz) var(--ease),
              color var(--kurz) var(--ease), transform var(--kurz) var(--ease),
              box-shadow var(--kurz) var(--ease);
}
.knopf:hover { background: color-mix(in srgb, var(--text) 88%, var(--flaeche)); text-decoration: none; }
.knopf:active { transform: scale(.985); box-shadow: none; }

.knopf.schlicht {
  background: var(--flaeche);
  color: var(--text);
  border-color: var(--linie);
}
.knopf.schlicht:hover { background: var(--schwebe); border-color: var(--n-5); }

.knopf.gefahr {
  background: var(--flaeche);
  color: var(--fehler);
  border-color: color-mix(in srgb, var(--fehler) 35%, var(--linie));
}
.knopf.gefahr:hover { background: var(--fehler-hell); border-color: var(--fehler); }

.knopf[disabled] { opacity: .5; cursor: not-allowed; }
.knopf[disabled]:hover { background: var(--flaeche); }
.knopf[disabled]:active { transform: none; }
.knopf .symbol { font-size: 1.05rem; margin-left: -.1rem; }

/* --------------------------------------------------------- Rueckmeldung --- */

/* Der eine Bewegungsmoment der Anwendung: Rueckmeldungen fahren oben ein,
   Erfolge gehen von selbst wieder, Fehler bleiben stehen. */
.meldungsraum {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.meldung {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .65rem .8rem;
  border-radius: var(--rund-2);
  border: 1px solid var(--linie);
  background: var(--erhoben);
  box-shadow: var(--schatten-3);
  color: var(--text);
  font-size: .875rem;
  pointer-events: auto;
  animation: meldung-ein var(--lang) var(--ease) both;
}
.meldung .symbol { font-size: 1.1rem; margin-top: .1rem; }
.meldung.erfolg  .symbol { color: var(--gut); }
.meldung.fehler  .symbol { color: var(--fehler); }
.meldung.warnung .symbol { color: var(--warn); }
.meldung.geht { animation: meldung-aus var(--mittel) var(--ease-in) both; }

@keyframes meldung-ein {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes meldung-aus {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(.98); }
}

/* Meldungen im Fluss der Seite, etwa im Anmeldeformular. */
.meldung.fest {
  position: static;
  animation: none;
  box-shadow: none;
  margin-bottom: 1rem;
}
.meldung.fest.fehler  { background: var(--fehler-hell); border-color: color-mix(in srgb, var(--fehler) 30%, var(--linie)); }
.meldung.fest.warnung { background: var(--warn-hell);   border-color: color-mix(in srgb, var(--warn) 30%, var(--linie)); }
.meldung.fest.erfolg  { background: var(--gut-hell);    border-color: color-mix(in srgb, var(--gut) 30%, var(--linie)); }

/* ------------------------------------------------------------ Bausteine --- */

.etikett {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .4rem;
  border-radius: 5px;
  background: var(--akzent-hell);
  color: var(--akzent);
  border: 1px solid transparent;
  font-size: .75rem;
  font-weight: 540;
  letter-spacing: -0.004em;
  white-space: nowrap;
}
.etikett.grau     { background: var(--schwebe); color: var(--text-2); }
.etikett.gut      { background: var(--gut-hell); color: var(--gut); }
.etikett.schlecht { background: var(--fehler-hell); color: var(--fehler); }
.etikett.warn     { background: var(--warn-hell); color: var(--warn); }

.datenblatt {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: .4rem 1rem;
  font-size: .9375rem;
}
.datenblatt dt { color: var(--text-3); font-size: .8125rem; padding-top: .12rem; }
.datenblatt dd { margin: 0; }
.datenblatt dd.gross { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
.datenblatt .feldhinweis { display: block; }

.steckbriefkopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  color: var(--text-2);
  font-size: .875rem;
}

.notiztext { white-space: pre-line; font-size: .9375rem; }

/* Suchleiste: das meistbenutzte Bedienelement der Anwendung. */
.suchleiste {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
}
.suchleiste .suchfeld { position: relative; flex: 1 1 20rem; min-width: 12rem; }
.suchleiste .suchfeld .symbol {
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 1.05rem;
  pointer-events: none;
}
.suchleiste input[type="search"] { padding-left: 2.1rem; }
.suchleiste select { width: auto; max-width: 14rem; }

.spaltenwahl { margin: 0 0 1rem; }
.spaltenwahl summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: .8125rem;
  padding: .25rem 0;
  list-style: none;
  transition: color var(--kurz) var(--ease);
}
.spaltenwahl summary::-webkit-details-marker { display: none; }
.spaltenwahl summary:hover { color: var(--text); }
.spaltenformular {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  align-items: center;
  padding: .8rem 0 .2rem;
}
.spaltenformular .ankreuzfeld { margin: 0; font-weight: 450; }
.spaltenformular .knopf { margin: 0; }

/* Ausfall-Ansicht */
.ausfallzahl {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.25rem;
  padding: .7rem .9rem;
  background: var(--warn-hell);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--linie));
  border-radius: var(--rund-2);
  color: var(--text);
  font-size: .9375rem;
}
.ausfallzahl .symbol { color: var(--warn); font-size: 1.15rem; }
.ausfallzahl strong { font-variant-numeric: tabular-nums; }

ul.ausfallbaum { list-style: none; margin: 0; padding: 0; }
ul.ausfallbaum ul.ausfallbaum {
  margin-left: .6rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--linie);
}
ul.ausfallbaum li { margin: 0; }

.knoten {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .6rem;
  padding: .3rem 0;
  font-size: .9375rem;
}
.knoten .kante {
  min-width: 10rem;
  color: var(--text-3);
  font-size: .8125rem;
}
.knoten .ort, .knoten .wer { color: var(--text-2); font-size: .8125rem; }
.knoten .leer { font-size: .8125rem; }

/* Schlüsselfeld */
.schluesselfeld { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.schluesselfeld output {
  flex: 1 1 16rem;
  padding: .45rem .6rem;
  background: var(--vertieft);
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
  word-break: break-all;
}

.zuordnungsform { margin-top: 1.35rem; }
.zuordnungsform select { max-width: 26rem; }
h2.abstand { margin-top: 1.85rem; }
.nebenform { margin-top: .9rem; }
.zuletzt { margin: -.5rem 0 1rem; }

/* Leerer Zustand: sagt, was als Nächstes zu tun ist. */
.leerzustand {
  text-align: center;
  padding: 2.5rem 1.25rem;
}
.leerzustand .symbol { font-size: 1.75rem; color: var(--text-3); }
.leerzustand h2 { margin: .75rem 0 .4rem; }
.leerzustand .hinweis { margin: 0 auto 1.25rem; }

.einrichtungskarte h2 { margin-top: 1.75rem; }

/* ------------------------------------------------------------- Loeschen --- */

/* Loeschen ist zugeklappt, bis jemand es aufklappt, und verlangt dann das
   getippte Wort. Ohne JavaScript funktioniert es genauso, nur ohne die
   Sperre am Knopf; geprueft wird ohnehin auf dem Server. */
.loeschbereich { margin-top: .5rem; }
.loeschbereich summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .55rem;
  margin-left: -.55rem;
  border-radius: var(--rund-1);
  color: var(--text-2);
  font-size: .875rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--kurz) var(--ease), color var(--kurz) var(--ease);
}
.loeschbereich summary::-webkit-details-marker { display: none; }
.loeschbereich summary:hover { background: var(--fehler-hell); color: var(--fehler); }
.loeschbereich summary .symbol { font-size: 1rem; }
.loeschbereich[open] summary { color: var(--fehler); font-weight: 520; }

.loeschbereich.klein { margin-top: 0; }
.loeschbereich.klein summary { font-size: .8125rem; padding: .25rem .4rem; margin-left: -.4rem; }

.loeschinhalt {
  margin-top: .65rem;
  padding: .9rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--fehler) 28%, var(--linie));
  border-radius: var(--rund-2);
  background: var(--fehler-hell);
}
.loeschinhalt .hinweis { color: var(--text); }
.loeschinhalt .hinweis + .hinweis { margin-top: .75rem; }

.folgenliste {
  margin: .35rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-2);
  font-size: .875rem;
}
.folgenliste li { margin: .1rem 0; }

.loeschformular { margin-top: 1rem; }
.loeschformular label { display: block; margin-bottom: .35rem; font-size: .8125rem; font-weight: 520; }
.loeschzeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.loeschzeile input {
  flex: 0 1 12rem;
  background: var(--flaeche);
  border-color: color-mix(in srgb, var(--fehler) 25%, var(--linie));
}
.loeschzeile input:focus { border-color: var(--fehler); box-shadow: 0 0 0 3px var(--fehler-hell); }
.loeschzeile .knopf { flex: 0 0 auto; }

/* --------------------------------------------------- Kleine Bildschirme --- */

@media (pointer: coarse) {
  .knopf,
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="tel"], input[type="date"], input[type="number"], select {
    min-height: 44px;
  }
  .hauptnavigation a { padding: .5rem .65rem; }
}

/* Schmale Schirme: die Navigation bekommt eine eigene Zeile und laeuft darin
   waagerecht, statt ueber den halben Bildschirm umzubrechen. Die Kopfzeile
   klebt oben, sie darf nicht wachsen. */
@media (max-width: 720px) {
  .kopf { gap: .4rem 1rem; padding: .5rem .9rem; }
  .marke { flex: 1 1 auto; }
  .kontoleiste { order: 2; }
  .hauptnavigation {
    order: 3;
    flex: 0 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 -.9rem;
    padding: .1rem .9rem .15rem;
  }
  .hauptnavigation::-webkit-scrollbar { display: none; }
  .menueliste {
    position: fixed;
    left: .75rem;
    right: .75rem;
    top: auto;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .marke span { display: none; }
}

@media (max-width: 560px) {
  .inhalt { padding: 1.25rem .9rem 3rem; }
  .karte { padding: 1rem 1.05rem; border-radius: var(--rund-2); }
  h1 { font-size: 1.3125rem; }
  .datenblatt { grid-template-columns: 1fr; gap: .1rem; }
  .datenblatt dt { margin-top: .65rem; }
  .knoten .kante { min-width: 100%; }
  .meldungsraum { right: .75rem; left: .75rem; bottom: .75rem; width: auto; }
}

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

/* ---------------------------------------------------------------- Druck --- */

@media print {
  .kopf, .fuss, .knopf, .knopfleiste, .meldungsraum, .suchleiste, .spaltenwahl { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.4; }
  .inhalt { max-width: none; padding: 0; }
  .karte {
    border: 1px solid #c8c8c8;
    box-shadow: none;
    break-inside: avoid;
    margin-bottom: .7rem;
    padding: .7rem .8rem;
  }
  .spalten { gap: .7rem; }
  a { color: #000; text-decoration: none; }
  .etikett { border: 1px solid #999; background: none; color: #000; }
  ul.ausfallbaum ul.ausfallbaum { border-left-color: #aaa; }
  .ausfallzahl { background: none; border-color: #999; color: #000; }
  table.liste td { border-bottom-color: #ddd; }
}

/* ---------------------------------------------------- Etikettenvorschau --- */

.masseleiste {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: flex-end;
}
.masseleiste > div { display: flex; flex-direction: column; }
.masseleiste label { margin: 0 0 .3rem; font-size: .8125rem; font-weight: 540; }
.masseleiste input { width: 7rem; }
.masseleiste .knopfleiste { margin-top: 0; }
.masseleiste .massformen .knopf { padding: .4rem .7rem; }

.massmeldung { margin-top: 1rem; }
.massmeldung.warnt {
  padding: .55rem .75rem;
  border-radius: var(--rund-2);
  background: var(--warn-hell);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--linie));
  color: var(--text);
}

@media (max-width: 560px) {
  .masseleiste input { width: 5.5rem; }
}