/* ---- Schrift ----

   IBM Plex wird MITGELIEFERT und nicht nachgeladen. Vorher nannte die CSS
   "IBM Plex Sans", ohne dass eine Datei im Projekt lag — und weil die
   Content-Security-Policy fremde Hosts verbietet (font-src 'self'), fiel jeder
   Browser still auf system-ui zurück. Deklariert war Plex, zu sehen war Segoe UI.
   Beides passt jetzt zusammen.

   Die Sans ist eine VARIABLE Schrift: eine Datei bedient den ganzen
   Gewichtsbereich, deshalb "font-weight: 100 700" und nicht drei Dateien für
   drei Schnitte. 45 KB für alles statt etwa 20 KB je Schnitt.

   font-display: swap — der Text ist sofort in der Systemschrift lesbar und
   wechselt, sobald Plex da ist. Die Alternative wäre ein kurzer Moment mit
   unsichtbarem Text; auf der Anmeldemaske ist das der falsche erste Eindruck.

   Kein unicode-range: Mitgeliefert ist die Teilmenge "latin" (Umlaute und ß
   inbegriffen). Trifft ein Zeichen darauf nicht zu — ein türkisches ğ etwa —,
   nimmt der Browser dafür von selbst die Ersatzschrift. Ein Bereich müsste
   genau gepflegt werden und brächte hier nichts.

   Lizenz: SIL Open Font License. Sie verlangt, dass der Lizenztext
   mitgeliefert wird — er liegt als schrift/IBM-Plex-OFL.txt daneben und darf
   nicht entfernt werden. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../schrift/ibm-plex-sans-var.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../schrift/ibm-plex-mono-400.woff2") format("woff2");
}

/* ---- Farben und Maße: aus dem Oberflächenentwurf übernommen ----

   Bis SC-11 stand hier „vorläufig … hier reicht, dass es nach EWV aussieht".
   Das ist jetzt eingelöst: Die Werte sind die des gemeinsam erarbeiteten
   Entwurfs, nicht meine Annäherung daran. Wo der Entwurf zwei Fassungen
   enthält, gilt die spätere — helle Kopfzeile mit Logo, Pillenform, #424242
   als Anthrazit.

   Die NAMEN bleiben deutsch, obwohl der Entwurf --ink und --surface sagt. Ein
   Stilblatt, in dem die Hälfte englisch heißt, ist beim Suchen teurer als die
   Übersetzung einmal kostet. Die Zuordnung steht je Zeile daneben.

   Drei Ebenen bei Schrift und Fläche, nicht zwei: Der Entwurf braucht sie für
   Tabellenköpfe, ruhige Knöpfe und Nebenangaben. Mit nur „Schrift" und „leise"
   endet jede zweite Regel bei einem Zwischenwert, den niemand wiederfindet. */

:root {
  /* Markenfarben. Fest, nicht themenabhängig — sie sind die Marke. */
  --anthrazit:      #424242;   /* --ewv-anthrazit, Wortmarke im Logo */
  --blau:           #66B8DC;   /* --ewv-blau, Kennzeichen und Aktivmerkmal */
  --rot:            #BC091B;   /* --ewv-rot, die eine hervorgehobene Handlung */

  /* Flächen, von hinten nach vorn. */
  --grund:          #F4F7F9;   /* --ground */
  --flaeche:        #FFFFFF;   /* --surface, Karten und Kopfzeile */
  --flaeche-2:      #EDF2F6;   /* --surface-2, ruhige Knöpfe, Zeilenwechsel */
  --flaeche-3:      #DFE7ED;   /* --surface-3, derselbe Knopf unter der Maus */

  --linie:          #DCE4EA;   /* --line */
  --linie-stark:    #BCC6CE;   /* --line-strong, Knopfkanten */

  /* Schrift, von kräftig nach leise. */
  --schrift:        #2A2B2E;   /* --ink */
  --schrift-2:      #4C5054;   /* --ink-2, Beschriftungen und ruhige Knöpfe */
  --leise:          #71767A;   /* --ink-3, Nebenangaben */
  --leiser:         #9AA0A4;   /* --ink-4, Platzhalter */

  /* Akzent: das dunklere Blau. Das EWV-Blau ist ein Kennzeichen und auf Weiß
     zu hell für Text — 66B8DC auf FFFFFF trägt keinen Kontrastwert, der für
     Fließtext genügt. Der Entwurf nennt es --brand; hier „Akzent", weil
     „Marke" schon die Wortmarke im Kopf bezeichnet. */
  --akzent:         #2C7CA8;   /* --brand, Verweise und Zustände */
  --akzent-2:       #3A93C4;   /* --brand-2, unter der Maus */
  --akzent-sanft:   #E8F4FB;   /* --brand-soft, Fläche hinter Akzenttext */
  --akzent-linie:   #A9DAF0;   /* --brand-line */

  --gruen:          #276B45;
  --marine:         #1D4E77;   /* an die Entwicklung uebergeben: dunkler als der Akzent */
  --gruen-sanft:    #E0EFE6;
  --gelb:           #8A5B08;
  --gelb-sanft:     #FBEED4;
  --warnschrift:    #BC091B;   /* Text-Rot; hellt im Dunkeln auf */
  --rot-sanft:      #FBE6E8;
  --grau-sanft:     #E9EEF2;

  /* Die Wortmarke im Logo: hell anthrazit, dunkel fast weiss — wie --logo-ink
     im Entwurf. Die Kennzeichen (blau, rot) bleiben in beiden Themen gleich. */
  --logo-schrift: #424242;

  /* Das Punktraster des Entwurfs, EWV-Blau. Kraeftiger als dort (.62 statt .5)
     — Rueckmeldung Sebi: "Hintergrund darf etwas markanter sein". */
  --punkt: rgba(102, 184, 220, .62);

  /* Pillenform wie auf der Website. 100px und nicht 999px: bei sehr hohen
     Elementen — einer Karte etwa — würde 999px zur Kapsel, 100px bleibt eine
     abgerundete Ecke. Der Entwurf setzt genau deshalb 100. */
  --pille: 100px;

  --schatten: 0 1px 1px rgba(42, 43, 46, .05), 0 10px 26px -20px rgba(42, 43, 46, .5);
}

/* ---- Dunkel — die Werte aus dem Oberflächenentwurf ----

   Zwei Blöcke mit demselben Inhalt, und beide sind nötig:

     * prefers-color-scheme greift, wenn KEINE Wahl getroffen ist ("System").
       Der Wächter :not([data-theme="light"]) sorgt dafür, dass eine bewusste
       Wahl "Hell" auch auf einem dunklen System hell bleibt.
     * [data-theme="dark"] greift bei der bewussten Wahl "Dunkel" — auch auf
       einem hellen System.

   Das Attribut schreibt der Rahmen beim Ausliefern aus dem Cookie
   "darstellung" (gesetzt unter /Einstellungen). Kein Skript, kein Aufblitzen
   der falschen Farbe.

   Die Markenfarben (--anthrazit, --blau, --rot) werden bewusst NICHT
   umdefiniert: Sie sind die Marke. Nur --rot der Meldungen wäre auf dunklem
   Grund zu dunkel — dafür steht im Entwurf ein aufgehelltes Rot, das hier als
   eigener Wert der Flächenfarben mitkommt. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund:          #15171A;
    --flaeche:        #1D2024;
    --flaeche-2:      #24282D;
    --flaeche-3:      #2F343A;
    --linie:          #2E343A;
    --linie-stark:    #454C53;
    --schrift:        #E9ECEF;
    --schrift-2:      #BCC2C7;
    --leise:          #ADB3B8;   /* aufgehellt: #8C9297 lag auf --flaeche unter 4,5:1 */
    --leiser:         #949A9F;
    --akzent:         #66B8DC;
    --akzent-2:       #8ACBE8;
    --akzent-sanft:   #12303D;
    --akzent-linie:   #2B5C73;
    --gruen:          #5FAF7E;
    --marine:         #4A86B8;
    --gruen-sanft:    #173023;
    --gelb:           #D9A544;
    --gelb-sanft:     #382B13;
    --warnschrift:    #E8737F;
    --rot-sanft:      #3A1A1E;
    --grau-sanft:     #272C31;
    --logo-schrift:   #E9ECEF;
    --punkt: rgba(102, 184, 220, .28);
    --schatten: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 30px -22px rgba(0, 0, 0, 1);
  }
}

:root[data-theme="dark"] {
  --grund:          #15171A;
  --flaeche:        #1D2024;
  --flaeche-2:      #24282D;
  --flaeche-3:      #2F343A;
  --linie:          #2E343A;
  --linie-stark:    #454C53;
  --schrift:        #E9ECEF;
  --schrift-2:      #BCC2C7;
  --leise:          #ADB3B8;
  --leiser:         #949A9F;
  --akzent:         #66B8DC;
  --akzent-2:       #8ACBE8;
  --akzent-sanft:   #12303D;
  --akzent-linie:   #2B5C73;
  --gruen:          #5FAF7E;
  --marine:         #4A86B8;
  --gruen-sanft:    #173023;
  --gelb:           #D9A544;
  --gelb-sanft:     #382B13;
  --warnschrift:    #E8737F;
  --rot-sanft:      #3A1A1E;
  --grau-sanft:     #272C31;
  --logo-schrift:   #E9ECEF;
  --punkt: rgba(102, 184, 220, .28);
  --schatten: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 30px -22px rgba(0, 0, 0, 1);
}

/* Die Wortmarke im Logo folgt dem Thema; die Kennzeichen behalten die Marke. */
.ewvlogo .wort { fill: var(--logo-schrift); }
.ewvlogo .zeichen-blau { fill: var(--blau); }
.ewvlogo .zeichen-rot { fill: var(--rot); }

* { box-sizing: border-box; }

/* ---- Der Hintergrund ----

   Das Punktraster aus dem Entwurf: EWV-Blau, 15px Raster, und es verläuft von
   oben rechts nach unten links ins Nichts. Es ist der Unterschied zwischen
   „Hintergrundfarbe" und „gestaltet" — und es ist markenbezogen, ohne ein Bild
   zu brauchen: Die Content-Security-Policy verbietet fremde Hosts, und ein
   Raster trägt jede Auflösung ohne Zuschneiden.

   ZWEI Schichten, und die Reihenfolge ist der Kniff. Die erste Angabe liegt
   VORN:

     1. ein Verlauf in der Grundfarbe, oben rechts durchsichtig und nach außen
        deckend — er nimmt die Punkte wieder weg,
     2. das Raster selbst.

   Der Entwurf löst dasselbe mit mask-image. Hier steht es als deckende Schicht,
   weil eine Maske auf <body> auch den Inhalt maskiert: Die Karte darüber würde
   mit ausblenden. Ein Pseudoelement mit position:fixed wäre der andere Weg —
   das braucht dann aber z-index-Sorgfalt gegenüber jeder Karte. Zwei
   Verlaufsschichten haben diese Kante nicht.

   background-attachment: fixed, damit das Raster beim Rollen steht. Andernfalls
   wandert es mit und wirkt wie eine gemusterte Tapete. */

body {
  margin: 0;
  padding: 0;
  color: var(--schrift);
  font-family: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;

  background-color: var(--grund);
  background-image:
    radial-gradient(130% 115% at 74% -20%, rgba(0, 0, 0, 0) 0%, var(--grund) 82%),
    radial-gradient(circle, var(--punkt) 1.25px, transparent 1.55px);
  background-size: auto, 15px 15px;
  background-attachment: fixed, fixed;
}

/* Der Inhalt als Karte vor dem Raster — .card im Entwurf. width statt
   body-padding, weil die Kopfleiste bis an die Fensterkanten reichen soll und
   ein Innenabstand am body sie einruecken wuerde. */
main {
  /* 1140 statt 900: Der Entwurf arbeitet zweispaltig — Inhalt links, Leiste
     rechts —, und dafuer ist 900 zu schmal. Auf Seiten ohne Leiste begrenzen
     die Textblöcke sich selbst. */
  width: min(1140px, calc(100% - 32px));
  margin: 26px auto 44px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: var(--schatten);
  padding: 28px 30px 32px;
}

.marke {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--blau);
  margin-bottom: 22px;
}
.marke-name    { font-size: 19px; color: var(--logo-schrift); letter-spacing: .01em; }
.marke-name b  { color: var(--logo-schrift); }
.marke-fassung { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 12px; color: var(--leise); }

h1 { margin: 0 0 10px; font-size: 25px; font-weight: 600; }

/* Seitenkopf: Titel links, eine Handlung oder eine Angabe rechts. Ersetzt den
   .marke-Block, den jede Seite vorher mitbrachte — die Wortmarke steht seit
   SC-10 in der Leiste, und zweimal derselbe Name auf einem Bildschirm ist
   Wiederholung, nicht Wiedererkennung. Der blaue Strich bleibt: Er trennt Kopf
   von Inhalt und ist das eine Markenmerkmal, das hier etwas leistet. */
.seite-kopf { display: flex; align-items: baseline; justify-content: space-between;
              gap: 14px; padding-bottom: 12px; margin-bottom: 20px;
              border-bottom: 3px solid var(--blau); }
.seite-kopf h1 { margin: 0; }
.seite-kopf .klein { margin: 0; }
.fuehrung { margin: 0 0 22px; color: var(--leise); }

.stand { display: grid; grid-template-columns: 170px 1fr; gap: 9px 16px; margin: 0 0 22px; }
.stand dt { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
            font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
            color: var(--leise); padding-top: 4px; }
.stand dd { margin: 0; }

.mono     { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.gut      { color: var(--gruen); font-weight: 600; }
.schlecht { color: var(--warnschrift);   font-weight: 600; }
.klein    { font-size: 12.5px; color: var(--leise); }

/* <b> und <strong> auf 600 statt der Vorgabe 700: Die variable Sans traegt
   bis 700, aber 600 ist der Schnitt, den die Gestaltung sonst ueberall nutzt —
   und zwei verschiedene Fettungen auf einer Seite sehen nach Versehen aus. */
b, strong { font-weight: 600; }

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

/* ---- Anmeldung ---- */

/* Die Anmeldemaske steht mittig und ohne Kopfleiste: Es gibt vor der Anmeldung
   nichts zu navigieren. Aufbau von oben nach unten: Logo, Name, Karte, Absender.

   HELL und nicht dunkel, und das ist keine Geschmacksfrage: Der EWV-Schriftzug
   im Logo ist Anthrazit. Auf dunklem Grund verschwindet er. Die
   Alternative wäre eine Negativfassung des Logos — die gibt es aber nicht, und
   eine selbst erzeugte wäre ein Eingriff in die Wortmarke. Also hellt der
   Hintergrund auf, und das Logo bleibt unangetastet.

   Ein Farbverlauf und kein Bild: Die Content-Security-Policy erlaubt keine
   fremden Hosts, es gibt nichts zu laden, und ein Verlauf trägt jede Auflösung
   vom Telefon bis zum 4K-Schirm ohne Zuschneiden. */
body.mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 100vh;
  padding: 40px 24px;

  /* Rückfallfarbe zuerst, falls ein Browser color-mix nicht kennt. Deutlich
     getönt und nicht weiß — eine weiße Fläche wirkt unfertig. */
  background-color: #D8E4EE;

  /* Aufbau in Schichten, von oben nach unten gelesen. Die ERSTE Angabe liegt
     vorn. Der Kniff steckt in Schicht 1: ein heller Hof in der Mitte. Er hält
     den Bereich, in dem Logo und Karte stehen, hell genug für den
     Anthrazit-Schriftzug — während die Ränder satt bleiben dürfen. Ohne ihn
     müsste die ganze Fläche blass sein, damit das Logo lesbar ist. */
  background-image:
    radial-gradient(64% 54% at 50% 40%, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, 0) 72%),
    /* Blaues Licht von oben links, jetzt kräftiger. */
    radial-gradient(105% 80% at 4% -12%, color-mix(in srgb, var(--blau) 62%, transparent) 0%, transparent 62%),
    /* Zweites, kleineres Blau oben rechts — zwei versetzte Lichtquellen statt
       einer ergeben die weiche, moderne Verlaufsfläche und nicht den Eindruck
       eines Farbkeils. */
    radial-gradient(58% 46% at 92% 4%, color-mix(in srgb, var(--blau) 38%, transparent) 0%, transparent 66%),
    /* Anthrazit unten für Tiefe. Der Grund, warum die Fläche nicht kitschig
       wirkt: Ohne einen dunklen Anteil bleibt jeder Pastellverlauf beliebig. */
    radial-gradient(90% 62% at 18% 118%, color-mix(in srgb, var(--anthrazit) 34%, transparent) 0%, transparent 64%),
    /* Ein Hauch Rot unten rechts als Gegenpol. Bewusst kaum sichtbar: Rot ist
       im Haus die Warnfarbe, hier darf es nur wärmen. */
    radial-gradient(70% 60% at 108% 106%, color-mix(in srgb, var(--rot) 14%, transparent) 0%, transparent 58%),
    linear-gradient(166deg, #EDF4F9 0%, #D8E4EE 55%, #C3D4E1 100%);

  /* Beim Rollen stehen bleiben, sonst wirkt der Verlauf bei einer langen
     Fehlermeldung zerrissen. */
  background-attachment: fixed;
}

/* Feines Punktraster über der Fläche. Es ist der Unterschied zwischen „Verlauf"
   und „gestaltet": Der Blick bekommt etwas, worauf er scharf stellen kann.
   Sehr schwach — auf einem schlechten Schirm unsichtbar, auf einem guten
   angenehm. Als Pseudoelement, weil es eine eigene background-size braucht,
   und ohne Mausfang. */
body.mitte::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--anthrazit) 13%, transparent) 1px, transparent 1.2px);
  background-size: 24px 24px;
  /* Zur Mitte hin ausblenden, damit das Raster nicht durch die Karte und den
     Schriftzug spricht. */
  mask-image: radial-gradient(70% 60% at 50% 45%, transparent 0%, black 78%);
}

/* ---- Logo und Name über der Karte ---- */

.anmelde-marke { text-align: center; }

/* Breite in Prozent mit Obergrenze: auf dem Telefon schrumpft es mit, auf dem
   großen Schirm wird es nicht plakatgroß. height:auto, damit das Seitenverhältnis
   der SVG gilt und nicht die width/height-Angaben im Bildaufruf. */
.anmelde-marke .ewvlogo {
  width: min(290px, 70vw);
  height: auto;
  display: block;
  margin: 0 auto 14px;
}

/* Der Name der Anwendung, nicht des Hauses — das steht im Logo darüber.
   Gesperrt und in Versalien, damit er als Beschriftung wirkt und nicht mit dem
   Logo um die erste Geige spielt. */
.anmelde-untertitel {
  margin: 0;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--leise);
}

.anmelde-fuss {
  margin: 0;
  font-size: 12.5px;
  color: var(--leise);
}

/* ---- Die Karte ---- */

body.mitte main {
  max-width: 400px;
  width: 100%;

  /* Zwei Schatten: ein weiter für die Tiefe, ein enger für die Kante. Ein
     einzelner großer Schatten sieht wattig aus. Auf hellem Grund deutlich
     schwächer als auf dunklem — sonst wirkt die Karte schmutzig. */
  box-shadow:
    0 14px 38px -14px rgba(31, 41, 51, .22),
    0 1px 3px rgba(31, 41, 51, .09);
}

/* Kopfzeile in der Karte: Überschrift links, Fassung rechts, blaue Linie
   darunter — dieselbe Sprache wie .marke auf den übrigen Seiten, aber ohne
   Wortmarke. */
.karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--blau);
  margin-bottom: 20px;
}
.karte-kopf h1 { margin: 0; font-size: 21px; }

.feld { display: block; margin: 0 0 16px; }
.feld > span { display: block; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
               font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
               color: var(--leise); margin-bottom: 5px; }
.feld input { width: 100%; padding: 9px 11px; font-family: inherit; font-size: 15px;
              color: var(--schrift); background: var(--flaeche);
              border: 1px solid var(--linie); border-radius: 7px; }
.feld input:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }

.knopf { width: 100%; padding: 10px 16px; font-family: inherit; font-size: 15px; font-weight: 600;
         color: #fff; background: var(--rot); border: 0; border-radius: 999px; cursor: pointer; }
.knopf:hover { filter: brightness(1.08); }

.meldung { margin: 0 0 18px; padding: 9px 12px; border-radius: 7px; font-size: 14px; }
.meldung.schlecht { color: var(--warnschrift); background: var(--rot-sanft);
                    border: 1px solid color-mix(in srgb, var(--rot) 30%, transparent); }
/* --anthrazit ist die Markenfarbe und in BEIDEN Darstellungen dasselbe
   dunkle Grau. Im Dunkelmodus stand der Hinweistext damit dunkelgrau auf
   dunklem Grund -- im Kundenportal, wo fast nur Hinweise stehen, war die
   halbe Seite unlesbar. Hinweise nehmen deshalb die Schriftfarbe des
   Themas; die Markenfarbe bleibt Flaechen und Marke vorbehalten. */
.meldung.hinweis  { color: var(--schrift); background: color-mix(in srgb, var(--blau) 12%, transparent);
                    border: 1px solid color-mix(in srgb, var(--blau) 40%, transparent); }

/* ---- Kopfleiste für Angemeldete ----

   Die .appbar des Entwurfs: volle Breite, weiß, ein Strich unten — die Leiste
   gehört zum Fenster, nicht zur Karte. Vorher war sie auf 900px begrenzt und
   schwebte vor dem Grund; das sah nach Prototyp aus, und der Entwurf tut es
   bewusst anders. Der INHALT der Leiste bleibt auf 1200px gedeckelt, damit die
   Einträge auf einem breiten Schirm nicht an den Rändern kleben. */

.leiste { background: var(--flaeche); border-bottom: 1px solid var(--linie);
          margin: 0 0 0; padding: 0 18px; display: flex; align-items: stretch;
          gap: 4px; flex-wrap: wrap; }

/* Die kombinierte Marke: Logo und Anwendungsname als eine Einheit, rechts durch
   eine Linie vom Rest getrennt — die Trennlinie stammt aus dem Entwurf
   (.appbar .brand hat dort border-right). */
.leiste-marke { display: flex; align-items: center; gap: 11px; padding: 8px 16px 8px 0;
                margin-right: 8px; border-right: 1px solid var(--linie);
                text-decoration: none; }
.leiste-marke .ewvlogo { height: 38px; width: auto; display: block; }

/* Der Anwendungsname in derselben Sprache wie .anmelde-untertitel: gesperrte
   Versalien. Er beschriftet, das Logo führt. */
.leiste-anwendung { font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
                    color: var(--leise); white-space: nowrap; }

.leiste-luecke { flex: 1; }

/* Bereiche als volle Höhe mit Strich unten — .navbtn im Entwurf. Die aktuelle
   Seite ist durch Farbe UND Unterstrich gekennzeichnet, nicht nur durch Farbe:
   sonst ist sie fuer jemanden mit einer Rotschwaeche nicht zu erkennen. */
.leiste-nav { display: flex; gap: 0; flex-wrap: wrap; }
/* Groesser und auffaelliger (Festlegung Sebi). */
.leiste-nav a { display: flex; align-items: center; gap: 8px; padding: 17px 18px;
                font-size: 16px; font-weight: 500; color: var(--schrift-2); text-decoration: none;
                border-bottom: 4px solid transparent; }
.leiste-nav a:hover { color: var(--schrift); background: var(--flaeche-2); }
.leiste-nav a.aktiv { color: var(--akzent); font-weight: 700;
                      background: var(--akzent-sanft);
                      border-bottom-color: var(--blau); }
.leiste-nav .zahnrad { width: 16px; height: 16px; fill: none; stroke: currentColor;
                       stroke-width: 1.7; stroke-linecap: round; }

.person { display: flex; align-items: center; gap: 7px; padding-left: 10px; }

/* Das Kürzel als runde Plakette in EWV-Blau — der .avatar des Entwurfs. */
.person-kurz { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
               font-weight: 700; font-size: 11.5px; color: #1D3542;
               background: var(--blau);
               border-radius: 50%; width: 28px; height: 28px;
               display: grid; place-items: center; letter-spacing: .02em; }
.person-rolle { font-size: 12px; color: var(--leise); }

.leiste-abmelden { margin: 0; display: flex; align-items: center; }
.knopf-flach { font-family: inherit; font-size: 13px; color: var(--leise);
               background: none; border: 0; padding: 2px 4px; cursor: pointer;
               text-decoration: underline; }
.knopf-flach:hover { color: var(--warnschrift); }

/* ---- Vorgänge ---- */

.feld textarea { width: 100%; padding: 9px 11px; font-family: inherit; font-size: 15px;
                 color: var(--schrift); background: var(--flaeche);
                 border: 1px solid var(--linie); border-radius: 7px; resize: vertical; }
.feld select { width: 100%; padding: 9px 11px; font-family: inherit; font-size: 15px;
               color: var(--schrift); background: var(--flaeche);
               border: 1px solid var(--linie); border-radius: 7px; }
.feld textarea:focus, .feld select:focus { outline: 2px solid var(--blau); outline-offset: 1px; }

/* Das Knopfvokabular des Entwurfs, zwei Stufen:

   .knopf-haupt — die EINE hervorgehobene Handlung, EWV-Rot wie der
   Erstellen-Knopf im Entwurf. Vorher war "Vorgang erfassen" anthrazit und ging
   zwischen den ruhigen Knoepfen unter; Rot ist im Haus die Farbe fuer genau
   eine Handlung je Bildschirm, und mehr als eine davon darf es nicht geben.

   .knopf-klein — der ruhige Arbeitsknopf, die .tb des Entwurfs: helle Flaeche,
   sichtbare Kante, dunkle Schrift. Der vorherige anthrazitfarbene Block machte
   aus fuenf Knoepfen auf einer Seite fuenf Hervorhebungen — also keine. */
.knopf-haupt { display: inline-block; padding: 7px 20px; font-family: inherit;
               font-size: 14px; font-weight: 600; letter-spacing: .01em;
               color: #fff; background: var(--rot); border: 0;
               border-radius: var(--pille); cursor: pointer; text-decoration: none; }
.knopf-haupt:hover { filter: brightness(1.1); }

.knopf-klein { display: inline-block; padding: 5px 14px; font-family: inherit;
               font-size: 13.5px; font-weight: 400;
               color: var(--schrift-2); background: var(--flaeche-2);
               border: 1px solid var(--linie-stark); border-radius: var(--pille);
               cursor: pointer; text-decoration: none; }
.knopf-klein:hover { background: var(--flaeche-3); color: var(--schrift); }

/* Kundenwahl: eigenes Formular, damit es ohne Skript auskommt. */
.kundenwahl { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 22px;
              padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
.kundenwahl .feld { flex: 1; margin: 0; }

.projekt-fest { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px;
                background: var(--grund); border: 1px solid var(--linie); border-radius: 7px; }
.projekt-hinweis { color: var(--warnschrift); margin: -10px 0 16px; }

.meldung.gemacht { color: var(--gruen); background: color-mix(in srgb, var(--gruen) 8%, transparent);
                   border: 1px solid color-mix(in srgb, var(--gruen) 30%, transparent); }

.liste { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14.5px; }
.liste th { text-align: left; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
            font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
            color: var(--leise); font-weight: 600; padding: 0 10px 7px 0;
            border-bottom: 2px solid var(--linie); white-space: nowrap; }
.liste td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.liste tr:hover td { background: var(--grund); }

/* ---- Vorgangsansicht ---- */

h2 { margin: 26px 0 10px; font-size: 17px; font-weight: 600;
     padding-bottom: 5px; border-bottom: 1px solid var(--linie); }

/* Die Zeiterfassung ist das Tor zu allem Weiteren — deshalb abgesetzt. */
.block-zeit { margin: 20px 0; padding: 14px 16px; background: var(--grund);
              border: 1px solid var(--linie); border-radius: 10px; }
.block-zeit form { margin: 0; }
.block-zeit .klein { margin: 7px 0 0; }
.laeuft { margin: 0 0 12px; color: var(--gruen); }

.uebergaenge { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.uebergaenge form { margin: 0; }

/* Kunde loeschen: zugeklappt nur ein leiser Verweis, aufgeklappt Text, Pflichthaken
   und der rote Knopf — die eine Handlung in diesem Kasten. */
.kunde-loeschen { margin-top: 8px; }
.kunde-loeschen summary { display: inline; list-style: none; }
.kunde-loeschen summary::-webkit-details-marker { display: none; }
.kunde-loeschen form { display: grid; gap: 8px; justify-items: start; margin-top: 8px;
                       padding: 10px 12px; border-radius: 8px; background: var(--rot-sanft);
                       border: 1px solid color-mix(in srgb, var(--rot) 30%, transparent); }
.kunde-loeschen p { margin: 0; }

.kommentare { list-style: none; margin: 0 0 20px; padding: 0; }
.kommentare li { margin-bottom: 12px; padding: 10px 13px; border-radius: 8px;
                 border: 1px solid var(--linie); background: var(--flaeche); }
/* Intern und an den Kunden sehen verschieden aus — der Unterschied ist folgenreich. */
.kommentare li.intern { background: var(--gelb-sanft); border-color: color-mix(in srgb, var(--gelb) 40%, transparent); }
.kommentare .kopf { display: flex; gap: 10px; align-items: baseline; margin-bottom: 5px; }
/* Dieselbe Regel wie am Beschreibungstext, aus demselben Grund: Ein
   eingefuegter Verweis ist ein Wort und bricht sonst nicht um. */
.kommentare .text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }

/* ---- Weniger Scrollen in den Kommentaren (Festlegung Sebi, 17.08.2026) ----

   Der lange Kommentar: Anriss im Griff, ganzer Text darunter. Das Dreieck des
   Browsers faellt weg -- "mehr lesen" sagt dasselbe in Worten und ist der
   groessere Klickbereich. */
.kommentar-lang > summary { cursor: pointer; list-style: none; }
.kommentar-lang > summary::-webkit-details-marker { display: none; }
.kommentar-lang > summary .text { display: block; }

.mehr-lesen {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--akzent);
  text-decoration: underline;
}

.kommentar-lang[open] > summary .text { display: none; }
.kommentar-lang[open] > summary .mehr-lesen::after { content: " (schliessen)"; }

/* Die aelteren Kommentare als Klapper OBEN: Die Reihenfolge bleibt aeltestes
   zuerst, also stehen die juengsten unten und offen. */
.aeltere-kommentare { margin: 0 0 14px; }
.aeltere-kommentare > summary {
  cursor: pointer;
  padding: 6px 2px;
  font-size: 13px;
  color: var(--leise);
}

.aeltere-kommentare > summary:hover { color: var(--schrift); }
.aeltere-kommentare .kommentare { margin-bottom: 8px; }

/* Zwei Kommentar-Knoepfe statt Auswahlliste (Festlegung Sebi): jeder traegt
   die Farbe, in der der Kommentar nachher in der Liste steht — gelb fuer die
   interne Notiz, akzentblau fuer das, was zum Kunden geht. */
.kommentar-knoepfe { display: flex; gap: 10px; margin: 4px 0 8px; }
.knopf.kommentar-intern { background: var(--gelb-sanft); color: var(--gelb);
                          border: 1px solid color-mix(in srgb, var(--gelb) 40%, transparent); }
.knopf.kommentar-intern:hover { background: color-mix(in srgb, var(--gelb) 22%, var(--gelb-sanft)); }
.knopf.kommentar-kunde { background: var(--akzent); color: #fff; border: 1px solid var(--akzent); }
.knopf.kommentar-kunde:hover { background: var(--akzent-2); }

.verlauf { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.verlauf li { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--linie); }
.verlauf li span:first-child { min-width: 118px; color: var(--leise); }
.verlauf li span:nth-child(2) { min-width: 40px; }

@media (max-width: 700px) {
  .liste th:nth-child(4), .liste td:nth-child(4),
  .liste th:nth-child(5), .liste td:nth-child(5) { display: none; }
  .kundenwahl { flex-direction: column; align-items: stretch; }
}

@media (max-width: 520px) {
  .stand { grid-template-columns: 1fr; gap: 2px 0; }
  .stand dt { padding-top: 10px; }
  .person-rolle { display: none; }
}
/* ---- Posteingang ---- */

.posteingang { list-style: none; margin: 0 0 20px; padding: 0; }
.posteingang li { margin-bottom: 12px; padding: 12px 14px; border-radius: 9px;
                  border: 1px solid var(--linie); background: var(--flaeche);
                  border-left: 4px solid var(--linie); }
/* Die Empfehlung ist an der Kante ablesbar, bevor man liest. */
.posteingang li.e-anbestehenden { border-left-color: var(--gruen); }
.posteingang li.e-neuervorgang  { border-left-color: var(--blau); }
.posteingang li.e-rueckfrage    { border-left-color: var(--rot); }

.posteingang .kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.posteingang .von { font-size: 14px; color: var(--leise); }
.posteingang .betreff { font-weight: 600; margin: 3px 0 7px; }
.posteingang .urteil { display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline; margin-bottom: 9px; }
.posteingang form { margin: 0; }

.marke-e { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
           font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
           padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.marke-e.sicher { color: var(--gruen); background: color-mix(in srgb, var(--gruen) 12%, transparent); }
.marke-e.neu    { color: var(--akzent);     background: color-mix(in srgb, var(--blau) 20%, transparent); }
.marke-e.frage  { color: var(--warnschrift);  background: color-mix(in srgb, var(--rot) 10%, transparent); }

.liste tr.ausgeschieden td { color: var(--leise); }
.liste tr.ausgeschieden td:first-child { text-decoration: line-through; }

/* ---- Sichten und Suche ---- */

/* Gespeicherte Sichten als Reiter. Die gewaehlte steht in der Adresse, damit
   sich eine Liste als Verweis weitergeben laesst. */
.sichten { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px;
           border-bottom: 1px solid var(--linie); }
.sicht { padding: 6px 13px; font-size: 14px; text-decoration: none; color: var(--leise);
         border: 1px solid transparent; border-bottom: 0;
         border-radius: 8px 8px 0 0; margin-bottom: -1px; }
.sicht:hover { color: var(--schrift); background: var(--grund); }
.sicht.aktiv { color: var(--schrift); font-weight: 600; background: var(--flaeche);
               border-color: var(--linie); }

.suchleiste { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 20px; }
.suchleiste .feld { flex: 1; margin: 0; }
.suchleiste .knopf-flach { padding-bottom: 9px; }

@media (max-width: 700px) {
  .suchleiste { flex-wrap: wrap; }
}

/* ---- Filter (Festlegung Sebi, 15.08.2026) ----

   Der Filter gehoert ins Suchformular, steht darin aber in einer EIGENEN
   Zeile: Suchfeld und Knopf bleiben so, wie sie waren -- wer nur sucht, merkt
   vom Filter nichts ausser einer schmalen Zeile darunter. */

.suchleiste { flex-wrap: wrap; }
.filterblock { flex: 0 0 100%; margin-top: 4px; }

.filterblock > summary {
  cursor: pointer;
  font-size: .9rem;
  color: var(--leise);
  padding: 4px 0;
  user-select: none;
}

.filterblock[open] > summary { color: var(--schrift); font-weight: 600; }

.filterfelder {
  display: grid;
  /* Auto-fit statt fester Spaltenzahl: Auf dem Notebook sind es drei, auf dem
     grossen Schirm sechs -- ohne einen einzigen Umbruchpunkt. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  border-radius: 6px;
  background: var(--flaeche-2);
}

.filterfelder .feld { margin: 0; }
.filterblock .klein { margin: 8px 0 0; color: var(--leise); }

/* ---- Vorgangsansicht: der Ticketaufbau des Entwurfs ----

   Kopf mit Nummer, Titel und farbigem Statusband, darunter die Werkzeugzeile,
   dann zwei Spalten: links die Arbeit, rechts die Datenleiste. Die Namen
   folgen dem Entwurf (.issue-top, .statusbar, .toolbar, .issue-cols, .rail),
   übersetzt. */

.vorgang-kopf { margin-bottom: 18px; }
.vorgang-zeile { margin: 0 0 2px; }
.vorgang-nummer { font-size: 13px; color: var(--akzent); font-weight: 600; }
.vorgang-titel { margin: 0 0 12px; font-size: 24px; }

/* Das Statusband: eine Pille über die ganze Breite, Zustand in Versalien,
   Angaben durch senkrechte Striche getrennt, die Zeit rechts. Farbig nach
   Zustand — ablesbar, bevor man liest. Die Farben sind die sb-Werte des
   Entwurfs. */
.statusband { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
              padding: 9px 16px; margin: 0 0 12px; border-radius: var(--pille);
              color: #fff; }
.band-grau  { background: var(--gelb); }    /* wartend: das warme Gelbbraun des Entwurfs */
.band-blau  { background: var(--akzent); }  /* in Arbeit */
.band-gruen { background: var(--gruen); }   /* gelöst, geschlossen */
.band-rot   { background: var(--rot); }     /* abgelehnt */

/* DUNKELBLAU: an die Entwicklung uebergeben (Festlegung Sebi, 20.08.2026). Ein
   Warten auf das eigene Haus, das Wochen dauert -- im gelben Feld der uebrigen
   Wartezustaende ging es unter. Der Ton ist dunkler als das Akzentblau von "in
   Arbeit": Es ist kein Arbeiten, es ist ein Liegen. */
.band-dunkelblau { background: var(--marine); }
.band-status { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.band-trenner { width: 1px; height: 18px; background: currentColor; opacity: .35; }
.band-angabe { font-size: 13.5px; opacity: .95; }
.band-zeit { margin-left: auto; font-size: 13px; opacity: .95; }

/* Die Werkzeugzeile: Zeiterfassung und Arbeitsablauf in einer Reihe. */
.werkzeugzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.werkzeugzeile form { margin: 0; display: flex; align-items: center; gap: 8px; }
.werkzeug-beschriftung { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                         font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
                         color: var(--leise); margin-left: 8px; }
.zeitform input { padding: 5px 12px; font-family: inherit; font-size: 13.5px;
                  border: 1px solid var(--linie-stark); border-radius: var(--pille);
                  min-width: 220px; }
.zeitform input:focus { outline: 2px solid var(--blau); outline-offset: 1px; }

/* Start grün, Stopp rot — .tb.laufend und .tb.stopp im Entwurf. */
.knopf-klein.laufend { background: var(--gruen); border-color: var(--gruen); color: #fff; font-weight: 600; }
.knopf-klein.laufend:hover { filter: brightness(1.1); background: var(--gruen); color: #fff; }
.knopf-klein.stopp { background: var(--rot); border-color: var(--rot); color: #fff; font-weight: 600; }
.knopf-klein.stopp:hover { filter: brightness(1.1); background: var(--rot); color: #fff; }

/* „läuft"-Anzeige mit pulsierendem Punkt. Die Animation ist rein schmückend —
   prefers-reduced-motion schaltet sie ab. */
.zeitlauf { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--gruen); }
.puls { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen);
        animation: pulsschlag 1.6s ease-in-out infinite; }
@keyframes pulsschlag { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .puls { animation: none; } }

/* Zwei Spalten. Unter 1100px faellt die Leiste unter den Inhalt.

   Die Randspalte war mit 320px zu schmal (Befund Sebi): Namen wie
   "Johanna von Mettlach-Orscholz" und TeamViewer-Geraetenamen brachen
   mitten im Wort um oder wurden abgeschnitten. Jetzt waechst sie mit dem
   Fenster mit -- 330px als Untergrenze, bis 400px auf breiten Schirmen; die
   erste Fassung mit 360..460px war zu breit und nahm dem Verlauf den Platz
   (Rueckmeldung Sebi) -- und der Inhalt behaelt seine minmax(0, 1fr), damit
   nichts ueberlaeuft. */
.vorgang-spalten { display: grid; gap: 26px; }
@media (min-width: 1100px) {
  .vorgang-spalten { grid-template-columns: minmax(0, 1fr) clamp(330px, 25vw, 400px); align-items: start; }
}

/* Die Datenleiste: Blöcke mit Mono-Überschrift in Versalien — .block/.rail. */
.vorgang-leiste { display: flex; flex-direction: column; }
.leistenblock { padding: 15px 0; border-bottom: 1px solid var(--linie); }
.leistenblock:first-child { padding-top: 0; }
.leistenblock:last-child { border-bottom: 0; }
.leistenblock h3 { margin: 0 0 11px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                   font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
                   color: var(--leise); font-weight: 600; border: 0; padding: 0; }

/* Beschriftung links, Wert rechts — .fld-row der Leiste (86px im Entwurf,
   hier etwas breiter für die deutschen Begriffe). */
.feldraster { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 6px 12px; margin: 0;
              font-size: 13.5px; align-items: baseline; }
.feldraster dt { color: var(--leise); font-size: 13px; }
.feldraster dd { margin: 0; color: var(--schrift); overflow-wrap: anywhere; }

/* Kleine Wertmarken — .loz im Entwurf. */
.loz { display: inline-block; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
       font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
       padding: 2px 10px; border-radius: var(--pille); white-space: nowrap; }
.loz-rot { color: var(--warnschrift); background: var(--rot-sanft); }
.loz-gruen { color: var(--gruen); background: var(--gruen-sanft); }
.loz-grau { color: var(--schrift-2); background: var(--grau-sanft); }

/* Die Inhaltsblöcke links tragen dieselbe Blocksprache. */
/* Jeder Bereich (Beschreibung, Anhaenge, Kommentare, …) als eigene Karte —
   optisch klar getrennt (Festlegung Sebi). */
.feldblock { margin-bottom: 18px; padding: 16px 18px; background: var(--flaeche);
             border: 1px solid var(--linie); border-radius: 10px; }
.feldblock h2 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }

/* Der Beschreibungstext behaelt seine Zeilenumbrueche aus der Erfassung.

   overflow-wrap: anywhere (Befund Sebi, 17.08.2026: "wenn laengere Texte in die
   Beschreibung kopiert werden, duerfen diese nicht darueber hinausstehen"): Ein
   eingefuegter Verweis oder eine lange Kennung ohne Leerzeichen ist EIN Wort --
   und ein Wort bricht ohne diese Angabe nicht um. Es stand dann quer aus dem
   Kasten heraus und schob im Dunkelmodus die halbe Seite mit. Beim Original
   stand die Angabe schon; hier fehlte sie.

   max-width zusaetzlich: Ein vorformatierter Block (etwa eine Tabelle aus einer
   Mail) kann breiter sein als die Spalte -- er scrollt dann in sich, statt die
   Seite zu verbreitern. */
.beschreibungstext {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
}

/* ---- Krume (.crumbs im Entwurf): Bereich / Ort im Bereich ---- */
.krume { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
         font-size: 13px; color: var(--leise);
         padding-bottom: 12px; margin-bottom: 20px;
         border-bottom: 3px solid var(--blau); }
.krume b { font-size: 20px; color: var(--schrift); }
.krume-trenner { opacity: .6; }
/* In einem .seite-kopf traegt der Kopf den Strich schon. */
.krume.ohne-strich { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

.loz-blau { color: var(--akzent); background: var(--akzent-sanft); }

/* ---- CRM zweispaltig: Kundenliste links, Datensatz rechts ---- */
.crm-spalten { display: grid; gap: 26px; }
@media (min-width: 900px) {
  .crm-spalten { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  .kundenliste { border-right: 1px solid var(--linie); padding-right: 22px;
                 align-self: stretch; }
}

.kundenliste h3 { margin: 0 0 11px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
                  color: var(--leise); font-weight: 600; }
.kundenliste ul { list-style: none; margin: 0 0 16px; padding: 0; }
.kundenliste li { margin: 0; }
.kundenliste a { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px;
                 border-radius: 7px; text-decoration: none; color: var(--schrift-2);
                 border-left: 3px solid transparent; }
.kundenliste a:hover { background: var(--flaeche-2); color: var(--schrift); }
.kundenliste a.aktiv { background: var(--akzent-sanft); color: var(--schrift);
                       border-left-color: var(--blau); }
.kundenliste .kundenname { font-weight: 600; font-size: 14.5px; }

/* ---- Einklappbare Abschnitte (<details>) ----
   Ohne Skript, passend zur knappen Content-Security-Policy. Der Pfeil kommt
   vom Browser; die Ueberschrift im summary verhaelt sich wie jede h2, nur
   klickbar. */
.einklappbar { margin: 0 0 22px; }
/* Klapp-Symbol fuer ALLE einklappbaren Bloecke (Festlegung Sebi): ein
   Dreieck, das beim Oeffnen kippt — die eigene Marke des Browsers ist je
   nach Betriebssystem eine andere und mal kaum zu sehen. */
.einklappbar summary { cursor: pointer; list-style: none; }
.einklappbar summary::-webkit-details-marker { display: none; }
.einklappbar summary::before { content: "▸"; display: inline-block; flex: none;
                              margin-right: 4px; color: var(--akzent); font-size: 13px;
                              transition: transform .12s ease; }
.einklappbar[open] > summary::before { transform: rotate(90deg); }
.einklappbar summary:hover::before { color: var(--akzent-2); }
.einklappbar summary h2 { display: inline-block; margin: 0 0 10px; }
.einklappbar summary:hover h2 { color: var(--akzent); }

/* Auch die kleinen Leistenblock-Titel (h3) duerfen in einer summary stehen. */
.einklappbar summary h3 { display: inline-block; margin: 0 0 8px; }
.einklappbar summary:hover h3 { color: var(--akzent); }

/* „Aus dem Kundendatensatz" beim Erfassen (Entwurf): eine ruhige Infobox. */
.kundendaten-block { border: 1px solid var(--linie); border-radius: 8px;
                     padding: 12px 14px; background: var(--flaeche-2); margin: 0 0 16px; }
.kundendaten-block h4 { margin: 0 0 9px; }

/* ---- Die linke Seitenleiste der Vorgangsliste (Entwurf: .filtercol) ---- */
.vorgaenge-spalten { display: grid; grid-template-columns: 200px minmax(0, 1fr);
                     gap: 0 24px; align-items: start; }
@media (max-width: 860px) { .vorgaenge-spalten { grid-template-columns: 1fr; } }
.filterleiste { background: var(--flaeche-2); border: 1px solid var(--linie);
                border-radius: 10px; padding: 13px 0 10px; }
.filtertitel { margin: 0; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
               font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
               color: var(--leise); padding: 0 14px 8px; font-weight: 600; }
.filtertrenner { height: 1px; background: var(--linie); margin: 9px 14px; }
.filterzeile { display: flex; align-items: center; justify-content: space-between;
               gap: 8px; padding: 6px 14px; color: var(--schrift-2);
               text-decoration: none; font-size: 13.5px; }
.filterzeile:hover { background: var(--flaeche-3); color: var(--schrift); }
.filterzeile.aktiv { background: var(--akzent-sanft); color: var(--akzent);
                     font-weight: 600; border-right: 2px solid var(--akzent); }
.filterzeile .zahl { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                     font-size: 11px; color: var(--leise); background: var(--flaeche);
                     border: 1px solid var(--linie); border-radius: var(--pille);
                     padding: 0 7px; line-height: 17px; }
.filterzeile .zahl.wichtig { color: #fff; background: var(--rot); border-color: var(--rot); }

/* Der immer sichtbare Name im zugeklappten Leistenblock — UNTER der
   Beschriftung, nicht daneben (Festlegung Sebi: ansprechender). */
.leisten-name { display: block; margin: 4px 0 0 17px; font-weight: 600; font-size: 14.5px; }

/* Details zum Vorgang: zwei Formularspalten nebeneinander (Entwurf). */
.details-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
@media (max-width: 900px) { .details-spalten { grid-template-columns: 1fr; } }
.details-formular .feldraster input, .details-formular .feldraster select { width: 100%; }
.details-formular button { margin-top: 8px; }

/* Eingaben in den Detailfeldern folgen dem Thema (Festlegung Sebi) — sie
   erbten sonst die Systemfarben des Browsers und leuchteten im Dunkeln weiss. */
.details-formular input, .details-formular select {
  background: var(--flaeche-2); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: 7px; padding: 5px 9px;
  font: inherit; color-scheme: light dark; }
.details-formular input::placeholder { color: var(--leiser); }

/* Feld mit OK-Haken: Der Haken erscheint erst bei geaendertem Inhalt. */
.feld-mit-ok { display: flex; align-items: center; gap: 8px; }
.feld-mit-ok input, .feld-mit-ok select { flex: 1; min-width: 0; }
.feld-ok { border: 1px solid var(--gruen); background: var(--gruen-sanft);
           color: var(--gruen); border-radius: 7px; padding: 4px 10px;
           cursor: pointer; font-weight: 700; }
.feld-ok:hover { background: color-mix(in srgb, var(--gruen) 22%, var(--gruen-sanft)); }
.nicht-umbrechen { white-space: nowrap; }

/* Gespraechsband und Hoerer (Festlegung Sebi: waehlt ueber Teams). */
.gespraechsband { display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
                  padding: 9px 14px; border: 1px solid var(--akzent-linie);
                  background: var(--akzent-sanft); border-radius: 10px; }
.gespraech-luecke { flex: 1; }
/* Der Hoerer schwebt rechts neben dem Namen UEBER der summary-Zeile — so ist
   er auch im eingeklappten Zustand sichtbar, ohne beim Klick den Block zu
   toggeln (Festlegung Sebi). */
.leistenblock { position: relative; }
.hoerer-form { position: absolute; top: 22px; right: 0; margin: 0; z-index: 1; }
.hoerer { border: 1px solid var(--gruen); background: var(--gruen-sanft); color: var(--gruen);
          border-radius: var(--pille); padding: 3px 12px; cursor: pointer; font-size: 13px; }
.hoerer:hover { background: color-mix(in srgb, var(--gruen) 22%, var(--gruen-sanft)); }

/* SPEICHERLEISTE (Befund Sebi, 25.08.2026: „Der Speichern-Button ist
   unübersichtlich. Übersieht man, wenn man nur Checkboxen setzt.")

   Das Problem ist die Länge der Formulare: Zehn Ereignisse mal drei Kanäle, und
   der Knopf steht darunter -- ausserhalb des Bildes, blass wie ein Nebenverweis.
   Wer Haken setzt, sieht ihn nie und geht mit ungespeicherten Aenderungen weg.

   `position: sticky` loest es OHNE SKRIPT: Die Leiste bleibt am unteren Rand des
   Sichtfensters, solange das Formular sichtbar ist, und ruht am Ende des
   Formulars. Ein Skript koennte zusaetzlich "ungespeichert" hervorheben -- das
   waere eine zweite Wahrheit ueber denselben Zustand, und diese hier genuegt.

   Der volle `knopf` statt `knopf-klein`: Speichern ist an dieser Stelle die
   Hauptsache und nicht eine Nebenhandlung. */
.speicherleiste { position: sticky; bottom: 0; z-index: 3;
                  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                  margin-top: 18px; padding: 12px 16px;
                  background: var(--flaeche); border: 1px solid var(--linie-stark);
                  border-radius: 12px;
                  /* Ein Schatten nach oben, damit die Leiste ueber dem Inhalt
                     liegt und nicht in ihm: Ohne ihn scheint die Tabelle
                     durch und man liest zwei Dinge uebereinander. */
                  box-shadow: 0 -6px 14px -8px rgb(0 0 0 / 35%); }
.speicherleiste .hinweis { color: var(--leise); font-size: 12.5px; margin: 0; }

/* „nachtragen" an einer fehlenden Angabe (Festlegung Sebi, 25.08.2026).

   Es soll AUFFALLEN, aber nicht drängen: gestrichelter Rahmen statt Knopf --
   das ist die Form, die „hier fehlt etwas" sagt, ohne wie eine Handlung
   auszusehen, die getan werden muss. Ein voller Knopf in der Randspalte
   konkurrierte mit dem Hörer daneben, und der ist die Hauptsache. */
.nachtragen { display: inline-flex; align-items: center; gap: 5px;
              border: 1px dashed var(--linie-stark); border-radius: var(--pille);
              padding: 1px 9px; color: var(--leise); text-decoration: none;
              font-size: 12px; }
.nachtragen:hover { border-color: var(--akzent); color: var(--akzent);
                    border-style: solid; }

/* Fristen und Eskalationsstufen (Entwurf). */
.frist { font-weight: 600; }
.frist-lauf { color: var(--schrift-2); }
.frist-warn { color: var(--gelb); }
.frist-ueber { color: var(--warnschrift); }
.frist-ok { color: var(--gruen); }
.frist-pause { color: var(--leise); }
.sla-bar { height: 5px; border-radius: 4px; background: var(--flaeche-3);
           overflow: hidden; margin-top: 10px; }
/* KEIN width hier — das ist die Falle, an der der Balken lange leer blieb
   (Befund Sebi, 14.08.2026: "Bekommst Du das nicht gelöst mit dem Balken und
   der % Anzeige davon?").

   Die Breite kommt aus einer Klasse .fuell-N (Fuenferschritte im Stilblatt,
   weil die Content-Security-Policy style="width:20%" verwirft). Nur: Der
   Waehler .sla-bar .sla-fuellung ist ZWEI Klassen, .fuell-20 ist EINE — der
   spezifischere gewinnt, egal wie weit unten der andere steht. Also stand
   hier width:0 und schlug jede Fuellklasse; der Balken blieb leer, waehrend
   die Prozentzahl daneben stimmte.

   Die Vorgabe steht deshalb eine Zeile tiefer mit EINER Klasse: gleiche
   Spezifitaet wie .fuell-N, und dann entscheidet die Reihenfolge — .fuell-N
   steht spaeter und gewinnt. */
.sla-bar i, .sla-bar .sla-fuellung { display: block; height: 100%; background: var(--gruen); }
.sla-fuellung { width: 0; }
/* Richtung Ende: Orange, drueber Rot (Festlegung Sebi). */
.sla-bar.warn i, .sla-bar.warn .sla-fuellung { background: #E07B2A; }
.sla-bar.crit i, .sla-bar.crit .sla-fuellung { background: var(--rot); }

/* TeamViewer-Geraete (Festlegung Sebi): Punkt = online, Verweis verbindet.

   Kleinere Schrift als der Fliesstext (Rueckmeldung Sebi: "Schriftgroesse bei
   den Teamviewer-Verbindungen verkleinern, damit der Text lesbar ist"): Die
   Geraetenamen sind lang ("PC-Kasse-Freibad-Tivoli-01"), und in der schmalen
   Spalte wurden sie abgeschnitten statt gelesen. 12,5px lassen den ganzen
   Namen stehen. */
.tv-liste { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.tv-liste li { display: flex; align-items: center; gap: 7px; padding: 4px 0;
               border-bottom: 1px solid var(--linie); }
.tv-liste li:last-child { border-bottom: 0; }
/* Umbrechen statt abschneiden (Festlegung Sebi: Geraetenamen sollen
   VOLLSTAENDIG dastehen). Die drei Punkte sparten Platz, den die breitere
   Randspalte jetzt hat -- und ein halber Geraetename ist wertlos, wenn man
   danach in TeamViewer sucht. */
.tv-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tv-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--leiser); flex: none; }
.tv-punkt.online { background: var(--gruen); }

/* Verbindungen-Reiter: eine Karte je Dienst. */
.verbindung-karte { border: 1px solid var(--linie); border-radius: 10px;
                    padding: 14px 16px; margin: 0 0 16px; background: var(--flaeche);
                    max-width: 620px; }
.verbindung-karte h2 { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.feld-zeile { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }

/* Eskalations-Reiter: Arbeitszeit-Zeile und Fristenmatrix. */
.esk-zeile { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; }
.esk-matrix input { width: 90px; }

/* Ziehen einer Datei uebers Ticket: die ganze Seite ist die Ablage. */
body.datei-ueber::after { content: "Datei loslassen — sie wird an den Vorgang angehängt";
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: color-mix(in srgb, var(--akzent) 18%, transparent);
  border: 3px dashed var(--akzent); font-size: 19px; font-weight: 600;
  color: var(--akzent); pointer-events: none; }

/* Der Ausblenden-Knopf am Rechtschreib-Hinweis — bewusst leise. */
.rs-aus { border: 0; background: none; padding: 0; cursor: pointer;
          color: var(--akzent); font-size: inherit; text-decoration: underline; }
.rs-aus:hover { color: var(--akzent-2); }

/* Die Zeiten-Box unter der Vertragsbox: derselbe Klappmechanismus, nur mit
   dem kleinen Zeiten-Titel statt einer h2. */
.zeiten-box { margin: 14px 0 0; }
.zeiten-box summary h3 { display: inline-block; margin: 0; }
.zeiten-box summary:hover h3 { color: var(--akzent); }
.zeiten-box .vertragsdetails { margin-top: 8px; }

/* ---- Darstellung waehlen (/Einstellungen) ---- */
.darstellung-wahl { border: 0; margin: 0 0 18px; padding: 0; display: flex;
                    flex-direction: column; gap: 8px; max-width: 460px; }
.darstellung-wahl legend { padding: 0 0 10px; }
.darstellung-option { display: flex; gap: 11px; align-items: baseline;
                      padding: 10px 13px; border: 1px solid var(--linie);
                      border-radius: 10px; background: var(--flaeche); cursor: pointer; }
.darstellung-option:hover { background: var(--flaeche-2); }
.darstellung-option:has(input:checked) { border-color: var(--blau);
                                         background: var(--akzent-sanft); }
.darstellung-option span { display: flex; flex-direction: column; }
.darstellung-option input { accent-color: var(--akzent); }

/* ---- Die Anmeldemaske im Dunkeln ----

   Die Maske hat ihren eigenen, fest verdrahteten Verlauf — Tokens allein
   drehen ihn nicht um. Im Dunkeln: tiefer Grund, das blaue Licht bleibt, aber
   gedaempft; der helle Hof in der Mitte wird zu einem leisen Aufhellen, damit
   die Karte traegt. Die Wortmarke im Logo ist hier dank --logo-schrift hell —
   der Grund, warum die Maske frueher zwingend hell sein musste, ist mit der
   eingebetteten SVG weggefallen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.mitte {
    background-color: #15171A;
    background-image:
      radial-gradient(64% 54% at 50% 40%, rgba(233, 236, 239, .06) 0%, rgba(233, 236, 239, 0) 72%),
      radial-gradient(105% 80% at 4% -12%, rgba(102, 184, 220, .20) 0%, transparent 62%),
      radial-gradient(58% 46% at 92% 4%, rgba(102, 184, 220, .12) 0%, transparent 66%),
      radial-gradient(70% 60% at 108% 106%, rgba(188, 9, 27, .10) 0%, transparent 58%),
      linear-gradient(166deg, #1B1F23 0%, #15171A 55%, #101214 100%);
  }
  :root:not([data-theme="light"]) body.mitte::before {
    background-image: radial-gradient(rgba(102, 184, 220, .16) 1px, transparent 1.2px);
  }
}
:root[data-theme="dark"] body.mitte {
  background-color: #15171A;
  background-image:
    radial-gradient(64% 54% at 50% 40%, rgba(233, 236, 239, .06) 0%, rgba(233, 236, 239, 0) 72%),
    radial-gradient(105% 80% at 4% -12%, rgba(102, 184, 220, .20) 0%, transparent 62%),
    radial-gradient(58% 46% at 92% 4%, rgba(102, 184, 220, .12) 0%, transparent 66%),
    radial-gradient(70% 60% at 108% 106%, rgba(188, 9, 27, .10) 0%, transparent 58%),
    linear-gradient(166deg, #1B1F23 0%, #15171A 55%, #101214 100%);
}
:root[data-theme="dark"] body.mitte::before {
  background-image: radial-gradient(rgba(102, 184, 220, .16) 1px, transparent 1.2px);
}

/* ---- CRM: Suchfeld und Kundenkacheln (Festlegung Sebi, 13.08.2026) ---- */

.kundensuche { display: flex; gap: 8px; margin: 0 0 12px; align-items: center; }
/* Praegnanter (Festlegung Sebi): groesser, kraeftiger Rand, Lupe davor. */
.suchsymbol { font-size: 15px; opacity: .7; }
.kunde-plus { display: grid; place-items: center; width: 38px; height: 38px; flex: none;
              border-radius: 9px; background: var(--blau); color: var(--anthrazit); font-size: 21px;
              font-weight: 700; text-decoration: none; line-height: 1; }
.kunde-plus:hover { filter: brightness(1.12); }
.kundensuche input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 15px; font-family: inherit;
                     font-size: 14px; color: var(--schrift); background: var(--flaeche);
                     border: 1px solid var(--linie); border-radius: var(--pille); }
.kundensuche input:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
.suchstand { margin: 0 0 10px; }

/* Kacheln statt Zeilen: Name gross, darunter die Projekte. Karte mit Kante und
   Fläche — die Lesbarkeit kommt aus dem Abstand ZWISCHEN den Kunden, nicht aus
   Trennlinien in einer dichten Liste. */
.kundenkacheln { list-style: none; margin: 0 0 16px; padding: 0;
                 display: flex; flex-direction: column; gap: 8px; }
.kundenkachel { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
                background: var(--flaeche); border: 1px solid var(--linie);
                border-radius: 10px; text-decoration: none; color: var(--schrift-2); }
.kundenkachel:hover { background: var(--flaeche-2); border-color: var(--linie-stark);
                      color: var(--schrift); }
.kundenkachel.aktiv { background: var(--akzent-sanft); border-color: var(--blau);
                      color: var(--schrift); }
.kundenkachel .kundenname { font-weight: 600; font-size: 14.5px; }
.kundenkachel .kachel-projekte { font-size: 12px; color: var(--leise); line-height: 1.45; }

/* Der Bearbeiten-Knopf sitzt rechts oben in der Karte. */
.kundenkarte { position: relative; }
.karte-bearbeiten { position: absolute; top: 0; right: 0; }

/* ---- CRM: Kundentitel, Vertragsbox, Symbolknoepfe (13.08.2026) ---- */

/* Der Kundenname traegt den Kopf — gross und zentriert (Festlegung Sebi),
   der blaue Strich darunter bleibt als das eine Markenmerkmal. */
.kundentitel { text-align: center; padding-bottom: 14px; margin-bottom: 20px;
               border-bottom: 3px solid var(--blau); }
.kundentitel h1 { margin: 0; font-size: 30px; letter-spacing: -.01em; }
.kundentitel-ort { margin: 2px 0 0; font-size: 13.5px; color: var(--leise); }

/* Anschrift und Vertrag nebeneinander -- aber nach dem PLATZ, nicht nach
   einem festen Verhaeltnis (Befund Sebi: "Der Aufbau im CRM ist nicht schoen.
   Sollte nicht von der Seitenleiste rechts abhaengig sein").

   Vorher standen hier 1.5fr und 1fr. Damit hing die Breite der Anschrift
   daran, wie breit die Vertragsbox danebensteht, und die wiederum an der
   Breite der Kundenliste links: Die Felder wurden schmal und brachen um,
   waehrend rechts Platz frei blieb. auto-fit mit einer Mindestbreite loest
   das Verhaeltnis auf -- jede Spalte bekommt, was sie braucht, und ist zu
   wenig Platz da, ruecken sie untereinander, ohne dass eine Grenze in
   Pixeln geraten werden muss. */
.kundenkopf-spalten { display: grid; gap: 20px; align-items: start;
                      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                      margin-bottom: 6px; }

.vertragsbox { background: var(--flaeche-2); border: 1px solid var(--linie);
               border-radius: 10px; padding: 14px 16px; }
.vertragsbox h3 { margin: 0 0 10px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
                  color: var(--leise); font-weight: 600; }
.vertragsbox .feldraster { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; }
.vertragsbox dt { font-size: 12.5px; color: var(--leise); padding-top: 2px; }
.vertragsbox dd { margin: 0; font-size: 14px; }
.vertragsdetails { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--linie);
                   font-size: 12.5px; color: var(--schrift-2); white-space: pre-line; }

/* .loz und .loz-gruen gibt es weiter oben schon — hier nur die graue Stufe
   fuer "kein"/"Standard" dazu. */
.loz-grau { color: var(--schrift-2); background: var(--grau-sanft); }

/* Symbolknoepfe: Stift, Person-aus, Person-an. Gross genug zum Treffen
   (28px), Strichzeichnung in der ruhigen Schriftfarbe, unter der Maus die
   kraeftige. */
.symbolknopf { display: inline-grid; place-items: center; width: 28px; height: 28px;
               padding: 0; border: 0; background: none; cursor: pointer;
               border-radius: 7px; color: var(--leise); }
.symbolknopf:hover { background: var(--flaeche-2); color: var(--schrift); }
.symbolknopf svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
                   stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Das Kundenlogo rechts oben in der Karte; der Bearbeiten-Knopf rueckt
   daneben, wenn beides da ist. Begrenzt und object-fit: Favicons kommen in
   jeder Groesse und jedem Seitenverhaeltnis. */
.kundenlogo { position: absolute; top: 0; right: 0; width: 44px; height: 44px;
              object-fit: contain; border-radius: 9px; background: var(--flaeche);
              border: 1px solid var(--linie); padding: 4px; }
.karte-bearbeiten.mit-logo { right: 54px; }

/* Das Logo sitzt rechts NEBEN der Ueberschrift (Festlegung Sebi), nicht mehr
   in der Karte. Etwas groesser als dort — es steht jetzt im Kopf. */
.kundentitel { position: relative; }
.kundentitel .kundenlogo { position: absolute; top: -8px; right: 0;
                           width: 76px; height: 76px; }

/* Der Bearbeitungsmodus ist ein Zustand, kein Klick — also ein Band, das
   bleibt, solange er an ist. Gestrichelte Kante: "hier ist gerade offen". */
.bearbeiten-band { border-style: dashed; }

/* ---- Ueberlagerungsfenster (Ansprechpartner aendern) ----
   Ohne Skript: Das Overlay kommt mit dem Formular (GET ?Bearbeite=id) und
   geht ueber "Abbrechen". Abgedunkelter Grund, Fenster mittig, innen
   rollbar — auf kleinen Schirmen darf das Formular hoeher sein als der
   Bildschirm. */
.ueberlagerung { position: fixed; inset: 0; z-index: 50; padding: 20px;
                 background: rgba(0, 0, 0, .55); display: grid;
                 place-items: center; }
.modalfenster { background: var(--flaeche); border: 1px solid var(--linie-stark);
                border-radius: 12px; box-shadow: var(--schatten);
                padding: 20px 24px 24px; width: 100%; max-width: 540px;
                max-height: 90vh; overflow: auto; }
.modalfenster h2 { margin-top: 0; }

/* Der Bearbeitungsmodus in ROT (Festlegung Sebi): Er ist der Zustand, in dem
   Endgueltiges moeglich ist -- die Warnfarbe ist hier keine Dekoration. */
.bearbeiten-band { color: var(--warnschrift); background: var(--rot-sanft);
                   border: 1px dashed color-mix(in srgb, var(--rot) 45%, transparent); }
.bearbeiten-band a { color: var(--warnschrift); }

/* Breitere Maske (Festlegung Sebi): Das CRM traegt zwei Spalten plus
   Vertragsbox -- 900px waren dafuer zu schmal. Je Seite zuschaltbar. */
/* Nur der Inhalt wird breiter — die Leiste bleibt immer ueber die volle
   Fensterbreite (Festlegung Sebi: sonst endet sie im CRM mitten im Bild). */
/* 1560 statt 1240 (Festlegung Sebi: der Hauptbereich soll breiter sein) —
   Seitenleiste, Inhalt und Randspalte teilen sich den Platz. */
main.breit { width: min(1560px, calc(100% - 32px)); }

.zeiten-titel { margin: 14px 0 8px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
                color: var(--leise); font-weight: 600; }

/* Wechsel-Formulare in der Randspalte (Ansprechpartner/Kunde aendern). */
/* Beschriftung ueber der Auswahl: Seit die Aenderung ohne laufende Uhr
   geht, stehen in einem Block bis zu drei Auswahlfelder untereinander --
   ohne Beschriftung waere nicht erkennbar, welches wofuer ist. */
.leisten-wechsel { display: grid; gap: 4px; margin-top: 10px; }
.leisten-wechsel > label { color: var(--leise); }
.leisten-wechsel select { flex: 1; min-width: 0; background: var(--flaeche-2);
                          color: var(--schrift); border: 1px solid var(--linie-stark);
                          border-radius: 7px; padding: 4px 8px; font: inherit; }

/* Das Aufwands-Balkendiagramm (Festlegung Sebi: grafisch, Woche/Monat/Jahr). */
.aufwand-sichten { margin: 12px 0 6px; }
.diagramm { display: flex; align-items: flex-end; gap: 6px; height: 170px;
            padding: 8px 2px 0; border-bottom: 1px solid var(--linie-stark); }
.diagramm.eng { gap: 2px; }
.saeule { flex: 1; min-width: 0; display: flex; flex-direction: column;
          align-items: center; justify-content: flex-end; height: 100%; }
.saeule i { display: block; width: 100%; max-width: 34px; border-radius: 4px 4px 0 0;
            background: var(--akzent); }
.saeule .wert { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                font-size: 10px; color: var(--leise); margin-bottom: 2px; }
.diagramm.eng .wert { display: none; }
.saeule .achse { font-size: 10.5px; color: var(--leise); margin-top: 4px;
                 transform: translateY(2px); }
.diagramm .achse { position: relative; top: 0; }

/* Der Loeschen-Knopf: rot, weil endgueltig (Festlegung Sebi). */
.knopf-klein.loeschen, .knopf.loeschen { background: var(--rot); color: #fff; border-color: var(--rot); }
.knopf-klein.loeschen:hover, .knopf.loeschen:hover { filter: brightness(1.12); }

/* Ein Rahmen-loses fieldset: nur da, um Eingaben ohne Uhr zu sperren. */
fieldset.nackt { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.nackt:disabled { opacity: .55; }

/* Loeschen ganz unten rechts, bewusst leise (Festlegung Sebi: Notfall). */
.loesch-zeile { text-align: right; margin: 26px 0 0; }
.loeschen-dezent { font-size: 12.5px; color: var(--leise); text-decoration: underline dotted; }
.loeschen-dezent:hover { color: var(--warnschrift); }

/* Zusammenfassung aendern: Stift am Titel, Formular in Titelgroesse. */
.betreff-stift { font-size: 17px; text-decoration: none; margin-left: 10px; opacity: .55; }
.betreff-stift:hover { opacity: 1; }
.betreff-formular { display: flex; gap: 10px; align-items: center; margin: 6px 0 10px; }
.betreff-formular input { flex: 1; min-width: 0; font-size: 21px; font-weight: 600;
                          padding: 7px 12px; background: var(--flaeche-2); color: var(--schrift);
                          border: 1px solid var(--linie-stark); border-radius: 8px; font-family: inherit; }

/* Balken mit Prozentangabe daneben (Festlegung Sebi). */
.balken-zeile { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.balken-zeile .sla-bar { flex: 1; margin-top: 0; }
.balken-prozent { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                  font-size: 11.5px; color: var(--leise); flex: none; }

/* Zuweisungs-Banner nach dem Anruf: fuenf Sekunden, dann blendet es aus. */
.zuweisungs-banner { margin: 0 0 14px; padding: 9px 14px; border-radius: 10px;
                     border: 1px solid var(--gruen); background: var(--gruen-sanft);
                     color: var(--gruen); animation: banner-aus .5s ease 5s forwards; }
@keyframes banner-aus { to { opacity: 0; height: 0; padding: 0; margin: 0;
                             border-width: 0; overflow: hidden; } }

/* HS-Abgleich-Zeile im Details-Block. */
.hs-abgleich { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* Zeiterfassung in der Randspalte (Festlegung Sebi: ueber den Daten). */
.leisten-zeit { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.leisten-zeit input { width: 100%; }

/* Arbeitsablauf-Knoepfe tragen die Statusfarbe ihres ZIELS (Festlegung Sebi). */
.knopf-klein.zk-blau { background: var(--akzent-sanft); color: var(--akzent); border: 1px solid var(--akzent-linie); }
.knopf-klein.zk-gruen { background: var(--gruen-sanft); color: var(--gruen); border: 1px solid var(--gruen); }
.knopf-klein.zk-rot { background: var(--rot-sanft); color: var(--warnschrift); border: 1px solid var(--warnschrift); }
.knopf-klein.zk-grau { background: var(--grau-sanft); color: var(--schrift-2); border: 1px solid var(--linie-stark); }

/* Dunkelblau am Knopf: gefuellt und nicht getoent wie die uebrigen. „An die
   Entwicklung uebergeben" ist der Uebergang, den man selten und bewusst nimmt --
   er darf sich von den vier hellen Nachbarn abheben, ohne rot zu sein. */
.knopf-klein.zk-dunkelblau { background: var(--marine); color: #fff; border: 1px solid var(--marine); }
.knopf-klein.zk-blau:hover, .knopf-klein.zk-gruen:hover, .knopf-klein.zk-rot:hover,
.knopf-klein.zk-grau:hover, .knopf-klein.zk-dunkelblau:hover { filter: brightness(1.08); }

/* Die Kundenbearbeitungsmaske zweispaltig (Festlegung Sebi: sonst zu lang).
   Textflaechen und der Schlusshinweis laufen ueber beide Spalten. */
.karte-formular { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.karte-formular > .feld:has(textarea),
.karte-formular > .klein,
.karte-formular > button,
.karte-formular > datalist { grid-column: 1 / -1; }
@media (max-width: 780px) { .karte-formular { grid-template-columns: 1fr; } }

/* TeamViewer-Knoepfe: gruen wenn online, grau wenn offline (Festlegung Sebi). */
/* Der RustDesk-Block (Festlegung Sebi, 17.08.2026): ein Knopf und die Kennung,
   keine Liste. Ohne API weiss niemand, welche Geraete es gibt und ob sie online
   sind -- deshalb steht hier auch kein Punkt, der es behauptet. */
.leistenblock-rustdesk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
}

.tv-knopf { flex: none; border-radius: var(--pille); padding: 1px 9px; font-size: 11px;
            text-decoration: none; border: 1px solid transparent; }
.tv-knopf.an { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.tv-knopf.aus { background: var(--grau-sanft); color: var(--leise); border-color: var(--linie-stark); }
.tv-knopf.vpn.an { background: var(--gruen-sanft); color: var(--gruen); border-color: var(--gruen); }
.tv-knopf:hover { filter: brightness(1.1); }

/* Uebergang mit Pflicht-Datum (Wartet auf Kunden). */
.uebergang-form { display: flex; align-items: center; gap: 6px; }
.uebergang-form input[type=date] { background: var(--flaeche-2); color: var(--schrift);
                                   border: 1px solid var(--linie-stark); border-radius: 7px;
                                   padding: 4px 8px; font: inherit; font-size: 13px; }

/* Knopf rechts in einer Block-Ueberschrift (Kommentare zusammenfassen). */
.einklappbar summary { display: flex; align-items: baseline; gap: 8px; }
.einklappbar summary h2, .einklappbar summary h3 { flex: none; }
.kopf-knopf { margin-left: auto; }
.kommentar-auszug { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--akzent-sanft);
                    border: 1px solid var(--akzent-linie); border-radius: 10px;
                    padding: 12px 14px; margin: 0 0 14px; }

/* Statistik-Reiter: Kennzahlen und Ranglisten. */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
              gap: 12px; margin: 0 0 22px; }
.kennzahl { background: var(--flaeche-2); border-radius: 10px; padding: 14px 16px; }
.kz-wert { display: block; font-size: 26px; font-weight: 600; }
.kz-text { display: block; font-size: 12.5px; color: var(--leise); margin-top: 3px; }
.rangliste { list-style: none; margin: 0 0 22px; padding: 0; }
.rangliste li { display: grid; grid-template-columns: 200px 1fr 90px 120px;
                gap: 10px; align-items: center; padding: 5px 0;
                border-bottom: 1px solid var(--linie); }
.rang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang-balken { height: 8px; border-radius: 4px; background: var(--flaeche-3); overflow: hidden; }
.rang-balken i { display: block; height: 100%; width: 0; background: var(--akzent); }
.rang-wert { text-align: right; font-size: 12.5px; }
.rang-zusatz { text-align: right; }
@media (max-width: 780px) { .rangliste li { grid-template-columns: 1fr 60px; }
                            .rang-balken, .rang-zusatz { display: none; } }

/* Balkenbreiten als KLASSEN statt Inline-Style: Die
   Content-Security-Policy erlaubt style-src 'self' — ein style="width:9%"
   verwirft der Browser stillschweigend, und der Balken blieb leer
   (Befund Sebi). In Fuenferschritten, das genuegt fuer einen 5px-Balken. */
.fuell-0 { width: 0%; }
.fuell-5 { width: 5%; }
.fuell-10 { width: 10%; }
.fuell-15 { width: 15%; }
.fuell-20 { width: 20%; }
.fuell-25 { width: 25%; }
.fuell-30 { width: 30%; }
.fuell-35 { width: 35%; }
.fuell-40 { width: 40%; }
.fuell-45 { width: 45%; }
.fuell-50 { width: 50%; }
.fuell-55 { width: 55%; }
.fuell-60 { width: 60%; }
.fuell-65 { width: 65%; }
.fuell-70 { width: 70%; }
.fuell-75 { width: 75%; }
.fuell-80 { width: 80%; }
.fuell-85 { width: 85%; }
.fuell-90 { width: 90%; }
.fuell-95 { width: 95%; }
.fuell-100 { width: 100%; }

/* Saeulenhoehen fuers Diagramm — gleiche Begruendung. */
.hoehe-0 { height: 0%; }
.hoehe-5 { height: 5%; }
.hoehe-10 { height: 10%; }
.hoehe-15 { height: 15%; }
.hoehe-20 { height: 20%; }
.hoehe-25 { height: 25%; }
.hoehe-30 { height: 30%; }
.hoehe-35 { height: 35%; }
.hoehe-40 { height: 40%; }
.hoehe-45 { height: 45%; }
.hoehe-50 { height: 50%; }
.hoehe-55 { height: 55%; }
.hoehe-60 { height: 60%; }
.hoehe-65 { height: 65%; }
.hoehe-70 { height: 70%; }
.hoehe-75 { height: 75%; }
.hoehe-80 { height: 80%; }
.hoehe-85 { height: 85%; }
.hoehe-90 { height: 90%; }
.hoehe-95 { height: 95%; }
.hoehe-100 { height: 100%; }
/* Arbeitsablauf-Editor: enge Tabellen mit Eingaben in jeder Zelle. */
.ablauf-tabelle input, .ablauf-tabelle select { width: 100%; background: var(--flaeche-2);
    color: var(--schrift); border: 1px solid var(--linie-stark); border-radius: 7px;
    padding: 5px 8px; font: inherit; font-size: 13.5px; }
.ablauf-tabelle td { padding: 4px 6px; vertical-align: middle; }
.ablauf-tabelle form { margin: 0; }

/* Merkmale des Arbeitsablaufs als Checkboxen (Festlegung Sebi) — im Stil der
   Bildschirmmasken: Kasten, Wort, ruhige Farbe, nebeneinander. */
.merkmale { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.merkmal { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
           color: var(--schrift-2); cursor: pointer; white-space: nowrap; }
.merkmal input { accent-color: var(--akzent); }
.merkmal:has(input:checked) { color: var(--schrift); font-weight: 600; }

/* ---- Bildschirmmasken als Karten (Festlegung Sebi) ---- */
.maskenkarte { background: var(--flaeche); border: 1px solid var(--linie);
               border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
.maskenkarte.neu { border-style: dashed; background: none; }
.maskenkopf input[type=text] { width: 100%; font-size: 15px; font-weight: 600;
                               padding: 8px 11px; color: var(--schrift);
                               background: var(--flaeche-2); border: 1px solid var(--linie);
                               border-radius: 8px; }
.maskenzeile { display: flex; justify-content: space-between; align-items: center;
               gap: 12px; margin: 8px 0 10px; }
.maskenfelder { width: 100%; border-collapse: collapse; }
.maskenfelder td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--linie);
                   vertical-align: middle; }
.maskenfelder .feldname { width: 40%; }
.maskenfelder .feldschluessel { width: 22%; font-size: 12px; color: var(--leise); }
.pflichtstern { color: var(--warnschrift); font-weight: 700; margin-left: 3px; }
.merkmal.entfernen { color: var(--leise); font-size: 12.5px; }
.merkmal.entfernen:has(input:checked) { color: var(--warnschrift); font-weight: 600; }
.feldwahl { max-width: 320px; margin: 12px 0 0; }

/* ---- Vorgangsansicht: Bearbeiter, Anruf-Knopf, Cursor (14.08.2026) ---- */

/* Der Anrufen-Knopf lag ABSOLUT ueber der Zeile und deckte lange Namen zu
   ("Johanna von Mettlach-Orscholz", Befund Sebi). Jetzt steht er im Fluss:
   Der Name darf umbrechen, der Knopf rutscht bei Enge in die naechste Zeile
   statt sich darueberzulegen. */
.hoerer-form { position: static; margin: 4px 0 0; }
.rail details > summary { flex-wrap: wrap; }
.leisten-name { min-width: 0; overflow-wrap: anywhere; }

/* Der Bearbeiter soll ins Auge fallen (Festlegung Sebi): Kuerzel als
   Plakette, Name daneben, die eigene Zustaendigkeit in Markenblau. */
.bearbeiter-zelle { display: block; }

/* Symbol links, Plakette rechts daneben (Festlegung Sebi) — das Aufklappen
   schiebt die Auswahl unter die Zeile, ohne die Plakette zu verruecken. */
.bearbeiter-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bearbeiter-wechsel[open] { flex-basis: 100%; order: 2; }
.bearbeiter-plakette { display: inline-flex; align-items: center; gap: 8px;
                       padding: 3px 11px 3px 4px; border-radius: var(--pille);
                       background: var(--flaeche-2); border: 1px solid var(--linie); }
.bearbeiter-plakette.ich { background: var(--akzent-sanft); border-color: var(--blau); }
.bearbeiter-kuerzel { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                      font-size: 12px; font-weight: 700; letter-spacing: .04em;
                      background: var(--akzent); color: #fff; border-radius: var(--pille);
                      padding: 2px 9px; }
.bearbeiter-plakette.ich .bearbeiter-kuerzel { background: var(--blau); color: #12303D; }
.bearbeiter-name { font-size: 13px; color: var(--schrift-2); }
.bearbeiter-form { margin: 0; }
.bearbeiter-form select { font-size: 12.5px; padding: 3px 8px; max-width: 100%; }

/* Beschriftetes Datumsfeld in der Werkzeugzeile. */
.frist-feld { display: inline-flex; flex-direction: column; gap: 2px; }
.frist-feld > span { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                     font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
                     color: var(--leise); }
.werkzeug-hinweis { color: var(--leise); }

/* ---- Textcursor nur dort, wo man wirklich schreibt ----

   Befund Sebi (zweimal): "Ich kann immer noch in den Text Kontaktaufnahme
   klicken, dann blinkt dort der Cursor. Oder in 'keine Datei anhänge'. Das
   gilt für fast alles."

   Der erste Versuch zaehlte Klassen auf -- und traf damit immer nur die
   Stellen, an die ich gerade dachte. Richtig ist die Umkehrung: Die ganze
   Seite bekommt den normalen Zeiger, und NUR was man wirklich beschreibt,
   bekommt den I-Balken zurueck. Ein Cursor, der ueber Text blinkt, den
   niemand aendern kann, verspricht eine Eingabe, die es nicht gibt.

   Markieren bleibt ueberall moeglich -- cursor aendert nur das Zeigerbild,
   nicht die Auswahl. */
body { cursor: default; }

input:not([readonly]):not([disabled]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
textarea:not([readonly]):not([disabled]) {
  cursor: text;
}

input[readonly], textarea[readonly], input:disabled, textarea:disabled, select:disabled {
  cursor: default;
}

/* Maskenfelder: Zweck unter dem Namen, Feldart als ruhige Marke. */
.maskenfelder .feldname b { display: block; }
.feldzweck { display: block; font-size: 11.5px; color: var(--leise); margin-top: 1px; }
.maskenfelder .feldart { width: 15%; }
.art-marke { display: inline-block; font-size: 10.5px; letter-spacing: .04em;
             color: var(--leise); background: var(--grau-sanft);
             border-radius: var(--pille); padding: 1px 8px; }
.leer-hinweis { margin: 8px 0 0; font-style: italic; }

/* Bearbeiterwechsel hinter einem Symbol (Festlegung Sebi): Die Auswahl stand
   immer offen und zog den Blick auf sich, obwohl sie selten gebraucht wird. */
.bearbeiter-wechsel { display: inline-block; }
.bearbeiter-wechsel > summary { list-style: none; cursor: pointer; display: inline-grid;
                                place-items: center; width: 26px; height: 26px;
                                border-radius: 7px; color: var(--leise); }
.bearbeiter-wechsel > summary::-webkit-details-marker { display: none; }
.bearbeiter-wechsel > summary:hover { background: var(--flaeche-2); color: var(--schrift); }
.bearbeiter-wechsel > summary svg { width: 16px; height: 16px; fill: none;
                                    stroke: currentColor; stroke-width: 1.7;
                                    stroke-linecap: round; stroke-linejoin: round; }
.bearbeiter-wechsel[open] > summary { background: var(--akzent-sanft); color: var(--akzent); }
.bearbeiter-wechsel select { margin-top: 6px; width: 100%; font-size: 12.5px;
                             padding: 5px 9px; color: var(--schrift);
                             background: var(--flaeche); border: 1px solid var(--linie-stark);
                             border-radius: 8px; }

/* Eskalierte Gruppe in der Seitenleiste rot unterlegen (Festlegung Sebi):
   Eine rote Ziffer neben grauem Text uebersieht man, eine rote Zeile nicht. */
.filterzeile.eskaliert { background: var(--rot-sanft); color: var(--warnschrift);
                         font-weight: 600; border-left: 3px solid var(--rot); }
.filterzeile.eskaliert:hover { background: color-mix(in srgb, var(--rot) 16%, var(--rot-sanft)); }
.filterzeile.eskaliert .zahl.wichtig { background: var(--rot); color: #fff; }

/* Der Stift steht neben dem Text, nicht als Knopf darunter. */
.beschreibungstext .betreff-stift { margin-left: 8px; }

/* ================= KUNDENPORTAL =================

   Was der Kunde sieht, war bis hierher fast ungestaltet: .fakten, .anhaenge
   und .antwort standen im Markup, aber nirgends in dieser Datei -- der Browser
   zeichnete also seine Vorgaben (Definitionsliste mit Einzug, Aufzaehlung mit
   Punkten). Innen sah alles nach Anwendung aus, aussen nach Rohentwurf, und
   genau das Fenster ist die Visitenkarte.

   Alles hier haengt an body.portal. Die Klassennamen .verlauf und .klein
   teilen sich beide Seiten; ohne die Klammer wuerde eine Aenderung fuers
   Portal die Vorgangsansicht innen zerlegen (dort ist .verlauf eine
   Zeilenliste aus <span>, hier eine Unterhaltung aus <div>). */

body.portal main { padding-bottom: 40px; }

/* Kopf: Kennzeichen ruhig, Betreff traegt die Zeile. Vorher stand beides in
   gleicher Groesse -- die Nummer las sich dann wie der Titel. */
body.portal .seite-kopf h1 { font-size: 23px; line-height: 1.3; }
body.portal .seite-kopf h1 .mono { font-size: 19px; color: var(--leise); margin-right: 8px; }

body.portal h2 { font-size: 15px; margin: 30px 0 12px; padding-bottom: 7px;
                 border-bottom: 1px solid var(--linie); font-weight: 600; }

/* Die Eckdaten als Raster statt als eingerueckte Definitionsliste. Beschriftung
   klein und leise, Wert normal -- dieselbe Sprache wie .stand innen. */
body.portal .fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
                      gap: 14px 22px; margin: 0 0 6px; padding: 15px 17px;
                      background: var(--flaeche-2); border: 1px solid var(--linie);
                      border-radius: 9px; }
/* Beschriftung und Wert gehoeren in DIESELBE Rasterzelle -- sonst reisst der
   Umbruch sie auseinander (Befund Sebi). Das div im dl ist erlaubtes HTML und
   genau dafuer gedacht. */
body.portal .fakt { min-width: 0; }
body.portal .fakten dt { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                         font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
                         color: var(--leise); margin-bottom: 3px; }
body.portal .fakten dd { margin: 0; font-size: 14.5px; }

/* Der Stand ist die eine Angabe, wegen der die Seite geoeffnet wird. Als
   Plakette statt als Fliesstext -- so findet das Auge sie ohne zu lesen. */
body.portal .portal-stand { display: inline-block; padding: 3px 11px; border-radius: 999px;
                            background: color-mix(in srgb, var(--blau) 16%, transparent);
                            border: 1px solid color-mix(in srgb, var(--blau) 45%, transparent);
                            font-size: 13.5px; font-weight: 600; }

/* Anhaenge als Zeilen mit Rahmen -- Aufzaehlungspunkte wirken wie ein
   unfertiges Dokument, und der Dateiname soll anklickbar aussehen. */
body.portal .anhaenge { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.portal .anhaenge li { display: flex; align-items: baseline; justify-content: space-between;
                           gap: 14px; flex-wrap: wrap; padding: 10px 13px;
                           background: var(--flaeche-2); border: 1px solid var(--linie);
                           border-radius: 8px; }
body.portal .anhaenge a { font-weight: 600; text-decoration: none; }
body.portal .anhaenge a:hover { text-decoration: underline; }

/* Der Verlauf als Unterhaltung: unsere Beitraege links am blauen Balken, die
   des Kunden rechts eingerueckt und flaechig abgesetzt. Nicht Sprechblasen mit
   Spitzen -- das waere ein Chatfenster, und hier geht es um einen Vorgang. */
body.portal .verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
body.portal .verlauf li { display: block; padding: 12px 15px; border: 1px solid var(--linie);
                          border-radius: 9px; background: var(--flaeche-2); font-size: 14.5px; }
body.portal .verlauf li.von-uns { border-left: 3px solid var(--blau); }
body.portal .verlauf li.von-kunde { margin-left: clamp(0px, 6vw, 64px);
                                    background: color-mix(in srgb, var(--blau) 7%, var(--flaeche)); }
body.portal .verlauf-kopf { display: flex; align-items: baseline; justify-content: space-between;
                            gap: 12px; margin-bottom: 6px; }
body.portal .verlauf-wer { font-weight: 600; font-size: 13.5px; }
body.portal .verlauf-kopf .klein { margin: 0; white-space: nowrap; }
/* Umbrueche des Kunden bleiben erhalten; ein langes Wort sprengt nicht die
   Karte. Der Text ist Kundeneingabe und wird von Razor kodiert. */
body.portal .verlauf-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Antwortfeld und Anhang-Formular als abgesetzter Block: Sie sind die
   Handlung der Seite und standen vorher nackt zwischen den Absaetzen. */
body.portal .antwort, body.portal .anhang-hoch {
  margin-top: 18px; padding: 16px 17px; background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: 9px;
}
body.portal .antwort .feld, body.portal .anhang-hoch .feld { display: block; margin-bottom: 12px; }
body.portal .feld > span { display: block; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                           font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
                           color: var(--leise); margin-bottom: 6px; }
body.portal .antwort textarea { width: 100%; box-sizing: border-box; }
body.portal .anhang-hoch .klein { margin: 10px 0 0; }

/* ---- Eskalationsband ----

   Ueber der ganzen Inhaltsbreite, noch vor dem Kopf (Festlegung Sebi). Rot
   flaechig und nicht nur ein roter Rand: Der Vorgang hat eine Frist gerissen,
   das ist keine Randnotiz. Rot-sanft als Grund statt Vollrot -- Vollrot mit
   weisser Schrift liest sich als Fehlermeldung der Anwendung, hier ist aber
   die LAGE rot, nicht die Seite kaputt. */
.eskalationsband {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0 0 18px; padding: 12px 15px;
  background: var(--rot-sanft);
  border: 1px solid color-mix(in srgb, var(--rot) 45%, transparent);
  border-left: 4px solid var(--rot);
  border-radius: 8px;
  color: var(--warnschrift);
  font-size: 14px; line-height: 1.5;
}
.eskalationsband b { color: var(--rot); }
.eskalationsband-zeichen {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--rot); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; line-height: 1;
}

/* Lange Geraete- und Personennamen in der Randspalte umbrechen, statt die
   Spalte zu sprengen (Befund Sebi: TeamViewer-Namen und "Johanna von
   Mettlach-Orscholz"). anywhere greift auch ohne Leerzeichen im Namen. */
.tv-name, .person-name, .bearbeiter-name, .leistenblock a { overflow-wrap: anywhere; }

/* Frist in zwei Zeilen: Stand mit Stufe oben, Ziel darunter (Festlegung
   Sebi). Als Raster und nicht mit <br>: Der Umbruch ist Aufbau, keine
   Auszeichnung — und die Stufe soll neben dem Stand bleiben, auch wenn der
   Text laenger wird. */
.fristzelle { display: grid; gap: 2px; }
.fristzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Der Stand eines abgeschlossenen Vorgangs ohne das Blau: In der Liste
   stuenden sonst zehn gleich kraeftige Plaketten, und die eine offene ginge
   darin unter. Blau heisst hier "laeuft noch". */
body.portal .portal-stand.erledigt {
  background: var(--grau-sanft);
  border-color: var(--linie-stark);
  color: var(--leise);
  font-weight: 600;
}

/* Der Name in der Portalleiste fuehrt zum Konto -- also sieht er nicht wie
   ein Verweis aus, sondern wie die Angabe, die er ist, bis man darauf zeigt. */
body.portal a.person { text-decoration: none; color: inherit; border-radius: 7px;
                       padding: 3px 7px; }
body.portal a.person:hover { background: var(--flaeche-2); }

/* Die Anschrift bekommt denselben Rahmen wie die Vertragsbox. Vorher stand
   sie als nackte Liste neben einer gerahmten Box -- das sah aus, als fehle
   ihr etwas, und liess den Block nach rechts auseinanderfallen. */
.kundenkarte { position: relative; background: var(--flaeche-2);
               border: 1px solid var(--linie); border-radius: 10px;
               padding: 14px 16px; }
.kundenkarte .karte-bearbeiten { position: absolute; top: 12px; right: 14px; }

/* Ein fehlendes Projekt nach dem Kundenwechsel ist kein Fehler, aber eine
   offene Aufgabe -- gelb und nicht rot. */
.warnzeile { color: var(--gelb); }

/* Die Merkhilfe fuers Kennwort: ein ruhiger Kasten, kein Warnhinweis. Sie
   soll gelesen werden, bevor jemand tippt -- deshalb steht sie ueber dem
   Feld und nicht als Kleingedrucktes darunter. */
.passwortsatz { margin: 0 0 14px; padding: 12px 14px; border-radius: 9px;
                background: color-mix(in srgb, var(--blau) 9%, transparent);
                border: 1px solid color-mix(in srgb, var(--blau) 35%, transparent);
                font-size: 13.5px; line-height: 1.5; }
.passwortsatz p { margin: 0; }
.passwortsatz p + p { margin-top: 7px; }
.passwortsatz .mono { background: var(--flaeche-2); border-radius: 5px; padding: 1px 5px; }

/* ---- Glocke und Inbox ----

   Die Glocke bleibt ruhig, solange nichts offen ist: nur das Symbol in der
   leisen Schriftfarbe. Erst mit Ungelesenem bekommt sie die Zahl und die
   Akzentfarbe. Eine Glocke, die immer leuchtet, ist keine. */
.glocke { display: inline-flex; align-items: center; gap: 5px; position: relative;
          padding: 8px; border-radius: 9px; color: var(--leise);
          text-decoration: none; }
.glocke svg { width: 24px; height: 24px; fill: none; stroke: currentColor;
              stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.glocke:hover { background: var(--flaeche-2); color: var(--schrift); }
.glocke.brennt { color: var(--akzent); }
.glockenzahl { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
               font-size: 11px; font-weight: 700; line-height: 1;
               background: var(--rot); color: #fff; border-radius: 999px;
               padding: 3px 6px; }

/* ---- Wer Dienst hat ----

   Ruhig, nicht laut: Der Dienstplan ist eine Auskunft und kein Alarm, und er
   steht direkt neben der Glocke, die auffallen soll. Deshalb leise Schrift auf
   ruhiger Flaeche -- und ohne Rahmen, damit die Leiste nicht in Kaesten zerfaellt.

   Unbesetzt bekommt die rote Schrift: Dann faellt jede Eskalation an einem
   Vorgang ohne Bearbeiter auf den Eskalationsmanager zurueck, und das ist eine
   Lage, die jemand nachtragen soll. */
.dienstanzeige { display: inline-flex; align-items: center; gap: 6px;
                 padding: 6px 10px; border-radius: 9px; color: var(--leise);
                 background: var(--flaeche-2); font-size: 12px; }
.dienstanzeige .dienstwort { font-weight: 600; letter-spacing: .01em; }
.dienstanzeige.unbesetzt { color: var(--rot); }

/* Auf schmalen Schirmen bleibt das Sinnbild und der Text geht: Die Kuerzel sind
   dort nicht zu lesen, und die Leiste braucht den Platz fuer die Bereiche. */
@media (max-width: 900px) {
    .dienstanzeige .dienstwort { display: none; }
}

.meldungsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.meldungsliste li { padding: 12px 15px; background: var(--flaeche-2);
                    border: 1px solid var(--linie); border-radius: 9px; }
/* Gelesenes bleibt lesbar, tritt aber zurueck -- es steht nur noch als
   Nachweis da, nicht mehr als Aufgabe. */
.meldungsliste li.gelesen { background: transparent; opacity: .62; }
.meldungszeile { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.meldungstext { margin: 0 0 8px; font-size: 14.5px; overflow-wrap: anywhere; }
.meldungstext a { text-decoration: none; }
.meldungstext a:hover { text-decoration: underline; }

/* Die Kenndaten aus der Beschreibung: derselbe Aufbau wie die Eckdaten im
   Portal -- Beschriftung und Wert in EINER Zelle, damit der Umbruch sie nicht
   auseinanderreisst. */
.kenndaten { display: grid; gap: 12px 22px; margin: 0 0 14px; padding: 13px 15px;
             grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
             background: var(--flaeche-2); border: 1px solid var(--linie);
             border-radius: 9px; }
.kenndaten .fakt { min-width: 0; }
.kenndaten dt { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
                color: var(--leise); margin-bottom: 3px; }
.kenndaten dd { margin: 0; font-size: 14.5px; }

/* Das Original steht eingeklappt darunter -- es ist der Beleg, nicht die
   Arbeitsansicht. */
.originalbeschreibung { margin: 0; }
.originalbeschreibung summary h3 { display: inline-block; margin: 0; font-size: 13px;
                                   font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                                   letter-spacing: .12em; text-transform: uppercase;
                                   color: var(--leise); font-weight: 600; }
.originalbeschreibung .beschreibungstext { margin-top: 8px; white-space: pre-wrap;
                                           overflow-wrap: anywhere; }

/* Die Servicetage als Kästchenreihe: sieben Schalter nebeneinander, die man
   in einem Blick erfasst. Eine Auswahlliste mit Mehrfachauswahl wäre für
   sieben feste Werte die umständlichere Bedienung. */
.tagewahl { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.tagkasten { display: inline-flex; align-items: center; gap: 6px;
             padding: 7px 12px; border-radius: 8px; font-size: 14px;
             background: var(--flaeche-2); border: 1px solid var(--linie);
             cursor: pointer; }
.tagkasten:hover { border-color: var(--linie-stark); }
/* :has statt einer Klasse am Element: ohne Skript im Browser gibt es keinen
   anderen Weg, den angehakten Zustand am Rahmen zu zeigen. */
.tagkasten:has(input:checked) { background: var(--akzent-sanft);
                                border-color: var(--akzent-linie); }
.unterabschnitt { margin: 20px 0 8px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
                  color: var(--leise); font-weight: 600; }

/* Der Haken statt des Wortes "abhaken" in den Meldungen. Gross genug zum
   Treffen (36 px), ruhig in der Farbe, gruen erst beim Zeigen -- die Liste
   soll nicht aussehen wie ein Formular voller Schalter. */
/* Groesser (Festlegung Sebi): Der Haken ist die einzige Handlung in der
   Zeile -- er darf nicht kleiner sein als das, was ihn umgibt. */
.hakenknopf { display: inline-flex; align-items: center; justify-content: center;
              width: 44px; height: 44px; padding: 0; border-radius: 9px;
              background: var(--flaeche); border: 1px solid var(--linie-stark);
              color: var(--leise); cursor: pointer; }
.hakenknopf svg { width: 24px; height: 24px; fill: none; stroke: currentColor;
                  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hakenknopf:hover { color: var(--gruen); border-color: var(--gruen);
                    background: var(--gruen-sanft); }

/* Kundenwahl im Posteingang: Beschriftung, Liste und Knopf in einer Zeile,
   die auf schmalen Schirmen umbricht. */
.zuordnen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            margin-top: 8px; }
.zuordnen > label { flex-basis: 100%; color: var(--leise); }
.zuordnen select { min-width: 260px; max-width: 100%; background: var(--flaeche-2);
                   color: var(--schrift); border: 1px solid var(--linie-stark);
                   border-radius: 7px; padding: 5px 8px; font: inherit; }

/* Verwaltung und Einstellungen als Symbole in der Kopfleiste (Festlegung
   Sebi). Gleiche Groesse wie die Glocke daneben, damit die drei eine Reihe
   ergeben und nicht drei Einzelstuecke. */
/* Groesser (Festlegung Sebi): 42px Flaeche, 24px Zeichnung. Ein Symbol ohne
   Wort muss von selbst ins Auge fallen -- sonst hat man das Wort gespart und
   das Ziel gleich mit. Die Glocke zieht mit. */
.leiste-nav .leistensymbol { display: inline-flex; align-items: center;
                             justify-content: center; width: 42px; height: 42px;
                             padding: 0; border-radius: 9px; color: var(--leise); }
.leiste-nav .leistensymbol svg { width: 24px; height: 24px; fill: none;
                                 stroke: currentColor; stroke-width: 1.6;
                                 stroke-linecap: round; stroke-linejoin: round;
                                 margin: 0; }
.leiste-nav .leistensymbol:hover { background: var(--flaeche-2); color: var(--schrift); }
.leiste-nav .leistensymbol.aktiv { color: var(--akzent); background: var(--akzent-sanft); }

/* ---- Posteingang in zwei Spalten (Festlegung Sebi, nach dem Artefakt) ----

   Links die Nachrichten, rechts der Entwurf. Unter 1000px fallen sie
   untereinander: Auf einem schmalen Schirm ist ein zweispaltiges Formular
   unbedienbar, und der Posteingang wird auch am Laptop benutzt. */
.post-spalten { display: grid; gap: 22px; margin-bottom: 26px; }
@media (min-width: 1000px) {
  .post-spalten { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
}

.post-liste .posteingang { margin: 0; }
/* Die ganze Zeile ist der Verweis -- ein Klick irgendwo darauf waehlt die
   Nachricht. Ein kleiner "öffnen"-Verweis am Rand waere ein Zielchen, das man
   trifft oder nicht. */
.post-zeile { display: block; text-decoration: none; color: inherit; }
.post-liste li { cursor: pointer; }
.post-liste li:hover { border-color: var(--linie-stark); }
.post-liste li.gewaehlt { border-color: var(--akzent);
                          background: color-mix(in srgb, var(--blau) 10%, var(--flaeche-2)); }

.post-entwurf { background: var(--flaeche-2); border: 1px solid var(--linie);
                border-radius: 10px; padding: 18px 20px; }
.post-entwurf h2 { margin-top: 0; }
.entwurf-kunde { padding-bottom: 14px; margin-bottom: 14px;
                 border-bottom: 1px solid var(--linie); }
.entwurf-reihe { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .entwurf-reihe { grid-template-columns: 1fr; } }
.entwurf textarea, .entwurf input[type="text"] { width: 100%; box-sizing: border-box; }
/* Der Mailtext im Nur-Lesen-Fall (Antwort auf einen bestehenden Vorgang):
   Umbrueche bleiben, lange Zeilen sprengen die Spalte nicht. */
.entwurf-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px;
                background: var(--flaeche); border: 1px solid var(--linie);
                border-radius: 8px; padding: 12px 14px; margin-bottom: 14px;
                max-height: 40vh; overflow-y: auto; }

/* Werkzeugzeile unter der Beschreibung: Knopf links, Erklärung daneben —
   damit niemand raten muss, was „Bereinigen" wegnimmt. */
.entwurf-werkzeuge { display: flex; align-items: flex-start; gap: 12px;
                     flex-wrap: wrap; margin: -4px 0 14px; }
.entwurf-werkzeuge .klein { flex: 1; min-width: 220px; margin: 0; }

/* Anhangauswahl im Entwurf: eine Zeile je Datei, Haken vorn, Größe hinten. */
.anhangwahl { border: 1px solid var(--linie); border-radius: 9px;
              padding: 10px 14px 4px; margin: 0 0 14px; }
.anhangwahl legend { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                     font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
                     color: var(--leise); padding: 0 6px; }
.anhangzeile { display: flex; align-items: baseline; gap: 10px; padding: 4px 0;
               font-size: 14px; cursor: pointer; }
.anhangzeile > span:first-of-type { overflow-wrap: anywhere; }
.anhangzeile .klein { margin-left: auto; white-space: nowrap; }

/* ---- Kleine Vorschau bei Bildanhaengen (Festlegung Sebi, 17.08.2026) ----

   Fest 56 Pixel hoch und nicht ueber die Bildbreite gesteuert: Eine Reihe
   Vorschauen soll EINE Zeilenhoehe haben, egal ob das Foto hoch oder quer ist.
   object-fit: cover schneidet dafuer den Rand weg -- das ist der richtige
   Tausch, weil es hier ums Wiedererkennen geht und nicht um das ganze Bild.

   Verkleinert wird NICHT im Erzeugnis: Das braeuchte eine Bildbibliothek als
   neuen Fremdbestandteil. Der Browser laedt das Original und rechnet es klein;
   loading="lazy" im Auszeichnungstext sorgt dafuer, dass er es erst tut, wenn
   die Zeile ins Bild kommt. */
.vorschaubild,
.vorschaubild img {
  display: block;
  height: 56px;
  width: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--linie);
  background: var(--flaeche-2);
  flex: none;
}

/* Der Griff um das Bild in der Anhangliste ist ein Verweis zum Herunterladen --
   das Bild selbst soll dabei nicht unterstrichen aussehen. */
.vorschaubild { padding: 0; border: 0; }

.anhangzeile.mit-vorschau { align-items: center; }

/* ---- GROESSER UND ZWEI NEBENEINANDER (Festlegung Sebi, 18.08.2026) ----

   56 Pixel reichten, um ein Bild wiederzuerkennen, das man schon kannte -- nicht
   aber, um auf einem Bildschirmfoto zu LESEN, welche Anzeige da klemmt. Mit 120
   Pixeln ist eine Fehlermeldung darauf erkennbar, und zwei Spalten halten die
   Liste trotzdem kurz: Vier Anhaenge sind zwei Zeilen statt vier.

   minmax(0, 1fr) und nicht 1fr: Ein langer Dateiname ohne Leerzeichen wuerde die
   Spalte sonst breiter machen, als das Raster erlaubt, und die zweite Spalte aus
   dem Kasten schieben. Das ist die haeufigste Falle an CSS-Rastern.

   Unter 640 Pixeln eine Spalte -- zwei Vorschauen nebeneinander sind am Telefon
   zwei halbe. */
.anhaenge.mit-vorschau {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.anhaenge.mit-vorschau li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.anhaenge.mit-vorschau .anhangtext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;                      /* laesst den Dateinamen umbrechen */
  overflow-wrap: anywhere;
}

.anhaenge.mit-vorschau .vorschaubild,
.anhaenge.mit-vorschau .vorschaubild img {
  height: 120px;
  width: 120px;
}

/* Die Anhangwahl im Posteingang: dieselbe Ueberlegung, nur eine Nummer kleiner
   -- dort steht neben jeder Zeile noch ein Haken, und der Kasten ist schmaler. */
.anhangwahl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.anhangwahl legend { grid-column: 1 / -1; }
.anhangwahl > p { grid-column: 1 / -1; margin: 0; }

.anhangzeile.mit-vorschau { align-items: center; gap: 10px; }
.anhangzeile .vorschaubild,
.anhangzeile img.vorschaubild { height: 96px; width: 96px; }

/* Die Groesse steht auf der rechten Seite -- bei zwei Spalten schiebt
   margin-left:auto sie sonst weit weg vom Namen. */
.anhangwahl .anhangzeile .klein { margin-left: 0; white-space: normal; }

@media (max-width: 640px) {
  .anhaenge.mit-vorschau,
  .anhangwahl { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Der Entwurf im Posteingang, zweite Fassung (Festlegung Sebi:
   „schöner, moderner gestalten") ----

   Der Block war ein Formular auf einer Fläche. Was fehlte, war die
   Gliederung: Kopf mit Herkunft, dann die Zuordnung, dann der Text, dann der
   Abschluss. Jetzt trägt jeder Abschnitt seinen eigenen ruhigen Grund, und
   die Trennlinien machen die Reihenfolge sichtbar, statt sie erraten zu
   lassen. */
.entwurf-kopf { display: flex; align-items: flex-start; justify-content: space-between;
                gap: 14px; padding-bottom: 12px; margin-bottom: 14px;
                border-bottom: 3px solid var(--blau); }
.entwurf-kopf h2 { margin: 0 0 3px; }
.entwurf-kopf .klein { margin: 0; overflow-wrap: anywhere; }

/* Auswahl und Knopf in einer Zeile: „Kunde übernehmen" ist weg, geblieben ist
   ein Knopf, der nachlädt — und der auch nur so heißt. */
.feldreihe { display: flex; gap: 8px; align-items: center; }
.feldreihe select { flex: 1; min-width: 0; }

/* Der Werkzeugknopf: größer als ein Flachknopf, mit Symbol, aber ruhiger als
   der Abschlussknopf. Er ist ein Angebot, keine Aufforderung. */
.knopf-werkzeug { display: inline-flex; align-items: center; gap: 8px;
                  font-family: inherit; font-size: 14px; font-weight: 600;
                  padding: 9px 16px; border-radius: 9px; cursor: pointer;
                  color: var(--akzent); background: var(--akzent-sanft);
                  border: 1px solid var(--akzent-linie); }
.knopf-werkzeug svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
                      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.knopf-werkzeug:hover { background: color-mix(in srgb, var(--blau) 22%, transparent);
                        border-color: var(--akzent); }

/* Der Abschluss abgesetzt: Hier entsteht etwas, das nicht zurückzunehmen ist. */
.entwurf-abschluss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                     margin-top: 18px; padding-top: 14px;
                     border-top: 1px solid var(--linie); }
.entwurf-abschluss .klein { margin: 0; flex: 1; min-width: 200px; }

/* Die eingearbeitete Mail: eingeklappt, unter allem, als Beleg. */
.eingearbeitet { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie); }
.eingearbeitet summary h3 { display: inline-block; margin: 0; font-size: 13px;
                            font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
                            letter-spacing: .12em; text-transform: uppercase;
                            color: var(--leise); font-weight: 600; }
.eingearbeitet .entwurf-text { margin-top: 10px; }

/* „Original E-Mail" ist ein Knopf, technisch aber ein <summary> — der
   Klapp-Pfeil des Browsers muss weg, sonst sieht der Knopf aus wie eine
   halb aufgeräumte Liste. */
.eingearbeitet > summary { list-style: none; cursor: pointer; }
.eingearbeitet > summary::-webkit-details-marker { display: none; }
.eingearbeitet[open] > summary { background: var(--flaeche);
                                 border-color: var(--linie-stark); color: var(--schrift); }
.eingearbeitet > .klein { margin: 10px 0 0; }

/* Die Karte des Sprachmodells hebt sich ab: Sie ist die einzige Verbindung,
   bei der Daten das Haus verlassen. */
.sprachmodellkarte { border-color: var(--akzent-linie); }
.achtung-kasten { background: var(--rot-sanft);
                  border: 1px solid color-mix(in srgb, var(--rot) 35%, transparent);
                  border-left: 3px solid var(--rot); border-radius: 8px;
                  padding: 10px 13px; margin: 12px 0; font-size: 13px; }
.feld-quer { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.feld-quer > span { margin: 0; }

/* Ankreuzfelder linksbuendig, ueberall (Festlegung Sebi, 16.08.2026).

   Die Ursache stand weiter oben: `.feld input { width: 100% }` trifft auch
   ein <input type="checkbox">. Das Kaestchen wurde dadurch so breit wie die
   Zeile und zeichnete sich in der MITTE dieser Breite -- es sah aus, als sei
   es absichtlich zentriert, und die Beschriftung stand einsam am rechten Rand.
   Hier zurueckgenommen statt an jeder Fundstelle einzeln: Es gilt fuer
   Mitarbeiter, Agenten und alles, was noch dazukommt. */
.feld input[type="checkbox"],
.feld input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

/* Die Glocke, dritter und letzter Anlauf (Festlegung Sebi, 15.08.2026: "Die
   alte Glocke fand ich besser. Darf noch groesser sein").

   ZURUECK ZUR ZAHL DANEBEN. Zwischendurch sass sie als Plakette AUF dem
   Symbol. Das ist die Bauart, die man aus Telefonen kennt -- dort aber auf
   einem grossen, farbigen Sinnbild. Hier lag eine rote Sprechblase auf einer
   duennen Strichzeichnung und machte beides schlechter lesbar: Das Symbol war
   angeknabbert, und die Zahl musste winzig bleiben, um daraufzupassen.
   Nebeneinander darf die Zahl so gross sein wie sie sein soll.

   UND GROESSER: 40 px Symbol, die Zahl auf 15 px. Sie ist damit groesser als
   jede andere Schrift in der Leiste -- genau das ist der Zweck. Eine Meldung,
   die man uebersieht, ist keine. */
/* VIERTER ANLAUF (Festlegung Sebi, 15.08.2026: "Die Zahl der Meldungen an die
   Glocke haengen"). Die Zahl haengt jetzt AM Symbol -- oben rechts, wie an
   einer Glocke, die laeutet. Was den dritten Anlauf scheitern liess, war nicht
   die Anordnung, sondern die Groesse: eine 10-px-Zahl auf einer 24-px-
   Strichzeichnung. Mit dem farbigen Sinnbild und 13 px traegt die Plakette. */
.glocke { padding: 6px 8px; gap: 0; }
.glocke.brennt { color: var(--rot); }

.glocke .glockenzahl {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.1;
  padding: 2px 5px;
  /* Der Strich in der Farbe des Untergrunds trennt die Plakette vom Symbol --
     ohne ihn laufen Rot und das Gelb der Glocke ineinander. */
  border: 2px solid var(--grund);
  box-shadow: 0 1px 3px rgb(0 0 0 / .45);
}

/* Aehnliche Vorgaenge (Festlegung Sebi, 15.08.2026). Als Liste mit Abstand
   statt als Tabelle: Jeder Eintrag hat unterschiedlich viel zu sagen -- mal
   nur Betreff, mal Begruendung und Loesung darunter -- und Tabellenzeilen
   unterschiedlicher Hoehe lesen sich schlecht. */
.aehnliche { list-style: none; margin: 0; padding: 0; }

.aehnliche > li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--linie);
}

.aehnliche > li:last-child { border-bottom: 0; }

.aehnlich-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}

.aehnlich-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  color: var(--leise);
}

/* Die Begruendung des Modells eingerueckt und mit Strich: Sie ist eine
   Aussage UEBER den Eintrag, nicht Teil davon -- und sie stammt nicht von
   einem Menschen. */
.aehnlich-grund {
  margin: .35rem 0 0;
  padding-left: .6rem;
  border-left: 3px solid var(--blau);
  font-style: italic;
}

/* ---- Kundenportal: Kategorie-Vorauswahl (Festlegung Sebi, 15.08.2026) ----

   Drei Kacheln statt eines Auswahlfelds. Der farbige Streifen links traegt die
   Bedeutung: rot fuer die Stoerung, blau fuer alles Geplante. Das ist die
   einzige Stelle im Portal, an der Rot vorkommt -- deshalb wirkt es. */
.portal-arten {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.portal-art {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--blau);
  border-radius: .6rem;
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
}

/* Die Stoerung ist der eilige Weg und traegt als einzige die Signalfarbe.

   Die Bestellung bekommt Gruen (Festlegung Sebi, 16.08.2026): Sie ist der
   ruhige der drei Wege -- nichts steht still, es geht etwas zur Neige. Drei
   Kacheln in zwei Farben liessen die dritte wie eine Wiederholung der zweiten
   aussehen; mit Gruen ist auf einen Blick zu sehen, dass es drei Wege sind.

   --gruen und nicht ein neuer Wert: Es ist in beiden Themen hinterlegt und
   traegt auf hellem wie auf dunklem Grund. */
.portal-art.art-störung,
.portal-art.art-stoerung { border-left-color: var(--rot); }

.portal-art.art-verbrauchsmaterial { border-left-color: var(--gruen); }

.portal-art:hover,
.portal-art:focus-visible {
  border-color: var(--blau);
  /* Kein Verschieben beim Zeigen: Eine Kachel, die springt, laesst den
     Mauszeiger danebengreifen. Nur die Kante wird deutlicher. */
  box-shadow: 0 0 0 1px var(--blau);
}

.portal-art-titel { font-weight: 600; font-size: 1.05rem; }
.portal-art-text  { color: var(--leise); font-size: .9rem; line-height: 1.45; }

/* Der Rueckweg als Knopf statt als Kleingedrucktes (Festlegung Sebi:
   "Meine Meldungen groesser"). */
.portal-zurueck {
  display: inline-block;
  padding: .4rem .8rem;
  border: 1px solid var(--linie-stark);
  border-radius: .5rem;
  font-size: 1rem;
  text-decoration: none;
}

.portal-zurueck:hover,
.portal-zurueck:focus-visible { border-color: var(--blau); }

/* Die gewaehlte Kategorie ueber dem Formular: Erklaerung links, der Weg
   zurueck zur Wahl rechts. */
.portal-artzeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  margin-top: -.4rem;
}

/* Die Vorgangsliste im Portal steht seit dem 15.08.2026 UNTER den Kacheln und
   braucht deshalb eine eigene Ueberschrift -- vorher trug sie den Seitentitel. */
.portal-listentitel { margin: 2rem 0 .6rem; font-size: 1.15rem; }

/* Die Loesungsmaske (Festlegung Sebi, 15.08.2026). Breiter als die
   Uebergangsmaske: Neben dem Textfeld stehen drei Vorschlaege mit ihrem
   Loesungstext, und die will man lesen koennen, ohne zu scrollen. */
.loesungsfenster { max-width: 46rem; }

.vorschlagstitel { margin: 1rem 0 .5rem; font-size: 1rem; }

.vorschlaege { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }

.vorschlaege > li {
  padding: .7rem .9rem;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: .5rem;
}

.vorschlag-kopf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }

/* Die gemeinsamen Woerter sind die BEGRUENDUNG des Vorschlags -- sie stehen
   deshalb naeher am Kopf als am Text. */
.vorschlag-gemeinsam { margin: .3rem 0 .4rem; color: var(--leise); }

/* Der Loesungstext des Altvorgangs gedeckelt: Drei ausufernde Vorschlaege
   schoeben das eigene Feld aus dem Bild. */
.vorschlag-text {
  margin: 0 0 .5rem;
  max-height: 7.5rem;
  overflow-y: auto;
}

.modalzeile { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }

/* ---- Vorschau der Kundenmail (Festlegung Sebi, 17.08.2026) ----

   Breiter als die Uebergangsmaske: Hier steht eine ganze Mail, und die will man
   lesen koennen, ohne in einem 540px-Fenster zu scrollen. */
.mailfenster { max-width: 44rem; }

.mailkopf {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linie);
}

.mailkopf dt { color: var(--leise); font-size: 13px; }
.mailkopf dd { margin: 0; }

/* Der Mailtext abgesetzt wie ein Zitat -- er ist nicht unser Text auf dieser
   Seite, sondern das, was hinausgeht. */
.mailkoerper {
  padding: 12px 14px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: 6px;
  max-height: 40vh;
  overflow-y: auto;
  font-size: 14px;
}

/* Der Papierflieger im Senden-Knopf (Festlegung Sebi: "Senden mit Symbol"). */
.sendezeichen {
  width: 15px;
  height: 15px;
  fill: currentColor;
  margin-right: 7px;
  vertical-align: -2px;
}

/* ---- Eingefuegte Bilder am Kommentar (Festlegung Sebi, 17.08.2026) ---- */
.einfueggalerie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.einfueggalerie:empty { display: none; }

.einfuegbild { position: relative; display: inline-block; }

.einfuegbild img {
  display: block;
  height: 72px;
  width: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--linie);
}

/* Das Kreuz zum Entfernen sitzt IM Bild, oben rechts -- ein Knopf daneben
   verdoppelte die Breite je Vorschau. */
.einfuegweg {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: var(--anthrazit);
  border: 1px solid var(--flaeche);
  border-radius: 999px;
  cursor: pointer;
}

/* ---- "Der Agent arbeitet" (Festlegung Sebi, 17.08.2026) ----

   Das Zeichen dreht, solange die Antwort aussteht. Ein gedrehtes Zeichen und
   keine zweite Grafik: Es ist derselbe Funke, nur in Bewegung -- der Knopf
   bleibt derselbe Knopf.

   prefers-reduced-motion beachtet: Wer Bewegung abgeschaltet hat, bekommt statt
   der Drehung eine gedaempfte Darstellung. Die Aussage "es laeuft" bleibt, der
   Weg dorthin ist ein anderer. */
@keyframes agentdreht { to { transform: rotate(360deg); } }

.knopf-agentzeichen.arbeitet .agentenzeichen,
.knopf-agent.arbeitet .agentenzeichen {
  animation: agentdreht 1.1s linear infinite;
}

.knopf-agentzeichen.arbeitet,
.knopf-agent.arbeitet { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .knopf-agentzeichen.arbeitet .agentenzeichen,
  .knopf-agent.arbeitet .agentenzeichen { animation: none; opacity: .5; }
}

/* ---- Auf eine E-Mail antworten (Festlegung Sebi, 17.08.2026) ----

   Als Symbol in der Kopfzeile der Mail, rechts. margin-left: auto schiebt ihn
   an den Rand, ohne dass die Kopfzeile ein eigenes Raster braucht. */
.knopf-antwort {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
  color: var(--akzent);
}

.knopf-antwort svg { width: 18px; height: 18px; fill: currentColor; }
.knopf-antwort:hover { background: var(--flaeche-2); }

/* Der Antwort-Knopf ist seit dem 18.08.2026 ein Formular (er startet die Uhr).
   Knopf und Formular duerfen die Kopfzeile der Mail nicht auseinanderziehen. */
.antwortform { margin: 0; display: contents; }
button.knopf-antwort { border: 0; background: none; cursor: pointer; padding: 0; }

/* Der Agent oben rechts im Posteingang-Entwurf (Festlegung Sebi, 18.08.2026).
   Zeichen und Marke "Entwurf" in einer Zeile, das Zeichen zuerst: Es ist die
   Handlung, die Marke nur eine Auskunft. */
.entwurf-kopfrechts { display: inline-flex; align-items: center; gap: 10px; }
.entwurf-kopfrechts .agentform { margin: 0; display: contents; }

/* ---- Dateien hierher ziehen (Festlegung Sebi, 18.08.2026) ----

   Der Kasten ist IMMER sichtbar, gestrichelt und ruhig; beim Ziehen wird der
   Rahmen ROT und die Flaeche leicht getoent. Rot heisst im Service-Center sonst
   "eskaliert" -- hier ist es ausdruecklich anders bestellt, und es traegt: Ein
   Ziel, das man nur erkennt, wenn man schon richtig gezogen hat, ist keines.

   pointer-events an den Kindern aus, solange gezogen wird: Sonst feuert
   dragleave beim Ueberfahren des Knopfes und der Rahmen flackert. */
.ablage {
  margin: 12px 0 0;
  padding: 14px;
  border: 2px dashed var(--linie-stark);
  border-radius: 10px;
  background: var(--flaeche-2);
  transition: border-color .12s, background-color .12s;
}

.ablage.zieht {
  border-color: var(--rot);
  background: var(--rot-sanft);
}

.ablage.zieht * { pointer-events: none; }

.ablagefeld { margin: 0 0 8px; }

.ablagehinweis { display: block; margin-top: 6px; color: var(--leise); }
.ablage.zieht .ablagehinweis { color: var(--warnschrift); }

/* ---- Der Papierkorb im Ablaufeditor (Festlegung Sebi, 18.08.2026) ----

   Ein HAKEN mit Papierkorb-Zeichen und kein Knopf: Die Tabelle hat EIN
   Speichern, und ein Loeschknopf je Zeile wuerde die uebrigen Aenderungen
   unterwegs verlieren. Angehakt wird rot -- hier heisst Rot dasselbe wie sonst:
   Das ist die Zeile, die verschwindet. */
.weghaken {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--leise);
  padding: 4px 6px;
  border-radius: 6px;
}

/* GROESSER, zweiter Anlauf (Befund Sebi, 19.08.2026: "Vergroessere die winzigen
   Papierkoerbe").

   16 Pixel waren zu klein, 22 waren es noch. Der Grund ist die Umgebung: In der
   Zeile stehen Textfelder mit 34 Pixeln Hoehe und ein Auswahlfeld daneben -- ein
   Zeichen von 22 Pixeln ist dort nicht klein, sondern es verschwindet. Jetzt 28
   Pixel mit kraeftigerem Strich, und das Ankreuzfeld daneben waechst mit: Die
   beiden sind EIN Bedienelement und sollen auch so aussehen.

   Dazu Innenabstand: Die Trefferflaeche ist damit ueber 40 Pixel hoch -- das ist
   die Groesse, die man mit der Maus nicht verfehlt und mit dem Finger trifft. */
.weghaken svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8;
}

.weghaken input[type="checkbox"] {
  width: 17px;
  height: 17px;
}

/* Beim Ueberfahren ein Grund: Die Flaeche zeigt, dass sie ein Griff ist. */
.weghaken:hover { background: var(--rot-sanft); }

.weghaken:hover { color: var(--rot); }
.weghaken:has(input:checked) { color: var(--rot); }

/* Angehakt: Das Zeichen tritt hervor -- diese Zeile verschwindet beim
   Speichern, und das darf man sehen, bevor man drueckt. */
.weghaken:has(input:checked) svg { stroke-width: 2; }

/* ---- Zeitbuchungen korrigieren (Festlegung Sebi, 18.08.2026) ---- */
.zeitzelle { display: flex; align-items: baseline; gap: 10px; }

/* Überschrift und Stift auf einer Höhe, der Stift rechts am Rand des Kastens
   (20.08.2026). Dieselbe Machart wie in der Verbindungsliste. */
.blockkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.blockkopf h3 { margin: 0; }

.blockkopf .stift {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  color: var(--leise);
  text-decoration: none;
}

.blockkopf .stift svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blockkopf .stift:hover { color: var(--akzent); background: var(--akzent-sanft); }

/* Die Buchungen im FENSTER (20.08.2026): Dort ist Platz für eine echte Tabelle.
   In der Randspalte brach jede Zeile dreimal um -- deshalb stand hier vorher ein
   Raster mit umgebrochenen Feldern. */
.zeitliste td { vertical-align: middle; }
.zeitliste input[type="number"] { width: 5.5rem; }
.zeitliste input[type="text"] { width: 100%; }
.zeitliste form { margin: 0; }

/* Die abgeschlossene Loesung im Vorgang: gruen abgesetzt, weil sie das
   Ergebnis ist und nicht eine weitere Notiz im Verlauf. */
.loesungsblock {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--gruen);
  border-radius: .5rem;
}

.loesungsblock h3 { margin: 0 0 .4rem; font-size: 1rem; }

/* Der Zusammenfassungsagent. Blau abgesetzt wie die Begruendungen der
   aehnlichen Vorgaenge: Beides ist eine Aussage des Sprachmodells UEBER den
   Vorgang, nicht Inhalt des Vorgangs. Wer die Farbe einmal gelernt hat, weiss
   ohne Lesen, woher der Text stammt. */
.agentblock {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--blau);
  border-radius: .5rem;
}

.agentblock h3 { margin: 0 0 .4rem; font-size: 1rem; }
.agent-titel { margin: .7rem 0 .2rem; font-weight: 600; color: var(--leise); }
.agent-punkte { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.agent-fuss { margin: .8rem 0 0; color: var(--leise); }

/* Die Loesung eines aehnlichen Vorgangs in Gruen (Festlegung Sebi,
   15.08.2026). Gruen ist im Haus die Farbe des Abgeschlossenen -- der
   Zustandsbalken traegt sie, die gebuchte Loesung traegt sie. Hier heisst sie
   dasselbe: Das hat funktioniert. */
.aehnlich-loesung {
  margin: .4rem 0 0;
  padding-left: .6rem;
  border-left: 3px solid var(--gruen);
  color: var(--gruen);
}

/* Die Auszeichnung "Loesung:" darf nicht heller sein als der Satz dahinter --
   sonst liest sich die Farbe als Hervorhebung EINES Wortes statt als
   Kennzeichnung des ganzen Absatzes. */
.aehnlich-loesung b { color: inherit; }

/* Wiki-Treffer in der Loesungsmaske: dieselbe Kachelform wie die
   Loesungsvorschlaege, aber blau statt gruen abgesetzt. Gruen heisst hier
   ueberall "hat funktioniert" -- eine Anleitung hat noch gar nichts
   funktioniert, sie beschreibt nur, wie es gedacht ist. */
.wikitreffer > li { border-left: 3px solid var(--blau); }

/* Die Glocke als farbiges Sinnbild (Festlegung Sebi, 15.08.2026: "Altes,
   farbiges Glockensymbol verwenden").

   32 px, also etwas kleiner als die 40 px der Strichzeichnung: Ein Sinnbild
   fuellt sein Feld ganz aus, eine Strichzeichnung laesst Luft. Bei gleicher
   Angabe wirkte es deutlich groesser als alles daneben.

   Die Farbe bringt es selbst mit -- .glocke.brennt faerbt deshalb nichts mehr
   am Symbol. Das Signal traegt die rote Zahl daneben, und die ist dafuer
   gross genug. */
.glockensymbol { font-size: 32px; line-height: 1; }

/* ---- Kategorieüberschriften als farbige Kästen (Festlegung Sebi,
     15.08.2026, Entwurf A mit einheitlichem blauem Streifen) ----

   Die Überschrift jeder Gruppe sitzt in einer eigenen Fläche mit blauem
   Streifen links. Die Seite gliedert sich damit in Blöcke, die man beim
   Überfliegen zählen kann, statt in eine Folge unterstrichener Zeilen.

   EINHEITLICH BLAU und nicht je Gruppe eine Farbe: Grün, Rot und Gelb
   bedeuten im Service-Center schon etwas -- gelöst, eskaliert, Frist knapp.
   Dieselben Farben an einer Überschrift hiessen dort plötzlich etwas anderes,
   und der Leser müsste eine Legende lernen, die er nirgends bekommt. Die
   Übersichtlichkeit kommt vom Kasten, nicht von der Farbvielfalt. */
.feldblock > summary,
.feldblock > h2 {
  background: var(--flaeche-2);
  border-left: 4px solid var(--blau);
  /* Keine runden Ecken bei einseitigem Rand -- sonst steht der Streifen
     neben der Rundung statt an ihr. */
  border-radius: 0;
  padding: 10px 14px;
  margin: -16px -18px 14px;
  /* Der Kasten sitzt buendig in der Karte: die negativen Aussenabstaende
     heben die Polsterung des Feldblocks auf. Oben zusaetzlich die Rundung
     der Karte nachziehen, damit er nicht darueber hinaussteht. */
  border-top-right-radius: 9px;
}

/* Die Ueberschrift IM Kasten braucht keinen eigenen Strich mehr -- der Kasten
   ist die Trennung. */
.feldblock > summary > h2,
.feldblock > h2 {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Das Dreieck des Aufklappers gehoert an die rechte Kante, nicht an die
   Ueberschrift geklebt. */
.feldblock > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.feldblock > summary::-webkit-details-marker { display: none; }

.feldblock > summary::after {
  content: "▸";
  color: var(--leise);
  font-size: 15px;
  transition: transform .12s ease;
}

.feldblock[open] > summary::after { transform: rotate(90deg); }

/* Farbe je Kategorie (Festlegung Sebi, 15.08.2026 — Nachtrag zu Entwurf A).

   Die Farbe steht fuer die ART der Gruppe, nicht fuer ihren Zustand:

     kat-daten      Stammdaten des Vorgangs
     kat-inhalt     was der Kunde geschickt hat (Beschreibung, Anhaenge)
     kat-hilfe      was uns beim Loesen hilft (aehnliche Vorgaenge)
     kat-austausch  was zwischen uns und dem Kunden lief (Kommentare)
     kat-verlauf    was das Programm mitgeschrieben hat

   ROT KOMMT NICHT VOR, und Gruen und Gelb nur gedeckt: Im Service-Center
   heisst Rot "eskaliert", Gruen "geloest", Gelb "Frist knapp". Ein
   Signalton an einer Ueberschrift wuerde daneben als Zustandsmeldung
   gelesen. Zwei Bedeutungen fuer eine Farbe sind eine zu viel. */
.feldblock.kat-daten     > summary { border-left-color: var(--blau); }
.feldblock.kat-inhalt    > summary { border-left-color: #7E8B96; }
.feldblock.kat-hilfe     > summary { border-left-color: #4E9E86; }
.feldblock.kat-austausch > summary { border-left-color: #9B7BC0; }
.feldblock.kat-verlauf   > summary { border-left-color: #B08A4E; }

/* Ueberschrift linksbuendig (Festlegung Sebi, 15.08.2026).

   Vorher stand im Kasten justify-content: space-between. Bei zwei Kindern
   (Ueberschrift und Dreieck) sah das richtig aus -- sobald aber ein drittes
   dazukam, etwa der Knopf "Kommentare zusammenfassen", verteilte space-between
   ALLE drei ueber die Breite und schob die Ueberschrift aus der Flucht der
   anderen Kaesten.

   Jetzt sammelt sich alles links, und was nach rechts gehoert, schiebt sich
   selbst dorthin. Damit stehen die Ueberschriften untereinander auf einer
   Linie, egal wie viel sonst in der Zeile steht. */
.feldblock > summary { justify-content: flex-start; text-align: left; }

.feldblock > summary > h2 { text-align: left; }

/* Die Ueberschrift nimmt den freien Platz, alles Weitere rueckt dadurch nach
   rechts. Zwei margin-left:auto nebeneinander waeren falsch -- sie teilen den
   freien Platz und setzen den Knopf in die Mitte statt an die Kante. */
.feldblock > summary > h2 { flex: 1; }

/* ---- Beschriftungen auf Sans (Festlegung Sebi, 15.08.2026) ----

   Bisher trug die Festbreitenschrift zweierlei: Angaben, die man ABLIEST
   (Vorgangsnummern, Datenträger- und Auftragsnummern, Kürzel, Zähler), und
   Beschriftungen, die man nur LIEST („ÜBERSCHRIFT", „ANSPRECHPARTNER",
   „DATEN"). Für die erste Gruppe ist sie richtig: SERVICE-010024 und
   SERVICE-01OO24 sind dort auseinanderzuhalten. Für die zweite war sie nur
   Unruhe — eine Beschriftung liest niemand Zeichen für Zeichen.

   Die Beschriftungen bleiben klein, gesperrt und in Großbuchstaben; das
   unterscheidet sie weiterhin vom Inhalt. Nur der Schnitt ist jetzt derselbe
   wie im übrigen Text.

   Was in Mono BLEIBT: .mono, .marke-fassung, .person-kurz, .bearbeiter-kuerzel,
   .glockenzahl, .filterzeile .zahl, .saeule .wert, .balken-prozent, .loz,
   .marke-e — also Nummern, Kürzel und Zähler. */
.feld > span,
body.portal .feld > span,
.stand dt,
.liste th,
.werkzeug-beschriftung,
.leistenblock h3,
.kundenliste h3,
.filtertitel,
.vertragsbox h3,
.zeiten-titel,
.frist-feld > span,
body.portal .fakten dt,
.kenndaten dt,
.unterabschnitt,
.anhangwahl legend {
  font-family: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
}

/* Die Knopfleiste der Agenten (Festlegung Sebi, 15.08.2026). Umbrechend, weil
   in der Verwaltung beliebig viele Agenten je Stelle angelegt werden koennen
   -- eine Zeile, die nicht umbricht, waere eine Zeitbombe. */
.agentenknoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.agentenknoepfe form { margin: 0; }

/* ---- Flexible Fensterbreite (Festlegung Sebi, 15.08.2026) ----

   Fest ist der Auslieferungszustand und bleibt unangetastet -- alles hier
   haengt an data-breite="flexibel" an der Wurzel. Wer nichts umstellt, merkt
   von diesem Abschnitt nichts.

   Die Karte gibt ihren Rand auf und wird zur Flaeche: Ein 20px schmaler
   Streifen links und rechts sieht nach Versehen aus, nicht nach Absicht. */

[data-breite="flexibel"] main,
[data-breite="flexibel"] main.breit {
  width: calc(100% - 24px);
  max-width: none;
}

/* Die Griffe. Sie stehen nur in der flexiblen Breite im Raster; sonst nimmt
   das Raster seine bisherige Spaltenaufteilung und der Griff verschwindet. */
.leistengriff { display: none; }

[data-breite="flexibel"] .leistengriff {
  display: block;
  width: 9px;
  align-self: stretch;
  min-height: 60px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: col-resize;
  /* Der Strich in der Mitte: sichtbar genug, um ihn zu finden, ruhig genug,
     um nicht zu stoeren. */
  background-image: linear-gradient(var(--linie), var(--linie));
  background-size: 1px 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image .12s;
}

[data-breite="flexibel"] .leistengriff:hover,
[data-breite="flexibel"] .leistengriff:focus-visible {
  background-image: linear-gradient(var(--akzent), var(--akzent));
  background-size: 3px 100%;
}

/* Waehrend des Ziehens: keine Textmarkierung und ueberall derselbe Zeiger --
   sonst flackert er, sobald die Maus den Griff verlaesst. */
body.zieht { user-select: none; cursor: col-resize; }
body.zieht * { cursor: col-resize !important; }

/* Vorgangsliste: die linke Sichtenleiste. */
[data-breite="flexibel"] .vorgaenge-spalten {
  grid-template-columns: var(--leiste-links, 220px) auto minmax(0, 1fr);
  gap: 0 12px;
}

/* Vorgangsansicht: die rechte Datenleiste. Der Griff steht VOR ihr, deshalb
   die Spalte dazwischen. */
@media (min-width: 1100px) {
  [data-breite="flexibel"] .vorgang-spalten {
    grid-template-columns: minmax(0, 1fr) auto var(--leiste-rechts, 380px);
    gap: 0 14px;
  }
}

/* Schmales Fenster: Da stapelt sich sowieso alles untereinander, und ein
   Griff zwischen zwei gestapelten Bloecken ergibt keinen Sinn. */
@media (max-width: 860px) {
  [data-breite="flexibel"] .vorgaenge-spalten { grid-template-columns: 1fr; }
  [data-breite="flexibel"] .leistengriff { display: none; }
}

@media (max-width: 1099px) {
  [data-breite="flexibel"] .vorgang-spalten .leistengriff { display: none; }
}

/* ---- Spaltenwahl der Vorgangsliste (Festlegung Sebi, 15.08.2026) ----

   Das Symbol sitzt in einer eigenen, schmalen letzten Kopfspalte. Der
   Klappkasten schwebt darunter und schiebt die Tabelle nicht auseinander --
   sonst springt beim Aufklappen die ganze Liste. */

.spaltenwahl-kopf { width: 1%; text-align: right; padding-right: 4px; }

.spaltenwahl { position: relative; display: inline-block; }

.spaltenwahl > summary {
  list-style: none;
  cursor: pointer;
  color: var(--leise);
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 0;
}

.spaltenwahl > summary::-webkit-details-marker { display: none; }
.spaltenwahl > summary:hover { color: var(--akzent); background: var(--flaeche-2); }
.spaltenwahl[open] > summary { color: var(--akzent); background: var(--flaeche-2); }

.spaltenwahl-kasten {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 250px;
  padding: 12px 14px;
  text-align: left;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
  box-shadow: var(--schatten);
  /* Die Kopfzeile ist in Versalien und Mono gesetzt -- der Kasten ist
     Fliesstext und erbt das nicht. */
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--schrift);
}

.spaltenwahl-kasten > form > .klein { margin: 0 0 8px; color: var(--leise); }

.spaltenwahl-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
}

.spaltenwahl-zeile input[disabled] { cursor: default; }
.spaltenwahl-zeile input[disabled] + span { color: var(--leise); }
.spaltenwahl-zeile .klein { margin-left: auto; color: var(--leiser); }

.spaltenwahl-fuss {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
}

/* ---- Ansprechpartner gleich anlegen (Festlegung Sebi, 15.08.2026) ----

   Das Symbol steht am Feld, der Kasten schwebt darunter und schiebt die
   Maske nicht auseinander -- sonst springt der halbe Entwurf beim Aufklappen. */

.kontaktanlage { position: relative; flex: 0 0 auto; }

.kontaktanlage > summary {
  list-style: none;
  cursor: pointer;
  color: var(--leise);
  padding: 6px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche-2);
  line-height: 0;
}

.kontaktanlage > summary::-webkit-details-marker { display: none; }
.kontaktanlage > summary:hover { color: var(--akzent); border-color: var(--akzent-linie); }
.kontaktanlage[open] > summary { color: var(--akzent); border-color: var(--akzent); }

.kontaktanlage-kasten {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 270px;
  padding: 12px 14px;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
  box-shadow: var(--schatten);
}

.kontaktanlage-kasten .feld { margin: 0 0 8px; }
.kontaktanlage-kasten .feld input { width: 100%; }

/* ---- Plakette und Abmelden (Festlegung Sebi, 16.08.2026) ---- */

/* Das Kundenlogo an der Stelle der Buchstaben. Weisser Grund und contain,
   damit ein Logo mit eigenem Rand nicht angeschnitten wird -- die meisten
   Kundenlogos sind fuer weissen Grund gemacht. */
.person-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  background: #FFFFFF;
  border: 1px solid var(--linie);
  flex: 0 0 auto;
}

/* Der Name in der Portalleiste. Vorher stand er IN der Plakette und lief
   heraus; jetzt steht er daneben, wo Platz ist. */
body.portal .person-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
body.portal .person { flex-wrap: wrap; column-gap: 8px; }
body.portal .person .person-rolle { flex-basis: 100%; margin-left: 36px; }

/* Abmelden als Symbol, rot (Festlegung Sebi): die einzige Handlung in der
   Leiste, die etwas beendet. */
.knopf-abmelden {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--rot);
  cursor: pointer;
}

.knopf-abmelden:hover,
.knopf-abmelden:focus-visible {
  background: color-mix(in srgb, var(--rot) 10%, transparent);
  border-color: color-mix(in srgb, var(--rot) 35%, transparent);
}

@media (max-width: 520px) {
  body.portal .person .person-rolle { display: none; }
}

/* Güte der TeamViewer-Zuordnung (Festlegung Sebi, 16.08.2026): Die Farbe sagt,
   wie genau hingesehen werden muss -- gruen darf man durchwinken, bernstein
   nicht. */
.guete-sicher        { color: var(--gruen); font-weight: 600; }
.guete-wahrscheinlich { color: var(--akzent); }
.guete-moeglich      { color: var(--gelb); }

/* ---- Kopf des Kundenportals (Festlegung Sebi, 16.08.2026) ----

   Zuschnitt der Confluence-Titelbilder. Der Grund ist in BEIDEN Themen
   derselbe: Er ist der Markenauftritt und folgt nicht der Vorliebe des
   Betrachters -- ein heller Banner waere ein anderer Banner. */

.portalbanner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 168px;
  padding: 26px 32px 26px 40px;
  margin: 0 0 26px;
  border-radius: 10px;
  /* Anthrazit mit einem Stich ins Blaugraue, wie im Titelbild. Zwei Stufen,
     damit die Flaeche nicht tot wirkt -- kein Verlauf ueber die ganze
     Breite, der flackert beim Aufbau. */
  background: #22303A;
  color: #FFFFFF;
  /* Der rote Streifen links: das dritte Markenzeichen neben Blau und
     Anthrazit, und die einzige Farbe, die hier Kante sein darf. */
  border-left: 5px solid var(--rot);
}

/* Das feine Raster. Zwei sich kreuzende Linienscharen aus einem
   wiederholten Verlauf -- kein Bild, also auch keine zweite Anfrage. */
.portalbanner-raster {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

/* Die Eckwinkel oben links und unten rechts. */
.portalbanner::before,
.portalbanner::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, .22);
  pointer-events: none;
}

.portalbanner::before { top: 14px; left: 18px; border-right: 0; border-bottom: 0; }
.portalbanner::after { bottom: 14px; right: 18px; border-left: 0; border-top: 0; }

.portalbanner-zeichen {
  position: relative;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .55);
  line-height: 0;
}

.portalbanner-text { position: relative; min-width: 0; }

.portalbanner-titel {
  margin: 0;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: #FFFFFF;
}

.portalbanner-unter {
  margin: 6px 0 0;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9FB3C0;
}

/* Die Begruessung steht UNTER einer Linie und nicht daneben: Sie ist die
   einzige Zeile hier, die sich von Tag zu Tag aendert. */
.portalbanner-gruss {
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(104, 188, 226, .45);
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF;
}

.portalbanner-haus { font-weight: 400; color: #9FB3C0; }

/* Schmales Fenster: Das Zeichen ist Schmuck und geht als Erstes. */
@media (max-width: 640px) {
  .portalbanner { min-height: 0; padding: 20px 20px 20px 22px; }
  .portalbanner-zeichen { display: none; }
  .portalbanner::before, .portalbanner::after { display: none; }
}

.portal-frage { margin: 0 0 14px; font-size: 15px; color: var(--leise); }

/* Der Banner sitzt bündig in der Karte: Er ist ihr Kopf und soll nicht als
   Kachel darin schweben. */
body.portal main > .portalbanner { margin: -28px -30px 26px; border-radius: 10px 10px 0 0; }

/* Die Pfeile in der Spaltenwahl (Festlegung Sebi, 16.08.2026). Sie stehen
   rechts, wo sonst „immer" steht -- eine Spalte hat entweder das eine oder
   das andere. */
.spaltenwahl-pfeile { margin-left: auto; display: flex; gap: 2px; }

.spaltenwahl-pfeile button {
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 1;
  font-size: 12px;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--flaeche-2);
  color: var(--leise);
  cursor: pointer;
}

.spaltenwahl-pfeile button:hover { color: var(--akzent); border-color: var(--akzent-linie); }

/* ---- Kopfleiste: Symbole auf volle Höhe (Festlegung Sebi, 16.08.2026) ----

   Verwaltung, Einstellungen und Glocke standen als 42px-Kacheln in einer
   Leiste, deren Texteintraege bis an beide Kanten reichen -- drei Quadrate,
   die in der Zeile schwebten. Jetzt tragen sie dieselbe Hoehe und dieselbe
   Aktivkante wie "Vorgaenge" oder "CRM": eine Reihe statt Einzelstuecke.

   Die Glocke geht mit, obwohl sie nicht genannt war: Sie steht unmittelbar
   daneben, und zwei von drei Symbolen umzustellen ergaebe eine schiefere
   Zeile als vorher. */

.leiste-nav .leistensymbol,
.leiste .glocke,
.leiste-abmelden .knopf-abmelden {
  align-self: stretch;
  height: auto;
  width: auto;
  min-width: 52px;
  padding: 0 14px;
  border-radius: 0;
  /* Dieselbe 4px-Kante wie die Texteintraege -- unsichtbar, bis sie gebraucht
     wird, damit nichts springt, sobald ein Eintrag aktiv wird. */
  border-bottom: 4px solid transparent;
}

.leiste-nav .leistensymbol.aktiv {
  border-bottom-color: var(--blau);
}

/* Die Glocke behaelt ihre Zahl daneben, braucht also etwas mehr Luft. */
.leiste .glocke { gap: 6px; }

/* Abmelden: rote Tür, und als Einzige mit Farbe im Ruhezustand — sie ist die
   einzige Handlung hier, die etwas beendet. */
.leiste-abmelden { align-self: stretch; }

.leiste-abmelden .knopf-abmelden {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-bottom: 4px solid transparent;
  background: none;
  color: var(--rot);
  cursor: pointer;
}

.leiste-abmelden .knopf-abmelden svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leiste-abmelden .knopf-abmelden:hover,
.leiste-abmelden .knopf-abmelden:focus-visible {
  background: color-mix(in srgb, var(--rot) 10%, transparent);
  border-bottom-color: var(--rot);
}

/* ---- Zeichen der Agentenknöpfe (Festlegung Sebi, 16.08.2026) ----

   Ein Zeichen für alle Agenten, nicht eines je Agent: Es sagt nicht, WAS der
   Knopf tut -- das steht als Name daneben --, sondern WER es tut. Alles mit
   diesem Zeichen ist vom Sprachmodell geschrieben und gehoert gegengelesen.

   Gefuellt und nicht gestrichelt: Bei 13px verschwindet eine Kontur. */

.agentenzeichen {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: none;
  flex: 0 0 auto;
  /* Etwas heller als die Schrift daneben -- es begleitet den Namen, es
     ueberstimmt ihn nicht. */
  opacity: .75;
}

.knopf-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.knopf-agent:hover .agentenzeichen { opacity: 1; }

/* Im Ergebnisblock traegt die Ueberschrift dasselbe Zeichen — so ist die
   Herkunft des Textes sichtbar, ohne dass es danebengeschrieben steht. */
.agentblock h3 {
  display: flex;
  align-items: center;
  gap: 7px;
}

.agentblock h3 .agentenzeichen { width: 15px; height: 15px; color: var(--akzent); opacity: 1; }

/* ---- Agentenknoepfe in der Kopfzeile der Kategorie (Festlegung Sebi,
   16.08.2026) ----

   Sie stehen rechts auf Hoehe der Ueberschrift, nicht als Reihe darueber.
   .kopf-knopf traegt schon das margin-left:auto; hier faellt nur der
   Aussenabstand weg, den die Leiste im Fliesstext braucht. */
.kopf-knopf .agentenknoepfe { margin: 0; }
.kopf-knopf .knopf-agent { font-size: 12.5px; padding: 4px 10px; }

/* Uebergabemaske: der Bearbeiterwechsel mit Notiz. Steht als eigener Block
   oben im Inhalt, damit er nicht zu uebersehen ist -- wer hier abbricht, hat
   nichts geaendert. */
.uebergabe-maske { border-left: 3px solid var(--akzent); }
.uebergabe-maske h2 { margin-top: 0; }
.uebergabe-maske .agentenknoepfe { margin: 10px 0 14px; }
.uebergabe-fuss { display: flex; align-items: center; gap: 12px; }

/* Gesperrte Agentenknoepfe: sichtbar, aber erkennbar unbenutzbar. */
.agentenknoepfe.gesperrt { align-items: center; }
.knopf-agent:disabled { opacity: .45; cursor: not-allowed; }

/* Der Agentenknopf in der Werkzeugleiste: NUR DAS ZEICHEN, gross und farbig,
   und er loest unmittelbar aus (Festlegung Sebi, 17.08.2026: "Button noch
   groesser, und dieser loest die Funktion direkt aus, ohne dass ein Menue
   aufgeht").

   Kein Rahmen und keine Flaeche: Ein 34 Pixel grosses farbiges Zeichen braucht
   keinen Kasten, um als Knopf gelesen zu werden -- der Kasten machte es nur
   wieder klein. Die Flaeche kommt erst beim Darueberfahren, damit man sieht,
   dass es klickbar ist.

   36 Pixel Mindestmass in beide Richtungen: Das ist die Groesse, die ein Finger
   am Telefon zuverlaessig trifft. Ein Symbolknopf ohne Text hat keinen Rand aus
   Buchstaben, der ihn von selbst gross macht. */
.knopf-agentzeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 2px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--akzent);
  cursor: pointer;
}

.knopf-agentzeichen .agentenzeichen {
  width: 34px;
  height: 34px;
  opacity: 1;                        /* nicht gedaempft -- hier ist es die Sache selbst */
}

.knopf-agentzeichen:hover:not(:disabled) { background: var(--flaeche-2); }

/* Gesperrt sichtbar, aber erkennbar unbenutzbar -- wie bei den beschrifteten
   Agentenknoepfen. */
.knopf-agentzeichen:disabled { opacity: .4; cursor: not-allowed; }

.agentenknoepfe.gross { align-items: center; gap: 4px; }

/* Der Hinweis UNTER dem Knopf und nicht daneben (Festlegung Sebi, 17.08.2026:
   aus dem Verweis-Text wurde ein Knopf). In der schmalen Leiste stehen Knopf und
   zwei Zeilen Erklaerung nicht nebeneinander, ohne dass eines von beiden auf
   drei Zeichen je Zeile schrumpft. */
.leistenknopf-hinweis { display: block; margin-top: 8px; }

/* ---- Popup ohne Skript (Festlegung Sebi, 16.08.2026) ----

   Der Zustand steht in der Adresse (?Bearbeite=<id>), nicht in einer
   Javascript-Variablen. Dadurch bleiben Verweis, Zurueck-Knopf und Neuladen
   heil -- und die Sicherheitsrichtlinie muss nicht aufgeweicht werden.

   Die Flaeche dahinter ist ein <a> auf dieselbe Seite ohne Parameter: ein
   Klick daneben schliesst, ganz ohne Ereignisbehandlung. */
.popup-hinter {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: block;
  background: rgba(0, 0, 0, .55);
}

.popup {
  position: fixed;
  z-index: 61;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 20px 24px 24px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

.popup-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.popup-kopf h2 { margin: 0; }

.popup-zu {
  margin-left: auto;
  font-size: 24px;
  line-height: 1;
  padding: 0 6px;
  color: var(--leise);
  text-decoration: none;
}

.popup-zu:hover { color: var(--schrift); }

/* ================================================================
   Kundenportal am Telefon (Festlegung Sebi, 16.08.2026)
   ================================================================

   Zwei getrennte Fragen, und sie werden getrennt beantwortet:

   1. WIE BREIT ist der Bildschirm -> max-width. Das entscheidet ueber
      Abstaende, Spalten und Schriftgroessen.
   2. WOMIT wird gezeigt -> pointer: coarse. Das entscheidet ueber die
      Fingergroesse der Ziele und darueber, ob der Fotoknopf erscheint.

   Ein schmales Fenster am Schreibtisch ist kein Telefon; ein Tablet mit
   grossem Bildschirm hat trotzdem eine Kamera und dicke Finger. Deshalb nicht
   die Kennung des Browsers befragen: Sie laesst sich faelschen und liegt bei
   neuen Geraeten regelmaessig daneben. */

@media (max-width: 640px) {
  /* Die Karte gibt ihre Raender auf -- 20 px Rand links und rechts sind auf
     einem 360-px-Bildschirm ein Neuntel der Flaeche. */
  body.portal main {
    margin: 0;
    padding: 16px 14px 28px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  body.portal main > .portalbanner { margin: -16px -14px 18px; border-radius: 0; }

  body.portal h1 { font-size: 22px; }
  body.portal .seite-kopf { margin-bottom: 14px; }

  /* Eine Kachel je Zeile: Zwei nebeneinander sind auf dem Telefon zwei halbe. */
  .portal-arten { grid-template-columns: 1fr; gap: .7rem; }

  /* Die Leiste bleibt einzeilig, das Logo schrumpft nicht mit. */
  .leiste { padding: 10px 14px; gap: 10px; }
  .leiste-anwendung { font-size: 14px; }
  .person-name { display: none; }

  /* Tabellen im Portal brechen um: Eine Vorgangsliste mit sechs Spalten ist
     auf 360 px unlesbar, egal wie klein man sie macht. Jede Zeile wird zur
     Karte, die Ueberschrift steht als Wort davor. */
  body.portal table.liste thead { display: none; }
  body.portal table.liste, body.portal table.liste tbody,
  body.portal table.liste tr, body.portal table.liste td { display: block; width: 100%; }

  body.portal table.liste tr {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--flaeche);
  }

  body.portal table.liste td { border: 0; padding: 2px 0; }
  body.portal table.liste td[data-spalte]::before {
    content: attr(data-spalte) ": ";
    color: var(--leise);
    font-size: 12px;
  }
}

@media (pointer: coarse) {
  /* Fingerziele: 44 px ist das Mass, unter dem daneben getippt wird. */
  body.portal .knopf,
  body.portal .knopf-flach,
  body.portal .knopf-klein,
  body.portal .portal-zurueck { min-height: 44px; }

  body.portal .feld input,
  body.portal .feld select,
  body.portal .feld textarea { font-size: 16px; padding: 12px; }
  /* 16px ist kein Geschmack: Darunter zoomt iOS beim Hineintippen in das Feld
     hinein und die Seite steht danach verschoben. */
}

/* ---- Foto aufnehmen ----

   Der Knopf erscheint NUR dort, wo mit dem Finger gezeigt wird. Am
   Schreibtisch bleibt es beim Dateifeld darueber -- ein Kamerasymbol ohne
   Kamera ist ein Versprechen, das die Seite nicht halten kann. */
/* Seit 02.10.2026 steht der Kasten UEBERALL (Bild hochladen geht auch am
   Schreibtisch); nur der Kameraknopf bleibt dem Telefon vorbehalten. */
.foto-feld { display: block; margin: 0 0 16px; }
.foto-feld .foto-knopf { display: none; }

@media (pointer: coarse) {
  .foto-feld .foto-knopf { display: inline-flex; }
}

.foto-kopf { display: flex; align-items: center; gap: 12px; }

.foto-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--schrift);
  cursor: pointer;
}

.foto-knopf svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.foto-knopf:disabled { opacity: .4; cursor: not-allowed; }

/* Verborgen, aber klickbar: display:none nimmt manchen Browsern die
   Moeglichkeit, das Feld ueber click() auszuloesen. */
.foto-quelle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.foto-galerie { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }

.foto-bild { position: relative; width: 84px; height: 84px; }
.foto-bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
                 border: 1px solid var(--linie); }

.foto-weg {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--flaeche-2);
  color: var(--schrift);
  cursor: pointer;
}

/* Die Bearbeitungsmaske: drehen und zuschneiden, sonst nichts. */
.foto-maske {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, .78);
}

