/* ===========================================================================
   Kalender: ein Overlay zum Waehlen eines Datums, ueberall auf der Seite
   und im Panel dasselbe.

   Warum ueberhaupt ein eigener Kalender: Das Feld <input type="date"> sieht
   in jedem Browser anders aus, auf dem Telefon anders als am Rechner, und
   der Kalender, den es aufklappt, gehoert dem Browser. Wir koennen dort
   nichts zeigen, was fuer eine Arztpraxis wichtig ist: welcher Tag ein
   Feiertag ist, wann die Praxis zu hat, ob ein Tag vor dem Anfang liegt.
   Dieses Overlay zeigt das alles.

   Bauart wie die uebrigen Dialoge der Seite (.modal / .modal-overlay /
   .modal-panel / .modal-close, geoeffnet ueber die Klasse "open", der
   Koerper bekommt "modal-open"). Wer den Rezeptdialog kennt, kennt auch
   diesen.

   Schriftgroessen bewusst gross und Tagfelder bewusst mindestens 44px:
   zu uns kommen viele aeltere Patienten, und der Doktor bedient das Panel
   auch am Telefon. Beides ist keine Ausschmueckung.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Grundgeruest.

   Warum das hier steht und nicht nur im Style-Block der Startseite: Die
   Regeln fuer .modal, .modal-overlay und .modal-close stehen dort. Jede
   Seite, die diesen Block nicht laedt, also alles unter /leistungen/ und
   /selbst-check/ und ebenso das Panel unter /api/, zeigte ein Overlay sonst
   als gewoehnlichen Kasten unterhalb der Fusszeile. Es sieht dann aus, als
   sei die Seite kaputt. Genau das ist am 10.08. schon einmal passiert.

   Alle Regeln haengen an .kal-modal, damit sie auf der Startseite nichts
   ueberschreiben, was dort schon richtig steht.
   --------------------------------------------------------------------------- */
.kal-modal {
  position: fixed;
  inset: 0;
  /* Der Kalender ist immer das zuletzt Geoeffnete und gehoert deshalb nach
     ganz oben. 9995 liegt ueber allem, aus dem heraus er aufgehen kann:
     dem Leistungs-Overlay (1000) und den Dialogen des Panels, deren
     hoechster bei 9990 liegt. Darueber bleiben nur Mobilmenue, Rechtstexte
     und das Datenschutz-Banner, und die sind nie gleichzeitig offen. */
  z-index: 9995;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.kal-modal.open { display: flex; }

.kal-modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 49, 37, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 0;
  cursor: pointer;
}

.kal-modal .modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--cream, #F8F5EE);
  border-radius: 26px;
  padding: 0;
  box-shadow: 0 30px 80px rgba(20, 35, 26, 0.32);
}

