/* ==========================================================================
   DER WEG INS LICHT - Designtest fuer Start3 (Seite 215)

   Konzept
   -------
   Die Seite beginnt in der Nacht und wird mit jedem Abschnitt heller:

     1. Auftakt        Nacht           #141110   Three.js-Lichtfunken
     2. Die Reise      Daemmerung      #1e1812
     3. Wiedererkennen Morgen          #f6efe1
     4. Begleitung     Tag             #fbf7ef
     5. Zitat          goldene Stunde  Sonnenbild
     6. Abschluss      volles Licht    #fffdf8 mit Goldglut

   Scrollen ist die Bewegung zum Licht. Genau eine Akzentfamilie (Gold),
   Georgia als Display, Inter als Text, beide bereits lokal vorhanden.
   Bewegung liegt in start3.js (GSAP + Three.js, lokal ausgeliefert) und
   respektiert prefers-reduced-motion; ohne JavaScript ist die Seite
   vollstaendig lesbar und statisch.

   Technik: wird nur auf Seite 215 geladen (novamira-sandbox/
   lumentra-start3.php). Alle Regeln haengen an body.page-id-215, dadurch
   gewinnen sie ohne !important gegen den gelieferten Entwurf. Inhalt und
   echte Startseite bleiben unberuehrt.
   ========================================================================== */


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

body.page-id-215{
  --night:#141110;
  --night2:#171310;
  --dusk:#1e1812;
  --dusk2:#251d14;
  --dawn:#f6efe1;
  --day:#fbf7ef;
  --paper:#fffdf8;

  --gold:#d99b3e;
  --gold-deep:#8a5f1c;
  --gold-soft:#ecd9ae;
  --on-gold:#2a1c08;

  --ink:#2b241b;
  --muted:#6e6355;
  --w:#f4eee3;
  --w-mut:rgba(244,238,227,.74);
  --line-l:rgba(43,36,27,.16);
  --line-d:rgba(244,238,227,.16);

  /* Variablen des gelieferten Entwurfs umbelegen, damit keine Regel des
     Entwurfsblatts eine fremde Farbe durchscheinen laesst. */
  --ivory:#fbf7ef;
  --paper-alt:#fffdf8;
  --cream:#f6efe1;
  --mist:#f0e6d2;
  --sage:#e6d3a8;
  --sage-soft:#f4ecdb;
  --lavender:#e6d3a8;
  --rose:#eedfc2;
  --plum:#2b241b;
  --plum-deep:#1a1510;
  --line:rgba(43,36,27,.16);
  --shadow:0 34px 80px rgba(30,22,10,.16);
  --shadow-soft:0 16px 40px rgba(30,22,10,.10);

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


/* ---------- 2. Kopfzeile: dunkles Glas, wird im Hellen umgeschaltet --------
   start3.js setzt .is-light, sobald der Morgen-Abschnitt erreicht ist.
   Ohne JavaScript bleibt das dunkle Glas stehen, weisse Schrift auf
   halbdunklem Grund bleibt auch ueber hellen Flaechen lesbar. */

body.page-id-215 .site-header{
  background:rgba(20,17,16,.58);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(244,238,227,.10);
  transition:background .45s ease,border-color .45s ease;
}
body.page-id-215 .site-header .brand strong{color:var(--w)}
body.page-id-215 .site-header .brand span{color:rgba(244,238,227,.55)}
body.page-id-215 .site-header .nav-links a{color:var(--w)}
body.page-id-215 .site-header .nav-links a:not(.nav-contact)::after{background:var(--gold)}
body.page-id-215 .site-header .nav-contact{
  border-color:rgba(244,238,227,.38);
  background:transparent;
  color:var(--w);
}
body.page-id-215 .site-header .nav-contact:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--on-gold);
}
body.page-id-215 .site-header .menu-button{
  border-color:rgba(244,238,227,.3);
  background:rgba(244,238,227,.08);
}
body.page-id-215 .site-header .menu-button span,
body.page-id-215 .site-header .menu-button span::before,
body.page-id-215 .site-header .menu-button span::after{background:var(--w)}

