/* Einsatz-Dashboard im Havelland-Design (Tokens aus havelland-design/tokens.css):
   Serife führt, die dunkelgrüne Zone trägt die Monatsrechnung, darunter die Einsätze als Tabelle
   (Rechner) oder als Kassenbon-Karten (Handy). Der Holzton gehört allein dem Speichern-Knopf. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/fraunces-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("fonts/fraunces-italic-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/inter-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Marke (havelland-design) */
  --green: #205840;
  --green-d: #16412D;
  --green-deep: #0E2E1F;
  --accent: #E0A23B;
  --accent-d: #C2851F;
  --accent-ink: #3A2A06;
  --success: #3F9B63;
  --error: #D6453F;

  /* Rollen, hell */
  --background: #FBFAF6;   /* cream */
  --karte: #F7F6F2;        /* paper */
  --karte-hover: #ECE9E0;  /* surface2 */
  --feld: #FFFFFF;
  --linie: #E2DED3;        /* hair */
  --feld-rand: #B7B9B0;
  --text1: #15201A;        /* ink */
  --text2: #39413A;
  --text3: #6B726B;        /* muted */
  --text4: #B7B9B0;
  --titel: #16412D;
  --link: #205840;
  --punkt: #205840;
  --warn: #A8322C;
  --loesch: #A8322C;
  --knopf: #205840;
  --knopf-hover: #16412D;
  --knopf-text: #FFFFFF;

  /* Dunkle Zone: Kopf mit der Monatsrechnung, Abschlussleiste */
  --band: #16412D;
  --band-tief: #0E2E1F;
  --band-text: #FFFFFF;
  --band-text2: #DCEAE1;
  --band-linie: rgba(220, 234, 225, 0.24);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --r-button: 999px;
  --r-card: 18px;
  --r-el: 12px;
  --sh-cta: 0 8px 22px -8px rgba(224, 162, 59, 0.7);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --seite: 86rem;
  --schmal: 44rem;
  --rand: max(16px, env(safe-area-inset-left, 0px), calc(50% - var(--seite) / 2));
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* eigene Auswahl aus den Grüntönen der Marke, kein automatisches Umkehren */
    --background: #0E2E1F;
    --karte: #16412D;
    --karte-hover: #1C4E37;
    --feld: #123726;
    --linie: rgba(220, 234, 225, 0.16);
    --feld-rand: rgba(220, 234, 225, 0.42);
    --text1: #FFFFFF;
    --text2: #DCEAE1;
    --text3: #A9C2B4;
    --text4: #6F8C7C;
    --titel: #FFFFFF;
    --link: #DCEAE1;
    --punkt: #DCEAE1;
    --error: #F08A84;
    --loesch: #F08A84;
    --knopf: #DCEAE1;
    --knopf-hover: #FFFFFF;
    --knopf-text: #0E2E1F;
    --band: #16412D;
    --band-tief: #0A2418;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text1);
  font: 400 17px/1.62 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Eyebrow wie auf der Website: klein, gesperrt, Versalien */
.summen dt,
.rechnung dt,
.einsaetze th,
.marke-abgesagt,
.marke-hand,
.heute-marke {
  font: 600 11.5px/1.3 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Kopfleiste ─────────────────────────────────────────────────────────── */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding-block: 10px;
  padding-inline: var(--rand);
  background: var(--background);
  border-bottom: 1px solid var(--linie);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 600 1.375rem/1 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--titel);
  text-decoration: none;
}

.marke img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #FFFFFF;
}

