/*
 * Schule des Aufbruchs — Content Module Styles
 * Pro Modul ein eigener Block, alle Werte aus dem Designsystem.
 */

/* ============================================================
   Modul-Abstände
   Standard: --spacer-xl (24 / 40 / 48 px) zwischen zwei aufeinander
   folgenden Modulen. Bestimmte Kombinationen liegen flush
   (margin-top: 0), abgeleitet aus den Figma-Spacer-Markierungen:
     • Intro grenzt oben/unten an alles an
     • Quote → HR / CTA Banner
     • Checklist → Checklist / Quote
     • CTA Banner als letztes Modul flusht zum Footer
   Das erste Modul auf der Seite bekommt Abstand zum Page-Title bzw.
   zur Home-Stage (außer es ist Intro).
   ============================================================ */

.module + .module {
  margin-top: var(--spacer-xl);
}

.page-modules > .module:first-child {
  margin-top: var(--spacer-xl);
}

.page-modules {
  padding-bottom: var(--spacer-xl);
}

/* Ausnahmen: KEIN Abstand zwischen diesen Kombinationen */

.module-intro + .module,
.module + .module-intro,
.page-modules > .module-intro:first-child {
  margin-top: 0;
}

.module-quote + .module-hr,
.module-quote + .module-cta {
  margin-top: 0;
}

.module-checklist + .module-checklist {
  margin-top: 0;
}

/* CTA Banner als letztes Modul: roter Hintergrund flusht zum
   roten Footer — kein Padding am Modul-Wrapper. */
.page-modules:has(> .module-cta:last-child) {
  padding-bottom: 0;
}

/* ============================================================
   Module: Checkliste
   Mobile column (Header über Liste), Tablet+ row (Header links, Liste rechts).
   ============================================================ */
.module-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-xl);
  background-color: var(--color-warm-white);
  border-bottom: 1px solid var(--color-warm-white);
  padding: var(--spacer-xl) var(--content-margin);
}

@media (min-width: 768px) {
  .module-checklist {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--grid-gap);
  }
}

.module-checklist__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-s);
  color: var(--text-body);
}

@media (min-width: 768px) {
  .module-checklist__header {
    flex: 1 1 0;
    min-width: 0;
    padding-inline-end: var(--spacer-2xl);
  }
}

.module-checklist__headline-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-xs);
  width: 100%;
}

.module-checklist__overline,
.module-checklist__title,
.module-checklist__text {
  margin: 0;
  width: 100%;
}

/* Overline-Variante: schwarz statt rot, mit 60 % Deckkraft */
.module-checklist__overline {
  color: var(--text-body);
  opacity: 0.6;
}

.module-checklist__text > * {
  margin: 0;
}

.module-checklist__text > * + * {
  margin-top: var(--spacer-xs);
}

/* Liste --------------------------------------------------- */
.module-checklist__list {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .module-checklist__list {
    flex: 1 1 0;
    min-width: 0;
  }
}

.module-checklist__item {
  display: flex;
  align-items: stretch;
  gap: var(--spacer-s);
  padding: var(--grid-gap);
  padding-inline-end: var(--spacer-s);
  border-radius: var(--border-radius-m);
  background-color: var(--color-light-grey-trans-50);
}

/* Lime-Box mit Häkchen — Breite fix 44 px, Höhe streckt sich über die
   ganze Item-Höhe (parent align-items: stretch), damit auch bei
   umgebrochenem Mehrzeilen-Text die grüne Fläche bündig bleibt. */
.module-checklist__check {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  background-color: var(--color-lime);
  color: var(--color-green);
  border-radius: var(--border-radius-m);
}

/* SVG-Größe fix, damit das Icon beim Stretch der Box nicht mit
   skaliert; es bleibt mittig zentriert. */
.module-checklist__check svg {
  display: block;
  width: 44px;
  height: 44px;
}

.module-checklist__item-text {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: var(--page-margin) 0;
  color: var(--text-body);
}

/* ============================================================
   Module: Team-Liste (Staff)
   Karten mit festem 3:4-Format: 164 / 226 / 309 px breit.
   ============================================================ */
.module-staff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xl);
  background-color: var(--color-warm-white);
  padding: var(--spacer-2xl) var(--content-margin);
}

.module-staff__title-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-m);
  max-width: 1039px;
  width: 100%;
  color: var(--text-body);
}

.module-staff__headline-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xs);
  width: 100%;
}