.foto-maske-inhalt {
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 14px;
  background: var(--flaeche-2);
  border-radius: 12px;
}

.foto-buehne { position: relative; display: flex; justify-content: center; }
.foto-buehne canvas { max-width: 100%; touch-action: none; border-radius: 6px; }

.foto-rahmen {
  position: absolute;
  border: 2px dashed var(--blau);
  background: rgba(104, 188, 226, .18);
  pointer-events: none;
}

.foto-fuss { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.foto-fuss .knopf { width: auto; margin-left: auto; }

/* Hinweis "Portal auf den Startbildschirm" (Festlegung Sebi, 16.08.2026).

   Zwei Bedingungen, beide noetig:
   - pointer: coarse  -> nur am Telefon; am Schreibtisch ist es sinnlos.
   - display-mode: browser -> nur, solange es NICHT schon abgelegt ist. Laeuft
     das Portal als App, blendet der Kasten sich selbst aus. */
.startbildschirm-tipp { display: none; }

@media (pointer: coarse) and (display-mode: browser) {
  .startbildschirm-tipp {
    display: block;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--akzent-linie);
    border-radius: 8px;
    background: var(--akzent-sanft);
  }

  .startbildschirm-tipp summary { cursor: pointer; font-weight: 600; }
  .startbildschirm-tipp ul { margin: 8px 0 0; padding-left: 18px; }
}

