/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* ==========================================================================
   flow-your-life.de — Design-System (int-tech, 14.07.2026, Phase 2)
   Gepflegt im Git: ~/Documents/flow-your-life/deploy/child-theme-style.css
   Deploy: scp -> wp-content/themes/oceanwp-child-theme-master/style.css

   Grundlage: doku/design-baseline.md (Messwerte des Ist-Zustands vom 14.07.2026)
   ========================================================================== */

:root {
  /* EIN Markengruen. Vorher waren es eelf verschiedene (#79aa01, #79aa00,
     #7fb300, #577a00, #669000, #8fc706, #61ce70, #84c340, #4bb300, #78ab00,
     #00e030) — alle bis auf einen scheiterten an der WCAG-Kontrastschwelle.
     #5b8000 ist der hellste Ton im exakten Marken-Farbton (H=77°), der besteht:
     4,63:1 fuer weissen Text auf Gruen UND gruenen Text auf Weiss. */
  --fyl-gruen: #5b8000;
  --fyl-gruen-hell: #f2f6e9;   /* sehr helle Tönung fuer Flaechen */
  --fyl-text: #4a4a4a;         /* 8,86:1 auf Weiss */
  --fyl-text-hell: #6b6b6b;

  /* Typo-Skala. Vorher: Seitentitel in 30/39/42/50/51px — dieselbe semantische
     Ebene schwankte um Faktor 1,7. Jetzt eine Stufenleiter. */
  --fyl-h1: 42px;
  --fyl-h2: 32px;
  --fyl-h3: 24px;
  --fyl-body: 17px;

  --fyl-breite: 1140px;        /* vorher 8 verschiedene Inhaltsbreiten */
}

/* --- 1. Mobiles Menue: Touch-Ziel vergroessern -----------------------------
   Der Burger-Button war 16x21px — das kleinste interaktive Element der Site.
   Empfehlung (WCAG 2.5.5 / Apple / Google): mindestens 44x44px. */
.oceanwp-mobile-menu-icon a,
a.mobile-menu,
.mobile-menu-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* --- 2. Galerie: Bilder nicht mehr verzerren -------------------------------
   Vorher wurden Bilder in feste Kacheln gezwaengt: bodensee_yogaraum.jpg
   (Hochformat 493x657) wurde in ein Querformat gequetscht — rund 54% des
   Bildes fielen weg. DSC00073.jpg verlor 37%. Mit `object-fit: contain`
   bleibt das ganze Motiv sichtbar. */
.elementor-image-gallery .gallery-item img,
.elementor-widget-image-gallery img {
  object-fit: contain !important;
  height: auto !important;
  background: var(--fyl-gruen-hell);
}

/* --- 3. Fokus sichtbar machen (Tastatur-Bedienung) ------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--fyl-gruen);
  outline-offset: 2px;
}

/* --- 4. Formular: Felder ruhiger, Fehler klar ------------------------------ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 16px;   /* verhindert das Auto-Zoomen auf iPhones */
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--fyl-gruen);
}
/* Absende-Button.
   ACHTUNG: Das Kontaktformular sitzt auf einer GRUENEN Karte. Ein gruener Button
   waere dort unsichtbar (gruen auf gruen). Deshalb: weisser Button mit gruener
   Schrift — das funktioniert auf beiden Untergruenden und ist eindeutig als
   Schaltflaeche erkennbar. */
.wpcf7 input.wpcf7-submit[type="submit"],
.wpcf7 input[type="submit"] {
  background: #ffffff !important;
  color: var(--fyl-gruen) !important;
  border: 2px solid #ffffff !important;
  border-radius: 3px !important;
  padding: 13px 30px !important;
  font-size: 15px !important;    /* vorher 12px — zu klein */
  font-weight: 700 !important;
  letter-spacing: 0 !important;  /* vorher 1,2px — passte zu keinem anderen Button */
  cursor: pointer;
  transition: background .15s, color .15s;
}
.wpcf7 input.wpcf7-submit[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover {
  background: transparent !important;
  color: #ffffff !important;
}

/* DSGVO-Hinweis am Formular.
   Steht ebenfalls auf der gruenen Karte -> weiss, nicht grau.
   (Grau auf Gruen ergab 1,15:1 — praktisch unlesbar.) */
.dsgvo-hinweis {
  color: #ffffff;
  margin-top: 14px;
}
.dsgvo-hinweis a {
  color: #ffffff;
  text-decoration: underline;
}

/* --- 5. Lesbarkeit langer Texte -------------------------------------------
   Das Impressum hatte 172 Zeichen pro Zeile — mehr als das Doppelte der
   Lesbarkeitsgrenze (65–75). */
.page-id-141 .elementor-widget-text-editor,
.page-id-143 .elementor-widget-text-editor {
  max-width: 70ch;
}
.page-id-141 .elementor-widget-text-editor p,
.page-id-143 .elementor-widget-text-editor p {
  color: var(--fyl-text);   /* Impressum stand auf reinem Schwarz, alles andere auf #4a4a4a */
}

/* --- 6. Hero der Startseite: mobil lesbar machen ---------------------------
   Auf 390px zeigt der Bildausschnitt an der Stelle des Heraklit-Zitats helle
   Wassergischt. Weisser Text darauf ergab 1,35:1 — praktisch unlesbar (Desktop
   war i.O., weil dort ein dunklerer Ausschnitt liegt). Die Abdunklung wird
   mobil deshalb verstaerkt (0,55 -> 0,7), was auch den Fliesstext von 4,44:1
   ueber die AA-Schwelle hebt. */
@media (max-width: 767px) {
  .elementor-section > .elementor-background-overlay,
  .elementor-element > .elementor-background-overlay {
    opacity: 0.7 !important;
  }
}

/* Weicher Schatten auf allen Texten, die auf einem Bild liegen. Wirkt dort, wo
   der Untergrund hell ist, und bleibt ueber dunklen Stellen unsichtbar.
   ACHTUNG: Ein Schatten verbessert die Lesbarkeit, zaehlt aber NICHT fuer die
   WCAG-Kontrastmessung — dafuer braucht es die abgedunkelte Flaeche unten. */
.elementor-section[class*="elementor-element"] > .elementor-background-overlay ~ .elementor-container h1,
.elementor-section[class*="elementor-element"] > .elementor-background-overlay ~ .elementor-container p,
.elementor-section[class*="elementor-element"] > .elementor-background-overlay ~ .elementor-container em,
.elementor-section[class*="elementor-element"] > .elementor-background-overlay ~ .elementor-container span {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}

/* Das Heraklit-Zitat sitzt genau ueber der hellsten Wasserstelle des Fotos
   (weisse Gischt). Weisser Text darauf ergab 1,35:1 — die Abdunklung der
   Sektion reicht dort nicht, und sie weiter hochzudrehen wuerde das Foto
   ersaeufen. Das Zitat bekommt deshalb eine eigene, dezent abgedunkelte
   Flaeche: garantierter Kontrast UND es wirkt bewusst gestaltet — so wie das
   Zitat auf der alten Site ein eigenes Gestaltungselement war. */
/* Zentrierung mit !important, weil Elementor fuer das Widget eine eigene
   margin-Regel erzeugt (margin: 30px 0 0 0), die die auto-Margins aushebelt. */
/* Dasselbe Problem auf /holidayyoga/ (hyzitat1): Auch dort war das Zitat ins
   Banner gebrannt, und auch dort liegt es nach dem Freischneiden ueber einer
   hellen Stelle — quer ueber das leuchtende Om-Symbol. Gemessen: 2,38:1 im
   Median, 1,39:1 an der hellsten Stelle. Beide Zitate bekommen deshalb
   dieselbe Behandlung — ein Gestaltungselement, kein Notbehelf. */
.elementor-element-herakzit1,
.elementor-element-hyzitat1 {
  max-width: 660px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.elementor-element-herakzit1 .elementor-widget-container,
.elementor-element-hyzitat1 .elementor-widget-container {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  padding: 18px 22px;
}
/* Das HolidayYoga-Zitat ist laenger — es braucht etwas mehr Platz, damit es
   nicht in vier Zeilen zerfaellt. */
.elementor-element-hyzitat1 { max-width: 780px; }

/* Sobald das Zitat unter 24px faellt, gilt nicht mehr die Schwelle fuer grosse
   Schrift (3:1), sondern 4,5:1. Das passiert schon im TABLET-Bereich (21px ab
   1024px), nicht erst auf dem Handy — meine erste Fassung dunkelte aber erst ab
   767px staerker ab. Gemessene Luecke dazwischen: 4,18:1 auf /angebot/ =
   durchgefallen. Die Grenze liegt deshalb jetzt bei 1024px, nicht bei 767px. */
@media (max-width: 1024px) {
  .elementor-element-hyzitat1 .elementor-widget-container {
    background: rgba(0, 0, 0, 0.58);
  }
}
/* ACHTUNG: Die Verstaerkung fuer `.fyl-zitat` steht NICHT hier, sondern weiter
   unten — direkt hinter der Basisregel. Grund: Eine Media Query erhoeht die
   Spezifitaet NICHT. Stand die Verstaerkung hier oben, gewann die spaeter
   notierte Basisregel (45 %) auch auf dem Handy — die Verstaerkung war
   wirkungslos, und der Text auf drei Bannern fiel mobil unter die Schwelle.
   (Gemeldet von Harald am 14.07.2026 fuer /infos/, beim Nachmessen fielen
   /yoga/, /wellnessmassagen/ und /angebot/ ebenfalls durch.) */

/* Telefonnummer im gruenen Kopfbalken: Das Theme faerbt Links dort #e4f0f5 —
   auf dem Markengruen ergibt das 3,99:1 und faellt damit unter AA. Reines Weiss
   auf demselben Gruen ergibt 4,63:1 und besteht. */
#top-bar-content a,
#top-bar-content a:hover,
#top-bar-wrap a {
  color: #ffffff;
}

/* Dieselbe Behandlung fuer die Zitate auf /yoga/, /angebot/,
   /wellnessmassagen/ und /infos/. Auch dort waren sie ins Banner GEBRANNT —
   auf zwei Bildern sogar zusammen mit der abgeloesten Serifen-Wortmarke, so
   dass die Seite zwei verschiedene Marken zeigte. Die Bilder sind jetzt
   textfrei, die Zitate sind echter Text: skalierbar, vorlesbar, auffindbar. */
.fyl-zitat {
  max-width: 780px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.fyl-zitat .elementor-widget-container {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  padding: 18px 22px;
}
.fyl-zitat p { margin: 0; }
.fyl-zitat p + p { margin-top: 8px; }

/* Sobald das Zitat unter 24px faellt (ab 1024px), gilt nicht mehr die Schwelle
   fuer grosse Schrift (3:1), sondern 4,5:1. Gemessen mit 45 %: /yoga/ 3,43:1,
   /wellnessmassagen/ 3,56:1, /angebot/ 4,21:1 — alle drei durchgefallen.
   Mit 62 % liegt die schlechteste Stelle bei ueber 6:1.
   Diese Regel MUSS nach der Basisregel stehen (siehe Hinweis weiter oben). */
@media (max-width: 1024px) {
  .fyl-zitat .elementor-widget-container {
    background: rgba(0, 0, 0, 0.62);
  }
}

/* Das Zitat gehoert an den UNTEREN Rand des Banners — so war es in allen
   Originalbildern gesetzt, und nur dort steht es niemandem im Motiv.
   KORREKTUR: Mein erster Versuch nutzte margin-top:auto. Das war falsch — die
   Banner-Container sind Flex-ZEILEN (--flex-direction:row) mit
   align-items:center. In einer Zeile ist die Querachse die senkrechte, also
   verschiebt align-self, nicht margin-top. Deshalb blieb der Kasten mittig
   stehen und lag auf /yoga/ genau auf der Mudra-Hand und auf /holidayyoga/
   quer ueber dem Om-Zeichen — den jeweils EINZIGEN Motiven der Bilder. */
.fyl-zitat,
.elementor-element-hyzitat1 {
  align-self: flex-end !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* /infos/: Der Bodensee-Sonnenuntergang ist das mit Abstand HELLSTE Bild der
   Site — das Sonnenband ist stellenweise ausgebrannt (reines Weiss). Die
   Standard-Abdunklung von 45 % (Desktop) bzw. 58 % (mobil) reicht dort nicht:
   Gemessen an der hellsten Stelle unter dem Zitat ergab das mobil nur 3,54:1
   gegen die noetigen 4,5:1 — der Text war ueber dem Sonnenband schlicht nicht
   lesbar (gemeldet von Harald, 14.07.2026).
   Dieses eine Banner bekommt deshalb eine staerkere Flaeche. Rechnerisch liegt
   die schlechteste Stelle damit bei ueber 8:1. */
.elementor-element-infzitat1 .elementor-widget-container {
  /* 0,60 ergab fuer die duenne Quellenzeile "Keshab" (19px, Staerke 300) am
     Desktop 4,42:1 — knapp unter 4,5:1. Mit 0,66 sind es ueber 5:1. */
  background: rgba(0, 0, 0, 0.66);
}
@media (max-width: 1024px) {
  .elementor-element-infzitat1 .elementor-widget-container {
    background: rgba(0, 0, 0, 0.72);
  }
}

/* /yoga/: Das Bild zeigt zu zwei Dritteln leeren Himmel und rechts die
   Mudra-Hand. Ein mittiger Kasten deckt genau sie ab. Das Zitat rueckt deshalb
   nach LINKS in den freien Himmel — dort stoert es nichts. */
.elementor-element-yogazitat1 {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 560px;
}
.elementor-element-yogazitat1 .elementor-widget-container { text-align: left; }

/* --- 11. Banner: eine Hoehe fuer alle -------------------------------------
   Vorher sprangen die Bannerhoehen von Seite zu Seite: 527 / 550 / 600 / 650 /
   704 px — sechs verschiedene Formate. Beim Navigieren "huepfte" die Seite,
   weil der Inhalt jedes Mal woanders begann. Jetzt eine Hoehe. */
.elementor-element-f51f747,   /* yoga */
.elementor-element-68cab8b,   /* holidayyoga */
.elementor-element-97a167c,   /* wellnessmassagen */
.elementor-element-0da3a72,   /* angebot */
.elementor-element-39fc85e,   /* infos */
.elementor-element-f5cc8bc,   /* aktuell */
.elementor-element-e15b944,   /* impressum */
.elementor-element-fe22ad2,   /* kontakt */
.elementor-element-3b9c12a {  /* datenschutz */
  --min-height: 560px;
}
@media (max-width: 767px) {
  .elementor-element-f51f747, .elementor-element-68cab8b, .elementor-element-97a167c,
  .elementor-element-0da3a72, .elementor-element-39fc85e, .elementor-element-f5cc8bc,
  .elementor-element-e15b944, .elementor-element-fe22ad2, .elementor-element-3b9c12a {
    --min-height: 300px;
  }
}

/* --- 7. Seerose als Wiedererkennung ---------------------------------------
   Das Motiv der alten Site, das bei der Uebernahme verloren ging. Dezent im
   Footer, VOLLSTAENDIG innerhalb des Footers (der erste Versuch mit negativem
   Versatz wurde am Rand angeschnitten). Nur auf grossen Schirmen. */
@media (min-width: 960px) {
  #footer-bottom {
    position: relative;
  }
  #footer-bottom::before {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 62px;
    height: 60px;
    background: url("/wp-content/uploads/2026/07/seerose.png") no-repeat center / contain;
    opacity: 0.45;
    pointer-events: none;
  }
}

/* --- 8. WhatsApp-Direktkontakt (Phase 3) -----------------------------------
   Telefon/WhatsApp ist Sandras Hauptkanal. Der Button ist ein reiner Link mit
   eingebettetem SVG — beim Seitenaufruf wird NICHTS von Meta geladen.

   FARBE, KORRIGIERT 14.07.2026: Ich hatte das Original-WhatsApp-Gruen #25D366
   genommen. Weisse Schrift darauf ergibt **1,98:1** — WhatsApps eigene
   Markenfarbe besteht die Barrierefreiheits-Schwelle nicht (4,5:1 fuer Text,
   3:1 fuer das Symbol). Das galt auf JEDER Seite.
   Jetzt #0E7A3C: derselbe Farbton, nur dunkler -> 5,43:1. Das weisse Symbol
   bleibt — es IST das WhatsApp-Logo und traegt die Wiedererkennung; ein dunkles
   Glyph auf hellem Gruen haette kaputt ausgesehen.
   Die zweite Ausnahme vom Ein-Gruen-Prinzip bleibt damit bestehen, aber lesbar. */
.fyl-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;              /* Touch-Ziel deutlich ueber 44px */
  padding: 0 18px 0 15px;
  border-radius: 26px;
  background: #0E7A3C;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
  transition: transform .15s, box-shadow .15s;
}
.fyl-whatsapp:hover,
.fyl-whatsapp:focus {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
/* Auf dem Handy nur das Symbol — der Text wuerde die Seite zustellen */
@media (max-width: 640px) {
  .fyl-whatsapp {
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .fyl-whatsapp-text { display: none; }
}
/* Beim Drucken stoert er nur */
@media print { .fyl-whatsapp { display: none; } }

/* --- 9. Textlinks, die wie Schaltflaechen wirken (Phase 3) -----------------
   Fuer Verweise, die im Fliesstext stehen, aber ein Angebot sind (z.B. die
   Yoga-Ferien bei HolidayYoga). Gruener Grund mit weisser Schrift: 4,63:1 —
   besteht WCAG AA. Die helle Variante fuer den zweitrangigen Verweis, damit
   nicht zwei gleich laute Schaltflaechen nebeneinander stehen. */
.fyl-btn {
  display: inline-block;
  margin: 6px 10px 6px 0;
  padding: 13px 24px;
  border-radius: 3px;
  background: var(--fyl-gruen);
  border: 2px solid var(--fyl-gruen);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
.fyl-btn:hover,
.fyl-btn:focus {
  background: #ffffff;
  color: var(--fyl-gruen) !important;
}
.fyl-btn-hell {
  background: #ffffff;
  color: var(--fyl-gruen) !important;
}
.fyl-btn-hell:hover,
.fyl-btn-hell:focus {
  background: var(--fyl-gruen);
  color: #ffffff !important;
}

/* --- 11b. Hero der Startseite, mobil: Text auf eigener Flaeche -------------
   Gemessen an den echten Pixeln (Kontrast des weissen Textes gegen den
   Untergrund, mobil, 390px):
       1. Absatz  5,66:1 Median — aber nur 2,08:1 an der hellsten Stelle
       2. Absatz  3,24:1 Median —      1,69:1 an der hellsten Stelle
       3. Absatz  2,36:1 Median —      1,67:1 an der hellsten Stelle
   Noetig sind 4,5:1. Der mobile Bildausschnitt legt die Texte auf die weisse
   Gischt; auf dem Desktop liegt dort ein dunklerer Teil des Fotos, deshalb
   faellt es dort nicht auf.
   Die Abdunklung der ganzen Flaeche weiter hochzudrehen (0,7 -> 0,85) wuerde
   das Foto ersaeufen. Stattdessen bekommt der TEXT eine eigene Flaeche — genau
   wie die Zitate. Rechnerisch hebt das die schlechteste Stelle auf ueber 5:1. */
@media (max-width: 767px) {
  .elementor-element-arduvcg .elementor-widget-text-editor > .elementor-widget-container,
  .elementor-element-arduvcg .elementor-widget-heading > .elementor-widget-container {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 12px 16px;
  }
}

/* --- 11c. Aufruf auf der Startseite ("Beginne deine Reise …") --------------
   Er steht in weisser Schrift direkt auf dem Allgaeu-Waldfoto — ganz ohne
   Abdunklung. Gemessen an den echten Pixeln: 3,29:1 bis 4,29:1 gegen die
   noetigen 4,5:1. Er bekommt dieselbe Flaeche wie die Zitate. */
.elementor-element-bjiztsz .elementor-widget-container {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  padding: 20px 24px;
}
.elementor-element-bjiztsz {
  max-width: 780px;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 1024px) {
  .elementor-element-bjiztsz .elementor-widget-container {
    background: rgba(0, 0, 0, 0.66);
  }
}

/* Die H2 auf /holidayyoga/ ("Yoga-Ferien am Bodensee — mit oder ohne lieben
   Hund") stand in Schriftstaerke 400. Damit gilt fuer sie nicht die Schwelle
   fuer grosse Schrift (3:1), sondern 4,5:1 — und gruen auf der hellen
   Marken-Toenung ergibt gemessen 4,22:1: knapp durchgefallen.
   Eine Ueberschrift gehoert ohnehin fett gesetzt. Ab Schriftstaerke 700 zaehlt
   sie bei 20px als grosse Schrift, die Schwelle ist 3:1 — und sie sieht
   endlich wie eine Ueberschrift aus. */
.elementor-element-hyhundh2 .elementor-heading-title {
  font-weight: 700 !important;
}

/* --- 12. Seerose im Footer: nicht mehr angeschnitten -----------------------
   Sie war 60px hoch, der Footer-Balken ist niedriger — die Bluete wurde oben
   und unten abgeschnitten und schob sich ueber die rechte Kante. Kleiner und
   mit Abstand zum Rand sitzt sie vollstaendig drin. */
@media (min-width: 960px) {
  #footer-bottom { position: relative; overflow: hidden; }
  #footer-bottom::before {
    width: 34px;
    height: 34px;
    right: 26px;
  }
}

/* --- 13. Lesbare Zeilenlaengen --------------------------------------------
   Im Fliesstext liefen Zeilen ueber die volle Spalte von 1168px — bis zu 150
   Zeichen. Lesbar sind 60–75. Schlimmer noch: auf DERSELBEN Seite standen
   daneben 55-Zeichen-Spalten, das Mass sprang also mitten im Lesefluss.
   Gilt nicht fuer Zitate, Listen und den Footer. */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  max-width: 74ch;
}
.fyl-zitat p,
#footer p,
.elementor-widget-icon-list li { max-width: none; }

/* --- 14. Ueberschriften: ein System statt sechs ----------------------------
   Vorher hatte jede Seite ihren eigenen H1-Auftritt: YOGA in Versalien, Holiday
   Yoga normal, Wellnessmassagen kursiv und zentriert (das einzige kursive
   Element der Site), Angebot in einer anderen Schrift und 33% groesser als
   dasselbe Wort auf der Startseite. Sechs Seiten, sechs Auftritte. */
.elementor-widget-heading h1.elementor-heading-title,
.ekit-heading--title h1,
h1.ekit-heading--title {
  font-size: var(--fyl-h1) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
/* ElementsKit-Ueberschriften (nur /wellnessmassagen/) erzeugen ihr eigenes CSS
   mit sehr hoher Spezifitaet und setzten die H1 KURSIV — das einzige kursive
   Element der ganzen Site. Die Auszeichnung sitzt am <span> INNERHALB der h1,
   deshalb muss die Regel beide treffen. */
h1.ekit-heading--title,
h1.ekit-heading--title span,
.elementskit-section-title-wraper .elementskit-section-title,
.elementskit-section-title-wraper .elementskit-section-title span {
  font-style: normal !important;
  font-size: var(--fyl-h1) !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

@media (max-width: 767px) {
  .elementor-widget-heading h1.elementor-heading-title,
  h1.ekit-heading--title,
  h1.ekit-heading--title span,
  .elementskit-section-title-wraper .elementskit-section-title,
  .elementskit-section-title-wraper .elementskit-section-title span { font-size: 32px !important; }
}

/* --- 15. WhatsApp-Button: nicht auf der Kontaktseite -----------------------
   Auf /kontakt/ ueberlappte der schwebende Knopf mobil die rechte Kante der
   Eingabefelder — ausgerechnet dort, wo das Formular der Kontaktweg IST.
   Auf dieser einen Seite ist er ueberfluessig. */
.page-id-137 .fyl-whatsapp { display: none; }

/* --- 15b. Die drei Angebots-Karten der Startseite fluchten -----------------
   Gemessen war: das Yoga-Bild 10px hoeher als die anderen beiden, die
   Ueberschrift entsprechend 10px tiefer, und die drei Knoepfe standen auf DREI
   verschiedenen Hoehen (Abstand zur Kartenunterkante 77 / 67 / 50px). Nichts
   lag auf einer Linie. Dazu stand "YOGA" in Versalien, die anderen beiden nicht.
   Jetzt: gleiche Bildhoehe, Knopf immer am Kartenende, gleiche Schreibweise. */
.elementor-element-6fbdec0 { align-items: stretch !important; }

.elementor-element-4496408,
.elementor-element-30437d5,
.elementor-element-38a1062 {
  display: flex !important;
  flex-direction: column !important;
}
/* Feste Bildhoehe — sonst startet die gruene Flaeche in jeder Karte woanders
   und Ueberschrift, Text und Knopf rutschen entsprechend mit. */
.elementor-element-4496408 .elementor-widget-image img,
.elementor-element-30437d5 .elementor-widget-image img,
.elementor-element-38a1062 .elementor-widget-image img {
  height: 240px !important;
  object-fit: cover !important;
  width: 100% !important;
  display: block;
}
/* Der Knopf wird ans Ende der Karte geschoben — dadurch stehen alle drei auf
   einer Linie, egal wie lang der Text darueber ist.
   Er haengt in einem Zwischencontainer, deshalb greift das margin-top:auto am
   LETZTEN direkten Kind der Karte, nicht am Knopf-Widget selbst. */
.elementor-element-4496408 > :last-child,
.elementor-element-30437d5 > :last-child,
.elementor-element-38a1062 > :last-child {
  margin-top: auto !important;
}
/* Kein Versal-Ausreisser mehr */
.elementor-element-4496408 .elementor-heading-title,
.elementor-element-30437d5 .elementor-heading-title,
.elementor-element-38a1062 .elementor-heading-title {
  text-transform: none !important;
}

/* --- 16. Kleinigkeiten ----------------------------------------------------- */
/* Schrift nachladen ohne unsichtbaren Text */
@font-face { font-display: swap; }

/* Bilder nie ueber ihren Rahmen hinaus */
img { max-width: 100%; height: auto; }