/* ==========================================================================
   ZWEIKLANG - Designtest fuer Start10 (Seite 235)

   Nach einem vom Kunden gelieferten Entwurf. Drei Dinge tragen ihn:

   1. Zweifarbige Leitzeilen. Der zweite Teil jeder Ueberschrift steht kursiv
      in Ocker. Im Seiteninhalt ist er dafuer in ein <em> gefasst - das ist
      die einzige inhaltliche Abweichung dieser Kopie gegenueber Start5.
   2. Eine warme, fast unbunte Flaeche (#f8f6f4) mit Ocker als einzigem Ton.
      Kein Blau, kein Drachengrund: die Seite ist ruhig und papierhaft.
   3. Ein schmaler Satzspiegel und sehr viel Weissraum. Der Text laeuft nie
      ueber die volle Breite, sondern steht als ruhige Kolumne.

   Die Farbwerte sind aus dem gelieferten Bild gemessen: Grund #f8f5f8,
   Ueberschrift nahezu schwarz, Ocker der Schaltflaeche #eda63f, Ocker der
   Kursivstellen #aa6400, Fliesstext #584546. Fuer die Kursivstellen liegt
   der Wert hier bei #9c5c00 statt #aa6400 - der gelieferte Ton erreicht auf
   dem hellen Grund nur 4,3:1, dieser 4,9:1.

   Technik: wird nur auf Seite 235 geladen (novamira-sandbox/
   lumentra-start10.php). Alle Regeln haengen an body.page-id-235.
   ========================================================================== */


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

body.page-id-235{
  --grund:#f8f6f4;
  --papier:#ffffff;
  --tinte:#1a1714;
  --text:#584546;
  --text-hell:#7d6c68;
  --ocker:#eda63f;
  --ocker-schrift:#9c5c00;
  --ocker-tief:#523a13;
  --ocker-blass:#f7e6c9;
  --linie:rgba(26,23,20,.13);
  --linie-fein:rgba(26,23,20,.07);

  /* Variablen des gelieferten Entwurfs umbelegen. */
  --ivory:#f8f6f4;
  --paper:#ffffff;
  --cream:#f2ede7;
  --mist:#ece5dc;
  --sage:#d8c9a8;
  --sage-soft:#f7f2ea;
  --lavender:#e6dccd;
  --rose:#f7e6c9;
  --plum:#1a1714;
  --plum-deep:#100e0c;
  --gold:#eda63f;
  --gold-soft:#f7e6c9;
  --ink:#3b3230;
  --muted:#584546;
  --line:rgba(26,23,20,.13);
  --shadow:0 24px 60px rgba(60,44,20,.10);
  --shadow-soft:0 12px 30px rgba(60,44,20,.07);

  background:var(--grund);
  color:var(--text);
}


/* ---------- 2. Der schmale Satzspiegel ---------------------------------------

   Divi setzt die Zeile ueber .et_pb_row auf width:min(80%,1080px) und gewinnt
   per Spezifitaet gegen die .wrap-Regel des Entwurfs. Deshalb wird hier die
   Divi-Zeile selbst schmaler gestellt.
   -------------------------------------------------------------------------- */

@media(min-width:1000px){
  body.page-id-235 .et_pb_row:not([class*="et_flex_column"]){
    width:min(86%,880px);
  }
  /* Der Auftakt darf breiter stehen, weil dort Bild und Text nebeneinander
     laufen; alles andere bleibt Kolumne. */
  body.page-id-235 .hero .et_pb_row:not([class*="et_flex_column"]){
    width:min(88%,1080px);
  }
}


/* ---------- 3. Zweifarbige Leitzeilen -----------------------------------------

   Das <em> im Seiteninhalt traegt den Ocker und die Kursive. Die Ueberschrift
   selbst bleibt in der Serifenschrift des Entwurfs.
   -------------------------------------------------------------------------- */

body.page-id-235 h1,
body.page-id-235 h2,
body.page-id-235 h3{color:var(--tinte)}

