/* Velopad Delivery. Arbeitsoberflaeche im Stil "gerahmtes Blatt": Seitenleiste auf einem
   ruhigen Rahmenton, die Arbeit auf einem Blatt mit feiner Kante. Keine Schatten auf ruhenden
   Flaechen, kein Glas, keine Verlaeufe. Farbe nur auf Daten, Status und der einen Hauptaktion.
   Hell: velopad-arctic-light. Dunkel: velopad-deep-navy (Markenvorgabe, deshalb Navy statt Schwarz). */

:root {
  color-scheme: light;
  --rahmen: #F1F4F8;        /* Seitenleiste und Fensterrand */
  --blatt: #FFFFFF;         /* Arbeitsflaeche und Karten */
  --erhoben: #F7F8FA;       /* Hover, Nebenflaechen */
  --aktiv-flaeche: #E6EBF2; /* aktiver Menuepunkt, gewaehlter Filter */
  --kante: #DFE5ED;         /* Karten- und Blattkante */
  --linie: #EDF1F5;         /* Zeilenlinien */
  --regler: #C9D3DF;        /* Rand von Eingaben und Knoepfen */
  --text: #0F1B2D;
  --muted: #4A5E73;
  --leise: #5E7085;
  --akzent: #3D7DD8;        /* Velopad Blue: Daten und Markierung */
  --akzent-text: #2F64B0;   /* Akzent als Schrift (4.5:1 auf Weiss) */
  --akzent-blass: #E8EFF9;
  --primaer: #0F1B2D;       /* die eine gefuellte Aktion */
  --auf-primaer: #FFFFFF;
  --gut: #247B50;   --gut-blass: #DCF5E6;   --gut-tinte: #14532D;
  --schlecht: #C4242A; --schlecht-blass: #FDECEA; --schlecht-tinte: #831C1E;
  --warn: #92400E;  --warn-blass: #FEF6E4;
  --schatten-schwebend: 0 12px 32px rgba(15, 27, 45, .16);

  --schrift: "Outfit", "Segoe UI", system-ui, sans-serif;
  --marke: "Playfair Display", Georgia, serif;   /* nur fuer das Wortzeichen */
  --mono: "JetBrains Mono", Menlo, monospace;      /* nur fuer IDs */
  --r-blatt: 14px; --r-karte: 10px; --r-regler: 6px; --r-chip: 4px;
  --abstand: 16px; --polster: 20px;
  --hoehe: 32px;
}

:root[data-thema="hell"] { color-scheme: light; }

:root[data-thema="dunkel"] {
  color-scheme: dark;
  --rahmen: #0B1524;
  --blatt: #0F1B2D;
  --erhoben: #14243A;
  --aktiv-flaeche: #1C3150;
  --kante: #1E3352;
  --linie: #172A43;
  --regler: #2C4566;
  --text: #F0EFE8;
  --muted: #A9B8CC;
  --leise: #8FA3BF;
  --akzent: #3DD9D2;        /* Velopad Turquoise auf Navy */
  --akzent-text: #5FE0DA;
  --akzent-blass: #13343F;
  --primaer: #F0EFE8;
  --auf-primaer: #0F1B2D;
  --gut: #4CC285;   --gut-blass: #15301F;   --gut-tinte: #7BD9A5;
  --schlecht: #F07A7A; --schlecht-blass: #351C22; --schlecht-tinte: #F5A3A3;
  --warn: #F0C27A;  --warn-blass: #33281A;
  --schatten-schwebend: 0 16px 40px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------- Grundlagen */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--rahmen);
  color: var(--text);
  font: 400 14px/1.45 var(--schrift);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--akzent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--schrift); margin: 0; letter-spacing: 0; color: var(--text); }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
