/* Ettlich Gastronomie – Service-Portal */
:root {
  /* Marke */
  --rot: #c8382a;
  --rot-dunkel: #a32a1e;
  --rot-hell: #fdeeeb;
  /* Flächen und Text */
  --papier: #f2f4f6;          /* Seitenhintergrund und innere Flächen: leicht grau */
  --weiss: #ffffff;
  --linie: #e4e7eb;
  --linie-stark: #d3d8de;
  --tinte: #16181b;
  --tinte-weich: #3a4047;
  --grau: #697077;
  --grau-hell: #9ba2aa;
  /* Status */
  --gruen: #2f7d4f;
  --gruen-hell: #e9f4ed;
  --gelb: #9a6300;
  --gelb-hell: #fdf3de;
  --blau: #2d5b8a;
  --blau-hell: #e9f0f8;
  /* Form */
  --radius: 14px;
  --radius-gross: 20px;
  --radius-klein: 10px;
  --schatten: 0 1px 2px rgba(17, 24, 39, .04), 0 6px 18px rgba(17, 24, 39, .05);
  --schatten-stark: 0 2px 4px rgba(17, 24, 39, .06), 0 12px 28px rgba(17, 24, 39, .09);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--papier);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--rot-dunkel); text-underline-offset: 2px; }
img, video { max-width: 100%; }
h1, h2, h3 { line-height: 1.22; margin: 0 0 .5em; letter-spacing: -.015em; font-weight: 700; }
h1 { font-size: clamp(1.55rem, 4vw, 2.05rem); }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid #f3b3ab; outline-offset: 2px; border-radius: 6px; }

