/* ==========================================================================
   Die Seite "Ueber mich" (66) im Kleid der Startseite

   Die Seite ist am 13.08.2026 aus dem Entwurf B01 hervorgegangen und hat die\n   fruehere Begleitungsseite (102, jetzt im Papierkorb) abgeloest. Inhalt und\n   Aufbau stammen unveraendert von dort.
   Geaendert ist allein das Aussehen: dieselbe Farbfamilie, dieselbe Typografie
   und dieselben Bausteine wie auf Start14.

   Die Abschnitte 1 bis 4 sind wortgleich aus start14.css uebernommen (Palette,
   Kopf- und Fusszeile, Schrift, Schaltflaechen) - nur die Seiten-Kennung ist
   eine andere. Was danach kommt, betrifft die Bausteine, die es nur auf dieser
   Seite gibt: den Seitenkopf, die Angebotskarten, das gruene Band und den
   Kasten zur Unterkunft.

   Der feste Drachengrund aus start5.css ist nicht dabei - der Drache traegt
   hier wie auf Start14 nur den Kopf.

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


/* ---------- 1. bis 4. stehen jetzt im Basisblatt ---------------------------

   Farbwerte, Kopf- und Fusszeile, Schrift und Schaltflaechen standen hier
   wortgleich wie in den anderen Seitenblaettern. Seit dem 13.08.2026 stehen
   sie einmal in style.css (Abschnitt "DIE PALETTE DER SEITE") und gelten fuer
   jede Seite. Dieses Blatt traegt nur noch, was dieser Seite eigen ist.
   -------------------------------------------------------------------------- */


/* ---------- 5. Der Seitenkopf ---------------------------------------------------

   Im Entwurf ist er ein tiefes Pflaumenband mit weisser Schrift. Auf Start14
   traegt der Kopf das Drachenbild, licht und mit dunkelblauer Schrift darauf -
   genau das bekommt diese Seite auch, nur flacher: sie ist eine Unterseite,
   ihr Kopf soll den Auftakt der Startseite nicht wiederholen, sondern ihn
   zitieren.

   Der Aufbau ist derselbe wie dort: das Bild als eigene Ebene (nur so laesst
   es sich weich zeichnen, ohne die Schrift mitzunehmen), darueber ein
   diagonaler Schleier, links offen fuer den Drachen, rechts dicht fuer den
   Text. Beide Ebenen liegen auf z-index:-1, deshalb steht die Sektion auf
   isolation:isolate.
   -------------------------------------------------------------------------- */

body.page-id-66 .page-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* Oben etwas weniger als unten: der Pfad ist von der Oberkante an den Fuss
     gewandert, der Text darf entsprechend hoeher stehen. */
  padding:104px 0 112px;
  color:var(--s5-tinte-weich);
  background:var(--s5-himmel);
}
body.page-id-66 .page-hero::before{
  content:"";
  display:block;
  position:absolute;
  inset:-40px;
  z-index:-1;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:url("Lumentra-Lichtdrache-Blumental.webp") left top / cover no-repeat;
  filter:blur(var(--s14-unschaerfe));
  clip-path:inset(40px);
}
body.page-id-66 .page-hero::after{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:-1;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:
    linear-gradient(100deg,
      rgba(231,238,248,.04) 0%,
      rgba(231,238,248,.10) 30%,
      rgba(240,245,252,.60) 52%,
      rgba(244,248,253,.86) 72%,
      rgba(244,248,253,.92) 100%);
}

/* Ausrichtung wie im Auftakt von Start14.

   Wichtig zu wissen, warum das nicht "rechts" heisst: Auf Start14 steht der
   Text in der LINKEN Spalte des Satzspiegels, rechts daneben sitzt der
   Portraetkreis. Der Text beginnt dort also am linken Rand der Zeile (732 px
   im Fenster von 2544), und der Drache endet bei rund 460 px - beide kommen
   sich nicht ins Gehege. Auf B01 gibt es kein Bild in der rechten Spalte;
   dieselbe Ausrichtung heisst hier deshalb schlicht: Text linksbuendig am
   Anfang der Zeile, Breite wie die Textspalte auf Start14.

   Zwei Fallen dabei:
   1. .page-hero-inner ist die Divi-Zeile selbst. Eine eigene Breite mit
      margin-left:auto stellt sie an den Rand des FENSTERS, nicht an den des
      Satzspiegels. Die Zeile behaelt deshalb ihre Breite von Divi
      (min(80%,1080px), mittig) - verschoben wird nur ihr Inhalt.
   2. Die Spalte laesst sich nicht ueber width steuern, die Bruecke setzt
      width:auto!important. max-width ist frei und begrenzt die Zeilenlaenge
      auf das Mass der Textspalte von Start14. */