h4 { font-size: 13px; font-weight: 600; color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.stumm { color: var(--muted); }
.klein { font-size: 12.5px; color: var(--muted); }
.warn { color: var(--schlecht); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--blatt);
  border: 1px solid var(--regler); border-radius: var(--r-regler);
  height: var(--hoehe); padding: 0 10px; outline: none;
}
textarea { height: auto; padding: 8px 10px; }
input::placeholder, textarea::placeholder { color: var(--leise); }
input:focus, select:focus, textarea:focus { border-color: var(--akzent); outline: 2px solid var(--akzent-blass); }
select option { background: var(--blatt); color: var(--text); }
.hintergrund { display: none; }   /* alter Farbflecken-Hintergrund, entfaellt */

/* Glas gibt es nicht mehr: dieselben Klassen sind ruhige Flaechen */
.glas, .glas-innen {
  background: var(--blatt);
  border: 1px solid var(--kante);
  border-radius: var(--r-karte);
}
.glas-dicht {
  background: var(--blatt);
  border: 1px solid var(--kante);
  border-radius: var(--r-karte);
  box-shadow: var(--schatten-schwebend);
}

/* ---------------------------------------------------------------- Geruest */
/* Seitenleiste 232px auf dem Rahmen, rechts das Blatt mit 8px Abstand zum Fensterrand */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.seite {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 24px;
  padding: 20px 12px 16px; background: none; border: 0; border-radius: 0;
}
.marke { display: flex; align-items: baseline; gap: 8px; padding: 0 10px; line-height: 1; }
.marke-wort { font-family: var(--marke); font-size: 21px; font-weight: 700; color: var(--text); }
.marke-unter { font-size: 13px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  border-radius: var(--r-regler); color: var(--muted); font-weight: 500; transition: background .12s, color .12s;
}
.nav a:hover { color: var(--text); background: var(--aktiv-flaeche); text-decoration: none; }
.nav a.aktiv { color: var(--text); background: var(--aktiv-flaeche); }
.nav .ico { width: 16px; height: 16px; flex: none; display: grid; place-items: center; font-style: normal; }
.nav .ico svg { width: 16px; height: 16px; }
.nav .zahl {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--akzent-blass); color: var(--akzent-text);
}
.nav .zahl[hidden] { display: none; }

.seite-fuss { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 10px; font-size: 13px; color: var(--muted); }
.benutzer a { margin-left: 6px; }
.ampel { display: flex; align-items: center; gap: 8px; }
.ampel .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--leise); }
.ampel.ok .punkt { background: var(--gut); }
.ampel.fehler .punkt { background: var(--schlecht); }
.ampel.fehler { color: var(--schlecht); }
/* Unten links: Einstellungen und Hell/Dunkel nebeneinander */
.fuss-knoepfe { flex-direction: row; align-items: center; gap: 6px; margin: 2px -10px 0; }
.fuss-knoepfe a { flex: 1; }
.thema-knopf {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--r-regler); border: 1px solid var(--kante); background: var(--blatt); color: var(--muted);
}
.thema-knopf:hover { color: var(--text); }

.inhalt {
  margin: 8px 8px 8px 0; min-width: 0; min-height: calc(100vh - 16px);
  padding: 24px 32px 40px;
  background: var(--blatt); border: 1px solid var(--kante); border-radius: var(--r-blatt);
}
.kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--abstand); margin-bottom: 24px; }
.kopf .unter { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.kopf .unter:empty { display: none; }
.kopf-rechts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------------------------------------------------------------- Karten */
.karte { padding: var(--polster); margin-bottom: var(--abstand); }
.karte h3 { margin-bottom: 12px; }
.karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand); margin-bottom: 8px; }
.karte-kopf h3 { margin: 0; }
details.karte > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.karte > summary::-webkit-details-marker { display: none; }
details.karte > summary h3 { margin: 0; }
details.karte > summary::before {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s; margin-right: 2px;
}
details.karte[open] > summary::before { transform: rotate(45deg); }
details.karte[open] > summary { margin-bottom: 12px; }
.raster { display: grid; gap: var(--abstand); }
.raster.zwei { grid-template-columns: 1fr 1fr; }
.raster.drei { grid-template-columns: repeat(3, 1fr); }

