/* ============================================================ Enterprise Energie — eigene Design-Identität (Reskin-Layer) Lädt NACH /css/style.css und überschreibt die Volt-Gas-Tokens. Richtung: Premium-B2B "Trust & Authority" — Navy + Premium Gold, Typo Lexend / Source Sans 3. Bewusst klar abgegrenzt von volt-gas.de. Generiert mit ui-ux-pro-max-Skill + Magic Patterns als Vorlage. ============================================================ */ /* ── Fonts (Fallback, falls im fehlt) ── */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap'); /* ── 1. Design-Tokens überschreiben ──────────────────────── */ :root { --primary: #CA8A04; /* Premium Gold (statt Amber) */ --primary-dark: #A16207; /* Gold-Hover */ --primary-light: #FEF9C3; /* heller Gold-Tint (aktive Tabs etc.) */ --secondary: #0F172A; /* Navy */ --secondary-mid: #334155; /* Slate */ --text: #0F172A; --text-muted: #475569; --border: #E2E8F0; --bg: #F8FAFC; --radius: 12px; --radius-lg: 16px; --shadow: 0 4px 6px -1px rgba(15,23,42,.05), 0 10px 15px -3px rgba(15,23,42,.10); --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.10), 0 20px 25px -5px rgba(15,23,42,.12); } /* ── 2. Typografie ───────────────────────────────────────── */ body, button, input, select, textarea, .hero__sb-tab, .hero__sb-field input { font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif; } h1, h2, h3, h4, h5, h6, .hero__headline, .section__header h2, .logo span, .logo__slogan { font-family: 'Lexend', system-ui, sans-serif; letter-spacing: -0.01em; } /* ── 3. Zugänglichkeit: sichtbarer Gold-Fokusring ────────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary); border-radius: 6px; } /* ── 4. Header ───────────────────────────────────────────── */ .header { border-bottom: 1px solid var(--border); } .nav a:hover { color: var(--primary-dark); background: rgba(202,138,4,.10); } /* ── 5. Hero: ruhigeres, premium Navy (Gold-Akzente) ─────── */ .hero__bg { background: linear-gradient(160deg, #0B1120 0%, #0F172A 45%, #131c33 100%); } .hero__bg::after { background: radial-gradient(ellipse 70% 60% at 50% 18%, rgba(202,138,4,.14) 0%, transparent 60%), radial-gradient(ellipse 45% 45% at 82% 82%, rgba(202,138,4,.07) 0%, transparent 60%); } .hero__eyebrow { background: rgba(202,138,4,.14); color: #FCD34D; /* helleres Gold für Lesbarkeit auf Navy */ border: 1px solid rgba(202,138,4,.40); text-transform: uppercase; } /* Ping-Punkt im Eyebrow (ersetzt das ⚡-Emoji) */ .ee-ping { position: relative; display: inline-flex; width: 8px; height: 8px; margin-right: 2px; } .ee-ping::before, .ee-ping::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: #FCD34D; } .ee-ping::before { animation: eePing 1.6s cubic-bezier(0,0,.2,1) infinite; opacity: .75; } @keyframes eePing { 75%, 100% { transform: scale(2.2); opacity: 0; } } .hero__headline { font-weight: 800; letter-spacing: -0.025em; } .hero__slogan { color: #FCD34D; } .hero__searchbar { border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(2,6,23,.45); } .hero__sb-btn:hover { background: var(--primary-dark); } .hero__badge-item svg { color: var(--primary); } /* ── 6. Buttons: Gold-Schatten statt Amber ──────────────── */ .btn--primary { color: #fff; } /* Gold + weisser Text = besserer Kontrast */ .btn--primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(202,138,4,.35); } .btn--ghost:hover { border-color: var(--primary); color: var(--primary-dark); } .hero__sb-btn { color: #fff; } /* ── 7. Karten: einheitliche Premium-Tiefe & Radius ─────── */ .card, .v2-why-bento__item, .v2-how-flow__step, .onsite-usp, .story-card, .faq__item, .three-ways__card, .trust-logo { border-radius: var(--radius-lg); } /* ── 8. Footer: Navy statt Volt-Gas-Grau ────────────────── */ .footer { background: var(--secondary); } /* ── 9. Eyebrow-Labels (Sektionen) in Gold ──────────────── */ .section__eyebrow { color: var(--primary-dark); } .section__eyebrow--light { color: #FCD34D; } /* =========================================================== ee.css v2 — Glassmorphism, Animationen, klare Abgrenzung Ziel: weg vom Volt-Gas-Look (eigener Hero, Glas, Motion). =========================================================== */ /* ── A. Hero: eigenständiger animierter Aurora-Hintergrund ── Volt-Gas-Deko (Foto, Partikel, Szenen) ausblenden, die EE geerbt hat. */ .hero__photo, .hero__particles, .hero__particle, .hero__scene, .hero__scene--left, .hero__scene--right { display: none !important; } .hero { isolation: isolate; } .hero__bg { background-color: #0B1120; background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px), /* Tech-Punktraster */ radial-gradient(60% 50% at 16% 18%, rgba(202,138,4,.22), transparent 60%), /* Gold-Licht links */ radial-gradient(50% 45% at 86% 12%, rgba(56,189,248,.10), transparent 60%), /* kühler Akzent */ linear-gradient(160deg, #0B1120 0%, #0F172A 55%, #131c33 100%); background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100%; } .hero__bg::after { /* langsam wandernde Aurora */ content: ''; position: absolute; inset: -25%; background: radial-gradient(38% 38% at 30% 30%, rgba(252,211,77,.16), transparent 60%), radial-gradient(34% 34% at 74% 62%, rgba(99,102,241,.12), transparent 60%); filter: blur(24px); animation: eeAurora 20s ease-in-out infinite alternate; } @keyframes eeAurora { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 100% { transform: translate3d(5%, 3%, 0) scale(1.14); } } /* ── B. Glassmorphism ──────────────────────────────────── */ .header { /* frosted glass statt opak weiß */ background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(15,23,42,.08); } .hero__searchbar { /* heller Glas-Look, bleibt lesbar */ background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 24px 60px rgba(2,6,23,.5), inset 0 1px 0 rgba(255,255,255,.8); } .hero__badges { gap: .75rem; } .hero__badge-item { /* Trust-Chips als Glas-Pillen */ background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.16); padding: .5rem .95rem; border-radius: 9999px; color: rgba(255,255,255,.88); } /* Stat-Tiles liegen auf dunkler Sektion → echtes Glas wirkt hier am besten */ .stat-tile { background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); } .stat-tile--accent { border-color: rgba(202,138,4,.45); background: rgba(202,138,4,.10); } /* ── C. Karten: Tiefe, Hover-Lift, Lichtkante ──────────── */ .v2-bento-card, .onsite-usp__card, .v2-how-flow__step, .v2-why-bento__small, .story-fact, .faq__item, .trust-logo { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .v2-bento-card:hover, .onsite-usp__card:hover, .v2-how-flow__step:hover, .v2-why-bento__small:hover, .trust-logo:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* ── D. Buttons: Gold-Sheen-Sweep beim Hover ───────────── */ .btn--primary, .hero__sb-btn { position: relative; overflow: hidden; } .btn--primary::after, .hero__sb-btn::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); transition: left .6s ease; pointer-events: none; } .btn--primary:hover::after, .hero__sb-btn:hover::after { left: 140%; } /* ── E. Scroll-Reveal (per JS aktiviert) ───────────────── */ .ee-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .ee-reveal.ee-in { opacity: 1; transform: none; } /* ── F. Reduced-Motion respektieren ────────────────────── */ @media (prefers-reduced-motion: reduce) { .hero__bg::after { animation: none; } .ee-reveal { opacity: 1; transform: none; transition: none; } .btn--primary::after, .hero__sb-btn::after { display: none; } } /* =========================================================== ee.css v3 — Tiefere Sektions-Politur (Magic-Sprache) =========================================================== */ /* ── G1. Stats-Band: Zahlen waren navy auf navy (unsichtbar) ── → Gold + Lexend + tabellarische Ziffern; Labels hell; Icon gold. */ .stat-tile__number { color: #FCD34D !important; font-family: 'Lexend', sans-serif; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat-tile__label { color: #CBD5E1 !important; } .stat-tile__icon { background: rgba(202,138,4,.16) !important; color: #FCD34D !important; } .stat-tile--accent .stat-tile__icon { background: rgba(202,138,4,.24) !important; } /* ── G2. Volt-Gas-Amber-Reste → Gold (sichtbare Flächen) ── */ .section__eyebrow, .v2-eyebrow, .v2-why-bento__pill, .v2-why-bento__small-icon, .v2-bento-card__icon { background-color: rgba(202,138,4,.12) !important; border-color: rgba(202,138,4,.30) !important; } .section__eyebrow, .v2-eyebrow { color: var(--primary-dark) !important; } /* ── G3. „Drei Wege"-Bento: VG-Foto → Navy/Gold-Verlauf ──── */ .v2-bento-card__visual { background-image: radial-gradient(120% 100% at 80% 0%, rgba(202,138,4,.22), transparent 55%), linear-gradient(150deg, #18243E 0%, #0F172A 100%) !important; } .v2-bento-card__overlay { background: linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(15,23,42,.78) 100%) !important; } .v2-bento-card { border-radius: var(--radius-lg); } .v2-bento-card:hover .v2-bento-card__icon { color: var(--primary); } /* ── G4. Icon-Tiles vereinheitlichen (Magic: helle Kachel) ── */ .onsite-usp__icon { display: inline-flex; align-items: center; justify-content: center; background: rgba(202,138,4,.12); color: var(--primary-dark); border: 1px solid rgba(202,138,4,.30); border-radius: 14px; } .onsite-usp__icon svg { width: 26px; height: 26px; } .v2-why-bento__small-icon svg, .v2-bento-card__icon svg { width: 22px; height: 22px; } /* ── G5. FAQ: weiße Karten, Gold-Fokus/Chevron ──────────── */ .v2-faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; } .v2-faq-item:hover { border-color: #CBD5E1; box-shadow: var(--shadow); } .v2-faq-q { color: var(--secondary); font-family: 'Lexend', sans-serif; font-weight: 600; } .v2-faq-chev { color: var(--primary-dark) !important; } /* ── G6. Einheitlicher Karten-Radius ────────────────────── */ .onsite-usp__card, .v2-why-bento__small, .v2-how-flow__step, .story-card { border-radius: var(--radius-lg); } /* ── G7. Wizard-Icon-Container: SVG statt Emoji einpassen ── */ .modal__icon svg, .savings-prompt__icon svg, .tariff-lead-capture__icon svg, .reservation-banner__icon svg, .payment-method-card__icon svg, .ep-quick-drop__icon svg, .ep-quick-error__icon svg { width: 1em; height: 1em; display: block; } .payment-method-card__icon svg { color: var(--primary-dark); } .ep-quick-error__icon svg { color: var(--danger, #E53935); } /* ── G8. Beispielrechnung-Karten (ehem. Testimonials) ───── */ .v2-voice-edit__tag { display: inline-block; margin-bottom: .8rem; padding: .25rem .7rem; border-radius: 9999px; background: rgba(202,138,4,.12); border: 1px solid rgba(202,138,4,.30); color: var(--primary-dark); font-family: 'Lexend', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .v2-voice-edit blockquote { font-style: normal; } /* Beispiel-Text, kein Zitat-Look */ /* =========================================================== ee.css v6 — DARK GLASS THEME Durchgehend dunkles, glasiges, animiertes Erlebnis. Volt-Gas ist hell → EE wird dunkel = sofort unverkennbar anders. =========================================================== */ :root { --gold: #F2C14E; /* helleres Gold, klar weg von Amber, pop auf dunkel */ --gold-deep: #CA8A04; --ink: #0A0E1C; --glass: rgba(255,255,255,.055); --glass-bd: rgba(255,255,255,.12); --txt: #D7DEEC; --txt-bright: #F4F7FC; --txt-mut: #93A0B8; } /* ── Animierter Mesh-Hintergrund über die ganze Seite ──── */ html { background: var(--ink); } body { background: transparent; color: var(--txt); position: relative; } body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(48% 38% at 16% 12%, rgba(242,193,78,.20), transparent 60%), radial-gradient(44% 38% at 86% 16%, rgba(56,120,235,.18), transparent 60%), radial-gradient(55% 50% at 74% 88%, rgba(242,193,78,.12), transparent 60%), radial-gradient(50% 50% at 22% 82%, rgba(56,189,248,.12), transparent 60%), linear-gradient(160deg, #070B16 0%, #0A0E1C 50%, #0A1428 100%); background-size: 180% 180%; animation: eeMesh 26s ease-in-out infinite alternate; } @keyframes eeMesh { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 26px 26px; } /* ── Sektionen transparent → Mesh scheint durch ─────────── */ .section, .section--calculator, .section--dark, .stats-tiles, .provider-strip, .section--story, .trust-strip, .onsite-usp, .section--v2-doors-ed, .section--v2-why-ed, .section--v2-how-ed, .section--v2-voices-ed, .section--v2-faq-ed, .section--v2-blog-ed, .section--v2-voices-ed { background: transparent !important; } /* ── Schrift hell ───────────────────────────────────────── */ body, p, li, label, cite, figcaption, .section__header p, .calc-step__sub, .story-grid__lead, .footer, .footer a, .nav a, .provider-strip__intro, .hero__sub, .hero__badge-item, .stat-tile__label, .v2-faq-q { color: var(--txt); } h1, h2, h3, h4, h5, h6, .section__header h2, .hero__headline, .story-fact__num, .stat-tile__number, .v2-trust-edit__big { color: var(--txt-bright); } .text-muted, .section__header p, .calc-step__sub, .footer__claim, .v2-voice-edit cite, .stat-tile__label { color: var(--txt-mut) !important; } /* ── Glas: alle weißen Flächen → frosted dark glass ─────── */ .calculator, .v2-bento-card, .stat-tile, .v2-faq-item, .v2-voice-edit, .onsite-usp__card, .trust-logo, .v2-blog-tile, .v2-why-bento__small, .v2-how-flow__step, .card, .story-grid__media, .reservation-banner, .tariff-lead-capture, .savings-prompt, .v2-trust-edit__item, .v2-why-bento__feature { background: var(--glass) !important; -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--glass-bd) !important; color: var(--txt) !important; box-shadow: 0 12px 34px rgba(0,0,0,.38) !important; } .calculator *, .v2-bento-card *, .v2-faq-item *, .onsite-usp__card * { color: inherit; } /* Header als dunkles Glas (war weiß) */ .header { background: rgba(10,14,28,.62) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--glass-bd) !important; } .nav a:hover { color: var(--gold) !important; background: rgba(242,193,78,.10) !important; } /* ── Hero: Searchbar als helles Glas (Fokus-Insel) ──────── */ .hero__searchbar { background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.18) !important; } .hero__eyebrow { color: var(--gold) !important; } .hero__headline-accent, .hero__slogan { color: var(--gold) !important; } /* ── Eingaben / Felder auf Glas lesbar ──────────────────── */ .field-input, .hero__sb-field input, input[type=text], input[type=number], input[type=search], input[type=email], input[type=tel], select, textarea, .richtwert-btn { background: rgba(255,255,255,.06) !important; border: 1px solid var(--glass-bd) !important; color: var(--txt-bright) !important; } .field-input::placeholder, .hero__sb-field input::placeholder, input::placeholder { color: #7E8BA6 !important; } .field-input:focus, input:focus, select:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(242,193,78,.22) !important; } .hero__sb-field label, .field-label, label { color: var(--txt-mut); } /* ── Kalkulator-Bausteine ───────────────────────────────── */ .tile, .calc-step, .calc-progress, .gewerbe-fixed-note, .payment-method-card, .signature-pad, .summary-card, .tariff-card { background: rgba(255,255,255,.05) !important; border: 1px solid var(--glass-bd) !important; color: var(--txt) !important; } .tile.active, .hero__sb-tab.active { background: rgba(242,193,78,.16) !important; border-color: var(--gold) !important; color: var(--txt-bright) !important; } .gewerbe-fixed-note strong, .gewerbe-fixed-note { color: var(--txt) !important; } /* ── Gold-Akzente / Buttons (gefülltes Gold poppt auf dunkel) ── */ :root { --primary: var(--gold); --primary-dark: #E0A82E; --secondary: #0A0E1C; } .btn--primary, .hero__sb-btn { background: var(--gold) !important; color: #1A1206 !important; } .btn--primary:hover, .hero__sb-btn:hover { background: #E0A82E !important; box-shadow: 0 8px 24px rgba(242,193,78,.35) !important; } .btn--ghost { color: var(--txt) !important; border-color: var(--glass-bd) !important; } .btn--ghost:hover { color: var(--gold) !important; border-color: var(--gold) !important; } .section__eyebrow, .v2-eyebrow, .v2-eyebrow--light { color: var(--gold) !important; background: rgba(242,193,78,.12) !important; border-color: rgba(242,193,78,.30) !important; } .stat-tile__number, .v2-trust-edit__big { color: var(--gold) !important; } .stat-tile__icon, .v2-bento-card__icon, .v2-why-bento__small-icon, .onsite-usp__icon { background: rgba(242,193,78,.16) !important; color: var(--gold) !important; border-color: rgba(242,193,78,.28) !important; } .story-fact__num { color: var(--gold) !important; } /* ── Footer dunkel-glas ─────────────────────────────────── */ .footer { background: rgba(8,11,22,.55) !important; border-top: 1px solid var(--glass-bd); } .footer a:hover { color: var(--gold) !important; } .logo__slogan, .footer__slogan { color: var(--txt-mut) !important; } /* ── Provider-Pills als kleine Glas-Chips ───────────────── */ .provider-pill { background: rgba(255,255,255,.06) !important; border: 1px solid var(--glass-bd) !important; color: var(--txt) !important; } /* ── Karten-Hover: anheben + Gold-Kante ─────────────────── */ .v2-bento-card:hover, .stat-tile:hover, .v2-voice-edit:hover, .v2-blog-tile:hover, .onsite-usp__card:hover, .trust-logo:hover, .v2-faq-item:hover { transform: translateY(-5px); border-color: rgba(242,193,78,.45) !important; box-shadow: 0 18px 44px rgba(0,0,0,.5) !important; } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } }