/* Die Wahl eines Zeitraums -- zwei Monate nebeneinander.

   Eigene Datei, weil das Modul eigen ist: Wer den Kalender einbindet, nimmt
   beides mit und muss nicht wissen, in welchem Blatt sein Aussehen steht. */

.zw-fenster {
  width: min(760px, 94vw);
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
}
.zw-fenster::backdrop { background: rgb(0 0 0 / .35); }

.zw-kopf {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}
.zw-kopf h2 { margin: 0; font: var(--typography-section-title); }
.zw-schliessen {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}

/* Von und Bis stehen oben: Was gewaehlt ist, liest man, bevor man weiterklickt. */
.zw-felder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}
.zw-feld {
  display: grid;
  grid-template-areas: "wort zeichen" "wert zeichen";
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
}
.zw-feld.voll { border-color: var(--color-brand-primary-action); }
.zw-feld svg.i { grid-area: zeichen; color: var(--color-text-tertiary); }
.zw-feldwort {
  grid-area: wort;
  font: var(--typography-metadata);
  color: var(--color-text-secondary);
}
.zw-feldwert { grid-area: wert; font: var(--typography-body); font-weight: 600; }

/* Zwei Monate nebeneinander, getrennt durch eine Haarlinie. Auf schmalen
   Blaettern untereinander -- zwei Kalender in einer Handbreite waeren
   unleserlich. */
.zw-monate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-border-subtle);
}
.zw-monat { padding: var(--spacing-lg); }
.zw-monat + .zw-monat { border-left: 1px solid var(--color-border-subtle); }
.zw-monatkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}
.zw-pfeil {
  display: inline-flex;
  width: 30px; height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.zw-pfeil:hover { background: var(--color-surface-secondary); }
.zw-pfeil.leer { cursor: default; }

.zw-wochentage,
.zw-tage { display: grid; grid-template-columns: repeat(7, 1fr); }
.zw-wochentage span {
  padding: 4px 0;
  font: var(--typography-metadata);
  color: var(--color-text-tertiary);
  text-align: center;
}
.zw-tag {
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: none;
  font: var(--typography-body);
  color: var(--color-text-primary);
  cursor: pointer;
}
.zw-tag:hover { background: var(--color-surface-secondary); }
/* Die Tage der Nachbarmonate stehen blass da -- sie gehoeren zur Woche, aber
   nicht zum Monat. */
.zw-tag.fremd { color: var(--color-text-tertiary); }
/* Was dazwischen liegt, traegt einen hellen Grund; Anfang und Ende die
   Markenfarbe. So sieht man die Spanne als eine Strecke und nicht als zwei
   Punkte. */
.zw-tag.drin { background: var(--color-selection-background); border-radius: 0; }
.zw-tag.rand {
  background: var(--color-brand-primary-action);
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
}

.zw-schnell { padding: var(--spacing-lg); border-top: 1px solid var(--color-border-subtle); }
.zw-schnell h3 { margin: 0 0 var(--spacing-md); font: var(--typography-body); font-weight: 700; }
.zw-schnellwahl { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.zw-schnellknopf {
  padding: 7px var(--spacing-lg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background: var(--color-surface-primary);
  font: var(--typography-body);
  color: var(--color-text-primary);
  cursor: pointer;
}
.zw-schnellknopf:hover { border-color: var(--color-brand-primary-action); }

.zw-fuss {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-border-subtle);
}
.zw-fuss .btn { justify-content: center; }

@media (max-width: 700px) {
  .zw-monate { grid-template-columns: 1fr; }
  .zw-monat + .zw-monat { border-left: 0; border-top: 1px solid var(--color-border-subtle); }
  .zw-felder { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ Ein Tag statt einer Spanne

   Derselbe Kalender, ein Monat breit: Wo nur ein Datum zu waehlen ist, waere
   die zweite Tafel leerer Platz. Alles darunter erbt aus den Regeln oben --
   nur die Breite und der Fuss sind eigen. */

.zw-fenster.einzeln { width: min(360px, 92vw); }
.zw-fenster.einzeln .zw-monate { grid-template-columns: 1fr; }
.zw-fenster.einzeln .zw-kopf { padding-bottom: var(--spacing-md); }
.zw-fenster.einzeln .zw-monate { border-top: 0; }

/* Heute traegt einen Ring statt einer Fuellung: Es ist ein Hinweis, wo man
   steht, keine Wahl. Der gewaehlte Tag gewinnt -- er faerbt voll. */
.zw-tag.heute { box-shadow: inset 0 0 0 1px var(--color-text-tertiary); }
.zw-tag.rand.heute { box-shadow: none; }
.zw-tag:disabled { color: var(--color-text-tertiary); opacity: .4; cursor: not-allowed; }
.zw-tag:disabled:hover { background: none; }

/* „Heute" und „Löschen" -- die Zeile steht nur da, wenn sie etwas traegt. */
.zw-tagfuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}

/* Der Monatsname ist ein Knopf zu den Jahren. Er sieht aus wie die Ueberschrift,
   die dort vorher stand -- nur der Winkel daneben sagt, dass sich darunter
   etwas oeffnet. */
.zw-titelknopf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--spacing-sm);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--color-text-primary);
  cursor: pointer;
}
.zw-titelknopf:hover { background: var(--color-surface-secondary); }
.zw-titelknopf svg.i { width: 16px; height: 16px; color: var(--color-text-secondary); }
.zw-titelknopf.offen svg.i { transform: rotate(180deg); }

/* Jahre und Monate stehen auf derselben Flaeche wie die Tage: Das Fenster
   springt beim Wechsel nicht in der Hoehe. Die Jahre rollen darin. */
.zw-jahre,
.zw-monatswahl {
  display: grid;
  gap: 4px;
  height: 306px;
}
.zw-jahre {
  position: relative;
  grid-template-columns: repeat(4, 1fr);
  align-content: start;
  overflow-y: auto;
  scrollbar-width: thin;
}
.zw-monatswahl { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
/* Nur so gross wie das Wort: Die Zelle fuellt das Raster, der Knopf nicht --
   gestreckt wurde aus dem gewaehlten Monat ein Fleck ueber die halbe Zeile. */
.zw-wahl {
  justify-self: center;
  align-self: center;
  min-width: 64px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: var(--typography-body);
  color: var(--color-text-primary);
  cursor: pointer;
}
.zw-wahl:hover { background: var(--color-surface-secondary); }
/* Wie bei den Tagen: das aktuelle Jahr mit Ring, das gezeigte gefuellt. */
.zw-wahl.heute { box-shadow: inset 0 0 0 1px var(--color-text-tertiary); }
.zw-wahl.rand {
  background: var(--color-brand-primary-action);
  box-shadow: none;
  color: #fff;
  font-weight: 700;
}
.zw-wahl:disabled { color: var(--color-text-tertiary); opacity: .4; cursor: not-allowed; }
.zw-wahl:disabled:hover { background: none; }