/* ==========================================================================
   SONNENFLECKEN - Designtest fuer Start8 (Seite 231)

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


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

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

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


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

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

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

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

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

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


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

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


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

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

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


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

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


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

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


/* ==========================================================================
   START8 - die drei Abweichungen gegenueber Start5

   1. Ueberschriften serifenlos
   2. Bilder eckig mit abgerundeten Ecken
   3. Sonnenflecken ueber der ganzen Seite
   ========================================================================== */


/* ---------- A. Ueberschriften serifenlos --------------------------------------

   Das Entwurfsblatt setzt h1 bis h3 und das Zitat auf var(--serif), also
   Georgia. Wird diese eine Variable auf die Sans-Familie umgelegt, wechseln
   alle Ueberschriften mit - inklusive Zitat und Ritualzeile, ohne dass eine
   einzelne Regel angefasst werden muss.

   Inter braucht in Displaygroessen mehr Gewicht und eine engere Laufweite als
   Georgia, sonst wirken die Zeilen duenn und auseinandergezogen. Mehr als 600
   gibt es nicht: nur 400, 500 und 600 liegen lokal als woff2 vor.
   -------------------------------------------------------------------------- */

body.page-id-231{
  --serif:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body.page-id-231 h1,
body.page-id-231 h2,
body.page-id-231 h3{
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.08;
}
body.page-id-231 h1{font-size:clamp(2.15rem,3.5vw,3.35rem)}
body.page-id-231 h2{font-size:clamp(1.8rem,2.7vw,2.6rem)}
body.page-id-231 h3{font-size:clamp(1.3rem,1.8vw,1.65rem)}

body.page-id-231 .quote-panel blockquote{
  font-weight:600;
  font-size:clamp(1.8rem,3.2vw,3.1rem);
  line-height:1.18;
  letter-spacing:-.028em;
}
body.page-id-231 .hero-note strong,
body.page-id-231 .ritual-caption{
  font-weight:600;
  letter-spacing:-.012em;
}


/* ---------- B. Bilder eckig mit abgerundeten Ecken ----------------------------

   Der Entwurf stellt beide Bilder in einen Rundbogen (oben 260 bzw. 220 px
   Radius). Hier tragen sie durchgehend 22 px - dieselbe Rundung wie die
   Schaltflaechen, damit die Seite eine Formsprache hat.
   -------------------------------------------------------------------------- */

body.page-id-231 .hero-arch{border-radius:22px}
body.page-id-231 .ritual-photo-main{border-radius:22px}
body.page-id-231 .hero-note{border-radius:18px}

/* Der Bogen war hoch und schmal; als Rechteck darf das Portrait etwas mehr
   Flaeche bekommen und der Ausschnitt rueckt auf die Augenhoehe. */
body.page-id-231 .hero-arch img{object-position:72% 26%}


/* ---------- C. Sonnenflecken ---------------------------------------------------

   Eine Blendenreflexion, wie sie entsteht, wenn Licht schraeg in ein Objektiv
   faellt: ein Schein an der Lichtquelle rechts oben und eine Kette kleiner
   Kreise, die auf der Gegendiagonale nach links unten laeuft.

   Die Ebene liegt ueber dem Inhalt (z-index 2) und traegt nur helle, weit
   ausgelaufene Verlaeufe - sie hellt auf und kann nichts abdunkeln.
   pointer-events:none haelt sie aus jeder Bedienung heraus.

   Bewusst OHNE mix-blend-mode: zusammen mit der Transform-Animation zwingt
   der Mischmodus Chrome dazu, jede Textzeile darunter als eigene
   Compositing-Ebene zu rechnen. Die Zeilenkaesten werden dann als helle
   Rechtecke hinter der Schrift sichtbar.

   Die Wanderung laeuft ueber 150 Sekunden hin und ebenso lang zurueck: der
   Reflex zieht dabei rund acht Prozent der Fensterbreite nach links unten und
   dreht sich leicht mit, wie es ein Objektiv tut, wenn sich der Winkel zur
   Sonne aendert. Bei prefers-reduced-motion faellt die Bewegung ganz weg.
   -------------------------------------------------------------------------- */

body.page-id-231::after{
  content:"";
  position:fixed;
  inset:-6%;
  z-index:2;
  pointer-events:none;
  opacity:.85;
  background:
    /* Der Schein an der Lichtquelle */
    radial-gradient(circle 260px at 80% 8%,rgba(255,247,225,.60),transparent 68%),
    radial-gradient(circle 620px at 82% 4%,rgba(255,240,205,.22),transparent 70%),
    /* Die Kette der Reflexe zur Gegenseite */
    radial-gradient(circle 34px at 70% 22%,rgba(255,232,178,.34),transparent 66%),
    radial-gradient(circle 74px at 62% 32%,rgba(214,233,255,.24),transparent 68%),
    radial-gradient(circle 26px at 55% 41%,rgba(255,238,196,.30),transparent 64%),
    radial-gradient(circle 120px at 46% 52%,rgba(255,244,214,.16),transparent 70%),
    radial-gradient(circle 30px at 38% 62%,rgba(206,228,255,.22),transparent 66%),
    radial-gradient(circle 56px at 30% 71%,rgba(255,236,190,.20),transparent 68%),
    radial-gradient(circle 18px at 24% 79%,rgba(255,246,220,.26),transparent 62%),
    /* Der schraege Lichtbalken */
    linear-gradient(202deg,rgba(255,246,222,0) 38%,rgba(255,246,222,.16) 50%,rgba(255,246,222,0) 62%);
  animation:s8-sonnenflecken 150s ease-in-out infinite alternate;
}

@keyframes s8-sonnenflecken{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(-4.5%,2.6%,0) scale(1.07) rotate(1.4deg)}
  100%{transform:translate3d(-8%,5%,0) scale(1.04) rotate(2.6deg)}
}

@media(prefers-reduced-motion:reduce){
  body.page-id-231::after{animation:none}
}

/* Auf schmalen Schirmen sitzt die Lichtquelle weiter innen, sonst laege die
   halbe Reflexkette ausserhalb des Bildes. */
@media(max-width:680px){
  body.page-id-231::after{
    opacity:.58;
    background:
      radial-gradient(circle 180px at 74% 7%,rgba(255,247,225,.55),transparent 68%),
      radial-gradient(circle 380px at 78% 3%,rgba(255,240,205,.20),transparent 70%),
      radial-gradient(circle 26px at 62% 24%,rgba(255,232,178,.30),transparent 66%),
      radial-gradient(circle 54px at 52% 38%,rgba(214,233,255,.22),transparent 68%),
      radial-gradient(circle 20px at 44% 50%,rgba(255,238,196,.26),transparent 64%),
      radial-gradient(circle 80px at 34% 62%,rgba(255,244,214,.15),transparent 70%),
      linear-gradient(202deg,rgba(255,246,222,0) 38%,rgba(255,246,222,.13) 50%,rgba(255,246,222,0) 62%);
  }
}


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

   Wie auf Start5. 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 samt 26 px Polsterung; bei kurzen Texten steht dadurch
   mehr als ein Drittel der Karte leer.

   Ohne die feste Mindesthoehe richten sich die Karten nach ihrem Inhalt. Gleich
   hoch bleiben sie trotzdem, weil das Entwurfsblatt sie im Raster auf
   height:100% setzt - in einer Zeile zieht die laengste Karte die andere mit.
   -------------------------------------------------------------------------- */

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