/* Theme Name: Hello Elementor Child Theme URI: https://github.com/elementor/hello-theme-child/ Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team Author: Elementor Team Author URI: https://elementor.com/ Template: hello-elementor Version: 2.0.0 Text Domain: hello-elementor-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* Add your custom styles here */ /* General */ /* Anfang Seitentitel in Elementor ausblenden*/ .page .entry-title, .post .entry-title { display: none; } .elementor-section.elementor-section-boxed > .elementor-container { max-width: 90rem; margin: 0 auto; } /* Typografie */ h1, h2 { font-family: "Lora", serif; font-weight: 400; text-transform: uppercase; line-height: 1.2 !important; padding-bottom: clamp(1.25rem, 1rem + 1vw, 1.875rem) !important; letter-spacing: 0.02em; color: var(--e-global-color-primary); } h3 { font-family: "Lora", "Times New Roman", Times, serif; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; color: var(--e-global-color-primary); } /* Silbentrennung nur für H1 aktivieren (benötigt korrektes lang-Attribut, z.B. ) */ h1 { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } p { color: var(--e-global-color-text); font-family: "WorkSans", Arial, sans-serif; margin: 0 !important; } ul { color: var(--e-global-color-text); font-family: "WorkSans", Arial, sans-serif; margin: 0 !important; margin-left: -0.9rem !important; } /* Ausnahme für Elementor Icon-Listen: gleichmäßiger Abstand für zentrierten Trennstrich */ .elementor-icon-list-items { margin-left: 0 !important; } /* Einzelne Icon-List-Items: symmetrisches margin-inline für zentrierten Trennstrich */ .elementor-icon-list-item { margin-left: 0 !important; margin-inline: calc( 1.2rem / 2 ) !important; /* Hälfte des Trennstrich-Abstands auf jeder Seite */ } /* Fix: Elementor Form Validation Icons für mobile Geräte */ /* Fallback für mobile Browser, die SVG Data-URIs oder Icon-Fonts blockieren */ .elementor-message.elementor-message-danger:before { content: "✕" !important; /* Unicode X-Symbol als Fallback */ display: inline-block !important; margin-right: 0.5em !important; font-weight: bold !important; font-size: 1.2em !important; line-height: 1 !important; color: inherit !important; background-image: none !important; /* SVG Data-URI deaktivieren */ } /* Content Elememte */ /* Constrain all Elementor content to unified max width with responsive gutters */ .elementor-section > .elementor-container, .e-con > .e-con-inner { max-width: var(--hl-content-max); width: 100%; margin-inline: auto; box-sizing: border-box; } /* Opt-in: Apply side gutters only where .hl-gutter is set */ .hl-gutter > .elementor-container, .hl-gutter > .e-con-inner, .elementor-element.hl-gutter > .e-con-inner, .hl-gutter.e-con > .e-con-inner { padding-inline: var(--hl-content-gutter); } /* Align Elementor container variables in container mode */ .hl-gutter.e-con, .elementor-element.hl-gutter.e-con { --container-padding-left: var(--hl-content-gutter); --container-padding-right: var(--hl-content-gutter); } /* Boxed white background only inside the 90rem container (avoid full-width white) */ .hl-boxed-bg { background: none !important; /* clear any full-width background on the section */ } .hl-boxed-bg > .elementor-container, .hl-boxed-bg > .e-con-inner { background: #ffffff; /* Optional aesthetics: border-radius: 0.25rem; box-shadow: 0 8px 24px rgba(0,0,0,0.04); */ } /* Boxed variant without white background inside the container */ .hl-boxed { background: none !important; /* clear any full-width background on the section */ } .hl-boxed > .elementor-container, .hl-boxed > .e-con-inner { /* keep inner container transparent (no white background) */ background: none !important; } /* Boxed variant with blue (secondary) background inside the container */ .hl-boxed-bg-secondary { background: none !important; /* clear any full-width background on the section */ } .hl-boxed-bg-secondary > .elementor-container, .hl-boxed-bg-secondary > .e-con-inner { background: var(--e-global-color-secondary) !important; } /* Boxed variant with primary background inside the container */ .hl-boxed-bg-primary { background: none !important; /* clear any full-width background on the section */ } .hl-boxed-bg-primary > .elementor-container, .hl-boxed-bg-primary > .e-con-inner { background: var(--e-global-color-primary) !important; } /* Boxed variant with accent background inside the container */ .hl-boxed-bg-accent { background: none !important; /* clear any full-width background on the section */ } .hl-boxed-bg-accent > .elementor-container, .hl-boxed-bg-accent > .e-con-inner { background: var(--e-global-color-accent) !important; } /* Utilities: disable gutters/padding on demand (use on a Section/Container) */ .hl-no-gutter > .elementor-container, .hl-no-gutter > .e-con-inner { padding-inline: 0 !important; } .hl-no-pad > .elementor-container, .hl-no-pad > .e-con-inner { padding: 0 !important; } /* Utility: Make a widget take only the space it needs inside flex layouts */ .hl-fit, .elementor-element.hl-fit { width: auto !important; /* override Elementor's 100% widget width */ max-width: max-content !important; /* shrink to intrinsic size */ flex: 0 0 auto !important; /* no grow, no shrink beyond content */ align-self: flex-start !important; /* avoid cross-axis stretch */ display: inline-flex !important; /* behave like inline-size content */ } .hl-fit .elementor-widget-container { width: auto !important; } /* ===== Visibility Utilities ===== */ /* Elemente bei Viewport-Breiten bis einschließlich 1024px ausblenden */ @media (max-width: 1024px) { .hl-hide-upto-1024, .hl-hide-lte-1024 { display: none !important; } } /* ===== Form Utilities ===== */ /* Kleinere, rechteckige Checkboxen mit grauem Rahmen, vertikal nach unten verschoben */ .hl-checkbox-small input[type="checkbox"], .hl-checkbox-small .elementor-field-type-checkbox input[type="checkbox"], .elementor-element.hl-checkbox-small input[type="checkbox"] { width: 1rem !important; /* kleiner als Standard */ height: 1rem !important; min-width: 1rem !important; min-height: 1rem !important; border-radius: 0 !important; /* rechteckig statt rund */ border: 1px solid #666666 !important; /* grauer Rahmen */ outline: 1px solid #666666 !important; /* zusätzliche Outline für bessere Sichtbarkeit */ outline-offset: 0 !important; appearance: none !important; /* Standard-Browser-Styling entfernen */ -webkit-appearance: none !important; -moz-appearance: none !important; background: #ffffff !important; /* weißer Hintergrund */ cursor: pointer !important; vertical-align: middle !important; transform: translateY(2px) !important; /* nach unten verschieben */ margin-right: 0.5rem !important; /* Abstand zum Label */ flex-shrink: 0 !important; /* verhindert Schrumpfen in Flex-Layouts */ transition: background-color 0.2s ease, border-color 0.2s ease !important; } /* Checked State: dunkler Hintergrund mit Häkchen-Symbol */ .hl-checkbox-small input[type="checkbox"]:checked, .hl-checkbox-small .elementor-field-type-checkbox input[type="checkbox"]:checked, .elementor-element.hl-checkbox-small input[type="checkbox"]:checked { background-color: #666666 !important; border-color: #666666 !important; outline-color: #666666 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important; background-size: 0.75rem !important; background-position: center !important; background-repeat: no-repeat !important; } /* Hover State */ .hl-checkbox-small input[type="checkbox"]:hover, .hl-checkbox-small .elementor-field-type-checkbox input[type="checkbox"]:hover, .elementor-element.hl-checkbox-small input[type="checkbox"]:hover { border-color: #444444 !important; outline-color: #444444 !important; } /* Focus State (Barrierefreiheit) */ .hl-checkbox-small input[type="checkbox"]:focus, .hl-checkbox-small .elementor-field-type-checkbox input[type="checkbox"]:focus, .elementor-element.hl-checkbox-small input[type="checkbox"]:focus { outline: 2px solid #666666 !important; outline-offset: 2px !important; box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.1) !important; } /* Label alignment (falls nötig) */ .hl-checkbox-small .elementor-field-type-checkbox label, .hl-checkbox-small .elementor-field-subgroup label { display: inline-flex !important; align-items: center !important; cursor: pointer !important; } /* ===== Button Utilities ===== */ /* Icon schiebt sich bei Hover leicht nach rechts; Icon erbt die Textfarbe. Funktioniert, wenn die Klasse auf dem Button-Widget ODER direkt auf dem .elementor-button liegt. */ .hl-btn-icon-slide .elementor-button-icon, .elementor-button.hl-btn-icon-slide .elementor-button-icon { font-size: 2.3rem; color: inherit; transition: color 0.2s ease, transform 0.2s ease; transform: translateY(1px); /* minimal nach unten versetzt */ } /* ===== Width Utilities ===== */ /* Begrenzt die Breite responsiv auf max. 46rem (Desktop) und ca. 1rem (Mobile) mit linearer Interpolation */ /* Wirken zuverlässig in Elementor (Flex) auf Widgets und Container */ .hl-maxw-46, .elementor-element.hl-maxw-46 { /* Primäre Kappung */ max-width: var(--hl-maxw-1to46) !important; /* Robust: Breite direkt als Minimum zwischen 100% und Kappung setzen */ width: min(100%, var(--hl-maxw-1to46)) !important; min-width: 0 !important; /* erlaubt Schrumpfen in Flex-Layouts */ /* Kein flex-basis, um in column-Layouts keine Höhe zu erzwingen */ } /* Falls die Klasse auf einem Widget liegt, auch den inneren Container begrenzen */ .hl-maxw-46 > .elementor-widget-container, .elementor-element.hl-maxw-46 > .elementor-widget-container { max-width: inherit !important; width: 100% !important; } /* Falls die Klasse auf einem Container (.e-con) liegt, Variablen für Containerbreite setzen */ .hl-maxw-46.e-con, .elementor-element.hl-maxw-46.e-con { --container-max-width: var(--hl-maxw-1to46) !important; --container-width: 100% !important; --container-min-width: 0 !important; } /* Formular-Begrenzung: 43.75rem (Desktop) → interpoliert → mobil keine Kappung */ .hl-maxw-43-75, .elementor-element.hl-maxw-43-75 { max-width: var(--hl-maxw-0to43_75) !important; width: min(100%, var(--hl-maxw-0to43_75)) !important; min-width: 0 !important; } .hl-maxw-43-75 > .elementor-widget-container, .elementor-element.hl-maxw-43-75 > .elementor-widget-container { max-width: inherit !important; width: 100% !important; } .hl-maxw-43-75.e-con, .elementor-element.hl-maxw-43-75.e-con { --container-max-width: var(--hl-maxw-0to43_75) !important; --container-width: 100% !important; --container-min-width: 0 !important; } /* Breakpoint-Fallbacks */ @media (max-width: 1024px) { .hl-maxw-43-75, .elementor-element.hl-maxw-43-75 { max-width: none !important; /* mobil: keine Kappung, volle Breite */ width: 100% !important; } } @media (min-width: 1025px) { .hl-maxw-43-75, .elementor-element.hl-maxw-43-75 { max-width: 43.75rem !important; width: min(100%, 43.75rem) !important; } } /* ===== Grid Utilities ===== */ /* Grid-Container schrumpft auf Inhaltsbreite inkl. Gap */ .hl-grid-fit, .elementor-element.hl-grid-fit { display: inline-grid !important; width: max-content !important; /* nimmt Breite der Tracks + gaps */ max-width: 100% !important; /* überschreitet nie die verfügbare Breite */ min-width: 0 !important; } .hl-grid-fit.e-con, .elementor-element.hl-grid-fit.e-con { --container-width: auto !important; --container-max-width: none !important; --container-min-width: 0 !important; } /* Optionale Variante: automatische Spalten als inhaltsbreite Tracks anlegen */ .hl-grid-fit--auto-cols { grid-auto-flow: column; grid-auto-columns: max-content; } /* ===== Image Grid Utilities ===== */ /* Bereinigt: Verwendet wird die Equal-Height-Row (.hl-img-row + .hl-img-eqH). Aspect-Ratio (.hl-img-tile, .hl-aspect-*) und Fixed-Höhe (.hl-img-fixed) entfernt. */ /* Einfache Grid-Hilfe: 3/2/1 Spalten je Breakpoint */ .hl-grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 1024px) { .hl-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .hl-grid-3 { grid-template-columns: 1fr; } } /* ===== Equal-Height Row (variable Breite, gleiche Höhe) ===== */ /* Container: Reihe mit einheitlicher Bildhöhe, Breite passt sich an das Seitenverhältnis an */ .hl-img-row { display: flex !important; align-items: stretch !important; gap: var(--hl-img-gap, 1.25rem) !important; flex-wrap: nowrap; } /* Jedes Bild-Widget in der Reihe */ .hl-img-eqH, .elementor-element.hl-img-eqH { width: auto !important; max-width: none !important; flex: 0 0 auto !important; /* verhindert Strecken */ } /* Das Bild selbst: feste Höhe, Breite automatisch → gleich hohe Kacheln mit variabler Breite */ .hl-img-eqH img, .elementor-element.hl-img-eqH img { height: var(--hl-img-row-h, 18rem) !important; /* einheitliche Höhe */ width: auto !important; /* Breite proportional */ display: block; } /* Ab Tablet: alle umgebenden Wrapper entkoppeln, damit die Breite sich am Bild orientiert */ @media (min-width: 768px) { .hl-img-eqH, .elementor-element.hl-img-eqH, .hl-img-eqH > .elementor-widget-container, .hl-img-eqH figure, .hl-img-eqH a { width: auto !important; max-width: none !important; } /* Flex-Item soll nur so breit sein wie sein Inhalt */ .hl-img-eqH, .elementor-element.hl-img-eqH { display: inline-flex !important; } /* Bild darf nicht durch max-width:100% zusammengeschoben werden */ .hl-img-eqH img, .elementor-element.hl-img-eqH img { max-width: none !important; } } /* Desktop-Höhe 27.5rem als Modifikator */ @media (min-width: 1025px) { .hl-img-row--h-27_5 { --hl-img-row-h: 27.5rem; } /* Zusätzliche, feinere Höhen-Stufen */ .hl-img-row--h-20 { --hl-img-row-h: 20rem; } .hl-img-row--h-22 { --hl-img-row-h: 22rem; } .hl-img-row--h-24 { --hl-img-row-h: 24rem; } .hl-img-row--h-30 { --hl-img-row-h: 30rem; } } /* Responsiver Fallback: auf kleineren Screens umbrechen und Bilder vollbreit anzeigen */ @media (max-width: 767.98px) { .hl-img-row { flex-wrap: wrap; } .hl-img-eqH, .elementor-element.hl-img-eqH { width: 100% !important; } .hl-img-eqH img, .elementor-element.hl-img-eqH img { width: 100% !important; height: auto !important; } } /* Explizite Fallbacks für Breakpoints */ @media (max-width: 1024px) { .hl-maxw-46, .elementor-element.hl-maxw-46 { /* Bis 1024px: nicht kappen, volle Breite nutzen (Eltern-Padding sorgt für Rand) */ max-width: none !important; width: 100% !important; margin-inline: 0 !important; min-width: 0 !important; } } @media (min-width: 1025px) { .hl-maxw-46, .elementor-element.hl-maxw-46 { max-width: 51.875rem !important; width: min(100%, 51.875rem) !important; /* kein flex-basis setzen */ } } .hl-btn-icon-slide .elementor-button:hover .elementor-button-icon, .elementor-button.hl-btn-icon-slide:hover .elementor-button-icon, .hl-btn-icon-slide .elementor-button:focus-visible .elementor-button-icon, .elementor-button.hl-btn-icon-slide:focus-visible .elementor-button-icon { transform: translate( 0.5rem, 1px ); /* horizontaler Slide + minimaler Down-Offset */ } .hl-btn-icon-slide .elementor-button-text, .elementor-button.hl-btn-icon-slide .elementor-button-text { margin: auto; } @media (prefers-reduced-motion: reduce) { .hl-btn-icon-slide .elementor-button-icon, .elementor-button.hl-btn-icon-slide .elementor-button-icon { transition: none; } } /* Utility: Dynamic section padding for content below hero */ .hl-section-pad > .elementor-container, .hl-section-pad > .e-con-inner { padding-inline: var(--hl-section-pad) !important; } /* ===== Responsive Padding Utility Classes ===== */ /* Basierend auf --hl-responsive-pad Variable (3.75rem bis 10rem zwischen 1290px-1440px) */ /* Padding rechts - erweiterte Selektoren für alle Container-Typen */ .hl-pad-right > .elementor-container, .hl-pad-right > .e-con-inner, .hl-pad-right.elementor-container, .hl-pad-right.e-con-inner, .hl-pad-right.e-con, .elementor-element.hl-pad-right, .e-con.hl-pad-right { padding-right: var(--hl-responsive-pad) !important; } /* Padding links - erweiterte Selektoren für alle Container-Typen */ .hl-pad-left > .elementor-container, .hl-pad-left > .e-con-inner, .hl-pad-left.elementor-container, .hl-pad-left.e-con-inner, .hl-pad-left.e-con, .elementor-element.hl-pad-left, .e-con.hl-pad-left { padding-left: var(--hl-responsive-pad) !important; } /* Padding inline (beide Seiten) - direkt auf e-con-inner abzielen */ .hl-pad-inline > .e-con-inner, .hl-pad-inline.e-con > .e-con-inner, .elementor-element.hl-pad-inline > .e-con-inner, .hl-pad-inline.e-con-inner, .hl-pad-inline.elementor-container { /* Logical + physical Fallbacks */ padding-inline: var(--hl-responsive-pad) !important; padding-left: var(--hl-responsive-pad) !important; padding-right: var(--hl-responsive-pad) !important; } /* Fallback für ältere Section-basierte Layouts */ .hl-pad-inline > .elementor-container, .elementor-element.hl-pad-inline > .elementor-container { /* Logical + physical Fallbacks */ padding-inline: var(--hl-responsive-pad) !important; padding-left: var(--hl-responsive-pad) !important; padding-right: var(--hl-responsive-pad) !important; } /* Elementor Container Mode: make sure container padding variables are aligned */ .hl-pad-inline.e-con, .elementor-element.hl-pad-inline.e-con { --container-padding-left: var(--hl-responsive-pad) !important; --container-padding-right: var(--hl-responsive-pad) !important; } .hl-pad-left.e-con, .elementor-element.hl-pad-left.e-con { --container-padding-left: var(--hl-responsive-pad) !important; } .hl-pad-right.e-con, .elementor-element.hl-pad-right.e-con { --container-padding-right: var(--hl-responsive-pad) !important; } /* ===== Vertikale Padding Utilities (oben, unten, block) ===== */ /* Verwenden --hl-block-pad (5rem → 3.5rem zwischen 1440px und 767px) */ /* Padding oben */ .hl-pad-top > .e-con-inner, .hl-pad-top.e-con > .e-con-inner, .elementor-element.hl-pad-top > .e-con-inner, .hl-pad-top.elementor-container { padding-top: var(--hl-block-pad) !important; } .hl-pad-top > .elementor-container, .elementor-element.hl-pad-top > .elementor-container { padding-top: var(--hl-block-pad) !important; } .hl-pad-top.e-con, .elementor-element.hl-pad-top.e-con { --container-padding-top: var(--hl-block-pad) !important; } /* Padding unten */ .hl-pad-bottom > .e-con-inner, .hl-pad-bottom.e-con > .e-con-inner, .elementor-element.hl-pad-bottom > .e-con-inner, .hl-pad-bottom.elementor-container { padding-bottom: var(--hl-block-pad) !important; } .hl-pad-bottom > .elementor-container, .elementor-element.hl-pad-bottom > .elementor-container { padding-bottom: var(--hl-block-pad) !important; } .hl-pad-bottom.e-con, .elementor-element.hl-pad-bottom.e-con { --container-padding-bottom: var(--hl-block-pad) !important; } /* Padding oben und unten (block) */ .hl-pad-block > .e-con-inner, .hl-pad-block.e-con > .e-con-inner, .elementor-element.hl-pad-block > .e-con-inner, .hl-pad-block.elementor-container { padding-block: var(--hl-block-pad) !important; padding-top: var(--hl-block-pad) !important; /* physischer Fallback */ padding-bottom: var(--hl-block-pad) !important; /* physischer Fallback */ } .hl-pad-block > .elementor-container, .elementor-element.hl-pad-block > .elementor-container { padding-block: var(--hl-block-pad) !important; padding-top: var(--hl-block-pad) !important; padding-bottom: var(--hl-block-pad) !important; } .hl-pad-block.e-con, .elementor-element.hl-pad-block.e-con { --container-padding-top: var(--hl-block-pad) !important; --container-padding-bottom: var(--hl-block-pad) !important; } /* Canvas (page background) color */ html, body { background-color: var(--e-global-color-896e876); } /* ===== CSS Custom Properties ===== */ /* Variables for layout and spacing */ :root { /* Hero height across breakpoints */ --hl-hero-offset: clamp(16rem, 52vh, 32rem); /* Content layout */ --hl-content-max: 90rem; --hl-content-gutter: clamp(1rem, 0.5rem + 3vw, 4rem); /* Section padding for content areas - wird durch Media Queries überschrieben */ --hl-section-pad: 2rem; /* Fallback/Mobile */ /* Menü: Standard-Padding für Desktop-Dropdowns */ --hl-menu-dd-xpad: 1.25rem; /* horizontal */ --hl-menu-dd-ypad: 1rem; /* vertikal */ /* Menü (Tablet/Mobile): individuelle Start/End-Paddingwerte */ --hl-menu-dd-xpad-m-start: 1.25rem; /* links (oder inline-start) */ --hl-menu-dd-xpad-m-end: 2rem; /* rechts (oder inline-end) */ /* Zusätzliche Einrückung nur für Untermenü-Punkte auf Tablet/Mobile */ --hl-menu-dd-sub-indent-m: 1.25rem; /* Absolute linke Padding-Werte für Subitems */ --hl-menu-dd-sub-left-m: 2rem; /* Mobile (≤767.98px) */ --hl-menu-dd-sub-left-t: 3.1rem; /* Tablet (768–1199px) */ /* Mobile: Einrückung zusätzlich über linken Border steuern */ --hl-menu-dd-sub-border-m: 1.625rem; /* Smartphone-Indent via border-left */ /* Responsive Padding Mapping: 1290px → 3.75rem, 1440px → 10rem Linear Interpolation with clamp to cap outside the range */ --hl-responsive-pad: clamp(3.75rem, calc(66.667vw - 800px), 10rem); /* Vertikales Responsive Padding (Block): 1440px → 5rem (80px), 767px → 3.5rem (56px) */ --hl-block-pad: clamp(56px, calc(3.565vw + 28.66px), 80px); /* Responsive max-width: 1rem @375px → 51.875rem @1024px, geklammert */ --hl-maxw-1to46: clamp(1rem, calc(125.424vw - 454.34px), 51.875rem); /* Responsive max-width (Formulare): 0px @375px → 43.75rem (700px) @1024px */ /* y_px = 107.86vw - 404.5px, geklammert auf 0–43.75rem */ --hl-maxw-0to43_75: clamp(0px, calc(107.86vw - 404.5px), 43.75rem); } /* Tablet → Mobile Mapping für --hl-responsive-pad 1024px → 3.75rem (60px), 768px → 1.875rem (30px) Unterhalb 768px bleibt es bei min 30px durch clamp */ @media (max-width: 1024px) { :root { /* y_px = 11.71875vw - 60px, geklammert auf 30–60px */ --hl-responsive-pad: clamp(30px, calc(11.71875vw - 60px), 60px); } } /* ===== Hero Section Styling ===== */ /* Ensure hero has the expected height */ .hl-hero { min-height: var(--hl-hero-offset); position: relative; max-width: var(--hl-content-max); width: 100%; margin-inline: auto; /* margin-top entfernt, damit Elementor-Einstellungen greifen */ } /* If Elementor marks the container as full-width (e-con-full), force boxed width for the hero */ .hl-hero.e-con, .hl-hero.e-con-full { max-width: var(--hl-content-max) !important; width: min(100%, var(--hl-content-max)) !important; min-width: 0 !important; /* override Elementor defaults like min-width:100% */ align-self: center !important; flex: 0 0 auto !important; /* prevent stretching */ --container-max-width: var(--hl-content-max) !important; } /* Remove side gutters inside hero so background spans full hero width (boxed to 90rem overall) */ .hl-hero > .elementor-container, .hl-hero > .e-con-inner { padding-inline: 0 !important; } /* Also clear any nested container gutters set by Elementor Kit inside the hero */ .hl-hero .elementor-container, .hl-hero .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; } /* Neutralize Elementor container variables that can re-introduce padding/gaps in hero */ .hl-hero.e-con, .hl-hero .e-con { --container-padding: 0 !important; --container-padding-top: 0 !important; --container-padding-right: 0 !important; --container-padding-bottom: 0 !important; --container-padding-left: 0 !important; --container-widget-spacing: 0 !important; --widgets-spacing: 0 !important; } /* .hl-hero .e-con-inner { padding: 0 !important; gap: 0 !important; } */ /* Classic sections: Elementor default adds 10px padding on widget-wrap; reset in hero */ /* .hl-hero .elementor-widget-wrap { padding: 0 !important; } */ /* New container-based layout: ensure container itself has no gap/padding in hero */ /* .hl-hero .e-con { gap: 0 !important; padding: 0 !important; } */ /* Widgets: remove default margins inside hero to avoid phantom spacing */ /* .hl-hero .elementor-widget, .hl-hero .elementor-widget-container { margin: 0 !important; } */ /* Hero height adjustments per breakpoint */ /* Desktop: fixe Hero-Höhe 48rem */ @media (min-width: 1025px) { :root { --hl-hero-offset: 48rem; } .hl-hero { height: 48rem; min-height: 48rem; overflow: hidden; /* vermeidet Layoutsprünge, falls Inhalt größer ist */ } } /* Fine-tune hero offset per breakpoint if needed */ @media (max-width: 767.98px) { :root { /* Höhere Hero-Höhe mobil */ --hl-hero-offset: clamp(20rem, 62vh, 36rem); } } /* Tablet: 768px–1024px – Hero höher machen */ @media (min-width: 768px) and (max-width: 1024px) { :root { /* Noch etwas höher – feintunen bei Bedarf */ --hl-hero-offset: clamp(28rem, 66vh, 44rem); } /* Sicherstellen, dass keine feste Höhe greift (wird erst ab 1025px gesetzt) */ .hl-hero { height: auto !important; min-height: var(--hl-hero-offset) !important; } } @media (min-width: 1200px) { :root { --hl-hero-offset: clamp(18rem, 50vh, 36rem); } /* Desktop Dropdown-Padding – generisch (ohne Wrapper-Klasse) */ .elementor-nav-menu--dropdown a.elementor-sub-item, .elementor-nav-menu--dropdown a.elementor-item { padding-inline-end: var(--hl-menu-dd-xpad) !important; padding-right: var(--hl-menu-dd-xpad) !important; padding-top: var(--hl-menu-dd-ypad) !important; padding-bottom: var(--hl-menu-dd-ypad) !important; } /* (Revert) Mega-Dropdown-Experiment entfernt */ } /* ===== Desktop Mega-Dropdown (entfernt) ===== */ /* ===== Section Padding Media Queries ===== */ /* Mobile: bis 767px = 2rem Padding */ :root { --hl-section-pad: 2rem; } /* Tablet: 768px bis 1199px = 4rem Padding */ @media (min-width: 768px) and (max-width: 1199px) { :root { --hl-section-pad: 4rem; } } /* Desktop: ab 1200px = 10rem Padding */ @media (min-width: 1200px) { :root { --hl-section-pad: 10rem; } } /* ===== Responsive Navigation System ===== */ /* Ein Template - drei Navigationen - CSS-gesteuert */ /* ===== Elementor NavMenu: Dropdown-Submenu Overrides ===== */ /* Tablet: Submenu-Einrückung 768–1199px */ @media (min-width: 768px) and (max-width: 1199px) { .elementor-nav-menu--dropdown .sub-menu > li > a.elementor-sub-item, .elementor-nav-menu__container--dropdown .sub-menu > li > a.elementor-sub-item { padding-left: var(--hl-menu-dd-sub-left-t, 3.1rem) !important; padding-inline-start: var(--hl-menu-dd-sub-left-t, 3.1rem) !important; display: block !important; width: 100% !important; } .elementor-nav-menu--dropdown.e--pointer-underline .sub-menu > li > a.elementor-sub-item:after, .elementor-nav-menu__container--dropdown.e--pointer-underline .sub-menu > li > a.elementor-sub-item:after, .elementor-nav-menu--dropdown.e--pointer-overline .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu__container--dropdown.e--pointer-overline .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:after, .elementor-nav-menu__container--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu__container--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:after { left: var(--hl-menu-dd-sub-left-t, 3.1rem) !important; width: calc(100% - var(--hl-menu-dd-sub-left-t, 3.1rem)) !important; } } /* Mobile: Submenu-Einrückung ≤767.98px */ @media (max-width: 767.98px) { .elementor-nav-menu--dropdown .sub-menu > li > a.elementor-sub-item, .elementor-nav-menu__container--dropdown .sub-menu > li > a.elementor-sub-item { padding-left: var(--hl-menu-dd-sub-left-m, 2rem) !important; padding-inline-start: var(--hl-menu-dd-sub-left-m, 2rem) !important; display: block !important; width: 100% !important; /* zusätzliche optische Einrückung über linken Border */ border-left: var(--hl-menu-dd-sub-border-m, 1.625rem) solid transparent !important; box-sizing: border-box !important; } .elementor-nav-menu--dropdown.e--pointer-underline .sub-menu > li > a.elementor-sub-item:after, .elementor-nav-menu__container--dropdown.e--pointer-underline .sub-menu > li > a.elementor-sub-item:after, .elementor-nav-menu--dropdown.e--pointer-overline .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu__container--dropdown.e--pointer-overline .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:after, .elementor-nav-menu__container--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu__container--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:after { left: calc( var(--hl-menu-dd-sub-left-m, 2rem) + var(--hl-menu-dd-sub-border-m, 1.625rem) ) !important; width: calc( 100% - ( var(--hl-menu-dd-sub-left-m, 2rem) + var(--hl-menu-dd-sub-border-m, 1.625rem) ) ) !important; } } /* Desktop (ab 1025px): Generische Dropdown-Padding-Regeln, unabhängig vom Wrapper */ @media (min-width: 1025px) { /* Vollflächige Anker im Dropdown */ .elementor-nav-menu--dropdown a.elementor-item, .elementor-nav-menu--dropdown a.elementor-sub-item, .elementor-nav-menu__container--dropdown a.elementor-item, .elementor-nav-menu__container--dropdown a.elementor-sub-item { display: block; width: 100%; /* nur rechts mehr Padding */ padding-inline-end: var(--hl-menu-dd-xpad) !important; padding-right: var(--hl-menu-dd-xpad) !important; /* physischer Fallback */ padding-top: var(--hl-menu-dd-ypad) !important; padding-bottom: var(--hl-menu-dd-ypad) !important; } /* Breiter Fallback: Padding direkt auf Anker in LI anwenden */ .elementor-nav-menu--dropdown li > a, .elementor-nav-menu__container--dropdown li > a, .elementor-nav-menu--dropdown .sub-menu li > a, .elementor-nav-menu__container--dropdown .sub-menu li > a { display: block; width: 100%; padding-top: var(--hl-menu-dd-ypad) !important; padding-bottom: var(--hl-menu-dd-ypad) !important; padding-inline-end: var(--hl-menu-dd-xpad) !important; padding-right: var(--hl-menu-dd-xpad) !important; /* physischer Fallback */ } } /* Navigation Desktop */ .nav-desktop { display: none; /* Standardmäßig versteckt */ } .nav-tablet { display: none; /* Standardmäßig versteckt */ } .nav-mobile { display: none; /* Standardmäßig versteckt */ } /* Mobile: bis 767px - nur Mobile Navigation */ @media (max-width: 767px) { .nav-desktop { display: none !important; } .nav-tablet { display: none !important; } .nav-mobile { display: block !important; } } /* Tablet: 768px - 1199px - nur Tablet Navigation */ @media (min-width: 768px) and (max-width: 1199px) { .nav-desktop { display: none !important; } .nav-tablet { display: block !important; } .nav-mobile { display: none !important; } } /* Desktop: ab 1200px - nur Desktop Navigation */ @media (min-width: 1200px) { .nav-desktop { display: block !important; } .nav-tablet { display: none !important; } .nav-mobile { display: none !important; } } /* Optional: Smooth Transitions zwischen den Navigationen */ .nav-desktop, .nav-tablet, .nav-mobile { transition: opacity 0.3s ease; } /* Optional: Zusätzliche Styling-Hooks für spezifische Anpassungen */ /* Desktop Navigation Styling */ @media (min-width: 1200px) { .nav-desktop .elementor-nav-menu--main { justify-content: flex-end; /* Rechtsbündig */ } .nav-desktop .elementor-nav-menu__container { gap: 2rem; /* Abstand zwischen Menü-Items */ } /* Dropdowns: horizontales/vertikales Padding erhöhen */ /* Container für Dropdown-Panels */ .nav-desktop .elementor-nav-menu--dropdown { --_dd-xpad: var(--hl-menu-dd-xpad); --_dd-ypad: var(--hl-menu-dd-ypad); } /* Einträge im Dropdown */ .nav-desktop .elementor-nav-menu--dropdown .elementor-item, .nav-desktop .elementor-nav-menu--dropdown .elementor-sub-item { padding-right: var(--_dd-xpad) !important; padding-top: var(--_dd-ypad) !important; padding-bottom: var(--_dd-ypad) !important; } } /* Tablet Navigation Styling */ @media (min-width: 768px) and (max-width: 1199px) { .nav-tablet .elementor-nav-menu__toggle { background: var(--e-global-color-primary); border-radius: 4px; padding: 8px; } } /* Mobile Navigation Styling */ @media (max-width: 767px) { .nav-mobile .elementor-nav-menu__toggle { background: var(--e-global-color-primary); border-radius: 4px; padding: 8px; } .nav-mobile .elementor-nav-menu--dropdown { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } } /* Dropdown-Padding für Tablet & Mobile (<=1199px): nur rechts erhöhen, links unverändert lassen */ @media (max-width: 1199px) { .nav-mobile .elementor-nav-menu--dropdown a.elementor-item, .nav-mobile .elementor-nav-menu--dropdown a.elementor-sub-item, .nav-mobile .elementor-nav-menu__container--dropdown a.elementor-item, .nav-mobile .elementor-nav-menu__container--dropdown a.elementor-sub-item, .nav-mobile .elementor-nav-menu--dropdown li > a, .nav-mobile .elementor-nav-menu__container--dropdown li > a, .nav-mobile .elementor-nav-menu--dropdown .sub-menu li > a, .nav-mobile .elementor-nav-menu__container--dropdown .sub-menu li > a, .nav-tablet .elementor-nav-menu--dropdown a.elementor-item, .nav-tablet .elementor-nav-menu--dropdown a.elementor-sub-item, .nav-tablet .elementor-nav-menu__container--dropdown a.elementor-item, .nav-tablet .elementor-nav-menu__container--dropdown a.elementor-sub-item, .nav-tablet .elementor-nav-menu--dropdown li > a, .nav-tablet .elementor-nav-menu__container--dropdown li > a, .nav-tablet .elementor-nav-menu--dropdown .sub-menu li > a, .nav-tablet .elementor-nav-menu__container--dropdown .sub-menu li > a { padding-top: var(--hl-menu-dd-ypad) !important; padding-bottom: var(--hl-menu-dd-ypad) !important; padding-inline-end: var( --hl-menu-dd-xpad-m-end, var(--hl-menu-dd-xpad) ) !important; /* physischer Fallback */ padding-right: var( --hl-menu-dd-xpad-m-end, var(--hl-menu-dd-xpad) ) !important; } /* Nur Subitems zusätzlich links einrücken */ .nav-mobile .elementor-nav-menu--dropdown a.elementor-sub-item, .nav-mobile .elementor-nav-menu__container--dropdown a.elementor-sub-item, .nav-mobile .elementor-nav-menu--dropdown .sub-menu li > a, .nav-mobile .elementor-nav-menu__container--dropdown .sub-menu li > a, .nav-tablet .elementor-nav-menu--dropdown a.elementor-sub-item, .nav-tablet .elementor-nav-menu__container--dropdown a.elementor-sub-item, .nav-tablet .elementor-nav-menu--dropdown .sub-menu li > a, .nav-tablet .elementor-nav-menu__container--dropdown .sub-menu li > a { padding-inline-start: var( --hl-menu-dd-sub-left-m, calc( var(--hl-menu-dd-xpad-m-start, var(--hl-menu-dd-xpad)) + var(--hl-menu-dd-sub-indent-m, 0.75rem) ) ) !important; /* physischer Fallback */ padding-left: var( --hl-menu-dd-sub-left-m, calc( var(--hl-menu-dd-xpad-m-start, var(--hl-menu-dd-xpad)) + var(--hl-menu-dd-sub-indent-m, 0.75rem) ) ) !important; } /* Unterstreichungs-Pointer an Einrückung anpassen (Untermenüs) */ .elementor-nav-menu--dropdown.e--pointer-underline .sub-menu > li > a.elementor-sub-item:after, .elementor-nav-menu__container--dropdown.e--pointer-underline .sub-menu > li > a.elementor-sub-item:after, .elementor-nav-menu--dropdown.e--pointer-overline .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu__container--dropdown.e--pointer-overline .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:after, .elementor-nav-menu__container--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:before, .elementor-nav-menu__container--dropdown.e--pointer-double-line .sub-menu > li > a.elementor-sub-item:after { left: var(--hl-menu-dd-sub-left-m, 3.1rem) !important; width: calc(100% - var(--hl-menu-dd-sub-left-m, 3.1rem)) !important; } }