.abmelden {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

/* Linien-Knopf (Website: .btn-line) */
.abmelden button,
.nebenweg a,
.monatswahl a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1.5px solid var(--link);
  border-radius: var(--r-button);
  background: transparent;
  color: var(--titel);
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.abmelden button:hover,
.nebenweg a:hover {
  background: var(--green-d);
  border-color: var(--green-d);
  color: #FFFFFF;
}

.monatswahl a {
  border-color: var(--band-text2);
  color: var(--band-text);
}

.monatswahl a:hover {
  background: var(--band-text);
  border-color: var(--band-text);
  color: var(--green-d);
}

.abmelden button:active,
.nebenweg a:active,
.monatswahl a:active { transform: scale(0.96); }

/* Knopf je Einsatz: führt zur Eingabemaske. Gefüllt = noch nichts eingetragen, Linie = schon gespeichert. */
.zeilenknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1.5px solid var(--knopf);
  border-radius: var(--r-button);
  background: var(--knopf);
  color: var(--knopf-text);
  font: 600 14px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.zeilenknopf.leise {
  border-color: var(--feld-rand);
  background: transparent;
  color: var(--titel);
}

.zeilenknopf:hover,
.zeilenknopf.leise:hover {
  border-color: var(--knopf-hover);
  background: var(--knopf-hover);
  color: var(--knopf-text);
}

.zeilenknopf:active { transform: scale(0.96); }

/* ── Dunkelgrüne Zone mit Monat und Rechnung ────────────────────────────── */

.bilanz {
  padding-block: 26px 32px;
  padding-inline: var(--rand);
  background: var(--band);
  color: var(--band-text2);
}

.bilanz h1 {
  color: var(--band-text);
  font-size: clamp(2.5rem, 8.4vw, 4.5rem);
}

/* genau ein kursives Akzentwort, auf Dunkelgrün im Holzton (wie im Value-Band der Website) */
.bilanz h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}

.bilanz-schmal h1 {
  max-width: var(--schmal);
  font-size: clamp(1.875rem, 6.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.monatswahl {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: ". zurueck vor" "titel titel titel";
  gap: 14px 8px;
  align-items: center;
}

.monatswahl h1 { grid-area: titel; }
.monatswahl > :first-child { grid-area: zurueck; }
.monatswahl > :last-child { grid-area: vor; }

.summen {
  display: grid;
  margin: 26px 0 0;
}

.summen > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
}

.summen dt,
.rechnung dt { color: var(--band-text2); }

.summen dd,
.rechnung dd {
  margin: 0;
  font: 600 1.125rem/1.2 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--band-text);
  white-space: nowrap;
}

.summe-minus dt::before,
.rechnung-minus dt::before { content: "− "; }

.summe-uebrig dt::before,
.rechnung-uebrig dt::before { content: "= "; }

/* Die eine große Zahl der Seite, in der Serife der Marke. */
.summen > .summe-uebrig {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--band-linie);
}

.summe-uebrig dd {
  font: 600 clamp(3rem, 13vw, 4rem)/1 var(--font-display);
  letter-spacing: -0.025em;
  font-variant-numeric: normal;
}

.summe-haelfte dd {
  font: 600 1.75rem/1 var(--font-display);
  letter-spacing: -0.015em;
  font-variant-numeric: normal;
}

.summen > .summe-einsaetze {
  order: 9;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--band-linie);
}

.zurueck { margin: 0 0 8px; }

.zurueck a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  font-size: 15px;
  font-weight: 500;
  color: var(--band-text2);
  text-decoration: none;
}

.zurueck a:hover { color: var(--band-text); }

.termin-daten {
  max-width: var(--schmal);
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--band-text2);
}

.termin-daten strong { color: var(--band-text); }

/* ── Hinweise ───────────────────────────────────────────────────────────── */

.warnung {
  margin: 0;
  padding: 12px var(--rand);
  background: var(--warn);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.fehler {
  max-width: var(--schmal);
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1.5px solid var(--error);
  border-radius: var(--r-el);
  background: var(--feld);
  color: var(--text1);
  font-weight: 600;
}

.leer,
.meldung {
  margin: 0;
  padding: 56px 0;
  color: var(--text3);
}

.stand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 30px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text3);
}

.stand::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.stand-alt::before { background: var(--error); }

/* ── Inhalt ─────────────────────────────────────────────────────────────── */