/* Kennzahlen: ein Behaelter, durch feine Linien geteilt, Beschriftung ueber dem Wert */
.kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px;
  background: var(--kante); border: 1px solid var(--kante); border-radius: var(--r-karte); overflow: hidden;
  margin-bottom: var(--abstand);
}
.kachel { background: var(--blatt); padding: 14px 16px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.kachel .wert { font-size: 24px; font-weight: 500; line-height: 1.1; color: var(--text); }
.kachel .name { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kachel.hell .wert { color: var(--akzent-text); }
.kachel .wert small.von { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 2px; }
a.kachel { color: inherit; text-decoration: none; transition: background .12s; }
a.kachel:hover { background: var(--erhoben); }

/* ------------------------------------------------------------- Schalter */
.schalter-leiste {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--kante); border: 1px solid var(--kante); border-radius: var(--r-karte); overflow: hidden;
}
.schalter {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  background: var(--blatt); cursor: pointer; user-select: none;
}
.schalter:hover { background: var(--erhoben); }
.schalter .name { font-weight: 500; order: -1; }
.schalter .knauf { width: 30px; height: 18px; border-radius: 9px; background: var(--regler); position: relative; transition: background .15s; flex: none; }
.schalter .knauf::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--blatt); transition: left .15s; }
.schalter.an .knauf { background: var(--gut); }
.schalter.an .knauf::after { left: 14px; }
.schalter-leiste.nur-lesen .schalter { cursor: default; }
.schalter-leiste.nur-lesen .schalter:hover { background: var(--blatt); }

.zeiten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: 16px 0 0; font-size: 13.5px; }
.zeiten dt { color: var(--muted); }
.zeiten dd { margin: 0; }

/* ---------------------------------------------------------------- Knoepfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--hoehe); padding: 0 12px; border-radius: var(--r-regler);
  border: 1px solid var(--regler); background: var(--blatt); color: var(--text);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s;
}
.knopf:hover { background: var(--erhoben); text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf.primaer { background: var(--primaer); border-color: var(--primaer); color: var(--auf-primaer); }
.knopf.primaer:hover { opacity: .9; background: var(--primaer); }
.knopf.gut { color: var(--gut); }
.knopf.schlecht { color: var(--schlecht); }
.knopf.klein { height: 28px; padding: 0 10px; font-size: 13px; }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf:disabled:active { transform: none; }

/* Filter als ruhige Segmente */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-regler);
  border: 1px solid var(--kante); background: var(--blatt); color: var(--muted); font-size: 13px; cursor: pointer;
}
.chip:hover { color: var(--text); }
.chip.aktiv { background: var(--aktiv-flaeche); border-color: var(--aktiv-flaeche); color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------ Match-Zeilen */
.zeile-karte {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--linie);
}
.zeile-karte:last-child { border-bottom: 0; padding-bottom: 4px; }
.zeile-karte .score { font-size: 20px; font-weight: 600; text-align: right; color: var(--text); }
.zeile-karte .haupt { min-width: 0; }
.zeile-karte .haupt b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile-karte .haupt span { color: var(--muted); font-size: 13px; }
.zeile-karte .aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.zeile-karte details { grid-column: 2 / -1; font-size: 13px; color: var(--muted); }
.zeile-karte summary { cursor: pointer; color: var(--muted); width: max-content; }
.zeile-karte summary:hover { color: var(--text); }

/* Status: blasse Flaeche, dunkle Schrift desselben Tons */
.zustand {
  display: inline-block; font-size: 12px; font-weight: 500; line-height: 20px; padding: 0 8px; border-radius: var(--r-chip);
  background: var(--aktiv-flaeche); color: var(--muted); white-space: nowrap; vertical-align: 1px;
}
.zustand::first-letter { text-transform: uppercase; }
.zustand.neu { background: var(--akzent-blass); color: var(--akzent-text); }
.zustand.zugesagt, .zustand.gewonnen { background: var(--gut-blass); color: var(--gut-tinte); }
.zustand.abgelehnt, .zustand.abgesagt, .zustand.verloren, .zustand.geschlossen { background: var(--schlecht-blass); color: var(--schlecht-tinte); }

.ereignisse { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.ereignisse li { display: grid; grid-template-columns: 110px 100px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.ereignisse li:last-child { border-bottom: 0; }
.ereignisse .zeit { color: var(--muted); }
.ereignisse .art { color: var(--muted); }
.ereignisse .art::first-letter { text-transform: uppercase; }

/* ---------------------------------------------------------------- Tabellen */
.tabelle-wrap { overflow: auto; max-width: 100%; max-height: calc(100vh - 200px); padding: 0; }
.karte.tabelle-wrap { padding: 0; }
.tabelle-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.tabelle-wrap::-webkit-scrollbar-thumb { background: var(--regler); border-radius: 99px; border: 2px solid var(--blatt); }
.tabelle-wrap { scrollbar-color: var(--regler) transparent; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap;
  padding: 10px 12px; border-bottom: 1px solid var(--kante); position: sticky; top: 0; background: var(--blatt); z-index: 1;
}
td { padding: 8px 12px; height: 44px; border-bottom: 1px solid var(--linie); vertical-align: middle; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--erhoben); }
td.frei { white-space: normal; }
td.aktionen { white-space: normal; max-width: none; }
td.aktionen .knopf { margin: 2px 4px 2px 0; }
td input, td select { height: 28px; padding: 0 8px; font-size: 13px; min-width: 60px; }
td .notiz { width: 100%; background: transparent; border-color: transparent; }
td .notiz:hover, td .notiz:focus { border-color: var(--regler); background: var(--blatt); }
.prio { display: inline-flex; gap: 2px; }
.prio button { width: 24px; height: 24px; border-radius: var(--r-chip); border: 1px solid var(--kante); background: var(--blatt); color: var(--muted); cursor: pointer; font-size: 12px; padding: 0; }
.prio button.aktiv { background: var(--aktiv-flaeche); border-color: var(--regler); color: var(--text); font-weight: 600; }
.prio button.aktiv.p1 { background: var(--warn-blass); border-color: var(--warn-blass); color: var(--warn); }
.werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: var(--abstand); }
.werkzeuge input[type=search] { width: 280px; }
.werkzeuge #anzahl { margin-left: auto; }
.score-balken { display: inline-block; width: 44px; height: 4px; border-radius: 2px; background: var(--linie); vertical-align: middle; margin-right: 8px; overflow: hidden; }
.score-balken i { display: block; height: 100%; background: var(--akzent); }

