/* ============================================================
   WI Kontaktdoku – Gestaltungssystem
   Stand 09.08.2026. Leitgedanke: seriös und aufgeräumt.

   Aufbau und Bausteine folgen dem mit dem Team erprobten Prototyp:
   dunkelblaue Seitenleiste, Kennzahl-Kacheln, Karten mit Kopfzeile,
   Chip-Auswahlfelder mit Suche, Overlays zum Neuanlegen, zweispaltige
   Detailansichten.

   Beibehalten aus der Festlegung vom Vormittag: eckige Kästen (keine
   abgerundeten Ecken), Roboto als einzige Schrift, Dunkelmodus nach
   Geräteeinstellung, Handy zuerst. Schrift kommt vom eigenen Server.
   ============================================================ */

/* Roboto (Variable, lateinischer Zeichensatz), Apache-2.0 – siehe fonts/ROBOTO-LIZENZ.txt.
   Achtung: dieser Zeichensatz enthält keine Symbole wie ☰ ▾ ✓ –
   solche Zeichen bitte als SVG oder CSS-Form lösen, sonst springt
   der Browser still in eine Fremdschrift. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin.665db5e157d2.woff2") format("woff2");
}

/* ---------- Farben und Maße ---------- */
:root {
  color-scheme: light;

  --schrift: Roboto, "Helvetica Neue", Arial, sans-serif;

  --papier: #f1f5f9;
  --flaeche: #ffffff;
  --flaeche-2: #eef3f8;
  --linie: #d5e0ea;
  --linie-zart: #e8eef5;

  --tinte: #132534;
  --tinte-2: #3b5164;
  --gedaempft: #6b8298;

  --akzent: #1f4e79;
  --akzent-stark: #163a5c;
  --akzent-zart: #e3edf6;
  --akzent-kontur: #bdd2e6;

  --leiste-bg: #122a44;
  --leiste-fg: #ffffff;
  --leiste-fg-2: #a8c0d8;
  --leiste-linie: rgba(255, 255, 255, .10);

  --krit: #b4322a;   --krit-bg: #fbeceb;  --krit-kontur: #eec9c6;
  --warn: #8f6410;   --warn-bg: #fbf2dc;  --warn-kontur: #e8d5a6;
  --gut: #1c6b45;    --gut-bg: #e5f1eb;   --gut-kontur: #bcdccb;
  --entwurf: #8a6512; --entwurf-bg: #fdf6e6;

  --schatten: 0 1px 2px rgba(19, 37, 52, .05), 0 2px 6px -3px rgba(19, 37, 52, .10);
  --schatten-hoch: 0 2px 4px rgba(19, 37, 52, .06), 0 12px 26px -18px rgba(19, 37, 52, .45);
}

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

    --papier: #0d151d;
    --flaeche: #15212d;
    --flaeche-2: #1c2b39;
    --linie: #27394a;
    --linie-zart: #1f2f3e;

    --tinte: #e7eff7;
    --tinte-2: #bccdda;
    --gedaempft: #8ba2b7;

    --akzent: #7fb0dd;
    --akzent-stark: #a3c8e9;
    --akzent-zart: #1a2c3d;
    --akzent-kontur: #2c4459;

    --leiste-bg: #0b141d;
    --leiste-fg: #eaf1f8;
    --leiste-fg-2: #90a8bf;
    --leiste-linie: rgba(255, 255, 255, .08);

    --krit: #f08c82;   --krit-bg: #33201e;  --krit-kontur: #5d322d;
    --warn: #e3b45c;   --warn-bg: #2f2717;  --warn-kontur: #584526;
    --gut: #6fc79a;    --gut-bg: #162c23;   --gut-kontur: #2b4d3a;
    --entwurf: #e3b45c; --entwurf-bg: #2b2415;

    --schatten: 0 1px 2px rgba(0, 0, 0, .35);
    --schatten-hoch: 0 12px 26px -18px rgba(0, 0, 0, .9);
  }
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--akzent); }
a:hover { color: var(--akzent-stark); }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

.zahlen, table.liste td.datum { font-variant-numeric: tabular-nums; }
.leise { color: var(--gedaempft); }

/* Sprungmarke für Tastatur und Vorlesehilfen */
.sprung {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--flaeche);
  color: var(--tinte);
  padding: .6rem 1rem;
  border: 1px solid var(--akzent);
  z-index: 100;
}
.sprung:focus { left: .5rem; top: .5rem; }

/* ============================================================
   Grundgerüst: Seitenleiste links, Inhalt rechts
   ============================================================ */
