@charset "utf-8";
/* ==========================================================================
   Madyel ERP – internes Dashboard
   Eigenes Stylesheet, dieselben Gestaltungsvariablen wie die oeffentliche
   Website (css/style.css). Die Website wird davon nicht beruehrt.

   Reihenfolge:
   01 Schrift · 02 Tokens · 03 Reset · 04 Gerüst · 05 Seitenleiste
   06 Kopfzeile · 07 Meldungen · 08 Kacheln · 09 Karten · 10 Tabellen
   11 Zeitstrahl · 12 Formulare · 13 Marken · 14 Blaettern · 15 Anmeldung
   16 Platzhalter und Hinweise · 17 Schmale Bildschirme · 18 Druck
   ========================================================================== */

/* 01 ------------------------------------------------------------- Schrift */
/* Dieselbe Datei wie die Website - sie liegt beim Aufruf des Dashboards mit
   grosser Wahrscheinlichkeit schon im Cache. */
@font-face {
  font-family: "InterVar";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 02 -------------------------------------------------------------- Tokens */
:root {
  --ink: #0d1012;
  --ink-90: #161a1d;
  --ink-80: #1f262a;
  --steel-70: #3b454b;
  --steel-60: #4f5a61;
  --steel-50: #67737b;
  --steel-40: #8c979e;
  --steel-30: #b3bcc1;
  --steel-20: #cfd5d9;
  --steel-10: #e4e8ea;
  --steel-05: #eef1f2;
  --paper: #f5f6f7;
  --white: #ffffff;

  --accent: #c0521f;
  --accent-strong: #9c4218;
  --accent-tint: rgba(192, 82, 31, 0.1);

  --gruen: #2f6f4f;
  --gruen-tint: rgba(47, 111, 79, 0.12);
  --blau: #2c5a86;
  --blau-tint: rgba(44, 90, 134, 0.12);
  --rot: #a32c22;
  --rot-tint: rgba(163, 44, 34, 0.1);

  --font: "InterVar", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --leiste: 248px;
  --rand: clamp(16px, 2.4vw, 34px);
  --radius: 6px;
  --rule: 1px solid var(--steel-10);

  --schatten: 0 1px 2px rgba(13, 16, 18, 0.04),
    0 8px 24px -18px rgba(13, 16, 18, 0.4);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-80);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1, "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white); padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 0; }

code { font-family: var(--mono); font-size: 0.9em; background: var(--steel-05); padding: 1px 4px; border-radius: 3px; }

/* 04 -------------------------------------------------------------- Gerüst */
.app { display: flex; min-height: 100vh; }

.main {
  flex: 1;
  min-width: 0;              /* ohne das sprengen breite Tabellen das Raster */
  display: flex;
  flex-direction: column;
  margin-left: var(--leiste);
}

.content {
  flex: 1;
  padding: var(--rand);
  max-width: 1500px;
  width: 100%;
}

.appfoot {
  padding: 14px var(--rand) 22px;
  color: var(--steel-40);
  font-size: 12px;
}

/* 05 -------------------------------------------------------- Seitenleiste */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--leiste);
  background: var(--ink);
  color: var(--steel-20);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 30;
}

.sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* Das Logo ist hellgrundig - die grauen Flaechen verschwaenden auf der
   dunklen Seitenleiste. Deshalb eine weisse Plakette darunter. */
.sidebar__mark {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  background: var(--white);
  border-radius: 4px;
  object-fit: contain;
}

.sidebar__name { color: var(--white); font-size: 14px; letter-spacing: 0.12em; font-weight: 500; }
.sidebar__name b { font-weight: 800; }

.sidebar__nav { flex: 1; padding: 14px 10px 20px; }

.sidebar__group {
  margin: 18px 8px 6px;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--steel-50);
}

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

.sidebar__link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--steel-20);
  text-decoration: none;
  font-size: 14px;
}
.sidebar__link:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); }

.sidebar__link.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  box-shadow: inset 2px 0 0 var(--accent);
}

.sidebar__icon { width: 18px; text-align: center; font-size: 13px; opacity: 0.9; }

.sidebar__phase {
  margin-left: auto;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--steel-50);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  padding: 0 4px;
}

.sidebar__foot {
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.sidebar__user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.sidebar__avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-weight: 700; font-size: 14px;
}

.sidebar__userinfo { min-width: 0; display: flex; flex-direction: column; }
.sidebar__username { color: var(--white); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__userrole { color: var(--steel-50); font-size: 11px; }

.sidebar__logout {
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: var(--steel-20);
  font-size: 13px;
  cursor: pointer;
}
.sidebar__logout:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }

/* 06 ------------------------------------------------------------ Kopfzeile */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 14px var(--rand);
  background: rgba(245, 246, 247, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: var(--rule);
}

.topbar__title { min-width: 0; }
.topbar__title h1 { font-size: 20px; font-weight: 700; color: var(--ink); }
.topbar__sub { margin: 2px 0 0; color: var(--steel-50); font-size: 13px; }

.topbar__search { margin-left: auto; display: flex; gap: 6px; }

.topbar__search input {
  width: min(320px, 40vw);
  padding: 7px 11px;
  border: 1px solid var(--steel-20);
  border-radius: var(--radius);
  background: var(--white);
}
.topbar__search input:focus { border-color: var(--steel-40); outline-offset: 1px; }

.topbar__search button {
  padding: 7px 14px;
  border: 1px solid var(--steel-20);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
}
.topbar__search button:hover { background: var(--steel-05); }

/* Kopfbereich innerhalb des Inhalts (Detailseiten) */
.kopfzeile {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.kopfzeile__titel { font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.kopfzeile__meta { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kopfzeile__aktionen { margin-left: auto; display: flex; gap: 8px; }

.brotkrume { margin: 0; font-size: 12px; color: var(--steel-50); }
.brotkrume a { color: var(--steel-50); }

/* 07 ------------------------------------------------------------ Meldungen */
.meldung {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border-left: 3px solid var(--steel-30);
  background: var(--white);
  font-size: 14px;
}
.meldung--erfolg { border-left-color: var(--gruen); background: var(--gruen-tint); color: #1f4c36; }
.meldung--fehler { border-left-color: var(--rot); background: var(--rot-tint); color: #7d221a; }
.meldung--info   { border-left-color: var(--blau); background: var(--blau-tint); color: #234a70; }

.warnung {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
}
.warnung__kopf { margin: 0 0 6px; font-weight: 700; color: var(--accent-strong); }
.warnung ul { margin: 0 0 8px; padding-left: 20px; }
.warnung__fuss { margin: 0; font-size: 13px; color: var(--steel-60); }

.hinweiszeile {
  margin: -4px 0 22px;
  font-size: 13px;
  color: var(--steel-50);
  max-width: 78ch;
}

/* 08 -------------------------------------------------------------- Kacheln */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kachel {
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 18px 16px;
  background: var(--white);
  border: var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-decoration: none;
  color: inherit;
}
a.kachel:hover { border-color: var(--steel-30); color: inherit; }

.kachel__zahl { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.kachel__text { font-size: 13px; color: var(--steel-50); }
.kachel--still { background: var(--steel-05); box-shadow: none; }

/* Die Zielkachel. Die grosse Zahl ist das Erreichte, der kleine Zusatz
   dahinter das Ziel - andersherum liest man den Stand nicht mehr auf
   einen Blick, und genau dafuer steht die Kachel da. */
.kachel--ziel .kachel__zahl { line-height: 1; }
.kachel__von {
  font-size: 17px;
  font-weight: 600;
  color: var(--steel-40);
  letter-spacing: 0;
}

/* Der Balken. Ein <progress> statt eines gefuellten <div>, weil im
   Dashboard keine style-Attribute vorkommen duerfen und das Element
   seinen Wert ohnehin selbst traegt - Vorleseprogramme nennen ihn.
   Die drei Schreibweisen sind noetig, weil jede Browserfamilie den
   Balken anders zusammensetzt; ohne sie steht dort das Systemgrau. */
.kachel__balken {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 10px;
  border: 0;
  border-radius: 3px;
  background: var(--steel-10);
  color: var(--accent);
}
.kachel__balken::-webkit-progress-bar {
  background: var(--steel-10);
  border-radius: 3px;
}
.kachel__balken::-webkit-progress-value {
  background: var(--accent);
  border-radius: 3px;
}
.kachel__balken::-moz-progress-bar {
  background: var(--accent);
  border-radius: 3px;
}

/* Erreicht. Gruen ist die Belohnung, aber nie die einzige Auskunft -
   daneben steht in Worten, dass das Ziel erreicht ist. Farbe allein
   ist keine Information. */
.kachel--erreicht {
  border-color: var(--gruen);
  background: var(--gruen-tint);
}
a.kachel--erreicht:hover { border-color: var(--gruen); }
.kachel--erreicht .kachel__zahl,
.kachel--erreicht .kachel__von { color: var(--gruen); }
.kachel__erreicht { color: var(--gruen); font-weight: 600; }
.kachel--erreicht .kachel__balken { color: var(--gruen); background: var(--gruen-tint); }
.kachel--erreicht .kachel__balken::-webkit-progress-bar { background: var(--gruen-tint); }
.kachel--erreicht .kachel__balken::-webkit-progress-value { background: var(--gruen); }
.kachel--erreicht .kachel__balken::-moz-progress-bar { background: var(--gruen); }

/* 09 --------------------------------------------------------------- Karten */
.raster { display: grid; gap: 16px; align-items: start; }
.raster--2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.raster--detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.spalte { display: grid; gap: 16px; align-content: start; }

.karte {
  background: var(--white);
  border: var(--rule);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--schatten);
}

.karte__kopf { display: flex; align-items: baseline; gap: 12px; }
.karte__titel {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: var(--rule);
  flex: 1;
}
.karte__kopf .karte__titel { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.karte__kopf { margin-bottom: 14px; padding-bottom: 8px; border-bottom: var(--rule); }

.karte--gefahr { border-color: rgba(163, 44, 34, 0.3); }
.karte--gefahr .karte__titel { color: var(--rot); }

.leerkarte { text-align: center; padding: 40px 20px; }
.leer { margin: 0; color: var(--steel-50); font-size: 14px; }

.ergebniszeile { margin: 0 0 12px; font-size: 13px; color: var(--steel-50); }

.datenliste { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 7px 14px; font-size: 14px; }
.datenliste dt { color: var(--steel-50); }
.datenliste dd { margin: 0; color: var(--ink-80); overflow-wrap: anywhere; }

.stammnotiz { margin-top: 16px; padding-top: 14px; border-top: var(--rule); }
.stammnotiz h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-50); margin-bottom: 6px; }
.stammnotiz p { margin: 0; font-size: 14px; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 9px 0; border-bottom: var(--rule); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.liste__meta { color: var(--steel-50); font-size: 13px; }

.verteilung { list-style: none; margin: 0; padding: 0; }
.verteilung a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: var(--rule);
  color: inherit; text-decoration: none; font-size: 14px;
}
.verteilung li:last-child a { border-bottom: 0; }
.verteilung a:hover .verteilung__label { color: var(--accent-strong); }
.verteilung__label { display: flex; align-items: center; gap: 8px; }
.verteilung__zahl { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--steel-30); flex: none; }
.punkt--new { background: var(--blau); }
.punkt--contacted { background: #7a6ea8; }
.punkt--interested { background: var(--accent); }
.punkt--customer { background: var(--gruen); }
.punkt--inactive { background: var(--steel-30); }
.punkt--lost { background: var(--rot); }

.kontaktliste { list-style: none; margin: 0; padding: 0; }
.kontaktliste__zeile { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; border-bottom: var(--rule); }
.kontaktliste__zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.kontaktliste__name { margin: 0; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kontaktliste__rolle { margin: 1px 0 0; font-size: 13px; color: var(--steel-50); }
.kontaktliste__wege { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.kontaktliste__zeile > a { margin-left: auto; flex: none; }

.klein { font-size: 13px; }

/* 10 ------------------------------------------------------------- Tabellen */
.werkzeugleiste { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter input, .filter select {
  padding: 7px 10px;
  border: 1px solid var(--steel-20);
  border-radius: var(--radius);
  background: var(--white);
}
.werkzeugleiste > .btn:last-child { margin-left: auto; }

/* Breite Tabellen scrollen in ihrem eigenen Rahmen, nie die ganze Seite. */
.tabellenrahmen {
  background: var(--white);
  border: var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow-x: auto;
}

.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabelle th {
  text-align: left;
  padding: 10px 14px;
  background: var(--steel-05);
  border-bottom: var(--rule);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--steel-60); font-weight: 600;
  white-space: nowrap;
}
.tabelle th a { color: inherit; text-decoration: none; }
.tabelle th a:hover { color: var(--accent-strong); text-decoration: underline; }

.tabelle td { padding: 11px 14px; border-bottom: var(--rule); vertical-align: top; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: #fafbfb; }

.tabelle .rechts { text-align: right; }
.stark { font-weight: 600; color: var(--ink); }
.zart { display: block; color: var(--steel-50); font-size: 12.5px; }

/* 11 ----------------------------------------------------------- Zeitstrahl */
.strahl { list-style: none; margin: 0; padding: 0; }

.strahl__zeile { display: flex; gap: 12px; padding: 12px 0; border-bottom: var(--rule); }
.strahl__zeile:last-child { border-bottom: 0; padding-bottom: 0; }

.strahl__zeichen {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--steel-05);
  border-radius: 50%;
  font-size: 14px;
}

.strahl__inhalt { min-width: 0; }
.strahl__kopf { margin: 3px 0 0; font-size: 14px; }
.strahl__text { margin: 4px 0 0; font-size: 13.5px; color: var(--steel-60); overflow-wrap: anywhere; }
.strahl__meta { margin: 4px 0 0; font-size: 12px; color: var(--steel-40); }

/* Wer die Handlung ausgeloest hat - eine eigene Zeile unter dem Eintrag
   und nicht als Anhaengsel an der Zeitangabe. Bei zwei Personen an einem
   System ist das die haeufigste Rueckfrage vor einer Liste: war das ich
   oder der andere? Sie soll ohne Lesen zu beantworten sein, deshalb steht
   sie immer an derselben Stelle. */
.strahl__wer {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--steel-50);
}

/* 12 ------------------------------------------------------------ Formulare */
.formular { display: grid; gap: 16px; max-width: 900px; }

.felder { display: grid; gap: 14px; }
.felder--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feld--breit { grid-column: 1 / -1; }
.feld--schmal { max-width: 180px; }

.feld { display: flex; flex-direction: column; gap: 5px; }
.feld label { font-size: 13px; color: var(--steel-60); font-weight: 600; }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="password"],
.feld input[type="search"],
.feld input[type="date"],
.feld select,
.feld textarea {
  padding: 9px 11px;
  border: 1px solid var(--steel-20);
  border-radius: var(--radius);
  background: var(--white);
  width: 100%;
}
.feld textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--steel-40); }

.feld__hinweis { margin: 2px 0 0; font-size: 12.5px; color: var(--steel-50); }
.feld__fehler { margin: 2px 0 0; font-size: 12.5px; color: var(--rot); font-weight: 600; }
.pflicht { color: var(--accent); }

.feld--schalter { justify-content: flex-end; }
.schalter { display: flex; align-items: center; gap: 9px; font-weight: 400 !important; color: var(--ink-80) !important; }
.schalter input { width: 16px; height: 16px; accent-color: var(--accent); }

.formular__fuss { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.formular__trenner { flex: 1; }
.formular__loeschen { margin-top: 20px; padding-top: 16px; border-top: var(--rule); max-width: 900px; }

/* Schaltflaechen */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--ink-90); border-color: var(--ink-90); color: var(--white); }

.btn--still { background: var(--white); color: var(--ink-80); border-color: var(--steel-20); }
.btn--still:hover { background: var(--steel-05); color: var(--ink); border-color: var(--steel-30); }

.btn--gefahr { background: var(--rot); border-color: var(--rot); }
.btn--gefahr:hover { background: #8c231b; border-color: #8c231b; }

.btn--klein { padding: 7px 13px; font-size: 13px; }
.btn--voll { width: 100%; margin-top: 6px; }

/* 13 --------------------------------------------------------------- Marken */
.marke {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--steel-05);
  color: var(--steel-60);
  white-space: nowrap;
}
.marke--still { background: var(--steel-05); color: var(--steel-60); }
.marke--new { background: var(--blau-tint); color: #234a70; }
.marke--contacted { background: rgba(122, 110, 168, 0.14); color: #4b407a; }
.marke--interested { background: var(--accent-tint); color: var(--accent-strong); }
.marke--customer { background: var(--gruen-tint); color: #1f4c36; }
.marke--inactive { background: var(--steel-05); color: var(--steel-50); }
.marke--lost { background: var(--rot-tint); color: #7d221a; }

/* 14 ------------------------------------------------------------ Blaettern */
.blaettern {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px;
  font-size: 13px;
}
.blaettern__knopf {
  padding: 7px 13px;
  border: 1px solid var(--steel-20);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-80);
  text-decoration: none;
}
.blaettern__knopf:hover { background: var(--steel-05); color: var(--ink); }
.blaettern__knopf.is-aus { color: var(--steel-30); border-color: var(--steel-10); }
.blaettern__stand { color: var(--steel-50); }

/* 15 ------------------------------------------------------------ Anmeldung */
.plain { background: var(--ink); min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.login { width: 100%; max-width: 420px; }

.login__card {
  background: var(--white);
  border-radius: 10px;
  padding: 34px 32px 28px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

.login__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
/* Auf der weissen Anmeldekarte braucht das Logo keine Plakette. */
.login__mark {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
}
.login__name { font-size: 14px; letter-spacing: 0.12em; color: var(--ink); }
.login__name b { font-weight: 800; }

.login__title { font-size: 22px; font-weight: 700; color: var(--ink); }
.login__hint { margin: 4px 0 20px; color: var(--steel-50); font-size: 13.5px; }

.login form { display: grid; gap: 14px; }
.login__fuss { margin: 22px 0 0; padding-top: 16px; border-top: var(--rule); font-size: 13px; text-align: center; }

/* Sprachumschalter - auf der Anmeldeseite, also vor jeder Anmeldung. Wer die
   Oberflaeche auf Tuerkisch braucht, soll auch die Fehlermeldung der Anmeldung
   auf Tuerkisch lesen koennen. */
.sprachwahl {
  display: flex; justify-content: center; gap: 14px;
  margin: 20px 0 0;
  font-size: 12.5px;
}
.sprachwahl a { color: var(--steel-50); text-decoration: none; }
.sprachwahl a:hover { color: var(--accent-strong); text-decoration: underline; }
.sprachwahl__aktiv { color: var(--ink); font-weight: 600; }

/* 16 ------------------------------------------ Platzhalter und Hinweise */
.karte--platzhalter { max-width: 760px; padding: 30px; }
.platzhalter__marke {
  display: inline-block; margin: 0 0 12px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-strong);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.platzhalter__titel { font-size: 22px; color: var(--ink); margin-bottom: 10px; }
.platzhalter__text { margin: 0 0 16px; color: var(--steel-60); max-width: 68ch; }
.platzhalter__liste { margin: 0 0 18px; padding-left: 20px; color: var(--ink-80); }
.platzhalter__liste li { margin-bottom: 5px; }
.platzhalter__fuss { margin: 0; padding-top: 14px; border-top: var(--rule); font-size: 13px; color: var(--steel-50); }

.karte--hinweis { max-width: 560px; text-align: center; padding: 40px 30px; }
.karte--allein { margin: 0 auto; }
.hinweis__code { margin: 0; font-size: 40px; font-weight: 800; color: var(--steel-20); line-height: 1; }
.hinweis__titel { margin: 10px 0 8px; font-size: 21px; color: var(--ink); }
.hinweis__text { margin: 0 0 6px; color: var(--steel-60); }
.hinweis__referenz { margin: 10px 0 0; font-family: var(--mono); font-size: 15px; color: var(--accent-strong); letter-spacing: 0.08em; }
.hinweis__technik {
  margin: 18px 0 0; padding: 14px;
  background: var(--steel-05); border-radius: var(--radius);
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  text-align: left; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.hinweis__aktion { margin: 22px 0 0; display: flex; gap: 10px; justify-content: center; }

/* Einrichtungsseite (setup.php) */
.setup { width: 100%; max-width: 560px; }
.setup__card { background: var(--white); border-radius: 10px; padding: 32px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7); }
.setup__schritt { margin: 0 0 6px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-strong); }
.setup__titel { font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.setup__text { margin: 0 0 20px; color: var(--steel-60); font-size: 14px; }
.setup form { display: grid; gap: 14px; }
/* Der Selbsttest listet mehr Zeilen als die Einrichtung - er darf breiter sein.
   Als Klasse und nicht als style-Attribut: die CSP des Dashboards erlaubt keine
   Inline-Stile, das Attribut waere wirkungslos. */
.setup--breit { max-width: 760px; }
.setup--breit .liste li { align-items: flex-start; }

/* 16b ------------------------------------------------------------ E-Mail */
.werkzeugleiste__rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.werkzeugleiste > .btn:last-child { margin-left: 0; }

.feld__zeile { display: flex; gap: 8px; align-items: center; }
.feld__zeile select { flex: 1; }

.datenliste--eng { grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; font-size: 13.5px; }

.warnung__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }

/* Der per fetch eingeblendete Hinweis unter dem Empfaengerfeld. Bewusst
   ruhiger als die Warnung beim Absenden: er informiert, er haelt nicht auf. */
.hinweisfeld {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  font-size: 13px;
}
.hinweisfeld__kopf { margin: 0 0 4px; font-weight: 700; color: var(--accent-strong); }
.hinweisfeld__liste { margin: 0; padding-left: 18px; color: var(--steel-60); }

/* Eine Nachricht im Verlauf. Ausgehend und eingehend unterscheiden sich nur
   durch die Farbe der Kante - der Verlauf soll wie ein Gespraech zu lesen
   sein, nicht wie zwei getrennte Listen. */
.nachricht { border-left: 3px solid var(--steel-20); }
.nachricht--out { border-left-color: var(--accent); }
.nachricht--in { border-left-color: var(--gruen); }

.nachricht__kopf { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; padding-bottom: 10px; border-bottom: var(--rule); }
.nachricht__betreff { margin: 0; font-weight: 600; color: var(--ink); }
.nachricht__meta { margin: 3px 0 0; font-size: 12.5px; color: var(--steel-50); overflow-wrap: anywhere; }
.nachricht__datum { margin: 0 0 0 auto; text-align: right; font-size: 12.5px; color: var(--steel-50); white-space: nowrap; }
.nachricht__datum .zart { display: block; }
.nachricht__text { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }

.vorlage__kopf { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 10px; }
.vorlage__name { margin: 0; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vorlage__betreff { margin: 3px 0 0; font-size: 13.5px; color: var(--steel-60); }
.vorlage__aktionen { margin: 0 0 0 auto; display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.vorlage__text { margin: 0 0 12px; font-size: 13.5px; color: var(--steel-50); }

.platzhalterliste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.platzhalterliste code { font-size: 12.5px; }

/* Modulliste in den Einstellungen - ersetzt fuer den laufenden Betrieb, was
   sonst nur dashboard/pruefung.php zeigte. Die Datei wird nach der
   Einrichtung geloescht, die Angaben braucht man aber weiterhin. */
.modulliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.modulliste code { font-size: 12px; }
.modul--da { color: var(--gruen); }
.modul--fehlt { color: var(--rot); font-weight: 600; }

/* Anhaenge unter einer Nachricht */
.anhangliste { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: var(--rule); display: grid; gap: 6px; }
.anhangliste li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; }
.anhangliste .zart { color: var(--steel-40); font-size: 12.5px; }

/* Richtungsmarke im Verlauf - eingehend und ausgehend sollen sich auf einen
   Blick unterscheiden, ohne dass daraus zwei getrennte Listen werden. */
.richtung {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
  background: var(--steel-05);
  color: var(--steel-60);
}
.nachricht--out .richtung { background: var(--accent-tint); color: var(--accent-strong); }
.nachricht--in .richtung { background: var(--gruen-tint); color: #1f4c36; }

/* Zuordnungsmarke im Posteingang.

   Frueher standen die nicht zugeordneten Verlaeufe zusaetzlich als eigener
   Block ueber der Tabelle - dieselben Zeilen zweimal auf einem Bildschirm.
   Jetzt traegt die Zeile die Auskunft selbst: Haken, wenn der Absender einem
   Kontakt gehoert, Kreuz wenn nicht. */
.mitte { text-align: center; }

.zuordnung {
  display: inline-block;
  width: 20px;
  font-weight: 700;
  line-height: 1;
}
.zuordnung--ja { color: var(--gruen); }
.zuordnung--nein { color: var(--rot); }

/* Offene Zeilen bekommen eine Kante, damit sie beim Ueberfliegen auffallen -
   aber keine Flaechenfarbe: sonst waere eine Liste, in der die meisten Zeilen
   offen sind, komplett rot und die Marke wertlos. */
.zeile--offen td:first-child { box-shadow: inset 2px 0 0 var(--rot); }

.zahl-warnung { color: var(--rot); font-weight: 600; }

/* Nachricht hatte Anhaenge, gespeichert wurde keiner. Kein leerer Zustand,
   sondern ein Hinweis - sonst sucht man den Fehler an der falschen Stelle. */
.anhang-fehlt {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--rot);
  background: var(--rot-tint);
  font-size: 13px;
  color: #7d221a;
}

/* 16c ------------------------------------------- Anfragen und Follow-ups */

/* Marken der neuen Wertelisten. Die Schluessel `new` und `lost` gibt es schon
   beim Firmenstatus - dieselbe Farbe bedeutet hier dasselbe, das ist gewollt. */
.marke--review { background: var(--blau-tint); color: #234a70; }
.marke--supplier_running { background: rgba(122, 110, 168, 0.14); color: #4b407a; }
.marke--quote_prepared { background: var(--accent-tint); color: var(--accent-strong); }
.marke--quote_sent { background: var(--accent-tint); color: var(--accent-strong); }
.marke--won { background: var(--gruen-tint); color: #1f4c36; }
.marke--closed { background: var(--steel-05); color: var(--steel-50); }

.marke--requested { background: var(--blau-tint); color: #234a70; }
.marke--replied { background: rgba(122, 110, 168, 0.14); color: #4b407a; }
.marke--priced { background: var(--accent-tint); color: var(--accent-strong); }
.marke--declined { background: var(--steel-05); color: var(--steel-50); }
.marke--selected { background: var(--gruen-tint); color: #1f4c36; }

.marke--open { background: var(--blau-tint); color: #234a70; }
.marke--done { background: var(--gruen-tint); color: #1f4c36; }
.marke--skipped { background: var(--steel-05); color: var(--steel-50); }

/* Ein ueberfaelliger Termin faellt auf, ohne dass die Zeile schreit. */
.warnwert { color: var(--rot); font-weight: 600; }

/* Das guenstigste Angebot im Preisvergleich. Farbe allein genuegt nicht -
   daneben steht fuer Screenreader der Text "guenstigstes Angebot". */
.bestwert { color: var(--gruen); font-weight: 700; }

/* Der tatsaechlich gewaehlte Lieferant. */
.zeile--gewaehlt td { background: var(--gruen-tint); }
.zeile--gewaehlt td:first-child { box-shadow: inset 2px 0 0 var(--gruen); }

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

.tabelle--eng th, .tabelle--eng td { padding: 8px 10px; font-size: 13px; }

/* Mehrere kleine Formulare in einer Tabellenzelle sollen nebeneinander
   stehen und nicht jeweils eine eigene Zeile aufmachen. */
.aktionen { white-space: nowrap; }
.aktionen > * { margin-right: 10px; }
.aktionen > *:last-child { margin-right: 0; }
.inlineform { display: inline; }

/* Eine Schaltflaeche, die aussieht wie ein Link. Sie ist bewusst ein
   <button> in einem <form> und kein <a>: alles, was etwas veraendert, geht
   per POST und traegt damit das CSRF-Merkmal. */
.knopflink {
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 13px;
  color: var(--accent-strong); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.knopflink:hover { color: var(--accent); }
.knopflink--gefahr { color: var(--rot); }

.reihenform { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.reihenform .feld { margin: 0; }

.formular--eng { max-width: none; margin-top: 16px; padding-top: 14px; border-top: var(--rule); }
.formular--eng .felder { margin-bottom: 10px; }

/* Reiter der Wiedervorlagen: Faellig / Offen / Alle. */
.reiter { display: flex; gap: 4px; flex-wrap: wrap; }
.reiter__punkt {
  padding: 7px 14px; border-radius: 999px;
  font-size: 13.5px; text-decoration: none;
  color: var(--steel-60); background: var(--steel-05);
}
.reiter__punkt:hover { color: var(--ink); }
.reiter__punkt.is-active { background: var(--ink); color: var(--white); }

/* 16d ------------------------------------------------- Postfach-Handgriffe */

/* Zweiter Abschnitt in derselben Karte - "Firma anlegen" steht unter
   "Zuordnen", weil es dieselbe Frage beantwortet. */
.karte__abschnitt {
  margin-top: 18px;
  padding-top: 16px;
  border-top: var(--rule);
}
.karte__abschnitt h4 { margin: 0 0 4px; font-size: 14px; }

/* Der Loeschknopf unter einer Nachricht. Klein und rechts - er soll da sein,
   aber nicht als Erstes ins Auge fallen. */
.nachricht__fuss {
  margin-top: 12px;
  padding-top: 10px;
  border-top: var(--rule);
  text-align: right;
}

/* Loeschen im Seitenkopf: als Knopf erkennbar, aber ohne die Wucht von
   .btn--gefahr - daneben steht "Antworten", und das ist die Hauptsache. */
.btn--gefahrstill { color: var(--rot); border-color: rgba(163, 44, 34, 0.35); }
.btn--gefahrstill:hover { background: var(--rot-tint); }

/* Suchfeld ueber einer langen Auswahlliste. */
input[data-suchwahl] { font-size: 13.5px; }

/* 16e ---------------------------------------------- Ruhige Postfachzeilen */

/* Eine Zeile, die sich anklicken laesst, muss das auch zeigen: der Zeiger
   wird zur Hand, und beim Ueberfahren zieht der Hintergrund leicht an. Der
   Uebergang ist kurz genug, um nicht traege zu wirken, und lang genug, um
   nicht zu blinken. */
.zeile--klick { cursor: pointer; transition: background-color 140ms ease; }
.zeile--klick:hover td { background: var(--steel-05); }
.zeile--klick:focus-within td { background: var(--steel-05); }

/* Nicht zugeordnet: der rote Rand bleibt, aber leiser als vorher. */
.tabelle .zeile--offen td:first-child { box-shadow: inset 2px 0 0 var(--rot); }

/* Die Marke am rechten Rand. „Bekannt" soll man kaum bemerken - sie ist der
   Normalfall. Auffallen soll nur, was noch eine Handlung braucht. */
.marke--offen {
  background: var(--rot-tint); color: #7d221a;
  text-decoration: none;
}
.marke--offen:hover { background: rgba(163, 44, 34, 0.18); }

.nichtumbrechen { white-space: nowrap; }

/* Der Loeschknopf in der Zeile: unsichtbar, bis die Zeile beruehrt wird. Er
   muss erreichbar sein, aber nicht in jeder Zeile um Aufmerksamkeit bitten.
   Bei Tastaturbedienung ist er immer sichtbar - sonst waere er unauffindbar. */
.zeile--klick .knopflink--gefahr {
  opacity: 0;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: opacity 140ms ease;
}
.zeile--klick:hover .knopflink--gefahr,
.zeile--klick .knopflink--gefahr:focus { opacity: 1; }

/* Vier Kacheln nebeneinander - die Uebersicht traegt nicht mehr. */
.kacheln--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* „Gehoert zu ANF-2026-0004" ueber einem Verlauf. */
.vorgangszeile {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--steel-05);
  border-radius: 8px;
  font-size: 13.5px;
}

/* 16f ---------------------------------------------------- Benutzerkonten */

/* Ein abgeschaltetes Konto steht weiter in der Liste - sonst wuesste niemand,
   dass es existiert - aber es tritt zurueck. */
.zeile--gesperrt td { opacity: 0.6; }
.zeile--gesperrt td:first-child { box-shadow: inset 2px 0 0 var(--steel-30); }

/* Das Feld zum Zuruecksetzen steht in der Tabellenzeile und darf sie nicht
   auseinanderziehen. */
.aktionen input[type="password"] {
  width: 150px; padding: 5px 8px;
  font-size: 13px;
  border: 1px solid var(--steel-20); border-radius: 6px;
}

/* 16g ------------------------------------------------------- Schnellstart */

/* Das Band ueber den Kacheln. Es ist der einzige gruene Fleck im ganzen
   Dashboard - deshalb faellt er auf, ohne laut zu sein. Waere alles bunt,
   waere nichts hervorgehoben. */
.schnellband {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 18px 22px;
  background: var(--white);
  border: var(--rule);
  border-left: 3px solid var(--gruen);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.schnellband__titel { margin: 0; font-size: 16px; }
.schnellband__text { margin: 3px 0 0; font-size: 13.5px; color: var(--steel-50); }

.btn--gruen { background: var(--gruen); border-color: var(--gruen); }
.btn--gruen:hover { background: #275c41; border-color: #275c41; }
.btn .arrow { margin-left: 6px; transition: transform 140ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Die Schrittnummern im Schnellstartformular. */
.schritt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 6px;
  border-radius: 50%;
  background: var(--ink); color: var(--white);
  font-size: 12px; font-weight: 700;
  vertical-align: 1px;
}

/* 16h ------------------------------------------------------------ Protokoll */

.protokoll td { font-size: 12.5px; vertical-align: top; }
.protokoll__text {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}

/* Die Stufe faerbt nur sich selbst, nicht die Zeile: bei zweihundert Zeilen
   waere eine durchgefaerbte Liste unlesbar. */
.stufe {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  background: var(--steel-05); color: var(--steel-60);
}
.stufe--error .stufe { background: var(--rot-tint); color: #7d221a; }
.stufe--warning .stufe { background: var(--accent-tint); color: var(--accent-strong); }
.stufe--error td:first-child { box-shadow: inset 2px 0 0 var(--rot); }

/* 16i --------------------------------------------------- Ungelesene Post */

/* Der Zaehler neben "Posteingang". Er steht rechts im Navigationspunkt und
   nur dann, wenn es etwas zu zaehlen gibt - eine dauerhafte 0 uebersieht man
   nach zwei Tagen, und dann faellt auch die 3 nicht mehr auf. */
.sidebar__zaehler {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.sidebar__link.is-active .sidebar__zaehler { background: var(--white); color: var(--accent-strong); }

/* Eine ungelesene Zeile ist kraeftiger gesetzt und traegt links einen Punkt.
   Fett allein reicht nicht: wer Farben schlecht unterscheidet, sieht das
   Gewicht - und wer die Schrift schlecht unterscheidet, sieht den Punkt. */
.zeile--neu td { font-weight: 600; }
.zeile--neu td:first-child { position: relative; }
.zeile--neu td:first-child::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--accent);
}
.zeile--neu td:first-child { padding-left: 18px; }

.zahl-neu { color: var(--accent-strong); font-weight: 600; }

/* Der Abrufstand ueber dem Posteingang. Er ist der Gegenwert dafuer, dass
   der Abruf nicht mehr von Hand ausgeloest wird: was von selbst laeuft, muss
   wenigstens sagen, wann es zuletzt lief. */
.abrufzeile {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--steel-50);
}
.abrufzeile--fehler {
  padding: 9px 12px;
  border-left: 3px solid var(--rot);
  background: var(--rot-tint);
  color: #7d221a;
}

.neuhinweis { margin-bottom: 14px; }

/* Hinweis auf doppelt erfasste Firmen. Er steht ueber der Liste und darf
   sie nicht verdraengen - deshalb schmal gesetzt und ohne Farbe ausser der
   des Hinweiskastens. */
.doppelte { margin-bottom: 16px; }
.doppelte ul { margin: 6px 0; padding-left: 18px; font-size: 13.5px; }
.doppelte li { margin: 3px 0; }

/* 16j ------------------------------------------------------- Bewegungen */

/* Zwei kleine Zugaben, und beide stehen unter denselben drei Bedingungen:
   ein Zeigegeraet, das schweben kann; keine Abneigung gegen Bewegung; kein
   Druck. Auf einem Telefon gibt es keinen Mauszeiger - dort passiert nichts,
   und das ist kein Verlust, sondern die richtige Antwort.

   Die Werte sind mit Absicht niedrig. Das hier ist ein Werkzeug, in dem
   jemand acht Stunden am Tag arbeitet; alles, was beim zweiten Hinsehen
   auffaellt, faellt beim zwanzigsten zur Last. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {

  /* Der Schweif. Ein einziges Element, kein Partikelsystem - eine weiche
     Flaeche, die dem Zeiger traege folgt. `multiply` statt einer Deckkraft
     ueber dem Text: die Flaeche verdunkelt den Untergrund minimal, statt ihn
     zu verdecken, und Geschriebenes bleibt lesbar. */
  .mausschweif {
    position: fixed;
    left: 0; top: 0;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle closest-side,
                rgba(103, 115, 123, 0.075), rgba(103, 115, 123, 0));
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms ease;
    will-change: transform;
    z-index: 1;
  }
  .mausschweif.is-da { opacity: 1; }

  /* Die Welle beim Klick. Sie beginnt klein und laeuft in 520 ms aus - lang
     genug, um als Antwort gelesen zu werden, kurz genug, um beim naechsten
     Klick schon vorbei zu sein. */
  .klickwelle {
    position: fixed;
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    border: 1px solid rgba(103, 115, 123, 0.5);
    background: rgba(103, 115, 123, 0.12);
    pointer-events: none;
    z-index: 100;
    animation: klickwelle 520ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  }

  @keyframes klickwelle {
    from { transform: scale(1);  opacity: 0.9; }
    to   { transform: scale(7);  opacity: 0; }
  }
}

/* Auf Papier hat Bewegung nichts verloren. */
@media print {
  .mausschweif, .klickwelle { display: none !important; }
}

/* 16k ------------------------------------------------------------- Brett */

/* Kurze Nachrichten zwischen den Benutzern. Die Liste hat eine feste Hoehe
   und rollt in sich - sonst schoebe ein langer Tag alles andere auf der
   Uebersicht nach unten. */
.brett__liste {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 2px 0 0;
  max-height: 300px;
  overflow-y: auto;
}

.brett__zeile {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: var(--steel-05);
}

/* Die eigenen Beitraege sind leicht abgesetzt. Nicht rechtsbuendig wie in
   einem Messenger: bei zwei Personen traegt der Name die Unterscheidung,
   und zwei Spalten kosten auf einer Uebersicht nur Breite. */
.brett__zeile--eigen { background: var(--accent-tint); }

.brett__kopf {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 2px;
  font-size: 12.5px;
}
.brett__kopf strong { font-size: 13px; }
.brett__zeit { color: var(--steel-50); }
.brett__kopf .inlineform { margin-left: auto; }

/* Der Loeschknopf erscheint erst beim Ueberfahren - er soll erreichbar sein,
   aber nicht in jeder Zeile um Aufmerksamkeit bitten. */
.brett__kopf .knopflink--gefahr {
  opacity: 0;
  font-size: 16px; line-height: 1;
  text-decoration: none;
  transition: opacity 140ms ease;
}
.brett__zeile:hover .knopflink--gefahr,
.brett__kopf .knopflink--gefahr:focus { opacity: 1; }

.brett__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.brett__form { display: flex; gap: 8px; align-items: flex-end; }
.brett__form textarea {
  flex: 1;
  min-height: 40px;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--steel-20);
  border-radius: 8px;
}
.brett__form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* 16l ---------------------------------------------------------- Quellen */

/* Das Einlesefenster.

   Es steht als <dialog open> im Markup und ist damit ohne Javascript eine
   ganz normale Tafel auf der Seite - das Formular funktioniert dort
   vollstaendig. Javascript nimmt das `open` weg und oeffnet es als echtes
   Fenster. Deshalb braucht die Tafel zwei Gestalten: eine flache im
   Seitenfluss und eine schwebende darueber. */
.tafel {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 0 18px;
  padding: 20px;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--schatten);
  color: inherit;
}
.tafel:not([open]) { display: none; }

/* Als Fenster: mittig, mit abgedunkeltem Hintergrund. `:modal` greift nur,
   wenn showModal() es geoeffnet hat - die flache Fassung bleibt unberuehrt. */
.tafel:modal {
  margin: auto;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 18px 50px rgba(13, 16, 18, 0.22);
}
.tafel::backdrop { background: rgba(13, 16, 18, 0.45); }

.tafel__kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.tafel__titel { margin: 0; font-size: 17px; }
.tafel__schliessen {
  margin-left: auto;
  border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--steel-50);
  padding: 0 4px;
}
.tafel__schliessen:hover { color: var(--ink); }

/* Die Landauswahl.

   Flaggen und Namen nebeneinander, als Kacheln. Eine Auswahlliste waere
   kuerzer und schlechter: man sucht das Land, das man meint, und findet es
   schneller im Blick als im Aufklappen. */
.landwahl { border: 0; margin: 0 0 16px; padding: 0; }
.landwahl__titel { font-size: 13px; font-weight: 600; color: var(--steel-60); padding: 0; }

.landwahl__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.landwahl__feld {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--steel-20);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
}
.landwahl__feld:hover { border-color: var(--steel-30); background: var(--steel-05); }

/* Der Radioknopf bleibt sichtbar. Ihn zu verstecken und die Auswahl nur
   ueber :has() zu faerben war verlockend und falsch: wo :has() fehlt, saehe
   man dann gar nicht mehr, welches Land gewaehlt ist. Die Faerbung ist die
   Zugabe, der Knopf die Auskunft. */
.landwahl__feld input { margin: 0; flex: none; }
.landwahl__feld:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
  font-weight: 600;
}
.landwahl__feld:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.landwahl__zeichen { font-size: 16px; line-height: 1; }
.landwahl__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Die Punktzahl der Vorsortierung. Gruen heisst passend, rot heisst
   Verdacht auf Wettbewerber - und daneben steht immer der Hinweis, aus dem
   sich das ergeben hat. Die Farbe allein traegt die Auskunft nicht. */
.punkte {
  display: inline-block;
  min-width: 42px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--steel-05);
  color: var(--steel-60);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
}
.punkte--gut { background: var(--gruen-tint); color: var(--gruen); }
.punkte--warnung { background: var(--rot-tint); color: var(--rot); }

.knopflink--gut { color: var(--gruen); font-weight: 600; }

/* 16m ------------------------------------------------------ Teile und QR */

/* Nummern in gleichmaessiger Breite: so lassen sie sich Ziffer fuer Ziffer
   mit dem Schild am Teil vergleichen, ohne sich zu verzaehlen. */
.teilnummer {
  font-family: var(--mono);
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.qr-block {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.qr-block__bild {
  flex: none;
  width: 150px;
  padding: 8px;
  border: var(--rule);
  border-radius: 8px;
  background: var(--white);
}
.qr-block__bild svg { display: block; width: 100%; height: auto; }

.qr-block__text { flex: 1; min-width: 220px; }
.qr-block__text p { margin: 0 0 6px; }

.qr-block__url {
  font-family: var(--mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.qr-block__knoepfe { display: flex; gap: 8px; margin-top: 12px; }

/* Ein Bereich, den man aufklappt.

   Die Einzelverfolgung ist die Ausnahme und nicht der Regelfall - sie steht
   deshalb zu, bis jemand sie braucht. Zugeklappt erklaert der Text daneben,
   wofuer sie da ist; wer 500 gleiche Gitterboxen anlegt, laesst sie zu. */
.ausklapp { margin-top: 12px; }

.ausklapp > summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 0;
  list-style-position: inside;
}
.ausklapp > summary:hover { color: var(--ink); }
.ausklapp[open] > summary { margin-bottom: 10px; }

/* Hochgeladene Bilder und Dokumente. Klein gehalten - es sind Belege zum
   Wiedererkennen und keine Galerie. */
.dateiliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.dateikachel {
  margin: 0;
  border: var(--rule);
  border-radius: 7px;
  overflow: hidden;
  background: var(--white);
}

.dateikachel img {
  display: block;
  width: 100%;
  height: 6rem;
  object-fit: cover;
}

.dateikachel__pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6rem;
  background: var(--steel-05);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.dateikachel figcaption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--steel-60);
}
.dateikachel figcaption span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.karte--gefahr { border-color: var(--rot); }
.karte--gefahr .karte__titel { color: var(--rot); }

/* --------------------------------------------------------------- Etiketten

   Die Schilder, wie sie auf Metall oder Kunststoff kommen. Auf dem Schirm
   als Gitter zum Durchsehen, beim Drucken als das, was es ist: eine Seite
   voller Etiketten. */
.etiketten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.etikett {
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 10px 12px 8px;
  background: var(--white);
  text-align: center;
  break-inside: avoid;
  page-break-inside: avoid;
}

.etikett__marke {
  margin: 0 0 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.etikett__qr { margin: 0 auto 6px; width: 96px; }
.etikett__qr svg { display: block; width: 100%; height: auto; }

.etikett__daten { margin: 0; font-size: 10px; }
.etikett__daten > div {
  display: flex;
  justify-content: center;
  gap: 6px;
  line-height: 1.45;
}
.etikett__daten dt { margin: 0; color: var(--steel-50); }
.etikett__daten dd { margin: 0; font-family: var(--mono); font-weight: 700; }

.etikett__fuss {
  margin: 6px 0 0;
  font-size: 8.5px;
  color: var(--steel-50);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ Drucken

   Beim Drucken bleibt nur das Etikettengitter. Alles andere - Seitenleiste,
   Kopfzeile, Knoepfe - gehoert auf den Schirm und nicht auf Papier. Wer ein
   PDF will, waehlt im Druckdialog „Als PDF sichern"; das erspart eine
   PDF-Bibliothek auf einem Paket, das PHP ohnehin schnell beendet. */
@media print {
  .sidebar,
  .topbar,
  .nicht-drucken,
  .flash,
  .meldung {
    display: none !important;
  }

  .inhalt, .inhalt__innen, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .etiketten {
    grid-template-columns: repeat(4, 1fr);
    gap: 4mm;
  }

  .etikett {
    border: 0.3mm solid #000;
    border-radius: 0;
    padding: 3mm 2mm 2mm;
  }

  .etikett__qr { width: 22mm; }

  @page { margin: 10mm; }
}

/* 16c ------------------------------------------------- ERP-Bereiche
   METALL und B2B: Auswahlseite nach der Anmeldung, Bereichskennung in der
   Seitenleiste, "Bereich wechseln" in der Kopfzeile, Kacheln und Seiten fuer
   vorbereitete Module. Metall traegt den Akzent der Marke, B2B das Blau -
   aber immer zusammen mit dem Namen, nie als einzige Auskunft. */

/* Seitenleiste: der Markenblock ist jetzt ein Link zur Bereichsuebersicht. */
a.sidebar__brand { color: inherit; text-decoration: none; }
a.sidebar__brand:hover .sidebar__name { color: var(--white); }
.sidebar__kopf { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sidebar__bereich {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em;
  color: #e79a73;            /* Akzent, auf dunklem Grund aufgehellt */
}
.sidebar__bereich--b2b { color: #93bde3; }

/* Kopfzeile: zurueck zur ERP-Auswahl. */
.topbar__wechsel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--steel-20);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-80);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__wechsel:hover { background: var(--steel-05); color: var(--ink); }

/* Kacheln ohne Daten: bewusst blass und gestrichelt - sie sollen nicht wie
   eine Null aussehen, die man fuer einen echten Stand halten koennte. */
/* Nicht eindeutig einem Bereich zuzuordnen: bleibt, wo es ist, und wird nur
   gekennzeichnet. Mit Text, nicht nur Farbe. */
.marke--unklar {
  margin-left: 6px;
  background: var(--accent-tint);
  color: var(--accent-strong);
  cursor: help;
}

.kachel--leer {
  background: var(--steel-05);
  border-style: dashed;
  border-color: var(--steel-20);
  box-shadow: none;
}
a.kachel--leer:hover { border-color: var(--steel-40); }
.kachel__keine { font-size: 14px; font-weight: 600; color: var(--steel-50); padding: 9px 0 8px; }

/* Vorbereitetes Modul */
.platzhalter__zwischen {
  margin: 20px 0 8px;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel-50);
}
.platzhalter__leer {
  margin: 0 0 4px;
  padding: 12px 14px;
  background: var(--steel-05);
  border-radius: var(--radius);
}
.platzhalter__verweise { margin: 0 0 18px; font-size: 14px; }

/* ERP-Auswahl (/dashboard) - eigener Rahmen ohne Seitenleiste. */
.wahl {
  display: flex; flex-direction: column;
  min-height: 100vh;
  background: var(--paper);
}

.wahl__kopf {
  display: flex; align-items: center; gap: 16px;
  padding: 12px var(--rand);
  background: var(--white);
  border-bottom: var(--rule);
}
.wahl__marke { display: flex; align-items: center; gap: 10px; }
.wahl__logo { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; }
.wahl__name { font-size: 14px; letter-spacing: 0.12em; color: var(--ink); }
.wahl__name b { font-weight: 800; }

.wahl__konto { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.wahl__benutzer { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.wahl__benutzername { font-size: 13px; font-weight: 600; color: var(--ink); }
.wahl__rolle { font-size: 11px; color: var(--steel-50); }
.wahl__kontolink { font-size: 13px; color: var(--steel-60); }
.wahl__abmelden {
  padding: 7px 12px;
  background: var(--white);
  border: 1px solid var(--steel-20);
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
}
.wahl__abmelden:hover { background: var(--steel-05); }

.wahl__inhalt {
  flex: 1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(32px, 8vh, 88px) var(--rand) 40px;
}

.wahl__oberzeile {
  margin: 0 0 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--accent-strong);
}
.wahl__titel { font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.wahl__frage { margin: 8px 0 28px; color: var(--steel-60); font-size: 15px; }

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

.wahlkarte {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 220px;
  padding: 26px 26px 22px;
  background: var(--white);
  border: 1px solid var(--steel-10);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  color: inherit;
  text-decoration: none;
}
.wahlkarte--b2b { border-top-color: var(--blau); }
.wahlkarte:hover { color: inherit; border-color: var(--steel-30); border-top-color: var(--accent); }
.wahlkarte--b2b:hover { border-top-color: var(--blau); }

.wahlkarte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wahlkarte__kurz { font-size: 28px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink); line-height: 1.1; }
.wahlkarte__zuletzt {
  padding: 2px 8px;
  border: 1px solid var(--steel-20);
  border-radius: 999px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--steel-50);
}
.wahlkarte__name { font-size: 17px; font-weight: 600; color: var(--ink-80); }
.wahlkarte__text { font-size: 13.5px; color: var(--steel-50); }
.wahlkarte__los { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--accent-strong); }
.wahlkarte--b2b .wahlkarte__los { color: var(--blau); }
.wahlkarte:hover .wahlkarte__los { text-decoration: underline; text-underline-offset: 3px; }

.wahl__gemeinsam {
  margin: 28px 0 0;
  padding-top: 16px;
  border-top: var(--rule);
  font-size: 13px;
  color: var(--steel-50);
}
.wahl__gemeinsam-titel { margin-right: 6px; font-weight: 600; color: var(--steel-60); }
.wahl__gemeinsam a { color: var(--steel-60); }
.wahl__gemeinsam a:hover { color: var(--accent-strong); }

.wahl__fuss { padding: 14px var(--rand) 22px; color: var(--steel-40); font-size: 12px; text-align: center; }

@media (max-width: 900px) {
  /* Kopfzeile: erst der Titel mit dem Wechsel daneben, darunter die Suche. */
  .topbar__title { flex: 1; }
  .topbar__wechsel { order: 1; }
  .topbar__search { order: 2; }
}

@media (max-width: 720px) {
  .wahl__karten { grid-template-columns: minmax(0, 1fr); }
  .wahlkarte { min-height: 0; }
}

@media (max-width: 520px) {
  .wahl__rolle, .wahl__kontolink { display: none; }
  .wahl__kopf { gap: 10px; }
}

/* 17 --------------------------------------------- Schmale Bildschirme */
@media (max-width: 1180px) {
  .raster--2, .raster--detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --leiste: 0px; }

  .app { flex-direction: column; }
  .main { margin-left: 0; }

  .sidebar {
    position: static;
    width: 100%;
    flex-direction: column;
  }
  .sidebar__nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
  .sidebar__group { width: 100%; margin: 6px 8px 2px; }
  .sidebar__list { display: flex; flex-wrap: wrap; gap: 4px; }
  .sidebar__foot { display: flex; align-items: center; gap: 12px; }
  .sidebar__user { margin-bottom: 0; }
  .sidebar__logout { width: auto; margin-left: auto; }

  .topbar { flex-wrap: wrap; position: static; }
  .topbar__search { margin-left: 0; width: 100%; }
  .topbar__search input { width: 100%; }

  .felder--2 { grid-template-columns: minmax(0, 1fr); }
  .kacheln--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ohne Zeigegeraet gibt es kein Ueberfahren - der Knopf muss stehen. */
  .zeile--klick .knopflink--gefahr { opacity: 1; }
  .werkzeugleiste__rechts { margin-left: 0; width: 100%; }
  .nachricht__kopf { flex-direction: column; }
  .nachricht__datum { margin-left: 0; text-align: left; }
  .vorlage__kopf { flex-direction: column; }
  .vorlage__aktionen { margin-left: 0; }
  .feld--schmal { max-width: none; }
  .datenliste { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .datenliste dt { margin-top: 8px; font-size: 12px; }
}

/* 18 ---------------------------------------------------------------- Druck */
@media print {
  .sidebar, .topbar__search, .topbar__wechsel, .kopfzeile__aktionen, .werkzeugleiste, .blaettern { display: none !important; }
  body { background: #fff; }
  .main { margin-left: 0; }
  .karte, .tabellenrahmen { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}