/* ==========================================================================
   DIE STARTSEITE (261) - hervorgegangen aus dem Entwurf Start14

   Seit dem 13.08.2026 ist dies die echte Startseite; sie hat die fruehere\n   Startseite (76, jetzt im Papierkorb) abgeloest. Entstanden ist sie als\n   Entwurf Start14 - Start12 mit drei Aenderungen aus der Rueckmeldung der Kundin:
   der Drache ist weich gezeichnet, das Portraet steht als Kreis im Kopf, und
   der Schriftzug im Bild entfaellt. Alles Weitere - Farben, Aufbau, Inhalt -
   bleibt wie auf Start12. Die beiden Stellschrauben stehen ganz oben im
   Abschnitt 1 als --s14-unschaerfe und --s14-kreis.

   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 261 geladen (novamira-sandbox/
   lumentra-start14.php). Alle Regeln haengen an body.page-id-261 und
   gewinnen so ohne !important gegen den gelieferten Entwurf.
   ========================================================================== */


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

body.page-id-261{
  --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);

  /* Zwei Stellschrauben dieser Variante - hier und nirgends sonst aendern:
     wie weich der Drache gezeichnet ist und wie gross das Portraet im Kopf
     steht. */
  --s14-unschaerfe:2px;
  --s14-kreis:clamp(230px,24vw,330px);
  --s14-kreis-linie:rgba(17,30,62,.55);   /* feine blaue Linie innen am Portraetkreis */

  /* Die kleine Sonne der Angebotskarten. Sie steht als Zeichnung hier in der
     Datei und nicht als Bild auf dem Server: ein Aufruf weniger, und weil sie
     als Maske ueber einer Flaeche liegt, kommt ihre Farbe weiter aus der
     Palette. Wer sie aendern will, aendert sie hier einmal. Die Linien sind
     eine von 24 Einheiten stark, bleiben also bei jeder Groesse gleich fein
     im Verhaeltnis. */
  /* Der Drache im Ring braucht mehr Kantenlaenge als die Sonne: der Ring
     nimmt gut die Haelfte des Bildes ein, das Tier darin ist also nur halb so
     gross wie die Marke. Bei der Sonne stand hier 44 px. */
  --s14-marke-groesse:60px;

  /* Zweite Marke zur Wahl - und die derzeit gesetzte: das Lumentra-Logo, der
     Drache im Ring, in der warmen Fassung der Kundin. Es steht hier als Bild
     und nicht als Maske, damit sein eigenes warmes Gold erhalten bleibt.

     Umschalten auf die Sonne: --s14-marke auf --s14-sonne zeigen lassen UND
     in Abschnitt G von "background:var(--s14-marke)" zurueck auf die beiden
     mask-Zeilen mit goldener Flaeche wechseln (steht dort auskommentiert).
     Wer das Logo in Palettengold statt in seinem eigenen Ton will, nimmt
     denselben Weg - eine Strichzeichnung mit durchsichtigem Grund taugt als
     Maske genauso wie ein SVG. */
  --s14-drachenmarke:url("../Lumentra-Logo-512-warm.png");
  --s14-marke:var(--s14-drachenmarke);
  --s14-sonne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 2.8V5.6M12 18.4v2.8M2.8 12h2.8M18.4 12h2.8M5.5 5.5l2 2M16.5 16.5l2 2M18.5 5.5l-2 2M5.5 18.5l2-2'/%3E%3C/svg%3E");

  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-261::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-261 .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-261 .brand strong{color:var(--s5-tinte)}
