/* Theme Name: Hello Elementor Child Theme URI: https://elementor.com/ Description: Child Theme für Hello Elementor 3.4.5 Author: Samar Maamoun Author URI: https://netfrei.de/ Template: hello-elementor Version: 1.0 Text Domain: hello-elementor-child */ /* 1) Google Font laden (einfachste Variante) */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); /* 2) Design-Variablen (Light Mode) */ :root { --font-size: 18px; --background: #fafafa; --foreground: #2d3748; --card: #ffffff; --card-foreground: #2d3748; --popover: #ffffff; --popover-foreground: #2d3748; --primary: #6b8cae; --primary-foreground: #ffffff; --secondary: #d4b5c0; --secondary-foreground: #2d3748; --muted: #e8eef3; --muted-foreground: #718096; --accent: #e8eef3; --accent-foreground: #2d3748; --destructive: #d4183d; --destructive-foreground: #ffffff; --border: rgba(0, 0, 0, 0.08); --input: transparent; --input-background: #f7fafc; --switch-background: #cbd5e0; --font-weight-medium: 500; --font-weight-normal: 400; --ring: #6b8cae; --chart-1: #6b8cae; --chart-2: #d4b5c0; --chart-3: #a0aec0; --chart-4: #9db4c9; --chart-5: #e8c5d0; --radius: 0.5rem; --sidebar: #ffffff; --sidebar-foreground: #2d3748; --sidebar-primary: #6b8cae; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #f7fafc; --sidebar-accent-foreground: #2d3748; --sidebar-border: #e2e8f0; --sidebar-ring: #6b8cae; } /* 3) (Optional) Dark Mode – wirkt nur, wenn du irgendwo .dark auf oder setzt */ .dark { --background: #1a202c; --foreground: #f7fafc; --card: #2d3748; --card-foreground: #f7fafc; --popover: #2d3748; --popover-foreground: #f7fafc; --primary: #6b8cae; --primary-foreground: #ffffff; --secondary: #4a5568; --secondary-foreground: #f7fafc; --muted: #4a5568; --muted-foreground: #cbd5e0; --accent: #4a5568; --accent-foreground: #f7fafc; --destructive: #fc8181; --destructive-foreground: #1a202c; --border: rgba(255, 255, 255, 0.1); --input: #4a5568; --ring: #6b8cae; --font-weight-medium: 500; --font-weight-normal: 400; --chart-1: #6b8cae; --chart-2: #d4b5c0; --chart-3: #a0aec0; --chart-4: #9db4c9; --chart-5: #e8c5d0; --sidebar: #2d3748; --sidebar-foreground: #f7fafc; --sidebar-primary: #6b8cae; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #4a5568; --sidebar-accent-foreground: #f7fafc; --sidebar-border: #4a5568; --sidebar-ring: #6b8cae; } #wpadminbar{ z-index: 999999; } html, body{ overflow-x:hidden; } /* 4) Basis-HTML & Body */ html { font-size: var(--font-size); /* 1rem = 18px */ scroll-behavior: smooth; } body { background-color: #fff; color: var(--foreground); font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } dd, dl, dt, li, ol, ul { line-height: 1.9em; } .nf-topbar{ position: fixed; top: 0; left: 0; right: 0; /* oder width:100% */ z-index: 9999; background: #fcfafb; color: #6b8bad; } .nf-topbar__inner{ padding: 6px 16px; display: flex; justify-content: flex-end; align-items: center; gap: 6px; } .nf-topbar__inner a{ color: #6b8bad; font-weight: 600; } .nf-topbar__icon{ width:14px; height:14px; fill: currentColor; /* ← wird weiß */ } .site-header{ background-color:#fcfcfc; position: fixed; width: 100%; height: 100px; z-index: 9; top: 30px; } .site-header .site-title a{ font-weight: 500; } .site-navigation ul.menu li { padding-top: 5px; } .roundborder{ border-radius: 4px; } div.button-style, li.button-style{ background-color: #6b8cae; padding: 5px 13px; margin-left: 20px; color: #fff; border-radius: 4px; } div.button-style:hover, li.button-style:hover{ opacity: 0.9; } div.button-style a,div.button-style a:hover, li.button-style a, li.button-style a:hover{ color: #fff; } .hero-container{ max-height: 87vh; overflow: hidden; } .bg-rosa-light-10{ background-color: #d4b5c010 ; } .bg-rosa-light-30{ background-color: #d4b5c030 ; } .bg-blau-5{ background-color: #f2f4f6; } /* 5) Simple „border / outline“-Basis (statt @apply border-border outline-ring/50) */ *, *::before, *::after { box-sizing: border-box; } /* 6) Basis-Typografie (vereinfacht aus deinem @layer base Block) */ h1 { font-size: 2.5rem; /* 2.5 * 18px = 45px */ font-weight: var(--font-weight-medium); line-height: 1.2; } h2 { font-size: 2rem; /* 36px */ font-weight: var(--font-weight-medium); line-height: 1.3; } h3 { font-size: 1.5rem; /* 27px */ font-weight: var(--font-weight-medium); line-height: 1.4; } h4 { font-size: 1.25rem; /* 22.5px */ font-weight: var(--font-weight-medium); line-height: 1.5; } p { font-size: 1rem; /* 18px */ font-weight: var(--font-weight-normal); line-height: 1.7; color: var(--muted-foreground); } .hero-container p{ color: #fff; } label { font-size: 0.95rem; font-weight: var(--font-weight-medium); line-height: 1.5; } button { font-size: 1rem; font-weight: var(--font-weight-medium); line-height: 1.5; } input, textarea, select { font-size: 1rem; font-weight: var(--font-weight-normal); line-height: 1.5; } .check-list ul { list-style: none; margin: 0; padding: 0; } .check-list ul li { position: relative; padding-left: 1.75rem; /* Platz für Icon */ } .check-list ul li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 20px; height: 20px; background-color: var(--primary); /* Icon-Farbe */ mask: url('./assets/img/check.svg') no-repeat center; mask-size: contain; -webkit-mask: url('./assets/img/check.svg') no-repeat center; /* Safari */ -webkit-mask-size: contain; } .icon { display: inline-block; background-color: #d4b5c0; border-radius: 4px; } .icon::before { content: ""; display: block; width: 25px; height: 25px; padding: 17px; box-sizing: content-box; background-color: #fff; border-radius: 4px; } .icon.brain::before{ mask: url("/wp-content/themes/hello-elementor-child/assets/img/brain.svg") no-repeat center; mask-size: 28px 28px;-webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/brain.svg") no-repeat center; -webkit-mask-size: 28px 28px; } .icon.activity::before{ mask: url("/wp-content/themes/hello-elementor-child/assets/img/activity.svg") no-repeat center; mask-size: 28px 28px; -webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/activity.svg") no-repeat center; -webkit-mask-size: 28px 28px; } .icon.home::before{ mask: url("/wp-content/themes/hello-elementor-child/assets/img/home.svg") no-repeat center; mask-size: 28px 28px; -webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/home.svg") no-repeat center; -webkit-mask-size: 28px 28px; } /*-----------*/ .icon.arzt::before{ mask: url("/wp-content/themes/hello-elementor-child/assets/img/arzt.svg") no-repeat center; mask-size: 28px 28px; -webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/arzt.svg") no-repeat center; -webkit-mask-size: 28px 28px; } .icon.clock::before{ mask: url("/wp-content/themes/hello-elementor-child/assets/img/clock.svg") no-repeat center; mask-size: 28px 28px; -webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/clock.svg") no-repeat center; -webkit-mask-size: 28px 28px; } .icon.heart::before{ mask: url("/wp-content/themes/hello-elementor-child/assets/img/heart.svg") no-repeat center; mask-size: 28px 28px; -webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/heart.svg") no-repeat center; -webkit-mask-size: 28px 28px; } .icon.mail::before{ mask: url("/wp-content/themes/hello-elementor-child/assets/img/mail.svg") no-repeat center; mask-size: 28px 28px; -webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/mail.svg") no-repeat center; -webkit-mask-size: 28px 28px; } .simple{ position: absolute; display: block; left:-10px; padding-top:6px; } .marker::before{ content: ""; display: inline; width: 25px; height: 25px; padding: 17px; box-sizing: content-box; background-color: #d4b5c0; border-radius: 4px; mask: url("/wp-content/themes/hello-elementor-child/assets/img/marker.svg") no-repeat center; mask-size: 28px 28px; -webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/marker.svg") no-repeat center; -webkit-mask-size: 28px 28px; } .icon.phone::before{ mask: url("/wp-content/themes/hello-elementor-child/assets/img/phone.svg") no-repeat center; mask-size: 28px 28px; -webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/phone.svg") no-repeat center; -webkit-mask-size: 28px 28px; } .icon.therapy::before{ mask: url("/wp-content/themes/hello-elementor-child/assets/img/therapy.svg") no-repeat center; mask-size: 28px 28px; -webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/therapy.svg") no-repeat center; -webkit-mask-size: 28px 28px; } .icon.family::before{ mask: url("/wp-content/themes/hello-elementor-child/assets/img/family.svg") no-repeat center; mask-size: 28px 28px; -webkit-mask: url("/wp-content/themes/hello-elementor-child/assets/img/family.svg") no-repeat center; -webkit-mask-size: 28px 28px; } /* ===== Einheitliche Galerie MIT Lightbox ===== */ /* Grid-Items (jedes Bild-Widget) */ .uniform-gallery .elementor-widget-image { aspect-ratio: 4 / 3; /* ODER 1/1, 16/9 etc. */ overflow: hidden; } /* Link muss die volle Box ausfüllen */ .uniform-gallery .elementor-widget-image > a { display: block; width: 100%; height: 100%; } /* Bild füllt den Link komplett */ .uniform-gallery .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ===== WP Core Gallery: einheitliche Zuschnitte ===== */ .uniform-gallery.gallery, .uniform-gallery .gallery { /* optional: falls WP floats benutzt */ overflow: hidden; } /* jede Kachel */ .uniform-gallery .gallery-item { margin: 0; /* WP setzt oft Margin */ } /* der eigentliche Bild-Wrapper */ .uniform-gallery .gallery-icon { aspect-ratio: 4 / 3; /* <-- hier ändern: 1/1 oder 16/9 */ overflow: hidden; } /* Link muss die Kachel füllen (wichtig für Lightbox) */ .uniform-gallery .gallery-icon > a { display: block; width: 100%; height: 100%; } /* Bild füllt die Kachel */ .uniform-gallery .gallery-icon img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .elementor-slideshow__title{ display: none; } .e-n-accordion-item[open]>.e-n-accordion-item-title{ border-bottom: 0; } .e-n-accordion-item .elementor-element{ border-top: 0; } .footer-temp p{ font-size: 12px; } .vita-table { display: grid; gap: 0.75rem; } .vita-row { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .vita-date { padding-top:0.25em; font-weight: 400; color: var(--primary); white-space: nowrap; } .vita-text { color: var(--foreground); line-height: 1.6; } /* Mobile */ @media (max-width: 767px) { .vita-row { grid-template-columns: 1fr; } .vita-date { font-weight: 700; } .nf-topbar__inner a { font-size:15px; } .nf-topbar__icon { width: 18px; height: 18px; margin-left: -21px; position: absolute; } .site-header { top: 10px; } .site-navigation-toggle-holder{ padding: 0; } } @media (min-width: 992px) { .page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header), body:not([class*=elementor-page-]) .site-main{ max-width: 1135px; } } @media (max-width:370px){ .site-header .site-title a { font-size:18px; } .button-style{ padding: 0px 6px 0px 6px !important; } .elementor-element-7bd57e7 p{ line-height: 24px; } }