/* ════════════════════════════════════════════════════════════════════════ Vatten Haustechnik, geteiltes Stylesheet (EINZIGE Quelle). Wird sowohl von der Startseite (index.html) als auch von allen generierten Unterseiten geladen. Hier ändern = überall ändern. ════════════════════════════════════════════════════════════════════════ */ /* ══════════════════ MARKENSCHRIFT: Söhne (Klim Type Foundry) ══════════════════ */ /* Web-Lizenz #26041136 für vatten-haustechnik.de (5.000 mtl. Unique Users) */ @font-face { font-family: 'Soehne'; font-weight: 300; font-style: normal; font-display: swap; src: url('../../fonts/soehne-leicht.woff2') format('woff2'); } @font-face { font-family: 'Soehne'; font-weight: 400; font-style: normal; font-display: swap; src: url('../../fonts/soehne-buch.woff2') format('woff2'); } @font-face { font-family: 'Soehne'; /* Dreiviertelfett deckt 500 bis 700 ab (einziger fetter Schnitt der Lizenz) */ font-weight: 500 700; font-style: normal; font-display: swap; src: url('../../fonts/soehne-dreiviertelfett.woff2') format('woff2'); } /* ══════════════════ FARBPALETTE (aus Original übernommen) ══════════════════ */ :root { --tiefnacht: #080F1A; --navy: #0D1B2E; --nacht: #152840; --marine: #1E3A58; --stahl: #3A6080; --eis: #7A9CB8; --silber: #C8C4BC; --kreide: #F0ECE6; /* Bootstrap-Theme an die Palette koppeln */ --bs-body-bg: var(--navy); --bs-body-color: var(--kreide); --bs-primary: #1E3A58; --bs-primary-rgb: 30, 58, 88; --bs-emphasis-color: var(--kreide); --bs-link-color: var(--eis); --bs-link-hover-color: var(--kreide); --bs-border-color: rgba(58, 96, 128, 0.18); --bs-font-sans-serif: 'Soehne', system-ui, -apple-system, sans-serif; } html { scroll-behavior: smooth; /* Kein horizontales Pannen der ganzen Seite auf Mobil. Nur das Wurzel-Element (html) steuert das Seiten-Scrollen, ein clip auf propagiert NICHT zum Viewport. clip (statt hidden) erzeugt KEINEN Scroll-Container und KEINEN Containing-Block für fixed-Elemente, daher bleiben Navbar/Anruf-FAB am Viewport kleben und ruckeln nicht. Innere Scroller (Carousel, Modal-Body) bleiben voll funktionsfähig. */ overflow-x: clip; } /* Breitere Bühne auf großen Bildschirmen, Bootstrap deckelt sonst bei 1320px */ @media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1560px; } } body { background: var(--navy); color: var(--kreide); font-family: var(--bs-font-sans-serif); font-weight: 400; -webkit-font-smoothing: antialiased; /* Zusätzliche Sicherung: kappt body-eigenes Überlaufen. Das eigentliche Seiten-Scrollen steuert html (oben), ein clip auf body propagiert nicht zum Viewport. clip statt hidden, damit body kein Scroll-Container wird. */ overflow-x: clip; } /* ══════════════════ SCROLLBARS AUSBLENDEN (Scrollen bleibt aktiv) ══════════════════ */ /* Hintergrund hinter dem Inhalt dunkel halten, beim Überscrollen (iOS-Bounce) bzw. in der früheren Scrollbar-Spalte blitzt so nichts Helles durch */ html { background: var(--navy); } /* Firefox + altes Edge/IE, auch innere Scroll-Container (Modals, Dropdowns) */ * { scrollbar-width: none; -ms-overflow-style: none; } /* Chrome, Safari, neues Edge, Leiste samt Spur unsichtbar/transparent */ ::-webkit-scrollbar { width: 0; height: 0; background: transparent; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { background: transparent; } .text-eis { color: var(--eis) !important; } .text-silber { color: var(--silber) !important; } /* flow-root: hält Container-Margins (my-md-4) in der Sektion, sonst entkommt der Margin und zeigt zwischen gleichfarbigen Sektionen die hellere Body-Farbe als Balken */ .bg-nacht { background: var(--nacht) !important; display: flow-root; } .bg-tiefnacht{ background: var(--tiefnacht) !important; display: flow-root; } .section-tag { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .35em; text-transform: uppercase; color: var(--eis); margin-bottom: 1.25rem; } .display-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .35em; text-transform: uppercase; color: var(--eis); } /* ══════════════════ BUTTONS ══════════════════ */ .btn-primary { --bs-btn-bg: var(--marine); --bs-btn-border-color: var(--marine); --bs-btn-hover-bg: var(--stahl); --bs-btn-hover-border-color: var(--stahl); --bs-btn-active-bg: var(--stahl); --bs-btn-color: var(--kreide); --bs-btn-hover-color: var(--kreide); letter-spacing: .03em; padding: .7rem 1.6rem; } .btn-ghost { --bs-btn-color: var(--kreide); --bs-btn-hover-color: var(--kreide); border: 1px solid rgba(200,196,188,.4); letter-spacing: .03em; padding: .7rem 1.6rem; transition: background .25s, border-color .25s; } .btn-ghost:hover { background: rgba(200,196,188,.08); border-color: var(--kreide); color: var(--kreide); } /* ══════════════════ NAVBAR ══════════════════ */ #main-nav { background: transparent; border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease, padding .4s ease; /* Safe-Area oben: Logo rutscht auf Geräten mit Notch nicht unter die Statusleiste */ padding-top: calc(1.1rem + env(safe-area-inset-top, 0px)); padding-bottom: 1.1rem; } #main-nav.scrolled { background: rgba(8,15,26,0.92); border-bottom-color: rgba(255,255,255,0.12); box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.35); backdrop-filter: blur(10px); padding-top: calc(.6rem + env(safe-area-inset-top, 0px)); padding-bottom: .6rem; } /* Handy/Tablet: solider Hintergrund statt Blur, sonst lässt iOS/Safari die fixierte Navbar beim Scrollen flackern bzw. verschwinden */ @media (max-width: 1199.98px) { /* Navbar-Höhe KONSTANT halten. Das Schrumpfen beim Scrollen (padding 1.1rem -> .6rem) wirkt auf Handys wie ein „Mitwandern" der Leiste. Stattdessen feste, kompakte Höhe; nur der Hintergrund wird beim Scrollen noch animiert (deshalb padding aus der Transition genommen). translateZ(0) hebt die fixierte Navbar auf eine eigene GPU-Ebene, ohne das (backdrop-filter ist hier ja entfernt) zeichnet der Browser sie beim Scrollen auf dem Main-Thread neu und sie ruckelt sichtbar mit. */ #main-nav, #main-nav.scrolled { padding-top: calc(.7rem + env(safe-area-inset-top, 0px)); padding-bottom: .7rem; transition: background .3s ease, border-color .3s ease; transform: translateZ(0); } #main-nav.scrolled { background: rgba(8,15,26,0.98); backdrop-filter: none; } /* Aufgeklapptes Menü braucht einen soliden Hintergrund, sonst scheint der Seiteninhalt durch und die Navigationspunkte sind kaum lesbar */ #main-nav:has(#navContent.show), #main-nav:has(#navContent.collapsing) { background: rgba(8,15,26,0.99); backdrop-filter: none; } #navContent.show, #navContent.collapsing { background: rgba(8,15,26,0.99); margin: .75rem -.75rem 0; padding: .75rem .75rem 1rem; border-top: 1px solid rgba(255,255,255,0.10); } } .navbar-brand { display: inline-flex; align-items: center; padding: 0; } .navbar-brand img { height: 42px; width: auto; display: block; transition: height .4s ease; } #main-nav.scrolled .navbar-brand img { height: 34px; } footer .footer-brand img { height: 60px; } @media (max-width: 575.98px) { footer .footer-brand img { height: 48px; } } #main-nav .nav-link { color: var(--kreide); letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; font-weight: 600; margin: 0 .25rem; } #main-nav .nav-link:hover, #main-nav .nav-link:focus { color: var(--eis); } /* Größere Screens: Nav-Items wachsen mit und füllen die Bar besser */ @media (min-width: 1400px) { #main-nav .nav-link { font-size: .92rem; letter-spacing: .16em; margin: 0 .5rem; } .navbar-brand img { height: 46px; } } @media (min-width: 1680px) { #main-nav .nav-link { font-size: 1rem; margin: 0 .7rem; } .navbar-brand img { height: 50px; } .nav-social svg { width: 24px; height: 24px; } } .nav-social a { color: var(--stahl); transition: color .25s; display: inline-flex; } .nav-social a:hover { color: var(--eis); } .nav-social svg { width: 22px; height: 22px; } /* Dropdown (Ratgeber-Hubs) */ #main-nav .dropdown-menu { background: rgba(8,15,26,0.97); border: 1px solid var(--bs-border-color); backdrop-filter: blur(10px); --bs-dropdown-link-color: var(--silber); --bs-dropdown-link-hover-color: var(--kreide); --bs-dropdown-link-hover-bg: rgba(30,58,88,.5); --bs-dropdown-link-active-bg: var(--marine); } #main-nav .dropdown-item { letter-spacing: .04em; font-size: .9rem; padding: .5rem 1.1rem; } /* ══════════════════ HERO ══════════════════ */ #hero { position: relative; min-height: 100vh; min-height: 100svh; /* Handys: ohne Sprung hinter der Browser-Leiste */ display: flex; align-items: center; overflow: hidden; /* statischer Markenverlauf (ersetzt die frühere Canvas-Animation) */ background: radial-gradient(120% 90% at 62% 22%, rgba(58,96,128,.28) 0%, rgba(30,58,88,.10) 42%, rgba(8,15,26,0) 70%), radial-gradient(120% 120% at 35% 35%, #152840 0%, #0D1B2E 50%, #080F1A 100%); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,26,.25) 0%, rgba(8,15,26,.05) 40%, rgba(13,27,46,.6) 100%); z-index: 1; } .hero-content { position: relative; z-index: 2; } .hero-h1 { font-weight: 600; font-size: clamp(2.1rem, 5vw, 4.6rem); line-height: 1.05; letter-spacing: -.025em; color: var(--kreide); } .hero-sub { letter-spacing: .28em; text-transform: uppercase; color: var(--silber); font-weight: 300; font-size: clamp(.8rem, 1.6vw, 1rem); } /* ══════════════════ LEISTUNGEN ══════════════════ */ section { scroll-margin-top: 70px; } .leistung-card { background: linear-gradient(160deg, rgba(21,40,64,.6), rgba(13,27,46,.6)); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 2.2rem 1.8rem; height: 100%; text-align: left; cursor: pointer; transition: transform .35s ease, border-color .35s ease, background .35s ease; position: relative; overflow: hidden; } .leistung-card:hover { transform: translateY(-6px); border-color: rgba(122,156,184,.5); background: linear-gradient(160deg, rgba(30,58,88,.7), rgba(21,40,64,.7)); } .leistung-card:focus-visible { outline: 2px solid var(--eis); outline-offset: 3px; } .card-num { font-size: .8rem; font-weight: 600; letter-spacing: .2em; color: var(--stahl); } .card-icon { margin: 1.2rem 0; color: var(--eis); } .card-icon svg { width: 40px; height: 40px; } .leistung-card .card-title { font-weight: 600; font-size: 1.25rem; color: var(--kreide); margin-bottom: .6rem; } .card-text { color: var(--silber); font-size: .95rem; line-height: 1.6; } .card-more { display: inline-block; margin-top: 1.2rem; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--eis); font-weight: 600; } .card-more::after { content: " →"; transition: margin .25s; } .leistung-card:hover .card-more::after { margin-left: .25rem; } /* ══════════════════ ÜBER UNS ══════════════════ */ .ueber-headline { font-weight: 600; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; } .ueber-quote { color: var(--eis); font-style: italic; font-size: 1.1rem; border-left: 2px solid var(--stahl); padding-left: 1.2rem; } .ueber-stat { border-top: 1px solid var(--bs-border-color); padding: 1.4rem 0; } .stat-num { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; color: var(--kreide); line-height: 1; } .stat-label { color: var(--silber); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-top: .4rem; } /* ══════════════════ KONTAKT ══════════════════ */ #kontakt { background: var(--nacht); } #kontakt .form-control, #kontakt .form-select { background-color: rgba(13,27,46,.6); border: 1px solid var(--bs-border-color); color: var(--kreide); padding: .8rem 1rem; } #kontakt .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cfd8e3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px 12px; padding-right: 2.5rem; } #kontakt .form-control:focus, #kontakt .form-select:focus { background-color: rgba(13,27,46,.9); border-color: var(--eis); box-shadow: 0 0 0 .2rem rgba(122,156,184,.18); color: var(--kreide); } #kontakt .form-control::placeholder { color: rgba(200,196,188,.5); } .kontakt-headline { font-weight: 600; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.02em; } .kontakt-email { color: var(--eis); font-size: clamp(1.1rem, 2.4vw, 1.8rem); font-weight: 500; text-decoration: none; word-break: break-word; } .kontakt-email:hover { color: var(--kreide); } /* ══════════════════ FOOTER ══════════════════ */ footer { background: var(--tiefnacht); } footer a { color: var(--silber); text-decoration: none; cursor: pointer; transition: color .25s; } footer a:hover { color: var(--eis); } .hub-pill { display: inline-block; padding: .55rem 1.25rem; border: 1px solid var(--stahl); border-radius: 2rem; background: transparent; color: var(--silber); font-size: .95rem; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .hub-pill:hover, .hub-pill[aria-describedby] { background: var(--marine); color: var(--kreide); border-color: var(--marine); } /* Quick-Info-Card (Popover) im dunklen Look */ .popover.hub-popover { --bs-popover-bg: var(--nacht); --bs-popover-border-color: var(--bs-border-color); --bs-popover-header-bg: transparent; --bs-popover-header-color: var(--kreide); --bs-popover-body-color: var(--silber); --bs-popover-max-width: 300px; box-shadow: 0 1rem 2.5rem rgba(0,0,0,.45); } .popover.hub-popover .popover-header { border-bottom: 1px solid var(--bs-border-color); font-weight: 600; } .popover.hub-popover .popover-body p { margin-bottom: .75rem; font-size: .9rem; } .popover.hub-popover .hub-pop-links { list-style: none; padding: 0; margin: 0 0 .9rem; } .popover.hub-popover .hub-pop-links li { margin-bottom: .35rem; } .popover.hub-popover .hub-pop-links a { color: var(--eis); font-size: .88rem; text-decoration: none; } .popover.hub-popover .hub-pop-links a:hover { color: var(--kreide); text-decoration: underline; } .popover.hub-popover .hub-pop-more { display: inline-block; width: 100%; text-align: center; padding: .4rem .9rem; border-radius: 2rem; background: var(--marine); color: var(--kreide); font-size: .85rem; font-weight: 600; text-decoration: none; } .popover.hub-popover .hub-pop-more:hover { background: var(--stahl); } .footer-socials a { color: var(--stahl); } .footer-socials a:hover { color: var(--eis); } .footer-socials svg { width: 36px; height: 36px; } /* ══════════════════ MODALS (Bootstrap, neu eingefärbt) ══════════════════ */ .modal-content { background: var(--nacht); border: 1px solid var(--bs-border-color); color: var(--kreide); } .modal-header { border-bottom-color: var(--bs-border-color); } .modal-tag { display: block; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--eis); margin-bottom: .3rem; } .modal-title { font-weight: 600; } .modal-intro { color: var(--silber); line-height: 1.7; } .modal-section-title { font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--eis); font-weight: 600; margin: 1.5rem 0 1rem; } .modal-item { border: 1px solid var(--bs-border-color); border-radius: .4rem; padding: 1rem 1.2rem; background: rgba(13,27,46,.5); height: 100%; } .modal-item-title { font-weight: 600; color: var(--kreide); margin-bottom: .3rem; } .modal-item-text { color: var(--silber); font-size: .9rem; line-height: 1.55; } .modal-footer-note { color: var(--silber); font-size: .9rem; line-height: 1.6; } .modal .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* ── Flip-Modals (Leistungen): Vorderseite Details, Rückseite Kontaktformular ── */ .modal-flip .modal-content { background: transparent; border: 0; overflow: visible; perspective: 2400px; } .modal-flip .flip-inner { position: relative; width: 100%; height: auto; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4, .15, .2, 1), height .7s cubic-bezier(.4, .15, .2, 1); } .modal-flip.flipped .flip-inner { transform: rotateY(180deg); } .modal-flip .flip-face { width: 100%; max-height: calc(100vh - 3.5rem); display: flex; flex-direction: column; overflow: hidden; background: var(--nacht); border: 1px solid var(--bs-border-color); border-radius: var(--bs-modal-border-radius, .5rem); color: var(--kreide); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .modal-flip .flip-front { position: relative; } .modal-flip .flip-back { position: absolute; top: 0; left: 0; transform: rotateY(180deg); } .modal-flip .flip-face > .modal-body { overflow-y: auto; } .btn-flip-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--bs-border-color); border-radius: 50%; background: rgba(13, 27, 46, .5); color: var(--eis); transition: background .2s, color .2s; } .btn-flip-back:hover { background: var(--stahl); color: var(--kreide); } @media (prefers-reduced-motion: reduce) { .modal-flip .flip-inner { transition: none; } } /* ══════════════════ ON-BRAND PLATZHALTER (gegen echte Fotos tauschbar) ══════════════════ */ .ph { position: relative; width: 100%; height: 100%; background: radial-gradient(120% 120% at 28% 18%, rgba(58,96,128,.28), rgba(13,27,46,0) 60%), linear-gradient(155deg, var(--nacht) 0%, var(--navy) 55%, var(--tiefnacht) 100%); border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ph::before { content: ""; position: absolute; inset: 0; background: url('../../img/vatten-avatar.png') center / 140px no-repeat; opacity: .05; filter: grayscale(1) brightness(1.4); } .ph-label { position: relative; z-index: 1; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--stahl); font-weight: 600; } .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .ph-1x1 { aspect-ratio: 1 / 1; } .ph-4x3 { aspect-ratio: 4 / 3; } .ph-3x4 { aspect-ratio: 3 / 4; } .ph-16x9 { aspect-ratio: 16 / 9; } /* ══════════════════ REFERENZEN-CAROUSEL ══════════════════ */ .ref-carousel .carousel-item { height: clamp(360px, 64vh, 620px); } .ref-carousel .ph { border-radius: .5rem; } .ref-caption { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; /* Seitenabstand > 8% Pfeil-Spalten, damit Text/Button die Pfeile freilassen */ padding: 2.5rem clamp(3rem, 10%, 6rem) clamp(2.2rem, 6vw, 3.5rem); background: linear-gradient(0deg, rgba(8,15,26,.8) 0%, rgba(8,15,26,.25) 45%, rgba(8,15,26,0) 75%); text-align: left; border-radius: .5rem; } .ref-caption .btn { align-self: flex-start; } .ref-caption .ref-eyebrow { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--eis); font-weight: 600; } .ref-caption h3 { font-weight: 600; color: var(--kreide); font-size: clamp(1.6rem, 4vw, 3rem); margin: .5rem 0 .35rem; } .ref-caption p { color: var(--silber); margin: 0 0 1.3rem; max-width: 46ch; } /* Caption darf Klicks durchlassen (Pfeile/Indikatoren liegen darunter), nur der Button fängt Klicks */ .ref-caption { pointer-events: none; } .ref-caption .btn { pointer-events: auto; position: relative; z-index: 4; } .ref-carousel { --bs-carousel-control-icon-filter: none; } .ref-carousel .carousel-control-prev, .ref-carousel .carousel-control-next { width: 8%; opacity: .65; z-index: 3; } .ref-carousel .carousel-control-prev:hover, .ref-carousel .carousel-control-next:hover { opacity: 1; } /* Indikatoren sichtbar (Dark-Mode färbt sie sonst dunkel) */ .ref-carousel .carousel-indicators { z-index: 3; } .ref-carousel .carousel-indicators [data-bs-target] { background-color: var(--silber); opacity: .5; } .ref-carousel .carousel-indicators .active { background-color: var(--kreide); opacity: 1; } /* Marketing-Reihe: 3 Spalten mit runden Bildern (wie Bootstrap-Beispiel) */ .round-ph { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 1.4rem; } .round-ph::before { background-size: 78px; } .marketing-col h3 { font-weight: 400; font-size: 1.6rem; color: var(--kreide); margin-bottom: .6rem; } .marketing-col p { color: var(--silber); font-size: .95rem; line-height: 1.6; } /* ══════════════════ FEATURETTE (Bild/Text im Wechsel) ══════════════════ */ .featurette-heading { font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; color: var(--kreide); } .featurette .lead { color: var(--silber); font-weight: 300; } .featurette-divider { border-top: 1px solid var(--bs-border-color); opacity: 1; margin: 3.5rem 0; } /* ══════════════════ PROJEKT-GALERIE ══════════════════ */ .gallery-tile { display: block; cursor: pointer; } .gallery-tile .ph { transition: transform .4s ease, border-color .4s ease; } .gallery-tile:hover .ph { transform: translateY(-5px); border-color: rgba(122,156,184,.5); } /* ══════════════════ 24H-NOTDIENST-BUTTON ══════════════════ */ .notdienst-btn { background: #C81027; border: 1px solid #C81027; color: #fff; font-weight: 600; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; padding: .5rem 1.1rem; border-radius: 2rem; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; flex: 0 0 auto; /* nie stauchen lassen, sonst wird der Text abgeschnitten */ transition: background .25s, border-color .25s, transform .25s; } .notdienst-btn:hover, .notdienst-btn:focus { background: #a50d20; border-color: #a50d20; color: #fff; transform: translateY(-1px); } .notdienst-btn .nd-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #fff; flex: 0 0 auto; animation: ndPulse 2s infinite; } @keyframes ndPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 .5rem rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } /* ── Notdienst-Modal ── */ .nd-steps { list-style: none; counter-reset: nd; padding: 0; margin: 0; } .nd-steps li { counter-increment: nd; position: relative; padding: .4rem 0 .4rem 2.5rem; line-height: 1.4; border-bottom: 1px solid var(--bs-border-color); } .nd-steps li:last-child { border-bottom: 0; } .nd-steps li::before { content: counter(nd); position: absolute; left: 0; top: .35rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgba(58, 96, 128, 0.25); color: var(--kreide); font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; } .nd-steps li strong { color: var(--kreide); } /* Soforthilfe-Tipps als eingeklapptes Accordion: hält das Notfall-Modal kurz, damit Anruf-Button + Formular ohne Scrollen sichtbar sind. Dark-Theme via Bootstrap-Accordion-Variablen. */ .nd-accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--silber); --bs-accordion-border-color: var(--bs-border-color); --bs-accordion-border-radius: .4rem; --bs-accordion-inner-border-radius: .4rem; --bs-accordion-btn-color: var(--eis); --bs-accordion-btn-bg: rgba(30,58,88,.25); --bs-accordion-active-color: var(--eis); --bs-accordion-active-bg: rgba(30,58,88,.4); --bs-accordion-btn-padding-y: .85rem; --bs-accordion-btn-padding-x: 1.1rem; --bs-accordion-body-padding-y: .25rem; --bs-accordion-body-padding-x: 1.1rem; --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(122,156,184,.3); /* heller Chevron statt Bootstraps dunklem Default */ --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A9CB8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A9CB8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); } .nd-accordion .accordion-button { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; } .nd-accordion .accordion-button:not(.collapsed) { box-shadow: none; } .nd-accordion .accordion-body { padding-bottom: 1rem; } .nd-accordion .nd-steps li:last-child { border-bottom: 0; } .btn-notfall { background: #C81027; border-color: #C81027; color: #fff; font-weight: 600; } .btn-notfall:hover, .btn-notfall:focus { background: #a50d20; border-color: #a50d20; color: #fff; } @media (max-width: 1199.98px) { .notdienst-btn { font-size: .72rem; padding: .5rem 1rem; letter-spacing: .06em; gap: .45rem; } .notdienst-btn .nd-dot { width: .5rem; height: .5rem; } } @media (max-width: 575.98px) { /* Logo etwas Luft zum Rand geben, aber knapp, sonst passt die Zeile nicht. env(...) = Safe-Area, falls das Gerät einen Notch an der Seite hat (Querformat). */ #main-nav > .container { padding-left: calc(.9rem + env(safe-area-inset-left, 0px)); padding-right: calc(.9rem + env(safe-area-inset-right, 0px)); } .navbar-brand img { height: 30px; } /* beim Scrollen NICHT vergrößern (sonst bricht die Navbar auf Handys um) */ #main-nav.scrolled .navbar-brand img { height: 30px; } /* schmaleres Menü-Icon schafft Platz für die eine Zeile */ #main-nav .navbar-toggler { padding: .25rem .4rem; } /* kompakt genug, damit Logo + Button + Menü-Icon in EINE Zeile passen */ .notdienst-btn { font-size: .66rem; padding: .46rem .8rem; letter-spacing: .03em; gap: .4rem; min-height: 44px; } .notdienst-btn .nd-dot { width: .46rem; height: .46rem; } } /* sehr schmale Geräte (≤360 px): Logo & Button noch etwas kompakter */ @media (max-width: 360px) { #main-nav > .container { padding-left: calc(.6rem + env(safe-area-inset-left, 0px)); padding-right: calc(.6rem + env(safe-area-inset-right, 0px)); } .navbar-brand img, #main-nav.scrolled .navbar-brand img { height: 26px; } .notdienst-btn { font-size: .6rem; padding: .4rem .62rem; letter-spacing: .01em; gap: .35rem; } } /* ══════════════════ PARTNER & ZERTIFIZIERUNGEN ══════════════════ */ #partner .col-6 { display: flex; flex-direction: column; } #partner .partner-card { background: #fff; border-radius: .6rem; flex: 0 0 auto; height: 130px; display: flex; align-items: center; justify-content: center; padding: 1.25rem 1.5rem; transition: transform .35s ease, box-shadow .35s ease; } #partner .partner-card:hover { transform: translateY(-4px); box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.28); } /* Logos einzeln getunt, damit auch kompakte Marken groß sichtbar sind */ #partner .partner-card img { max-width: 100%; width: auto; object-fit: contain; } #partner .partner-card img[src*="wolf"] { height: 64px; } #partner .partner-card img[src*="gc-gruppe"] { height: 88px; } #partner .partner-card img[src*="pfeiffer"] { width: 100%; max-width: 280px; height: auto; } #partner .partner-card img[src*="maler"] { height: 88px; } #partner .partner-name { color: #fff; font-weight: 600; font-size: 1rem; margin: 1rem 0 .15rem; } #partner .partner-role { color: var(--silber); font-size: .85rem; line-height: 1.5; margin: 0; } /* ══════════════════ REVEAL-ANIMATION ══════════════════ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; } .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .notdienst-btn .nd-dot { animation: none; } html { scroll-behavior: auto; } } /* ══════════════════ RATGEBER & WISSEN ══════════════════ */ .ratgeber-lead { color: var(--silber); font-size: 1.05rem; line-height: 1.7; max-width: 64ch; } a.ratgeber-card { display: flex; flex-direction: column; text-decoration: none; } a.ratgeber-card .card-text { flex-grow: 1; } #ratgeber .stat-num { line-height: 1; } .ratgeber-featured { margin-top: 2.8rem; } .ratgeber-featured-label { display: block; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--eis); font-weight: 600; } .ratgeber-link { display: block; height: 100%; padding: 1rem 1.2rem; border: 1px solid var(--bs-border-color); border-radius: .45rem; background: rgba(13,27,46,.45); color: var(--kreide); text-decoration: none; font-weight: 600; line-height: 1.35; transition: border-color .3s ease, transform .3s ease, background .3s ease; } .ratgeber-link:hover { border-color: rgba(122,156,184,.5); transform: translateY(-3px); background: rgba(30,58,88,.5); color: var(--kreide); } .ratgeber-link span { display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stahl); font-weight: 600; margin-bottom: .4rem; } /* ══════════════════ MOBIL-FEINSCHLIFF ══════════════════ */ /* Sichtbares, markiges Antippen statt grauem Browser-Highlight */ a, button, [role="button"], .nav-link, .hub-pill { -webkit-tap-highlight-color: rgba(122,156,184,.25); } /* Modal-Schließen: komfortables 44px-Tap-Ziel (statt ~24px) */ .modal .btn-close { padding: 1rem; background-size: .85em; } /* Mobiles Klappmenü: größere Schrift & Zeilenhöhe = bessere Tap-Ziele */ @media (max-width: 1199.98px) { #navContent .nav-link { font-size: .95rem; padding-top: .6rem; padding-bottom: .6rem; } #navContent .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; } #navContent .nav-social { margin-top: .75rem; } #navContent .nav-social svg { width: 26px; height: 26px; } } /* Carousel-Pfeile auf Handys breit genug zum Treffen (8% wäre ~26px) */ @media (max-width: 767.98px) { .ref-carousel .carousel-control-prev, .ref-carousel .carousel-control-next { width: 16%; } /* „Projekt anfragen" höher setzen, damit die Slide-Punkte nicht direkt darunter kleben */ .ref-caption { padding-bottom: 4rem; } .ref-carousel .carousel-indicators { margin-bottom: .85rem; } } /* ── Schwebender Anruf-Button (nur Handys) ── */ .call-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; display: none; /* nur auf kleinen Screens sichtbar */ align-items: center; gap: .55rem; padding: .85rem 1.25rem; border-radius: 2.5rem; background: #C81027; color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .02em; text-decoration: none; box-shadow: 0 .5rem 1.4rem rgba(0,0,0,.4); } .call-fab:hover, .call-fab:focus { background: #a50d20; color: #fff; } .call-fab svg { width: 20px; height: 20px; flex: 0 0 auto; } @media (max-width: 767.98px) { /* translateZ(0): eigene GPU-Ebene, sonst ruckelt der fixierte Button beim Scrollen mit */ .call-fab { display: inline-flex; transform: translateZ(0); } /* Über Home-Indicator UND der einblendbaren Browser-Leiste halten, damit der Button nicht abgeschnitten wird (Safe-Area + Reserve). */ @supports (padding: max(0px)) { .call-fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem); right: calc(env(safe-area-inset-right, 0px) + 1rem); } } } /* ── Scrollbare Modals (z. B. Notfall) auf Mobil IMMER komplett erreichbar ── Bootstrap bindet die Modal-Hoehe an den Layout-Viewport (height/min-height: 100%). Auf Mobilgeraeten ist der SICHTBARE Bereich aber kleiner (ein-/ausfahrende Browserleiste). Folge: der untere Teil (z. B. der Absenden-Button) liegt unter dem sichtbaren Rand und ist selbst durch Scrollen nicht erreichbar. Loesung: an den sichtbaren Viewport (dvh) binden und die layout-bezogene min-height aufheben. Die Zentrierung bleibt, daher sitzt kurzer Inhalt weiter mittig. */ @media (max-width: 767.98px) { /* Modal an den INHALT anpassen (nicht zwingend volle Hoehe), aber auf den sichtbaren Viewport (dvh) DECKELN; bei zu viel Inhalt scrollt der Body. So bleibt das Notfall-Modal mit eingeklapptem Accordion eine kompakte Karte und passt trotzdem auf jeder Hoehe. height/min-height: auto hebt die volle Hoehe von modal-dialog-scrollable / modal-dialog-centered auf. */ .modal-dialog-scrollable { height: auto; min-height: auto; } .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); /* Fallback fuer Browser ohne dvh */ max-height: calc(100dvh - 1rem); } }