body.page-id-261 .brand span{color:var(--s5-tinte-weich)}
body.page-id-261 .nav-links{color:var(--s5-tinte)}
body.page-id-261 .nav-links a:not(.nav-contact)::after{background:var(--s5-gold)}
body.page-id-261 .nav-contact{
  border-color:rgba(17,30,62,.28);
  background:rgba(255,255,255,.62);
  color:var(--s5-tinte);
}
body.page-id-261 .nav-contact:hover{
  background:var(--s5-gold);
  border-color:var(--s5-gold);
  color:var(--s5-tinte);
}
body.page-id-261 .menu-button{
  border-color:var(--s5-linie);
  background:rgba(255,255,255,.7);
}
body.page-id-261 .menu-button span,
body.page-id-261 .menu-button span::before,
body.page-id-261 .menu-button span::after{background:var(--s5-tinte)}

body.page-id-261 .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-261 .site-footer a{color:#fff}
body.page-id-261 .footer-note{color:rgba(232,240,252,.48)}


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

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

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

body.page-id-261 .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-261 .hero-meta{color:var(--s5-tinte);gap:10px 12px}
body.page-id-261 .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-261 .hero-meta i{
  width:6px;
  height:6px;
  transform:none;
  border:0;
  border-radius:50%;
  background:var(--s5-gold);
}
body.page-id-261 .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-261 .btn-primary,
body.page-id-261 .et_pb_button.btn-primary,
body.page-id-261 .et_pb_bg_layout_light.et_pb_button.btn-primary,
body.page-id-261 .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-261 .btn-primary:hover,
body.page-id-261 .et_pb_button.btn-primary:hover,
body.page-id-261 .et_pb_bg_layout_light.et_pb_button.btn-primary:hover,
body.page-id-261 .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-261 .btn-secondary,
body.page-id-261 .et_pb_button.btn-secondary,
body.page-id-261 .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-261 .et_pb_button.btn-secondary:hover,
body.page-id-261 .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-261 .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-261 .hero::before{border-color:rgba(228,171,83,.26)}
body.page-id-261 .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-261 .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-261 .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-261 .hero-arch::after{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(17,30,62,.10));
}

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

body.page-id-261 .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-261 .hero-note strong{color:var(--s5-tinte)}
body.page-id-261 .hero-note small{color:var(--s5-tinte-weich)}


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

body.page-id-261 .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-261 .soul-intro::before{
  border-color:rgba(17,30,62,.14);
  box-shadow:0 0 0 42px rgba(228,171,83,.045);
}
body.page-id-261 .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-261 .ritual-photo-main img{opacity:.8}
body.page-id-261 .ritual-caption{color:var(--s5-tinte)}


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

body.page-id-261 .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-261 .recognition-visual::after{
  border-color:rgba(17,30,62,.10);
  box-shadow:0 0 0 38px rgba(228,171,83,.04);
}
body.page-id-261 .sign-item p{color:var(--s5-tinte-weich)}
body.page-id-261 .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-261 .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-261 .dark-section::before{display:none}   /* weisse Sternchen traegt nur ein dunkler Grund */
body.page-id-261 .dark-section h2,
body.page-id-261 .dark-section h3{color:var(--s5-tinte)}
body.page-id-261 .dark-section .section-heading p{color:var(--s5-tinte-weich)}
body.page-id-261 .dark-section .eyebrow{color:var(--s5-gold-tief)}

body.page-id-261 .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-261 .service-row::before{border-color:rgba(228,171,83,.28)}
body.page-id-261 .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-261 .service-row h3{color:var(--s5-tinte)}
body.page-id-261 .service-row p{color:var(--s5-tinte-weich)}
body.page-id-261 .service-row .number{color:var(--s5-gold-tief)}
body.page-id-261 .service-row .arrow{color:var(--s5-gold-tief)}
body.page-id-261 .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-261 .quote-panel{
  color:var(--s5-tinte);
  background:linear-gradient(rgba(242,247,253,.30),rgba(223,233,247,.42));
}
body.page-id-261 .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-261 .quote-panel blockquote{
  color:var(--s5-tinte);
  border-left-color:var(--s5-gold);
}


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

body.page-id-261 .cta-section{background:transparent}
body.page-id-261 .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-261 .cta-box::after{
  border-color:rgba(228,171,83,.32);
  box-shadow:0 0 0 38px rgba(17,30,62,.02);
}
body.page-id-261 .cta-box h2{color:var(--s5-tinte)}
body.page-id-261 .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-261::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-261 .hero-meta span{font-size:.79rem;padding:6px 13px}

  /* Auf schmalen Schirmen nimmt das Entwurfsblatt die Baender auf 82 px
     zurueck. Die drei Sektionen, die oben eigene Werte bekommen haben, ziehen
     hier mit - sonst stuenden sie als einzige weiter auf 112 px. */
  body.page-id-261 .soul-intro,
  body.page-id-261 .cta-section{padding:82px 0}
  body.page-id-261 .quote-panel{padding:32px 0}
}


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

@media(prefers-reduced-motion:reduce){
  body.page-id-261 .service-row,
  body.page-id-261 .btn,
  body.page-id-261 .et_pb_button{transition:none}
  body.page-id-261 .service-row:hover,
  body.page-id-261 .btn-primary:hover,
  body.page-id-261 .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-261 .service-row{
  min-height:0;
  padding:28px 30px 24px;
}
body.page-id-261 .service-row .marke{margin:0 0 4px}
body.page-id-261 .service-row h3{margin:16px 0 12px}
body.page-id-261 .service-row p{margin:0}
body.page-id-261 .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-261 .section-heading h2{
  font-size:clamp(1.9rem,2.7vw,2.8rem);
}

/* Ebenso zurueckgenommen, auf Kundenwunsch: das Zitat (stand auf 3,8 rem =
   60,8 px) und die Abschlusszeile (4,9 rem = 78,4 px). Beim Zitat muss der
   Absatz ausdruecklich mitgenannt werden: wpautop packt den Satz in ein <p>
   im blockquote, und eine allgemeine p-Regel wuerde die Groesse des
   Containers schlagen. */
body.page-id-261 .quote-panel blockquote,
body.page-id-261 .quote-panel blockquote p{
  font-size:clamp(1.9rem,3.1vw,3.3rem);
  line-height:1.2;
}
body.page-id-261 .cta-box h2{
  font-size:clamp(2rem,3.2vw,3.4rem);
  line-height:1.1;
}

/* Die Kleinzeile mit dem Strich davor ("Spirituelle Begleitung", "Die Reise",
   "Begleitung") stand auf 0,69 rem und war damit sehr zurueckhaltend - auf
   Kundenwunsch eine Spur groesser. Der Strich waechst mit, sonst verschoebe
   sich das Verhaeltnis von Linie und Wort. Die Sperrung steht im Entwurf in
   em und passt sich von selbst an. */
body.page-id-261 .eyebrow{font-size:.84rem}
body.page-id-261 .eyebrow::before{width:46px}

/* Die zweite Schaltflaeche im Auftakt fuehrt auf dieser Variante nicht mehr
   auf die Unterseite, sondern springt zur Sektion "Das Leben spricht mit uns"
   weiter unten (#die-reise, die Kennung steht im Seiteninhalt an der Sektion).
   Das Blatt setzt schon scroll-behavior:smooth, der Sprung laeuft also weich.
   scroll-margin haelt die Oberkante frei von der klebenden Kopfzeile. */
body.page-id-261 #die-reise{scroll-margin-top:96px}


/* ---------- H. Gleiche Abstaende fuer alle Baender ------------------------------

   Gemessen war die Seite uneinheitlich: 112 px ueber und unter dem Inhalt bei
   "Wiedererkennen" und "Begleitung", 118 px bei "Die Reise", 84/104 px beim
   Abschluss und rund 171 px beim Zitat (das steht in einem Band von 570 px
   Mindesthoehe, in dem sein Inhalt mittig schwebt).

   Massgabe ist der vom Kunden eingezeichnete Abstand, also die 112 px der
   Sektion "Wiedererkennen". Gemeint ist der sichtbare Abstand bis zum Text,
   deshalb bekommt das Zitatband nur 62 px: sein blockquote bringt aus dem
   Entwurf noch einmal 50 px Innenabstand mit, zusammen wieder 112.

   Der Auftakt bleibt aussen vor - er ist ein Bildbanner mit fester Mindesthoehe,
   sein Inhalt steht darin mittig. */

body.page-id-261 .soul-intro{padding:112px 0}
body.page-id-261 .cta-section{padding:112px 0}
body.page-id-261 .quote-panel{
  min-height:0;
  padding:62px 0;
}


/* ==========================================================================
   START14 - 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.

   Start14 aendert daran drei Dinge, alle auf Wunsch der Kundin:

   a) Der Drache ist weich gezeichnet. Er traegt den Kopf weiter, tritt aber
      einen Schritt zurueck - wie ein Hintergrund, auf den die Kamera nicht
      scharf stellt. Der Grad steht in --s14-unschaerfe.
   b) Das Portraet steht wieder im Kopf, als Kreis und deutlich weiter
      aufgezogen als im Bogen der uebrigen Varianten.
   c) Die Bildunterschrift im Kopf entfaellt.
   ========================================================================== */


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

body.page-id-261 .hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:min(86vh,760px);
  padding:120px 0 128px;
  /* isolation:isolate macht die Sektion zur eigenen Stapelebene - nur so
     bleiben die beiden Bildebenen mit z-index:-1 in dieser Sektion und
     rutschen nicht hinter den Seitengrund. */
  overflow:hidden;
  isolation:isolate;
  background:var(--s5-himmel);
}

