/* ==========================================================================
   DRACHENKOPF - Designtest fuer Start12 (Seite 255)

   Konzept
   -------
   Die Farbfamilie stammt aus dem Drachenbild: ein heller Morgenhimmel in
   Blau (#e7eef8 bis #d7e2f2), tiefes Marineblau als Schrift (#111e3e) und
   warmes Sonnengold als einziger Akzent (#e4ab53). Kein Braun, kein Pflaume,
   keine dunklen Baender - die Seite bleibt von oben bis unten licht.

   Der Drache liegt im Hintergrund: fest stehend hinter dem gesamten
   Dokument und noch einmal weit aufgehellt hinter dem Zitatband. Der
   Seiteninhalt bleibt unveraendert - im Bogen des Auftakts steht weiterhin
   das Portraet. Damit der Drache durchscheint, sind saemtliche
   Sektionshintergruende auf halbtransparente Schleier umgestellt.

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


/* ---------- 1. Farbwerte --------------------------------------------------- */

body.page-id-255{
  --s5-weiss:#ffffff;
  --s5-himmel-hell:#f2f7fd;
  --s5-himmel:#e7eef8;
  --s5-himmel-tief:#dfe9f7;
  --s5-bank:#d7e2f2;

  --s5-tinte:#111e3e;
  --s5-tinte-weich:#3a4869;  /* eine Stufe tiefer als geplant: ueber dem Bildgrund
                                haelt #46557a nur 4,1:1, dieser Wert 5,1:1 */
  --s5-nacht:#0e1c3d;

  --s5-gold:#e4ab53;
  --s5-gold-tief:#6a460d;   /* Gold als Schrift: 4,7:1 auch auf dem dunkelsten
                                Fleck des Bildgrundes, 7,2:1 auf der Grundfarbe */
  --s5-gold-weich:#f6e3c2;

  --s5-linie:rgba(17,30,62,.14);
  --s5-linie-fein:rgba(17,30,62,.08);

  /* Variablen des gelieferten Entwurfs umbelegen, damit nirgends ein
     warmer Rest der alten Familie durchscheint. */
  --ivory:#e7eef8;
  --paper:#ffffff;
  --cream:#dfe9f7;
  --mist:#d7e2f2;
  --sage:#9fb6d6;
  --sage-soft:#e4ecf8;
  --lavender:#b9cbe8;
  --rose:#f6e3c2;
  --plum:#111e3e;
  --plum-deep:#0e1c3d;
  --gold:#e4ab53;
  --gold-soft:#f6e3c2;
  --ink:#22315a;
  --muted:#3a4869;
  --line:rgba(17,30,62,.14);
  --shadow:0 28px 76px rgba(17,40,82,.14);
  --shadow-soft:0 14px 40px rgba(17,40,82,.09);

  background:var(--s5-himmel);
  color:var(--s5-tinte-weich);
}


/* ---------- 2. Der Drache als Seitengrund ------------------------------------

   Fest stehend hinter dem gesamten Dokument, oben klar und nach unten in den
   Himmelston auslaufend. z-index:-1 legt es hinter jeden Inhalt, aber vor die
   Grundfarbe des Body.

   Das Blatt ist ein Panorama von 2,5:1 mit dem Drachen am linken Rand. Es steht
   deshalb links buendig und fuellt das Fenster ("cover"): so bleibt der Drache
   auf jeder Fenstergroesse an derselben Stelle, angeschnitten wird nur rechts,
   wo ohnehin nur Berge und Himmel liegen.
   -------------------------------------------------------------------------- */

body.page-id-255::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(231,238,248,0) 0%,
      rgba(231,238,248,.10) 40%,
      rgba(231,238,248,.34) 72%,
      rgba(231,238,248,.58) 100%),
    url("Lumentra-Lichtdrache-Bergtal.webp") left top / cover no-repeat;
  background-color:var(--s5-himmel);
}


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

body.page-id-255 .site-header{
  background:rgba(242,247,253,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--s5-linie-fein);
  color:var(--s5-tinte);
}
body.page-id-255 .brand strong{color:var(--s5-tinte)}
body.page-id-255 .brand span{color:var(--s5-tinte-weich)}
body.page-id-255 .nav-links{color:var(--s5-tinte)}
body.page-id-255 .nav-links a:not(.nav-contact)::after{background:var(--s5-gold)}
body.page-id-255 .nav-contact{
  border-color:rgba(17,30,62,.28);
  background:rgba(255,255,255,.62);
  color:var(--s5-tinte);
}
body.page-id-255 .nav-contact:hover{
  background:var(--s5-gold);
  border-color:var(--s5-gold);
  color:var(--s5-tinte);
}
body.page-id-255 .menu-button{
  border-color:var(--s5-linie);
  background:rgba(255,255,255,.7);
}
body.page-id-255 .menu-button span,
body.page-id-255 .menu-button span::before,
body.page-id-255 .menu-button span::after{background:var(--s5-tinte)}