.huelle { display: flex; min-height: 100vh; align-items: stretch; }
.haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.seitenleiste {
  width: 14.5rem;
  flex: none;
  background: var(--leiste-bg);
  color: var(--leiste-fg-2);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.seitenleiste .marke {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1rem .85rem;
  border-bottom: 1px solid var(--leiste-linie);
  color: var(--leiste-fg);
  text-decoration: none;
}
.seitenleiste .marke .zeichen {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--leiste-fg);
  color: #12324f;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.seitenleiste .marke b { display: block; font-size: .95rem; line-height: 1.2; font-weight: 600; }
.seitenleiste .marke span { font-size: .72rem; color: var(--leiste-fg-2); }

.seitenleiste nav { padding: .6rem .55rem; flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.seitenleiste nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  color: var(--leiste-fg-2);
  text-decoration: none;
  font-size: .93rem;
}
.seitenleiste nav a:hover { background: rgba(255, 255, 255, .07); color: var(--leiste-fg); }
.seitenleiste nav a.aktiv { background: rgba(255, 255, 255, .13); color: var(--leiste-fg); font-weight: 600; }
.seitenleiste nav a svg { width: 1.05rem; height: 1.05rem; flex: none; opacity: .9; }
.seitenleiste nav a .zahl {
  margin-left: auto;
  background: var(--krit);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .05rem .4rem;
  font-variant-numeric: tabular-nums;
}
.seitenleiste .fuss {
  padding: .8rem 1rem;
  border-top: 1px solid var(--leiste-linie);
  font-size: .72rem;
  color: var(--leiste-fg-2);
}

/* ---------- Kopfleiste über dem Inhalt ---------- */
.kopfleiste {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  padding: .55rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 3.25rem;
}
.kopfleiste .bereichsname { flex: 1; font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.kopfleiste .nutzer {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .84rem;
  color: var(--gedaempft);
  white-space: nowrap;
}
.kopfleiste .nutzer .kuerzel {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  background: var(--akzent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .kopfleiste .nutzer .kuerzel { color: #0d151d; }
}
.kopfleiste .nutzer .name { color: var(--tinte); font-weight: 600; }
.kopfleiste .nutzer form { display: inline; margin: 0; }
.kopfleiste .nutzer button.abmelden {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--gedaempft);
  font: inherit;
  font-size: .82rem;
  padding: .22rem .55rem;
  cursor: pointer;
}
.kopfleiste .nutzer button.abmelden:hover { color: var(--akzent); border-color: var(--akzent-kontur); }

main { width: 100%; max-width: 1180px; padding: 1.5rem 1.5rem 3.5rem; }
body.ohne-leiste main { margin: 0 auto; }

h1 { font-size: 1.55rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 1rem; text-wrap: balance; }
h2 {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gedaempft);
  font-weight: 700;
  margin: 1.75rem 0 .6rem;
}
h3 { font-size: 1rem; font-weight: 600; margin: 1.1rem 0 .3rem; }

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.seitenkopf h1 { margin: 0; }
.augenbraue {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .68rem;
  font-weight: 700;
  color: var(--gedaempft);
  margin: 0 0 .15rem;
}
.zurueck { display: inline-block; margin-bottom: .9rem; font-size: .88rem; font-weight: 600; }

/* ---------- Karten ---------- */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.karte > h2:first-child,
.karte > h3:first-child { margin-top: 0; }

/* Karte mit Kopfzeile – Überschrift links, Knopf rechts (wie im Prototyp) */
.karte.mitkopf { padding: 0; }
.kartenkopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .7rem 1.25rem;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche-2);
}
.kartenkopf h2, .kartenkopf h3 { margin: 0; flex: 1; }
.kartenkopf h3 { font-size: .95rem; }
.kartenleib { padding: 1.1rem 1.25rem; }
.kartenleib.eng { padding: 0; }
.kartenleib.eng table.liste { border: 0; }
.kartenleib > :first-child { margin-top: 0; }
.kartenleib > :last-child { margin-bottom: 0; }

.zwei-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  align-items: start;
}
.detail-spalten {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) { .detail-spalten { grid-template-columns: 1fr; } }

/* Beschriftung/Wert-Paare in Detailansichten */
dl.kv { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .4rem 1rem; margin: 0; }
dl.kv dt {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--gedaempft);
  padding-top: .12rem;
}
dl.kv dd { margin: 0; min-width: 0; }
@media (max-width: 560px) {
  dl.kv { grid-template-columns: 1fr; gap: .1rem; }
  dl.kv dd { margin-bottom: .55rem; }
}

.abschnitt {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
  color: var(--gedaempft);
  margin: 1.2rem 0 .35rem;
}

/* ---------- Kennzahl-Kacheln ---------- */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .85rem;
  margin-bottom: 1.5rem;
}
.kachel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  padding: .9rem 1rem;
  text-decoration: none;
  color: inherit;
  display: block;
}
a.kachel:hover { border-color: var(--akzent-kontur); box-shadow: var(--schatten-hoch); color: inherit; }
.kachel .marke {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gedaempft);
  font-weight: 700;
}
.kachel .wert {
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: .35rem 0 .1rem;
}
.kachel .fuss { font-size: .8rem; color: var(--gedaempft); }
.kachel.betont { border-color: var(--warn-kontur); background: var(--warn-bg); }
.kachel.betont .wert, .kachel.betont .marke { color: var(--warn); }
.kachel.kritisch { border-color: var(--krit-kontur); background: var(--krit-bg); }
.kachel.kritisch .wert, .kachel.kritisch .marke { color: var(--krit); }

