/* ────────────────────────────────────────────────────────── KOS KLIMA — Globales Float-Nav (auf allen Seiten identisch) Wird via in jeder Subpage geladen, damit CSS vor dem Body bereit ist (kein FOUC). ────────────────────────────────────────────────────────── */ /* Edge-to-Edge auf allen Pages: Hero/erstes Element startet am Viewport-Top, Float-Nav schwebt drüber (2026-05-28) */ body { padding-top: 0; background: #fff; } .nav-fade-mask { display: none !important; } /* Header-Text über Ansprechpartner-Hero (global, 2026-05-29) */ .kontakt-header { max-width: 760px; margin: 0 0 clamp(36px, 4vw, 56px); } .kontakt-header h2 { font-family: var(--font-headline); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; color: var(--blue-dark, #375374); font-size: clamp(32px, 4vw, 60px); line-height: 1.05; margin: 0 0 18px; } .kontakt-header p { font-size: clamp(15px, 1.15vw, 18px); color: var(--text, #555); line-height: 1.6; margin: 0 0 24px; max-width: 56ch; } .kontakt-header-cta { align-self: flex-start; display: inline-flex; } /* Globale Entfernung ALLER Caps-Eyebrows (2026-05-28, User-Wunsch — überall, keine einzige) */ .eyebrow, .section-eyebrow, .hero-eyebrow, .jasmin-eyebrow, .jasmin-hero-eyebrow, .award-eyebrow, .bw-modal-eyebrow, .data-eyebrow, .divider-eyebrow, .job-modal-eyebrow, .notfall-eyebrow, .stoerungs-eyebrow, .stoerungs-modal-head .stoerungs-eyebrow, .timeline-eyebrow, [class*="-eyebrow"] { display: none !important; } /* Sanfter Fade ins Weiße zwischen Padding und Content (8-Stop, ease-out-Kurve) */ .nav-fade-mask { position: fixed; top: 0; left: 0; right: 0; height: 160px; z-index: 49; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 15%, rgba(255,255,255,0.92) 30%, rgba(255,255,255,0.78) 45%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0.30) 75%, rgba(255,255,255,0.12) 88%, rgba(255,255,255,0) 100%); pointer-events: none; } @media (max-width: 720px) { .nav-fade-mask { height: 120px; } } .float-nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: min(var(--container, 1640px), calc(100vw - 40px)); z-index: 50; display: flex; flex-direction: column; align-items: stretch; gap: 8px; opacity: 0; animation: floatNavIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards; } @keyframes floatNavIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.94); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .float-nav { opacity: 1; animation: none; } } .float-nav-row { display: flex; align-items: stretch; gap: 8px; } .float-nav-pill { flex: 1; display: flex; align-items: center; background: rgba(255,255,255,0.68); backdrop-filter: blur(32px) saturate(210%); -webkit-backdrop-filter: blur(32px) saturate(210%); border: 1px solid rgba(255,255,255,0.88); border-radius: 10px; box-shadow: 0 8px 32px rgba(55,83,116,0.10), 0 2px 8px rgba(55,83,116,0.06), inset 0 1px 0 rgba(255,255,255,0.95); padding: 8px 14px 8px 22px; gap: 4px; white-space: nowrap; transition: box-shadow 0.3s ease, background 0.3s ease; min-height: 54px; box-sizing: border-box; } .float-nav-pill .float-nav-links { margin-left: auto; } .float-nav.is-scrolled .float-nav-pill { background: rgba(255,255,255,0.90); box-shadow: 0 4px 20px rgba(55,83,116,0.10), inset 0 1px 0 rgba(255,255,255,1); } .float-nav-logo { display: flex; align-items: center; flex-shrink: 0; } .float-nav-logo img { height: 32px; width: auto; margin-bottom: 4px; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .float-nav-logo:hover img { transform: scale(1.06); } .float-nav-sep { width: 1px; height: 22px; background: rgba(55,83,116,0.12); margin: 0 10px; flex-shrink: 0; } .float-nav-links { display: flex; align-items: center; list-style: none; gap: 0; margin: 0; padding: 0; } .float-nav-links > li > a, .float-nav-links > li > button { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-headline, system-ui); font-size: 13px; font-weight: 600; color: var(--blue-dark, #375374); text-transform: uppercase; letter-spacing: 0.09em; padding: 9px 14px; border-radius: 10px; background: none; border: none; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); white-space: nowrap; text-decoration: none; } .float-nav-links > li > a:hover, .float-nav-links > li > button:hover { background: var(--blue-dark, #375374); color: #fff; transform: translateY(-1px); } .float-nav-links > li > a:hover svg, .float-nav-links > li > button:hover svg { stroke: #fff; opacity: 0.9; } .float-nav-links > li > button.is-active { background: rgba(55,83,116,0.08); color: var(--blue-dark, #375374); } .fn-chev { width: 9px; height: 9px; opacity: 0.4; flex-shrink: 0; transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .float-nav-links > li > button.is-active .fn-chev { transform: rotate(180deg); } .float-nav-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--blue-dark, #375374); color: #fff; padding: 7px 22px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 24px rgba(55,83,116,0.18), 0 2px 6px rgba(55,83,116,0.10); font-family: var(--font-headline, system-ui); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; flex-shrink: 0; white-space: nowrap; line-height: 38px; transition: background 0.25s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); text-decoration: none; } .float-nav-cta .arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .float-nav-cta:hover { background: #2c4863; box-shadow: 0 12px 32px rgba(55,83,116,0.22), 0 3px 8px rgba(55,83,116,0.12); transform: translateY(-1px); } .float-nav-cta:hover .arrow { transform: translateX(3px); } .float-nav-tray { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.68); backdrop-filter: blur(32px) saturate(210%); -webkit-backdrop-filter: blur(32px) saturate(210%); border: 1px solid rgba(255,255,255,0.88); border-radius: 10px; box-shadow: 0 8px 28px rgba(55,83,116,0.10), 0 2px 6px rgba(55,83,116,0.06), inset 0 1px 0 rgba(255,255,255,0.95); padding: 8px 12px; white-space: nowrap; opacity: 0; transform: translateY(-12px) scale(0.94); pointer-events: none; transition: opacity 0.32s cubic-bezier(0.2,0.9,0.3,1.2), transform 0.38s cubic-bezier(0.34,1.56,0.64,1); min-height: 54px; box-sizing: border-box; } .float-nav.tray-open .float-nav-tray { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .fn-tray-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; font-family: var(--font-headline, system-ui); font-size: 11px; font-weight: 600; color: var(--blue-dark, #375374); text-transform: uppercase; letter-spacing: 0.09em; transition: background 0.2s, color 0.2s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); text-decoration: none; } .fn-tray-chip:hover { background: var(--blue-dark, #375374); color: #fff; transform: translateY(-1px); } .fn-tray-chip-icon { width: 18px; height: 18px; border-radius: 5px; background: rgba(55,83,116,0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; } .fn-tray-chip:hover .fn-tray-chip-icon { background: rgba(108,173,198,0.16); } .fn-tray-chip-icon svg { width: 10px; height: 10px; stroke: var(--blue-dark, #375374); } .fn-tray-chip:hover .fn-tray-chip-icon svg { stroke: var(--blue-light, #6CADC6); } .fn-tray-sep { width: 1px; height: 18px; background: rgba(55,83,116,0.10); flex-shrink: 0; } .mobile-top-bar { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 50; align-items: center; justify-content: space-between; padding: 10px 20px; background: rgba(255,255,255,0.88); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(55,83,116,0.08); } .mobile-top-bar .logo-img { height: 38px; width: auto; } .mobile-burger { background: none; border: none; padding: 8px; color: var(--blue-dark, #375374); cursor: pointer; display: flex; } .mobile-burger svg { display: block; transition: transform 0.3s; } .mobile-burger.is-open svg { transform: rotate(90deg); } @media (max-width: 900px) { .float-nav { display: none; } .mobile-top-bar { display: flex; } } .mobile-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background: #fff; z-index: 100; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(20px, 5vw, 40px); border-bottom: 1px solid var(--hairline, rgba(55,83,116,0.10)); } .mobile-menu-head .logo-img { height: 44px; } .mobile-menu-close { background: none; border: none; color: var(--blue-dark, #375374); cursor: pointer; padding: 8px; font-size: 28px; line-height: 1; } .mobile-menu-body { flex: 1 0 auto; display: flex; flex-direction: column; padding: 18px clamp(20px, 5vw, 40px) 24px; gap: 0; } .mobile-menu-body a { font-family: var(--font-headline, system-ui); font-weight: 700; font-size: 17px; color: var(--blue-dark, #375374); text-transform: uppercase; letter-spacing: 0.04em; padding: 14px 2px; border-bottom: 1px solid var(--hairline, rgba(55,83,116,0.10)); transition: color 0.2s, padding-left 0.25s; text-decoration: none; } .mobile-menu-body a:last-child { border-bottom: none; } .mobile-menu-body a:hover, .mobile-menu-body a:active { color: var(--blue-light, #6CADC6); padding-left: 12px; } .mobile-menu-foot { padding: 24px clamp(20px, 5vw, 40px) 40px; border-top: 1px solid var(--hairline, rgba(55,83,116,0.10)); display: flex; flex-direction: column; gap: 16px; } .mobile-menu-foot .nav-cta { display: flex; justify-content: center; align-items: center; gap: 8px; text-align: center; width: 100%; padding: 16px 22px; font-size: 14px; letter-spacing: 0.1em; border-radius: 14px; background: var(--blue-dark, #375374); color: #fff; box-shadow: 0 8px 20px rgba(55,83,116,0.22); font-family: var(--font-headline, system-ui); font-weight: 700; text-transform: uppercase; text-decoration: none; } .mobile-menu-foot .nav-cta .arrow { font-size: 16px; } body.menu-locked { overflow: hidden; } /* Scrollbar konsistent halten → keine seitliche Verschiebung beim Mobile-Menü-Öffnen */ html { overflow-y: scroll; } /* Legal-Links in Tray + Mobile-Menü: dezenter Style (kleiner, ausgegraut) */ .fn-tray-chip-legal { opacity: 0.65; font-size: 12px; padding: 8px 14px; } .fn-tray-chip-legal:hover { opacity: 1; } .fn-tray-chip-legal .fn-tray-chip-icon svg { width: 14px; height: 14px; } .mobile-menu-divider { height: 1px; background: var(--hairline, rgba(55,83,116,0.10)); margin: 16px 0 4px; } .mobile-menu-body a.mobile-menu-legal { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0.02em; padding: 10px 2px; color: var(--text-soft, #888); opacity: 0.85; } .mobile-menu-body a.mobile-menu-legal:hover { color: var(--blue-dark, #375374); opacity: 1; } /* ────────────────────────────────────────────────────────── GLOBAL BUTTON NORMALIZE — 3 Varianten, alles einheitlich. Form: gleicher Padding, Radius, Font, Border, KEIN Shadow. Farben variieren je nach Kontext (.btn-on-color für farbigen BG). ────────────────────────────────────────────────────────── */ /* Basis-Form für ALLE Buttons */ .btn-primary, .btn-secondary, .btn-hellblau, .btn-white, .btn-privat, .btn-notfall, .btn-notfall-submit, .btn-ghost, .btn-ghost-on-blue, .insta-link, .unt-location-maplabel { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 14px 28px !important; border-radius: 10px !important; font-family: var(--font-headline, 'Rubik', system-ui) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border: 1.5px solid transparent !important; box-shadow: none !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease !important; transform: none !important; } /* VARIANTE 1 — Primary (hellblau / weißer Text) — auf hellem BG */ .btn-primary, .btn-secondary, .btn-hellblau, .btn-notfall, .btn-notfall-submit, .insta-link, .unt-location-maplabel { background: var(--blue-light, #6CADC6) !important; color: #fff !important; border-color: var(--blue-light, #6CADC6) !important; } .btn-primary:hover, .btn-secondary:hover, .btn-hellblau:hover, .btn-notfall:hover, .btn-notfall-submit:hover, .insta-link:hover { background: var(--blue-dark, #375374) !important; color: #fff !important; border-color: var(--blue-dark, #375374) !important; transform: none !important; } /* VARIANTE 2 — On-Color (weiß / dunkelblau) — auf farbigem BG */ .btn-white, .btn-privat, .kos-modul.verlauf1 .btn-primary, .kos-modul.hellblau .btn-primary, .kos-modul.dunkelblau .btn-primary, .jasmin-hero .btn-primary, .manuel-hero .btn-primary, .closing-cta .btn-primary { background: #fff !important; color: var(--blue-dark, #375374) !important; border-color: #fff !important; } .btn-white:hover, .btn-privat:hover, .kos-modul.verlauf1 .btn-primary:hover, .kos-modul.hellblau .btn-primary:hover, .kos-modul.dunkelblau .btn-primary:hover, .jasmin-hero .btn-primary:hover, .manuel-hero .btn-primary:hover, .closing-cta .btn-primary:hover { background: var(--blue-dark, #375374) !important; color: #fff !important; border-color: var(--blue-dark, #375374) !important; transform: none !important; } /* VARIANTE 3 — Outline (transparent + weiße Border) — auf farbigem BG */ .btn-ghost, .btn-ghost-on-blue { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,0.65) !important; } .btn-ghost:hover, .btn-ghost-on-blue:hover { background: rgba(255,255,255,0.12) !important; border-color: #fff !important; color: #fff !important; transform: none !important; } /* ═══════════ MOBILE-UNIFIKATION (≤720px, global, 2026-05-30) ═══════════ Vorher: .container nutzte page-internal calc(360 * 100vw/420) = ~321px @ 375vw → ~27px Außenrand. Gleichzeitig hatten .kos-modul/.bildtext-modul-Karten direkt margin: 0 18px → 18px Außenrand. Effekt sichtbar als „Container alle unterschiedlich". Hier global: alle .container auf 18px-Gosse. Buttons in Karten zentrieren. */ @media (max-width: 720px) { .container { max-width: none !important; width: auto !important; margin-left: 18px !important; margin-right: 18px !important; padding-left: 0 !important; padding-right: 0 !important; } /* Partner-Strip Section hat inline-padding clamp(24,4vw,56px) horizontal → killen, damit darin auch 18px-Gosse greift (sonst doppelter Inset). */ .partner-section { padding-left: 0 !important; padding-right: 0 !important; } /* Card-Buttons horizontal zentrieren: standardmäßig sitzen sie align-self: flex-start */ .kos-modul .kos-text .btn-primary, .bildtext-text .btn-primary { align-self: center !important; margin-left: auto !important; margin-right: auto !important; } /* Jasmin-Card Actions: vertikal stacken + gleiche Breite */ .jasmin-hero-actions { flex-direction: column !important; align-items: stretch !important; } .jasmin-hero-actions .btn-primary { flex: 1 1 auto !important; width: 100% !important; text-align: center !important; } /* === Sticky-Header verdeckt Hero-Headlines (#3) === mobile-top-bar ist position:fixed, height 59. Hero-Sections starten auf y=0 und werden direkt vom Bar überlagert. Lösung: body 59px nach unten schieben, scroll-padding für Anchor-Links setzen. */ body { padding-top: 59px !important; } /* Min-height NUR auf Home-Hero (hat .hero-bg child) — sonst bekommen Subpage-Heros (faq, kontakt, …) riesige Leerflächen weil sie auch class="hero" haben */ section.hero:has(.hero-bg) { min-height: calc(100vh - 59px) !important; } /* === Privatkunden Jasmin-kos-modul schmaler als Rest (#24) === privatkunden.html .kos-modul nutzt width: calc(100% - 48px) + max-width via container → wird mobil ~273px statt 339px. Auf 18px-Gosse zwingen wie auf index.html */ section.bildtext-modul .kos-modul, section.bildtext-modul .kos-modul.rechts { margin-left: 18px !important; margin-right: 18px !important; width: auto !important; max-width: none !important; } /* === Jasmin-Hero-Name riesig (#5) === Aktuell font-size: 44px @ 880px → bricht „JASMIN WINKLER" auf 2 Zeilen. Mobil deutlich runter. Zusätzlich: jasmin-hero-meta limitiert sich von selbst auf content-width — wir zwingen es auf 100% damit der Name eine Zeile bekommt. */ .jasmin-hero-meta, .jasmin-hero-person { width: 100% !important; } .jasmin-hero-name { font-size: clamp(22px, 6.5vw, 30px) !important; line-height: 1.05 !important; white-space: nowrap !important; } /* Jasmin-Photo full-bleed bis Card-Rand (war auf Home auf max-width 280px begrenzt, fachgebiete hat es schon edge-to-edge → vereinheitlichen) */ .jasmin-hero { padding: 0 !important; gap: 0 !important; overflow: hidden !important; } .jasmin-hero-photo { max-width: none !important; width: 100% !important; aspect-ratio: 4 / 5 !important; max-height: 420px !important; margin: 0 !important; } .jasmin-hero-content { padding: clamp(24px, 6vw, 32px) clamp(20px, 5vw, 28px) clamp(28px, 6vw, 36px) !important; } /* === Sticky DE-Flag + A11y-Button überlagern Fließtext (#6) === Buttons sind position:fixed bottom:16. Inhalt scrollt drunter durch. Buttons leicht kleiner + leicht transparenter + body padding-bottom für End-of-page. */ body { padding-bottom: 80px !important; } .float-btn, .lang-fab { width: 42px !important; height: 42px !important; bottom: 14px !important; opacity: 0.92; } .float-btn:hover, .lang-fab:hover { opacity: 1; } /* === Hersteller-Logos 1-Spalte zu groß (#8) === Statt 1-Spalte (3 lange Tiles) → 3-spaltig kompakt mit angepasstem Padding, sodass alle Logos in einer Reihe sichtbar bleiben. */ .partner-strip { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .partner-tile { padding: 18px 8px 14px !important; } .partner-tile-logo { min-height: clamp(40px, 14vw, 60px) !important; } .partner-tile-logo img { max-height: clamp(40px, 11vw, 56px) !important; max-width: 90% !important; } /* Panasonic-Logo ist nur Wordmark (extrem horizontal) → braucht volle Breite + freie Höhe um optisch gleichgewichtig zu LG/Inventor zu wirken */ .partner-tile-logo img[alt="Panasonic"] { max-height: clamp(60px, 18vw, 90px) !important; max-width: 100% !important; } .partner-label { font-size: 9px !important; letter-spacing: 0.08em !important; } /* === Unternehmen-Map-Toggle „Deutschland · Weinheim" Overflow (#12) === transform: translateX(-50%) wird irgendwo überschrieben → label sitzt nicht mehr zentriert sondern bei left:50% (kein Shift) → ragt rechts raus. Mit !important erzwingen + sicherheitshalber max-width damit es nie über Card-Edge hinausgeht. */ .unt-location-maplabel { transform: translateX(-50%) !important; max-width: calc(100% - 24px) !important; white-space: normal !important; text-align: center !important; font-size: 10.5px !important; padding: 8px 14px !important; } /* === #14 SLA-Tiers untereinander + flacher === War 2x2-Grid → PRIORITY/VIP ragten rechts raus. Mobil 1-Spalte + kompakte Card */ .sla-grid { grid-template-columns: 1fr !important; gap: 10px !important; width: auto !important; max-width: none !important; margin: 0 18px !important; } .sla-tier { padding: 16px 18px 18px !important; } .sla-tier .sla-bars { margin-top: 12px !important; } /* === #15 Spanien-Map unten abgeschnitten === Vorher: Label saß absolute auf der Karte und verdeckte Spaniens Südküste. Jetzt: Label aus der Karte raus, sitzt static darunter mit eigenem Platz */ .unt-location--map { display: flex !important; flex-direction: column !important; padding: 0 0 14px !important; } .unt-location-mapimg { object-fit: contain !important; min-height: clamp(220px, 60vw, 320px) !important; background: var(--bg-gray, #F2F2F2); } .unt-location-maplabel { position: static !important; transform: none !important; margin: 12px auto 0 !important; display: block !important; width: max-content !important; max-width: calc(100% - 32px) !important; bottom: auto !important; } /* === #16 B2B-Hub Connector-Lines + Abstand (unternehmen) === SVG-Connector mit 2 Branches sah leer aus auf Mobile (1-Spalten-Layout). Mehr vertikales Padding zwischen Pill und Cards, Connector wird klar sichtbar */ .unt-b2b-hub { margin-bottom: 12px !important; } .unt-b2b-connector { height: clamp(80px, 22vw, 120px) !important; opacity: 0.9; } /* Reveal-Lines per Default sichtbar machen (sonst warten sie auf scroll-trigger und sind leer) */ .unt-b2b-line { stroke-dashoffset: 0 !important; } .unt-b2b-pill { padding: 14px 28px !important; } .unt-b2b-pill img { height: 32px !important; } /* === #17 History 1979-Block ragt aus Bildschirm (unternehmen) === Jahr-Schrift 64px war zu fett, Container hatte horizontal padding. Schmaler skalieren */ .bilderStrecke.historyWrapper { padding-left: 0 !important; padding-right: 0 !important; } .bilderStrecke .scrollText.history { margin: 0 18px 24px !important; padding: 12px 16px !important; } .bilderStrecke .scrollText .jahr { font-size: 44px !important; margin-bottom: 4px !important; } .bilderStrecke .scrollText .mitarbeiter, .bilderStrecke .scrollText .umsatz { font-size: 12px !important; } /* margin + width:100% verursacht 36px Overflow → width auto erzwingen */ .bilderStrecke .historyStreckeCover { height: 36vh !important; margin: 0 18px 28px !important; width: auto !important; } .bilderStrecke .inhalte, .bilderStrecke .inhalte:nth-of-type(even) { margin: 0 18px 28px !important; width: auto !important; } .bilderStrecke .inhalte .historyStreckeBild { height: 32vh !important; width: auto !important; } .bilderStrecke .historyStreckeCover .stehenderText h2 { font-size: clamp(20px, 6vw, 28px) !important; } .bilderStrecke .historyStreckeCover .stehenderText p { font-size: 13px !important; line-height: 1.45 !important; } /* === #18 Karriere-Perks-Pills überlaufen rechts === .perk-label { white-space: nowrap } → lange Labels ragten raus. Mobil: Pills full-width-stacking, Label darf wrappen */ .perks-grid { flex-direction: column !important; align-items: stretch !important; } .perk { padding: 10px 14px 10px 12px !important; gap: 8px !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } .perk-label { white-space: normal !important; font-size: 12.5px !important; line-height: 1.25 !important; flex: 1 1 auto; } .perk-icon { width: 18px !important; height: 18px !important; } /* === #19 Kontakt-Jasmin-Card Abstand (privatkunden.html) === .kos-modul.verlauf1.rechts: image cover-overlay rutschte auf Mobile mit Text zusammen. Sauberer Block-Split: image hat eigene aspect-ratio, text bekommt klares Padding */ .kos-modul.verlauf1.rechts .kos-image, .kos-modul.verlauf1 .kos-image { aspect-ratio: 4/3 !important; max-height: 360px !important; } .kos-modul.verlauf1 .kos-text { padding: 22px 20px 26px !important; } .kos-modul .jasmin-eyebrow { display: block; margin-bottom: 6px !important; } /* === #20 FAQ Intro-Text mobil zu groß === „Antworten zu Auswahl…" war Riesen-Text. Auf Body-Größe reduzieren */ .faq-intro p, .faq-page-intro p, section .container > p { font-size: clamp(14px, 3.8vw, 16px) !important; line-height: 1.55 !important; } /* === #21 DSGVO-Checkbox-Label überdimensioniert (kontakt.html) === .field label hat global text-transform: uppercase + letter-spacing 0.08em → Privacy-Consent-Label (mit Checkbox drin) wurde unleserlich gross. Reset auf normalen Fließtext für Labels die einen Checkbox enthalten */ .field label:has(input[type="checkbox"]), .field label:has(input[type="checkbox"]) span { text-transform: none !important; font-size: 12.5px !important; line-height: 1.45 !important; letter-spacing: normal !important; font-weight: 400 !important; opacity: 1 !important; font-family: var(--font-body) !important; } /* === #22 meineklimaanlage-Pill Logo zu klein === .privat-logo Pill war 160px breit, Logo füllte exakt aus → wirkte klein und ohne Luft. Pill breiter + Innen-Padding rund ums Logo */ .privat-card .privat-logo { width: clamp(220px, 64vw, 280px) !important; aspect-ratio: 472 / 104 !important; padding: 12px 20px !important; box-sizing: border-box !important; } .privat-card .privat-logo img { object-fit: contain !important; } } /* Anchor-Scroll-Offset global (gilt auf allen Breiten falls jemals nötig) */ html { scroll-padding-top: 70px; } /* Horizontale Scroll-Sidebar verhindern (global) — falls irgendwo doch was rausragt, wird es geclippt statt eine Scrollbar zu erzeugen */ html, body { overflow-x: hidden !important; max-width: 100vw; }