/* MS Backend Core Azure
   Grunddesign nach dem Vorbild der Projektmeeting-Ansicht:
   ruhige Flaechen, rote Akzentkante, Versalien-Kleinlabels, viel Luft.
   Akzent #FF0035, Hausschrift Arial. */

/* Bruecke: die alten Merkmalsnamen zeigen auf die Merkmale der Huelle
   (shell.css). So bleiben die Bausteine unveraendert und bekommen
   trotzdem Farben, Rundungen und Dunkelmodus aus einer Hand. */
:root {
  --cc-rot: #FF0035;
  --cc-rot-dunkel: var(--accent-ink);
  --cc-rot-hauch: var(--accent-soft);
  --cc-grau-text: var(--ink-soft);

  --panel: var(--bg);
  --muted: var(--ink-soft);
  --line-zart: var(--line);
  --kopf-bg: var(--bg-soft);
  --zeile-hover: var(--grau-hover);
  --warn: #B25E00;
  --warn-bg: #FFF3E0;
  --gruen: #1B7A3D;
  --gruen-bg: #E8F5EC;
  --ok-bg: #EEF4EE;
  --skala: 1;
  --schatten-hoch: 0 2px 10px rgba(0,0,0,.09);
  --kante: 6px;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --warn-bg: #3a2a10;
  --gruen-bg: #123021;
  --ok-bg: #14241a;
}


@media (prefers-color-scheme: dark) {
  :root {
    --cc-rot: #FF3355;
    --cc-rot-dunkel: #FF0035;
    --cc-rot-hauch: #2A1419;
    --bg: #0E1012;
    --panel: #16191C;
    --ink: #EDEFF1;
    --muted: #9BA3AB;
    --line: #2E3338;
    --line-zart: #23272B;
    --kopf-bg: #1B1F23;
    --zeile-hover: #1F1619;
    --warn: #E9A23B;
    --warn-bg: #2A2013;
    --gruen: #4FBF77;
    --gruen-bg: #14251A;
    --ok-bg: #16201A;
    --schatten: none;
    --schatten-hoch: 0 2px 10px rgba(0,0,0,.5);
  }
}




/* Kleinlabel, das Kernelement der Meeting-Ansicht */
h2, .label {
  font-size: 12px; margin: 0; font-weight: bold;
  text-transform: uppercase; letter-spacing: .9px;
}

/* ------------------------------------------------------------ Kopfzeile */



h1 {
  font-size: 22px; font-weight: bold; color: var(--ink);
  margin: 12px 0 20px; padding-bottom: 11px;
  border-bottom: 3px solid var(--cc-rot);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
h1 small { font-size: 13px; color: var(--muted); font-weight: normal; }
.hint { color: var(--muted); font-size: 13px; }
.fuss { margin-top: 26px; }
.muted { color: var(--muted); }
.leer { color: var(--muted); font-size: 14px; padding: 6px 0 10px; }
.err { color: var(--cc-rot); font-size: 13px; font-weight: bold; margin: 0 0 14px; }
.nix { color: var(--line); }

/* ----------------------------------------------------------- Anmeldung */
body.anmeldung { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.loginbox {
  width: 100%; max-width: 420px; padding: 0; margin: 0;
  background: var(--panel);
  border: 1px solid var(--line); border-left: var(--kante) solid var(--cc-rot);
  border-radius: var(--radius); box-shadow: var(--schatten-hoch);
  overflow: hidden;
}
.login-kopf {
  padding: 32px 34px 28px; border-bottom: 2px solid var(--line-zart);
  background: var(--kopf-bg);
}
.login-kopf .marke { height: 56px; }
.login-feld { padding: 26px 34px 28px; }
.login-feld label {
  display: block; font-size: 12px; color: var(--muted);
  margin: 0 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: .9px;
}
.login-feld label + input { margin-bottom: 18px; }
.loginbox input {
  width: 100%; padding: 11px 13px; font: 15px Arial, Helvetica, sans-serif;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
}
.loginbox input:focus { outline: 2px solid var(--cc-rot); outline-offset: -1px; border-color: var(--cc-rot); }
.loginbox button {
  width: 100%; margin-top: 6px; padding: 13px;
  background: var(--cc-rot); color: #fff; border: 0; border-radius: var(--radius);
  font: bold 14px Arial, Helvetica, sans-serif; cursor: pointer;
  text-transform: uppercase; letter-spacing: 1px;
}
.loginbox button:hover { background: var(--cc-rot-dunkel); }
.login-fuss {
  margin: 0; padding: 16px 34px 22px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--line-zart); background: var(--kopf-bg);
}

/* Anmeldung mit dem Arbeitskonto. Bewusst ruhiger als der rote Knopf
   darueber: der eine ist die Anmeldung, der andere ein zweiter Weg. */
.login-oder {
  margin: 0; padding: 0 34px; text-align: center; font-size: 12px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 1px;
  display: flex; align-items: center; gap: 12px;
}
.login-oder::before, .login-oder::after {
  content: ""; flex: 1; height: 1px; background: var(--line-zart);
}
.login-sso {
  display: block; margin: 14px 34px 0; padding: 12px;
  text-align: center; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  font: bold 14px Arial, Helvetica, sans-serif;
}
.login-sso:hover { border-color: var(--cc-rot); color: var(--cc-rot); }
.login-sso:focus-visible { outline: 2px solid var(--cc-rot); outline-offset: 2px; }
.login-hinweis {
  margin: 10px 34px 0; font-size: 12px; color: var(--muted); text-align: center;
}

/* ---------------------------------------------------------- Kennzahlen */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.kpi {
  background: var(--panel); border: 1px solid var(--line-zart);
  border-left: var(--kante) solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 3px;
  color: var(--ink); box-shadow: var(--schatten);
}
.kpi:hover { text-decoration: none; border-left-color: var(--cc-rot); box-shadow: var(--schatten-hoch); }
.kpi-zahl { font-size: 30px; font-weight: bold; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .9px; font-weight: bold; }
.kpi.k-warn { border-left-color: var(--warn); }
.kpi.k-warn .kpi-zahl { color: var(--warn); }

/* --------------------------------------------------------------- Panel */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; }
.panel {
  background: var(--panel); border: 1px solid var(--line-zart);
  border-left: var(--kante) solid var(--line);
  border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden;
  margin-bottom: 16px;
}
.panel-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; background: var(--kopf-bg);
  border-bottom: 2px solid var(--line-zart);
}
.panel-kopf h2 { color: var(--ink); }
.panel-mehr { font-size: 12px; color: var(--muted); }
.panel-inhalt { padding: 6px 20px 14px; }

.zeile { padding: 12px 0; border-bottom: 1px solid var(--line-zart); }
.zeile:last-child { border-bottom: 0; }
.z-haupt { font-size: 15px; margin-bottom: 6px; }
.z-haupt a { color: var(--ink); font-weight: bold; }
.z-haupt a:hover { color: var(--cc-rot); }
.z-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.z-schritt { font-size: 13px; color: var(--muted); margin-top: 6px; }
.zeile.ist-spaet { border-left: 4px solid var(--cc-rot); padding-left: 14px; margin-left: -18px; }