body.page-id-235 h1{font-size:clamp(2.4rem,3.9vw,3.7rem);line-height:1.14;letter-spacing:-.02em}
body.page-id-235 h2{font-size:clamp(1.9rem,2.8vw,2.7rem);line-height:1.16;letter-spacing:-.018em}
body.page-id-235 h3{font-size:clamp(1.15rem,1.5vw,1.4rem);letter-spacing:-.008em}

body.page-id-235 h1 em,
body.page-id-235 h2 em,
body.page-id-235 h3 em{
  color:var(--ocker-schrift);
  font-style:italic;
  font-weight:inherit;
}

body.page-id-235 p{color:var(--text)}
body.page-id-235 .lead{color:var(--text);font-size:1.02rem;max-width:54ch}

body.page-id-235 .eyebrow{
  color:var(--text-hell);
  font-size:.63rem;
  letter-spacing:.28em;
  gap:0;
}
body.page-id-235 .eyebrow::before{display:none}

body.page-id-235 .marke{
  width:6px;
  height:6px;
  transform:none;
  border-radius:50%;
  border:0;
  background:var(--ocker);
  box-shadow:none;
}


/* ---------- 4. Kopf- und Fusszeile -------------------------------------------- */

body.page-id-235 .site-header{
  background:rgba(248,246,244,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie-fein);
}
body.page-id-235 .brand strong{color:var(--tinte)}
body.page-id-235 .brand span{color:var(--text-hell)}
body.page-id-235 .nav-links a{color:var(--tinte)}
body.page-id-235 .nav-links a:not(.nav-contact)::after{background:var(--ocker)}
body.page-id-235 .nav-contact{
  border-color:rgba(26,23,20,.22);
  background:transparent;
  color:var(--tinte);
}
body.page-id-235 .nav-contact:hover{
  background:var(--ocker);
  border-color:var(--ocker);
  color:var(--ocker-tief);
}
body.page-id-235 .menu-button{border-color:var(--linie);background:transparent}
body.page-id-235 .menu-button span,
body.page-id-235 .menu-button span::before,
body.page-id-235 .menu-button span::after{background:var(--tinte)}

body.page-id-235 .site-footer{
  background:var(--grund);
  border-top:1px solid var(--linie);
  color:var(--text);
}
body.page-id-235 .site-footer a{color:var(--tinte)}
body.page-id-235 .footer-note{color:var(--text-hell)}


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

   Ocker als Flaeche mit dunkelbrauner Schrift, wie im Vorbild - 5,1:1. Die
   zweite Schaltflaeche ist dort keine Flaeche, sondern eine unterstrichene
   Zeile mit Pfeil.
   -------------------------------------------------------------------------- */

body.page-id-235 .btn{
  min-height:48px;
  padding:0 24px;
  font-size:.87rem;
  font-weight:600;
}
body.page-id-235 .btn-primary,
body.page-id-235 .et_pb_button.btn-primary,
body.page-id-235 .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-235 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary{
  background:var(--ocker);
  border-color:var(--ocker);
  color:var(--ocker-tief);
}
body.page-id-235 .btn-primary:hover,
body.page-id-235 .et_pb_button.btn-primary:hover,
body.page-id-235 .et_pb_bg_layout_light.et_pb_button.btn-primary:hover{
  background:#e0951f;
  border-color:#e0951f;
  color:var(--ocker-tief);
  transform:none;
  box-shadow:none;
}

body.page-id-235 .btn-secondary,
body.page-id-235 .et_pb_button.btn-secondary,
body.page-id-235 .et_pb_bg_layout_light.et_pb_button.btn-secondary{
  min-height:48px;
  padding:0 2px;
  border:0;
  border-bottom:1px solid var(--linie);
  border-radius:0;
  background:none;
  color:var(--tinte);
  font-weight:500;
}
body.page-id-235 .et_pb_button.btn-secondary:hover,
body.page-id-235 .et_pb_bg_layout_light.et_pb_button.btn-secondary:hover{
  background:none;
  border-bottom-color:var(--tinte);
  color:var(--tinte);
}


