/* Orivex CRM — Gestaltung.
   Heller Hintergrund, ruhige Farben, große Bedienflächen fürs Tablet.
   Keine Schriften von fremden Servern — Systemschriften, DSGVO-konform. */

:root {
  --grund:    #ffffff;   /* Seitenhintergrund */
  --flaeche:  #f3f6f8;   /* Eingabefelder, Auswahlflächen */
  --karte:    #ffffff;
  --rand:     #d5dde4;
  --rand-satt:#b6c2cc;
  --text:     #16202a;
  --gedaempft:#5b6c7c;
  --gold:     #8a6a2c;   /* dunkler als die Wortmarke, damit es auf Weiß trägt */
  --gold-hell:#C8A463;
  --teal:     #00736e;
  --teal-hell:#e2f3f2;
  --rot:      #b3271f;
  --rot-hell: #fbeceb;
  --gelb:     #96650a;
  --gelb-hell:#fdf3e2;
  --gruen:    #1d6b46;
  --gruen-hell:#e7f4ed;
  --radius:   12px;
  --schrift:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--grund); color: var(--text);
  font-family: var(--schrift); font-size: 18px; line-height: 1.6;
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------- Grundgerüst ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--rand);
}
.kopf .marke { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .12em; font-size: 15px; }
.kopf .marke img { height: 30px; }
.kopf .orivex-marke { display: inline-flex; align-items: center; gap: 10px; }
.kopf .produkt-marke { display: inline-flex; align-items: center; padding-left: 12px; border-left: 1px solid var(--rand); }
.kopf .marke .vorynex-logo { display: block; width: 186px; height: auto; object-fit: contain; }
@media (max-width: 650px) {
  .kopf .marke { min-width: 0; gap: 8px; }
  .kopf .orivex-marke > span { display: none; }
  .kopf .produkt-marke { padding-left: 8px; }
  .kopf .marke .vorynex-logo { width: 150px; }
}
.kopf .luecke { flex: 1; }

.inhalt { padding: 20px 18px; max-width: 1100px; margin: 0 auto; padding-bottom: 120px; }

h1 { font-size: 26px; line-height: 1.25; }

