/* ==========================================================================
   Die Seite "Begleitung" (270) im Kleid von Start14

   Die Seite ist am 13.08.2026 aus dem Entwurf B01 hervorgegangen und hat die
   fruehere Begleitungsseite (102, jetzt im Papierkorb) abgeloest. Inhalt und
   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.

   Am 15.08.2026 ist der Aufbau der Arbeitskopie B01 (Seite 355, seither im
   Papierkorb) an die Stelle des alten getreten: die drei Code-Module mit
   Roh-HTML sind durch echte Divi-Module ersetzt. Was das fuer dieses Blatt
   bedeutet, steht in den Abschnitten 14 bis 16 am Fuss.

   Technik: wird nur auf Seite 270 geladen (novamira-sandbox/lumentra-begleitung.php).
   Alle Regeln haengen an body.page-id-270 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-270 .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-270 .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-270 .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-270 .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-270 .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-270 .page-hero-inner .et_pb_column{row-gap:20px}
body.page-id-270 .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-270 .page-hero .lead{color:var(--s5-tinte-weich)}
body.page-id-270 .page-hero .eyebrow{color:var(--s5-gold-tief)}
body.page-id-270 .page-hero .eyebrow::before{background:var(--s5-gold)}

/* Der Pfad steht nicht ueber der Kleinzeile, sondern unter dem Vorspann am
   Fuss des Kopfes (Kundenwunsch).

   Seit dem 15.08.2026 ist er Divis eigenes Brotkrumen-Modul und steht
   als letztes Modul der Spalte auch im Quelltext dort, wo er zu sehen ist -
   Lese-, Tabulator- und Sehreihenfolge stimmen damit ueberein.

   Die frueheren Kunstgriffe sind entfallen: Das order:2 war wirkungslos (ein
   frei gestelltes Element folgt keiner Flexreihenfolge), und der Selektor griff
   auf .et_pb_text:first-child - also auf das jeweils erste Textmodul, nicht auf
   den Pfad. Ein weiteres Modul im Kopf haette das falsche Element an den Fuss
   geschickt.

   Der Abstand nach oben steht jetzt in den Divi-Optionen des Moduls. Weil der
   Pfad damit im Fluss steht, waechst der Kopf um seine Hoehe; die Polsterung
   unten wird um denselben Betrag zurueckgenommen. Der Kopf bleibt so gleich
   hoch und der Pfad sitzt wie zuvor knapp ueber der Kante zur naechsten
   Sektion - anders als beim frueheren bottom:-78px kann er dabei nicht mehr in
   die Folgesektion rutschen, wenn sich die Polsterung aendert. */
body.page-id-270 .page-hero{padding-bottom:34px}

/* Der Abstand nach oben (34 px, zusammen mit den 20 px Zwischenraum der Spalte
   die 54 px des Entwurfs) steht in den Optionen des Moduls. Bis zum 15.08.2026
   kam er dort nicht an: Die Bruecke setzte .et_pb_module{margin:0} und
   uebersteuerte damit Divis erzeugte Modulregeln. Die Zeile ist seither aus
   style.css entfernt - sie war ohnehin wirkungslos, Divi 5 hebt den alten
   30-px-Abstand selbst auf. */

/* Aussehen wie zuvor. Es steht hier und nicht in den Modul-Optionen, damit die
   Farben aus der Palette der Seite kommen und ein Palettenwechsel den Pfad
   mitnimmt. Gefasst wird das Modul ueber seine eigene Klasse im Seitenkopf -
   nicht mehr ueber seine Position in der Spalte. */
body.page-id-270 .page-hero .et_pb_breadcrumbs{
  font-size:.78rem;
  color:var(--s5-tinte-weich);
}
body.page-id-270 .page-hero .et_pb_breadcrumbs a{
  color:var(--s5-tinte);
  text-decoration:underline;
  text-underline-offset:3px;
}
body.page-id-270 .page-hero .et_pb_breadcrumbs a:hover{color:var(--s5-gold-tief)}
body.page-id-270 .page-hero .et_pb_breadcrumbs--separator{color:var(--s5-tinte-weich)}