body.page-id-255 .site-footer{
  background:linear-gradient(150deg,#16264a,#0b1730);
  border-top:1px solid rgba(228,171,83,.28);
  color:rgba(232,240,252,.74);
}
body.page-id-255 .site-footer a{color:#fff}
body.page-id-255 .footer-note{color:rgba(232,240,252,.48)}


/* ---------- 4. Schrift, Label, Rauten ---------------------------------------- */

body.page-id-255 h1,
body.page-id-255 h2,
body.page-id-255 h3{color:var(--s5-tinte)}
body.page-id-255 p{color:var(--s5-tinte-weich)}
body.page-id-255 .lead{color:var(--s5-tinte-weich)}

body.page-id-255 .eyebrow{color:var(--s5-gold-tief)}
body.page-id-255 .eyebrow::before{background:var(--s5-gold)}

body.page-id-255 .marke{
  border-color:var(--s5-gold);
  background:var(--s5-gold);
  box-shadow:0 0 0 3px rgba(228,171,83,.18);
}

/* Die drei Haltungsworte stehen als weiche Pillen, wie im Entwurfsbild. */
body.page-id-255 .hero-meta{color:var(--s5-tinte);gap:10px 12px}
body.page-id-255 .hero-meta span{
  gap:9px;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid var(--s5-linie);
  background:rgba(255,255,255,.68);
  font-size:.84rem;
  font-weight:500;
  letter-spacing:.01em;
}
body.page-id-255 .hero-meta i{
  width:6px;
  height:6px;
  transform:none;
  border:0;
  border-radius:50%;
  background:var(--s5-gold);
}
body.page-id-255 .hero-meta span:first-child i{display:block}


/* ---------- 5. Schaltflaechen -------------------------------------------------

   Gold als Flaeche, Marineblau als Schrift: 8:1 und damit weit ueber der
   Anforderung. Die Divi-Varianten muessen mitgenannt werden, sonst gewinnt
   das Modul-CSS des Bauwerkzeugs.
   -------------------------------------------------------------------------- */

body.page-id-255 .btn-primary,
body.page-id-255 .et_pb_button.btn-primary,
body.page-id-255 .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-255 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary{
  background:var(--s5-gold);
  border-color:var(--s5-gold);
  color:var(--s5-tinte);
}
body.page-id-255 .btn-primary:hover,
body.page-id-255 .et_pb_button.btn-primary:hover,
body.page-id-255 .et_pb_bg_layout_light.et_pb_button.btn-primary:hover,
body.page-id-255 .cta-box .et_pb_bg_layout_light.et_pb_button.btn-primary:hover{
  background:#d89a3a;
  border-color:#d89a3a;
  color:var(--s5-tinte);
  box-shadow:0 14px 32px rgba(180,120,30,.26);
}

body.page-id-255 .btn-secondary,
body.page-id-255 .et_pb_button.btn-secondary,
body.page-id-255 .et_pb_bg_layout_light.et_pb_button.btn-secondary{
  background:rgba(255,255,255,.62);
  border-color:rgba(17,30,62,.30);
  color:var(--s5-tinte);
}
body.page-id-255 .et_pb_button.btn-secondary:hover,
body.page-id-255 .et_pb_bg_layout_light.et_pb_button.btn-secondary:hover{
  background:#fff;
  border-color:var(--s5-tinte);
  color:var(--s5-tinte);
}


/* ---------- 6. Auftakt: der Drache im Bogen -----------------------------------

   Der Sektionsgrund wird durchsichtig, damit der feste Seitengrund hier am
   kraeftigsten steht. Die beiden Zierkreise des Entwurfs bleiben, nur in
   Gold und Blau statt Bronze und Pflaume.
   -------------------------------------------------------------------------- */

body.page-id-255 .hero{
  background:
    radial-gradient(ellipse 44% 56% at 24% 46%,rgba(255,255,255,.74),rgba(255,255,255,.24) 60%,transparent 78%),
    linear-gradient(150deg,rgba(242,247,253,.06) 0%,rgba(223,233,247,0) 58%,rgba(215,226,242,.05) 100%);
}
body.page-id-255 .hero::before{border-color:rgba(228,171,83,.26)}
body.page-id-255 .hero::after{
  border-color:rgba(17,30,62,.09);
  box-shadow:0 0 0 34px rgba(228,171,83,.045),0 0 0 68px rgba(17,30,62,.022);
}

body.page-id-255 .hero-copy h1{color:var(--s5-tinte)}

/* Geometrie des Bogens bleibt wie auf der Startseite, nur Rand und Schatten
   wechseln in die kuehle Familie. */
body.page-id-255 .hero-arch{
  border:1px solid rgba(255,255,255,.9);
  background:var(--s5-himmel-hell);
  box-shadow:0 30px 80px rgba(17,40,82,.16);
}
body.page-id-255 .hero-arch::after{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(17,30,62,.10));
}

body.page-id-255 .hero-orbit{border-color:rgba(228,171,83,.40)}
body.page-id-255 .hero-orbit::before,
body.page-id-255 .hero-orbit::after{border-color:rgba(17,30,62,.16)}

body.page-id-255 .hero-note{
  background:rgba(255,255,255,.90);
  border:1px solid rgba(228,171,83,.36);
  box-shadow:0 16px 45px rgba(17,40,82,.12);
}
body.page-id-255 .hero-note strong{color:var(--s5-tinte)}
body.page-id-255 .hero-note small{color:var(--s5-tinte-weich)}


/* ---------- 7. Die Reise ------------------------------------------------------ */

body.page-id-255 .soul-intro{
  background:
    radial-gradient(circle at 84% 12%,rgba(246,227,194,.20),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.32) 0%,rgba(242,247,253,.20) 55%,rgba(223,233,247,.18) 100%);
}
body.page-id-255 .soul-intro::before{
  border-color:rgba(17,30,62,.14);
  box-shadow:0 0 0 42px rgba(228,171,83,.045);
}
body.page-id-255 .ritual-photo-main{
  box-shadow:0 26px 70px rgba(17,40,82,.15);
  border:1px solid rgba(255,255,255,.9);
  background:#fff;
}
/* Weisser Schleier von 20 Prozent ueber dem Handbild: statt eines Pseudoelements
   liegt hier reines Weiss im Rahmen und das Bild darueber mit opacity .8. Das
   mischt exakt 20 Prozent Weiss dazu und ist unabhaengig davon, wie Divi das
   Bildmodul positioniert. */