.kal-modal .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-strong, rgba(26,31,27,0.14));
  color: var(--forest, #2A4A38);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s var(--ease, cubic-bezier(0.22,1,0.36,1)), color 0.4s, transform 0.4s;
}
.kal-modal .modal-close:hover {
  background: var(--forest, #2A4A38);
  color: var(--cream, #F8F5EE);
  transform: rotate(90deg);
}
.kal-modal .modal-close:focus-visible {
  outline: 3px solid var(--gold, #A88948);
  outline-offset: 3px;
}

body.modal-open { overflow: hidden; }

/* --- Kopf ---------------------------------------------------------------- */
.kal-kopf {
  padding: 26px 26px 18px;
  background: linear-gradient(180deg, var(--white, #fff) 0%, var(--cream, #F8F5EE) 100%);
  border-bottom: 1px solid var(--line, rgba(26,31,27,0.07));
  border-radius: 26px 26px 0 0;
}
.kal-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted, #676E68);
  margin: 0 0 10px;
}
.kal-eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: var(--line-strong, rgba(26,31,27,0.14));
}
.kal-titel {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--forest-ink, #1C3125);
  margin: 0;
  padding-right: 44px;      /* der Schliessknopf sitzt darueber */
}
.kal-titel em { font-style: italic; color: var(--gold, #A88948); }

/* Klartext des gewaehlten Tages. Steht bewusst hier oben und nicht klein
   am Rand: es ist die Antwort auf die Frage, die der Dialog stellt. */
.kal-klartext {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--forest, #2A4A38);
  font-weight: 600;
  min-height: 24px;         /* haelt die Hoehe, damit nichts springt */
}
.kal-klartext.leer { color: var(--muted, #676E68); font-weight: 400; }

/* --- Monatszeile --------------------------------------------------------- */
.kal-monat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 26px 10px;
}
.kal-nav {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--white, #fff);
  border: 1px solid var(--line-strong, rgba(26,31,27,0.14));
  color: var(--forest, #2A4A38);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.kal-nav:hover:not(:disabled) {
  background: var(--forest, #2A4A38);
  color: var(--cream, #F8F5EE);
  border-color: var(--forest, #2A4A38);
}
.kal-nav:focus-visible { outline: 3px solid var(--gold, #A88948); outline-offset: 2px; }
.kal-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.kal-monat-name {
  flex: 1 1 auto;
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--forest-ink, #1C3125);
  letter-spacing: -0.01em;
}

/* --- Wochentage ---------------------------------------------------------- */
.kal-wochentage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 22px 6px;
}
.kal-wochentage span {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #676E68);
  padding: 6px 0;
}

/* --- Raster -------------------------------------------------------------- */
.kal-raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 22px;
}

.kal-tag {
  position: relative;
  min-height: 44px;         /* Touch-Ziel, nicht kleiner */
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--text, #2C332E);
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dieselbe Kurve und Dauer wie die Leistungskacheln im Menue: weich
     aufgehen statt umspringen. */
  transition: background 380ms cubic-bezier(0.16, 1, 0.3, 1),
              color 380ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 380ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kal-tag:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(168, 137, 72, 0.32);
  box-shadow: 0 10px 22px -12px rgba(28, 49, 37, 0.28),
              0 0 0 1px rgba(168, 137, 72, 0.06);
  /* Zwei Pixel, nicht vier wie bei den grossen Kacheln: ein Tagfeld ist
     klein, sonst wirkt es unruhig. */
  transform: translateY(-2px);
}
.kal-tag:focus-visible {
  outline: 3px solid var(--gold, #A88948);
  outline-offset: 2px;
  z-index: 2;
}

/* Nachbarmonate: sichtbar, aber zurueckgenommen. Ganz ausblenden waere
   schlechter, das Raster verliert sonst seinen Halt. */
.kal-tag.kal-fremd { color: var(--muted, #676E68); opacity: 0.45; }

.kal-tag.kal-wochenende { color: var(--muted, #676E68); }

.kal-tag:disabled {
  cursor: not-allowed;
  opacity: 0.35;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.kal-tag:disabled:hover { background: transparent; border-color: transparent; }

/* Heute: Ring, nicht Fuellung. Die Fuellung gehoert der Auswahl. */
.kal-tag.kal-heute {
  /* Als Kurzform, nicht als Einzelwerte: die Grundregel setzt oben
     "border: 1px solid transparent", und dagegen kam ein einzelnes
     border-width nicht an. Im Browser nachgemessen, es blieb bei 1px. */
  border: 2px solid var(--gold, #A88948);
  font-weight: 700;
}

.kal-tag.kal-gewaehlt {
  background: var(--forest, #2A4A38);
  color: var(--cream, #F8F5EE);
  border-color: var(--forest, #2A4A38);
  font-weight: 700;
}
.kal-tag.kal-gewaehlt:hover { background: var(--forest-ink, #1C3125); }

/* Zeitraum zwischen Von und Bis. Der Doktor sieht damit beim Waehlen des
   Enddatums, welche Tage er gerade schliesst. */
.kal-tag.kal-spanne {
  background: var(--sage-mist, #DCE5DC);
  border-color: transparent;
  border-radius: 0;
}
.kal-tag.kal-spanne.kal-spanne-anfang { border-radius: 13px 0 0 13px; }
.kal-tag.kal-spanne.kal-spanne-ende { border-radius: 0 13px 13px 0; }

/* Feiertag: der Punkt sagt es, die Farbe unterscheidet, wo er gilt.
   Rot fuer die neun bundesweiten, Gold fuer die zwei, die es nur in
   Thueringen gibt. Nie nur Farbe: der Name steht im Vorlesetext und im
   Schild, das beim Ueberfahren aufgeht. */
/* Rahmen statt Punkt, genau wie beim heutigen Tag. Der Punkt war klein
   und sagte nur "irgendetwas ist hier"; der Rahmen in der Farbe der
   Geltung sagt es auf einen Blick. */
.kal-tag.kal-feiertag {
  color: #A32020;
  font-weight: 700;
  border: 2px solid #C72A2A;
}
/* Petrol, nicht Gold: Gold gehoert hier schon dem heutigen Tag, und in
   der Legende sassen sonst zwei goldene Zeichen nebeneinander, die
   dasselbe zu bedeuten schienen. Petrol laesst sich von Rot und Gold
   auch bei Rot-Gruen-Schwaeche unterscheiden. */
.kal-tag.kal-feiertag-land { color: #24515C; border: 2px solid #2F5F6B; }
.kal-tag.kal-feiertag.kal-gewaehlt { color: #FFD9D9; border-color: #FFD9D9; }
.kal-tag.kal-feiertag-land.kal-gewaehlt { color: #CFE6EC; border-color: #CFE6EC; }
.kal-tag.kal-feiertag:disabled { color: var(--muted, #676E68); }

/* ---------------------------------------------------------------------------
   Das Schild am Zeiger.

   Faehrt die Maus ueber einen Feiertag, steht sein Name direkt daneben.
   Kein Titel-Kaestchen des Browsers: das kommt erst nach einer Sekunde,
   sieht auf jeder Seite gleich aus und laesst sich nicht gestalten.
   --------------------------------------------------------------------------- */
.kal-fahne {
  position: fixed;
  top: 0; left: 0;
  z-index: 9996;              /* ueber dem Kalender selbst */
  pointer-events: none;
  max-width: 260px;
  padding: 11px 15px 12px;
  border-radius: 14px;
  background: var(--forest-ink, #1C3125);
  color: var(--cream, #F8F5EE);
  box-shadow: 0 14px 34px -12px rgba(15, 28, 20, 0.55);
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 100%;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 200ms;
}
.kal-fahne.offen { opacity: 1; visibility: visible; }

/* Die Spitze zeigt auf den Tag. */
.kal-fahne::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px; height: 12px;
  margin-left: -6px;
  background: var(--forest-ink, #1C3125);
  transform: rotate(45deg);
  border-radius: 2px;
}
.kal-fahne.zeigt-nach-oben::after { bottom: auto; top: -6px; }

.kal-fahne-name {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.kal-fahne-wo {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(248, 245, 238, 0.62);
}
/* Bei den zwei Thueringer Tagen traegt das Schild einen goldenen Saum. */
.kal-fahne.ist-land { box-shadow: 0 14px 34px -12px rgba(15,28,20,0.55), inset 0 0 0 1.5px #4E8A99; }
.kal-fahne.ist-land .kal-fahne-wo { color: #9FD0DB; }

@media (prefers-reduced-motion: reduce) {
  .kal-fahne { transition: none; }
}

/* Freie Termine. Der Punkt unter der Zahl sagt, wie voll der Tag ist.
   Nie nur die Farbe: wer Rot und Gruen nicht unterscheidet, liest den
   Vorleser oder sieht, dass der Tag durchgestrichen ist. */
.kal-tag.kal-art-frei::after,
.kal-tag.kal-art-wenige::after {
  content: "";
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sage, #6E8C74);
}
.kal-tag.kal-art-wenige::after { background: var(--gold, #A88948); }
.kal-tag.kal-art-frei { font-weight: 700; }
.kal-tag.kal-art-frei.kal-gewaehlt::after,
.kal-tag.kal-art-wenige.kal-gewaehlt::after { background: var(--cream, #F8F5EE); }

.kal-tag.kal-art-voll { color: var(--muted, #676E68); }
.kal-tag.kal-art-voll::after {
  content: "";
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted-light, #9AA39B);
}

/* Urlaub: schraffiert statt gefuellt, damit er sich vom Feiertag
   unterscheidet, ohne eine dritte Farbe einzufuehren. */
.kal-tag.kal-art-urlaub {
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 3px,
    rgba(168, 137, 72, 0.16) 3px, rgba(168, 137, 72, 0.16) 6px
  );
}

/* --- Legende --------------------------------------------------------------
   Mittig unter den Tagen, direkt darunter kommt der Fuss. Sie erklaert das
   Raster und gehoert deshalb darunter, nicht an den Rand.                   */
.kal-legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  padding: 18px 26px 0;
  font-size: 12.5px;
  color: var(--muted, #676E68);
}
.kal-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kal-legende .kal-punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted-light, #9AA39B);
}
.kal-legende .kal-punkt.feiertag { background: transparent; border: 2px solid #C72A2A; width: 10px; height: 10px; }
.kal-legende .kal-punkt.heute { background: transparent; border: 2px solid var(--gold, #A88948); }
.kal-legende .kal-punkt.frei { background: var(--sage, #6E8C74); }
.kal-legende .kal-punkt.wenige { background: var(--gold, #A88948); }
.kal-legende .kal-punkt.voll { background: var(--muted-light, #9AA39B); }
.kal-legende .kal-punkt.feiertag-land { background: transparent; border: 2px solid #2F5F6B; width: 10px; height: 10px; }

/* --- Fuss ---------------------------------------------------------------- */
/* Der Fuss bleibt am unteren Rand kleben.

   Im Browser nachgemessen, 375 mal 812: ohne das stand er bei 742 bis 883,
   das Fenster endet bei 812. "Leeren" und "Übernehmen" lagen also unter dem
   Bildschirmrand und waren erst nach dem Rollen zu sehen. Bei einem langen
   Monat passiert dasselbe auch am Rechner. */
.kal-fuss {
  display: flex;
  gap: 10px;
  padding: 20px 26px 24px;
  margin-top: 18px;
  border-top: 1px solid var(--line, rgba(26,31,27,0.07));
  position: sticky;
  bottom: 0;
  background: var(--cream, #F8F5EE);
  z-index: 3;
}
.kal-btn {
  flex: 1 1 auto;
  border-radius: 999px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 48px;
  border: 1px solid transparent;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.kal-btn:focus-visible { outline: 3px solid var(--gold, #A88948); outline-offset: 3px; }
.kal-btn-haupt {
  background: var(--forest, #2A4A38);
  color: var(--cream, #F8F5EE);
}
.kal-btn-haupt:hover { background: var(--forest-ink, #1C3125); }
.kal-btn-haupt:disabled { opacity: 0.4; cursor: not-allowed; }
.kal-btn-haupt:disabled:hover { background: var(--forest, #2A4A38); }

/* Sobald ein Tag gewaehlt ist, tritt der Knopf einmal kurz hervor.
   Der Tag allein aendert noch nichts am Feld, und ohne diesen Hinweis
   koennte man den Dialog fuer fertig halten und ihn zuklicken. */
.kal-btn-haupt.ist-bereit {
  animation: kal-bereit 620ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}
@keyframes kal-bereit {
  0%   { box-shadow: 0 0 0 0 rgba(168, 137, 72, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(168, 137, 72, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kal-btn-haupt.ist-bereit { animation: none; }
}
.kal-btn-still {
  flex: 0 1 auto;
  background: transparent;
  color: var(--forest, #2A4A38);
  border-color: var(--line-strong, rgba(26,31,27,0.14));
}
.kal-btn-still:hover { background: var(--sage-mist, #DCE5DC); }

/* Hinweiszeile unter dem Raster, etwa bei einem Feiertag oder wenn ein Tag
   ausserhalb des erlaubten Zeitraums liegt. */
.kal-hinweis {
  margin: 16px 26px 0;
  background: var(--cream-soft, #F2EDE1);
  border: 1px solid var(--line-strong, rgba(26,31,27,0.14));
  border-left: 4px solid var(--gold, #A88948);
  border-radius: 12px;
  padding: 12px 15px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text, #2C332E);
}
.kal-hinweis[hidden] { display: none; }
.kal-hinweis strong { color: var(--forest-ink, #1C3125); }

/* ---------------------------------------------------------------------------
   Das Feld selbst.

   Das <input type="date"> bleibt stehen und behaelt seinen Wert im Format
   JJJJ-MM-TT. Damit funktioniert jedes Skript weiter, das den Wert liest
   oder auf Aenderungen horcht. Nur der Kalender des Browsers wird
   abgeschaltet, an seine Stelle tritt dieses Overlay.
   --------------------------------------------------------------------------- */
.kal-feld-huelle { position: relative; display: block; }

/* Das eigene Symbol sitzt rechts im Feld, deshalb dort Platz lassen. */
.kal-feld-huelle > input[type="date"] { padding-right: 46px !important; }

/* Der Kalender des Browsers wird nicht mehr gebraucht. */
.kal-feld-huelle > input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
.kal-feld-huelle > input[type="date"]::-webkit-inner-spin-button { display: none; }

.kal-feld-knopf {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--forest, #2A4A38);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, color 0.25s;
}
/* 10.08.2026 (Dirk): Der Knopf ist 34 Pixel gross, verlangt sind 44. Groesser
   darf er nicht werden, sonst sprengt er das Eingabefeld. Deshalb legt ein
   unsichtbares Feld die Trefferflaeche auf 44, mittig um den Knopf herum. Es
   gehoert zum Knopf, ein Tipp darauf oeffnet also den Kalender. */
.kal-feld-knopf::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.kal-feld-knopf:hover { background: var(--sage-mist, #DCE5DC); }
.kal-feld-knopf:focus-visible { outline: 3px solid var(--gold, #A88948); outline-offset: 1px; }

/* ---------------------------------------------------------------------------
   Der Ausloeser im Terminbereich.

   Er steht dort, wo vorher das Monatsraster stand, und traegt die einzige
   Auskunft, die an dieser Stelle zaehlt: welcher Tag gewaehlt ist. Alles
   Weitere steht im Overlay.
   --------------------------------------------------------------------------- */
.cal-waehler[hidden] { display: none; }

.cal-waehler-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 22px 22px;
  border-radius: 20px;
  border: 1px solid var(--line-strong, rgba(26,31,27,0.14));
  background: var(--white, #fff);
  color: var(--forest-ink, #1C3125);
  font-family: inherit;
  cursor: pointer;
  min-height: 92px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.cal-waehler-btn:hover {
  border-color: var(--forest, #2A4A38);
  box-shadow: 0 14px 34px rgba(42, 74, 56, 0.14);
  transform: translateY(-1px);
}
.cal-waehler-btn:focus-visible {
  outline: 3px solid var(--gold, #A88948);
  outline-offset: 3px;
}

.cal-waehler-symbol {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--sage-mist, #DCE5DC);
  color: var(--forest, #2A4A38);
  display: flex; align-items: center; justify-content: center;
}

.cal-waehler-text { flex: 1 1 auto; min-width: 0; }
.cal-waehler-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted, #676E68);
  margin-bottom: 5px;
}
.cal-waehler-datum {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--forest-ink, #1C3125);
}
.cal-waehler-datum.leer {
  font-family: inherit;
  font-size: 16.5px;
  color: var(--muted, #676E68);
}

.cal-waehler-pfeil { flex: 0 0 auto; color: var(--forest, #2A4A38); opacity: 0.7; }
.cal-waehler-btn:hover .cal-waehler-pfeil { opacity: 1; }

.cal-waehler-hilfe {
  margin: 12px 4px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted, #676E68);
}

@media (max-width: 560px) {
  .cal-waehler-btn { padding: 18px 16px; gap: 13px; min-height: 84px; }
  .cal-waehler-symbol { flex-basis: 46px; height: 46px; }
  .cal-waehler-datum { font-size: 18.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-waehler-btn { transition: none; }
  .cal-waehler-btn:hover { transform: none; }
}

/* --- Telefon ------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Wenig Rand, damit die sieben Tagfelder ihre 44 Pixel bekommen. Im
     Browser nachgemessen: bei 375 Pixeln Bildschirm bleiben nur 361 fuer
     das Layout, den Rest nimmt der Rollbalken. Mit 12 Pixeln Rand hier und
     10 im Raster kamen 43 heraus, und 43 ist unter dem, was eine
     Fingerkuppe sicher trifft. */
  .kal-modal { padding: 6px; align-items: flex-end; }
  .kal-modal .modal-panel { max-width: 100%; border-radius: 24px 24px 0 0; max-height: 88vh; }

  /* dvh statt vh, wo der Browser es kennt.

     vh rechnet mit dem Fenster ohne Adressleiste, also mit mehr Hoehe, als
     wirklich zu sehen ist. Im Browser nachgemessen: das Blatt endete bei
     822, sichtbar war es nur bis 812, und damit lagen "Leeren" und
     "Übernehmen" knapp unter dem Rand. dvh rechnet mit dem, was tatsaechlich
     da ist, und schrumpft mit, wenn die Leiste aufgeht. Die Zeile darueber
     bleibt als Rueckfall fuer aeltere Browser stehen. */
  @supports (height: 100dvh) {
    .kal-modal { height: 100dvh; }
    .kal-modal .modal-panel { max-height: 88dvh; }
  }
  .kal-kopf { padding: 24px 20px 16px; border-radius: 24px 24px 0 0; }
  .kal-titel { font-size: 22px; }
  .kal-monat { padding: 16px 20px 8px; }
  /* Panel 349, davon 16 Rand und sechs Luecken zu 3: bleiben 313 fuer
     sieben Felder, also knapp 45 je Feld. */
  .kal-wochentage, .kal-raster { padding-left: 8px; padding-right: 8px; gap: 3px; }
  .kal-legende { padding-left: 20px; padding-right: 20px; }
  .kal-hinweis { margin-left: 20px; margin-right: 20px; }
  .kal-fuss { padding: 18px 20px 22px; flex-wrap: wrap; }
  .kal-btn { flex: 1 1 100%; }
  .kal-btn-still { order: 2; }
}

/* --- Weniger Bewegung ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kal-modal .modal-close,
  .kal-nav, .kal-tag, .kal-btn, .kal-feld-knopf {
    transition: none;
  }
  .kal-modal .modal-close:hover { transform: none; }
}

/* --- Hoher Kontrast ------------------------------------------------------ */
@media (prefers-contrast: more) {
  .kal-tag.kal-fremd { opacity: 0.7; }
  .kal-tag:disabled { opacity: 0.55; }
  .kal-tag { border-color: var(--line, rgba(26,31,27,0.07)); }
}


/* ==========================================================================
   Nachtlauf 13.08.2026 - Luft zum Bildschirmrand

   Der Kalender ging auf schmalen Geraeten als Blatt vom unteren Rand auf und
   hatte dort nur 6 Pixel Rand. Damit sass er in der Seite statt darueber, und
   der Schatten (0 30px 80px) war an drei Seiten nicht zu sehen. Dirks
   Grundsatz: man soll erkennen, dass ein Modul ueber der Seite liegt.

   Steht bewusst am Dateiende. So schlaegt es die Telefon-Regeln weiter oben,
   ohne sie zu loeschen - die Begruendungen dort bleiben lesbar.
   ========================================================================== */
@media (max-width: 560px) {
  .kal-modal {
    align-items: center;
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
  }
  .kal-modal .modal-panel {
    max-width: 100%;
    max-height: 100%;
    border-radius: 24px;
  }
  @supports (height: 100dvh) {
    .kal-modal .modal-panel { max-height: 100%; }
  }
}


/* ==========================================================================
   Nachtlauf 13.08.2026 - Tagesraster

   .kal-tag hat aspect-ratio 1/1 und min-height 44px. Ein quadratisches Feld
   mit 44 Pixeln Mindesthoehe fordert damit auch 44 Pixel Breite, und die
   Rasterspalte kann nicht darunter. Sieben Felder zu 44, sechs Luecken zu 3
   und 16 Pixel Innenrand brauchen 342 Pixel. Bei 320 Pixeln Bildschirm sind
   nach dem Rand nur 278 da: gemessen 334 gebraucht, der Sonntag war ab und
   im Blatt stand ein waagerechter Rollbalken.

   Unterhalb von 400 Pixeln faellt deshalb die Seitenbindung weg. Die Hoehe
   bleibt bei 44 Pixeln, denn darauf kommt es beim Treffen mit dem Finger an.
   Die Breite sinkt auf rund 35 und liegt damit weiter deutlich ueber den
   24 Pixeln, die WCAG 2.2 als Mindestgroesse nennt.

   Schwelle 400: ab 382 Pixeln Bildschirm passen die 44er wieder (382 minus
   40 Rand ergibt 342). 400 laesst etwas Luft, damit es nicht auf den Pixel
   genau kippt.
   ========================================================================== */
@media (max-width: 400px) {
  .kal-tag {
    aspect-ratio: auto;
    min-width: 0;
    height: 44px;
  }
  .kal-wochentage span { min-width: 0; }
}


/* ==========================================================================
   Nachtlauf 13.08.2026 - Kalender auf kleinen Geraeten

   Gemessen bei 320x568 nach den neuen Raendern: Kopf 136, Monatszeile 83,
   Wochentage 36, Raster 223, Legende 65, Fuss 141. Summe 684 bei 528 Pixeln
   sichtbarer Hoehe. Kopf und Fuss zusammen 277, also mehr als die Haelfte
   des Bildschirms fuer Rahmen statt Inhalt. Der Fuss lag dabei ganz
   ausserhalb des Bildes, Uebernehmen war nicht zu erreichen.
   ========================================================================== */
@media (max-width: 400px) {

  /* Der Fuss ist in der Grundregel weiter oben bereits sticky mit bottom 0,
     eigenem Hintergrund und z-index 3. Das war nie das Problem: sticky haelt
     den Fuss am unteren Ende seines Rollbereichs, und dieses Ende lag bei
     320x568 ausserhalb des Bildes, weil das ganze Blatt unter den
     Bildschirmrand ragte. Behoben hat das Thema 1 mit der Klammer auf die
     Fensterhoehe.

     Hier bleibt nur, was wirklich anders ist: knapperer Innenrand, weil auf
     568 Pixeln Hoehe jeder Pixel dem Raster fehlt, der Platz fuer die
     Home-Anzeige unten, und ein Schatten nach oben, der zeigt, dass darunter
     noch etwas weitergeht. */
  .kal-fuss {
    box-shadow: 0 -12px 22px -14px rgba(20, 35, 26, 0.45);
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  /* Kopf eindampfen. Die Zierzeile DATUM steht ueber einer Ueberschrift, die
     dasselbe sagt, und kostet auf einem 568 Pixel hohen Bildschirm Platz,
     der dem Raster fehlt. Der Klartext bleibt: er ist die einzige
     Rueckmeldung, welcher Tag gewaehlt wurde. */
  .kal-eyebrow { display: none; }
  .kal-kopf { padding: 16px 20px 12px; }
  .kal-titel { font-size: 19px; }
  .kal-klartext { font-size: 13.5px; }
  .kal-monat { padding: 8px 20px 4px; }

  /* Zeichenerklaerung einklappbar. Zu bleibt sie nur auf schmalen Geraeten,
     und das setzt das Skript - im Markup steht sie offen, damit ohne
     Javascript nichts fehlt. */
  .kal-legende-box { border-top: 1px solid var(--line, rgba(26,31,27,0.07)); }
  .kal-legende-titel {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #676E68);
    cursor: pointer;
    list-style: none;
  }
  .kal-legende-titel::-webkit-details-marker { display: none; }
  .kal-legende-titel::after {
    content: '';
    width: 8px; height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .kal-legende-box[open] .kal-legende-titel::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  .kal-legende-titel:focus-visible { outline: 3px solid var(--gold, #A88948); outline-offset: -3px; }
}

/* Ab 401 Pixeln steht die Zeichenerklaerung offen und ohne Aufklapp-Zeile da,
   genau wie vorher. */
@media (min-width: 401px) {
  .kal-legende-titel { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   31.08.2026: Ein Kalender fuer beide Felder

   Dazu drei Dinge, die Dirk ausdruecklich verlangt hat.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Die Knoepfe waren 34x34 und damit unter der Grenze von 44, die seit
      WCAG 2.2 gilt. Das stand seit der Nacht als offener Punkt in der
      Uebergabe und gehoert zu diesem Umbau. */
.kal-feld-knopf {
  width: 44px;
  height: 44px;
}

/* 2) Die Anleitung im Kopf. Sie sagt bei jedem Schritt, was jetzt dran
      ist, damit der Kalender ohne Erklaerung verstaendlich ist. */
.kal-anleitung {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: #4A544D;
}

/* 3) Auf jedem Geraet ganz im Bild. dvh statt vh, weil die Leisten von
      iOS sonst den Fuss mit "Uebernehmen" abschneiden: bei vh rechnet der
      Browser mit der Hoehe OHNE Leisten, und genau die fehlt dann unten.
      Der Rasterbereich rollt, Kopf und Fuss bleiben stehen, damit der
      wichtigste Knopf immer sichtbar ist. */
@media (max-height: 780px), (max-width: 560px) {
  .kal-modal .modal-panel {
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .kal-modal .kal-raster { flex: 0 1 auto; }
  .kal-modal .kal-legende-box { overflow-y: auto; }
  .kal-modal .kal-fuss {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    background: inherit;
  }
}


/* ── Das zweite Feld eines Datumspaares ────────────────────────────────
   Folgefeld, 31.08.2026. Es zeigt nur an, was im Kalender des ersten
   Feldes gewaehlt wurde. Es muss als Anzeige erkennbar sein, ohne
   auszusehen wie ein abgeschaltetes Feld: abgeschaltet hiesse kaputt.
   Deshalb ruhiger Grund und normale Schriftfarbe, kein Grau in Grau. */
.kal-feld-huelle-folge > input[type="date"] {
  /* Der Platz fuer den Knopf wird nicht mehr gebraucht. */
  padding-right: 14px !important;
  background: var(--cream, #F7F3EA);
  cursor: default;
}
.kal-feld-huelle-folge > input[type="date"]:focus-visible {
  outline: 3px solid var(--gold, #A88948);
  outline-offset: 2px;
}
.kal-feld-folge-note {
  /* Ausserhalb des Flusses, sonst schiebt er das Feld nach oben.
     Die Huelle traegt bereits position: relative. */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  font-size: 12.5px;
  line-height: 1.35;
  /* Nicht fett: der Hinweis erbt sonst die Auszeichnung der
     Feldbeschriftung und wirkt wie eine zweite Ueberschrift. Genau daran
     ist am 30.08. schon der Knopf "Ich trage fuer eine Kollegin ein"
     gescheitert, den niemand fand. */
  font-weight: 400;
  /* #4A4842 auf #F7F3EA sind 8,26 zu 1, gerechnet nach WCAG. #5C5A54
     kaeme nur auf 6,23 und verfehlte die strenge Schwelle von 7. */
  color: #4A4842;
}
/* Die Luft, die der Hinweis darunter braucht. Gesetzt von kalender.js. */
.ap-dates.kal-hat-folge { padding-bottom: 22px; }

/* ==========================================================================
   VILLA-ANPASSUNG, angehaengt am 11.09.2026 von Sitzung 0e1164b4
   --------------------------------------------------------------------------
   Alles darueber stammt unveraendert aus der Praxis Ragnitz. Alles ab hier
   passt den Kalender an die Villa an.

   ⚠️ WARUM ANGEHAENGT UND NICHT IN EINER ZWEITEN DATEI
   Dirk hat woertlich ZWEI neue Dateien freigegeben. Eine dritte waere eine
   Freigabe, die er nicht gegeben hat. Der Preis: wer spaeter eine neue
   Fassung aus Ragnitz holt, muss diesen Block wieder anhaengen.

   ⚠️ WAS DIESER BLOCK WIRKLICH TUT
   kalender.css definiert KEINE eigene Farbvariable, sie verbraucht
   vierzehn fremde. ALLE 86 Verwendungen tragen aber einen Rueckfallwert
   (var(--forest, #2A4A38)). Ohne diesen Block waere der Kalender also
   nicht farblos, sondern vollstaendig GRUEN in Praxisfarben, mitten in
   Eriks burgundfarbener Seite.

   ⚠️ EBENE
   kalender.css setzt 9995. Auf der Gaesteseite ist die hoechste fremde
   Ebene 99999 (gemessen). Deshalb 100000. Im Panel liegt er auf 100050,
   das ist hier unnoetig hoch.
   ========================================================================== */

.kal-modal,
.kal-fahne,
.kal-feld-huelle {
  --cream:       #F8F2E4;   /* Grundton der Flaeche      */
  --cream-soft:  #EFE6D2;   /* leicht abgesetzt          */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --forest:      #6E1A24;   /* Hauptfarbe, war gruen     */
  --forest-ink:  #4A0E18;   /* dunkelste Fassung         */
  --gold:        #B8924A;   /* Akzent                    */
  --line:        #E8DDC4;   /* feine Linie               */
  --line-strong: #C9B998;   /* kraeftige Linie           */
  --muted:       #6B5E50;   /* Nebentext                 */
  --muted-light: #8A7C6E;   /* noch leiser               */
  --sage:        #B8924A;   /* Auswahlfarbe, war salbei  */
  --sage-mist:   #F0E4CC;   /* Zeitraumflaeche, hell     */
  --text:        #1A1410;   /* Fliesstext                */
  --white:       #FBF7EE;   /* Blattfarbe                */
}

.kal-modal {
  z-index: 100000;
}

/* Die Huelle um jedes Datumsfeld. Das Reservierungsfenster traegt eigene
   Feldmasse, die Huelle muss sie durchreichen statt sie zu brechen. */
.vr-field .kal-feld-huelle,
.vr-modal .kal-feld-huelle {
  display: block;
  width: 100%;
}

.vr-field .kal-feld-huelle input[type="date"],
.vr-modal .kal-feld-huelle input[type="date"] {
  width: 100%;
}

/* 44x44 ist Hausregel der Villa, nicht nur die WCAG-Pflicht von 24x24.
   Dirks Ansage vom 08.09.2026. */
.vr-modal .kal-feld-knopf {
  min-width: 44px;
  min-height: 44px;
}