/* Buchung – barrierearm: große Schrift, hoher Kontrast, große Klickflächen */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(/static/poppins-Regular.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url(/static/poppins-Medium.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(/static/poppins-SemiBold.woff) format("woff"); }

:root {
  --marke: #549B8C;
  --marke-dunkel: #275A4F;
  --marke-hell: #E8F1EE;
  --text: #1F2A27;
  --text-2: #4A5552;
  --linie: #CBD6D2;
  --flaeche: #FFFFFF;
  --grund: #F6F8F7;
  --fehler: #A1271B;
  --fehler-hell: #FBEAE8;
  --ok-hell: #E8F1EE;
  --radius: 14px;
  --knopf: #275A4F;
  --knopf-hover: #1C443B;
  --feld: #fff;
}

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text); background: var(--grund); line-height: 1.6;
}
a { color: var(--marke-dunkel); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .kachel:focus-visible {
  outline: 3px solid var(--marke-dunkel); outline-offset: 3px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

header.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: 960px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.marke { font-weight: 600; font-size: 1.5rem; color: var(--marke-dunkel); text-decoration: none; letter-spacing: -0.5px; }
.marke span { color: var(--marke); }
.marke .logo { display: block; height: 64px; width: auto; }
@media (max-width: 480px) { .marke .logo { height: 52px; } }
.anruf { font-weight: 600; color: var(--marke-dunkel); text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
.anruf small { display: block; font-weight: 400; font-size: .8rem; color: var(--text-2); }

main { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: 8px 0 12px; letter-spacing: -0.3px; }
h2 { font-size: 1.35rem; line-height: 1.3; margin: 32px 0 12px; }
h3 { font-size: 1.1rem; margin: 0 0 4px; }
p { margin: 0 0 14px; }
.einleitung { font-size: 1.1rem; color: var(--text-2); max-width: 46rem; }

.schritte { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 20px; flex-wrap: wrap; font-size: .9rem; color: var(--text-2); }
.schritte li { padding: 4px 12px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); }
.schritte li[aria-current] { background: var(--knopf); color: #fff; border-color: var(--marke-dunkel); }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kachel {
  display: block; background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--radius);
  padding: 18px 20px; text-decoration: none; color: var(--text); min-height: 100%;
}
a.kachel:hover { border-color: var(--marke); background: #FBFDFC; }
.kachel .preis { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--marke-dunkel); }
.kachel .meta { color: var(--text-2); font-size: .92rem; }
.kachel .weiter { display: block; margin-top: 10px; font-weight: 500; color: var(--marke-dunkel); }

.tag { margin: 0 0 22px; }
.tag h3 { font-size: 1.1rem; margin-bottom: 10px; }
.zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; max-width: 46rem; }
.zeit {
  display: inline-flex; align-items: center; justify-content: center; min-width: 108px; min-height: 56px; padding: 8px 14px;
  border: 2px solid var(--marke); border-radius: 12px; background: var(--flaeche); color: var(--marke-dunkel);
  font-weight: 600; font-size: 1.1rem; text-decoration: none;
}
.zeit:hover { background: var(--knopf); border-color: var(--marke-dunkel); color: #fff; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 12px 26px;
  border: 0; border-radius: 12px; background: var(--knopf); color: #fff; font: inherit; font-weight: 600; font-size: 1.1rem;
  cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--knopf-hover); }
.knopf.zweit { background: var(--flaeche); color: var(--marke-dunkel); border: 2px solid var(--marke-dunkel); }
.knopf.warn { background: var(--fehler); }
.knopf.klein { min-height: 40px; padding: 6px 14px; font-size: .9rem; }

form.formular { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; max-width: 40rem; }
.feld { margin-bottom: 18px; }
.feld label { display: block; font-weight: 500; margin-bottom: 6px; }
.feld .hilfe { display: block; font-size: .9rem; color: var(--text-2); margin-top: 4px; }
input[type=search], input[type=url], input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=datetime-local], input[type=date], input[type=time], select, textarea {
  width: 100%; min-height: 54px; padding: 10px 14px; font: inherit; font-size: 1.05rem; color: var(--text);
  border: 2px solid #9AAAA5; border-radius: 10px; background: var(--feld); color: var(--text);
}
textarea { min-height: 110px; }
.feld.fehler input, .feld.fehler textarea { border-color: var(--fehler); }
.feld .meldung { color: var(--fehler); font-weight: 500; margin-top: 6px; display: block; }
.zeile { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; }
.honig { position: absolute; left: -10000px; }

.hinweis { border-radius: var(--radius); padding: 16px 18px; margin: 0 0 20px; background: var(--marke-hell); border-left: 6px solid var(--marke); }
.hinweis.fehler { background: var(--fehler-hell); border-left-color: var(--fehler); }
.hinweis.warnung { background: #FFF6E5; border-left-color: #B26B00; }
.zusammenfassung { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 22px; margin: 0 0 20px; }
.zusammenfassung dl { display: grid; grid-template-columns: 7rem 1fr; gap: 6px 14px; margin: 0; }
.zusammenfassung dt { color: var(--text-2); }
.zusammenfassung dd { margin: 0; font-weight: 500; }
.erfolg h1::before { content: "✓ "; color: var(--marke); }

.preise { width: 100%; border-collapse: collapse; background: var(--flaeche); border-radius: var(--radius); overflow: hidden; }
.preise th, .preise td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--linie); }
.preise th { background: var(--marke-hell); font-weight: 600; }
.module { counter-reset: m; list-style: none; padding: 0; }
.module li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; }
.voll { display: block; margin-top: 10px; color: var(--text-2); font-weight: 500; }

footer.fuss { border-top: 1px solid var(--linie); background: var(--flaeche); font-size: .9rem; color: var(--text-2); }
.fuss-innen { max-width: 960px; margin: 0 auto; padding: 18px 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Verwaltung */
.v-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 18px; }
.v-nav a { font-weight: 500; }
table.liste { width: 100%; border-collapse: collapse; background: var(--flaeche); font-size: .92rem; }
table.liste th, table.liste td { padding: 8px 10px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
table.liste th { background: var(--marke-hell); }
.status-storniert { color: var(--text-2); text-decoration: line-through; }
.inline { display: inline; }
.kompakt .feld { margin-bottom: 10px; }
.kompakt input, .kompakt select { min-height: 42px; font-size: .95rem; padding: 6px 10px; }
.tabelle-scroll { overflow-x: auto; }

@media (max-width: 560px) {
  html { font-size: 106%; }
  h1 { font-size: 1.6rem; }
  .zeile { grid-template-columns: 1fr; }
  .zusammenfassung dl { grid-template-columns: 1fr; }
  .zusammenfassung dt { margin-top: 6px; }
  .knopf { width: 100%; }
  .zeiten { grid-template-columns: repeat(3, 1fr); }
  .zeit { min-width: 0; }
}
.abstand { margin-top: 28px; }

.checkliste { background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--radius); padding: 16px 20px 6px; margin: 16px 0 20px; }
.checkliste h2 { margin: 0 0 10px; font-size: 1.2rem; }
.checkliste p { margin: 0 0 10px; }
.checkliste .punkt { position: relative; padding-left: 30px; }
.checkliste .punkt::before { content: "✓"; position: absolute; left: 4px; top: 0; color: var(--marke); font-weight: 700; }
.liste .betrag { white-space: nowrap; }

