/* ==========================================================================
   LICHTACHSE - Designtest fuer Startseite2 (Seite 208)

   Konzept
   -------
   Eine durchgehende senkrechte Haarlinie laeuft ueber die gesamte Seite. An
   jedem Abschnittsuebergang sitzt ein warmer Lichtpunkt darauf. Saemtliche
   Labels, Ueberschriften und Listen haengen an dieser Achse, dadurch liest
   sich die Seite als ein System und nicht als Folge von Bloecken.

   Genau zwei Elemente brechen aus der Achse aus: das Portraet laeuft rechts
   aus dem Bild, das Ritualfoto laeuft links aus dem Bild. Diese beiden
   Ausbrueche tragen die Spannung der Seite, alles andere bleibt ruhig.

   Aufzaehlungen und Angebote stehen als Haarlinienzeilen, nicht als Karten.
   Erhebung wird nur dort eingesetzt, wo sie etwas bedeutet.

   Technik
   -------
   Wird ausschliesslich auf Seite 208 geladen, siehe
   novamira-sandbox/lumentra-startseite2.php. Der Seiteninhalt bleibt
   unveraendert, geaendert werden nur Licht, Farbe, Form und Rhythmus.

   Alle Regeln sind auf body.page-id-208 eingegrenzt. Das hebt zugleich die
   Spezifitaet ueber die des gelieferten Entwurfs, deshalb kommt !important
   nirgends vor. Die aktive Richtung der Website bleibt unberuehrt.
   ========================================================================== */


/* ---------- 1. Farbwerte ---------------------------------------------------
   Der Entwurf arbeitet durchgehend mit Variablen. Sie hier neu zu belegen,
   faerbt jede Regel mit, die sie benutzt. Die alten Namen bleiben erhalten,
   damit nichts ins Leere laeuft: --gold traegt jetzt das warme Gelb,
   --plum ein tiefes warmes Braunschwarz.

   #e8b33a ist hell: gegen Weiss erreicht es nur 1.9:1 und kann keine weisse
   Schrift tragen. Deshalb drei Abstufungen derselben Familie:
   #3a2a0e als Schrift auf der Gelbflaeche (7.3:1),
   #8a6212 fuer kleine gelbe Schrift auf hellem Grund (5.3:1),
   #f0dca0 auf dunklem Grund (9.6:1).

   Auch die Neutraltoene und die tiefe Flaeche sind zum Gelb hin gebogen,
   sonst stuenden zwei nicht verwandte Farbfamilien nebeneinander. */

body.page-id-208{
  --ivory:#faf8f2;
  --paper:#fffdf7;
  --cream:#f4efe2;
  --mist:#f3e8cd;
  /* Salbei, Lavendel und Rose des Entwurfs kommen auf dieser Seite nicht vor.
     Sie werden trotzdem auf die Gelbfamilie gelegt, damit keine Regel des
     Entwurfsblatts einen fremden Rest durchscheinen lassen kann. */
  --sage:#f0dca0;
  --sage-soft:#f4efe2;
  --lavender:#f0dca0;
  --rose:#f7e9c4;
  --plum:#2e2a22;
  --plum-deep:#1d1a13;
  --gold:#e8b33a;
  --gold-soft:#f0dca0;
  --ink:#2e2a22;
  --muted:#6a6152;
  --line:rgba(46,42,34,.15);
  --white-line:rgba(255,255,255,.22);
  --shadow:0 34px 80px rgba(58,46,18,.13);
  --shadow-soft:0 16px 40px rgba(58,46,18,.085);

  --accent:#e8b33a;
  --accent-deep:#8a6212;
  --accent-soft:#f0dca0;
  --on-accent:#3a2a0e;
  --glow:#f7e9c4;

  --axis-line:rgba(46,42,34,.22);
  --axis-dot:#e8b33a;

  background:var(--ivory);
  color:var(--ink);
}


/* ---------- 2. Die Lichtachse ---------------------------------------------
   Ein Pseudoelement je Sektion, 9px breit: darin eine 1.5px-Linie ueber die
   volle Hoehe und oben ein Lichtpunkt. Die Sektionen stossen ohne Abstand
   aneinander, deshalb ergeben die einzelnen Stuecke eine durchgehende Linie
   und die Punkte markieren genau die Uebergaenge.

   Die x-Position folgt dem Satzspiegel. Wichtig: die .wrap-Regel des Entwurfs
   greift nicht, Divi 5 setzt die Zeile ueber
   .et_pb_row:not([class*="et_flex_column"]) auf min(80%, 1080px) und gewinnt
   mit der hoeheren Spezifitaet. Der linke Rand ist deshalb
   max(10%, (100% - 1080px)/2), die Achse steht 30px links davon.

   Die Achse liegt hinter dem Inhalt (z-index 0). Das Ritualfoto laeuft
   darueber und unterbricht sie sichtbar, das ist beabsichtigt. */

