/* ==========================================================================
   WECHSELSEITIG - Designtest fuer Start9 (Seite 233)

   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 233 geladen (novamira-sandbox/
   lumentra-start5.php). Alle Regeln haengen an body.page-id-233 und
   gewinnen so ohne !important gegen den gelieferten Entwurf.
   ========================================================================== */


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

body.page-id-233{
  --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-233::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-233 .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-233 .brand strong{color:var(--s5-tinte)}
body.page-id-233 .brand span{color:var(--s5-tinte-weich)}
body.page-id-233 .nav-links{color:var(--s5-tinte)}
body.page-id-233 .nav-links a:not(.nav-contact)::after{background:var(--s5-gold)}
body.page-id-233 .nav-contact{
  border-color:rgba(17,30,62,.28);
  background:rgba(255,255,255,.62);
  color:var(--s5-tinte);
}
body.page-id-233 .nav-contact:hover{
  background:var(--s5-gold);
  border-color:var(--s5-gold);
  color:var(--s5-tinte);
}
body.page-id-233 .menu-button{
  border-color:var(--s5-linie);
  background:rgba(255,255,255,.7);
}
body.page-id-233 .menu-button span,
body.page-id-233 .menu-button span::before,
body.page-id-233 .menu-button span::after{background:var(--s5-tinte)}

body.page-id-233 .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-233 .site-footer a{color:#fff}
body.page-id-233 .footer-note{color:rgba(232,240,252,.48)}


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

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

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

body.page-id-233 .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-233 .hero-meta{color:var(--s5-tinte);gap:10px 12px}
body.page-id-233 .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-233 .hero-meta i{
  width:6px;
  height:6px;
  transform:none;
  border:0;
  border-radius:50%;
  background:var(--s5-gold);
}
body.page-id-233 .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-233 .btn-primary,
body.page-id-233 .et_pb_button.btn-primary,
body.page-id-233 .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-233 .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-233 .btn-primary:hover,
body.page-id-233 .et_pb_button.btn-primary:hover,
body.page-id-233 .et_pb_bg_layout_light.et_pb_button.btn-primary:hover,
body.page-id-233 .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-233 .btn-secondary,
body.page-id-233 .et_pb_button.btn-secondary,
body.page-id-233 .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-233 .et_pb_button.btn-secondary:hover,
body.page-id-233 .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-233 .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-233 .hero::before{border-color:rgba(228,171,83,.26)}
body.page-id-233 .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-233 .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-233 .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-233 .hero-arch::after{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(17,30,62,.10));
}

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

body.page-id-233 .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-233 .hero-note strong{color:var(--s5-tinte)}
body.page-id-233 .hero-note small{color:var(--s5-tinte-weich)}


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

body.page-id-233 .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-233 .soul-intro::before{
  border-color:rgba(17,30,62,.14);
  box-shadow:0 0 0 42px rgba(228,171,83,.045);
}
body.page-id-233 .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-233 .ritual-photo-main img{opacity:.8}
body.page-id-233 .ritual-caption{color:var(--s5-tinte)}


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

body.page-id-233 .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-233 .recognition-visual::after{
  border-color:rgba(17,30,62,.10);
  box-shadow:0 0 0 38px rgba(228,171,83,.04);
}
body.page-id-233 .sign-item p{color:var(--s5-tinte-weich)}
body.page-id-233 .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-233 .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-233 .dark-section::before{display:none}   /* weisse Sternchen traegt nur ein dunkler Grund */
body.page-id-233 .dark-section h2,
body.page-id-233 .dark-section h3{color:var(--s5-tinte)}
body.page-id-233 .dark-section .section-heading p{color:var(--s5-tinte-weich)}
body.page-id-233 .dark-section .eyebrow{color:var(--s5-gold-tief)}

body.page-id-233 .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-233 .service-row::before{border-color:rgba(228,171,83,.28)}
body.page-id-233 .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-233 .service-row h3{color:var(--s5-tinte)}
body.page-id-233 .service-row p{color:var(--s5-tinte-weich)}
body.page-id-233 .service-row .number{color:var(--s5-gold-tief)}
body.page-id-233 .service-row .arrow{color:var(--s5-gold-tief)}
body.page-id-233 .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-233 .quote-panel{
  color:var(--s5-tinte);
  background:linear-gradient(rgba(242,247,253,.30),rgba(223,233,247,.42));
}
body.page-id-233 .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-233 .quote-panel blockquote{
  color:var(--s5-tinte);
  border-left-color:var(--s5-gold);
}


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

body.page-id-233 .cta-section{background:transparent}
body.page-id-233 .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-233 .cta-box::after{
  border-color:rgba(228,171,83,.32);
  box-shadow:0 0 0 38px rgba(17,30,62,.02);
}
body.page-id-233 .cta-box h2{color:var(--s5-tinte)}
body.page-id-233 .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-233::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-233 .hero-meta span{font-size:.79rem;padding:6px 13px}
}


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

