/* ============================================================ Gemeinsame Responsive-Basis für alle 1:1-Mockup-Ports. Wird ZUSÄTZLICH zur Seiten-CSS geladen (danach), site-weit. Mockups sind fix 1440 px designt → hier: kein Horizontal-Overflow, fluide Medien, mobiler Nav-Hamburger (CSS-only, ohne JS). Seiten-spezifisches Sektions-Stacking steht in der jeweiligen .css. ============================================================ */ /* Kein horizontaler Overflow aus fixbreiten Sektionen */ html, body { overflow-x: hidden; max-width: 100%; } img, video, iframe { max-width: 100%; } /* Sanftes Scrollen bei Anker-Sprüngen (z. B. #stellen, #azubi, #blitzbewerbung). Bei prefers-reduced-motion greift der Reset weiter unten (scroll-behavior:auto). */ html { scroll-behavior: smooth; } section[id] { scroll-margin-top: 24px; } /* Volle Seitenbreite statt fixem 1440-Canvas (Jakob 14.07.): die Mockups setzen body{width:1440px;margin:0 auto} → hier aufgehoben. */ body { width: 100%; } /* Logo ohne weiße Pill, größer gezogen (Jakob 15.07.) — site-weit, überschreibt die 40px der Seiten-CSS. Werte pixelgenau aus Referenz 0_Components.png (Logo-PNG hat viel transparenten Rand → höhere px-Werte für gleiche sichtbare Größe). Footer-Logo-Höhe (72px) steckt im Mockup-Body-Inline-Style des . */ .nav-logo img { height: 85px; transition: height .3s ease; } /* ── Sticky-Header (Jakob 15.07.): oben fixiert, schrumpft beim Scrollen ── Über dem Hero transparent wie gehabt. Ab body.bury-scrolled (gesetzt von assets/js/sticky-header.js) kompakt: weißer Grund, Schatten, kleineres Logo, dunkler Menütext. prefers-reduced-motion entschärft die Transitions weiter unten. */ .nav { position: fixed; transition: padding .3s ease, background .3s ease, box-shadow .3s ease; } .nav-links a, .nav-cta, .bury-burger, .bury-burger span { transition: color .3s ease, background .3s ease, border-color .3s ease; } body.bury-scrolled .nav { background: rgba(255,255,255,0.95); box-shadow: 0 6px 24px rgba(20,19,17,0.10); padding-top: 12px; padding-bottom: 12px; } /* Header-Glaseffekt (Blur) nur auf Desktop. Mobil KEIN backdrop-filter auf der .nav — sonst wird sie zum containing block/Problemfall (mit-Auslöser des Burger-Bugs). */ @media (min-width: 901px) { body.bury-scrolled .nav { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } body.bury-scrolled .nav-logo img { height: 52px; } /* Menü-Pille dezent auf Weiß, Text dunkel — NUR Desktop. Mobil ist .nav-links das dunkle Dropdown-Panel (Overlay) und bleibt dunkel, damit das Menü konsistent bleibt. */ @media (min-width: 901px) { body.bury-scrolled .nav-links { background: rgba(20,19,17,0.05); border-color: rgba(20,19,17,0.08); } body.bury-scrolled .nav-links a { color: var(--warm-600); } body.bury-scrolled .nav-links a:hover, body.bury-scrolled .nav-links a.active { color: var(--warm-900); } } /* CTA hebt sich ab (anthrazit): Desktop auf weißem Header, mobil auf hellem Content — Hover orange */ body.bury-scrolled .nav-cta { background: var(--warm-900); color: #fff; } body.bury-scrolled .nav-cta:hover { background: var(--orange); color: #fff; } /* mobiler Burger auf weißem Grund sichtbar */ body.bury-scrolled .bury-burger { background: rgba(20,19,17,0.06); border-color: rgba(20,19,17,0.12); } body.bury-scrolled .bury-burger span { background: #1A1917; } /* Hamburger-Steuerung: auf Desktop unsichtbar */ .bury-navtoggle, .bury-burger { display: none; } /* ── Desktop-Header wie Figma: volle Breite, Logo links · Pille mittig · CTA rechts ── Der Mockup-Header ist position:absolute mit max-width:1440 an Viewport-links → bei breiteren Screens links versetzt. Hier: volle Breite + 3-Spalten-Grid, Pille echt zentriert, etwas mehr Abstand nach oben. Hero-Bild randlos. */ @media (min-width: 901px) { .nav { max-width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; padding-top: 38px; } .nav > .nav-logo { justify-self: start; } .nav > .nav-links { justify-self: center; } .nav > .nav-cta { justify-self: end; } /* Hero-Bild über die volle Breite (randlos) */ .hero, .page-hero { padding-left: 0; padding-right: 0; } } /* ── Tablet/Mobil: Nav wird Hamburger-Panel ── */ @media (max-width: 900px) { .nav { flex-wrap: wrap; gap: 12px; padding-left: 20px; padding-right: 20px; } .bury-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 12px; cursor: pointer; order: 3; margin-left: auto; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; /* Burger/Schließen ganz nach vorn: über Backdrop (0), Logo/Panel/CTA (1). */ position: relative; z-index: 5; } /* Nav-Inhalt explizit über den Backdrop (Safari-Fix, s. .nav::after z-index). */ .nav-logo, .nav-links, .nav-cta { position: relative; z-index: 1; } .bury-burger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; } /* CTA nicht im geschlossenen Header (Jakob 15.07.): erst im geöffneten Burger-Menü, als vollbreiter Button UNTER den Menüpunkten. */ .nav-cta { order: 6; width: 100%; display: none; justify-content: center; margin-top: 8px; } .bury-navtoggle:checked ~ .nav-cta { display: inline-flex; } /* Menü-Panel im Fluss der (absolut positionierten) Nav → Panel + CTA stapeln sauber untereinander und überlagern als Overlay den Hero. Card-Optik bleibt. */ .nav-links { display: none; order: 5; width: 100%; margin-top: 8px; flex-direction: column; align-items: stretch; gap: 4px; background: rgba(20,19,17,0.99); padding: 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 24px 60px rgba(0,0,0,0.45); white-space: normal; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 12px 16px; border-radius: 12px; font-size: 16px; color: rgba(255,255,255,0.85); } .nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,0.08); color: #fff; } .bury-navtoggle:checked ~ .nav-links { display: flex; } .bury-navtoggle:checked ~ .bury-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .bury-navtoggle:checked ~ .bury-burger span:nth-child(2) { opacity: 0; } .bury-navtoggle:checked ~ .bury-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Backdrop hinter dem offenen Menü (Jakob 16.07., entkoppelt 17.07.) ── Vorher stand das Panel direkt auf dem Hero — der schimmerte durch und machte das Menü unruhig/schwer erkennbar. Jetzt legt sich die Seite abgedunkelt und weichgezeichnet dahinter (der eigentliche Backdrop steht weiter unten als .nav::after). Der Hamburger läuft ohne JS (Checkbox-Hack). */ /* WICHTIG: Der Blur der Desktop-Glaspille (backdrop-filter in der Seiten-CSS, dort ohne Media Query) muss auf dem Panel mobil weg — ein Element mit backdrop-filter wird zum "containing block" für position:fixed-Nachfahren, und das Panel gleitet jetzt (transform). Ohne diese Zeile bliebe der Blur der Glaspille aktiv und könnte das Gleiten zum containing block machen. */ .nav-links { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Dieselbe Falle, zweite Stelle (Jakob 17.07.): der Sticky-Header setzt ab body.bury-scrolled ein backdrop-filter auf .nav — damit wurde .nav beim Scrollen zum containing block und der Backdrop klappte auf Headergröße zusammen. Mobil ist der kompakte Header rgba(255,255,255,0.95), also praktisch deckend; der Blur dahinter war ohnehin nicht zu sehen. */ body.bury-scrolled .nav { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Seiten-Scroll sperren, solange das Menü offen ist. Sonst schob sich die Seite unter dem Overlay weg und der Header sprang beim Umschalten auf body.bury-scrolled in die kompakte Form (Panel rutschte ~55px hoch). Angriffspunkt ist html, nicht body: html hat oben schon overflow-x:hidden, und sobald html nicht mehr `visible` ist, scrollt der Viewport nach html — body würde gar nicht mehr durchgereicht. */ html:has(.bury-navtoggle:checked) { overflow: hidden; } /* Gegenstück zur Sperre: im Querformat (Viewport-Höhe ~390px) ist das Panel samt CTA höher als der Bildschirm. Ohne Seiten-Scroll wären die unteren Menüpunkte sonst unerreichbar → der Header scrollt intern. Der Backdrop bleibt davon unberührt: position:fixed wird vom overflow eines Vorfahren nicht beschnitten, solange der kein containing block ist. */ .nav:has(.bury-navtoggle:checked) { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; } /* ── Menü-Backdrop als EIGENES div (.bury-nav-backdrop, in chrome.php nach der .nav) ── Historie des Burger-Bugs: erst .nav::after (Kind der .nav) — auf iOS Safari rutschte dieser fixed-Backdrop beim Scrollen über die Geschwister (Burger/X). Dann body::after — aber ein body-Pseudo reagierte weder auf :has(:checked) noch zuverlässig auf opacity. Jetzt ein echtes Element: liegt mit z-index:90 sauber UNTER der .nav (z-index:100) → Burger/Panel/CTA immer davor, auf jedem Browser; und ein echtes div schaltet zuverlässig über die JS-Klasse body.bury-nav-open (gesetzt in sticky-header.js). */ .bury-nav-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(20, 19, 17, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .18s ease; } body.bury-nav-open .bury-nav-backdrop { opacity: 1; pointer-events: auto; } /* Bei OFFENEM Menü den Header transparent halten (nicht den weißen Scroll-Header): sonst steht gescrollt ein weißer Streifen über dem abgedunkelten Overlay. Burger hell, wie ganz oben. Überschreibt body.bury-scrolled (steht danach → gewinnt). */ body.bury-nav-open .nav { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.bury-nav-open .bury-burger { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); } body.bury-nav-open .bury-burger span { background: #fff; } /* Panel gleitet + blendet ein. Transform ist JETZT erlaubt, weil der Backdrop kein Kind mehr ist (sonst würde er wieder zum containing block, 16.07.). */ .bury-navtoggle:checked ~ .nav-links { animation: bury-panel-in .3s cubic-bezier(.16, .84, .44, 1); } } @keyframes bury-panel-in { from { opacity: 0; transform: translateY(-12px) scale(.985); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .nav-logo img { height: 62px; } } /* ============================================================ MOBIL-BASIS — gilt site-weit für ALLE Seiten (Jakob 16.07.). Diese Datei wird NACH der Seiten-CSS geladen und kann deren :root-Tokens überschreiben. Neue Seiten erben das automatisch; seitenspezifische Grids gehören weiterhin in die Seiten-CSS. Zielgeräte: ab 390px (iPhone 14/15). Breakpoints projektweit einheitlich 900px (Tablet) und 640px (Handy). ============================================================ */ /* Seitenrand als Token — jede Sektion, die var(--pad) nutzt, wird damit mobil schmaler. Ein Hebel statt Dutzender Einzelregeln. (Genutzt in allen 8 Seiten-CSS, 3–9 Stellen je Datei.) */ @media (max-width: 900px) { :root { --pad: 24px; } } @media (max-width: 640px) { :root { --pad: 16px; } } @media (max-width: 900px) { /* Nichts darf breiter sein als der Bildschirm — Bilder/Medien/Tabellen. */ img, video, svg, iframe, table { max-width: 100%; } /* Umbruch NUR im Fließtext. Überschriften dürfen NICHT mitten im Wort brechen (ergab „ACHT GEWERK / E." und „WÄRMEPUMP / E"). hyphens:manual statt auto — „auto" trennte „Acht Ge-/werke.", weil der Browser die Zeile lieber füllt, obwohl „Gewerke." komplett in die nächste passt. „manual" nutzt nur die im Text gesetzten ­ (z. B. in „Qualitäts­versprechen"); den Rest regelt die Schriftgröße. */ p, li { overflow-wrap: break-word; } h1, h2, h3, h4 { overflow-wrap: normal; hyphens: manual; } /* Der Header ist fixiert und mobil ~118px hoch (großes Logo + Burger). Die Hero-Inhalte liegen absolut am unteren Rand — ohne Mindesthöhe rutschen sie hinter den Header. Gibt zugleich den gewünschten Abstand nach oben (Jakob 16.07.). Gilt für alle Seiten mit .page-hero. */ .page-hero { min-height: 560px; } /* ── Hero-Titel: groß für die Hierarchie, lange Wörter dürfen umbrechen (Jakob 17.07., Kurskorrektur) ── Zuerst war die Schrift so klein gewählt, dass das breiteste Wort auf eine Zeile passt ("KUNDENDIENST", ~1,15em je Zeichen in Syne-Versalien). Das ließ die H1 zu klein wirken und die Hierarchie kippte. Jetzt umgekehrt: die H1 bleibt groß, und ein Wort, das nicht passt, bricht um — statt stumm von html{overflow-x:hidden} gekappt zu werden. Betrifft real nur die 2–3 längsten Titel auf schmalen Screens. hyphens:auto bricht deutsche Komposita an Silbengrenzen MIT Trennstrich ("KUNDEN-/DIENST", "PHOTO-/VOLTAIK") — greift, weil gesetzt ist. Reines overflow-wrap:break-word trennte an beliebiger Stelle ("KUNDENDIE/NST") und bleibt nur Fallback für Wörter ohne Trennstelle. Beides überschreibt gezielt das globale h1{overflow-wrap:normal; hyphens:manual} und gilt (media-übergreifend) auch im 640er-Band unten mit. hyphenate-limit-chars: mind. 3 Zeichen vor dem Trennstrich. Das verbietet den hässlichen Kurz-Umbruch "ACHT GE-/WERKE." (die gierige Zeilenfüllung hängte sonst "GE-" noch an Zeile 1) → "Gewerke" bricht gar nicht und weicht auf den Leerzeichen-Umbruch "ACHT / GEWERKE." aus, während "Kunden-dienst" (6 Zeichen davor) erlaubt bleibt. Prüfbar über scrollWidth > clientWidth (mobil-check.js). */ .page-hero-title { font-size: clamp(34px, 7.4vw, 66px); hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; overflow-wrap: break-word; } /* Footer ist auf allen 15 Seiten identisch aufgebaut → hier zentral, statt in jeder Seiten-CSS. Die Werte entsprechen denen, die gewerk.css schon hatte; leistungen.css fehlten sie komplett (Innenabstand blieb dort mobil bei 80px, gap bei 60px → sichtbar zu viel Luft, Jakob 16.07.). */ .footer { padding: 64px 40px 32px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 56px; } .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; } } @media (max-width: 640px) { .page-hero { min-height: 520px; } /* Engeres Band: hier ist der Innenabstand 24px je Seite statt 40px, frisst also anteilig mehr Breite → etwas kleinerer Faktor als oben. overflow-wrap:break-word erbt aus der 900er-Regel (beide Media Queries greifen bei ≤640 gleichzeitig). */ .page-hero-title { font-size: clamp(30px, 8.2vw, 46px); } .footer { padding: 48px 26px 28px; } .footer-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 44px; } .footer-bottom { gap: 12px; } /* Touch-Targets vergrößern, ohne den Footer auseinanderzuziehen: Padding statt min-height:44px — das ergab 44px hohe Zeilen und damit sichtbar zu viel Luft (Jakob 16.07.). ~34px erfüllt WCAG 2.5.8 (AA, 24px); die 44px aus 2.5.5 sind AAA. */ .ft-links a, .footer-bottom-links a { display: inline-flex; align-items: center; padding-block: 7px; } .ft-links { gap: 2px; } } /* Sichtbarer Fokus (BFSG/WCAG 2.4.7) — Seiten-CSS ersetzt den globalen style.css-Fokus */ :where(a, button, input, select, textarea, summary, label, [tabindex]):focus-visible { outline: 2px solid #E67508; outline-offset: 2px; border-radius: 3px; } /* Reduzierte Bewegung respektieren */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }