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


/* ---------- 6. Die Angebotskarten ----------------------------------------------

   Wie die Karten auf Start14: weisse Flaeche, feine blaue Linie, weicher
   Schatten - und vor der Ueberschrift dieselbe Marke, der Drache im Ring.
   Sie steht hier als ::before am h2 und nicht als eigenes Element, weil der
   gelieferte Inhalt an dieser Stelle keine Marke vorsieht.
   -------------------------------------------------------------------------- */

body.page-id-104 .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.page-id-104 .offer-card{
  border:1px solid var(--s5-linie);
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 40px rgba(17,40,82,.07);
}
/* Der Name des Angebots stand auf 0,7 rem (11 px) und war neben der
   Ueberschrift kaum praesent - auf Kundenwunsch wesentlich groesser. Die
   Sperrung geht dabei eine Stufe zurueck: bei 17 px wirken 0,16 em zu weit. */
body.page-id-104 .offer-card .label{
  color:var(--s5-gold-tief);
  font-size:1.1rem;
  letter-spacing:.11em;
  margin-bottom:22px;
}
/* Die Ueberschriften dieser Karten laufen ueber mehrere Zeilen. Die Marke
   steht deshalb an der ersten Zeile und nicht in der Mitte des Blocks. */
body.page-id-104 .offer-card h2{
  display:flex;
  align-items:flex-start;
  gap:14px;
  color:var(--s5-titel);
  font-size:clamp(1.5rem,1.9vw,1.85rem);
  line-height:1.2;
}
/* Die Marke steht auf Kundenwunsch fast so hoch wie zwei Zeilen der
   Ueberschrift: die Zeile misst bei 1,85 rem und Durchschuss 1,2 rund 36 px,
   zwei also 71 - die 68 px bleiben knapp darunter. Wer die Schriftgroesse
   aendert, zieht diesen Wert mit. */
body.page-id-104 .offer-card h2::before{
  content:"";
  flex:0 0 auto;
  width:68px;
  height:68px;
  margin-top:-2px;
  background:var(--s14-marke) center / contain no-repeat;
}
body.page-id-104 .offer-card p{color:var(--s5-tinte-weich)}
body.page-id-104 .offer-card .meta{
  border-top-color:var(--s5-linie);
  color:var(--s5-tinte-weich);
}
body.page-id-104 .offer-card .meta strong{color:var(--s5-tinte)}/* Weniger Luft um das Bild (Kundenwunsch): oben die halbe Sektionspolsterung
   (56 statt 112 px), unten ein Drittel des Zeilenabstands (20 statt 60 px).
   Die 60 px kommen vom Zeilenabstand der Sektion - sie gelten fuer alle
   Zeilen darin, deshalb wird nur die Bildzeile mit einem negativen
   Aussenabstand zurueckgezogen; der Abstand zwischen Karten und Steuerhinweis
   bleibt, wie er ist. */
body.page-id-104 .paper{padding-top:56px}
body.page-id-104 .et_pb_row:has(img[src*="Lumentra-Workshop-Gruppe"]){margin-bottom:-40px}

/* Dasselbe unter den Karten: der Steuerhinweis stand 90 px tiefer - 60 px
   Zeilenabstand der Sektion plus 30 px Eigenabstand des Absatzes. Jetzt sind
   es 24 px, er gehoert zu den Karten darueber. */


/* Ein Drittel kleiner als der Satzspiegel (720 statt 1080 px), auf
   Kundenwunsch. */
/* Mittig gestellt wird der Bildrahmen, nicht das Bild: Divi packt jedes
   Bildmodul in ein span.et_pb_image_wrap, das sich auf die Bildbreite
   zusammenzieht. Ein margin:auto am img selbst bleibt darin wirkungslos. */
body.page-id-104 .et_pb_image_wrap:has(img[src*="Lumentra-Workshop-Gruppe"]){
  display:block;
  width:100%;
  max-width:720px;
  margin-inline:auto;
}
body.page-id-104 .et_pb_image img[src*="Lumentra-Workshop-Gruppe"]{
  display:block;
  width:100%;
  max-width:720px;
  height:auto;
  margin-inline:auto;
}
body.page-id-104 .prose h2{color:var(--s5-titel)}
body.page-id-104 .prose h3{color:var(--s5-tinte)}
body.page-id-104 .prose p,
body.page-id-104 .prose ul,
body.page-id-104 .prose li{color:var(--s5-tinte-weich)}
body.page-id-104 .prose h2{font-size:clamp(2rem,3.2vw,3.2rem)}