body.page-id-215 .site-header.is-light{
  background:rgba(251,247,239,.90);
  border-bottom-color:rgba(43,36,27,.10);
}
body.page-id-215 .site-header.is-light .brand strong{color:var(--ink)}
body.page-id-215 .site-header.is-light .brand span{color:var(--muted)}
body.page-id-215 .site-header.is-light .nav-links a{color:var(--ink)}
body.page-id-215 .site-header.is-light .nav-contact{
  border-color:rgba(43,36,27,.32);
  color:var(--ink);
}
body.page-id-215 .site-header.is-light .nav-contact:hover{color:var(--on-gold)}
body.page-id-215 .site-header.is-light .menu-button span,
body.page-id-215 .site-header.is-light .menu-button span::before,
body.page-id-215 .site-header.is-light .menu-button span::after{background:var(--ink)}


/* ---------- 3. Schrift und wiederkehrende Teile ---------------------------- */

body.page-id-215 h1,
body.page-id-215 h2,
body.page-id-215 h3{letter-spacing:-.035em}

body.page-id-215 .eyebrow{color:var(--gold-deep)}
body.page-id-215 .eyebrow::before{background:var(--gold)}

/* Der Lichtpunkt: ein goldener Funke als Aufzaehlungszeichen. */
body.page-id-215 .marke{
  width:8px;
  height:8px;
  transform:none;
  border-radius:50%;
  border:1px solid var(--gold);
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(217,155,62,.15);
}
body.page-id-215 .hero-meta i{
  width:6px;
  height:6px;
  transform:none;
  border-radius:50%;
  border:0;
  background:var(--gold);
  box-shadow:0 0 8px rgba(217,155,62,.8);
}

/* Buttons: Gold mit dunkler Schrift (7.2:1). Weiss auf Gold waere 2:1. */
body.page-id-215 .btn-primary,
body.page-id-215 .et_pb_button.btn-primary,
body.page-id-215 .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-215 .et_pb_bg_layout_light.et_pb_button.btn-primary:hover,
body.page-id-215 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-215 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--on-gold);
}
body.page-id-215 .btn-primary:hover,
body.page-id-215 .et_pb_button.btn-primary:hover{
  box-shadow:0 16px 34px rgba(217,155,62,.35);
}
body.page-id-215 .btn-secondary,
body.page-id-215 .et_pb_button.btn-secondary,
body.page-id-215 .et_pb_bg_layout_light.et_pb_button.btn-secondary{
  border-color:rgba(244,238,227,.45);
  background:transparent;
  color:var(--w);
}
body.page-id-215 .et_pb_button.btn-secondary:hover,
body.page-id-215 .et_pb_bg_layout_light.et_pb_button.btn-secondary:hover{
  background:rgba(244,238,227,.12);
  border-color:var(--w);
  color:var(--w);
}


/* ---------- 4. Nacht: der Auftakt mit den Lichtfunken ----------------------
   start3.js haengt die Three.js-Buehne (.l3-stage) als erstes Kind in die
   Sektion. Sie liegt hinter dem Inhalt und faengt keine Zeiger ein. */

body.page-id-215 .hero{
  position:relative;
  overflow:hidden;
  min-height:92vh;
  display:flex;
  align-items:center;
  padding:150px 0 110px;
  color:var(--w);
  background:
    radial-gradient(ellipse 980px 640px at 76% 26%,rgba(217,155,62,.15),transparent 62%),
    radial-gradient(ellipse 760px 700px at 8% 88%,rgba(122,86,40,.13),transparent 62%),
    linear-gradient(180deg,var(--night2),var(--night));
}
body.page-id-215 .hero::after{display:none}

/* Der Drache aus der Mediathek (Bronze-Fassung) steht leicht im Nachthimmel
   hinter dem Portraet, wie ein Sternbild. Die Lichtfunken (.l3-stage) liegen
   im DOM nach dem Pseudoelement und treiben davor vorbei. */
body.page-id-215 .hero::before{
  content:"";
  display:block;
  position:absolute;
  right:-60px;
  top:6%;
  width:min(600px,50vw);
  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:.16;
  pointer-events:none;
  z-index:0;
}

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

body.page-id-215 .hero .wrap{position:relative;z-index:1}
body.page-id-215 .hero-grid{
  grid-template-columns:1.08fr .92fr;
  gap:64px;
  align-items:center;
}

