/* ========================================================================== VARIANTE 18 — main18.css — Design "Schwelle" Kreativer Relaunch 2026-07-17, Vorbild (Layout-/Stilideen, keine Inhalte): https://www.lieblings-zahnarzt.de/berlin-schoeneberg/ Leitidee: der Header liegt NICHT vor/über dem Hero-Slider, sondern TRANSPARENT DARIN — Logo + Menü-Knopf schweben auf dem Bild, es gibt bewusst KEINE separate Desktop-Nav-Zeile (anders als alle main1-17- Designs). Die komplette Navigation lebt in einem einzigen Off-Canvas- Panel, das bei jeder Breite über einen Menü-Knopf geöffnet wird. Nach dem Verlassen des Hero-Bereichs wird der Header per JS blickdicht (.header- solide), damit Telefon/Menü beim Scrollen erreichbar bleiben (main17- Lektion: ein Header, der beim Scrollen komplett verschwindet, wurde von SARA als Verschlechterung abgelehnt). Zweites, wiederkehrendes Signatur-Element ("Eckschwelle"): alle Bildkarten (Leistungen, Team, Bildspalten, Galerie) tragen eine einzige, grosse abgerundete Ecke oben rechts statt aller vier Ecken gleich — ein bewusst anderes geometrisches Motiv als main17s symmetrischer "Bogen" und main4/39/40/41s Wellenschnitt. Farben: Tinte (dunkles Petrol) + Fichten-Teal als Haupt-Markenfarbe, Terrakotta als einzelner Akzent (WCAG-geprüft, siehe Kommentare unten). Schriften: Bellefair (Display-Serife, nur Regular 400 verfügbar, deshalb zurückhaltend für grosse Überschriften) + Cuprum (halbkondensierte Grotesk für Navigation/Buttons/Fliesstext) — beide Schriften werden noch von keinem anderen main{N}.css genutzt (Stand 2026-07-17). ========================================================================== */ @import url("bellefair.css"); @import url("cuprum.css"); @import url("font-awesome.css"); /* -------------------------------------------------------------------------- CSS Custom Properties Kontrastwerte unten wurden rechnerisch (Relative-Luminanz-Formel) und nicht nach Auge geschätzt ermittelt — Basis-Palette: --farbe-primaer auf --farbe-hg: 5.68:1 --farbe-text auf --farbe-hg: 15.20:1 --farbe-text-hell auf --farbe-hg: 5.89:1 --farbe-akzent (Btn-Fuellung) weiss-Text: 5.14:1 --farbe-akzent als Text auf --farbe-hg (Breadcrumb-/Link-Hover): 4.82:1 --farbe-abwechsel-dunkel vs. --farbe-hg (Flaechenkontrast): 2.32:1 --farbe-text auf --farbe-abwechsel-dunkel: 6.54:1 --farbe-weiss auf --farbe-tinte: 14.52:1 KORREKTUR 2026-07-17 (Live-Verifikationsrunde main18-Feedback-Fixes): --farbe-akzent wurde ursprünglich nur gegen Weiß geprüft (4.71:1, PASS), nicht aber als Textfarbe auf --farbe-hg (Breadcrumb-/Gruppe-mehr-Hover, main18.css) — dort waren es nur 4.42:1, WCAG-FAIL. Leicht abgedunkelt (betrifft auch farbvariante18_1.css/_4.css, die denselben Terrakotta-Ton 1:1 übernehmen — dort ebenfalls angepasst). -------------------------------------------------------------------------- */ :root { /* Tinte — dunkles Petrol, Header-Scrim/Off-Canvas/dunkle Bänder/Footer */ --farbe-tinte: #0F2E2B; --farbe-tinte-rgb: 15, 46, 43; /* Fichten-Teal — Hauptmarkenfarbe */ --farbe-primaer: #1D6E63; --farbe-primaer-hell: #2E8C7E; --farbe-primaer-dunkel: #123B36; --farbe-primaer-rgb: 29, 110, 99; --farbe-primaer-dunkel-rgb: 18, 59, 54; /* Mint — dekorative Zweitfarbe (Icons/Labels auf Tinte, keine Fliesstextfarbe) */ --farbe-sekundaer: #8FD4C4; --farbe-sekundaer-hell: #C7EAE1; /* Terrakotta — einzelner, bewusst warmer Akzent für CTAs */ --farbe-akzent: #B74C2C; --farbe-akzent-hell: #E8734F; --farbe-akzent-dunkel: #9C3D22; --farbe-akzent-rgb: 183, 76, 44; /* Hintergruende */ --farbe-hg: #F6F8F6; --farbe-hg-alt: #ECF1EE; --farbe-hintergrund: #F6F8F6; --farbe-hintergrund-alt: #ECF1EE; /* Kraeftigere Wechselflaeche fuer .abwechsel-dunkel (main17-Lektion: ein blosses Aufhellen von hg reicht NICHT fuer wahrnehmbaren Flaechenkontrast — Zielkorridor 2.3-3:1, hier 2.32:1 gemessen). Text sitzt auf dieser Flaeche nur mit --farbe-text (6.54:1), niemals mit --farbe-text-hell (nur 2.5:1, siehe Ueberschreibung weiter unten). */ --farbe-abwechsel-dunkel: #81ADA7; --farbe-text: #16231F; --farbe-text-hell: #52645D; --farbe-linie: #D8E3DE; --farbe-weiss: #FFFFFF; /* Schriften */ --font-anzeige: 'Bellefair', Georgia, 'Times New Roman', serif; --font-serif: 'Bellefair', Georgia, 'Times New Roman', serif; --font-haupt: 'Cuprum', system-ui, -apple-system, sans-serif; --font-text: 'Cuprum', system-ui, -apple-system, sans-serif; --font-sans: 'Cuprum', system-ui, -apple-system, sans-serif; --abstand-xs: 0.5rem; --abstand-s: 1rem; --abstand-m: 2rem; --abstand-l: 4rem; --abstand-xl: 6rem; --header-hoehe: 88px; --radius-karte: 8px; --radius-btn: 999px; /* Eckschwelle — Signatur-Ecke fuer alle Bildkarten (siehe Kommentar oben) */ --ecke-signatur: 6px 52px 6px 6px; --ecke-signatur-gross: 6px 84px 6px 6px; --schatten-karte: 0 2px 18px rgba(var(--farbe-tinte-rgb), 0.10); --schatten-hover: 0 10px 32px rgba(var(--farbe-tinte-rgb), 0.20); /* Autorenbox-Variablen (Wichtigste auf einen Blick) */ --farbe-autorenbox-hintergrund: color-mix(in srgb, var(--farbe-primaer) 6%, var(--farbe-weiss)); --farbe-autorenbox-linie: var(--farbe-linie); --farbe-autorenbox-akzent: var(--farbe-primaer); --farbe-autorenbox-icon: var(--farbe-primaer); --farbe-autorenbox-icon-text: var(--farbe-weiss); --farbe-autorenbox-text: var(--farbe-text); --farbe-autorenbox-text-stark: var(--farbe-text); } /* Bruecke zu den generischen --color-*-Variablen aus der GETEILTEN css/global.css (Fund 2026-08-26, Autor-Profilseite, siehe main9.css/main32.css als Vorbild). global.css definiert --color-primary etc. mit einem hartcodierten Rot (#e10816) als designneutralen Default - passt zu keinem main{N}.css-Theme. Betrifft u.a. .credential-badge, .autor-profile__avatar, .summary-box auf der Autor-Profilseite (tpl/include_einzelautor.tpl.htm). main{N}.css laedt NACH global.css, :root ueberschreibt sich sauber. */ :root { --color-primary: var(--farbe-primaer); --color-primary-dark: var(--farbe-primaer-dunkel); --color-primary-light: var(--farbe-sekundaer-hell); --color-text: var(--farbe-text); --color-border: var(--farbe-hg-alt); } /* -------------------------------------------------------------------------- Reset & Basis -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; /* main17-Lektion: overflow-x:hidden auf html/body erzwingt implizit overflow-y:auto und macht z.B. position:sticky-Kindelemente wirkungslos. clip loest KEINEN Scroll-Container aus, verhindert aber trotzdem horizontalen Overflow. */ overflow-x: clip; } body { font-family: var(--font-text); font-weight: 400; color: var(--farbe-text); background-color: var(--farbe-hintergrund); line-height: 1.7; overflow-x: clip; /* PFLICHT: kein padding-top hier — der Header ist im Ruhezustand transparent und schwebt bewusst UEBER dem Hero-Slider/Seitenbanner, nicht davor. Siehe main#hauptinhalt weiter unten fuer die Breadcrumb-Reihenfolge, die dafuer sorgt, dass die Breadcrumb dabei nicht unter dem fixierten Header verschwindet. */ padding-top: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .skip-link { position: absolute; top: -200px; left: 1rem; background: var(--farbe-tinte); color: var(--farbe-weiss); padding: 0.6rem 1.1rem; border-radius: 0 0 8px 8px; font-weight: 700; z-index: 99999; transition: top 0.2s; } .skip-link:focus { top: 0; } :focus-visible { outline: 3px solid var(--farbe-akzent); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } img { max-width: 100%; height: auto; display: block; } a { color: var(--farbe-primaer); text-decoration: none; transition: color 0.2s ease; } /* Fliesstext-Links (WCAG 1.4.1 + 1.4.3): erbt Textfarbe fuer garantierten Kontrast, Unterstreichung als Unterscheidungsmerkmal */ main p a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; } main p a:hover, main p a:focus-visible { text-decoration-thickness: 2px; } a:hover { color: var(--farbe-primaer-hell); } h1, h2, h3 { font-family: var(--font-anzeige); font-weight: 400; line-height: 1.18; color: var(--farbe-tinte); letter-spacing: 0.002em; } h4 { font-family: var(--font-haupt); font-weight: 700; line-height: 1.3; color: var(--farbe-tinte); } h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); } h3 { font-size: clamp(1.2rem, 2.1vw, 1.6rem); } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* Wiederkehrender Bug quer durch alle Designs: die geteilte CMS-Vorlage erzeugt gelegentlich ein verschachteltes .container-Element INNERHALB eines bereits containerten Bereichs (z.B.

). */ .container .container { max-width: none; padding: 0; margin: 0; } /* -------------------------------------------------------------------------- HAUPTBEREICH — Reihenfolge per Flex/Order statt DOM geruest.tpl.htm (geteilt, tabu) liefert IMMER: nav.breadcrumb ZUERST, danach {slider} (bzw. .seite-header auf Unterseiten), danach {content}. Weil der Header transparent/fixiert UEBER dem Hero schwebt, wuerde die Breadcrumb an ihrer echten DOM-Position (direkt nach dem Header) vom fixierten Header komplett verdeckt. Per CSS-Order wird sie stattdessen NACH dem Hero/Seitenbanner einsortiert, ohne dass die tabu-Datei angefasst wird. Slider bekommt eine negative Order, damit er selbst bei 0 (Standardwert der restlichen Content-Sections) sicher vorne bleibt. -------------------------------------------------------------------------- */ main#hauptinhalt { display: flex; flex-direction: column; isolation: isolate; } main#hauptinhalt > .slider-bereich, main#hauptinhalt > #hauptSlider, main#hauptinhalt > .seite-header { order: -2; } main#hauptinhalt > .breadcrumb { order: -1; } /* -------------------------------------------------------------------------- Section-Helfer -------------------------------------------------------------------------- */ .section-label { display: inline-block; font-family: var(--font-haupt); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--farbe-akzent-dunkel); margin-bottom: 0.7rem; } .section-label-hell { color: var(--farbe-sekundaer); } .section-header { text-align: center; margin-bottom: var(--abstand-l); max-width: 680px; margin-left: auto; margin-right: auto; } .section-header h2 { margin-bottom: 0.6rem; } .section-header .section-linie { margin: 0 auto 1rem; } .section-header p, .section-beschreibung { color: var(--farbe-text-hell); font-size: 1.05rem; line-height: 1.7; } .section-linie { width: 40px; height: 3px; background: var(--farbe-akzent); border-radius: 2px; margin: 0.8rem 0 1.2rem; } /* Fix 2026-08-27: Vorlage liefert HTML-Reihenfolge label, linie, h2, p - die Linie soll aber visuell UNTER der Ueberschrift stehen statt davor. HTML- Reihenfolge bleibt unveraendert (geteilte Vorlage), nur visuelle Reihenfolge per flex/order verschoben. */ .section-header { display: flex; flex-direction: column; align-items: center; } .section-header .section-label { order: 1; } .section-header h2 { order: 2; margin-bottom: 0; } .section-header .section-linie { order: 3; margin: 0.75rem auto 1rem; } .section-header p { order: 4; } .textblock-linie { width: 40px; height: 3px; background: var(--farbe-akzent); border-radius: 2px; margin: 0 0 1.2rem; } /* -------------------------------------------------------------------------- Buttons — durchgaengig Pill-Form (radius-btn:999px) als leises Wiederholungsmotiv (Chip-Logo, Termin-Button, Slider-Punkte) -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-haupt); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.03em; padding: 0.85rem 1.9rem; border-radius: var(--radius-btn); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; text-decoration: none; border: 2px solid transparent; } .btn-primaer { background-color: var(--farbe-primaer); color: var(--farbe-weiss); border-color: var(--farbe-primaer); } .btn-primaer:hover { background-color: var(--farbe-primaer-dunkel); border-color: var(--farbe-primaer-dunkel); color: var(--farbe-weiss); transform: translateY(-2px); box-shadow: var(--schatten-hover); } /* .btn-akzent ist die einzige, im echten CMS-Markup verwendete Akzent-Button-Klasse (siehe vorlage_*.htm) — Terrakotta-Fuellung, weisser Text 4.71:1 */ .btn-akzent { background-color: var(--farbe-akzent); color: var(--farbe-weiss); border-color: var(--farbe-akzent); } .btn-akzent:hover { background-color: var(--farbe-akzent-dunkel); border-color: var(--farbe-akzent-dunkel); color: var(--farbe-weiss); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(var(--farbe-akzent-rgb), 0.35); } .btn-hell { background-color: transparent; color: var(--farbe-weiss); border-color: rgba(255,255,255,0.7); } .btn-hell:hover { background-color: var(--farbe-weiss); color: var(--farbe-tinte); border-color: var(--farbe-weiss); } .btn-outline { background-color: transparent; color: var(--farbe-primaer); border-color: var(--farbe-primaer); } .btn-outline:hover { background-color: var(--farbe-primaer); color: var(--farbe-weiss); } .btn-routenplaner { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; font-family: var(--font-haupt); font-weight: 700; font-size: 0.86rem; color: var(--farbe-weiss); background: var(--farbe-primaer); padding: 0.8rem 1.7rem; border-radius: var(--radius-btn); transition: background-color 0.2s ease, transform 0.2s ease; } .btn-routenplaner:hover { background: var(--farbe-primaer-dunkel); transform: translateY(-2px); color: var(--farbe-weiss); } /* ========================================================================== HEADER — transparent im Hero, blickdicht nach main18.js-Scroll-Klasse ========================================================================== */ header[role="banner"], .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; height: var(--header-hoehe); background: transparent; border-bottom: 1px solid transparent; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease; } /* .header-solide wird per main18.js gesetzt, sobald man aus dem Hero-/Banner-Bereich herausgescrollt ist — verhindert die main17-Runde-1- Lektion (Header beim Scrollen komplett unsichtbar). */ .site-header.header-solide { background: rgba(var(--farbe-tinte-rgb), 0.96); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 24px rgba(var(--farbe-tinte-rgb), 0.25); } .header-inner { max-width: 1320px; margin: 0 auto; padding: 0 1.75rem; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } /* Logo — Chip: rundes, halbtransparentes Marken-Medaillon um das echte Kundenlogo, echoes die runde Off-Canvas-Marke und den Willkommen-Badge */ .header-logo a { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; min-width: 0; } .header-logo-chip { flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.94); box-shadow: 0 2px 14px rgba(var(--farbe-tinte-rgb), 0.28); display: flex; align-items: center; justify-content: center; padding: 6px; transition: background-color 0.3s ease; } .header-logo-chip img { width: 100%; height: 100%; object-fit: contain; } .header-firma-name { font-family: var(--font-anzeige); font-size: 1.08rem; color: var(--farbe-weiss); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; text-shadow: 0 1px 8px rgba(0,0,0,0.35); transition: color 0.3s ease, text-shadow 0.3s ease; } .site-header.header-solide .header-firma-name { text-shadow: none; } /* Rechte Aktionen */ .header-aktionen { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } .header-tel { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-haupt); font-size: 0.86rem; font-weight: 700; color: var(--farbe-weiss); white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,0.35); transition: color 0.2s, text-shadow 0.3s ease; } .header-tel:hover { color: var(--farbe-sekundaer); } .header-tel .fa { color: var(--farbe-sekundaer); } .site-header.header-solide .header-tel { text-shadow: none; } .header-termin-btn { font-size: 0.8rem; padding: 0.6rem 1.4rem; white-space: nowrap; } /* Menü-Knopf — einziger Zugang zur Navigation, bei JEDER Breite sichtbar. Reiner Icon-Button (rundes Medaillon, echoes .header-logo-chip) — ein sichtbares Text-Label "Menü" wirkte gequetscht/unruhig neben den drei Linien und wurde entfernt; aria-label traegt die Beschriftung weiterhin fuer Screenreader. */ .burger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.5); cursor: pointer; z-index: 10002; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; transition: background-color 0.25s ease, border-color 0.25s ease; position: relative; } .burger-linie { display: block; width: 18px; height: 2px; background-color: var(--farbe-weiss); transition: all 0.3s ease; } .burger:hover { background: rgba(255,255,255,0.24); } .burger[aria-expanded="true"] .burger-linie:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] .burger-linie:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger-linie:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ========================================================================== OFF-CANVAS NAVIGATION — die EINZIGE Navigation im HTML (WCAG/Struktur- Pflicht), bei jeder Viewport-Breite ausschliesslich per .offen sichtbar. Bewusst kein @media-Umschalten auf eine zweite Desktop-Nav-Zeile. ========================================================================== */ .site-nav, #haupt-navigation { position: fixed; top: 0; right: -100%; width: min(420px, 92vw); height: 100vh; height: 100dvh; background: var(--farbe-tinte); z-index: 10002; overflow-y: auto; transition: right 0.35s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column; box-shadow: -12px 0 48px rgba(0,0,0,0.32); } .site-nav.offen, #haupt-navigation.offen { right: 0; } .site-nav-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.6rem; border-bottom: 1px solid rgba(255,255,255,0.12); } .site-nav-marke { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-anzeige); font-size: 1.05rem; color: var(--farbe-weiss); min-width: 0; } .site-nav-marke > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-logo-chip-nav { width: 40px; height: 40px; box-shadow: none; } .site-nav-schliessen { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: var(--farbe-weiss); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } .site-nav-schliessen:hover { background: var(--farbe-akzent); border-color: var(--farbe-akzent); } .site-nav ul { list-style: none; margin: 0; padding: 1rem 0 2rem; } .site-nav ul li { position: relative; border-bottom: 1px solid rgba(255,255,255,0.08); } .site-nav ul li > a { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-family: var(--font-haupt); font-weight: 700; font-size: 1.02rem; color: var(--farbe-weiss); padding: 1rem 1.6rem; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } .site-nav ul li > a:hover, .site-nav ul li > a:focus-visible, .site-nav ul li.aktiv > a { color: var(--farbe-sekundaer); background: rgba(255,255,255,0.05); } /* Dropdown-Pfeil — CMS liefert kein eigenes Pfeil-Element */ .site-nav li.has-dropdown > a::after, .site-nav li.hat-dropdown > a::after { content: '\f107'; font-family: 'FontAwesome', 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.85rem; color: var(--farbe-sekundaer); transition: transform 0.25s ease; flex-shrink: 0; } .site-nav li.has-dropdown.offen > a::after, .site-nav li.hat-dropdown.offen > a::after { transform: rotate(180deg); } /* Untermenü — klappt IM Off-Canvas-Panel auf (main18.js), keine Hover-Flyouts, weil es keinen Desktop-Nav-Modus gibt */ .site-nav li.has-dropdown > ul, .site-nav li.hat-dropdown > ul { list-style: none; max-height: 0; padding: 0; overflow: hidden; background: rgba(0,0,0,0.18); transition: max-height 0.35s ease, padding 0.35s ease; } /* Padding NUR im offenen Zustand — sonst kann max-height:0 die von .site-nav ul geerbte feste padding-Summe (1rem 0 2rem) nicht auf 0px komprimieren und die erste Unterzeile scheint geschlossen durch (SARA Runde 1, Fund 1). */ .site-nav li.has-dropdown.offen > ul, .site-nav li.hat-dropdown.offen > ul { max-height: 1400px; padding: 0.4rem 0; } .site-nav li.has-dropdown > ul li, .site-nav li.hat-dropdown > ul li { border-bottom: 1px solid rgba(255,255,255,0.06); } .site-nav li.has-dropdown > ul li a, .site-nav li.hat-dropdown > ul li a { padding: 0.75rem 1.6rem 0.75rem 2.4rem; font-size: 0.9rem; font-weight: 400; color: rgba(255,255,255,0.78); } .site-nav li.has-dropdown > ul li a:hover, .site-nav li.hat-dropdown > ul li a:hover { color: var(--farbe-sekundaer); background: rgba(255,255,255,0.05); } .nav-tel-item a { color: var(--farbe-sekundaer) !important; } .nav-termin-item { padding: 1.1rem 1.6rem; } .nav-termin-item .btn { width: 100%; justify-content: center; } /* Abdunklung hinter dem Panel */ .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10001; } .mobile-overlay.offen { display: block; } /* -------------------------------------------------------------------------- BREADCRUMB — per Order (siehe main#hauptinhalt oben) NACH dem Hero/Seitenbanner einsortiert, nie unter dem fixierten Header verdeckt -------------------------------------------------------------------------- */ .breadcrumb { background-color: var(--farbe-hg-alt); border-bottom: 1px solid var(--farbe-linie); padding: 0.7rem 0; } .breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; gap: 0.5rem; font-family: var(--font-haupt); font-size: 0.8rem; color: var(--farbe-text-hell); align-items: center; margin: 0; padding: 0; } .breadcrumb ol li + li::before { content: '\203A'; margin-right: 0.5rem; color: var(--farbe-tinte); } .breadcrumb ol li a { color: var(--farbe-primaer); font-weight: 700; } .breadcrumb ol li a:hover { color: var(--farbe-akzent); } /* Fund 2026-08-27 (kinder.dentalspezialisten.de "unser-team.html"): Seiten ganz OHNE Hero/Slider (weder .slider-bereich noch #hauptSlider noch .seite-header als direktes Kind von main#hauptinhalt) haben die Breadcrumb als optisch ERSTES Element im Flow - die faehrt dann unter den fixierten Header (body hat bewusst padding-top:0, siehe oben). Nur in diesem Fall die Breadcrumb selbst um die Headerhoehe nach unten schieben, alle Hero-Seiten bleiben unveraendert. */ main#hauptinhalt:not(:has(> .slider-bereich, > #hauptSlider, > .seite-header)) > .breadcrumb { padding-top: calc(var(--header-hoehe) + 0.7rem); } /* ========================================================================== HERO SLIDER — Header schwebt (siehe oben) transparent darueber Pflicht: max. 650px hoch ========================================================================== */ /* Feste, vom Seitenverhaeltnis des hochgeladenen Bildes UNABHAENGIGE Hoehe (main18-Fund: bei sehr breiten/niedrigen Kundenbildern faellt die reine width:100%-Auto-Hoehe sonst so klein aus, dass der durch den schwebenden Header nach unten versetzte Slider-Inhalt oben aus der Box herauslief - siehe .slider-inhalt weiter unten). clamp() haelt sie responsiv zwischen 460px und der Pflicht-Obergrenze von 650px. */ .slider-bereich, .slider-container, #hauptSlider { width: 100%; overflow: hidden; position: relative; height: clamp(460px, 48vw, 648px); max-height: 648px; background: var(--farbe-tinte); } .slider-folie { display: none; position: absolute; inset: 0; width: 100%; height: 100%; } .slider-folie.aktiv { display: block; } .slider-folie img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .slider-folie::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(var(--farbe-tinte-rgb), 0.86) 0%, rgba(var(--farbe-tinte-rgb), 0.52) 42%, rgba(var(--farbe-tinte-rgb), 0.12) 72%, rgba(var(--farbe-tinte-rgb), 0.28) 100% ); } .slider-inhalt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: calc(var(--header-hoehe) + 2.5rem) 5% 3rem max(calc((100% - 1200px) / 2 + 1.75rem), 1.75rem); z-index: 2; max-width: calc(680px + max(calc((100% - 1200px) / 2 + 1.75rem), 1.75rem)); } .slider-label { display: inline-block; font-family: var(--font-haupt); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--farbe-tinte); background: var(--farbe-sekundaer); padding: 0.35rem 1rem; border-radius: var(--radius-btn); margin-bottom: 1.2rem; } .slider-inhalt h1 { color: var(--farbe-weiss); font-size: clamp(2rem, 4.6vw, 3.5rem); text-shadow: 0 3px 18px rgba(0,0,0,0.3); margin-bottom: 1rem; } .slider-inhalt p { color: rgba(255,255,255,0.92); font-family: var(--font-text); font-size: clamp(1rem, 1.7vw, 1.15rem); margin-bottom: 1.9rem; max-width: 520px; line-height: 1.65; } .slider-aktionen { display: flex; gap: 1rem; flex-wrap: wrap; } .slider-pfeil { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.5); color: var(--farbe-weiss); width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; z-index: 5; transition: all 0.25s ease; display: flex; align-items: center; justify-content: center; } .slider-pfeil:hover { background-color: var(--farbe-akzent); border-color: var(--farbe-akzent); } .slider-pfeil-links { left: 1.4rem; } .slider-pfeil-rechts { right: 1.4rem; } .slider-punkte { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.6rem; z-index: 5; } .slider-punkt { width: 9px; height: 9px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); background-color: transparent; cursor: pointer; transition: all 0.25s ease; padding: 0; } .slider-punkt.aktiv, .slider-punkt:hover { background-color: var(--farbe-akzent); border-color: var(--farbe-akzent); width: 22px; border-radius: 5px; } /* -------------------------------------------------------------------------- SEITEN-BANNER (Unterseiten, ein Bild, kein Slide-Effekt) — .seite-header Header schwebt exakt wie im Slider darueber -------------------------------------------------------------------------- */ .seite-header { position: relative; color: var(--farbe-weiss); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; } .seite-header .header-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .seite-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--farbe-tinte-rgb), 0.92) 0%, rgba(var(--farbe-tinte-rgb), 0.30) 62%, rgba(var(--farbe-tinte-rgb), 0.46) 100%); z-index: 1; } .seite-header .container { position: relative; z-index: 2; padding-top: calc(var(--header-hoehe) + 1.5rem); padding-bottom: 2.2rem; } .seite-header h1 { color: var(--farbe-weiss); margin-bottom: 0.5rem; text-shadow: 0 2px 14px rgba(0,0,0,0.3); } .seite-header p { color: rgba(255,255,255,0.86); font-size: 1.05rem; max-width: 640px; } /* -------------------------------------------------------------------------- SCHNELLINFOS-STREIFEN -------------------------------------------------------------------------- */ .schnellinfos-section { background: var(--farbe-tinte); padding: 1.5rem 0; } .schnellinfos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .schnellinfo-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1.4rem; border-right: 1px solid rgba(255,255,255,0.12); } .schnellinfo-item:last-child { border-right: none; } .schnellinfo-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--farbe-sekundaer); font-size: 1rem; } .schnellinfo-text { display: flex; flex-direction: column; gap: 0.1rem; } .schnellinfo-text strong { color: var(--farbe-weiss); font-size: 0.82rem; font-weight: 700; font-family: var(--font-haupt); } .schnellinfo-text span, .schnellinfo-text a { color: rgba(255,255,255,0.7); font-size: 0.8rem; } .schnellinfo-text a:hover { color: var(--farbe-sekundaer); } /* -------------------------------------------------------------------------- ABWECHSEL-SECTIONS — JS-gesteuert (main18.js, eine seitenweite Geschwister-Zaehlung ueber ALLE beteiligten Section-Typen hinweg statt pro Klasse einzeln, siehe main18.js-Kommentar) -------------------------------------------------------------------------- */ .abwechsel-hell { background: var(--farbe-hg) !important; } .abwechsel-dunkel { background: var(--farbe-abwechsel-dunkel) !important; } /* Auf der kraeftigeren Wechselflaeche NIEMALS --farbe-text-hell verwenden (nur 2.5:1) — hier auf die dunkle Textfarbe umschalten (6.54:1) */ .abwechsel-dunkel p, .abwechsel-dunkel li, .abwechsel-dunkel .section-header p, .abwechsel-dunkel .section-beschreibung, .abwechsel-dunkel .gruppe-inhalt p, .abwechsel-dunkel .bildspalten-text p, .abwechsel-dunkel .textblock-section p { color: var(--farbe-text); } /* Sichtbare Trennkante zusaetzlich zur Flaechenfarbe (Tinte auf beiden Seiten kontraststark: 13.6:1 gegen hell, 5.8:1 gegen die Wechselflaeche) */ .abwechsel-dunkel { border-top: 2px solid var(--farbe-tinte); } /* No-JS-Fallback, wird durch die !important-Regeln oben ueberschrieben, sobald main18.js gelaufen ist */ .textblock-section:nth-of-type(even), .float-section:nth-of-type(even), .bildspalten-section:nth-of-type(even), .gruppen-section:nth-of-type(even), .team-section:nth-of-type(even), .team-kacheln-section:nth-of-type(even), .faq-section:nth-of-type(even) { background: var(--farbe-abwechsel-dunkel); } /* -------------------------------------------------------------------------- WILLKOMMEN-SECTION -------------------------------------------------------------------------- */ .willkommen-section { padding: var(--abstand-l) 0; background-color: var(--farbe-weiss); } .willkommen-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--abstand-l); align-items: center; } .willkommen-bild { position: relative; } .willkommen-bild img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--ecke-signatur-gross); box-shadow: var(--schatten-hover); } .willkommen-badge { position: absolute; bottom: -1.4rem; left: -1.4rem; background: var(--farbe-tinte); color: var(--farbe-weiss); width: 104px; height: 104px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--schatten-hover); text-align: center; padding: 1rem; border: 3px solid var(--farbe-weiss); } .willkommen-badge strong { font-size: 1.5rem; font-family: var(--font-anzeige); line-height: 1; color: var(--farbe-sekundaer); } .willkommen-badge span { font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.3rem; opacity: 0.9; font-family: var(--font-haupt); } .willkommen-inhalt h2 { margin-bottom: 1.1rem; } .willkommen-inhalt p { color: var(--farbe-text-hell); margin-bottom: 1.1rem; font-size: 1.03rem; } .willkommen-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; padding: 1.5rem; background: var(--farbe-hg); border-radius: var(--radius-karte); border: 1px solid var(--farbe-linie); } .stat-item { text-align: center; } .stat-item strong { display: block; font-size: 1.5rem; font-family: var(--font-anzeige); color: var(--farbe-primaer); line-height: 1; } .stat-item span { font-size: 0.72rem; color: var(--farbe-text-hell); letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-haupt); } /* -------------------------------------------------------------------------- BEHANDLUNGSGRUPPEN (.gruppen-section / vorlage_boxen3+6) -------------------------------------------------------------------------- */ .gruppen-section { padding: var(--abstand-l) 0; background: var(--farbe-hg); } .gruppen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .gruppe-karte { background: var(--farbe-weiss); border-radius: var(--radius-karte); overflow: hidden; box-shadow: var(--schatten-karte); border: 1px solid var(--farbe-linie); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; } .gruppe-karte:hover { transform: translateY(-5px); box-shadow: var(--schatten-hover); } .gruppe-bild { height: 200px; overflow: hidden; position: relative; border-radius: var(--ecke-signatur) var(--ecke-signatur) 0 0; } /* object-position:center (Standard) schnitt bei den quadratischen 1024x1024-Mitarbeiter- Demofotos in der breiten Karten-Box teils die Stirn/den Kopf ab - Fokus nach oben verschoben. */ .gruppe-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform 0.4s ease; } .gruppe-karte:hover .gruppe-bild img { transform: scale(1.05); } .gruppe-bild-icon { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--farbe-tinte); color: var(--farbe-weiss); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .gruppe-inhalt { padding: 1.6rem; flex: 1; display: flex; flex-direction: column; } .gruppe-inhalt h3 { margin-bottom: 0.7rem; font-size: 1.2rem; } .gruppe-inhalt p { color: var(--farbe-text-hell); font-size: 0.93rem; flex: 1; margin-bottom: 1.3rem; } /* Bildlose Karten (vorlage_boxen*_noimage / vorlage_boxen6_noimage): kein .gruppe-bild als erstes Kind — bekommen stattdessen einen farbigen Deckenbalken als Ersatz-Signatur (strukturelle :first-child-Weiche, keine :has()-Abhaengigkeit noetig) */ .gruppe-karte > .gruppe-inhalt:first-child { border-top: 4px solid var(--farbe-akzent); padding-top: 1.8rem; } .gruppe-mehr { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--farbe-primaer); font-family: var(--font-haupt); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em; transition: gap 0.2s ease, color 0.2s ease; } .gruppe-mehr:hover { gap: 0.7rem; color: var(--farbe-akzent); } /* -------------------------------------------------------------------------- LEISTUNGEN SECTION -------------------------------------------------------------------------- */ .leistungen-section { padding: var(--abstand-l) 0; background: var(--farbe-weiss); } .leistungen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .leistung-bild-karte { background: var(--farbe-hg); border-radius: var(--radius-karte); overflow: hidden; border: 1px solid var(--farbe-linie); transition: box-shadow 0.3s ease, transform 0.3s ease; } .leistung-bild-karte:hover { box-shadow: var(--schatten-hover); transform: translateY(-4px); } .leistung-bild { height: 170px; overflow: hidden; border-radius: var(--ecke-signatur) var(--ecke-signatur) 0 0; } .leistung-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .leistung-bild-karte:hover .leistung-bild img { transform: scale(1.04); } .leistung-bild-karte-inhalt { padding: 1.4rem; } .leistung-bild-karte-inhalt h3 { font-size: 1.08rem; margin-bottom: 0.5rem; } .leistung-bild-karte-inhalt p { font-size: 0.88rem; color: var(--farbe-text-hell); line-height: 1.6; } /* -------------------------------------------------------------------------- HIGHLIGHT / VORTEILE -------------------------------------------------------------------------- */ .highlight-section { background: var(--farbe-tinte); padding: var(--abstand-l) 0; color: var(--farbe-weiss); position: relative; overflow: hidden; } .highlight-section::before { content: ''; position: absolute; top: -110px; right: -110px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--farbe-akzent-rgb), 0.24) 0%, transparent 70%); pointer-events: none; } .highlight-section .container { position: relative; z-index: 1; } .highlight-section h2 { color: var(--farbe-weiss); margin-bottom: 1rem; } .highlight-section p { color: rgba(255,255,255,0.84); font-size: 1.05rem; } .vorteile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: var(--abstand-m); } .vorteil-item { text-align: center; padding: 1.4rem 1rem; } .vorteil-icon { width: 54px; height: 54px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.25rem; color: var(--farbe-sekundaer); } .vorteil-item h4 { color: var(--farbe-weiss); font-size: 0.95rem; margin-bottom: 0.4rem; } .vorteil-item p { font-size: 0.84rem; color: rgba(255,255,255,0.7); line-height: 1.55; } /* -------------------------------------------------------------------------- KENNZAHLEN / PARALLAX-STATISTIK (.praxis-section) PFLICHT: background-size/position/attachment + parallax-helper-img -------------------------------------------------------------------------- */ .praxis-section { position: relative; padding: var(--abstand-l) 0; background-size: cover; background-position: center; background-attachment: fixed; overflow: hidden; } .praxis-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--farbe-tinte-rgb), 0.92) 0%, rgba(var(--farbe-primaer-dunkel-rgb), 0.82) 100%); } .praxis-inhalt { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; text-align: center; } .praxis-inhalt h2 { color: var(--farbe-weiss); margin-bottom: 1.1rem; } .praxis-inhalt > p { color: rgba(255,255,255,0.88); font-size: 1.05rem; max-width: 600px; margin: 0 auto 2rem; } .praxis-fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.6rem; } .praxis-fakt { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-karte); padding: 1.8rem 1rem; text-align: center; } .praxis-fakt-zahl { display: block; font-family: var(--font-anzeige); font-size: clamp(2rem, 3.8vw, 3.1rem); color: var(--farbe-weiss); line-height: 1; margin-bottom: 0.5rem; } .praxis-fakt-text { font-size: 0.8rem; color: rgba(255,255,255,0.8); letter-spacing: 0.01em; line-height: 1.5; font-family: var(--font-haupt); } @media (max-width: 768px) { .praxis-section { background-attachment: scroll; } } /* -------------------------------------------------------------------------- REINE PARALLAX (Bild ohne Text) -------------------------------------------------------------------------- */ .reine-parallax-section { position: relative; min-height: 400px; background-size: cover; background-position: center; background-attachment: fixed; overflow: hidden; } .reine-parallax-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--farbe-tinte-rgb), 0.10) 0%, rgba(var(--farbe-tinte-rgb), 0.34) 100%); } @media (max-width: 768px) { .reine-parallax-section { background-attachment: scroll; } } /* -------------------------------------------------------------------------- CTA PARALLAX -------------------------------------------------------------------------- */ .cta-parallax-section { position: relative; padding: var(--abstand-xl) 0; background-size: cover; background-position: center; background-attachment: fixed; overflow: hidden; } .cta-parallax-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--farbe-tinte-rgb), 0.93) 0%, rgba(var(--farbe-akzent-rgb), 0.5) 130%); } .cta-parallax-inhalt { position: relative; z-index: 2; text-align: center; max-width: 720px; margin: 0 auto; } .cta-parallax-inhalt h2 { color: var(--farbe-weiss); margin-bottom: 1.1rem; } .cta-parallax-inhalt p { color: rgba(255,255,255,0.88); font-size: 1.06rem; margin-bottom: 2.2rem; } .cta-aktionen { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } @media (max-width: 768px) { .cta-parallax-section { background-attachment: scroll; } } /* Reines Vorlade-/Screenreader-Hilfselement, immer ausblenden */ .parallax-helper-img { display: none; } /* -------------------------------------------------------------------------- TEAM — Variante A: Kachel-Grid (team.html) -------------------------------------------------------------------------- */ .team-kacheln-section { padding: var(--abstand-l) 0; background: var(--farbe-hg); } .team-kacheln-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } .team-kachel { background: var(--farbe-weiss); border: 1px solid var(--farbe-linie); border-radius: var(--radius-karte); overflow: hidden; box-shadow: var(--schatten-karte); transition: transform 0.28s ease, box-shadow 0.28s ease; display: flex; flex-direction: column; } .team-kachel:hover { transform: translateY(-6px); box-shadow: var(--schatten-hover); } .team-kachel-bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--farbe-hg-alt); border-radius: var(--ecke-signatur) var(--ecke-signatur) 0 0; } .team-kachel-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 0.45s ease; } .team-kachel:hover .team-kachel-bild img { transform: scale(1.06); } .team-kachel-bild-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(var(--farbe-tinte-rgb), 0.4) 100%); pointer-events: none; } .team-kachel-info { padding: 1.2rem 1.15rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.2rem; border-top: 2px solid var(--farbe-akzent); } .team-kachel-abteilung { font-family: var(--font-haupt); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--farbe-akzent-dunkel); } .team-kachel-name { font-family: var(--font-anzeige); font-size: 1.1rem; color: var(--farbe-tinte); margin: 0.15rem 0 0; line-height: 1.3; } .team-kachel-rolle { font-size: 0.83rem; color: var(--farbe-text-hell); } .team-kachel-beschreibung { font-size: 0.83rem; color: var(--farbe-text-hell); line-height: 1.6; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--farbe-linie); } /* -------------------------------------------------------------------------- TEAM — Variante B: Foto + Vita-Zeitleiste (behandler.html) -------------------------------------------------------------------------- */ .team-section { padding: var(--abstand-l) 0; background: var(--farbe-hg); } .team-grid { display: flex; flex-direction: column; gap: 2.5rem; } .team-foto-karte { display: flex; flex-direction: row; align-items: flex-start; gap: 2.5rem; } .team-foto-karte:nth-child(even) { flex-direction: row-reverse; } .team-bild { flex-shrink: 0; width: 250px; height: 300px; border-radius: var(--ecke-signatur-gross); overflow: hidden; box-shadow: var(--schatten-hover); } .team-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s ease; display: block; } .team-foto-karte:hover .team-bild img { transform: scale(1.05); } .team-info { flex: 1; background: var(--farbe-weiss); border-radius: var(--radius-karte); border: 1px solid var(--farbe-linie); box-shadow: var(--schatten-karte); padding: 2rem 2.4rem; } .team-name { font-family: var(--font-anzeige); font-size: 1.5rem; color: var(--farbe-tinte); margin-bottom: 0.3rem; } .team-titel { font-family: var(--font-haupt); font-size: 0.78rem; color: var(--farbe-akzent-dunkel); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; } .team-vita { font-size: 0.9rem; color: var(--farbe-text-hell); line-height: 1.8; } .team-vita ul { list-style: none; margin-top: 0.7rem; } .team-vita ul li { padding: 0.35rem 0; border-bottom: 1px solid var(--farbe-linie); display: flex; gap: 1rem; } .team-vita ul li .vita-jahr { color: var(--farbe-primaer); font-weight: 700; min-width: 80px; font-size: 0.8rem; font-family: var(--font-haupt); } .team-vita ul li .vita-info { color: var(--farbe-text-hell); font-size: 0.86rem; } /* -------------------------------------------------------------------------- TEXTBLOCK / FLOAT-SECTIONS -------------------------------------------------------------------------- */ .textblock-section { padding: var(--abstand-l) 0; } .textblock-section h2 { margin-bottom: 0.9rem; } .textblock-section p { color: var(--farbe-text); margin-bottom: 1rem; font-size: 1.02rem; } .textblock-einspaltig .textblock-inhalt { max-width: 780px; margin: 0 auto; text-align: left; } .textblock-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-l); } .textblock-zwei-ueberschriften .textblock-spalte h2 { margin-bottom: 0.9rem; } .float-section { padding: var(--abstand-l) 0; } .float-section h2 { margin-bottom: 0.9rem; } .float-section p { color: var(--farbe-text); margin-bottom: 1rem; font-size: 1.02rem; } .float-section .container::after { content: ''; display: table; clear: both; } .clearfix::after { content: ''; display: table; clear: both; } .float-img-rechts, .img-group-right { float: right; margin: 0.25rem 0 1.5rem 2.5rem; width: 42%; max-width: 420px; border-radius: var(--ecke-signatur-gross); overflow: hidden; box-shadow: var(--schatten-hover); } .float-img-links, .img-group-left { float: left; margin: 0.25rem 2.5rem 1.5rem 0; width: 42%; max-width: 420px; border-radius: var(--ecke-signatur-gross); overflow: hidden; box-shadow: var(--schatten-hover); } .img-group-right, .img-group-left { display: flex; flex-direction: column; gap: 0.6rem; box-shadow: none; overflow: visible; } .img-group-right img, .img-group-left img { border-radius: var(--ecke-signatur-gross); box-shadow: var(--schatten-hover); } .float-img-rechts img, .float-img-links img { width: 100%; height: auto; display: block; } /* -------------------------------------------------------------------------- BILDSPALTEN-SECTION — erst bei 640px kollabieren! -------------------------------------------------------------------------- */ .bildspalten-section { padding: var(--abstand-l) 0; } .bildspalten-grid, .bildspalten-grid-reverse { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .bildspalten-grid.bild-rechts { direction: rtl; } .bildspalten-grid.bild-rechts > * { direction: ltr; } .bildspalten-grid-reverse { direction: rtl; } .bildspalten-grid-reverse > * { direction: ltr; } .bildspalten-bild img { width: 100%; height: auto; border-radius: var(--ecke-signatur-gross); box-shadow: var(--schatten-hover); display: block; } .bildspalten-text h2, .bildspalten-bild h3 { margin-bottom: 1.2rem; } .bildspalten-text p { color: var(--farbe-text); margin-bottom: 1rem; font-size: 1rem; } /* -------------------------------------------------------------------------- ZITAT (.natur-zitat-section) — Praxis-Motto, dunkles Signatur-Band -------------------------------------------------------------------------- */ .natur-zitat-section { padding: var(--abstand-l) 0; /* 2026-08-26: vorher identisch --farbe-tinte wie .highlight-section - verschmolz sichtbar wenn beide direkt aufeinanderfolgen (Seite umweltzahnmedizin). Nur dunkler per color-mix (nie heller), senkt daher den bereits WCAG-gepruften Kontrast von --farbe-weiss auf dieser Flaeche nicht (siehe Kontrast-Tabelle oben), kann ihn nur verbessern. */ background: color-mix(in srgb, var(--farbe-tinte) 82%, black 18%); position: relative; overflow: hidden; } .natur-zitat-section::before { content: ''; position: absolute; top: -70px; left: -70px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--farbe-akzent-rgb), 0.2) 0%, transparent 70%); pointer-events: none; } .zitat-inhalt { position: relative; z-index: 2; text-align: center; max-width: 780px; margin: 0 auto; } .zitat-anfuehrung { font-family: var(--font-anzeige); font-size: 4.6rem; color: var(--farbe-akzent-hell); line-height: 0.5; display: block; margin-bottom: 1.1rem; opacity: 0.85; } .zitat-text { font-family: var(--font-anzeige); font-style: italic; font-size: clamp(1.3rem, 2.5vw, 1.95rem); color: var(--farbe-weiss); line-height: 1.55; margin-bottom: 1.4rem; } .zitat-quelle { font-family: var(--font-haupt); color: var(--farbe-sekundaer); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .faq-section { padding: var(--abstand-l) 0; background: var(--farbe-weiss); } .faq-liste { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.9rem; } .faq-item { border: 1px solid var(--farbe-linie); border-radius: var(--radius-karte); overflow: hidden; background: var(--farbe-hg); } .faq-frage { padding: 1.1rem 1.4rem; background: var(--farbe-hg); font-family: var(--font-haupt); font-weight: 700; color: var(--farbe-tinte); font-size: 0.96rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: background 0.2s ease; border: none; width: 100%; text-align: left; } .faq-frage:hover { background: var(--farbe-hg-alt); } .faq-item.offen .faq-frage { background: var(--farbe-tinte); color: var(--farbe-weiss); } .faq-frage::after { content: '+'; font-size: 1.3rem; font-weight: 300; flex-shrink: 0; margin-left: 1rem; color: var(--farbe-akzent); } .faq-item.offen .faq-frage::after { content: '\2212'; color: var(--farbe-sekundaer); } .faq-antwort { max-height: 0; overflow: hidden; padding: 0 1.4rem; color: var(--farbe-text-hell); font-size: 0.94rem; line-height: 1.7; transition: max-height 0.35s ease, padding 0.35s ease; background: var(--farbe-weiss); } .faq-item.offen .faq-antwort { max-height: 700px; padding: 1.1rem 1.4rem; border-top: 1px solid var(--farbe-linie); } /* -------------------------------------------------------------------------- KONTAKT-CTA-STREIFEN -------------------------------------------------------------------------- */ .kontakt-cta-section { background: var(--farbe-hg-alt); padding: var(--abstand-m) 0; border-top: 1px solid var(--farbe-linie); border-bottom: 1px solid var(--farbe-linie); } .kontakt-cta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: center; } .kontakt-cta-item { display: flex; align-items: center; gap: 1rem; } .kontakt-cta-icon { width: 48px; height: 48px; background: var(--farbe-tinte); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--farbe-weiss); font-size: 1rem; flex-shrink: 0; } .kontakt-cta-text strong { display: block; font-size: 0.8rem; color: var(--farbe-text); font-weight: 700; font-family: var(--font-haupt); } .kontakt-cta-text span, .kontakt-cta-text a { font-size: 0.98rem; color: var(--farbe-primaer); font-weight: 700; } /* -------------------------------------------------------------------------- KONTAKT-SEITE -------------------------------------------------------------------------- */ .kontakt-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .kontakt-info-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; } .kontakt-info-icon { width: 44px; height: 44px; background: var(--farbe-tinte); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--farbe-weiss); font-size: 1rem; flex-shrink: 0; } .kontakt-info-text strong { display: block; color: var(--farbe-text); font-weight: 700; font-size: 0.88rem; margin-bottom: 0.2rem; font-family: var(--font-haupt); } .kontakt-info-text span, .kontakt-info-text a { font-size: 0.95rem; color: var(--farbe-primaer); } .form-gruppe { margin-bottom: 1.2rem; } .form-gruppe label { display: block; font-family: var(--font-haupt); font-size: 0.85rem; font-weight: 700; color: var(--farbe-text); margin-bottom: 0.4rem; } .form-gruppe input, .form-gruppe textarea, .form-gruppe select { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--farbe-linie); border-radius: 8px; font-family: var(--font-text); font-size: 0.95rem; color: var(--farbe-text); background: var(--farbe-weiss); transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .form-gruppe input:focus, .form-gruppe textarea:focus, .form-gruppe select:focus { border-color: var(--farbe-primaer); box-shadow: 0 0 0 3px rgba(var(--farbe-primaer-rgb), 0.14); } .form-gruppe textarea { min-height: 120px; resize: vertical; } .form-feld-fehler { border-color: #C0392B !important; } .form-feld-fehler-text { display: block; font-size: 0.78rem; color: #C0392B; margin-top: 0.25rem; } .form-datenschutz { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.85rem; color: var(--farbe-text-hell); } .form-datenschutz input[type="checkbox"] { width: auto; margin-top: 0.15rem; flex-shrink: 0; } .form-datenschutz a { color: var(--farbe-primaer); text-decoration: underline; } .form-meldung { padding: 0.9rem 1.2rem; border-radius: 8px; font-size: 0.9rem; margin-bottom: 1rem; } .form-meldung--erfolg { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; } .form-meldung--fehler { background: #FDECEA; color: #C62828; border: 1px solid #EF9A9A; } /* -------------------------------------------------------------------------- BEWERBUNGSFORMULAR (jobs.html) — SARA Runde 1, Fund 2: eigene, aeltere CMS-Vorlage (tpl/include_stellenangebot.tpl.htm) mit anderen Klassennamen als das Kontaktformular oben (.eingabe_left/.eingabe_right/.input_normal statt .form-gruppe) — hatte bisher KEIN CSS und renderte als reiner Browser-Default-Blocksatz. Struktur an main16/17 angelehnt, Optik in main18s eigener "Schwelle"-Sprache: Cuprum durchgehend, Eingabefelder wie .form-gruppe (8px Radius), Absende-Button in derselben Pill-Form wie .btn. -------------------------------------------------------------------------- */ .stellenangebot_wrapper { max-width: 640px; } /* .clear: reiner Layout-Spacer zwischen den (nicht als Flex/Grid gebauten) Formularzeilen der geteilten CMS-Vorlage. */ .stellenangebot_wrapper .clear { clear: both; } .stellenangebot_wrapper h2 { font-family: var(--font-anzeige); font-size: 1.5rem; color: var(--farbe-tinte); margin: 0 0 0.6rem; } .eingabe_left { margin-bottom: 0.35rem; } .eingabe_left label { display: block; font-family: var(--font-haupt); font-size: 0.85rem; font-weight: 700; color: var(--farbe-text); } .eingabe_right { margin-bottom: 1.15rem; } .input_normal, .input_normal_ta { width: 100%; max-width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--farbe-linie); border-radius: 8px; background: var(--farbe-weiss); font-family: var(--font-text); font-size: 0.95rem; color: var(--farbe-text); transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; box-sizing: border-box; } .input_normal:focus, .input_normal_ta:focus { border-color: var(--farbe-primaer); box-shadow: 0 0 0 3px rgba(var(--farbe-primaer-rgb), 0.14); } .input_normal_ta { min-height: 150px; resize: vertical; } .stellenangebot_wrapper p b { font-family: var(--font-haupt); font-size: 0.88rem; color: var(--farbe-text); } .eingabe_right input[type="file"] { width: 100%; padding: 0.65rem 0.9rem; border: 1.5px dashed var(--farbe-linie); border-radius: 8px; font-family: var(--font-text); font-size: 0.88rem; color: var(--farbe-text-hell); background: var(--farbe-hg-alt); box-sizing: border-box; transition: border-color 0.2s ease, background-color 0.2s ease; } .eingabe_right input[type="file"]:focus { outline: none; border-color: var(--farbe-akzent); background: var(--farbe-weiss); } .stellenangebot_wrapper input[type="checkbox"] { width: auto; accent-color: var(--farbe-primaer); margin-right: 0.5rem; vertical-align: middle; cursor: pointer; } /* Nur das Datenschutz-Einverstaendnis-Label (direkt hinter der Checkbox im Markup, nicht in .eingabe_left verschachtelt) — bewusst per Sibling-Selektor statt ".stellenangebot_wrapper label", damit diese Regel NICHT mit gleicher Spezifitaet die ".eingabe_left label"-Feldlabels (Name, Vorname, ...) weiter oben ueberschreibt. */ .stellenangebot_wrapper input[type="checkbox"] + label { font-size: 0.85rem; font-family: var(--font-text); color: var(--farbe-text-hell); line-height: 1.6; } .stellenangebot_wrapper input[type="checkbox"] + label a { color: var(--farbe-primaer); text-decoration: underline; } .stellenangebot_wrapper .status { font-family: var(--font-haupt); font-size: 0.84rem; font-weight: 700; margin-bottom: 0.6rem; } /* .button/.button-primary: eigene CMS-Vorlage fuer den Absende-Button, optisch an .btn/.btn-primaer oben angeglichen (Pill-Form, Cuprum, versal). .button-icon/.button-icon-left sind reine Markup-Marker ohne eigenes CSS auf dieser Plattform (kein Icon-Inhalt vorgesehen) — bewusst nicht zusaetzlich stylen, um kein Phantom-Icon-Padding zu erzeugen. */ .button.button-primary { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--farbe-primaer); color: var(--farbe-weiss); padding: 0.85rem 1.9rem; font-family: var(--font-haupt); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.03em; border: 2px solid var(--farbe-primaer); border-radius: var(--radius-btn); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; margin-top: 0.5rem; } .button.button-primary:hover, .button.button-primary:focus-visible { background-color: var(--farbe-primaer-dunkel); border-color: var(--farbe-primaer-dunkel); transform: translateY(-2px); box-shadow: var(--schatten-hover); } /* Kein "outline:none" hier — sichtbarer Fokusring kommt aus der globalen ":focus-visible"-Regel und bleibt erhalten. */ .oeffnungszeiten-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .oeffnungszeiten-tabelle tr { border-bottom: 1px solid var(--farbe-linie); } .oeffnungszeiten-tabelle td, .oeffnungszeiten-tabelle th { padding: 0.6rem 0; color: var(--farbe-text-hell); } .oeffnungszeiten-tabelle td:first-child, .oeffnungszeiten-tabelle th { font-weight: 700; color: var(--farbe-text); width: 120px; } .oeffnungszeiten-tabelle th { text-align: left; font-weight: inherit; } /* main18.js verpackt jeden "&"-getrennten Zeitbereich in ein eigenes span, damit der Browser nicht mitten in "15:00 – 19:00 Uhr" umbricht */ .zeitbereich { white-space: nowrap; } /* Anfahrt */ .anfahrt-a { padding: var(--abstand-l) 0; } .anfahrt-a-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .anfahrt-a-info h2 { margin-bottom: 0.4rem; } .anfahrt-a-linie { width: 40px; height: 3px; background: var(--farbe-akzent); border-radius: 2px; margin: 0.8rem 0 1.6rem; } .anfahrt-a-kontakt-liste { list-style: none; } .anfahrt-a-kontakt-liste li { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.8rem 0; border-bottom: 1px solid var(--farbe-linie); font-size: 0.94rem; color: var(--farbe-text-hell); } .anfahrt-a-kontakt-liste .ico, .ico { width: 36px; height: 36px; background: var(--farbe-hg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--farbe-primaer); flex-shrink: 0; font-size: 0.95rem; } #map-zzam { width: 100%; height: 380px; border-radius: var(--radius-karte); overflow: hidden; border: 1px solid var(--farbe-linie); } /* -------------------------------------------------------------------------- SEITEN-LAYOUT — Fliesstext, Autoren-Box, AEO-Abstract, Disclaimer -------------------------------------------------------------------------- */ .seite-inhalt { padding: var(--abstand-l) 0; } .seite-inhalt h2 { margin: 2rem 0 1rem; } .seite-inhalt h3 { margin: 1.5rem 0 0.8rem; color: var(--farbe-primaer); } .seite-inhalt p { color: var(--farbe-text-hell); margin-bottom: 1rem; font-size: 1rem; } .seite-inhalt ul { color: var(--farbe-text-hell); padding-left: 1.5rem; margin-bottom: 1rem; } .seite-inhalt ul li { margin-bottom: 0.4rem; } .autoren-box { background: var(--farbe-hg); border: 1px solid var(--farbe-linie); border-left: 4px solid var(--farbe-primaer); border-radius: 0 8px 8px 0; padding: 1.1rem 1.4rem; margin: 2rem 0; display: flex; align-items: center; gap: 1rem; } .autoren-box-icon { width: 42px; height: 42px; background: var(--farbe-primaer); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--farbe-weiss); font-size: 1rem; flex-shrink: 0; } .autoren-box-text { font-size: 0.85rem; color: var(--farbe-text-hell); } .autoren-box-text strong { color: var(--farbe-text); } .medizinischer-disclaimer { background: rgba(var(--farbe-primaer-rgb), 0.06); border: 1px solid var(--farbe-linie); border-radius: 8px; padding: 1.1rem 1.4rem; margin-top: 2rem; font-size: 0.8rem; color: var(--farbe-text-hell); } .aeo-abstract { background: var(--farbe-hg); border-left: 4px solid var(--farbe-sekundaer); padding: 1.3rem 1.7rem; border-radius: 0 8px 8px 0; margin-bottom: 2rem; } .aeo-abstract p { font-size: 1.02rem; color: var(--farbe-text); font-weight: 400; line-height: 1.7; margin: 0; } /* -------------------------------------------------------------------------- SCROLL-ANIMATIONEN -------------------------------------------------------------------------- */ .scroll-animate { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .scroll-animate.sichtbar { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- SCROLL-TO-TOP -------------------------------------------------------------------------- */ .scroll-top { position: fixed; bottom: 1.8rem; right: 1.8rem; width: 46px; height: 46px; background: var(--farbe-tinte); color: var(--farbe-weiss); border: none; border-radius: 50%; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(var(--farbe-tinte-rgb), 0.32); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.2s; z-index: 9000; } .scroll-top.sichtbar { opacity: 1; visibility: visible; } .scroll-top:hover { background: var(--farbe-akzent); transform: translateY(-3px); } /* -------------------------------------------------------------------------- GALERIE — Bento-Grid, erstes Bild mit grosser Eckschwelle -------------------------------------------------------------------------- */ .galerie { padding: var(--abstand-l) 0; background: var(--farbe-hg); } .galerie-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: var(--abstand-s); max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .galerie-item { overflow: hidden; border-radius: var(--radius-karte); position: relative; background: var(--farbe-tinte); } .galerie-item:first-child { grid-column: span 2; grid-row: span 2; border-radius: var(--ecke-signatur-gross); } .galerie-bild { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; min-height: 180px; } .galerie-item:first-child .galerie-bild { min-height: 380px; } .galerie-overlay { position: absolute; inset: 0; background: rgba(15,46,43,0); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; } .galerie-item:hover .galerie-bild { transform: scale(1.06); } .galerie-item:hover .galerie-overlay { background: rgba(15,46,43,0.32); } .galerie .section-header { text-align: center; margin-left: auto; margin-right: auto; max-width: 640px; padding: 0 2rem; } @media (max-width: 1024px) { .galerie-grid { grid-template-columns: repeat(2, 1fr); } .galerie-item:first-child { grid-column: span 2; grid-row: span 1; } .galerie-item:first-child .galerie-bild { min-height: 280px; } } @media (max-width: 480px) { .galerie-grid { grid-template-columns: 1fr; padding: 0 1rem; } .galerie-item:first-child { grid-column: span 1; } } /* ========================================================================== FOOTER — dunkle Tinte, uebernimmt die Chip-/Rundform-Sprache des Headers ========================================================================== */ footer[role="contentinfo"], .site-footer { background: var(--farbe-tinte); color: rgba(255,255,255,0.78); padding: var(--abstand-l) 0 0; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 3rem; margin-bottom: var(--abstand-l); max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; } .footer-logo-text { margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.8rem; } .footer-logo-chip { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.94); display: flex; align-items: center; justify-content: center; padding: 6px; flex-shrink: 0; } .footer-logo-chip img { width: 100%; height: 100%; object-fit: contain; } .footer-logo-text strong { display: block; font-family: var(--font-anzeige); font-size: 1.15rem; color: var(--farbe-weiss); } .footer-logo-text span { font-size: 0.75rem; color: var(--farbe-sekundaer); letter-spacing: 0.08em; } footer h3 { font-family: var(--font-haupt); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farbe-sekundaer); margin-bottom: 1rem; } footer a { color: rgba(255,255,255,0.7); } footer ul { list-style: none; } footer ul li { margin-bottom: 0.5rem; } footer ul li a { font-size: 0.86rem; transition: color 0.2s; } footer ul li a:hover { color: var(--farbe-sekundaer); } footer p { font-size: 0.86rem; line-height: 1.7; } .footer-adresse { font-style: normal; line-height: 1.8; font-size: 0.86rem; color: rgba(255,255,255,0.68); } .footer-adresse strong { color: var(--farbe-weiss); } .footer-kontakt-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: rgba(255,255,255,0.68); margin-bottom: 0.6rem; } .footer-kontakt-item a { color: rgba(255,255,255,0.68); } .footer-kontakt-item a:hover { color: var(--farbe-sekundaer); } .footer-social { display: flex; gap: 0.7rem; margin-top: 1.2rem; } .footer-social a { width: 36px; height: 36px; background: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.65); font-size: 0.85rem; transition: all 0.2s ease; } .footer-social a:hover { background: var(--farbe-akzent); color: var(--farbe-weiss); } .footer-oeffnung { font-size: 0.86rem; width: 100%; border-collapse: collapse; margin-top: 0.5rem; } .footer-oeffnung tr { border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-oeffnung td { padding: 0.35rem 0; color: rgba(255,255,255,0.65); } .footer-oeffnung td:first-child { font-weight: 700; color: rgba(255,255,255,0.85); width: 80px; padding-right: 1rem; } .site-footer .oeffnungszeiten-tabelle td, .site-footer .oeffnungszeiten-tabelle th { color: rgba(255,255,255,0.7); } .site-footer .oeffnungszeiten-tabelle td:first-child, .site-footer .oeffnungszeiten-tabelle th { color: var(--farbe-sekundaer); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 1.2rem 0; } .footer-bottom-inner { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .footer-bottom p, .footer-bottom span { font-size: 0.78rem; color: rgba(255,255,255,0.45); } .footer-bottom a { color: rgba(255,255,255,0.55); } .footer-bottom a:hover { color: var(--farbe-sekundaer); } /* CMS-Freitext-Listen (redaktionell eingefuegte