/* =====================================================================
   REGIESTUHL · EchtSein  —  Premium Landing Layer
   Additiv zu style.css + sales.css. Alle Klassen mit Prefix .rg-,
   damit keine andere Seite beeinflusst wird.
   Farbwelt: Beige/Greige Basis · Taupe Akzent · warmes Gold · Anthrazit-Kontrast.
   ===================================================================== */

:root{
  --rg-anthracite:#141312;      /* warmes Anthrazit für Kontrast-Akt */
  --rg-champagne:#e0dace;
  --rg-gold:#a98a52;
  --rg-gold-soft:rgba(169,138,82,.16);
  --rg-line:#d0ccc3;
  --rg-shadow:0 24px 60px -28px rgba(45,33,16,.45);
  --rg-shadow-soft:0 14px 40px -24px rgba(45,33,16,.35);
  --rg-ease:cubic-bezier(.22,1,.36,1);
  --rg-ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---- Grain / Noise Overlay (dezent, Marke „analog & warm") ---- */
/* Der Grain-Layer liegt fix ueber dem Viewport. Ein fixiertes Element wird
   an der Viewport-Breite INKLUSIVE Scrollleiste ausgerichtet, die sichtbare
   Flaeche ist aber schmaler — dadurch entstand seitliches Scrollen.
   `clip` schneidet den Ueberstand ab, ohne einen Scroll-Container zu
   erzeugen; `position:sticky` (rg-day-sticky) funktioniert weiterhin. */
html{overflow-x:clip;}
/* style.css setzt body{overflow-x:hidden}. Sobald html nicht mehr `visible`
   ist, wird diese Angabe nicht mehr auf den Viewport uebertragen und der
   body selbst zum Scroll-Container — dann klebt kein `position:sticky` mehr.
   `clip` schuetzt weiterhin vor seitlichem Ueberstand, wird aber nie zum
   Scroll-Container — anders als `hidden`. */
body{overflow:clip;}

.rg-grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Scroll-Progress (Gold, oben) ---- */
.rg-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--rg-gold),#c7a76a);
  z-index:60; transition:width .1s linear;
}

/* ---- Reveal-Utilities (IntersectionObserver toggelt .is-in) ---- */
.rg-reveal{opacity:0; transform:translateY(26px); transition:opacity .9s var(--rg-ease), transform .9s var(--rg-ease);}
.rg-reveal.is-in{opacity:1; transform:none;}
.rg-blur{opacity:0; filter:blur(14px); transform:translateY(20px); transition:opacity 1s var(--rg-ease), filter 1s var(--rg-ease), transform 1s var(--rg-ease);}
.rg-blur.is-in{opacity:1; filter:blur(0); transform:none;}
/* Mask-Reveal (Zeile schiebt sich unter einer Kante hervor) */
.rg-mask{display:block; overflow:hidden;}
.rg-mask > *{display:block; transform:translateY(105%); transition:transform 1s var(--rg-ease-out);}
.rg-mask.is-in > *{transform:none;}
/* Stagger: --i steuert Verzögerung */
.rg-stagger.is-in > *{animation:rgUp .8s var(--rg-ease) both;}
.rg-stagger > *{--i:0;}
.rg-stagger.is-in > *{animation-delay:calc(var(--i) * .09s);}
@keyframes rgUp{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}

/* ---- Section-Grundlagen ---- */
.rg-main{position:relative; z-index:1;}
.rg-sec{padding:clamp(72px,11vw,150px) 0;}
.rg-wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,56px);}
.rg-narrow{max-width:760px;}
.rg-kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-family:"Jost",sans-serif; font-size:12px; letter-spacing:3.5px;
  text-transform:uppercase; color:var(--accent-dark); margin:0 0 22px;
}
.rg-kicker::before{content:none; display:none;}
.rg-h2{
  font-family:"Playfair Display",serif; font-weight:500;
  /* Gleiche Groesse wie die Abschnittsueberschriften der Startseite
     (sales.css: 34 px, unter 600 px 28 px). Vorher lief die Zeile bis
     52,8 px hoch und wirkte neben der Startseite deutlich groesser. */
  font-size:clamp(1.75rem,2.6vw,2.125rem); line-height:1.16; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 22px;
}
.rg-lead{
  font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.7; color:var(--text-muted);
  max-width:60ch; margin:0;
}
.rg-em{color:var(--rg-gold); font-style:italic;}