body.page-id-208 .hero::after,
body.page-id-208 .soul-intro::before,
body.page-id-208 .recognition-visual::before,
body.page-id-208 .dark-section::after,
body.page-id-208 .quote-panel::before,
body.page-id-208 .cta-section::before{
  content:"";
  display:block;
  position:absolute;
  left:max(8px,calc(max(10%,(100% - 1080px) / 2) - 30px));
  top:0;
  bottom:0;
  right:auto;
  width:9px;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  background:
    radial-gradient(circle at 4.5px 7px,var(--axis-dot) 0 3.5px,transparent 4px) no-repeat,
    linear-gradient(var(--axis-line),var(--axis-line)) 4px 0 / 1.5px 100% no-repeat;
  pointer-events:none;
  z-index:0;
}
/* Auf der tiefen Flaeche kehrt sich die Achse um. */
body.page-id-208 .dark-section{
  --axis-line:rgba(240,220,160,.28);
  --axis-dot:#f0dca0;
}
body.page-id-208 .cta-section{position:relative}

/* Die Deko-Ringe des Entwurfs entfallen. Sie waren das Motiv der alten
   Richtung und wuerden hier mit der Achse und den Lichtkreisen konkurrieren. */
body.page-id-208 .recognition-visual::after{display:none}

/* Der Drache aus der Mediathek (Bronze-Fassung) liegt unten links leicht
   angeschnitten im Hintergrund, als Gegengewicht zum rechts angeschnittenen
   Portraetkreis. Die Lichtachse (hero::after) zeichnet spaeter und laeuft
   ueber ihn hinweg. */
body.page-id-208 .hero::before{
  content:"";
  display:block;
  position:absolute;
  left:-90px;
  right:auto;
  top:auto;
  bottom:-110px;
  width:min(560px,46vw);
  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:.15;
  pointer-events:none;
  z-index:0;
}


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

body.page-id-208 .site-header{
  background:rgba(250,248,242,.90);
  border-bottom:1px solid rgba(46,42,34,.10);
}
body.page-id-208 .nav-contact{
  border-color:rgba(46,42,34,.28);
  background:rgba(255,255,255,.55);
}
body.page-id-208 .nav-contact:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
body.page-id-208 .menu-button{
  border-color:var(--line);
  background:rgba(255,255,255,.65);
}

body.page-id-208 .site-footer{
  background:linear-gradient(150deg,#2a2415,#1a160d);
  border-top:1px solid rgba(240,220,160,.20);
  color:rgba(255,255,255,.72);
}
body.page-id-208 .footer-note{color:rgba(255,255,255,.48)}


/* ---------- 4. Schrift ----------------------------------------------------
   Der Groessenkontrast traegt die Hierarchie: die Ueberschrift steht gross
   und eng, der Vorspann klein und auf schmales Mass gesetzt. */

body.page-id-208 h2,
body.page-id-208 h3{letter-spacing:-.04em}
body.page-id-208 .hero-copy h1{
  font-size:clamp(2.4rem,4.4vw,4.4rem);
  letter-spacing:-.042em;
  margin:24px 0 30px;
}
body.page-id-208 .lead{
  max-width:470px;
  font-size:1.06rem;
  color:var(--muted);
}
body.page-id-208 .eyebrow{color:var(--ink)}
body.page-id-208 .dark-section .eyebrow{color:var(--gold-soft)}
body.page-id-208 .dark-section .eyebrow::before{background:var(--gold-soft)}

/* Der Lichtpunkt ersetzt die Raute des Entwurfs. Er ist derselbe Punkt, der
   auf der Achse sitzt, nur kleiner. */
body.page-id-208 .marke{
  width:9px;
  height:9px;
  transform:none;
  border-radius:50%;
  border:1px solid var(--accent);
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(232,179,58,.16);
}
body.page-id-208 .hero-meta i{
  width:7px;
  height:7px;
  transform:none;
  border-radius:50%;
  border-color:var(--accent);
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(232,179,58,.18);
}


/* ---------- 5. Buttons -----------------------------------------------------
   Der Akzent traegt die Hauptflaeche, die Beschriftung steht in tiefem Braun
   darauf: 7.3:1. Weisse Schrift auf #e8b33a waere 1.9:1 und voellig unlesbar. */

body.page-id-208 .btn-primary,
body.page-id-208 .et_pb_button.btn-primary,
body.page-id-208 .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-208 .et_pb_bg_layout_light.et_pb_button.btn-primary:hover,
body.page-id-208 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-208 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
body.page-id-208 .btn-primary:hover,
body.page-id-208 .et_pb_button.btn-primary:hover{
  box-shadow:0 14px 30px rgba(232,179,58,.36);
}
body.page-id-208 .btn-secondary,
body.page-id-208 .et_pb_button.btn-secondary,
body.page-id-208 .et_pb_bg_layout_light.et_pb_button.btn-secondary{
  border-color:rgba(46,42,34,.26);
  background:transparent;
  color:var(--ink);
}
body.page-id-208 .et_pb_button.btn-secondary:hover,
body.page-id-208 .et_pb_bg_layout_light.et_pb_button.btn-secondary:hover{
  background:var(--paper);
  border-color:rgba(46,42,34,.46);
  color:var(--ink);
}


/* ---------- 6. Hero: das Portraet bricht nach rechts aus -------------------
   Der hohe Bogen des Entwurfs weicht einem grossen Lichtkreis, der ueber den
   rechten Bildrand hinauslaeuft. Der Anschnitt ist der erste der beiden
   Ausbrueche und gibt der Seite sofort ihre Richtung.

   Die konzentrischen Ringe stehen als box-shadow am Kreis selbst, dadurch
   sitzen sie immer exakt mittig, unabhaengig von der Spaltenbreite. */

body.page-id-208 .hero{
  padding:104px 0 124px;
  background:
    radial-gradient(ellipse 900px 620px at 88% -6%,rgba(247,233,196,.90),transparent 62%),
    radial-gradient(ellipse 700px 500px at 2% 30%,rgba(244,239,226,.95),transparent 60%),
    var(--ivory);
}

body.page-id-208 .hero-grid{
  grid-template-columns:1.06fr .94fr;
  gap:48px;
  align-items:center;
}

/* Divi-Spalten sind Flexspalten. Die beiden Buttons wurden dadurch
   untereinander gestapelt und auf volle Spaltenbreite gezogen. Sie gehoeren
   nebeneinander und auf ihre eigene Breite.

   Ein Wechsel auf flex-direction:row genuegt nicht, die Module brechen dort
   weiter um. Das Raster stellt die Zuordnung dagegen fest: die Textmodule
   nehmen die volle Breite, die beiden Buttons je eine Spalte der letzten
   Zeile. max-content statt auto, sonst zieht die fr-Spalte den Buttons den
   Platz weg und die Beschriftungen brechen auf zwei Zeilen um. */
body.page-id-208 .hero-copy{
  display:grid;
  grid-template-columns:max-content max-content 1fr;
  justify-items:start;
  align-items:start;
  padding:0;
}
body.page-id-208 .hero-copy>.et_pb_text{grid-column:1 / -1}
body.page-id-208 .hero-copy>.et_pb_button_module_wrapper{
  width:auto;
  margin:0 14px 0 0;
}

body.page-id-208 .hero-visual{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0;
}
/* Der Anschnitt: der Kreis laeuft 60px ueber den Viewportrand hinaus und wird
   von .hero{overflow:hidden} beschnitten. 100vw statt 100% ist noetig, weil
   der Abstand zum Bildrand nicht aus der Spaltenbreite ableitbar ist. Dass
   100vw die Bildlaufleiste mitzaehlt, vergroessert nur den Ueberstand und
   wird ohnehin abgeschnitten. */
body.page-id-208 .hero-arch{
  position:relative;
  inset:auto;
  width:min(560px,160%);
  aspect-ratio:1 / 1;
  margin-right:calc(-1 * max(10vw,(100vw - 1080px) / 2) - 60px);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.92);
  background:var(--mist);
  box-shadow:
    0 0 0 20px rgba(232,179,58,.07),
    0 0 0 21px rgba(232,179,58,.20),
    0 0 0 54px rgba(232,179,58,.045),
    0 0 0 55px rgba(232,179,58,.12),
    var(--shadow);
}
/* Ueber dem Foto liegt Licht, keine Abdunklung. */
body.page-id-208 .hero-arch::after{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(247,233,196,.14));
}