/* ---------- 9. Der Kasten zur Unterkunft ---------------------------------------

   Der Rahmen stand in Gold-Sand, die Bildflaechen in Pflaume-Grau. Beides
   wandert in die kuehle Familie; das Gold bleibt als Akzent am aktiven Punkt
   des Bildwechslers.
   -------------------------------------------------------------------------- */

body.page-id-104 .stay-card{
  background:#fff;
  border-color:rgba(228,171,83,.34);
  box-shadow:0 22px 54px rgba(17,40,82,.09);
}
body.page-id-104 .stay-copy h2{color:var(--s5-titel)}
body.page-id-104 .stay-copy p,
body.page-id-104 .stay-facts li{color:var(--s5-tinte-weich)}
body.page-id-104 .stay-adresse{border-top-color:var(--s5-linie)}
body.page-id-104 .stay-adresse strong{color:var(--s5-tinte)}

/* ---------- 10. Dieselben Abstaende wie auf Start14 ----------------------------

   Dort hat jedes Band 112 px ueber und unter seinem Inhalt. Die Sektionen
   dieser Seite stehen im Entwurf auf 112 px (.section), 88/82 px (Seitenkopf)
   und 96 px (Unterkunft) - der Kasten zieht mit. Der schmale Hinweis oberhalb
   bleibt, wie er ist: er gehoert zum Text darueber, nicht als eigenes Band. */

/* Der Textblock rueckt naeher an die Karte (Kundenwunsch 14.08.2026). Das
   Band darueber traegt keinen Knopf mehr und gehoert jetzt zur Karte, nicht
   mehr als eigenes Band dazwischen - 112 px Abstand trennten beides. Unten
   bleiben die 112 px, dort folgt die naechste Sektion. */
body.page-id-104 .stay-section{padding:44px 0 112px}


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

   Wie auf Start14 eine Spur groesser als im Entwurf; der Strich waechst mit. */

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


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

@media(max-width:900px){
  body.page-id-104{--s14-unschaerfe:1.5px}
  body.page-id-104 .page-hero{padding:92px 0 84px}
  /* width:auto haette die Zeile auf Divis Mobilbreite fallen lassen - und die
     Bruecke setzt dort margin:0, der Text klebte am linken Rand. */
  body.page-id-104 .page-hero-inner{width:calc(100% - 44px);margin-inline:auto}
  body.page-id-104 .offer-card h2{gap:12px}
  body.page-id-104 .offer-card h2::before{width:56px;height:56px}
}

@media(max-width:680px){
  body.page-id-104 .stay-section{padding:82px 0}
}

/* ---------- Die Fugen in den Angebotskarten -------------------------------------

   Zwischen Ueberschrift und Beschreibung standen 45 px: 15 px aus der h2-Regel des
   Basisblatts plus 30 px row-gap, die Divi jeder Flexspalte gibt. Das riss die
   Karte auseinander - besonders dort, wo die Beschreibung nur zwei Zeilen hat.
   Beides ist halbiert, die Fuge betraegt jetzt 23 px.
   -------------------------------------------------------------------------- */
body.page-id-104 .offer-card{row-gap:15px}
body.page-id-104 .offer-card h2{margin-bottom:8px}


/* ---------- Anfrage-Knopf und Unterkunft-Hinweis nebeneinander ------------------

   Der Hinweis auf die Unterkunft stand unter dem Hauptknopf und las sich dadurch
   wie ein zweiter, gleichrangiger Aufruf. Er gehoert daneben: der Hauptknopf bleibt
   der eine Weg, der Hinweis steht als Nebenangebot rechts davon.

   Die Spalte ist eine Divi-Flexspalte und stapelt ihre Module senkrecht. Statt sie
   umzubauen, kippt sie hier in eine Zeile; alle Module bekommen die volle Breite
   zurueck, nur die beiden letzten - Knopf und Hinweisgruppe - duerfen nebeneinander
   stehen. Auf schmalen Bildschirmen bricht die Zeile von selbst wieder um.
   -------------------------------------------------------------------------- */
