@charset "utf-8";
/* ==========================================================================
   Ferienwohnung Am Musterbach — Arbeitsprobe von FS-Solutions
   Richtung „Belegung zuerst": der Kalender ist die Startseite.

   WAS DIESE GESTALTUNG BEWUSST NICHT TUT
   Kein Titelbild, kein Verlauf, kein Schatten, kein schwebendes Kärtchen,
   keine Radien über 3px. Nicht aus Sparsamkeit: das sind die Merkmale, an
   denen man einer Seite ansieht, dass sie aus einem Generator kommt. Die
   Ordnung entsteht hier über Linien, Flächen und Schriftgrößen.

   EIGENES GESICHT, NICHT DAS VON FS-SOLUTIONS
   fs-solutions.org ist dunkel mit orangem Akzent. Diese Seite ist hell mit
   Tannengrün. Eine Arbeitsprobe, die aussieht wie die Seite des Erstellers,
   beweist nur einen Geschmack — nicht die Fähigkeit, für einen anderen
   Betrieb zu arbeiten.

   MASSE
   Die Hülle hat KEIN max-width. Begrenzt wird das Lesemaß der Textblöcke in
   ch, nie die Fläche — auf einem 3400px-Monitor ist eine zentrierte Spalte
   mit Leerraum links und rechts ein Fehler, keine Gestaltung.
   ========================================================================== */

:root {
  color-scheme: light;

  --ff: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;

  /* Farben. Die Kontrastwerte stehen dahinter, gemessen mit
     werkzeug/seite-pruefen.mjs gegen --papier. */
  --papier:  #faf9f6;
  --blatt:   #ffffff;
  --linie:   #e4e0d8;
  --linie2:  #c6c0b4;
  --ink:     #1b1a17;   /* 16.6:1 */
  --ink2:    #5a554c;   /*  7.1:1 */
  --ink3:    #6f6a5f;   /*  5.2:1 — heller wäre unter 4.5:1 gefallen */
  --akz:     #1f5d4c;   /*  7.4:1, und Weiß darauf 7.7:1 */
  --akz-tief:#164437;
  --belegt:  #ebe7de;
  --warn:    #8a3d16;
  /* Vergangene Tage. WCAG 1.4.3 nimmt gesperrte Bedienelemente ausdrücklich
     von der Kontrastschwelle aus — mit --linie2 lagen sie bei 1.81:1 und
     wären regelkonform gewesen. Trotzdem angehoben auf 3.39:1: die Tagesziffer
     bleibt Orientierung, auch wenn man sie nicht mehr anklicken kann. Sie
     bleibt sichtbar zurückgenommen, also stimmt die Rangfolge weiter. */
  --inaktiv: #918b7e;

  --t-h1:    clamp(2.1rem, 1.3rem + 3.4vw, 4.2rem);
  --t-h2:    clamp(1.45rem, 1.15rem + 1.2vw, 2.2rem);
  --t-h3:    clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --t-text:  1.0625rem;
  --t-klein: 0.9375rem;
  --t-meta:  0.8125rem;

  --rand: clamp(1.15rem, 5vw, 9rem);
  --sp:   clamp(2.6rem, 5vw, 5.5rem);
  --lese: 62ch;
  --r:    2px;

  /* Der Kalender braucht ein Mindestmaß und eine Obergrenze: unter 44px
     trifft man die Tage nicht, über ~76px wird der Monat zur Landkarte. */
  --tag-min: 44px;
  --tag-max: 76px;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--ink);
  font: 400 var(--t-text)/1.62 var(--ff);
  font-synthesis-weight: none;
  overflow-x: hidden;   /* Sicherheitsnetz, kein Ersatz für richtige Maße */
}

/* Silbentrennung NUR im Fließtext. In Überschriften erzeugt sie Brüche wie
   „kei-ne", und das ist in einer Überschrift immer falsch. */
p, li, dd, td, figcaption, label { hyphens: auto; }
h1, h2, h3, th, dt, caption, .knopf, .kal__spanne { hyphens: manual; }

h1, h2, h3 {
  margin: 0;
  font-weight: 660;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); letter-spacing: -0.024em; }