.inhalt {
  padding-block: 28px 72px;
  padding-inline: var(--rand);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 10px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--feld);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text2);
  white-space: nowrap;
}

/* ja = gefüllter Punkt, nein = Ring. Form statt Ampelfarbe: „nein“ ist kein Fehler. */
.tag-ja::before,
.tag-nein::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--punkt);
}

.tag-ja::before { background: var(--punkt); }
.tag-nein::before { border-color: var(--text3); }

.nichts { color: var(--text4); }

.marke-abgesagt,
.marke-hand,
.heute-marke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-style: normal;
  color: var(--text3);
  vertical-align: 2px;
}

.heute-marke { color: var(--link); }

.heute-marke::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--punkt);
}

/* Datum als kursive Serifen-Ziffern, wie die Nummern in den Listen der Website */
.einsaetze td[data-spalte="Datum"] {
  font: italic 500 1.0625rem/1.4 var(--font-display);
  color: var(--titel);
  white-space: nowrap;
}

.wochentag {
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--text3);
}

.einsaetze td[data-spalte="Datum"] small {
  font: 500 13px/1.4 var(--font-body);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--text3);
}

.einsaetze tr.abgesagt td[data-spalte="Termin"] a { text-decoration: line-through; }
.einsaetze tr.abgesagt td,
.einsaetze tr.abgesagt td.zahl,
.einsaetze tr.abgesagt td[data-spalte="Datum"],
.einsaetze tr.abgesagt td[data-spalte="Termin"] a { color: var(--text3); }

/* Nullwerte: in der Tabelle zurückgenommen, auf der Karte ausgeblendet */
.einsaetze td.null { color: var(--text4); }

/* ── Einsätze als Karten (Handy und Tablet): jede Karte ein Kassenbon ───── */

@media (max-width: 87.99rem) {
  .einsaetze,
  .einsaetze tbody,
  .einsaetze td { display: block; }

  .einsaetze thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .einsaetze tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 14px;
    align-items: start;
  }

  .einsaetze tr {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    padding: 18px 18px 16px;
    border: 1px solid var(--linie);
    border-radius: var(--r-card);
    background: var(--karte);
    transition: background-color 0.2s;
  }

  .einsaetze td {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    font-size: 15.5px;
  }

  .einsaetze td::before {
    content: attr(data-spalte);
    flex: none;
    font: 600 11px/1.4 var(--font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text3);
  }

  .einsaetze .zahl {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text1);
    white-space: nowrap;
  }

  .einsaetze td[data-spalte="Datum"]::before,
  .einsaetze td[data-spalte="Termin"]::before { content: none; }

  .einsaetze td[data-spalte="Datum"] {
    order: -2;
    display: block;
    padding: 0 0 4px;
  }

  .einsaetze td[data-spalte="Termin"] {
    order: -1;
    display: block;
    padding: 0 0 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--linie);
  }

  .einsaetze td[data-spalte="Termin"] a {
    font: 600 1.3125rem/1.2 var(--font-display);
    color: var(--titel);
    text-decoration: none;
  }

  /* die ganze Karte ist der Link */
  .einsaetze td[data-spalte="Termin"] a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-card);
  }

  .einsaetze td[data-spalte="Termin"] small {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text3);
  }

  .einsaetze td[data-spalte="Angebot"],
  .einsaetze td[data-spalte="Rechnung"] {
    display: block;
    padding-bottom: 8px;
  }

  .einsaetze td[data-spalte="Angebot"]::before,
  .einsaetze td[data-spalte="Rechnung"]::before {
    display: block;
    margin-bottom: 7px;
  }

  .einsaetze td[data-spalte="Angebot"] { order: 1; grid-column: 1; }
  .einsaetze td[data-spalte="Rechnung"] { order: 2; grid-column: 2; }

  .einsaetze td[data-spalte="Preis"] {
    order: 3;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--linie);
  }

  .einsaetze td[data-spalte="Externe Ausgaben"] { order: 4; }
  .einsaetze td[data-spalte="Externe Ausgaben"]::before { content: "− Externe Ausgaben"; }
  .einsaetze td[data-spalte="Mitarbeiter"] { order: 5; grid-column: 1; }
  .einsaetze td[data-spalte="Stunden"] { order: 6; grid-column: 2; }
  .einsaetze td[data-spalte="Helferkosten"] { order: 7; }
  .einsaetze td[data-spalte="Helferkosten"]::before { content: "− Helferkosten"; }

  .einsaetze td[data-spalte="Übrig"] {
    order: 8;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1.5px solid var(--titel);
    font: 600 1.375rem/1.2 var(--font-display);
    color: var(--titel);
  }

  .einsaetze td[data-spalte="Übrig"]::before { content: "= Übrig"; color: var(--titel); }
  .einsaetze td[data-spalte="Hälfte"] { order: 9; }
  .einsaetze td.null { display: none; }

  .einsaetze td.aktion {
    order: 10;
    display: block;
    padding: 14px 0 0;
  }

  .einsaetze td.aktion::before { content: none; }

  /* liegt über dem Karten-Link, damit der Knopf selbst auf Zeigen und Drücken reagiert */
  .einsaetze td.aktion .zeilenknopf {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 44px;
    font-size: 15px;
  }

  .einsaetze tr:hover { background: var(--karte-hover); }
}

