/* Monatsraster der Guide-Uebersicht - zweite Ansicht derselben Daten.

   ACHTUNG: Angaben in PIXELN, nicht in rem. screen.css:8 setzt die
   Wurzel-Schriftgroesse auf 9pt = 12px; jede rem-Angabe waere hier also
   ein Viertel kleiner als erwartet. */

/* ---- Umschalter Liste / Monat ------------------------------------------- */
.cs-ansicht {
  display: flex;
  width: 100%;
  max-width: 320px;
  margin: var(--cs-abstand-3) 0 0;
}

/* :visited mitgenannt - siehe .cs-verweis in liste.css. Hier faellt es kaum
   auf (#222 gegen #000), der Vollstaendigkeit halber trotzdem. */
.cs-ansicht__knopf,
a.cs-ansicht__knopf:link,
a.cs-ansicht__knopf:visited {
  flex: 1 1 0;
  min-width: 0;
  /* Ohne waagerechten Innenabstand beruehrt die Beschriftung die Kanten.
     Faellt beim Monats-Umschalter nicht auf (dort sind die Knoepfe breit),
     wohl aber bei "Aufsteigend/Absteigend" in der Sortierleiste: dort waren
     Knopf und Text beide 79px breit. Vom Betreiber gemeldet. */
  padding: 0 var(--cs-abstand-3);
  min-height: var(--cs-ziel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cs-linie);
  background: var(--cs-flaeche);
  color: var(--cs-text);
  font-size: var(--cs-schrift-normal);
  text-decoration: none;
}
.cs-ansicht__knopf:first-child {
  border-radius: var(--cs-radius) 0 0 var(--cs-radius);
}
.cs-ansicht__knopf:last-child {
  border-left: 0;
  border-radius: 0 var(--cs-radius) var(--cs-radius) 0;
}
/* Die aktive Ansicht traegt aria-current - Zustand und Optik aus derselben
   Quelle, kein zweites Klassenattribut daneben. */
.cs-ansicht__knopf[aria-current="true"] {
  background: var(--cs-gruen-hell);
  border-color: var(--cs-gruen-hell);
  color: #fff;
  font-weight: 600;
}

/* ---- Monatsleiste -------------------------------------------------------- */
.cs-monat {
  margin-top: var(--cs-abstand-3);
}

.cs-monat__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-abstand-2);
  margin-bottom: var(--cs-abstand-2);
}

.cs-monat__titel {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: var(--cs-schrift-gross);
  font-weight: 600;
}

/* Verweise, keine Schaltflaechen: der Monatswechsel laedt den Nachbarmonat
   nach - er ist nicht vorgerendert. */
.cs-monat__pfeil {
  flex: 0 0 auto;
  width: var(--cs-ziel);
  height: var(--cs-ziel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cs-linie);
  border-radius: var(--cs-radius);
  background: var(--cs-flaeche);
  color: var(--cs-text);
  font-size: var(--cs-schrift-gross);
  line-height: 1;
  text-decoration: none;
}

/* ---- Raster --------------------------------------------------------------
   Divs mit CSS-Grid, keine Tabelle: die Spalten tragen keine
   Spaltenbedeutung - "Mittwoch" ist keine Eigenschaft des Datums in dem
   Sinn, in dem "Uhrzeit" eine Eigenschaft einer Tour ist.

   Die entscheidende Groesse: sieben Spalten muessen bei 390px Fensterbreite
   in den rund 366px Inhaltsbreite passen. minmax(0, 1fr) verhindert, dass
   ein Zellinhalt die Spur aufweitet; bei 2px Abstand bleiben je Zelle
   (366 - 6*2) / 7 = rund 50px - ueber der 44px-Trefferflaeche. */
.cs-monat__wochentage,
.cs-monat__raster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.cs-monat__wochentage span {
  padding: var(--cs-abstand-1) 0;
  text-align: center;
  font-size: var(--cs-schrift-klein);
  color: var(--cs-text-leise);
}

/* display:grid schlaegt das Vorgabeverhalten von [hidden] - deshalb hier
   ausdruecklich zurueckgenommen. */
.cs-monat__raster[hidden] { display: none; }

