/* Zusatzstyles der Event-Seiten (02 · Veranstaltungen + Detailseite).
   Nur Design-System-Tokens (var(--color-…), var(--font-…)) — keine neuen Farben. */

.events-page {
  padding-top: 96px;
}

.events-page > section + section {
  margin-top: 96px;
}

.section-body {
  margin-top: 32px;
}

.section-body-sm {
  margin-top: 24px;
}

.meta-line {
  color: var(--color-muted-foreground);
  font-size: 14px;
  line-height: 20px;
}

/* --- 1 · Nächsten Event's ------------------------------------------------- */

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.event-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
}

.event-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-muted-foreground);
  font-size: 14px;
  line-height: 20px;
}

/* Das Coverbild oben in der Karte. Fläche, Rundung und der Rückfall auf den
   Schmetterling kommen aus .card-cover/.cover-leer (main.css, überall
   geladen) — hier steht nur der Abstand nach unten. */
.event-card-cover {
  margin-bottom: 4px;
}

.event-card-text {
  color: var(--color-muted-foreground);
}

.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 12px;
}

.event-card-from {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

/* --- 2 · Beratung --------------------------------------------------------- */

/* Der Beratungsblock steht allein, seit die Buchungskarte daneben entfallen
   ist. Er behält die Breite, die er als eine von zwei Spalten hatte (588px),
   statt über die ganze Seite zu laufen — genau wie der Beratungsblock der
   Startseite. minmax(0, 1fr) hält breite Inhalte in der Spalte, sonst
   sprengte der Terminknopf sie auf schmalen Geräten. */
.beratung-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 588px;
}

.beratung-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* --- 3 · Über mich -------------------------------------------------------- */

.uebermich-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.uebermich-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lead-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  color: var(--color-notice);
}

.quali-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.check-list li svg {
  flex: none;
  margin-top: 4px;
  color: var(--color-secondary);
}

.uebermich-closing {
  margin-top: 32px;
  text-align: center;
}

.closing-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
}

.closing-strong {
  margin-top: 4px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--color-notice);
}

/* --- 4 · Beratungsbereiche ------------------------------------------------ */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chip-static {
  cursor: default;
}

.bereiche-absatz {
  margin-top: 24px;
}

.bereiche-meta {
  margin-top: 24px;
}

/* --- Detailseite ---------------------------------------------------------- */

/* Die Seite ist im Aufbau der Produktseite gehalten und benutzt deren Klassen
   (.detail-bereich, .detail-cover, .detail-kaufbox, .detail-beschreibung)
   unverändert — catalog.css wird dafür in der Vorlage mitgeladen. Hier steht
   nur, was es dort nicht gibt: die Paketstufen als Zeilen in der Kaufbox.

   Vorher stand hier eine eigene Fassung derselben Regeln, samt einem Deckel
   von 360 px auf dem Kopfbild. Der Deckel war die Notlösung dafür, dass die
   Pakete unter einem bildschirmfüllenden Bild lagen; jetzt stehen sie
   daneben, und das Bild darf so groß sein wie auf der Produktseite. */

/* Die Beschreibung füllt den Platz unter dem Kopfbild, statt unter der ganzen
   Seite zu stehen. Vier Pakete machen die Kaufbox deutlich höher als das
   quadratische Bild — links blieb daher ein leeres Feld, und die Beschreibung
   lag so weit unten, dass man erst an ihm vorbeiscrollen musste.

   Umgesetzt über die Rasterplätze, nicht über die Reihenfolge im Markup: Dort
   steht die Beschreibung hinter der Kaufbox, damit auf schmalen Geräten, wo
   alles untereinander liegt, erst die Pakete kommen und dann der lange Text.
   Die Kaufbox überspannt beide Zeilen, sonst begänne die zweite erst unter
   ihrem unteren Rand — und die Beschreibung stünde wieder ganz unten. */
.detail-bereich > .detail-buehne {
  grid-column: 1;
  grid-row: 1;
}

.detail-bereich > .detail-kaufbox {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.detail-bereich > .detail-beschreibung {
  grid-column: 1;
  grid-row: 2;
  /* Die Spalte ist schmaler als die 816 px der Produktseite; der Deckel dort
     würde hier nie greifen und stünde nur im Weg. */
  max-width: none;
  margin-top: 32px;
}

.tier-liste {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

/* Eine Paketstufe. Die Trennlinie steht zwischen zwei Zeilen, nicht über der
   ersten — dort trennt schon der Abstand zum Termin. */
.tier-zeile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
}

.tier-zeile + .tier-zeile {
  border-top: 1px solid var(--color-border);
}

.tier-zeile:first-child {
  padding-top: 0;
}

.tier-zeile:last-child {
  padding-bottom: 0;
}

/* Name links, Preis rechts — auf einer Grundlinie, damit die Zeile ruhig
   steht. Auf schmalen Geräten bricht sie um, statt den Preis zu quetschen. */
.tier-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
}

/* Als <h2> steht der Name in der Gliederung unter dem Titel der
   Veranstaltung. Die Anzeigegröße kommt von hier: 36 px aus dem
   Grundstil wären vier Überschriften, die den Titel überschreien. */
.tier-name {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.tier-preis {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: none;
}

/* Der Name der Paketstufe führt zu ihrer eigenen Seite. Er soll als Ziel
   erkennbar sein, ohne die Zeile in ein Linkfeld zu verwandeln: Farbe erbt er
   von der Überschrift, die Unterstreichung kommt erst bei Aufmerksamkeit. */
.tier-link {
  color: inherit;
  text-decoration: none;
}

.tier-link:hover,
.tier-link:focus-visible {
  text-decoration: underline;
}

/* „Details ansehen" schließt die Merkmalsliste ab und steht über dem Knopf —
   die Reihenfolge der Zeile bleibt: was drin ist, wo mehr steht, was tun. */
.tier-mehr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-secondary);
  text-decoration: none;
}

.tier-mehr:hover,
.tier-mehr:focus-visible {
  text-decoration: underline;
}

.tier-mehr svg {
  flex: none;
}

/* Der Leistungsumfang steht hier in denselben Maßen wie auf der Produktseite
   (.detail-umfang in catalog.css); der eigene Abstand nach oben entfällt,
   weil die Zeile ihn schon setzt. */
.tier-zeile .detail-umfang {
  margin-top: 0;
}

/* --- Responsive ----------------------------------------------------------- */

/* Unterhalb von 1024 px klappt catalog.css den Zweispalter auf eine Spalte.
   Die festen Rasterplätze müssen dann weg — sonst bliebe die Beschreibung an
   Zeile zwei kleben und die Kaufbox spannte über eine Zeile, die es nicht mehr
   gibt. Ohne sie gilt wieder die Reihenfolge im Markup: Bild, Pakete, Text. */
@media (max-width: 1023.98px) {
  .detail-bereich > .detail-buehne,
  .detail-bereich > .detail-kaufbox,
  .detail-bereich > .detail-beschreibung {
    grid-column: auto;
    grid-row: auto;
  }

  .detail-bereich > .detail-beschreibung {
    margin-top: 0;
  }
}

@media (max-width: 899.98px) {
  .events-page {
    padding-top: 48px;
  }

  .events-page > section + section {
    margin-top: 64px;
  }

  .event-grid {
    grid-template-columns: 1fr;
  }

  .uebermich-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

}