/* Das Bild liegt als eigene Ebene unter dem Inhalt und nicht am Sektionsgrund.
   Nur so laesst es sich weich zeichnen: filter wirkt immer auf das ganze
   Element - stuende das Bild am Grund der Sektion, waere die Schrift darauf
   genauso unscharf.

   inset:-40px zieht die Ebene ueber den sichtbaren Rand hinaus. Eine
   Weichzeichnung zieht sonst die Farbe von ausserhalb nach innen und legt
   einen hellen Saum um das Bild; clip-path schneidet den Ueberstand danach
   wieder genau auf die Sektion zurueck.

   Breite und Hoehe muessen ausdruecklich auf auto stehen: das Entwurfsblatt
   gibt diesem Pseudoelement einen Zierkreis mit fester Groesse, und feste
   Masse gewinnen gegen inset. */
body.page-id-261 .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);
}

/* Der Schleier liegt darueber: links offen fuer den Drachen, rechts dicht fuer
   den Text. Er steht als zweite Ebene und nicht mehr im Hintergrund der
   Sektion, sonst laege er unter dem Bild. */
body.page-id-261 .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,.08) 34%,
      rgba(240,245,252,.58) 56%,
      rgba(244,248,253,.84) 74%,
      rgba(244,248,253,.90) 100%);
}

/* Zwei Spalten: der Text in der breiten linken, das Portraet in der schmalen
   rechten. Beide stehen in der rechten Haelfte des Bildes - links bleibt der
   Drache frei. Die rechte Spalte ist so breit wie der Kreis (auto), die linke
   nimmt den Rest; minmax(0,1fr) verhindert, dass lange Woerter sie aufblaehen. */
body.page-id-261 .hero-grid{
  grid-template-columns:minmax(0,1fr) auto;
  gap:0 clamp(32px,4vw,64px);
  align-items:center;
  position:relative;
  z-index:1;
}
body.page-id-261 .hero-copy{
  grid-column:1;
  justify-self:stretch;
  padding:0;
}
body.page-id-261 .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-261 .hero-copy .lead{margin:0 0 26px;max-width:44ch}