/* ---------- 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-270 .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-270 .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-270 .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-270 .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-270 .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-270 .offer-card p{color:var(--s5-tinte-weich)}
body.page-id-270 .offer-card .meta{
  border-top-color:var(--s5-linie);
  color:var(--s5-tinte-weich);
}
body.page-id-270 .offer-card .meta strong{color:var(--s5-tinte)}

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

   Im Entwurf steht hier ein Salbeigruen. Auf der blauen Seite waere das ein
   Fremdkoerper - dieselbe Loesung wie bei der dunklen Sektion auf Start14. */

body.page-id-270 .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-270 .prose h2{color:var(--s5-titel)}
body.page-id-270 .prose h3{color:var(--s5-tinte)}
body.page-id-270 .prose p,
body.page-id-270 .prose ul,
body.page-id-270 .prose li{color:var(--s5-tinte-weich)}
body.page-id-270 .prose h2{font-size:clamp(2rem,3.2vw,3.2rem)}

/* Die drei weiteren Formen stehen auf Kundenwunsch in weissen Kaesten wie die
   Angebotskarten oben - aber einspaltig, untereinander. Dafuer sind im Inhalt
   dieser Seite Ueberschrift und Absatz je Thema in EIN Textmodul gewandert,
   das die Klasse traegt; zwei Geschwistermodule liessen sich nicht gemeinsam
   einrahmen. Untereinander stehen sie von selbst: die Spalte ist ein
   senkrechter Flexcontainer. */
body.page-id-270 .thema-karte{
  padding:28px 32px;
  border:1px solid var(--s5-linie);
  border-radius:30px;
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 40px rgba(17,40,82,.07);
}
body.page-id-270 .thema-karte h3{
  margin:0 0 10px;
  color:var(--s5-tinte);
  font-size:clamp(1.3rem,1.6vw,1.55rem);
}
body.page-id-270 .thema-karte p{margin:0}


/* ---------- 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-270 .stay-card{
  background:#fff;
  border-color:rgba(228,171,83,.34);
  box-shadow:0 22px 54px rgba(17,40,82,.09);
}
body.page-id-270 .stay-copy h2{color:var(--s5-titel)}
body.page-id-270 .stay-copy p,
body.page-id-270 .stay-facts li{color:var(--s5-tinte-weich)}
body.page-id-270 .stay-adresse{border-top-color:var(--s5-linie)}
body.page-id-270 .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-270 .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-270 .eyebrow{font-size:.84rem}
body.page-id-270 .eyebrow::before{width:46px}


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

@media(max-width:900px){
  body.page-id-270{--s14-unschaerfe:1.5px}
  /* Unten dasselbe Mass wie am grossen Schirm: Der Pfad steht im Fluss und
     bringt seine Hoehe selbst mit. */
  body.page-id-270 .page-hero{padding:92px 0 34px}
  /* 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-270 .page-hero-inner{width:calc(100% - 44px);margin-inline:auto}
  body.page-id-270 .offer-card h2{gap:12px}
  body.page-id-270 .offer-card h2::before{width:56px;height:56px}
}

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


/* ---------- Der Steuerhinweis rueckt an die Karten heran ------------------------

   Er stand 90 px unter dem Kartenraster: 60 px Zeilenabstand der Sektion plus
   30 px Eigenabstand des Absatzes. Der Hinweis gehoert aber zu den Preisen
   darueber, nicht als eigener Block dazwischen. Jetzt sind es 24 px - dieselbe
   Loesung wie auf der Workshopseite.
   -------------------------------------------------------------------------- */

body.page-id-270 .steuerhinweis{margin-top:0}
body.page-id-270 .et_pb_row:has(.steuerhinweis){margin-top:-36px}
/* --- Die Karte -------------------------------------------------------------
   Aus dem Raster mit den Feldern bild/text/slider ist eine innere Divi-Zeile
   mit zwei Spalten geworden: links Bild und Bildwechsler untereinander,
   rechts der Text. Die Feldnamen haben damit keine Entsprechung mehr. */
body.page-id-270 .stay-card{grid-template-areas:none;grid-template-rows:auto}
body.page-id-270 .stay-card > .et_pb_column_inner{grid-area:auto;min-width:0}
body.page-id-270 .stay-links{display:flex;flex-direction:column;gap:18px}

/* Divis Spalten sind Flexspalten mit 30 px Zwischenraum. Im Entwurf steckte die
   ganze Textspalte in EINEM Block, die Abstaende kamen also allein aus den
   Margen der Bausteine. Jetzt ist jeder Baustein ein eigenes Modul - der
   Zwischenraum der Spalte legte sich damit auf jeden Abstand obendrauf, jede
   Fuge war 30 px zu weit. Er wird deshalb stillgelegt; es gelten weiter die
   Margen des Entwurfs (Kleinzeile 16, Ueberschrift 20, Fakten 26, Adresse 28). */
body.page-id-270 .stay-copy{row-gap:0}

/* Divis Bildmodul legt um das Bild eine zusaetzliche Huelle. Ohne Hoehe darin
   griffe das 4:3 des Entwurfs ins Leere. */
body.page-id-270 .stay-main{margin:0;border-radius:26px;overflow:hidden;background:var(--s5-bank);aspect-ratio:4/3}
body.page-id-270 .stay-main .et_pb_image_wrap{display:block;height:100%}
body.page-id-270 .stay-main img{width:100%;height:100%;object-fit:cover;display:block}

/* Die Kleinzeile stand mit ihrem Strich uebereinander statt nebeneinander:
   Divi stellt jedes Modul als senkrechte Flexbox auf. */
body.page-id-270 .stay-copy .eyebrow{flex-direction:row;align-items:center;justify-content:flex-start}
body.page-id-270 .stay-copy .eyebrow .et_pb_text_inner{flex:0 1 auto}
body.page-id-270 .stay-copy .eyebrow p{margin:0}
/* Die Kleinzeile stand im Entwurf in einem div. Divis Textmodul packt seinen
   Inhalt in einen Absatz - und damit griff die Regel .stay-copy p, die den
   Fliesstext der Karte einfaerbt. Das Gold der Kleinzeile kommt vom Modul und
   soll durchgereicht werden. */
body.page-id-270 .stay-copy .eyebrow p{color:inherit}

/* Die Ueberschrift sitzt im Ueberschriftmodul eine Ebene tiefer. */
body.page-id-270 .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);
}

/* --- Die Faktenliste -------------------------------------------------------
   Aus der Liste im Roh-HTML ist ein Icon-Listen-Modul geworden. Das Zeichen
   des Entwurfs - die gedrehte Raute in Gold - wird aus dem Icon-Element
   gezeichnet; Divis eigenes Schriftzeichen wird dafuer stillgelegt. */
body.page-id-270 .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;
}
/* Divi fuehrt jedes Modul als Flex-SPALTE - auch den Listeneintrag. Ohne die
   ausdrueckliche Richtung steht die goldene Raute UEBER dem Text statt davor.
   Auf der Workshopseite faellt es nicht auf, hier schon; die Zeile haelt beide
   Seiten gleich. */
body.page-id-270 .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-270 .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-270 .stay-facts .et_pb_icon_list_text{
  font-size:.94rem;line-height:1.5;color:var(--s5-tinte-weich);
}

/* --- Die Adresse ----------------------------------------------------------- */
/* Abstand nach oben: in den Optionen des Moduls. */
body.page-id-270 .stay-adresse{padding-top:22px;border-top:1px solid var(--s5-linie)}
body.page-id-270 .stay-adresse p{margin:0;font-size:.92rem;color:var(--s5-tinte-weich)}

/* --- Der Bildwechsler ------------------------------------------------------
   Statt der selbstgebauten Bilderfolge laeuft hier Divis Slider. Rahmen, Hoehe
   und die goldene Marke am aktiven Punkt bleiben wie im Entwurf. Ein
   Unterschied bleibt sichtbar: die Bildunterschrift liegt jetzt als schmales
   Band am unteren Bildrand, nicht als graue Zeile darunter - Divi haelt den
   Text im Bild, dort ist er nicht ohne Weiteres herauszuloesen. */
body.page-id-270 .stay-slider-wrap{
  display:block;position:relative;
  border-radius:24px;overflow:hidden;background:var(--s5-bank);
}
body.page-id-270 .stay-slider-wrap .et_pb_slide{
  height:clamp(200px,19vw,290px);min-height:0;padding:0;
}
body.page-id-270 .stay-slider-wrap .et_pb_container{
  height:100%;width:100%;max-width:none;display:flex;align-items:flex-end;padding:0;
}
body.page-id-270 .stay-slider-wrap .et_pb_slider_container_inner{width:100%}
body.page-id-270 .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-270 .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;
}
@media(prefers-reduced-motion:reduce){}

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