.icon { width: 24px; height: 24px; flex: none; }
.icon.klein { width: 18px; height: 18px; }
.icon.gross { width: 40px; height: 40px; }
.leise { color: var(--grau); }
.klein-text { font-size: .875rem; }
.sr-nur {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Kopf und Navigation ---------- */
.kopf { background: var(--tinte); color: #fff; }
/* Als App vom Home-Bildschirm: nicht unter die Statusleiste rutschen */
@supports (padding: env(safe-area-inset-top)) {
  .kopf { padding-top: env(safe-area-inset-top); }
  .fuss { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
.kopf-innen {
  width: 100%; max-width: 1080px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.marke { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; min-width: 0; }
/* Das EG-Monogramm steht ohne eigenen Hintergrund direkt auf der dunklen
   Kopfleiste. Die Buchstaben sitzen in der Mitte einer quadratischen Fläche –
   deshalb ein paar Pixel größer als die alte Kachel, sonst wirkt es verloren. */
.marke-zeichen { width: 46px; height: 46px; flex: none; display: block; margin: -4px 0; }
.marke-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.marke-text strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marke-text span { font-size: 12.5px; color: #b9bfc6; }
.kopf-login, .kopf-person {
  display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none;
  padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .09); font-size: 14.5px; font-weight: 500;
}
.kopf-login:hover, .kopf-person:hover { background: rgba(255, 255, 255, .17); }
.kopf-person span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Marke schiebt alles Weitere nach rechts – Sprache und Konto bleiben zusammen */
.kopf-innen .marke { margin-right: auto; }
.sprachwahl {
  display: inline-flex; gap: 2px; padding: 3px; flex: none;
  background: rgba(255, 255, 255, .09); border-radius: 999px;
}
.sprachwahl a {
  display: inline-block; padding: 5px 10px; border-radius: 999px; min-width: 36px;
  color: #cfd4d9; text-decoration: none; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-align: center; line-height: 1.3;
}
.sprachwahl a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.sprachwahl a.aktiv { background: var(--rot); color: #fff; }
/* Kein overflow hier: sonst würden die Klappmenüs abgeschnitten.
   Stattdessen umbricht die Leiste auf schmalen Bildschirmen. */
.navi {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 10px 10px;
}
.navi::-webkit-scrollbar { display: none; }
.navi a {
  color: #b9bfc6; text-decoration: none; padding: 8px 13px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; white-space: nowrap;
}
.navi a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.navi a.aktiv { color: #fff; background: rgba(255, 255, 255, .15); font-weight: 600; }
.navi .navi-ab { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Grundgerüst ---------- */
.inhalt { width: 100%; max-width: 1080px; margin: 0 auto; padding: 26px 16px 56px; flex: 1; }
.schmal { max-width: 640px; margin-left: auto; margin-right: auto; }
.fuss {
  padding: 22px 16px; text-align: center; font-size: 13.5px; color: var(--grau);
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; border-top: 1px solid var(--linie);
}
.fuss a { color: var(--grau); }
.karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 22px; margin-bottom: 16px; box-shadow: var(--schatten);
}
.karte > :last-child { margin-bottom: 0; }
.zurueck {
  display: inline-flex; align-items: center; gap: 3px; font-size: 14px; color: var(--grau);
  text-decoration: none; margin-bottom: 12px;
}
.zurueck:hover { color: var(--tinte); }
.titelzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.titelzeile h1 { margin: 0; }
.abschnitt-titel {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--grau);
  margin: 32px 0 13px; font-weight: 700;
}

/* ---------- Hinweise ---------- */
.hinweis {
  padding: 13px 16px; border-radius: var(--radius-klein); margin-bottom: 16px; font-size: 15px;
  border: 1px solid; display: flex; gap: 10px; align-items: flex-start;
}
.hinweis-ok { background: var(--gruen-hell); border-color: #c3e2cf; color: #1d5434; }
.hinweis-fehler { background: var(--rot-hell); border-color: #f4c7c1; color: var(--rot-dunkel); }
.hinweis-info { background: var(--blau-hell); border-color: #c9d9ec; color: var(--blau); }

/* ---------- Startseite, Kacheln ---------- */
.held { margin: 6px 0 28px; }
.held h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin-bottom: 6px; }
.held p { color: var(--grau); font-size: 1.05rem; margin: 0; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.kachel {
  position: relative; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 20px; text-decoration: none; color: var(--tinte); display: flex; flex-direction: column; gap: 7px;
  box-shadow: var(--schatten); transition: box-shadow .16s, transform .16s, border-color .16s;
}
.kachel:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-stark); transform: translateY(-2px); }
.kachel .icon {
  width: 42px; height: 42px; padding: 9px; border-radius: 12px;
  background: var(--rot-hell); color: var(--rot); margin-bottom: 4px;
}
.kachel strong { font-size: 1.06rem; }
.kachel span { color: var(--grau); font-size: 14.5px; line-height: 1.45; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 6px; padding: 1px 6px;
  overflow-wrap: anywhere;
}

/* Großer Knopf, z. B. "Zugang beantragen" */
.knopf.gross {
  min-height: 54px; font-size: 1.04rem; padding: 15px 26px; border-radius: var(--radius-klein);
}
.knopf.gross .icon { width: 22px; height: 22px; padding: 0; background: none; }

/* Kasten "Noch keinen Zugang?" unter der Anmeldung */
.zugang { text-align: center; border-style: dashed; }
.zugang h2 { margin: 0 0 6px; font-size: 1.1rem; }
.zugang p { margin: 0 0 16px; }

/* Hinweis kurz vor der automatischen Abmeldung */
.sitzungsband {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60; max-width: calc(100% - 32px);
  background: var(--tinte); color: #fff; border-radius: var(--radius-klein);
  padding: 12px 18px; font-size: 14px; line-height: 1.45; text-align: center;
  box-shadow: var(--schatten-stark);
}

/* ---------- Stand oben auf der Übersicht (Admin) ---------- */
.stand {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 0 0 22px;
}
.stand-kachel {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  align-items: center; gap: 2px 10px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
  padding: 12px 14px; text-decoration: none; color: var(--tinte);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.stand-kachel:hover { border-color: var(--linie-stark); box-shadow: var(--schatten); transform: translateY(-1px); }
.stand-kachel .icon { grid-row: span 2; background: var(--papier); color: var(--grau); }
.stand-kachel.voll .icon { background: var(--rot-hell); color: var(--rot-dunkel); }
.stand-zahl { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stand-kachel.voll .stand-zahl { color: var(--rot-dunkel); }
.stand-titel { grid-column: 2; font-size: 13.5px; font-weight: 600; }

/* Herkunft einer Defektmeldung – nur in der Bearbeitung, bewusst zurückhaltend */
.d-herkunft {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--linie);
  color: var(--grau-hell); font-size: 12.5px;
}
.d-herkunft .icon { background: none; width: 15px; height: 15px; padding: 0; color: var(--grau-hell); }

/* ---------- Schwarzes Brett ---------- */
.brett { margin: 0 0 24px; }
.brett-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.brett-kopf h2 { font-size: 1.08rem; margin: 0; }
.brett-zettel {
  background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--grau);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 10px;
}
.brett-zettel.b-anleitung { border-left-color: var(--tinte); }
.brett-zettel.b-sortiment { border-left-color: var(--rot); }
.brett-art { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--grau); margin-bottom: 4px; }
.brett-zettel strong { display: block; font-size: 1.02rem; }
.brett-zettel p { margin: 6px 0 0; color: var(--grau); font-size: 14.5px; line-height: 1.5; }
.brett-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.brett-fuss:empty { display: none; }
/* Überschrift für die Aushänge innerhalb des Bretts */
.brett-trenner {
  margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--linie);
  font-size: 1rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.brett-trenner span { font-size: 12.5px; font-weight: 400; color: var(--grau); }
.brett > .brett-kopf + .brett-trenner { margin-top: 0; padding-top: 0; border-top: 0; }

/* Kachel, die nur Informationen zeigt und nicht klickbar ist */
.kachel.ruhig { cursor: default; }
.kachel.ruhig:hover { border-color: var(--linie); box-shadow: var(--schatten); transform: none; }
.kachel.ruhig a { color: var(--tinte); font-weight: 600; }
.kachel.dunkel { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.kachel.dunkel span { color: #b9bfc6; }
.kachel.dunkel .icon { background: rgba(255, 255, 255, .12); color: #ff9c90; }
.kachel .zaehler, .zaehler {
  position: absolute; top: 14px; right: 14px; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px; background: var(--rot); color: #fff; font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rot); color: #fff; border: 1px solid transparent; border-radius: 11px;
  padding: 11px 18px; min-height: 44px; font-size: 15px; font-weight: 600; font-family: inherit;
  text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .08);
}
.knopf:hover { background: var(--rot-dunkel); }
.knopf:active { transform: translateY(1px); }
.knopf.zweit { background: var(--weiss); color: var(--tinte); border-color: var(--linie-stark); }
.knopf.zweit:hover { background: var(--papier); border-color: var(--grau-hell); }
.knopf.gruen { background: var(--gruen); }
.knopf.gruen:hover { background: #246240; }
.knopf.klein { padding: 7px 13px; min-height: 36px; font-size: 14px; border-radius: 9px; }
.knopf.breit { width: 100%; }
.knopf.link {
  background: none; color: var(--rot-dunkel); padding: 0; min-height: 0; font-weight: 500;
  text-decoration: underline; box-shadow: none; border: 0;
}
.knopf.link:hover { background: none; color: var(--rot); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Formulare ---------- */
.feld { margin-bottom: 18px; }
.feld label, .feld .label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 14.5px; }
.feld .hilfe { font-size: 13.5px; color: var(--grau); margin-top: 6px; line-height: 1.5; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=search], input[type=url], input[type=number], select, textarea {
  width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--tinte);
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  min-height: 46px; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-hell);
}
input[type=file] {
  width: 100%; font-size: 14.5px; padding: 10px; background: var(--papier);
  border: 1px dashed var(--linie-stark); border-radius: var(--radius-klein);
}
.check { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; cursor: pointer; font-weight: 400 !important; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--rot); flex: none; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Meldeformular ---------- */
.melden-kopf { margin-bottom: 20px; }
.pfad { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; min-height: 32px; }
.pfad li {
  font-size: 13.5px; background: var(--weiss); border: 1px solid var(--linie); color: var(--grau);
  padding: 5px 11px; border-radius: 999px;
}
.pfad li button { all: unset; cursor: pointer; }
.pfad li:hover { border-color: var(--rot); color: var(--tinte); }
.schritt { display: none; }
.schritt.aktiv { display: block; animation: rein .18s ease; }
@keyframes rein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.schritt-nr { font-size: 12.5px; font-weight: 700; color: var(--rot); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 5px; }
.schritt h2 { font-size: 1.3rem; margin-bottom: 18px; }
.wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
.wahl.gross { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.wahl label { position: relative; display: block; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl .opt {
  display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 14px 16px;
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: var(--radius);
  font-weight: 500; transition: border-color .15s, background .15s, transform .12s;
}
.wahl.gross .opt { flex-direction: column; justify-content: center; min-height: 132px; text-align: center; font-size: 1.04rem; gap: 8px; }
.wahl.gross .opt .icon { width: 46px; height: 46px; color: var(--rot); }
.wahl label:hover .opt { border-color: var(--grau-hell); transform: translateY(-1px); }
.wahl input:checked + .opt { border-color: var(--rot); background: var(--rot-hell); }
.wahl input:focus-visible + .opt { outline: 3px solid #f3b3ab; outline-offset: 2px; }
.nummer-eingabe { font-size: 1.45rem !important; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-align: center; }
.schritt-fuss { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.ergebnis { text-align: center; padding: 36px 22px; }
.ergebnis .haken-kreis {
  width: 74px; height: 74px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen);
  display: grid; place-items: center; margin: 0 auto 16px;
}
.ergebnis .haken-kreis .icon { width: 40px; height: 40px; stroke-width: 2.6; }
.zusammenfassung { text-align: left; max-width: 430px; margin: 20px auto; border-top: 1px solid var(--linie); }
.zusammenfassung div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.zusammenfassung dt { color: var(--grau); }
.zusammenfassung dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Reiter, Filter, Chips ---------- */
.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.reiter a {
  text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 8px 14px; border-radius: 999px;
  background: var(--weiss); border: 1px solid var(--linie); color: var(--tinte-weich);
}
.reiter a:hover { border-color: var(--linie-stark); }
.reiter a.aktiv { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.reiter a .anz { opacity: .65; font-weight: 500; margin-left: 5px; }
.filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filter select, .filter input { width: auto; min-width: 170px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 22px; }
.chips a {
  text-decoration: none; font-size: 14px; padding: 7px 13px; border-radius: 999px; background: var(--weiss);
  border: 1px solid var(--linie); color: var(--tinte-weich);
}
.chips a:hover { border-color: var(--linie-stark); }
.chips a.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; font-weight: 600; }

/* ---------- Defekt-Liste ---------- */
.defekt { padding: 20px; }
.defekt-kopf { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.defekt-titel { font-size: 1.08rem; font-weight: 700; margin: 0 0 5px; }
.defekt-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 13.5px; color: var(--grau); }
.defekt-text { margin: 13px 0 0; white-space: pre-line; color: var(--tinte-weich); }
.defekt-aktion { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--linie); display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.defekt-aktion .notiz { flex: 1 1 240px; }
.defekt-aktion textarea { min-height: 46px; height: 46px; }
.defekt-foto { display: block; margin-top: 13px; max-width: 220px; border-radius: var(--radius-klein); border: 1px solid var(--linie); }
.marke-status { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.st-offen { background: var(--rot-hell); color: var(--rot-dunkel); }
.st-in_arbeit { background: var(--gelb-hell); color: var(--gelb); }
.st-erledigt { background: var(--gruen-hell); color: var(--gruen); }
.st-wartend { background: var(--gelb-hell); color: var(--gelb); }
.st-aktiv { background: var(--gruen-hell); color: var(--gruen); }
.st-gesperrt { background: #e9ebee; color: #5a6168; }
.nicht-fahrbereit { color: var(--rot-dunkel); font-weight: 700; display: inline-flex; gap: 4px; align-items: center; }
.fahrzeug-marke {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px;
  background: var(--papier); border: 1px solid var(--linie); padding: 3px 10px; border-radius: 999px;
}
.fahrzeug-marke.klein { font-size: 12.5px; padding: 2px 8px; }
/* Mehrere Filialen stehen nebeneinander – deshalb ein kleiner Abstand */
.standort-marke { font-weight: 700; color: var(--tinte); white-space: nowrap; }
.standort-marke + .standort-marke { margin-left: 7px; }

/* ---------- Anleitungen und FAQ ---------- */
.suchfeld { position: relative; margin-bottom: 20px; }
.suchfeld .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--grau); }
.suchfeld input { padding-left: 50px; min-height: 56px; font-size: 16.5px; border-radius: 999px; box-shadow: var(--schatten); border-color: var(--linie); }

/* Quadratische Kacheln für Anleitungen */
.anl-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 16px; }
.anl-kachel {
  position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: var(--tinte); box-shadow: var(--schatten);
  transition: box-shadow .16s, transform .16s, border-color .16s;
}
.anl-kachel:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-stark); transform: translateY(-2px); }
.anl-kachel.aus { opacity: .62; }
.anl-bild { flex: 1 1 auto; min-height: 0; background: var(--papier); display: grid; place-items: center; overflow: hidden; }
.anl-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anl-bild .icon { width: 40px; height: 40px; color: var(--grau-hell); }
.anl-text { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.anl-text strong { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.anl-meta { font-size: 12.5px; color: var(--grau); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.anl-fahne {
  position: absolute; top: 10px; left: 10px; background: rgba(22, 24, 27, .82); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.anl-ecke { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; }
.anl-ecke span {
  width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .92);
  display: grid; place-items: center; color: var(--grau); box-shadow: 0 1px 3px rgba(17, 24, 39, .14);
}
.anl-ecke .icon { width: 15px; height: 15px; }

/* Shop-Artikel mit Produktbild */
.shop-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.shop-karte {
  display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
}
.shop-bild { aspect-ratio: 4 / 3; background: var(--papier); display: grid; place-items: center; overflow: hidden; }
.shop-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-bild .icon { width: 38px; height: 38px; color: var(--grau-hell); }
.shop-text { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.shop-text strong { font-size: 15.5px; }
.shop-text .leise { font-size: 13.5px; line-height: 1.45; }
.shop-menge { display: flex; align-items: center; gap: 10px; padding: 0 14px 14px; }
.shop-menge input { width: 86px; text-align: center; font-weight: 700; }
.shop-menge .einheit { font-size: 13.5px; color: var(--grau); }

/* Listenzeilen (FAQ, Verwaltung) */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li + li { border-top: 1px solid var(--linie); }
.liste a.zeile { display: flex; align-items: center; gap: 14px; padding: 15px 4px; text-decoration: none; color: var(--tinte); }
.liste a.zeile:hover strong { color: var(--rot-dunkel); }
.zeile .zeile-text { flex: 1; min-width: 0; }
.zeile .zeile-text strong { display: block; }
.zeile .zeile-text span { font-size: 14px; color: var(--grau); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-icons { display: flex; gap: 5px; color: var(--grau-hell); }
.kat-marke {
  font-size: 12.5px; font-weight: 600; color: var(--grau); background: var(--papier);
  border: 1px solid var(--linie); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.leer { text-align: center; padding: 44px 20px; color: var(--grau); }
.leer .icon { width: 44px; height: 44px; color: var(--grau-hell); margin-bottom: 10px; }

.anleitung-text { font-size: 16.5px; line-height: 1.68; color: var(--tinte-weich); }
.anleitung-text h2 { margin-top: 1.4em; color: var(--tinte); }
.anleitung-text ol.schritte, .anleitung-html ol { counter-reset: s; list-style: none; padding: 0; }
.anleitung-text ol.schritte li, .anleitung-html ol > li { counter-increment: s; position: relative; padding: 2px 0 14px 48px; }
.anleitung-text ol.schritte li::before, .anleitung-html ol > li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--rot); color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center;
}
.anl-cover { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; display: block; }
.pdf-einbettung { width: 100%; border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; background: var(--papier); margin: 12px 0; }
.pdf-einbettung iframe { width: 100%; height: 78vh; min-height: 480px; border: 0; display: block; }
.pdf-vorschau { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.pdf-vorschau .icon { width: 28px; height: 28px; flex: none; color: var(--rot); }
.medien { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 22px; }
.medien figure { margin: 0; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
.medien img, .medien video { display: block; width: 100%; height: auto; background: #000; }
.medien img { background: var(--papier); cursor: zoom-in; }
.medien figcaption { font-size: 13px; color: var(--grau); padding: 8px 12px; }
.medien .pdf { display: flex; align-items: center; gap: 10px; padding: 18px; text-decoration: none; color: var(--tinte); font-weight: 600; }
.video-rahmen { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; margin-top: 22px; }
.video-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.antwort { background: var(--papier); border-left: 3px solid var(--rot); padding: 13px 16px; border-radius: 0 var(--radius-klein) var(--radius-klein) 0; margin-top: 10px; white-space: pre-line; }

/* ---------- Tabellen (Verwaltung) ---------- */
.tabelle-huelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: 12px; color: var(--grau); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix input { width: 20px; height: 20px; accent-color: var(--rot); }
.rechts { text-align: right; }
.inline-form { display: inline-flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.inline-form select, .inline-form input { width: auto; min-height: 38px; padding: 7px 11px; font-size: 14.5px; }

.medien-bearbeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
.medien-bearbeiten .m { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px; background: var(--papier); font-size: 13px; }
.medien-bearbeiten .m img { width: 100%; height: 100px; object-fit: cover; border-radius: 7px; display: block; }
.medien-bearbeiten .m .vorschau-icon { height: 100px; display: grid; place-items: center; color: var(--grau); }
.medien-bearbeiten .m .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 7px 0; }

/* Kategorien verwalten */
.kat-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 4px; }
.kat-eingabe { flex: 1 1 260px; }
.kat-name { width: auto; flex: 1 1 150px; min-width: 120px; min-height: 38px; }
.kat-mail { width: auto; flex: 1 1 200px; min-width: 160px; min-height: 38px; }
.kat-anzahl { white-space: nowrap; line-height: 1.45; }

/* Reinigungs-Kalender: ein Feld je Tag, darin bis zu drei Zahlen */
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.kal-kopf h2 { margin: 0; font-size: 1.15rem; }
.kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kal-wt {
  text-align: center; font-size: 11.5px; font-weight: 700; color: var(--grau);
  text-transform: uppercase; letter-spacing: .05em; padding-bottom: 2px;
}
.kal-tag {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 62px; padding: 6px 2px 7px; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--weiss);
  text-decoration: none; color: var(--tinte);
}
a.kal-tag:hover { border-color: var(--grau-hell); background: var(--papier); }
.kal-tag.kal-leer { background: transparent; border-color: transparent; }
.kal-tag.kal-zukunft .kal-zahl { color: var(--grau-hell); }
.kal-tag.kal-heute { border-color: var(--tinte); border-width: 2px; }
.kal-tag.kal-gewaehlt { background: var(--blau-hell); border-color: var(--blau); }
.kal-zahl { font-size: 12.5px; color: var(--grau); line-height: 1; }
.kal-marken { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.kal-m {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1;
}
.m-gruen  { background: var(--gruen); }
.m-orange { background: var(--gelb); }
.m-rot    { background: var(--rot); }
.a-orange { background: var(--gelb); border-color: var(--gelb); }
.arch-orange { color: var(--gelb) !important; font-weight: 600; }
@media (max-width: 560px) {
  .kal-gitter { gap: 4px; }
  .kal-tag { min-height: 54px; padding: 5px 1px 6px; }
  .kal-m { min-width: 18px; height: 18px; font-size: 11px; padding: 0 4px; }
}

/* Beschwerdekasten: Anliegen unter einem Thema */
.anliegen { flex: 1 1 100%; margin: 4px 0 2px; padding: 12px 0 2px; border-top: 1px dashed var(--linie-stark); }
.anliegen-liste { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; align-items: center; }
.anliegen-marke {
  display: inline-flex; align-items: center; gap: 2px; background: var(--papier);
  border: 1px solid var(--linie-stark); border-radius: 999px; padding: 2px 4px 2px 10px;
}
.anliegen-marke input[type="text"] {
  width: auto; min-width: 70px; min-height: 28px; padding: 2px 4px; font-size: 13.5px;
  border: 0; background: transparent; border-radius: 0;
}
.anliegen-marke input[type="text"]:focus { background: var(--weiss); }
.anliegen-marke .knopf.link { padding: 2px 6px; min-height: 0; }
.anliegen-vorschlag { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }

/* Sprachwahl oben auf der Begrüßung – gut sichtbar für neue Mitarbeiter */
.w-sprache { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.w-sprache a {
  padding: 5px 13px; border-radius: 999px; text-decoration: none; font-size: 14px;
  font-weight: 600; color: var(--tinte-weich); background: var(--weiss);
  border: 1px solid var(--linie-stark);
}
.w-sprache a:hover { border-color: var(--grau-hell); }
.w-sprache a.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; }

/* Rechte-Tabelle: oben quer die Profile, links untereinander die Rechte */
.rechte-huelle { overflow: auto; max-height: 80vh; }
.rechte-gitter { font-size: 14px; border-collapse: separate; border-spacing: 0; }
.rechte-gitter th, .rechte-gitter td {
  border-bottom: 1px solid var(--linie); border-right: 1px solid var(--linie);
  padding: 8px 10px;
}
.rechte-gitter thead th, .rechte-gitter thead td {
  position: sticky; z-index: 3; background: var(--weiss);
}
.rechte-gitter thead tr:first-child th { top: 0; vertical-align: bottom; }
.rechte-gitter thead tr.kopf-stufe th,
.rechte-gitter thead tr.kopf-stufe td { top: 170px; border-bottom: 1px solid var(--linie-stark); }
.rechte-gitter th.dreh { height: 170px; padding: 8px 2px; width: 44px; }
.rechte-gitter th.dreh span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: inline-block; white-space: nowrap; text-transform: none;
  font-size: 13.5px; letter-spacing: 0; color: var(--tinte); font-weight: 700;
}
.rechte-gitter th.erste {
  position: sticky; left: 0; z-index: 2; background: var(--weiss);
  text-align: left; text-transform: none; letter-spacing: 0; font-size: 14px;
  color: var(--tinte); min-width: 230px; max-width: 290px;
  border-right: 1px solid var(--linie-stark); font-weight: 600;
}
.rechte-gitter thead th.erste { z-index: 4; }
.rechte-gitter th.recht-name { font-weight: 400; color: var(--tinte-weich); padding-left: 22px; }
.rechte-gitter tr.zeile-gruppe th.erste,
.rechte-gitter tr.zeile-gruppe td { background: var(--papier); }
.rechte-gitter th.gruppe-titel {
  background: var(--papier); font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--grau); font-weight: 700; border-right: 0;
}
.rechte-gitter td.mitte { text-align: center; }
.rechte-gitter td.mitte input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--rot); margin: 0; }
.rechte-gitter td.mitte select { width: auto; min-width: 58px; min-height: 34px; padding: 4px 6px; }
.rechte-gitter .immer { color: var(--gruen); font-weight: 700; }
.rechte-gitter tbody tr:hover th.erste,
.rechte-gitter tbody tr:hover td { background: var(--blau-hell); }

/* Rechte eines Profils anhaken */
.haken-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px; }
.haken-gitter .check { padding: 8px 0; }
.neu-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--linie-stark); }

/* Bild groß ansehen */
.lupe { position: fixed; inset: 0; background: rgba(16, 18, 21, .93); display: grid; place-items: center; z-index: 50; padding: 16px; cursor: zoom-out; }
.lupe img { max-height: 92vh; max-width: 100%; border-radius: var(--radius-klein); }

@media (max-width: 700px) {
  .zweispaltig { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .inhalt { padding: 20px 14px 48px; }
  .karte { padding: 17px; border-radius: var(--radius-klein); }
  .marke-text strong { font-size: 14px; }
  .kopf-person span, .kopf-login span { display: none; }
  .sprachwahl a { padding: 5px 8px; min-width: 30px; font-size: 11.5px; }
  .wahl { grid-template-columns: 1fr 1fr; }
  .wahl.gross { grid-template-columns: 1fr 1fr; }
  .wahl.gross .opt { min-height: 112px; font-size: .96rem; }
  .filter select, .filter input { flex: 1 1 140px; min-width: 0; }
  .anl-gitter { grid-template-columns: 1fr 1fr; gap: 12px; }
  .anl-text { padding: 10px 11px 12px; }
  .anl-text strong { font-size: 14px; }
  .shop-gitter { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kacheln { grid-template-columns: 1fr; }
}
@media print {
  .kopf, .navi, .fuss, .knopf { display: none !important; }
  body { background: #fff; }
  .karte { box-shadow: none; border: 0; }
}

/* PDF-Karte (wird auf dem Handy statt der Einbettung gezeigt) */
.pdf-block { margin: 12px 0; }
.pdf-karte { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tinte); margin-bottom: 8px; }
.pdf-karte .icon { width: 34px; height: 34px; color: var(--rot); flex: none; }
.pdf-karte strong { display: block; font-size: 1.05rem; }
.pdf-karte:hover { border-color: var(--rot); }

/* Band während der Testansicht */
.testband {
  background: var(--gelb-hell); border-bottom: 1px solid #e7d3a6; color: var(--gelb);
  padding: 10px 16px; display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; font-size: 14.5px; text-align: center;
}
.testband .knopf { background: var(--gelb); }
.testband .knopf:hover { background: #7f5200; }

/* Größenauswahl im Shop */
.shop-groessen { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; }
.shop-groessen .zeile-g { display: flex; align-items: center; gap: 10px; }
.shop-groessen .g-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--tinte); }
.shop-groessen input { width: 72px; text-align: center; font-weight: 700; min-height: 38px; }

/* Defekt-Kacheln mit Ampelfarbe (Fahrzeuge) */
.d-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-bottom: 26px; }
.d-kachel {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  background: var(--weiss); border: 1px solid var(--linie); border-top: 5px solid var(--grau-hell);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--schatten);
  color: var(--tinte); text-decoration: none;
  transition: box-shadow .16s, transform .16s, border-color .16s;
}
a.d-kachel:hover { box-shadow: var(--schatten-stark); transform: translateY(-2px); }

/* Fußzeile der Kachel: Zahl der Beiträge und der Weg ins Ticket */
.d-oeffnen {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; color: var(--grau);
}
.d-oeffnen .icon { width: 16px; height: 16px; padding: 0; background: none; }
.d-pfeil {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; color: var(--rot);
}
.d-pfeil .icon { transform: rotate(180deg); }
.d-rot    { border-top-color: var(--rot); }
.d-orange { border-top-color: var(--gelb); }
.d-gruen  { border-top-color: var(--gruen); }
.d-grau   { border-top-color: var(--grau-hell); }
.d-grau .d-symbol .icon { color: var(--grau-hell); }

/* Kopfzeile: Symbol neben Nummer und Fahrzeugtyp */
.d-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.d-symbol { flex: none; }
.d-symbol .icon { width: 54px; height: 54px; }
.d-rot .d-symbol .icon    { color: var(--rot); }
.d-orange .d-symbol .icon { color: var(--gelb); }
.d-gruen .d-symbol .icon  { color: var(--gruen); }
.d-grau .d-symbol .icon   { color: var(--grau-hell); }

.d-nummer { display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.d-typ { display: block; font-size: 14px; color: var(--grau); }

/* Filiale oben rechts neben der Nummer, wo ohnehin Platz ist */
.d-filiale {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 999px;
  padding: 5px 12px; font-size: 14px; font-weight: 700; color: var(--tinte-weich);
  white-space: nowrap;
}
.d-filiale .icon { width: 15px; height: 15px; padding: 0; background: none; color: var(--grau); }

/* Hinweis, wenn der Status etwas anderes sagt, das Fahrzeug aber steht */
.d-warnung {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 7px 0 0; font-size: 13.5px; font-weight: 700; color: var(--rot-dunkel);
}
.d-warnung .icon { width: 16px; height: 16px; padding: 0; background: none; }

/* Status groß über die ganze Breite */
.d-status {
  margin: 10px 0 0; padding: 12px 16px; border-radius: var(--radius-klein);
  background: #eef0f2; color: var(--grau);
  font-size: 1.1rem; font-weight: 700; text-align: center; line-height: 1.25;
}
.d-rot .d-status    { background: var(--rot-hell); color: var(--rot-dunkel); }
.d-orange .d-status { background: var(--gelb-hell); color: var(--gelb); }
.d-gruen .d-status  { background: var(--gruen-hell); color: var(--gruen); }
.d-wann { margin: 6px 0 0; font-size: 12.5px; color: var(--grau); text-align: center; }

/* Filiale und Meldedatum groß */
.d-gross {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 14px; margin: 16px 0 4px;
}
.d-gross > div { min-width: 0; }
.d-gross dt {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--grau-hell); margin-bottom: 2px;
}
.d-gross dd { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.25; }
.d-gross dd.d-nein { color: var(--rot-dunkel); }
.d-uhr { display: block; font-size: 13px; font-weight: 600; color: var(--grau); }

.d-schaden { font-weight: 600; font-size: 1.02rem; margin-top: 10px; }
.d-text { font-size: 14.5px; color: var(--tinte-weich); margin-top: 3px; line-height: 1.5; }

/* Foto gleich groß in der Kachel, ohne Klick */
.d-foto { display: block; margin-top: 14px; border-radius: var(--radius-klein); overflow: hidden; background: var(--papier); }
.d-foto img { display: block; width: 100%; max-height: 300px; object-fit: cover; }

.d-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--grau); margin-top: 12px; }
.d-aktion {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 9px;
}
.d-aktion input[type=text] { width: 100%; min-height: 40px; font-size: 14px; padding: 9px 11px; }

/* ---------- Reinigung ---------- */
/* Die offenen Aufgaben stehen als kleine Kacheln nebeneinander, nicht als
   breite Balken. Aufgeklappt nimmt eine Kachel die ganze Breite ein, damit
   das Foto-Feld genug Platz hat. */
.rein-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.rein-gitter .karte { margin: 0; padding: 15px 16px; }
.rein-gitter .rein-karte[open] { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .rein-gitter { grid-template-columns: 1fr 1fr; gap: 9px; }
  .rein-gitter .karte { padding: 12px 11px; }
  .rein-gitter .rein-kopf strong { font-size: .97rem; }
}
.rein-karte summary { cursor: pointer; list-style: none; }
.rein-karte summary::-webkit-details-marker { display: none; }
.rein-karte summary::before {
  content: ""; float: right; width: 8px; height: 8px; margin: 7px 2px 0 10px;
  border-right: 2px solid var(--grau); border-bottom: 2px solid var(--grau);
  transform: rotate(45deg); transition: transform .15s;
}
.rein-karte[open] summary::before { transform: rotate(-135deg); margin-top: 10px; }
.rein-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rein-kopf strong { font-size: 1.05rem; }
.rein-karte summary .klein-text { display: block; margin-top: 3px; }

.rein-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.rein-bild { flex: none; width: 54px; height: 54px; border-radius: 9px; overflow: hidden; background: var(--papier); }
.rein-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* .zeile-text stapelt sonst nur innerhalb von .zeile – hier nachziehen */
.rein-zeile .zeile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rein-zeile .zeile-text span { font-size: 13px; color: var(--grau); }

/* ---------- Archiv der Reinigung ---------- */
.arch-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.arch-kopf strong { font-size: 1.05rem; }
.arch-raster { display: flex; flex-wrap: wrap; gap: 4px; }
.arch-tag {
  width: 16px; height: 16px; border-radius: 4px; flex: none;
  border: 1px solid rgba(17, 24, 39, .09);
}
.arch-punkt {
  width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block;
  border: 1px solid rgba(17, 24, 39, .09); margin-right: 5px; vertical-align: -1px;
}
.a-erledigt { background: var(--gruen); border-color: var(--gruen); }
.a-offen    { background: var(--rot); border-color: var(--rot); }
.a-ruht     { background: var(--linie); }
.arch-legende { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.arch-legende a { margin-left: auto; font-weight: 600; }
.arch-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.arch-zeile .zeile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.arch-zeile .zeile-text span { font-size: 13px; color: var(--grau); }
.arch-zeile .arch-punkt { margin-right: 0; width: 13px; height: 13px; }
.arch-rot { color: var(--rot-dunkel) !important; font-weight: 600; }

/* ---------- Speicherplatz ---------- */
.sp-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sp-zahl { font-size: 1.9rem; font-weight: 800; margin-right: 8px; }
.sp-balken {
  height: 14px; border-radius: 999px; background: var(--papier);
  border: 1px solid var(--linie); overflow: hidden; margin-top: 14px;
}
.sp-balken > span { display: block; height: 100%; background: var(--gruen); transition: width .3s; }
.sp-balken > span.warn { background: var(--gelb); }
.sp-balken > span.voll { background: var(--rot); }

.sp-zeile { display: flex; align-items: flex-start; gap: 16px; padding: 12px 4px; }
.sp-text { flex: 1; min-width: 0; }
.sp-text strong { display: block; }
.sp-text .klein-text { display: block; margin-top: 1px; }
.sp-mini {
  display: block; height: 5px; border-radius: 999px; background: var(--papier);
  margin-top: 7px; overflow: hidden; max-width: 320px;
}
.sp-mini > span { display: block; height: 100%; background: var(--grau-hell); }
.sp-wert { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Zwischenüberschrift in den Arbeitsbereichen */
.bereich-gruppe {
  margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--grau-hell);
}
.karte > .bereich-gruppe:first-of-type { margin-top: 10px; }

/* Dokument in der Liste: oben Symbol und Name, darunter die Aktionen in einer
   eigenen Reihe, die umbricht statt zu überlappen. Löschen steht abgesetzt am Ende. */
.dok-zeile { padding: 14px 4px; }
.dok-kopf { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; text-decoration: none; color: var(--tinte); }
.dok-kopf:hover .dok-titel { color: var(--rot-dunkel); }
.dok-symbol { display: flex; color: var(--grau-hell); padding-top: 1px; }
.dok-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dok-titel { font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.dok-titel .kat-marke { white-space: nowrap; }
.dok-meta { font-size: 14px; color: var(--grau); overflow-wrap: anywhere; }
.dok-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0 36px; }
.dok-aktionen .knopf.klein { min-height: 44px; padding: 9px 15px; }
.dok-loeschen { display: flex; align-items: center; margin: 0 0 0 auto; padding-left: 14px; border-left: 1px solid var(--linie); }
.dok-loeschen .knopf.link { min-height: 44px; padding: 0 8px; }
@media (max-width: 560px) {
  .dok-aktionen { margin-left: 0; }
  .dok-aktionen > .knopf { flex: 1 1 auto; }
  .dok-loeschen { width: 100%; margin: 4px 0 0; padding: 6px 0 0; border-left: 0; border-top: 1px solid var(--linie); justify-content: flex-end; }
}

/* ---------- Begrüßung neuer Mitarbeiter ---------- */
.w-fortschritt { display: flex; gap: 7px; justify-content: center; margin: 4px 0 10px; }
.w-fortschritt a {
  width: 34px; height: 7px; border-radius: 999px; background: var(--linie-stark);
  transition: background .15s;
}
.w-fortschritt a.fertig { background: var(--grau-hell); }
.w-fortschritt a.aktiv { background: var(--rot); }
.w-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.w-team > div {
  background: var(--papier); border-radius: var(--radius-klein); padding: 14px; text-align: center;
}
.w-team strong { display: block; font-size: 1.05rem; }
.w-team span { font-size: 13.5px; color: var(--grau); }
.w-liste { margin: 0; padding-left: 22px; }
.w-liste > li { margin-bottom: 14px; line-height: 1.55; }
.w-liste > li:last-child { margin-bottom: 0; }
.w-liste ul { margin: 8px 0 0; padding-left: 18px; }
.w-liste ul li { margin-bottom: 5px; color: var(--tinte-weich); }
.w-haken { list-style: none; margin: 0; padding: 0; }
.w-haken li { position: relative; padding: 7px 0 7px 28px; line-height: 1.5; }
.w-haken li::before {
  content: ""; position: absolute; left: 4px; top: 13px;
  width: 9px; height: 5px; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen);
  transform: rotate(-45deg);
}
.w-beispiel {
  margin: 14px 0; padding: 14px 18px; border-radius: var(--radius-klein);
  background: var(--papier); border: 1px dashed var(--linie-stark);
  font-size: 1.08rem; font-weight: 600; text-align: center;
}
.w-blaettern { justify-content: space-between; margin-top: 22px; }
.w-blaettern .knopf:only-child { margin-left: auto; }

/* ---------- Melde-Link mit QR-Code ---------- */
.qr-karte { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.qr-bild { flex: none; width: 190px; }
.qr-bild svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.qr-text { flex: 1 1 260px; min-width: 0; }
.qr-text h3 { margin: 0 0 4px; font-size: 1.1rem; }
.qr-text input { width: 100%; margin: 4px 0 12px; font-size: 13px; }
.qr-text .knopfreihe { margin: 0; }

/* ---------- Defekt melden: die beiden großen Kacheln ganz oben ---------- */
.melden-gross {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin: 0 0 18px;
}
.melden-kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; text-decoration: none;
  min-height: 170px; padding: 26px 20px;
  background: var(--weiss); color: var(--tinte);
  border: 2px solid var(--linie); border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.melden-kachel:hover {
  border-color: var(--rot); box-shadow: var(--schatten-stark); transform: translateY(-2px);
}
.melden-kachel .icon {
  width: 58px; height: 58px; padding: 0; background: none; color: var(--rot); margin-bottom: 2px;
}
.melden-kachel strong { font-size: 1.28rem; line-height: 1.2; }
.melden-kachel span { font-size: 14.5px; color: var(--grau); }

@media (max-width: 560px) {
  .melden-kachel { min-height: 0; padding: 20px 16px; }
  .melden-kachel .icon { width: 46px; height: 46px; }
  .melden-kachel strong { font-size: 1.14rem; }
}


/* Willkommensbanner für neue Konten */
.willkommen {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-style: dashed;
}
.willkommen h2 { margin: 0 0 4px; font-size: 1.12rem; }
.willkommen p { margin: 0; }

/* ---------- Erste Schritte ---------- */
.schritt-karte { display: flex; gap: 16px; align-items: flex-start; }
.schritt-zahl {
  flex: none; width: 34px; height: 34px; border-radius: 999px;
  background: var(--tinte); color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.schritt-inhalt { min-width: 0; }
.schritt-inhalt h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 8px; font-size: 1.08rem;
}
.schritt-inhalt h2 .icon { background: none; padding: 0; width: 20px; height: 20px; color: var(--rot); }
.schritt-inhalt p { margin: 0 0 12px; color: var(--tinte-weich); line-height: 1.55; }
.schritt-inhalt .knopfreihe { margin: 0; }

/* ---------- Klappmenüs in der oberen Leiste ---------- */
.navi-punkt { position: relative; display: inline-flex; }
.navi-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 500; color: #b9bfc6;
  padding: 8px 13px; border-radius: 999px; white-space: nowrap;
}
.navi-knopf:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.navi-knopf.aktiv { color: #fff; background: rgba(255, 255, 255, .15); font-weight: 600; }
.navi-pfeil {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7; transition: transform .15s;
}
.navi-knopf[aria-expanded="true"] .navi-pfeil { transform: rotate(180deg); }
.navi-klappe {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 260px; max-width: min(340px, calc(100vw - 32px));
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten-stark); padding: 7px; display: flex; flex-direction: column;
}
.navi-klappe[hidden] { display: none; }
.navi-klappe a {
  display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--tinte);
}
/* Schrift dunkel lassen – sonst färbt ".navi a:hover" den Titel weiß auf hellgrau (Paket 181) */
.navi-klappe a:hover { background: var(--papier); color: var(--tinte); }
.navi-klappe a strong { display: block; font-size: 14.5px; font-weight: 600; }
.navi-klappe a span { display: block; font-size: 12.5px; color: var(--grau); margin-top: 1px; }

/* Handy und Tablet (Paket 181): statt der langen Leiste ein Knopf "Menü" (☰) –
   wie in der Inventur (Paket 179). Ein Tipp klappt das Menü als weiße Fläche
   unter dem Kopf aus; Übersicht, Hilfe, Wissen … sind darin noch einmal
   aufklappbar, der Bereich der aktuellen Seite steht gleich offen. Die Seite
   dahinter wird abgedunkelt und hält still; ein Tipp daneben, auf "Menü" oder
   Escape klappt es wieder ein. Ohne JavaScript steht das Menü offen, mit allen
   Unterpunkten. Am Computer bleibt die Leiste, wie sie war. */
.navi-schalter, .navi-schleier { display: none; }
@media (max-width: 1024px), (pointer: coarse) {
  .kopf { position: relative; z-index: 30; }
  .kopf-innen { gap: 10px; }
  html.navi-js .navi-schalter {
    display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; padding: 9px 15px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: transparent;
    color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .navi-schalter:hover, .navi-schalter[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
  .navi-schalter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .navi-burger { position: relative; display: inline-block; width: 18px; height: 14px; }
  .navi-burger::before, .navi-burger::after, .navi-burger span {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .2s, opacity .2s, top .2s;
  }
  .navi-burger::before { top: 0; }
  .navi-burger span { top: 6px; }
  .navi-burger::after { top: 12px; }
  [aria-expanded="true"] .navi-burger::before { top: 6px; transform: rotate(45deg); }
  [aria-expanded="true"] .navi-burger::after { top: 6px; transform: rotate(-45deg); }
  [aria-expanded="true"] .navi-burger span { opacity: 0; }

  .navi {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    max-width: none; margin: 0; padding: 8px 12px 14px;
    background: var(--weiss); color: var(--tinte);
  }
  html.navi-js .navi {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
    /* unten bleibt ein Streifen Schleier frei – zum Einklappen per Tipp daneben */
    max-height: calc(100vh - var(--navi-kopf-h, 70px) - 64px); max-height: calc(100dvh - var(--navi-kopf-h, 70px) - 64px);
    overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  html.navi-js .navi-offen .navi { display: flex; }
  html:not(.navi-js) .navi { width: auto; margin: 0 10px 10px; border-radius: 12px; }
  html:not(.navi-js) .navi-klappe[hidden] { display: flex; }
  /* Trennlinien zwischen den Punkten, eingerückt – die Punkte selbst bleiben rund */
  .navi > * + * { position: relative; margin-top: 1px; }
  .navi > * + *::before { content: ""; position: absolute; left: 12px; right: 12px; top: -1px; height: 1px; background: var(--linie); }
  .navi > a, .navi-knopf {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 12px;
    border-radius: 10px; color: var(--tinte); font-size: 16px; font-weight: 600; white-space: normal; text-align: start;
  }
  .navi > a:hover, .navi-knopf:hover, .navi-knopf[aria-expanded="true"] { background: var(--papier); color: var(--tinte); }
  .navi > a.aktiv, .navi-knopf.aktiv { background: var(--rot-hell); color: var(--rot-dunkel); }
  .navi > a:focus-visible, .navi-knopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 0; }
  .navi .navi-ab { display: flex; margin-left: 0; margin-top: 7px; }
  .navi > a .icon { color: var(--grau); }
  .navi-punkt { display: block; width: 100%; }
  .navi-knopf { justify-content: space-between; }
  .navi-pfeil { flex: none; margin-inline-end: 4px; }
  .navi-klappe {
    position: static; min-width: 0; max-width: none; width: auto; margin: 2px 0 8px; padding: 0 0 0 16px;
    border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .navi-klappe a { padding: 10px 12px; white-space: normal; }
  .navi-klappe a strong { font-size: 15.5px; }
  .navi-klappe a span { font-size: 13px; }
  .navi-schleier { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(22, 24, 27, .5); cursor: pointer; }
  .navi-schleier[hidden] { display: none; }
  body.navi-auf { overflow: hidden; }
}

/* ---------- Positionen einer Shop-Bestellung ---------- */
.pos-liste { list-style: none; margin: 12px 0; padding: 0; }
.pos {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--linie);
}
.pos:last-child { border-bottom: 0; }
.pos.fertig .pos-text strong { color: var(--grau); }
/* "Bestellt" ist unterwegs, aber noch nicht erledigt – deshalb nicht ausgegraut,
   sondern mit gelbem Streifen als "läuft noch". */
.pos.laeuft { border-left: 3px solid var(--gelb); padding-left: 9px; }
.pos.laeuft .pos-text span.klein-text { color: var(--gelb); }
.pos-text { flex: 1 1 220px; min-width: 0; }
.pos-text span.klein-text { display: block; margin-top: 2px; }
.pos-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.knopf[disabled]:hover { transform: none; }

/* ---------- Verlauf eines Tickets, wie ein Chat ---------- */
.chat { margin-bottom: 16px; }
.chat-status {
  margin: 10px 0; text-align: center; font-size: 12.5px; color: var(--grau-hell);
}
.chat-zeile { display: flex; margin-bottom: 10px; }
.chat-zeile.ich { justify-content: flex-end; }
.chat-blase {
  max-width: 80%; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 11px 15px; box-shadow: var(--schatten);
}
.chat-zeile.ich .chat-blase { background: var(--papier); }
.chat-kopf { display: block; font-size: 12.5px; color: var(--grau); margin-bottom: 4px; }
.chat-blase p { margin: 0; line-height: 1.5; }
.chat-schreiben textarea { width: 100%; margin-bottom: 12px; }

/* Status mit Knöpfen setzen */
.d-schritt-titel {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--grau-hell);
}
.d-schritte { display: flex; flex-wrap: wrap; gap: 7px; }
.d-schritte .knopf { flex: 1 1 auto; justify-content: center; }
.knopf.gewaehlt {
  background: var(--tinte); color: #fff; border-color: var(--tinte);
}
.knopf.gewaehlt:hover { background: var(--tinte-weich); border-color: var(--tinte-weich); }

@media (max-width: 560px) {
  .d-gitter { grid-template-columns: 1fr; }
}

/* Suche auf der Übersicht: Knopf, der erst auf Klick zum Eingabefeld wird */
.suche-start { margin-bottom: 20px; }
.suche-start .knopf {
  justify-content: flex-start; gap: 12px; min-height: 56px; border-radius: 999px;
  font-weight: 500; color: var(--grau); box-shadow: var(--schatten); border-color: var(--linie);
}
.suche-start .knopf:hover { color: var(--tinte); border-color: var(--linie-stark); }
.suche-start .icon { color: var(--grau); }

/* Notfallkontakte: eine Nummer je Zeile, groß genug zum Antippen */
.notfall {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.notfall-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 220px; }
.notfall-text strong { font-size: 1.05rem; }
.notfall-text .kat-marke { align-self: flex-start; }
.notfall-knopf { flex: 0 0 auto; min-width: 150px; justify-content: center; }
.notfall-wichtig { border-left: 4px solid var(--rot); }
@media (max-width: 480px) {
  .notfall-knopf { width: 100%; }
}

/* Standort einer Defektmeldung */
.d-ort {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 11px 14px; border-radius: var(--radius-klein);
  background: var(--blau-hell); border: 1px solid #c9d9ec;
  color: var(--blau); text-decoration: none;
}
.d-ort:hover { border-color: var(--blau); }
.d-ort > span { display: flex; flex-direction: column; min-width: 0; }
.d-ort strong { font-size: 14.5px; }

/* Verlauf eines Kontos: je Art ein eigener Punkt */
.v-reinigung_erledigt  { background: var(--gruen); border-color: var(--gruen); }
.v-reinigung_geoeffnet { background: var(--gelb); border-color: var(--gelb); }
.v-defekt_gemeldet     { background: var(--rot); border-color: var(--rot); }
.v-defekt_bearbeitet   { background: var(--blau); border-color: var(--blau); }
.v-anleitung_gelesen   { background: var(--grau-hell); border-color: var(--grau-hell); }
.v-dokument_geholt     { background: var(--grau-hell); border-color: var(--grau-hell); }
.v-portal_problem      { background: var(--gelb); border-color: var(--gelb); }
.v-bestellt            { background: var(--blau); border-color: var(--blau); }

/* Anleitung Schritt für Schritt */
.schritt-gross { text-align: center; padding: 26px 22px 24px; }
.schritt-gross h1 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin: 14px 0 16px; }
.schritt-zahl.gross {
  width: 46px; height: 46px; font-size: 1.15rem; margin: 0 auto;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--rot); color: #fff; font-weight: 800;
}
.schritt-bild {
  display: block; width: 100%; max-height: 54vh; object-fit: contain;
  border-radius: var(--radius-klein); background: var(--papier); margin: 0 0 16px;
}
.schritt-gross .anleitung-text { text-align: left; }
.schritt-gross .video-rahmen { margin-bottom: 16px; }

/* Training: Lernkarten */
.lernkarte { text-align: center; padding: 26px 22px; }
.lern-marke {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  background: var(--papier); color: var(--grau); font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.lern-marke.gruen { background: var(--gruen-hell); color: var(--gruen); }
.lern-frage { font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 600; margin: 16px 0 20px; line-height: 1.4; }
.lern-antwort { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--linie-stark); text-align: left; }
.lern-antwort > div { margin-top: 12px; line-height: 1.65; }
.zaehler-gruen { background: var(--gruen) !important; }

/* Kacheln mit Zähler: Text nicht unter die Zahl laufen lassen */
.kachel:has(.zaehler) strong { padding-right: 34px; }

/* Die QR-Aushänge stehen in einem eigenen Kasten neben dem schwarzen Brett */
.aushang-kasten { margin-top: 18px; }
.aushang-kasten .qr-karte { background: var(--weiss); }

/* Filialen anklicken statt aus einer Liste wählen */
.ort-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.ort-haken { position: relative; display: inline-flex; }
.ort-haken input { position: absolute; opacity: 0; width: 0; height: 0; }
.ort-haken span {
  display: inline-block; padding: 9px 17px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie-stark); background: var(--weiss);
  font-weight: 600; font-size: 14.5px; color: var(--tinte-weich); user-select: none;
}
.ort-haken span:hover { border-color: var(--grau-hell); }
.ort-haken input:checked + span { background: var(--rot); border-color: var(--rot); color: #fff; }
.ort-haken input:focus-visible + span { outline: 3px solid #f3b3ab; outline-offset: 2px; }
.ort-haken input[type="radio"]:checked + span { background: var(--rot); border-color: var(--rot); color: #fff; }

/* Projekte: Platznummer vorn */
.projekt-zeile { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--tinte); padding: 18px 20px; }
.projekt-zeile:hover { border-color: var(--grau-hell); }
.projekt-zeile .zeile-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.projekt-zeile .zeile-text span { font-size: 13px; color: var(--grau); }
.projekt-platz {
  flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--papier);
  border: 1px solid var(--linie-stark); display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: var(--tinte-weich);
}
.projekt-aufgabe { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.projekt-aufgabe .zeile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 240px; }
.projekt-aufgabe .zeile-text span { font-size: 13px; color: var(--grau); }

/* Projektlisten: eine Gruppe je Abschnitt, Zeilen deutlich untereinander */
.projekt-liste { display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; }
.projekt-liste > * { margin: 0 !important; }
.projekt-liste details.karte summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.projekt-platz.ohne { color: var(--grau-hell); background: transparent; border-style: dashed; }

/* Projekte umsortieren: die beiden Pfeile links an der Zeile */
.projekt-pfeile { display: flex; flex-direction: column; gap: 4px; flex: none; }
.projekt-pfeile .knopf { min-width: 34px; min-height: 26px; padding: 2px 8px; line-height: 1; }
.projekt-zeile .zeile-text { text-decoration: none; color: var(--tinte); }
.projekt-zeile .zeile-text:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* Erledigte Punkte eines Projekts: zugeklappt am Ende der Liste */
.archiv-klappe { margin-top: 6px; }
.archiv-klappe > summary { cursor: pointer; list-style: none; display: block; }
.archiv-klappe > summary::-webkit-details-marker { display: none; }
.archiv-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.archiv-kopf::before {
  content: ""; width: 8px; height: 8px; flex: none; margin: -3px 4px 0 0;
  border-right: 2px solid var(--grau); border-bottom: 2px solid var(--grau);
  transform: rotate(-45deg); transition: transform .15s;
}
.archiv-klappe[open] .archiv-kopf::before { transform: rotate(45deg); margin-top: 0; }
@media (max-width: 560px) { .archiv-hinweis { display: none; } }
.archiv-klappe .projekt-aufgabe { background: var(--papier); }
.archiv-klappe .projekt-aufgabe .zeile-text strong { color: var(--grau); }

/* Testansicht: ein Block je Profil, Filiale zum Anklicken */
.test-profil { padding: 16px 4px; }
.test-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Suche innerhalb eines Projekts */
.punkt-suche { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.punkt-suche .icon { position: absolute; left: 15px; top: 23px; margin-top: -10px; color: var(--grau); pointer-events: none; }
.punkt-suche input[type="search"] { flex: 1 1 240px; min-width: 0; width: auto; padding-left: 44px; min-height: 46px; border-radius: 999px; }

/* Anhang ansehen: Kopfzeile mit Schließen, darunter die Datei im Rahmen */
.anhang-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.anhang-titel { display: flex; flex-direction: column; min-width: 0; }
.anhang-titel strong { font-size: 19px; }
.anhang-rahmen {
  width: 100%; height: 72vh; min-height: 380px; border: 1px solid var(--linie);
  border-radius: var(--radius); background: var(--weiss); box-shadow: var(--schatten);
}
@media (max-width: 560px) {
  .anhang-kopf .knopfreihe { width: 100%; }
  .anhang-rahmen { height: 64vh; min-height: 300px; }
}

/* ---------- Anleitungen aus dem Editor ---------- */
.anleitung-html h3 { margin-top: 1.2em; color: var(--tinte); }
.anleitung-html img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-klein); margin: 12px 0; }
.anleitung-html img.bild-mittel { width: 60%; }
.anleitung-html img.bild-klein { display: inline-block; width: 32%; margin: 8px 8px 8px 0; vertical-align: top; }
/* Breite Tabellen lassen sich am Handy seitlich schieben. Die Linien sitzen
   deshalb rechts und unten an jeder Zelle – sonst schneidet das Schieben sie ab. */
.anleitung-html table { display: block; overflow-x: auto; border-collapse: separate; border-spacing: 0; margin: 14px 0; font-size: 15px; }
.anleitung-html td, .anleitung-html th { border: solid var(--linie-stark); border-width: 0 1px 1px 0; padding: 8px 10px; vertical-align: top; text-align: left; }
.anleitung-html tr:first-child > td, .anleitung-html tr:first-child > th { border-top-width: 1px; }
.anleitung-html tr > td:first-child, .anleitung-html tr > th:first-child { border-left-width: 1px; }
.anleitung-html tbody tr:last-child td { border-bottom: 1px solid var(--linie-stark); }
.anleitung-html th { font-size: inherit; color: var(--tinte); text-transform: none; letter-spacing: 0; }
.anleitung-html blockquote { margin: 14px 0; padding: 10px 16px; background: #fff8e1; border: 1px solid #ecd48a; border-radius: var(--radius-klein); color: var(--tinte); }
.anleitung-html blockquote > :first-child { margin-top: 0; }
.anleitung-html blockquote > :last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .anleitung-html img.bild-mittel { width: 100%; }
  .anleitung-html img.bild-klein { width: 47%; }
}

/* Der Editor selbst */
.editor { border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--weiss); }
.editor:focus-within { border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-hell); }
.editor [hidden] { display: none !important; }
.editor > textarea { border: 0; min-height: 320px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
.editor-leiste, .editor-bildleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 7px; background: var(--papier); border-bottom: 1px solid var(--linie); }
.editor-kopf { position: sticky; top: 0; z-index: 3; background: var(--weiss); border-radius: var(--radius-klein) var(--radius-klein) 0 0; }
.editor-leiste { border-radius: var(--radius-klein) var(--radius-klein) 0 0; }
.editor-leiste button, .editor-bildleiste button {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 10px;
  font: inherit; font-size: 14px; color: var(--tinte); background: var(--weiss);
  border: 1px solid var(--linie-stark); border-radius: 8px; cursor: pointer;
}
.editor-leiste button:hover, .editor-bildleiste button:hover { border-color: var(--tinte-weich); }
.editor-trenner { width: 1px; align-self: stretch; background: var(--linie-stark); margin: 2px 3px; }
.editor-leiste button.editor-gefahr { color: var(--rot-dunkel); }
.editor-panel { padding: 10px; border-bottom: 1px solid var(--linie); }
.editor-treffer { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; margin: 8px 0 4px; }
.editor-treffer button { text-align: left; padding: 10px; border: 0; border-bottom: 1px solid var(--linie); background: none; font: inherit; color: var(--tinte); cursor: pointer; }
.editor-treffer button:hover { background: var(--papier); }
.editor-status { padding: 8px 12px; border-bottom: 1px solid var(--linie); }
.editor-flaeche { min-height: 340px; padding: 14px 18px; outline: none; }
.editor-flaeche img { cursor: pointer; }
.editor-flaeche img.editor-gewaehlt { outline: 3px solid var(--blau); outline-offset: 2px; }
.anleitung-html video { display: block; max-width: 100%; border-radius: var(--radius-klein); margin: 12px 0; background: #000; }

/* Foto markieren: Pfeile, Rahmen und Textfelder ins Foto zeichnen */
.markieren { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #16181b; }
.markieren-leiste { border-radius: 0; border-bottom: 0; }
.markieren-leiste button.aktiv { border-color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); font-weight: 700; }
.markieren-leiste button[disabled] { opacity: .45; cursor: not-allowed; }
.markieren-farbe { width: 30px; min-height: 30px !important; padding: 0 !important; border-radius: 50% !important; }
.markieren-farbe.aktiv { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--tinte) !important; }
.markieren-platz { flex: 1; }
.markieren-ok { background: var(--rot) !important; color: #fff !important; border-color: var(--rot) !important; font-weight: 700; }
.markieren-flaeche { flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px; overflow: auto; }
.markieren-flaeche canvas { touch-action: none; cursor: crosshair; background: #fff; box-shadow: 0 6px 30px rgba(0, 0, 0, .4); }
body.markieren-offen { overflow: hidden; }

/* ---------- Struktur-Übersicht (Verwaltung) ---------- */
.struktur {
  /* über die ganze Fensterbreite, mit Rand – auch neben einer Bildlaufleiste */
  --struktur-breite: min(calc(100vw - 48px), 1800px);
  width: var(--struktur-breite); margin-left: calc((100% - var(--struktur-breite)) / 2);
  display: flex; flex-direction: column; gap: 10px;
}
.struktur-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.struktur-suche { position: relative; flex: 1 1 260px; max-width: 420px; }
.struktur-suche input { width: 100%; min-height: 40px; }
.struktur-treffer {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px;
  list-style: none; background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  box-shadow: var(--schatten-stark);
}
.struktur-treffer li { padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; line-height: 1.3; }
.struktur-treffer li span { font-size: 12.5px; color: var(--grau); }
.struktur-treffer li:hover, .struktur-treffer li.aktiv { background: var(--rot-hell); }
.struktur-treffer li.leer { color: var(--grau); cursor: default; background: none; }
.struktur-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.struktur-prozent { min-width: 52px; text-align: center; font-size: 14px; color: var(--grau); font-variant-numeric: tabular-nums; }
.struktur-flaeche {
  position: relative; overflow: hidden; height: calc(100vh - 230px); min-height: 420px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  background-image: radial-gradient(var(--linie) 1px, transparent 1px); background-size: 22px 22px;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.struktur-flaeche.zieht { cursor: grabbing; }
.struktur-flaeche:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.struktur-welt { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.struktur-linien { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.struktur-linien path { fill: none; stroke: var(--linie-stark); stroke-width: 2; }
.struktur-status { min-height: 1.4em; font-size: 13px; color: var(--grau); }
/* Unsichtbares Fenster, in dem eine Seite für ihr Vorschaubild geladen wird */
.struktur-foto { position: fixed; left: -20000px; top: 0; width: 1240px; height: 860px; border: 0; opacity: 0; pointer-events: none; }

/* Knoten */
.sk { position: absolute; left: 0; top: 0; width: 236px; }
.sk[hidden] { display: none; }
.sk-innen {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-height: 62px;
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: 12px;
  color: var(--tinte); text-decoration: none; box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
}
a.sk-innen:hover { border-color: var(--rot); }
.sk-kopf { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; padding-right: 26px; }
.sk-titel { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-meta { font-size: 11.5px; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-datei { font-size: 11px; color: var(--grau-hell); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sk-bild {
  position: relative; display: block; height: 112px; border-radius: 8px; overflow: hidden;
  background: var(--papier); border: 1px solid var(--linie);
}
.sk-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: none; }
.stufe-nah .sk-bild.hat-bild img { display: block; }
.sk-bild-leer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--grau-hell); }
.sk-gruppe .sk-innen, .sk-wurzel .sk-innen { background: var(--rot-hell); border-color: #f2c4bd; cursor: pointer; }
.sk-gruppe .sk-titel, .sk-wurzel .sk-titel { font-size: 15px; color: var(--rot-dunkel); }
.sk-ansicht .sk-innen { background: var(--papier); }
.sk-verweis .sk-innen { border-style: dashed; background: transparent; box-shadow: none; }
.sk-aus .sk-innen { opacity: .55; }
.sk-klappe {
  position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 5px;
  border: 1px solid var(--linie-stark); border-radius: 7px; background: var(--weiss);
  font: inherit; font-size: 13px; line-height: 1; color: var(--tinte-weich); cursor: pointer;
}
.sk-klappe:hover { border-color: var(--rot); color: var(--rot); }
.sk.gefunden .sk-innen { animation: sk-gefunden 1.2s ease-out 2; }
@keyframes sk-gefunden { 0% { box-shadow: 0 0 0 0 rgba(200, 56, 42, .55); } 100% { box-shadow: 0 0 0 16px rgba(200, 56, 42, 0); } }
.sk.fotografiert .sk-bild::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: sk-laden 1s linear infinite;
}
@keyframes sk-laden { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* Weit herausgezoomt: nur noch die Namen, dafür groß genug zum Lesen */
.stufe-fern .sk-meta, .stufe-fern .sk-datei, .stufe-fern .sk-klappe, .stufe-fern .sk-bild { display: none; }
.stufe-fern .sk-titel {
  font-size: min(calc(13px / var(--z, 1)), 26px); line-height: 1.05; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.stufe-fern .sk-innen { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .sk.gefunden .sk-innen, .sk.fotografiert .sk-bild::after { animation: none; }
}
@media (max-width: 700px) {
  .struktur-flaeche { height: calc(100vh - 260px); }
}

/* ---------- Datenschutz-Verpflichtung ---------- */
.verpflichtung-text {
  max-height: 58vh; overflow-y: auto; padding: 18px 22px; margin: 14px 0 10px;
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: var(--radius);
  font-size: 15px; line-height: 1.6; overscroll-behavior: contain;
}
.verpflichtung-text h2 { font-size: 18px; margin: 0 0 4px; }
.verpflichtung-text h3 { font-size: 15.5px; margin: 18px 0 6px; }
.verpflichtung-text ul { padding-left: 20px; margin: 6px 0; }
.verpflichtung-text li { margin-bottom: 6px; }
.verpflichtung-text:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.verpflichtung-ende { text-align: center; color: var(--grau); font-size: 13px; margin: 18px 0 0; }
.verpflichtung-archiv { max-height: none; font-size: 13.5px; margin: 8px 0 0; }
.verpflichtung-wahl .check { margin-bottom: 14px; }
@media (max-width: 700px) {
  .verpflichtung-text { padding: 14px 16px; max-height: 52vh; }
}

/* ======================================================================
   Inventur – eigene Oberfläche (dashboard.php)
   Gleiche Farben, Schrift und Knöpfe wie das Portal, eigener Aufbau:
   oben ein schmaler Kopf mit der Navigation (Start, Verbuchen,
   Inventurverwaltung – die beiden letzten als Klappmenü).
   ====================================================================== */
body.inv { background: var(--papier); min-height: 100vh; }
.inv [hidden] { display: none !important; }
.inv-kopf {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--tinte); color: #fff;
}
.inv-marke { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-right: auto; min-width: 0; }
.inv-marke img { flex: none; }
.inv-marke > span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.inv-marke strong { font-size: 17px; }
.inv-marke span span { font-size: 12px; color: rgba(255, 255, 255, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-zurueck {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28);
}
.inv-zurueck:hover { background: rgba(255, 255, 255, .1); }
.inv-rahmen { width: 100%; max-width: 1240px; margin: 0 auto; flex: 1 0 auto; }
.inv-haupt { min-width: 0; padding: 26px 22px 60px; }
/* Navigation im Kopf: Start, Verbuchen ▾, Inventurverwaltung ▾ */
.inv-mit-menue .inv-marke { margin-right: 0; }
.inv-menue { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; margin-left: 14px; min-width: 0; }
.inv-menue-klappe { position: relative; }
.inv-menue-punkt {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 10px; cursor: pointer;
  color: rgba(255, 255, 255, .86); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; list-style: none;
}
.inv-menue-punkt::-webkit-details-marker { display: none; }
.inv-menue-punkt:hover, .inv-menue-klappe[open] > .inv-menue-punkt { background: rgba(255, 255, 255, .1); color: #fff; }
.inv-menue-punkt.aktiv { background: rgba(255, 255, 255, .16); color: #fff; }
.inv-menue-punkt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.inv-menue-pfeil { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 0 0 3px; transition: transform .15s; }
.inv-menue-klappe[open] .inv-menue-pfeil { transform: rotate(-135deg); margin-top: 3px; }
.inv-menue-tafel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 310px; max-width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 90px); overflow: auto; padding: 6px; border-radius: var(--radius);
  background: var(--weiss); color: var(--tinte); box-shadow: var(--schatten-stark), 0 0 0 1px var(--linie);
}
.inv-menue-tafel a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--tinte); text-decoration: none; }
.inv-menue-tafel a .icon { margin-top: 2px; color: var(--grau); flex: none; }
.inv-menue-tafel a > span { display: grid; gap: 1px; min-width: 0; }
.inv-menue-tafel strong { font-size: 15px; }
.inv-menue-tafel small { font-size: 13px; color: var(--grau); line-height: 1.35; }
.inv-menue-tafel a:hover { background: var(--papier); }
.inv-menue-tafel a.aktiv { background: var(--rot-hell); }
.inv-menue-tafel a.aktiv strong, .inv-menue-tafel a.aktiv .icon { color: var(--rot-dunkel); }
.inv-menue-tafel hr { border: 0; border-top: 1px solid var(--linie); margin: 6px 10px; }
.inv-menue-zwischen {
  margin: 6px 12px 2px; padding-top: 10px; border-top: 1px solid var(--linie);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau);
}
.inv-menue-kurz { display: none; }
.inv-menue-schleier { display: none; }
.inv .zeile-text { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.inv .zeile-text strong { display: block; }
.inv .zeile-text span { display: block; font-size: 14px; color: var(--grau); }
a.zeile-text:hover strong { color: var(--rot-dunkel); }
.inv-klappe { margin: 18px 0; }
.inv-klappe > summary, .inv-erf-mehr > summary { cursor: pointer; font-weight: 600; color: var(--tinte-weich); padding: 8px 0; }
.inv-formular .feld { margin-bottom: 14px; }
.inv-filterleiste { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.inv-filterleiste .feld { margin: 0; flex: 1 1 150px; }
.inv-filterleiste .inv-filter-suche { flex: 2 1 220px; }
.inv-aus { opacity: .55; }

/* Schilder für Fälligkeit und Status */
.inv-schild { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.inv-schild-rot { background: var(--rot); color: #fff; }
.inv-schild-orange { background: var(--gelb-hell); color: var(--gelb); }
.inv-schild-grau { background: var(--papier); color: var(--grau); border: 1px solid var(--linie); }
.inv-schild-gruen { background: var(--gruen-hell); color: var(--gruen); }

/* Fällige Termine auf der Startseite */
.inv-karten { display: grid; gap: 12px; }
.inv-termin {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between;
  background: var(--weiss); border: 1px solid var(--linie); border-left: 5px solid var(--linie-stark);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schatten);
}
.inv-termin-ueberfaellig { border-left-color: var(--rot); }
.inv-termin-faellig { border-left-color: var(--gelb); }
.inv-termin-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 220px; }
.inv-termin-text strong { font-size: 17px; }
.inv-termin-text span { color: var(--grau); font-size: 14px; }
.inv-termin-text .inv-schild { align-self: flex-start; }
.inv-termin .knopf.gross { min-width: 150px; }

/* Listen und Tabellen */
.inv-planzeile, .inv-produktzeile, .inv-gruppenzeile { display: flex; align-items: center; gap: 12px; padding: 13px 4px; flex-wrap: wrap; }
.inv-planzeile .knopfreihe { margin: 0; gap: 6px; }
.inv-listen-gruppe { padding: 14px 4px 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); }
.inv-mini { width: 44px; height: 44px; flex: none; border-radius: 9px; background: var(--papier); display: grid; place-items: center; overflow: hidden; color: var(--grau-hell); }
.inv-mini img { width: 100%; height: 100%; object-fit: cover; }
.inv-gruppenzeile .inv-umbenennen { flex: 1 1 260px; }
.inv-gruppenzeile .inv-umbenennen input { flex: 1; }
.inv-sortier { display: flex; gap: 6px; align-items: center; }
.inv-gruppenwahl { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 6px 14px 10px; margin: 8px 0 14px; }
.inv-gruppenwahl legend { font-size: 14px; color: var(--grau); padding: 0 4px; }
.inv-gebinde { display: grid; gap: 8px; margin-bottom: 8px; }
.inv-gebinde-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 90px minmax(60px, auto) auto; gap: 8px; align-items: center; }
.inv-gebinde-zeile input, .inv-gebinde-zeile select { min-height: 42px; }
.inv-gebinde-zeile select { width: auto; }
.inv-gebinde-zeile.ohne-basis { grid-template-columns: auto minmax(0, 1fr) auto 90px auto; }
.inv-gebinde-weg {
  width: 42px; height: 42px; padding: 0; border: 1px solid var(--linie-stark); border-radius: 9px;
  background: var(--weiss); color: var(--grau); font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
}
.inv-gebinde-weg:hover { color: var(--rot-dunkel); border-color: var(--rot); }
.inv-loeschen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 2px 24px; }
.inv-foto-gross img { max-width: 220px; border-radius: var(--radius-klein); border: 1px solid var(--linie); display: block; margin-bottom: 8px; }
.inv-foto-gross + .knopf.link { display: inline-block; margin: 0 0 12px; }
.inv-tabelle-rahmen { padding: 0; overflow-x: auto; }
.inv-tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.inv-tabelle th, .inv-tabelle td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.inv-tabelle th { font-size: 13px; color: var(--grau); font-weight: 600; background: var(--papier); }
.inv-tabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-tabelle tbody tr:last-child td { border-bottom: 0; }
.inv-tabelle-gruppe td { background: var(--papier); font-weight: 700; font-size: 13px; color: var(--grau); }
.inv-minus { color: var(--rot-dunkel); font-weight: 700; }
.inv-plus { color: var(--gruen); font-weight: 700; }

/* ---------- Erfassung: fürs Handy, mit einer Hand ---------- */
.inv-vollbild .inv-haupt { padding: 0 0 120px; max-width: 760px; margin: 0 auto; }
.inv-erf-kopf {
  position: sticky; top: 54px; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--weiss); border-bottom: 1px solid var(--linie);
}
.inv-erf-zurueck { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--tinte); flex: none; }
.inv-erf-zurueck:hover { background: var(--papier); }
.inv-erf-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.inv-erf-titel span { font-size: 13px; color: var(--grau); }
.inv-sync { font-size: 18px; color: var(--grau-hell); }
.inv-sync.ok { color: var(--gruen); }
.inv-sync.laeuft { color: var(--blau); }
.inv-sync.wartet { color: var(--gelb); }
.inv-sync.fehler { color: var(--rot); }
.inv-fortschritt { height: 6px; background: var(--linie); }
.inv-fortschritt span { display: block; height: 100%; background: var(--gruen); transition: width .25s; }
.inv-filter { display: flex; gap: 8px; padding: 12px 14px; position: sticky; top: 124px; z-index: 19; background: var(--papier); }
.inv-filter button {
  flex: 1; min-height: 44px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--weiss);
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--tinte-weich); cursor: pointer;
}
.inv-filter button.aktiv { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.inv-filter b { font-variant-numeric: tabular-nums; }
.inv-erf-liste { padding: 0 14px; }
.inv-erf-gruppe { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--grau); margin: 18px 4px 8px; }
.inv-pos {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin-bottom: 8px; padding: 12px 16px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; text-align: left;
  font: inherit; color: var(--tinte); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.inv-pos:active { background: var(--papier); }
.inv-pos-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inv-pos-text strong { font-size: 16px; }
.inv-pos-text span { font-size: 13px; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-pos-menge { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--grau-hell); }
.inv-pos.erfasst .inv-pos-menge { color: var(--gruen); }
.inv-pos.wartet .inv-pos-menge::after { content: " ⟳"; color: var(--gelb); }
.inv-erf-leer { text-align: center; padding: 40px 10px; color: var(--grau); }
.inv-erf-status { margin: 8px 14px 0; font-size: 14px; color: var(--gelb); }
.inv-erf-status:empty { display: none; }
.inv-erf-fuss {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: 10px; justify-content: center;
  padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--weiss); border-top: 1px solid var(--linie);
}
.inv-erf-fuss > *, .inv-erf-fuss form { flex: 1; max-width: 360px; }
.inv-erf-fuss .knopf { width: 100%; min-height: 54px; font-size: 16px; }
.inv-erf-fuss .knopf:disabled { background: var(--linie-stark); color: var(--grau); cursor: default; }
.inv-erf-mehr { margin: 22px 14px; }
.inv-erf-mehr form { margin: 10px 0; }

