/**
 * GCO Turnierkalender, Frontend Stylesheet.
 *
 * Regeln für diese Datei, unverhandelbar:
 * 1. Jeder Selektor beginnt mit .gcotk-kalender, damit nichts in ein fremdes
 *    Theme hineinwirkt und nichts von außen hineinwirkt. Drei bewusste
 *    Ausnahmen, siehe Kommentar jeweils dort: das abbr Element im
 *    Wochentagskopf, das a Element im Anmeldelink eines Termins der
 *    Listenansicht und dasselbe a Element im aufklappbaren Detailfeld eines
 *    Rastereintrags. Alle drei tragen in der Vorlage kein eigenes
 *    Klassenattribut, und die Vorlage lässt sich für dieses Stylesheet nicht
 *    ändern.
 * 2. Keine Stile auf nackten Elementen wie table, a, button oder h2. Jedes
 *    Element wird über eine eigene Klasse angesprochen.
 * 3. Farben, Abstände und Schriftgrößen laufen ausschließlich über die
 *    CSS Variablen unten, damit der Club sie im Theme überschreiben kann.
 *
 * Aufbau mobil zuerst. Raster und Liste stehen beide gleichzeitig im
 * Markup, jeweils in einem eigenen .gcotk-ansicht Umschlag, und schalten
 * sich per display none gegenseitig ab, siehe Abschnitt 7. Das Wurzelelement
 * trägt dafür eine von drei Klassen: .gcotk-kalender--auto lässt die
 * Bildschirmbreite entscheiden (unter 782 Pixel nur die Liste, ab 782 Pixel
 * nur das siebenspaltige Raster), .gcotk-kalender--gitter und
 * .gcotk-kalender--liste erzwingen die eine oder andere Ansicht auf jeder
 * Breite. Für das erzwungene Raster auf einem schmalen Bildschirm bleiben
 * die alten Regeln bestehen, die es in eine gestapelte Liste umbauen, siehe
 * Abschnitt 6, denn ein echtes siebenspaltiges Raster passt auf einem
 * Telefon nicht. Die Breite 782 Pixel ist bewusst identisch mit der
 * WordPress eigenen Grenze für die Admin Leiste gewählt.
 *
 * Kein Dunkelmodus: Der Kalender sitzt in einer durchgehend hellen Seite
 * und kann nicht wissen, ob das Betriebssystem des Besuchers dunkel
 * eingestellt ist. Er richtet sich ausschließlich nach dem Farbschema der
 * echten Vereinsseite, unabhängig von prefers-color-scheme.
 */

/* ==========================================================================
   1. Variablen. Einzige Stelle, an der Werte definiert werden.
   ========================================================================== */

.gcotk-kalender {
  /* Akzentfarbe der echten Vereinsseite, dunkles Bordeaux, mit einer
     dunkleren Abstufung für Hoverzustände. */
  --gcotk-farbe-primaer: #78141d;
  --gcotk-farbe-primaer-dunkel: #5a0f16;
  --gcotk-farbe-primaer-kontrast: #ffffff;

  /* Flächenfarben der Seite: warmes Sand als ruhige Abschnittsfläche,
     reines Weiß als Kartenfläche. */
  --gcotk-farbe-flaeche: #f3efe9;
  --gcotk-farbe-flaeche-erhoben: #ffffff;
  --gcotk-farbe-rand: #ece5db;

  /* Textfarben der Seite. */
  --gcotk-farbe-text: #1e1e1e;
  --gcotk-farbe-text-schwach: #6d6d6d;
  --gcotk-farbe-text-auf-primaer: #ffffff;

  /* Zustandsfarben. */
  --gcotk-farbe-heute-flaeche: rgba(120, 20, 29, 0.07);
  --gcotk-farbe-heute-rand: #78141d;
  --gcotk-farbe-fremd-text: #a39c8f;
  --gcotk-farbe-fremd-flaeche: #f3efe9;
  --gcotk-farbe-abgesagt-text: #8a3131;
  --gcotk-farbe-abgesagt-flaeche: #f7e8e8;

  /* Fokus, deutlich sichtbar für Tastaturbedienung. */
  --gcotk-farbe-fokus: #5a0f16;
  --gcotk-fokus-breite: 3px;
  --gcotk-fokus-abstand: 2px;

  /* Radien. 24 Pixel entspricht dem Eckenradius der Karten auf der Seite. */
  --gcotk-radius-klein: 4px;
  --gcotk-radius: 8px;
  --gcotk-radius-gross: 24px;
  --gcotk-radius-pille: 999px;

  /* Abstände, als Skala. */
  --gcotk-abstand-3xs: 2px;
  --gcotk-abstand-2xs: 4px;
  --gcotk-abstand-xs: 8px;
  --gcotk-abstand-s: 12px;
  --gcotk-abstand-m: 16px;
  --gcotk-abstand-l: 24px;
  --gcotk-abstand-xl: 32px;

  /* Typografie. Die Schriftfamilie erbt bewusst vom Theme des Clubs, damit
     dort Roboto in Grundgröße 16 Pixel greift. */
  --gcotk-schrift-familie: inherit;
  --gcotk-schrift-groesse-klein: 0.8125rem;
  --gcotk-schrift-groesse-basis: 1rem;
  --gcotk-schrift-groesse-gross: 1.125rem;

  /* Große Abschnittsüberschrift der Seite: 36 Pixel, Schriftstärke 700,
     leicht negative Laufweite. Gilt für die Monatsangabe im Kalenderkopf. */
  --gcotk-schrift-groesse-titel: 2.25rem;
  --gcotk-schriftstaerke-titel: 700;
  --gcotk-schrift-laufweite-titel: -0.02em;

  /* Kleine Rubriküberschrift der Seite: 14 Pixel, Schriftstärke 700,
     Großbuchstaben, Laufweite 0.7 Pixel. Gilt für die Wochentagskürzel im
     Monatsraster. */
  --gcotk-schrift-groesse-rubrik: 0.875rem;
  --gcotk-schriftstaerke-rubrik: 700;
  --gcotk-schrift-laufweite-rubrik: 0.7px;

  --gcotk-zeilenhoehe: 1.5;
  --gcotk-schriftstaerke-normal: 400;
  --gcotk-schriftstaerke-stark: 600;

  /* Plakette, nur Form und Schnitt, die Farbe kommt je Termin per Inline
     Style aus der Datenbank und überschreibt hier nichts, weil sie als
     Attribut auf demselben Element steht. Kleiner Schriftgrad und genug
     Innenabstand, damit die Kategoriefarben in der hellen Umgebung ruhig
     wirken. */
  --gcotk-plakette-polsterung-v: 4px;
  --gcotk-plakette-polsterung-h: 12px;
  --gcotk-plakette-radius: var(--gcotk-radius-pille);
  --gcotk-plakette-schriftgroesse: 0.6875rem;
  --gcotk-plakette-schriftstaerke: 600;

  /* Schmaler Kategoriebalken in einer Rasterzelle, dieselbe ruhige Optik
     wie die Plakette, nur als Balken statt als Pille. */
  --gcotk-balken-polsterung-v: 2px;
  --gcotk-balken-polsterung-h: 6px;
  --gcotk-balken-radius: var(--gcotk-radius-klein);
  --gcotk-balken-schriftgroesse: 0.6875rem;

  /* Navigationspille im Kalenderkopf. Werte eins zu eins von der echten
     Vereinsseite im Browser abgelesen, deshalb eigene Variablen statt einer
     Wiederverwendung der allgemeinen Abstandsskala, die an dieser Stelle
     keinen passenden Wert kennt. Die tragende Pille (voriger und nächster
     Monat) nutzt die größere Schriftgröße, die ruhige Pille (fehlender
     Nachbarmonat) die kleinere. */
  --gcotk-pille-polsterung-v: 8px;
  --gcotk-pille-polsterung-h: 20px;
  --gcotk-pille-schriftgroesse: 0.875rem;
  --gcotk-pille-schriftgroesse-ruhig: 0.75rem;

  /* Schatten und Rahmen, sehr weich, in der neutralen Schattenfarbe der
     Seitenkarten. */
  --gcotk-schatten: 0 2px 10px rgba(231, 231, 231, 0.8);
  --gcotk-schatten-erhoben: 0 10px 30px rgba(231, 231, 231, 0.85);
  --gcotk-rahmenbreite: 1px;

  /* Übergänge, werden bei reduzierter Bewegung auf null gesetzt. */
  --gcotk-uebergang-dauer: 150ms;
  --gcotk-uebergang-funktion: ease;

  /* Größe des sich drehenden Rings, der im geklickten Navigationsknopf das
     Pfeilsymbol ersetzt, solange ein Monat nachlädt, siehe
     .gcotk-kalender__nav-knopf--laedt weiter unten. */
  --gcotk-laedt-groesse: 14px;
  --gcotk-laedt-strichbreite: 2px;

  /* Grundformatierung des Wurzelelements selbst: die ruhige Sandfläche der
     Seite, ohne eigene Rahmenlinie, damit der Kalender wie ein weiterer
     Abschnitt der Seite wirkt und nicht wie ein fremder Kasten. */
  display: block;
  box-sizing: border-box;
  font-family: var(--gcotk-schrift-familie);
  font-size: var(--gcotk-schrift-groesse-basis);
  line-height: var(--gcotk-zeilenhoehe);
  color: var(--gcotk-farbe-text);
  background-color: var(--gcotk-farbe-flaeche);
  border: none;
  border-radius: var(--gcotk-radius-gross);
  padding: var(--gcotk-abstand-m);
}