/* ---------- 6. Auftakt ---------------------------------------------------------

   Ruhige Flaeche, kein Verlauf, keine Zierkreise. Das Bild steht als
   Rechteck mit weich gebrochenen Ecken.
   -------------------------------------------------------------------------- */

body.page-id-235 .hero{
  background:var(--grund);
  padding:112px 0 124px;
  overflow:visible;
}
body.page-id-235 .hero::before,
body.page-id-235 .hero::after{display:none}
body.page-id-235 .hero-grid{
  grid-template-columns:1.02fr .98fr;
  gap:72px;
  align-items:center;
}
body.page-id-235 .hero-copy{padding:0}
body.page-id-235 .hero-copy h1{margin:16px 0 22px;max-width:17ch}
body.page-id-235 .hero-copy .lead{margin:0 0 26px}

/* Die Haltungsworte als reine Textzeile, ohne Kaestchen. */
body.page-id-235 .hero-meta{
  margin:0 0 30px;
  gap:10px 26px;
  color:var(--text-hell);
  font-size:.86rem;
  font-weight:400;
}
body.page-id-235 .hero-meta span{
  gap:10px;
  padding:0;
  border:0;
  background:none;
}
body.page-id-235 .hero-meta i{
  width:5px;
  height:5px;
  transform:none;
  border:0;
  border-radius:50%;
  background:var(--ocker);
}
body.page-id-235 .hero-meta br{display:none}

body.page-id-235 .hero-visual{min-height:0;position:relative}
body.page-id-235 .hero-orbit{display:none}
body.page-id-235 .hero-arch{
  position:relative;
  inset:auto;
  width:100%;
  aspect-ratio:4/5;
  border-radius:14px;
  border:0;
  background:var(--mist);
  box-shadow:var(--shadow);
  overflow:hidden;
}
body.page-id-235 .hero-arch img{object-position:72% 26%}
body.page-id-235 .hero-arch::after{display:none}

/* Die Notiz steht unter dem Bild im Fluss. */
body.page-id-235 .hero-note{
  position:static;
  width:auto;
  margin:22px 0 0;
  padding:0;
  background:none;
  backdrop-filter:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}
body.page-id-235 .hero-note strong{
  font-family:var(--sans);
  font-size:.93rem;
  font-weight:500;
  line-height:1.55;
  color:var(--tinte);
}
body.page-id-235 .hero-note small{color:var(--text-hell);margin-top:6px}


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

   Im Vorbild steht dieser Abschnitt ohne Bild als reine Kolumne, die
   Schlusszeile kursiv in Ocker mit einem Vierstern. Das Bild bleibt hier
   erhalten, rueckt aber unter den Text.
   -------------------------------------------------------------------------- */

body.page-id-235 .soul-intro{
  padding:124px 0;
  background:var(--grund);
  overflow:visible;
}
body.page-id-235 .soul-intro::before{display:none}
body.page-id-235 .soul-intro-grid{
  grid-template-columns:1fr;
  gap:64px;
}
body.page-id-235 .soul-copy{order:1}
body.page-id-235 .ritual-photo{order:2;min-height:0;position:relative}
body.page-id-235 .ritual-photo::after{display:none}
body.page-id-235 .ritual-photo-main{
  position:relative;
  inset:auto;
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  border:0;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  background:#fff;
}
body.page-id-235 .ritual-photo-main .et_pb_image_wrap{display:block;width:100%;height:100%}
body.page-id-235 .ritual-photo-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  opacity:.86;
}
body.page-id-235 .soul-copy h2{margin:14px 0 22px;max-width:20ch}
body.page-id-235 .soul-copy p{max-width:56ch}

/* Die Schlusszeile: kursiv in Ocker, mit einem Vierstern wie im Vorbild. */
body.page-id-235 .ritual-caption{
  margin:34px 0 0;
  max-width:20ch;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.35rem,1.9vw,1.75rem);
  line-height:1.34;
  color:var(--ocker-schrift);
}
body.page-id-235 .ritual-caption::after{
  content:" \2726";
  font-style:normal;
  color:var(--ocker);
}


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

   Zwei Spalten feiner Zeilen mit Trennlinie, keine Kaesten.
   -------------------------------------------------------------------------- */

