/* ===================================================================== SCANFORGE — Stylesheet Vier umschaltbare Themes über industrie · hell, technisch-edel (Stahlblau / Blueprint) [Standard] heritage · warm, hochwertig (Creme / Messing, Serifen) dunkel · dunkel & edel ohne Neon (Graphit / Champagner) clean · modern, hell, viel Weißraum (Blau / luftig) Alle Komponenten sind über CSS-Variablen (Tokens) gestylt. ===================================================================== */ /* ---------- Tokens: Standard = industrie ---------- */ :root{ --bg:#eef1f5; --bg-2:#e5eaf1; --surface:#ffffff; --surface-2:#f4f7fa; --border:#d3dae3; --border-strong:#b9c3cf; --text:#16202b; --muted:#5a6675; --accent:#1f5fa6; --accent-2:#2b7fd0; --accent-contrast:#ffffff; --accent-soft:rgba(31,95,166,.08); --ring:rgba(31,95,166,.30); --good:#1f9d63; --warn:#b7791f; --bad:#c0392b; --header-bg:rgba(255,255,255,.82); --band-bg:linear-gradient(135deg,#13314e,#0d2238); --band-text:#eaf1f8; --band-muted:#9fb3c6; --grid-line:rgba(31,95,166,.10); --grid-show:block; --grid-op:.6; --orb:rgba(31,95,166,.12); --shadow-card:0 1px 2px rgba(16,32,48,.05),0 10px 28px rgba(16,32,48,.07); --shadow-lg:0 26px 60px rgba(16,32,48,.16); --glow:none; --radius:10px; --radius-sm:8px; --radius-lg:16px; --maxw:1180px; --font-head:"Space Grotesk","Segoe UI",system-ui,sans-serif; --font-body:"Inter","Segoe UI",system-ui,sans-serif; --font-brand:"Space Grotesk","Segoe UI",sans-serif; --brand-spacing:.5px; --eyebrow-spacing:2.6px; } /* ---------- Theme: heritage ---------- */ [data-theme="heritage"]{ --bg:#f3ece0; --bg-2:#ece2d2; --surface:#fbf7ef; --surface-2:#f1e9da; --border:#ddd0bb; --border-strong:#c8b89c; --text:#2a2420; --muted:#6f6354; --accent:#8a5d18; --accent-2:#a8761f; --accent-contrast:#fdf8ee; --accent-soft:rgba(138,93,24,.10); --ring:rgba(138,93,24,.32); --good:#3f7d4f; --warn:#a8761f; --bad:#a8412c; --header-bg:rgba(251,247,239,.86); --band-bg:linear-gradient(150deg,#22382c,#1a2c22); --band-text:#f3ece0; --band-muted:#bcae95; --grid-show:none; --orb:rgba(138,93,24,.14); --shadow-card:0 1px 2px rgba(60,46,28,.07),0 12px 30px rgba(60,46,28,.10); --shadow-lg:0 28px 64px rgba(60,46,28,.20); --glow:none; --radius:8px; --radius-sm:6px; --radius-lg:14px; --font-head:"Fraunces","Georgia",serif; --font-body:"Inter","Segoe UI",system-ui,sans-serif; --font-brand:"Fraunces","Georgia",serif; --brand-spacing:.2px; } /* ---------- Theme: dunkel ---------- */ [data-theme="dunkel"]{ --bg:#13161b; --bg-2:#171b21; --surface:#1b2027; --surface-2:#212833; --border:#2c333d; --border-strong:#3a434f; --text:#e8eaef; --muted:#98a2b0; --accent:#cda35e; --accent-2:#e0bd7e; --accent-contrast:#1a1407; --accent-soft:rgba(205,163,94,.12); --ring:rgba(205,163,94,.34); --good:#4cc38a; --warn:#e0b252; --bad:#e06a5a; --header-bg:rgba(19,22,27,.78); --band-bg:linear-gradient(135deg,#1d242e,#14171c); --band-text:#e8eaef; --band-muted:#98a2b0; --grid-line:rgba(140,155,170,.07); --grid-show:block; --grid-op:1; --orb:rgba(205,163,94,.10); --shadow-card:0 1px 2px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.45); --shadow-lg:0 30px 80px rgba(0,0,0,.55); --glow:0 0 0 1px rgba(205,163,94,.10); --radius:11px; --radius-sm:8px; --radius-lg:16px; --font-head:"Space Grotesk","Segoe UI",system-ui,sans-serif; --font-body:"Inter","Segoe UI",system-ui,sans-serif; --font-brand:"Space Grotesk","Segoe UI",sans-serif; } /* ---------- Theme: clean ---------- */ [data-theme="clean"]{ --bg:#ffffff; --bg-2:#f6f8fb; --surface:#ffffff; --surface-2:#f8fafc; --border:#e6e9ef; --border-strong:#d4dae3; --text:#0f172a; --muted:#64748b; --accent:#2563eb; --accent-2:#4f7cf0; --accent-contrast:#ffffff; --accent-soft:rgba(37,99,235,.07); --ring:rgba(37,99,235,.26); --good:#16a34a; --warn:#d97706; --bad:#dc2626; --header-bg:rgba(255,255,255,.85); --band-bg:linear-gradient(135deg,#0f172a,#1e293b); --band-text:#e2e8f0; --band-muted:#94a3b8; --grid-show:none; --orb:rgba(37,99,235,.07); --shadow-card:0 1px 2px rgba(15,23,42,.04),0 12px 30px rgba(15,23,42,.06); --shadow-lg:0 26px 60px rgba(15,23,42,.10); --glow:none; --radius:14px; --radius-sm:10px; --radius-lg:22px; --font-head:"Inter","Segoe UI",system-ui,sans-serif; --font-body:"Inter","Segoe UI",system-ui,sans-serif; --font-brand:"Inter","Segoe UI",sans-serif; --brand-spacing:-.2px; } /* ===================== Base ===================== */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.16;letter-spacing:-.01em;color:var(--text)} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px} .accent{color:var(--accent)} .muted{color:var(--muted)} .eyebrow{font-family:var(--font-body);font-weight:600;letter-spacing:var(--eyebrow-spacing);text-transform:uppercase;font-size:.74rem;color:var(--accent)} section{position:relative} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-head);font-weight:600;letter-spacing:0; padding:.8rem 1.5rem;border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;font-size:.98rem;transition:.2s;line-height:1.1} .btn-primary{background:var(--accent);color:var(--accent-contrast);box-shadow:var(--shadow-card)} .btn-primary:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:var(--shadow-lg)} .btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn-block{width:100%;justify-content:center} /* ---------- Header ---------- */ header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:var(--header-bg);border-bottom:1px solid var(--border)} .nav{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-brand);font-weight:700;font-size:1.18rem;letter-spacing:var(--brand-spacing)} .brand .logo{width:34px;height:34px;border:1.5px solid var(--accent);border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--accent)} .brand .logo svg{width:20px;height:20px} .brand b{color:var(--accent);font-weight:700} .menu{display:flex;gap:1.6rem;align-items:center;font-family:var(--font-head);font-weight:500} .menu a{color:var(--muted);transition:.2s} .menu a:hover{color:var(--text)} .nav-cta{display:flex;align-items:center;gap:.8rem} /* ---------- Hero ---------- */ .hero{position:relative;padding:6rem 0 5rem;overflow:hidden} .grid-bg{position:absolute;inset:0;z-index:0;display:var(--grid-show);opacity:var(--grid-op); background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 30%,transparent 75%);animation:drift 30s linear infinite} @keyframes drift{from{background-position:0 0}to{background-position:48px 48px}} .glow-orb{position:absolute;top:-12%;right:-6%;width:620px;height:620px;z-index:0;background:radial-gradient(circle,var(--orb),transparent 62%);pointer-events:none} .scanline{display:none} .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center} .hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem);margin:1.1rem 0 1.2rem;font-weight:600} .hero p.lead{font-size:1.16rem;color:var(--muted);max-width:560px;margin-bottom:2rem} .hero-actions{display:flex;gap:1rem;flex-wrap:wrap} .wire-wrap{display:grid;place-items:center;min-height:320px} .wire-card{position:relative;width:330px;height:330px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-lg);display:grid;place-items:center;overflow:hidden} .wire-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:28px 28px;opacity:.35} .wire-card .badge{position:absolute;top:14px;left:14px;font-family:var(--font-head);font-size:.7rem;letter-spacing:1.5px;color:var(--accent);border:1px solid var(--border-strong);border-radius:6px;padding:4px 10px;background:var(--accent-soft)} .spin{width:200px;height:200px;animation:spin 36s linear infinite;filter:drop-shadow(0 2px 8px rgba(0,0,0,.16))} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- Sections ---------- */ .sec{padding:5rem 0} .sec-head{text-align:center;max-width:680px;margin:0 auto 3rem} .sec-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:.6rem 0 1rem} .sec-head p{color:var(--muted);font-size:1.05rem} .alt{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem 1.5rem;box-shadow:var(--shadow-card);transition:.25s} .card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow-lg)} .card .ico{width:52px;height:52px;border-radius:var(--radius-sm);display:grid;place-items:center;margin-bottom:1.1rem;background:var(--accent-soft);border:1px solid var(--border);color:var(--accent)} .card .ico svg{width:26px;height:26px} .card h3{font-size:1.25rem;margin-bottom:.5rem} .card p{color:var(--muted);font-size:.96rem} .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;counter-reset:step} .step{padding:1.6rem 1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);text-align:center} .step .num{counter-increment:step;font-family:var(--font-brand);font-weight:700;font-size:1.25rem;color:var(--accent);width:54px;height:54px;margin:0 auto 1rem;border:1.5px solid var(--accent);border-radius:50%;display:grid;place-items:center;background:var(--accent-soft)} .step .num::before{content:"0" counter(step)} .step h4{font-size:1.04rem;margin-bottom:.4rem;font-weight:600} .step p{color:var(--muted);font-size:.88rem} .split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center} .panel{background:linear-gradient(160deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.2rem;box-shadow:var(--shadow-card);position:relative;overflow:hidden} .panel ul{list-style:none} .panel li{padding:.5rem 0 .5rem 1.6rem;position:relative;color:var(--muted)} .panel li::before{content:"";position:absolute;left:0;top:.95rem;width:7px;height:7px;border-radius:2px;background:var(--accent)} /* ---------- CTA-Band ---------- */ .ctaband{background:var(--band-bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;padding:4.5rem 0;color:var(--band-text)} .ctaband h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-bottom:1rem;color:var(--band-text)} .ctaband .eyebrow{color:var(--band-muted)} .ctaband p{color:var(--band-muted);font-size:1.08rem;max-width:560px;margin:0 auto 2rem} .ctaband .hero-actions{justify-content:center} .ctaband .btn-ghost{border-color:rgba(255,255,255,.28);color:var(--band-text)} .ctaband .btn-ghost:hover{border-color:var(--band-text);color:#fff} /* ---------- Footer ---------- */ footer{background:var(--bg-2);border-top:1px solid var(--border);padding:3.2rem 0 2rem} .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem} .fcols h4{font-size:.98rem;letter-spacing:.3px;margin-bottom:1rem;font-weight:600} .fcols a,.fcols p{display:block;color:var(--muted);font-size:.93rem;padding:.26rem 0;transition:.2s} .fcols a:hover{color:var(--accent)} .flegal{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding:1.2rem 0;border-top:1px solid var(--border)} .flegal a{color:var(--muted);font-size:.88rem} .flegal a:hover{color:var(--accent)} .fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--muted);font-size:.85rem;padding-top:1rem;border-top:1px solid var(--border)} /* ===================== Formulare ===================== */ .formwrap{max-width:820px;margin:0 auto} .field{margin-bottom:1.2rem} .field label{display:block;font-family:var(--font-head);font-weight:600;margin-bottom:.4rem;font-size:.94rem} .field .req{color:var(--accent)} input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text); padding:.78rem 1rem;font-family:var(--font-body);font-size:1rem;transition:.18s} input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)} textarea{min-height:130px;resize:vertical} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .checks{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem} .checks label{display:flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:500;color:var(--muted)} .checks input{width:auto} .consent{display:flex;gap:.6rem;align-items:flex-start;color:var(--muted);font-size:.92rem} .consent input{width:auto;margin-top:.25rem} .hint{color:var(--muted);font-size:.85rem;margin-top:.3rem} .error{color:var(--bad);font-size:.85rem;margin-top:.3rem} .alert{padding:1rem 1.2rem;border-radius:var(--radius-sm);margin-bottom:1.4rem;border:1px solid} .alert-success{background:color-mix(in srgb,var(--good) 12%,transparent);border-color:color-mix(in srgb,var(--good) 45%,transparent);color:var(--good)} .alert-error{background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)} /* ===================== App-Layout (Auth/Portal) ===================== */ .appbar{border-bottom:1px solid var(--border);background:var(--surface)} .appbar .nav{height:66px} .authwrap{min-height:calc(100vh - 66px);display:grid;place-items:center;padding:3rem 1rem} .authcard{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.4rem;box-shadow:var(--shadow-lg)} .authcard h1{font-size:1.55rem;margin-bottom:.4rem} .authcard .sub{color:var(--muted);margin-bottom:1.6rem;font-size:.95rem} .authcard .alt-link{text-align:center;margin-top:1.2rem;color:var(--muted);font-size:.9rem} .authcard .alt-link a{color:var(--accent)} .page{padding:2.5rem 0;min-height:70vh} .page h1{font-size:2rem;margin-bottom:.4rem} .page>.container>p.lead{color:var(--muted);margin-bottom:2rem} .legalbody{max-width:820px} .legalbody h2{font-size:1.2rem;margin:1.6rem 0 .6rem} .legalbody p,.legalbody li{color:var(--muted);margin-bottom:.6rem} .legalbody pre{white-space:pre-wrap;font-family:var(--font-body);color:var(--muted)} /* ---------- KPI + Tabelle ---------- */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:1.6rem} .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.3rem;box-shadow:var(--shadow-card)} .kpi .lbl{color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:.84rem} .kpi .val{font-family:var(--font-brand);font-weight:700;font-size:1.85rem;margin-top:.4rem;color:var(--text)} .tablecard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow-card);overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:.92rem} th{text-align:left;color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:.76rem;letter-spacing:.4px;text-transform:uppercase;padding:.6rem .7rem;border-bottom:1px solid var(--border)} td{padding:.7rem .7rem;border-bottom:1px solid var(--border);vertical-align:top} tr:last-child td{border-bottom:0} .st{font-family:var(--font-head);font-weight:600;font-size:.76rem;padding:3px 10px;border-radius:20px} .st.neu{background:var(--accent-soft);color:var(--accent)} .badgechip{display:inline-block;font-size:.72rem;background:var(--accent-soft);border:1px solid var(--border);color:var(--accent);border-radius:20px;padding:1px 9px;font-family:var(--font-head);font-weight:600;margin:1px} /* ===================== Cookie-Banner ===================== */ .cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--surface);backdrop-filter:blur(12px);border-top:1px solid var(--border-strong);box-shadow:var(--shadow-lg);transform:translateY(120%);transition:.4s;padding:1.3rem 0} .cc-banner.show{transform:none} .cc-inner{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap} .cc-text{flex:1;min-width:280px} .cc-text h4{font-size:1.08rem;margin-bottom:.4rem} .cc-text p{color:var(--muted);font-size:.9rem} .cc-text a{color:var(--accent)} .cc-actions{display:flex;gap:.7rem;flex-wrap:wrap} .cc-btn{font-family:var(--font-head);font-weight:600;padding:.68rem 1.2rem;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border-strong);background:transparent;color:var(--text)} .cc-btn:hover{border-color:var(--accent);color:var(--accent)} .cc-btn.primary{background:var(--accent);color:var(--accent-contrast);border-color:transparent} .cc-prefs{display:none;margin-top:1.2rem;border-top:1px solid var(--border);padding-top:1.2rem;width:100%;flex-direction:column;gap:.7rem} .cc-prefs.show{display:flex} .cc-cat{display:flex;align-items:center;gap:1rem;justify-content:space-between;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem 1.1rem} .cc-cat h5{font-family:var(--font-head);font-size:.98rem} .cc-cat p{color:var(--muted);font-size:.83rem} .cc-tog{position:relative;width:46px;height:26px;flex:none} .cc-tog input{opacity:0;width:0;height:0;position:absolute} .cc-tog .sl{position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:30px;transition:.25s;cursor:pointer} .cc-tog .sl::before{content:"";position:absolute;left:3px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.25s} .cc-tog input:checked+.sl{background:var(--accent-soft);border-color:var(--accent)} .cc-tog input:checked+.sl::before{transform:translateX(20px);background:var(--accent)} .cc-tog input:disabled+.sl{opacity:.55} /* ===================== Zusatz-Sektionen ===================== */ /* USP-/Vertrauensleiste */ .uspbar{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .usprow{display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:center;padding:1.1rem 24px} .uspitem{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--muted)} .uspitem svg{color:var(--accent);flex:none} /* Definitionsliste (Technik/Material) */ .deflist{display:flex;flex-direction:column;gap:.9rem} .defitem{display:flex;flex-direction:column;gap:.15rem;padding-bottom:.9rem;border-bottom:1px solid var(--border)} .defitem:last-child{border-bottom:0;padding-bottom:0} .defitem strong{font-family:var(--font-head);font-weight:600} .defitem span{color:var(--muted);font-size:.93rem} /* Kennzahlen */ .statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem} .statbox{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem 1rem;box-shadow:var(--shadow-card)} .statval{font-family:var(--font-brand);font-weight:700;font-size:1.6rem;color:var(--accent);line-height:1.1} .statlbl{color:var(--muted);font-size:.9rem;margin-top:.4rem} /* Referenzen */ .refgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem} .refcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);transition:.25s} .refcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .refimg{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden} .refimg>img{width:100%;height:100%;object-fit:cover;display:block} .refimg-before{position:absolute;left:12px;bottom:12px;width:34%;height:auto;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--surface);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.3)} .reftag{position:absolute;top:10px;right:10px;font-family:var(--font-head);font-size:.64rem;letter-spacing:1px;text-transform:uppercase;background:var(--accent);color:var(--accent-contrast);padding:3px 8px;border-radius:6px} .refimg-empty{display:grid;place-items:center;color:var(--border-strong)} .refimg-empty svg{width:56px;height:56px} .refbody{padding:1.3rem} .refbody h3{font-size:1.15rem;margin-bottom:.3rem} .refmeta{font-family:var(--font-head);font-weight:600;color:var(--accent);font-size:.85rem;margin-bottom:.5rem} .refbody .muted{font-size:.92rem;margin-bottom:.6rem} /* Kundenstimmen */ .quotecard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:.7rem;margin:0} .quotecard .stars{color:var(--accent);letter-spacing:2px} .quotecard blockquote{font-size:1.02rem;line-height:1.6;margin:0;border:0;padding:0} .quotecard figcaption{font-family:var(--font-head);font-weight:600;margin-top:auto} .quotecard figcaption span{display:block;color:var(--muted);font-weight:500;font-size:.86rem} /* Checkliste */ .checklist{list-style:none;display:flex;flex-direction:column;gap:.75rem} .checklist li{position:relative;padding-left:1.9rem;color:var(--muted)} .checklist li::before{content:"";position:absolute;left:0;top:.1rem;width:18px;height:18px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent)} .checklist li::after{content:"";position:absolute;left:6px;top:.38rem;width:6px;height:3px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)} /* FAQ */ .faqwrap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.7rem} .faqitem{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)} .faqitem summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 1.2rem;font-family:var(--font-head);font-weight:600} .faqitem summary::-webkit-details-marker{display:none} .faqplus{position:relative;width:14px;height:14px;flex:none} .faqplus::before,.faqplus::after{content:"";position:absolute;background:var(--accent);transition:.2s} .faqplus::before{left:0;top:6px;width:14px;height:2px} .faqplus::after{left:6px;top:0;width:2px;height:14px} .faqitem[open] .faqplus::after{transform:rotate(90deg);opacity:0} .faqa{padding:0 1.2rem 1.15rem;color:var(--muted)} /* ===================== Responsive ===================== */ @media(max-width:960px){.hero-grid,.split{grid-template-columns:1fr}.wire-wrap{order:-1;min-height:240px}.cards,.steps{grid-template-columns:repeat(2,1fr)}.kpis,.statgrid{grid-template-columns:repeat(2,1fr)}.refgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.menu{display:none}.cards,.steps,.grid2,.fcols,.kpis,.statgrid,.refgrid{grid-template-columns:1fr}}