/** * Header & Footer – FOKUS auf FOKUS * * Werte 1:1 aus den bisherigen Elementor-Templates 808 (Header) und 816 (Footer) * übernommen, inklusive der globalen Farben/Typografie des Elementor-Kits. */ :root { --ff-white: #ffffff; --ff-white-soft: #ffffffd4; --ff-white-line: #ffffff45; --ff-blue: #006ba6; /* secondary */ --ff-blue-light: #0496ff; /* primary */ --ff-blue-dark: #004d86; /* Topbar */ --ff-blue-current: #75aada; --ff-yellow: #ffbc42; --ff-ink: #383838; /* accent */ --ff-font-head: "Epilogue", sans-serif; --ff-font-body: "Archivo", sans-serif; --ff-max: 1320px; --ff-bp-tablet: 1024px; --ff-bp-mobile: 767px; } /* ---------------------------------------------------------------- Basis */ .ff-container { max-width: var(--ff-max); margin-inline: auto; width: 100%; } .ff-icon { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; } .ff-header a, .ff-footer a { text-decoration: none; } .ff-header ul, .ff-footer ul { list-style: none; margin: 0; padding: 0; } /* -------------------------------------------------------------- Topbar */ .ff-topbar { background-color: var(--ff-blue-dark); padding: 15px 30px; } .ff-topbar__inner { display: flex; align-items: center; } .ff-topbar__contact { display: flex; align-items: center; flex-wrap: wrap; margin-inline: -25px; } .ff-topbar__contact > li { margin-inline: 25px; } .ff-topbar__contact a { display: flex; align-items: center; gap: 7px; color: var(--ff-white-soft); font-family: var(--ff-font-body); font-size: 15px; font-weight: 400; line-height: 1.5em; transition: color .3s; } .ff-topbar__contact .ff-icon { fill: var(--ff-white); } .ff-topbar__contact a:hover { color: var(--ff-yellow); } /* Im Original nur auf dem Desktop sichtbar. */ @media (max-width: 1024px) { .ff-topbar { display: none; } } /* ------------------------------------------------------------ Hauptbar */ /* * Voraussetzung für den klebenden Header: * html und body dürfen kein overflow-x gesetzt haben – sonst klebt der * Header am Dokument statt am Fenster. Das seitliche Überstehen * (Karussell-Pfeile, Bewertungs-Slider) wird stattdessen dort beschnitten, * wo es entsteht: im Inhalt und im Footer. */ html:root, body[class] { overflow-x: visible; } .site-main, .ff-footer { overflow-x: clip; } /* * Klebender Header. * * Wichtig: position:sticky wirkt nur innerhalb des Elternelements. Läge es * auf .ff-bar, könnte die Leiste nur innerhalb von .ff-header (rund 137 px) * wandern – also praktisch gar nicht. Deshalb klebt der gesamte Header; * sein Elternelement ist und damit die ganze Seite. * * Der negative Wert auf dem Desktop schiebt die schmale Kontaktleiste beim * Scrollen aus dem Bild, während die Hauptleiste stehen bleibt. */ .ff-header { position: sticky; top: 0; z-index: 50; } @media (min-width: 1025px) { .ff-header { top: calc(-1 * var(--ff-topbar-h, 53px)); } } .ff-bar { background-color: var(--ff-white); box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .05); padding: 0 30px; position: relative; z-index: 1; } /* Platz für die WordPress-Adminleiste. */ body.admin-bar .ff-header { top: 32px; } @media (min-width: 1025px) { body.admin-bar .ff-header { top: calc(32px - var(--ff-topbar-h, 53px)); } } @media (max-width: 782px) { body.admin-bar .ff-header { top: 46px; } } /* * Schnellzugriff (Termin + Anruf), nur mobil zwischen Logo und Menü. * Größen wachsen mit der Bildschirmbreite mit – auf schmalen Handys * kleiner, damit Logo, Icons und Menü nebeneinander passen. */ .ff-quick { display: none; align-items: center; gap: clamp(6px, 1.8vw, 10px); margin-inline-start: auto; margin-inline-end: clamp(6px, 1.8vw, 10px); flex: 0 0 auto; } .ff-call { display: flex; align-items: center; justify-content: center; width: clamp(38px, 10.5vw, 46px); height: clamp(38px, 10.5vw, 46px); flex: 0 0 auto; border-radius: 50%; background-color: var(--ff-blue); position: relative; box-shadow: 0 4px 14px rgba(0, 107, 166, .35); } /* * Höhere Spezifität als die globale .ff-icon-Regel: das Symbol im farbigen * Kreis muss weiß sein, nicht in der Textfarbe des Themes. */ .ff-header a.ff-call .ff-icon { width: clamp(16px, 4.4vw, 20px); height: clamp(16px, 4.4vw, 20px); fill: #ffffff; color: #ffffff; position: relative; z-index: 1; } .ff-bar__inner { display: flex; align-items: center; } .ff-bar__logo { width: 20%; flex: 0 0 auto; } .ff-bar__logo img { width: 32%; height: auto; display: block; } .ff-bar__sitename { font-family: var(--ff-font-head); font-weight: 700; color: var(--ff-ink); } .ff-bar__nav { width: 51.332%; flex: 0 0 auto; } .ff-bar__actions { width: 28%; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: 10px; } @media (max-width: 1024px) { .ff-bar { padding: 15px; } .ff-bar__logo { width: auto; } .ff-bar__logo img { width: auto; max-height: clamp(42px, 12vw, 58px); } .ff-quick { display: flex; } .ff-bar__nav { width: auto; display: flex; justify-content: flex-end; } .ff-bar__actions { display: none; } } /* --------------------------------------------------------------- Menü */ .ff-nav { height: 80px; } .ff-menu { display: flex; align-items: center; justify-content: center; height: 100%; } .ff-menu > li { position: relative; display: flex; align-items: stretch; height: 100%; margin: 0 18px; } .ff-menu > li > a { display: flex; align-items: center; height: 100%; gap: 6px; font-family: var(--ff-font-body); font-size: 13px; font-weight: 500; text-transform: uppercase; line-height: 1.3em; letter-spacing: .5px; color: var(--ff-ink); border-bottom: 2px solid transparent; padding: 0; transition: color .3s, border-color .3s; } .ff-menu > li > a:hover, .ff-menu > li > a:focus { color: var(--ff-blue); border-bottom-color: var(--ff-yellow); } .ff-menu > li.current-menu-item > a, .ff-menu > li.current-menu-ancestor > a, .ff-menu > li.current_page_item > a { color: var(--ff-blue-current); border-bottom-color: var(--ff-blue-current); } /* Plus-Zeichen bei Untermenüs (wie bisher das ElementsKit-Icon). */ .ff-menu .menu-item-has-children > a::after { content: "+"; font-size: 15px; font-weight: 400; line-height: 1; color: var(--ff-yellow); transition: color .3s; } .ff-menu .menu-item-has-children:hover > a::after, .ff-menu .menu-item-has-children > a:focus::after { color: var(--ff-blue); } /* Dropdown */ .ff-menu .sub-menu { position: absolute; top: 100%; inset-inline-start: 0; min-width: 260px; background-color: var(--ff-blue); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s; z-index: 30; } .ff-menu > li:hover > .sub-menu, .ff-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .ff-menu .sub-menu > li > a { display: block; background-color: var(--ff-blue); font-family: var(--ff-font-body); font-size: 13px; font-weight: 500; text-transform: uppercase; line-height: 1.3em; letter-spacing: .5px; padding: 25px; color: var(--ff-white); transition: background-color .3s, color .3s; } .ff-menu .sub-menu > li > a:hover, .ff-menu .sub-menu > li > a:focus, .ff-menu .sub-menu > li.current-menu-item > a { background-color: var(--ff-white); color: var(--ff-blue); } /* ----------------------------------------------------------- Hamburger */ /* Höhere Spezifität, sonst greift das Button-Styling des Elementor-Kits. */ .ff-header button.ff-burger { display: none; width: clamp(40px, 11vw, 48px); height: clamp(40px, 11vw, 48px); padding: 0; border: 0; border-radius: 12px; background-color: transparent; color: var(--ff-blue); cursor: pointer; transition: background-color .25s; -webkit-tap-highlight-color: transparent; } .ff-header button.ff-burger:hover, .ff-header button.ff-burger:focus-visible { background-color: rgba(0, 107, 166, .08); } .ff-burger span { display: block; width: 24px; height: 2px; margin: 5px auto; border-radius: 2px; background-color: currentColor; transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s; } /* Hamburger wird beim Öffnen zum X. */ .ff-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ff-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .ff-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .ff-nav__head { display: none; align-items: center; justify-content: space-between; padding: 20px 4px 16px; border-bottom: 1px solid rgba(0, 0, 0, .08); } .ff-nav__logo img { max-width: 84px; height: auto; display: block; } .ff-header button.ff-nav__close { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background-color: rgba(0, 107, 166, .08); color: var(--ff-blue); cursor: pointer; position: relative; flex: 0 0 auto; } .ff-nav__close span { position: absolute; top: 50%; left: 50%; width: 18px; height: 2.5px; border-radius: 2px; background-color: currentColor; } .ff-nav__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .ff-nav__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); } .ff-nav__cta { display: none; } .ff-nav-overlay { display: none; } /* ------------------------------------------------- Mobiles Menü ≤1024px */ @media (max-width: 1024px) { .ff-header button.ff-burger { display: block; } /* Off-Canvas-Panel: kommt von rechts, gut mit dem Daumen erreichbar. */ .ff-nav { position: fixed; top: 0; inset-inline-end: 0; inset-inline-start: auto; height: 100%; height: 100dvh; width: min(360px, 88vw); max-width: none; display: flex; flex-direction: column; background-color: var(--ff-white); padding: 0 20px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; box-shadow: -12px 0 40px rgba(0, 0, 0, .18); transform: translateX(105%); transition: transform .35s cubic-bezier(.4, 0, .2, 1); z-index: 100; } .ff-nav.is-open { transform: translateX(0); } .ff-nav__head { display: flex; position: sticky; top: 0; background-color: var(--ff-white); z-index: 2; } .ff-menu { display: block; height: auto; padding: 8px 0 0; } .ff-menu > li { display: block; height: auto; margin: 0; border-bottom: 1px solid rgba(0, 0, 0, .06); } /* Große, gut treffbare Flächen (min. 52 px). */ .ff-menu > li > a, .ff-menu .sub-menu > li > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 14px 4px; color: var(--ff-ink); font-size: 15px; letter-spacing: .3px; border-bottom: 0; border-radius: 8px; transition: color .2s, background-color .2s; } .ff-menu > li > a:hover, .ff-menu > li > a:focus-visible { color: var(--ff-blue); background-color: rgba(0, 107, 166, .05); } .ff-menu > li.current-menu-item > a, .ff-menu > li.current_page_item > a, .ff-menu > li.current-menu-ancestor > a { color: var(--ff-blue); } /* Auf-/Zuklappen der Untermenüs mit weichem Übergang. */ .ff-menu .menu-item-has-children > a::after { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid var(--ff-blue); border-bottom: 2px solid var(--ff-blue); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s; } .ff-menu > li.is-open > a::after { transform: rotate(225deg) translate(-2px, -2px); } .ff-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; background: none; display: block; max-height: 0; overflow: hidden; transition: max-height .35s ease; padding: 0 0 0 12px; border-inline-start: 2px solid rgba(0, 107, 166, .15); margin: 0; } .ff-menu > li.is-open > .sub-menu { max-height: 600px; margin: 0 0 6px; } .ff-menu .sub-menu > li { min-height: 0; } .ff-menu .sub-menu > li > a { background: none; min-height: 48px; padding: 12px 4px; font-size: 14px; text-transform: none; letter-spacing: 0; color: #5a5a5a; } .ff-menu .sub-menu > li > a:hover, .ff-menu .sub-menu > li > a:focus-visible, .ff-menu .sub-menu > li.current-menu-item > a { background-color: rgba(0, 107, 166, .05); color: var(--ff-blue); } /* Kontaktmöglichkeiten direkt im Menü – auf dem Handy sonst nicht erreichbar. */ .ff-nav__cta { display: block; margin-top: auto; padding-top: 24px; } .ff-nav__cta .ff-btn--solid { display: flex; justify-content: center; width: 100%; padding: 15px 24px; } .ff-nav__tel, .ff-nav__mail { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 4px; color: var(--ff-ink); font-size: 15px; } .ff-nav__tel .ff-icon, .ff-nav__mail .ff-icon { width: 16px; height: 16px; fill: var(--ff-blue); } .ff-nav__tel:hover, .ff-nav__mail:hover { color: var(--ff-blue); } .ff-nav-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px); opacity: 1; transition: opacity .3s; z-index: 90; } .ff-nav-overlay[hidden] { display: none; } } @media (prefers-reduced-motion: reduce) { .ff-nav, .ff-menu .sub-menu, .ff-burger span { transition: none; } } /* ------------------------------------------------------------ Buttons */ .ff-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-font-body); font-size: 13px; font-weight: 500; text-transform: uppercase; line-height: 1.3em; letter-spacing: .5px; padding: 16px 35px; border: 0; border-radius: 30px; transition: color .3s, background-color .3s, transform .3s; white-space: nowrap; } .ff-btn:hover, .ff-btn:focus { transform: translateY(-8px); } .ff-btn--ghost { background-color: transparent; color: var(--ff-ink); } .ff-btn--ghost .ff-icon { fill: var(--ff-ink); transition: fill .3s; } .ff-btn--ghost:hover, .ff-btn--ghost:focus { color: var(--ff-blue-current); } .ff-btn--ghost:hover .ff-icon, .ff-btn--ghost:focus .ff-icon { fill: var(--ff-blue-current); } /* * Höhere Spezifität als das Elementor-Kit, das global * `button` und `a` einfärbt – sonst gewinnt dessen Blau. */ a.ff-btn.ff-btn--solid, button.ff-btn.ff-btn--solid { background-color: var(--ff-blue); color: var(--ff-white); border: 0; cursor: pointer; } a.ff-btn.ff-btn--solid:hover, a.ff-btn.ff-btn--solid:focus, button.ff-btn.ff-btn--solid:hover, button.ff-btn.ff-btn--solid:focus { background-color: var(--ff-blue-light); color: var(--ff-white); } /* ------------------------------------------------------------- Footer */ .ff-footer { background-color: var(--ff-blue); padding: 100px 30px 30px; font-family: var(--ff-font-body); } .ff-footer__cols { display: flex; flex-wrap: wrap; margin-inline: -10px; } .ff-footer__col { width: 25%; padding-inline: 10px; box-sizing: border-box; } .ff-footer__col:nth-child(4) { width: 24.753%; } /* * Im Elementor-Original hatten die Spalten Innenabstände in Prozent * (Logo: margin-right 27 %, übrige: margin-left 15 %) – bezogen auf die * Spaltenbreite. Deshalb hier auf dem Inhalt, nicht auf der Spalte. */ .ff-footer__col--logo img { width: 73%; max-width: 100%; height: auto; display: block; } .ff-footer__col:not(.ff-footer__col--logo) > * { margin-inline-start: 15%; } .ff-footer h4 { margin: 0 0 20px; color: var(--ff-white); font-family: var(--ff-font-head); font-size: 25px; font-weight: 700; text-transform: capitalize; line-height: 1.3em; } .ff-links > li:not(:first-child) { margin-block-start: 7.5px; } .ff-links > li:not(:last-child) { padding-block-end: 7.5px; } .ff-links a { display: flex; align-items: flex-start; gap: 15px; color: var(--ff-white-soft); font-family: var(--ff-font-body); font-size: 17px; font-weight: 400; line-height: 1.5em; transition: color .3s; } .ff-links .ff-icon--caret { width: 8px; height: 20px; fill: var(--ff-white); } .ff-links a:hover, .ff-links a:focus { color: var(--ff-yellow); } /* Blöcke unterhalb der Spalten (Bewertungen, Copyright) */ .ff-footer__block { border-top: 1px dashed var(--ff-white-line); margin-top: 60px; padding-top: 30px; } .ff-footer__reviews { background-color: #ffffffe0; padding: 10px; } .ff-footer__bottom { display: flex; align-items: center; } .ff-footer__copy { width: 50%; font-family: var(--ff-font-body); font-size: 13px; font-weight: 500; text-transform: uppercase; line-height: 1.3em; letter-spacing: .5px; color: var(--ff-white); } @media (max-width: 1024px) { .ff-footer { padding: 50px 15px 30px; } .ff-footer__col, .ff-footer__col:nth-child(4) { width: 100%; } .ff-footer__col:not(.ff-footer__col--logo) > * { margin-inline-start: 0; } .ff-footer__col--logo img { width: 35%; } .ff-footer__bottom { display: block; } .ff-footer__copy { display: block; width: 100%; text-align: center; } } @media (max-width: 767px) { .ff-footer__col--logo img { width: 55%; } } /* ========================================================================== Farbkorrekturen gegen das Elementor-Kit Das Kit färbt global "a" ein. Diese Regeln stehen bewusst am Dateiende und mit höherer Spezifität, damit Header und Footer ihre Farben behalten – auch wenn Elementor Pro später deaktiviert wird. ========================================================================== */ .ff-header .ff-topbar__contact a { color: var(--ff-white-soft); } .ff-header .ff-topbar__contact a:hover { color: var(--ff-yellow); } .ff-header .ff-menu > li > a { color: var(--ff-ink); } .ff-header .ff-menu > li > a:hover, .ff-header .ff-menu > li > a:focus { color: var(--ff-blue); } .ff-header .ff-menu > li.current-menu-item > a, .ff-header .ff-menu > li.current-menu-ancestor > a, .ff-header .ff-menu > li.current_page_item > a { color: var(--ff-blue-current); } .ff-header .ff-menu .sub-menu > li > a { color: var(--ff-white); } .ff-header .ff-menu .sub-menu > li > a:hover, .ff-header .ff-menu .sub-menu > li > a:focus { color: var(--ff-blue); } .ff-footer .ff-links a { color: var(--ff-white-soft); } .ff-footer .ff-links a:hover, .ff-footer .ff-links a:focus { color: var(--ff-yellow); } .ff-footer .ff-footer__copy { color: var(--ff-white); } /* ========================================================================== Schnellzugriffe im geöffneten Menü ========================================================================== */ .ff-nav__quick { display: none; flex-direction: column; gap: 10px; margin-bottom: 14px; } /* * Gleiche Form wie alle anderen Handlungsknöpfe der Seite: * Pille, Versalien, Symbol neben dem Text. */ .ff-header a.ff-nav__quick-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 14px 24px; border-radius: 30px; font-family: var(--ff-font-body); font-size: 13px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; line-height: 1.3; text-align: center; transition: transform .2s, box-shadow .2s, background-color .2s; } .ff-header a.ff-nav__quick-btn:hover, .ff-header a.ff-nav__quick-btn:focus-visible { transform: translateY(-2px); } .ff-header a.ff-nav__quick-btn--book { background-color: var(--ff-yellow); color: var(--ff-blue-dark); box-shadow: 0 10px 22px -14px rgba(255, 188, 66, .9); } .ff-header a.ff-nav__quick-btn--book .ff-icon { fill: var(--ff-blue-dark); } .ff-header a.ff-nav__quick-btn--call { background-color: transparent; color: var(--ff-blue); box-shadow: inset 0 0 0 2px var(--ff-blue); } .ff-header a.ff-nav__quick-btn--call:hover, .ff-header a.ff-nav__quick-btn--call:focus-visible { background-color: var(--ff-blue); color: var(--ff-white); } .ff-header a.ff-nav__quick-btn--call .ff-icon { fill: currentColor; } .ff-nav__quick-btn .ff-icon { width: 18px; height: 18px; } @media (max-width: 1024px) { .ff-nav__quick { display: flex; } } /* ========================================================================== Zurück nach oben ========================================================================== */ /* * Höhere Spezifität (body button…): das Elementor-Kit stylt jeden