/* Erscheinungsbild nach team-time.net: Rot als Markenfarbe, Stahlblau als zweite Farbe,
   kühle helle Grautöne als Fläche. Ab Fassung 0.19 Schrift Inter (liegt in static/schrift, Lizenz OFL),
   Überschriften in normaler Schreibweise, weiche Schatten statt harter Rahmen. */
@font-face { font-family: "Inter Olymp"; src: url("schrift/Inter-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Olymp"; src: url("schrift/Inter-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Olymp"; src: url("schrift/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Olymp"; src: url("schrift/Inter-Bold.woff") format("woff"); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Olymp Titel"; src: url("schrift/InterDisplay-SemiBold.woff") format("woff"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Olymp Titel"; src: url("schrift/InterDisplay-Bold.woff") format("woff"); font-weight: 700 800; font-style: normal; font-display: swap; }
:root {
  --rot-marke: #c8232b;       /* Fassung 0.47: CI-Rot aus den Logos (Vektor) */
  --rot-dunkel: #91302e;      /* Überlappung der beiden Quadrate */
  --rot-zart: #fbf6f5;
  --stahl: #7e96bd;           /* CI-Blau aus den Logos */
  --stahl-hell: #9db6c1;
  --stahl-zart: #eef2f8;
  --nebel: #d3d9db;
  --marine: #91302e;          /* Name aus Fassung 0.2, jetzt Dunkelrot (CI) */
  --marine-dunkel: #6f1218;
  --akzent: #91302e;
  --flaeche: #f1f3f6;
  --flaeche-tief: #e6eaef;
  --rahmen: #1b222c;
  --rahmen-hell: #252e3a;
  --rahmen-text: #d3dae3;
  --rahmen-leise: #8b97a7;
  --merkur: #5b7aa5;
  --spalte: #f3f5f8;
  --karte: #ffffff;
  --linie: #e2e6eb;
  --linie-stark: #cfd6de;
  --text: #22272d;
  --text-leise: #5c656f;
  --gruen: #1d7a4a;  --gruen-hell: #e3f3ea;
  --gelb: #8a6100;   --gelb-hell: #fdf3d7;
  --rot: #b3261e;    --rot-hell: #fbe6e4;
  --blau: #3d5a85;   --blau-hell: var(--stahl-zart);
  --grau-hell: #eceeef;
  --radius: 14px;
  --radius-klein: 10px;
  --schatten-1: 0 1px 2px rgba(20, 28, 40, .06), 0 2px 8px -2px rgba(20, 28, 40, .06);
  --schatten-2: 0 12px 28px -10px rgba(20, 28, 40, .22), 0 2px 6px rgba(20, 28, 40, .06);
  --schatten-rot: 0 1px 2px rgba(139, 24, 31, .25), 0 4px 10px -4px rgba(196, 37, 34, .45);
  --uebergang: 160ms cubic-bezier(.2, .7, .2, 1);
  --schrift: "Inter Olymp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Inter Olymp Titel", "Inter Olymp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fassung 0.42.2 (Impeccable-Audit): alle Farben, Radien und Schriftgrößen als Token */
  --text-dunkel: #39424d;  --text-blass: #7b8592;  --tinte: #14204d;
  --linie-feld: #c3ccd6;   --linie-hover: #a9b4c0; --stahl-linie: #d9e2ef;
  --flaeche-hell: #f7f9fb; --nav-aktiv: #fbeeed;   --intern: #fbfaf5;
  --gruen-dunkel: #14532f; --gruen-linie: #b5dcc5; --gruen-zart: #f4fbf7;
  --gelb-linie: #ecd9a0;   --gelb-magnet: #c98a00; --gelb-dunkel: #5c4100; --bernstein: #b87600;
  --rot-linie: #efc4c0;    --rot-tief: #7a1a14;    --holding: #164f86;
  --r-mini: 4px; --r-klein: 8px; --r-segment: 9px; --r-steuer: 10px; --r-huelle: 12px; --r-karte: 14px;
  --r-tafel: 18px; --r-rund: 99px;
  --t-mikro: .78rem; --t-beschriftung: .86rem; --t-klein: .94rem; --t-abschnitt: 1.12rem; --t-zwischen: 1.25rem;
  --t-kennzahl-klein: 1.5rem; --t-titel-klein: 1.75rem; --t-titel: 2rem; --t-start: 2.35rem; --t-diagramm: 11px;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--flaeche); color: var(--text);
  font-family: var(--schrift); font-feature-settings: "calt" 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  line-height: 1.5; text-rendering: optimizeLegibility;
}
a { color: var(--akzent); }
h1 { font-family: var(--schrift-titel); font-size: var(--t-titel-klein); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .35rem; line-height: 1.15; text-wrap: balance; overflow-wrap: break-word; }
h2 { font-family: var(--schrift-titel); font-size: var(--t-abschnitt); font-weight: 600; letter-spacing: -.01em; margin: 0 0 .7rem; line-height: 1.3; }
h3 { font-size: 1rem; font-weight: 600; margin: 1.2rem 0 .4rem; }
p { margin: 0 0 .8rem; }
code { background: var(--grau-hell); padding: .05rem .3rem; border-radius: var(--r-mini); font-size: .9em; }
[hidden] { display: none !important; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.symbol { flex: none; vertical-align: -4px; }

/* Rahmen und Seitenleiste */
.rahmen { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.seitenleiste {
  background: var(--karte); border-right: 1px solid var(--linie); padding: 1.1rem .8rem 1rem;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.seitenleiste-kopf { display: flex; align-items: center; justify-content: space-between; padding: 0 .4rem; margin-bottom: 1.2rem; }
.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text); }
.marke-text { font-family: var(--schrift-titel); letter-spacing: -.005em; font-size: 1rem; font-weight: 600; color: var(--text); }
.logo { width: 92px; height: auto; display: block; }
.logo-klein { width: 70px; }
.logo-bild { height: 44px; width: auto; display: block; }
.menue-knopf { display: none; background: none; border: 1px solid var(--linie); border-radius: var(--r-klein); padding: .35rem .45rem; color: var(--text); cursor: pointer; }
.hauptmenue { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.knopf-neu { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0 .2rem 1rem; padding: .6rem .8rem; }
.seitenleiste nav { display: flex; flex-direction: column; gap: .1rem; }
.nav-eintrag {
  display: flex; align-items: center; gap: .65rem; color: var(--text); text-decoration: none;
  padding: .5rem .7rem; border-radius: var(--radius-klein); font-size: var(--t-klein); font-weight: 500; transition: background-color var(--uebergang), color var(--uebergang);
}
.nav-eintrag .symbol { color: var(--text-leise); }
.nav-eintrag:hover { background: var(--flaeche); }
.nav-eintrag.aktiv { background: var(--karte); color: var(--rot-dunkel); font-weight: 600; box-shadow: var(--schatten-1); }
.nav-eintrag.aktiv .symbol { color: var(--rot-marke); }
.nav-pfeil { width: 16px; height: 16px; transition: transform .15s; }
.seitenleiste-fuss { margin-top: auto; padding-top: 1rem; }
.nutzermenue { border-top: 1px solid var(--linie); padding-top: .6rem; }
.nutzermenue summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem; border-radius: var(--r-klein); }
.nutzermenue summary::-webkit-details-marker { display: none; }
.nutzermenue summary:hover { background: var(--flaeche); }
.nutzermenue[open] .nav-pfeil { transform: rotate(180deg); }
.kuerzel { width: 2rem; height: 2rem; border-radius: 50%; background: var(--stahl); color: var(--karte); display: grid; place-items: center; font-weight: 700; flex: none; text-transform: uppercase; }
.nutzer-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; font-size: var(--t-beschriftung); }
.nutzer-text span { color: var(--text-leise); font-size: var(--t-mikro); }
.nutzermenue-inhalt { display: flex; flex-direction: column; gap: .15rem; padding: .4rem .4rem 0 .4rem; font-size: var(--t-klein); }
.nutzermenue-inhalt a, .nutzermenue-inhalt .link-knopf { display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; padding: .35rem .25rem; }
.nutzermenue-inhalt a:hover, .nutzermenue-inhalt .link-knopf:hover { color: var(--rot-dunkel); }
.nutzermenue-inhalt p { margin: 0 0 .2rem; }
.ki-status { margin: .5rem 0 0; padding: .3rem .55rem; border-radius: var(--r-klein); font-size: var(--t-mikro); background: var(--flaeche); color: var(--text-leise); }
.ki-status.ki-an { background: var(--gruen-hell); color: var(--gruen); }
.inhalt { padding: 2rem 2.4rem 4rem; max-width: 1200px; width: 100%; }
.ohne-anmeldung { min-height: 100vh; display: grid; place-content: center; padding: 1rem; background: linear-gradient(160deg, var(--rot-marke) 0 42%, var(--flaeche) 42%); }

/* Bausteine */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.karte.schmal { max-width: 440px; }
.karte.gefahr { border-color: var(--rot-linie); }
.karte.hinweise { background: var(--gelb-hell); border-color: var(--gelb-linie); }
.karte.hinweise ul { margin: 0; padding-left: 1.2rem; }
.tabellen-karte { overflow-x: auto; }
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.unterzeile, .einleitung { color: var(--text-leise); }
.einleitung { max-width: 46rem; margin-bottom: 1.2rem; }
.pfad { font-size: var(--t-klein); margin-bottom: .5rem; color: var(--text-leise); }
.nebenbei { color: var(--text-leise); font-size: var(--t-beschriftung); }
.leer { color: var(--text-leise); }
.abstand { margin-top: 1.6rem; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.2rem; }
.spalten > .karte { margin-bottom: 0; }
.spalten { margin-bottom: 1.2rem; }

.knopf {
  display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: .5rem .95rem; border-radius: var(--r-mini); border: 1px solid var(--linie-feld); background: var(--karte); color: var(--text); line-height: 1.3;
}
.knopf:hover { border-color: var(--rot-dunkel); color: var(--rot-dunkel); }
.knopf-haupt { background: var(--rot-marke); border-color: var(--rot-marke); color: var(--karte); box-shadow: var(--schatten-rot); }
.knopf-haupt:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: var(--karte); }
.knopf-zweit { background: var(--stahl); border-color: var(--stahl); color: var(--karte); }
.knopf-zweit:hover { background: var(--merkur); border-color: var(--merkur); color: var(--karte); }
.knopf-gefahr { background: var(--rot); border-color: var(--rot); color: var(--karte); }
.knopf-klein { padding: .3rem .65rem; font-size: var(--t-beschriftung); font-weight: 500; white-space: nowrap; }
.knopf[disabled] { opacity: .6; cursor: progress; }
.link-knopf { background: none; border: 0; padding: 0; font: inherit; color: var(--akzent); cursor: pointer; text-decoration: underline; text-align: left; }
.aktionen { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--stahl); outline-offset: 1px;
}

.marke-klein { display: inline-block; font-size: var(--t-mikro); font-weight: 600; padding: .12rem .5rem; border-radius: var(--r-rund); white-space: nowrap; }
.marke-klein.gruen { background: var(--gruen-hell); color: var(--gruen); }
.marke-klein.gelb { background: var(--gelb-hell); color: var(--gelb); }
.marke-klein.rot { background: var(--rot-hell); color: var(--rot); }
.marke-klein.blau { background: var(--blau-hell); color: var(--blau); }
.marke-klein.grau { background: var(--grau-hell); color: var(--text-leise); }

.meldungen { margin-bottom: 1.2rem; display: grid; gap: .5rem; }
.meldung { padding: .7rem 1rem; border-radius: var(--r-klein); border: 1px solid; }
.meldung-erfolg { background: var(--gruen-hell); border-color: var(--gruen-linie); color: var(--gruen-dunkel); }
.meldung-fehler { background: var(--rot-hell); border-color: var(--rot-linie); color: var(--rot-tief); }
.meldung-hinweis { background: var(--gelb-hell); border-color: var(--gelb-linie); color: var(--gelb-dunkel); }

/* Formulare */
label, legend { display: block; font-weight: 600; font-size: var(--t-klein); margin: .7rem 0 .25rem; padding: 0; }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=date], select, textarea {
  width: 100%; font: inherit; padding: .48rem .6rem; border: 1px solid var(--linie-feld); border-radius: var(--r-klein); background: var(--karte); color: var(--text);
}
textarea { resize: vertical; }
input[type=file] { font: inherit; max-width: 100%; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hilfe { color: var(--text-leise); font-size: var(--t-beschriftung); margin: .3rem 0 0; }
.pflicht { font-weight: 500; font-size: var(--t-mikro); color: var(--rot); margin-left: .3rem; }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .2rem 1.4rem; }
.feld-langtext, .feld-mehrfach { grid-column: 1 / -1; }
.optionen { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.option { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0; padding: .3rem .65rem; border: 1px solid var(--linie); border-radius: var(--r-rund); background: var(--flaeche-hell); cursor: pointer; font-size: var(--t-klein); }
.option:has(input:checked) { background: var(--stahl-zart); border-color: var(--stahl); }
.mit-einheit { display: flex; align-items: center; gap: .5rem; }
.mit-einheit input { max-width: 8rem; }
.mit-einheit span { color: var(--text-leise); font-size: var(--t-klein); white-space: nowrap; }
.abschnitt-intern { background: var(--intern); border-color: var(--gelb-linie); }
.fragebogen .aktionen { position: sticky; bottom: 0; background: var(--flaeche); padding: .8rem 0; margin-top: .6rem;
  box-shadow: 0 -12px 12px -12px rgba(16, 24, 40, .18); }
.fragebogen > .karte.mittel:last-of-type { margin-bottom: .4rem; }      /* 0.45: Leiste verdeckt die Niederlassung nicht */
.stationen { margin-top: 1rem; border-top: 1px solid var(--linie); padding-top: .2rem; }
.station { display: grid; grid-template-columns: 7rem 7rem 1.4fr 1.4fr 1fr auto; gap: .4rem; margin-bottom: .4rem; align-items: center; }
.station-profil { grid-template-columns: 6.5rem 6.5rem 1fr 1fr; padding-bottom: .6rem; border-bottom: 1px dashed var(--linie); }
.station-profil input[name=station_arbeitgeber_anonym], .station-profil .breit { grid-column: 1 / 4; }
.station-profil .knopf { justify-self: start; }
.kompakt label:first-of-type { margin-top: 0; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.kompakt .knopf, .hochladen .knopf, .anmeldung .knopf, .schmal .knopf { margin-top: .9rem; }
.stelle-neu { margin-top: 1.2rem; border-top: 1px solid var(--linie); padding-top: 1rem; max-width: 46rem; }
.suche { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; max-width: 36rem; }
.anmeldung { width: min(380px, 92vw); }

/* Tabellen */
table { border-collapse: collapse; width: 100%; font-size: var(--t-klein); }
th { text-align: left; font-size: var(--t-mikro); font-weight: 600; color: var(--text-leise); padding: .55rem .6rem; border-bottom: 1px solid var(--linie); }
td { padding: .55rem .6rem; border-bottom: 1px solid var(--flaeche); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th.zahl, td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr.gesperrt td { color: var(--text-leise); }
table.schlicht td { border: 0; padding: .2rem .8rem .2rem 0; }
.zeilen-aktionen { display: flex; gap: .8rem; flex-wrap: wrap; }

/* Übersicht */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
a.kachel:hover { border-color: var(--akzent); }
.kachel-zahl { font-size: var(--t-titel); font-weight: 700; color: var(--rot-marke); line-height: 1.1; }
.kachel-text { color: var(--text-leise); font-size: var(--t-klein); }
.schritte { padding-left: 1.2rem; margin: 0 0 1rem; display: grid; gap: .4rem; }

/* Bewerber */
.ablauf { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 1.2rem; flex-wrap: wrap; }
.ablauf li { display: flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .4rem; border-radius: var(--r-rund); background: var(--grau-hell); color: var(--text-leise); font-size: var(--t-klein); }
.ablauf li span { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--karte); display: grid; place-items: center; font-weight: 700; font-size: var(--t-mikro); }
.ablauf li.erledigt { background: var(--gruen-hell); color: var(--gruen); font-weight: 600; }
.dateien { list-style: none; padding: 0; margin: 0 0 1rem; }
.dateien li { display: flex; gap: .7rem; align-items: baseline; padding: .4rem 0; border-bottom: 1px solid var(--flaeche); flex-wrap: wrap; }
.dateien li form { margin-left: auto; }
.hochladen { border-top: 1px solid var(--linie); padding-top: .4rem; }
.angaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .6rem 2rem; }
.angaben h3 { margin-top: .6rem; color: var(--rot-dunkel); }
.angaben-gruppe.intern h3::after { content: " · nur intern"; font-weight: 400; color: var(--text-leise); }
dl { margin: 0; display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: .2rem .8rem; font-size: var(--t-klein); }
dt { color: var(--text-leise); }
dd { margin: 0; }
.lauf { margin: 1rem 0 .4rem; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); }
.lauf dt { overflow-wrap: break-word; hyphens: auto; }   /* 0.42.2: lange Begriffe überlappen die Werte nicht */
dd { min-width: 0; overflow-wrap: anywhere; }