h3 { font-size: var(--t-h3); letter-spacing: -0.014em; }
p  { margin: 0; }

a { color: var(--akz); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--akz-tief); }

:focus-visible {
  outline: 3px solid var(--akz);
  outline-offset: 2px;
  border-radius: var(--r);
}

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

.sprung {
  position: absolute;
  left: 0.5rem; top: -3.5rem;
  z-index: 50;
  padding: 0.7rem 1.1rem;
  background: var(--akz);
  color: #fff;
  border-radius: var(--r);
  text-decoration: none;
  transition: top 0.14s;
}
.sprung:focus { top: 0.5rem; color: #fff; }

/* ---------- Musterband ---------------------------------------------------- */
.band {
  background: var(--ink);
  color: #f2f0ec;
  padding: 0.7rem var(--rand);
  font-size: var(--t-meta);
  line-height: 1.5;
}
.band p { max-width: 96ch; }
.band strong { color: #fff; }
.band a { color: #ffd9c6; }   /* 8.9:1 auf --ink */
.band a:hover { color: #fff; }

/* ---------- Kopf --------------------------------------------------------- */
.kopf {
  padding: clamp(2rem, 5vw, 4.5rem) var(--rand) 0;
}
.kopf__zeile { max-width: 34ch; }
.ort {
  font-size: var(--t-meta);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 0.9rem;
}
.kopf h1 { margin-bottom: 1.1rem; }
.vorspann {
  max-width: var(--lese);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.22rem);
  color: var(--ink2);
  text-wrap: pretty;
}

.fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
  background: var(--linie);
  border: 1px solid var(--linie);
}
.fakten > div {
  background: var(--papier);
  padding: 0.9rem 1rem;
}
.fakten dt {
  font-size: var(--t-meta);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink3);
}
.fakten dd {
  margin: 0.15rem 0 0;
  font-size: 1.3rem;
  font-weight: 640;
  letter-spacing: -0.02em;
}
.fakten dd span { font-size: 0.85rem; font-weight: 400; color: var(--ink2); }

/* ---------- Belegung ----------------------------------------------------- */
.belegung { padding: var(--sp) var(--rand) 0; }
.belegung__kopf { max-width: var(--lese); margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.belegung__hilfe {
  margin-top: 0.7rem;
  color: var(--ink2);
  font-size: var(--t-klein);
}

.kal {
  border: 1px solid var(--linie2);
  border-radius: var(--r);
  background: var(--blatt);
}
.kal__leiste {
  display: grid;
  grid-template-columns: var(--tag-min) minmax(0, 1fr) var(--tag-min);
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--linie);
}
.kal__pfeil {
  width: var(--tag-min); height: var(--tag-min);
  display: grid; place-items: center;
  border: 1px solid var(--linie2);
  border-radius: var(--r);
  background: var(--blatt);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.kal__pfeil:hover:not(:disabled) { background: var(--papier); border-color: var(--ink3); }
.kal__pfeil:disabled { color: var(--linie2); cursor: not-allowed; }
.kal__spanne {
  text-align: center;
  font-weight: 620;
  font-size: var(--t-h3);
  letter-spacing: -0.012em;
}

.kal__monate { padding: 0.75rem; display: grid; gap: 1.75rem; }
.kal__ohne { color: var(--ink2); font-size: var(--t-klein); padding: 0.5rem; }

.monat__name {
  margin: 0 0 0.5rem;
  font-size: var(--t-klein);
  font-weight: 640;
  letter-spacing: 0.02em;
}
.monat__tage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.wtag {
  padding: 0.35rem 0;
  text-align: center;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink3);
}

/* Ein Tag ist ein echter Knopf. Kein div mit Klick-Listener: ein Knopf ist mit
   der Tastatur erreichbar, kennt einen gesperrten Zustand und wird von
   Screenreadern als bedienbar angekündigt — alles drei müsste man sonst
   von Hand nachbauen und würde die Hälfte vergessen. */
.tag {
  position: relative;
  min-height: var(--tag-min);
  max-height: var(--tag-max);
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--papier);
  color: var(--ink);
  font: 500 var(--t-klein)/1 var(--ff);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.tag:hover:not([aria-disabled='true']) { border-color: var(--akz); }
.tag--leer { background: none; cursor: default; }

/* Belegte Tage: Fläche UND Schraffur UND Durchstreichung. Farbe allein wäre
   für rund jeden zwölften Mann nicht unterscheidbar — das ist genau der
   Mangel, den die alte Fassung hat. */
/* aria-disabled statt :disabled — siehe belegung.js: ein echtes disabled
   nimmt dem Tag die Fokusfähigkeit und blockiert damit die Tastaturbedienung. */
.tag[aria-disabled='true'] {
  background: var(--belegt);
  background-image: repeating-linear-gradient(
    135deg, transparent 0 4px, rgba(90, 85, 76, 0.22) 4px 5px);
  color: var(--ink2);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.tag--vergangen[aria-disabled='true'] {
  background: none;
  background-image: none;
  color: var(--inaktiv);
  text-decoration: none;
}

.tag--rand {
  background: var(--akz);
  border-color: var(--akz);
  color: #fff;
  font-weight: 660;
}
.tag--drin {
  background: #dbe7e2;      /* 4.9:1 für --ink darauf */
  border-color: #dbe7e2;
  color: var(--akz-tief);
  font-weight: 600;
}

.kal__melde {
  margin: 0 0.75rem 0.75rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--warn);
  background: #fbf3ee;
  color: var(--warn);
  font-size: var(--t-klein);
}

/* Gesperrter Verweis: bleibt für Screenreader erklärbar, sieht aber nicht
   bedienbar aus. Bewusst NUR auf a — die Kalendertage tragen dasselbe Merkmal
   und haben ihre eigene, aussagekräftigere Darstellung. */
a[aria-disabled='true'] { opacity: 0.5; }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  margin: 0;
  padding: 0.85rem 1rem;
  list-style: none;
  border-top: 1px solid var(--linie);
  font-size: var(--t-meta);
  color: var(--ink2);
}
.legende li { display: flex; align-items: center; gap: 0.45rem; }
.probe {
  width: 1.05rem; height: 1.05rem;
  border: 1px solid var(--linie2);
  border-radius: var(--r);
  flex: none;
}
.probe--frei { background: var(--papier); }
.probe--belegt {
  background: var(--belegt);
  background-image: repeating-linear-gradient(
    135deg, transparent 0 3px, rgba(90, 85, 76, 0.3) 3px 4px);
}
.probe--gewaehlt { background: var(--akz); border-color: var(--akz); }

