/* ==========================================================================
   LICHTDRACHE - Designtest fuer Start5 (Seite 222)

   Konzept
   -------
   Die Farbfamilie stammt aus dem Drachenbild: ein heller Morgenhimmel in
   Blau (#e7eef8 bis #d7e2f2), tiefes Marineblau als Schrift (#111e3e) und
   warmes Sonnengold als einziger Akzent (#e4ab53). Kein Braun, kein Pflaume,
   keine dunklen Baender - die Seite bleibt von oben bis unten licht.

   Der Drache liegt im Hintergrund: fest stehend hinter dem gesamten
   Dokument und noch einmal weit aufgehellt hinter dem Zitatband. Der
   Seiteninhalt bleibt unveraendert - im Bogen des Auftakts steht weiterhin
   das Portraet. Damit der Drache durchscheint, sind saemtliche
   Sektionshintergruende auf halbtransparente Schleier umgestellt.

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


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

body.page-id-222{
  --s5-weiss:#ffffff;
  --s5-himmel-hell:#f2f7fd;
  --s5-himmel:#e7eef8;
  --s5-himmel-tief:#dfe9f7;
  --s5-bank:#d7e2f2;

  --s5-tinte:#111e3e;
  --s5-tinte-weich:#3a4869;  /* eine Stufe tiefer als geplant: ueber dem Bildgrund
                                haelt #46557a nur 4,1:1, dieser Wert 5,1:1 */
  --s5-nacht:#0e1c3d;

  --s5-gold:#e4ab53;
  --s5-gold-tief:#6a460d;   /* Gold als Schrift: 4,7:1 auch auf dem dunkelsten
                                Fleck des Bildgrundes, 7,2:1 auf der Grundfarbe */
  --s5-gold-weich:#f6e3c2;

  --s5-linie:rgba(17,30,62,.14);
  --s5-linie-fein:rgba(17,30,62,.08);

  /* Variablen des gelieferten Entwurfs umbelegen, damit nirgends ein
     warmer Rest der alten Familie durchscheint. */
  --ivory:#e7eef8;
  --paper:#ffffff;
  --cream:#dfe9f7;
  --mist:#d7e2f2;
  --sage:#9fb6d6;
  --sage-soft:#e4ecf8;
  --lavender:#b9cbe8;
  --rose:#f6e3c2;
  --plum:#111e3e;
  --plum-deep:#0e1c3d;
  --gold:#e4ab53;
  --gold-soft:#f6e3c2;
  --ink:#22315a;
  --muted:#3a4869;
  --line:rgba(17,30,62,.14);
  --shadow:0 28px 76px rgba(17,40,82,.14);
  --shadow-soft:0 14px 40px rgba(17,40,82,.09);

  background:var(--s5-himmel);
  color:var(--s5-tinte-weich);
}


/* ---------- 2. Der Drache als Seitengrund ------------------------------------

   Fest stehend hinter dem gesamten Dokument, oben klar und nach unten in den
   Himmelston auslaufend. z-index:-1 legt es hinter jeden Inhalt, aber vor die
   Grundfarbe des Body.

   Das Blatt ist ein Panorama von 2,5:1 mit dem Drachen am linken Rand. Es steht
   deshalb links buendig und fuellt das Fenster ("cover"): so bleibt der Drache
   auf jeder Fenstergroesse an derselben Stelle, angeschnitten wird nur rechts,
   wo ohnehin nur Berge und Himmel liegen.
   -------------------------------------------------------------------------- */

body.page-id-222::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(231,238,248,0) 0%,
      rgba(231,238,248,.10) 40%,
      rgba(231,238,248,.34) 72%,
      rgba(231,238,248,.58) 100%),
    url("Lumentra-Lichtdrache-Bergtal.webp") left top / cover no-repeat;
  background-color:var(--s5-himmel);
}


/* ---------- 3. Kopf- und Fusszeile ------------------------------------------- */

body.page-id-222 .site-header{
  background:rgba(242,247,253,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--s5-linie-fein);
  color:var(--s5-tinte);
}
body.page-id-222 .brand strong{color:var(--s5-tinte)}
body.page-id-222 .brand span{color:var(--s5-tinte-weich)}
body.page-id-222 .nav-links{color:var(--s5-tinte)}
body.page-id-222 .nav-links a:not(.nav-contact)::after{background:var(--s5-gold)}
body.page-id-222 .nav-contact{
  border-color:rgba(17,30,62,.28);
  background:rgba(255,255,255,.62);
  color:var(--s5-tinte);
}
body.page-id-222 .nav-contact:hover{
  background:var(--s5-gold);
  border-color:var(--s5-gold);
  color:var(--s5-tinte);
}
body.page-id-222 .menu-button{
  border-color:var(--s5-linie);
  background:rgba(255,255,255,.7);
}
body.page-id-222 .menu-button span,
body.page-id-222 .menu-button span::before,
body.page-id-222 .menu-button span::after{background:var(--s5-tinte)}

