/* ==========================================================================
   Die Rechtstexte 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.lumentra-recht 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.lumentra-recht .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.lumentra-recht .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.lumentra-recht .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.lumentra-recht .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.lumentra-recht .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.lumentra-recht .page-hero-inner .et_pb_column{row-gap:20px}
body.lumentra-recht .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.lumentra-recht .page-hero .lead{color:var(--s5-tinte-weich)}
body.lumentra-recht .page-hero .eyebrow{color:var(--s5-gold-tief)}
body.lumentra-recht .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.lumentra-recht .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.lumentra-recht .breadcrumb{
  color:var(--s5-tinte-weich);
  margin:0;
}
body.lumentra-recht .breadcrumb a{color:var(--s5-tinte)}
body.lumentra-recht .breadcrumb a:hover{color:var(--s5-gold-tief)}


/* ---------- 6. Die Textkaesten -------------------------------------------------

   Die Seite besteht aus vier Kaesten unter dem Kopf. Sie bekommen dieselbe
   Fassung wie die Karten der uebrigen Seiten: weisse Flaeche, feine blaue
   Linie, weicher Schatten.
   -------------------------------------------------------------------------- */

body.lumentra-recht .paper{
  background:
    radial-gradient(circle at 84% 12%,rgba(246,227,194,.24),transparent 30%),
    linear-gradient(135deg,#ffffff 0%,#f4f8fd 55%,#eaf1fa 100%);
}
body.lumentra-recht .legal-box{
  border:1px solid var(--s5-linie);
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 40px rgba(17,40,82,.07);
}
body.lumentra-recht .legal-box h2{
  color:var(--s5-titel);
  font-size:clamp(1.5rem,2.1vw,1.95rem);
}
body.lumentra-recht .legal-box p,
body.lumentra-recht .legal-box li{color:var(--s5-tinte-weich)}


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

body.lumentra-recht .eyebrow{font-size:.84rem}
body.lumentra-recht .eyebrow::before{width:46px}


/* ---------- 8. Kleine Schirme --------------------------------------------------- */

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

/* ---------- 9. Lange Rechtstexte: AGB und Datenschutzerklaerung ----------------

   Die AGB-Seite traegt seit dem 13.08.2026 einen ausformulierten Entwurf, die
   Datenschutzseite seit dem 15.08.2026 den Text aus dem eRecht24-Generator.
   Beide stehen im selben weissen Kasten wie die uebrigen Rechtstexte, brauchen
   darin aber eine eigene Gliederung: Abschnitte als h2, Absaetze knapp, und bei
   den AGB die offenen Punkte in roten Kaesten dazwischen.

   Die Klassen .agb-text und .rechtstext teilen sich diese Regeln. Ohne sie
   erben die Ueberschriften die Marketing-Grade der Website (h2 bis 3,5 rem) und
   die Absaetze stehen ohne Abstand aufeinander - fuer eine Seite mit 38
   Ueberschriften unlesbar.
   -------------------------------------------------------------------------- */

body.lumentra-recht .agb-text h2,
body.lumentra-recht .rechtstext h2{
  margin:44px 0 10px;
  font-size:clamp(1.24rem,1.7vw,1.5rem);
  color:var(--s5-titel);
}
body.lumentra-recht .agb-text h2:first-of-type,
body.lumentra-recht .rechtstext h2:first-of-type{margin-top:8px}

/* Auf dem Impressum beginnt der Text mit dem Adressblock, nicht mit einer
   Ueberschrift. Dort braucht auch die erste h2 ihren vollen Abstand - sonst
   klebt "Kontakt" an der Anschrift darueber. */
body.lumentra-recht .rechtstext h2:first-of-type:not(:first-child){margin-top:44px}
body.lumentra-recht .agb-text h3,
body.lumentra-recht .rechtstext h3{
  margin:26px 0 6px;
  font-size:1.05rem;
  color:var(--s5-tinte);
}

/* Der Datenschutztext hat vier Ebenen, die AGB nur drei. Damit die dritte Ebene
   nicht schwaecher wirkt als die vierte, wird sie hier angehoben: Die h4 stehen
   in der Groteske und halbfett, die h3 daurber in der Serife - ohne mehr Gewicht
   wuerde die kleinere, aber fette Ebene optisch gewinnen. */
body.lumentra-recht .rechtstext h3{font-size:1.12rem;font-weight:600}

/* Der Datenschutztext gliedert eine Stufe tiefer als die AGB - die Fragen unter
   "Datenerfassung auf dieser Website" stehen als h4. */
body.lumentra-recht .rechtstext h4{
  margin:18px 0 4px;
  font-size:.97rem;
  font-weight:600;
  color:var(--s5-tinte);
}
body.lumentra-recht .agb-text p,
body.lumentra-recht .rechtstext p{margin:0 0 10px;line-height:1.72}
body.lumentra-recht .agb-text ul,
body.lumentra-recht .rechtstext ul{margin:8px 0 14px;padding-left:20px}
body.lumentra-recht .agb-text li,
body.lumentra-recht .rechtstext li{margin:5px 0;line-height:1.66}
body.lumentra-recht .agb-text .stand{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--s5-linie);
  font-size:.92rem;
}

/* Die offenen Punkte. */
body.lumentra-recht .klaerung{
  margin:16px 0 26px;
  padding:16px 20px 14px 22px;
  border-left:4px solid #b3261e;
  border-radius:0 16px 16px 0;
  background:rgba(179,38,30,.055);
}
body.lumentra-recht .klaerung .klaerung-titel{
  margin:0 0 8px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#b3261e;
}
body.lumentra-recht .klaerung p,
body.lumentra-recht .klaerung li{color:#8c1d18}
body.lumentra-recht .klaerung ul{margin:0;padding-left:18px}
body.lumentra-recht .klaerung li::marker{color:#b3261e}
body.lumentra-recht .klaerung:last-child{margin-bottom:0}

/* Der Kasten ganz oben trennt den Entwurfsstatus vom Text selbst. */
body.lumentra-recht .klaerung-oben{
  margin:0 0 34px;
  border-left-width:6px;
}

@media(max-width:680px){
  body.lumentra-recht .klaerung{padding:14px 16px 12px 16px;border-radius:0 12px 12px 0}
}