/* ==========================================================================
   Links (/links/) — page-scoped CSS, dediziert
   ==========================================================================
   Grund fuer eigene Datei statt main.css: main.css ist in diesem Projekt ein
   nachweislich mehrfach von Parallelsessions ueberschriebenes Hot-File. Die
   urspruengliche .hero-sub--linktree/.linktree-CSS wurde am 2026-08-11 bereits
   einmal fertig gebaut+deployed (s. project_stefanie_grace_technik.md, Update
   "/links/ (Linktree) bespoke nachgebaut"), ist aber zwischenzeitlich aus der
   live main.css komplett verschwunden (0 Treffer fuer "linktree" bei einem
   frischen Server-Pull am 2026-08-11, Fix-Runde 1) — vermutlich durch einen
   ueberschreibenden Deploy einer anderen Session. Um dieses Risiko fuer die
   Zukunft auszuschliessen, jetzt als eigene, nur auf dieser einen Seite
   geladene Datei (siehe grace_links_assets() in functions.php).

   Alle Werte per ECHTEM getComputedStyle/raw-CSS-Fetch gegen die aktuelle
   Live-Originalseite https://www.stefanie-grace.com/links/ verifiziert
   (Playwright, Breakpoints 375/1024/1440/1920 + direkter HTTP-Fetch von
   wp-content/uploads/bricks/css/post-870.min.css und dem globalen
   bricks-frontend-inline-inline-css-<style>-Tag), NICHT geschaetzt. */

:root{
  /* Fluid-Tokens 1:1 aus dem rohen (unresolved) --text-xxl/--space-m/--space-xl
     CSS-Custom-Property-Text des Originals uebernommen (Automatic.css-Formeln),
     eigener Namensraum --lnk-* um mit main.css/anderen Sessions kollisionsfrei
     zu bleiben. */
  --lnk-text-xxl: clamp(1.728rem, calc(1.2542824681vw + 1.4457864447rem), 2.5166301018rem);
  --lnk-space-m:  clamp(1.5rem, calc(0.5964214712vw + 1.365805169rem), 1.875rem);
  --lnk-space-xl: clamp(2.6653335rem, calc(2.4706425447vw + 2.1094389274rem), 4.21875rem);
}

/* ---- Hero-Sub (Foto + Verlauf + "LINKTREE"-Ueberschrift) ---- */
.hero-sub--linktree{
  position:relative;
  overflow:hidden;
  height:50vh; /* 1:1 Original (_height:"50vh" auf #brxe-nvpqvx) */
  display:flex;
  align-items:center;
  justify-content:center;
  /* Fix-Runde 5 (2026-08-11, pingeliger UX-Experte, Befund "Header-Hintergrund am
     Seitenanfang"): Original zieht den Hero unter den 70px hohen position:sticky-Header
     (margin-top:-70px auf #brxe-nvpqvx, live per getComputedStyle gegengeprueft:
     rectTop:0/marginTop:-70px auf allen 4 Breakpoints), damit das Diagonal-Overlay
     (.hero-sub--linktree__overlay) auch HINTER dem Header beginnt und der transparente
     Header nahtlos ins Foto uebergeht statt eines harten grauen Balkens. War hier
     bislang komplett unangetastet (Hero begann erst bei rectTop:70, direkt unterhalb
     des Headers im normalen Fluss) — 3./4./5. unabhaengiger Fund desselben strukturellen
     Musters in diesem Projekt (s. project_stefanie_grace_technik.md, ibiza-retreat
     Fix-Runden 2-4). Kompensation der Textposition ueber
     .hero-sub--linktree__container{margin-top:70px} weiter unten. */
  margin-top:-70px;
}
.hero-sub--linktree__media{
  position:absolute;
  inset:0;
  z-index:-1;
}
.hero-sub--linktree__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover; /* Kritischer Fix: war ungestylt -> Bild rendert nur in
    Intrinsic-Breite (1271px), rechts bleibt bei breiten Viewports Weissraum.
    1:1 Original-Regel ".hero-sub__image img{object-fit:cover}". */
  object-position:center center;
}
@media (max-width:478px){
  /* 1:1 Original-Mobile-Override (".hero-sub__image img{object-position:68.49% 48.99%}"
     unter @media max-width:478px) — anderer Bildausschnitt auf sehr schmalen Viewports. */
  .hero-sub--linktree__media img{object-position:68.49% 48.99%;}
}
.hero-sub--linktree__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  /* Kritischer Fix: fehlte komplett (Div kollabierte auf height:0 ohne eigene CSS).
     1:1 Original-Regel ".hero-sub__overlay{background-image:linear-gradient(45deg,
     var(--black-trans-70), transparent)}", --black-trans-70 = rgba(0,0,0,.7). */
  background-image:linear-gradient(45deg, rgba(0,0,0,.7), transparent);
}
.hero-sub--linktree__container{
  position:relative;
  z-index:2;
  margin-top:70px; /* kompensiert das margin-top:-70px auf .hero-sub--linktree oben,
    haelt die (bereits vorher korrekt verifizierte) vertikale Textposition der
    "LINKTREE"-Ueberschrift unveraendert — 1:1 Original-Regel
    ".hero-sub__container{margin-top:70px}". */
}
.hero-sub--linktree__heading{
  margin:0;
  color:#fff; /* war schwarz */
  text-align:center;
  text-transform:uppercase; /* war none -> zeigte "Linktree" statt "LINKTREE" */
  font-family:var(--font-heading); /* Cormorant — war Poppins/Body-Default */
  font-weight:700; /* war Default-400 */
  line-height:1.4;
  /* 60.4px bei >=1440px, 41.75px bei 375px — 1:1 Original-Formel
     "calc(var(--text-xxl) * 1.5)", war statisch 34px (44% zu klein). */
  font-size:calc(var(--lnk-text-xxl) * 1.5);
}

