/* Zeitwahl: zurück, Datum, vor und das Blatt zur Auswahl. Gehört zu static/js/zeitwahl.js und gilt auf jeder Seite.
   Farben, Abstände und Dauern kommen aus oberflaeche.css, die eigenen Maße stehen hier am Anfang. */
.ob {
  --zw-breite-tag: 13.5rem; --zw-breite-woche: 12.5rem; --zw-breite-monat: 10rem; --zw-breite-jahr: 5.5rem; --zw-breite-kurz: 9.5rem; --zw-breite-monat-kurz: 7rem;
  --zw-blatt: 17.5rem; --zw-feld: 2.25rem; --zw-abstand: var(--a2); --zw-ebene: 75; --zw-versatz: -.35rem;
  --zw-bild-grund: rgba(255,255,255,.14); --zw-bild-grund-an: rgba(255,255,255,.28); --zw-bild-text: #fff;
}
.ob .zeitwahl { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.ob .zeitwahl .zw-mitte { justify-content: center; width: var(--zw-breite-tag); white-space: nowrap; }
.ob .zeitwahl[data-art="woche"] .zw-mitte { width: var(--zw-breite-woche); }
.ob .zeitwahl[data-art="monat"] .zw-mitte { width: var(--zw-breite-monat); }
.ob .zeitwahl[data-art="jahr"] .zw-mitte { width: var(--zw-breite-jahr); }
.ob .zeitwahl .zw-mitte[aria-expanded="true"] { border-color: var(--akzent); color: var(--akzent); }
.ob .zeitwahl .zw-kurz { display: none; }

/* Blatt */
.ob .zw-blatt { position: absolute; top: calc(100% + var(--zw-abstand)); right: 0; z-index: var(--zw-ebene); width: var(--zw-blatt); max-width: calc(100vw - var(--a4)); padding: var(--a3); background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); animation: zw-auf var(--dauer) var(--kurve); }
.ob .zw-blatt.nach-oben { top: auto; bottom: calc(100% + var(--zw-abstand)); }
.ob .zw-blatt.nach-rechts { right: auto; left: 0; }
@keyframes zw-auf { from { opacity: 0; transform: translateY(var(--zw-versatz)); } to { opacity: 1; transform: none; } }
.ob .zw-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--a2); }
.ob .zw-kopf b { font-size: var(--s); }
.ob .zw-wochentage, .ob .zw-raster.tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ob .zw-wochentage span { text-align: center; font-size: var(--s-klein); font-weight: 600; color: var(--text-3); padding: var(--a1) 0; }
.ob .zw-raster.grob { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a1); }
.ob .zw-feld { height: var(--zw-feld); border-radius: var(--r-klein); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); transition: transform var(--dauer) var(--kurve); }
.ob .zw-feld:hover:not(:disabled) { background: var(--akzent-hell); color: var(--akzent); }
.ob .zw-feld:active:not(:disabled) { transform: scale(.94); }
.ob .zw-feld.fremd { color: var(--text-3); font-weight: 500; }
.ob .zw-feld.heute { box-shadow: inset 0 0 0 1px var(--akzent); }
.ob .zw-feld.gewaehlt { background: var(--akzent); color: var(--flaeche); }
.ob .zw-feld:disabled { opacity: .35; cursor: not-allowed; }
/* Woche: die gewählte Zeile hängt zusammen */
.ob .zeitwahl[data-art="woche"] .zw-feld.gewaehlt { border-radius: 0; }
.ob .zeitwahl[data-art="woche"] .zw-feld.gewaehlt:nth-child(7n+1) { border-radius: var(--r-klein) 0 0 var(--r-klein); }
.ob .zeitwahl[data-art="woche"] .zw-feld.gewaehlt:nth-child(7n) { border-radius: 0 var(--r-klein) var(--r-klein) 0; }

/* Über einem Bild (Kameras): Knöpfe durchscheinend hell, das Blatt bleibt eine Karte */
.ob .zeitwahl.auf-bild > .knopf { background: var(--zw-bild-grund); color: var(--zw-bild-text); border-color: transparent; }
.ob .zeitwahl.auf-bild > .knopf:hover:not(:disabled) { background: var(--zw-bild-grund-an); }
.ob .zeitwahl.auf-bild > .zw-mitte[aria-expanded="true"] { background: var(--zw-bild-grund-an); color: var(--zw-bild-text); }

@media (max-width: 760px) {
  .ob .zeitwahl .zw-lang { display: none; }
  .ob .zeitwahl .zw-kurz { display: inline; }
  .ob .zeitwahl[data-art="tag"] .zw-mitte { width: var(--zw-breite-kurz); }
  .ob .zeitwahl[data-art="monat"] .zw-mitte { width: var(--zw-breite-monat-kurz); }
}