/* ---------- A2. Das Portraet als Kreis -----------------------------------------

   Auf Start12 war das Portraet aus dem Kopf gewichen. Hier kommt es zurueck,
   aber anders geschnitten:

   - als Kreis statt als Bogen,
   - ohne die Bildunterschrift, die auf den uebrigen Varianten mit
     "Lumentra - aufgehendes Licht" im Bild steht,
   - und weiter aufgezogen: der hohe schmale Bogen zeigte nur den Kopf,
     der Kreis zeigt die ganze Person.

   Zum Schnitt: seit dem 12.08.2026 steht hier eine eigene Aufnahme von Katrin
   Siehl (Lumentra-Katrin-Siehl-Portraet.webp, 1254x1254 quadratisch, kuehler
   grauer Grund - der passt zur blauen Familie deutlich besser als das warme
   Blatt davor). Quadrat im Quadrat heisst: nichts wird beschnitten ausser den
   Ecken, die der Kreis ohnehin nimmt. object-position hat dabei nichts zu
   verteilen und steht deshalb auf center.
   Vorher lag hier hero.png, ein Querformat mit der Person im rechten Drittel;
   dort holte object-position:right den rechten Rand heran. */

/* Der Kreis steht rechts neben dem Text, auf halber Hoehe des Textblocks. Er
   bleibt dabei im Fluss - die Spalte selbst braucht keine Breitenangabe (das
   Entwurfsblatt setzt .et_pb_column auf width:auto!important, dagegen kaeme
   nur ein zweites !important an); sie schrumpft in der auto-Spalte des Rasters
   ohnehin auf den Kreis zusammen und endet damit genau am rechten Rand des
   Satzspiegels. */
body.page-id-261 .hero-visual{
  display:block;
  position:relative;
  grid-column:2;
  align-self:center;
  justify-self:end;
  min-height:0;
  margin:0;
}

body.page-id-261 .hero-arch{
  position:relative;
  inset:auto;
  margin-left:auto;               /* buendig mit dem rechten Rand des Satzspiegels */
  width:var(--s14-kreis);
  height:var(--s14-kreis);
  border-radius:50%;
  overflow:hidden;
  /* Innen eine hauchduenne blaue Linie direkt an der Bildkante: sie trennt das
     Portraet vom hellen Band und nimmt den Ton der Ueberschriften auf. Nicht
     das volle #111e3e - mit 55 Prozent Deckung bleibt es eine feine Kante
     statt eines harten Rings. Vorher stand hier Weiss.
     (Eine blaue Kontur ANSTELLE des goldenen Rings war kurz zur Probe gesetzt
     und wurde wieder verworfen - das Gold bleibt.) */
  border:1px solid var(--s14-kreis-linie);
  background:var(--s5-himmel-hell);
  /* Nach aussen wie gehabt: heller Hauch, darauf eine feine goldene Linie. */
  box-shadow:
    0 0 0 12px rgba(255,255,255,.38),
    0 0 0 13px rgba(228,171,83,.38),
    0 26px 60px rgba(17,40,82,.20);
}
body.page-id-261 .hero-arch img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  /* Die Aufnahme bleibt unbearbeitet (Kundenwunsch). Zwischenzeitlich lag hier
     filter:contrast(1.18) saturate(1.08) brightness(.97), um sie vor dem
     hellen Himmel freizustellen - das Bild soll aber so stehen, wie es ist. */
  filter:none;
}
/* Der dunkle Verlauf ueber dem Bild entfaellt: er war fuer den grossen Bogen
   gedacht und macht das Gesicht im kleinen Kreis nur stumpf. */
body.page-id-261 .hero-arch::after{display:none}

/* Die Zierringe des Entwurfs sassen an der festen Stelle des Bogens und
   stuenden jetzt neben dem Kreis in der Luft. */
body.page-id-261 .hero-orbit{display:none}