body.page-id-215 .hero .eyebrow{color:var(--gold-soft)}
body.page-id-215 .hero .eyebrow::before{background:var(--gold)}
body.page-id-215 .hero-copy h1{
  color:var(--w);
  font-size:clamp(2.4rem,4vw,4.2rem);
  line-height:1.08;
  max-width:19ch;
  margin:24px 0 28px;
}
body.page-id-215 .hero-copy .lead{
  color:var(--w-mut);
  max-width:46ch;
  font-size:1.07rem;
}
body.page-id-215 .hero-meta{
  color:var(--w-mut);
  font-size:.95rem;
  margin:-6px 0 34px;
}

/* Divi-Spalten sind Flexspalten, die Buttons stapelten sonst untereinander
   auf voller Breite. Das Raster stellt sie nebeneinander, max-content statt
   auto, damit die fr-Spalte ihnen nicht den Platz stiehlt. */
body.page-id-215 .hero-copy{
  display:grid;
  grid-template-columns:max-content max-content 1fr;
  justify-items:start;
  align-items:start;
  padding:0;
}
body.page-id-215 .hero-copy>.et_pb_text{grid-column:1 / -1}
body.page-id-215 .hero-copy>.et_pb_button_module_wrapper{width:auto;margin:0 14px 0 0}

/* Rechts: das Portraet als goldgerandeter Lichtkreis, darunter die Zeile
   als Signatur. Der leere Orbit-Container des Entwurfs wird zur Glut
   hinter dem Kreis. */
body.page-id-215 .hero-visual{
  min-height:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;
}
body.page-id-215 .hero-orbit{
  position:absolute;
  left:50%;
  top:38%;
  transform:translate(-50%,-50%);
  width:min(520px,110%);
  aspect-ratio:1/1;
  height:auto;
  border:0;
  border-radius:50%;
  z-index:0;
  background:radial-gradient(circle,rgba(217,155,62,.28),rgba(217,155,62,0) 68%);
  filter:blur(2px);
}
body.page-id-215 .hero-orbit::before,
body.page-id-215 .hero-orbit::after{display:none}
body.page-id-215 .hero-arch{
  position:relative;
  inset:auto;
  width:min(400px,82%);
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(236,217,174,.5);
  background:var(--dusk2);
  box-shadow:
    0 0 0 1px rgba(217,155,62,.25),
    0 0 90px rgba(217,155,62,.22),
    0 40px 90px rgba(0,0,0,.5);
  z-index:1;
}
body.page-id-215 .hero-arch img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:76% 26%;
}
body.page-id-215 .hero-arch::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(200deg,rgba(20,17,16,0) 55%,rgba(20,17,16,.38));
}
body.page-id-215 .hero-note{
  position:static;
  width:min(360px,92%);
  margin:26px 0 0;
  padding:0;
  background:none;
  backdrop-filter:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  text-align:center;
  z-index:1;
}
body.page-id-215 .hero-note strong{
  color:var(--w);
  font-family:Georgia,'Times New Roman',serif;
  font-weight:500;
  font-size:1.22rem;
  line-height:1.4;
}
body.page-id-215 .hero-note small{
  color:var(--gold-soft);
  margin-top:10px;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}


/* ---------- 5. Daemmerung: Die Reise ---------------------------------------
   Noch dunkel, aber schon waermer. Das Ritualfoto traegt eine leichte
   Parallaxe (start3.js), dafuer ist es hoeher gesetzt und beschnitten. */

body.page-id-215 .soul-intro{
  position:relative;
  padding:132px 0;
  color:var(--w);
  background:
    radial-gradient(ellipse 900px 600px at 88% 10%,rgba(217,155,62,.10),transparent 60%),
    linear-gradient(180deg,var(--night) 0,var(--dusk) 18%,var(--dusk2) 100%);
}
body.page-id-215 .soul-intro::before{display:none}
body.page-id-215 .soul-intro-grid{
  grid-template-columns:1fr 1fr;
  gap:84px;
  align-items:center;
}
body.page-id-215 .ritual-photo{min-height:0}
body.page-id-215 .ritual-photo-main{
  height:min(580px,70vh);
  margin:0;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(236,217,174,.16);
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
body.page-id-215 .ritual-photo-main .et_pb_image_wrap{display:block;width:100%;height:100%}
body.page-id-215 .ritual-photo-main img{
  width:100%;
  height:114%;
  margin-top:-7%;
  object-fit:cover;
  object-position:center 47%;
}
body.page-id-215 .ritual-photo::after{display:none}
body.page-id-215 .soul-copy .eyebrow{color:var(--gold-soft)}
body.page-id-215 .soul-copy h2{color:var(--w)}
body.page-id-215 .soul-copy p{color:var(--w-mut)}
body.page-id-215 .ritual-caption{
  margin:30px 0 0;
  color:var(--gold-soft);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.25rem,1.7vw,1.6rem);
  line-height:1.35;
}


