/* ============================================================
   TALDIS BLOCKS — Section-Layouts der Inhaltsblöcke
   Gemeinsame Quelle für Website (Astro) UND CMS-Vorschau
   ============================================================ */

/* --- Hero: nur Text --- */
.hero-text-only { padding: 80px 0; }
.hero-text-only__body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-thin);
  font-size: var(--font-size-lg);
  line-height: 1.2;
  margin: 0 0 29px;
}
.hero-text-only__links { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.hero-text-only__image { grid-column: 1 / span 4; }        /* Bild in der linken Spalte */
.hero-text-only__text--right { grid-column: 5 / span 5; }   /* Text 5 Spalten, 1 Gutter (40px) Abstand zum Bild */
.hero-text-only__img { border-radius: 30px; }
@media (max-width: 1023px) {
  .hero-text-only__image, .hero-text-only__text--right { grid-column: span 12; }
}

/* --- Teaser-Boxen --- */
.section-teasers { padding: 80px 0; }

/* --- Bild + Text --- */
.section-bild-text { padding: 80px 0; }
.section-bild-text__image { padding-top: 82px; }
/* Ohne Überschrift: Bild oben bündig mit dem Text (Aufzählung) — kein 82px-Versatz */
.section-bild-text--no-heading .section-bild-text__image { padding-top: 0; }
.section-bild-text__image img { display: block; width: 100%; height: auto; border-radius: 30px; }
.section-bild-text__text { display: flex; flex-direction: column; gap: 32px; }
.section-bild-text__heading {
  font-family: var(--font-family); font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xl); line-height: 1.2; margin: 0;
}
.section-bild-text__body {
  font-family: var(--font-family); font-weight: var(--font-weight-thin);
  font-size: var(--font-size-base); line-height: 1.2; margin: 0;
}
.section-bild-text__links { display: flex; flex-direction: column; gap: 11px; }

/* --- Akkordeon --- */
.section-accordion { padding: 80px 0; }
.section-accordion__title {
  margin: 0 0 32px; font-family: var(--font-family); font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xl); line-height: 1.2;
}
.accordion__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }

/* --- Teaser gross (2 × 6 Spalten) --- nutzt .section-teasers + .teaser-big --- */

/* --- Hero: Bild + Text mit Huge-Button (Badge über Bild) --- */
.hero-split { padding: 80px 0; }
.hero-split__left {
  display: flex; flex-direction: column; gap: 20px; justify-content: center;
  padding-left:  calc((min(100vw, 1920px) - 600px) / 12 + 40px);
  padding-right: calc((min(100vw, 1920px) - 600px) / 24);
}
.hero-split__left p {
  margin: 0; font-family: var(--font-family); font-weight: var(--font-weight-regular);
  font-size: var(--font-size-lg); line-height: 1.2;
}
.hero-split__links { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.hero-split__right { position: relative; border-radius: 30px; overflow: hidden; }
.hero-split__right img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-split__badge {
  position: absolute; top: 36%; left: 25%;
  border-radius: 20px; padding: 20px 34px;
  font-family: var(--font-family); font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xxl); line-height: 1; color: var(--color-white); white-space: nowrap;
  text-decoration: none;
}
.hero-split__badge > span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.hero-split__badge--green { background: var(--color-green); }
.hero-split__badge--blue  { background: var(--color-blue); }
.hero-split__badge--beige { background: var(--color-beige); color: var(--color-black); }

/* --- Titel + Text + Links (6 Spalten, links oder mittig) --- */
.section-titel-text-links { padding: 80px 0; }
.section-titel-text-links__inner { display: flex; flex-direction: column; gap: 20px; }
.section-titel-text-links__title {
  margin: 0; font-family: var(--font-family); font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xl); line-height: 1.2;
}
.section-titel-text-links__text {
  margin: 0; font-family: var(--font-family); font-weight: var(--font-weight-thin);
  font-size: var(--font-size-base); line-height: 1.2;
}
.section-titel-text-links__links { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }

/* Variante mit Bild links (50 %): Titel oben rechts, Bild links auf Text-Höhe */
.section-titel-text-links__inner--media {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 40px; row-gap: 20px; align-items: start;
}
.section-titel-text-links__inner--media > .section-titel-text-links__title { grid-column: 2; grid-row: 1; }
.section-titel-text-links__media {
  grid-column: 1; grid-row: 2; align-self: stretch; position: relative;
  min-height: 0; border-radius: 30px; overflow: hidden;
}
.section-titel-text-links__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.section-titel-text-links__content { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 767px) {
  .section-titel-text-links__inner--media { grid-template-columns: 1fr; }
  .section-titel-text-links__inner--media > .section-titel-text-links__title,
  .section-titel-text-links__media,
  .section-titel-text-links__content { grid-column: 1; grid-row: auto; }
  .section-titel-text-links__media { height: 240px; }
}