/* ------------------------------------------------------------- Formulare */
.formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px 20px; }
.formular label { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.formular label .klein { display: block; }
.formular .breit { grid-column: 1 / -1; }
.formular.einspaltig, .dialog .formular.einspaltig { grid-template-columns: 1fr; }

/* ------------------------------------------------------- Dialog, Meldungen */
.dialog { padding: 0; color: var(--text); width: min(600px, 92vw); border-radius: 12px; }
.dialog::backdrop { background: rgba(15, 27, 45, .45); }
#dialog-inhalt { padding: 24px; }
.dialog h2 { margin-bottom: 16px; }
.dialog .knoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.dialog textarea { width: 100%; min-height: 220px; font-size: 13.5px; line-height: 1.5; }
.dialog .formular { grid-template-columns: 1fr 1fr; }

.toasts { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { padding: 10px 14px; font-size: 13.5px; border-left: 3px solid var(--regler); }
.toast.fehler { border-left-color: var(--schlecht); }
.toast.gut { border-left-color: var(--gut); }

.leer { padding: 20px 0; color: var(--muted); font-size: 14px; }
.leer b { font-weight: 500; color: var(--muted); }

/* --------------------------------------------- Anmeldung, Antwortseite, Passwort */
.antwort-seite { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.antwort { width: min(440px, 94vw); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.antwort .marke { padding: 0; margin-bottom: 8px; }
.projektkarte { border-radius: var(--r-karte); padding: 16px 20px; background: var(--erhoben); }
.projektkarte dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 12px 0 0; font-size: 14px; }
.projektkarte dt { color: var(--muted); }
.projektkarte dd { margin: 0; }
.antwort-form { display: flex; flex-direction: column; gap: 14px; }
.antwort-form[hidden] { display: none; }
.antwort-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.antwort-form .knoepfe { display: flex; gap: 10px; margin-top: 4px; }
.antwort-form .knopf { height: 38px; padding: 0 16px; font-size: 14px; }

/* ---------------------------------------------------------------- Akquise */
.akq-liste { padding: 4px var(--polster); }
.akq-zeile {
  display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 16px;
  gap: var(--abstand); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie); color: var(--text);
}
.akq-zeile:last-child { border-bottom: 0; }
a.akq-zeile, a.akq-zeile:hover { text-decoration: none; }
a.akq-zeile:hover { background: var(--erhoben); }
.akq-zeile.kopfzeile { font-size: 12px; font-weight: 500; color: var(--muted); padding: 10px 0; border-bottom-color: var(--kante); }
details.akq-liste > summary { padding: 14px 0; }
.zwei { display: flex; flex-direction: column; min-width: 0; }
.zwei b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zwei small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfeil { color: var(--leise); font-size: 18px; text-align: right; line-height: 1; }
a.akq-zeile:hover .pfeil { color: var(--text); }
.frist-text.bald small, .frist-text.bald b { color: var(--warn); }
.frist-text.dringend small, .frist-text.dringend b, .frist-text.vorbei small { color: var(--schlecht); }
.stufe { display: inline-block; padding: 0 8px; line-height: 22px; border-radius: var(--r-chip); font-size: 12.5px; background: var(--aktiv-flaeche); color: var(--text); white-space: nowrap; }

.stepper { display: grid; grid-template-columns: repeat(7, 1fr); list-style: none; margin: 0; padding: 4px 0; }
.stepper li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); text-align: center; position: relative; }
.stepper li::before { content: ""; position: absolute; top: 6px; left: calc(-50% + 8px); right: calc(50% + 8px); height: 2px; background: var(--kante); }
.stepper li:first-child::before { display: none; }
.stepper li.erledigt::before, .stepper li.aktuell::before { background: var(--akzent); }
.stepper .punkt { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--regler); background: var(--blatt); z-index: 1; }
.stepper li.erledigt .punkt { background: var(--akzent); border-color: var(--akzent); }
.stepper li.aktuell .punkt { border: 4px solid var(--akzent); }
.stepper li.aktuell { color: var(--text); font-weight: 600; }
.akq-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--abstand); align-items: start; }
.akq-raster > .karte { margin-bottom: var(--abstand); }
.kacheln.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.filter { margin-bottom: 12px; }
.eckdaten { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; font-size: 14px; }
.eckdaten dt { color: var(--muted); }
.eckdaten dd { margin: 0; min-width: 0; }
.eckdaten .zwei { flex-direction: row; gap: 8px; align-items: baseline; }
.naechster p { margin: 0; font-size: 15px; }
.kand table { width: 100%; }
.kand td.rolle { max-width: 260px; }
tr.klickbar { cursor: pointer; }
tr.klickbar.offen .pfeil { transform: rotate(90deg); }
tr.info td { white-space: normal; max-width: none; color: var(--muted); padding: 4px 12px 14px; }
.klasse { display: inline-block; padding: 0 8px; line-height: 20px; border-radius: var(--r-chip); font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--aktiv-flaeche); color: var(--muted); }
.klasse.interessiert, .klasse.vorgeschlagen, .klasse.interview, .klasse.beauftragt { background: var(--gut-blass); color: var(--gut-tinte); }
.klasse.absage { background: var(--schlecht-blass); color: var(--schlecht-tinte); }
.klasse.sonst { background: var(--warn-blass); color: var(--warn); }