body.page-id-235 .recognition-visual{
  padding:124px 0;
  background:var(--grund);
  overflow:visible;
}
body.page-id-235 .recognition-visual::before,
body.page-id-235 .recognition-visual::after{display:none}
body.page-id-235 .signs-grid{
  grid-template-columns:1fr;
  gap:46px;
}
body.page-id-235 .sticky-intro{position:static;padding:0}
body.page-id-235 .sticky-intro h2{margin:14px 0 12px;max-width:22ch}
body.page-id-235 .sticky-intro p{color:var(--text-hell);max-width:52ch}

body.page-id-235 .sign-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 56px;
}
body.page-id-235 .sign-item{
  align-items:flex-start;
  gap:14px;
  padding:17px 0;
  border-bottom:1px solid var(--linie-fein);
  background:none;
  border-radius:0;
}
body.page-id-235 .sign-item p{font-size:.93rem;line-height:1.62;color:var(--text)}
body.page-id-235 .sign-item .marke{margin:8px 0 0}


/* ---------- 9. Begleitung: die Liste -------------------------------------------

   Im Vorbild vier schlichte Zeilen mit kleiner Ziffer und Pfeil - keine
   Kacheln. Die Ziffern kommen aus einem Zaehler, der Inhalt bleibt unberuehrt.
   -------------------------------------------------------------------------- */

body.page-id-235 .dark-section{
  padding:124px 0;
  color:var(--text);
  background:var(--grund);
  overflow:visible;
}
body.page-id-235 .dark-section::before,
body.page-id-235 .dark-section::after{display:none}
body.page-id-235 .dark-section h2,
body.page-id-235 .dark-section h3{color:var(--tinte)}
body.page-id-235 .dark-section .section-heading p{color:var(--text-hell)}
body.page-id-235 .dark-section .eyebrow{color:var(--text-hell)}

body.page-id-235 .section-heading{
  grid-template-columns:1fr;
  gap:14px;
  margin-bottom:52px;
}
body.page-id-235 .section-heading h2{margin:14px 0 0;max-width:20ch}
body.page-id-235 .section-heading p{max-width:54ch}

body.page-id-235 .service-list{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  counter-reset:s10;
}
body.page-id-235 .service-row{
  display:grid;
  grid-template-columns:34px 1fr 26px;
  gap:0 18px;
  align-items:center;
  min-height:0;
  height:auto;
  padding:22px 0;
  background:none;
  backdrop-filter:none;
  border:0;
  border-top:1px solid var(--linie-fein);
  border-radius:0;
  overflow:visible;
  transition:background .2s ease;
}
body.page-id-235 .service-list .et_pb_code:last-of-type .service-row{
  border-bottom:1px solid var(--linie-fein);
}
body.page-id-235 .service-row::before{
  display:block;
  counter-increment:s10;
  content:counter(s10,decimal-leading-zero);
  position:static;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--text-hell);
}
body.page-id-235 .service-row:hover{
  transform:none;
  background:rgba(237,166,63,.06);
  border-color:var(--linie-fein);
}
body.page-id-235 .service-row .marke{display:none}
body.page-id-235 .service-row h3{margin:0;color:var(--tinte);font-weight:400}
/* Der Beschreibungstext traegt die Zeile nicht mit; im Vorbild steht dort nur
   der Titel. Er bleibt fuer Bildschirmleser erhalten, faellt aber optisch weg. */