@media(prefers-reduced-motion:reduce){
  body.page-id-233 .service-row,
  body.page-id-233 .btn,
  body.page-id-233 .et_pb_button{transition:none}
  body.page-id-233 .service-row:hover,
  body.page-id-233 .btn-primary:hover,
  body.page-id-233 .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-233 .service-row{
  min-height:0;
  padding:28px 30px 24px;
}
body.page-id-233 .service-row .marke{margin:0 0 4px}
body.page-id-233 .service-row h3{margin:16px 0 12px}
body.page-id-233 .service-row p{margin:0}
body.page-id-233 .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-233 .section-heading h2{
  font-size:clamp(2.2rem,3.4vw,3.5rem);
}


/* ==========================================================================
   START9 - der Zickzack

   Auf Start5 steht der Text im Auftakt links und das Bild rechts, im naechsten
   Abschnitt umgekehrt, danach wieder wie im Auftakt. Hier kippt jede dieser
   Zuordnungen: der Blick wandert von Abschnitt zu Abschnitt ueber die Achse.

   Umgesetzt ueber grid-column, nicht ueber order. Beides tauscht die Plaetze,
   aber die Spaltenbreiten des Rasters haengen an der Position, nicht am Kind -
   mit grid-column laesst sich die passende Breite gleich mitgeben, sonst
   bekaeme das Bild die schmalere Spalte des Textes.

   Die Reihenfolge im Markup bleibt unangetastet: Bildschirmleser und
   Tastaturbedienung laufen weiter in der urspruenglichen Folge. Auf schmalen
   Schirmen faellt die Spaltenzuweisung ganz weg, dort steht wie bisher der
   Text zuerst.
   ========================================================================== */

@media(min-width:961px){

  /* ---------- Auftakt: Bild nach links, Text nach rechts -------------------- */

  body.page-id-233 .hero-grid{grid-template-columns:1.07fr .93fr}
  body.page-id-233 .hero-visual{grid-column:1;grid-row:1}
  body.page-id-233 .hero-copy{grid-column:2;grid-row:1}

  /* Der Bogen war nach rechts eingerueckt (72 px links, 12 px rechts). Steht er
     links, muss die Einrueckung mitwandern, sonst klebt er am Fensterrand. */
  body.page-id-233 .hero-arch{inset:0 72px 0 12px}
  /* Die Notizkarte sass unten links am Bogen; dort stiesse sie jetzt nach
     aussen und wandert deshalb auf die rechte Seite des Bogens. */
  body.page-id-233 .hero-note{left:auto;right:8px}


  /* ---------- Die Reise: Text nach links, Bild nach rechts ------------------ */

  body.page-id-233 .soul-intro-grid{grid-template-columns:.98fr 1.02fr}
  body.page-id-233 .soul-copy{grid-column:1;grid-row:1}
  body.page-id-233 .ritual-photo{grid-column:2;grid-row:1}
  /* Spiegelbild der Einrueckung: vorher 52 px Luft rechts, jetzt links. */
  body.page-id-233 .ritual-photo-main{inset:0 0 0 52px}


  /* ---------- Wiedererkennen: Liste nach links, Einleitung nach rechts ------ */

  /* Dieser Abschnitt wird bewusst NICHT gespiegelt: die Einleitung
     "Vielleicht erkennst du dich hier wieder" bleibt links, die Kaesten stehen
     rechts. Der Zickzack laeuft ueber Auftakt, Reise und Abschluss. */


  /* ---------- Abschluss: Schaltflaeche nach links, Text nach rechts --------- */

  body.page-id-233 .cta-box{grid-template-columns:.7fr 1.3fr}
  body.page-id-233 .cta-action{grid-column:1;grid-row:1;justify-content:flex-start}
  body.page-id-233 .cta-box>.et_pb_column:not(.cta-action){grid-column:2;grid-row:1}
  body.page-id-233 .cta-box h2,
  body.page-id-233 .cta-box p{text-align:right}
  body.page-id-233 .cta-box p{margin-left:auto}
}


/* ---------- Eckige Schaltflaechen statt Pillen --------------------------------

   Der Entwurf gibt .btn ein border-radius von 999px, also die volle Pillenform;
   dieselbe Rundung tragen die drei Haltungsworte im Auftakt. Hier stehen beide
   als Rechtecke mit leicht gebrochenen Ecken.
   -------------------------------------------------------------------------- */

body.page-id-233 .btn,
body.page-id-233 .et_pb_button,
body.page-id-233 .et_pb_button.btn-primary,
body.page-id-233 .et_pb_button.btn-secondary,
body.page-id-233 .et_pb_bg_layout_light.et_pb_button{border-radius:6px}

body.page-id-233 .hero-meta span{border-radius:4px}
body.page-id-233 .nav-contact{border-radius:6px}


/* ---------- Die Haltungsworte ohne Kaestchen ----------------------------------

   Start5 stellt "bewertungsfrei / achtsam / respektvoll" in weisse Pillen mit
   Rand. Hier stehen sie als reiner Text; nur der goldene Punkt bleibt als
   Trennzeichen stehen. Ohne Kaestchen braucht die Zeile mehr Abstand zwischen
   den Worten, sonst laufen sie ineinander.
   -------------------------------------------------------------------------- */

body.page-id-233 .hero-meta{gap:10px 30px}
body.page-id-233 .hero-meta span{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  gap:11px;
  font-size:.95rem;
  font-weight:500;
}