/* Box Sizing konsequent auf alle Nachfahren, ohne einen einzigen nackten
   Elementselektor zu benutzen. Der Universalselektor ist an .gcotk-kalender
   gebunden und wirkt daher nicht außerhalb des Kalenders. */
.gcotk-kalender,
.gcotk-kalender *,
.gcotk-kalender *::before,
.gcotk-kalender *::after {
  box-sizing: border-box;
}

/* Setzt vererbbare Texteigenschaften im Kalender auf ihren Normalwert zurück.
   Das ist kein Schönheitsputz, sondern eine Absicherung gegen fremde Themes:
   white-space, word-break und hyphens werden vom Elternelement vererbt, und
   ein Theme, das auf einem beliebigen Vorfahren white-space auf nowrap setzt,
   nimmt jedem Turniernamen im Monatsraster die Möglichkeit umzubrechen. Der
   Titel läuft dann seitlich aus seinem farbigen Balken heraus und schiebt sich
   über die Nachbartage, gemessen bis zu 138 Pixel weit. Der Kalender kann nicht
   wissen, welches Theme ihn umgibt, deshalb stellt er diese Eigenschaften an
   seiner Wurzel selbst wieder her, statt sich auf die Voreinstellung des
   Browsers zu verlassen. */
.gcotk-kalender {
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  text-transform: none;
}

/* ==========================================================================
   1a. Das Attribut hidden. Muss zuverlässig gewinnen, auch gegen Klassen,
       die auf demselben Element eine eigene display Eigenschaft setzen, wie
       bei den Blätterknöpfen und beim Ladeanzeiger. Deshalb bewusst mit
       !important: hidden beschreibt einen Zustand, keine Optik, und dieser
       Zustand muss jede Formatierung übersteuern, unabhängig von deren
       Spezifität.
   ========================================================================== */

.gcotk-kalender [hidden] {
  display: none !important;
}

/* ==========================================================================
   1b. Nur für Screenreader. Blendet Text fürs Auge aus, ohne ihn aus dem
       Vorlesebaum zu nehmen, deshalb weder display none noch visibility
       hidden, sondern die übliche Zusammenzieh Technik auf einen Pixel.
   ========================================================================== */

.gcotk-kalender .gcotk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   2. Kopfbereich: Titel, Navigation, Filter.
   ========================================================================== */

.gcotk-kalender__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gcotk-abstand-s);
  margin-bottom: var(--gcotk-abstand-m);
}

.gcotk-kalender__titel {
  margin: 0;
  font-size: var(--gcotk-schrift-groesse-titel);
  font-weight: var(--gcotk-schriftstaerke-titel);
  letter-spacing: var(--gcotk-schrift-laufweite-titel);
  color: var(--gcotk-farbe-text);
}

.gcotk-kalender__nav {
  display: flex;
  align-items: center;
  gap: var(--gcotk-abstand-xs);
}

/* Die tragende Pille der Seite: Bordeaux Fläche, weiße Schrift, voll
   gerundet, ohne jede Rahmenlinie. Werte siehe Variablenblock oben, eins zu
   eins von der echten Vereinsseite abgelesen. Trägt zugleich die feste
   Mindesthöhe für ein ausreichend großes Tastziel auf einem Telefon. */
.gcotk-kalender__nav-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gcotk-abstand-3xs);
  min-height: 44px;
  padding: var(--gcotk-pille-polsterung-v) var(--gcotk-pille-polsterung-h);
  border: none;
  border-radius: var(--gcotk-radius-pille);
  background-color: var(--gcotk-farbe-primaer);
  color: var(--gcotk-farbe-text-auf-primaer);
  font-size: var(--gcotk-pille-schriftgroesse);
  font-weight: var(--gcotk-schriftstaerke-stark);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--gcotk-uebergang-dauer) var(--gcotk-uebergang-funktion);
}

/* Beim Überfahren dunkelt nur die Fläche nach, die weiße Schrift bleibt
   unverändert, wie auf der echten Seite. */
/* Beim Überfahren dunkelt ausschließlich die Fläche nach, die Schrift bleibt
   weiß. Die Schriftfarbe wird hier ausdrücklich wiederholt, obwohl sie im
   Grundzustand schon steht: Fast jedes Theme bringt eine eigene Regel für den
   überfahrenen Link mit, und ohne diese Wiederholung setzt sich dessen Farbe
   durch. Sichtbar wäre das als dunkler Text auf dunklem Bordeaux, also
   praktisch unlesbar. Aus demselben Grund stehen auch die übrigen Zustände
   dabei. */
.gcotk-kalender .gcotk-kalender__nav-knopf:hover,
.gcotk-kalender .gcotk-kalender__nav-knopf:focus,
.gcotk-kalender .gcotk-kalender__nav-knopf:focus-visible,
.gcotk-kalender .gcotk-kalender__nav-knopf:active,
.gcotk-kalender .gcotk-kalender__nav-knopf:visited {
  /* Die Schriftfarbe steht hier mit Nachdruck, und das ist eine bewusste
     Ausnahme von der sonstigen Zurückhaltung. Ein Theme formuliert seine
     Linkfarbe typischerweise als .entry-content a:hover und ist damit
     spezifischer als jede Klassenregel des Plugins. Setzt sich diese Farbe
     durch, steht dunkler Text auf dunklem Bordeaux, und der Knopf ist beim
     Überfahren nicht mehr zu lesen. Weiße Schrift auf der Clubfarbe ist
     keine Geschmacksfrage, sondern die Bedingung dafür, dass die Beschriftung
     erkennbar bleibt. */
  color: var(--gcotk-farbe-text-auf-primaer) !important;
}