body.page-id-235 .service-row p{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
body.page-id-235 .service-row .arrow{
  margin:0;
  padding:0;
  justify-self:end;
  font-size:1rem;
  color:var(--text-hell);
  transition:transform .2s ease;
}
body.page-id-235 .service-row:hover .arrow{transform:translateX(5px);color:var(--ocker-schrift)}


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

   Im Vorbild ein helles Wolkenband mit kursivem Satz in der Mitte.
   -------------------------------------------------------------------------- */

body.page-id-235 .quote-panel{
  min-height:0;
  margin:0 auto;
  padding:96px 8%;
  color:var(--tinte);
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(rgba(255,252,247,.62),rgba(247,230,201,.52)),
    url("light.jpg") center 48%/cover no-repeat;
}
body.page-id-235 .quote-panel::before,
body.page-id-235 .quote-panel::after{display:none}
body.page-id-235 .quote-panel blockquote{
  margin:0 auto;
  padding:0;
  max-width:16ch;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.4rem,2.2vw,2.05rem);
  line-height:1.34;
  letter-spacing:-.01em;
  color:var(--tinte);
  border:0;
  text-align:center;
}


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

   Kein dunkler Kasten: eine weisse Karte auf der ruhigen Flaeche.
   -------------------------------------------------------------------------- */

body.page-id-235 .cta-section{
  padding:124px 0 132px;
  background:var(--grund);
}
body.page-id-235 .cta-box{
  grid-template-columns:1fr;
  gap:28px;
  align-items:start;
  padding:56px 8%;
  border-radius:14px;
  border:1px solid var(--linie-fein);
  color:var(--text);
  background:var(--papier);
  box-shadow:var(--shadow-soft);
}
body.page-id-235 .cta-box::after{display:none}
body.page-id-235 .cta-box h2{color:var(--tinte);max-width:18ch}
body.page-id-235 .cta-box p{margin:14px 0 0;color:var(--text);max-width:50ch}
body.page-id-235 .cta-action{justify-content:flex-start}


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

@media(max-width:1000px){
  body.page-id-235 .hero{padding:88px 0 92px}
  body.page-id-235 .soul-intro,
  body.page-id-235 .recognition-visual,
  body.page-id-235 .dark-section{padding:92px 0}
  body.page-id-235 .hero-grid{grid-template-columns:1fr;gap:48px}
  body.page-id-235 .sign-list{grid-template-columns:1fr;gap:0}
  body.page-id-235 .quote-panel{padding:72px 7%}
  body.page-id-235 .cta-section{padding:92px 0 96px}
}

@media(max-width:680px){
  body.page-id-235 .hero-arch{aspect-ratio:1/1}
  body.page-id-235 .ritual-photo-main{aspect-ratio:4/3}
  body.page-id-235 .service-row{grid-template-columns:30px 1fr 22px;gap:0 14px}
}


/* ---------- 13. Bewegungsreduktion ------------------------------------------------ */

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


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

   Links buendig und fest stehend wie auf Start5. Das Blatt ist kuehl-blau, die
   Seite warm - deshalb ein leichter Waermefilter. Bewusst OHNE grayscale: das
   loeschte genau den Unterschied zwischen weissem Drachen und hellem Himmel,
   wie sich auf Start7 gezeigt hat.

   Der Schleier liegt als eigene Ebene darueber, damit ihn der Filter des Bildes
   nicht mit erfasst. Damit das Bild durchscheint, werden alle Sektionsgruende
   halbtransparent; die weisse Abschlusskarte bleibt deckend.
   -------------------------------------------------------------------------- */

body.page-id-235::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:url("Lumentra-Lichtdrache-Bergtal.webp") left top / cover no-repeat;
  filter:saturate(.5) sepia(.22) contrast(1.08) brightness(1.02);
}

body.page-id-235::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(248,246,244,.14) 0%,
    rgba(248,246,244,.38) 44%,
    rgba(248,246,244,.62) 76%,
    rgba(248,246,244,.76) 100%);
}

body.page-id-235 .hero{background:rgba(248,246,244,.34)}
body.page-id-235 .soul-intro{background:rgba(248,246,244,.46)}
body.page-id-235 .recognition-visual{background:rgba(248,246,244,.40)}
body.page-id-235 .dark-section{background:rgba(248,246,244,.46)}
body.page-id-235 .cta-section{background:transparent}
body.page-id-235 .site-footer{background:rgba(248,246,244,.72)}