/* stoever baumpflege – schlicht, gut lesbar, Handy zuerst.
   Farben aus dem Logo: Dunkelgrün #0d4d30, Hellgrün #93c020. Kein Schwarz. */
:root {
  --gruen: #0d4d30;
  --gruen-hover: #0a3d26;
  --gruen-hell: #93c020;
  --gruen-flaeche: #eef4dc;   /* wie der Kontaktkasten im PDF, etwas heller */
  --gruen-rand: #c9dc95;
  --text: #1c2b22;            /* sehr dunkles Grüngrau statt Schwarz */
  --text-leise: #4d5e54;
  --rand: #d3dbd5;
  --flaeche: #f5f7f4;
  --weiss: #fff;
  --rot: #b3261e;
  --rot-flaeche: #fbeae8;
  --gelb: #8a5a00;
  --gelb-flaeche: #fff4d6;
  --grau: #8a958e;
  --radius: 8px;
  --schatten: 0 1px 2px rgba(13, 77, 48, .08);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--flaeche);
}
a { color: var(--gruen); }
a:hover { color: var(--gruen-hover); }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .75rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
p { margin: 0 0 .75rem; }
.leise { color: var(--text-leise); }
.klein { font-size: .9rem; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Testmodus-Balken (erstes Element im klebenden Kopf, bleibt beim Scrollen stehen) ---------- */
.testbalken {
  background: var(--rot); color: #fff; padding: 4px 16px; font-size: .95rem; line-height: 1.35;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px; text-align: center;
}
.testbalken > span { padding: 6px 0; }
.testbalken strong { letter-spacing: .08em; }
.testbalken a { color: #fff; font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
@media (max-width: 639px) { .testbalken-lang { display: none; } }

/* ---------- Kopf und Menü ---------- */
.kopf {
  background: var(--weiss);
  border-bottom: 4px solid var(--gruen-hell);
  position: sticky; top: 0; z-index: 20;
}
.kopf-innen {
  max-width: 1100px; margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 12px;
}
.logo { display: block; flex-shrink: 0; }
.logo img { display: block; height: 40px; width: auto; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menue-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--weiss); color: var(--gruen); font: inherit; font-weight: 600; cursor: pointer;
}
.menue-knopf svg { width: 20px; height: 20px; }
.nav { display: none; background: var(--gruen); }
.nav.offen { display: block; }
.nav ul { list-style: none; margin: 0 auto; padding: 4px 8px 8px; max-width: 1100px; }
.nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px;
  color: #fff; text-decoration: none; font-weight: 500; border-radius: 6px;
}
.nav a:hover { background: rgba(255,255,255,.1); }
.nav a[aria-current="page"] { background: rgba(255,255,255,.16); box-shadow: inset 4px 0 0 var(--gruen-hell); }
.nav .trenner { border-top: 1px solid rgba(255,255,255,.2); margin: 6px 0; }
.nav form { margin: 0; }
.nav button.link {
  width: 100%; text-align: left; min-height: 48px; padding: 0 12px; background: none; border: 0;
  color: #fff; font: inherit; cursor: pointer; border-radius: 6px;
}
.nav button.link:hover { background: rgba(255,255,255,.1); }

@media (min-width: 900px) {
  .menue-knopf { display: none; }
  .nav { display: block; }
  .nav ul { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 8px; }
  .nav a, .nav button.link { min-height: 44px; padding: 0 14px; }
  .nav a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--gruen-hell); border-radius: 0; }
  .nav .trenner { display: none; }
  .nav .rechts { margin-left: auto; }
}

