/* ==========================================================================
   SANDSTEIN - Designtest fuer Start11 (Seite 253)

   Nach einer vom Kunden gelieferten Entwurfsseite (higgsfield). Ihre Merkmale:

   1. Warmes Sand als Grundton, in zwei Helligkeiten abwechselnd.
   2. Salbeigruen als einziger Akzent - Schaltflaechen, Labels, und ein
      Zitatband, das ueber die volle Breite laeuft.
   3. Serifen-Ueberschriften in einem sehr dunklen Tannenton.
   4. Bilder als Rechtecke mit grosser Rundung und weichem Schatten.
   5. Angebote als helle Karten mit Serifentitel und unterstrichenem Link.
   6. Kursive Serifenzeilen als Abbinder der Textabschnitte.

   Die Farbwerte sind aus den gelieferten Bildern gemessen: Sand #f5efe3,
   heller Sand #fbf8f1, Karte #f8f4e9, Ueberschrift #1b2b27, Fliesstext
   #394e48, Salbei #778b7c, Label und Links #4b6555.

   Eine Abweichung: der Salbeiton der Schaltflaechen traegt weisse Schrift im
   Vorbild mit nur 3,6:1. Fuer Schaltflaechentext sind 4,5:1 noetig, deshalb
   steht dort #5f7565 (5,0:1) - optisch praktisch derselbe Ton. Das grosse
   kursive Zitat darf auf dem hellen Salbei stehen bleiben: fuer Schriften
   dieser Groesse genuegen 3:1.

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


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

body.page-id-253{
  --sand:#f5efe3;
  --sand-hell:#fbf8f1;
  --karte:#f8f4e9;
  --papier:#ffffff;

  --tanne:#1b2b27;
  --text:#394e48;
  --text-hell:#6b7d75;

  --salbei:#778b7c;
  --salbei-knopf:#5f7565;
  --salbei-schrift:#4b6555;
  --salbei-blass:#e4ebe2;

  --linie:rgba(27,43,39,.13);
  --linie-fein:rgba(27,43,39,.07);

  /* Variablen des gelieferten Entwurfs umbelegen. */
  --ivory:#f5efe3;
  --paper:#ffffff;
  --cream:#f8f4e9;
  --mist:#eee7d8;
  --sage:#a8bba9;
  --sage-soft:#e4ebe2;
  --lavender:#dfe6da;
  --rose:#eee7d8;
  --plum:#1b2b27;
  --plum-deep:#10211b;
  --gold:#778b7c;
  --gold-soft:#e4ebe2;
  --ink:#2c3d38;
  --muted:#394e48;
  --line:rgba(27,43,39,.13);
  --shadow:0 28px 60px rgba(50,60,40,.12);
  --shadow-soft:0 14px 34px rgba(50,60,40,.08);

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


/* ---------- 2. Schrift ---------------------------------------------------------

   Die Ueberschriften bleiben in der Serifenschrift des Entwurfs, laufen aber
   etwas ruhiger als dort: das Vorbild setzt sie deutlich kleiner als die
   7 rem der Vorlage.
   -------------------------------------------------------------------------- */

body.page-id-253 h1,
body.page-id-253 h2,
body.page-id-253 h3{color:var(--tanne);font-weight:400}
body.page-id-253 h1{font-size:clamp(2.5rem,4.2vw,4rem);line-height:1.1;letter-spacing:-.012em}
body.page-id-253 h2{font-size:clamp(2rem,3.1vw,3rem);line-height:1.16;letter-spacing:-.01em}
body.page-id-253 h3{font-size:clamp(1.25rem,1.6vw,1.5rem);letter-spacing:-.004em}

body.page-id-253 p{color:var(--text)}
body.page-id-253 .lead{color:var(--text);font-size:1.04rem;max-width:56ch}

/* Das Label: kurzer Strich, dann gesperrte Versalien in Salbei. */
body.page-id-253 .eyebrow{
  color:var(--salbei-schrift);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.22em;
  gap:14px;
}
body.page-id-253 .eyebrow::before{
  width:34px;
  height:1px;
  background:var(--salbei);
}

body.page-id-253 .marke{
  width:6px;
  height:6px;
  transform:none;
  border-radius:50%;
  border:0;
  background:#c9ad7f;
  box-shadow:none;
}


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

   Im Vorbild traegt die Kopfzeile die Marke links, die Navigation rechts und
   den Kontaktpunkt als hell gefuellte Pille mit Rand.
   -------------------------------------------------------------------------- */

body.page-id-253 .site-header{
  background:rgba(251,248,241,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie-fein);
}
body.page-id-253 .brand strong{color:var(--tanne)}
body.page-id-253 .brand span{color:var(--text-hell)}
body.page-id-253 .nav-links a{color:var(--text)}
body.page-id-253 .nav-links a:not(.nav-contact)::after{background:var(--salbei)}
body.page-id-253 .nav-contact{
  border-color:rgba(119,139,124,.45);
  background:var(--karte);
  color:var(--tanne);
}
body.page-id-253 .nav-contact:hover{
  background:var(--salbei-knopf);
  border-color:var(--salbei-knopf);
  color:#fff;
}
body.page-id-253 .menu-button{border-color:var(--linie);background:var(--karte)}
body.page-id-253 .menu-button span,
body.page-id-253 .menu-button span::before,
body.page-id-253 .menu-button span::after{background:var(--tanne)}

body.page-id-253 .site-footer{
  background:var(--sand);
  border-top:1px solid var(--linie-fein);
  color:var(--text);
}
body.page-id-253 .site-footer a{color:var(--tanne)}
body.page-id-253 .footer-note{color:var(--text-hell)}


/* ---------- 4. Schaltflaechen ---------------------------------------------------

   Salbeigruene Pille mit weisser Schrift. Die zweite Schaltflaeche ist im
   Vorbild keine Flaeche, sondern eine unterstrichene Zeile mit Pfeil.
   -------------------------------------------------------------------------- */

body.page-id-253 .btn{
  min-height:52px;
  padding:0 30px;
  font-size:.92rem;
  font-weight:500;
}
body.page-id-253 .btn-primary,
body.page-id-253 .et_pb_button.btn-primary,
body.page-id-253 .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-253 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary{
  background:var(--salbei-knopf);
  border-color:var(--salbei-knopf);
  color:#fff;
  box-shadow:0 10px 24px rgba(95,117,101,.24);
}
body.page-id-253 .btn-primary:hover,
body.page-id-253 .et_pb_button.btn-primary:hover,
body.page-id-253 .et_pb_bg_layout_light.et_pb_button.btn-primary:hover{
  background:#4f6455;
  border-color:#4f6455;
  color:#fff;
  transform:translateY(-1px);
}

body.page-id-253 .btn-secondary,
body.page-id-253 .et_pb_button.btn-secondary,
body.page-id-253 .et_pb_bg_layout_light.et_pb_button.btn-secondary{
  min-height:52px;
  padding:0 2px;
  border:0;
  border-bottom:1px solid rgba(75,101,85,.45);
  border-radius:0;
  background:none;
  color:var(--salbei-schrift);
  font-weight:500;
}
body.page-id-253 .et_pb_button.btn-secondary:hover,
body.page-id-253 .et_pb_bg_layout_light.et_pb_button.btn-secondary:hover{
  background:none;
  border-bottom-color:var(--salbei-schrift);
  color:var(--tanne);
}
/* Divi haengt seinen eigenen Pfeil an; im Vorbild steht er dauerhaft. */
body.page-id-253 .btn-secondary::after{
  content:"\2192";
  opacity:1;
  margin-left:10px;
  font-family:inherit;
  font-size:1rem;
}


/* ---------- 5. Auftakt ----------------------------------------------------------

   Ein weiter, sehr weicher Lichtschein statt der Zierkreise des Entwurfs.
   -------------------------------------------------------------------------- */

body.page-id-253 .hero{
  padding:118px 0 128px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 22% 34%,rgba(255,255,255,.55),transparent 62%),
    radial-gradient(ellipse 60% 55% at 88% 18%,rgba(255,252,242,.6),transparent 60%),
    linear-gradient(165deg,#f7f2e7 0%,var(--sand) 52%,#f2ebdd 100%);
}
body.page-id-253 .hero::before,
body.page-id-253 .hero::after{display:none}
body.page-id-253 .hero-grid{
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}
body.page-id-253 .hero-copy{padding:0}
body.page-id-253 .hero-copy h1{margin:22px 0 24px;max-width:15ch}
body.page-id-253 .hero-copy .lead{margin:0 0 28px}