/* ---- Tageszelle ----------------------------------------------------------
   Zwei Bauformen mit gleicher Box: Tage mit eigenen Touren sind
   Schaltflaechen, Tage ohne bleiben sichtbar, aber ruhig - und nicht
   bedienbar, damit kein Tippziel ins Leere fuehrt. */
.cs-monat__tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: var(--cs-ziel);
  padding: 2px;
  border: 1px solid transparent;
  border-radius: var(--cs-radius);
  background: var(--cs-flaeche-leise);
  color: var(--cs-text-leise);
  font-family: inherit;
  font-size: var(--cs-schrift-klein);
  -webkit-appearance: none;
  appearance: none;
}

.cs-monat__zahl {
  font-size: var(--cs-schrift-normal);
  line-height: 1;
}

/* Nachbarmonate bleiben stehen, damit die Wochenzeilen vollstaendig sind -
   aber deutlich zurueckgenommen. */
.cs-monat__tag--fremd {
  opacity: .35;
}

.cs-monat__tag--heute {
  box-shadow: inset 0 0 0 2px var(--cs-gruen-dunkel);
}

.cs-monat__tag--hat {
  background: var(--cs-flaeche);
  border-color: #cfd8c0;
  color: var(--cs-text);
  font-weight: 600;
  cursor: pointer;
}

.cs-monat__anzahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 15px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--cs-gruen-hell);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.cs-monat__tag--hat[aria-pressed="true"] {
  background: var(--cs-gruen-mittel);
  border-color: var(--cs-gruen-mittel);
  color: #fff;
}
.cs-monat__tag--hat[aria-pressed="true"] .cs-monat__anzahl {
  background: #fff;
  color: var(--cs-gruen-dunkel);
}

/* ---- Touren des gewaehlten Tages ---------------------------------------- */
.cs-monat__tage {
  margin-top: var(--cs-abstand-4);
}

.cs-monat__hinweis {
  padding: var(--cs-abstand-4) var(--cs-abstand-3);
  color: var(--cs-text-leise);
  text-align: center;
}
.cs-monat__hinweis[hidden] { display: none; }

.cs-monat__tagtitel {
  margin: 0 0 var(--cs-abstand-2);
  font-size: var(--cs-schrift-gross);
}

/* ---- Breite Bildschirme -------------------------------------------------- */
@media (min-width: 768px) {
  .cs-monat__wochentage,
  .cs-monat__raster {
    gap: var(--cs-abstand-1);
  }
  .cs-monat__tag {
    min-height: 64px;
    gap: var(--cs-abstand-1);
  }
  .cs-monat__zahl {
    font-size: var(--cs-schrift-gross);
  }
}

/* ==========================================================================
   Monatsraster der Kalenderseite (Bestandstabelle .calendarTable)
   ==========================================================================
   Dieselbe Rechnung wie oben beim Raster der Guide-Uebersicht, nur auf die
   vorhandene Tabelle angewandt statt auf ein Grid: die Ansicht wird per Ajax
   nachgeladen (calendar/load-month-ajax.phtml) und bleibt eine Tabelle.

   Ausgangslage bei 390px Fenster: die Tabelle war 440px breit, die
   Sonntagsspalte lag ausserhalb, .filterContainer scrollte seitwaerts
   (451 > 390). Zwei Ursachen:
   1. Die Spalten richteten sich nach ihrem Inhalt - vor allem nach den
      ausgeschriebenen Wochentagsnamen im Kopf ("Donnerstag" allein 83px).
   2. screen.css:348 gibt .calendarTable .cell .center prozentuale Raender
      (margin: 33% 33%) bei 18pt Schrift; in einer schmalen Zelle laeuft die
      Tageszahl damit ueber.

   Gegenmittel: table-layout:fixed teilt die Breite gleichmaessig auf sieben
   Spalten auf, unabhaengig vom Inhalt. Bei 390px bleiben nach Rahmen und
   Zellabstand rund 52px je Spalte - ueber der 44px-Trefferflaeche.

   SPEZIFITAET: die Bestandsregeln stehen als .calendarTable .cell .center
   (0,3,0) in screen.css. Der Praefix .cs-neu hebt die Regeln hier auf (0,4,0),
   ohne screen.css anzufassen. Alle Masse in px (siehe Kopf dieser Datei). */

.cs-neu table.calendarTable {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
}