/* Matching */
.matching-start { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.filter { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter a { padding: .35rem .8rem; border-radius: var(--r-rund); background: var(--karte); border: 1px solid var(--linie); text-decoration: none; color: var(--text); font-size: var(--t-klein); }
.filter a.aktiv { background: var(--text); border-color: var(--text); color: var(--karte); }
.filter a .zahl-marke { display: inline-block; min-width: 1.4rem; margin-left: .3rem; padding: 0 .35rem; border-radius: var(--r-rund); background: var(--grau-hell); color: var(--text-leise); font-size: var(--t-mikro); text-align: center; }
.filter a.aktiv .zahl-marke { background: rgba(255,255,255,.2); color: var(--karte); }
.treffer { scroll-margin-top: 1rem; }
.treffer.status-verworfen, .treffer.status-kein_interesse { opacity: .7; }
.treffer:target { border-color: var(--stahl); box-shadow: 0 0 0 3px var(--stahl-zart); }
.treffer-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; }
.treffer-titel h2 { margin: 0; font-size: var(--t-abschnitt); }
.treffer-titel p { margin: 0; }
.treffer-marken { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.punkte { width: 3.1rem; height: 3.1rem; border-radius: var(--r-huelle); display: grid; place-items: center; font-weight: 700; font-size: var(--t-abschnitt); }
.punkte.hoch { background: var(--gruen-hell); color: var(--gruen); }
.punkte.mittel { background: var(--gelb-hell); color: var(--gelb); }
.punkte.niedrig { background: var(--grau-hell); color: var(--text-leise); }
.begruendung { margin: .8rem 0 .4rem; }
.treffer-hinweise { margin: 0 0 .6rem; padding-left: 1.2rem; color: var(--gelb); font-size: var(--t-klein); }
.firmen-kontakt, .karriere-stellen { margin: 0 0 .6rem; font-size: var(--t-klein); }
.firmen-kontakt .symbol { width: 16px; height: 16px; vertical-align: -3px; }
.aufhaenger { background: var(--stahl-zart); border: 1px solid var(--stahl-linie); border-radius: var(--radius); padding: .7rem 1rem; margin: .6rem 0 .9rem; }
.aufhaenger-titel { font-size: var(--t-mikro); color: var(--blau); font-weight: 600; }
.aufhaenger p { margin: .15rem 0 .5rem; }
.treffer-status { display: grid; grid-template-columns: auto 13rem 1fr auto auto; gap: .5rem; align-items: center; }
.treffer-status label { margin: 0; }

@media (max-width: 860px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste { position: sticky; height: auto; z-index: 10; padding: .6rem .8rem; border-right: 0; border-bottom: 1px solid var(--linie); }
  .seitenleiste-kopf { margin-bottom: 0; }
  .menue-knopf { display: inline-flex; }
  .hauptmenue { display: none; padding-top: 1rem; }
  .seitenleiste.offen .hauptmenue { display: flex; }
  .inhalt { padding: 1.2rem 1rem 3rem; }
  .station, .station-profil, .treffer-status, .zweispaltig { grid-template-columns: 1fr; }
  .station-profil input[name=station_arbeitgeber_anonym], .station-profil .breit { grid-column: auto; }
  .treffer-kopf { grid-template-columns: auto 1fr; }
  .treffer-marken { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Fassung 0.2: Menügruppen, Ablauf, Profil erstellen */
.weg { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.weg li { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; align-items: flex-start; }
.weg li p { flex: 1; color: var(--text-leise); }
.weg h2, .weg h3 { margin: .5rem 0 .3rem; font-size: 1rem; }
.weg-nummer { width: 2rem; height: 2rem; border-radius: 50%; background: var(--rot-marke); color: var(--karte); display: grid; place-items: center; font-weight: 700; }
.weg-klein { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.weg-klein li { border: 0; padding: 0; background: none; }
.weg-klein li p { font-size: var(--t-klein); margin: 0; }
.klappe { border: 1px solid var(--linie); border-radius: var(--r-klein); padding: 0 1rem; margin-top: .7rem; background: var(--flaeche-hell); }
.klappe[open] { padding-bottom: 1rem; }
.klappe summary { cursor: pointer; font-weight: 600; padding: .7rem 0; }
.klappe .abschnitt { border-top: 1px solid var(--linie); margin-top: 1rem; padding-top: .2rem; }
.klappe .abschnitt-intern { background: var(--intern); border: 1px solid var(--gelb-linie); border-radius: var(--r-klein); padding: .2rem 1rem 1rem; }
.ablage { display: block; width: 100%; padding: 1.4rem 1rem; border: 2px dashed var(--stahl-hell); border-radius: var(--r-klein); background: var(--stahl-zart); }
.knopf-gross { padding: .75rem 1.6rem; font-size: 1rem; }
.karte-naechster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; border-color: var(--gruen-linie); background: var(--gruen-zart); }
.felder-vier { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.karte.mittel { max-width: 44rem; }
.aktionen-fest { position: sticky; bottom: 0; background: var(--flaeche); padding: .8rem 0; margin: 0 0 1.2rem; z-index: 2; }
.reihe { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.option-leer { border-style: dashed; color: var(--text-leise); }
.abstand-oben { margin-top: 1rem; }
.kopfzeile .unterzeile { max-width: 44rem; margin-bottom: 0; }
.profil-formular .karte h2 { margin-bottom: .3rem; }

/* Fassung 0.3: Anmeldung */
.anmeldung { padding: 1.8rem 1.8rem 1.6rem; box-shadow: 0 12px 32px rgba(20, 28, 40, .12); border: 0; }
.anmeldung-kopf { margin-bottom: 1.2rem; }
.anmeldung-kopf .logo { width: 120px; }
.knopf-breit { width: 100%; justify-content: center; }

/* Fassung 0.3: Reiter, Kopfkarten, leere Zustände */
.reiter { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--nebel); margin: .4rem 0 1.2rem; overflow-x: auto; }
.reiter a { padding: .55rem 0 .6rem; text-decoration: none; color: var(--text-leise); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.reiter a:hover { color: var(--text); }
.reiter a.aktiv { color: var(--rot-dunkel); border-bottom-color: var(--rot-marke); font-weight: 600; }
.zahl-marke { display: inline-block; min-width: 1.4rem; margin-left: .4rem; padding: 0 .4rem; border-radius: var(--r-rund); background: var(--grau-hell); color: var(--text-leise); font-size: var(--t-mikro); text-align: center; font-weight: 600; }
.reiter a.aktiv .zahl-marke { background: var(--rot-zart); color: var(--rot-dunkel); }
.leer-karte { background: var(--karte); border: 1px dashed var(--nebel); border-radius: var(--radius); padding: 1.6rem 1.4rem; color: var(--text-leise); margin-bottom: 1.2rem; }
.leer-karte p:last-child { margin-bottom: 0; }
.leer-karte .knopf { margin-top: .2rem; }
.rechts { text-align: right; }
td.rechts form { display: inline; }
.zwischen { justify-content: space-between; }
.spalten-breit { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; }
.spalten-breit > div > .karte:last-child { margin-bottom: 0; }

.kopfkarte { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.kopfkarte-profil .kopfkarte { margin-bottom: 1rem; }
.kopfkarte-text { flex: 1; min-width: 14rem; }
.kopfkarte-text h1 { margin-bottom: .15rem; }
.kopfkarte-text .unterzeile { margin: 0; }
.kuerzel-gross { width: 3.2rem; height: 3.2rem; font-size: var(--t-abschnitt); background: var(--rot-marke); }
.kopfkarte-profil { border-top: 4px solid var(--rot-marke); }
.kopfkarte-fuss { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--linie); padding-top: .9rem; margin-top: 1rem; }
.schrittleiste { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; padding: 0; margin: 0; counter-reset: schritt; }
.schrittleiste li { display: flex; align-items: center; gap: .5rem; font-size: var(--t-klein); color: var(--text-leise); padding-top: .55rem; border-top: 3px solid var(--nebel); }
.schrittleiste li span { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--grau-hell); display: grid; place-items: center; font-weight: 700; font-size: var(--t-mikro); flex: none; }
.schrittleiste li span .symbol { width: 14px; height: 14px; }
.schrittleiste li.erledigt { color: var(--text); border-top-color: var(--stahl); }
.schrittleiste li.erledigt span { background: var(--stahl); color: var(--karte); }
.schrittleiste li.jetzt { color: var(--rot-dunkel); font-weight: 600; border-top-color: var(--rot-marke); }
.schrittleiste li.jetzt span { background: var(--rot-marke); color: var(--karte); }
.sprungmarken { position: sticky; top: 0; z-index: 3; display: flex; gap: .3rem; flex-wrap: wrap; background: var(--flaeche); padding: .5rem 0; margin-bottom: .8rem; }
.sprungmarken a { padding: .25rem .7rem; border-radius: var(--r-rund); background: var(--karte); border: 1px solid var(--linie); text-decoration: none; color: var(--text); font-size: var(--t-beschriftung); }
.sprungmarken a:hover { border-color: var(--stahl); }
.karte[id], .aktionen-fest { scroll-margin-top: 3.5rem; }
.klappe-karte > summary { cursor: pointer; list-style: none; display: flex; align-items: center; }
.klappe-karte > summary::-webkit-details-marker { display: none; }
.klappe-karte > summary h2 { margin: 0; }
.klappe-karte > summary::after { content: "+"; margin-left: auto; font-size: var(--t-zwischen); color: var(--text-leise); }
.klappe-karte[open] > summary::after { content: "–"; }
.klappe-karte[open] > summary { margin-bottom: .8rem; }

/* Übersicht */
.willkommen { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.6rem 1.8rem; margin-bottom: 1.2rem; }
.willkommen .unterzeile { margin: 0; max-width: 40rem; }
.abschnitt-titel { font-family: var(--schrift-titel); font-size: var(--t-abschnitt); font-weight: 600; letter-spacing: -.01em; color: var(--text); margin: 2rem 0 .8rem; }
.aufgaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.aufgabe { margin-bottom: 0; }
.aufgabe h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; }
.aufgabe .weg-nummer { width: 1.6rem; height: 1.6rem; font-size: var(--t-beschriftung); }
.aufgabe ul { list-style: none; margin: 0; padding: 0; }
.aufgabe li a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: .5rem; padding: .5rem .3rem; border-top: 1px solid var(--linie); text-decoration: none; color: var(--text); }
.aufgabe li a:hover { background: var(--flaeche); }
.aufgabe li a span { color: var(--text-leise); font-size: var(--t-beschriftung); grid-column: 1; }
.aufgabe li a .symbol { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--text-leise); }

/* Treffer: Stand mit einem Klick */
.treffer-stand { border-top: 1px solid var(--linie); padding-top: .8rem; }
.stand-knoepfe { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.stand-titel { font-size: var(--t-beschriftung); font-weight: 600; color: var(--text-leise); margin-right: .3rem; }
.stand-knopf { display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: var(--t-beschriftung); padding: .28rem .7rem; border-radius: var(--r-rund); border: 1px solid var(--nebel); background: var(--karte); color: var(--text); cursor: pointer; }
.stand-knopf:hover { border-color: var(--stahl); }
.stand-knopf .symbol { width: 14px; height: 14px; }
.stand-knopf.gewaehlt { background: var(--stahl); border-color: var(--stahl); color: var(--karte); font-weight: 600; }
.stand-knopf.stand-einsatz.gewaehlt, .stand-knopf.stand-vorgestellt.gewaehlt, .stand-knopf.stand-interesse.gewaehlt { background: var(--gruen); border-color: var(--gruen); }
.stand-knopf.stand-kein_interesse.gewaehlt, .stand-knopf.stand-verworfen.gewaehlt { background: var(--text-leise); border-color: var(--text-leise); }
.stand-knopf.stand-offen.gewaehlt { background: var(--grau-hell); border-color: var(--nebel); color: var(--text); }
.notiz-reihe input { flex: 1; min-width: 14rem; }

@media (max-width: 860px) {
  .schrittleiste { grid-template-columns: 1fr 1fr; }
  .spalten-breit { grid-template-columns: 1fr; }
}
.abstand-unten { margin-bottom: 1rem; }
.nav-admin { margin-bottom: .4rem; font-size: var(--t-klein); }

/* Fassung 0.5: Word-Profil */
.kopfzeile-eng { margin-bottom: .4rem; }
.word-zeilen { display: grid; gap: .2rem; }
.word-zeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.word-titel { min-width: 16rem; flex: 1; }
.word-titel .marke-klein { margin-left: .4rem; }
.word-aktionen { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.word-aktionen form { margin: 0; }
.datei-knopf { position: relative; overflow: hidden; margin: 0; font-weight: 500; }
.datei-knopf input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.link-klein { font-size: var(--t-beschriftung); }
.hinweis-text { color: var(--gelb); font-size: var(--t-beschriftung); margin-top: .2rem; }

/* Fassung 0.5: Suche, Sortierung, Filter */
.werkzeugleiste { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; margin-bottom: 1rem; }
.suche-breit { flex: 1 1 26rem; max-width: none; margin: 0; }
.sortierung { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 500; font-size: var(--t-klein); }
.sortierung select { width: auto; }
.filter-klappe { flex-basis: auto; }
.filter-klappe > summary { list-style: none; }
.filter-klappe > summary::-webkit-details-marker { display: none; }
.filter-klappe[open] { flex-basis: 100%; order: 3; }
.filter-klappe[open] > summary { border-color: var(--rot-dunkel); color: var(--rot-dunkel); }
.filter-feld { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: .6rem; }
.filter-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .4rem 1rem; }
.filter-gitter label, .feld-titel { margin: 0; font-size: var(--t-beschriftung); display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.umkreis-feld .reihe { flex-wrap: nowrap; gap: .4rem; }
.umkreis-feld input { width: 6rem; }
.umkreis-feld select { width: auto; }

/* Fassung 0.5: Punkte erklärt */
.punkte-erklaerung { margin: .2rem 0 .8rem; }
.punkte-erklaerung summary { cursor: pointer; color: var(--rot-dunkel); font-size: var(--t-klein); font-weight: 600; }
.punkte-tabelle { margin-top: .5rem; font-size: var(--t-beschriftung); }
.punkte-tabelle th { text-transform: none; letter-spacing: 0; color: var(--text); font-size: var(--t-beschriftung); font-weight: 600; white-space: nowrap; border: 0; padding: .3rem .6rem .3rem 0; }
.punkte-tabelle td { border: 0; padding: .3rem .6rem; vertical-align: middle; }
.punkte-tabelle tr.summe th, .punkte-tabelle tr.summe td { border-top: 1px solid var(--linie); }
.balken-zelle { width: 9rem; }
.balken { display: block; height: .55rem; background: var(--grau-hell); border-radius: var(--r-rund); overflow: hidden; }
.balken-wert { display: block; height: 100%; background: var(--stahl); border-radius: var(--r-rund); }
.balken-0 { width: 0%; }
.balken-10 { width: 10%; }
.balken-20 { width: 20%; }
.balken-30 { width: 30%; }
.balken-40 { width: 40%; }
.balken-50 { width: 50%; }
.balken-60 { width: 60%; }
.balken-70 { width: 70%; }
.balken-80 { width: 80%; }
.balken-90 { width: 90%; }
.balken-100 { width: 100%; }
.punkte-tabelle td.zahl { white-space: nowrap; }
.schlichte-liste { list-style: none; padding: 0; margin: 0 0 .8rem; } .schlichte-liste li { padding: .35rem 0; border-bottom: 1px solid var(--linie); }

/* Fassung 0.6: Kontaktverlauf, Wiedervorlagen, Profil senden */
.hinweis-kasten { background: var(--gelb-hell); border: 1px solid var(--gelb-linie); border-radius: var(--radius); padding: .7rem 1rem; margin: .7rem 0; }
.hinweis-kasten strong { display: flex; align-items: center; gap: .35rem; color: var(--gelb); }
.hinweis-kasten ul { margin: .35rem 0 0; }
.treffer-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0; }
.kontakt-doku { border: 1px solid var(--linie); border-radius: var(--radius); padding: .5rem .8rem; margin: .5rem 0; background: var(--karte); }
.kontakt-doku > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .35rem; color: var(--akzent); }
.kontakt-doku[open] > summary { margin-bottom: .6rem; }
.kontakt-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.kontakt-gitter label, .kontakt-doku label { margin: 0; }
.kontakt-doku textarea { width: 100%; }
.kontakt-verlauf { margin: .6rem 0 .2rem; }
.kontakt-verlauf ol { list-style: none; margin: .3rem 0 0; padding: 0 0 0 .9rem; border-left: 1px solid var(--linie-stark); }
.kontakt-verlauf li { position: relative; padding: .25rem 0 .55rem .2rem; }
.kontakt-verlauf li::before { content: ""; position: absolute; left: -1.27rem; top: .62rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--stahl); }
.kontakt-verlauf li p { margin: .15rem 0; }
.kontakt-verlauf .nebenbei { display: block; }
form.inline { display: inline-flex; margin-left: .4rem; vertical-align: middle; }
.versand-schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 0; }
.versand-schritte > li { counter-increment: schritt; position: relative; padding: .2rem 0 1rem 2.6rem; }
.versand-schritte > li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--rot-marke); color: var(--karte); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.versand-schritte h2 { font-size: 1rem; margin: .15rem 0 .4rem; }
.versand-schritte textarea { width: 100%; }
.faellig-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.faellig-liste li:last-child { border-bottom: 0; }
.faellig-liste .platz { flex: 1 1 14rem; }