/* Der Satz "Ein geschuetzter Raum, in dem sich zeigen darf, was gerade wichtig
   ist." steht im Entwurf als Kaestchen mit Glasgrund IM Bild - genau der
   Schriftzug, den die Kundin dort nicht wollte. Er ist deshalb nicht
   geloescht, sondern verwandelt: aus dem Kaestchen wird eine stille Zeile
   unter dem Portraet. Die Markenzeile "Lumentra - aufgehendes Licht" bleibt
   weg.

   Die Breite ist auf den Kreis begrenzt: die rechte Rasterspalte ist auf auto
   gestellt und richtet sich nach ihrem breitesten Kind - ohne Begrenzung
   zoege der Satz die ganze Spalte auf. */
body.page-id-261 .hero-note{
  position:static;
  width:auto;
  max-width:var(--s14-kreis);
  margin:22px 0 0;
  text-align:center;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  backdrop-filter:none;
  box-shadow:none;
}
body.page-id-261 .hero-note strong{
  display:block;
  font-weight:400;
  font-style:italic;
  font-size:1.16rem;
  line-height:1.42;
  color:var(--s5-tinte);
}
body.page-id-261 .hero-note small{display:none}


/* Der Text bleibt, wo er auf Start12 steht: in der rechten Haelfte, mittig im
   Kopf. Der Kreis liegt darunter und ausserhalb des Textflusses, die beiden
   kommen sich also nicht ins Gehege. */


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

/* Das Handbild schmaler, damit "Das Leben spricht mit uns." in eine Zeile
   passt: die Zeile braucht bei 56 px Schriftgrad 663 px, die Textspalte hatte
   579. Mit diesem Verhaeltnis stehen ihr 697 px zur Verfuegung.
   Das Bild traegt sein Seitenverhaeltnis selbst (1024x1536), es wird mit der
   Spalte also einfach kleiner. */
body.page-id-261 .soul-intro-grid{
  grid-template-columns:.64fr 1.36fr;
  gap:56px;
}

/* Keine Mindesthoehe fuer die Bildspalte. Der Entwurf gibt ihr 680 px, weil er
   das Bildmodul absolut darin aufspannt - genau das schlaegt aber die
   Korrektur .et_pb_image{position:static} im Basisblatt. Das Modul bringt
   deshalb seine eigene Hoehe mit (hier 491 px), und unter ihm blieben 69 px
   tote Flaeche stehen: der Abstand zur naechsten Sektion wuchs damit auf
   181 px statt der 112 px, die ueberall sonst gelten. Ohne Mindesthoehe legt
   sich die Spalte um das Bild. */
body.page-id-261 .ritual-photo{min-height:0}
body.page-id-261 .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){
  /* Auf schmalen Schirmen wird das Bild stark vergroessert und ist dadurch
     schon von sich aus weicher. Die Weichzeichnung faellt deshalb noch
     kleiner aus. */
  body.page-id-261{--s14-unschaerfe:1.5px;--s14-kreis:clamp(190px,50vw,250px)}

  body.page-id-261 .hero{
    min-height:0;
    /* Wenig Luft unter dem Kreis: er soll auf Kundenwunsch tief stehen, dicht
       ueber der Kante zur naechsten Sektion. */
    padding:92px 0 54px;
  }
  /* Auf dem Handy braucht es keinen eigenen Ausschnitt mehr: das Blatt steht
     mit 1,39:1 nahe genug am Hochformat, dass "cover" von selbst den linken
     Bildrand zeigt - und dort steht der Drache. Er ragt damit von links in die
     Ueberschrift, ohne dass Groesse, Lage und weiche Kanten von Hand gesetzt
     werden muessten.

     Zum Vergleich: mit dem alten Panorama (2,5:1) zeigte derselbe Ausschnitt
     entweder nur Himmel oder einen formatfuellenden Drachen; es brauchte ein
     frei gesetztes Bild samt Maske an beiden Kanten. */
  body.page-id-261 .hero::before{
    /* Ein weisser Drache vor weissem Himmel verliert im Kleinen seine
       Zeichnung. Etwas mehr Kontrast holt sie zurueck. */
    filter:blur(var(--s14-unschaerfe)) contrast(1.10) saturate(1.05);
  }
  /* Der Schleier bleibt oben fast offen: dort steht der Drache, und er ist
     selbst weiss - ein dichter Schleier loescht ihn. Die Schrift darauf ist
     dunkelblau und traegt auch ohne Aufhellung (ueber 12:1 auf dem hellen
     Himmel). Erst weiter unten, wo das Bild ohnehin ausblendet, wird der
     Schleier dichter. */
  body.page-id-261 .hero::after{
    background:
      linear-gradient(180deg,
        rgba(244,248,253,.06) 0%,
        rgba(244,248,253,.22) 42%,
        rgba(244,248,253,.62) 74%,
        rgba(244,248,253,.86) 100%);
  }
  body.page-id-261 .hero-copy{justify-self:stretch;width:auto}
  /* Auf schmalen Schirmen ist fuer zwei Spalten kein Platz: der Kreis rutscht
     unter den Text und steht dort mittig. */
  /* Der Abstand zum Text steht als Zeilenabstand im Raster, nicht als Margin
     an der Spalte: die Divi-Bruecke setzt .et_pb_column{margin:0!important}. */
  body.page-id-261 .hero-grid{grid-template-columns:1fr;row-gap:86px}
  body.page-id-261 .hero-visual{
    grid-column:1;
    justify-self:stretch;
    margin:0;
  }
  body.page-id-261 .hero-arch{margin-left:auto;margin-right:auto}
  /* Die Zeile unter dem Portraet steht hier mittig unter dem Kreis. */
  body.page-id-261 .hero-note{
    margin:20px auto 0;
    text-align:center;
  }

  /* Die Schaltflaechen stehen hier untereinander und standen viel zu weit
     auseinander: Divi haelt in der Spalte (.et_flex_column) 30 px Abstand
     zwischen ALLEN Modulen, dazu kamen 30 px margin-top vom Auftakt und
     13 px margin-bottom aus der Divi-Bruecke - zusammen ueber 70 px.
     Der Spaltenabstand entfaellt deshalb ganz, und die drei Abstaende, die
     es wirklich braucht, stehen einzeln da. */
  body.page-id-261 .hero-copy{row-gap:0}
  body.page-id-261 .hero-meta{margin:26px 0 0}
  body.page-id-261 .hero-copy>.et_pb_button_module_wrapper{
    margin-top:30px;
    margin-bottom:0;
  }
  body.page-id-261 .hero-copy>.et_pb_button_module_wrapper
    +.et_pb_button_module_wrapper{margin-top:12px}
  body.page-id-261 .soul-intro-grid{grid-template-columns:1fr;gap:44px}

  /* Das Handbild entfaellt auf schmalen Schirmen (Kundenwunsch). Einspaltig
     steht es als hoher Block ueber dem Text und schiebt ihn weit nach unten;
     der Abschnitt kommt ohne es aus. */
  body.page-id-261 .ritual-photo{display:none}
}