/* ---- Wochentagskopf ------------------------------------------------------
   Im Markup stehen zwei Beschriftungen je Spalte. Kein font-size:0-Trick:
   umgeschaltet wird ueber display, die jeweils andere Fassung ist wirklich
   weg. Die lange Fassung bleibt schmal nur optisch versteckt und damit fuer
   Screenreader lesbar; die kurze ist aria-hidden und traegt zusaetzlich den
   vollen Namen im title. */
.cs-neu .calendarTable th {
  padding: var(--cs-abstand-1) 0;
  font-size: var(--cs-schrift-klein);
  font-weight: 600;
  color: var(--cs-text-leise);
  text-align: center;
  white-space: nowrap;
}

.cs-neu .calendarTable .cs-kal__kurz {
  text-decoration: none;
  border-bottom: 0;
  cursor: inherit;
}

/* Schmal: Kurzfassung sichtbar, Langfassung nur fuer Hilfsmittel. */
.cs-neu .calendarTable .cs-kal__lang {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Tageszelle ----------------------------------------------------------
   56px Hoehe halten die Zelle ueber der 44px-Trefferflaeche; der Klick haengt
   unveraendert am td (onclick im Markup). */
.cs-neu .calendarTable .cell {
  height: 56px;
  padding: 0;
  vertical-align: top;
}

/* Leere Zellen vor Monatsanfang und nach Monatsende tragen keine Klasse,
   sollen aber dieselbe Hoehe halten. */
.cs-neu .calendarTable td {
  height: 56px;
}

/* Die Tageszahl: feste Raender statt prozentualer. Oben bleiben 20px frei -
   dort sitzen die beiden Statussymbole (top:6px, rechts 6px bzw. 24px), die
   Zahl schiebt sich also nicht unter sie. */
.cs-neu .calendarTable .cell .center {
  margin: 0;
  padding: 20px 2px 0;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  overflow: hidden;
}

/* Die Symbole bleiben oben rechts, ruecken schmal aber enger zusammen,
   damit beide in die 52px-Zelle passen. */
.cs-neu .calendarTable .cell .tourRequestStatus {
  top: 4px;
  right: 4px;
  font-size: 13px;
  line-height: 1;
}
.cs-neu .calendarTable .cell .tourBookingStatus {
  top: 4px;
  right: 21px;
  font-size: 13px;
  line-height: 1;
}

/* ---- Breite Bildschirme --------------------------------------------------
   Ab 768px wieder die ausgeschriebenen Wochentage. Die Tabelle bleibt
   mittig und wird auf 700px begrenzt: das ist mehr als die 441px von vorher
   (Zellen rund 98px statt 51-83px), aber kein ueber die ganze 1180px-Spalte
   gezogenes Raster mit leeren Zellen. */
@media (min-width: 768px) {
  .cs-neu table.calendarTable {
    max-width: 700px;
  }
  .cs-neu .calendarTable .cs-kal__kurz {
    display: none;
  }
  .cs-neu .calendarTable .cs-kal__lang {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
  .cs-neu .calendarTable th {
    font-size: var(--cs-schrift-normal);
  }
  .cs-neu .calendarTable .cell,
  .cs-neu .calendarTable td {
    height: 78px;
  }
  .cs-neu .calendarTable .cell .center {
    padding-top: 24px;
    font-size: 24px;
  }
  .cs-neu .calendarTable .cell .tourRequestStatus {
    top: 6px;
    right: 6px;
    font-size: 14px;
  }
  .cs-neu .calendarTable .cell .tourBookingStatus {
    top: 6px;
    right: 24px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Eintraege im Tagesblock
   ==========================================================================
   Kalenderbuchungen und Touren standen als TABELLE da - je Eintrag vier
   Zeilen, und ganz links eine 79px breite LEERE Spalte, die als Einrueckung
   diente. Bei den Kalenderbuchungen sassen dort die beiden Bedienelemente;
   der Titel begann also erst bei 79px, die Zusatzzeilen ebenfalls.

   Vom Betreiber: "die bearbeiten/löschen icons können unter die galerietour,
   dann wäre alles sauber linksbündig".

   Jetzt Bloecke: der Titel steht ganz links, darunter die Angaben, darunter
   die Aktionen. Die leere Spalte entfaellt damit ersatzlos.

   Die umgebende Tabelle trug ausserdem ein float: left. Ein Float wird so
   breit wie sein Inhalt - bei langen Buchungslisten also breiter als der
   Bildschirm. Der Behaelter ist jetzt ein gewoehnlicher Block. */
.cs-neu .cs-kaleintraege {
  display: flex;
  flex-direction: column;
  gap: var(--cs-abstand-3);
}

.cs-neu .cs-eintrag {
  padding: var(--cs-abstand-3);
  background: var(--cs-flaeche);
  border: 1px solid var(--cs-linie);
  border-left: 3px solid var(--cs-linie);
  border-radius: var(--cs-radius);
}

/* Der Titel traegt das Statussymbol und die Uhrzeit. Fett bleibt er, damit
   er sich von den Angaben darunter abhebt - das war in der Tabelle die
   einzige Gliederung und soll es bleiben. */
.cs-neu .cs-eintrag__kopf {
  font-weight: 700;
  line-height: 1.4;
}
.cs-neu .cs-eintrag__kopf .cs-zeit {
  font-weight: 400;
  color: var(--cs-text-leise);
}

/* Begleitangaben: Ort, Zahlen, Guides, Buchungen. Leiser als der Titel,
   aber nicht so leise, dass sie unlesbar werden - #666 auf Weiss sind
   5,7:1. */
.cs-neu .cs-eintrag__zeile {
  margin-top: var(--cs-abstand-1);
  color: var(--cs-text-leise);
  font-size: var(--cs-schrift-normal);
  line-height: 1.5;
}

/* Die Aktionen stehen UNTEN und links - dieselbe Kante wie der Titel. */
.cs-neu .cs-eintrag__aktionen {
  margin-top: var(--cs-abstand-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-abstand-1);
}

/* ==========================================================================
   Kalender zweispaltig auf breiten Bildschirmen
   ==========================================================================
   Vorschlag des Betreibers: "Eine Zweispaltige darstellung auf dem desktop
   mit stehenbleibendem monat und scrollbarer tourenliste ... ich habe visuell
   eine max. breite von 445px gemessen".

   Die 445px sind gut geschaetzt: bei 390px Fenster ist das Raster heute schon
   354px breit mit 48px-Spalten und lesbar; 445px ergeben 62er Spalten. Die
   Tabelle ist ohnehin bei 700px gedeckelt - auf einem 2560er Schirm stand
   rechts davon einfach Leere, waehrend die Tagesliste darunter 2321px
   Seitenhoehe erzeugte.

   #monthContainer und #detailsContainer sind direkte Geschwister; ein Raster
   auf dem Elternteil genuegt, das Markup bleibt unberuehrt.

   STICKY STATT EIGENEM ROLLBALKEN. Der Wunsch war eine "scrollbare
   Tourenliste". Eine Liste mit eigenem Rollbereich neben der Seite bedeutet
   aber zwei Rollbereiche uebereinander: das Rad rollt im falschen, springt an
   der Kante, und mit der Tastatur wird es unangenehm. Der Monat bleibt
   stattdessen stehen, die SEITE rollt wie gewohnt - gleiche Wirkung, ein
   Rollbalken weniger.

   top: 56px + Abstand, weil die Kopfzeile selbst sticky ist (shell.css) und
   das Raster sonst darunter verschwaende.

   Schwelle 1300px Fenster: der Inhaltsbereich ist rund 292px schmaler als das
   Fenster, es bleiben also gut 1000px - 445 fuer den Monat, 24 Abstand und
   ueber 500 fuer die Liste. Darunter bleibt es bei der Anordnung
   untereinander. Alle Angaben in PIXELN (Wurzelschrift ist 12px). */
@media screen and (min-width: 1300px) {
  .cs-neu #contentContent:has(#monthContainer):has(#detailsContainer) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 445px;
    gap: var(--cs-abstand-5);
    align-items: start;
  }

  /* Der Monat steht RECHTS, die Tagesliste links - auf Wunsch des Betreibers.
     Die Reihenfolge im Markup bleibt unangetastet (Monat zuerst), nur die
     Platzierung im Raster dreht sich. Beide Kinder werden ausdruecklich
     gesetzt, sonst rutscht das zweite Kind in die naechste Zeile. */
  .cs-neu #contentContent > #monthContainer {
    grid-column: 2;
    grid-row: 1;
  }
  .cs-neu #contentContent > #detailsContainer {
    grid-column: 1;
    grid-row: 1;
  }

  .cs-neu #monthContainer {
    position: sticky;
    top: calc(var(--cs-kopf-hoehe) + var(--cs-abstand-3));
  }

  /* Das Raster fuellt die Spalte, statt bei 700px zu bleiben. */
  .cs-neu #monthContainer table.calendarTable {
    width: 100%;
  }

  /* Die Zellen duerfen dabei flacher werden - 62px Spaltenbreite braucht
     keine 78px Hoehe. */
  .cs-neu #monthContainer .calendarTable td {
    height: auto;
    min-height: 56px;
  }

  /* ---- Wochentage wieder kurz ------------------------------------------
     Ab 768px Fenster schaltet der Kalender auf die AUSGESCHRIEBENEN
     Wochentage - das war richtig, solange das Raster dort 700px breit war.
     In der zweispaltigen Ansicht ist es nur noch 445px breit, das Fenster
     aber weiterhin gross. Gemeldet: "ich sehe gerade, die wochentage sind
     zu lang".

     Es entscheidet also die Breite der SPALTE, nicht die des Fensters. Hier
     gilt darum wieder, was auf schmalen Geraeten gilt: Kurzfassung sichtbar,
     Langfassung nur fuer Hilfsmittel, kleinere Zellenmasse. */
  .cs-neu #monthContainer .calendarTable .cs-kal__kurz {
    display: inline;
  }
  .cs-neu #monthContainer .calendarTable .cs-kal__lang {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cs-neu #monthContainer .calendarTable th {
    font-size: var(--cs-schrift-klein);
  }

  /* Tageszahl und Statussymbole entsprechend wieder enger - sonst stehen
     24px-Ziffern in einer 60px-Zelle. */
  .cs-neu #monthContainer .calendarTable .cell .center {
    padding: 20px 2px 0;
    font-size: 20px;
  }
  .cs-neu #monthContainer .calendarTable .cell .tourRequestStatus {
    top: 4px;
    right: 4px;
    font-size: 13px;
  }
  .cs-neu #monthContainer .calendarTable .cell .tourBookingStatus {
    top: 4px;
    right: 21px;
    font-size: 13px;
  }
  .cs-neu #monthContainer .calendarTable .cell,
  .cs-neu #monthContainer .calendarTable td {
    height: 56px;
  }
}

/* ==========================================================================
   Tagesueberschrift: Datum links, Aktion rechts
   ==========================================================================
   Betreiber: "mobil koennte der große button auf das + reduziert werden"
   und "…und rechts angeordnet werdne".

   Die allgemeine Regel in liste.css macht Ueberschriften mit Blaetterleiste
   erst ab 620px Containerbreite zur Zeile. Fuer diese eine Ueberschrift gilt
   das in JEDER Breite - nach dem Kuerzen auf das Pluszeichen passen Datum und
   Knopf auch bei 390px nebeneinander.

   Ausdruecklich auf #detailsContainer eingegrenzt: die 620px-Schwelle ist
   fuer die zwanzig Listenansichten richtig, deren Leiste vier Pfeile plus
   Seitenangabe traegt. */
.cs-neu #detailsContainer h2:has(> .pagination) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-abstand-3);
  flex-wrap: nowrap;
}

@container formular (max-width: 619px) {
  /* Nur noch das Symbol. Die Beschriftung wird UNSICHTBAR, nicht entfernt -
     sonst hat die Schaltflaeche fuer Hilfsmittel keinen Namen mehr. Gleiche
     Masse wie .cs-nur-sr in base.css. */
  .cs-neu #detailsContainer .pagination .cs-knopf > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Ohne Text wird der Knopf quadratisch - 44x44 bleibt die Trefferflaeche. */
  .cs-neu #detailsContainer .pagination .cs-knopf {
    min-width: var(--cs-ziel);
    padding: 0;
    gap: 0;
  }

  /* Das Datum darf umbrechen, der Knopf nicht schrumpfen. */
  .cs-neu #detailsContainer h2:has(> .pagination) > span {
    min-width: 0;
  }
  .cs-neu #detailsContainer h2:has(> .pagination) > .pagination {
    flex: none;
    display: flex;
    gap: var(--cs-abstand-2);
  }
}