/* ============================================================
   bew Akademie — FARBSCHEMA „Sky Breeze“ (helles Himmelblau + sanfte Koralle)
   ------------------------------------------------------------
   Blau-Familie, hell & luftig. Vollwertiger Ersatz fuer
   variant-bloom.css: identisches Layout/Typografie/Konstellation,
   nur Farbwerte neu. In assets/css/variant-bloom.css kopieren.
   ============================================================ */

/* ---------- 1) PALETTE ---------- */
:root{
  --sage-50:#EEF7FF; --sage-100:#D6ECFF; --sage-200:#B0DBFF; --sage-300:#79C2FB;
  --sage-400:#38A6F2; --sage-500:#1E8BDD; --sage-600:#1670BC; --sage-700:#114F87;
  --sage-800:#0E3E68; --sage-900:#0B2D4B;

  --clay-100:#FFE9E2; --clay-200:#FFD0C2; --clay-300:#FFA98F; --clay-400:#FF8568;
  --clay-500:#FB6647; --clay-600:#EA4324; --clay-700:#C3360F;

  --cream:#F7FBFF; --sand:#EAF4FE; --sand-deep:#D9EBFB; --paper:#FFFFFF;
  --ink:#19293A; --ink-soft:#475868; --ink-mute:#6E7E8E;
  --line:#DCE9F5; --line-soft:#EDF4FC;

  --success:#1C7E66; --success-bg:#D9F1EA;
  --warning:#C2761A; --warning-bg:#FBEED9;
  --error:#DB3B1A;   --error-bg:#FBE3DD;
  --info:#1670BC;    --info-bg:#DBEAFA;

  --shadow-md:0 12px 30px -16px rgba(25,41,58,.16);
  --shadow-lg:0 28px 64px -28px rgba(25,41,58,.24);
  --shadow-focus:0 0 0 3px rgba(234,67,36,.32);
}

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

/* ---------- 2) TYPOGRAFIE — editoriale Serif-Stimme für Überschriften ---------- */
.hero-title{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; line-height:1.08;
}
.hero-title em{font-family:var(--font-display); 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-display); 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;
  }
  [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(56,166,242,.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)}

/* ---------- 6) Abgleich fest verdrahteter Farbwerte ---------- */
.site-header.is-scrolled{background:rgba(247,251,255,.82)}
.ph-tag{background:rgba(247,251,255,.9)}