/* ==========================================================================
   LEICHTIGKEIT - Designtest fuer Start4 (Seite 219)

   Konzept
   -------
   Ein klarer Morgenhimmel. Die Seite ist kuehl, hell und verspielt:
   Weiss mit Himmelblau und Mint, dazu Sand und Rose als Pastellstufen.
   Karten stehen leicht gedreht wie Notizzettel auf einem Brett, Labels
   sind runde Pastell-Pills, die vier Angebote vier verschiedenfarbige
   weiche Karten. Durch den Auftakt schweben Seifenblasen (Three.js,
   Fresnel-Rand): Leichtigkeit als Motiv.

   Bewusst anders als alle bisherigen Testseiten: kuehle statt warmer
   Familie, Collage statt Achse, Verspieltheit statt Strenge.

   Bewegung liegt in start4.js (GSAP + Three.js, lokal) und respektiert
   prefers-reduced-motion; ohne JavaScript ist die Seite vollstaendig
   lesbar und statisch.

   Technik: wird nur auf Seite 219 geladen (novamira-sandbox/
   lumentra-start4.php). Alle Regeln haengen an body.page-id-219 und
   gewinnen so ohne !important gegen den gelieferten Entwurf.
   ========================================================================== */


/* ---------- 1. Farbwerte --------------------------------------------------- */

body.page-id-219{
  --white:#ffffff;
  --air:#f6fbfd;
  --sky:#e8f4fa;
  --mintband:#edf7f2;
  --mint:#e2f3ec;
  --sand:#faf3e6;
  --rosa:#fbeef0;

  --accent:#67cdbb;
  --accent-deep:#0d6b60;
  --on-accent:#0b3b34;

  --ink:#17313b;
  --muted:#54707c;
  --line-c:rgba(23,49,59,.13);

  /* Variablen des gelieferten Entwurfs umbelegen, damit nirgends ein
     warmer Farbrest durchscheint. */
  --ivory:#f6fbfd;
  --paper:#ffffff;
  --cream:#e8f4fa;
  --mist:#e2f3ec;
  --sage:#bfe6da;
  --sage-soft:#edf7f2;
  --lavender:#cfe8f2;
  --rose:#fbeef0;
  --plum:#17313b;
  --plum-deep:#0e222a;
  --gold:#67cdbb;
  --gold-soft:#bfe6da;
  --line:rgba(23,49,59,.13);
  --shadow:0 26px 60px rgba(23,66,80,.13);
  --shadow-soft:0 12px 32px rgba(23,66,80,.09);

  background:var(--air);
  color:var(--ink);
}


/* ---------- 2. Kopf- und Fusszeile ------------------------------------------ */

body.page-id-219 .site-header{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(23,49,59,.08);
}
body.page-id-219 .nav-links a:not(.nav-contact)::after{background:var(--accent-deep)}
body.page-id-219 .nav-contact{
  border-color:rgba(23,49,59,.22);
  background:var(--white);
}
body.page-id-219 .nav-contact:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
body.page-id-219 .menu-button{
  border-color:var(--line-c);
  background:var(--white);
}

body.page-id-219 .site-footer{
  background:linear-gradient(160deg,#12333a,#0b2227);
  border-top:1px solid rgba(103,205,187,.25);
  color:rgba(240,249,251,.74);
}
body.page-id-219 .footer-note{color:rgba(240,249,251,.46)}


/* ---------- 3. Schrift, Pills, Punkte ---------------------------------------- */

body.page-id-219 h1,
body.page-id-219 h2,
body.page-id-219 h3{letter-spacing:-.028em;color:var(--ink)}
body.page-id-219 .lead{color:var(--muted)}

/* Das Label ist eine Pastell-Pill, kein Strich-Label. */
body.page-id-219 .eyebrow{
  display:inline-flex;
  gap:0;
  padding:9px 16px;
  border-radius:999px;
  background:var(--mint);
  color:var(--accent-deep);
  font-size:.66rem;
  letter-spacing:.16em;
}
body.page-id-219 .eyebrow::before{display:none}
body.page-id-219 .dark-section .eyebrow{background:var(--mint);color:var(--accent-deep)}

body.page-id-219 .marke{
  width:8px;
  height:8px;
  transform:none;
  border-radius:50%;
  border:1px solid var(--accent);
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(103,205,187,.18);
}
body.page-id-219 .hero-meta{color:var(--muted);font-size:.98rem}
body.page-id-219 .hero-meta i{
  width:6px;
  height:6px;
  transform:none;
  border-radius:50%;
  border:0;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(103,205,187,.2);
}

/* Buttons: Mint mit tiefgruener Schrift (6.9:1), Pillenform. */
body.page-id-219 .btn-primary,
body.page-id-219 .et_pb_button.btn-primary,
body.page-id-219 .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-219 .et_pb_bg_layout_light.et_pb_button.btn-primary:hover,
body.page-id-219 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-219 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
body.page-id-219 .btn-primary:hover,
body.page-id-219 .et_pb_button.btn-primary:hover{
  box-shadow:0 16px 34px rgba(103,205,187,.4);
}
body.page-id-219 .btn-secondary,
body.page-id-219 .et_pb_button.btn-secondary,
body.page-id-219 .et_pb_bg_layout_light.et_pb_button.btn-secondary{
  border-color:rgba(23,49,59,.22);
  background:var(--white);
  color:var(--ink);
}
body.page-id-219 .et_pb_button.btn-secondary:hover,
body.page-id-219 .et_pb_bg_layout_light.et_pb_button.btn-secondary:hover{
  background:var(--white);
  border-color:rgba(23,49,59,.4);
  color:var(--ink);
}


/* ---------- 4. Auftakt: Himmel, Blasen, Collage ------------------------------
   Links der Text, rechts das Portraet als leicht gedrehte Karte, darunter
   die Notiz als zweiter, gegenlaeufig gedrehter Zettel. Die Blasenbuehne
   (.l4-stage) liegt hinter allem und faengt keine Zeiger ein. */

body.page-id-219 .hero{
  position:relative;
  overflow:hidden;
  min-height:86vh;
  display:flex;
  align-items:center;
  padding:132px 0 108px;
  background:
    linear-gradient(112deg,rgba(249,214,148,.34) 0%,rgba(249,214,148,.13) 22%,rgba(249,214,148,0) 46%),
    radial-gradient(ellipse 1000px 640px at 82% -8%,rgba(232,244,250,.95),transparent 62%),
    radial-gradient(ellipse 800px 560px at 4% 96%,rgba(226,243,236,.9),transparent 60%),
    linear-gradient(180deg,#f2f9fc,var(--air));
}
body.page-id-219 .hero::after{display:none}

/* Der Drache aus der Mediathek (Bronze-Fassung) liegt gross und still im
   Himmel hinter den Karten, wie ein Wasserzeichen im Licht. */
body.page-id-219 .hero::before{
  content:"";
  display:block;
  position:absolute;
  right:-70px;
  top:4%;
  width:min(620px,52vw);
  aspect-ratio:1/1;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:url("/wp-content/uploads/lumentra/Lumentra-Logo-bronze.png") center/contain no-repeat;
  opacity:.13;
  pointer-events:none;
  z-index:0;
}

body.page-id-219 .l4-stage{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
body.page-id-219 .l4-stage canvas{display:block;width:100%;height:100%}

body.page-id-219 .hero .wrap{position:relative;z-index:1}
body.page-id-219 .hero-grid{
  grid-template-columns:1.12fr .88fr;
  gap:56px;
  align-items:center;
}
body.page-id-219 .hero-copy h1{
  font-size:clamp(2.5rem,4.3vw,4.4rem);
  line-height:1.05;
  max-width:18ch;
  margin:26px 0 26px;
}
body.page-id-219 .hero-copy .lead{max-width:44ch;font-size:1.08rem}

/* Divi-Spalten sind Flexspalten, die Buttons stapelten sonst untereinander.
   max-content statt auto, sonst brechen die Beschriftungen um. */
body.page-id-219 .hero-copy{
  display:grid;
  grid-template-columns:max-content max-content 1fr;
  justify-items:start;
  align-items:start;
  padding:0;
}
body.page-id-219 .hero-copy>.et_pb_text{grid-column:1 / -1}
body.page-id-219 .hero-copy>.et_pb_button_module_wrapper{width:auto;margin:0 14px 0 0}

body.page-id-219 .hero-visual{
  min-height:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 0 0;
}
body.page-id-219 .hero-orbit{display:none}
body.page-id-219 .hero-orbit::before,
body.page-id-219 .hero-orbit::after{display:none}

/* Portraet als gedrehte Karte. */
body.page-id-219 .hero-arch{
  position:relative;
  inset:auto;
  width:min(330px,74%);
  aspect-ratio:4/5;
  border-radius:26px;
  overflow:hidden;
  border:8px solid var(--white);
  background:var(--sky);
  box-shadow:var(--shadow);
  transform:rotate(-4deg);
  z-index:1;
}
body.page-id-219 .hero-arch img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:76% 24%;
}
body.page-id-219 .hero-arch::after{display:none}

/* Die Notiz als gegenlaeufig gedrehter Zettel, leicht ueberlappend.
   position:relative, nicht static: sonst wirkt der z-index nicht und die
   Portraetkarte deckt die erste Zeile der Notiz ab. */
body.page-id-219 .hero-note{
  position:relative;
  left:auto;
  bottom:auto;
  width:min(300px,86%);
  margin:-34px 0 0 12%;
  padding:20px 24px;
  background:var(--white);
  backdrop-filter:none;
  border:1px solid rgba(23,49,59,.1);
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  transform:rotate(2.5deg);
  text-align:left;
  z-index:2;
}
body.page-id-219 .hero-note strong{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:500;
  font-size:1.12rem;
  line-height:1.4;
  color:var(--ink);
}
body.page-id-219 .hero-note small{
  color:var(--accent-deep);
  margin-top:9px;
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}


/* ---------- 5. Die Reise: Karte mit Pastellversatz ---------------------------
   Das Foto liegt als Karte auf einem versetzten Mintblock, wie zwei Zettel
   uebereinander. */

body.page-id-219 .soul-intro{
  padding:124px 0;
  background:var(--white);
}
body.page-id-219 .soul-intro::before{display:none}
body.page-id-219 .soul-intro-grid{
  grid-template-columns:1fr 1fr;
  gap:84px;
  align-items:center;
}
body.page-id-219 .ritual-photo{min-height:0;position:relative}
body.page-id-219 .ritual-photo::after{
  display:block;
  content:"";
  position:absolute;
  left:-20px;
  top:22px;
  right:auto;
  bottom:auto;
  width:100%;
  height:100%;
  border:0;
  border-radius:30px;
  background:var(--mint);
  backdrop-filter:none;
  box-shadow:none;
  transform:rotate(-2.2deg);
  pointer-events:none;
  z-index:0;
}
body.page-id-219 .ritual-photo-main{
  position:relative;
  height:min(540px,66vh);
  margin:0;
  border-radius:26px;
  overflow:hidden;
  border:8px solid var(--white);
  box-shadow:var(--shadow);
  z-index:1;
}
body.page-id-219 .ritual-photo-main .et_pb_image_wrap{display:block;width:100%;height:100%}
body.page-id-219 .ritual-photo-main img{
  width:100%;
  height:114%;
  margin-top:-7%;
  object-fit:cover;
  object-position:center 47%;
}
body.page-id-219 .soul-copy p{color:var(--muted)}
body.page-id-219 .ritual-caption{
  margin:28px 0 0;
  color:var(--accent-deep);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.2rem,1.6vw,1.5rem);
  line-height:1.4;
}


/* ---------- 6. Wiedererkennen: weiche Chips auf Mint ------------------------- */

body.page-id-219 .recognition-visual{
  padding:124px 0;
  background:
    radial-gradient(ellipse 900px 560px at 94% 6%,rgba(255,255,255,.9),transparent 58%),
    var(--mintband);
}
body.page-id-219 .recognition-visual::before,
body.page-id-219 .recognition-visual::after{display:none}
body.page-id-219 .signs-grid{gap:48px}
body.page-id-219 .sticky-intro{
  max-width:780px;
  justify-self:center;
  text-align:center;
}
body.page-id-219 .sticky-intro .et_pb_text,
body.page-id-219 .sticky-intro .et_pb_text_inner,
body.page-id-219 .sticky-intro h2,
body.page-id-219 .sticky-intro p{text-align:center}
body.page-id-219 .sticky-intro h2{margin:20px auto 20px;max-width:24ch}
body.page-id-219 .sticky-intro p{color:var(--muted)}

body.page-id-219 .sign-list{
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;
  gap:14px 14px;
  border:0;
}
body.page-id-219 .sign-item{
  min-height:0;
  height:100%;
  padding:20px 24px;
  gap:14px;
  align-items:flex-start;
  background:var(--white);
  backdrop-filter:none;
  border:1px solid rgba(23,49,59,.08);
  border-radius:18px;
  box-shadow:0 6px 18px rgba(23,66,80,.06);
}
body.page-id-219 .sign-item p{font-size:.99rem;color:var(--ink)}
body.page-id-219 .sign-item .marke{margin:8px 0 0}


/* ---------- 7. Begleitung: vier Pastellkarten ---------------------------------
   Der Klassenname sagt dark-section, die Flaeche bleibt weiss. Jede der
   vier Karten traegt eine eigene Pastellstufe: Himmel, Mint, Sand, Rose. */

body.page-id-219 .dark-section{
  color:var(--ink);
  background:var(--white);
}
body.page-id-219 .dark-section::before,
body.page-id-219 .dark-section::after{display:none}
body.page-id-219 .dark-section .section-heading p{color:var(--muted)}

body.page-id-219 .section-heading{
  display:block;
  text-align:center;
  margin-bottom:52px;
}
body.page-id-219 .section-heading .et_pb_text,
body.page-id-219 .section-heading .et_pb_text_inner,
body.page-id-219 .section-heading h2,
body.page-id-219 .section-heading p{text-align:center}
body.page-id-219 .section-heading h2{margin:20px auto 20px;max-width:22ch}
body.page-id-219 .section-heading p{max-width:620px;margin-inline:auto}

body.page-id-219 .service-list{
  grid-template-columns:1fr 1fr;
  gap:22px;
  border:0;
}
body.page-id-219 .service-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:0;
  height:100%;
  padding:36px 36px 30px;
  background:var(--sky);
  backdrop-filter:none;
  border:0;
  border-radius:28px;
  box-shadow:none;
  overflow:visible;
  transition:transform .28s ease,box-shadow .28s ease;
}
body.page-id-219 .service-list .et_pb_code:nth-of-type(2) .service-row{background:var(--mint)}
body.page-id-219 .service-list .et_pb_code:nth-of-type(3) .service-row{background:var(--sand)}
body.page-id-219 .service-list .et_pb_code:nth-of-type(4) .service-row{background:var(--rosa)}
body.page-id-219 .service-row::before{display:none}
body.page-id-219 .service-row:hover{
  transform:translateY(-6px) rotate(-.4deg);
  border-color:transparent;
  box-shadow:0 22px 46px rgba(23,66,80,.14);
}
body.page-id-219 .service-row .marke{margin:0 0 18px}
body.page-id-219 .service-row h3{
  margin:0 0 12px;
  font-size:clamp(1.35rem,1.9vw,1.8rem);
}
body.page-id-219 .service-row p{margin:0;color:var(--muted)}
body.page-id-219 .service-row .arrow{
  margin-top:auto;
  padding:0;
  margin-top:22px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--white);
  font-size:1.15rem;
  color:var(--accent-deep);
  box-shadow:0 4px 12px rgba(23,66,80,.1);
  transition:transform .24s ease;
}
body.page-id-219 .service-row:hover .arrow{transform:translateX(6px)}


