/* Erzeugt vom Alldesign-Avada-Converter — Vorlagen-Modus. * * Das Stylesheet der Vorlage, unverändert in seiner Aussage, aber: * · verengt auf .dc (wirkt nicht auf bestehende Seiten) * · Selektoren an Avadas Verschachtelung angehoben * · jede Regel gleichermaßen um #wrapper + dreifache Seitenklasse verstärkt, * damit sie gegen Avadas ID-Selektoren gewinnt, ohne die Rangfolge des * Designs untereinander zu verändern * · Design zuerst, Brücke danach * * KEINE @layer: geschichtete Regeln verlieren in der Kaskade gegen jede * ungeschichtete — unabhängig von der Spezifität. Avadas Stylesheet ist * ungeschichtet, eine Schicht hätte das ganze Design entwertet. * * Von Hand ändern lohnt nicht — beim nächsten Lauf wird die Datei neu erzeugt. * Dauerhafte Korrekturen gehören in eine eigene Datei, die danach geladen wird. */ @font-face { font-family: "Maven Pro"; src: url("./mavenpro-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Maven Pro"; src: url("./mavenpro-latin-ext.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Stanford Script"; src: url("./stanford-script.woff") format("woff"); font-weight: 400; font-display: swap; } :root, .dc { --marine: var(--awb-color3, #113870); --marine-tief: var(--awb-color6, #0c2a55); --taupe: var(--awb-color8, #7e6e67); --sand: #d8cfbf; --sand-hell: var(--awb-color5, #f2eee7); --tinte: var(--awb-color7, #1c2333); --weiss: var(--awb-color1, #ffffff); --linie: rgba(17,56,112,.16); --wrap: 1240px; --rand: clamp(20px,4vw,48px); --abstand: clamp(88px,11vw,168px); } #wrapper .dc.dc.dc *, ::before, ::after { box-sizing: border-box; } html { text-size-adjust: 100%; } #wrapper .dc.dc.dc { color: var(--tinte); font: 400 17px / 1.65 "Maven Pro", Arial, sans-serif; } #wrapper .dc.dc.dc img { display: block; max-width: 100%; height: auto; } #wrapper .dc.dc.dc a { color: inherit; } #wrapper .dc.dc.dc h1, #wrapper .dc.dc.dc h2, #wrapper .dc.dc.dc h3, #wrapper .dc.dc.dc h4 { margin: 0px; font-weight: 500; color: var(--marine); } #wrapper .dc.dc.dc p { margin: 0px; } #wrapper .dc.dc.dc ul, #wrapper .dc.dc.dc ol { margin: 0px; padding: 0px; list-style: none; } #wrapper .dc.dc.dc :focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; } #wrapper .dc.dc.dc .wrap, #wrapper .dc.dc.dc.wrap { max-width: calc(var(--wrap) + 2 * var(--rand)); margin: 0px auto; padding: 0 var(--rand); } #wrapper .dc.dc.dc h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -0.015em; } #wrapper .dc.dc.dc h3 { font-size: 21px; line-height: 1.3; } #wrapper .dc.dc.dc .button, #wrapper .dc.dc.dc.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0px 28px; border-radius: 999px; background: var(--marine); color: var(--weiss); font-family: "Maven Pro", Arial, sans-serif; font-weight: 500; letter-spacing: 0px; font-size: 16px; text-decoration: none; transition: background-color 0.25s; } #wrapper .dc.dc.dc .button:hover, #wrapper .dc.dc.dc.button:hover { background: var(--marine-tief); } #wrapper .dc.dc.dc .button--small, #wrapper .dc.dc.dc.button--small { min-height: 42px; padding: 0px 20px; font-size: 15px; } #wrapper .dc.dc.dc .button--light, #wrapper .dc.dc.dc.button--light { background: var(--weiss); color: var(--marine); } #wrapper .dc.dc.dc .button--light:hover, #wrapper .dc.dc.dc.button--light:hover { background: var(--sand-hell); } #wrapper .dc.dc.dc .text-link, #wrapper .dc.dc.dc.text-link { display: inline-block; margin-top: 28px; color: var(--marine); font-weight: 500; text-decoration: none; border-bottom: 1px solid; padding-bottom: 2px; } #wrapper .dc.dc.dc .text-link:hover, #wrapper .dc.dc.dc.text-link:hover { border-bottom-color: transparent; } #wrapper .dc.dc.dc .link-phone, #wrapper .dc.dc.dc.link-phone { color: var(--marine); font-weight: 500; font-size: 18px; text-decoration: none; } #wrapper .dc.dc.dc .link-phone:hover, #wrapper .dc.dc.dc.link-phone:hover { text-decoration: underline; } #wrapper .dc.dc.dc .site-header, #wrapper .dc.dc.dc.site-header { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 110; background: linear-gradient(rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0) 100%); } #wrapper .dc.dc.dc .site-header__inner, #wrapper .dc.dc.dc.site-header__inner { display: flex; align-items: center; gap: 32px; max-width: calc(1440px + 2 * var(--rand)); margin: 0px auto; padding: 22px var(--rand); } #wrapper .dc.dc.dc .brand, #wrapper .dc.dc.dc.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--marine); line-height: 1; } #wrapper .dc.dc.dc .brand__logo, #wrapper .dc.dc.dc.brand__logo { display: block; width: auto; height: 52px; } #wrapper .dc.dc.dc .footer-logo, #wrapper .dc.dc.dc.footer-logo { display: block; width: auto; height: 44px; margin-bottom: 22px; } #wrapper .dc.dc.dc .main-nav, #wrapper .dc.dc.dc.main-nav { margin-left: auto; } #wrapper .dc.dc.dc .main-nav ul, #wrapper .dc.dc.dc.main-nav ul { display: flex; gap: 26px; } #wrapper .dc.dc.dc .main-nav a, #wrapper .dc.dc.dc.main-nav a { font-size: 15px; font-weight: 500; color: var(--marine); text-decoration: none; padding: 6px 0px; border-bottom: 1px solid transparent; } #wrapper .dc.dc.dc .main-nav a:hover, #wrapper .dc.dc.dc.main-nav a:hover { border-bottom-color: currentcolor; } #wrapper .dc.dc.dc .header-right, #wrapper .dc.dc.dc.header-right { display: flex; align-items: center; gap: 16px; } #wrapper .dc.dc.dc .burger, #wrapper .dc.dc.dc.burger { display: none; position: relative; z-index: 101; width: 44px; height: 44px; padding: 0px; border: 0px; border-radius: 50%; background: var(--marine); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } #wrapper .dc.dc.dc .burger span, #wrapper .dc.dc.dc.burger span { display: block; width: 18px; height: 2px; background: var(--weiss); transition: transform 0.3s; } #wrapper .dc.dc.dc .is-menu-open .burger span:nth-child(1), #wrapper .dc.dc.dc.is-menu-open .burger span:nth-child(1), .is-menu-open #wrapper .dc.dc.dc .burger span:nth-child(1), .is-menu-open #wrapper .dc.dc.dc.burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); } #wrapper .dc.dc.dc .is-menu-open .burger span:nth-child(2), #wrapper .dc.dc.dc.is-menu-open .burger span:nth-child(2), .is-menu-open #wrapper .dc.dc.dc .burger span:nth-child(2), .is-menu-open #wrapper .dc.dc.dc.burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } #wrapper .dc.dc.dc .nav-overlay, #wrapper .dc.dc.dc.nav-overlay { position: fixed; inset: 0px; z-index: 100; display: flex; flex-direction: column; gap: 2px; padding: 96px var(--rand) 32px; overflow-y: auto; background: var(--weiss); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s, transform 0.3s, visibility 0.3s; } #wrapper .dc.dc.dc .is-menu-open .nav-overlay, #wrapper .dc.dc.dc.is-menu-open .nav-overlay, .is-menu-open #wrapper .dc.dc.dc .nav-overlay, .is-menu-open #wrapper .dc.dc.dc.nav-overlay { opacity: 1; visibility: visible; transform: none; } #wrapper .dc.dc.dc .nav-overlay a, #wrapper .dc.dc.dc.nav-overlay a, .nav-overlay #wrapper .dc.dc.dc a { display: block; padding: 12px 0px; border-bottom: 1px solid var(--linie); color: var(--marine); text-decoration: none; font-size: 20px; font-weight: 500; } #wrapper .dc.dc.dc .nav-overlay .nav-overlay__cta, #wrapper .dc.dc.dc.nav-overlay .nav-overlay__cta, .nav-overlay #wrapper .dc.dc.dc .nav-overlay__cta, .nav-overlay #wrapper .dc.dc.dc.nav-overlay__cta { display: inline-flex; margin-top: 24px; padding: 0px 28px; border-bottom: 0px; color: var(--weiss); font-size: 16px; } #wrapper .dc.dc.dc .is-menu-open, #wrapper .dc.dc.dc.is-menu-open { overflow: hidden; } #wrapper .dc.dc.dc .hero, #wrapper .dc.dc.dc.hero { position: relative; height: 100svh; min-height: 560px; display: flex; align-items: center; overflow: hidden; background: rgb(223, 233, 242); } #wrapper .dc.dc.dc .hero__image, #wrapper .dc.dc.dc.hero__image { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; } #wrapper .dc.dc.dc .hero::before, #wrapper .dc.dc.dc.hero::before { content: ""; position: absolute; inset: 0px; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.82) 34%, rgba(255, 255, 255, 0) 66%); } #wrapper .dc.dc.dc .hero__content, #wrapper .dc.dc.dc.hero__content { position: relative; z-index: 2; width: 100%; max-width: calc(1440px + 2 * var(--rand)); margin: 0px auto; padding: 150px var(--rand) 96px; } #wrapper .dc.dc.dc .hero__content > *, #wrapper .dc.dc.dc .hero__content > :where(.fusion-column-wrapper) > *, #wrapper .dc.dc.dc.hero__content > *, #wrapper .dc.dc.dc.hero__content > :where(.fusion-column-wrapper) > * { max-width: 600px; } #wrapper .dc.dc.dc .hero__wordmark, #wrapper .dc.dc.dc.hero__wordmark { font-family: "Stanford Script", cursive; color: var(--marine); font-size: clamp(64px, 8.4vw, 128px); line-height: 0.98; margin-left: -0.04em; } #wrapper .dc.dc.dc .hero__wordmark span, #wrapper .dc.dc.dc.hero__wordmark span { display: block; } #wrapper .dc.dc.dc .hero__wordmark span + span, #wrapper .dc.dc.dc.hero__wordmark span + span { padding-left: 0.9em; } #wrapper .dc.dc.dc .hero__title, #wrapper .dc.dc.dc.hero__title { margin-top: 36px; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.35; font-weight: 500; letter-spacing: 0px; } #wrapper .dc.dc.dc .hero__title > :where(.fusion-title-heading) { font-weight: 500; letter-spacing: 0px; } #wrapper .dc.dc.dc .hero__lead, #wrapper .dc.dc.dc.hero__lead { margin-top: 16px; font-size: 18px; color: rgb(54, 64, 90); max-width: 520px; } #wrapper .dc.dc.dc .hero__actions, #wrapper .dc.dc.dc.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; } #wrapper .dc.dc.dc .topics, #wrapper .dc.dc.dc.topics { padding: var(--abstand) 0 calc(var(--abstand) * .8); } #wrapper .dc.dc.dc .topics__head, #wrapper .dc.dc.dc.topics__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 64px; } #wrapper .dc.dc.dc .topics__head p, #wrapper .dc.dc.dc.topics__head p { max-width: 460px; justify-self: end; color: rgb(74, 82, 103); } #wrapper .dc.dc.dc .tiles, #wrapper .dc.dc.dc.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } #wrapper .dc.dc.dc .tile, #wrapper .dc.dc.dc.tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; text-decoration: none; background: var(--marine); } #wrapper .dc.dc.dc .tile img, #wrapper .dc.dc.dc.tile img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } #wrapper .dc.dc.dc .tile::after, #wrapper .dc.dc.dc.tile::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(12, 42, 85, 0) 40%, rgba(12, 42, 85, 0.82) 100%); transition: background-color 0.4s; } #wrapper .dc.dc.dc .tile:hover img, #wrapper .dc.dc.dc.tile:hover img { transform: scale(1.04); } #wrapper .dc.dc.dc .tile__text, #wrapper .dc.dc.dc.tile__text { position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 1; padding: 24px; } #wrapper .dc.dc.dc .tile h3, #wrapper .dc.dc.dc.tile h3 { color: var(--weiss); font-size: 22px; } #wrapper .dc.dc.dc .tile p, #wrapper .dc.dc.dc.tile p { margin-top: 6px; color: rgba(255, 255, 255, 0.86); font-size: 15px; line-height: 1.45; } #wrapper .dc.dc.dc .practice, #wrapper .dc.dc.dc.practice { padding: calc(var(--abstand) * .4) 0 var(--abstand); } #wrapper .dc.dc.dc .practice__intro, #wrapper .dc.dc.dc.practice__intro { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: center; } #wrapper .dc.dc.dc .practice__text p, #wrapper .dc.dc.dc.practice__text p { margin-top: 20px; color: rgb(61, 70, 89); max-width: 58ch; } #wrapper .dc.dc.dc h2 { text-wrap: balance; } #wrapper .dc.dc.dc .practice__image, #wrapper .dc.dc.dc.practice__image { margin: 0px; } #wrapper .dc.dc.dc .practice__image img, #wrapper .dc.dc.dc.practice__image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; } #wrapper .dc.dc.dc .practice__ages, #wrapper .dc.dc.dc.practice__ages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 96px; } #wrapper .dc.dc.dc .age, #wrapper .dc.dc.dc.age { padding-top: 24px; border-top: 2px solid var(--marine); } #wrapper .dc.dc.dc .age p, #wrapper .dc.dc.dc.age p { margin-top: 12px; color: rgb(61, 70, 89); font-size: 16px; } #wrapper .dc.dc.dc .process, #wrapper .dc.dc.dc.process { background: var(--sand-hell); padding: var(--abstand) 0; } #wrapper .dc.dc.dc .process__head, #wrapper .dc.dc.dc.process__head { max-width: 640px; } #wrapper .dc.dc.dc .process__head p, #wrapper .dc.dc.dc.process__head p { margin-top: 16px; color: rgb(74, 82, 103); } #wrapper .dc.dc.dc .process__steps, #wrapper .dc.dc.dc.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 72px; counter-reset: none; } #wrapper .dc.dc.dc .process__steps li, #wrapper .dc.dc.dc.process__steps li { position: relative; } #wrapper .dc.dc.dc .process__num, #wrapper .dc.dc.dc.process__num { display: block; font-size: 72px; line-height: 1; font-weight: 400; color: var(--marine); opacity: 0.28; margin-bottom: 20px; } #wrapper .dc.dc.dc .process__steps p, #wrapper .dc.dc.dc.process__steps p { margin-top: 10px; color: rgb(61, 70, 89); font-size: 16px; } #wrapper .dc.dc.dc .faq, #wrapper .dc.dc.dc.faq { padding: var(--abstand) 0; } #wrapper .dc.dc.dc .faq__inner, #wrapper .dc.dc.dc.faq__inner { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(40px, 7vw, 120px); align-items: start; } #wrapper .dc.dc.dc .faq__aside, #wrapper .dc.dc.dc.faq__aside { position: sticky; top: 40px; } #wrapper .dc.dc.dc .faq__aside p, #wrapper .dc.dc.dc.faq__aside p { margin-top: 18px; color: rgb(74, 82, 103); max-width: 40ch; } #wrapper .dc.dc.dc .faq__item, #wrapper .dc.dc.dc.faq__item { padding: 28px 0px; border-bottom: 1px solid var(--linie); } #wrapper .dc.dc.dc .faq__item:first-child, #wrapper .dc.dc.dc.faq__item:first-child { padding-top: 0px; } #wrapper .dc.dc.dc .faq__item p, #wrapper .dc.dc.dc.faq__item p { margin-top: 10px; color: rgb(61, 70, 89); max-width: 64ch; } #wrapper .dc.dc.dc .site-footer, #wrapper .dc.dc.dc.site-footer { background: var(--marine-tief); color: rgba(255, 255, 255, 0.78); padding: clamp(72px, 9vw, 128px) 0px 32px; font-size: 16px; } #wrapper .dc.dc.dc .site-footer a, #wrapper .dc.dc.dc.site-footer a { color: var(--weiss); text-decoration: none; } #wrapper .dc.dc.dc .site-footer a:hover, #wrapper .dc.dc.dc.site-footer a:hover { text-decoration: underline; } #wrapper .dc.dc.dc .site-footer .button--light, #wrapper .dc.dc.dc.site-footer .button--light { color: var(--marine); } #wrapper .dc.dc.dc .site-footer .button--light:hover, #wrapper .dc.dc.dc.site-footer .button--light:hover { text-decoration: none; } #wrapper .dc.dc.dc .footer-call, #wrapper .dc.dc.dc.footer-call { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: end; padding-bottom: 64px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); } #wrapper .dc.dc.dc .footer-call__title, #wrapper .dc.dc.dc.footer-call__title { font-family: "Stanford Script", cursive; color: rgba(255, 255, 255, 0.9); font-size: clamp(38px, 4vw, 56px); line-height: 1; -webkit-font-smoothing: antialiased; } #wrapper .dc.dc.dc .footer-call__actions, #wrapper .dc.dc.dc.footer-call__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; } #wrapper .dc.dc.dc .site-footer .footer-call__phone, #wrapper .dc.dc.dc.site-footer .footer-call__phone { font-size: 22px; font-weight: 500; } #wrapper .dc.dc.dc .footer-call__note, #wrapper .dc.dc.dc.footer-call__note { grid-column: 1 / -1; max-width: 62ch; font-size: 15px; } #wrapper .dc.dc.dc .footer-grid, #wrapper .dc.dc.dc.footer-grid { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr 1.2fr; gap: 40px; padding: 64px 0px; } #wrapper .dc.dc.dc .footer-col h4, #wrapper .dc.dc.dc.footer-col h4 { color: var(--weiss); font-size: 15px; font-weight: 500; margin-bottom: 16px; } #wrapper .dc.dc.dc .footer-col p + p, #wrapper .dc.dc.dc .footer-col :where(.fusion-text:has(> p:last-child)) + :where(.fusion-text:has(> p:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))), #wrapper .dc.dc.dc.footer-col p + p, #wrapper .dc.dc.dc.footer-col :where(.fusion-text:has(> p:last-child)) + :where(.fusion-text:has(> p:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))) { margin-top: 14px; } #wrapper .dc.dc.dc .footer-col li + li, #wrapper .dc.dc.dc.footer-col li + li { margin-top: 6px; } #wrapper .dc.dc.dc .hours, #wrapper .dc.dc.dc.hours { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0px; } #wrapper .dc.dc.dc .hours dt, #wrapper .dc.dc.dc.hours dt { color: var(--weiss); } #wrapper .dc.dc.dc .hours dd, #wrapper .dc.dc.dc.hours dd { margin: 0px; } #wrapper .dc.dc.dc .hours__note, #wrapper .dc.dc.dc.hours__note { margin-top: 12px; font-size: 14px; } #wrapper .dc.dc.dc .footer-logos, #wrapper .dc.dc.dc.footer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; padding: 36px 0px; border-top: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 1px solid rgba(255, 255, 255, 0.16); } #wrapper .dc.dc.dc .footer-logos img, #wrapper .dc.dc.dc.footer-logos img { height: 48px; width: auto; opacity: 0.72; } #wrapper .dc.dc.dc .footer-bottom, #wrapper .dc.dc.dc.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 28px; font-size: 14px; } #wrapper .dc.dc.dc .footer-bottom ul, #wrapper .dc.dc.dc.footer-bottom ul { display: flex; gap: 24px; } #wrapper .dc.dc.dc .main-nav a.is-active, #wrapper .dc.dc.dc.main-nav a.is-active { border-bottom-color: currentcolor; } #wrapper .dc.dc.dc .nav-overlay a.is-active, #wrapper .dc.dc.dc.nav-overlay a.is-active, .nav-overlay #wrapper .dc.dc.dc a.is-active { color: var(--taupe); } #wrapper .dc.dc.dc .section-title, #wrapper .dc.dc.dc.section-title { margin-bottom: 48px; } #wrapper .dc.dc.dc .button--ghost, #wrapper .dc.dc.dc.button--ghost { background: transparent; color: var(--marine); box-shadow: inset 0 0 0 1.5px var(--marine); } #wrapper .dc.dc.dc .button--ghost:hover, #wrapper .dc.dc.dc.button--ghost:hover { background: var(--marine); color: var(--weiss); } #wrapper .dc.dc.dc .page-hero, #wrapper .dc.dc.dc.page-hero { position: relative; height: 100svh; min-height: 560px; display: flex; align-items: center; overflow: hidden; background: rgb(223, 233, 242); } #wrapper .dc.dc.dc .page-hero__image, #wrapper .dc.dc.dc.page-hero__image { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; } #wrapper .dc.dc.dc .page-hero::before, #wrapper .dc.dc.dc.page-hero::before { content: ""; position: absolute; inset: 0px; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 36%, rgba(255, 255, 255, 0) 70%); } #wrapper .dc.dc.dc .page-hero__content, #wrapper .dc.dc.dc.page-hero__content { position: relative; z-index: 2; width: 100%; max-width: calc(1440px + 2 * var(--rand)); margin: 0px auto; padding: 150px var(--rand) 96px; } #wrapper .dc.dc.dc .page-hero__content > *, #wrapper .dc.dc.dc .page-hero__content > :where(.fusion-column-wrapper) > *, #wrapper .dc.dc.dc.page-hero__content > *, #wrapper .dc.dc.dc.page-hero__content > :where(.fusion-column-wrapper) > * { max-width: 620px; } #wrapper .dc.dc.dc .page-hero h1, #wrapper .dc.dc.dc.page-hero h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 500; } #wrapper .dc.dc.dc .page-hero h1 span, #wrapper .dc.dc.dc.page-hero h1 span { display: block; } #wrapper .dc.dc.dc .page-hero__lead, #wrapper .dc.dc.dc.page-hero__lead { margin-top: 20px; font-size: 18px; color: rgb(54, 64, 90); } #wrapper .dc.dc.dc .page-hero--plain, #wrapper .dc.dc.dc.page-hero--plain { height: auto; min-height: 0px; display: block; background: var(--sand-hell); } #wrapper .dc.dc.dc .page-hero--plain::before, #wrapper .dc.dc.dc.page-hero--plain::before { display: none; } #wrapper .dc.dc.dc .page-hero--plain .page-hero__content, #wrapper .dc.dc.dc.page-hero--plain .page-hero__content { padding-top: 170px; } #wrapper .dc.dc.dc .prose, #wrapper .dc.dc.dc.prose { font-size: 17px; color: rgb(61, 70, 89); } #wrapper .dc.dc.dc .prose p, #wrapper .dc.dc.dc.prose p, #wrapper .dc.dc.dc .prose ul, #wrapper .dc.dc.dc.prose ul, #wrapper .dc.dc.dc .prose ol, #wrapper .dc.dc.dc.prose ol, #wrapper .dc.dc.dc .prose table, #wrapper .dc.dc.dc.prose table { margin-top: 16px; max-width: 68ch; } #wrapper .dc.dc.dc .prose h2, #wrapper .dc.dc.dc.prose h2 { color: var(--marine); } #wrapper .dc.dc.dc .prose h3, #wrapper .dc.dc.dc.prose h3 { margin-top: 36px; font-size: 21px; } #wrapper .dc.dc.dc .prose h4, #wrapper .dc.dc.dc.prose h4 { margin-top: 28px; font-size: 17px; font-weight: 600; color: var(--tinte); } #wrapper .dc.dc.dc .prose h2 + p, #wrapper .dc.dc.dc .prose :where(.fusion-title:has(h2)) + :where(.fusion-text:has(> p:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))), #wrapper .dc.dc.dc.prose h2 + p, #wrapper .dc.dc.dc.prose :where(.fusion-title:has(h2)) + :where(.fusion-text:has(> p:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))), #wrapper .dc.dc.dc .prose h3 + p, #wrapper .dc.dc.dc .prose :where(.fusion-title:has(h3)) + :where(.fusion-text:has(> p:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))), #wrapper .dc.dc.dc.prose h3 + p, #wrapper .dc.dc.dc.prose :where(.fusion-title:has(h3)) + :where(.fusion-text:has(> p:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))), #wrapper .dc.dc.dc .prose h4 + p, #wrapper .dc.dc.dc .prose :where(.fusion-title:has(h4)) + :where(.fusion-text:has(> p:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))), #wrapper .dc.dc.dc.prose h4 + p, #wrapper .dc.dc.dc.prose :where(.fusion-title:has(h4)) + :where(.fusion-text:has(> p:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))), #wrapper .dc.dc.dc .prose h3 + ul, #wrapper .dc.dc.dc .prose :where(.fusion-title:has(h3)) + :where(.fusion-text:has(> ul:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))), #wrapper .dc.dc.dc.prose h3 + ul, #wrapper .dc.dc.dc.prose :where(.fusion-title:has(h3)) + :where(.fusion-text:has(> ul:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))), #wrapper .dc.dc.dc .prose h4 + ul, #wrapper .dc.dc.dc .prose :where(.fusion-title:has(h4)) + :where(.fusion-text:has(> ul:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))), #wrapper .dc.dc.dc.prose h4 + ul, #wrapper .dc.dc.dc.prose :where(.fusion-title:has(h4)) + :where(.fusion-text:has(> ul:is(:first-child, :where(.fusion-builder-empty-container:first-child + *)))) { margin-top: 10px; } #wrapper .dc.dc.dc .prose ul, #wrapper .dc.dc.dc.prose ul { padding-left: 0px; } #wrapper .dc.dc.dc .prose ul li, #wrapper .dc.dc.dc.prose ul li { position: relative; padding-left: 22px; margin-top: 6px; } #wrapper .dc.dc.dc .prose ul li::before, #wrapper .dc.dc.dc.prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 8px; height: 2px; background: var(--marine); } #wrapper .dc.dc.dc .prose ol, #wrapper .dc.dc.dc.prose ol { list-style: decimal; padding-left: 22px; } #wrapper .dc.dc.dc .prose strong, #wrapper .dc.dc.dc.prose strong { color: var(--tinte); font-weight: 600; } #wrapper .dc.dc.dc .prose a, #wrapper .dc.dc.dc.prose a { color: var(--marine); text-underline-offset: 3px; } #wrapper .dc.dc.dc .prose img, #wrapper .dc.dc.dc.prose img { margin-top: 28px; width: auto; height: auto; max-width: min(100%, 68ch); border-radius: 10px; } #wrapper .dc.dc.dc .prose table, #wrapper .dc.dc.dc.prose table { border-collapse: collapse; width: 100%; } #wrapper .dc.dc.dc .prose td, #wrapper .dc.dc.dc.prose td, #wrapper .dc.dc.dc .prose th, #wrapper .dc.dc.dc.prose th { padding: 10px 12px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; } #wrapper .dc.dc.dc .prose__lead, #wrapper .dc.dc.dc.prose__lead { font-size: 21px; line-height: 1.5; color: var(--marine); } #wrapper .dc.dc.dc .doc, #wrapper .dc.dc.dc.doc { padding: clamp(72px, 8vw, 128px) 0px; } #wrapper .dc.dc.dc .doc__inner, #wrapper .dc.dc.dc.doc__inner { display: grid; grid-template-columns: 260px minmax(0px, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; } #wrapper .dc.dc.dc .doc__inner > *, #wrapper .dc.dc.dc .doc__inner > :where(.fusion-column-wrapper) > *, #wrapper .dc.dc.dc.doc__inner > *, #wrapper .dc.dc.dc.doc__inner > :where(.fusion-column-wrapper) > * { min-width: 0px; } #wrapper .dc.dc.dc .prose p, #wrapper .dc.dc.dc.prose p, #wrapper .dc.dc.dc .prose li, #wrapper .dc.dc.dc.prose li, #wrapper .dc.dc.dc .prose td, #wrapper .dc.dc.dc.prose td { overflow-wrap: break-word; } #wrapper .dc.dc.dc .doc--legal .prose, #wrapper .dc.dc.dc.doc--legal .prose { font-size: 16px; } #wrapper .dc.dc.dc .doc--legal .prose p, #wrapper .dc.dc.dc.doc--legal .prose p, #wrapper .dc.dc.dc .doc--legal .prose li, #wrapper .dc.dc.dc.doc--legal .prose li { overflow-wrap: anywhere; } #wrapper .dc.dc.dc .doc__toc, #wrapper .dc.dc.dc.doc__toc { position: sticky; top: 92px; } #wrapper .dc.dc.dc .doc__toc-title, #wrapper .dc.dc.dc.doc__toc-title { font-size: 14px; color: var(--taupe); margin-bottom: 12px; } #wrapper .dc.dc.dc .doc__toc li, #wrapper .dc.dc.dc.doc__toc li { border-top: 1px solid var(--linie); } #wrapper .dc.dc.dc .doc__toc li:last-child, #wrapper .dc.dc.dc.doc__toc li:last-child { border-bottom: 1px solid var(--linie); } #wrapper .dc.dc.dc .doc__toc a, #wrapper .dc.dc.dc.doc__toc a { display: block; padding: 10px 0px; color: var(--marine); text-decoration: none; font-weight: 500; font-size: 16px; } #wrapper .dc.dc.dc .doc__toc a:hover, #wrapper .dc.dc.dc.doc__toc a:hover { color: var(--taupe); } #wrapper .dc.dc.dc .doc__section, #wrapper .dc.dc.dc.doc__section { padding-top: 64px; margin-top: 64px; border-top: 1px solid var(--linie); scroll-margin-top: 92px; } #wrapper .dc.dc.dc .doc__section--first, #wrapper .dc.dc.dc.doc__section--first { padding-top: 0px; margin-top: 0px; border-top: 0px; } #wrapper .dc.dc.dc .doc__section > h2, #wrapper .dc.dc.dc .doc__section > :where(.fusion-column-wrapper) > h2, #wrapper .dc.dc.dc.doc__section > h2, #wrapper .dc.dc.dc.doc__section > :where(.fusion-column-wrapper) > h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 8px; } #wrapper .dc.dc.dc .doc__intro, #wrapper .dc.dc.dc.doc__intro { margin-bottom: 64px; } #wrapper .dc.dc.dc .qa, #wrapper .dc.dc.dc.qa { padding: 24px 0px; border-top: 1px solid var(--linie); } #wrapper .dc.dc.dc .qa > h3, #wrapper .dc.dc.dc .qa > :where(.fusion-column-wrapper) > h3, #wrapper .dc.dc.dc.qa > h3, #wrapper .dc.dc.dc.qa > :where(.fusion-column-wrapper) > h3 { margin-top: 0px; color: var(--marine); } #wrapper .dc.dc.dc .qa h4, #wrapper .dc.dc.dc.qa h4 { margin-top: 20px; } #wrapper .dc.dc.dc .split, #wrapper .dc.dc.dc.split { padding: clamp(72px, 8vw, 128px) 0px; } #wrapper .dc.dc.dc .split__inner, #wrapper .dc.dc.dc.split__inner { display: grid; grid-template-columns: minmax(0px, 6fr) minmax(0px, 5fr); gap: clamp(40px, 7vw, 112px); align-items: start; } #wrapper .dc.dc.dc .split--narrow .split__inner, #wrapper .dc.dc.dc.split--narrow .split__inner { grid-template-columns: minmax(0px, 1fr); } #wrapper .dc.dc.dc .split--narrow .split__text, #wrapper .dc.dc.dc.split--narrow .split__text { max-width: 760px; } #wrapper .dc.dc.dc .split__text h2, #wrapper .dc.dc.dc.split__text h2 { margin-bottom: 8px; } #wrapper .dc.dc.dc .split__media, #wrapper .dc.dc.dc.split__media { display: grid; gap: 20px; } #wrapper .dc.dc.dc .split__media img, #wrapper .dc.dc.dc.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; } #wrapper .dc.dc.dc .gallery, #wrapper .dc.dc.dc.gallery { padding-bottom: clamp(72px, 8vw, 128px); } #wrapper .dc.dc.dc .gallery__grid, #wrapper .dc.dc.dc.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } #wrapper .dc.dc.dc .gallery__grid img, #wrapper .dc.dc.dc.gallery__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; } #wrapper .dc.dc.dc .doctors, #wrapper .dc.dc.dc.doctors { padding: clamp(72px, 8vw, 128px) 0px clamp(56px, 6vw, 96px); } #wrapper .dc.dc.dc .doctors__grid, #wrapper .dc.dc.dc.doctors__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 40px; } #wrapper .dc.dc.dc .doctor, #wrapper .dc.dc.dc.doctor { display: grid; grid-template-columns: 200px minmax(0px, 1fr); gap: 28px; align-items: start; } #wrapper .dc.dc.dc .doctor__photo, #wrapper .dc.dc.dc.doctor__photo { width: 200px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 14px; background: var(--sand-hell); } #wrapper .dc.dc.dc .doctor__photo--empty, #wrapper .dc.dc.dc.doctor__photo--empty { display: block; } #wrapper .dc.dc.dc .doctor h3, #wrapper .dc.dc.dc.doctor h3 { font-size: 21px; } #wrapper .dc.dc.dc .doctor__role, #wrapper .dc.dc.dc.doctor__role { margin-top: 4px; color: var(--taupe); font-size: 15px; } #wrapper .dc.dc.dc .doctor__text p, #wrapper .dc.dc.dc.doctor__text p { margin-top: 12px; color: rgb(61, 70, 89); font-size: 16px; } #wrapper .dc.dc.dc .doctor__text .doctor__role, #wrapper .dc.dc.dc.doctor__text .doctor__role { margin-top: 4px; } #wrapper .dc.dc.dc .staff, #wrapper .dc.dc.dc.staff { padding: clamp(56px, 6vw, 96px) 0px clamp(72px, 8vw, 128px); background: var(--sand-hell); } #wrapper .dc.dc.dc .staff__group + .staff__group, #wrapper .dc.dc.dc .staff__group + :where(.fusion-text, .fusion-title, .fusion-imageframe) > .staff__group, #wrapper .dc.dc.dc :where(.fusion-text, .fusion-title, .fusion-imageframe):has(> .staff__group) + .staff__group, #wrapper .dc.dc.dc :where(.fusion-text, .fusion-title, .fusion-imageframe):has(> .staff__group) + :where(.fusion-text, .fusion-title, .fusion-imageframe) > .staff__group, #wrapper .dc.dc.dc.staff__group + .staff__group, #wrapper .dc.dc.dc.staff__group + :where(.fusion-text, .fusion-title, .fusion-imageframe) > .staff__group, #wrapper :where(.fusion-text, .fusion-title, .fusion-imageframe):has(> .dc.dc.dc.staff__group) + .staff__group, #wrapper :where(.fusion-text, .fusion-title, .fusion-imageframe):has(> .dc.dc.dc.staff__group) + :where(.fusion-text, .fusion-title, .fusion-imageframe) > .staff__group { margin-top: 56px; } #wrapper .dc.dc.dc .staff__group > h3, #wrapper .dc.dc.dc .staff__group > :where(.fusion-column-wrapper) > h3, #wrapper .dc.dc.dc.staff__group > h3, #wrapper .dc.dc.dc.staff__group > :where(.fusion-column-wrapper) > h3 { margin-bottom: 20px; } #wrapper .dc.dc.dc .staff__grid, #wrapper .dc.dc.dc.staff__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } #wrapper .dc.dc.dc .person, #wrapper .dc.dc.dc.person { margin: 0px; } #wrapper .dc.dc.dc .person img, #wrapper .dc.dc.dc.person img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; } #wrapper .dc.dc.dc .person figcaption, #wrapper .dc.dc.dc.person figcaption { margin-top: 10px; display: flex; flex-direction: column; font-size: 15px; line-height: 1.4; } #wrapper .dc.dc.dc .person strong, #wrapper .dc.dc.dc.person strong { color: var(--marine); font-weight: 500; font-size: 16px; } #wrapper .dc.dc.dc .person span, #wrapper .dc.dc.dc.person span { color: var(--taupe); } #wrapper .dc.dc.dc .location, #wrapper .dc.dc.dc.location { padding: clamp(72px, 8vw, 128px) 0px; background: var(--sand-hell); } #wrapper .dc.dc.dc .location--first, #wrapper .dc.dc.dc.location--first { background: var(--weiss); } #wrapper .dc.dc.dc .info-cols, #wrapper .dc.dc.dc.info-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } #wrapper .dc.dc.dc .info, #wrapper .dc.dc.dc.info { padding-top: 20px; border-top: 2px solid var(--marine); } #wrapper .dc.dc.dc .info p, #wrapper .dc.dc.dc.info p { margin-top: 12px; color: rgb(61, 70, 89); font-size: 16px; } #wrapper .dc.dc.dc .info a, #wrapper .dc.dc.dc.info a { color: var(--marine); } #wrapper .dc.dc.dc .info .text-link, #wrapper .dc.dc.dc.info .text-link { margin-top: 0px; } #wrapper .dc.dc.dc .info__note, #wrapper .dc.dc.dc.info__note { font-size: 14px !important; } #wrapper .dc.dc.dc .hours--dark, #wrapper .dc.dc.dc.hours--dark { margin-top: 12px; font-size: 16px; } #wrapper .dc.dc.dc .hours--dark dt, #wrapper .dc.dc.dc.hours--dark dt { color: var(--marine); font-weight: 500; } #wrapper .dc.dc.dc .hours--dark dd, #wrapper .dc.dc.dc.hours--dark dd { color: rgb(61, 70, 89); } #wrapper .dc.dc.dc .termin, #wrapper .dc.dc.dc.termin { padding: clamp(72px, 8vw, 120px) 0px; background: var(--sand-hell); scroll-margin-top: 24px; } #wrapper .dc.dc.dc .termin__inner, #wrapper .dc.dc.dc.termin__inner { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 40px 80px; align-items: center; } #wrapper .dc.dc.dc .termin__text p, #wrapper .dc.dc.dc.termin__text p { margin-top: 14px; color: rgb(61, 70, 89); max-width: 62ch; } #wrapper .dc.dc.dc .termin__text a, #wrapper .dc.dc.dc.termin__text a { color: var(--marine); } #wrapper .dc.dc.dc .termin__actions, #wrapper .dc.dc.dc.termin__actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 260px; } #wrapper .dc.dc.dc .termin__phone, #wrapper .dc.dc.dc.termin__phone { margin-top: 6px; text-align: center; color: var(--marine); font-weight: 500; font-size: 18px; text-decoration: none; } #wrapper .dc.dc.dc .job, #wrapper .dc.dc.dc.job { padding: clamp(72px, 8vw, 128px) 0px; } #wrapper .dc.dc.dc .job__inner, #wrapper .dc.dc.dc.job__inner { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 40px 80px; align-items: end; padding: clamp(32px, 5vw, 64px); border-radius: 20px; background: var(--sand-hell); } #wrapper .dc.dc.dc .job__intro, #wrapper .dc.dc.dc.job__intro { color: var(--taupe); } #wrapper .dc.dc.dc .job h2, #wrapper .dc.dc.dc.job h2 { margin-top: 12px; font-size: clamp(28px, 3vw, 40px); } #wrapper .dc.dc.dc .job__text p, #wrapper .dc.dc.dc.job__text p { margin-top: 16px; color: rgb(61, 70, 89); } #wrapper .dc.dc.dc .job__actions, #wrapper .dc.dc.dc.job__actions { display: flex; flex-direction: column; gap: 12px; min-width: 260px; } #wrapper .dc.dc.dc .legal, #wrapper .dc.dc.dc.legal { padding: clamp(56px, 6vw, 96px) 0px clamp(72px, 8vw, 128px); } #wrapper .dc.dc.dc .legal__body, #wrapper .dc.dc.dc.legal__body { max-width: 760px; font-size: 16px; } #wrapper .dc.dc.dc .legal__body h2, #wrapper .dc.dc.dc.legal__body h2 { margin-top: 56px; font-size: 28px; } #wrapper .dc.dc.dc .legal__body h2:first-child, #wrapper .dc.dc.dc.legal__body h2:first-child { margin-top: 0px; } #wrapper .dc.dc.dc .legal__body h3, #wrapper .dc.dc.dc.legal__body h3 { margin-top: 32px; font-size: 19px; } #wrapper .dc.dc.dc .legal__body p, #wrapper .dc.dc.dc.legal__body p { overflow-wrap: anywhere; } html.fx-ready .fx-reveal, html.fx-ready #wrapper .dc.dc.dc .fx-reveal, html.fx-ready #wrapper .dc.dc.dc.fx-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } html.fx-ready .fx-reveal.is-in, html.fx-ready #wrapper .dc.dc.dc .fx-reveal.is-in, html.fx-ready #wrapper .dc.dc.dc.fx-reveal.is-in { opacity: 1; transform: none; } html.fx-ready .fx-stagger > *, html.fx-ready .fx-stagger > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc .fx-stagger > *, html.fx-ready #wrapper .dc.dc.dc .fx-stagger > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc.fx-stagger > *, html.fx-ready #wrapper .dc.dc.dc.fx-stagger > :where(.fusion-column-wrapper) > * { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } html.fx-ready .fx-stagger.is-in > *, html.fx-ready .fx-stagger.is-in > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc .fx-stagger.is-in > *, html.fx-ready #wrapper .dc.dc.dc .fx-stagger.is-in > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc.fx-stagger.is-in > *, html.fx-ready #wrapper .dc.dc.dc.fx-stagger.is-in > :where(.fusion-column-wrapper) > * { opacity: 1; transform: none; } #wrapper .dc.dc.dc .fx-stagger > :is(:nth-child(2):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(3))), #wrapper .dc.dc.dc .fx-stagger > :where(.fusion-column-wrapper) > :nth-child(2), #wrapper .dc.dc.dc.fx-stagger > :is(:nth-child(2):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(3))), #wrapper .dc.dc.dc.fx-stagger > :where(.fusion-column-wrapper) > :nth-child(2) { transition-delay: 0.1s !important; } #wrapper .dc.dc.dc .fx-stagger > :is(:nth-child(3):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(4))), #wrapper .dc.dc.dc .fx-stagger > :where(.fusion-column-wrapper) > :nth-child(3), #wrapper .dc.dc.dc.fx-stagger > :is(:nth-child(3):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(4))), #wrapper .dc.dc.dc.fx-stagger > :where(.fusion-column-wrapper) > :nth-child(3) { transition-delay: 0.2s !important; } #wrapper .dc.dc.dc .fx-stagger > :is(:nth-child(4):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(5))), #wrapper .dc.dc.dc .fx-stagger > :where(.fusion-column-wrapper) > :nth-child(4), #wrapper .dc.dc.dc.fx-stagger > :is(:nth-child(4):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(5))), #wrapper .dc.dc.dc.fx-stagger > :where(.fusion-column-wrapper) > :nth-child(4) { transition-delay: 0.3s !important; } #wrapper .dc.dc.dc .fx-stagger > :is(:nth-child(5):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(6))), #wrapper .dc.dc.dc .fx-stagger > :where(.fusion-column-wrapper) > :nth-child(5), #wrapper .dc.dc.dc.fx-stagger > :is(:nth-child(5):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(6))), #wrapper .dc.dc.dc.fx-stagger > :where(.fusion-column-wrapper) > :nth-child(5) { transition-delay: 0.4s !important; } #wrapper .dc.dc.dc .fx-stagger > :is(:nth-child(6):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(7))), #wrapper .dc.dc.dc .fx-stagger > :where(.fusion-column-wrapper) > :nth-child(6), #wrapper .dc.dc.dc.fx-stagger > :is(:nth-child(6):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(7))), #wrapper .dc.dc.dc.fx-stagger > :where(.fusion-column-wrapper) > :nth-child(6) { transition-delay: 0.5s !important; } #wrapper .dc.dc.dc .fx-stagger > :is(:nth-child(7):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(8))), #wrapper .dc.dc.dc .fx-stagger > :where(.fusion-column-wrapper) > :nth-child(7), #wrapper .dc.dc.dc.fx-stagger > :is(:nth-child(7):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(8))), #wrapper .dc.dc.dc.fx-stagger > :where(.fusion-column-wrapper) > :nth-child(7) { transition-delay: 0.6s !important; } #wrapper .dc.dc.dc .fx-stagger > :is(:nth-child(8):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(9))), #wrapper .dc.dc.dc .fx-stagger > :where(.fusion-column-wrapper) > :nth-child(8), #wrapper .dc.dc.dc.fx-stagger > :is(:nth-child(8):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(9))), #wrapper .dc.dc.dc.fx-stagger > :where(.fusion-column-wrapper) > :nth-child(8) { transition-delay: 0.7s !important; } html.fx-ready .fx-lines > *, html.fx-ready .fx-lines > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc .fx-lines > *, html.fx-ready #wrapper .dc.dc.dc .fx-lines > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc.fx-lines > *, html.fx-ready #wrapper .dc.dc.dc.fx-lines > :where(.fusion-column-wrapper) > * { opacity: 0; transform: translateY(0.35em); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1); } html.fx-ready .fx-lines.is-in > *, html.fx-ready .fx-lines.is-in > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc .fx-lines.is-in > *, html.fx-ready #wrapper .dc.dc.dc .fx-lines.is-in > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc.fx-lines.is-in > *, html.fx-ready #wrapper .dc.dc.dc.fx-lines.is-in > :where(.fusion-column-wrapper) > * { opacity: 1; transform: none; } #wrapper .dc.dc.dc .fx-lines > :is(:nth-child(2):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(3))), #wrapper .dc.dc.dc .fx-lines > :where(.fusion-column-wrapper) > :nth-child(2), #wrapper .dc.dc.dc.fx-lines > :is(:nth-child(2):where(:not(.fusion-builder-empty-container:first-child ~ *)), :where(.fusion-builder-empty-container:first-child ~ :nth-child(3))), #wrapper .dc.dc.dc.fx-lines > :where(.fusion-column-wrapper) > :nth-child(2) { transition-delay: 0.25s !important; } #wrapper .dc.dc.dc .hero .fx-reveal, #wrapper .dc.dc.dc.hero .fx-reveal { transition-delay: 0.45s; } #wrapper .dc.dc.dc .hero .hero__lead.fx-reveal, #wrapper .dc.dc.dc.hero .hero__lead.fx-reveal { transition-delay: 0.6s; } #wrapper .dc.dc.dc .hero .hero__actions.fx-reveal, #wrapper .dc.dc.dc.hero .hero__actions.fx-reveal { transition-delay: 0.75s; } @media (prefers-reduced-motion: reduce) { html.fx-ready .fx-reveal, html.fx-ready #wrapper .dc.dc.dc .fx-reveal, html.fx-ready #wrapper .dc.dc.dc.fx-reveal, html.fx-ready .fx-stagger > *, html.fx-ready .fx-stagger > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc .fx-stagger > *, html.fx-ready #wrapper .dc.dc.dc .fx-stagger > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc.fx-stagger > *, html.fx-ready #wrapper .dc.dc.dc.fx-stagger > :where(.fusion-column-wrapper) > *, html.fx-ready .fx-lines > *, html.fx-ready .fx-lines > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc .fx-lines > *, html.fx-ready #wrapper .dc.dc.dc .fx-lines > :where(.fusion-column-wrapper) > *, html.fx-ready #wrapper .dc.dc.dc.fx-lines > *, html.fx-ready #wrapper .dc.dc.dc.fx-lines > :where(.fusion-column-wrapper) > * { opacity: 1 !important; transform: none !important; transition: none !important; } #wrapper .dc.dc.dc .topic img, #wrapper .dc.dc.dc.topic img { transition: none; } } @media (max-width: 1180px) { #wrapper .dc.dc.dc .main-nav, #wrapper .dc.dc.dc.main-nav, #wrapper .dc.dc.dc .site-header__cta, #wrapper .dc.dc.dc.site-header__cta { display: none; } #wrapper .dc.dc.dc .burger, #wrapper .dc.dc.dc.burger { display: flex; } #wrapper .dc.dc.dc .brand__logo, #wrapper .dc.dc.dc.brand__logo { height: 44px; } #wrapper .dc.dc.dc .tiles, #wrapper .dc.dc.dc.tiles { grid-template-columns: repeat(2, 1fr); } #wrapper .dc.dc.dc .tile, #wrapper .dc.dc.dc.tile { aspect-ratio: 4 / 3; } #wrapper .dc.dc.dc .process__steps, #wrapper .dc.dc.dc.process__steps { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; } #wrapper .dc.dc.dc .footer-grid, #wrapper .dc.dc.dc.footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { #wrapper .dc.dc.dc { font-size: 16px; } #wrapper .dc.dc.dc .hero, #wrapper .dc.dc.dc.hero { align-items: flex-end; min-height: 620px; } #wrapper .dc.dc.dc .hero__image, #wrapper .dc.dc.dc.hero__image { object-position: 68% 0px; } #wrapper .dc.dc.dc .hero::before, #wrapper .dc.dc.dc.hero::before { background: linear-gradient(rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.88) 52%, rgb(255, 255, 255) 74%); } #wrapper .dc.dc.dc .hero__content, #wrapper .dc.dc.dc.hero__content { padding: 0 var(--rand) 40px; } #wrapper .dc.dc.dc .hero__wordmark, #wrapper .dc.dc.dc.hero__wordmark { font-size: 56px; } #wrapper .dc.dc.dc .hero__title, #wrapper .dc.dc.dc.hero__title { margin-top: 18px; font-size: 19px; } #wrapper .dc.dc.dc .hero__lead, #wrapper .dc.dc.dc.hero__lead { font-size: 16px; margin-top: 10px; } #wrapper .dc.dc.dc .hero__actions, #wrapper .dc.dc.dc.hero__actions { margin-top: 24px; } #wrapper .dc.dc.dc .site-header__inner, #wrapper .dc.dc.dc.site-header__inner { padding-top: 14px; padding-bottom: 14px; } #wrapper .dc.dc.dc .topics__head, #wrapper .dc.dc.dc.topics__head, #wrapper .dc.dc.dc .practice__intro, #wrapper .dc.dc.dc.practice__intro, #wrapper .dc.dc.dc .faq__inner, #wrapper .dc.dc.dc.faq__inner, #wrapper .dc.dc.dc .footer-call, #wrapper .dc.dc.dc.footer-call { grid-template-columns: 1fr; } #wrapper .dc.dc.dc .topics__head, #wrapper .dc.dc.dc.topics__head { margin-bottom: 40px; } #wrapper .dc.dc.dc .topics__head p, #wrapper .dc.dc.dc.topics__head p { justify-self: start; } #wrapper .dc.dc.dc .practice__ages, #wrapper .dc.dc.dc.practice__ages, #wrapper .dc.dc.dc .process__steps, #wrapper .dc.dc.dc.process__steps, #wrapper .dc.dc.dc .footer-grid, #wrapper .dc.dc.dc.footer-grid { grid-template-columns: 1fr; } #wrapper .dc.dc.dc .tiles, #wrapper .dc.dc.dc.tiles { gap: 12px; } #wrapper .dc.dc.dc .tile, #wrapper .dc.dc.dc.tile { aspect-ratio: 3 / 4; border-radius: 12px; } #wrapper .dc.dc.dc .tile__text, #wrapper .dc.dc.dc.tile__text { padding: 16px; } #wrapper .dc.dc.dc .tile h3, #wrapper .dc.dc.dc.tile h3 { font-size: 18px; } #wrapper .dc.dc.dc .tile p, #wrapper .dc.dc.dc.tile p { display: none; } #wrapper .dc.dc.dc .practice__ages, #wrapper .dc.dc.dc.practice__ages { gap: 36px; margin-top: 64px; } #wrapper .dc.dc.dc .process__steps, #wrapper .dc.dc.dc.process__steps { gap: 36px; margin-top: 48px; } #wrapper .dc.dc.dc .process__num, #wrapper .dc.dc.dc.process__num { font-size: 56px; margin-bottom: 12px; } #wrapper .dc.dc.dc .faq__aside, #wrapper .dc.dc.dc.faq__aside { position: static; } #wrapper .dc.dc.dc .footer-logos, #wrapper .dc.dc.dc.footer-logos { gap: 24px 32px; } #wrapper .dc.dc.dc .footer-logos img, #wrapper .dc.dc.dc.footer-logos img { height: 40px; } } @media (max-width: 1180px) { #wrapper .dc.dc.dc .doc__inner, #wrapper .dc.dc.dc.doc__inner { grid-template-columns: 200px minmax(0px, 1fr); } #wrapper .dc.dc.dc .doctors__grid, #wrapper .dc.dc.dc.doctors__grid { grid-template-columns: 1fr; } #wrapper .dc.dc.dc .staff__grid, #wrapper .dc.dc.dc.staff__grid { grid-template-columns: repeat(4, 1fr); } #wrapper .dc.dc.dc .info-cols, #wrapper .dc.dc.dc.info-cols { grid-template-columns: repeat(2, 1fr); } #wrapper .dc.dc.dc .gallery__grid, #wrapper .dc.dc.dc.gallery__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { #wrapper .dc.dc.dc .page-hero, #wrapper .dc.dc.dc.page-hero { align-items: flex-end; min-height: 620px; } #wrapper .dc.dc.dc .page-hero::before, #wrapper .dc.dc.dc.page-hero::before { background: linear-gradient(rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.88) 56%, rgb(255, 255, 255) 78%); } #wrapper .dc.dc.dc .page-hero__content, #wrapper .dc.dc.dc.page-hero__content { padding: 0 var(--rand) 40px; } #wrapper .dc.dc.dc .page-hero--plain, #wrapper .dc.dc.dc.page-hero--plain { min-height: 0px; background: var(--sand-hell); } #wrapper .dc.dc.dc .page-hero--plain .page-hero__content, #wrapper .dc.dc.dc.page-hero--plain .page-hero__content { padding: 110px var(--rand) 40px; } #wrapper .dc.dc.dc .page-hero h1, #wrapper .dc.dc.dc.page-hero h1 { font-size: 40px; } #wrapper .dc.dc.dc .page-hero__lead, #wrapper .dc.dc.dc.page-hero__lead { font-size: 16px; } #wrapper .dc.dc.dc .doc__inner, #wrapper .dc.dc.dc.doc__inner, #wrapper .dc.dc.dc .split__inner, #wrapper .dc.dc.dc.split__inner, #wrapper .dc.dc.dc .termin__inner, #wrapper .dc.dc.dc.termin__inner, #wrapper .dc.dc.dc .job__inner, #wrapper .dc.dc.dc.job__inner { grid-template-columns: 1fr; } #wrapper .dc.dc.dc .doc__toc, #wrapper .dc.dc.dc.doc__toc { position: static; } #wrapper .dc.dc.dc .doc__toc ul, #wrapper .dc.dc.dc.doc__toc ul { display: flex; flex-wrap: wrap; gap: 8px; } #wrapper .dc.dc.dc .doc__toc li, #wrapper .dc.dc.dc.doc__toc li, #wrapper .dc.dc.dc .doc__toc li:last-child, #wrapper .dc.dc.dc.doc__toc li:last-child { border: 0px; } #wrapper .dc.dc.dc .doc__toc a, #wrapper .dc.dc.dc.doc__toc a { padding: 6px 14px; border-radius: 999px; background: var(--sand-hell); font-size: 14px; } #wrapper .dc.dc.dc .doc__section, #wrapper .dc.dc.dc.doc__section { padding-top: 40px; margin-top: 40px; } #wrapper .dc.dc.dc .doc__section--first, #wrapper .dc.dc.dc.doc__section--first { padding-top: 0px; margin-top: 0px; } #wrapper .dc.dc.dc .prose, #wrapper .dc.dc.dc.prose { font-size: 16px; } #wrapper .dc.dc.dc .doctor, #wrapper .dc.dc.dc.doctor { grid-template-columns: 1fr; gap: 16px; } #wrapper .dc.dc.dc .doctor__photo, #wrapper .dc.dc.dc.doctor__photo { width: 100%; max-width: 320px; } #wrapper .dc.dc.dc .staff__grid, #wrapper .dc.dc.dc.staff__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } #wrapper .dc.dc.dc .info-cols, #wrapper .dc.dc.dc.info-cols, #wrapper .dc.dc.dc .gallery__grid, #wrapper .dc.dc.dc.gallery__grid { grid-template-columns: 1fr; } #wrapper .dc.dc.dc .gallery__grid, #wrapper .dc.dc.dc.gallery__grid { gap: 12px; } #wrapper .dc.dc.dc .termin__actions, #wrapper .dc.dc.dc.termin__actions, #wrapper .dc.dc.dc .job__actions, #wrapper .dc.dc.dc.job__actions { min-width: 0px; } } /* Ersatz für `gap` und `order` an Behältern, die in Avada zur Spalte werden: deren Kinder sind keine Flex-Kinder mehr, weil die Spaltenhülle dazwischenliegt. */ #wrapper .dc.dc.dc .burger:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 6px; } #wrapper .dc.dc.dc .burger:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 6px; } #wrapper .dc.dc.dc.burger:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 6px; } #wrapper .dc.dc.dc.burger:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 6px; } #wrapper .dc.dc.dc .nav-overlay:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 2px; } #wrapper .dc.dc.dc .nav-overlay:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 2px; } #wrapper .dc.dc.dc.nav-overlay:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 2px; } #wrapper .dc.dc.dc.nav-overlay:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 2px; } #wrapper .dc.dc.dc .topics__head:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px; } #wrapper .dc.dc.dc .topics__head:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px; } #wrapper .dc.dc.dc.topics__head:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px; } #wrapper .dc.dc.dc.topics__head:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px; } #wrapper .dc.dc.dc .tiles:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 20px; } #wrapper .dc.dc.dc .tiles:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 20px; } #wrapper .dc.dc.dc.tiles:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 20px; } #wrapper .dc.dc.dc.tiles:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 20px; } #wrapper .dc.dc.dc .practice__intro:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: clamp(40px, 6vw, 96px); } #wrapper .dc.dc.dc .practice__intro:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: clamp(40px, 6vw, 96px); } #wrapper .dc.dc.dc.practice__intro:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: clamp(40px, 6vw, 96px); } #wrapper .dc.dc.dc.practice__intro:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: clamp(40px, 6vw, 96px); } #wrapper .dc.dc.dc .practice__ages:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 48px; } #wrapper .dc.dc.dc .practice__ages:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 48px; } #wrapper .dc.dc.dc.practice__ages:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 48px; } #wrapper .dc.dc.dc.practice__ages:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 48px; } #wrapper .dc.dc.dc .process__steps:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px; } #wrapper .dc.dc.dc .process__steps:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px; } #wrapper .dc.dc.dc.process__steps:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px; } #wrapper .dc.dc.dc.process__steps:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px; } #wrapper .dc.dc.dc .faq__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: clamp(40px, 7vw, 120px); } #wrapper .dc.dc.dc .faq__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: clamp(40px, 7vw, 120px); } #wrapper .dc.dc.dc.faq__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: clamp(40px, 7vw, 120px); } #wrapper .dc.dc.dc.faq__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: clamp(40px, 7vw, 120px); } #wrapper .dc.dc.dc .footer-call:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 24px 40px; } #wrapper .dc.dc.dc .footer-call:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 24px 40px; } #wrapper .dc.dc.dc.footer-call:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 24px 40px; } #wrapper .dc.dc.dc.footer-call:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 24px 40px; } #wrapper .dc.dc.dc .footer-grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px; } #wrapper .dc.dc.dc .footer-grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px; } #wrapper .dc.dc.dc.footer-grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px; } #wrapper .dc.dc.dc.footer-grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px; } #wrapper .dc.dc.dc .hours:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 4px 16px; } #wrapper .dc.dc.dc .hours:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 4px 16px; } #wrapper .dc.dc.dc.hours:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 4px 16px; } #wrapper .dc.dc.dc.hours:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 4px 16px; } #wrapper .dc.dc.dc .doc__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: clamp(40px, 7vw, 120px); } #wrapper .dc.dc.dc .doc__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: clamp(40px, 7vw, 120px); } #wrapper .dc.dc.dc.doc__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: clamp(40px, 7vw, 120px); } #wrapper .dc.dc.dc.doc__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: clamp(40px, 7vw, 120px); } #wrapper .dc.dc.dc .split__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: clamp(40px, 7vw, 112px); } #wrapper .dc.dc.dc .split__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: clamp(40px, 7vw, 112px); } #wrapper .dc.dc.dc.split__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: clamp(40px, 7vw, 112px); } #wrapper .dc.dc.dc.split__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: clamp(40px, 7vw, 112px); } #wrapper .dc.dc.dc .split__media:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 20px; } #wrapper .dc.dc.dc .split__media:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 20px; } #wrapper .dc.dc.dc.split__media:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 20px; } #wrapper .dc.dc.dc.split__media:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 20px; } #wrapper .dc.dc.dc .gallery__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 20px; } #wrapper .dc.dc.dc .gallery__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 20px; } #wrapper .dc.dc.dc.gallery__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 20px; } #wrapper .dc.dc.dc.gallery__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 20px; } #wrapper .dc.dc.dc .doctors__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 56px 40px; } #wrapper .dc.dc.dc .doctors__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 56px 40px; } #wrapper .dc.dc.dc.doctors__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 56px 40px; } #wrapper .dc.dc.dc.doctors__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 56px 40px; } #wrapper .dc.dc.dc .doctor:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 28px; } #wrapper .dc.dc.dc .doctor:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 28px; } #wrapper .dc.dc.dc.doctor:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 28px; } #wrapper .dc.dc.dc.doctor:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 28px; } #wrapper .dc.dc.dc .staff__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 20px; } #wrapper .dc.dc.dc .staff__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 20px; } #wrapper .dc.dc.dc.staff__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 20px; } #wrapper .dc.dc.dc.staff__grid:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 20px; } #wrapper .dc.dc.dc .info-cols:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px; } #wrapper .dc.dc.dc .info-cols:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px; } #wrapper .dc.dc.dc.info-cols:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px; } #wrapper .dc.dc.dc.info-cols:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px; } #wrapper .dc.dc.dc .termin__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px 80px; } #wrapper .dc.dc.dc .termin__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px 80px; } #wrapper .dc.dc.dc.termin__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px 80px; } #wrapper .dc.dc.dc.termin__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px 80px; } #wrapper .dc.dc.dc .termin__actions:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 12px; } #wrapper .dc.dc.dc .termin__actions:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 12px; } #wrapper .dc.dc.dc.termin__actions:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 12px; } #wrapper .dc.dc.dc.termin__actions:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 12px; } #wrapper .dc.dc.dc .job__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px 80px; } #wrapper .dc.dc.dc .job__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px 80px; } #wrapper .dc.dc.dc.job__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 40px 80px; } #wrapper .dc.dc.dc.job__inner:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 40px 80px; } #wrapper .dc.dc.dc .job__actions:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 12px; } #wrapper .dc.dc.dc .job__actions:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 12px; } #wrapper .dc.dc.dc.job__actions:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:not(:first-child):not(.fusion-text):not(.fusion-title)) { margin-top: 12px; } #wrapper .dc.dc.dc.job__actions:not([class*="ac-zelle-"]) > :where(.fusion-column-wrapper) > :where(:is(.fusion-text, .fusion-title):not(:first-child)) > * { margin-top: 12px; } /* Namensschutz - siehe src/mapping/namensschutz.js. * * Diese Klassennamen kennt Avada ebenfalls. Ohne die folgenden Regeln wirkte Avadas * Fassung auf das Markup der Vorlage, sobald die Vorlage die Eigenschaft offenlaesst. * `revert` stellt den Browserstandard her, nicht Null - Einrueckungen bleiben erhalten. */ #wrapper .dc.dc .gallery:where(:not([class*="fusion-"]):not([class*="awb-"])) { margin: revert; max-width: revert; } #wrapper .dc.dc .ac-eigen.gallery { margin: revert; max-width: revert; } #wrapper .dc.dc.gallery { max-width: revert; } /* ========================================================================== Avada-Brücke — projektunabhängig ========================================================================== Diese Datei enthält KEINE Gestaltung. Sie enthält ausschließlich Regeln, die Avada davon abhalten, das mitgelieferte Design zu überschreiben. Jede Regel steht hier, weil sie an einer echten Avada-Installation nachgemessen wurde — mit der Ursache im Kommentar. Wer eine Zeile löschen will, sollte den Kommentar lesen: dahinter steckt jeweils ein konkreter Fehler. Ausgeliefert wird sie NACH den Designregeln, in derselben Datei. Bewusst ohne `@layer`: geschichtete Regeln verlieren gegen jede ungeschichtete, und Avadas Stylesheet ist ungeschichtet — eine Schicht haette die Bruecke wirkungslos gemacht. `.dc` ist die Seitenklasse, die der Converter an jeden Container schreibt. Sie verengt alles auf die importierten Seiten — auf einer bestehenden Website darf nichts davon nach draußen wirken. ========================================================================== */ /* ---------- 1 · Container = Sektion ---------- Avada speist den seitlichen Innenabstand aus `--awb-padding-left: var(--container_padding_100_left, var(--hundredp_padding))` und legt auf schmalen Fenstern 30 px an. Bringt das Design seinen seitlichen Abstand selbst mit (üblich: auf einer `.wrap`-Ebene), addiert sich beides — gemessen: 50 statt 20 px je Seite, der Inhalt 60 px zu schmal. Die SENKRECHTEN Abstände bleiben unberührt, die kommen aus dem Design. */ .dc.fusion-fullwidth { margin: 0; border: 0; padding-inline: 0; position: relative; } /* Die Fusion-Reihe ist nur Hülle: Breite und Innenabstand macht das Design. * * ZWEI Selektoren, weil der Live Builder um jede Reihe zwei Hüllen legt * (`.fusion-builder-container-content > .fusion_builder_row > .fusion-row`). Mit dem * Kind-Selektor allein galt diese Regel im Builder nicht, Avadas `display: flex` an der Reihe * blieb stehen, und die Vorschau sah anders aus als die Seite. */ .dc > .fusion-row, .dc > .fusion-builder-container-content > .fusion_builder_row > .fusion-row { position: static; display: block; /* `flex-grow` GEHÖRT dazu — und fehlte lange. * * Avada setzt `.fusion-flex-container .fusion-row { flex: 1 1 0% }`. Die Zeile darüber nimmt * das `display: flex` zurück, das `flex: 1 1 0%` blieb aber stehen. Folge: die Reihe bleibt * ein Flex-KIND mit `flex-grow: 1` und wächst auf die volle Innenhöhe ihres Abschnitts. * * Damit bleibt dem Abschnitt kein Freiraum mehr, den sein eigenes `justify-content: center` * verteilen könnte — das Zentrieren läuft ins Leere. Im Kopfbereich der Startseite war die * Reihe dadurch 612px hoch statt 357,94px, und der Inhalt stand genau um den halben * verschluckten Freiraum zu hoch: (612 − 357,94) / 2 = 127,03px. Exakt der gemessene Wert. * * `0 1 auto` ist der Anfangswert, den auch die Vorlage an ihrer Hülle hat. */ flex: 0 1 auto; max-width: none; width: 100%; margin: 0; padding: 0; gap: 0; } /* Clearfix-Pseudoelemente: Das Theme hängt an jede `.fusion-row` zwei davon. In einem Raster zählen sie als eigene Zellen — der erste Eintrag rutscht eine Spalte nach rechts, der letzte fällt in die nächste Zeile. Und nicht nur an `.fusion-row`: Avada setzt dieselbe Regel auf die nackte Klasse `.row` (`.row:after, .row:before { content:" "; display:table }`). Ein Design, das seine Raster `row` nennt — und das ist die verbreitetste Benennung überhaupt — bekommt damit in JEDEM Raster zwei unsichtbare Zellen dazu. Nachgemessen an der FCWB-Startseite: Spielkarte und Sponsorenkasten vertauscht und gestapelt, die dritte News-Karte in eine eigene Zeile geschoben, Spielplan und Tabelle untereinander statt nebeneinander. Alles dieselbe Ursache. */ .dc .fusion-row::before, .dc .fusion-row::after, .dc .row::before, .dc .row::after { content: none; display: none; } /* ---------- 2 · Spalten ---------- Verschachtelte Reihen bekommen `width: calc(100% + 4%)` samt negativer Außenabstände als INLINE-Style — dagegen kommt kein Stylesheet an. Der Wert stammt aus `flex_column_spacing` am Container; der Converter setzt ihn auf 0px. Diese Regel ist die zweite Verteidigungslinie für den Fall, dass er doch einmal gesetzt ist. */ /* Spalten NICHT floaten. Avada floatet seine Spalten nach links. Ein gefloatetes Element ignoriert `margin: auto` — die Raender werden zu 0, und jede Zentrierung faellt aus. Nachgemessen an `.prose`: Maximalbreite 840px korrekt uebernommen, `margin-left: auto` in der Regel vorhanden, berechnet trotzdem 0 — der Text stand linksbuendig bei x=0 statt zentriert bei x=300. Gebraucht wird der Float hier nicht: die Spalten stehen im Flex- bzw. Rasterfluss. */ .dc .fusion-layout-column { float: none; } .dc .fusion-builder-row-inner { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Avada macht den Spalten-Innenkasten zum Flex-Container in Zeilenrichtung. Ein Design, das mit normalem Blockfluss rechnet, stapelt darin seine Knöpfe statt sie nebeneinanderzustellen, und `text-align:center` bleibt wirkungslos. Sechs Klassen, weil Avadas eigener Selektor fünf hat. */ .dc.fusion-flex-container .fusion-row .fusion-layout-column.fusion-flex-column > .fusion-column-wrapper { display: block; width: 100%; min-width: 0; } /* ---------- 3 · Senkrechte Ausrichtung ---------- Avada hängt jeder Reihe `fusion-flex-align-items-flex-start` an und stellt sie über `.fusion-flex-container .fusion-flex-align-items-flex-start` auf `flex-start`. Das ist genauso spezifisch wie eine Designregel mit zwei Klassen — und Avadas Stylesheet lädt später. Ergebnis: Text neben einem Bild steht oben statt auf halber Höhe. Hier wird die Vorgabe zurückgenommen; was das Design sagt, gilt wieder. */ .dc .fusion-row.fusion-flex-align-items-flex-start { align-items: inherit; } /* ---------- 4 · Typografie ---------- Avada formatiert ueber ID-Selektoren (`.fusion-body #wrapper .fusion-title h1`) — eine ID schlaegt jede Klassenkombination. Zusaetzlich rechnet "Responsive Typography" Groesse und Zeilenhoehe auf kleinen Schirmen selbst herunter und schreibt sie inline. Hier steht bewusst KEIN `font-family: inherit` mehr. Das war der erste Versuch und ging nach hinten los: geerbt wird vom naechsten Vorfahren, und der traegt oft die Anzeigeschrift statt der Fliesstextschrift. Nachgemessen sprang die Zahl der falschen Schriftarten dadurch von 15 auf 111. Stattdessen wiederholt der Umschreiber die Typografie-Regeln des DESIGNS auf \#wrapper-Stufe — mit den echten Werten, die er ohnehin kennt (siehe vorlage.js, `typografieVerstaerken`). Hier bleibt nur, was Avada an Struktur draufsetzt. */ /* Der Abstand wird nur dort genullt, wo das Element KEINEN eigenen mitbringt. Bringt der Entwurf einen mit, gibt der Umschreiber ihn dem Element als Parameter mit (siehe treu.js, `titelMargen`) - Avada legt ihn dann als `--awb-margin-*` inline auf die Huelle, und diese Regel darf ihn nicht wieder wegnehmen. */ /* Der Waechter muss auf die DESKTOP-Variable zeigen. `--awb-margin` allein trifft auch die reine Mobil-Fassung `--awb-margin-bottom-small`, die Avada immer schreibt - die Regel waere dann nie aktiv. */ .dc .fusion-title:not([style*="--awb-margin-top:"]) { margin: 0; } .dc .fusion-title { border: 0; text-align: inherit; } .dc .fusion-text { margin: 0; } .dc .fusion-title-heading { margin: 0; padding: 0; } /* Den Abstand aus dem Element-Parameter gegen einen Reset der Vorlage durchsetzen. * * Avada wendet `--awb-margin-top/-bottom` selbst an (`.fusion-body .fusion-title`, (0,2,0)). Ein * Reset der Vorlage auf `*` mit `margin: 0` kommt aber verstärkt an (`#wrapper .dc.dc.dc *`, (1,3,0), * siehe NICHT_VERENGEN in vorlage.js) und nahm jedem Titel den gemessenen Abstand: aprikari FAQ-H2 * 32 → 0, `.pk h4` 20/8 → 0, `.l h3` 16 → 0. Gleich stark wie der Reset und danach geladen; jede * Regel der Vorlage für die Hülle (eine Klasse mehr) gewinnt weiter. Unter 1024/640 px setzt Avada * die Werte ohnehin mit `!important` (title-md/-sm.min.css). * Auch mit nur der unteren Variable: Avada lässt eine Variable weg, deren Wert der Vorgabe gleicht * (treu.js, `titelMargen`). Stellt jemand im Builder oben genau die Vorgabe ein, fehlte sonst die Regel, * und der Reset nahm beide Abstände; `var(--awb-margin-top)` fällt so auf Avadas Vorgabe zurück * (title.css). Nicht `--awb-margin-` allein - `-bottom-small` schreibt Avada immer (Regel oben). */ #wrapper .dc .fusion-title[style*="--awb-margin-top:"], #wrapper .dc .fusion-title[style*="--awb-margin-bottom:"] { margin-top: var(--awb-margin-top); margin-bottom: var(--awb-margin-bottom); } /* Versalien und Laufweite von oben an die Überschrift durchreichen (K5, K16). * * Avada setzt `letter-spacing` und `text-transform` am `h2` ausdrücklich (`.post-content h2`, Global * Options) und unterbricht damit die Vererbung. zentro: 6 von 9 H2 ohne Versalien und mit Avadas * Laufweite −2,34 px, „Unsere Haltung" 491 statt 603 px breit. In der Vorlage erbt die Überschrift * beides, solange keine Regel sie selbst trifft - eine solche Regel (`#wrapper .dc.dc.dc h2`, (1,3,1)) * bleibt stärker als diese. Sitzt die Klasse der Überschrift selbst auf der Hülle, reicht Erben nicht * (`em` rechnet dort mit der Schriftgröße der Hülle); dafür wiederholt der Umschreiber die Schrift am * `` (vorlage.js, titelFassung). */ #wrapper .dc .fusion-title > .fusion-title-heading { text-transform: inherit; letter-spacing: inherit; } /* ---------- 4b · Textfarbe zurück an die Vererbung ---------- Der wichtigste Punkt dieser Datei, und der am wenigsten offensichtliche. Ein Design setzt Textfarbe fast immer AM ABSCHNITT: `.sec--dark { color: #fff }`. Alles darin — Überschrift, Fließtext, Link — erbt sie. Avada dagegen setzt sie AUSDRÜCKLICH auf jedem einzelnen Element: `.fusion-title h1 { color: var(--awb-text-color) }`. Und eine ausdrückliche Angabe schlägt Vererbung IMMER. Nicht wegen höherer Spezifität, sondern weil Vererbung erst greift, wenn gar keine Regel zutrifft. Dagegen hilft kein Verstärker und keine Ladereihenfolge — der einzige Weg ist, Avadas Angabe wieder auf `inherit` zu setzen, damit die Farbe des Abschnitts wieder durchfliegt. Nachgemessen an der FCWB-Startseite: 27 von 39 Elementen hatten die falsche Farbe. Die H1 sollte weiß sein und war Avadas Dunkelgrau — auf schwarzem Grund praktisch unsichtbar. Bringt das Design eine EIGENE Farbe für ein Element mit, gewinnt sie weiterhin: ihre Regel ist um die Seitenklasse verstärkt und damit spezifischer als diese hier. */ #wrapper .dc .fusion-title h1, #wrapper .dc .fusion-title h2, #wrapper .dc .fusion-title h3, #wrapper .dc .fusion-title h4, #wrapper .dc .fusion-title h5, #wrapper .dc .fusion-title h6, #wrapper .dc .fusion-title-heading, #wrapper .dc .fusion-text { color: inherit; } /* Und alles, was IN einem Textblock steht. Im treuen Modus trägt ein Textblock ganze Teilbäume des Designs — Überschriften, Links, Listen. Für sie gilt dasselbe wie oben: Avada setzt Farbe ausdrücklich, das Design vererbt sie. Nachgemessen: zehn Elemente standen weiß im Design und in Avadas Dunkelgrau in WordPress. `:where()` zählt bei der Spezifität NICHT mit. Die Regel bleibt damit auf dem Stand „eine ID, zwei Klassen" und verliert gegen jede Designregel (die trägt drei Klassen) — genau so, wie es sein soll: der Standard weicht, eine Absicht bleibt. */ #wrapper .dc .fusion-text :where(p, li, span, div, strong, em, h1, h2, h3, h4, h5, h6, blockquote, time, small) { color: inherit; } /* Dasselbe für das Markup eines Kartenlayouts: es steht nicht in einem Textblock, sondern im Post-Cards-Element. aprikari Bildkarte: `.post.img .in` setzt Weiß, die Überschrift erbt - in WordPress stand sie in Avadas `h3`-Farbe (`--h3_typography-color`), dunkel auf dem Foto (Fehlerbuch N44). Die Textkarten daneben stimmten nur, weil ihre geerbte Farbe zufällig die der Global Options ist. Gleiche Stärke wie oben: eine Designregel gewinnt. */ #wrapper .dc .fusion-post-cards :where(p, li, span, div, strong, em, h1, h2, h3, h4, h5, h6, blockquote, time, small) { color: inherit; } /* ---------- 6b · Zeilenhöhe und Schriftgröße: derselbe Fall wie die Farbe ---------- Was oben für `color` gilt, gilt Wort für Wort auch für `line-height` und `font-size` — nur ist es dort erst viel später aufgefallen, weil es keine unsichtbare Überschrift erzeugt, sondern Abstände um wenige Pixel verschiebt. Avada setzt beides AUSDRÜCKLICH, und zwar über BLANKE Elementselektoren: h4, .fusion-title h4, .fusion-tb-footer h4, … { line-height: var(--h4_typography-line-height) } :root { --h4_typography-line-height: 1.4 } Ein blanker `h4` trifft jede Überschrift — auch die in rohem Markup. Der Namensschutz kann das nicht abfangen: er kennt Avadas KLASSEN, nicht seine Elementselektoren. Und ein Entwurf schreibt für eine Überschrift meist gar keine Zeilenhöhe hin, weil sie vom Körper geerbt werden soll (`body { line-height: 1.7 }`) — es gibt also nichts, was Avadas Angabe überschreiben könnte. Nachgemessen im Fußbereich: h4 mit 15px Schrift, Vorlage 25,5px Zeilenhöhe (15 × 1,7), WordPress 21px (15 × 1,4). Macht 4,5px je Spaltenkopf. Dasselbe bei den Listen: Avada hängt sie an `--body_typography-font-size` (16px), die Vorlage erbt 17px vom Körper — 1,7px je Zeile, über eine Fußspalte mit fünf Einträgen 8,5px. `:where()` zählt bei der Spezifität nicht mit; die Regel bleibt auf „eine ID, eine Klasse" und verliert gegen jede Designregel. Bringt der Entwurf eine eigene Zeilenhöhe mit, gewinnt sie also weiterhin. */ /* KEINE Regel fuer die Zeilenhoehe von Ueberschriften. * * Hier stand `line-height: inherit`. Das ist nur die halbe Wahrheit: `inherit` nimmt den Wert * des Elternteils, und das stimmt nur, wenn der Entwurf tatsaechlich erbt. Tut er es nicht - * steht seine Ueberschrift also auf `normal` -, macht die Regel sie zu hoch. Gemessen an einer * zweiten Vorlage: sieben Ueberschriften einer Seite 12,5px zu hoch. * * Der gemessene Wert geht stattdessen als `line_height` in das Titel-Element selbst * (treu.js, `titelMargen`). Fuer Ueberschriften in rohem Markup bleibt Avadas Wert stehen - * dort ist bislang keine Abweichung gemessen worden, und ein geratener Standard waere * schlechter als gar keiner. */ #wrapper .dc :where(ul, ol, li, dl, dt, dd) { font-size: inherit; line-height: inherit; } /* Tabellen sind derselbe Fall, nur mit mehr Beiwerk. * * Avada gestaltet Tabellen kräftig aus (`table th`, `td`, `tr` — alles blanke Selektoren, * gespeist aus den Global Options). Ein Entwurf, der seine Tabelle selbst gestaltet, bekommt * davon: eine fremde Zeilenhöhe (16 × 1,538 statt 16 × 1,7 — 2,6px je Zeile, über eine * Tabelle mit fünf Zeilen und Kopf 13,6px), eine fremde senkrechte Ausrichtung (`top`/`bottom` * statt `middle`) und einen 2px-Rahmen unter der Kopfzeile, den es im Entwurf nicht gibt. * * `vertical-align` bekommt `revert` statt `inherit`: der Browserstandard für eine Zelle ist * `middle`, und genau den meint ein Entwurf, der nichts dazu sagt. `inherit` nähme den Wert * der Zeile und wäre damit vom Zufall abhängig. */ #wrapper .dc :where(table, thead, tbody, tfoot, tr, th, td, caption) { font-size: inherit; line-height: inherit; vertical-align: revert; border: revert; } /* Verweise bekommen `revert` statt `inherit`. * * Ein `` hat eine eigene Farbe vom Browser - jenes vertraute Blau. Wo eine Vorlage ihren * Verweisen keine Farbe gibt, ist genau dieses Blau das richtige Ergebnis; `inherit` machte * daraus die Textfarbe und damit etwas anderes als im Entwurf. * * `revert` heisst: so, als gaebe es keine Autorenregel. Avadas Farbe entfaellt, der Standard * des Browsers kehrt zurueck - und wo das Design selbst eine Farbe setzt, gewinnt es ohnehin. * * Nachgemessen an der Schueckhaus-Startseite: zwei Verweise sind im Entwurf blau (0,0,238), * in WordPress standen sie in Avadas Grau. */ #wrapper .dc .fusion-text :where(a) { color: revert; } /* ---------- 5 · Bilder ---------- Avadas Bildrahmen ist ein `` mit eigener Anzeigeart und Zeilenhöhe. */ .dc .fusion-imageframe:not(.ac-eigen) { margin: 0; display: block; max-width: 100%; line-height: 0; } .dc .fusion-imageframe:not(.ac-eigen) img { display: block; width: 100%; height: auto; } /* Traegt der Rahmen die Klassen des Entwurfs (`ac-eigen`), gehoert ihm auch das Bild darin. Ein `width: 100%; height: auto` von uns wuerde dort ein `object-fit: cover` mit festem Seitenverhaeltnis aushebeln - gemessen am Portraet der Profilseite: 577 statt 509px breit. */ .dc .fusion-imageframe.ac-eigen { margin: 0; display: block; } /* Avada gibt JEDEM Bildrahmen `z-index: 1` (fusion-builder image.min.css). Das `` der Vorlage hat keinen - der Rahmen stieg damit über später folgende, positionierte Geschwister: aprikari „Sprechen wir." und das ganze Kontaktformular lagen unter dem abgedunkelten Kontaktbild, eine Bento-Überschrift unter ihrem Bild (Fehlerbuch N45). Einen z-index der Vorlage an der Klasse des Rahmens schlägt diese Regel nicht (dort (1,4,0) gegen (0,2,0)). */ .dc .fusion-imageframe { z-index: auto; } /* Verlinkter Rahmen mit Entwurfsklassen: Avada legt das Bild in ein EIGENES ``. Der Entwurf hatte `` - die Klasse sitzt jetzt auf dem Rahmen, dazwischen steht Avadas Verweis als Block ohne Höhe. `.logo-tile img { height: 62% }` bezog sich damit auf nichts, und die Flex-Zentrierung des Rahmens traf den Verweis statt des Bildes: Logos 74-83 statt 58 px hoch und 16 px zu weit links (Fehlerbuch N8). Der Verweis übernimmt Fläche und Anordnung des Rahmens - er bleibt ein echtes, fokussierbares ``, anders als mit `display: contents`. */ #wrapper .dc .fusion-imageframe.ac-eigen > a { display: flex; flex-direction: inherit; align-items: inherit; justify-content: inherit; width: 100%; height: 100%; } /* Das Bild darin bemisst sich nach den Regeln des Entwurfs. Hier steht bewusst NICHTS: ein `revert` waere zu grob - es verwirft jede Autorenregel, also auch die des Designs. Gemessen am Portraet der Profilseite: 700px (die Dateigroesse) statt 509. Die Regeln der Vorlage treffen das Bild ohnehin, es steht ja unveraendert im Rahmen. */ /* Avadas Rahmen ist ein ``, der Kasten des Entwurfs war ein `
`. Ohne `display: block` bemisst sich das Bild darin nach seiner eigenen Groesse statt nach dem Kasten - gemessen am Portraet der Profilseite: 577 statt 509px. Eine eigene Angabe des Designs gewinnt hier weiterhin, die Regel traegt nur eine Klasse. */ /* ---------- 6 · Knöpfe ---------- Avada färbt Knöpfe über eigene Klassen und setzt einen Verlauf als Hintergrundbild. Beides muss weg, sonst schlägt es die Farben des Designs. */ .dc .fusion-button.button { background-image: none; text-transform: none; } /* Jeder Knopf steckt in einem
ganz ohne Klasse — nicht in `.fusion-button-wrapper`. Damit mehrere Knöpfe einer Zeile nebeneinander stehen und ihre sichtbaren Flächen auf einer Linie liegen (Store-Badges mit transparentem Rand!), brauchen alle Teile dieselbe Ausrichtung und denselben oberen Abstand. */ .dc .fusion-column-wrapper > div:not([class]):not([id]) { display: inline-flex; align-items: center; vertical-align: middle; } /* Bekommt ein Knopf im Builder eine eigene Ausrichtung, schreibt Avada sie als Inline-Style auf seine Hülle. Dann muss die Hülle ein Block bleiben, sonst schrumpft sie auf den Knopf und die Ausrichtung läuft ins Leere. */ .dc .fusion-column-wrapper > div:not([class]):not([id])[style*="text-align"] { display: block; margin-right: 0; } /* In einer Rasterzelle ist die Spaltenhülle durchsichtig, der Knopf der Vorlage ist dort Flex- oder Rasterkind der Zelle. Die klassenlose Knopfhülle stand als `inline-flex`-Kasten dazwischen: `margin-top: auto` und `align-self` des Knopfs wirkten in ihr, nicht in der Zelle - aprikari „Entwurf anfragen" 22 px zu hoch, zentro „Projekt anfragen" 178 statt 589 px breit, weil die Flexspalte die Hülle streckte statt des Knopfs (Fehlerbuch N37). Nicht mit Ausrichtung aus dem Builder (Regel oben): als `contents` hätte die Hülle kein `text-align`, der Knopf bliebe links stehen - die Einstellung wäre sichtbar und wirkungslos (N18). Der Konverter schreibt nie eine (`alignment=""`). */ #wrapper .dc .fusion-layout-column[class*="ac-raster-"] > .fusion-column-wrapper > div:not([class]):not([id]):not([style*="text-align"]) { display: contents; } /* ---------- 6c · Laufbaender (Post Cards im Layout "Marquee") ---------- Das Element traegt die Klassen der Bahn aus der Vorlage (Beschnitt, Maske, Innenabstand) und Avadas Swiper darin. Drei Dinge muessen weichen: · Avadas Slide hat `width: 100%` (swiper.css). Mit `slidesPerView: "auto"` (siehe laufband.js im Plugin) bestimmt die KARTE die Breite - der Slide muss sie durchlassen. · Avada legt um Post Cards einen Aussenabstand (`.fusion-post-cards` margin). Die Bahn der Vorlage hat keinen; ihr Abstand zur Beschriftung kommt aus `.sponsors__lane + …`. · `overflow: hidden` am Swiper-Behaelter wuerde den Hover-Hub der Karte (translateY -5px) beschneiden - die Bahn der Vorlage hat dafuer `padding: 6px 0`, die Regel greift, weil die Klasse mitreist. Avadas eigenes `overflow` darf sie nicht ueberstimmen. */ #wrapper .dc .ac-marquee .swiper-slide { width: auto; flex: none; height: auto; } #wrapper .dc .ac-marquee.fusion-post-cards { margin: 0; } #wrapper .dc .ac-marquee > .swiper-wrapper { align-items: center; } /* ---------- 7 · Zitate ---------- `
` wird zum Testimonial umgestylt: dunkler Grund, farbiger Balken, kursiv. Ein Zitat aus einer Vorlage braucht deshalb einen Reset auf #wrapper-Stufe. */ #wrapper .dc blockquote { background: none; border: 0; padding: 0; font-style: inherit; color: inherit; /* `margin: 0` stand hier — und griff über sein Ziel hinaus. * * Zurückzusetzen ist, was Avada dem Zitat ANTUT: Grund, Rahmen, Innenabstand, Kursive, * Farbe. Der Außenabstand gehört nicht dazu. Entwürfe nehmen `
` gern aus * ihrem eigenen Reset heraus (`h1,h2,h3,h4,p,ul,figure { margin: 0 }` — blockquote fehlt) * und rechnen bewusst mit der Browser-Vorgabe. Auf `verein` waren das 24px unter dem * Zitat; ohne sie schrumpfte der Abstand zur folgenden Überschrift auf deren eigene 14px. * * Ersatzlos streichen wäre ebenso falsch: dann schlägt Avadas eigene Zitat-Marge durch, * gemessen 48px. Gesetzt wird deshalb genau die Browser-Vorgabe, die der Entwurf meint. */ margin: 1em 40px; } /* ---------- 8 · Listen ---------- Hier stand `padding: 0` — und das war falsch. Der Innenabstand einer Liste IST ihr Einzug; ohne ihn rücken die Punkte unter den Text und die Aufzählungszeichen verschwinden aus dem sichtbaren Bereich. Nachgemessen an der Sponsoring-Seite: 15 Listenpunkte 32px zu weit links und 68px zu breit. Zurückgesetzt wird nur der Außenabstand, den Avada zusätzlich anhängt — und auch der nur mit `:where()`, also ohne Spezifität: eine eigene Angabe des Designs gewinnt weiterhin. */ #wrapper .dc .fusion-text :where(ul, ol) { margin-block: 0; } /* ---------- 9 · Seitenrahmen ---------- Avadas `#main` bringt eigene Abstände mit, die vor dem Inhalt sitzen. */ body .dc-seite #main { padding-top: 0; padding-bottom: 0; } /* Leere Absätze, die der Editor hinterlässt, nehmen sonst Höhe ein. */ .dc p:empty { display: none; } /* Avadas Bildhuellen aus dem Layout nehmen. * * `[fusion_imageframe]` schiebt zwei Ebenen zwischen Behaelter und Bild: * `div.fusion-image-element > span.fusion-imageframe > img`. In einem Flex- oder * Rasterbehaelter des Designs wird die aeussere davon zum Element - und weil das Design * seine Bilder ueber `figur img { width: 100% }` bemisst, bezieht sich das Prozent auf eine * Huelle ohne eigene Breite. Ergebnis: alles wird null. * * Nachgemessen an der Sportsbar-Seite: das Foto war 0x0 statt 648x486 Pixel, obwohl die * Datei geladen und 960x720 gross war. * * `display: contents` nimmt die beiden Huellen aus dem Layoutbaum heraus, ohne sie zu * entfernen. Das Bild sitzt damit dort, wo es im Entwurf sitzt. Die Huellen tragen keine * eigene Gestaltung - der Converter setzt `style_type="none" hover_type="none"`. */ #wrapper .dc .fusion-image-element, #wrapper .dc .fusion-imageframe:not(.ac-eigen) { display: contents; } /* Vererbte Schrifteinstellungen Avadas am Rand des Designs abfangen. * * Avada gibt seinen Behaeltern Schrifteigenschaften mit, die sich weitervererben. Was das * Design selbst setzt, gewinnt ohnehin - die Regeln der Vorlage sind staerker. Was es * OFFENLAESST, erbt es dagegen von Avada, ohne dass man es der Vorlage ansieht. * * Nachgemessen an zwei Instanzen derselben Seite: in der einen stand `letter-spacing: normal`, * in der anderen 2,08px - eine Theme-Einstellung, die nur dort gesetzt war. Die * Sponsoring-Seite hatte dadurch zwei Verweise mit 362 statt 299 und 180 statt 147px Breite. * Auf der Vorlage ist dazu nichts zu finden, weil dort schlicht nichts steht. * * Aufgefuehrt sind nur Eigenschaften, die eine Vorlage selten an der Wurzel setzt und Avada * regelmaessig. Schriftart, -groesse, Zeilenhoehe und Farbe stehen bewusst NICHT dabei: die * bringt jedes Design selbst mit, und ein Ruecksetzen brächte nur ein Flackern. * * Die Staerke ist niedrig gewaehlt (eine Klasse), damit jede Regel der Vorlage gewinnt. */ #wrapper .dc { letter-spacing: normal; word-spacing: normal; text-transform: none; font-variant: normal; font-style: normal; } /* Wortumbruch: Avada erlaubt den Bruch MITTEN IM WORT. * * `overflow-wrap: break-word` und `word-break: break-word` stehen in Avadas Grundregeln. Fuer * ein gewoehnliches Layout ist das harmlos - fuer ein RASTER nicht: die Mindestbreite einer * `1fr`-Spalte richtet sich nach dem laengsten unteilbaren Wort ihres Inhalts. Darf das Wort * brechen, schrumpft diese Mindestbreite auf ein einzelnes Zeichen, und das Raster teilt sich * voellig anders auf. * * Nachgemessen am Kennzahlenband der Sponsoring-Seite bei 390px: die Vorlage teilt * 143,6 / 207,2 - das Wort "Vereinsmitglieder" bleibt ganz und schiebt seine Spalte auf. * Avada teilt 175 / 175 und bricht das Wort um. Die Zellen wurden dadurch 50px flacher, der * Abschnitt 70,8px kuerzer. * * Zurueckgesetzt wird auf `normal` - den Wert, den ein Entwurf meint, der nichts dazu sagt. * `:where()` haelt die Staerke niedrig; eine eigene Angabe der Vorlage gewinnt weiterhin. */ * * NUR AM ABSCHNITT, nicht an jedem Element. Der erste Anlauf schrieb * `#wrapper .dc :where(*)` - und blockierte damit die Vererbung: eine ausdrueckliche Angabe * am Element schlaegt einen geerbten Wert immer, egal wie schwach sie ist (derselbe * Zusammenhang wie bei der Textfarbe, siehe Abschnitt 6). Eine Vorlage, die * `body { overflow-wrap: break-word }` setzt, verlor dadurch ihre eigene Angabe. */ #wrapper .dc { overflow-wrap: normal; word-break: normal; } /* Unsere eigenen Textbloecke aus dem Layout nehmen. * * Im treuen Modus ist `[fusion_text]` nur ein Behaelter, um uebernommenes Markup durch den * Builder zu reichen - im Entwurf gibt es ihn nicht. Solange er als Block dazwischenliegt, * sind die Elemente des Designs keine Flex- oder Rasterkinder mehr. * * Nachgemessen am Schueckhaus-Fussbereich: die Verweise stehen dort in einer Flex-Spalte und * fuellen deren 371px. Mit dem Textblock dazwischen blieben sie inline und waren 27 bis 117px * breit - jede Zeile unterschiedlich lang statt buendig. * * `display: contents` entfernt den Behaelter aus dem Layoutbaum, nicht aus dem Dokument: im * Builder bleibt er anfassbar, im Layout ist er nicht mehr da. Nur unsere eigenen Bloecke * (`ac-roh`) sind betroffen; von Hand angelegte Textelemente bleiben, wie sie sind. */ #wrapper .dc .fusion-text.ac-roh { display: contents; } /* Das Kastenmodell fuer das Markup des Designs auf den Browserstandard zuruecksetzen. * * WordPress-Themes setzen `* { box-sizing: border-box }` - eine Maximalbreite schliesst den * Innenabstand dann ein. Vorlagen, die das nicht selbst tun, rechnen nach dem Standard des * Browsers: der Innenabstand kommt oben drauf. * * Nachgemessen an der Schueckhaus-Vorlage: ein Kasten mit `max-width: 1240px` und zweimal * 86,4px Innenabstand ist im Entwurf 1413px breit, unter Avada nur 1240 - der Text stand * 86px zu weit rechts. * * `revert` heisst: als gaebe es keine Autorenregel. Setzt das Design selbst `border-box` * (die meisten tun das in ihrem Reset), gewinnt es - seine Regeln sind staerker. Gesagt wird * hier also nur: Avadas Vorgabe gilt fuer das Design nicht. * * Ausgenommen sind Avadas eigene Bausteine; die brauchen ihr `border-box`. */ #wrapper .dc :where(:not([class*="fusion-"]):not([class*="awb-"]):not(.dc)) { box-sizing: revert; } /* Avadas Kopf-Huelle aus dem Layout nehmen, damit eine feststehende Kopfleiste stehen bleibt. * * Der Theme-Builder rendert den Kopf in einem fest einprogrammierten * `
`. Der ist `position: static` und exakt so hoch wie sein * einziges Kind - der Container mit der Kopfleiste des Entwurfs. * * Genau daran scheitert `position: sticky`: ein klebender Kasten kann seinen Elternkasten nie * verlassen. Ist der Elternkasten so hoch wie er selbst, ist der Klebebereich null Pixel lang, * und die Kopfleiste scrollt sofort mit weg. In der Vorlage ist der Elternkasten der `body` - * dort sind es ueber 5000px. * * Die Angabe der Vorlage kommt uebrigens vollstaendig an (gemessen: `position: sticky`, * `top: 0`, `z-index: 100` am Container). Sie kann nur nichts ausrichten. `display: contents` * nimmt die Huelle aus dem Layoutbaum, ohne sie zu entfernen - der Container haengt dann * direkt unter `#wrapper`, und die Regel wirkt. * * Nachgemessen ueber drei Seiten mit zusammen 1492 Elementen: es aendert sich GENAU EIN * Kasten, die Huelle selbst. Jedes andere Element steht auf den Pixel gleich. */ #wrapper .fusion-tb-header:has(> .dc) { display: contents; } /* Avadas Knopf-Huellen aus dem Layout nehmen. * * `[fusion_button]` baut `
* …
`. Im Entwurf gibt es diese beiden * Huellen nicht: dort ist das `` unmittelbares Flex-Kind seiner Reihe, und Beschriftung und * Pfeil sind seine unmittelbaren Kinder. * * Bleiben die Huellen stehen, wird die aeussere zum Flex-Kind (der Knopf sitzt dann falsch in * der Reihe) und der Pfeil rutscht eine Ebene tiefer, wo `.btn { gap }` ihn nicht mehr * erreicht. * * `display: contents` nimmt sie aus dem Layoutbaum, ohne sie zu entfernen - im Builder bleibt * der Knopf ein Knopf. */ #wrapper .dc .fusion-button-wrapper, #wrapper .dc .fusion-button > .fusion-button-text { display: contents; } /* `display: contents` nimmt der Beschriftungs-Huelle zwar den Kasten, nicht aber ihre * Stilwerte: Avada faerbt sie (`.fusion-button-text { color: … }`), und der Text darin erbt * diese Farbe - bei den Filter-Chips einer Vorlage stand cremefarbene Schrift auf cremefarbenem * Grund. Die Beschriftung muss vom Knopf erben, den die Vorlage gestaltet. */ #wrapper .dc .fusion-button > .fusion-button-text { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; } /* ---------- Einstellungen aus dem Builder gehen vor ---------- * * Wer im Live Builder einer Überschrift, einem Textblock oder einem Knopf eine Farbe gibt, * erwartet sie zu sehen. Avada schreibt die Einstellung als Variable an das Element * (`style="--awb-text-color:#…"`, beim Knopf `--button_gradient_top_color`, * `--button_accent_color`) - und die Regeln der Vorlage, auf `#wrapper .dc.dc.dc` verstärkt, * gewannen trotzdem: die Einstellung blieb wirkungslos (Fehlerbuch N18). * * Die Regeln greifen NUR, wenn die Variable am Element steht, also nur bei einer ausdrücklichen * Einstellung. Ohne sie bleibt die Vorlage maßgeblich. Der Konverter selbst setzt diese * Parameter nicht. `!important`, weil die Vorlage beliebig spezifisch sein darf; der Hover- * und Fokus-Zustand des Knopfes bleibt bei der Vorlage (Avada füllt die Hover-Variablen mit * eigenen Vorgaben, die wären keine Einstellung des Nutzers). */ #wrapper .dc .fusion-title[style*="--awb-text-color:"] .fusion-title-heading, #wrapper .dc .fusion-title[style*="--awb-text-color:"] .fusion-title-heading * { color: var(--awb-text-color) !important; } #wrapper .dc .fusion-text[style*="--awb-text-color:"], #wrapper .dc .fusion-text[style*="--awb-text-color:"] :is(p, li, span, strong, em, b, i, h1, h2, h3, h4, h5, h6) { color: var(--awb-text-color) !important; } #wrapper .dc .fusion-button[style*="--button_gradient_top_color:"]:not(:hover):not(:focus-visible) { background: var(--button_gradient_top_color) !important; border-color: var(--button_gradient_top_color) !important; } #wrapper .dc .fusion-button[style*="--button_accent_color:"]:not(:hover):not(:focus-visible), #wrapper .dc .fusion-button[style*="--button_accent_color:"]:not(:hover):not(:focus-visible) .fusion-button-text { color: var(--button_accent_color) !important; } /* ---------- Live Builder: seine Hüllen um Reihen durchlässig ---------- * * Im Vorschau-Fenster legt der Builder um die Reihen eines Containers zwei Hüllen * (`.fusion-builder-container-content > .fusion_builder_row`) und macht beide zum Zeilen-Flex * (`.fusion-builder-live .fusion-builder-container .fusion-flex-container …`, vier Klassen). Die * Vorlage ordnet ihre Sektion aber selbst (Hero: Spalte, zentriert) und erwartet die Reihen als * direkte Kinder. Mit Dekorationsreihe (M5) standen Dekoration und Inhalt deshalb NEBENEINANDER: * auf jeder Seite Hero-Titel und -Text bei x = 778 statt 58, 435 statt 860 px breit, Hero-Bilder * halb so breit - gemessen mit builder.mjs, 215 von 573 Elementen (Fehlerbuch N21). * `display: contents` macht die Reihen im Builder wieder zu Kindern der Sektion; stärker als die * Builder-Regel, und nur im Vorschau-Fenster (`.fusion-builder-live`). */ .fusion-builder-live .fusion-builder-container .dc.fusion-flex-container > .fusion-builder-container-content, .fusion-builder-live .fusion-builder-container .dc.fusion-flex-container > .fusion-builder-container-content > .fusion_builder_row { display: contents; } /* Dasselbe eine Ebene tiefer: in einer Dekorationsspalte (`ac-deko-…`, M5) umgibt der Builder * jedes Element mit `.fusion-builder-live-element` (position: relative, eigener Kasten). Das * absolut gesetzte Hero-Bild (`.hero__media { inset: 0 }`) nahm diesen 0 px hohen Kasten als * Bezugsrahmen und war im Builder unsichtbar (Höhe 0 statt 579 px, N21). */ .fusion-builder-live .dc .fusion-layout-column[class*="ac-deko-"] :is(.fusion-builder-column-content, .fusion-builder-live-element, .fusion-element-content) { display: contents; } /* Dasselbe in jeder Rasterzelle (Fehlerbuch N37). Auf der Seite ist die Spaltenhülle der Zelle durchsichtig, die Bausteine * sind Flex- oder Rasterkinder der Zelle. Im Builder liegen zwischen Hülle und Baustein drei weitere Kästen: der * Spalteninhalt (Flexspalte), das Element (`position: relative`) und sein Inhaltskasten. Gemessen mit builder.mjs: * marby `.pics`-Bilder 1146 statt 589 px breit (untereinander statt nebeneinander), zentro Absätze der Bento-Kacheln bei * x 413 statt 123 (`margin-left: auto` im Block), aprikari Bento-Bild 0 px hoch und Stimmen-Logo 24 px versetzt (das * Element war Bezugsrahmen). Die Bedienleiste eines Elements erscheint dann an der Zelle - sie bleibt bedienbar. */ .fusion-builder-live .dc .fusion-layout-column[class*="ac-raster-"] > .fusion-column-wrapper > .fusion-builder-column-content, .fusion-builder-live .dc .fusion-layout-column[class*="ac-raster-"] > .fusion-column-wrapper > .fusion-builder-column-content > .fusion-builder-live-element, .fusion-builder-live .dc .fusion-layout-column[class*="ac-raster-"] > .fusion-column-wrapper > .fusion-builder-column-content > .fusion-builder-live-element > .fusion-builder-element-content, .fusion-builder-live .dc .fusion-layout-column[class*="ac-raster-"] > .fusion-column-wrapper > .fusion-builder-column-content > .fusion-builder-live-element > .fusion-builder-element-content > div:not([class]):not([id]):not([style*="text-align"]) { display: contents; } /* Ein Baustein, der in der Vorlage absolut steht (`ac-ebene`, treu.js): Elementhülle und Spaltenhülle des Builders sind * `position: relative` und würden sein Bezugsrahmen - auf der Seite ist es die Spalte. Nur diese beiden, nur hier. */ .fusion-builder-live .dc .fusion-builder-live-element:has(> .fusion-builder-element-content > .ac-ebene, > .fusion-builder-element-content > .fusion-image-element > .ac-ebene), .fusion-builder-live .dc .fusion-column-wrapper:has(> .fusion-builder-column-content > .fusion-builder-live-element > .fusion-builder-element-content :is(.ac-ebene)) { position: static; } /* Die Bedienkästen des Builders sind keine Kinder der Vorlage (Fehlerbuch N43). * * Im Vorschau-Fenster legt Avada Kästen dazu, die es auf der Seite nicht gibt (front-end-column.php, nested-column.php, * front-end-container.php, front-end-row.php, nested-row.php): in jede Spalte `.fusion-column-spacers` (in der Hülle), * `.fusion-column-margins` und `.fusion-column-styles-holder`, in jeden Container `.clearfix`, `.fusion-spacing-wrapper` und * den Rahmen der Container-Werkzeuge, in jede Reihe vorn den leeren Platzhalter `span.fusion-builder-empty-container`. * In einer Block-Spalte stehen sie 0 px hoch am Ende und stören nicht. Ist die Spalte aber selbst der Flex- oder * Rasterbehälter der Vorlage (Rasterzelle, durchsichtige Sektion, deren Hüllen oben `contents` werden), ist jeder ein * Kind mehr: marby `.pics` (Flex, `gap: 16px`) hatte drei zusätzliche Abstände, 48 px zu wenig Platz, die Bilder * schrumpften 210 → 188 und 240 → 214 px; im Kopf von index-v1 (`space-between`) standen sechs Kinder statt zwei, das * Logo 58 statt 85 px breit. Den Platzhalter blendet Avada mit (0,2,0) aus - eine Regel der Vorlage für alle Kinder * (`.bento > *`, verstärkt (1,4,0)) machte ihn zur Karte: zentro Bento und „Klare Konditionen" bekamen vorn eine leere * Zelle, jede Karte rückte eine Zelle weiter. * * `!important`, weil diese Kästen Bedienung sind und nie Gestaltung - auch eine Regel der Vorlage wie `.hero > *` mit * `position: relative` darf sie nicht zurück in den Fluss holen. Abstands- und Randgriffe nicht ausblenden: Avada zeigt sie beim * Bearbeiten einer Spalte oder eines Containers als Ziehgriffe. Absolut über die ganze Fläche bleibt ihr Bezugsrahmen, was * er vorher war (Hülle bzw. Spalte bzw. Container); `pointer-events: none` lässt die Fläche klickdurchlässig, die Griffe * setzen selbst `pointer-events: auto` und sind nur beim Bearbeiten sichtbar. Der Rahmen der Container-Werkzeuge wird bei * `:hover` ohnehin absolut (preview.css) - hier immer, sonst springt eine Flex-Sektion beim Überfahren. `