/* ==========================================================================
   Startseite – Content Blocks template-htm/home-*
   (Bühne/Bildbanner, Hautbild-Wegweiser, Text mit Vorteilen)

   Baut auf treatment.css auf (.tb, .tb__inner, .tb__h1 … und Variablen --tb-*),
   Theme-Variablen aus SCSS/_self.scss (--mc-*, --sc-*, --wt).
   ========================================================================== */

/* ---------------------------------------------------------------- Bühne & Bildbanner */
.tb-stage { overflow: hidden; isolation: isolate; background: var(--mc-d); }
.tb-stage--plain { background: radial-gradient(120% 90% at 85% 15%, var(--mc-l) 0%, var(--mc-d) 62%); }
.tb-stage__media { position: absolute; inset: 0; z-index: 0; }
/* Ausschnitt: oben nie beschnitten (Köpfe bleiben ganz), Motiv rechts – auf schmalen Bildschirmen
   wird links mehr weggenommen als rechts; der Zoom beim Laden wächst ebenfalls von oben */
.tb-stage__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 80% 0; transform-origin: 80% 0; }
.tb-stage__media::after { content: ""; position: absolute; inset: 0; }
.tb-stage__content { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1.35rem; }
.tb-stage__actions { margin-top: .5rem; }
.tb .tb-stage__link {
  display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .15rem;
  border-bottom: 1px solid rgba(237, 212, 144, .5); color: var(--sc-l); font-weight: 600; text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.tb .tb-stage__link:hover, .tb .tb-stage__link:focus-visible { color: var(--tb-gold); border-color: var(--tb-gold); }
.tb-stage__link .tb-icon { flex: none; width: 1.1em; height: 1.1em; }

/* Bühne: Foto über die ganze Breite, Text links auf dunklem Verlauf */
.tb-stage--stage { display: flex; align-items: center; min-height: clamp(36rem, calc(100svh - 4rem), 58rem); }
.tb-stage--stage .tb-stage__media::after {
  background:
    linear-gradient(90deg, rgba(40, 32, 26, .96) 0%, rgba(40, 32, 26, .88) 30%, rgba(40, 32, 26, .42) 60%, rgba(40, 32, 26, .06) 88%),
    linear-gradient(0deg, rgba(40, 32, 26, .85) 0%, rgba(40, 32, 26, 0) 30%);
}
.tb-stage--stage .tb-stage__inner { width: 100%; padding-top: 6rem; padding-bottom: 7rem; }
.tb-stage--stage .tb-stage__content { max-width: 41rem; }
.tb .tb-stage__title { font-size: clamp(2.9rem, 6vw, 5.4rem) !important; line-height: 1.02; text-wrap: balance; }
/* Bühne mit Text rechts (Feld „Text steht“), z. B. wenn die Person links im Foto sitzt:
   Textblock rechts (Zeilen bleiben linksbündig), Verlauf von rechts – im Textbereich etwas dichter,
   damit Schrift im Hintergrund (z. B. ein Banner) nicht durchscheint –, Bildausschnitt links */
.tb-stage--right .tb-stage__content { margin-left: auto; }
.tb-stage--right .tb-stage__media img { object-position: 20% 0; transform-origin: 20% 0; }
.tb-stage--right .tb-stage__media::after {
  background:
    linear-gradient(270deg, rgba(40, 32, 26, .96) 0%, rgba(40, 32, 26, .9) 30%, rgba(40, 32, 26, .74) 50%, rgba(40, 32, 26, .32) 65%, rgba(40, 32, 26, .05) 88%),
    linear-gradient(0deg, rgba(40, 32, 26, .85) 0%, rgba(40, 32, 26, 0) 30%);
}
.tb-stage--stage .tb-stage__lead { max-width: 30ch; font-size: clamp(1.45rem, 2.5vw, 1.95rem); color: var(--sc-l); }
.tb-stage__text { max-width: 52ch; }
.tb-stage__facts { width: 100%; margin-top: 1.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(241, 232, 229, .18); }
.tb .tb-stage__facts ul { display: flex; flex-wrap: wrap; gap: .4rem 2.25rem; }
.tb .tb-stage__facts li { padding-bottom: 0; font-size: .98rem; font-weight: 400; }

/* Pfeil nach unten */
.tb .tb-stage__next {
  position: absolute; z-index: 2; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(241, 232, 229, .35); border-radius: 50%; color: var(--sc-l);
  transition: border-color .25s ease, background-color .25s ease;
}
.tb .tb-stage__next:hover, .tb .tb-stage__next:focus-visible { border-color: var(--tb-gold); background: rgba(241, 232, 229, .08); }
.tb-stage__next svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-stage__anchor { position: absolute; bottom: 0; left: 0; scroll-margin-top: 4.5rem; }

/* Bildbanner: Foto mit Glaskarte in der Mitte */
.tb-stage--banner { display: flex; align-items: center; min-height: clamp(30rem, 72vh, 44rem); }
.tb-stage--banner .tb-stage__media::after { background: rgba(40, 32, 26, .3); }
.tb-stage--banner .tb-stage__media img { object-position: center; }
.tb-stage--banner .tb-stage__inner { width: 100%; display: flex; justify-content: center; }
.tb-stage--banner .tb-stage__content {
  align-items: center; max-width: 46rem; padding: 3rem 3.5rem; text-align: center;
  background: rgba(40, 32, 26, .62); border: 1px solid rgba(241, 232, 229, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tb-stage--banner .tb-stage__lead { max-width: 34ch; }
.tb-stage--banner .tb__actions { justify-content: center; margin-left: auto; margin-right: auto; }

/* Sanfter Auftritt der Bühne */
@media (prefers-reduced-motion: no-preference) {
  .tb-stage--stage .tb-stage__media img { animation: tbStageZoom 9s cubic-bezier(.2, .6, .2, 1) both; }
  .tb-stage--stage .tb-stage__content > * { animation: tbStageRise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .tb-stage--stage .tb-stage__content > :nth-child(2) { animation-delay: .08s; }
  .tb-stage--stage .tb-stage__content > :nth-child(3) { animation-delay: .16s; }
  .tb-stage--stage .tb-stage__content > :nth-child(4) { animation-delay: .26s; }
  .tb-stage--stage .tb-stage__content > :nth-child(5) { animation-delay: .36s; }
  .tb-stage--stage .tb-stage__content > :nth-child(6) { animation-delay: .46s; }
  .tb-stage--stage .tb-stage__content > :nth-child(n+7) { animation-delay: .56s; }
  .tb .tb-stage__next { animation: tbStageNudge 2.6s ease-in-out 1.5s infinite; }
}
@keyframes tbStageZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes tbStageRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tbStageNudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* ---------------------------------------------------------------- Hautbild-Wegweiser */
.tb-guide__head { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 3rem; text-align: center; }
.tb-guide__head .tb__text { max-width: 62ch; }
.tb-guide__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.tb .tb-guide__item { padding: 0 !important; }
.tb .tb-guide__item::before { display: none !important; }
.tb-guide__card {
  display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1.6rem 1.5rem 1.35rem;
  border: 1px solid rgba(241, 232, 229, .1); border-radius: var(--tb-radius); background: var(--mc);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .22);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tb-guide__card:hover, .tb-guide__card:focus-within { transform: translateY(-3px); border-color: rgba(237, 212, 144, .45); box-shadow: 0 16px 28px rgba(0, 0, 0, .3); }
.tb-guide__icon {
  flex: none; width: 4.5rem; height: 4.5rem; margin-bottom: .45rem; overflow: hidden;
  border: 2px solid rgba(237, 212, 144, .55); border-radius: 50%; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
}
.tb-guide__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb .tb-guide__title { font-size: 1.55rem; line-height: 1.15; hyphens: auto; }
.tb-guide__desc { font-size: .9rem; line-height: 1.5; color: var(--tb-muted); }
.tb .tb-guide__label {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--tb-line);
  font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(241, 232, 229, .6);
}
.tb-guide__links { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.tb .tb-guide__links li { padding: 0 !important; }
.tb .tb-guide__links li::before { display: none !important; }
.tb .tb-guide__link {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3rem 0;
  color: var(--tb-gold); font-size: .98rem; font-weight: 600; line-height: 1.35; text-decoration: none;
}
.tb-guide__link svg { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.tb .tb-guide__link:hover, .tb .tb-guide__link:focus-visible { color: var(--sc-l); }
.tb-guide__link:hover svg, .tb-guide__link:focus-visible svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- Text mit Vorteilen */
.tb-benefits__top { align-items: start; }
.tb-benefits__top .tb__lead { max-width: 30ch; }
.tb-benefits__body { margin-top: 3.5rem; }
.tb .tb-benefits__list ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2.25rem 2rem;
  list-style: none; margin: 0; padding: 0; counter-reset: tbbenefit;
}
.tb .tb-benefits__list li {
  counter-increment: tbbenefit; position: relative; padding: 1.5rem 0 0 !important;
  border-top: 1px solid rgba(237, 212, 144, .4); font-size: 1rem; line-height: 1.6; color: var(--tb-muted);
}
.tb .tb-benefits__list li::before {
  content: counter(tbbenefit, decimal-leading-zero) !important; display: block !important; position: static !important;
  width: auto; height: auto; margin-bottom: .7rem; background: none !important; filter: none !important;
  font-size: .72rem; font-weight: 600; letter-spacing: .24em; color: var(--tb-gold);
}
.tb .tb-benefits__list li strong {
  display: block; margin-bottom: .45rem; font-family: var(--tb-serif); font-size: 1.85rem; font-weight: 500; line-height: 1.1; color: var(--sc-l);
}
.tb-benefits__body--photo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: center; }
.tb .tb-benefits__body--photo .tb-benefits__list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-benefits__photo { aspect-ratio: 4 / 5; }
.tb-benefits__actions { margin-top: 3rem; }

/* Niedrige Desktop-Fenster (z. B. Laptop mit 125 % Skalierung, ca. 1536 × 730):
   Titel kompakter, damit der Termin-Button ohne Scrollen sichtbar ist */
@media (min-width: 992px) and (max-height: 900px) {
  .tb-stage--stage .tb-stage__inner { padding-top: 3rem; padding-bottom: 5.5rem; }
  .tb-stage--stage .tb-stage__content { gap: 1.05rem; }
  .tb .tb-stage__title { font-size: clamp(2.9rem, 4vw, 4.2rem) !important; }
  .tb-stage--stage .tb-stage__lead { max-width: 34ch; font-size: clamp(1.35rem, 1.9vw, 1.6rem); }
}

/* Text rechts auf kleinen Laptops (992–1199 px): Textspalte schmaler, damit das Motiv links frei bleibt */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .tb-stage--right.tb-stage--stage .tb-stage__content { max-width: 32rem; }
}

/* ---------------------------------------------------------------- Mobil */
@media (max-width: 991.98px) {
  .tb-stage--stage .tb-stage__inner { padding-top: 4.5rem; padding-bottom: 6rem; }
  .tb-stage--stage .tb-stage__media::after {
    background:
      linear-gradient(90deg, rgba(40, 32, 26, .95) 0%, rgba(40, 32, 26, .8) 45%, rgba(40, 32, 26, .35) 80%),
      linear-gradient(0deg, rgba(40, 32, 26, .85) 0%, rgba(40, 32, 26, 0) 30%);
  }
  /* Text rechts: auf Tablets Foto oben, Text darunter (wie auf dem Handy) – sonst läge der Text über der Person */
  .tb-stage--right.tb-stage--stage { display: block; min-height: 0; }
  .tb-stage--right.tb-stage--stage .tb-stage__media { position: relative; height: 60svh; min-height: 21rem; max-height: 32rem; }
  .tb-stage--right .tb-stage__media::after { background: linear-gradient(0deg, var(--mc-d) 0%, rgba(40, 32, 26, .5) 32%, rgba(40, 32, 26, 0) 62%); }
  .tb-stage--right.tb-stage--stage .tb-stage__inner { margin-top: -7.5rem; padding-top: 0; padding-bottom: 4rem; }
  .tb-stage--right .tb-stage__content { margin-left: 0; }
  .tb.tb-stage--right .tb-stage__next { display: none; }
  .tb-benefits__body--photo { grid-template-columns: 1fr; gap: 2.25rem; }
  .tb-benefits__photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 767.98px) {
  /* Bühne: Foto oben, Text darunter auf dunklem Grund – das Motiv bleibt sichtbar */
  .tb-stage--stage { display: block; min-height: 0; }
  .tb-stage--stage .tb-stage__media { position: relative; height: 60svh; min-height: 21rem; max-height: 32rem; }
  .tb-stage--stage .tb-stage__media::after { background: linear-gradient(0deg, var(--mc-d) 0%, rgba(40, 32, 26, .5) 32%, rgba(40, 32, 26, 0) 62%); }
  .tb-stage--stage .tb-stage__inner { margin-top: -7.5rem; padding-top: 0; padding-bottom: 4rem; }
  .tb-stage--stage.tb-stage--plain .tb-stage__inner { margin-top: 0; padding-top: 4rem; }
  .tb .tb-stage__next { display: none; }
  .tb-stage--banner .tb-stage__content { padding: 2rem 1.5rem; }
}
@media (max-width: 575.98px) {
  .tb .tb-stage__facts ul { flex-direction: column; gap: .2rem; }
  .tb-stage__actions { align-self: stretch; }
  .tb-stage__content > .tb-stage__link { align-self: center; }
  /* Wegweiser: kompakte Karten, Icon links */
  .tb-guide__list { grid-template-columns: 1fr; gap: .8rem; }
  .tb-guide__card { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .3rem; align-items: start; padding: 1.1rem 1.15rem 1rem; }
  .tb-guide__icon { grid-row: 1 / span 4; width: 3.5rem; height: 3.5rem; margin: 0; }
  .tb .tb-guide__title { font-size: 1.35rem; }
  .tb .tb-guide__label { margin-top: .3rem; padding-top: .6rem; }
  .tb .tb-benefits__list ul, .tb .tb-benefits__body--photo .tb-benefits__list ul { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-guide__card, .tb-guide__link svg, .tb .tb-stage__link, .tb .tb-stage__next { transition: none; }
}