/* --- Rich-Text (Fett + Listen) — Listen-Abstand & Punkte wie im Akkordeon --- */
.rich-text strong, .rich-text b { font-weight: var(--font-weight-semibold); }
.rich-text p, .rich-text div { margin: 0; }
.rich-text ul, .rich-text ol {
  margin-top: 16px; padding: 10px; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.rich-text li { display: flex; gap: 12px; align-items: flex-start; }
.rich-text li::before {
  content: ''; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-black); margin-top: 7px; margin-left: -2px;
}
/* Aufzählung/Absatz zuoberst: kein Abstand nach oben (Punkte bündig mit dem Bild) */
.rich-text > :first-child { margin-top: 0; }
.rich-text > ul:first-child, .rich-text > ol:first-child { padding-top: 0; }

/* --- Hero-Slider ------------------------------------------------ */
.hero-slider { padding: 40px 0 80px; }
.hero-slider__nav { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.hero-slider__tab {
  position: relative; overflow: hidden;
  font-family: var(--font-family); font-weight: var(--font-weight-regular); font-size: var(--font-size-base);
  padding: 16px 27px; border: 1px solid var(--color-black); border-radius: 20px;
  background: var(--color-white); color: var(--color-black); cursor: pointer; white-space: nowrap;
  line-height: 1;
}
.hero-slider__tab > span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }

/* Website: der aktive Tab trägt einen schwarzen Countdown-Balken (rechts verankert).
   Er startet voll (--tab-p: 1); slider.js reduziert ihn über die Wechselzeit auf 0 —
   der schwarz-auf-weiss-Zustand kommt dabei von links hervor. Die Schrift wechselt
   per Differenz-Blend von selbst: weiss über dem Balken, schwarz über weiss. */
.hero-slider:not(.hero-slider--editor) .hero-slider__tab::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 0;
  background: var(--color-black);
}
.hero-slider:not(.hero-slider--editor) .hero-slider__tab.is-active::before {
  width: calc(var(--tab-p, 1) * 100%);
}
.hero-slider:not(.hero-slider--editor) .hero-slider__tab > span {
  position: relative; color: var(--color-white); mix-blend-mode: difference;
}
/* Editor: aktiver Tab statisch schwarz (beim Bearbeiten läuft kein Countdown) */
.hero-slider--editor .hero-slider__tab.is-active { background: var(--color-black); color: var(--color-white); }

.hero-slider__stage { position: relative; height: var(--slider-h, 640px); border-radius: 20px; overflow: hidden; }
/* Slides: der Inhalt wird von rechts nach links geschoben.
   Neuer Slide kommt von rechts (100%), alter schiebt nach links raus (is-leaving). */
.hero-slider__slide { position: absolute; inset: 0; transform: translateX(100%); visibility: hidden; }
.hero-slider__slide.is-active  { transform: translateX(0);     visibility: visible; transition: transform .65s ease; }
.hero-slider__slide.is-leaving { transform: translateX(-100%); visibility: visible; transition: transform .65s ease; }
@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide.is-active, .hero-slider__slide.is-leaving { transition: none; }
}
.hero-slider__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slider__card {
  position: absolute; left: 40px; top: 50%; transform: translateY(-50%);
  width: 540px; max-width: calc(100% - 80px);
  background: var(--color-black); color: var(--color-white); border-radius: 30px; padding: 40px;
  display: flex; flex-direction: column; gap: 23px;
}
.hero-slider__title {
  margin: 0; font-family: var(--font-family); font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-white);
}
.hero-slider__text {
  font-family: var(--font-family); font-weight: var(--font-weight-thin);
  font-size: var(--font-size-base); line-height: 1.2; color: var(--color-white);
}

/* Randabfallend: nur das Bild läuft über die ganze Browserbreite; Stage bleibt
   auf Container-Breite, damit die Karte exakt am Inhaltsrand sitzt (nur Frontend). */
.hero-slider--fullbleed:not(.hero-slider--editor) { overflow-x: clip; }  /* 100vw-Überstand (Scrollbar) kappen */
.hero-slider--fullbleed:not(.hero-slider--editor) .hero-slider__stage {
  border-radius: 0; overflow: visible;
}
.hero-slider--fullbleed:not(.hero-slider--editor) .hero-slider__img {
  width: 100vw; max-width: none; margin-left: calc(50% - 50vw);
}
/* Karte linksbündig unter die Buttons (1. Spalte / Inhaltsrand) */
.hero-slider--fullbleed:not(.hero-slider--editor) .hero-slider__card { left: 0; }
/* Editor: nur der aktive Slide sichtbar (wie Frontend), Tabs wechseln ihn */
.hero-slider--editor.hero-slider--fullbleed .hero-slider__stage { border-radius: 0; }  /* Hinweis auf randabfallend */
/* Inhaltskarte im Backend oben anschlagen (40px von oben) statt vertikal zentriert */
.hero-slider--editor .hero-slider__card { top: 40px; transform: none; }