body.page-id-255 .ritual-photo-main img{opacity:.8}
body.page-id-255 .ritual-caption{color:var(--s5-tinte)}


/* ---------- 8. Wiedererkennen ------------------------------------------------- */

body.page-id-255 .recognition-visual{
  background:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.40),transparent 32%),
    linear-gradient(135deg,rgba(223,233,247,.28),rgba(215,226,242,.24));
}
body.page-id-255 .recognition-visual::after{
  border-color:rgba(17,30,62,.10);
  box-shadow:0 0 0 38px rgba(228,171,83,.04);
}
body.page-id-255 .sign-item p{color:var(--s5-tinte-weich)}
body.page-id-255 .sign-item span{color:var(--s5-gold-tief)}


/* ---------- 9. Begleitung: aus dem dunklen Band wird eine helle Bank ----------

   Im Entwurf steht hier ein tiefes Pflaumenband mit weisser Schrift und
   Glaskarten. Auf der lichten Seite waere das ein Fremdkoerper: die Sektion
   wird zur ruhigen blauen Bank, die Karten werden weiss.
   -------------------------------------------------------------------------- */

body.page-id-255 .dark-section{
  color:var(--s5-tinte-weich);
  background:
    radial-gradient(circle at 18% 12%,rgba(246,227,194,.18),transparent 30%),
    linear-gradient(145deg,rgba(215,226,242,.60),rgba(223,233,247,.50) 55%,rgba(215,226,242,.60));
}
body.page-id-255 .dark-section::before{display:none}   /* weisse Sternchen traegt nur ein dunkler Grund */
body.page-id-255 .dark-section h2,
body.page-id-255 .dark-section h3{color:var(--s5-tinte)}
body.page-id-255 .dark-section .section-heading p{color:var(--s5-tinte-weich)}
body.page-id-255 .dark-section .eyebrow{color:var(--s5-gold-tief)}

