/* Zusatzstyles der App „pages" (Startseite, Deine Beratung, Impressum, Fehlerseiten).
   Nur Design-Tokens (var(--…)) — keine neuen Farben, keine neuen Stilmittel.
   Komponentenklassen (.card, .btn, .chip, .notice-banner …) kommen aus core/main.css. */

/* --- Gemeinsames Seitenraster -------------------------------------------- */

.page-main {
  padding-bottom: 48px;
}
.section-block {
  margin-top: 96px;
}
.section-row {
  margin-top: 32px;
}
.grid-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.grid-products-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 21px;
}
.grid-events {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Der Beratungs-Hinweis weiter unten nutzt weiterhin core/notice_banner —
   lange Wörter dort umbrechen lassen statt den Kasten sprengen. */
.notice-banner-line {
  overflow-wrap: anywhere;
}

/* --- Hero ------------------------------------------------------------------ */

.hero {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 56px;
  align-items: center;
}
.hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.hero h1 {
  margin-top: 18px;
  text-wrap: balance;
}
.hero-lede {
  margin-top: 18px;
  max-width: 46ch;
  color: var(--color-muted-foreground);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 26px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-trust svg {
  flex: none;
  color: var(--color-accent);
}

/* --- Kanäle und Empfehlungen im Hero -------------------------------------- */

.hero-kanaele {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
}
.hero-kanaele-label {
  margin-right: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}
.hero-kanal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-card);
  color: var(--color-foreground);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.hero-kanal svg {
  flex: none;
  color: var(--color-accent);
}
@media (hover: hover) {
  .hero-kanal:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

.hero-media {
  position: relative;
}
.hero-portrait {
  aspect-ratio: 4 / 4.4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-inverse);
  box-shadow: var(--shadow-ruhe);
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

/* Karte der nächsten Veranstaltung — ragt links aus dem Portrait heraus. */
.hero-event {
  position: absolute;
  left: -72px;
  bottom: -20px;
  width: min(272px, 80%);
  padding: 16px 18px;
  box-shadow: var(--shadow-hover);
}
.hero-event-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.hero-event-datum {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-muted-foreground);
  font-variant-numeric: tabular-nums;
}
.hero-event-datum svg {
  flex: none;
}
.hero-event-titel {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}
.hero-event-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-bottom: 1px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-foreground);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-secondary);
}
@media (hover: hover) {
  .hero-event-link:hover {
    border-bottom-color: var(--color-accent);
  }
}

/* --- Themen-Einstiege (Chips in die Produktsuche) -------------------------- */

.hero-themen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
}
.hero-themen-label {
  margin-right: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}
@media (hover: hover) {
  .hero-themen .chip:hover {
    border-color: var(--color-accent);
  }
}

/* --- Veranstaltungs-Karten -------------------------------------------------- */

.event-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}
/* Das Cover steht oben in der Karte; den Abstand darunter macht schon der
   gap der Karte, deshalb hier nur die Feinkorrektur. */
.event-card-cover {
  margin-bottom: 4px;
}
.event-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}
.event-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
}
.event-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* --- Beratungs-Sektion (Startseite) ---------------------------------------- */

/* Die Buchungskarte steht allein — Breite wie zuvor, als sie noch eine von
   zwei Spalten war, statt über die ganze Seite zu laufen. */
.home-beratung {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 588px;
}

.home-beratung .booking-banner,
.beratung-aside .booking-banner {
  text-align: center;
  color: var(--color-notice);
}

/* --- Über-mich --------------------------------------------------------------- */

.about-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}
.about-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  color: var(--color-notice);
}
.about-text h3 {
  margin-top: 24px;
}
.about-text p + p,
.about-text h3 + p {
  margin-top: 16px;
}
.about-muted {
  color: var(--color-muted-foreground);
}
.about-strong {
  font-weight: 700;
}
.about-card {
  padding: 32px;
}
.about-card-intro {
  color: var(--color-muted-foreground);
  margin-bottom: 16px;
}
.check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.check-list svg {
  flex: none;
  margin-top: 4px;
  color: var(--color-accent);
}
.about-closing {
  margin-top: 64px;
  text-align: center;
}
.about-closing-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
}
.about-closing-strong {
  margin-top: 4px;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-notice);
}

/* --- Beratungsbereiche -------------------------------------------------------- */

.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.chip-static {
  cursor: default;
}
.bereiche-text {
  margin-top: 24px;
}
.bereiche-text p + p {
  margin-top: 16px;
}
.bereiche-meta {
  margin-top: 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-accent);
}
.bereiche-meta-muted {
  margin-top: 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}

/* --- Deine Beratung ------------------------------------------------------------ */

/* Aktiver Nav-Zustand: der Header-CTA „DEINE BERATUNG" auf der eigenen Seite
   (Figma 08: Fläche --accent). Marker-Klasse .page-beratung liegt im Seiteninhalt. */
body:has(.page-beratung) .header-cta,
body:has(.page-beratung) .mobile-menu-cta {
  background: var(--color-accent);
}