/* ---------- 8. Zitat: reine Typografie im Himmel ------------------------------
   Kein Foto: das Zitat steht als grosser typografischer Moment auf einem
   weichen Himmelsverlauf, dahinter ein stiller Blasenring. */

body.page-id-219 .quote-panel{
  min-height:520px;
  place-items:center;
  text-align:center;
  color:var(--ink);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 520px at 50% 118%,rgba(226,243,236,.9),transparent 64%),
    linear-gradient(180deg,var(--white),var(--sky));
}
body.page-id-219 .quote-panel::before{
  content:"";
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:440px;
  height:440px;
  border-radius:50%;
  border:1.5px solid rgba(103,205,187,.4);
  box-shadow:0 0 0 44px rgba(103,205,187,.07),0 0 0 100px rgba(103,205,187,.04);
}
/* In der Mitte des Rings liegt der Drache, kaum sichtbar, wie eine
   Praegung im Papier. */
body.page-id-219 .quote-panel::after{
  content:"";
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:330px;
  aspect-ratio:1/1;
  background:url("/wp-content/uploads/lumentra/Lumentra-Logo-bronze.png") center/contain no-repeat;
  opacity:.1;
  pointer-events:none;
}
/* Divi haengt an jedes blockquote einen Balken in seinem Akzentblau. */
body.page-id-219 .quote-panel blockquote{
  position:relative;
  z-index:1;
  border:0;
  color:var(--ink);
  width:auto;
  max-width:24ch;
  margin-inline:auto;
  padding:0 22px;
  font-size:clamp(1.9rem,3.4vw,3.4rem);
  line-height:1.2;
  letter-spacing:-.028em;
}