body.page-id-66 .page-hero-inner{
  position:relative;
  z-index:1;
  /* Dieselbe Breite wie die Zeilen der uebrigen Sektionen (1080 px), damit der
     Text rechts genau dort endet, wo darunter die Karten enden. Die 930 px
     max-width des Entwurfs muessen dafuer weichen - ohne eigene Breite waere
     die Zeile sonst 80 Prozent des Fensters breit. */
  width:min(1080px,calc(100% - 44px));
  max-width:none;
  margin-inline:auto;
  display:flex;
  justify-content:flex-start;
  text-align:left;
}
body.page-id-66 .page-hero-inner .et_pb_column{max-width:min(700px,100%)}
/* Ueberschrift und Vorspann ruecken naeher an die Kleinzeile: Divi haelt in der
   Spalte 30 px zwischen allen Modulen, dazu kamen 18 px margin-top an der
   Ueberschrift - zusammen 48 px unter "Begleitung". Jetzt sind es 24. */
body.page-id-66 .page-hero-inner .et_pb_column{row-gap:20px}
body.page-id-66 .page-hero h1{
  color:var(--s5-titel);
  font-size:clamp(2.4rem,4.2vw,3.9rem);
  line-height:1.08;
  /* Kein Eigenabstand nach unten: den Abstand zum Vorspann setzt allein der
     Zeilenabstand der Spalte (20 px). Damit steht der Vorspann so dicht unter
     der Ueberschrift wie im Auftakt von Start14. */
  margin:4px 0 0;
}
body.page-id-66 .page-hero .lead{color:var(--s5-tinte-weich)}
body.page-id-66 .page-hero .eyebrow{color:var(--s5-gold-tief)}
body.page-id-66 .page-hero .eyebrow::before{background:var(--s5-gold)}

/* Der Pfad ganz oben stand in Weiss auf dem dunklen Band des Entwurfs und war
   auf dem hellen Kopf kaum zu sehen. */
/* Der Pfad steht nicht mehr ueber der Kleinzeile, sondern unter dem Vorspann
   am Fuss des Kopfes (Kundenwunsch). Die Spalte ist ein senkrechter
   Flexcontainer, ein order genuegt also - der Seiteninhalt bleibt unberuehrt.
   Sein Abstand nach unten aus dem Entwurf entfaellt dabei, dafuer bekommt er
   einen nach oben. */
body.page-id-66 .page-hero-inner .et_pb_column>.et_pb_text:first-child{
  order:2;
  /* Ganz an den Fuss des Kopfes, knapp ueber der Kante zur naechsten Sektion.
     Frei gestellt statt im Fluss: so waechst der Kopf nicht mit, der Pfad legt
     sich in die Polsterung, die ohnehin da ist. Bezugspunkt ist die Zeile
     (.page-hero-inner steht auf position:relative), deshalb sitzt left:0 genau
     am linken Rand des Satzspiegels - dort, wo auch die Ueberschrift beginnt. */
  position:absolute;
  left:0;
  bottom:-78px;
  margin:0;
}
body.page-id-66 .breadcrumb{
  color:var(--s5-tinte-weich);
  margin:0;
}
body.page-id-66 .breadcrumb a{color:var(--s5-tinte)}
body.page-id-66 .breadcrumb a:hover{color:var(--s5-gold-tief)}

/* ---------- 7. Das Band mit dem Portraet ----------------------------------------

   Ein Band ueber die volle Breite: links das Portraet, rechts ein dunkler
   Block mit dem Text. Der Entwurf haelt ihn in Pflaume; hier steht dasselbe
   Marineblau wie in der Fusszeile und auf der Kontaktkarte.

   Wichtig: Die Palette faerbt h2 und p dunkelblau. Auf dem dunklen Grund
   muessen beide ausdruecklich auf Weiss zurueck, sonst stehen sie unsichtbar
   auf ihrem eigenen Grund. */

/* Kein Blau ausserhalb des Kastens (Kundenwunsch): Die Sektion selbst wird
   durchsichtig, der dunkle Ton liegt nur noch auf dem Textkasten. Damit das
   Portraet direkt an ihm anliegt, muessen beide ihre Rasterzelle ganz
   ausfuellen - das Bildmodul blieb sonst auf seiner Eigenbreite stehen, und
   Divi haelt die Zeile auf 80 Prozent der Zelle. */