/* ---------- Rechnung ----------------------------------------------------- */
.rechnung {
  margin-top: 1.5rem;
  border: 1px solid var(--linie2);
  border-radius: var(--r);
  background: var(--blatt);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.rechnung h3 { margin-bottom: 0.8rem; }
.rechnung__leer { color: var(--ink2); font-size: var(--t-klein); }
.rechnung__zeitraum {
  font-size: 1.15rem;
  font-weight: 620;
  letter-spacing: -0.015em;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linie);
}

.zaehler { display: grid; gap: 0.15rem; padding: 0.6rem 0; }
.zaehler__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
}
.zaehler__was { font-size: var(--t-klein); }
.zaehler__was i { display: block; font-style: normal; font-size: var(--t-meta); color: var(--ink3); }
.zaehler__steuer { display: flex; align-items: center; gap: 0.3rem; flex: none; }
.zaehler__steuer button {
  width: 44px; height: 44px;
  border: 1px solid var(--linie2);
  border-radius: var(--r);
  background: var(--blatt);
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.zaehler__steuer button:hover:not(:disabled) { background: var(--papier); border-color: var(--ink3); }
.zaehler__steuer button:disabled { color: var(--linie2); cursor: not-allowed; }
.zaehler__steuer output {
  min-width: 2.4ch;
  text-align: center;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}
.zaehler__hund { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.zaehler__hund input { width: 24px; height: 24px; accent-color: var(--akz); flex: none; }
.zaehler__hund span { font-size: var(--t-klein); }
.zaehler__hund i { font-style: normal; color: var(--ink3); font-size: var(--t-meta); }

.hinweis {
  margin: 0.4rem 0;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--warn);
  background: #fbf3ee;
  color: var(--warn);
  font-size: var(--t-klein);
}

.posten { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.posten td, .posten th { padding: 0.4rem 0; text-align: left; font-weight: 400; }
.posten td:last-child, .posten th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.posten tbody tr { border-top: 1px solid var(--linie); font-size: var(--t-klein); }
.posten tbody td:first-child { color: var(--ink2); }
.posten tfoot tr { border-top: 2px solid var(--ink); }
.posten tfoot th, .posten tfoot td {
  padding-top: 0.65rem;
  font-size: 1.25rem;
  font-weight: 680;
  letter-spacing: -0.02em;
}
.posten__fuss { margin: 0.7rem 0 1.1rem; font-size: var(--t-meta); color: var(--ink3); }

/* ---------- Knöpfe ------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--akz);
  border-radius: var(--r);
  background: none;
  color: var(--akz);
  font: 620 var(--t-klein)/1.2 var(--ff);
  letter-spacing: -0.008em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.knopf--voll { background: var(--akz); color: #fff; width: 100%; }
.knopf--voll:hover { background: var(--akz-tief); border-color: var(--akz-tief); color: #fff; }
.knopf--gross { min-height: 54px; font-size: 1rem; }

/* ---------- Klebender Balken (nur Telefon) ------------------------------- */
.balken {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  margin-top: var(--sp);
  padding: 0.7rem var(--rand) calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--blatt);
  border-top: 1px solid var(--linie2);
}
.balken__zahlen { display: grid; min-width: 0; }
.balken__zahlen span { font-size: var(--t-meta); color: var(--ink2); }
.balken__zahlen strong {
  font-size: 1.2rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.balken .knopf { width: auto; padding-inline: 1.5rem; }

/* ---------- Textblöcke --------------------------------------------------- */
.block { padding: var(--sp) var(--rand) 0; }
.block > h2 { margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem); }
.text { max-width: var(--lese); color: var(--ink2); text-wrap: pretty; }
.text p + p { margin-top: 0.9rem; }
.text--klein { font-size: var(--t-klein); color: var(--ink3); margin-top: 1.4rem; }

.spalten { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }

.liste { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--linie); }
/* EINSPALTIG IST DER AUSGANGSPUNKT, nicht der Sonderfall.
   Zuerst stand hier zweispaltig mit minmax(9rem, 12rem) für den Begriff. Bei
   320px nahm die erste Spalte 192px, für den Wert blieben 75px — und
   „Geschirrspüler" ist breiter als das. Gemessen: 12px Überlauf der ganzen
   Seite, verursacht von einem einzigen dd. Genau dieser Fehler entsteht,
   wenn man die breite Fassung zuerst baut und die schmale davon ableitet. */