.gcotk-kalender .gcotk-kalender__nav-knopf:hover {
  background-color: var(--gcotk-farbe-primaer-dunkel);
}

.gcotk-kalender__nav-knopf:focus-visible {
  outline: var(--gcotk-fokus-breite) solid var(--gcotk-farbe-fokus);
  outline-offset: var(--gcotk-fokus-abstand);
}

/* Pfeilsymbol innerhalb eines Blätterknopfs, rein dekorativ und deshalb
   aria-hidden im Markup. Die eigene Zeilenhöhe hält das Zeichen sauber auf
   der Grundlinie des umgebenden Textes. */
.gcotk-kalender .gcotk-kalender__nav-icon {
  display: inline-block;
  line-height: 1;
}

/* Während des Nachladens per JavaScript werden alle Knöpfe gesperrt, damit
   ein Doppelklick keine zweite Anfrage auslöst. Die Sperre wirkt rein
   visuell und per aria-disabled, echtes disabled gibt es bei Links nicht. */
.gcotk-kalender__nav-knopf[aria-disabled='true'] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Der Ladezustand selbst zeigt sich seit der Rückmeldung des Kunden nur noch
   am tatsächlich geklickten Knopf, siehe gcotkKalenderInstanz.knoepfeSperren
   im Skript: die Klasse landet gezielt auf genau diesem einen Knopf, nicht
   auf allen. Statt eines eigenen Hinweises über dem Kalender, der beim
   Erscheinen und Verschwinden den ganzen Kalender springen ließ, dreht sich
   nun nur noch der Pfeil im Knopf selbst zu einem Ring. Die Beschriftung
   bleibt unverändert stehen, deshalb ändert der Knopf beim Laden nicht
   seine Breite. */
.gcotk-kalender__nav-knopf--laedt .gcotk-kalender__nav-icon {
  position: relative;
  display: inline-block;
  width: var(--gcotk-laedt-groesse);
  height: var(--gcotk-laedt-groesse);
  font-size: 0;
  line-height: 0;
}

.gcotk-kalender__nav-knopf--laedt .gcotk-kalender__nav-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--gcotk-laedt-strichbreite) solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--gcotk-farbe-text-auf-primaer);
  animation: gcotk-drehen 700ms linear infinite;
}

/* Platzhalter für einen dauerhaft fehlenden Nachbarmonat, siehe Kommentar im
   Template. Bleibt als span im Markup, damit die Navigation ihre Breite
   nicht verliert. Die ruhige Pille der Seite: Sandfläche, graue Schrift,
   kleinere Schriftgröße, dieselbe volle Rundung, nicht anklickbar.
   pointer-events: none genügt, ein eigener Hoverzustand entsteht dadurch gar
   nicht erst. */
.gcotk-kalender .gcotk-kalender__nav-knopf--deaktiviert {
  background-color: var(--gcotk-farbe-flaeche);
  color: var(--gcotk-farbe-text-schwach);
  font-size: var(--gcotk-pille-schriftgroesse-ruhig);
  cursor: default;
  pointer-events: none;
}

.gcotk-kalender--laedt .gcotk-kalender__nav-knopf {
  opacity: 0.6;
  pointer-events: none;
}

.gcotk-kalender__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gcotk-abstand-xs);
  margin-bottom: var(--gcotk-abstand-m);
  padding-bottom: var(--gcotk-abstand-m);
  border-bottom: var(--gcotk-rahmenbreite) solid var(--gcotk-farbe-rand);
}

/* Umschaltknöpfe des Kategoriefilters. Klassenname als Vorschlag der
   Frontend Integration, siehe Rückmeldung. */
.gcotk-kalender__filter-knopf {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--gcotk-abstand-3xs) var(--gcotk-abstand-s);
  border: var(--gcotk-rahmenbreite) solid var(--gcotk-farbe-rand);
  border-radius: var(--gcotk-radius-pille);
  background-color: var(--gcotk-farbe-flaeche-erhoben);
  color: var(--gcotk-farbe-text);
  font-size: var(--gcotk-schrift-groesse-klein);
  font-weight: var(--gcotk-schriftstaerke-stark);
  cursor: pointer;
  transition: background-color var(--gcotk-uebergang-dauer) var(--gcotk-uebergang-funktion),
    border-color var(--gcotk-uebergang-dauer) var(--gcotk-uebergang-funktion);
}

.gcotk-kalender__filter-knopf[aria-pressed='true'] {
  border-color: var(--gcotk-farbe-primaer);
  background-color: var(--gcotk-farbe-primaer);
  color: var(--gcotk-farbe-text-auf-primaer);
}

.gcotk-kalender__filter-knopf:focus-visible {
  outline: var(--gcotk-fokus-breite) solid var(--gcotk-farbe-fokus);
  outline-offset: var(--gcotk-fokus-abstand);
}

/* Der Kategoriefilter ist ein normales Formular mit Ankreuzfeldern, kein
   Umschaltknopf. Das fieldset trägt die eigentliche Zeile, deshalb wird der
   Rahmen des Browsers zurückgesetzt und min-width auf 0 gestellt, damit das
   Element in einem Flexkontext schrumpfen darf. */
.gcotk-kalender .gcotk-kalender__filter-feld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gcotk-abstand-s);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gcotk-kalender .gcotk-kalender__filter-legende {
  padding: 0;
  margin: 0;
  font-size: var(--gcotk-schrift-groesse-klein);
  font-weight: var(--gcotk-schriftstaerke-stark);
  color: var(--gcotk-farbe-text-schwach);
}

.gcotk-kalender .gcotk-kalender__filter-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gcotk-abstand-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gcotk-kalender .gcotk-kalender__filter-eintrag {
  display: inline-flex;
  align-items: center;
}

.gcotk-kalender .gcotk-kalender__filter-checkbox {
  width: 16px;
  height: 16px;
  margin: 0 var(--gcotk-abstand-2xs) 0 0;
  accent-color: var(--gcotk-farbe-primaer);
  cursor: pointer;
  flex-shrink: 0;
}

.gcotk-kalender .gcotk-kalender__filter-label {
  display: inline-flex;
  align-items: center;
  gap: var(--gcotk-abstand-2xs);
  font-size: var(--gcotk-schrift-groesse-klein);
  color: var(--gcotk-farbe-text);
  cursor: pointer;
}

/* Farbpunkt der Kategorie, reines Wiedererkennungsmerkmal neben dem Label
   Text, deshalb aria-hidden im Markup und ohne eigene Bedeutung fürs
   Screenreader. */
.gcotk-kalender .gcotk-kalender__filter-farbe {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: var(--gcotk-rahmenbreite) solid var(--gcotk-farbe-rand);
  flex-shrink: 0;
}

.gcotk-kalender .gcotk-kalender__filter-submit {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--gcotk-abstand-3xs) var(--gcotk-abstand-s);
  border: 0;
  border-radius: var(--gcotk-radius-klein);
  background-color: var(--gcotk-farbe-primaer);
  color: var(--gcotk-farbe-text-auf-primaer);
  font-size: var(--gcotk-schrift-groesse-klein);
  font-weight: var(--gcotk-schriftstaerke-stark);
  cursor: pointer;
  transition: background-color var(--gcotk-uebergang-dauer) var(--gcotk-uebergang-funktion);
}

.gcotk-kalender .gcotk-kalender__filter-submit:hover {
  background-color: var(--gcotk-farbe-primaer-dunkel);
}

