/* Werkdesk - Oberflaeche
 *
 * Ein einziges Blatt statt eines Rahmenwerks. Die Erweiterung verlangt
 * ausdruecklich freie Bausteine und wenig Ballast; ein Framework zu laden
 * hiesse, dreitausend Regeln mitzuschleppen, von denen fuenfzig gebraucht
 * werden - und der erste Eindruck waere wieder der einer Webseite.
 *
 * Vorbild ist eine Mac-Anwendung: heller Grund, weisse Karten mit feiner
 * Kante, viel Luft, ruhige Farben. Farbe bedeutet hier etwas (Ampel, Frist,
 * Fehler) und schmueckt nicht.
 *
 * Kein Dark Mode. Das ist eine Vorgabe und kein Versehen - deshalb steht
 * hier auch kein `prefers-color-scheme`.
 */

:root {
  /* Flaechen. Drei Ebenen reichen: Fenstergrund, Karte, hervorgehoben. */
  --grund:        #f2f2f5;
  --grund-tief:   #ebebef;
  --karte:        #ffffff;
  --erhoben:      #fbfbfd;
  --seitenleiste: #f7f7f9;

  /* Kanten. Sehr fein - eine sichtbare Tabellenlinie ist genau das, was die
     Anwendung nicht mehr sein soll. */
  --linie:        rgba(0, 0, 0, 0.07);
  --linie-stark:  rgba(0, 0, 0, 0.13);
  --linie-feld:   rgba(0, 0, 0, 0.16);

  /* Schrift */
  --text:         #1d1d1f;
  --text-zart:    #55555c;
  --text-leise:   #86868b;

  /* Akzent */
  --akzent:       #0a6ed1;
  --akzent-tief:  #0a5cb0;
  --akzent-hell:  #eaf2fc;
  --akzent-rand:  #b9d5f3;

  /* Bedeutungsfarben */
  --gruen:        #1c7a4a;
  --gruen-hell:   #e7f5ed;
  --gruen-rand:   #b9e0cb;
  --gelb:         #8a5d00;
  --gelb-hell:    #fdf4e0;
  --gelb-rand:    #ecd9a8;
  --rot:          #b3261e;
  --rot-hell:     #fceceb;
  --rot-rand:     #f0c8c5;
  --lila:         #5b4bc4;
  --lila-hell:    #eeecfb;

  /* Form */
  --radius:       12px;
  --radius-klein: 8px;
  --radius-rund:  999px;

  /* Schatten. Zwei Stufen: ruhend und schwebend. */
  --schatten:      0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
  --schatten-hoch: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --schatten-weit: 0 18px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);

  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: -apple-system, BlinkMacSystemFont, "SF Mono", ui-monospace,
                  "SFMono-Regular", Menlo, monospace;

  --leiste:  248px;   /* Breite der Seitenleiste */
  --uebergang: 140ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 22px; font-weight: 650; margin: 0; letter-spacing: -0.2px; }
h2 { font-size: 15px; font-weight: 650; margin: 0 0 12px; letter-spacing: -0.1px; }
h3 { font-size: 13px; font-weight: 650; margin: 18px 0 8px; color: var(--text-zart); }

.zahlen { font-variant-numeric: tabular-nums; }

/* ============================================================ Anwendungsrahmen
 *
 * Links die Seitenleiste, rechts der Inhalt - der Schnitt, den jede
 * Mac-Anwendung hat. Die Leiste steht fest, gescrollt wird nur der Inhalt;
 * das ist der spuerbarste Unterschied zu einer Seite, die als Ganzes wegrollt.
 */

.rahmen {
  display: grid;
  grid-template-columns: var(--leiste) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

/* ------------------------------------------------------------ Seitenleiste */

.leiste {
  display: flex;
  flex-direction: column;
  background: var(--seitenleiste);
  border-right: 1px solid var(--linie);
  padding: 14px 10px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.leiste .marke {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 16px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
}

.leiste .marke .zeichen {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(160deg, #2b8ae0, var(--akzent-tief));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(10, 92, 176, 0.4);
}

.leiste .gruppe {
  padding: 14px 12px 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-leise);
}

.leiste a.punkt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-bottom: 1px;
  border-radius: var(--radius-klein);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--uebergang);
}

.leiste a.punkt:hover { background: rgba(0, 0, 0, 0.045); text-decoration: none; }

.leiste a.punkt.hier {
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(10, 110, 209, 0.35);
}

.leiste a.punkt.hier .ikone { opacity: 1; }
.leiste .ikone { flex: 0 0 17px; opacity: 0.62; }

/* Die Zahl rechts am Navigationspunkt: ungelesene Post, ungesehene Treffer.
   Sie ist der Grund, ueberhaupt hinzusehen - deshalb steht sie in der
   Navigation und nicht erst auf der Zielseite. */
.leiste .zaehler {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--radius-rund);
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-zart);
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.leiste a.punkt.hier .zaehler { background: rgba(255, 255, 255, 0.28); color: #fff; }
.leiste .zaehler.warnung { background: var(--rot); color: #fff; }
.leiste a.punkt.hier .zaehler.warnung { background: rgba(255, 255, 255, 0.9); color: var(--rot); }

.leiste .fuss { margin-top: auto; padding-top: 12px; }

.leiste .wer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-klein);
  background: rgba(0, 0, 0, 0.035);
}

.leiste .wer .kringel {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, #9aa4b2, #6c7784);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.leiste .wer .name {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leiste .wer .rolle { font-size: 11px; color: var(--text-leise); }
.leiste .wer .abmelden { margin-left: auto; color: var(--text-leise); display: flex; }
.leiste .wer .abmelden:hover { color: var(--rot); }

/* --------------------------------------------------------------- Inhalt */

.inhalt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* Die Werkzeugleiste bleibt beim Rollen stehen. In einer Anwendung wandert
   der Titel nicht aus dem Bild - man will jederzeit wissen, wo man ist. */
.werkleiste {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 26px;
  background: rgba(242, 242, 245, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie);
}

.werkleiste .titelblock { min-width: 0; }
.werkleiste .unterzeile {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--text-leise);
}

.werkleiste .werkzeuge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.blatt { padding: 22px 26px 60px; flex: 1; }
.blatt.eng { max-width: 980px; }
.blatt.randlos { padding: 0; display: flex; flex-direction: column; min-height: 0; }

footer.fussnote {
  padding: 0 26px 26px;
  color: var(--text-leise);
  font-size: 11.5px;
}

footer.fussnote .langsam { color: var(--rot); }

/* ==================================================================== Karten */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.karte.flach { box-shadow: none; }
.karte.gepolstert { padding: 22px 24px; }
.karte > h2:first-child { margin-top: 0; }
.karte > *:last-child { margin-bottom: 0; }

.kartenkopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 14px;
}

.kartenkopf h2 { margin: 0; }
.kartenkopf .rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* Zweispaltiger Aufbau fuer Akten: Inhalt links, Steuerung rechts. */
.akte {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.9fr);
  gap: 16px;
  align-items: start;
}

/* ------------------------------------------------------------- Kennzahlen */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kachel {
  position: relative;
  display: block;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 15px 16px 14px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}

/* Der Farbstreifen sagt, worum es geht, ohne die Karte einzufaerben. */
.kachel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--linie-stark);
}

a.kachel:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--schatten-hoch);
}

.kachel .kopfzeile {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-leise);
  font-size: 12px;
  font-weight: 600;
}

.kachel .kopfzeile .ikone { opacity: 0.75; }

.kachel .zahl {
  margin-top: 6px;
  font-size: 27px;
  font-weight: 640;
  line-height: 1.1;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}

.kachel .titel { margin-top: 1px; font-size: 13px; font-weight: 600; }
.kachel .unterzeile { margin-top: 2px; font-size: 11.5px; color: var(--text-leise); }

.kachel.gruen::before   { background: var(--gruen); }
.kachel.gelb::before    { background: #d0a33a; }
.kachel.warnung::before { background: var(--rot); }
.kachel.hinweis::before { background: var(--akzent); }
.kachel.lila::before    { background: var(--lila); }

.kachel.gruen .zahl   { color: var(--gruen); }
.kachel.warnung .zahl { color: var(--rot); }

/* ================================================================== Bedienung
 *
 * Schaltflaechen im Mac-Schnitt: rund, ruhig, mit deutlichem aber nicht
 * schreiendem Hauptknopf.
 */

button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  background: var(--karte);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--schatten);
  transition: background var(--uebergang), border-color var(--uebergang),
              transform var(--uebergang);
}

button:hover, .knopf:hover { background: var(--erhoben); border-color: var(--linie-feld); text-decoration: none; }
button:active, .knopf:active { transform: scale(0.98); background: var(--grund-tief); }
button:disabled { opacity: 0.45; cursor: default; transform: none; }

button.haupt, .knopf.haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 110, 209, 0.3);
}

button.haupt:hover, .knopf.haupt:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }

button.warnung, .knopf.warnung { color: var(--rot); border-color: var(--rot-rand); }
button.warnung:hover, .knopf.warnung:hover { background: var(--rot-hell); }

button.gross, .knopf.gross { height: 34px; padding: 0 18px; font-size: 13.5px; }
button.klein, .knopf.klein { height: 26px; padding: 0 9px; font-size: 12px; }

/* Ein Knopf, der nur ein Zeichen traegt. */
button.still, .knopf.still {
  width: 30px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-zart);
}

button.still:hover, .knopf.still:hover { background: rgba(0, 0, 0, 0.06); border-color: transparent; }
button.still.aktiv { color: var(--akzent); background: var(--akzent-hell); }

/* Ein Knopf, der aussieht wie ein Verweis - fuer Nebensaechliches in Zeilen. */
button.verweis {
  height: auto;
  padding: 0 2px;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--akzent);
  font-weight: 500;
  font-size: 12.5px;
}

button.verweis:hover { background: none; text-decoration: underline; transform: none; }
button.verweis.warnung { color: var(--rot); }

/* Umschalter zwischen zwei Ansichten - das Segmented Control von macOS. */
.umschalter {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius-klein);
  background: var(--grund-tief);
  border: 1px solid var(--linie);
}

.umschalter a, .umschalter button {
  height: 24px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: var(--text-zart);
  font-size: 12.5px;
  font-weight: 550;
}

.umschalter a:hover, .umschalter button:hover { background: rgba(0, 0, 0, 0.04); text-decoration: none; }

.umschalter a.hier, .umschalter button.hier {
  background: var(--karte);
  color: var(--text);
  box-shadow: var(--schatten);
}

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

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-zart);
  margin-bottom: 12px;
}

label.schalter {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
  cursor: pointer;
}

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], input[type=time], input[type=datetime-local],
input[type=search], input[type=file], select, textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 10px;
  min-height: 30px;
  border: 1px solid var(--linie-feld);
  border-radius: var(--radius-klein);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  background: var(--karte);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.02);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath fill='%2386868b' d='M5 1.5 8 5H2zM5 12.5 2 9h6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

textarea { resize: vertical; min-height: 70px; line-height: 1.55; }

input:focus, select:focus, textarea:focus, [contenteditable]:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(10, 110, 209, 0.16);
}

input[type=checkbox], input[type=radio] { accent-color: var(--akzent); width: 15px; height: 15px; margin: 0; }

::placeholder { color: var(--text-leise); opacity: 1; }

form.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px 16px;
  align-items: end;
}

form.raster .volle-breite { grid-column: 1 / -1; }
form.raster > button, form.raster > .knopf { justify-self: start; margin-bottom: 12px; }
form.schmal { max-width: 620px; }
form.inline { display: inline-flex; gap: 6px; align-items: center; }
form.inline label { margin-bottom: 0; }

.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Suchfeld mit Lupe. Nach oben begrenzt: ein Suchfeld, das die halbe
   Filterzeile einnimmt, drueckt die Filter in die naechste Reihe. */
.suchfeld { position: relative; flex: 1 1 230px; min-width: 150px; max-width: 330px; }
.suchfeld input { margin-top: 0; padding-left: 30px; }
.suchfeld .ikone {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-leise);
  pointer-events: none;
}