/* Die Haltungsworte als Textzeile mit Trennpunkten. */
body.page-id-253 .hero-meta{
  margin:0 0 34px;
  gap:10px 20px;
  color:var(--text-hell);
  font-size:.92rem;
  font-weight:400;
}
body.page-id-253 .hero-meta span{gap:20px;padding:0;border:0;background:none}
body.page-id-253 .hero-meta i{
  width:3px;
  height:3px;
  transform:none;
  border:0;
  border-radius:50%;
  background:var(--text-hell);
}
body.page-id-253 .hero-meta span:first-child i{display:none}
body.page-id-253 .hero-meta br{display:none}

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

/* Die Notiz steht als Bildunterschrift unter dem Bild, kursiv und mittig -
   so setzt das Vorbild seine Bildlegenden. */
body.page-id-253 .hero-note{
  position:static;
  width:auto;
  margin:18px 0 0;
  padding:0;
  background:none;
  backdrop-filter:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  text-align:center;
}
body.page-id-253 .hero-note strong{
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:400;
  font-style:italic;
  line-height:1.5;
  color:var(--text-hell);
}
body.page-id-253 .hero-note small{color:var(--text-hell);margin-top:5px;font-style:italic}


/* ---------- 6. Die Reise --------------------------------------------------------- */

body.page-id-253 .soul-intro{
  padding:120px 0;
  background:var(--sand-hell);
  overflow:visible;
}
body.page-id-253 .soul-intro::before{display:none}
body.page-id-253 .soul-intro-grid{
  grid-template-columns:.95fr 1.05fr;
  gap:76px;
  align-items:center;
}
body.page-id-253 .ritual-photo{min-height:0;position:relative}
body.page-id-253 .ritual-photo::after{display:none}
body.page-id-253 .ritual-photo-main{
  position:relative;
  inset:auto;
  width:100%;
  aspect-ratio:1/1;
  border-radius:30px;
  border:0;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#fff;
}
body.page-id-253 .ritual-photo-main .et_pb_image_wrap{display:block;width:100%;height:100%}
body.page-id-253 .ritual-photo-main img{width:100%;height:100%;object-fit:cover;opacity:.94}
body.page-id-253 .soul-copy h2{margin:20px 0 22px;max-width:18ch}
body.page-id-253 .soul-copy p{max-width:54ch}

/* Der Abbinder: kursive Serife hinter einem Salbeistrich. */
body.page-id-253 .ritual-caption{
  margin:32px 0 0;
  padding:4px 0 4px 20px;
  border-left:2px solid var(--salbei);
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.1rem,1.4vw,1.32rem);
  line-height:1.45;
  color:var(--tanne);
}


/* ---------- 7. Wiedererkennen -----------------------------------------------------

   Einleitung ueber die Breite, darunter zwei Spalten feiner Punktzeilen.
   -------------------------------------------------------------------------- */

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

body.page-id-253 .sign-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px 72px;
}
body.page-id-253 .sign-item{
  align-items:flex-start;
  gap:14px;
  padding:12px 0;
  border:0;
  background:none;
  border-radius:0;
}
body.page-id-253 .sign-item p{font-size:.99rem;line-height:1.62;color:var(--text)}
body.page-id-253 .sign-item .marke{margin:9px 0 0}


/* ---------- 8. Begleitung: helle Karten ------------------------------------------- */

body.page-id-253 .dark-section{
  padding:120px 0;
  color:var(--text);
  background:var(--sand-hell);
  overflow:visible;
}
body.page-id-253 .dark-section::before,
body.page-id-253 .dark-section::after{display:none}
body.page-id-253 .dark-section h2,
body.page-id-253 .dark-section h3{color:var(--tanne)}
body.page-id-253 .dark-section .section-heading p{color:var(--text-hell)}
body.page-id-253 .dark-section .eyebrow{color:var(--salbei-schrift)}

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