.gcotk-kalender .gcotk-kalender__filter-submit:focus-visible {
  outline: var(--gcotk-fokus-breite) solid var(--gcotk-farbe-fokus);
  outline-offset: var(--gcotk-fokus-abstand);
}

/* ==========================================================================
   2a. Kategorie Legende. Steht unterhalb von Titel und Navigation, oberhalb
       der Ansichten, und zeigt nur die Kategorien des gerade angezeigten
       Monats, siehe GCOTK_Shortcode::legende_kategorien(). Bewusst
       zurückhaltend gehalten: kleine graue Rubriküberschrift wie an anderer
       Stelle der Seite, Einträge in einer Zeile nebeneinander mit Umbruch
       auf schmalen Bildschirmen, denn die Legende ist eine Hilfe und kein
       Blickfang.
   ========================================================================== */

.gcotk-kalender__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gcotk-abstand-xs) var(--gcotk-abstand-m);
  margin-bottom: var(--gcotk-abstand-m);
}

.gcotk-kalender .gcotk-kalender__legende-titel {
  font-size: var(--gcotk-schrift-groesse-klein);
  font-weight: var(--gcotk-schriftstaerke-stark);
  color: var(--gcotk-farbe-text-schwach);
}

.gcotk-kalender .gcotk-kalender__legende-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gcotk-abstand-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gcotk-kalender .gcotk-kalender__legende-eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--gcotk-abstand-2xs);
}

/* Der Farbpunkt trägt seine Farbe als Inline Style aus der Datenbank, hier
   wird nur die Form festgelegt: vollständig rund, passend zum Farbpunkt des
   Kategoriefilters weiter oben, mit derselben zarten Rahmenlinie, damit auch
   sehr helle Kategoriefarben auf der hellen Fläche erkennbar bleiben. */
.gcotk-kalender .gcotk-kalender__legende-farbe {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: var(--gcotk-rahmenbreite) solid var(--gcotk-farbe-rand);
  flex-shrink: 0;
}

.gcotk-kalender .gcotk-kalender__legende-label {
  font-size: var(--gcotk-schrift-groesse-klein);
  color: var(--gcotk-farbe-text-schwach);
}

/* ==========================================================================
   3. Inhalt und Ladezustand.
   ========================================================================== */

.gcotk-kalender__inhalt {
  position: relative;
  min-height: 80px;
}

.gcotk-kalender--laedt .gcotk-kalender__inhalt {
  opacity: 0.5;
}

/* Der Ladehinweis erschien früher sichtbar über dem Kalender und ließ ihn
   beim Erscheinen und Verschwinden springen, ausdrücklich vom Kunden
   bemängelt. Der sichtbare Ladezustand sitzt seither im geklickten
   Navigationsknopf selbst, siehe .gcotk-kalender__nav-knopf--laedt weiter
   oben. Dieses Element bleibt dauerhaft fürs Auge verborgen, aber im
   Vorlesebaum stehen, damit der Wechsel für Screenreader weiterhin über den
   aria-live Bereich am Wurzelelement angesagt wird, siehe
   gcotkKalenderInstanz.knoepfeSperren im Skript, das nur noch den Text
   austauscht statt das Element ein und auszublenden. Dieselbe
   Zusammenzieh Technik wie .gcotk-sr-only oben. */
.gcotk-kalender .gcotk-laedt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes gcotk-drehen {
  to {
    transform: rotate(360deg);
  }
}

.gcotk-kalender__leer {
  padding: var(--gcotk-abstand-l);
  text-align: center;
  color: var(--gcotk-farbe-text-schwach);
  background-color: var(--gcotk-farbe-flaeche-erhoben);
  border: var(--gcotk-rahmenbreite) dashed var(--gcotk-farbe-rand);
  border-radius: var(--gcotk-radius);
}

.gcotk-kalender .gcotk-kalender__leer-text {
  margin: 0 0 var(--gcotk-abstand-xs);
}

.gcotk-kalender .gcotk-kalender__leer-text:last-child {
  margin-bottom: 0;
}

.gcotk-kalender .gcotk-kalender__leer-link {
  color: var(--gcotk-farbe-primaer-dunkel);
  font-weight: var(--gcotk-schriftstaerke-stark);
  text-decoration: underline;
}

.gcotk-kalender .gcotk-kalender__leer-link:hover {
  color: var(--gcotk-farbe-primaer);
}

.gcotk-kalender .gcotk-kalender__leer-link:focus-visible {
  outline: var(--gcotk-fokus-breite) solid var(--gcotk-farbe-fokus);
  outline-offset: var(--gcotk-fokus-abstand);
}

/* ==========================================================================
   4. Plakette. Nur Form, Abstand und Schriftschnitt, die Farbe kommt aus
      der Datenbank als Inline Style auf demselben Element.
   ========================================================================== */

.gcotk-kalender .gcotk-plakette {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: var(--gcotk-plakette-polsterung-v) var(--gcotk-plakette-polsterung-h);
  border-radius: var(--gcotk-plakette-radius);
  font-size: var(--gcotk-plakette-schriftgroesse);
  font-weight: var(--gcotk-plakette-schriftstaerke);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Neutraler Standard, falls das PHP ausnahmsweise keine Inline Farbe
     setzt. Die echte Farbe überschreibt dies per style Attribut. */
  background-color: var(--gcotk-farbe-rand);
  color: var(--gcotk-farbe-text);
}

/* Kategoriefilter blendet Termine per JavaScript aus, ohne Serveranfrage.
   Im Raster trägt nicht der Knopf selbst das hidden Attribut, sondern seine
   Hülle, siehe gcotk-frontend.js filterAnwenden(): sonst bliebe eine leere
   Lücke in der Tageszelle stehen, weil das umgebende Listenelement bestehen
   bliebe. */
.gcotk-kalender .gcotk-termin[hidden],
.gcotk-kalender .gcotk-gitter__eintrag-huelle[hidden] {
  display: none;
}

/* ==========================================================================
   5. Listenansicht.
   ========================================================================== */

.gcotk-kalender .gcotk-liste {
  display: flex;
  flex-direction: column;
  gap: var(--gcotk-abstand-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Jeder Listeneintrag ist reines Strukturelement um das article, min-width
   0 verhindert, dass ein langer Titel den Flex Container über die Breite
   der Liste hinaus schiebt. */
.gcotk-kalender .gcotk-liste__eintrag {
  min-width: 0;
}

/* Ein Termin sieht aus wie jede andere Karte der Seite: weiße Fläche,
   24 Pixel Eckenradius, sehr weicher Schatten, keine sichtbare Rahmenlinie.
   flex-wrap bewusst nowrap: der Datumsblock links und der Inhalt rechts
   sollen auf jeder Breite nebeneinander stehen, auch auf 390 Pixel. Der
   Inhalt darf dafür beliebig schmal werden und seinen Text umbrechen, siehe
   min-width 0 bei .gcotk-termin__inhalt weiter unten, der Datumsblock bleibt
   über flex 0 0 auto starr bei seiner festen Breite. */
.gcotk-kalender .gcotk-termin {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gcotk-abstand-m);
  padding: var(--gcotk-abstand-m);
  background-color: var(--gcotk-farbe-flaeche-erhoben);
  border: none;
  border-radius: var(--gcotk-radius-gross);
  box-shadow: var(--gcotk-schatten);
}

.gcotk-kalender .gcotk-termin__datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 64px;
  padding: var(--gcotk-abstand-xs);
  background-color: var(--gcotk-farbe-flaeche);
  border-radius: var(--gcotk-radius-klein);
  color: var(--gcotk-farbe-primaer-dunkel);
}