/* ---------- Meldungen und Hinweise ---------- */
.meldungen { margin-bottom: 1rem; }
.meldungen .meldung {
  padding: .6rem 1rem;
  margin-bottom: .6rem;
  background: var(--gut-bg);
  border: 1px solid var(--gut-kontur);
  border-left: 3px solid var(--gut);
  color: var(--tinte);
}
.meldungen .meldung.error,
.meldungen .meldung.warning {
  background: var(--krit-bg);
  border-color: var(--krit-kontur);
  border-left-color: var(--krit);
}
.hinweis {
  background: var(--akzent-zart);
  border: 1px solid var(--akzent-kontur);
  border-left: 3px solid var(--akzent);
  padding: .6rem 1rem;
  font-size: .88rem;
  margin-bottom: 1rem;
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--akzent);
  color: #fff;
  border: 1px solid var(--akzent);
  padding: .5rem .95rem;
  min-height: 2.5rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.knopf:hover { background: var(--akzent-stark); border-color: var(--akzent-stark); color: #fff; }
@media (prefers-color-scheme: dark) {
  .knopf, .knopf:hover { color: #0d151d; }
}
.knopf.leise { background: var(--flaeche); color: var(--akzent); border-color: var(--linie); }
.knopf.leise:hover { background: var(--akzent-zart); border-color: var(--akzent-kontur); color: var(--akzent); }
.knopf.gefahr { background: var(--flaeche); color: var(--krit); border-color: var(--krit-kontur); }
.knopf.gefahr:hover { background: var(--krit-bg); color: var(--krit); }
.knopf.klein { min-height: 2.1rem; padding: .3rem .7rem; font-size: .85rem; }
.knopf.gesperrt { opacity: .45; cursor: default; }
.knopf svg { width: .85rem; height: .85rem; }

/* ---------- Formulare ---------- */
form.formular label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--gedaempft);
  margin: 1rem 0 .3rem;
}
form.formular input[type="text"],
form.formular input[type="password"],
form.formular input[type="email"],
form.formular input[type="date"],
form.formular input[type="number"],
form.formular input[type="file"],
form.formular input[type="search"],
form.formular select,
form.formular textarea {
  width: 100%;
  padding: .5rem .6rem;
  min-height: 2.5rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
}
form.formular select[multiple] { min-height: 8rem; padding: .3rem; }
form.formular textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
form.formular input[type="checkbox"],
form.formular input[type="radio"] { width: 1.1rem; height: 1.1rem; vertical-align: -.15rem; }
form.formular .hilfe { color: var(--gedaempft); font-size: .82rem; margin: .2rem 0 0; }
form.formular .fehler { color: var(--krit); font-size: .88rem; margin: .2rem 0 0; }
.hilfe { color: var(--gedaempft); font-size: .82rem; }
.fehler { color: var(--krit); }
.wahl { font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important;
        font-size: .92rem !important; color: inherit !important; margin: .1rem 0 !important; }

.feldpaar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.25rem; }

/* Eine Frist-Zeile im Interaktionsformular */
.fristzeile {
  border: 1px dashed var(--linie);
  background: var(--flaeche-2);
  padding: .2rem 1rem 1rem;
  margin-bottom: .7rem;
}

form.formular .aktionen,
.aktionen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.25rem; }

/* ============================================================
   Chip-Auswahlfeld mit Suche (Abschnitt 7 des Projektwissens)
   Anklicken übernimmt sofort als Chip, die Liste bleibt offen.
   Ohne JavaScript bleibt die gewöhnliche Mehrfachauswahl stehen.
   ============================================================ */
.auswahl { position: relative; }
.auswahl select[multiple] { display: none; }

.aw-feld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem;
  min-height: 2.5rem;
  padding: .3rem 1.8rem .3rem .4rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  cursor: pointer;
  position: relative;
}
.aw-feld:hover { border-color: var(--akzent-kontur); }
.auswahl.offen .aw-feld { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-zart); }
.aw-platzhalter { color: var(--gedaempft); font-size: .88rem; padding: 0 .25rem; }
.aw-pfeil {
  position: absolute;
  right: .6rem;
  top: 50%;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--gedaempft);
  pointer-events: none;
}
.aw-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--akzent-zart);
  border: 1px solid var(--akzent-kontur);
  color: var(--tinte-2);
  padding: .08rem .2rem .08rem .45rem;
  font-size: .82rem;
  max-width: 100%;
}
.aw-chip .weg {
  border: 0;
  background: none;
  color: var(--gedaempft);
  font: inherit;
  font-size: .95rem;
  line-height: 1;
  padding: 0 .25rem;
  cursor: pointer;
}
.aw-chip .weg:hover { color: var(--krit); }

.aw-klappe {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  background: var(--flaeche);
  border: 1px solid var(--akzent-kontur);
  box-shadow: var(--schatten-hoch);
}
.aw-suche {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--linie);
  padding: .55rem .7rem !important;
  min-height: 0 !important;
  font: inherit;
  font-size: .9rem;
  background: var(--flaeche);
  color: var(--tinte);
}
.aw-suche:focus { outline: none; }
.aw-liste { max-height: 14rem; overflow-y: auto; }
.aw-treffer {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  font-size: .9rem;
  color: var(--tinte);
  padding: .4rem .7rem;
  cursor: pointer;
}
.aw-treffer:hover, .aw-treffer:focus { background: var(--akzent-zart); color: var(--akzent); }
.aw-treffer .neben { color: var(--gedaempft); font-size: .8rem; }
.aw-nichts { padding: .7rem; color: var(--gedaempft); font-size: .86rem; text-align: center; }
.aw-fuss { border-top: 1px solid var(--linie); padding: .45rem; background: var(--flaeche-2); }
.aw-fuss .knopf { width: 100%; }

/* ---------- Overlay zum Neuanlegen ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 20, 30, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
  z-index: 100;
}
.overlay-kasten {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-hoch);
  width: 100%;
  max-width: 30rem;
  margin: auto;
}
.overlay-kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--linie);
}
.overlay-kopf h3 { margin: 0; flex: 1; font-size: 1rem; }
.overlay-kopf .schliessen {
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gedaempft);
  cursor: pointer;
  padding: 0 .3rem;
}
.overlay-kopf .schliessen:hover { color: var(--krit); }
.overlay-leib { padding: 1.1rem; }
.overlay-leib label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--gedaempft);
  margin: .8rem 0 .3rem;
}
.overlay-leib label:first-child { margin-top: 0; }
.overlay-leib input, .overlay-leib select, .overlay-leib textarea {
  width: 100%;
  padding: .5rem .6rem;
  min-height: 2.5rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
}
/* Die Felder kommen seit dem 12.08.2026 fertig vom Server (dieselben wie im
   Kontaktverzeichnis) – mit Hilfetexten und Fehlermeldungen dazwischen. */
.overlay-felder .hilfe { margin: .25rem 0 0; font-size: .78rem; }
.overlay-felder .fehler { margin: .25rem 0 0; }
.overlay-felder textarea { min-height: 4.5rem; }
.overlay-fuss {
  display: flex;
  gap: .6rem;
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--linie);
  background: var(--flaeche-2);
}
/* Auswahlfeld im Overlay (verschachteltes Anlegen): die allgemeinen
   Overlay-Regeln für Eingabefelder dürfen die Klappe nicht überschreiben. */
.overlay-leib .auswahl { margin-bottom: .2rem; }
.overlay-leib .aw-klappe .aw-suche {
  border: 0;
  border-bottom: 1px solid var(--linie);
  min-height: 0;
}
.overlay-leib > .aw-nichts { display: block; padding: .35rem 0; text-align: left; }

body.overlay-offen { overflow: hidden; }

/* ---------- Formatierleiste über dem Inhaltsfeld (12.08.2026) ---------- */
.textformat {
  display: flex;
  gap: .3rem;
  margin-bottom: .3rem;
}
.textformat .tf {
  min-width: 2.2rem;
  min-height: 2.2rem;          /* am Handy mit dem Daumen treffbar */
  border: 1px solid var(--linie);
  background: var(--flaeche-2);
  color: var(--tinte);
  font: inherit;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
}
.textformat .tf:hover { border-color: var(--akzent-kontur); color: var(--akzent); }
.textformat .tf.fett { font-weight: 700; }
.textformat .tf.kursiv { font-style: italic; }
.textformat .tf.ueber { font-weight: 700; }

/* ---------- Gesetzter Text (Inhalt, Bemerkungen) ---------- */
.fliesstext > :first-child { margin-top: 0; }
.fliesstext > :last-child { margin-bottom: 0; }
.fliesstext p { margin: 0 0 .7rem; }
.fliesstext h4 {
  margin: 1.1rem 0 .35rem;
  font-size: .95rem;
  font-weight: 700;
}
.fliesstext ul { margin: 0 0 .7rem; padding-left: 1.2rem; }
.fliesstext li { margin-bottom: .2rem; }

/* ---------- Filter zum Auf- und Zuklappen ---------- */
details.filter {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  margin-bottom: 1rem;
}
details.filter > summary {
  list-style: none;
  cursor: pointer;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  font-weight: 600;
}
details.filter > summary::-webkit-details-marker { display: none; }
details.filter > summary::after {
  content: "";
  margin-left: auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--gedaempft);
}
details.filter[open] > summary { border-bottom: 1px solid var(--linie-zart); }
details.filter[open] > summary::after { border-top: 0; border-bottom: 6px solid var(--gedaempft); }
.filterinhalt {
  padding: .4rem 1rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 1.1rem;
}
.filterinhalt .breit { grid-column: 1 / -1; }
.filterinhalt .aktionen { grid-column: 1 / -1; }