.liste > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linie);
}
.liste dt { font-size: var(--t-klein); font-weight: 620; }
.liste dd {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--ink2);
  /* Sicherheitsnetz für sehr lange Einzelwörter. „anywhere" und nicht
     „break-word": nur anywhere verkleinert das min-content-Maß und kann damit
     einen Rasterüberlauf überhaupt verhindern. */
  overflow-wrap: anywhere;
}

.tarif { width: 100%; border-collapse: collapse; max-width: 48rem; }
.tarif caption {
  text-align: left;
  padding-bottom: 0.7rem;
  font-size: var(--t-klein);
  color: var(--ink3);
}
.tarif th, .tarif td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  font-size: var(--t-klein);
}
.tarif th { font-weight: 500; color: var(--ink2); }
.tarif td {
  text-align: right;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Formular ---------------------------------------------------- */
.formular {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.6rem;
  max-width: 46rem;
}
.feld { display: grid; gap: 0.35rem; }
.feld label { font-size: var(--t-klein); font-weight: 600; }
.feld__frei { font-weight: 400; color: var(--ink3); }
.feld input:not([type='checkbox']), .feld textarea {
  /* 16px ist Pflicht, nicht Geschmack: Safari auf iOS zoomt beim Antippen in
     die Seite hinein, sobald ein Feld kleiner schreibt — und zoomt nicht von
     allein zurück. */
  font: 400 1rem/1.5 var(--ff);
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--linie2);
  border-radius: var(--r);
  background: var(--blatt);
  color: var(--ink);
  width: 100%;
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input:hover, .feld textarea:hover { border-color: var(--ink3); }
.feld--haken { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.8rem; }
.feld--haken input {
  width: 24px; height: 24px;
  margin-top: 0.15rem;
  accent-color: var(--akz);
}
.feld--haken label { font-weight: 400; color: var(--ink2); }
.formular__stand { min-height: 0; margin-bottom: 0.7rem; color: var(--warn); font-size: var(--t-klein); }
.formular__stand:empty { display: none; }
.formular__nichts { margin-top: 0.7rem; font-size: var(--t-meta); color: var(--ink3); }

.quittung {
  margin-top: 1.8rem;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--akz);
  border-radius: var(--r);
  background: #f2f6f4;
  max-width: 46rem;
}
.quittung h3 { margin-bottom: 0.9rem; }
.quittung dl { display: grid; gap: 0; margin: 0; }
.quittung dl > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #d8e3de;
}
.quittung dt { font-size: var(--t-meta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); }
.quittung dd { margin: 0; font-size: var(--t-klein); }
.quittung__hinweis { margin-top: 1rem; font-size: var(--t-meta); color: var(--ink2); }