.gcotk-kalender .gcotk-termin__tag {
  font-size: 1.5rem;
  font-weight: var(--gcotk-schriftstaerke-stark);
  line-height: 1.1;
}

.gcotk-kalender .gcotk-termin__wochentag {
  font-size: var(--gcotk-schrift-groesse-klein);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gcotk-farbe-text-schwach);
}

/* Trennzeichen zwischen Start und Enddatum eines mehrtägigen Turniers,
   rein optisch und deshalb aria-hidden im Markup. */
.gcotk-kalender .gcotk-termin__tag-bis {
  font-size: var(--gcotk-schrift-groesse-klein);
  color: var(--gcotk-farbe-text-schwach);
}

.gcotk-kalender .gcotk-termin__inhalt {
  flex: 1 1 220px;
  min-width: 0;
}

/* Kopfzeile aus Titel, Kategorieplakette und optionalem Status Hinweis,
   nebeneinander mit Umbruch, wenn der Platz nicht reicht. */
.gcotk-kalender .gcotk-termin__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gcotk-abstand-xs);
}

.gcotk-kalender .gcotk-termin__titel {
  margin: 0 0 var(--gcotk-abstand-3xs);
  font-size: var(--gcotk-schrift-groesse-gross);
  font-weight: var(--gcotk-schriftstaerke-stark);
  color: var(--gcotk-farbe-text);
  /* Wie beim Rastereintrag: gegen ein Theme abgesichert, das den Umbruch über
     einen spezifischeren Selektor unterbindet. Ein langer Turniername würde
     sonst aus der Karte laufen. */
  white-space: normal;
  overflow-wrap: break-word;
}

/* Status Plakette neben dem Titel, in derselben Optik wie .gcotk-plakette,
   aber in den gedämpften Abgesagt Farben. */
.gcotk-kalender .gcotk-termin__status {
  display: inline-flex;
  align-items: center;
  padding: var(--gcotk-plakette-polsterung-v) var(--gcotk-plakette-polsterung-h);
  border-radius: var(--gcotk-plakette-radius);
  background-color: var(--gcotk-farbe-abgesagt-flaeche);
  color: var(--gcotk-farbe-abgesagt-text);
  font-size: var(--gcotk-plakette-schriftgroesse);
  font-weight: var(--gcotk-plakette-schriftstaerke);
  line-height: 1.4;
}

.gcotk-kalender .gcotk-termin__zeitraum {
  margin: var(--gcotk-abstand-2xs) 0 0;
  font-size: var(--gcotk-schrift-groesse-klein);
  color: var(--gcotk-farbe-text-schwach);
}

.gcotk-kalender .gcotk-termin__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gcotk-abstand-xs);
  margin-bottom: var(--gcotk-abstand-2xs);
  font-size: var(--gcotk-schrift-groesse-klein);
  color: var(--gcotk-farbe-text-schwach);
}

.gcotk-kalender .gcotk-termin__meta-eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--gcotk-abstand-3xs);
}

.gcotk-kalender .gcotk-termin__meta-icon {
  line-height: 1;
}

.gcotk-kalender .gcotk-termin__beschreibung {
  margin: var(--gcotk-abstand-2xs) 0 0;
  font-size: var(--gcotk-schrift-groesse-basis);
  color: var(--gcotk-farbe-text);
}

.gcotk-kalender .gcotk-termin__link {
  display: inline-flex;
  align-items: center;
  margin-top: var(--gcotk-abstand-xs);
  padding: var(--gcotk-abstand-3xs) var(--gcotk-abstand-s);
  border-radius: var(--gcotk-radius-klein);
  background-color: var(--gcotk-farbe-primaer);
  color: var(--gcotk-farbe-text-auf-primaer);
  font-size: var(--gcotk-schrift-groesse-klein);
  font-weight: var(--gcotk-schriftstaerke-stark);
  text-decoration: none;
}

/* Die Klasse für die Bordeaux Knopfoptik sitzt auf dem umgebenden p, der
   eigentliche Link ist das a darin und trägt in der Vorlage kein eigenes
   Klassenattribut. Ohne diese Regel gewinnt die Browservorgabe für a
   Elemente, blaue unterstrichene Schrift statt weißer Knopfschrift, weil
   eine direkte Deklaration auf dem Element selbst immer vor einem ererbten
   Wert gewinnt, auch wenn sie aus dem Browser stammt. Zweite bewusste
   Ausnahme von der Regel, keine nackten Elemente anzusprechen, aus
   demselben Grund wie beim abbr Element oben: die Vorlage lässt sich für
   dieses Stylesheet nicht ändern. */
.gcotk-kalender .gcotk-termin__link a {
  color: inherit;
  text-decoration: inherit;
}

.gcotk-kalender .gcotk-termin__link:hover {
  background-color: var(--gcotk-farbe-primaer-dunkel);
}

/* Fokussierbar ist das a, nicht das umgebende p, deshalb muss der sichtbare
   Fokusring auch dort ansetzen, sonst bekommt ein Tastaturnutzer nur den
   blauen Browser Standard zu sehen statt des eigenen Fokusstils. */
.gcotk-kalender .gcotk-termin__link a:focus-visible {
  outline: var(--gcotk-fokus-breite) solid var(--gcotk-farbe-fokus);
  outline-offset: var(--gcotk-fokus-abstand);
}

/* Abgesagte Termine bleiben sichtbar, werden aber deutlich als abgesagt
   markiert. Durchstreichen des Titels genügt, Farbe unterstützt es. */
.gcotk-kalender .gcotk-termin--abgesagt {
  background-color: var(--gcotk-farbe-abgesagt-flaeche);
}

.gcotk-kalender .gcotk-termin--abgesagt .gcotk-termin__titel {
  text-decoration: line-through;
  color: var(--gcotk-farbe-abgesagt-text);
}

/* Direkte Regel für die Modifikatorklasse am Titel selbst, damit dieselbe
   Durchstreichung auch dann greift, wenn die Klasse einmal ohne den
   umgebenden .gcotk-termin--abgesagt Kontext verwendet wird. */
.gcotk-kalender .gcotk-termin__titel--abgesagt {
  text-decoration: line-through;
  color: var(--gcotk-farbe-abgesagt-text);
}

.gcotk-kalender .gcotk-termin--abgesagt .gcotk-termin__beschreibung {
  color: var(--gcotk-farbe-text-schwach);
}

/* ==========================================================================
   6. Monatsraster. Ab 782 Pixel ein echtes siebenspaltiges Gitter, siehe
      Media Query weiter unten. Die folgenden Regeln bis einschließlich
      .gcotk-gitter__zelle--fremd bauen das Raster unterhalb von 782 Pixel
      in eine gestapelte Liste um. Das wird im Normalfall (Ansicht auto)
      gar nicht sichtbar, weil Abschnitt 7 das Raster dort unterhalb von
      782 Pixel bereits vollständig ausblendet. Gebraucht werden diese
      Regeln, wenn die Ansicht ausdrücklich auf Raster erzwungen ist
      (.gcotk-kalender--gitter): ein echtes siebenspaltiges Raster passt auf
      einem Telefon nicht, deshalb bleiben sie bewusst auf diese Wurzelklasse
      beschränkt, statt für jede Ansicht zu gelten.
   ========================================================================== */

.gcotk-kalender--gitter .gcotk-gitter {
  display: block;
}

