/* Customer Support – Gestaltung
   Palette aus secontec.de: Orange #ea5a06 als Akzent, Dunkelblau #112337,
   heller Hintergrund. Die Vorlage ist eine Werbeseite; hier arbeiten Leute
   acht Stunden am Tag damit. Deshalb bewusst ruhiger: Orange nur dort, wo es
   etwas bedeutet, viel Weissraum, klare Zeilen, grosse Klickflächen. */

:root {
  --akzent:        #ea5a06;
  --akzent-dunkel: #c94a02;
  --akzent-hell:   #fff2e8;
  --dunkel:        #112337;
  --dunkel-weich:  #1c3350;
  --grau-900: #1f2a37;
  --grau-700: #3f4a58;
  --grau-500: #686e77;
  --grau-300: #c9cfd6;
  --grau-100: #e9edf1;
  --grau-50:  #f5f6f8;
  --weiss:    #ffffff;
  --gruen:    #2e7d32;
  --rot:      #c62828;
  --gelb:     #a86400;

  --radius:      10px;
  --radius-gross: 14px;
  --schatten:    0 1px 2px rgba(17,35,55,.06), 0 2px 8px rgba(17,35,55,.06);
  --schatten-hoch: 0 4px 16px rgba(17,35,55,.12);
  --schrift: "Libre Franklin", "Franklin Gothic", "Helvetica Neue", Arial, sans-serif;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("/schrift/libre-franklin-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/schrift/libre-franklin-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/schrift/libre-franklin-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

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

body {
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  color: var(--grau-900);
  background: var(--grau-50);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- Kopfzeile */
.kopf {
  background: var(--dunkel);
  color: #dfe5ec;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--schatten);
}
.kopf-innen {
  max-width: 1760px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.4rem;
  padding: .7rem 1.2rem;
}
.marke {
  font-weight: 700; font-size: 1.14rem; letter-spacing: .01em;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.marke span {
  background: var(--akzent); color: #fff;
  padding: .12em .42em; border-radius: 6px; margin-left: .1em;
  font-size: .8em; vertical-align: .12em;
}
.kopf nav { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
.kopf nav a {
  color: #c3cdd9; text-decoration: none; padding: .5rem .85rem;
  border-radius: 8px; font-weight: 600; font-size: .95rem;
}
.kopf nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.kopf nav a.aktiv { background: var(--akzent); color: #fff; }
.kopf-rechts { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.kopf-rechts .wer { color: #9fb0c4; }

/* -------------------------------------------------------------------- Inhalt */
.huelle { max-width: 1760px; margin: 0 auto; padding: 1.4rem 1.6rem 3rem; }
.schmal { max-width: 820px; }

h1 { font-size: 1.6rem; font-weight: 700; color: var(--dunkel); letter-spacing: -.01em; }
h2 { font-size: 1.12rem; font-weight: 700; color: var(--dunkel); }
h3 { font-size: .98rem; font-weight: 600; color: var(--grau-700); }
.seitenkopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.unterzeile { color: var(--grau-500); font-size: .94rem; margin-top: .15rem; }

.karte {
  background: var(--weiss); border: 1px solid var(--grau-100);
  border-radius: var(--radius-gross); box-shadow: var(--schatten);
}
.karte + .karte { margin-top: 1rem; }
.karte-kopf {
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--grau-100);
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.karte-inhalt { padding: 1.1rem; }

/* -------------------------------------------------------------------- Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .62rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--akzent); color: #fff; white-space: nowrap;
}
.knopf:hover { background: var(--akzent-dunkel); color: #fff; }
.knopf:focus-visible { outline: 3px solid rgba(234,90,6,.4); outline-offset: 2px; }
.knopf.stumm { background: var(--weiss); color: var(--grau-900); border-color: var(--grau-300); }
.knopf.stumm:hover { background: var(--grau-50); color: var(--dunkel); }
.knopf.dunkel { background: var(--dunkel); }
.knopf.dunkel:hover { background: #1b3350; }
.knopf.klein { padding: .38rem .7rem; font-size: .88rem; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

/* -------------------------------------------------------------------- Felder */
.feld { margin-bottom: 1rem; }
.feld > label, .feldname {
  display: block; font-weight: 600; font-size: .9rem;
  color: var(--grau-700); margin-bottom: .3rem;
}
.feld .hinweis { font-size: .85rem; color: var(--grau-500); margin-top: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=week], input[type=search], select, textarea {
  width: 100%; padding: .6rem .75rem; font: inherit;
  border: 1px solid var(--grau-300); border-radius: var(--radius);
  background: var(--weiss); color: var(--grau-900);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(234,90,6,.18);
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.pflicht { color: var(--akzent); }
.feld-fehler { color: var(--rot); font-size: .87rem; margin-top: .25rem; }
input.fehler, select.fehler, textarea.fehler { border-color: var(--rot); }
.zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ------------------------------------------------------------- Live-Suche */
.feld-suche { position: relative; }
.autosuche-liste {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--weiss); border: 1px solid var(--grau-300); border-radius: var(--radius);
  box-shadow: var(--schatten); max-height: 15rem; overflow-y: auto;
}
.autosuche-eintrag {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: .5rem .75rem; cursor: pointer; font: inherit; color: var(--grau-900);
  border-bottom: 1px solid var(--grau-100);
}
.autosuche-eintrag:last-child { border-bottom: none; }
.autosuche-eintrag:hover, .autosuche-eintrag.aktiv { background: var(--akzent-hell); }
.autosuche-eintrag .zusatz { display: block; font-size: .82rem; color: var(--grau-500); }
@media (max-width: 640px) { .zeile { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- Tabelle */
.tabelle { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabelle th {
  text-align: left; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--grau-500); font-weight: 700;
  padding: .6rem .8rem; border-bottom: 1px solid var(--grau-100); white-space: nowrap;
}
.tabelle td { padding: .7rem .8rem; border-bottom: 1px solid var(--grau-100); vertical-align: middle; }
.tabelle tbody tr:hover { background: var(--grau-50); }
.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle a.nummer { font-weight: 700; color: var(--dunkel); text-decoration: none; font-variant-numeric: tabular-nums; }
.tabelle a.nummer:hover { color: var(--akzent); }
.leer { padding: 3rem 1rem; text-align: center; color: var(--grau-500); }

/* -------------------------------------------------------------------- Marken */
.marker {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .55rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.marker .punkt { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.marker.warnung { background: #fff8e6; color: var(--gelb); border-color: #f0dcae; }
.marker.gefahr  { background: #fdecec; color: var(--rot);  border-color: #f2c4c4; }
.marker.gut     { background: #eaf5eb; color: var(--gruen);border-color: #bfdcc1; }
.marker.grau    { background: var(--grau-50); color: var(--grau-500); border-color: var(--grau-100); }

/* --------------------------------------------------- Nur-Bearbeiter-Bereich */
.nur-bearbeiter {
  background: var(--akzent-hell); border: 1px solid #f0dcbd; border-radius: var(--radius);
  padding: 1rem 1rem .2rem; margin-bottom: 1rem;
}
.nur-bearbeiter .marker { margin-bottom: .8rem; background: #fff; color: var(--akzent-dunkel);
  border-color: #f0cf9e; }

/* ------------------------------------------------------------------ Meldungen */
.meldung {
  padding: .85rem 1.05rem; border-radius: var(--radius);
  margin-bottom: 1.1rem; border: 1px solid; font-size: .95rem;
}
.meldung.gut     { background: #eaf5eb; border-color: #bfdcc1; color: #1f5c22; }
.meldung.warnung { background: #fff8e6; border-color: #f0dcae; color: #7a4a00; }
.meldung.gefahr  { background: #fdecec; border-color: #f2c4c4; color: #8e1f1f; }
.meldung.info    { background: var(--akzent-hell); border-color: #f6cfae; color: #8a3803; }
/* Nur das ERSTE Fettgedruckte ist die Überschrift der Box. Vorher wurde
   jedes <b> zur eigenen Zeile - mitten im Satz ergab das zerrissene
   Absätze (sichtbar im Hinweis des Meldeformulars). */
.meldung b { display: inline; }
.meldung > b:first-child { display: block; margin-bottom: .15rem; }

/* --------------------------------------------------------------- Anmeldeseite */
.anmelden-huelle {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: linear-gradient(160deg, var(--dunkel) 0%, #0b1725 100%);
}
.anmelden-karte {
  width: 100%; max-width: 25rem; background: var(--weiss);
  border-radius: 16px; padding: 2rem; box-shadow: var(--schatten-hoch);
}
.anmelden-karte .marke { color: var(--dunkel); display: block; margin-bottom: .3rem; font-size: 1.5rem; }

/* ------------------------------------------------------------------- Sonstiges */
.werkzeugleiste { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.werkzeugleiste .feld { margin-bottom: 0; }
.werkzeugleiste input, .werkzeugleiste select { min-width: 11rem; }

/* Mehrfachauswahl als Aufklapper: sieht zu wie ein normales Auswahlfeld aus,
   klappt aber eine Checkbox-Liste auf - eine native Mehrfach-Listbox wäre
   dauerhaft gross und braucht das wenig bekannte Strg-Klicken. */
.mehrfachwahl { position: relative; min-width: 11rem; }
.mehrfachwahl > summary {
  list-style: none; cursor: pointer; padding: .6rem 2rem .6rem .75rem;
  border: 1px solid var(--grau-300); border-radius: var(--radius);
  background: var(--weiss); color: var(--grau-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem;
}
.mehrfachwahl > summary::-webkit-details-marker { display: none; }
.mehrfachwahl > summary::after {
  content: ""; position: absolute; right: .8rem; top: 50%;
  width: .5rem; height: .5rem; border: solid var(--grau-500);
  border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg);
}
.mehrfachwahl[open] > summary { border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(234,90,6,.18); }
.mehrfachwahl-liste {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%;
  background: var(--weiss); border: 1px solid var(--grau-300); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(17,35,55,.12); padding: .4rem; max-height: 16rem; overflow: auto;
}
.mehrfachwahl-liste label {
  display: flex; gap: .5rem; align-items: center; padding: .35rem .5rem;
  border-radius: 6px; cursor: pointer; white-space: nowrap; font-weight: 400;
}
.mehrfachwahl-liste label:hover { background: var(--grau-50); }
/* min-width:0 gegen die 11rem-Regel der Werkzeugleiste oben - die macht
   sonst jede Checkbox fusslang und schiebt den Text an den rechten Rand. */
.mehrfachwahl-liste input[type=checkbox] { width: auto; min-width: 0; margin: 0; flex: 0 0 auto; }

/* Aufklappmenü: ein Knopf, der eine kleine Liste von Aktionen öffnet -
   räumt Kopfzeilen auf, in denen sonst fünf Knöpfe nebeneinander stehen. */
.aufklappmenue { position: relative; }
.aufklappmenue > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border: 1px solid var(--grau-300); border-radius: var(--radius);
  background: var(--weiss); color: var(--grau-900); font-weight: 600; white-space: nowrap;
}
.aufklappmenue > summary::-webkit-details-marker { display: none; }
.aufklappmenue > summary::after {
  content: ""; width: .42rem; height: .42rem; border: solid var(--grau-500);
  border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px);
}
.aufklappmenue > summary:hover { background: var(--grau-50); }
.aufklappmenue[open] > summary { border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(234,90,6,.18); }
.aufklappmenue-liste {
  position: absolute; right: 0; z-index: 30; top: calc(100% + 4px); min-width: 15rem;
  background: var(--weiss); border: 1px solid var(--grau-300); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(17,35,55,.12); padding: .35rem;
  display: flex; flex-direction: column;
}
.aufklappmenue-liste a, .aufklappmenue-liste button {
  text-align: left; padding: .5rem .65rem; border-radius: 6px; color: var(--grau-900);
  text-decoration: none; font: inherit; background: none; border: 0;
  cursor: pointer; white-space: nowrap;
}
.aufklappmenue-liste a:hover, .aufklappmenue-liste button:hover { background: var(--grau-50); }

/* Druck bzw. "Als PDF speichern": nur der Inhalt, kein Bedienwerk. */
@media print {
  header.kopf, .testbalken, .werkzeugleiste, .aufklappmenue, .knopf,
  .seitenkopf form { display: none !important; }
}
.gitter-zwei { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .gitter-zwei { grid-template-columns: 1fr; } }
.paare { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .94rem; }
.paare dt { color: var(--grau-500); }
.paare dd { font-weight: 600; }
.fusszeile { color: var(--grau-500); font-size: .85rem; text-align: center; padding: 1.5rem 0; }
.nur-lesbar { color: var(--grau-500); font-style: italic; }

/* --------------------------------------------------------------- Dashboard */
.kacheln {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.kachel {
  background: var(--weiss); border: 1px solid var(--grau-100);
  border-radius: var(--radius-gross); padding: 1rem 1.1rem;
  box-shadow: var(--schatten); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .1rem;
}
.kachel:hover { border-color: var(--grau-300); box-shadow: var(--schatten-hoch); color: inherit; }
.kachel .zahl { font-size: 1.9rem; font-weight: 700; color: var(--dunkel); line-height: 1.1;
                font-variant-numeric: tabular-nums; }
.kachel .was  { font-size: .87rem; color: var(--grau-500); }
.kachel.akzent .zahl  { color: var(--akzent); }
.kachel.warnend { border-color: #f0dcae; background: #fffdf7; }
.kachel.warnend .zahl { color: var(--gelb); }

.balken { background: var(--grau-100); border-radius: 999px; height: .5rem; overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }

.saeulen { display: flex; align-items: flex-end; gap: .5rem; height: 165px; }
.saeule { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.saeule .stapel {
  width: 100%; background: var(--grau-300); border-radius: 5px 5px 0 0;
  display: flex; flex-direction: column-reverse; overflow: hidden;
}
.saeule .teil.kuendigung { background: var(--akzent); width: 100%; }
.saeule .beschriftung { font-size: .72rem; color: var(--grau-500); white-space: nowrap; }
.punkt-legende { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; vertical-align: -1px; }

/* ------------------------------------------------------------- Warnsignale */
.signalliste { display: grid; gap: .4rem; }
.signal {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .6rem .75rem; border: 1px solid var(--grau-100);
  border-radius: var(--radius); background: var(--weiss); cursor: pointer;
}
.signal:hover { border-color: var(--grau-300); background: var(--grau-50); }
.signal input { width: auto; margin-top: .28rem; flex: none; }
.signal b { font-weight: 600; }
.signal .erl { display: block; font-size: .86rem; color: var(--grau-500); }
.signal.stark { border-color: #f2c4c4; background: #fffafa; }
.signal .marker { margin-left: .4rem; vertical-align: 1px; }

/* ------------------------------------------------------------- Stammdaten */
.tabelle.stammdaten td { padding: .45rem .5rem; }
.tabelle.stammdaten input[type=text], .tabelle.stammdaten input[type=number],
.tabelle.stammdaten select { padding: .4rem .5rem; font-size: .92rem; }
.tabelle.stammdaten input[type=number] { width: 7rem; }
.tabelle.stammdaten tr.stillgelegt { opacity: .5; background: var(--grau-50); }
.farbwahl { width: 3rem; height: 2.2rem; padding: 2px; border: 1px solid var(--grau-300);
            border-radius: 8px; background: var(--weiss); }

/* --------------------------------------------------------- Vorlagen-Editor */
.vorlagen-gitter { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .vorlagen-gitter { grid-template-columns: 1fr; } }

.vorlagenliste { display: flex; flex-direction: column; }
.vorlage-eintrag {
  display: block; padding: .7rem 1.1rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--grau-100); border-left: 3px solid transparent;
}
.vorlage-eintrag:last-child { border-bottom: none; }
.vorlage-eintrag:hover { background: var(--grau-50); color: inherit; }
.vorlage-eintrag.aktiv { background: var(--akzent-hell); border-left-color: var(--akzent); }
.vorlage-eintrag .bez { display: block; font-weight: 600; }
.vorlage-eintrag .kennung {
  display: block; font-size: .8rem; color: var(--grau-500);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

textarea.mailtext {
  min-height: 26rem; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .92rem; line-height: 1.65; tab-size: 2;
}

.platzhalter-leiste { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.platzhalter-leiste .titel { font-size: .86rem; color: var(--grau-500); margin-right: .2rem; }
button.platzhalter {
  font: inherit; font-size: .8rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  padding: .2rem .5rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--grau-300); background: var(--weiss); color: var(--grau-700);
}
button.platzhalter:hover { border-color: var(--akzent); color: var(--akzent-dunkel); background: var(--akzent-hell); }

.mailvorschau { border: 1px solid var(--grau-300); border-radius: var(--radius); overflow: hidden; }
.mailvorschau .kopfzeilen {
  background: var(--grau-50); padding: .7rem .9rem; font-size: .9rem;
  border-bottom: 1px solid var(--grau-100); display: grid; gap: .18rem;
}
.mailvorschau .kopfzeilen span {
  display: inline-block; width: 4.2rem; color: var(--grau-500); font-size: .82rem;
}
.mailvorschau pre {
  margin: 0; padding: 1.1rem; white-space: pre-wrap; word-break: break-word;
  font-family: var(--schrift); font-size: .95rem; line-height: 1.6; background: var(--weiss);
}

/* ------------------------------------------------------------ Stift-Symbol */
button.stift {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; flex: none;
  border: 1px solid var(--grau-300); border-radius: 8px;
  background: var(--weiss); color: var(--grau-500); cursor: pointer;
}
button.stift:hover { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-hell); }
button.stift:focus-visible { outline: 3px solid rgba(234,90,6,.4); outline-offset: 2px; }
button.stift svg { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------- Anhänge */
.anhangleiste { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.anhang {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; border: 1px solid var(--grau-300); border-radius: 8px;
  background: var(--weiss); color: var(--grau-700); text-decoration: none; font-size: .87rem;
}
.anhang:hover { border-color: var(--akzent); color: var(--akzent-dunkel); background: var(--akzent-hell); }
.anhang svg { width: .95rem; height: .95rem; flex: none; }
.anhang .groesse { color: var(--grau-500); font-size: .8rem; }
input[type=file] {
  width: 100%; padding: .5rem; font: inherit; font-size: .92rem;
  border: 1px dashed var(--grau-300); border-radius: var(--radius); background: var(--grau-50);
}

/* ------------------------------------------------------- Vertretungsbalken */
.vertretungsbalken {
  background: var(--gelb); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .55rem 1.2rem; font-size: .92rem; font-weight: 600;
  position: sticky; top: 0; z-index: 60;
}
.vertretungsbalken b { color: #fff; }
.vertretungsbalken .knopf { background: #6b4100; }
.vertretungsbalken .knopf:hover { background: #573400; }

/* --------------------------------------------------------- Blätterleiste */
.blaettern {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .2rem 0;
}
.blaettern .stand { color: var(--grau-700); font-size: .92rem; }
.blaettern .stand .von { color: var(--grau-500); }
.blaettern [aria-disabled=true] { opacity: .45; cursor: default; }
/* Sicherheitsnetz: Sollte doch einmal eine fremde Ansicht mit Bildern
   auftauchen, bleiben deren Symbole klein statt bildschirmfüllend. */
.blaettern svg, nav[role=navigation] svg { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------- Testmodus */
/* Hinweisstreifen im Kopf. Schmal und ruhig: Er soll die ganze Erprobung
   über dastehen, ohne dass man ihn nach zwei Tagen übersieht – und ohne
   dass er jedes Mal Platz vom Arbeitsbereich nimmt. */
.testbalken {
  background: #7a4a00; color: #fff;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .28rem 1.2rem; font-size: .82rem; line-height: 1.35;
  text-align: center;
}
.testbalken b { color: #ffd9a3; font-weight: 600; }

/* Betroffene Standorte am Vorgang */
.standortzeile{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;
  padding:.6rem 0;border-bottom:1px solid var(--grau-100)}
.standortzeile:last-child{border-bottom:0}
.standortzeile .marker{margin-left:.4rem}

/* Anhänge, die noch durch die Virenprüfung müssen bzw. beanstandet wurden */
.anhang.wartet{opacity:.65;border-style:dashed}
.anhang.beanstandet{color:var(--rot);border-color:#f2c4c4;background:#fdecec;
  text-decoration:line-through;cursor:not-allowed}
.anhang.beanstandet .groesse{text-decoration:none;font-weight:600}

/* Diagramme */
.diagrammfeld{padding:.8rem 1rem 1rem}
.diagramm{width:100%;height:auto;display:block}
/* Quadratische Ringdiagramme: In einer breiten Kachel würde die Höhe sonst
   mitwachsen, bis die Kachel den Rollbalken braucht - deshalb gedeckelt und
   zentriert statt auf volle Kachelbreite gestreckt. */
.diagramm-rund{max-width:380px;margin:0 auto}
.diagramm rect[fill]:not([fill="#ffffff"]),.diagramm path[fill]:not([fill="none"]){
  transition:opacity .12s}
.diagramm rect[fill]:not([fill="#ffffff"]):hover,
.diagramm path[fill]:not([fill="none"]):hover{opacity:.8;cursor:default}
@media print{.diagramm{page-break-inside:avoid}}

/* -------------------------------------------------- Arbeitsfläche
   Zwölferraster: teilt sich durch 2, 3, 4 und 6 – damit lassen sich
   Halbe, Drittel und Viertel nebeneinanderlegen, ohne dass Lücken
   bleiben. Auf schmalen Geräten wird jede Kachel voll breit; eine
   Drittelbreite auf dem Telefon liest niemand. */
/* stretch statt start: Kacheln nebeneinander in derselben Zeile gleichen
   sich auf die Höhe der höchsten an, statt unten unterschiedlich hoch
   auszufransen - wichtig, sobald eine Kachel z. B. wegen einer Legende
   mehr Platz braucht als ihre Nachbarin. Wer eine Höhe von Hand zieht,
   bekommt trotzdem genau die (siehe .hoehe-fest), das hier greift nur,
   wo "automatisch" gilt. */
.flaeche{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;align-items:stretch}
.kachelfeld{grid-column:span var(--breite,6);margin:0;min-width:0;display:flex;
  flex-direction:column;position:relative}
.kachelfeld .kachelinhalt{flex:1;min-height:0;overflow:auto}
.kachelfeld.hoehe-fest .kachelinhalt{max-height:var(--hoehe)}
@media (max-width:900px){.kachelfeld{grid-column:span 12}}

/* Anordnen: alles mit der Maus. Die Kachel selbst ist der Griff, die Ecke
   unten rechts ändert Breite und Höhe. Während des Ziehens ist die gezogene
   Kachel für Maustreffer durchlässig – sonst fände die Trefferprüfung
   immer nur sie selbst und nie die Kachel darunter. */
.flaeche.anordnend .kachelfeld{outline:1px dashed var(--grau-300);cursor:grab;user-select:none}
.flaeche.anordnend .kachelfeld:hover{outline-color:var(--akzent)}
.flaeche.anordnend .kachelfeld.zieht{opacity:.45;cursor:grabbing;pointer-events:none;
  outline:2px solid var(--akzent);box-shadow:var(--schatten-hoch)}
.flaeche.anordnend .kachelfeld.veraendert{outline:2px solid var(--akzent)}
.flaeche.anordnend .kachelfeld.neu{outline:2px dashed var(--akzent);background:var(--akzent-hell)}
.flaeche.anordnend .kachelinhalt{pointer-events:none}
body.schiebt{cursor:grabbing}

.anfasser,.anfasserzeichen{width:1rem;height:1rem;display:inline-block;
  background:linear-gradient(135deg,transparent 0 45%,var(--grau-300) 45% 55%,transparent 55% 70%,
    var(--grau-300) 70% 80%,transparent 80%);border-bottom-right-radius:var(--radius)}
.anfasser{position:absolute;right:3px;bottom:3px;cursor:nwse-resize;touch-action:none;z-index:2}
.anfasser:hover{background:linear-gradient(135deg,transparent 0 45%,var(--akzent) 45% 55%,
  transparent 55% 70%,var(--akzent) 70% 80%,transparent 80%)}
.anfasserzeichen{vertical-align:-.2em}

.groessenanzeige{position:absolute;right:.6rem;bottom:1.4rem;background:var(--dunkel);
  color:#fff;font-size:.78rem;padding:.15rem .45rem;border-radius:var(--radius);
  white-space:nowrap;pointer-events:none;z-index:3}

.kachelwerkzeug{display:flex;gap:.3rem;align-items:center;margin-left:auto}
.kachelwerkzeug .knopf{padding:.2rem .45rem;line-height:1.1}
.kachelvorrat{display:flex;flex-wrap:wrap;gap:.4rem}
@media print{.flaeche{gap:.6rem}.kachelfeld .kachelinhalt{max-height:none;overflow:visible}}

/* Ungelesene Vorgänge im Seitenkopf. Rot und rund, damit man sie im
   Vorbeigehen sieht – aber klein, damit sie die Navigation nicht sprengt. */
.neuzahl{display:inline-block;min-width:1.15rem;padding:0 .3rem;margin-left:.15rem;
  background:var(--rot);color:#fff;border-radius:999px;font-size:.72rem;font-weight:700;
  line-height:1.2rem;text-align:center;vertical-align:.08em}
.vorgangszeile.ungelesen td:first-child{box-shadow:inset 4px 0 0 var(--akzent)}
.vorgangszeile.ungelesen.neuigkeit td:first-child{box-shadow:inset 4px 0 0 #2563eb}
.neuigkeit-hinweis{display:block;margin-top:.2rem;font-size:.74rem;font-weight:600;color:#2563eb;line-height:1.2}
.legende{display:inline-flex;align-items:center;gap:.35rem;margin-left:.6rem}
.legende::before{content:"";width:4px;height:1em;border-radius:2px;background:var(--akzent)}
.legende.neuigkeit::before{background:#2563eb}
.vorgangszeile.ungelesen .nummer{font-weight:700}
.neupunkt{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;
  background:var(--rot);margin-left:.35rem;vertical-align:.35em}

/* ------------------------------------------------------- Vorgangsverlauf
   Jede Nachricht ist ein eigener Block mit farbigem Rand links. Die Farbe
   sagt die Richtung: eingehend grün, an den Kunden orange, interne Notiz
   grau gestrichelt, zurückgehalten rot. Ausgehendes ist eingerückt – so
   sieht man am Umriss, wer gesprochen hat, ohne zu lesen. */
.nachricht{position:relative;margin:0 0 .9rem;padding:.75rem .9rem;border-radius:var(--radius);
  border:1px solid var(--grau-100);background:var(--weiss);border-left:4px solid var(--grau-300)}
.nachricht header{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-bottom:.4rem;flex-wrap:wrap}
.nachricht header time{color:var(--grau-500);font-size:.85rem;white-space:nowrap}
.nachricht .empfaenger{color:var(--grau-500);font-size:.83rem;margin-left:.4rem}
.nachricht .betreffzeile{color:var(--grau-700);font-size:.92rem;font-weight:600;
  margin-bottom:.35rem;padding-bottom:.35rem;border-bottom:1px dashed var(--grau-100)}
.nachricht .nachrichtentext{white-space:pre-wrap;overflow-wrap:anywhere}
/* Links und eingefügte Bilder an ihrer Stelle in der Mail */
.nachrichtentext a.maillink{color:var(--akzent);text-decoration:underline;text-underline-offset:2px}
.nachrichtentext .mailbild{display:inline-flex;flex-direction:column;gap:.15rem;margin:.25rem 0;
  vertical-align:top;max-width:100%;text-decoration:none;color:inherit}
.nachrichtentext a.mailbild img{display:block;max-width:min(100%,420px);max-height:260px;width:auto;height:auto;
  border:1px solid var(--grau-100);border-radius:6px;background:#fff;cursor:zoom-in}
.nachrichtentext a.mailbild:focus-visible img{outline:2px solid var(--akzent);outline-offset:2px}
.nachrichtentext .mailbild-name{font-size:.75rem;color:var(--grau-500)}
.nachrichtentext .mailbild.wartet .mailbild-name::after{content:" · wird geprüft"}
.nachrichtentext .mailbild.beanstandet .mailbild-name::after{content:" · bei der Virenprüfung beanstandet"}

.nachricht.eingehend{border-left-color:var(--gruen);background:#fbfdfb}
.nachricht.ausgehend{border-left-color:var(--akzent);background:var(--akzent-hell);
  margin-left:2rem}
.nachricht.gehalten{border-left-color:var(--rot);background:#fdf7f7;margin-left:2rem}
.nachricht.intern{border-left-color:var(--grau-300);border-left-style:dashed;
  background:var(--grau-50)}
.marker.akzent{background:var(--akzent-hell);color:var(--akzent-dunkel);border-color:#f6cfae}
@media (max-width:700px){.nachricht.ausgehend,.nachricht.gehalten{margin-left:0}}

/* Datumstrenner: eine Linie mit dem Tag in der Mitte */
.tagestrenner{display:flex;align-items:center;gap:.7rem;margin:1.1rem 0 .8rem;
  color:var(--grau-500);font-size:.82rem}
.tagestrenner::before,.tagestrenner::after{content:"";flex:1;height:1px;background:var(--grau-100)}
.tagestrenner span{white-space:nowrap}
.nachricht:first-child{margin-top:0}

/* Löschanträge */
.antrag{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.8rem 0;border-bottom:1px solid var(--grau-100)}
.antrag:last-child{border-bottom:0}

/* Zweiter Faktor */
.einrichtung{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:flex-start}
.qrfeld{flex:none;background:#fff;padding:.5rem;border:1px solid var(--grau-100);
  border-radius:var(--radius)}
.qrfeld svg{display:block;width:14rem;height:14rem}
.geheimnis{display:inline-block;font-size:1.05rem;letter-spacing:.06em;background:var(--grau-50);
  padding:.35rem .6rem;border-radius:var(--radius);border:1px solid var(--grau-100);user-select:all}
.codeliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.4rem;margin-top:.7rem}
.codeliste code{background:#fff;border:1px solid var(--grau-300);border-radius:var(--radius);
  padding:.4rem .5rem;text-align:center;font-size:1rem;letter-spacing:.04em;user-select:all}
/* Vollsperre: deutlicher als der gelbe Testbalken */
/* Vollsperre in der Hausfarbe: auffällig genug, um präsent zu bleiben,
   aber nicht die Alarmfarbe – es ist kein Fehler, sondern ein Zustand. */
.testbalken.hart{background:var(--akzent-dunkel);color:#fff}
.testbalken.hart b{color:#fff}

/* Ansprechpartner eines Vorgangs */
.kontaktzeile{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;
  padding:.55rem 0;border-bottom:1px solid var(--grau-100)}
.kontaktzeile:last-child{border-bottom:0}
.kontaktzeile.haupt{border-bottom:2px solid var(--grau-100)}
.kontaktzeile .marker{margin-left:.35rem}
.vorschlagsliste{display:flex;flex-wrap:wrap;gap:.35rem}

/* Empfängerauswahl beim Antworten */
.empfaengerliste{display:flex;flex-direction:column;gap:.3rem}
.empfaenger{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem .6rem;
  border:1px solid var(--grau-100);border-radius:var(--radius);background:#fff}
.empfaenger input{width:auto;margin-top:.25rem}
.empfaenger.fest{background:var(--grau-50)}
.empfaenger.gesperrt{opacity:.6}

/* Sichtbarkeit einer Nachricht im Kundenportal */
.sichtbarkeit{margin-top:.6rem;border-top:1px dashed var(--grau-100);padding-top:.5rem}
.sichtbarkeit > summary{display:flex;align-items:center;gap:.4rem;cursor:pointer;
  list-style:none;font-size:.83rem;color:var(--grau-500)}
.sichtbarkeit > summary::-webkit-details-marker{display:none}
.sichtbarkeit > summary:hover{color:var(--akzent-dunkel)}
.sichtbarkeit > summary svg{width:.95rem;height:.95rem;flex:none}
.sichtbarkeitsform{margin-top:.5rem;padding:.7rem;background:var(--grau-50);
  border-radius:var(--radius);display:flex;flex-direction:column;gap:.35rem}
.sichtbarkeitsform label{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem}
.sichtbarkeitsform label input{width:auto;margin-top:.25rem}
.sichtbarkeitsform i{color:var(--grau-500);font-style:normal;font-size:.82rem}
.sichtbarkeitsform .knopf{align-self:flex-start;margin-top:.3rem}

/* Bereichs-Reiter: Beschwerden und Kündigungen getrennt betrachten -
   auf der Vorgangsliste und der Auswertungsseite dasselbe Muster. */
.bereichsreiter { display: flex; gap: .4rem; margin: 0 0 1.1rem; border-bottom: 2px solid var(--grau-100); flex-wrap: wrap; }
.bereichsreiter a { padding: .55rem .9rem; text-decoration: none; color: var(--grau-500);
  font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.bereichsreiter a:hover { color: var(--dunkel); }
.bereichsreiter a.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }
.bereichsreiter .zaehler { font-weight: 400; font-size: .88rem; color: var(--grau-500); margin-left: .3rem; }

/* Der Filter der Vorgangsliste: Der Knopf SELBST wird zum Feld. Beim
   Öffnen zieht sich der weisse Kasten erst nach rechts auf und fährt
   dann herunter - der Rahmen gehört dem <details>, nicht dem summary,
   deshalb wirkt es wie ein Knopf, der sich in das Feld verwandelt.
   Flach und im Seitenfluss, kein schwebendes Fenster. */
.filterklappe { display: inline-block; vertical-align: top; margin-bottom: 1rem;
  background: #fff; border: 1px solid var(--grau-100); border-radius: var(--radius); }
.filterklappe > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: .45rem; padding: .5rem .95rem; font-weight: 600; color: var(--grau-500); user-select: none; }
.filterklappe > summary::-webkit-details-marker { display: none; }
.filterklappe > summary::before { content: '▸'; font-size: .8em; }
.filterklappe[open] > summary::before { content: '▾'; }
.filterklappe > summary:hover { color: var(--dunkel); }
.filterklappe > summary .zaehler { font-weight: 400; font-size: .86rem; color: var(--akzent); }
.filterklappe[open] { display: block; animation: filtermorph .4s ease-out; }
/* Beschnitten wird NUR während der Aufzieh-Animation (Klasse setzt ein
   kleines Skript) - dauerhaftes overflow:hidden würde die aufgeklappten
   Status-/Zuständigkeits-Listen abschneiden, die über das Feld hinausragen. */
.filterklappe[open].morpht { overflow: hidden; }
/* Erst breit (0-50 %), dann hoch (50-100 %). max-Werte statt fester
   Masse, damit am Ende die natürliche Größe gilt und nichts springt. */
@keyframes filtermorph {
  0%   { max-width: 9rem;  max-height: 2.5rem; }
  50%  { max-width: 200rem; max-height: 2.5rem; }
  100% { max-width: 200rem; max-height: 12rem; }
}
/* Kompakt: eine dichte Zeile, die Knöpfe reihen sich hinten ein. */
.filterklappe > .werkzeugleiste { margin: 0; padding: .15rem .95rem .8rem; gap: .7rem; }
.filterklappe .filterknoepfe { display: flex; gap: .5rem; margin-left: auto; }

/* Immer sichtbare Suchzeile über der Vorgangsliste: EINE Zeile, der
   Knopf sitzt am Ende des Feldes und rutscht nicht darunter. */
.suchzeile { align-items: center; flex-wrap: nowrap; }
.suchzeile input[type=search] { flex: 1 1 auto; min-width: 120px; }
.suchzeile .knopf { white-space: nowrap; flex: 0 0 auto; }

/* Aufklapper für die schwachen Warnsignale - die vier starken stehen
   immer sichtbar, der Rest kommt auf Klick. */
.signalklappe { margin-top: .5rem; }
.signalklappe > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: .4rem; padding: .45rem .8rem; background: #fff; border: 1px solid var(--grau-100);
  border-radius: var(--radius); font-weight: 600; font-size: .92rem; color: var(--grau-500); user-select: none; }
.signalklappe > summary::-webkit-details-marker { display: none; }
.signalklappe > summary::before { content: '▸'; font-size: .8em; }
.signalklappe[open] > summary::before { content: '▾'; }
.signalklappe > summary:hover { color: var(--dunkel); }

/* ------------------------------------------------------ Kopfzeile am Handy */
.kopf nav .nur-schmal { display: none; }
.navknopf { display: none; }
@media (max-width: 880px) {
  .kopf-innen { flex-wrap: wrap; gap: .6rem; padding: .55rem .9rem; }
  .kopf-rechts { margin-left: auto; }
  /* Der Name steht am Handy im Klappmenü ("Mein Konto"), nicht im Kopf -
     dort ist kein Platz, und abgeschnitten wirkte er kaputt. */
  .kopf-rechts .wer { display: none; }
  .navknopf { display: block; font-size: 1.45rem; line-height: 1;
    padding: .25rem .5rem; cursor: pointer; color: #dfe5ec;
    border: 1px solid rgba(255,255,255,.25); border-radius: 8px; user-select: none; }
  #navschalter:checked ~ .kopf-rechts .navknopf,
  .kopf-innen:has(#navschalter:checked) .navknopf { background: var(--akzent); border-color: var(--akzent); }
  .kopf nav { display: none; flex-basis: 100%; flex-direction: column;
    gap: .1rem; padding: .2rem 0 .55rem; }
  #navschalter:checked ~ nav { display: flex; }
  .kopf nav a { padding: .6rem .7rem; }
  .kopf nav .nur-schmal { display: block; border-top: 1px solid rgba(255,255,255,.15);
    margin-top: .3rem; padding-top: .75rem; }
  /* Abmelden nur im Menü, nicht neben dem Menüknopf */
  .kopf-rechts .abmelden-kopf { display: none; }
  /* Menüknopf bleibt beim Aufklappen oben rechts, die Liste kommt darunter */
  .kopf nav { order: 2; }
  .navknopf { font-size: 1rem; font-weight: 600; padding: .4rem .7rem; }
  .kopf nav .nav-abmelden { border-top: 0; margin-top: 0; padding-top: 0; }
  .kopf nav .nav-abmelden button { display: block; width: 100%; text-align: left; font: inherit;
    padding: .6rem .7rem; background: none; border: 0; border-radius: 8px; color: #c3cdd9; cursor: pointer;
    font-weight: 600; font-size: .95rem; }
  .kopf nav .nav-abmelden button:hover { background: rgba(255,255,255,.09); color: #fff; }
}

/* Farbleitsystem im Verlauf: Blau = Einreicher, Grün = Kunde, Grau = intern. */
.marker.blau { background: #eef3fc; color: #2456c4; border-color: #c4d3f2; }
.nachricht.einreicher { border-left-color: #2456c4; background: #f7fafd; }
/* Mails unter Kollegen (intern, aber Mail - keine Notiz): eigenes Violett */
.nachricht.internmail, .nachricht.kollege { border-left-color: #7c5cbf; border-left-style: solid; background: #f9f7fd; }

/* Selten gebrauchte Karten (Dublette, Kein Vorgang, Löschung) als Aufklapper -
   der Titel bleibt stehen, der Inhalt kommt erst auf Klick. */
.karten-klappe > summary { list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; }
.karten-klappe > summary::-webkit-details-marker { display: none; }
.karten-klappe > summary::after { content: '▸'; color: var(--grau-300);
  font-size: .95rem; padding-right: 1rem; }
.karten-klappe[open] > summary::after { content: '▾'; }
.karten-klappe > summary:hover h2 { color: var(--akzent-dunkel); }
.karten-klappe:not([open]) > summary.karte-kopf { border-bottom: none; }

/* Angedocktes Antwortformular: heftet unten an, der Verlauf darüber
   scrollt frei - wie die Antwortzeile eines Mailprogramms. */
#antwortKarte.angedockt, #notizKarte.angedockt { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: min(880px, calc(100vw - 2rem)); margin: 0; z-index: 60;
  border-radius: 12px 12px 0 0; box-shadow: 0 -12px 36px rgba(31, 42, 55, .28);
  max-height: 62vh; display: flex; flex-direction: column; }
#antwortKarte.angedockt .karte-kopf, #notizKarte.angedockt .karte-kopf { border-radius: 12px 12px 0 0; }
#antwortKarte.angedockt .karte-inhalt, #notizKarte.angedockt .karte-inhalt { overflow-y: auto; }
/* Kompakter im angedockten Zustand: Erklärtexte weg, Textfeld flacher -
   die Leiste soll den Verlauf nicht erschlagen. Größerziehen geht am
   Textfeld selbst (wächst nach oben, weil unten verankert). */
#antwortKarte.angedockt .hinweis, #notizKarte.angedockt .hinweis { display: none; }
#antwortKarte.angedockt #antwortText, #notizKarte.angedockt #notizText { min-height: 7rem !important; }
@media (max-width: 700px) {
  #antwortKarte.angedockt, #notizKarte.angedockt { left: 0; transform: none; width: 100vw; max-height: 70vh; }
}

/* Foto-Betrachter für Bild-Anhänge. Wichtig: display:flex NUR wenn nicht
   hidden - eine blosse display-Regel überstimmt sonst das hidden-Attribut
   und der unsichtbare Schleier blockiert die ganze Seite. */
#fotoviewer:not([hidden]) { position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; }
#fotoviewer[hidden] { display: none !important; }
#fotoviewer .fv-hinter { position: absolute; inset: 0; background: rgba(15, 23, 33, .78); }
#fotoviewer figure { position: relative; margin: 0; max-width: 80vw; max-height: 80vh;
  display: flex; flex-direction: column; gap: .6rem; }
#fotoviewer img { max-width: 80vw; max-height: calc(80vh - 3.2rem); object-fit: contain;
  border-radius: 10px; background: #fff; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
#fotoviewer figcaption { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; color: #e8edf3; font-size: .92rem; }
#fotoviewer .fv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#antwortKarte.angedockt .karte-kopf, #notizKarte.angedockt .karte-kopf { cursor: grab; }
#antwortKarte.angedockt .karte-kopf:active, #notizKarte.angedockt .karte-kopf:active { cursor: grabbing; }
#fotoviewer .fv-pdf:not([hidden]) { width: 80vw; height: calc(80vh - 3.2rem);
  border: 0; border-radius: 10px; background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
#fotoviewer img[hidden] { display: none; }

/* Sprung "Zum letzten Beitrag": sanft scrollen und nicht unter der
   klebenden Kopfzeile landen. */
html { scroll-behavior: smooth; }
#letzter-beitrag { scroll-margin-top: 5.5rem; }

/* Greifkanten der angedockten Antwortleiste - Breite ziehen. */
.dockgriff { display: none; }
#antwortKarte.angedockt, #notizKarte.angedockt { position: fixed; } /* Bezugsrahmen für die Griffe */
#antwortKarte.angedockt .dockgriff, #notizKarte.angedockt .dockgriff { display: block; position: absolute; top: 0;
  bottom: 0; width: 8px; cursor: ew-resize; z-index: 2; touch-action: none; }
#antwortKarte.angedockt .dockgriff.links, #notizKarte.angedockt .dockgriff.links { left: -3px; }
#antwortKarte.angedockt .dockgriff.rechts, #notizKarte.angedockt .dockgriff.rechts { right: -3px; }
#antwortKarte.angedockt .dockgriff:hover, #notizKarte.angedockt .dockgriff:hover { background: rgba(234, 90, 6, .25); border-radius: 4px; }

/* Aufgaben im Vorgang */
.aufgabe { padding: .7rem 0; border-bottom: 1px solid var(--grau-100); }
.aufgabe:last-child { border-bottom: 0; }
.aufgabe-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.aufgabe-kopf .kennung { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
  color: var(--grau-500); margin-right: .35rem; }
.aufgabe-kopf .marker { margin-left: .35rem; }
.aufgabe-meta { font-size: .88rem; color: var(--grau-500); margin-top: .25rem; }
.aufgabe-meta .erl { color: var(--grau-500); }
.aufgabe-text { margin-top: .45rem; white-space: pre-line; font-size: .95rem; }
.aufgabe-ergebnis { margin-top: .5rem; padding: .55rem .7rem; background: var(--grau-50);
  border-left: 3px solid var(--gruen); border-radius: 0 6px 6px 0; white-space: pre-line; }
.aufgabe-ergebnis .feldname { display: block; font-size: .8rem; color: var(--grau-500);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.aufgabe-ergebnis .erl { font-size: .84rem; color: var(--grau-500); margin-top: .3rem; white-space: normal; }
.aufgabe-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.aufgabe-knoepfe:empty { display: none; }
.aufgabe-zuteilen { display: flex; gap: .3rem; align-items: center; }
.aufgabe-zuteilen select { width: auto; max-width: 15rem; padding: .25rem .4rem; font-size: .85rem; }
.aufgabe.ueberfaellig { box-shadow: inset 3px 0 0 var(--rot); padding-left: .6rem; }
.aufgabe.offen_bereich { box-shadow: inset 3px 0 0 var(--gelb); padding-left: .6rem; }
.aufgabe.hervor { animation: aufgabe-hervor 2.4s ease-out; }
@keyframes aufgabe-hervor { 0%, 40% { background: var(--akzent-hell); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .aufgabe.hervor { animation: none; } }

/* Seite "Meine Aufgaben" */
.aufgabenliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
/* minmax(0, 1fr): lange Texte/Links umbrechen statt die Karte zu sprengen */
.aufgabenkarte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: start; overflow-wrap: anywhere;
  padding: .75rem .9rem; background: var(--weiss); border: 1px solid var(--grau-100); border-radius: 8px; }
.aufgabenkarte .frist { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; min-width: 6.5rem; }
.aufgabenkarte .frist small { display: block; font-weight: 400; color: var(--grau-500); }
.aufgabenkarte.ueberfaellig { border-color: #f2c4c4; box-shadow: inset 4px 0 0 var(--rot); }
.aufgabenkarte.ueberfaellig .frist { color: var(--rot); }
.aufgabenkarte.heute .frist { color: var(--akzent-dunkel); }
.aufgabenkarte .vorgang { font-size: .88rem; color: var(--grau-500); }
.aufgabenkarte .vorgang a { color: inherit; }
/* Handy: Frist und Knopf oben nebeneinander, Text darunter über die volle Breite */
@media (max-width: 640px) {
  .aufgabenkarte { grid-template-columns: minmax(0, 1fr) auto; }
  .aufgabenkarte > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* Art des Vorgangs: drei gleich breite Schaltflächen statt einer Auswahlliste -
   die Entscheidung soll beim Anlegen ins Auge fallen. */
.artwahl-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.artwahl-knopf { position: relative; margin: 0; }
.artwahl-knopf input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.artwahl-knopf span {
  display: block; text-align: center; padding: .6rem .5rem; border: 1px solid var(--grau-300);
  border-radius: var(--radius); background: var(--weiss); font-weight: 600; color: var(--grau-700);
}
.artwahl-knopf input:checked + span { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent-dunkel); }
.artwahl-knopf input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.artmarke { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--grau-100); background: var(--grau-50); color: var(--grau-700); }
.artmarke.schaden { background: #fdf3e2; border-color: #f0d7a8; color: #8a5a00; }
.artmarke.anfrage { background: #eef3ee; border-color: #c9d9c9; color: #2f5a35; }
.artmarke.vorfall { background: #eaf1fb; border-color: #c4d6ef; color: #1f4f8c; }
.mehrfachwahl-gruppe { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--grau-500); padding: .5rem .5rem .2rem; }

/* ---------------------------------------------------------- Zustand eines Vorgangs */
.zustand { margin: 0 0 1.2rem; }
.zustand-leiste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.zustand-leiste li { position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .25rem; padding: 0 .25rem; color: var(--grau-500); min-width: 0; }
.zustand-leiste li::before { content: ""; position: absolute; top: .8rem; left: -50%; width: 100%; height: 3px;
  background: var(--grau-100); z-index: 0; }
.zustand-leiste li:first-child::before { display: none; }
.zustand-leiste li.erreicht::before { background: var(--dunkel); }
.zustand-leiste li.aktuell::before { background: linear-gradient(90deg, var(--dunkel), var(--farbe)); }
.zustand-punkt { position: relative; z-index: 1; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--weiss); border: 2px solid var(--grau-300); color: var(--weiss); }
.zustand-punkt svg { width: .95rem; height: .95rem; }
.zustand-leiste li.erreicht .zustand-punkt { background: var(--dunkel); border-color: var(--dunkel); }
.zustand-leiste li.aktuell .zustand-punkt { background: var(--farbe); border-color: var(--farbe);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--farbe) 22%, transparent); }
.zustand-name { font-size: .82rem; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.zustand-leiste li.erreicht .zustand-name { color: var(--grau-900); }
.zustand-leiste li.aktuell .zustand-name { color: var(--farbe); font-weight: 700; }
.zustand-datum { font-size: .75rem; font-variant-numeric: tabular-nums; min-height: 1em; }
.zustand-pause { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600;
  color: var(--grau-700); background: var(--grau-50); border: 1px solid var(--grau-100); border-radius: 999px; padding: .1rem .5rem; }
.zustand-pause svg { width: .85rem; height: .85rem; }
.zustand-karte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  background: var(--weiss); border: 1px solid var(--grau-100); border-radius: var(--radius); box-shadow: var(--schatten); }
.zustand-feld { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .85rem 1rem; min-width: 0; }
.zustand-feld + .zustand-feld { border-left: 1px solid var(--grau-100); }
.zustand-klein { font-size: .8rem; color: var(--grau-500); }
.zustand-ueber { color: var(--rot); font-weight: 600; }
.zustand-balken { display: block; width: 100%; height: .45rem; border-radius: 999px; background: var(--grau-100); overflow: hidden; }
.zustand-balken > span { display: block; height: 100%; border-radius: inherit; background: var(--gruen); }
.zustand-balken.warnung > span { background: var(--gelb); }
.zustand-balken.gefahr > span { background: var(--rot); }
@media (max-width: 760px) {
  .zustand-karte { grid-template-columns: minmax(0, 1fr); }
  .zustand-feld + .zustand-feld { border-left: 0; border-top: 1px solid var(--grau-100); }
  .zustand-datum { display: none; }
  /* schmal: nur der aktuelle Schritt trägt seinen Namen, die übrigen zeigen die Punkte */
  .zustand-leiste li:not(.aktuell) .zustand-name { visibility: hidden; height: 0; }
  .zustand-leiste li.aktuell .zustand-name { white-space: nowrap; overflow-wrap: normal; }
}
/* Mini-Leiste in der Vorgangsliste */
.mini-leiste { display: flex; gap: 3px; margin-top: .35rem; }
.mini-leiste i { width: 14px; height: 4px; border-radius: 2px; background: var(--grau-100); }
.mini-leiste i.ok { background: var(--grau-500); }
.mini-leiste i.jetzt { background: var(--farbe, var(--dunkel)); }
.mini-leiste i.pause { background: repeating-linear-gradient(90deg, var(--grau-500) 0 3px, transparent 3px 5px); }
/* zuletzt geöffneter Vorgang: dünner Rahmen wie die Markierung unter Windows */
.vorgangszeile.zuletzt { outline: 1px dotted var(--grau-700); outline-offset: -2px; }
.vorgangszeile.zuletzt td { background: #f3f6fb; }
/* Hinweis: Neues seit dem Laden / Vorgang wurde geändert */
.aktualitaet-hinweis { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem .9rem; border-radius: var(--radius); background: #eef3ff; color: #1e3a8a;
  border: 1px solid #c7d6fb; font-size: .92rem; }
.aktualitaet-hinweis[hidden] { display: none; }
.aktualitaet-hinweis.schwebend { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 50;
  margin: 0; max-width: min(92vw, 40rem); box-shadow: var(--schatten-hoch); }
/* Wer ist gerade im Vorgang */
.anwesend-leiste { margin: 0 0 1rem; padding: .55rem .9rem; border-radius: var(--radius); font-size: .92rem;
  background: #f4f0ff; color: #4c1d95; border: 1px solid #ddd0fb; }
.anwesend-leiste.schreibt { background: #fff4e5; color: #8a4b00; border-color: #f3d3a4; font-weight: 600; }
.anwesend-leiste[hidden] { display: none; }
.anwesend-hinweis { display: block; margin-top: .2rem; font-size: .74rem; font-weight: 600; color: #6d28d9; line-height: 1.2; }
.anwesend-hinweis.schreibt { color: #b45309; }
/* Status-Karte deutlicher (Vorbild Sendungsverfolgung): Reiter-Überschrift, klare Feldnamen, grosse Werte */
.zustand-karte { position: relative; margin-top: 1.9rem; border-top: 2px solid var(--grau-700); border-radius: 0 var(--radius) var(--radius) var(--radius); background: var(--grau-50); box-shadow: none; }
.zustand-karte::before { content: "Aktueller Stand"; position: absolute; left: 0; top: -1.75rem; padding: .3rem .8rem;
  background: var(--grau-700); color: var(--weiss); font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 4px 4px 0 0; }
.zustand-feld { padding: 1rem 1.2rem; gap: .35rem; }
.zustand-feld .feldname { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau-900); }
.zustand-feld > span:not(.feldname):not(.zustand-klein):not(.marker):not(.zustand-balken) { font-size: 1.08rem; color: var(--grau-900); }
.zustand-feld .marker { font-size: 1rem; padding: .3rem .75rem; }
.zustand-feld .marker .punkt { width: .65rem; height: .65rem; }
.zustand-klein { font-size: .86rem; color: var(--grau-700); }
.zustand-balken { height: .55rem; }
.zustand-name { font-size: .9rem; }
.zustand-datum { font-size: .8rem; color: var(--grau-700); }
/* lange Nachrichten zuklappen */
.nachrichtentext.lang:not(.offen) { max-height: 18em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.aufklapper { margin-top: .4rem; }
/* Postausgang */
.kennzahlen-zeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kennzahl { display: flex; flex-direction: column; padding: .8rem 1rem; border-radius: var(--radius); background: var(--weiss);
  border: 1px solid var(--grau-100); text-decoration: none; color: var(--grau-900); }
.kennzahl .zahl { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kennzahl .was { font-size: .86rem; color: var(--grau-700); }
.kennzahl.gesendet .zahl { color: var(--gruen); } .kennzahl.fehlgeschlagen .zahl { color: var(--rot); }
.kennzahl.aktiv { outline: 2px solid var(--dunkel); }
@media (max-width: 640px) { .kennzahlen-zeile { grid-template-columns: minmax(0, 1fr); } }
/* Formular: bei "Kündigung" entfällt der Haken, nur die Kündigungs-Felder bleiben */
#kuendigungsKasten .nur-bei-kuendigung { display: none; }
#kuendigungsKasten.nur-felder .kuendigungs-haken { display: none !important; }
#kuendigungsKasten.nur-felder .nur-bei-kuendigung { display: block; }
/* Standard-Mails im Verlauf: zugeklappt, nur Kopfzeile sichtbar */
.nachricht.automatisch { padding-top: .6rem; padding-bottom: .6rem; }
.automail > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  font-size: .9rem; color: var(--grau-700); }
.automail > summary::-webkit-details-marker { display: none; }
.automail-titel { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grau-500); }
.automail-auf { margin-left: auto; font-size: .8rem; color: var(--akzent-dunkel); text-decoration: underline; }
.automail[open] .automail-auf { visibility: hidden; }
.automail[open] > summary { margin-bottom: .5rem; }
/* CRM+ in der Suche */
.quelle-crm { display: inline-block; margin-left: .4rem; padding: 0 .35rem; border-radius: 4px; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; color: #1e3a8a; background: #e6edff; border: 1px solid #c7d6fb; vertical-align: 1px; }
.crm-hinweis { margin-top: .3rem; font-size: .84rem; color: #1e3a8a; }
.crm-hinweis[hidden] { display: none; }

/* ------------------------------------------- Einreichen Schritt für Schritt */
.schrittkopf { margin-bottom: 1rem; display: grid; gap: .5rem; scroll-margin-top: 80px; }
.schrittkopf-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.schrittkopf-zeile b { font-size: 1.05rem; color: var(--dunkel); }
#schritt_zahl { color: var(--grau-500); font-size: .9rem; font-variant-numeric: tabular-nums; }
.schrittbalken { height: 8px; background: var(--grau-100); border-radius: 999px; overflow: hidden; }
.schrittbalken span { display: block; height: 100%; width: 0; background: var(--akzent); border-radius: 999px; transition: width .35s ease; }
.schrittkopf.alles .schrittbalken { display: none; }
.schrittliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.schrittliste button { font: inherit; font-size: .84rem; padding: .2rem .6rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--grau-300); background: var(--weiss); color: var(--grau-500); }
.schrittliste button:disabled { cursor: default; }
.schrittliste .erledigt button { color: var(--gruen); border-color: #bfdcc1; background: #eaf5eb; }
.schrittliste .erledigt button::before { content: "✓ "; }
.schrittliste .aktiv button { color: var(--weiss); background: var(--dunkel); border-color: var(--dunkel); font-weight: 600; }
.schrittliste button:focus-visible, .schritt-umschalter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.schritt-umschalter { font: inherit; font-size: .84rem; background: none; border: 0; padding: .2rem 0; color: var(--grau-500); text-decoration: underline; cursor: pointer; }
.karte.schritt-weg { display: none; }
.schritt-navi { display: flex; gap: .7rem; margin-top: 1.2rem; align-items: center; flex-wrap: wrap; }
.schritt-navi .schritt-luecke { flex: 1; }
.schritt-navi .knopf[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .schrittbalken span { transition: none; } }

/* Angefangene Meldungen */
.entwurf-stand { margin: .6rem 0 0; font-size: .85rem; color: var(--grau-500); }
.entwurf-stand.gespeichert::before { content: "✓ "; color: var(--gruen); font-weight: 700; }
.entwurf-hinweis a { font-weight: 600; }
.angefangen { margin-bottom: 1.2rem; }
.angefangen ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.angefangen li { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: .55rem .8rem; background: var(--weiss); border: 1px solid var(--grau-100); border-radius: var(--radius); }
.angefangen li .wann { color: var(--grau-500); font-size: .85rem; }

/* Hinweis nach einem Update, wenn gerade etwas eingetippt ist */
.versionshinweis { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 95; display: flex; gap: .8rem; align-items: center;
  flex-wrap: wrap; max-width: calc(100% - 2rem); padding: .7rem 1rem; background: var(--dunkel); color: #fff; border-radius: var(--radius); box-shadow: var(--schatten-hoch); }

/* Fokusansicht beim Einreichen */
.kopf.fokus .kopf-innen { justify-content: space-between; }
.kopf.fokus .marke { cursor: default; }
.kopf.fokus .fokus-titel { color: #fff; font-weight: 700; font-size: 1.05rem; margin-right: auto; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.25); margin-left: 1rem; }
@media (max-width: 560px) { .kopf.fokus .fokus-titel { font-size: .95rem; margin-left: .6rem; padding-left: .6rem; } }
/* Auswahl: angefangene Meldung fortsetzen oder neu beginnen */
.entwurfswahl { display: grid; gap: .7rem; }
.entwurfswahl-eintrag { display: flex; align-items: center; gap: .8rem; padding: .3rem .9rem .3rem .3rem; }
.entwurfswahl-weiter { flex: 1; display: grid; gap: .15rem; padding: .8rem 1rem; text-decoration: none; color: inherit; border-radius: var(--radius); }
.entwurfswahl-weiter:hover { background: var(--akzent-hell); }
.entwurfswahl-weiter b { font-size: 1.08rem; color: var(--dunkel); }
.entwurfswahl-weiter .klein { font-size: .85rem; color: var(--grau-500); }
.entwurfswahl-neu { justify-self: start; margin-top: .4rem; }
/* Handy: Fokus-Kopf in einer Zeile, Art-Knöpfe untereinander statt abgeschnitten */
.kopf.fokus .kopf-innen { flex-wrap: nowrap; }
.kopf.fokus .fokus-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 560px) {
  .artwahl-knoepfe { grid-template-columns: 1fr !important; display: grid; gap: .45rem; }
  .artwahl-knopf { width: 100%; }
}

/* Zähler ohne Ungelesenes ausblenden - inline-block überstimmte sonst das hidden-Attribut */
.neuzahl[hidden] { display: none; }

/* Mail verschieben/entfernen: ⋯ rechts oben in einer Mail im Verlauf */
.nachricht-rechts { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.nachricht-menue { position: relative; }
.nachricht-menue > summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 6px; color: var(--grau-500);
}
.nachricht-menue > summary::-webkit-details-marker { display: none; }
.nachricht-menue > summary svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.nachricht-menue > summary:hover, .nachricht-menue[open] > summary { background: var(--grau-50); color: var(--grau-900); }
.nachricht-menue > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.nachricht-menue-liste {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: min(22rem, 80vw);
  background: var(--weiss); border: 1px solid var(--grau-300); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(17,35,55,.12); padding: .75rem; display: grid; gap: .6rem;
  font-weight: 400; text-align: left;
}
.nachricht-menue-liste label { font-size: .85rem; font-weight: 600; color: var(--grau-700); display: block; margin-bottom: .3rem; }
.nachricht-menue-zeile { display: flex; gap: .4rem; }
.nachricht-menue-zeile input { flex: 1; min-width: 0; }
.nachricht-menue-liste .hinweis { font-size: .8rem; margin-top: .25rem; }
.nachricht-menue-entfernen {
  width: 100%; text-align: left; padding: .5rem .6rem; border: 0; border-top: 1px solid var(--grau-200, #e5e8ec);
  background: none; color: var(--rot); font: inherit; cursor: pointer; border-radius: 0 0 6px 6px;
}
.nachricht-menue-entfernen:hover { background: #fdf0f0; }
@media print { .nachricht-menue { display: none !important; } }
.nachricht-menue-zeile input {
  padding: .45rem .6rem; border: 1px solid var(--grau-300); border-radius: 6px;
  font: inherit; font-size: .9rem; background: var(--weiss); color: var(--grau-900);
}
.nachricht-menue-zeile input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(234,90,6,.18); }
.nachricht-menue-liste .hinweis { color: var(--grau-500); }

/* Hineinziehen von Dateien: Feld leuchtet auf */
.feld.ablage-aktiv input[type=file] { outline: 2px dashed var(--akzent); outline-offset: 4px; background: #fff7f1; }

/* Angehängte Mail (.msg/.eml) im Verlauf zum Aufklappen */
.mailanhang { margin-top: .6rem; border: 1px solid var(--grau-300); border-radius: var(--radius); background: var(--weiss); }
.mailanhang > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem;
}
.mailanhang > summary::-webkit-details-marker { display: none; }
.mailanhang > summary > svg { width: 1.25rem; height: 1.25rem; color: var(--akzent); flex-shrink: 0; }
.mailanhang-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.mailanhang-titel { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grau-500); }
.mailanhang-betreff { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailanhang-meta { font-size: .84rem; color: var(--grau-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailanhang-auf { font-size: .85rem; color: var(--akzent-dunkel, var(--akzent)); white-space: nowrap; }
.mailanhang[open] .mailanhang-auf { visibility: hidden; }
.mailanhang > summary:hover { background: var(--grau-50); }
.mailanhang > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.mailanhang-inhalt { border-top: 1px solid var(--grau-300); padding: .75rem; display: grid; gap: .7rem; }
.mailanhang-kopf { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; font-size: .88rem; margin: 0; }
.mailanhang-kopf dt { color: var(--grau-500); }
.mailanhang-kopf dd { margin: 0; overflow-wrap: anywhere; }
.mailanhang-body { max-height: 28rem; overflow: auto; background: var(--grau-50); border-radius: 6px; padding: .6rem .75rem; }
.mailanhang-dateien { font-size: .86rem; }
.mailanhang-inhalt > .knopf { justify-self: start; }

/* Eigene Notiz bearbeiten */
.bearbeitet-vermerk { font-size: .78rem; color: var(--grau-500); font-style: italic; }
.notiz-bearbeiten { margin-top: .5rem; }
.notiz-loeschen { margin: .35rem 0 0; }
.notiz-loeschen-knopf { border: 0; background: none; padding: 0; color: var(--rot); font: inherit; font-size: .85rem; cursor: pointer; }
.notiz-loeschen-knopf:hover, .notiz-loeschen-knopf:focus-visible { text-decoration: underline; }
.notiz-bearbeiten > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--grau-500); padding: .2rem .4rem; border-radius: 6px;
}
.notiz-bearbeiten > summary::-webkit-details-marker { display: none; }
.notiz-bearbeiten > summary svg { width: .95rem; height: .95rem; }
.notiz-bearbeiten > summary:hover { background: var(--grau-50); color: var(--grau-900); }
.notiz-bearbeiten > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.notiz-bearbeiten[open] > summary { display: none; }
.notiz-bearbeiten form { display: grid; gap: .6rem; margin-top: .4rem; padding-top: .7rem; border-top: 1px dashed var(--grau-300); }
.notiz-bearbeiten-knoepfe { display: flex; gap: .5rem; }

/* Kopfzeile im Verlauf: Uhrzeit und ⋯ bleiben rechts oben, auch bei langen Empfängerlisten */
.nachricht header { flex-wrap: nowrap; }
.nachricht header > div:first-child { flex: 1 1 auto; min-width: 0; }
.nachricht .empfaenger { overflow-wrap: anywhere; }
.nachricht-rechts { align-self: flex-start; }
.marker.violett { background: #f1ecfa; color: #6a46b3; border-color: #dacff0; }
/* Auge hinter jeder Person in der Karte Kundenportal: Vorschau, wie sie das Portal sieht */
.portal-auge { margin-left: auto; align-self: center; display: grid; place-items: center; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 6px; color: var(--grau-500); }
.portal-auge svg { width: 1.1rem; height: 1.1rem; }
.portal-auge:hover { background: var(--grau-50); color: var(--akzent); }
.portal-auge:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.portal-vorschau-hinweis a { margin-left: .3rem; font-weight: 600; }
fieldset[disabled] .knopf { opacity: .45; cursor: not-allowed; }
/* Vorschläge "In Kopie waren" in der Karte Beteiligte */
.kopie-vorschlag { margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--grau-300); display: grid; gap: .35rem; }
.kopie-vorschlag-titel { font-size: .85rem; font-weight: 600; color: var(--grau-700); }
.kopie-zeile { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .55rem;
  border: 1px dashed var(--grau-300); border-radius: var(--radius); background: var(--grau-50); }
.kopie-zeile > div { min-width: 0; overflow-wrap: anywhere; }
.kopie-zeile .knopf { white-space: nowrap; flex-shrink: 0; }
.sprungmarke { display: block; position: relative; top: -5rem; visibility: hidden; }
.notiz-meldung { margin: .6rem 0 0; font-size: .92rem; }
.dateiliste { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .86rem; color: var(--grau-700); }
.dateiliste li::before { content: "📎 "; }
.dateiliste li { display: flex; align-items: center; gap: .35rem; }
.dateiliste .datei-weg { border: 0; background: none; color: var(--grau-500); font-size: 1.05rem; line-height: 1;
  padding: .1rem .35rem; border-radius: 4px; cursor: pointer; }
.dateiliste .datei-weg:hover, .dateiliste .datei-weg:focus-visible { color: var(--rot); background: var(--grau-100); }
/* Zitierter Mailverlauf unter einer Antwort - zum Aufklappen */
.mailverlauf { margin-top: .5rem; }
.mailverlauf > summary { cursor: pointer; font-size: .86rem; color: var(--grau-500); padding: .2rem 0; }
.mailverlauf > summary:hover { color: var(--grau-900); }
.mailverlauf > .nachrichtentext { margin-top: .4rem; padding: .6rem .75rem; border-left: 3px solid var(--grau-300); background: rgba(255,255,255,.6);
  max-height: 32rem; overflow: auto; font-size: .92rem; color: var(--grau-700); }

/* ------------------------------------------------------------ Seite Ablauf */
.ab-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; counter-reset: none; }
.ab-schritt { position: relative; background: var(--weiss); border: 1px solid var(--grau-100); border-radius: var(--radius-gross);
  box-shadow: var(--schatten); padding: 1.1rem 1rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.ab-schritt:not(:last-child)::after { content: ""; position: absolute; top: 1.55rem; right: -1.15rem; width: .9rem; height: .9rem;
  border: solid var(--grau-300); border-width: 0 3px 3px 0; transform: rotate(-45deg); }
.ab-nr { width: 2rem; height: 2rem; border-radius: 50%; background: var(--dunkel); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-schritt h2 { font-size: 1.05rem; margin: 0; }
.ab-schritt ul { margin: 0; padding-left: 1.05rem; display: grid; align-content: start; gap: .35rem; font-size: .9rem; color: var(--grau-700); line-height: 1.4; flex: 1; }
.ab-fuss { border-top: 1px dashed var(--grau-300); padding-top: .55rem; font-size: .8rem; color: var(--grau-500); display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ab-chip { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid; white-space: nowrap; }
.ab-kunde { background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: #f6cfae; }
.ab-kunde-nie { background: var(--grau-50); color: var(--grau-500); border-color: var(--grau-100); text-decoration: line-through; }
.ab-einreicher { background: #eef3fc; color: #2456c4; border-color: #c4d3f2; }
.ab-bereich { background: #f1ecfa; color: #6a46b3; border-color: #dacff0; }
.ab-beteiligte { background: #eaf5eb; color: var(--gruen); border-color: #bfdcc1; }
.ab-cs { background: #e8edf3; color: var(--dunkel); border-color: #c9d3de; }
.ab-grundsatz { background: var(--akzent-hell); border-left: 4px solid var(--akzent); padding: .6rem .8rem; border-radius: 6px; margin: 0 0 .9rem; }
.ab-tabelle-huelle { overflow-x: auto; }
.ab-tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 760px; }
.ab-tabelle th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grau-500); padding: .4rem .5rem; border-bottom: 2px solid var(--grau-100); }
.ab-tabelle td { padding: .45rem .5rem; border-bottom: 1px solid var(--grau-100); vertical-align: middle; }
.ab-tabelle td:first-child { color: var(--grau-900); font-weight: 500; }
.ab-tabelle td.nein { color: var(--grau-300); }
.ab-tabelle .ab-chip, .ab-fuss .ab-chip { white-space: normal; }
.ab-zwei { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; margin-top: 1rem; }
.ab-text p { margin: 0 0 .6rem; line-height: 1.5; }
.ab-farben { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .92rem; }
.ab-farben li { display: flex; align-items: center; gap: .6rem; }
.ab-strich { width: 0; height: 1.4rem; border-left: 4px solid; flex-shrink: 0; }
.ab-gestrichelt { border-left: 4px dashed var(--grau-300); }
.ab-sonder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.4rem; }
.ab-sonder h3 { font-size: .95rem; margin: 0 0 .25rem; }
.ab-sonder p { margin: 0; font-size: .9rem; color: var(--grau-700); line-height: 1.45; }
@media (max-width: 1100px) {
  .ab-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-schritt::after { display: none; }
  .ab-zwei, .ab-sonder { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .ab-schritte { grid-template-columns: 1fr; } }
@media print { .ab-schritt { box-shadow: none; break-inside: avoid; } }

/* ------------------------------------------------------- Kundenkartei */
.kk-nebeninfo { display: block; color: var(--grau-500); font-size: .82rem; font-weight: 400; }
.kk-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.kk-chip { font-size: .78rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; border: 1px solid; text-decoration: none; font-variant-numeric: tabular-nums; }
.kk-chip.offen { background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: #f6cfae; }
.kk-chip.zu { background: var(--grau-50); color: var(--grau-500); border-color: var(--grau-100); }
.kk-chip:hover { filter: brightness(.95); }
.kk-datum { font-variant-numeric: tabular-nums; color: var(--grau-500); font-size: .88rem; }

/* Liste */
.kk-abc { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .8rem; }
.kk-abc a { min-width: 2rem; text-align: center; padding: .25rem .4rem; border-radius: 6px; background: var(--weiss); border: 1px solid var(--grau-100);
  color: var(--grau-700); font-weight: 600; text-decoration: none; font-size: .88rem; }
.kk-abc a:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }
.kk-tabelle-kopf, .kk-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 6rem 9rem 9rem; gap: .8rem; align-items: center; padding: .55rem 1rem; }
.kk-tabelle-kopf { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grau-500); border-bottom: 2px solid var(--grau-100); }
.kk-tabelle-kopf span:not(:first-child), .kk-zeile > span:not(:first-child) { text-align: right; }
.kk-gruppe { padding: .3rem 1rem; background: var(--grau-50); color: var(--grau-500); font-weight: 700; font-size: .8rem; letter-spacing: .06em;
  border-bottom: 1px solid var(--grau-100); scroll-margin-top: 5rem; }
.kk-zeile { border-bottom: 1px solid var(--grau-100); color: var(--grau-900); text-decoration: none; }
.kk-zeile:hover { background: #fffaf6; }
.kk-name { min-width: 0; }
.kk-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-zahl { font-variant-numeric: tabular-nums; font-weight: 600; display: flex; justify-content: flex-end; align-items: center; gap: .4rem; }
.kk-ohne-karte > summary { list-style: none; cursor: pointer; }
.kk-ohne-karte > summary::-webkit-details-marker { display: none; }
.kk-ohne { display: grid; gap: .45rem; }
.kk-ohne-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem .8rem; padding: .35rem 0; border-bottom: 1px solid var(--grau-100); }
.kk-ohne-zeile .kk-nebeninfo { display: inline; margin-left: .3rem; }

/* Karteikarte */
.kk-zurueck { margin: 0 0 .6rem; font-size: .9rem; }
.kk-kopf { padding: 1.1rem 1.2rem; }
.kk-kopf-oben { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.kk-kopf h1 { margin: 0; }
.kk-kopf .unterzeile { margin: .2rem 0 0; }
.kk-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.kk-kennzahl { display: flex; flex-direction: column; padding: .65rem .8rem; border-radius: var(--radius); background: var(--grau-50);
  border: 1px solid var(--grau-100); color: var(--grau-900); text-decoration: none; }
.kk-kennzahl b { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kk-kennzahl span { font-size: .82rem; color: var(--grau-500); }
.kk-kennzahl.warnt { background: var(--akzent-hell); border-color: #f6cfae; }
.kk-kennzahl.warnt b { color: var(--akzent-dunkel); }
.kk-kennzahl:hover { border-color: var(--grau-300); }
.kk-notiz { margin-top: .9rem; padding: .6rem .8rem; border-left: 4px solid var(--gelb, #a86400); background: #fffaf0; border-radius: 6px; white-space: pre-line; font-size: .92rem; }
.kk-bearbeiten { width: min(24rem, 90vw); padding: .8rem; gap: .8rem; }
.kk-bearbeiten form { display: grid; gap: .4rem; }
.kk-bearbeiten form + form { border-top: 1px solid var(--grau-100); padding-top: .7rem; }
.kk-abschnitt { margin-top: 1rem; scroll-margin-top: 5rem; }
.kk-abschnitt .karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.kk-leer { padding: 1rem 1.2rem; margin: 0; }
.kk-reihen { display: grid; }
.kk-reihe { display: grid; gap: .8rem; align-items: center; padding: .6rem 1.2rem; border-bottom: 1px solid var(--grau-100); color: var(--grau-900); text-decoration: none; }
.kk-reihe:last-child { border-bottom: 0; }
.kk-reihe-kopf { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grau-500); padding-top: .45rem; padding-bottom: .45rem; background: var(--grau-50); }
.kk-sp-standort { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.kk-sp-person { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 2rem; }
.kk-sp-vorgang { grid-template-columns: 7.5rem minmax(0, 1.6fr) minmax(0, 1.2fr) 6rem 8.5rem; }
.kk-sp-vorgang > span:last-child { text-align: right; }
.kk-ohne-standort { background: var(--grau-50); }
.kk-personen { font-size: .9rem; color: var(--grau-700); }
.kk-kontakt { display: grid; font-size: .9rem; }
.kk-kontakt a { overflow-wrap: anywhere; }
.kk-link:hover { background: #fffaf6; }
.kk-link.ist-zu { color: var(--grau-700); }
#kk-vorgangsliste[data-filter="offen"] .ist-zu { display: none; }
.kk-umschalter { display: flex; gap: .3rem; }
.kk-umhaengen .nachricht-menue-liste select, .kk-umhaengen .nachricht-menue-liste input { width: 100%; }
@media (max-width: 900px) {
  .kk-tabelle-kopf { display: none; }
  .kk-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .kk-zeile > span:nth-child(2), .kk-zeile > span:nth-child(3), .kk-zeile > .kk-datum { display: none; }
  .kk-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-reihe-kopf { display: none; }
  .kk-sp-standort, .kk-sp-person, .kk-sp-vorgang { grid-template-columns: 1fr; gap: .25rem; }
  .kk-sp-person { grid-template-columns: 1fr 2rem; }
  .kk-sp-person > span { grid-column: 1; }
  .kk-sp-person > details { grid-column: 2; grid-row: 1; }
  .kk-sp-vorgang > span:last-child { text-align: left; }
}

/* interne Mail ohne Antwort: Hinweis unter "Ball liegt" */
.zustand-rueckmeldung { display: inline-block; margin-top: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: #f3effa; color: #6b4bb0; border: 1px solid #ddd2f0; text-decoration: none; width: fit-content; }
.zustand-rueckmeldung:hover { background: #ebe4f7; }
.nachricht-menue-aufgabe { display: grid; gap: .3rem; padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--grau-200); }
.nachricht-menue-aufgabe .knopf { justify-self: start; }

/* Kundenkartei: sortierbare Spaltenköpfe */
.kk-tabelle-kopf a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.kk-tabelle-kopf a:not(:first-child) { justify-content: flex-end; }
.kk-tabelle-kopf a:hover, .kk-tabelle-kopf a.aktiv { color: var(--grau-900); }
.kk-pfeil { font-size: .7rem; opacity: .35; }
.kk-tabelle-kopf a.aktiv .kk-pfeil { opacity: 1; color: var(--akzent, #e8590c); }
.kk-tabelle-kopf a:hover .kk-pfeil { opacity: .8; }
.kk-sort-handy { display: none; }
@media (max-width: 900px) { .kk-sort-handy { display: block; } }

/* Abgeschlossen: Wieder eröffnen / Antwort nach Abschluss */
.nach-abschluss { display: grid; gap: .6rem; }
.nach-abschluss-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.wieder-eroeffnen > summary { display: inline-flex; list-style: none; cursor: pointer; }
.wieder-eroeffnen > summary::-webkit-details-marker { display: none; }
.wahl-zeile { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--grau-200); border-radius: 8px; margin-bottom: .45rem; cursor: pointer; }
.wahl-zeile input { width: auto; margin-top: .2rem; }
.wahl-zeile:has(input:checked) { border-color: var(--akzent); background: #fff8f3; }
.wahl-zeile .erl { display: block; font-size: .85rem; color: var(--grau-500); margin-top: .15rem; }

/* Dashboard-Kachel Wiederholungsfälle */
.wdh-zahl { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; color: inherit; margin-bottom: .8rem; }
.wdh-zahl .zahl { font-size: 2.2rem; font-weight: 700; color: var(--akzent); line-height: 1; }
.wdh-zahl .was { color: var(--grau-500); }
.wdh-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.wdh-balken { display: grid; grid-template-columns: minmax(0, 9rem) 1fr 1.8rem; gap: .5rem; align-items: center; font-size: .85rem; margin-top: .3rem; }
.wdh-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wdh-spur { height: .55rem; background: var(--grau-100); border-radius: 99px; overflow: hidden; }
.wdh-spur > span { display: block; height: 100%; background: var(--akzent); border-radius: 99px; }
.wdh-anzahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.wdh-liste { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .88rem; }
.wdh-liste li { display: flex; gap: .45rem; align-items: baseline; min-width: 0; }
.wdh-betreff { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Teilauswertungen */
.ta-liste { display: grid; }
.ta-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--grau-100); }
.ta-zeile .erl { grid-column: 1; font-size: .85rem; color: var(--grau-500); }
.ta-knoepfe { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: .4rem; flex-wrap: wrap; }
.ta-fest { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
.ta-fest input { max-width: 11rem; }
.ta-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .8rem; }
.ta-gruppe { border: 1px solid var(--grau-200); border-radius: 8px; padding: .5rem .8rem .7rem; margin: 0; }
.ta-gruppe legend { display: flex; gap: .5rem; align-items: center; padding: 0 .3rem; }
.ta-gruppe legend input, .ta-sicht input { width: auto; }
.ta-sicht { display: flex; gap: .5rem; align-items: flex-start; padding: .25rem 0; cursor: pointer; }
.ta-sicht input { margin-top: .2rem; }
.ta-sicht .erl { display: block; font-size: .8rem; color: var(--grau-500); }
.ta-beschreibung { margin: 0; padding: .6rem 1.2rem 0; color: var(--grau-500); font-size: .9rem; }
.ta-inhalt { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .5rem; align-items: start; }
.ta-inhalt > :only-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .ta-inhalt { grid-template-columns: 1fr; } .ta-zeile { grid-template-columns: 1fr; } .ta-knoepfe { grid-column: 1; grid-row: auto; } }
@media print {
  .nicht-drucken { display: none !important; }
  .ta-abschnitt { page-break-inside: avoid; break-inside: avoid; box-shadow: none; }
  .ta-inhalt { grid-template-columns: 1fr; }
}

/* Aufgaben: lange Texte kürzen, Karte einklappbar */
.aufgabe-text.lang:not(.offen), .aufgabe-ergebnistext.lang:not(.offen) { max-height: 6.6em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.aufgabe-ergebnistext { white-space: pre-line; }
#aufgaben.eingeklappt > .karte-inhalt { display: none; }
.aufgaben-klapper svg { transition: transform .15s; }
#aufgaben.eingeklappt .aufgaben-klapper svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .aufgaben-klapper svg { transition: none; } }
@media print { #aufgaben.eingeklappt > .karte-inhalt { display: block; } }

/* Teilauswertung: Auswahl direkt an den Grafiken */
.ta-haken { display: inline-flex; gap: .35rem; align-items: center; font-size: .85rem; font-weight: 600; padding: .2rem .55rem;
  border: 1px solid var(--grau-200); border-radius: 999px; cursor: pointer; white-space: nowrap; background: var(--weiss, #fff); }
.ta-haken input { width: auto; margin: 0; }
.kachelfeld.ta-gewaehlt { outline: 3px solid var(--akzent); outline-offset: -1px; }
.kachelfeld.ta-gewaehlt .ta-haken { border-color: var(--akzent); color: var(--akzent-dunkel); background: #fff8f3; }
.ta-leiste { position: sticky; bottom: 0; z-index: 20; margin-top: 1rem; padding: .7rem 1rem; background: var(--weiss, #fff);
  border: 1px solid var(--grau-200); border-radius: 10px; box-shadow: 0 -4px 18px rgba(0,0,0,.08); }
.ta-leiste-innen { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ta-leiste-innen input[type=text] { flex: 1 1 14rem; min-width: 10rem; }
.ta-leiste-innen select { flex: 0 1 17rem; }
.ta-leiste .ta-fest { display: inline-flex; gap: .4rem; margin: 0; }
.ta-leiste .ta-fest[hidden] { display: none; }
.ta-leiste .ta-fest input { max-width: 10rem; }
.ta-zahl { white-space: nowrap; }
.ta-alle-sehen { display: inline-flex; gap: .3rem; align-items: center; white-space: nowrap; font-size: .9rem; }
.ta-alle-sehen input { width: auto; }
.sicht-ueberschreiben { padding-bottom: .9rem; border-bottom: 1px solid var(--grau-100); }
.sicht-ueberschreiben .hinweis { margin-top: .35rem; }

/* dritte Ebene: Tabelle je Abschnitt (z. B. je Abteilung) */
.abschnitt-kachel + .abschnitt-kachel { margin-top: 1.1rem; padding-top: .9rem; border-top: 2px solid var(--grau-100); }
.abschnitt-titel { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .3rem; font-size: 1.02rem; }
.abschnitt-titel .erl { font-size: .84rem; color: var(--grau-500); }
.abschnitt-kachel .tabelle { font-size: .88rem; }
.abschnitt-kachel .tabelle td, .abschnitt-kachel .tabelle th { padding: .35rem .55rem; }
.abschnitt-karte { margin-top: 1rem; }
@media print { .abschnitt-kachel { break-inside: avoid; } }

/* PDF/Druck: Kacheln und Karten nicht am Seitenumbruch zerschneiden.
   Passt eine Kachel nicht mehr auf die Seite, beginnt sie auf der nächsten.
   Ist sie höher als eine ganze Seite, bricht sie nur zwischen Tabellenzeilen. */
@media print {
  .kachelfeld, .karte, .ta-abschnitt, .abschnitt-kachel, .kachel, .diagrammfeld, svg {
    break-inside: avoid; page-break-inside: avoid; }
  .karte-kopf, h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  tr, .balken, .wdh-balken { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
  .kachelfeld, .karte { box-shadow: none; }
}
.abschnitt-diagramm { margin: .2rem 0 .3rem; }
.abschnitt-tabelle > summary { cursor: pointer; font-size: .85rem; color: var(--grau-500); font-weight: 600; margin: .2rem 0; }
@media print { .abschnitt-tabelle > summary { display: none; } .abschnitt-tabelle:not([open]) > div { display: block; } }

/* Auswertungsseite: worauf sich die Zahlen einer Kachel beziehen */
.kachel-erklaerung { margin: 0; padding: .55rem 1.2rem .1rem; font-size: .82rem; line-height: 1.45; color: var(--grau-500); }
.ursache-abgleich { margin-top: .4rem; padding: .4rem .6rem; border-radius: 6px; background: #fff7e6; color: #8a5300; font-size: .85rem; border: 1px solid #f3dcae; }

/* Stammdaten-Tabelle: Textfelder breit genug, Häkchen gesammelt in "Optionen" */
.tabelle.stammdaten td.sp-text input, .tabelle.stammdaten td.sp-text { min-width: 8.5rem; }
.tabelle.stammdaten td.sp-email input, .tabelle.stammdaten td.sp-email { min-width: 12.5rem; }
.tabelle.stammdaten td.sp-rolle select { min-width: 8rem; }
.tabelle.stammdaten td.sp-bereichswahl select { min-width: 8.5rem; }
.tabelle.stammdaten td.sp-kennwort input { width: 7rem; }
.tabelle.stammdaten .optionen { display: grid; grid-template-columns: repeat(2, max-content); gap: .15rem .8rem; }
.tabelle.stammdaten .option { display: inline-flex; gap: .35rem; align-items: center; font-size: .8rem; color: var(--grau-700); white-space: nowrap; cursor: pointer; }
.tabelle.stammdaten .option input { margin: 0; }
.tabelle.stammdaten td.knoepfe-spalte { display: flex; flex-direction: column; gap: .3rem; align-items: stretch; }
.tabelle.stammdaten .option:has(input:checked) { color: var(--akzent-dunkel); }
.tabelle.stammdaten th { padding-left: .5rem; padding-right: .5rem; }
.tabelle.stammdaten td.sp-rolle select { min-width: 7rem; }
.tabelle.stammdaten td.sp-bereichswahl select { min-width: 7.5rem; }
.tabelle.stammdaten td.sp-abteilung input, .tabelle.stammdaten td.sp-abteilung { min-width: 7rem; }
.tabelle.stammdaten td.sp-kennwort input { width: 6.2rem; }

/* Tabellen-Kacheln (GF-Pivot): kompakt */
.kachel-tabelle .tabelle { font-size: .86rem; }
.kachel-tabelle .tabelle td, .kachel-tabelle .tabelle th { padding: .3rem .5rem; }
.kachel-tabelle .tabelle th { white-space: normal; }
.kachel-tabelle .balken { display: none; }
.kw-wahl .feld input[type=week] { min-width: 10rem; }

/* Kreuztabellen: erste Spalte und Summe bleiben beim seitlichen Scrollen stehen */
.kreuztabelle .kt-fest { position: sticky; left: 0; z-index: 1; background: var(--weiss); }
.kreuztabelle thead .kt-fest { z-index: 2; }
.kreuztabelle .kt-summe { left: var(--kt-erste, 11rem); box-shadow: 2px 0 0 var(--grau-100); background: var(--grau-50); }
.kreuztabelle td.kt-fest:first-child, .kreuztabelle th.kt-fest:first-child { box-sizing: border-box; width: 11rem; min-width: 11rem; max-width: 11rem; white-space: normal; }
.kreuztabelle .kt-summe { left: 11rem; }
.kein-vorgang-knopf { display: inline; margin-left: .4rem; }
.kein-vorgang-knopf .knopf { padding: .1rem .5rem; font-size: .78rem; }
.kein-vorgang-karte > summary { cursor: pointer; list-style: none; }
.kein-vorgang-karte > summary::-webkit-details-marker { display: none; }

/* Einstellungen › Benutzer: "Leitet Bereiche" als aufklappbare Häkchenliste */
.leitung-wahl summary { cursor: pointer; font-size: .88rem; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.leitung-wahl[open] summary { white-space: normal; }
.leitung-wahl > div { display: grid; gap: .15rem; margin-top: .3rem; font-size: .88rem; }
.leitung-wahl label { display: flex; align-items: center; gap: .35rem; font-weight: normal; }

/* ⓘ-Erklärungen in den Einstellungen: aufklappbar, ohne Skript */
.info-knopf { display: inline-block; position: relative; margin-left: .3rem; vertical-align: middle; }
.info-knopf > summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid var(--grau-500); color: var(--grau-700);
  font: italic 700 .72rem/1 Georgia, serif; text-transform: none; letter-spacing: 0; }
.info-knopf > summary::-webkit-details-marker { display: none; }
.info-knopf > summary:hover, .info-knopf[open] > summary { border-color: var(--akzent); color: var(--akzent); }
.info-knopf > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.info-knopf .info-text { position: absolute; z-index: 30; top: 1.6rem; left: -1rem; width: 20rem; max-width: 80vw;
  background: var(--weiss); color: var(--grau-900); border: 1px solid var(--grau-300); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: .7rem .8rem; font-size: .86rem; line-height: 1.45;
  font-weight: normal; text-transform: none; letter-spacing: normal; white-space: normal; text-align: left; }
.info-knopf.breit .info-text { width: 26rem; left: auto; right: -1rem; }

/* Kachel "Standorte bei Kündigungen" */
.sb-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .9rem; }
.sb-zahl { display: flex; flex-direction: column; padding: .6rem .7rem; border: 1px solid var(--grau-100); border-radius: var(--radius); text-decoration: none; color: var(--grau-900); }
.sb-zahl .zahl { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sb-zahl .was { font-size: .85rem; color: var(--grau-500); }
.sb-zahl.gut .zahl { color: var(--gruen); }
.sb-zahl.gefahr .zahl { color: var(--rot); }
.sb-zahl:hover { border-color: var(--grau-300); }

/* Standard-Mails kompakt in der rechten Spalte des Vorgangs */
.standardmails .karte-inhalt { padding-top: .5rem; padding-bottom: .6rem; }
.sm-zeile { border-bottom: 1px solid var(--grau-100); }
.sm-zeile:last-of-type { border-bottom: 0; }
.sm-zeile > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: .55rem;
  padding: .32rem 0; font-size: .82rem; line-height: 1.35; }
.sm-zeile > summary::-webkit-details-marker { display: none; }
.sm-zeile > summary time { color: var(--grau-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-was { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-an { grid-column: 2; color: var(--grau-500); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-zeile[open] .sm-was { white-space: normal; }
.sm-text { white-space: pre-line; font-size: .8rem; color: var(--grau-700); background: var(--grau-50, #f6f7f9); border-radius: var(--radius);
  padding: .5rem .6rem; margin: 0 0 .45rem; max-height: 16rem; overflow: auto; }
.sm-mehr > summary { cursor: pointer; font-size: .8rem; color: var(--akzent-dunkel); padding: .35rem 0; }

/* Variante B: Standard-Mails als Einzeiler im Verlauf, per Schalter einblenden */
#verlauf .automail-zeile, #verlauf .tagestrenner.nur-standardmails { display: none; }
#verlauf.zeige-standardmails .automail-zeile { display: block; }
#verlauf.zeige-standardmails .tagestrenner.nur-standardmails { display: flex; }
.automail-zeile { margin: .15rem 0 .35rem; border-left: 3px solid var(--grau-300); padding-left: .6rem; }
.automail-zeile > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .5rem; font-size: .8rem;
  color: var(--grau-700); padding: .2rem 0; min-width: 0; }
.automail-zeile > summary::-webkit-details-marker { display: none; }
.automail-zeile > summary time { color: var(--grau-500); font-variant-numeric: tabular-nums; }
.automail-zeile .sm-was { flex: 0 1 auto; }
.automail-zeile .sm-an { flex: 1 1 auto; grid-column: auto; }
.automail-zeile[open] .sm-was { white-space: normal; }
.knopf[aria-pressed="true"] { background: var(--grau-100); }

/* Textmarker im Verlauf */
mark.textmarker { background: #fff0a6; color: inherit; border-radius: 2px; padding: 0 1px; box-shadow: inset 0 -2px 0 #e9c84a; }
mark.textmarker[data-etikett]::before { content: attr(data-etikett); font-size: .68rem; font-weight: 700; color: #4a3b00;
  background: #e9c84a; border-radius: 3px; padding: 0 .3rem; margin-right: .25rem; vertical-align: 1px; }
@keyframes marker-blitz { 0% { background: #ffcf33; } 100% { background: #fff0a6; } }
mark.textmarker.blitz { animation: marker-blitz 1.4s ease-out 2; }
@media (prefers-reduced-motion: reduce) { mark.textmarker.blitz { animation: none; outline: 2px solid #e9c84a; } }
.marker-verweis { background: #fff0a6; border-radius: 3px; padding: 0 .2rem; color: inherit; text-decoration: none; box-shadow: inset 0 -2px 0 #e9c84a; }
.marker-pop { position: absolute; z-index: 60; background: var(--weiss); border: 1px solid var(--grau-300); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: .45rem; box-sizing: border-box; }
.marker-pop [hidden] { display: none !important; }
.marker-pop .marker-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; width: 330px; max-width: calc(100vw - 40px); padding: .2rem; box-sizing: border-box; }
.marker-pop .marker-form input[type=text] { width: 100%; min-width: 0; box-sizing: border-box; }
.marker-knoepfe { flex-wrap: wrap; }
.marker-pop label { font-size: .82rem; font-weight: 700; }
.marker-auszug { font-size: .78rem; color: var(--grau-500); max-height: 4.5em; overflow: hidden; }
.marker-knoepfe { display: flex; gap: .4rem; }
.markierungen .karte-inhalt { padding-top: .5rem; }
.mk-zeile { display: flex; align-items: flex-start; gap: .4rem; border-bottom: 1px solid var(--grau-100); padding: .35rem 0; }
.mk-zeile:last-child { border-bottom: 0; }
.mk-link { flex: 1; min-width: 0; text-decoration: none; color: inherit; display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; font-size: .86rem; }
.mk-kennung { font-size: .7rem; font-weight: 700; color: #4a3b00; background: #e9c84a; border-radius: 3px; padding: .05rem .3rem; align-self: start; margin-top: .1rem; }
.mk-name { font-weight: 600; }
.mk-auszug { grid-column: 2; color: var(--grau-500); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-link:hover .mk-name { text-decoration: underline; }
.mk-fehlt { opacity: .55; }
.mk-weg { border: 0; background: none; color: var(--grau-500); cursor: pointer; font-size: .8rem; padding: .1rem .3rem; }
.mk-weg:hover { color: var(--rot); }
.mk-auswahl { display: grid; gap: .25rem; font-size: .88rem; }
.mk-auswahl label { display: flex; gap: .4rem; align-items: baseline; font-weight: normal; }
.aufgabe-marker { display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; text-decoration: none; color: inherit;
  background: #fffbe6; border-left: 3px solid #e9c84a; border-radius: 0 var(--radius) var(--radius) 0; padding: .35rem .55rem; margin: .4rem 0; font-size: .85rem; }
.aufgabe-marker .mk-auszug { white-space: normal; }
.mit-werkzeug { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
select.marker-einfuegen { width: auto; max-width: 16rem; padding: .2rem .4rem; font-size: .82rem; font-weight: normal; }
.mk-zeile { flex-wrap: wrap; }
.mk-loeschen > summary { list-style: none; }
.mk-loeschen > summary::-webkit-details-marker { display: none; }
.mk-loeschen[open] { flex-basis: 100%; order: 3; }
.mk-loeschen[open] > summary { display: none; }
.mk-loeschen-box { display: grid; gap: .35rem; font-size: .82rem; background: #fdf0f0; border: 1px solid #f2c4c4; border-radius: var(--radius); padding: .5rem .6rem; margin-top: .3rem; }
.mk-loeschen-box form { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Markierungen kompakt (Wunsch Customer Support) */
.markierungen .karte-kopf { padding-top: .55rem; padding-bottom: .55rem; }
.markierungen .karte-kopf h2 { font-size: 1rem; }
.markierungen .karte-inhalt { padding-top: .25rem; padding-bottom: .35rem; }
.markierungen .mk-zeile { padding: .18rem 0; align-items: center; }
.markierungen .mk-link { display: flex; align-items: baseline; gap: .4rem; font-size: .82rem; white-space: nowrap; overflow: hidden; }
.markierungen .mk-kennung { margin-top: 0; flex: none; }
.markierungen .mk-name { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.markierungen .mk-auszug { flex: 1 1 auto; min-width: 0; font-size: .76rem; }
.markierungen .mk-weg { padding: 0 .25rem; }
.mk-loeschen-box { font-size: .8rem; padding: .35rem .5rem; gap: .3rem; margin-top: .15rem; }
.mk-loeschen-box .knopf.klein { padding: .2rem .55rem; font-size: .78rem; }

/* Längere Hinweise als Marker (z. B. Abwesenheit an Aufgaben) dürfen umbrechen */
.marker.umbruch { white-space: normal; text-align: left; line-height: 1.35; border-radius: 8px; }

/* Auswertung in Worten (/auswertung/einfach) */
.frage-klappe > summary { cursor: pointer; list-style: none; }
.frage-klappe > summary::-webkit-details-marker { display: none; }
.fragen-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.frage-kachel { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .85rem; border: 1px solid var(--grau-100);
  border-radius: 8px; background: var(--weiss); color: inherit; text-decoration: none; line-height: 1.3; }
.frage-kachel span { font-size: .85rem; color: var(--grau-500); }
.frage-kachel:hover { border-color: var(--akzent); }
.frage-kachel.aktiv { border-color: var(--akzent); box-shadow: inset 4px 0 0 var(--akzent); }
.satz { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; font-size: 1.15rem; line-height: 1.6; }
.satz > select, .satz-fest input { width: auto; max-width: 100%; font-size: 1rem; font-weight: 600; padding: .3rem .5rem; }
.satz-fest { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.satz-fest[hidden] { display: none; }
.satz-filter { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .95rem; margin-top: .3rem; }
.satz-filter label { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; max-width: 100%; }
.satz-filter input[type=checkbox] { width: auto; }
.satz-filter select { width: auto; max-width: 100%; }
.satz-mehr { flex-basis: 100%; font-size: .9rem; }
.satz-mehr > summary { cursor: pointer; color: var(--grau-500); }
.satz-tabelle > summary { cursor: pointer; padding: .6rem 1rem; color: var(--grau-500); font-size: .9rem; }
.satz-speichern { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: flex-end; }
.satz-mehr .satz-filter label:has(select) { display: flex; width: 100%; }
.satz-mehr .satz-filter select { flex: 1 1 12rem; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }

/* Einreicher korrigieren (Angaben-Kasten) */
.paare .einreicher-aendern-zeile { grid-column: 1 / -1; margin: -.2rem 0 .3rem; font-weight: 400; }
.einreicher-aendern summary { cursor: pointer; color: var(--blau, #1f4f8c); font-size: .85rem; }
.einreicher-aendern label, .einreicher-aendern .hinweis { font-weight: 400; }
.einreicher-aendern form { display: grid; gap: .35rem; margin-top: .4rem; }
.einreicher-aendern input { width: 100%; }
.einreicher-aendern .knopf { justify-self: start; }

/* ---- Aufgaben als aufklappbare Zeilen (10/2026): "Für dich" oben, Erledigte eingeklappt ---- */
.aufgabe.az { padding: 0; }
.az-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .15rem .6rem; align-items: center;
  padding: .6rem 0; cursor: pointer; list-style: none; }
.az-zeile::-webkit-details-marker { display: none; }
.az-zeile:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }
.az-titel { font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
details.az[open] > .az-zeile .az-titel { display: block; }
.az-chip { white-space: nowrap; }
.az-pfeil { width: 1.6rem; height: 1.6rem; border: 1px solid var(--grau-300); border-radius: 7px; display: grid; place-items: center; }
.az-pfeil::before { content: ""; width: .42rem; height: .42rem; border-right: 2px solid var(--grau-700); border-bottom: 2px solid var(--grau-700);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
details.az[open] > .az-zeile .az-pfeil::before { transform: translateY(2px) rotate(-135deg); }
.az-kurz { grid-column: 2 / 5; font-size: .84rem; color: var(--grau-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-kurz .kennung, .aufgabe-meta .kennung { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
details.az[open] > .az-zeile .az-kurz { display: none; }
.az-inhalt { padding: 0 0 .75rem calc(1.35rem + .6rem); }
.az-werkzeug { display: flex; gap: .3rem; justify-content: flex-end; margin-bottom: .2rem; }
.az-ikon { width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; flex: none; box-sizing: border-box; }
.az-ikon.offen  { border: 2px solid var(--grau-300); }
.az-ikon.eigen  { border: 2px solid var(--akzent); background: #fff; }
.az-ikon.ok     { background: var(--gruen); color: #fff; }
.az-ikon.ueber  { background: var(--rot); color: #fff; }
.az-ikon.wartet { border: 2px dashed var(--gelb); }
details.az { border-bottom: 1px solid var(--grau-100); }
details.az:last-child { border-bottom: 0; }
details.az[open] { background: var(--grau-50); margin: 0 -1.1rem; padding: 0 1.1rem; }
details.az.eigen[open] { background: var(--akzent-hell); }
details.az[open] + details.az, details.az + details.az[open] { border-top: 0; }
.az-erledigte { margin-top: .4rem; }
.az-erledigte > summary { cursor: pointer; font-weight: 700; color: var(--grau-700); padding: .55rem 0; font-size: .92rem; }
.az-erledigte > summary::marker { color: var(--grau-500); }
.az-erledigte details.az .az-titel { color: var(--grau-700); }
.az-gruppe { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grau-500); font-weight: 700; margin: .7rem 0 0; }
.fuer-dich { margin: .2rem 0 .4rem; border: 1.5px solid var(--akzent); border-radius: var(--radius); overflow: hidden; background: #fff; }
.fuer-dich-kopf { background: var(--akzent); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .3rem .75rem; display: flex; justify-content: space-between; }
.fuer-dich details.az { padding: 0 .75rem; }
.fuer-dich details.az[open] { margin: 0; }
.fuer-dich details.az + details.az { border-top: 1px solid #f6d3bd; }
@media (prefers-reduced-motion: reduce) { .az-pfeil::before { transition: none; } }

/* Nach oben (seite.js): nur Desktop, dezent unten rechts */
.nach-oben { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .nach-oben { display: grid; place-items: center; position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
    width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--grau-300); background: rgba(255,255,255,.92);
    color: var(--grau-700); box-shadow: var(--schatten); cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
  .nach-oben.sichtbar { opacity: .75; visibility: visible; transform: none; }
  .nach-oben:hover, .nach-oben:focus-visible { opacity: 1; color: var(--akzent); border-color: var(--akzent); }
  .nach-oben:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
  .nach-oben svg { width: 1.15rem; height: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: none; } }
@media print { .nach-oben { display: none !important; } }

/* ---- Schnellzugriff im Vorgang (kuerzel.js): nur Desktop, über "nach oben" ---- */
.kw { display: none; }
@media (min-width: 900px) {
  .kw { display: block; position: fixed; right: 1.25rem; bottom: 4.4rem; z-index: 45; }
  .kw-knopf { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; background: var(--dunkel); color: #fff;
    box-shadow: var(--schatten-hoch); display: grid; place-items: center; cursor: pointer; opacity: .85;
    transition: background .15s, box-shadow .15s, opacity .15s; }
  .kw-knopf svg { width: 1.2rem; height: 1.2rem; }
  .kw:hover .kw-knopf, .kw.offen .kw-knopf, .kw-knopf:focus-visible { opacity: 1; background: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hell), var(--schatten-hoch); }
  .kw-knopf:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 3px; }
  .kw-tipp { position: absolute; right: 3.6rem; bottom: .55rem; white-space: nowrap; background: var(--dunkel); color: #fff;
    font-size: .78rem; padding: .3rem .55rem; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
  .kw:hover:not(.offen) .kw-tipp { opacity: 1; }
  .kw-menue { position: absolute; right: 0; bottom: 3.5rem; width: 20rem; max-height: calc(100vh - 8rem); overflow-y: auto;
    background: #fff; border: 1px solid var(--grau-100); border-radius: var(--radius-gross); box-shadow: var(--schatten-hoch); padding: .45rem; }
  .kw-menue form { margin: 0; }
  .kw-gruppe { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--grau-500); font-weight: 700; padding: .55rem .6rem .25rem; }
  .kw-eintrag { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .6rem; border: 0; border-radius: 8px;
    background: none; font: inherit; font-size: .9rem; color: var(--grau-900); text-align: left; text-decoration: none; cursor: pointer; }
  .kw-eintrag:hover, .kw-eintrag:focus-visible { background: var(--akzent-hell); outline: none; }
  .kw-eintrag:hover .kw-ik, .kw-eintrag:focus-visible .kw-ik { color: var(--akzent); }
  .kw-ik { width: 1.05rem; height: 1.05rem; flex: none; color: var(--grau-500); }
  .kw-eintrag > span:first-of-type { flex: 1; min-width: 0; }
  .kw-eintrag kbd, .schnellsuche kbd { font: 600 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--grau-700); background: var(--grau-50);
    border: 1px solid var(--grau-300); border-bottom-width: 2px; border-radius: 5px; padding: .05rem .35rem; }
  .kw-zahl { font-size: .75rem; color: var(--grau-500); font-variant-numeric: tabular-nums; }
  .kw-trenner { height: 1px; background: var(--grau-100); margin: .3rem .4rem; }
  .kw-extern { display: flex; gap: .3rem; padding: .1rem .6rem .4rem 2.25rem; }
  .kw-extern[hidden], .kw-menue[hidden] { display: none; }
}
.kw-hinweis { position: fixed; right: 1.25rem; bottom: 8rem; z-index: 96; background: var(--dunkel); color: #fff; font-size: .85rem;
  padding: .45rem .75rem; border-radius: 8px; box-shadow: var(--schatten-hoch); transition: opacity .4s; }
.kw-hinweis.weg { opacity: 0; }
/* Bestätigung nach dem Seitenwechsel (Status per Klick): blendet sich von selbst aus */
.kw-hinweis-fest { animation: kw-hinweis 4s ease forwards; pointer-events: none; }
@keyframes kw-hinweis { 0% { opacity: 0; transform: translateY(6px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .kw-hinweis-fest { animation: kw-hinweis-ruhig 4s steps(1) forwards; } }
@keyframes kw-hinweis-ruhig { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* Schnellsuche (Strg+K) */
.schnellsuche { position: fixed; inset: 0; z-index: 97; background: rgba(17,35,55,.35); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.schnellsuche[hidden] { display: none; }
.schnellsuche-feld { width: min(40rem, calc(100vw - 2rem)); background: #fff; border-radius: var(--radius-gross); box-shadow: var(--schatten-hoch); overflow: hidden; }
.schnellsuche-feld input { width: 100%; border: 0; border-bottom: 1px solid var(--grau-100); padding: 1rem 1.1rem; font: inherit; font-size: 1.05rem; outline: none; border-radius: 0; }
.schnellsuche-liste { list-style: none; margin: 0; padding: .35rem; max-height: 55vh; overflow-y: auto; }
.schnellsuche-liste li a { display: block; padding: .5rem .7rem; border-radius: 8px; color: var(--grau-900); text-decoration: none; }
.schnellsuche-liste li a b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schnellsuche-liste li a span { font-size: .82rem; color: var(--grau-500); }
.schnellsuche-liste li.gewaehlt a { background: var(--akzent-hell); }
.schnellsuche-liste li.leer { padding: .8rem .7rem; color: var(--grau-500); font-size: .9rem; }
.schnellsuche-fuss { display: flex; gap: 1rem; padding: .5rem 1rem; border-top: 1px solid var(--grau-100); font-size: .78rem; color: var(--grau-500); }
.schnellsuche-fuss kbd { margin-right: .2rem; }

/* Vorgangsliste: per Tastatur gewählte Zeile */
tr.vorgangszeile.tastatur > td { background: var(--akzent-hell); }
tr.vorgangszeile.tastatur > td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }
@media (prefers-reduced-motion: reduce) { .kw-knopf, .kw-tipp, .kw-hinweis { transition: none; } }
@media print { .kw, .schnellsuche, .kw-hinweis { display: none !important; } }

/* „Vorgänge ansehen“ an Auswertungskacheln (4.11.2026) */
.vg-fenster { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(1200px, 96vw); max-height: 94vh; padding: 0; border: 0; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.vg-fenster::backdrop { background: rgba(15, 25, 40, .45); }
.vg-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--grau-100); position: sticky; top: 0; background: #fff; z-index: 1; }
.vg-kopf h2 { margin: 0; font-size: 1.1rem; }
.vg-inhalt { padding: .8rem 1.2rem 1.2rem; overflow: auto; max-height: calc(94vh - 4rem); }
.vg-satz { color: var(--grau-500); font-size: .9rem; margin: 0 0 .6rem; line-height: 1.5; }
.vg-gruppe { border: 1px solid var(--grau-100); border-radius: 8px; margin: .5rem 0; }
.vg-gruppe > summary { cursor: pointer; padding: .55rem .8rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vg-zahlen { color: var(--grau-500); font-size: .9rem; }
.vg-tabelle { margin: 0; font-size: .9rem; }
.vg-ausreisser td { background: #fdecea; }
.vg-ausreisser-muster { background: #fdecea; padding: 0 .3rem; border-radius: 3px; }
/* „i“ an den Auswertungskacheln: nach rechts aufklappen (der Titel steht links), Schrift normal */
.kachel-rechnung.info-knopf .info-text { left: -1rem; right: auto; width: min(26rem, 80vw); font-size: .86rem; }
/* Fenster „Vorgänge ansehen“: oben die Kachel selbst, darunter die Liste (Wunsch 4.11.2026) */
.vg-auswertung { border: 1px solid var(--grau-100); border-radius: 10px; padding: .6rem; margin-bottom: 1rem; background: var(--grau-50, #fafbfc); }
.vg-auswertung:empty { display: none; }
.vg-auswertung .diagrammfeld svg { max-height: 46vh; width: 100%; height: auto; }
.vg-zwischen { margin: .4rem 0 .5rem; font-size: 1rem; }

/* Rotes Warnfenster (z. B. Vertraulichkeit aufheben, 5.11.2026) */
.warnfenster { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(560px, 94vw); padding: 0; border: 2px solid #c62828; border-radius: 12px; box-shadow: 0 20px 60px rgba(120, 0, 0, .35); }
.warnfenster::backdrop { background: rgba(60, 0, 0, .45); }
.warnfenster-kopf { display: flex; align-items: center; gap: .6rem; background: #c62828; color: #fff; padding: .8rem 1.1rem; }
.warnfenster-kopf h2 { margin: 0; font-size: 1.1rem; color: #fff; }
.warnfenster-kopf span { font-size: 1.4rem; }
.warnfenster-inhalt { padding: 1rem 1.1rem; line-height: 1.5; }
.warnfenster-inhalt ul { margin: .4rem 0 .8rem 1.2rem; padding: 0; }
.warnfenster-inhalt textarea { width: 100%; margin-top: .3rem; }
.warnfenster-knoepfe { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; padding: .8rem 1.1rem; background: #fdecea; border-top: 1px solid #f3c3bf; }
.knopf.gefahr { background: #c62828; border-color: #c62828; color: #fff; }
.knopf.gefahr:hover { background: #a91f1f; }

/* Auswertung: Kachel lädt nach (6.11.2026) */
.kachel-laedt { display: flex; align-items: center; gap: .6rem; min-height: 9rem; justify-content: center; color: var(--grau-500); font-size: .92rem; }
.kachel-laedt .drehen, .kachel-laedt-kreis { width: 1.2rem; height: 1.2rem; border: 2.5px solid var(--grau-200); border-top-color: var(--akzent); border-radius: 50%; display: inline-block; animation: kachel-dreht .8s linear infinite; }
@keyframes kachel-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kachel-laedt .drehen { animation-duration: 2.4s; } }
.kachelfeld.laedt .karte-kopf h2 { color: var(--grau-500); }

/* Vorgangsseite – neue Anordnung zum Vergleich (Entwurf 6.11.2026) */
.gitter-zwei.ansicht-neu:not(.an-fertig) { visibility: hidden; }
.gitter-zwei.ansicht-neu {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .95fr);
  grid-template-areas: "links mitte rechts" "unten unten rechts";
}
.ansicht-neu .an-links  { grid-area: links; }
.ansicht-neu .an-mitte  { grid-area: mitte; }
.ansicht-neu .an-rechts { grid-area: rechts; }
.ansicht-neu .an-unten  { grid-area: unten; }
.ansicht-neu .an-links, .ansicht-neu .an-mitte, .ansicht-neu .an-unten { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ansicht-neu .an-links > .karte, .ansicht-neu .an-mitte > .karte, .ansicht-neu .an-unten > .karte { margin: 0; }
/* Notizen und Mails als einzelne Karten */
.ansicht-neu .an-notizen .karte-inhalt, .ansicht-neu .an-mitte #verlauf > .karte-inhalt { display: flex; flex-direction: column; gap: .7rem; }
.ansicht-neu .an-notizen article.nachricht, .ansicht-neu .an-mitte article.nachricht {
  margin: 0; border: 1px solid var(--grau-200); border-left-width: 4px; border-radius: 8px; padding: .7rem .85rem;
}
.ansicht-neu .an-notizen article.nachricht { background: #fbfbf8; border-left-color: var(--grau-300); border-left-style: solid; }
.ansicht-neu .tagestrenner { margin: .2rem 0 -.2rem; }
@media (max-width: 1300px) {
  .gitter-zwei.ansicht-neu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "links mitte" "unten unten" "rechts rechts"; }
}
@media (max-width: 1000px) {
  .gitter-zwei.ansicht-neu { grid-template-columns: 1fr; grid-template-areas: "links" "mitte" "unten" "rechts"; }
}
.ansicht-neu .karte.an-zu > :not(.an-oeffnen) { display: none; }
.ansicht-neu .karte:not(.an-zu) > .an-oeffnen { display: none; }
.ansicht-neu .karte.an-zu { padding: 0; }
.ansicht-neu .an-oeffnen { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .9rem 1.1rem;
  font: inherit; font-weight: 650; color: var(--akzent, #1d4ed8); cursor: pointer; border-radius: inherit; }
.ansicht-neu .an-oeffnen:hover { background: var(--grau-50, #f6f7f9); }
.ansicht-neu .an-oeffnen:focus-visible { outline: 2px solid var(--akzent, #1d4ed8); outline-offset: -2px; }
.ansicht-neu .an-unten { flex-direction: row; flex-wrap: wrap; }
.ansicht-neu .an-unten > .karte { flex: 1 1 18rem; }
.ansicht-neu .an-unten > .karte:not(.an-zu) { flex-basis: 100%; }
.ansicht-neu #verlauf .karte-kopf h2 { white-space: nowrap; }
.ansicht-neu #verlauf .karte-kopf a[href="#letzter-beitrag"] { display: none; }
.gitter-zwei.ansicht-neu { grid-template-rows: auto 1fr; }
.ansicht-neu .an-unten { align-self: start; }

/* Fokus in Mails + Filter im Verlauf (Test 6.11.2026) */
/* Zugeklappt: nur Absender, Betreff und die Fokus-Zeilen – Empfänger, Sichtbarkeit, Knöpfe erst aufgeklappt */
article.nachricht.fokus-zu .nachrichtentext, article.nachricht.fokus-zu .aufklapper, article.nachricht.fokus-zu details.mailverlauf,
article.nachricht.fokus-zu .sichtbarkeit, article.nachricht.fokus-zu .empfaenger, article.nachricht.fokus-zu .fokus-kopf { display: none; }
article.nachricht:not(.fokus-zu) .fokus-stelle, article.nachricht:not(.fokus-zu) .fokus-luecke, article.nachricht:not(.fokus-zu) .fokus-mehr { display: none; }
.fokus-auszug { border-left: 3px solid #e8a25c; padding: .15rem 0 .15rem .75rem; margin: .45rem 0 .2rem; }
article.nachricht:not(.fokus-zu) .fokus-auszug { border-left: 0; padding: 0; margin: .3rem 0; }
.fokus-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fokus-etikett { font-weight: 700; color: #b45309; font-size: .85rem; margin-right: auto; }
.fokus-stelle { white-space: pre-wrap; line-height: 1.5; }
.fokus-luecke { color: var(--grau-500); font-size: .8rem; line-height: 1; letter-spacing: .25em; }
.fokus-mehr { display: block; margin: .35rem 0 0 auto; background: none; border: 0; padding: .1rem 0; font: inherit; font-size: .82rem;
  color: var(--grau-500); cursor: pointer; }
.fokus-mehr:hover { color: #b45309; text-decoration: underline; }
.fokus-mehr:focus-visible { outline: 2px solid #e8a25c; outline-offset: 2px; }
/* „Für wen sichtbar“ rechtsbündig – hebt sich so vom Mailtext ab (Test) */
#verlauf.fokustest .sichtbarkeit { border-top: 0; padding-top: .2rem; }
#verlauf.fokustest .sichtbarkeit > summary { justify-content: flex-end; }
#verlauf.fokustest .sichtbarkeitsform { margin-left: auto; max-width: 30rem; }
.marker-pop .fokus-start { margin-left: .35rem; }
.verlauf-filter { display: inline-flex; border: 1px solid var(--grau-300); border-radius: 8px; overflow: hidden; margin: 0 0 .8rem; flex-wrap: wrap; }
.verlauf-filter button { background: var(--weiss, #fff); border: 0; border-right: 1px solid var(--grau-300); padding: .4rem .9rem; font: inherit; font-size: .9rem; cursor: pointer; color: inherit; }
.verlauf-filter button:last-child { border-right: 0; }
.verlauf-filter button[aria-pressed="true"] { background: #fdf0e3; color: #b45309; font-weight: 650; box-shadow: inset 0 0 0 1.5px #e8a25c; }
.verlauf-filter button:focus-visible { outline: 2px solid #e8a25c; outline-offset: -2px; }
#verlauf .filter-weg { display: none !important; }