/* Eingabeblatt: kommt von unten, großer Daumenbereich */
.inv-blatt { position: fixed; inset: 0; z-index: 40; background: rgba(22, 24, 27, .45); display: flex; align-items: flex-end; justify-content: center; }
.inv-blatt[hidden] { display: none; }
.inv-blatt-innen {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--weiss);
  border-radius: 22px 22px 0 0; padding: 18px 16px; padding-bottom: max(18px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
}
.inv-blatt-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.inv-blatt-kopf img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.inv-blatt-kopf > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.inv-blatt-kopf strong { font-size: 18px; }
.inv-blatt-kopf span { font-size: 13px; color: var(--grau); }
.inv-blatt-zu { width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--papier); font-size: 18px; cursor: pointer; flex: none; }
.inv-stepper { display: grid; grid-template-columns: minmax(0, 1fr) 60px 84px 60px; gap: 8px; align-items: center; margin-bottom: 10px; }
.inv-stepper-name { font-weight: 700; font-size: 16px; display: flex; flex-direction: column; line-height: 1.2; }
.inv-stepper-name small { font-weight: 400; font-size: 12.5px; color: var(--grau); }
.inv-stepper-knopf {
  height: 60px; border-radius: 14px; border: 1px solid var(--linie-stark); background: var(--papier);
  font: inherit; font-size: 28px; font-weight: 600; color: var(--tinte); cursor: pointer; touch-action: manipulation;
}
.inv-stepper-knopf:active { background: var(--linie); }
.inv-stepper input { height: 60px; text-align: center; font-size: 22px; font-weight: 700; padding: 0 4px; font-variant-numeric: tabular-nums; }
.inv-blatt-summe { text-align: right; font-size: 18px; font-weight: 700; margin: 4px 2px 14px; color: var(--gruen); }
.inv-blatt-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-blatt-knoepfe [data-inv-speichern] { grid-column: 1 / -1; order: 3; min-height: 60px; font-size: 18px; }
.inv-blatt-knoepfe [data-inv-leeren] { justify-self: center; }
body.inv-blatt-offen { overflow: hidden; }

/* Kachel "Anstehende Inventuren" auf der Übersicht des Intranets */
.inv-kachel { margin-bottom: 22px; }
.inv-kachel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.inv-kachel-kopf h2 { margin: 0; font-size: 18px; }
.inv-kachel ul { list-style: none; margin: 0; padding: 0; }
.inv-kachel li a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 11px 12px; margin: 0 -6px; border-radius: 10px; text-decoration: none; color: var(--tinte);
}
.inv-kachel li a:hover { background: var(--papier); }
.inv-kachel li + li { border-top: 1px solid var(--linie); }
.inv-kachel li span.leise { font-size: 14px; }
.inv-kachel .inv-k-ueberfaellig strong { color: var(--rot-dunkel); }
.inv-kachel .inv-k-bald { opacity: .75; }
.inv-rueckstand { margin: 0 0 8px; font-size: 14px; color: var(--rot-dunkel); font-weight: 600; }

@media (max-width: 900px) {
  .inv-haupt { padding: 20px 16px 48px; }
  .inv-gebinde-zeile, .inv-gebinde-zeile.ohne-basis { grid-template-columns: auto minmax(0, 1fr) auto 70px auto; }
  .inv-gebinde-zeile [data-inv-basis-text] { display: none; }
  .inv-gebinde-zeile:not(.ohne-basis) { grid-template-columns: auto minmax(0, 1fr) auto 62px minmax(70px, auto) auto; gap: 6px; }
}
.inv-kurz { display: none; }
@media (max-width: 520px) {
  .inv-lang { display: none; }
  .inv-kurz { display: inline; }
  .inv-zurueck { padding: 9px 11px; }
  .inv-marke span span { display: none; }
  .inv-termin .knopf.gross, .inv-termin form { width: 100%; }
}
/* Zählort-Auswahl in der Erfassung */
.inv-orte { display: flex; gap: 8px; align-items: center; padding: 0 14px 10px; overflow-x: auto; }
.inv-orte-titel { font-size: 13px; color: var(--grau); font-weight: 600; flex: none; }
.inv-orte button {
  flex: none; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 2px solid var(--linie-stark);
  background: var(--weiss); font: inherit; font-weight: 700; color: var(--tinte-weich); cursor: pointer;
}
.inv-orte button.aktiv { border-color: var(--rot); color: var(--rot-dunkel); background: var(--rot-hell); }
.inv-pos.hier { border-left: 4px solid var(--rot); }
.inv-blatt-ort { display: flex; flex-direction: column; gap: 2px; margin: -4px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--rot-hell); }
.inv-blatt-ort:empty { display: none; }
.inv-blatt-ort strong { color: var(--rot-dunkel); }
.inv-blatt-ort span { font-size: 13.5px; color: var(--tinte-weich); }
.inv-fuellmenge { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }

/* ---------- Inventur: Scannen und Anlernen ---------- */
.inv-scan-knopf {
  position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 26;
  display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--tinte); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