body.page-id-222 .site-footer{
  background:linear-gradient(150deg,#16264a,#0b1730);
  border-top:1px solid rgba(228,171,83,.28);
  color:rgba(232,240,252,.74);
}
body.page-id-222 .site-footer a{color:#fff}
body.page-id-222 .footer-note{color:rgba(232,240,252,.48)}


/* ---------- 4. Schrift, Label, Rauten ---------------------------------------- */

body.page-id-222 h1,
body.page-id-222 h2,
body.page-id-222 h3{color:var(--s5-tinte)}
body.page-id-222 p{color:var(--s5-tinte-weich)}
body.page-id-222 .lead{color:var(--s5-tinte-weich)}

body.page-id-222 .eyebrow{color:var(--s5-gold-tief)}
body.page-id-222 .eyebrow::before{background:var(--s5-gold)}

body.page-id-222 .marke{
  border-color:var(--s5-gold);
  background:var(--s5-gold);
  box-shadow:0 0 0 3px rgba(228,171,83,.18);
}

/* Die drei Haltungsworte stehen als weiche Pillen, wie im Entwurfsbild. */
body.page-id-222 .hero-meta{color:var(--s5-tinte);gap:10px 12px}
body.page-id-222 .hero-meta span{
  gap:9px;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid var(--s5-linie);
  background:rgba(255,255,255,.68);
  font-size:.84rem;
  font-weight:500;
  letter-spacing:.01em;
}
body.page-id-222 .hero-meta i{
  width:6px;
  height:6px;
  transform:none;
  border:0;
  border-radius:50%;
  background:var(--s5-gold);
}
body.page-id-222 .hero-meta span:first-child i{display:block}


/* ---------- 5. Schaltflaechen -------------------------------------------------

   Gold als Flaeche, Marineblau als Schrift: 8:1 und damit weit ueber der
   Anforderung. Die Divi-Varianten muessen mitgenannt werden, sonst gewinnt
   das Modul-CSS des Bauwerkzeugs.
   -------------------------------------------------------------------------- */

body.page-id-222 .btn-primary,
body.page-id-222 .et_pb_button.btn-primary,
body.page-id-222 .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-222 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary{
  background:var(--s5-gold);
  border-color:var(--s5-gold);
  color:var(--s5-tinte);
}
body.page-id-222 .btn-primary:hover,
body.page-id-222 .et_pb_button.btn-primary:hover,
body.page-id-222 .et_pb_bg_layout_light.et_pb_button.btn-primary:hover,
body.page-id-222 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary:hover{
  background:#d89a3a;
  border-color:#d89a3a;
  color:var(--s5-tinte);
  box-shadow:0 14px 32px rgba(180,120,30,.26);
}

body.page-id-222 .btn-secondary,
body.page-id-222 .et_pb_button.btn-secondary,
body.page-id-222 .et_pb_bg_layout_light.et_pb_button.btn-secondary{
  background:rgba(255,255,255,.62);
  border-color:rgba(17,30,62,.30);
  color:var(--s5-tinte);
}
body.page-id-222 .et_pb_button.btn-secondary:hover,
body.page-id-222 .et_pb_bg_layout_light.et_pb_button.btn-secondary:hover{
  background:#fff;
  border-color:var(--s5-tinte);
  color:var(--s5-tinte);
}


/* ---------- 6. Auftakt: der Drache im Bogen -----------------------------------

   Der Sektionsgrund wird durchsichtig, damit der feste Seitengrund hier am
   kraeftigsten steht. Die beiden Zierkreise des Entwurfs bleiben, nur in
   Gold und Blau statt Bronze und Pflaume.
   -------------------------------------------------------------------------- */

body.page-id-222 .hero{
  background:
    radial-gradient(ellipse 44% 56% at 24% 46%,rgba(255,255,255,.74),rgba(255,255,255,.24) 60%,transparent 78%),
    linear-gradient(150deg,rgba(242,247,253,.06) 0%,rgba(223,233,247,0) 58%,rgba(215,226,242,.05) 100%);
}
body.page-id-222 .hero::before{border-color:rgba(228,171,83,.26)}
body.page-id-222 .hero::after{
  border-color:rgba(17,30,62,.09);
  box-shadow:0 0 0 34px rgba(228,171,83,.045),0 0 0 68px rgba(17,30,62,.022);
}

body.page-id-222 .hero-copy h1{color:var(--s5-tinte)}

/* Geometrie des Bogens bleibt wie auf der Startseite, nur Rand und Schatten
   wechseln in die kuehle Familie. */
body.page-id-222 .hero-arch{
  border:1px solid rgba(255,255,255,.9);
  background:var(--s5-himmel-hell);
  box-shadow:0 30px 80px rgba(17,40,82,.16);
}
body.page-id-222 .hero-arch::after{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(17,30,62,.10));
}

body.page-id-222 .hero-orbit{border-color:rgba(228,171,83,.40)}
body.page-id-222 .hero-orbit::before,
body.page-id-222 .hero-orbit::after{border-color:rgba(17,30,62,.16)}

body.page-id-222 .hero-note{
  background:rgba(255,255,255,.90);
  border:1px solid rgba(228,171,83,.36);
  box-shadow:0 16px 45px rgba(17,40,82,.12);
}
body.page-id-222 .hero-note strong{color:var(--s5-tinte)}
body.page-id-222 .hero-note small{color:var(--s5-tinte-weich)}


/* ---------- 7. Die Reise ------------------------------------------------------ */

body.page-id-222 .soul-intro{
  background:
    radial-gradient(circle at 84% 12%,rgba(246,227,194,.20),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.32) 0%,rgba(242,247,253,.20) 55%,rgba(223,233,247,.18) 100%);
}
body.page-id-222 .soul-intro::before{
  border-color:rgba(17,30,62,.14);
  box-shadow:0 0 0 42px rgba(228,171,83,.045);
}
body.page-id-222 .ritual-photo-main{
  box-shadow:0 26px 70px rgba(17,40,82,.15);
  border:1px solid rgba(255,255,255,.9);
  background:#fff;
}
/* Weisser Schleier von 20 Prozent ueber dem Handbild: statt eines Pseudoelements
   liegt hier reines Weiss im Rahmen und das Bild darueber mit opacity .8. Das
   mischt exakt 20 Prozent Weiss dazu und ist unabhaengig davon, wie Divi das
   Bildmodul positioniert. */