body.page-id-255 .service-row{
  border:1px solid var(--s5-linie);
  background:rgba(255,255,255,.80);
  box-shadow:0 14px 40px rgba(17,40,82,.07);
}
body.page-id-255 .service-row::before{border-color:rgba(228,171,83,.28)}
body.page-id-255 .service-row:hover{
  background:#fff;
  border-color:rgba(228,171,83,.50);
  box-shadow:0 22px 54px rgba(17,40,82,.12);
}
body.page-id-255 .service-row h3{color:var(--s5-tinte)}
body.page-id-255 .service-row p{color:var(--s5-tinte-weich)}
body.page-id-255 .service-row .number{color:var(--s5-gold-tief)}
body.page-id-255 .service-row .arrow{color:var(--s5-gold-tief)}
body.page-id-255 .service-row .marke{
  border-color:var(--s5-gold);
  background:var(--s5-gold);
}


/* ---------- 10. Zitat -----------------------------------------------------------

   Hier stand das Panorama ein zweites Mal als eigener Sektionsgrund. Zusammen mit
   dem festen Seitengrund lagen damit zwei Ausschnitte desselben Bildes uebereinander.
   Jetzt bleibt nur ein leichter Schleier, durch den der Seitengrund wie in jeder
   anderen Sektion durchlaeuft.
   -------------------------------------------------------------------------- */

body.page-id-255 .quote-panel{
  color:var(--s5-tinte);
  background:linear-gradient(rgba(242,247,253,.30),rgba(223,233,247,.42));
}
body.page-id-255 .quote-panel::before{
  border-color:rgba(255,255,255,.85);
  box-shadow:0 0 0 44px rgba(255,255,255,.30),0 0 0 88px rgba(255,255,255,.16);
}
/* Divi gibt jedem blockquote einen Rand in seinem Signalblau (#2ea3f2). Auf dem
   dunklen Band des Entwurfs fiel er nicht auf, auf hellem Grund ist er ein
   Fremdkoerper - hier steht er in Gold. */
body.page-id-255 .quote-panel blockquote{
  color:var(--s5-tinte);
  border-left-color:var(--s5-gold);
}


/* ---------- 11. Abschluss ------------------------------------------------------ */

body.page-id-255 .cta-section{background:transparent}
body.page-id-255 .cta-box{
  color:var(--s5-tinte);
  border:1px solid var(--s5-linie);
  background:
    radial-gradient(circle at 88% 20%,rgba(246,227,194,.44),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(242,247,253,.86));
  box-shadow:0 26px 70px rgba(17,40,82,.12);
}
body.page-id-255 .cta-box::after{
  border-color:rgba(228,171,83,.32);
  box-shadow:0 0 0 38px rgba(17,30,62,.02);
}
body.page-id-255 .cta-box h2{color:var(--s5-tinte)}
body.page-id-255 .cta-box p{color:var(--s5-tinte-weich)}


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

   Auf schmalen Geraeten steht der Drachengrund weiter oben, sonst bleibt vom
   Tier nur der Fluegel im Bild.
   -------------------------------------------------------------------------- */

@media(max-width:960px){
}

@media(max-width:680px){
  body.page-id-255::before{
    background:
      linear-gradient(180deg,
        rgba(231,238,248,.10) 0%,
        rgba(231,238,248,.40) 48%,
        rgba(231,238,248,.70) 100%),
      url("Lumentra-Lichtdrache-Bergtal.webp") left center / cover no-repeat;
  }
  body.page-id-255 .hero-meta span{font-size:.79rem;padding:6px 13px}
}


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

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


/* ---------- 14. Weniger Luft in den Angebotskarten ----------------------------

   Der Entwurf haelt die Karten auf min-height:330px, gibt der Ueberschrift
   48 px Abstand nach oben und schiebt den Pfeil mit margin-top:auto an den
   unteren Rand, dazu 26 px Polsterung. Bei kurzen Texten - etwa bei
   "Rueckfuehrung" - steht dadurch mehr als ein Drittel der Karte leer.

   Die feste Mindesthoehe entfaellt; die Karten richten sich nach ihrem Inhalt.
   Gleich hoch bleiben sie trotzdem, denn das Entwurfsblatt setzt sie im Raster
   auf height:100% - innerhalb einer Zeile zieht die laengste Karte die andere
   mit. Der Pfeil bleibt unten buendig, damit die Pfeile einer Zeile auf einer
   Linie stehen.
   -------------------------------------------------------------------------- */

