/* ============================================================ be in touch – Child-Theme-CSS · Designupdate 2026-10 (Richtung B „Klar“) Token-Leiter: Ebene 1 Elementor Kit 10 (Globale Farben / Typo) → --e-global-* Ebene 2 Aliase hier in :root → --bit_* Ebene 3 Komponenten (nur Aliase, kein Hex, kein px für Abstand/Radius) Gliederung: 00 Token · 01 Basis · 02 Utilities · 03 Layout/Elementor 04 Komponenten (Header, Hero-CTAs, Karten, FAQ/Akkordeon, Erfahrungen, Formular, Footer, Mobil-Leiste) 05 Ratgeber · 06 Bewegung (Konzept 3.4.0, mit assets/motion.js) · 09 Sektionen/Startseite · 10 Inhaltsseiten Stand 2026-10-23 nach Abschluss Schritt 4/5: keine Übergangsregeln mehr, keine ElementsKit-Selektoren. ============================================================ */ /* 00 · TOKEN (Ebene 2) ------------------------------------------ */ :root { /* Farbe */ /* Originalpalette von schmidt-ulmer.de, bereinigt auf Rollen */ --bit_color-primary: var(--e-global-color-primary, #55787C); /* Petrol: Überschriften, Struktur */ --bit_color-hover: var(--e-global-color-secondary, #729A07); /* Grün dunkel: Links, Hover */ --bit_color-cta: var(--e-global-color-accent, #9DB65D); /* Grün hell: Buttons (mit dunkler Schrift) */ --bit_color-ink: var(--e-global-color-text, #1D2A3D); --bit_color-white: var(--e-global-color-548d77a, #FFFFFF); --bit_color-ground: var(--e-global-color-c696dce, #FFFFFF); /* Body: Weiß wie im Original */ --bit_color-surface: var(--e-global-color-e0ce632, #F3F6EB); /* Papier-Grün: die Fläche der Marke */ --bit_color-line: var(--e-global-color-14ef391, #DCE3D2); --bit_color-gold: var(--e-global-color-b1f0a01, #E0A531); --bit_color-muted: #5B6A6C; --bit_color-night: var(--e-global-color-text, #1D2A3D); /* Nachtblau: dunkle Flächen (Erfahrungen, Footer) */ --bit_color-ink-rgb: 85, 120, 124; /* Petrol für Schatten */ /* Schrift */ --bit_font-display: "Caligraph", Georgia, serif; --bit_font-head: "Caligraph", Georgia, serif; /* H1 und H2 sprechen mit einer Stimme */ --bit_font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Abstand (8er-Raster) */ --bit_space-1: 4px; --bit_space-2: 8px; --bit_space-3: 16px; --bit_space-4: 24px; --bit_space-5: 32px; --bit_space-6: 48px; --bit_space-7: 64px; --bit_space-8: 96px; --bit_space-9: 128px; --bit_section-y: var(--bit_space-8); /* Sektionsgrenze: 96 Desktop, 80 Tablet, 64 Mobil (im 8er-Raster gestuft) */ --bit_card-pad: var(--bit_space-5); /* Kartenpolster, mobil 24 */ --bit_hero-top: var(--bit_space-5); /* Header → Hero-Karte, mobil 16 */ --bit_block-gap: var(--bit_space-6); /* zwischen Blöcken in einer Sektion */ --bit_item-gap: var(--bit_space-4); /* zwischen Karten/Elementen */ /* Form */ --bit_radius: 16px; /* Flächen, Karten (Original) */ --bit_radius-sm: 8px; /* Felder, kleine Elemente */ --bit_radius-btn: 999px; /* Pille (Original) */ --bit_radius-img: 16px; --bit_shadow: 0 4px 20px rgba(var(--bit_color-ink-rgb), .08), 0 1px 3px rgba(var(--bit_color-ink-rgb), .06); /* Karten (Original-Elevation 3) */ --bit_shadow-lg: 0 8px 30px rgba(var(--bit_color-ink-rgb), .14); --bit_bamboo: url("bamboo.png"); --bit_measure: 68ch; --bit_content: 1440px; /* wie im Original */ --bit_text-width: 880px; /* Bewegung */ --bit_motion: 300ms cubic-bezier(.2,.7,.2,1); /* Abwärtskompatibel (alte Klassen, bis Seitenumbau abgeschlossen) */ --bit_border-radius: var(--bit_radius); --bit_transition: all var(--bit_motion); --elevation-1: var(--bit_shadow); --elevation-2: var(--bit_shadow); --elevation-3: var(--bit_shadow); --elevation-4: var(--bit_shadow-lg); --elevation-5: var(--bit_shadow-lg); /* Alte Namen zeigen 1:1 auf die Skala (Stand 25.10.: auf keiner Seite mehr verwendet) */ --spacing-0: 0; --spacing-1: var(--bit_space-1); --spacing-2: var(--bit_space-2); --spacing-3: var(--bit_space-3); --spacing-4: var(--bit_space-4); --spacing-5: var(--bit_space-5); --spacing-6: var(--bit_space-6); --gap-0: 0; --gap-1: var(--bit_space-1); --gap-2: var(--bit_space-2); --gap-3: var(--bit_space-3); } @media (max-width: 1024px) { :root { --bit_section-y: 80px; --bit_block-gap: var(--bit_space-5); --bit_item-gap: var(--bit_space-3); } } @media (max-width: 767px) { :root { --bit_section-y: var(--bit_space-7); --bit_card-pad: var(--bit_space-4); --bit_hero-top: var(--bit_space-3); } } /* 01 · BASIS ------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--bit_font-body); color: var(--bit_color-ink); background: var(--bit_color-ground); } h1, h2, h3, h4, h5, h6 { text-wrap: balance; margin: 0 0 var(--bit_space-3); } h1, h2 { font-family: var(--bit_font-display); font-weight: 400; letter-spacing: 0; color: var(--bit_color-primary); } h3, h4, h5, h6 { font-family: var(--bit_font-body); font-weight: 600; } h4 { margin-top: var(--bit_space-5); } p { margin: 0 0 var(--bit_space-3); } .elementor-widget-text-editor p:last-child, .elementor-widget-text-editor ul:last-child { margin-bottom: 0; } strong, b { font-weight: 600; color: inherit; } /* vorher Petrol: Fettung ist Betonung, keine Farbe */ ul { padding: 0 0 0 1.1em; margin: 0 0 var(--bit_space-3); } li { margin: var(--bit_space-1) 0; list-style-type: disc; overflow: visible !important; } li::marker { color: var(--bit_color-primary); } a { color: var(--bit_color-cta); text-decoration-thickness: 1px; text-underline-offset: .15em; transition: color var(--bit_motion); } a:hover { color: var(--bit_color-hover); } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--bit_color-cta); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--bit_color-surface); color: var(--bit_color-ink); } .elementor-widget-text-editor, .elementor-widget-heading { max-width: 100%; } .elementor-widget-text-editor { max-width: var(--bit_measure); } .elementor-element.bit_full .elementor-widget-text-editor, .bit_full { max-width: none; } /* 02 · UTILITIES ---------------------------------------------------- */ .bit_subtitle { color: var(--bit_color-muted); font-size: 1.125rem; line-height: 1.6; } .bit_lead { font-size: 1.125rem; line-height: 1.6; color: var(--bit_color-muted); } .bit_label { font: 400 .9375rem/1.5 var(--bit_font-body); letter-spacing: 0; text-transform: none; color: var(--bit_color-muted); } .bit_small { font-size: .875rem; color: var(--bit_color-muted); } .bit_measure { max-width: var(--bit_measure); } .bit_center { text-align: center; margin-inline: auto; } .bit_br--mobile { display: none; } @media (max-width: 767px) { .bit_br--mobile { display: inline; } } .bit_anker { position: absolute; top: -96px; } .bit_elevation-1, .bit_elevation-2, .bit_elevation-3 { box-shadow: var(--bit_shadow); } .bit_elevation-4, .bit_elevation-5 { box-shadow: var(--bit_shadow-lg); } .bit_overflow--hidden, .bit_overflow--hidden * { overflow: hidden !important; } .bit_pruefen { background: #FFF3CD; color: #7A5A00; padding: 0 4px; border-radius: 4px; font-size: .9em; } /* Redaktionsmarker, kein Design-Token */ /* Abstands-Utilities (alte Namen, neue Skala) */ .bit_spacing-0{margin:0!important;padding:0!important}.bit_spacing-1{margin:var(--spacing-1)!important;padding:var(--spacing-1)!important}.bit_spacing-2{margin:var(--spacing-2)!important;padding:var(--spacing-2)!important}.bit_spacing-3{margin:var(--spacing-3)!important;padding:var(--spacing-3)!important}.bit_spacing-4{margin:var(--spacing-4)!important;padding:var(--spacing-4)!important}.bit_spacing-5{margin:var(--spacing-5)!important;padding:var(--spacing-5)!important}.bit_spacing-6{margin:var(--spacing-6)!important;padding:var(--spacing-6)!important} .bit_mt-0{margin-top:0!important}.bit_mt-1{margin-top:var(--spacing-1)!important}.bit_mt-2{margin-top:var(--spacing-2)!important}.bit_mt-3{margin-top:var(--spacing-3)!important}.bit_mt-4{margin-top:var(--spacing-4)!important}.bit_mt-5{margin-top:var(--spacing-5)!important}.bit_mt-6{margin-top:var(--spacing-6)!important} .bit_mr-0{margin-right:0!important}.bit_mr-1{margin-right:var(--spacing-1)!important}.bit_mr-2{margin-right:var(--spacing-2)!important}.bit_mr-3{margin-right:var(--spacing-3)!important}.bit_mr-4{margin-right:var(--spacing-4)!important}.bit_mr-5{margin-right:var(--spacing-5)!important}.bit_mr-6{margin-right:var(--spacing-6)!important} .bit_mb-0{margin-bottom:0!important}.bit_mb-1{margin-bottom:var(--spacing-1)!important}.bit_mb-2{margin-bottom:var(--spacing-2)!important}.bit_mb-3{margin-bottom:var(--spacing-3)!important}.bit_mb-4{margin-bottom:var(--spacing-4)!important}.bit_mb-5{margin-bottom:var(--spacing-5)!important}.bit_mb-6{margin-bottom:var(--spacing-6)!important} .bit_ml-0{margin-left:0!important}.bit_ml-1{margin-left:var(--spacing-1)!important}.bit_ml-2{margin-left:var(--spacing-2)!important}.bit_ml-3{margin-left:var(--spacing-3)!important}.bit_ml-4{margin-left:var(--spacing-4)!important}.bit_ml-5{margin-left:var(--spacing-5)!important}.bit_ml-6{margin-left:var(--spacing-6)!important} .bit_pt-0{padding-top:0!important}.bit_pt-1{padding-top:var(--spacing-1)!important}.bit_pt-2{padding-top:var(--spacing-2)!important}.bit_pt-3{padding-top:var(--spacing-3)!important}.bit_pt-4{padding-top:var(--spacing-4)!important}.bit_pt-5{padding-top:var(--spacing-5)!important}.bit_pt-6{padding-top:var(--spacing-6)!important} .bit_pr-0{padding-right:0!important}.bit_pr-1{padding-right:var(--spacing-1)!important}.bit_pr-2{padding-right:var(--spacing-2)!important}.bit_pr-3{padding-right:var(--spacing-3)!important}.bit_pr-4{padding-right:var(--spacing-4)!important}.bit_pr-5{padding-right:var(--spacing-5)!important}.bit_pr-6{padding-right:var(--spacing-6)!important} .bit_pb-0{padding-bottom:0!important}.bit_pb-1{padding-bottom:var(--spacing-1)!important}.bit_pb-2{padding-bottom:var(--spacing-2)!important}.bit_pb-3{padding-bottom:var(--spacing-3)!important}.bit_pb-4{padding-bottom:var(--spacing-4)!important}.bit_pb-5{padding-bottom:var(--spacing-5)!important}.bit_pb-6{padding-bottom:var(--spacing-6)!important} .bit_pl-0{padding-left:0!important}.bit_pl-1{padding-left:var(--spacing-1)!important}.bit_pl-2{padding-left:var(--spacing-2)!important}.bit_pl-3{padding-left:var(--spacing-3)!important}.bit_pl-4{padding-left:var(--spacing-4)!important}.bit_pl-5{padding-left:var(--spacing-5)!important}.bit_pl-6{padding-left:var(--spacing-6)!important} .bit_gap-0,.bit_gap-0>div{gap:0!important}.bit_gap-1,.bit_gap-1>div{gap:var(--gap-1)!important}.bit_gap-2,.bit_gap-2>div{gap:var(--gap-2)!important}.bit_gap-3,.bit_gap-3>div{gap:var(--gap-3)!important} /* 03 · LAYOUT / ELEMENTOR ------------------------------------------ */ /* Sektion: ein Container der obersten Ebene = ein Block. Grenzen über Klassen, nicht pro Widget. */ .bit_section { padding-block: var(--bit_section-y); } .bit_section--tight { padding-block: var(--bit_space-7); } .bit_section--surface { background: var(--bit_color-surface); } .bit_section--white { background: var(--bit_color-white); } .bit_section--dark { background: var(--bit_color-night); color: var(--bit_color-white); } .bit_section--dark h1, .bit_section--dark h2, .bit_section--dark h3, .bit_section--dark .bit_label { color: var(--bit_color-white); } .bit_section--dark a { color: var(--bit_color-white); } .bit_section--dark .bit_subtitle, .bit_section--dark .bit_small { color: rgba(255,255,255,.78); } /* Buttons (Elementor-Button, Fluent-Submit, Mobil-Leiste teilen eine Definition) */ .elementor-button, .fluentform .ff-btn-submit, .bit_btn { font-family: var(--bit_font-body); font-weight: 600; font-size: .9375rem; line-height: 1.2; border-radius: var(--bit_radius-btn); padding: 13px 24px; border: 1.5px solid transparent; background: var(--bit_color-cta); color: var(--bit_color-ink); text-decoration: none; transition: background var(--bit_motion), color var(--bit_motion), border-color var(--bit_motion), transform var(--bit_motion); } .elementor-button:hover, .fluentform .ff-btn-submit:hover, .bit_btn:hover { background: var(--bit_color-hover); color: var(--bit_color-white); } .elementor-button:active { transform: translateY(1px); } .bit_btn--2nd .elementor-button, .bit_btn--2nd a, .bit_btn--2nd, .elementor-button.bit_btn--2nd { background: transparent !important; color: var(--bit_color-primary) !important; border-color: var(--bit_color-primary) !important; } .bit_btn--2nd .elementor-button:hover, .bit_btn--2nd a:hover, .elementor-button.bit_btn--2nd:hover { background: var(--bit_color-primary) !important; color: var(--bit_color-white) !important; } .bit_btn--ghost .elementor-button { background: transparent; color: var(--bit_color-cta); padding-inline: 0; } .bit_btn--ghost .elementor-button:hover { background: transparent; color: var(--bit_color-hover); text-decoration: underline; } .bit_section--dark .elementor-button { background: var(--bit_color-white); color: var(--bit_color-primary); } .bit_section--dark .elementor-button:hover { background: var(--bit_color-surface); } /* Elementor-Menü-Dropdown */ .sub-menu { border-radius: var(--bit_radius); box-shadow: var(--bit_shadow-lg); margin-top: var(--bit_space-2) !important; overflow: hidden; background: var(--bit_color-white); } /* Google-Maps-Widget */ .bit_maps { border-radius: var(--bit_radius-img); overflow: hidden; box-shadow: none; border: 1px solid var(--bit_color-line); } /* 04 · KOMPONENTEN -------------------------------------------------- */ /* Hero (Shortcode-Klassen aus Ebene 2 + alte ekit-Hero bis Umbau) */ .bit_heroCtas { display: flex; flex-wrap: wrap; gap: var(--bit_space-3); align-items: center; } .bit_trust { display: flex; flex-wrap: wrap; gap: var(--bit_space-2) var(--bit_space-4); align-items: center; font-size: .875rem; color: var(--bit_color-muted); margin-top: var(--bit_space-3); } .bit_trust .bit_stars { color: var(--bit_color-gold); letter-spacing: 2px; } .bit_trustLine { max-width: 100%; } .bit_trustLine p { display: flex; flex-wrap: wrap; gap: var(--bit_space-2) var(--bit_space-4); margin: 0; } /* Karten: eine Definition. Bild oben (3:2), Text, Link. */ .bit_card, .bit_ratgeberCard { background: var(--bit_color-white); border: 0; border-radius: var(--bit_radius); overflow: hidden; display: flex; flex-direction: column; height: 100%; box-shadow: var(--bit_shadow); transition: box-shadow var(--bit_motion), transform var(--bit_motion); } .bit_card:hover, .bit_ratgeberCard:hover { box-shadow: var(--bit_shadow-lg); transform: translateY(-2px); } .bit_card__img, .bit_ratgeberCard img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; background-size: cover; background-position: center; display: block; } .bit_card__body, .bit_ratgeberCard__body { padding: var(--bit_space-4); display: flex; flex-direction: column; gap: var(--bit_space-2); flex: 1; } .bit_card__body h3, .bit_ratgeberCard__body h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; } .bit_card__body p, .bit_ratgeberCard__body p { margin: 0; font-size: .9375rem; color: var(--bit_color-muted); } .bit_card__more, .bit_ratgeberCard__more { font-weight: 600; color: var(--bit_color-primary); margin-top: auto; padding-top: var(--bit_space-2); text-decoration: none; } .bit_card__more:hover, .bit_ratgeberCard__more:hover { color: var(--bit_color-hover); text-decoration: underline; } .bit_cardGrid, .bit_ratgeberGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--bit_item-gap); width: 100%; } /* Infobox, Preistabelle */ .bit_infoBox { background: var(--bit_color-surface); border-radius: var(--bit_radius); padding: var(--bit_space-4) var(--bit_space-5); margin: var(--bit_space-4) 0; } .bit_infoBox h3 { margin-top: 0; } .bit_priceTable { width: 100%; border-collapse: collapse; margin: var(--bit_space-3) 0 var(--bit_space-4); font-variant-numeric: tabular-nums; } .bit_priceTable th, .bit_priceTable td { text-align: left; padding: var(--bit_space-2) var(--bit_space-3); border-bottom: 1px solid var(--bit_color-line); vertical-align: top; } .bit_priceTable th { color: var(--bit_color-primary); font-weight: 600; } /* FAQ (details/summary) – ersetzt ElementsKit-Akkordeon */ .bit_faq { margin: 0 0 var(--bit_space-5); display: grid; gap: var(--bit_space-2); } .bit_faq__item { border: 1px solid var(--bit_color-line); border-radius: var(--bit_radius-sm); background: var(--bit_color-white); margin: 0; } .bit_faq__item summary { cursor: pointer; padding: var(--bit_space-3) var(--bit_space-6) var(--bit_space-3) var(--bit_space-4); font-weight: 600; color: var(--bit_color-primary); list-style: none; position: relative; } .bit_faq__item summary::-webkit-details-marker { display: none; } .bit_faq__item summary::after { content: "+"; position: absolute; right: var(--bit_space-4); top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; color: var(--bit_color-cta); font-weight: 400; } .bit_faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .bit_faq__item[open] summary { border-bottom: 1px solid var(--bit_color-line); } .bit_faq__answer { padding: var(--bit_space-3) var(--bit_space-4) var(--bit_space-4); max-width: var(--bit_measure); } /* Breadcrumb */ .bit_breadcrumb { font-size: .875rem; margin: 0 0 var(--bit_space-3); color: var(--bit_color-muted); } .bit_breadcrumb a { color: var(--bit_color-primary); text-decoration: none; } .bit_breadcrumb a:hover { text-decoration: underline; } .bit_telLink, .bit_waLink { font-weight: 600; white-space: nowrap; } /* Erfahrungen (Zitatkarten auf dunkler Fläche) */ .bit_quote { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--bit_radius); padding: var(--bit_space-4); display: flex; flex-direction: column; gap: var(--bit_space-2); color: var(--bit_color-white); } .bit_quote .bit_stars { color: var(--bit_color-gold); letter-spacing: 2px; } .bit_quote p { margin: 0; font-size: .9375rem; line-height: 1.6; } .bit_quote cite { font-style: normal; font-size: .8125rem; opacity: .75; margin-top: auto; } /* Formulare (Fluent Forms) */ .fluentform label { font-weight: 600; margin-bottom: var(--bit_space-2); color: var(--bit_color-ink); } .fluentform label::after { color: var(--bit_color-cta) !important; } .fluentform input, .fluentform select, .fluentform textarea { border: 1px solid var(--bit_color-line); border-radius: var(--bit_radius-sm); background: var(--bit_color-white); color: var(--bit_color-ink); padding: 12px 14px; transition: border-color var(--bit_motion), box-shadow var(--bit_motion); } .fluentform input:focus, .fluentform select:focus, .fluentform textarea:focus { border-color: var(--bit_color-primary); outline: none; box-shadow: 0 0 0 3px rgba(47,95,99,.15); } .fluentform .ff-btn-submit, .fluentform button.fluentform-widget-wrapper.ff-el-group.ff-btn-submit, .bit_kfForm_submit button, .elementor-874 .elementor-element.elementor-element-b5a3cd3 .fluentform-widget-wrapper form#fluentform_4 .ff-el-group .ff-btn-submit { background: var(--bit_color-cta) !important; border: none !important; box-shadow: none; } .fluentform .ff-btn-submit:hover, .bit_kfForm_submit button:hover { background: var(--bit_color-hover) !important; } #fluentform_4 fieldset { display: flex; gap: var(--bit_space-3); flex-wrap: wrap; } #fluentform_4 .bit_kfForm_info, #fluentform_4 .bit_kfForm_date { flex: 1 1; box-shadow: none; border: 1px solid var(--bit_color-line); background: var(--bit_color-white); padding: var(--bit_space-4); border-radius: var(--bit_radius); margin-top: var(--bit_space-5); } #fluentform_4 .bit_kfForm_submitArea { padding: 0 var(--bit_space-4) var(--bit_space-4); } #fluentform_4 .bit_kfForm_info > div { flex-basis: 100%; display: flex !important; flex-direction: row; flex-wrap: wrap; gap: var(--bit_space-3); } #fluentform_4 .bit_kfForm_mail, #fluentform_4 .bit_kfForm_phone { flex: 1; } #fluentform_4 .bit_kfForm_text, #fluentform_4 .bit_kfForm_name, #fluentform_4 .bit_kfForm_submit, #fluentform_4 .bit_kfForm_addDate { flex-basis: 100%; } #fluentform_4 .bit_kfForm_addDate span { border-radius: var(--bit_radius-btn) !important; background: none; color: var(--bit_color-primary) !important; border-color: var(--bit_color-primary) !important; } #fluentform_4 .bit_kfForm_addDate .ff_item_selected span { color: var(--bit_color-white) !important; background: var(--bit_color-primary) !important; } #fluentform_4 .bit_kfForm_complianz label { font-size: .75rem; line-height: 1.3; font-weight: 400 !important; color: var(--bit_color-muted); } @media (max-width: 767px) { #fluentform_4 .bit_kfForm_info, #fluentform_4 .bit_kfForm_date { flex: 0 0 100%; } } .fluentform .ff_excluded { display: block; width: 0; overflow: hidden; padding: 0 !important; transition: var(--bit_motion); } .ff_cond_v { display: block !important; width: 100%; overflow: hidden; padding: var(--bit_space-5) !important; } .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span { padding: var(--bit_space-2) var(--bit_space-3) !important; border-radius: var(--bit_radius-btn); } .bit_kfForm_date .ff_item_selected label > span { background: var(--bit_color-primary) !important; border: 1px solid var(--bit_color-primary) !important; color: var(--bit_color-white); box-shadow: none !important; } div#fluentform_4_success { border-radius: var(--bit_radius); text-align: center; padding: var(--bit_space-5); background: var(--bit_color-surface); } div#fluentform_4_success p { margin: 0; } /* Header */ .bit_wordmark .elementor-heading-title, .bit_wordmark { font-family: var(--bit_font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: 0; white-space: nowrap; } .bit_wordmark .elementor-heading-title a { text-decoration: none; color: inherit; display: inline-flex; align-items: baseline; gap: .35em; } .bit_wordmark__sub { color: var(--bit_color-cta); } .bit_wordmark--footer .elementor-heading-title { font-size: 1.5rem; } .bit_wordmark--footer .bit_wordmark__sub { color: var(--bit_color-white); opacity: .85; } .bit_header { position: relative; z-index: 50; transition: box-shadow var(--bit_motion); } .bit_header.elementor-sticky--effects { box-shadow: var(--bit_shadow); } .bit_header .elementor-widget-button { margin: 0; } .bit_nav .elementor-nav-menu--main .elementor-item { padding-inline: 0; font-size: .9375rem; } .bit_nav .elementor-nav-menu--dropdown { border: 1px solid var(--bit_color-line); box-shadow: var(--bit_shadow-lg); } .bit_nav .elementor-nav-menu--dropdown a { padding: 12px 16px; } .bit_nav .elementor-menu-toggle { border: 0; padding: 8px; } @media (max-width: 767px) { .bit_wordmark .elementor-heading-title { font-size: 1.375rem; } .bit_header .bit_header__right { justify-content: flex-end; } } /* Footer */ .bit_footer { color: var(--bit_color-white); } .bit_footer h2, .bit_footer .bit_footer__label .elementor-heading-title { text-align: left; color: var(--bit_color-white); opacity: .8; margin: 0 0 var(--bit_space-1); } .bit_footer p { margin: 0 0 var(--bit_space-2); color: var(--bit_color-white); } .bit_footer.e-con a, .bit_footer.e-con .elementor-widget-text-editor a { color: var(--bit_color-white); text-decoration: none; } .bit_footer.e-con a:hover { text-decoration: underline; color: var(--bit_color-white); } .bit_footer .bit_footer__text { max-width: 36ch; } .bit_footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bit_space-1); } .bit_footer__list li { margin: 0; } .bit_footer__list li::marker { content: none; } .bit_footer__cols > .e-con.bit_footer__col { --width: auto; width: auto; min-width: 0; max-width: 100%; flex: 1 1 180px; } .bit_footer__cols > .e-con.bit_footer__col--wide { flex-basis: 260px; } @media (max-width: 767px) { .bit_footer__cols > .e-con.bit_footer__col { flex-basis: 100%; } } .bit_footer__legal p, .bit_footer__copy .elementor-heading-title { margin: 0; opacity: .8; font-size: .875rem; } .bit_footer .bit_formArea { max-width: var(--bit_text-width); margin: 0; padding: 0; } /* Mobile Sticky-Leiste */ .bit_mobileBar { display: none; } @media (max-width: 1024px) { .bit_mobileBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; gap: 1px; background: var(--bit_color-primary); box-shadow: 0 -4px 16px rgba(var(--bit_color-ink-rgb), .15); padding-bottom: env(safe-area-inset-bottom); } body .bit_mobileBar a, body .bit_mobileBar a:hover { flex: 1; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 4px 8px; color: var(--bit_color-white); font: 600 12px/1.2 var(--bit_font-body); text-decoration: none; letter-spacing: .02em; } .bit_mobileBar a svg { display: block; } .bit_mobileBar a.bit_mobileBar--primary { background: var(--bit_color-cta); } body { padding-bottom: 64px; } .elementor-editor-active .bit_mobileBar { display: none; } } /* 05 · RATGEBER ------------------------------------------------------ */ .single-post .site-main { max-width: var(--bit_text-width); margin: 0 auto; padding: var(--bit_space-6) var(--bit_space-3) var(--bit_space-7); } .single-post .site-main h1.entry-title { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; margin-bottom: var(--bit_space-2); } .single-post .site-main h2 { font-size: 1.625rem; margin-top: var(--bit_space-6); } .single-post .site-main .post-thumbnail img, .single-post .site-main .attachment-post-thumbnail { border-radius: var(--bit_radius-img); margin: var(--bit_space-3) 0 var(--bit_space-4); } .bit_postMeta { color: var(--bit_color-muted); font-size: .875rem; margin-bottom: var(--bit_space-4); } .bit_authorBox { display: flex; gap: var(--bit_space-4); align-items: center; background: var(--bit_color-surface); border-radius: var(--bit_radius); padding: var(--bit_space-4); margin: var(--bit_space-6) 0 var(--bit_space-5); } .bit_authorBox img { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; flex: none; } .bit_postContact { margin-top: var(--bit_space-5); } /* 06 · BEWEGUNG ------------------------------------------------------ Konzept (3.4.0): wenig, langsam, einheitlich. Eine Bewegungssprache für alle Seiten. 1 Einblendung beim Scrollen – jeder Inhaltsbaustein (Widget, Karte, Zitat, FAQ-Punkt, Box) kommt 18 px von unten mit Opazität 0 → 1 in 700 ms (Ease-out, schnell los, weich zur Ruhe). Was zusammen ins Bild kommt, folgt in 80-ms-Schritten (Hero beim Laden, Kartenreihen, Kopf einer Sektion). Steuerung: assets/motion.js (IntersectionObserver). Klassen: .bit_reveal (bereit) → .bit_in (sichtbar), danach werden beide entfernt, damit Hover-Übergänge der Bausteine wieder normal laufen. Sicherheitsnetze: ohne JS, mit reduzierter Bewegung, im Elementor-Editor und im Druck ist alles sofort sichtbar; .site-main ist bis zum Start von motion.js verdeckt (kein Aufblitzen) und wird spätestens nach 1,6 s von selbst eingeblendet. 2 Bambus-Drift – der Bambus-Schatten auf Papier-Grün-Flächen und in der Hero-Karte wandert beim Scrollen ±28 px (scroll-gebunden, kein JS, nur Browser mit Scroll-Timelines). 3 Antwort statt Reaktion – Karten heben sich 2 px, Buttons 1 px mit Schatten, Bild in der Karte 1.03, Links wechseln die Farbe. FAQ: das Plus dreht sich zum Schließkreuz, die Antwort gleitet ein. 4 Mobil-Leiste gleitet beim Laden von unten ein. Alles in 3 Kurven: --bit_motion (300 ms, Interaktion), --bit_ease-out (Einblendung), linear (Drift). Bei prefers-reduced-motion: keine Bewegung, nur Farbwechsel. */ :root { --bit_reveal-y: 18px; --bit_reveal-t: 700ms; --bit_ease-out: cubic-bezier(.16, 1, .3, 1); } /* 1 · Einblendung beim Scrollen */ @media (prefers-reduced-motion: no-preference) { html.bit_js :is(.site-main, [data-elementor-type="wp-page"], [data-elementor-type="wp-post"]):not(.bit_ready) { opacity: 0; animation: bit_safety 400ms ease-out 1600ms forwards; } @keyframes bit_safety { to { opacity: 1; } } .bit_reveal { opacity: 0; transform: translateY(var(--bit_reveal-y)); transition: opacity var(--bit_reveal-t) var(--bit_ease-out), transform var(--bit_reveal-t) var(--bit_ease-out); will-change: opacity, transform; } .bit_reveal.bit_in { opacity: 1; transform: none; } } .elementor-editor-active :is(.site-main, [data-elementor-type="wp-page"], [data-elementor-type="wp-post"]), .elementor-editor-active .bit_reveal { opacity: 1 !important; transform: none !important; animation: none !important; } @media print { .site-main, [data-elementor-type="wp-page"], [data-elementor-type="wp-post"], .bit_reveal { opacity: 1 !important; transform: none !important; animation: none !important; } } /* 2 · Bambus-Drift (scroll-gebunden). overflow: clip statt hidden, sonst wäre die Fläche selbst der Scroll-Container der Timeline. */ @supports (animation-timeline: view()) and (overflow: clip) { @media (prefers-reduced-motion: no-preference) { body .e-con.bit_section--surface, body .e-con.bit_heroRow { overflow: clip; } /* body-Präfix: Block 09 setzt hidden mit gleicher Spezifität */ @keyframes bit_drift { from { translate: 0 28px; } to { translate: 0 -28px; } } .e-con.bit_section--surface::before, .e-con.bit_heroRow::before { animation: bit_drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } } /* 3 · Antwort auf Hover und Fokus */ .elementor-button, .fluentform .ff-btn-submit, .bit_btn { transition: background var(--bit_motion), color var(--bit_motion), border-color var(--bit_motion), transform var(--bit_motion), box-shadow var(--bit_motion); } .elementor-button:hover, .fluentform .ff-btn-submit:hover, .bit_btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--bit_color-ink-rgb), .14); } .elementor-button:active, .fluentform .ff-btn-submit:active, .bit_btn:active { transform: translateY(0); box-shadow: none; } .bit_btn--ghost .elementor-button:hover, .bit_btn--ghost .elementor-button:active { transform: none; box-shadow: none; } .bit_faq__item summary::after { transition: transform var(--bit_motion), color var(--bit_motion); } .bit_faq__item summary:hover::after { color: var(--bit_color-hover); } @keyframes bit_faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .bit_faq__item[open] .bit_faq__answer { animation: bit_faqIn 320ms var(--bit_ease-out) both; } /* 4 · Mobil-Leiste */ @media (max-width: 1024px) and (prefers-reduced-motion: no-preference) { @keyframes bit_barIn { from { transform: translateY(100%); } } .bit_mobileBar { animation: bit_barIn 500ms var(--bit_ease-out) 400ms both; } } /* Reduzierte Bewegung: Farbe ja, Lage nein */ @media (prefers-reduced-motion: reduce) { .elementor-button:hover, .fluentform .ff-btn-submit:hover, .bit_btn:hover, .bit_card:hover, .bit_ratgeberCard:hover, .bit_quoteGrid > .e-con.bit_quote:hover, .bit_wordmark .elementor-heading-title a:hover, body .bit_header .bit_btn--cta .elementor-button:hover { transform: none; } .bit_card:hover .bit_duotone::before { transform: none; } .bit_faq__item summary::after, .bit_faq__answer, .bit_mobileBar { transition: none; animation: none; } } /* 09 · SEKTIONEN & STARTSEITE (Schritt 3) ------------------------------ */ .e-con.bit_section { --padding-top: var(--bit_section-y); --padding-bottom: var(--bit_section-y); --padding-left: 24px; --padding-right: 24px; } .e-con.bit_section--tight { --padding-top: var(--bit_space-7); --padding-bottom: var(--bit_space-7); } @media (max-width: 767px) { .e-con.bit_section { --padding-left: 16px; --padding-right: 16px; } } .e-con.bit_section--hero { background: var(--bit_color-white); } .e-con.bit_section--white { background: var(--bit_color-white); } .e-con.bit_section--surface { background: var(--bit_color-surface); position: relative; overflow: hidden; } .e-con.bit_section--dark { background: var(--bit_color-night); } /* Bambus-Schatten: das Motiv des Originals, einmal pro Fläche, groß, links unten */ .e-con.bit_section--surface::before { content: ""; position: absolute; left: -6%; bottom: -14%; width: min(56vw, 640px); aspect-ratio: 1; background: var(--bit_bamboo) center / contain no-repeat; opacity: .32; transform: rotate(12deg); pointer-events: none; z-index: 0; } .e-con.bit_section--surface > * { position: relative; z-index: 1; } @media (max-width: 767px) { .e-con.bit_section--surface::before { display: none; } } .e-con.bit_sectionHead { max-width: 64ch; margin-inline: 0; text-align: left; align-items: flex-start; } .bit_sectionHead .elementor-widget-text-editor { max-width: 100%; } .bit_sectionHead .elementor-widget-heading .elementor-heading-title { margin: 0; } .bit_sectionHead .bit_lead, .bit_lead { font-size: 1.125rem; line-height: 1.6; color: var(--bit_color-muted); margin: 0; } .bit_section--dark .bit_lead { color: rgba(255,255,255,.78); } body .e-con.bit_section--dark .elementor-element .elementor-heading-title, body .e-con.bit_section--dark .elementor-element.elementor-widget-text-editor { color: var(--bit_color-white); } .e-con.bit_row > .e-con.bit_col { --width: auto; width: auto; flex: 1 1 320px; min-width: 0; } @media (max-width: 767px) { .e-con.bit_row > .e-con.bit_col { flex-basis: 100%; } } .elementor-widget-text-editor ul.bit_contactList { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bit_space-2); } .bit_contactList li { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: var(--bit_space-3); } .bit_contactList strong { color: var(--bit_color-muted); font-weight: 600; font-size: .875rem; padding-top: 2px; } /* Hero */ .e-con.bit_heroRow { gap: var(--bit_space-7); background: var(--bit_color-surface); border-radius: 24px; --padding-top: var(--bit_space-7) !important; --padding-bottom: 0px !important; --padding-left: var(--bit_space-6) !important; --padding-right: var(--bit_space-6) !important; --bit_fade: var(--bit_color-surface); position: relative; overflow: hidden; isolation: isolate; align-items: flex-end; } .e-con.bit_heroRow::before { content: ""; position: absolute; right: -8%; top: -16%; width: min(62vw, 720px); aspect-ratio: 1; background: var(--bit_bamboo) center / contain no-repeat; opacity: .5; transform: scaleX(-1) rotate(-8deg); z-index: 0; pointer-events: none; } .e-con.bit_heroRow > * { position: relative; z-index: 1; } .e-con.bit_heroRow > .bit_hero__text { padding-bottom: var(--bit_space-7); } .e-con.bit_heroRow > .bit_hero__text { flex: 1 1 52%; } .e-con.bit_heroRow > .bit_hero__media { flex: 0 1 40%; max-width: 520px; } .bit_hero__title .elementor-heading-title { margin: 0; } .bit_hero__lead p { margin: 0; } .bit_hero__portrait img { aspect-ratio: auto; object-fit: contain; object-position: bottom; width: 100%; max-width: 520px; border-radius: 0; background: none; display: block; filter: drop-shadow(0 24px 40px rgba(var(--bit_color-ink-rgb), .22)); } .bit_heroCtas .elementor-widget-button { margin: 0; } .bit_trustLine p.bit_trust { margin-top: var(--bit_space-1); } @media (max-width: 767px) { body .e-con.bit_heroRow { --flex-direction: column-reverse; flex-direction: column-reverse; --flex-wrap: nowrap; flex-wrap: nowrap; gap: var(--bit_space-4); --padding-top: 0px !important; --padding-bottom: var(--bit_space-5) !important; --padding-left: var(--bit_space-4) !important; --padding-right: var(--bit_space-4) !important; } body .e-con.bit_heroRow > .bit_hero__media { max-width: 160px; align-self: flex-start; padding-top: var(--bit_space-5); } .bit_hero__portrait img { max-width: 220px; } .e-con.bit_heroRow { border-radius: 16px; } .e-con.bit_heroRow > .bit_hero__text { padding-bottom: var(--bit_space-5); } } /* Karten (Shortcodes) */ @media (max-width: 767px) { .bit_cardGrid--snap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--bit_space-3); margin-inline: calc(-1 * var(--bit_space-3)); padding-inline: var(--bit_space-3); padding-bottom: var(--bit_space-2); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .bit_cardGrid--snap::-webkit-scrollbar { display: none; } .bit_cardGrid--snap .bit_card { flex: 0 0 82%; scroll-snap-align: start; } } .bit_cardGrid--behandlungen { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .bit_cardGrid--methoden { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .bit_card--plain { background: var(--bit_color-surface); box-shadow: none; } .bit_card--plain:hover { box-shadow: var(--bit_shadow); } .bit_card--plain .bit_card__body { padding: var(--bit_space-5) var(--bit_space-4); } .bit_card__body h3 a { color: var(--bit_color-ink); text-decoration: none; } .bit_card__body h3 a:hover { color: var(--bit_color-primary); } .bit_card .bit_card__img { position: relative; display: block; overflow: hidden; aspect-ratio: auto; height: auto; line-height: 0; } .bit_card .bit_card__img img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .bit_cardGrid__more { margin: var(--bit_space-4) 0 0; } /* Duotone: Bild als Luminanz auf Petrol (background-blend-mode), darüber warmes Licht. Ein Look für alle Stock-Motive. Das bleibt für Alt-Text/SEO im DOM, sichtbar ist die Pseudo-Ebene. Kein filter: der würde das Blending in Chrome isolieren. */ .bit_duotone::before, .bit_duotone::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: transform var(--bit_motion); } .bit_duotone { --bit_fade: var(--bit_color-white); } .bit_duotone::before { background: linear-gradient(180deg, rgba(0,0,0,0) 55%, var(--bit_fade) 100%), var(--bit_img) center / cover no-repeat, var(--bit_color-primary); background-blend-mode: normal, luminosity, normal; } .bit_duotone::after { background: linear-gradient(180deg, rgba(246,233,207,.08), rgba(246,233,207,.28)); mix-blend-mode: screen; } .bit_card:hover .bit_duotone::before { transform: scale(1.03); } /* Über mich */ .bit_ueber__quote { max-width: 400px; } blockquote.bit_pull { margin: 0; padding: var(--bit_space-4) var(--bit_space-5); border-left: 3px solid var(--bit_color-cta); background: var(--bit_color-surface); border-radius: 0 var(--bit_radius) var(--bit_radius) 0; } blockquote.bit_pull p { font-family: var(--bit_font-display); font-size: 1.625rem; line-height: 1.3; color: var(--bit_color-primary); margin: 0 0 var(--bit_space-2); } blockquote.bit_pull cite { font-style: normal; font-size: .875rem; color: var(--bit_color-muted); } /* Erfahrungen */ .e-con.bit_quoteGrid > .e-con.bit_quote { --width: auto; width: auto; flex: 1 1 280px; } .bit_quote .elementor-widget-text-editor { color: var(--bit_color-white); } .bit_quote p { color: var(--bit_color-white); } .bit_quote p:not(.bit_stars) { font-family: var(--bit_font-display); font-size: 1.375rem; line-height: 1.35; } .bit_quote p.bit_stars { color: var(--bit_color-gold); letter-spacing: 2px; margin: 0 0 var(--bit_space-2); } .bit_quote cite a { color: var(--bit_color-white); opacity: .75; text-decoration: none; } .bit_quote cite a:hover { opacity: 1; text-decoration: underline; } /* Kontakt */ .bit_kontakt__info { max-width: 44ch; } .bit_kontakt__formWrap { background: var(--bit_color-white); border: 0; box-shadow: var(--bit_shadow); border-radius: var(--bit_radius); padding: var(--bit_space-5) !important; } @media (max-width: 767px) { .bit_kontakt__formWrap { padding: var(--bit_space-4) !important; } } /* 10 · INHALTSSEITEN (Schritt 4/5) ----------------------------------- */ .bit_contentCol { max-width: var(--bit_text-width); } .bit_contentCol--wide { max-width: none; } .bit_prose { max-width: var(--bit_measure); } .bit_prose h3, .bit_prose h4 { margin-top: var(--bit_space-5); } .bit_prose h3:first-child, .bit_prose h4:first-child { margin-top: 0; } .bit_prose ol { padding-left: 1.2em; margin: 0 0 var(--bit_space-3); } .bit_prose img { border-radius: var(--bit_radius-img); } .bit_hero__intro p:last-child { margin-bottom: 0; } .bit_hero__intro { color: var(--bit_color-ink); } .bit_hero__figure .bit_card__img { border-radius: var(--bit_radius-img); } .bit_hero__figure .bit_card__img img { aspect-ratio: 4 / 3; } .bit_hero__figure .bit_portrait { display: block; overflow: hidden; border-radius: var(--bit_radius-img); aspect-ratio: auto; height: auto; } .bit_hero__figure .bit_portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; } .e-con.bit_heroRow > .bit_hero__media .bit_hero__figure { width: 100%; } @media (max-width: 767px) { body .e-con.bit_heroRow > .bit_hero__media:has(.bit_card__img.bit_duotone) { max-width: none; width: calc(100% + 2 * var(--bit_space-4)); margin: 0 calc(-1 * var(--bit_space-4)); padding-top: 0; } .bit_hero__figure .bit_card__img { border-radius: 0; } .bit_hero__figure .bit_card__img img { aspect-ratio: 16 / 9; } body .e-con.bit_heroRow > .bit_hero__media:has(.bit_portrait) { max-width: 180px; } .bit_hero__figure .bit_portrait { border-radius: 50%; } .bit_hero__figure .bit_portrait img { aspect-ratio: 1; } } /* Akkordeon (Inhaltsgliederung, ohne FAQ-Schema) – gleiche Optik wie bit_faq */ .bit_acc { margin: 0; display: grid; gap: var(--bit_space-2); } /* Methodenkarten mit Fließtext (Text-Editor-Widget als Karte) */ .e-con.bit_methodGrid > .elementor-widget.bit_methodCard { --width: auto; width: auto; flex: 1 1 calc(50% - var(--bit_space-4)); min-width: 280px; } .bit_methodCard .elementor-widget-container { display: flex; flex-direction: column; height: 100%; } .bit_methodCard .bit_card__body { padding: var(--bit_space-5); gap: var(--bit_space-3); } .bit_methodCard .bit_card__body h3.bit_card__title { font-size: 1.375rem; margin: 0; } .bit_methodCard .bit_card__body h4 { font-size: 1rem; margin: var(--bit_space-3) 0 var(--bit_space-1); color: var(--bit_color-primary); } .bit_methodCard .bit_card__body p, .bit_methodCard .bit_card__body li { font-size: .9375rem; color: var(--bit_color-ink); } .bit_methodCard .bit_card__body ul { margin: 0 0 var(--bit_space-2); } .bit_methodCard .bit_card__body .bit_methodLink { margin-top: auto; padding-top: var(--bit_space-2); } .bit_methodCard .bit_card__body .bit_methodLink a { color: var(--bit_color-primary); text-decoration: none; font-weight: 600; } .bit_methodCard .bit_card__body .bit_methodLink a:hover { text-decoration: underline; } @media (max-width: 767px) { .e-con.bit_methodGrid > .elementor-widget.bit_methodCard { flex-basis: 100%; min-width: 0; } } /* Kartentitel-Links: Tinte statt Linkgrün (Kit-Linkfarbe hat gleiche Spezifität, daher body-Präfix) */ body .bit_card .bit_card__body h3 a, body .bit_ratgeberCard .bit_ratgeberCard__body h3 a { color: var(--bit_color-ink); text-decoration: none; } body .bit_card .bit_card__body h3 a:hover, body .bit_ratgeberCard .bit_ratgeberCard__body h3 a:hover { color: var(--bit_color-primary); } /* Lange URLs und Tabellen in Rechtstexten dürfen die Seite nicht verbreitern */ .bit_prose p, .bit_prose li, .bit_prose a { overflow-wrap: anywhere; } .bit_prose table { display: block; max-width: 100%; overflow-x: auto; } /* Inhaltsseiten: Bildkachel im Hero mittig neben dem Text, nicht auf der Unterkante (die ist für das freigestellte Porträt) */ .e-con.bit_heroRow > .bit_hero__media:has(.bit_hero__figure) { align-self: center; padding-bottom: var(--bit_space-7); } @media (max-width: 767px) { .e-con.bit_heroRow > .bit_hero__media:has(.bit_hero__figure) { padding-bottom: 0; } } /* Breite 1440: Startseite 6 Karten in 2×3, Übersicht 10 Karten in 4er-Reihen – keine Einzelkarte in der letzten Reihe */ @media (min-width: 1100px) { .bit_cardGrid--behandlungen.bit_cardGrid--snap { grid-template-columns: repeat(3, 1fr); } .bit_cardGrid--behandlungen:not(.bit_cardGrid--snap) { grid-template-columns: repeat(4, 1fr); } } .bit_hero__figure .bit_duotone { --bit_fade: var(--bit_color-surface); } /* Methoden: 4 Karten → 4 / 2 / 1 Spalten, nie 3 + 1 */ .bit_cardGrid--methoden { grid-template-columns: repeat(2, 1fr); } @media (min-width: 1100px) { .bit_cardGrid--methoden { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 639px) { .bit_cardGrid--methoden { grid-template-columns: 1fr; } } /* Header zwischen 1025 und 1200 px: Telefon-Button weicht, CTA bleibt einzeilig */ .bit_header .elementor-button { white-space: nowrap; } @media (max-width: 1200px) { .bit_header .bit_telLink { display: none; } .bit_nav .elementor-nav-menu--main .elementor-item { font-size: .875rem; } } /* 11 · RUNDE 2 (Korrekturen nach Sichtprüfung, 2026-10-24) ------------- */ /* SS1 · Header-Innenabstand wie Seiteninhalt */ body .e-con.bit_header { --padding-left: var(--bit_space-4) !important; --padding-right: var(--bit_space-4) !important; } @media (max-width: 767px) { body .e-con.bit_header { --padding-left: var(--bit_space-3) !important; --padding-right: var(--bit_space-3) !important; } } /* SS6 · Logo: keine Unterstreichung, nur leichte Bewegung beim Hover */ .bit_wordmark a, .bit_wordmark a:hover, .bit_wordmark a:focus, .bit_wordmark a:active { text-decoration: none !important; } .bit_wordmark .elementor-heading-title a { display: inline-flex; transform-origin: left center; transition: transform var(--bit_motion); } .bit_wordmark .elementor-heading-title a:hover { transform: scale(1.03); } /* SS5 · Mobiles Menü: klare Zeilen, Aktiv und Fokus in Hellgrün statt Grau */ .bit_nav .elementor-nav-menu--dropdown { background: var(--bit_color-white); border: 0; border-radius: 0 0 var(--bit_radius) var(--bit_radius); box-shadow: var(--bit_shadow-lg); padding: var(--bit_space-2) 0; } .bit_nav .elementor-nav-menu--dropdown .elementor-item { display: flex; align-items: center; min-height: 52px; padding: 12px var(--bit_space-4); font: 600 1rem/1.3 var(--bit_font-body); color: var(--bit_color-ink); background: transparent; border-left: 3px solid transparent; text-decoration: none; transition: background var(--bit_motion), color var(--bit_motion); } .bit_nav .elementor-nav-menu--dropdown .elementor-item:hover { background: var(--bit_color-ground); color: var(--bit_color-primary); } .bit_nav .elementor-nav-menu--dropdown .elementor-item-active, .bit_nav .elementor-nav-menu--dropdown .elementor-item.highlighted { background: var(--bit_color-surface) !important; color: var(--bit_color-primary) !important; border-left-color: var(--bit_color-cta) !important; } .bit_nav .elementor-nav-menu--dropdown .elementor-item:focus-visible { outline: 2px solid var(--bit_color-cta); outline-offset: -2px; background: var(--bit_color-surface); } .bit_nav .elementor-nav-menu--dropdown .elementor-sub-item { font-weight: 400; padding-left: var(--bit_space-6); min-height: 44px; } .bit_nav .elementor-menu-toggle { color: var(--bit_color-primary); } .bit_nav .elementor-menu-toggle:focus-visible { outline: 2px solid var(--bit_color-cta); outline-offset: 2px; } /* SS2 · Erfahrungen: Zitatzeichen, Hover, Einblendung beim Scrollen, auf Mobil wischbar */ .bit_quoteGrid > .e-con.bit_quote { position: relative; transition: background var(--bit_motion), transform var(--bit_motion); } .bit_quoteGrid > .e-con.bit_quote:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); } .bit_quote::before { content: "\201C"; display: block; height: .42em; overflow: hidden; font-family: var(--bit_font-display); font-size: 5rem; line-height: 1; color: var(--bit_color-gold); } /* Einblendung der Zitate seit 3.4.0 über Block 06 / motion.js (vorher scroll-gebundene bit_quoteIn) */ @media (max-width: 767px) { body .e-con.bit_quoteGrid { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--bit_space-3); margin-inline: calc(-1 * var(--bit_space-3)); padding-inline: var(--bit_space-3); padding-bottom: var(--bit_space-2); scrollbar-width: none; } body .e-con.bit_quoteGrid::-webkit-scrollbar { display: none; } .bit_quoteGrid > .e-con.bit_quote { flex: 0 0 84% !important; scroll-snap-align: start; } } /* SS3 · Gleich hohe Boxen in einer Zeile (Magen-Darm, Methoden, Behandlungen) */ .e-con:has(> .e-con.bit_contentBox) { align-items: stretch !important; } .e-con.bit_contentBox { display: flex; flex-direction: column; align-self: stretch; } .e-con:has(> .e-con.bit_contentBox) > .e-con.bit_contentBox { flex: 1 1 auto; } /* SS4 · Footer: Links sind unterstrichen, Infotext nicht */ .bit_footer.e-con a, .bit_footer .elementor-widget a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; font-weight: 600; } .bit_footer.e-con a:hover, .bit_footer .elementor-widget a:hover { text-decoration-thickness: 2px; opacity: .85; } /* SS7 · Subseiten-Hero: Bilder abgerundet (Startseiten-Porträt ausgenommen) */ .e-con.bit_heroRow > .bit_hero__media:not(:has(.bit_hero__portrait)) img, .e-con.bit_heroRow > .bit_hero__media:not(:has(.bit_hero__portrait)) .bit_duotone, .e-con.bit_heroRow > .bit_hero__media:not(:has(.bit_hero__portrait)) .elementor-widget-image { border-radius: var(--bit_radius-img); } .e-con.bit_heroRow > .bit_hero__media:not(:has(.bit_hero__portrait)) .bit_duotone, .e-con.bit_heroRow > .bit_hero__media:not(:has(.bit_hero__portrait)) .elementor-widget-image { position: relative; overflow: hidden; } /* KF · Formular: flache Felder, Labels oben, klare Fehler- und Fokuszustände */ #fluentform_4 .bit_kfForm_info, #fluentform_4 .bit_kfForm_date { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: var(--bit_space-4) !important; } #fluentform_4 .bit_kfForm_info > div { gap: var(--bit_space-4) var(--bit_space-3) !important; } #fluentform_4 label { font-size: .875rem; font-weight: 600; line-height: 1.3; margin-bottom: var(--bit_space-1); color: var(--bit_color-ink); } #fluentform_4 input:not([type=checkbox]):not([type=radio]), #fluentform_4 select, #fluentform_4 textarea { min-height: 48px; font-size: 1rem; border: 1px solid color-mix(in srgb, var(--bit_color-ink) 40%, #fff); border-radius: var(--bit_radius-sm); padding: 12px 14px; background: var(--bit_color-white); } #fluentform_4 textarea { min-height: 120px; } #fluentform_4 input:hover, #fluentform_4 select:hover, #fluentform_4 textarea:hover { border-color: var(--bit_color-primary); } #fluentform_4 input:focus-visible, #fluentform_4 select:focus-visible, #fluentform_4 textarea:focus-visible { outline: 2px solid var(--bit_color-cta); outline-offset: 2px; } #fluentform_4 .ff-el-is-error input, #fluentform_4 .ff-el-is-error select, #fluentform_4 .ff-el-is-error textarea { border-color: #A4262C !important; } #fluentform_4 .error.text-danger { color: #A4262C; font-size: .8125rem; margin-top: var(--bit_space-1); } #fluentform_4 .bit_kfForm_submit button, #fluentform_4 .ff-btn-submit { min-height: 52px; padding: 14px 28px; } #fluentform_4 .bit_kfForm_complianz label { font-size: .8125rem; font-weight: 400 !important; color: var(--bit_color-muted); } @media (max-width: 767px) { #fluentform_4 .bit_kfForm_mail, #fluentform_4 .bit_kfForm_phone { flex-basis: 100% !important; } #fluentform_4 .bit_kfForm_submit button, #fluentform_4 .ff-btn-submit { width: 100%; } } /* 11b · KF Terminwunsch (Konzept 2026-10-25) ------------------------- */ #fluentform_4 .bit_kfForm_group { background: none; border: 0; border-top: 1px solid var(--bit_color-line); border-radius: 0; padding: var(--bit_space-5) 0 0; margin: 0 0 var(--bit_space-5); } #fluentform_4 .bit_kfForm_step1 { border-top: 0; padding-top: 0; } #fluentform_4 .bit_kfForm_group .ff-el-group { margin: 0 0 var(--bit_space-4); } #fluentform_4 .bit_kfForm_group .ff-el-group:last-child { margin-bottom: 0; } #fluentform_4 .bit_kfForm_h { margin: 0 0 var(--bit_space-3) !important; } #fluentform_4 .bit_kfForm_topic .ff-el-input--label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #fluentform_4 .bit_kfForm_group .bit_kfForm_mail { margin-bottom: var(--bit_space-2); } #fluentform_4 .bit_kfForm_hint { margin-top: 0 !important; } #fluentform_4 .bit_kfForm_submitArea { border-top: 0; padding: 0 !important; margin: 0; } #fluentform_4 .bit_kfForm_complianz .ff_t_c, #fluentform_4 .bit_kfForm_complianz label { display: flex; gap: var(--bit_space-2); align-items: flex-start; font-size: .875rem !important; line-height: 1.5; } #fluentform_4 .bit_kfForm_complianz input[type=checkbox] { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--bit_color-primary); } #fluentform_4 .bit_kfForm_h { margin: 0; font-family: var(--bit_font-display); font-weight: 400; font-size: 1.625rem; line-height: 1.2; color: var(--bit_color-primary); } #fluentform_4 .bit_kfForm_hint p { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--bit_color-muted); } #fluentform_4 .bit_kfForm_group .ff-el-group { margin: 0; } #fluentform_4 .bit_kfForm_group .ff-el-input--label label, #fluentform_4 .bit_kfForm_group > .ff-el-group > .ff-el-input--label { font-size: .875rem; font-weight: 600; } #fluentform_4 .ff_list_buttons .ff-el-form-check { display: inline-block; margin: 0 var(--bit_space-1) var(--bit_space-1) 0; } #fluentform_4 .ff_list_buttons .ff-el-form-check label { margin: 0; } #fluentform_4 .ff_list_buttons .ff-el-form-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } #fluentform_4 .ff_list_buttons .ff-el-form-check label > span { display: inline-block; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--bit_color-ink) 40%, #fff); border-radius: 999px; background: var(--bit_color-white); color: var(--bit_color-ink); font-size: .9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background var(--bit_motion), color var(--bit_motion); } #fluentform_4 .ff_list_buttons .ff-el-form-check label:hover > span { border-color: var(--bit_color-primary); } #fluentform_4 .ff_list_buttons .ff-el-form-check input:checked + span { background: var(--bit_color-primary); border-color: var(--bit_color-primary); color: var(--bit_color-white); } #fluentform_4 .ff_list_buttons .ff-el-form-check input:focus-visible + span { outline: 2px solid var(--bit_color-cta); outline-offset: 2px; } #fluentform_4 .bit_kfForm_days .ff_list_buttons .ff-el-form-check label > span { min-width: 56px; text-align: center; padding: 10px 14px; } @media (max-width: 767px) { #fluentform_4 .bit_kfForm_group { padding: var(--bit_space-4); } #fluentform_4 .bit_kfForm_h { font-size: 1.375rem; } } /* 11c · KF Terminwunsch: Chips und Abstände gegen Fluent-Mobilregeln absichern */ #fluentform_4 .bit_kfForm_group { padding: var(--bit_space-5) 0 0 !important; } #fluentform_4 .bit_kfForm_step1 { padding-top: 0 !important; } #fluentform_4 .ff_list_buttons .ff-el-input--content { display: flex !important; flex-wrap: wrap; gap: var(--bit_space-2); } #fluentform_4 .ff_list_buttons .ff-el-form-check { display: block !important; width: auto !important; margin: 0 !important; flex: 0 0 auto; } #fluentform_4 .ff_list_buttons .ff-el-form-check label > span { border-radius: 999px !important; padding: 10px 16px !important; border: 1px solid color-mix(in srgb, var(--bit_color-ink) 40%, #fff) !important; background: var(--bit_color-white) !important; color: var(--bit_color-ink) !important; } #fluentform_4 .ff_list_buttons .ff-el-form-check label:hover > span { border-color: var(--bit_color-primary) !important; } #fluentform_4 .ff_list_buttons .ff-el-form-check input:checked + span { background: var(--bit_color-primary) !important; border-color: var(--bit_color-primary) !important; color: var(--bit_color-white) !important; } @media (max-width: 767px) { #fluentform_4 .bit_kfForm_days .ff-el-input--content { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); } #fluentform_4 .bit_kfForm_time .ff-el-input--content { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); } #fluentform_4 .bit_kfForm_days .ff-el-form-check label > span, #fluentform_4 .bit_kfForm_time .ff-el-form-check label > span { display: block; width: 100%; min-width: 0; box-sizing: border-box; text-align: center; padding: 12px 4px !important; border-radius: var(--bit_radius-sm) !important; } #fluentform_4 .bit_kfForm_days .ff-el-form-check label, #fluentform_4 .bit_kfForm_time .ff-el-form-check label { display: block; } } #fluentform_4 .ff_cond_v { padding: 0 !important; } #fluentform_4 .bit_kfForm_group .ff-el-group { margin: 0 0 var(--bit_space-4) !important; } #fluentform_4 .bit_kfForm_group .bit_kfForm_mail { margin-bottom: var(--bit_space-2) !important; } #fluentform_4 .bit_kfForm_group .ff-el-group:last-child { margin-bottom: 0 !important; } /* Formular-Fläche: Ecken wie Karten und Hero */ body .e-con.bit_kontakt__formWrap { --border-radius: var(--bit_radius); border-radius: var(--bit_radius) !important; } /* 12 · ABSTANDSKONZEPT (2026-10-25) ------------------------------------ Ebene 1 Sektion: --bit_section-y (96 / 80 / 64). Gleichfarbige Nachbarn verschmelzen. Ebene 2 Block: Kopf → Inhalt --bit_block-gap (48 / 32). Ebene 3 Element: Überschrift → Lead 16 · Lead → Buttons 32 · Buttons 16 · Chips 8 · Karten 24 Raster, 32/24 Polster. */ /* Gleichfarbige Nachbarn: das obere Polster der zweiten Fläche entfällt (sonst 192 statt 96) */ body .e-con.bit_section--surface + .e-con.bit_section--surface, body .e-con.bit_section--white + .e-con.bit_section--white, body .e-con.bit_section--dark + .e-con.bit_section--dark { --padding-top: 0px !important; padding-top: 0 !important; } /* Hero: dicht unter dem Header, darunter genau ein Sektionsabstand (vorher 64 oben / 160 unten) */ body .e-con.bit_section--hero { --padding-top: var(--bit_hero-top) !important; --padding-bottom: 0px !important; padding-top: var(--bit_hero-top) !important; padding-bottom: 0 !important; } body .e-con.bit_hero__text { --gap: var(--bit_space-3); --row-gap: var(--bit_space-3); gap: var(--bit_space-3); } body .e-con.bit_hero__text > .bit_heroCtas { margin-top: var(--bit_space-3); } /* 16 + 16 = 32 Lead → Buttons */ body .e-con.bit_heroCtas { --gap: var(--bit_space-3); --row-gap: var(--bit_space-3); --column-gap: var(--bit_space-3); gap: var(--bit_space-3); } @media (max-width: 767px) { body .e-con.bit_heroRow > .bit_hero__text { padding-bottom: 0; } /* Karte endet mit ihrem eigenen Polster, kein doppeltes Leer */ } /* Karten: ein Polster für alle Kartentypen */ .bit_card__body, .bit_ratgeberCard__body, .bit_card--plain .bit_card__body, .bit_methodCard .bit_card__body { padding: var(--bit_card-pad); } .bit_quote, .e-con.bit_quote { padding: var(--bit_card-pad); --padding-top: var(--bit_card-pad); --padding-bottom: var(--bit_card-pad); --padding-left: var(--bit_card-pad); --padding-right: var(--bit_card-pad); } body .bit_kontakt__formWrap { padding: var(--bit_card-pad) !important; } /* Boxed-Sektionen: Elementor legt das vertikale Polster zusätzlich auf .e-con-inner (über --padding-*). Zusammen mit padding-block der Klasse .bit_section war jede Sektionskante doppelt (96 + 96). Das äußere Element trägt nur noch die Seitenränder, das innere den Sektionsabstand. */ body .e-con.e-con-boxed.bit_section { padding-top: 0 !important; padding-bottom: 0 !important; } /* 12 · HEADER-AKTIONEN (2026-10-25) ----------------------------------- Vorher: zwei gleich laute grüne Pillen konkurrierten. Jetzt klare Hierarchie: Telefon = ruhiger Kontaktblock (Icon-Kreis + Label + Nummer), durch Haarlinie vom Menü getrennt; Termin = einzige Pille, kompakter, mit Pfeil. */ /* Telefon */ body .bit_header .bit_telLink { border-left: 1px solid var(--bit_color-line); padding-left: var(--bit_space-4); } body .bit_header .bit_telLink .elementor-button { background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0; color: var(--bit_color-ink) !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; } body .bit_header .bit_telLink .elementor-button-content-wrapper { gap: var(--bit_space-3) !important; align-items: center; } body .bit_header .bit_telLink .elementor-button-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--bit_color-surface); transition: background var(--bit_motion); } body .bit_header .bit_telLink .elementor-button-icon svg { width: 15px; height: 15px; fill: var(--bit_color-primary) !important; transition: fill var(--bit_motion); } body .bit_header .bit_telLink .elementor-button-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font: 600 1rem/1.15 var(--bit_font-body); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--bit_color-ink); transition: color var(--bit_motion); } body .bit_header .bit_telLink .elementor-button-text::before { content: "Direkt anrufen"; font-size: .75rem; font-weight: 400; letter-spacing: .02em; color: var(--bit_color-muted); } body .bit_header .bit_telLink .elementor-button:hover .elementor-button-icon, body .bit_header .bit_telLink .elementor-button:focus-visible .elementor-button-icon { background: var(--bit_color-cta); } body .bit_header .bit_telLink .elementor-button:hover .elementor-button-icon svg, body .bit_header .bit_telLink .elementor-button:focus-visible .elementor-button-icon svg { fill: var(--bit_color-ink) !important; } body .bit_header .bit_telLink .elementor-button:hover .elementor-button-text { color: var(--bit_color-primary); } body .bit_header .bit_telLink .elementor-button:focus-visible { outline: 2px solid var(--bit_color-cta); outline-offset: 4px; border-radius: var(--bit_radius-sm); } /* Termin anfragen: die eine Pille */ body .bit_header .bit_btn--cta .elementor-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--bit_space-3) 0 22px; font: 600 .9375rem/1 var(--bit_font-body); letter-spacing: .01em; background: var(--bit_color-cta); color: var(--bit_color-ink); border: 0; box-shadow: 0 1px 2px rgba(var(--bit_color-ink-rgb), .12); transition: background var(--bit_motion), color var(--bit_motion), box-shadow var(--bit_motion), transform var(--bit_motion); } body .bit_header .bit_btn--cta .elementor-button-text::after { content: "\2192"; display: inline-block; margin-left: 10px; font-weight: 400; transition: transform var(--bit_motion); } body .bit_header .bit_btn--cta .elementor-button:hover, body .bit_header .bit_btn--cta .elementor-button:focus-visible { background: var(--bit_color-hover); color: var(--bit_color-white); box-shadow: 0 6px 16px rgba(var(--bit_color-ink-rgb), .18); transform: translateY(-1px); } body .bit_header .bit_btn--cta .elementor-button:hover .elementor-button-text::after { transform: translateX(3px); } body .bit_header .bit_btn--cta .elementor-button:active { transform: none; box-shadow: 0 1px 2px rgba(var(--bit_color-ink-rgb), .12); } body .bit_header .bit_btn--cta .elementor-button:focus-visible { outline: 2px solid var(--bit_color-primary); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body .bit_header .bit_btn--cta .elementor-button, body .bit_header .bit_btn--cta .elementor-button-text::after { transition: none; transform: none !important; } } /* ========================================================================== 13 · PREISTABELLE MOBIL (3.3.4) – Zeilen stapeln statt seitlich abschneiden ========================================================================== */ @media (max-width: 767px) { .bit_priceTable, .bit_priceTable tbody, .bit_priceTable tr, .bit_priceTable td { display: block; width: 100%; } .bit_priceTable tr:first-child { display: none; } .bit_priceTable tr { padding: var(--bit_space-3) 0; border-bottom: 1px solid var(--bit_color-line); } .bit_priceTable td { padding: 0; border: 0; background: transparent !important; } .bit_priceTable td:nth-child(2), .bit_priceTable td:nth-child(3) { display: inline-block; width: auto; margin-top: var(--bit_space-2); } .bit_priceTable td:nth-child(2)::after { content: "·"; margin: 0 .5em; color: var(--bit_color-line); } .bit_priceTable td:nth-child(3) { font-weight: 600; color: var(--bit_color-primary); } }