/* ============================================================
   TGI Relaunch - assets/css/front-page.css
   Laedt konditional via functions.php (is_front_page()), nach tgi-main.
   NUR Home-spezifisches: Hero, Basis-Grids (Responsive-Kollaps steht in main.css),
   Tool-/Pillar-/Newsletter-Layout, gespiegelter Interview-Teaser, No-JS-Reveal-Fallback.
   Tokens/Bauteile (.btn .card .tgi-card .display .eyebrow .serif-it .flip* .marq* .ph
   .hero-rise .floaty .scroll-cue .reveal) kommen global aus main.css.
   Farben des Hero/der Pillar-Kacheln kommen inline aus PHP (oklch). Keine Gedankenstriche in dieser Datei.
   ============================================================ */

/* --- No-JS / Pre-JS Fallback: ohne aktives JS bleibt .reveal sonst opacity:0 (unsichtbar).
   front-page.js setzt html.tgi-js ganz oben; bis dahin / ohne JS ist alles sichtbar. --- */
html:not(.tgi-js) .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }

/* --- Gemeinsamer Sektionskopf (entspricht Prototyp SectionHead) --- */
.fp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.fp-head .eyebrow { margin-bottom: 12px; }
.fp-head h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 0; }

/* ============================================================
   1 - HERO
   ============================================================ */
.fp-hero { position: relative; width: 100%; min-height: clamp(560px, 86vh, 820px); overflow: hidden; background: var(--forest-deep); }
.fp-hero__media { position: absolute; top: -200px; bottom: -80px; left: 0; right: 0; will-change: transform; }
.fp-hero__media .ph { position: absolute; inset: 0; border-radius: 0; }
.fp-hero__orb { position: absolute; right: 8%; top: 18%; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, oklch(0.86 0.07 146 / .42), transparent 68%); filter: blur(6px); pointer-events: none; }
.fp-hero__scrim { position: absolute; inset: 0; pointer-events: none; }
.fp-hero__scrim--bottom { background: linear-gradient(to top, oklch(0.22 0.03 160 / .62) 0%, oklch(0.22 0.03 160 / .12) 42%, transparent 70%); }
.fp-hero__scrim--left { background: linear-gradient(to right, oklch(0.22 0.03 160 / .35) 0%, transparent 45%); }
.fp-hero__content { position: relative; min-height: clamp(560px, 86vh, 820px); display: flex; flex-direction: column;
  justify-content: flex-end; padding-top: 120px; padding-bottom: clamp(48px, 7vh, 88px); }
