:root[data-theme="light"] { /* Brand */ --brand: #0B3D91; /* Primary */ --brand-hover: #082D6B; --brand-pressed: #06214F; --brand-contrast: #FFFFFF; --accent: #FF8A00; --accent-low: #ff880040; --accent-hover: #D67400; --accent-pressed: #B86300; --accent-contrast: #0B1320; --secondary: #1AA6B7; --secondary-low: #1AA6B740; --secondary-hover: #158693; --secondary-pressed:#116D78; --secondary-contrast:#0B1320; /* Neutrals & Surfaces */ --bg: #F5F7FA; /* App Hintergrund */ --surface: #FFFFFF; /* Karten/Modals */ --surface-muted: #F1F5F9; --border: #E2E8F0; --shadow: 0 8px 24px rgba(2, 6, 23, 0.08); /* Text */ --text: #0B1320; --text-muted: #475569; --text-inverse: #F8FAFC; --link: var(--brand); --link-hover: var(--brand-hover); /* Inputs */ --input-bg: #FFFFFF; --input-border: #E5E7EB; --input-placeholder:#94A3B8; --focus-ring: #1AA6B7; --focus-ring-shadow: 0 0 0 3px rgba(26,166,183,0.35); /* Buttons (defaults) */ --btn-bg: var(--brand); --btn-fg: var(--brand-contrast); --btn-hover: var(--brand-hover); --btn-pressed: var(--brand-pressed); --btn-border: transparent; --btn-ghost-fg: var(--brand); --btn-ghost-hover: #EAF2FF; /* dezente Hoverfläche */ --btn-outline-fg: var(--brand); --btn-outline-bd: var(--brand); --btn-outline-hover-bg: #EEF2FF; --disabled-bg: #E5E7EB; --disabled-fg: #9CA3AF; --disabled-bd: #E5E7EB; /* Status (FG/BG für Badges, Alerts, Chips) */ --success: #2E7D32; --success-subtle: #B3E3B5; --warning: #F9A825; --warning-subtle: #FFF7DB; --danger: #D32F2F; --danger-subtle: #FCF1F1; --info: #2196F3; --info-subtle: #E8F3FF; /* Tables & Selection */ --table-row-hover: #F8FAFF; --selection: rgba(11, 61, 145, 0.15); /* Tooltip/Popover */ --tooltip-bg: #111827; --tooltip-fg: #F8FAFC; } :root{ /* Brand (für Dark etwas heller bei Hover) */ --brand: #0B3D91; --brand-hover: #0F51C0; /* +Lightness */ --brand-pressed: #115DDD; --brand-contrast: #FFFFFF; --accent: #FF8A00; --accent-low: #ff8800a1; --accent-hover: #FFA133; --accent-pressed: #FFAF52; --accent-contrast: #0B1320; --secondary: #1AA6B7; --secondary-low: #1AA6B7a1; --secondary-hover: #24CCE0; --secondary-pressed:#3FD2E4; --secondary-contrast:#051019; /* Neutrals & Surfaces */ --bg: #0F172A; --surface: #111827; --surface-muted: #1F2937; --border: #334155; --shadow: 0 10px 30px rgba(0,0,0,0.35); /* Text */ --text: #F8FAFC; --text-hover: #ffffff; --text-muted: #CBD5E1; --text-inverse: #0B1320; --link: #93C5FD; /* helleres Linkblau in Dark */ --link-hover: #BFDBFE; /* Inputs */ --input-bg: #0B1220; --input-border: #334155; --input-placeholder:#94A3B8; --focus-ring: #22D3EE; /* türkis Ring im Dark */ --focus-ring-shadow: 0 0 0 3px rgba(34,211,238,0.35); /* Buttons */ --btn-bg: var(--brand); --btn-fg: var(--brand-contrast); --btn-hover: var(--brand-hover); --btn-pressed: var(--brand-pressed); --btn-border: transparent; --btn-ghost-fg: #E5E7EB; --btn-ghost-hover: rgba(255,255,255,0.06); --btn-outline-fg: #E5E7EB; --btn-outline-bd: #93C5FD; --btn-outline-hover-bg: rgba(147,197,253,0.10); --disabled-bg: #1F2937; --disabled-fg: #9CA3AF; --disabled-bd: #1F2937; /* Status */ --success: #4CAF50; --success-subtle: #12351A; --warning: #FBBF24; --warning-subtle: #3A2B0C; --danger: #F87171; --danger-subtle: #3A1212; --info: #60A5FA; --info-subtle: #0B223D; /* Tables & Selection */ --table-row-hover: rgba(255,255,255,0.04); --selection: rgba(17, 93, 221, 0.25); /* Tooltip/Popover */ --tooltip-bg: #0B1220; --tooltip-fg: #E5E7EB; } :root { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } /* Deine :root[data-theme="dark"] Tokens hierhin übernehmen */ } *{ box-sizing: border-box; } body{ margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg); color: var(--text); } a{ text-decoration: none; color: inherit; } a:hover{ color: var(--text-hover); } /* HEADER START */ header{ position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(160%) blur(10px); background: linear-gradient(to bottom, rgba(4,7,14,.7), rgba(4,7,14,.35)); border-bottom: 1px solid #0f1b28; } .container{ width: min(1200px, 92vw); margin: 0 auto; } .nav{ display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; font-weight: 600; } .nav .left, .nav .right{ display: flex; align-items: center; gap: 1rem; } .nav .logo{ display: flex; align-items: center; } .nav .logo svg{ /*width: clamp(150px, 12vw, 195px);*/width: 170px; /*filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 5));*/ color: var(--text); } .nav ul{ list-style: none; display: flex; align-items: center; gap: 1.2rem; margin: 0; padding: 0; } .nav ul li{ display: list-item; text-align: match-parent; } /* LOGIN START */ main{ width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; } main .card__header{ padding: 1.25rem 1.25rem .75rem 1.25rem; } main .card__title{ margin: 0; font-size: 1.6rem; line-height: 1.2; } main .card__subtitle{ margin: .25rem 0 0; color: var(--text-muted); font-size: .95rem; } main .card__body{ padding: 1.25rem; } main .card__form{ display: grid; gap: 1rem; } main .field{ display: grid; gap: .4rem; } main label{ font-weight: 600; font-size: .95rem; } main .row{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; } main .actions{ display: grid; gap: .6rem; } main .input{ width: 100%; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: .6rem; padding: .7rem .9rem; outline: 0; transition: border-color .15s ease, box-shadow .15s ease, background .2s ease; } main .input:focus{ border-color: var(--focus-ring); box-shadow: var(--focus-ring-shadow); } main .fine{ font-size: .85rem; color: var(--text-muted); } main .input-wrap{ position: relative; } main .input--with-action{ padding-right: 2.6rem; } main .input-action{ position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; } main .checkbox{ display: inline-flex; align-items: center; gap: .5rem; } main .checkbox input{ width: 1.05rem; height: 1.05rem; } main .action{ display: grid; gap: .6rem; } main .card__loginbtn{ background: var(--brand); color: var(--brand-contrast); } main .card__footer{ padding: 1rem 1.25rem; background: var(--surface-muted); border-top: 1px solid var(--border); } main .card__footer .fine{ margin: 0; } main .card__footer a{ color: var(--link); } /* LOGIN END */ /* ========================= THEME TOKENS - Default: dark in :root - Light: :root[data-theme="light"] ========================= */ :root[data-theme="light"] { --brand:#0B3D91; --brand-hover:#082D6B; --brand-pressed:#06214F; --brand-contrast:#FFFFFF; --accent:#FF8A00; --accent-low:#ff880040; --accent-hover:#D67400; --accent-pressed:#B86300; --accent-contrast:#0B1320; --secondary:#1AA6B7; --secondary-low:#1AA6B740; --secondary-hover:#158693; --secondary-pressed:#116D78; --secondary-contrast:#0B1320; --bg:#F5F7FA; --surface:#FFFFFF; --surface-muted:#F1F5F9; --border:#E2E8F0; --shadow:0 8px 24px rgba(2,6,23,.08); --text:#0B1320; --text-muted:#475569; --text-inverse:#F8FAFC; --link:var(--brand); --link-hover:var(--brand-hover); --input-bg:#FFFFFF; --input-border:#E5E7EB; --input-placeholder:#94A3B8; --focus-ring:#1AA6B7; --focus-ring-shadow:0 0 0 3px rgba(26,166,183,.35); --btn-bg:var(--brand); --btn-fg:var(--brand-contrast); --btn-hover:var(--brand-hover); --btn-pressed:var(--brand-pressed); --btn-border:transparent; --btn-ghost-fg:var(--brand); --btn-ghost-hover:#EAF2FF; --btn-outline-fg:var(--brand); --btn-outline-bd:var(--brand); --btn-outline-hover-bg:#EEF2FF; --disabled-bg:#E5E7EB; --disabled-fg:#9CA3AF; --disabled-bd:#E5E7EB; --success:#2E7D32; --success-subtle:#B3E3B5; --warning:#F9A825; --warning-subtle:#FFF7DB; --danger:#D32F2F; --danger-subtle:#FCF1F1; --info:#2196F3; --info-subtle:#E8F3FF; --table-row-hover:#F8FAFF; --selection:rgba(11,61,145,.15); --tooltip-bg:#111827; --tooltip-fg:#F8FAFC; } :root { /* Dark (default) */ --brand:#0B3D91; --brand-hover:#0F51C0; --brand-pressed:#115DDD; --brand-contrast:#FFFFFF; --accent:#FF8A00; --accent-low:#ff8800a1; --accent-hover:#FFA133; --accent-pressed:#FFAF52; --accent-contrast:#0B1320; --secondary:#1AA6B7; --secondary-low:#1AA6B7a1; --secondary-hover:#24CCE0; --secondary-pressed:#3FD2E4; --secondary-contrast:#051019; --bg:#0F172A; --surface:#111827; --surface-muted:#1F2937; --border:#334155; --shadow:0 10px 30px rgba(0,0,0,.35); --text:#F8FAFC; --text-hover:#FFFFFF; --text-muted:#CBD5E1; --text-inverse:#0B1320; --link:#93C5FD; --link-hover:#BFDBFE; --input-bg:#0B1220; --input-border:#334155; --input-placeholder:#94A3B8; --focus-ring:#22D3EE; --focus-ring-shadow:0 0 0 3px rgba(34,211,238,.35); --btn-bg:var(--brand); --btn-fg:var(--brand-contrast); --btn-hover:var(--brand-hover); --btn-pressed:var(--brand-pressed); --btn-border:transparent; --btn-ghost-fg:#E5E7EB; --btn-ghost-hover:rgba(255,255,255,.06); --btn-outline-fg:#E5E7EB; --btn-outline-bd:#93C5FD; --btn-outline-hover-bg:rgba(147,197,253,.10); --disabled-bg:#1F2937; --disabled-fg:#9CA3AF; --disabled-bd:#1F2937; --success:#4CAF50; --success-subtle:#12351A; --warning:#FBBF24; --warning-subtle:#3A2B0C; --danger:#F87171; --danger-subtle:#3A1212; --info:#60A5FA; --info-subtle:#0B223D; --table-row-hover:rgba(255,255,255,.04); --selection:rgba(17,93,221,.25); --tooltip-bg:#0B1220; --tooltip-fg:#E5E7EB; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } /* ============ BASE ============ */ *{ box-sizing:border-box; } html, body { height:100%; } body{ margin:0; padding:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; background:var(--bg); color:var(--text); } a{ color:inherit; text-decoration:none; } a:hover{ color:var(--text-hover); } ::selection{ background:var(--selection); } /* ============ HEADER ============ */ header{ position:sticky; top:0; z-index:100; backdrop-filter:saturate(160%) blur(10px); background:linear-gradient(to bottom, rgba(4,7,14,.7), rgba(4,7,14,.35)); border-bottom:1px solid #0f1b28; } .container{ width:min(1200px, 92vw); margin:0 auto; } .nav{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; font-weight:600; } .nav .left, .nav .right{ display:flex; align-items:center; gap:1rem; } .nav .logo{ display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.06em; } .nav ul{ list-style:none; display:flex; align-items:center; gap:1.2rem; margin:0; padding:0; } .nav .right-mobile{ display: none; } .nav .right-mobile .burgermenu{ display: flex; flex-direction: column; gap: 6px; padding: 8px; } .nav .right-mobile span{ display: block; height: 3px; width: 30px; background-color: var(--brand-contrast); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.6rem 1rem; border-radius:14px; border:1px solid transparent; font-weight:600; letter-spacing:.02em; cursor:pointer; transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .btn-ghost{ background:transparent; border-color:#243244; color:var(--text); } /* Primary = Brand Navy (kein Verlauf) */ .btn-primary{ background:var(--btn-bg); color:var(--btn-fg); } .btn-primary:hover{ background:var(--btn-hover); } .btn-primary:active{ background:var(--btn-pressed); } /* ============ HERO ============ */ .hero{ position:relative; overflow:hidden; padding:clamp(3rem, 6vw, 6rem) 0; } .hero__bg{ position:absolute; inset:-20% -10%; z-index:-1; filter:saturate(120%); background: radial-gradient(800px 400px at 10% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%), radial-gradient(700px 350px at 110% 10%, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 60%), linear-gradient(110deg, transparent 40%, color-mix(in srgb, var(--brand) 8%, transparent) 48%, transparent 56%); animation: beam-sweep 6s linear infinite; } @keyframes beam-sweep { to { background-position:0 0, 0 0, 200% 0; } } .hero__grid{ display:grid; align-items:center; gap:2rem; grid-template-columns:1.1fr .9fr; } .hero__subtitle{ max-width:46ch; color:var(--text-muted); } .hero__actions{ display:flex; gap:.75rem; margin:.9rem 0 1.2rem; } .hero__card{ padding:1rem; } .caps{ display:grid; gap:.7rem; } .cap{ display:flex; align-items:flex-start; gap:.75rem; padding:.75rem; border:1px solid var(--border); border-radius:.8rem; background:var(--surface-muted); } .cap__icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:.7rem; background:color-mix(in srgb, var(--brand) 10%, transparent); color:var(--brand); font-size:1.1rem; } .cap__body{ display:grid; gap:.1rem; } .cap__body span{ color:var(--text-muted); font-size:.9rem; } /* ============ SECTIONS ============ */ .section{ padding:clamp(2.5rem, 5vw, 4rem) 0; } .section--tint{ background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, transparent), transparent); } .section__title{ margin:0 0 1rem; font-size:clamp(1.4rem, 1.2rem + 1vw, 2rem); } h1 { font-size: clamp(1.6rem, 1.1rem + 3vw, 2.6rem); } /* Features */ .feature-grid{ display:grid; gap:1rem; grid-template-columns:repeat(3, 1fr); } .card{ background:var(--surface); border:1px solid var(--border); border-radius:1rem; box-shadow:var(--shadow); } .feature{ padding:1rem; } .feature__icon{ font-size:1.3rem; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb, var(--brand) 10%, transparent); color:var(--brand); } .feature__title{ margin:.6rem 0 .3rem; font-size:1.05rem; } .feature__text{ margin:0; color:var(--text-muted); } /* Security */ .security-grid{ display:grid; gap:1rem; grid-template-columns:repeat(4, 1fr); } .security{ padding:1rem; } .security__title{ margin:.1rem 0 .35rem; } .security__text{ margin:0; color:var(--text-muted); } /* Steps */ .steps{ display:grid; gap:.75rem; padding-left:0; list-style:none; max-width:60ch; } .step-badge{ display:inline-grid; place-items:center; width:28px; height:28px; font-weight:700; border-radius:999px; background:linear-gradient(90deg, var(--brand), var(--secondary)); color:#0b1220; margin-right:.5rem; } /* CTA */ .cta{ position:relative; overflow:hidden; padding:clamp(2.5rem, 5vw, 4rem) 0; } .beam-bg{ position:absolute; inset:-20% -10%; z-index:-1; opacity:.8; background: conic-gradient(from 200deg at 40% 40%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 40%), conic-gradient(from 0deg at 60% 60%, color-mix(in srgb, var(--secondary) 25%, transparent), transparent 40%); filter: blur(32px) saturate(120%); } .cta__inner{ display:grid; gap:.6rem; text-align:center; } .cta__actions{ display:flex; gap:.6rem; justify-content:center; margin-top:.4rem; } /* Contact */ .contact{ display:grid; gap:1rem; } .contact__form{ display:grid; gap:.6rem; max-width:560px; } .input{ width:100%; background:var(--input-bg); color:var(--text); border:1px solid var(--input-border); border-radius:.6rem; padding:.7rem .9rem; outline:0; transition:border-color .15s ease, box-shadow .15s ease, background .2s ease; } .input:focus{ border-color:var(--focus-ring); box-shadow:var(--focus-ring-shadow); } /* Footer */ .site-footer{ border-top:1px solid var(--border); padding:2rem 0; background:linear-gradient(180deg, transparent, rgba(255,255,255,.02)); } .footer__grid{ display:grid; gap:.75rem; align-items:center; grid-template-columns:1fr auto 1fr; } .footer__nav{ display:flex; gap:1rem; justify-content:center; } .footer__nav a{ color:var(--text-muted); } .footer__nav a:hover{ color:var(--text); } .brandline{ display:flex; gap:.5rem; align-items:center; font-weight:800; } .copy{ text-align:right; } .muted{ color:var(--text-muted); } .small{ font-size:.9rem; } /* Anchor offset so sections don't hide behind sticky header */ :target { scroll-margin-top: 80px; } /* ============ MOBILE FRIENDLY ADD-ON ============ */ /* Respect reduced motion (also pauses hero sweep) */ @media (prefers-reduced-motion: reduce) { .hero__bg { animation: none !important; } * { transition: none !important; } } img, video { max-width:100%; height:auto; display:block; } /* a, button { min-height:44px; } /* comfy touch targets */ /* Your existing navbar mobile rule stays as-is */ @media (max-width: 768px) { .container { width:min(100%, 92vw); } .nav { padding:.6rem 0; } /* keep these per your request */ header .middle, header .right:not(.right-mobile){ display:none !important; } .nav .right-mobile{ display: flex; } /* Hero */ .hero { padding:2rem 0; } .hero__grid { grid-template-columns:1fr; gap:1.2rem; } .hero__copy { text-align:center; } .hero__subtitle { margin-inline:auto; max-width:36ch; } .hero__actions { justify-content:center; flex-wrap:wrap; } .hero__actions .btn { width:100%; max-width:320px; } .hero__card { padding:.75rem; } /* Features grid --> 1 col on small phones, 2 cols on larger phones */ .feature-grid { grid-template-columns:1fr; } } @media (min-width:480px) and (max-width:768px) { .feature-grid { grid-template-columns:repeat(2,1fr); } } /* Security grid responsive */ @media (max-width:768px) { .security-grid { grid-template-columns:1fr; } } @media (min-width:600px) and (max-width:1024px) { .security-grid { grid-template-columns:repeat(2,1fr); } } /* Medium screens */ @media (min-width:769px) and (max-width:1024px) { .hero__grid { grid-template-columns:1fr 1fr; gap:1.5rem; } .feature-grid { grid-template-columns:repeat(2,1fr); } } /* Footer stack on mobile */ @media (max-width:768px){ .footer__grid { grid-template-columns:1fr; text-align:center; gap:.6rem; } .copy { text-align:center; } }