/* Die Filterzeile ueber einer Liste. Keine Karte - sie gehoert zur Liste. */
.filterzeile {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.filterzeile select, .filterzeile input { margin-top: 0; width: auto; min-width: 138px; }
.filterzeile label { margin-bottom: 0; }
.filterzeile .trenner { width: 1px; height: 20px; background: var(--linie-stark); }
.filterzeile .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ------------------------------------------------- Einfache Tabellen
 *
 * Nicht jede Aufstellung braucht das Raster. Die Leistungen eines Betriebs
 * oder die Zugaenge in der Verwaltung sind kurze, feste Listen ohne Filter,
 * Sortierung und Export - dort waere das Raster Aufwand ohne Nutzen.
 *
 * Die Grundregeln fuer `table` fielen beim Umbau auf das Raster weg, und die
 * beiden Seiten, die sie noch benutzen, standen daraufhin als nackte
 * HTML-Tabelle da: Spalten ohne Abstand, Ueberschriften aneinandergeklebt.
 * Genau das Bild, das Punkt 1 der Erweiterung ausschliesst. Sie sehen jetzt
 * aus wie das Raster, koennen aber nichts von dem, was es kann.
 */

table:not(.raster):not(.kalender) {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table:not(.raster):not(.kalender) th,
table:not(.raster):not(.kalender) td {
  text-align: left;
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}

table:not(.raster):not(.kalender) thead th {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-leise);
  white-space: nowrap;
}

table:not(.raster):not(.kalender) tbody tr:last-child td { border-bottom: none; }
table:not(.raster):not(.kalender) tr.inaktiv { opacity: 0.55; }
table:not(.raster):not(.kalender) td.zahl,
table:not(.raster):not(.kalender) th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
/* Die Aktionen einer Zeile nebeneinander, nicht untereinander: drei
   Formulare hintereinander sind drei Bloecke, und daraus wird sonst eine
   Treppe statt einer Zeile. */
table:not(.raster):not(.kalender) td.aktionen { white-space: nowrap; text-align: right; }
table:not(.raster):not(.kalender) td.aktionen .inline { display: inline-block; margin-right: 10px; }
table:not(.raster):not(.kalender) td.aktionen .inline:last-child { margin-right: 0; }
/* Die Aufklappmarke des Browsers faellt weg. Drei Aktionen nebeneinander,
   von denen zwei ein Dreieck vor sich hertragen, lesen sich als
   „sperren ▸bearbeiten ▸Passwort" - das Dreieck klebt am falschen Wort. */
table:not(.raster):not(.kalender) td.aktionen details.inline > summary {
  cursor: pointer;
  list-style: none;
  color: var(--akzent);
  font-weight: 550;
}
table:not(.raster):not(.kalender) td.aktionen details.inline > summary::-webkit-details-marker { display: none; }
table:not(.raster):not(.kalender) td.aktionen details.inline > summary:hover { text-decoration: underline; }
/* Aufgeklappt braucht das Formular die volle Zeile und keinen Platz in einer
   Reihe mit den uebrigen Aktionen. */
table:not(.raster):not(.kalender) td.aktionen details.inline[open] { display: block; margin: 8px 0 0; text-align: left; }
/* Der Zusatz unter einem Wert - der Kurzname einer Quelle, die Funktion eines
   Kontakts. Er gehoert in die zweite Zeile und nicht hinter das Wort. */
table:not(.raster):not(.kalender) td .art { display: block; font-size: 11.5px; color: var(--text-leise); }

/* ================================================================ Das Raster
 *
 * Eine Tabelle, die sich nicht wie eine anfuehlt: keine dicken Rahmen, keine
 * grauen Kaesten, sondern Zeilen mit Luft und einem Kopf, der beim Rollen
 * stehen bleibt. Sortieren, Spaltenbreite, Sichtbarkeit und Reihenfolge
 * uebernimmt `portal.js`; das Markup steht auch ohne JavaScript.
 */

.rasterrahmen {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.rasterrolle { overflow-x: auto; }

table.raster {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

table.raster thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0;
  background: var(--erhoben);
  border-bottom: 1px solid var(--linie-stark);
  text-align: left;
  font-size: 11.5px;
  font-weight: 640;
  color: var(--text-zart);
  white-space: nowrap;
  user-select: none;
}

table.raster thead th .kopfinhalt {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  height: 34px;
}

table.raster thead th a.sortieren {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

table.raster thead th a.sortieren:hover { color: var(--text); text-decoration: none; }
table.raster thead th .pfeil { opacity: 0; flex: 0 0 8px; transition: opacity var(--uebergang); }
table.raster thead th.sortiert { color: var(--akzent); }
table.raster thead th.sortiert .pfeil { opacity: 1; }

/* Der Griff zum Breitenziehen. Sichtbar erst beim Hinfassen. */
table.raster thead th .griff {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

table.raster thead th .griff::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  right: 3px;
  width: 1px;
  background: var(--linie-stark);
  opacity: 0;
  transition: opacity var(--uebergang);
}

table.raster thead th:hover .griff::after, table.raster thead th .griff:active::after { opacity: 1; }
table.raster thead th { position: sticky; }
table.raster thead th.zieht { background: var(--akzent-hell); }

table.raster tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}

table.raster tbody tr:last-child td { border-bottom: none; }
table.raster tbody tr { transition: background var(--uebergang); }
table.raster tbody tr:hover { background: rgba(0, 0, 0, 0.022); }
table.raster tbody tr.gewaehlt { background: var(--akzent-hell); }
table.raster tbody tr.offen { background: var(--akzent-hell); box-shadow: inset 3px 0 0 var(--akzent); }
table.raster tbody tr.ungelesen td { font-weight: 600; }
table.raster tbody tr.inaktiv { opacity: 0.5; }
table.raster tbody tr.anklickbar { cursor: pointer; }

table.raster td.zahl, table.raster th.zahl .kopfinhalt { justify-content: flex-end; }
table.raster td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.raster td.knapp { white-space: nowrap; }
table.raster td.haken, table.raster th.haken { width: 34px; padding-right: 0; }
table.raster td.aktionen { width: 1%; white-space: nowrap; text-align: right; }
table.raster td.aktionen .knopfreihe { justify-content: flex-end; gap: 2px; }

/* Die Aktionen einer Zeile erscheinen beim Hinfassen. Dauerhaft sichtbar
   waeren sie zwoelf Knoepfe pro Bildschirm - genau die Ueberladung, die weg
   soll. Auf Tastatur und Touch bleiben sie erreichbar. */
table.raster td.aktionen .knopfreihe { opacity: 0; transition: opacity var(--uebergang); }
table.raster tr:hover td.aktionen .knopfreihe,
table.raster td.aktionen:focus-within .knopfreihe { opacity: 1; }
@media (hover: none) { table.raster td.aktionen .knopfreihe { opacity: 1; } }

/* Lange Ausschreibungstitel auf zwei Zeilen begrenzen. Ohne das wird aus einer
   Zeile ein Absatz, und im Bild stehen sechs statt zwoelf Vorgaenge. */
table.raster td .haupttext {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 550;
}

table.raster td .nebentext { display: block; font-size: 11.5px; color: var(--text-leise); }
table.raster td select { margin-top: 0; min-width: 100%; font-size: 12.5px; padding: 4px 24px 4px 8px; min-height: 26px; }

/* Gruppenkopf. Steht in der Tabelle, weil eine Gruppe zu den Zeilen gehoert
   und nicht darueber schwebt. */
table.raster tr.gruppenkopf td {
  position: sticky;
  top: 34px;
  z-index: 4;
  padding: 6px 12px;
  background: var(--grund-tief);
  border-bottom: 1px solid var(--linie-stark);
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-zart);
  letter-spacing: 0.2px;
}

table.raster tr.gruppenkopf .anzahl { color: var(--text-leise); font-weight: 500; margin-left: 6px; }

/* Auswahl mehrerer Zeilen: die Leiste erscheint nur, wenn etwas gewaehlt ist. */
.auswahlleiste {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--akzent-hell);
  border-bottom: 1px solid var(--akzent-rand);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--akzent-tief);
}

