/* ==========================================================================
   Regionaler Veranstaltungskalender (ThüCAT)

   Die Bausteine bringen ihr eigenes Aussehen mit und stecken im Shadow DOM -
   von aussen ist daran nichts zu ändern. Diese Datei ordnet deshalb nur die
   Flächen an, in denen sie stehen, und gestaltet Platzhalter und Wegweiser
   im Stil der übrigen Seite.
   ========================================================================== */

.thuecat-einleitung {
  margin-bottom: 1.5rem;
}

/* Wegweiser zum zweiten Kalender
   -------------------------------------------------------------------------- */
.thuecat-wegweiser {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
}
.thuecat-wegweiser i {
  flex: 0 0 auto;
  margin-top: .15rem;
  color: var(--color-primary-dark);
  font-size: 1.35rem;
}
.thuecat-wegweiser p {
  margin: 0;
  /* Fliesstext ist auf der Seite generell auf 65 Zeichen begrenzt - das ist
     für Artikel richtig und hier falsch: Der Hinweis besteht aus zwei Sätzen
     und stand dadurch in drei kurzen Zeilen, während rechts daneben die halbe
     Box leer blieb. */
  max-width: none;
}

/* Platzhalter vor der Einwilligung
   --------------------------------------------------------------------------
   Bewusst so gross wie der spätere Inhalt: Springt die Seite beim Zustimmen
   um mehrere Bildschirmhöhen, weiss niemand mehr, wo er war. */
.thuecat-platzhalter {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.thuecat-platzhalter > i {
  display: block;
  margin-bottom: .75rem;
  color: var(--color-primary);
  font-size: 2.75rem;
}
.thuecat-platzhalter h2 {
  margin: 0 0 .75rem;
  font-size: 1.35rem;
}
.thuecat-platzhalter p {
  margin: 0 auto .9rem;
  max-width: 34rem;
}
.thuecat-platzhalter code {
  padding: .05em .35em;
  background: rgba(0, 0, 0, .05);
  border-radius: 4px;
  font-size: .95em;
}
.thuecat-platzhalter-aktion { margin: 1.25rem 0 1rem; }
.thuecat-platzhalter-klein {
  font-size: .875rem;
  color: var(--color-text-muted);
}

/* Anordnung der Bausteine
   --------------------------------------------------------------------------
   Suche und Filter stehen links und bleiben beim Blättern in der Liste
   sichtbar; Ergebnisse, Kalenderblatt, Karte und Detailansicht laufen rechts
   untereinander. Unter 900 Pixeln rutscht die Suche über die Liste - eine
   schmale Spalte neben einer schmalen Spalte ist auf dem Handy unlesbar. */
.thuecat-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  /* Eine Spalte: Hier gilt die Reihenfolge im Quelltext, Suche also oben.
     Erst suchen, dann Ergebnisse - untereinander wäre es andersherum
     unverständlich. */
  .thuecat-raster { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (min-width: 901px) {
  /*
   * Suche und Filter stehen rechts, die Veranstaltungen links.
   *
   * Im Quelltext bleibt die Suche vorn: Wer mit Tastatur oder Vorleseprogramm
   * arbeitet, kommt so zuerst an die Suche und danach an die Treffer - die
   * Reihenfolge, in der man auch denkt. Nur die Anzeige dreht sich.
   */
  .thuecat-spalte-suche { order: 2; }
  .thuecat-spalte-inhalt { order: 1; }

  .thuecat-spalte-suche {
    position: sticky;
    top: 1.5rem;
  }
}
.thuecat-spalte-suche > tourism-components { display: block; margin-bottom: 1rem; }
.thuecat-spalte-inhalt > tourism-components { display: block; margin-bottom: 2rem; }

.thuecat-abschnitt-titel {
  margin: 0 0 .75rem;
  font-size: 1.15rem;
}
.thuecat-spalte-inhalt .thuecat-abschnitt-titel:not(:first-child) {
  margin-top: 2rem;
}

/* Solange die Bausteine laden, halten sie keine Höhe - die Seite würde beim
   Nachladen zweimal springen. */
tourism-components:not(:defined) {
  display: block;
  min-height: 8rem;
}

@media print {
  /* Auf Papier bleibt vom eingebetteten Kalender nichts Brauchbares übrig. */
  .thuecat-raster,
  .thuecat-platzhalter { display: none; }
}

/* ==========================================================================
   Umschalter zwischen Liste, Kalender und Karte
   Vorher standen alle drei Ansichten untereinander auf einer sehr langen
   Seite. Die Liste ist voreingestellt, weil sie die Frage „Was ist los?"
   am schnellsten beantwortet.
   ========================================================================== */
.thuecat-ansichtswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
  padding: 5px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
}
.thuecat-ansichtswahl button {
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.thuecat-ansichtswahl button:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.thuecat-ansichtswahl button[aria-selected="true"] {
  background: var(--color-primary);
  color: #fff;
}
.thuecat-ansichtswahl button:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .thuecat-ansichtswahl {
    border-radius: var(--radius-lg, 14px);
  }
  .thuecat-ansichtswahl button {
    flex: 1 1 auto;
    padding: 10px 12px;
    border-radius: var(--radius-lg, 14px);
  }
}