/* ---- Header-Transparenz nur auf dieser Seite (Fix-Runde 5, s.o.) ----
   .site-header ist eine sitewide Klasse (header.php), main.css setzt dort
   background:rgba(0,0,0,.7) — 1:1 korrekt fuer Content-Seiten OHNE Foto-Hero
   (frisch gegengeprueft, main.css bewusst NICHT angetastet). Diese Datei laedt
   NUR auf /links/ (is_page('links') in functions.php), daher hier ohne Body-Klassen-
   Praefix sicher scopebar; gleiche Spezifitaet (0,1,0) wie main.css' Regel, gewinnt
   per Ladereihenfolge (grace-links haengt von grace-main ab, laedt danach). */
.site-header{
  background-color:transparent;
}
/* ⭐ Eigener Zusatzfund beim Verifizieren (Hypothesen-Test per page.addStyleTag VOR
   jeder Server-Aenderung): das Original selbst hat hier einen bestaetigten,
   NICHT reproduzierten Lesbarkeits-Bug — der Header bleibt auf stefanie-grace.com
   AUCH tief gescrollt permanent transparent, wodurch Seiteninhalt (Buttons/Logo)
   ab ca. Hero-Ende durchscheint (Screenshot-Beleg gklk_hyp_scroll900.png in dieser
   Session). Statt das 1:1 zu kopieren: Header bleibt nur so lange transparent, wie
   er visuell noch ueber dem Hero-Foto liegt, danach re-solidifiziert per
   .is-scrolled-Klasse (kleines Scroll-Script unten in page-links.php, analog zum
   bereits bestehenden Mobile-Menu-MutationObserver-Muster in header.php) — beste aus
   beiden Welten, kein main.css/header.php-Eingriff noetig. */
.site-header.is-scrolled{
  background-color:rgba(0,0,0,.7);
}

/* ---- Linktree-Sektion (Buttons + Kontakt-CTA) ---- */
.linktree{
  position:relative;
  /* Fix-Runde 5 (Befund "Content-Unterschied im Grafik-Bereich"): Original-Section
     hat padding:90px 60px (1:1 per getComputedStyle gemessen), hier bislang
     70px 0 90px — Padding-Delta war Teilursache der gemessenen Sektionshoehen-
     Abweichung (89px @1440, s. Befund 5 im selben Report). */
  padding:90px 60px;
}
.linktree__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  /* Fix-Runde 5: Original nutzt background-position:0% 0% (oben-links-Crop), hier
     bislang "center" (50% 50%) — dadurch zeigte der IDENTISCHE Bild-File
     (SHA256-verifiziert byte-gleich zum Original, s. Memory) einen komplett anderen
     Bildausschnitt (u.a. sichtbares Tattoo, das im Original-Crop nicht im Bild ist).
     Kein anderes Bild, nur falscher Crop. */
  background-position:0% 0%;
  z-index:0;
}
.linktree__container{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  row-gap:var(--lnk-space-xl); /* 1:1 Original ".linktree__container{row-gap:var(--space-xl)}" */
}
.linktree__list{
  display:flex;
  flex-direction:column;
  row-gap:var(--lnk-space-m); /* Kritischer Fix: war 0px, Buttons verschmolzen optisch */
  margin:0;
  padding:0;
  list-style:none;
  width:100%;
}
.linktree__list-item{
  display:flex;
  flex-direction:column;
  align-items:center; /* ⚠ Nachiterations-Fund (eigene Verifikation nach Erstdeploy): ohne
    align-items:center stretchen Flex-Kinder per Default (align-items:stretch) auf die volle
    Container-Breite — die Buttons wurden dadurch alle exakt 1100px breit (identisch mit dem
    Container) statt ihrer eigenen Textbreite, obwohl text-align:center bereits gesetzt war
    (text-align wirkt nur auf INLINE-Kinder, aber im Flex-Layout ist align-items fuer die
    Kind-Breite verantwortlich). 1:1 Original-Regel ".linktree__list-item{text-align:center;
    align-items:center}" — align-items war im ersten Deploy versehentlich nicht mit
    uebernommen worden. */
  row-gap:var(--lnk-space-m); /* fuer den Fall mit 2 gestapelten Buttons in einem <li>
    (Ibiza+Austria) — im Original hat derselbe Abstand exakt denselben Wert wie
    zwischen den <li>-Elementen selbst, 1:1 gemessen. */
  text-align:center;
}
.linktree__link{
  /* Feinheiten-Audit-Fund: Original transitioniert "border" komplett (Breite+Stil+Farbe),
     die geteilte .btn-Regel in main.css transitioniert nur "border-color" — hier
     seitenspezifisch auf border korrigiert statt main.css (Hot-File) anzufassen. */
  transition:background .3s ease-in-out,color .3s ease-in-out,border .3s ease-in-out,translate .3s ease-in-out;
}
.linktree__kontakt{
  text-align:center;
}
.linktree__quote{
  margin:0 0 16px;
  font-size:17px;
}