/* =====================================================================
   HERO
   ===================================================================== */
.rg-hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; padding:calc(var(--nav-offset) + 120px) 0 90px;
}
.rg-hero-bg{position:absolute; inset:0; z-index:0;}
.rg-hero-bg::before{ /* warmes Licht, sanft atmend */
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(60% 55% at 68% 30%, rgba(169,138,82,.20), transparent 60%),
             radial-gradient(50% 50% at 20% 80%, rgba(138,122,102,.18), transparent 60%);
  animation:rgBreath 14s ease-in-out infinite alternate;
}
@keyframes rgBreath{from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(0,-2%,0) scale(1.06);}}
.rg-hero-inner{position:relative; z-index:2; width:100%;}
.rg-hero-eyebrow{
  font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:5px;
  font-size:13px; color:var(--accent-dark); display:block; margin-bottom:26px;
}
.rg-hero-eyebrow b{color:var(--rg-gold); font-weight:500;}
.rg-eyebrow-claim{
  display:block; margin-top:9px; font-style:normal;
  text-transform:none; letter-spacing:.01em; font-size:15px; line-height:1.55;
  color:var(--text-muted); max-width:34ch;
}
.rg-hero h1{
  font-family:"Playfair Display",serif; font-weight:500;
  /* Gleicher Wert wie der Hero der Startseite (style.css: 38 bis 66 px).
     Vorher lief die Zeile bis 99 px hoch, also anderthalbmal so gross. */
  font-size:clamp(2.375rem,5.4vw,4.125rem); line-height:1.02; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 30px; max-width:15ch;
}
.rg-hero h1 i{font-style:italic; color:var(--rg-gold);}
.rg-hero-sub{font-size:clamp(1.1rem,1.8vw,1.4rem); line-height:1.6; color:var(--text-muted); max-width:46ch; margin:0 0 40px;}
.rg-cta-row{display:flex; flex-wrap:wrap; gap:18px; align-items:center;}
.rg-hero-note{margin-top:26px; font-size:14px; color:var(--text-muted);}
.rg-hero-note a{color:var(--accent-dark); border-bottom:1px solid rgba(109,95,78,.4);}

/* Hero-Foto oben rechts — die Klasse gibt es nur auf der EchtSein-Seite,
   die uebrigen rg-Seiten bleiben davon unberuehrt. */
.rg-hero-photo{
  position:absolute; top:0; right:clamp(20px,5vw,56px);
  width:min(40vw,560px); margin:0; z-index:2;
}
.rg-hero-photo picture{display:block;}
.rg-hero-photo img{
  display:block; width:100%; height:auto; border-radius:14px;
  box-shadow:0 26px 70px rgba(20,19,18,.28);
}
.rg-hero-photo::after{ /* feine Kante, damit das Bild nicht ausfranst */
  content:""; position:absolute; inset:0; border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); pointer-events:none;
}
/* Text bleibt links neben dem Bild */
.rg-hero-photo ~ h1{font-size:clamp(2.3rem,4.4vw,4.2rem);}
.rg-hero-photo ~ .rg-hero-eyebrow,
.rg-hero-photo ~ h1,
.rg-hero-photo ~ .rg-hero-sub,
.rg-hero-photo ~ .rg-cta-row,
.rg-hero-photo ~ .rg-hero-note{max-width:min(48ch,45%);}

/* ---------------------------------------------------------------------
   VOLLFLAECHIGES HERO-BILD  (.rg-hero--cover)
   Das Foto liegt hier nicht als Karte rechts, sondern als Hintergrund
   ueber die gesamte obere Seite, wie auf der Startseite. Darueber ein
   heller Verlauf, damit der Text lesbar bleibt und das Bild ruhig wirkt.
   Als eigene Klasse angelegt, damit die uebrigen rg-Seiten unveraendert
   bleiben.
   --------------------------------------------------------------------- */
.rg-hero--cover .rg-hero-photo{
  position:absolute; inset:0; top:0; right:auto;
  width:auto; margin:0; z-index:0;
}
.rg-hero--cover .rg-hero-photo picture{display:block; width:100%; height:100%;}
.rg-hero--cover .rg-hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  border-radius:0; box-shadow:none;
}
/* Der Verlauf sitzt auf dem bestehenden ::after, das sonst die Kante zeichnet */
.rg-hero--cover .rg-hero-photo::after{
  border-radius:0; box-shadow:none;
  background:linear-gradient(100deg,
    rgba(229,226,219,.96) 0%,
    rgba(229,226,219,.90) 38%,
    rgba(229,226,219,.80) 70%,
    rgba(229,226,219,.74) 100%);
}
html[data-theme="dark"] .rg-hero--cover .rg-hero-photo::after{
  background:linear-gradient(100deg,
    rgba(22,21,20,.96) 0%,
    rgba(22,21,20,.90) 38%,
    rgba(22,21,20,.80) 70%,
    rgba(22,21,20,.74) 100%);
}
/* Das Bild liegt hinter dem Hero, der Text bekommt eine ruhige Lesebreite */
.rg-hero--cover .rg-hero-inner .rg-hero-eyebrow,
.rg-hero--cover .rg-hero-inner h1,
.rg-hero--cover .rg-hero-inner .rg-hero-sub,
.rg-hero--cover .rg-hero-inner .rg-cta-row,
.rg-hero--cover .rg-hero-inner .rg-hero-note{max-width:min(52ch,64%);}

@media (max-width:900px){
  /* Auch mobil vollflaechig statt als Block ueber dem Text */
  .rg-hero--cover .rg-hero-photo{position:absolute; inset:0; width:auto; margin:0;}
  .rg-hero--cover .rg-hero-photo img{object-position:center 30%;}
  .rg-hero--cover .rg-hero-photo::after{
    background:linear-gradient(180deg,
      rgba(229,226,219,.95) 0%,
      rgba(229,226,219,.90) 46%,
      rgba(229,226,219,.82) 78%,
      rgba(229,226,219,.76) 100%);
  }
  html[data-theme="dark"] .rg-hero--cover .rg-hero-photo::after{
    background:linear-gradient(180deg,
      rgba(22,21,20,.95) 0%,
      rgba(22,21,20,.90) 46%,
      rgba(22,21,20,.82) 78%,
      rgba(22,21,20,.76) 100%);
  }
  .rg-hero--cover .rg-hero-inner .rg-hero-eyebrow,
  .rg-hero--cover .rg-hero-inner h1,
  .rg-hero--cover .rg-hero-inner .rg-hero-sub,
  .rg-hero--cover .rg-hero-inner .rg-cta-row,
  .rg-hero--cover .rg-hero-inner .rg-hero-note{max-width:none;}
}

/* Vor dem Foto braucht der Ghost-Button eine kraeftigere Kante,
   sonst verschwindet er auf dem hellen Schleier. */
.rg-hero--cover .rg-btn--ghost{
  background:rgba(255,255,255,.34);
  box-shadow:inset 0 0 0 1px rgba(94,87,76,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.rg-hero--cover .rg-btn--ghost:hover{
  background:rgba(255,255,255,.58);
  box-shadow:inset 0 0 0 1px rgba(94,87,76,.62);
}
html[data-theme="dark"] .rg-hero--cover .rg-btn--ghost{
  background:rgba(22,21,20,.34);
  box-shadow:inset 0 0 0 1px rgba(232,220,198,.4);
}

/* Regiestuhl SVG (Line-Drawing beim Scrollen) */
.rg-chair{position:absolute; right:clamp(-40px,-3vw,0px); bottom:6%; width:min(42vw,440px); z-index:1; opacity:.9;}
.rg-chair path,.rg-chair line{fill:none; stroke:var(--rg-gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; }
.rg-chair.is-in path,.rg-chair.is-in line{animation:rgDraw 2.2s var(--rg-ease) forwards;}
@keyframes rgDraw{to{stroke-dashoffset:0;}}

/* Scroll-Indikator */
.rg-scroll{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--accent-dark);
  font-family:"Jost",sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase;}
.rg-scroll span{width:1px; height:42px; background:linear-gradient(var(--accent-dark),transparent); animation:rgScroll 2.1s ease-in-out infinite;}
@keyframes rgScroll{0%{transform:scaleY(0); transform-origin:top;}45%{transform:scaleY(1); transform-origin:top;}55%{transform:scaleY(1); transform-origin:bottom;}100%{transform:scaleY(0); transform-origin:bottom;}}

/* =====================================================================
   MIRROR / PAIN  (Wiedererkennen)
   ===================================================================== */
.rg-mirror-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,26px); margin-top:44px;}
.rg-mirror{
  background:var(--bg-panel); border:1px solid var(--rg-line); border-radius:18px;
  padding:clamp(22px,3vw,34px); position:relative; transition:transform .5s var(--rg-ease), box-shadow .5s var(--rg-ease), border-color .5s;
}
.rg-mirror:hover{transform:translateY(-4px); box-shadow:var(--rg-shadow-soft); border-color:#bdb5a6;}
.rg-mirror p{margin:0; font-size:1.05rem; line-height:1.6; color:var(--ink);}
.rg-mirror .rg-quote{font-family:"Playfair Display",serif; font-style:italic; color:var(--rg-gold); font-size:1.5rem; line-height:1; display:block; margin-bottom:12px;}

/* =====================================================================
   CONTRAST ACT  (dunkel, „Funktionieren vs. Leben")
   ===================================================================== */
.rg-dark{background:var(--rg-anthracite); color:var(--rg-champagne); position:relative; overflow:clip;}
/* clip statt hidden: schneidet genauso ab, wird aber kein Scroll-Container —
   sonst klebt .rg-day-sticky in dieser Sektion nicht. */
.rg-dark::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 40% at 50% 0%, rgba(169,138,82,.14), transparent 70%);}
.rg-dark .rg-kicker{color:var(--rg-gold);}
.rg-dark .rg-h2{color:var(--rg-champagne);}
.rg-split{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(20px,4vw,60px); align-items:center; margin-top:46px;}
.rg-split-col h3{font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:3px; font-size:12px; margin:0 0 18px; opacity:.6;}
.rg-split-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.rg-split-col li{font-size:1.08rem; line-height:1.5; opacity:.92;}
.rg-split-col--now li{color:#b0a99d;}
.rg-split-col--new li{color:var(--rg-champagne); font-weight:500;}
.rg-split-div{width:1px; align-self:stretch; background:linear-gradient(transparent,rgba(232,220,198,.25),transparent);}
.rg-shift{font-family:"Playfair Display",serif; font-style:italic; font-size:clamp(1.3rem,2.4vw,1.9rem); text-align:center; margin:52px auto 0; max-width:24ch; color:var(--rg-champagne);}

/* =====================================================================
   REFRAME  (Verstanden werden — große ruhige Aussage)
   ===================================================================== */
.rg-reframe{text-align:center;}
.rg-reframe .rg-statement{
  font-family:"Playfair Display",serif; font-weight:500; letter-spacing:-.01em;
  font-size:clamp(1.8rem,4.4vw,3.1rem); line-height:1.2; color:var(--ink);
  max-width:20ch; margin:0 auto;
}
.rg-reframe .rg-statement b{color:var(--rg-gold); font-weight:500;}

/* =====================================================================
   PILLARS  (Was drin ist — „Szenen deiner Regie")
   ===================================================================== */
.rg-pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); margin-top:52px;}
/* Vier Spalten: von der EchtSein-Seite nicht mehr genutzt (dort sind es
   seit den Atemuebungen neun Kacheln, die als 3x3 aufgehen). Bleibt fuer
   den Fall, dass eine Seite wieder acht Kacheln zeigt. */
.rg-pillars--4{grid-template-columns:repeat(4,1fr);}

/* Sprungziele aus dem Menue: der Header klebt oben und wuerde die
   angesprungene Kachel sonst zur Haelfte verdecken. */
.rg-pillar[id], .rg-more li[id]{scroll-margin-top:118px;}

/* Bleibt in der letzten Reihe eine einzelne Kachel uebrig (bei zehn
   Kacheln in drei Spalten), rutscht sie in die Mitte statt allein
   links zu stehen. Greift nur, wenn die letzte Kachel eine Reihe
   allein beginnt. */
.rg-pillars > .rg-pillar:last-child:nth-child(3n+1){grid-column:2;}

/* Zweite Ebene unter den Kacheln: das Uebrige, ohne Feature-Liste zu werden */
.rg-more{margin-top:clamp(38px,4vw,58px);}
.rg-more-lead{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent-dark); margin:0 0 22px; margin-right:-.28em;
}
.rg-more ul{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,1fr); gap:14px clamp(24px,3vw,48px);
  border-top:1px solid var(--rg-line); padding-top:26px;
}
.rg-more li{font-size:.96rem; line-height:1.6; color:var(--text-muted);}
.rg-more li strong{display:block; font-weight:500; color:var(--ink); margin-bottom:2px;}

.rg-pillar{
  background:linear-gradient(180deg,#eae7e0,var(--bg-panel));
  border:1px solid var(--rg-line); border-radius:20px; padding:clamp(24px,2.6vw,32px);
  transition:transform .55s var(--rg-ease), box-shadow .55s var(--rg-ease);
  transform-style:preserve-3d; will-change:transform;
}
.rg-pillar:hover{transform:translateY(-6px); box-shadow:var(--rg-shadow);}
/* display:block noetig: als Inline-Element wuerde der Span width/height ignorieren */
.rg-pillar-ico{display:block; width:44px; height:44px; margin-bottom:20px; color:var(--rg-gold);}
.rg-pillar-ico svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4;}
.rg-pillar h3{font-family:"Playfair Display",serif; font-weight:500; font-size:1.3rem; margin:0 0 10px; color:var(--ink);}
.rg-pillar p{margin:0; font-size:.98rem; line-height:1.6; color:var(--text-muted);}
.rg-pillar-tag{display:inline-block; margin-bottom:14px; font-family:"Jost",sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--accent);}

/* =====================================================================
   STICKY DAY  (Ein Tag in deinem Regiestuhl)
   ===================================================================== */
.rg-day{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(24px,5vw,80px); align-items:start;}
.rg-day-sticky{position:sticky; top:18vh;}
.rg-day-sticky .rg-h2{margin-bottom:16px;}
.rg-day-steps{display:flex; flex-direction:column; gap:clamp(28px,5vw,64px);}
.rg-day-step{border-left:2px solid var(--rg-line); padding:2px 0 2px 28px; position:relative;}
.rg-day-step::before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--rg-gold); box-shadow:0 0 0 5px var(--rg-gold-soft);}
.rg-day-time{font-family:"Jost",sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--rg-gold); display:block; margin-bottom:8px;}
.rg-day-step h3{font-family:"Playfair Display",serif; font-weight:500; font-size:1.35rem; margin:0 0 8px; color:var(--ink);}
.rg-day-step p{margin:0; color:var(--text-muted); line-height:1.65;}

/* =====================================================================
   COUNTERS  (ehrliche Struktur-Zahlen)
   ===================================================================== */
.rg-counters{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,30px); margin-top:12px;}
.rg-count{text-align:center;}
.rg-count b{display:block; font-family:"Playfair Display",serif; font-weight:500; font-size:clamp(2.2rem,5vw,3.4rem); color:var(--ink); line-height:1;}
.rg-count span{display:block; margin-top:10px; font-size:.9rem; letter-spacing:.5px; color:var(--text-muted);}

/* =====================================================================
   MENTOR  (Sarah — E-E-A-T, Autorität, warm)
   ===================================================================== */
.rg-mentor{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:center;}
.rg-mentor-photo{position:relative;}
.rg-mentor-photo img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:22px; box-shadow:var(--rg-shadow); display:block;}
.rg-mentor-photo::after{content:""; position:absolute; inset:0; border-radius:22px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
.rg-mentor h2{margin-bottom:8px;}
.rg-mentor .rg-role{font-family:"Jost",sans-serif; font-size:13px; letter-spacing:1px; color:var(--rg-gold); margin:0 0 22px;}
.rg-mentor p{color:var(--text-muted); line-height:1.75; margin:0 0 16px; font-size:1.05rem;}

/* =====================================================================
   VOICES  (Erfahrungsberichte)
   ===================================================================== */
.rg-voices{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); margin-top:48px;}
.rg-voice{background:var(--bg-panel); border:1px solid var(--rg-line); border-radius:18px; padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:14px;}
.rg-voice .rg-stars{color:var(--rg-gold); letter-spacing:3px; font-size:14px;}
.rg-voice p{margin:0; font-size:1.02rem; line-height:1.6; color:var(--ink);}
.rg-voice cite{font-style:normal; font-size:.9rem; color:var(--text-muted); margin-top:auto;}

/* =====================================================================
   OFFER  (Vorfreude — ein Zugang)
   ===================================================================== */