/* ---------- 9. Abschluss --------------------------------------------------------- */

body.page-id-219 .cta-section{
  padding:124px 0 140px;
  background:var(--air);
}
body.page-id-219 .cta-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  padding:0;
  max-width:760px;
  margin-inline:auto;
  color:var(--ink);
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  text-align:center;
}
body.page-id-219 .cta-box .et_pb_text,
body.page-id-219 .cta-box .et_pb_text_inner,
body.page-id-219 .cta-box h2,
body.page-id-219 .cta-box p{text-align:center}
body.page-id-219 .cta-box h2{
  font-size:clamp(2.1rem,3.3vw,3.3rem);
  max-width:24ch;
  margin-inline:auto;
}
body.page-id-219 .cta-box p{margin:18px auto 0;max-width:54ch;color:var(--muted)}
body.page-id-219 .cta-action{display:flex;justify-content:center;margin:0}


/* ---------- 10. Kleine Schirme --------------------------------------------------- */

@media(max-width:960px){
  body.page-id-219 .hero{min-height:0;padding:118px 0 88px}
  body.page-id-219 .hero-grid{grid-template-columns:1fr;gap:56px}
  body.page-id-219 .soul-intro,
  body.page-id-219 .recognition-visual{padding:96px 0}
  body.page-id-219 .soul-intro-grid{grid-template-columns:1fr;gap:52px}
  body.page-id-219 .ritual-photo-main{height:min(460px,56vh)}
  body.page-id-219 .service-list{grid-template-columns:1fr}
}