/* ---------- 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 Start14
   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-261::before{display:none}

body.page-id-261 .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-261 .recognition-visual{
  background:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.70),transparent 32%),
    linear-gradient(135deg,#e9f0fa,#e2ebf7);
}
body.page-id-261 .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-261 .quote-panel{
  background:linear-gradient(180deg,#f2f7fd,#e4edf9);
}
body.page-id-261 .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-261 .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-261 .hero-copy>.et_pb_text{width:100%}
  body.page-id-261 .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-261 .hero-meta{
  margin:2px 0 0;
  gap:12px 30px;
  color:var(--s5-tinte);
  font-size:1.04rem;
  font-weight:500;
}
body.page-id-261 .hero-meta span{
  gap:12px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:1.04rem;
  font-weight:500;
}
body.page-id-261 .hero-meta i{
  width:7px;
  height:7px;
  transform:none;
  border:0;
  border-radius:50%;
  background:var(--s5-gold);
}
body.page-id-261 .hero-meta span:first-child i{display:block}

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


/* ---------- G. Die Marke der Angebotskarten: eine Sonne neben der Zeile ---------

   Bisher stand ueber jeder Karte eine goldene Raute als eigene Zeile. Auf
   Kundenwunsch wird daraus eine kleine, feingliedrige Sonne, und sie rueckt
   neben die Ueberschrift.

   Die Karte wird dafuer vom senkrechten Flexcontainer zum Raster: Sonne und
   Ueberschrift teilen sich die erste Zeile, Text und Pfeil laufen ueber beide
   Spalten. Die dritte Rasterzeile nimmt den Rest der Hoehe, damit die Pfeile
   einer Reihe wie bisher auf einer Linie stehen - im Raster traegt das
   align-self:end, nicht mehr das margin-top:auto des Entwurfs.
   -------------------------------------------------------------------------- */

body.page-id-261 .service-row{
  display:grid;
  /* Marke | Ueberschrift | Pfeil - der Pfeil steht seit dem Kundenwunsch
     nicht mehr unten in der Karte, sondern rechts in der Kopfzeile. Die
     mittlere Spalte nimmt den Rest und schiebt ihn damit an den Rand. */
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:16px;
  row-gap:0;
  align-items:start;
}
/* Mittig zur Ueberschrift, nicht mittig zu ihrem Kasten: der Zeilenkasten
   reicht unten bis unter die Grundlinie (Platz fuer Unterlaengen), sein
   Mittelpunkt liegt deshalb tiefer als die optische Mitte der Versalien.
   Die drei Pixel gleichen genau das aus. */
body.page-id-261 .service-row .marke{
  grid-column:1;
  grid-row:1;
  align-self:center;
  position:relative;
  top:-3px;
}
/* Die Marke ist hoeher als die Zeile der Ueberschrift; ohne align-self haenge
   die Ueberschrift oben in der Rasterzeile. */
body.page-id-261 .service-row h3{grid-column:2;grid-row:1;align-self:center;margin:0}
body.page-id-261 .service-row p{grid-column:1 / -1;grid-row:2;margin:16px 0 0}
/* Der Pfeil sitzt rechts neben der Ueberschrift, auf deren Hoehe. Die drei
   Pixel nach oben gleichen - wie bei der Marke - den Zeilenkasten aus, der
   unten Platz fuer Unterlaengen mitbringt. */
body.page-id-261 .service-row .arrow{
  grid-column:3;
  grid-row:1;
  align-self:center;
  justify-self:end;
  position:relative;
  top:-3px;
  margin-top:0;
  padding-top:0;
  font-size:1.7rem;
  line-height:1;
}

/* Die Sonne ist eine Zeichnung in dieser Datei (SVG als Data-URI), kein Bild
   vom Server: sie liegt als Maske ueber einer goldenen Flaeche. Die Farbe
   kommt damit weiter aus --s5-gold und laesst sich an einer Stelle aendern.
   Die Linien sind eine von 24 Einheiten stark, bei 22 px Kantenlaenge also
   knapp ein Pixel - fein genug, um neben der Serifenschrift nicht zu poltern. */
body.page-id-261 .service-row .marke{
  width:var(--s14-marke-groesse);
  height:var(--s14-marke-groesse);
  margin:0;
  transform:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:var(--s14-marke) center / contain no-repeat;
  /* Fuer die Sonne (oder fuer das Logo in Palettengold) stattdessen:
     background:var(--s5-gold);
     -webkit-mask:var(--s14-marke) center / contain no-repeat;
             mask:var(--s14-marke) center / contain no-repeat; */
}