/* Kopf und Körper der Tabelle, ohne eigene Optik: display: block verhindert,
   dass der Browser wegen des umgebenden display: block auf .gcotk-gitter
   eine unsichtbare Hilfstabelle um die Zeilengruppe herum erzeugt. Nötig als
   eigene Ebene zwischen Tabelle und Zeile, sonst fällt das Raster in sich
   zusammen. Die echte Tabellenrolle bleibt vollständig über die ARIA
   Attribute im Markup erhalten, siehe Kommentar dort. */
.gcotk-kalender--gitter .gcotk-gitter__kopfzeilen,
.gcotk-kalender--gitter .gcotk-gitter__wochen {
  display: block;
}

/* Tabellenzeile ohne eigene Optik: display: block verhindert, dass der
   Browser wegen des umgebenden display: block auf .gcotk-gitter eine
   unsichtbare Hilfstabelle um die Zeile herum erzeugt. Gilt für die
   Wochenzeilen im Körper genauso wie für die Kopfzeile mit den sieben
   Wochentagen. Die echte Tabellenrolle bleibt vollständig über die ARIA
   Attribute im Markup erhalten, siehe Kommentar dort. */
.gcotk-kalender--gitter .gcotk-gitter__zeile,
.gcotk-kalender--gitter .gcotk-gitter__kopfzeile {
  display: block;
}

/* Der Wochentagskopf ergibt in der gestapelten Ansicht keinen Sinn und wird
   dort ausgeblendet, weil jede Zelle ihr Datum ohnehin trägt. */
.gcotk-kalender--gitter .gcotk-gitter__kopf {
  display: none;
}

/* display: block ergänzt hier gezielt die fehlende Eigenschaft der
   bestehenden Regel: ohne sie bleibt die Zelle eine table-cell Box ohne
   passende Zeile darüber (siehe .gcotk-gitter__zeile weiter oben) und
   läuft mit ihren Nachbarzellen über die Containerbreite hinaus, statt
   sich unter ihnen zu stapeln. Alle übrigen Eigenschaften unverändert. */
.gcotk-kalender--gitter .gcotk-gitter__zelle {
  display: block;
  padding: var(--gcotk-abstand-s);
  margin-bottom: var(--gcotk-abstand-xs);
  background-color: var(--gcotk-farbe-flaeche-erhoben);
  border: var(--gcotk-rahmenbreite) solid var(--gcotk-farbe-rand);
  border-radius: var(--gcotk-radius);
}

/* Tage aus dem Vor oder Folgemonat werden in der gestapelten Ansicht
   ausgeblendet, damit sie ein reiner Terminplan des laufenden Monats
   bleibt. Ab 782 Pixel erscheinen sie wieder, weil dort ein vollständiges
   Rasterbild des Monats erwartet wird. */
.gcotk-kalender--gitter .gcotk-gitter__zelle--fremd {
  display: none;
}

/* Der heutige Tag wird sparsam hervorgehoben: eine dünne Umrandung in
   Bordeaux und eine sehr helle Tönung der Fläche, keine satte Farbfläche. */
.gcotk-kalender .gcotk-gitter__zelle--heute {
  background-color: var(--gcotk-farbe-heute-flaeche);
  border-color: var(--gcotk-farbe-heute-rand);
  border-width: var(--gcotk-rahmenbreite);
}

/* Ein Tag ohne Turnier bekommt keine eigene Fläche, nur eine gedämpfte
   Tageszahl, damit Tage mit Turnieren beim Überfliegen des Rasters
   auffallen. Dieselbe Technik wie bei der Tageszahl im Fremdmonat. Steht
   bewusst vor der heute Regel unten: ist ein leerer Tag zugleich der
   heutige, soll die Hervorhebung von heute gewinnen. */
.gcotk-kalender .gcotk-gitter__zelle--leer .gcotk-gitter__tag {
  color: var(--gcotk-farbe-text-schwach);
}

.gcotk-kalender .gcotk-gitter__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  margin-bottom: var(--gcotk-abstand-2xs);
  padding: 0 var(--gcotk-abstand-2xs);
  border-radius: var(--gcotk-radius-klein);
  font-size: var(--gcotk-schrift-groesse-klein);
  font-weight: var(--gcotk-schriftstaerke-stark);
  color: var(--gcotk-farbe-primaer-dunkel);
}

.gcotk-kalender .gcotk-gitter__zelle--heute .gcotk-gitter__tag {
  background-color: var(--gcotk-farbe-heute-rand);
  color: var(--gcotk-farbe-text-auf-primaer);
  border-radius: var(--gcotk-radius-pille);
}

/* Der Text "Heute" ergänzt die eingefärbte Tageszahl nur für Screenreader,
   sichtbar zeigt die Fläche in var(--gcotk-farbe-heute-rand) den heutigen
   Tag bereits eindeutig. Gleiche Zusammenzieh Technik wie .gcotk-sr-only
   oben. */
.gcotk-kalender .gcotk-gitter__heute-marke {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gcotk-kalender .gcotk-gitter__termine {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hülle um Knopf und aufklappbares Feld, siehe templates/kalender-gitter.php.
   position: relative macht sie zum Bezugsrahmen für das absolut positionierte
   Detailfeld weiter unten. */
.gcotk-kalender .gcotk-gitter__eintrag-huelle {
  position: relative;
}

/* Der Knopf ersetzt seit der Einführung des aufklappbaren Feldes einen
   früheren Link, muss aber optisch exakt wie zuvor aussehen: ein schmaler
   farbiger Balken in der Tageszelle, die Farbe kommt per Inline Style aus
   der Datenbank. Kleiner Schriftgrad, genug Innenabstand und eine leichte
   Rundung sorgen dafür, dass die Balken in der hellen Umgebung ruhig
   wirken, dieselbe Idee wie bei der Plakette. Weil es jetzt ein echtes
   button Element ist, wird die native Knopfoptik des Browsers vollständig
   zurückgesetzt: keine Rahmenlinie, kein eigener Hintergrund, keine fremde
   Schriftart, dafür der Zeigefinger als Mauszeiger. */
.gcotk-kalender .gcotk-gitter__eintrag {
  display: block;
  width: 100%;
  margin: 0 0 var(--gcotk-abstand-3xs);
  padding: var(--gcotk-balken-polsterung-v) var(--gcotk-balken-polsterung-h);
  border: none;
  border-radius: var(--gcotk-balken-radius);
  font-family: inherit;
  font-size: var(--gcotk-balken-schriftgroesse);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  /* Bricht auch ein einzelnes sehr langes Wort innerhalb der schmalen
     Zellbreite um, statt die Spalte zu verbreitern, siehe min-width 0 bei
     .gcotk-gitter__zelle. overflow-wrap vererbt sich auf die Spans darin.
     Die Silbentrennung steht davor, damit ein Wort wie Seniorengolf an einer
     sinnvollen Stelle mit Trennstrich umbricht und nicht als Seniorengol und f
     zerfällt. Sie greift nur, wenn die Seite ihre Sprache angibt, was
     WordPress über das lang Attribut am html Element tut. Fehlt die Angabe,
     bleibt overflow-wrap als Auffangnetz bestehen. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.gcotk-kalender .gcotk-gitter__eintrag:focus-visible {
  outline: var(--gcotk-fokus-breite) solid var(--gcotk-farbe-fokus);
  outline-offset: var(--gcotk-fokus-abstand);
}

/* Das aufklappbare Feld: eine kleine Karte unterhalb des Turniers, mit
   demselben weichen Schatten und Eckenradius wie die übrigen Karten der
   Seite. Absolut positioniert innerhalb der Hülle, weil die Tageszelle
   selbst zu schmal für den Inhalt ist, deshalb liegt das Feld über den
   Nachbarzellen. Das Attribut hidden blendet es im Ausgangszustand aus,
   siehe die allgemeine Regel dazu ganz oben in dieser Datei, und
   gcotk-frontend.js schaltet es beim Klick auf den Knopf um. */
.gcotk-kalender .gcotk-gitter__detail {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 220px;
  max-width: 280px;
  margin-top: var(--gcotk-abstand-2xs);
  padding: var(--gcotk-abstand-s);
  background-color: var(--gcotk-farbe-flaeche-erhoben);
  border-radius: var(--gcotk-radius);
  box-shadow: var(--gcotk-schatten-erhoben);
  color: var(--gcotk-farbe-text);
  text-align: left;
  hyphens: auto;
  overflow-wrap: break-word;
}

.gcotk-kalender .gcotk-gitter__detail-titel {
  margin: 0 0 var(--gcotk-abstand-xs);
  font-size: var(--gcotk-schrift-groesse-basis);
  font-weight: var(--gcotk-schriftstaerke-stark);
  color: var(--gcotk-farbe-text);
}

.gcotk-kalender .gcotk-gitter__detail-liste {
  display: flex;
  flex-direction: column;
  gap: var(--gcotk-abstand-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--gcotk-schrift-groesse-klein);
  color: var(--gcotk-farbe-text-schwach);
}

.gcotk-kalender .gcotk-gitter__detail-zeile--abgesagt {
  color: var(--gcotk-farbe-abgesagt-text);
  font-weight: var(--gcotk-schriftstaerke-stark);
}

.gcotk-kalender .gcotk-gitter__detail-zeile--kategorie {
  margin-top: var(--gcotk-abstand-3xs);
}

/* Dritte bewusste Ausnahme von der Regel, keine nackten Elemente
   anzusprechen, siehe Klassenkommentar der Datei: der Anmeldelink im
   Detailfeld trägt in der Vorlage kein eigenes Klassenattribut, und die
   Vorlage lässt sich für dieses Stylesheet nicht ändern. Ohne diese Regel
   gewinnt sonst die blaue unterstrichene Browservorgabe für a Elemente. */
.gcotk-kalender .gcotk-gitter__detail-zeile--anmeldung a {
  color: var(--gcotk-farbe-primaer-dunkel);
  font-weight: var(--gcotk-schriftstaerke-stark);
  text-decoration: underline;
}

.gcotk-kalender .gcotk-gitter__detail-zeile--anmeldung a:hover {
  color: var(--gcotk-farbe-primaer);
}

/* Fokussierbar ist das a, nicht die umgebende Zeile, deshalb muss der
   sichtbare Fokusring auch dort ansetzen, sonst bekommt ein Tastaturnutzer
   nur den blauen Browser Standard zu sehen statt des eigenen Fokusstils. */
.gcotk-kalender .gcotk-gitter__detail-zeile--anmeldung a:focus-visible {
  outline: var(--gcotk-fokus-breite) solid var(--gcotk-farbe-fokus);
  outline-offset: var(--gcotk-fokus-abstand);
}

/* Abgesagtes Turnier im Raster: dieselbe Durchstreichung wie in der Liste.
   Die gedämpfte Farbe kommt über opacity statt über eine eigene Textfarbe,
   weil Hintergrund und Textfarbe des Eintrags als Inline Style aus der
   Kategorie gesetzt werden und eine Deklaration hier dagegen nicht ohne
   !important gewinnen würde. opacity ist dort nicht gesetzt und dämpft
   beide Inline Farben gemeinsam, unabhängig von der jeweiligen Kategorie. */
.gcotk-kalender .gcotk-gitter__eintrag--abgesagt {
  text-decoration: line-through;
  opacity: 0.6;
}

.gcotk-kalender .gcotk-gitter__eintrag-zeit {
  margin-right: var(--gcotk-abstand-3xs);
  font-weight: var(--gcotk-schriftstaerke-stark);
}

/* Der Titel wiederholt die Umbruchregeln, obwohl sie schon an der Wurzel des
   Kalenders stehen. Ein Theme kann mit einem spezifischeren Selektor, etwa über
   den Inhaltsbereich eines Beitrags, die Wurzelregel überstimmen, und dann läuft
   genau hier der Turniername aus seinem Balken heraus. Doppelt gesetzt kostet
   nichts und hält auch dann. */
.gcotk-kalender .gcotk-gitter__eintrag-titel,
.gcotk-kalender .gcotk-gitter__eintrag-zeit,
.gcotk-kalender .gcotk-gitter__eintrag-kategorie,
.gcotk-kalender .gcotk-gitter__eintrag-status {
  white-space: normal;
  overflow-wrap: break-word;
}

.gcotk-kalender .gcotk-gitter__eintrag-titel {
  font-weight: var(--gcotk-schriftstaerke-normal);
}

/* Die Kategorie steht im Raster nur für Screenreader im Text, sichtbar
   trägt der Eintrag seine Kategorie bereits über die Hintergrundfarbe aus
   der Datenbank. Der schmale Platz einer Rasterzelle reicht sonst nicht
   für ein weiteres sichtbares Label je Eintrag. */
.gcotk-kalender .gcotk-gitter__eintrag-kategorie {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gcotk-kalender .gcotk-gitter__eintrag-status {
  margin-left: var(--gcotk-abstand-3xs);
  font-weight: var(--gcotk-schriftstaerke-normal);
}

@media (min-width: 782px) {
  /* Das Raster als Ganzes wirkt ab hier wie eine einzelne Karte der Seite:
     weiße Fläche, 24 Pixel Eckenradius, sehr weicher Schatten, keine
     sichtbare Rahmenlinie. Die einzelnen Zellen darin bleiben ohne eigene
     Fläche, siehe .gcotk-gitter__zelle weiter unten. */
  .gcotk-kalender .gcotk-gitter {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--gcotk-abstand-xs);
    padding: var(--gcotk-abstand-m);
    background-color: var(--gcotk-farbe-flaeche-erhoben);
    border-radius: var(--gcotk-radius-gross);
    box-shadow: var(--gcotk-schatten-erhoben);
  }

  /* Ohne eigene Box lassen display: contents Kopf und Körper der Tabelle
     sowie jede einzelne Zeile für das Raster verschwinden, nur so werden
     die Zellen direkt zu Elementen von .gcotk-gitter und tragen gemeinsame
     Spalten über alle Wochen hinweg. Die Tabellenrolle bleibt trotzdem
     erhalten, weil sie über role="rowgroup" und role="row" im Markup
     gesetzt ist und nicht über die Existenz einer eigenen Box. */
  .gcotk-kalender .gcotk-gitter__kopfzeilen,
  .gcotk-kalender .gcotk-gitter__wochen,
  .gcotk-kalender .gcotk-gitter__zeile,
  .gcotk-kalender .gcotk-gitter__kopfzeile {
    display: contents;
  }

  /* Wochentagskürzel im Stil der kleinen Rubriküberschriften der Seite:
     klein, fett, in Großbuchstaben, mit Laufweite, in Grau. */
  .gcotk-kalender .gcotk-gitter__kopf {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gcotk-abstand-xs) 0;
    font-size: var(--gcotk-schrift-groesse-rubrik);
    font-weight: var(--gcotk-schriftstaerke-rubrik);
    text-transform: uppercase;
    letter-spacing: var(--gcotk-schrift-laufweite-rubrik);
    color: var(--gcotk-farbe-text-schwach);
  }

  /* Das abbr Element im Wochentagskopf bringt vom Browser eine gepunktete
     Unterstreichung mit, die nach Fehler aussieht. Die Vorlage lässt sich
     für dieses Stylesheet nicht ändern und trägt dort kein eigenes
     Klassenattribut, deshalb ist dies die einzige bewusste Ausnahme von der
     Regel, keine nackten Elemente anzusprechen, und bleibt streng auf den
     Wochentagskopf beschränkt. */
  .gcotk-kalender .gcotk-gitter__kopf abbr {
    text-decoration: none;
  }

  /* min-width 0 hebt die automatische Mindestbreite auf, die ein Gitterelement
     sonst von seinem Inhalt zieht. Ohne diese Zeile bestimmt der längste
     Turniername in einer Zelle die Breite ihrer Spalte, die Spalten werden
     unterschiedlich breit und die Summe der sieben Spalten wächst über die
     Breite der Kartenfläche hinaus, weil 1fr dann nicht mehr rein
     proportional rechnet, sondern nach unten durch den Inhalt begrenzt
     bleibt. Mit min-width 0 sind alle sieben Spalten exakt gleich breit und
     bleiben innerhalb der Karte, lange Titel brechen stattdessen in der
     Zelle um, siehe overflow-wrap bei .gcotk-gitter__eintrag weiter unten. */
  .gcotk-kalender .gcotk-gitter__zelle {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 108px;
    margin-bottom: 0;
  }

  /* Normale Zellen bekommen keine eigene Fläche und keinen eigenen Rahmen,
     damit nur das Raster als Ganzes die Kartenoptik trägt und kein Gitter
     aus einzelnen Kästen entsteht. Heute und Fremdmonat bleiben davon
     ausgenommen, weil sie ihre eigene, stärker spezifische Fläche tragen. */
  .gcotk-kalender .gcotk-gitter__zelle:not(.gcotk-gitter__zelle--heute):not(.gcotk-gitter__zelle--fremd) {
    background-color: transparent;
    border: none;
  }

  .gcotk-kalender .gcotk-gitter__zelle--fremd {
    display: flex;
    background-color: var(--gcotk-farbe-fremd-flaeche);
    color: var(--gcotk-farbe-fremd-text);
    border: none;
  }

  .gcotk-kalender .gcotk-gitter__zelle--fremd .gcotk-gitter__tag {
    color: var(--gcotk-farbe-fremd-text);
  }

  /* Das Detailfeld richtet sich standardmäßig an der linken Kante seiner
     Zelle aus, siehe .gcotk-gitter__detail weiter oben. In den beiden
     rechten Spalten des siebenspaltigen Rasters liefe es dabei über die
     rechte Kante der Kalenderkarte hinaus, deshalb hängt es dort stattdessen
     an der rechten Kante seiner Zelle. Die Auswahl über nth-child ist hier
     zulässig, weil jede Wochenzeile immer aus genau sieben echten
     gcotk-gitter__zelle Geschwistern besteht, siehe die table Struktur der
     Vorlage. */
  .gcotk-kalender .gcotk-gitter__zelle:nth-child(6) .gcotk-gitter__detail,
  .gcotk-kalender .gcotk-gitter__zelle:nth-child(7) .gcotk-gitter__detail {
    left: auto;
    right: 0;
  }
}

/* ==========================================================================
   7. Ansichtsumschaltung. Raster und Liste stehen gleichzeitig im Markup,
      jeweils in einem eigenen .gcotk-ansicht Umschlag, aber es ist immer
      nur eine davon zu sehen. display: none blendet die jeweils andere
      auch für Screenreader aus, damit nichts doppelt vorgelesen wird.

      Das Wurzelelement trägt eine von drei Klassen, die sagt, wer über die
      Sichtbarkeit entscheidet:
      - .gcotk-kalender--auto: die Bildschirmbreite entscheidet, siehe
        Media Query unten. Das ist die Voreinstellung dieses Abschnitts,
        sie greift auch, falls die Wurzelklasse ausnahmsweise fehlen sollte.
      - .gcotk-kalender--gitter: das Raster ist ausdrücklich gewählt und
        bleibt auf jeder Breite sichtbar, auch schmal. Deshalb braucht es
        dort weiterhin die gestapelte Listenoptik aus Abschnitt 6.
      - .gcotk-kalender--liste: die Liste ist ausdrücklich gewählt und
        bleibt ebenso auf jeder Breite sichtbar.
      Eine pauschale, von der Wurzelklasse unabhängige Regel würde bei einer
      ausdrücklichen Wahl auf der falschen Breite einen leeren Kalender
      erzeugen, weil dann keine der beiden Ansichten mehr übrig bliebe.
   ========================================================================== */

.gcotk-kalender .gcotk-ansicht--gitter {
  display: none;
}

.gcotk-kalender .gcotk-ansicht--liste {
  display: block;
}

@media (min-width: 782px) {
  .gcotk-kalender--auto .gcotk-ansicht--gitter {
    display: block;
  }

  .gcotk-kalender--auto .gcotk-ansicht--liste {
    display: none;
  }
}

/* Ausdrücklich gewähltes Raster: immer sichtbar, unabhängig von der Breite.
   Steht bewusst nach der Voreinstellung oben, damit es sie auch auf
   schmalen Bildschirmen zuverlässig übersteuert. */
.gcotk-kalender--gitter .gcotk-ansicht--gitter {
  display: block;
}

.gcotk-kalender--gitter .gcotk-ansicht--liste {
  display: none;
}

/* Ausdrücklich gewählte Liste: immer sichtbar, unabhängig von der Breite. */
.gcotk-kalender--liste .gcotk-ansicht--liste {
  display: block;
}

.gcotk-kalender--liste .gcotk-ansicht--gitter {
  display: none;
}

/* ==========================================================================
   8. Bewegungsreduktion. Ändert nur Animationen und Übergänge, keine
      Layouts.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .gcotk-kalender {
    --gcotk-uebergang-dauer: 0ms;
  }

  .gcotk-kalender__nav-knopf--laedt .gcotk-kalender__nav-icon::before {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

/* ==========================================================================
   9. Druckansicht. Navigation und Filter sind im Ausdruck nutzlos, Inhalt
      soll nicht mitten im Termin umbrechen. In der Ansicht auto wird immer
      die Liste gedruckt, weil sie sich besser ausdrucken lässt als ein
      siebenspaltiges Raster. Ist Raster oder Liste ausdrücklich gewählt,
      bleibt es dabei: dann existiert ohnehin nur die eine Ansicht im
      Markup, siehe Abschnitt 7, und eine erzwungene Umschaltung liefe ins
      Leere.
   ========================================================================== */

@media print {
  .gcotk-kalender {
    background-color: transparent;
    border: none;
    padding: 0;
  }

  .gcotk-kalender__nav,
  .gcotk-kalender__filter,
  .gcotk-kalender .gcotk-laedt {
    display: none;
  }

  .gcotk-kalender--auto .gcotk-ansicht--gitter {
    display: none;
  }

  .gcotk-kalender--auto .gcotk-ansicht--liste {
    display: block;
  }

  .gcotk-kalender .gcotk-termin,
  .gcotk-kalender .gcotk-gitter__zelle {
    break-inside: avoid;
    box-shadow: none;
    border: var(--gcotk-rahmenbreite) solid #999999;
  }

  .gcotk-kalender .gcotk-gitter__zelle--fremd {
    display: none;
  }

  .gcotk-kalender .gcotk-plakette {
    border: var(--gcotk-rahmenbreite) solid #999999;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}