/* ----------------------------------------------------------- Einstellungen */
/* Alle Karten volle Breite und gleich lang; Beschriftung in fester Spalte, Eingabe daneben */
.einstellungen { display: flex; flex-direction: column; }
.einstellungen .karte { width: 100%; }
.ez-bereich { display: flex; align-items: baseline; gap: 12px; margin: 32px 0 12px; font-size: 18px; }
.ez-form:first-child .ez-bereich { margin-top: 0; }
.ez-bereich small { font-size: 13px; font-weight: 400; color: var(--muted); }
.ez { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 480px); gap: 24px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 14px; color: var(--text); }
.ez:last-child { border-bottom: 0; }
.ez[title] > span:first-child { cursor: help; }
.ez-feld { display: flex; align-items: center; gap: 8px; }
.ez-feld input, .ez-feld select { width: 100%; }
.ez-feld input.zahl { width: 100px; text-align: right; }
.ez-feld small { color: var(--muted); font-size: 13px; }
.ez-feld .stumm { margin-left: 6px; }
.ez-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
.ez-gruppe { margin-top: 20px; }
.ez-gruppe:first-of-type { margin-top: 4px; }
.ez-gruppe h4 { margin: 0 0 2px; }
details.ez-mehr { margin-top: 12px; }
details.ez-mehr > summary { cursor: pointer; color: var(--muted); font-size: 13.5px; padding: 6px 0; }
.status-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--leise); flex: none; }
.status-punkt.an { background: var(--gut); }
.status-punkt.warn { background: var(--warn); }

td.zwei-zeilig small { display: block; font-size: 12.5px; color: var(--muted); }
td.zwei-zeilig .zustand { margin-left: 6px; }

/* ------------------------------------------------------------------ Breiten */
@media (max-width: 1100px) {
  .raster.zwei, .raster.drei, .akq-raster { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .akq-zeile { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .akq-zeile > :nth-child(3), .akq-zeile > :nth-child(4) { display: none; }
  .stepper { grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
}
/* Telefon: Navigation als Leiste oben, das Blatt wird der Bildschirm */
@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); }   /* sonst drueckt die Navigationszeile die Seite breiter als den Bildschirm */
  .seite { position: static; height: auto; padding: 12px 12px 8px; gap: 10px; min-width: 0; }
  .marke { padding: 0 4px; }
  .nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .nav a { flex: none; height: 36px; }
  .seite-fuss { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 4px; }
  .fuss-knoepfe { margin: 0 0 0 auto; }
  .fuss-knoepfe a { flex: none; }
  .inhalt { margin: 0 8px 8px; padding: 18px 16px 32px; min-height: 0; }
  .kopf { flex-direction: column; align-items: flex-start; }
  .kopf-rechts { justify-content: flex-start; }
  .schalter-leiste { grid-template-columns: 1fr; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kacheln > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* keine leere Zelle bei ungerader Zahl */
  .zeile-karte { grid-template-columns: 44px minmax(0, 1fr); }
  .zeile-karte .aktionen { grid-column: 2 / -1; justify-content: flex-start; }
  .werkzeuge input[type=search] { width: 100%; }
  .ez { grid-template-columns: 1fr; gap: 6px; }
  .ereignisse li { grid-template-columns: 1fr; gap: 2px; }
  table.konten thead { display: none; }
  table.konten tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  table.konten td { border-bottom: 0; height: auto; }
  table.konten td.aktionen { grid-column: 1 / -1; border-bottom: 1px solid var(--linie); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }