.elementor-kit-6{--e-global-color-primary:#617A87;--e-global-color-secondary:#EADAC5;--e-global-color-text:#575756;--e-global-color-accent:#4B6270;--e-global-color-82497cf:#F7F1E8;--e-global-color-eeee933:#FFFFFF;--e-global-typography-primary-font-family:"RW-Poppins";--e-global-typography-primary-font-weight:300;--e-global-typography-secondary-font-family:"RW-Poppins";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-text-font-family:"RW-SourceSans3";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"RW-SourceSans3";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:600;--e-global-typography-0f1bfbc-font-family:"RW-SourceSans3";--e-global-typography-0f1bfbc-font-size:13px;--e-global-typography-0f1bfbc-font-style:italic;color:var( --e-global-color-text );}.elementor-kit-6 e-page-transition{background-color:var( --e-global-color-secondary );}.elementor-kit-6 a{color:var( --e-global-color-primary );}.elementor-kit-6 a:hover{color:var( --e-global-color-text );}.elementor-kit-6 h1{color:var( --e-global-color-primary );font-family:"RW-Poppins", Sans-serif;font-size:46px;font-weight:300;line-height:1.25em;}.elementor-kit-6 h2{color:var( --e-global-color-primary );}.elementor-kit-6 h3{color:var( --e-global-color-primary );font-family:"RW-Poppins", Sans-serif;font-size:22px;font-weight:300;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 h1{font-size:32px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================== Rückenwind Physiotherapie · globales CSS für Elementor Pro Einfügen unter: Website-Einstellungen › Custom CSS Klassen vergeben unter: Element › Erweitert › CSS-Klassen (ohne Punkt eintragen, z. B. rw-card) Stand: 22.10.2026 · immer die KOMPLETTE Datei einfügen ========================================================== */ /* ---------- Header: schrumpft beim Scrollen ---------- Klasse rw-header an den Header-Container, Sticky oben mit Effekt-Versatz 80. Klasse rw-logo an das Logo-Widget. */ .rw-header { transition: padding .3s, background-color .3s, box-shadow .3s; } .rw-header.elementor-sticky--effects { padding-top: 8px; padding-bottom: 8px; background-color: #ffffff; box-shadow: 0 2px 16px rgba(87, 87, 86, .10); } .rw-header .rw-logo img { transition: max-width .3s; } .rw-header.elementor-sticky--effects .rw-logo img { max-width: 150px; } /* ---------- Button mit Pfeil, der beim Hover nach rechts rückt ---------- Klasse rw-btn-arrow an das Button-Widget (Icon rechts). */ .rw-btn-arrow .elementor-button-icon { transition: transform .25s ease; } .rw-btn-arrow .elementor-button:hover .elementor-button-icon, .rw-btn-arrow .elementor-button:focus-visible .elementor-button-icon { transform: translateX(4px); } /* ---------- Vertrauensleiste über der Hero-Kante ---------- Klasse rw-trust an den weißen Container. */ .rw-trust { position: relative; z-index: 2; margin-top: -48px; box-shadow: 0 10px 30px rgba(75, 98, 112, .10); } @media (max-width: 767px) { .rw-trust { margin-top: 0; } } /* ---------- Leistungskarte ---------- Klasse rw-card an den Karten-Container im Loop-Item (mit Link). Klasse rw-more an die Zeile „Mehr erfahren“. */ .rw-card { transition: transform .3s ease, box-shadow .3s ease; } .rw-card:hover, .rw-card:focus-visible, .rw-card:focus-within { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(75, 98, 112, .14); } .rw-card img { transition: transform .6s ease; } .rw-card:hover img, .rw-card:focus-within img { transform: scale(1.05); } /* Gleich hohe Karten im Loop-Raster, „Mehr erfahren“ immer unten */ .e-loop-item > .rw-card { height: 100%; } .rw-card .rw-more { position: relative; margin-top: auto; } .rw-card .rw-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: #EADAC5; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .rw-card:hover .rw-more::after, .rw-card:focus-within .rw-more::after { transform: scaleX(1); } .rw-card .rw-more svg, .rw-card .rw-more i { transition: transform .3s; } .rw-card:hover .rw-more svg, .rw-card:hover .rw-more i { transform: translateX(4px); } /* ---------- Porträt mit versetztem Sandrahmen ---------- Klasse rw-frame an den leeren Rahmen-Container hinter dem Bild. */ .rw-frame { border: 2px solid #EADAC5; border-radius: 100px 100px 8px 8px; } /* ---------- Drei Schritte mit Linie ---------- Klasse rw-steps an den Container mit den drei Spalten, Klasse rw-line an den leeren 2-px-Container. Die Linie darf IN rw-steps liegen oder direkt DAVOR (Geschwister). Sie wächst, sobald eine Spalte ihre Einblend-Animation startet. */ .rw-line { transform: scaleX(0); transform-origin: left; transition: transform 1.2s ease .3s; } .rw-steps.animated .rw-line, .rw-steps:has(.animated) .rw-line, .rw-line:has(+ .rw-steps .animated) { transform: scaleX(1); } @media (max-width: 767px) { .rw-line { display: none; } } /* ---------- Werdegang als Zeitleiste ---------- Klasse rw-timeline an den Container mit linker Sandlinie, Klasse rw-fill an den leeren Container auf der Linie. */ .rw-timeline { position: relative; } .rw-timeline .rw-fill { position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: #617A87; transform-origin: top; } @supports (animation-timeline: view()) { .rw-timeline .rw-fill { animation: rw-fill linear both; animation-timeline: view(); animation-range: entry 30% cover 70%; } } @keyframes rw-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* Punkt je Station auf der Linie. --rw-tl-pad = Innenabstand links von rw-timeline (bei deck7 32px), --rw-tl-top = Abstand des Punkts von oberer Stationskante. */ .rw-timeline { --rw-tl-pad: 32px; --rw-tl-top: 6px; } .rw-timeline .rw-fill { padding: 0 !important; min-height: 0 !important; z-index: 1; } .rw-timeline > .e-con:not(.rw-fill), .rw-timeline > .e-con-inner > .e-con:not(.rw-fill) { position: relative; } .rw-timeline > .e-con:not(.rw-fill)::before, .rw-timeline > .e-con-inner > .e-con:not(.rw-fill)::before { content: ""; position: absolute; left: calc(-1 * var(--rw-tl-pad) - 9px); /* Punktmitte auf Linienmitte */ top: var(--rw-tl-top); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #617A87; z-index: 2; } /* ---------- „Heute geöffnet“-Anzeige (zum HTML-Widget) ---------- */ .rw-open { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; background: #ffffff; padding: 5px 12px; border-radius: 999px; } .rw-open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #B9B2A6; } .rw-open.is-open::before { background: #3F8A5A; box-shadow: 0 0 0 4px rgba(63, 138, 90, .18); } /* ---------- Anruf-Leiste auf dem Handy ---------- Klasse rw-callbar an den fixierten Container im Footer. */ @media (max-width: 767px) { body { padding-bottom: 76px; } .rw-callbar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(87, 87, 86, .12); } } /* ---------- Google-Karte in CI-Tönen (Übergangslösung) ---------- Klasse rw-map an das Google-Maps-Widget. */ .rw-map .elementor-custom-embed { position: relative; border-radius: 12px; overflow: hidden; } .rw-map iframe { display: block; filter: grayscale(1) sepia(.3) brightness(1.04) contrast(.92); } .rw-map .elementor-custom-embed::after { content: ""; position: absolute; inset: 0; background: #617a87; mix-blend-mode: color; opacity: .35; pointer-events: none; } /* ---------- Fett im Fließtext in Schiefer ---------- Keine Klasse nötig. Gilt nur in Text-Editor, Beitragsinhalt und Icon-Box-Beschreibungen, nicht in Buttons oder Überschriften. #617A87: auf Weiß 4,5:1 (gerade AA), auf Sand nur 4,0:1; für mehr Kontrast hier #4B6270 eintragen (5,7–6,4:1). */ :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .elementor-icon-box-description, .page-content, .entry-content) :is(strong, b) { color: #617A87; font-weight: 600; } /* ---------- Überschriften im Beitragsinhalt (Leistung-Einzelseite) ---------- Keine Klasse nötig: greift automatisch im Widget „Beitragsinhalt“. */ .elementor-widget-theme-post-content h2 { font-family: "RW-Poppins", sans-serif; font-weight: 300; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.3; margin: 1.8em 0 .5em; } .elementor-widget-theme-post-content h3 { font-family: "RW-Poppins", sans-serif; font-weight: 400; font-size: 20px; margin: 1.4em 0 .4em; } /* ---------- Bildunterschrift (überall gleich) ---------- Keine Klasse nötig: greift an jedem Bild-Widget mit Bildunterschrift. */ .elementor .elementor-widget-image .widget-image-caption { font-family: "RW-SourceSans3", sans-serif; font-size: 13px; font-style: italic; text-align: end; margin-block-start: 5px; } /* ---------- Untermenü (Dropdown) im Header ---------- Klasse rw-nav an das Widget „Navigationsmenü“. Optional: Menüeintrag „Alle Leistungen“ bekommt unter Design › Menüs die CSS-Klasse rw-nav-all (Trennlinie darüber). */ .rw-nav .elementor-nav-menu--main .sub-menu { background: #fff !important; border: 1px solid #EADAC5; border-radius: 12px; box-shadow: 0 14px 34px rgba(75, 98, 112, .14); padding: 8px; min-width: 270px !important; margin-top: 6px !important; } .rw-nav .elementor-nav-menu--main .sub-menu::before { /* Hover-Brücke zum Hauptpunkt */ content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .rw-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item { padding: 9px 14px; border-radius: 8px; font-size: 16px; line-height: 1.35; color: #575756 !important; background: transparent !important; border: 0; transition: background-color .2s ease, color .2s ease; } .rw-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover, .rw-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus-visible, .rw-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active { background: #F7F1E8 !important; color: #4B6270 !important; } .rw-nav .sub-menu .rw-nav-all { margin-top: 6px; padding-top: 6px; border-top: 1px solid #EADAC5; } .rw-nav .sub-menu .rw-nav-all > a.elementor-sub-item { font-weight: 600 !important; color: #4B6270 !important; } /* ---------- Mobiles Menü (Hamburger) im Stil des Desktop-Dropdowns ---------- Gilt für das Navigationsmenü mit der Klasse rw-nav unterhalb des Tablet-Umbruchs. Nur am