/* ================================================================= verkauf_seiten.css — gemeinsames Design aller Verkaufsseiten Teil 1: Basis, 1:1 aus e_rechnung_software.php übernommen Teil 2: neue Bausteine für die Verkaufsseiten (Präfix vk-) ================================================================= */ /* ================================================================= GESCOPTES CSS - alles unter #container (wie invoice_api.php) ================================================================= */ #container { background: #ffffff; color: #1d1d1f; font-family: 'Roboto', sans-serif; font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; font-size: 16px; position: relative; width: 100%; overflow-x: clip; } #container h1, #container h2, #container h3, #container h4 { font-family: 'Roboto Serif', serif; font-variation-settings: 'wdth' 75; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: #1d1d1f; margin: 0; } #container p { font-size: clamp(1rem, 1.1vw, 1.15rem); color: #6e6e73; line-height: 1.7; margin: 0; } #container a { text-decoration: none; color: inherit; } #container ul { margin: 0; padding: 0; } #container .container { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 80px); width: 100%; box-sizing: border-box; } #container .section { padding: clamp(70px, 10vw, 140px) 0; } #container .accent { color: #006FCF; } #container .badge-label { display: inline-block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #006FCF; margin-bottom: 14px; } #container .section-intro { max-width: 720px; margin: 0 auto 56px; text-align: center; } #container .section-intro h2 { font-size: clamp(1.8rem, 3vw, 3rem); margin-bottom: 16px; } #container .section-intro p { margin: 0 auto; } #container .btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 30px; background: #006FCF; color: #ffffff; border-radius: 50px; font-weight: 500; font-size: 1rem; border: 1px solid transparent; cursor: pointer; transition: all 0.3s ease; font-family: 'Roboto', sans-serif; line-height: 1.2; } #container .btn:hover { transform: scale(1.02); box-shadow: 0 12px 35px rgba(0,111,207,0.25); } #container .btn.secondary { background: transparent; color: #006FCF; border-color: rgba(0,111,207,0.25); } #container .btn.secondary:hover { background: rgba(0,111,207,0.08); border-color: #006FCF; } #container .btn.white { background: #ffffff; color: #006FCF; } #container .btn.glass { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #fff; } #container .rs-ico { flex-shrink: 0; } #container .muted-small { font-size: 0.8rem; color: #86868b; } /* ---------- Hero ---------- */ #container .hero { position: relative; overflow: hidden; background: #ffffff; padding: clamp(110px, 12vw, 150px) 0 clamp(60px, 7vw, 90px); } #container .glow-bg { position: absolute; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(0,111,207,0.1) 0%, transparent 65%); top: -25%; right: -20%; filter: blur(90px); pointer-events: none; } #container .glow-bg-2 { position: absolute; width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(52,199,89,0.06) 0%, transparent 70%); bottom: -10%; left: -10%; filter: blur(80px); pointer-events: none; } #container .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 4vw, 70px); align-items: center; } #container .hero h1 { font-size: clamp(2.5rem, 5vw, 5.2rem); line-height: 1.04; letter-spacing: -0.03em; margin: 8px 0 24px; } #container .hero-lead { font-size: clamp(1.08rem, 1.3vw, 1.28rem) !important; max-width: 560px; margin-bottom: 34px !important; } #container .hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; } #container .hero-trust { margin-top: 44px; display: flex; gap: 10px 24px; flex-wrap: wrap; } #container .trust-item { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 500; color: #6e6e73; } #container .trust-item .rs-ico { color: #34c759; } #container .trust-item.dsgvo { background: rgba(52,199,89,0.08); border: 1px solid rgba(52,199,89,0.25); padding: 4px 12px; border-radius: 50px; color: #1a7a3a; } /* Hero-Visual: App-Fenster + schwebende Rechnung */ #container .hv { position: relative; min-height: 470px; } #container .hv-app { position: absolute; top: 10px; left: 0; right: 7%; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,20,60,0.16), 0 0 0 1px rgba(0,0,0,0.05); overflow: hidden; } #container .hv-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #f5f5f7; border-bottom: 1px solid #ececf0; } #container .hv-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d8d8de; display: block; } #container .hv-bar span { margin-left: 10px; font-size: 0.72rem; color: #86868b; font-weight: 500; } #container .hv-body { padding: 16px 18px 18px; } #container .hv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } #container .hv-kpi { border: 1px solid #ececf0; border-radius: 12px; padding: 10px 12px; } #container .hv-kpi small { display: block; font-size: 0.66rem; color: #86868b; } #container .hv-kpi b { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.05rem; color: #1d1d1f; } #container .hv-kpi em { font-style: normal; font-size: 0.64rem; color: #1a7a3a; background: #e9f7ee; border-radius: 5px; padding: 1px 5px; margin-left: 4px; } #container .hv-kpi.warn b { color: #c53030; } #container .hv-rows { border-top: 1px solid #ececf0; } #container .hv-row { display: grid; grid-template-columns: 1.1fr 1.5fr 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid #f2f2f5; font-size: 0.74rem; color: #1d1d1f; } #container .hv-row b { font-weight: 600; } #container .hv-row .amt { text-align: right; font-weight: 500; } #container .pill { display: inline-block; font-size: 0.66rem; font-weight: 500; padding: 2px 8px; border-radius: 50px; white-space: nowrap; } #container .pill.paid { background: #e6f6ec; color: #16713e; } #container .pill.open { background: #e6f0fb; color: #0b5cad; } #container .pill.over { background: #fdecec; color: #b42323; } #container .pill.part { background: #fff4d9; color: #8a5a00; } #container .pill.canc { background: #eeeff2; color: #5b6070; } #container .hv-doc { position: absolute; right: 0; bottom: 0; width: 46%; background: #fff; border-radius: 14px; box-shadow: -12px 24px 60px rgba(0,20,60,0.2), 0 0 0 1px rgba(0,0,0,0.05); padding: 18px 18px 16px; font-size: 0.7rem; animation: rs-float 7s ease-in-out infinite; } #container .hv-doc .d-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } #container .hv-doc .d-logo { width: 54px; height: 9px; border-radius: 3px; background: #006FCF; } #container .hv-doc .d-title { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1rem; } #container .hv-doc .d-line { height: 5px; border-radius: 3px; background: #ececf0; margin: 5px 0; } #container .hv-doc .d-sum { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; padding-top: 10px; border-top: 2px solid #1d1d1f; } #container .hv-doc .d-sum b { font-size: 0.92rem; font-weight: 600; } #container .hv-badge { position: absolute; top: -12px; left: 16px; background: #34c759; color: #fff; font-size: 0.68rem; font-weight: 500; padding: 4px 11px; border-radius: 50px; display: flex; gap: 5px; align-items: center; } #container .hv-xml { position: absolute; bottom: -11px; right: 14px; background: #000e28; color: rgba(255,255,255,0.9); font-size: 0.66rem; padding: 4px 11px; border-radius: 50px; font-family: 'Courier New', monospace; } #container .hv-paid { position: absolute; left: 4%; bottom: -34px; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 18px 40px rgba(0,20,60,0.16), 0 0 0 1px rgba(0,0,0,0.04); display: flex; gap: 10px; align-items: center; font-size: 0.74rem; animation: rs-float 8s ease-in-out -2s infinite; } #container .hv-paid .ic { width: 30px; height: 30px; border-radius: 50%; background: #e6f6ec; color: #16713e; display: flex; align-items: center; justify-content: center; } #container .hv-paid b { display: block; font-weight: 600; font-size: 0.78rem; } @keyframes rs-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ---------- Kennzahlen-Leiste ---------- */ #container .stats-bar { background: #f5f5f7; padding: 30px 0; border-top: 1px solid rgba(0,0,0,0.04); border-bottom: 1px solid rgba(0,0,0,0.04); } #container .stats-inner { display: flex; justify-content: center; gap: clamp(24px, 5vw, 80px); flex-wrap: wrap; } #container .stat-item { text-align: center; } #container .stat-number { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.7rem); color: #1d1d1f; line-height: 1; margin-bottom: 6px; } #container .stat-label { font-size: 0.82rem; color: #86868b; } /* ---------- Pflicht-Zeitstrahl ---------- */ #container .law { background: #000e28; color: #fff; } #container .law h2 { color: #fff; } #container .law .section-intro p { color: rgba(255,255,255,0.62); } #container .tl { position: relative; margin: 20px auto 0; max-width: 1100px; padding-top: 34px; } #container .tl-track { position: absolute; left: 0; right: 0; top: 50px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.1); } #container .tl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #34c759, #006FCF); } #container .tl-now { position: absolute; top: 18px; transform: translateX(-50%); font-size: 0.72rem; font-weight: 600; color: #000e28; background: #fff; border-radius: 50px; padding: 3px 10px; white-space: nowrap; } #container .tl-now::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 14px; background: #fff; transform: translateX(-50%); } #container .tl-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } #container .tl-step { padding-top: 36px; position: relative; } #container .tl-step::before { content: ""; position: absolute; top: 10px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #000e28; border: 3px solid #006FCF; } #container .tl-step.done::before { border-color: #34c759; background: #34c759; } #container .tl-date { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.35rem; color: #fff; } #container .tl-step h4 { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.98rem; color: #fff; margin: 6px 0 6px; } #container .tl-step p { font-size: 0.86rem; color: rgba(255,255,255,0.58); } #container .law-note { margin-top: 46px; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; } #container .law-note .ok { display: inline-flex; gap: 8px; align-items: center; background: rgba(52,199,89,0.12); border: 1px solid rgba(52,199,89,0.35); color: #b6f0c6; padding: 9px 16px; border-radius: 50px; font-size: 0.92rem; font-weight: 500; } #container .law-note small { color: rgba(255,255,255,0.4); font-size: 0.76rem; width: 100%; } /* ---------- Kreislauf ---------- */ #container .cycle-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; } #container .cycle { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; } #container .cycle svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; } #container .cycle .node { position: absolute; transform: translate(-50%, -50%); width: 150px; text-align: center; } #container .cycle .node .bub { width: 62px; height: 62px; margin: 0 auto 8px; border-radius: 50%; background: #fff; color: #006FCF; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0,111,207,0.18), 0 0 0 1px rgba(0,111,207,0.14); } #container .cycle .node b { display: block; font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.02rem; color: #1d1d1f; } #container .cycle .node .node-sub { display: none; } #container .cycle .node small { display: block; font-size: 0.74rem; color: #86868b; line-height: 1.35; margin-top: 2px; } #container .cycle .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 170px; } #container .cycle .center b { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.3rem; line-height: 1.15; color: #1d1d1f; display: block; } #container .cycle .center small { font-size: 0.78rem; color: #86868b; } #container .cycle-list li { list-style: none; display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid #ececf0; } #container .cycle-list li:last-child { border-bottom: 0; } #container .cycle-list .num { width: 30px; height: 30px; border-radius: 50%; background: rgba(0,111,207,0.08); color: #006FCF; font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #container .cycle-list h4 { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.02rem; margin-bottom: 3px; } #container .cycle-list p { font-size: 0.92rem; } /* ---------- Bento / Karten (wie API-Seite) ---------- */ #container .bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } #container .card { background: #ffffff; border-radius: 26px; padding: clamp(24px, 2.6vw, 36px); box-shadow: 0 4px 16px rgba(0,0,0,0.05); display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,0.05); } #container .card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.09); } #container .card-icon { width: 48px; height: 48px; background: rgba(0,111,207,0.08); border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: #006FCF; flex-shrink: 0; } #container .card h3 { font-size: clamp(1.25rem, 1.5vw, 1.6rem); margin-bottom: 10px; } #container .card p { font-size: 0.95rem; } #container .card ul { list-style: none; margin-top: 16px; } #container .card ul li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; font-size: 0.9rem; color: #1d1d1f; font-weight: 400; line-height: 1.4; } #container .card ul li .rs-ico { color: #006FCF; margin-top: 1px; } #container .col-4 { grid-column: span 4; } #container .col-5 { grid-column: span 5; } #container .col-6 { grid-column: span 6; } #container .col-7 { grid-column: span 7; } #container .col-8 { grid-column: span 8; } #container .col-12 { grid-column: span 12; } #container .card-dark { background: #000e28; border-color: transparent; } #container .card-dark h3, #container .card-dark ul li { color: #fff; } #container .card-dark p { color: rgba(255,255,255,0.6); } #container .card-dark .card-icon { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); } #container .card-dark ul li .rs-ico { color: #34c759; } #container .card-blue { background: #006FCF; border-color: transparent; } #container .card-blue h3, #container .card-blue ul li { color: #fff; } #container .card-blue p { color: rgba(255,255,255,0.78); } #container .card-blue .card-icon { background: rgba(255,255,255,0.16); color: #fff; } #container .card-blue ul li .rs-ico { color: #fff; } #container .format-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; } #container .format { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); border-radius: 14px; padding: 12px 14px; } #container .format b { display: block; color: #fff; font-size: 0.95rem; font-weight: 500; } #container .format span { font-size: 0.78rem; color: rgba(255,255,255,0.55); } #container .tax-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } #container .tax-chip { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 0.8rem; padding: 5px 12px; border-radius: 50px; } #container .num-demo { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; font-family: 'Courier New', monospace; font-size: 0.82rem; } #container .num-demo span { background: #f5f5f7; border-radius: 8px; padding: 6px 10px; color: #1d1d1f; } #container .num-demo span.draft { color: #86868b; border: 1px dashed #d2d2d7; background: #fff; } /* ---------- Design-Demo ---------- */ #container .grey { background: #f5f5f7; } #container .demo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: start; } #container .demo-ctrl h3 { font-size: 1.05rem; font-family: 'Roboto', sans-serif; font-weight: 500; margin: 26px 0 10px; } #container .demo-ctrl h3:first-child { margin-top: 0; } #container .seg { display: inline-flex; background: #fff; border: 1px solid #e3e3e8; border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; } #container .seg button { border: 0; background: transparent; padding: 9px 16px; border-radius: 9px; font: inherit; font-size: 0.9rem; color: #515154; cursor: pointer; font-weight: 400; } #container .seg button.on { background: #006FCF; color: #fff; font-weight: 500; } #container .swatches { display: flex; gap: 10px; flex-wrap: wrap; } #container .swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #d2d2d7; cursor: pointer; padding: 0; } #container .swatch.on { box-shadow: 0 0 0 2px #1d1d1f; } #container .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.92rem; color: #1d1d1f; font-weight: 400; } #container .switch input { width: 18px; height: 18px; accent-color: #006FCF; } #container .demo-list { list-style: none; margin-top: 28px; display: grid; gap: 10px; } #container .demo-list li { display: flex; gap: 10px; font-size: 0.92rem; color: #1d1d1f; font-weight: 400; line-height: 1.45; } #container .demo-list li .rs-ico { color: #006FCF; margin-top: 2px; } /* die Musterrechnung */ #container .inv { --acc: #006fcf; background: #fff; border-radius: 10px; box-shadow: 0 30px 70px rgba(0,20,60,0.14), 0 0 0 1px rgba(0,0,0,0.05); max-width: 560px; margin: 0 auto; padding: 7% 7% 5%; position: relative; font-size: clamp(0.56rem, 0.95vw, 0.76rem); color: #2a2a2e; display: flex; flex-direction: column; transition: all .35s ease; overflow: hidden; } #container .inv .i-band { display: none; } #container .inv .i-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } #container .inv .i-logo { display: flex; align-items: center; gap: 7px; font-weight: 600; color: #1d1d1f; font-size: 1.1em; } #container .inv .i-logo i { width: 22px; height: 22px; border-radius: 6px; background: var(--acc); display: block; transition: background .35s; } #container .inv .i-title { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 2.3em; color: var(--acc); transition: color .35s; line-height: 1; } #container .inv .i-addr { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8% 0 6%; } #container .inv .i-sender { font-size: 0.82em; color: #86868b; border-bottom: 1px solid #ececf0; padding-bottom: 3px; } #container .inv .i-buyer b { display: block; color: #1d1d1f; font-weight: 600; } #container .inv .i-meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; align-self: start; justify-self: end; } #container .inv .i-meta span { color: #86868b; display: flex; align-items: center; gap: 4px; } #container .inv .i-meta span svg { color: var(--acc); } #container .inv .i-meta b { font-weight: 500; color: #1d1d1f; text-align: right; } #container .inv .i-row2 { display: grid; grid-template-columns: 1fr auto; gap: 12px; } #container .inv table { width: 100%; border-collapse: collapse; margin-top: 4%; } #container .inv th { text-align: left; font-weight: 600; font-size: 0.86em; color: #1d1d1f; border-bottom: 2px solid var(--acc); padding: 5px 4px; transition: border-color .35s; } #container .inv td { padding: 6px 4px; border-bottom: 1px solid #f0f0f3; } #container .inv th:last-child, #container .inv td:last-child { text-align: right; } #container .inv .i-tot { margin-top: 4%; margin-left: auto; width: 52%; } #container .inv .i-tot div { display: flex; justify-content: space-between; padding: 2px 0; } #container .inv .i-tot .g { border-top: 2px solid #1d1d1f; margin-top: 4px; padding-top: 5px; font-weight: 600; font-size: 1.15em; color: #1d1d1f; } #container .inv .i-note { margin-top: 5%; color: #515154; line-height: 1.5; } #container .inv .i-pay { margin-top: 4%; display: flex; gap: 12px; align-items: center; padding-top: 5%; } #container .inv .i-pay .rs-qr { width: 17%; height: auto; border-radius: 4px; } #container .inv .i-pay small { color: #86868b; font-size: 0.86em; line-height: 1.4; } #container .inv .i-pay small b { color: #1d1d1f; font-weight: 500; display: block; } #container .inv .i-foot { margin-top: 4%; padding-top: 3%; border-top: 1px solid #ececf0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 0.74em; color: #86868b; } #container .inv.no-qr .i-pay .rs-qr { display: none; } /* Modern */ #container .inv[data-t="modern"] { padding-top: 0; } #container .inv[data-t="modern"] .i-band { display: flex; justify-content: space-between; align-items: center; margin: 0 -8% 7%; padding: 6% 8% 5%; background: var(--acc); color: #fff; transition: background .35s; } #container .inv[data-t="modern"] .i-band .i-title { color: #fff; } #container .inv[data-t="modern"] .i-band .i-logo { color: #fff; } #container .inv[data-t="modern"] .i-band .i-logo i { background: #fff; } #container .inv[data-t="modern"] .i-head { display: none; } #container .inv[data-t="modern"] .i-addr { grid-template-columns: 1fr 1fr; margin-top: 0; } #container .inv[data-t="modern"] .i-sender { border: 0; color: #1d1d1f; } #container .inv[data-t="modern"] th { background: color-mix(in srgb, var(--acc) 10%, #fff); border-bottom: 0; } #container .inv[data-t="modern"] .i-meta { justify-self: stretch; grid-template-columns: repeat(4, auto); background: #f7f7f9; padding: 8px 10px; border-radius: 6px; } #container .inv[data-t="modern"] .i-row2 { grid-template-columns: 1fr; } /* RTL */ #container .inv[data-t="rtl"] { direction: rtl; } #container .inv[data-t="rtl"] th:last-child, #container .inv[data-t="rtl"] td:last-child { text-align: left; } #container .inv[data-t="rtl"] th { text-align: right; } #container .inv[data-t="rtl"] .i-meta { justify-self: start; } #container .inv[data-t="rtl"] .i-meta b { text-align: left; } #container .inv[data-t="rtl"] .i-tot { margin-left: 0; margin-right: auto; } /* Betraege und deutsche Adresszeilen behalten ihre Leserichtung */ #container .inv[data-t="rtl"] td:last-child, #container .inv[data-t="rtl"] .i-tot span:last-child, #container .inv[data-t="rtl"] .i-buyer bdi { direction: ltr; unicode-bidi: isolate; } #container .inv:not([data-t="rtl"]) .rtl, #container .inv[data-t="rtl"] .ltr { display: none !important; } #container .demo-hint { text-align: center; margin-top: 14px; font-size: 0.8rem; color: #86868b; } /* Scan-Codes */ #container .codes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; } #container .code-card { background: #fff; border: 1px solid #ececf0; border-radius: 18px; padding: 18px; text-align: center; } #container .code-card .rs-qr, #container .code-card .rs-dm { margin: 0 auto 10px; display: block; } #container .code-card b { display: block; font-size: 0.9rem; font-weight: 500; color: #1d1d1f; } #container .code-card small { font-size: 0.78rem; color: #86868b; } /* ---------- Zahlungen ---------- */ #container .pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; } #container .life { background: #fff; border-radius: 24px; box-shadow: 0 20px 60px rgba(0,20,60,0.1), 0 0 0 1px rgba(0,0,0,0.04); padding: clamp(22px, 3vw, 34px); } #container .life-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 10px; flex-wrap: wrap; } #container .life-head b { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.15rem; } #container .life ol { list-style: none; margin: 0; padding: 0; position: relative; } #container .life ol::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: #ececf0; } #container .life li { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: start; padding: 10px 0; } #container .life .dot { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #d2d2d7; display: flex; align-items: center; justify-content: center; color: #86868b; position: relative; z-index: 1; } #container .life li.blue .dot { border-color: #006FCF; color: #006FCF; } #container .life li.amber .dot { border-color: #eda100; color: #b07800; } #container .life li.red .dot { border-color: #d93a3a; color: #d93a3a; } #container .life li.green .dot { border-color: #1f9d57; background: #1f9d57; color: #fff; } #container .life li b { display: block; font-weight: 500; font-size: 0.95rem; color: #1d1d1f; } #container .life li small { color: #86868b; font-size: 0.8rem; } #container .life li .when { font-size: 0.78rem; color: #86868b; white-space: nowrap; padding-top: 3px; } #container .life .hist { margin-top: 16px; background: #f7f7f9; border-radius: 14px; padding: 12px 14px; font-size: 0.82rem; } #container .life .hist div { display: flex; justify-content: space-between; padding: 3px 0; color: #1d1d1f; } #container .life .hist .open { color: #0b5cad; font-weight: 500; border-top: 1px solid #e3e3e8; margin-top: 4px; padding-top: 6px; } #container .feat-list { list-style: none; display: grid; gap: 18px; } #container .feat-list li { display: flex; gap: 14px; } #container .feat-list .fi { width: 42px; height: 42px; border-radius: 12px; background: rgba(0,111,207,0.08); color: #006FCF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #container .feat-list h4 { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.02rem; margin-bottom: 3px; } #container .feat-list p { font-size: 0.92rem; } #container .soon { display: inline-block; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; background: #fff4d9; color: #8a5a00; border-radius: 50px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; } /* ---------- Dashboard ---------- */ #container .dash { background: #fff; border-radius: 26px; box-shadow: 0 30px 80px rgba(0,20,60,0.12), 0 0 0 1px rgba(0,0,0,0.05); padding: clamp(18px, 2.4vw, 30px); } #container .dash-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } #container .dash-filters span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; background: #f5f5f7; border-radius: 9px; padding: 7px 11px; color: #1d1d1f; font-weight: 400; } #container .dash-filters span .rs-ico { color: #86868b; } #container .dash-filters span.on { background: #e8f2fc; color: #0b5cad; } #container .dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } #container .dk { border: 1px solid #ececf0; border-radius: 14px; padding: 14px 16px; } #container .dk small { display: block; font-size: 0.76rem; color: #86868b; } #container .dk b { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.6rem); color: #1d1d1f; display: block; margin: 2px 0; } #container .dk.warn b { color: #c53030; } #container .dk em { font-style: normal; font-size: 0.72rem; font-weight: 600; border-radius: 6px; padding: 2px 6px; } #container .dk em.up { background: #e6f6ec; color: #16713e; } #container .dk em.down { background: #e6f6ec; color: #16713e; } #container .dash-charts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; } #container .dc { border: 1px solid #ececf0; border-radius: 16px; padding: 16px; min-width: 0; } #container .dc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } #container .dc-head b { font-weight: 500; font-size: 0.95rem; color: #1d1d1f; display: block; } #container .dc-head small { font-size: 0.76rem; color: #86868b; } #container .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.76rem; color: #515154; } #container .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } #container .legend i.line { height: 0; border-top: 2px dashed #9aa1ab; border-radius: 0; width: 14px; vertical-align: 3px; } #container .mini-tabs { display: inline-flex; background: #f5f5f7; border-radius: 9px; padding: 3px; gap: 2px; } #container .mini-tabs button { border: 0; background: none; font: inherit; font-size: 0.74rem; padding: 5px 9px; border-radius: 7px; cursor: pointer; color: #515154; } #container .mini-tabs button.on { background: #fff; color: #1d1d1f; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } #container .dc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; } #container .dc-body .rs-donut { width: 100%; max-width: 190px; } #container .dc-legend { list-style: none; display: grid; gap: 7px; font-size: 0.8rem; color: #1d1d1f; min-width: 118px; } #container .dc-legend li { display: flex; justify-content: space-between; gap: 10px; align-items: center; } #container .dc-legend li span { display: flex; align-items: center; gap: 7px; } #container .dc-legend li i { width: 10px; height: 10px; border-radius: 3px; display: block; flex-shrink: 0; } #container .dc-legend li b { font-weight: 500; } #container .chart-view { display: none; } #container .chart-view.on { display: block; } #container .dash-note { text-align: right; font-size: 0.72rem; color: #9a9aa0; margin-top: 10px; } #container .dash-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; } #container .dp .fi { width: 42px; height: 42px; border-radius: 12px; background: rgba(0,111,207,0.08); color: #006FCF; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } #container .dp h4 { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.02rem; margin-bottom: 4px; } #container .dp p { font-size: 0.9rem; } /* Diagramm-Grundlagen (duenne Marken, zurueckhaltendes Raster) */ #container .rs-chart { width: 100%; height: auto; display: block; overflow: visible; } #container .rs-grid { stroke: #eef0f3; stroke-width: 1; } #container .rs-base { stroke: #d2d2d7; stroke-width: 1; } #container .rs-axis { fill: #86868b; font-size: 11px; font-family: 'Roboto', sans-serif; } #container .rs-bar { fill: #006fcf; transition: fill .15s; } #container .rs-hit { fill: transparent; cursor: default; } #container .rs-hit:hover { fill: rgba(0,111,207,0.05); } #container .rs-line-prev { fill: none; stroke: #9aa1ab; stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; pointer-events: none; } #container .rs-dot-prev { fill: #fff; stroke: #9aa1ab; stroke-width: 2; pointer-events: none; } #container .rs-donut path { stroke: #fff; stroke-width: 2; transition: opacity .15s; } #container .rs-donut path:hover { opacity: .85; } #container .rs-donut-v { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 24px; fill: #1d1d1f; } #container .rs-donut-l { font-size: 11px; fill: #86868b; } /* Balkenliste (HTML) */ #container .rs-bl { position: relative; display: grid; gap: 12px; --rs-track: 0.82; } #container .rs-bl-row { display: grid; gap: 4px; } #container .rs-bl-name { font-size: 0.84rem; color: #1d1d1f; font-weight: 400; } #container .rs-bl-line { display: flex; align-items: center; gap: 10px; } #container .rs-bl-track { flex: 0 0 82%; height: 12px; border-radius: 4px; background: rgba(0,0,0,0.04); position: relative; overflow: hidden; } #container .rs-bl-track i { position: absolute; left: 0; top: 0; bottom: 0; background: #006fcf; border-radius: 0 4px 4px 0; } #container .rs-bl-line b { font-size: 0.8rem; font-weight: 500; color: #515154; white-space: nowrap; } #container .rs-bl-mark { position: absolute; top: -4px; bottom: -4px; border-left: 2px dashed rgba(255,255,255,0.35); z-index: 1; pointer-events: none; } #container .rs-bl-mark span { position: absolute; top: -22px; left: 6px; font-size: 0.72rem; white-space: nowrap; color: rgba(255,255,255,0.6); } #container .rs-bl-dark { margin-top: 30px; } #container .rs-bl-dark .rs-bl-name { color: rgba(255,255,255,0.85); } #container .rs-bl-dark .rs-bl-track { background: rgba(255,255,255,0.06); } #container .rs-bl-dark .rs-bl-track i { background: #3d9bff; } #container .rs-bl-dark .rs-bl-line b { color: rgba(255,255,255,0.75); } #container .rs-bl-light { padding: 10px 2px 4px; } #container .rs-tip { position: fixed; z-index: 9999; pointer-events: none; background: #fff; color: #1d1d1f; border-radius: 10px; padding: 7px 11px; font-size: 0.8rem; font-weight: 500; box-shadow: 0 10px 28px rgba(0,20,60,0.18), 0 0 0 1px rgba(0,0,0,0.05); opacity: 0; transition: opacity .12s; white-space: nowrap; } #container .rs-tip.on { opacity: 1; } /* ---------- Rechnungsliste ---------- */ #container .list-demo { background: #fff; border-radius: 24px; box-shadow: 0 20px 60px rgba(0,20,60,0.1), 0 0 0 1px rgba(0,0,0,0.04); padding: clamp(16px, 2.2vw, 26px); overflow: hidden; } #container .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } #container .chips span { font-size: 0.8rem; padding: 6px 13px; border-radius: 50px; border: 1px solid #e3e3e8; color: #515154; } #container .chips span.on { background: #006FCF; border-color: #006FCF; color: #fff; } #container .ld-scroll { overflow-x: auto; } #container .ld { width: 100%; border-collapse: collapse; font-size: 0.84rem; min-width: 620px; } #container .ld th { text-align: left; font-weight: 500; color: #86868b; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .04em; padding: 8px 8px; border-bottom: 1px solid #ececf0; } #container .ld td { padding: 11px 8px; border-bottom: 1px solid #f2f2f5; color: #1d1d1f; vertical-align: top; } #container .ld td.r, #container .ld th.r { text-align: right; } #container .ld td small { display: block; color: #86868b; font-size: 0.74rem; } #container .ld .hist { margin-top: 6px; background: #f7f7f9; border-radius: 8px; padding: 6px 9px; font-size: 0.74rem; text-align: left; min-width: 180px; } #container .ld .hist div { display: flex; justify-content: space-between; gap: 10px; } #container .ld tfoot td { font-weight: 600; border-bottom: 0; background: #fafafb; } #container .ld-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 0.8rem; color: #86868b; } #container .ld-foot span.btnlike { border: 1px solid #d7dbe2; border-radius: 9px; padding: 8px 16px; color: #1d1d1f; } /* ---------- Speicher ---------- */ #container .store { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.4fr); gap: 0; align-items: center; max-width: 1080px; margin: 0 auto; } #container .store-src { background: #fff; border-radius: 22px; padding: 26px; box-shadow: 0 16px 44px rgba(0,20,60,0.09), 0 0 0 1px rgba(0,0,0,0.04); text-align: center; } #container .store-src .fi { width: 54px; height: 54px; border-radius: 15px; background: rgba(0,111,207,0.08); color: #006FCF; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } #container .store-src b { display: block; font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.2rem; margin-bottom: 4px; } #container .store-src .files { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; } #container .store-src .files span { font-family: 'Courier New', monospace; font-size: 0.74rem; background: #f5f5f7; border-radius: 6px; padding: 3px 8px; } #container .store-fork { position: relative; height: 240px; } #container .store-fork svg { width: 100%; height: 100%; display: block; } #container .store-dst { display: grid; gap: 16px; } #container .dst { background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: 0 12px 34px rgba(0,20,60,0.08), 0 0 0 1px rgba(0,0,0,0.04); display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; } #container .dst .fi { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; } #container .dst.a .fi { background: rgba(0,111,207,0.1); color: #006FCF; } #container .dst.b .fi { background: rgba(26,122,58,0.1); color: #1a7a3a; } #container .dst h4 { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.05rem; margin-bottom: 3px; } #container .dst p { font-size: 0.88rem; } #container .dst .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } #container .dst .tags span { font-size: 0.72rem; background: #f5f5f7; border-radius: 50px; padding: 3px 9px; color: #515154; } #container .store-backup { max-width: 1080px; margin: 22px auto 0; display: flex; gap: 12px; align-items: center; justify-content: center; background: #fff; border: 1px dashed #c9cdd6; border-radius: 16px; padding: 14px 18px; font-size: 0.9rem; color: #1d1d1f; text-align: left; } #container .store-backup .rs-ico { color: #1a7a3a; } /* ---------- Sicherheit & Lasttest ---------- */ #container .perf { background: #000e28; } #container .perf h2 { color: #fff; } #container .perf .section-intro p { color: rgba(255,255,255,0.6); } #container .perf-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; } #container .sec-list { list-style: none; display: grid; gap: 14px; } #container .sec-list li { display: flex; gap: 14px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); border-radius: 16px; padding: 16px; } #container .sec-list .fi { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.08); color: #7ab8ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #container .sec-list h4 { color: #fff; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1rem; margin-bottom: 3px; } #container .sec-list p { color: rgba(255,255,255,0.55); font-size: 0.88rem; } #container .perf-card { border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); } #container .perf-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 4px; } #container .perf-card .sub { color: rgba(255,255,255,0.55); font-size: 0.88rem; margin-bottom: 14px; } #container .perf-big { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 16px; } #container .perf-big div b { display: block; font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 2rem; color: #fff; line-height: 1; } #container .perf-big div small { color: rgba(255,255,255,0.55); font-size: 0.8rem; } #container .perf-foot { color: rgba(255,255,255,0.38); font-size: 0.74rem; margin-top: 10px; } /* ---------- Zielgruppen / Vergleich ---------- */ #container .who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } #container .who .card { padding: 26px; } #container .who .card h3 { font-size: 1.2rem; } #container .cmp-wrap { max-width: 940px; margin: 0 auto; overflow-x: auto; } #container .cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; min-width: 560px; } #container .cmp th { padding: 14px 16px; font-weight: 500; text-align: center; font-size: 0.9rem; color: #515154; } #container .cmp th:first-child { text-align: left; } #container .cmp th.us { background: #006FCF; color: #fff; border-radius: 16px 16px 0 0; font-weight: 600; } #container .cmp td { padding: 14px 16px; border-bottom: 1px solid #ececf0; text-align: center; color: #1d1d1f; font-weight: 400; } #container .cmp td:first-child { text-align: left; } #container .cmp td.us { background: rgba(0,111,207,0.05); } #container .cmp tr:last-child td.us { border-radius: 0 0 16px 16px; } #container .cmp .y { color: #1f9d57; } #container .cmp .n { color: #c9cdd6; } #container .cmp .m { color: #b07800; font-size: 0.84rem; } /* ---------- Pakete ---------- */ #container .trial { background: linear-gradient(135deg, #00275c 0%, #006FCF 100%); border-radius: 20px; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; color: #fff; } #container .trial h3 { color: #fff; font-size: 1.3rem; } #container .trial p { color: rgba(255,255,255,0.75); font-size: 0.92rem; } /* ---------- Bald ---------- */ #container .soon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } #container .soon-card { border: 1px dashed #c9cdd6; border-radius: 22px; padding: 24px; background: #fff; } #container .soon-card .fi { width: 42px; height: 42px; border-radius: 12px; background: #fff4d9; color: #8a5a00; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } #container .soon-card h4 { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.05rem; margin-bottom: 5px; } #container .soon-card p { font-size: 0.9rem; } #container .chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-size: 0.74rem; } #container .chain span { background: #f5f5f7; border-radius: 6px; padding: 3px 8px; color: #515154; } #container .chain span.now { background: #e8f2fc; color: #0b5cad; font-weight: 500; } #container .chain .rs-ico { color: #b0b5bf; } /* ---------- API-Teaser, FAQ, CTA ---------- */ #container .api-teaser { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: #f5f5f7; border-radius: 24px; padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 44px); } #container .api-teaser h3 { font-size: 1.5rem; margin-bottom: 6px; } #container .api-teaser code { font-family: 'Courier New', monospace; background: #0f172a; color: #a3e635; padding: 10px 14px; border-radius: 10px; font-size: 0.82rem; display: inline-block; } /* FAQ: steht zentral in body.css (Abschnitt 7) */ #container .cta-section { background: linear-gradient(135deg, #003d7a 0%, #006FCF 50%, #0096ff 100%); padding: clamp(70px, 10vw, 130px) 0; text-align: center; position: relative; overflow: hidden; } #container .cta-section h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 3.6rem); margin-bottom: 16px; } #container .cta-section p { color: rgba(255,255,255,0.82); margin: 0 auto 34px; max-width: 580px; } #container .cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- Einblenden beim Scrollen ---------- */ #container .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } #container .reveal.active { opacity: 1; transform: none; } #container .d1 { transition-delay: .08s; } #container .d2 { transition-delay: .16s; } #container .d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { #container .reveal { opacity: 1; transform: none; transition: none; } #container .hv-doc, #container .hv-paid { animation: none; } } /* ---------- Responsiv ---------- */ @media (max-width: 1100px) { #container .hero-grid { grid-template-columns: 1fr; } #container .hv { min-height: 440px; max-width: 640px; margin: 0 auto; width: 100%; } #container .cycle-wrap, #container .demo, #container .pay-grid, #container .perf-grid { grid-template-columns: 1fr; } #container .bento-grid { grid-template-columns: 1fr 1fr; } #container .col-4, #container .col-5, #container .col-6, #container .col-7, #container .col-8 { grid-column: span 1; } #container .col-12 { grid-column: span 2; } #container .dash-points { grid-template-columns: 1fr 1fr; } #container .who { grid-template-columns: 1fr 1fr; } #container .soon-grid { grid-template-columns: 1fr; } #container .codes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { #container .tl-steps { grid-template-columns: 1fr 1fr; gap: 26px 18px; } #container .tl-track, #container .tl-now { display: none; } #container .dash-kpis { grid-template-columns: 1fr 1fr; } #container .dash-charts { grid-template-columns: 1fr; } #container .store { grid-template-columns: 1fr; gap: 16px; } #container .store-fork { height: 46px; } #container .store-fork svg { display: none; } #container .store-fork::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; background: repeating-linear-gradient(#006FCF 0 6px, transparent 6px 11px); } } @media (max-width: 680px) { #container .bento-grid, #container .who, #container .dash-points { grid-template-columns: 1fr; } #container .col-12 { grid-column: span 1; } #container .format-grid { grid-template-columns: 1fr; } #container .hv { min-height: 0; } #container .hv-app { position: relative; right: 0; } #container .hv-doc { position: relative; width: 78%; margin: -40px 0 0 auto; } #container .hv-paid { display: none; } #container .hv-row { grid-template-columns: 1fr auto; } #container .hv-row .cust, #container .hv-row .amt { display: none; } #container .cycle { aspect-ratio: auto; } #container .cycle svg.ring, #container .cycle .center { display: none; } #container .cycle .node { position: static; transform: none; width: auto; display: grid; grid-template-columns: 54px 1fr; gap: 12px; text-align: left; align-items: center; padding: 8px 0; } #container .cycle .node .bub { width: 50px; height: 50px; margin: 0; } #container .cycle .node .node-sub { display: block; } #container .dc-body { grid-template-columns: 1fr; justify-items: center; } #container .dc-legend { width: 100%; } } @media (max-width: 680px) { #container .rs-axis { font-size: 22px; } #container .cmp { min-width: 0; font-size: 0.86rem; } #container .cmp th, #container .cmp td { padding: 11px 8px; } #container .cmp th { font-size: 0.8rem; } #container .rs-bl-track { flex-basis: 72%; } #container .rs-bl { --rs-track: 0.72; } } @media (max-width: 480px) { #container .hero-buttons .btn, #container .cta-buttons .btn { width: 100%; } #container .tl-steps { grid-template-columns: 1fr; } #container .codes { grid-template-columns: 1fr 1fr; } #container .hv-kpis { grid-template-columns: 1fr 1fr; } #container .hv-kpis .hv-kpi:last-child { display: none; } } /* ================================================================= TEIL 2 — BAUSTEINE DER VERKAUFSSEITEN Farben je Belegart aus der App (Briefing 1.1). Sie erscheinen als Punkt, Linie, Streifen oder Label – nie als Fläche ganzer Abschnitte. ================================================================= */ #container { --vk-inv: #2563eb; --vk-inv-t: #1d4ed8; --vk-inv-l: #eff6ff; --vk-inv-b: #bfdbfe; --vk-quo: #7c3aed; --vk-quo-t: #6d28d9; --vk-quo-l: #f5f3ff; --vk-quo-b: #ddd6fe; --vk-ord: #0d9488; --vk-ord-t: #0f766e; --vk-ord-l: #f0fdfa; --vk-ord-b: #99f6e4; --vk-del: #d97706; --vk-del-t: #b45309; --vk-del-l: #fffbeb; --vk-del-b: #fde68a; --vk-pay: #34c759; --vk-pay-t: #1f9d57; --vk-pay-l: #e9f7ee; --vk-pay-b: #b7e4c7; } #container .t-inv { --c: var(--vk-inv); --ct: var(--vk-inv-t); --cl: var(--vk-inv-l); --cb: var(--vk-inv-b); } #container .t-quo { --c: var(--vk-quo); --ct: var(--vk-quo-t); --cl: var(--vk-quo-l); --cb: var(--vk-quo-b); } #container .t-ord { --c: var(--vk-ord); --ct: var(--vk-ord-t); --cl: var(--vk-ord-l); --cb: var(--vk-ord-b); } #container .t-del { --c: var(--vk-del); --ct: var(--vk-del-t); --cl: var(--vk-del-l); --cb: var(--vk-del-b); } #container .t-pay { --c: var(--vk-pay); --ct: var(--vk-pay-t); --cl: var(--vk-pay-l); --cb: var(--vk-pay-b); } #container .vk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #006FCF); flex-shrink: 0; } #container .vk-dot.all { background: conic-gradient(var(--vk-quo) 0 25%, var(--vk-ord) 0 50%, var(--vk-del) 0 75%, var(--vk-inv) 0); } #container .vk-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 500; padding: 2px 9px; border-radius: 50px; background: var(--cl, #e8f2fc); color: var(--ct, #0b5cad); border: 1px solid var(--cb, transparent); white-space: nowrap; } #container .muted { color: #86868b; } /* ---------- Hinweis „Teil von Hyptime Verkauf“ ---------- */ #container .vk-part { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 50px; background: #fff; border: 1px solid #e6e8ee; box-shadow: 0 4px 14px rgba(0,20,60,0.05); font-size: 0.82rem; color: #515154; margin-bottom: 18px; transition: border-color .2s, box-shadow .2s; } #container .vk-part:hover { border-color: #b9d6f3; box-shadow: 0 8px 22px rgba(0,111,207,0.1); } #container .vk-part .dots { display: inline-flex; gap: 3px; padding: 5px 8px; background: #f5f5f7; border-radius: 50px; } #container .vk-part .dots i { width: 7px; height: 7px; border-radius: 50%; display: block; } #container .vk-part b { color: #1d1d1f; font-weight: 500; } #container .vk-part .rs-ico { color: #006FCF; } /* ---------- Ablauf-Streifen Angebot → … → Zahlung ---------- */ #container .vk-flow { position: relative; max-width: 1100px; margin: 0 auto; } #container .vk-flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; } #container .vk-flow ol::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--vk-quo), var(--vk-ord), var(--vk-del), var(--vk-inv), var(--vk-pay)); opacity: .35; } #container .vk-flow li { position: relative; text-align: center; padding: 0 6px; } #container .vk-flow a, #container .vk-flow .st { display: flex; flex-direction: column; align-items: center; gap: 8px; } #container .vk-flow .bub { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--c); box-shadow: 0 8px 22px rgba(0,20,60,0.08), 0 0 0 1px var(--cb); position: relative; z-index: 1; transition: transform .25s ease, box-shadow .25s ease; } #container .vk-flow a:hover .bub { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,20,60,0.12), 0 0 0 2px var(--c); } #container .vk-flow b { font-weight: 500; font-size: 0.95rem; color: #1d1d1f; display: flex; align-items: center; gap: 7px; } #container .vk-flow small { font-size: 0.76rem; color: #86868b; line-height: 1.35; max-width: 150px; } #container .vk-flow li.now .bub { background: var(--c); color: #fff; box-shadow: 0 12px 30px color-mix(in srgb, var(--c) 35%, transparent), 0 0 0 5px var(--cl); } #container .vk-flow li.now b { color: var(--ct); } #container .vk-flow-note { text-align: center; margin-top: 26px; font-size: 0.86rem; color: #86868b; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } #container .vk-flow-note .rs-ico { color: #006FCF; } #container .vk-flow.compact .bub { width: 44px; height: 44px; } #container .vk-flow.compact ol::before { top: 21px; } #container .vk-flow.compact small { display: none; } /* ---------- Fenster-Rahmen für Produktbilder ---------- */ #container .vk-win { background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,20,60,0.14), 0 0 0 1px rgba(0,0,0,0.05); overflow: hidden; position: relative; } #container .vk-win-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #f5f5f7; border-bottom: 1px solid #ececf0; } #container .vk-win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d8d8de; display: block; } #container .vk-win-bar span { margin-left: 10px; font-size: 0.72rem; color: #86868b; font-weight: 500; } #container .vk-win-body { padding: 16px 18px 18px; } #container .vk-win.accent { border-top: 3px solid var(--c); } /* App-Leiste „Verkauf“ */ #container .vk-appbar { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid #ececf0; background: #fff; font-size: 0.74rem; flex-wrap: wrap; } #container .vk-appbar > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; color: #515154; } #container .vk-appbar > span.on { background: #f0f4fa; color: #1d1d1f; font-weight: 500; } #container .vk-appbar .new { margin-left: auto; background: #006FCF; color: #fff; font-weight: 500; } #container .vk-appbar .cnt { background: #006FCF; color: #fff; font-size: 0.6rem; border-radius: 50px; padding: 0 5px; line-height: 1.5; } #container .vk-appbar > span.hide { display: none; } /* Bereichsauswahl im Dashboard */ #container .vk-areas { display: inline-flex; background: #f5f5f7; border-radius: 11px; padding: 4px; gap: 2px; flex-wrap: wrap; margin-bottom: 14px; } #container .vk-areas > button, #container .vk-areas > span { border: 0; background: none; font: inherit; font-size: 0.78rem; padding: 6px 11px; border-radius: 8px; color: #515154; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } #container .vk-areas .on { background: #fff; color: #1d1d1f; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* Verkaufstrichter (HTML) */ #container .vk-funnel { display: grid; gap: 6px; } #container .vk-fn-row { display: grid; grid-template-columns: 96px 1fr 70px; gap: 10px; align-items: center; font-size: 0.76rem; } #container .vk-fn-row span { color: #515154; } #container .vk-fn-bar { height: 22px; display: flex; justify-content: center; } #container .vk-fn-bar i { display: block; height: 100%; border-radius: 6px; background: var(--c); opacity: .9; transform-origin: center; transition: transform 1s cubic-bezier(0.16,1,0.3,1); } #container .reveal:not(.active) .vk-fn-bar i { transform: scaleX(0.15); } #container .vk-fn-row b { font-weight: 500; color: #1d1d1f; text-align: right; } #container .vk-fn-row b small { display: block; color: #86868b; font-weight: 400; font-size: 0.68rem; } /* Schwebende Hinweiskarten im Hero */ #container .vk-toast { position: absolute; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 18px 40px rgba(0,20,60,0.16), 0 0 0 1px rgba(0,0,0,0.04); display: flex; gap: 10px; align-items: center; font-size: 0.74rem; color: #515154; animation: rs-float 7s ease-in-out infinite; z-index: 3; } #container .vk-toast .ic { width: 32px; height: 32px; border-radius: 50%; background: var(--cl); color: var(--c); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #container .vk-toast b { display: block; font-weight: 600; font-size: 0.78rem; color: #1d1d1f; } /* ---------- Karten der Untermodule ---------- */ #container .vk-mods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } #container .vk-mod { grid-column: span 2; background: #fff; border-radius: 24px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 16px rgba(0,0,0,0.04); padding: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; transition: all .4s cubic-bezier(0.16,1,0.3,1); } #container .vk-mod:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(0,20,60,0.1); border-color: var(--cb); } #container .vk-mod.wide { grid-column: span 3; } #container .vk-mod::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); } #container .vk-mod-vis { background: linear-gradient(180deg, var(--cl), #fff); padding: 22px 22px 0; height: 170px; overflow: hidden; position: relative; } #container .vk-mod-body { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; } #container .vk-mod-kicker { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ct); margin-bottom: 6px; } #container .vk-mod h3 { font-size: 1.45rem; margin-bottom: 8px; } #container .vk-mod p { font-size: 0.93rem; } #container .vk-mod ul { list-style: none; margin: 14px 0 18px; display: grid; gap: 7px; } #container .vk-mod li { display: flex; gap: 9px; font-size: 0.9rem; color: #1d1d1f; font-weight: 400; line-height: 1.4; } #container .vk-mod li .rs-ico { color: var(--c); margin-top: 1px; } #container .vk-mod .more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: #006FCF; font-size: 0.95rem; } #container .vk-mod .more .rs-ico { transition: transform .25s; } #container .vk-mod:hover .more .rs-ico { transform: translateX(4px); } /* Mini-Beleg in der Karte */ #container .vk-minidoc { background: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 10px 30px rgba(0,20,60,0.1), 0 0 0 1px rgba(0,0,0,0.04); padding: 14px 16px; font-size: 0.66rem; color: #515154; height: 100%; position: relative; } #container .vk-minidoc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); border-radius: 10px 10px 0 0; } #container .vk-minidoc .h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } #container .vk-minidoc .h b { font-family: 'Roboto Serif', serif; font-size: 0.95rem; color: var(--ct); font-weight: 600; } #container .vk-minidoc .ln { height: 5px; border-radius: 3px; background: #eef0f3; margin: 5px 0; } #container .vk-minidoc .kv { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #f2f2f5; } #container .vk-minidoc .kv b { color: #1d1d1f; font-weight: 500; } #container .vk-minidoc .tag { position: absolute; right: 12px; bottom: 12px; } /* ---------- Beispiel-Ablauf (Muster Bau GmbH) ---------- */ #container .vk-story { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; } #container .vk-story::before { content: ""; position: absolute; left: 4%; right: 4%; top: 23px; height: 2px; background: repeating-linear-gradient(90deg, #d2d6de 0 6px, transparent 6px 11px); } #container .vk-st { position: relative; display: flex; flex-direction: column; align-items: flex-start; } #container .vk-st .n { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 8px 20px rgba(0,20,60,0.08); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; margin-bottom: 14px; } #container .vk-st .day { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ct); } #container .vk-st h4 { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.95rem; margin: 3px 0 5px; line-height: 1.3; } #container .vk-st p { font-size: 0.8rem !important; line-height: 1.45; } #container .vk-st .doc { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-family: 'Courier New', monospace; font-size: 0.72rem; background: var(--cl); color: var(--ct); border: 1px solid var(--cb); border-radius: 7px; padding: 3px 8px; } #container .vk-story-end { margin-top: 38px; display: flex; justify-content: center; } #container .vk-story-end .box { display: flex; align-items: center; gap: 18px; background: #000e28; color: #fff; border-radius: 20px; padding: 16px 26px; box-shadow: 0 20px 50px rgba(0,14,40,0.25); flex-wrap: wrap; justify-content: center; } #container .vk-story-end b { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 2.2rem; line-height: 1; } #container .vk-story-end span { color: rgba(255,255,255,0.7); font-size: 0.92rem; } #container .vk-story-end .kpi { font-size: 0.72rem; color: #7ab8ff; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; display: block; margin-bottom: 4px; } /* ---------- Zwei Spalten mit Bild + Text ---------- */ #container .vk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; } #container .vk-split.flip > :first-child { order: 2; } #container .vk-split h2 { font-size: clamp(1.8rem, 3vw, 3rem); margin-bottom: 16px; } #container .vk-split .lead { margin-bottom: 22px; } /* Vorgang-Fenster */ #container .vk-chain { display: grid; gap: 8px; } #container .vk-cr { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid #ececf0; font-size: 0.8rem; background: #fff; position: relative; } #container .vk-cr::before { content: ""; position: absolute; left: 17px; top: 100%; width: 2px; height: 10px; background: #e3e5ea; } #container .vk-cr:last-child::before { display: none; } #container .vk-cr .vk-dot { width: 10px; height: 10px; } #container .vk-cr b { font-weight: 600; color: #1d1d1f; display: block; } #container .vk-cr small { color: #86868b; font-size: 0.72rem; } #container .vk-cr .amt { font-weight: 500; color: #1d1d1f; text-align: right; } #container .vk-cr.src { border-color: #006FCF; box-shadow: 0 0 0 3px rgba(0,111,207,0.1); } #container .vk-cr.sub { margin-left: 22px; } #container .vk-chain-sum { display: flex; justify-content: space-between; margin-top: 10px; padding: 10px 12px; background: #f7f7f9; border-radius: 12px; font-size: 0.82rem; } #container .vk-chain-sum b { font-weight: 600; } /* Verlauf (Zeitleiste) – nutzt .life, ergänzt Belegfarben */ #container .life li.t .dot { border-color: var(--c); color: var(--c); } #container .life li.t.fill .dot { background: var(--c); color: #fff; } #container .life li b a { color: #006FCF; border-bottom: 1px dashed rgba(0,111,207,0.4); } /* Reiter (Tabs) für Produktbilder */ #container .vk-tabs { display: flex; gap: 2px; border-bottom: 1px solid #ececf0; padding: 0 14px; background: #fff; overflow-x: auto; } #container .vk-tabs button { border: 0; background: none; font: inherit; font-size: 0.8rem; padding: 12px 12px 10px; color: #6e6e73; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } #container .vk-tabs button.on { color: #1d1d1f; font-weight: 500; border-bottom-color: #006FCF; } #container .vk-tabs button:hover { color: #1d1d1f; } #container .vk-pane { display: none; } #container .vk-pane.on { display: block; animation: vk-fade .35s ease; } @keyframes vk-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Formularteile in Produktbildern */ #container .vk-field { display: grid; gap: 4px; margin-bottom: 10px; } #container .vk-field label, #container .vk-field .lab { font-size: 0.7rem; color: #86868b; font-weight: 500; } #container .vk-field .in { border: 1px solid #e3e5ea; border-radius: 9px; padding: 8px 10px; font-size: 0.8rem; color: #1d1d1f; background: #fff; min-height: 34px; display: flex; align-items: center; gap: 8px; } #container .vk-field .in.area { min-height: 64px; align-items: flex-start; line-height: 1.45; color: #515154; } #container .vk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #container .vk-btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } #container .vk-b { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 500; padding: 8px 13px; border-radius: 9px; border: 1px solid #d7dbe2; color: #1d1d1f; background: #fff; } #container .vk-b.pri { background: #006FCF; border-color: #006FCF; color: #fff; } #container .vk-b.wa { background: #25d366; border-color: #25d366; color: #fff; } #container .vk-b.ok { background: var(--vk-pay-t); border-color: var(--vk-pay-t); color: #fff; } #container .vk-b.warn { border-color: var(--vk-del-b); color: var(--vk-del-t); background: var(--vk-del-l); } #container .vk-seg { display: flex; gap: 6px; flex-wrap: wrap; } #container .vk-seg span { font-size: 0.74rem; padding: 6px 11px; border-radius: 50px; border: 1px solid #e3e5ea; color: #515154; background: #fff; } #container .vk-seg span.on { background: #1d1d1f; border-color: #1d1d1f; color: #fff; } #container .vk-attach { display: inline-flex; align-items: center; gap: 8px; border: 1px dashed #c9cdd6; border-radius: 9px; padding: 7px 10px; font-size: 0.74rem; color: #515154; background: #fafafb; } #container .vk-log { display: grid; gap: 8px; } #container .vk-log div { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; font-size: 0.78rem; padding: 8px 10px; border: 1px solid #ececf0; border-radius: 10px; } #container .vk-log .ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f0f4fa; color: #006FCF; } #container .vk-log .ic.ok { background: var(--vk-pay-l); color: var(--vk-pay-t); } #container .vk-log .ic.fail { background: #fdecec; color: #b42323; } #container .vk-log small { display: block; color: #86868b; font-size: 0.7rem; } #container .vk-log em { font-style: normal; font-size: 0.7rem; color: #86868b; white-space: nowrap; } /* ---------- Handy-Rahmen (Kundenseite) ---------- */ #container .vk-phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; } #container .vk-phone { width: 290px; max-width: 100%; background: #0c0f14; border-radius: 42px; padding: 11px; box-shadow: 0 40px 80px rgba(0,20,60,0.22), inset 0 0 0 2px #2a2f38; position: relative; flex-shrink: 0; } #container .vk-phone.lift { margin-top: 48px; } #container .vk-phone-scr { background: #f7f7f9; border-radius: 32px; overflow: hidden; height: 560px; position: relative; display: flex; flex-direction: column; } #container .vk-phone-scr::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 86px; height: 22px; border-radius: 20px; background: #0c0f14; z-index: 2; } #container .vk-ph-top { background: #fff; padding: 40px 16px 12px; border-bottom: 3px solid var(--c); } #container .vk-ph-top small { display: block; font-size: 0.64rem; color: #86868b; } #container .vk-ph-top b { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.05rem; color: #1d1d1f; } #container .vk-ph-top .meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 0.62rem; color: #515154; } #container .vk-ph-body { padding: 12px 12px 14px; display: grid; gap: 9px; font-size: 0.7rem; color: #1d1d1f; overflow: hidden; } #container .vk-ph-card { background: #fff; border-radius: 12px; padding: 10px 11px; box-shadow: 0 0 0 1px #ececf0; } #container .vk-ph-pos { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f2f2f5; } #container .vk-ph-pos:last-child { border-bottom: 0; } #container .vk-ph-sum { display: flex; justify-content: space-between; font-weight: 600; color: var(--ct); padding-top: 6px; margin-top: 4px; border-top: 2px solid var(--c); font-size: 0.78rem; } #container .vk-ph-check { display: flex; gap: 7px; align-items: flex-start; font-size: 0.64rem; line-height: 1.35; color: #515154; } #container .vk-ph-check i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; } #container .vk-ph-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--c); color: #fff; border-radius: 11px; padding: 10px; font-weight: 600; font-size: 0.74rem; } #container .vk-ph-btn.ghost { background: #fff; color: #515154; box-shadow: 0 0 0 1px #e3e5ea; font-weight: 500; } #container .vk-ph-in { border: 1px solid #e3e5ea; border-radius: 8px; padding: 6px 8px; font-size: 0.66rem; color: #1d1d1f; background: #fff; } #container .vk-ph-item { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px #ececf0; padding: 9px 10px; } #container .vk-ph-item .top { display: flex; justify-content: space-between; align-items: center; gap: 6px; } #container .vk-ph-item .tg { display: inline-flex; gap: 4px; } #container .vk-ph-item .tg span { font-size: 0.58rem; padding: 3px 7px; border-radius: 50px; border: 1px solid #e3e5ea; color: #515154; } #container .vk-ph-item .tg span.ok { background: var(--vk-pay-l); border-color: var(--vk-pay-b); color: var(--vk-pay-t); } #container .vk-ph-item .tg span.bad { background: #fdecec; border-color: #f6c6c6; color: #b42323; } #container .vk-ph-item.prob { box-shadow: 0 0 0 1.5px #f1a3a3; } #container .vk-ph-prob { margin-top: 8px; display: grid; gap: 6px; } #container .vk-ph-chips { display: flex; gap: 4px; flex-wrap: wrap; } #container .vk-ph-chips span { font-size: 0.56rem; padding: 3px 6px; border-radius: 6px; background: #f5f5f7; color: #515154; } #container .vk-ph-chips span.on { background: #1d1d1f; color: #fff; } #container .vk-ph-photos { display: flex; gap: 6px; align-items: center; } #container .vk-ph-photos .ph { width: 42px; height: 42px; border-radius: 8px; background: linear-gradient(135deg, #c7b299, #8a7560); position: relative; overflow: hidden; } #container .vk-ph-photos .ph::after { content: ""; position: absolute; left: 20%; top: 30%; width: 60%; height: 3px; background: rgba(255,255,255,0.85); transform: rotate(-24deg); box-shadow: 0 6px 0 rgba(255,255,255,0.55); } #container .vk-ph-photos .ph.b { background: linear-gradient(135deg, #a9b7c6, #6d7f93); } #container .vk-ph-photos .add { width: 42px; height: 42px; border-radius: 8px; border: 1.5px dashed #c9cdd6; display: flex; align-items: center; justify-content: center; color: #86868b; } #container .vk-ph-bar { height: 4px; border-radius: 4px; background: #eef0f3; overflow: hidden; flex: 1; } #container .vk-ph-bar i { display: block; height: 100%; width: 72%; background: var(--vk-pay); } #container .vk-phone-cap { text-align: center; margin-top: 16px; font-size: 0.84rem; color: #6e6e73; } #container .vk-phone-cap b { color: #1d1d1f; font-weight: 500; display: block; } /* Rechte des Kunden (Stufen) */ #container .vk-perm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 980px; margin: 44px auto 0; } #container .vk-perm div { background: #fff; border-radius: 16px; padding: 16px; border: 1px solid #ececf0; position: relative; } #container .vk-perm div::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--vk-del); opacity: calc(var(--s) * 0.25); } #container .vk-perm .fi { width: 36px; height: 36px; border-radius: 10px; background: var(--vk-del-l); color: var(--vk-del-t); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } #container .vk-perm b { display: block; font-weight: 500; font-size: 0.92rem; color: #1d1d1f; } #container .vk-perm small { font-size: 0.78rem; color: #86868b; line-height: 1.4; display: block; margin-top: 2px; } #container .vk-perm .std { position: absolute; top: 14px; right: 14px; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: var(--vk-del-l); color: var(--vk-del-t); border-radius: 50px; padding: 2px 7px; } /* ---------- Reklamation → drei Wirkungen ---------- */ #container .vk-rk { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 80px minmax(0, 1fr); align-items: center; max-width: 1200px; margin: 0 auto; } #container .vk-rk-node { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 16px 44px rgba(0,20,60,0.09), 0 0 0 1px rgba(0,0,0,0.04); } #container .vk-rk-node .lab { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #86868b; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } #container .vk-rk-node h4 { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1rem; margin-bottom: 8px; } #container .vk-rk-line { display: flex; justify-content: space-between; gap: 8px; font-size: 0.76rem; padding: 5px 0; border-bottom: 1px solid #f2f2f5; color: #515154; } #container .vk-rk-line:last-child { border-bottom: 0; } #container .vk-rk-line b { color: #1d1d1f; font-weight: 500; } #container .vk-rk-arrow { display: flex; align-items: center; justify-content: center; color: #b0b5bf; position: relative; height: 100%; } #container .vk-rk-arrow::before { content: ""; position: absolute; left: 8px; right: 14px; top: 50%; border-top: 2px dashed #c9cdd6; } #container .vk-rk-arrow .rs-ico { position: relative; background: #f5f5f7; border-radius: 50%; padding: 4px; box-sizing: content-box; color: #006FCF; } #container .grey .vk-rk-arrow .rs-ico { background: #f5f5f7; } #container .vk-rk-fork { position: relative; height: 100%; min-height: 300px; } #container .vk-rk-fork svg { position: absolute; inset: 0; width: 100%; height: 100%; } #container .vk-rk-out { display: grid; gap: 12px; } #container .vk-rk-o { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,20,60,0.07), 0 0 0 1px rgba(0,0,0,0.04); display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; } #container .vk-rk-o .fi { width: 40px; height: 40px; border-radius: 11px; background: var(--cl); color: var(--c); display: flex; align-items: center; justify-content: center; } #container .vk-rk-o b { display: block; font-weight: 500; font-size: 0.92rem; color: #1d1d1f; } #container .vk-rk-o small { font-size: 0.78rem; color: #86868b; line-height: 1.4; display: block; } #container .vk-state { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; } #container .vk-state span { font-size: 0.66rem; padding: 3px 8px; border-radius: 50px; background: #f5f5f7; color: #86868b; } #container .vk-state span.on { background: #fff4d9; color: #8a5a00; font-weight: 500; } /* ---------- Lager ---------- */ #container .vk-stock { background: #fff; border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 20px 60px rgba(0,20,60,0.1), 0 0 0 1px rgba(0,0,0,0.04); } #container .vk-stock-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } #container .vk-stock-head b { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.15rem; } #container .vk-gauge { height: 30px; border-radius: 9px; background: #f2f3f6; display: flex; overflow: hidden; margin: 8px 0 10px; } #container .vk-gauge i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.7rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; transition: width 1.1s cubic-bezier(0.16,1,0.3,1); } #container .reveal:not(.active) .vk-gauge i { width: 0 !important; } #container .vk-gauge .res { background: var(--vk-ord); } #container .vk-gauge .free { background: #9fc8ee; color: #0b3f75; } #container .vk-gauge-leg { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: #515154; } #container .vk-gauge-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } #container .vk-picker { margin-top: 18px; border: 1px solid #e3e5ea; border-radius: 14px; overflow: hidden; } #container .vk-picker .q { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 0.8rem; color: #1d1d1f; border-bottom: 1px solid #ececf0; background: #fafafb; } #container .vk-picker .q .rs-ico { color: #86868b; } #container .vk-picker .it { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 12px; font-size: 0.78rem; border-bottom: 1px solid #f2f2f5; align-items: center; } #container .vk-picker .it:last-child { border-bottom: 0; } #container .vk-picker .it b { font-weight: 500; display: block; color: #1d1d1f; } #container .vk-picker .it small { color: #86868b; font-size: 0.7rem; } #container .vk-picker .it .st { font-size: 0.72rem; color: #515154; text-align: right; } #container .vk-picker .it .st em { font-style: normal; color: var(--vk-ord-t); font-weight: 600; } #container .vk-picker .it.low .st em { color: #b42323; } #container .vk-picker .it.sel { background: #f5faff; } #container .vk-rules { list-style: none; display: grid; gap: 10px; } #container .vk-rules li { display: grid; grid-template-columns: 170px 26px 1fr; gap: 10px; align-items: center; background: #fff; border: 1px solid #ececf0; border-radius: 14px; padding: 12px 14px; font-size: 0.86rem; color: #1d1d1f; font-weight: 400; } #container .vk-rules li .k { display: flex; align-items: center; gap: 8px; font-weight: 500; } #container .vk-rules li > .rs-ico { color: #b0b5bf; } #container .vk-rules li .v { color: #515154; display: flex; align-items: center; gap: 8px; } #container .vk-rules li .v .eff { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 50px; white-space: nowrap; } #container .vk-rules .eff.minus { background: #fdecec; color: #b42323; } #container .vk-rules .eff.plus { background: var(--vk-pay-l); color: var(--vk-pay-t); } #container .vk-rules .eff.res { background: var(--vk-ord-l); color: var(--vk-ord-t); } #container .vk-rules .eff.zero { background: #f2f3f6; color: #6e6e73; } /* ---------- Dokumente am Beleg ---------- */ #container .vk-files { display: grid; gap: 8px; } #container .vk-file { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #ececf0; border-radius: 12px; font-size: 0.8rem; background: #fff; } #container .vk-file .th { width: 42px; height: 42px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: #fff; } #container .vk-file .th.pdf { background: #e5484d; } #container .vk-file .th.img { background: linear-gradient(135deg, #c7b299, #8a7560); } #container .vk-file .th.doc { background: #2b6cd4; } #container .vk-file b { display: block; font-weight: 500; color: #1d1d1f; } #container .vk-file small { color: #86868b; font-size: 0.7rem; } #container .vk-drop { margin-top: 10px; border: 1.5px dashed #c9cdd6; border-radius: 12px; padding: 16px; text-align: center; font-size: 0.78rem; color: #6e6e73; background: #fafafb; } #container .vk-drop .rs-ico { color: #006FCF; display: block; margin: 0 auto 4px; } /* ---------- Editor (umschaltbar je Belegart) ---------- */ #container .vk-ed-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start; } #container .vk-typesel { display: grid; gap: 8px; margin-top: 22px; } #container .vk-typesel button { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; text-align: left; font: inherit; background: #fff; border: 1.5px solid #e3e3e8; border-radius: 14px; padding: 13px 16px; cursor: pointer; transition: all .2s; } #container .vk-typesel button b { font-weight: 500; font-size: 0.98rem; color: #1d1d1f; display: block; } #container .vk-typesel button small { font-size: 0.8rem; color: #86868b; } #container .vk-typesel button code { font-family: 'Courier New', monospace; font-size: 0.74rem; color: var(--ct); background: var(--cl); border-radius: 6px; padding: 2px 7px; } #container .vk-typesel button.on { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent); } #container .vk-typesel button:hover { border-color: var(--cb); } #container .vk-ed { --c: var(--vk-inv); --ct: var(--vk-inv-t); --cl: var(--vk-inv-l); --cb: var(--vk-inv-b); background: #fff; border-radius: 18px; box-shadow: 0 30px 80px color-mix(in srgb, var(--c) 18%, rgba(0,20,60,0.1)), 0 0 0 1px rgba(0,0,0,0.05); overflow: hidden; transition: box-shadow .4s; } #container .vk-ed-line { height: 4px; background: var(--c); transition: background .4s; } #container .vk-ed-steps { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #ececf0; font-size: 0.74rem; color: #86868b; flex-wrap: wrap; align-items: center; } #container .vk-ed-steps span { display: inline-flex; align-items: center; gap: 6px; } #container .vk-ed-steps span i { width: 18px; height: 18px; border-radius: 50%; background: #f2f3f6; color: #86868b; font-style: normal; font-size: 0.64rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } #container .vk-ed-steps span.on { color: #1d1d1f; font-weight: 500; } #container .vk-ed-steps span.on i { background: var(--c); color: #fff; transition: background .4s; } #container .vk-ed-steps .sep { color: #d2d2d7; } #container .vk-ed-body { padding: 18px; } #container .vk-ed-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } #container .vk-ed-title b { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.3rem; color: #1d1d1f; } #container .vk-ed-title code { font-family: 'Courier New', monospace; font-size: 0.76rem; background: var(--cl); color: var(--ct); border: 1px solid var(--cb); border-radius: 7px; padding: 3px 8px; transition: all .4s; } #container .vk-ed-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; } #container .vk-ed-box { border: 1px solid #ececf0; border-radius: 12px; padding: 12px; } #container .vk-ed-box .lab { font-size: 0.68rem; color: #86868b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; display: block; } #container .vk-ed-box b { font-weight: 500; font-size: 0.86rem; color: #1d1d1f; display: block; } #container .vk-ed-box small { font-size: 0.74rem; color: #6e6e73; display: block; } #container .vk-ed-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 0.78rem; } #container .vk-ed-kv span { color: #86868b; } #container .vk-ed-kv b { font-weight: 500; font-size: 0.78rem; text-align: right; } #container .vk-ed-kv .hl { color: var(--ct); transition: color .4s; } #container .vk-ed table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.78rem; } #container .vk-ed th { text-align: left; font-weight: 500; font-size: 0.68rem; color: #86868b; text-transform: uppercase; letter-spacing: .04em; padding: 6px 6px; border-bottom: 2px solid var(--c); transition: border-color .4s; } #container .vk-ed td { padding: 8px 6px; border-bottom: 1px solid #f2f2f5; color: #1d1d1f; } #container .vk-ed th.r, #container .vk-ed td.r { text-align: right; } #container .vk-ed .p-col { transition: opacity .3s; } #container .vk-ed[data-typ="del"]:not(.prices) .p-col { opacity: .18; } #container .vk-ed-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; } #container .vk-ed-sum { font-size: 0.8rem; color: #515154; } #container .vk-ed-sum b { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 1.15rem; color: #1d1d1f; margin-left: 8px; } #container .vk-ed-toggle { display: none; align-items: center; gap: 8px; font-size: 0.76rem; color: #515154; cursor: pointer; } #container .vk-ed[data-typ="del"] .vk-ed-toggle { display: inline-flex; } #container .vk-ed-toggle .sw { width: 32px; height: 18px; border-radius: 20px; background: #d2d2d7; position: relative; transition: background .2s; } #container .vk-ed-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } #container .vk-ed.prices .vk-ed-toggle .sw { background: var(--c); } #container .vk-ed.prices .vk-ed-toggle .sw::after { transform: translateX(14px); } #container .vk-ed-note { margin-top: 12px; font-size: 0.74rem; color: #6e6e73; background: #f7f7f9; border-radius: 10px; padding: 8px 10px; display: flex; gap: 8px; align-items: flex-start; } #container .vk-ed-note .rs-ico { color: var(--c); margin-top: 1px; transition: color .4s; } /* ---------- Pakete-Konfigurator ---------- */ /* ---------- „Passt dazu“ (übrige Untermodule) ---------- */ #container .vk-rel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } #container .vk-rel a { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #ececf0; border-radius: 20px; padding: 20px; transition: all .3s ease; position: relative; overflow: hidden; } #container .vk-rel a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); } #container .vk-rel a:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,20,60,0.08); border-color: var(--cb); } #container .vk-rel b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 1rem; color: #1d1d1f; } #container .vk-rel small { font-size: 0.84rem; color: #6e6e73; line-height: 1.45; } #container .vk-rel span.go { margin-top: auto; padding-top: 6px; color: #006FCF; font-size: 0.86rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } #container .vk-rel.over a.home { background: #000e28; border-color: transparent; } #container .vk-rel a.home b { color: #fff; } #container .vk-rel a.home small { color: rgba(255,255,255,0.6); } #container .vk-rel a.home span.go { color: #7ab8ff; } #container .vk-rel a.home::before { background: conic-gradient(var(--vk-quo) 0 25%, var(--vk-ord) 0 50%, var(--vk-del) 0 75%, var(--vk-inv) 0); } /* ---------- Dunkler Block „Drei Vorteile“ / Sicherheit ---------- */ #container .vk-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } #container .vk-three .card h3 { font-size: 1.3rem; } #container .vk-three .big { font-family: 'Roboto Serif', serif; font-weight: 600; font-size: 2.2rem; color: var(--ct, #006FCF); line-height: 1; margin-bottom: 10px; } /* Nummernkreis-Karten */ #container .vk-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; } #container .vk-num { border: 1px solid #ececf0; border-radius: 14px; padding: 12px; background: #fff; position: relative; overflow: hidden; } #container .vk-num::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); } #container .vk-num small { display: block; font-size: 0.72rem; color: #86868b; } #container .vk-num code { font-family: 'Courier New', monospace; font-size: 0.86rem; color: #1d1d1f; font-weight: 700; } /* Hinweis „Bald“ kleine Box */ #container .vk-soonrow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 26px; } #container .vk-soonrow span { font-size: 0.8rem; color: #515154; background: #fff; border: 1px dashed #c9cdd6; border-radius: 50px; padding: 6px 12px; display: inline-flex; gap: 6px; align-items: center; } /* Zeilen-Liste einer Belegliste */ #container .vk-list .ld td .sub { display: block; font-size: 0.72rem; color: #86868b; margin-top: 2px; } #container .vk-list .ld td .sub.c { color: var(--ct); } #container .vk-list .ld td .new { font-weight: 600; color: #1d1d1f; } #container .vk-list .ld td .new::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #006FCF; margin-right: 5px; vertical-align: 1px; } #container .vk-list .ld thead tr { box-shadow: inset 0 3px 0 var(--c); } #container .vk-prog { display: grid; gap: 4px; min-width: 130px; } #container .vk-prog div { display: grid; grid-template-columns: 58px 1fr 34px; gap: 6px; align-items: center; font-size: 0.68rem; color: #86868b; } #container .vk-prog i { height: 6px; border-radius: 4px; background: #eef0f3; position: relative; overflow: hidden; display: block; } #container .vk-prog i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--c); border-radius: 4px; } #container .vk-prog b { font-weight: 500; color: #1d1d1f; text-align: right; } /* Mengen-Fenster (Teil-/Schlussrechnung, Lieferung) */ #container .vk-qty { width: 100%; border-collapse: collapse; font-size: 0.78rem; } #container .vk-qty th { text-align: right; font-weight: 500; font-size: 0.66rem; color: #86868b; text-transform: uppercase; letter-spacing: .04em; padding: 6px; border-bottom: 1px solid #ececf0; } #container .vk-qty th:first-child, #container .vk-qty td:first-child { text-align: left; } #container .vk-qty td { padding: 9px 6px; border-bottom: 1px solid #f2f2f5; text-align: right; color: #1d1d1f; vertical-align: top; } #container .vk-qty td small { display: block; font-size: 0.66rem; color: #86868b; } #container .vk-qty td small.warn { color: #b42323; } #container .vk-qty .in { display: inline-block; min-width: 44px; border: 1.5px solid var(--c); border-radius: 7px; padding: 3px 6px; font-weight: 600; background: var(--cl); color: var(--ct); } #container .vk-qty .in.bad { border-color: #d93a3a; background: #fdecec; color: #b42323; } #container .vk-qty-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 0.78rem; } #container .vk-qty-foot .kind { font-weight: 600; color: var(--ct); display: inline-flex; gap: 6px; align-items: center; } /* Sammelrechnung: offene Lieferscheine je Kunde */ #container .vk-coll { display: grid; gap: 10px; } #container .vk-coll-g { border: 1px solid #ececf0; border-radius: 14px; overflow: hidden; background: #fff; } #container .vk-coll-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: #fafafb; font-size: 0.8rem; } #container .vk-coll-h b { font-weight: 600; color: #1d1d1f; } #container .vk-coll-h small { color: #86868b; } #container .vk-coll-r { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid #f2f2f5; font-size: 0.76rem; } #container .vk-coll-r .cb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #c9cdd6; display: flex; align-items: center; justify-content: center; color: transparent; } #container .vk-coll-r .cb.on { background: #006FCF; border-color: #006FCF; color: #fff; } #container .vk-coll-r code { font-family: 'Courier New', monospace; font-weight: 700; font-size: 0.74rem; color: var(--vk-del-t); } /* ---------- Responsiv (Teil 2) ---------- */ @media (max-width: 1100px) { #container .vk-split, #container .vk-ed-wrap { grid-template-columns: 1fr; } #container .vk-split.flip > :first-child { order: 0; } #container .vk-mods { grid-template-columns: repeat(2, 1fr); } #container .vk-mod, #container .vk-mod.wide { grid-column: span 1; } #container .vk-story { grid-template-columns: 1fr; gap: 0; max-width: 640px; margin: 0 auto; } #container .vk-story::before { left: 23px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #d2d6de 0 6px, transparent 6px 11px); } #container .vk-st { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding-bottom: 22px; } #container .vk-st .n { grid-row: span 5; margin-bottom: 0; } #container .vk-st .doc { justify-self: start; } #container .vk-rk { grid-template-columns: 1fr; gap: 0; max-width: 560px; } #container .vk-rk-arrow { height: 46px; } #container .vk-rk-arrow::before { left: 50%; right: auto; top: 6px; bottom: 6px; border-top: 0; border-left: 2px dashed #c9cdd6; } #container .vk-rk-arrow .rs-ico { transform: rotate(90deg); } #container .vk-rk-fork { min-height: 0; height: 46px; } #container .vk-rk-fork svg { display: none; } #container .vk-rk-fork::after { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; border-left: 2px dashed #c9cdd6; } #container .vk-rel { grid-template-columns: repeat(2, 1fr); } #container .vk-three { grid-template-columns: 1fr; } #container .vk-perm { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { #container .vk-flow ol { grid-template-columns: 1fr; gap: 10px; max-width: 420px; margin: 0 auto; } #container .vk-flow ol::before { left: 27px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, var(--vk-quo), var(--vk-ord), var(--vk-del), var(--vk-inv), var(--vk-pay)); } #container .vk-flow li { text-align: left; padding: 0; } #container .vk-flow a, #container .vk-flow .st { flex-direction: row; align-items: center; gap: 14px; } #container .vk-flow small { max-width: none; } #container .vk-flow .txt { display: flex; flex-direction: column; } #container .vk-flow.compact ol { grid-template-columns: repeat(5, auto); max-width: none; justify-content: center; gap: 4px; } #container .vk-flow.compact ol::before { display: none; } #container .vk-flow.compact li { text-align: center; } #container .vk-flow.compact a, #container .vk-flow.compact .st { flex-direction: column; gap: 4px; } #container .vk-flow.compact b { font-size: 0.72rem; } #container .vk-flow.compact .bub { width: 38px; height: 38px; } #container .vk-ed-grid, #container .vk-row2 { grid-template-columns: 1fr; } #container .vk-nums { grid-template-columns: repeat(2, 1fr); } #container .vk-rules li { grid-template-columns: 1fr; gap: 4px; } #container .vk-rules li > .rs-ico { display: none; } } @media (max-width: 680px) { #container .vk-mods, #container .vk-rel, #container .vk-perm { grid-template-columns: 1fr; } #container .vk-phone.lift { margin-top: 0; } #container .vk-toast { display: none; } #container .vk-cr { grid-template-columns: 12px 1fr auto; } #container .vk-cr .when { display: none; } #container .vk-fn-row { grid-template-columns: 78px 1fr 58px; } } @media (prefers-reduced-motion: reduce) { #container .vk-toast { animation: none; } #container .vk-pane.on { animation: none; } #container .reveal:not(.active) .vk-fn-bar i, #container .reveal:not(.active) .vk-gauge i { transform: none; width: auto; } } /* Konfigurator: ausgeblendete Einträge der Vorschau */ #container [data-show-if].hide { display: none !important; } /* ---------- Korrekturen gegen den Reset in body.css ---------------- body.css setzt jedes Element auf text-align:left und jedes label auf margin:15px. Zentrierte Bereiche müssen das daher ausdrücklich setzen. */ #container .section-intro > *, #container .stat-item > *, #container .cta-section h2, #container .cta-section p, #container .vk-flow-note, #container .demo-hint, #container .vk-phone-cap, #container .vk-phone-cap *, #container .vk-story-end .box, #container .vk-drop, #container .law-note, #container .code-card * { text-align: center; } #container .demo-hint[style*="left"] { text-align: left; } #container .vk-flow .txt { display: flex; flex-direction: column; align-items: center; } #container .vk-flow .txt b, #container .vk-flow .txt small { text-align: center; justify-content: center; } #container .vk-field .in.area { display: block; } #container .vk-ph-pos b, #container .vk-ph-pos span:last-child { white-space: nowrap; } #container .vk-ph-item .tg span { white-space: nowrap; } #container .vk-rules li { grid-template-columns: 215px 26px 1fr; } #container .hv .vk-appbar { flex-wrap: nowrap; overflow: hidden; font-size: 0.7rem; } #container .hv .vk-appbar > span { padding: 6px 8px; white-space: nowrap; } #container .hv.vk-hero-vis { min-height: 640px; } @media (max-width: 820px) { #container .vk-flow .txt { align-items: flex-start; } #container .vk-flow .txt b, #container .vk-flow .txt small { text-align: left; justify-content: flex-start; } #container .vk-rules li { grid-template-columns: 1fr; } } @media (max-width: 680px) { #container .hv.vk-hero-vis { min-height: 0; } #container .hv.vk-hero-vis .vk-win { position: relative !important; right: auto !important; } } /* ---------- Schmale Bildschirme: Spalten dürfen schrumpfen ---------- „1fr“ ist mindestens so breit wie der breiteste Inhalt. minmax(0,1fr) lässt Produktbilder mit nicht umbrechenden Leisten schrumpfen. */ #container .vk-win, #container .vk-ed, #container .dash, #container .vk-stock { min-width: 0; max-width: 100%; } @media (max-width: 1100px) { #container .hero-grid, #container .vk-split, #container .vk-ed-wrap, #container .cycle-wrap, #container .demo, #container .pay-grid, #container .perf-grid { grid-template-columns: minmax(0, 1fr); } #container .card.card-dark[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 680px) { #container .vk-mod-vis.coll svg, #container .vk-mod-vis.coll .vk-minidoc { display: none; } #container .vk-mod-vis.split { grid-template-columns: minmax(0, 1fr) !important; } #container .vk-mod-vis.split > div:last-child { display: none !important; } #container .vk-appbar { flex-wrap: nowrap; overflow: hidden; } #container .vk-tabs button { padding: 12px 9px 10px; } } @media (max-width: 520px) { #container .vk-ed th:nth-child(4), #container .vk-ed td:nth-child(4) { display: none; } #container .vk-ed th:first-child, #container .vk-ed td:first-child { display: none; } } /* ---------- Aufgeklapptes Aktionsmenü (Listen-Nachbau) ---------- */ #container .vk-menuwrap { position: relative; } #container .vk-menu { position: absolute; right: 18px; top: 58%; width: 230px; background: #fff; border-radius: 12px; box-shadow: 0 22px 50px rgba(0,20,60,0.18), 0 0 0 1px rgba(0,0,0,0.06); padding: 6px; z-index: 4; font-size: 0.78rem; } #container .vk-menu div { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: #1d1d1f; } #container .vk-menu div .rs-ico { color: #86868b; } #container .vk-menu div.hl { background: #f5f5f7; } #container .vk-menu div.pri { color: var(--ct); font-weight: 500; } #container .vk-menu div.pri .rs-ico { color: var(--c); } #container .vk-menu hr { border: 0; border-top: 1px solid #ececf0; margin: 4px 6px; } #container .vk-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } #container .vk-toolbar .srch { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 8px; border: 1px solid #e3e5ea; border-radius: 9px; padding: 8px 10px; font-size: 0.78rem; color: #86868b; } #container .vk-toolbar .tb { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e3e5ea; border-radius: 9px; padding: 8px 11px; font-size: 0.76rem; color: #515154; } #container .vk-toolbar .tb.on { border-color: var(--c); color: var(--ct); background: var(--cl); } #container .chips span.dr { border-style: dashed; } #container .vk-list .chips span.on { background: var(--c); border-color: var(--c); } /* ---------- Einstellungs-Fenster (Nachbau) ---------- */ #container .vk-set { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 100%; } #container .vk-set-nav { background: #fafafb; border-right: 1px solid #ececf0; padding: 12px 8px; display: grid; gap: 2px; align-content: start; font-size: 0.74rem; } #container .vk-set-nav span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: #515154; } #container .vk-set-nav span.on { background: #fff; color: #1d1d1f; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 3px 0 0 var(--c); } #container .vk-set-main { padding: 16px 18px; } #container .vk-set-main h5 { font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ct); margin: 0 0 8px; } #container .vk-set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid #f2f2f5; font-size: 0.8rem; color: #1d1d1f; } #container .vk-set-row small { display: block; color: #86868b; font-size: 0.7rem; } #container .vk-set-row .ctl { font-size: 0.76rem; border: 1px solid #e3e5ea; border-radius: 8px; padding: 5px 10px; background: #fff; white-space: nowrap; } #container .vk-set-row .sw { width: 32px; height: 18px; border-radius: 20px; background: var(--c); position: relative; display: inline-block; } #container .vk-set-row .sw::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; } #container .vk-set-row .sw.off { background: #d2d2d7; } #container .vk-set-row .sw.off::after { right: auto; left: 2px; } @media (max-width: 680px) { #container .vk-set { grid-template-columns: minmax(0, 1fr); } #container .vk-set-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #ececf0; } #container .vk-set-nav span { white-space: nowrap; } #container .vk-menu { position: static; width: auto; margin-top: 10px; } } /* A4-Beleg (nutzt .inv der E-Rechnungsseite) in Belegfarbe */ #container .inv.vk-doc { max-width: 520px; } #container .inv .i-sign { margin-top: 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 0.82em; color: #86868b; } #container .inv .i-sign span { border-top: 1px solid #1d1d1f; padding-top: 4px; } #container .inv .i-qrbox { display: flex; gap: 10px; align-items: center; margin-top: 5%; padding: 8px; border: 1px dashed color-mix(in srgb, var(--acc) 45%, #fff); border-radius: 8px; width: fit-content; } #container .inv .i-qrbox small { font-size: 0.9em; color: var(--acc); font-weight: 600; } #container .vk-doc-wrap { position: relative; padding: 10px 0 30px; } #container .vk-doc-wrap .vk-toast { position: absolute; } #container .vk-story.s5 { grid-template-columns: repeat(5, 1fr); } #container .vk-story.s6 { grid-template-columns: repeat(6, 1fr); } @media (max-width: 1100px) { #container .vk-story.s5, #container .vk-story.s6 { grid-template-columns: 1fr; } } /* Liste mit aufgeklapptem Menü: Tabelle rückt links, Menü steht daneben */ @media (min-width: 1101px) { #container .vk-menuwrap.has-menu .ld-scroll, #container .vk-menuwrap.has-menu .ld-foot { margin-right: 250px; } #container .vk-menuwrap.has-menu .vk-menu { top: 118px !important; right: 18px; } } #container .vk-set-nav > span { display: flex; } #container .vk-set-nav span .vk-dot { padding: 0; width: 8px; height: 8px; } #container .vk-phones.duo { gap: 18px; flex-wrap: nowrap; } #container .vk-phones.duo .vk-phone { width: 262px; } @media (max-width: 620px) { #container .vk-phones.duo { flex-wrap: wrap; } #container .vk-phones.duo .vk-phone { width: 290px; } } #container .vk-rel { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } @media (max-width: 1100px) { #container .vk-rel { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { #container .vk-rel { grid-template-columns: 1fr; } } @media (max-width: 1100px) { #container .vk-rek3 { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; } #container .vk-rek3 > div { width: 100%; max-width: 640px; } #container .vk-rek3 .vk-phone { margin: 0 auto; } #container .vk-rek3 .vk-phone.lift { margin-top: 0; } } @media (max-width: 680px) { #container .vk-doc-wrap > .vk-phone { display: none; } #container .vk-doc-wrap > .inv { margin: 0 !important; } } @media (max-width: 680px) { #container .vk-qty { display: block; overflow-x: auto; white-space: nowrap; } #container .vk-qty td small { white-space: normal; min-width: 150px; } } @media (max-width: 680px) { #container .vk-hero-ld th:nth-child(4), #container .vk-hero-ld td:nth-child(4) { display: none; } #container .vk-hero-ld .vk-prog { min-width: 110px; } } #container .vk-rk.two { grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1.3fr); } #container .store.single { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.2fr); } @media (max-width: 1100px) { #container .vk-rk.two { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 820px) { #container .store.single { grid-template-columns: minmax(0, 1fr); } } /* Kennzeichnung „Zusatzmodul Artikelmanager“ */ #container .vk-addon { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 500; color: #515154; background: #fff; border: 1px dashed #c9cdd6; border-radius: 50px; padding: 4px 10px; white-space: nowrap; vertical-align: middle; } #container .vk-addon .rs-ico { color: #86868b; } #container .vk-addon .soon { margin-left: 2px; } #container .grey .vk-addon { background: #fff; }