/* * Was: Haupt-Stylesheet des Child-Themes. * Warum: Eigene Styles getrennt von style.css (die nur den Theme-Header trägt). * Enfold-Bezug: Wird nach allen Enfold-Styles geladen (siehe inc/setup.php, Prio 100). Farben kommen primär * aus den Enfold-Theme-Optionen (tools/enfold-ci.config.php) – die Tokens hier synchron halten. * Breakpoints wie Enfold: 989 / 767 / 479 px. Enfold-Selektoren gezielt überschreiben, kein !important-Teppich. * * STATUS: Design-Erstentwurf (30.09.2026), CI-Werte von der Altseite übernommen, nicht vom Kunden freigegeben. */ /* * Schriften (Team, 02.10.2026): Überschriften Nunito Sans, Fließtext Roboto – beide SIL OFL 1.1 (fonts/OFL.txt), * als variable WOFF2 lokal eingebunden (eine Datei je Zeichensatz für alle Stärken) – kein Google-Server (DSGVO). * Enfold steht auf einer websicheren Schrift, damit es selbst nichts von Google lädt. */ @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/nunito-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/nunito-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Roboto"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/roboto-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/roboto-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Design-Tokens (CI der Altseite greiffenhagen.at; synchron mit tools/enfold-ci.config.php) */ :root { --gh-font-text: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; --gh-font-titel: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* * Primärfarbe Greiffenhagen-Grau #6f7173 (CI, 02.11.2026). Davor Blau-Grau (Kunde, 14.10.2026) #40657b / #36586c / * Verlauf #2f4c5c → #4b7792 / Tönung #cfdde6, davor CI-Grün #4f9b1f / #3d7a17 / Verlauf #2e6410 → #438519 / * Tönung #cfe6bf. Werte synchron mit tools/enfold-ci.config.php. */ --gh-primaer: #6f7173; /* Flächen, Akzente, große Schrift (Weiß darauf ≈ 4,9:1) */ --gh-primaer-dunkel: #545658; /* Links, Buttons, CTA-Fläche (Weiß darauf ≈ 7,4:1) */ --gh-primaer-hell: #e2e3e4; /* Tönung auf Primärflächen (kleine Zeichen in der Kennzahlen-Box) */ --gh-primaer-kontur: rgba(84, 86, 88, 0.16); /* Kontur-Ziffern auf Hellgrau (Primär-Dunkel, 16 %) */ /* * Verlauf der Vollflächen (Team, 02.10.2026): tiefer Anfang, hellerer Endpunkt – die Mitte entspricht ungefähr * Primär-Dunkel. Der Endpunkt ist so hell, dass weißer Text noch 4,5:1 erreicht (WCAG AA). */ --gh-primaer-verlauf-start: #45474a; /* Weiß darauf ≈ 9,3:1 */ --gh-primaer-verlauf-ende: #747679; /* Weiß darauf ≈ 4,6:1 */ --gh-verlauf: linear-gradient(135deg, var(--gh-primaer-verlauf-start) 0%, var(--gh-primaer-verlauf-ende) 100%); --gh-verlauf-quer: linear-gradient(90deg, var(--gh-primaer-verlauf-start) 0%, var(--gh-primaer-verlauf-ende) 100%); --gh-dunkel: #1f1f1f; /* Text, Header – neutrales Anthrazit (kein Braunton) */ --gh-grau: #6f7173; /* CI-Grau (= Primärfarbe) */ --gh-grau-text: #5f6062; /* graue Schrift: CI-Grau hat auf #f4f4f4 nur 4,44:1, das hier ≈ 5,8:1 (WCAG AA) */ --gh-hell: #f4f4f4; /* helle Flächen */ --gh-linie: #dfdfdf; /* Formensprache „Felsschnitt“: schräge Kanten (Bild-Hero, Kennzahlen, Buttons) und Logo-Reiter */ --gh-rand: 24px; /* Abstand Bildstreifen zum Fensterrand */ --gh-schnitt: clamp(28px, 5vw, 88px); /* waagrechter Versatz der schrägen Bildkanten */ --gh-reiter: 22px; /* so weit hängt der Logo-Reiter unter den Header */ --gh-ueberlappung: 120px; /* so weit ragen Textfläche und Kennzahlen-Box in das Hero-Bild */ --gh-hero-hoehe: clamp(300px, 40vw, 680px); /* Höhe des Hero-Bilds (Slider) */ --gh-hero-einzug: 32px; /* weißer Rand links vom Hero-Text, so weit er im Bild liegt */ --gh-hero-luecke: 20px; /* Bildstreifen zwischen weißer Textfläche und Kennzahlen-Box */ /* Abstände und Karten (seitenweit einheitlich, mobil kleiner) */ --gh-abstand-titel: 32px; /* Abschnittsüberschrift → Inhalt */ --gh-karte-luecke: 32px; /* Lücke zwischen Karten */ --gh-karte-pad: 32px; /* Innenabstand von Karten und Infoboxen */ --gh-schatten: 0 8px 28px rgba(31, 31, 31, 0.07); /* Karten: leicht abgehoben (Team, 02.10.2026) */ --gh-schatten-hover: 0 16px 40px rgba(31, 31, 31, 0.13); /* klickbare Karten beim Überfahren */ /* * Kontur-Ziffern (Zeitleiste, Ablauf, „1974“): Nunito Sans hat überlappende Konturen, -webkit-text-stroke zeichnet * sie als Linien im Buchstaben mit (auch in Googles statischer Fassung). Deshalb Kontur doppelt so breit unter * der Füllung (paint-order) und Füllung in Hintergrundfarbe – alle drei stehen auf Hellgrau. */ --gh-kontur-grund: var(--gh-hell); } /* Fließtext Roboto, Überschriften und Bedienelemente Nunito Sans (#top = body-ID von Enfold, schlägt Enfolds Element-Selektoren) */ #top, #top input, #top textarea, #top select, #top button { font-family: var(--gh-font-text); } #top h1, #top h2, #top h3, #top h4, #top h5, #top h6, #top .av-special-heading-tag, #top .avia-button, #top .main_menu, #top .av-main-nav, #top .portfolio-title, #top .grid-entry-title, #top .togglecontainer .toggler, #top .nf-form-content input[type="submit"], #top .gh-filter button, #top .gh-karte-laden, #top .gh-hero-kicker p, #top .gh-kennzahlen strong, #top .gh-person-name, #top .gh-karte-titel, #top .gh-ablauf-schritte strong, #top .gh-ablauf-schritte li::before, #top .gh-zeitleiste strong { font-family: var(--gh-font-titel); } #top h1, #top h2, #top h3 { letter-spacing: 0.01em; } /* * Kein einzelnes Wort in der letzten Zeile (mobil sehr häufig, 12.10.2026). „pretty“ hilft in Chromium nur bei sehr * kurzen Restzeilen („KONTAKT UND / ANFRAGE“ blieb) und machte Einleitungen unruhig – deshalb „balance“; die * Silbentrennung ist auf lange Wörter begrenzt (hyphenate-limit-chars), sonst trennte balance unnötig. */ #top h1, #top h2, #top h3, #top h4, #top .av-special-heading-tag, #top .togglecontainer .toggler, #top #socket .copyright { text-wrap: balance; } /* Überschrift → Untertitel (H1 + Einleitung, CTA-Überschrift + Text): Enfold setzt nur ≈ 5px */ #top .av-special-heading .av-subheading_below { margin-top: 12px; } /* Telefonnummern nie umbrechen („+43 6546 / 40150“) */ #top a[href^="tel:"] { white-space: nowrap; } /* * Lesbarkeit (WCAG): Grundschrift 16px statt Enfolds 13px; Kleintexte (Tabellen, Labels, Breadcrumbs, * Socket) mindestens 14px. Enfold setzt diese Größen in base.css/layout.css fix in px. */ body#top { font-size: 16px; line-height: 1.65; } #top table, #top td, #top th, #top label span, #top legend span, #top .breadcrumb, #top .avia-button { font-size: 15px; } #top .breadcrumb { font-size: 14px; } /* Clean: keine Enfold-Sektionsschatten und 1px-Trennlinien (Option „shadow“ der Sektionen, container_wrap-Rahmen) */ #top .avia-section.avia-shadow { box-shadow: none; } #top .container_wrap, #top .avia-section { border-top-width: 0; border-bottom-width: 0; } #top .title_container { border: 0; } /* * Buttons: Parallelogramm (Formensprache „Felsschnitt“) per skewX statt clip-path – so bleiben Konturen * (light / theme-color-subtle) an den Schrägen geschlossen. Inhalt wird zurückgeschert. * „Theme Color Subtle“ = grüne Kontur. */ #top .avia-button { border-radius: 0; font-weight: 600; letter-spacing: 0.03em; transform: skewX(-12deg); } #top .avia-button > span { display: inline-block; transform: skewX(12deg); } #top h1, #top h2, #top .av-special-heading-tag { font-weight: 900; } /* * Abstandssystem (02.10.2026): Abschnittsüberschriften (Enfold „Special Heading“) mit festem Abstand zum Inhalt; * Zwischenüberschriften in Textblöcken mit mehr Luft davor als danach (Nähe zeigt Zugehörigkeit); Absätze und * Listen im festen Rhythmus; Buttons nach Text mit Abstand. Ersetzt einzelne margin-top-Korrekturen an Spalten. */ #top .av-special-heading { margin-bottom: var(--gh-abstand-titel); padding-bottom: 0; } /* Typo-Akzent: kleine grüne Schrägmarke über Abschnittsüberschriften (H2) – Formensprache „Felsschnitt“ */ #top .av-special-heading > h2.av-special-heading-tag::before { content: ""; display: block; width: 44px; height: 8px; margin-bottom: 18px; background: var(--gh-primaer); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); } #top .av-special-heading.modern-centered > h2.av-special-heading-tag::before { margin-right: auto; margin-left: auto; } #top .gh-cta .av-special-heading > h2.av-special-heading-tag::before { background: rgba(255, 255, 255, 0.85); } /* * CTA-Sektionen in der Primärfarbe: Verlauf von links oben nach rechts unten. Er liegt als Bild über dem custom_bg der * ALB-Sektion – bestehende Sektionen tragen dort noch das frühere Grün #3d7a17, sichtbar ist nur der Verlauf. */ #top .avia-section.gh-cta { background-color: var(--gh-primaer-dunkel); background-image: var(--gh-verlauf); } #top .gh-kachel .av-special-heading > .av-special-heading-tag::before, #top .gh-footer .av-special-heading > .av-special-heading-tag::before { display: none; } #top .avia_textblock h2 { margin: 1.7em 0 0.6em; } #top .avia_textblock h3 { margin: 1.6em 0 0.7em; } #top .avia_textblock h4 { margin: 1.5em 0 0.5em; } #top .avia_textblock > :first-child { margin-top: 0; } #top .avia_textblock p, #top .avia_textblock ul, #top .avia_textblock ol, #top .avia_textblock dl { margin-bottom: 1.15em; } #top .avia_textblock li { margin-bottom: 0.45em; } #top .avia_textblock li:last-child, #top .avia_textblock > :last-child { margin-bottom: 0; } /* Links im Fließtext nicht nur über die Farbe erkennbar (WCAG 1.4.1) – eigenständige Links (CTA-Kontakt, Karten) ausgenommen */ #top .avia_textblock > p a:not(.avia-button), #top .avia_textblock > ul a, #top .gh-karte-info a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } #top .gh-cta-kontakt.avia_textblock > p a { text-decoration: none; } /* * Tastaturfokus sichtbar (WCAG 2.4.7): Enfold entfernt den Rahmen aller Links (base.css: a:focus { outline: 0 }). * Nur bei Tastaturbedienung (:focus-visible), auf Primärflächen weiß. Navigation: Markierung wie beim Überfahren. */ #top a:focus-visible, #top button:focus-visible { outline: 2px solid var(--gh-dunkel); outline-offset: 3px; } #top .gh-cta a:focus-visible, #top .gh-hero-fakten a:focus-visible { outline-color: #ffffff; } /* Elementfolge in Spalten und Sektionen */ #top .av_textblock_section + .av_textblock_section { margin-top: 24px; } #top .av_textblock_section + .av_textblock_section:has(> .avia_textblock > h2:first-child) { margin-top: 48px; } #top .av_textblock_section + .avia-button-wrap, #top .av_textblock_section + .avia-buttonrow-wrap { margin-top: 28px; } /* * Lange deutsche Wörter in schmalen Spalten trennen statt überstehen lassen – nur große Überschriften (Kartentitel * nicht, dort trennt der Browser sonst mitten im Wort, obwohl Platz ist). Bis 12.10.2026 nur unter 990px; bei 1024px * lief „TÄTIGKEITSGEBIET“ in einer Drittelspalte über den Rand. Getrennt wird nur, wenn das Wort nicht passt. */ #top h1, #top h2, #top .av-special-heading-tag:not(h3) { hyphens: auto; /* * Nur lange Wörter (ab 15 Zeichen, je Teil mindestens 6) – der Browser trennt sonst auch Wörter, die in die nächste * Zeile gepasst hätten („HANGSICHE-RUNG“, „GE-GEN“). „TÄTIGKEITS-GEBIET“ in Drittelspalten bleibt möglich. */ hyphenate-limit-chars: 15 6 6; overflow-wrap: break-word; } /* Firmenname im Footer nicht trennen („Spreng-technik“) – die Spalte ist breit genug für ganze Wörter */ #top .gh-footer .av-special-heading-tag { hyphens: manual; } /* Breadcrumb-Leiste (Enfold title_container, colorset alternate = dunkel) hell und ruhig */ #top .title_container { background: var(--gh-hell); color: var(--gh-dunkel); } #top .title_container .breadcrumb, #top .title_container .breadcrumb a, #top .title_container .breadcrumb-title { color: var(--gh-dunkel); } #top .title_container .breadcrumb a:hover { color: var(--gh-primaer-dunkel); } /* * Breadcrumb in einer Zeile (Team, 12.10.2026: mobil hässlich). Enfold positioniert sie absolut in einer Leiste mit * fester Höhe (layout.css: min-height 56px) und lässt die Einträge floaten – mobil brach sie dreizeilig um und lief * unter der grauen Leiste heraus, die Trenner standen ungleich (.sep 8px breit plus Innenabstand). Jetzt Flexbox: * die aktuelle Seite wird bei Platzmangel gekürzt (…), Desktop rechtsbündig neben dem Logo-Reiter. */ #top .title_container .container { display: flex; align-items: center; justify-content: flex-end; padding-top: 8px; padding-bottom: 8px; } #top .title_container .breadcrumb { position: static; min-width: 0; max-width: 100%; margin: 0; line-height: 1.5; } #top .breadcrumb-trail { display: flex; align-items: baseline; white-space: nowrap; } #top .breadcrumb-trail > * { flex: none; } #top .breadcrumb-trail .trail-before, #top .breadcrumb-trail .trail-end, #top .breadcrumb-trail .sep, #top .breadcrumb-trail a { float: none; padding: 0; } #top .breadcrumb-trail .trail-before { margin-right: 0.5em; } /* Tippfläche ≥ 24 px hoch (WCAG 2.5.8), ohne die Leiste zu erhöhen */ #top .breadcrumb-trail a { display: inline-block; padding: 6px 0; margin: -6px 0; } #top .breadcrumb .sep { width: auto; margin: 0 0.6em; color: var(--gh-grau-text); } #top .breadcrumb-trail .trail-end { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Ab Tablet ragt der Logo-Reiter links in die Leiste – die Breadcrumb bleibt rechts davon */ @media only screen and (min-width: 768px) and (max-width: 989px) { #top .title_container .breadcrumb { max-width: 50%; } } @media only screen and (min-width: 990px) { #top .title_container .breadcrumb { max-width: 65%; } } /* Mobil linksbündig (das Label „Navigation:“ ist bis 989px ausgeblendet, siehe unten) */ @media only screen and (max-width: 767px) { #top .title_container .container { justify-content: flex-start; min-height: 48px; } } /* „Nach oben“-Button (Enfold #scroll-top-link) in CI-Grün */ #top #scroll-top-link { border: 0; border-radius: 0; background: var(--gh-primaer-dunkel); color: #ffffff; } #top .avia-button.avia-color-theme-color-subtle { background: transparent; color: var(--gh-primaer-dunkel); box-shadow: inset 0 0 0 2px var(--gh-primaer-dunkel); } #top .avia-button.avia-color-theme-color-subtle:hover { background: var(--gh-primaer-dunkel); color: #ffffff; } /* Enfold setzt „&“ in Überschriften in eine Zierschrift (Filter avia_ampersand → span.special_amp) – passt nicht zur CI */ #top .special_amp { font-family: inherit; font-style: inherit; font-weight: inherit; font-size: inherit; color: inherit; line-height: inherit; } /* * Header: hell, Logo (weißes PNG) in einem grünen Reiter, der mit abgeschrägter Ecke in den Hero hängt. * Enfold: Farben aus colorset header_color (tools/enfold-ci.config.php), Höhe 90px (header_custom_size), * Shrinking aus – der Reiter rechnet mit fixer Höhe. Topbar aus, Telefon als Button in der Navigation (inc/enfold.php). */ #top #header .header_bg { transition: box-shadow 0.3s ease; } #top #header.header-scrolled .header_bg { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } #top #header_main, #top #header_main .container, #top #header_main .inner-container { overflow: visible; } #top #header .logo { background: var(--gh-primaer); height: calc(100% + var(--gh-reiter)); padding: 0 34px 0 30px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gh-reiter)), calc(100% - var(--gh-reiter)) 100%, 0 100%); } #top #header .logo a { display: flex; align-items: center; } #top #header .logo img { max-height: 46px; } /* Navigation: fett, Versalien, grüner Balken unter aktivem/gehovertem Punkt (Enfolds .avia-menu-fx ist im minimal header aus) */ #top #header .av-main-nav > li > a { padding: 0 16px; color: var(--gh-dunkel); font-size: 15px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } #top #header .av-main-nav > li:not(.gh-nav-tel) > a .avia-menu-text { position: relative; } #top #header .av-main-nav > li:not(.gh-nav-tel) > a .avia-menu-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; background: var(--gh-primaer); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } #top #header .av-main-nav > li:not(.gh-nav-tel) > a:hover .avia-menu-text::after, #top #header .av-main-nav > li:not(.gh-nav-tel) > a:focus-visible .avia-menu-text::after, #top #header .av-main-nav > li.current-menu-item > a .avia-menu-text::after, #top #header .av-main-nav > li.current-menu-ancestor > a .avia-menu-text::after, #top #header .av-main-nav > li.current_page_ancestor > a .avia-menu-text::after { transform: scaleX(1); } #top #header .av-main-nav > li > a:hover, #top #header .av-main-nav > li > a:focus-visible, #top #header .av-main-nav > li.current-menu-item > a, #top #header .av-main-nav > li.current-menu-ancestor > a { color: var(--gh-primaer-dunkel); } /* Hauptpunkte und Untermenü zeigen den Fokus über Farbe und Marke (statt Rahmen um die volle Header-Höhe) */ #top #header .av-main-nav li > a:focus-visible { outline: none; } /* * Untermenü (clean, 02.10.2026): weiße Fläche mit dem Karten-Schatten, ohne Linien und Grauflächen, Einträge einzeilig * in dunkler Schrift. Überfahren/aktiv: grün, links erscheint ein aufgestellter grüner Schrägstrich. * Enfold: Breite 208px, 2px-Linie oben, Rahmen je Link (layout.css), Farben/Hintergründe aus dem Farbset header_color. */ #top #header .av-main-nav ul.sub-menu { left: -8px; /* Text der Einträge (24px Einzug) fluchtet mit dem Hauptpunkt (16px Innenabstand) */ width: auto; min-width: 240px; padding: 12px 0; border: 0; background: #ffffff; box-shadow: var(--gh-schatten-hover); animation: gh-untermenue 0.18s ease-out; } @keyframes gh-untermenue { from { opacity: 0; transform: translateY(6px); } } /* Textschrift, nicht fett; der Text bleibt beim Überfahren stehen (sonst ändert sich die Menübreite) */ #top #header .av-main-nav ul.sub-menu li a { position: relative; padding: 10px 28px 10px 24px; border: 0; background: transparent; color: var(--gh-dunkel); font-family: var(--gh-font-text); font-size: 15px; font-weight: 500; line-height: 1.4; white-space: nowrap; transition: color 0.2s ease; } /* Marke: aufgestellter grüner Schrägstrich im linken Innenabstand */ #top #header .av-main-nav ul.sub-menu li a::before { content: ""; position: absolute; top: 50%; left: 11px; width: 3px; height: 16px; margin-top: -8px; background: var(--gh-primaer); transform: skewX(-14deg) scaleY(0.4); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; } #top #header .av-main-nav ul.sub-menu li a:hover, #top #header .av-main-nav ul.sub-menu li a:focus-visible, #top #header .av-main-nav ul.sub-menu li.current-menu-item > a, #top #header .av-main-nav ul.sub-menu li.current_page_item > a { background: transparent; color: var(--gh-primaer-dunkel); } #top #header .av-main-nav ul.sub-menu li a:hover::before, #top #header .av-main-nav ul.sub-menu li a:focus-visible::before, #top #header .av-main-nav ul.sub-menu li.current-menu-item > a::before, #top #header .av-main-nav ul.sub-menu li.current_page_item > a::before { opacity: 1; transform: skewX(-14deg) scaleY(1); } #top #header .av-main-nav ul.sub-menu .avia-bullet { display: none; } /* Hauptpunkt bleibt markiert, solange sein Untermenü offen ist */ #top #header .av-main-nav > li.menu-item-has-children:hover > a { color: var(--gh-primaer-dunkel); } #top #header .av-main-nav > li.menu-item-has-children:hover > a .avia-menu-text::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { #top #header .av-main-nav ul.sub-menu { animation: none; } } /* Telefon-Button (Parallelogramm, gleiche Schräge wie Bildkanten) */ #top #header .av-main-nav > li.gh-nav-tel > a { padding: 0 0 0 18px; } #top #header .av-main-nav > li.gh-nav-tel > a .avia-menu-text { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; background: var(--gh-primaer-dunkel); color: #ffffff; line-height: 1; vertical-align: middle; letter-spacing: 0.04em; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background-color 0.2s ease; } #top #header .av-main-nav > li.gh-nav-tel > a:hover .avia-menu-text, #top #header .av-main-nav > li.gh-nav-tel > a:focus-visible .avia-menu-text { background: var(--gh-dunkel); } /* * Hero, Teil 1: Bildstreifen als Ausschnitt – ALB-Element „Fullwidth Easy Slider“ (.gh-hero-slider, 3 Bilder, * Überblendung) bzw. früher eine Sektion mit Hintergrundbild. Eingerückt, links und rechts parallel schräg * geschnitten, keine Abdunklung. Leichter Parallax-Effekt der Bilder per js/custom.js. */ #top .gh-hero-bild { float: none; width: auto; margin: 0 var(--gh-rand); min-height: var(--gh-hero-hoehe); border: 0; box-shadow: none; clip-path: polygon(var(--gh-schnitt) 0, 100% 0, calc(100% - var(--gh-schnitt)) 100%, 0 100%); } #top .gh-hero-bild .container { min-height: 0; padding: 0; } /* Slider: feste Höhe statt Bildformat (Enfold misst die Höhe am Bild), Bilder füllen den Ausschnitt */ #top .gh-hero-slider { min-height: 0; overflow: hidden; } /* * Höhe schon vor dem Slider-JS: Enfold gibt dem ul einen Inline-Platzhalter aus dem Bildformat (padding-bottom ≈ 34 %) * und setzt die echte Höhe erst per JS – mit WP Rocket (defer) spät, Lighthouse maß dadurch CLS 0,17 mobil. * !important nur wegen des Inline-Styles. */ #top .gh-hero-slider .avia-slideshow-inner { height: var(--gh-hero-hoehe) !important; padding-bottom: 0 !important; } #top .gh-hero-slider .avia-slideshow-inner img { display: block; width: 100%; height: var(--gh-hero-hoehe); object-fit: cover; will-change: transform; } /* * Video-Folie (Enfold „Video Slide“, Team 05.10.2026; Rückweg: ALB → Vorlagen → „Hero Bilder-Slider“): füllt den * Ausschnitt wie die Bilder. Enfolds Stretch-Modus setzt Höhe und Versatz per Inline-Style passend zum Bildformat * 1500 × 430 und der MediaElement-Player eine feste Größe – !important nur wegen dieser Inline-Styles. * Mobil zeigt Enfold statt des Videos das Vorschaubild als Hintergrund der .avia-slide-wrap. */ #top .gh-hero-slider .av-video-slide .avia-slide-wrap, #top .gh-hero-slider .avia-slide-wrap .mejs-container, #top .gh-hero-slider .avia-slide-wrap .mejs-inner, #top .gh-hero-slider .avia-slide-wrap .mejs-mediaelement { width: 100% !important; height: var(--gh-hero-hoehe) !important; } #top .gh-hero-slider .avia-slideshow-inner video { position: absolute; top: 0 !important; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; will-change: transform; } #top .gh-hero-slider .avia-slide-wrap { background-position: center; background-size: cover; } /* * Mobilbild bis 599px (wie das Mobilvideo, js/custom.js): erstes Bild des Mobilvideos statt des Desktop-Vorschaubilds * (53 statt 145 KB, Lighthouse mobil). Variable und Klasse setzt gh_hero_video_ausgabe() (inc/enfold.php) nur, wenn * „-mobil.jpg“ existiert. !important nur gegen Enfolds Inline-Style – der Browser lädt das Desktop-Bild dann nicht. */ @media only screen and (max-width: 599px) { #top .gh-hero-slider .avia-slide-wrap.gh-hat-mobilbild { background-image: var(--gh-hero-mobilbild) !important; } } /* Pause-Knopf für das Video (WCAG 2.2.2, js/custom.js) – oben rechts, die untere Kante verdecken Text und Kennzahlen */ #top .gh-hero-pause { position: absolute; top: 16px; right: calc(var(--gh-rand) + 40px); z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(31, 31, 31, 0.55); color: #ffffff; cursor: pointer; transition: background-color 0.2s ease; } #top .gh-hero-pause:hover { background: var(--gh-primaer-dunkel); } /* Mobil entfernt Enfold das Video (Klasse av-video-slide weg, Vorschaubild als Hintergrund) – dann kein Knopf */ #top .gh-hero-slider:not(:has(.av-video-slide video)) .gh-hero-pause { display: none; } #top .gh-hero-pause:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } #top .gh-hero-pause svg { width: 18px; height: 18px; fill: currentColor; } /* Startzustand für den Parallax-Effekt (js/custom.js) – ohne Sprung beim ersten Scrollen */ @media (prefers-reduced-motion: no-preference) { #top .gh-hero-slider .avia-slideshow-inner img, #top .gh-hero-slider .avia-slideshow-inner video { transform: scale(1.2); } } /* Punkte mittig über den Flächen, die unten ins Bild ragen (immer sichtbar: nav_visibility_desktop im ALB) */ #top .gh-hero-slider .avia-slideshow-dots { bottom: calc(var(--gh-ueberlappung) + 18px); } /* Trefferfläche 24px (WCAG 2.5.8), sichtbar ein 12px-Punkt (::before); überschreibt Enfolds av-control-minimal */ #top .gh-hero-slider.av-control-minimal .avia-slideshow-dots a { position: relative; width: 24px; height: 24px; margin: 0 2px; padding: 0; border: 0; background: transparent; opacity: 1; } #top .gh-hero-slider.av-control-minimal .avia-slideshow-dots a::before { content: ""; position: absolute; inset: 6px; border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: background-color 0.2s ease; } #top .gh-hero-slider.av-control-minimal .avia-slideshow-dots a.active::before, #top .gh-hero-slider.av-control-minimal .avia-slideshow-dots a:hover::before { background: #ffffff; } /* * Hero, Teil 2: Textspalte auf weißer Fläche und Kennzahlen-Box ragen beide um --gh-ueberlappung in das Bild * (gleiche Oberkante, Team 02.10.2026). Die weiße Fläche hat links dieselbe Schräge wie Bild und Box, rechts * bleibt ein schmaler Bildstreifen bis zur Box. */ #top .gh-hero-text { border: 0; box-shadow: none; overflow-x: clip; } #top .gh-hero-intro { position: relative; z-index: 2; margin-top: calc(-56px - var(--gh-ueberlappung)); padding-top: 44px; /* wie die Kennzahlen-Box: Kicker und erste Kennzahl auf einer Linie */ background: #ffffff; } #top .gh-hero-intro::before, #top .gh-hero-intro::after { content: ""; position: absolute; top: 0; height: var(--gh-ueberlappung); /* nur über dem Bild sichtbar, darunter liegt ohnehin Weiß */ visibility: visible; background: #ffffff; } /* links: Einzug vor dem Text, schräge Kante */ #top .gh-hero-intro::before { right: calc(100% - 1px); left: auto; width: calc(var(--gh-hero-einzug) + 16px); clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); } /* * rechts: in die Spaltenlücke (Enfold: 6 % der Zeile = 10,4167 % dieser 3/5-Spalte), endet --gh-hero-luecke vor der * Kennzahlen-Box. Die Kante läuft ungefähr parallel zu deren Schräge (48px auf ≈ 320px Boxhöhe), der Bildstreifen * dazwischen bleibt gleich breit. */ #top .gh-hero-intro::after { left: calc(100% - 1px); right: auto; width: calc(10.4167% + 1px - var(--gh-hero-luecke)); clip-path: polygon(0 0, 100% 0, calc(100% - var(--gh-ueberlappung) * 0.15) 100%, 0 100%); } #top .gh-hero-text .container { padding-top: 56px; padding-bottom: 72px; } #top .gh-hero-kicker p { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 14px; color: var(--gh-primaer-dunkel); font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } #top .gh-hero-kicker p::before { content: ""; width: 40px; height: 3px; background: var(--gh-primaer); } /* * „Seit 1974“ groß über der Kicker-Zeile (Kunde, 14.10.2026: das Gründungsjahr schafft Vertrauen). Im ALB steht es * als am Anfang des Absatzes; order holt es vor den Strich (::before), die volle Breite bricht danach um. */ #top .gh-hero-kicker p strong { flex: 0 0 100%; order: -1; margin-bottom: 4px; color: var(--gh-primaer-dunkel); font-size: clamp(36px, 3.4vw, 50px); font-weight: 900; line-height: 1; letter-spacing: 0.02em; } #top .gh-hero-h1 .av-special-heading-tag { color: var(--gh-dunkel); font-weight: 900; line-height: 1.08; text-wrap: balance; } #top .gh-hero-h1 .av-subheading { max-width: 40em; margin-top: 18px; color: #4d4d4f; line-height: 1.6; } #top .gh-hero-h1.av-special-heading { margin-bottom: 0; } #top .gh-hero-buttons { margin-top: 32px; } #top .gh-hero-fakten { position: relative; z-index: 2; margin-top: calc(-56px - var(--gh-ueberlappung)); padding: 44px 40px 40px 64px; background: var(--gh-primaer-dunkel) var(--gh-verlauf-quer); /* links → rechts: läuft nahtlos in ::after weiter */ color: #ffffff; } /* Enfold nutzt ::before/::after der Spalten als Clearfix (height:0, visibility:hidden) – hier überschrieben */ #top .gh-hero-fakten::before, #top .gh-hero-fakten::after { content: ""; position: absolute; top: 0; bottom: 0; height: auto; visibility: visible; background: inherit; } /* schräge linke Kante (parallel zu den Bildkanten) – Anfangsfarbe des Verlaufs */ #top .gh-hero-fakten::before { right: calc(100% - 1px); /* 1px Überlappung gegen Subpixel-Spalt */ left: auto; width: 48px; background: var(--gh-primaer-verlauf-start); clip-path: polygon(100% 0, 100% 100%, 0 100%); } /* Fläche läuft bis zum rechten Fensterrand – Endfarbe des Verlaufs, damit er nahtlos weitergeht */ #top .gh-hero-fakten::after { left: calc(100% - 1px); right: auto; width: 50vw; background: var(--gh-primaer-verlauf-ende); } #top .gh-kennzahlen { margin: 0; list-style: none; } /* * Kennzahlen in der grünen Box – Typo-Akzent: Zahl sehr groß und eng, Vorsatz/Einheit klein (: „≈“, „t“), * Beschriftung in Versalien, immer unter der Zahl (Team, 29.10.2026). Bis dahin ab 320px Boxbreite nebeneinander – * mit sechsstelligen Zahlen („~200.000 lfm“, 281px) blieben der Beschriftung daneben nur 28px. Die Zahl schrumpft mit * der Box (cqi), damit sie auch in schmalen Boxen nicht übersteht. */ #top .gh-hero-fakten .avia_textblock { container-type: inline-size; } #top .gh-kennzahlen li { display: block; margin: 0; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } #top .gh-kennzahlen li:first-child { padding-top: 0; } #top .gh-kennzahlen li:last-child { border-bottom: 0; padding-bottom: 0; } #top .gh-kennzahlen strong { display: block; color: #ffffff; font-size: 60px; font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; white-space: nowrap; } #top .gh-kennzahlen strong small { margin: 0 0.1em; color: var(--gh-primaer-hell); font-size: 0.42em; font-weight: 800; letter-spacing: 0; } /* * Vorsatz „~“ mittig zu den Ziffern statt auf der Grundlinie (Kunde 29.10.2026: „nur eine mittige ~“). Erkannt als erstes * vor einem zweiten (Einheit) – eine Zahl mit Vorsatz, aber ohne Einheit bekäme die Anhebung nicht. */ #top .gh-kennzahlen strong small:first-child:not(:last-child) { vertical-align: 0.54em; /* gemessen: Mitte der Tilde = Mitte der Ziffern (Nunito Sans 900, Vorsatz 0.42em) */ } /* 1024px: Box 227px, „~200.000 lfm“ in 60px wäre 276px breit */ #top .gh-hero-fakten .gh-kennzahlen:not(.gh-kennzahlen-hell) strong { font-size: min(60px, 20cqi); } #top .gh-kennzahlen:not(.gh-kennzahlen-hell) span { display: block; max-width: 18em; margin-top: 10px; color: #ffffff; /* reines Weiß: auf dem hellen Verlaufsende sonst unter 4,5:1 */ font-size: 14px; font-weight: 600; line-height: 1.45; letter-spacing: 0.08em; text-transform: uppercase; } /* * Auftraggeber-Leiste (Startseite, [gh_auftraggeber] aus inc/firma.php): Logos frei auf Weiß in einer Reihe (ohne * Kästchen, Team 02.10.2026), in Graustufen – beim Überfahren farbig. Ohne Logo-Datei eine Wortmarke. */ #top .gh-auftraggeber-leiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px 40px; margin: 8px 0 0; list-style: none; } /* Selektor stärker als Enfolds Listenabstand (li: margin-bottom außer beim letzten) */ #top .gh-auftraggeber-leiste > li.gh-marke { display: flex; align-items: center; justify-content: center; min-height: 64px; margin: 0; padding: 0; text-align: center; } #top .gh-marke-name { color: var(--gh-grau-text); font-family: var(--gh-font-titel); font-size: 22px; font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; transition: color 0.25s ease; } /* * Größe kommt aus den Attributen width/height (gleiche Fläche, gh_logo_masse()); schmale Kacheln skalieren * proportional herunter. Kein width: auto – das überschreibt das Attribut, und SVGs ohne eigene Größe füllen dann * die ganze Kachel. */ #top .gh-marke img { display: block; max-width: 100%; height: auto; filter: grayscale(1) contrast(1.1); opacity: 0.6; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } #top .gh-marke:hover .gh-marke-name { color: var(--gh-dunkel); } #top .gh-marke:hover img { filter: none; opacity: 1; transform: scale(1.04); } @media only screen and (max-width: 767px) { #top .gh-auftraggeber-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } #top .gh-auftraggeber-leiste > li.gh-marke { min-height: 56px; } #top .gh-marke-name { font-size: 18px; } } /* * Bewertungs-Leiste (Startseite, [gh_bewertungen] aus inc/bewertungen.php): links Google-Logo und Titel, rechts je * Standort eine weiße, klickbare Karte mit großem Wert, Sternen (gelbe Lage auf den Anteil beschnitten) und Ort. */ #top .gh-bewertung-leiste .content { padding-top: 40px; padding-bottom: 40px; } #top .gh-bewertungen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; } #top .gh-bewertungen-kopf { display: flex; align-items: center; gap: 16px; } #top .gh-bewertungen-kopf p { margin: 0; line-height: 1.35; } #top .gh-bewertungen-kopf strong { display: block; color: var(--gh-dunkel); font-family: var(--gh-font-titel); font-size: 22px; font-weight: 900; } #top .gh-bewertungen-kopf span { color: var(--gh-grau-text); font-size: 15px; } /* * Karten (2 × Google, FirmenABC) gleich breit über die volle Breite unter dem Kopf: zwei Spalten, eine ungerade letzte * Karte über beide; ab 1200px drei nebeneinander (darunter wäre „Großglocknerstraße“ zu breit für die Karte). */ #top .gh-bewertungen-liste { display: grid; flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gh-karte-luecke); margin: 0; list-style: none; } #top .gh-bewertungen-liste li:last-child:nth-child(odd) { grid-column: 1 / -1; } @media only screen and (min-width: 1200px) { #top .gh-bewertungen-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } #top .gh-bewertungen-liste li:last-child:nth-child(odd) { grid-column: auto; } } #top .gh-bewertungen-liste li { margin: 0; } #top .gh-bewertung-karte { display: flex; align-items: center; gap: 18px; height: 100%; padding: 18px 24px; background: #ffffff; box-shadow: var(--gh-schatten); color: var(--gh-dunkel); text-decoration: none; transition: box-shadow 0.25s ease, transform 0.25s ease; } #top .gh-bewertung-karte:hover, #top .gh-bewertung-karte:focus-visible { box-shadow: var(--gh-schatten-hover); transform: translateY(-4px); } #top .gh-bewertung-wert { font-family: var(--gh-font-titel); font-size: 42px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; } #top .gh-bewertung-text { display: flex; flex-direction: column; gap: 6px; } #top .gh-bewertung-ort { color: var(--gh-grau-text); font-size: 15px; line-height: 1.35; } /* Google-Logo vor dem Ort (Plattform je Karte, seit FirmenABC dazukam) */ #top .gh-bewertung-logo { display: inline-block; margin: -2px 6px 0 0; vertical-align: middle; } /* FirmenABC zeigt keine Sterne, nur eine Empfehlungsrate – Zeile an Stelle der Sterne */ #top .gh-bewertung-label { color: var(--gh-dunkel); font-family: var(--gh-font-titel); font-size: 15px; font-weight: 800; line-height: 20px; } #top .gh-bewertung-pfeil { flex: none; margin-left: auto; color: var(--gh-primaer-dunkel); } #top .gh-sterne { position: relative; display: inline-block; width: 100px; line-height: 0; } #top .gh-sterne svg { max-width: none; /* volle Breite auch in der beschnittenen Lage */ fill: var(--gh-linie); } #top .gh-sterne-voll { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; } #top .gh-sterne-voll svg { fill: #f5b301; } @media only screen and (max-width: 767px) { #top .gh-bewertungen-liste { grid-template-columns: minmax(0, 1fr); } #top .gh-bewertung-karte { padding: 16px 20px; } } /* * Leistungs-Kacheln (Startseite, /leistungen/): weiße Karte mit leichtem Schatten, Inhalt zentriert, grünes * Piktogramm ([gh_icon], inc/icons.php). */ #top .gh-kachel { padding: 40px var(--gh-karte-pad) var(--gh-karte-pad); background: #ffffff; border: 0; box-shadow: var(--gh-schatten); text-align: center; cursor: pointer; /* ganze Kachel klickbar (js/custom.js) */ transition: box-shadow 0.25s ease, transform 0.25s ease; } #top .gh-kachel:hover, #top .gh-kachel:focus-within { box-shadow: var(--gh-schatten-hover); transform: translateY(-4px); } #top .gh-kachel .av-special-heading { margin-bottom: 14px; } #top .gh-kachel-icon p { margin: 0 0 24px; } /* Piktogramm schlicht in CI-Grün, ohne Rahmen oder Fläche (Team, 02.10.2026) */ #top .gh-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--gh-primaer-dunkel); } #top .gh-icon svg { width: 72px; height: 72px; transition: transform 0.25s ease; } #top .gh-kachel:hover .gh-icon svg { transform: translateY(-3px); } /* Buttons aller Kacheln einer Reihe auf gleicher Höhe (Kachel als Spalte, Button nach unten) */ #top .gh-kachel .avia-button-wrap { margin-top: auto; padding-top: 24px; } @media only screen and (min-width: 1200px) { #top .gh-leistungen .flex_column_table { display: flex; gap: 32px; } #top .gh-leistungen .flex_column_table > .flex_column { display: flex; flex: 1 1 0; flex-direction: column; float: none; width: auto; min-width: 0; margin: 0; } #top .gh-leistungen .av-flex-placeholder { display: none; } } /* * Karten (02.10.2026) – Projekt-Grid (Enfold-Portfolio), Leistungs-Kacheln, Ansprechpartner, Stellen: weiß, feiner * Rahmen, gleiche Innenabstände und Lücken. Klickbare Karten heben sich beim Überfahren als Ganzes hervor * (grüner Rahmen, leicht angehoben, Bild zoomt sanft) – ohne Enfolds Bild-Overlay mit Pfeil. * Projekt-Grid: Enfold positioniert die Einträge per Isotope absolut – Lücken daher als Innenabstand der Einträge. */ #top .grid-sort-container { margin-right: calc(var(--gh-karte-luecke) / -2); margin-left: calc(var(--gh-karte-luecke) / -2); } #top .grid-sort-container .grid-entry { padding: 0 calc(var(--gh-karte-luecke) / 2) var(--gh-karte-luecke); } #top .grid-entry .inner-entry { overflow: hidden; background: #ffffff; border: 0; box-shadow: var(--gh-schatten); transition: box-shadow 0.25s ease, transform 0.25s ease; } #top .grid-entry .inner-entry:hover, #top .grid-entry .inner-entry:focus-within { box-shadow: var(--gh-schatten-hover); transform: translateY(-4px); } #top .grid-entry .grid-image { display: block; overflow: hidden; } /* * Projektbilder sofort zeigen (Lighthouse mobil, 12.10.2026: LCP /projekte/ 4,3 s). Enfold blendet sie erst ein, wenn * alle Bilder des Rasters geladen sind, je 1,5 s lang (portfolio.css: .js_active .grid-image { opacity: 0 }, * portfolio.js: $.avia_utilities.preload → animate). Mit WP Rocket (defer) erschien das erste Bild über 1 s nach dem * Laden. Höhe gleich „auto“ (Enfold setzt sie erst im selben Callback) – Breite/Höhe am reservieren den Platz. * html.js_active (avia-compat.js) + body#top schlägt Enfolds Regel. */ .js_active #top .grid-entry .grid-image { height: auto; opacity: 1; } #top .grid-entry .grid-image img { display: block; width: 100%; transition: transform 0.5s ease; } #top .grid-entry .inner-entry:hover .grid-image img { transform: scale(1.04); } /* Enfolds Hover-Overlay (Kreis mit Pfeil) blendet sein JS per Inline-Style ein – nur hier !important */ #top .grid-entry .image-overlay, #top .grid-entry .avia-arrow { display: none !important; } #top .grid-entry .grid-content { padding: 20px 24px 24px; background: transparent; } #top .grid-entry .grid-entry-title { min-height: 4.05em; /* drei Zeilen – Karten einer Reihe bleiben gleich hoch */ margin: 0; font-family: var(--gh-font-titel); font-size: 18px; font-weight: 800; line-height: 1.35; } #top .grid-entry .grid-entry-title a { color: var(--gh-dunkel); } #top .grid-entry .inner-entry:hover .grid-entry-title a { color: var(--gh-primaer-dunkel); } /* * Schmale Karten (Tablet, 3–4 Spalten): „Pumpspeicherkraftwerk“ passte bei 18px nicht in die Zeile und stieß an den * Kartenrand (12.10.2026). Etwas kleiner und mit weniger Innenabstand statt Silbentrennung (die trennt auch unnötig). */ #top .grid-entry .inner-entry { container: gh-projektkarte / inline-size; } @container gh-projektkarte (max-width: 259px) { #top .grid-entry .grid-content { padding: 16px 18px 20px; } #top .grid-entry .grid-entry-title { font-size: 16px; } } /* Sehr schmale Karten (Startseite, 4 Spalten bei 990–1199px): nur lange Wörter trennen („Pumpspeicher-kraftwerk“) */ @container gh-projektkarte (max-width: 219px) { #top .grid-entry .grid-entry-title { hyphens: auto; hyphenate-limit-chars: 15 6 6; } } /* Filter des Projekt-Grids (Enfold-Sortierung) wie die Team-Filterleiste */ #top .sort_width_container { margin: 0 0 28px; } #top .sort_by_cat { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 2px 8px; /* Platz für die Schräge – Enfold schneidet den Filterbereich am Rand ab */ } #top .sort_by_cat .text-sep { display: none; } #top .sort_by_cat a { margin: 0; padding: 9px 18px; box-shadow: inset 0 0 0 2px var(--gh-primaer-dunkel); color: var(--gh-primaer-dunkel); font-family: var(--gh-font-titel); font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; transform: skewX(-12deg); transition: background-color 0.2s ease, color 0.2s ease; } #top .sort_by_cat a .inner_sort_button { display: inline-block; transform: skewX(12deg); } #top .sort_by_cat a:hover, #top .sort_by_cat a.active_sort { background: var(--gh-primaer-dunkel); color: #ffffff; } #top .gh-projekte .avia-button-wrap { margin-top: 8px; } /* Typo-Akzent Startseite: „1974“ sehr groß als Kontur hinter dem Unternehmensblock (dekorativ, ohne Ansage) */ #top .gh-unternehmen { position: relative; overflow: hidden; } #top .gh-unternehmen::before { content: "1974" / ""; position: absolute; right: -0.03em; bottom: -0.2em; z-index: 0; color: var(--gh-kontur-grund); font-family: var(--gh-font-titel); font-size: clamp(160px, 24vw, 360px); font-weight: 900; line-height: 1; letter-spacing: -0.04em; pointer-events: none; -webkit-text-stroke: 4px var(--gh-primaer-kontur); paint-order: stroke fill; } #top .gh-unternehmen .container { position: relative; z-index: 1; } /* Projekt-Teaser (Startseite) */ #top p.gh-projekt-fakten { font-size: 15px; color: var(--gh-grau-text); } /* CTA */ #top .gh-cta-kontakt a { color: #ffffff; font-size: 1.5em; font-weight: 600; line-height: 1.6; text-decoration: none; } /* * Footer: eine hellgraue, wie das Hero-Bild eingerückte Fläche, links und rechts leicht schräg (Team, 02.10.2026). * Besteht aus Footer-Seite (ALB-Seite „Footer“, tools/alb/footer.txt → .gh-footer in #footer-page) und Socket * (Rechtliches + Copyright, zentriert unter einer feinen Linie). Markenakzent: grüner Schrägbalken oben links. * Enfold-Bezug: Footer-Seite und Socket sind Geschwister ohne gemeinsamen Wrapper. Die Fläche ist deshalb ein * Pseudo-Element von #footer-page, das bis unter den Socket reicht – die Socket-Höhe setzt js/custom.js * (--gh-socket-hoehe, hier ein Schätzwert als Fallback). So laufen die Schrägen in einem Zug durch. */ :root { --gh-footer-schnitt: clamp(20px, 3vw, 44px); /* waagrechter Versatz der Schrägen über die ganze Footer-Höhe */ --gh-socket-hoehe: 161px; } #top #footer-page, #top #socket { width: auto; margin: 0 var(--gh-rand); background: transparent; } /* * Enfold-Sektionen floaten: ohne clear/flow-root hätte #footer-page keine Höhe. Abstand als Padding – * ein margin-top würde von der Clearance nach den Floats geschluckt. */ #top #footer-page { position: relative; z-index: 0; display: flow-root; clear: both; padding-top: 64px; } #top #footer-page::before { content: ""; position: absolute; top: 64px; right: 0; bottom: calc(-1 * var(--gh-socket-hoehe)); left: 0; z-index: -1; background: var(--gh-hell); clip-path: polygon(var(--gh-footer-schnitt) 0, 100% 0, calc(100% - var(--gh-footer-schnitt)) 100%, 0 100%); pointer-events: none; } /* Fläche kommt aus #footer-page::before – custom_bg der ALB-Sektion überdecken */ #top #footer-page .gh-footer { position: relative; background: transparent; } /* Socket über der Fläche (sonst läge das Pseudo-Element von #footer-page über seinem Text) */ #top #socket { position: relative; z-index: 1; margin-bottom: var(--gh-rand); } #top .gh-footer .container { padding-top: 72px; padding-bottom: 40px; } #top .gh-footer, #top .gh-footer p { color: var(--gh-dunkel); font-size: 16px; line-height: 1.85; } #top .gh-footer p { margin: 0 0 1em; } #top .gh-footer a, #top #socket .menu a { color: var(--gh-dunkel); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } #top .gh-footer a:hover, #top #socket .menu a:hover { color: var(--gh-primaer-dunkel); text-decoration-thickness: 2px; } #top .gh-footer .av-special-heading { margin-bottom: 16px; } #top .gh-footer-titel .av-special-heading-tag { margin-bottom: 0; color: var(--gh-dunkel); font-size: 19px; letter-spacing: 0; text-transform: none; } #top .gh-footer-titel .special-heading-border { display: none; } #top .gh-footer-links ul { margin: 0; list-style: none; } #top .gh-footer-links li { margin: 0; line-height: 1.85; } /* * Footer-Leiste ([gh_holding], inc/firma.php) unten in der Footer-Fläche, über der Linie: links die Social-Buttons, * rechts „Ein Unternehmen der ETM Holding GmbH und der MaBaU GmbH“ mit ETM-Logo. */ #top .gh-footer-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; } #top .gh-footer-leiste .gh-holding { display: flex; align-items: center; gap: 20px; margin-left: auto; } #top .gh-footer .gh-footer-leiste p.gh-holding-text { margin: 0; white-space: nowrap; /* einzeilig (Team, 14.10.2026); mobil darf es umbrechen */ color: var(--gh-grau-text); font-size: 14px; line-height: 1.5; text-align: right; } /* Selektor stärker als Footer- und Textblock-Links (Unterstreichung) */ #top .gh-footer .gh-footer-leiste a.gh-holding-logo { display: block; flex: none; line-height: 0; text-decoration: none; opacity: 0.85; transition: opacity 0.2s ease; } #top .gh-footer .gh-footer-leiste a.gh-holding-logo:hover { opacity: 1; } #top .gh-holding-logo img { width: auto; height: 52px; } /* Social-Buttons: Vollfläche in Primärfarbe mit abgeschrägter Ecke wie der Logo-Reiter (Formensprache „Felsschnitt“) */ #top .gh-footer-leiste ul.gh-social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; } #top .gh-footer-leiste ul.gh-social li { margin: 0; padding: 0; } #top .gh-footer .gh-footer-leiste ul.gh-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--gh-primaer-dunkel); color: #ffffff; text-decoration: none; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); transition: background-color 0.2s ease; } #top .gh-footer .gh-footer-leiste ul.gh-social a:hover { background: var(--gh-dunkel); } /* clip-path schneidet den Fokusrahmen ab – deshalb innen statt außen */ #top .gh-footer .gh-footer-leiste ul.gh-social a:focus-visible { outline: 2px solid #ffffff; outline-offset: -5px; } /* Socket: feine Linie nur über dem Inhalt (nicht bis an die Schrägen), Rechtliches und Copyright zentriert untereinander */ #top #socket .container { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 28px; padding-bottom: 36px; border-top: 0; background: linear-gradient(var(--gh-linie), var(--gh-linie)) no-repeat 50% 0 / calc(100% - 100px) 1px; } /* Markenakzent: grüner Schrägbalken an der Oberkante, parallel zu den Bildkanten */ #top .gh-footer::before { content: ""; position: absolute; top: 0; left: var(--gh-schnitt); z-index: 1; width: clamp(140px, 26%, 360px); height: 10px; background: var(--gh-primaer); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } #top #socket .sub_menu_socket { order: 1; } #top #socket .copyright { order: 2; } #top #socket .copyright, #top #socket .sub_menu_socket { float: none; margin: 0; padding: 0; color: var(--gh-dunkel); font-size: 15px; } #top #socket .menu li { display: inline-block; float: none; margin: 0 12px; padding: 0; border: 0; } #top #socket .menu a { font-size: 15px; } /* Projekte (Enfold-Portfolio, ALB-Layout aus inc/cli-import.php): Abstand unter H1 + Lead, Faktenbox [gh_projekt_fakten] */ #top .gh-projekt-faktenbox { padding: var(--gh-karte-pad); background: var(--gh-hell); } #top .gh-projekt-fakten { margin: 0 0 24px; } #top .gh-projekt-fakten dt { margin-top: 14px; color: var(--gh-grau-text); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } #top .gh-projekt-fakten dt:first-child { margin-top: 0; } #top .gh-projekt-fakten dd { margin: 2px 0 0; } #top .gh-projekt-fakten ul { margin: 4px 0 0 1.1em; } #top .gh-badge { display: inline-block; margin-top: 6px; padding: 3px 10px; background: var(--gh-primaer-dunkel); color: #ffffff; font-size: 14px; font-weight: 600; } /* Fakten-Seite: lesbare Zeilenlänge */ #top .gh-fakten-seite .entry-content-wrapper { max-width: 860px; } /* Fakten-Seite /fakten/ (Grounding Page, Kerndaten aus [gh_fakten], inc/firma.php) */ #top .gh-lead { font-size: 1.15em; line-height: 1.6; } #top .gh-fakten { display: grid; grid-template-columns: minmax(10em, 16em) 1fr; margin: 0 0 2em; border-top: 1px solid var(--gh-linie); } #top .gh-fakten dt, #top .gh-fakten dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--gh-linie); } #top .gh-fakten dt { padding-right: 1.5em; color: var(--gh-grau-text); font-weight: 600; } /* * Kontaktseite: Anfrageformular (Ninja Forms, tools/anfrage-formular.php) in .gh-anfrage, Kontaktbox rechts. * Ninja-Forms-Stil steht auf „keiner“ – nur display-structure.css (Spalten, Abstände) ist geladen. * Enfold stylt Eingabefelder über #top .main_color input[…] (1,2,1) – die Selektoren hier liegen darüber. */ #top .gh-anfrage-hinweis p { color: #4d4d4f; } /* * Ninja Forms rendert das Formular erst per JavaScript – bis dahin ist der Container ~40px hoch, danach schob das * Formular die Kontaktbox weg (CLS 0,3 mobil). Platz in der gemessenen Endhöhe reservieren, bis .nf-form-wrap da ist. */ #top .gh-anfrage .nf-form-cont:not(:has(.nf-form-wrap)) { min-height: 870px; } @media only screen and (max-width: 767px) { #top .gh-anfrage .nf-form-cont:not(:has(.nf-form-wrap)) { min-height: 1200px; } } #top .gh-anfrage .nf-form-fields-required { margin-bottom: 20px; color: var(--gh-grau-text); font-size: 15px; } #top .gh-anfrage .nf-field-container { margin-bottom: 22px; } #top .gh-anfrage .nf-field-label label { margin-bottom: 6px; color: var(--gh-dunkel); font-size: 16px; font-weight: 700; } #top .gh-anfrage .ninja-forms-req-symbol { color: var(--gh-primaer-dunkel); } #top .gh-anfrage .nf-field-element .ninja-forms-field:not([type="checkbox"]):not([type="submit"]) { width: 100%; margin: 0; padding: 12px 14px; border: 1px solid #949494; /* ≥ 3:1 auf Weiß (WCAG 1.4.11) */ border-radius: 0; background: #ffffff; color: var(--gh-dunkel); font-size: 16px; line-height: 1.4; } #top .gh-anfrage .nf-field-element textarea.ninja-forms-field { min-height: 180px; } /* Auswahlfeld mit Pfeil – ohne sah „Leistungsbereich“ wie ein Textfeld aus (Ninja-Forms-Stil „keiner“) */ #top .gh-anfrage .nf-field-element select.ninja-forms-field:not([type="checkbox"]):not([type="submit"]) { padding-right: 44px; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%231f1f1f' stroke-width='2' d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; appearance: none; cursor: pointer; } #top .gh-anfrage .nf-field-element .ninja-forms-field::placeholder { color: var(--gh-grau-text); opacity: 1; } #top .gh-anfrage .nf-field-element .ninja-forms-field:focus { border-color: var(--gh-primaer-dunkel); outline: 2px solid var(--gh-primaer-dunkel); outline-offset: -1px; } /* Fehler: Dunkelrot aus der Altseiten-CI (Accent2) statt Ninja-Forms-Signalrot */ #top .gh-anfrage .nf-error .ninja-forms-field:not([type="checkbox"]) { border-color: #981711; } #top .gh-anfrage .nf-error-msg { margin-top: 6px; color: #981711; font-size: 15px; font-weight: 600; } #top .gh-anfrage .nf-form-errors .nf-error-msg { margin: 0 0 16px; } /* Datenschutz-Checkbox: Box links, Text rechts, Link unterstrichen */ #top .gh-anfrage .checkbox-wrap { align-items: flex-start; } #top .gh-anfrage .checkbox-wrap .nf-field-element { width: 22px; flex: 0 0 22px; } #top .gh-anfrage .checkbox-wrap .ninja-forms-field { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--gh-primaer-dunkel); } #top .gh-anfrage .checkbox-wrap .nf-field-label { flex: 1; padding-left: 12px; } #top .gh-anfrage .checkbox-wrap .nf-field-label label { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.55; } #top .gh-anfrage .checkbox-wrap .nf-field-label a { color: var(--gh-dunkel); text-decoration: underline; text-underline-offset: 3px; } #top .gh-anfrage .checkbox-wrap .nf-field-label a:hover { color: var(--gh-primaer-dunkel); } /* Absenden wie die Website-Buttons: Parallelogramm per skewX am Rahmen, Feld zurückgeschert (Inputs haben keinen Inhalt zum Gegen-Skew) */ #top .gh-anfrage .submit-wrap .nf-field-element { display: inline-block; width: auto; background: var(--gh-primaer-dunkel); transform: skewX(-12deg); transition: background-color 0.2s ease; } #top .gh-anfrage .submit-wrap .nf-field-element:hover { background: var(--gh-dunkel); } #top .gh-anfrage .submit-wrap .nf-field-element input[type="submit"] { margin: 0; padding: 16px 36px; border: 0; border-radius: 0; background: transparent; color: #ffffff; font-size: 16px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transform: skewX(12deg); } #top .gh-anfrage .submit-wrap .nf-field-element input[type="submit"]:focus-visible { outline: 2px solid var(--gh-dunkel); outline-offset: 4px; } #top .gh-anfrage .nf-response-msg { padding: 24px 28px; background: var(--gh-hell); border-top: 4px solid var(--gh-primaer); } #top .gh-anfrage .nf-response-msg p:last-child { margin-bottom: 0; } /* Kontaktbox rechts wie die Projekt-Faktenbox */ #top .gh-kontakt-box { padding: var(--gh-karte-pad); background: var(--gh-hell); } #top .gh-kontakt-box h2 { margin-bottom: 14px; font-size: 22px; } #top .gh-standort h3, #top .gh-kontakt-box h3 { margin: 28px 0 8px; color: var(--gh-grau-text); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } #top .gh-standort p, #top .gh-kontakt-box p { margin: 0 0 12px; } #top .gh-standort h3:first-child { margin-top: 0; } #top .gh-kontakt-box a[href^="tel:"], #top .gh-kontakt-box a[href^="mailto:"] { color: var(--gh-dunkel); font-size: 18px; font-weight: 600; } #top .gh-kontakt-box a:hover { color: var(--gh-primaer-dunkel); } /* * Tablet (768–989px): Die Kontaktbox steht unter dem Formular (Spalten-Regel unten). Innen: Kontaktwege oben, die * beiden Standorte nebeneinander, Routen darunter – Reihenfolge wie im Text (Hauptstandort vor Kleblach-Lind). */ @media only screen and (min-width: 768px) and (max-width: 989px) { /* nur Boxen mit zwei Standorten (die ANKÖ-Box auf /unternehmen/ hat dieselbe Klasse, aber nur einen Absatz) */ #top .gh-kontakt-box .avia_textblock:has(> h3:nth-of-type(2)) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } #top .gh-kontakt-box .avia_textblock > * { grid-column: 1 / -1; } #top .gh-kontakt-box .avia_textblock > h3:nth-of-type(1), #top .gh-kontakt-box .avia_textblock > h3:nth-of-type(1) + p { grid-column: 1; } #top .gh-kontakt-box .avia_textblock > h3:nth-of-type(2), #top .gh-kontakt-box .avia_textblock > h3:nth-of-type(2) + p { grid-column: 2; } #top .gh-kontakt-box .avia_textblock > h3:nth-of-type(1), #top .gh-kontakt-box .avia_textblock > h3:nth-of-type(2) { grid-row: 3; } #top .gh-kontakt-box .avia_textblock > h3:nth-of-type(1) + p, #top .gh-kontakt-box .avia_textblock > h3:nth-of-type(2) + p { grid-row: 4; } } /* * Leistungs- und Unternehmensseiten (Vorlagen tools/alb/*.txt): Kennzahlen hell, Faktenbox, Listen, Ablauf, Zeitleiste, * Referenzen, Downloads, Stellen, FAQ (Enfold-Toggles) und Ansprechpartner-Karten ([gh_ansprechpartner], inc/kontakte.php). */ /* * Kennzahlen hell – Typo-Akzent: Zahl sehr groß, eng gesetzt, Verlauf zwischen den beiden CI-Grüns. Schmal (Infobox, * mobil): Zahl über dem Text. Breit (ab 440px Spaltenbreite, Container-Query): Zahl links, alle Texte auf einer * gemeinsamen Fluchtlinie hinter der breitesten Zahl (Subgrid). Ohne Container-Query-Unterstützung bleibt es gestapelt. */ #top .avia_textblock:has(> .gh-kennzahlen-hell) { container-type: inline-size; } #top .gh-kennzahlen-hell li { display: block; padding: 22px 0; border-bottom-color: var(--gh-linie); } #top .gh-kennzahlen-hell strong { display: block; width: fit-content; /* Verlauf-Text malt nur innerhalb der Box: Platz für Umlaut-Punkte (ANKÖ) und Überhang, ohne die Zeile zu verschieben */ margin: -0.14em 0 -0.06em; padding: 0.14em 0.06em 0.06em 0; background: linear-gradient(135deg, var(--gh-primaer) 0%, var(--gh-primaer-dunkel) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 3rem; font-weight: 900; line-height: 0.95; letter-spacing: -0.035em; } #top .gh-kennzahlen-hell span { display: block; max-width: 30ch; margin-top: 10px; color: var(--gh-dunkel); font-size: 16px; line-height: 1.45; } @container (min-width: 440px) { #top .gh-kennzahlen-hell { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 36px; } #top .gh-kennzahlen-hell li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: 26px 0; } #top .gh-kennzahlen-hell strong { font-size: clamp(56px, 5.2vw, 76px); } #top .gh-kennzahlen-hell span { margin-top: 0; } } #top .gh-referenzliste { margin-top: 16px; /* nach dem Projekt-Grid, das unter den Karten schon 32px Lücke hat */ } #top .gh-leistung-box { padding: var(--gh-karte-pad); background: var(--gh-hell); } #top .gh-leistung-box .avia-button-wrap { margin-top: 24px; } #top .gh-liste-spalten { columns: 2 16em; column-gap: 2.5em; } #top .gh-liste-spalten li { break-inside: avoid; } #top .gh-hinweis { color: var(--gh-grau-text); font-size: 15px; } /* Ablauf in vier nummerierten Schritten */ #top .gh-ablauf-schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 8px 0 0; list-style: none; counter-reset: gh-schritt; } #top .gh-ablauf-schritte li { margin: 0; counter-increment: gh-schritt; } /* Typo-Akzent: große Kontur-Ziffern */ #top .gh-ablauf-schritte li::before { content: counter(gh-schritt, decimal-leading-zero); display: block; color: var(--gh-kontur-grund); font-size: 72px; font-weight: 900; line-height: 0.9; letter-spacing: -0.02em; -webkit-text-stroke: 4px var(--gh-primaer-dunkel); paint-order: stroke fill; } #top .gh-ablauf-schritte strong { display: block; margin: 10px 0 6px; font-size: 18px; } /* Firmengeschichte */ #top .gh-zeitleiste { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gh-karte-luecke); margin: 8px 0 0; list-style: none; } #top .gh-zeitleiste li { margin: 0; } #top .gh-jahr-label { display: block; margin-bottom: 6px; color: var(--gh-primaer-dunkel); font-family: var(--gh-font-titel); font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } /* Typo-Akzent: Jahreszahl sehr groß als Kontur */ #top .gh-zeitleiste .gh-jahr { display: block; margin: 0 0 18px; color: var(--gh-kontur-grund); font-family: var(--gh-font-titel); font-size: clamp(72px, 8.5vw, 128px); font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; -webkit-text-stroke: 4px var(--gh-primaer-dunkel); paint-order: stroke fill; } #top .gh-jahr-text { display: block; } /* Referenzlisten und Downloads */ #top .gh-referenzliste h3 a { color: var(--gh-dunkel); } #top .gh-referenzliste h3 a:hover { color: var(--gh-primaer-dunkel); } #top .gh-downloads { margin: 0; list-style: none; border-top: 1px solid var(--gh-linie); } #top .gh-downloads li { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--gh-linie); } #top .gh-downloads a { color: var(--gh-dunkel); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } #top .gh-downloads a:hover { color: var(--gh-primaer-dunkel); } #top .gh-downloads span { color: var(--gh-grau-text); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; } /* Stellenangebote */ #top .gh-stelle { padding: var(--gh-karte-pad); background: #ffffff; box-shadow: var(--gh-schatten); } /* * FAQ (Enfold-Toggles, clean): keine Kästen und Grauflächen, nur feine Trennlinien zwischen den Fragen. Frage fett, * rechts ein grünes Plus, das sich beim Öffnen zum Minus dreht. Enfold färbt Toggles über das Farbset (dynamic_avia: * .main_color .toggler / :hover / .activeTitle mit Hintergrund) und zeichnet das Icon aus zwei Rahmenlinien. */ #top .gh-faq .togglecontainer { max-width: 900px; margin-top: 0; border-top: 1px solid var(--gh-linie); } #top .gh-faq .av_toggle_section { border-bottom: 1px solid var(--gh-linie); } #top .gh-faq .toggler, #top .gh-faq .toggler:hover, #top .gh-faq .toggler.activeTitle, #top .gh-faq .toggler.activeTitle:hover { top: 0; padding: 22px 56px 22px 0; border: 0; border-radius: 0; background: transparent; color: var(--gh-dunkel); font-size: 18px; font-weight: 800; line-height: 1.4; transition: color 0.2s ease; } #top .gh-faq .toggler:hover, #top .gh-faq .toggler.activeTitle, #top .gh-faq .toggler.activeTitle:hover { color: var(--gh-primaer-dunkel); } #top .gh-faq .toggler:focus-visible { outline: 2px solid var(--gh-primaer-dunkel); outline-offset: 4px; } #top .gh-faq .toggle_icon { top: 50%; right: 8px; left: auto; width: 20px; height: 20px; margin-top: -10px; border: 0; background: transparent; } #top .gh-faq .toggle_icon .hor_icon, #top .gh-faq .toggle_icon .vert_icon, #top .gh-faq .activeTitle .toggle_icon .vert_icon { position: absolute; border: 0; background: var(--gh-primaer-dunkel); transition: transform 0.3s ease; } #top .gh-faq .toggle_icon .hor_icon { top: 9px; left: 0; width: 20px; height: 2px; } #top .gh-faq .toggle_icon .vert_icon { top: 0; left: 9px; width: 2px; height: 20px; } #top .gh-faq .activeTitle .toggle_icon .vert_icon { transform: rotate(90deg); } #top .gh-faq .toggle_content { margin: 0; padding: 0 56px 24px 0; border: 0; background: transparent; color: var(--gh-dunkel); } #top .gh-faq .toggle_content p:last-child { margin-bottom: 0; } /* Rechtstexte: lesbare Zeilenlänge */ #top .gh-textseite .entry-content-wrapper { max-width: 860px; } /* Ansprechpartner-Karten */ /* Zwei Spalten erst ab 540px Breite (zwei kompakte Karten unter 540px wären zu eng) */ #top .gh-ansprechpartner { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gh-karte-luecke); margin-bottom: 1em; } /* Hebt sich beim Überfahren wie die übrigen Karten hervor, das Foto zoomt sanft (Kontaktwege bleiben die Ziele) */ #top .gh-person { display: flex; flex-direction: column; overflow: hidden; background: #ffffff; box-shadow: var(--gh-schatten); transition: box-shadow 0.25s ease, transform 0.25s ease; } #top .gh-person:hover, #top .gh-person:focus-within { box-shadow: var(--gh-schatten-hover); transform: translateY(-4px); } #top .gh-person-foto { overflow: hidden; } #top .gh-person-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 22%; transition: transform 0.5s ease; } #top .gh-person:hover .gh-person-foto img { transform: scale(1.04); } /* Text füllt die Karte, die Kontaktzeile sitzt unten bündig – auch wenn die Funktion kürzer ist */ #top .gh-person-text { display: flex; flex: 1; flex-direction: column; padding: 20px 24px 24px; } #top .gh-person-text p { margin: 0; } /* Kontaktzeile unten bündig – stärker als die Regel davor (die hob margin-top: auto bisher auf, 12.10.2026) */ #top .gh-person-text .gh-person-kontakt { margin-top: auto; } #top .gh-person-name { color: var(--gh-dunkel); font-size: 18px; font-weight: 800; line-height: 1.3; } #top .gh-person-funktion { margin: 2px 0 16px; color: var(--gh-grau-text); font-size: 15px; line-height: 1.45; } /* Kontaktzeile: Telefon links, E-Mail-Icon rechts – getrennt durch eine feine Linie darüber */ #top .gh-person-kontakt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gh-linie); font-size: 15px; } #top .gh-person-kontakt a { display: inline-flex; align-items: center; gap: 8px; color: var(--gh-dunkel); text-decoration: none; } #top .gh-person-kontakt a svg { flex: none; color: var(--gh-primaer-dunkel); } #top .gh-person-mail { justify-content: center; width: 38px; height: 38px; background: var(--gh-hell); transition: background-color 0.2s ease; } #top .gh-person-kontakt a:hover { color: var(--gh-primaer-dunkel); } #top .gh-person-kontakt a.gh-person-mail:hover { background: var(--gh-primaer-dunkel); } #top .gh-person-kontakt a.gh-person-mail:hover svg { color: #ffffff; } /* * Mobil und Tablet: kompakte Karte mit Foto links (12.10.2026). Hochkant über die volle Breite füllte eine Person * fast den ganzen Bildschirm, und die Fotos der Altseite (nur 230px breit) waren auf 320–330px hochgezogen, also * unscharf. Am Desktop bleiben die Hochkant-Karten. */ @media only screen and (max-width: 989px) { #top .gh-person { flex-direction: row; } #top .gh-person-foto { flex: 0 0 clamp(88px, 30%, 112px); } #top .gh-person-foto img { height: 100%; aspect-ratio: auto; } #top .gh-person-text { min-width: 0; padding: 16px 14px 16px 16px; } #top .gh-person-name { font-size: 17px; } #top .gh-person-funktion { margin-bottom: 12px; font-size: 14px; } /* Nummer nie trennen – bei sehr schmalen Karten (320px) rutscht eher das E-Mail-Symbol in die nächste Zeile */ #top .gh-person-kontakt { flex-wrap: wrap; gap: 8px; padding-top: 10px; } #top .gh-person-tel { white-space: nowrap; } #top .gh-person-tel svg { display: none; } } /* Filterleiste der Ansprechpartner (js/custom.js) und Knopf „Karte laden“ – Parallelogramm wie die Buttons */ #top .gh-filter { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 28px; } #top .gh-filter[hidden], #top .gh-person[hidden] { display: none; } #top .gh-filter button, #top .gh-karte-laden { margin: 0; padding: 9px 18px; border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 2px var(--gh-primaer-dunkel); color: var(--gh-primaer-dunkel); font-size: 15px; font-weight: 600; line-height: 1.3; cursor: pointer; transform: skewX(-12deg); transition: background-color 0.2s ease, color 0.2s ease; } #top .gh-filter button > span, #top .gh-karte-laden > span { display: inline-block; transform: skewX(12deg); } #top .gh-filter button:hover, #top .gh-filter button[aria-pressed="true"], #top .gh-karte-laden { background: var(--gh-primaer-dunkel); color: #ffffff; } #top .gh-karte-laden:hover { background: var(--gh-dunkel); box-shadow: inset 0 0 0 2px var(--gh-dunkel); } #top .gh-filter button:focus-visible, #top .gh-karte-laden:focus-visible { outline: 2px solid var(--gh-dunkel); outline-offset: 4px; } /* Google-Maps-Karten (2-Klick, inc/karten.php): Platzhalter mit Adresse, nach Klick iframe */ #top .gh-karte { position: relative; display: flex; align-items: center; min-height: 320px; margin: 16px 0 8px; background: var(--gh-hell); } #top .gh-karte-kompakt { min-height: 260px; margin-top: 24px; } /* Auf grauen Flächen hebt sich die Karte weiß ab */ #top .gh-anfahrt .gh-karte { background: #ffffff; box-shadow: var(--gh-schatten); } #top .gh-kontakt-box .gh-karte { background: #ffffff; } #top .gh-karte-hinweis { padding: 28px; } #top .gh-karte-hinweis p { margin: 0 0 10px; } #top .gh-karte-titel { color: var(--gh-dunkel); font-size: 18px; font-weight: 700; } #top .gh-karte-laden { margin: 8px 0 16px 6px; } #top .gh-karte-info { color: var(--gh-grau-text); font-size: 14px; } #top .gh-karte.ist-geladen .gh-karte-hinweis { visibility: hidden; } #top .gh-karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* * Mobiles Menü: Enfold-Vollbild-Overlay (overlay_style = av-overlay-full, tools/enfold-ci.config.php) in CI – * Anthrazit mit leichter Transparenz, Menüpunkte Nunito Sans fett in Versalien, aktiv/Hover grün, * grüne „Felsschnitt“-Kante wie im Footer. Telefon als grüner Parallelogramm-Button. */ /* Transparenz über die Hintergrundfarbe statt opacity – sonst würde auch die Unschärfe abgeschwächt */ .html_av-overlay-full .av-burger-overlay-bg { opacity: 1; background: rgba(31, 31, 31, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .html_av-overlay-full .av-burger-overlay-bg::after { content: ""; position: absolute; left: var(--gh-schnitt); bottom: 48px; width: clamp(120px, 40%, 320px); height: 10px; background: var(--gh-primaer); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li { font-size: 28px; line-height: 1.5em; } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul > li > a { font-family: var(--gh-font-titel); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li li a { color: #d9d9d9; font-family: var(--gh-font-text); font-weight: 400; letter-spacing: 0; text-transform: none; } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a:hover, .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a:focus, .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.current-menu-item > a, .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.current-menu-ancestor > a { opacity: 1; color: var(--gh-primaer); } /* Telefon-Eintrag (aus dem Hauptmenü geklont) als Button */ .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.gh-nav-tel { margin-top: 24px; font-size: 20px; } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.gh-nav-tel > a .avia-menu-text { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--gh-primaer-dunkel); color: #ffffff; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.gh-nav-tel .gh-nav-tel-nr { position: static; width: auto; height: auto; overflow: visible; clip: auto; } /* Nur für Screenreader (WordPress-Standardklasse, Enfold bringt sie nicht mit) */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Platzhalter im Entwurf – vor Go-live entfernen */ .gh-todo { outline: 2px dashed #f2b01e; outline-offset: 3px; } @media only screen and (max-width: 989px) { :root { --gh-ueberlappung: 72px; } #top #header .av-main-nav > li > a { padding: 0 10px; font-size: 13px; } #top .gh-hero-fakten { padding: 32px 24px 32px 40px; } /* Kicker: Strich über dem Text statt davor (wie die Marke über H2) – sonst rutscht „1974“ allein in Zeile 2 */ #top .gh-hero-kicker p { flex-direction: column; align-items: flex-start; gap: 10px; text-wrap: balance; } /* in Spaltenrichtung wäre flex-basis 100 % eine Höhe */ #top .gh-hero-kicker p strong { flex-basis: auto; margin-bottom: 0; } #top .gh-kennzahlen:not(.gh-kennzahlen-hell) strong { font-size: 48px; } #top .gh-ablauf-schritte { grid-template-columns: repeat(2, 1fr); } /* Burger-Menü ab 989px (Enfold header_mobile_activation = mobile_menu_tablet): Telefon-Button sichtbar lassen */ .html_mobile_menu_tablet.responsive #top #header .av-main-nav > li.gh-nav-tel { display: block; } #top .gh-cta-kontakt a { font-size: 1.15em; overflow-wrap: anywhere; } } /* Kleine Desktops (990–1199px): Desktop-Navigation passt sonst nicht neben den Logo-Reiter und läuft darunter */ @media only screen and (min-width: 990px) and (max-width: 1199px) { #top #header .logo { padding: 0 26px 0 20px; } #top #header .logo img { max-height: 36px; } #top #header .av-main-nav > li > a { padding: 0 9px; font-size: 13px; letter-spacing: 0.03em; } #top #header .av-main-nav > li.gh-nav-tel > a { padding-left: 10px; } #top #header .av-main-nav > li.gh-nav-tel > a .avia-menu-text { padding: 12px 16px; } } /* Tablet und kleine Desktops: Leistungskacheln 2 × 2 statt 4 schmaler Spalten (Enfold-Tabelle für gleich hohe Spalten aufgelöst) */ @media only screen and (min-width: 768px) and (max-width: 1199px) { #top .gh-leistungen .flex_column_table { display: flex; flex-wrap: wrap; gap: 24px; } #top .gh-leistungen .flex_column_table > .flex_column { display: flex; flex-direction: column; float: none; width: calc(50% - 12px); margin: 0; } #top .gh-leistungen .av-flex-placeholder { display: none; } /* * Referenzlisten (/projekte/, 4 Spalten): Bei 768–1024px überlagerten sich die Überschriften der Tabellenzellen * („Baugrubensicherungen“ ragte in „Steinschlagschutz“). Hier 2 × 2 wie die Leistungskacheln (12.10.2026). */ #top .flex_column_table:has(> .gh-referenzliste) { display: flex; flex-wrap: wrap; gap: 8px 48px; } #top .flex_column_table > .flex_column.gh-referenzliste { display: block; float: none; width: calc(50% - 24px); margin: 16px 0 0; } #top .flex_column_table:has(> .gh-referenzliste) > .av-flex-placeholder { display: none; } } /* * Tablet hochkant (768–989px, Responsive-Prüfung 12.10.2026): Enfold behält hier die Desktop-Spalten. Drittel-, * Zweidrittel- und Fünftelspalten wurden zu schmal (≈ 200px): E-Mail „office@greiffenhagen.a / t“ im CTA-Band, * abgeschnittene Kennzahlen, „TÄTIG-KEITSGE-BIET“, Faktenbox mit einem Wort je Zeile. Sie stehen jetzt wie mobil * untereinander. Halbe Spalten bleiben nebeneinander, außer neben einem Bild (das Bild war ein flacher Streifen in * einer hohen Spalte). Leistungskacheln und Referenzlisten haben eigene 2 × 2-Raster. * Enfold-Bezug: gleiche Spezifität wie Enfolds eigene Regel für mobil (grid.css: .responsive #top #wrap_all .flex_column). */ @media only screen and (min-width: 768px) and (max-width: 989px) { .responsive #top #wrap_all .flex_column:is(.av_one_third, .av_two_third, .av_one_fifth, .av_two_fifth, .av_three_fifth, .av_four_fifth, .av_three_fourth):not(.gh-hero-intro, .gh-hero-fakten, .gh-footer-spalte, .grid-entry), .responsive #top #wrap_all .flex_column.av_one_fourth:not(.gh-kachel, .gh-referenzliste, .grid-entry), .responsive #top #wrap_all .flex_column.av_one_half:not(.grid-entry):has(.avia-image-container), .responsive #top #wrap_all .flex_column.av_one_half:not(.grid-entry):has(+ .av_one_half .avia-image-container), .responsive #top #wrap_all .flex_column.av_one_half:not(.grid-entry):has(.avia-image-container) + .av_one_half { display: block; float: none; clear: both; width: 100%; margin-left: 0; margin-bottom: 20px; } /* * Gestapelt und mit Überschrift (oder Kennzahlen) am Anfang: Abstand wie mobil. Hier ohne float – die Ränder fallen * zusammen, deshalb 48px statt 20 + 28px. */ .responsive #top #wrap_all .flex_column + .flex_column:is(.av_one_third, .av_two_third, .av_two_fifth, .av_three_fifth):not(.gh-footer-spalte, .gh-hero-fakten):is(:has(> .av-special-heading:first-child), :has(> .av_textblock_section:first-child > .avia_textblock > :is(h2, h3):first-child), :has(.gh-kennzahlen)) { margin-top: 48px; } /* Referenzliste 2 × 2: Abstand zum Folgenden (der Platzhalter klebte an der letzten Liste) */ #top .flex_column_table:has(> .gh-referenzliste) { margin-bottom: var(--gh-abstand-titel); } /* Spalten gleicher Höhe (Tabelle) mit Bild ebenfalls auflösen */ #top .flex_column_table:has(> .av_one_half .avia-image-container) { display: block; } #top .flex_column_table:has(> .av_one_half .avia-image-container) > .av-flex-placeholder { display: none; } /* Projekt-Raster zweispaltig statt drei Karten à 200px (eine Karte stand allein, Titel liefen über) */ .responsive #top #wrap_all .grid-sort-container .grid-entry.av_one_third { width: 50%; } /* Footer: Firmenspalte über die volle Breite, Leistungen und Unternehmen darunter nebeneinander */ .responsive #top #wrap_all .gh-footer-spalte.first { float: none; width: 100%; margin: 0 0 32px; } .responsive #top #wrap_all .gh-footer-spalte:not(.first) { float: left; clear: none; width: 47%; margin: 0; } .responsive #top #wrap_all .gh-footer-spalte:not(.first) + .gh-footer-spalte { margin-left: 6%; } .responsive #top #wrap_all .gh-footer-holding { clear: both; } /* Stelleninserate (zwei Karten nebeneinander): Titel wie mobil, sonst „FACHAR-BEITER“, „SPRENGMEIS-TER“ */ #top .gh-stelle .avia_textblock h2 { font-size: 22px; } /* Hero: Kennzahlen-Box über die volle Breite – die drei Kennzahlen nebeneinander statt untereinander (.responsive: schlägt die Hero-Regeln unten) */ .responsive #top .gh-hero-fakten .gh-kennzahlen:not(.gh-kennzahlen-hell) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } .responsive #top .gh-hero-fakten .gh-kennzahlen:not(.gh-kennzahlen-hell) li { padding: 0; border-bottom: 0; } /* Zahl schrumpft mit der Spalte (768px: Spalte 184px, „~200.000 lfm“ in 40px genau 184px) */ .responsive #top .gh-hero-fakten .gh-kennzahlen:not(.gh-kennzahlen-hell) strong { font-size: min(40px, 6cqi); } } /* Mobil und Tablet hochkant (bis 989px) – Responsive-Prüfung 12.10.2026 */ @media only screen and (max-width: 989px) { /* * Footer: Mobil ist er rund 1500px hoch, auf dem Tablet (Spalten untereinander) gut 900px – die Schrägen links und * rechts wirkten dort wie eine Fläche, die nach unten zusammenläuft (Team). Gerade Kanten, nur oben links eine * abgeschrägte Ecke („Felsschnitt“). */ #top #footer-page::before { clip-path: polygon(var(--gh-footer-schnitt) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gh-footer-schnitt)); } /* * Enfold-Abstände von 50px (grid.css: Reihe gleich hoher Spalten nach anderem Inhalt; heading.css: jede * Überschrift) kamen zu unseren Abständen dazu – Überschrift → Leistungskacheln bzw. Referenzliste 74–108px, * Piktogramm → Titel in der Kachel 74px. Hier gilt nur das Abstandssystem (--gh-abstand-titel). */ #top .av-special-heading + .flex_column_table.av-equal-height-column-flextable { margin-top: 0; } #top .gh-kachel .av-special-heading { margin-top: 0; } #top .gh-kachel-icon p { margin-bottom: 20px; } #top .gh-kachel { padding-top: 32px; } #top .gh-icon svg { width: 60px; height: 60px; } /* * Abschnitte mit Innenabstand „large“: Enfold setzt auf allen Breiten 70px oben und unten (shortcodes.css) – zwischen * zwei weißen Abschnitten standen 140–160px Leerraum (z. B. Faktenbox → „Projekt im Video“). */ #top .avia-section-large .content { padding-top: 48px; padding-bottom: 48px; } /* Grünes CTA-Band gestapelt: Kontaktwege rücken an den Text, unten kein zusätzlicher Spaltenabstand */ #top .gh-cta .flex_column > .av-special-heading:last-child { margin-bottom: 0; } .responsive #top #wrap_all .gh-cta .flex_column + .flex_column { margin-bottom: 0; } /* Breadcrumb: Label „Navigation:“ nur für Screenreader – neben dem Logo-Reiter blieb sonst kaum Platz */ #top .breadcrumb-trail .trail-before { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* * Hero bis 989px in der mobilen Anordnung (seit 12.10.2026 auch Tablet hochkant): Bei 768px stand der Text in einer * 380px schmalen Spalte (H1 über fünf Zeilen, getrennt), unter der Kennzahlen-Box blieb eine große Leerfläche. */ @media only screen and (max-width: 989px) { #top .gh-hero-text .container { padding-top: 32px; padding-bottom: 48px; } /* * Hero mobil (Team 05.10.2026): Reihenfolge Kicker → H1 → Kennzahlen → Einleitung → Buttons. Textspalte und * Überschriften-Element lösen sich per display: contents auf, ihre Teile werden in der Zeile neu sortiert – im ALB * bleibt alles unverändert (Desktop: Text links, Kennzahlen rechts). */ #top .gh-hero-text .entry-content-wrapper { display: flex; flex-direction: column; } #top .gh-hero-text .gh-hero-intro, #top .gh-hero-text .gh-hero-h1 { display: contents; } #top .gh-hero-intro > .av_textblock_section { order: 1; } #top .gh-hero-h1 > .av-special-heading-tag { order: 2; } #top .gh-hero-h1 > .special-heading-border { display: none; } /* Enfold setzt mobil .responsive #top #wrap_all .flex_column { margin: 0 } – daher der lange Selektor */ .responsive #top #wrap_all .gh-hero-fakten { order: 3; margin-top: 28px; margin-bottom: 0; padding: 20px 20px 20px 16px; } #top .gh-hero-h1 > .av-subheading { order: 4; margin-top: 24px; } #top .gh-hero-intro > .gh-hero-buttons { order: 5; } /* * Kennzahlen kompakt: kleinere Zahlen, Beschriftung darunter wie am Desktop (Team, 29.10.2026). Bis dahin stand sie * rechts neben der Zahl – bei sechsstelligen Zahlen blieben ihr bei 390px nur 90px. */ #top .gh-hero-fakten .gh-kennzahlen:not(.gh-kennzahlen-hell) li { padding: 12px 0; } #top .gh-hero-fakten .gh-kennzahlen:not(.gh-kennzahlen-hell) li:first-child { padding-top: 0; } #top .gh-hero-fakten .gh-kennzahlen:not(.gh-kennzahlen-hell) li:last-child { padding-bottom: 0; } /* „~200.000 lfm“ in 40px ist 184px breit – schmaler wird die Box erst unter 320px */ #top .gh-hero-fakten .gh-kennzahlen:not(.gh-kennzahlen-hell) strong { font-size: min(40px, 15cqi); } #top .gh-hero-fakten .gh-kennzahlen:not(.gh-kennzahlen-hell) span { margin-top: 8px; font-size: 12px; letter-spacing: 0.06em; } /* ohne Schräge links und ohne Verlängerung bis zum Fensterrand (sonst ragte die Box bei 768px rechts hinaus) */ #top .gh-hero-fakten::before, #top .gh-hero-fakten::after { display: none; } /* Spalten stehen untereinander: nichts ragt ins Bild */ #top .gh-hero-intro { margin-top: 0; padding-top: 0; } #top .gh-hero-intro::before, #top .gh-hero-intro::after { display: none; } #top .gh-hero-slider .avia-slideshow-dots { bottom: 14px; } /* Enfold gibt der 2/5-Spalte ab 768px ihre Desktop-Breite – hier volle Breite wie mobil */ .responsive #top #wrap_all .gh-hero-fakten { float: none; width: 100%; margin-left: 0; } } @media only screen and (max-width: 767px) { :root { --gh-hero-hoehe: min(58vw, 340px); /* Hero mobil niedriger (Team 05.10.2026), statt mindestens 300px */ --gh-rand: 12px; --gh-schnitt: 22px; --gh-abstand-titel: 24px; --gh-karte-luecke: 20px; --gh-karte-pad: 24px; --gh-footer-schnitt: 16px; --gh-socket-hoehe: 210px; } #top .gh-footer .container { padding-top: 48px; } #top .gh-footer-spalte + .gh-footer-spalte { margin-top: 16px; } #top .gh-footer-holding { margin-top: 24px; } /* Footer-Leiste mobil untereinander und linksbündig: Social-Buttons, darunter Holding-Text und Logo */ #top .gh-footer-leiste, #top .gh-footer-leiste .gh-holding { flex-direction: column; align-items: flex-start; } #top .gh-footer-leiste .gh-holding { gap: 14px; margin-left: 0; } #top .gh-footer .gh-footer-leiste p.gh-holding-text { white-space: normal; text-align: left; text-wrap: balance; } /* Enfold-Container mobil ohne Innenabstand – Linie über die volle Breite; Enfold richtet den Socket mobil links aus */ #top #socket .container { background-size: 100% 1px; } #top #socket .copyright, #top #socket .sub_menu_socket, #top #socket .menu { width: 100%; text-align: center; } #top .gh-footer::before { height: 8px; } /* * Enfold stellt das Logo mobil auf position:static / height:80px !important (layout.css). Der Reiter beginnt am linken * Rand (Team 05.10.2026): Enfolds Container ist mobil 85 % breit, also 7,5vw zurück – das Logo selbst bleibt mit * gleich viel Innenabstand auf der Textkante. */ .responsive #top #header .logo { width: auto; max-width: calc(100% - 130px + 7.5vw); margin-left: -7.5vw; padding: 0 26px 0 7.5vw; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); } .responsive #top #header .logo img { max-height: 34px; } /* Telefon mobil als runder Icon-Button neben dem Burger (Enfold: .responsive #top .av-main-nav .menu-item → none) */ .responsive #top #header .av-main-nav > li.gh-nav-tel { display: block; } #top .gh-hero-kicker p { font-size: 13px; letter-spacing: 0.08em; } #top .gh-hero-kicker p strong { font-size: 32px; } .responsive #top #header .av-main-nav > li.gh-nav-tel > a .avia-menu-text { padding: 12px; clip-path: none; border-radius: 50%; } .responsive #top #header .gh-nav-tel-nr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #top .gh-kachel { margin-bottom: 20px; } /* * Rangfolge der Überschriften mobil (12.10.2026): H2/H3 in Textblöcken hatten Enfolds feste 28px/20px und waren * größer als die H1 (24–26px) und die Abschnittsüberschriften (22–26px). */ #top .avia_textblock h2 { font-size: 22px; } #top .avia_textblock h3 { font-size: 18px; } /* * Gestapelte Spalten: Beginnt die nächste Spalte mit einer Überschrift, Abstand wie zwischen Abschnitten – mit * Enfolds 20px klebte z. B. „Tätigkeitsgebiet“ an der letzten Ansprechpartner-Karte. Footer hat eigene Abstände. */ .responsive #top #wrap_all .flex_column + .flex_column:not(.gh-footer-spalte, .gh-hero-fakten):is(:has(> .av-special-heading:first-child), :has(> .av_textblock_section:first-child > .avia_textblock > :is(h2, h3):first-child), :has(.gh-kennzahlen)) { margin-top: 28px; } /* Abschnittsüberschriften kleiner als die H1 (Enfold verkleinert sie mobil nur auf 80 % = 25,6px, die H1 hat 24–26px) */ .responsive #top #wrap_all .avia-section:not(.gh-footer) .av-special-heading > h2.av-special-heading-tag { font-size: 22px; } .responsive #top #wrap_all .avia-section.gh-cta .av-special-heading > h2.av-special-heading-tag { font-size: 24px; } /* Beschriftungen der Standorte (klein, Versalien) – sonst greift oben die Textblock-H3-Größe */ #top .gh-standort h3, #top .gh-kontakt-box h3 { font-size: 14px; } /* Faktenliste einspaltig: Wert direkt unter der Beschriftung */ #top .gh-fakten dd { padding-top: 2px; } /* Projektkarten einspaltig: keine Mindesthöhe für drei Titelzeilen (sonst unterschiedlich viel Leerraum) */ #top .grid-entry .grid-entry-title { min-height: 0; } /* Hero-Buttons untereinander gleich breit statt ausgefranster rechter Kante */ #top .gh-hero-buttons .avia-button { min-width: 236px; } #top .gh-fakten { grid-template-columns: 1fr; } #top .gh-fakten dt { padding-bottom: 0; border-bottom: 0; } #top .gh-cta-kontakt a { font-size: 1.25em; } /* Anfrageformular einspaltig (Ninja Forms bricht .one-half selbst nicht um) */ #top .gh-anfrage .nf-form-cont .one-half { float: none; width: 100%; margin-left: 0; } #top .gh-ablauf-schritte { grid-template-columns: 1fr; } #top .gh-zeitleiste { grid-template-columns: 1fr; gap: 40px; } #top .gh-leistung-box, #top .gh-stelle { margin-top: 24px; } } /* * Handy quer (z. B. 844 × 390): Header und Hero-Video füllten den ganzen Bildschirm, die Überschrift lag darunter. * Video bei niedrigen Querformaten auf gut die halbe Fensterhöhe begrenzen (12.10.2026). */ @media only screen and (orientation: landscape) and (max-height: 500px) { :root { --gh-hero-hoehe: 52vh; } }