:root{ /* Helles, modernes Grundtheme */ --bg0:#f5f7fb; --bg1:#eef2f7; --text:#0f172a; --muted:#475569; --brand:#00bfff; --brand2:#6ae3ff; --border: rgba(15,23,42,.10); --shadow: 0 18px 55px rgba(2,6,23,.10); --shadow2: 0 10px 30px rgba(2,6,23,.08); --r:22px; --space-xs: 8px; --space-s: 16px; --space-m: 24px; --space-l: 48px; /* Flächen (Cards/Panels) */ --surface:#ffffff; --surface-soft: rgba(255,255,255,.45); } /* ===== DARK THEME (per Button, data-theme auf ) ===== */ :root[data-theme="dark"]{ --bg0:#070b12; --bg1:#0b1220; --text:#e7eefc; --muted:#a5b4cf; --brand:#35ccff; --brand2:#8ff0ff; --border: rgba(231,238,252,.12); --shadow: 0 18px 55px rgba(0,0,0,.40); --shadow2: 0 10px 30px rgba(0,0,0,.30); --surface: rgba(255,255,255,.06); --surface-soft: rgba(255,255,255,.05); } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } html{ scroll-behavior: smooth; } body{ font-family: Inter, system-ui, Arial, sans-serif; background: radial-gradient(900px 500px at 10% -10%, rgba(0,191,255,.18), transparent 60%), radial-gradient(700px 600px at 90% 10%, rgba(106,227,255,.14), transparent 55%), linear-gradient(180deg,var(--bg0),var(--bg1)); color: var(--text); overflow-x:hidden; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Dark Mode Hintergrund */ :root[data-theme="dark"] body{ background: radial-gradient(900px 500px at 10% -10%, rgba(53,204,255,.10), transparent 65%), radial-gradient(700px 600px at 90% 10%, rgba(143,240,255,.08), transparent 65%), linear-gradient(180deg,var(--bg0),var(--bg1)); } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ::selection{ background: rgba(0,191,255,.22); } .container{ width: min(1180px, calc(100% - 32px)); margin: 0 auto; } /* Einheitlicher Fokus-Ring */ :where(a, button, input, textarea, select, .btn, .nav-link):focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(0,191,255,.16); border-color: rgba(0,191,255,.45); } /* ========================= HEADER ========================= */ .site-header{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: rgba(255,255,255,.86); border-bottom: 1px solid var(--border); box-shadow: 0 10px 30px rgba(2,6,23,.10); } /* Dark header */ :root[data-theme="dark"] .site-header{ background: rgba(7,11,18,.72); box-shadow: 0 10px 30px rgba(0,0,0,.40); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 14px 0; } /* Badge links + Brand rechts davon */ .header-brand{ display:flex; align-items:center; gap: 16px; } /* Partner-Badge separat links (groß) */ .header-badge{ height: 72px; width: auto; flex-shrink: 0; background: #fff; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(15,23,42,.12); box-shadow: 0 10px 25px rgba(2,6,23,.10); } :root[data-theme="dark"] .header-badge{ background: rgba(255,255,255,.06); border-color: rgba(231,238,252,.12); box-shadow: 0 10px 25px rgba(0,0,0,.35); } .brand{ display:flex; gap:14px; align-items:center; padding: 6px 8px; border-radius: 16px; transition: background .15s ease; } .brand:hover{ background: rgba(15,23,42,.03); } :root[data-theme="dark"] .brand:hover{ background: rgba(231,238,252,.05); } .brand-logo{ height: 72px; width:auto; flex-shrink:0; filter: drop-shadow(0 8px 18px rgba(2,6,23,.14)); } .brand-title{ font-weight:950; text-transform:uppercase; font-size:14px; letter-spacing:.7px; } .brand-sub{ font-size:14px; color: var(--muted); } /* ========================= NAV + DROPDOWN ========================= */ .nav{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .nav-link{ display:inline-flex; align-items:center; padding:10px 12px; border-radius:999px; font-size:13px; font-weight:800; color: var(--text); background: rgba(15,23,42,.03); border:1px solid rgba(15,23,42,.10); transition: transform .15s ease, background .15s ease; } .nav-link:hover{ transform: translateY(-1px); background: rgba(15,23,42,.06); } :root[data-theme="dark"] .nav-link{ background: rgba(231,238,252,.06); border:1px solid rgba(231,238,252,.12); } :root[data-theme="dark"] .nav-link:hover{ background: rgba(231,238,252,.10); } .nav-dropdown{ position: relative; } /* Hover-Brücke */ .nav-dropdown::after{ content:""; position:absolute; left:0; right:0; top:100%; height:10px; } .nav-menu{ position:absolute; top:100%; left:0; min-width: 290px; background:#fff; border:1px solid rgba(15,23,42,.12); border-radius: 18px; box-shadow: 0 18px 45px rgba(0,0,0,.12); padding:8px; z-index:999; display:block; opacity:0; visibility:hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; pointer-events:none; } :root[data-theme="dark"] .nav-menu{ background: rgba(11,18,32,.98); border:1px solid rgba(231,238,252,.12); box-shadow: 0 18px 45px rgba(0,0,0,.45); } .nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu, .nav-menu:hover{ opacity:1; visibility:visible; transform: translateY(0); pointer-events:auto; } .nav-menu a{ display:block; padding:10px 10px; border-radius:12px; font-weight:800; font-size:13px; color: var(--text); } .nav-menu a:hover, .nav-menu a:focus-visible{ background: rgba(0,191,255,.10); } :root[data-theme="dark"] .nav-menu a:hover, :root[data-theme="dark"] .nav-menu a:focus-visible{ background: rgba(53,204,255,.14); } .nav-sep{ height:1px; background: rgba(15,23,42,.10); margin:6px 8px; } :root[data-theme="dark"] .nav-sep{ background: rgba(231,238,252,.12); } /* ========================= HERO ========================= */ .hero{ padding: 64px 0 18px; background: linear-gradient(180deg, rgba(0,191,255,.06), rgba(255,255,255,0)); border-bottom: 1px solid rgba(15,23,42,.06); } :root[data-theme="dark"] .hero{ background: linear-gradient(180deg, rgba(53,204,255,.08), rgba(0,0,0,0)); border-bottom: 1px solid rgba(231,238,252,.08); } .hero-inner{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items:center; } .kicker{ display:inline-flex; align-items:center; gap:10px; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; background: rgba(0,191,255,.10); border: 1px solid rgba(0,191,255,.22); margin-bottom: 14px; } .hero-title{ position: relative; padding-left: 14px; } .hero-title::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:6px; border-radius:999px; background: linear-gradient(180deg,var(--brand),var(--brand2)); } .hero h1{ font-size: clamp(30px,4vw,46px); margin:0; font-weight: 950; line-height:1.08; } .hero-lead{ font-size: 17px; line-height: 1.75; color: var(--muted); max-width: 65ch; margin-top: 12px; } .hero-ctas{ margin: 18px 0 14px; display:flex; gap:12px; flex-wrap:wrap; } .hero-badges{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .badge{ background: var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 12px; font-size:13px; box-shadow: 0 10px 25px rgba(2,6,23,.06); } /* Hero card */ .hero-card{ border-radius: var(--r); overflow:hidden; border:1px solid rgba(15,23,42,.10); box-shadow: var(--shadow); background: var(--surface); } :root[data-theme="dark"] .hero-card{ border-color: var(--border); } .hero-card-top{ display:flex; gap:10px; padding:12px 12px 0 12px; } .hero-card-chip{ display:inline-flex; align-items:center; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:900; border:1px solid rgba(0,191,255,.25); background: rgba(0,191,255,.10); } .hero-card-chip.ghost{ border-color: rgba(15,23,42,.12); background: rgba(15,23,42,.03); color: rgba(15,23,42,.75); } :root[data-theme="dark"] .hero-card-chip.ghost{ border-color: rgba(231,238,252,.14); background: rgba(231,238,252,.06); color: rgba(231,238,252,.82); } /* ========================= FEATURE STRIP ========================= */ .feature-strip{ padding:18px 0 8px; } .feature-strip-inner{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .feature{ display:flex; gap:12px; align-items:flex-start; padding:16px; background: var(--surface); border:1px solid rgba(15,23,42,.10); border-radius: var(--r); box-shadow: var(--shadow2); } :root[data-theme="dark"] .feature{ border-color: var(--border); } .feature-ic{ font-size:22px; line-height:1; } .feature-title{ font-weight:950; font-size:14px; } .feature-sub{ color:var(--muted); font-size:13px; line-height:1.45; margin-top:2px; } /* ========================= SECTIONS / WHY ========================= */ .section{ padding:70px 0; } .section-soft{ background: var(--surface-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .section-title{ font-size: clamp(28px,3.6vw,42px); font-weight: 950; margin:0 0 10px 0; } .section-lead{ color: var(--muted); max-width: 75ch; line-height: 1.75; margin:0 0 18px 0; } .benefits{ margin-top: 30px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; } .benefit{ background: var(--surface); border:1px solid var(--border); border-radius: var(--r); padding:20px; box-shadow: var(--shadow2); } /* ========================= BUTTONS ========================= */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; font-weight:800; border:1px solid transparent; transition: transform .15s ease, box-shadow .15s ease; will-change: transform; } .btn:hover{ transform: translateY(-1px); } .btn:active{ transform: translateY(0px) scale(.98); } .btn-primary{ background: linear-gradient(90deg,var(--brand),var(--brand2)); color:#07111a; box-shadow: 0 8px 22px rgba(0,191,255,.20); } .btn-dark{ background:#111; color:#fff; box-shadow: 0 10px 30px rgba(2,6,23,.18); } .btn-ghost{ border:1px solid var(--border); background: rgba(15,23,42,.02); } .btn-ghost:hover{ background: rgba(15,23,42,.05); } :root[data-theme="dark"] .btn-ghost{ background: rgba(231,238,252,.06); color: var(--text); } :root[data-theme="dark"] .btn-ghost:hover{ background: rgba(231,238,252,.10); } /* ========================= PORTFOLIO GRID ========================= */ .portfolio-grid{ margin-top: 30px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; } .card{ position: relative; background: var(--surface); border-radius: 28px; overflow:hidden; border:1px solid var(--border); box-shadow: 0 18px 40px rgba(2,6,23,.14); display:flex; flex-direction:column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } :root[data-theme="dark"] .card{ box-shadow: 0 18px 40px rgba(0,0,0,.45); } .card:hover{ transform: translateY(-4px); box-shadow: 0 26px 60px rgba(2,6,23,.18); border-color: rgba(0,191,255,.28); } :root[data-theme="dark"] .card:hover{ box-shadow: 0 26px 60px rgba(0,0,0,.55); } .card img{ height: 190px; width:100%; object-fit: cover; transition: transform .25s ease; } .card:hover img{ transform: scale(1.02); } .card-body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; } .card-body .btn{ margin-top:auto; } .card p{ margin:0; color: var(--muted); line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .tag{ background:rgba(0,191,255,.15); border:1px solid rgba(0,191,255,.30); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:900; width:max-content; } .section-cta{ margin-top:22px; display:flex; justify-content:center; } /* ========================= PORTFOLIO SUBPAGES ========================= */ .page-hero{ padding: 34px 0 10px; } .page-hero-box{ border-radius: 28px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow2); padding: 22px; } .page-hero-top{ display:flex; align-items:center; justify-content:space-between; gap: 14px; flex-wrap: wrap; } .page-tag{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; background: rgba(0,191,255,.14); border: 1px solid rgba(0,191,255,.28); font-size: 12px; font-weight: 900; width: fit-content; } .page-title{ margin: 10px 0 6px 0; font-size: clamp(26px, 3.4vw, 40px); font-weight: 950; } .page-sub{ color: var(--muted); font-size: 16px; line-height: 1.75; margin: 0; max-width: 80ch; } .page-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } .panel{ background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 18px; box-shadow: var(--shadow2); } .panel h2{ margin: 0 0 10px 0; font-size: 18px; font-weight: 950; } .list-check{ list-style:none; padding-left:0; margin:0; display:flex; flex-direction:column; gap:8px; color: var(--muted); } .list-check li{ display:flex; gap:10px; line-height:1.6; } .list-check li::before{ content:"✅"; } .steps{ list-style:none; padding-left:0; margin:0; display:flex; flex-direction:column; gap:10px; color: var(--muted); } .steps li{ display:flex; gap:10px; line-height:1.6; } .steps li span{ display:inline-flex; width:26px;height:26px; border-radius:999px; align-items:center; justify-content:center; font-weight:950; font-size:13px; background: rgba(0,191,255,.14); border: 1px solid rgba(0,191,255,.28); color: rgba(15,23,42,.85); flex-shrink:0; } /* ========================= CONTACT PAGE ========================= */ .contact-layout{ display:grid; grid-template-columns: 1fr 1.2fr; gap: 18px; margin-top: 18px; } .contact-panel{ background: var(--surface); border:1px solid var(--border); border-radius:28px; padding:18px; box-shadow: var(--shadow2); } .form{ display:flex; flex-direction:column; gap:12px; } .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; } .form-row label{ display:block; font-weight:900; font-size:13px; margin-bottom:6px; } .form-row input,.form-row textarea{ width:100%; padding:12px; border-radius:14px; border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.96); outline:none; } :root[data-theme="dark"] .form-row input, :root[data-theme="dark"] .form-row textarea{ border-color: rgba(231,238,252,.14); background: rgba(255,255,255,.06); color: var(--text); } .form-row input:focus,.form-row textarea:focus{ border-color: rgba(0,191,255,.40); box-shadow: 0 0 0 4px rgba(0,191,255,.12); } .form-check{ display:flex; gap:10px; align-items:flex-start; } .form-check input{ width:18px;height:18px;margin-top:2px; } .form-note{ color:var(--muted); font-size:13px; margin:6px 0 0 0; } .alert{ padding:12px 14px; border-radius:18px; background: rgba(255,255,255,.92); border:1px solid rgba(15,23,42,.10); box-shadow: 0 10px 25px rgba(2,6,23,.06); margin-bottom:14px; } :root[data-theme="dark"] .alert{ background: rgba(255,255,255,.06); border-color: rgba(231,238,252,.12); box-shadow: 0 10px 25px rgba(0,0,0,.35); } .hp{ position:absolute; left:-9999px; top:-9999px; height:1px; width:1px; overflow:hidden; } /* ========================= FOOTER ========================= */ .site-footer{ border-top:1px solid var(--border); padding:20px 0; background: rgba(255,255,255,.85); } :root[data-theme="dark"] .site-footer{ background: rgba(7,11,18,.72); } .footer-inner{ display:flex; justify-content:space-between; font-size:13px; color:var(--muted); flex-wrap:wrap; gap:12px; } .footer-links{ display:flex; gap:12px; flex-wrap:wrap; } /* ========================= REDUCE MOTION ========================= */ @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ========================= RESPONSIVE ========================= */ @media(max-width:1100px){ .feature-strip-inner{ grid-template-columns: repeat(2,1fr); } } @media(max-width:980px){ .hero-inner{ grid-template-columns:1fr; } .two-col{ grid-template-columns:1fr; } .contact-layout{ grid-template-columns:1fr; } .form-grid{ grid-template-columns:1fr; } /* Header bleibt lesbar */ .header-inner{ flex-wrap: wrap; } } /* Feature-Strip auf Mobile 2 Spalten */ @media(max-width:520px){ .brand-text{ display:none; } .feature-strip-inner{ grid-template-columns: repeat(2, 1fr); } .badge{ white-space:normal; } .header-inner{ padding: 10px 0; } .brand-logo{ height: 58px; } .header-badge{ height: 56px; padding: 8px 10px; } .nav{ gap:6px; } .nav-link{ padding:9px 10px; font-size:12.5px; } .nav-menu{ min-width: 240px; } } @media(max-width:380px){ .feature-strip-inner{ grid-template-columns: 1fr; } } .no-context { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: auto; } /* Geschützte Bilder (nur große Content-Bilder) */ .protect-img{ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; }