@media (max-width: 767px) {
  .hero-slider__card { position: static; transform: none; width: 100%; max-width: 100%; border-radius: 0 0 20px 20px; }
  .hero-slider__stage { height: auto; }
  .hero-slider__slide { position: relative; transform: none; visibility: visible; }
  .hero-slider__slide:not(.is-active) { display: none; }
  .hero-slider__img { height: 320px; }
}

/* --- Seitensprunganker (unsichtbares Sprungziel; Abstand zum fixen Header) --- */
.section-anchor { display: block; height: 0; scroll-margin-top: 200px; }

/* --- Hero Box (grosses Bild rechts, schwarze Textkarte links darüber) --- */
.hero-box { padding: 40px 0 80px; }
.hero-box__stage { position: relative; }
.hero-box__image { margin-left: 34%; border-radius: 20px; overflow: hidden; min-height: 600px; background: #f0f0f0; }
.hero-box__image img { width: 100%; height: 600px; object-fit: cover; display: block; }
.hero-box__card {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  width: 48%; max-width: 830px;
  background: var(--color-black); color: var(--color-white);
  border-radius: 30px; padding: 40px;
  display: flex; flex-direction: column; gap: 23px;
}
.hero-box__title {
  margin: 0; font-family: var(--font-family); font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xl); line-height: 1.1; color: var(--color-white);
}
.hero-box__text {
  font-family: var(--font-family); font-weight: var(--font-weight-thin);
  font-size: var(--font-size-base); line-height: 1.2; color: var(--color-white);
}
@media (max-width: 900px) {
  .hero-box__image { margin-left: 0; min-height: 0; }
  .hero-box__image img { height: 340px; }
  .hero-box__card { position: static; transform: none; width: 100%; max-width: 100%; margin-top: -48px; }
}

/* ============================================================
   Responsive: Block-Layouts
   ≤1023px: Spalten stapeln (layout.css) — hier die Feinheiten.
   ============================================================ */
@media (max-width: 1023px) {
  /* Sektions-Abstände verdichten */
  .hero-text-only, .section-teasers, .section-bild-text, .section-accordion,
  .section-titel-text-links, .hero-split { padding: 56px 0; }
  .hero-slider { padding: 32px 0 56px; }
  .hero-box { padding: 32px 0 56px; }

  /* Bild + Text: gestapelt gibt es keinen Überschriften-Versatz mehr */
  .section-bild-text__image { padding-top: 0; }

  /* Hero-Split: Textspalte verliert die Spalten-Formel, Bild kommt zuerst */
  .hero-split__left { padding-left: 0; padding-right: 0; gap: 16px; }
  .hero-split__right { order: -1; }
  .hero-split__badge { border-radius: 14px; padding: 14px 22px; }

  /* Hero-Box: Karte unters Bild statt darüber (vorher erst ab 900px) */
  .hero-box__image { margin-left: 0; min-height: 0; }
  .hero-box__image img { height: 380px; }
  .hero-box__card { position: static; transform: none; width: 100%; max-width: 100%; margin-top: -48px; padding: 28px; }

  /* Slider: Tabs kompakter */
  .hero-slider__tab { font-size: 18px; padding: 12px 18px; border-radius: 16px; }
  .hero-slider__card { width: 460px; padding: 28px; gap: 16px; }
}

@media (max-width: 767px) {
  .hero-text-only, .section-teasers, .section-bild-text, .section-accordion,
  .section-titel-text-links, .hero-split { padding: 40px 0; }
  .hero-slider, .hero-box { padding: 24px 0 40px; }

  /* Huge-Button: linksbündig und Schrift folgt dem Viewport, damit der Text im Bild bleibt */
  .hero-split__badge { border-radius: 10px; padding: 10px 16px; left: 16px; max-width: calc(100% - 32px); font-size: min(var(--font-size-xxl), 8.5vw); }
  .hero-box__image img { height: 260px; }
  .hero-box__card { margin-top: -32px; padding: 22px; gap: 14px; }
  .hero-slider__tab { font-size: 16px; padding: 10px 14px; border-radius: 14px; }
  .hero-slider__card { padding: 22px; gap: 14px; }
  .section-titel-text-links__media { height: 200px; }
}