/* ---------- Inhalt ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 64px; }
.schmal { max-width: 640px; }
.mittel { max-width: 820px; }
.karte {
  background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px; box-shadow: var(--schatten);
}
.karte > :last-child { margin-bottom: 0; }
.karte h2:first-child, .karte h3:first-child { margin-top: 0; }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.kopfzeile h1 { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 4px; text-decoration: none; }
.zurueck::before { content: "‹"; font-size: 1.4em; margin-right: 6px; line-height: 1; }

/* ---------- Knöpfe ---------- */
.knopf, button.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 18px; border-radius: var(--radius);
  border: 1px solid var(--gruen); background: var(--gruen); color: #fff;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
}
.knopf:hover { background: var(--gruen-hover); color: #fff; }
.knopf.zweit { background: var(--weiss); color: var(--gruen); }
.knopf.zweit:hover { background: var(--gruen-flaeche); color: var(--gruen); }
.knopf.gefahr { background: var(--weiss); color: var(--rot); border-color: var(--rot); }
.knopf.gefahr:hover { background: var(--rot-flaeche); }
.knopf.akzent { background: var(--gruen-hell); border-color: var(--gruen-hell); color: var(--gruen); }
.knopf.akzent:hover { background: #a5d02f; color: var(--gruen); }
.knopf.voll { width: 100%; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.knopf:focus-visible, .menue-knopf:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gruen-hell); outline-offset: 2px;
}

/* ---------- Formulare ---------- */
.feld { margin-bottom: 14px; }
.feld > label, .feld > .label { display: block; font-weight: 600; margin-bottom: 4px; }
.feld .hinweis { display: block; font-size: .9rem; color: var(--text-leise); margin-top: 3px; }
.feld .fehlertext { display: block; color: var(--rot); font-size: .95rem; margin-top: 4px; font-weight: 500; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 11px;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--weiss); border: 1px solid #a9b6ad; border-radius: 6px;
}
textarea { min-height: 100px; resize: vertical; }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: var(--rot); background: #fffafa; }
.reihe { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .reihe.zwei { grid-template-columns: 1fr 1fr; }
  .reihe.plz { grid-template-columns: 8rem 1fr; }
  .reihe.drei { grid-template-columns: 1fr 1fr 1fr; }
}
.reihe.plz-immer { grid-template-columns: 6.5rem 1fr; }
.auswahl { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; }
.auswahl input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--gruen); }
.segmente { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.segmente legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.segmente label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid #a9b6ad; border-radius: var(--radius); background: var(--weiss); cursor: pointer;
}
.segmente input { accent-color: var(--gruen); width: 20px; height: 20px; margin: 0; }
.segmente label:has(input:checked) { border-color: var(--gruen); background: var(--gruen-flaeche); font-weight: 600; }
fieldset.gruppe { border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px 4px; margin: 0 0 16px; }
fieldset.gruppe > legend { font-weight: 700; padding: 0 6px; }
details.aufklapp > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--gruen); }

