/* ============================================================
   bew Akademie — DESIGNVARIANTE  „Twilight Arc"
   ------------------------------------------------------------
   Alternativer Gestaltungsvorschlag. Inhalt unverändert.
   Idee der runden Buttons bleibt — neu angeordnet als leuchtender
   Bogen (Dome) auf einer dunklen Teal-Bühne; heller, klarer Body;
   dunkle CTA als Gegenstück. Greift nur das Standard-Layout
   [data-layout="konstellation"] um; Editorial/Portal bleiben wie sie sind.
   Wird als LETZTES Stylesheet geladen -> überschreibt per Kaskade.
   Kein JS, keine Markup-Änderung.
   ============================================================ */

/* ---------- 1) NEUE PALETTE (klarer, kühler, ein dominanter Teal-Ton + Sienna-Akzent) ---------- */
:root{
  /* Brand-Teal — tieferes, kühleres Spektrum (400 = Logo, unverändert) */
  --sage-50:#EEF4F4; --sage-100:#DBE9E9; --sage-200:#BAD4D5; --sage-300:#93B9BB;
  --sage-400:#7EA3A9; --sage-500:#557E84; --sage-600:#3C656B; --sage-700:#2A4D52;
  --sage-800:#1A383D; --sage-900:#0F2A2E;

  /* Akzent — gereiftes Sienna/Clay */
  --clay-100:#F6E1D6; --clay-200:#ECC2AC; --clay-300:#DD9B77; --clay-400:#CE7E54;
  --clay-500:#C06A3F; --clay-600:#A9522E; --clay-700:#8A4124;

  /* Neutrals — klares, leicht kühles Papier statt warmem Cream */
  --cream:#FAFAF7; --sand:#F0F0EA; --sand-deep:#E3E3DA; --paper:#FFFFFF;
  --ink:#172526; --ink-soft:#46585A; --ink-mute:#6C7C7E;
  --line:#E4E3D9; --line-soft:#F0EFE8;

  --success:#3F7C5C; --success-bg:#E4F1E9;
  --info:#3C656B;   --info-bg:#DBE9E9;

  /* etwas weichere Bühnen-Schatten */
  --shadow-md:0 12px 30px -14px rgba(15,42,46,.20);
  --shadow-lg:0 30px 70px -26px rgba(15,42,46,.30);
}

/* ============================================================
   2) HERO als dunkle Teal-Bühne (nur Standard-Layout)
   ============================================================ */
[data-layout="konstellation"] .hero{
  display:block; max-width:1180px; margin:18px auto 0;
  padding:64px clamp(24px,5vw,72px) 72px; min-height:0; text-align:center;
  position:relative; overflow:hidden; color:#fff;
  border-radius:36px;
  background:
    radial-gradient(130% 150% at 50% -25%, var(--sage-600) 0%, var(--sage-800) 52%, var(--sage-900) 100%);
  box-shadow:0 46px 100px -44px rgba(15,42,46,.62), inset 0 0 0 1px rgba(255,255,255,.05);
}
/* atmosphärische Lichtschleier */
[data-layout="konstellation"] .hero::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(40% 36% at 16% 14%, rgba(126,163,169,.30), transparent 70%),
    radial-gradient(34% 30% at 88% 0%, rgba(222,155,119,.18), transparent 70%);
}
[data-layout="konstellation"] .hero > *{position:relative; z-index:1}