body.page-id-66 .prayer-band{
  /* Das Dunkelblau laeuft wieder durch - aber nur in diesem Band, nicht als
     Flaeche um einen schwebenden Kasten. Links neben dem Portraet bleibt es
     stehen, rechts geht es in den Textkasten ueber. */
  background:linear-gradient(150deg,#1b2f6e,#1b2f6e);
  gap:0;
  min-height:0;
  align-items:stretch;
}

/* Das Bild ist genau so hoch wie der Kasten daneben - nicht umgekehrt. Dafuer
   darf es zur Hoehe der Rasterzeile nichts beitragen: sein Rahmen liegt
   deshalb frei ueber der Zelle (position:absolute), die Zeile richtet sich
   allein nach dem Text. Der Ausschnitt (cover) waehlt dann selbst, welcher
   Teil der Aufnahme zu sehen ist. */
/* Die Rasterzellen des Bandes sind nicht die Module, sondern die beiden
   Divi-Zeilen. Damit das Bild die Hoehe des Kastens annimmt, muessen Zeile,
   Spalte und Modul die Hoehe durchreichen; rechtsbuendig wird es ueber die
   Spalte gestellt, die ein senkrechter Flexcontainer ist. */
body.page-id-66 .prayer-band>.et_pb_row:first-of-type,
body.page-id-66 .prayer-band>.et_pb_row:first-of-type>.et_pb_column{height:100%}
body.page-id-66 .prayer-band>.et_pb_row:first-of-type>.et_pb_column{align-items:flex-end}
body.page-id-66 .prayer-image{
  position:relative;
  width:min(100%,560px);
  height:100%;
  min-height:0;
  overflow:hidden;
}
body.page-id-66 .prayer-image .et_pb_image_wrap{
  display:block;
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
}
body.page-id-66 .prayer-image img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
body.page-id-66 .prayer-band>.et_pb_row{width:100%;max-width:none}
body.page-id-66 .prayer-copy{
  background:
    radial-gradient(circle at 80% 18%,rgba(228,171,83,.16),transparent 28%),
    linear-gradient(150deg,#1b2f6e,#1b2f6e);
}
body.page-id-66 .prayer-copy::after{border-color:rgba(228,171,83,.20)}
body.page-id-66 .prayer-copy .eyebrow{color:var(--s5-gold-weich)}
body.page-id-66 .prayer-copy .eyebrow::before{background:var(--s5-gold)}
body.page-id-66 .prayer-copy h2,
body.page-id-66 .prayer-copy h3{color:#fff}
body.page-id-66 .prayer-copy p{color:rgba(255,255,255,.76)}

/* Der Name unter dem Absatz steht wie eine Unterschrift: Serifenschrift,
   kursiv, im weichen Gold der Kleinzeile - und mit etwas Luft darueber,
   damit er nicht als weitere Textzeile gelesen wird. */
body.page-id-66 .prayer-copy .signatur{
  margin:30px 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.35rem;
  line-height:1.2;
  color:var(--s5-gold-weich);
}
/* Die Aufnahme steht unbearbeitet - der Sepiaton des Entwurfs passt nicht zur
   kuehlen Familie. Der Verlauf an der Bildkante wechselt ins Blau. */
body.page-id-66 .prayer-image img{filter:none}
body.page-id-66 .prayer-image::after{
  background:linear-gradient(90deg,transparent 62%,rgba(27,47,110,.30));
}

/* ---------- 9. Aus dem gruenen Band wird eine blaue Bank ------------------------ */

body.page-id-66 .sage-section{
  background:
    radial-gradient(circle at 18% 12%,rgba(246,227,194,.26),transparent 30%),
    linear-gradient(145deg,#dde7f4,#e6eef9 55%,#dde7f4);
}
body.page-id-66 .prose h2{color:var(--s5-titel)}
body.page-id-66 .prose h3{color:var(--s5-tinte)}
body.page-id-66 .prose p,
body.page-id-66 .prose ul,
body.page-id-66 .prose li{color:var(--s5-tinte-weich)}
body.page-id-66 .prose h2{font-size:clamp(2rem,3.2vw,3.2rem)}


/* ---------- 10. Die Kleinzeile mit dem Strich davor ----------------------------- */

body.page-id-66 .eyebrow{font-size:.84rem}
body.page-id-66 .eyebrow::before{width:46px}


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

@media(max-width:900px){
  body.page-id-66{--s14-unschaerfe:1.5px}
  body.page-id-66 .page-hero{padding:92px 0 84px}
  body.page-id-66 .page-hero-inner{display:block}

  /* Das Portraet darf hier nicht verschwinden. Am Schirm traegt es keine
     Hoehe bei (der Bildrahmen steht frei ueber der Zelle), damit es genauso
     hoch wird wie der Textkasten daneben. Einspaltig gibt es aber nichts
     mehr, woran es sich messen koennte - deshalb bekommt es hier eine
     eigene Hoehe. */
  body.page-id-66 .prayer-image{
    width:100%;
    min-height:clamp(320px,72vw,460px);
  }
}