.module-staff__overline,
.module-staff__title,
.module-staff__text {
  margin: 0;
  width: 100%;
}

.module-staff__text > * {
  margin: 0;
}

.module-staff__text > * + * {
  margin-top: var(--spacer-s);
}

.module-staff__button {
  padding-top: var(--spacer-xs);
}

/* Karten-Grid: Mobile 2 Spalten, Tablet 3, Desktop 4 — Karten füllen
   die Spaltenbreite, Höhe folgt 3:4-Aspect-Ratio. */
.module-staff__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .module-staff__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .module-staff__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.module-staff__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: var(--spacer-2xs);
  border-radius: var(--border-radius-m);
  background-color: var(--color-light-grey);
  overflow: hidden;
}

.module-staff__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.module-staff__label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.module-staff__name,
.module-staff__role {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
  padding: var(--spacer-2xs) var(--spacer-xs) var(--spacer-xs);
  border-radius: var(--border-radius-s);
  background-color: var(--color-sand);
  color: var(--text-body);
  white-space: normal;
  text-align: start;
  overflow-wrap: anywhere;
}

/* Name-Pill sitzt leicht über der Role-Pill (gestapelter Effekt) */
.module-staff__name {
  margin-bottom: -6px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   Module: Trennlinie (HR)
   Höhe responsiv: 40 / 64 / 96 px
   ============================================================ */
.module-hr {
  width: 100%;
  height: 40px;
  overflow: hidden;
  background-image: url('../images/hr-pattern.svg');
  background-repeat: repeat-x;
  /* Pattern um grid-gap oben/unten verkleinert; durch center-Positionierung
     bleibt oben und unten je grid-gap der Hintergrundfarbe sichtbar. */
  background-size: auto calc(100% - 2 * var(--grid-gap));
  background-position: center;
}

@media (min-width: 768px) {
  .module-hr {
    height: 64px;
  }
}

@media (min-width: 1200px) {
  .module-hr {
    height: 96px;
  }
}

.module-hr--orange {
  background-color: var(--color-orange);
}

.module-hr--green {
  background-color: var(--color-green);
}

/* ============================================================
   Module: Zeitstrahl (Timeline)
   Mobile: Header über Timeline. Tablet+: Header links, Timeline rechts.
   ============================================================ */
.module-timeline {
  background-color: var(--color-warm-white);
  padding: var(--spacer-2xl) var(--content-margin);
}

.module-timeline__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xl);
  width: 100%;
}

@media (min-width: 768px) {
  .module-timeline__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--grid-gap);
  }
}

.module-timeline__title-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-m);
  max-width: 1039px;
  width: 100%;
  padding-inline-end: var(--spacer-2xl);
  color: var(--text-body);
}

@media (min-width: 768px) {
  .module-timeline__title-header {
    flex: 1 1 0;
    min-width: 0;
  }
}

.module-timeline__headline-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xs);
  width: 100%;
}

.module-timeline__overline,
.module-timeline__title,
.module-timeline__text {
  margin: 0;
}

.module-timeline__text > * {
  margin: 0;
}

.module-timeline__text > * + * {
  margin-top: var(--spacer-s);
}

.module-timeline__button {
  padding-top: var(--spacer-xs);
}

/* Timeline-Liste --------------------------------------------- */
.module-timeline__list {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .module-timeline__list {
    flex: 1 1 0;
    min-width: 0;
  }
}

.module-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacer-s);
  padding: var(--spacer-s);
  border-radius: var(--border-radius-m);
  overflow: hidden;
}

.module-timeline__item--done {
  background-color: var(--color-light-grey);
}

.module-timeline__item--current {
  background-color: var(--color-lime);
}

.module-timeline__item--planned {
  background-color: var(--color-light-grey-trans-30);
}

.module-timeline__entry-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 2px;
  width: 130px;
}

.module-timeline__year {
  margin: 0;
  white-space: nowrap;
}

.module-timeline__item--planned .module-timeline__year {
  color: var(--color-basalt);
}

.module-timeline__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacer-2xs);
  padding-bottom: 1px;
  border-radius: 4px;
  background-color: var(--color-warm-white);
  color: var(--text-body);
}

.module-timeline__entry-info {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  color: var(--text-body);
  overflow-wrap: anywhere;
}

.module-timeline__entry-title,
.module-timeline__entry-text {
  margin: 0;
  width: 100%;
}