.inv-scan-knopf .icon { width: 22px; height: 22px; }
.inv-scanner { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
.inv-scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inv-scanner-rahmen {
  position: absolute; left: 50%; top: 42%; width: min(78vw, 360px); height: min(40vw, 190px);
  transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 16px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
}
.inv-scanner-text {
  position: absolute; left: 16px; right: 16px; top: calc(42% + min(20vw, 95px) + 18px); margin: 0;
  color: #fff; text-align: center; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.inv-scanner-leiste {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.inv-scanner-leiste .knopf { min-height: 54px; flex: 1 1 120px; max-width: 220px; }
/* Wareneingang über Rechnungen */
.inv-we-start .knopf.gross { width: 100%; min-height: 64px; }
.inv-we-kopf p { margin: 0 0 12px; }
.inv-we-ok-text { color: var(--gruen); font-weight: 600; }
.inv-we-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 14px; }
.inv-we-raster input, .inv-we-raster select { width: 100%; }
.inv-we-raster input[type=date] {
  padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--tinte); background: var(--weiss);
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); min-height: 46px;
}
.inv-we-liste { display: grid; gap: 10px; margin: 14px 0; }
.inv-we-pos { background: var(--weiss); border: 1px solid var(--linie); border-left: 5px solid var(--linie-stark); border-radius: var(--radius-klein); padding: 12px 14px; }
.inv-we-pos.gebucht { border-left-color: var(--gruen); }
.inv-we-pos.offen { border-left-color: #d97706; }
.inv-we-pos.ignoriert { opacity: .7; background: var(--papier); }
.inv-we-pos-kopf { display: flex; gap: 10px; align-items: flex-start; }
.inv-we-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--papier); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.inv-we-pos-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.inv-we-pos-text input { width: 100%; }
.inv-we-rmenge { flex: none; font-weight: 700; white-space: nowrap; }
.inv-we-hand { display: grid; grid-template-columns: 110px 1fr; gap: 8px; margin-top: 8px; }
.inv-we-preis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; margin-top: 6px; }
.inv-we-preis input { width: 96px; min-height: 40px; text-align: right; }
.inv-we-je { font-variant-numeric: tabular-nums; }
.inv-we-je.leise { font-weight: 400; font-size: 13.5px; }
.inv-we-zuordnung { display: grid; gap: 8px; margin-top: 10px; }
.inv-we-zuordnung select { width: 100%; min-height: 44px; }
.inv-we-faktor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.inv-we-faktor input { width: 84px; min-height: 40px; text-align: right; }
.inv-we-faktor.pruefen input { border-color: #d97706; box-shadow: 0 0 0 2px #fde68a; }
.inv-we-faktor select { width: auto; max-width: 100%; min-height: 40px; }
.inv-we-ergebnis { margin-left: auto; }
.inv-we-pos-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.inv-we-ok { margin: 0; font-weight: 600; }
.inv-we-fuss {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  background: var(--weiss); border-top: 1px solid var(--linie); padding: 12px 4px; padding-bottom: max(12px, env(safe-area-inset-bottom)); margin-top: 14px;
}
.inv-we-stand { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--grau); }
.inv-we-fuss .knopf.gross { flex: none; min-width: 130px; }
.inv-we-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; }
.inv-we-angaben dt { color: var(--grau); }
.inv-we-angaben dd { margin: 0; }
.inv-we-tabelle tr.inv-we-ignoriert td, .inv-we-tabelle tr.inv-we-offen td { color: var(--grau); }
.inv-we-storno { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.inv-we-storno .feld { flex: 1 1 260px; margin: 0; }
@media (max-width: 900px) {
  .inv-we-fuss { bottom: calc(60px + env(safe-area-inset-bottom)); padding-bottom: 12px; }
}
/* Zählhilfe (Foto: wischen/antippen) */
.inv-zh-start { margin-top: 10px; }
.inv-zh {
  position: fixed; inset: 0; z-index: 65; background: #15171a; color: #fff;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
}
.inv-zh-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); }
.inv-zh-kopf strong { font-size: 17px; }
.inv-zh-zahl { margin-left: auto; background: #c62828; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 16px; }
.inv-zh-zu { width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; cursor: pointer; }
.inv-zh-tipp {
  margin: 0 10px 8px; padding: 6px 8px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .8);
  min-height: calc(3 * 1.35em + 12px); border-radius: 10px;
}
.inv-zh-tipp.warnung { background: #fef3c7; color: #78350f; font-weight: 600; }
.inv-zh-buehne { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.inv-zh-buehne canvas { display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.inv-zh-unten { padding: 10px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.inv-zh-frage { margin: 0; text-align: center; font-size: 17px; font-weight: 700; }
.inv-zh-ziel { margin: 0; justify-content: center; }
.inv-zh-ziel .inv-chip span { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
/* eine feste Zeile – die Knöpfe dürfen die Höhe nicht ändern, sonst verrutscht das Foto */
.inv-zh-knoepfe { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.inv-zh-knoepfe .knopf { min-height: 56px; padding: 6px 8px; font-size: 14px; line-height: 1.2; }
.inv-zh-knoepfe .knopf.zweit { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3); }
.inv-blatt-knoepfe-frei { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.inv-blatt-knoepfe-frei .knopf { width: 100%; min-height: 54px; }
.inv-blatt-innen input[type=search] { width: 100%; min-height: 48px; margin: 6px 0 10px; }
.inv-wahl { max-height: 46vh; overflow-y: auto; }
.inv-wahl .inv-pos { margin-bottom: 6px; min-height: 56px; }

.inv-anlernen { max-width: 640px; }
.inv-anlern-start { display: grid; gap: 12px; margin: 18px 0; }
.inv-anlern-start .knopf.gross { min-height: 64px; font-size: 17px; width: 100%; }
.inv-anlern-start > a { text-align: center; padding: 8px; }
.inv-anlern-titel { font-weight: 700; margin: 0 0 10px; }
.inv-anlern-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.inv-produktkarte { display: flex; gap: 14px; align-items: center; }
.inv-produktkarte img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; flex: none; }
.inv-produktkarte > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inv-produktkarte span { font-size: 14px; color: var(--grau); }
.inv-anlern-form { padding-bottom: 8px; }
.inv-anlern-form input[type=text] { min-height: 50px; font-size: 17px; }
.inv-anlern-foto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-anlern-foto img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--linie); }
.inv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-chip input { position: absolute; opacity: 0; pointer-events: none; }
.inv-chip span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 12px;
  border: 2px solid var(--linie-stark); background: var(--weiss); font-weight: 600; cursor: pointer; user-select: none;
}
.inv-chip input:checked + span { border-color: var(--rot); background: var(--rot-hell); color: var(--rot-dunkel); }
.inv-chip input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
.inv-anlern-fuell { display: grid; gap: 8px; }
.inv-anlern-fuell > input { max-width: 160px; }
.inv-anlern-fuss {
  position: sticky; bottom: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;
  margin: 14px -20px -8px; padding: 12px 20px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--weiss); border-top: 1px solid var(--linie);
}
.inv-anlern-fuss .knopf.gross { grid-column: 1 / -1; min-height: 58px; }
.inv-zuletzt-eintrag { display: flex; flex-direction: column; padding: 10px 2px; border-bottom: 1px solid var(--linie); }
@media (max-width: 900px) {
  .inv-vollbild .inv-scan-knopf { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ---------- Fahrzeug-Termine (defekte.php?ansicht=termine) ---------- */
.ft-formular h2 { margin-top: 0; }
.ft-kalender { margin-bottom: 24px; }
.ft-monat { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ft-monat h2 { margin: 0; font-size: 19px; min-width: 150px; text-align: center; }
.ft-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ft-wochentag { font-size: 12.5px; font-weight: 700; color: var(--grau); text-align: center; padding: 2px 0 6px; }
.ft-tag {
  min-height: 92px; border: 1px solid var(--linie); border-radius: 8px; padding: 5px; background: var(--weiss);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.ft-tag.fremd { background: var(--papier); opacity: .55; }
.ft-tag.heute { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.ft-tagzahl { font-size: 13px; font-weight: 600; color: var(--grau); }
.ft-tag.heute .ft-tagzahl { color: var(--rot-dunkel); }
.ft-chip {
  display: block; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--blau-hell); color: var(--blau);
}
.ft-chip span:first-child { font-weight: 700; }
.ft-chip.ft-ueberfaellig { background: var(--rot-hell); color: var(--rot-dunkel); }
.ft-chip.ft-bald { background: var(--gelb-hell); color: var(--gelb); }
.ft-chip.ft-erledigt { background: var(--gruen-hell); color: var(--gruen); text-decoration: line-through; }
.ft-marke-ueberfaellig { background: var(--rot-hell); color: var(--rot-dunkel); }
.ft-marke-bald { background: var(--gelb-hell); color: var(--gelb); }
.ft-marke-spaeter { background: var(--blau-hell); color: var(--blau); }
.ft-marke-erledigt { background: var(--gruen-hell); color: var(--gruen); }
.ft-liste { display: grid; gap: 12px; margin-bottom: 24px; }
.ft-termin { border-left: 5px solid var(--blau); margin: 0; }
.ft-termin.ft-ueberfaellig { border-left-color: var(--rot); }
.ft-termin.ft-bald { border-left-color: #d97706; }
.ft-termin:target { box-shadow: 0 0 0 3px var(--rot-hell), var(--schatten); }
.ft-termin-kopf { display: flex; align-items: center; gap: 14px; }
.ft-symbol { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--papier); display: grid; place-items: center; color: var(--tinte-weich); }
.ft-termin-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ft-termin-text strong { font-size: 16.5px; }
.ft-termin-text span { color: var(--grau); font-size: 14.5px; }
.ft-termin-text a { font-weight: 700; color: var(--tinte); }
.ft-termin-datum { flex: none; display: grid; justify-items: end; gap: 4px; text-align: right; }
.ft-termin-info { margin: 10px 0 0; }
.ft-termin-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ft-termin-fuss form { margin: 0; }
.ft-erledigen summary { list-style: none; cursor: pointer; }
.ft-erledigen summary::-webkit-details-marker { display: none; }
.ft-erledigen[open] { flex-basis: 100%; }
.ft-erledigen-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; padding: 12px; background: var(--papier); border-radius: var(--radius-klein); }
.ft-erledigen-form .feld { margin: 0; flex: 1 1 170px; }
.ft-erledigen-form input[type=date], .ft-formular input[type=date] {
  width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--tinte); background: var(--weiss);
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); min-height: 46px;
}
.ft-archiv summary { cursor: pointer; }
.ft-archiv .liste { margin-top: 10px; }
.ft-archiv-zeile { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 2px; }
.ft-kachel .marke-status { font-size: 12px; padding: 2px 8px; }
@media (max-width: 640px) {
  .ft-tag { min-height: 54px; padding: 3px; }
  .ft-chip { font-size: 10.5px; padding: 2px 3px; }
  .ft-chip-art { display: none; }
  .ft-termin-kopf { flex-wrap: wrap; }
  .ft-termin-datum { justify-items: start; text-align: left; flex-basis: 100%; grid-auto-flow: column; justify-content: start; align-items: center; }
}

/* ---------- Produktdatenbank (admin.php?ansicht=produkte) ---------- */
.pd-formular .karte h2 { margin-top: 0; font-size: 18px; }
.pd-formular .karte h3 { font-size: 15px; margin: 18px 0 8px; }
.pd-optionen { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-bottom: 14px; }
.pd-optionen .check { margin: 0; }
.pd-bild-gross img { max-width: 240px; max-height: 240px; border-radius: var(--radius-klein); border: 1px solid var(--linie); display: block; margin-bottom: 6px; }
.pd-bild-gross + .knopf.link { display: inline-block; margin: 0 0 12px; }
.pd-zeilen { display: grid; gap: 8px; margin-bottom: 10px; }
.pd-kopfzeile { font-size: 12.5px; font-weight: 700; color: var(--grau); }
.pd-variante { display: grid; grid-template-columns: minmax(0, 2fr) minmax(70px, 1fr) minmax(70px, 1fr) 42px; gap: 8px; align-items: center; }
.pd-rezeptzeile { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr) 80px 86px minmax(80px, 1fr) 42px; gap: 8px; align-items: center; }
.pd-variante input, .pd-rezeptzeile input, .pd-rezeptzeile select { min-height: 42px; }
.pd-rezeptzeile.pd-offen select:first-child { border-color: #d97706; box-shadow: 0 0 0 2px #fde68a; }
.pd-ausbeute { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pd-ausbeute input { width: 110px; }
.pd-ausbeute select { width: auto; }
.pd-verbrauch { margin-top: 14px; padding: 12px 14px; background: var(--papier); border-radius: var(--radius-klein); font-size: 14.5px; }
.pd-verbrauch p { margin: 6px 0 0; }
.pd-warnung { color: var(--gelb); font-weight: 600; font-size: 14px; }
.pd-marke { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--papier); border: 1px solid var(--linie); color: var(--grau); vertical-align: middle; }
.pd-haken { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 16px; }
.pd-haken .check { margin: 4px 0; }
.pd-naehrwerte { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 16px; }
.pd-fuss { position: sticky; bottom: 0; z-index: 5; background: var(--papier); padding: 12px 0; margin-bottom: 18px; }
.pd-fuss .knopf.gross { min-width: 180px; }
.pd-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pd-filter input[type=search] { flex: 1 1 220px; width: auto; }
.pd-filter select { width: auto; flex: 0 1 200px; }
.pd-zeile .pd-mini { width: 48px; height: 48px; flex: none; border-radius: 10px; background: var(--papier); display: grid; place-items: center; overflow: hidden; color: var(--grau-hell); }
.pd-zeile .pd-mini img { width: 100%; height: 100%; object-fit: cover; }
.pd-inline { display: flex; gap: 10px; align-items: center; flex: 1 1 280px; }
.pd-inline input { flex: 1; }
.pd-kategorie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 2px; }
.pd-karte-form .pd-haken { margin-bottom: 12px; }
.pd-loeschen { margin: 8px 0 30px; }
.pd-verwendung { margin: 8px 0 0; padding-left: 18px; }
.pd-verwendung li { margin: 4px 0; }
@media (max-width: 760px) {
  .pd-kopfzeile { display: none; }
  .pd-variante { grid-template-columns: minmax(0, 1fr) 80px 80px 42px; }
  .pd-rezeptzeile { grid-template-columns: minmax(0, 1fr) 80px 86px 42px; padding: 10px; border: 1px solid var(--linie); border-radius: var(--radius-klein); }
  .pd-rezeptzeile select:first-child, .pd-rezeptzeile input[name="r_text[]"] { grid-column: 1 / -1; }
}

/* ---------- Zwei Welten (Projekt 2): Band „Du bist in …“ und Hauptschalter ---------- */
.welt-band {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-radius: var(--radius-klein); margin-bottom: 16px; font-size: 14.5px;
}
.welt-band a { font-weight: 600; color: inherit; }
.welt-intern { background: var(--blau-hell); color: var(--blau); border: 1px solid #c9d8ea; }
.welt-franchise { background: #fff4e5; color: #8a4b00; border: 1px solid #f3d3a6; }
.welt-schalter { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.welt-schalter > div { display: grid; gap: 3px; }
.registrieren-gruppe { margin: 4px 0 0 28px; display: grid; gap: 2px; }

/* ---------- Chefadmin, Struktur beider Welten, Schulungs-Baustein (Paket 136) ---------- */
.marke-chef {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  background: #1d1d1b; color: #f5c84c; border: 1px solid #1d1d1b; vertical-align: middle; white-space: nowrap;
}
h1 .marke-chef { font-size: 14px; }
.welt-marke { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 650; }
.struktur-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.struktur-paar {
  --struktur-breite: min(calc(100vw - 48px), 1800px);
  width: var(--struktur-breite); margin-left: calc((100% - var(--struktur-breite)) / 2);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.struktur-paar .struktur { width: auto; margin-left: 0; min-width: 0; }
@media (max-width: 900px) { .struktur-paar { grid-template-columns: 1fr; } }
.struktur-franchise .struktur-flaeche { border-color: #f3d3a6; }
.sk-in .sk-innen { border-left: 4px solid #8fb0d6; }
.sk-fr .sk-innen { border-left: 4px solid #e8a33d; }
.sk-fr.sk-gruppe .sk-innen, .sk-fr.sk-wurzel .sk-innen { background: #fff4e5; border-color: #f3d3a6; border-left-color: #e8a33d; }
.sk-fr.sk-gruppe .sk-titel, .sk-fr.sk-wurzel .sk-titel { color: #8a4b00; }
.schulung-schritt { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.schulung-schritt .zeile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.schulung-schritt .zeile-text span { color: var(--grau); font-size: 14px; }
/* Nur in den Schulungen ein runder Zähler – im Meldeformular ist .schritt-nr die Zeile "Schritt 2 von 6" */
.schulung-schritt .schritt-nr {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--papier); border: 1px solid var(--linie-stark); color: var(--grau);
  font-size: inherit; text-transform: none; letter-spacing: 0; margin: 0;
}
.schulung-schritt .schritt-nr.fertig { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.schulung-text { line-height: 1.6; }
.schulung-abschnitt h2 { margin-top: 0; }
.schulung-frage { border: 1px solid var(--linie); }
.schulung-frage legend { padding: 0 4px; }
.schulung-frage .check { margin: 6px 0; }
.schulung-frage.richtig { border-left: 4px solid var(--gruen); }
.schulung-frage.falsch { border-left: 4px solid var(--rot); }
.schulung-antworten { list-style: none; margin: 6px 0 0; padding: 0; }
.schulung-antworten li { padding: 4px 0; }
.schulung-antworten li.soll { color: var(--gruen); font-weight: 600; }
.schulung-antworten li.gewaehlt:not(.soll) { color: var(--rot-dunkel); }
.schulung-antwort-zeile { display: flex; flex-wrap: nowrap; width: 100%; margin-bottom: 6px; }
.schulung-antwort-zeile input[type="text"] { flex: 1 1 auto; min-width: 0; }

/* ---------- Produktdatenbank: Smiley's-Import, Zutaten (Paket 137) ---------- */
.pd-rezeptzeile { grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr) 72px 64px 92px minmax(80px, 1fr) 42px; }
.pd-rezeptzeile.pd-optional { opacity: .7; }
.pd-bericht { margin: 4px 0 10px; padding-left: 20px; }
.pd-bericht li { margin: 2px 0; }
.pd-abgleich td, .pd-abgleich th { padding: 4px 12px 4px 0; text-align: left; }
.pd-offen-zeile td:first-child { border-left: 3px solid #d97706; padding-left: 8px; }
@media (max-width: 760px) {
  .pd-rezeptzeile { grid-template-columns: minmax(0, 1fr) 70px 60px 86px 42px; }
}
.pd-eigenschaft { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; background: var(--papier); border: 1px solid var(--linie); margin: 0 4px 4px 0; }
.pd-eigenschaft.neu { background: #fff4e5; border-color: #f3d3a6; color: #8a4b00; font-weight: 650; }
.pd-produkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pd-produkt-karte { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-decoration: none; color: inherit; }
.pd-produkt-karte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--papier); display: block; }
.pd-produkt-karte .pd-produkt-text { padding: 12px 14px; display: grid; gap: 4px; }
.pd-produkt-karte .pd-produkt-text span { color: var(--grau); font-size: 13.5px; }
.pd-detail-bild { width: 100%; max-width: 520px; border-radius: var(--radius); display: block; margin-bottom: 14px; }

/* ---------- Projekte: Punkt bearbeiten (Paket 138) ---------- */
.punkt-bearbeiten { flex: 0 0 auto; }
.punkt-bearbeiten[open] { flex: 1 1 100%; }
.punkt-bearbeiten > summary {
  list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--rot-dunkel);
  padding: 6px 2px; display: inline-block;
}
.punkt-bearbeiten > summary::-webkit-details-marker { display: none; }
.punkt-bearbeiten > summary:hover { text-decoration: underline; }
.punkt-bearbeiten[open] > summary { color: var(--grau); }
.punkt-bearbeiten > form { margin: 8px 0 0; background: var(--papier); }

/* ---------- Produktdatenbank: Rezeptur als Tabelle, Zutaten mit Mengen je Größe (Paket 140) ---------- */
.pd-matrix-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }
.pd-matrix { width: 100%; border-collapse: collapse; }
.pd-matrix th, .pd-matrix td { padding: 4px; text-align: left; vertical-align: middle; }
.pd-matrix thead th { font-size: 12.5px; font-weight: 700; color: var(--grau); white-space: nowrap; }
.pd-matrix input[type=text], .pd-matrix select { width: 100%; min-height: 40px; padding-left: 8px; padding-right: 8px; }
.pd-matrix .pd-m-zutat { min-width: 190px; }
.pd-matrix td[data-spalte] { min-width: 86px; }
.pd-matrix td[data-spalte] input, .pd-zutaten-tabelle td input[inputmode=decimal] { text-align: center; min-width: 66px; }
.pd-matrix thead th[data-spalte] input { font-weight: 700; text-align: center; font-size: 14px; padding-left: 4px; padding-right: 4px; min-width: 0; }
.pd-matrix .pd-m-mitte { text-align: center; }
.pd-matrix tbody td select { min-width: 92px; }
.pd-matrix tbody td input[name^="z_hinweis"] { min-width: 120px; }
.pd-m-kopf { display: flex; align-items: center; gap: 2px; min-width: 112px; }
.pd-m-weg { flex: none; width: 24px; height: 34px; padding: 0; border: 0; background: none; color: var(--grau-hell); cursor: pointer; font-size: 14px; border-radius: 8px; }
.pd-m-weg:hover { color: var(--rot-dunkel); background: var(--papier); }
.pd-matrix tbody tr.pd-offen input[name^="z_name"] { border-color: #d97706; box-shadow: 0 0 0 2px #fde68a; }
.pd-matrix tbody tr.pd-optional input[type=text] { color: var(--grau); }
.pd-matrix tfoot th { text-align: right; font-size: 13px; color: var(--grau); white-space: nowrap; padding-right: 10px; }
.pd-matrix tfoot tr:first-child > * { border-top: 2px solid var(--linie); padding-top: 10px; }
.pd-matrix tfoot td[data-spalte] { text-align: center; font-variant-numeric: tabular-nums; }
.pd-m-vk input { font-weight: 700; }
.pd-m-ek td[data-spalte] { font-weight: 650; }
.pd-m-portion th, .pd-m-portion input { font-size: 13px; }
.pd-zutaten-tabelle tbody tr > td { border-bottom: 1px solid var(--linie); }
.pd-zutaten-tabelle td select[name^="zt_inv"] { min-width: 200px; }
.pd-zutaten-tabelle .pd-neu-zeile td { padding-top: 10px; }
details.pd-verbrauch > summary { cursor: pointer; }

/* ---------- Inventur ↔ Produktdatenbank (Paket 141) ---------- */
.inv-pd-bezug { display: block; font-size: 13px; color: var(--blau); margin-top: 2px; }
.inv-pd-verbinden { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.inv-pd-verbinden select { flex: 1 1 240px; width: auto; min-width: 0; max-width: 100%; }
.inv-termin-knoepfe { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pd-listenzeile { display: flex; align-items: center; gap: 8px; }
.pd-listenzeile > .zeile { flex: 1 1 auto; min-width: 0; }
.pd-listenzeile > form { flex: none; }

/* ---------- Wareneingang: Zuordnen aus der Produktdatenbank (Paket 144) ---------- */
.inv-we-pd { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; background: var(--papier); border-radius: var(--radius-klein); }
.inv-we-pd .label { font-size: 13px; }
.inv-we-pd-neu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inv-we-pd-neu .feld { margin: 0; }

/* ---------- Produkte: VK netto und Mehrwertsteuer (Paket 146) ---------- */
.pd-m-netto th select { width: auto; min-height: 32px; padding: 2px 6px; font-size: 12.5px; margin-left: 4px; }
.pd-m-netto td[data-spalte] { font-variant-numeric: tabular-nums; color: var(--grau); }

/* ---------- Produktdatenbank: Prüfung (Paket 147) ---------- */
.pd-pruef > summary { cursor: pointer; font-size: 16px; }
.pd-pruef .liste { margin-top: 6px; }
.pd-pruef-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; }
.pd-pruef-zeile .zeile-text { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.pd-pruef-zeile .zeile-text span { color: var(--grau); font-size: 13.5px; }
.pd-pruef-knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-pruef-knoepfe select { max-width: 220px; }
.pd-pruef-knopf { border-color: #d97706; color: #8a4b00; }

/* ---------- Zutaten: Rechenweg des Einkaufspreises, Rechnung: freie Einheit (Paket 149) ---------- */
.pd-ek { min-width: 150px; }
.pd-ek details > summary { cursor: pointer; color: var(--blau); font-weight: 600; }
.pd-rechenweg { margin: 4px 0; padding-left: 18px; }
.pd-rechenweg li { margin: 2px 0; }
.inv-we-faktor input.inv-we-faktor-einheit { width: 130px; text-align: left; }
.inv-we-def { margin-top: 6px; padding: 6px 10px; background: #fff4e5; border-radius: var(--radius-klein); }

/* ---------- Einkaufspreis von Hand (Paket 151) ---------- */
.pd-ek-hand { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pd-ek-hand input { width: 84px; min-height: 34px; padding: 4px 8px; text-align: right; }
.pd-ek .pd-ek-hand { margin-bottom: 4px; }
.inv-ek-hand { margin-top: 10px; }
.inv-ek-hand input { width: 100px; text-align: right; }

/* ---------- Rechnung: Abgleich mit dem bisherigen Einkaufspreis (Paket 152) ---------- */
.inv-we-alt { margin-top: 4px; font-size: 13.5px; }
.inv-we-alt.geaendert { color: var(--rot-dunkel); font-weight: 650; }
.inv-we-alt.gleich { color: var(--grau); }

/* ---------- Doppelte zusammenführen (Paket 154) ---------- */
.inv-zf-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 8px; }
.inv-zf-karte { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--linie-stark); border-radius: 10px; cursor: pointer; }
.inv-zf-karte:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); }
.inv-zf-karte input { margin-top: 3px; }
.inv-zf-karte > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inv-zf-umrechnung { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-zf-umrechnung input { width: 110px; text-align: right; }
.inv-zf-vorschlag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; }
.inv-zf-vorschlag .zeile-text { flex: 1 1 240px; display: flex; flex-direction: column; }

/* ---------- Video erst auf Klick (Paket 155) ---------- */
.video-rahmen.video-klick { background: #1d2329; }
.video-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 18px; border: 0; background: transparent; color: #fff; cursor: pointer; font: inherit; text-align: center; }
.video-start .icon { width: 44px; height: 44px; }
.video-start strong { font-size: 17px; }
.video-start span { max-width: 420px; font-size: 13px; opacity: .8; line-height: 1.4; }
.video-start:hover strong, .video-start:focus-visible strong { text-decoration: underline; }

/* ---------- Produkte hintereinander bearbeiten (Paket 157) ---------- */
.liste-stelle { margin: -4px 0 14px; }
.pd-fuss.liste-weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (max-width: 560px) {
  .liste-weiter .knopf { flex: 1 1 auto; }
  .pd-fuss.liste-weiter .knopf.gross { min-width: 0; }
  .pd-fuss.liste-weiter > span { width: 100%; }
}

/* ---------- Paket 158: Kasse, Abverkauf, Datenprüfung, Zusammenführen, Rezept-Vorschläge ---------- */
.pd-vorschlagliste { position: fixed; z-index: 60; margin: 0; padding: 4px; list-style: none; background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: 10px; box-shadow: 0 8px 24px rgba(17, 24, 39, .14); max-height: 280px; overflow: auto; }
.pd-vorschlagliste li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 14.5px; }
.pd-vorschlagliste li span { color: var(--grau); font-size: 12.5px; white-space: nowrap; }
.pd-vorschlagliste li.aktiv, .pd-vorschlagliste li:hover { background: var(--blau-hell); }
.pd-neu-hinweis { margin-top: 4px; font-size: 12.5px; color: var(--rot-dunkel); line-height: 1.35; white-space: normal; }
.pd-neu-hinweis .knopf.link { font-weight: 650; }
.kasse-artikel td { vertical-align: top; }
.kasse-artikel tr.kasse-offen td:first-child { border-left: 3px solid var(--orange, #d9822b); }
.kasse-ziel select { max-width: 100%; min-width: 0; width: 100%; }
.kasse-zutat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.kasse-zutat input { width: 80px; }
.kasse-zutat select { width: auto; }
.kasse-ziel .inv-schild, .kasse-ziel a { display: inline-block; margin-top: 4px; margin-right: 8px; }
.kasse-vorschau td, .kasse-vorschau th { white-space: nowrap; font-size: 13px; }
.abv-quellen { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--tinte-weich, #374151); }
.abv-quellen li { margin-bottom: 2px; }
.abv-minus { color: var(--rot-dunkel); font-weight: 650; }
.abv-plus { color: var(--gruen, #2f7a4f); font-weight: 650; }
.abv-bestand td:first-child { min-width: 180px; }
.dp-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dp-sprung a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--papier); border: 1px solid var(--linie); font-size: 13.5px; text-decoration: none; color: var(--tinte); }
.dp-sprung .anz, .zf-abschnitt .anz { font-weight: 700; color: var(--rot-dunkel); }
.dp-tabelle td { vertical-align: top; }
.zf-vorschau { padding: 10px 18px; }
.zf-abschnitt { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.zf-abschnitt:last-child { border-bottom: 0; }
.zf-abschnitt ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.zf-quelle { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.zf-gramm { margin-top: 8px; }
.zf-gramm input { width: 90px; text-align: right; }
.zf-protokoll { padding: 12px 4px; }
.zf-protokoll summary { cursor: pointer; }
.zf-protokoll form { margin-top: 6px; }
.invz-quelle strong { display: inline-block; margin-bottom: 2px; }
.inv-erf-zeitraum { display: block; font-size: 12px; opacity: .8; }
.inv-we-nachtrag { margin-top: 6px; }
.inv-we-nachtrag-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; color: var(--tinte); }
.inv-we-nachtrag-form select { max-width: 100%; min-width: 0; flex: 1 1 200px; }
.inv-we-nachtrag-form input { width: 70px; text-align: right; }

/* ---------- Paket 159: Fahrzeug-Stammdaten, Erkennung beim Melden, Fristen ---------- */
.fz-formular [hidden], .schritt [data-weiter][hidden], .fz-auto[hidden] { display: none !important; }
.fz-formular .karte h2 { margin: 0 0 12px; font-size: 18px; }
.fz-formular input[type=date] {
  width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--tinte); background: var(--weiss);
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); min-height: 46px;
}
.fz-kennung { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fz-kennung::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fz-stand-dringend.voll .stand-zahl { color: var(--gelb); }
.fz-kennung-reihe, .fz-stand-reihe { display: flex; gap: 8px; align-items: center; }
.fz-kennung-reihe .fz-kennung { flex: 1 1 auto; min-width: 0; }
.fz-bis { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.fz-bis[hidden] { display: none; }
.fz-bis label { margin: 0; font-weight: 600; color: var(--grau); }
.fz-bis input { width: 84px; }
.fz-stand-reihe input { flex: 1 1 auto; min-width: 0; }
.fz-stand-reihe select { flex: 0 0 auto; width: auto; }
.fz-frist-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.fz-auto { margin: -4px 0 6px; color: var(--gruen); font-weight: 600; }
.fz-fuss { position: sticky; bottom: 0; z-index: 5; background: var(--papier); padding: 12px 0; margin-bottom: 18px; }
.fz-verwalten h2 { margin: 0 0 10px; font-size: 18px; }
.fz-verwalten form { margin: 0; }
.fz-liste { display: grid; gap: 10px; margin-bottom: 22px; }
.fz-karte { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; text-decoration: none; color: var(--tinte); border-left: 5px solid var(--gruen); }
.fz-karte:hover { border-color: var(--linie-stark); border-left-color: var(--gruen); box-shadow: var(--schatten-stark); }
.fz-karte:target { box-shadow: 0 0 0 3px var(--rot-hell), var(--schatten); }
.fz-st-reparatur, .fz-st-reparatur:hover { border-left-color: #d97706; }
.fz-st-stillgelegt, .fz-st-stillgelegt:hover { border-left-color: var(--grau-hell); opacity: .7; }
.fz-karte-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fz-karte-text strong { font-size: 17px; letter-spacing: .02em; }
.fz-karte-text span { color: var(--grau); font-size: 14.5px; overflow-wrap: anywhere; }
.fz-karte-text span.fz-nummer-fehlt { color: var(--rot-dunkel); font-weight: 700; font-size: 13.5px; } /* Paket 193 */
.fz-karte-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.fz-marke-einsatz { background: var(--gruen-hell); color: var(--gruen); }
.fz-marke-reparatur { background: var(--gelb-hell); color: var(--gelb); }
.fz-marke-stillgelegt { background: #e9ebee; color: #5a6168; }
.fz-alt summary, .fz-fehlend summary { cursor: pointer; }
.fz-alt-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 2px; }
.fz-alt-zeile .zeile-text { flex: 1 1 220px; min-width: 0; }
.fz-alt-zeile .zeile-text strong, .fz-meldung .zeile-text strong { display: block; }
.fz-alt-zeile .zeile-text span, .fz-meldung .zeile-text span { display: block; }
.fz-alt-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fz-meldung .zeile-text { display: block; padding: 11px 2px; color: inherit; text-decoration: none; }
.fz-meldung .zeile-text span { font-size: 14px; color: var(--grau); }
.fz-stand { margin-bottom: 16px; }
.fz-stand .stand-kachel { cursor: default; }
.fz-stand .stand-kachel:hover { transform: none; box-shadow: none; border-color: var(--linie); }
.fz-stand-dringend.voll .icon { background: var(--gelb-hell); color: var(--gelb); }
.fz-kennung-text { color: var(--tinte); }
.fz-ergebnis { flex-basis: 100%; margin: 0; }
.fz-kachel-mehr { margin: 8px 4px 0; }
.fz-defekt-stamm { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

/* Melden: Fahrzeug erkennen – große Treffer zum Antippen */
.fz-treffer { display: grid; gap: 9px; margin-top: 4px; }
.fz-treffer:empty { display: none; }
.fz-titel { margin: 8px 0 0; font-size: 14.5px; font-weight: 600; color: var(--tinte-weich); }
.fz-titel.fz-ok { color: var(--gruen); }
.fz-nicht { margin: 4px 0 0; padding: 12px 14px; border-radius: var(--radius-klein); background: var(--rot-hell); color: var(--rot-dunkel); font-weight: 700; font-size: 1.05rem; }
.fz-wahl {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 11px 14px; text-align: left; font: inherit; color: var(--tinte);
  background: var(--weiss); border: 2px solid var(--linie-stark); border-radius: var(--radius); cursor: pointer;
}
.fz-wahl:hover, .fz-wahl:focus-visible { border-color: var(--rot); outline: none; }
.fz-wahl-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fz-wahl-text strong { font-size: 1.2rem; letter-spacing: .04em; }
.fz-wahl-text span { color: var(--grau); font-size: 14px; overflow-wrap: anywhere; }
.fz-wahl-text .fz-wahl-rep { color: var(--gelb); font-weight: 600; }
.fz-wahl-knopf { flex: none; padding: 10px 14px; border-radius: var(--radius-klein); background: var(--gruen); color: #fff; font-weight: 700; font-size: 15px; }
.fz-einer { border-color: var(--gruen); background: var(--gruen-hell); }
.fz-wahl-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fz-klein { min-height: 52px; padding: 8px 11px; }
.fz-klein .fz-wahl-text strong { font-size: 1.05rem; }
.fz-alle { margin-top: 4px; }
.fz-alle summary { cursor: pointer; font-weight: 600; color: var(--tinte-weich); padding: 8px 0; }
.fz-heimat { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--gruen); }

@media (max-width: 560px) {
  .fz-frist-reihe { grid-template-columns: 1fr; }
  .fz-karte { padding: 12px; gap: 10px; }
  .fz-karte .ft-symbol { width: 38px; height: 38px; }
  .fz-karte-rechts { align-items: flex-start; }
  .fz-karte { flex-wrap: wrap; }
  .fz-karte-rechts { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; padding-left: 48px; }
  .fz-wahl-knopf { padding: 9px 11px; font-size: 14px; }
  .fz-wahl-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Paket 161: Inventur – Kopf am Handy, Startseite, Auswertung, Produkte ---------- */
/* Handy und Tablet (Paket 179): statt der Leiste ein Knopf "Menü" (☰).
   Ein Tipp klappt das Menü als weiße Fläche unter dem Kopf aus: Start,
   Verbuchen ▸ und Inventurverwaltung ▸ (beide noch einmal aufklappbar),
   Zurück ins Intranet. Die Seite dahinter wird abgedunkelt und hält still;
   ein Tipp daneben, auf "Menü" oder Escape klappt es wieder ein.
   Ohne JavaScript steht das Menü einfach offen unter dem Kopf. */
.inv-menue-schalter, .inv-menue-intranet { display: none; }
@media (max-width: 1024px), (pointer: coarse) {
  .inv-mit-menue .inv-marke { margin-right: auto; }
  .inv-mit-menue > .inv-zurueck { display: none; }
  html.inv-js .inv-menue-schalter {
    display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; padding: 9px 15px;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28); background: transparent;
    color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .inv-menue-schalter[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
  .inv-menue-schalter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .inv-burger { position: relative; display: inline-block; width: 18px; height: 14px; }
  .inv-burger::before, .inv-burger::after, .inv-burger span {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .2s, opacity .2s, top .2s;
  }
  .inv-burger::before { top: 0; }
  .inv-burger span { top: 6px; }
  .inv-burger::after { top: 12px; }
  [aria-expanded="true"] .inv-burger::before { top: 6px; transform: rotate(45deg); }
  [aria-expanded="true"] .inv-burger::after { top: 6px; transform: rotate(-45deg); }
  [aria-expanded="true"] .inv-burger span { opacity: 0; }

  .inv-menue {
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px 12px 14px;
    background: var(--weiss); color: var(--tinte);
  }
  html.inv-js .inv-menue {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
    /* unten bleibt ein Streifen Schleier frei – zum Einklappen per Tipp daneben */
    max-height: calc(100vh - var(--inv-kopf-h, 64px) - 64px); max-height: calc(100dvh - var(--inv-kopf-h, 64px) - 64px);
    overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  html.inv-js .inv-menue-offen .inv-menue { display: flex; }
  html:not(.inv-js) .inv-mit-menue { flex-wrap: wrap; }
  html:not(.inv-js) .inv-menue { flex: 1 1 100%; border-radius: 12px; }
  .inv-menue > * { min-width: 0; }
  .inv-menue-punkt {
    width: 100%; min-height: 50px; justify-content: flex-start; gap: 12px; padding: 12px; border-radius: 10px;
    color: var(--tinte); background: none; font-size: 16px; white-space: normal;
  }
  .inv-menue-punkt .icon { color: var(--grau); }
  .inv-menue-punkt:hover, .inv-menue-klappe[open] > .inv-menue-punkt { background: var(--papier); color: var(--tinte); }
  .inv-menue-punkt.aktiv { background: var(--rot-hell); color: var(--rot-dunkel); }
  .inv-menue-punkt.aktiv .icon { color: var(--rot-dunkel); }
  .inv-menue-punkt:focus-visible { outline: 2px solid var(--rot); outline-offset: 0; }
  .inv-menue-pfeil { margin: -4px 4px 0 auto; transform: rotate(-45deg); }
  .inv-menue-klappe[open] .inv-menue-pfeil { transform: rotate(45deg); margin-top: -6px; }
  .inv-menue-lang { display: inline; }
  .inv-menue-kurz { display: none; }
  .inv-menue-klappe { position: static; border-top: 1px solid var(--linie); }
  .inv-menue-tafel {
    position: static; min-width: 0; max-width: none; max-height: none; overflow: visible;
    margin: 2px 0 8px; padding: 0 0 0 16px; border-radius: 0; background: none; box-shadow: none;
  }
  .inv-menue-tafel a { padding: 11px 12px; }
  .inv-menue-intranet { display: flex; margin-top: 4px; border-top: 1px solid var(--linie); border-radius: 0 0 10px 10px; }
  .inv-menue-schleier { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(22, 24, 27, .5); cursor: pointer; }
  body.inv-menue-auf { overflow: hidden; }
}

/* Startseite: laufende Inventuren */
.inv-laufend { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.inv-lauf { display: grid; gap: 3px; margin: 0; text-decoration: none; color: var(--tinte); border-left: 5px solid var(--blau); }
.inv-lauf:hover { box-shadow: var(--schatten-stark); }
.inv-lauf:hover strong { color: var(--rot-dunkel); }
.inv-lauf strong { font-size: 17px; }
.inv-lauf-ort { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--grau); }
.inv-lauf-balken { display: block; height: 7px; margin-top: 8px; border-radius: 99px; background: var(--linie); overflow: hidden; }
.inv-lauf-balken span { display: block; height: 100%; background: var(--gruen); }
.inv-lauf-fuss { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--grau); }
.inv-lauf-weiter { font-weight: 700; color: var(--rot-dunkel); }
.inv-start-an { margin: 12px 0 0; }
.inv-start-leer p { margin: 0; }

/* Startseite: Ergebnis je Filiale und Gesamtauswertung */
.inva-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.inva-kachel {
  display: flex; flex-direction: column; gap: 2px; min-height: 160px; padding: 16px 18px; color: var(--tinte); text-decoration: none;
  background: var(--weiss); border: 1px solid var(--linie); border-top: 5px solid var(--grau-hell); border-radius: var(--radius); box-shadow: var(--schatten);
}
a.inva-kachel:hover { box-shadow: var(--schatten-stark); transform: translateY(-1px); }
.inva-verlust { border-top-color: var(--rot); }
.inva-gut { border-top-color: var(--gruen); }
.inva-neutral { border-top-color: var(--blau); }
.inva-leer { background: transparent; box-shadow: none; }
.inva-ort { font-size: 18px; font-weight: 800; }
.inva-was { font-size: 13px; color: var(--grau); }
.inva-wert { margin-top: 10px; font-size: 27px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.inva-verlust .inva-wert { color: var(--rot-dunkel); }
.inva-gut .inva-wert { color: var(--gruen); }
.inva-unter { font-size: 13.5px; font-weight: 600; color: var(--tinte-weich); }
.inva-klein { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--grau); }
.inva-gesamt { grid-column: 1 / -1; min-height: 0; border-top-color: var(--tinte); }
.inva-gesamt .inva-klein { font-weight: 700; color: var(--rot-dunkel); }
.inva-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.inva-drei > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--grau); }
.inva-drei b { font-size: 22px; color: var(--tinte); font-variant-numeric: tabular-nums; line-height: 1.2; }
.inva-drei-gross b { font-size: 24px; }
.inva-drei.karte { margin: 0 0 16px; }
.inva-kasten { margin-bottom: 16px; }
.inva-kasten h2 { margin: 0; font-size: 18px; }
.inva-kasten p:last-child { margin-bottom: 0; }
.inva-summe td { background: var(--papier); }
.inva-methode { margin-top: 16px; }
.inva-methode summary { cursor: pointer; }
.inva-methode ul { margin: 10px 0 0; padding-left: 20px; }
@media (max-width: 560px) {
  .inva-drei { grid-template-columns: 1fr; gap: 8px; }
  .inva-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inva-kachel { padding: 13px 14px; min-height: 140px; }
  .inva-wert { font-size: 22px; }
}
@media (max-width: 360px) {
  .inva-kacheln { grid-template-columns: 1fr; }
}

/* Produkte: nach Kategorie, je Produkt eine Kachel */
.inv-p-sprung a span { font-size: 12px; opacity: .7; }
.inv-p-gruppe { scroll-margin-top: 80px; }
.inv-p-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 8px; }
.inv-p-kachel {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px; color: var(--tinte); text-decoration: none;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten);
}
.inv-p-kachel:hover { border-color: var(--linie-stark); }
.inv-p-kachel:hover strong { color: var(--rot-dunkel); }
.inv-p-kachel-bild { flex: none; width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--papier); color: var(--grau-hell); }
.inv-p-kachel-bild img { width: 100%; height: 100%; object-fit: cover; }
.inv-p-kachel-text { display: grid; gap: 2px; min-width: 0; }
.inv-p-kachel-text strong { font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.inv-p-kachel-text > span { font-size: 13px; color: var(--grau); overflow-wrap: anywhere; }
.inv-p-fehlt { color: var(--gelb); font-weight: 600; }

/* Ein Produkt: Bild links, alle Angaben daneben – am Handy das Bild oben */
.inv-p-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.inv-p-kopf h1 { margin: 0; }
.inv-p-marken { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-p-raster { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.inv-p-bild { position: sticky; top: 80px; display: grid; gap: 10px; min-width: 0; }
.inv-p-foto { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.inv-p-foto img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.inv-p-ohne-foto { display: grid; justify-items: center; gap: 8px; font-size: 14px; color: var(--grau-hell); }
.inv-p-ohne-foto .icon { width: 46px; height: 46px; }
.inv-p-foto-wahl { display: grid; gap: 4px; }
.inv-p-foto-wahl input[type=file] { font-size: 13px; max-width: 100%; }
.inv-p-fakten { margin: 0; padding: 4px 14px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.inv-p-fakten div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.inv-p-fakten div:last-child { border-bottom: 0; }
.inv-p-fakten dt { color: var(--grau); flex: none; }
.inv-p-fakten dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.inv-p-angaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; min-width: 0; }
.inv-p-block { min-width: 0; padding: 16px 18px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.inv-p-block h2 { margin: 0 0 12px; font-size: 16.5px; }
.inv-p-block .feld { margin-bottom: 12px; }
.inv-p-block .hilfe { margin-top: 4px; }
.inv-p-breit { grid-column: 1 / -1; }
.inv-p-felder { display: grid; grid-template-columns: 2fr 1fr; gap: 0 14px; }
.inv-p-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inv-p-haken { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.inv-p-zuo { border-bottom: 1px solid var(--linie); }
.inv-p-zuo-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 0; border-top: 1px solid var(--linie); }
.inv-p-zuo-text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.inv-p-zuo-rechnung { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.inv-p-zuo-rechnung input { width: 84px; min-height: 38px; padding: 6px 9px; }
.inv-p-codes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.inv-p-code { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--papier); font-size: 13px; }
.inv-p-wert { margin: 0 0 10px; }
.inv-p-ek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inv-p-ek input { width: 120px; min-height: 42px; }
.inv-p-pd { list-style: none; margin: 0 0 10px; padding: 0; }
.inv-p-pd li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 7px 0; border-bottom: 1px solid var(--linie); }
.inv-p-pd .check { margin: 0; }
.inv-p-fuss { position: sticky; bottom: 0; z-index: 5; margin-top: 14px; padding: 12px 0; background: var(--papier); }
.inv-p-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.inv-p-kurz { display: none; }
@media (max-width: 1060px) {
  .inv-p-raster { grid-template-columns: 230px minmax(0, 1fr); }
  .inv-p-angaben { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .inv-p-raster { grid-template-columns: 1fr; gap: 14px; }
  .inv-p-bild { position: static; }
  .inv-p-foto { aspect-ratio: auto; height: 220px; }
  .inv-p-foto:has(.inv-p-ohne-foto) { height: 110px; }
  .inv-p-felder, .inv-p-drei { grid-template-columns: 1fr; }
  .inv-p-block { padding: 14px; }
  .inv-p-fuss { flex-wrap: nowrap; gap: 8px; padding: 10px 0; }
  .inv-p-fuss > span { display: none; }
  .inv-p-fuss .knopf { flex: 1 1 auto; min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
  .inv-p-lang { display: none; }
  .inv-p-kurz { display: inline; }
}

/* ---------- Paket 162: Einkaufsprodukte im Service-Portal (inc/waren.php) ---------- */
.pd-bereiche { margin-bottom: 16px; }
/* Liste: je Produkt eine große Kachel – etwa doppelt so groß wie in Paket 161 */
.wa-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 470px), 1fr)); gap: 14px; margin-bottom: 10px; }
.wa-kachel {
  display: flex; gap: 16px; align-items: flex-start; min-height: 168px; padding: 16px; color: var(--tinte); text-decoration: none;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten);
}
.wa-kachel:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-stark); }
.wa-kachel:hover strong { color: var(--rot-dunkel); }
.wa-kachel-bild { flex: none; width: 128px; height: 128px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--papier); color: var(--grau-hell); }
.wa-kachel-bild img { width: 100%; height: 100%; object-fit: cover; }
.wa-kachel-bild .icon { width: 40px; height: 40px; }
.wa-kachel-text { display: grid; gap: 6px; min-width: 0; flex: 1; }
.wa-kachel-text > strong { font-size: 17.5px; line-height: 1.3; overflow-wrap: anywhere; }
.wa-kachel-text > span { font-size: 14px; color: var(--tinte-weich); overflow-wrap: anywhere; }
.wa-umrechnungen { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-umrechnung { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--blau-hell); color: var(--blau); font-size: 13px; font-weight: 600; }
.wa-preiszeile { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.wa-preiszeile span { white-space: nowrap; color: var(--grau); }
.wa-preiszeile b { color: var(--tinte); }
.wa-kachel-fuss { font-size: 13px !important; color: var(--grau) !important; }
/* Ein Produkt: gespeicherte Umrechnungen, Preise je Einheit, Rezepturen */
.wa-umrechnungsliste { list-style: none; margin: 4px 0 6px; padding: 0; border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.wa-umrechnungsliste li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.wa-umrechnungsliste li + li { border-top: 1px solid var(--linie); }
.wa-u-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.wa-u-weg { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13.5px; color: var(--rot-dunkel); cursor: pointer; }
.wa-umrechnungsliste li:has(.wa-u-weg input:checked) .wa-u-text { text-decoration: line-through; opacity: .55; }
.wa-keine { margin: 4px 0 10px; }
.wa-preistabelle { width: 100%; border-collapse: collapse; }
.wa-preistabelle th, .wa-preistabelle td { padding: 7px 4px; border-bottom: 1px solid var(--linie); text-align: left; font-size: 14.5px; }
.wa-preistabelle tr:last-child th, .wa-preistabelle tr:last-child td { border-bottom: 0; }
.wa-preistabelle th { font-weight: 600; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--tinte); background: none; }
.inv-p-block p.hilfe, .inv-p-block > .hilfe { font-size: 13px; color: var(--grau); line-height: 1.45; margin: 6px 0 12px; }
.wa-preistabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa-pr-basis th, .wa-pr-basis strong { color: var(--rot-dunkel); }
.wa-rezepte { display: grid; gap: 12px; }
.wa-rezept { border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow-x: auto; }
.wa-rezept-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; background: var(--papier); }
.wa-rezept-kopf a { color: var(--tinte); }
.wa-rezept-tabelle { width: 100%; border-collapse: collapse; min-width: 560px; }
.wa-rezept-tabelle th, .wa-rezept-tabelle td { padding: 7px 9px; text-align: left; border-top: 1px solid var(--linie); font-size: 14px; vertical-align: top; }
.wa-rezept-tabelle th { font-size: 12.5px; color: var(--grau); font-weight: 600; text-transform: none; letter-spacing: 0; white-space: normal; background: none; }
.wa-rezept-tabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa-rezept-info td { border-top: 0; padding-top: 0; }
@media (max-width: 600px) {
  .wa-rezept { overflow-x: visible; }
  .wa-rezept-tabelle { min-width: 0; }
  .wa-rezept-tabelle thead { display: none; }
  .wa-rezept-tabelle tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 12px; border-top: 1px solid var(--linie); }
  .wa-rezept-tabelle td { padding: 0; border: 0; text-align: left !important; white-space: normal; }
  .wa-rezept-tabelle td::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--grau); }
  .wa-rezept-info td:empty { display: none; }
  .wa-rezept-info td { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wa-kachel { gap: 12px; padding: 12px; min-height: 0; }
  .wa-kachel-bild { width: 84px; height: 84px; }
  .wa-umrechnungsliste li { flex-wrap: wrap; }
}

/* Paket 163: Einkauf im Verhältnis zum Verkaufspreis */
.wa-vk { display: grid; grid-template-columns: minmax(140px, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 10px 16px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.wa-vk:last-of-type { border-bottom: 0; }
.wa-vk-name { font-weight: 700; align-self: center; overflow-wrap: anywhere; }
.wa-vk-wert { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wa-vk-wert small { font-size: 12px; color: var(--grau); line-height: 1.3; }
.wa-vk-wert b { font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wa-vk-anteil b, .wa-anteil { color: var(--rot-dunkel); }
.wa-vk-rezepte { margin: 8px 0 4px; }
.wa-vk-zeile { color: var(--tinte-weich) !important; }
@media (max-width: 760px) {
  .wa-vk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-vk-name { grid-column: 1 / -1; }
}

/* Paket 164: Was fehlt an einem Einkaufsprodukt */
.wa-maengel { margin: 10px 0 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--gelb-hell); border: 1px solid #f0d9a8; border-left: 5px solid #d97706; }
.wa-maengel h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16.5px; color: var(--gelb); }
.wa-maengel h2 span { font-weight: 500; }
.wa-maengel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wa-maengel li { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--radius-klein); background: var(--weiss); }
.wa-maengel li strong { font-size: 15px; }
.wa-m-text { font-size: 14px; color: var(--tinte-weich); }
.wa-m-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.wa-m-fix input { width: 120px; min-height: 40px; }
.wa-m-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; font-size: 14px; }
.wa-m-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.wa-vollstaendig { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; padding: 9px 14px; border-radius: var(--radius-klein); background: var(--gruen-hell); color: var(--gruen); font-weight: 600; font-size: 14.5px; }
.wa-markiert { outline: 3px solid #d97706 !important; outline-offset: 2px; }
.wa-kachel-fehlt { display: flex; align-items: flex-start; gap: 6px; padding: 5px 9px; border-radius: 8px; background: var(--gelb-hell); color: var(--gelb) !important; font-size: 13px !important; font-weight: 600; }
.wa-kachel-fehlt .icon { flex: none; margin-top: 1px; }

/* Paket 165: Stufe bei möglichen Doppelten */
.dop-stufe { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.dop-sicher { background: var(--rot-hell); color: var(--rot-dunkel); }
.dop-wahrscheinlich { background: var(--gelb-hell); color: var(--gelb); }
.dop-vielleicht { background: var(--papier); color: var(--grau); }
.inv-zf-vorschlag .zeile-text > span:first-child > span, .inv-zf-vorschlag .zeile-text > span:first-child > strong { display: inline; }
.inv-zf-vorschlag .zeile-text > span:first-child > .dop-stufe { display: inline-block; margin-right: 4px; }

/* Paket 166: Doppelte der Reihe nach prüfen */
.zf-reihe { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; border-left: 4px solid var(--blau); }
.zf-reihe-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; min-width: 0; }
.zf-reihe-text .dop-stufe { margin-left: 6px; }
.zf-reihe .knopfreihe { gap: 8px; }
.zf-auswahl-zu { margin: 0 0 14px; }
.zf-auswahl-zu > summary { cursor: pointer; font-weight: 600; color: var(--tinte-weich); padding: 6px 0 10px; }
.zf-liste-kopf { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.inv-zf-vorschlag.zf-weg { opacity: .6; }
@media (max-width: 640px) {
  .zf-reihe .knopfreihe { width: 100%; }
  .zf-reihe .knopfreihe .inline-form, .zf-reihe .knopfreihe .inline-form .knopf { flex: 1 1 auto; }
}

/* Paket 170: Auswertung über Zeiträume, Wareneinsatz, Umsatz & Rechnungen */
.we-leiste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 16px; }
.we-leiste .feld { margin: 0; flex: 1 1 180px; }
.we-leiste .knopf { flex: none; }
.we-schnell { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.we-chip { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--weiss); color: var(--tinte); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.we-chip:hover { background: var(--papier); }
.we-chip.aktiv { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.we-tage-info { flex: 1 1 100%; margin: 0; }
.we-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0 0 18px; }
.we-zahlen > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--grau); }
.we-zahlen b { font-size: 24px; color: var(--tinte); font-variant-numeric: tabular-nums; line-height: 1.2; }
.we-zahlen .we-gross b { font-size: 30px; }
.we-zahlen b.inv-minus { color: var(--rot-dunkel); }
.we-zahlen b.inv-plus { color: var(--gruen); }
.we-prozent { font-size: 15.5px; }
.we-delta { display: inline-block; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--grau); }
.we-schlechter { color: var(--rot-dunkel); }
.we-besser { color: var(--gruen); }
.we-wochen th { white-space: nowrap; }
.we-wochen td { min-width: 120px; }
.we-diagramm-rahmen { margin-bottom: 12px; padding-bottom: 14px; }
.we-diagramm { position: relative; height: 210px; margin: 8px 18px 40px 46px; }
.we-diagramm svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.we-gitter { stroke: var(--linie); stroke-width: 1; }
.we-linie { fill: none; stroke-width: 2; stroke-linejoin: round; }
path.we-linie-gesamt { stroke: var(--tinte); stroke-width: 3.5; }
.we-y, .we-x { position: absolute; font-size: 11.5px; color: var(--grau); white-space: nowrap; }
.we-y { right: 100%; margin-right: 8px; transform: translateY(-50%); }
.we-x { top: 100%; margin-top: 8px; transform: translateX(-50%); }
.we-punkt { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: currentColor; }
.we-punkt.we-linie-gesamt { width: 11px; height: 11px; color: var(--tinte); }
.we-farbe-0 { stroke: var(--rot); color: var(--rot); }
.we-farbe-1 { stroke: var(--blau); color: var(--blau); }
.we-farbe-2 { stroke: var(--gruen); color: var(--gruen); }
.we-farbe-3 { stroke: #b7791f; color: #b7791f; }
.we-farbe-4 { stroke: #7c5cc4; color: #7c5cc4; }
.we-farbe-5 { stroke: #0f8a8a; color: #0f8a8a; }
.we-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 13px; color: var(--tinte-weich); }
.we-legende i { display: inline-block; width: 18px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 6px; }
.we-legende i.we-linie-gesamt { border-top-width: 4px; border-color: var(--tinte); }
.we-legende i.we-farbe-0 { border-color: var(--rot); } .we-legende i.we-farbe-1 { border-color: var(--blau); } .we-legende i.we-farbe-2 { border-color: var(--gruen); }
.we-legende i.we-farbe-3 { border-color: #b7791f; } .we-legende i.we-farbe-4 { border-color: #7c5cc4; } .we-legende i.we-farbe-5 { border-color: #0f8a8a; }

/* Umsatz & Rechnungen */
.we-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 18px; }
.we-schritt { display: grid; gap: 4px; margin: 0; text-decoration: none; color: var(--tinte); }
.we-schritt:hover { box-shadow: var(--schatten-stark); }
.we-nr { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tinte); color: var(--weiss); font-weight: 800; font-size: 14px; }
.we-ort { margin-bottom: 12px; }
.we-ort h3 { margin: 4px 0 8px; font-size: 17px; }
.we-euro { display: inline-flex; align-items: center; gap: 6px; }
.we-euro input { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.we-rechnungen summary { cursor: pointer; color: var(--blau); font-weight: 600; }
.we-rechnungen ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.we-rechnungen li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.we-speichern { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0; background: var(--papier); z-index: 5; }
.we-hand-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.we-hand-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; }
.we-hand-zeile .zeile-text { flex: 1 1 220px; display: flex; flex-direction: column; }

/* Kachel auf der Übersicht des Portals */
.we-portal-gross { margin: 2px 0 10px; color: var(--tinte-weich); }
.we-portal-gross b { font-size: 24px; color: var(--tinte); margin-right: 4px; }
.we-portal-tabelle { margin: 0; }
.we-portal-tabelle td, .we-portal-tabelle th { padding-left: 8px; padding-right: 8px; }

@media (max-width: 640px) {
  .we-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .we-zahlen .we-gross { grid-column: 1 / -1; }
  .we-zahlen b { font-size: 20px; }
  .we-leiste .feld { flex: 1 1 100%; }
  .we-umsatz-tabelle thead { display: none; }
  .we-umsatz-tabelle tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .we-umsatz-tabelle td { display: block; padding: 0; border: 0; }
  .we-umsatz-tabelle td[data-label="Woche"], .we-umsatz-tabelle td[data-label="Umsatz netto"] { grid-column: 1 / -1; }
  .we-umsatz-tabelle td.zahl { text-align: right; }
  .we-euro input { width: 150px; }
  .we-tabelle thead { display: none; }
  .we-tabelle tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .we-tabelle td { display: flex; flex-direction: column; padding: 0; border: 0; text-align: left !important; }
  .we-tabelle td[data-label]::before { content: attr(data-label); font-size: 11.5px; color: var(--grau); font-weight: 600; }
  .we-tabelle td[data-label="Filiale"] { grid-column: 1 / -1; }
  .we-tabelle td[data-label="Filiale"]::before { content: none; }
  .we-wochen thead { display: none; }
  .we-wochen tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .we-wochen td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; white-space: normal; }
  .we-wochen td .klein-text { display: block; white-space: normal; }
  .we-tabelle td { white-space: normal; }
  .we-wochen td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--grau); font-weight: 600; }
  .we-wochen td[data-label="Woche"] { grid-column: 1 / -1; }
  .we-wochen td[data-label="Woche"]::before { content: none; }
  .we-portal-tabelle th:nth-child(2), .we-portal-tabelle td:nth-child(2) { display: none; }
}

/* Paket 171: Kontakte (früher Notfallkontakte) – nach Kategorie, mit E-Mail und Filiale */
.kontakt-marken { display: flex; flex-wrap: wrap; gap: 6px; }
.kontakt-marken .kat-marke { align-self: auto; }
.kontakt-ort { background: var(--blau-hell); color: var(--blau); }
.kontakt-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.kontakt-sprung { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.kontakt-titel-notfall { color: var(--rot-dunkel); }
@media (max-width: 480px) {
  .kontakt-knoepfe { width: 100%; }
  .kontakt-knoepfe .notfall-knopf { flex: 1 1 100%; }
}

/* Paket 173: mehrere Defekte in einer Meldung */
.d-schaden + .d-schaden { margin-top: 2px; }
.d-mehrere { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--rot-dunkel); }
.melden-defekte { background: var(--papier); border-radius: 12px; padding: 12px 14px; }
.melden-defekt-liste { margin: 6px 0 10px; padding-left: 22px; display: grid; gap: 6px; }
.melden-defekt-liste li { font-weight: 600; }
.melden-defekt-liste li span { margin-right: 8px; }
.melden-plus { width: 100%; justify-content: center; border-style: dashed; }
.melden-plus[hidden] { display: none; }

/* Paket 174: Aufgaben & Reinigung auf einer Seite */
.rein-teil { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 26px 0 12px; font-size: 1.35rem; scroll-margin-top: 80px; }
.rein-teil-zahl { font-size: 13px; font-weight: 700; color: var(--grau); }
.rein-sprung { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }

/* ---------- Kalender (Paket 177, start.php?ansicht=kalender) ---------- */
.kl-f-rot    { --kl: #c8382a; --kl-hell: #fdeeeb; --kl-dunkel: #a32a1e; }
.kl-f-orange { --kl: #d9822b; --kl-hell: #fdf0e3; --kl-dunkel: #8f4a0b; }
.kl-f-gelb   { --kl: #c99a06; --kl-hell: #fdf6d8; --kl-dunkel: #735600; }
.kl-f-gruen  { --kl: #2f7d4f; --kl-hell: #e9f4ed; --kl-dunkel: #22603b; }
.kl-f-blau   { --kl: #2d5b8a; --kl-hell: #e9f0f8; --kl-dunkel: #224670; }
.kl-f-lila   { --kl: #7b4fb0; --kl-hell: #f2ecfa; --kl-dunkel: #5a348e; }
.kl-f-grau   { --kl: #8a9199; --kl-hell: #eef0f2; --kl-dunkel: #474d54; }
.kl-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--kl); margin-right: 7px; vertical-align: 1px; flex: none; }
.kl-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kl-filter form { margin: 0; }
.kl-filter select { width: auto; min-width: 170px; }
.kl-arten { display: flex; flex-wrap: wrap; gap: 8px; }
.we-chip.kl-an { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.we-chip.kl-an .kl-punkt { box-shadow: 0 0 0 2px #fff; }
.ft-chip.kl-chip { background: var(--kl-hell); color: var(--kl-dunkel); font-weight: 600; border-left: 3px solid var(--kl); }
.ft-tag.kl-wochenende { background: #fafbfc; }
a.kl-tag-neu { text-decoration: none; align-self: flex-start; border-radius: 6px; padding: 0 4px; margin: -1px 0 0 -4px; }
a.kl-tag-neu:hover { background: var(--papier); color: var(--tinte); }
a.kl-tag-neu:hover::after { content: " +"; color: var(--rot); }
.kl-mehr { font-size: 12px; font-weight: 700; color: var(--grau); text-decoration: none; padding: 0 4px; }
.kl-liste { display: grid; gap: 10px; margin-bottom: 24px; }
.kl-zeile { display: flex; gap: 18px; align-items: flex-start; margin: 0; padding: 14px 18px; color: inherit; text-decoration: none; border-left: 5px solid var(--kl); }
.kl-zeile:hover { box-shadow: var(--schatten-stark); }
.kl-zeile:target { box-shadow: 0 0 0 3px var(--kl-hell), var(--schatten); }
.kl-zeile-wann { flex: 0 0 200px; display: grid; gap: 2px; }
.kl-zeile-wann strong { font-size: 15px; }
.kl-zeile-wann .leise { font-size: 13.5px; }
.kl-zeile-text { flex: 1; min-width: 0; display: grid; gap: 5px; }
.kl-zeile-text > strong { font-size: 16.5px; }
.kat-marke.kl-art { background: var(--kl-hell); color: var(--kl-dunkel); }
.kl-eintrag { border-left: 6px solid var(--kl); }
.kl-eintrag h1 { margin: 10px 0 4px; font-size: 26px; line-height: 1.25; }
.kl-wann { margin: 0 0 6px; }
.kl-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 14px 0; }
.kl-angaben dt { color: var(--grau); font-weight: 600; font-size: 14.5px; }
.kl-angaben dd { margin: 0; min-width: 0; }
.kl-beschreibung { background: var(--papier); padding: 12px 14px; border-radius: var(--radius-klein); }
.kl-wer summary { cursor: pointer; color: var(--blau); margin-top: 4px; }
.kl-wer p { margin: 6px 0 0; }
.kl-kommentare h2 { margin-top: 0; }
.kl-kommentar { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.kl-kommentar p { margin: 4px 0 0; overflow-wrap: anywhere; }
.kl-kommentar-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kl-kommentar-kopf form { margin: 0 0 0 auto; }
.kl-kommentar-form { margin-top: 16px; }
.kl-formular input[type=date], .kl-formular input[type=time] {
  width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--tinte); background: var(--weiss);
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); min-height: 46px;
}
.kl-sicht { border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); padding: 12px 16px 8px; margin: 8px 0 20px; min-width: 0; }
.kl-sicht legend { font-weight: 700; padding: 0 6px; }
.kl-sicht .feld { margin-bottom: 14px; }
.kl-personen { margin-bottom: 8px; }
.kl-personen summary { cursor: pointer; font-weight: 600; font-size: 14.5px; padding: 4px 0; }
.kl-suche { margin: 8px 0; }
.kl-personen-liste { display: grid; gap: 6px; max-height: 340px; overflow: auto; padding: 6px 2px 8px; }
.kl-person { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--linie); }
.kl-person[hidden] { display: none; }
.kl-person-name { flex: 1 1 200px; min-width: 0; font-size: 14.5px; }
.kl-person .ort-haken span { padding-top: 5px; padding-bottom: 5px; font-size: 13.5px; }
.ort-haken.kl-nein input:checked + span { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.kl-einstellung { margin-bottom: 18px; }
.kl-einstellung h2 { margin-top: 0; }
.kl-einstellung .knopfreihe select { width: auto; min-width: 120px; }
.kl-art-zeile { border-top: 1px solid var(--linie); padding: 10px 0; }
.kl-art-zeile summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
.kl-art-zeile summary::-webkit-details-marker { display: none; }
.kl-art-zeile form { margin-top: 12px; }
.kl-art-felder { display: grid; grid-template-columns: 1fr 190px; gap: 0 14px; }
.kl-kachel li a > span:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.kl-kachel-leer { margin: 4px 0 0; }
.kl-kachel-mehr { margin: 8px 0 0; }
@media (max-width: 640px) {
  .kl-zeile { flex-direction: column; gap: 6px; padding: 12px 14px; }
  .kl-zeile-wann { flex-basis: auto; }
  /* Auf dem Handy nur farbige Balken – die Einzelheiten stehen in der Liste darunter */
  .ft-chip.kl-chip { font-size: 0; height: 7px; padding: 0; border: 0; border-radius: 4px; background: var(--kl); }
  .kl-mehr { font-size: 10.5px; padding: 0 2px; }
  .kl-art-felder { grid-template-columns: 1fr; }
  .kl-angaben { grid-template-columns: 1fr; gap: 0; }
  .kl-angaben dd { margin-bottom: 8px; }
  .kl-eintrag h1 { font-size: 22px; }
}

/* ---------- Personaldokumente (Paket 180, dokumente.php?ansicht=personal) ---------- */
.pdok-liste { padding: 6px 8px; margin-bottom: 22px; }
.pdok-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; padding: 12px 10px; border-radius: 10px; color: var(--tinte); text-decoration: none; }
.pdok-zeile + .pdok-zeile { border-top: 1px solid var(--linie); }
.pdok-zeile:hover, .pdok-zeile.aktiv { background: var(--papier); }
.pdok-zeile.pdok-aus { opacity: .6; }
.pdok-zeile .kat-marke { margin-left: 6px; }
.kat-marke.pdok-muster { background: var(--gelb-hell); color: var(--gelb); }
.pdok-einst h2, .pdok-kommentare h2 { margin-top: 0; }
.pdok-einst { margin-bottom: 20px; }
.pdok-schritt input[type=date] {
  width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--tinte); background: var(--weiss);
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); min-height: 46px;
}

/* Assistent: Schritte wie beim Melden */
.pdok-assistent { max-width: 820px; }
.pdok-schritte { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: none; }
.pdok-schritte li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--weiss); border: 1px solid var(--linie); font-size: 13.5px; font-weight: 600; color: var(--grau); }
.pdok-schritte li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--papier); font-size: 12px; }
.pdok-schritte li.fertig { color: var(--gruen); }
.pdok-schritte li.fertig span { background: var(--gruen-hell); }
.pdok-schritte li.jetzt { color: #fff; background: var(--rot); border-color: var(--rot); }
.pdok-schritte li.jetzt span { background: rgba(255, 255, 255, .25); }
.pdok-schritt h2 { font-size: 1.3rem; margin: 2px 0 14px; }
.pdok-wahl { display: grid; gap: 8px; }
.pdok-wahl-zeile { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--linie-stark); border-radius: 12px; cursor: pointer; font-weight: 600; background: var(--weiss); }
.pdok-wahl-zeile:hover { border-color: var(--grau-hell); }
.pdok-wahl-zeile input { width: 20px; height: 20px; accent-color: var(--rot); flex: none; margin: 0; }
.pdok-wahl-zeile:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); }
/* Paket 182/183: Kacheln und Chips statt Auswahllisten, Vorschläge zur Anschrift */
.pdok-wahl + .hilfe { margin-top: 10px; }
.pdok-nochmal { margin: 4px 0 24px; }
.pdok-nochmal a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pdok-adresse { position: relative; }
.pdok-vorschlaege { position: absolute; left: 0; right: 0; z-index: 30; margin-top: 4px; max-height: 330px; overflow-y: auto;
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: 12px; box-shadow: var(--schatten-stark); }
.pdok-vorschlaege[hidden] { display: none; }
.pdok-vorschlag { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; width: 100%;
  padding: 11px 14px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--tinte); text-align: left; cursor: pointer; }
.pdok-vorschlag + .pdok-vorschlag { border-top: 1px solid var(--linie); }
.pdok-vorschlag:hover, .pdok-vorschlag.aktiv { background: var(--rot-hell); }
.pdok-vorschlag span { font-weight: 500; font-size: 13.5px; color: var(--grau); white-space: nowrap; }
.pdok-chipwahl .ort-haken { margin: 0; }
.pdok-chipzeile { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.pdok-chipzeile .ort-haken span, .pdok-feld-form .ort-haken span { padding: 6px 12px; font-size: 13px; }
.pdok-feld-form .pdok-chipwahl { flex-wrap: nowrap; gap: 4px; }

/* Vorlage schreiben: links der Text, rechts die Platzhalter */
.pdok-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-bottom: 22px; }
.pdok-editor-form { margin: 0; }
.pdok-textfeld { min-height: 420px; font-size: 15px; line-height: 1.6; }
.pdok-platzhalter-liste { position: sticky; top: 14px; margin: 0; max-height: calc(100vh - 28px); overflow: auto; }
.pdok-platzhalter-liste h2 { margin: 0 0 6px; font-size: 1.05rem; }
.pdok-platzhalter-liste h3 { margin: 14px 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); }
.pdok-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pdok-chip { padding: 5px 9px; border-radius: 8px; border: 1px solid var(--linie-stark); background: var(--papier); font: inherit; font-size: 13px; font-weight: 600; color: var(--tinte); cursor: pointer; }
.pdok-chip:hover { background: var(--rot-hell); border-color: var(--rot); color: var(--rot-dunkel); }
.pdok-fassung-alt { border-left: 5px solid var(--gelb); }
.pdok-text-alt { background: var(--papier); padding: 10px 14px; border-radius: var(--radius-klein); }
.pdok-vorlage-fuss { margin-bottom: 30px; }
.pdok-vorlage-fuss form { margin: 0; }

/* Einstellungen */
.pdok-art { border-top: 1px solid var(--linie); padding: 10px 0; }
.pdok-art > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.pdok-art[open] > summary { margin-bottom: 10px; }
.pdok-art h3 { font-size: 14px; margin: 16px 0 8px; }
.pdok-art-knoepfe, .pdok-option-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.pdok-art-knoepfe form, .pdok-option-knoepfe form { margin: 0; }
.pdok-option { padding: 8px 0; border-bottom: 1px dashed var(--linie); }
.pdok-option-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto; gap: 8px; align-items: center; margin: 0; }
.pdok-option-form .pdok-chipzeile { grid-column: 1 / -1; }
.pdok-option-form .check { padding: 0; white-space: nowrap; }
.pdok-option-neu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; margin-top: 10px; }
.pdok-feld-zeile { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.pdok-feld-zeile > form:last-child { margin: 0; }
.pdok-feld-form { flex: 1; display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1.3fr) auto minmax(0, 1.3fr) auto; gap: 8px; align-items: center; margin: 0; }
.pdok-feld-name { font-size: 13.5px; font-weight: 700; background: var(--papier); padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.pdok-neu { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie); }
.pdok-neu h3 { font-size: 15px; margin: 0 0 10px; }
@media (max-width: 900px) {
  .pdok-editor { grid-template-columns: 1fr; }
  .pdok-platzhalter-liste { position: static; max-height: none; order: -1; }
  .pdok-option-form, .pdok-option-neu, .pdok-feld-form { grid-template-columns: 1fr 1fr; }
  .pdok-feld-zeile { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .pdok-option-form, .pdok-option-neu, .pdok-feld-form { grid-template-columns: 1fr; }
}

/* Der Brief – Vorschau, Druck (DIN-A4) */
.pdok-vorschau { overflow-x: auto; padding: 12px 0 24px; }
.brief {
  width: 210mm; min-height: 297mm; box-sizing: border-box; margin: 0 auto; padding: 9mm 20mm 30mm 25mm; position: relative;
  background: #fff; color: #111; font-family: Helvetica, Arial, sans-serif; font-size: 11pt; line-height: 1.42;
  box-shadow: var(--schatten-stark);
}
.brief-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm; min-height: 27mm; }
.brief-firma strong { display: block; font-size: 15pt; line-height: 1.2; margin-top: 4.5mm; }
.brief-firma span { display: block; margin-top: 1.5mm; font-size: 8.5pt; color: #555; }
.brief-logo svg { display: block; width: 24mm; height: 24mm; }
.brief-anschrift { margin-top: 9mm; min-height: 38mm; }
.brief-absender { display: inline-block; font-size: 7.5pt; color: #555; border-bottom: 0.2mm solid #999; margin-bottom: 4mm; }
.brief-datum { text-align: right; }
.brief-betreff { font-weight: 700; margin: 7mm 0 6mm; }
.brief-text p { margin: 0 0 3mm; }
.brief-zeichen { font-size: 9pt; line-height: 1.35; }
.brief-linie { border-top: 0.25mm solid #222; margin-bottom: 1.6mm; }
.brief-unterschrift { margin-top: 16mm; width: 70mm; }
.brief-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 15mm; margin-top: 14mm; }
.brief-empfang { margin-top: 10mm; }
.brief-empfang p { margin: 0; font-size: 9pt; }
.brief-empfang .brief-zwei { margin-top: 12mm; }
.brief-leise { color: #666; }
.brief-fuss { position: absolute; left: 25mm; right: 20mm; bottom: 9mm; border-top: 0.2mm solid #aaa; padding-top: 2mm; font-size: 7pt; line-height: 1.4; color: #666; }
@media (max-width: 920px) { .pdok-vorschau .brief { zoom: .78; } }
@media (max-width: 720px) { .pdok-vorschau .brief { zoom: .55; } }
@media (max-width: 480px) { .pdok-vorschau .brief { zoom: .43; } }
body.brief-druck { background: #e9ecef; padding: 18px 0 30px; }
.brief-druck-leiste { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
@media print {
  body.brief-druck { background: #fff; padding: 0; }
  .brief-druck-leiste { display: none; }
  .brief-druck .brief { box-shadow: none; margin: 0; }
}

/* ---------- Franchise-Ausbildung (Paket 185, inc/fr_ausbildung.php) ---------- */
.fab-balken { display: block; height: 8px; border-radius: 999px; background: var(--papier); overflow: hidden; min-width: 40px; }
.fab-balken > span { display: block; height: 100%; background: var(--gruen); border-radius: 999px; }
.fab-balken.gross { height: 12px; }
.fab-neu { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.fab-neu .feld { margin: 0; }
.fab-liste { display: grid; gap: 10px; margin-bottom: 18px; }
.fab-kandidat { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(160px, .8fr); gap: 12px 22px; align-items: center; color: var(--tinte); text-decoration: none; margin: 0; }
.fab-kandidat:hover { border-color: var(--grau-hell); }
.fab-k-kopf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fab-k-kopf strong { font-size: 1.08rem; }
.fab-k-gesamt { display: flex; align-items: center; gap: 10px; }
.fab-k-gesamt .fab-balken { flex: 1; }
.fab-prozent { font-weight: 800; font-size: 1.15rem; min-width: 54px; text-align: right; }
.fab-abschnitte { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; }
.fab-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; font-size: 12.5px; }
.fab-mini-name { color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fab-mini .fab-balken { grid-column: 1 / -1; grid-row: 2; height: 6px; }
.fab-mini-p { font-weight: 700; }
.fab-fertig > summary { cursor: pointer; font-weight: 600; color: var(--grau); padding: 8px 0; }
.fab-stand-gesamt { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.fab-stand-gesamt > span:last-child { display: flex; flex-direction: column; }
.fab-gross { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.fab-stand-je { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 20px; margin-top: 16px; }
.fab-je { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; color: var(--tinte); text-decoration: none; font-size: 14px; }
.fab-je .fab-balken { grid-column: 1 / -1; grid-row: 2; }
.fab-je-p { font-weight: 700; }
.fab-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 8px; }
.fab-kurz { margin: 0; }
.fab-kurz h2 { font-size: 1.05rem; margin: 0 0 8px; }
.fab-kurz p { margin: 0 0 10px; }
.kat-marke.fab-gut { background: var(--gruen-hell); color: var(--gruen); }
.kat-marke.fab-schlecht { background: var(--rot-hell); color: var(--rot-dunkel); }
.fab-zp > summary { list-style: none; display: inline-flex; cursor: pointer; }
.fab-zp > summary::-webkit-details-marker { display: none; }
.fab-zp[open] > summary { margin-bottom: 10px; }
.fab-plan { display: grid; gap: 14px; margin-bottom: 8px; }
.fab-abschnitt { margin: 0; }
.fab-a-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.fab-a-kopf h3 { margin: 0; font-size: 1.15rem; }
.fab-a-p { font-size: 13.5px; color: var(--grau); font-weight: 600; }
.fab-abschnitt > .fab-balken { margin-bottom: 10px; }
.fab-bereich { margin-top: 12px; }
.fab-bereich h4 { margin: 0 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--grau); }
.fab-bereich h4 .leise { text-transform: none; letter-spacing: 0; font-weight: 500; }
.fab-punkt { border-top: 1px solid var(--linie); }
.fab-punkt > summary, div.fab-punkt { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; cursor: pointer; list-style: none; }
div.fab-punkt { cursor: default; }
.fab-punkt > summary::-webkit-details-marker { display: none; }
.fab-punkt > summary:hover { background: var(--papier); }
.fab-haken { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linie-stark); display: grid; place-items: center; color: #fff; margin-top: 1px; }
.fab-punkt.erledigt .fab-haken { background: var(--gruen); border-color: var(--gruen); }
.fab-haken .icon { width: 15px; height: 15px; }
.fab-p-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fab-p-name { font-weight: 600; }
.fab-p-meta { font-size: 13px; color: var(--gruen); font-weight: 600; }
.fab-bem { font-size: 13.5px; color: var(--grau); }
.fab-p-form { padding: 4px 4px 14px 40px; margin: 0; }
.fab-p-felder { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 12px; }
.fab-namen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fab-namen .we-chip { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 10px; }
.fab-beurteilung { margin-bottom: 10px; }
.fab-beurteilung p { margin: 0 0 6px; }
.fab-beurteilung form { margin: 0; }
.fab-neu-beurteilung > summary, .fab-verlauf > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.fab-neu-beurteilung[open] > summary, .fab-verlauf[open] > summary { margin-bottom: 12px; }
.fab-verlauf ul { list-style: none; margin: 0; padding: 0; }
.fab-verlauf li { padding: 7px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.fab-verlauf li > .leise:first-child { display: block; }
.fab-h3 { font-size: 1.02rem; margin: 0 0 8px; }
.fab-loeschen { margin: 4px 0 24px; }
.fab-text p { margin: 0 0 10px; }
.fab-frage h2 { font-size: 1.1rem; margin: 0 0 10px; }
.fab-bem-feld { margin-top: 10px; }
.fab-bem-feld > summary { cursor: pointer; font-size: 13.5px; color: var(--grau); font-weight: 600; }
.fab-bem-feld textarea { margin-top: 6px; }
.fab-erzeugen { margin: 6px 0 18px; }
.fab-textfeld { font-size: 15px; line-height: 1.6; }
.fab-abschluss { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie); display: grid; gap: 10px; justify-items: start; }
.fab-e-abschnitt { padding: 14px 16px; }
.fab-e-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 6px 0; }
.fab-e-abschnitt > .fab-e-zeile input[name=name] { font-weight: 700; }
.fab-e-form { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 420px; margin: 0; align-items: center; }
.fab-e-form input[name=name], .fab-e-form input[name=text] { flex: 1 1 200px; width: auto; }
.fab-e-form input[name=hinweis], .fab-e-form input[name=satz] { flex: 2 1 240px; width: auto; }
.fab-e-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fab-e-knoepfe form { margin: 0; }
.fab-e-innen { padding-left: 20px; border-left: 3px solid var(--linie); margin: 4px 0 6px 6px; }
.fab-e-bereich { margin: 6px 0; }
.fab-e-neu { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.fab-e-neu input { flex: 1 1 220px; width: auto; }
.fab-aus { opacity: .6; }
.fab-e-option { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linie); }
@media (max-width: 640px) {
  .fab-neu, .fab-kandidat, .fab-p-felder { grid-template-columns: 1fr; }
  .fab-p-form { padding-left: 4px; }
  .fab-e-innen { padding-left: 12px; }
}

/* ---------- Inventur nachträglich ändern (Paket 187) ---------- */
.inv-nachtraeglich > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.inv-nachtraeglich[open] > summary { margin-bottom: 8px; }
.inv-nachtraeglich-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.inv-nachtraeglich-weg { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; border: 1px solid var(--linie); border-radius: 12px; margin: 0; }
.inv-nachtraeglich-weg input { width: 100%; }
.inv-wieder-offen { margin: 8px 0; }
input.inv-korrektur { width: 90px; text-align: right; padding: 6px 8px; min-height: 0; }
.inv-korrektur-fuss { margin-top: 10px; }
.inv-nachtraeglich-verlauf ul { list-style: none; margin: 0; padding: 0; }
.inv-nachtraeglich-verlauf li { padding: 8px 0; border-top: 1px solid var(--linie); }
.inv-nachtraeglich-verlauf li:first-child { border-top: 0; }
.inv-nachtraeglich-verlauf li > .leise:first-child { display: block; }
.inv-nachtraeglich-loeschen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }

/* ---------- Organigramm (Paket 188, inc/organigramm.php) ---------- */
.org-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 13.5px; }
.org-legende-punkt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.org-legende-punkt::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--f); }
.org-legende-quer { display: inline-flex; align-items: center; gap: 6px; color: var(--grau); }
.org-legende-quer::before { content: ''; width: 22px; border-top: 2px dashed var(--grau); }
.org-buehne { position: relative; overflow-x: auto; padding: 22px 12px 26px; }
.org-baum, .org-baum ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.org-baum { width: max-content; min-width: 100%; position: relative; z-index: 1; }
.org-baum ul { padding-top: 24px; position: relative; }
.org-baum li { position: relative; padding: 24px 8px 0; display: flex; flex-direction: column; align-items: center; }
.org-baum > li { padding-top: 0; }
.org-baum li::before, .org-baum li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 24px; border-top: 2px solid var(--linie-stark); }
.org-baum li::after { right: auto; left: 50%; border-left: 2px solid var(--linie-stark); }
.org-baum > li::before, .org-baum > li::after, .org-baum li:only-child::before, .org-baum li:only-child::after { display: none; }
.org-baum li:only-child { padding-top: 0; }
.org-baum li:first-child::before, .org-baum li:last-child::after { border: 0 none; }
.org-baum li:last-child::before { border-right: 2px solid var(--linie-stark); border-radius: 0 8px 0 0; }
.org-baum li:first-child::after { border-radius: 8px 0 0 0; }
.org-baum ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 24px; border-left: 2px solid var(--linie-stark); }
.org-kasten { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 150px; max-width: 220px; padding: 10px 14px 11px; border-radius: 12px;
  background: #fff; background: color-mix(in srgb, var(--f, #9aa3ad) 9%, #fff); border: 1px solid var(--linie-stark); border-top: 4px solid var(--f, var(--grau-hell));
  box-shadow: var(--schatten); text-align: center; color: var(--tinte); text-decoration: none; position: relative; }
a.org-kasten:hover { border-color: var(--f, var(--grau-hell)); transform: translateY(-1px); }
.org-kasten.gewaehlt { outline: 3px solid var(--f, var(--rot)); outline-offset: 2px; }
.org-position { font-weight: 800; font-size: 14.5px; line-height: 1.25; }
.org-namen { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.35; }
.org-unbesetzt { color: var(--grau); font-style: italic; }
.org-bereich { margin-top: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--f, var(--grau)); }
.org-plus { position: relative; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff;
  border: 1px solid var(--linie-stark); color: var(--tinte); font-weight: 800; text-decoration: none; line-height: 1; }