.modus {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rand-satt);
  background: #fff; color: var(--gedaempft); font-size: 16px; cursor: pointer;
}
.modus:hover { border-color: var(--teal); color: var(--teal); }
.modus.feld { border-color: var(--gold); color: var(--gold); background: #fdf9f1; font-weight: 600; }

/* ---------- Zeichnungen ---------- */
/* Eigene Strichzeichnungen aus bilder.js. Sie erben ihre Farben aus
   den Variablen oben — deshalb genügt hier die Ausrichtung. */
.bild { display: block; flex: 0 0 auto; }

/* ---------- Kacheln ---------- */
.kacheln { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kachel {
  display: block; text-align: left; width: 100%; cursor: pointer;
  padding: 22px 24px 24px; border-radius: var(--radius);
  background: var(--karte); border: 1px solid var(--rand);
  border-left: 5px solid var(--rand-satt); color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .06s;
  box-shadow: 0 1px 2px rgba(20,32,42,.05);
}
.kachel:hover { border-color: var(--rand-satt); box-shadow: 0 6px 18px rgba(20,32,42,.10); }
.kachel:hover .bild { transform: translateY(-2px); }
.kachel .bild { margin-bottom: 12px; transition: transform .15s; }
.kachel:active { transform: scale(.995); }
.kachel.gold { border-left-color: var(--gold-hell); }
.kachel.teal { border-left-color: var(--teal); }
.kachel h3 { margin: 0 0 6px; font-size: 20px; }
.kachel p  { margin: 0; font-size: 15px; color: var(--gedaempft); }

/* ---------- Der Bearbeitungsablauf ---------- */
.ablauf { margin-bottom: 20px; }
.ablauf-bahn {
  display: flex; gap: 0; list-style: none; margin: 0 0 14px; padding: 0;
  overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.ablauf-punkt {
  position: relative; flex: 1 1 0; min-width: 78px; text-align: center;
  padding-top: 30px; font-size: 14px; color: var(--gedaempft);
}
/* Die Linie zwischen den Punkten. Sie läuft hinter den Marken durch
   und wird links vom ersten sowie rechts vom letzten Punkt gekappt. */
.ablauf-punkt::before {
  content: ''; position: absolute; top: 11px; left: 0; right: 0; height: 2px;
  background: var(--rand); z-index: 0;
}
.ablauf-punkt:first-child::before { left: 50%; }
.ablauf-punkt:last-child::before  { right: 50%; }
.ablauf-punkt.fertig::before { background: var(--teal); }
.ablauf-marke {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: #fff; border: 2px solid var(--rand-satt); color: #fff;
}
.ablauf-punkt.fertig .ablauf-marke { background: var(--teal); border-color: var(--teal); }
.ablauf-punkt.offen  .ablauf-marke { border-color: var(--gold); border-width: 3px; background: #fff; }
.ablauf-punkt.offen  .ablauf-titel { color: var(--gold); font-weight: 700; }
.ablauf-punkt.fertig .ablauf-titel { color: var(--teal); }
.ablauf-punkt.hier   .ablauf-titel { text-decoration: underline; text-underline-offset: 3px; }
.ablauf-titel { display: block; padding: 0 4px; }

.ablauf-jetzt {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px;
  padding: 16px 18px; border-radius: var(--radius);
  background: #fdfaf4; border: 1px solid #ecdfc6; border-left: 5px solid var(--gold);
}
.ablauf-jetzt.fertig { background: var(--gruen-hell); border-color: #bcdcc9; border-left-color: var(--gruen); }
.ablauf-jetzt-titel { font-weight: 700; margin-bottom: 4px; }
.ablauf-jetzt p { margin: 0; font-size: 16px; color: var(--gedaempft); line-height: 1.5; }

/* ---------- „Wie geht es weiter?" ---------- */
.weiter {
  display: flex; align-items: center; gap: 16px; width: 100%; cursor: pointer;
  text-align: left; background: transparent; color: var(--text);
  border: 0; border-bottom: 1px solid var(--rand);
  padding: 16px 6px; min-height: 72px; font-size: 18px;
}
.weiter:last-child { border-bottom: 0; }
.weiter:hover { background: var(--flaeche); }
.weiter.haupt {
  background: var(--teal-hell); border: 2px solid var(--teal); border-radius: 10px;
  padding: 16px; margin-bottom: 10px;
}
.weiter.haupt:hover { background: #d3ebe9; }
.weiter > span:nth-child(2) { flex: 1; min-width: 0; }
.weiter-titel { display: block; font-weight: 600; }
.weiter-unter { display: block; font-size: 15px; color: var(--gedaempft); line-height: 1.4; }
.weiter-pfeil { font-size: 26px; color: var(--rand-satt); line-height: 1; }
.weiter:hover .weiter-pfeil { color: var(--teal); }

/* ---------- Leere Listen und Erfolgsköpfe ---------- */
.leerstelle { text-align: center; padding: 26px 16px 10px; }
.leerstelle .bild { margin: 0 auto 14px; opacity: .85; }
.leerstelle h3 { margin: 0 0 6px; font-size: 19px; }
.leerstelle p  { margin: 0; color: var(--gedaempft); font-size: 16px; }

.erfolg { display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; }

/* ---------- Karten und Listen ---------- */
.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 22px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(20,32,42,.05);
}
/* Ein kurzer goldener Strich über jeder Überschrift. Er ordnet die
   Karten, ohne dass es Linien oder Farbflächen braucht. */
.karte h2 { margin: 0 0 14px; padding-top: 10px; font-size: 20px; position: relative; }
.karte h2::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 34px; height: 3px; border-radius: 2px; background: var(--gold-hell);
}
.zeile { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rand); }
.zeile:last-child { border-bottom: 0; }
.zeile .haupt { font-weight: 600; }
.zeile .neben { color: var(--gedaempft); font-size: 15px; }

.liste-eintrag {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--rand);
  padding: 18px 6px; color: var(--text); font-size: 18px; min-height: 60px;
}
.liste-eintrag:hover { background: var(--flaeche); }
.liste-eintrag:last-child { border-bottom: 0; }

/* ---------- Formularfelder ---------- */
.feld { margin-bottom: 28px; }
.feld > label { display: block; font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.feld .hinweis {
  font-size: 16px; color: var(--gedaempft); margin: -4px 0 12px;
  border-left: 3px solid var(--gold-hell); padding: 4px 0 4px 12px; background: #fdfaf4;
}
.feld .pflicht { color: var(--rot); }

/* ---------- Handbuchtext in der Hilfe ---------- */
.handbuch { font-size: 17px; line-height: 1.6; margin-top: 12px; }
.handbuch p { margin: 0 0 10px; }
.handbuch h4 { font-size: 17px; margin: 16px 0 6px; color: var(--gold); }
.handbuch ul { margin: 0 0 10px; padding-left: 20px; }
.handbuch li { margin-bottom: 5px; }
.handbuch code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px;
  background: #f4f1ea; padding: 1px 5px; border-radius: 4px;
}
.handbuch pre {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px;
  background: #f7f5f0; border-left: 3px solid var(--gold); padding: 10px 12px;
  border-radius: 6px; overflow-x: auto; white-space: pre-wrap;
}
.handbuch table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 16px; }
.handbuch th {
  text-align: left; background: #f4f1ea; color: #6d5322; font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid #d8cdb5;
}
.handbuch td { padding: 8px 10px; border-bottom: 1px solid var(--rand); vertical-align: top; }

/* Rückmeldung genau am betroffenen Feld statt am Bildschirmrand */
.feld .feldfehler {
  font-size: 16px; margin: 8px 0 0; padding: 8px 12px; border-radius: 8px;
  border-left: 4px solid var(--rot); background: #fdf3f2; color: var(--rot);
}
.feld .feldfehler.weich {
  border-left-color: var(--gold); background: #fdfaf4; color: var(--gedaempft);
}
.feld.fehlerhaft > label { color: var(--rot); }
.feld.fehlerhaft input, .feld.fehlerhaft select, .feld.fehlerhaft textarea {
  border-color: var(--rot);
}

input[type=text], input[type=tel], input[type=email], input[type=date],
input[type=number], input[type=password], textarea, select {
  width: 100%; padding: 16px; border-radius: 10px; min-height: 56px;
  background: #fff; border: 1px solid var(--rand-satt); color: var(--text);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, select:focus {
  outline: 3px solid var(--teal-hell); outline-offset: 0; border-color: var(--teal);
}

/* Auswahl als große Flächen — für den Finger gedacht */
.optionen { display: grid; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 18px; border-radius: 10px; text-align: left; min-height: 62px;
  background: #fff; border: 1px solid var(--rand-satt); color: var(--text); font-size: 18px;
}
.option:hover { border-color: var(--teal); }
.option.aktiv { border-color: var(--teal); border-width: 2px; background: var(--teal-hell); font-weight: 600; }
.option .haken {
  width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto;
  border: 2px solid var(--rand-satt); display: grid; place-items: center;
  font-size: 17px; background: #fff;
}
.option.aktiv .haken { border-color: var(--teal); color: var(--teal); }

.skala { display: flex; gap: 10px; }
.skala button {
  flex: 1; padding: 20px 0; border-radius: 10px; cursor: pointer; min-height: 64px;
  background: #fff; border: 1px solid var(--rand-satt); color: var(--text);
  font-weight: 600; font-size: 20px;
}
.skala button:hover { border-color: var(--teal); }
.skala button.aktiv { border-color: var(--teal); border-width: 2px; background: var(--teal-hell); color: var(--teal); }

/* ---------- Schaltflächen ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 17px 28px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--gold); color: #fff; font-weight: 700; font-size: 18px; min-height: 58px;
}
.knopf:hover { background: #75591f; }
.knopf.neben { background: #fff; border: 2px solid var(--teal); color: var(--teal); }
.knopf.neben:hover { background: var(--teal-hell); }
.knopf.leise { background: #fff; border: 1px solid var(--rand-satt); color: var(--gedaempft); font-weight: 600; }
.knopf.leise:hover { border-color: var(--rand-satt); background: var(--flaeche); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }

.fussleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 12px; padding: 14px 18px;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--rand);
  backdrop-filter: blur(8px); box-shadow: 0 -2px 10px rgba(20,32,42,.06);
}
.fussleiste .knopf { flex: 1; }

/* ---------- Fortschritt ---------- */
.fortschritt { height: 6px; background: var(--flaeche); border-radius: 3px; overflow: hidden; margin-bottom: 20px; }
.fortschritt div { height: 100%; background: var(--teal); transition: width .2s; }
.schritt-name { font-size: 16px; color: var(--gedaempft); margin-bottom: 8px; }

/* ---------- Ampel und Merker ---------- */
.merker {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 600; border: 1px solid var(--rand-satt);
  color: var(--gedaempft); background: #fff;
}
.merker.gruen { color: var(--gruen); border-color: var(--gruen); background: var(--gruen-hell); }
.merker.gelb  { color: var(--gelb);  border-color: var(--gelb);  background: var(--gelb-hell); }
.merker.rot   { color: var(--rot);   border-color: var(--rot);   background: var(--rot-hell); }

.ampel {
  border-left: 5px solid var(--rand-satt); padding: 16px 18px; margin-bottom: 16px;
  background: var(--karte); border-top: 1px solid var(--rand);
  border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ampel.gruen { border-left-color: var(--gruen); }
.ampel.gelb  { border-left-color: var(--gelb); }
.ampel.rot   { border-left-color: var(--rot); }
.ampel .betrag { font-size: 34px; font-weight: 700; color: var(--teal); line-height: 1.2; margin-top: 6px; }
.ampel ul { margin: 12px 0 0; padding-left: 20px; font-size: 16px; color: var(--gedaempft); }
.ampel ul li { margin-bottom: 6px; }

/* ---------- Meldungen ---------- */
.meldung { padding: 15px 18px; border-radius: 10px; margin-bottom: 16px; font-size: 17px; }
.meldung.warn   { background: var(--gelb-hell);  border: 1px solid var(--gelb);  color: #6b4907; }
.meldung.fehler { background: var(--rot-hell);   border: 1px solid var(--rot);   color: #8a1e18; }
.meldung.ok     { background: var(--gruen-hell); border: 1px solid var(--gruen); color: #145034; }

.offline-hinweis {
  position: fixed; top: 72px; left: 18px; right: 18px; z-index: 40;
  padding: 13px 16px; border-radius: 10px; text-align: center; font-size: 17px;
  background: var(--gelb-hell); border: 1px solid var(--gelb); color: #6b4907; font-weight: 600;
}

/* ---------- Anmeldung ---------- */
.anmeldung { max-width: 440px; margin: 6vh auto; padding: 24px; }
.anmeldung img { height: 70px; display: block; margin: 0 auto 18px; }
.anmeldung-bild { display: flex; justify-content: center; margin-bottom: 22px; opacity: .9; }

/* ---------- Kundenansicht: alles außer dem Feld gesperrt ---------- */
body.kundenansicht .kopf, body.kundenansicht .fussleiste { display: none; }
body.kundenansicht .inhalt { padding-top: 40px; }

@media (max-width: 640px) {
  html, body { font-size: 17px; }
  .inhalt { padding: 16px 14px; }
  .kacheln { grid-template-columns: 1fr; }
  h1 { font-size: 23px; }
  /* Die Ablaufleiste wird auf dem Telefon breiter als der Bildschirm.
     Sie darf seitlich rollen, statt die Namen abzuschneiden. */
  .ablauf-punkt { min-width: 68px; font-size: 13px; }
  .erfolg .bild { width: 42px; height: 42px; }
  .weiter { gap: 12px; }
}

@media print {
  .kopf, .fussleiste, .modus { display: none; }
}

.cockpit { margin: 0 0 28px; }
.cockpit-hero { background:linear-gradient(120deg,#0b0f14,#111827 65%,#153639);color:#f8fafc;padding:30px;border-radius:18px;border:1px solid #294044;margin-bottom:18px; }
.cockpit-hero h2 {font-size:clamp(24px,3.5vw,34px);line-height:1.2;margin:12px 0;letter-spacing:-.6px;color:#f8fafc}
.cockpit-eyebrow {color:#C8A463;font-size:12px;letter-spacing:1.8px;font-weight:650}
.cockpit-hero p {max-width:700px}.cockpit-hero .cockpit-link {color:#fff;border-color:#59767a}
.cockpit-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.cockpit-metric {border:1px solid var(--rand);border-top:3px solid #008b80;background:var(--karte);border-radius:12px;text-align:left;padding:18px;cursor:pointer;color:var(--text);min-width:0}
.cockpit-metric span,.cockpit-metric strong,.cockpit-metric small{display:block}.cockpit-metric span{font-size:14px;font-weight:600}.cockpit-metric strong{font-size:34px;margin:7px 0}.cockpit-metric small{color:var(--gedaempft);font-size:12px}
.cockpit-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cockpit-panel{border:1px solid var(--rand);border-radius:14px;padding:22px;background:var(--karte);min-width:0}.cockpit-panel h2{font-size:20px;margin:0 0 18px}
.cockpit-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rand)}.cockpit-row>div{min-width:0;overflow-wrap:anywhere}.cockpit-row small{display:block;color:var(--gedaempft);font-size:12px;margin-top:5px}
.cockpit-link{border:0;border-bottom:1px solid var(--rand);background:none;color:var(--teal);padding:10px 0;text-align:left;font-weight:600;cursor:pointer;font-size:14px;min-height:44px}.cockpit-row .cockpit-link{padding:0;min-height:32px;border:0}
.cockpit-tag{display:inline-block;font-size:12px;font-weight:650;padding:6px 9px;border-radius:8px;flex-shrink:0;max-width:160px}.cockpit-tag.rot{color:#94251f;background:#fbeceb}.cockpit-tag.gelb{color:#775008;background:#fdf3e2}.cockpit-tag.gruen{color:#195d3d;background:#e7f4ed}.cockpit-tag.grau{color:#4c5965;background:#edf1f4}
.cockpit-legend{display:flex;flex-wrap:wrap;gap:6px}.cockpit-total{font-size:20px;font-weight:650}.cockpit-muted{font-size:12px;color:var(--gedaempft);line-height:1.6;display:block;margin-top:14px}.cockpit progress{width:100%;height:12px;accent-color:#008b80}
.cockpit button:focus-visible{outline:3px solid #008b80;outline-offset:3px}.cockpit-metric:hover{background:#f3f9f8}
@media(max-width:900px){.cockpit-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.cockpit-panels{grid-template-columns:1fr}}
@media(max-width:450px){.cockpit-hero,.cockpit-panel{padding:16px}.cockpit-row{align-items:flex-start;flex-wrap:wrap}.cockpit-tag{max-width:100%}.cockpit-metric{padding:12px}}

/* Einfache Bedienung: Text bleibt die Bedeutung, Farbe unterstützt. */
html,body{font-size:18px;line-height:1.55}
.einfach-kopf{position:relative;gap:14px}.hauptnavigation{display:flex;gap:8px;flex:1;justify-content:center}.hauptnavigation .modus{font-size:18px;min-height:50px;border-radius:10px}
.hauptnavigation [aria-current=page]{background:#e2f3f2;border:2px solid #00736e;color:#005e59;font-weight:700}
.mehr-navigation summary{cursor:pointer;padding:12px 18px;border:1px solid var(--rand);border-radius:10px;font-weight:650;min-height:50px}.mehr-navigation{position:relative}.mehr-inhalt{position:absolute;right:0;top:100%;z-index:35;background:white;border:1px solid var(--rand);box-shadow:0 8px 24px #11182720;border-radius:12px;padding:12px;min-width:280px;display:grid;gap:8px}.mehr-inhalt .modus{text-align:left;min-height:48px;white-space:normal}
.knopf,.modus,.liste-eintrag{min-height:48px}.hinweis,.neben,.cockpit-muted,.cockpit-row small,.cockpit-metric small,.cockpit-link,.cockpit-tag{font-size:16px!important;line-height:1.5}.cockpit-row .cockpit-link{min-height:44px}.cockpit-metric span{font-size:17px}.cockpit-metric strong{font-size:32px}.cockpit-hero{padding:22px}.cockpit-hero h2{font-size:28px}.cockpit-hero .naechste-aktion{background:#f8fafc;color:#005e59;border-radius:9px;padding:12px 20px;font-size:18px;min-height:50px;display:inline-block}.cockpit-eyebrow{display:none}
.cockpit-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.cockpit-panels{gap:18px}.cockpit-tag{max-width:190px}.cockpit-total{font-size:20px}
.einfach-details{border:1px solid var(--rand);border-radius:12px;padding:16px;margin:18px 0;background:#f8fafc}.einfach-details>summary{font-size:18px;font-weight:650;cursor:pointer;min-height:44px;padding:8px}.einfach-details>section{margin-top:16px}
.schritthilfe{border-left:5px solid #00736e;background:#edf7f6;border-radius:10px;padding:12px 18px;margin:0 0 18px}.schritthilfe summary{font-weight:650;cursor:pointer;min-height:44px;padding:8px 0}.schritthilfe li{margin:10px 0;padding-left:8px}.schritthilfe ol{padding-left:25px}
.farblegende{display:flex;gap:12px;flex-wrap:wrap;font-size:16px;margin:14px 0}.farblegende span{padding:5px 10px;border-radius:8px}.farblegende .gruen{background:#e7f4ed;color:#195d3d}.farblegende .gelb{background:#fdf3e2;color:#775008}.farblegende .rot{background:#fbeceb;color:#94251f}.farblegende .blau{background:#e2f3f2;color:#005e59}
.meldung-dauer{border-left:5px solid #00736e;padding:14px 18px;margin-bottom:16px;border-radius:10px;background:#edf7f6}.meldung-dauer.warn{border-color:#96650a;background:#fdf3e2}.meldung-dauer.fehler{border-color:#b3271f;background:#fbeceb}.meldung-dauer button{float:right;background:none;border:1px solid currentColor;border-radius:8px;min-height:44px;margin-left:12px;padding:5px 12px;cursor:pointer}
.dokument-status{font-size:18px!important;font-weight:650;padding:12px;border-left:5px solid #96650a;background:#fdf3e2;border-radius:8px}.dokument-status.freigegeben,.dokument-status.versendet{border-color:#1d6b46;background:#e7f4ed}.dokument-status.versand_unklar{border-color:#b3271f;background:#fbeceb}
:focus-visible{outline:3px solid #00736e!important;outline-offset:3px}
@media(max-width:650px){.einfach-kopf{padding:10px;gap:8px}.einfach-kopf .marke{flex:1}.hauptnavigation{order:3;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.hauptnavigation .modus{padding:8px 3px;font-size:15px}.mehr-inhalt{max-width:calc(100vw - 24px)}.cockpit-metrics{grid-template-columns:1fr}.cockpit-metric{display:grid;grid-template-columns:1fr auto;column-gap:12px}.cockpit-metric strong{grid-column:2;grid-row:1/3;margin:0}.cockpit-metric small{grid-column:1}.cockpit-panels{grid-template-columns:1fr}.cockpit-row{flex-wrap:wrap}.cockpit-tag{max-width:100%}.inhalt{padding:16px 12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.karte{overflow-wrap:anywhere}.karte summary{min-height:44px;cursor:pointer;padding:8px 0}.karte label{line-height:1.6}
@media(max-width:650px){.hauptnavigation{flex:0 0 100%;min-width:0}.hauptnavigation .modus{min-width:0;white-space:normal}}

.verlassen-dialog{max-width:560px;width:calc(100% - 32px);border:2px solid #96650a;border-radius:14px;padding:24px;color:#16202a}.verlassen-dialog::backdrop{background:#11182799}.dialog-aktionen{display:flex;gap:12px;flex-wrap:wrap}

#dashboard-zahlungen{grid-column:1/-1}.zahlungsdetails summary{min-height:48px;padding:12px 0;cursor:pointer;font-weight:650}.zahlungsdetails{margin-top:12px}

/* Gemeinsame Tankanzeigen für das Controlling; Berateranteile bleiben in einem Kreis. */
.steuerung{--steuerung-rest:#e1e9eb;--zeiger-radius:69px;margin:22px 0 26px}
.steuerung-kopf{margin-bottom:15px}.steuerung-kopf h2{font-size:24px;margin:0 0 3px;letter-spacing:-.4px}
.steuerung-hinweis{font-size:14px;line-height:1.45;color:var(--gedaempft);margin:0}
.steuerung-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.steuerung-karte{min-width:0;border:1px solid var(--rand);border-radius:17px;background:linear-gradient(145deg,#fff 55%,#f6faf9);box-shadow:0 4px 18px #10252a0a;padding:20px 22px}
.steuerung-karte:last-child{grid-column:1/-1}
.steuerung-karte h3{font-size:19px;margin:0 0 16px;color:var(--text)}
.steuerung-inhalt{display:flex;align-items:center;gap:22px;min-width:0}
.steuerung-anzeige{width:174px;flex:0 0 174px}
.steuerung-kreis{width:174px;height:174px;border-radius:50%;position:relative;display:grid;place-items:center;isolation:isolate;border:0;padding:0;color:var(--text);cursor:pointer;font:inherit}
.steuerung-kreis:hover,.steuerung-kreis:focus-visible{outline:3px solid #00736e;outline-offset:4px}
.steuerung-kreis::before{content:'';position:absolute;inset:23px;border-radius:50%;background:var(--karte);z-index:0}
.steuerung-mitte{position:relative;z-index:3;text-align:center;max-width:112px;line-height:1.15}
.steuerung-wert{display:block;font-size:25px;font-weight:750;overflow-wrap:anywhere;letter-spacing:-.5px}
.steuerung-mitte span{display:block;font-size:13px;color:var(--gedaempft);margin-top:4px}
.steuerung-pfeil{position:absolute;top:50%;left:50%;width:20px;height:24px;z-index:2;background:#fff;clip-path:polygon(22% 0,78% 0,78% 42%,100% 42%,50% 100%,0 42%,22% 42%);filter:drop-shadow(0 1px 2px #142b2d);pointer-events:none}
.steuerung-berater{flex:1;min-width:0;display:grid;gap:7px}
.steuerung-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:7px 0;border:0;border-bottom:1px solid var(--rand);font-size:15px;background:transparent;color:var(--text);font-family:inherit;text-align:left;width:100%;cursor:pointer}
.steuerung-zeile:hover,.steuerung-zeile:focus-visible{background:#eaf5f2;outline:2px solid #00736e;outline-offset:1px;border-radius:5px}
.steuerung-zeile:last-child{border-bottom:0}
.steuerung-zeile strong{text-align:right;font-size:15px;white-space:normal}
.steuerung-name{display:inline-flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.steuerung-farbpunkt{width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.steuerung-zusatz{font-size:16px;font-weight:700;margin:16px 0 5px;border-top:1px solid var(--rand);padding-top:12px}
.steuerung-karte>.steuerung-hinweis{margin-top:5px}
.steuerung-warnung{font-size:15px;background:#fff3db;border-left:4px solid #ad781d;border-radius:8px;padding:12px 15px;margin:14px 0 0}
.steuerung-details{margin-top:16px;padding:18px 20px;background:#f4faf8;border:1px solid #a6c9c2;border-radius:14px}
.steuerung-details[hidden]{display:none}
.steuerung-details-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.steuerung-details-kopf h3{margin:0;font-size:20px}
.steuerung-schliessen{font:inherit;font-weight:700;color:#005e59;background:#fff;border:1px solid #8eb8b1;border-radius:8px;min-height:44px;padding:7px 12px;cursor:pointer}
.steuerung-akte{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-align:left;width:100%;min-height:54px;padding:10px 12px;margin:6px 0;border:1px solid var(--rand);border-radius:9px;background:#fff;color:var(--text);font:inherit;cursor:pointer}
.steuerung-akte:hover,.steuerung-akte:focus-visible{outline:2px solid #00736e;background:#eff8f5}
.steuerung-akte strong{flex:1 1 230px}.steuerung-akte span{color:var(--gedaempft)}.steuerung-akte small{font-size:14px;color:#005e59}
.steuerung-akte:disabled,.liste-eintrag:disabled{opacity:.67;cursor:not-allowed}
.steuerung-akte:disabled:hover{outline:0;background:#fff}
.steuerung-angebotszeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.steuerung-angebotszeile .steuerung-akte{flex:1 1 320px;width:auto}
.steuerung-entscheidung{border:1px solid #00736e;border-radius:9px;background:#fff;color:#005e59;padding:12px;font:inherit;font-weight:700;cursor:pointer}
.steuerung-entscheidung:hover,.steuerung-entscheidung:focus-visible{background:#e9f6f1;outline:2px solid #00736e}
@media(max-width:850px){.steuerung-grid{grid-template-columns:1fr}.steuerung-karte:last-child{grid-column:auto}}
@media(max-width:480px){.steuerung{--zeiger-radius:54px}.steuerung-karte{padding:16px}.steuerung-inhalt{gap:12px}.steuerung-anzeige{width:136px;flex-basis:136px}.steuerung-kreis{width:136px;height:136px}.steuerung-kreis::before{inset:18px}.steuerung-wert{font-size:20px}.steuerung-mitte span{font-size:12px}.steuerung-pfeil{width:14px;height:18px}.steuerung-zeile{display:block;font-size:14px;padding:4px 0}.steuerung-zeile strong{display:block;text-align:left;margin-left:20px;font-size:14px}.steuerung-zusatz{font-size:15px}}

.nur-vorlesen{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kurzhilfe{position:fixed;z-index:1000;max-width:min(360px,calc(100vw - 16px));background:#13252a;color:white;padding:12px 16px;border-radius:9px;font-size:16px;line-height:1.5;box-shadow:0 4px 18px #0003}.ablauf-punkt.vorgezogen{background:#fff3d9;color:#775008} [aria-invalid=true]{outline:3px solid #b3271f!important}dl dt{font-weight:650;margin-top:12px}dl dd{margin-left:0}

#projekt-fortschritt form{display:grid;gap:16px;margin:16px 0}#projekt-fortschritt input[type=checkbox]{width:24px;height:24px;margin-right:10px;vertical-align:middle}#projekt-fortschritt input[type=date]{min-height:44px}#projekt-fortschritt textarea{min-height:100px;width:100%;box-sizing:border-box}#projekt-fortschritt:focus{outline:3px solid var(--teal,#008b80);outline-offset:3px}

.empfehlung-form{display:grid;gap:16px;margin:16px 0}.empfehlungen details{padding:16px;margin:16px 0;border:1px solid #cbd5d9;border-radius:12px}.empfehlungen input,.empfehlungen textarea,.empfehlungen select{max-width:100%;box-sizing:border-box;min-height:44px}.empfehlungen textarea{width:100%;min-height:100px}.empfehlungen input[type=checkbox]{width:24px;height:24px;min-height:24px;vertical-align:middle;margin-right:10px}.empfehlungen p{white-space:pre-wrap;overflow-wrap:anywhere}

.provision-status{padding:10px 14px;border-left:5px solid var(--teal);border-radius:6px;font-weight:650;background:var(--teal-hell)}.provision-neu,.provision-zugeordnet{border-color:var(--gelb);background:var(--gelb-hell)}.provision-bezahlt{border-color:var(--gruen);background:var(--gruen-hell)}.provision-pruefen,.provision-abgelehnt{border-color:var(--rot);background:var(--rot-hell)}

.empfehlungen .feld{display:block;margin:12px 0}.empfehlungen .feld input,.empfehlungen .feld textarea,.empfehlungen .feld select{display:block;width:100%;margin-top:6px}
.empfehlungen [hidden]{display:none!important}

.beleg-bestaetigung{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:12px;padding:12px 0;cursor:pointer}.beleg-bestaetigung input[type=checkbox]{width:24px;height:24px;min-width:24px;flex:0 0 24px;margin:0;accent-color:var(--teal)}

/* Kompakte Steuerung: vier Anzeigen pro Reihe bei ausreichend Platz. */
.dashboard-einstieg{min-width:0}
.uebersicht-kopf-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.uebersicht-kopf-karten>.karte{min-width:0;margin-bottom:0}
@media(max-width:850px){.uebersicht-kopf-karten{grid-template-columns:1fr}}
@media(min-width:1200px){
  .inhalt{width:100%;max-width:none;padding-left:clamp(22px,2.5vw,64px);padding-right:clamp(22px,2.5vw,64px)}
  .inhalt>form{max-width:1100px}
  .dashboard-einstieg{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
  .dashboard-einstieg .erfolg,.dashboard-einstieg .dashboard-schnell{margin:0!important}
  .dashboard-einstieg .knopf{min-height:44px;padding:10px 18px;font-size:15px}
  .uebersicht-kopf-karten>.karte{padding:12px 16px}
  .uebersicht-kopf-karten>.karte h2{font-size:16px;margin-bottom:4px;padding-top:7px}
  .uebersicht-kopf-karten>.karte p{font-size:14px;margin:4px 0 6px}
  .uebersicht-kopf-karten>.karte .knopf{min-height:38px;padding:8px 12px;font-size:14px}
  .cockpit-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 18px;margin-bottom:12px}
  .cockpit-hero h2{font-size:20px;margin:0}
  .cockpit-hero p{font-size:14px;margin:0}
  .cockpit-hero .cockpit-link{min-height:40px;padding:7px 10px;white-space:nowrap}
}
.steuerung-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;overflow:visible;--zeiger-radius:43px}
.steuerung-grid .steuerung-karte{grid-column:auto;padding:12px;position:relative;transition:transform .18s ease,box-shadow .18s ease}
.steuerung-grid .steuerung-karte{--steuerung-rest:var(--ton,#e1e9eb);border-top:5px solid var(--akzent,#00736e);background:linear-gradient(155deg,var(--ton,#edf7f5),#fff 38%)}
.steuerung-grid .steuerung-karte h3{color:var(--akzent,#005e59)}
.steuerung-grid .steuerung-karte:nth-child(1){--akzent:#006b65;--ton:#e5f4f0}
.steuerung-grid .steuerung-karte:nth-child(2){--akzent:#3b6492;--ton:#eaf0f8}
.steuerung-grid .steuerung-karte:nth-child(3){--akzent:#74539a;--ton:#f0eaf6}
.steuerung-grid .steuerung-karte:nth-child(4){--akzent:#9b5377;--ton:#f8eaf1}
.steuerung-grid .steuerung-karte:nth-child(5){--akzent:#a45540;--ton:#f9eee9}
.steuerung-grid .steuerung-karte:nth-child(6){--akzent:#84620f;--ton:#f8f2df}
.steuerung-grid .steuerung-karte:nth-child(7){--akzent:#55742c;--ton:#edf4e6}
.steuerung-grid .steuerung-karte:nth-child(8){--akzent:#16777b;--ton:#e6f4f4}
.steuerung-grid .steuerung-karte:nth-child(9){--akzent:#455c9b;--ton:#ebedf8}
.steuerung-grid .steuerung-karte:nth-child(10){--akzent:#815298;--ton:#f3eafa}
.steuerung-grid .steuerung-karte:nth-child(11){--akzent:#a34e64;--ton:#f9ebef}
.steuerung-grid .steuerung-karte:nth-child(12){--akzent:#7d642b;--ton:#f6f1e7}
.steuerung-grid .steuerung-karte:nth-child(13){--akzent:#226d9b;--ton:#e9f2f9}
.steuerung-grid .steuerung-karte:nth-child(14){--akzent:#755c84;--ton:#f1edf5}
.steuerung-grid .steuerung-karte:nth-child(15){--akzent:#a26628;--ton:#f9f0e4}
.steuerung-grid .steuerung-karte:nth-child(16){--akzent:#2c765a;--ton:#e8f5ed}
.steuerung-grid .steuerung-karte h3{font-size:15px;line-height:1.2;margin-bottom:8px;min-height:36px}
.steuerung-grid .steuerung-inhalt{flex-direction:column;align-items:stretch;gap:7px}
.steuerung-grid .steuerung-anzeige{width:112px;flex:0 0 auto;align-self:center}
.steuerung-grid .steuerung-kreis{width:112px;height:112px}
.steuerung-grid .steuerung-kreis::before{inset:16px}
.steuerung-grid .steuerung-mitte{max-width:79px}
.steuerung-grid .steuerung-wert{font-size:16px}
.steuerung-grid .steuerung-mitte span{font-size:10px}
.steuerung-grid .steuerung-pfeil{width:12px;height:16px}
.steuerung-grid .steuerung-berater{gap:2px}
.steuerung-grid .steuerung-zeile{font-size:12px;padding:3px 0;min-height:25px}
.steuerung-grid .steuerung-zeile strong{font-size:12px}
.steuerung-grid .steuerung-zusatz{font-size:12px;margin:8px 0 2px;padding-top:6px}
.steuerung-grid .steuerung-hinweis{font-size:11px;line-height:1.25}
@media (hover:hover) and (pointer:fine){
  .steuerung-grid .steuerung-karte:hover,.steuerung-grid .steuerung-karte:focus-within{transform:scale(1.12);z-index:5;box-shadow:0 12px 32px #10252a36;background:#fff}
}
@media(min-width:1600px){
  .dashboard-einstieg{margin-bottom:6px}
  .uebersicht-kopf-karten{gap:10px;margin-bottom:8px}
  .uebersicht-kopf-karten>.karte{display:flex;align-items:center;gap:12px;padding:6px 12px}
  .uebersicht-kopf-karten>.karte h2{flex:0 0 190px;margin:0}
  .uebersicht-kopf-karten>.karte p{flex:1;margin:0}
  .uebersicht-kopf-karten>.karte .knopf{min-height:34px;padding:6px 10px;white-space:nowrap}
  .cockpit-hero{min-height:48px;padding:6px 12px;margin-bottom:8px}
  .cockpit-hero h2{font-size:18px}
  .cockpit-hero .cockpit-link{min-height:34px}
  .steuerung{margin:12px 0 16px}
  .steuerung-kopf{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
  .steuerung-kopf h2{font-size:21px}
  .steuerung-kopf .steuerung-hinweis{font-size:12px}
  .steuerung-grid{gap:8px}
  .steuerung-grid{--zeiger-radius:49px}
  .steuerung-grid .steuerung-inhalt{flex-direction:row;align-items:center;gap:12px}
  .steuerung-grid .steuerung-anzeige{width:124px;flex:0 0 124px}
  .steuerung-grid .steuerung-kreis{width:124px;height:124px}
  .steuerung-grid .steuerung-wert{font-size:18px}
  .steuerung-grid .steuerung-zeile,.steuerung-grid .steuerung-zeile strong{font-size:14px}
  .steuerung-grid .steuerung-zusatz{font-size:13px}
  .steuerung-grid .steuerung-hinweis{font-size:12px}
  .steuerung-grid .steuerung-karte{padding:10px 12px}
  .steuerung-grid .steuerung-karte h3{min-height:0;margin-bottom:5px}
  .steuerung-grid .steuerung-karte>.steuerung-hinweis{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
  .steuerung-grid .steuerung-karte:hover>.steuerung-hinweis,.steuerung-grid .steuerung-karte:focus-within>.steuerung-hinweis{clip-path:none;top:calc(100% - 2px);left:8px;right:8px;width:auto;height:auto;padding:8px;background:#fff;border:1px solid var(--rand);border-radius:7px;box-shadow:0 8px 18px #10252a26}
}
@media(max-width:1199px){.steuerung-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.steuerung-grid{grid-template-columns:1fr}.steuerung-grid .steuerung-inhalt{flex-direction:row;align-items:center}.steuerung-grid .steuerung-anzeige{flex-basis:112px}.steuerung-grid .steuerung-karte h3{min-height:0}}

.arbeitsstunden-filter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.arbeitsstunden-filter label{display:grid;gap:2px;font-size:11px;font-weight:650}
.arbeitsstunden-filter select{font:inherit;min-height:32px;border:1px solid var(--rand);border-radius:7px;background:#fff;padding:3px 6px;max-width:120px}
.arbeitsstunden-details .steuerung-akte{min-height:44px;margin:4px 0;padding:7px 10px}
.arbeitsstunden-details .steuerung-akte strong{flex-basis:190px}
@media(pointer:coarse){
  .steuerung-grid .steuerung-zeile{min-height:44px;font-size:14px;padding:8px 3px}
  .steuerung-grid .steuerung-zeile strong{font-size:14px}
  .arbeitsstunden-filter select{min-height:44px}
  .arbeitsstunden-details .steuerung-akte{min-height:48px}
}
@media(max-width:1100px) and (pointer:coarse){.steuerung-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px) and (pointer:coarse){.steuerung-grid{grid-template-columns:1fr}}

/* Kompakter Geschäftsstand: vertragliche, fakturierte und bezahlte Werte bleiben getrennt. */
.dashboard-kern{margin:8px 0 26px;color:var(--text)}
.dashboard-kern-kopf{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dashboard-kern-eyebrow{display:block;color:var(--gold);font-size:12px;font-weight:750;letter-spacing:.12em}
.dashboard-kern-kopf h2{margin:2px 0 0;font-size:25px;line-height:1.2;letter-spacing:-.025em}
.dashboard-kern-stand{margin:0;color:var(--gedaempft);font-size:14px}
.dashboard-kern-zahlen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.dashboard-kern-zahl{--kern-akzent:var(--teal);display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;min-height:173px;text-align:left;padding:16px;border:1px solid var(--rand);border-top:4px solid var(--kern-akzent);border-radius:12px;background:var(--karte);color:var(--text);box-shadow:0 2px 8px #16202a0b}
.dashboard-kern-fall:is(button):hover{background:#f7fbfa}
.dashboard-kern-fall:is(button):focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.dashboard-kern-zahl.dashboard-kern-gold{--kern-akzent:var(--gold-hell)}
.dashboard-kern-zahl.dashboard-kern-gruen{--kern-akzent:var(--gruen)}
.dashboard-kern-zahl.dashboard-kern-rot{--kern-akzent:var(--rot)}
.dashboard-kern-zahl-titel{margin:0;font-size:14px;font-weight:650;line-height:1.3;min-height:37px}
.dashboard-kern-zahl-wert{font-size:clamp(19px,2vw,27px);font-weight:750;line-height:1.15;letter-spacing:-.035em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.dashboard-kern-zahl-detail{font-size:13px;color:var(--gedaempft);line-height:1.3}
.dashboard-kern-unterbau{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
.dashboard-kern-bafa,.dashboard-kern-aktionen{min-width:0;padding:17px 18px;background:var(--karte);border:1px solid var(--rand);border-radius:12px}
.dashboard-kern-aktionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.dashboard-kern-aktionen>h3,.dashboard-kern-aktionen>.dashboard-kern-hinweis{grid-column:1/-1}
.dashboard-kern-bafa h3,.dashboard-kern-aktionen h3{margin:0 0 4px;font-size:18px;line-height:1.3}
.dashboard-kern-hinweis{margin:0 0 12px;color:var(--gedaempft);font-size:13px;line-height:1.45}
.dashboard-kern-phasen{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:7px;list-style:none;margin:0;padding:0}
.dashboard-kern-phasen li{min-width:0}
.dashboard-kern-phase{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;width:100%;min-height:80px;padding:10px 12px;text-align:left;border:1px solid var(--rand);border-radius:9px;background:var(--flaeche);color:var(--text)}
.dashboard-kern-phase strong{font-size:23px;line-height:1.1;font-variant-numeric:tabular-nums}
.dashboard-kern-phase span{font-size:12px;line-height:1.25;color:var(--gedaempft)}
.dashboard-kern-leer{padding:12px;color:var(--gedaempft);font-size:14px}
.dashboard-kern-fall{display:block;width:100%;padding:10px 0;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--rand);color:var(--text);font:inherit}
.dashboard-kern-fall:is(button){cursor:pointer}
.dashboard-kern-fall:last-child{border-bottom:0}
.dashboard-kern-fall-oben{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:14px}
.dashboard-kern-fall-oben strong{overflow-wrap:anywhere}
.dashboard-kern-fall-oben>span{white-space:nowrap;color:var(--teal);font-size:12px;font-weight:650}
.dashboard-kern-fall-titel{display:block;margin-top:2px;font-size:13px;color:var(--text)}
.dashboard-kern-fall small{display:block;margin-top:3px;color:var(--gedaempft);font-size:12px;line-height:1.35}
@media(max-width:1050px){.dashboard-kern-zahlen{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.dashboard-kern-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-kern-aktionen{grid-template-columns:1fr}.dashboard-kern-zahl{min-height:155px;padding:13px}.dashboard-kern-zahl-titel{min-height:0}.dashboard-kern-kopf h2{font-size:22px}}
@media(max-width:420px){.dashboard-kern-zahlen{grid-template-columns:1fr}.dashboard-kern-zahl{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px}.dashboard-kern-zahl-titel,.dashboard-kern-zahl-detail{grid-column:1}.dashboard-kern-zahl-wert{grid-column:2;grid-row:1/3;text-align:right;align-self:center;font-size:21px}.dashboard-kern-bafa,.dashboard-kern-aktionen{padding:14px}}

/* Nahe Aufgaben, Fristen und Termine bleiben sichtbar, ohne die Übersicht zu verbreitern. */
.dashboard-kern-tageslage{display:flex;align-items:center;gap:14px;min-width:0;min-height:66px;margin-top:10px;padding:9px 14px;border:1px solid var(--rand);border-left:4px solid var(--teal);border-radius:10px;background:var(--karte)}
.dashboard-kern-tageskopf{display:flex;align-items:center;flex-wrap:wrap;gap:5px 9px;flex:0 0 auto;min-width:0}
.dashboard-kern-tageskopf h3{margin:0;font-size:16px;line-height:1.25}
.dashboard-kern-tageshinweis{color:var(--gedaempft);font-size:12px;line-height:1.3}
.dashboard-kern-dringend{display:inline-block;white-space:nowrap;padding:4px 8px;border-radius:999px;background:var(--flaeche);color:var(--gedaempft);font-size:13px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.dashboard-kern-dringend-offen{background:var(--gelb-hell);color:#775008}
.dashboard-kern-tagesliste{display:flex;align-items:stretch;gap:6px;flex:1;min-width:0}
.dashboard-kern-tageseintrag{flex:1 1 0;min-width:0;min-height:44px;padding:4px 9px;border:0;border-left:1px solid var(--rand);border-radius:5px;background:transparent;text-align:left;color:var(--text);font:inherit;cursor:pointer}
.dashboard-kern-tageseintrag:hover{background:var(--teal-hell)}
.dashboard-kern-tageseintrag:focus-visible{outline:3px solid var(--teal);outline-offset:1px}
.dashboard-kern-tagesdatum{display:block;color:var(--gedaempft);font-size:12px;line-height:1.25}
.dashboard-kern-tageseintrag strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.35}
.dashboard-kern-tagesleer{margin:0;color:var(--gedaempft);font-size:14px}
@media(max-width:900px){.dashboard-kern-tageslage{align-items:stretch;flex-direction:column;gap:6px}.dashboard-kern-tagesliste{width:100%}}
@media(max-width:550px){.dashboard-kern-tagesliste{flex-direction:column}.dashboard-kern-tageseintrag{border-left:0;border-top:1px solid var(--rand);padding:7px 2px}.dashboard-kern-tageseintrag strong{white-space:normal}}

/* Angebote bleiben im Kundenkontext. */
.angebot-kundenkopf{font-weight:650;color:var(--teal);margin:22px 0 6px}
.angebot-erstellen{margin:22px 0}.angebot-erstellen>summary{display:block;width:fit-content;cursor:pointer}.angebot-erstellen>summary::after{content:' ▾';margin-left:10px}.angebot-erstellen[open]>summary::after{content:' ▴'}
.angebots-auswahl{max-width:720px;padding:20px;margin-top:12px;border:1px solid var(--linie,#dce3e5);border-radius:12px;background:var(--weiss,#fff)}
.angebots-auswahl label{display:block;font-weight:600}.angebots-auswahl input{display:block;box-sizing:border-box;width:100%;min-height:46px;margin-top:8px;padding:10px;border:1px solid #bccbcf;border-radius:8px;font:inherit}
.angebots-gruppe{border-top:1px solid #e1e8e9}.angebots-gruppe>summary{padding:16px 4px;font-weight:650;cursor:pointer}.angebots-gruppe[open]>summary{color:var(--teal)}
.angebots-art{display:block;width:100%;text-align:left;padding:13px 16px;margin:3px 0;border:0;border-radius:7px;background:#f3f7f7;color:inherit;font:inherit;cursor:pointer}.angebots-art:hover{background:#e3eeee}.angebots-art:focus-visible,.angebot-oeffnen:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.angebots-art[hidden],.angebots-gruppe[hidden]{display:none}
.angebot-tabellenrahmen{padding:0;overflow-x:auto}.angebot-liste{width:100%;border-collapse:collapse}.angebot-liste caption{text-align:left;padding:18px;font-weight:650}.angebot-liste th{text-align:left;background:#f3f7f7;font-size:13px;color:var(--gedaempft)}.angebot-liste th,.angebot-liste td{padding:14px 18px;border-bottom:1px solid #e1e8e9;vertical-align:top}.angebot-liste small{display:block;color:var(--gedaempft);margin-top:5px}.angebot-oeffnen{border:0;background:transparent;color:var(--teal);font:inherit;font-weight:650;text-align:left;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.angebot-status{display:inline-block;border-radius:5px;padding:3px 8px;background:#edf3f3;font-size:13px;white-space:nowrap}.angebot-leer{color:var(--gedaempft)}
@media(max-width:600px){.angebots-auswahl{padding:12px}.angebot-liste th,.angebot-liste td{padding:12px 8px}.angebot-liste{font-size:13px}.angebot-liste th:nth-child(2),.angebot-liste td:nth-child(2){display:none}.angebots-schritte{gap:5px!important}.angebots-schritte button{font-size:12px;padding:8px}}