/* ---------- Tabellen ---------- */
.tabellenrahmen {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  margin-bottom: 1rem;
  overflow-x: auto;
}
table.liste {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .92rem;
  background: var(--flaeche);
  /* Ohne den Behälter .tabellenrahmen trägt die Tabelle die Kontur selbst */
  border: 1px solid var(--linie);
}
.tabellenrahmen table.liste { border: 0; }

table.liste th {
  text-align: left;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--gedaempft);
  background: var(--flaeche-2);
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
table.liste td { padding: .65rem .9rem; border-bottom: 1px solid var(--linie-zart); vertical-align: top; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste tbody tr:hover td { background: var(--akzent-zart); }
table.liste td.datum { white-space: nowrap; color: var(--tinte-2); }

/* Farbstreifen nach Dringlichkeit (Fristen) */
table.liste tr.rot td:first-child { border-left: 3px solid var(--krit); }
table.liste tr.gelb td:first-child { border-left: 3px solid var(--warn); }
table.liste tr.gruen td:first-child { border-left: 3px solid var(--gut); }
table.liste tr.entwurf td:first-child { border-left: 3px solid var(--entwurf); }

/* Ganze Zeile anklickbar (siehe _zeilenklick.html): Zeiger und deutlichere
   Hervorhebung zeigen, dass nicht nur das Datum ein Ziel ist. */
table.liste tr[data-ziel] { cursor: pointer; }
table.liste tr[data-ziel]:hover td { background: var(--akzent-zart); }

table.liste td .werkzeuge,
.werkzeuge { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- Blättern ---------- */
.seiten { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* ---------- Merkmale ---------- */
.chip {
  display: inline-block;
  background: var(--akzent-zart);
  border: 1px solid var(--akzent-kontur);
  color: var(--tinte-2);
  padding: .06rem .55rem;
  font-size: .8rem;
  margin: 0 .25rem .25rem 0;
  /* Ein einzelnes langes Schlagwort darf die Seite nicht in die Breite
     ziehen – am Handy ist der Platz knapp („Youth Collaborations MENA /
     We are MENA"). Umbrochen wird nur, wenn das Wort allein zu breit ist. */
  max-width: 100%;
  overflow-wrap: break-word;
}
a .chip { color: var(--akzent); }
a.chip { color: var(--akzent); text-decoration: none; }
a.chip:hover { border-color: var(--akzent); }
.chip.grau { background: var(--flaeche-2); border-color: var(--linie); color: var(--tinte-2); }

.status-entwurf,
.status-archiviert,
.marker {
  display: inline-block;
  padding: .06rem .55rem;
  font-size: .74rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-entwurf { background: var(--entwurf-bg); color: var(--entwurf); border-color: var(--warn-kontur); }
/* Recherchedatum am Anfang jeder KI-Angabe: zurückhaltender als die
   Entwurfsmarke – es ist eine Einordnung, keine Warnung. */
.stand {
  display: inline-block;
  padding: .06rem .55rem;
  font-size: .74rem;
  font-weight: 600;
  background: var(--flaeche-2);
  color: var(--gedaempft);
  border: 1px solid var(--linie);
  white-space: nowrap;
}
.status-archiviert { background: var(--flaeche-2); color: var(--gedaempft); border-color: var(--linie); }
.marker.gruen { background: var(--gut-bg); color: var(--gut); border-color: var(--gut-kontur); }
.marker.gelb { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-kontur); }
.marker.rot { background: var(--krit-bg); color: var(--krit); border-color: var(--krit-kontur); }
.marker.grau { background: var(--flaeche-2); color: var(--gedaempft); border-color: var(--linie); }

.ampel { display: inline-block; width: .65rem; height: .65rem; margin-right: .4rem; vertical-align: .02rem; }
.ampel.rot { background: var(--krit); }
.ampel.gelb { background: var(--warn); }
.ampel.gruen { background: var(--gut); }
.ampel.grau { background: var(--gedaempft); }

.entwurf-kasten {
  background: var(--flaeche);
  border: 1px dashed var(--warn-kontur);
  border-left: 3px solid var(--entwurf);
  padding: .9rem 1rem;
  margin-bottom: .7rem;
}

/* ---------- Profil & Einordnung (Kontaktprofil) ---------- */
.profileintrag { padding: .5rem 0; border-bottom: 1px solid var(--linie-zart); }
.profileintrag:last-of-type { border-bottom: 0; }

.themenblock {
  border-left: 3px solid var(--akzent-kontur);
  padding: .1rem 0 .1rem .85rem;
  margin-bottom: .8rem;
}
.themenblock.entwurf { border-left-color: var(--entwurf); }
.themenblock b { font-size: .95rem; }

/* ---------- Themengruppen im Profil ----------
   Die Rubrik steht einmal links, die Fundstellen dazu rechts daneben.
   Zwischen zwei Fundstellen desselben Themas eine zarte Linie, zwischen
   den Themen eine deutlich kräftigere (Rückmeldung Elio, 10.08.2026). */
.themengruppe {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 0 1.2rem;
  padding: .9rem 0;
}
.themengruppe + .themengruppe { border-top: 3px solid var(--linie); }
.themengruppe.ohne-rubrik { grid-template-columns: 1fr; }
.themengruppe.ohne-rubrik > .rubrik:empty { display: none; }
.themengruppe > .rubrik > b { font-size: .95rem; display: block; margin-bottom: .35rem; }

.fundstelle + .fundstelle {
  border-top: 1px solid var(--linie-zart);
  margin-top: .6rem;
  padding-top: .6rem;
}
.fundstelle.entwurf { border-left: 3px solid var(--entwurf); padding-left: .7rem; }

/* Herkunft (KI-Recherche / KI-Einschätzung / von Hand) an jeder Fundstelle */
.herkunft { word-break: break-word; }

/* Freitextfeld für eigene Ergänzungen – zugeklappt, damit es nicht stört */
.ergaenzung { margin-top: .5rem; }
.ergaenzung > summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--akzent);
}
.ergaenzung textarea, .ergaenzung input[type="text"], .ergaenzung select {
  width: 100%;
  margin-top: .4rem;
}

@media (max-width: 700px) {
  .themengruppe { grid-template-columns: 1fr; gap: .3rem; }
}

.ratschlaege { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .5rem; }
.rat { border: 1px solid var(--linie); padding: .8rem 1rem; font-size: .9rem; }
.rat.gut { background: var(--gut-bg); border-color: var(--gut-kontur); }
.rat.heikel { background: var(--warn-bg); border-color: var(--warn-kontur); }
.rat .entwurf-kasten, .rat .profileintrag { background: transparent; }
.rat > b { display: block; margin-bottom: .3rem; }

/* Recherche-Prompt: Werkzeugkasten, deshalb bewusst abgesetzt (gestrichelt) */
.promptkasten {
  border: 1px dashed var(--linie);
  background: var(--flaeche-2);
  padding: 1rem;
  margin-top: 1.4rem;
}
.promptkasten .kopf {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.promptkasten .kopf b { flex: 1; min-width: 12rem; font-size: .95rem; }
.promptfeld {
  width: 100%;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--tinte-2);
  padding: .7rem .8rem;
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: .78rem;
  line-height: 1.5;
  resize: vertical;
}
details.vorschau { margin: .6rem 0; }
details.vorschau > summary { cursor: pointer; font-weight: 600; font-size: .9rem; padding: .3rem 0; }

@media (max-width: 700px) { .ratschlaege { grid-template-columns: 1fr; } }

/* ---------- Fristzeilen (Dashboard, Interaktionsdetail, Kontaktprofil) ---------- */
.frist { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--linie-zart); }
.frist:first-child { padding-top: 0; }
.frist:last-child { border-bottom: 0; padding-bottom: 0; }
.frist > .ampel { margin-top: .45rem; }
.frist .text { flex: 1; min-width: 0; }
.frist .text a { font-weight: 600; text-decoration: none; }
.frist .text a:hover { text-decoration: underline; }
.frist .text .unter { font-size: .82rem; color: var(--gedaempft); }
.frist .rand { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex: none; }