.auswahlleiste.zeigt { display: flex; }
.auswahlleiste .rechts { margin-left: auto; display: flex; gap: 6px; }

/* Fuss des Rasters: Blaettern und Anzahl. */
.rasterfuss {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--linie);
  background: var(--erhoben);
  font-size: 12px;
  color: var(--text-leise);
}

.rasterfuss .blaettern { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rasterfuss .blaettern .knopf { height: 26px; padding: 0 9px; font-size: 12px; }
.rasterfuss .blaettern .knopf[aria-disabled=true] { opacity: 0.4; pointer-events: none; }

/* Das Menue zum Ein- und Ausblenden von Spalten. */
.spaltenmenue {
  position: absolute;
  z-index: 60;
  min-width: 208px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--karte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-weit);
}

.spaltenmenue .titel {
  padding: 4px 8px 6px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-leise);
}

.spaltenmenue label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  cursor: grab;
}

.spaltenmenue label:hover { background: var(--grund-tief); }
.spaltenmenue label.zieht { opacity: 0.4; }
.spaltenmenue label.ziel { box-shadow: inset 0 2px 0 var(--akzent); }
.spaltenmenue label .griff { margin-left: auto; color: var(--text-leise); cursor: grab; }
.spaltenmenue .fussknopf { width: 100%; margin-top: 4px; }

/* ------------------------------------------------------------ Kartenansicht
 *
 * Dieselben Daten, luftiger. Fuer Ansichten, in denen der einzelne Datensatz
 * mehr ist als eine Zeile - Kontakte, Termine, ausgewaehlte Ausschreibungen.
 */

.kartenfeld {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 12px;
}

.datenkarte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  color: inherit;
  text-decoration: none;
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}

a.datenkarte:hover, .datenkarte.anklickbar:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--schatten-hoch);
}

.datenkarte .kopf { display: flex; align-items: flex-start; gap: 10px; }
.datenkarte .kopf .rechts { margin-left: auto; flex: 0 0 auto; }
/* Die Marke rechts wird nicht umbrochen und nicht gestaucht - „Vergabestelle"
   an der Kartenkante abgeschnitten liest sich wie ein Fehler. Damit sie Platz
   bekommt, muss der Titel schrumpfen duerfen: ein Flex-Element tut das ohne
   `min-width: 0` nicht, es bleibt so breit wie sein laengstes Wort. */
.datenkarte .kopf .rechts .marke-rund { white-space: nowrap; }

.datenkarte .titel {
  min-width: 0;
  font-weight: 620;
  font-size: 13.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Ein Wort wie „Leistungsbeschreibung" passt in keine Kartenspalte. Ohne
     diese Zeile bricht es nicht um, sondern laeuft aus dem Kasten und wird
     mitten im Wort abgeschnitten - ohne Auslassungspunkte, weil die Kuerzung
     der Zeilenklammer senkrecht wirkt und nicht waagerecht. */
  overflow-wrap: anywhere;
}

.datenkarte .beischrift { font-size: 12px; color: var(--text-leise); }
.datenkarte .fusszeile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--linie);
  font-size: 11.5px;
  color: var(--text-leise);
}

/* `flex: 0 0 auto` ist hier kein Feinschliff: Flex-Elemente schrumpfen von
   sich aus unter ihren Inhalt, und weil `.marke-rund` nicht umbrechen darf,
   wird dann der rechte Rand samt Rundung abgeschnitten - „Interessant" stand
   in einer Karte ohne rechte Kante da. Die Fusszeile bricht um, es geht also
   nichts verloren, wenn ein Stueck seine volle Breite behaelt. */