/* ============================================================
   Module: Call-to-Action Banner
   Mobile/Tablet: 350 px min-height · Desktop: 424 px
   ============================================================ */
.module-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 350px;
  padding: var(--spacer-2xl) var(--page-margin);
  background-color: var(--color-red);
  overflow: hidden;
}

/* Dekorativer Hintergrund analog zur Home Stage: gleichmäßig
   verteilte Shapes mit Anfang/Ende bündig an den Innenkanten
   (Padding = --page-margin). */
.module-cta__bg {
  position: absolute;
  inset: 0;
  padding: var(--page-margin);
  pointer-events: none;
  overflow: hidden;
}

.module-cta__bg-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.module-cta__bg picture {
  display: contents;
}

.module-cta__bg-shape {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  left: calc(100% / var(--bg-shape-denom) * var(--i));
  transform: translateX(calc(-100% / var(--bg-shape-denom) * var(--i)));
}

@media (min-width: 1200px) {
  .module-cta {
    min-height: 424px;
  }
}

.module-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacer-xs);
  width: 100%;
  max-width: 830px;
  text-align: center;
  color: var(--text-body);
}

/* Ab Tablet: zusätzlicher Innen-Padding-X (entspricht --spacer-2xl 52/64 px) */
@media (min-width: 768px) {
  .module-cta__inner {
    padding-left: var(--spacer-2xl);
    padding-right: var(--spacer-2xl);
  }
}

.module-cta__title,
.module-cta__text {
  margin: 0;
  width: 100%;
}

.module-cta__title {
  /* Title XL ist responsive: 24 / 32 / 52 px — passt zur Figma-Vorlage */
  font-weight: 350;
}

.module-cta__text > * {
  margin: 0;
}

.module-cta__text > * + * {
  margin-top: var(--spacer-2xs);
}

.module-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: var(--spacer-s);
}

/* ============================================================
   Module: Bildergalerie (Swiper)
   ============================================================ */
.module-gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xl);
  background-color: var(--color-warm-white);
  padding: var(--spacer-2xl) var(--content-margin);
  overflow: hidden;
}

.module-gallery__title-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-m);
  max-width: 1039px;
  width: 100%;
  color: var(--text-body);
}

.module-gallery__headline-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xs);
  width: 100%;
}

.module-gallery__overline,
.module-gallery__title,
.module-gallery__text {
  margin: 0;
}

.module-gallery__text > * {
  margin: 0;
}

.module-gallery__text > * + * {
  margin-top: var(--spacer-s);
}

.module-gallery__button {
  padding-top: var(--spacer-xs);
}

/* Slider --------------------------------------------------- */
.module-gallery__slider {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-m);
  width: 100%;
}

.module-gallery__swiper {
  width: 100%;
  overflow: visible;
}

.module-gallery__track {
  list-style: none;
  margin: 0;
  padding: 0;
}

.module-gallery__slide {
  width: auto;
  height: 200px;
  border-radius: var(--border-radius-m);
  overflow: hidden;
  background-color: var(--color-light-grey);
}

.module-gallery__slide img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
}

@media (min-width: 768px) {
  .module-gallery__slide {
    height: 400px;
  }
}

@media (min-width: 1200px) {
  .module-gallery__slide {
    height: 500px;
  }
}

/* Nav --------------------------------------------------- */
.module-gallery__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacer-m);
  width: 100%;
}

@media (min-width: 768px) {
  .module-gallery__nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.module-gallery__pagination {
  /* Swiper setzt einzelne .module-gallery__dot Elemente hinein und fügt
     außerdem die Klasse "swiper-pagination" hinzu, die per Default
     "position: absolute" ist. Hier überschreiben wir das. */
  position: static;
  display: flex;
  align-items: center;
  justify-content: center; /* Mobile: Dots horizontal zentrieren */
  width: auto;
  bottom: auto;
  left: auto;
  transform: none;
}

@media (min-width: 768px) {
  .module-gallery__pagination {
    justify-content: flex-start; /* Tablet+: Dots am linken Rand */
  }
}

.module-gallery__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 2px;
  border-radius: var(--border-radius-s);
  background-color: var(--color-light-grey);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
  border: 0;
  padding: 0;
}

.module-gallery__dot--active {
  width: 24px;
  background-color: var(--color-earth);
}

.module-gallery__buttons {
  display: flex;
  align-items: center;
  gap: var(--grid-gap);
}

/* Disabled-State der Swiper-Navigation */
.module-gallery__prev[aria-disabled="true"],
.module-gallery__next[aria-disabled="true"],
.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================================
   Module: Schritte (Info Section mit nummerierten Karten)
   ============================================================ */
.module-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xl);
  background-color: var(--color-warm-white);
  padding: var(--spacer-2xl) var(--content-margin);
}

.module-steps__title-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-m);
  max-width: 1039px;
  width: 100%;
  color: var(--text-body);
}

.module-steps__headline-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xs);
  width: 100%;
}

.module-steps__overline,
.module-steps__title,
.module-steps__text {
  margin: 0;
}

.module-steps__text > * {
  margin: 0;
}

.module-steps__text > * + * {
  margin-top: var(--spacer-s);
}

.module-steps__button {
  padding-top: var(--spacer-xs);
}

/* Roter Tray hält die Karten — innen ein grid-gap Padding,
   außen mit zusätzlich aufgeschlagenem Radius, damit innen und
   außen visuell konzentrische Rundungen ergeben. */
.module-steps__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--grid-gap);
  width: 100%;
  margin: 0;
  padding: var(--grid-gap);
  list-style: none;
  background-color: var(--color-red);
  border-radius: calc(var(--border-radius-m) + var(--grid-gap));
}

/* Karte = zwei orange Blöcke: kleiner Header rechts oben,
   breiter Body darunter. Header rechtsbündig, Body full-width. */
.module-steps__card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  min-width: 0;
}

/* Header-Tab nur oben gerundet; negative margin-bottom überlappt
   den Body knapp, sodass beide orange Flächen visuell verschmelzen. */
.module-steps__card-header {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-orange);
  padding-inline-start: var(--spacer-xl);
  padding-inline-end: var(--spacer-s);
  border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
  margin-bottom: calc(-1 * var(--border-radius-m));
}

.module-steps__number {
  margin: 0;
  color: var(--color-warm-white);
  white-space: nowrap;
}

/* Body: full-width, alle Ecken gerundet AUSSER top-right
   (da sitzt der Header-Tab). flex: 1 lässt den Body in der Karte
   wachsen, sodass nebeneinander stehende Karten auf gleiche Höhe
   ziehen (parent .module-steps__list hat align-items: stretch). */
.module-steps__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-s);
  flex: 1;
  width: 100%;
  padding: var(--spacer-s);
  background-color: var(--color-orange);
  color: var(--text-body);
  /* Top-Start gerundet, Top-End flach (da sitzt der Header-Tab),
     beide unteren Ecken gerundet. Logische Eigenschaften spiegeln
     automatisch in RTL, wo der Header auf der linken Seite landet. */
  border-start-start-radius: var(--border-radius-m);
  border-start-end-radius: 0;
  border-end-end-radius: var(--border-radius-m);
  border-end-start-radius: var(--border-radius-m);
}

.module-steps__card-title,
.module-steps__card-text {
  margin: 0;
}

/* Tablet+: Karten in einer Reihe, gleichmäßig breit. Roter Tray
   (Padding + BG + Radius) entfällt; die Karten stehen direkt
   nebeneinander, der grid-gap-Abstand zwischen ihnen kommt aus dem
   Flex-gap. */
@media (min-width: 768px) {
  .module-steps__list {
    flex-direction: row;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }

  .module-steps__card {
    flex: 1 1 0;
  }
}

/* ============================================================
   Module: Bild
   ============================================================ */
.module-image {
  background-color: var(--color-warm-white);
  padding: var(--page-margin) var(--content-margin);
}

@media (min-width: 768px) {
  .module-image {
    padding: var(--page-margin);
  }
}

.module-image__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--grid-gap);
  margin: 0;
  width: 100%;
}

.module-image__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius-m);
  overflow: hidden;
  background-color: var(--color-light-grey);
}

.module-image__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.module-image__caption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--spacer-2xs) var(--spacer-xs);
  border-radius: var(--border-radius-m);
  background-color: var(--color-sand);
  color: var(--text-body);
}

/* ============================================================
   Module: Fakten-Kacheln
   ============================================================ */
.module-facts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-xl);
  background-color: var(--color-warm-white);
  padding: var(--spacer-2xl) var(--content-margin);
}

.module-facts__title-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-m);
  max-width: 1039px;
  width: 100%;
  color: var(--text-body);
}

.module-facts__headline-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xs);
  width: 100%;
}

