/* Lebenswerk — globale Gestaltung
 *
 * Hier steht, was kein Widget abbilden kann: Verhalten des klebenden
 * Kopfbereichs, Fokusrahmen, Marken-Zierrat (der Strich am Kicker, die
 * Chip-Form) und die Zeitleiste. Alles Inhaltliche steckt in den Widgets.
 * Kommt aus dem frueheren HTML-Widget des Kopfbereichs (Post 25).
 */

/* ============================================================ Kopfbereich */
.lwhead{position:fixed;top:0;left:0;right:0;z-index:110;
  transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.lwhead.solid{background:rgba(247,244,237,.95);box-shadow:0 2px 22px rgba(63,61,51,.09);
  backdrop-filter:blur(10px)}

/* Weicher Verlauf hinter dem durchsichtigen Kopfbereich — sonst steht die
   weisse Schrift ueber hellen Bildstellen ohne Halt. */
.lwhead::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-46px;
  pointer-events:none;z-index:-1;opacity:1;transition:opacity .3s;
  background:linear-gradient(to bottom,rgba(38,35,29,.62) 0%,rgba(38,35,29,.38) 45%,
    rgba(38,35,29,.12) 78%,rgba(38,35,29,0) 100%)}
.lwhead.solid::before{opacity:0}

/* Adminleiste: der feste Kopfbereich muss darunter rutschen */
body.admin-bar .lwhead{top:32px}
@media screen and (max-width:782px){body.admin-bar .lwhead{top:46px}}
@media screen and (max-width:600px){body.admin-bar .lwhead{top:0}}

/* Logo: ueber dem Foto weiss, auf der cremefarbenen Leiste in Originalfarben */
.lwbrand img{filter:brightness(0) invert(1);transition:filter .3s}
.lwhead.solid .lwbrand img{filter:none}

/* Zustandswechsel beim Scrollen.
   Das Menue-Widget fuehrt seine Farben ueber Custom Properties. Fuer den
   gescrollten Zustand werden hier nur diese Werte ausgetauscht — kein
   !important noetig, weil nicht gegen eine fremde Regel angeschrieben wird.
   Die Werte fuer den Normalzustand (ueber dem Foto) stehen in den
   Widget-Einstellungen und bleiben dort aenderbar. Der Aufklapp-Pfeil folgt
   der Textfarbe von selbst (currentColor) und braucht keine eigene Zeile.

   Zur Spezifitaet: Elementor schreibt dieselben Variablen mit {{WRAPPER}},
   also mit 0,4,0. Wer hier nur `.lwhead.solid .lwnav .bnws-menu` schreibt
   (0,3,0), kommt nicht dagegen an — der Zustandswechsel bliebe wirkungslos,
   und zwar lautlos. Die doppelte Klasse macht 0,5,0 daraus. */