.beratung-h1 {
  margin-top: 96px;
  font-size: 44px;
  line-height: 54px;
  max-width: 1200px;
}
.beratung-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 48px;
  align-items: start;
  margin-top: 76px;
}
.beratung-copy > h2 {
  font-size: 32px;
  line-height: 40px;
}
.beratung-copy > p {
  margin-top: 16px;
}
.beratung-aside {
  position: sticky;
  top: 96px;
}
.booking-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.booking-price-meta {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-muted-foreground);
}

.callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-muted);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 24px;
}
.callout-icon {
  flex: none;
  color: var(--color-notice);
  margin-top: 3px;
}
.callout-title {
  font-weight: 500;
  color: var(--color-notice);
}
.beratung-copy .notice-banner {
  margin-top: 24px;
}
.steps-intro {
  margin-top: 24px;
}
.steps {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.step-num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xl);
  background: var(--color-secondary);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}
.signoff {
  margin-top: 32px;
}
.signoff-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
}
.signoff-tail {
  margin-top: 12px;
}

.exp-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 48px;
  margin-top: 28px;
}

/* --- Impressum -------------------------------------------------------------------- */

.page-head {
  margin-top: 96px;
}
.page-head-meta {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
}
.impressum-grid {
  display: grid;
  grid-template-columns: 288px minmax(0, 816px);
  justify-content: space-between;
  gap: 48px;
  margin-top: 48px;
}
.impressum-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.toc-link {
  display: block;
  padding: 5px 0 5px 14px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-muted-foreground);
  text-decoration: none;
}
.toc-link:hover,
.toc-link:focus-visible {
  color: var(--color-foreground);
}
.toc-link-active {
  color: var(--color-foreground);
  border-left-color: var(--color-secondary);
}
.legal-section {
  padding-bottom: 48px;
  border-bottom: 1px solid var(--color-border);
}
.legal-section + .legal-section {
  margin-top: 48px;
}
.legal-section h3 {
  margin-bottom: 16px;
}
.legal-section p + p {
  margin-top: 16px;
}
.impressum-text p {
  overflow-wrap: anywhere;
}
.legal-subheading {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin-top: 24px;
  margin-bottom: 12px;
}
.legal-section > .legal-subheading:first-of-type {
  margin-top: 0;
}
.legal-list {
  margin: 16px 0 16px 20px;
  padding: 0;
  list-style: disc;
}
.legal-list:last-child {
  margin-bottom: 0;
}
.legal-list li {
  overflow-wrap: anywhere;
}
.legal-list li + li {
  margin-top: 8px;
}

/* --- Fehlerseiten -------------------------------------------------------------------- */

.error-page {
  margin-inline: auto;
}
.error-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* --- Responsiv ------------------------------------------------------------------------ */

@media (max-width: 1023.98px) {
  .grid-products-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .hero {
    gap: 40px;
  }
  /* Schmaleres Portrait: die Karte rückt mit, sonst deckt sie das Gesicht ab. */
  .hero-event {
    left: -44px;
    width: min(248px, 72%);
  }
  .beratung-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
  }
}

@media (max-width: 899.98px) {
  .section-block {
    margin-top: 64px;
  }
  .grid-products,
  .grid-products-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-events {
    grid-template-columns: minmax(0, 1fr);
  }
  .about-columns,
  .beratung-grid,
  .exp-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 40px;
  }
  .hero-media {
    max-width: 420px;
  }
  /* Einspaltig hätte die überlappende Karte den Container verlassen. */
  .hero-event {
    position: static;
    width: auto;
    margin-top: 16px;
  }
  .hero-kanaele {
    margin-top: 22px;
  }
  /* Auf schmalen Geräten steht die Anrede allein: sonst beginnt die erste
     Kachel weit rechts und die Zeile bricht unruhig. */
  .hero-kanaele-label {
    flex-basis: 100%;
    margin-right: 0;
  }
  .hero-themen {
    margin-top: 32px;
  }
  .beratung-aside {
    position: static;
  }
  .beratung-h1,
  .page-head {
    margin-top: 64px;
  }
  .impressum-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .impressum-toc {
    position: static;
    max-height: none;
  }
}

@media (max-width: 639.98px) {
  .grid-products,
  .grid-products-5 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Schmale Viewports: Abschnittsköpfe umbrechen lassen, lange Wörter lösen,
     Chips mehrzeilig — sonst erzwingt deren Min-Breite horizontales Scrollen. */
  .page-main .section-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .page-main h1,
  .page-main h2 {
    overflow-wrap: anywhere;
  }
  .chip-cloud .chip {
    height: auto;
    min-height: 40px;
    padding-block: 8px;
    white-space: normal;
  }
  .beratung-h1 {
    font-size: 34px;
    line-height: 42px;
  }
  /* Schmale Viewports: beide Handlungsaufforderungen gleich breit
     untereinander — unterschiedlich lange Pillen wirken sonst versetzt. */
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas .btn {
    width: 100%;
  }
}