/* ========================================================================== CLAUDE: Modernization Styles - Hero, Trust-Bar, Sticky CTA CLAUDE: Teil der Modernisierungsphase 1 CLAUDE: Anpassen: Farben aus base.css CSS Variables verwenden ========================================================================== */ /* ========================================================================== CLAUDE: Hero-Section Verbesserungen ========================================================================== */ /* CLAUDE: Kicker über der Headline - zeigt Erfahrung */ .pvm-hero-kicker { font-size: 0.75rem; /* CLAUDE: OPTIMIERT von 0.875rem - kompakter */ text-transform: uppercase; /* CLAUDE: Großbuchstaben */ letter-spacing: 2px; /* CLAUDE: Gesperrt für Lesbarkeit */ color: var(--pvm-primary, #8C0AB7); /* CLAUDE: Primärfarbe Lila */ margin-bottom: 0.5rem; /* CLAUDE: OPTIMIERT von 0.75rem - kompakter */ font-weight: 500; /* CLAUDE: Medium Weight */ opacity: 0.9; /* CLAUDE: Leicht dezent */ } /* CLAUDE: Kürzerer Hero-Text unter der Headline */ .pvm-hero-text { font-size: 1.1rem; /* CLAUDE: OPTIMIERT von 1.2rem - kompakter */ max-width: 550px; /* CLAUDE: Begrenzte Lesebreite */ color: var(--pvm-text-muted, #666666); /* CLAUDE: Grau für Kontrast */ margin-bottom: 1rem; /* CLAUDE: OPTIMIERT von 1.5rem - kompakter */ line-height: 1.5; /* CLAUDE: OPTIMIERT von 1.6 - kompakter */ } /* ========================================================================== CLAUDE: CTA-Buttons - Klare visuelle Hierarchie ========================================================================== */ /* CLAUDE: Primärer CTA - Auffällig und einladend */ .pvm-cta-primary { padding: 1rem 2rem !important; /* CLAUDE: Größer als Standard */ font-size: 1.05rem !important; /* CLAUDE: Größere Schrift */ background: var(--pvm-gradient, linear-gradient(36deg, #8C0AB7 0%, #4C41E0 100%)) !important; border: none !important; /* CLAUDE: Kein Border */ box-shadow: 0 4px 15px rgba(140, 10, 183, 0.3); /* CLAUDE: Subtiler Glow */ transition: all 0.3s ease; /* CLAUDE: Smooth Transitions */ font-weight: 600; /* CLAUDE: Semi-Bold */ } .pvm-cta-primary:hover { transform: translateY(-2px); /* CLAUDE: Leichter Lift-Effekt */ box-shadow: 0 6px 20px rgba(140, 10, 183, 0.4); /* CLAUDE: Stärkerer Glow */ color: white !important; /* CLAUDE: Weiß bleibt */ } /* CLAUDE: Sekundärer CTA - Dezent aber sichtbar */ .pvm-cta-secondary { padding: 1rem 2rem !important; /* CLAUDE: Gleiche Größe wie Primary */ font-size: 1rem !important; /* CLAUDE: Etwas kleiner */ background: transparent !important; /* CLAUDE: Durchsichtig */ border: 2px solid var(--pvm-primary, #8C0AB7) !important; /* CLAUDE: Outline */ color: var(--pvm-primary, #8C0AB7) !important; /* CLAUDE: Lila Text */ transition: all 0.3s ease; /* CLAUDE: Smooth */ } .pvm-cta-secondary:hover { background: var(--pvm-primary, #8C0AB7) !important; /* CLAUDE: Gefüllt bei Hover */ color: white !important; /* CLAUDE: Weißer Text */ transform: translateY(-1px); /* CLAUDE: Leichter Lift */ } /* ========================================================================== CLAUDE: Trust-Bar - Zahlenbasierte Vertrauensindikatoren ========================================================================== */ .pvm-trust-bar { display: flex; /* CLAUDE: Flexbox für Layout */ flex-wrap: wrap; /* CLAUDE: Umbrechen auf Mobile */ gap: 1.5rem; /* CLAUDE: OPTIMIERT von 2.5rem - kompakter */ margin-top: 1.5rem; /* CLAUDE: OPTIMIERT von 3rem - kompakter */ padding-top: 1rem; /* CLAUDE: OPTIMIERT von 2rem - kompakter */ border-top: 1px solid rgba(0, 0, 0, 0.08); /* CLAUDE: Dezente Trennlinie */ } .pvm-trust-item { text-align: left; /* CLAUDE: Links ausgerichtet */ min-width: 80px; /* CLAUDE: OPTIMIERT von 100px - kompakter */ } .pvm-trust-number { display: block; /* CLAUDE: Eigene Zeile */ font-size: 1.5rem; /* CLAUDE: OPTIMIERT von 1.75rem - kompakter */ font-weight: 700; /* CLAUDE: Bold */ color: var(--pvm-secondary, #4C41E0); /* CLAUDE: Sekundärfarbe Blau */ line-height: 1.1; /* CLAUDE: Kompakt */ margin-bottom: 0.15rem; /* CLAUDE: OPTIMIERT - weniger Abstand */ } .pvm-trust-label { font-size: 0.7rem; /* CLAUDE: OPTIMIERT von 0.8rem - kompakter */ color: var(--pvm-text-muted, #666666); /* CLAUDE: Grau */ text-transform: uppercase; /* CLAUDE: Großbuchstaben */ letter-spacing: 0.5px; /* CLAUDE: Leicht gesperrt */ font-weight: 500; /* CLAUDE: Medium */ } /* ========================================================================== CLAUDE: Sticky CTA - Fixierter Button unten rechts ========================================================================== */ .pvm-sticky-cta { position: fixed; /* CLAUDE: Fixiert im Viewport */ bottom: 2rem; /* CLAUDE: Abstand vom unteren Rand */ right: 6rem; /* CLAUDE: Abstand vom rechten Rand - links vom Back-to-Top */ display: flex; /* CLAUDE: Flexbox für Icon + Text */ align-items: center; /* CLAUDE: Vertikal zentriert */ gap: 0.5rem; /* CLAUDE: Abstand zwischen Icon und Text */ padding: 0.875rem 1.5rem; /* CLAUDE: Innenabstand */ background: var(--pvm-gradient, linear-gradient(36deg, #8C0AB7 0%, #4C41E0 100%)); color: white; /* CLAUDE: Weiße Schrift */ border-radius: 50px; /* CLAUDE: Pill-Shape */ box-shadow: 0 4px 20px rgba(140, 10, 183, 0.35); /* CLAUDE: Auffälliger Glow */ font-weight: 600; /* CLAUDE: Semi-Bold */ font-size: 0.95rem; /* CLAUDE: Lesbare Schriftgröße */ text-decoration: none; /* CLAUDE: Kein Underline */ z-index: 9999; /* CLAUDE: Über allen anderen Elementen */ opacity: 0; /* CLAUDE: Initial versteckt */ visibility: hidden; /* CLAUDE: Initial versteckt */ transform: translateY(20px); /* CLAUDE: Initial nach unten versetzt */ transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, visibility 0.3s; } /* CLAUDE: Sichtbarer Zustand - wird via JavaScript aktiviert */ .pvm-sticky-cta.is-visible { opacity: 1; /* CLAUDE: Voll sichtbar */ visibility: visible; /* CLAUDE: Sichtbar */ transform: translateY(0); /* CLAUDE: Normale Position */ } .pvm-sticky-cta:hover { box-shadow: 0 6px 25px rgba(140, 10, 183, 0.5); /* CLAUDE: Stärkerer Glow */ transform: translateY(-2px); /* CLAUDE: Leichter Lift */ color: white; /* CLAUDE: Weiß bleibt */ } /* CLAUDE: Icon im Sticky CTA */ .pvm-sticky-cta svg { flex-shrink: 0; /* CLAUDE: Icon behält Größe */ } /* ========================================================================== CLAUDE: Sticky CTA - Kontrast-Optimierung für Footer (Option A+B) CLAUDE: Löst Sichtbarkeitsproblem wenn Button über lila Footer liegt ========================================================================== */ /* CLAUDE: Basis-Verbesserung - subtiler Border + erweiterte Transitions */ .pvm-sticky-cta { border: 2px solid rgba(255, 255, 255, 0.15); /* CLAUDE: Dezenter weißer Border */ transition: opacity 0.3s ease, /* CLAUDE: Ein-/Ausblenden */ transform 0.3s ease, /* CLAUDE: Lift-Animation */ box-shadow 0.3s ease, /* CLAUDE: Schatten-Animation */ visibility 0.3s, /* CLAUDE: Sichtbarkeit */ background 0.3s ease, /* CLAUDE: Farbwechsel smooth */ color 0.3s ease, /* CLAUDE: Textfarbe smooth */ border-color 0.3s ease; /* CLAUDE: Border smooth */ } /* CLAUDE: Invertierte Farben wenn über lila Footer - wird via JS aktiviert */ .pvm-sticky-cta.over-footer { background: #ffffff !important; /* CLAUDE: Weißer Hintergrund */ color: var(--pvm-primary) !important; /* CLAUDE: Lila Text */ border-color: rgba(140, 10, 183, 0.2); /* CLAUDE: Dezenter lila Border */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), /* CLAUDE: Weicher Schatten */ 0 0 0 2px rgba(140, 10, 183, 0.1); /* CLAUDE: Lila Glow */ } /* CLAUDE: SVG-Icon Farbe anpassen wenn über Footer */ .pvm-sticky-cta.over-footer svg { stroke: var(--pvm-primary); /* CLAUDE: Lila Stroke für Icon */ } /* CLAUDE: Hover-State wenn über Footer */ .pvm-sticky-cta.over-footer:hover { background: #f5f5f5 !important; /* CLAUDE: Leicht grau bei Hover */ color: var(--pvm-primary) !important; /* CLAUDE: Lila bleibt */ transform: translateY(-2px); /* CLAUDE: Lift-Effekt */ box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2), /* CLAUDE: Stärkerer Schatten */ 0 0 0 3px rgba(140, 10, 183, 0.15); /* CLAUDE: Stärkerer Glow */ } /* CLAUDE: Focus-State wenn über Footer (Barrierefreiheit) */ .pvm-sticky-cta.over-footer:focus { outline: 2px solid var(--pvm-primary); /* CLAUDE: Lila Focus Ring */ outline-offset: 2px; /* CLAUDE: Abstand */ } /* ========================================================================== CLAUDE: Mobile Anpassungen (Tablet und kleiner) ========================================================================== */ @media (max-width: 992px) { .pvm-trust-bar { gap: 2rem; /* CLAUDE: Weniger Abstand */ } .pvm-trust-number { font-size: 1.5rem; /* CLAUDE: Etwas kleiner */ } } @media (max-width: 768px) { /* CLAUDE: Hero-Kicker auf Mobile */ .pvm-hero-kicker { font-size: 0.75rem; /* CLAUDE: Kleiner */ letter-spacing: 1.5px; /* CLAUDE: Weniger gesperrt */ } /* CLAUDE: Hero-Text auf Mobile */ .pvm-hero-text { font-size: 1.05rem; /* CLAUDE: Etwas kleiner */ } /* CLAUDE: Trust-Bar auf Mobile - 2x2 Grid */ .pvm-trust-bar { justify-content: space-between; /* CLAUDE: Verteilt */ gap: 1.25rem; /* CLAUDE: Weniger Abstand */ margin-top: 2rem; /* CLAUDE: Weniger Abstand */ padding-top: 1.5rem; /* CLAUDE: Weniger Padding */ } .pvm-trust-item { width: 45%; /* CLAUDE: 2 Items pro Reihe */ text-align: center; /* CLAUDE: Zentriert auf Mobile */ } .pvm-trust-number { font-size: 1.4rem; /* CLAUDE: Kleiner auf Mobile */ } .pvm-trust-label { font-size: 0.7rem; /* CLAUDE: Kleiner */ } /* CLAUDE: Sticky CTA auf Mobile - kompakter */ .pvm-sticky-cta { bottom: 1rem; /* CLAUDE: Weniger Abstand */ right: 4.5rem; /* CLAUDE: Links vom Back-to-Top */ padding: 0.75rem 1rem; /* CLAUDE: Kompakter */ font-size: 0.85rem; /* CLAUDE: Kleinere Schrift */ } /* CLAUDE: Nur Icon auf sehr kleinen Screens */ .pvm-sticky-cta span { display: none; /* CLAUDE: Text ausblenden */ } .pvm-sticky-cta svg { width: 22px; /* CLAUDE: Etwas größeres Icon */ height: 22px; } } /* CLAUDE: Sehr kleine Screens */ @media (max-width: 400px) { .pvm-trust-item { width: 48%; /* CLAUDE: Fast volle Breite */ } } /* ========================================================================== CLAUDE: Animation für Trust-Bar Zahlen (optional) ========================================================================== */ /* CLAUDE: Einblend-Animation beim Laden */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .pvm-trust-item { animation: fadeInUp 0.5s ease forwards; } /* CLAUDE: Verzögerte Animation für jedes Item */ .pvm-trust-item:nth-child(1) { animation-delay: 0.1s; } .pvm-trust-item:nth-child(2) { animation-delay: 0.2s; } .pvm-trust-item:nth-child(3) { animation-delay: 0.3s; } .pvm-trust-item:nth-child(4) { animation-delay: 0.4s; } /* ========================================================================== CLAUDE: Dark Mode Support CLAUDE: Dual-Selector Pattern - Manueller Toggle + System-Präferenz ========================================================================== */ /* CLAUDE: Manueller Toggle */ html[data-theme="dark"] .pvm-hero-kicker { opacity: 1; } html[data-theme="dark"] .pvm-hero-text { color: var(--pvm-dark-text-muted, #a1a1aa); } html[data-theme="dark"] .pvm-trust-bar { border-top-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .pvm-trust-label { color: var(--pvm-dark-text-muted, #a1a1aa); } /* CLAUDE: System-Präferenz - Fallback */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pvm-hero-kicker { opacity: 1; } html:not([data-theme="light"]) .pvm-hero-text { color: var(--pvm-dark-text-muted, #a1a1aa); } html:not([data-theme="light"]) .pvm-trust-bar { border-top-color: rgba(255, 255, 255, 0.1); } html:not([data-theme="light"]) .pvm-trust-label { color: var(--pvm-dark-text-muted, #a1a1aa); } }