/* =========================================================
   SARAH CARINA — Landingpage "Freiheit"
   Ergänzt den Editorial-Layer aus angst.css (Klassen ag-*),
   der bewusst wiederverwendet wird: gleiche Rhythmik,
   gleiche Reveals, kein doppelter Code.
   Hier stehen nur die Bausteine, die es dort nicht gibt.
   ========================================================= */

/* ---------------------------------------------------------
   VISUELLE HELDENREISE
   Die Seite öffnet sich von oben nach unten: enger und
   kühler Anfang, weiter und wärmerer Schluss.
   --------------------------------------------------------- */
.fr-stage--close { background: var(--bg-deep); }
.fr-stage--mid   { background: var(--bg-panel); }
.fr-stage--open  { background: var(--bg); }

/* ---------------------------------------------------------
   HERO — Person zwischen Architektur und Horizont
   --------------------------------------------------------- */
.fr-hero { min-height: clamp(600px, 88vh, 880px); }
.fr-hero .ag-hero-media img { object-position: 62% 42%; }
/* Etwas mehr Sättigung als auf der Angst-Seite: Freiheit
   startet ruhig, aber nicht kalt. */
.fr-hero .ag-hero-media img { filter: grayscale(0.62) contrast(1.03); }
.fr-hero-claim {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(15px, 1.5vw, 17px);
  font-style: italic;
  color: var(--accent-dark);
  margin: 0 0 6px;
}
.fr-scroll {
  position: absolute;
  left: clamp(20px, 5vw, 48px);
  bottom: 34px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fr-scroll span {
  display: block; width: 34px; height: 1px; background: var(--accent);
  transform-origin: left;
  animation: frScroll 2.6s ease-in-out infinite;
}
@keyframes frScroll {
  0%, 100% { transform: scaleX(0.35); opacity: 0.5; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* ---------------------------------------------------------
   KONTRAST-MODUL — äußere vs. innere Freiheit
   --------------------------------------------------------- */
.fr-contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 44px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.fr-contrast > div { background: var(--bg); padding: clamp(26px, 3vw, 40px); }
.ag-section--panel .fr-contrast > div,
.fr-stage--mid .fr-contrast > div { background: var(--bg-cream); }
.fr-contrast h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500; font-size: clamp(20px, 2vw, 25px);
  color: var(--ink); margin: 0 0 6px;
}
.fr-contrast .fr-q {
  font-size: 13px; color: var(--accent-dark); font-style: italic; margin: 0 0 16px;
}
.fr-contrast p { font-size: 15.5px; line-height: 1.68; color: var(--text-muted); margin: 0; }
.fr-contrast ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.fr-contrast li {
  position: relative; padding-left: 20px;
  font-size: 15px; line-height: 1.55; color: var(--text-muted);
}
.fr-contrast li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 10px; height: 1px; background: var(--accent);
}

/* ---------------------------------------------------------
   UNSICHTBARE REGELN — Sticky-Storytelling
   Die Sätze verdichten sich, während das Bild stehen bleibt.
   --------------------------------------------------------- */
.fr-rules { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.fr-rules-sticky { position: sticky; top: calc(var(--nav-h-scrolled) + 32px); }
.fr-rules-sticky .ag-figure-frame { aspect-ratio: 4 / 5; }
.fr-rules-list { list-style: none; margin: 0; padding: clamp(20px, 6vh, 60px) 0; display: grid; gap: clamp(28px, 6vh, 64px); }
.fr-rule {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.3;
  color: var(--ink);
  opacity: 0.18;
  transform: translateY(10px);
  transition: opacity 700ms var(--ag-ease), transform 700ms var(--ag-ease);
}
.fr-rule.is-revealed { opacity: 1; transform: none; }
.fr-rule small {
  display: block;
  margin-top: 8px;
  font-family: "Jost", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 700ms var(--ag-ease) 120ms;
}
.fr-rule.is-revealed small { opacity: 1; }
.fr-rules-out {
  margin-top: clamp(30px, 6vh, 56px);
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  font-size: 16.5px; line-height: 1.7; color: var(--text-muted);
}
.fr-rules-out strong { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------
   WAAGE — äußere Bestätigung / innere Stabilität
   Bewusst als Balance, nicht als Gegensatz.
   --------------------------------------------------------- */
.fr-balance { display: grid; grid-template-columns: 220px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 42px; }
.fr-balance-svg { width: 100%; max-width: 220px; height: auto; display: block; }
.fr-balance-beam,
.fr-balance-post,
.fr-balance-pan { fill: none; stroke: var(--accent-dark); stroke-width: 1.4; stroke-linecap: round; }
.fr-balance-group {
  transform-origin: 110px 58px;
  transform: rotate(-7deg);
  transition: transform 1800ms var(--ag-ease);
}
.fr-balance.is-revealed .fr-balance-group { transform: rotate(0deg); }
.fr-balance-cap { font-family: "Jost", sans-serif; font-size: 9.5px; letter-spacing: 1.5px; fill: var(--text-muted); text-anchor: middle; }
.fr-balance-dot { fill: var(--accent); }

/* ---------------------------------------------------------
   SIGNATURE-REFLEXION — maximale Ruhe, eine Frage je Block
   --------------------------------------------------------- */
.fr-reflect { display: grid; gap: clamp(48px, 9vh, 104px); margin-top: clamp(40px, 7vh, 78px); }
.fr-reflect-item { max-width: 24ch; }
.fr-reflect-item:nth-child(even) { margin-left: auto; text-align: right; }
.fr-reflect-num {
  display: block;
  font-size: 10px; letter-spacing: 3px; color: var(--accent-dark);
  margin-bottom: 14px;
}
.fr-reflect-q {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(23px, 3.4vw, 38px);
  line-height: 1.28;
  color: var(--ink);
  margin: 0;
}

/* ---------------------------------------------------------
   ROADMAP — sieben Schritte, horizontal gedachte Reihung
   --------------------------------------------------------- */
.fr-road { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.fr-road li { background: var(--bg); padding: clamp(22px, 2.4vw, 30px); }
.fr-stage--mid .fr-road li, .ag-section--panel .fr-road li { background: var(--bg-cream); }
.fr-road-num { font-size: 10px; letter-spacing: 2.4px; color: var(--accent-dark); display: block; margin-bottom: 12px; }
.fr-road h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 19px; color: var(--ink); margin: 0 0 8px; }
.fr-road p { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* ---------------------------------------------------------
   BEREICHE — Beziehung / Beruf als ruhige Split-Module
   --------------------------------------------------------- */
.fr-area { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.fr-area + .fr-area { margin-top: clamp(56px, 8vw, 104px); }
.fr-area--reverse .fr-area-media { order: -1; }
.fr-area-media .ag-figure-frame { aspect-ratio: 3 / 2; }

/* ---------------------------------------------------------
   CONVERSION — klare Hierarchie statt drei gleicher Buttons
   --------------------------------------------------------- */
.fr-final { display: grid; gap: clamp(18px, 2vw, 26px); margin-top: 46px; }
.fr-final-primary {
  padding: clamp(30px, 4vw, 48px);
  background: var(--bg-cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.fr-stage--open .fr-final-primary { background: var(--bg-panel); }
.fr-final-primary h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500; font-size: clamp(24px, 3vw, 32px);
  color: var(--ink); margin: 0 0 12px;
}
.fr-final-primary p { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0 0 26px; max-width: 56ch; }
.fr-final-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); }
.fr-final-secondary article {
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.fr-final-secondary h4 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500; font-size: 20px; color: var(--ink); margin: 0 0 8px;
}
.fr-final-secondary p { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 18px; }

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .fr-contrast, .fr-rules, .fr-balance, .fr-area, .fr-final-secondary { grid-template-columns: 1fr; }
  .fr-rules-sticky { position: static; }
  .fr-rules-sticky .ag-figure-frame { aspect-ratio: 4 / 3; }
  .fr-rules-list { padding: 30px 0 0; }
  .fr-area--reverse .fr-area-media { order: 0; }
  .fr-balance-svg { max-width: 176px; margin-inline: auto; }
  .fr-reflect-item, .fr-reflect-item:nth-child(even) { margin-left: 0; text-align: left; max-width: none; }
  .fr-hero { min-height: 84vh; }
  .fr-hero .ag-hero-media img { object-position: 68% 40%; }
}
@media (max-width: 620px) {
  .fr-road { grid-template-columns: 1fr; }
  .fr-scroll { display: none; }
}

/* ---------------------------------------------------------
   MOTION
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fr-rule { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fr-rule small { opacity: 1 !important; transition: none !important; }
  .fr-balance-group { transform: rotate(0deg) !important; transition: none !important; }
  .fr-scroll span { animation: none; transform: scaleX(1); }
}