.module-facts__overline,
.module-facts__title,
.module-facts__text {
  margin: 0;
}

.module-facts__text > * {
  margin: 0;
}

.module-facts__text > * + * {
  margin-top: var(--spacer-s);
}

.module-facts__button {
  padding-top: var(--spacer-xs);
}

.module-facts__rows {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  width: 100%;
}

.module-facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  width: 100%;
}

.module-facts__tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacer-s);
  width: 100%;
  min-height: 120px;
  padding: var(--spacer-s);
  border-radius: var(--border-radius-m);
  background-color: var(--color-light-grey);
  color: var(--text-body);
  text-decoration: none;
  overflow: hidden;
  overflow-wrap: anywhere;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a.module-facts__tile:hover,
a.module-facts__tile:focus-visible {
  background-color: var(--color-black);
  color: var(--color-warm-white);
}

@media (min-width: 768px) {
  .module-facts__tile {
    flex: 1 1 0;
    width: auto;
    min-width: 240px;
    min-height: 180px;
  }
}

@media (min-width: 1200px) {
  .module-facts__tile {
    min-height: 230px;
  }
}

.module-facts__tile--highlight {
  background-color: var(--color-lime);
}

.module-facts__tile-top {
  display: flex;
  align-items: flex-start;
  gap: var(--spacer-m);
  width: 100%;
  min-height: 28px;
}

.module-facts__tile-overline {
  flex: 1 1 0;
  margin: 0;
  /* erbt die Tile-color, damit die Overline beim Hover mitwandert */
  color: inherit;
}

.module-facts__tile-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 100px;
  background-color: var(--color-black);
  color: var(--color-warm-white);
}

/* Pfeil-Icon im RTL-Kontext horizontal spiegeln, damit er zur Leserichtung passt */
[dir="rtl"] .module-facts__tile-link svg {
  transform: scaleX(-1);
}

.module-facts__tile-text {
  margin: 0;
  width: 100%;
  text-align: start;
}

/* ============================================================
   Module: Kapitel
   ============================================================ */
.module-chapter {
  background-color: var(--color-warm-white);
  padding: var(--spacer-2xl) var(--content-margin);
}

.module-chapter__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-m);
  max-width: 1039px;
  color: var(--text-body);
}

.module-chapter__headline-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xs);
  width: 100%;
}

.module-chapter__overline,
.module-chapter__title,
.module-chapter__text {
  margin: 0;
}

.module-chapter__text > * {
  margin: 0;
}

.module-chapter__text > * + * {
  margin-top: var(--spacer-s);
}

.module-chapter__button {
  padding-top: var(--spacer-xs);
}

/* ============================================================
   Module: Intro
   ============================================================ */
.module-intro {
  background-color: var(--color-warm-white);
  padding: var(--spacer-2xl) var(--content-margin);
}

.module-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-m);
  color: var(--text-body);
}

.module-intro__title,
.module-intro__text {
  margin: 0;
}

.module-intro__text > * {
  margin: 0;
}

.module-intro__text > * + * {
  margin-top: var(--spacer-s);
}

.module-intro__text a {
  color: inherit;
  text-decoration: underline;
}

/* ============================================================
   Module: Zitat
   ============================================================ */
.module-quote {
  background-color: var(--color-earth);
  padding: var(--spacer-2xl) var(--content-margin);
}

.module-quote__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-l);
  max-width: 1039px;
}

.module-quote__text {
  margin: 0;
  color: var(--color-warm-white);
}

.module-quote__attribution {
  margin: 0;
  color: var(--text-body);
}

/* ============================================================
   Module: Info (Eckdaten)
   ============================================================ */
.module-info {
  background-color: var(--color-warm-white);
  padding: var(--spacer-2xl) var(--content-margin);
}

.module-info__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xl);
  width: 100%;
  color: var(--text-body);
}

.module-info__title-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-m);
  max-width: 1039px;
  width: 100%;
}

.module-info__headline-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xs);
  width: 100%;
}

.module-info__overline,
.module-info__title,
.module-info__text {
  margin: 0;
}

.module-info__text > * {
  margin: 0;
}

.module-info__text > * + * {
  margin-top: var(--spacer-s);
}

.module-info__button {
  padding-top: var(--spacer-xs);
}

.module-info__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--grid-gap);
  margin: 0;
  width: 100%;
}