.rg-offer{max-width:560px; margin:44px auto 0; background:linear-gradient(180deg,#f8f6f2,#e4e0d9);
  border:1px solid var(--rg-line); border-radius:26px; padding:clamp(30px,4vw,48px); text-align:center; box-shadow:var(--rg-shadow);}
.rg-offer-name{font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:3px; font-size:12px; color:var(--accent-dark);}
.rg-offer-price{font-family:"Playfair Display",serif; font-weight:500; font-size:clamp(2.4rem,6vw,3.4rem); color:var(--ink); margin:14px 0 4px;}
.rg-offer-price span{font-family:"Jost",sans-serif; font-size:1rem; color:var(--text-muted); letter-spacing:0;}
.rg-offer-meta{font-size:.9rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rg-gold); margin:0 0 10px;}
.rg-offer-note{font-size:.95rem; color:var(--text-muted); margin:0 0 26px;}
.rg-offer ul{list-style:none; margin:0 0 30px; padding:0; text-align:left; display:flex; flex-direction:column; gap:13px;}
.rg-offer li{display:flex; gap:12px; align-items:flex-start; font-size:1rem; color:var(--ink); line-height:1.5;}
.rg-offer li svg{flex:none; width:20px; height:20px; margin-top:2px; stroke:var(--rg-gold); fill:none; stroke-width:2;}
/* Zweizeilige Leistungspunkte: Titel + erklaerende Unterzeile */
.rg-offer li strong{display:block; font-weight:500;}
.rg-offer li .rg-li-sub{display:block; margin-top:3px; font-size:.9rem; color:var(--text-muted); line-height:1.5;}
.rg-offer-cancel{margin-top:18px; font-size:13px; color:var(--text-muted);}

/* =====================================================================
   FINAL CTA  (Handlungsimpuls)
   ===================================================================== */
.rg-final{background:var(--rg-anthracite); color:var(--rg-champagne); text-align:center; position:relative; overflow:hidden;}
.rg-final::before{content:""; position:absolute; inset:0; background:radial-gradient(50% 60% at 50% 20%, rgba(169,138,82,.20), transparent 70%);}
.rg-final .rg-inner{position:relative; z-index:1;}
.rg-final h2{font-family:"Playfair Display",serif; font-weight:500; font-size:clamp(2rem,5vw,3.4rem); line-height:1.12; color:var(--rg-champagne); margin:0 auto 22px; max-width:18ch;}
.rg-final p{color:#c4bdb1; max-width:44ch; margin:0 auto 34px; line-height:1.7;}

/* =====================================================================
   BUTTONS  (magnetic + hover glow)
   ===================================================================== */
.rg-btn{
  --glow:0 0 0 rgba(169,138,82,0);
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Jost",sans-serif; font-size:15px; letter-spacing:.3px; font-weight:500;
  padding:16px 32px; border-radius:100px; border:0; cursor:pointer; text-decoration:none;
  background:var(--ink-fixed); color:#f0ede7; transition:transform .35s var(--rg-ease), box-shadow .4s var(--rg-ease), background .4s;
  box-shadow:var(--glow); will-change:transform;
}
.rg-btn:hover{background:#232120; box-shadow:0 14px 34px -14px rgba(169,138,82,.7);}
.rg-btn svg{width:16px; height:16px; transition:transform .35s var(--rg-ease);}
.rg-btn:hover svg{transform:translateX(4px);}
.rg-btn--gold{background:var(--rg-gold); color:#1d1a12;}
.rg-btn--gold:hover{background:#b9975c;}
.rg-btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--rg-line);}
.rg-btn--ghost:hover{background:rgba(255,255,255,.4); box-shadow:inset 0 0 0 1px #bdb5a6;}
.rg-dark .rg-btn--ghost,.rg-final .rg-btn--ghost{color:var(--rg-champagne); box-shadow:inset 0 0 0 1px rgba(232,220,198,.35);}
.rg-magnetic{transition:transform .25s var(--rg-ease);}

/* Animated underline link */
.rg-link{position:relative; color:var(--accent-dark); text-decoration:none; font-weight:500;}
.rg-link::after{content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--rg-ease);}
.rg-link:hover::after{transform:scaleX(1); transform-origin:left;}

/* =====================================================================
   FAQ
   ===================================================================== */
.rg-faq{max-width:820px; margin:44px auto 0; display:flex; flex-direction:column; gap:2px;}
.rg-faq details{border-bottom:1px solid var(--rg-line); padding:6px 0;}
.rg-faq summary{cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-family:"Playfair Display",serif; font-size:1.18rem; color:var(--ink);}
.rg-faq summary::-webkit-details-marker{display:none;}
.rg-faq summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--rg-gold); transition:transform .35s var(--rg-ease);}
.rg-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.rg-faq details p{margin:0 0 18px; color:var(--text-muted); line-height:1.7; max-width:70ch;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .rg-hero-photo{position:static; width:100%; right:auto; margin:0 0 30px;}
  .rg-hero-photo ~ .rg-hero-eyebrow,
  .rg-hero-photo ~ h1,
  .rg-hero-photo ~ .rg-hero-sub,
  .rg-hero-photo ~ .rg-cta-row,
  .rg-hero-photo ~ .rg-hero-note{max-width:none;}

  .rg-pillars{grid-template-columns:1fr 1fr;}
  .rg-pillars--4{grid-template-columns:1fr 1fr;}
  .rg-more ul{grid-template-columns:1fr;}
  .rg-day{grid-template-columns:1fr;} .rg-day-sticky{position:static;}
  .rg-mentor{grid-template-columns:1fr;} .rg-mentor-photo{max-width:420px;}
  .rg-voices{grid-template-columns:1fr;}
  .rg-counters{grid-template-columns:1fr 1fr; gap:34px 20px;}
  .rg-chair{display:none;}
}
@media (max-width:600px){
  .rg-mirror-grid{grid-template-columns:1fr;}
  .rg-pillars{grid-template-columns:1fr;}
  .rg-pillars--4{grid-template-columns:1fr;}
  .rg-split{grid-template-columns:1fr; gap:26px;}
  .rg-split-div{display:none;}
  .rg-cta-row{flex-direction:column; align-items:stretch;}
  .rg-btn{justify-content:center;}
}

