/* Energie-CRM – „Leitwarte": Papier, Tinte, Bernstein (Strom) und Flammenblau (Gas). Kein CDN, läuft offline. */
:root {
  --papier: #f4f1ea; --karte: #fffdf8; --linie: #e2dccd; --linie-stark: #cfc7b3;
  --tinte: #17211c; --leise: #6b7268; --leiste: #14201a; --leiste-text: #b9c4bb;
  --strom: #e8a013; --strom-hell: #fdf0d2; --gas: #2c6be0; --gas-hell: #e1ebfd;
  --rot: #c8402f; --rot-hell: #fbe4df; --gelb: #d99a0b; --gelb-hell: #fcf0cf; --gruen: #2f8a57; --gruen-hell: #dff1e6;
  --radius: 10px; --schatten: 0 1px 0 rgba(23,33,28,.04), 0 8px 24px -18px rgba(23,33,28,.35);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; font-family: var(--sans); color: var(--tinte); background: var(--papier); display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; line-height: 1.45; }
a { color: inherit; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--strom); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.12rem; margin-bottom: .8rem; display: flex; align-items: baseline; gap: .5rem; } h2 small { font: 400 .85rem var(--sans); color: var(--leise); }
h3 { font-size: .95rem; margin: 1.2rem 0 .5rem; }
small { color: var(--leise); } .leise { color: var(--leise); } .mono { font-family: var(--mono); font-size: .88em; letter-spacing: -.01em; }
.warn { color: var(--rot); font-weight: 600; font-size: .85em; } .umbruch { white-space: pre-wrap; } .r { text-align: right; font-variant-numeric: tabular-nums; } .stark { font-weight: 600; }
.blass { opacity: .6; }