/* ---------- Hinweise ---------- */
.meldung { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid; }
.meldung.ok { background: var(--gruen-flaeche); border-color: var(--gruen-rand); }
.meldung.fehler { background: var(--rot-flaeche); border-color: #efb8b3; color: #7d1a14; }
.meldung.warnung { background: var(--gelb-flaeche); border-color: #f0d48a; color: #5c3d00; }
.meldung ul { margin: 4px 0 0; padding-left: 20px; }

/* ---------- Listen ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { border-top: 1px solid var(--rand); }
.liste > li:first-child { border-top: 0; }
.eintrag {
  display: block; padding: 12px 4px; text-decoration: none; color: var(--text); min-height: 44px;
}
a.eintrag:hover { background: var(--flaeche); }
.eintrag .titel { font-weight: 600; color: var(--gruen); overflow-wrap: anywhere; }
.eintrag .zeile2 { color: var(--text-leise); font-size: .95rem; overflow-wrap: anywhere; }
.eintrag-kopf { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.leer { color: var(--text-leise); padding: 8px 0; }

.marke {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: var(--flaeche); color: var(--text-leise); border: 1px solid var(--rand); white-space: nowrap;
}
.marke.anfrage { background: #e8f1fb; color: #1d4f86; border-color: #c4daf2; }
.marke.angebot { background: var(--gelb-flaeche); color: var(--gelb); border-color: #f0d48a; }
.marke.auftrag { background: var(--gruen-flaeche); color: var(--gruen); border-color: var(--gruen-rand); }
.marke.ausgefuehrt { background: #fde9d7; color: #8a3b00; border-color: #f5c79d; }
.marke.abgerechnet { background: #ece6f6; color: #4b2f7a; border-color: #d2c5ea; }
.marke.bezahlt { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.marke.archiv { background: #eceeed; color: #5c665f; }
.marke.warn { background: var(--rot-flaeche); color: var(--rot); border-color: #efb8b3; }

/* ---------- Filter und Suche ---------- */
.suche { margin-bottom: 12px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px 8px; scrollbar-width: thin; }
.chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid #a9b6ad; border-radius: 999px; background: var(--weiss); color: var(--text);
  font: inherit; font-size: .95rem; cursor: pointer;
}
.chip .zahl { font-weight: 700; color: var(--text-leise); }
.chip[aria-pressed="true"] { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.chip[aria-pressed="true"] .zahl { color: #fff; }

/* ---------- Fortschrittsleiste ---------- */
.faden { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.faden li { text-align: center; font-size: .78rem; line-height: 1.25; color: var(--text-leise); min-width: 0; }
.faden .balken { height: 8px; border-radius: 4px; background: #dfe5e1; margin-bottom: 6px; }
.faden .erledigt .balken { background: var(--gruen-hell); }
.faden .aktuell .balken { background: var(--gruen); }
.faden .aktuell { color: var(--gruen); font-weight: 700; }
.faden .uebersprungen .balken { background: repeating-linear-gradient(90deg, #dfe5e1 0 6px, transparent 6px 10px); }
.faden .datum { display: block; font-weight: 400; color: var(--text-leise); }
/* Silbentrennung statt Bruch mitten im Wort ("Ausge-führt" statt "Ausgefüh rt"). */
.faden .name { display: block; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; }
.faden .d-kurz { display: none; }
@media (max-width: 480px) {
  .faden { gap: 3px; }
  .faden li { font-size: .74rem; }
  .faden .d-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .faden .d-kurz { display: inline; }
}
@media (min-width: 640px) { .faden li { font-size: .9rem; } }

/* ---------- Startseite ---------- */
.aufgaben { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .aufgaben { grid-template-columns: 1fr 1fr; } }
.aufgaben .karte { margin: 0; }
.aufgaben h2 { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.zaehler { display: inline-flex; min-width: 28px; height: 28px; padding: 0 8px; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--gruen-flaeche); color: var(--gruen); font-size: .9rem; font-weight: 700; }
.zaehler.warn { background: var(--rot-flaeche); color: var(--rot); }

/* ---------- Definitionslisten ---------- */
.daten { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; }
.daten dt { font-size: .88rem; color: var(--text-leise); margin-top: 8px; }
.daten dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .daten { grid-template-columns: 11rem 1fr; }
  .daten dt { margin-top: 0; padding-top: 2px; }
}
.mehrzeilig { white-space: pre-wrap; }

/* ---------- Kacheln (Einstellungen) ---------- */
.kacheln { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .kacheln { grid-template-columns: 1fr 1fr; } }
.kachel {
  display: block; padding: 16px; background: var(--weiss); border: 1px solid var(--rand); border-radius: var(--radius);
  text-decoration: none; color: var(--text); box-shadow: var(--schatten);
}
.kachel:hover { border-color: var(--gruen); }
.kachel strong { display: block; color: var(--gruen); font-size: 1.05rem; margin-bottom: 2px; }
.kachel span { color: var(--text-leise); font-size: .95rem; }

/* ---------- Tabellen ---------- */
.tabelle-wrap { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabelle th, .tabelle td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabelle th { font-size: .85rem; color: var(--text-leise); font-weight: 600; }

/* ---------- Anmeldung ---------- */
.anmeldung { max-width: 420px; margin: 32px auto; }
.anmeldung .logo-gross { display: block; margin: 0 auto 24px; max-width: 260px; width: 70%; height: auto; }

/* ---------- Kundenauswahl im Anfrageformular ---------- */
.kundenwahl-liste { max-height: 320px; overflow-y: auto; border: 1px solid var(--rand); border-radius: var(--radius); margin-top: 8px; }
.kundenwahl-liste button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; min-height: 44px; border: 0;
  border-top: 1px solid var(--rand); background: var(--weiss); font: inherit; color: var(--text); cursor: pointer;
}
.kundenwahl-liste button:first-child { border-top: 0; }
.kundenwahl-liste button:hover { background: var(--gruen-flaeche); }
.gewaehlt { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--gruen-flaeche); border: 1px solid var(--gruen-rand); border-radius: var(--radius); padding: 10px 12px; }

/* ---------- Fotos ---------- */
.fotoraster { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .fotoraster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .fotoraster { grid-template-columns: repeat(4, 1fr); } }
.fotoraster li { border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; background: var(--flaeche); min-width: 0; }
.fotoraster li.neu { border: 2px solid var(--rot); }
.fotoraster img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-info { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 4px 2px 8px; font-size: .82rem; color: var(--text-leise); }
.foto-info form { margin: 0; }
.foto-weg { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--rot); font: inherit; font-size: .85rem; cursor: pointer; }
.foto-upload input[type=file] { position: absolute; }
.foto-upload label.knopf { cursor: pointer; }
.foto-upload label.knopf:focus-within { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.upload-status { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--gruen-flaeche); border: 1px solid var(--gruen-rand); }
.upload-status.fehler { background: var(--rot-flaeche); border-color: #efb8b3; color: #7d1a14; }
.upload-status p { margin: 0 0 4px; }
.link-kopie { display: flex; gap: 8px; flex-wrap: wrap; }
.link-kopie input { flex: 1 1 14rem; min-width: 0; }
.kunde-fuss { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rand); font-size: .92rem; color: var(--text-leise); }

/* ---------- Angebots-Editor ---------- */
.pos-liste { list-style: none; margin: 0; padding: 0; }
.pos { border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 12px 4px; margin-bottom: 12px; background: var(--flaeche); }
.pos-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pos-nr { font-variant-numeric: tabular-nums; }
.pos-gp { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-gp.fehler, .summen .fehler { color: var(--rot); }
.pos-knoepfe { display: flex; gap: 4px; }
.klein-knopf { min-width: 44px; padding: 0 10px; }
.pos textarea { min-height: 70px; }
.pos-zahlen { display: grid; gap: 0 8px; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .pos-zahlen { grid-template-columns: 6rem 7rem 1fr 7rem; } }
.pos .feld { margin-bottom: 8px; }
.pos .feld > label { font-size: .85rem; font-weight: 600; }
.pos .auswahl.klein { min-height: 44px; padding: 6px 0; font-size: .92rem; }
.baustein-wahl { margin: 4px 0 16px; }
.baustein-wahl > label { display: block; font-weight: 600; margin-bottom: 4px; }
.summen { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 8px 0 0 auto; max-width: 360px; font-variant-numeric: tabular-nums; }
.summen dt { text-align: right; color: var(--text-leise); }
.summen dd { margin: 0; text-align: right; }
.textbaustein-wahl { margin-bottom: 6px; }
.aktionsleiste {
  position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(245,247,244,.96);
  border-top: 1px solid var(--rand);
}
.aktionsleiste .knopf { flex: 1 1 auto; }
@media (min-width: 640px) { .aktionsleiste { margin: 0; border-radius: var(--radius); border: 1px solid var(--rand); } .aktionsleiste .knopf { flex: 0 0 auto; } }
.zahlen-tabelle td.zahl, .zahlen-tabelle th.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Belege ---------- */
.beleg-raster { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px; }
.beleg-raster > .karte { margin: 0; }
@media (min-width: 900px) { .beleg-raster { grid-template-columns: 1fr 1fr; align-items: start; } }
.fotoraster.eins { grid-template-columns: 1fr; }
.fotoraster.eins img { background: #fff; }
/* Vorschau klein halten, damit die Felder auf dem Handy ohne langes Scrollen erreichbar sind;
   Antippen öffnet das Foto in voller Größe. */
.fotoraster img.beleg-bild { aspect-ratio: auto; object-fit: contain; max-height: 220px; }
@media (max-width: 899px) { .fotoraster.eins { grid-template-columns: repeat(2, 1fr); } }
/* Am PC: Beleg groß neben dem Formular (wie Paperless), bleibt beim Scrollen stehen. */
.beleg-seite { max-width: 820px; }
@media (min-width: 900px) {
  /* Ganze Fensterbreite: Angaben links (mind. 400 px), Beleg rechts mit ~60 %.
     Im HTML steht die Vorschau zuerst (Handy: Beleg oben), am PC tauscht order die Seiten. */
  .beleg-seite { max-width: none; }
  .beleg-seite .beleg-raster { grid-template-columns: minmax(400px, 2fr) minmax(0, 3fr); }
  .beleg-seite .beleg-vorschau { order: 2; }
  /* --kopf-h: tatsächliche Höhe des klebenden Kopfs (mit Menüzeile bzw. Testmodus-Balken), gesetzt von app.js. */
  .beleg-vorschau { position: sticky; top: calc(var(--kopf-h, 76px) + 12px); max-height: calc(100vh - var(--kopf-h, 76px) - 24px); overflow: auto; padding: 12px; }
  .beleg-vorschau > h2 { display: none; }
  .fotoraster img.beleg-bild { max-height: none; }
  .fotoraster.eins li { overflow: auto; }
  .pdf-vorschau { margin: 0 0 12px; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; background: var(--flaeche); }
  .pdf-vorschau iframe { display: block; width: 100%; height: calc(100vh - 190px); min-height: 420px; border: 0; }
}
.zoom-hinweis { margin: 0 0 8px; }
/* Beschriftung mit Knopf dahinter (z. B. "Bezahlt am" + "Heute"). Der Knopf ist optisch so hoch wie die Beschriftung
   (24 px), damit Felder nebenan auf gleicher Höhe bleiben; die Tippfläche ist per ::after unsichtbar auf ≥ 44 px vergrößert. */
.label-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; height: 24px; }
.label-zeile label { font-weight: 600; margin: 0; white-space: nowrap; }
button.heute-knopf { position: relative; flex: none; min-height: 0; height: 24px; padding: 0 10px; font-size: .85rem; }
button.heute-knopf::after { content: ""; position: absolute; inset: -10px -4px -10px; }
/* Versand an den Steuerberater */
.versand-zeile { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; cursor: pointer; min-height: 44px; }
.versand-zeile input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--gruen); }
.versand-text { flex: 1; min-width: 0; }
.versand-text .zeile2 { display: block; }
.versand-text .marke { margin-left: 4px; }
.versand-ablage { border: 2px dashed var(--gruen-rand); border-radius: var(--radius); padding: 14px; background: var(--flaeche); }
.zusatz-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.versand-summe { position: sticky; bottom: 0; z-index: 5; border-color: var(--gruen-rand); }
/* Startseite › Fristen: Eintrag + "Erledigt"-Knopf nebeneinander */
.frist-zeile form { margin: 0 0 10px 12px; }
@media (min-width: 640px) {
  .frist-zeile { display: flex; align-items: center; gap: 8px; }
  .frist-zeile > .eintrag { flex: 1; min-width: 0; }
  .frist-zeile form { margin: 0; flex: none; }
}
/* Chips umbrechen statt seitlich zu scrollen (fünf Schnellfilter in der Belegliste). */
.chips.umbruch { flex-wrap: wrap; overflow-x: visible; }
/* Belege & Dokumente: aufklappbare weitere Filter */
.weitere-filter { margin: 4px 0 8px; }
.filter-raster { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .filter-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zahl-filter { font-weight: 400; color: var(--text-leise); }
/* "erledigt" auf Höhe des Datumsfelds daneben (ab zwei Spalten). */
@media (min-width: 640px) { .frist-erledigt { padding-top: 20px; } }
/* Belegliste: fehlende Pflichtangaben leicht gelb-orange, vollständig erfasst leicht grün. */
.liste > li.beleg-offen { background: #ffeed8; }
.liste > li.beleg-offen a.eintrag:hover { background: #ffe3bd; }
.liste > li.beleg-fertig { background: #e3f3e8; }
.liste > li.beleg-fertig a.eintrag:hover { background: #d2ebd9; }
/* Einstellungen › Tätigkeiten: Name oben, Haken darunter (Handy); ab 600 px in einer Zeile. */
.taetigkeit-zeile { display: grid; grid-template-columns: 1fr; gap: 2px; margin-bottom: 12px; }
.taetigkeit-haken { display: flex; gap: 18px; }
@media (min-width: 600px) { .taetigkeit-zeile { grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-bottom: 6px; } }
.monatswahl { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
/* Feste Breite nach dem längsten Namen ("September 2026"), damit die Pfeile nie wandern. */
.monatsname { margin: 0; flex: none; width: 15ch; text-align: center; white-space: nowrap; }
a.knopf[aria-disabled="true"] { opacity: .5; pointer-events: none; }
code { font-size: .88em; background: var(--flaeche); padding: 1px 4px; border-radius: 4px; }
/* ---------- Zeiterfassung ---------- */
.timer.laeuft { border: 2px solid var(--gruen-hell); background: var(--gruen-flaeche); }
.timer-anzeige { font-variant-numeric: tabular-nums; color: var(--gruen); margin-left: 6px; }
.tag-kopf { display: flex; justify-content: space-between; gap: 8px; margin: 18px 0 2px; padding-bottom: 4px; border-bottom: 2px solid var(--gruen-rand); font-size: 1rem; }
.kalk { display: grid; gap: 4px 16px; grid-template-columns: 1fr auto; margin: 0; font-variant-numeric: tabular-nums; }
.kalk dt { color: var(--text-leise); }
.kalk dd { margin: 0; text-align: right; white-space: nowrap; }
.kalk .gross { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.op-zahlung { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.op-zahlung input[type=date] { width: auto; flex: 1 1 10rem; }

/* ---------- Bildansicht (Popup) ---------- */
dialog.bildansicht {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 20, 14, .97); color: #fff;
}
dialog.bildansicht::backdrop { background: rgba(10, 20, 14, .6); }
dialog.bildansicht figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 16px; }
dialog.bildansicht img { max-width: 100%; max-height: calc(100dvh - 110px); object-fit: contain; border-radius: 4px; background: #fff; }
dialog.bildansicht figcaption { margin-top: 10px; font-size: .95rem; color: #dfe8d8; min-height: 1.4em; text-align: center; }
dialog.bildansicht button {
  position: absolute; min-width: 48px; min-height: 48px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
dialog.bildansicht button:hover { background: rgba(255,255,255,.26); }
dialog.bildansicht .ba-zu { top: 8px; right: 8px; font-size: 1.3rem; }
dialog.bildansicht .ba-vor { left: 8px; top: 50%; transform: translateY(-50%); }
dialog.bildansicht .ba-nach { right: 8px; top: 50%; transform: translateY(-50%); }
html.ba-offen { overflow: hidden; }

/* ---------- Formulargruppen (z. B. Beleg-Angaben) ---------- */
.formgruppe { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--rand); }
.formgruppe:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.formgruppe-titel { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }
.pflicht { color: var(--rot); font-weight: 700; }
/* Felder einer Reihe oben bündig, Hinweise darunter dürfen unterschiedlich lang sein. */
.reihe { align-items: start; }

/* ---------- Vorschläge (Beleg-Erkennung) ---------- */
.vorschlaege { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
/* Deutlich als "antippbar" erkennbar: hellgrün gefüllt mit Logo-Grün als Rand; übernommen = dunkelgrün. */
.vorschlaege-titel { font-size: .85rem; font-weight: 600; color: var(--gruen); }
.vorschlag {
  min-height: 36px; padding: 4px 12px; border: 2px solid var(--gruen-hell); border-radius: 999px;
  background: var(--gruen-flaeche); color: var(--gruen); font: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: var(--schatten);
}
.vorschlag::before { content: "+ "; }
.vorschlag:hover { background: #e2edc4; border-color: var(--gruen); }
.vorschlag[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }
.vorschlag[aria-pressed="true"]::before { content: "✓ "; }
@media (pointer: coarse) { .vorschlag { min-height: 44px; } }

/* ---------- Drag & Drop ---------- */
.ablage { position: relative; transition: background-color .15s, border-color .15s; }
.ablage-aktiv { border: 2px dashed var(--gruen) !important; background: var(--gruen-flaeche) !important; }
.ablage-aktiv::after {
  content: "Loslassen zum Hochladen"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--gruen); background: rgba(238, 244, 220, .88); border-radius: var(--radius); pointer-events: none;
}
.ablage-hinweis { text-align: center; color: var(--text-leise); margin: 8px 0 0; }
@media (pointer: coarse) { .ablage-hinweis { display: none; } } /* auf dem Handy gibt es kein Ziehen */

[hidden] { display: none !important; }