/* -------------------------------------------------------------- Badges */
.badge {
  display: inline-block; font-size: 12px; line-height: 1.75;
  padding: 0 10px; border-radius: 12px;
  background: var(--line-zart); color: var(--ink);
  white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.badge.b-hoch { background: var(--cc-rot); color: #fff; font-weight: bold; }
.badge.b-mittel { background: var(--warn-bg); color: var(--warn); font-weight: bold; }
.badge.b-niedrig { background: var(--ok-bg); color: var(--muted); }
.datum { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.datum.spaet { color: var(--cc-rot); font-weight: bold; }

/* ------------------------------------------------------------- Kacheln */
.cards, .menue {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 10px;
}
/* Gegliedertes Startmenue: Gruppen als Spalten nebeneinander */
.menue-block {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px; align-items: start; margin-bottom: 30px;
}
.menue-gruppe { min-width: 0; }
.menue-gruppe > h2 {
  color: var(--muted); margin: 0 0 11px; padding-bottom: 8px;
  border-bottom: 2px solid var(--line-zart);
}
.menue {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 0;
}
/* Startmenue: groesser als die uebrigen Kacheln, es ist der Einstieg */
.menue .card { padding: 18px 20px; gap: 14px; }
.menue .card .ico { font-size: 24px; }
.menue .card .lbl { font-size: 15.5px; }
.menue .card .cnt { font-size: 16px; font-weight: bold; color: var(--ink); }
.menue .card.ist-meeting .cnt { font-size: 12.5px; font-weight: normal; color: var(--muted); }
.card {
  display: flex; align-items: center; gap: 11px;
  background: var(--panel); border: 1px solid var(--line-zart);
  border-left: var(--kante) solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; color: var(--ink);
  box-shadow: var(--schatten);
}
.card:hover { border-left-color: var(--cc-rot); background: var(--zeile-hover); text-decoration: none; }
.card .ico { font-size: 17px; line-height: 1; }
.card .lbl { flex: 1; font-size: 13.5px; font-weight: bold; }
.card .cnt { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.card.ist-meeting .cnt { font-size: 12px; font-weight: normal; color: var(--muted); }

/* -------------------------------------------------------- Werkzeugleiste */
.werkzeuge { margin-bottom: 12px; }
.wz-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wz-suche {
  flex: 1 1 260px; min-width: 210px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); font: 14px Arial, Helvetica, sans-serif;
}
.wz-suche:focus { outline: 2px solid var(--cc-rot); outline-offset: -1px; }
.wz-filter {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); font: 13px Arial, Helvetica, sans-serif;
  max-width: 210px;
}
.wz-filter.ist-aktiv { border-color: var(--cc-rot); color: var(--cc-rot); font-weight: bold; }
.wz-check { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.werkzeuge button {
  padding: 9px 18px; border: 0; border-radius: var(--radius);
  background: var(--cc-rot); color: #fff; cursor: pointer;
  font: bold 13px Arial, Helvetica, sans-serif;
}
.werkzeuge button:hover { background: var(--cc-rot-dunkel); }
.wz-reset { font-size: 13px; color: var(--muted); }

.spaltenwahl {
  background: var(--panel); border: 1px solid var(--line-zart);
  border-left: var(--kante) solid var(--line);
  border-radius: var(--radius); margin-bottom: 14px; font-size: 13px;
  box-shadow: var(--schatten);
}
.spaltenwahl summary {
  padding: 11px 18px; cursor: pointer; color: var(--muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: .9px; font-weight: bold;
}
.spaltenwahl summary:hover { color: var(--cc-rot); }
.spaltenwahl[open] { border-left-color: var(--cc-rot); }
.sw-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 6px 16px; padding: 8px 18px 14px; border-top: 2px solid var(--line-zart);
}
.sw-liste label { display: flex; align-items: center; gap: 7px; }
.sw-fuss { display: flex; gap: 18px; align-items: center; padding: 0 18px 14px; flex-wrap: wrap; }
.sw-fuss button {
  padding: 8px 16px; border: 0; border-radius: var(--radius);
  background: var(--cc-rot); color: #fff; cursor: pointer;
  font: bold 13px Arial, Helvetica, sans-serif;
}
.sw-fuss a { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------- Tabellen */
.tablewrap {
  overflow: auto; max-height: calc(100vh - 250px);
  background: var(--panel);
  border: 1px solid var(--line-zart); border-left: var(--kante) solid var(--line);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 14px; white-space: nowrap; vertical-align: top; }
th {
  background: var(--kopf-bg); color: var(--ink);
  font-weight: bold; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .7px;
  border-bottom: 2px solid var(--cc-rot);
  position: sticky; top: 0; z-index: 2;
  overflow: hidden; text-overflow: ellipsis;
}
th a { color: var(--ink); }
td { border-bottom: 1px solid var(--line-zart); }
tbody tr:hover { background: var(--zeile-hover); }
tbody tr[data-href] { cursor: pointer; }
tbody tr:last-child td { border-bottom: 0; }
tr.archiviert td { opacity: .45; }
td.haft, th.haft {
  position: sticky; left: 0; background: var(--panel); z-index: 1;
  border-right: 2px solid var(--line-zart); max-width: 340px;
  white-space: normal; font-weight: bold;
}
table.ist-fest td.haft, table.ist-fest th.haft { max-width: none; }
th.haft .spaltengriff::after { display: none; }
th.haft.griff-an { border-right-color: var(--cc-rot); }
th.haft { background: var(--kopf-bg); z-index: 3; }
tbody tr:hover td.haft { background: var(--zeile-hover); }

/* Checkbox- und Menuespalte kleben mit an den Raendern wie die Namensspalte,
   Korrektur vom 24.09.2026: die Checkbox war optisch nicht am echten linken
   Rand, die Markierung der offenen Zeile lag zwischen Checkbox und Namen
   statt am echten Rand, und das "..."-Menue war bei breiten Tabellen erst
   nach dem Scrollen sichtbar bzw. wurde vom geoeffneten Fenster verdeckt. */
td.chk, th.chk {
  position: sticky; left: 0; background: var(--panel); z-index: 1;
}
th.chk { background: var(--kopf-bg); z-index: 3; }
tbody tr:hover td.chk { background: var(--zeile-hover); }
td.menu, th.menu {
  position: sticky; right: 0; background: var(--panel); z-index: 1;
  border-left: 1px solid var(--line-zart);
}
th.menu { background: var(--kopf-bg); z-index: 3; }
tbody tr:hover td.menu { background: var(--zeile-hover); }
.zelle { color: var(--ink); }
td .badge + .badge { margin-left: 4px; }

.pager { display: flex; gap: 5px; flex-wrap: wrap; margin: 16px 0; font-size: 13px; }
.pager a, .pager span {
  padding: 7px 12px; border: 1px solid var(--line-zart);
  border-radius: var(--radius); background: var(--panel);
  font-variant-numeric: tabular-nums;
}
.pager a { color: var(--ink); }
.pager span { background: var(--cc-rot); color: #fff; border-color: var(--cc-rot); font-weight: bold; }
.pager .luecke { background: transparent; border: 0; color: var(--muted); }

/* ------------------------------------------------------------- Detail */
.feldgruppe {
  margin: 20px 0 6px; color: var(--muted); font-size: 12px; font-weight: bold;
  text-transform: uppercase; letter-spacing: .8px;
}
.feldgruppe:first-child { margin-top: 0; }
.rueck-titel {
  margin: 28px 0 12px; color: var(--ink);
  border-bottom: 2px solid var(--cc-rot); padding-bottom: 8px;
}
.detail {
  display: grid; grid-template-columns: 250px 1fr;
  background: var(--panel); border: 1px solid var(--line-zart);
  border-left: var(--kante) solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin: 0 0 20px;
  box-shadow: var(--schatten);
}
.detail dt {
  padding: 11px 18px; font-size: 11.5px; font-weight: bold; color: var(--muted);
  background: var(--kopf-bg); border-bottom: 1px solid var(--line-zart);
  text-transform: uppercase; letter-spacing: .8px;
}
.detail dd {
  padding: 11px 18px; margin: 0; border-bottom: 1px solid var(--line-zart);
  overflow-wrap: anywhere; white-space: normal; font-size: 14px;
}
.detail dd .badge + .badge { margin-left: 5px; }

@media (max-width: 760px) {
  body { font-size: 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
  .detail dt { border-bottom: 0; padding-bottom: 3px; }
  main, .topinner, .crumbwrap { padding-left: 15px; padding-right: 15px; }
  .menue { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .menue .card { padding: 14px 16px; }
  .menue .card .ico { font-size: 20px; }
  .menue .card .lbl { font-size: 14px; }
  td.haft, th.haft { position: static; }
  .tablewrap { max-height: none; }
  .login-kopf, .login-feld, .login-fuss { padding-left: 22px; padding-right: 22px; }
  .login-oder { padding-left: 22px; padding-right: 22px; }
  .login-sso, .login-hinweis { margin-left: 22px; margin-right: 22px; }
}
/* ==================================================== Projektmeeting
   Auf Bildschirmfreigabe ausgelegt: grosse Schrift, hoher Kontrast,
   keine Deckkraft-Tricks. --skala wird ueber den Regler gesetzt. */

body.praesentation {
  --skala: 1;
  background: var(--bg);
}
body.praesentation.skala-m { --skala: 1.18; }
body.praesentation.skala-l { --skala: 1.38; }
body.praesentation.skala-xl { --skala: 1.62; }

.pt-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 16px 28px; flex-wrap: wrap;
  background: var(--panel); border-bottom: 4px solid var(--cc-rot);
  position: sticky; top: 0; z-index: 30; box-shadow: var(--schatten);
}
.pt-kopf-links { display: flex; align-items: baseline; gap: 18px; }
.pt-titel {
  font-size: 22px; font-weight: bold; color: var(--cc-rot);
  text-transform: uppercase; letter-spacing: 1.2px;
}
.pt-datum { font-size: 16px; color: var(--ink); }
.pt-kopf-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-zahl { font-size: 16px; color: var(--ink); font-weight: bold; font-variant-numeric: tabular-nums; }
.pt-knopf {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); cursor: pointer;
  font: bold 14px Arial, Helvetica, sans-serif;
}
.pt-knopf:hover { border-color: var(--cc-rot); color: var(--cc-rot); text-decoration: none; }
.pt-regler { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pt-regler button {
  padding: 9px 13px; border: 0; background: var(--panel); color: var(--ink);
  cursor: pointer; font: bold 14px Arial, Helvetica, sans-serif;
  border-right: 1px solid var(--line);
}
.pt-regler button:last-child { border-right: 0; }
.pt-regler button.ist-aktiv { background: var(--cc-rot); color: #fff; }

.pt-main { padding: 22px 28px 48px; }
.pt-raster {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 1500px; margin: 0 auto;
}
.pt-raster.ist-fokusmodus { display: block; }
.pt-karte.ist-versteckt { display: none; }

.pt-karte {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 8px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--schatten); overflow: hidden; cursor: pointer;
}
.pt-karte:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.pt-karte.prio-hoch { border-left-color: var(--cc-rot); }
.pt-karte.prio-mittel { border-left-color: var(--warn); }
.pt-karte.prio-niedrig { border-left-color: var(--muted); }

.pt-karte-kopf {
  padding: 18px 22px 15px; border-bottom: 2px solid var(--line-zart);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.pt-kopf-text { flex: 1 1 420px; min-width: 0; }
.pt-karte-kopf .pt-status { flex: 0 0 auto; justify-content: flex-end; }
.pt-kennung { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.pt-nr {
  font-size: calc(14px * var(--skala)); font-weight: bold; letter-spacing: .8px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.pt-name {
  font-size: calc(25px * var(--skala)); font-weight: bold; margin: 0 0 5px;
  text-transform: none; letter-spacing: 0; color: var(--ink); line-height: 1.22;
}
.pt-kunde { font-size: calc(17px * var(--skala)); color: var(--ink); margin-bottom: 11px; }
.pt-status { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.pt-datenlage { font-size: calc(14px * var(--skala)); color: var(--muted); }

.pt-karte-inhalt {
  padding: 8px 22px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(330px * var(--skala)), 1fr));
  gap: 0 34px; align-items: start;
}
.pt-karte-inhalt .pt-schritt { grid-column: 1 / -1; }
.pt-block { margin: 16px 0; }
.pt-block h3 {
  font-size: calc(13px * var(--skala)); text-transform: uppercase; letter-spacing: .9px;
  color: var(--ink); margin: 0 0 7px; font-weight: bold;
}
.pt-block p { margin: 0; font-size: calc(18px * var(--skala)); line-height: 1.5; }
.pt-block ul { margin: 0; padding-left: calc(22px * var(--skala)); }
.pt-block li { font-size: calc(17px * var(--skala)); line-height: 1.5; margin-bottom: 6px; }
.pt-schritt {
  background: var(--cc-rot-hauch); border-left: 4px solid var(--cc-rot);
  border-radius: var(--radius); padding: 13px 18px; margin: 16px 0;
}
.pt-schritt h3 { color: var(--cc-rot); }
.pt-schritt p { font-weight: bold; }
.pt-leise li, .pt-leise p { color: var(--muted); font-size: calc(15px * var(--skala)); }

.pt-karte-fuss {
  padding: 13px 22px; border-top: 2px solid var(--line-zart);
  background: var(--kopf-bg); display: flex; gap: 18px; flex-wrap: wrap;
}
.pt-leute { font-size: calc(15px * var(--skala)); color: var(--ink); }
.pt-pm { color: var(--muted); }
.pt-pm::before { content: "PM: "; font-weight: bold; }

/* Groessere, kontraststarke Badges in der Praesentation */
body.praesentation .badge {
  font-size: calc(14px * var(--skala)); line-height: 1.9;
  padding: 0 12px; border-radius: 14px; max-width: none;
  border: 1px solid transparent;
}
body.praesentation .badge.b-hoch { background: var(--cc-rot); color: #fff; }
body.praesentation .badge.b-mittel { background: var(--warn); color: #fff; }
body.praesentation .badge.b-niedrig { background: var(--line-zart); color: var(--ink); border-color: var(--line); }
body.praesentation .badge:not(.b-hoch):not(.b-mittel):not(.b-niedrig) {
  background: var(--panel); color: var(--ink); border-color: var(--line);
}
body.praesentation .datum { font-size: calc(15px * var(--skala)); color: var(--ink); font-weight: bold; }
body.praesentation .datum.spaet { color: var(--cc-rot); }

/* Fokusmodus: nochmals eine Stufe groesser */
.pt-karte.ist-fokus {
  max-width: calc(1150px * var(--skala)); margin: 0 auto; cursor: default;
  border-left-width: 12px;
}
.pt-karte.ist-fokus .pt-name { font-size: calc(40px * var(--skala)); }
.pt-karte.ist-fokus .pt-kunde { font-size: calc(23px * var(--skala)); }
.pt-karte.ist-fokus .pt-nr { font-size: calc(17px * var(--skala)); }
.pt-karte.ist-fokus .pt-block p { font-size: calc(23px * var(--skala)); }
.pt-karte.ist-fokus .pt-block li { font-size: calc(22px * var(--skala)); margin-bottom: 9px; }
.pt-karte.ist-fokus .pt-leise li { font-size: calc(19px * var(--skala)); }
.pt-karte.ist-fokus .pt-block h3 { font-size: calc(15px * var(--skala)); }
.pt-karte.ist-fokus .badge { font-size: calc(17px * var(--skala)); padding: 2px 16px; }
.pt-karte.ist-fokus .datum { font-size: calc(19px * var(--skala)); }
.pt-karte.ist-fokus .pt-karte-kopf { padding: 30px 38px 24px; }
.pt-karte.ist-fokus .pt-karte-inhalt { padding: 14px 38px 26px; gap: 0 46px; }
.pt-karte.ist-fokus .pt-karte-fuss { padding: 18px 38px; }
.pt-karte.ist-fokus .pt-leute { font-size: calc(18px * var(--skala)); }

.pt-fokusleiste {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 2px solid var(--line);
  border-radius: 28px; padding: 9px 18px; box-shadow: 0 4px 18px rgba(0,0,0,.2);
  font-size: 16px; font-weight: bold; color: var(--ink); z-index: 40;
}
.pt-fokusleiste .pt-knopf { border-radius: 20px; font-size: 16px; padding: 7px 16px; }

@media (max-width: 900px) {
  .pt-raster { grid-template-columns: 1fr; }
  .pt-main { padding: 14px; }
  .pt-kopf { padding: 12px 14px; }
}

/* ---------------------------------------- Begrüßung und Teilnehmer */
.pt-willkommen, .pt-anwesenheit {
  max-width: 1500px; margin: 0 auto 16px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 8px solid var(--cc-rot); border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.pt-willkommen summary {
  padding: 16px 22px; cursor: pointer; list-style: none;
  font-size: calc(21px * var(--skala)); font-weight: bold; color: var(--cc-rot);
}
.pt-willkommen summary::-webkit-details-marker { display: none; }
.pt-willkommen summary::after { content: " ▾"; color: var(--muted); font-weight: normal; }
.pt-willkommen[open] summary::after { content: " ▴"; }
.pt-willkommen-text { padding: 0 22px 20px; }
.pt-willkommen-text p { font-size: calc(18px * var(--skala)); line-height: 1.55; margin: 0 0 12px; }
.pt-willkommen-text ul { margin: 0 0 12px; padding-left: calc(24px * var(--skala)); }
.pt-willkommen-text li { font-size: calc(18px * var(--skala)); line-height: 1.55; margin-bottom: 7px; }
.pt-willkommen-text strong { color: var(--cc-rot); }

.pt-anw-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 14px 22px 10px;
}
.pt-anw-kopf h2 { font-size: calc(17px * var(--skala)); color: var(--ink); letter-spacing: .6px; }
.pt-anw-rechts { display: flex; align-items: center; gap: 10px; }
.pt-anw-stand {
  font-size: calc(16px * var(--skala)); font-weight: bold; color: var(--gruen);
  font-variant-numeric: tabular-nums;
}
.pt-anw-liste { display: flex; flex-wrap: wrap; gap: 9px; padding: 0 22px 18px; }
.pt-anw-person {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 11px; border: 2px solid var(--line);
  border-radius: 24px; background: var(--panel); cursor: pointer;
  font-size: calc(16px * var(--skala)); color: var(--muted);
  user-select: none;
}
.pt-anw-person:hover { border-color: var(--gruen); }
.pt-anw-person input { width: 18px; height: 18px; accent-color: var(--gruen); cursor: pointer; margin: 0; }
.pt-anw-person .pt-anw-icon { font-size: calc(16px * var(--skala)); filter: grayscale(1); opacity: .5; }
.pt-anw-person.ist-da {
  border-color: var(--gruen); background: var(--gruen-bg);
  color: var(--gruen); font-weight: bold;
}
.pt-anw-person.ist-da .pt-anw-name { color: var(--ink); }
.pt-anw-person.ist-da .pt-anw-icon { filter: none; opacity: 1; }

/* ------------------------------------------- Leute im Kartenkopf */
.pt-leute-block { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pt-leute {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: calc(15px * var(--skala)); color: var(--ink);
}
.pt-leute-icon { font-size: calc(17px * var(--skala)); line-height: 1; }
.pt-leute-label {
  font-size: calc(12px * var(--skala)); text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); font-weight: bold; margin-right: 2px;
}
.pt-person {
  display: inline-block; padding: 2px 11px; border-radius: 13px;
  background: var(--line-zart); color: var(--ink);
  font-size: calc(15px * var(--skala)); white-space: nowrap;
}
.pt-person-pm { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.pt-leute-leer { color: var(--muted); font-style: italic; margin-top: 10px; }

.pt-karte.ist-fokus .pt-person { font-size: calc(18px * var(--skala)); padding: 3px 14px; }
.pt-karte.ist-fokus .pt-leute-label { font-size: calc(14px * var(--skala)); }

.pt-anw-gruppe { padding: 0 22px 6px; }
.pt-anw-gruppe h3 {
  font-size: calc(12px * var(--skala)); text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); font-weight: bold; margin: 8px 0 7px;
}
.pt-anw-gruppe:last-of-type { padding-bottom: 18px; }
.pt-anw-liste { padding: 0 0 4px; }
.pt-anw-abw { font-size: calc(14px * var(--skala)); color: var(--warn); font-weight: bold; }
.pt-anw-notiz { font-size: calc(13px * var(--skala)); color: var(--warn); margin-left: 4px; }
.pt-anw-person.ist-weg { border-style: dashed; opacity: .75; }
.pt-anw-person.ist-weg.ist-da { opacity: 1; }

/* Herkunftskennzeichen bei gemischter Ansicht */
.pt-herkunft {
  font-size: calc(12px * var(--skala)); text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); font-weight: bold; border: 1px solid var(--line);
  border-radius: 10px; padding: 1px 9px;
}
.pt-regler a {
  padding: 9px 14px; background: var(--panel); color: var(--ink);
  font: bold 14px Arial, Helvetica, sans-serif; border-right: 1px solid var(--line);
}
.pt-regler a:last-child { border-right: 0; }
.pt-regler a:hover { text-decoration: none; background: var(--zeile-hover); }
.pt-regler a.ist-aktiv { background: var(--cc-rot); color: #fff; }

.pt-anw-save { font-size: calc(13px * var(--skala)); color: var(--muted); min-width: 120px; }
.pt-anw-save.ist-ok { color: var(--gruen); }
.pt-anw-save.ist-fehler { color: var(--cc-rot); font-weight: bold; }

/* Teilnehmerbox einklappbar */
details.pt-anwesenheit > summary {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 15px 22px; cursor: pointer; list-style: none;
}
details.pt-anwesenheit > summary::-webkit-details-marker { display: none; }
details.pt-anwesenheit > summary::after {
  content: "▾"; color: var(--muted); margin-left: auto;
  font-size: calc(16px * var(--skala));
}
details.pt-anwesenheit[open] > summary::after { content: "▴"; }
details.pt-anwesenheit > summary:hover .pt-anw-titel { color: var(--cc-rot); }
.pt-anw-titel {
  font-size: calc(19px * var(--skala)); font-weight: bold; color: var(--ink);
}
.pt-anw-koerper { border-top: 1px solid var(--line-zart); }
.pt-anw-koerper .pt-anw-kopf { padding: 12px 22px 4px; justify-content: flex-start; }

/* Begrüßung und Teilnehmer auf der Startseite etwas kompakter */
body:not(.praesentation) .pt-willkommen,
body:not(.praesentation) .pt-anwesenheit { max-width: none; margin-bottom: 14px; }
body:not(.praesentation) .pt-willkommen summary { font-size: 16px; padding: 13px 18px; }
body:not(.praesentation) .pt-willkommen-text { padding: 0 18px 16px; }
body:not(.praesentation) .pt-willkommen-text p,
body:not(.praesentation) .pt-willkommen-text li { font-size: 14px; }
body:not(.praesentation) .pt-anw-titel { font-size: 15px; }
body:not(.praesentation) details.pt-anwesenheit > summary { padding: 12px 18px; }
body:not(.praesentation) .pt-anw-stand,
body:not(.praesentation) .pt-anw-abw { font-size: 13px; }
body:not(.praesentation) .pt-anw-person { font-size: 13px; padding: 6px 12px 6px 9px; }
body:not(.praesentation) .pt-anw-person input { width: 15px; height: 15px; }
body:not(.praesentation) .pt-anw-gruppe h3 { font-size: 11px; }
body:not(.praesentation) .pt-anw-notiz { font-size: 11px; }
body:not(.praesentation) .pt-knopf { padding: 6px 12px; font-size: 12px; }
body:not(.praesentation) .pt-anw-save { font-size: 12px; }

/* ------------------------------------------ Spaltenbreiten ziehen */
table.ist-fest { table-layout: fixed; }
table.ist-fest td, table.ist-fest th { overflow: hidden; text-overflow: ellipsis; }
table.ist-fest td.haft { white-space: nowrap; }
.spaltengriff {
  position: absolute; top: 0; right: 0; width: 9px; height: 100%;
  cursor: col-resize; user-select: none; touch-action: none;
}
.spaltengriff::after {
  content: ""; position: absolute; top: 20%; bottom: 20%; right: 4px;
  width: 1px; background: var(--line);
}
.spaltengriff:hover::after, .spaltengriff.ist-aktiv::after {
  background: var(--cc-rot); width: 2px; top: 0; bottom: 0;
}
body.zieht-spalte { cursor: col-resize; user-select: none; }
th[draggable="true"] { cursor: grab; }
th[draggable="true"] a { cursor: pointer; }
th.zieht { opacity: .4; }
th.ziel-l { box-shadow: inset 3px 0 0 var(--cc-rot); }
th.ziel-r { box-shadow: inset -3px 0 0 var(--cc-rot); }
.breiten-reset { font-size: 12px; color: var(--muted); margin-left: auto; }

/* Leitung: eingeladen, aber nicht fest eingeplant */
.pt-anw-gruppe.ist-leitung h3 span {
  text-transform: none; letter-spacing: 0; font-weight: normal;
  color: var(--muted); font-style: italic;
}
.pt-anw-person.ist-gelegentlich { border-style: dotted; }
.pt-anw-person.ist-gelegentlich.ist-da { border-style: solid; }

/* ======================================================= Eskalation */
.pt-karte.ist-eskaliert { border-color: var(--cc-rot); border-width: 2px; }
.pt-karte.esk-leitung { border-left-color: var(--cc-rot) !important; }
.pt-karte.esk-kunde   { border-left-color: var(--warn) !important; }

.pt-eskalation {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 22px; background: var(--cc-rot); color: #fff;
}
.pt-eskalation.stufe-kunde  { background: var(--warn); }
.pt-eskalation.stufe-intern { background: var(--muted); }
.pt-esk-icon { font-size: calc(20px * var(--skala)); line-height: 1; }
.pt-esk-label {
  font-size: calc(14px * var(--skala)); font-weight: bold;
  text-transform: uppercase; letter-spacing: 1px;
}
.pt-esk-text { font-size: calc(16px * var(--skala)); font-weight: bold; }
.pt-esk-meta { font-size: calc(13px * var(--skala)); opacity: .9; margin-left: auto; }

.pt-karte.ist-fokus .pt-eskalation { padding: 18px 38px; }
.pt-karte.ist-fokus .pt-esk-label { font-size: calc(18px * var(--skala)); }
.pt-karte.ist-fokus .pt-esk-text { font-size: calc(24px * var(--skala)); }
.pt-karte.ist-fokus .pt-esk-icon { font-size: calc(30px * var(--skala)); }
.pt-karte.ist-fokus .pt-esk-meta { font-size: calc(16px * var(--skala)); }

.pt-esk-zaehler {
  font-size: calc(15px * var(--skala)); font-weight: bold;
  color: #fff; background: var(--cc-rot);
  padding: 5px 13px; border-radius: 14px;
}

/* ============================================================ Wortmarke
   Eingebettetes SVG: das Wortzeichen bleibt CANCOM-Rot, die Schriftzeile
   erbt ueber currentColor die Textfarbe und funktioniert so in beiden Modi. */
.brand { display: inline-flex; align-items: center; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.marke { height: 50px; width: auto; display: block; }
.brand:hover .marke { opacity: .78; }

.pt-marke { display: inline-flex; align-items: center; margin-right: 6px; color: var(--ink); }
.pt-marke:hover { text-decoration: none; }
.pt-marke .marke { height: 38px; }
.pt-marke:hover .marke { opacity: .78; }

@media (max-width: 760px) {
  .marke { height: 34px; }
  .pt-marke .marke { height: 28px; }
}

/* Im Fokusmodus zaehlt nur das Vorhaben: Begruessung und Teilnehmer
   gehoeren auf die Uebersicht, nicht auf die Einzelansicht. */
body.ist-fokus .pt-willkommen,
body.ist-fokus .pt-anwesenheit { display: none; }
body.ist-fokus .pt-main { padding-top: 26px; }

/* ---------------------------------------------------- Ticketsuche */
.ticketsuche {
  background: var(--panel); border: 1px solid var(--line-zart);
  border-left: var(--kante) solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: var(--schatten); margin-bottom: 14px;
}
.ticketsuche:focus-within { border-left-color: var(--cc-rot); }
.ts-label {
  font-size: 12px; font-weight: bold; color: var(--muted);
  text-transform: uppercase; letter-spacing: .9px; white-space: nowrap;
}
.ticketsuche .wz-suche { font-variant-numeric: tabular-nums; }
.ts-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ts-wege .card { align-items: flex-start; padding: 18px 20px; }
.ts-wege .card .lbl { font-size: 15px; line-height: 1.4; }
.ts-wege .card small { color: var(--muted); font-weight: normal; font-size: 12px; }

/* ------------------------------------------ Wissen und Servicekatalog */
.wissen-einleitung {
  color: var(--muted); font-size: 14px; margin: 0 0 18px; max-width: 78ch;
}
.wissen-einleitung p { margin: 0 0 8px; }

.wissen-liste { display: flex; flex-direction: column; gap: 10px; }
.wissen-karte {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--panel); border: 1px solid var(--line-zart);
  border-left: var(--kante) solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; color: var(--ink); box-shadow: var(--schatten);
}
.wissen-karte:hover { border-left-color: var(--cc-rot); background: var(--zeile-hover); text-decoration: none; }
.wk-ico { font-size: 20px; line-height: 1.2; }
.wk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wk-titel { font-weight: bold; font-size: 15.5px; }
.wissen-karte:hover .wk-titel { color: var(--cc-rot); }
.wk-vorschau { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Gespiegelter Seitentext */
.wissen-text {
  background: var(--panel); border: 1px solid var(--line-zart);
  border-left: var(--kante) solid var(--line); border-radius: var(--radius);
  padding: 30px 38px; box-shadow: var(--schatten);
  font-size: 15px; line-height: 1.65;
}
/* Fliesstext bleibt lesbar begrenzt, Code und Tabellen nutzen die volle Breite */
.wissen-text > p,
.wissen-text > ul,
.wissen-text > ol,
.wissen-text > blockquote,
.wissen-text > .w-hinweis,
.wissen-text > .w-haken { max-width: 104ch; }
.wissen-text h2 {
  font-size: 18px; text-transform: none; letter-spacing: 0;
  margin: 26px 0 10px; padding-bottom: 7px;
  border-bottom: 2px solid var(--cc-rot); color: var(--ink);
}
.wissen-text h3 { font-size: 16px; margin: 22px 0 8px; color: var(--ink); }
.wissen-text h4 { font-size: 14.5px; margin: 18px 0 6px; color: var(--muted); }
.wissen-text > :first-child { margin-top: 0; }
.wissen-text p { margin: 0 0 12px; }
.wissen-text ul, .wissen-text ol { margin: 0 0 14px; padding-left: 26px; }
.wissen-text li { margin-bottom: 6px; }
.wissen-text code {
  background: var(--kopf-bg); border: 1px solid var(--line-zart);
  border-radius: 3px; padding: 1px 6px; font-size: 13.5px;
  font-family: Consolas, "DejaVu Sans Mono", monospace;
}
.wissen-text pre {
  max-width: none;
  background: var(--kopf-bg); border: 1px solid var(--line-zart);
  border-left: 3px solid var(--muted); border-radius: var(--radius);
  padding: 14px 16px; overflow-x: auto; margin: 0 0 14px;
}
.wissen-text pre code { background: none; border: 0; padding: 0; font-size: 13px; }
.wissen-text blockquote {
  margin: 0 0 14px; padding: 4px 0 4px 16px;
  border-left: 3px solid var(--line); color: var(--muted);
}
.wissen-text hr { border: 0; border-top: 1px solid var(--line-zart); margin: 22px 0; }
.wissen-text .w-hinweis {
  display: flex; gap: 12px; background: var(--cc-rot-hauch);
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 14px;
}
.wissen-text .w-hinweis > span { font-size: 18px; line-height: 1.3; }
.wissen-text .w-hinweis p:last-child { margin-bottom: 0; }
.wissen-text .w-haken { font-variant-numeric: tabular-nums; }
.wissen-text .w-tabelle { overflow-x: auto; margin: 0 0 16px; }
.wissen-text table { font-size: 13.5px; border: 1px solid var(--line-zart); }
.wissen-text th { text-transform: none; letter-spacing: 0; }
.wissen-text details {
  border: 1px solid var(--line-zart); border-radius: var(--radius);
  padding: 10px 14px; margin: 0 0 14px;
}
.wissen-text summary { cursor: pointer; font-weight: bold; }
.wissen-text .w-bild { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------- Einmalcode (TOTP) */
.who-warn {
  color: var(--cc-rot) !important; font-weight: bold;
  border: 1px solid var(--cc-rot); border-radius: 12px; padding: 3px 11px;
}
.who-warn:hover { background: var(--cc-rot); color: #fff !important; text-decoration: none; }

.code-feld {
  font-family: Consolas, "DejaVu Sans Mono", monospace;
  font-size: 26px !important; letter-spacing: 9px; text-align: center;
  padding: 13px 10px !important;
}
.meldung-ok {
  background: var(--gruen-bg); color: var(--gruen); font-weight: bold;
  border-left: var(--kante) solid var(--gruen); border-radius: var(--radius);
  padding: 13px 18px; margin: 0 0 18px; font-size: 14px;
}

.totp-raster { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: start; }
.totp-qr {
  background: #fff; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius); line-height: 0;
}
.totp-qr svg { width: 210px; height: 210px; display: block; }
.totp-text { min-width: 0; }
.totp-text p { margin: 0 0 12px; max-width: 70ch; }
.totp-schluessel code {
  display: inline-block; background: var(--kopf-bg); border: 1px solid var(--line-zart);
  border-radius: var(--radius); padding: 9px 14px;
  font-family: Consolas, "DejaVu Sans Mono", monospace;
  font-size: 15px; letter-spacing: 1.5px; user-select: all;
}

.klein-form { margin-top: 14px; max-width: 340px; }
.klein-form label {
  display: block; font-size: 12px; color: var(--muted); font-weight: bold;
  text-transform: uppercase; letter-spacing: .9px; margin: 0 0 6px;
}
.klein-form input {
  width: 100%; padding: 10px 12px; font: 15px Arial, Helvetica, sans-serif;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); margin-bottom: 12px;
}
.klein-form input:focus { outline: 2px solid var(--cc-rot); outline-offset: -1px; }
.klein-form button {
  padding: 11px 20px; border: 0; border-radius: var(--radius);
  background: var(--cc-rot); color: #fff; cursor: pointer;
  font: bold 13px Arial, Helvetica, sans-serif;
  text-transform: uppercase; letter-spacing: .9px;
}
.klein-form button:hover { background: var(--cc-rot-dunkel); }
.klein-form .knopf-warn { background: var(--muted); }
.klein-form .knopf-warn:hover { background: var(--warn); }

.wh-codes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 9px; margin: 14px 0 6px;
}
.wh-codes code {
  background: var(--kopf-bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 14px; text-align: center;
  font-family: Consolas, "DejaVu Sans Mono", monospace;
  font-size: 15.5px; letter-spacing: 1.5px; user-select: all; color: var(--ink);
}

@media (max-width: 760px) {
  .totp-raster { grid-template-columns: 1fr; gap: 20px; }
  .totp-qr svg { width: 180px; height: 180px; }
}

/* ------------------------------------------------ Bearbeiten */
.knoepfe { margin: 12px 0 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.knopf,
.bearbeiten button {
  display: inline-block; padding: 8px 16px; border-radius: 6px; border: 0;
  background: var(--cc-rot); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.knopf:hover,
.bearbeiten button:hover { background: var(--cc-rot-dunkel); }
.knopf-leise {
  display: inline-block; padding: 8px 16px; border-radius: 6px;
  border: 1px solid var(--line); color: var(--muted); text-decoration: none;
}
.knopf-leise:hover { border-color: var(--cc-rot); color: var(--cc-rot); }

.bearbeiten { max-width: 760px; }
.bearbeiten .feld { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; margin: 0 0 14px; }
.bearbeiten .feld label { color: var(--muted); font-weight: 600; padding-top: 8px; }
.bearbeiten input[type="text"],
.bearbeiten input[type="date"],
.bearbeiten input[type="email"],
.bearbeiten input[type="tel"],
.bearbeiten input[type="url"],
.bearbeiten textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); font: inherit;
}
.bearbeiten input:focus, .bearbeiten textarea:focus { outline: 2px solid var(--cc-rot-hauch); border-color: var(--cc-rot); }
.bearbeiten input[type="checkbox"] { width: 18px; height: 18px; margin-top: 10px; }
.bearbeiten textarea { resize: vertical; min-height: 96px; }

.fehler {
  padding: 10px 14px; border-radius: 6px; border-left: 4px solid var(--cc-rot);
  background: var(--cc-rot-hauch); color: var(--ink); max-width: 760px;
}

@media (max-width: 760px) {
  .bearbeiten .feld { grid-template-columns: 1fr; gap: 6px; }
  .bearbeiten .feld label { padding-top: 0; }
}

/* Firewall-Demo-Formular (fw_schritt1_formular in lib/firewall.php): kein
   eigenes CSS bisher, dadurch reine Browser-Vorgaben mit viel Leerraum
   zwischen jedem Feld. Kompakt wie die generische Bearbeiten-Seite,
   angelegt am 24.09.2026. */
.fw-form .fw-schritt { margin: 0 0 22px; }
.fw-form .fw-schritt h3 { margin: 0 0 10px; font-size: 14px; }
.fw-form .feld {
  display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: center;
  margin: 0 0 8px;
}
.fw-form .feld label { color: var(--muted); font-weight: 600; font-size: 13px; }
.fw-form .feld.ankreuz { grid-template-columns: 1fr; }
.fw-form .feld.ankreuz label { font-weight: normal; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.fw-form input[type="text"],
.fw-form input[type="email"],
.fw-form input[type="date"],
.fw-form input:not([type]),
.fw-form select,
.fw-form textarea {
  width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); font: inherit; box-sizing: border-box;
}
.fw-form textarea { resize: vertical; min-height: 48px; }
.fw-form .feld-text { padding: 4px 0; color: var(--ink); }
.fw-form fieldset {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; margin: 0 0 12px;
}
.fw-form legend { padding: 0 6px; font-weight: 700; font-size: 13px; color: var(--muted); }
.fw-form .fw-raster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
}
.fw-form .fw-raster .fw-breit { grid-column: 1 / -1; }
.fw-regel { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 10px; padding: 0; }
.fw-regel summary { padding: 8px 12px; cursor: pointer; font-weight: 600; font-size: 13px; }
.fw-regel .fw-raster { padding: 4px 14px 12px; }

@media (max-width: 760px) {
  .fw-form .feld { grid-template-columns: 1fr; gap: 4px; }
  .fw-form .fw-raster { grid-template-columns: 1fr; }
}

/* Regeln-Baukasten: Formular fuer die naechste neue Regel, darunter die
   Liste im normalen MSB-Tabellenstil - Suchfeld wie ueberall (.werkzeuge/
   .wz-suche), Spaltenkoepfe zum Sortieren anklickbar, Zeilen einzeilig mit
   Ellipse abgeschnitten statt umzubrechen. Ersetzt am 24.09.2026 die Karte
   "Regel 1 immer offen" und die vorherige, zu breite Tabellenoptik mit
   Textumbruch (die Begruendung wurde bei schmaler Spalte viele Zeilen hoch
   und riss die ganze Zeile mit). Sortiert/gefiltert wird rein im Browser
   ueber fwBaukastenInit in fenster.js, die zugrunde liegende Reihenfolge
   fuer die r{pos}_*-Felder bleibt davon unberuehrt. */
/* Der eigentliche Grund fuer die Breitenexplosion (24.09.2026, nach
   genauerer Pruefung als die Spaltenbreiten selbst): solange die Tabelle
   eine "auto"-Breite hat (das erzwingt die allgemeine Regel
   "table[data-tabelle].ist-fest { width: auto; }" weiter unten, spezifischer
   als das schlichte "table { width: 100% }"), darf table-layout:fixed
   trotz fester Spaltenbreiten keine Spalte unter ihre Inhaltsbreite
   schrumpfen - das ist ein bekanntes CSS-Verhalten bei "width:auto" auf
   Tabellen. Erst eine echte, definierte Tabellenbreite macht die festen
   Spaltenbreiten und damit auch die Ellipse in den Zellen wirksam. Das
   !important ist hier bewusst: es hebt genau diese eine, oben erklaerte
   Cascade-Falle auf, nichts sonst. */
.fw-regeln-tabelle { table-layout: fixed; width: 100% !important; }
.fw-regeln-tabelle th, .fw-regeln-tabelle td {
  vertical-align: top; padding: 8px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Ursache der Breitenexplosion (24.09.2026): die allgemeine Regel
   "table[data-tabelle].ist-fest { width: auto; }" (fuer die echten
   Datenbank-Tabellen gedacht, dort mit vollstaendig durchnummerierten
   Spaltenbreiten aus einem eigenen <style>-Block) hatte hoehere
   Spezifitaet als das schlichte "table { width: 100% }" und traf auch auf
   diese Tabelle zu, weil sie ebenfalls data-tabelle+.ist-fest traegt.
   Solange eine Spalte (Begruendung) keine feste Breite hatte, fiel die
   ganze Tabelle bei width:auto auf reine Inhaltsgroesse zurueck - die
   Spalte wurde so breit wie der laengste Text, alle anderen Spalten
   ebenso, und es entstand die riesige, immer scrollende Tabelle. Jetzt
   bekommt auch Begruendung eine feste Breite, damit die Summe aller
   Spalten die tatsaechliche Tabellenbreite ergibt. */
.fw-regeln-tabelle th:nth-child(1), .fw-regeln-tabelle td:nth-child(1) { width: 3.5rem; }
.fw-regeln-tabelle th:nth-child(2), .fw-regeln-tabelle td:nth-child(2) { width: 4rem; }
.fw-regeln-tabelle th:nth-child(3), .fw-regeln-tabelle td:nth-child(3) { width: 4rem; }
.fw-regeln-tabelle th:nth-child(4), .fw-regeln-tabelle td:nth-child(4) { width: 8.5rem; }
.fw-regeln-tabelle th:nth-child(5), .fw-regeln-tabelle td:nth-child(5) { width: 8.5rem; }
.fw-regeln-tabelle th:nth-child(6), .fw-regeln-tabelle td:nth-child(6) { width: 5.5rem; }
.fw-regeln-tabelle th:nth-child(7), .fw-regeln-tabelle td:nth-child(7) { width: 4rem; }
.fw-regeln-tabelle th:nth-child(8), .fw-regeln-tabelle td:nth-child(8) { width: 12rem; }
.fw-regeln-tabelle th:nth-child(9), .fw-regeln-tabelle td:nth-child(9) { width: 2.4rem; }
.fw-regeln-tabelle th button {
  background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 700;
  color: var(--ink); cursor: pointer; text-align: left; width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.fw-regeln-tabelle th button:hover { color: var(--accent-ink); text-decoration: underline; }

.knopf-sekundaer {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.knopf-sekundaer:hover { border-color: var(--accent); color: var(--accent-ink); }


/* ============================================ Ruhiger Grund, ruhige Links
   22.09.2026. Der Seitengrund ist weiss statt grau, die Arbeitsflaeche
   darauf braucht deshalb keinen Rahmen und keinen Schatten mehr, sonst
   steht ein Kasten auf weissem Grund und sieht wie ein Rahmen aus.
   Die Leiste links behaelt ihr helles Grau, sie ist Navigation.

   Verweise sind nicht mehr unterstrichen und nicht eingefaerbt. Sie
   tragen die Textfarbe und zeigen sich erst beim Darueberfahren in Rot.
   Nur im Fliesstext (Wissen, Rechtstexte) bleibt eine zarte graue
   Unterstreichung, weil ein Verweis mitten im Satz sonst unsichtbar ist. */

:root { --grund: var(--bg); }
:root[data-theme="dark"] { --grund: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --grund: var(--bg); }
}

.inhalt { background: var(--bg); }
.inhalt > main.wrap {
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-ink); text-decoration: none; }

.inhalt a,
.doc a { color: inherit; text-decoration: none; }
.inhalt a:hover,
.doc a:hover { color: var(--accent-ink); }

.crumbs a:hover,
table.liste td.text .titel a:hover { text-decoration: none; }

/* Fliesstext: Verweis bleibt erkennbar, aber leise */
.wissen-text a,
.doc p a, .doc li a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wissen-text a:hover,
.doc p a:hover, .doc li a:hover {
  color: var(--accent-ink);
  text-decoration-color: currentColor;
}

/* Knoepfe, die als Verweis gebaut sind, behalten ihre Farben */
.inhalt a.knopf, .inhalt a.btn-primary, .doc a.btn-primary { color: var(--accent-on); }
.inhalt a.knopf-leise { color: var(--ink-soft); }
.inhalt a.knopf-leise:hover { color: var(--accent-ink); }

/* Tastatur: ohne Unterstreichung braucht der Fokus ein eigenes Zeichen */
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* In der roten Kopfleiste waere dunkelrot auf rot unsichtbar */
header a:hover, header .brand:hover { color: var(--chrome-auf); }

/* Grundschrift auch fuer Seiten, die shell.css nicht laden (Meeting,
   Anmeldung). Ohne diese Zeile nimmt der Browser dort Times. */
body {
  font-family: "Segoe UI", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont,
               Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.praesentation, body.anmeldung { margin: 0; color: var(--ink); }
body.praesentation button, body.praesentation input, body.praesentation select,
.pt-knopf, .pt-regler button, .pt-regler a, .loginbox input, .loginbox button {
  font-family: inherit;
}

/* Merkmale fuer Seiten ohne shell.css (Meeting, Anmeldung). style.css
   verweist auf diese Werte; fehlen sie, werden Karten, Kopfleiste und
   Fokusleiste durchsichtig und der Inhalt laeuft unter dem Kopf durch.
   Werte 1:1 aus shell.css. */
body.praesentation, body.anmeldung {
  --bg:#ffffff; --bg-soft:#f5f5f5; --grau-hover:#e9e9e9; --grau-aktiv:#dedede;
  --ink:#1a1a1a; --ink-soft:#575757; --line:#e1e1e1;
  --accent:#D9002E; --accent-ink:#8F0020; --accent-on:#ffffff; --accent-soft:#fdeaee;
  --radius:4px; --radius-klein:2px;
  --schatten:0 1px 2px rgba(19,29,29,.05),0 5px 16px rgba(19,29,29,.05);
  --panel:var(--bg); --muted:var(--ink-soft); --line-zart:var(--line);
  --kopf-bg:var(--bg-soft); --zeile-hover:var(--grau-hover);
  --cc-rot-dunkel:var(--accent-ink); --cc-rot-hauch:var(--accent-soft);
  background:var(--bg); color:var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.praesentation,
  :root:not([data-theme="light"]) body.anmeldung {
    --bg:#161616; --bg-soft:#1f1f1f; --grau-hover:#2a2a2a; --grau-aktiv:#343434;
    --ink:#ededed; --ink-soft:#a8a8a8; --line:#2f2f2f;
    --accent:#E11A42; --accent-ink:#ff7d97; --accent-on:#ffffff; --accent-soft:#3a0a14;
    --schatten:0 1px 2px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] body.praesentation,
:root[data-theme="dark"] body.anmeldung {
  --bg:#161616; --bg-soft:#1f1f1f; --grau-hover:#2a2a2a; --grau-aktiv:#343434;
  --ink:#ededed; --ink-soft:#a8a8a8; --line:#2f2f2f;
  --accent:#E11A42; --accent-ink:#ff7d97; --accent-on:#ffffff; --accent-soft:#3a0a14;
  --schatten:0 1px 2px rgba(0,0,0,.45);
}

/* Brotkrumen stehen vor <main> und bekommen deshalb denselben seitlichen
   Abstand wie der Inhalt, sonst kleben sie an der Leiste. */
.inhalt > .crumbs { padding: 0 28px; }
@media (max-width: 900px) { .inhalt > .crumbs { padding: 0 16px; } }

/* Kleine Marken (Badges). Die Regel weiter oben mit
   ":root:not([data-theme=light])" stand ausserhalb der Medienabfrage und
   hat dadurch die dunklen Grundfarben auch im hellen Modus gesetzt:
   dunkelgruen mit grauer Schrift. Hier die hellen Werte zurueck, die
   dunklen nur, wenn wirklich dunkel. */
:root { --warn-bg:#FFF3E0; --gruen-bg:#E8F5EC; --ok-bg:#EEF4EE; }
:root[data-theme="dark"] { --warn-bg:#3a2a10; --gruen-bg:#123021; --ok-bg:#14241a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --warn-bg:#3a2a10; --gruen-bg:#123021; --ok-bg:#14241a; }
}

/* Alles, was weder hoch noch mittel ist (Status, Branche, Services ...),
   ist eine neutrale Marke: hellgrau, dunkle Schrift, gut lesbar. */
.badge, .badge.b-niedrig {
  background: var(--bg-soft); color: var(--ink);
  border: 1px solid var(--line); line-height: 1.6;
}
.badge.b-mittel { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.b-hoch { background: var(--accent); color: var(--accent-on); border-color: transparent; }

/* Verweise in Detailansicht und Fliesstext: Kaestchen mit Pfeil statt
   Blau und Unterstrich. Das Zeichen ist eine Maske und nimmt deshalb die
   Textfarbe an, beim Darueberfahren also auch das Rot. */
.detail dd a,
.wissen-text a,
.inhalt a[href^="http"]:not(.knopf):not(.knopf-leise):not(.card):not(.kpi):not(.btn) {
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 600;
}
.detail dd a::after,
.wissen-text a::after,
.inhalt a[href^="http"]:not(.knopf):not(.knopf-leise):not(.card):not(.kpi):not(.btn)::after {
  content: "";
  display: inline-block;
  width: .78em; height: .78em;
  margin-left: .28em;
  vertical-align: -.02em;
  background: currentColor;
  opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h4.5V7'/%3E%3Cpath d='M13.5 2.5 7 9'/%3E%3Cpath d='M11.5 9.5v3a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h4.5V7'/%3E%3Cpath d='M13.5 2.5 7 9'/%3E%3Cpath d='M11.5 9.5v3a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.detail dd a:hover,
.wissen-text a:hover,
.inhalt a[href^="http"]:not(.knopf):not(.knopf-leise):not(.card):not(.kpi):not(.btn):hover {
  color: var(--accent-ink) !important;
}
.detail dd a:hover::after,
.wissen-text a:hover::after,
.inhalt a[href^="http"]:not(.knopf):not(.knopf-leise):not(.card):not(.kpi):not(.btn):hover::after {
  opacity: 1;
}

/* ==================================================== Spaltenbreiten
   Standardbreiten nach Feldart. Vorher stand jede Zelle auf nowrap, und
   ein langer Text hat seine Spalte auf Bildschirmbreite gezogen. Jetzt
   bekommt jede Art ein festes Mass, Text bricht um und wird nach zwei
   Zeilen abgeschnitten (voller Text im Tooltip). Wer eine Spalte selbst
   zieht, ueberschreibt das wie bisher (Tabelle bekommt dann .ist-fest). */
table[data-tabelle] th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
table[data-tabelle] td { vertical-align: top; }

table[data-tabelle]:not(.ist-fest) th.haft { width: 17rem; min-width: 13rem; }
table[data-tabelle] td.haft { white-space: normal; }

table[data-tabelle]:not(.ist-fest) th[data-typ="select"],
table[data-tabelle]:not(.ist-fest) th[data-typ="status"] { width: 9.5rem; }
table[data-tabelle]:not(.ist-fest) th[data-typ="multi_select"] { width: 13rem; }
table[data-tabelle] td[data-typ="multi_select"] { white-space: normal; }
table[data-tabelle] td[data-typ="multi_select"] .badge { margin: 1px 4px 1px 0; }
table[data-tabelle] td[data-typ="multi_select"] .badge + .badge { margin-left: 0; }

table[data-tabelle]:not(.ist-fest) th[data-typ="date"],
table[data-tabelle]:not(.ist-fest) th[data-typ="created_time"],
table[data-tabelle]:not(.ist-fest) th[data-typ="last_edited_time"] { width: 7.5rem; }

table[data-tabelle]:not(.ist-fest) th[data-typ="number"] { width: 6rem; }
table[data-tabelle] td[data-typ="number"] { text-align: right; font-variant-numeric: tabular-nums; }

table[data-tabelle]:not(.ist-fest) th[data-typ="checkbox"] { width: 4.5rem; }
table[data-tabelle] td[data-typ="checkbox"] { text-align: center; }

table[data-tabelle]:not(.ist-fest) th[data-typ="url"] { width: 5rem; }

/* Checkbox- und Menue-Spalte der generischen Liste, MS-Entra-Stil,
   angelegt am 24.09.2026. Die Checkbox ist vorerst nur Optik, noch ohne
   Sammelaktion; das Menue bietet Oeffnen/Bearbeiten. */
table[data-tabelle]:not(.ist-fest) th.chk,
table[data-tabelle]:not(.ist-fest) th.menu { width: 2.4rem; }
table[data-tabelle] td.chk, table[data-tabelle] td.menu { text-align: center; }
table[data-tabelle] td.chk input[type="checkbox"] { margin: 0; }
.menu-kebab {
  background: none; border: 1px solid transparent; border-radius: 6px;
  width: 26px; height: 26px; line-height: 1; font-size: 16px; color: var(--ink-soft);
  cursor: pointer; padding: 0;
}
.menu-kebab:hover, .menu-kebab[aria-expanded="true"] { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }
/* Rechtsbuendig UND links von der eigenen Spalte (statt darueber), Korrektur
   vom 24.09.2026: das Menue lag vorher teilweise ueber der Menue-Spalte
   selbst, dadurch guckten die "..." der darunterliegenden Zeile links neben
   dem Menue noch hervor. */
.menu-popup {
  position: absolute; right: 100%; margin-right: 6px; top: -2px; z-index: 20; min-width: 150px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.16); padding: 4px; text-align: left;
}
.menu-popup a, .menu-popup button {
  display: block; width: 100%; padding: 7px 10px; border-radius: 6px; font-size: 13px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  background: none; border: none; text-align: left; font: inherit; cursor: pointer;
}
.menu-popup a:hover, .menu-popup button:hover { background: var(--bg-soft); color: var(--accent-ink); }

/* Firewall-Demo: "+ Regel hinzufuegen" im Regeln-Baukasten, deaktiviert
   sobald FW_REGELN_MAX erreicht ist. Angelegt am 24.09.2026. */
.knopf-sekundaer:disabled, .fw-regel-plus:disabled {
  opacity: .5; cursor: not-allowed; border-color: var(--line); color: var(--ink-soft);
}


table[data-tabelle]:not(.ist-fest) th[data-typ="rich_text"],
table[data-tabelle]:not(.ist-fest) th[data-typ="relation"],
table[data-tabelle]:not(.ist-fest) th[data-typ="formula"],
table[data-tabelle]:not(.ist-fest) th[data-typ="people"],
table[data-tabelle]:not(.ist-fest) th[data-typ="email"],
table[data-tabelle]:not(.ist-fest) th[data-typ="phone_number"],
table[data-tabelle]:not(.ist-fest) th[data-typ="rollup"] { width: 16rem; }

table[data-tabelle] td[data-typ="rich_text"],
table[data-tabelle] td[data-typ="relation"],
table[data-tabelle] td[data-typ="formula"],
table[data-tabelle] td[data-typ="people"],
table[data-tabelle] td[data-typ="rollup"] { white-space: normal; }

table[data-tabelle] td .zelle {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; line-height: 1.45;
}

/* Die Tabelle nimmt nur so viel Breite, wie ihre Spalten brauchen. Mit
   width:100% hat der Browser den Rest des Bildschirms auf alle Spalten
   verteilt, und Kuerzel oder Status standen in 400px breiten Spalten. */
table[data-tabelle] { width: auto; min-width: 0; }
table[data-tabelle] th[data-kurz], table[data-tabelle] td[data-kurz] {
  width: 1%; white-space: nowrap;
}
table[data-tabelle]:not(.ist-fest) th[data-kurz] { width: 1%; }
table[data-tabelle] td[data-kurz] .zelle { display: inline; -webkit-line-clamp: unset; }
table[data-tabelle]:not(.ist-fest) th[data-typ="select"],
table[data-tabelle]:not(.ist-fest) th[data-typ="status"] { width: auto; min-width: 6rem; }
table[data-tabelle] td[data-typ="select"], table[data-tabelle] td[data-typ="status"] { white-space: nowrap; }

/* ================================================ Kein Kasten im Kasten
   22.09.2026. Die Tabelle hatte einen eigenen Rollbalken (max-height plus
   overflow), dadurch rollte innen der Inhalt und aussen nochmal die Seite.
   Jetzt waechst die Tabelle in ihrer vollen Hoehe und die Seite wird
   laenger, so wie in den Admin Centern. Seitlich bleibt ein Rollbalken,
   falls mehr Spalten gewaehlt sind, als auf den Schirm passen.

   Die Kopfzeile kann dadurch nicht mehr kleben: sie klebte am Kasten, und
   den gibt es nicht mehr. */
.tablewrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  border-left-width: 1px;
  border-radius: var(--radius);
}
.tablewrap table th { position: static; }

/* =========================================== Eckiger, wie bei mandio
   22.09.2026. Marken und Knoepfe waren Pillen (12px und mehr), die
   Eingabefelder daneben aber 2px. Ab hier gilt ueberall das kleine Mass
   aus mandio: 2px an allem, was man anklickt oder was Text auszeichnet. */
.badge,
.knopf, .knopf-leise, .bearbeiten button,
.werkzeuge button, .sw-fuss button, .klein-form button,
.loginbox button, .pt-knopf, .pt-regler, .pt-person, .pt-herkunft,
.pager a, .pager span, .who-warn, .leiste-zahl, .pt-esk-zaehler {
  border-radius: var(--radius-klein, 2px);
}
.pt-anw-person, .pt-fokusleiste { border-radius: var(--radius, 4px); }
.pt-regler { overflow: hidden; }

/* Marke wie in mandio: kleiner, gesperrt, mit eigenem Rand statt Fuellung */
.badge {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; line-height: 1.5;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-soft);
}
.badge.b-hoch { color: var(--accent-on); background: var(--accent); border-color: var(--accent); }
.badge.b-mittel { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }

/* ========================================= Spaltenbreiten, jetzt fest
   22.09.2026, zweiter Anlauf. Mit width:auto rechnet der Browser die
   Breiten weiter selbst aus und verteilt den Rest auf die Textspalten,
   deshalb standen Kuerzel und Status immer noch in breiten Spalten.
   Mit table-layout:fixed gilt genau das, was hier steht, und die Tabelle
   ist so breit wie die Summe ihrer Spalten. Nicht mehr und nicht weniger. */
table[data-tabelle]:not(.ist-fest) { table-layout: fixed; width: auto; }
table[data-tabelle]:not(.ist-fest) th { width: 14rem; }
table[data-tabelle]:not(.ist-fest) th.haft { width: 20rem; min-width: 0; }
table[data-tabelle]:not(.ist-fest) th[data-kurz] { width: 7rem; }
table[data-tabelle]:not(.ist-fest) th[data-typ="select"],
table[data-tabelle]:not(.ist-fest) th[data-typ="status"] { width: 9rem; }
table[data-tabelle]:not(.ist-fest) th[data-typ="multi_select"] { width: 14rem; }
table[data-tabelle]:not(.ist-fest) th[data-typ="date"],
table[data-tabelle]:not(.ist-fest) th[data-typ="created_time"],
table[data-tabelle]:not(.ist-fest) th[data-typ="last_edited_time"] { width: 7.5rem; }
table[data-tabelle]:not(.ist-fest) th[data-typ="number"] { width: 7rem; }
table[data-tabelle]:not(.ist-fest) th[data-typ="checkbox"] { width: 5rem; }
table[data-tabelle]:not(.ist-fest) th[data-typ="url"] { width: 6rem; }
table[data-tabelle]:not(.ist-fest) th[data-typ="rich_text"],
table[data-tabelle]:not(.ist-fest) th[data-typ="relation"],
table[data-tabelle]:not(.ist-fest) th[data-typ="formula"],
table[data-tabelle]:not(.ist-fest) th[data-typ="people"],
table[data-tabelle]:not(.ist-fest) th[data-typ="email"],
table[data-tabelle]:not(.ist-fest) th[data-typ="rollup"] { width: 16rem; }

/* Was nicht passt, wird umgebrochen oder abgeschnitten, nie gedehnt. */
table[data-tabelle] td { overflow: hidden; text-overflow: ellipsis; }
table[data-tabelle] td[data-kurz] { white-space: nowrap; }

/* Der Griff zum Ziehen liegt absolut am rechten Rand seines Spaltenkopfes.
   Bezugspunkt war bisher das "position:sticky" der Kopfzeile. Seit die
   Kopfzeile nicht mehr klebt (kein Kasten mehr), fehlte der Bezugspunkt,
   und die Griffe lagen alle uebereinander am Tabellenrand statt an ihrer
   Spalte. Also ausdruecklich relativ stellen. */
table[data-tabelle] th { position: relative; }
table[data-tabelle] th .spaltengriff { z-index: 2; }

/* ---------------------------------------- Ziehen, ohne Ueberraschungen
   Drei Sachen kamen sich in die Quere:
   1. Mein "position:relative" von eben galt fuer jeden Spaltenkopf und hat
      damit auch der ersten Spalte ihr Kleben am linken Rand genommen.
   2. Beim Ziehen schaltet die Tabelle auf feste Breiten um, behielt aber
      die Breite der ganzen Tabelle. Der Rest ging dann an die letzte
      Spalte, und die liess sich deshalb nicht kleiner ziehen.
   3. Mindest- und Hoechstbreiten aus den Vorgaben galten weiter und haben
      gegen die gezogene Breite gearbeitet, was das Springen erklaert. */
table[data-tabelle] th:not(.haft):not(.chk):not(.menu) { position: relative; }
table[data-tabelle] th.chk { position: sticky; left: 0; z-index: 3; }
table[data-tabelle] td.chk { position: sticky; left: 0; }
table[data-tabelle] th.haft { position: sticky; left: 2.4rem; z-index: 3; }
table[data-tabelle] td.haft { position: sticky; left: 2.4rem; }
table[data-tabelle] th.menu { position: sticky; right: 0; z-index: 3; }
table[data-tabelle] td.menu { position: sticky; right: 0; }

table[data-tabelle].ist-fest { table-layout: fixed; width: auto; }
table[data-tabelle].ist-fest th.chk, table[data-tabelle].ist-fest td.chk,
table[data-tabelle].ist-fest th.menu, table[data-tabelle].ist-fest td.menu { width: 2.4rem; min-width: 2.4rem; max-width: 2.4rem; }
table[data-tabelle].ist-fest th,
table[data-tabelle].ist-fest td { min-width: 0; max-width: none; }
table[data-tabelle].ist-fest td { overflow: hidden; text-overflow: ellipsis; }
table[data-tabelle].ist-fest td .zelle { -webkit-line-clamp: 2; }

/* Status und Auswahl brauchen nur so viel Platz wie ihre Marke. Die
   Mindestbreite von 6rem stammte aus dem ersten Anlauf, als die Tabelle
   ihre Breiten noch selbst ausgerechnet hat. Mit festen Breiten ist sie
   nur noch eine Sperre und kommt weg. */
table[data-tabelle]:not(.ist-fest) th[data-typ="select"],
table[data-tabelle]:not(.ist-fest) th[data-typ="status"] { width: 6.5rem; min-width: 0; }
table[data-tabelle] th, table[data-tabelle] td { min-width: 0; }
table[data-tabelle] th { overflow: hidden; text-overflow: ellipsis; hyphens: auto; }

/* ======================================= Breite nach Inhalt, fuenf Stufen
   22.09.2026. Feste Breiten je Feldart waren zu grob: Regulierung und
   Kuerzel sind beide kurz, Kurzfassung ist lang, und alle drei sind
   Freitext oder Mehrfachauswahl. Die Seite misst jetzt den laengsten Wert
   je Spalte und setzt eine Stufe. Die Zahlen hier gelten, bis jemand eine
   Spalte selbst zieht (dann traegt die Tabelle .ist-fest). */
table[data-tabelle]:not(.ist-fest) th[data-breite="xs"] { width: 5rem; }
table[data-tabelle]:not(.ist-fest) th[data-breite="s"]  { width: 7.5rem; }
table[data-tabelle]:not(.ist-fest) th[data-breite="m"]  { width: 11rem; }
table[data-tabelle]:not(.ist-fest) th[data-breite="l"]  { width: 16rem; }
table[data-tabelle]:not(.ist-fest) th[data-breite="xl"] { width: 22rem; }

/* Kurze Spalten stehen in einer Zeile, lange brechen um. */
table[data-tabelle] td[data-breite="xs"],
table[data-tabelle] td[data-breite="s"] { white-space: nowrap; }
table[data-tabelle] td[data-breite="m"],
table[data-tabelle] td[data-breite="l"],
table[data-tabelle] td[data-breite="xl"] { white-space: normal; }
table[data-tabelle] td[data-breite="xs"] .zelle,
table[data-tabelle] td[data-breite="s"] .zelle { display: inline; -webkit-line-clamp: unset; }

/* Zahlen rechts, Haekchen mittig, das bleibt unabhaengig von der Stufe. */
table[data-tabelle] td[data-typ="number"] { text-align: right; }
table[data-tabelle] td[data-typ="checkbox"] { text-align: center; }

/* ================================== Volle Breite und kein Umbruch mehr
   22.09.2026. Zwei Sachen wie in Notion:
   1. Rechts steht eine leere Fuellspalte. Die Tabelle reicht damit bis an
      den Rand, statt mitten auf der Seite aufzuhoeren. Sind mehr Spalten
      da, als hinpassen, schrumpft sie auf null und es wird gerollt.
   2. Nichts bricht mehr um. Was zu lang ist, wird mit … abgeschnitten,
      der ganze Text steht im Tooltip. Damit sind alle Zeilen gleich hoch
      und die Liste laesst sich ueberfliegen. */
table[data-tabelle] { width: 100%; }
table[data-tabelle] th.fuell, table[data-tabelle] td.fuell {
  width: auto; min-width: 0; padding: 0; border-bottom-color: var(--line-zart);
}
table[data-tabelle] th.fuell { border-bottom: 2px solid var(--accent); }
table[data-tabelle] th.fuell .spaltengriff { display: none; }

table[data-tabelle] th,
table[data-tabelle] td,
table[data-tabelle] td.haft {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table[data-tabelle] td .zelle {
  display: block; -webkit-line-clamp: unset; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
table[data-tabelle] td[data-typ="multi_select"] .badge { margin: 0 4px 0 0; }

/* Nachtrag: zwei aeltere Regeln waren staerker als die neuen und haben sie
   ueberstimmt (":not(.ist-fest)" und "[data-typ=...]" zaehlen mehr als ein
   blosses "table[data-tabelle]"). Deshalb blieb rechts die weisse Flaeche
   und die Marken brachen weiter um. Hier dieselbe Staerke, nur spaeter. */
table[data-tabelle]:not(.ist-fest) { width: 100%; }
table[data-tabelle] td[data-typ],
table[data-tabelle] td[data-breite],
table[data-tabelle] th[data-breite] { white-space: nowrap; }
table[data-tabelle] td[data-typ="multi_select"] { white-space: nowrap; }
table[data-tabelle] th.fuell,
table[data-tabelle] td.fuell { width: auto; }

/* Die Mindestbreite steht als style am Tabellenelement und darf nicht von
   der alten Regel "min-width:0" ueberfahren werden. */
table[data-tabelle] { min-width: auto; }
table[data-tabelle] th.fuell, table[data-tabelle] td.fuell { min-width: 0; }

/* ============================================== Zeichen statt Buntheit
   22.09.2026. Die Sinnbilder sind Emojis und kommen in Vollfarbe. In einer
   Arbeitsoberflaeche zieht jede Farbe Aufmerksamkeit, und die soll auf die
   Inhalte gehen, nicht auf eine gelbe Klemmbretthand. Entfaerbt und leicht
   abgedunkelt wirken sie wie ein Zeichensatz in Graustufen.

   Das ist die schnelle Loesung. Ein richtiger Zeichensatz (SVG, eine Linie,
   eine Farbe) waere der naechste Schritt, dafuer muessen aber alle
   Sinnbilder einzeln gesetzt werden. */
.leiste-ico,
.card .ico,
.wk-ico,
.ts-label .ico,
h1 .ico,
.menue .card .ico,
.pt-leute-icon,
.pt-anw-icon {
  filter: grayscale(1) contrast(1.15) brightness(.55);
  opacity: .9;
}
.leiste a.hier .leiste-ico { filter: grayscale(1) contrast(1.2) brightness(.35); opacity: 1; }
.leiste a:hover .leiste-ico { filter: grayscale(1) contrast(1.2) brightness(.35); opacity: 1; }
.card:hover .ico, .wissen-karte:hover .wk-ico { filter: grayscale(1) contrast(1.2) brightness(.4); }

/* Im Meeting bleiben die Haken gruen, das ist dort eine Auskunft und keine
   Verzierung. */
.pt-anw-person.ist-da .pt-anw-icon { filter: none; opacity: 1; }

/* ================================================== Fenster rechts
   22.09.2026. Wie im Admin Center: Klick auf einen Namen schiebt rechts
   eine Leiste mit dem Datensatz herein, die Liste bleibt stehen. Kein
   dunkler Schleier ueber der Seite, man soll die Liste weiter sehen und
   daneben weiterlesen koennen. */
/* Der Hintergrund bleibt bedienbar, solange das Fenster offen ist (wie im
   M365 Admin Center) - nur X oder Esc schliessen, mit Rueckfrage bei
   ungespeicherten Aenderungen (siehe fenster.js). Deshalb faengt nur die
   Tafel selbst Klicks ab, nicht die ganze Flaeche daneben. Korrektur vom
   24.09.2026: vorher hat die Flaeche daneben jeden Klick abgefangen und
   damit z.B. das "..."-Menue der Tabelle dahinter unerreichbar gemacht. */
.fenster {
  position: fixed; inset: 0; z-index: 60;
  display: flex; justify-content: flex-end;
  background: transparent; pointer-events: none;
}
.fenster-tafel { pointer-events: auto; }
.fenster[hidden] { display: none; }
.fenster-tafel {
  width: min(560px, 100%); height: 100%;
  background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: -8px 0 28px rgba(0,0,0,.12);
  display: flex; flex-direction: column; overflow: hidden;
  animation: fenster-rein .16s ease-out;
}
@keyframes fenster-rein { from { transform: translateX(16px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .fenster-tafel { animation: none } }

.fenster-kopf {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px 14px; border-bottom: 1px solid var(--line-zart);
}
.fenster-titel { flex: 1; min-width: 0; }
.fenster-art {
  display: block; font-size: 11.5px; font-weight: bold; letter-spacing: .9px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.fenster-kopf h2 {
  margin: 0; font-size: 19px; font-weight: bold; line-height: 1.25;
  text-transform: none; letter-spacing: 0; color: var(--ink);
}
.fenster-zu {
  flex: none; width: 30px; height: 30px; line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: none; color: var(--muted); cursor: pointer; font-size: 14px;
}
.fenster-zu:hover { background: var(--grau-hover); color: var(--ink); }
.fenster-zu:focus { outline: none; border-color: var(--accent); }

.fenster-knoepfe {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 22px; border-bottom: 1px solid var(--line-zart);
  background: var(--bg-soft);
}
.fenster-inhalt { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }
.fenster-inhalt .detail { grid-template-columns: 170px 1fr; margin-bottom: 16px; }
.fenster-inhalt .detail dt { padding: 9px 14px; }
.fenster-inhalt .detail dd { padding: 9px 14px; }
.fenster-inhalt .rueck-titel { margin-top: 22px; font-size: 12px; }
.fenster-inhalt .feldgruppe { margin-top: 16px; font-size: 11px; }
.fenster-laedt { color: var(--muted); padding: 22px; font-size: 14px; }

/* Die offene Zeile bleibt in der Liste erkennbar. */
tr.ist-offen > td { background: var(--accent-soft); }
tr.ist-offen > td.chk { box-shadow: inset 3px 0 0 var(--accent); }


/* Menue bei offenem Fenster: bleibt sichtbar vor dem Fenster, statt darunter
   zu verschwinden. Angelegt am 24.09.2026. */
body.hat-fenster table[data-tabelle] th.menu,
body.hat-fenster table[data-tabelle] td.menu {
  right: calc(var(--fenster-breite-live, clamp(500px, 60vw, 1400px)) + 10px);
  box-shadow: -3px 0 8px rgba(0,0,0,.12);
}

@media (max-width: 760px) {
  .fenster-tafel { width: 100%; border-left: 0; }
  .fenster-inhalt .detail { grid-template-columns: 1fr; }
}

/* Breite des Fensters: ein Anteil des Bildschirms mit Unter- und
   Obergrenze, 60% statt vorher 50% (Wunsch vom 24.09.2026, mehr Platz fuer
   die Regeln-Tabelle). Unter 500px geht es nicht, sonst wird die
   Feldliste unleserlich. Wer es anders will, zieht am linken Rand; die
   Breite bleibt dann gespeichert (--fenster-breite). */
.fenster-tafel {
  width: var(--fenster-breite, clamp(500px, 60vw, 1400px));
  max-width: 100%;
  position: relative;
}
.fenster-inhalt .detail { grid-template-columns: minmax(150px, 26%) 1fr; }

/* Griff zum Ziehen am linken Rand der Tafel */
.fenster-griff {
  position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  cursor: col-resize; user-select: none; touch-action: none; z-index: 2;
}
.fenster-griff::after {
  content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px;
  background: transparent;
}
.fenster-griff:hover::after, .fenster-griff.ist-aktiv::after { background: var(--accent); }
body.zieht-fenster { cursor: col-resize; user-select: none; }

@media (max-width: 760px) {
  .fenster-tafel { width: 100%; }
  .fenster-griff { display: none; }
}

/* Zurueck im Fenster: erscheint erst, wenn man sich von der Liste aus
   weitergeklickt hat, also ab dem zweiten Datensatz. */
.fenster-zurueck {
  flex: none; width: 30px; height: 30px; margin-top: 2px; line-height: 1;
  border: 1px solid var(--line); border-radius: var(--radius-klein);
  background: var(--bg); color: var(--ink); cursor: pointer; font-size: 15px;
}
.fenster-zurueck:hover { border-color: var(--accent); color: var(--accent-ink); }
.fenster-zurueck:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Der eigentliche Grund, warum die Namensspalte schmal blieb: eine alte
   Regel deckelt "th.haft, td.haft" auf max-width 340px. Die stammt aus der
   Zeit, als die Tabelle ihre Breiten selbst ausgerechnet hat und die erste
   Spalte sonst davongelaufen waere. Mit festen Breiten aus der colgroup ist
   der Deckel nur noch eine Sperre: die Spalte bekam 24,3rem zugewiesen und
   wurde trotzdem bei 340px abgeschnitten. */
table[data-tabelle] th,
table[data-tabelle] td,
table[data-tabelle] th.haft,
table[data-tabelle] td.haft { max-width: none; }

/* ============================================ Sinnbilder als Strichzug
   22.09.2026. Statt Emojis jetzt gezeichnete Sinnbilder, eine Linie, eine
   Farbe, wie in mandio. Sie erben ueber currentColor die Schriftfarbe und
   brauchen deshalb keine Sonderbehandlung im Dunkelmodus. */
.leiste-ico { display: inline-flex; align-items: center; justify-content: center; }
.leiste-ico svg { width: 19px; height: 19px; display: block; }
.card .ico svg { width: 20px; height: 20px; display: block; color: var(--muted); }
.menue .card .ico svg { width: 22px; height: 22px; }
.card:hover .ico svg { color: var(--cc-rot); }
.card .ico { display: inline-flex; align-items: center; }
h1 .ico { display: inline-flex; align-items: center; vertical-align: -3px; }
h1 .ico svg { width: 21px; height: 21px; color: var(--muted); }

/* Die Entfaerbung von vorhin gilt nur noch fuer die Stellen, an denen noch
   ein Emoji steht (Ticketsuche, Wissenskarten, Meeting). */
.leiste-ico, .card .ico, h1 .ico, .menue .card .ico { filter: none; opacity: 1; }

/* ================================================== Kopfzeile, rechte Seite
   Vorher: ein Knopf mit Rahmen und der Beschriftung "Abmelden", daneben ein
   Kasten mit Sinnbild und ein Kreis. Drei verschiedene Formen auf engstem
   Raum. Jetzt drei gleich grosse Felder ohne Rahmen und ganz rechts der
   Kreis mit den Initialen. */
.kopf-rechts { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.kopf-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: none; color: var(--chrome-auf); cursor: pointer;
  transition: background .15s ease;
}
.kopf-knopf svg { width: 18px; height: 18px; }
.kopf-knopf:hover { background: rgba(255,255,255,.18); color: var(--chrome-auf); }
.kopf-knopf:focus-visible { outline: 2px solid var(--chrome-auf); outline-offset: -2px; }
.kopf-knopf.ist-aktiv { background: rgba(255,255,255,.22); }
header .nav-warn {
  font-size: .82rem; padding: 0 10px; height: 26px; display: inline-flex;
  align-items: center; border-radius: var(--radius-klein);
  border: 1px solid rgba(255,255,255,.5); margin-right: 6px;
}
header .nav-warn:hover { background: rgba(255,255,255,.18); }

/* ================================ Marke bündig zur Leiste darunter
   Der Block links ist so breit wie die Menueleiste, und das CANCOM-Zeichen
   sitzt an seinem rechten Rand mit demselben Abstand wie die Zahlen in der
   Leiste. Dadurch laeuft eine saubere senkrechte Linie durch. */
:root { --leiste-breite: 224px; }
body.mitleiste header .head { padding-left: 24px; padding-right: 22px; }
.kopf-marke {
  display: flex; align-items: center; gap: 10px; flex: none;
  width: calc(var(--leiste-breite) - 24px);
}
.kopf-marke .cancom-marke { margin-left: auto; margin-right: 12px; }
@media (max-width: 900px) {
  .kopf-marke { width: auto; }
  .kopf-marke .cancom-marke { margin-left: 14px; margin-right: 0; }
}

/* Die Marke "MEDIUM" stand dunkelbraun auf braun: die Farben fuer den
   Dunkelmodus galten auch im hellen, weil ihre Regel staerker war als die
   Korrektur von heute Vormittag. Hier mit hoeherem Gewicht zurueckgeholt. */
html:root:not([data-theme="dark"]) { --warn-bg: #FFF3E0; --gruen-bg: #E8F5EC; --ok-bg: #EEF4EE; }
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) { --warn-bg: #3a2a10; --gruen-bg: #123021; --ok-bg: #14241a; }
}
.badge.b-mittel { background: var(--warn-bg); color: #8a5514; border-color: #d9a441; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge.b-mittel { color: #e9a23b; border-color: #7a5a22; }
}
:root[data-theme="dark"] .badge.b-mittel { color: #e9a23b; border-color: #7a5a22; }

/* Der Markenblock war um sechs Pixel zu voll, dadurch lief das CANCOM-
   Zeichen ueber seinen rechten Rand hinaus und die Linie stimmte nicht.
   Das Zeichen etwas schmaler, dann passt alles in die 200 Pixel und endet
   genau dort, wo die Zahlen in der Leiste enden. */
.kopf-marke .cancom-marke { width: 92px; padding-left: 12px; margin-right: 12px; }
.kopf-marke .brand b { font-size: 1.08rem; }

/* Die alten Kopfzeilenregeln geben jedem Verweis 13px Innenabstand. Bei den
   neuen quadratischen Knoepfen blieb dadurch fuer das Sinnbild nur ein Punkt
   uebrig. Hier ausdruecklich ohne Innenabstand. */
.head nav > a.kopf-knopf,
.head nav > button.kopf-knopf,
.kopf-rechts .kopf-knopf { width: 32px; height: 32px; padding: 0; }
.kopf-rechts .kopf-knopf svg { width: 18px; height: 18px; flex: none; }
/* Der Kreis mit den Initialen ist ein Kreis, kein Kaestchen. */
.wer .kreis {
  border-radius: 50%; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
}

/* In der Leiste bricht nichts mehr um. Passt ein Name trotz Kurzform nicht,
   wird er mit … abgeschnitten, der volle Name steht im Tooltip. */
.leiste a > span:not(.leiste-zahl):not(.leiste-ico) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.leiste a { align-items: center; }

/* ======================================== Projektmeeting, aufgeraeumt
   22.09.2026. Das Grunddesign bleibt: grosse Schrift, viel Kontrast,
   Karte je Vorhaben. Geaendert ist, was auf einer Leinwand stoert.

   1. Die Kopfzeile hatte Knoepfe in vier Hoehen und drei Schriftgroessen.
      Jetzt eine Hoehe, eine Groesse, ein Eckenmass.
   2. Die Karten waren unterschiedlich hoch, weil ganze Absaetze
      hineingelaufen sind. Text wird jetzt nach wenigen Zeilen
      abgeschnitten, Listen nach drei Punkten. Im Fokusmodus steht alles. */

/* --- Kopfzeile --- */
.pt-kopf { gap: 14px 18px; padding: 12px 22px; }
.pt-kopf-rechts { gap: 8px; }
.pt-knopf,
.pt-regler a,
.pt-regler button,
.pt-esk-zaehler,
.pt-zahl {
  height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 13px; font: 600 13.5px/1 "Segoe UI", Arial, sans-serif;
  border-radius: var(--radius-klein); white-space: nowrap;
}
.pt-regler { height: 34px; border-radius: var(--radius-klein); overflow: hidden; }
.pt-regler a, .pt-regler button { border-radius: 0; min-width: 40px; }
.pt-zahl { padding: 0; font-weight: 400; color: var(--muted); }
.pt-esk-zaehler { background: var(--cc-rot); color: #fff; }
.pt-titel { font-size: 18px; letter-spacing: 1px; }
.pt-datum { font-size: 14px; color: var(--muted); }
.pt-marke .marke { height: 30px; }
.pt-kopf-links { gap: 14px; align-items: center; }

/* --- Karten --- */
.pt-karte-kopf { padding: 16px 20px 12px; gap: 16px; }
.pt-karte-inhalt { padding: 6px 20px 14px; gap: 0 28px; }
.pt-block { margin: 12px 0; }
.pt-name { font-size: calc(21px * var(--skala)); }
.pt-kunde { font-size: calc(15px * var(--skala)); color: var(--muted); margin-bottom: 8px; }

/* Fliesstext hoechstens drei Zeilen, Listenpunkte hoechstens zwei. */
.pt-block p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; font-size: calc(16px * var(--skala));
}
.pt-block li {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; font-size: calc(15px * var(--skala)); margin-bottom: 5px;
}
.pt-leise li, .pt-leise p { font-size: calc(14px * var(--skala)); -webkit-line-clamp: 1; }
.pt-mehr {
  margin: 4px 0 0; font-size: calc(13px * var(--skala)); color: var(--muted);
  font-style: italic;
}
.pt-schritt { padding: 11px 16px; margin: 12px 0; }
.pt-schritt p { -webkit-line-clamp: 3; }

/* Im Fokusmodus zaehlt Vollstaendigkeit, nicht Kompaktheit. */
.pt-karte.ist-fokus .pt-block p,
.pt-karte.ist-fokus .pt-block li { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pt-karte.ist-fokus .pt-mehr { display: none; }

/* Eskalationsband: Sinnbild statt Emoji, eine Zeile. */
.pt-esk-icon svg { width: calc(19px * var(--skala)); height: calc(19px * var(--skala)); display: block; }
.pt-eskalation { padding: 9px 20px; align-items: center; }
.pt-esk-text {
  font-size: calc(15px * var(--skala)); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 60%;
}

/* Die Meetingseite laedt shell.css nicht, dort fehlt deshalb die Grundregel
   fuer die Kastenrechnung. Ohne sie kommen Rahmen zur angegebenen Hoehe
   hinzu, und die Knoepfe standen wieder in zwei Hoehen nebeneinander. */
body.praesentation *, body.anmeldung * { box-sizing: border-box; }

/* Listenpunkte behalten ihren Punkt, auch wenn der Text nach zwei Zeilen
   abgeschnitten wird. Die Abschneideregel nimmt dem li seine Eigenschaft
   als Listenelement, deshalb wird der Punkt hier selbst gesetzt. */
.pt-block ul { list-style: none; padding-left: 0; }
.pt-block li { padding-left: 0; }
.pt-block li::before {
  content: "\2022"; color: var(--cc-rot); font-weight: bold;
  margin-right: 9px;
}
.pt-leise li::before { color: var(--muted); }

/* Teilnehmer: ein Punkt statt drei Emojis. Gefuellt heisst fest eingeplant. */
.pt-anw-icon {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--muted); background: transparent;
  filter: none; opacity: 1;
}
.pt-anw-icon.ist-fest { background: var(--muted); }
.pt-anw-person.ist-da .pt-anw-icon { border-color: var(--gruen); background: var(--gruen); }
.pt-anw-titel { display: inline-flex; align-items: center; gap: 8px; }

/* Die Zeile mit Engineers und Projektmanagement bekommt dieselben
   gezeichneten Sinnbilder wie der Rest der Anwendung. */
.pt-leute-icon { display: inline-flex; align-items: center; filter: none; opacity: 1; }
.pt-leute-icon svg {
  width: calc(17px * var(--skala)); height: calc(17px * var(--skala));
  color: var(--muted); display: block;
}

/* Bearbeiten direkt auf der Karte: leise gehalten, es ist eine Nebensache
   neben Status und Frist, aber im Meeting oft gebraucht. */
.pt-bearbeiten {
  display: inline-flex; align-items: center; gap: 7px;
  height: calc(28px * var(--skala)); padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--radius-klein);
  color: var(--muted); font-size: calc(13px * var(--skala)); font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.pt-bearbeiten svg { width: calc(15px * var(--skala)); height: calc(15px * var(--skala)); }
.pt-bearbeiten:hover { border-color: var(--cc-rot); color: var(--cc-rot); text-decoration: none; }
#sprachwahl-meeting a { min-width: 38px; }

/* Mehrfachauswahl im Formular: Kaestchen nebeneinander statt Freitext mit
   Komma. Das Feld darunter nimmt Werte auf, die es noch nicht gibt. */
.mehrfachwahl { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.mehrfachwahl label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.mehrfachwahl input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.mehrfachwahl .mehrfach-neu { flex: 1 1 220px; min-width: 180px; margin-top: 4px; }
.bearbeiten select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit;
}
.bearbeiten select:focus { outline: 2px solid var(--cc-rot-hauch); border-color: var(--cc-rot); }

/* Kunde auf der Karte: Kuerzel, senkrechter Strich, voller Name. Das
   Kuerzel etwas kraeftiger, es ist der Anker zu Tickets und Servernamen. */
.pt-kunde { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pt-kuerzel { font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.pt-kunde-teiler { color: var(--line); font-weight: 400; }

/* ===================================== Bearbeiten im Meeting, als Fenster
   Anders als das Fenster in der Tabellenansicht liegt dieses mittig und mit
   abgedunkeltem Grund: hier wird geschrieben, und waehrend der Runde soll
   klar sein, dass gerade ein Stand geaendert wird. */
.mfenster {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; background: rgba(0,0,0,.45);
  overflow-y: auto;
}
.mfenster[hidden] { display: none; }
.mfenster-tafel {
  width: min(880px, 100%); background: var(--panel);
  border: 1px solid var(--line); border-top: 4px solid var(--cc-rot);
  border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.28);
  display: flex; flex-direction: column; max-height: calc(100vh - 80px);
}
.mfenster-kopf {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--line-zart);
}
.mfenster-art {
  display: block; font-size: 11.5px; font-weight: bold; letter-spacing: .9px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.mfenster-kopf h2 {
  margin: 0; font-size: 19px; font-weight: bold; text-transform: none;
  letter-spacing: 0; color: var(--ink); line-height: 1.25;
}
/* Nur das Kreuz oben rechts ist ein Quadrat. Der Abbrechen-Knopf im Fuss
   traegt dieselbe Klasse, weil er dasselbe tut, sah damit aber aus wie ein
   30 Pixel breiter Kasten, aus dem die Beschriftung herauslief. */
.mfenster-kopf .mfenster-zu {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: none; color: var(--muted); cursor: pointer; font-size: 14px;
}
.mfenster-kopf .mfenster-zu:hover { background: var(--zeile-hover); color: var(--ink); }
.mfenster-form { display: flex; flex-direction: column; min-height: 0; max-width: none; }
.mfenster-felder { overflow-y: auto; padding: 16px 22px 4px; }
.mfenster-knoepfe {
  margin: 0; padding: 14px 22px; border-top: 1px solid var(--line-zart);
  background: var(--kopf-bg); display: flex; align-items: center; gap: 12px;
}
.mfenster-stand { font-size: 13px; color: var(--muted); }
.mfenster-stand.ist-fehler { color: var(--cc-rot); font-weight: bold; }
.mfenster-laedt { padding: 26px; color: var(--muted); }
body.hat-mfenster { overflow: hidden; }
/* Im Fenster ist die Schriftgroesse der Praesentation fehl am Platz, hier
   wird gearbeitet, nicht vorgelesen. */
.mfenster .bearbeiten .feld { grid-template-columns: 220px 1fr; }
.mfenster label, .mfenster input, .mfenster select, .mfenster textarea { font-size: 14px; }

/* Marke auf der Karte, wenn der deutsche Text der neuere ist und die
   englische Fassung fehlt oder nicht mehr dazu passt. */
.pt-sprachmarke {
  font-size: calc(11px * var(--skala)); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8a5514; background: var(--warn-bg);
  border: 1px solid #d9a441; border-radius: var(--radius-klein);
  padding: 1px 7px; white-space: nowrap;
}

/* Im Fokus dieselbe Breite wie in der Uebersicht. Die Karte war dort auf
   1150px gedeckelt und zentriert, wodurch links und rechts Platz verfiel,
   gerade auf der Leinwand. Jetzt fuellt sie die Breite des Rasters. */
.pt-karte.ist-fokus { max-width: none; width: 100%; margin: 0; }
.pt-raster.ist-fokusmodus { max-width: 1500px; margin: 0 auto; }

/* ================================================== Geteilter Auszug
   Eine Seite zum Lesen, nicht zum Bedienen: keine Leiste, keine Knoepfe,
   eine Spalte, druckbar. Bewusst schlicht, weil sie CANCOM-Kollegen
   erreicht, die das Portal nicht kennen. */
body.auszug {
  margin: 0; background: #fff; color: #1a1a1a;
  font: 15px/1.55 "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.az-kopf { background: #B3001F; color: #fff; padding: 18px 0; }
.az-kopf-innen {
  max-width: 900px; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 18px;
}
.az-marke {
  width: 104px; height: 17px; flex: none; background: currentColor;
  -webkit-mask: url('/assets/cancom-maske.png') no-repeat center/contain;
          mask: url('/assets/cancom-maske.png') no-repeat center/contain;
  -webkit-mask-source-type: luminance; mask-mode: luminance;
}
.az-kopf h1 { margin: 0; font-size: 19px; letter-spacing: .4px; }
.az-stand { margin: 3px 0 0; font-size: 13px; opacity: .85; }

.az-main { max-width: 900px; margin: 0 auto; padding: 22px; }
.az-zeile {
  border: 1px solid #e1e1e1; border-left: 5px solid #d0d0d0;
  border-radius: 3px; padding: 14px 16px; margin: 0 0 12px;
  break-inside: avoid;
}
.az-zeile.prio-hoch { border-left-color: #FF0035; }
.az-zeile.prio-mittel { border-left-color: #B25E00; }
.az-kopfzeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.az-nr { font-weight: 700; font-size: 13px; letter-spacing: .4px; }
.az-prio, .az-esk {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid #e1e1e1; border-radius: 2px; padding: 1px 7px; color: #575757;
}
.az-esk { background: #FF0035; border-color: #FF0035; color: #fff; }
.az-kopfzeile h2 { margin: 0; font-size: 17px; font-weight: 700; flex: 1 1 100%; }
.az-meta { margin: 6px 0 0; font-size: 13.5px; color: #575757; }
.az-schritt { margin: 10px 0 0; font-size: 14.5px; }
.az-schritt span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #B3001F; margin-bottom: 2px;
}
.az-offen { margin: 9px 0 0; padding-left: 18px; font-size: 14px; color: #333; }
.az-offen li { margin-bottom: 3px; }
.az-leer { color: #575757; }
.az-fuss {
  max-width: 900px; margin: 0 auto; padding: 18px 22px 40px;
  border-top: 1px solid #e1e1e1; color: #575757; font-size: 12.5px;
}
.az-fuss p { margin: 0 0 4px; }
.az-link {
  width: 100%; font-family: Consolas, monospace; font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--bg-soft); color: var(--ink);
}
/* Das Formular um den Knopf "Zurückziehen" ist nur Träger und darf die
   Tabellenzeile nicht höher machen. */
.az-zurueck { margin: 0; }
@media print {
  .az-kopf { background: #fff; color: #000; border-bottom: 3px solid #FF0035; }
  .az-marke { color: #FF0035; }
  .az-zeile { border-color: #ccc; }
}
/* Die Titelregel der Anwendung macht h2 zu Versalien. Im Auszug ist h2 aber
   ein Vorhabenname, kein Kleinlabel. */
.az-kopfzeile h2 { text-transform: none; letter-spacing: 0; }

/* Der Inhalt der Karte lief ueber ein Raster mit fester Mindestbreite je
   Spalte. Bei zwei Bloecken blieb dadurch die dritte Spaltenbreite leer
   stehen, rechts ein Drittel Weiss. Mit einem Flusslayout teilen sich die
   vorhandenen Bloecke den Platz: zwei nehmen je die Haelfte, drei je ein
   Drittel. Der naechste Schritt bleibt ueber die volle Breite. */
.pt-karte-inhalt {
  display: flex; flex-wrap: wrap; gap: 0 34px; align-items: flex-start;
}
.pt-karte-inhalt > .pt-block {
  flex: 1 1 calc(280px * var(--skala)); min-width: 0;
}
.pt-karte-inhalt > .pt-schritt { flex: 1 1 100%; }

/* Immer drei Spalten, auf jeder Karte gleich. Die Bloecke wachsen nicht
   mehr auf die freie Breite, sondern behalten ihr Drittel. Dadurch stehen
   Open Items, Recent Activity und Verknuepftes auf allen Karten an
   derselben Stelle, auch wenn eine Karte nur zwei davon hat. */
.pt-karte-inhalt > .pt-block {
  flex: 0 1 calc((100% - 68px) / 3);
}
.pt-karte-inhalt > .pt-schritt { flex: 1 1 100%; }
@media (max-width: 1100px) {
  .pt-karte-inhalt > .pt-block { flex: 1 1 calc((100% - 34px) / 2); }
}
@media (max-width: 700px) {
  .pt-karte-inhalt > .pt-block { flex: 1 1 100%; }
}

/* Listenzeichen: statt des runden Punktes ein schlanker Winkel. Er ist aus
   Rahmenlinien gebaut, bleibt damit bei jeder Schriftgroesse scharf und
   haengt nicht von einer Zeichensatzform ab. */
.pt-block li::before {
  content: ""; display: inline-block; vertical-align: 0.08em;
  width: 0.38em; height: 0.38em; margin-right: 0.62em;
  border-right: 2px solid var(--cc-rot); border-top: 2px solid var(--cc-rot);
  border-radius: 1px; transform: rotate(45deg);
}
.pt-leise li::before { border-color: var(--muted); }

/* Leere dritte Spalte: die Ueberschrift steht trotzdem, darunter der Grund.
   So sieht man auf einen Blick, dass an dem Vorhaben nichts haengt. */
.pt-leer {
  margin: 0; color: var(--muted); opacity: 0.8;
  font-size: calc(14px * var(--skala)); line-height: 1.5;
}
.pt-karte.ist-fokus .pt-leer { font-size: calc(19px * var(--skala)); }

/* Haengender Einzug: laeuft ein Punkt in die zweite Zeile, steht sie unter
   dem Text und nicht unter dem Winkel. */
.pt-block li { padding-left: 1em; text-indent: -1em; }
.pt-block li::before { text-indent: 0; }

/* Im Formular schlaegt ".bearbeiten button" den leisen Knopf, deshalb war
   auch Abbrechen rot. Zwei rote Knoepfe nebeneinander sagen nicht, welcher
   der gemeinte ist. */
.bearbeiten button.knopf-leise,
.mfenster-knoepfe button.knopf-leise {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); font-weight: normal;
}
.bearbeiten button.knopf-leise:hover,
.mfenster-knoepfe button.knopf-leise:hover {
  background: transparent; border-color: var(--cc-rot); color: var(--cc-rot);
}

/* Verknuepfungen mit vielen Zielen: die Kaestchen brauchen Luft, sonst
   steht das halbe Team in einer Zeile. */
.mfenster .mehrfachwahl { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mfenster .mehrfachwahl label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* Ansicht als: Auswahl in der Kopfzeile und Hinweisband darunter. */
.sichtals { display: flex; align-items: center; gap: 6px; margin: 0; }
.sichtals select {
  height: 30px; max-width: 210px; font-size: 13px; padding: 0 6px;
  border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-klein, 2px);
  /* Die Kopfzeile faerbt ihren Text weiss. Ohne eigene Farbe stand hier
     weisse Schrift auf weissem Feld, das Auswahlfeld sah leer aus. */
  background: #fff; color: #1a1a1a;
}
.sichtals option { color: #1a1a1a; background: #fff; }
.sicht-band {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 18px; font-size: 13.5px;
  background: var(--cc-rot); color: #fff;
}
.sicht-band b { font-weight: bold; }
.sicht-band form { margin: 0; }
.sicht-band button {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.65);
  border-radius: var(--radius-klein, 2px); padding: 3px 10px; font-size: 13px; cursor: pointer;
}
.sicht-band button:hover { background: rgba(255,255,255,.15); }
.sicht-band.demo-band { background: #5b3aa6; }
.sicht-band.demo-band a { color: #fff; text-decoration: underline; }

/* Rueckmeldungen in der Benutzerverwaltung. */
.hinweis-gut {
  border: 1px solid var(--gruen, #1a7f37); border-left-width: 4px;
  background: color-mix(in srgb, var(--gruen, #1a7f37) 7%, transparent);
  padding: 10px 14px; margin: 0 0 16px; border-radius: var(--radius-klein, 2px);
}
.hinweis-warn {
  border: 1px solid var(--line); border-left: 4px solid var(--cc-rot);
  padding: 10px 14px; margin: 0 0 16px; border-radius: var(--radius-klein, 2px);
}
.hinweis-gut p, .hinweis-warn p { margin: 0 0 6px; }
.hinweis-gut p:last-child, .hinweis-warn p:last-child { margin-bottom: 0; }
.einloeselink {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  word-break: break-all; background: var(--zeile-hover); padding: 8px 10px;
  border-radius: var(--radius-klein, 2px);
}
.liste .knopfspalte { text-align: right; white-space: nowrap; }
.liste .knopfspalte form { margin: 0; display: inline-block; }
.liste tr.ist-gesperrt td { color: var(--muted); }
.liste.rechte td { text-align: center; }
.liste.rechte td:first-child { text-align: left; }

/* Kleines i im Kreis. Die Blase geht beim Zeigen auf und legt sich ueber
   die Kachel, ohne das Raster zu verschieben. */
.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: none; margin-left: 7px;
  color: var(--muted); position: relative; vertical-align: -2px;
}
.info-i svg { width: 15px; height: 15px; display: block; }
.info-i:hover { color: var(--cc-rot); }
.info-blase {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: 250px; padding: 9px 11px; border-radius: var(--radius, 4px);
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: normal;
  line-height: 1.45; text-align: left; letter-spacing: 0; text-transform: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); z-index: 40;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  pointer-events: none;
}
.info-i:hover .info-blase, .info-i:focus-visible .info-blase { opacity: 1; visibility: visible; }
/* An der linken Kante wandert die Blase nach rechts, damit sie nicht
   aus dem Inhalt laeuft. */
.menue-gruppe:first-child .info-blase { left: 0; transform: none; }
.kpi .info-blase { width: 230px; }

/* Eingeklappte Leiste: "a span { display: none }" in shell.css hat auch das
   Kästchen mit dem Sinnbild erwischt. Übrig blieb ein leerer Streifen, in dem
   man zwar klicken konnte, aber nicht sah worauf. Die Beschriftung bleibt
   verborgen, das Sinnbild kommt zurück. */
.leiste.ist-zu a .leiste-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
}
.leiste.ist-zu a .leiste-ico svg { width: 19px; height: 19px; display: block; }
.leiste.ist-zu a { position: relative; }
/* Der Name steht als Sprechblase daneben, sonst rät man beim Sinnbild. */
.leiste.ist-zu a > span:not(.leiste-ico):not(.leiste-zahl) {
  display: block; position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%); white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 12.5px; padding: 5px 9px;
  border-radius: var(--radius-klein, 2px); box-shadow: 0 6px 18px rgba(0,0,0,.2);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
}
.leiste.ist-zu a:hover > span:not(.leiste-ico):not(.leiste-zahl),
.leiste.ist-zu a:focus-visible > span:not(.leiste-ico):not(.leiste-zahl) {
  opacity: 1; visibility: visible;
}
@media (max-width: 900px) {
  .leiste.ist-zu a > span:not(.leiste-ico):not(.leiste-zahl) {
    position: static; transform: none; background: none; color: inherit;
    box-shadow: none; opacity: 1; visibility: visible; padding: 0;
  }
}

/* Die Zwischenseite beim Freischalten: Bedingungen, Verschwiegenheit,
   Datenschutz, Haftung. Ruhig gesetzt, weil sie gelesen werden soll. */
.bedingungen { max-width: 780px; }
.bedingungen h1 { margin-bottom: 6px; }
.bed-block { margin: 26px 0 0; }
.bed-block h2 {
  display: flex; align-items: center; gap: 11px;
  font-size: 17px; color: var(--ink); text-transform: none; letter-spacing: 0;
  margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line-zart);
}
.bed-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; flex: none; border-radius: var(--radius-klein, 2px);
  background: var(--cc-rot); color: #fff; font-size: 13.5px; font-weight: bold;
}
.bed-text p { margin: 0 0 10px; line-height: 1.62; }
.bed-text ul { margin: 0 0 10px; padding-left: 20px; }
.bed-text li { margin-bottom: 7px; line-height: 1.6; }
.bed-text p:last-child, .bed-text ul:last-child { margin-bottom: 0; }
.bed-form {
  margin: 30px 0 10px; padding: 20px 22px;
  border: 1px solid var(--line); border-left: 3px solid var(--cc-rot);
  background: var(--bg-soft, #fafafa); border-radius: var(--radius-klein, 2px);
}
.bed-haken { display: flex; align-items: flex-start; gap: 11px; line-height: 1.55; }
.bed-haken input { margin-top: 3px; flex: none; width: 17px; height: 17px; }
.bed-knoepfe { margin-top: 18px; display: flex; align-items: center; gap: 12px; }

/* ------------------------------------------------------- Meetingarchiv */
.archiv-unter { color: var(--muted); margin: -4px 0 18px; font-size: 14px; }
.archiv-karten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; margin-bottom: 22px;
}
.archiv-karte { flex-direction: column; align-items: flex-start; gap: 4px; }
.archiv-karte strong { font-size: 14.5px; }
.archiv-karte span { color: var(--muted); font-size: 13px; }
.archiv-freigabe {
  background: var(--panel); border: 1px solid var(--line-zart); border-radius: var(--radius);
  padding: 14px 16px; max-width: 640px;
}
.archiv-freigabe p { margin: 0 0 10px; font-size: 14px; }
.transkript {
  white-space: pre-wrap; word-break: break-word; font-family: inherit;
  font-size: 13.5px; line-height: 1.55; max-width: 980px;
  background: var(--panel); border: 1px solid var(--line-zart); border-radius: var(--radius);
  padding: 16px 18px; color: var(--ink);
}
.archiv-ablage {
  background: var(--panel); border: 1px solid var(--line-zart); border-radius: var(--radius);
  padding: 10px 16px; margin-bottom: 18px; max-width: 640px;
}
.archiv-ablage summary { cursor: pointer; font-weight: bold; font-size: 14px; }
.archiv-ablage form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.archiv-ablage label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.archiv-ablage input[type=text], .archiv-ablage input[type=date] { padding: 7px 10px; font: inherit; color: var(--ink); }
.archiv-ablage .knopf { align-self: flex-start; }
.archiv-protokoll-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 26px 0 10px; max-width: 900px;
}
.archiv-protokoll-kopf h2 { margin: 0; font-size: 16px; }
.archiv-protokoll {
  display: block; width: 100%; max-width: 900px; height: 900px;
  border: 1px solid var(--line-zart); border-radius: var(--radius);
  background: #fff; padding: 20px 24px; box-sizing: border-box;
}

/* Meetingkarte: Eintrag aus dem letzten Projektmeeting */
.pt-meeting h3 .pt-meeting-datum { font-weight: normal; color: var(--muted); margin-left: 6px; letter-spacing: 0; text-transform: none; }
.pt-meeting p { color: var(--ink); }
/* Letztes Projektmeeting: volle Breite wie der naechste Schritt, bis zu vier Zeilen. */
.pt-karte-inhalt > .pt-block.pt-meeting { flex: 1 1 100%; max-width: none; grid-column: 1 / -1; margin-bottom: 4px; }
.pt-karte-inhalt > .pt-block.pt-meeting p { -webkit-line-clamp: 4; }
.pt-karte.ist-fokus .pt-block.pt-meeting p { -webkit-line-clamp: unset; }

/* Meetingkarte: Nachfassen, volle Breite, dezent hervorgehoben */
.pt-karte-inhalt > .pt-block.pt-nachfassen {
  flex: 1 1 100%; max-width: none; grid-column: 1 / -1;
  background: var(--warn-bg); border-left: 4px solid var(--warn); border-radius: var(--radius);
  padding: 8px 14px; margin: 12px 0 0;
}
.pt-nachfassen h3 { color: var(--warn); margin-bottom: 4px; }
.pt-nachfassen ul { margin: 0; padding-left: 18px; }
.pt-nachfassen li { list-style: disc; -webkit-line-clamp: unset; display: list-item; margin-bottom: 2px; }

/* Einstellungen: Reihenfolge der Menuegruppen */
.reihe { list-style: none; margin: 12px 0 8px; padding: 0; max-width: 560px; counter-reset: reihe; }
.reihe li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--line); border-top-width: 0; counter-increment: reihe; }
.reihe li:first-child { border-top-width: 1px; }
.reihe-name::before { content: counter(reihe) ". "; color: var(--muted); }
.reihe-knoepfe { display: flex; gap: 8px; margin: 0; }
.reihe-knoepfe button[disabled] { opacity: .35; cursor: default; }


/* Mailvorschau im Firewall-Slide: die Mail ist ein eigenstaendiges
   HTML-Dokument mit eigenen style="..."-Angaben (siehe fw_mail_layout in
   firewall.php) und steckt deshalb in einem iframe, das per src (nicht
   srcdoc) eine eigene HTTP-Antwort mit eigener, dafuer gelockerter CSP
   laedt (fw_ajax_mail_vorschau()) - srcdoc wuerde die strenge CSP der
   App erben und die style-Angaben der Mail verwerfen. Feste Hoehe mit
   eigenem Scrollbalken statt dynamischer Anpassung, weil eine Hoehen-
   Neuberechnung per JS auf onload eine Inline-Handler-Ausnahme in der CSP
   noetig gemacht haette. Angelegt am 24.09.2026, Queue Q-3c080d. */
.fw-mailvorschau {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.fw-mailvorschau iframe {
  display: block;
  width: 100%;
  height: 900px;
  border: 0;
  background: #f2f2f2;
}

/* Das "..."-Menue wurde vom allgemeinen "td { overflow:hidden }" der Zelle
   abgeschnitten und blieb dadurch leer sichtbar - Korrektur vom 24.09.2026. */
table[data-tabelle] td.menu { overflow: visible; }