.datenkarte .fusszeile .stueck { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* Der runde Anfangsbuchstabe - ersetzt ein Bild, das es nicht gibt. */
.kringel {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: linear-gradient(160deg, #93a7bd, #5f6f80);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.3px;
}

.kringel.klein { width: 26px; height: 26px; flex-basis: 26px; font-size: 11px; }
.kringel.gruen { background: linear-gradient(160deg, #4caf7d, #1c7a4a); }
.kringel.blau  { background: linear-gradient(160deg, #4e9de0, #0a5cb0); }
.kringel.lila  { background: linear-gradient(160deg, #8f83e0, #5b4bc4); }

/* ================================================================== Zeichen */

.marke-rund {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Nicht schrumpfen: die Marke bricht nicht um, ein gestauchter Kasten
     verliert deshalb seinen rechten Rand statt Text umzulegen. */
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: var(--radius-rund);
  background: var(--grund-tief);
  color: var(--text-zart);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.marke-rund.gruen { background: var(--gruen-hell); color: var(--gruen); }
.marke-rund.gelb  { background: var(--gelb-hell);  color: var(--gelb); }
.marke-rund.rot   { background: var(--rot-hell);   color: var(--rot); }
.marke-rund.blau  { background: var(--akzent-hell); color: var(--akzent-tief); }
.marke-rund.lila  { background: var(--lila-hell); color: var(--lila); }
/* „blass" und nicht „leer": `.leer` ist auch die Klasse fuer den leeren
   Zustand einer Liste (`padding: 10px 0; font-size: 13px`). Eine Marke mit
   beiden Klassen erbte dieses Innenmass und verlor damit ihr eigenes - das
   Wort beruehrte links und rechts den Rand, ohne dass an der Marke selbst
   etwas falsch war. Zwei Bedeutungen fuer einen Klassennamen raechen sich
   genau so. */
.marke-rund.blass { background: none; border: 1px solid var(--linie-stark); color: var(--text-leise); font-weight: 500; }

/* ------------------------------------------------------------------ Ampel */

.ampel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 6px;
  border-radius: var(--radius-rund);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ampel .licht { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.ampel.gruen { background: var(--gruen-hell); color: var(--gruen); }
.ampel.gruen .licht { background: #23a35f; box-shadow: 0 0 0 2px rgba(35, 163, 95, 0.18); }
.ampel.gelb  { background: var(--gelb-hell); color: var(--gelb); }
.ampel.gelb  .licht { background: #e0a52a; box-shadow: 0 0 0 2px rgba(224, 165, 42, 0.2); }
.ampel.rot   { background: var(--rot-hell); color: var(--rot); }
.ampel.rot   .licht { background: #d9453b; box-shadow: 0 0 0 2px rgba(217, 69, 59, 0.16); }
.ampel.keine { color: var(--text-leise); font-weight: 500; padding-left: 9px; }

.grosse-ampel { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.grosse-ampel .ampel { font-size: 17px; padding: 6px 15px 6px 11px; }
.grosse-ampel .ampel .licht { width: 11px; height: 11px; flex-basis: 11px; }
.grosse-ampel .wort { color: var(--text-leise); font-size: 13px; }

/* Ein Balken statt einer Zahl, wo die Zahl allein nichts sagt. */
.balken {
  position: relative;
  height: 5px;
  width: 100%;
  border-radius: var(--radius-rund);
  background: var(--grund-tief);
  overflow: hidden;
}

.balken span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--akzent); }
.balken.gruen span { background: #23a35f; }
.balken.gelb span  { background: #e0a52a; }
.balken.rot span   { background: #d9453b; }

/* Fristen. Farbe nur bei echter Dringlichkeit - wenn alles leuchtet,
   leuchtet nichts. */
.frist { white-space: nowrap; font-variant-numeric: tabular-nums; }
.frist.dringend   { color: var(--rot); font-weight: 650; }
.frist.bald       { color: var(--gelb); font-weight: 600; }
.frist.abgelaufen { color: var(--text-leise); text-decoration: line-through; }

.nichtbietbar {
  display: inline-block;
  margin-left: 7px;
  padding: 0 7px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-rund);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-leise);
  background: var(--erhoben);
  white-space: nowrap;
  vertical-align: 1px;
}

/* ================================================================= Meldungen */

.meldung {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  margin: 0 0 16px;
  border: 1px solid;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
}

.meldung .ikone { flex: 0 0 16px; margin-top: 1px; }
.meldung.gut      { background: var(--gruen-hell); border-color: var(--gruen-rand); color: var(--gruen); }
.meldung.schlecht { background: var(--rot-hell);   border-color: var(--rot-rand);   color: var(--rot); }

.hinweiskasten {
  padding: 12px 15px;
  margin-bottom: 16px;
  background: var(--gelb-hell);
  border: 1px solid var(--gelb-rand);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
}

.begruendung {
  padding: 11px 14px;
  margin: 10px 0;
  background: var(--akzent-hell);
  border-left: 3px solid var(--akzent);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: 13px;
  line-height: 1.55;
}

.hinweis { color: var(--text-leise); font-size: 12.5px; margin: 0 0 10px; line-height: 1.5; }
.quellenhinweis { color: var(--text-leise); font-size: 11.5px; margin: 8px 0 0; }
.fehler { color: var(--rot); }

/* Der leere Zustand. Eine Liste, die nichts enthaelt, soll sagen warum. */
.leerbild {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 24px;
  text-align: center;
  color: var(--text-leise);
}

.leerbild .ikone { opacity: 0.35; }
.leerbild .satz { font-size: 13px; max-width: 380px; line-height: 1.55; }
.leer { color: var(--text-leise); padding: 10px 0; font-size: 13px; }

/* ==================================================================== Listen */

dl.eckdaten { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 7px 14px; margin: 0; font-size: 13px; }
dl.eckdaten dt { color: var(--text-leise); font-size: 12.5px; }
dl.eckdaten dd { margin: 0; }

.fliesstext { white-space: pre-wrap; line-height: 1.6; font-size: 13.5px; }

ul.schlicht { list-style: none; padding: 0; margin: 0; }

ul.notizen { list-style: none; padding: 0; margin: 12px 0 0; }
ul.notizen li {
  padding: 11px 13px;
  margin-bottom: 8px;
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  font-size: 13px;
}

ul.notizen li.angeheftet { background: var(--gelb-hell); border-color: var(--gelb-rand); }
.notiz-fuss { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 11.5px; color: var(--text-leise); }

ul.verlauf { list-style: none; padding: 0; margin: 0; }
ul.verlauf li {
  position: relative;
  padding: 0 0 16px 18px;
  border-left: 1.5px solid var(--linie-stark);
  font-size: 13px;
}

ul.verlauf li::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--linie-stark);
}

ul.verlauf li.mail::before { background: var(--akzent); }
ul.verlauf li:last-child { border-left-color: transparent; padding-bottom: 0; }

.wann { color: var(--text-leise); font-size: 11.5px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.was { font-size: 10.5px; font-weight: 650; color: var(--text-leise); text-transform: uppercase; letter-spacing: 0.4px; margin-right: 8px; }
.wiedervorlage { font-size: 11.5px; color: var(--gelb); margin-top: 4px; font-weight: 600; }

ul.ereignisse, ul.termine, ul.kontaktliste, ul.dokumente { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
ul.ereignisse li, ul.termine li, ul.kontaktliste li, ul.dokumente li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px solid var(--linie);
}

ul.ereignisse li:last-child, ul.termine li:last-child,
ul.kontaktliste li:last-child, ul.dokumente li:last-child { border-bottom: none; }

.firma, .tel, .groesse, .art { color: var(--text-leise); font-size: 11.5px; }

/* ================================================================== Reiter */

nav.reiter {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--linie-stark);
}

nav.reiter a {
  padding: 8px 13px 9px;
  border-bottom: 2px solid transparent;
  color: var(--text-leise);
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
}

nav.reiter a:hover { color: var(--text); text-decoration: none; }
nav.reiter a.hier { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 650; }

details summary { cursor: pointer; color: var(--akzent); font-size: 12.5px; font-weight: 550; list-style-position: outside; }
details[open] summary { margin-bottom: 10px; }

/* =========================================================== Seitenpanel
 *
 * Punkt 4 der Erweiterung: eine Ausschreibung soll nicht zwingend eine neue
 * Seite oeffnen. Das Panel faehrt von rechts ein und laesst die Liste stehen -
 * man behaelt den Zusammenhang, in dem man geklickt hat.
 */

.abdunkelung {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 180ms ease;
}

.abdunkelung.offen { opacity: 1; }

.seitenpanel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: min(660px, 94vw);
  display: flex;
  flex-direction: column;
  background: var(--grund);
  border-left: 1px solid var(--linie-stark);
  box-shadow: var(--schatten-weit);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.seitenpanel.offen { transform: none; }

.seitenpanel .panelkopf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(251, 251, 253, 0.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie);
}

.seitenpanel .panelkopf h2 { font-size: 16px; margin: 0 0 2px; line-height: 1.3; }
.seitenpanel .panelkopf .beischrift { font-size: 12px; color: var(--text-leise); }
.seitenpanel .panelkopf .rechts { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }
.seitenpanel .panelrumpf { flex: 1; overflow-y: auto; padding: 16px 18px 40px; }
.seitenpanel .panelrumpf .karte:last-child { margin-bottom: 0; }
.seitenpanel .laedt { padding: 60px 0; text-align: center; color: var(--text-leise); font-size: 13px; }

/* ------------------------------------------------------------------ Dialog */

.dialograhmen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.24);
  opacity: 0;
  transition: opacity 160ms ease;
}

.dialograhmen.offen { opacity: 1; }

.dialog {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(88vh, 820px);
  background: var(--karte);
  border-radius: 14px;
  box-shadow: var(--schatten-weit);
  overflow: hidden;
  transform: scale(0.97) translateY(6px);
  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}

.dialograhmen.offen .dialog { transform: none; }

.dialog .dialogkopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linie);
  background: var(--erhoben);
}

.dialog .dialogkopf h2 { margin: 0; font-size: 14px; }
.dialog .dialogkopf .rechts { margin-left: auto; display: flex; gap: 6px; }
.dialog .dialogrumpf { flex: 1; overflow-y: auto; padding: 0; }
/* Nicht auf `.dialog` eingeschraenkt: dieselbe Fusszeile traegt auch die
   eigenstaendige Schreibseite, und dort stand sie vorher voellig ungestylt da
   - der Hinweis zur Anhanggroesse klemmte zwischen zwei Knoepfen, statt sich
   rechts abzusetzen. */
.dialogfuss {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--linie);
  background: var(--erhoben);
}

.dialogfuss .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ============================================================== E-Mail-Client
 *
 * Drei Spalten wie im Outlook Web Client: Ordner, Liste, Lesebereich. Der
 * Unterschied zu dort ist der Bezug zur Ausschreibung - er steht in der Liste
 * und im Lesebereich, weil er hier der Grund ist, warum die Nachricht zaehlt.
 */

.postrahmen {
  display: grid;
  grid-template-columns: 208px minmax(280px, 0.9fr) minmax(340px, 1.4fr);
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--linie);
}

.postordner {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 8px;
  background: var(--seitenleiste);
  border-right: 1px solid var(--linie);
  overflow-y: auto;
}

.postordner a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: var(--radius-klein);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.postordner a:hover { background: rgba(0, 0, 0, 0.045); text-decoration: none; }
.postordner a.hier { background: var(--akzent); color: #fff; font-weight: 600; }
.postordner a .ikone { flex: 0 0 16px; opacity: 0.65; }
.postordner a.hier .ikone { opacity: 1; }
.postordner a .zaehler {
  margin-left: auto;
  font-size: 11px;
  font-weight: 650;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.postordner a.hier .zaehler { color: rgba(255, 255, 255, 0.85); }
.postordner .gruppe {
  padding: 14px 10px 5px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* -------------------------------------------------------------- Nachrichten */

.postliste { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--linie); background: var(--karte); }

.postliste .listenkopf {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--linie);
  background: var(--erhoben);
}

.postliste .listenkopf .suchfeld input { height: 28px; min-height: 28px; }
.postliste .listenrolle { flex: 1; overflow-y: auto; min-height: 0; }

.postliste .stueck {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linie);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background var(--uebergang);
}

.postliste .stueck:hover { background: rgba(0, 0, 0, 0.025); text-decoration: none; }
.postliste .stueck.hier { background: var(--akzent-hell); box-shadow: inset 3px 0 0 var(--akzent); }
.postliste .stueck.gewaehlt { background: var(--akzent-hell); }
/* Die Spur ist ein <a> und damit von Haus aus inline. Ihre Kinder waren
   dadurch ebenfalls inline, und `text-overflow: ellipsis` greift an einem
   inline-Element nicht: Betreff und Anriss standen hintereinander in einer
   Zeile und liefen ueber die Spaltenkante hinaus, statt gekuerzt zu werden.
   Als Flex-Spalte werden die Kinder zu Bloecken, und die Kuerzung wirkt. */
.postliste .stueck .spur { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.postliste .stueck .zeile1 { display: flex; align-items: baseline; gap: 8px; }
.postliste .stueck .absender {
  font-size: 13px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postliste .stueck .zeit { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.postliste .stueck .betreff {
  font-size: 12.5px;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postliste .stueck .anriss {
  font-size: 11.5px;
  color: var(--text-leise);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postliste .stueck .zeichen { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.postliste .stueck.ungelesen .absender, .postliste .stueck.ungelesen .betreff { font-weight: 700; }
.postliste .stueck.ungelesen { box-shadow: inset 3px 0 0 var(--akzent); }
.postliste .stueck.ungelesen.hier { box-shadow: inset 3px 0 0 var(--akzent-tief); }
.postliste .stueck .haken { flex: 0 0 auto; padding-top: 2px; }
.postliste .stueck .stern { color: var(--text-leise); display: flex; }
.postliste .stueck .stern.an { color: #e0a52a; }

/* -------------------------------------------------------------- Lesebereich */

.postlesen { display: flex; flex-direction: column; min-width: 0; background: var(--grund); }
.postlesen .lesekopf {
  padding: 14px 18px 12px;
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
}

.postlesen .lesekopf h2 { font-size: 17px; margin: 0 0 8px; line-height: 1.35; }
.postlesen .absenderzeile { display: flex; align-items: center; gap: 10px; }
.postlesen .absenderzeile .wer { min-width: 0; }
.postlesen .absenderzeile .name { font-size: 13px; font-weight: 600; }
.postlesen .absenderzeile .adresse { font-size: 11.5px; color: var(--text-leise); }
.postlesen .absenderzeile .zeit { margin-left: auto; font-size: 11.5px; color: var(--text-leise); white-space: nowrap; }

.postlesen .lesewerkzeuge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 9px 18px;
  background: var(--erhoben);
  border-bottom: 1px solid var(--linie);
}

.postlesen .lesewerkzeuge .trenner { width: 1px; height: 18px; background: var(--linie-stark); margin: 0 3px; }
.postlesen .leserumpf { flex: 1; overflow-y: auto; padding: 18px; }

.mailkoerper {
  padding: 18px 20px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  font-size: 13.5px;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.mailkoerper img { max-width: 100%; height: auto; }
.mailkoerper blockquote {
  margin: 10px 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--linie-stark);
  color: var(--text-zart);
}

.mailkoerper table { border-collapse: collapse; max-width: 100%; }
.mailkoerper pre { white-space: pre-wrap; }

/* Ein Beitrag der Konversation, zugeklappt bis auf Kopf und Anriss. */
.faden { margin-bottom: 10px; }
.faden > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

.faden > summary .anriss { color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faden > summary .zeit { margin-left: auto; font-size: 11px; color: var(--text-leise); white-space: nowrap; }
.faden[open] > summary { border-radius: var(--radius-klein) var(--radius-klein) 0 0; border-bottom: none; }
.faden[open] .mailkoerper { border-radius: 0 0 var(--radius-klein) var(--radius-klein); }

.anhangreihe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.anhangstueck {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: var(--karte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  font-size: 12.5px;
  color: inherit;
  text-decoration: none;
}

.anhangstueck:hover { background: var(--erhoben); text-decoration: none; }
.anhangstueck .ikone { color: var(--text-leise); }
.anhangstueck .groesse { color: var(--text-leise); font-size: 11px; }

/* --------------------------------------------------------------- Schreiben */

.schreibfeld {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.schreibfeld .zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--linie);
  min-height: 38px;
}

.schreibfeld .zeile > label.marke {
  flex: 0 0 62px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
}

.schreibfeld .zeile input, .schreibfeld .zeile select {
  flex: 1;
  margin: 0;
  border: none;
  box-shadow: none;
  background: none;
  min-height: 36px;
  padding-left: 0;
}

.schreibfeld .zeile input:focus, .schreibfeld .zeile select:focus { box-shadow: none; }
.schreibfeld .zeile .rechts { margin-left: auto; display: flex; gap: 4px; }
.schreibfeld .zeile button.verweis { font-size: 12px; }

.werkzeugband {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--linie);
  background: var(--erhoben);
  flex-wrap: wrap;
}

.werkzeugband .trenner { width: 1px; height: 16px; background: var(--linie-stark); margin: 0 4px; }
.werkzeugband button { width: 28px; height: 26px; padding: 0; border-color: transparent; background: none; box-shadow: none; color: var(--text-zart); }
.werkzeugband button:hover { background: rgba(0, 0, 0, 0.06); }

.schreibflaeche {
  flex: 1;
  min-height: 240px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 16px;
  font-size: 13.5px;
  line-height: 1.62;
  outline: none;
}

.schreibflaeche:empty::before { content: attr(data-platzhalter); color: var(--text-leise); }
.schreibflaeche blockquote { margin: 10px 0; padding-left: 12px; border-left: 2px solid var(--linie-stark); color: var(--text-zart); }

/* ================================================================= Kalender */

table.kalender { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--karte); }
table.kalender th {
  padding: 8px 10px;
  background: var(--erhoben);
  border-bottom: 1px solid var(--linie-stark);
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  color: var(--text-leise);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

table.kalender td {
  height: 104px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  vertical-align: top;
}

table.kalender td:last-child { border-right: none; }
table.kalender tr:last-child td { border-bottom: none; }
table.kalender td.fremd { background: var(--erhoben); }
table.kalender td.fremd .tagzahl { color: var(--linie-stark); }
table.kalender td.heute { background: var(--akzent-hell); }

/* Die Tageszahl ist ein Verweis auf „neuer Termin an diesem Tag". Sie soll
   trotzdem wie eine Zahl aussehen und nicht wie ein Link - der Hinweis kommt
   erst beim Darüberfahren, sonst wäre das Blatt voller blauer Ziffern. */
a.tagzahl { display: block; text-decoration: none; }
a.tagzahl:hover { text-decoration: none; color: var(--akzent); }
.tagzahl { font-size: 11.5px; color: var(--text-leise); font-weight: 650; font-variant-numeric: tabular-nums; }
table.kalender td.heute .tagzahl {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
}

.termin {
  display: block;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--akzent-hell);
  color: var(--akzent-tief);
  font-size: 11px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.termin.frist, .termin.angebotsabgabe { background: var(--rot-hell); color: var(--rot); }
.termin.wiedervorlage { background: var(--gelb-hell); color: var(--gelb); }
.termin.erledigt { opacity: 0.45; text-decoration: line-through; }
.termin .uhr { font-variant-numeric: tabular-nums; opacity: 0.75; margin-right: 3px; }

/* ================================================================ Anmeldung */

.anmeldeseite {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  background: linear-gradient(170deg, #eef2f7, #e6ebf2 55%, #e2e8f0);
}

.anmeldung {
  width: min(380px, 100%);
  padding: 32px 30px 28px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(20, 40, 70, 0.12), 0 2px 6px rgba(20, 40, 70, 0.06);
}

.anmeldung .marke { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.anmeldung .marke .zeichen {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(160deg, #2b8ae0, var(--akzent-tief));
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(10, 92, 176, 0.3);
}

.anmeldung h1 { font-size: 19px; text-align: center; }
.anmeldung .unterzeile { text-align: center; color: var(--text-leise); font-size: 13px; margin: 4px 0 0; }
.anmeldung button { width: 100%; height: 34px; margin-top: 6px; }

/* Die kurze Einblendung fuer Dinge, die ohne Seitenwechsel passieren. */
.schwebemeldung {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 120;
  padding: 10px 18px;
  border-radius: var(--radius-rund);
  background: rgba(29, 29, 31, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13px;
  font-weight: 550;
  box-shadow: var(--schatten-weit);
  transform: translate(-50%, 14px);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}

.schwebemeldung.zeigt { opacity: 1; transform: translate(-50%, 0); }
.schwebemeldung.schlecht { background: rgba(179, 38, 30, 0.95); }

/* ================================================================== Fortsatz */

.trennlinie { height: 1px; background: var(--linie); margin: 18px 0; border: none; }

code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--grund-tief);
  font-family: var(--schrift-zahl);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.nurlesbar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ohne JavaScript bleiben Umschalter und Panel-Aufrufe verborgen, statt ins
   Leere zu fuehren. `portal.js` setzt die Klasse am <html>. */
html:not(.js) .nurmitjs { display: none !important; }

/* =============================================================== Bildschirme
 *
 * Reihenfolge nach Prioritaet: Schreibtisch, Laptop, Tablet, Telefon. Die
 * Desktopfassung darf deutlich mehr zeigen; nach unten hin werden aus
 * Rastern Karten.
 */

@media (max-width: 1240px) {
  .postrahmen { grid-template-columns: 186px minmax(250px, 0.9fr) minmax(300px, 1.3fr); }
}

/* Tablet: die Seitenleiste wird zur Symbolleiste. */
@media (max-width: 1080px) {
  :root { --leiste: 60px; }
  .leiste { padding: 12px 8px; align-items: center; }
  .leiste .marke { padding: 4px 0 14px; }
  .leiste .marke .wort, .leiste .gruppe, .leiste .punkt .wort,
  .leiste .wer .name, .leiste .wer .rolle { display: none; }
  .leiste a.punkt { justify-content: center; padding: 9px 0; position: relative; }
  .leiste .zaehler {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    padding: 0 3px;
    font-size: 9.5px;
    line-height: 15px;
  }
  .leiste .wer { justify-content: center; padding: 8px 0; }
  .akte { grid-template-columns: 1fr; }
  .postrahmen { grid-template-columns: 160px minmax(230px, 1fr) minmax(280px, 1.2fr); }
}

/* Der Lesebereich der Post braucht Breite. Darunter wird die Post zweispaltig
   und der Lesebereich uebernimmt beim Oeffnen die ganze Flaeche. */
@media (max-width: 900px) {
  .werkleiste, .blatt { padding-left: 16px; padding-right: 16px; }
  footer.fussnote { padding-left: 16px; padding-right: 16px; }
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .kachel .zahl { font-size: 23px; }

  .postrahmen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .postordner {
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid var(--linie);
  }
  .postordner .gruppe { display: none; }
  .postordner a { white-space: nowrap; }
  .postliste { border-right: none; }
  .postrahmen.liest .postliste { display: none; }
  .postrahmen:not(.liest) .postlesen { display: none; }

  .seitenpanel { width: 100%; }
  .dialog { max-height: 94vh; }
}

/* Telefon: aus jedem Raster werden Karten. Eine waagerecht rollende Tabelle
   ist auf einem Telefon keine Bedienung, sondern eine Zumutung. */
@media (max-width: 720px) {
  .rasterrahmen { border: none; background: none; box-shadow: none; overflow: visible; }
  .rasterrolle { overflow: visible; }
  table.raster, table.raster tbody, table.raster tr, table.raster td { display: block; width: 100%; }
  table.raster thead, table.raster tr.gruppenkopf td { display: none; }
  table.raster tbody tr {
    position: relative;
    margin-bottom: 10px;
    padding: 12px 14px;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
  }
  table.raster tbody td {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    align-items: baseline;
    padding: 3px 0;
    border: none;
    min-width: 0;
    text-align: left !important;
  }
  /* Ein langer Wert bricht um, statt die Karte breiter zu machen als das
     Telefon. Ohne das schiebt eine einzige Vergabestelle mit langem Namen
     die ganze Seite nach rechts, und alles andere wird mitgezogen. */
  table.raster tbody td > * { min-width: 0; overflow-wrap: anywhere; }
  /* Die Spaltenueberschrift wandert als Beschriftung in die Zeile. */
  table.raster tbody td::before {
    content: attr(data-marke);
    flex: 0 0 96px;
    font-size: 11px;
    font-weight: 650;
    color: var(--text-leise);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  table.raster tbody td.leerfeld { display: none; }
  table.raster tbody td.haken { position: absolute; top: 10px; right: 10px; padding: 0; }
  table.raster tbody td.haken::before { display: none; }
  table.raster td.aktionen .knopfreihe { opacity: 1; justify-content: flex-start; }
  .rasterfuss { border: 1px solid var(--linie); border-radius: var(--radius); }
  .kartenfeld { grid-template-columns: 1fr; }
  /* Untereinander statt nebeneinander: die Mindestbreite von 138px, die auf
     dem Schreibtisch fuer gleich breite Auswahlfelder sorgt, macht auf einem
     390px breiten Telefon aus zwei Feldern eine Zeile, die nicht mehr
     hineinpasst - und die Seite rollt waagerecht. */
  .filterzeile > * { flex: 1 1 100%; min-width: 0; }
  .filterzeile select, .filterzeile input { min-width: 0; width: 100%; }
  .filterzeile .suchfeld { max-width: none; }
  .filterzeile .rechts { width: 100%; }
  form.raster { grid-template-columns: 1fr; }
  .werkleiste { padding-top: 10px; padding-bottom: 10px; }
  h1 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .inhalt { scroll-behavior: auto; }
}

@media print {
  .leiste, .werkleiste .werkzeuge, .filterzeile, .rasterfuss, .auswahlleiste { display: none; }
  .rahmen { display: block; height: auto; }
  .inhalt { overflow: visible; }
  .karte, .rasterrahmen { box-shadow: none; break-inside: avoid; }
}