/* Fassung 0.8: Zeiterfassung */
.oeffentlich { background: var(--flaeche); }
.oeffentlich-inhalt { max-width: 760px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.oeffentlich-kopf { padding: .4rem 0 1rem; }
.oeffentlich-kopf .logo { width: 110px; }
.schmal { max-width: 440px; margin-left: auto; margin-right: auto; }
.wochen-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 1rem; }
.werkzeugleiste .wochen-nav { margin: 0; }
.zeitraum-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.zeitraum-kopf h2 { margin: 0; }
.tage { display: grid; gap: .55rem; margin-top: .8rem; }
.tag { border: 1px solid var(--linie); border-radius: var(--radius); padding: .55rem .7rem; background: var(--karte); }
.tag-heute { border-color: var(--stahl); box-shadow: 0 0 0 1px var(--stahl); }
.tag-frei { background: var(--flaeche); color: var(--text-leise); }
.tag-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.tag-kopf .nebenbei { flex: 1 1 auto; }
.tag-summe { font-weight: 700; }
.tag-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; margin-top: .45rem; }
.tag-felder label { margin: 0; font-size: var(--t-beschriftung); }
.tag-felder input { width: 100%; min-width: 0; font-size: 1rem; padding: .45rem .35rem; }
.tag-hinweis { margin: .35rem 0 0; color: var(--gelb); font-size: var(--t-beschriftung); }
.tag-hinweis::before { content: "⚠ "; }
.zeitraum-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .9rem; font-weight: 600; }
.zeitraum-fuss .aktionen { margin: 0; }
.tabellen-rollbar { overflow-x: auto; position: relative; }
.zeiten-tabelle { width: 100%; border-collapse: collapse; }
.zeiten-tabelle th, .zeiten-tabelle td { padding: .35rem .5rem; border-bottom: 1px solid var(--linie); text-align: left; }
.zeiten-tabelle tfoot th { border-bottom: 0; }
.zeiten-uebersicht td.leer { background: var(--flaeche); }
.zeiten-uebersicht th, .zeiten-uebersicht td.rechts { white-space: nowrap; }
.zeiten-uebersicht td { vertical-align: top; }
.zeiten-uebersicht td:nth-child(2) { min-width: 9rem; }
td.rechts, th.rechts { text-align: right; }
.karte-titel { font-size: 1rem; margin: 0 0 .6rem; }
.kachel-rot .kachel-zahl { color: var(--rot); }
.kachel-gelb .kachel-zahl { color: var(--gelb); }
.kachel-blau .kachel-zahl { color: var(--blau); }
.kachel-gruen .kachel-zahl { color: var(--gruen); }
.kachel-grau .kachel-zahl { color: var(--text-leise); }
.einsatz-liste { list-style: none; margin: .4rem 0 0; padding: 0; }
.einsatz-liste li { display: flex; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.post summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.mailtext { white-space: pre-wrap; font-family: inherit; font-size: var(--t-klein); background: var(--flaeche); padding: .7rem; border-radius: var(--radius); margin: .7rem 0 0; }
.text-warnung { color: var(--rot); }
@media (max-width: 520px) {
  .tag-felder { gap: .3rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pause-zeile input[type=time]::-webkit-calendar-picker-indicator { display: none; }
  .tag-felder input[type=time]::-webkit-calendar-picker-indicator { display: none; }
  .tag-felder label { font-size: var(--t-mikro); }
}

.vermerk-feld input { width: 100%; }
.feld-fehler { color: var(--rot); }
.feld-fehler input { border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-hell); }
.kundensuche { position: relative; }
.kundensuche input[type=text] { width: 100%; }
.vorschlaege { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: .25rem 0; list-style: none; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 8px 22px rgba(20, 28, 40, .12); max-height: 18rem; overflow-y: auto; }
.vorschlaege li { padding: .45rem .7rem; cursor: pointer; display: flex; flex-direction: column; }
.vorschlaege li.markiert, .vorschlaege li:hover { background: var(--rot-zart); }
.vorschlaege li.leer { cursor: default; color: var(--text-leise); }
.kunde-info { margin: .3rem 0 0; min-height: 1.2em; }
.stand-zelle form { margin-top: .3rem; }
.stand-zelle .link-knopf { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.stand-zelle .symbol { width: 16px; height: 16px; }

/* Cockpit (Fassung 0.10) */
.cockpit-kopf { align-items: center; margin-bottom: .4rem; }
.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.knopfreihe form { margin: 0; }
.datenstand { color: var(--text-leise); font-size: var(--t-beschriftung); margin-bottom: 1rem; }
.hinweis-karte { background: var(--gelb-hell); border: 1px solid var(--gelb-linie); border-radius: var(--radius); padding: .9rem 1.2rem; margin-bottom: 1.2rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hinweis-karte p { margin: 0; max-width: 52rem; }
.kennzahlen { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.kennzahlen .kachel { gap: .15rem; }
.kennzahlen .kachel-zahl { font-size: var(--t-kennzahl-klein); color: var(--text); }
.kennzahlen .kachel-rot .kachel-zahl { color: var(--rot); }
.kachel-zahl small { font-size: var(--t-klein); font-weight: 500; color: var(--text-leise); }
.kachel-titel { font-size: var(--t-beschriftung); color: var(--text-leise); font-weight: 600; }
.trend { font-weight: 600; }
.trend.plus { color: var(--gruen); }
.trend.minus { color: var(--rot); }
.karten-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.karten-kopf h2 { margin: 0; }
.diagramm { width: 100%; height: auto; display: block; }
.diagramm .raster { stroke: var(--linie); stroke-width: 1; }
.diagramm .grundlinie { stroke: var(--nebel); stroke-width: 1; }
.diagramm .achse { fill: var(--text-leise); font-size: var(--t-diagramm); }
.diagramm .reihe-a { fill: var(--blau); }
.diagramm .reihe-b { fill: var(--linie-feld); }
.diagramm .vorlaeufig { fill: var(--stahl); }
.diagramm rect:hover { opacity: .8; }
.legende { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: var(--t-beschriftung); color: var(--text-leise); margin: .3rem 0 .8rem; }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-mini); margin-right: .4rem; vertical-align: -1px; }
.legende .farbe-a { background: var(--blau); }
.legende .farbe-b { background: var(--linie-feld); }
.legende .farbe-a.vorlaeufig { background: var(--stahl); }
.zahlenreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem 1rem; border-top: 1px solid var(--linie); padding-top: .8rem; }
.zahlenreihe span { display: block; font-size: var(--t-beschriftung); color: var(--text-leise); }
.zahlenreihe strong { font-size: var(--t-abschnitt); }
.tabelle-klappe { margin-top: .8rem; }
.tabelle-klappe summary { cursor: pointer; color: var(--akzent); font-size: var(--t-klein); }
.tabelle-klappe table { margin-top: .6rem; }
.kennzahl-tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-klein); margin-bottom: .8rem; }
.kennzahl-tabelle th { text-align: left; font-size: var(--t-mikro); color: var(--text-leise); font-weight: 600; border-bottom: 1px solid var(--linie); padding: .3rem .4rem; }
.kennzahl-tabelle td { border-bottom: 1px solid var(--grau-hell); padding: .35rem .4rem; }
.kennzahl-tabelle .rechts, .tabellen-karte .rechts { text-align: right; white-space: nowrap; }
.zweispaltig.breit { gap: 0 1.6rem; }
.altersliste { list-style: none; padding: 0; margin: 0 0 .6rem; }
.altersliste li { display: grid; grid-template-columns: 8.5rem 1fr 9.5rem; gap: .6rem; align-items: center; padding: .3rem 0; }
.alter-balken { width: 100%; height: 12px; display: block; }
.alter-grund { fill: var(--grau-hell); }
.alter-flaeche { fill: var(--blau); }
.altersliste li.warnung .alter-flaeche { fill: var(--rot); }
.alter-name { font-size: var(--t-klein); }
.alter-wert { text-align: right; font-weight: 600; font-size: var(--t-klein); }
.alter-wert small { font-weight: 400; color: var(--text-leise); }
.rot-text { color: var(--rot); }
.gelb-text { color: var(--gelb); font-weight: 600; }
.tabelle-scroll { overflow-x: auto; }
.tabelle-scroll table { min-width: 1050px; }
.tabelle-scroll td:first-child { min-width: 11rem; }
.erklaerung li { margin-bottom: .5rem; }
.zeile-formular { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.zeile-formular label { margin: 0; }
.zeile-formular select { width: auto; }
.zeile-formular .knopf { margin-top: 0; }
.betrag-feld { max-width: 12rem; text-align: right; }
@media (max-width: 520px) {
  .altersliste li { grid-template-columns: 1fr; gap: .1rem; }
  .alter-wert { text-align: left; }
}
.cockpit-auswahl { display: flex; flex-direction: column; gap: .4rem; }
.filter-klein a { font-size: var(--t-beschriftung); padding: .2rem .65rem; }
.pipeline { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .4rem; padding: 0; margin: 0 0 .9rem; counter-reset: stufe; }
.pipeline li { background: var(--stahl-zart); border-radius: var(--radius); padding: .6rem .7rem; position: relative; }
.pipeline li strong { display: block; font-size: var(--t-zwischen); line-height: 1.1; }
.pipeline li span { font-size: var(--t-mikro); color: var(--text-leise); }
.kachel-gelb .kachel-zahl { color: var(--gelb); }
.kachel-gruen .kachel-zahl { color: var(--gruen); }
.gruen-text { color: var(--gruen); }
.summenzeile td { border-top: 2px solid var(--linie); font-weight: 600; }
.plan-feld { width: 3.6rem; padding: .25rem .3rem; text-align: right; }
.planungs-tabelle td, .planungs-tabelle th { padding: .25rem .2rem; }
.diagramm .wert { fill: var(--text); font-size: var(--t-diagramm); font-weight: 600; }
.mini-tabelle { border-collapse: collapse; font-size: var(--t-mikro); margin: .2rem 0 .9rem; width: 100%; }
.mini-tabelle th, .mini-tabelle td { padding: .15rem .3rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--grau-hell); }
.mini-tabelle thead th { color: var(--text-leise); font-weight: 600; }
.mini-tabelle tbody th { text-align: left; color: var(--text-leise); font-weight: 600; }
.mini-tabelle .vorschau { color: var(--text-leise); font-style: italic; }
.mini-tabelle .ist-zeile td, .mini-tabelle .ist-zeile th { border-bottom: 1px solid var(--linie); font-weight: 600; }
.db1-liste { font-size: var(--t-klein); margin-bottom: .6rem; }
.db1-zeile { display: grid; grid-template-columns: minmax(7rem, 1.4fr) repeat(4, minmax(5.5rem, 1fr)); gap: .5rem; padding: .35rem .4rem; border-bottom: 1px solid var(--grau-hell); }
.db1-zeile > span:not(:first-child) { text-align: right; white-space: nowrap; }
.db1-kopf { font-size: var(--t-mikro); color: var(--text-leise); font-weight: 600; border-bottom: 1px solid var(--linie); }
.db1-monat > summary { cursor: pointer; list-style: none; }
.db1-monat > summary::-webkit-details-marker { display: none; }
.db1-monat > summary > span:first-child::before { content: ""; display: inline-block; width: .42em; height: .42em; margin: 0 .55em .12em .1em; border-right: 1.6px solid var(--text-leise); border-bottom: 1.6px solid var(--text-leise); transform: rotate(-45deg); transition: transform var(--uebergang); }
.db1-monat[open] > summary > span:first-child::before { transform: rotate(45deg); }
.db1-nl { font-size: var(--t-beschriftung); color: var(--text-leise); background: var(--flaeche); }
.db1-nl > span:first-child { padding-left: 1.1rem; }
.bausteine.anpassen .baustein { border: 2px dashed var(--nebel); border-radius: var(--radius); padding: .4rem; margin-bottom: 1rem; background: var(--karte); }
.bausteine.anpassen .baustein > .karte { margin-bottom: 0; max-height: 220px; overflow: hidden; opacity: .75; }
.baustein-steuerung { display: flex; align-items: center; gap: .4rem; padding: .2rem .3rem .5rem; }
.baustein-steuerung form { margin: 0; }
.baustein-steuerung .platz { flex: 1; }
.griff { cursor: grab; font-size: var(--t-zwischen); color: var(--text-leise); padding: 0 .3rem; }
.baustein.zieht { opacity: .4; }
.baustein.ziel-oben { border-top: 4px solid var(--blau) !important; }
.baustein.ziel-unten { border-bottom: 4px solid var(--blau) !important; }
.anpassen-hilfe li { display: flex; align-items: center; gap: .6rem; }
.anpassen-hilfe li .platz { flex: 1; }
.anpassen-hilfe form { margin: 0; }

/* Pausen mit Uhrzeit (Fassung 0.14) */
.pausen { margin-top: .4rem; }
.pause-zeile { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) 1.4rem minmax(0, 1fr); gap: .35rem; align-items: center; }
.pause-zeile label { margin: 0; }
.pause-zeile input { width: 100%; min-width: 0; font-size: 1rem; padding: .4rem .35rem; }
.pause-name { font-size: var(--t-beschriftung); color: var(--text-leise); }
.pause-zeile .bis { font-size: var(--t-mikro); color: var(--text-leise); text-align: center; }
.zweite-pause { margin-top: .3rem; }
.zweite-pause > summary { font-size: var(--t-beschriftung); color: var(--akzent); cursor: pointer; list-style: none; }
.zweite-pause > summary::-webkit-details-marker { display: none; }
.zweite-pause > summary::before { content: "+ "; }
.zweite-pause[open] > summary { display: none; }
.pause-alt { margin: .3rem 0 0; font-size: var(--t-mikro); }

/* Fassung 0.15: Zeiterfassung als Wochenraster, Statuskette, schnelles Ausfüllen */
.kette { display: inline-flex; align-items: center; gap: .45rem; }
.kette-punkte { display: inline-flex; gap: 3px; }
.kette-punkte i { width: 14px; height: 6px; border-radius: var(--r-mini); background: var(--grau-hell); display: block; }
.kette-punkte i.erledigt { background: var(--gruen); }
.kette-punkte i.aktuell { background: var(--blau); }
.kette-punkte i.problem { background: var(--rot); }
.kette-text { font-size: var(--t-mikro); font-weight: 600; white-space: nowrap; }
.kette-text.gruen { color: var(--gruen); } .kette-text.gelb { color: var(--gelb); } .kette-text.rot { color: var(--rot); }
.kette-text.blau { color: var(--blau); } .kette-text.grau { color: var(--text-leise); }
.kette-gross { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.kette-gross li { position: relative; padding: .25rem .8rem .25rem 1.1rem; font-size: var(--t-beschriftung); color: var(--text-leise); background: var(--grau-hell);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); margin-right: -4px; }
.kette-gross li:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); padding-left: .8rem; }
.kette-gross li.erledigt { background: var(--gruen-hell); color: var(--gruen); }
.kette-gross li.aktuell { background: var(--blau); color: var(--karte); font-weight: 600; }
.kette-gross li.problem { background: var(--rot); color: var(--karte); }
.zeitraum-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

.kacheln-filter { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .6rem; }
.kacheln-filter .kachel { padding: .55rem .8rem; }
.kacheln-filter .kachel-zahl { font-size: var(--t-kennzahl-klein); }
.kacheln-filter .kachel-text { font-size: var(--t-beschriftung); }
.kacheln-filter .kachel.aktiv { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.kacheln-filter .kachel-null { opacity: .55; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.raster { border-collapse: collapse; width: 100%; }
.raster th { font-size: var(--t-mikro); text-align: left; white-space: nowrap; padding: .45rem .4rem; }
.raster th.heute { color: var(--blau); }
.raster td { vertical-align: top; padding: .4rem .35rem; border-top: 1px solid var(--linie); }
.raster-name { min-width: 10rem; max-width: 14rem; }
.raster td.zelle { min-width: 7.6rem; }
.raster td.zelle.leer { background: var(--flaeche); text-align: center; }
.raster td.zelle.heute { background: var(--stahl-zart); }
.raster td.zelle.fehlt { background: var(--rot-hell); }
.raster td.zelle.fehlt .zelle-info { color: var(--rot); font-weight: 600; }
.raster tr.gesperrt td { color: var(--text-leise); }
.zelle-zeile { display: flex; gap: 3px; }
.zelle-pause { margin-top: 3px; }
.zelle-info { font-size: var(--t-mikro); color: var(--text-leise); margin-top: 2px; white-space: nowrap; }
input.uhr { width: 3.6rem; padding: .3rem .25rem; font-size: var(--t-klein); text-align: center; font-variant-numeric: tabular-nums; }
input.uhr-klein { font-size: var(--t-mikro); padding: .18rem .2rem; background: var(--flaeche); }
.gefuellt input, .tag.gefuellt { background-color: var(--gruen-hell); transition: background-color .3s; }
.stand-zelle { min-width: 9.5rem; }
.stand-aktion { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin-top: .35rem; }
.raster-fuss { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: .7rem 1rem; margin: .6rem 0 1rem;
  box-shadow: 0 -4px 12px rgba(0,0,0,.05); }
.raster-fuss .vermerk-feld { flex: 1 1 20rem; margin: 0; }
.raster-fuss .vermerk-feld input { width: 100%; }
.feld-fehler input { border-color: var(--rot); box-shadow: 0 0 0 2px var(--rot-hell); }
.tag-fehlt { border-color: var(--rot); box-shadow: 0 0 0 1px var(--rot); }
.tag-knoepfe { display: inline-flex; gap: .6rem; }
.wochen-titel { padding: 0 .4rem; }
.schicht-form, .schicht-felder { gap: .35rem; align-items: center; margin-top: .4rem; flex-wrap: wrap; }
.schicht-felder { margin-bottom: .9rem; }

/* Hilfetexte hinter einem „?“ */
.hilfe-klappe { margin: .2rem 0 1rem; color: var(--text-leise); font-size: var(--t-beschriftung); }
.hilfe-klappe > summary { list-style: none; cursor: pointer; display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--nebel); align-items: center; justify-content: center; font-weight: 700; color: var(--text-leise); }
.hilfe-klappe > summary::-webkit-details-marker { display: none; }
.hilfe-klappe[open] > summary { border-color: var(--akzent); color: var(--akzent); }
.hilfe-klappe > p { margin: .5rem 0 0; max-width: 60rem; }

/* Administration in Gruppen */
.reiter-gruppen { align-items: flex-end; }
.reiter-gruppe { font-size: var(--t-mikro); font-weight: 600; color: var(--text-leise); padding-bottom: .75rem; white-space: nowrap; }
.reiter-gruppe:not(:first-child) { margin-left: .8rem; padding-left: 1.2rem; border-left: 1px solid var(--nebel); }

/* Fassung 0.15: Startseite „Heute zu tun“, globale Suche */
.globale-suche { position: relative; margin: 0 .2rem 1rem; }
.globale-suche .symbol { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); color: var(--text-leise); width: 16px; height: 16px; }
.globale-suche input { width: 100%; padding: .45rem .6rem .45rem 2rem; border-radius: var(--r-rund); border: 1px solid var(--linie); background: var(--flaeche); font-size: var(--t-klein); }
.globale-suche input:focus { background: var(--karte); border-color: var(--stahl); outline: none; }
.heute-zu-tun h2 { margin-bottom: .4rem; }
.zu-tun-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .2rem 1.2rem; }
.zu-tun-liste li > a, .zu-tun-liste li > div { display: flex; align-items: center; gap: .7rem; padding: .5rem .4rem; border-radius: var(--radius); text-decoration: none; color: var(--text); }
.zu-tun-liste li > a:hover { background: var(--flaeche); }
.zu-tun-liste li > a > .symbol { margin-left: auto; color: var(--text-leise); }
.zu-tun-zahl { flex: none; min-width: 2.1rem; height: 2.1rem; border-radius: var(--r-rund); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; padding: 0 .45rem; }
.zu-tun-zahl.rot { background: var(--rot-hell); color: var(--rot); } .zu-tun-zahl.gelb { background: var(--gelb-hell); color: var(--gelb); }
.zu-tun-zahl.blau { background: var(--blau-hell); color: var(--blau); }
.zu-tun-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.zu-tun-text .nebenbei { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-beschriftung); }
.such-liste li { display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; }

