/* ========================================================================= Pharma Kodex – Mega-Menü "Lösungen" + Zielgruppen-Landingpages Pain→Lösung-Logik, konsistent mit home.css (Glasmorphism, Buzzword-Marker). ========================================================================= */ /* ── Mega-Menü (Dropdown in der Navbar) ── */ .pk-mega .dropdown-toggle::after { vertical-align: .12em; margin-left: .35em; } .pk-mega-menu { border: 1px solid rgba(26, 60, 110, 0.10); border-radius: 16px; padding: .5rem; margin-top: .6rem; width: 340px; /* schmal statt 540px */ /* Bootstrap setzt .dropdown-menu{background-color:var(--bs-dropdown-bg)} (= weiß); Variable überschreiben, damit der Glas-Hintergrund greift. */ --bs-dropdown-bg: transparent; background-color: rgba(255, 255, 255, 0.70) !important; transform: none !important; /* Popper/Transform würde backdrop-filter brechen */ } /* Portalierter Zustand (von nav.js an gehängt): JETZT greift der echte Glas-Blur, weil das Menü NICHT mehr im backdrop-filter-Kontext der Navbar liegt. */ .pk-mega-menu.pk-mega-portaled { z-index: 1080; /* über der fixed Navbar */ background-color: rgba(255, 255, 255, 0.55) !important; -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 24px 56px rgba(20, 41, 77, 0.22); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pk-mega-menu.pk-mega-portaled { background-color: rgba(255,255,255,0.96) !important; } } .pk-mega-grid { display: flex; flex-direction: column; gap: .1rem; } .pk-mega-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 10px; text-decoration: none; transition: background .15s; } .pk-mega-item:hover { background: rgba(26, 60, 110, 0.06); } /* dezentes Icon wie die Chips auf der Startseite – kein Kasten */ .pk-mega-icon { flex-shrink: 0; width: 1.5rem; text-align: center; color: var(--pk-blue); font-size: 1.05rem; display: flex; align-items: center; justify-content: center; } .pk-mega-text { min-width: 0; } .pk-mega-title { display: block; font-weight: 600; color: var(--pk-blue-dark); font-size: .92rem; line-height: 1.2; } .pk-mega-desc { display: block; font-size: .76rem; color: var(--pk-muted); line-height: 1.3; margin-top: .1rem; } .pk-mega-foot { margin: .35rem .2rem .2rem; padding-top: .6rem; border-top: 1px solid var(--pk-border); } .pk-mega-foot-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .55rem; border-radius: 10px; text-decoration: none; font-size: .82rem; color: var(--pk-blue-dark); font-weight: 600; transition: background .15s; } .pk-mega-foot-link:hover { background: rgba(26, 60, 110, 0.06); color: var(--pk-blue); } /* ── Zielgruppen-Hero (kompakter als Startseite, mit Eyebrow) ── */ .sol-hero { position: relative; overflow: hidden; padding: 8rem 0 4rem; background: radial-gradient(1100px 520px at 78% -10%, rgba(74,144,217,.10), transparent 60%), linear-gradient(180deg, #fbfcfe 0%, #fff 100%); } .sol-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; color: var(--pk-blue-dark); margin-bottom: 1.1rem; } .sol-hero-lead { font-size: 1.18rem; line-height: 1.6; color: #41506a; max-width: 560px; } .sol-hero-img { width: 100%; border-radius: 20px; object-fit: cover; aspect-ratio: 5/4; box-shadow: 0 28px 56px rgba(20,41,77,.18); } /* ── Pain → Lösung (Frage → Antwort, erzählerisch) ── */ .sol-pain-section { padding: 5rem 0; } .sol-pain-block { max-width: 880px; margin: 0 auto; } .sol-pain-item { position: relative; padding: 2.2rem 0; } .sol-pain-item + .sol-pain-item { border-top: 1px solid var(--pk-border); } .sol-pain-q { display: flex; align-items: flex-start; gap: .85rem; font-size: clamp(1.25rem, 2.4vw, 1.65rem); font-weight: 800; letter-spacing: -.01em; color: var(--pk-blue-dark); line-height: 1.25; margin-bottom: .9rem; } .sol-pain-q-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: #fff1f0; color: #e35d52; display: flex; align-items: center; justify-content: center; font-size: .95rem; margin-top: .15rem; } .sol-pain-a { display: flex; align-items: flex-start; gap: .85rem; padding-left: 0; font-size: 1.08rem; line-height: 1.65; color: var(--pk-muted); } .sol-pain-a-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--pk-accent-light); color: var(--pk-blue); display: flex; align-items: center; justify-content: center; font-size: .95rem; margin-top: .15rem; } .sol-pain-a strong { color: var(--pk-blue-dark); } /* ── Nutzen-Grid (zielgruppenspezifische Funktionen) ── */ .sol-benefits { padding: 5rem 0; background: #fafbfd; } .sol-benefit-card { background: #fff; border: 1px solid var(--pk-border); border-radius: 16px; padding: 1.7rem; height: 100%; transition: transform .18s, box-shadow .18s, border-color .18s; } .sol-benefit-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(26,60,110,.10); border-color: var(--pk-blue); } .sol-benefit-icon { width: 50px; height: 50px; border-radius: 13px; background: linear-gradient(135deg, var(--pk-blue), var(--pk-blue-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; } .sol-benefit-card h4 { font-size: 1.08rem; font-weight: 700; color: var(--pk-blue-dark); margin-bottom: .5rem; } .sol-benefit-card p { color: var(--pk-muted); margin: 0; line-height: 1.6; font-size: .96rem; } /* ── Responsive ── */ @media (max-width: 767.98px) { .pk-mega-menu { min-width: auto; width: 100%; } .pk-mega-grid { grid-template-columns: 1fr; } .sol-hero { padding: 6rem 0 3rem; } .sol-hero-img { margin-top: 2rem; } }