/* ---- Die zwei Anmeldemasken auseinanderhalten (Festlegung Sebi, 17.08.2026)

   Sie sahen bis auf die Ueberschrift gleich aus. Wer mit dem Mitarbeiterkonto
   auf der Portalseite tippt, bekommt "Kennung oder Kennwort stimmt nicht" --
   obwohl beides stimmt. Drei Unterschiede, die schon vor dem ersten Tippen
   wirken: Farbe der Kopfkante, Bereichsname unter dem Logo, Zielgruppenzeile.

   Farbwahl: Blau ist im Haus die Kundenfarbe (Portal, Kacheln), Anthrazit die
   der Anwendung innen. Rot bleibt der EINEN Handlung je Bildschirm
   vorbehalten. */
.anmeldung-intern .karte-kopf { border-bottom-color: var(--anthrazit, #4F4C4C); }
.anmeldung-portal .karte-kopf { border-bottom-color: var(--blau); }

.anmelde-zielgruppe {
  margin: 12px 0 18px;
  font-size: 13.5px;
  color: var(--leise);
}

.anmelde-wechsel {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
}

/* Kopfzeile ueber einer Liste: rechts das Symbol fuer "neu anlegen"
   (Festlegung Sebi, 17.08.2026). */
.listenkopf { display: flex; justify-content: flex-end; margin: 0 0 8px; }

.rundknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--schrift);
}

.rundknopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.rundknopf:hover { border-color: var(--blau); color: var(--blau); }

/* ---- Reiter am Vorgang (Festlegung Sebi, 17.08.2026) ----
   Dieselbe Form wie die Sichten der Vorgangsliste; nur der Abstand ist ein
   anderer, weil sie hier zwischen zwei Kaesten stehen. */
.vorgangsreiter { margin: 18px 0 12px; }

/* Die eingearbeiteten Mails. Jede Zeile eine Karte, aufklappbar. */
.mailliste { list-style: none; margin: 0; padding: 0; }
.mailliste > li { margin: 0 0 8px; }

/* Zwei Zeilen Text links, der Antwort-Knopf rechts daneben (Festlegung Sebi,
   17.08.2026). Als Raster und nicht als Flex-Spalte: So bleibt der Knopf auf
   Hoehe des Betreffs, ohne dass die Auszeichnung eine zusaetzliche Huelle um die
   beiden Textzeilen braucht. */
.mailliste summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
}

.mail-betreff { font-weight: 600; grid-column: 1; }
.mail-kopf { color: var(--leise); grid-column: 1; }
.mailliste summary .knopf-antwort { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }

.mailtext {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 8px;
  max-height: 460px;
  overflow-y: auto;
}

/* Loeschen als Papierkorb: leise, rot erst beim Zeigen. */
.loeschsymbol {
  display: inline-flex;
  padding: 6px;
  border-radius: 8px;
  color: var(--leise);
}