.org-plus:hover { background: var(--rot); border-color: var(--rot); color: #fff; }
.org-quer { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
.org-quer path { fill: none; stroke: var(--grau); stroke-width: 2; stroke-dasharray: 6 5; }
.org-form h2 { margin-top: 0; }
.org-chip-farbe { border-left: 5px solid var(--f) !important; }
.org-bereich-neu { margin-top: 8px; max-width: 420px; }
.org-wahl { max-height: 240px; overflow-y: auto; padding: 2px; }
.org-quer-wahl { margin: 4px 0 14px; }
.org-quer-wahl > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; }
.org-form-knoepfe { align-items: center; }

/* ---------- Schnuppertag (Pakete 189/191, inc/fr_schnuppertag.php) ---------- */
.kat-marke.fst-ausbildung { background: var(--papier); color: var(--tinte); margin-left: 6px; }
.kat-marke.fst-ausgefuellt { background: var(--blau-hell); color: var(--blau); }
.kat-marke.fst-zu { background: var(--tinte); color: var(--weiss); }
.kat-marke.fab-mittel { background: var(--gelb-hell); color: var(--gelb); }
.fst-uebernahme h2 { margin-top: 0; }
.fst-neu > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fst-neu[open] > summary { margin-bottom: 14px; }
.fst-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; }
.fst-tabelle-rahmen { padding: 0; overflow-x: auto; }
.fst-tabelle td a { color: var(--tinte); }
.fst-tabelle td:first-child { min-width: 180px; }
.fst-teil-nr { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--rot); }
.fst-teil h2 { margin-top: 2px; }
.fst-frage { padding: 12px 0; border-top: 1px solid var(--linie); }
.fst-frage h3 { font-size: 1.02rem; margin: 0 0 8px; }
.fst-bem { margin-top: 8px; font-size: 14.5px; min-height: 44px; height: 44px; resize: vertical; }
.fst-bem:focus, .fst-bem.fst-voll { height: 80px; }
.fst-vor { display: grid; gap: 10px; margin-top: 4px; }
.fst-vor-option { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; }
.fst-vor-option > .ort-haken { margin: 0; }
.fst-vor-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; margin-top: 10px; }
.fst-vor-details .feld { margin-bottom: 8px; }
.fst-vor-details .fst-breit { grid-column: 1 / -1; }
.fst-zwischen { display: flex; justify-content: flex-end; margin-top: 12px; }
.fst-text { margin: 12px 0 16px; }
.fst-vor[hidden], .fst-vor-details[hidden] { display: none; }
.fst-aus-fragen { margin: 6px 0 18px; }
.fst-aus-fragen > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--grau); margin-bottom: 10px; }
/* Paket 190: unbesetzte Position im Organigramm rot */
.org-kasten.org-offen { border-color: var(--rot); border-top-color: var(--rot); background: var(--rot-hell); box-shadow: 0 0 0 1px var(--rot) inset, var(--schatten); }
.org-kasten.org-offen .org-unbesetzt { color: var(--rot); font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
a.org-kasten.org-offen:hover { border-color: var(--rot-dunkel); }
.org-legende-offen { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--rot); }
.org-legende-offen::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--rot-hell); border: 2px solid var(--rot); box-sizing: border-box; }