/* ---- Seitenleiste ---- */
.leiste { background: var(--leiste); color: var(--leiste-text); padding: 1.3rem .9rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  background-image: radial-gradient(circle at 0 0, rgba(232,160,19,.16), transparent 42%), radial-gradient(circle at 100% 100%, rgba(44,107,224,.18), transparent 45%); }
.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; font: 600 1.1rem var(--serif); padding: 0 .5rem 1.4rem; }
.marke small { display: block; font: 400 .7rem var(--sans); color: var(--leiste-text); letter-spacing: .08em; text-transform: uppercase; }
.marke i { width: 30px; height: 30px; border-radius: 8px; flex: none; background: linear-gradient(135deg, var(--strom) 0 50%, var(--gas) 50% 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.leiste nav { display: flex; flex-direction: column; gap: 2px; }
.leiste nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 8px; text-decoration: none; color: var(--leiste-text); font-size: .95rem; }
.leiste nav a svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.leiste nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.leiste nav a.aktiv { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--strom); }
.zaehlmarke-ruhig { background: var(--gas) !important; }
.zaehlmarke { margin-left: auto; background: var(--rot); color: #fff; font-size: .72rem; border-radius: 99px; padding: .05rem .45rem; }
.abmelden { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: .8rem .6rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.abmelden .link { color: var(--leiste-text); }

/* ---- Hauptbereich ---- */
main { padding: 1.6rem 2rem 4rem; min-width: 0; max-width: 1500px; }
.kopf { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.kopf h1 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.suche input { width: 330px; max-width: 100%; border-radius: 99px; padding-left: 1rem; background: var(--karte); }
.kopf-aktion { display: flex; gap: .5rem; }
.pfad { color: var(--leise); font-size: .88rem; margin: -.6rem 0 1rem; } .untertitel { color: var(--leise); margin: -.5rem 0 1.2rem; }
.meldung { background: var(--gruen-hell); border: 1px solid #b7dcc5; border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; overflow-wrap: anywhere; }
.meldung-fehler { background: var(--rot-hell); border-color: #efbdb4; } .hinweis { background: var(--gelb-hell); padding: .7rem 1rem; border-radius: 8px; }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.15rem 1.25rem; margin-bottom: 1.1rem; box-shadow: var(--schatten); }
.karte.schmal { max-width: 460px; } .karte.start { border-left: 4px solid var(--strom); }
.kurzstatus { margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linie); font-size: .92rem; }
/* Verwaltung: seltene/administrative Kundenakte-Abschnitte (Rahmenverträge, Festlegungen, Werbe-Einwilligung, Archiv) zugeklappt – Karten bleiben wie gehabt */
.verwaltung { margin: 1.3rem 0; }
.verwaltung > summary { cursor: pointer; font: 600 1.1rem var(--serif); padding: .4rem 0; }
.verwaltung > summary small { display: block; font: 400 .78rem var(--sans); font-weight: 400; color: var(--leise); margin-top: .15rem; }
.verwaltung[open] > summary { margin-bottom: .9rem; }
.karte-tabelle { padding: 0; overflow-x: auto; } .karte-tabelle h2 { padding: 1.1rem 1.25rem 0; }
.mehr { margin-left: auto; font: 500 .82rem var(--sans); color: var(--leise); }
.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; } .spalten-breit-schmal { grid-template-columns: 1.7fr 1fr; }
.spalten > * { min-width: 0; }

/* ---- Kacheln / Infostand ---- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .1rem; text-decoration: none; box-shadow: var(--schatten); border-top: 3px solid var(--linie-stark); transition: transform .12s; }
a.kachel:hover { transform: translateY(-2px); border-color: var(--linie-stark); }
.kachel-wert { font: 600 1.9rem var(--serif); font-variant-numeric: tabular-nums; line-height: 1.15; } .kachel-label { font-weight: 600; font-size: .9rem; } .kachel-sub { color: var(--leise); font-size: .8rem; }
.ton-rot { border-top-color: var(--rot); } .ton-rot .kachel-wert { color: var(--rot); } .ton-gelb { border-top-color: var(--gelb); } .ton-ok { border-top-color: var(--gruen); }
.ton-text-rot { color: var(--rot); } .ton-text-gelb { color: #9a6c00; }
.infostand { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--tinte); color: #e8ece7; border-radius: var(--radius); margin-bottom: 1.1rem; overflow: hidden; }
.infostand > div { padding: .9rem 1.1rem; border-right: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; }
.infostand span { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #9fb0a4; } .infostand b { font: 600 1.35rem var(--serif); font-variant-numeric: tabular-nums; } .infostand small { color: #9fb0a4; font-size: .78rem; min-height: 1.1em; }

/* ---- Marken ---- */
.sparte { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .45rem; border-radius: 4px; white-space: nowrap; }
.sparte-strom { background: var(--strom-hell); color: #8a5a00; box-shadow: inset 2px 0 0 var(--strom); } .sparte-gas { background: var(--gas-hell); color: #17449b; box-shadow: inset 2px 0 0 var(--gas); }
.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; vertical-align: baseline; }
.ampel-rot { background: var(--rot); box-shadow: 0 0 0 3px var(--rot-hell); } .ampel-gelb { background: var(--gelb); box-shadow: 0 0 0 3px var(--gelb-hell); } .ampel-gruen { background: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-hell); }
.ampel-grau { background: #fff; border: 2px dashed #9aa097; } .ampel-aus { background: var(--linie-stark); }
.chip { display: inline-block; font-size: .75rem; padding: .12rem .55rem; border-radius: 99px; background: #ece7da; white-space: nowrap; }
.chip-in_belieferung, .chip-stufe-gewonnen, .chip-ton-gruen { background: var(--gruen-hell); color: #1d6a40; } .chip-bestaetigt { background: var(--gas-hell); color: #17449b; }
.chip-beantragt, .chip-ton-gelb { background: var(--gelb-hell); color: #855d00; } .chip-storniert, .chip-stufe-verloren, .chip-ton-rot { background: var(--rot-hell); color: #952c1f; } .chip-filter a { text-decoration: none; margin-left: .3rem; }
.legende { display: flex; gap: 1.2rem; flex-wrap: wrap; color: var(--leise); font-size: .8rem; } .legende span { display: inline-flex; align-items: center; gap: .45rem; }
.quad { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .soll { background: var(--linie-stark); } .ist { background: var(--gruen); }

/* ---- Tabellen / Listen ---- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); font-weight: 600; padding: .8rem .9rem .55rem; border-bottom: 1px solid var(--linie); white-space: nowrap; } th.r { text-align: right; }
td { padding: .6rem .9rem; border-bottom: 1px solid var(--linie); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #faf6ec; }
.eng { width: 1%; padding-right: 0; } table.kompakt td { padding: .35rem .5rem .35rem 0; border-bottom: 1px dashed var(--linie); font-size: .87rem; }
.tabellen-fuss { padding: .9rem 1.25rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--linie); background: #faf6ec; border-radius: 0 0 var(--radius) var(--radius); }
.liste { list-style: none; margin: 0; padding: 0; } .liste li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px dashed var(--linie); } .liste li:last-child { border: 0; }
.liste li > div { flex: 1; min-width: 0; } .liste small { display: block; } .liste .zahl { font: 600 1.1rem var(--serif); min-width: 2.2rem; text-align: right; color: var(--rot); } .liste-luecken .zahl { color: var(--gelb); }
.marker { width: 10px; height: 10px; margin-top: .4rem; border-radius: 2px; flex: none; } .marker-deal { background: var(--gas); transform: rotate(45deg); }
.haken button { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--linie-stark); background: #fff; cursor: pointer; padding: 0; margin-top: .1rem; } .haken button:hover { border-color: var(--gruen); background: var(--gruen-hell); }
.verlauf { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--linie); } .verlauf li { position: relative; padding: 0 0 .9rem .9rem; font-size: .9rem; }
.verlauf li::before { content: ""; position: absolute; left: -1.33rem; top: .35rem; width: 9px; height: 9px; border-radius: 50%; background: var(--linie-stark); border: 2px solid var(--karte); }
.verlauf .typ-anruf::before, .verlauf .typ-termin::before { background: var(--strom); } .verlauf .typ-mail::before { background: var(--gas); } .verlauf .typ-notiz::before { background: var(--tinte); }
.verlauf time { font-size: .74rem; color: var(--leise); display: block; } .verlauf small { display: block; }
.daten { display: grid; grid-template-columns: 110px 1fr; gap: .4rem .8rem; margin: 0; font-size: .92rem; } .daten dt { color: var(--leise); min-width: 0; hyphens: auto; overflow-wrap: anywhere; } .daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.objekt { border-top: 1px solid var(--linie); padding-top: .8rem; margin-top: .8rem; } .objekt:first-of-type { border: 0; margin-top: 0; padding-top: 0; } .objekt h3 { margin: 0 0 .4rem; } .objekt h3 small { font: 400 .8rem var(--sans); }
.leer { text-align: center; color: var(--leise); padding: 1.4rem .5rem; } .leer p { margin: 0 0 .8rem; }
.fuss-aktion { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--linie); font-size: .88rem; }

/* ---- Formulare ---- */
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; padding: .5rem .65rem; border: 1px solid var(--linie-stark); border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--strom); outline-offset: 1px; border-color: var(--strom); } textarea { resize: vertical; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem 1.1rem; } .feld-breit { grid-column: 1 / -1; } h3.feld-breit { margin: .6rem 0 -.2rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.feld { display: flex; flex-direction: column; gap: .25rem; } .feld > span { font-size: .8rem; font-weight: 600; } .feld em { color: var(--rot); font-style: normal; } .feld small { font-size: .76rem; }
.haekchen { flex-direction: row; align-items: center; gap: .5rem; } .haekchen span { font-weight: 400; font-size: .9rem; }
.stapel { display: flex; flex-direction: column; gap: .6rem; } .zeile { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; justify-content: space-between; } .zeile-breit input[name=titel] { flex: 1 1 260px; } .zeile-breit input, .zeile-breit select { width: auto; }
.inline { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; } .inline input, .inline select { width: auto; }
.knopfzeile { display: flex; gap: .6rem; } .knopf { display: inline-flex; align-items: center; gap: .4rem; padding: .48rem .95rem; border-radius: 8px; border: 1px solid var(--linie-stark); background: var(--karte); text-decoration: none; cursor: pointer; font-weight: 500; font-size: .9rem; white-space: nowrap; }
.knopf:hover { border-color: var(--tinte); } .knopf-haupt { background: var(--tinte); color: #fff; border-color: var(--tinte); } .knopf-haupt:hover { background: #24342c; } .knopf[disabled] { opacity: .4; cursor: default; }
.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
.filter { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; } .filter input[type=search] { width: 300px; } .filter select { width: auto; } .filter-rechts { margin-left: auto; color: var(--leise); font-size: .85rem; }
.reiter { display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; } .reiter a { padding: .4rem .85rem; border-radius: 99px; text-decoration: none; font-size: .88rem; border: 1px solid transparent; color: var(--leise); } .reiter a:hover { border-color: var(--linie-stark); } .reiter a.aktiv { background: var(--tinte); color: #fff; }
.umschalter { display: flex; border: 1px solid var(--linie-stark); border-radius: 8px; overflow: hidden; } .umschalter label { flex: 1; text-align: center; cursor: pointer; } .umschalter input { position: absolute; opacity: 0; }
.umschalter span { display: block; padding: .4rem; font-size: .85rem; } .umschalter input:checked + span { background: var(--tinte); color: #fff; } .umschalter input:focus-visible + span { outline: 2px solid var(--strom); outline-offset: -2px; }
/* Dokumentenvorschau: das Fenster, in dem ein PDF/Bild direkt in der Seite steht (routen/dokumente.js, /dokumente/<id>/ansehen).
   Weiß hinterlegt, weil ein PDF-Blatt weiß ist – auf dunklem Grund sähe der Rand aus wie ein Fehler. */
.vorschau { display: block; width: 100%; height: 75vh; min-height: 22rem; margin-top: .8rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); background: #fff; }
@media (max-width: 600px) { .vorschau { height: 60vh; min-height: 18rem; } }

details summary { cursor: pointer; color: var(--leise); font-size: .88rem; margin: .6rem 0; }
.blaettern, .monatswahl { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 0 0 1.1rem; } .monatswahl b { font: 600 1.3rem var(--serif); min-width: 9rem; text-align: center; }

/* ---- Diagramme ---- */
.balken { display: grid; grid-template-columns: repeat(12, 1fr); gap: .4rem; height: 170px; align-items: end; }
.balken a { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; text-decoration: none; gap: .25rem; } .balken b { font-size: .78rem; font-variant-numeric: tabular-nums; }
.balken i { width: 100%; min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--strom), #c98405); } .balken a:nth-child(-n+3) i { background: linear-gradient(#dd5a48, var(--rot)); } .balken a:hover i { filter: brightness(1.1); } .balken span { font-size: .72rem; color: var(--leise); }
.doppelbalken { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; height: 130px; } .doppelbalken a { display: flex; flex-direction: column; text-decoration: none; align-items: center; gap: .25rem; } .doppelbalken a > div { flex: 1; display: flex; gap: 3px; align-items: flex-end; width: 100%; }
.doppelbalken i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; } .doppelbalken span { font-size: .72rem; color: var(--leise); }
.trichter { display: flex; flex-direction: column; gap: .55rem; } .trichter a { display: grid; grid-template-columns: 140px 1fr auto; gap: .8rem; align-items: center; text-decoration: none; font-size: .88rem; }
.trichter i { height: 12px; background: #ece7da; border-radius: 99px; overflow: hidden; } .trichter u { display: block; height: 100%; background: linear-gradient(90deg, var(--gas), #5b8ff0); border-radius: 99px; } .trichter b { font-variant-numeric: tabular-nums; font-weight: 600; }
.frist { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.1rem; border: 1px solid var(--linie); background: var(--karte); } .frist > div { flex: 1; } .frist b { font: 600 1.15rem var(--serif); display: block; }
.frist .ampel { width: 16px; height: 16px; } .frist-rot { background: var(--rot-hell); border-color: #efbdb4; } .frist-gelb { background: var(--gelb-hell); border-color: #ecd28d; } .frist-gruen { background: var(--gruen-hell); border-color: #b7dcc5; }

/* ---- Pipeline: am 27.09.2026 mit der Seite entfallen (src/routen/abgeschaltet.js) ---- */

/* ---- Login ---- */
body.solo { display: grid; grid-template-columns: 1fr; place-items: center; background: var(--leiste); background-image: radial-gradient(circle at 15% 10%, rgba(232,160,19,.25), transparent 40%), radial-gradient(circle at 85% 90%, rgba(44,107,224,.3), transparent 45%); }
.solo-karte { background: var(--karte); padding: 2rem; border-radius: 14px; width: min(400px, 92vw); } .solo-karte .marke { color: var(--tinte); padding: 0 0 1.2rem; } .solo-karte .marke small { color: var(--leise); } .solo-karte h1 { margin-bottom: 1rem; font-size: 1.4rem; }

@media (max-width: 1000px) {
  body { align-content: start; }   /* 26.09.2026: auf kurzen Seiten nicht den Kopf auf Bildschirmhöhe strecken */
  body { grid-template-columns: 1fr; } .leiste { position: static; height: auto; padding: .7rem; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem; }
  .marke { padding: 0 .4rem; } .marke small { display: none; } .leiste nav { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; } .leiste nav a span { white-space: nowrap; } .leiste nav a.aktiv { box-shadow: inset 0 -3px 0 var(--strom); }
  .abmelden { margin: 0 0 0 auto; border: 0; padding: 0; gap: .6rem; } main { padding: 1rem; } .spalten, .spalten-breit-schmal { grid-template-columns: 1fr; } .suche, .suche input { width: 100%; }
}
.chip-versorger_ausfall { background: var(--rot-hell); color: #952c1f; }

/* ---- Handy (≤ 600px, auch als Home-Bildschirm-App): alles muss mit dem Daumen bedienbar sein ---- */
@media (max-width: 600px) {
  html { font-size: 15px; }
  main { padding: .9rem .8rem 3rem; }
  /* Navigation: umbrechende Leiste mit Icon + Text statt abgeschnittener Scrollreihe */
  .leiste { padding: .6rem .6rem .5rem; gap: .3rem; }
  .marke { font-size: 1rem; min-height: 40px; }
  .leiste nav { flex-wrap: wrap; overflow: visible; gap: .25rem; }
  .leiste nav a { min-height: 40px; padding: .3rem .55rem; font-size: .82rem; gap: .4rem; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
  .leiste nav a svg { width: 16px; height: 16px; }
  .leiste nav a.aktiv { box-shadow: none; border-color: var(--strom); background: rgba(232,160,19,.16); }
  .zaehlmarke { margin-left: .1rem; }
  .abmelden span { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .abmelden .link, .haken button, .knopf, button:not(.link), .reiter a, .umschalter span, .blaettern a { min-height: 40px; }
  .abmelden .link, .knopf, .reiter a, button.link { display: inline-flex; align-items: center; } button.link { min-height: 40px; }
  /* Aufklapper sind Tippflächen wie Knöpfe (Kritiker-Runde 4: „8 Zahlungen", „8 geprüft", „Belegt durch …" in der Vertragskarte waren 18–19 px hoch – erst
     darin steht, welcher Monat um wie viel fehlt). min-height statt display-Wechsel: das Aufklapp-Dreieck bleibt; eigene Abstände (.verwaltung …) gehen vor */
  details > summary { min-height: 40px; box-sizing: border-box; padding-top: .55rem; padding-bottom: .55rem; }
  /* Kopfzeile: Titel, Suche und Aktionen untereinander in voller Breite */
  .kopf { gap: .6rem; margin-bottom: .9rem; }
  .kopf h1 { flex-basis: 100%; font-size: 1.45rem; } .suche { flex: 1 1 100%; } .kopf-aktion { flex: 1 1 100%; flex-wrap: wrap; }
  .kopf-aktion .knopf { flex: 1 1 auto; justify-content: center; }
  /* Kacheln und Infostand untereinander */
  .infostand, .spalten, .spalten-breit-schmal, .raster { grid-template-columns: 1fr; } .kacheln { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
  .kachel { padding: .8rem .85rem; min-width: 0; } .kachel-label, .kachel-sub { overflow-wrap: anywhere; }
  .infostand > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); } .infostand > div:last-child { border-bottom: 0; }
  .infostand b { font-size: 1.25rem; } .kachel-wert { font-size: 1.6rem; }
  /* Tabellen: waagerecht scrollbar statt abgeschnitten (Tabelle als Block mit eigener Scrollachse) */
  table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
    /* Scroll-Schatten ohne JavaScript: erscheinen nur an der Seite, an der noch Spalten verborgen sind (background-attachment: local) */
    background: linear-gradient(to right, var(--karte) 30%, rgba(255,253,248,0)), linear-gradient(to left, var(--karte) 30%, rgba(255,253,248,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(23,33,28,.2), transparent), radial-gradient(farthest-side at 100% 50%, rgba(23,33,28,.2), transparent) 100% 0;
    background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
  td { white-space: nowrap; } td .umbruch, td p { white-space: normal; }
  th, td { padding: .55rem .6rem; } th:first-child, td:first-child { padding-left: .8rem; } th:last-child, td:last-child { padding-right: .8rem; }
  .karte { padding: .9rem .85rem; } .karte-tabelle { padding: 0; } .karte-tabelle h2 { padding: .9rem .85rem 0; } .tabellen-fuss { padding: .8rem .85rem; }
  /* Formulare: Felder in voller Breite, Schrift ≥ 16px (sonst zoomt iOS beim Tippen) */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; min-height: 44px; }
  .zeile-breit input, .zeile-breit select, .inline input, .inline select, .filter input[type=search], .filter select, .suche input { width: 100%; }
  .zeile { flex-direction: column; align-items: stretch; } .zeile > *, .zeile-breit input[name=titel] { flex: 0 0 auto; width: 100%; } .inline { display: flex; flex-wrap: wrap; }
  .filter { flex-direction: column; align-items: stretch; } .filter-rechts { margin-left: 0; }
  .knopfzeile { flex-wrap: wrap; } .knopfzeile .knopf { flex: 1 1 auto; justify-content: center; }
  .daten { grid-template-columns: 96px 1fr; }
  /* Arbeitslisten: der Aktionsknopf rutscht in eine eigene Zeile unter den Eintrag */
  .liste li { flex-wrap: wrap; } .liste li > div { flex: 1 1 55%; } .liste li > .knopf { flex: 1 1 100%; justify-content: center; }
  .trichter a { grid-template-columns: 96px 1fr auto; gap: .5rem; }
  .frist { flex-wrap: wrap; padding: .9rem .85rem; gap: .7rem; } .frist > div { flex: 1 1 220px; } .frist > .knopf, .frist > form { flex: 1 1 100%; justify-content: center; }
  .balken { gap: .2rem; height: 130px; } .balken b { font-size: .66rem; } .balken span { font-size: .6rem; }
  .doppelbalken { gap: .35rem; }
  .solo-karte { padding: 1.4rem 1.2rem; }
  /* Abhak-Knöpfe bleiben klein, bekommen aber eine 40px-Tippfläche */
  .haken button { min-height: 0; position: relative; width: 24px; height: 24px; }
  .haken button::after { content: ""; position: absolute; inset: -8px; }
}
/* Knöpfe mit langem Text (Widerspruch „Es gilt … (Herkunft)"): umbrechen statt die Seite am Handy seitlich aufzuschieben – .knopf hält sonst eine Zeile
   (white-space: nowrap). Kritiker-Runde 5: /vertraege/:id war bei 390 px 601 px breit, samt ProviPrüfung-Karte */
.knopf-wahl { white-space: normal; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
/* Kunde löschen = ins CRM-Archiv (Philipp 23.09.2026) */
.knopf-gefahr { color: var(--rot); border-color: #efbdb4; } .knopf-gefahr:hover { background: var(--rot); border-color: var(--rot); color: #fff; }
.karte-loeschen { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .karte-loeschen > div { flex: 1 1 22rem; min-width: 0; }
.meldung-archiv { background: #efece4; border-color: var(--linie-stark); display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sammel-loeschen { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: .7rem; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Tippfeld vor Kundenlisten (data-suche) + Zuordnen direkt in der Vorschau */
.suche-auswahl { min-width: 11rem; max-width: 100%; } .zeile .suche-auswahl { flex: 1 1 11rem; }
.zuordnen-kasten { background: var(--gelb-hell); border: 1px solid #ecd28d; border-radius: 8px; padding: .7rem 1rem; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
/* Hausverwaltungen: Unterreiter Heizung/Hauslicht + Haken im Kundenformular */
.reiter-unter { margin-top: -.5rem; } .reiter-unter a { font-size: .82rem; padding: .3rem .75rem; }
.haken-gruppe { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; }
.haken-gruppe legend { font-size: .8rem; font-weight: 600; padding: 0; margin-bottom: .25rem; width: 100%; }
/* Kundensuche: Vorschläge beim Tippen */
.vorschlag-huelle { position: relative; display: inline-block; width: 300px; max-width: 100%; } .filter .vorschlag-huelle input[type=search] { width: 100%; }
.vorschlaege { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; list-style: none; margin: 0; padding: .3rem 0; background: var(--karte); border: 1px solid var(--linie-stark); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 22rem; overflow-y: auto; }
.vorschlaege li { padding: 0; } .vorschlaege li.leise { padding: .45rem .8rem; font-size: .85rem; }
.vorschlaege a { display: flex; flex-direction: column; padding: .45rem .8rem; text-decoration: none; color: inherit; } .vorschlaege a small { color: var(--leise); font-size: .76rem; }
.vorschlaege a:hover, .vorschlaege a.markiert { background: var(--gelb-hell); }
@media (max-width: 600px) { .vorschlag-huelle { width: 100%; } }
/* Heizung / Hauslicht (Hausverwaltungen) */
.chip-verwendung { background: #e4ecf5; color: #2b4a6b; }
.knopfzeile-umbruch { flex-wrap: wrap; margin-top: .8rem; }
table.einordnen .umschalter { min-width: 15rem; } table.einordnen small.vorschlag { display: block; margin-top: .25rem; }
@media (max-width: 600px) {
  /* Kritiker-Runde 24.09.: bei 375 px lief die Tabelle 28 px über (Umschalter abgeschnitten, Text klebte am Kartenrand).
     Jede Zeile wird ein Block, Text darf umbrechen, der Umschalter nimmt die volle Breite statt einer Mindestbreite. */
  table.einordnen, table.einordnen tbody { display: block; width: 100%; }
  table.einordnen thead { display: none; } table.einordnen tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
  table.einordnen td { display: block; border: 0; padding: .15rem .85rem; white-space: normal; overflow-wrap: anywhere; }
  table.einordnen .umschalter { min-width: 0; width: 100%; }
}
.hinweis-unter { margin: -.4rem 0 .8rem; font-size: .82rem; }

/* ==== Phase 5 „Dublette erkannt – bitte prüfen" (27.09.2026, Bauplan 12.4.6) ==== */
.dub-akte { border: 2px solid #e0b64a; border-left-width: 8px; background: #fffaf0; scroll-margin-top: 1rem; }
.dub-akte.dub-moeglich { border-color: #e7d9ad; }
.dub-block + .dub-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.dub-akte p, .dub-eintrag p { margin: .2rem 0; overflow-wrap: anywhere; }
.dub-kopf .chip, .dub-namen .chip { white-space: normal; }
.dub-grund { color: #7a5200; }
.dub-werbung { font-weight: 600; }   /* NB-1: Werbesperre nur bei einer Kartei – vor „Sind verschiedene Kunden" sichtbar */
.chip-dub-moeglich { background: #ece7da; color: #5a4a2a; }
.chip-dublette { text-decoration: none; font-weight: 600; margin-left: .2rem; }
/* Kritik (12.4.6): „Prüfen und zusammenführen" und „Sind verschiedene Kunden" bewirken das Gegenteil – 24 px Abstand in BEIDE Richtungen,
   auch nebeneinander (Tablet, Handy quer), nicht nur untereinander */
.dub-knoepfe { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: .6rem; }
.dub-knoepfe form { margin: 0; }
.dub-knoepfe .knopf { min-height: 44px; }
.dub-knoepfe .dub-drei { margin: 0; font-size: .85rem; }
.dub-eintrag { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between; }
.dub-eintrag > div:first-child { flex: 1 1 18rem; min-width: 0; overflow-wrap: anywhere; }
.dub-eintrag .dub-kartei { display: block; }
.dub-gesamt { margin: 0 0 .8rem; }
@media (max-width: 600px) {
  .dub-knoepfe > *, .dub-knoepfe .knopf { flex: 1 1 100%; width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .dub-akte { border-left-width: 5px; }
}
/* „Neuer Kunde" aus einer Vorversorger-Rechnung (24.09.2026): Upload-Karte, vorgeschlagene Felder farbig, Block „Zähler & bisheriger Vertrag" */
.rechnung-upload { border-left: 4px solid var(--strom); }
.rechnung-upload > p.leise { margin: .2rem 0 .4rem; }
.datei-knopf { display: inline-flex; align-items: center; cursor: pointer; margin: .3rem 0 .6rem; }
/* Das hidden-Attribut gilt IMMER – auch an Elementen mit eigener display-Regel (.knopf, .datei-knopf). Sonst stand „Dokument wählen …"
   ohne JavaScript sichtbar da, lud aber nie hoch (Kritiker-Runde 26.09.2026); crm.js blendet es ein, sobald das Hochladen wirklich geht. */
[hidden] { display: none !important; }
.datei-knopf:focus-within { outline: 2px solid var(--tinte); outline-offset: 2px; }
.meldung-hinweis { background: var(--gelb-hell); border-color: #ecd9a4; }
/* so spezifisch wie die allgemeine Feldregel oben (input:not(…):not(…)) – sonst blieben Textfelder weiß (Handy-Durchlauf 24.09.2026) */
input:not([type=checkbox]):not([type=radio]).aus-rechnung, select.aus-rechnung, textarea.aus-rechnung { background: var(--strom-hell); border-color: var(--strom); }
.rechnung-block { border: 1px solid var(--linie); border-radius: var(--radius); padding: .2rem .9rem .6rem; background: var(--karte); }
.rechnung-block > summary { color: var(--tinte); font-size: .95rem; margin: .5rem 0; }
.rechnung-block[open] > summary { margin-bottom: .8rem; }
.rechnung-block > .raster { margin: 0; }

/* „Neuer Kunde" mit Dokument (Philipp 26.09.2026): das Dokument ist das ERSTE Feld im Formular */
.dokument-feld { border: 1px dashed var(--strom); border-left: 4px solid var(--strom); border-radius: var(--radius); background: #fffaf0; padding: .8rem 1rem .6rem; }
.dokument-titel { display: block; font: 600 1.02rem var(--serif); }
.dokument-titel small { font: 400 .82rem var(--sans); color: var(--leise); }
.dokument-feld .dokument-hinweis { margin: .25rem 0 .5rem; font-size: .88rem; }
.dokument-feld .datei-knopf { margin: .2rem 0 .5rem; }
.dokument-feld [data-rechnung-ergebnis] .meldung { margin: .4rem 0; }
input:not([type=checkbox]):not([type=radio]).aus-rechnung.unsicher, select.aus-rechnung.unsicher { border: 2px dashed #b86f00; }
/* Pflichtangabe, die nicht im Dokument steht: jetzt eintragen, sonst steht sie danach rot im Prüfkasten */
input:not([type=checkbox]):not([type=radio]).nicht-im-dokument, select.nicht-im-dokument { border: 2px dashed var(--rot); }
.feld:has(.nicht-im-dokument) > .fundstelle { color: var(--rot); font-weight: 600; }
.speicher-hinweis { align-self: center; font-weight: 600; color: #7a5200; overflow-wrap: anywhere; }
.speicher-hinweis:empty { display: none; }

/* Markierungen aus dem Prüfkasten: gelb = aus dem Dokument, bitte prüfen · rot = Pflichtangabe fehlt (so spezifisch wie die Feldregel oben) */
.feld-aus-dokument input:not([type=checkbox]):not([type=radio]), .feld-aus-dokument select, .feld-aus-dokument textarea { background: var(--strom-hell); border-color: var(--strom); }
.feld-fehlt input:not([type=checkbox]):not([type=radio]), .feld-fehlt select, .feld-fehlt textarea { border: 2px solid var(--rot); background: #fff7f5; }
.feld-fehlt > span { color: var(--rot); }
.markierung { display: block; font-size: .78rem; font-weight: 600; overflow-wrap: anywhere; }
.markierung-gelb { color: #7a5200; } .markierung-rot { color: var(--rot); font-weight: 700; }
label.feld[id^="f-"] { scroll-margin-top: 1.2rem; }
label.feld:target { outline: 3px solid var(--strom); outline-offset: 4px; border-radius: 6px; }

/* Prüfkasten ganz oben in der Akte: „Aus dem Dokument „…" übernommen – bitte prüfen" */
.pruefkasten { border: 2px solid var(--strom); border-left-width: 8px; background: #fffaf0; scroll-margin-top: 1rem; }
.pruefkasten.pruefkasten-rot { border-color: var(--rot); border-left-color: var(--rot); }
.pruefkasten h2 { font-size: 1.2rem; margin-bottom: .2rem; }
.pruefkasten .pk-kopf { margin: 0 0 .7rem; font-size: .85rem; }
.pruefkasten h3 { margin: 0 0 .35rem; font: 700 .95rem var(--sans); }
.pruefkasten h3 small { font-weight: 400; }
.pk-gruppe { border-radius: 8px; padding: .6rem .8rem; margin: 0 0 .6rem; }
.pk-gruppe ul { margin: 0; padding-left: 1.1rem; } .pk-gruppe li { margin: .2rem 0; overflow-wrap: anywhere; } .pk-gruppe p { margin: 0; overflow-wrap: anywhere; }
.pk-fehlt { background: var(--rot-hell); border: 1px solid #efbdb4; }
.pk-fehlt h3, .pk-fehlt a { color: var(--rot); font-weight: 700; }
.pk-unsicher { background: var(--gelb-hell); border: 1px solid #ecd9a4; } .pk-unsicher h3 { color: #7a5200; }
/* Gelesen = aus dem Dokument übernommen: dieselbe Farbe wie die Felder in „Kunde bearbeiten" (gelb „bitte prüfen"), nicht Grün – Grün las
   sich wie „erledigt" (Kritiker-Runde 26.09.2026) */
.pk-gelesen { background: var(--strom-hell); border: 1px solid #f0cf86; } .pk-gelesen h3 { color: #7a5200; }
.pk-nichts { background: var(--rot-hell); border: 1px solid #efbdb4; border-radius: 8px; padding: .6rem .8rem; margin: 0 0 .6rem; color: #7d2417; overflow-wrap: anywhere; }
.pk-knoepfe { margin-top: .8rem; } .pk-knoepfe form { margin: 0; }
.pk-fuss { margin: .5rem 0 0; font-size: .82rem; }
/* Kritiker-Runde 26.09.2026, 3. Durchgang: der gelesene WERT steht hinter jedem Feld (vergleichen an EINER Stelle neben „Dokument ansehen") */
.pk-wert { font-weight: 600; color: var(--tinte); overflow-wrap: anywhere; }
.pk-name-fremd p { color: #7d2417; }
/* Frage „Passt das Dokument zu diesem Kunden?" im Formular „Neuer Kunde" – mit zwei Knöpfen, vor dem Speichern */
.dokument-frage { border: 2px solid var(--rot); border-radius: 8px; background: var(--rot-hell); padding: .6rem .8rem; margin: .4rem 0; }
.dokument-frage p { margin: 0 0 .5rem; color: #7d2417; font-weight: 600; overflow-wrap: anywhere; }
.dokument-frage .knopfzeile { margin: 0; }
.dokument-speichern .knopf { margin: .2rem 0 .4rem; }
@media (max-width: 600px) { .dokument-speichern .knopf, .dokument-frage .knopf { width: 100%; justify-content: center; } }
/* Hinweis unter einem Feld, dessen Eingabe vom Dokument abweicht (die Eingabe bleibt) */
.fundstelle.abweichung { color: #7a5200; font-weight: 600; }
.chip-pruefen { text-decoration: none; font-weight: 600; margin-left: .2rem; }
@media (max-width: 600px) {
  .pruefkasten { border-left-width: 5px; } .pk-knoepfe .knopf, .pk-knoepfe form, .pk-knoepfe form .knopf { width: 100%; justify-content: center; }
  .speicher-hinweis { flex-basis: 100%; }
}

/* Dokumente in der Kundenakte: Vollmacht-Stand oben, Gruppen nach Art (24.09.2026) */
.vollmacht-stand { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: .8rem; border: 1px solid; }
.vollmacht-ja { background: var(--gruen-hell); border-color: #b7dcc5; }
.vollmacht-nein { background: var(--rot-hell); border-color: #efbdb4; }
.vollmacht-vermutet { background: var(--gelb-hell); border-color: #ecd9a4; }
.vollmacht-stand form { margin: 0; }
.dok-gruppe { border-top: 1px solid var(--linie); padding-top: .2rem; }
.dok-gruppe > summary { color: var(--tinte); font-size: .92rem; }
.art-wahl { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.art-wahl select { font-size: .8rem; padding: .15rem .3rem; max-width: 13rem; }
@media (max-width: 560px) { .art-wahl select { max-width: 8.5rem; font-size: 16px; } }   /* 16 px: iOS zoomt sonst beim Antippen */

/* Kritiker-Runde 3: Fundstelle sichtbar unter dem Feld (Handy hat keinen Tooltip); lange Dateinamen ohne Umbruchstelle
   (Mailanhänge, Scans) brechen um statt die Seite waagerecht scrollen zu lassen */
.fundstelle { display: block; font-size: .74rem; color: var(--leise); overflow-wrap: anywhere; }
.liste li > div, .vollmacht-stand, .vollmacht-stand span, .vollmacht-stand a, .dok-gruppe a, .meldung { overflow-wrap: anywhere; }
.vollmacht-stand form { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; max-width: 100%; }
h2 { flex-wrap: wrap; } h2, h2 small { overflow-wrap: anywhere; min-width: 0; }
small, .karte > p { overflow-wrap: anywhere; } td { overflow-wrap: break-word; }
.meldung.veraltet { opacity: .6; }
.verlauf li, .verlauf small { overflow-wrap: anywhere; }   /* lange Dateinamen im Verlauf (Runde 7) */
/* ProviPrüfung, Kritiker-Runde 6: lange Dateinamen ohne Leerzeichen in der Kartenliste („Nur abgelegte" / „bitte zuordnen"), in der Überschrift
   „Werte aus … eintragen" und in Feldern des Rasters – bei 390 px lief die Seite sonst seitlich über (443 bzw. 425 px). Anders als break-word senkt
   „anywhere" auch die Mindestbreite, nach der Flex- und Grid-Spalten sich richten; min-width: 0 lässt die Rasterspalte schmaler werden als ihr längstes Wort. */
td.kz-titel, td.kz-titel a { overflow-wrap: anywhere; }
h3, h3 small { overflow-wrap: anywhere; min-width: 0; }
.raster > * { min-width: 0; }

/* ---- Ein-CRM (26.09.2026): In welcher Firma bin ich? Leitfarbe je Firma aus deploy/firmen.json ---- */
body[data-firma] .leiste { box-shadow: inset 5px 0 0 var(--firma); }
body[data-firma] main { border-top: 4px solid var(--firma); }
.firmen-schild { display: flex; flex-direction: column; gap: .35rem; margin: -.6rem 0 1.2rem; padding: .6rem .75rem; border-radius: 10px; background: var(--firma); color: #fff; }
.firmen-schild > span { font: 600 1.05rem var(--sans); letter-spacing: .01em; }
.firmen-schild a { color: #fff; opacity: .88; font-size: .82rem; text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.firmen-schild a:hover, .firmen-schild a:focus-visible { opacity: 1; text-decoration: underline; }
.firmenwahl { display: grid; gap: .8rem; margin: 1rem 0 1.4rem; }
.firmen-kachel { display: block; padding: 1.1rem 1.2rem; border-radius: 12px; border: 1px solid var(--linie); border-left: 8px solid var(--firma, var(--tinte)); text-decoration: none; color: var(--tinte); background: #fff; min-height: 44px; }
.firmen-kachel b { display: block; font: 600 1.25rem var(--serif); }
.firmen-kachel small { color: var(--leise); }
.firmen-kachel:hover, .firmen-kachel:focus-visible { background: var(--papier); }
.pforte-fuss { justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pforte-fuss form { margin: 0; }
@media (max-width: 1000px) {
  .firmen-schild { margin: 0; flex-direction: row; align-items: center; flex-wrap: wrap; padding: .3rem .6rem; gap: .2rem .7rem; }
  body[data-firma] .leiste { box-shadow: inset 0 -4px 0 var(--firma); }
}

/* ---- Menü-Knopf auf Handy und Tablet (Philipp 26.09.2026): Punkte untereinander statt in eine Zeile gequetscht ---- */
.menue-schalter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.menue-knopf { display: none; }
@media (max-width: 1000px) {
  .leiste { flex-wrap: wrap; row-gap: .5rem; }
  .leiste > .marke { order: 0; }
  .leiste > .abmelden { order: 1; margin-left: auto; }
  .leiste > .firmen-schild { order: 2; flex: 1 1 100%; }
  .leiste > .menue-knopf { order: 3; }
  .leiste > nav { order: 4; }
  .menue-knopf { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem .9rem; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: #fff; font-weight: 600; font-size: .95rem; user-select: none; }
  .menue-knopf svg { width: 20px; height: 20px; flex: none; }
  .menue-knopf small { color: var(--leiste-text); font-weight: 400; font-size: .85rem; }
  .menue-knopf small::before { content: "· "; }
  .menue-schalter:focus-visible + .menue-knopf { outline: 2px solid var(--strom); outline-offset: 2px; }
  .menue-schalter:checked + .menue-knopf { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }
  /* zu: Menü unsichtbar · auf: volle Breite, Punkte untereinander wie in der Computer-Ansicht */
  .menue-schalter:not(:checked) ~ nav { display: none; }
  .leiste nav { flex: 1 1 100%; flex-direction: column; flex-wrap: nowrap; overflow: visible; gap: 2px; padding-bottom: .3rem; }
  .leiste nav a { min-height: 44px; padding: .6rem .75rem; font-size: .98rem; gap: .75rem; border: 0; background: none; border-radius: 8px; }
  .leiste nav a span { white-space: normal; }
  .leiste nav a svg { width: 18px; height: 18px; }
  .leiste nav a.aktiv { background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 var(--firma, var(--strom)); border: 0; }
  .leiste nav a .zaehlmarke { margin-left: auto; }
}

/* ---- Handy: Listen als Karten statt seitlich scrollender Tabellen (Vereinfachung 26.09.2026, A1) ----
   Eine Tabelle mit class="karten-liste" wird unter 600 px zu einer Karte je Zeile. Die Zellen bestimmen selbst, wie sie erscheinen:
     td.kz-haupt   – volle Breite, fett, zuerst (z. B. „endet 31.10.2026 · in 35 Tagen")
     td.kz-titel   – volle Breite (z. B. Kundenname)
     td[data-label] – kleine Zeile „Label: Wert"
     td.kz-weg     – auf dem Handy ausgeblendet (am Computer unverändert)
   Am Computer bleibt die Tabelle eine Tabelle. */
@media (max-width: 600px) {
  table.karten-liste { display: block; overflow: visible; background: none; }
  table.karten-liste thead { display: none; }
  table.karten-liste tbody { display: block; }
  table.karten-liste tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; padding: .75rem .9rem; border-bottom: 1px solid var(--linie); }
  table.karten-liste tr:last-child { border-bottom: 0; }
  table.karten-liste td { display: block; padding: 0 !important; border: 0; white-space: normal; text-align: left; font-size: .95rem; }
  table.karten-liste td.kz-haupt { order: -2; flex: 1 1 100%; font-weight: 600; }
  table.karten-liste td.kz-titel { order: -1; flex: 1 1 100%; font-size: 1.02rem; }
  table.karten-liste td.kz-weg { display: none; }
  table.karten-liste td[data-label]::before { content: attr(data-label) ": "; color: var(--leise); font-size: .85em; }
  table.karten-liste td.r { text-align: left; }
  table.karten-liste td.eng { flex: 0 0 auto; }
  .karte-tabelle:has(> table.karten-liste) { overflow: visible; }
}

/* ==== Vereinfachung Kunden (26.09.2026) – Kundenliste, Kundenformular, Kundenakte ==== */
/* A3: Häkchenspalte der Kundenliste erst nach „Mehrere Kunden löschen …" unter der Tabelle. Ohne :has() (alte Browser) bleibt sie
   sichtbar wie bisher – der Löschweg geht nie verloren. */
/* Kunden zusammenführen (26.09.2026): ZWEI Aufklappzeilen nutzen dieselben Häkchen („… zusammenführen", „Mehrere Kunden löschen") –
   die Spalte erscheint, sobald IRGENDEINE offen ist. Ohne :has() ist die ganze Regel ungültig → Spalte sichtbar wie bisher. */
main:not(:has(details.sammel-auf[open])) .markier-spalte { display: none; }
.sammel-auf { margin: -.4rem 0 1.1rem; }
.sammel-auf[open] .sammel-loeschen { margin-top: .4rem; }
/* A5: „Firma" nur bei Gewerbe und Hausverwaltung – bei „Privatkunde" ausgeblendet, solange das Feld leer ist (Platzhalter sichtbar);
   ein schon eingetragener Firmenname bleibt sichtbar und lässt sich leeren. */
.kunden-formular:has(select[name=typ] option[value="privat"]:checked) .nur-firma:has(input:placeholder-shown) { display: none; }
/* Aufklappzeilen im Kundenformular (Tippgeber, Ansprechpartner, Notiz) */
.formular-zusatz { border-top: 1px solid var(--linie); padding-top: .2rem; }
.formular-zusatz > summary { color: var(--tinte); font-size: .92rem; font-weight: 600; margin: .5rem 0; }
.formular-zusatz[open] > summary { margin-bottom: .8rem; }
.formular-zusatz > .raster { margin-bottom: .4rem; }
/* A6: Beschriftungen im Kontakt so breit wie nötig – nichts läuft mehr ineinander */
.daten.kontakt-daten { grid-template-columns: minmax(5.5rem, max-content) 1fr; }
/* B5: Offene Punkte – Datenschutz-Punkt hervorgehoben, Sammelzeilen aufklappbar */
.punkt-datenschutz a { font-weight: 600; }
.punkt-sammel > summary { color: var(--tinte); font-size: inherit; margin: 0; }
.punkt-sammel > .liste { margin: .3rem 0 0 1rem; }
.punkt-sammel > .liste li { padding: .3rem 0; }
@media (max-width: 1000px) {
  /* A6: am Handy/Tablet „Gespräch oder Notiz eintragen" und „Offene Aufgaben" direkt nach dem Kontakt – die Spalten lösen sich auf,
     die beiden Karten (akte-vorn) rücken nach vorn. Die Karten tragen ihren Abstand selbst (margin-bottom). */
  .akte-spalten { gap: 0; }
  .akte-spalten > div { display: contents; }
  .akte-spalten > div > * { min-width: 0; }
  .akte-spalten .akte-vorn { order: -1; }
}
@media (max-width: 600px) {
  /* A1: Zählerzeilen der Kundenakte als Karten – der Vertrag mit Enddatum bekommt eine eigene volle Zeile */
  table.kompakt.karten-liste tr { padding: .55rem 0; border-bottom: 1px dashed var(--linie); }
  table.kompakt.karten-liste tr:last-child { border-bottom: 0; }
  table.karten-liste td.kz-voll { flex: 1 1 100%; }
  .sammel-auf > summary { padding: .6rem 0; }   /* Tippfläche ≥ 40 px, Aufklapp-Dreieck bleibt (kein display-Wechsel) */
  /* A3 am Handy: das Häkchen steht (nach dem Aufklappen) links neben dem Kundennamen statt über der ersten Angabe */
  table.karten-liste td.markier-spalte { order: -2; width: auto; flex: 0 0 auto; }
  main:has(details.sammel-auf[open]) table.karten-liste td.kz-titel { flex-basis: calc(100% - 2.5rem); }
}

/* Vertragsliste als Handy-Karte: Ampelpunkt in einer Zeile mit dem Vertragsende (vorher Inline-Stile in vertraege.js) */
@media (max-width: 600px) {
  table.karten-liste td.eng { order: -3; }
  table.karten-liste td.kz-haupt.mit-ampel { flex-basis: 0; }
}
/* Schritt 22 · Mailversand: Knöpfe mit Adresse brechen um (sonst ragen lange Adressen auf 390 px über den Rand); Adressen und Kennungen
   der Mail (Message-ID) brechen an jeder Stelle; Knöpfe am Handy in voller Breite. */
.versand-knopf { white-space: normal; text-align: left; overflow-wrap: anywhere; } .umbruch-wort { overflow-wrap: anywhere; }
/* Nachrichtentext (Entwurf, eingegangene Mail): der Abmeldelink ist eine lange Zeichenkette ohne Leerzeichen – ohne Umbruch ragte er auf 390 px
   über den Rand (Handy-Durchlauf 27.09.2026: 722 px statt 390). */
.entwurf-text { overflow-wrap: anywhere; }
.versand-form { margin: .6rem 0 .2rem; } .versand-liste { margin: .4rem 0 0 1.2rem; padding: 0; } .versand-liste li { margin: .35rem 0; overflow-wrap: anywhere; }
@media (min-width: 601px) { .versand-karte form.zeile input[type=text] { flex: 1 1 16rem; min-width: 0; } }   /* am Handy steht .zeile senkrecht – dort wäre die Basis eine Höhe */
@media (max-width: 600px) { .versand-knopf, .versand-karte .knopf { width: 100%; justify-content: center; text-align: center; } }

/* ---- ProviPrüfung (26.09.2026): Plakette am Menü, blaue Ampel („mehr bekommen"), Startklar-Schritte, Quelle angeben ---- */
.plakette { margin-left: auto; background: var(--rot); color: #fff; font: 600 .72rem var(--sans); border-radius: 99px; padding: .05rem .45rem; min-width: 1.3rem; text-align: center; }
.plakette-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--gelb); margin-left: .35rem; flex: none; box-shadow: 0 0 0 2px rgba(217,154,11,.35); }
.plakette + .plakette-punkt { margin-left: .3rem; }
.leiste nav a > span + .plakette-punkt { margin-left: auto; }
.plakette-nur-punkt { width: 10px; height: 10px; min-width: 0; padding: 0; background: var(--gelb); }
.ampel-blau { background: #2c6be0; box-shadow: 0 0 0 3px var(--gas-hell); } .ampel-grau { background: var(--linie-stark); }
.chip-ton-blau { background: var(--gas-hell); color: #17449b; }
ol.schritte { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; } ol.schritte li.erledigt { color: var(--leise); text-decoration: line-through; }
.quelle-angeben { margin-top: .3rem; } .quelle-angeben > summary { color: var(--tinte); font-size: .82rem; cursor: pointer; }
.quelle-angeben form { margin-top: .4rem; max-width: 360px; }
#provision .frist { margin-bottom: .8rem; padding: .7rem .9rem; } #provision .frist b { font-size: 1rem; }
#provision table.kompakt td { padding: .25rem .4rem; font-size: .85rem; }
#provision .zuordnen-kasten label.inline input { width: auto; }
.stand { margin: .2rem 0 .8rem; }
.karte-tabelle > p.karte-text { padding: 0 1.25rem; margin: .4rem 0 .8rem; }
@media (max-width: 600px) { .karte-tabelle > p.karte-text { padding: 0 .85rem; } }
@media (max-width: 600px) {
  #provision .zuordnen-kasten label.inline { flex: 1 1 100%; }
  #provision .zuordnen-kasten label.inline input { width: 100%; }
}
.karte > .hinweis { margin-bottom: 1rem; }
.mehr-zeigen > summary { color: var(--tinte); font-size: .88rem; font-weight: 600; margin: .5rem 0; padding: .35rem 0; }
.karte-tabelle > .mehr-zeigen > summary { padding: .35rem 1.25rem; }
@media (max-width: 600px) { .karte-tabelle > .mehr-zeigen > summary { padding: .5rem .85rem; } }
/* ProviPrüfung, Kritiker-Runde 1: Zahlen je Prüfquelle, Hochladen durch Ziehen, Karte „Firma nicht belegt" */
.pruefquelle { border-top: 1px solid var(--linie); padding: .6rem 0 .2rem; margin-top: .4rem; }
.pruefquelle > b { font-size: .92rem; }
.pruefquelle .daten.kompakt { margin-top: .35rem; font-size: .88rem; }
.ziehen-aktiv { outline: 2px dashed var(--strom); outline-offset: -6px; }
.ziehen-hinweis { display: block; }
@media (hover: none) { .ziehen-hinweis { display: none; } }
.karte-tabelle > h3.karte-text { padding: 0 1.25rem; }
@media (max-width: 600px) { .karte-tabelle > h3.karte-text { padding: 0 .85rem; } }
#provision .zuordnen-kasten form { display: inline; }
.haken { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .haken input[type=checkbox] { width: auto; flex: none; margin: 0; }
.haken input[name^="wert_"] { width: 7.5rem; flex: none; }
@media (max-width: 600px) { .haken { flex-direction: row; } }
.haken > span { flex: 1 1 12rem; }

/* Vorschläge aus dem Portal (Datenlücken 27.09.2026): eine Karte je Vertrag; am Handy der Knopf über die ganze Breite und mindestens 44 px hoch */
.liste-vorschlaege li { flex-wrap: wrap; }
.liste-vorschlaege .vorschlag-knopf, .liste-vorschlaege .vorschlag-weg { margin: 0; }
.liste-vorschlaege .vorschlag-weg { align-self: center; }
/* Kritiker-Runde 2 (Befund 4): Rückmeldung nach einem Klick – steht an der Stelle der angeklickten Karte, die Seite springt dorthin (#rueckmeldung).
   Kein Trennstrich, kein Flex wie bei den Karten; etwas Luft nach oben, damit der Kasten nicht am Bildschirmrand klebt. */
.vorschlag-rueckmeldung { scroll-margin-top: .6rem; }
.liste-vorschlaege li.vorschlag-rueckmeldung { display: block; border-bottom: 0; padding: .4rem 0 .2rem; }
.vorschlag-rueckmeldung .meldung { margin-bottom: .4rem; }
.vorschlag-rueckmeldung p { margin: 0 0 .4rem; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .liste-vorschlaege li > div { flex: 1 1 100%; }
  .liste-vorschlaege .vorschlag-knopf { flex: 1 1 100%; }
  .liste-vorschlaege .vorschlag-knopf .knopf { width: 100%; justify-content: center; min-height: 44px; white-space: normal; }
  .liste-vorschlaege .vorschlag-weg button.link { min-height: 44px; }
}

/* ==== Kunden zusammenführen (26.09.2026, Bauplan 2.5) ==== */
.sammel-auf.zusammen-auf { margin-bottom: .3rem; }   /* zwei Aufklappzeilen direkt untereinander */
.zusammen-zeile { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin: .4rem 0 .7rem; }
.zf-link { margin: -.4rem 0 1.1rem; font-size: .88rem; }
.zf-hinweis { display: flex; gap: .6rem 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.kz-titel .fruehere { display: block; }
.ruht-grund { display: block; margin-top: .3rem; color: #855d00; }
.fruehere-daten { margin-top: .4rem; }
.inline-form { display: inline; }
.zf-seite { max-width: 52rem; }
.zf-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; margin-bottom: .6rem; }
.zf-karte { border: 1px solid var(--linie); border-radius: var(--radius); padding: .75rem .9rem; background: #fff; overflow-wrap: anywhere; min-width: 0; font-size: .9rem; }
.zf-karte p { margin: .3rem 0; }
.zf-karte.zf-vorschlag { border-color: var(--gruen); box-shadow: inset 0 3px 0 var(--gruen); }
.zf-kopf { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .3rem; }
.zf-kopf b { font-size: 1rem; }
.zf-kopf .chip { white-space: normal; }   /* der Vorschlag-Chip kann länger sein – am Handy umbrechen statt überlaufen */
.zf-buchstabe { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tinte); color: #fff; font-weight: 700; flex: 0 0 auto; }
.zf-belege p { margin: .3rem 0; font-size: .92rem; }
.zf-wahl { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.zf-wahl legend { font-weight: 600; margin-bottom: .45rem; padding: 0; }
.zf-wahl > p { margin: .1rem 0 .5rem; font-size: .88rem; }
.zf-wahl label { display: flex; gap: .6rem; align-items: flex-start; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--linie); border-radius: 8px; overflow-wrap: anywhere; min-width: 0; cursor: pointer; background: #fff; }
.zf-wahl label + label { margin-top: .4rem; }
.zf-wahl label > span { min-width: 0; }
.zf-wahl label:has(input:checked) { border-color: var(--tinte); background: #faf6ec; }
.zf-wahl input[type=radio] { width: 20px; height: 20px; flex: 0 0 auto; margin: .1rem 0 0; }
.zf-wahl small { color: var(--leise); }
.zf-wahl .zf-folge { display: block; color: #855d00; margin-top: .15rem; }
.zf-pflicht legend { color: var(--rot); }
.zf-haken { display: flex; gap: .6rem; align-items: flex-start; min-height: 44px; padding: .5rem 0; cursor: pointer; overflow-wrap: anywhere; }
.zf-haken input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; margin: .15rem 0 0; }
.zf-bestaetigen .meldung p { margin: .2rem 0; }
.zf-seite .knopfzeile { flex-wrap: wrap; margin: .6rem 0 .4rem; }
/* Kritiker-Runde 5: schreibende Knöpfe mit gegenteiliger Wirkung nie dicht untereinander – „verschieden" im eigenen Abschnitt, „… ist ein
   anderer Kunde" durch Linie und Abstand vom Link „Kundenseite ansehen" (volle Tippfläche) getrennt */
.zf-karte .zf-ansehen-zeile { margin: .2rem 0 0; }
.zf-karte .zf-ansehen { display: inline-flex; align-items: center; min-height: 44px; }
.zf-karte .zf-anders { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--linie); }
.zf-karte .zf-anders .meldung { margin: 0 0 .7rem; }
.zf-karte .zf-anders .knopf { white-space: normal; text-align: left; }
.zf-anders-abschnitt { margin-top: 2rem; }
@media (max-width: 600px) {
  .zf-seite .knopfzeile .knopf { flex: 1 1 100%; white-space: normal; justify-content: center; text-align: center; }
  .zf-karte .zf-anders .knopf { width: 100%; justify-content: center; text-align: center; min-height: 44px; }
  td.markier-spalte input[type=checkbox] { width: 22px; height: 22px; margin: 0; vertical-align: middle; }   /* ohne Rand passt es neben den Namen (kz-titel: 100 % − 2,5rem) */
  .zf-hinweis .knopf { flex: 1 1 100%; justify-content: center; white-space: normal; }
  .zusammen-zeile .knopf { flex: 1 1 100%; justify-content: center; white-space: normal; }
  /* Kritiker-Runde 6: „Jetzt … zusammenführen" lässt sich nicht selbst rückgängig machen – der Haken darüber und „Abbrechen" darunter liegen am
     Handy mindestens 24 px entfernt (vorher je 9 px: ein 6 px zu hoch gesetzter Finger auf „Abbrechen" führte zusammen) */
  .zf-bestaetigen .knopfzeile { margin-top: 1.6rem; row-gap: 1.6rem; }
}

/* ---- Einstellungen (27.09.2026, nur Inhaber): leiser Menüpunkt am Ende, eine Zeile je Wert ---- */
.leiste nav a.nav-leise { margin-top: .6rem; font-size: .82rem; opacity: .7; }
.leiste nav a.nav-leise:hover, .leiste nav a.nav-leise.aktiv { opacity: 1; }
.einstellung { padding: .9rem 0; border-top: 1px solid var(--linie); }
.einstellung:first-of-type { border-top: 0; padding-top: .2rem; }
.einstellung h3 { margin: 0 0 .35rem; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.einstellung p { margin: .25rem 0; overflow-wrap: anywhere; }
.einstellung .meldung ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.einstellung .einstellung-eingabe { min-width: 16rem; }
@media (max-width: 600px) { .einstellung .einstellung-eingabe { min-width: 0; width: 100%; } }