/* ---- Reduced Motion: alles ruhig ---- */
@media (prefers-reduced-motion:reduce){
  .rg-reveal,.rg-blur,.rg-mask>*,.rg-stagger.is-in>*{opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; transition:none !important;}
  .rg-hero-bg::before,.rg-scroll span{animation:none !important;}
  .rg-chair path,.rg-chair line{stroke-dashoffset:0 !important; animation:none !important;}
}

/* =====================================================================
   MAGAZIN-LAYER (Landingpage „Beziehungen")
   ===================================================================== */

/* Interaktive Bildinszenierung: entsättigt -> warm + Licht + leichtes Zoom.
   Desktop: bei :hover · Mobile/Touch: .is-color (JS, bei 50% Sichtbarkeit). */
.rg-photo{position:relative; overflow:hidden; border-radius:22px; box-shadow:var(--rg-shadow-soft);}
.rg-photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(.2) brightness(.96) contrast(1.02) sepia(.06);
  transform:scale(1.012);
  transition:filter 1.6s var(--rg-ease), transform 2.4s var(--rg-ease);
  will-change:filter, transform;
}
.rg-photo::after{ /* Warmlicht, das beim Erwachen aufscheint */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(60% 60% at 65% 30%, rgba(169,138,82,.20), transparent 70%);
  transition:opacity 1.8s var(--rg-ease);
}
.rg-photo:hover img,.rg-photo.is-color img{filter:saturate(1.02) brightness(1.05) contrast(1); transform:scale(1.035);}
.rg-photo:hover::after,.rg-photo.is-color::after{opacity:1;}
.rg-photo figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 24px 18px;
  color:#f0ede7; font-size:.92rem; letter-spacing:.2px;
  background:linear-gradient(transparent, rgba(24,20,14,.66)); opacity:.92;}

/* Editorial-Split: Bild + Text nebeneinander (abwechselnd) */
.rg-editorial{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;}
.rg-editorial.rg-flip .rg-editorial-media{order:2;}
.rg-editorial-media{aspect-ratio:4/5; }
.rg-editorial h2{margin-bottom:18px;}
.rg-editorial p{color:var(--text-muted); line-height:1.8; font-size:1.06rem; margin:0 0 16px;}
.rg-def{margin:24px 0 0; padding:20px 24px; border-left:2px solid var(--rg-gold); background:rgba(169,138,82,.07); border-radius:0 12px 12px 0;}
.rg-def dt{font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:11px; color:var(--accent-dark); margin-bottom:6px;}
.rg-def dd{margin:0; color:var(--ink); line-height:1.6;}