@media(max-width:680px){
  body.page-id-219 .hero{padding:100px 0 72px}
  body.page-id-219 .hero::before{width:min(420px,86vw);right:-60px;top:2%}
  body.page-id-219 .quote-panel::after{width:240px}
  body.page-id-219 .hero-copy{grid-template-columns:1fr}
  body.page-id-219 .hero-copy>.et_pb_button_module_wrapper{margin:0 0 12px 0}
  body.page-id-219 .hero-arch{width:min(250px,78%)}
  body.page-id-219 .hero-note{margin:-26px 0 0 8%}
  body.page-id-219 .soul-intro,
  body.page-id-219 .recognition-visual{padding:78px 0}
  body.page-id-219 .ritual-photo-main{height:min(380px,52vh)}
  body.page-id-219 .ritual-photo::after{left:-10px;top:14px}
  body.page-id-219 .sign-list{grid-template-columns:1fr;gap:12px}
  body.page-id-219 .service-row{padding:28px 26px 24px}
  body.page-id-219 .quote-panel{min-height:420px}
  body.page-id-219 .quote-panel::before{width:300px;height:300px}
  body.page-id-219 .cta-section{padding:80px 0 92px}
}


/* ---------- 11. Bewegung ----------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
  body.page-id-219 .service-row,
  body.page-id-219 .service-row .arrow,
  body.page-id-219 .btn,
  body.page-id-219 .et_pb_button{transition:none}
  body.page-id-219 .service-row:hover,
  body.page-id-219 .service-row:hover .arrow,
  body.page-id-219 .btn-primary:hover,
  body.page-id-219 .et_pb_button.btn-primary:hover{transform:none}
}