/* Die Lichtscheibe sitzt hinter dem Kreis und gibt dem Anschnitt Tiefe. */
body.page-id-208 .hero-orbit{
  left:auto;
  top:auto;
  right:0;
  bottom:0;
  width:260px;
  height:260px;
  border:0;
  border-radius:50%;
  z-index:0;
  background:radial-gradient(circle,rgba(240,220,160,.62),rgba(240,220,160,0) 70%);
}
body.page-id-208 .hero-orbit::before,
body.page-id-208 .hero-orbit::after{display:none}

/* Die Karte haengt an der linken Flanke des Kreises und ist deshalb von
   rechts her bemasst, wie der Kreis selbst. */
body.page-id-208 .hero-note{
  left:auto;
  right:min(300px,46%);
  bottom:26px;
  width:min(268px,72%);
  padding:22px;
  background:rgba(255,253,247,.94);
  border:1px solid rgba(232,179,58,.30);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
  z-index:2;
}


/* ---------- 7. Die Reise: das Ritualfoto bricht nach links aus -------------
   Der zweite Ausbruch, spiegelbildlich zum ersten. Das Foto laeuft bis an den
   linken Bildrand, die Kante dort ist flach, rechts bleibt der Radius stehen.
   Es laeuft ueber die Lichtachse und unterbricht sie sichtbar. */

body.page-id-208 .soul-intro{
  padding:124px 0;
  background:
    radial-gradient(ellipse 760px 520px at 92% 12%,rgba(247,233,196,.72),transparent 62%),
    var(--ivory);
}
body.page-id-208 .soul-intro-grid{
  grid-template-columns:1.04fr .96fr;
  gap:80px;
  align-items:center;
}
/* Eine spaetere Korrektur des Entwurfs setzt .et_pb_text,.et_pb_image auf
   position:static und schlaegt damit das position:absolute von
   .ritual-photo-main. Das Modul steht also im Fluss, der Ausbruch laeuft
   deshalb ueber negativen Aussenabstand statt ueber left. */
body.page-id-208 .ritual-photo{min-height:0}
body.page-id-208 .ritual-photo-main{
  height:min(620px,74vh);
  margin-left:calc(-1 * max(10vw,(100vw - 1080px) / 2) - 8px);
  width:calc(100% + max(10vw,(100vw - 1080px) / 2) + 8px);
  margin-right:0;
  border-radius:0 36px 36px 0;
  border:0;
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:1;
}
/* Divi verschachtelt das Bild in .et_pb_image > .et_pb_image_wrap > img. Der
   Wrapper behaelt seine Ausgangsbreite und gibt die verbreiterte Modulbreite
   nicht weiter, dadurch blieb rechts neben dem Foto ein leerer Streifen. */
body.page-id-208 .ritual-photo-main .et_pb_image_wrap{
  display:block;
  width:100%;
  height:100%;
}
body.page-id-208 .ritual-photo-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 47%;
}
body.page-id-208 .ritual-photo::after{display:none}
body.page-id-208 .ritual-caption{
  margin:30px 0 0;
  color:var(--ink);
}


/* ---------- 8. Wiedererkennen: Haarlinien statt zehn Kaesten --------------
   Zehn gleich aussehende Karten sind ein Raster ohne Aussage. Als geordnete
   Zeilenliste liest sich derselbe Text ruhiger, die Seite wird heller, und
   die Einleitung kann links an der Achse stehen statt mittig zu schweben. */

body.page-id-208 .recognition-visual{
  background:
    radial-gradient(ellipse 820px 560px at 6% 8%,rgba(243,232,205,.85),transparent 62%),
    radial-gradient(ellipse 700px 500px at 96% 84%,rgba(247,233,196,.65),transparent 60%),
    var(--ivory);
}
body.page-id-208 .signs-grid{gap:44px}
body.page-id-208 .sticky-intro{
  max-width:740px;
  justify-self:start;
  margin-bottom:12px;
}
body.page-id-208 .sticky-intro .et_pb_text,
body.page-id-208 .sticky-intro .et_pb_text_inner,
body.page-id-208 .sticky-intro h2,
body.page-id-208 .sticky-intro p{text-align:left}
body.page-id-208 .sticky-intro .eyebrow{justify-content:flex-start}
body.page-id-208 .sticky-intro p{max-width:560px}