.loeschsymbol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.loeschsymbol:hover { color: var(--rot); background: var(--rot-sanft); }

/* ---- Farbige Reiter am Vorgang (Festlegung Sebi, 17.08.2026) ----

   Jeder Reiter traegt die Farbe SEINER Kategorie -- dieselbe, die der Kasten
   darunter an der Ueberschrift hat. Damit ist die Farbe eine Aussage ueber die
   Art des Inhalts und keine Verzierung: Wer den violetten Reiter anklickt,
   landet im violetten Kasten.

   Der gewaehlte Reiter traegt sie als KANTE UNTEN und in der Schrift, die
   uebrigen nur als schmalen Punkt links -- sonst leuchten fuenf Farben um die
   Aufmerksamkeit und keine gewinnt.

   --kat traegt die Farbe je Reiter; so steht die Regel einmal und nicht fuenfmal. */
.vorgangsreiter .sicht.kat-daten     { --kat: var(--blau); }
.vorgangsreiter .sicht.kat-inhalt    { --kat: #7E8B96; }
.vorgangsreiter .sicht.kat-hilfe     { --kat: #4E9E86; }
.vorgangsreiter .sicht.kat-austausch { --kat: #9B7BC0; }
.vorgangsreiter .sicht.kat-verlauf   { --kat: #B08A4E; }

.vorgangsreiter .sicht {
  position: relative;
  padding-left: 18px;
}

/* Der Punkt links: die Kategorie auch am nicht gewaehlten Reiter erkennbar. */
.vorgangsreiter .sicht::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--kat);
  opacity: .55;
}

.vorgangsreiter .sicht.aktiv {
  color: var(--schrift);
  border-bottom-color: var(--kat);
}

.vorgangsreiter .sicht.aktiv::before { opacity: 1; }
.vorgangsreiter .sicht:hover::before { opacity: 1; }

/* ---- Reiterzeile als Werkzeugleiste (Festlegung Sebi, 17.08.2026) ----

   Links die Reiter, rechts die Handlung zum offenen Reiter. Damit steht der
   Name des Inhalts EINMAL da -- vorher als Reiter und gleich darunter noch als
   Ueberschrift im Kasten. */
/* Die Reiterzeile BRICHT UM (Befund Sebi, 17.08.2026: „haben wir mit einem
   weiteren Reiter nicht wieder das Platzproblem für den Agentbutton?").

   Vorher war das ein Flex ohne Umbruch: Reiter links, Agentenknöpfe rechts. Bei
   zu wenig Breite wurde nicht umgebrochen, sondern gequetscht — die Knopfleiste
   verlor Platz, obwohl sie die Handlung tragt. Die Reiter selbst brachen schon
   um (.sichten hat flex-wrap), die äußere Zeile nicht; genau da klemmte es.

   Jetzt rutscht die Knopfleiste bei Enge in eine eigene Zeile unter die Reiter.
   Das kostet 30 Pixel Höhe und ist der Preis dafür, dass beides lesbar bleibt.
   `min-width` an den Reitern verhindert, dass sie sich vorher zu Rest-Streifen
   zusammenziehen. */
.reiterzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 20px 0 0;
  border-bottom: 1px solid var(--linie);
}

.reiterzeile .vorgangsreiter {
  flex: 1 1 22rem;
  min-width: 18rem;
  margin: 0;
  border-bottom: 0;
}

/* Immer rechts, auch wenn die Reiter die Zeile nicht ausfuellen. */
.reiterzeile-rechts { padding-bottom: 6px; margin-left: auto; }
.reiterzeile-rechts .agentenknoepfe { margin: 0; }

/* GROESSER (Festlegung Sebi): Die Reiter sind die Navigation im Vorgang und
   duerfen sich nicht wie Kleingedrucktes lesen. */
.vorgangsreiter .sicht {
  padding: 10px 16px 9px 26px;
  font-size: 15px;
}

.vorgangsreiter .sicht::before { left: 11px; width: 8px; height: 8px; margin-top: -4px; }
.vorgangsreiter .sicht.aktiv { border-bottom-width: 2px; }

/* Die Tafel: ein Kasten ohne Ueberschrift und ohne Aufklappen -- was der
   Reiter schon versteckt, muss der Kasten nicht ein zweites Mal verstecken.
   Die Kategoriefarbe traegt er als linke Kante, damit Reiter und Tafel
   zusammengehoeren. */
.feldblock.tafel {
  padding: 16px 18px;
  border-left: 3px solid var(--linie);
  border-radius: 0 10px 10px 0;
  margin-top: 0;
}

.feldblock.tafel.kat-daten     { border-left-color: var(--blau); }
.feldblock.tafel.kat-inhalt    { border-left-color: #7E8B96; }
.feldblock.tafel.kat-hilfe     { border-left-color: #4E9E86; }
.feldblock.tafel.kat-austausch { border-left-color: #9B7BC0; }
.feldblock.tafel.kat-verlauf   { border-left-color: #B08A4E; }

/* ---- Ähnliche Vorgänge in der linken Leiste (Festlegung Sebi, 17.08.2026) ----

   Sie war ein Reiter, und der fünfte brach in eine zweite Zeile um. In der
   Leiste begleitet sie das Lesen der Beschreibung, statt einen eigenen Klick zu
   verlangen. Hoechstens fuenf Treffer -- zehn Zeilen waeren in einer schmalen
   Leiste eine zweite Liste, die mit der ersten streitet. */
.leistengruppe { display: flex; flex-direction: column; gap: 0; }

.leiste-aehnlich { padding: 0 10px 8px; }

.leiste-aehnlich summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 2px;
}

.leiste-aehnlich summary .filtertitel { margin: 0; }

.leiste-treffer { list-style: none; margin: 4px 0 0; padding: 0; }

.leiste-treffer > li { margin: 0 0 2px; }

.leiste-treffer a {
  display: block;
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--schrift);
  text-decoration: none;
}

.leiste-treffer a:hover { background: var(--flaeche-2); }

/* Der Betreff darf umbrechen, aber nicht mehr als zwei Zeilen: Eine
   Trefferliste, in der ein langer Betreff vier Zeilen belegt, ist keine Liste
   mehr. */
.leiste-betreff {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.35;
}

.leiste-loesung { color: #4E9E86; }
.leiste-mehr { margin: 8px 2px 0; }

/* Die zwei Wege des TeamViewer-Abgleichs nebeneinander. */
.tv-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.tv-knoepfe form { margin: 0; }
.tv-knoepfe .knopf { width: auto; padding: 8px 18px; }

/* ---- Die Leiste der Beschreibung farbig (Festlegung Sebi, 18.08.2026:
     "Beschreibung gefällt mir jetzt gut. Immer ausgeklappt lassen, nur auf
     Wunsch einklappen. Leiste Beschreibung farbig.")

   Bisher trug die Kopfzeile nur eine farbige Kante links. Jetzt eine getoente
   Flaeche in derselben Farbe wie die Kante -- dieselbe Regel wie an den Reitern:
   Die Farbe steht fuer die ART des Inhalts, nicht fuer einen Zustand. kat-inhalt
   ist gedecktes Blaugrau; Rot, Gruen und Gelb bleiben den Zustaenden.

   color-mix mit der Flaeche, nicht ein zweiter Farbwert: So stimmt der Ton in
   hell UND dunkel, ohne ihn zweimal zu pflegen. */
.feldblock.einklappbar.kat-inhalt > summary,
.feldblock.einklappbar.kat-daten > summary,
.feldblock.einklappbar.kat-austausch > summary,
.feldblock.einklappbar.kat-verlauf > summary,
.feldblock.einklappbar.kat-hilfe > summary {
  padding: 8px 12px;
  border-radius: 8px 8px 0 0;
}

/* KRÄFTIGER als beim ersten Versuch (Befund Sebi, 18.08.2026: „Farbe der
   Beschreibungsleiste fehlt noch"). 12 bis 14 Prozent waren auf der dunklen
   Fläche nicht von ihr zu unterscheiden — im Dunkelmodus liegen Grundfläche und
   getönte Fläche ohnehin nah beieinander, und ein Ton, den man sucht, ist keiner.
   Jetzt 30 Prozent plus eine kräftigere linke Kante. */
.feldblock.einklappbar > summary { border-left-width: 4px; }

.feldblock.einklappbar.kat-inhalt > summary {
  background: color-mix(in srgb, #7E8B96 30%, var(--flaeche));
}

.feldblock.einklappbar.kat-daten > summary {
  background: color-mix(in srgb, var(--blau) 26%, var(--flaeche));
}

.feldblock.einklappbar.kat-austausch > summary {
  background: color-mix(in srgb, #9B7BC0 26%, var(--flaeche));
}

.feldblock.einklappbar.kat-verlauf > summary {
  background: color-mix(in srgb, #B08A4E 26%, var(--flaeche));
}

.feldblock.einklappbar.kat-hilfe > summary {
  background: color-mix(in srgb, #4E9E86 26%, var(--flaeche));
}

/* Die Ueberschrift sitzt in der Leiste und braucht darunter keinen Abstand
   mehr -- er stand fuer die Trennlinie, die die Flaeche jetzt ersetzt. */
.feldblock.einklappbar > summary h2 { margin-bottom: 0; }

/* ---- Lange Beschreibung: "weiter …" (Festlegung Sebi, 18.08.2026) ----
   Derselbe Bau wie beim langen Kommentar: Anriss im Griff, ganzer Text
   darunter. Zwei verschiedene Bauarten fuer dieselbe Sache waeren zwei zu
   pflegen. */
.beschreibung-lang > summary { cursor: pointer; list-style: none; }
.beschreibung-lang > summary::-webkit-details-marker { display: none; }
.beschreibung-lang > summary::before { content: none; }
.beschreibung-lang[open] > summary { display: none; }

/* ---- GROSS ANZEIGEN (Festlegung Sebi, 18.08.2026: „Anhänge beim Anklicken nicht
   downloaden, sondern groß anzeigen") ----

   Oberhalb der Liste, in der Breite des Kastens, mit Deckel nach unten: 70vh und
   nicht 100 %. Ein Bild, das den Bildschirm ganz ausfuellt, verdeckt die Liste,
   aus der man es geoeffnet hat -- und damit den Weg zum naechsten Anhang. Ein
   Handyfoto im Hochformat ist genau dieser Fall.

   object-fit: contain haelt das Seitenverhaeltnis; ohne das waere ein Kassenbon
   in die Breite gezogen und damit unlesbar. */
.grossanzeige {
  margin: 0 0 16px;
  padding: 10px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--flaeche-2);
}

.grossanzeige img,
.grossanzeige iframe {
  display: block;
  width: 100%;
  max-height: 70vh;
  border: 0;
  border-radius: 6px;
  background: var(--flaeche);
}

.grossanzeige img { object-fit: contain; }

/* Das PDF braucht eine feste Hoehe: Ein iframe hat keine eigene Groesse, die
   sich aus dem Inhalt ergibt -- ohne Hoehe waeren es 150 Pixel. */
.grossanzeige iframe { height: 70vh; }

.grossanzeige figcaption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
}

.grossanzeige .dateiname { font-weight: 600; overflow-wrap: anywhere; }

/* „schliessen" nach rechts: Es ist der Weg zurueck und gehoert nicht neben die
   Angaben zur Datei. */
.grossanzeige .schliessen { margin-left: auto; }

/* ---- IGNORIEREN und die zwei Nachlesegruppen (Festlegung Sebi, 18.08.2026) ----

   Die Zeile unter dem Entwurf: Grundfeld, Knopf, Erklaerung -- in dieser
   Reihenfolge, weil der Grund freiwillig ist und niemand ihn suchen soll. Ein
   duenner Strich darueber trennt sie vom Anlegen: Es sind zwei verschiedene
   Entscheidungen, keine zwei Knoepfe fuer dieselbe. */
.ignorierzeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}

.ignorierzeile .grundfeld {
  flex: 1 1 200px;
  min-width: 0;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}

.ignorierzeile .klein { flex: 1 1 100%; }

/* Die Gruppen "Eingearbeitet" und "Ignoriert": eingeklappt, weil sie zum
   Nachschlagen da sind und nicht zum Arbeiten. Die Ueberschrift steht IM
   summary, damit der ganze Streifen der Griff ist -- ein Dreieck allein ist ein
   Ziel von acht Pixeln. */
.nachlese { margin-top: 22px; }

.nachlese > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.nachlese > summary::-webkit-details-marker { display: none; }

/* Das Dreieck selbst gebaut, damit es links vor der Ueberschrift steht und sich
   dreht -- der Standardmarker laesst sich nicht zuverlaessig setzen. */
.nachlese > summary::before {
  content: "▸";
  color: var(--leise);
  font-size: 13px;
}

.nachlese[open] > summary::before { content: "▾"; }

.nachlese > summary h2 { margin: 0; font-size: 17px; }

/* Ignoriertes ist blasser als Eingearbeitetes: Es ist die Ablage, nicht das
   Ergebnis. Kein Rot -- Rot heisst hier "eskaliert". */
.nachlese .posteingang li { opacity: 0.85; }

/* ---- VERBINDUNGSLISTE (Festlegung Sebi, 19.08.2026: „Die Verbindungen werden
   unuebersichtlich. Verbindungen anzeigen mit Status und Bearbeiten-Symbol.
   Danach als Popup oeffnen") ----

   Der Stift ist derselbe wie am Betreff und am Ansprechpartner -- ein Zeichen,
   das im Haus schon "hier wird geaendert" bedeutet, braucht keine zweite
   Erklaerung. 20 Pixel, weil 14 an der Beschreibung zu klein waren (Befund
   Sebi, 18.08.2026, beim Papierkorb im Ablaufeditor -- dieselbe Lehre). */
.verbindungsliste .stift {
  display: inline-block;
  padding: 2px 6px;
  font-size: 20px;
  line-height: 1;
  color: var(--leise);
  text-decoration: none;
}

.verbindungsliste .stift:hover { color: var(--schrift); }
.verbindungsliste td.rechts { text-align: right; white-space: nowrap; }

/* "aktiv, aber ohne Token" ist der Zustand, der wie Betrieb AUSSIEHT und keiner
   ist -- deshalb gelb und nicht gruen. Rot waere falsch: Es ist kein Fehler,
   sondern eine halbe Einrichtung. */
.loz-gelb {
  color: var(--gelb);
  background: var(--gelb-sanft);
  border: 1px solid color-mix(in srgb, var(--gelb) 35%, transparent);
}

/* ---- ERSATZTEILVERSAND (Festlegung Sebi, 19.08.2026) ---- */

/* Die zwei Masken brauchen mehr Platz als die Standardbreite: In der Versandmaske
   stehen drei Spalten Teilezeilen, in der Ruecklaufmaske je Teil eine Auswahl.
   540 Pixel waeren dort ein Umbruch je Zelle. */
.modalfenster.breit { max-width: 780px; }

/* Die Vorschlagsliste steckt IN der Zelle (Festlegung Sebi, 19.08.2026: im Feld
   suchen statt in einem Suchfeld darüber). Sie liegt über dem Nachfolgenden und
   reicht breiter als ihre eigene Spalte -- sie zeigt Nummer UND Bezeichnung, und
   in Spaltenbreite wäre davon nichts zu lesen. */
.teilefeld { position: relative; }

.artikelvorschlag {
  position: absolute;
  z-index: 40;
  top: calc(100% + 2px);
  left: 0;
  min-width: 420px;
  max-width: 620px;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  font-size: 13px;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.artikelvorschlag li {
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Maus und Tastatur führen zur GLEICHEN Hervorhebung -- zwei verschiedene
   Markierungen gleichzeitig sind der Grund, warum man in solchen Listen nicht
   weiß, was die Eingabetaste nimmt. */
.artikelvorschlag li:hover,
.artikelvorschlag li.gewaehlt {
  background: var(--akzent-sanft);
  border-color: var(--akzent-linie);
}

.artikelvorschlag .mono { color: var(--leise); margin-right: 8px; }

/* Der Hauptknopf nimmt den Platz, Abbrechen steht rechts daneben. Untereinander
   sahen sie aus wie zwei gleichrangige Wege. */
.versandabschluss {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}

.versandabschluss .knopf { flex: 1 1 auto; }

.teilezeilen input[type="text"],
.teilezeilen input[type="number"] {
  width: 100%;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}

.teilezeilen input[type="number"] { width: 70px; }
.teilezeilen select { width: 100%; }

.versandfelder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

/* Die Wahl "mit oder ohne Ruecklieferschein" mit Erklaerung je Zeile und nicht
   als Haken: An ihr haengt, ob der Vorgang wartet oder fertig ist. Ein Haken ohne
   Text laesst genau die Frage offen, die er entscheidet. */
.rueckwahl {
  margin: 14px 0;
  padding: 10px 14px;
  border: 1px solid var(--linie);
  border-radius: 8px;
}

.rueckwahl legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.rueckwahl .feld-zeile { align-items: flex-start; gap: 8px; margin: 6px 0; }
.rueckwahl .feld-zeile span { font-size: 13px; line-height: 1.45; }

/* Der Kasten in der Randspalte. Eine wartende Sendung bekommt eine Kante -- sie
   ist der Grund, warum der Vorgang gerade stillsteht. */
.sendung {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--flaeche-2);
}

.sendung-offen { border-left: 4px solid var(--blau); }
.sendung .sendungsteile { margin: 4px 0; padding-left: 16px; }
.sendung .sendungsteile li { margin: 2px 0; overflow-wrap: anywhere; }
.sendung .loz { margin-left: 4px; }

/* Ersatzteilsendung im KUNDENPORTAL (Festlegung Sebi, 19.08.2026). Kein eigener
   Farbton: Das Portal hat absichtlich weniger Farben als die Innenansicht --
   was der Kunde sieht, soll ruhig sein. Die wartende Ruecksendung traegt die
   Kante, weil sie eine Aufforderung ist. */
.portal-sendung {
  margin: 10px 0;
  padding: 10px 14px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--flaeche-2);
}

.portal-sendung.sendung-offen { border-left: 4px solid var(--blau); }
.portal-sendung .meldung { margin: 8px 0 0; }

/* Die beiden Ersatzteil-HANDLUNGEN in der Randspalte, NEBENEINANDER auf gleicher
   Höhe (Festlegung Sebi, 20.08.2026). Vorher standen
   sie untereinander, weil die Randspalte schmal ist und „…" im Text umbrach --
   die Punkte sind jetzt weg, also passen beide in eine Zeile. Bricht die Spalte
   doch zu schmal, wandert der zweite Knopf um (wrap) statt aus dem Kasten zu
   laufen. */
.teileaktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}

.teileaktionen form { display: contents; }
.teileaktionen .knopf-klein { text-align: center; flex: 1 1 auto; }

/* Warum „Zu berechnen" fehlt -- unter den beiden Knöpfen, wo man es liest, wenn
   man den fehlenden Knopf sucht. */
.teilehemmnis { margin: 0 0 12px; }

/* Auswahlfelder in den Teiletabellen der Masken (Befund Sebi, 20.08.2026:
   „Dropdown in passender Farbe"). Sie trugen keine Feldklasse und erbten damit
   die Systemfarben des Browsers — im dunklen Thema leuchtete ein weißer Kasten
   mitten in der Maske.

   color-scheme ist der Teil, der wirklich zählt: Ohne ihn zeichnet der Browser
   die AUFGEKLAPPTE Liste weiter hell, egal welche Farben das Feld selbst hat.
   Dieselbe Regel wie in den Detailfeldern. */
.teilezeilen select {
  width: 100%;
  padding: 7px 9px;
  font: inherit;
  color: var(--schrift);
  background: var(--flaeche-2);
  border: 1px solid var(--linie-stark);
  border-radius: 7px;
  color-scheme: light dark;
}

.teilezeilen select:focus { outline: 2px solid var(--blau); outline-offset: 1px; }

/* Ein Pflichtfeld, das noch leer ist, wird nicht rot geschrien -- es wird ruhig
   gekennzeichnet. Rot ist im Haus die Farbe für „hier ist etwas kaputt", und
   nichts ist kaputt, solange niemand abschicken wollte. */
.teilezeilen select:invalid { color: var(--leiser); border-color: var(--linie); }

/* Die Rücklauftabelle hat drei Spalten und braucht Luft: Teil links breit, die
   beiden Auswahlen gleich schmal. */
.ruecklaufzeilen th:first-child, .ruecklaufzeilen td:first-child { width: 40%; }
.ruecklaufzeilen td { vertical-align: top; padding-top: 10px; }

/* Das Löschen der ganzen Sendung sitzt ABGESETZT unter der Korrekturmaske
   (20.08.2026): eigene Linie, eigene Überschrift, rot nur am Knopf. Es ist der
   Ausgang, den man selten nimmt — direkt neben „Änderungen übernehmen" wäre er
   der Nachbar eines Knopfes, den man oft nimmt. */
.sendungloeschen {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}

.sendungloeschen h3 {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Der Stift in der Kopfzeile einer Sendungsbox: rechts, ruhig, und erst unter
   der Maus deutlich. */
.sendung .stift {
  float: right;
  display: inline-flex;
  padding: 2px;
  border-radius: 5px;
  color: var(--leiser);
  text-decoration: none;
}

.sendung .stift svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.sendung .stift:hover { color: var(--akzent); background: var(--akzent-sanft); }

/* Der Stift in der Datenzeile „Gebuchte Zeit" — er erscheint nur bei
   abgeschlossenen Vorgängen, wo der Kasten Zeiterfassung fehlt (20.08.2026).
   Kleiner als der am Kastenkopf: Er sitzt in einer Textzeile, nicht in einer
   Überschrift. */
.zeitzelle .stift {
  display: inline-flex;
  padding: 2px;
  border-radius: 5px;
  color: var(--leiser);
  text-decoration: none;
}

.zeitzelle .stift svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.zeitzelle .stift:hover { color: var(--akzent); background: var(--akzent-sanft); }

/* Die Tabelle der Entwicklertickets (Festlegung Sebi, 20.08.2026). Die
   Zusammenfassung bekommt den Platz, den sie braucht — sie ist der Text, an dem
   man das Ticket wiedererkennt; Nummer und Status sind kurz und fest. */
.tickettabelle td { vertical-align: top; }
.tickettabelle th:first-child, .tickettabelle td:first-child { width: 9rem; }
.tickettabelle th:nth-child(2), .tickettabelle td:nth-child(2) { width: 12rem; }
.tickettabelle td:nth-child(2) .klein { display: block; color: var(--leise); }
.tickettabelle td.rechts { text-align: right; white-space: nowrap; }
.tickettabelle form { margin: 0; }

/* Das Eintragefeld unter der Liste: Verweis und Knopf auf einer Höhe. */
.ticketform { display: flex; align-items: flex-end; gap: 10px; margin-top: 16px; }
.ticketform .feld { flex: 1 1 auto; margin: 0; }

/* ---- Die blinkende Glocke (Festlegung Sebi, 20.08.2026: "Die Glocke muss
     blinken, damit der Fokus mehr darauf gerichtet wird, wenn Meldungen laenger
     ungelesen bleiben") ----

   ZWEI STUFEN und nicht eine. Rote Zahl heisst "da ist etwas"; blinken heisst
   "da liegt etwas SEIT ZWEI STUNDEN". Wuerde die Glocke bei jeder neuen Meldung
   blinken, blinkte sie praktisch immer -- und was immer blinkt, wird so gut
   uebersehen wie etwas, das nie blinkt. Die Schwelle steht im Code
   (Glockenstand.Blinkschwelle), nicht hier: Sie ist eine Regel, keine
   Gestaltung.

   BLINKEN heisst hier PULSIEREN und nicht An-Aus. Ein hart schaltendes Symbol
   in der Kopfleiste zieht den Blick zwar an, macht aber die ganze Seite
   unruhig -- man liest daneben nicht mehr. Eineinhalb Sekunden weiches Auf und
   Ab fallen im Vorbeisehen auf und lassen sich ignorieren, solange man
   arbeitet.

   Bewegt wird die ZAHL, nicht das Symbol: Das Sinnbild bringt seine Farbe selbst
   mit und laesst sich nicht einfaerben; die rote Marke ist ohnehin das Signal.
   Dazu ein leichtes Neigen der Glocke -- eine Glocke, die laeutet, steht nicht
   still. */
@keyframes glocke-pulst {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(191, 26, 32, 0.55); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(191, 26, 32, 0); }
}

@keyframes glocke-laeutet {
  0%, 55%, 100% { transform: rotate(0deg); }
  62%           { transform: rotate(-11deg); }
  70%           { transform: rotate(9deg); }
  78%           { transform: rotate(-6deg); }
  86%           { transform: rotate(4deg); }
}

.glocke.blinkt .glockenzahl {
  animation: glocke-pulst 1.5s ease-in-out infinite;
}

.glocke.blinkt .glockensymbol {
  display: inline-block;
  /* Der Drehpunkt oben: Eine Glocke haengt an ihrer Aufhaengung und schwingt
     darunter. Um die Mitte gedreht sieht sie aus, als wackelte sie auf einem
     Tisch. */
  transform-origin: 50% 15%;
  animation: glocke-laeutet 2.5s ease-in-out infinite;
}

/* Wer Bewegung abgeschaltet hat, bekommt das Signal trotzdem -- als staendigen
   Ring um die Zahl. Ein Hinweis, der bei abgeschalteter Bewegung ganz
   verschwindet, ist bei genau den Leuten weg, die ihn am wenigsten uebersehen
   duerfen. */
@media (prefers-reduced-motion: reduce) {
  .glocke.blinkt .glockenzahl,
  .glocke.blinkt .glockensymbol { animation: none; }
  .glocke.blinkt .glockenzahl { box-shadow: 0 0 0 3px rgba(191, 26, 32, 0.35); }
}

/* ---- Der Assistent auf der Meldeseite (Festlegung Sebi, 20.08.2026) ----

   Ein abgesetzter Kasten und kein weiterer Abschnitt im Formular: Was hier
   steht, ist ein ANGEBOT und keine Frage, die beantwortet werden muss. Der
   gestrichelte Rand sagt genau das -- die Pflichtfelder daneben haben einen
   durchgezogenen.

   Blau und nicht gruen oder gelb: Gruen heisst im Service-Center "hat
   funktioniert", gelb "Frist knapp". Ein Angebot hat noch nichts getan. */
.assistent {
  margin: 4px 0 18px;
  padding: 14px 16px;
  border: 1px dashed var(--linie-stark);
  border-left: 3px solid var(--blau);
  border-radius: 9px;
  background: var(--flaeche-2);
}
.assistent > p:last-child { margin-bottom: 0; }
.assistent .feld { margin-bottom: 10px; }

/* Was der Assistent sagt, steht seit dem 22.08.2026 OBEN bei den Meldungen
   (.meldung.hinweis) und nicht mehr in seinem Kasten: Nach einem Vorschlag ist
   "bitte durchlesen" das Wichtigste auf der Seite. Die Klasse .assistent-wort
   ist damit weggefallen. */

/* Der zweite Knopf: gleiche Form wie der Hauptknopf, aber ohne dessen Farbe.
   Auf der Meldeseite gibt es genau EINE Handlung, die zaehlt -- absenden. Ein
   Assistentenknopf in derselben Farbe wuerde daneben um Aufmerksamkeit
   konkurrieren, und ein Teil der Kunden drueckte ihn fuer das Absenden. */
.knopf.zweit {
  background: var(--flaeche);
  color: var(--schrift);
  border: 1px solid var(--linie-stark);
}
.knopf.zweit:hover { background: var(--flaeche-2); border-color: var(--blau); color: var(--blau); }

/* ---- Die Benachrichtigungstabelle in den Einstellungen (Festlegung Sebi,
     20.08.2026) ----

   Eine Tabelle Ereignis x Kanal. Die Kanalspalten sind schmal und mittig: Was
   dort steht, ist ein Haken und keine Angabe, und drei gleich breite Spalten
   liessen die Ereigniszeile -- den Text, auf den es ankommt -- schrumpfen. */
.zustelltabelle th:not(:first-child),
.zustelltabelle td.mitte { width: 92px; text-align: center; vertical-align: middle; }
.zustelltabelle td.mitte input { margin: 0; }

/* Der erklaerende Satz gehoert zur Zeile und nicht in eine eigene Spalte -- er
   erklaert, WAS man ankreuzt, und wandert damit unter die Beschriftung. */
.zustelltabelle td .klein { display: block; margin-top: 3px; }

/* Ein gesperrter Haken bleibt sichtbar, tritt aber zurueck: Er sagt "das gilt"
   (Glocke) oder "das geht noch nicht" (Teams) -- beides ist eine Auskunft und
   kein Bedienelement. */
.zustelltabelle input[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Uhrzeit, Sammlung und Vertretung stehen nebeneinander, brechen aber auf dem
   Telefon um -- die Einstellungen werden auch unterwegs geaendert. */
.zustellzeiten { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.zustellzeiten .feld { flex: 0 1 220px; margin-bottom: 10px; }

/* ---- Vorschlagsliste der Erwähnungen (Festlegung Sebi, 20.08.2026) ----

   Dieselbe Form wie die Artikelvorschläge der Teilesuche -- zwei verschiedene
   Vorschlagslisten in einer Anwendung sind eine zu viel: Wer die eine bedient
   hat, soll die andere nicht neu lernen.

   Sie steht IM FLUSS unter dem Feld und nicht darüber schwebend: Das
   Kommentarfeld ist hoch, und eine schwebende Liste läge mitten im Text, den
   man gerade schreibt. Dass die Knöpfe darunter kurz nach unten rücken, ist der
   ehrlichere Weg. */
.erwaehnungsliste {
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  font-size: 13px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
}

.erwaehnungsliste li {
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* Das Kürzel trägt die Kennung, der Name die Erkennung -- deshalb steht das
   Kürzel vorn und in Schreibmaschinenschrift: Es ist das, was danach im Text
   steht. */
.erwaehnungsliste li b {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  margin-right: 6px;
}

/* Maus und Tastatur fuehren zur GLEICHEN Hervorhebung -- wie bei der
   Teilesuche. */
.erwaehnungsliste li:hover,
.erwaehnungsliste li.gewaehlt {
  background: var(--akzent-sanft);
  border-color: var(--akzent-linie);
}

/* Der Loeschbereich in der Verbindungsmaske (Befund Sebi, 21.08.2026).
   Abgesetzt nach unten und durch eine Linie getrennt: Er gehoert nicht zu den
   Feldern darueber, sondern ist die Ausnahme darunter -- wer speichern will,
   soll ihn nicht als naechsten Schritt lesen. */
.verbindung-loeschen {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.verbindung-loeschen .klein { margin: 0 0 10px; }
.verbindung-loeschen form { margin: 0; }

/* ---- Der Agent arbeitet (Befund Sebi, 21.08.2026: "Der Agent benoetigt etwa
     10 Sekunden. Das ist nicht schlimm, aber der Mitarbeiter sieht nicht, dass
     gearbeitet wird") ----

   DAS SKRIPT DAFUER GAB ES SEIT DEM 17.08.2026 -- es setzte die Klasse
   "arbeitet", und im Stilblatt stand dazu NICHTS. Also drehte sich nichts,
   leuchtete nichts, und der Befund war voellig richtig: Man sah es nicht. Ein
   Merkmal, das gesetzt wird und nichts bewirkt, ist schlimmer als keines --
   beim Lesen des Skripts sieht die Sache erledigt aus.

   Zwei Anzeigen, weil zehn Sekunden lang sind: das drehende Zeichen AM Knopf
   (dort schaut man hin, wenn man klickt) und eine Zeile daneben (dorthin
   schaut man, wenn nach zwei Sekunden nichts passiert ist). */
@keyframes agent-dreht {
  to { transform: rotate(360deg); }
}

.knopf-agentzeichen.arbeitet,
.knopf-agent.arbeitet {
  /* Nicht ausgrauen: Der Knopf ist gesperrt, aber er arbeitet -- grau hiesse
     "geht nicht", und das waere die falsche Auskunft. */
  cursor: progress;
  border-color: var(--akzent);
  color: var(--akzent);
}

.knopf-agentzeichen.arbeitet svg,
.knopf-agentzeichen.arbeitet img,
.knopf-agent.arbeitet svg {
  animation: agent-dreht 1.1s linear infinite;
  transform-origin: 50% 50%;
}

/* Die Zeile, die das Skript daneben stellt. aria-live macht sie fuer ein
   Vorleseprogramm hoerbar -- wer nicht auf den Knopf sieht, erfaehrt es
   trotzdem. */
.agent-arbeitet-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 13px;
  color: var(--leise);
}

.agent-arbeitet-hinweis::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--akzent);
  border-top-color: transparent;
  animation: agent-dreht 0.9s linear infinite;
}

/* Wer Bewegung abgeschaltet hat, bekommt die AUSSAGE trotzdem -- nur eben
   ohne Drehung. Ein Hinweis, der bei abgeschalteter Bewegung verschwindet,
   fehlt genau denen, die ihn am wenigsten uebersehen duerfen. */
@media (prefers-reduced-motion: reduce) {
  .knopf-agentzeichen.arbeitet svg,
  .knopf-agentzeichen.arbeitet img,
  .knopf-agent.arbeitet svg,
  .agent-arbeitet-hinweis::before { animation: none; }
  .agent-arbeitet-hinweis::before { border-top-color: var(--akzent); }
}

/* Formular in einer Tabellenzelle: Feld und Knopf nebeneinander statt
   untereinander. Ohne das bricht jede Zeile der Buchhaltungsliste auf zwei
   Hoehen -- bei zwanzig Rechnungen eine Liste, die nicht mehr auf den Schirm
   passt. */
.reihe { display: flex; gap: 6px; align-items: center; }

/* Die Farben MUESSEN hier stehen (Befund Sebi, 21.08.2026: "Rechnungsfeld in
   falscher Farbe mal wieder"). Der Grund ist eine Falle, in die ich mehrfach
   getappt bin: Eingabefelder bekommen ihr Aussehen ueber `.feld input` -- also
   ueber den UMSCHLAG, nicht ueber das Feld. Ein <input> ohne diesen Umschlag
   ist ungestaltet, und das heisst im Browser: weisser Grund mit schwarzer
   Schrift. Im hellen Thema faellt das nicht auf, im dunklen leuchtet es.
   Deshalb hier dieselben Marken wie dort -- var(--flaeche) und var(--schrift)
   folgen dem Thema, ein festes Weiss koennte es nicht. */
.reihe input[type="text"] {
  margin: 0;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}
.reihe input[type="text"]:focus { outline: 2px solid var(--blau); outline-offset: 1px;
                                  border-color: var(--blau); }
.reihe input[type="text"]::placeholder { color: var(--leise); }

/* Das Detailfenster der Buchhaltung: Es traegt eine Tabelle, und 540px sind
   dafuer zu schmal -- Artikeltexte wie "Baugruppe Hopperansteuerung im
   Kassenschrank" brechen darin dreimal. Breiter, aber gedeckelt: Ein Fenster
   ueber die ganze Breite ist kein Fenster mehr. */
.modalfenster-breit { max-width: 760px; }

/* Zwei Tabellen im Fenster, mit verschiedener Aufgabe: die Teile als echte
   Liste, die Angaben als Beschriftung-Wert-Paare. Deshalb bekommt nur die
   zweite eine feste erste Spalte -- sonst rutschen die Werte je Zeile. */
.detailangaben td:first-child { width: 34%; color: var(--leise); }

/* Das angeklickte Teil: Man kommt aus einer Zeile der Liste und will sich
   wiederfinden. Ein Streifen links statt einer Hintergrundfarbe -- der
   Zebrastreifen der Liste bleibt damit lesbar. */
.detailteile tr.hervor td { background: var(--flaeche-2); }
.detailteile tr.hervor td:first-child { box-shadow: inset 3px 0 0 var(--blau); }

/* Kopfzeile im Fenster: Titel links, Kreuz rechts (Festlegung Sebi,
   21.08.2026). Der Titel darf umbrechen, das Kreuz nicht wandern -- deshalb
   flex-shrink am Knopf und baseline statt center: Bei zweizeiligem Titel saesse
   das Kreuz sonst in der Mitte des Blocks statt neben der ersten Zeile. */
.modalkopf { display: flex; align-items: baseline; justify-content: space-between;
             gap: 12px; }
.modalkopf h2 { margin: 0; }
.modalkopf .symbolknopf { flex: 0 0 auto; }

/* Der Farbton der Ersatzteilzeile sagt die ABRECHNUNG (Festlegung Sebi,
   21.08.2026: "Berechnen = leichtes grün"). Die drei Marken gibt es schon --
   dieselben, die Listen und Plaketten benutzen, und deshalb im dunklen Thema
   gedeckt statt leuchtend. Ein eigener Grünton hier waere ein zweites Gruen
   gewesen, das dem Thema nur zufaellig folgt.

   Gelb fuer die Pruefpauschale, weil sie auch Geld kostet, aber pauschal;
   grau fuer Kulanz, weil dort nichts zu berechnen ist. Ohne Entscheidung bleibt
   die Zeile farblos -- eine Farbe waere dort eine Aussage. */
.detailteile tr.abrechnung-berechnen td { background: var(--gruen-sanft); }
.detailteile tr.abrechnung-pauschale td { background: var(--gelb-sanft); }
.detailteile tr.abrechnung-kulanz    td { background: var(--grau-sanft); }

/* Dieselben Toene als Plakette fuer die Erklaerzeile unter der Tabelle. */
.loz.abrechnung-berechnen { color: var(--schrift); background: var(--gruen-sanft); }
.loz.abrechnung-pauschale { color: var(--schrift); background: var(--gelb-sanft); }
.loz.abrechnung-kulanz    { color: var(--schrift); background: var(--grau-sanft); }

/* Die Hervorhebung des angeklickten Teils darf den Farbton NICHT ueberdecken --
   sonst verliert genau die Zeile ihre Aussage, wegen der man das Fenster
   geoeffnet hat. Deshalb nur noch der Streifen links, keine Flaeche. */
.detailteile tr.hervor td { background: var(--flaeche-2); }
.detailteile tr.hervor.abrechnung-berechnen td { background: var(--gruen-sanft); }
.detailteile tr.hervor.abrechnung-pauschale td { background: var(--gelb-sanft); }
.detailteile tr.hervor.abrechnung-kulanz    td { background: var(--grau-sanft); }

/* ---- Der grosse Knopf des Portalassistenten (Festlegung Sebi, 22.08.2026:
   "Vielleicht mit einem vielsagenden grossen Knopf?") ----

   Der KASTEN darum ist der bestehende .assistent -- gestrichelt, blau, mit
   genau dieser Begruendung ("ein ANGEBOT und keine Frage"). Ein zweiter, fast
   gleicher Kasten waere eine zweite Meinung darueber, wie ein Angebot aussieht.

   Nur der Knopf ist neu: gross genug fuer den Daumen an der Kasse -- und NICHT
   rot, denn Rot ist in diesem Haus die Farbe des Absendens und des Loeschens.
   Ein Kunde, der ihn fuer "Meldung abschicken" haelt, drueckt ihn und
   erschrickt. */
.assistent-knopf { background: var(--blau); color: #08222c; font-size: 16px;
                   padding: 12px 18px; }
.assistent-knopf:hover { filter: brightness(1.06); }
/* Der Name ueber dem Kasten (02.10.2026): klein, in Markenblau, damit der Kasten
   als eigenes Werkzeug erkennbar ist und nicht als Teil des Formulars. */
.assistent-titel { margin: 0 0 4px; font-size: 13px; font-weight: 600;
                   letter-spacing: .04em; text-transform: uppercase; color: var(--blau); }
.assistent .assistent-knopf { margin: 6px 0 8px; }


/* ===================================================================
   Messe-Erfassung (/Messe) — Festlegung Sebi, 01.10.2026, interbad 2026.
   Alles auf den Tokens oben; Klassen mit messe- oder unter body.messe,
   damit nichts in die interne Oberflaeche oder ins Portal durchschlaegt.
   =================================================================== */

body.messe main { padding-bottom: 110px; }
body.messe .person { text-decoration: none; }
.unsichtbar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.messe-luft { margin-top: 12px; }
a.knopf, a.knopf-ruhig { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
a.knopf.messe-knopf, a.knopf-ruhig.messe-knopf { display: flex; align-items: center; justify-content: center; }
.foto-waehler { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.foto-waehler input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.feld.unsicher > span::after { content: " · unsicher erkannt"; color: var(--warnschrift); font-weight: 700; }
.feld.unsicher input { border-color: var(--rot); }
.bedingt { display: none; margin-top: 4px; }
.block:has(input[name="Termin"][value="true"]:checked) .bedingt[data-wenn="Termin"],
.einwilligung:has(input[name="KontaktGewuenscht"][value="true"]:checked) .bedingt[data-wenn="KontaktGewuenscht"] { display: block; }
.personkachel.gewaehlt { border-color: var(--akzent); background: var(--akzent-sanft); }
.erfolg-kopf { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; padding-bottom: 10px; border-bottom: 3px solid var(--blau); }
.erfolg-kopf h1 { margin: 0; font-size: 22px; }
.erfolg-kopf .erfolg-zeichen { margin: 0; flex: none; }
.punkt-text { margin: 0; white-space: pre-wrap; }
.messe-suche .knopf-ruhig { width: auto; }
body.messe-laeuft { cursor: progress; }
body.messe-laeuft .messe-speicher .knopf { opacity: .6; }

.messe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
              flex-wrap: wrap; margin: 4px 0 16px; padding-bottom: 10px; border-bottom: 3px solid var(--blau); }
.messe-kopf h1 { margin: 0; font-size: 22px; }
.messe-kopf .klein { margin: 0; }

.raster { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .raster.zwei { grid-template-columns: 1fr 1fr; align-items: start; } }

.block { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
         padding: 14px 16px; }
.block + .block { margin-top: 16px; }
.raster > .block + .block { margin-top: 0; }
.block-titel { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 10.5px;
               letter-spacing: .13em; text-transform: uppercase; color: var(--akzent);
               font-weight: 700; margin: 0 0 12px; }

.feld select, .feld textarea { width: 100%; padding: 9px 11px; font-family: inherit; font-size: 15px;
               color: var(--schrift); background: var(--flaeche); border: 1px solid var(--linie);
               border-radius: 7px; }
.feld textarea { min-height: 86px; resize: vertical; }
.feld select:focus, .feld textarea:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
.feldpaar { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Antippen statt tippen: Auswahl als Pillen. */
.wahlen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wahl { position: relative; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px;
             border: 1px solid var(--linie-stark); border-radius: var(--pille); font-size: 14px;
             color: var(--schrift-2); background: var(--flaeche); cursor: pointer; user-select: none; }
.wahl input:checked + span { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.wahl input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
.wahl.heiss input:checked + span { background: var(--rot); border-color: var(--rot); }
.wahl.warm input:checked + span { background: var(--gelb); border-color: var(--gelb); }
.wahl.kalt input:checked + span { background: var(--marine); border-color: var(--marine); }
.wahlname { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 10.5px;
            letter-spacing: .13em; text-transform: uppercase; color: var(--leise); margin: 0 0 6px; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopfreihe > * { flex: 1 1 200px; }
.knopf-ruhig { width: 100%; padding: 10px 16px; font-family: inherit; font-size: 15px; font-weight: 600;
               color: var(--schrift); background: var(--flaeche-2); border: 1px solid var(--linie-stark);
               border-radius: 999px; cursor: pointer; }
.knopf-ruhig:hover { background: var(--flaeche-3); }
.knopf-gross { min-height: 52px; font-size: 16px; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }

/* Erfassungszeitpunkt: immer sichtbar. */
.zeitpunkt { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px;
             background: var(--akzent-sanft); border: 1px solid var(--akzent-linie); border-radius: 10px;
             padding: 12px 16px; margin: 0 0 16px; }
.zeitpunkt b { display: block; font-size: 17px; }
.zeitpunkt .wahlname { margin: 0 0 2px; }
.zeitpunkt a { font-size: 13px; }

/* Wer erfasst: Kacheln. */
.personen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.personkachel { display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px;
                background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
                cursor: pointer; font: inherit; color: var(--schrift); }
.personkachel:hover { border-color: var(--akzent); background: var(--akzent-sanft); }
.personkachel .person-kurz { flex: none; width: 44px; height: 44px; font-size: 14px; }
.personkachel b { display: block; font-size: 15px; }
.personkachel small { color: var(--leise); font-size: 13px; }

/* CRM-Treffer. */
.crm { border-left: 4px solid var(--leise); background: var(--flaeche-2); border-radius: 8px;
       padding: 11px 14px; margin: 0 0 14px; font-size: 14px; }
.crm.bestand { border-left-color: var(--gruen); background: var(--gruen-sanft); }
.crm.interessent { border-left-color: var(--gelb); background: var(--gelb-sanft); }
.crm.mehrere { border-left-color: var(--akzent); background: var(--akzent-sanft); }
.crm p { margin: 4px 0; }
.crm .crm-titel { font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.crm button.wahlknopf { display: block; width: 100%; text-align: left; margin: 6px 0 0; padding: 8px 10px;
       background: var(--flaeche); border: 1px solid var(--linie); border-radius: 7px; font: inherit; cursor: pointer; }
.crm button.wahlknopf:hover { border-color: var(--akzent); }

/* Punkte des Gespraechs. */
.punkt { border: 1px solid var(--linie); border-radius: 9px; padding: 10px 12px; margin: 0 0 10px;
         background: var(--grund); }
.punkt-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.punkt-kopf select { padding: 6px 9px; border: 1px solid var(--linie-stark); border-radius: 7px;
                     font: inherit; font-size: 14px; background: var(--flaeche); color: var(--schrift); }
.punkt textarea { width: 100%; min-height: 60px; padding: 8px 10px; border: 1px solid var(--linie);
                  border-radius: 7px; font: inherit; font-size: 15px; resize: vertical; background: var(--flaeche); color: var(--schrift); }
.punkt .merkmal { margin-top: 6px; }
.punkt-weg { margin-left: auto; background: none; border: 0; color: var(--leise); cursor: pointer; font-size: 18px; }

/* Einwilligung getrennt vom Kontaktwunsch. */
.einwilligung { border: 2px solid var(--linie-stark); border-radius: 10px; padding: 12px 14px; }
.einwilligung hr { border: 0; border-top: 1px solid var(--linie); margin: 12px 0; }
.einwilligung .merkmal { white-space: normal; align-items: flex-start; font-size: 14px; }
.einwilligung .merkmal input { width: 20px; height: 20px; margin-top: 1px; }

/* Kamera / Scan. */
.sucher { position: relative; background: #1f2326; border-radius: 10px; aspect-ratio: 4 / 3; max-height: 360px;
          width: 100%; overflow: hidden; display: grid; place-items: center; margin: 0 0 14px; }
.sucher::before { content: ""; position: absolute; inset: 14%; border: 2px solid var(--blau); border-radius: 8px; }
.sucher span { position: relative; color: rgba(255,255,255,.8); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.aufnahme { background: repeating-linear-gradient(135deg, var(--flaeche-2) 0 10px, var(--flaeche-3) 10px 20px);
            border-radius: 8px; aspect-ratio: 16 / 10; display: grid; place-items: center; color: var(--leise);
            font-size: 13px; margin: 0 0 12px; }
.guete { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .08em; margin-left: 6px; text-transform: uppercase; }
.guete.unsicher { color: var(--warnschrift); font-weight: 700; }

/* Feste Speicherleiste unten. */
.messe-speicher { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--flaeche);
                  border-top: 1px solid var(--linie-stark); padding: 10px 16px; box-shadow: 0 -4px 14px rgba(0,0,0,.06); }
.messe-speicher > div { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.messe-speicher .klein { flex: 1; margin: 0; }
.messe-speicher .knopf { width: auto; min-width: 220px; min-height: 50px; }

/* Startseite. */
.messe-kennzahlen { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 18px; }
.messe-kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; }
.messe-kennzahl b { display: block; font-size: 28px; line-height: 1.1; }
.messe-kennzahl.rot b { color: var(--warnschrift); }
.messe-kennzahl span { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }

.messe-zeilen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; background: var(--flaeche); }
.messe-zeilen li { border-bottom: 1px solid var(--linie); }
.messe-zeilen li:last-child { border-bottom: 0; }
.messe-zeilen a { text-decoration: none; display: flex; width: 100%; gap: 12px; align-items: center; padding: 11px 14px; background: none; border: 0;
                 font: inherit; color: var(--schrift); text-align: left; cursor: pointer; }
.messe-zeilen a:hover { background: var(--grund); }
.messe-zeilen .zeit { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--leise); flex: none; white-space: nowrap; }
.messe-zeilen .wer { flex: 1; min-width: 0; }
.messe-zeilen .wer b { display: block; }
.messe-zeilen .wer small { color: var(--leise); }
.messe-zeilen .loz { flex: none; }

.erfolg { text-align: left; max-width: 640px; }
.erfolg-zeichen { width: 52px; height: 52px; border-radius: 50%; background: var(--gruen); color: #fff;
                  display: grid; place-items: center; font-size: 28px; margin: 0 0 12px; }
.datenpaare { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 14.5px; margin: 0 0 18px; }
.datenpaare dt { color: var(--leise); }
.datenpaare dd { margin: 0; }

.mailvorschau { border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); overflow: hidden; }
.mailvorschau .kopfzeilen { background: var(--flaeche-2); padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--linie); }
.mailvorschau .kopfzeilen p { margin: 2px 0; }
.mailvorschau textarea { width: 100%; min-height: 360px; border: 0; padding: 14px; font: inherit; font-size: 14.5px;
                         line-height: 1.5; resize: vertical; background: var(--flaeche); color: var(--schrift); }

.aw-tabelle td select { padding: 5px 8px; border: 1px solid var(--linie-stark); border-radius: 6px; font: inherit; font-size: 13.5px; background: var(--flaeche); color: var(--schrift); }
.aw-tabelle .knopf-klein, .aw-tabelle .knopf-ruhig { width: auto; padding: 5px 12px; font-size: 13px; }
.aw-kunde { font-weight: 600; }
.aw-gruppe td { background: var(--flaeche-2); font-weight: 600; }

@media (max-width: 640px) {
  .messe-speicher .knopf { min-width: 0; flex: 1; }
  .messe-speicher .klein { display: none; }
  .datenpaare { grid-template-columns: 1fr; gap: 0 0; }
  .datenpaare dd { margin-bottom: 8px; }
  .aw-tabelle thead { display: none; }
  .aw-tabelle tr, .aw-tabelle td { display: block; }
  .aw-tabelle td { border: 0; padding: 3px 0; }
  .aw-tabelle tr { border-bottom: 1px solid var(--linie); padding: 8px 0; }
}

/* Vorfuehrung (02.10.2026): ruhiges Band unter dem Portalkopf, in beiden Themen
   ueber die Tokens. Gelb wie ein Hinweis, nicht Rot wie ein Fehler. */
.vorfuehrung-band { margin: 0 0 16px; padding: 9px 14px; border-radius: 8px;
                    color: var(--gelb); background: var(--gelb-sanft);
                    border: 1px solid color-mix(in srgb, var(--gelb) 30%, transparent); }

/* Fotobitte im Fenster des Assistenten (02.10.2026). */
.assistent-foto { margin: 14px 0 6px; }

/* Artikelsuche im Kundenportal (02.10.2026): dieselbe Vorschlagsliste wie beim
   internen Ersatzteilversand, aber volle Breite -- am Telefon waeren 420 px
   Mindestbreite breiter als der Bildschirm. */
.artikelsuche { margin: 0 0 4px; }
.artikelsuche-feld { position: relative; }
.artikelsuche-feld .feld { margin-bottom: 0; }
.artikelsuche .artikelvorschlag { min-width: 0; max-width: none; right: 0; }
.artikelsuche .artikelvorschlag li { white-space: normal; }

/* Letzte Bestellungen im Kundenportal (02.10.2026). Der Bestelltext behaelt
   seine Zeilen (eine je Artikel), wird aber nach vier Zeilen abgeschnitten --
   die Liste soll das Formular nicht nach unten schieben. */
.letzte-bestellungen { margin: 0 0 18px; }
.bestellliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bestellliste li { padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px;
                   background: var(--flaeche); }
.bestellkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.bestellkopf .knopf-klein { margin-left: auto; }
.bestelltext { margin: 6px 0 0; white-space: pre-line; font-size: 14px; color: var(--schrift-2);
               display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* „Projektübergreifend" steht in jeder Projektauswahl oben und hebt sich ab. */
option.uebergreifend { color: var(--akzent); font-weight: 600; }

/* Arbeitsablauf als Grafik (Verwaltung). Farben nur ueber Klassen: Die CSP
   laesst keine eingebetteten Stile zu. */
.modalfenster.ablaufgrafik-fenster { max-width: min(1200px, 96vw); }
svg.ablaufgrafik { width: 100%; height: auto; display: block; margin: 8px 0; }
.ablaufgrafik .ag-knoten rect { fill: var(--grau-sanft); stroke: var(--linie-stark); stroke-width: 1.2; }
.ablaufgrafik .ag-knoten.ag-blau rect { fill: var(--akzent-sanft); stroke: var(--akzent); }
.ablaufgrafik .ag-knoten.ag-gruen rect { fill: var(--gruen-sanft); stroke: var(--gruen); }
.ablaufgrafik .ag-knoten.ag-rot rect { fill: var(--rot-sanft); stroke: var(--rot); }
.ablaufgrafik .ag-knoten text { fill: var(--schrift); font-size: 13px; }
.ablaufgrafik .ag-weg { fill: none; stroke: var(--akzent); stroke-width: 1.4; opacity: .75; }
.ablaufgrafik .ag-weg.ag-zurueck { stroke: var(--leise); stroke-dasharray: 5 4; }
.ablaufgrafik .ag-weg:hover { opacity: 1; stroke-width: 3; }
.ablaufgrafik .ag-pfeil { fill: var(--akzent); }
.ablaufgrafik .ag-treffer { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.ablaufgrafik a:hover .ag-weg { opacity: 1; stroke-width: 3; }
.ablaufgrafik .ag-weg.ag-gewaehlt { stroke: var(--rot); stroke-width: 3.5; opacity: 1; stroke-dasharray: none; }
.ablaufgrafik-auswahl { border-left: 3px solid var(--rot); border-radius: 0; padding: 6px 12px; margin: 8px 0; background: var(--rot-sanft); }
.ablaufgrafik-auswahl dl { margin: 4px 0 0; }

/* Erwähnung in internen Kommentaren: der Name statt des Kürzels, farbig. */
.kommentare .erwaehnung { color: var(--akzent); background: var(--akzent-sanft);
                          font-weight: 600; border-radius: 4px; padding: 0 4px; }

/* Mitwirkung am Vorgang: Unterstützung und Meeting (0.72.0). */
.mitwirkung-anfrage, .mitwirkung-meeting { border-left: 3px solid var(--akzent); border-radius: 0;
                                           padding: 4px 10px; margin: 6px 0; background: var(--akzent-sanft); }
.mitwirkung-meeting { border-left-color: var(--gruen); background: var(--gruen-sanft); }
.mitwirkung-anfrage .klein, .mitwirkung-meeting .klein { display: block; }
.mitwirkung-form { display: grid; gap: 6px; margin-top: 6px; }
.mitwirkung-form textarea, .mitwirkung-form select { width: 100%; font: inherit; }
.mitwirkung-klapper { margin-top: 6px; }
.zusammenfassungshinweis { color: var(--leise); font-style: italic; }

/* ---- Zweiter Faktor ---- */
.totp-qr {
  display: block;
  width: 216px;
  max-width: 100%;
  margin: 12px auto;
  image-rendering: pixelated;
  background: #fff;
  padding: 8px;
  border-radius: 6px;
}

.ersatzcodes {
  columns: 2;
  list-style: none;
  padding: 0;
  margin: 12px 0 18px;
  font-size: 14px;
  line-height: 1.9;
}

.ersatzcodes-aktionen { display: flex; gap: 8px; margin: -6px 0 18px; }
.ersatzcodes-aktionen .knopf-klein { text-align: center; text-decoration: none; }
.nur-druck { display: none; }

/* Gedruckt wird nur das Codeblatt, schwarz auf weiß — auch im dunklen Thema. */
@media print {
  body * { visibility: hidden; }
  .ersatzcodes-blatt, .ersatzcodes-blatt * { visibility: visible; color: #000 !important; }
  .ersatzcodes-blatt { position: absolute; top: 0; left: 0; width: 100%; background: #fff; }
  .ersatzcodes-blatt .nur-druck { display: block; margin-bottom: 12px; }
  .ersatzcodes-aktionen { display: none; }
}