/* Bewerber in drei Schritten */
.schritt-reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.schritt-reiter a { display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none; color: var(--text); background: var(--flaeche); }
.schritt-reiter a:hover { border-color: var(--stahl); }
.schritt-reiter a.aktiv { background: var(--karte); border-color: var(--rot-marke); box-shadow: inset 0 -3px 0 var(--rot-marke); }
.schritt-reiter a > span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.schritt-reiter small { color: var(--text-leise); font-size: var(--t-mikro); }
.schritt-nr { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--grau-hell); font-weight: 700; font-size: var(--t-klein); }
.schritt-reiter a.aktiv .schritt-nr { background: var(--rot-marke); color: var(--karte); }
.schritt-reiter a.erledigt .schritt-nr { background: var(--gruen-hell); color: var(--gruen); }
.schritt-nr .symbol { width: 16px; height: 16px; vertical-align: 0; }
.vorschau-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.4rem; }
.marken-liste { list-style: none; margin: .2rem 0 .7rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.marken-liste li { background: var(--stahl-zart); border-radius: var(--r-rund); padding: .1rem .6rem; font-size: var(--t-beschriftung); }
.hinweis-kasten ul { margin: .2rem 0 .3rem 1.1rem; padding: 0; }
.kopfzeile-eng { margin-bottom: .4rem; }
.matching-start { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.hilfe-text { margin-top: .6rem; }

/* Kundenakte */
.akte-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.akte-kopf .karte { margin: 0; }
.akte-zahlen { margin: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.akte-zahlen .kachel-zahl { font-size: var(--t-kennzahl-klein); }
@media (max-width: 760px) {
  .akte-kopf, .vorschau-raster { grid-template-columns: 1fr; }
  .schritt-reiter { grid-template-columns: 1fr; }
}
.akte-zahlen { align-content: stretch; } .akte-zahlen .kachel { justify-content: center; }  /* 0.42.2: Kacheln füllen die Höhe, keine graue Leerfläche */

/* Fassung 0.16: Trefferliste kompakt – eine Zeile je Firma, Details per Klick */
.treffer-liste { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 1.2rem; }
.treffer-kopfzeile, .tz-details > summary { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 8.5rem 8.5rem 11rem 1.5rem; gap: .8rem; align-items: center; padding: .55rem 1rem; }
.treffer-kopfzeile { font-size: var(--t-mikro); color: var(--text-leise); font-weight: 600; border-bottom: 1px solid var(--linie); }
.treffer-kopfzeile span:nth-child(5) { grid-column: 5 / 7; }
.treffer-zeile { position: relative; border-bottom: 1px solid var(--linie); }
.tz-details, .tz-details > summary { scroll-margin-top: 1rem; }
.tz-pfeil .symbol { display: block; }
.treffer-zeile:last-child { border-bottom: 0; }
.tz-details > summary { list-style: none; cursor: pointer; }
.tz-details > summary::-webkit-details-marker { display: none; }
.tz-details > summary:hover { background: var(--flaeche); }
.tz-details[open] > summary { background: var(--stahl-zart); }
.treffer-zeile .punkte { width: 2.5rem; height: 2.5rem; font-size: 1rem; border-radius: var(--r-segment); }
.tz-firma, .tz-ort { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tz-firma strong { overflow: hidden; text-overflow: ellipsis; }
.tz-firma .marke-klein { align-self: flex-start; margin: .1rem 0; }
.tz-pfeil { color: var(--text-leise); transition: transform .15s; display: inline-flex; justify-content: center; }
.tz-details[open] .tz-pfeil { transform: rotate(180deg); }
.tz-stand { position: absolute; top: .65rem; right: 3.3rem; width: 11rem; margin: 0; }
.stand-wahl { width: 100%; padding: .3rem .4rem; font-size: var(--t-beschriftung); border-radius: var(--r-klein); }
.stand-wahl.stand-interesse, .stand-wahl.stand-vorgestellt, .stand-wahl.stand-einsatz { background: var(--gruen-hell); color: var(--gruen); border-color: var(--gruen-hell); font-weight: 600; }
.stand-wahl.stand-kontaktiert { background: var(--blau-hell); color: var(--blau); font-weight: 600; }
.stand-wahl.stand-kein_interesse, .stand-wahl.stand-verworfen { background: var(--grau-hell); color: var(--text-leise); }
.treffer-zeile.status-verworfen summary, .treffer-zeile.status-kein_interesse summary { opacity: .6; }
.tz-inhalt { padding: .3rem 1rem 1rem 4.8rem; }
.tz-inhalt .begruendung { margin: .4rem 0 .6rem; }
.kontakt-verlauf > summary { cursor: pointer; margin: .6rem 0 .3rem; }
@media (max-width: 760px) {
  .treffer-kopfzeile { display: none; }
  .tz-details > summary { grid-template-columns: 2.6rem minmax(0, 1fr) 1.2rem; padding-bottom: 3rem; }
  .tz-ort, .tz-einordnung, .tz-platz-stand { display: none; }
  .tz-stand { top: auto; bottom: .55rem; left: 4.2rem; right: auto; }
  .tz-inhalt { padding-left: 1rem; }
}
.zurueck-link { display: inline-flex; align-items: center; gap: .3rem; margin: -.4rem 0 .6rem; padding: .25rem .7rem .25rem .55rem; border: 1px solid var(--linie); border-radius: var(--r-rund); background: var(--karte); color: var(--text); text-decoration: none; font-size: var(--t-beschriftung); }
.zurueck-link:hover { border-color: var(--stahl); color: var(--akzent); }

/* Fassung 0.16: Aufteilung nach Gesellschaft (Merkur, team time) mit Zwischensummen */
.kachel-teile { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--linie); font-size: var(--t-mikro); color: var(--text-leise); }
.kachel-teile strong { color: var(--text); font-weight: 600; }
tr.zwischensumme td { background: var(--flaeche); font-weight: 600; border-top: 1px solid var(--nebel); }
tr.zwischensumme + tr td { border-top: 2px solid var(--linie); }
.db1-zwischensumme { font-weight: 600; background: var(--flaeche); }
.gruppen-titel { margin: 1rem 0 .3rem; font-size: var(--t-klein); }
.ges-tabelle { margin-top: .8rem; }

/* Fassung 0.17: Planung je Gesellschaft aufklappbar, Forderungen nach Zahlungsterminen */
.pl-liste { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; margin-bottom: .6rem; }
.pl-zeile { display: grid; grid-template-columns: minmax(10rem, 2fr) repeat(6, minmax(4.5rem, 1fr)); gap: .5rem; align-items: center; padding: .45rem .8rem; border-top: 1px solid var(--linie); }
.pl-zeile > span:not(:first-child) { text-align: right; }
.pl-kopf { border-top: 0; font-size: var(--t-mikro); color: var(--text-leise); font-weight: 600; background: var(--flaeche); }
.pl-zeile .vorschau, .pl-kopf span:nth-child(5) { color: var(--blau); }
.pl-gruppe > summary { list-style: none; cursor: pointer; font-weight: 600; }
.pl-gruppe > summary::-webkit-details-marker { display: none; }
.pl-gruppe > summary > span:first-child::before { content: ""; display: inline-block; width: .42em; height: .42em; margin: 0 .55em .12em .1em; border-right: 1.6px solid var(--text-leise); border-bottom: 1.6px solid var(--text-leise); transform: rotate(-45deg); transition: transform var(--uebergang); }
.pl-gruppe[open] > summary > span:first-child::before { transform: rotate(45deg); }
.pl-gruppe > summary:hover { background: var(--flaeche); }
.pl-nl > span:first-child { padding-left: 1.2rem; color: var(--text-leise); }
.pl-summe { font-weight: 700; background: var(--flaeche); border-top: 2px solid var(--nebel); }
@media (max-width: 760px) { .pl-zeile { grid-template-columns: minmax(7rem, 2fr) repeat(6, minmax(3.2rem, 1fr)); font-size: var(--t-beschriftung); } }
.forderung-termine > div { display: flex; flex-direction: column; }
.forderung-termine strong { font-size: var(--t-zwischen); }
.forderung-termine small { color: var(--text-leise); }
.forderung-termine .rot-text strong { color: var(--rot); }
th.trenner, td.trenner { border-left: 2px solid var(--linie); }

/* Abwesenheit, Einsatzort, Hinweise zum Kunden */
.tag-extra { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem; margin-top: .45rem; }
.tag-extra label { margin: 0; font-size: var(--t-mikro); display: flex; flex-direction: column; gap: .15rem; color: var(--text-leise); }
.tag-extra select, .tag-extra input { font-size: var(--t-klein); padding: .3rem .4rem; }
.tag-abwesend { background: var(--gelb-hell); }
.tag-abwesend .tag-felder, .tag-abwesend .pausen { opacity: .35; pointer-events: none; }
.abwesend { display: inline-block; font-weight: 600; color: var(--gelb); }
.kunden-hinweis { font-size: var(--t-mikro); color: var(--blau); margin-top: .15rem; line-height: 1.3; }
.kunden-hinweis-kasten { margin: .4rem 0 .6rem; border-color: var(--stahl-linie); background: var(--stahl-zart); }
input.ort-feld { width: 14rem; padding: .3rem .4rem; }

/* Fassung 0.20: Plantafel – die Arbeit hängt als Magnetkarten auf einer ruhigen Tafel.
   Rahmen (Navigation) graphitdunkel, Tafel hell mit feinem Punktraster, Karten weiß.
   Magnete: Rot = team time und Hauptaktion, Stahlblau = Merkur und Auswahl, Grün/Bernstein/Rot = Zustand. */
html { accent-color: var(--rot-marke); caret-color: var(--rot-marke); scrollbar-color: var(--linie-stark) transparent; }
::selection { background: rgba(196, 37, 34, .16); }
a { text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color var(--uebergang); }
a:hover { color: var(--rot-marke); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--stahl); outline-offset: 2px; border-radius: var(--r-klein); }
strong, b { font-weight: 600; }
td, .kachel-zahl, .zahl, .zahl-marke, .magnet-zahl, .punkte { font-variant-numeric: tabular-nums; }
h1 { font-size: var(--t-titel); letter-spacing: -.025em; }
.unterzeile, .einleitung { line-height: 1.55; }

/* Rahmen und Tafel */
.rahmen { background-color: var(--flaeche);
  background-image: radial-gradient(rgba(27, 34, 44, .075) 1px, transparent 1.3px); background-size: 22px 22px; background-position: 11px 11px; }
.inhalt { padding: 2.2rem 2.8rem 4rem; max-width: 1280px; }

.seitenleiste { background: var(--karte); color: var(--text); border-right: 1px solid var(--linie); padding: 1.1rem .85rem 1rem; }
.seitenleiste-kopf { margin-bottom: 1.3rem; padding: 0 .3rem; }
.marke { background: none; border-radius: 0; padding: 0; gap: .7rem; box-shadow: none; }
.marke:hover { color: var(--text); }
.marke-text { font-family: var(--schrift-titel); font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.menue-knopf { border-color: var(--linie-stark); color: var(--text); border-radius: var(--r-segment); }
.globale-suche { margin: 0 0 1.1rem; }
.globale-suche .symbol { color: var(--text-leise); }
.globale-suche input[type=search] { background: var(--flaeche); border: 1px solid transparent; color: var(--text); border-radius: var(--r-steuer); padding: .55rem .7rem .55rem 2.05rem; }
.globale-suche input::placeholder { color: var(--text-blass); }
.globale-suche input[type=search]:focus { background: var(--karte); border-color: var(--stahl); box-shadow: 0 0 0 3px rgba(141, 163, 196, .32); }
.nav-eintrag { color: var(--text-dunkel); border-radius: var(--r-steuer); padding: .52rem .7rem; font-weight: 500;
  transition: background-color var(--uebergang), color var(--uebergang); }
.nav-eintrag .symbol { color: var(--text-leise); transition: color var(--uebergang); }
.nav-eintrag:hover { background: var(--flaeche); color: var(--text); }
.nav-eintrag:hover .symbol { color: var(--text); }
.nav-eintrag.aktiv { background: var(--nav-aktiv); color: var(--rot-dunkel); font-weight: 600; box-shadow: none; }
.nav-eintrag.aktiv .symbol { color: var(--rot-marke); }
.nav-eintrag.aktiv::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--rot-marke); box-shadow: 0 1px 2px rgba(139, 24, 31, .35); }
.nutzermenue { border-top: 1px solid var(--linie); }
.nutzermenue summary { border-radius: var(--r-steuer); }
.nutzermenue summary:hover { background: var(--flaeche); }
.nutzer-text strong { color: var(--text); }
.nutzer-text span { color: var(--text-leise); }
.nutzermenue-inhalt a, .nutzermenue-inhalt .link-knopf { color: var(--text); }
.nutzermenue-inhalt a:hover, .nutzermenue-inhalt .link-knopf:hover { color: var(--rot-dunkel); }
.seitenleiste .nav-pfeil { color: var(--text-leise); }
.kuerzel { background: var(--stahl); color: var(--karte); box-shadow: none; }
.ki-status { background: var(--flaeche); color: var(--text-leise); border-radius: var(--r-klein); }
.ki-status.ki-an { background: var(--gruen-hell); color: var(--gruen); }

/* Kopfleiste jeder Unterseite: Zurück und Pfad in einer Zeile */
.kopfleiste { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem; margin: -.3rem 0 1.1rem; min-height: 2rem; }
.kopfleiste .zurueck-link { margin: 0; }
.kopfleiste .pfad { margin: 0; font-size: var(--t-klein); color: var(--text-leise); display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; }
.kopfleiste .pfad::before { content: ""; width: 1px; height: 1.1rem; background: var(--linie-stark); margin-right: .35rem; }
.pfad a { color: var(--text-leise); text-decoration: none; font-weight: 500; }
.pfad a:hover { color: var(--rot-dunkel); text-decoration: underline; }

/* Auswahl Gesellschaft und Niederlassung: überall gleich */
.standort-wahl { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-bottom: 1.1rem; }
.standort-wahl .filter { margin: 0; }
.filter-gruppe { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .3rem 0 .6rem; color: var(--text-leise); font-size: var(--t-mikro); font-weight: 600; }
.filter-gruppe:not(:first-child) { margin-left: .4rem; border-left: 1px solid var(--linie-stark); }
.nl-gruppen { display: grid; gap: .7rem; }
.nl-gruppe-titel { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; font-size: var(--t-beschriftung); font-weight: 600; color: var(--text-leise); }

/* Seitenkopf */
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.2rem; flex-wrap: wrap; margin: .2rem 0 1.6rem; }
.seitenkopf h1 { font-size: var(--t-start); margin: .25rem 0 .3rem; }
.seitenkopf .unterzeile { margin: 0; font-size: 1rem; }
.datumszeile { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--text-leise); font-size: var(--t-klein); font-weight: 500; }
.kw-chip { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: var(--r-rund); background: var(--karte); box-shadow: var(--schatten-1); color: var(--text); font-size: var(--t-mikro); font-weight: 600; }
.kopfzeile h1, .kopfkarte-text h1 { font-size: var(--t-titel); }

/* Die Tafel „Heute zu tun“: Spalten mit Magnetkarten */
.tafel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-tafel); box-shadow: var(--schatten-1); padding: 1.15rem 1.15rem 1.2rem; margin-bottom: 1.8rem; }
.tafel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .1rem .3rem .9rem; }
.tafel-kopf h2 { margin: 0; font-size: var(--t-abschnitt); }
.tafel-spalten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; }
.tafel-spalte { background: var(--spalte); border: 1px solid var(--linie); border-radius: var(--r-huelle); padding: .85rem .8rem .8rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.spalten-kopf { display: flex; align-items: center; gap: .65rem; min-height: 2.2rem; }
.spalten-kopf h3 { margin: 0; font-size: var(--t-klein); line-height: 1.25; }
.magnet-zahl { flex: none; min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem; border-radius: var(--r-rund); display: inline-grid; place-items: center;
  font-family: var(--schrift-titel); font-weight: 700; font-size: 1rem; color: var(--karte); background: var(--merkur);
  box-shadow: 0 2px 5px rgba(20, 28, 40, .2); }
.magnet-zahl.rot { background: var(--rot-marke); }
.magnet-zahl.gelb { background: var(--bernstein); }
.magnet-zahl.gruen { background: var(--gruen); }
.magnetkarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.magnetkarten li { min-width: 0; }
.magnetkarte { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .6rem .75rem; background: var(--karte); border-radius: var(--r-steuer);
  color: var(--text); text-decoration: none; font-size: var(--t-klein); box-shadow: var(--schatten-1);
  transition: transform var(--uebergang), box-shadow var(--uebergang); }
a.magnetkarte:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--schatten-2); }
.magnetkarte-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.magnet { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--merkur);
  box-shadow: 0 1px 2px rgba(20, 28, 40, .25); }
.magnet.rot, .magnet.ges-tt { background: var(--rot-marke); }
.magnet.gelb { background: var(--gelb-magnet); }
.magnet.gruen { background: var(--gruen); }
.magnet.blau, .magnet.ges-merkur { background: var(--merkur); }
.spalten-link { margin-top: auto; display: inline-flex; align-items: center; gap: .25rem; align-self: flex-start; padding: .15rem .25rem;
  color: var(--rot-dunkel); font-size: var(--t-beschriftung); font-weight: 600; text-decoration: none; }
.spalten-link .symbol { width: 16px; height: 16px; transition: transform var(--uebergang); }
.spalten-link:hover .symbol { transform: translateX(3px); }
.tafel-leer { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 1.2rem .4rem .3rem; color: var(--text-leise); }
.tafel-leer .symbol { color: var(--gruen); }

/* Umschalter (Filter) als Segmente */
.filter { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--flaeche-tief); border-radius: var(--r-huelle); margin-bottom: 1.1rem; }
.filter a { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: transparent; border-radius: var(--r-segment); padding: .42rem .9rem;
  color: var(--text-dunkel); font-weight: 500; font-size: var(--t-klein); transition: background-color var(--uebergang), color var(--uebergang), box-shadow var(--uebergang); }
.filter a:hover { background: rgba(255, 255, 255, .65); color: var(--text); }
.filter a.aktiv { background: var(--karte); border: 0; color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 28, 40, .14), 0 1px 1px rgba(20, 28, 40, .04); }
.filter a.aktiv:hover { color: var(--text); }
.filter a .zahl-marke { background: rgba(20, 28, 40, .07); color: var(--text-leise); margin-left: 0; }
.filter a.aktiv .zahl-marke { background: var(--rot-zart); color: var(--rot-dunkel); }
.cockpit-auswahl { display: flex; flex-direction: row; flex: 1 1 auto; flex-wrap: wrap; gap: .5rem 1.3rem; align-items: center; justify-content: flex-start; min-width: 0; }
.filter-klein a { padding: .42rem .75rem; font-size: var(--t-klein); }
.kachel-teile .teil { white-space: nowrap; }
.tabellen-rollbar, .db1-liste, .pl-liste, .diagramm-rolle {
  background:
    linear-gradient(90deg, var(--karte) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--karte) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(20, 28, 40, .16), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 28, 40, .16), transparent) right center / 12px 100% no-repeat scroll; }
.cockpit-auswahl .filter { margin: 0; }
.cockpit-kopf { align-items: center; margin-bottom: .7rem; }
.cockpit-kopf > .knopfreihe { align-self: center; }
.datenstand { font-size: var(--t-beschriftung); }

/* Karten und Kennzahlen */
.karte, .treffer-liste, .weg li, .filter-feld { border-color: var(--linie); box-shadow: var(--schatten-1); }
.karte { padding: 1.4rem 1.5rem; }
.karte > h2:first-child, .karten-kopf h2 { font-size: var(--t-abschnitt); }
.leer-karte { border-radius: var(--radius); }
.hinweis-karte, .meldung { border-radius: var(--r-huelle); }
.kacheln { gap: 1rem; }
.kachel { border-color: var(--linie); border-radius: var(--radius); box-shadow: var(--schatten-1); padding: 1.15rem 1.3rem 1.1rem; }
a.kachel { transition: box-shadow var(--uebergang), transform var(--uebergang); }
a.kachel:hover { border-color: var(--linie); box-shadow: var(--schatten-2); transform: translateY(-2px); }
.kachel-titel { font-size: var(--t-beschriftung); font-weight: 600; color: var(--text-leise); }
.kachel-zahl { font-family: var(--schrift-titel); letter-spacing: -.025em; }
.kennzahlen .kachel-zahl { font-size: var(--t-titel); font-weight: 700; margin: .2rem 0 .1rem; line-height: 1.1; }
.kachel-teile { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .8rem; padding-top: 0; border-top: 0; font-size: var(--t-beschriftung); }
.kachel-teile .teil { display: inline-flex; align-items: center; gap: .4rem; }
.kachel-teile .teil::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--merkur); }
.kachel-teile .teil.ges-tt::before { background: var(--rot-marke); }
.anteil-balken { flex-basis: 100%; display: flex; gap: 3px; height: 6px; border-radius: var(--r-rund); overflow: hidden; background: var(--flaeche-tief); margin-bottom: .2rem; }
.anteil-balken i { display: block; height: 100%; }
.anteil-balken i.ges-merkur { background: var(--merkur); }
.anteil-balken i.ges-tt { background: var(--rot-marke); }
.b-0 { width: 0; display: none !important; } .b-5 { width: 5%; } .b-10 { width: 10%; } .b-15 { width: 15%; } .b-20 { width: 20%; } .b-25 { width: 25%; }
.b-30 { width: 30%; } .b-35 { width: 35%; } .b-40 { width: 40%; } .b-45 { width: 45%; } .b-50 { width: 50%; } .b-55 { width: 55%; }
.b-60 { width: 60%; } .b-65 { width: 65%; } .b-70 { width: 70%; } .b-75 { width: 75%; } .b-80 { width: 80%; } .b-85 { width: 85%; }
.b-90 { width: 90%; } .b-95 { width: 95%; } .b-100 { width: 100%; }
.anteil-balken i:last-child { flex: 1; }
.zahlen-panel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-tafel); box-shadow: var(--schatten-1); margin-bottom: 1.4rem; overflow: hidden; }
.zahlenleiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 0; }
.zahlenleiste + .zahlenleiste { border-top: 1px solid var(--linie); background: var(--flaeche-hell); }
.zahlenleiste .kachel { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 1.25rem 1.4rem 1.2rem; box-shadow: inset 1px 0 0 var(--linie); }
.zahlenleiste .kachel:first-child { box-shadow: none; }
a.kachel:hover, .zahlenleiste a.kachel:hover { transform: none; }
.zahlenleiste a.kachel:hover { background: var(--flaeche-hell); }
.zahlenleiste a.kachel:first-child:hover { box-shadow: none; }
.zahlenleiste-klein .kachel-zahl { font-size: var(--t-kennzahl-klein); }
.kacheln-filter .kachel { box-shadow: none; padding: .7rem .9rem; border-radius: var(--r-huelle); }
.kacheln-filter .kachel-null { opacity: 1; }
.kacheln-filter .kachel-null .kachel-zahl { opacity: .45; }
.kacheln-filter .kachel.aktiv { box-shadow: inset 0 0 0 1.5px var(--text), var(--schatten-1); }
.abschnitt-titel { font-size: var(--t-abschnitt); font-weight: 600; color: var(--text); margin: 2.2rem 0 .9rem; }

/* Knöpfe */
.knopf { border-radius: var(--radius-klein); border-color: var(--linie-stark); padding: .55rem 1rem; box-shadow: 0 1px 1px rgba(20, 28, 40, .05);
  transition: background-color var(--uebergang), border-color var(--uebergang), color var(--uebergang), box-shadow var(--uebergang), transform 80ms ease-out; }
.knopf:hover { background: var(--flaeche-hell); border-color: var(--linie-hover); color: var(--text); }
.knopf:active:not([disabled]) { transform: translateY(1px); }
.knopf-haupt { background: var(--rot-marke); border-color: var(--rot-marke); color: var(--karte); box-shadow: var(--schatten-rot); }
.knopf-haupt:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: var(--karte); }
.knopf-zweit:hover, .knopf-gefahr:hover { color: var(--karte); }
.knopf-gefahr:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.knopf-klein { border-radius: var(--r-klein); padding: .32rem .7rem; }
.knopf-gross { padding: .75rem 1.35rem; font-size: 1rem; border-radius: var(--r-huelle); }
.knopf .symbol { width: 18px; height: 18px; vertical-align: 0; }
.knopf-klein .symbol { width: 16px; height: 16px; }

