/* ==========================================================================
   LICHTTAL - Designtest fuer Start6 (Seite 226)

   Konzept
   -------
   Die Anlage von Start3 ("Der Weg ins Licht"), aber ohne Nacht: die Seite
   steht von der ersten bis zur letzten Zeile im warmen Tageslicht und
   staffelt sich nur noch in Waermegraden.

     1. Auftakt        Sand            #fdf7ec   aufsteigende Lichtpunkte
     2. Die Reise      Creme           #f9efdd
     3. Wiedererkennen Honig           #fbf3e5
     4. Begleitung     Papier          #fffdf8
     5. Zitat          goldene Stunde  Sonnenbild
     6. Abschluss      volles Licht    #fffdf8 mit Goldglut

   Hinter allem steht der Lichtdrache als fester Seitengrund, links buendig
   wie auf Start5, hier jedoch mit warmem statt kuehlem Schleier. Damit er
   durchscheint, sind saemtliche Sektionsgruende halbtransparent.

   Die Lichtpunkte des Auftakts bleiben erhalten (start6.js). Auf dunklem
   Grund trugen sie sich durch additives Mischen; auf hellem Grund waere das
   unsichtbar, deshalb dort normales Mischen und ein tragender Bernsteinton.

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


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

body.page-id-226{
  /* Die Stufen heissen weiter Nacht bis Tag, tragen aber Waermegrade statt
     Helligkeitsspruenge. So bleibt jede Regel aus Start3 unveraendert gueltig. */
  --night:#fdf7ec;
  --night2:#fffdf8;
  --dusk:#faf1e1;
  --dusk2:#f4e6ce;
  --dawn:#fbf3e5;
  --day:#fffdf8;
  --paper:#fffdf8;

  --gold:#d99b3e;
  --gold-deep:#8a5f1c;
  /* Auf Nacht war das ein heller Goldschimmer. Auf Sand traegt nur ein
     satter Ton: #ecd9ae haelt hier 1,3:1 und waere unlesbar. */
  --gold-soft:#8a5f1c;
  --on-gold:#2a1c08;

  --ink:#3b2f1e;
  --muted:#6b5c46;
  /* --w war die helle Schrift auf dunklem Grund. Da nichts mehr dunkel ist,
     traegt sie jetzt denselben warmen Tiefton wie der uebrige Text. */
  --w:#3b2f1e;
  --w-mut:rgba(59,47,30,.82);
  --line-l:rgba(59,47,30,.16);
  --line-d:rgba(59,47,30,.14);

  /* 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:#3b2f1e;
  --line:rgba(43,36,27,.16);
  --shadow:0 30px 74px rgba(120,86,32,.15);
  --shadow-soft:0 14px 36px rgba(120,86,32,.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-226 .site-header{
  background:rgba(253,247,236,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(59,47,30,.10);
  transition:background .45s ease,border-color .45s ease;
}
body.page-id-226 .site-header .brand strong{color:var(--w)}
body.page-id-226 .site-header .brand span{color:var(--muted)}
body.page-id-226 .site-header .nav-links a{color:var(--w)}
body.page-id-226 .site-header .nav-links a:not(.nav-contact)::after{background:var(--gold)}
body.page-id-226 .site-header .nav-contact{
  border-color:rgba(59,47,30,.30);
  background:rgba(255,255,255,.55);
  color:var(--w);
}
body.page-id-226 .site-header .nav-contact:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--on-gold);
}
body.page-id-226 .site-header .menu-button{
  border-color:rgba(59,47,30,.24);
  background:rgba(255,255,255,.6);
}
body.page-id-226 .site-header .menu-button span,
body.page-id-226 .site-header .menu-button span::before,
body.page-id-226 .site-header .menu-button span::after{background:var(--w)}

body.page-id-226 .site-header.is-light{
  background:rgba(255,253,248,.90);
  border-bottom-color:rgba(59,47,30,.12);
}
body.page-id-226 .site-header.is-light .brand strong{color:var(--ink)}
body.page-id-226 .site-header.is-light .brand span{color:var(--muted)}
body.page-id-226 .site-header.is-light .nav-links a{color:var(--ink)}
body.page-id-226 .site-header.is-light .nav-contact{
  border-color:rgba(59,47,30,.30);
  color:var(--ink);
}
body.page-id-226 .site-header.is-light .nav-contact:hover{color:var(--on-gold)}
body.page-id-226 .site-header.is-light .menu-button span,
body.page-id-226 .site-header.is-light .menu-button span::before,
body.page-id-226 .site-header.is-light .menu-button span::after{background:var(--ink)}


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

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

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

/* Der Lichtpunkt: ein goldener Funke als Aufzaehlungszeichen. */
body.page-id-226 .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-226 .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-226 .btn-primary,
body.page-id-226 .et_pb_button.btn-primary,
body.page-id-226 .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-226 .et_pb_bg_layout_light.et_pb_button.btn-primary:hover,
body.page-id-226 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-226 .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-226 .btn-primary:hover,
body.page-id-226 .et_pb_button.btn-primary:hover{
  box-shadow:0 16px 34px rgba(217,155,62,.35);
}
body.page-id-226 .btn-secondary,
body.page-id-226 .et_pb_button.btn-secondary,
body.page-id-226 .et_pb_bg_layout_light.et_pb_button.btn-secondary{
  border-color:rgba(59,47,30,.32);
  background:rgba(255,255,255,.55);
  color:var(--w);
}
body.page-id-226 .et_pb_button.btn-secondary:hover,
body.page-id-226 .et_pb_bg_layout_light.et_pb_button.btn-secondary:hover{
  background:#fff;
  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-226 .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-226 .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-226 .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-226 .l3-stage{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
body.page-id-226 .l3-stage canvas{display:block;width:100%;height:100%}

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

body.page-id-226 .hero .eyebrow{color:var(--gold-soft)}
body.page-id-226 .hero .eyebrow::before{background:var(--gold)}
body.page-id-226 .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-226 .hero-copy .lead{
  color:var(--w-mut);
  max-width:46ch;
  font-size:1.07rem;
}
body.page-id-226 .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-226 .hero-copy{
  display:grid;
  grid-template-columns:max-content max-content 1fr;
  justify-items:start;
  align-items:start;
  padding:0;
}
body.page-id-226 .hero-copy>.et_pb_text{grid-column:1 / -1}
body.page-id-226 .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-226 .hero-visual{
  min-height:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;
}
body.page-id-226 .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-226 .hero-orbit::before,
body.page-id-226 .hero-orbit::after{display:none}
body.page-id-226 .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-226 .hero-arch img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:76% 26%;
}
body.page-id-226 .hero-arch::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(200deg,rgba(120,86,32,0) 55%,rgba(120,86,32,.14));
}
body.page-id-226 .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-226 .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-226 .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-226 .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-226 .soul-intro::before{display:none}
body.page-id-226 .soul-intro-grid{
  grid-template-columns:1fr 1fr;
  gap:84px;
  align-items:center;
}
body.page-id-226 .ritual-photo{min-height:0}
body.page-id-226 .ritual-photo-main{
  height:min(580px,70vh);
  margin:0;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(138,95,28,.18);
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
body.page-id-226 .ritual-photo-main .et_pb_image_wrap{display:block;width:100%;height:100%}
body.page-id-226 .ritual-photo-main img{
  width:100%;
  height:114%;
  margin-top:-7%;
  object-fit:cover;
  object-position:center 47%;
}
body.page-id-226 .ritual-photo::after{display:none}
body.page-id-226 .soul-copy .eyebrow{color:var(--gold-soft)}
body.page-id-226 .soul-copy h2{color:var(--w)}
body.page-id-226 .soul-copy p{color:var(--w-mut)}
body.page-id-226 .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-226 .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-226 .recognition-visual::before,
body.page-id-226 .recognition-visual::after{display:none}
body.page-id-226 .signs-grid{gap:52px}
body.page-id-226 .sticky-intro{
  max-width:780px;
  justify-self:center;
  text-align:center;
}
body.page-id-226 .sticky-intro .et_pb_text,
body.page-id-226 .sticky-intro .et_pb_text_inner,
body.page-id-226 .sticky-intro h2,
body.page-id-226 .sticky-intro p{text-align:center}
body.page-id-226 .sticky-intro .eyebrow{justify-content:center}
body.page-id-226 .sticky-intro h2{margin:18px auto 20px;max-width:24ch}
body.page-id-226 .sticky-intro p{color:var(--muted)}

body.page-id-226 .sign-list{
  grid-template-columns:1fr 1fr;
  grid-auto-rows:auto;
  gap:0 72px;
  border-top:1px solid var(--line-l);
}
body.page-id-226 .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-226 .sign-item p{
  font-size:1.01rem;
  color:var(--ink);
}
body.page-id-226 .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-226 .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-226 .dark-section::before,
body.page-id-226 .dark-section::after{display:none}
body.page-id-226 .dark-section .eyebrow{color:var(--gold-deep)}
body.page-id-226 .dark-section .eyebrow::before{background:var(--gold)}
body.page-id-226 .dark-section .section-heading p{color:var(--muted)}

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

body.page-id-226 .service-list{
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--line-l);
}
body.page-id-226 .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-226 .service-row::before{display:none}
body.page-id-226 .service-row:hover{
  transform:none;
  background:rgba(217,155,62,.06);
  border-color:var(--line-l);
}
body.page-id-226 .service-row .marke{margin:14px 0 0}
body.page-id-226 .service-row h3{
  margin:0;
  color:var(--ink);
  font-size:clamp(1.4rem,2vw,2rem);
}
body.page-id-226 .service-row p{
  margin:0;
  padding-top:7px;
  color:var(--muted);
}
body.page-id-226 .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-226 .service-row:hover .arrow{transform:translateX(7px)}


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

