:root{--blue:#1976D2; --text:#0f172a; --muted:#475569;--bg:#ffffff; --bg-soft:#f6f8fb; --card:#ffffff; --border:#e6eaf0;--radius:16px; --shadow:0 10px 30px rgba(16,24,40,.07);}*{box-sizing:border-box} html,body{margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}.container{max-width:1180px;margin:0 auto;padding:0 20px}a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}img{max-width:100%;height:auto}/* Header */.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.brand{display:flex;align-items:center;gap:10px}.brand img{height:32px;filter:drop-shadow(0 4px 12px rgba(25,118,210,.25))}.brand span{font-weight:800;letter-spacing:.4px}.nav-links{display:flex;gap:18px}.nav-links a{color:#334155}.nav-links a.active,.nav-links a:hover{color:var(--blue)}.nav-toggle{display:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:6px 10px}/* Hero */.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);background:radial-gradient(1200px 500px at 20% -10%, #eaf3ff 0%, #fff 60%)}.hero .inner{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding:72px 0 56px}.kicker{display:inline-block;background:#e9f2ff;color:#1e40af;border:1px solid #d7e6ff;padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.5px}.hero h1{font-size:52px;line-height:1.02;margin:14px 0 10px;background:linear-gradient(90deg,#0f172a 0%,#1976D2 35%,#0ea5e9 70%,#0f172a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 6s linear infinite;}@keyframes shine{0%{background-position:0%}100%{background-position:200%}}.hero p.sub{color:var(--muted);font-size:18px;margin:0 0 18px}.ctas{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text);box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .2s ease}.btn:hover{transform:translateY(-2px)}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 28px rgba(25,118,210,.28)}.btn.primary:hover{filter:brightness(.97)}.badges{display:flex;gap:10px;margin-top:10px;color:#334155;font-size:13px}.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;background:radial-gradient(closest-side, rgba(25,118,210,.18), rgba(25,118,210,0));filter:blur(10px);transform:rotate(15deg)}.brand span {font-weight: 800;font-size: 1.1rem;letter-spacing: 1px;background: linear-gradient(90deg,#0f0f0f,#3a3a3a);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}/* Sections */.section{padding:60px 0}.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .2s ease}.card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(16,24,40,.10)}.card h3{margin:6px 0 6px}.card p{color:var(--muted);margin:0}/* Spotlight Grid */.spotlight{position:relative}.spotlight::before{content:""; position:absolute; inset:0;background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), rgba(25,118,210,.12), transparent 60%);pointer-events:none; transition:opacity .3s ease;}.feature{position:relative;overflow:hidden}/* Stats */.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;box-shadow:var(--shadow)}.stat .num{font-size:38px;font-weight:800;color:#0f172a}.stat .label{color:var(--muted);margin-top:6px}/* CTA Band */.cta-band{position:relative;text-align:center;color:#fff;background:linear-gradient(135deg,#1976D2,#1e3a8a);padding:56px 0;overflow:hidden}.cta-band::before{content:"";position:absolute;left:-20%;top:-40%;width:140%;height:200%;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent 70%);transform:rotate(8deg)}.cta-band .btn{background:#fff;color:#1976D2;border-color:#fff}/* Footer */.site-footer {background: var(--bg-soft);border-top: 1px solid var(--border);color: #475569;padding: 22px 0;margin-top: 40px;text-align: center; /* <--- fügt Zentrierung hinzu */}/* Reveal */.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}.reveal.show{opacity:1;transform:none}/* Responsive */@media (max-width: 980px){.hero .inner{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.nav-toggle{display:inline-block}.nav-links{display:none;position:absolute;right:20px;top:64px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;flex-direction:column;gap:10px;box-shadow:var(--shadow)}.nav-links.open{display:flex}}html{scroll-behavior:smooth}/* Anchor offset for sticky header */section[id]{scroll-margin-top: 80px;}@media (max-width:980px){ section[id]{scroll-margin-top: 72px;} }.nav-links a:focus{outline:2px solid #1976D2; outline-offset:2px; border-radius:6px}/* Fix: CTA-Hintergrund darf keine Eingaben blocken */.cta-band { position: relative; }.cta-band::before {pointer-events: none; /* lässt Klicks durch */z-index: 0; /* hinter allem */}.cta-band .container,.cta-band .form-card {position: relative;z-index: 1; /* über dem Deko-Layer */}/* ---- CONTACT in CTA: Layout sauber & lesbar ---- *//* Formular zentrieren und links ausrichten */.cta-band .form-card--cta {max-width: 680px;margin: 16px auto 0;text-align: left;background: transparent;border: 0;box-shadow: none;}/* Grid: mobil 1 Spalte, ab 900px 2 Spalten */.form-grid {display: grid;gap: 14px;grid-template-columns: 1fr; /* mobile */}.form-grid .full { grid-column: 1 / -1; }@media (min-width: 900px){.form-grid { grid-template-columns: 1fr 1fr; }}/* Labels und Felder */.cta-band .form-card label{display: block;margin: 0 0 6px;font-weight: 600;color: #e2e8f0;}.cta-band .form-card input,.cta-band .form-card textarea {width: 100%; /* volle Breite! */box-sizing: border-box;padding: 12px 14px;border-radius: 12px;background: rgba(0,0,0,0.35);color: #fff;caret-color: #fff;border: 1px solid rgba(255,255,255,0.45);transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;}.cta-band .form-card textarea{ min-height: 140px; resize: vertical; }.cta-band .form-card input::placeholder,.cta-band .form-card textarea::placeholder { color: rgba(255,255,255,.7); }.cta-band .form-card input:focus,.cta-band .form-card textarea:focus {outline: none;background: rgba(0,0,0,0.55);border-color: #fff;box-shadow: 0 0 0 3px rgba(255,255,255,.18);}/* CTA-Hintergrund darf Eingaben nicht blocken */.cta-band { position: relative; }.cta-band::before { pointer-events: none; z-index: 0; }.cta-band .container, .cta-band .form-card { position: relative; z-index: 1; }/* Button passend zum CTA */.cta-band .btn.primary{background: rgba(255,255,255,0.9);color: #1f2937;border-color: transparent;}.cta-band .btn.primary:hover{background: #fff;transform: translateY(-1px);}/* zarte Secondary-Textfarbe */.muted{ color: var(--muted); }/* Tech-Stack: Pill-Reihe */.stack-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}.pill{display:inline-block; padding:8px 12px; border-radius:999px;background:#fff; border:1px solid var(--border); box-shadow: var(--shadow);color:#334155; font-weight:600; font-size:.95rem;}/* Logo-/Branchenkarten */.grid-logos{ grid-template-columns: repeat(3, 1fr); }.logo-card{display:flex; align-items:center; justify-content:center;min-height:86px; background:#fff; border:1px solid var(--border);border-radius:16px; box-shadow: var(--shadow); font-weight:700;}@media (max-width: 980px){ .grid-logos{ grid-template-columns: 1fr; } }/* Blog Cards */.post-card{background:#fff; border:1px solid var(--border); border-radius:16px;padding:18px; box-shadow:var(--shadow);}.post-card h3{ margin:4px 0 8px; }.post-card .btn{ margin-top:10px; }.usp-list {display:grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap:20px;list-style:none;margin:0; padding:0;text-align:left;}.usp-list li{font-size:1.05rem;line-height:1.4;}.usp-list strong{ display:block; margin-top:4px; font-size:1.2rem; }.usp-list span{ color:var(--muted); font-size:.95rem; }.usp-list li::marker{ content:""; }.usp-list li{ padding-left:0; }.usp-grid{display:grid;grid-template-columns: repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:20px;}.usp-item{text-align:left;}.usp-icon{font-size:2rem;margin-bottom:8px;}.usp-item h3{margin:0 0 6px;font-size:1.3rem;font-weight:700;}.usp-item p{margin:0;color:var(--muted);line-height:1.5;}/* Weniger Abstand über Tech-Stack */#stack {margin-top: 20px; /* statt Standard 60–100px */}#stack.section {padding-top: 20px; /* kompakter Start */}.section {padding-top: 20px; /* kompakter Start */}/* Responsive Headline */.hero h1{font-size: clamp(28px, 6vw, 52px); /* skaliert schön */line-height: 1.06;}/* Auf kleinen Screens: Typing darf umbrechen */@media (max-width: 720px){.hero [data-typed]{width: auto !important;white-space: normal !important;display: inline; /* kein Blocksprung */overflow-wrap: anywhere; /* zur Not umbrechen */}}/* Einheitliche vertikale Abstände */:root{--section-y: 60px; /* Standard oben/unten */--section-y-lg: 72px; /* ab Desktop */}/* Hero: nutzt dieselben Abstände wie .section */.hero .inner{padding-top: var(--section-y);padding-bottom: var(--section-y);}@media (min-width: 980px){.hero .inner{ padding-top: var(--section-y-lg); padding-bottom: var(--section-y-lg); }}/* Responsive Grid: unter 980px einspaltig */@media (max-width: 980px){.hero .inner{ grid-template-columns: 1fr; gap: 22px; }}/* Kicker etwas kleiner auf Mobile */@media (max-width: 720px){.kicker{ font-size: 11px; padding: 5px 9px; }}/* H1 responsiv + ohne Abschneiden */.hero h1{font-size: clamp(28px, 6vw, 52px);line-height: 1.06;margin: 12px 0 10px;background-size: 200% 100%;animation: shine 6s linear infinite;}/* Typed-Span darf auf kleinen Screens umbrechen */@media (max-width: 720px){.hero [data-typed]{width: auto !important;white-space: normal !important;display: inline;overflow-wrap: anywhere;}}/* Optional: auf sehr breiten Screens etwas großzügiger */@media (min-width: 1400px){.hero .inner{ gap: 44px; }}/* Mobile-Optimierungen für Hero */@media (max-width: 720px){.hero h1{font-size: clamp(22px, 7vw, 34px); /* kleiner, mehr Luft */line-height: 1.2;text-align: left; /* oder center, wenn du’s mittiger willst */}.hero .sub{font-size: 15px;line-height: 1.5;margin-bottom: 20px;}.hero .ctas{flex-direction: column;gap: 12px;align-items: stretch; /* Buttons über volle Breite */}.hero .ctas .btn{width: 100%;text-align: center;}.badges{justify-content: center;margin-top: 16px;font-size: 14px;}}/* Einheitliche Seiteneinrückung im Hero */.hero .inner {max-width: 1200px; /* gleiche Breite wie container */margin: 0 auto; /* mittig */padding-left: 20px; /* Abstand zu Bildschirmrändern */padding-right: 20px;box-sizing: border-box;}/* Einheitlicher Padding für Navbar */.site-header .navbar {max-width: 1200px;margin: 0 auto;padding: 0 20px; /* identisch zu .container */box-sizing: border-box;}/* Burger-Icon */.nav-toggle {background: none;border: none;cursor: pointer;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;padding: 0;}.nav-toggle .burger,.nav-toggle .burger::before,.nav-toggle .burger::after {display: block;background: #0f172a; /* Farbe der Striche */height: 3px;width: 22px;border-radius: 2px;position: relative;transition: all 0.3s ease;}.nav-toggle .burger::before,.nav-toggle .burger::after {content: "";position: absolute;left: 0;}.nav-toggle .burger::before { top: -7px; }.nav-toggle .burger::after { top: 7px; }/* Zustand "aktiv" → animiertes X */.nav-toggle[aria-expanded="true"] .burger {background: transparent;}.nav-toggle[aria-expanded="true"] .burger::before {transform: rotate(45deg);top: 0;}.nav-toggle[aria-expanded="true"] .burger::after {transform: rotate(-45deg);top: 0;}/* Mobile Nav versteckt */.nav-links {display: none;}.nav-links.open {display: block;}/* Navbar Padding */.site-header .navbar {max-width: 1200px;margin: 0 auto;padding: 16px 20px; /* oben/unten = 16px, links/rechts = 20px */box-sizing: border-box;}.site-header {background: #fff;box-shadow: 0 2px 6px rgba(0,0,0,0.05);position: sticky;top: 0;z-index: 1000;}/* Navbar Layout */.site-header {background:#fff;position:sticky; top:0; z-index:1000;box-shadow:0 2px 6px rgba(0,0,0,.05);}.site-header .navbar{max-width:1200px; margin:0 auto; padding:16px 20px; box-sizing:border-box;display:flex; align-items:center; justify-content:space-between;position:relative;}/* Desktop-Nav standard: Links sichtbar, Burger versteckt */.nav-links{ display:flex; gap:18px; align-items:center; }.nav-toggle{ display:none; } /* <-- wichtig: Burger aus am Desktop *//* Burger-Icon */.nav-toggle{background:none; border:0; cursor:pointer; width:36px; height:36px;display:flex; align-items:center; justify-content:center; padding:0;z-index:1002; /* über dem Dropdown */}.nav-toggle .burger,.nav-toggle .burger::before,.nav-toggle .burger::after{display:block; background:#0f172a; height:3px; width:22px; border-radius:2px;position:relative; transition:.25s ease;}.nav-toggle .burger::before,.nav-toggle .burger::after{ content:""; position:absolute; left:0; }.nav-toggle .burger::before{ top:-7px; } .nav-toggle .burger::after{ top:7px; }.nav-toggle[aria-expanded="true"] .burger{ background:transparent; }.nav-toggle[aria-expanded="true"] .burger::before{ transform:rotate(45deg); top:0; }.nav-toggle[aria-expanded="true"] .burger::after{ transform:rotate(-45deg); top:0; }/* Mobile-Nav */@media (max-width: 980px){.nav-toggle{ display:flex; } /* Burger sichtbar */.nav-links{position:absolute; left:0; right:0; top:100%;display:none; flex-direction:column; gap:12px;background:#fff; padding:12px 20px 16px; border-bottom:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:1001;}.nav-links.open{ display:flex; } /* wird per JS gesetzt */}/* Kleine UX-Details */.nav-links a{ color:#0f172a; text-decoration:none; font-weight:600; }.nav-links a.active{ color:#1976D2; }/* Desktop-Standard */.nav-toggle{ display:none; }.nav-links{ display:flex; gap:18px; align-items:center; position:static; box-shadow:none; padding:0; }/* Mobile-Layout */@media (max-width: 980px){.nav-toggle{ display:flex; }.nav-links{display:none;position:absolute; left:0; right:0; top:100%;flex-direction:column; gap:12px;background:#fff; padding:12px 20px 16px;border-bottom:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:1001;}.nav-links.open{ display:flex; }/* Optional: Scroll-Lock wenn offen */body.nav-open{ overflow:hidden; }}