/* Formularfelder */
input[type=text], input[type=password], input[type=email], input[type=search], input[type=date], input[type=number], input[type=tel], select, textarea {
  border-color: var(--linie-stark); border-radius: var(--radius-klein); padding: .55rem .75rem; transition: border-color var(--uebergang), box-shadow var(--uebergang); }
input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=date]:hover, select:hover, textarea:hover { border-color: var(--linie-hover); }
input:focus, select:focus, textarea:focus { border-color: var(--stahl); box-shadow: 0 0 0 3px rgba(141, 163, 196, .32); outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-blass); }
input.uhr { padding: .3rem .25rem; border-radius: var(--r-klein); }
label, legend { color: var(--text-dunkel); }
.option { background: var(--karte); border-radius: var(--r-steuer); transition: border-color var(--uebergang), background-color var(--uebergang); }
.option:hover { border-color: var(--linie-stark); }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: .8rem; padding: .45rem .9rem; border-radius: var(--r-segment);
  border: 1px solid var(--linie-stark); background: var(--karte); color: var(--text); cursor: pointer; }
.ablage { border-radius: var(--radius); border-color: var(--linie-hover); }
.klappe { background: var(--karte); border-radius: var(--r-huelle); }
.klappe > summary::marker { color: var(--text-leise); }

/* Tabellen */
th { font-size: var(--t-mikro); font-weight: 600; color: var(--text-leise); padding: .6rem .65rem; border-bottom: 1px solid var(--linie); white-space: nowrap; }
td { padding: .7rem .65rem; border-bottom-color: var(--flaeche); }
tbody tr { transition: background-color var(--uebergang); }
.tabellen-karte tbody tr:hover > td, .karte > table tbody tr:hover > td { background: var(--flaeche-hell); }
.tabellen-karte td a:not(.knopf), .karte td > a:first-child:not(.knopf) { color: var(--rot-dunkel); font-weight: 600; text-decoration: none; }
.tabellen-karte td a:not(.knopf):hover, .karte td > a:first-child:not(.knopf):hover { color: var(--rot-marke); text-decoration: underline; }
.tabellen-karte { padding: .5rem 1.1rem 1rem; }

/* Reiter, Marken, Zurück */
.reiter { border-bottom-color: var(--linie-stark); gap: 1.6rem; }
.reiter a { font-weight: 500; transition: color var(--uebergang), border-color var(--uebergang); }
.marke-klein { border-radius: var(--r-klein); font-weight: 600; }
.zurueck-link { border-color: transparent; box-shadow: var(--schatten-1); }
.zurueck-link:hover { box-shadow: var(--schatten-2); }
.hilfe-klappe > summary { background: var(--karte); }
.aufhaenger { border-radius: var(--r-huelle); }
.hinweis-kasten { border-radius: var(--r-huelle); }

/* Trefferliste */
.tz-details > summary { transition: background-color var(--uebergang); }
.treffer-zeile .punkte { font-family: var(--schrift-titel); border-radius: var(--r-steuer); }
.treffer-liste { border-radius: var(--radius); overflow: hidden; }

/* Anmeldung */
.ohne-anmeldung { background:
  linear-gradient(160deg, var(--rot-marke) 0 40%, transparent 40%),
  linear-gradient(160deg, transparent 0 44%, rgba(141, 163, 196, .35) 44% 46%, transparent 46%),
  radial-gradient(rgba(27, 34, 44, .08) 1px, transparent 1.3px) 0 0 / 22px 22px,
  var(--flaeche); }
.anmeldung { border-radius: var(--r-tafel); padding: 2.2rem 2.1rem 1.9rem; box-shadow: 0 30px 60px -20px rgba(20, 28, 40, .35), 0 2px 6px rgba(20, 28, 40, .06); }
.anmeldung h1 { font-size: var(--t-titel-klein); margin-top: .3rem; }
.anmeldung .knopf-breit { padding: .7rem 1rem; margin-top: 1.1rem; }
/* Fassung 0.46: Anmeldung mit Microsoft-Konto */
.oder-trenner { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 0; color: var(--text-leise); font-size: var(--t-klein); }
.oder-trenner::before, .oder-trenner::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
.anmeldung .knopf-microsoft { margin-top: .8rem; background: var(--karte); color: var(--text); border: 1px solid var(--linie-stark, var(--linie)); gap: .5rem; }
.anmeldung .knopf-microsoft:hover { background: var(--flaeche); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
}
@media (max-width: 860px) {
  .seitenleiste { padding: .6rem .8rem; border-right: 0; border-bottom: 1px solid var(--linie); }
  .marke .logo-klein { width: 54px; }
  .inhalt { padding: 1.3rem 1rem 3rem; }
  .seitenkopf h1 { font-size: var(--t-titel-klein); }
  h1, .kopfzeile h1, .kopfkarte-text h1 { font-size: var(--t-titel-klein); }
  .tafel { padding: .9rem; border-radius: var(--r-karte); }
  .filter { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .filter a { white-space: nowrap; }
  .cockpit-auswahl { flex-direction: column; align-items: stretch; min-width: 0; width: 100%; }
  .standort-wahl { flex-direction: column; align-items: stretch; min-width: 0; max-width: 100%; }
  .standort-wahl > .filter { min-width: 0; }
  .filter-gruppe { display: none; }
  .filter { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 2rem; }
  .zahlenleiste .kachel:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .zahlenleiste { grid-template-columns: 1fr 1fr; }
  .zahlenleiste .kachel { box-shadow: inset 0 1px 0 var(--linie); padding: 1rem; }
  .zahlenleiste .kachel:nth-child(odd) { box-shadow: inset 0 1px 0 var(--linie); }
  .zahlenleiste .kachel:nth-child(even) { box-shadow: inset 1px 1px 0 var(--linie); }
  .zahlenleiste .kachel:first-child, .zahlenleiste .kachel:nth-child(2) { box-shadow: none; }
  .zahlenleiste .kachel:nth-child(2) { box-shadow: inset 1px 0 0 var(--linie); }
  .kennzahlen .kachel-zahl { font-size: var(--t-kennzahl-klein); }
}
@media (max-width: 420px) {
  .zahlenleiste { grid-template-columns: 1fr; }
  .zahlenleiste .kachel, .zahlenleiste .kachel:nth-child(even), .zahlenleiste .kachel:nth-child(2) { box-shadow: inset 0 1px 0 var(--linie); }
  .zahlenleiste .kachel:first-child { box-shadow: none; }
  .lauf { grid-template-columns: minmax(0, 1fr); }
  .lauf dt { margin-top: .4rem; }
  .db1-zeile { grid-template-columns: minmax(5rem, 1.3fr) repeat(4, minmax(0, 1fr)); gap: .3rem; font-size: var(--t-mikro); padding: .35rem .2rem; }
  .db1-zeile > span:not(:first-child) { white-space: nowrap; }
  .db1-liste, .pl-liste { overflow-x: auto; }
  .db1-zeile, .pl-zeile { min-width: 34rem; }
  .diagramm-rolle { overflow-x: auto; }
  .diagramm-rolle .diagramm { min-width: 620px; }
  td.zahl, th.zahl, td.rechts, th.rechts { white-space: nowrap; }
}
.cockpit-auswahl .standort-wahl { margin: 0; }

/* Fassung 0.21: einheitliche Seitenköpfe. Personen- und Firmenseiten tragen ihren Kopf ohne Karte, wie alle anderen Seiten. */
.karte.kopfkarte-profil { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 1.4rem; }
.kopfkarte-profil .kopfkarte { margin-bottom: 1.1rem; }
.kopfkarte .kuerzel-gross { width: 3.4rem; height: 3.4rem; font-size: var(--t-zwischen); }
.kopfkarte-text h1 { margin-bottom: .2rem; }
.schritt-reiter a { background: var(--karte); box-shadow: var(--schatten-1); border-color: var(--linie); }
.schritt-reiter a.aktiv { box-shadow: inset 0 0 0 1.5px var(--rot-marke), var(--schatten-1); border-color: transparent; }
/* Zahlen in Kacheln sind neutral; Farbe nur, wenn sie einen Zustand meldet */
.kachel-zahl { color: var(--text); }
.hilfe-klappe { margin: -.4rem 0 1rem; }

/* Fassung 0.22: Dispo-Board – Spalten mit Bewerberkarten, wie die Plantafel der Disposition */
.ansicht-wahl { margin: 0; }
.inhalt:has(.board) { max-width: none; }
.board { display: flex; gap: .7rem; overflow-x: auto; padding: .2rem .1rem 1rem; margin: 0 0 1rem; align-items: flex-start; scroll-snap-type: x proximity; }
.board-spalte { flex: 1 1 200px; min-width: 190px; }
.board-spalte.ist-leer { flex: 0 0 8.5rem; min-width: 0; }
.board-spalte.ist-leer .board-spalten-kopf h2 { font-size: var(--t-beschriftung); color: var(--text-leise); }
.board-spalte.ist-leer .board-leer { font-size: var(--t-mikro); padding: .5rem .3rem; }
.board-spalte { background: var(--spalte); border: 1px solid var(--flaeche-tief); border-radius: var(--r-karte); padding: .7rem .6rem .75rem; min-width: 0;
  scroll-snap-align: start; transition: background-color var(--uebergang), box-shadow var(--uebergang); }
.board-spalte.ziel-aktiv, .board-ablage.ziel-aktiv { background: var(--stahl-zart); box-shadow: inset 0 0 0 2px var(--stahl); }
.board-spalten-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .1rem .25rem .6rem; cursor: help; }
.board-spalten-kopf h2 { margin: 0; font-size: var(--t-klein); font-weight: 600; letter-spacing: -.005em; }
.board-zahl { min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem; border-radius: var(--r-rund); display: inline-grid; place-items: center;
  background: var(--karte); box-shadow: var(--schatten-1); font-size: var(--t-mikro); font-weight: 700; color: var(--text); }
.board-spalte[data-spalte="eingestellt"] .board-zahl { background: var(--gruen); color: var(--karte); }
.board-spalte[data-spalte="termin"] .board-zahl { background: var(--rot-marke); color: var(--karte); }
.board-karten { display: grid; gap: .5rem; min-height: 3rem; }
.board-leer { margin: 0; padding: .6rem .4rem; color: var(--text-leise); font-size: var(--t-beschriftung); text-align: center; border: 1px dashed var(--linie-stark); border-radius: var(--r-steuer); }
.board-karte { background: var(--karte); border-radius: var(--r-steuer); padding: .65rem .75rem .55rem; box-shadow: var(--schatten-1); cursor: grab;
  transition: box-shadow var(--uebergang), transform var(--uebergang), opacity var(--uebergang); min-width: 0; }
.board-karte:hover { box-shadow: var(--schatten-2); transform: translateY(-1px); }
.board-karte.wird-gezogen { opacity: .45; cursor: grabbing; }
.board-karte:target { box-shadow: 0 0 0 2px var(--stahl), var(--schatten-2); }
.bk-kopf { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.bk-name { font-weight: 600; color: var(--text); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-name:hover { color: var(--rot-dunkel); text-decoration: underline; }
.bk-faellig { margin-left: auto; color: var(--rot-marke); display: inline-flex; }
.bk-faellig .symbol { width: 16px; height: 16px; }
.bk-beruf { margin: .15rem 0 0; font-size: var(--t-beschriftung); color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-info { margin: .45rem 0 0; font-size: var(--t-beschriftung); font-weight: 500; color: var(--text-dunkel); display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.bk-info a { color: var(--rot-dunkel); font-weight: 600; text-decoration: none; }
.bk-info a:hover { text-decoration: underline; }
.bk-info .symbol { width: 14px; height: 14px; }
.bk-info.gelb { color: var(--gelb); }
.bk-info.gruen { color: var(--gruen); }
.bk-termin { color: var(--rot-dunkel); font-weight: 600; }
.bk-termin.vorbei { color: var(--text-leise); }
.bk-fuss { display: flex; flex-wrap: wrap; gap: 0 .9rem; margin-top: .45rem; padding-top: .35rem; border-top: 1px solid var(--linie); }
.bk-fuss details[open] { flex-basis: 100%; }
.bk-firmen, .bk-menue { font-size: var(--t-mikro); }
.bk-firmen > summary, .bk-menue > summary { cursor: pointer; color: var(--text-leise); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: .25rem; }
.bk-firmen > summary::-webkit-details-marker, .bk-menue > summary::-webkit-details-marker { display: none; }
.bk-firmen > summary::before, .bk-menue > summary::before { content: ""; width: .38em; height: .38em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: .2rem; transition: transform var(--uebergang); }
.bk-firmen[open] > summary::before, .bk-menue[open] > summary::before { transform: rotate(45deg); }
.bk-firmen > summary:hover, .bk-menue > summary:hover { color: var(--text); }
.bk-firmen ul { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .25rem; }
.bk-firmen li { display: flex; justify-content: space-between; gap: .4rem; align-items: baseline; }
.bk-firmen li a { color: var(--text); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-firmen li a:hover { color: var(--rot-dunkel); text-decoration: underline; }
.bk-stand { flex: none; font-size: var(--t-mikro); font-weight: 600; padding: .05rem .4rem; border-radius: var(--r-klein); background: var(--grau-hell); color: var(--text-leise); }
.bk-stand.stand-kontaktiert, .bk-stand.stand-interesse { background: var(--blau-hell); color: var(--blau); }
.bk-stand.stand-vorgestellt { background: var(--gelb-hell); color: var(--gelb); }
.bk-stand.stand-termin { background: var(--rot-hell); color: var(--rot-dunkel); }
.bk-stand.stand-einsatz { background: var(--gruen-hell); color: var(--gruen); }
.bk-formular { display: grid; gap: .45rem; margin-top: .4rem; }
.bk-formular label { margin: 0; font-size: var(--t-mikro); display: grid; gap: .2rem; }
.bk-formular select, .bk-formular input { font-size: var(--t-beschriftung); padding: .4rem .5rem; }
.bk-formular .aktionen { margin-top: .2rem; }
.bk-formular-titel { display: none; }
.board-dialog { border: 0; border-radius: var(--r-tafel); padding: 1.3rem 1.4rem; width: min(420px, 92vw); box-shadow: 0 30px 60px -20px rgba(20, 28, 40, .45); }
.board-dialog::backdrop { background: rgba(27, 34, 44, .35); }
.board-dialog .bk-formular { margin: 0; gap: .7rem; }
.board-dialog .bk-formular-titel { display: block; margin: 0 0 .2rem; font-family: var(--schrift-titel); font-weight: 700; font-size: var(--t-abschnitt); }
.board-dialog .bk-formular label { font-size: var(--t-klein); }
.board-dialog .bk-formular select, .board-dialog .bk-formular input { font-size: 1rem; padding: .55rem .7rem; }
.board-ablage { background: var(--karte); border: 1px dashed var(--linie-stark); border-radius: var(--r-karte); padding: .7rem 1rem; margin-bottom: 1.4rem; }
.board-ablage > summary { cursor: pointer; display: flex; align-items: center; gap: .6rem; font-weight: 600; list-style: none; flex-wrap: wrap; }
.board-ablage > summary::-webkit-details-marker { display: none; }
.board-ablage > summary .nebenbei { font-weight: 400; }
.board-karten-quer { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); margin-top: .8rem; }
.termin-zeile { display: flex; align-items: center; gap: .35rem; margin: 0 0 .6rem; color: var(--rot-dunkel); font-weight: 600; font-size: var(--t-klein); }
.termin-zeile .symbol { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .board-spalte, .board-spalte.ist-leer { flex: 0 0 82%; }
  .board-karte { cursor: default; }
}
/* Board: Platz fürs Ganze – sieben Spalten passen auf einen Laptop-Bildschirm, Namen brechen um statt abgeschnitten zu werden */
.inhalt:has(.board) { padding-left: 1.8rem; padding-right: 1.8rem; }
.board { gap: .55rem; }
.board-spalte { flex: 1 1 0; min-width: 150px; padding: .6rem .45rem .6rem; }
.board-spalte.ist-leer { flex: 0 0 7.5rem; }
.board-spalten-kopf { align-items: flex-start; padding: .1rem .2rem .55rem; }
.board-spalten-kopf h2 { font-size: var(--t-beschriftung); line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.board-zahl { flex: none; }
.board-karte { padding: .6rem .65rem .5rem; }
.bk-kopf { align-items: flex-start; }
.bk-kopf .magnet { margin-top: .4em; }
.bk-name, .bk-beruf { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
.bk-name { font-size: var(--t-klein); }
@media (min-width: 1700px) { .board-spalte { min-width: 200px; } }
.board-spalten-kopf h2 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 860px) {
  .board-spalte, .board-spalte.ist-leer { flex: 0 0 80%; min-width: 0; }
  .inhalt:has(.board) { padding-left: 1rem; padding-right: 1rem; }
}
.bk-fuss details { min-width: 0; max-width: 100%; }
.bk-firmen li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; justify-items: start; padding: .2rem 0; border-top: 1px dashed var(--linie); }
.bk-firmen li a { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }

/* Fassung 0.23: Liegezeit auf der Karte, Einstellen-Felder, ganze Karte klickbar */
.board-karte[data-link] { cursor: pointer; }
.bk-liegt { margin: .3rem 0 0; font-size: var(--t-mikro); color: var(--text-leise); }
.bk-liegt.gelb { color: var(--gelb); font-weight: 600; }
.bk-liegt.rot { color: var(--rot); font-weight: 600; }
.board-karte.liegt-gelb { box-shadow: inset 0 0 0 1.5px var(--gelb-magnet), var(--schatten-1); }
.board-karte.liegt-rot { box-shadow: inset 0 0 0 1.5px var(--rot-linie), var(--schatten-1); }
.bk-einstellen { display: grid; gap: .45rem; border: 0; padding: 0; margin: 0; }
.bk-haken { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: .45rem !important; font-weight: 500; }
.bk-haken input { margin-top: .2rem; }

/* Fassung 0.23: Navigation als feste Leiste oben – Kacheln für die Bereiche, rechts Suche, Administration, Konto */
.rahmen.rahmen-oben { display: block; }
.kopfnavi { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1.2rem; height: 64px; padding: 0 1.8rem;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linie); box-shadow: 0 1px 0 rgba(20, 28, 40, .02), 0 6px 18px -14px rgba(20, 28, 40, .35); }
.kopfnavi .marke { flex: none; }
.kopfnavi .logo-klein { width: 56px; }
.kopfnavi .hauptmenue { display: flex; flex-direction: row; align-items: center; gap: 1rem; flex: 1; min-width: 0; min-height: 0; padding: 0; }
.kachel-navi { display: flex; align-items: center; gap: .3rem; flex: 1; min-width: 0; }
.kopfnavi .nav-eintrag { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: var(--r-steuer); font-size: var(--t-klein);
  font-weight: 500; color: var(--text-dunkel); white-space: nowrap; }
.kopfnavi .nav-eintrag .symbol { width: 18px; height: 18px; }
.kopfnavi .nav-eintrag:hover { background: var(--flaeche); color: var(--text); }
.kopfnavi .nav-eintrag.aktiv { background: var(--nav-aktiv); color: var(--rot-dunkel); font-weight: 600; box-shadow: inset 0 -2px 0 var(--rot-marke); }
.kopfnavi .nav-eintrag.aktiv::after { display: none; }
.kopf-rechts { display: flex; align-items: center; gap: .5rem; flex: none; }
.kopfnavi .globale-suche { margin: 0; width: 15rem; }
.kopfnavi .nav-admin span { display: none; }
.kopfnavi .nav-admin { padding: .5rem .6rem; }
.kopfnavi .nutzermenue { position: relative; border: 0; padding: 0; }
.kopfnavi .nutzermenue summary { padding: .25rem .35rem .25rem .25rem; border-radius: var(--r-rund); gap: .25rem; }
.kopfnavi .nutzermenue summary:hover { background: var(--flaeche); }
.kopfnavi .nutzermenue-inhalt { position: absolute; right: 0; top: calc(100% + .5rem); width: 16rem; background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r-karte); box-shadow: var(--schatten-2); padding: .8rem .9rem; display: grid; gap: .2rem; }
.kopfnavi .nutzer-text { display: grid; margin: 0 0 .4rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linie); font-size: var(--t-klein); }
.kopfnavi .nutzer-text span { font-size: var(--t-mikro); color: var(--text-leise); }
.rahmen-oben .inhalt { margin: 0 auto; padding-top: 1.6rem; }
.rahmen-oben .inhalt:has(.board) { margin: 0; }
@media (max-width: 1180px) {
  .kopfnavi .globale-suche { width: 11rem; }
  .kopfnavi .nav-eintrag { padding: .5rem .6rem; }
}
@media (max-width: 960px) {
  .kopfnavi { height: auto; min-height: 58px; flex-wrap: wrap; padding: .5rem 1rem; gap: .6rem; }
  .kopfnavi .menue-knopf { display: inline-flex; margin-left: auto; }
  .kopfnavi .hauptmenue { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding: .4rem 0 .8rem; }
  .kopfnavi.offen .hauptmenue { display: flex; }
  .kachel-navi { flex-direction: column; align-items: stretch; }
  .kopf-rechts { flex-wrap: wrap; }
  .kopfnavi .globale-suche { width: 100%; }
  .kopfnavi .nav-admin span { display: inline; }
  .kopfnavi .nutzermenue-inhalt { position: static; width: auto; box-shadow: none; margin-top: .4rem; }
}

/* Fassung 0.24: Top-Kandidaten – Stern zum Markieren, grün umrandet, oben in jeder Spalte */
.top-form { display: inline-flex; margin: 0; }
.stern-knopf { flex: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin: -.2rem -.25rem -.2rem auto;
  padding: 0; border: 0; border-radius: var(--r-klein); background: transparent; color: var(--text-blass); cursor: pointer; transition: color .16s, background .16s; }
.stern-knopf .symbol { width: 17px; height: 17px; }
.stern-knopf:hover { color: var(--gruen); background: var(--gruen-hell); }
.stern-knopf:focus-visible { outline: 2px solid var(--stahl); outline-offset: 1px; }
.stern-knopf.an, .top-knopf.an { color: var(--gruen); }
.stern-knopf.an .symbol, .top-knopf.an .symbol, .top-marke .symbol { fill: var(--gruen); stroke: var(--gruen); }
.top-knopf.an { background: var(--gruen-hell); border-color: var(--gruen-linie); font-weight: 600; }
.top-knopf .symbol { width: 17px; height: 17px; }
.bk-kopf .top-form { margin-left: auto; }
.bk-kopf .top-form + .bk-faellig { margin-left: .1rem; }
.board-karte.ist-top, .board-karte.ist-top.liegt-gelb, .board-karte.ist-top.liegt-rot {
  background: var(--gruen-zart); box-shadow: inset 0 0 0 2px var(--gruen), 0 6px 16px -8px rgba(29, 122, 74, .35); }
.board-karte.ist-top .bk-name { color: var(--gruen-dunkel); }
.karte.kopfkarte-profil.ist-top { background: var(--gruen-zart); border-radius: var(--r-tafel); padding: 1rem 1.2rem .5rem;
  box-shadow: inset 0 0 0 2px var(--gruen), 0 8px 22px -12px rgba(29, 122, 74, .4); }
.top-marke { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; margin-left: .5rem; padding: .2rem .6rem .2rem .45rem;
  border-radius: var(--r-rund); background: var(--gruen-hell); color: var(--gruen); font: 600 .8rem/1.3 var(--schrift); letter-spacing: 0; }
.top-marke .symbol { width: 14px; height: 14px; }
.top-marke.klein { margin-left: .4rem; padding: .05rem .5rem; font-size: var(--t-mikro); }
.name-zeile { display: flex; align-items: center; gap: .35rem; }
.name-zeile .stern-knopf { margin: -.2rem 0 -.2rem -.35rem; }
tr.ist-top > td { background: var(--gruen-zart); }
tr.ist-top { outline: 2px solid var(--gruen); outline-offset: -2px; }

/* Fassung 0.25 ------------------------------------------------------------------------------------------- */
/* Ganze Zeilen und Karten klickbar */
.klickbar { cursor: pointer; }
tr.klickbar:hover > td { background: var(--flaeche-hell); }
li.klickbar { border-radius: var(--r-klein); transition: background-color var(--uebergang); }
li.klickbar:hover { background: var(--flaeche-hell); }
.antrag-liste li, .klickliste li, .webstellen-liste li, .geburtstag-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .35rem; }
.antrag-liste .platz, .klickliste .platz, .webstellen-liste .platz, .geburtstag-liste .platz { flex: 1 1 14rem; min-width: 0; }
.antrag-liste .nebenbei, .klickliste .nebenbei { display: block; }
.unterkopf { font-size: 1rem; margin: 1rem 0 .4rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .7rem; }
.angaben-liste { display: grid; gap: .5rem; margin: 0; }
.angaben-liste > div { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--linie); }
.angaben-liste dt { color: var(--text-leise); font-weight: 600; font-size: var(--t-klein); }
.angaben-liste dd { margin: 0; }

