/* ── Google Fonts ──────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,700&display=swap'); /* ── Design Tokens ─────────────────────────────────────────────────────────── */ :root { --atg-navy: #182844; --atg-navy-mid: #304261; --atg-accent: #34495E; --atg-accent-light: #5B8DB8; --atg-text: #0D0D0D; --atg-text-muted: #6B7280; --atg-bg: #FAFAF8; --atg-bg-alt: #F0F2F5; --atg-white: #FFFFFF; --atg-border: rgba(13, 13, 13, 0.08); --atg-radius: 8px; /* Translucent white scale — for text/borders/fills on dark (navy) backgrounds */ --atg-white-04: rgba(255, 255, 255, 0.04); --atg-white-05: rgba(255, 255, 255, 0.05); --atg-white-06: rgba(255, 255, 255, 0.06); --atg-white-08: rgba(255, 255, 255, 0.08); --atg-white-12: rgba(255, 255, 255, 0.12); --atg-white-20: rgba(255, 255, 255, 0.2); --atg-white-28: rgba(255, 255, 255, 0.28); --atg-white-30: rgba(255, 255, 255, 0.3); --atg-white-35: rgba(255, 255, 255, 0.35); --atg-white-40: rgba(255, 255, 255, 0.4); --atg-white-50: rgba(255, 255, 255, 0.5); --atg-white-55: rgba(255, 255, 255, 0.55); --atg-white-65: rgba(255, 255, 255, 0.65); --atg-white-70: rgba(255, 255, 255, 0.7); --atg-white-90: rgba(255, 255, 255, 0.9); /* Drop-shadow alphas (neutral black) */ --atg-shadow-12: rgba(0, 0, 0, 0.12); --atg-shadow-20: rgba(0, 0, 0, 0.2); --atg-shadow-25: rgba(0, 0, 0, 0.25); /* Translucent variants of existing brand colors */ --atg-text-10: rgba(13, 13, 13, 0.1); /* = var(--atg-text) at 10% */ --atg-accent-15: rgba(52, 73, 94, 0.15); /* = var(--atg-accent) at 15% */ /* Footer uses a darker navy than --atg-navy */ --atg-footer-bg: #0D1B2E; } .header-bar-fixed { position: fixed !important; top: 0 !important; left: 0; margin-top: 1rem !important; width: 100%; z-index: 9999; margin-top: 0 !important; opacity: 0; transform: translateY(-100%) !important; transition: opacity 0.4s ease 0.5s, transform 0.4s ease !importAnt; } /* Header-Bar per Z-Index über dem Off-Canvas-Panel — nur innerhalb des Breakpoints, in dem Elementor auf das Burger-Menü umschaltet. Außerhalb davon (Desktop) unberührt lassen, sonst überdeckt es z.B. die Elementor- Editor-Toolbar/Admin-Bar. position:relative (statt sticky) ändert nichts am normalen Flow/Scrollen — es aktiviert nur z-index, ohne die bestehende Scroll-JS (.header-bar-fixed / .header-bar-visible) zu stören. Mit position:sticky kollidierte das: die Bar war ab Scroll-Beginn bereits gepinnt, und beim Überschreiten der JS-Schwelle sprang .header-bar-fixed kurz auf opacity:0/translateY(-100%), bevor es 0.5s später wieder eingeblendet wurde — dadurch wirkte die Bar "nicht mehr fixiert". */ @media (max-width: 1024.98px) { .header-bar:not(.header-bar-fixed) { position: relative !important; z-index: 100001 !important; } .header-bar-fixed { z-index: 100001 !important; } } .header-bar-fixed.header-bar-visible { margin-top: 0 !important; opacity: 1; transform: translateY(16px) !important; } /* Elementor setzt per Custom-CSS am Notification-Bar-Container einen festen margin-top: 3.875rem !important auf den nachfolgenden Header-Bar-Container (Platz für die Notification-Bar). Die Notification-Bar selbst trägt sowohl .elementor-hidden-mobile (≤767px) als auch .elementor-hidden-mobile_extra (768–880px) — ist also bis 880px komplett ausgeblendet. Der Abstand blieb bisher trotzdem stehen und erzeugte einen weißen Balken über den kompletten Bereich. Höhere Spezifität (Klasse + Typ statt nur Klasse), damit es unabhängig von der Ladereihenfolge der Stylesheets greift. */ @media (max-width: 880px) { .notifcation-bar-wrapper ~ div.header-bar { margin-top: 2rem !important; } .notifcation-bar-wrapper ~ div.header-bar.header-bar-fixed { margin-top: 0 !important; } } .footer-button a { padding: 0 0 1rem !important } /* Hello Elementor's reset.css setzt global a{color:#c36} als Default-Linkfarbe. Buttons/Nav-Menus haben eigene, spezifischere Farbregeln und bleiben davon unberührt — bewusst nur auf Links innerhalb von Text-Editor-Inhalten beschränkt (dort tauchte die Default-Farbe #c36 auf), NICHT global auf jedes , um keine anderen Widget-Farbregeln zu überschreiben. #cmplz-document (Cookie-Seite, Complianz-Shortcode) hat dieselbe #c36-Regel geerbt, da der Shortcode keine eigenen Link-Farbregeln mitbringt. */ .elementor-widget-text-editor a, #cmplz-document a { color: var(--e-global-color-primary, var(--atg-navy)) !important; /* Links laufen bewusst in der Primärfarbe, also exakt in der Farbe des Fließtexts — die Erkennbarkeit trägt allein die Unterstreichung. Vorher war hier die Sekundärfarbe (#34495E) gesetzt, die so nah am Fließtext (#182844) lag, dass Inline-Links in den Leistungs-Cards praktisch unsichtbar waren. Unterstreichung statt Farbunterschied ist zugleich die barrierearme Variante: Farbe darf nie das einzige Unterscheidungsmerkmal sein. Hello Elementors reset.css setzt text-decoration:none, daher !important. */ text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.18em !important; text-decoration-skip-ink: none !important; } /* Hover zeigte ursprünglich auf --e-global-color-accent — die ist im Elementor-Kit aber identisch mit der Primärfarbe (#182844). Seit die Links selbst primärfarben sind, wäre das ein Hover ganz ohne Farbwechsel gewesen. Daher die Sekundärfarbe, zusätzlich zum dickeren Unterstrich. */ .elementor-widget-text-editor a:hover, #cmplz-document a:hover { color: var(--e-global-color-secondary, var(--atg-accent)) !important; text-decoration-thickness: 1px !important; } /* Cookie-Seite (Complianz-Shortcode, #cmplz-document): Das Shortcode-Widget hat keine eigene Typography-Sektion, daher erbt der Fließtext den globalen Body- Typography-Global-Bind (Kit "Primär" = Poppins 700) statt der "Text"-Typo (Roboto 400) — dadurch stand jeder

fett. Bei Überschriften wirkt sich das umgekehrt aus: Elementors Kit bindet h2 an die "Primär"-Globaltypo (700, fett, korrekt) aber h3–h5 an "Sekundäre" (400) — Complianz nutzt aber ab "5.1" H3 für Unterüberschriften, die dadurch dünn statt fett wirken. Beides gezielt nur innerhalb von #cmplz-document korrigiert, ohne die globale H3-Formatierung auf anderen Seiten anzufassen. */ #cmplz-document p, #cmplz-document li, #cmplz-document td { font-weight: 400 !important; } #cmplz-document h3, #cmplz-document h4, #cmplz-document h5 { font-weight: 700 !important; } /* Footer-Menu (Impressum/Datenschutz/Cookies): Elementor setzt "color: primary" nur für die Desktop-Variante (.elementor-nav-menu--main), nicht für die mobile Dropdown-Variante — dort blieb es beim generischen Grau-Default. */ .elementor-element-22eaf5b .elementor-nav-menu--dropdown .elementor-item { color: var(--e-global-color-primary) !important; } .elementor-element-22eaf5b .elementor-nav-menu--dropdown .elementor-item:hover { color: var(--e-global-color-accent) !important; } /* Footer-Grid (Logo, Kontakt, Poppenbüttel, Innenstadt) kollabiert bei Elementor ab 1024px auf eine einzelne Spalte — dadurch stehen alle 4 Blöcke lose untereinander. Stattdessen: Logo bleibt in eigener Zeile (volle Breite), die restlichen 3 Blöcke stehen darunter nebeneinander in 3 Spalten. */ @media (max-width: 1024px) { .elementor-27 .elementor-element.elementor-element-e1343d5 { --e-con-grid-template-columns: repeat(3, 1fr) !important; } .elementor-27 .elementor-element.elementor-element-fd36378 { grid-column: 1 / -1 !important; } } /* In der kleinsten Variante (≤767px) sind 3 Spalten zu eng (Text überlappt) — hier wieder alle Blöcke untereinander, wie ursprünglich. Logo bleibt links ausgerichtet statt zentriert (Elementor setzt hier --align-items:center). */ @media (max-width: 767px) { .elementor-27 .elementor-element.elementor-element-e1343d5 { --e-con-grid-template-columns: repeat(1, 1fr) !important; } .elementor-27 .elementor-element.elementor-element-fd36378 { --align-items: flex-start !important; } } /* Trustbar (6 Logo-Icons) kollabiert bei Elementor ab 767px auf eine einzelne Spalte, wodurch alle Bilder untereinander stehen. Stattdessen: alle 6 Icons bleiben nebeneinander in einer Zeile, nur kleiner und mit engerem Abstand. */ @media (max-width: 767px) { .elementor-6 .elementor-element.elementor-element-0c34a7e { --e-con-grid-template-columns: repeat(6, 1fr) !important; --gap: 8px 8px !important; --row-gap: 8px !important; --column-gap: 8px !important; } .elementor-6 .elementor-element.elementor-element-0c34a7e .elementor-widget-image img { max-width: 36px !important; height: auto !important; margin: 0 auto !important; } } /* "Lass uns sprechen"-CTA (Karriere-Seite). Statt fragiler ID-Selektoren nutzen wir eigene, direkt in Elementor gesetzte CSS-Klassen (Advanced > CSS Classes): .atg-cta-fullbleed auf dem e-con-boxed-Wrapper, .atg-cta-image-cover auf der Bild-Spalte. Bleibt stabil, auch wenn Elementor die Element-IDs ändert. */ .atg-cta-fullbleed { --content-width: 100% !important; --padding-left: 0 !important; --padding-right: 0 !important; } /* Hintergrundbild der Bild-Spalte auf Cover setzen, statt in Originalgröße/ wiederholt dargestellt zu werden. */ .atg-cta-image-cover, .atg-cta-image-cover > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Unterhalb 768px stehen die beiden Spalten (Bild/Text) untereinander — die Bild-Spalte hat als leerer Container mit Hintergrundbild sonst keine eigene Höhe und wird nur als schmaler Streifen abgeschnitten dargestellt. */ @media (max-width: 767px) { .atg-cta-image-cover { min-height: 320px !important; } } /* Accordions (Elementor Nested-Accordion-Widget) site-weit: Summary-Zeile hatte bislang gar kein Padding, das Content-Div danach nutzt Elementors eigenes Inline-Padding (1rem) — hier vereinheitlicht über die stabilen, von Elementor selbst vergebenen Klassen (nicht IDs), gilt daher automatisch auf allen Seiten mit Accordions. */ .e-n-accordion-item-title { padding: 1rem !important; } .e-n-accordion-item-title + div { padding: 1rem !important; } /* Hero-Sektionen dürfen nie höher als der Viewport werden. Die Unterseiten nutzen einen fixen min-height (900px/880px), der auf niedrigeren Bildschirmen (z.B. Laptops mit ~800px Viewport-Höhe) höher als der sichtbare Bereich wird. Wichtig: bei einem Konflikt zwischen min-height und max-height gewinnt laut CSS-Spezifikation tatsächlich min-height (nicht max-height!) — max-height allein reichte deshalb nicht. Stattdessen min-height selbst kappen. Eigene Klasse (Advanced > CSS Classes) statt fragiler IDs, auf allen Unterseiten sowie im "Hero /w Overlay Left"-Template gesetzt (Homepage-Hero nutzt schon 100vh direkt und braucht die Klasse nicht). */ .atg-hero-section { min-height: min(900px, 100vh) !important; max-height: 100vh !important; } /* Lange deutsche Wörter (z.B. "Wirtschaftsprüfung", "Unternehmensbewertung") laufen bei den kleineren Breakpoints sonst schnell über/aus dem Rahmen. html[lang="de"] ist bereits gesetzt, daher nutzt hyphens:auto automatisch das deutsche Trennmuster des Browsers. */ @media (max-width: 1024.98px) { h1, h2, h3, h4, h5, h6, p { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } } /* Elementor gibt jedem Container ohne eigenes Padding einen Default von 10px (--container-default-padding-*, Basisregel .e-con). Bei mehreren verschach- telten Containern (z.B. Grid > Spalte > Text) summiert sich das zu spürbarem Einzug von Text/Bildern gegenüber der äußeren Kante — auf allen Seiten mit ähnlich verschachtelten Layouts. .e-child markiert stabil jeden Container, der SELBST verschachtelt (Kind eines anderen Containers) ist — dort den Default auf 0 setzen. Container mit bewusst gesetztem eigenem Padding bleiben unberührt, da Elementors eigene Element-ID-Regeln spezifischer sind und weiterhin gewinnen. */ .e-con.e-child { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; } /* Alle Bild-Widgets (elementor-widget-image) site-weit mit 4px abgerundeten Ecken — stabile Elementor-eigene Widget-Klasse, gilt automatisch auf allen Seiten ohne einzelne Elemente bearbeiten zu müssen. */ .elementor-widget-image img { border-radius: 4px !important; } /* Button-Beschriftungen sollen nie umbrechen (betrifft z.B. "Gespräch vereinbaren" in der Header-Bar und "Kontakt aufnehmen" im Off-Canvas-Menü) */ .elementor-button-text { white-space: nowrap !important; } /* Off-Canvas Nav — per JS an gehängt (Portal), siehe atg-main.js */ .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; width: 100% !important; height: 100vh !important; background: var(--atg-navy) !important; z-index: 100000 !important; padding: 32px 40px 40px !important; transform: translateX(100%) !important; transition: transform 0.4s ease !important; overflow-y: auto !important; display: block !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .elementor-nav-menu--dropdown.elementor-nav-menu__container { top: var(--atg-header-height, 80px) !important; height: calc(100vh - var(--atg-header-height, 80px)) !important; } .elementor-nav-menu--dropdown.elementor-nav-menu__container.is-open { transform: translateX(0) !important; } /* Links im Off-Canvas */ .elementor-nav-menu--dropdown .elementor-nav-menu { display: flex !important; flex-direction: column !important; } .elementor-nav-menu--dropdown .elementor-nav-menu .menu-item a { color: var(--atg-white) !important; font-family: 'Poppins', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; padding: 16px 0 !important; border-bottom: none !important; display: block !important; text-align: center !important; background: none !important; } .elementor-nav-menu--dropdown .elementor-nav-menu .menu-item a:hover { color: var(--atg-accent-light) !important; background: none !important; } /* Untermenüs sind im Off-Canvas immer direkt sichtbar (kein Klick/Toggle) — ein Pfeil-Icon zum "Aufklappen" ist hier funktionslos. Elementor rendert für Menüpunkte mit Kindern zusätzlich sein eigenes .sub-arrow-Icon direkt hinter dem Linktext (ohne Leerzeichen im Markup), das dadurch im Fließtext "hängt". Beide Icons (Elementors .sub-arrow sowie das früher hier per ::after gesetzte Dreieck) werden ausgeblendet, damit z.B. "Leistungen" wieder wie alle anderen Menüpunkte sauber zentriert steht. */ .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu .menu-item-has-children > a.elementor-item-anchor .sub-arrow { display: none !important; } /* Untermenü: immer direkt sichtbar, kein Klick/Toggle, keine