[data-layout="konstellation"] .hero-copy{max-width:760px; margin:0 auto; display:block}
[data-layout="konstellation"] .hero .eyebrow{justify-content:center; color:rgba(255,255,255,.78)}
[data-layout="konstellation"] .hero .eyebrow .sq{background:var(--clay-400)}
[data-layout="konstellation"] .hero .hero-title{
  color:#fff; font-size:clamp(2.9rem,5vw,4.7rem); margin:0 auto 24px; max-width:14ch;
}
/* editorialer Serif-Akzent auf dem hervorgehobenen Wort */
[data-layout="konstellation"] .hero .hero-title em{
  font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--clay-300);
}
[data-layout="konstellation"] .hero .hero-lead{
  color:rgba(255,255,255,.84); max-width:560px; margin:0 auto 32px;
}
[data-layout="konstellation"] .hero .hero-actions{justify-content:center}
[data-layout="konstellation"] .hero .btn-text{color:rgba(255,255,255,.92)}
[data-layout="konstellation"] .hero .btn-text:hover{color:#fff}
[data-layout="konstellation"] .hero .btn-primary{box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
[data-layout="konstellation"] .hero .hero-reassure{justify-content:center; color:rgba(255,255,255,.72)}
[data-layout="konstellation"] .hero .hero-reassure span:first-child{color:var(--sage-200)}

/* ============================================================
   3) RUNDE BUTTONS — neu angeordnet: leuchtender Bogen (Dome)
   ============================================================ */
@media (min-width:921px){
  [data-layout="konstellation"] .hero-stage{height:auto; min-height:0; margin-top:46px; position:relative}
  [data-layout="konstellation"] .constellation{
    position:relative; inset:auto; height:auto; z-index:1;
    display:flex; justify-content:center; align-items:flex-end;
    gap:clamp(8px,1.3vw,22px);
  }
  [data-layout="konstellation"] .pcircle{
    position:relative!important; top:auto!important; left:auto!important;
    flex:0 0 auto; animation-delay:var(--d);
  }
  /* Größen + Höhenstaffelung -> Bogen */
  [data-layout="konstellation"] .pcircle:nth-child(1){width:156px!important;height:156px!important;transform:translateY(42px)}
  [data-layout="konstellation"] .pcircle:nth-child(2){width:178px!important;height:178px!important;transform:translateY(16px)}
  [data-layout="konstellation"] .pcircle:nth-child(3){width:186px!important;height:186px!important;transform:translateY(-10px)}
  [data-layout="konstellation"] .pcircle:nth-child(4){width:186px!important;height:186px!important;transform:translateY(-10px)}
  [data-layout="konstellation"] .pcircle:nth-child(5){width:178px!important;height:178px!important;transform:translateY(16px)}
  [data-layout="konstellation"] .pcircle:nth-child(6){width:156px!important;height:156px!important;transform:translateY(42px)}
  /* aktiv-Zustand: Bogenposition + leichte Vergrößerung beibehalten */
  [data-layout="konstellation"] .pcircle:nth-child(1).is-active{transform:translateY(44px) scale(1.06)}
  [data-layout="konstellation"] .pcircle:nth-child(2).is-active{transform:translateY(16px) scale(1.06)}
  [data-layout="konstellation"] .pcircle:nth-child(3).is-active{transform:translateY(-10px) scale(1.06)}
  [data-layout="konstellation"] .pcircle:nth-child(4).is-active{transform:translateY(-4px) scale(1.06)}
  [data-layout="konstellation"] .pcircle:nth-child(5).is-active{transform:translateY(18px) scale(1.06)}
  [data-layout="konstellation"] .pcircle:nth-child(6).is-active{transform:translateY(46px) scale(1.06)}
}

/* Orb-Optik auf Dunkel: Glanzlicht, feiner Ring, weicher Halo */
[data-layout="konstellation"] .flip-face{
  box-shadow:0 22px 46px -18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.16);
}
[data-layout="konstellation"] .flip-front::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none;
  background:radial-gradient(78% 60% at 30% 16%, rgba(255,255,255,.42), rgba(255,255,255,0) 60%);
}
[data-layout="konstellation"] .pcircle.is-active .flip-face{
  box-shadow:0 30px 60px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.28),
             0 0 0 6px rgba(126,163,169,.18);
}

/* ============================================================
   4) CTA als dunkles Gegenstück zum Hero (Klammer)
   ============================================================ */
.cta-inner{
  color:#fff; overflow:hidden;
  background:radial-gradient(120% 160% at 50% -30%, var(--sage-600) 0%, var(--sage-800) 60%, var(--sage-900) 100%);
  box-shadow:0 40px 90px -42px rgba(15,42,46,.55);
}
.cta-inner::after{background:rgba(126,163,169,.22)}
.cta-title{color:#fff}
.cta-lead{color:rgba(255,255,255,.84)}
.cta-inner .btn-ghost{color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.cta-inner .btn-ghost:hover{background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}

/* ============================================================
   5) Kleine, kohärente Body-Verfeinerungen
   ============================================================ */
/* Eyebrow als reduzierte, editoriale Marke */
.eyebrow{color:var(--sage-600)}
/* Angebots-/Schritt-Karten etwas luftiger umrandet */
.offer-card, .step{border-color:var(--line)}
.offer-card:hover{box-shadow:0 18px 40px -20px rgba(15,42,46,.28)}
/* Footer minimal kühler abgestimmt (bleibt Marken-Teal) */
.footer{background:var(--sage-800)}

/* Sticky-Header: solide helle Fläche — am Seitenanfang nahtlos zum Cream,
   beim Scrollen über die dunkle Hero-Card bleibt der Text lesbar. */
.site-header{background:var(--cream)}
.site-header.is-scrolled{background:rgba(250,250,247,.9); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line)}