/* Urlaub der externen Mitarbeiter */
.urlaub-zahlen { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }
.urlaub-gross { display: grid; gap: .1rem; padding: 1rem 1.4rem; border-radius: var(--r-tafel); background: var(--gruen-hell); color: var(--gruen-dunkel); min-width: 9rem; }
.urlaub-gross span { font-size: var(--t-beschriftung); font-weight: 600; }
.urlaub-gross strong { font-family: var(--schrift-titel); font-size: var(--t-start); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.urlaub-gross small { font-size: var(--t-beschriftung); }
.urlaub-teile { display: grid; gap: .3rem; margin: 0; flex: 1 1 14rem; }
.urlaub-teile div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--linie); padding: .25rem 0; }
.urlaub-teile dt { color: var(--text-leise); }
.urlaub-teile dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.urlaub-zeitkonto { margin: 1rem 0 0; font-size: var(--t-beschriftung); }
.konto-formular { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.konto-formular label { display: grid; gap: .2rem; font-size: var(--t-beschriftung); margin: 0; }
.konto-formular input { width: 8.5rem; }
.zeilen-klappe { position: relative; }
.zeilen-klappe > summary { list-style: none; }
.zeilen-klappe > summary::-webkit-details-marker { display: none; }
.zeilen-klappe[open] > form { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 5; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-huelle); box-shadow: var(--schatten-2); padding: .8rem; width: max-content; max-width: 80vw; }
.konten-import { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.konten-import .hilfe { flex-basis: 100%; }

/* Unterschrift vor Ort */
.unterschrift-feld { position: relative; margin: .8rem 0; border: 1.5px dashed var(--linie-stark); border-radius: var(--r-karte); background: var(--karte); overflow: hidden; }
.unterschrift-feld.fehlt { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }
.unterschrift-feld canvas { display: block; width: 100%; height: 9rem; touch-action: none; cursor: crosshair; }
.unterschrift-linie { position: absolute; left: 1rem; right: 1rem; bottom: 1.6rem; border-top: 1px solid var(--linie-stark); padding-top: .2rem; font-size: var(--t-mikro); color: var(--text-leise); pointer-events: none; }
.unterschrift-leeren { position: absolute; top: .5rem; right: .5rem; }
.unterschrift-bild { width: 100%; max-width: 360px; height: auto; border-bottom: 1px solid var(--linie-stark); }
.unterschrift-bild polyline { fill: none; stroke: var(--tinte); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Bestätigung durch den Kunden: Zeiten ändern */
.korrektur-zeile td { background: var(--stahl-zart); padding-top: .3rem; padding-bottom: .5rem; }
.korrektur-zeile input { width: 5.2rem; padding: .3rem .4rem; font-size: var(--t-klein); }
tr.geaendert > td { background: var(--gelb-hell); }
.korrektur-schalter { margin-top: .7rem; display: grid; gap: .6rem; }

/* Wichtige Links */
.link-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; }
.link-kachel { display: grid; gap: .4rem; border: 1px solid var(--linie); border-radius: var(--r-huelle); background: var(--karte); transition: border-color var(--uebergang), box-shadow var(--uebergang); }
.link-kachel:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-1); }
.link-ziel { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; color: var(--text); text-decoration: none; }
.link-ziel .symbol { color: var(--rot-marke); margin-top: .15rem; }
.link-ziel span { display: grid; gap: .1rem; min-width: 0; }
.link-ziel small { color: var(--text-leise); font-size: var(--t-mikro); overflow-wrap: anywhere; }
.link-steuerung { display: flex; gap: .3rem; align-items: center; padding: 0 .6rem .6rem; }
.link-steuerung form { margin: 0; }
.link-formular { display: grid; gap: .4rem; }
.link-formular label { display: grid; gap: .15rem; font-size: var(--t-beschriftung); margin: 0; }
.link-neu { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; margin-top: .9rem; }

/* Geburtstage */
.geburtstag-datum { display: inline-flex; align-items: center; gap: .35rem; min-width: 7.5rem; font-variant-numeric: tabular-nums; color: var(--text-leise); font-weight: 600; font-size: var(--t-klein); }
.geburtstag-datum.heute { color: var(--gruen); }
.geburtstag-datum .symbol { width: 16px; height: 16px; }

/* Bedarfe und Website-Stellen */
.webstellen-liste li { border-bottom: 1px solid var(--linie); }
.website-formular { border-top: 1px solid var(--linie); padding-top: .9rem; }

/* Akquise-Tour */
.route-liste { list-style: none; margin: .4rem 0 1rem; padding: 0; display: grid; gap: 0; counter-reset: stopp; }
.route-liste li { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem .35rem; border-bottom: 1px solid var(--linie); }
.route-liste .nebenbei { display: block; }
.route-nr { flex: none; width: 1.7rem; height: 1.7rem; border-radius: var(--r-rund); display: inline-grid; place-items: center; background: var(--rot-marke); color: var(--karte); font-weight: 700; font-size: var(--t-beschriftung); box-shadow: 0 2px 5px rgba(20, 28, 40, .2); }
.route-start { color: var(--text-leise); }
.route-start .symbol { margin: .2rem .35rem 0 .25rem; }

/* Unterlagen mit Fragen */
.unterlagen-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: 1.2rem; align-items: start; }
.chat-formular textarea { width: 100%; font-size: 1rem; }
.chat-formular .reihe { margin-top: .5rem; gap: .8rem; }
.chat-verlauf { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.chat-paar { display: grid; gap: .5rem; }
.chat-frage { justify-self: end; max-width: 85%; margin: 0; background: var(--stahl-zart); border-radius: var(--r-karte) var(--r-karte) var(--r-mini) var(--r-karte); padding: .6rem .85rem; }
.chat-antwort { max-width: 95%; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte) var(--r-karte) var(--r-karte) var(--r-mini); padding: .7rem .9rem; }
.chat-antwort p { margin: 0 0 .5rem; }
.chat-paar:not(.neueste) .chat-antwort { opacity: .85; }
.chat-zeit { font-size: var(--t-mikro); color: var(--text-leise); margin: .3rem 0 0 !important; }
.fundstellen summary { cursor: pointer; font-size: var(--t-beschriftung); color: var(--text-leise); }
.fundstellen ul { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .6rem; }
.fundstellen blockquote { margin: .3rem 0 0; padding: .4rem .7rem; border-radius: var(--r-klein); background: var(--flaeche); font-size: var(--t-beschriftung); color: var(--text-leise); white-space: pre-line; }
.dokument-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dokument-kachel { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--linie); border-radius: var(--r-huelle); padding-right: .5rem; }
.dokument-kachel form { margin: 0; }
.dokument-ziel { flex: 1; display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .8rem; color: var(--text); text-decoration: none; min-width: 0; }
.dokument-ziel span { display: grid; min-width: 0; }
.dokument-ziel small { color: var(--text-leise); font-size: var(--t-mikro); overflow-wrap: anywhere; }
.dokument-ziel .symbol { color: var(--rot-marke); margin-top: .15rem; }

/* Stellenausschreibungen und Serienmail */
.anzeigen-raster, .serien-raster { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.4fr); gap: 1.2rem; align-items: start; }
.serien-raster { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 1fr); }
.anzeige-text { width: 100%; font: .95rem/1.55 var(--schrift); white-space: pre-wrap; resize: vertical; background: var(--flaeche-hell); }
.serien-liste { max-height: 32rem; overflow-y: auto; }
.mail-vorschau { margin-top: 1rem; border-top: 1px solid var(--linie); padding-top: .8rem; }
.mail-vorschau pre { white-space: pre-wrap; font: .9rem/1.5 var(--schrift); background: var(--flaeche); border-radius: var(--r-steuer); padding: .8rem; margin: .4rem 0 0; }
.ausrichten-formular { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--r-huelle); background: var(--flaeche); }
.ausrichten-formular .reihe { gap: .5rem; flex-wrap: wrap; }
.ausrichten-formular input { flex: 1 1 16rem; }

@media (max-width: 960px) {
  .unterlagen-raster, .anzeigen-raster, .serien-raster { grid-template-columns: 1fr; }
  .angaben-liste > div { grid-template-columns: 1fr; gap: .1rem; }
}

/* 0.25: sieben Bereiche in der oberen Leiste – auf schmaleren Bildschirmen enger, darunter nur Symbole */
@media (max-width: 1800px) and (min-width: 961px) {
  .kopfnavi { gap: .8rem; padding: 0 1.2rem; }
  .kopfnavi .nav-eintrag { padding: .5rem .6rem; gap: .35rem; font-size: var(--t-klein); }
  .kopfnavi .globale-suche { width: 10rem; }
  .kopfnavi .marke-text { display: none; }
}
.urlaub-teile div { display: grid; grid-template-columns: 1fr auto; }
.urlaub-teile dd { white-space: nowrap; }
.korrektur-zeile td { white-space: nowrap; }
@media (max-width: 600px) {
  .korrektur-zeile input { width: 4.3rem; padding: .3rem .3rem; font-size: var(--t-klein); }
  .korrektur-zeile input[type=number] { width: 3.4rem; }
}

/* Fassung 0.26: Bewerberblitz, Aufenthalt und Arbeitserlaubnis */
.blitz-segmente { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.blitz-segmente a { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: var(--r-rund); border: 1px solid var(--linie-stark);
  background: var(--karte); color: var(--text); text-decoration: none; font-weight: 500; transition: border-color var(--uebergang), background-color var(--uebergang); }
.blitz-segmente a:hover { border-color: var(--stahl); }
.blitz-segmente a.aktiv { background: var(--rot-marke); border-color: var(--rot-marke); color: var(--karte); font-weight: 600; }
.blitz-segmente a.aktiv .zahl-marke { background: rgba(255, 255, 255, .25); color: var(--karte); }
.blitz-suche input { flex: 1 1 16rem; }
.blitz-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.blitz-liste { max-height: 30rem; overflow-y: auto; }
.blitz-liste input[type=email] { width: 100%; min-width: 11rem; font-size: var(--t-beschriftung); padding: .35rem .5rem; }
.blitz-mail { font-size: var(--t-beschriftung); overflow-wrap: anywhere; }
.blitz-liste .marke-klein { margin-left: .3rem; }
.frist-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem .35rem; border-bottom: 1px solid var(--linie); }
.frist-liste .platz { flex: 1 1 12rem; }
.frist-datum { min-width: 7.5rem; font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--t-klein); }
.frist-datum.rot { color: var(--rot); }
.frist-datum.gelb { color: var(--gelb); }
@media (max-width: 960px) { .blitz-raster { grid-template-columns: 1fr; } }