body.page-id-253 .service-list{grid-template-columns:repeat(2,1fr);gap:26px}
body.page-id-253 .service-row{
  min-height:0;
  height:100%;
  padding:34px 34px 30px;
  border:1px solid var(--linie-fein);
  border-radius:22px;
  background:var(--karte);
  backdrop-filter:none;
  box-shadow:none;
  overflow:visible;
  transition:box-shadow .22s ease,transform .22s ease;
}
body.page-id-253 .service-row::before{display:none}
body.page-id-253 .service-row:hover{
  transform:translateY(-3px);
  background:var(--karte);
  border-color:rgba(119,139,124,.34);
  box-shadow:var(--shadow-soft);
}
body.page-id-253 .service-row .marke{display:none}
body.page-id-253 .service-row h3{margin:0 0 14px;color:var(--tanne)}
body.page-id-253 .service-row p{margin:0 0 22px;color:var(--text);font-size:.98rem}

/* Statt des blossen Pfeils traegt die Karte im Vorbild einen beschrifteten
   Link. Der Text kommt aus dem Blatt, damit der Seiteninhalt unberuehrt
   bleibt; der Pfeil des Entwurfs steht dahinter. */
body.page-id-253 .service-row .arrow{
  margin-top:auto;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:1rem;
  color:var(--salbei-schrift);
  border-bottom:1px solid rgba(201,173,127,.7);
  padding-bottom:3px;
  transition:border-color .2s ease;
}
body.page-id-253 .service-row .arrow::before{
  content:"Mehr erfahren";
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:500;
}
body.page-id-253 .service-row:hover .arrow{
  transform:none;
  border-bottom-color:var(--salbei-schrift);
}


/* ---------- 9. Zitat: das Salbeiband ----------------------------------------------

   Ueber die volle Breite, weisse kursive Serife in der Mitte. Das grosse
   Schriftbild traegt den Kontrast von 3,6:1 (ab dieser Groesse genuegen 3:1).
   -------------------------------------------------------------------------- */

body.page-id-253 .quote-panel{
  min-height:0;
  padding:96px 8%;
  color:#fff;
  border-radius:0;
  background:var(--salbei);
}
body.page-id-253 .quote-panel::before,
body.page-id-253 .quote-panel::after{display:none}
body.page-id-253 .quote-panel blockquote{
  margin:0 auto;
  padding:0;
  max-width:24ch;
  border:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2.3rem);
  line-height:1.42;
  letter-spacing:0;
  color:#fff;
  text-align:center;
}


/* ---------- 10. Abschluss: mittig, ohne Kasten ------------------------------------- */

body.page-id-253 .cta-section{
  padding:120px 0 128px;
  background:var(--sand);
}
body.page-id-253 .cta-box{
  grid-template-columns:1fr;
  gap:26px;
  justify-items:center;
  padding:0;
  border:0;
  border-radius:0;
  color:var(--text);
  background:none;
  box-shadow:none;
}
body.page-id-253 .cta-box::after{display:none}
body.page-id-253 .cta-box .et_pb_text,
body.page-id-253 .cta-box .et_pb_text_inner,
body.page-id-253 .cta-box h2,
body.page-id-253 .cta-box p{text-align:center}
body.page-id-253 .cta-box h2{color:var(--tanne);max-width:17ch;margin-inline:auto}
body.page-id-253 .cta-box p{margin:16px auto 0;color:var(--text);max-width:48ch}
body.page-id-253 .cta-action{justify-content:center}


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

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

@media(max-width:680px){
  body.page-id-253 .hero-meta{flex-direction:column;align-items:flex-start;gap:8px}
  body.page-id-253 .hero-meta i{display:none}
  body.page-id-253 .service-row{padding:28px 26px 24px}
}


/* ---------- 12. Bewegungsreduktion --------------------------------------------------- */

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


/* ---------- 13. Der Drache als Panoramaband -------------------------------------

   Die gelieferte Entwurfsseite macht es selbst vor: unter dem Text der zweiten
   Sektion steht ein breites, flaches Bild mit dem Drachen im Bergpanorama -
   kein Vollbildgrund, sondern ein Band im Satz.

   Das passt hier aus zwei Gruenden besser als ein fester Seitengrund: die
   Palette ist warm, das Blatt kuehl-blau - grossflaechig wuerde es gegen den
   Sandton arbeiten. Und das Format des Blattes (2,5:1) ist genau ein Band.

   Ein leichter Waermefilter zieht es an die Palette heran, ohne den Drachen zu
   verlieren; grayscale bleibt aussen vor, das loeschte den Kontrast zwischen
   weissem Tier und hellem Himmel.
   -------------------------------------------------------------------------- */

/* Das Band ist dem Kopfbanner gewichen, siehe Abschnitt 14. */


/* ---------- 14. Das Drachenbild als Kopfbanner ---------------------------------

   Statt eines kleinen Bandes im Satz traegt das Panorama jetzt den ganzen Kopf.
   Drei Dinge waren dabei zu loesen:

   1. Das Blatt ist kuehl-blau, die Seite warm. Ein Waermefilter zieht es an die
      Sandfamilie heran - ohne grayscale, das loeschte den Kontrast zwischen
      weissem Drachen und hellem Himmel.
   2. Lesbarkeit: der Text bleibt dunkel und bekommt einen diagonalen Schleier,
      links offen fuer den Drachen, rechts dicht fuer die Schrift.
   3. Der Drache steht links im Bild, der Text sitzt deshalb rechts. Das
      Portraet aus dem alten Auftakt entfaellt auf dieser Variante ganz.
   -------------------------------------------------------------------------- */

body.page-id-253 .hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:min(84vh,720px);
  padding:112px 0 120px;
  overflow:hidden;
  background:
    linear-gradient(100deg,
      rgba(245,239,227,.08) 0%,
      rgba(245,239,227,.14) 34%,
      rgba(247,242,231,.66) 56%,
      rgba(249,245,236,.88) 74%,
      rgba(249,245,236,.94) 100%),
    url("Lumentra-Lichtdrache-Bergtal.webp") left center / cover no-repeat;
}
body.page-id-253 .hero::before,
body.page-id-253 .hero::after{display:none}

/* Der Filter darf nicht auf .hero liegen - er wuerde den Text mit erfassen.
   Deshalb traegt eine eigene Ebene das Bild samt Waerme, der Text steht
   darueber. */
body.page-id-253 .hero>.et_pb_row{position:relative;z-index:1}

body.page-id-253 .hero-grid{
  grid-template-columns:1fr;
  gap:0;
  align-items:center;
}
body.page-id-253 .hero-copy{
  grid-column:1;
  justify-self:end;
  width:min(560px,100%);
  padding:0;
  display:flex;
  /* Divi setzt die Spalte auf flex-direction:column; ohne diese Zeile bleibt
     jede Schaltflaeche in ihrer eigenen Zeile. */
  flex-direction:row;
  flex-wrap:wrap;
  align-content:center;
  align-items:flex-start;
}
body.page-id-253 .hero-copy>.et_pb_text{width:100%}
body.page-id-253 .hero-copy>.et_pb_button_module_wrapper{width:auto;margin:0 16px 0 0}
body.page-id-253 .hero-copy h1{
  margin:18px 0 22px;
  max-width:none;
  font-size:clamp(2.3rem,3.9vw,3.6rem);
}
body.page-id-253 .hero-copy .lead{margin:0 0 24px;max-width:44ch}

/* Der Bogen mit dem Portraet gehoert nicht mehr in den Kopf. */
body.page-id-253 .hero-visual{display:none}

/* Das Portraet wurde hier zunaechst unter dem Text nachgestellt, nachdem es
   aus dem Auftakt gewichen war. Auf Kundenwunsch faellt es ganz weg: die
   Sektion traegt schon das Handbild, ein zweites Bild daneben macht sie
   unruhig. Das Portraet bleibt auf den uebrigen Varianten erhalten. */

@media(max-width:900px){
  body.page-id-253 .hero{
    min-height:0;
    padding:88px 0 92px;
    background:
      linear-gradient(180deg,
        rgba(247,242,231,.34) 0%,
        rgba(249,245,236,.76) 46%,
        rgba(249,245,236,.92) 100%),
      url("Lumentra-Lichtdrache-Bergtal.webp") 32% center / cover no-repeat;
  }
  body.page-id-253 .hero-copy{justify-self:stretch;width:auto}
}