/* Verwaltung: breiter, Menü in der Kopfzeile (ohne JavaScript, per <details>) */
.v main, .v .kopf-innen, .v .fuss-innen { max-width: 1200px; }
.v .kopf-innen { flex-wrap: nowrap; }
.menue { display: flex; align-items: center; gap: 4px; flex: 1; margin-left: 24px; }
.menue details, .menue-person { position: relative; }
.menue summary, .menue-person summary, .menue-punkt {
  display: block; list-style: none; cursor: pointer; padding: 10px 14px; border-radius: 10px;
  font-weight: 500; color: var(--marke-dunkel); text-decoration: none; white-space: nowrap;
}
.menue summary::-webkit-details-marker, .menue-person summary::-webkit-details-marker { display: none; }
.menue summary::after, .menue-person summary::after { content: " ▾"; font-size: .8em; }
.menue summary:hover, .menue-punkt:hover, .menue-person summary:hover, .menue details[open] > summary, .menue-person[open] > summary { background: var(--marke-hell); }
.menue-liste {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 240px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 30px rgba(31, 42, 39, .12);
}
.menue-liste.rechts { left: auto; right: 0; }
.menue-liste a, .menue-knopf {
  display: block; width: 100%; text-align: left; padding: 11px 14px; border-radius: 8px; border: 0; background: none;
  font: inherit; color: var(--text); text-decoration: none; cursor: pointer;
}
.menue-liste a:hover, .menue-knopf:hover { background: var(--marke-hell); }
.menue-liste form { margin: 0; border-top: 1px solid var(--linie); margin-top: 6px; padding-top: 6px; }
@media (max-width: 760px) {
  .v .kopf-innen { flex-wrap: wrap; }
  .menue { order: 3; flex-basis: 100%; margin: 4px 0 0; flex-wrap: wrap; }
  .menue-liste { min-width: 220px; }
}
.v form.kompakt { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; } .v form.kompakt input[type=date] { max-width: 220px; }