/* ── Einsätze als Tabelle (Rechner) ─────────────────────────────────────── */

@media (min-width: 88rem) {
  /* Sicherheitsnetz: wird die Tabelle doch zu breit, scrollt nur sie, nie die Seite */
  .tabellenrahmen { overflow-x: auto; }

  .einsaetze {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45;
  }

  .einsaetze th {
    padding: 10px 8px 12px;
    border-bottom: 1.5px solid var(--titel);
    letter-spacing: 0.12em;
    text-align: left;
    vertical-align: bottom;
    color: var(--text3);
  }

  .einsaetze td {
    padding: 15px 8px;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
  }

  .einsaetze .zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .einsaetze td.zahl {
    font-weight: 500;
    white-space: nowrap;
  }

  .einsaetze td small {
    display: block;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text3);
  }

  .einsaetze th:nth-child(2) { width: 28%; }
  .einsaetze td[data-spalte="Termin"] { min-width: 12rem; }

  /* „heute“ steht unter dem Datum, das hält die Datumsspalte schmal */
  .einsaetze td[data-spalte="Datum"] .heute-marke {
    display: flex;
    margin: 4px 0 0;
  }

  .einsaetze td[data-spalte="Termin"] a {
    font-weight: 600;
    color: var(--text1);
    text-decoration: none;
    transition: color 0.2s;
  }

  .einsaetze td[data-spalte="Termin"] a:hover { color: var(--link); }

  /* die zwei Ergebnisspalten stehen als ruhiges Band */
  .einsaetze th:nth-child(10),
  .einsaetze th:nth-child(11),
  .einsaetze td[data-spalte="Übrig"],
  .einsaetze td[data-spalte="Hälfte"] {
    background: var(--karte);
  }

  .einsaetze td[data-spalte="Übrig"],
  .einsaetze td[data-spalte="Hälfte"] {
    font-weight: 700;
    color: var(--titel);
  }

  /* die ganze Zeile öffnet die Eingabemaske (monat.js), der Knopf am Ende sagt es */
  .einsaetze tbody tr[data-ziel] { cursor: pointer; }

  .einsaetze td.aktion {
    padding: 9px 0 9px 8px;
    text-align: right;
    white-space: nowrap;
  }

  .einsaetze td.aktion .zeilenknopf {
    min-height: 34px;
    padding: 0 13px;
    font-size: 13.5px;
  }

  .einsaetze tbody tr:hover td { background: var(--karte); }
  .einsaetze tbody tr:hover td[data-spalte="Übrig"],
  .einsaetze tbody tr:hover td[data-spalte="Hälfte"] { background: var(--karte-hover); }
}