body.page-id-255 .service-row{
  min-height:0;
  padding:28px 30px 24px;
}
body.page-id-255 .service-row .marke{margin:0 0 4px}
body.page-id-255 .service-row h3{margin:16px 0 12px}
body.page-id-255 .service-row p{margin:0}
body.page-id-255 .service-row .arrow{
  padding-top:14px;
  font-size:1.25rem;
}


/* ---------- 15. Die Sektionsueberschrift eine Stufe kleiner -------------------

   "Was sich zeigen darf." steht in der schmaleren linken Spalte der
   Abschnittsueberschrift und bricht dort bei der Entwurfsgroesse (bis 5,2 rem)
   auf zwei Zeilen um. Nur diese Ueberschrift wird zurueckgenommen; die uebrigen
   h2 der Seite behalten ihre Groesse.
   -------------------------------------------------------------------------- */

body.page-id-255 .section-heading h2{
  font-size:clamp(2.2rem,3.4vw,3.5rem);
}


/* ==========================================================================
   START12 - das Drachenbild als Header

   Der Auftakt ist keine zweispaltige Flaeche mehr, sondern ein Bildbanner
   ueber die volle Fensterbreite: das Drachenpanorama gross, der Text
   darueber.

   Zwei Dinge sind dabei zu loesen:

   1. Lesbarkeit. Das Blatt ist sehr hell (weisser Drache, heller Himmel).
      Heller Text darauf traegt nicht. Der Text bleibt deshalb dunkel und
      bekommt einen aufhellenden Schleier unter sich - so gemessen erreicht
      die Ueberschrift ueber 9:1 statt der 2:1, die sie ohne Schleier haette.
   2. Der Drache steht links im Bild. Der Text sitzt deshalb rechts, damit
      beide Platz haben und sich nicht ueberlagern.

   Das Portraet aus dem Auftakt entfaellt auf dieser Variante ganz.
   ========================================================================== */


/* ---------- A. Der Bildbanner --------------------------------------------------- */

body.page-id-255 .hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:min(86vh,760px);
  padding:120px 0 128px;
  overflow:hidden;
  background:
    /* Der Schleier: links offen fuer den Drachen, rechts dicht fuer den Text. */
    linear-gradient(100deg,
      rgba(231,238,248,.06) 0%,
      rgba(231,238,248,.10) 34%,
      rgba(240,245,252,.62) 56%,
      rgba(244,248,253,.86) 74%,
      rgba(244,248,253,.92) 100%),
    url("Lumentra-Lichtdrache-Bergtal.webp") left center / cover no-repeat;
}
body.page-id-255 .hero::before,
body.page-id-255 .hero::after{display:none}

/* Der Text steht in der rechten Haelfte, das Bild bleibt links frei. */
body.page-id-255 .hero-grid{
  grid-template-columns:1fr;
  gap:0;
  align-items:center;
  position:relative;
  z-index:1;
}
body.page-id-255 .hero-copy{
  grid-column:1;
  justify-self:end;
  width:min(560px,100%);
  padding:0;
}
body.page-id-255 .hero-copy h1{
  margin:18px 0 22px;
  max-width:none;
  font-size:clamp(2.4rem,4.2vw,3.9rem);
  line-height:1.08;
}
body.page-id-255 .hero-copy .lead{margin:0 0 26px;max-width:44ch}

/* Der Bogen mit dem Portraet gehoert nicht mehr in den Kopf. */
body.page-id-255 .hero-visual{display:none}


/* ---------- B. Die erste Textsektion ---------------------------------------- */

body.page-id-255 .soul-intro-grid{
  grid-template-columns:.86fr 1.14fr;
  gap:64px;
}
body.page-id-255 .soul-copy{position:relative}
/* Das Portraet wurde hier zunaechst unter dem Text nachgestellt, nachdem es
   aus dem Auftakt gewichen war. Auf Kundenwunsch faellt es ganz weg - wie auf
   Start11: die Sektion traegt schon das Handbild, ein zweites Bild daneben
   macht sie unruhig. */


/* ---------- C. Kleine Schirme ------------------------------------------------------

   Unter 900 px reicht die Breite nicht mehr, um Drache und Text nebeneinander
   zu stellen. Dann rueckt der Ausschnitt auf den Drachen und der Schleier legt
   sich gleichmaessig ueber das ganze Bild.
   -------------------------------------------------------------------------- */