body.page-id-226 .quote-panel{
  min-height:620px;
  place-items:center;
  text-align:center;
  color:var(--ink);
  background:
    linear-gradient(rgba(253,247,236,.62),rgba(244,230,206,.72)),
    url("light.jpg") center 58%/cover no-repeat;
}
body.page-id-226 .quote-panel::before{display:none}
/* Divi haengt an jedes blockquote einen Balken in seinem Akzentblau. */
body.page-id-226 .quote-panel blockquote{
  border:0;
  color:var(--ink);
  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-226 .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-226 .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-226 .cta-box .et_pb_text,
body.page-id-226 .cta-box .et_pb_text_inner,
body.page-id-226 .cta-box h2,
body.page-id-226 .cta-box p{text-align:center}
body.page-id-226 .cta-box h2{
  font-size:clamp(2.1rem,3.4vw,3.4rem);
  color:var(--ink);
  max-width:24ch;
  margin-inline:auto;
}
body.page-id-226 .cta-box p{
  margin:20px auto 0;
  max-width:54ch;
  color:var(--muted);
}
body.page-id-226 .cta-action{display:flex;justify-content:center;margin:0}


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

body.page-id-226 .site-footer{
  background:linear-gradient(160deg,#3f3220,#2a2115);
  border-top:1px solid rgba(217,155,62,.30);
  color:rgba(248,240,228,.74);
}
body.page-id-226 .footer-note{color:rgba(248,240,228,.48)}


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

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

@media(max-width:680px){
  body.page-id-226 .hero{padding:112px 0 80px}
  body.page-id-226 .hero::before{width:min(400px,88vw);right:-50px;top:3%}
  body.page-id-226 .hero-copy{grid-template-columns:1fr}
  body.page-id-226 .hero-copy>.et_pb_button_module_wrapper{margin:0 0 12px 0}
  body.page-id-226 .hero-arch{width:min(280px,84%)}
  body.page-id-226 .soul-intro,
  body.page-id-226 .recognition-visual{padding:84px 0}
  body.page-id-226 .ritual-photo-main{height:min(400px,54vh);border-radius:20px}
  body.page-id-226 .sign-list{grid-template-columns:1fr;gap:0}
  body.page-id-226 .service-row{padding:26px 0}
  body.page-id-226 .quote-panel{min-height:440px}
  body.page-id-226 .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-226 .site-header,
  body.page-id-226 .service-row,
  body.page-id-226 .service-row .arrow,
  body.page-id-226 .btn,
  body.page-id-226 .et_pb_button{transition:none}
  body.page-id-226 .service-row:hover .arrow,
  body.page-id-226 .btn-primary:hover,
  body.page-id-226 .et_pb_button.btn-primary:hover{transform:none}
}

/* ---------- 12. Der Lichtdrache als Seitengrund -----------------------------

   Nachtrag zu Abschnitt 1. Die Stufenfarben werden hier auf halbtransparent
   umgestellt, damit das Bild hinter allem durchscheint. Saemtliche Regeln der
   Abschnitte 4 bis 9 bleiben dadurch unveraendert gueltig: sie greifen weiter
   auf dieselben Variablen zu, nur deckt keine Flaeche mehr vollstaendig.

   Das Blatt liegt links buendig und fest, wie auf Start5. Der Schleier
   darueber ist hier warm (Sand statt Himmelblau).
   -------------------------------------------------------------------------- */

body.page-id-226{
  --night:rgba(253,247,236,.40);
  --night2:rgba(255,253,248,.30);
  --dusk:rgba(250,241,225,.44);
  --dusk2:rgba(244,230,206,.50);
  --dawn:rgba(251,243,229,.54);
  --day:rgba(255,253,248,.52);
  --paper:rgba(255,253,248,.50);

  background:#fdf7ec;
}

body.page-id-226::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(253,247,236,.08) 0%,
      rgba(253,247,236,.30) 42%,
      rgba(250,241,225,.62) 74%,
      rgba(250,241,225,.84) 100%),
    url("Lumentra-Lichtdrache-Bergtal.webp") left top / cover no-repeat;
  background-color:#fdf7ec;
}