/* ── Formulare ──────────────────────────────────────────────────────────── */

.einsatz-form,
.neu-form { max-width: var(--schmal); }
.login-form { max-width: 24rem; }
.neu-form .haupt { margin-top: 24px; }
.inhalt > .hinweis { margin: 0 0 24px; }

fieldset {
  min-width: 0;
  margin: 0 0 34px;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 14px;
  padding: 0;
  font: 600 1.3125rem/1.2 var(--font-display);
  color: var(--titel);
}

.felder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

label {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text2);
}

input,
select,
textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--feld-rand);
  border-radius: var(--r-el);
  background: var(--feld);
  color: var(--text1);
  font: 500 17px/1.3 var(--font-body);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s;
}

textarea {
  min-height: 100px;
  font-weight: 400;
  line-height: 1.55;
  resize: vertical;
}

input::placeholder { color: var(--text4); opacity: 1; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--link);
  border-radius: var(--r-el);
}

.login-form input { margin-bottom: 16px; }

.ausgabe {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.ausgabe > :nth-child(3) { grid-column: 1 / -1; font-weight: 400; }

.hinweis {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text3);
}

/* ── Nebenwege: von Hand anlegen, löschen, Fußzeile, Fließtext ──────────── */

.nebenweg { margin: 22px 0 0; }

/* Kommt noch: Termine des Monats, deren Tag noch nicht da ist. Zugeklappt, nur zur Ansicht. */
.kommend {
  max-width: var(--schmal);
  margin: 30px 0 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.kommend summary {
  padding: 14px 0;
  font: 600 15px/1.4 var(--font-body);
  color: var(--titel);
  cursor: pointer;
}

.kommend summary::marker { color: var(--text3); }

.kommend p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text3);
}

.kommend ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kommend li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--linie);
  font-size: 15px;
  line-height: 1.45;
}

.kommend-tag {
  flex: none;
  min-width: 6.25rem;
  font: italic 500 1rem/1.4 var(--font-display);
  color: var(--titel);
  white-space: nowrap;
}

.kommend-tag small {
  font: 500 13px/1.4 var(--font-body);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--text3);
}

.loeschen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  max-width: var(--schmal);
  margin: 40px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
}

.loeschen p {
  margin: 0;
  font-size: 14px;
  color: var(--text3);
}

.loeschen button {
  min-height: 42px;
  padding: 0 18px;
  border: 1.5px solid var(--loesch);
  border-radius: var(--r-button);
  background: transparent;
  color: var(--loesch);
  font: 600 15px/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.loeschen button:hover {
  background: var(--loesch);
  color: var(--background);
}

.fuss {
  padding: 0 var(--rand) 36px;
  font-size: 13px;
  color: var(--text3);
}

.fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-underline-offset: 3px;
}

.text { max-width: calc(var(--schmal) + 2 * 32px); }

.text h2 {
  margin: 34px 0 8px;
  font: 600 1.3125rem/1.2 var(--font-display);
  color: var(--titel);
}

.text p,
.text ul {
  max-width: 65ch;
  margin: 0 0 12px;
  color: var(--text2);
}

.text ul { padding-left: 1.2em; }
.text li { margin-bottom: 6px; }

/* ── Abschluss: Rechnung und Speichern bleiben beim Scrollen sichtbar ───── */

.abschluss {
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
  border: 1px solid var(--band-linie);
  border-radius: var(--r-card);
  background: var(--band-tief);
  color: var(--band-text2);
  box-shadow: 0 18px 40px -22px rgba(14, 46, 31, 0.6);
}

.rechnung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 0;
}

/* Auf dem Handy zeigt die Leiste nur das Ergebnis; die Zwischenzeilen stehen ab Rechner im Kassenbon. */
.rechnung-preis,
.rechnung-ausgaben,
.rechnung-helfer { display: none; }