/* ---------- Anhänge ---------- */
.anhang {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--linie);
  background: var(--flaeche-2);
  padding: .45rem .75rem;
  margin-bottom: .4rem;
  font-size: .88rem;
}
.anhang svg { width: .95rem; height: .95rem; flex: none; color: var(--gedaempft); }
.anhang .name { min-width: 0; overflow-wrap: anywhere; }
.anhang .groesse { margin-left: auto; color: var(--gedaempft); font-size: .8rem; white-space: nowrap; }
.anhang form { margin: 0; }

/* ---------- Historie ---------- */
.historie-zeile { padding: .45rem 0; border-bottom: 1px solid var(--linie-zart); font-size: .88rem; }
.historie-zeile:last-child { border-bottom: 0; }
.historie-zeile .unter { font-size: .8rem; color: var(--gedaempft); }

/* ---------- Kontaktkarten ---------- */
.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.kontakt-karte {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  padding: .9rem 1rem;
  color: inherit;
  text-decoration: none;
}
.kontakt-karte:hover { border-color: var(--akzent-kontur); box-shadow: var(--schatten-hoch); color: inherit; }
.kontakt-karte .monogramm {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--akzent-zart);
  border: 1px solid var(--akzent-kontur);
  color: var(--akzent);
  font-size: .82rem;
  font-weight: 700;
}
.kontakt-karte .monogramm.org { background: var(--flaeche-2); border-color: var(--linie); color: var(--gedaempft); }
.kontakt-karte .inhalt { min-width: 0; }
.kontakt-karte h3 { margin: 0 0 .3rem; font-size: 1rem; }
.kontakt-karte .leise { font-size: .84rem; }