@media(max-width:900px){
  body.page-id-255 .hero{
    min-height:0;
    padding:92px 0 96px;
    background:
      linear-gradient(180deg,
        rgba(240,245,252,.32) 0%,
        rgba(244,248,253,.74) 46%,
        rgba(244,248,253,.90) 100%),
      url("Lumentra-Lichtdrache-Bergtal.webp") 32% center / cover no-repeat;
  }
  body.page-id-255 .hero-copy{justify-self:stretch;width:auto}
  body.page-id-255 .soul-intro-grid{grid-template-columns:1fr;gap:44px}
}


/* ---------- D. Kein Drache im Seitengrund ---------------------------------------

   Start5 legt das Panorama als festen Grund hinter die ganze Seite und stellt
   dafuer saemtliche Sektionsgruende auf halbtransparente Schleier. Auf Start12
   traegt der Drache den Kopf - im Rest der Seite hat er nichts mehr zu suchen,
   sonst begegnet man ihm zweimal.

   Der feste Grund entfaellt, und die Sektionen bekommen wieder deckende
   Flaechen: ohne Bild dahinter waeren die Schleier nur noch blasse Abstufungen
   auf der Grundfarbe und die Gliederung der Seite ginge verloren.
   -------------------------------------------------------------------------- */

body.page-id-255::before{display:none}

body.page-id-255 .soul-intro{
  background:
    radial-gradient(circle at 84% 12%,rgba(246,227,194,.30),transparent 30%),
    linear-gradient(135deg,#ffffff 0%,#f4f8fd 55%,#eaf1fa 100%);
}
body.page-id-255 .recognition-visual{
  background:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.70),transparent 32%),
    linear-gradient(135deg,#e9f0fa,#e2ebf7);
}
body.page-id-255 .dark-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-255 .quote-panel{
  background:linear-gradient(180deg,#f2f7fd,#e4edf9);
}
body.page-id-255 .cta-section{background:#eef4fb}


/* ---------- E. Die beiden Schaltflaechen nebeneinander ---------------------------

   Divi macht aus der Spalte einen senkrechten Flexcontainer, darin wird jedes
   Modul zur eigenen Zeile.
   Ein Raster aus zwei automatischen Spalten scheitert hier: die Textmodule
   laufen ueber beide Spalten und verteilen ihre Breite darauf, wodurch die
   Schaltflaechen weit auseinander gezogen werden. Ein umbrechender
   Flexcontainer loest es sauber - die Texte nehmen die volle Breite, die
   beiden Schaltflaechen finden sich danach in einer Zeile.
   -------------------------------------------------------------------------- */

@media(min-width:901px){
  body.page-id-255 .hero-copy{
    display:flex;
    /* Divi setzt die Spalte auf flex-direction:column (.et_flex_column).
       Ohne diese Zeile bleibt jedes Modul in seiner eigenen Zeile, egal was
       flex-wrap sagt. */
    flex-direction:row;
    flex-wrap:wrap;
    align-content:center;
    align-items:flex-start;
    row-gap:0;
  }
  body.page-id-255 .hero-copy>.et_pb_text{width:100%}
  body.page-id-255 .hero-copy>.et_pb_button_module_wrapper{
    width:auto;
    margin:0 14px 0 0;
  }
}


/* ---------- F. Haltungsworte und Abstand ueber den Schaltflaechen ----------------

   Die drei Worte standen als Pillen mit Rand. Hier tragen sie nur noch ihren
   Punkt und stehen dafuer eine Stufe groesser. Der umbrechende Flexcontainer
   des Auftakts hat row-gap:0, damit die Textbloecke ihre eigenen Abstaende
   behalten - die Schaltflaechen brauchen ihren Abstand nach oben deshalb
   selbst.
   -------------------------------------------------------------------------- */

body.page-id-255 .hero-meta{
  margin:2px 0 0;
  gap:12px 30px;
  color:var(--s5-tinte);
  font-size:1.04rem;
  font-weight:500;
}
body.page-id-255 .hero-meta span{
  gap:12px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:1.04rem;
  font-weight:500;
}
body.page-id-255 .hero-meta i{
  width:7px;
  height:7px;
  transform:none;
  border:0;
  border-radius:50%;
  background:var(--s5-gold);
}
body.page-id-255 .hero-meta span:first-child i{display:block}

body.page-id-255 .hero-copy>.et_pb_button_module_wrapper{margin-top:30px}