/* Enerlytix — Website-Styles · Marke: Navy + Petrol · Schrift: Sora (lokal) */ /* Theming über data-theme auf : Standard = hell, [data-theme="dark"] = dunkel */ :root { --bg: #f4f3f0; --surface: #ffffff; --surface-2: #f4f3f0; --ink: #1d2733; /* Überschriften */ --text: #222b36; --muted: rgba(34,43,54,0.60); --hair: rgba(29,39,51,0.10); --hair-dash: rgba(29,39,51,0.14); --petrol: #2f8f86; --petrol-dp: #267a72; --header-bg: rgba(244,243,240,0.82); /* Kopfleiste = invertiert (im Hellmodus dunkel) */ --hd-bg: rgba(20,28,37,0.90); --hd-fg: #eef1f2; --hd-hover: rgba(255,255,255,0.10); --hd-border: rgba(238,241,242,0.10); --hd-cta-bg: #3aa39a; --hd-cta-fg: #06231f; --hd-toggle-bg: rgba(255,255,255,0.08); --hd-toggle-border: rgba(238,241,242,0.20); --btn-bg: #1d2733; --btn-fg: #ffffff; --btn-bg-h: #267a72; --btn-ghost-bg:#ffffff; --hero-glow: rgba(47,143,134,0.16); --hero-ring: rgba(47,143,134,0.16); --contact-bg: radial-gradient(130% 130% at 80% 0%, #27323f, #1d2733 65%); --contact-fg: #ffffff; --contact-muted: rgba(238,241,242,0.66); --contact-border: transparent; --radius: 14px; --maxw: 1120px; } [data-theme="dark"] { --bg: #141c25; --surface: #1e2935; --surface-2: #232f3c; --ink: #eef1f2; --text: #c9d3da; --muted: rgba(201,211,218,0.62); --hair: rgba(238,241,242,0.12); --hair-dash: rgba(238,241,242,0.16); --petrol: #3aa39a; --petrol-dp: #4fb4aa; --header-bg: rgba(20,28,37,0.82); /* Kopfleiste = invertiert (im Dunkelmodus hell) */ --hd-bg: rgba(244,243,240,0.90); --hd-fg: #1d2733; --hd-hover: rgba(29,39,51,0.06); --hd-border: rgba(29,39,51,0.10); --hd-cta-bg: #1d2733; --hd-cta-fg: #ffffff; --hd-toggle-bg: #ffffff; --hd-toggle-border: rgba(29,39,51,0.12); --btn-bg: #3aa39a; --btn-fg: #06231f; --btn-bg-h: #4fb4aa; --btn-ghost-bg:#1e2935; --hero-glow: rgba(58,163,154,0.22); --hero-ring: rgba(58,163,154,0.24); --contact-bg: linear-gradient(135deg, #232f3c, #1b2531); --contact-fg: #eef1f2; --contact-muted: rgba(201,211,218,0.66); --contact-border: rgba(58,163,154,0.30); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s ease, color .3s ease; } a { color: inherit; } img { display: block; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--petrol-dp); } /* ── Logo swap (light/dark variants toggled by theme) ── */ .logo-dark { display: none; } [data-theme="dark"] .logo-light { display: none; } [data-theme="dark"] .logo-dark { display: block; } /* Kopfleiste ist invertiert → Logo dort gegenläufig zum Seiten-Theme */ .site-header .logo-light { display: none; } .site-header .logo-dark { display: block; } [data-theme="dark"] .site-header .logo-light { display: block; } [data-theme="dark"] .site-header .logo-dark { display: none; } /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); background: var(--hd-bg); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--hd-border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 78px; } .site-header .brand { display: flex; align-items: center; } .site-header .brand img { height: 30px; width: auto; } .site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .site-nav a { text-decoration: none; color: var(--hd-fg); font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 8px; transition: background .15s, color .15s, opacity .15s; } .site-nav a:hover { background: var(--hd-hover); } .site-nav a.cta { background: var(--hd-cta-bg); color: var(--hd-cta-fg); font-weight: 600; } .site-nav a.cta:hover { background: var(--hd-cta-bg); filter: brightness(1.08); } /* ── Theme toggle ── */ .theme-toggle { margin-left: 6px; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--hd-toggle-border); background: var(--hd-toggle-bg); color: var(--hd-fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, border-color .15s, transform .12s; } .theme-toggle:hover { border-color: var(--petrol); transform: translateY(-1px); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .i-moon { display: block; } .theme-toggle .i-sun { display: none; } [data-theme="dark"] .theme-toggle .i-moon { display: none; } [data-theme="dark"] .theme-toggle .i-sun { display: block; } /* ── Footer ── */ .site-footer { border-top: 1px solid var(--hair); margin-top: 8px; } .site-footer .container { padding-top: 36px; padding-bottom: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .site-footer .f-left { display: flex; align-items: center; gap: 14px; } .site-footer .f-left img { height: 26px; } .site-footer .f-meta { color: var(--muted); font-size: 13.5px; } .site-footer nav { display: flex; gap: 4px; } .site-footer nav a { text-decoration: none; color: var(--ink); font-weight: 500; font-size: 14px; padding: 6px 10px; border-radius: 7px; transition: background .15s; } .site-footer nav a:hover { background: rgba(127,127,127,0.10); } .site-footer .privacy-note { width: 100%; margin-top: 6px; color: var(--muted); font-size: 12.5px; border-top: 1px dashed var(--hair-dash); padding-top: 16px; } /* ── Legal pages ── */ .legal { padding: 48px 0 70px; } .legal .card { background: var(--surface); border: 1px solid var(--hair); border-radius: 22px; padding: 44px 48px; max-width: 860px; margin: 0 auto; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 50px rgba(0,0,0,.06); } .legal h1 { font-size: clamp(30px,4vw,40px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; line-height: 1.1; } .legal h2 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 34px 0 8px; } .legal p, .legal li { color: var(--text); } .legal a { color: var(--petrol-dp); font-weight: 600; text-decoration: none; } .legal a:hover { text-decoration: underline; } .legal .data { background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--radius); padding: 18px 20px; } .legal ul { padding-left: 22px; } .legal ul li { margin: 4px 0; } .legal .backnav { margin-top: 36px; border-top: 1px solid var(--hair); padding-top: 20px; display: flex; gap: 8px; } .legal .backnav a { font-weight: 500; padding: 7px 12px; border-radius: 8px; background: rgba(127,127,127,0.08); color: var(--ink); text-decoration: none; } .legal .backnav a:hover { background: rgba(127,127,127,0.14); text-decoration: none; } @media (max-width: 720px) { .site-header .container { height: auto; padding-top: 16px; padding-bottom: 16px; flex-direction: column; align-items: flex-start; } .site-nav { gap: 2px; } .site-nav a { padding: 7px 9px; font-size: 14px; } /* Impressum & Datenschutz stehen auf Mobil in der Fußleiste */ .site-nav .nav-legal { display: none; } .legal .card { padding: 30px 22px; border-radius: 18px; } .site-footer .container { flex-direction: column; align-items: flex-start; } }