/* ---------- 14. Umbau: Die Angebotszeile gehoert Divi -----------------------------

   Diese Zeile traegt nicht mehr die Rasterklasse .offer-grid, sondern
   .divi-raster - damit gilt fuer sie die Ausstiegsklausel im Basisblatt und
   Divi bestimmt die Aufteilung. Sie ist ausserdem von der alten Block-Zeile auf
   eine Flex-Zeile umgestellt (Layout: display:flex, Umbruch, 22 px Fugen); die
   Spalten stehen auf 8/24, also je einem Drittel. Wer die Aufteilung aendern
   will, tut das jetzt im Builder - nicht mehr hier.

   Eine Regel des Entwurfs muss dafuer zurueckgenommen werden: .offer-card traegt
   height:100%, damit die Karten im RASTER gleich hoch werden. In einer Flexzeile
   bewirkt dieselbe Regel das Gegenteil - die Prozenthoehe bezieht sich auf die
   inhaltsbestimmte Zeile, und die Karte hoert auf mitzuwachsen. Mit height:auto
   greift wieder das Strecken der Flexbox, und die Karten einer Reihe sind
   gleich hoch. */
body.page-id-270 .angebote > .offer-card{height:auto}


/* ---------- 15. Umbau: Die Themenkarten stehen nebeneinander ----------------------

   Die drei Karten lagen als Module untereinander in EINER Spalte - eine
   Aufteilung im Builder ging deshalb ins Leere. Jetzt tragen sie je eine eigene
   Innenspalte einer Flex-Innenzeile (.themen); die Aufteilung steht damit im
   Builder.

   Divis Spalten strecken sich auf die Hoehe der Reihe, die Gruppe darin bleibt
   aber auf Inhaltshoehe stehen. flex:1 laesst sie die Spalte fuellen, damit die
   Karten einer Reihe gleich hoch sind. */
body.page-id-270 .themen .thema-karte{flex:1 1 auto}


/* ---------- 16. Umbau: Die Angebotskarten aus einzelnen Modulen -------------------

   Bisher steckte jede Karte in EINEM Textmodul: Kennzeile, Ueberschrift,
   Absaetze und Preiszeile als Roh-HTML. Jetzt ist jedes Stueck ein eigenes
   Modul - Kennzeile und Preiszeile als Textmodul mit Klasse, die Ueberschrift
   als Ueberschriftmodul.

   Das Basisblatt macht dafuer eine Annahme, die nicht mehr stimmt:
   .offer-card .et_pb_text{flex:1 1 auto} war dafuer gedacht, dass EIN Textmodul
   die Kartenhoehe mitnimmt, damit die Preiszeile per margin-top:auto an den Fuss
   rutscht. Bei mehreren Modulen wuerde jedes wachsen und der Fuss haette nichts
   mehr, wogegen er druecken kann. Die Module stehen deshalb wieder im Fluss;
   das margin-top:auto der Preiszeile wirkt jetzt direkt in der Kartenspalte. */
body.page-id-270 .offer-card .et_pb_text,
body.page-id-270 .offer-card .et_pb_text_inner{flex:0 0 auto;display:block}

/* Divis Textmodul packt seinen Inhalt in einen Absatz. Kennzeile und Preiszeile
   fingen sich dadurch die Regel .offer-card p (Farbe und 18 px Abstand nach
   unten) ein - beides gehoert dort nicht hin. */
body.page-id-270 .offer-card .label p,
body.page-id-270 .offer-card .meta p{margin:0;color:inherit}


/* ---------- 17. Der Hinweis unter der Kartenbeschreibung ------------------------

   Zwei der drei Themenkarten tragen seit dem 16.08.2026 einen zweiten Absatz: oben
   die knappe Beschreibung wie bisher, darunter die Einzelheiten (Preisbildung beim
   Immobilien-Clearing, Ablauf des Zwei-Monats-Pakets). Beides in einem Absatz haette
   die Karte erschlagen - der Hinweis steht deshalb abgesetzt und eine Spur leiser.

   Die Karte ist eine Flexspalte mit rowGap:0, der Abstand kommt daher von hier.
   -------------------------------------------------------------------------- */
