/* ===================================================================== pixCMS – Basis-Stylesheet Senior Web Programmer: Daniel Beck / Pixlwerk Dieses Stylesheet liefert das Grunddesign der Demo-/Startseite. Farben können später über die CMS-Einstellungen (Farbverlauf 1/2) angepasst und per Inline-Variable überschrieben werden. ===================================================================== */ /* ---------------------------------------------------------------------- 1. Design-Tokens / CSS-Variablen ---------------------------------------------------------------------- */ :root { --primary-ci: #0E7C7B; /* Hauptfarbe (Akzent) */ --primary-dark: #0A5F5E; /* dunklere Variante (Hover etc.) */ --primary-light: #E8F4F4; /* sehr helle Flächenfarbe */ --gradient-1: #0E7C7B; --gradient-2: #095A59; --primary-gradient: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%); /* Zusatz-Akzente. Kontrast gegen Weiß geprüft: --notfall 4,9:1 · --whatsapp 5,3:1 · --primary-ci 5,0:1 · --primary-dark 7,5:1 */ --notfall: #B85400; --whatsapp: #0F7B43; --whatsapp-dark: #0B6033; --body-color: #4a5568; /* Standard-Textfarbe */ --heading-color: #1a202c; /* Überschriften */ --bg-soft: #f8fafc; /* zarter Seitenhintergrund */ --card-radius: 1.25rem; /* Schatten im Markenton – die Vorlage brachte hier ein Blau (34,124,157) mit, das neben dem Petrol sichtbar kalt ausfiel. */ --shadow-soft: 0 10px 30px rgba(14, 124, 123, 0.12); --shadow-hover: 0 18px 45px rgba(14, 124, 123, 0.20); --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Höhe der fixierten Navigation. EINE Quelle für alle Abstände darunter – vorher standen 100/110 px verstreut in den Views und der Inhalt klebte mit 5 px Rest an der Leiste. Gemessener Istwert: Wortmarke (48px) plus Navbar-Polsterung. Bei Änderung an Logohöhe oder Navbar-Padding nachmessen und hier anpassen. */ --nav-h: 87px; /* Custom-Form-Controls / pixselect (fügt sich per --primary-* ins Schema ein) */ --pix-radius: .55rem; --pix-border: rgba(0, 0, 0, 0.15); --pix-ring: var(--primary-light); /* Linkfarbe im Markenton. Ohne diese Variablen ist jeder ohne eigene Klasse Bootstrap-Blau (#0d6efd) – sichtbar z.B. bei „Datenschutzerklärung" in Hinweistexten. Über die Variablen statt einer a{}-Regel: keine Spezifität, Komponenten mit eigener Farbe bleiben unberührt. #0A5F5E = 7,5:1 auf Weiß, Hover #0E7C7B = 5,0:1. */ --bs-link-color: #0A5F5E; --bs-link-color-rgb: 10, 95, 94; --bs-link-hover-color: #0E7C7B; --bs-link-hover-color-rgb: 14, 124, 123; } /* iOS: Safari verlinkt Ziffernfolgen im Fließtext eigenmächtig in Systemblau. Zusammen mit dem format-detection-Meta im bleibt das im Markendesign. */ a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; } /* ---------------------------------------------------------------------- 2. Grundlayout ---------------------------------------------------------------------- */ * { scroll-behavior: smooth; } /* overflow-x auch auf : die AOS-Effekte „fade-left" schieben Elemente vor dem Einblenden 100 px nach rechts. Nur auf gesetzt, ließ sich die Seite am trotzdem seitwärts ziehen. WICHTIG: auf „clip" statt „hidden" – overflow-x:hidden macht den body zum Scroll-Container und position:sticky greift dann nirgends mehr. */ html { overflow-x: hidden; } body { font-family: var(--font-base); color: var(--body-color); background-color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 700; letter-spacing: -0.01em; } a { transition: color .2s ease, opacity .2s ease; } main { min-height: 60vh; } /* Startabstand jeder Unterseite unter der fixierten Navigation. */ .seite-start { margin-top: calc(var(--nav-h) + 3.5rem); position: relative; } /* Dekorative Bühne am Seitenkopf: zwei Petrol-Wolken + Punktraster wie im Hero, nach unten weich ausgeblendet. Liegt als ::before hinter dem Inhalt und reicht bis unter die (durchscheinende) Navigation hinauf – dadurch bekommt jede Unterseite denselben Markenauftritt wie die Startseite. */ .seite-start::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * (var(--nav-h) + 3.5rem)); height: calc(420px + var(--nav-h)); z-index: -1; background: radial-gradient(38rem 22rem at 8% 0%, var(--primary-light) 0%, transparent 65%), radial-gradient(34rem 20rem at 95% 10%, var(--primary-light) 0%, transparent 65%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%230E7C7B' fill-opacity='.10'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); pointer-events: none; } /* Sprungziele nicht unter die fixierte Leiste rutschen lassen (Skip-Link, Anker). */ #main-content, [id]:target { scroll-margin-top: calc(var(--nav-h) + 1rem); } /* Utility-Klassen --------------------------------------------------- */ .text-primary-ci { color: var(--primary-ci) !important; } .bg-primary-ci { background-color: var(--primary-ci) !important; } .bg-soft { background-color: var(--bg-soft) !important; } /* Skip-Link (Barrierefreiheit) ------------------------------------- */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--primary-ci); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 .5rem 0; text-decoration: none; font-weight: 600; } .skip-link:focus { left: 0; } /* ---------------------------------------------------------------------- 3. Navigation ---------------------------------------------------------------------- */ .navbar { padding: 1.1rem 0; background-color: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); transition: padding .3s ease, box-shadow .3s ease, background-color .3s ease; } .navbar-scrolled { padding: .65rem 0; background-color: rgba(255, 255, 255, 0.97); box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06); } .navbar-brand .fs-5 { color: var(--heading-color); font-weight: 700; } .navbar .nav-link { color: var(--body-color); font-weight: 600; padding: .5rem 1rem !important; border-radius: .6rem; transition: color .2s ease, background-color .2s ease; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--primary-ci); } .navbar .nav-link.active { /* --primary-dark statt --primary-ci: auf --primary-light ergibt das 6,6:1 statt 4,5:1 knapp verfehlender 4,46:1. */ color: var(--primary-dark); background-color: var(--primary-light); } .navbar-toggler { border: 0; color: var(--primary-ci); } .navbar-toggler:focus { box-shadow: none; } /* Waagerechte Leiste (ab xl = 1200px). Einzeilig braucht sie rund 1137px Container – deshalb klappt die Navigation darunter zum Menü-Knopf (navbar-expand-xl in p_nav.php). Damit oben nicht nur 3px Luft bleiben, sind die Menüpunkte hier etwas enger gesetzt. */ @media (min-width: 1200px) { .navbar .nav-link { white-space: nowrap; padding: .5rem .8rem !important; } .navbar .btn-pill { white-space: nowrap; } .navbar-nav .nav-item.ms-xl-4 { margin-left: 1rem !important; } } /* ---------------------------------------------------------------------- 4. Buttons (Pill-Stil) ---------------------------------------------------------------------- */ .btn-pill { border-radius: 50rem; padding: .7rem 1.6rem; font-weight: 600; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .btn-pill:hover { transform: translateY(-2px); } .btn-ci { background: var(--primary-gradient); border: none; color: #fff; box-shadow: 0 8px 20px rgba(14, 124, 123, 0.28); } .btn-ci:hover, .btn-ci:focus { color: #fff; box-shadow: 0 12px 28px rgba(14, 124, 123, 0.38); } .btn-outline-ci { border: 2px solid var(--primary-ci); color: var(--primary-ci); background: transparent; } .btn-outline-ci:hover, .btn-outline-ci:focus { background: var(--primary-ci); color: #fff; } /* ---------------------------------------------------------------------- 5. Badges & Akzente ---------------------------------------------------------------------- */ .badge-ci { display: inline-block; background-color: var(--primary-light); color: var(--primary-dark); padding: .45rem 1rem; border-radius: 50rem; font-size: .8rem; font-weight: 700; letter-spacing: .02em; } /* ---------------------------------------------------------------------- 6. Hero-Bereich ---------------------------------------------------------------------- */ .hero-section { position: relative; padding: 3rem 0 4rem; background: radial-gradient(circle at 0% 0%, var(--primary-light) 0%, transparent 45%), radial-gradient(circle at 100% 100%, var(--primary-light) 0%, transparent 45%); } .hero-title { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; } .hero-img-wrapper img { width: 100%; height: auto; border-radius: var(--card-radius); box-shadow: var(--shadow-soft); object-fit: cover; } /* ---------------------------------------------------------------------- 7. Karten (Bento-Stil) & Icon-Boxen ---------------------------------------------------------------------- */ .bento-card { position: relative; background: #fff; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--card-radius); padding: 2rem; box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease; } .bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } /* Verlaufs-Kante oben, die erst beim Überfahren aufleuchtet. */ .bento-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: var(--card-radius) var(--card-radius) 0 0; background: var(--primary-gradient); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .bento-card:hover::before, .bento-card:focus-within::before { opacity: 1; } .icon-box { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: .9rem; margin-bottom: 1.25rem; font-size: 1.5rem; color: #fff; background: var(--primary-gradient); flex-shrink: 0; } /* ---------------------------------------------------------------------- 8. Footer – dunkles Petrol als ruhiger Abschluss jeder Seite ---------------------------------------------------------------------- */ footer { position: relative; background-color: #0B2021; border-top: none; } /* Verlaufs-Keyline als oberer Abschluss */ footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--primary-gradient); } /* Bootstrap-Utility-Farben im dunklen Kontext überschreiben. rgba(255,255,255,.66) auf #0B2021 ≈ 7,4:1 – AA-fest. */ /* Auch die .h6-Utility abdecken – die Klasse schlägt den Elementselektor. */ footer h2, footer .h6 { color: #fff; } footer .text-dark { color: #fff !important; } footer .text-muted { color: rgba(255, 255, 255, .66) !important; } footer .text-primary-ci { color: #6FD3C8 !important; } footer .border-top { border-color: rgba(255, 255, 255, .12) !important; } footer .footer-link:hover { color: #6FD3C8 !important; } /* Der Footer lädt die vom Kunden gelieferte helle Logofassung ($p_logo_invers). KEIN CSS-Filter mehr: brightness(0) invert(1) hätte auch den weißen Balken „KFZ-SACHVERSTÄNDIGER" samt seiner dunklen Schrift umgedreht. */ .footer-link:hover { color: var(--primary-ci) !important; } /* ---------------------------------------------------------------------- 9. Hilfs-Animationen / Reduced Motion ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; /* Ohne iteration-count 1 würden Endlos-Animationen (Ken-Burns, Puls) in Mikroschritten weiterlaufen statt stillzustehen. */ animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------------- 10. Responsive Feinschliff ---------------------------------------------------------------------- */ /* Eingeklappte Leiste (unter xl): deckendes Weiß, damit das aufgeklappte Menü nicht durchscheint. Muss zum Umbruchpunkt der Navigation passen. */ @media (max-width: 1199.98px) { .navbar { background-color: rgba(255, 255, 255, 0.98); box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06); } } /* Unter 576px ist das Logo kleiner (38px) – die Leiste wird entsprechend niedriger, sonst entsteht dort eine zu große Lücke. */ @media (max-width: 575.98px) { :root { --nav-h: 83px; } } @media (max-width: 991.98px) { .hero-section { padding-top: 1.5rem; } } /* ---------------------------------------------------------------------- 11. Formular-Felder & Custom-Selects (eigener Look statt System-Default) Fügt sich über die CSS-Variablen automatisch ins Farbschema ein (farbiger Tab in --primary-ci, weißer Chevron, Fokus-Ring aus --primary-light). Für neue Seiten aus dieser Vorlage nichts zu tun. ---------------------------------------------------------------------- */ .form-control, .form-select { border-radius: .55rem; border: 1px solid rgba(0, 0, 0, 0.15); padding: .7rem .95rem; background-color: #fff; color: var(--heading-color); transition: border-color .18s ease, box-shadow .18s ease; } .form-control:hover, .form-select:hover { border-color: var(--primary-ci); } .form-control:focus, .form-select:focus { outline: none; border-color: var(--primary-ci); box-shadow: 0 0 0 3px var(--primary-light); } /* Selects: nativen Pfeil entfernen, eigener Farb-Tab + weißer Chevron */ .form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2.6rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 15px 15px; } .form-select::-ms-expand { display: none; } .form-select:disabled { opacity: .6; cursor: not-allowed; } .form-select option { background: #fff; color: var(--heading-color); } .form-select option:checked { background: var(--primary-light); } /* --- pixselect: Custom-Dropdown (JS-Enhancement, ersetzt native Options-Liste) --- */ .pixselect { position: relative; } select.pixselect__native { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; overflow: hidden; } .pixselect__btn { display: flex; align-items: center; gap: .5rem; width: 100%; border: 1px solid var(--pix-border); border-radius: var(--pix-radius); background: #fff; color: var(--heading-color); padding: .68rem 1rem .68rem .95rem; font: inherit; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; } .pixselect__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pixselect__label.is-placeholder { color: #9aa3b2; } .pixselect__tab { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--primary-ci); } .pixselect__tab svg { width: 15px; height: 15px; display: block; transition: transform .2s ease; } .pixselect--open .pixselect__tab svg { transform: rotate(180deg); } .pixselect__btn:hover { border-color: var(--primary-ci); } .pixselect__btn:focus-visible, .pixselect--open .pixselect__btn { outline: none; border-color: var(--primary-ci); box-shadow: 0 0 0 3px var(--pix-ring); } .pixselect__btn:disabled { opacity: .6; cursor: not-allowed; } .pixselect__panel { list-style: none; margin: 6px 0 0; padding: 6px; position: absolute; z-index: 60; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--pix-border); border-radius: var(--pix-radius); box-shadow: 0 18px 40px rgba(20, 30, 48, .18); max-height: 280px; overflow-y: auto; } .pixselect__opt { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: var(--pix-radius); font-size: .92rem; color: var(--heading-color); cursor: pointer; } .pixselect__opt.is-active { background: var(--primary-light); } .pixselect__opt.is-selected { color: var(--primary-ci); font-weight: 700; } .pixselect__opt.is-selected::after { content: "\2713"; margin-left: auto; color: var(--primary-ci); } .pixselect__opt.is-disabled { opacity: .5; cursor: not-allowed; } /* --- Checkboxen & Radios im Markendesign (statt Bootstrap-Blau) --- */ .form-check-input { border: 1px solid var(--pix-border); background-color: #fff; } .form-check-input[type="checkbox"] { border-radius: 3px; } .form-check-input:focus { border-color: var(--primary-ci); box-shadow: 0 0 0 3px var(--pix-ring); } .form-check-input:checked { background-color: var(--primary-ci); border-color: var(--primary-ci); } .form-check-input:checked:focus { box-shadow: 0 0 0 3px var(--pix-ring); } /* ====================================================================== 12. Projektspezifisch – Kfz-Sachverständiger Frisch ====================================================================== */ /* --- 12.1 Sichtbarer Fokus (Tastaturbedienung) --------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, .form-check-input:focus-visible, summary:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: 2px; border-radius: .35rem; } .hero-five-form a:focus-visible, .hero-five-form button:focus-visible, .hero-five-banner a:focus-visible, .notfall-cta a:focus-visible, .kontakt-fab a:focus-visible { outline-color: #fff; } /* --- 12.2 Hero „Home Five": Bildbanner + Formularspalte ------------ */ /* Bühne: zarte Petrol-Wolken + feines Punktraster (wie die Autofx-Vorlage). */ .hero-five { padding: calc(var(--nav-h) + 2rem) 0 2rem; background: radial-gradient(circle at 0% 0%, var(--primary-light) 0%, transparent 42%), radial-gradient(circle at 100% 90%, var(--primary-light) 0%, transparent 42%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%230E7C7B' fill-opacity='.10'/%3E%3C/svg%3E"); } .hero-five-box { display: flex; background: #fff; border-radius: 1.6rem; /* Zweistufiger Schatten: weiter, weicher Wurf + enge Kontaktkante. */ box-shadow: 0 30px 70px rgba(7, 46, 45, .18), 0 4px 16px rgba(7, 46, 45, .10); overflow: hidden; border: 1px solid rgba(14, 124, 123, .10); } .hero-five-banner { position: relative; flex: 1 1 60%; min-height: 460px; display: flex; /* Mittig statt unten bündig: der Textblock saß sonst am Fuß des Banners und wirkte auf großen Bildschirmen nach unten gerutscht. */ align-items: center; isolation: isolate; overflow: hidden; } .hero-five-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; /* Motiv weitgehend entsättigen: der gelbe Lack des Unfallwagens bekommt unter dem dunklen Verlauf sonst einen olivgrünen Stich. */ filter: grayscale(.72) contrast(1.12) brightness(.78); /* Kaum merklicher Ken-Burns-Zoom – gibt dem Standbild Tiefe. Der globale prefers-reduced-motion-Block oben legt die Animation für Betroffene still. */ animation: hero-kenburns 26s ease-in-out infinite alternate; } @keyframes hero-kenburns { from { transform: scale(1) translateX(0); } to { transform: scale(1.07) translateX(-1.5%); } } /* Tiefdunkler Verlauf mit Petrol-Unterton statt neutralem Grau – wirkt wie Lack, nicht wie Ruß. Trägt die weiße Schrift unabhängig vom Motiv. */ .hero-five-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 82% 18%, rgba(111, 211, 200, .14) 0%, transparent 34%), linear-gradient(95deg, rgba(6, 17, 18, .97) 0%, rgba(6, 17, 18, .89) 38%, rgba(7, 26, 27, .58) 70%, rgba(7, 26, 27, .32) 100%), linear-gradient(180deg, rgba(6, 17, 18, .32) 0%, rgba(6, 17, 18, 0) 35%, rgba(6, 17, 18, .60) 100%); } .hero-five-banner-content { padding: 2.25rem 2.5rem; max-width: 560px; } /* Breitere Inhaltsbox nur dort, wo der Banner es hergibt: Sie schafft Platz für zwei Argument-Chips nebeneinander. Unter 1200px lief der Text sonst bis auf 3px an die Naht der Formularspalte heran. */ @media (min-width: 1200px) { /* 640px: die Argument-Chips brauchen in zwei Spalten 546px netto – bei 620px brach „Für Geschädigte zu 100 % kostenfrei" um. */ .hero-five-banner-content { max-width: 640px; } } .hero-five-eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); padding: .32rem .85rem; border-radius: 50rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; } /* Pulsierender Status-Punkt im Badge – „erreichbar". */ .hero-five-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6FD3C8; box-shadow: 0 0 0 0 rgba(111, 211, 200, .55); animation: hero-puls 2.6s ease-out infinite; } @keyframes hero-puls { 0% { box-shadow: 0 0 0 0 rgba(111, 211, 200, .55); } 70% { box-shadow: 0 0 0 8px rgba(111, 211, 200, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 211, 200, 0); } } .hero-five-title { color: #fff; font-size: clamp(2.1rem, 3.8vw, 3rem); line-height: 1.06; letter-spacing: -.02em; margin-bottom: .8rem; text-wrap: balance; } /* Handgezogener Akzent-Schwung unter „für Sie da." (Türkis – das Orange von Ende August hat der Kunde wieder verworfen). */ .hero-mark { position: relative; white-space: nowrap; } .hero-mark::after { content: ""; position: absolute; left: .02em; right: .02em; bottom: -.16em; height: .24em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 30 3.5, 90 3.5, 118 7.5' fill='none' stroke='%236FD3C8' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .hero-five-lead { color: rgba(255, 255, 255, .90); font-size: 1rem; max-width: 42ch; margin-bottom: 1.15rem; } /* Argumente als Glas-Chips statt loser Zeilen – IMMER zwei Spalten, sonst reihen sie sich je nach Textlänge ungleichmäßig um (1-2-1-1-1). Bis 1199px zwei gleich breite Spalten: die Chips füllen die Textbox aus und können die Naht der Formularspalte gar nicht erreichen. */ .hero-five-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .5rem; margin-bottom: 1.4rem; } /* Ab 1200px nach Inhalt bemessen – dort ist Platz und es wirkt luftiger. */ @media (min-width: 1200px) { .hero-five-points { grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; gap: .5rem .55rem; } } /* Auf schmalen Geräten enger setzen, damit zwei Chips je Zeile lesbar bleiben. Einzeilig ist hier NICHT erreichbar: bei 148px Chipbreite bräuchten die längeren Labels 6–9px Schrift. Ziel ist deshalb, dass KEIN Chip über zwei Zeilen geht – dafür reicht der Platz mit dieser Polsterung. */ @media (max-width: 575.98px) { .hero-five-points { gap: .4rem .4rem; } .hero-five-points li { font-size: .78rem; line-height: 1.25; padding: .35rem .55rem .35rem .4rem; gap: .3rem; align-items: center; } .hero-five-points li i { font-size: .72rem; } } .hero-five-points li { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; font-size: .88rem; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 50rem; padding: .38rem .85rem .38rem .6rem; } .hero-five-points i { color: #6FD3C8; } .hero-five-actions { display: flex; flex-wrap: wrap; gap: .75rem; } /* Auf dem Handy teilen sich Telefon und WhatsApp die Breite je zur Hälfte, statt unterschiedlich breit untereinander zu stehen. flex-basis 0 statt auto: sonst bestimmt die Textlänge die Breite und die Hälften wären ungleich. KEIN white-space: nowrap – der erzeugt eine unschrumpfbare Mindestbreite und schob die ganze Textspalte über die Bannerkante hinaus (410px statt 349px). Stattdessen trägt der WhatsApp-Knopf hier die Kurzfassung seines Labels. */ @media (max-width: 575.98px) { .hero-five-actions { flex-wrap: nowrap; gap: .5rem; } .hero-five-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; /* .8rem/.55rem gemessen: „0151 20197842" braucht 99px, der Knopf bietet dann 110px – bei .9rem waren es 110px gegen 104px und die Nummer brach mitten entzwei. */ padding-inline: .55rem; font-size: .8rem; } .hero-five-actions .btn i { margin-right: .35rem !important; } } /* Lange/kurze Knopfbeschriftung je nach Platz */ .btn-text-kurz { display: none; } @media (max-width: 575.98px) { .btn-text-lang { display: none; } .btn-text-kurz { display: inline; } } .btn-hero-call { background: #fff; color: var(--primary-dark); border: none; font-weight: 700; } .btn-hero-call:hover, .btn-hero-call:focus { background: var(--primary-light); color: var(--primary-dark); } .hero-five-form { position: relative; flex: 1 1 40%; background: var(--primary-gradient); padding: 1.85rem 1.85rem 1.65rem; display: flex; flex-direction: column; justify-content: center; } /* Lichteinfall oben links + großes Häkchen-Wasserzeichen unten rechts. z-index -1 legt beides ÜBER den Verlauf, aber UNTER den Inhalt. */ .hero-five-form::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, .16) 0%, transparent 52%); pointer-events: none; } .hero-five-form::after { content: ""; position: absolute; right: -1.5rem; bottom: -2rem; width: 14rem; height: 14rem; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' fill-opacity='.07' d='M173.9 439.4 7.5 273a25.6 25.6 0 0 1 0-36.2l36.2-36.2a25.6 25.6 0 0 1 36.2 0L192 312.7 432.1 72.6a25.6 25.6 0 0 1 36.2 0l36.2 36.2a25.6 25.6 0 0 1 0 36.2L210.1 439.4a25.6 25.6 0 0 1-36.2 0z'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-8deg); pointer-events: none; } /* Ab Desktop-Breite schiebt sich die Spalte mit diagonaler Kante über das Foto – die Naht zwischen Bild und Formular wirkt geschnitten statt gestoßen. */ @media (min-width: 992px) { .hero-five-form { margin-left: -3.5rem; clip-path: polygon(3.5rem 0, 100% 0, 100% 100%, 0 100%); padding-left: calc(1.85rem + 3rem); } } .hero-five-form-title { color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .01em; } .hero-five-form-sub { color: rgba(255, 255, 255, .85); font-size: .85rem; margin-bottom: 1.1rem; } /* Kompakte Felder: der Hero soll nicht erschlagen. Labels bleiben sichtbar (Platzhalter allein wären für Screenreader und beim Tippen zu wenig). */ .hero-five-form .row { --bs-gutter-y: .7rem; } .hero-five-form .form-label { margin-bottom: .2rem; font-size: .78rem; } .hero-five-form .form-control, .hero-five-form .form-select { padding: .55rem .85rem; font-size: .94rem; } .hero-five-form .btn-pill { padding-block: .7rem; } .hero-five-form .link-hero { color: #fff; text-decoration: underline; font-weight: 600; } .hero-five-form .link-hero:hover { color: var(--primary-light); } .hero-five-form .form-control, .hero-five-form .form-select { border-color: rgba(255, 255, 255, .55); } .hero-five-form .form-control:focus, .hero-five-form .form-select:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); } .hero-five-form .form-check-input { border-color: rgba(255, 255, 255, .7); } .hero-five-form .form-check-input:checked { background-color: #fff; border-color: #fff; } /* Häkchen in Markenfarbe statt Weiß-auf-Weiß */ .hero-five-form .form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%230A5F5E' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' d='m6 10 3 3 6-6'/%3E%3C/svg%3E"); } .hero-five-form .form-check-input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); } .btn-hero-submit { background: #fff; color: var(--primary-dark); border: none; font-weight: 700; box-shadow: 0 10px 26px rgba(4, 34, 33, .30); } .btn-hero-submit:hover, .btn-hero-submit:focus { background: var(--primary-light); color: var(--primary-dark); box-shadow: 0 14px 32px rgba(4, 34, 33, .38); } /* Zweitrangige Aktionen unter dem Absenden-Knopf: nebeneinander, damit sie sichtbar sind, ohne den Hero um zwei Knopfhöhen wachsen zu lassen. */ .form-zweitaktionen { display: flex; flex-wrap: wrap; gap: .5rem; } .form-zweitaktionen > * { flex: 1 1 190px; } /* Umrissen statt gefüllt: nimmt dem Absenden nicht die Aufmerksamkeit. */ .btn-hero-zweit { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .55); color: #fff; font-weight: 600; font-size: .88rem; /* Enge Polsterung: „Mehr Angaben machen" braucht 157px, der Knopf bietet 215px – mit .9rem blieben nur 7px Luft und der Text wäre gekippt. */ padding: .55rem .7rem; white-space: nowrap; } .btn-hero-zweit:hover, .btn-hero-zweit:focus { background: rgba(255, 255, 255, .20); border-color: #fff; color: #fff; } .dl-info { opacity: .75; font-weight: 400; font-size: .85em; } .btn-hero-submit i { transition: transform .2s ease; } .btn-hero-submit:hover i, .btn-hero-submit:focus i { transform: translateX(3px); } @media (max-width: 991.98px) { .hero-five { padding-top: calc(var(--nav-h) + 1.9rem); } .hero-five-box { flex-direction: column; } .hero-five-banner { min-height: 380px; flex: none; } .hero-five-banner::before { background: linear-gradient(180deg, rgba(6, 17, 18, .62) 0%, rgba(6, 17, 18, .80) 45%, rgba(6, 17, 18, .94) 100%); } .hero-five-banner-content { padding: 2rem 1.4rem; max-width: none; } .hero-five-form { padding: 1.75rem 1.4rem; } } /* --- 12.3 WhatsApp-Button (überall gleich) -------------------------- */ .btn-whatsapp { background: var(--whatsapp); color: #fff; border: none; font-weight: 700; } .btn-whatsapp:hover, .btn-whatsapp:focus { background: var(--whatsapp-dark); color: #fff; } /* --- 12.4 Vertrauensleiste: schwebende Chips statt flacher Farbleiste --- */ .trust-strip { padding: 1.6rem 0 .5rem; } .trust-strip-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; } .trust-strip-list li { display: flex; align-items: center; gap: .65rem; color: var(--heading-color); font-weight: 600; font-size: .9rem; background: #fff; border: 1px solid rgba(14, 124, 123, .14); border-radius: 50rem; padding: .5rem 1.15rem .5rem .55rem; box-shadow: 0 6px 18px rgba(14, 124, 123, .08); } .trust-strip-list li i { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-gradient); color: #fff; font-size: .8rem; } /* --- 12.5 Inhalts-Bausteine ---------------------------------------- */ .leistung-bild { width: 88px; height: 88px; object-fit: contain; margin-bottom: 1rem; } .step-nr { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary-gradient); color: #fff; font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; } .portrait-img { width: 100%; height: auto; border-radius: var(--card-radius); box-shadow: var(--shadow-soft); object-fit: cover; } .pull-quote { border-left: 4px solid var(--primary-ci); padding: .25rem 0 .25rem 1.25rem; font-size: 1.1rem; font-style: italic; color: var(--heading-color); } .check-list li { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .65rem; color: var(--body-color); } /* Icons auf runden Farbtellern statt frei schwebend. */ .check-list i { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-light); color: var(--primary-dark); font-size: .78rem; margin-top: .05rem; } /* --- 12.6 Abschluss-CTA -------------------------------------------- */ .notfall-cta { position: relative; overflow: hidden; background: var(--primary-gradient); border-radius: 1.6rem; padding: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; box-shadow: 0 22px 50px rgba(7, 46, 45, .22); } /* Lichteinfall + Telefonhörer-Wasserzeichen, beide unter dem Inhalt. */ .notfall-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, .16) 0%, transparent 55%); pointer-events: none; } .notfall-cta::after { content: ""; position: absolute; right: -1.25rem; bottom: -2.25rem; width: 11rem; height: 11rem; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' fill-opacity='.08' d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-10deg); pointer-events: none; } .notfall-cta-text { flex: 1 1 380px; } .notfall-cta-text h2 { color: #fff; font-size: 1.6rem; } .notfall-cta-text p { color: rgba(255, 255, 255, .9); } .notfall-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; } .btn-cta-solid { background: #fff; color: var(--primary-dark); border: none; font-weight: 700; } .btn-cta-solid:hover, .btn-cta-solid:focus { background: var(--primary-light); color: var(--primary-dark); } .btn-cta-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .8); font-weight: 700; } .btn-cta-ghost:hover, .btn-cta-ghost:focus { background: #fff; color: var(--primary-dark); border-color: #fff; } /* --- 12.7 Schritt-für-Schritt (Tipps im Schadenfall) ---------------- */ .schritt-liste { counter-reset: schritt; list-style: none; padding: 0; margin: 0; } .schritt-item { position: relative; padding-left: 4.5rem; padding-bottom: 2.5rem; } .schritt-item::before { counter-increment: schritt; content: counter(schritt); position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; border-radius: 50%; background: var(--primary-gradient); color: #fff; font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; /* Heller Ring + Schattenwurf: die Ziffer sitzt „auf" der Seite. */ box-shadow: 0 0 0 6px var(--primary-light), 0 10px 22px rgba(14, 124, 123, .28); } /* Verbindungslinie zwischen den Schritten – läuft nach unten aus. */ .schritt-item::after { content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3.7rem; bottom: .5rem; width: 2px; background: linear-gradient(180deg, var(--primary-ci) 0%, var(--primary-light) 100%); } .schritt-item:last-child { padding-bottom: 0; } .schritt-item:last-child::after { display: none; } .notfall-box { background: #FDF3EC; border-left: 4px solid var(--notfall); border-radius: .75rem; padding: 1.25rem 1.5rem; } /* Eigener, dunklerer Ton: --notfall erreicht auf dem hellen Kasten nur 4,46:1. */ .notfall-box .notfall-nr { color: #9A4600; font-weight: 700; } /* --- 12.8 Sofortkontakt (schwebend / mobile Leiste) ----------------- */ .kontakt-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1070; display: flex; flex-direction: column; gap: .6rem; align-items: flex-end; } .kontakt-fab-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.15rem; border-radius: 50rem; font-weight: 700; font-size: .92rem; text-decoration: none; color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); transition: transform .2s ease, background-color .2s ease; } .kontakt-fab-btn:hover { transform: translateY(-2px); color: #fff; } .kontakt-fab-btn i { font-size: 1.15rem; } .kontakt-fab-wa { background: var(--whatsapp); } .kontakt-fab-wa:hover { background: var(--whatsapp-dark); } .kontakt-fab-tel { background: var(--primary-dark); } .kontakt-fab-tel:hover { background: #084746; } .kontakt-fab-form { background: var(--notfall); } .kontakt-fab-form:hover { background: #964500; } /* Am Desktop nur WhatsApp schweben lassen – Telefon und Schadensmeldung sind dort bereits in Navigation, Hero und Abschluss-CTA sichtbar. Drei Buttons würden das Hero-Formular überdecken. */ @media (min-width: 768px) { .kontakt-fab-tel, .kontakt-fab-form { display: none; } } @media (max-width: 767.98px) { /* Auf dem Handy als volle Leiste unten – Daumen-erreichbar. */ .kontakt-fab { right: 0; left: 0; bottom: 0; flex-direction: row; gap: 0; background: #fff; border-top: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 -4px 20px rgba(0, 0, 0, .1); } .kontakt-fab-btn { flex: 1 1 0; justify-content: center; flex-direction: column; gap: .2rem; border-radius: 0; box-shadow: none; padding: .6rem .4rem; font-size: .72rem; text-align: center; } .kontakt-fab-btn:hover { transform: none; } .kontakt-fab-btn span { line-height: 1.15; } /* Platz schaffen, damit die Leiste nichts überdeckt */ body { padding-bottom: 4.25rem; } .pix-cookie { bottom: 5rem; } } /* --- 12.9 Über mich: Bild-Collage + Reiter ------------------------- */ .ueber-collage { position: relative; padding: 2.5rem 0 3.5rem 2.5rem; } /* Offener Rahmen als Tiefenebene hinter dem Porträt – leicht nach außen versetzt, mit Verlauf in der Kante statt flacher Volltonlinie. */ .ueber-collage::before { content: ""; position: absolute; left: -.5rem; top: -.5rem; width: 62%; height: 78%; border: 2px solid transparent; border-radius: 1.5rem; background: linear-gradient(135deg, var(--primary-ci), rgba(111, 211, 200, .45)) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* Punktraster-Patch hinter der Collage – gleiche Handschrift wie Hero/Bühne. */ .ueber-collage::after { content: ""; position: absolute; right: -.75rem; bottom: 1.25rem; width: 9.5rem; height: 7.5rem; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%230E7C7B' fill-opacity='.28'/%3E%3C/svg%3E"); pointer-events: none; } /* height:auto ist Pflicht – die width/height-Attribute am (gegen Layout-Sprünge beim Laden) würden sonst die Bildhöhe diktieren. */ .ueber-collage-haupt { position: relative; width: 72%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border-radius: 1.5rem; box-shadow: 0 24px 55px rgba(7, 46, 45, .20), 0 4px 14px rgba(7, 46, 45, .10); display: block; } .ueber-collage-klein { position: absolute; top: 0; right: 0; width: 44%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.25rem; border: 6px solid #fff; box-shadow: 0 18px 45px rgba(7, 46, 45, .24); transition: transform .3s ease; } .ueber-collage-klein:hover { transform: translateY(-4px); } .ueber-collage-stat { position: absolute; right: 0; bottom: 0; width: 58%; background: var(--primary-gradient); color: #fff; border: 6px solid #fff; border-radius: 1.25rem; padding: 1.35rem 1.5rem; box-shadow: 0 18px 45px rgba(7, 46, 45, .26); overflow: hidden; isolation: isolate; } /* Lichteinfall + Werkzeug-Wasserzeichen wie in Hero-Formular und CTA. */ .ueber-collage-stat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, .20) 0%, transparent 60%); pointer-events: none; } .ueber-collage-stat::after { content: ""; position: absolute; right: -1.4rem; bottom: -1.6rem; width: 7rem; height: 7rem; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' fill-opacity='.10' d='M173.9 439.4 7.5 273a25.6 25.6 0 0 1 0-36.2l36.2-36.2a25.6 25.6 0 0 1 36.2 0L192 312.7 432.1 72.6a25.6 25.6 0 0 1 36.2 0l36.2 36.2a25.6 25.6 0 0 1 0 36.2L210.1 439.4a25.6 25.6 0 0 1-36.2 0z'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-8deg); pointer-events: none; } .ueber-collage-stat-zahl { display: flex; align-items: center; gap: .65rem; font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .ueber-collage-stat-zahl i { font-size: 1.4rem; opacity: .85; } /* Das „+" in Türkis absetzen – kleines Echo des Hero-Akzents. */ .ueber-collage-stat-zahl [aria-hidden] { color: #6FD3C8; } .ueber-collage-stat-text { font-size: .9rem; font-weight: 600; margin: .4rem 0 0; } /* Augenbrauen-Zeile mit Pfeil (wie in der Vorlage) */ .eyebrow-pfeil { display: inline-flex; align-items: center; gap: .6rem; color: var(--primary-dark); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .85rem; } .eyebrow-pfeil::before { content: ""; width: 34px; height: 2px; background: var(--primary-ci); } /* Reiter-Leiste: weiße Karte mit Verlaufs-Kante links, Reiter als Pillen */ .pix-tabs { position: relative; border: 1px solid rgba(14, 124, 123, .12); background: #fff; border-radius: .9rem; overflow: hidden; padding: .4rem; gap: .3rem; box-shadow: var(--shadow-soft); /* Umbrechen statt abschneiden: bei schmalen Spalten passten die drei Reiter sonst nicht nebeneinander und der letzte wurde unerreichbar. */ flex-wrap: wrap; } .pix-tabs::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary-gradient); } .pix-tabs .nav-link { border: 0; border-radius: .6rem; flex: 1 1 auto; min-width: max-content; padding: .8rem .75rem; font-weight: 700; color: var(--heading-color); background: transparent; text-align: center; transition: background-color .2s ease, color .2s ease; } .pix-tabs .nav-link:hover { background: var(--primary-light); color: var(--primary-dark); } .pix-tabs .nav-link.active { background: var(--primary-gradient); color: #fff; box-shadow: 0 6px 16px rgba(14, 124, 123, .30); } .pix-tabs .nav-link:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: -3px; } @media (max-width: 575.98px) { .pix-tabs .nav-link { flex: 1 1 100%; text-align: left; } } /* Merkmale als helle Chips mit Icon-Teller statt loser Häkchen-Zeilen */ .merkmal-chip { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid rgba(14, 124, 123, .14); border-radius: .75rem; padding: .6rem .85rem; box-shadow: 0 4px 14px rgba(14, 124, 123, .07); height: 100%; } .merkmal-chip i { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-light); color: var(--primary-dark); font-size: .8rem; } /* IfS-Siegel auf weißem Kärtchen statt nacktem Bild */ .ifs-siegel { height: 58px; width: auto; background: #fff; border: 1px solid rgba(14, 124, 123, .14); border-radius: .75rem; padding: .45rem .65rem; box-shadow: 0 4px 14px rgba(14, 124, 123, .10); } /* Werdegang: Jahres-Badges als Verlaufs-Pillen mit weißer Schrift */ section[aria-labelledby="werdegang-heading"] .bento-card > .badge-ci { background: var(--primary-gradient); color: #fff; box-shadow: 0 6px 14px rgba(14, 124, 123, .25); } /* Hervorgehobener Meilenstein (2013) über die volle Breite */ .werdegang-gross { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 1.5rem; background: var(--primary-gradient); color: #fff; border-radius: var(--card-radius); padding: 1.75rem 2rem; box-shadow: 0 18px 45px rgba(7, 46, 45, .24); } .werdegang-gross::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, .18) 0%, transparent 58%); pointer-events: none; } .werdegang-gross-jahr { flex-shrink: 0; font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; padding-right: 1.5rem; border-right: 2px solid rgba(255, 255, 255, .28); } .werdegang-gross-text { font-size: 1.1rem; font-weight: 700; } .werdegang-gross-zusatz { color: rgba(255, 255, 255, .82); font-size: .9rem; margin-top: .25rem !important; } @media (max-width: 575.98px) { .werdegang-gross { flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.5rem; } .werdegang-gross-jahr { padding-right: 0; padding-bottom: .5rem; border-right: 0; border-bottom: 2px solid rgba(255, 255, 255, .28); } } /* --- 12.9b Schadensmeldung (Seite) --------------------------------- */ /* Formularkarte: die Verlaufs-Kante leuchtet hier dauerhaft, nicht erst beim Überfahren – sie markiert das Kernstück der Seite. */ .schaden-karte::before { opacity: 1; } .schaden-karte { padding: 2.25rem; } /* Nummerierte Abschnitts-Marker im vollen Formular */ .form-abschnitt { display: flex; align-items: center; gap: .55rem; /* Überschreibt den Zeilen-Abstand von Bootstrap (margin-top der .row-Kinder). Ein Abschnitts-Marker braucht mehr Luft als der Abstand zwischen zwei Feldern – vorher waren es mit .9rem sogar weniger. */ margin-top: 1.85rem; padding-bottom: .35rem; border-bottom: 1px dashed rgba(14, 124, 123, .30); text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; font-weight: 700; color: var(--primary-dark); } /* Der erste Marker sitzt direkt unter der Karten-Kopfzeile. Bootstraps Zeilen-Negativrand (-16px bei g-3) zieht ihn dort hoch, sodass von den 24px Kopf-Abstand nur 8px übrig blieben. Der Wert stellt den gleichen Abstand her, den Marker 2 und 3 zu ihren Vorgängern haben (~30px). */ .form-abschnitt:first-child { margin-top: 1.4rem; } .form-abschnitt-nr { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-gradient); color: #fff; font-size: .72rem; } /* Dunkle Kontakt-Karte in der Seitenleiste – Echo der Hero-Formularspalte */ .kontakt-direkt-karte { position: relative; overflow: hidden; isolation: isolate; background: var(--primary-gradient); color: #fff; border-radius: var(--card-radius); padding: 2rem; box-shadow: 0 18px 45px rgba(7, 46, 45, .24); } .kontakt-direkt-karte h2 { color: #fff; } .kontakt-direkt-karte p { color: rgba(255, 255, 255, .88); } .kontakt-direkt-karte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, .16) 0%, transparent 55%); pointer-events: none; } .kontakt-direkt-karte::after { content: ""; position: absolute; right: -1.4rem; bottom: -1.8rem; width: 9rem; height: 9rem; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' fill-opacity='.08' d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-10deg); pointer-events: none; } /* Seitenleiste läuft beim Scrollen mit (nur Desktop; align-self ist Pflicht, sonst streckt Flex die Spalte auf Zeilenhöhe und nichts klebt). */ @media (min-width: 992px) { .sticky-side { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: flex-start; } } @media (max-width: 991.98px) { .ueber-collage { padding: 2rem 0 3rem 1.5rem; max-width: 520px; margin-inline: auto; } .ueber-collage-stat { padding: 1.1rem 1.2rem; } .ueber-collage-stat-zahl { font-size: 1.6rem; } } /* --- 12.10 Akkordeon (FAQ) im Markendesign ------------------------- */ /* Bootstrap färbt den aufgeklappten Zustand sonst in seinem Standard-Blau (--bs-primary-bg-subtle / --bs-primary-text-emphasis) samt blauem Fokusring und blauem Chevron. */ .accordion { --bs-accordion-color: var(--body-color); --bs-accordion-bg: #fff; --bs-accordion-border-color: rgba(0, 0, 0, .06); --bs-accordion-btn-color: var(--heading-color); --bs-accordion-active-color: var(--primary-dark); --bs-accordion-active-bg: var(--primary-light); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(14, 124, 123, .28); /* Chevron in Markenfarbe statt Bootstrap-Blau */ --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a202c'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%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='%230A5F5E'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); } .accordion-button { padding: 1.15rem 1.35rem; } .accordion-button:not(.collapsed) { box-shadow: none; } /* Aufgeklappt: farbige Kante links macht den Zustand ohne Farbe allein erkennbar */ .accordion-item:has(.accordion-button:not(.collapsed)) { border-left: 4px solid var(--primary-ci); } .accordion-body { padding: .25rem 1.35rem 1.35rem; } /* --- 12.11 Markenlogo (Wortmarke) ---------------------------------- */ /* Breitformat 420x108. height:auto ist Pflicht, siehe Bild-Fallstrick oben. */ /* 48px statt kleiner: darunter wird die dritte Zeile („Gutachten & Bewertungen") zu fein zum Lesen. */ .marken-logo { height: 42px; width: auto; max-width: 100%; display: block; } .marken-logo--footer { height: 56px; } @media (max-width: 575.98px) { /* Neben dem Menü-Knopf muss der Schriftzug lesbar bleiben, ohne die Leiste zu sprengen. */ .marken-logo { height: 38px; } .marken-logo--footer { height: 46px; } } /* --- 12.12 Vorlagen-Hinweis (Tipps im Schadenfall) ----------------- */ .vorlage-hinweis { background: var(--primary-light); border-radius: .9rem; padding: 1rem 1.15rem; } .vorlage-hinweis p { color: var(--primary-dark); } /* Begriff-Listen: feste Spalte für den fett gesetzten Begriff, damit alle Beschreibungen an derselben Kante beginnen (statt je nach Wortlänge zu versetzen). Auf Mobil zu schmal – dort rutscht die Beschreibung unter den Begriff. */ @media (min-width: 576px) { .check-list--begriffe li > strong { flex: 0 0 8.75rem; } .check-list--begriffe li > span { flex: 1 1 0; min-width: 0; } } @media (max-width: 575.98px) { .check-list--begriffe li { flex-wrap: wrap; } .check-list--begriffe li > strong { flex: 0 0 auto; } .check-list--begriffe li > span { flex: 1 1 100%; margin-left: 2.2rem; } } /* ====================================================================== 16. pixCMS-BRÜCKE Alles, was erst durch die Anbindung ans CMS dazukommt. Bewusst am Ende der Datei und als eigener Abschnitt – so bleibt der Entwurfs-Teil oben unverändert vergleichbar. ====================================================================== */ /* 16.1 Editor-Texte (TinyMCE) ---------------------------------------- Die Modul-Texte kommen aus dem Rich-Text-Editor und bringen ihre eigenen

/