.fp-hero__eyebrow { color: oklch(0.92 0.04 146); margin-bottom: 20px; }
.fp-hero__title { color: #fff; font-size: clamp(44px, 6.4vw, 92px); margin: 0 0 24px; line-height: 0.98; max-width: 880px; text-shadow: 0 2px 30px oklch(0.2 0.03 160 / .35); }
.fp-hero__title .serif-it { color: oklch(0.93 0.05 146); }
.fp-hero__lede { font-size: 19px; color: oklch(0.96 0.01 146); max-width: 480px; margin: 0 0 32px; line-height: 1.55; text-shadow: 0 1px 16px oklch(0.2 0.03 160 / .4); }
.fp-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.fp-hero__btn { color: #fff; backdrop-filter: blur(6px); }
.fp-hero__btn--solid { background: oklch(0.24 0.03 160 / .82); border: 1px solid oklch(1 0 0 / .14); }
.fp-hero__btn--solid:hover { background: oklch(0.30 0.03 160 / .9); }
.fp-hero__btn--glass { background: oklch(0.24 0.03 160 / .62); border: 1px solid oklch(1 0 0 / .28); }
.fp-hero__btn--glass:hover { background: oklch(0.24 0.03 160 / .72); }
.fp-hero__cue { position: absolute; right: var(--gut); bottom: clamp(48px, 7vh, 88px); display: flex; flex-direction: column; align-items: center; gap: 8px; color: oklch(0.95 0.02 146 / .8); }
.fp-hero__cue-label { color: inherit; writing-mode: vertical-rl; letter-spacing: 0.22em; }
.fp-hero__cue svg { transform: rotate(90deg); }

/* ============================================================
   2 - SEASON-TICKER
   ============================================================ */
.fp-ticker { background: var(--forest); padding-block: 16px; border-bottom: 1px solid oklch(1 0 0 / .08); }
.fp-ticker__row { display: flex; align-items: center; gap: 22px; }
.fp-ticker__label { color: var(--on-dark-sage); flex: none; white-space: nowrap; }
.fp-ticker__marquee { flex: 1; min-width: 0; }

/* ============================================================
   3 - FEATURED-ROW  (Basis-Grid; Responsive .feat-grid in main.css)
   ============================================================ */
.fp-featured { padding-block-start: 56px; }
.feat-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: stretch; }
.fp-feat-rest { display: grid; grid-template-rows: 1fr 1fr; gap: 28px; }
.feat-grid > .reveal, .fp-feat-rest > .reveal { display: flex; min-width: 0; }
.feat-grid > .reveal > *, .fp-feat-rest > .reveal > * { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   4 - LEBENSWELTEN-GRID  (Basis-Grid; Responsive .topics-grid in main.css)
   ============================================================ */
/* 8 Kacheln: Desktop feste 4 Spalten (4+4). main.css-Breakpoints uebernehmen: <=1040px -> 2 Spalten (2+2+2+2), <=760px -> 1 Spalte (gestapelt). */
.topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.fp-pillar { height: 100%; }
.fp-pillar__front { text-align: left; padding: 24px 22px 26px; height: 100%; width: 100%; display: flex; flex-direction: column; }
.fp-pillar__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.fp-pillar__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.fp-pillar__title { font-size: 22px; margin: 0 0 8px; line-height: 1.12; }
.fp-pillar__intro { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fp-pillar__count { margin-top: auto; padding-top: 16px; }
.fp-pillar__back { justify-content: center; }
.fp-pillar__back .fb-eyebrow { margin-bottom: 10px; }
.fp-pillar__focus { margin: 0; font-family: var(--serif); font-size: 16.5px; line-height: 1.35; color: var(--forest); }
.fp-pillar__back .flip-cta { margin-top: 16px; }

/* ============================================================
   5 - HOME-INTERVIEW  (Interview-Teaser, gespiegelt aus pillar.css; pillar.css laedt hier nicht)
   ============================================================ */
.tgi-interview { display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden; text-decoration: none; color: inherit; border-radius: var(--r-lg); }
.tgi-interview__media { position: relative; min-height: 340px; }
.tgi-interview__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgi-interview__media--empty { position: absolute; inset: 0; }
.tgi-interview__badge { position: absolute; top: 18px; left: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  background: oklch(1 0 0 / .82); backdrop-filter: blur(3px); padding: 7px 13px; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.tgi-interview__badge-dot { width: 7px; height: 7px; border-radius: 50%; }
.tgi-interview__body { padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.tgi-interview__leona { display: flex; align-items: center; gap: 11px; }
.tgi-interview__leona-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--serif); font-style: italic; font-size: 18px; }
.tgi-interview__leona-meta { display: flex; flex-direction: column; }
.tgi-interview__leona-name { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tgi-interview__leona-meta .eyebrow { font-size: 10.5px; }
.tgi-interview__title { font-size: clamp(23px, 2.5vw, 32px); line-height: 1.18; margin: 0; }
.tgi-interview__dek { color: var(--ink-soft); font-size: 16px; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tgi-interview__meta { display: flex; align-items: center; }
.tgi-interview__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); margin: 0 10px; }
.tgi-interview__cta { align-self: flex-start; }

/* ============================================================
   6 - TOOLS-BAND  (Basis-Grid; Responsive .tools-grid in main.css)
   ============================================================ */
.tools-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: stretch; }
.fp-tool-big { position: relative; overflow: hidden; display: block; text-decoration: none; color: var(--on-dark);
  background: var(--forest); border-radius: var(--r-lg); padding: clamp(28px, 3.5vw, 44px); }
.fp-tool-big__body { position: relative; z-index: 1; }
.fp-tool-big__eyebrow { color: var(--on-dark-sage); margin-bottom: 18px; }
.fp-tool-big__title { color: var(--on-dark); font-size: clamp(28px, 3vw, 40px); margin: 0 0 14px; max-width: 420px; }
.fp-tool-big__text { color: var(--on-dark-soft); font-size: 16px; max-width: 380px; margin: 0 0 28px; }
.fp-tool-big__orb { position: absolute; right: -40px; top: -30px; width: 260px; height: 260px; border-radius: 50%; background: oklch(0.72 0.05 148 / .16); }
.fp-tool { text-align: left; text-decoration: none; padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; }
.fp-tool__eyebrow { margin-bottom: 18px; }
.fp-tool__title { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 14px; }
.fp-tool__text { color: var(--ink-soft); font-size: 16px; margin: 0 0 28px; }
.fp-tool__cta { margin-top: auto; align-self: flex-start; }

/* ============================================================
   7 - LATEST-GRID  (Basis-Grid; Responsive .latest-grid in main.css)
   ============================================================ */
.latest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.latest-grid > .reveal { display: flex; min-width: 0; }
.latest-grid > .reveal > * { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   8 - NEWSLETTER-BAND  (Basis-Grid; Responsive .news-band in main.css)
   ============================================================ */
.fp-news { background: var(--sage-soft); border-radius: var(--r-lg); padding: clamp(36px, 5vw, 64px);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.fp-news__eyebrow { color: var(--forest); margin-bottom: 16px; }
.fp-news__title { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 14px; }
.fp-news__lede { color: var(--forest-deep); font-size: 17px; margin: 0; max-width: 420px; }
.fp-news__form { display: flex; flex-direction: column; gap: 12px; }
.fp-news__input { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); font-family: var(--sans); font-size: 16px; color: var(--ink); }
.fp-news__input:focus { outline: none; border-color: var(--sage); }
.fp-news__submit { justify-content: center; padding: 16px; }
.fp-news__count { font-size: 12.5px; color: var(--forest-deep); opacity: .75; }

/* ============================================================
   Home-spezifisches Responsive (fp- Klassen; Prototyp-Grids deckt main.css ab)
   ============================================================ */
@media (max-width: 760px) {
  .fp-hero { min-height: clamp(420px, 60vh, 520px); }
  .fp-hero__content { min-height: clamp(420px, 60vh, 520px); padding-top: 96px; }
  .fp-hero__cue { display: none; }
  .fp-hero__video { object-position: 65% 50%; transform: translateY(9%) scale(1.25); }
}
@media (max-width: 980px) {
  .tgi-interview { grid-template-columns: 1fr; }
  .tgi-interview__media { min-height: 240px; }
}

/* ============================================================
   Magazin-Button - feste Klasse. Farben 1:1 aus der Nav-Pille (.nav-magazin-pill)
   verifiziert: bg oklch(0.955 0.028 64), Text oklch(0.47 0.09 50).
   Geometrie erbt von .btn (Seiten-CTA-Groesse), nur Farbe = Nav-Clay.
   ============================================================ */
.btn-magazin { background: oklch(0.955 0.028 64); color: oklch(0.47 0.09 50); border: 1px solid oklch(0.905 0.030 58); }
.btn-magazin:hover { background: oklch(0.920 0.040 62); border-color: oklch(0.870 0.045 58); }
.btn-magazin svg { color: inherit; }

/* ============================================================
   Lebenswelten "in Arbeit" - nicht klickbare Kachel (Slug-Seite noch nicht veroeffentlicht).
   Nutzt dieselbe .flip-Mechanik (Hover spielt Teaser), aber als <div> ohne href -> kein 404, crawler-sicher.
   ============================================================ */
.fp-pillar--soon { cursor: default; }
.fp-pillar--soon .fp-pillar__count { opacity: .8; }
.fp-pillar__soon-badge { display: inline-block; margin-top: auto; padding-top: 16px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Hero-Video */
.fp-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .fp-hero__video { display: none; } }