/* ---------- Anmeldung ---------- */
.anmeldung {
  max-width: 26rem;
  margin: 8vh auto;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-hoch);
  padding: 2rem;
}
.anmeldung h1 { text-align: center; }
.anmeldung .qr { text-align: center; margin: 1rem 0; }
.anmeldung .qr svg { width: 220px; height: 220px; }

/* Schlüssel im Klartext, für Werkzeuge ohne Kamera. Zugeklappt, damit der
   QR-Code der Hauptweg bleibt. Das Feld ist bewusst breit und in fester
   Schrittweite gesetzt – abgetippt wird hier Zeichen für Zeichen. */
.schluessel { margin: 0 0 1rem; border: 1px solid var(--linie, #e8eef5); padding: .6rem .8rem; }
.schluessel summary { cursor: pointer; font-size: .92rem; }
.schluessel input {
  width: 100%; font-family: ui-monospace, "Roboto Mono", monospace;
  letter-spacing: .06em; font-size: 1.02rem; margin: .3rem 0 .5rem;
}
.schluessel .hilfe { margin: .3rem 0; }

/* ============================================================
   Schmale Bildschirme: Seitenleiste wandert nach oben,
   Tabellen werden Karten
   ============================================================ */
@media (max-width: 900px) {
  /* Aus der Seitenleiste wird ein Band oben: Marke und Konto in einer
     Zeile, darunter die Bereiche als seitlich schiebbare Leiste.
     Kein Aufklappmenü, kein Skript – ein Fingertipp je Bereich. */
  .huelle { flex-direction: column; }
  .seitenleiste { width: 100%; height: auto; position: sticky; top: 0; z-index: 30; }
  .seitenleiste .marke { border-bottom: 0; padding: .6rem .9rem .5rem; }
  .seitenleiste .marke .zeichen { width: 1.8rem; height: 1.8rem; font-size: .7rem; }
  .seitenleiste nav {
    flex-direction: row;
    gap: 0;
    padding: 0 .9rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .seitenleiste nav::-webkit-scrollbar { display: none; }
  .seitenleiste nav a { white-space: nowrap; padding: .55rem .7rem; }
  .seitenleiste .fuss { display: none; }

  .kopfleiste { padding: .5rem .9rem; min-height: 3rem; }
  .kopfleiste .nutzer .name { display: none; }

  main { padding: 1.1rem .9rem 3rem; }
  h1 { font-size: 1.35rem; }

  .karte { padding: .9rem 1rem; }
  .kartenkopf { padding: .6rem 1rem; }
  .kartenleib { padding: .9rem 1rem; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .kachel { padding: .7rem .8rem; }
  .kachel .wert { font-size: 1.5rem; }

  /* Aus jeder Zeile wird eine Karte; die Spaltenüberschrift wandert
     als Beschriftung nach vorn (data-spalte am <td>). */
  .tabellenrahmen { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  table.liste { border: 0; background: transparent; }
  table.liste, table.liste tbody, table.liste tr, table.liste td { display: block; width: 100%; }
  table.liste thead, table.liste tr.kopfzeile { display: none; }
  table.liste tr {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    box-shadow: var(--schatten);
    margin-bottom: .6rem;
    padding: .45rem 0;
  }
  table.liste tbody tr:hover td { background: transparent; }
  /* Am Finger gibt es kein Überfahren: Die Karte quittiert die Berührung. */
  table.liste tr[data-ziel]:hover td { background: transparent; }
  table.liste tr[data-ziel]:active { background: var(--akzent-zart); }
  /* Die Beschriftung steht in einer eigenen Spalte links, der Inhalt bleibt
     ein gewöhnlicher Block. Vorher war die Zelle ein Flex-Kasten – damit war
     JEDES Schlagwort ein eigenes Flex-Element in einer Reihe, die nicht
     umbrach: bei drei Themen liefen die Kästchen über den Kartenrand hinaus
     und zogen die ganze Seite in die Breite (Meldung Elio 11.08.2026).
     Als Block fließen sie wie Text und brechen von allein um. */
  table.liste td {
    border: 0;
    padding: .25rem .8rem .25rem calc(.8rem + 5.5rem + .75rem);
    position: relative;
    min-height: 1.2rem;
  }
  table.liste tr.rot { border-left: 3px solid var(--krit); }
  table.liste tr.gelb { border-left: 3px solid var(--warn); }
  table.liste tr.gruen { border-left: 3px solid var(--gut); }
  table.liste tr.entwurf { border-left: 3px solid var(--entwurf); }
  table.liste tr.rot td:first-child,
  table.liste tr.gelb td:first-child,
  table.liste tr.gruen td:first-child,
  table.liste tr.entwurf td:first-child { border-left: 0; }
  table.liste td[data-spalte]::before {
    content: attr(data-spalte);
    position: absolute;
    left: .8rem;
    top: .45rem;
    width: 5.5rem;
    color: var(--gedaempft);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
  }
  /* Volle Breite: Beschriftung darüber statt daneben. */
  table.liste td.voll { padding-left: .8rem; }
  table.liste td.voll[data-spalte]::before {
    position: static;
    display: block;
    width: auto;
    margin-bottom: .15rem;
  }
  table.liste td:empty { display: none; }
  /* Der Ampelpunkt entfällt – die Dringlichkeit zeigt der Streifen an der Karte */
  table.liste td.ampelzelle { display: none; }

  /* Auswahllisten: viele kurze Einträge. Als Karte je Begriff nimmt das zu
     viel Platz weg (Rückmeldung Elio 10.08.2026) – hier bleibt es bei einer
     Zeile je Begriff: Name, dahinter die Knöpfe. */
  table.liste.kompakt tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    margin-bottom: .35rem;
    padding: .45rem .6rem;
  }
  table.liste.kompakt td { display: block; width: auto; padding: 0; }
  table.liste.kompakt td[data-spalte]::before { content: none; }
  table.liste.kompakt td[data-spalte="Name"] { flex: 1 1 55%; font-weight: 600; }
  table.liste.kompakt td[data-spalte="Verwendet"] { color: var(--gedaempft); font-size: .8rem; }
  table.liste.kompakt .knopf { min-height: 1.9rem; padding: .2rem .55rem; font-size: .8rem; }

  .kontakt-raster { grid-template-columns: 1fr; }
  .zwei-spalten { grid-template-columns: 1fr; }
  .anmeldung { margin: 3vh .25rem; padding: 1.25rem; }

  .aktionen .knopf { flex: 1; }
}

/* ---------- Hinweis auf ungespeicherte Änderungen ---------- */
/* Eckig wie alles andere; erscheint nur, wenn wirklich etwas geändert wurde. */
dialog.ungespeichert {
  border: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
  background: var(--flaeche);
  color: var(--tinte);
  padding: 1.1rem 1.2rem 1.2rem;
  max-width: 30rem;
  width: calc(100% - 2rem);
  box-shadow: 0 12px 32px rgba(9, 20, 32, .22);
}
dialog.ungespeichert::backdrop { background: rgba(9, 20, 32, .45); }
dialog.ungespeichert h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
dialog.ungespeichert p { margin: 0 0 1rem; color: var(--tinte-2); }
dialog.ungespeichert .aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }

@media (max-width: 640px) {
  dialog.ungespeichert .aktionen { flex-direction: column; }
  dialog.ungespeichert .aktionen .knopf { width: 100%; }
}

/* ============================================================
   Suchbereich (Dashboard und Suchseite) und Trefferliste
   Das Freitextfeld steht bewusst über den Filtern und ist das breiteste
   Bedienelement der Seite: die meisten Suchen sind ein Wort, nicht ein
   Formular. Die Filter klappen darunter auf.
   ============================================================ */
.suchbereich { margin-bottom: 1.5rem; }

.suchbereich .suchzeile { display: flex; gap: .5rem; }
.suchbereich .suchzeile input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 2.9rem;
  padding: .5rem .75rem;
  font-size: 1.02rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  background: var(--flaeche);
  color: var(--tinte);
  font-family: inherit;
}
.suchbereich .suchzeile input[type="search"]::placeholder { color: var(--gedaempft); }
.suchbereich .suchzeile .knopf { min-height: 2.9rem; padding-left: 1.4rem; padding-right: 1.4rem; }
.suchbereich details.filter { margin-top: .5rem; }
/* Im Suchbereich beginnt die Beschriftung direkt über dem Feld – der
   Abstand aus dem Erfassungsformular säße hier viel zu locker. */
.suchbereich .filterinhalt label { margin-top: .2rem; }

.treffer { padding: .6rem 0; border-bottom: 1px solid var(--linie-zart); }
.treffer:last-child { border-bottom: 0; }
.treffer .ziel { font-weight: 600; text-decoration: none; }
.treffer .ziel:hover { text-decoration: underline; }
.treffer .unter { color: var(--gedaempft); font-size: .84rem; }
.treffer .auszug { color: var(--tinte-2); font-size: .9rem; margin-top: .15rem; }
.treffer .auszug mark,
.treffer .ziel mark {
  background: var(--warn-bg);
  color: inherit;
  font-weight: 600;
  padding: 0 .1rem;
}
.treffer .status-entwurf, .treffer .marker { margin-left: .4rem; vertical-align: .05rem; }

@media (max-width: 640px) {
  .suchbereich .suchzeile { flex-wrap: wrap; }
  .suchbereich .suchzeile input[type="search"] { flex: 1 0 100%; }
  .suchbereich .suchzeile .knopf { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}