/* Kalender */
/* Sparten-Farben: geprüfte kategoriale Palette (feste Reihenfolge, farbfehlsichtig unterscheidbar) */
.sp-geraeteberatung { --sp: #2a78d6; --sp-hell: #E5EFFB; }
.sp-tarifberatung   { --sp: #eb6834; --sp-hell: #FDEBE3; }
.sp-einrichtung     { --sp: #1baf7a; --sp-hell: #E1F5EE; }
.sp-homeservice     { --sp: #eda100; --sp-hell: #FDF2D9; }
.sp-schulung        { --sp: #e87ba4; --sp-hell: #FCEBF2; }
.sp-abwesend        { --sp: #7A7F7D; --sp-hell: #ECEEED; }
.sp-sonstiges       { --sp: #4A5552; --sp-hell: #F0F2F1; }
.kal-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 6px; }
.kal-kopf h1 { margin: 0; font-size: 1.6rem; }
.kal-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kal-umschalter { display: inline-flex; border: 2px solid var(--marke-dunkel); border-radius: 10px; overflow: hidden; }
.kal-umschalter a { padding: 7px 14px; text-decoration: none; font-weight: 500; color: var(--marke-dunkel); }
.kal-umschalter a[aria-current] { background: var(--knopf); color: #fff; }
.kal-person { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.kal-person select { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--linie); font: inherit; background: var(--flaeche); }
.kal-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; margin: 6px 0 14px; }
.kal-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kal-legende span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--sp-hell); border-left: 4px solid var(--sp); }
.kal-raster { display: grid; grid-template-columns: 52px repeat(var(--spalten), minmax(120px, 1fr)); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); overflow-x: auto; }
.kal-ecke, .kal-spaltenkopf { height: 44px; border-bottom: 1px solid var(--linie); }
.kal-spaltenkopf { display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .95rem; position: sticky; top: 0; background: var(--flaeche); }
.kal-spaltenkopf a { color: var(--text); text-decoration: none; }
.kal-spalte { border-left: 1px solid var(--linie); }
.kal-spalte.heute .kal-spaltenkopf { color: var(--marke-dunkel); background: var(--marke-hell); }
.kal-spalte.heute .kal-flaeche { background: #FAFCFB; }
.kal-achse, .kal-flaeche { position: relative; }
.kal-achse span { position: absolute; right: 6px; transform: translateY(-50%); font-size: .75rem; color: var(--text-2); }
.kal-achse span:first-child { transform: none; }
.kal-linie { position: absolute; left: 0; right: 0; border-top: 1px solid #EEF2F0; }
.kal-block { position: absolute; z-index: 1; overflow: hidden; border-radius: 8px; padding: 4px 7px; font-size: .78rem; line-height: 1.3;
  background: var(--sp-hell); border-left: 4px solid var(--sp); color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.kal-block:hover { outline: 2px solid var(--sp); z-index: 2; }
.kal-block strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-block span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.kal-block.sp-abwesend { background: repeating-linear-gradient(135deg, rgba(122,127,125,.10), rgba(122,127,125,.10) 6px, transparent 6px, transparent 12px); border-left-color: #B8BDBB; box-shadow: none; z-index: 0; color: var(--text-2); }
.kal-block.sp-abwesend strong { font-weight: 500; }
.kal-achse, .kal-flaeche { margin-bottom: 16px; }
.kal-block.erledigt { opacity: .6; }
.kal-block.nicht, .kal-mini.nicht { text-decoration: line-through; opacity: .7; }
.kal-monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--linie); gap: 1px;
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.kal-wt { background: var(--marke-hell); padding: 8px; font-weight: 600; text-align: center; font-size: .9rem; }
.kal-zelle { background: var(--flaeche); min-height: 112px; padding: 6px; display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--text); }
.kal-zelle:hover { background: #FAFCFB; }
.kal-zelle.fremd { background: #F8FAF9; color: var(--text-2); }
.kal-zelle.heute .kal-nr { background: var(--knopf); color: #fff; }
.kal-nr { align-self: flex-start; font-weight: 600; font-size: .85rem; min-width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 13px; }
.kal-mini { font-size: .72rem; line-height: 1.3; padding: 2px 5px; border-radius: 5px; background: var(--sp-hell); border-left: 3px solid var(--sp);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-mehr { font-size: .72rem; color: var(--text-2); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
@media (max-width: 760px) {
  .kal-zelle { min-height: 70px; }
  .kal-mini { font-size: 0; padding: 0; height: 6px; border-left-width: 0; background: var(--sp); }
}
.kal-steuer .knopf { width: auto; display: inline-block; margin: 0; }

/* Statistik */
.stat-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 10px 0 20px; }
.stat-steuer .kal-umschalter a { padding: 7px 12px; font-size: .92rem; }
.stat-frei label { font-size: .9rem; color: var(--text-2); }
.stat-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 8px; }
.stat-kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.stat-wert { font-size: 1.65rem; white-space: nowrap; font-weight: 600; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-name { font-weight: 500; color: var(--text); }
.stat-unter { font-size: .82rem; color: var(--text-2); }
.stat-balken { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 18px; display: grid; gap: 10px; }
.stat-zeile { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 12px; }
.stat-label { font-size: .92rem; }
.stat-spur { height: 14px; background: #F0F3F2; border-radius: 0 4px 4px 0; }
.stat-fuellung { display: block; height: 100%; min-width: 2px; background: var(--sp); border-radius: 0 4px 4px 0; }
.stat-zahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.stat-monate { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 12px 10px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(36px, 1fr); gap: 8px; height: 240px; overflow-x: auto; }
.stat-monat { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.stat-saeule { width: 60%; max-width: 44px; display: flex; flex-direction: column-reverse; gap: 2px; }
.stat-teil { background: var(--sp); min-height: 2px; }
.stat-saeule .stat-teil:last-child { border-radius: 4px 4px 0 0; }
.stat-summe { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.stat-monatsname { font-size: .75rem; color: var(--text-2); white-space: nowrap; }
.stat-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--sp); margin-right: 8px; }
.liste.zahlen td:not(:first-child), .liste.zahlen th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.liste .summe td { font-weight: 600; border-top: 2px solid var(--linie); }
@media (max-width: 760px) { .stat-zeile { grid-template-columns: 100px 1fr 36px; } }
.liste.zahlen td:first-child { white-space: nowrap; }

/* Kunden */
.kunden-suche input[type=search] { flex: 1; min-width: 220px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie); font: inherit; }
.kunden-suche select { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--linie); font: inherit; background: var(--flaeche); }
.marke-klein { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--marke-hell); color: var(--marke-dunkel); vertical-align: middle; }
.kunde-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.kunde-raster h2 { margin-top: 8px; }
.formular.kompakt-form { max-width: none; }
.verlauf { list-style: none; padding: 0; margin: 18px 0 0; border-left: 2px solid var(--linie); }
.verlauf li { position: relative; padding: 0 0 16px 18px; display: flex; flex-direction: column; }
.verlauf li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 5px; background: var(--marke); }
.verlauf li.verlauf-rechnung::before { background: #eb6834; }
.verlauf li.verlauf-anruf::before, .verlauf li.verlauf-mail::before { background: #2a78d6; }
.verlauf-zeit { font-size: .78rem; color: var(--text-2); }
.verlauf-titel { font-weight: 600; }
.verlauf-text { font-size: .9rem; color: var(--text-2); white-space: pre-line; }
.verlauf-status { font-weight: 400; color: var(--text-2); }
details.gefahr { border: 1px solid var(--fehler); border-radius: var(--radius); padding: 12px 16px; background: var(--fehler-hell); }
details.gefahr summary { cursor: pointer; font-weight: 600; color: var(--fehler); }
@media (max-width: 900px) { .kunde-raster { grid-template-columns: 1fr; } }
.v .marke { font-size: 1.3rem; white-space: nowrap; }
.v .menue { gap: 0; margin-left: 16px; }
.v .menue summary, .v .menue-punkt { padding: 10px 11px; }
.v form.kompakt > input, .v form.kompakt > select, .v form.kompakt > button { width: auto; margin: 0; }
.v form.kompakt.kunden-suche > input[type=search] { flex: 1 1 260px; }
.verlauf-mehr summary { cursor: pointer; color: var(--marke-dunkel); font-weight: 500; margin: 6px 0 10px; }
/* Aufträge */
.auftrag-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0; }
.auftrag-start small { color: var(--text-2); }
.auftrag-form h2 { margin-top: 28px; }
.feld.breit { flex: 2 1 260px; }
.positionen { display: grid; gap: 8px; }
.pos-kopf, .pos-zeile { display: grid; grid-template-columns: minmax(180px, 1fr) 70px 80px 110px 100px 36px; gap: 8px; align-items: center; }
.pos-kopf { font-size: .85rem; color: var(--text-2); font-weight: 500; }
.pos-zeile input { margin: 0; }
.pos-betrag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-weg { border: 0; background: none; font-size: 1.4rem; color: var(--text-2); cursor: pointer; min-height: 40px; }
.pos-summe { font-size: 1.2rem; text-align: right; }
@media (max-width: 760px) {
  .pos-kopf { display: none; }
  .pos-zeile { grid-template-columns: 1fr 1fr 1fr 36px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
  .pos-zeile input[name=text] { grid-column: 1 / -1; }
  .pos-betrag { grid-column: 1 / 4; }
}
fieldset.wahl { border: 0; padding: 0; margin: 0 0 18px; }
fieldset.wahl legend { font-weight: 500; margin-bottom: 6px; }
fieldset.wahl label { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.vorformatiert { white-space: pre-line; }
.abschluss { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 20px; font-size: 1.1rem; }
.abschluss .gross, .liste.gross { font-size: 1.15rem; }
.unterschrift-feld { position: relative; max-width: 720px; }
.unterschrift-feld canvas { display: block; width: 100%; height: 220px; background: #fff; border: 2px solid var(--marke-dunkel); border-radius: var(--radius); touch-action: none; cursor: crosshair; }
.unterschrift-linie { position: absolute; left: 24px; right: 24px; bottom: 44px; border-top: 1px solid var(--linie); font-size: .8rem; color: var(--text-2); padding-top: 4px; pointer-events: none; }
.meldung { color: var(--fehler); font-weight: 500; }
.unterschrift-bild img { max-width: 360px; width: 100%; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); }
.unterschrift-bild figcaption { color: var(--text-2); font-size: .9rem; }
.v .formular.auftrag-form { max-width: 980px; }
.v #unterschrift-form { max-width: 780px; }
@media (min-width: 761px) and (max-width: 1240px) {
  .v .kopf-innen { flex-wrap: wrap; }
  .v .menue { flex-wrap: wrap; }
  .v .marke span { display: none; }
  .v .menue { margin-left: 8px; }
  .v .menue summary, .v .menue-punkt { padding: 10px 7px; }
}
.liste td:first-child > a { white-space: nowrap; }
/* Aktiver Menüpunkt */
.menue-punkt[aria-current], .menue details.aktiv > summary { color: var(--marke-dunkel); box-shadow: inset 0 -3px 0 var(--marke-dunkel); font-weight: 600; }
.menue-neu { white-space: nowrap; margin-right: 8px; }
.v .knopf.menue-neu { min-height: 38px; padding: 6px 14px; }
/* Termin anlegen */
.termin-form { max-width: 820px; }
.kunde-suche { position: relative; }
.kunde-treffer { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); max-height: 280px; overflow: auto; }
.kunde-treffer li button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 14px; cursor: pointer; font: inherit; min-height: 44px; }
.kunde-treffer li + li { border-top: 1px solid var(--linie); }
.kunde-treffer li button:hover, .kunde-treffer li button:focus { background: var(--marke-hell); }
.kunde-treffer small { color: var(--text-2); }
.kunde-gewaehlt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--marke-hell); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.check input { margin-top: 5px; width: 20px; height: 20px; }
.kal-frei { position: absolute; left: 0; right: 0; z-index: 0; }
.kal-frei:hover { background: var(--marke-hell); }
.kal-frei:hover::after { content: "+"; position: absolute; left: 6px; top: 0; color: var(--marke-dunkel); font-weight: 600; }
.zeile.zwei { grid-template-columns: 1fr 1fr; }
.zeile.drei { grid-template-columns: 1fr 1fr 1fr; }
.zeile.adresse { grid-template-columns: 2fr 7rem 1.3fr; }
@media (max-width: 560px) { .zeile.zwei, .zeile.drei, .zeile.adresse { grid-template-columns: 1fr; } }
/* Startseite */
.start-kopf { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.start-kopf h1 { margin-bottom: 4px; }
.start-raster { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .start-raster { grid-template-columns: 1fr; } .start-raster > section:first-child { order: 2; } }
.start-tag { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 20px; }
.start-tag h2 { font-size: 1.1rem; margin: 6px 0 10px; }
.start-tag h2 + * { margin-top: 0; }
.tagesliste { list-style: none; margin: 0; padding: 0; }
.tagesliste li a { display: flex; gap: 12px; padding: 8px 10px; border-left: 4px solid var(--sp, var(--linie)); border-radius: 6px; margin-bottom: 6px; text-decoration: none; color: var(--text); background: var(--sp-hell, var(--marke-hell)); }
.tagesliste li.erledigt a { opacity: .6; }
.tagesliste .tl-zeit { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 3rem; }
.naechster { font-size: .95rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.modul { display: flex; flex-direction: column; gap: 6px; min-height: 140px; padding: 16px 18px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none; color: var(--text); }
a.modul:hover { border-color: var(--marke); box-shadow: 0 2px 10px rgba(31,42,39,.07); }
.modul-kopf { display: flex; align-items: center; gap: 10px; }
.modul-name { font-weight: 600; font-size: 1.08rem; }
.symbol { width: 28px; height: 28px; fill: none; stroke: var(--marke-dunkel); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.modul-zahl { font-size: 2.1rem; font-weight: 600; line-height: 1.1; margin-top: 4px; color: var(--marke-dunkel); font-variant-numeric: tabular-nums; }
.modul-zahl.warnung { color: var(--fehler); }
.modul-unter { font-size: .9rem; color: var(--text-2); }
.modul.geplant { background: transparent; border-style: dashed; }
.modul.geplant .symbol { stroke: var(--text-2); }
.geplant-titel { margin-top: 28px; font-size: 1.1rem; }
/* Aufgaben */
.reiter { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 18px; }
.reiter a { padding: 10px 14px; text-decoration: none; color: var(--text-2); font-weight: 500; }
.reiter a[aria-current] { color: var(--marke-dunkel); box-shadow: inset 0 -3px 0 var(--marke-dunkel); }
.aufgabe-neu { margin-bottom: 20px; }
.aufgabe-neu > summary { list-style: none; display: inline-flex; cursor: pointer; }
.aufgabe-neu > summary::-webkit-details-marker { display: none; }
.aufgabe-neu[open] > summary { margin-bottom: 12px; }
.label-leer { display: block; margin-bottom: 6px; }
.aufgabenliste, .aufgaben-kurz { list-style: none; margin: 0; padding: 0; }
.aufgabenliste li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; border-bottom: 1px solid var(--linie); }
.aufgabenliste .aufgabe-inhalt { display: flex; flex-direction: column; gap: 2px; }
.aufgabenliste .aufgabe-titel { font-weight: 500; color: var(--text); text-decoration: none; }
.aufgabenliste small { color: var(--text-2); }
.aufgabenliste li.erledigt .aufgabe-titel { text-decoration: line-through; color: var(--text-2); }
.ueberfaellig small, .aufgaben-kurz .ueberfaellig small { color: var(--fehler); font-weight: 500; }
.aufgaben-kurz li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.aufgaben-kurz li a { flex: 1; color: var(--text); text-decoration: none; }
.abhaken { width: 28px; height: 28px; min-height: 28px; flex: none; border: 2px solid var(--marke-dunkel); border-radius: 50%; background: var(--flaeche); cursor: pointer; padding: 0; position: relative; }
.abhaken:hover, .abhaken.an { background: var(--knopf); }
.abhaken:hover::after, .abhaken.an::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (min-width: 761px) and (max-width: 1600px) {
  .v .marke span { display: none; }
  .v .menue summary, .v .menue-punkt { padding: 10px 8px; }
}
/* Web-App (Homescreen, Vollbild) */
.v .kopf { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.v main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(48px, env(safe-area-inset-bottom)); }
.app-tipp { margin-top: 16px; font-size: .92rem; color: var(--text-2); }
.app-tipp summary { cursor: pointer; color: var(--marke-dunkel); font-weight: 500; }
@media (display-mode: standalone) { .app-tipp { display: none; } }
@media (max-width: 560px) {
  .v .knopf.menue-neu { width: auto; margin: 0 0 0 auto; }
  .kacheln { grid-template-columns: 1fr 1fr; gap: 10px; }
  .modul { min-height: 0; padding: 12px 14px; gap: 4px; }
  .modul-name { font-size: 1rem; }
  .symbol { width: 22px; height: 22px; }
  .modul-zahl { font-size: 1.6rem; }
  .modul-unter { font-size: .82rem; }
  .modul.geplant .modul-unter { display: none; }
}
/* Nachrichten */
.zaehler { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px; background: var(--fehler); color: #fff; font-size: .78rem; font-weight: 600; text-align: center; line-height: 1.4em; margin-left: 2px; }
.nachrichtenliste { list-style: none; margin: 0; padding: 0; }
.nachrichtenliste li a { display: flex; flex-direction: column; gap: 3px; padding: 12px 8px; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--text); }
.nachrichtenliste li a:hover { background: var(--marke-hell); }
.nachrichtenliste li.st-neu .n-wer, .nachrichtenliste li.st-neu .n-betreff { font-weight: 700; }
.nachrichtenliste li.st-erledigt a { opacity: .65; }
.n-kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.n-kopf time { margin-left: auto; font-size: .85rem; color: var(--text-2); }
.n-kanal { font-size: .75rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--marke-hell); color: var(--marke-dunkel); }
.n-kanal.k-formular { background: #FDF2D9; color: #7a5200; }
.n-kunde { font-size: .75rem; color: var(--marke-dunkel); }
.n-betreff { font-size: .98rem; }
.n-vorschau { font-size: .9rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-fuss { font-size: .82rem; color: var(--text-2); }
.nachricht-raster { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .nachricht-raster { grid-template-columns: 1fr; } }
.nachricht-raster aside { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 18px; }
.nachricht-raster aside h2 { font-size: 1.05rem; margin: 14px 0 8px; }
.nachricht-raster aside h2:first-child { margin-top: 0; }
.nachricht-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; line-height: 1.55; }
.verlauf-mail { margin-top: 16px; }
.verlauf-mail.aus .nachricht-text { background: var(--marke-hell); }
.anhaenge { padding-left: 18px; }
.knopfreihe.senkrecht { flex-direction: column; align-items: stretch; }
.knopfreihe.senkrecht form, .knopfreihe.senkrecht .knopf { width: 100%; }
.kunde-treffer li.leer { padding: 10px 14px; color: var(--text-2); }
/* Postfächer, neue E-Mail, Live-Hinweis */
.kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kopf-zeile h1 { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }
.chips a { padding: 4px 12px; border: 1px solid var(--linie); border-radius: 999px; text-decoration: none; color: var(--text-2); font-size: .92rem; background: var(--flaeche); }
.chips a[aria-current] { background: var(--knopf); border-color: var(--marke-dunkel); color: #fff; }
.n-postfach { font-size: .8rem; color: var(--text-2); }
.fehlertext { color: var(--fehler); }
.mail-form select, .mail-form input[type=text] { width: 100%; }
details.erweitert { margin: 12px 0 18px; }
details.erweitert summary { cursor: pointer; color: var(--text-2); }
.live-hinweis { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; background: var(--knopf); color: #fff; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.live-hinweis:hover, .live-hinweis:focus { color: #fff; background: var(--marke); }
textarea.signatur { font-size: .92rem; color: var(--text-2); }
.ansicht-wahl { font-size: .9rem; margin: 0 0 6px; }
iframe.mail-html { display: block; width: 100%; height: 75vh; min-height: 420px; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; resize: vertical; }
.zaehler[hidden] { display: none; }
/* Kopfzeile Cockpit (Okt. 2026): Firmenname + „Cockpit“, kompaktes Menü, Initialen */
.v .kopf-innen { padding-top: 10px; padding-bottom: 10px; gap: 16px; }
.v .marke.marke-v { display: flex; flex-direction: column; line-height: 1.1; font-size: 1rem; flex: none; }
.v .marke-v .marke-name { display: block; font-size: 1.3rem; font-weight: 600; color: var(--marke-dunkel); letter-spacing: -0.4px; }
.v .marke-v .marke-zusatz { display: block !important; font-size: .74rem; font-weight: 600; color: var(--marke); text-transform: uppercase; letter-spacing: 1.6px; margin-top: 2px; }
.v .menue { gap: 2px; margin-left: 8px; flex-wrap: nowrap; }
.v .menue summary, .v .menue-punkt { padding: 8px 11px; font-size: .95rem; border-radius: 8px; }
.menue-gruppe { display: block; padding: 10px 14px 4px; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-2); }
.menue-gruppe:not(:first-child) { border-top: 1px solid var(--linie); margin-top: 6px; }
.menue-liste a.eingerueckt { padding-left: 28px; font-size: .95rem; }
.menue-person summary.initialen { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--knopf); color: #fff; font-weight: 600; font-size: .9rem; letter-spacing: .5px; }
.menue-person summary.initialen::after { content: none; }
.menue-person summary.initialen:hover, .menue-person[open] > summary.initialen { background: var(--marke); }
@media (min-width: 761px) and (max-width: 1100px) {
  .v .menue summary, .v .menue-punkt { padding: 8px 7px; font-size: .9rem; }
}
@media (max-width: 760px) {
  .v .kopf-innen { flex-wrap: wrap; }
  .v .menue { order: 3; flex-basis: 100%; margin: 2px 0 0; flex-wrap: wrap; }
  .menue-person { margin-left: auto; }
}
/* Kalender: Überblick heute / morgen / Woche */
.kal-ueberblick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 22px; }
.ub-kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.ub-kachel.heute { border-color: var(--marke); box-shadow: inset 0 3px 0 var(--marke); }
.ub-kachel h2 { font-size: 1rem; margin: 0 0 10px; color: var(--marke-dunkel); }
.ub-liste { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.ub-liste li a { display: flex; gap: 10px; padding: 7px 10px; margin-bottom: 6px; border-left: 4px solid var(--sp, var(--linie)); border-radius: 6px;
  background: var(--sp-hell, var(--marke-hell)); color: var(--text); text-decoration: none; }
.ub-liste li a:hover { filter: brightness(.97); }
.ub-liste li.erledigt a { opacity: .6; }
.ub-zeit { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ub-text { min-width: 0; }
.ub-text small { display: block; color: var(--text-2); }
.ub-liste.kompakt li a { padding: 5px 10px; font-size: .92rem; margin-bottom: 4px; }
.ub-wer { margin: 0 0 8px; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-2); }
@media (max-width: 900px) { .kal-ueberblick { grid-template-columns: 1fr; } }
/* Spam */
.spam-hinweis { background: var(--fehler-hell); border-color: var(--fehler); }
.spam-zurueck { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.spam-zurueck .check { margin: 0; }
.spam-grund { color: var(--fehler); }
details.spam-menue { margin: 10px 0 16px; }
details.spam-menue summary { cursor: pointer; color: var(--fehler); font-weight: 500; font-size: .92rem; }
details.spam-menue form { margin-top: 8px; }
details.spam-menue .knopf { white-space: normal; text-align: center; }
/* Nachtmodus (Cockpit): automatisch nach System oder fest über data-theme */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.v {
  --marke: #5FB3A1; --marke-dunkel: #8ACFBF; --marke-hell: #1D3732;
  --text: #E3EBE8; --text-2: #A7B5B0; --linie: #34433F; --flaeche: #172120; --grund: #0E1514;
  --fehler: #F0897D; --fehler-hell: #3A201D; --ok-hell: #1D3732;
  --knopf: #2D7869; --knopf-hover: #378A79; --feld: #111A18;
  color-scheme: dark;
  }
  html:not([data-theme="light"]) body.v .kal-spalte.heute .kal-flaeche, html:not([data-theme="light"]) body.v .kal-zelle:hover, html:not([data-theme="light"]) body.v a.kachel:hover { background: #15201E; }
  html:not([data-theme="light"]) body.v .kal-zelle.fremd { background: #121a18; }
  html:not([data-theme="light"]) body.v .kal-linie { border-top-color: #22302D; }
  html:not([data-theme="light"]) body.v .stat-spur { background: #22302D; }
  html:not([data-theme="light"]) body.v [class*="sp-"] { --sp-hell: color-mix(in srgb, var(--sp) 26%, #172120); }
  html:not([data-theme="light"]) body.v .n-kanal.k-formular { background: #3A3016; color: #F2CF7A; }
  html:not([data-theme="light"]) body.v .hinweis.warnung { background: #33280F; border-left-color: #E0A030; }
  html:not([data-theme="light"]) body.v .zaehler { background: #C0392B; }
  html:not([data-theme="light"]) body.v .menue-liste { box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  html:not([data-theme="light"]) body.v input, html:not([data-theme="light"]) body.v select, html:not([data-theme="light"]) body.v textarea { border-color: #4C5E59; }
  html:not([data-theme="light"]) body.v .knopf.zweit { background: transparent; }
}
html[data-theme="dark"] body.v {
  --marke: #5FB3A1; --marke-dunkel: #8ACFBF; --marke-hell: #1D3732;
  --text: #E3EBE8; --text-2: #A7B5B0; --linie: #34433F; --flaeche: #172120; --grund: #0E1514;
  --fehler: #F0897D; --fehler-hell: #3A201D; --ok-hell: #1D3732;
  --knopf: #2D7869; --knopf-hover: #378A79; --feld: #111A18;
  color-scheme: dark;
}
html[data-theme="dark"] body.v .kal-spalte.heute .kal-flaeche, html[data-theme="dark"] body.v .kal-zelle:hover, html[data-theme="dark"] body.v a.kachel:hover { background: #15201E; }
html[data-theme="dark"] body.v .kal-zelle.fremd { background: #121a18; }
html[data-theme="dark"] body.v .kal-linie { border-top-color: #22302D; }
html[data-theme="dark"] body.v .stat-spur { background: #22302D; }
html[data-theme="dark"] body.v [class*="sp-"] { --sp-hell: color-mix(in srgb, var(--sp) 26%, #172120); }
html[data-theme="dark"] body.v .n-kanal.k-formular { background: #3A3016; color: #F2CF7A; }
html[data-theme="dark"] body.v .hinweis.warnung { background: #33280F; border-left-color: #E0A030; }
html[data-theme="dark"] body.v .zaehler { background: #C0392B; }
html[data-theme="dark"] body.v .menue-liste { box-shadow: 0 10px 30px rgba(0,0,0,.5); }
html[data-theme="dark"] body.v input, html[data-theme="dark"] body.v select, html[data-theme="dark"] body.v textarea { border-color: #4C5E59; }
html[data-theme="dark"] body.v .knopf.zweit { background: transparent; }
html[data-theme="light"] body.v { color-scheme: light; }
/* Anhang-Vorschau */
.anhang-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.anhang-kopf h1 { flex: 1 1 260px; margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.anhang-kopf .knopf { width: auto; margin: 0; }
.anhang-bild img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px; background: #fff; }
iframe.anhang-pdf { display: block; width: 100%; height: 80vh; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
pre.anhang-text { white-space: pre-wrap; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; font-size: .9rem; overflow-wrap: anywhere; }
.menue-liste a[aria-current]::before { content: "✓ "; }
/* Nachrichten: Vorschau, Anhang-Symbol, Entwürfe, eingebettete Ansicht */
.kopf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kopf-aktionen .knopf { width: auto; margin: 0; }
.layout-wahl a { padding: 6px 14px; }
.klammer { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 4px; fill: none; stroke: var(--marke-dunkel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.n-kanal.k-entwurf { background: var(--fehler-hell); color: var(--fehler); }
.n-geteilt { display: grid; grid-template-columns: minmax(320px, 2fr) 3fr; gap: 18px; align-items: start; }
.n-geteilt .nachrichtenliste { max-height: calc(100vh - 250px); overflow-y: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.n-geteilt .nachrichtenliste li a { padding: 10px 12px; }
.n-geteilt .nachrichtenliste li.gewaehlt a { background: var(--marke-hell); box-shadow: inset 4px 0 0 var(--marke); }
.n-vorschau-bereich { position: sticky; top: 12px; }
.n-vorschau-rahmen { display: block; width: 100%; height: calc(100vh - 250px); min-height: 480px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--grund); }
.n-vorschau-leer { display: flex; align-items: center; justify-content: center; height: calc(100vh - 250px); min-height: 480px; margin: 0; border: 1px dashed var(--linie); border-radius: var(--radius); color: var(--text-2); }
.n-vorschau-leer[hidden], .n-vorschau-rahmen[hidden] { display: none; }
@media (max-width: 999px) {
  .n-geteilt { display: block; }
  .n-geteilt .nachrichtenliste { max-height: none; border: 0; background: none; }
  .n-vorschau-bereich { display: none; }
}
main.eingebettet { padding: 12px 18px 40px; max-width: none; }
main.eingebettet h1 { font-size: 1.35rem; margin-top: 0; }
.vorschau-leiste { margin: 0 0 6px; font-size: .88rem; text-align: right; }
.entwurf-weg { margin: -6px 0 20px; }
/* unsichtbare Hilfstexte dürfen aus Scroll-Listen nicht herausragen (iPad: leerer Bereich unter der Seite) */
.nachrichtenliste, .nachrichtenliste li { position: relative; }
.sr { clip-path: inset(50%); top: 0; left: 0; }
/* Löschen: Papierkorb-Knopf (Maus) bzw. Wischen nach links (Touch) */
.nachrichtenliste li { overflow: hidden; transition: height .22s ease; }
.nachrichtenliste li.weg { opacity: .4; }
.nachrichtenliste li a { position: relative; z-index: 1; background: var(--grund); transition: transform .2s ease, background .15s; }
.n-geteilt .nachrichtenliste li a { background: var(--flaeche); }
.nachrichtenliste li a:hover { background: var(--marke-hell); }
.n-wisch { margin: 0; }
.n-wisch-knopf { border: 0; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; color: #fff; background: #B3261E; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.n-wisch-knopf.zurueckholen { background: var(--knopf); }
.muell { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .n-wisch { position: absolute; right: 10px; bottom: 10px; z-index: 2; opacity: 0; transition: opacity .15s; }
  .nachrichtenliste li:hover .n-wisch, .n-wisch:focus-within { opacity: 1; }
  .n-wisch-knopf { flex-direction: row; padding: 6px 12px; border-radius: 8px; }
}
@media (hover: none), (pointer: coarse) {
  .n-wisch { position: absolute; top: 0; right: 0; bottom: 0; width: 96px; z-index: 0; }
  .n-wisch-knopf { width: 100%; height: 100%; }
}
.knopf.loeschen { background: transparent; color: #B3261E; border: 2px solid #B3261E; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 10px 0 0; }
.knopf.loeschen:hover { background: #B3261E; color: #fff; }
.loeschen-form { margin: 0; }
.live-hinweis { display: flex; align-items: center; gap: 14px; }
.live-hinweis .rueckgaengig { border: 0; background: rgba(255,255,255,.18); color: #fff; font: inherit; font-weight: 600; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.v .menue-person { margin-left: auto; }
/* Terminarten */
.sp-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--sp); margin-right: 8px; vertical-align: 1px; }
tr.inaktiv td { color: var(--text-2); }
fieldset.wahl label.gesperrt { color: var(--text-2); }
.preis-tabelle input[type=text], .preis-tabelle input[type=number] { width: 7em; min-height: 40px; margin: 0; padding: 6px 10px; }
.preis-tabelle td input[name=bezeichnung] { width: 12em; }
.preis-tabelle form { margin: 0; }
/* Kontakt-Merkmale */
.merkmal { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 6px; margin-left: 4px; vertical-align: middle; }
.merkmal.m-kunde { background: var(--marke-hell); color: var(--marke-dunkel); }
.merkmal.m-partner { background: color-mix(in srgb, #2a78d6 18%, var(--flaeche)); color: #1f5fae; }
.merkmal.m-lieferant { background: color-mix(in srgb, #eda100 22%, var(--flaeche)); color: #7a5200; }
html[data-theme="dark"] body.v .merkmal.m-partner { color: #8dbcf2; } html[data-theme="dark"] body.v .merkmal.m-lieferant { color: #f2cf7a; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.v .merkmal.m-partner { color: #8dbcf2; } html:not([data-theme="light"]) body.v .merkmal.m-lieferant { color: #f2cf7a; } }
fieldset.merkmale label { display: inline-flex; margin-right: 18px; }
/* Rollen & Rechte */
.rolle-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 16px; max-width: 860px; }
.rolle-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 8px; }
.rolle-kopf input[type=text] { max-width: 280px; font-weight: 600; margin: 0; }
.rolle-kopf .check { margin: 0; }
.recht-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding: 6px 0; border-top: 1px solid var(--linie); }
.stufen { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; font-size: .92rem; }
.stufen label { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.rolle-karte .knopfreihe { margin: 10px 0 0; }
/* Eigene Termine, privat, Terminliste, Team */
.sp-eigen   { --sp: #7b61c9; --sp-hell: #EFEBFA; }
.sp-geburtstag { --sp: #d9578c; --sp-hell: #FBE7EF; }
.sp-privat  { --sp: #7A7F7D; --sp-hell: #ECEEED; }
.kal-block.sp-privat { background: repeating-linear-gradient(135deg, rgba(122,127,125,.12), rgba(122,127,125,.12) 6px, transparent 6px, transparent 12px); color: var(--text-2); cursor: default; }
.privat-marke { background: #ECEEED; color: #4A5552; }
.termin-tag h2 { font-size: 1.05rem; margin: 22px 0 8px; color: var(--marke-dunkel); }
.termin-liste { list-style: none; margin: 0; padding: 0; }
.termin-liste li > a, .termin-liste li > div { display: grid; grid-template-columns: 120px 1fr auto auto; gap: 4px 14px; align-items: baseline; padding: 9px 12px; margin-bottom: 6px;
  border-left: 4px solid var(--sp, var(--linie)); border-radius: 6px; background: var(--sp-hell, var(--marke-hell)); color: var(--text); text-decoration: none; }
.termin-liste li.erledigt > a { opacity: .6; }
.termin-liste .tl-zeit { font-weight: 600; font-variant-numeric: tabular-nums; }
.termin-liste .tl-text small { display: block; color: var(--text-2); }
.termin-liste .tl-person { font-size: .9rem; font-weight: 500; }
.termin-liste .tl-art { font-size: .8rem; color: var(--text-2); }
@media (max-width: 640px) { .termin-liste li > a, .termin-liste li > div { grid-template-columns: 1fr; } }
.team-titel { font-size: 1rem; margin: 16px 0 6px; }
fieldset.sichtbarkeit label { align-items: flex-start; }
.team-aufgaben { list-style: none; margin: 0 0 10px; padding: 0; }
.team-aufgaben li { padding: 7px 0; border-bottom: 1px solid var(--linie); }
.team-aufgaben li a { color: var(--text); text-decoration: none; }
.team-aufgaben li small { display: block; color: var(--text-2); font-size: .85rem; }
.team-aufgaben li.ueberfaellig small { color: #B3261E; }
.merkmal.geerbt { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.firma-zeile a { font-weight: 500; }
.kartei-aufgaben li.erledigt a { color: var(--text-2); text-decoration: line-through; }
.verlauf-person { font-weight: 600; }
.kartei-aufgaben + .knopf { margin-bottom: 18px; }
/* Einsatz vor Ort */
.enter-ziel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.einsatz-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--linie); margin: 8px 0 14px; }
.einsatz-leiste.laeuft { border-color: var(--marke); background: var(--marke-hell); }
.einsatz-leiste.laeuft strong::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2E9E5B; margin-right: 8px; vertical-align: 1px; animation: puls 1.6s infinite; }
@keyframes puls { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .einsatz-leiste.laeuft strong::before { animation: none; } }
.mehrzeit .knopf { margin-left: 8px; }
ol.vermerke { list-style: none; margin: 0 0 10px; padding: 0; }
ol.vermerke li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.v-zeit { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.v-text { white-space: pre-wrap; }
.v-weg { border: 0; background: none; color: var(--text-2); font-size: 1.2rem; cursor: pointer; padding: 0 6px; }
.vermerk-neu { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-bottom: 8px; }
.artikel-neu { display: grid; grid-template-columns: 1fr 110px auto; gap: 10px; align-items: end; margin: 6px 0 14px; }
.artikel-neu .feld { margin: 0; }
@media (max-width: 640px) { .vermerk-neu, .artikel-neu { grid-template-columns: 1fr; } }
details.kunde-block { margin: 18px 0; }
details.kunde-block > summary { cursor: pointer; list-style: none; }
details.kunde-block > summary h2 { display: inline; margin-right: 6px; }
details.kunde-block > summary::before { content: "▸ "; color: var(--text-2); }
details.kunde-block[open] > summary::before { content: "▾ "; }
.team-aufgaben li.erledigt a { color: var(--text-2); text-decoration: line-through; }
.knopfzelle { white-space: nowrap; } .knopfzelle form + form { margin-left: 6px; }
td.warn-zelle { color: var(--fehler); font-weight: 600; }
td.leise-zelle small { color: var(--text-2); }
.zahl-marke { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 10px; background: var(--fehler); color: #fff; font-size: .8rem; text-align: center; vertical-align: middle; }
fieldset.paket-wahl { border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px 6px; margin: 0 0 18px; }
fieldset.paket-wahl legend { font-weight: 600; padding: 0 6px; }
.sp-extern { --sp: #8A8F8D; --sp-hell: #F1F2F1; }
.kal-block.sp-extern { background: repeating-linear-gradient(135deg, rgba(138,143,141,.10), rgba(138,143,141,.10) 4px, transparent 4px, transparent 9px); }
.abo-link { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }
.fehlertext { color: var(--fehler); }

/* Passwort anzeigen */
.pw-huelle { position: relative; display: block; }
.pw-huelle input { width: 100%; padding-right: 6.5rem; box-sizing: border-box; }
.pw-zeigen { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--marke-dunkel); font: inherit; font-size: .9rem; padding: .3rem .5rem; cursor: pointer; border-radius: .3rem; }
.pw-zeigen:focus-visible { outline: 2px solid currentColor; }

/* Geburtstag: Uhrzeit/Auswahl im Satz */
.wahl .im-satz { display: inline-block; width: auto; min-width: 0; padding: .25rem .5rem; margin: 0 .25rem; }

/* Bestellungen: Status */
.merkmal.bs-bestellt { background: color-mix(in srgb, #eda100 22%, var(--flaeche)); color: #7a5200; }
.merkmal.bs-versandt { background: color-mix(in srgb, #2f7fd6 18%, var(--flaeche)); color: #1d4f8a; }
.merkmal.bs-eingetroffen { background: color-mix(in srgb, #2e9d5b 22%, var(--flaeche)); color: #1b6b3c; }
.merkmal.bs-abgeholt, .merkmal.bs-storniert { background: var(--flaeche); color: var(--leise, #666); }
html[data-theme="dark"] body.v .merkmal.bs-bestellt { color: #f2cf7a; } html[data-theme="dark"] body.v .merkmal.bs-versandt { color: #8dbcf2; } html[data-theme="dark"] body.v .merkmal.bs-eingetroffen { color: #8fdcae; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.v .merkmal.bs-bestellt { color: #f2cf7a; } html:not([data-theme="light"]) body.v .merkmal.bs-versandt { color: #8dbcf2; } html:not([data-theme="light"]) body.v .merkmal.bs-eingetroffen { color: #8fdcae; } }
.liste tr.ueberfaellig td:first-child { box-shadow: inset 4px 0 0 var(--fehler); }
.v .marke-v .logo-v { display: block; height: 32px; width: auto; max-width: 180px; object-fit: contain; }
.firma-liste .modul-schalter { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.firma-liste .modul-schalter label { font-size: .9rem; }
.firma-logo-vorschau { max-height: 64px; max-width: 240px; display: block; margin: 8px 0; background: #fff; padding: 6px; border: 1px solid var(--linie); border-radius: 8px; }
details.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 16px; margin: 0 0 10px; }
details.karte > summary { cursor: pointer; padding: 4px 0; }
details.karte[open] > summary { margin-bottom: 8px; }
input[type=color] { width: 64px; height: 48px; padding: 4px; border: 2px solid var(--linie); border-radius: 10px; background: var(--feld); }
.v form.formular.breit-form { max-width: 980px; }
.v .breit-form .zeile.zwei, .v .breit-form .zeile.drei { gap: 14px 20px; }
.v .breit-form h3 { margin-top: 0; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; max-width: 1200px; }
@media (max-width: 1000px) { .zwei-spalten { grid-template-columns: 1fr; } }
.zeile.vier { grid-template-columns: repeat(4, 1fr); } @media (max-width: 760px) { .zeile.vier { grid-template-columns: 1fr 1fr; } }
.kunde-gewaehlt[hidden], [hidden] { display: none !important; }
/* Meldungen unten fest */
.meldungen { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000; width: min(720px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; }
.meldungen .toast { display: flex; align-items: flex-start; gap: 12px; margin: 0; box-shadow: 0 6px 24px rgba(0,0,0,.18); background: var(--ok-hell); transition: opacity .3s; }
.meldungen .toast.fehler { background: var(--fehler-hell); }
.meldungen .toast > span { flex: 1; }
.meldungen .toast.weg { opacity: 0; }
.meldung-zu { border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: inherit; padding: 0 4px; }