/* ---------- Fuß --------------------------------------------------------- */
.fuss {
  margin-top: var(--sp);
  padding: clamp(2rem, 4vw, 3.2rem) var(--rand) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linie2);
  background: var(--papier);
}
.fuss__zeile { display: grid; gap: 1.4rem; }
.fuss__wer { max-width: 60ch; font-size: var(--t-klein); color: var(--ink2); }
.fuss__wer strong { color: var(--ink); }
.fuss__wege { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; }
/* 24px Mindesthöhe: die Verweise stehen untereinander in einer Spalte, und
   dort greift die Abstandsausnahme von WCAG 2.5.8 nicht zuverlässig. */
.fuss__wege a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--t-klein);
}
.fuss__recht {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--linie);
  max-width: 78ch;
  font-size: var(--t-meta);
  color: var(--ink3);
}

/* ==========================================================================
   Breitere Fenster. Reihenfolge beachtet: alles hier steht NACH den
   Grundregeln, damit gleiche Spezifität in die richtige Richtung gewinnt.
   ========================================================================== */

/* Ab 480px ist Platz für Begriff und Wert nebeneinander. */
@media (min-width: 480px) {
  .liste > div {
    grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
    gap: 0.3rem 1rem;
  }
  .quittung dl > div {
    grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
    gap: 0.3rem 1rem;
  }
}

/* Ab 560px passen vier Kennzahlen in eine Reihe. */
@media (min-width: 560px) {
  .fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Ab 700px stehen Text und Merkmalliste nebeneinander. */
@media (min-width: 700px) {
  .spalten { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ═══ Ab 1000px: Monate links, Rechnung rechts und klebend. Der Balken unten
   wird überflüssig — die Rechnung steht dauerhaft im Blick. ═══ */
@media (min-width: 1000px) {
  .belegung {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem);
    grid-template-areas: 'kopf kopf' 'kal rechnung';
    gap: 0 clamp(1.6rem, 3vw, 3rem);
    align-items: start;
  }
  .belegung__kopf { grid-area: kopf; }
  .kal { grid-area: kal; }
  .rechnung {
    grid-area: rechnung;
    margin-top: 0;
    position: sticky;
    top: 1.5rem;
  }
  .kal__monate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .balken { display: none; }
}

/* Ab 1800px ein dritter Monat statt Leerraum. Auf einem sehr breiten Monitor
   ist eine halb leere Fläche neben zwei Monaten kein Weißraum, sondern ein
   unfertiger Eindruck. */
@media (min-width: 1800px) {
  .kal__monate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .belegung { grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem); }
  .liste > div { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); }
}

/* ---------- Druck ------------------------------------------------------- */
@media print {
  .band, .balken, .sprung, .kal__leiste, .legende, .formular { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .kal, .rechnung, .quittung { border: 1px solid #000; break-inside: avoid; }
  .kal__monate { grid-template-columns: repeat(2, 1fr); }
  a { color: #000; }
}