body.page-id-222 .ritual-photo-main img{opacity:.8}
body.page-id-222 .ritual-caption{color:var(--s5-tinte)}


/* ---------- 8. Wiedererkennen ------------------------------------------------- */

body.page-id-222 .recognition-visual{
  background:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.40),transparent 32%),
    linear-gradient(135deg,rgba(223,233,247,.28),rgba(215,226,242,.24));
}
body.page-id-222 .recognition-visual::after{
  border-color:rgba(17,30,62,.10);
  box-shadow:0 0 0 38px rgba(228,171,83,.04);
}
body.page-id-222 .sign-item p{color:var(--s5-tinte-weich)}
body.page-id-222 .sign-item span{color:var(--s5-gold-tief)}


/* ---------- 9. Begleitung: aus dem dunklen Band wird eine helle Bank ----------

   Im Entwurf steht hier ein tiefes Pflaumenband mit weisser Schrift und
   Glaskarten. Auf der lichten Seite waere das ein Fremdkoerper: die Sektion
   wird zur ruhigen blauen Bank, die Karten werden weiss.
   -------------------------------------------------------------------------- */

body.page-id-222 .dark-section{
  color:var(--s5-tinte-weich);
  background:
    radial-gradient(circle at 18% 12%,rgba(246,227,194,.18),transparent 30%),
    linear-gradient(145deg,rgba(215,226,242,.60),rgba(223,233,247,.50) 55%,rgba(215,226,242,.60));
}
body.page-id-222 .dark-section::before{display:none}   /* weisse Sternchen traegt nur ein dunkler Grund */
body.page-id-222 .dark-section h2,
body.page-id-222 .dark-section h3{color:var(--s5-tinte)}
body.page-id-222 .dark-section .section-heading p{color:var(--s5-tinte-weich)}
body.page-id-222 .dark-section .eyebrow{color:var(--s5-gold-tief)}

body.page-id-222 .service-row{
  border:1px solid var(--s5-linie);
  background:rgba(255,255,255,.80);
  box-shadow:0 14px 40px rgba(17,40,82,.07);
}
body.page-id-222 .service-row::before{border-color:rgba(228,171,83,.28)}
body.page-id-222 .service-row:hover{
  background:#fff;
  border-color:rgba(228,171,83,.50);
  box-shadow:0 22px 54px rgba(17,40,82,.12);
}
body.page-id-222 .service-row h3{color:var(--s5-tinte)}
body.page-id-222 .service-row p{color:var(--s5-tinte-weich)}
body.page-id-222 .service-row .number{color:var(--s5-gold-tief)}
body.page-id-222 .service-row .arrow{color:var(--s5-gold-tief)}
body.page-id-222 .service-row .marke{
  border-color:var(--s5-gold);
  background:var(--s5-gold);
}


