/* ============================================================ Ventura IT — Stylesheet Helles, präzises Engineering-Design mit warmem Amber-Akzent (Terminal-Karte bleibt bewusst dunkel als Kontrast-Element) ============================================================ */ :root{ --bg: #f7f5f0; --bg-raise: #fdfcfa; --surface: #ffffff; --surface-2: #f3f0e8; --line: rgba(22,26,34,.11); --line-soft: rgba(22,26,34,.06); --ink: #161a22; --text: #444b58; --text-dim: #6f7787; --accent: #e8830f; --accent-2: #c46f0a; --accent-deep:#9a5608; --accent-soft:rgba(232,131,15,.10); --accent-line:rgba(232,131,15,.32); --font-display:"Bricolage Grotesque",system-ui,sans-serif; --font-body:"Instrument Sans",system-ui,sans-serif; --font-serif:"Instrument Serif",Georgia,serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace; --maxw:1280px; --radius:18px; --ease:cubic-bezier(.22,1,.36,1); } /* Dark Mode — aktiviert über data-theme="dark" am (Toggle im Header) */ [data-theme="dark"]{ --bg: #0b0d11; --bg-raise: #10131a; --surface: #141822; --surface-2: #1a1f2b; --line: rgba(255,255,255,.08); --line-soft: rgba(255,255,255,.05); --ink: #f3f5f9; --text: #aab2c0; --text-dim: #717a8a; --accent: #ffa12e; --accent-2: #ffc97e; --accent-deep:#c46f0a; --accent-soft:rgba(255,161,46,.10); --accent-line:rgba(255,161,46,.30); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:90px} body{ font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.65; font-size:1.0625rem; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Körnung über der ganzen Seite */ body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } ::selection{background:var(--accent);color:#fff} [data-theme="dark"] ::selection{color:#1a1206} [data-theme="dark"] body::after{opacity:.05} a{color:inherit;text-decoration:none} img,svg{display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);letter-spacing:-.02em;line-height:1.08} h1 em,h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent-2);letter-spacing:0} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-body);font-weight:600;font-size:.97rem; padding:13px 26px;border-radius:12px;border:none;cursor:pointer; background:linear-gradient(180deg,#f59423,var(--accent)); color:#fff; transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s; box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 24px rgba(232,131,15,.25); } .btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 36px rgba(232,131,15,.35)} [data-theme="dark"] .btn{ background:linear-gradient(180deg,var(--accent),#f08c0f);color:#19120a; box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 24px rgba(255,161,46,.18); } [data-theme="dark"] .btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 36px rgba(255,161,46,.28)} [data-theme="dark"] .btn-ghost{background:transparent;color:var(--ink);box-shadow:none} [data-theme="dark"] .btn-ghost:hover{background:var(--surface)} .btn:active{transform:translateY(0)} .btn .arrow{transition:transform .25s var(--ease)} .btn:hover .arrow{transform:translateX(4px)} .btn-ghost{ background:transparent;color:var(--ink); border:1px solid var(--line);box-shadow:none; } .btn-ghost:hover{background:var(--surface);border-color:var(--accent-line);filter:none;box-shadow:none} /* ---------- Eyebrow ---------- */ .eyebrow{ font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em; text-transform:uppercase;color:var(--accent); display:inline-flex;align-items:center;gap:12px; } .eyebrow .idx{color:var(--text-dim)} .eyebrow::before{content:"";width:32px;height:1px;background:var(--accent-line)} /* ---------- Header ---------- */ [data-theme="dark"] header{background:rgba(11,13,17,.72)} [data-theme="dark"] .logo-mark{ background:linear-gradient(135deg,var(--accent),var(--accent-deep)); color:#1a1206;box-shadow:0 4px 14px rgba(255,161,46,.3); } [data-theme="dark"] .hero-bg::before{ background: radial-gradient(ellipse 60% 50% at 70% 0%,rgba(255,161,46,.13),transparent 65%), radial-gradient(ellipse 50% 45% at 15% 15%,rgba(70,100,180,.10),transparent 70%); } [data-theme="dark"] .service:hover{box-shadow:0 22px 60px rgba(0,0,0,.45)} [data-theme="dark"] .terminal{box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,161,46,.04)} header{ position:fixed;top:0;left:0;right:0;z-index:100; background:rgba(247,245,240,.82); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); transition:background .3s; } .nav{display:flex;align-items:center;justify-content:space-between;height:76px} .logo{ display:flex;align-items:center;gap:11px; font-family:var(--font-display);font-weight:800;font-size:1.3rem; letter-spacing:-.02em;color:var(--ink); } .logo-mark{ width:30px;height:30px;border-radius:9px;flex:none; background:linear-gradient(135deg,#f59423,var(--accent-2)); display:grid;place-items:center;color:#000000; font-family:var(--font-display);font-weight:800;font-size:.95rem; box-shadow:0 4px 14px rgba(232,131,15,.35); } .logo span{color:var(--accent)} .nav-links{display:flex;gap:34px;align-items:center} .nav-links a:not(.btn){ color:var(--text);font-size:.95rem;font-weight:500; position:relative;transition:color .2s; } .nav-links a:not(.btn)::after{ content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px; background:var(--accent);border-radius:2px;transition:width .25s var(--ease); } .nav-links a:not(.btn):hover{color:var(--ink)} .nav-links a:not(.btn):hover::after{width:100%} .nav .btn{padding:10px 20px;font-size:.9rem} /* Theme-Umschalter (hell/dunkel) */ .theme-toggle{ display:grid;place-items:center;width:42px;height:42px;flex:none; border:1px solid var(--line);border-radius:10px;background:none; color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s; } .theme-toggle:hover{border-color:var(--accent-line);background:var(--surface)} .theme-toggle .icon-sun{display:none} .theme-toggle .icon-moon{display:block} [data-theme="dark"] .theme-toggle .icon-sun{display:block} [data-theme="dark"] .theme-toggle .icon-moon{display:none} /* Mobile-Menü */ .nav-toggle{ display:none;background:none;border:1px solid var(--line);border-radius:10px; width:44px;height:44px;cursor:pointer;color:var(--ink); place-items:center; } .nav-toggle svg{pointer-events:none} .nav-toggle .icon-close{display:none} .mobile-menu{ display:none;flex-direction:column;gap:4px; padding:18px 28px 28px;border-top:1px solid var(--line-soft); } .mobile-menu a{ padding:13px 4px;color:var(--text);font-size:1.05rem;font-weight:500; border-bottom:1px solid var(--line-soft); } .mobile-menu a:last-child{border-bottom:none} .mobile-menu .btn{margin-top:14px;justify-content:center} header.open .mobile-menu{display:flex} header.open .icon-burger{display:none} header.open .icon-close{display:block} /* ---------- Hero ---------- */ .hero{position:relative;padding:190px 0 110px;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg::before{ content:"";position:absolute;inset:0; background: radial-gradient(ellipse 60% 50% at 70% 0%,rgba(232,131,15,.12),transparent 65%), radial-gradient(ellipse 50% 45% at 15% 15%,rgba(70,100,180,.07),transparent 70%); } .hero-bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(var(--line-soft) 1px,transparent 1px), linear-gradient(90deg,var(--line-soft) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse 75% 65% at 50% 0%,#000 25%,transparent 95%); -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 0%,#000 25%,transparent 95%); } .hero .wrap{position:relative;z-index:1} .hero h1{ font-size:clamp(2.6rem,5.8vw,4.5rem);font-weight:800; margin:30px 0 0;max-width:19ch; } .hero-sub{ font-size:clamp(1.08rem,1.8vw,1.28rem);color:var(--text); max-width:54ch;margin-top:28px; } .hero-cta{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap} .hero-grid{display:grid;grid-template-columns:1.28fr .72fr;gap:54px;align-items:center} /* Terminal-Karte — bleibt bewusst dunkel (Kontrast-Element auf heller Seite) */ .terminal{ background:#11141b;border:1px solid rgba(255,255,255,.09);border-radius:var(--radius); box-shadow:0 24px 60px rgba(22,26,34,.22),0 0 0 1px rgba(232,131,15,.05); overflow:hidden;font-family:var(--font-mono);font-size:.85rem; transform:rotate(1.2deg); } .terminal-bar{ display:flex;align-items:center;gap:8px;padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.08);background:#171b24; } .terminal-bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.12);display:block} .terminal-bar i:first-child{background:rgba(255,107,92,.7)} .terminal-bar i:nth-child(2){background:rgba(255,189,46,.7)} .terminal-bar i:nth-child(3){background:rgba(60,200,120,.6)} .terminal-bar .title{margin-left:auto;color:#717a8a;font-size:.75rem} .terminal-body{padding:22px 24px;line-height:1.9;color:#aab2c0} .terminal-body .ln{display:block;white-space:pre-wrap} .terminal-body .c{color:#717a8a} .terminal-body .k{color:#ffc97e} .terminal-body .ok{color:#6fdf9a} .terminal-body .cursor{ display:inline-block;width:9px;height:17px;background:#ffa12e; vertical-align:-3px;animation:blink 1.1s steps(1) infinite; } @keyframes blink{50%{opacity:0}} /* Fakten-Leiste */ .facts{ margin-top:90px;display:grid;grid-template-columns:repeat(3,1fr); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--line-soft);gap:1px; } .fact{background:var(--bg-raise);padding:30px 28px} .fact .num{ font-family:var(--font-display);font-size:1.7rem;font-weight:700; color:var(--ink);letter-spacing:-.02em; } .fact .label{color:var(--text-dim);font-size:.92rem;margin-top:6px} /* ---------- Marquee ---------- */ .marquee{ border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); padding:22px 0;overflow:hidden;position:relative; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee-track{ display:flex;gap:0;width:max-content; animation:scroll 38s linear infinite; } .marquee:hover .marquee-track{animation-play-state:paused} .marquee-track span{ font-family:var(--font-mono);font-size:.85rem;color:var(--text-dim); padding:0 30px;white-space:nowrap;display:flex;align-items:center;gap:30px; } .marquee-track span::after{content:"◆";font-size:.5rem;color:var(--accent-line)} @keyframes scroll{to{transform:translateX(-50%)}} /* ---------- Sektionen ---------- */ section{padding:110px 0;position:relative} .section-head{max-width:62ch;margin-bottom:64px} .section-head h2{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:700;margin-top:20px} .section-head p{color:var(--text);margin-top:18px;font-size:1.12rem;max-width:56ch} .section-head.center{margin-left:auto;margin-right:auto;text-align:center} .section-head.center .eyebrow{justify-content:center} .section-head.center .eyebrow::before{display:none} .section-head.center p{margin-left:auto;margin-right:auto} /* ---------- Leistungen ---------- */ .services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .service{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:36px 32px;position:relative;overflow:hidden; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s; } .service::before{ content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s; background:radial-gradient(420px 200px at 30% -10%,var(--accent-soft),transparent 70%); } .service:hover{transform:translateY(-5px);border-color:var(--accent-line);box-shadow:0 18px 44px rgba(22,26,34,.10)} .service:hover::before{opacity:1} .service>*{position:relative} .service .icon{ width:52px;height:52px;border-radius:14px;margin-bottom:24px; background:var(--accent-soft);border:1px solid var(--accent-line); display:grid;place-items:center;color:var(--accent); } .service h3{font-size:1.32rem;font-weight:700} .service p{color:var(--text);margin-top:13px;font-size:.99rem} .service ul{margin-top:18px;list-style:none;display:flex;flex-direction:column;gap:8px} .service li{ font-size:.9rem;color:var(--text-dim);display:flex;gap:10px;align-items:baseline; } .service li::before{content:"→";color:var(--accent);flex:none;font-family:var(--font-mono);font-size:.8rem} /* ---------- Ablauf ---------- */ #ablauf{background:var(--bg-raise);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;counter-reset:step} .steps.three{grid-template-columns:repeat(3,1fr)} .pains{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pain{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:34px 30px;transition:transform .3s var(--ease),border-color .3s; } .pain:hover{transform:translateY(-4px);border-color:var(--accent)} .pain h3{font-size:1.15rem;font-weight:700} .pain p{color:var(--text);font-size:.98rem;margin-top:10px} .pains-note{margin-top:44px;font-size:1.15rem;max-width:62ch} .pains-note strong{color:var(--accent)} .stack{ list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px; max-width:920px;margin:0 auto; } .stack li{ display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;color:var(--text); background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:18px 22px; } .stack li::before{content:"✓";color:var(--accent);flex:none;font-family:var(--font-mono);font-weight:700;font-size:1.05rem} .stack-note{margin-top:30px;text-align:center;font-size:1.12rem} .hero-chart{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:34px 32px; } .hc-title{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text)} .hc-num{font-family:var(--font-mono);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:700;color:var(--accent);margin-top:14px;line-height:1} .hc-plus{font-size:.6em;vertical-align:super} .hc-sub{color:var(--text);font-size:.95rem;margin-top:10px;max-width:34ch} .hc-bars{display:flex;align-items:flex-end;gap:6px;height:110px;margin-top:26px} .hc-bars i{ flex:1;border-radius:4px 4px 0 0; background:linear-gradient(to top, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); } .hc-axis{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted,#888)} .stack-note strong{color:var(--accent)} .center-cta{margin-top:34px;text-align:center} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px} .stat{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:30px 28px; } .stat-num{font-family:var(--font-mono);font-size:2.1rem;font-weight:700;color:var(--accent)} .stat p{color:var(--text);font-size:.95rem;margin-top:10px} .stat small{display:block;margin-top:14px;color:var(--muted,#888);font-size:.78rem} .story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start} .story p{color:var(--text);font-size:1.08rem;line-height:1.7} .story p+p{margin-top:18px} .story strong{color:var(--accent)} .chart-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:34px 30px; } .chart-title{font-weight:700;font-size:1rem;margin-bottom:22px} .bar-row{display:flex;align-items:center;gap:14px} .bar-row+.bar-row{margin-top:14px} .bar-label{flex:none;width:70px;font-family:var(--font-mono);font-size:.82rem;color:var(--text)} .bar-track{flex:1} .bar{ height:40px;border-radius:8px;display:flex;align-items:center;padding:0 14px; font-family:var(--font-mono);font-weight:700;font-size:.9rem;white-space:nowrap; min-width:74px; } .bar-before{background:color-mix(in srgb, var(--accent) 22%, transparent);color:var(--text)} .bar-after{background:var(--accent);color:#1a1206} .chart-result{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)} .big-num{font-family:var(--font-mono);font-size:2.2rem;font-weight:700;color:var(--accent)} .chart-result p{color:var(--text);margin-top:8px;font-size:.98rem} .chart-note{display:block;margin-top:18px;color:var(--muted,#888);font-size:.78rem} @media (max-width:1000px){ .stats{grid-template-columns:1fr;max-width:560px} .story-grid{grid-template-columns:1fr} } @media (max-width:1000px){ .pains{grid-template-columns:1fr;max-width:560px} .stack{grid-template-columns:1fr} .steps.three{grid-template-columns:1fr;max-width:560px} .steps.three .step::before{right:0} } .step{position:relative;padding-top:30px} .step::before{ content:"";position:absolute;top:0;left:0;right:-34px;height:2px; background:linear-gradient(90deg,var(--accent-line),var(--line-soft)); } .step:last-child::before{right:0} .step::after{ content:"";position:absolute;top:-5px;left:0;width:12px;height:12px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft); } .step .n{font-family:var(--font-mono);color:var(--accent);font-size:.85rem;letter-spacing:.1em} .step h3{font-size:1.25rem;font-weight:700;margin-top:14px} .step p{color:var(--text);margin-top:11px;font-size:.96rem} /* ---------- Warum Ventura ---------- */ .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start} .why-copy h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;margin-top:20px} .why-copy>p{margin-top:20px;font-size:1.1rem} .why-copy .btn{margin-top:34px} .includes-title{margin-top:28px;font-weight:700;font-size:1rem} .includes{margin-top:14px;list-style:none;display:flex;flex-direction:column;gap:10px} .includes li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem;color:var(--text)} .includes li::before{content:"✓";color:var(--accent);flex:none;font-family:var(--font-mono);font-weight:700} .values{display:flex;flex-direction:column;gap:0} .value{ display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--line-soft); } .value:first-child{padding-top:6px} .value .v-icon{ flex:none;width:46px;height:46px;border-radius:12px; background:var(--accent-soft);border:1px solid var(--accent-line); display:grid;place-items:center;color:var(--accent); } .value h3{font-size:1.08rem;font-weight:700} .value p{color:var(--text);font-size:.95rem;margin-top:6px} /* Inhaber-Karte (aktiv, sobald Block in index.html einkommentiert wird) */ .founder{display:flex;gap:20px;align-items:center;margin-top:36px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)} .founder img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-line)} .founder .f-name{font-family:var(--font-display);font-weight:700;color:var(--ink)} .founder .f-role{font-size:.88rem;color:var(--text-dim)} /* ---------- Praxisbeispiele ---------- */ #projekte{background:var(--bg-raise);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .case{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:34px 30px;display:flex;flex-direction:column; transition:transform .3s var(--ease),border-color .3s; } .case:hover{transform:translateY(-5px);border-color:var(--accent-line)} .case .tag{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line); padding:5px 12px;border-radius:99px;align-self:flex-start; } .case h3{font-size:1.22rem;font-weight:700;margin-top:20px} .case .problem{color:var(--text);font-size:.95rem;margin-top:12px} .case .result{ margin-top:auto;padding-top:22px; display:flex;gap:12px;align-items:baseline; border-top:1px dashed var(--line);margin-top:24px; } .case .result .arrow{color:var(--accent);font-family:var(--font-mono)} .case .result p{color:var(--accent-2);font-size:.93rem;font-weight:500} .cases-note{margin-top:28px;color:var(--text-dim);font-size:.88rem;text-align:center} /* ---------- Stimmen / Referenzen ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .quote{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:32px 30px;display:flex;flex-direction:column;gap:22px; transition:transform .3s var(--ease),border-color .3s; } .quote:hover{transform:translateY(-5px);border-color:var(--accent-line)} .quote blockquote{ font-family:var(--font-display);font-weight:600;font-size:1.12rem;line-height:1.45; color:var(--ink);letter-spacing:-.01em; } .quote figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px} .quote .q-name{font-weight:600;color:var(--ink);font-size:.95rem} .quote .q-role{font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim);letter-spacing:.04em} @media (max-width:1060px){.quotes{grid-template-columns:1fr;max-width:560px;margin:0 auto}} /* ---------- FAQ ---------- */ /* Dezenter Blueprint-Hintergrund, mittig hinter den Fragen */ #faq{overflow:hidden} #faq::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 45% 40% at 50% 0%,var(--accent-soft),transparent 70%), linear-gradient(var(--line-soft) 1px,transparent 1px), linear-gradient(90deg,var(--line-soft) 1px,transparent 1px); background-size:auto,72px 72px,72px 72px; mask-image:radial-gradient(ellipse 70% 80% at 50% 10%,#000 20%,transparent 88%); -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 10%,#000 20%,transparent 88%); } #faq .wrap{position:relative;z-index:1} .faq{max-width:760px;margin:0 auto} .faq details{ border:1px solid var(--line);border-radius:14px;background:var(--surface); margin-bottom:14px;overflow:hidden;transition:border-color .25s; } .faq details[open]{border-color:var(--accent-line)} .faq summary{ cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px; padding:22px 26px;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink); } .faq summary::-webkit-details-marker{display:none} .faq summary .chevron{ flex:none;color:var(--accent);transition:transform .3s var(--ease); } .faq details[open] summary .chevron{transform:rotate(45deg)} .faq .answer{padding:0 26px 24px;color:var(--text);font-size:.98rem;max-width:64ch} /* ---------- Kontakt ---------- */ .contact-grid{ display:grid;grid-template-columns:.9fr 1.1fr;gap:1px; background:var(--line);border:1px solid var(--line);border-radius:24px;overflow:hidden; } .contact-info{ background:linear-gradient(160deg,var(--surface-2),var(--surface)); padding:54px 48px;position:relative;overflow:hidden; } .contact-info::after{ content:"";position:absolute;right:-80px;bottom:-80px;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle,var(--accent-soft),transparent 70%); } .contact-info h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;margin-top:18px} .contact-info>p{margin-top:16px;color:var(--text);max-width:38ch} .contact-rows{margin-top:38px;display:flex;flex-direction:column;gap:18px;position:relative;z-index:1} .contact-row{display:flex;gap:16px;align-items:center} .contact-row .c-icon{ flex:none;width:42px;height:42px;border-radius:11px; background:var(--accent-soft);border:1px solid var(--accent-line); display:grid;place-items:center;color:var(--accent); } .contact-row a,.contact-row span{color:var(--ink);font-weight:500;font-size:.97rem} .contact-row a:hover{color:var(--accent-2)} .contact-row small{display:block;color:var(--text-dim);font-weight:400;font-size:.82rem} .contact-form{background:var(--bg-raise);padding:54px 48px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px} .field label{font-size:.88rem;font-weight:600;color:var(--ink)} .field label .opt{color:var(--text-dim);font-weight:400} .field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer} .hp-field{position:absolute;left:-9999px;height:0;width:0;opacity:0} .field input,.field select,.field textarea{ font-family:var(--font-body);font-size:.97rem;color:var(--ink); background:var(--surface);border:1px solid var(--line);border-radius:11px; padding:13px 16px;outline:none;transition:border-color .2s,box-shadow .2s; resize:vertical; } .field input::placeholder,.field textarea::placeholder{color:var(--text-dim)} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft); } .contact-form .btn{width:100%;justify-content:center;margin-top:6px} .form-hint{margin-top:14px;font-size:.82rem;color:var(--text-dim);text-align:center} .form-status{ margin-top:20px;padding:18px 20px;border-radius:12px; background:var(--accent-soft);border:1px solid var(--accent-line); } .form-status p{font-size:.9rem;color:var(--text);margin-bottom:12px} .form-status p strong{color:var(--ink)} .form-status p a{color:var(--accent-2);border-bottom:1px solid var(--accent-line)} .form-status textarea{ width:100%;font-family:var(--font-mono);font-size:.82rem;color:var(--text); background:var(--bg-raise);border:1px solid var(--line);border-radius:9px; padding:12px 14px;resize:vertical;margin-bottom:12px; } .form-status .btn{width:auto;margin-top:0;padding:9px 18px;font-size:.88rem} /* ---------- Footer ---------- */ footer{border-top:1px solid var(--line-soft);padding:70px 0 36px;background:var(--bg-raise)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px} .foot-brand p{margin-top:18px;color:var(--text-dim);font-size:.93rem;max-width:30ch} .foot-col h4{ font-family:var(--font-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; color:var(--text-dim);font-weight:500;margin-bottom:20px; } .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:12px} .foot-col a{color:var(--text);font-size:.94rem;transition:color .2s} .foot-col a:hover{color:var(--accent-2)} .foot-bottom{ margin-top:60px;padding-top:26px;border-top:1px solid var(--line-soft); display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px; color:var(--text-dim);font-size:.86rem; } .foot-bottom .mono{font-family:var(--font-mono);font-size:.78rem} /* ---------- Unterseiten (Impressum / Datenschutz) ---------- */ .legal{padding:170px 0 100px;max-width:780px;margin:0 auto} .legal h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:700;margin-top:22px} .legal h2{font-size:1.35rem;font-weight:700;margin:46px 0 14px} .legal h3{font-size:1.08rem;font-weight:600;margin:30px 0 10px} .legal p,.legal li{color:var(--text);font-size:.99rem;margin-bottom:12px} .legal ul{padding-left:22px;margin-bottom:14px} .legal a{color:var(--accent-2);border-bottom:1px solid var(--accent-line)} .legal .placeholder{ background:var(--accent-soft);border:1px dashed var(--accent-line); border-radius:6px;padding:1px 8px;color:var(--accent-2);font-family:var(--font-mono);font-size:.88em; white-space:nowrap; } .legal-note{ margin-top:54px;background:var(--surface);border:1px solid var(--line); border-left:3px solid var(--accent);border-radius:12px;padding:20px 24px; font-size:.92rem;color:var(--text); } /* ---------- Scroll-Fortschritt ---------- */ #scroll-progress{ position:fixed;top:0;left:0;height:2px;width:0;z-index:300; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:0 2px 2px 0;pointer-events:none; } /* Header nach dem ersten Scrollen: mehr Tiefe */ header.scrolled{box-shadow:0 8px 32px rgba(22,26,34,.08);border-bottom-color:var(--line)} [data-theme="dark"] header.scrolled{box-shadow:0 8px 32px rgba(0,0,0,.4)} /* Aktiver Menüpunkt */ .nav-links a:not(.btn).active{color:var(--ink)} .nav-links a:not(.btn).active::after{width:100%} /* ---------- Scroll-Reveal ---------- Nur aktiv, wenn JS läuft (html.js wird inline im gesetzt) — ohne JS bleibt alles sichtbar (kein Blackout bei Skript-Blockern). */ .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .js .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.06s} .reveal.d2{transition-delay:.14s} .reveal.d3{transition-delay:.22s} .reveal.d4{transition-delay:.30s} .reveal.d5{transition-delay:.38s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .marquee-track{animation:none} .terminal-body .cursor{animation:none} *{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* ---------- Responsive ---------- */ @media (max-width:1060px){ .hero-grid{grid-template-columns:1fr;gap:54px} .terminal{transform:none;max-width:560px} .services{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr);gap:44px 34px} .step:nth-child(2)::before{right:0} .cases{grid-template-columns:1fr;max-width:560px;margin:0 auto} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:840px){ .nav-links{display:none} .nav-toggle{display:grid} .why-grid,.contact-grid{grid-template-columns:1fr} .contact-info,.contact-form{padding:42px 30px} } @media (max-width:620px){ body{font-size:1rem} .hero{padding:150px 0 80px} section{padding:80px 0} .services,.steps,.facts{grid-template-columns:1fr} .step::before{right:0} .form-row{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr;gap:36px} .legal{padding:140px 0 70px} } /* ============ Grafiken: Dashboard, Inbox, Stats, Monatsbericht ============ */ .viz-band{margin-top:64px} .viz-caption{text-align:center;color:var(--text);font-size:.95rem;margin-top:18px} .mock-browser{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.10);max-width:860px;margin:0 auto} [data-theme="dark"] .mock-browser{box-shadow:0 30px 80px rgba(0,0,0,.5)} .mb-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)} .mb-bar i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block} .mb-bar span{font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);margin-left:8px} .mb-body{padding:24px} .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px} .kpi{border:1px solid var(--line);border-radius:10px;padding:16px} .kpi small{display:block;font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em} .kpi b{font-family:var(--font-mono);font-size:1.5rem;color:var(--ink)} .kpi .up{color:#2e9e5b;font-family:var(--font-mono);font-size:.75rem} [data-theme="dark"] .kpi .up{color:#4dc47f} .mchart{display:flex;align-items:flex-end;gap:10px;height:120px;border:1px solid var(--line);border-radius:10px;padding:16px} .mchart i{flex:1;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--accent) 30%,transparent)} .mchart i.hot{background:var(--accent)} .mchart-label{font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);margin-top:8px;display:flex;justify-content:space-between;max-width:860px;margin-left:auto;margin-right:auto} .inbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px} .mock-win{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden} .mw-head{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .mw-head b{font-size:.85rem;color:var(--ink)} .mbadge{font-family:var(--font-mono);font-size:.7rem;padding:3px 9px;border-radius:20px;background:rgba(213,69,55,.13);color:#d54537} .mbadge.good{background:color-mix(in srgb,#2e9e5b 14%,transparent);color:#2e9e5b} [data-theme="dark"] .mbadge.good{color:#4dc47f} .mail{padding:10px 16px;border-bottom:1px solid var(--line);font-size:.8rem} .mail:last-child{border-bottom:none} .mail b{display:block;color:var(--ink);font-weight:600} .mail span{color:var(--text-dim);font-size:.74rem} .mail.unread b{font-weight:800} .mtag{float:right;font-family:var(--font-mono);font-size:.66rem;padding:2px 8px;border-radius:20px} .mtag.auto{background:color-mix(in srgb,#2e9e5b 14%,transparent);color:#2e9e5b} [data-theme="dark"] .mtag.auto{color:#4dc47f} .mtag.team{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)} .stat-svg{display:block;margin:0 auto 6px} .stat-svg text{font-family:var(--font-mono)} .stat.center{text-align:center} .report{max-width:420px;margin:64px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:0 20px 50px rgba(0,0,0,.10)} [data-theme="dark"] .report{box-shadow:0 30px 80px rgba(0,0,0,.5)} .report .rp-eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .report h3{color:var(--ink);font-size:1.15rem;margin:6px 0 20px} .rp-nums{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px} .rp-num b{font-family:var(--font-mono);font-size:1.6rem;color:var(--accent);display:block} .rp-num small{font-size:.75rem;color:var(--text-dim)} .rp-bars{display:flex;flex-direction:column;gap:8px;margin-bottom:20px} .rp-row{display:flex;align-items:center;gap:10px;font-size:.76rem} .rp-row span{flex:none;width:130px;color:var(--text)} .rp-row i{height:12px;border-radius:6px;background:var(--accent);display:block} .rp-foot{font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim);border-top:1px solid var(--line);padding-top:12px} @media (max-width:840px){ .inbox-grid{grid-template-columns:1fr} .kpis{grid-template-columns:1fr} } .vision{ max-width:72ch;margin-top:54px;padding:32px 36px; background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:var(--radius); } .vision p{font-size:1.16rem;line-height:1.7;color:var(--ink)} .vision p+p{margin-top:16px} .vision strong{color:var(--accent)} .agitate{max-width:72ch;margin-top:54px} .agitate p{font-size:1.16rem;line-height:1.7;color:var(--text)} .agitate p+p{margin-top:16px} .agitate strong{color:var(--ink)} /* Pain-Karten Icons */ .pain .icon{ width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);margin-bottom:18px; } /* Beratung-Stack als Icon-Karten */ .stack.cards li{align-items:center;gap:16px;padding:22px 24px} .stack.cards li::before{content:none} .stack.cards .s-icon{ flex:none;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent); } .stack.cards strong{display:block;color:var(--ink);font-size:1.02rem} .stack.cards span{display:block;color:var(--text);font-size:.92rem;margin-top:4px} /* ============ Scroll-Animationen für Grafiken ============ */ /* Vertikale Balken (Hero-Chart & Dashboard) wachsen von unten */ .js .hc-bars i,.js .mchart i{ transform:scaleY(0);transform-origin:bottom; transition:transform .9s var(--ease); } .js .hc-bars.in-view i,.js .mchart.in-view i{transform:scaleY(1)} /* Horizontale Balken (Beispielrechnung) füllen sich */ .js .chart .bar{ max-width:0;min-width:0;padding-left:0;padding-right:0;overflow:hidden; transition:max-width 1.3s var(--ease) .15s,min-width 1.3s var(--ease) .15s,padding 1.3s var(--ease) .15s; } .js .chart.in-view .bar{max-width:100%;min-width:74px;padding:0 14px} /* Monatsbericht-Balken */ .js .rp-bars i{max-width:0;transition:max-width 1.1s var(--ease)} .js .rp-bars.in-view i{max-width:100%} /* Donut-Ring zeichnet sich selbst */ .js .stat-svg circle[stroke-dasharray]{ stroke-dashoffset:182; transition:stroke-dashoffset 1.5s var(--ease) .2s; } .js .stat-svg.in-view circle[stroke-dasharray]{stroke-dashoffset:0} /* SVG-Balkendiagramm in den Stats wächst */ .js .stat-svg rect{ transform-box:fill-box;transform-origin:bottom;transform:scaleY(0); transition:transform .8s var(--ease); } .js .stat-svg.in-view rect{transform:scaleY(1)} .js .stat-svg text{opacity:0;transition:opacity .6s ease .8s} .js .stat-svg.in-view text{opacity:1} /* Hero-Karte: sanfter 3D-Tilt (JS setzt die Variablen) */ .hero-chart{ transform:perspective(900px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg)); transition:transform .35s var(--ease),box-shadow .35s var(--ease); will-change:transform; } .hero-chart.tilting{transition:transform .08s linear} .hero-chart:hover{box-shadow:0 24px 60px rgba(22,26,34,.12)} [data-theme="dark"] .hero-chart:hover{box-shadow:0 24px 60px rgba(0,0,0,.45)} /* Hero-Hintergrund: Parallax-Ebene */ .hero-bg{will-change:transform} /* FAQ: Antwort gleitet sanft auf */ .faq details[open] .answer{animation:faqIn .4s var(--ease)} @keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* Zählende Zahlen: kein Springen der Breite */ .count{font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ .js .hc-bars i,.js .mchart i,.js .stat-svg rect{transform:none;transition:none} .js .chart .bar{max-width:100%;min-width:74px;padding:0 14px;transition:none} .js .rp-bars i{max-width:100%;transition:none} .js .stat-svg circle[stroke-dasharray]{stroke-dashoffset:0;transition:none} .js .stat-svg text{opacity:1;transition:none} .hero-chart{transform:none} }