.lwhead.solid .lwnav .bnws-menu.bnws-menu{
  --bnws-menu-link-color:#5c5749;
  --bnws-menu-link-color-hover:#676942;
  --bnws-menu-link-color-active:#676942;
  --bnws-menu-pointer-color:#676942;
  --bnws-arrow-color:#5c5749;
  --bnws-trigger-color:#5c5749;
  --bnws-trigger-color-hover:#676942}

/* Die Schaltflaeche „Termin vereinbaren" gehoert nicht zum Menue. */
.lwhead.solid .lwbtn .elementor-button{background:#676942!important;border-color:#676942!important}

/* Schriftfamilie pro Geraet.
   Die einzige Gestaltungsangabe, die nicht im Widget stehen kann: Elementors
   Typografie-Gruppe macht Groesse, Zeilenhoehe und Abstand geraeteabhaengig,
   die Schriftfamilie nicht. Hier ist sie aber genau das — am Schirm Open Sans
   in der Leiste und Cormorant im Aufklappmenue, im Vollbild umgekehrt.
   Deshalb steht die Familie hier vollstaendig, und im Widget gar nicht. Stuende
   sie dort, gaebe Elementor sie mit {{WRAPPER}} aus (0,6,0) und keine
   vernuenftige Regel kaeme mehr dagegen an. Die 0,5,0 hier schlagen Elementors
   globale Vorgabe (0,4,0), mehr braucht es nicht. */
.lwhead .lwnav .bnws-menu__list--depth-0 > .bnws-menu__item > .bnws-menu__link{
  font-family:'Open Sans',sans-serif}
.lwhead .lwnav .bnws-menu__submenu .bnws-menu__link{
  font-family:'Cormorant Garamond',serif}

/* Haarlinie um den Kasten des Aufklappmenues, weil der Schatten allein zu wenig
   trennt: im gescrollten Zustand liegt der cremefarbene Kasten auf einer
   cremefarbenen Leiste.

   Das Widget hat dafuer durchaus eine Einstellung (`submenu_border`). Sie ist
   hier bewusst nicht benutzt: ein Rahmen macht den Kasten um zwei Pixel
   groesser, und der Schatten sitzt dann nicht mehr auf seiner Kante. `outline`
   nimmt keinen Platz ein, und moderne Browser folgen damit der Rundung.

   Nur im schwebenden Zustand. Im Vollbild ist der Kasten kein Kasten mehr,
   sondern eine Liste auf dunklem Grund — ein Umriss haette dort nichts zu
   umschliessen. Die Rundung der einzelnen Zeile stand bis zum 21.08.2026
   ebenfalls hier und ist jetzt eine Widget-Einstellung. */
.lwhead .lwnav .bnws-menu[data-bnws-submenu="dropdown"] .bnws-menu__submenu{
  outline:1px solid rgba(63,61,51,.07);outline-offset:-1px}

/* Solange das Vollbildmenue offen ist, gelten die hellen Farben — auch wenn
   die Leiste gescrollt ist.

   Der Zustandswechsel oben faerbt die Menuelinks dunkel (#5c5749). Das ist
   richtig, solange sie auf der cremefarbenen Leiste stehen. Wer aber weiter
   unten auf der Seite das Menue oeffnet, bekommt dieselbe dunkle Schrift auf
   dem dunklen Vollbild: #5c5749 auf #38362d misst **1,7:1**. Verlangt sind
   3:1. Die Unterpunkte blieben hell, weil sie ihre Farbe aus dem Block
   darunter beziehen — deshalb war nur die obere Ebene unlesbar, was den
   Fehler zusaetzlich schwer zu sehen machte.

   `[data-bnws-open]` steht am Wurzelelement, solange das Panel offen ist.
   0,6,0 schlaegt die 0,5,0 des Zustandswechsels. */
.lwhead .lwnav .bnws-menu.bnws-menu[data-bnws-open]{
  --bnws-menu-link-color:#ffffff;
  --bnws-menu-link-color-hover:#ffffff;
  --bnws-menu-link-color-active:#d9c9b2;
  --bnws-menu-pointer-color:#d9c9b2;
  --bnws-arrow-color:#ffffff;
  --bnws-trigger-color:#ffffff;
  --bnws-trigger-color-hover:#ffffff}

/* ---- Handy und Tablet: dunkles Vollbild ----
   Hier stand bis 21.08.2026 eine knappe Seite CSS mit rund dreissig
   !important-Angaben: Vollbild statt Kaestchen, Hoehe, Hintergrund,
   Schliessen-Schaltflaeche, Aufklappen beim Ueberfahren, Escape, Breite des
   Aufklappmenues. Das bringt das Widget alles selbst mit.
   Uebrig bleiben zwei Dinge, die es nicht geraeteabhaengig kann: die
   Schriftfamilie (nur die Groesse ist pro Geraet einstellbar) und die
   Farben, die es je Widget nur einmal gibt.
   Auch hier 0,5,0 — aus demselben Grund wie beim Zustandswechsel oben. */
@media (max-width:1024px){
  .lwhead .lwnav .bnws-menu.bnws-menu{
    --bnws-arrow-color:#ffffff;
    --bnws-menu-link-color-active:#d9c9b2;
    --bnws-sub-bg:transparent;
    --bnws-sub-link-color:#d8d3c4;
    --bnws-sub-link-color-hover:#ffffff;
    --bnws-sub-link-color-active:#ffffff;
    /* Die Flaechen des Aufklappmenues sind fuer den hellen Kasten am
       Bildschirm gesetzt. Im dunklen Vollbild bekam der angetippte Eintrag
       damit eine cremefarbene Pille: weiss auf #ece7dc misst 1,2:1 und ist
       schlicht nicht zu lesen. */
    --bnws-sub-link-bg-hover:transparent;
    --bnws-sub-link-bg-active:transparent}

  /* Die Markierung des aktuellen Unterpunktes.
     Vorher lag eine graue Flaeche ueber die **ganze Zeilenbreite**, dazu ein
     ebenso breiter Unterstrich — zusammen las sich das wie eine Trennlinie
     mit Kasten, nicht wie eine Markierung.

     Die Flaeche haengt jetzt an der Beschriftung statt an der Zeile. Das ist
     der Umweg, aber der stabile: die Zeile im eingeklappten Menue auf
     Textbreite zu bringen scheitert an `flex:1 1 0` und `inline-size:100%`
     des Widgets, die dort ihren guten Grund haben (der Aufklapp-Knopf soll
     daneben passen). Die Beschriftung ist von sich aus so breit wie ihr Text.
     Deshalb sind oben auch die Flaechen des Widgets abgeschaltet — sonst
     laege die alte Zeilenflaeche weiter darunter. */
  .lwhead .lwnav .bnws-menu__submenu .bnws-menu__label{
    display:inline-block;flex:0 0 auto;
    padding:.16em 1.1em;border-radius:999px;
    transition:background var(--bnws-menu-duration,.25s) ease}

  .lwhead .lwnav .bnws-menu__submenu .bnws-menu__item--current > .bnws-menu__link .bnws-menu__label{
    background:rgba(217,201,178,.18)}
  .lwhead .lwnav .bnws-menu__submenu .bnws-menu__item:hover > .bnws-menu__link .bnws-menu__label,
  .lwhead .lwnav .bnws-menu__submenu .bnws-menu__link:focus-visible .bnws-menu__label{
    background:rgba(217,201,178,.12)}

  /* Und ohne Unterstrich: Flaeche und Strich zugleich ist einmal zu viel. */
  .lwhead .lwnav .bnws-menu__submenu .bnws-menu__link::after{display:none}
  .lwhead .lwnav .bnws-menu__list--depth-0 > .bnws-menu__item > .bnws-menu__link{
    font-family:'Cormorant Garamond',serif}
  .lwhead .lwnav .bnws-menu__submenu .bnws-menu__link{
    font-family:'Open Sans',sans-serif;letter-spacing:.2px}

  /* Mittig, wie im bisherigen Vollbildmenue. Die Ausrichtung des Widgets
     (--bnws-menu-justify) hilft hier nicht: in der senkrechten Liste steuert
     justify-content die Hoehe, nicht die Breite. Zentriert wird deshalb im
     Menuepunkt selbst — und der Punkt wird zur Flex-Zeile, damit der
     Aufklapp-Knopf neben dem Text steht statt darunter. Das Untermenue hat
     flex-basis:100% und rutscht dadurch von selbst in die naechste Zeile. */
  .lwhead .lwnav .bnws-menu__panel .bnws-menu__list--depth-0 > .bnws-menu__item{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
  .lwhead .lwnav .bnws-menu__panel .bnws-menu__link{
    justify-content:center;text-align:center;inline-size:auto;
    /* Nicht auf die volle Breite wachsen lassen: sonst zieht sich der
       Unterstrich des aktuellen Punktes ueber die ganze Zeile und liest sich
       wie eine Trennlinie statt wie eine Markierung. */
    flex:0 1 auto}

  /* Die Punkte standen oben, darunter lagen 500 px leere Flaeche. In einem
     bildfuellenden Menue gehoert die Liste in die Mitte — etwas ueber die
     optische Mitte gehoben, weil der Schliessen-Knopf oben Gewicht hat. */
  .lwhead .lwnav .bnws-menu__panel{display:flex;flex-direction:column}
  .lwhead .lwnav .bnws-menu__panel .bnws-menu__list--depth-0{
    margin-block:auto;padding-block-end:8vh}

  /* Weichzeichnung: entweder deckend oder richtig weich. Bei 6 px blieben die
     Umrisse der Seite lesbar — Kacheln, Knoepfe, der Einwilligungskasten —
     und das las sich wie ein Fleck statt wie Absicht. Die Deckkraft der
     Flaeche selbst steht in der Widget-Einstellung. */
  .lwhead .lwnav .bnws-menu__panel{backdrop-filter:blur(24px) saturate(.85)}
}

/* ========================================================= Sprunglink/Fokus */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #26231d;outline-offset:3px;
  box-shadow:0 0 0 5px rgba(255,255,255,.95);border-radius:6px}
.lwhead:not(.solid) a:focus-visible,.lwhead:not(.solid) button:focus-visible{
  outline-color:#fff;box-shadow:0 0 0 5px rgba(38,35,29,.9)}

.skip-link.screen-reader-text:focus{position:fixed!important;top:12px;left:12px;
  width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;
  z-index:200;background:#3f3d33;color:#fff;padding:14px 22px;border-radius:24px;
  font-family:'Open Sans',sans-serif;font-size:15px;text-decoration:none;
  box-shadow:0 10px 30px rgba(38,35,29,.35)}
body.admin-bar .skip-link.screen-reader-text:focus{top:44px}

/* Lange Woerter duerfen die Seite bei 320 px nicht aufspreizen (WCAG 1.4.10) */
main#content p,main#content li,main#content h1,main#content h2,main#content h3,
main#content a,main#content span,main#content strong,main#content em{overflow-wrap:break-word}

/* ============================================================ Angebotskarten */
.lw-card{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.lw-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(63,61,51,.14)}
.lw-card a.lw-cardoverlay{position:absolute;inset:0;z-index:4;border-radius:inherit}
.lw-card:focus-within{box-shadow:0 0 0 3px #26231d,0 22px 46px rgba(63,61,51,.14)}
.lw-card > .e-con:last-of-type{flex:1 1 auto;justify-content:flex-start}
.lw-card > .e-con:last-of-type > .elementor-widget:last-child{margin-top:auto}
.lw-cardlink .elementor-button{transition:gap .25s,color .25s}
.lw-card:hover .lw-cardlink .elementor-button{color:#676942}
.lw-card:hover .lw-cardlink .elementor-button-icon{margin-left:12px}
.lw-cardlink .elementor-button:focus-visible{outline:none}

/* ================================================================== Kicker */
/* Der kurze Strich vor (und mittig: hinter) der Kleinschrift ist Marken-
   Zierrat. Er nimmt die Schriftfarbe an, die im Widget eingestellt ist. */
.lw-kicker .elementor-heading-title{display:flex;align-items:center;gap:10px}
.lw-kicker .elementor-heading-title::before{content:"";width:26px;height:1px;
  background:currentColor;opacity:.55;flex-shrink:0}
.lw-kicker--mitte .elementor-heading-title{justify-content:center}
.lw-kicker--mitte .elementor-heading-title::after{content:"";width:26px;height:1px;
  background:currentColor;opacity:.55;flex-shrink:0}

/* =================================================================== Chips */
/* Schlagwortliste als Pillen. Inhalt und Reihenfolge stehen im
   Icon-List-Widget, die Form hier. */
.lw-chips .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:10px}
.lw-chips .elementor-icon-list-item{margin:0!important;padding:9px 16px;
  background:#fffdf8;border:1px solid rgba(143,145,91,.22);border-radius:22px;
  box-shadow:0 3px 10px rgba(143,145,91,.07)}
.lw-chips .elementor-icon-list-item:after{display:none}
.lw-chips--mitte .elementor-icon-list-items{justify-content:center}
.lw-chips--weich .elementor-icon-list-item{border:none;padding:10px 18px;
  box-shadow:0 3px 10px rgba(63,61,51,.06)}

/* ================================================================ Fliesstext */
/* Rechtstexte und Inhaltskarten. Die Auszeichnung (Absatz, Liste, Betonung)
   kommt aus dem Text-Editor, die Groessen von hier. */
.lw-prosa{color:#5c5749}
.lw-prosa p{font-size:16px;line-height:1.85;margin:0 0 16px}
.lw-prosa p:last-child{margin-bottom:0}
.lw-prosa h2{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:500;
  color:#676942;margin:34px 0 12px}
.lw-prosa h2:first-child{margin-top:0}
.lw-prosa ul{padding-left:20px;margin:0 0 16px}
.lw-prosa li{font-size:16px;line-height:1.8;margin-bottom:8px}
.lw-prosa a{color:#7d6246}
.lw-prosa .hinweis{font-size:14.5px;line-height:1.8;color:#797568;font-style:italic}
/* Offene Angabe in Impressum/Datenschutz — soll niemandem durchgehen. */
.lw-luecke{display:inline-block;padding:2px 10px;border-radius:6px;
  background:#f6e2a8;border:1px dashed #8a6d1f;color:#5a4610;font-weight:600;
  font-style:normal;font-size:.95em}

/* ==================================================================== Karte */
.lw-karte iframe{display:block;border:0}

/* Bis zur Zustimmung steht der Platzhalter von FreddyFox Consent da, wo sonst
   die Karte waere. Die Mindesthoehe verhindert den Sprung im Layout, wenn das
   echte iframe nachgeladen wird. Aussehen (Rundung, Rand, Schatten) ist fuer
   Platzhalter und Karte dasselbe. */
.lw-karte .elementor-custom-embed,
.lw-karte .ffox-placeholder,
.lw-karte .ffox-embed{border-radius:24px;overflow:hidden;
  border:1px solid rgba(143,145,91,.18);box-shadow:0 20px 50px rgba(143,145,91,.18)}
/* Platzhalter und Karte gleich hoch — sonst springt die Seite beim Laden. */
.lw-karte .ffox-placeholder,
.lw-karte .ffox-embed{min-height:360px}
.lw-karte .ffox-embed{height:360px;display:block}
/* Der Platzhalter bringt ein blaeuliches Grau mit (Vorgabe des Plugins). Die
   Variablen sind dafuer da, ueberschrieben zu werden — hier auf die Farben
   des Kits. Taupe auf Off-White misst 6,3:1. */
.ffox-placeholder{--ffox-ph-bg:#fffdf8;--ffox-ph-text:#5c5749;--ffox-ph-note:#5c5749;
  --ffox-ph-border:rgba(143,145,91,.28)}

/* =============================================================== Kontaktzeile */
.lw-cta{display:block;margin-top:6px;font-size:13.5px;color:#7d6246;font-weight:600}

/* ============================================================== Fussbereich */
/* Rechtsverweise nebeneinander mit Abstand — die Inline-Liste setzt von sich
   aus keinen. */
.lw-fussrecht .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:10px 22px}
.lw-fussrecht .elementor-icon-list-item{margin:0!important}
.lw-fussrecht .elementor-icon-list-item:after{display:none}

/* ============================================================== Zeitleiste */
.lw-zeitleiste{position:relative}
.lw-zeitleiste::before{content:"";position:absolute;left:71px;top:8px;bottom:30px;
  width:2px;background:rgba(66,67,44,.25)}
.lw-zeit::before{content:"";position:absolute;left:62px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;background:#fffdf8;border:3px solid #676942;
  box-shadow:0 0 0 5px #c7cfb4;z-index:1}
@media(max-width:600px){
  .lw-zeitleiste::before,.lw-zeit::before{display:none}
}

/* ========================================================= WhatsApp-Schaltflaeche */
/* z-index 90, nicht 120: mit 120 lag der Knopf ueber dem Kopfbereich (110) —
   und damit auch ueber dem geoeffneten Vollbildmenue. Dessen Panel sitzt im
   Kopfbereich, und weil der einen eigenen Stapelbereich aufspannt, kommt es
   mit keiner noch so hohen eigenen Zahl darueber hinaus. Ueberschneiden tun
   sich die beiden ohnehin nie: der Knopf sitzt unten rechts, der Kopfbereich
   oben. */
.lw-wa{position:fixed;bottom:24px;right:24px;z-index:90}
.lw-wa .elementor-button{width:58px;height:58px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(63,61,51,.28)}
.lw-wa .elementor-button-icon{margin:0;display:flex}
/* Ohne Groessenangabe rendert das SVG mit 15 px und verliert sich in der
   58-px-Flaeche. 27 px entspricht dem frueheren Symbol. */
.lw-wa .elementor-button-icon svg{width:27px;height:27px;fill:#fff}

/* Am Handy etwas kleiner und naeher an den Rand. Grund ist der Hero: seit die
   Knopfreihe im ersten Bild steht, sitzt „Mein Angebot entdecken" mittig genau
   dort, wo der Kreis schwebt. Gemessen bei 375 und 390 px Breite ueberdeckte
   er dessen rechtes Ende um 8 px. Mit 52 px und 16 px Randabstand bleiben
   6 bis 13 px frei; 52 px liegen weiterhin deutlich ueber der Mindestgroesse
   fuer Tippziele (44 px). */
@media(max-width:767px){
  .lw-wa{bottom:20px;right:16px}
  .lw-wa .elementor-button{width:52px;height:52px}
}

/* ============================================================ Weniger Bewegung */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .elementor-invisible{visibility:visible!important}
  .elementor-motion-effects-layer{transform:none!important}
  /* Seit 23.08. bewegen sich auch **Elemente** selbst (Portraits, Bloecke,
     einzelne Ueberschriften). Die Regel darueber trifft nur die
     Hintergrundschicht — ohne diese zweite Zeile liefe die neue Bewegung bei
     „Bewegung reduzieren" ungebremst weiter. */
  .elementor-motion-effects-element{transform:none!important}
  .lw-card:hover{transform:none}
}

/* ================================================ Datenschutz-Einstellungen */
/* Der Aufruf des Einwilligungs-Dialogs steht im Fussbereich neben Impressum,
   Datenschutz und Barrierefreiheit — Art. 7 Abs. 3 DSGVO: der Widerruf muss so
   leicht sein wie die Zustimmung. Das Plugin liefert eine helle Schaltflaeche;
   im dunklen Fussbereich soll sie aussehen wie die Links daneben.
   #ada89e auf #3f3d33 misst 4,6:1. */
.lw-fusseinst .ffox-btn{background:none;border:0;padding:0;cursor:pointer;
  color:#ada89e;font-family:'Open Sans',sans-serif;font-size:12px;line-height:1.6;
  text-decoration:underline;text-underline-offset:3px;transition:color .25s}
.lw-fusseinst .ffox-btn:hover{color:#fff;background:none}
.lw-fusseinst .ffox-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Fokusrahmen im Einwilligungsdialog.
   Das Plugin bringt eigene Fokusrahmen mit (3 px in der Akzentfarbe). Bei den
   hellen Schaltflaechen sitzt das gut; auf der olivgruenen Zustimmen-Schalt-
   flaeche liegt der Rahmen aber fast in der Farbe der Flaeche selbst —
   gemessen rgb(113,114,78) auf rgb(103,105,66). Dort deshalb der Rahmen der
   uebrigen Seite: dunkel, mit hellem Hof.
   Die Regeln des Plugins kommen per JavaScript ins Dokument und stehen damit
   spaeter in der Kaskade — bei gleicher Gewichtung gewaennen sie. Der
   zusaetzliche Vorfahre in der Auswahl hebt die Gewichtung, ganz ohne
   !important. */
.ffox-banner .ffox-btn--accept:focus-visible,
.ffox-modal .ffox-btn--accept:focus-visible,
.ffox-placeholder .ffox-btn--accept:focus-visible{
  outline:2px solid #26231d;outline-offset:3px;
  box-shadow:0 0 0 5px rgba(255,255,255,.95)}

/* ====================================== Rundung unter dem Hintergrund-Effekt */
/* Elementor haengt fuer „Scrolling Effects" am Hintergrund einen Behaelter in
   das Element: inset:0, overflow:hidden — aber **ohne** dessen border-radius.
   Der Behaelter beschneidet das Bild dann rechteckig und malt ueber die runden
   Ecken. Genau so sind am 22.08. die Bogenformen der Portraits verschwunden.
   Die Rundung wird deshalb weitergereicht. Wo keine ist, ergibt sich 0 —
   die Regel kostet nichts und verhindert, dass die Falle noch einmal
   zuschnappt, etwa wenn jemand den Effekt im Editor neu setzt. */
.elementor-motion-effects-container{border-radius:inherit}