.module-info__item {
  display: flex;
  gap: var(--grid-gap);
  align-items: flex-start;
  flex-wrap: wrap;
}

.module-info__label,
.module-info__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacer-xs) var(--spacer-s);
  border-radius: var(--border-radius-m);
  margin: 0;
}

.module-info__label {
  background-color: var(--color-light-grey);
}

.module-info__value {
  background-color: var(--color-sand);
}

/* Wenn der Wert ein Link ist: <dd> wird unsichtbar im Layout (display: contents),
   damit der <a> als Pill direkt im Flex-Container sitzt und das ganze Pill-Areal klickbar ist. */
.module-info__value-cell {
  display: contents;
}

.module-info__value--link {
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.module-info__value--link:hover,
.module-info__value--link:focus-visible {
  background-color: var(--color-black);
  color: var(--color-warm-white);
}

/* ============================================================
   Module: FAQ
   ============================================================ */
.module-faq {
  background-color: var(--color-warm-white);
  padding: var(--spacer-2xl) var(--content-margin);
}

.module-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xl);
  width: 100%;
  color: var(--text-body);
}

.module-faq__title-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-m);
  max-width: 1039px;
  width: 100%;
}

.module-faq__headline-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-2xs);
  width: 100%;
}

.module-faq__overline,
.module-faq__title {
  margin: 0;
}

.module-faq__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--grid-gap);
  width: 100%;
}

.module-faq__item {
  background-color: var(--color-light-grey);
  border-radius: var(--border-radius-m);
  padding-block: var(--spacer-xs);
  padding-inline-start: var(--spacer-s);
  padding-inline-end: var(--spacer-xs);
}

.module-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacer-l);
  cursor: pointer;
  list-style: none;
}

.module-faq__summary::-webkit-details-marker {
  display: none;
}

.module-faq__question {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.module-faq__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 44px;
  min-width: 44px;
  padding: 8px var(--button-padding-x);
  border-radius: var(--border-radius-m);
  background-color: var(--color-warm-white);
  color: var(--text-body);
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: var(--text-button);
  font-weight: 550;
  line-height: 1.1;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Mobile + Tablet: icon only (Plus / Minus) */
.module-faq__toggle::before {
  content: '+';
}

.module-faq__item[open] .module-faq__toggle::before {
  content: '−';
}

/* Desktop: full label, Text aus den data-Attributen (sprachfähig per Kirby t()) */
@media (min-width: 1200px) {
  .module-faq__toggle::before {
    content: attr(data-show);
  }

  .module-faq__item[open] .module-faq__toggle::before {
    content: attr(data-hide);
  }
}

.module-faq__summary:hover .module-faq__toggle,
.module-faq__summary:focus-visible .module-faq__toggle {
  background-color: var(--color-black);
  color: var(--color-warm-white);
}

.module-faq__answer {
  padding-block-start: var(--spacer-s);
  padding-block-end: var(--spacer-xs);
  padding-inline-end: var(--spacer-s);
  padding-inline-start: 0;
}

.module-faq__answer > * {
  margin: 0;
}

.module-faq__answer > * + * {
  margin-top: var(--spacer-s);
}

/* ============================================================
   Module: Richtext
   Native HTML aus dem writer-Feld; Typografie für h2–h5, p, lists.
   ============================================================ */
.module-richtext {
  background-color: var(--color-warm-white);
  padding: var(--spacer-2xl) var(--content-margin);
}

.module-richtext__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacer-m);
  width: 100%;
  max-width: 1039px;
  color: var(--text-body);
}

.module-richtext__inner > * {
  margin: 0;
  width: 100%;
}

.module-richtext__inner h2,
.module-richtext__inner h3,
.module-richtext__inner h4,
.module-richtext__inner h5 {
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.module-richtext__inner h2 {
  font-size: var(--text-title-xl);
}

.module-richtext__inner h3 {
  font-size: var(--text-title-l);
}

.module-richtext__inner h4 {
  font-size: var(--text-title-m);
}

.module-richtext__inner h5 {
  font-size: var(--text-title-s);
  font-weight: 500;
}

.module-richtext__inner p,
.module-richtext__inner ul,
.module-richtext__inner ol {
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: var(--text-body-m);
  font-weight: 350;
  line-height: 1.5;
}

.module-richtext__inner ul,
.module-richtext__inner ol {
  padding-inline-start: var(--spacer-m);
}

.module-richtext__inner a {
  color: inherit;
  text-decoration: underline;
}