/* ========================================================================== Leistungen: Sechs Bausteine – jede Karte mit eigener kleiner Show Szenen laufen per blocks.js schrittweise (data-step, .is-sN, [data-at].on) und nur im Sichtbereich. ========================================================================== */ .bs .bento-card { min-height: 620px; gap: 22px; } .bs .bento-claim { font-size: 1.0625rem; } .bs .bento-tags { margin-top: -4px; } .bs-stage { position: relative; margin-top: auto; overflow: hidden; min-height: 290px; border-radius: 18px; padding: 18px; border: 1px solid var(--line); background: #F7F7F4 radial-gradient(rgba(11, 11, 12, .07) 1px, transparent 1.2px) 0 0 / 16px 16px; } .bs-dark { background: #0F0F11 radial-gradient(rgba(242, 242, 240, .07) 1px, transparent 1.2px) 0 0 / 16px 16px; border-color: #25252A; color: var(--on-dark); } .bs .bs-stage *, .bs .bs-stage *::before, .bs .bs-stage *::after { animation-play-state: paused; } .bs.is-inview .bs-stage *, .bs.is-inview .bs-stage *::before, .bs.is-inview .bs-stage *::after { animation-play-state: running; } /* Schrittweise einblenden */ .bs-stage [data-at] { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.16, 1, .3, 1); } .bs-stage [data-at].on { opacity: 1; transform: none; } .bs-stage.is-reset * { transition-duration: .2s !important; transition-delay: 0s !important; } /* Szenen-Untertitel mit Fortschritt */ .bs-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: .8125rem; font-weight: 600; color: var(--accent); min-height: 1.4em; } .bs-cap [data-cap] { animation: bs-cap .45s var(--ease); } .bs-dots { display: inline-flex; gap: 5px; } .bs-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: width .4s var(--ease), background-color .4s var(--ease); } .bs-dots i.on { width: 18px; background: var(--brand); } @keyframes bs-cap { from { opacity: 0; transform: translateY(4px); } } /* ---------- 01 Wissen ---------- */ .kn2-q { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 20px -14px rgba(11, 11, 12, .3); font-size: .9375rem; font-weight: 500; min-height: 46px; } .kn2-q .icon { width: 18px; height: 18px; color: var(--brand); flex: none; } .kn2-caret { width: 2px; height: 18px; background: var(--brand); animation: bs-blink 1s steps(1) infinite; } .bs-stage:not([data-step="0"]) .kn2-caret { opacity: 0; } @keyframes bs-blink { 50% { opacity: 0; } } .kn2-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; } .kn2-docs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; } .kn2-doc { position: relative; display: flex; align-items: center; gap: 7px; padding: 9px 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: .75rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; transition: opacity .6s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); } .kn2-doc b { flex: none; padding: 1px 5px; border-radius: 4px; background: #EDEDE8; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .5625rem; letter-spacing: .04em; color: var(--muted); } .kn2-doc i { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 2px; background: #EDEDE8; overflow: hidden; } .kn2-doc i em { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--k) * 90ms + 300ms); } .kn2-doc s { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); color: var(--ink); font-size: .5625rem; font-weight: 700; text-decoration: none; opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1); } .kn2-beam { position: absolute; left: -4px; right: -4px; top: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--brand) 25%, #FFB08F 50%, var(--brand) 75%, transparent); box-shadow: 0 0 14px 3px rgba(255, 91, 31, .45); pointer-events: none; } .bs-kn[data-step="1"] .kn2-beam { animation: bs-beam 1.6s cubic-bezier(.65, 0, .35, 1) .1s 1 forwards; } @keyframes bs-beam { 0% { opacity: 0; top: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; top: 100%; } } .bs-kn.is-s1 .kn2-doc i em { transform: scaleX(var(--r)); } .bs-kn.is-s1 .kn2-doc:not(.hit) { opacity: .38; transition-delay: 1.3s; } .bs-kn.is-s1 .kn2-doc.hit { border-color: rgba(255, 91, 31, .6); box-shadow: 0 0 0 3px rgba(255, 91, 31, .1); transition-delay: 1.3s; } .bs-kn.is-s1 .kn2-doc.hit s { opacity: 1; transform: none; transition-delay: calc(1.4s + var(--k) * 80ms); } .kn2-ans { padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(11, 11, 12, .35); opacity: .35; transition: opacity .5s var(--ease); } .bs-kn.is-s2 .kn2-ans { opacity: 1; } .kn2-ans-h { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .kn2-l { font-size: .8125rem; line-height: 1.45; padding: 6px 0; border-top: 1px solid #EFEFEA; } .kn2-l:nth-of-type(3) { transition-delay: .5s; } .kn2-l:nth-of-type(4) { transition-delay: 1s; } .kn2-l sup { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: var(--brand-soft); color: var(--accent); font-size: .5625rem; font-weight: 700; vertical-align: 1px; } .bs-kn.is-s3 .kn2-l sup, .bs-kn.is-s3 .kn2-doc.hit s { animation: bs-cite 3.4s var(--ease) infinite; } .bs-kn.is-s3 .kn2-l:nth-of-type(3) sup, .bs-kn.is-s3 .kn2-doc.hit:nth-child(3) s { animation-delay: .9s; } .bs-kn.is-s3 .kn2-l:nth-of-type(4) sup, .bs-kn.is-s3 .kn2-doc.hit:nth-child(5) s { animation-delay: 1.8s; } @keyframes bs-cite { 0%, 30%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0); } 10% { box-shadow: 0 0 0 6px rgba(255, 91, 31, .28); background: var(--brand); color: var(--ink); } } /* ---------- 04 Schnittstellen ---------- */ .bs-hub { padding: 0; aspect-ratio: 420 / 220; min-height: 0; } .hub2-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .hub2-lines path { stroke: var(--line-strong); stroke-width: 1.2; fill: none; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; } .hub2-pk rect { fill: var(--ink); } .hub2-pk text { fill: #fff; font-family: var(--font); font-size: 8px; font-weight: 600; text-anchor: middle; dominant-baseline: central; } .hub2-pk-b rect { fill: var(--brand); } .hub2-pk-b text { fill: var(--ink); } .hub2-pk-c rect { fill: #fff; stroke: var(--brand); stroke-width: 1; } .hub2-pk-c text { fill: var(--accent); } .bs-hub .hub-chip, .bs-hub .hub-core { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 7px 12px; border-radius: 999px; font-size: .75rem; font-weight: 500; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 16px -10px rgba(11, 11, 12, .25); } .bs-hub .hub-core { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: var(--ink); color: #fff; border-color: var(--ink); font-size: .8125rem; box-shadow: 0 0 0 8px rgba(255, 91, 31, .08), 0 16px 30px -14px rgba(255, 91, 31, .6); } .bs-hub .hub-core::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(255, 91, 31, .25); animation: bs-core 2s ease-in-out infinite; } @keyframes bs-core { 50% { box-shadow: 0 0 0 7px rgba(255, 91, 31, .08); } } /* ---------- 05 Menschen ---------- */ .hu2-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; } .hu2-card { position: relative; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 28px -18px rgba(11, 11, 12, .35); } .hu2-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 500; margin-bottom: 8px; } .hu2-conf { padding: 3px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--accent); font-size: .6875rem; font-weight: 600; white-space: nowrap; } .hu2-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 8px; margin: 0 -8px; border-radius: 8px; border-top: 1px solid #EFEFEA; font-size: .8125rem; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); } .hu2-price { position: relative; display: grid; justify-items: end; } .hu2-price .old, .hu2-price .new { grid-area: 1 / 1; transition: opacity .4s var(--ease), transform .5s var(--ease); } .hu2-price .new { opacity: 0; transform: translateY(6px); color: var(--accent); } .bs-hu[data-step="1"] .hu2-row:nth-of-type(2) { background: var(--brand-soft); box-shadow: inset 0 0 0 1px rgba(255, 91, 31, .4); } .bs-hu.is-s2 .hu2-price .old { opacity: 0; transform: translateY(-6px); } .bs-hu.is-s2 .hu2-price .new { opacity: 1; transform: none; } .hu2-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .hu2-btn { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); font-size: .75rem; font-weight: 500; transition: background-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease); } .hu2-primary { background: var(--ink); color: #fff; border-color: var(--ink); } .bs-hu.is-s3 .hu2-primary { background: var(--brand); border-color: var(--brand); color: var(--ink); } .bs-hu[data-step="3"] .hu2-primary { animation: bs-click .5s var(--ease) .75s; } @keyframes bs-click { 50% { transform: scale(.9); } } .hu2-cursor { position: absolute; width: 20px; height: 20px; left: 96%; top: 118%; z-index: 3; opacity: 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3)); transition: left .9s cubic-bezier(.65, 0, .35, 1), top .9s cubic-bezier(.65, 0, .35, 1), opacity .4s var(--ease); } .hu2-cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; } .bs-hu.is-s1 .hu2-cursor { opacity: 1; left: 86%; top: 44%; } .bs-hu.is-s3 .hu2-cursor { left: 90%; top: 84%; } .bs-hu.is-s4 .hu2-cursor { opacity: 0; } .hu2-log { margin: 0; padding: 4px 0 0; list-style: none; display: grid; gap: 14px; position: relative; } .hu2-log::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--line-strong); } .hu2-log li { position: relative; display: grid; padding-left: 22px; font-size: .8125rem; font-weight: 600; } .hu2-log li i { position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); } .hu2-log li:last-child i { background: var(--brand); } .hu2-log small { font-size: .75rem; font-weight: 400; color: var(--muted); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .bs .bento-card { min-height: 0; } } @media (max-width: 640px) { .kn2-body, .hu2-grid { grid-template-columns: 1fr; } .kn2-q { font-size: .8125rem; } .bs-hub .hub-chip { font-size: .625rem; padding: 5px 8px; } .bs-hub .hub-core { font-size: .6875rem; padding: 8px 12px; } } @media (prefers-reduced-motion: reduce) { .bs .bs-stage *, .bs .bs-stage *::before, .bs .bs-stage *::after { animation: none !important; } } /* ========================================================================== Überarbeitung: Aussage groß, Visual randlos ========================================================================== */ .bs .bento-card { --pad: 32px; padding: var(--pad); gap: 18px; min-height: 640px; transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s var(--ease); } .bs .bento-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(11, 11, 12, .35); } .bs .bento-card:not(.bento-dark) { background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF8 100%); } .bs .bento-dark { background: radial-gradient(ellipse at 80% 0%, rgba(255, 91, 31, .10), transparent 55%), #0E0E10; } .bs-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .bs-kicker .bento-icon { width: 34px; height: 34px; border-radius: 10px; } .bs-kicker .bento-icon .icon { width: 18px; height: 18px; } .bs-num { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .75rem; color: var(--accent); } .bento-dark .bs-num { color: var(--brand-hi); } .bs .bs-kicker h3 { font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); } .bs .bento-dark .bs-kicker h3 { color: var(--on-dark-2); } .bs .bento-claim { margin: 0 0 12px; font-size: clamp(1.75rem, 2.5vw, 2.375rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.06; color: var(--ink); max-width: 16em; } .bs .bento-dark .bento-claim { color: #fff; } .bs .bento-copy > p:last-child { font-size: 1rem; line-height: 1.55; max-width: 34em; } /* Bühne randlos bis an die Kartenkante */ .bs .bs-stage { margin: auto calc(-1 * var(--pad)) calc(-1 * var(--pad)); border: 0; border-top: 1px solid var(--line); border-radius: 0; min-height: 330px; padding: 22px var(--pad) calc(var(--pad) - 6px); } .bs .bs-dark { border-top-color: #222227; } .bs .bs-hub { padding: 0; min-height: 0; } /* ---------- 06 Apps, Plattformen & Integration (neu) ---------- */ .bs-ap3 { display: grid; grid-template-rows: 1fr auto auto; gap: 0; min-height: 380px; } .ap3-screens { position: relative; min-height: 230px; } .ap3-browser { position: absolute; left: 0; top: 0; width: 68%; bottom: 8px; border-radius: 12px; overflow: hidden; background: #F4F4F2; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); } .ap3-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: #E7E7E2; } .ap3-bar i { width: 7px; height: 7px; border-radius: 50%; background: #C4C4BC; } .ap3-bar span { margin-left: 10px; padding: 2px 10px; border-radius: 6px; background: #F4F4F2; font-size: .625rem; color: var(--muted); } .ap3-body { padding: 12px; display: grid; gap: 10px; } .ap3-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ap3-kpis div { padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); } .ap3-kpis small { display: block; font-size: .5625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .ap3-kpis b { position: relative; display: grid; font-size: 1.25rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .ap3-kpis b span { grid-area: 1 / 1; transition: opacity .4s var(--ease), transform .5s var(--ease); } .ap3-kpis b .n { opacity: 0; transform: translateY(8px); } .bs-ap3.is-s2 .ap3-kpis b .o { opacity: 0; transform: translateY(-8px); } .bs-ap3.is-s2 .ap3-kpis b .n { opacity: 1; transform: none; } .bs-ap3.is-s2 .ap3-kpis .k-sent { color: #1E7A3E; } .ap3-table { display: grid; border-radius: 8px; background: #fff; border: 1px solid var(--line); overflow: hidden; } .ap3-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; font-size: .6875rem; border-top: 1px solid #EFEFEA; transition: background-color .6s var(--ease); } .ap3-row:first-child { border-top: 0; } .ap3-row span:first-child { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--muted); } .bs-ap3[data-step="2"] .ap3-row.is-live { background: rgba(110, 231, 160, .16); } .ap3-st { display: grid; justify-items: end; } .ap3-st em { grid-area: 1 / 1; padding: 2px 7px; border-radius: 999px; font-style: normal; font-size: .5625rem; font-weight: 700; white-space: nowrap; background: #FBEFD9; color: #A15C07; transition: opacity .4s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1); } .ap3-st em.st-open { background: #EDEDE8; color: var(--muted); } .ap3-st em.st-sent, .ap3-st em.n { background: #DDF3E4; color: #1E7A3E; } .ap3-st em.n { opacity: 0; transform: scale(.7); } .bs-ap3.is-s2 .is-live .ap3-st .o { opacity: 0; } .bs-ap3.is-s2 .is-live .ap3-st .n { opacity: 1; transform: none; } .ap3-phone { position: absolute; right: 2%; top: 14px; bottom: -6px; width: 27%; min-width: 128px; max-width: 170px; padding: 30px 10px 10px; border-radius: 22px; background: #F4F4F2; color: var(--ink); border: 4px solid #26262C; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .95); overflow: hidden; } .ap3-notch { position: absolute; left: 50%; top: 7px; width: 34px; height: 8px; margin-left: -17px; border-radius: 5px; background: #26262C; } .ap3-app-h { font-size: .75rem; font-weight: 700; margin-bottom: 8px; } .ap3-item { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px; margin-bottom: 6px; border-radius: 9px; background: #fff; border: 1px solid var(--line); font-size: .6875rem; transition: box-shadow .5s var(--ease); } .bs-ap3[data-step="2"] .ap3-item.is-live { box-shadow: 0 0 0 2px rgba(110, 231, 160, .8); } .ap3-push { position: absolute; left: 6px; right: 6px; top: 20px; z-index: 2; padding: 8px 9px; border-radius: 10px; background: rgba(24, 24, 28, .94); color: #fff; font-size: .625rem; line-height: 1.35; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(-120%); transition: opacity .4s var(--ease), transform .6s cubic-bezier(.16, 1, .3, 1); } .ap3-push b { display: block; font-size: .6875rem; } .bs-ap3.is-s2 .ap3-push { opacity: 1; transform: none; transition-delay: .35s; } .ap3-bus { position: relative; height: 44px; margin: 6px 0 0; } .ap3-bus::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: #34343A; } .ap3-bus::after { content: ""; position: absolute; left: 38%; top: 0; bottom: 0; width: 1px; background: #34343A; } .ap3-mw { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 4px 10px; border-radius: 7px; background: #0E0E10; border: 1px solid rgba(255, 91, 31, .55); font-size: .625rem; font-weight: 700; letter-spacing: .04em; color: var(--brand-hi); box-shadow: 0 0 18px rgba(255, 91, 31, .2); } .ap3-bus i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--brand-hi); box-shadow: 0 0 14px rgba(255, 91, 31, .9); opacity: 0; } .bs-ap3[data-step="1"] .ap3-bus .p1 { animation: ap3-p1 1.4s cubic-bezier(.65, 0, .35, 1) forwards; } @keyframes ap3-p1 { 0% { left: 14%; top: 100%; opacity: 0; } 15% { opacity: 1; } 45% { left: 14%; top: 50%; } 80% { left: 38%; top: 50%; opacity: 1; } 100% { left: 38%; top: 0; opacity: 0; } } .ap3-systems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ap3-systems span { padding: 9px 6px; border-radius: 10px; background: #18181C; border: 1px solid #2A2A30; text-align: center; font-size: .75rem; font-weight: 600; color: var(--on-dark-2); transition: border-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); } .bs-ap3[data-step="1"] .ap3-systems .is-src { border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(255, 91, 31, .12); } @media (max-width: 640px) { .bs .bento-card { --pad: 22px; min-height: 0; } .bs .bs-stage { min-height: 280px; } .ap3-browser { width: 100%; } .ap3-phone { width: 44%; min-width: 0; right: -4px; top: 60px; } .ap3-kpis div:nth-child(3) { display: none; } .ap3-kpis { grid-template-columns: 1fr 1fr; } .ap3-systems { grid-template-columns: 1fr 1fr; } } /* ---------- 01 Wissen: abstraktes 3D-Gehirn ---------- */ .bs .bs-brain { position: relative; min-height: 440px; padding: 0; overflow: hidden; border-top-color: #1E1E22; background: radial-gradient(ellipse at 44% 58%, rgba(255, 91, 31, .16), transparent 55%), radial-gradient(ellipse at 44% 58%, #17171B, #0A0A0C 70%); } .bs-brain .bs-cap { color: var(--brand-hi); } .bs-brain .bs-dots i { background: #34343A; } .bs-brain .kn2-q { box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .8); } .kb-canvas { position: absolute; inset: 0; display: block; } .bs-brain .kn2-q { position: absolute; left: var(--pad); top: 18px; right: 40%; z-index: 2; font-size: .875rem; } /* Quellen hängen an den Wissensbereichen (Position per brain.js) */ .kb-tag { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform; display: none; } .bs-brain.is-s1 .kb-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px 6px 7px; margin: -40px 0 0 -40px; border-radius: 9px; background: #fff; border: 1px solid rgba(255, 91, 31, .55); box-shadow: 0 10px 22px -12px rgba(11, 11, 12, .45); font-size: .75rem; font-weight: 500; color: var(--ink); white-space: nowrap; animation: kb-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; } .bs-brain.is-s1 .kb-tag:nth-of-type(2) { animation-delay: .5s; } .bs-brain.is-s1 .kb-tag:nth-of-type(3) { animation-delay: 1s; } @keyframes kb-pop { from { opacity: 0; scale: .6; } } .kb-tag b { padding: 1px 5px; border-radius: 4px; background: #EDEDE8; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .5625rem; letter-spacing: .04em; color: var(--muted); } .kb-tag s { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); color: var(--ink); font-size: .5625rem; font-weight: 700; text-decoration: none; } .bs-brain.is-s3 .kb-tag s { animation: bs-cite 3.4s var(--ease) infinite; } .bs-brain.is-s3 .kb-tag:nth-of-type(2) s { animation-delay: .9s; } .bs-brain.is-s3 .kb-tag:nth-of-type(3) s { animation-delay: 1.8s; } .bs-brain .kn2-ans { position: absolute; right: var(--pad); bottom: 54px; z-index: 2; width: min(46%, 300px); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.16, 1, .3, 1); background: rgba(255, 255, 255, .94); } .bs-brain.is-s2 .kn2-ans { opacity: 1; transform: none; } .bs-brain .bs-cap { position: absolute; left: var(--pad); right: var(--pad); bottom: 18px; margin: 0; z-index: 2; } @media (max-width: 640px) { .bs .bs-brain { min-height: 440px; } .bs-brain .kn2-q { right: var(--pad); } .bs-brain .kn2-ans { width: auto; left: var(--pad); } } /* ---------- 02 Workflows: Automatisierungsstrecke ---------- */ .bs-wf3 { display: flex; flex-direction: column; gap: 16px; } .wf3-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .wf3-rules-h { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #75757D; margin-right: 4px; } .wf3-rules span:not(.wf3-rules-h) { padding: 4px 9px; border-radius: 999px; font-size: .6875rem; background: rgba(110, 231, 160, .08); border: 1px solid rgba(110, 231, 160, .28); color: #6EE7A0; } .wf3-line { position: relative; container-type: inline-size; padding-bottom: 84px; } .wf3-stations { position: relative; height: 46px; } .wf3-stations span { position: absolute; top: 0; left: calc((var(--f) * 92 + 3.25) * 1%); transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; font-size: .625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--on-dark-2); } .wf3-stations span::after { content: ""; width: 2px; height: 14px; background: linear-gradient(#3A3A42, rgba(58, 58, 66, 0)); } .wf3-stations i { width: 10px; height: 10px; border-radius: 50%; background: #2A2A30; box-shadow: inset 0 0 0 1px #3A3A42; animation: wf3-led 4s linear infinite; animation-delay: calc(var(--f) * 8s); } @keyframes wf3-led { 0%, 8% { background: #6EE7A0; box-shadow: 0 0 12px 2px rgba(110, 231, 160, .7); } 15%, 100% { background: #2A2A30; box-shadow: inset 0 0 0 1px #3A3A42; } } .wf3-belt { position: relative; height: 70px; border-radius: 12px; overflow: visible; background: #17171B; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .04), 0 0 0 1px #26262B; } .wf3-belt::before, .wf3-belt::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: radial-gradient(circle, #3A3A42 30%, #222227 32%); box-shadow: 0 0 0 1px #2E2E34; } .wf3-belt::before { left: -13px; } .wf3-belt::after { right: -13px; } @keyframes wf3-belt { to { background-position: 28px 0; } } .wf3-doc { position: absolute; left: 0; top: 9px; width: 14.5cqw; min-width: 54px; height: 52px; padding: 6px 5px; box-sizing: border-box; display: grid; align-content: start; gap: 4px; border-radius: 6px; background: #F4F4F2; color: var(--ink); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .9); animation: wf3-move 8s linear infinite; animation-delay: var(--d, 0s); } @keyframes wf3-move { 0% { transform: translateX(-4cqw); opacity: 0; } 5% { opacity: 1; } 93% { opacity: 1; } 100% { transform: translateX(88cqw); opacity: 0; } } .wf3-doc-h { font-size: .5rem; letter-spacing: -0.01em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf3-doc-l { display: block; height: 3px; width: 80%; border-radius: 2px; background: #D6D6CF; } .wf3-doc-l.s { width: 55%; } .wf3-ticks { display: flex; gap: 3px; margin-top: 2px; } .wf3-ticks i { width: 7px; height: 7px; border-radius: 50%; background: #D6D6CF; animation: 8s linear infinite; animation-delay: var(--d, 0s); } .wf3-ticks i:nth-child(1) { animation-name: wf3-t1; } .wf3-ticks i:nth-child(2) { animation-name: wf3-t2; } .wf3-ticks i:nth-child(3) { animation-name: wf3-t3; } .wf3-ticks i:nth-child(4) { animation-name: wf3-t4; } @keyframes wf3-t1 { 0%, 20% { background: #D6D6CF; } 21%, 100% { background: #1E7A3E; } } @keyframes wf3-t2 { 0%, 40.8% { background: #D6D6CF; } 41.8%, 100% { background: #1E7A3E; } } @keyframes wf3-t3 { 0%, 61.7% { background: #D6D6CF; } 62.7%, 100% { background: #1E7A3E; } } @keyframes wf3-t4 { 0%, 82.5% { background: #D6D6CF; } 83.5%, 100% { background: #1E7A3E; } } /* Ausnahme: wird beim Prüfen aussortiert, ein Mensch prüft, dann geht es weiter */ .wf3-ex { background: #FBEFD9; animation: wf3-ex 8s linear infinite; animation-delay: -2s; z-index: 1; } .wf3-ok { position: absolute; left: -6px; top: -6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #1E7A3E; color: #fff; font-size: .5625rem; font-weight: 800; opacity: 0; transform: scale(.4); animation: wf3-okpop 8s linear infinite; animation-delay: -2s; } @keyframes wf3-okpop { 0%, 66% { opacity: 0; transform: scale(.4); } 70%, 100% { opacity: 1; transform: none; } } .wf3-flag { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #F5C451; color: var(--ink); font-size: .625rem; font-weight: 800; } @keyframes wf3-ex { 0% { transform: translate(-4cqw, 0); opacity: 0; } 5% { opacity: 1; } 38% { transform: translate(31cqw, 0); } 45% { transform: translate(33cqw, 88px) rotate(-3deg); } 66% { transform: translate(35cqw, 88px) rotate(-3deg); } 72% { transform: translate(35cqw, 88px) rotate(0); } 90% { transform: translate(37cqw, 88px); opacity: 1; } 100% { transform: translate(38cqw, 88px); opacity: 0; } } .wf3-human { position: absolute; left: 22cqw; right: 0; bottom: 0; height: 70px; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 0 12px 0 32cqw; border-radius: 12px; border: 1px dashed #34343A; font-size: .75rem; color: var(--on-dark-2); animation: wf3-human 8s linear infinite; animation-delay: -2s; } .wf3-human b { display: block; color: #fff; font-size: .8125rem; } .wf3-human small { font-size: .6875rem; } .wf3-person { width: 28px; height: 28px; border-radius: 50%; flex: none; background: radial-gradient(circle at 50% 36%, #F2F2F0 0 5px, transparent 5.5px), radial-gradient(circle at 50% 112%, #F2F2F0 0 11px, transparent 11.5px), #2A2A30; } @keyframes wf3-human { 0%, 40%, 96%, 100% { border-color: #34343A; background: transparent; } 45%, 66% { border-color: #F5C451; background: rgba(245, 196, 81, .07); } 70%, 90% { border-color: rgba(110, 231, 160, .5); background: rgba(110, 231, 160, .05); } } .wf3-count { display: flex; align-items: baseline; gap: 10px; margin-top: auto; } .wf3-count span { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #75757D; } .wf3-count b { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; } .wf3-count small { margin-left: auto; font-size: .6875rem; color: #5A5A62; } @media (prefers-reduced-motion: reduce) { .wf3-doc { transform: translateX(calc(var(--d) * -11.5cqw)); } .wf3-ex { display: none; } } /* ---------- 03 KI-Agenten: Agent steuert Werkzeuge – mit Grenzen ---------- */ .bs-ag3 { display: flex; flex-direction: column; gap: 12px; } .ag3-map { display: block; width: 100%; height: auto; overflow: visible; } .ag3-lines path { fill: none; stroke: #2E2E34; stroke-width: 1.2; stroke-dasharray: 3 5; } .ag3-lines .l4 { stroke: rgba(248, 113, 113, .35); } .ag3-beams path { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 8 10; opacity: 0; transition: opacity .35s var(--ease), stroke .35s var(--ease); animation: ag3-flow 0.9s linear infinite; } @keyframes ag3-flow { to { stroke-dashoffset: -36; } } .bs-ag3[data-step="0"] .b0, .bs-ag3[data-step="1"] .b1, .bs-ag3[data-step="2"] .b2 { opacity: 1; } .bs-ag3[data-step="3"] .b3, .bs-ag3[data-step="4"] .b3 { opacity: 1; stroke: #F5C451; } .bs-ag3[data-step="5"] .b3 { opacity: 1; stroke: #6EE7A0; } /* Agent */ .ag3-core .halo { fill: rgba(255, 91, 31, .12); animation: ag3-halo 2.4s ease-in-out infinite; transform-origin: 200px 112px; } .ag3-core .ring { fill: none; stroke: rgba(255, 122, 69, .55); stroke-width: 1; } .ag3-core .orb { fill: #FF5B1F; filter: drop-shadow(0 0 10px rgba(255, 91, 31, .8)); } .ag3-core text { fill: #0B0B0C; font-family: var(--font); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; } @keyframes ag3-halo { 50% { transform: scale(1.12); opacity: .6; } } .bs-ag3[data-step="4"] .ag3-core .ring { stroke: #F5C451; } /* Werkzeuge */ .ag3-map .nd rect { fill: #17171B; stroke: #2E2E34; stroke-width: 1; transition: fill .35s var(--ease), stroke .35s var(--ease); } .ag3-map .nd text { fill: var(--on-dark-2); font-family: var(--font); font-size: 11px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; transition: fill .35s var(--ease); } .bs-ag3[data-step="0"] .n0 rect, .bs-ag3[data-step="1"] .n1 rect, .bs-ag3[data-step="2"] .n2 rect { fill: rgba(255, 91, 31, .16); stroke: var(--brand-hi); } .bs-ag3[data-step="0"] .n0 text, .bs-ag3[data-step="1"] .n1 text, .bs-ag3[data-step="2"] .n2 text { fill: #fff; } .bs-ag3[data-step="3"] .n3 rect, .bs-ag3[data-step="4"] .n3 rect { fill: rgba(245, 196, 81, .12); stroke: #F5C451; } .bs-ag3[data-step="5"] .n3 rect { fill: rgba(110, 231, 160, .12); stroke: #6EE7A0; } .bs-ag3[data-step="3"] .n3 text, .bs-ag3[data-step="4"] .n3 text, .bs-ag3[data-step="5"] .n3 text { fill: #fff; } .ag3-map .n4 rect { fill: transparent; stroke: rgba(248, 113, 113, .35); stroke-dasharray: 3 3; } .ag3-map .n4 text { fill: #5A5A62; } .ag3-map .nx { fill: #F87171 !important; font-size: 9px !important; font-weight: 500 !important; } /* Häkchen für erledigte Schritte */ .ag3-map .ck circle { fill: #1E7A3E; } .ag3-map .ck path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ag3-map .ck { opacity: 0; transition: opacity .3s var(--ease); } .bs-ag3.is-s1 .n0 .ck, .bs-ag3.is-s2 .n1 .ck, .bs-ag3.is-s3 .n2 .ck, .bs-ag3.is-s5 .ck-mail { opacity: 1; } /* Schloss: Senden ist gesperrt, bis ein Mensch freigibt */ .ag3-map .lock circle { fill: #F5C451; } .ag3-map .lock rect { fill: #0B0B0C; } .ag3-map .lock .sh { fill: none; stroke: #0B0B0C; stroke-width: 1.4; } .ag3-map .lock { opacity: 0; transition: opacity .3s var(--ease); } .bs-ag3[data-step="3"] .lock, .bs-ag3[data-step="4"] .lock { opacity: 1; } /* Aufgabe */ .ag3-task { padding: 14px 16px; border-radius: 14px; background: rgba(242, 242, 240, .04); border: 1px solid #26262B; } .ag3-task-h { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; color: var(--on-dark-2); } .ag3-live { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: pulse 1.6s ease-in-out infinite; } .bs .ag3-cap { margin-top: 8px; font-size: 1rem; color: #fff; } .bs .ag3-cap .bs-dots i { background: #34343A; } .ag3-approve { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #26262B; font-size: .75rem; color: #F5C451; } .ag3-btn { flex: none; padding: 6px 12px; border-radius: 8px; background: #F2F2F0; color: var(--ink); font-size: .75rem; font-weight: 700; } .bs-ag3[data-step="4"] .ag3-btn { animation: bs-press 2.6s var(--ease) forwards; } .bs-ag3.is-s5 .ag3-btn { background: #6EE7A0; } .bs-ag3.is-s5 .ag3-approve { color: #6EE7A0; } /* ---------- 05 Apps: edler Auftritt mit Tiefe ---------- */ .bs-ap3 { position: relative; isolation: isolate; } .bs-ap3::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 6%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 91, 31, .22), rgba(255, 91, 31, 0)); pointer-events: none; } .ap3-screens { perspective: 1400px; min-height: 270px; } .ap3-browser { background: #F7F7F4; border-radius: 14px; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 60px -20px rgba(255, 91, 31, .35); transform: rotateY(9deg) rotateX(3deg); transform-origin: left center; animation: ap3-float 7s ease-in-out infinite; } .ap3-bar { height: 28px; background: linear-gradient(#EDEDE8, #E4E4DE); } .ap3-bar i:nth-child(1) { background: #FF6159; } .ap3-bar i:nth-child(2) { background: #FFBD2E; } .ap3-bar i:nth-child(3) { background: #28C941; } .ap3-kpis div { border-color: #ECECE6; box-shadow: 0 1px 2px rgba(11, 11, 12, .04); } .ap3-chart { padding: 8px 10px 4px; border-radius: 8px; background: #fff; border: 1px solid #ECECE6; } .ap3-chart-h { display: flex; justify-content: space-between; font-size: .5625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .ap3-chart-h b { color: #1E7A3E; letter-spacing: 0; } .ap3-chart svg { display: block; width: 100%; height: 42px; margin-top: 2px; overflow: visible; } .ap3-chart .area { fill: url(#ap3-g); } .ap3-chart .line { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1); } .bs.is-inview .ap3-chart .line { stroke-dashoffset: 0; } .ap3-chart .dot { fill: var(--brand); stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity .4s var(--ease) 1.4s; } .bs.is-inview .ap3-chart .dot { opacity: 1; } .bs-ap3[data-step="2"] .ap3-chart .dot { animation: ap3-ping 1s var(--ease); } @keyframes ap3-ping { 40% { r: 6; } } .ap3-phone { top: 4px; bottom: -14px; width: 28%; max-width: 176px; padding: 0; border-radius: 28px; border: 5px solid #1C1C21; background: #F7F7F4; box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(0, 0, 0, .06); transform: rotateY(-10deg) translateZ(40px); transform-origin: right center; animation: ap3-float 7s ease-in-out -3.5s infinite; } .ap3-notch { top: 8px; width: 42px; height: 12px; margin-left: -21px; border-radius: 8px; background: #0B0B0C; z-index: 3; } .ap3-status { position: absolute; left: 14px; right: 14px; top: 8px; display: flex; justify-content: space-between; align-items: center; font-size: .5625rem; color: var(--ink); z-index: 2; } .ap3-status i { width: 16px; height: 7px; border-radius: 2px; border: 1px solid var(--ink); position: relative; } .ap3-status i::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; background: var(--ink); border-radius: 1px; } .ap3-app-h { margin: 0; padding: 30px 12px 12px; background: linear-gradient(160deg, #FF7A45, #FF5B1F 60%, #D9480F); color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: -0.01em; } .ap3-app-h small { display: block; font-size: .5625rem; font-weight: 500; opacity: .85; } .ap3-phone .ap3-item { margin: 8px 8px 0; box-shadow: 0 4px 10px -6px rgba(11, 11, 12, .25); } .ap3-push { top: 26px; z-index: 4; } @keyframes ap3-float { 50% { translate: 0 -6px; } } .ap3-systems span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: linear-gradient(180deg, #1C1C21, #141418); border-color: #2C2C32; } .ap3-systems .icon { width: 15px; height: 15px; color: var(--brand-hi); } @media (max-width: 640px) { .ap3-browser { transform: none; } .ap3-phone { transform: none; top: 70px; } } @media (prefers-reduced-motion: reduce) { .ap3-browser, .ap3-phone { animation: none; } } /* ---------- Bausteinname als Hauptüberschrift ---------- */ .bs .bs-kicker { flex-wrap: wrap; gap: 10px 12px; margin-bottom: 10px; } .bs .bs-kicker .bento-icon { width: 44px; height: 44px; border-radius: 12px; } .bs .bs-kicker .bento-icon .icon { width: 22px; height: 22px; } .bs .bs-kicker h3 { order: 3; flex-basis: 100%; font-size: clamp(2.25rem, 3.4vw, 3.25rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--ink); } .bs .bento-dark .bs-kicker h3 { color: #fff; } .bs .bs-num { font-size: .8125rem; } .bs .bento-claim { margin: 0 0 6px; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--accent); max-width: none; } .bs .bento-dark .bento-claim { color: var(--brand-hi); } .bs .bento-copy > p:last-child { font-size: .9688rem; color: var(--muted); } .bs .bento-dark .bento-copy > p:last-child { color: var(--on-dark-2); } .bs .bento-card { min-height: 600px; } .ap3-kpis { grid-template-columns: repeat(2, 1fr); } .wf3-rules span { font-size: .75rem !important; } /* ---------- 06 Menschen: KI arbeitet zu, Mensch entscheidet ---------- */ .bs-hu3 { display: flex; flex-direction: column; gap: 14px; } .hu3-who { display: flex; align-items: center; gap: 10px; } .hu3-p { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .75rem; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 14px -10px rgba(11, 11, 12, .3); } .hu3-link { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), #1E7A3E); background-size: 200% 100%; animation: hu3-link 2.4s linear infinite; opacity: .5; } @keyframes hu3-link { to { background-position: -200% 0; } } .hu3-orb { flex: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFD2BD, #FF7A45 45%, #D9480F); box-shadow: 0 0 12px rgba(255, 91, 31, .5); } .hu3-av { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #2A2A30, #0B0B0C); color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; } .bs-hu3[data-step="0"] .hu3-ai, .bs-hu3[data-step="2"] .hu3-ai { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255, 91, 31, .12); } .bs-hu3[data-step="1"] .hu3-me, .bs-hu3[data-step="3"] .hu3-me { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11, 11, 12, .08); } .hu3-thread { display: grid; gap: 8px; } .hu3-msg { display: flex; align-items: flex-end; gap: 8px; } .hu3-msg > div { padding: 9px 12px; border-radius: 14px; font-size: .8125rem; line-height: 1.3; } .hu3-msg small { display: block; font-size: .6875rem; font-weight: 600; opacity: .7; } .hu3-msg b { font-weight: 600; } .hu3-msg.ai > div { background: #fff; border: 1px solid rgba(255, 91, 31, .35); border-bottom-left-radius: 4px; box-shadow: 0 8px 18px -14px rgba(255, 91, 31, .6); } .hu3-msg.me { justify-content: flex-end; } .hu3-msg.me > div { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; } .hu3-msg .hu3-orb, .hu3-msg .hu3-av { width: 22px; height: 22px; font-size: .625rem; } .hu3-stamp { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #1E7A3E; color: #fff; font-size: .8125rem; font-weight: 700; box-shadow: 0 12px 26px -12px rgba(30, 122, 62, .8); } .hu3-stamp .icon { width: 16px; height: 16px; stroke-width: 2.6; } .bs-hu3 .hu3-stamp[data-at] { transform: scale(.7) rotate(-4deg); } .bs-hu3 .hu3-stamp[data-at].on { transform: rotate(-3deg); transition: opacity .4s var(--ease), transform .6s cubic-bezier(.34, 1.56, .64, 1); } .bs-hu3 .bs-cap { margin-top: auto; } /* ---------- 06 Menschen: Team-Chat mit Entscheidungskarte ---------- */ .bs-sl { display: flex; flex-direction: column; gap: 12px; } .sl-app { display: grid; grid-template-columns: 44px minmax(0, 1fr); border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(11, 11, 12, .45); font-size: .8125rem; } .sl-side { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; background: #1A1D21; } .sl-ws { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: var(--ink); font-weight: 800; font-size: .75rem; margin-bottom: 6px; } .sl-ch { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #8B8D91; font-weight: 700; } .sl-ch.is-on { background: rgba(255, 255, 255, .12); color: #fff; } .sl-main { position: relative; display: flex; flex-direction: column; min-width: 0; } .sl-top { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #EDEDE9; } .sl-top b { font-size: .875rem; } .sl-top span { font-size: .6875rem; color: var(--muted); } .sl-feed { display: grid; gap: 12px; padding: 12px 14px; min-height: 250px; align-content: start; } .sl-msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; } .sl-avatar { width: 30px; height: 30px; border-radius: 8px; } .sl-bot { background: radial-gradient(circle at 35% 30%, #FFD2BD, #FF7A45 45%, #D9480F); } .sl-name { font-weight: 700; display: flex; align-items: baseline; gap: 6px; } .sl-name em { font-style: normal; padding: 0 4px; border-radius: 3px; background: #EDEDE8; font-size: .5625rem; font-weight: 700; color: var(--muted); } .sl-name small { font-weight: 400; font-size: .6875rem; color: var(--muted); } .sl-text { margin-top: 2px; line-height: 1.4; color: var(--ink-2); } /* Entscheidungskarte */ .sl-card { position: relative; margin-top: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid #E4E4DE; border-left: 4px solid var(--brand); background: #FCFCFA; } .sl-card-h { font-weight: 700; margin-bottom: 8px; } .sl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; } .sl-fields span { font-weight: 600; } .sl-fields small { display: block; font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .sl-btns { display: flex; flex-wrap: wrap; gap: 6px; transition: opacity .4s var(--ease); } .sl-btn { padding: 6px 10px; border-radius: 6px; border: 1px solid #D6D6CF; background: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; transition: all .25s var(--ease); } .sl-btn.pri { background: #1E7A3E; border-color: #1E7A3E; color: #fff; } .bs-sl[data-step="1"] .sl-btn.opt { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11, 11, 12, .08); } .bs-sl[data-step="2"] .sl-btn.opt { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(.95); } .sl-decided { display: none; align-items: center; gap: 8px; font-weight: 600; color: #1E7A3E; } .sl-decided i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1E7A3E; color: #fff; font-style: normal; font-size: .625rem; } .bs-sl.is-s3 .sl-btns { display: none; } .bs-sl.is-s3 .sl-decided { display: flex; animation: bs-cap .45s var(--ease); } .bs-sl.is-s3 .sl-card { border-left-color: #1E7A3E; } .sl-input { margin: 0 14px 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid #D6D6CF; font-size: .75rem; color: #9A9A94; } /* Anna bewegt die Maus */ .sl-cursor { position: absolute; width: 18px; height: 18px; left: 90%; top: 92%; opacity: 0; z-index: 3; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3)); transition: left 1s cubic-bezier(.65, 0, .35, 1), top 1s cubic-bezier(.65, 0, .35, 1), opacity .3s var(--ease); } .sl-cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; } .bs-sl[data-step="1"] .sl-cursor, .bs-sl[data-step="2"] .sl-cursor { opacity: 1; left: 57%; top: 51%; } @media (max-width: 640px) { .sl-app { grid-template-columns: 36px minmax(0, 1fr); } .bs-sl[data-step="1"] .sl-cursor, .bs-sl[data-step="2"] .sl-cursor { left: 62%; top: 72%; } } /* Nutzen-Zeile bleibt orange, auch wenn sie das letzte Element ist */ .bs .bento-copy > p.bento-claim { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); font-weight: 600; color: var(--accent); max-width: 30em; } .bs .bento-dark .bento-copy > p.bento-claim { color: var(--brand-hi); } /* ---------- 04 Schnittstellen: neue Lösung rastet in die bestehende IT ein ---------- */ .bs .bs-it { display: flex; flex-direction: column; gap: 14px; min-height: 360px; } .it-label { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .it-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .it-sys { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(11, 11, 12, .04); transition: border-color .5s var(--ease), box-shadow .5s var(--ease); transition-delay: calc(var(--i) * 70ms); } .it-sys b { font-size: .9375rem; } .it-sys small { font-size: .6875rem; color: var(--muted); } .it-sys::before { content: ""; justify-self: start; width: 7px; height: 7px; margin-bottom: 6px; border-radius: 50%; background: #D6D6CF; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); transition-delay: calc(var(--i) * 70ms); } .bs-it.is-s2 .it-sys { border-color: rgba(30, 122, 62, .35); } .bs-it.is-s2 .it-sys::before { background: #1E7A3E; box-shadow: 0 0 0 3px rgba(30, 122, 62, .15); } .it-slot { position: relative; display: grid; place-items: center; border-radius: 12px; border: 1.5px dashed #C4C4BC; min-height: 72px; } .it-new { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: #fff; font-size: .8125rem; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 5px rgba(255, 91, 31, .14), 0 18px 34px -14px rgba(255, 91, 31, .7); opacity: 0; transform: translateY(-70px) scale(.9); transition: opacity .4s var(--ease), transform .9s cubic-bezier(.34, 1.4, .64, 1); } .it-new i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(255, 91, 31, .3); } .bs-it.is-s1 .it-new { opacity: 1; transform: none; } .bs-it.is-s1 .it-slot { border-color: transparent; } .bs-it.is-s2 .it-new { animation: it-pulse 1.8s ease-in-out infinite; } @keyframes it-pulse { 50% { box-shadow: 0 0 0 10px rgba(255, 91, 31, .06), 0 18px 34px -14px rgba(255, 91, 31, .7); } } .it-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: .875rem; font-weight: 600; opacity: 0; transition: opacity .5s var(--ease) .4s; } .bs-it.is-s2 .it-foot { opacity: 1; } .it-ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1E7A3E; color: #fff; font-size: .6875rem; } /* ---------- 05 Apps: Menschen an der Oberfläche ---------- */ .ap3-people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .ap3-people span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(242, 242, 240, .05); border: 1px solid #2A2A30; font-size: .8125rem; font-weight: 600; color: var(--on-dark); } .ap3-people i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: .6875rem; font-weight: 700; color: #fff; } .ap3-people .u1 { background: linear-gradient(135deg, #6B7AE8, #3D4BB8); } .ap3-people .u2 { background: linear-gradient(135deg, #FF7A45, #D9480F); } /* ---------- 06 Menschen: Human in the Loop ---------- */ .hl-loop { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; } .hl-loop li { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .6875rem; font-weight: 700; white-space: nowrap; transition: all .4s var(--ease); } .hl-loop li i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); } .hl-loop .m i { background: var(--ink); } .bs-sl[data-step="0"] .hl-loop .k, .bs-sl[data-step="3"] .hl-loop .k2 { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 91, 31, .14); } .bs-sl[data-step="1"] .hl-loop .m, .bs-sl[data-step="2"] .hl-loop .m { background: var(--ink); color: #fff; border-color: var(--ink); } .bs-sl[data-step="1"] .hl-loop .m i, .bs-sl[data-step="2"] .hl-loop .m i { background: #fff; } .hl-back { position: absolute; left: 0; right: 0; top: 70%; width: 100%; height: 26px; overflow: visible; } .hl-back path { fill: none; stroke: #C4C4BC; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; animation: hl-flow 1.6s linear infinite; } @keyframes hl-flow { to { stroke-dashoffset: 16; } } @media (max-width: 640px) { .hl-loop li { font-size: .5625rem; } .ap3-people { grid-template-columns: 1fr; } .it-grid { grid-template-columns: 1fr 1fr; } } /* ---------- Performance ---------- */ /* Förderband: Streifen als eigene Ebene, nur transform animiert */ .wf3-belt { overflow: hidden; } .wf3-belt > .wf3-stripes { position: absolute; left: -28px; right: 0; top: 0; bottom: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, #1B1B20 0 14px, #141418 14px 28px); will-change: transform; animation: wf3-slide 1.8s linear infinite; } @keyframes wf3-slide { to { transform: translateX(28px); } } .wf3-belt .wf3-doc { z-index: 1; } /* ---------- 03 KI-Agenten: Feinschliff ---------- */ .ag3-lines line { stroke: #2A2A30; stroke-width: 1.2; stroke-dasharray: 2 5; } .ag3-lines .l4 { stroke: rgba(248, 113, 113, .3); } .ag3-beams line { stroke-width: 2; stroke-linecap: round; opacity: 0; stroke: var(--brand); stroke-dasharray: none; animation: none; transition: opacity .45s var(--ease), stroke .4s var(--ease); } .bs-ag3[data-step="0"] .b0, .bs-ag3[data-step="1"] .b1, .bs-ag3[data-step="2"] .b2 { opacity: .55; } .bs-ag3[data-step="3"] .b3, .bs-ag3[data-step="4"] .b3 { opacity: .6; stroke: #F5C451; } .bs-ag3[data-step="5"] .b3 { opacity: .6; stroke: #6EE7A0; } /* Datenpakete: lesen (zum Agenten) und schreiben (zur E-Mail) */ .ag3-pk .pk { fill: #FFB08F; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 122, 69, .9)); transition: opacity .3s var(--ease); } .bs-ag3[data-step="0"] .pk0, .bs-ag3[data-step="1"] .pk1, .bs-ag3[data-step="2"] .pk2, .bs-ag3[data-step="3"] .pk3 { opacity: 1; } .bs-ag3[data-step="5"] .pk3 { opacity: 1; fill: #6EE7A0; filter: drop-shadow(0 0 4px rgba(110, 231, 160, .9)); } /* Agent arbeitet: Bogen dreht sich, Halo atmet */ .ag3-core .halo { fill: rgba(255, 91, 31, .10); } .ag3-core .ring { fill: none; stroke: rgba(255, 122, 69, .28); stroke-width: 1; } .ag3-core .spin { fill: none; stroke: var(--brand-hi); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 22 78; transform-origin: 200px 112px; opacity: 0; transition: opacity .4s var(--ease), stroke .4s var(--ease); animation: ag3-spin 1.3s linear infinite; } @keyframes ag3-spin { to { transform: rotate(360deg); } } .bs-ag3[data-step="0"] .spin, .bs-ag3[data-step="1"] .spin, .bs-ag3[data-step="2"] .spin, .bs-ag3[data-step="3"] .spin { opacity: 1; } .bs-ag3[data-step="4"] .ag3-core .ring { stroke: #F5C451; stroke-width: 1.5; } .bs-ag3[data-step="4"] .ag3-core .halo { fill: rgba(245, 196, 81, .10); animation: ag3-halo 1.6s ease-in-out infinite; } .bs-ag3[data-step="5"] .ag3-core .ring { stroke: #6EE7A0; } .ag3-core .orb { filter: none; } .ag3-core text { fill: #1A0A03; font-size: 10.5px; } /* Werkzeuge: deckende Flächen, damit Linien nie durch die Schrift laufen */ .ag3-map .nd rect { fill: #17171B; stroke: #2E2E34; } .bs-ag3[data-step="0"] .n0 rect, .bs-ag3[data-step="1"] .n1 rect, .bs-ag3[data-step="2"] .n2 rect { fill: #2A150C; stroke: var(--brand-hi); } .bs-ag3[data-step="3"] .n3 rect, .bs-ag3[data-step="4"] .n3 rect { fill: #2A2310; stroke: #F5C451; } .bs-ag3[data-step="5"] .n3 rect { fill: #0F2419; stroke: #6EE7A0; } .ag3-map .n4 rect { fill: #121214; } .ag3-map .nx { font-size: 9px !important; } /* Häkchen und Schloss sauber an der Ecke */ .ag3-map .ck, .ag3-map .lock { opacity: 0; transform-box: fill-box; transition: opacity .3s var(--ease); } .ag3-map .ck circle { fill: #1E7A3E; stroke: #0F0F11; stroke-width: 2; } .ag3-map .ck path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ag3-map .lock circle { fill: #F5C451; stroke: #0F0F11; stroke-width: 2; } .ag3-map .lock rect { fill: #0B0B0C; } .ag3-map .lock path { fill: none; stroke: #0B0B0C; stroke-width: 1.4; } .bs-ag3.is-s1 .ck0, .bs-ag3.is-s2 .ck1, .bs-ag3.is-s3 .ck2, .bs-ag3.is-s5 .ck3 { opacity: 1; } .bs-ag3[data-step="3"] .lock, .bs-ag3[data-step="4"] .lock { opacity: 1; } /* Freigabe: Text wechselt am Ende */ .ag3-note, .ag3-btn { display: inline-grid; } .ag3-note i, .ag3-btn i { grid-area: 1 / 1; font-style: normal; transition: opacity .35s var(--ease); } .ag3-note .d, .ag3-btn .d { opacity: 0; } .bs-ag3.is-s5 .ag3-note .w, .bs-ag3.is-s5 .ag3-btn .w { opacity: 0; } .bs-ag3.is-s5 .ag3-note .d, .bs-ag3.is-s5 .ag3-btn .d { opacity: 1; } .bs-ag3.is-s5 .ag3-btn { background: #1E7A3E; color: #fff; } @media (prefers-reduced-motion: reduce) { .ag3-core .spin { animation: none; } } /* ---------- Worauf es ankommt ---------- */ .wf3-conf { position: absolute; right: 4px; top: -9px; padding: 1px 6px; border-radius: 999px; background: #1E7A3E; color: #fff; font-style: normal; font-size: .5625rem; font-weight: 800; letter-spacing: .01em; } .wf3-conf.low { background: #F5C451; color: var(--ink); right: auto; left: 4px; } /* ---------- Bausteine: Name klein, Kernaussage groß ---------- */ .bs .bs-kicker { flex-wrap: nowrap; gap: 10px; margin-bottom: 18px; } .bs .bs-kicker .bento-icon { width: 36px; height: 36px; border-radius: 10px; } .bs .bs-kicker .bento-icon .icon { width: 18px; height: 18px; } .bs .bs-kicker h3 { order: 0; flex-basis: auto; font-size: .9375rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; color: var(--ink-2); } .bs .bento-dark .bs-kicker h3 { color: var(--on-dark-2); } .bs .bs-msg { margin: 0 0 14px; font-size: clamp(1.875rem, 2.7vw, 2.625rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.04; color: var(--ink); max-width: 15em; } .bs .bs-msg span { display: inline-block; } .bs .bs-msg span + span { color: var(--accent); } .bs .bento-dark .bs-msg { color: #fff; } .bs .bento-dark .bs-msg span + span { color: var(--brand-hi); } .bs .bento-copy > p.bs-sub { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--muted); max-width: 32em; } .bs .bento-dark .bento-copy > p.bs-sub { color: var(--on-dark-2); } /* Link zur eigenen Seite des Themas, direkt im Satz */ .bs .bs-more { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; } .bs .bs-more:hover { text-decoration-thickness: 2px; } .bs .bento-dark .bs-more { color: var(--brand-hi); } /* Einblenden: Aussage Zeile für Zeile, dann der Satz darunter */ .bs .build .bs-msg span, .bs .build .bs-sub { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .7s var(--ease), transform .9s cubic-bezier(.16, 1, .3, 1), filter .7s var(--ease); } .bs .build.is-built .bs-msg span, .bs .build.is-built .bs-sub { opacity: 1; transform: none; filter: none; } .bs .build.is-built .bs-msg span:first-child { transition-delay: calc(var(--bd, 0ms) + .25s); } .bs .build.is-built .bs-msg span + span { transition-delay: calc(var(--bd, 0ms) + .45s); } .bs .build.is-built .bs-sub { transition-delay: calc(var(--bd, 0ms) + .7s); } /* Wissen: neue Regel wird ergänzt */ .kn2-rule { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; background: #E7F4EC; border: 1px solid rgba(30, 122, 62, .25); font-size: .8125rem; color: var(--ink-2); opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.34, 1.56, .64, 1); } .kn2-rule b { font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #1E7A3E; } .kn2-rule.on { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .bs .build .bs-msg span, .bs .build .bs-sub { opacity: 1; transform: none; filter: none; transition: none; } } /* ---------- Bausteine: feste Höhen – Text und Bühne liegen je Reihe auf einer Linie ---------- */ @media (min-width: 961px) { .bs .bento-card { --copy-h: 244px; --stage-h: 468px; gap: 18px; min-height: 0; height: calc(var(--pad) + var(--copy-h) + 18px + var(--stage-h)); } .bs .bento-copy { flex: 0 0 var(--copy-h); min-height: 0; } .bs .bento-card > .bs-stage { flex: 0 0 var(--stage-h); height: var(--stage-h); min-height: 0; margin-top: 0; } .bs .bs-wf3, .bs .bs-ag3, .bs .bs-it { justify-content: center; } .bs .bs-brain { min-height: 0; } } @media (min-width: 961px) and (max-width: 1240px) { .bs .bento-card { --copy-h: 272px; } } /* Menschen: Slack-Fenster läuft rechts und unten aus der Karte heraus */ .bs .bs-sl { display: flex; flex-direction: column; padding-right: 0; padding-bottom: 0; } .bs .bs-sl .hl-loop { margin-right: var(--pad); margin-bottom: 18px; } .bs .bs-sl .sl-app { flex: 1 0 auto; width: 620px; max-width: none; min-height: 440px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; } @media (max-width: 960px) { .bs .bs-sl { height: 480px; } } @media (min-width: 961px) { .bs .bs-it .it-foot { margin-top: 6px; } } /* Menschen: KI-Assistent mit eigenem Avatar (Punkt-O aus dem Logo) */ .sl-avatar.sl-bot { background: url('data:image/svg+xml,') center / cover no-repeat; box-shadow: 0 4px 10px -4px rgba(255, 91, 31, .55); } /* Schnittstellen: sichtbare Verbindungen von der neuen Lösung zu jedem System */ .bs .it-grid { gap: 22px; } .it-grid > .it-sys, .it-grid > .it-slot { position: relative; z-index: 1; } .it-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; } .it-wires line { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; } .it-wires .w { stroke: #D6D6CF; stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .7s cubic-bezier(.65, 0, .35, 1), stroke .5s var(--ease); transition-delay: calc(var(--k) * 60ms); } .it-wires .f { stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 5 95; stroke-dashoffset: 5; opacity: 0; transition: opacity .4s var(--ease); } .bs-it.is-s1 .it-wires .w { stroke-dashoffset: 0; transition-delay: calc(.6s + var(--k) * 60ms); } .bs-it.is-s2 .it-wires .w { stroke: rgba(255, 91, 31, .45); } .bs-it.is-s2 .it-wires .f { opacity: 1; animation: it-flow 1.6s linear infinite; animation-delay: calc(var(--k) * -200ms); } .bs-it.is-s2 .it-wires .f:nth-of-type(4n) { animation-direction: reverse; } @keyframes it-flow { from { stroke-dashoffset: 5; } to { stroke-dashoffset: -100; } } .bs-it.is-s2 .it-sys { box-shadow: 0 0 0 3px rgba(255, 91, 31, .07), 0 1px 2px rgba(11, 11, 12, .04); } @media (prefers-reduced-motion: reduce) { .it-wires .w { stroke-dashoffset: 0; } .it-wires .f { display: none; } } /* Apps: Auftragsliste füllt den Browser, Telefon zeigt mehr Aufträge */ .ap3-table { margin-top: 0; } @media (max-width: 640px) { .it-wires { display: none; } .bs .it-grid { gap: 10px; } } /* Bausteine: ohne Icon und Nummer – der Name steht als Überzeile */ .bs .bs-kicker { margin-bottom: 14px; } .bs .bs-kicker h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .bs .bento-dark .bs-kicker h3 { color: var(--brand-hi); } /* ---------- 04 Schnittstellen, clean: Systeme oben und unten, die neue Lösung verbindet sie ---------- */ .bs .bs-ix { display: flex; flex-direction: column; justify-content: center; } .ix { display: grid; grid-template-rows: auto 52px auto 52px auto; } .ix-row, .ix-wires { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ix-sys { display: grid; place-items: center; min-height: 54px; padding: 6px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(11, 11, 12, .04), 0 10px 20px -16px rgba(11, 11, 12, .25); font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; text-align: center; line-height: 1.2; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.16, 1, .3, 1), border-color .5s var(--ease); transition-delay: calc(var(--i) * 60ms); } .bs-ix.is-s0 .ix-sys { opacity: 1; transform: none; } .bs-ix.is-s2 .ix-sys { border-color: rgba(255, 91, 31, .4); } .ix-wires i { position: relative; justify-self: center; width: 2px; height: 100%; border-radius: 2px; background: linear-gradient(var(--brand), rgba(255, 91, 31, .35)); transform: scaleY(0); transition: transform .6s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(.35s + var(--i) * 50ms); } .ix-wires.up i { transform-origin: bottom; background: linear-gradient(rgba(255, 91, 31, .35), var(--brand)); } .ix-wires.dn i { transform-origin: top; } .bs-ix.is-s1 .ix-wires i { transform: none; } .ix-wires i::after { content: ""; position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(255, 91, 31, .18), 0 0 12px rgba(255, 91, 31, .8); opacity: 0; } .bs-ix.is-s2 .ix-wires i::after { animation: ix-flow 1.6s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--i) * -0.37s); } .bs-ix.is-s2 .ix-wires i:nth-child(even)::after { animation-direction: reverse; } @keyframes ix-flow { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .ix-hub { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 0 0 5px rgba(255, 91, 31, .12), 0 24px 40px -22px rgba(255, 91, 31, .7); opacity: 0; transform: scale(.94); transition: opacity .45s var(--ease), transform .7s cubic-bezier(.34, 1.4, .64, 1); } .ix-hub i { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(255, 91, 31, .3); } .bs-ix.is-s1 .ix-hub { opacity: 1; transform: none; } .bs-ix.is-s2 .ix-hub { animation: ix-glow 2.4s ease-in-out infinite; } @keyframes ix-glow { 50% { box-shadow: 0 0 0 10px rgba(255, 91, 31, .06), 0 24px 40px -22px rgba(255, 91, 31, .7); } } @media (max-width: 640px) { .ix-row, .ix-wires { gap: 8px; } .ix-sys { font-size: .75rem; padding: 6px 4px; min-height: 48px; } .ix { grid-template-rows: auto 40px auto 40px auto; } } @media (prefers-reduced-motion: reduce) { .ix-sys, .ix-hub { opacity: 1; transform: none; } .ix-wires i { transform: none; } .ix-wires i::after { display: none; } } /* Wissen: Antwort in eigener Spalte rechts, damit das Gehirn frei steht */ @media (min-width: 961px) { .bs-brain .kn2-ans { width: min(35%, 250px); } } /* ---------- 05 Apps: Wand aus echten Oberflächen in Perspektive ---------- */ .bs .bento-card > .bs-wall { position: relative; padding: 0; overflow: hidden; } .bs-wall::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, #0F0F11 0%, rgba(15, 15, 17, 0) 16%, rgba(15, 15, 17, 0) 78%, #0F0F11 100%), linear-gradient(90deg, rgba(15, 15, 17, .9) 0%, rgba(15, 15, 17, 0) 14%, rgba(15, 15, 17, 0) 86%, rgba(15, 15, 17, .9) 100%); } .bs-wall::before { content: ""; position: absolute; left: 20%; right: 20%; top: 20%; bottom: 10%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 91, 31, .22), transparent); } .wl { position: absolute; inset: 0; z-index: 1; perspective: 1500px; perspective-origin: 50% 20%; } .wl-plane { position: absolute; left: 50%; top: 52%; display: grid; grid-template-columns: repeat(6, 180px); gap: 16px; transform: translate(-50%, -50%) rotateX(48deg) rotateZ(-30deg); } .wl-col { height: 1000px; overflow: hidden; } .wl-track { display: flex; flex-direction: column; animation: wl-run 70s linear infinite; } .wl-col:nth-child(even) .wl-track { animation-direction: reverse; animation-duration: 84s; } .wl-col.c3 .wl-track { animation-duration: 62s; } .wl-col.c6 .wl-track { animation-duration: 92s; } @keyframes wl-run { to { transform: translateY(-50%); } } .sc { position: relative; flex: none; margin: 0 0 16px; border-radius: 10px; overflow: hidden; background: #F7F7F5; color: #141416; font-size: 7px; line-height: 1.35; font-weight: 500; letter-spacing: 0; box-shadow: 0 26px 40px -18px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08); } .sc b { font-weight: 700; } .sc p { margin: 0; } .sc-bar { display: flex; align-items: center; gap: 3px; height: 14px; padding: 0 6px; background: #E9E9E4; } .sc-bar i { width: 5px; height: 5px; border-radius: 50%; background: #FF6159; } .sc-bar i:nth-child(2) { background: #FFBD2E; } .sc-bar i:nth-child(3) { background: #28C941; } .sc-bar span { flex: 1; max-width: 72%; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #fff; color: #8A8A85; font-size: 5.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-app { display: flex; min-height: 112px; } .sc-side { flex: none; width: 40px; padding: 6px 4px; background: #fff; border-right: 1px solid #ECECE6; } .sc-logo { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; font-size: 6px; } .sc-logo i { width: 6px; height: 6px; border-radius: 2px; background: #FF5B1F; } .sc-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; } .sc-side li { display: flex; align-items: center; gap: 2px; padding: 2px 3px; border-radius: 3px; font-size: 5.2px; color: #7A7A75; white-space: nowrap; } .sc-side li i { width: 4px; height: 4px; border-radius: 1px; background: currentColor; opacity: .6; } .sc-side li.on { background: #FFE9DF; color: #C4410C; font-weight: 700; } .sc-main { flex: 1; min-width: 0; display: grid; gap: 5px; align-content: start; padding: 6px 7px; } .sc-h { display: flex; justify-content: space-between; align-items: center; gap: 4px; } .sc-h b { font-size: 7.5px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-btn { flex: none; padding: 1.5px 5px; border-radius: 4px; background: #FF5B1F; color: #fff; font-size: 5.5px; font-weight: 700; } .sc-btn.ghost { background: #fff; color: #333; border: 1px solid #E3E3DD; } .sc-search { width: 42%; padding: 1.5px 6px; border: 1px solid #E3E3DD; border-radius: 4px; background: #fff; color: #9A9A95; font-size: 5.5px; } .kp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .kp.two { grid-template-columns: 1fr 1fr; } .kp div { display: grid; padding: 4px 5px; border-radius: 5px; background: #fff; border: 1px solid #ECECE6; } .kp small { font-size: 4.8px; color: #8A8A85; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .kp b { font-size: 8.5px; letter-spacing: -0.02em; } .kp em { font-style: normal; font-size: 5px; color: #8A8A85; } .kp em.up { color: #1E7A3E; font-weight: 700; } .ch { padding: 3px; border-radius: 5px; background: #fff; border: 1px solid #ECECE6; } .ch svg { display: block; width: 100%; height: 26px; } .ch .a { fill: rgba(255, 91, 31, .14); } .ch .l { fill: none; stroke: #FF5B1F; stroke-width: 1.5; vector-effect: non-scaling-stroke; } .tb { border-radius: 5px; background: #fff; border: 1px solid #ECECE6; } .tb p { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px; align-items: center; padding: 3px 5px; border-top: 1px solid #F0F0EC; font-size: 5.8px; white-space: nowrap; } .tb p:first-child { border-top: 0; } .tb p span { overflow: hidden; text-overflow: ellipsis; } .tb p span:first-child { font-family: ui-monospace, Consolas, monospace; color: #9A9A95; font-size: 5.2px; } .tb.big p { grid-template-columns: 20px minmax(0, 1fr) 20px auto; } .av { display: inline-grid; place-items: center; width: 9px; height: 9px; margin-right: 3px; border-radius: 50%; background: var(--c); color: #fff; font-size: 5px; font-style: normal; font-weight: 700; vertical-align: middle; flex: none; } .pl { padding: 1px 4px; border-radius: 999px; font-style: normal; font-size: 5px; font-weight: 700; white-space: nowrap; } .pl.am { background: #FBEFD9; color: #A15C07; } .pl.gr { background: #EDEDE8; color: #77776F; } .pl.gn { background: #DDF3E4; color: #1E7A3E; } .pl.bl { background: #E3E9FF; color: #3552D8; } .pl.rd { background: #FDE3E3; color: #C62828; } .tabs { display: flex; gap: 7px; padding-bottom: 3px; border-bottom: 1px solid #ECECE6; font-size: 5.5px; color: #8A8A85; } .tabs .on { color: #141416; font-weight: 700; box-shadow: 0 4px 0 -2.5px #FF5B1F; } .gt { padding: 3px 4px; border-radius: 5px; background: #fff; border: 1px solid #ECECE6; } .gt-h { display: grid; grid-template-columns: 30px repeat(5, 1fr); font-size: 5px; color: #9A9A95; padding-bottom: 2px; } .gt-r { display: grid; grid-template-columns: 30px 1fr; align-items: center; padding: 3px 0; border-top: 1px solid #F0F0EC; } .gt-r > span { display: flex; align-items: center; font-size: 5.5px; } .gt-r > div { position: relative; height: 9px; } .gt-r b { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 20%); width: calc(var(--w) * 20% - 2px); padding: 0 3px; border-radius: 3px; background: var(--c); color: #fff; font-size: 4.6px; line-height: 9px; white-space: nowrap; overflow: hidden; } .bars { display: flex; align-items: flex-end; gap: 2px; height: 36px; padding: 4px; border-radius: 5px; background: #fff; border: 1px solid #ECECE6; } .bars i { flex: 1; height: var(--h); border-radius: 1.5px 1.5px 0 0; background: linear-gradient(#FF8A5C, #FF5B1F); } .bars i:nth-child(-n+8) { background: #F2C7B4; } .tk { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 5px; } .tk-l { display: grid; gap: 4px; align-content: start; } .msg { display: flex; align-items: flex-start; gap: 3px; } .msg span { padding: 3px 4px; border-radius: 5px; background: #fff; border: 1px solid #ECECE6; font-size: 5.6px; } .msg span b { display: block; font-size: 5.6px; } .msg.ai span { background: #FFF3EC; border-color: #FFD9C7; } .reply { display: flex; justify-content: space-between; align-items: center; padding: 2px 3px 2px 5px; border-radius: 5px; background: #fff; border: 1px solid #E3E3DD; color: #9A9A95; font-size: 5.5px; } .tk-r { display: grid; gap: 1px; align-content: start; justify-items: start; padding: 4px; border-radius: 5px; background: #fff; border: 1px solid #ECECE6; font-size: 5.6px; } .tk-r small { margin-top: 2px; font-size: 4.5px; color: #9A9A95; text-transform: uppercase; letter-spacing: .04em; } .fm { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .fm label { display: grid; gap: 1px; font-size: 4.8px; color: #8A8A85; text-transform: uppercase; letter-spacing: .04em; } .fm label span { padding: 2.5px 4px; border-radius: 4px; background: #fff; border: 1px solid #E3E3DD; color: #141416; font-size: 6px; text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fm .w { grid-column: 1 / -1; } .hint { display: flex; align-items: center; gap: 3px; padding: 2.5px 5px; border-radius: 4px; background: #E3F2E8; color: #1E7A3E; font-size: 5.5px; font-weight: 600; } .hint i { width: 5px; height: 5px; border-radius: 50%; background: #1E7A3E; } .sc-dark { background: #141418; } .sc-dark .sc-bar { background: #1F1F24; } .sc-dark .sc-bar span { background: #2A2A30; color: #8D8D87; } .sc-main.dark { color: #EDEDEA; } .sc-main.dark .ch { background: #1C1C21; border-color: #2A2A30; } .gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .gauges div { display: grid; justify-items: center; gap: 1px; padding: 4px; border-radius: 6px; background: #1C1C21; } .gauges svg { width: 24px; height: 24px; transform: rotate(-90deg); } .gauges circle { fill: none; stroke: #2C2C33; stroke-width: 3.5; } .gauges circle.v { stroke: #FF5B1F; stroke-dasharray: calc(var(--p) * .942) 100; stroke-linecap: round; } .gauges b { font-size: 7px; color: #fff; } .gauges small { font-size: 4.6px; color: #8D8D87; text-transform: uppercase; } .sc-phone { aspect-ratio: 9 / 19.5; border-radius: 22px; border: 4px solid #1B1B20; } .sc-island { position: absolute; top: 5px; left: 50%; z-index: 4; width: 32px; height: 9px; margin-left: -16px; border-radius: 6px; background: #0B0B0C; } .sc-status { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 3px; font-size: 5.5px; } .sc-status i { width: 11px; height: 5px; border-radius: 1.5px; border: 1px solid currentColor; opacity: .8; } .sc-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .sc-img.sc-web { border-radius: 8px; } .sc-img.sc-web img { height: auto; } .sc-phone.orange { background: linear-gradient(180deg, #FF6A2B 0, #FF5B1F 64px, #F7F7F5 64px); } .sc-phone.orange .sc-status { color: #fff; } .ph-head { padding: 6px 9px 10px; color: #fff; } .ph-head small { display: block; font-size: 5.5px; opacity: .85; } .ph-head b { font-size: 11px; letter-spacing: -0.02em; } .ph-list { display: grid; gap: 4px; padding: 7px 6px; } .ph-list p { display: flex; justify-content: space-between; align-items: center; padding: 5px 6px; border-radius: 7px; background: #fff; border: 1px solid #ECECE6; box-shadow: 0 2px 5px -3px rgba(0, 0, 0, .15); } .ph-list span b { display: block; font-size: 7px; } .ph-list small { font-size: 5.5px; color: #8A8A85; } .ph-tab { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 6px 0 10px; background: #fff; border-top: 1px solid #ECECE6; } .ph-tab i { width: 10px; height: 10px; border-radius: 3px; background: #D6D6CF; } .ph-tab i.on { background: #FF5B1F; } .ph-bar { display: flex; align-items: center; gap: 4px; padding: 5px 8px 6px; background: #fff; border-bottom: 1px solid #ECECE6; font-size: 7px; } .ph-chat { display: grid; gap: 4px; padding: 7px 6px; } .ph-chat p { max-width: 82%; padding: 4px 6px; border-radius: 8px; font-size: 6px; } .ph-chat .me { justify-self: end; background: #FF5B1F; color: #fff; border-bottom-right-radius: 2px; } .ph-chat .bot { background: #fff; border: 1px solid #ECECE6; border-bottom-left-radius: 2px; } .qr { display: flex; flex-wrap: wrap; gap: 3px; } .qr span { padding: 2px 5px; border-radius: 999px; background: #fff; border: 1px solid #FFB896; color: #C4410C; font-size: 5.5px; font-weight: 600; } .ph-input { position: absolute; left: 6px; right: 6px; bottom: 9px; padding: 4px 7px; border-radius: 999px; background: #fff; border: 1px solid #E3E3DD; color: #9A9A95; font-size: 6px; } .ph-card { display: grid; gap: 3px; margin: 6px; padding: 6px; border-radius: 7px; background: #fff; border: 1px solid #ECECE6; border-left: 2px solid #FF5B1F; } .ph-card small { font-size: 5px; font-weight: 700; color: #C4410C; text-transform: uppercase; letter-spacing: .04em; } .ph-card > b { font-size: 7px; } .ph-kv { display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; font-size: 5.5px; color: #8A8A85; } .ph-kv b { font-size: 6px; color: #141416; text-align: right; } .ph-ok, .ph-no { display: block; padding: 4px; border-radius: 5px; text-align: center; font-size: 6px; font-weight: 700; } .ph-ok { background: #1E7A3E; color: #fff; } .ph-no { border: 1px solid #E3E3DD; } .ph-card.dim { opacity: .6; border-left-color: #1E7A3E; } .ph-card.dim small { color: #1E7A3E; } .ph-map { position: absolute; inset: 0; background: #E8EEE4; } .ph-map svg { width: 100%; height: 100%; } .ph-map path { fill: none; stroke: #fff; stroke-width: 4; vector-effect: non-scaling-stroke; } .ph-map i { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -9px 0 0 -4.5px; border-radius: 50% 50% 50% 0; background: #5B7CFA; transform: rotate(-45deg); } .ph-map i.on { background: #FF5B1F; box-shadow: 0 0 0 4px rgba(255, 91, 31, .25); } .ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 8px 9px 12px; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 -6px 14px -8px rgba(0, 0, 0, .3); } .ph-sheet b { font-size: 8px; } .ph-sheet small { font-size: 5.5px; color: #8A8A85; } .ph-sheet .ph-ok { margin-top: 4px; } @media (max-width: 960px) { .bs .bento-card > .bs-wall { height: 440px; } } @media (max-width: 640px) { .wl-plane { transform: translate(-50%, -50%) rotateX(48deg) rotateZ(-30deg) scale(.85); } } @media (prefers-reduced-motion: reduce) { .wl-track { animation: none; } } /* Wand: mehr, kleinere Screens */ .wl-plane { grid-template-columns: repeat(8, 180px); transform: translate(-50%, -50%) rotateX(48deg) rotateZ(-30deg) scale(.74); } .wl-col.c7 .wl-track { animation-duration: 76s; } .wl-col.c8 .wl-track { animation-duration: 88s; } @media (max-width: 640px) { .wl-plane { transform: translate(-50%, -50%) rotateX(48deg) rotateZ(-30deg) scale(.6); } } /* ---------- Wand v2: volle, realistische App-Screens ---------- */ .sc-phone { display: flex; flex-direction: column; } .ph-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .ph-tabs { flex: none; display: flex; justify-content: space-around; padding: 5px 0 9px; background: rgba(255, 255, 255, .96); border-top: 1px solid #ECECE6; } .ph-tabs span { display: grid; justify-items: center; gap: 2px; font-size: 4.6px; color: #9A9A95; } .ph-tabs i { width: 9px; height: 9px; border-radius: 3px; background: #D6D6CF; } .ph-tabs .on { color: #FF5B1F; font-weight: 700; } .ph-tabs .on i { background: #FF5B1F; } .ph-bar small { margin-left: auto; font-size: 5px; color: #9A9A95; font-weight: 500; } .ph-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 6px 0; } .ph-sum div { display: grid; padding: 5px; border-radius: 7px; background: #fff; border: 1px solid #ECECE6; text-align: center; } .ph-sum b { font-size: 8.5px; letter-spacing: -0.02em; } .ph-sum small { font-size: 4.8px; color: #8A8A85; text-transform: uppercase; letter-spacing: .04em; } .orange .ph-sum div { box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .3); } .ph-sec { margin: 7px 8px 0 !important; font-size: 5px; font-weight: 700; color: #8A8A85; text-transform: uppercase; letter-spacing: .06em; } .ph-photo { position: relative; height: 92px; margin-top: -21px; } .ph-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ph-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 35%, transparent 55%, rgba(0, 0, 0, .7)); } .ph-photo span { position: absolute; left: 8px; bottom: 7px; z-index: 1; display: grid; color: #fff; } .ph-photo small { font-size: 5px; opacity: .8; text-transform: uppercase; letter-spacing: .06em; } .ph-photo b { font-size: 10px; letter-spacing: -0.02em; } .ph-photo ~ * { position: relative; } .sc-phone:has(.ph-photo) .sc-status { color: #fff; } .ph-chips { display: flex; gap: 3px; margin: 6px 6px 0; } .ph-att { justify-self: end; width: 62%; height: 46px; border-radius: 8px; overflow: hidden; border: 2px solid #FF5B1F; } .ph-att img { width: 100%; height: 100%; object-fit: cover; display: block; } .ph-body .ph-input { position: static; display: flex; justify-content: space-between; align-items: center; margin: auto 6px 9px; } .ph-input i { width: 11px; height: 11px; border-radius: 50%; background: #FF5B1F; } .ph-feed { display: grid; gap: 5px; padding: 6px; } .fm-msg { display: flex; gap: 4px; font-size: 5.8px; } .fm-msg span b { display: block; font-size: 6px; } .ph-feed .ph-card { margin: 0; } .ph-prog { display: grid; gap: 2px; margin: 6px 8px 0; } .ph-prog i { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #1E7A3E var(--p), #E3E3DD var(--p)); } .ph-prog small { font-size: 5px; color: #8A8A85; } .ph-checks { display: grid; gap: 3px; margin: 6px; } .ph-checks p { display: flex; align-items: center; gap: 5px; padding: 5px 6px; border-radius: 6px; background: #fff; border: 1px solid #ECECE6; font-size: 6px; } .ph-checks i { width: 8px; height: 8px; border-radius: 2.5px; border: 1.2px solid #C4C4BC; flex: none; } .ph-checks .ok { color: #8A8A85; } .ph-checks .ok i { border-color: #1E7A3E; background: #1E7A3E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 100%; } .ph-thumbs { display: flex; gap: 4px; margin: 0 6px; } .ph-thumbs span { width: 30px; height: 30px; border-radius: 6px; background-size: cover; background-position: center; } .ph-thumbs .add { display: grid; place-items: center; border: 1.2px dashed #C4C4BC; color: #9A9A95; font-size: 9px; } .ph-sign { margin: 6px; padding: 4px 6px; border-radius: 6px; background: #fff; border: 1px solid #ECECE6; } .ph-sign small { font-size: 4.8px; color: #9A9A95; } .ph-sign svg { display: block; width: 100%; height: 18px; } .ph-sign path { fill: none; stroke: #1C3FAA; stroke-width: 1.4; stroke-linecap: round; } .ph-ok.big { margin: auto 6px 10px; padding: 6px; } .ph-search { margin: 6px 6px 0; padding: 5px 8px; border-radius: 999px; background: #fff; border: 1px solid #E3E3DD; font-size: 6px; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .2); } .ph-answer { display: grid; gap: 2px; margin: 6px; padding: 7px; border-radius: 9px; background: #0E0E10; color: #fff; } .ph-answer small { font-size: 4.8px; font-weight: 700; color: #FF8A5C; text-transform: uppercase; letter-spacing: .06em; } .ph-answer p { font-size: 6.2px; } .ph-answer sup { color: #FF8A5C; font-size: 4.6px; } .ph-srcs { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; } .ph-srcs span { display: inline-flex; align-items: center; gap: 2px; padding: 1.5px 5px 1.5px 2px; border-radius: 999px; background: #2A2A30; font-size: 5px; } .ph-srcs b { display: grid; place-items: center; width: 7px; height: 7px; border-radius: 50%; background: #FF5B1F; font-size: 4.4px; } .ph-docs { display: grid; gap: 3px; margin: 5px 6px; } .ph-docs p { display: flex; align-items: center; gap: 5px; padding: 5px 6px; border-radius: 7px; background: #fff; border: 1px solid #ECECE6; } .ph-docs i { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; font-style: normal; font-size: 3.8px; font-weight: 800; color: #fff; background: #E8455A; } .ph-docs i.tk { background: #5B7CFA; } .ph-docs i.rl { background: #1E9E6A; } .ph-docs span { display: grid; } .ph-docs b { font-size: 6px; } .ph-docs small { font-size: 5px; color: #8A8A85; } .ph-map .park { fill: #CFE3C5; stroke: none; } .ph-map .route { stroke: #FF5B1F; stroke-width: 3; stroke-dasharray: 0; } .kb-hero { position: relative; height: 44px; border-radius: 6px; overflow: hidden; } .kb-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .kb-hero span { position: absolute; left: 5px; bottom: 4px; padding: 1px 5px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 5px; font-weight: 700; } .kb-t { font-size: 8px; letter-spacing: -0.02em; } .kb-ai { display: flex; gap: 4px; padding: 4px 5px; border-radius: 5px; background: #FFF3EC; border: 1px solid #FFD9C7; font-size: 5.5px; } .kb-ai i { flex: none; width: 7px; height: 7px; margin-top: 1px; border-radius: 50%; background: #FF5B1F; box-shadow: 0 0 0 2px rgba(255, 91, 31, .2); } .kb-ai b { display: block; } .kb-src { display: flex; gap: 3px; flex-wrap: wrap; } .kb-src span { padding: 1px 5px; border-radius: 999px; background: #EDEDE8; font-size: 5px; color: #555; } .shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .shop div { display: grid; gap: 1px; padding: 4px; border-radius: 6px; background: #fff; border: 1px solid #ECECE6; } .shop-img { display: block; height: 36px; border-radius: 4px; background-size: 300%; margin-bottom: 2px; } .shop b { font-size: 5.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shop small { font-size: 6px; font-weight: 700; color: #141416; } .shop em { margin-top: 2px; padding: 1.5px 0; border-radius: 3px; background: #FF5B1F; color: #fff; font-style: normal; font-size: 4.8px; font-weight: 700; text-align: center; } .sc-web .sc-main.full { padding: 7px 8px; } /* Handy-Inhalte in echter Größe: füllen den Bildschirm wie eine echte App */ .sc-phone:not(.sc-img) > .ph-body { zoom: 1.34; } .sc-phone:not(.sc-img) > .ph-tabs, .sc-phone:not(.sc-img) > .sc-status { zoom: 1.2; } .ph-chat, .ph-feed { flex: 1; min-height: 0; overflow: hidden; align-content: start; } .ph-checks p { padding: 6px; } /* Schnittstellen: MCP und CLI als neue Anschlüsse für KI-Agenten */ .ix-hub { justify-content: space-between; padding: 0 10px; } .ix-core { display: inline-flex; align-items: center; gap: 10px; } .ix-port { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 138, 92, .45); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .8125rem; font-weight: 700; color: #fff; } .ix-port small { padding: 1px 5px; border-radius: 999px; background: var(--brand); font-family: var(--font, inherit); font-size: .5625rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .bs-ix.is-s2 .ix-port { animation: ix-port 2.4s ease-in-out infinite; } .bs-ix.is-s2 .ix-port + .ix-core + .ix-port { animation-delay: 1.2s; } @keyframes ix-port { 50% { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255, 91, 31, .18); } } @media (max-width: 640px) { .ix-hub { padding: 0 6px; font-size: .8125rem; } .ix-port { padding: 4px 6px; font-size: .6875rem; } .ix-port small { display: none; } } /* Bühnen ohne Punktraster */ .bs .bento-card > .bs-stage:not(.bs-dark):not(.bs-brain) { background: #F7F7F4; } .bs .bento-card .bs-dark { background: var(--grain) 0 0 / 128px 128px, #0F0F11; } /* Wand füllt die ganze Bühne: längere Spalten, Ebene etwas höher */ .wl-plane { top: 47%; } .wl-col { height: 1500px; } .wl-track { animation-duration: 140s; } .wl-col:nth-child(even) .wl-track { animation-duration: 168s; } .wl-col.c3 .wl-track { animation-duration: 124s; } .wl-col.c6 .wl-track { animation-duration: 184s; } .wl-col.c7 .wl-track { animation-duration: 152s; } .wl-col.c8 .wl-track { animation-duration: 176s; } /* ========================================================================== Wand v3: clean – einheitliche helle Screens in echten iOS-Proportionen ========================================================================== */ .wl-plane { gap: 22px; } .wl-col .sc { margin-bottom: 22px; } .sc { --x-ink: #111113; --x-mut: #8E8E93; --x-sep: #EFEFF4; --x-bg: #F2F2F7; --x-o: #0A84FF; --x-g: #34C759; } .sc::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; background: linear-gradient(125deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 30%); } /* Symbole (als Maske, einmal definiert) */ .ic { display: inline-block; width: 9px; height: 9px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } .ic.home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-8 9 8v10h-6v-6H9v6H3z'/%3E%3C/svg%3E"); } .ic.list { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v3H4zm0 5.5h16v3H4zM4 16h16v3H4z'/%3E%3C/svg%3E"); } .ic.find { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 015.6 11.2l5.1 5.1-1.4 1.4-5.1-5.1A7 7 0 1110 3zm0 2.4a4.6 4.6 0 100 9.2 4.6 4.6 0 000-9.2z'/%3E%3C/svg%3E"); } .ic.user { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 21c0-5 4-8 9-8s9 3 9 8z'/%3E%3C/svg%3E"); } .ic.cal { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v16H4zm0 4.5v10h16v-10zM7 2h2.5v4H7zm7.5 0H17v4h-2.5z'/%3E%3C/svg%3E"); } .ic.chart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10h3.5v10zm6.2 0V4h3.6v16zm6.3 0v-7H20v7z'/%3E%3C/svg%3E"); } /* ---------- Handy ---------- */ .xp { display: flex; flex-direction: column; aspect-ratio: 9 / 19.5; border: 4px solid #1B1B20; border-radius: 26px; background: #fff; color: var(--x-ink); font-size: 7.4px; line-height: 1.3; letter-spacing: -0.01em; } .xi { position: absolute; top: 6px; left: 50%; z-index: 4; width: 38px; height: 11px; margin-left: -19px; border-radius: 8px; background: #000; } .xs { position: relative; z-index: 3; flex: none; display: flex; justify-content: space-between; align-items: center; height: 24px; padding: 3px 14px 0 18px; font-size: 6.6px; } .xs b { font-weight: 700; letter-spacing: 0; } .xs span { display: flex; align-items: center; gap: 2.5px; } .xs .sg { width: 8px; height: 5px; background: linear-gradient(90deg, currentColor 0 1.4px, transparent 1.4px 2.2px, currentColor 2.2px 3.6px, transparent 3.6px 4.4px, currentColor 4.4px 5.8px, transparent 5.8px 6.6px, currentColor 6.6px); -webkit-mask: linear-gradient(to top right, #000 50%, transparent 50%); mask: linear-gradient(to top right, #000 50%, transparent 50%); } .xs .wf { width: 7px; height: 5px; border-radius: 7px 7px 0 0; background: currentColor; -webkit-mask: radial-gradient(circle at 50% 100%, #000 1.6px, transparent 1.7px, transparent 2.6px, #000 2.7px, #000 3.8px, transparent 3.9px, transparent 4.6px, #000 4.7px); mask: radial-gradient(circle at 50% 100%, #000 1.6px, transparent 1.7px, transparent 2.6px, #000 2.7px, #000 3.8px, transparent 3.9px, transparent 4.6px, #000 4.7px); } .xs .bt { width: 11px; height: 5px; border-radius: 1.6px; border: .8px solid currentColor; opacity: .9; box-shadow: inset -3px 0 0 -1px #fff; background: currentColor; background-clip: content-box; padding: .6px; } .xs.d { color: #fff; } .xs.d .bt { box-shadow: none; } .xb { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .xt { flex: none; display: flex; justify-content: space-around; padding: 4px 6px 2px; border-top: .5px solid #E3E3E8; background: rgba(250, 250, 252, .96); } .xt span { display: grid; justify-items: center; gap: 1px; font-size: 4.4px; font-weight: 600; color: var(--x-mut); } .xt .ic { width: 9px; height: 9px; } .xt .on { color: var(--x-o); } .xh { flex: none; display: block; width: 52px; height: 2.4px; margin: 4px auto 5px; border-radius: 3px; background: #111; } .lock .xh, .ph-dstat .xh { position: absolute; bottom: 0; left: 50%; margin-left: -26px; background: #fff; z-index: 3; } .x-lt { margin: 6px 12px 0; font-size: 15px; font-weight: 800; letter-spacing: -0.035em; } .x-sub { margin: 1px 12px 0; font-size: 6.2px; color: var(--x-mut); } .x-sec { margin: 10px 12px 4px; font-size: 5.4px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--x-mut); } .x-eb { font-size: 5.2px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--x-mut); } .x-t { font-size: 9px; font-weight: 700; letter-spacing: -0.02em; } .x-hero { display: grid; gap: 1px; margin: 9px 10px 0; padding: 10px 11px; border-radius: 12px; background: var(--x-bg); } .x-hero.o { background: linear-gradient(135deg, #3A3A3F, #1C1C1E 70%); color: #fff; } .x-hero small { font-size: 5.6px; font-weight: 600; opacity: .85; } .x-hero b { font-size: 26px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; } .x-hero span { font-size: 5.6px; opacity: .9; } .x-list { margin: 0 10px; border-radius: 11px; background: var(--x-bg); overflow: hidden; } .x-list p { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-top: .5px solid #E3E3E8; } .x-list p:first-child { border-top: 0; } .x-list em { flex: none; width: 17px; font-style: normal; font-size: 5.8px; font-weight: 700; color: var(--x-o); } .x-list em.nr { width: auto; padding: 1px 4px; border-radius: 999px; background: var(--x-g); color: #fff; font-size: 4.4px; } .x-list span { flex: 1; display: grid; min-width: 0; } .x-list b { font-size: 6.8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .x-list small { font-size: 5.4px; color: var(--x-mut); } .chev { width: 4px; height: 4px; border-top: 1px solid #C7C7CC; border-right: 1px solid #C7C7CC; transform: rotate(45deg); } .x-photo { position: relative; height: 43%; margin-top: -24px; flex: none; } .x-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .x-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 30%); } .x-pad { display: grid; gap: 5px; align-content: start; padding: 10px 12px; } .x-pill { justify-self: start; display: inline-block; padding: 2px 6px; border-radius: 999px; font-size: 5.4px; font-weight: 700; } .x-pill.g { background: #E4F8EA; color: #1E8E3E; } .x-m3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; } .x-m3 div { display: grid; padding: 7px 6px; border-radius: 10px; background: var(--x-bg); } .x-m3 b { font-size: 10px; font-weight: 800; letter-spacing: -0.04em; } .x-m3 small { font-size: 5px; color: var(--x-mut); } .x-btn { display: block; margin-top: 6px; padding: 6px; border-radius: 9px; background: var(--x-o); color: #fff; text-align: center; font-size: 6.6px; font-weight: 700; } .x-btn.g { background: var(--x-g); } .x-btn.l { margin-top: 4px; background: var(--x-bg); color: var(--x-ink); } .x-nav { display: flex; align-items: center; gap: 6px; padding: 4px 12px 7px; border-bottom: .5px solid #E3E3E8; } .x-nav span { display: grid; } .x-nav b { font-size: 7.4px; } .x-nav small { font-size: 5.2px; color: var(--x-g); } .x-av { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #C7C7CC; color: #fff; font-style: normal; font-size: 7px; font-weight: 800; } .x-av.o { background: radial-gradient(circle at 35% 30%, #7DB9FF, #0A84FF 60%, #0060C7); } .x-chat { flex: 1; display: grid; gap: 5px; align-content: start; padding: 9px 9px; overflow: hidden; } .x-chat p { max-width: 76%; padding: 5px 8px; border-radius: 11px; font-size: 6.8px; line-height: 1.3; } .x-chat .me { justify-self: end; background: var(--x-o); color: #fff; border-bottom-right-radius: 3px; } .x-chat .bot { background: var(--x-bg); border-bottom-left-radius: 3px; } .x-attach { justify-self: end; width: 58%; height: 58px; border-radius: 11px; overflow: hidden; } .x-attach img { width: 100%; height: 100%; object-fit: cover; display: block; } .x-compose { flex: none; display: flex; justify-content: space-between; align-items: center; margin: 0 9px 2px; padding: 4px 4px 4px 9px; border-radius: 999px; border: .5px solid #D1D1D6; font-size: 6.4px; color: var(--x-mut); } .x-compose i { width: 12px; height: 12px; border-radius: 50%; background: var(--x-o); } .x-card { display: grid; gap: 3px; margin: 10px 10px 0; padding: 11px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .25), 0 0 0 .5px #E3E3E8; } .x-big { margin: 4px 0 2px; font-size: 22px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; } .x-kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 0; padding: 5px 0; border-top: .5px solid #E3E3E8; font-size: 6.2px; color: var(--x-mut); } .x-kv b { color: var(--x-ink); font-weight: 600; } .x-map { position: absolute; inset: -24px 0 0; background: #EDF1EA; } .x-map svg { width: 100%; height: 100%; display: block; } .x-map .pk { fill: #D3E8C8; } .x-map .wt { fill: #CFE2F3; } .x-map .rd { fill: none; stroke: #fff; stroke-width: 5; vector-effect: non-scaling-stroke; } .x-map .rt { fill: none; stroke: var(--x-o); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .pin { position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; margin: -11px 0 0 -5.5px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--x-o); box-shadow: 0 3px 6px -2px rgba(0, 0, 0, .4); } .pin.me { width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; transform: none; background: #0A84FF; border: 2px solid #fff; box-shadow: 0 0 0 5px rgba(10, 132, 255, .2); } .x-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 2px; padding: 6px 12px 10px; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -8px 20px -10px rgba(0, 0, 0, .3); } .x-sheet .x-sub { margin: 0; } .grab { justify-self: center; width: 22px; height: 2.5px; margin-bottom: 4px; border-radius: 3px; background: #D1D1D6; } .x-ring { position: relative; display: grid; place-items: center; width: 74px; height: 74px; margin: 10px auto 4px; } .x-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); } .x-ring circle { fill: none; stroke: var(--x-bg); stroke-width: 4.5; } .x-ring circle.v { stroke: var(--x-g); stroke-dasharray: 60.3 100.5; stroke-linecap: round; } .x-ring b { font-size: 16px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-top: 8px; } .x-ring small { font-size: 5.4px; color: var(--x-mut); margin-bottom: 14px; } .x-checks { margin: 4px 10px 0; border-radius: 11px; background: var(--x-bg); overflow: hidden; } .x-checks p { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-top: .5px solid #E3E3E8; font-size: 6.6px; } .x-checks p:first-child { border-top: 0; } .x-checks i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #C7C7CC; } .x-checks .ok { color: var(--x-mut); } .x-checks .ok i { border: 0; background: var(--x-g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.6 5.2l1.7 1.7 3.2-3.6' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100%; } .lock { background: #111; } .x-lock { position: absolute; inset: -24px 0 0; padding: 36px 8px 0; color: #fff; text-align: center; background: radial-gradient(ellipse at 25% 15%, #5AC8FA 0%, rgba(10, 132, 255, .55) 32%, transparent 62%), radial-gradient(ellipse at 85% 85%, #5E5CE6 0%, transparent 55%), linear-gradient(180deg, #0B1E3A, #07070C); } .lk-d { font-size: 7px; font-weight: 600; opacity: .9; } .lk-t { margin: 0 0 16px; font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .lk-n { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; padding: 6px 7px; border-radius: 12px; background: rgba(255, 255, 255, .2); text-align: left; } .lk-n i { flex: none; width: 13px; height: 13px; border-radius: 4px; background: #5E5CE6; } .lk-n i.g { background: var(--x-g); } .lk-n i.b { background: #0A84FF; } .lk-n span { flex: 1; display: grid; } .lk-n b { font-size: 6.4px; } .lk-n small { font-size: 5.8px; line-height: 1.3; opacity: .92; } .lk-n em { font-style: normal; font-size: 5px; opacity: .7; } .x-search { display: flex; align-items: center; gap: 5px; margin: 8px 10px 0; padding: 6px 8px; border-radius: 9px; background: var(--x-bg); font-size: 6.6px; color: var(--x-ink); } .x-search .ic { color: var(--x-mut); width: 8px; height: 8px; } .x-answer { display: grid; gap: 4px; margin: 8px 10px 0; padding: 10px; border-radius: 13px; background: #111113; color: #fff; font-size: 7px; line-height: 1.35; } .x-answer .x-eb { color: #64D2FF; } .x-src { display: flex; flex-wrap: wrap; gap: 3px; } .x-src span { padding: 2px 6px; border-radius: 999px; background: #2C2C30; font-size: 5.2px; } /* ---------- iPad ---------- */ .xw { display: flex; aspect-ratio: 4 / 3; border: 4px solid #1B1B20; border-radius: 14px; background: #fff; color: var(--x-ink); font-size: 5.4px; line-height: 1.3; } .xw-side { flex: none; display: grid; align-content: start; gap: 2px; width: 40px; padding: 7px 4px; background: #F7F7FA; border-right: .5px solid #E3E3E8; } .xw-side b { display: flex; align-items: center; gap: 3px; margin: 0 2px 5px; font-size: 6px; } .xw-side b i { width: 7px; height: 7px; border-radius: 2px; background: var(--x-o); } .xw-side span { display: flex; align-items: center; gap: 3px; padding: 2.5px 3px; border-radius: 4px; font-size: 5px; font-weight: 500; color: #3C3C43; } .xw-side .ic { width: 6px; height: 6px; color: var(--x-mut); } .xw-side .on { background: #fff; color: var(--x-o); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .xw-side .on .ic { color: var(--x-o); } .xw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 7px 9px; } .xw-top { display: flex; justify-content: space-between; align-items: center; } .xw-top b { font-size: 9px; font-weight: 800; letter-spacing: -0.03em; } .xw-av { display: grid; place-items: center; width: 11px; height: 11px; border-radius: 50%; background: #E5E5EA; font-size: 4px; font-weight: 800; color: #3C3C43; } .xw-kpi small, .xw-2 small { display: block; font-size: 5px; color: var(--x-mut); } .xw-kpi b { font-size: 17px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.05; } .xw-kpi em { font-style: normal; font-size: 5px; font-weight: 700; color: #1E8E3E; } .xw-chart svg { display: block; width: 100%; height: 34px; } .xw-chart .a { fill: rgba(10, 132, 255, .12); } .xw-chart .l { fill: none; stroke: var(--x-o); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .xw-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .xw-2 div { padding: 5px 6px; border-radius: 7px; background: var(--x-bg); } .xw-2 b { font-size: 10px; font-weight: 800; letter-spacing: -0.04em; } .xw-gantt { display: grid; gap: 3px; } .xw-gantt p { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 3px; } .xw-gantt p.h { grid-template-columns: 22px repeat(5, 1fr); font-size: 4.6px; color: var(--x-mut); } .xw-gantt p > span:first-child { font-size: 5.2px; font-weight: 600; } .xw-gantt .tr { position: relative; height: 13px; border-radius: 4px; background: var(--x-bg); } .xw-gantt b { position: absolute; top: 1.5px; bottom: 1.5px; left: calc(var(--x) * 20% + 1px); width: calc(var(--w) * 20% - 2px); padding: 0 3px; border-radius: 3px; background: var(--x-o); color: #fff; font-size: 4.4px; line-height: 10px; white-space: nowrap; overflow: hidden; } .xw-gantt b.c2 { background: #0A84FF; } .xw-gantt b.c3 { background: var(--x-g); } .xw-kan { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .xw-kan > div { display: grid; gap: 3px; align-content: start; padding: 4px; border-radius: 7px; background: var(--x-bg); } .kh { display: flex; justify-content: space-between; font-size: 5.2px; font-weight: 700; } .kh em { font-style: normal; color: var(--x-mut); } .kc { display: grid; padding: 4px 5px; border-radius: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .kc b { font-size: 5.2px; font-weight: 600; } .kc small { font-size: 4.4px; color: var(--x-mut); } .kc.hot { box-shadow: inset 2px 0 0 var(--x-o), 0 1px 2px rgba(0, 0, 0, .08); } .xw.dark { background: #111113; color: #fff; } .xw.dark .xw-av { background: #2C2C30; color: #fff; } .xw-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .xw-g3 div { position: relative; display: grid; justify-items: center; padding: 5px 2px; border-radius: 8px; background: #1C1C1F; } .xw-g3 svg { width: 30px; height: 30px; transform: rotate(-90deg); } .xw-g3 circle { fill: none; stroke: #2C2C30; stroke-width: 4; } .xw-g3 circle.v { stroke: var(--x-o); stroke-dasharray: calc(var(--p) * .942) 100; stroke-linecap: round; } .xw-g3 b { font-size: 7.4px; font-weight: 800; } .xw-g3 small { font-size: 4.4px; color: var(--x-mut); } .xw-chart.d .l { stroke: var(--x-g); } .xw-prod { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: center; } .xw-prod .im { height: 100%; min-height: 70px; border-radius: 8px; background-size: 260%; background-position: 16% 30%; } .xw-prod > div { display: grid; gap: 2px; } .xw-prod b { font-size: 8px; font-weight: 800; letter-spacing: -0.02em; } .xw-prod .pr { font-size: 11px; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 2px; } .xw-prod .x-btn { font-size: 5.4px; padding: 4px; margin-top: 4px; border-radius: 6px; } .xw-prod .x-pill { font-size: 4.6px; } .xw-inbox { flex: 1; display: grid; grid-template-columns: 44% 1fr; gap: 5px; } .xw-inbox .ls { display: grid; align-content: start; border-radius: 7px; background: var(--x-bg); overflow: hidden; } .xw-inbox .ls p { display: grid; padding: 4px 5px; border-top: .5px solid #E3E3E8; } .xw-inbox .ls p:first-child { border-top: 0; } .xw-inbox .ls p.on { background: #fff; box-shadow: inset 2px 0 0 var(--x-o); } .xw-inbox .ls b { font-size: 5.2px; } .xw-inbox .ls small { font-size: 4.4px; color: var(--x-mut); } .xw-inbox .dt { display: grid; gap: 4px; align-content: start; } .xw-inbox .dt b { font-size: 6.4px; font-weight: 700; } .xw-inbox .q { padding: 4px 5px; border-radius: 6px; background: var(--x-bg); font-size: 5px; } .xw-inbox .a { display: flex; gap: 3px; padding: 4px 5px; border-radius: 6px; background: #EAF3FF; font-size: 5px; } .xw-inbox .a i { flex: none; width: 5px; height: 5px; margin-top: 1px; border-radius: 50%; background: var(--x-o); } .xw-inbox .x-btn { font-size: 5px; padding: 3.5px; margin-top: 0; border-radius: 5px; } /* ---------- Schnittstellen: nur transform/opacity animieren (flüssig, ohne Layout-Neuberechnung) ---------- */ .ix-wires i { --len: 52px; } .ix-wires i::after { top: 0; will-change: transform, opacity; } .bs-ix.is-s2 .ix-wires i::after { animation-name: ix-flow2; } @keyframes ix-flow2 { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--len)); opacity: 0; } } .ix-hub { position: relative; box-shadow: 0 24px 40px -22px rgba(255, 91, 31, .7); } .ix-hub::before { content: ""; position: absolute; inset: -5px; border-radius: 21px; border: 5px solid rgba(255, 91, 31, .12); opacity: 1; pointer-events: none; } .ix-hub::after { content: ""; position: absolute; inset: -10px; border-radius: 26px; border: 5px solid rgba(255, 91, 31, .07); opacity: 0; pointer-events: none; } .bs-ix.is-s2 .ix-hub { animation: none; } .bs-ix.is-s2 .ix-hub::after { animation: ix-glow2 2.4s ease-in-out infinite; } @keyframes ix-glow2 { 50% { opacity: 1; } } .ix-port { position: relative; } .ix-port::after { content: ""; position: absolute; inset: -4px; border-radius: 13px; border: 2px solid rgba(255, 91, 31, .45); opacity: 0; pointer-events: none; } .bs-ix.is-s2 .ix-port { animation: none; } .bs-ix.is-s2 .ix-port::after { animation: ix-glow2 2.4s ease-in-out infinite; } .bs-ix.is-s2 .ix-port + .ix-core + .ix-port::after { animation-delay: 1.2s; } @media (max-width: 640px) { .ix-wires i { --len: 40px; } } /* ---------- Wand v3: Layout-Korrekturen ---------- */ .sc .x-lt { margin: 6px 12px 0; } .sc .x-sub { margin: 1px 12px 0; } .sc .x-sec { margin: 10px 12px 4px; } .sc .x-big { margin: 4px 0 2px; } .sc .lk-t { margin: 0 0 14px; } .sc .x-sheet .x-sub { margin: 0; } /* Vollflächige Screens: Statusleiste liegt über Foto, Karte und Sperrbildschirm */ .ph-dstat .xs, .lock .xs, .xp:has(.x-map) .xs { position: absolute; top: 0; left: 0; right: 0; } .x-photo { margin-top: 0; height: 38%; } .x-map, .x-lock { inset: 0; } .x-lock { padding-top: 34px; } .lk-t { font-size: 40px; } /* iPad */ .xw { aspect-ratio: 4 / 3.15; } .xw-kpi b { display: block; } .xw-chart svg { height: 26px; } .xw-main { gap: 5px; } /* ---------- Performance: animierte Grafiken auf eigenen GPU-Ebenen, Bühnen gekapselt ---------- */ .bs .bs-stage { contain: paint; } .ag3-map, .kb-canvas, .wl-plane, .wl-track, .ix-wires i::after { will-change: transform; } .wl-track { backface-visibility: hidden; animation-name: wl-run3; } @keyframes wl-run3 { to { transform: translateY(-33.3333%); } } .wl-track { animation-duration: 70s; } .wl-col:nth-child(even) .wl-track { animation-duration: 84s; } .wl-col.c3 .wl-track { animation-duration: 62s; } .wl-col.c6 .wl-track { animation-duration: 92s; } .wl-col.c7 .wl-track { animation-duration: 76s; } .wl-col.c8 .wl-track { animation-duration: 88s; } /* Datenpunkte: feste Keyframes (ohne var), damit die GPU sie allein bewegt */ .bs-ix.is-s2 .ix-wires i::after { animation-name: ix-flow-d; } @keyframes ix-flow-d { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(52px); opacity: 0; } } @media (max-width: 640px) { .bs-ix.is-s2 .ix-wires i::after { animation-name: ix-flow-m; } } @keyframes ix-flow-m { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } } /* ---------- Bausteine: Aufbau in drei Stufen – Überschrift, Boxen, Inhalt ---------- */ .bs .bento-card.build:not(.is-built) { opacity: 0; transform: translateY(56px) scale(.96); } .bs .bento-card.build.is-built { opacity: 1; transform: none; transition: opacity .8s var(--ease) var(--bd, 0ms), transform 1.2s cubic-bezier(.16, 1, .3, 1) var(--bd, 0ms), box-shadow .5s var(--ease); } .bs .bento-card.build.is-done { transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s var(--ease); } .bs .bento-card.build:not(.is-built) > :not(.bp):not(img) { opacity: 0; transform: translateY(16px); } .bs .bento-card.build.is-built > :not(.bp):not(img) { transition: opacity .7s var(--ease), transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--bd, 0ms) + 450ms); } .bs .bento-card.build.is-built > .bs-stage { transition-delay: calc(var(--bd, 0ms) + 850ms); } .bs .build.is-built .bs-msg span:first-child { transition-delay: calc(var(--bd, 0ms) + 550ms); } .bs .build.is-built .bs-msg span + span { transition-delay: calc(var(--bd, 0ms) + 700ms); } .bs .build.is-built .bs-sub { transition-delay: calc(var(--bd, 0ms) + 880ms); } .bs .bento-card.build.is-done > :not(.bp):not(img) { transition: none; } @media (prefers-reduced-motion: reduce) { .bs .bento-card.build { opacity: 1 !important; transform: none !important; } } .bs .bento-card.build.is-done:hover { transform: translateY(-4px); } /* ---------- Bausteine: es bewegt sich immer nur eine Karte (blocks.js wählt sie) ---------- Die anderen stehen still auf ihrem fertigen Bild und treten leicht zurück. */ .bs .bento-card.is-still *, .bs .bento-card.is-still *::before, .bs .bento-card.is-still *::after { animation-play-state: paused !important; } .bs .bento-card > .bs-stage { transition: opacity .7s var(--ease); } .bs .bento-card.is-still > .bs-stage { opacity: .66; }