/* ============================================================================ * theme.css — Shared design system for all standalone DR-Automation pages. * DNA from the hero scroll-story: Bebas Neue + Outfit, bg #02030a, single blue * accent (#2ea2ff / #1f6dff). Premium dark. No gradient pair, no second accent. * Fonts are loaded per-page via the Google Fonts (see page ). * Copy rule for all pages: Sie-Form, concrete numbers, NO en/em dashes. * ==========================================================================*/ :root{ /* Backgrounds */ --bg:#02030a; --bg-2:#04060f; --bg-3:#070b16; --panel:#080d18; /* Accent (single blue family) */ --ab:#2ea2ff; --ab-deep:#1f6dff; --ab-hover:#2f7dff; --cta:#0f5aff; --cta-hover:#0046d5; /* Text */ --white:#fff; --ink:#eef6ff; --lede:#c7d4e6; --muted:#8a99ad; --faint:rgba(238,246,255,.55); /* Lines / fills */ --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --fill:rgba(255,255,255,.02); --fill-2:rgba(255,255,255,.04); /* Radius */ --r-card:16px; --r-pill:999px; --r-sm:10px; /* Shadows / glows */ --sh-cta:0 10px 30px rgba(31,109,255,.3); --sh-cta-hover:0 14px 38px rgba(46,162,255,.42); --sh-nav:0 8px 20px rgba(15,90,255,.3); --glow-dot:0 0 12px var(--ab); /* Easing */ --ease:cubic-bezier(.2,.7,.2,1); /* Layout */ --container:1180px; --wide:1480px; --pad-x:clamp(22px,6vw,96px); --pad-head:clamp(20px,5vw,64px); --sec-y:clamp(72px,10vh,140px); /* Fonts */ --f-display:"Bebas Neue",sans-serif; --f-body:"Outfit",system-ui,sans-serif; --f-alt:"Sora","Outfit",sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{background:var(--bg);scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:rgba(46,162,255,.28);color:#fff} :focus-visible{outline:2px solid var(--ab);outline-offset:3px} /* ---- Layout helpers --------------------------------------------------- */ .wrap{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)} .wrap--wide{max-width:var(--wide)} .section{padding-top:var(--sec-y);padding-bottom:var(--sec-y)} .section--tight{padding-top:clamp(48px,7vh,90px);padding-bottom:clamp(48px,7vh,90px)} /* ---- Typography ------------------------------------------------------- */ h1,h2,h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.015em} .h-xl{font-size:clamp(56px,11vw,150px);line-height:.88} .h-lg{font-size:clamp(40px,6.5vw,90px);line-height:.9} .h-md{font-size:clamp(32px,4.6vw,60px);line-height:.92} .h-sm{font-size:clamp(24px,3vw,38px);line-height:.96} .grad,.accent-word{color:var(--ab)} .lede{color:var(--lede);font:500 clamp(16px,1.4vw,20px)/1.65 var(--f-body);max-width:58ch} p{color:var(--muted)} .muted{color:var(--muted)} /* ---- Eyebrow ---------------------------------------------------------- */ .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 11px/1 var(--f-body); letter-spacing:.3em;text-transform:uppercase;color:var(--ab)} .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--ab);box-shadow:var(--glow-dot)} /* ---- Buttons ---------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:var(--r-pill); font:600 13px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:0; transition:transform .3s var(--ease),box-shadow .3s ease,background .3s ease,border-color .3s ease} .btn svg{width:16px;height:16px;flex:none} .btn-primary{background:var(--ab-deep);color:#fff;box-shadow:var(--sh-cta)} .btn-primary:hover{background:var(--ab-hover);transform:translateY(-2px);box-shadow:var(--sh-cta-hover)} .btn-ghost{border:1px solid var(--line-2);color:#fff;background:transparent} .btn-ghost:hover{border-color:var(--ab);background:rgba(46,162,255,.08)} .btn-block{width:100%;justify-content:center} /* ---- Cards (feature grid) -------------------------------------------- */ .grid{display:grid;gap:clamp(16px,2.4vw,28px)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .feat{padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-card); background:var(--fill);transition:transform .35s var(--ease),border-color .35s ease,background .35s ease} .feat:hover{transform:translateY(-4px);border-color:rgba(46,162,255,.35);background:var(--fill-2)} .feat b,.feat .feat-t{display:block;font-family:var(--f-display);font-size:24px;letter-spacing:.04em; text-transform:uppercase;color:var(--ab);margin-bottom:12px} .feat p,.feat-d{color:var(--muted);font:500 15px/1.6 var(--f-body)} .feat ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:8px} .feat ul li{position:relative;padding-left:20px;color:var(--lede);font:500 14.5px/1.5 var(--f-body)} .feat ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%; background:var(--ab);box-shadow:var(--glow-dot)} /* ---- Stats ------------------------------------------------------------ */ .stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px)} .stat__num{font-family:var(--f-display);font-size:clamp(40px,5vw,64px);line-height:1;color:var(--white)} .stat__label{display:block;margin-top:8px;color:var(--muted);font:500 13px/1.4 var(--f-body);max-width:18ch} /* ============================================================================ * Shared site header (standalone pages — always visible, solidifies on scroll) * ==========================================================================*/ .site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between; align-items:center;padding:18px var(--pad-head);transition:background .4s ease,backdrop-filter .4s ease,padding .4s ease,border-color .4s ease; border-bottom:1px solid transparent} /* WICHTIG: backdrop-filter NICHT auf .site-header selbst — ein Filter macht den Header zum Containing-Block fuer die fixed .site-nav (Off-Canvas-Panel kollabiert dann auf Header-Hoehe ~130px, Links quellen ueber die Seite). BG+Blur liegen daher auf ::before. */ .site-header.is-solid{border-bottom-color:var(--line);padding-top:13px;padding-bottom:13px} .site-header.is-solid::before{content:"";position:absolute;inset:0;z-index:-1; background:rgba(2,3,10,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} .brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:28px; letter-spacing:.05em;text-transform:uppercase;color:#fff} .brand img{height:26px;width:auto} .site-nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,36px)} .site-nav a{font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.62);transition:color .3s ease} .site-nav a:hover,.site-nav a.is-current{color:var(--ab)} /* E11: klarer, hochwertiger CTA-Button (Gradient-Pille + Glow + Inner-Highlight) */ .nav-cta{position:relative;overflow:hidden; background:linear-gradient(180deg,#38a9ff 0%,#1f6dff 100%)!important;color:#fff!important; padding:10px 22px;border-radius:var(--r-pill);letter-spacing:.1em; border:1px solid rgba(255,255,255,.22); box-shadow:0 10px 28px rgba(31,109,255,.4),inset 0 1px 0 rgba(255,255,255,.3); transition:transform .25s var(--ease),box-shadow .3s ease,filter .3s ease} .nav-cta::before{content:"";position:absolute;z-index:0;top:0;left:-70%;width:48%;height:100%; transform:skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transition:left .6s var(--ease)} .nav-cta{isolation:isolate} .nav-cta:hover{filter:brightness(1.05);transform:translateY(-2px); box-shadow:0 16px 40px rgba(46,162,255,.55),inset 0 1px 0 rgba(255,255,255,.36)} .nav-cta:hover::before{left:130%} /* dropdown (Leistungen) */ .nav-drop{position:relative} .nav-drop>a{display:inline-flex;align-items:center;gap:6px} .nav-drop>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px);transition:transform .3s ease} .nav-drop:hover>a::after{transform:rotate(225deg) translateY(2px)} .nav-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px); min-width:240px;background:rgba(7,11,22,.96);backdrop-filter:blur(18px);border:1px solid var(--line); border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden; transition:opacity .25s ease,transform .25s var(--ease);box-shadow:0 24px 60px rgba(0,0,0,.5)} /* unsichtbare Bruecke ueber den 14px-Spalt: haelt den :hover-Kontakt, wenn der Cursor vom "Leistungen"-Link ins Menue wandert (sonst klappt es vorher zu). */ .nav-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px} .nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .nav-menu a{display:block;padding:11px 14px;border-radius:10px;letter-spacing:.04em;color:var(--lede);transition:background .2s ease,color .2s ease} .nav-menu a:hover{background:rgba(46,162,255,.1);color:#fff} .nav-menu a small{display:block;margin-top:3px;font:500 10px/1.3 var(--f-body);letter-spacing:.02em;color:var(--muted);text-transform:none} /* mobile — F4: gerahmter Premium-Chip (44x44 Tap-Target), gleiche Sprache wie die Homepage .menu-toggle. Sichtbare Kante + Blur-Fill, im offenen Zustand on-brand glimmend. Bar-Geometrie (gap 5px, 2px hoch) bleibt erhalten. */ .nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center; border-radius:13px;border:1px solid rgba(255,255,255,.16);background:rgba(8,13,24,.42); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer; transition:transform .25s var(--ease),border-color .3s ease,background .3s ease,box-shadow .3s ease; -webkit-tap-highlight-color:transparent} .nav-toggle span{width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .3s var(--ease),opacity .3s ease,width .3s ease} .nav-toggle:active{transform:scale(.96)} .nav-open .nav-toggle{border-color:rgba(46,162,255,.55);background:rgba(46,162,255,.12); box-shadow:0 0 0 1px rgba(46,162,255,.3),0 8px 22px rgba(15,90,255,.28)} .nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-open .nav-toggle span:nth-child(2){opacity:0} .nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:860px){ .nav-toggle{display:flex} .site-nav{position:fixed;inset:0 0 0 auto;width:min(82vw,360px);flex-direction:column;align-items:flex-start; justify-content:center;gap:8px;padding:90px 32px 40px;background:rgba(3,5,12,.98);backdrop-filter:blur(20px); border-left:1px solid var(--line);transform:translateX(100%);transition:transform .45s var(--ease);overflow-y:auto} .nav-open .site-nav{transform:none} .site-nav a{font-size:15px;letter-spacing:.08em;padding:6px 0} .nav-cta{margin-top:14px} .nav-drop{width:100%} .nav-menu{position:static;transform:none;opacity:1;visibility:visible;background:none;border:0;box-shadow:none; padding:6px 0 6px 14px;min-width:0;border-left:1px solid var(--line)} .nav-drop>a::after{display:none} } /* ============================================================================ * Page hero (standalone pages) * ==========================================================================*/ .page-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate} .page-hero--tall{min-height:92vh} .page-hero__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;will-change:transform} .page-hero__scrim{position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(2,3,10,.6) 0%,rgba(2,3,10,.15) 26%,rgba(2,3,10,.2) 50%,rgba(2,3,10,.82) 84%,var(--bg) 100%), radial-gradient(120% 90% at 50% 30%,rgba(2,3,10,.15),rgba(2,3,10,.65) 80%)} .page-hero__inner{position:relative;width:100%;max-width:var(--container);margin:0 auto; padding:clamp(120px,18vh,200px) var(--pad-x) clamp(64px,11vh,128px)} .page-hero h1{max-width:16ch} .page-hero .lede{margin-top:clamp(18px,2.4vw,28px)} .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.2vw,38px)} /* simple centered hero (legal/contact pages) */ .lite-hero{padding:clamp(140px,20vh,220px) var(--pad-x) clamp(40px,6vh,72px);text-align:center} .lite-hero .lede{margin:18px auto 0} /* ---- CTA band (reused everywhere) ------------------------------------ */ .cta-band{position:relative;border-top:1px solid var(--line);background: radial-gradient(120% 140% at 50% 0%,rgba(46,162,255,.12),transparent 60%),var(--bg-2);overflow:hidden} .cta-band__inner{max-width:var(--container);margin:0 auto;padding:clamp(64px,9vh,120px) var(--pad-x);text-align:center} .cta-band h2{margin-bottom:18px} .cta-band .lede{margin:0 auto 30px} /* ============================================================================ * Shared footer (lite — no canvas wave, perf-friendly) * ==========================================================================*/ .site-footer{border-top:1px solid var(--line);background:var(--bg)} .site-footer__top{max-width:var(--container);margin:0 auto;padding:clamp(56px,8vh,96px) var(--pad-x) clamp(36px,5vh,56px); display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)} .site-footer__brand{font-family:var(--f-display);font-size:34px;letter-spacing:.04em;text-transform:uppercase;color:#fff} .site-footer__tag{margin-top:14px;color:var(--muted);font:500 15px/1.6 var(--f-body);max-width:34ch} .foot-col h4{font:700 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:16px} .foot-col a{display:block;padding:6px 0;color:var(--lede);font:500 14px/1.4 var(--f-body);transition:color .25s ease} .foot-col a:hover{color:var(--ab)} .site-footer__base{border-top:1px solid var(--line);max-width:var(--container);margin:0 auto; padding:22px var(--pad-x);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center} .site-footer__copy{color:var(--muted);font:500 13px/1.4 var(--f-body)} .site-footer__legal{display:flex;gap:20px} .site-footer__legal a{color:var(--muted);font:500 13px/1.4 var(--f-body);transition:color .25s ease} .site-footer__legal a:hover{color:var(--ab)} /* ---- Reveal-on-scroll ------------------------------------------------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} /* ---- Demo placeholder (deferred demos) -------------------------------- */ .demo-stub{border:1px dashed var(--line-2);border-radius:var(--r-card);background: repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 14px,transparent 14px 28px),var(--fill); min-height:clamp(280px,40vh,440px);display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;text-align:center;padding:40px} .demo-stub__badge{font:700 11px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--ab)} .demo-stub h3{font-size:clamp(26px,3.4vw,44px);color:#fff} .demo-stub p{max-width:46ch;color:var(--muted)} /* ---- Calendly embed --------------------------------------------------- */ .cal-embed{min-width:320px;height:680px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)} /* ============================================================================ * Responsive * ==========================================================================*/ @media(max-width:860px){ .grid-3{grid-template-columns:1fr 1fr} .site-footer__top{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .grid-2,.grid-3{grid-template-columns:1fr} .site-footer__top{grid-template-columns:1fr} .page-hero{min-height:70vh} /* F3: primaerer CTA mobil aufs Premium-Pillen-Design heben (Gradient + Glanz- Kante wie .nav-cta / .hero-pitch__cta). Nur mobil — Desktop bleibt solide. Groesseres Tap-Target durch etwas mehr Polsterung. */ .btn-primary{ background:linear-gradient(180deg,#38a9ff 0%,#1f6dff 100%); border:1px solid rgba(255,255,255,.22); padding:16px 28px;min-height:50px; box-shadow:0 14px 38px rgba(31,109,255,.45),inset 0 1px 0 rgba(255,255,255,.3)} .btn-primary:hover,.btn-primary:active{ background:linear-gradient(180deg,#45b1ff 0%,#2f7dff 100%); box-shadow:0 16px 44px rgba(46,162,255,.55),inset 0 1px 0 rgba(255,255,255,.34)} } @media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} .reveal{opacity:1;transform:none;transition:none} .btn,.feat,.nav-menu,.site-nav,.site-header{transition:none!important} }