/* ---------- Regeln & Verhalten (Paket 194, inc/regeln.php) ---------- */
.rg-seite .rg-gruppe { margin: 26px 0 8px; scroll-margin-top: 80px; }
.rg-gruppe-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rg-gruppe h2 { margin: 0 0 6px; font-size: 1.25rem; }
.rg-regel { margin: 10px 0; padding: 16px 18px; scroll-margin-top: 80px; }
.rg-regel.rg-offen { border-left: 5px solid var(--rot); }
.rg-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rg-regel h3 { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.rg-marke { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.rg-neu { background: var(--rot); color: #fff; }
.rg-geaendert { background: var(--gelb-hell); color: var(--gelb); border: 1px solid #e7d3a6; }
.rg-ok { background: var(--gruen-hell); color: var(--gruen); }
.rg-label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--grau); margin: 12px 0 4px; }
.rg-warum p { margin: 0; font-size: 16px; line-height: 1.6; }
.rg-beispiele { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.rg-ja, .rg-nein { border-radius: 10px; padding: 2px 12px 8px; }
.rg-ja { background: var(--gruen-hell); }
.rg-ja .rg-label { color: var(--gruen); }
.rg-nein { background: var(--rot-hell); }
.rg-nein .rg-label { color: var(--rot-dunkel); }
.rg-beispiele ul { margin: 0; padding-left: 18px; }
.rg-beispiele li { margin: 3px 0; font-size: 15px; line-height: 1.5; }
.rg-fassung { margin: 12px 0 0; font-size: 12.5px; color: var(--grau); }
.rg-was-neu { margin: 8px 0 0; padding: 8px 10px; background: var(--gelb-hell); border-radius: 8px; font-size: 14.5px; }
.rg-aufruf { border: 2px solid var(--rot); background: var(--rot-hell); }
.rg-aufruf p { margin: 0 0 10px; }
.rg-aufruf form { margin: 0; }
.rg-gross h1 { margin: 6px 0; }
.rg-gruppe-bestaetigen { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 6px 0 4px; }
.rg-abschluss { display: grid; gap: 10px; justify-items: start; margin-top: 18px; }
.rg-start { display: flex; align-items: center; gap: 12px; border: 2px solid var(--rot); background: var(--rot-hell); color: var(--tinte); text-decoration: none; margin-bottom: 14px; }
.rg-start-text { flex: 1; display: grid; gap: 2px; }
.rg-start-text span { color: var(--grau); font-size: 14px; }
.rg-start > .icon { transform: rotate(180deg); color: var(--rot); flex: none; }
.rg-sprung { margin-top: 10px; }
.rg-p-gruppe h2 { margin: 0; font-size: 1.1rem; }
.rg-p-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.rg-p-bearbeiten { margin: 8px 0; }
.rg-p-bearbeiten > summary { cursor: pointer; font-size: 13.5px; color: var(--grau); font-weight: 600; }
.rg-p-regeln { list-style: none; padding: 0; margin: 10px 0; }
.rg-p-regeln li { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.rg-p-titel { display: grid; gap: 2px; color: var(--tinte); text-decoration: none; flex: 1 1 260px; }
.rg-fassung-alt > summary { cursor: pointer; }
.rg-fassung-alt .rg-regel, .rg-in-frage .rg-regel { box-shadow: none; border: 1px solid var(--linie); }
.rg-tabelle { padding: 6px 14px; }
.rg-tabelle td a { color: var(--tinte); }
.rg-je-regel h3 { margin: 0; font-size: 1.05rem; }
.rg-je-regel h3 a { color: var(--tinte); }
.rg-offen-namen { font-size: 14.5px; }
.rg-namen { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.rg-text-offen { color: var(--rot-dunkel); font-weight: 700; }
.rg-liste { padding: 10px 18px; }
.rg-einheit { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--linie); flex-wrap: wrap; margin: 0; }
.rg-einheit:first-child { border-top: 0; }
.rg-einheit .zeile-text { display: grid; gap: 2px; flex: 1 1 240px; }
.rg-frage-regel > summary, .rg-einbinden details > summary { cursor: pointer; }
.rg-in-frage { margin-top: 10px; }
.rg-regel[hidden], .rg-gruppe[hidden], .rg-gruppe-bestaetigen[hidden], .rg-sprung[hidden], .rg-nichts[hidden] { display: none !important; }
@media (max-width: 600px) {
  .rg-regel { padding: 14px; }
  .rg-regel h3 { font-size: 1.08rem; }
}

/* ---------- Personaldokumente: Texte je Auswahl, Text nur für dieses Schreiben (Paket 195) ---------- */
.pdok-je-auswahl h2 { margin-top: 0; }
.pdok-je-auswahl h3 { font-size: 1.02rem; margin: 18px 0 6px; }
.pdok-auswahl-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--linie); }
.pdok-auswahl-zeile > span:first-child { display: grid; gap: 2px; flex: 1 1 240px; }
.pdok-auswahl-zeile form { margin: 0; }
.pdok-auswahl-zeile.pdok-aus { opacity: .6; }
.pdok-eigen { margin: 14px 0 6px; padding: 12px 14px; border: 1px dashed var(--linie-stark); border-radius: 10px; background: var(--papier); }
.pdok-eigen > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pdok-eigen[open] > summary { margin-bottom: 10px; }
.pdok-eigen .pdok-textfeld { min-height: 320px; }

/* ---------- Personaldokumente: Vorlage im Assistenten anbieten (Paket 196) ---------- */
.pdok-zuordnen { scroll-margin-top: 80px; }
.pdok-zuordnen h2 { margin-top: 0; }
.pdok-anhaenge { list-style: none; padding: 0; margin: 4px 0 12px; }
.pdok-anhaenge li { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--linie); }
.pdok-anhaenge form { margin: 0; }
.pdok-zu-art { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--linie); }
.pdok-zu-art > summary { cursor: pointer; font-weight: 700; }
.pdok-zu-art[open] > summary { margin-bottom: 10px; }
.pdok-zu-titel { margin: 10px 0 4px; }