body.page-id-270 .thema-karte .karte-hinweis{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--s5-linie);
}
body.page-id-270 .thema-karte .karte-hinweis p{
  font-size:.88rem;
  line-height:1.62;
  color:var(--s5-tinte-weich);
}


/* ---------- 18. Der Abschnitt "Erstgespraech" ----------------------------------

   Steht seit dem 16.08.2026 als erster Abschnitt der Seite, noch vor den
   Angebotskarten: Das Erstgespraech ist Pflicht und kostet 30 Euro, es soll niemand
   erst nach den Preisen davon erfahren.

   Divis Textmodul setzt hier 0,875 rem. Der uebrige Fliesstext der Seite steht auf
   1,03 rem - ohne diese Regel saehe der Absatz aus wie eine Fussnote statt wie ein
   normaler Text.
   -------------------------------------------------------------------------- */
/* Die Ueberschrift steht kleiner als die uebrigen Abschnittstitel: Sie fuehrt nur
   zwei Zeilen Text an, im Grad der grossen H2 (3,5 rem) haette sie das Gewicht
   eines eigenen Kapitels. Der Absatz steht dafuer groesser als der uebrige
   Fliesstext - er ist der erste Satz, den jemand auf dieser Seite liest. */
body.page-id-270 .erstgespraech-titel h2{font-size:clamp(1.5rem,2vw,1.9rem)}
body.page-id-270 .erstgespraech p{font-size:1.12rem;line-height:1.68}
body.page-id-270 .erstgespraech strong{color:var(--s5-titel)}


/* ---------- 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-270 .offer-card{row-gap:15px}
body.page-id-270 .offer-card h2{margin-bottom:8px}


/* ---------- Der Hinweiskasten am Fuss der Angebote ------------------------------

   Der Hinweiskasten steht als Divi-Spalte mit der Klasse .callout - anders als auf
   der Workshopseite, wo derselbe Kasten ein Textblock mit Roh-HTML ist. Divi gibt
   der Spalte 30 px row-gap, wodurch Titel, Text und Verweis weit auseinander
   standen: 254 px hoch statt 190 px wie auf der Workshopseite. Mit 6 px sehen beide
   Kaesten gleich aus - das ist der Abstand, den der strong im Roh-HTML mitbringt.
   -------------------------------------------------------------------------- */
body.page-id-270 .callout{row-gap:6px}


/* ---------- 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-270 .cta-zeile{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  column-gap:34px;
}
body.page-id-270 .cta-zeile > *{flex:0 0 100%}
body.page-id-270 .cta-zeile > .et_pb_button_module_wrapper{flex:0 0 auto}


/* ---------- Der Anfragen-Knopf in den Themenkarten -----------------------------

   Dieselbe Bauart wie die Preiszeile der Angebotskarten: margin-top:auto schiebt
   den Knopf an den Fuss der Karte, damit die drei Knoepfe auf einer Linie stehen,
   auch wenn die Texte unterschiedlich lang sind. Die Trennlinie darueber setzt ihn
   vom Text ab - die Karte hat rowGap 0, ohne Polsterung klebte er sonst am Absatz.
   -------------------------------------------------------------------------- */
body.page-id-270 .thema-karte .et_pb_button_module_wrapper{
  margin-top:auto;
  padding-top:22px;
  border-top:1px solid var(--s5-linie);
}

/* Der Abstand ueber der Linie kann nicht als margin-top an den Knopf: dort steht
   auto und schiebt ihn an den Kartenfuss. Er kommt deshalb als margin-bottom an
   den letzten Textblock darueber - der ist je nach Karte die Beschreibung oder
   der Hinweis. Nicht :last-of-type nehmen: das zaehlt Elementtypen, und der letzte
   div in der Karte ist der Knopf selbst. Und .et_pb_module muss im Selektor stehen,
   sonst gewinnt Divis .et_flex_group>.et_pb_module{margin-bottom:0}. */
body.page-id-270 .thema-karte > .et_pb_module:nth-last-child(2){margin-bottom:20px}