/* ---------- 6. Morgen: Wiedererkennen --------------------------------------
   Der erste helle Abschnitt. Einleitung zentriert, die zehn Zeilen als
   zweispaltige Haarlinienliste mit Lichtpunkten. */

body.page-id-215 .recognition-visual{
  padding:132px 0;
  background:
    radial-gradient(ellipse 900px 560px at 10% 6%,rgba(217,155,62,.12),transparent 60%),
    var(--dawn);
}
body.page-id-215 .recognition-visual::before,
body.page-id-215 .recognition-visual::after{display:none}
body.page-id-215 .signs-grid{gap:52px}
body.page-id-215 .sticky-intro{
  max-width:780px;
  justify-self:center;
  text-align:center;
}
body.page-id-215 .sticky-intro .et_pb_text,
body.page-id-215 .sticky-intro .et_pb_text_inner,
body.page-id-215 .sticky-intro h2,
body.page-id-215 .sticky-intro p{text-align:center}
body.page-id-215 .sticky-intro .eyebrow{justify-content:center}
body.page-id-215 .sticky-intro h2{margin:18px auto 20px;max-width:24ch}
body.page-id-215 .sticky-intro p{color:var(--muted)}

body.page-id-215 .sign-list{
  grid-template-columns:1fr 1fr;
  grid-auto-rows:auto;
  gap:0 72px;
  border-top:1px solid var(--line-l);
}
body.page-id-215 .sign-item{
  min-height:0;
  padding:25px 0;
  gap:16px;
  align-items:flex-start;
  background:none;
  backdrop-filter:none;
  border:0;
  border-bottom:1px solid var(--line-l);
  border-radius:0;
  box-shadow:none;
}
body.page-id-215 .sign-item p{
  font-size:1.01rem;
  color:var(--ink);
}
body.page-id-215 .sign-item .marke{margin:10px 0 0}


/* ---------- 7. Tag: Begleitung ---------------------------------------------
   Der Klassenname sagt dark-section, die Flaeche ist hier bewusst hell:
   im Verlauf der Seite ist dieser Abschnitt der Tag. Die vier Angebote
   stehen als editoriale Liste auf Haarlinien. */

body.page-id-215 .dark-section{
  color:var(--ink);
  background:
    radial-gradient(ellipse 820px 540px at 92% 90%,rgba(217,155,62,.10),transparent 62%),
    var(--day);
}
body.page-id-215 .dark-section::before,
body.page-id-215 .dark-section::after{display:none}
body.page-id-215 .dark-section .eyebrow{color:var(--gold-deep)}
body.page-id-215 .dark-section .eyebrow::before{background:var(--gold)}
body.page-id-215 .dark-section .section-heading p{color:var(--muted)}

body.page-id-215 .section-heading{
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
  margin-bottom:52px;
}
body.page-id-215 .section-heading h2{color:var(--ink)}
body.page-id-215 .section-heading p{max-width:620px}

body.page-id-215 .service-list{
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--line-l);
}
body.page-id-215 .service-row{
  display:grid;
  grid-template-columns:22px minmax(190px,.8fr) 1.5fr 44px;
  gap:0 30px;
  align-items:start;
  min-height:0;
  height:auto;
  padding:34px 0;
  background:none;
  backdrop-filter:none;
  border:0;
  border-bottom:1px solid var(--line-l);
  border-radius:0;
  overflow:visible;
  transition:background .25s ease;
}
body.page-id-215 .service-row::before{display:none}
body.page-id-215 .service-row:hover{
  transform:none;
  background:rgba(217,155,62,.06);
  border-color:var(--line-l);
}
body.page-id-215 .service-row .marke{margin:14px 0 0}
body.page-id-215 .service-row h3{
  margin:0;
  color:var(--ink);
  font-size:clamp(1.4rem,2vw,2rem);
}
body.page-id-215 .service-row p{
  margin:0;
  padding-top:7px;
  color:var(--muted);
}
body.page-id-215 .service-row .arrow{
  margin:0;
  padding:0;
  justify-self:end;
  align-self:center;
  font-size:1.45rem;
  color:var(--gold-deep);
  transition:transform .24s ease;
}
body.page-id-215 .service-row:hover .arrow{transform:translateX(7px)}