body.page-id-208 .sign-list{
  grid-template-columns:1fr 1fr;
  grid-auto-rows:auto;
  gap:0 72px;
  border-top:1px solid var(--line);
}
body.page-id-208 .sign-item{
  min-height:0;
  padding:26px 0;
  gap:16px;
  align-items:flex-start;
  background:none;
  backdrop-filter:none;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
}
body.page-id-208 .sign-item p{
  font-size:1.02rem;
  color:var(--ink);
}
body.page-id-208 .sign-item .marke{margin:11px 0 0}


/* ---------- 9. Begleitung: die eine tiefe Flaeche der Seite ---------------
   Genau ein dunkler Abschnitt verankert den hellen Rest. Aus Pflaume wird
   ein tiefes warmes Braun, damit es zur Gelbfamilie gehoert.

   Die vier Angebote standen als 2x2-Raster gleich aussehender Glaskarten.
   Sie sind jetzt eine editoriale Liste: eine Zeile je Angebot, Titel links,
   Beschreibung rechts, Pfeil aussen. Das ist die vierte verschiedene
   Layoutfamilie der Seite und braucht keine einzige Kastenflaeche. */

body.page-id-208 .dark-section{
  background:
    radial-gradient(ellipse 900px 600px at 12% 4%,rgba(240,220,160,.16),transparent 62%),
    radial-gradient(ellipse 800px 560px at 92% 92%,rgba(232,179,58,.14),transparent 60%),
    linear-gradient(150deg,#241f12,#3a3018 55%,#282212);
}
body.page-id-208 .dark-section::before{opacity:.24}

/* Der Entwurf setzt Ueberschrift und Einleitung nebeneinander. Gestapelt
   liest sich der Abschnittskopf ruhiger und haengt sauber an der Achse. */
body.page-id-208 .section-heading{
  grid-template-columns:1fr;
  gap:20px;
  align-items:start;
  margin-bottom:54px;
}
body.page-id-208 .section-heading p{max-width:620px}

body.page-id-208 .service-list{
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid rgba(240,220,160,.22);
}
body.page-id-208 .service-row{
  display:grid;
  grid-template-columns:24px minmax(190px,.8fr) 1.5fr 44px;
  gap:0 30px;
  align-items:start;
  min-height:0;
  height:auto;
  padding:32px 0;
  background:none;
  backdrop-filter:none;
  border:0;
  border-bottom:1px solid rgba(240,220,160,.22);
  border-radius:0;
  overflow:visible;
}
body.page-id-208 .service-row::before{display:none}
body.page-id-208 .service-row:hover{
  transform:none;
  background:rgba(240,220,160,.06);
  border-color:rgba(240,220,160,.22);
}
body.page-id-208 .service-row .marke{
  margin:15px 0 0;
  border-color:var(--gold-soft);
  background:var(--gold-soft);
  box-shadow:0 0 0 4px rgba(240,220,160,.16);
}
body.page-id-208 .service-row h3{
  margin:0;
  font-size:clamp(1.4rem,2vw,2rem);
}
body.page-id-208 .service-row p{
  margin:0;
  padding-top:7px;
  color:rgba(255,255,255,.74);
}
body.page-id-208 .service-row .arrow{
  margin:0;
  padding:0;
  justify-self:end;
  align-self:center;
  font-size:1.45rem;
  color:var(--gold-soft);
  transition:transform .24s ease;
}
body.page-id-208 .service-row:hover .arrow{transform:translateX(7px)}


/* ---------- 10. Zitatband: Licht ueber dem Bild statt Schatten ------------
   Der Entwurf legt einen dunklen Schleier ueber das Foto und setzt weisse
   Schrift darauf. Hier liegt ein heller Schleier darueber und die Schrift
   steht dunkel. Der Schleier ist so dicht gewaehlt, dass der Kontrast auch
   ueber der dunkelsten Stelle des Fotos ueber 8:1 bleibt.

   Das Zitat steht nicht mittig, sondern haengt an der Achse wie jede andere
   Ueberschrift der Seite. Es ist der groesste Schriftgrad des Dokuments. */

body.page-id-208 .quote-panel{
  min-height:600px;
  place-items:center;
  text-align:left;
  color:var(--plum-deep);
  background:
    linear-gradient(rgba(250,248,242,.86),rgba(250,248,242,.68)),
    url("light.jpg") center 58% / cover no-repeat;
}
/* Divi setzt auf jedes blockquote einen Balken in seinem eigenen Akzentblau.
   Auf der dunklen Flaeche des Entwurfs faellt er kaum auf, auf hellem Grund
   steht er als fremde Farbe mitten im Bild. Der Entwurf sieht ihn nicht vor. */
body.page-id-208 .quote-panel blockquote{
  border:0;
  color:var(--plum-deep);
  width:auto;
  max-width:none;
  margin:0;
  padding:0;
  font-size:clamp(1.9rem,4vw,4rem);
  line-height:1.08;
  letter-spacing:-.042em;
}


/* ---------- 11. Abschluss: heller Aufruf statt dunklem Kasten -------------
   Der Entwurf endet auf einer dunklen Flaeche. Diese Richtung endet im
   Licht, sonst stehen dunkler Abschnitt, Zitat und Abschluss in Folge. */

body.page-id-208 .cta-section{
  padding:104px 0 128px;
  background:var(--ivory);
}
body.page-id-208 .cta-box{
  grid-template-columns:1.25fr .75fr;
  gap:48px;
  padding:64px;
  color:var(--ink);
  border:1px solid rgba(46,42,34,.10);
  border-radius:40px;
  box-shadow:var(--shadow);
  background:
    radial-gradient(ellipse 620px 420px at 88% 14%,rgba(247,233,196,.85),transparent 64%),
    radial-gradient(ellipse 560px 380px at 4% 94%,rgba(243,232,205,.7),transparent 62%),
    var(--paper);
}
/* Der Entwurf setzt die Abschlussueberschrift eine Stufe groesser als jedes
   andere h2. In der linken Spalte lief sie dadurch auf drei Zeilen, waehrend
   rechts neben dem Button Platz frei blieb. */
body.page-id-208 .cta-box h2{
  font-size:clamp(2rem,3.4vw,3.5rem);
  color:var(--plum-deep);
}
body.page-id-208 .cta-box p{color:var(--muted);max-width:520px}


/* ---------- 12. Kleine Schirme --------------------------------------------
   Unter 960px stapeln alle Raster, die beiden Ausbrueche werden zurueckgenommen
   und die Achse entfaellt: auf schmalem Schirm gibt es keinen Rand, an dem sie
   stehen koennte. */

@media(max-width:960px){
  body.page-id-208 .hero-grid{gap:44px}
  body.page-id-208 .hero-visual{justify-content:center;padding:8px 0 0}
  body.page-id-208 .hero-arch{margin-right:0;width:min(460px,92%)}
  body.page-id-208 .hero-note{right:auto;left:0;bottom:10px}
  body.page-id-208 .soul-intro-grid{gap:54px}
  body.page-id-208 .ritual-photo-main{margin-left:0;width:100%;border-radius:36px}
  body.page-id-208 .sign-list{gap:0 48px}
  body.page-id-208 .service-row{grid-template-columns:22px 1fr 36px}
  body.page-id-208 .service-row p{grid-column:2 / 3;padding-top:12px}
  body.page-id-208 .service-row .arrow{grid-column:3;grid-row:1}
}

@media(max-width:680px){
  body.page-id-208 .hero::after,
  body.page-id-208 .soul-intro::before,
  body.page-id-208 .recognition-visual::before,
  body.page-id-208 .dark-section::after,
  body.page-id-208 .quote-panel::before,
  body.page-id-208 .cta-section::before{display:none}

  body.page-id-208 .hero{padding:64px 0 84px}
  body.page-id-208 .hero::before{width:min(360px,88vw);left:-70px;bottom:-70px}
  /* Nebeneinander passen die beiden Buttons hier nicht mehr. */
  body.page-id-208 .hero-copy{grid-template-columns:1fr}
  body.page-id-208 .hero-copy>.et_pb_button_module_wrapper{margin:0 0 12px 0}
  body.page-id-208 .hero-arch{width:min(320px,86%)}
  body.page-id-208 .hero-orbit{display:none}
  body.page-id-208 .hero-note{
    position:static;
    width:auto;
    margin-top:26px;
    padding:20px;
  }
  body.page-id-208 .soul-intro{padding:82px 0}
  body.page-id-208 .ritual-photo-main{height:min(420px,58vh);border-radius:28px}
  body.page-id-208 .ritual-caption{width:auto}
  body.page-id-208 .sign-list{grid-template-columns:1fr;gap:0}
  body.page-id-208 .service-row{padding:26px 0}
  body.page-id-208 .quote-panel{min-height:420px}
  body.page-id-208 .cta-section{padding:72px 0 86px}
  body.page-id-208 .cta-box{padding:38px 26px;border-radius:30px;gap:26px}
}


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

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