/* Der Bogen im Auftakt braucht einen deckenden Grund, sonst scheint das
   Hintergrundbild durch das Portraetbild hindurch. Sein Schatten war fuer die
   Nacht gedacht (reines Schwarz) und wird hier warm. */
body.page-id-226 .hero-arch{
  background:#f4e6ce;
  box-shadow:
    0 0 0 1px rgba(217,155,62,.25),
    0 0 90px rgba(217,155,62,.20),
    0 34px 80px rgba(120,86,32,.22);
}

/* Auf hellem Grund wirkt der Funkenschleier des Auftakts kraeftiger als in der
   Nacht. Etwas zurueckgenommen bleibt er sichtbar, ohne den Text zu stoeren. */
body.page-id-226 .l3-stage{opacity:.85}

/* Das Zitatband traegt jetzt dunkle Schrift auf hellem Sonnenbild. */
body.page-id-226 .quote-panel blockquote{color:var(--ink)}
body.page-id-226 .quote-panel blockquote{border-left-color:var(--gold)}


/* ---------- 13. Das Handbild in der Reise ------------------------------------

   Wie auf Start5 liegt ein Weissschleier von 20 Prozent ueber dem Bild: reines
   Weiss als Grund im Rahmen, das Bild darueber mit opacity .8. Das mischt exakt
   20 Prozent Weiss dazu und ist unabhaengig davon, wie Divi das Bildmodul
   positioniert. Die Parallaxe aus start6.js bleibt davon unberuehrt, sie
   verschiebt das Bild nur senkrecht.
   -------------------------------------------------------------------------- */

body.page-id-226 .ritual-photo-main{background:#fff}
body.page-id-226 .ritual-photo-main img{opacity:.8}


/* ---------- 14. Gleicher Abstand an allen Uebergaengen ------------------------

   Jeder Abschnitt der Seite traegt 132 px Luft. Der Auftakt hatte unten 177 px:
   nicht durch seine Polsterung, sondern durch min-height:92vh. Ist das Fenster
   hoeher als noetig, verteilt der Flexcontainer den Ueberschuss um den mittig
   ausgerichteten Inhalt herum, und der Uebergang zur Reise wird groesser als
   jeder andere auf der Seite.

   Die Mindesthoehe entfaellt deshalb. Bei ueblichen Fenstern fuellt der Auftakt
   weiterhin fast den ganzen Bildschirm (rund 900 px), seine Hoehe kommt jetzt
   aber aus dem Inhalt und die Polsterung unten gilt exakt. Oben bleiben 150 px,
   weil dort die Kopfzeile darueber liegt.
   -------------------------------------------------------------------------- */

body.page-id-226 .hero{
  min-height:0;
  padding:150px 0 132px;
}