.rechnung-uebrig dd,
.rechnung-haelfte dd {
  margin-top: 5px;
  font: 600 1.625rem/1.1 var(--font-display);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* Der eine Holz-Knopf (Website: .btn-acc) */
.haupt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--r-button);
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 16px/1 var(--font-body);
  box-shadow: var(--sh-cta);
  cursor: pointer;
  transition: transform 0.14s var(--ease), background-color 0.2s, box-shadow 0.2s;
}

.haupt:hover {
  background: var(--accent-d);
  box-shadow: 0 12px 28px -8px rgba(224, 162, 59, 0.8);
}

.haupt:active { transform: scale(0.96); }

/* ── Ab Tablet ──────────────────────────────────────────────────────────── */

@media (min-width: 36rem) {
  .felder { grid-template-columns: 1fr 1fr; }
  .feld-breit { grid-column: 1 / -1; max-width: calc(50% - 8px); }

  .ausgabe { grid-template-columns: 11rem 9rem minmax(0, 1fr); }
  .ausgabe > :nth-child(3) { grid-column: auto; }

  .abschluss {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 18px 22px;
  }

  .rechnung { grid-template-columns: auto auto; justify-content: start; gap: 4px 44px; }

  .abschluss .haupt { width: auto; min-width: 11rem; }
  .login-form .haupt,
  .neu-form .haupt { width: auto; min-width: 11rem; }
  .neu-form .feld:nth-child(n+2) { grid-column: 1 / -1; }
}

@media (min-width: 48rem) {
  :root { --rand: max(32px, env(safe-area-inset-left, 0px), calc(50% - var(--seite) / 2)); }

  .bilanz { padding-block: 36px 44px; }

  .monatswahl {
    grid-template-areas: "titel zurueck vor";
    align-items: end;
  }

  .monatswahl a { margin-bottom: 8px; }
}

/* ── Ab Rechner: die Monatsrechnung als eine Zeile ──────────────────────── */

@media (min-width: 64rem) {
  .summen {
    grid-template-columns: auto auto auto auto 1fr auto;
    column-gap: 52px;
    align-items: end;
    margin-top: 38px;
    padding-top: 28px;
    border-top: 1px solid var(--band-linie);
  }

  .summen > div,
  .summen > .summe-uebrig,
  .summen > .summe-einsaetze {
    order: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .summen dd { font-size: 1.375rem; }

  .summe-minus dt::before,
  .summe-uebrig dt::before { content: none; }

  .summe-minus dd::before {
    content: "− ";
    font-weight: 400;
    color: var(--band-text2);
  }

  .summe-uebrig dd { font-size: clamp(3.5rem, 5vw, 4.5rem); }

  .summe-uebrig dd::before {
    content: "= ";
    font-weight: 400;
    color: var(--band-text2);
  }

  .summe-haelfte dd { font-size: 2.25rem; }

  /* Einsatzformular links, die Rechnung als Kassenbon rechts */
  .einsatz-form {
    display: grid;
    grid-template-columns: minmax(0, var(--schmal)) minmax(18rem, 23rem);
    column-gap: 56px;
    align-items: start;
    max-width: none;
  }

  .einsatz-form > * { grid-column: 1; }

  .einsatz-form > .abschluss {
    grid-column: 2;
    grid-row: 1 / span 12;
    position: sticky;
    top: 24px;
    bottom: auto;
    display: block;
    padding: 26px 26px 28px;
  }

  .rechnung { display: block; }

  .rechnung > div,
  .rechnung-preis,
  .rechnung-ausgaben,
  .rechnung-helfer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0;
  }

  .rechnung > .rechnung-uebrig {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--band-linie);
  }

  .rechnung-uebrig dd {
    margin: 0;
    font-size: 2.75rem;
    line-height: 1;
    letter-spacing: -0.025em;
  }

  .rechnung-haelfte dd { margin: 0; font-size: 1.75rem; }

  .abschluss .haupt { width: 100%; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
  .haupt:active, .abmelden button:active, .monatswahl a:active { transform: none; }
}