/* ---- Fassung 0.27: Abschläge ---- */
.start-reiter { margin-top: -.6rem; }
.abschlag-kennzahlen { margin-bottom: 1.2rem; }
.abschlag-tabelle th, .abschlag-tabelle td { vertical-align: top; }
.abschlag-tabelle thead th { position: sticky; top: 0; background: var(--karte); z-index: 1; white-space: nowrap; }
.abschlag-tabelle .eingabe-zahl { width: 5.2rem; text-align: right; padding: .3rem .45rem; }
.abschlag-tabelle select { width: 4.2rem; padding: .3rem .35rem; }
.abschlag-haken { display: flex; gap: .55rem; margin-top: .3rem; font-size: var(--t-mikro); color: var(--text-leise); white-space: nowrap; }
.abschlag-haken label { display: inline-flex; align-items: center; gap: .2rem; font-weight: 400; margin: 0; }
.abschlag-haken input { margin: 0; }
.abschlag-ergebnis { min-width: 10.5rem; }
tr.abschlag-teil td:first-child { box-shadow: inset 3px 0 0 var(--gelb); }
tr.abschlag-nichts td:first-child { box-shadow: inset 3px 0 0 var(--rot); }
tr.abschlag-voll td:first-child { box-shadow: inset 3px 0 0 var(--gruen); }
.abschlag-tabelle tfoot th, .abschlag-tabelle tfoot td { border-top: 2px solid var(--linie); padding-top: .6rem; }
.abschlag-filter { flex-wrap: wrap; align-items: center; }
.abschlag-filter label { display: flex; align-items: center; gap: .45rem; margin: 0; }
.abschlag-filter input[type=search] { width: 15rem; margin: 0; }
.abschlag-tabelle td:first-child { min-width: 10rem; }
.abschlag-tabelle th, .abschlag-tabelle td { padding-left: .45rem; padding-right: .45rem; }
/* 0.27.1: Zugänge und Abgänge */
.abschlag-wechsel { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; margin-bottom: 1.2rem; }
.abschlag-wechsel h2 { font-size: 1rem; display: flex; align-items: center; gap: .35rem; margin: 0 0 .5rem; }
.abschlag-wechsel .schlichte-liste { max-height: 14rem; overflow-y: auto; margin: 0; }
.seitenkopf .knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; }
.seitenkopf .knopfreihe form { margin: 0; }
/* 0.30: Lohnabrechnungen im Mitarbeiter-Login */
.lohn-eintrag { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text); padding: .35rem 0; }
.lohn-eintrag:hover strong { text-decoration: underline; }
.lohn-eintrag > span { display: flex; flex-direction: column; }
/* 0.31: Kunde sucht gerade */
.sucht-kasten { background: var(--gruen-hell); border: 1px solid var(--gruen-linie); border-radius: var(--radius); padding: .8rem 1.1rem; margin: 0 0 1.2rem; }
.sucht-kasten h3 { margin: 0 0 .45rem; font-size: 1rem; color: var(--gruen); display: flex; align-items: center; gap: .4rem; }
.sucht-kasten ul { margin: 0; padding-left: 1.1rem; }
.sucht-kasten li { margin: .15rem 0; }
.sucht-kasten .nebenbei { margin: .4rem 0 0; }
/* 0.31: Bewerberpool */
.pool-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem 1rem; }
.pool-felder .pool-breit { grid-column: 1 / -1; }
.pool-tabelle td { vertical-align: top; }
.pool-marken { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.pool-ausschnitt { margin-top: .3rem; font-style: italic; max-width: 42rem; }
/* 0.31: Ansprechpartner von der Website */
.ap-block { margin: .6rem 0; }
.ap-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.inline-form { display: inline; margin: 0; }
/* 0.31: Arbeitsschutz */
.as-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.as-raster .as-breit { grid-column: 1 / -1; }
.as-haken { border: 1px solid var(--linie); border-radius: var(--radius); padding: .6rem .9rem; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.as-haken legend { font-weight: 600; padding: 0 .3rem; }
.meldung-zeile { margin: .25rem 0; }

/* 0.32: Meine Zeit (interne Mitarbeiter) */
.mz-tabelle td { vertical-align: middle; }
.mz-tabelle select { min-width: 8.5rem; }
.mz-tabelle .mz-uhr { width: 5.2rem; }
.mz-tabelle .mz-pause { width: 4.2rem; text-align: right; }
.mz-tabelle input[name^="bem_"] { min-width: 10rem; }
.mz-tabelle tr.mz-frei td { background: var(--flaeche, rgba(0,0,0,.025)); }
.mz-tabelle tr.mz-fehlt td:first-child { box-shadow: inset 3px 0 0 var(--gelb); }
.nowrap { white-space: nowrap; }
.text-rot { color: var(--rot); }
.mz-anfrage { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.mz-anfrage .platz { flex: 1 1 18rem; }
.nav-meine-zeit { position: relative; }
.nav-punkt { position: absolute; top: .1rem; right: .05rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: var(--r-rund); background: var(--rot-marke); color: var(--karte); font-size: var(--t-mikro); font-style: normal; font-weight: 700; line-height: 1.05rem; text-align: center; }

/* Fassung 0.35: Einsätze, Branchenzuschlag, Geschenke, Bewerberpool-Auswahl, Monatsansicht */
.el-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1rem; }
.el-filter .feld { flex: 1 1 200px; margin: 0; }
.el-filter .aktionen { margin: 0; }
.el-tabelle td { vertical-align: top; }
.el-tabelle .marke-klein.grau { margin: 0 .15rem .2rem 0; }
.bz-zeile { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.bz-zeile input { width: 4.2rem; padding: .25rem .35rem; text-align: right; }
.bz-tabelle td, .bz-tabelle th { white-space: nowrap; }
.vorlage-form { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .35rem; }
.vorlage-form input[type=file] { max-width: 14rem; font-size: var(--t-beschriftung); }
.gs-tabelle input[type=text], .gs-tabelle input[type=number] { padding: .25rem .4rem; }
.gs-tabelle .gs-anzahl { width: 4.2rem; text-align: right; }
.gs-tabelle .gs-preis { width: 5.6rem; text-align: right; }
.gs-tabelle .gs-ware { min-width: 10rem; }
.gs-tabelle .gs-notiz { min-width: 9rem; }
.gs-budget input { width: 7rem; text-align: right; }
.gs-rest-minus { color: var(--rot); font-weight: 600; }
.pool-auswahl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.monat-raster { font-size: var(--t-beschriftung); }
.monat-raster th, .monat-raster td { padding: .3rem .35rem; text-align: right; white-space: nowrap; }
.monat-raster th:first-child, .monat-raster td:first-child { text-align: left; position: sticky; left: 0; background: var(--karte, var(--karte)); }
.monat-raster .we { color: var(--text-leise, var(--text-blass)); background: var(--flaeche-hell); }
.monat-raster .fehlt { color: var(--rot); }
.monat-raster .frei { color: var(--text-leise, var(--text-blass)); font-style: italic; }
.ansicht-wechsel { display: inline-flex; gap: .15rem; padding: .15rem; border-radius: var(--r-steuer); background: var(--flaeche-tief); }
.ansicht-wechsel a { border-radius: var(--r-klein); text-decoration: none; color: var(--text-leise); }
.ansicht-wechsel a.aktiv { background: var(--karte); color: var(--text); font-weight: 600; box-shadow: var(--schatten-1); }

@media print {
  .seitenleiste, .kopf, header, nav, .reiter, .aktionen, .knopf, form.bz-form, .el-filter, .meldungen { display: none !important; }
  body { background: var(--karte) !important; }
  .karte { box-shadow: none !important; border: 0 !important; }
}

/* Fassung 0.36: fünf Bereiche oben, Unterpunkte als Klappmenü und als Leiste unter dem Kopf */
.kopfnavi .nav-gruppe { position: relative; margin: 0; }
.kopfnavi .nav-gruppe > .nav-eintrag .nav-pfeil { width: 14px; height: 14px; margin-left: -.1rem; color: var(--text-leise); transition: transform var(--uebergang); }
.kopfnavi .nav-gruppe:hover > .nav-eintrag .nav-pfeil, .kopfnavi .nav-gruppe:focus-within > .nav-eintrag .nav-pfeil { transform: rotate(180deg); }
.kopfnavi .nav-menue { position: absolute; left: 0; top: 100%; z-index: 40; min-width: 15rem; padding: .55rem .4rem .4rem; display: grid; gap: .1rem;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s; }
.kopfnavi .nav-menue::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.kopfnavi .nav-gruppe:hover .nav-menue, .kopfnavi .nav-gruppe:focus-within .nav-menue { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kopfnavi .nav-menue a { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: var(--r-segment); color: var(--text);
  text-decoration: none; font-size: var(--t-klein); font-weight: 500; white-space: nowrap; }
.kopfnavi .nav-menue a .symbol { width: 17px; height: 17px; color: var(--text-leise); }
.kopfnavi .nav-menue a:hover { background: var(--flaeche); }
.kopfnavi .nav-menue a.aktiv { background: var(--nav-aktiv); color: var(--rot-dunkel); font-weight: 600; }
.kopfnavi .nav-menue a.aktiv .symbol { color: var(--rot-marke); }
.bereich-leiste { display: flex; flex-wrap: wrap; gap: .25rem; padding: .2rem; border-radius: var(--r-huelle); background: var(--flaeche-tief); }
.bereich-leiste a { padding: .32rem .8rem; border-radius: var(--r-segment); color: var(--text-leise); text-decoration: none; font-size: var(--t-klein); font-weight: 500; white-space: nowrap;
  transition: background-color var(--uebergang), color var(--uebergang); }
.bereich-leiste a:hover { color: var(--text); background: rgba(255, 255, 255, .6); }
.bereich-leiste a.aktiv { background: var(--karte); color: var(--text); font-weight: 600; box-shadow: var(--schatten-1); }
@media (max-width: 960px) {
  .kopfnavi .nav-gruppe > .nav-eintrag .nav-pfeil { display: none; }
  .kopfnavi .nav-menue { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 .3rem 1.6rem;
    border: 0; box-shadow: none; background: transparent; }
  .kopfnavi .nav-menue::before { display: none; }
  .kopfnavi .nav-gruppe:not(.aktiv) .nav-menue { display: none; }
  .bereich-leiste { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* AÜ-Wiki */
.wiki-start { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .7rem; margin-bottom: 1.4rem; }
.wiki-kachel { display: flex; gap: .8rem; align-items: flex-start; padding: .95rem 1.05rem; border-radius: var(--r-karte); background: var(--karte); border: 1px solid var(--linie);
  box-shadow: var(--schatten-1); color: var(--text); text-decoration: none; transition: box-shadow var(--uebergang), transform var(--uebergang), border-color var(--uebergang); }
.wiki-kachel:hover { box-shadow: var(--schatten-2); transform: translateY(-1px); border-color: var(--linie-stark); }
.wiki-kachel .symbol { flex: none; margin-top: .1rem; color: var(--rot-marke); }
.wiki-kachel.wiki-werkzeug .symbol { color: var(--merkur); }
.wiki-kachel span { display: grid; gap: .2rem; min-width: 0; }
.wiki-kachel strong { font-size: 1rem; line-height: 1.3; }
.wiki-kachel small { color: var(--text-leise); font-size: var(--t-beschriftung); line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wiki-raster { display: grid; grid-template-columns: 15rem minmax(0, 47rem); gap: 1.6rem; align-items: start; }
.wiki-raster .wiki-inhalt { order: -1; }
.wiki-text { padding: 1.6rem 1.9rem; }
.wiki-text h2 { font-size: var(--t-abschnitt); margin: 1.6rem 0 .5rem; }
.wiki-text h2:first-child { margin-top: 0; }
.wiki-text p, .wiki-text li { line-height: 1.6; }
.wiki-text ul { padding-left: 1.2rem; margin: .4rem 0 .8rem; }
.wiki-text li + li { margin-top: .35rem; }
.wiki-inhalt { position: sticky; top: 84px; display: grid; gap: .1rem; }
.wiki-inhalt .beschriftung { margin: 0 0 .35rem .7rem; font-size: var(--t-beschriftung); font-weight: 600; color: var(--text-leise); }
.wiki-inhalt a { padding: .45rem .7rem; border-radius: var(--r-segment); color: var(--text); text-decoration: none; font-size: var(--t-klein); line-height: 1.35; }
.wiki-inhalt a:hover { background: var(--flaeche-tief); }
.wiki-inhalt a.aktiv { background: var(--karte); font-weight: 600; box-shadow: var(--schatten-1); }
.vorlagen-liste .klappe summary { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; }
.vorlage-text { white-space: pre-wrap; font-family: inherit; font-size: var(--t-klein); line-height: 1.55; margin: 0 0 1rem; color: var(--text); }
.link-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.link-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; }
.link-liste a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.link-knopf.gefahr { color: var(--rot); }
.knopf-symbol { padding: .3rem; }
.knopf-symbol .symbol { width: 16px; height: 16px; }
@media (max-width: 960px) { .wiki-raster { grid-template-columns: 1fr; } .wiki-inhalt { position: static; } .wiki-text { padding: 1.2rem; } }
.unterlagen-raster > * { min-width: 0; }
.dokument-kachel small { overflow-wrap: anywhere; }

/* Fassung 0.36: Einheitlichkeit – Formularfelder, kleine Knöpfe, Tabellenköpfe */
input:not([type]), input[type=number], input[type=tel], input[type=url] {
  width: 100%; font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  padding: .55rem .75rem; transition: border-color var(--uebergang), box-shadow var(--uebergang); }
input:not([type]):hover, input[type=number]:hover, input[type=tel]:hover, input[type=url]:hover { border-color: var(--linie-hover); }
/* Felder in einer Beschriftung erben sonst deren fette, kleinere Schrift */
label input:not([type=checkbox]):not([type=radio]):not([type=file]), label select, label textarea { font-weight: 400; font-size: 1rem; }
.abschlag-tabelle .eingabe-zahl, .gs-tabelle input { font-size: var(--t-klein); }
.knopf .symbol { flex: none; display: block; }
.knopf-klein { min-height: 2rem; line-height: 1.3; }
th { font-size: var(--t-mikro); }
.wochen-nav { align-items: center; }
.ansicht-wechsel a { padding: .28rem .8rem; font-size: var(--t-beschriftung); font-weight: 500; line-height: 1.3; }
.ansicht-wechsel a:not(.aktiv):hover { color: var(--text); }
.feld :is(input[type=text], input[type=search], input[type=date], input[type=email], input[type=tel], input[type=number], input:not([type]), select),
label > :is(input[type=text], input[type=search], input[type=date], input[type=email], input[type=tel], input[type=number], input:not([type]), select) { min-height: 2.75rem; }
/* Kennzahlen als ein Panel mit Haarlinien statt Einzelkacheln (DESIGN.md) */
.kacheln:not(.kacheln-filter) { gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-tafel); overflow: hidden; box-shadow: var(--schatten-1); }
.kacheln:not(.kacheln-filter) > .kachel { border: 0; border-radius: 0; box-shadow: none; background: var(--karte); }
.pool-felder > label { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; }
input[type=date] { height: 2.75rem; }
.reiter-gruppen { gap: 1.1rem; flex-wrap: wrap; row-gap: 0; }      /* 0.45: zehn Reiter passen sonst nicht in eine Zeile */
.werkzeugleiste .sortierung select, .sortierung label > select { min-height: 0; padding-top: .38rem; padding-bottom: .38rem; }
.werkzeugleiste { align-items: center; }
.felder > .feld { display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-width: 1180px) and (min-width: 961px) {
  .kachel-navi .nav-eintrag > .symbol:not(.nav-pfeil) { display: none; }
  .kopfnavi .globale-suche { width: 9rem; }
}
@media (max-width: 1100px) and (min-width: 961px) {
  .kachel-navi .nav-eintrag > .nav-pfeil { display: none; }
  .kopfnavi .nav-eintrag { padding: .5rem .55rem; }
  .kopfnavi .globale-suche { width: 2.75rem; transition: width var(--uebergang); }
  .kopfnavi .globale-suche:focus-within { width: 12rem; }
  .kopfnavi .globale-suche input::placeholder { color: transparent; }
}
.sortierung { flex-wrap: wrap; max-width: 100%; } .sortierung label { max-width: 100%; } .sortierung select { max-width: 100%; min-width: 0; }
@media (max-width: 600px) { .kacheln:not(.kacheln-filter) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kacheln:not(.kacheln-filter) .kachel-zahl { font-size: var(--t-kennzahl-klein); } }

/* Fassung 0.37: Stellentafel, Ampel, Schlagworte */
.ampel { display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .6rem .18rem .45rem; border-radius: var(--r-rund); font-size: var(--t-mikro); font-weight: 600; white-space: nowrap; }
.ampel i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 1px 2px rgba(20, 28, 40, .25); }
.ampel-gruen { background: var(--gruen-hell); color: var(--gruen); } .ampel-gruen i { background: var(--gruen); }
.ampel-gelb { background: var(--gelb-hell); color: var(--gelb); } .ampel-gelb i { background: var(--gelb-magnet); }
.ampel-rot { background: var(--rot-hell); color: var(--rot); } .ampel-rot i { background: var(--rot-marke); }
.ampel-grau { background: var(--flaeche-tief); color: var(--text-leise); } .ampel-grau i { background: var(--text-blass); }
.faellig-liste .ampel { padding: 0; background: none; align-self: flex-start; margin-top: .35rem; }
.stellen-tabelle td { vertical-align: top; }
.stellen-tabelle td:first-child { padding-top: .7rem; }
.stellen-tabelle td:nth-child(2) { min-width: 14rem; }
.stellen-tabelle th, .stellen-tabelle td { padding-left: .5rem; padding-right: .5rem; }
.stellen-tabelle .nebenbei a { color: inherit; font-weight: 500; }
.stellen-tabelle .stelle-links { display: flex; gap: .9rem; margin-top: .25rem; font-size: var(--t-beschriftung); }
.stellen-tabelle .stelle-links a { color: var(--akzent); font-weight: 500; }
.stellen-bemerkung { max-width: 38ch; }
.stellen-aktionen { white-space: nowrap; }
.stellen-aktionen .inline-form { display: inline-block; margin: 0 .2rem .25rem 0; }
.stellen-aktionen > .knopf { margin-bottom: .25rem; }
.knopf-ampel-gruen { background: var(--gruen); border-color: var(--gruen); color: var(--karte); }
.knopf-ampel-gruen:hover { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: var(--karte); }
.knopf-ampel-rot { background: var(--rot-marke); border-color: var(--rot-marke); color: var(--karte); }
.knopf-ampel-rot:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: var(--karte); }
.werkzeug-suche { flex: 1 1 18rem; width: auto; }
.werkzeug-wahl { flex: 0 1 14rem; width: auto; }
.reihe-eingabe { display: flex; gap: .5rem; flex-wrap: wrap; }
.reihe-eingabe input { flex: 1 1 18rem; width: auto; }
.eingabe-kurz { width: auto; flex: 0 1 16rem; }
.ablauf-schritte { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 1.1rem; padding: 0; color: var(--text-leise); font-size: var(--t-klein); }
.ablauf-schritte li { display: flex; align-items: center; gap: .5rem; }
.ablauf-schritte span { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: var(--t-mikro); font-weight: 700;
  background: var(--flaeche-tief); color: var(--text-leise); }
.ablauf-schritte .erledigt span { background: var(--gruen); color: var(--karte); }
.ablauf-schritte .jetzt { color: var(--text); font-weight: 600; }
.ablauf-schritte .jetzt span { background: var(--rot-marke); color: var(--karte); }
.ausschreibung-weiter { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.ausschreibung-weiter p { margin: 0 0 .4rem; }
.schlagwort-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.schlagwort { display: inline-block; padding: .12rem .55rem; border-radius: var(--r-rund); background: var(--stahl-zart); color: var(--blau); font-size: var(--t-beschriftung); font-weight: 500; }
.schlagwort-gruppe { margin-top: .5rem; }
.schlagwort-gruppe legend { font-size: var(--t-beschriftung); color: var(--text-leise); margin-bottom: .3rem; }
.option:has(input:checked) { border-color: var(--stahl); background: var(--stahl-zart); }
#schlagworte summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.schlagworte { padding-bottom: .8rem; }

/* Fassung 0.38: Gesellschaft und Niederlassung wählen – Holding hellblau, Niederlassungen als Auswahlliste */
.magnet.ges-andere { background: var(--holding); }
.standort-wahl { align-items: center; gap: .6rem 1rem; }
.nl-wahl { display: flex; align-items: center; gap: .5rem; margin: 0; }
.nl-wahl label { margin: 0; font-size: var(--t-beschriftung); font-weight: 600; color: var(--text-leise); white-space: nowrap; }
.nl-wahl select { width: auto; min-width: 15rem; min-height: 0; padding-top: .42rem; padding-bottom: .42rem; }
@media (max-width: 600px) { .nl-wahl { flex-wrap: wrap; } .nl-wahl select { min-width: 0; width: 100%; } }
/* Ampel als Auswahl (Fassung 0.38) */
.ampel-wahl { position: relative; display: inline-flex; align-items: center; margin: 0; border-radius: var(--r-rund); }
.ampel-wahl i { position: absolute; left: .55rem; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; box-shadow: 0 1px 2px rgba(20, 28, 40, .25); }
.ampel-wahl select { width: auto; min-height: 0; padding: .22rem 1.7rem .22rem 1.5rem; border-radius: var(--r-rund); font-size: var(--t-beschriftung); font-weight: 600;
  border: 1px solid transparent; background-color: transparent; color: inherit; cursor: pointer; }
.ampel-wahl.ampel-gelb { background: var(--gelb-hell); color: var(--gelb); } .ampel-wahl.ampel-gelb i { background: var(--gelb-magnet); }
.ampel-wahl.ampel-gruen { background: var(--gruen-hell); color: var(--gruen); } .ampel-wahl.ampel-gruen i { background: var(--gruen); }
.ampel-wahl.ampel-rot { background: var(--rot-hell); color: var(--rot); } .ampel-wahl.ampel-rot i { background: var(--rot-marke); }
.ampel-wahl select:hover { border-color: currentColor; }
.ampel-wahl [data-nur-ohne-js] { margin-left: .3rem; }
.stellen-tabelle td.stellen-bemerkung { max-width: 16rem; font-size: var(--t-beschriftung); color: var(--text-leise); }

/* Fassung 0.39: Vorlagen einheitlich – je Vorlage eine Zeile: Name, Stand, Aktion; aufklappbar */
.vorlagen-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.vorlagen-liste > li { border-bottom: 1px solid var(--linie); }
.vorlage-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 9rem; gap: .4rem 1rem; align-items: center; padding: .75rem .3rem;
  color: var(--text); text-decoration: none; cursor: pointer; list-style: none; border-radius: var(--r-klein); transition: background-color var(--uebergang); }
.vorlage-zeile::-webkit-details-marker { display: none; }
.vorlage-zeile:hover { background: var(--flaeche); }
.vorlage-name { display: grid; gap: .1rem; min-width: 0; }
.vorlage-name small { color: var(--text-leise); font-size: var(--t-beschriftung); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorlage-stand { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; }
.vorlage-aktion { display: inline-flex; align-items: center; justify-content: flex-end; gap: .3rem; color: var(--akzent); font-weight: 600; font-size: var(--t-klein); }
.vorlage-aktion .symbol { width: 16px; height: 16px; transition: transform var(--uebergang); }
.vorlage-klappe[open] .vorlage-aktion .nav-pfeil { transform: rotate(180deg); }
.vorlage-inhalt { padding: .2rem .3rem 1rem; }
.vorlage-inhalt .vorlage-form { margin-top: .4rem; }
@media (max-width: 700px) { .vorlage-zeile { grid-template-columns: minmax(0, 1fr) auto; } .vorlage-stand { grid-column: 1; } .vorlage-aktion { grid-row: 1; grid-column: 2; } }

.abschnitt-titel { font-size: var(--t-abschnitt); margin: 0 0 .7rem; }
.werkzeugleiste .sortierung input, .sortierung label > input { min-height: 0; padding-top: .38rem; padding-bottom: .38rem; }
.sortierung { align-items: center; }

/* Fassung 0.41: Fakt, Indiz, Einschätzung; Veränderungen seit dem letzten Matching; Marge */
.belege { margin: .2rem 0 .6rem; }
.belege li { padding: .2rem 0; font-size: var(--t-klein); line-height: 1.45; }
.beleg-art { display: inline-block; min-width: 6.2rem; padding: .05rem .45rem; border-radius: var(--r-rund); font-size: var(--t-mikro); font-weight: 600; text-align: center; margin-right: .3rem; }
.beleg-fakt { background: var(--gruen-hell); color: var(--gruen); }
.beleg-indiz { background: var(--gelb-hell); color: var(--gelb); }
.beleg-einschaetzung { background: var(--grau-hell); color: var(--text-leise); }
.veraenderung-zeile, .markt-zeile { margin: .6rem 0 0; font-size: var(--t-klein); }
.marge-zeile { margin: 0 0 .6rem; font-size: var(--t-klein); color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .beleg-art { min-width: 0; } }

/* Fassung 0.41.4: lange Listen nachladen */
.weitere-zeile { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0 2rem; flex-wrap: wrap; }

/* Fassung 0.42: Fortschritt des zvoove-Abgleichs */
.abgleich-balken { display: grid; grid-template-columns: 1fr auto; gap: .35rem .8rem; align-items: center; background: var(--stahl-zart); border: 1px solid var(--stahl-linie); border-radius: var(--radius); padding: .65rem 1rem; margin: 0 0 1rem; font-size: var(--t-klein); }
.abgleich-kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.abgleich-balken progress { width: 100%; height: .6rem; accent-color: var(--blau); }
.abgleich-zahl { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.2rem; text-align: right; }
.abgleich-balken.fertig { background: var(--gruen-hell); border-color: var(--gruen-hell); }

/* Fassung 0.42: Akquise-Tour – Firmen ansehen */
.akquise-links { white-space: nowrap; }
.akquise-links .knopf + .knopf { margin-left: .25rem; }

/* Fassung 0.42: Bewerberblitz – beide Spalten gleich hoch, Kopf und Liste auf einer Linie */
.blitz-raster { align-items: stretch; }
.blitz-raster > .karte { display: flex; flex-direction: column; margin: 0; }
.blitz-raster .karten-kopf { min-height: 2.6rem; align-items: center; }
.blitz-raster .blitz-liste { flex: 1 1 auto; height: 30rem; max-height: none; }
.blitz-raster .leer { flex: 1 1 auto; }
.blitz-raster tbody td { vertical-align: middle; height: 3.4rem; }
@media (max-width: 960px) { .blitz-raster .blitz-liste { height: auto; max-height: 30rem; } }

/* Fassung 0.42.2: Bereiche, die in sich scrollen, halten auch die unsichtbaren Beschriftungen (.unsichtbar ist
   absolut positioniert) – sonst verschiebt sich auf dem Handy die ganze Seite seitlich */
.board, .filter, .blitz-liste, .serien-liste, .bereich-leiste, .segmente { position: relative; }
.board { max-width: 100%; min-width: 0; }

/* Fassung 0.42.2: Feld unter einer Feldreihe mit gleichem Abstand wie zwischen den Reihen */
.felder + .feld, .felder + .felder { margin-top: .9rem; }

/* Fassung 0.42.2: Ergebnis der Schnittstellenprüfung */
.diagnose-felder { max-width: 28rem; overflow-wrap: anywhere; }

/* Fassung 0.44: Sperrvermerk */
.sperre-banner { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;
  padding: .9rem 1rem; border: 1px solid var(--rot-linie); border-radius: var(--r-huelle);
  background: var(--rot-hell); color: var(--rot-tief); }
.sperre-banner p { margin: .25rem 0 0; }
.sperre-banner .symbol { vertical-align: -4px; }
.sperre-hinweis { background: var(--karte); }
.sperr-marke { display: inline-block; margin-left: .4rem; padding: .1rem .55rem; border-radius: var(--r-rund);
  background: var(--rot); color: var(--karte); font-size: var(--t-beschriftung); font-weight: 600; vertical-align: middle; }
.sperr-marke.klein { font-size: var(--t-mikro); padding: 0 .45rem; }
.kopfkarte-profil.ist-gesperrt { border-top-color: var(--rot); }
tr.ist-gesperrt td { background: var(--rot-zart); }
.board-karte.ist-gesperrt { box-shadow: inset 0 0 0 2px var(--rot); background: var(--rot-zart); }
.board-karte .bk-kopf .sperr-marke { margin-left: auto; flex-shrink: 0; }
.board-karte .bk-name { overflow-wrap: break-word; min-width: 0; }
.sperre-kurz { font-size: var(--t-beschriftung); color: var(--rot-tief); margin-top: .2rem; }
.sperre-formular { margin: 1.2rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linie); }
.sperre-formular > summary { cursor: pointer; font-size: var(--t-klein); color: var(--text); width: max-content; }
.sperre-formular > summary .nebenbei { margin-left: .35rem; }
.sperre-formular > summary:hover { color: var(--rot-dunkel); }
.sperre-formular[open] > summary { margin-bottom: .5rem; }

/* Fassung 0.44: Kontaktpflege */
.pflege-liste { list-style: none; margin: 0; padding: 0; }
.pflege-zeile { padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.pflege-zeile:last-child { border-bottom: 0; }
.pflege-heute { background: var(--gruen-zart); margin: 0 -1rem; padding: .9rem 1rem; border-radius: var(--r-klein); }
.pflege-kopf { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pflege-anlaesse { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.pflege-anlaesse .symbol { width: 13px; height: 13px; vertical-align: -2px; }
.pflege-kontakt { text-align: right; min-width: 12rem; }
.pflege-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin-top: .6rem; }
.pflege-mail > summary { list-style: none; }
.pflege-mail > summary::-webkit-details-marker { display: none; }
.pflege-mail[open] { flex-basis: 100%; }
.pflege-mail[open] > form { margin-top: .5rem; max-width: 40rem; }
@media (max-width: 640px) { .pflege-kontakt { text-align: left; } }

/* Fassung 0.44: Nutzungs-Heatmap */
.nutzung-ungenutzt { display: flex; flex-wrap: wrap; gap: .35rem; }
.nutzung-tabelle td { vertical-align: top; }
.nutzung-elemente { margin-top: .5rem; font-size: var(--t-beschriftung); }
.nutzung-elemente td, .nutzung-elemente th { padding: .25rem .5rem; }
.heat { display: inline-block; min-width: 2.6rem; padding: .1rem .45rem; border-radius: var(--r-mini); text-align: right;
  font-variant-numeric: tabular-nums; }
.heat-0 { background: transparent; }
.heat-1 { background: #fdeceb; color: var(--rot-tief); }
.heat-2 { background: #f8cdc9; color: var(--rot-tief); }
.heat-3 { background: #ee9a93; color: var(--rot-tief); }
.heat-4 { background: #d9584f; color: var(--karte); }
.heat-5 { background: var(--rot-tief); color: var(--karte); }

/* Fassung 0.44: Stempelzeiten umwandeln */
.stempel-tabelle td { vertical-align: top; padding: .3rem .35rem; }
.stempel-tabelle select { min-width: 11rem; }
.stempel-tabelle input[type=date] { min-width: 9rem; }
.stempel-zeit { width: 4.6rem; }
.stempel-min { width: 4rem; }
.stempel-pause { white-space: nowrap; }
.stempel-pause input + label + input { margin-left: .2rem; }
tr.stempel-offen td { background: var(--gelb-hell); }
.nutzung-filter select { width: auto; }

/* Fassung 0.45: Anmeldecode */
.code-feld { font-size: var(--t-titel-klein); letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

/* Fassung 0.45: Ablagefeld für Unterlagen */
.ablage-feld { position: relative; display: grid; gap: .4rem; justify-items: center; text-align: center; padding: 1.4rem 1rem; cursor: pointer;
  border: 2px dashed var(--linie-hover); border-radius: var(--r-klein); background: var(--stahl-zart); color: var(--text); }
.ablage-feld .ablage { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ablage-feld.ziehen { border-color: var(--rot-marke); background: var(--rot-zart); }
.ablage-feld.hat-dateien { border-style: solid; border-color: var(--gruen-linie); background: var(--gruen-zart); }
.ablage-feld:focus-within { outline: 2px solid var(--rot-marke); outline-offset: 2px; }
.ablage-gewaehlt:empty { display: none; }

/* Fassung 0.46: Begrüßung beim ersten Anmelden */
.rundgang { background: linear-gradient(135deg, var(--blau-hell, #eef4fb), var(--karte)); border-color: var(--blau-linie, var(--linie)); }
.rundgang-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rundgang-kopf h2 { margin: 0; }
.rundgang-schritte { margin: .6rem 0 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.rundgang-schritte li { max-width: 60rem; }
.rundgang-zurueck { margin: 1.5rem 0 .5rem; }

/* Fassung 0.46: Suche – Vorschläge, Trefferliste, Filter-Chips */
.such-vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 40; margin: 0; padding: .3rem; list-style: none; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-huelle, var(--radius)); box-shadow: 0 14px 34px -12px rgba(20, 28, 40, .35); max-height: 60vh; overflow: auto; min-width: 22rem; }
.such-vorschlaege li { margin: 0; }
.such-zeile { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: baseline; padding: .45rem .6rem; border-radius: var(--r-klein); color: var(--text); text-decoration: none; }
.such-zeile .nebenbei { grid-column: 2; font-size: var(--t-beschriftung); }
.such-zeile:hover, .such-zeile.gewaehlt { background: var(--flaeche); text-decoration: none; }
.such-zeile.gewaehlt { box-shadow: inset 0 0 0 2px var(--stahl); }
.such-zeile.schwach .such-name { color: var(--text-leise); }
.such-name { font-weight: 600; }
.such-art { font-size: var(--t-mikro); font-weight: 600; text-transform: none; padding: .08rem .45rem; border-radius: var(--r-rund); background: var(--flaeche); color: var(--text-leise); white-space: nowrap; min-width: 5.6rem; text-align: center; }
.such-art-bewerber { background: var(--blau-hell); color: var(--blau); }
.such-art-kunde { background: var(--gruen-hell, #e6f4ea); color: var(--gruen, #2d6a4f); }
.such-art-mitarbeiter { background: var(--gelb-hell); color: var(--gelb); }
.such-art-stelle { background: var(--rot-hell, #fdecec); color: var(--rot); }
.such-alle { border-top: 1px solid var(--linie); margin-top: .3rem !important; padding: .45rem .6rem .2rem; font-size: var(--t-beschriftung); }
.such-treffer { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .25rem; }
.such-treffer .such-zeile { background: var(--karte); border: 1px solid var(--linie); padding: .6rem .8rem; }
.such-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.chip { border: 1px solid var(--linie); background: var(--karte); color: var(--text); border-radius: var(--r-rund); padding: .25rem .7rem; font: inherit; font-size: var(--t-beschriftung); cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; }
.chip.aktiv { background: var(--stahl); border-color: var(--stahl); color: var(--karte); }
.chip.aktiv .zahl-marke { background: rgba(255, 255, 255, .25); color: inherit; }
@media (max-width: 700px) { .such-vorschlaege { position: fixed; left: .5rem; right: .5rem; top: 3.6rem; min-width: 0; } }

/* Fassung 0.46: Akquise-Tour und Dispo-Board auf dem Handy */
.route-aktionen { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.route-aktionen .knopf { margin: 0; }
.nur-handy { display: none; }
.bk-anruf { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-mikro); font-weight: 600; color: var(--stahl); margin-bottom: .3rem; }
.board-spalten-wahl { display: none; }
@media (max-width: 860px) {
  .board-spalten-wahl { display: flex; gap: .35rem; overflow-x: auto; padding: .2rem .1rem .6rem; margin: 0 0 .3rem; scrollbar-width: none; }
  .board-spalten-wahl::-webkit-scrollbar { display: none; }
  .board-spalten-wahl .chip { flex: none; white-space: nowrap; }
  .board { scroll-snap-type: x mandatory; }
  .board-spalte { scroll-snap-align: start; }
  .bk-anruf { font-size: var(--t-beschriftung); padding: .25rem .6rem; border: 1px solid var(--linie); border-radius: var(--r-rund); background: var(--karte); }
}
@media (max-width: 760px) {
  .nur-handy { display: inline-flex; }
  .akquise-vorschlaege .tabellen-rollbar { overflow: visible; }
  .akquise-vorschlaege table, .akquise-vorschlaege tbody, .akquise-vorschlaege tr, .akquise-vorschlaege td { display: block; width: auto; }
  .akquise-vorschlaege thead { display: none; }
  .akquise-vorschlaege tr { position: relative; border: 1px solid var(--linie); border-radius: var(--radius); padding: .7rem .8rem .7rem 2.6rem; margin-bottom: .55rem; background: var(--karte); }
  .akquise-vorschlaege td, .akquise-vorschlaege td.rechts { border: 0; padding: .1rem 0; text-align: left; white-space: normal; }
  .akquise-vorschlaege td:first-child { position: absolute; left: .8rem; top: .75rem; padding: 0; }
  .akquise-vorschlaege td[data-label]:not([data-label="Firma"])::before { content: attr(data-label) ": "; color: var(--text-leise); font-size: var(--t-mikro); }
  .akquise-vorschlaege td[data-label="Firma"] { font-size: var(--t-klein); }
  .akquise-vorschlaege td.akquise-links { white-space: normal; display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
  .akquise-vorschlaege .akquise-links .knopf + .knopf { margin-left: 0; }
  .akquise-formular .zweispaltig { grid-template-columns: 1fr; }
}

/* Fassung 0.46: Zeitleiste in der Kunden-Akte */
.zeitleiste { list-style: none; margin: 0; padding: 0 0 0 .2rem; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: .95rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--linie); }
.zl-eintrag { display: grid; grid-template-columns: 1.6rem 6.2rem minmax(0, 1fr); gap: .5rem; align-items: baseline; padding: .35rem 0; position: relative; }
.zl-punkt { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--linie); color: var(--text-leise); align-self: start; }
.zl-punkt .symbol { width: 13px; height: 13px; }
.zl-blau .zl-punkt { background: var(--blau-hell); border-color: var(--blau); color: var(--blau); }
.zl-gruen .zl-punkt { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen); }
.zl-gelb .zl-punkt { background: var(--gelb-hell); border-color: var(--gelb-magnet); color: var(--gelb); }
.zl-rot .zl-punkt { background: var(--rot-hell); border-color: var(--rot); color: var(--rot); }
.zl-wann { font-size: var(--t-beschriftung); color: var(--text-leise); white-space: nowrap; }
.zl-text { min-width: 0; overflow-wrap: anywhere; }
.zl-zusatz { display: block; font-size: var(--t-beschriftung); }
.zl-wer { white-space: nowrap; }
.zeitleiste-mehr { margin-top: .5rem; }
.zeitleiste-mehr > summary { cursor: pointer; color: var(--stahl); font-size: var(--t-beschriftung); }
@media (max-width: 600px) { .zl-eintrag { grid-template-columns: 1.6rem minmax(0, 1fr); } .zl-wann { grid-column: 2; } .zl-text { grid-column: 2; } }

/* Fassung 0.47: Umsatz je Gesellschaft, aufklappbar nach Niederlassung */
.ums-liste { display: grid; gap: 0; margin: .8rem 0 .4rem; overflow-x: auto; }
.ums-zeile { display: grid; grid-template-columns: minmax(10rem, 1.6fr) repeat(5, minmax(6.5rem, 1fr)); gap: .6rem; padding: .45rem .5rem; align-items: baseline; border-bottom: 1px solid var(--linie); min-width: 44rem; }
.ums-zeile > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ums-kopf { font-size: var(--t-mikro); color: var(--text-leise); font-weight: 600; }
.ums-ges > summary { cursor: pointer; list-style: none; font-weight: 600; }
.ums-ges > summary::-webkit-details-marker { display: none; }
.ums-ges > summary > span:first-child::before { content: "›"; display: inline-block; width: 1rem; color: var(--text-leise); transition: transform .15s; }
.ums-ges[open] > summary > span:first-child::before { transform: rotate(90deg); }
.ums-ges > summary:hover { background: var(--flaeche); }
.ums-nl { font-size: var(--t-beschriftung); color: var(--text-leise); }
.ums-ges .ums-nl > span:first-child { padding-left: 1rem; }
.ums-summe { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--linie-stark); }

/* Fassung 0.47: Fristen in drei Gruppen */
.frist-gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.4rem; }
.frist-gruppe h3 { font-size: var(--t-klein); margin: 0 0 .5rem; display: flex; align-items: center; gap: .45rem; }
.frist-gruppe .zahl-marke.rot { background: var(--rot-hell); color: var(--rot); }
.frist-gruppe .frist-liste li { display: block; padding: .45rem .2rem; }
.frist-gruppe .frist-datum { display: block; min-width: 0; font-size: var(--t-beschriftung); margin-bottom: .1rem; }
.frist-gruppe h3 + .frist-liste { border-top: 1px solid var(--linie); }
.frist-gruppe .leer { margin: 0; font-size: var(--t-beschriftung); }
.frist-nl { display: block; font-size: var(--t-mikro); }
@media (max-width: 1100px) { .frist-gruppen { grid-template-columns: 1fr; } }

/* Fassung 0.47: echte Logos */
.logos { display: inline-flex; align-items: center; gap: .9rem; }
.logos-klein .logo-bild { height: 44px; width: 44px; }
.logos-klein.logos-zwei { gap: .35rem; }
.logos-klein.logos-zwei .logo-bild { height: 34px; width: 34px; }
.logos-gross .logo-bild { height: 120px; width: auto; }
.logos-gross.logos-zwei { gap: 1.6rem; }
.logos-gross.logos-zwei .logo-bild { height: 104px; }
.anmeldung-kopf { display: flex; justify-content: center; }
.oeffentlich-kopf .logos-gross .logo-bild { height: 72px; }
@media (max-width: 420px) { .logos-gross.logos-zwei .logo-bild { height: 64px; } }

/* Fassung 0.48: Pause als Minutenzahl neben Beginn und Ende */
.tag-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); }
.tag-felder .pause-feld input { text-align: right; }
.zelle-pause .pause-min { width: 100%; }
@media (max-width: 520px) { .tag-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); } }

/* Fassung 0.49: Zahlungsziele */
.altersliste li.ohne-ziel .alter-flaeche { fill: var(--rahmen-leise); }
.altersliste li.ohne-ziel .alter-name { color: var(--text-leise); }
.hinweis-zeile { display: flex; gap: .4rem; align-items: flex-start; font-size: var(--t-beschriftung); color: var(--text-leise); margin: .6rem 0; }
.hinweis-zeile .symbol { flex: none; width: 16px; height: 16px; margin-top: .1rem; }
.ziel-tabelle input.ziel-feld { width: 5.5rem; text-align: right; }
.ziel-tabelle tr.ohne td:first-child { font-weight: 600; }

/* Fassung 0.50: Hinweis an Diagrammsäulen */
.diagramm-tip { position: absolute; z-index: 60; pointer-events: none; background: var(--rahmen); color: var(--karte); border-radius: var(--r-klein); padding: .45rem .65rem; font-size: var(--t-beschriftung); box-shadow: 0 10px 24px -8px rgba(20, 28, 40, .45); display: grid; gap: .1rem; font-variant-numeric: tabular-nums; }
.diagramm-tip strong { font-weight: 600; }
.diagramm [data-tip] { cursor: pointer; }
.diagramm [data-tip]:hover { filter: brightness(1.12); }