/* ---------- 8. Goldene Stunde: das Zitat ----------------------------------- */

body.page-id-215 .quote-panel{
  min-height:620px;
  place-items:center;
  text-align:center;
  color:#fff;
  background:
    linear-gradient(rgba(24,16,7,.38),rgba(24,16,7,.5)),
    url("light.jpg") center 58%/cover no-repeat;
}
body.page-id-215 .quote-panel::before{display:none}
/* Divi haengt an jedes blockquote einen Balken in seinem Akzentblau. */
body.page-id-215 .quote-panel blockquote{
  border:0;
  color:#fff;
  width:auto;
  max-width:26ch;
  margin-inline:auto;
  padding:0 22px;
  font-size:clamp(2rem,3.6vw,3.7rem);
  line-height:1.18;
  letter-spacing:-.03em;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}


/* ---------- 9. Volles Licht: der Abschluss --------------------------------- */

body.page-id-215 .cta-section{
  padding:132px 0 148px;
  background:
    radial-gradient(ellipse 720px 460px at 50% 0,rgba(217,155,62,.16),transparent 62%),
    var(--paper);
}
body.page-id-215 .cta-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:36px;
  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-215 .cta-box .et_pb_text,
body.page-id-215 .cta-box .et_pb_text_inner,
body.page-id-215 .cta-box h2,
body.page-id-215 .cta-box p{text-align:center}
body.page-id-215 .cta-box h2{
  font-size:clamp(2.1rem,3.4vw,3.4rem);
  color:var(--ink);
  max-width:24ch;
  margin-inline:auto;
}
body.page-id-215 .cta-box p{
  margin:20px auto 0;
  max-width:54ch;
  color:var(--muted);
}
body.page-id-215 .cta-action{display:flex;justify-content:center;margin:0}


/* ---------- 10. Fusszeile --------------------------------------------------- */

body.page-id-215 .site-footer{
  background:linear-gradient(160deg,#1c1712,#131009);
  border-top:1px solid rgba(217,155,62,.18);
  color:rgba(244,238,227,.66);
}
body.page-id-215 .footer-note{color:rgba(244,238,227,.4)}


/* ---------- 11. Kleine Schirme ---------------------------------------------- */

@media(max-width:960px){
  body.page-id-215 .hero{min-height:0;padding:132px 0 96px}
  body.page-id-215 .hero-grid{grid-template-columns:1fr;gap:56px}
  body.page-id-215 .soul-intro-grid{grid-template-columns:1fr;gap:48px}
  body.page-id-215 .ritual-photo-main{height:min(480px,60vh)}
  body.page-id-215 .sign-list{gap:0 48px}
  body.page-id-215 .service-row{grid-template-columns:20px 1fr 36px}
  body.page-id-215 .service-row p{grid-column:2/3;padding-top:12px}
  body.page-id-215 .service-row .arrow{grid-column:3;grid-row:1}
}

@media(max-width:680px){
  body.page-id-215 .hero{padding:112px 0 80px}
  body.page-id-215 .hero::before{width:min(400px,88vw);right:-50px;top:3%}
  body.page-id-215 .hero-copy{grid-template-columns:1fr}
  body.page-id-215 .hero-copy>.et_pb_button_module_wrapper{margin:0 0 12px 0}
  body.page-id-215 .hero-arch{width:min(280px,84%)}
  body.page-id-215 .soul-intro,
  body.page-id-215 .recognition-visual{padding:84px 0}
  body.page-id-215 .ritual-photo-main{height:min(400px,54vh);border-radius:20px}
  body.page-id-215 .sign-list{grid-template-columns:1fr;gap:0}
  body.page-id-215 .service-row{padding:26px 0}
  body.page-id-215 .quote-panel{min-height:440px}
  body.page-id-215 .cta-section{padding:84px 0 96px}
}


/* ---------- 12. Bewegung -----------------------------------------------------
   start3.js prueft prefers-reduced-motion selbst und startet dann weder
   Partikel noch Scroll-Animationen. Hier nur die reinen CSS-Uebergaenge. */

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