body.page-id-104 .cta-zeile{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  column-gap:34px;
}
body.page-id-104 .cta-zeile > *{flex:0 0 100%}
body.page-id-104 .cta-zeile > .et_pb_button_module_wrapper{flex:0 0 auto}

/* ---------- Unterkunftskarte wie auf Begleitung (270) ---------------------------
   Die Klammer der Handy-Regel oben war offen geblieben; dadurch galten alle Regeln
   ab hier nur unter 680 px. Am 04.10.2026 geschlossen und die Regeln ergaenzt,
   die begleitung.css fuer dieselbe Karte hat. */
body.page-id-104 .stay-card{grid-template-areas:none;grid-template-rows:auto}
body.page-id-104 .stay-card > .et_pb_column_inner{grid-area:auto;min-width:0}
body.page-id-104 .stay-links{display:flex;flex-direction:column;gap:18px}
body.page-id-104 .stay-copy{row-gap:0}
body.page-id-104 .stay-main{margin:0;border-radius:26px;overflow:hidden;background:var(--s5-bank);aspect-ratio:4/3}
body.page-id-104 .stay-main .et_pb_image_wrap{display:block;height:100%}
body.page-id-104 .stay-main img{width:100%;height:100%;object-fit:cover;display:block}
body.page-id-104 .stay-copy .eyebrow{flex-direction:row;align-items:center;justify-content:flex-start}
body.page-id-104 .stay-copy .eyebrow .et_pb_text_inner{flex:0 1 auto}
body.page-id-104 .stay-copy .eyebrow p{margin:0}
body.page-id-104 .stay-copy .eyebrow p{color:inherit}
body.page-id-104 .stay-copy .et_pb_heading .et_pb_module_header{
  margin:16px 0 20px;
  font-size:clamp(1.7rem,2.4vw,2.3rem);
  color:var(--s5-titel);
}
body.page-id-104 .stay-facts{
  /* Der Abstand nach oben steht in den Optionen des Moduls. */
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:13px 20px;
}
body.page-id-104 .stay-facts .et_pb_icon_list_item{
  display:flex;flex-direction:row;align-items:flex-start;gap:11px;margin:0;padding:0;
}
body.page-id-104 .stay-facts .et-pb-icon{
  flex:0 0 auto;
  width:10px;height:10px;margin:7px 0 0;
  transform:rotate(45deg);
  border:1px solid var(--s5-gold);
  background:var(--s5-gold);
  font-size:0;line-height:0;color:transparent;
}
body.page-id-104 .stay-facts .et_pb_icon_list_text{
  font-size:.94rem;line-height:1.5;color:var(--s5-tinte-weich);
}
body.page-id-104 .stay-adresse{padding-top:22px;border-top:1px solid var(--s5-linie)}
body.page-id-104 .stay-adresse p{margin:0;font-size:.92rem;color:var(--s5-tinte-weich)}
body.page-id-104 .stay-slider-wrap{
  display:block;position:relative;
  border-radius:24px;overflow:hidden;background:var(--s5-bank);
}
body.page-id-104 .stay-slider-wrap .et_pb_slide{
  height:clamp(200px,19vw,290px);min-height:0;padding:0;
}
body.page-id-104 .stay-slider-wrap .et_pb_container{
  height:100%;width:100%;max-width:none;display:flex;align-items:flex-end;padding:0;
}
body.page-id-104 .stay-slider-wrap .et_pb_slider_container_inner{width:100%}
body.page-id-104 .stay-slider-wrap .et_pb_slide_description{
  width:100%;padding:0;text-align:left;
  background:linear-gradient(to top,rgba(17,30,62,.66),rgba(17,30,62,0));
}
body.page-id-104 .stay-slider-wrap .et_pb_slide_title{
  margin:0;padding:34px 18px 13px;
  font-family:var(--sans);font-size:.84rem;font-weight:500;line-height:1.4;
  text-align:center;color:#fff;
}

/* Auf schmalen Schirmen faellt die Karte auf eine Spalte, die Fakten auch. */
@media(max-width:960px){
  body.page-id-104 .stay-card{grid-template-columns:1fr}
}
@media(max-width:680px){
  body.page-id-104 .stay-facts{grid-template-columns:1fr}
}