/* ---------- Inventur: abgeschlossene nachträglich bearbeiten (Paket 197) ---------- */
.inv-bearbeiten { margin-left: 8px; vertical-align: middle; }
.inv-tabelle td .inv-bearbeiten { margin: 4px 0 0 6px; }
.inv-nachtrag-hinweis { margin: 8px 0; }

/* ---------- Personaldokumente: Vorlagen direkt bearbeiten (Paket 200) ---------- */
.pv-art { padding: 14px 18px; scroll-margin-top: 80px; }
.pv-art-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pv-art-kopf h2 { margin: 0; font-size: 1.2rem; }
.pv-art.pv-aus .pv-art-kopf h2 { color: var(--grau); text-decoration: line-through; }
.pv-zeile { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); scroll-margin-top: 80px; }
.pv-zeile.pv-aus .pv-text strong { color: var(--grau); }
.pv-zeile.pv-aus .pv-text strong::after { content: ' – aus'; font-weight: 600; font-size: 13px; }
.pv-details { flex: 1; min-width: 0; }
.pv-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.pv-details > summary::-webkit-details-marker { display: none; }
.pv-details[open] > summary .pv-bearbeiten { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.pv-text { display: grid; gap: 2px; min-width: 0; }
.pv-text strong { font-size: 15.5px; }
.pv-info { color: var(--grau); font-size: 13px; }
.pv-info .kat-marke { margin-left: 4px; }
.pv-bearbeiten { flex: none; }
.pv-editor { margin: 12px 0 4px; padding: 14px; background: var(--papier); border-radius: 10px; }
.pv-editor .hinweis { margin: 0 0 12px; }
.pv-textfeld { min-height: 300px; }
.pv-platzhalter { margin: 0 0 12px; }
.pv-platzhalter > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--grau); }
.pv-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pv-status { font-size: 13.5px; color: var(--grau); }
.pv-status.pv-ok { color: var(--gruen); font-weight: 700; }
.pv-status.pv-fehler { color: var(--rot-dunkel); font-weight: 700; }
.pv-status.pv-offen { color: var(--gelb); font-weight: 700; }
.pv-vorschau { margin-top: 14px; }
.pv-loeschen { margin: 6px 0 0; }
.pv-gemeinsam .pv-zeile { background: var(--papier); border-radius: 10px; padding: 10px; border-top: 0; margin-top: 8px; }
.pv-schalter-platz { width: 44px; flex: none; }
.pv-neu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.pv-neu input[type=text] { flex: 1 1 260px; width: auto; }
.pv-neu-art { padding: 14px 18px; }
.pv-art-mehr { margin-top: 10px; }
.pv-art-mehr > summary { cursor: pointer; font-size: 13px; color: var(--grau); }
.pv-frei { padding: 4px 18px; }
/* Schalter an/aus */
.pv-schalter-form { margin: 2px 0 0; flex: none; }
.pv-schalter { position: relative; display: inline-block; width: 44px; height: 26px; cursor: pointer; }
.pv-schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.pv-bahn { position: absolute; inset: 0; background: var(--linie-stark); border-radius: 999px; transition: background .15s; }
.pv-bahn::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.pv-schalter input:checked + .pv-bahn { background: var(--gruen); }
.pv-schalter input:checked + .pv-bahn::after { transform: translateX(18px); }
.pv-schalter input:focus-visible + .pv-bahn { outline: 3px solid #f3b3ab; outline-offset: 2px; }
.pv-schalter input:disabled + .pv-bahn { opacity: .6; }
@media (max-width: 600px) {
  .pv-details > summary { flex-wrap: wrap; }
  .pv-art { padding: 12px 14px; }
}

/* ---------- Einzelrechte (Paket 204) ---------- */
.er-kasten .er-gruppe, .er-alle-rechte .er-gruppe { margin: 12px 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--grau); }
.er-kasten .ort-haken.er-profil span { background: var(--papier); color: var(--grau); border-style: dashed; }
.er-kasten .ort-haken.er-profil input:checked + span { background: var(--papier); color: var(--grau); border-color: var(--linie-stark); }
.er-alle-rechte { margin: 6px 0 14px; }
.er-alle-rechte > summary { cursor: pointer; color: var(--grau); font-weight: 600; }
.er-tabelle { padding: 6px 14px; }
.er-tabelle td a { color: var(--tinte); }
.er-liste { padding: 8px 18px; }

/* ---------- Tagesinventur (Paket 204) ---------- */
.invt-heute { display: grid; gap: 8px; margin-bottom: 8px; }
.invt-karte { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 16px; margin: 0; }
.invt-karte-text { flex: 1 1 160px; display: grid; gap: 2px; }
.invt-karte form { margin: 0; }
.invt-ergebnis h2 { margin-top: 0; }
.invt-tabelle td, .invt-tabelle th { padding: 8px 8px; }
.invt-tabelle tr.invt-auffaellig td { background: var(--rot-hell); }
.invt-verlauf { padding: 6px 10px; }
.invt-verlauf td.zahl { white-space: nowrap; line-height: 1.3; }
.invt-rot { background: var(--rot-hell); color: var(--rot-dunkel); }
.invt-orange { background: var(--gelb-hell); color: var(--gelb); }
.invt-gruppe { margin: 8px 0; }
.invt-gruppe > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.inv-durchgefuehrt { margin: 4px 0 14px; }

/* ---------- Wareneinsatz: Rechnungen, Netto-Umsätze, Auswertung je Woche (Paket 205) ---------- */
.rv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rv-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 18px; }
.rv-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--grau); margin: 0 0 6px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rv-hochladen h2 { margin-top: 0; }
.rv-hochladen-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 8px; }
.rv-datei-knopf { position: relative; cursor: pointer; }
.rv-datei-knopf input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 0; }
.rv-fortschritt { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.rv-fortschritt li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--papier); font-size: 14px; }
.rv-fortschritt li.ok { background: var(--gruen-hell); color: var(--gruen); }
.rv-fortschritt li.fehler { background: var(--rot-hell); color: var(--rot-dunkel); }
.rv-fortschritt li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rv-entwuerfe { padding: 6px 18px; }
.rv-filter { display: grid; gap: 10px; padding: 14px 18px; }
.rv-filter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rv-filter-zeile > .rv-label { margin: 0 6px 0 0; min-width: 72px; }
.rv-haken-filter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-right: 10px; font-size: 13.5px; color: var(--grau); }
.rv-von-bis { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 0 6px; }
.rv-von-bis label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--grau); }
.rv-von-bis input[type=date] { width: auto; padding: 6px 8px; }
.rv-summen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 10px; font-size: 14px; color: var(--grau); }
.rv-summen strong { color: var(--tinte); font-variant-numeric: tabular-nums; }
.rv-summen .knopf { margin-left: auto; }
.rv-tabelle th, .rv-tabelle td { padding: 10px 9px; }
.rv-tabelle td { vertical-align: middle; }
.rv-datei-link { padding-left: 9px; padding-right: 9px; }
.rv-nur-handy { display: none; }
.rv-datei-link .icon { margin: 0; }
.rv-tabelle td a strong { color: var(--tinte); }
.rv-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.rv-sort.aktiv { color: var(--tinte); }
.rv-sort:hover { text-decoration: underline; }
.rv-storniert td { color: var(--grau); }
.rv-storniert td a strong { color: var(--grau); text-decoration: line-through; }
.rv-schalter-form { margin: 0; }
.rv-aktionen { white-space: nowrap; text-align: right; }
.rv-aktionen .knopf { margin: 2px 0 2px 4px; }
.rv-erfassen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rv-beleg { display: grid; gap: 10px; padding: 12px; position: sticky; top: 80px; }
.rv-beleg img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: 8px; background: var(--papier); }
.rv-pdf { width: 100%; height: 72vh; border: 1px solid var(--linie); border-radius: 8px; background: var(--papier); }
.rv-datei-nach { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.rv-formular { display: grid; gap: 4px; }
.rv-formular .feld { margin-bottom: 8px; }
.rv-vorschlaege { margin: -4px 0 10px; }
.rv-vorschlaege .we-chip { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 10px; }
.rv-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.rv-formular input[type=date] { width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--tinte); background: var(--weiss);
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); min-height: 46px; }
.rv-formular .we-euro { display: flex; }
.rv-formular .we-euro input { width: 100%; min-width: 0; }
.rv-felder .feld label .leise { font-weight: 400; font-size: 12.5px; }
.rv-haken { display: grid; gap: 10px; padding: 12px 14px; margin: 4px 0 8px; border-radius: 12px; background: var(--papier); }
.rv-haken-zeile { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.rv-haken-zeile > span:last-child { display: grid; gap: 2px; }
.rv-haken-zeile small { color: var(--grau); font-size: 12.5px; }
.rv-haken p { margin: 0; }
.rv-merken { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.rv-merken input { width: auto; }
.rv-knoepfe { margin: 6px 0 0; align-items: center; }
.rv-doppelt { display: grid; gap: 10px; }
.rv-doppelt ul { margin: 6px 0; padding-left: 18px; }
.rv-doppelt .knopfreihe { margin: 0; }
.rv-info { display: grid; gap: 8px; }
.rv-info p { margin: 0; }
.rv-storno { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 6px 0 0; }
.rv-storno .feld { flex: 1 1 260px; margin: 0; }
.rv-verlauf td:nth-child(1), .rv-verlauf td:nth-child(2) { white-space: nowrap; }
.rv-lieferant-neu { display: grid; gap: 8px; max-width: 560px; }
.ww-leiste { display: grid; gap: 10px; padding: 14px 18px; }
.ww-leiste .rv-von-bis { margin: 0; }
.ww-zeitraum { margin: 0; font-size: 14px; color: var(--grau); }
.ww-zeitraum strong { color: var(--tinte); }
.ww-fehlt { color: var(--rot-dunkel); font-weight: 700; }
.ww-fehlt-text { color: var(--rot-dunkel); }
.ww-auf > summary { cursor: pointer; list-style: none; display: grid; gap: 2px; }
.ww-auf > summary::-webkit-details-marker { display: none; }
.ww-auf > summary .inv-schild { justify-self: start; }
.ww-prozent { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--tinte); }
.ww-auf > summary:hover .ww-prozent { text-decoration: underline; }
.ww-unter { font-size: 12.5px; color: var(--grau); }
.ww-auf[open] > summary { margin-bottom: 6px; }
.ww-rechnungen { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 4px; background: var(--papier); border-radius: 8px; }
.ww-rechnungen li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.ww-rechnungen li .zahl { white-space: nowrap; text-align: right; }
.ww-wochen td { min-width: 150px; }
.ww-export { margin: 14px 0; }
.ww-fehlt-uebersicht { display: grid; gap: 10px; }
.ww-fehlt-uebersicht h2 { margin: 0; font-size: 17px; }
.ww-fehlt-uebersicht p { margin: 0; }
.ww-fehlt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ww-fehlt-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.we-chip.ww-chip-fehlt { border-color: #f0b4ad; background: var(--rot-hell); color: var(--rot-dunkel); padding: 3px 10px; font-size: 12.5px; }
.ww-umsatz-tabelle td { vertical-align: middle; }
.ww-umsatz-tabelle td .klein-text { display: block; margin-top: 2px; }
.ww-zelle-fehlt input { border-color: #f0b4ad; background: #fff8f7; }
.ww-zelle-fehlt input::placeholder { color: var(--rot-dunkel); opacity: .8; }
.ww-alt { margin-top: 16px; }
.ww-alt > summary { cursor: pointer; color: var(--grau); font-weight: 600; }
@media (max-width: 900px) {
  .rv-erfassen { grid-template-columns: minmax(0, 1fr); }
  .rv-beleg { position: static; }
  .rv-pdf { height: 55vh; }
}
@media (max-width: 760px) {
  .rv-tabelle thead { display: none; }
  .rv-tabelle tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
  .rv-tabelle td { display: block; padding: 0; border: 0; text-align: left !important; white-space: normal; }
  .rv-tabelle td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--grau); font-weight: 600; }
  .rv-tabelle td[data-label="Lieferant"] { grid-column: 1 / -1; order: -2; }
  .rv-tabelle td[data-label="Lieferant"]::before { content: none; }
  .rv-tabelle td[data-label="Netto"] { order: -1; }
  .rv-tabelle td[data-label="Filiale"] { display: none; }
  .rv-tabelle .rv-nur-handy { display: inline; }
  .rv-tabelle .rv-aktionen { grid-column: 1 / -1; text-align: left; }
  .rv-tabelle .rv-aktionen .knopf { margin: 0 6px 0 0; }
  .rv-summen .knopf { margin-left: 0; }
  .rv-felder { grid-template-columns: minmax(0, 1fr); }
  .rv-pdf { display: none; }
  .rv-filter-zeile > .rv-label { flex: 1 1 100%; }
  .rv-von-bis { margin: 4px 0 0; }
  .ww-umsatz-tabelle thead { display: none; }
  .ww-umsatz-tabelle tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
  .ww-umsatz-tabelle td { display: block; padding: 0; border: 0; }
  .ww-umsatz-tabelle td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--grau); font-weight: 600; margin-bottom: 2px; }
  .ww-umsatz-tabelle td[data-label="Woche"] { grid-column: 1 / -1; }
  .ww-umsatz-tabelle td[data-label="Woche"]::before { content: none; }
  .ww-umsatz-tabelle .we-euro input { width: 100%; min-width: 0; }
  .ww-umsatz-tabelle .we-euro { display: flex; }
  .ww-wochen td { min-width: 0; }
}

/* ---------- Rechtschreibprüfung beim Schreiben (Paket 206) ---------- */
.rs-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; padding: 8px 10px; border-radius: 10px;
  background: var(--gelb-hell); border: 1px solid #f0d58a; font-size: 13.5px; line-height: 1.4; }
.rs-leiste[hidden] { display: none; }
.rs-kopf { font-weight: 700; color: var(--gelb); }
.rs-fund { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 6px 2px 8px; border-radius: 8px; background: rgba(255,255,255,.75); }
.rs-fund s { color: var(--rot-dunkel); text-decoration-color: var(--rot); text-decoration-thickness: 2px; font-weight: 600; }
.rs-vorschlag, .rs-richtig, .rs-zu { font: inherit; cursor: pointer; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--linie-stark); background: var(--weiss); color: var(--tinte); }
.rs-vorschlag { font-weight: 700; border-color: var(--gruen); color: var(--gruen); }
.rs-vorschlag:hover { background: var(--gruen-hell); }
.rs-richtig { font-size: 12.5px; color: var(--grau); }
.rs-richtig:hover, .rs-zu:hover { background: var(--papier); }
.rs-alle { border-style: dashed; }
.rs-mehr { color: var(--grau); font-size: 12.5px; }
.rs-zu { margin-left: auto; padding: 1px 9px; font-size: 15px; line-height: 1.2; color: var(--grau); }
.rs-schalter-karte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rs-schalter-karte p { margin: 0; }
.rs-dazu { display: grid; gap: 8px; max-width: 560px; }
.rs-liste { padding: 6px 18px; }
.rs-wort-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linie); margin: 0; }
.rs-wort-zeile:last-child { border-bottom: 0; }

/* Paket 206: Inventur- und Wareneinsatz-relevant jedes Mal antippen (Ja / Nein, nichts vorausgewählt) */
.rv-wahl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 6px 0; }
.rv-wahl + .rv-wahl { border-top: 1px solid var(--linie); }
.rv-wahl-text { display: grid; gap: 2px; flex: 1 1 220px; }
.rv-wahl-text small { color: var(--grau); font-size: 12.5px; }
.rv-wahl-knoepfe { display: inline-flex; gap: 6px; }
.rv-wahl-knoepfe .ort-haken { margin: 0; }
.inv-we-haken { margin: 10px 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--papier); }
.inv-we-haken > .label { margin: 0 0 4px; font-weight: 700; }
.inv-we-haken p.leise { margin: 6px 0 0; }

/* ---------- Rechnung automatisch lesen – Fundstellen farbig (Paket 207) ---------- */
.rv-f-lieferant { --rv-farbe: #2563eb; --rv-hell: rgba(37, 99, 235, .14); }
.rv-f-rechnung_nr { --rv-farbe: #7c3aed; --rv-hell: rgba(124, 58, 237, .14); }
.rv-f-rechnung_datum { --rv-farbe: #ea580c; --rv-hell: rgba(234, 88, 12, .15); }
.rv-f-liefer_datum { --rv-farbe: #0d9488; --rv-hell: rgba(13, 148, 136, .15); }
.rv-f-netto { --rv-farbe: #16a34a; --rv-hell: rgba(22, 163, 74, .15); }
.rv-lesen-kopf { display: grid; gap: 6px; }
.rv-lesen-status { font-size: 13.5px; font-weight: 600; color: var(--tinte); }
.rv-legende { display: flex; flex-wrap: wrap; gap: 5px; }
.rv-leg { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--rv-farbe); background: var(--rv-hell); border: 1.5px solid var(--rv-farbe); }
.rv-leg.rv-fehlt { color: var(--grau); background: var(--papier); border-color: var(--linie-stark); border-style: dashed; }
.rv-blatt { display: grid; gap: 10px; }
.rv-seite { position: relative; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; background: #fff; }
.rv-seite-bild { display: block; width: 100%; height: auto; }
.rv-mark { position: absolute; padding: 0; margin: 0; border: 2.5px solid var(--rv-farbe); background: var(--rv-hell); border-radius: 4px; cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); transition: box-shadow .15s, background .15s; }
.rv-mark.rv-unsicher { border-style: dashed; }
.rv-mark-text { position: absolute; left: -2px; bottom: 100%; margin-bottom: 2px; padding: 1px 6px; border-radius: 4px; background: var(--rv-farbe); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.rv-mark.rv-rechts .rv-mark-text { left: auto; right: -2px; }
.rv-mark.rv-unten .rv-mark-text { bottom: auto; top: 100%; margin: 2px 0 0; }
.rv-mark.rv-aktiv, .rv-mark:hover { background: rgba(255, 230, 0, .35); box-shadow: 0 0 0 4px var(--rv-farbe); z-index: 2; }
.rv-gelesen { border-left: 4px solid var(--rv-farbe); padding-left: 10px; border-radius: 2px; }
.rv-gelesen input { border-color: var(--rv-farbe); background: var(--rv-hell); }
.rv-gelesen.rv-unsicher input { border-style: dashed; }
.rv-gelesen-schild { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: #fff; background: var(--rv-farbe); vertical-align: 1px; }
.rv-gelesen.rv-unsicher .rv-gelesen-schild { background: var(--gelb); }
@media (max-width: 760px) {
  .rv-mark-text { font-size: 9.5px; padding: 0 4px; }
}

/* ---------- Wareneinsatz als Tacho auf der Übersicht, Zielwerte (Paket 208) ---------- */
.ww-tacho-kachel .inv-kachel-kopf .knopfreihe { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ww-tacho-filiale + .ww-tacho-filiale { border-top: 1px solid var(--linie); margin-top: 12px; padding-top: 12px; }
.ww-tacho-ort { margin: 0 0 8px; }
.ww-tacho-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.ww-tacho { text-align: center; min-width: 0; }
.ww-tacho-svg { display: block; width: 100%; max-width: 170px; margin: 0 auto; overflow: visible; }
.ww-tacho-bahn { fill: none; stroke: var(--linie-stark); stroke-width: 9; }
.ww-tacho-ziel { fill: none; stroke: #8fd3a5; stroke-width: 9; }
.ww-tacho-zeiger { stroke: var(--grau); stroke-width: 2.6; stroke-linecap: round; }
.ww-tacho-zeiger.ww-ok { stroke: var(--gruen); }
.ww-tacho-zeiger.ww-hoch { stroke: var(--rot); }
.ww-tacho-zeiger.ww-tief { stroke: var(--gelb); }
.ww-tacho-mitte { fill: var(--grau); }
.ww-tacho-skala { font-size: 6.5px; fill: var(--grau); }
.ww-tacho-wert { font-size: 22px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ww-tacho-wert .ww-fehlt { font-size: 14px; }
.ww-tacho-titel { font-weight: 700; font-size: 14px; }
.ww-tacho-unter { font-size: 12px; color: var(--grau); }
.ww-tacho-stand { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ww-tacho-luecke { font-size: 11.5px; color: var(--gelb); margin-top: 3px; }
.ww-ok { color: var(--gruen); }
.ww-hoch { color: var(--rot-dunkel); }
.ww-tief { color: var(--gelb); }
.ww-tacho-stand.ww-ok { background: var(--gruen-hell); }
.ww-tacho-stand.ww-hoch { background: var(--rot-hell); }
.ww-tacho-stand.ww-tief { background: var(--gelb-hell); }
.ww-prozent.ww-ok { color: var(--gruen); }
.ww-prozent.ww-hoch { color: var(--rot-dunkel); }
.ww-prozent.ww-tief { color: var(--gelb); }
.ww-ziele-tabelle .we-euro input { width: 90px; }
@media (max-width: 640px) {
  .ww-tacho-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ww-tacho-wert { font-size: 20px; }
}

/* ---------- Wareneinsatz gesamt und Speisen & Verpackung (Paket 209) ---------- */
.rv-f-netto_7 { --rv-farbe: #db2777; --rv-hell: rgba(219, 39, 119, .13); }
.rv-f-netto_19 { --rv-farbe: #0891b2; --rv-hell: rgba(8, 145, 178, .14); }
.rv-aufteilung-fehlt { color: var(--gelb); font-weight: 600; }
.ww-art { font-size: 11.5px; font-weight: 600; color: var(--grau); }
.ww-speisen { font-size: 13px; color: var(--tinte); }
.ww-speisen strong { font-variant-numeric: tabular-nums; }
.ww-tacho-speisen { font-size: 12.5px; margin: 1px 0 2px; }
.ww-tacho-wert .ww-art { font-size: 11px; vertical-align: 2px; }
.ww-kopf { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }

/* Paket 210: alle Rechnungen löschen */
.rv-alle-loeschen { margin-top: 24px; border: 1px solid #f0b4ad; }
.rv-alle-loeschen > summary { cursor: pointer; color: var(--rot-dunkel); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.rv-alle-loeschen-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.rv-alle-loeschen-form .feld { margin: 0; flex: 0 1 260px; }
.rv-knopf-loeschen { background: var(--rot); border-color: var(--rot); color: #fff; }

/* Paket 212: alle Seiten einer Rechnung, Seitenzahl oben rechts */
.rv-seite-nr { position: absolute; top: 6px; right: 6px; z-index: 3; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(22, 24, 27, .72); color: #fff; pointer-events: none; }
.rv-seite { background: #fff; }