/* ---------- 10. Zitat -----------------------------------------------------------

   Hier stand das Panorama ein zweites Mal als eigener Sektionsgrund. Zusammen mit
   dem festen Seitengrund lagen damit zwei Ausschnitte desselben Bildes uebereinander.
   Jetzt bleibt nur ein leichter Schleier, durch den der Seitengrund wie in jeder
   anderen Sektion durchlaeuft.
   -------------------------------------------------------------------------- */

body.page-id-222 .quote-panel{
  color:var(--s5-tinte);
  background:linear-gradient(rgba(242,247,253,.30),rgba(223,233,247,.42));
}
body.page-id-222 .quote-panel::before{
  border-color:rgba(255,255,255,.85);
  box-shadow:0 0 0 44px rgba(255,255,255,.30),0 0 0 88px rgba(255,255,255,.16);
}
/* Divi gibt jedem blockquote einen Rand in seinem Signalblau (#2ea3f2). Auf dem
   dunklen Band des Entwurfs fiel er nicht auf, auf hellem Grund ist er ein
   Fremdkoerper - hier steht er in Gold. */
body.page-id-222 .quote-panel blockquote{
  color:var(--s5-tinte);
  border-left-color:var(--s5-gold);
}


/* ---------- 11. Abschluss ------------------------------------------------------ */

body.page-id-222 .cta-section{background:transparent}
body.page-id-222 .cta-box{
  color:var(--s5-tinte);
  border:1px solid var(--s5-linie);
  background:
    radial-gradient(circle at 88% 20%,rgba(246,227,194,.44),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(242,247,253,.86));
  box-shadow:0 26px 70px rgba(17,40,82,.12);
}
body.page-id-222 .cta-box::after{
  border-color:rgba(228,171,83,.32);
  box-shadow:0 0 0 38px rgba(17,30,62,.02);
}
body.page-id-222 .cta-box h2{color:var(--s5-tinte)}
body.page-id-222 .cta-box p{color:var(--s5-tinte-weich)}


/* ---------- 12. Kleine Schirme -------------------------------------------------

   Auf schmalen Geraeten steht der Drachengrund weiter oben, sonst bleibt vom
   Tier nur der Fluegel im Bild.
   -------------------------------------------------------------------------- */

@media(max-width:960px){
}

@media(max-width:680px){
  body.page-id-222::before{
    background:
      linear-gradient(180deg,
        rgba(231,238,248,.10) 0%,
        rgba(231,238,248,.40) 48%,
        rgba(231,238,248,.70) 100%),
      url("Lumentra-Lichtdrache-Bergtal.webp") left center / cover no-repeat;
  }
  body.page-id-222 .hero-meta span{font-size:.79rem;padding:6px 13px}
}


/* ---------- 13. Bewegung ------------------------------------------------------- */

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


/* ---------- 14. Weniger Luft in den Angebotskarten ----------------------------

   Der Entwurf haelt die Karten auf min-height:330px, gibt der Ueberschrift
   48 px Abstand nach oben und schiebt den Pfeil mit margin-top:auto an den
   unteren Rand, dazu 26 px Polsterung. Bei kurzen Texten - etwa bei
   "Rueckfuehrung" - steht dadurch mehr als ein Drittel der Karte leer.

   Die feste Mindesthoehe entfaellt; die Karten richten sich nach ihrem Inhalt.
   Gleich hoch bleiben sie trotzdem, denn das Entwurfsblatt setzt sie im Raster
   auf height:100% - innerhalb einer Zeile zieht die laengste Karte die andere
   mit. Der Pfeil bleibt unten buendig, damit die Pfeile einer Zeile auf einer
   Linie stehen.
   -------------------------------------------------------------------------- */

body.page-id-222 .service-row{
  min-height:0;
  padding:28px 30px 24px;
}
body.page-id-222 .service-row .marke{margin:0 0 4px}
body.page-id-222 .service-row h3{margin:16px 0 12px}
body.page-id-222 .service-row p{margin:0}
body.page-id-222 .service-row .arrow{
  padding-top:14px;
  font-size:1.25rem;
}


/* ---------- 15. Die Sektionsueberschrift eine Stufe kleiner -------------------

   "Was sich zeigen darf." steht in der schmaleren linken Spalte der
   Abschnittsueberschrift und bricht dort bei der Entwurfsgroesse (bis 5,2 rem)
   auf zwei Zeilen um. Nur diese Ueberschrift wird zurueckgenommen; die uebrigen
   h2 der Seite behalten ihre Groesse.
   -------------------------------------------------------------------------- */

body.page-id-222 .section-heading h2{
  font-size:clamp(2.2rem,3.4vw,3.5rem);
}