/* „Unsichtbare Fäden" — SVG-Kreislauf, zeichnet sich */
.rg-thread{max-width:520px; margin:40px auto 0; display:block;}
.rg-thread path,.rg-thread circle,.rg-thread line{fill:none; stroke:var(--rg-gold); stroke-width:1.3; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;}
.rg-thread.is-in path,.rg-thread.is-in circle,.rg-thread.is-in line{animation:rgDraw 2.6s var(--rg-ease) forwards;}
.rg-thread .rg-node{fill:var(--rg-gold); stroke:none; opacity:0;}
.rg-thread.is-in .rg-node{animation:rgFade .6s ease forwards; animation-delay:2.2s;}
@keyframes rgFade{to{opacity:1;}}

/* Grenzen-Linie: zeichnet sich, „Klarheit statt Trennung" */
.rg-boundary{position:relative; margin:40px 0; height:2px; background:linear-gradient(90deg,transparent,var(--rg-gold),transparent);
  transform:scaleX(0); transform-origin:center; transition:transform 1.2s var(--rg-ease);}
.rg-boundary.is-in{transform:scaleX(1);}

/* Wissenschaft: Infokarten-Raster */
.rg-science{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); margin-top:48px;}
.rg-sci{background:var(--bg); border:1px solid var(--rg-line); border-radius:18px; padding:clamp(22px,2.6vw,30px);}
.rg-sci h3{font-family:"Playfair Display",serif; font-weight:500; font-size:1.2rem; margin:0 0 8px; color:var(--ink);}
.rg-sci p{margin:0; font-size:.96rem; line-height:1.6; color:var(--text-muted);}
.rg-sci .rg-sci-no{font-family:"Jost",sans-serif; font-size:12px; letter-spacing:2px; color:var(--rg-gold);}

/* Roadmap / Timeline */
.rg-road{max-width:760px; margin:48px auto 0; position:relative;}
.rg-road::before{content:""; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:var(--rg-line);}
.rg-road-step{position:relative; padding:0 0 34px 52px;}
.rg-road-step::before{content:""; position:absolute; left:8px; top:3px; width:16px; height:16px; border-radius:50%;
  background:var(--bg); border:2px solid var(--rg-gold);}
.rg-road-step:last-child{padding-bottom:0;}
.rg-road-step h3{font-family:"Playfair Display",serif; font-weight:500; font-size:1.3rem; margin:0 0 6px; color:var(--ink);}
.rg-road-step p{margin:0; color:var(--text-muted); line-height:1.65;}
.rg-road-step .rg-road-no{font-family:"Jost",sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--rg-gold); display:block; margin-bottom:4px;}

/* Angebote-Karten (3er) */
.rg-offers{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); margin-top:48px;}
.rg-offer-card{display:flex; flex-direction:column; background:var(--bg-panel); border:1px solid var(--rg-line); border-radius:20px;
  padding:clamp(24px,2.6vw,32px); transition:transform .5s var(--rg-ease), box-shadow .5s var(--rg-ease);}
.rg-offer-card:hover{transform:translateY(-6px); box-shadow:var(--rg-shadow);}
.rg-offer-card .rg-oc-tag{font-family:"Jost",sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:14px;}
.rg-offer-card h3{font-family:"Playfair Display",serif; font-weight:500; font-size:1.4rem; margin:0 0 10px; color:var(--ink);}
.rg-offer-card p{margin:0 0 22px; color:var(--text-muted); line-height:1.6; flex:1;}

/* Glossar */
.rg-glossary{max-width:820px; margin:40px auto 0; display:grid; gap:2px;}
.rg-glossary dt{font-family:"Playfair Display",serif; font-size:1.15rem; color:var(--ink); margin-top:24px;}
.rg-glossary dd{margin:6px 0 0; color:var(--text-muted); line-height:1.7;}

@media (max-width:900px){
  .rg-editorial{grid-template-columns:1fr;} .rg-editorial.rg-flip .rg-editorial-media{order:0;}
  .rg-editorial-media{aspect-ratio:16/10; max-width:560px;}
  .rg-science{grid-template-columns:1fr 1fr;}
  .rg-offers{grid-template-columns:1fr;}
}
@media (max-width:600px){ .rg-science{grid-template-columns:1fr;} }

@media (prefers-reduced-motion:reduce){
  .rg-photo img{filter:saturate(1) brightness(1) contrast(1) !important; transform:none !important; transition:none !important;}
  .rg-photo::after{opacity:1 !important;}
  .rg-thread path,.rg-thread circle,.rg-thread line,.rg-thread .rg-node{stroke-dashoffset:0 !important; opacity:1 !important; animation:none !important;}
  .rg-boundary{transform:scaleX(1) !important;}
}