/* ============================================================
   bew Akademie — DESIGNVARIANTE  „Aufblühen" (hell · editorial)
   ------------------------------------------------------------
   Alternativer Gestaltungsvorschlag. Inhalt unverändert.
   Bewusst hell & weich (Gegenstück zur dunklen Variante):
   die sechs runden Buttons als BLÜTEN-ROSETTE um eine Mitte
   (greift das Blatt-/Sprössling-Logo auf), Pastell-Palette,
   Newsreader-Serif als andere typografische Stimme.
   Greift nur das Standard-Layout [data-layout="konstellation"] um;
   Editorial/Portal bleiben unverändert. Wird als LETZTES
   Stylesheet geladen. Kein JS, keine Markup-Änderung.
   ============================================================ */

/* ---------- 1) PALETTE — hell, pastellig, warm-kühl ausbalanciert ---------- */
:root{
  --sage-50:#F1F7F6; --sage-100:#E3EFEE; --sage-200:#CBE0DE; --sage-300:#ABCCC9;
  --sage-400:#7EA3A9; --sage-500:#5E888D; --sage-600:#46706F; --sage-700:#375658;
  --sage-800:#2A4244; --sage-900:#1E3032;

  --clay-100:#F8E7DF; --clay-200:#F1D0C2; --clay-300:#E5AE99; --clay-400:#D89177;
  --clay-500:#CC7A5E; --clay-600:#B05E43; --clay-700:#8F4831;

  --cream:#FCFAF6; --sand:#F3EFE8; --sand-deep:#E7E0D4; --paper:#FFFFFF;
  --ink:#232B2C; --ink-soft:#50595A; --ink-mute:#7A8384;
  --line:#EAE3D8; --line-soft:#F3EEE5;

  --success:#467C5C; --success-bg:#E6F1EB;
  --info:#46706F;    --info-bg:#E3EFEE;

  --shadow-md:0 12px 30px -16px rgba(35,43,44,.18);
  --shadow-lg:0 28px 64px -28px rgba(35,43,44,.26);
}

/* sanfter, „lichter" Seitenhintergrund (Lichthof) */
#scroll-root{
  background:
    radial-gradient(60% 50% at 50% -8%, rgba(126,163,169,.10), transparent 60%),
    radial-gradient(50% 40% at 92% 4%, rgba(204,122,94,.07), transparent 60%),
    var(--cream);
}

/* ---------- 2) TYPOGRAFIE — editoriale Serif-Stimme für Überschriften ---------- */
.hero-title{
  font-family:var(--font-serif); font-weight:500; letter-spacing:-.01em; line-height:1.08;
}
.hero-title em{font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--clay-600)}
[data-layout="konstellation"] .hero-title em{color:var(--clay-600)}
.section-title, .cta-title, .modal-title{
  font-family:var(--font-serif); font-weight:500; letter-spacing:-.01em;
}

/* ============================================================
   3) RUNDE BUTTONS — große Blüten-Rosette, FÜLLT die Stage-Breite
   ------------------------------------------------------------
   Stage = Inline-Größen-Container (container-type:inline-size), damit
   cqw zuverlässig der Stage-BREITE entspricht. Flacher Sechserstern:
   zwei Petalen auf der Horizontalen berühren linke/rechte Kante.
   D = 34cqw (Durchmesser), R = 33cqw (Mittenradius)
   -> Breite  = 2R + D = 100cqw  (volle Breite)
   -> Höhe    ≈ 2*(0.866R + D/2) = 91.2cqw  -> aspect-ratio 100/91.2
   ============================================================ */
@media (min-width:921px){
  [data-layout="konstellation"] .hero-stage{
    height:auto; position:relative; container-type:inline-size; aspect-ratio:100/91.2;
  }
  [data-layout="konstellation"] .halo{display:none}

  /* weicher Lichthof + zarte bew-Marke als Blütenzentrum */
  [data-layout="konstellation"] .hero-stage::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(closest-side at 50% 50%, rgba(126,163,169,.16), transparent 72%);
  }
  [data-layout="konstellation"] .constellation{position:absolute; inset:0; z-index:1}
  [data-layout="konstellation"] .constellation::after{
    content:""; position:absolute; top:50%; left:50%; z-index:0;
    width:24cqw; height:24cqw; transform:translate(-50%,-50%);
    background:url("../images/bew-mark.svg") center/contain no-repeat; opacity:.42;
  }

  /* große, breitenfüllende Petalen; Platzierung über top/left */
  [data-layout="konstellation"] .pcircle{
    width:34cqw!important; height:34cqw!important;
    transform:translate(-50%,-50%);
    animation:bloomFade .6s var(--ease-out) both; animation-delay:var(--d);
  }
  @keyframes bloomFade{from{opacity:0}to{opacity:1}}

  /* flacher Kranz: 2 Petalen horizontal (Kante↔Kante), je 2 oben/unten */
  [data-layout="konstellation"] .pcircle:nth-child(1){left:33.5%!important; top:calc(50% - 28.6cqw)!important} /* oben-links  */
  [data-layout="konstellation"] .pcircle:nth-child(2){left:66.5%!important; top:calc(50% - 28.6cqw)!important} /* oben-rechts */
  [data-layout="konstellation"] .pcircle:nth-child(3){left:83%!important;   top:50%!important}                /* rechts      */
  [data-layout="konstellation"] .pcircle:nth-child(4){left:66.5%!important; top:calc(50% + 28.6cqw)!important} /* unten-rechts*/
  [data-layout="konstellation"] .pcircle:nth-child(5){left:33.5%!important; top:calc(50% + 28.6cqw)!important} /* unten-links */
  [data-layout="konstellation"] .pcircle:nth-child(6){left:17%!important;   top:50%!important}                /* links       */

  /* aktiv: Position halten + leicht aufblühen */
  [data-layout="konstellation"] .pcircle.is-active{transform:translate(-50%,-50%) scale(1.06); z-index:5}
}

/* ---------- 4) Zarte Petalen-Optik (hell): weichere Verläufe, Glanz, feiner Rand ---------- */
.tone-sage    .circ-img{background:linear-gradient(155deg,var(--sage-200),var(--sage-400))}
.tone-clay    .circ-img{background:linear-gradient(155deg,var(--clay-200),var(--clay-400))}
.tone-neutral .circ-img{background:linear-gradient(155deg,var(--sand-deep),var(--sage-300))}
[data-layout="konstellation"] .flip-face{
  box-shadow:0 16px 36px -18px rgba(35,43,44,.30), inset 0 0 0 1px rgba(255,255,255,.45);
}
[data-layout="konstellation"] .flip-front::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none;
  background:radial-gradient(76% 58% at 32% 16%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
}
/* etwas leichtere Abdunkelung unten, damit die Petalen hell wirken (Label bleibt lesbar) */
[data-layout="konstellation"] .flip-front::after{
  background:linear-gradient(to top, rgba(35,43,44,.42) 0%, rgba(35,43,44,.10) 46%, transparent 72%);
}
[data-layout="konstellation"] .pcircle.is-active .flip-face{
  box-shadow:0 24px 50px -20px rgba(35,43,44,.34), inset 0 0 0 1px rgba(255,255,255,.6),
             0 0 0 7px rgba(126,163,169,.16);
}

/* ---------- 5) Kohärente Body-Verfeinerungen (hell & luftig) ---------- */
.offer-card{border-radius:var(--radius-xl)}
.offer-card:hover{box-shadow:0 18px 42px -22px rgba(35,43,44,.26)}
.step{border-radius:var(--radius-xl)}
/* CTA bleibt hell (sand) — Serif-Titel sorgt für den editorialen Ton */
.cta-inner::after{background:var(--sage-100)}