@font-face { font-family: 'Geist'; src: url('/assets/geist.woff2?v=a369fcf562') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Bricolage'; src: url('/assets/bricolage.woff2?v=a97804dc9f') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } :root { color-scheme: light dark; --schrift: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --display: 'Bricolage', 'Geist', system-ui, sans-serif; --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace; --marke: #016dca; --marke-hover: #0a7ce0; --marke-hell: #3d9bff; --auf-marke: #ffffff; --grund: #f4f6fa; --flaeche: #ffffff; --flaeche-2: #eef2f8; --linie: rgb(12 24 48 / 0.09); --linie-stark: rgb(12 24 48 / 0.16); --text: #07101f; --text-2: #465266; --text-3: #647086; --marke-text: #0161b6; --marke-weich: rgb(1 109 202 / 0.09); --gut: #11945a; --hinweis: #fff5d9; --hinweis-linie: #ecd28a; --hinweis-text: #5a4509; --schatten: 0 1px 2px rgb(10 30 70 / 0.05), 0 16px 40px -18px rgb(10 30 70 / 0.22); --b-grund: #f3f6fb; --b-text: #07101f; --b-text-2: #465266; --b-linie: rgb(12 24 48 / 0.08); --b-linie-stark: rgb(12 24 48 / 0.16); --b-glas: rgb(255 255 255 / 0.7); --b-glas-hover: rgb(255 255 255 / 0.95); --b-licht: rgb(1 109 202 / 0.16); --b-licht-2: rgb(61 155 255 / 0.1); --b-schatten: 0 40px 90px -40px rgb(10 30 70 / 0.35); --b-feld: #ffffff; --r-karte: 22px; --breite: 1240px; --rand: 28px; } @media (prefers-color-scheme: dark) { :root { --grund: #040812; --flaeche: #0b111e; --flaeche-2: #111a2b; --linie: rgb(255 255 255 / 0.08); --linie-stark: rgb(255 255 255 / 0.16); --text: #eef3fb; --text-2: #a9b4c8; --text-3: #818ca2; --marke-text: #6db2ff; --marke-weich: rgb(61 155 255 / 0.12); --gut: #3fd08a; --hinweis: #221c0b; --hinweis-linie: #574516; --hinweis-text: #f0d78c; --schatten: 0 1px 2px rgb(0 0 0 / 0.5), 0 20px 50px -20px rgb(0 0 0 / 0.8); --b-grund: #040915; --b-text: #f2f6fd; --b-text-2: #aab6cc; --b-linie: rgb(255 255 255 / 0.08); --b-linie-stark: rgb(255 255 255 / 0.18); --b-glas: rgb(255 255 255 / 0.05); --b-glas-hover: rgb(255 255 255 / 0.1); --b-licht: rgb(1 109 202 / 0.6); --b-licht-2: rgb(61 155 255 / 0.2); --b-schatten: 0 70px 140px -40px rgb(1 50 130 / 0.95); --b-feld: rgb(255 255 255 / 0.07); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--schrift); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { display: block; max-width: 100%; height: auto; } a { color: var(--marke-text); text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 3px; border-radius: 6px; } h1, h2, h3, h4 { margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; } h2 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5.2vw, 68px); line-height: 1; letter-spacing: -0.045em; } h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; } p { margin: 0; text-wrap: pretty; } .huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nw { display: inline-block; max-width: 100%; text-decoration: inherit; } .sprung { position: fixed; left: 16px; top: -80px; z-index: 50; background: var(--flaeche); color: var(--text); padding: 10px 16px; border-radius: 999px; } .sprung:focus { top: 12px; } .symbol { width: 1em; height: 1em; flex: none; } .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 16px; font-weight: 580; line-height: 1.1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, box-shadow .3s ease, transform .2s cubic-bezier(.2, .8, .2, 1); } .knopf:active { transform: translateY(1px) scale(.98); } .knopf .symbol { font-size: 18px; transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .knopf:hover .symbol-pfeil { transform: translateX(4px); } .knopf-voll { background: var(--marke); color: var(--auf-marke); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 10px 30px -10px rgb(1 109 202 / .8); } .knopf-voll:hover { background: var(--marke-hover); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 14px 40px -10px rgb(1 109 202 / .95); } .knopf-rand { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); } .knopf-rand:hover { border-color: var(--text-3); } .knopf-glas { background: var(--b-glas); color: var(--b-text); border-color: var(--b-linie-stark); } .knopf-glas:hover { background: var(--b-glas-hover); border-color: var(--b-text-2); } .kopf { position: fixed; inset: 16px 0 auto; z-index: 40; pointer-events: none; padding: 0 16px; } .kopf-innen { pointer-events: auto; max-width: calc(var(--breite) - 20px); margin: 0 auto; height: 62px; display: flex; align-items: center; gap: 32px; padding: 0 9px 0 22px; border-radius: 999px; color: var(--b-text); border: 1px solid transparent; transition: background-color .35s ease, border-color .35s ease, color .35s ease, max-width .5s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; } .kopf.gerollt .kopf-innen { max-width: 1120px; color: var(--text); background: color-mix(in srgb, var(--flaeche) 80%, transparent); border-color: var(--linie); box-shadow: var(--schatten); backdrop-filter: saturate(170%) blur(18px); -webkit-backdrop-filter: saturate(170%) blur(18px); } .logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; } .logo img { width: 32px; height: 32px; } .logo svg { height: 20px; width: auto; transform: translateY(-2px); } .kopf nav { display: flex; gap: 28px; } .kopf nav a { color: inherit; opacity: .78; text-decoration: none; font-size: 15px; transition: opacity .2s; white-space: nowrap; } .kopf nav a:hover, .kopf nav a[aria-current] { opacity: 1; } .kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; } .sprache { color: inherit; opacity: .8; font-size: 14px; font-weight: 560; text-decoration: none; padding: 8px 12px; border-radius: 999px; } .anmelden { display: inline-flex; align-items: center; gap: 7px; color: inherit; font-size: 15px; font-weight: 560; text-decoration: none; padding: 9px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); transition: background-color .2s, border-color .2s; } .anmelden:hover { background: rgb(127 127 127 / .14); border-color: color-mix(in srgb, currentColor 40%, transparent); } .anmelden .symbol { font-size: 17px; } .sprache:hover { opacity: 1; background: rgb(127 127 127 / .14); } .kopf .knopf { padding: 12px 20px; font-size: 15px; } @media (max-width: 960px) { .kopf nav { display: none; } .kopf-innen { gap: 12px; } } @media (max-width: 440px) { .kopf .knopf-kopf { display: none; } } @media (max-width: 360px) { .anmelden span { display: none; } .anmelden { padding: 9px 10px; } .kopf-innen { padding-left: 16px; gap: 8px; } } .buehne { position: relative; isolation: isolate; overflow: hidden; margin: 10px; border-radius: 32px; background: var(--b-grund); color: var(--b-text); } .buehne::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(55% 50% at 78% 6%, var(--b-licht), transparent 70%), radial-gradient(38% 38% at 6% 26%, var(--b-licht-2), transparent 70%), radial-gradient(80% 45% at 50% 100%, var(--b-licht-2), transparent 70%); } .buehne::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--b-linie) 1px, transparent 1px), linear-gradient(90deg, var(--b-linie) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(75% 60% at 50% 18%, #000 15%, transparent 75%); -webkit-mask-image: radial-gradient(75% 60% at 50% 18%, #000 15%, transparent 75%); } .hero { padding-top: 150px; } .hero-pille { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--b-glas); border: 1px solid var(--b-linie-stark); font-size: 14.5px; color: var(--b-text-2); margin-bottom: 34px; } .hero-pille b { background: var(--marke); color: #fff; font-weight: 600; font-size: 12.5px; padding: 4px 11px; border-radius: 999px; } .hero h1 { font-family: var(--display); font-weight: 760; letter-spacing: -0.055em; line-height: .92; font-size: clamp(44px, 7.8vw, 114px); } .hero h1 > span { display: block; } .verlauf-text { color: var(--marke-text); } @media (prefers-color-scheme: dark) { .verlauf-text { color: var(--marke-hell); } } .hero-unten { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-top: 40px; } .hero-unter { font-size: 20px; line-height: 1.5; color: var(--b-text-2); max-width: 46ch; } .hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; } .komposition { position: relative; margin-top: 80px; } .komposition-bild { border-radius: 18px; overflow: hidden; border: 1px solid var(--b-linie-stark); box-shadow: var(--b-schatten); margin-bottom: -140px; } .komposition-bild img { width: 100%; } .hero-schleier { height: 140px; background: linear-gradient(transparent, var(--b-grund) 85%); position: relative; z-index: 1; } .widget { position: absolute; right: -6px; bottom: 170px; z-index: 2; width: 370px; background: #ffffff; color: #0b1322; border-radius: 24px; overflow: hidden; box-shadow: 0 50px 90px -30px rgb(0 10 40 / .45), 0 0 0 1px rgb(0 0 0 / .06); font-size: 14.5px; line-height: 1.45; } .widget-kopf { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: var(--marke); color: #fff; } .widget-kopf img { width: 38px; height: 38px; } .widget-kopf strong { display: block; font-size: 15px; } .widget-kopf div > span { font-size: 12.5px; opacity: .9; display: inline-flex; align-items: center; gap: 6px; } .widget-kopf div > span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5ff0a8; box-shadow: 0 0 0 3px rgb(95 240 168 / .25); } .widget-verlauf { padding: 16px; display: flex; flex-direction: column; gap: 10px; height: 340px; justify-content: flex-end; background: #f4f6fa; overflow: hidden; mask-image: linear-gradient(transparent, #000 28px); -webkit-mask-image: linear-gradient(transparent, #000 28px); } .w-n { max-width: 86%; padding: 9px 13px; border-radius: 16px; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); } .w-n.kunde { align-self: flex-end; background: var(--marke); color: #fff; border-bottom-right-radius: 5px; } .w-n.ki { align-self: flex-start; background: #fff; border: 1px solid #e4e9f1; border-bottom-left-radius: 5px; } .w-n.ki small { display: block; font-size: 11px; font-weight: 700; color: #6a7488; letter-spacing: .02em; margin-bottom: 2px; } .w-n.ki b { font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: #0161b6; word-break: break-all; } .w-n.system { align-self: center; max-width: none; font-size: 12px; font-weight: 560; color: #0b6b40; background: #dff6ea; border-radius: 999px; padding: 5px 12px; display: inline-flex; gap: 6px; align-items: center; } .w-n.system .symbol { font-size: 14px; } .w-tippt { align-self: flex-start; background: #fff; border: 1px solid #e4e9f1; border-radius: 16px; border-bottom-left-radius: 5px; padding: 12px 14px; display: none; gap: 4px; } .w-tippt i { width: 6px; height: 6px; border-radius: 50%; background: #9aa5b8; animation: tippen 1s infinite ease-in-out; } .w-tippt i:nth-child(2) { animation-delay: .15s; } .w-tippt i:nth-child(3) { animation-delay: .3s; } @keyframes tippen { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } .widget-fuss { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid #e8ecf2; background: #fff; } .widget-fuss span { flex: 1; color: #6f7a8e; font-size: 13.5px; padding: 9px 14px; border: 1px solid #dfe5ee; border-radius: 999px; } .widget-fuss button { border: 0; background: rgb(1 109 202 / .1); color: var(--marke); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 17px; } .widget-fuss button:hover { background: rgb(1 109 202 / .18); } @media (max-width: 1100px) { .widget { right: 12px; width: 340px; } } @media (max-width: 860px) { .hero { padding-top: 116px; } .hero-unten { grid-template-columns: 1fr; gap: 28px; } .komposition { margin-top: 52px; } .komposition-bild { width: 175%; margin-bottom: -60px; } .widget { position: relative; right: auto; bottom: auto; width: auto; max-width: 400px; margin: -80px 0 0 auto; } .hero-schleier { height: 56px; } } @media (max-width: 560px) { .hero-unter { font-size: 18px; } .widget { margin: -40px 0 0; } .widget-verlauf { height: 400px; } } .laufband { padding: 40px 0 12px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .laufband-spur { display: flex; width: max-content; gap: 64px; align-items: center; animation: laufen 42s linear infinite; } .laufband:hover .laufband-spur { animation-play-state: paused; } .laufband-gruppe { display: flex; align-items: center; gap: 48px; } .laufband-gruppe p { font-size: 14px; color: var(--text-3); white-space: nowrap; } .laufband-gruppe > span { display: inline-flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 620; color: var(--text-2); white-space: nowrap; letter-spacing: -0.015em; } .laufband-gruppe .symbol { font-size: 26px; } .laufband-gruppe .symbol.breit { font-size: 46px; margin: -10px -4px; } @keyframes laufen { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .laufband { mask-image: none; -webkit-mask-image: none; } .laufband-spur { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding: 0 20px; gap: 24px 48px; } .laufband-spur > [aria-hidden] { display: none; } .laufband-gruppe { flex-wrap: wrap; justify-content: center; gap: 20px 36px; } } .abschnitt { padding: 150px 0; } .kopfzeile { max-width: 800px; margin-bottom: 68px; } .kopfzeile p { margin-top: 24px; font-size: 20px; line-height: 1.5; color: var(--text-2); max-width: 54ch; } @media (max-width: 760px) { .abschnitt { padding: 100px 0; } .kopfzeile { margin-bottom: 44px; } .kopfzeile p { font-size: 18px; } } .geschichte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 88px; } .schritte { list-style: none; margin: 0; padding: 0; } .schritt { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; transition: opacity .6s ease; } .js-geschichte .schritt:not(.aktiv) { opacity: .3; } .schritt:first-child { min-height: 40vh; justify-content: flex-start; padding-top: 30px; } .schritt:last-child { min-height: 58vh; } .schritt.aktiv { opacity: 1; } .schritt .symbol-rund { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; font-size: 27px; color: #fff; background: var(--marke); box-shadow: 0 12px 30px -10px rgb(1 109 202 / .8); margin-bottom: 24px; } .schritt h3 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -0.04em; line-height: 1.02; } .schritt p { margin-top: 16px; color: var(--text-2); font-size: 18px; max-width: 40ch; } .buehnchen { position: sticky; top: 112px; align-self: start; } .fall { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 28px; box-shadow: var(--schatten); padding: 22px; display: flex; flex-direction: column; gap: 12px; min-height: 580px; } .fall-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); } .fall-kopf .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #c4352e; color: #fff; font-weight: 600; font-size: 14px; } .fall-kopf strong { display: block; font-size: 15.5px; } .fall-kopf span { font-size: 13px; color: var(--text-3); } .fall-kopf .fahne { margin-left: auto; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--flaeche-2); color: var(--text-2); } .f-n { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; } .f-n small { display: block; font-size: 12px; color: var(--text-2); margin-top: 6px; } .f-kunde { background: var(--flaeche-2); align-self: flex-start; border-bottom-left-radius: 5px; } .f-ki { background: var(--marke-weich); align-self: flex-end; border-bottom-right-radius: 5px; } .f-ki b, .f-team b { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 3px; } .f-ki b { color: #0b4f8f; } @media (prefers-color-scheme: dark) { .f-ki b { color: var(--marke-hell); } } .f-team { background: var(--marke); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; } .f-team b { opacity: 1; } .f-team small { color: rgb(255 255 255 / .96); } .f-zf { border: 1px dashed var(--linie-stark); border-radius: 16px; padding: 12px 14px; font-size: 14px; margin: 0; } .f-zf dl { margin: 0; } .f-zf strong { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--marke-text); margin-bottom: 6px; } .f-zf div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; } .f-zf dt { color: var(--text-3); } .f-zf dd { margin: 0; } .fall [data-ab] { transition: opacity .55s ease, transform .65s cubic-bezier(.2, .8, .2, 1); } .js-geschichte .fall [data-ab]:not(.an) { opacity: 0; transform: translateY(16px); } @media (max-width: 960px) { .geschichte { grid-template-columns: 1fr; gap: 40px; } .schritt, .schritt:first-child, .schritt:last-child { min-height: 0; opacity: 1; padding: 0 0 44px; } .buehnchen { position: static; } .fall { min-height: 0; } .js-geschichte .fall [data-ab]:not(.an) { opacity: 1; transform: none; } } .quellen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; } .quellen-karten { display: grid; gap: 16px; } .quelle { display: grid; grid-template-columns: 56px 1fr; gap: 6px 20px; align-items: start; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 26px; transition: border-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); } .quelle:hover { border-color: var(--linie-stark); } .quelle-symbol { grid-row: span 3; width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; font-size: 28px; background: var(--flaeche-2); color: var(--text-2); } .quelle-symbol.shopify { background: #95bf47; color: #fff; } .quelle-symbol.woocommerce { background: #7f54b3; color: #fff; } .app.bald { opacity: 0.7; } .app-bald { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--flaeche-2); color: var(--text-2); font-size: 0.85em; } .quelle-symbol.jtl { background: var(--marke); color: #fff; } .quelle h3 { font-size: 20px; } .quelle p { color: var(--text-2); font-size: 16px; } .quelle a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; font-size: 15px; text-decoration: none; } .quelle a:hover .symbol { transform: translateX(3px); } .quelle a .symbol { transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .quellen-bild { position: relative; overflow: hidden; border-radius: var(--r-karte); padding: 40px 36px; display: flex; align-items: center; justify-content: center; background: radial-gradient(70% 60% at 50% 50%, var(--b-licht), transparent 75%), var(--b-grund); border: 1px solid var(--linie); min-height: 420px; } .quellen-bild img { width: 100%; max-width: 400px; border-radius: 16px; box-shadow: var(--b-schatten), 0 0 0 1px var(--b-linie-stark); } @media (max-width: 960px) { .quellen { grid-template-columns: 1fr; } .quellen-bild { min-height: 0; padding-top: 32px; } } .demo-karte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; overflow: hidden; border-radius: var(--r-karte); padding: 56px; color: var(--b-text); border: 1px solid var(--b-linie); background: radial-gradient(60% 70% at 85% 40%, var(--b-licht), transparent 70%), var(--b-grund); } .demo-marke { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--marke-hell); margin-bottom: 18px; } .demo-marke .symbol { font-size: 20px; } .demo-karte h2 { font-size: clamp(34px, 4.2vw, 56px); } .demo-unter { margin-top: 20px; font-size: 19px; line-height: 1.5; color: var(--b-text-2); max-width: 44ch; } .demo-schritte { list-style: none; margin: 32px 0; padding: 0; display: grid; gap: 20px; } .demo-schritte li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; } .demo-schritte .symbol-rund { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--marke); box-shadow: 0 10px 26px -10px rgb(1 109 202 / .8); } .demo-schritte h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; } .demo-schritte p { margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: var(--b-text-2); } .demo-fakten { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--b-text-2); } .demo-fakten li { display: inline-flex; align-items: center; gap: 6px; } .demo-fakten .symbol { font-size: 17px; color: var(--marke-hell); } .demo-bild { margin: 0; } .demo-bild img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--b-schatten), 0 0 0 1px var(--b-linie-stark); } @media (max-width: 960px) { .demo-karte { grid-template-columns: 1fr; padding: 32px 22px; gap: 32px; } } .jtl-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px; } .kachel { position: relative; overflow: hidden; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 32px; } .fluss-kachel { grid-column: 1 / -1; padding: 48px 40px 44px; background: radial-gradient(50% 120% at 100% 50%, var(--marke-weich), transparent 70%), var(--flaeche); } .fluss { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; } .knoten { display: flex; align-items: center; gap: 14px; padding: 16px 22px 16px 16px; border-radius: 20px; background: var(--flaeche-2); border: 1px solid var(--linie); } .knoten .symbol-rund { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text-2); } .knoten strong { display: block; font-size: 17px; line-height: 1.2; } .knoten span { font-size: 13.5px; color: var(--text-3); } .knoten.wir { background: var(--marke); border-color: var(--marke); color: #fff; box-shadow: 0 20px 44px -16px rgb(1 109 202 / .9); } .knoten.wir span { color: rgb(255 255 255 / .82); } .knoten.wir img { width: 48px; height: 48px; } .leitung { position: relative; height: 2px; margin: 0 16px; background: repeating-linear-gradient(90deg, var(--linie-stark) 0 6px, transparent 6px 12px); } .leitung em { position: absolute; left: 50%; top: -32px; transform: translateX(-50%); font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--text-3); white-space: nowrap; } .leitung.raus em { color: var(--marke-text); } .leitung.raus i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--marke-hell); box-shadow: 0 0 12px 2px rgb(61 155 255 / .7); animation: paket 2.4s linear infinite; } .leitung.raus i:nth-of-type(2) { animation-delay: .8s; } .leitung.raus i:nth-of-type(3) { animation-delay: 1.6s; } @keyframes paket { from { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .leitung.raus i { animation: none; left: 50%; } .leitung.raus i:nth-of-type(n+2) { display: none; } } .fakten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; padding: 0; list-style: none; align-content: start; } .fakten li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px; } .fakten .symbol { font-size: 28px; color: var(--marke-text); margin-bottom: 18px; } .fakten h3 { margin-bottom: 8px; } .fakten p { color: var(--text-2); font-size: 15.5px; } .akte { padding: 28px 28px 0; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--marke-weich), transparent 60%), var(--flaeche); } .akte h3 { margin-bottom: 6px; } .akte p { font-size: 15.5px; color: var(--text-2); margin-bottom: 22px; } .akte img { border-radius: 14px 14px 0 0; border: 1px solid var(--linie); border-bottom: 0; margin-top: auto; box-shadow: var(--schatten); } @media (max-width: 960px) { .jtl-raster { grid-template-columns: 1fr; } .fluss { grid-template-columns: 1fr; } .leitung { width: 2px; height: 60px; margin: 0 0 0 40px; background: repeating-linear-gradient(180deg, var(--linie-stark) 0 6px, transparent 6px 12px); } .leitung em { left: 22px; top: 50%; transform: translateY(-50%); } .leitung.raus i { left: -3px; animation-name: paket-senkrecht; } @keyframes paket-senkrecht { from { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { top: calc(100% - 8px); opacity: 0; } } .fluss-kachel { padding: 28px 22px; } } @media (max-width: 640px) { .fakten { grid-template-columns: 1fr; } } .einrichtung { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; counter-reset: s; } .einrichtung::before { content: ''; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: linear-gradient(90deg, var(--marke), var(--marke-hell) 50%, var(--linie-stark)); z-index: 0; } .einrichtung li { position: relative; z-index: 1; } .einrichtung .symbol-rund { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--flaeche); border: 2px solid var(--marke); color: var(--marke-text); margin-bottom: 22px; box-shadow: 0 0 0 8px var(--grund); } .einrichtung h3 { font-size: 20px; margin-bottom: 8px; } .einrichtung p { color: var(--text-2); font-size: 15.5px; } @media (max-width: 900px) { .einrichtung { grid-template-columns: 1fr; gap: 30px; } .einrichtung::before { left: 27px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, var(--marke), var(--linie-stark)); } .einrichtung li { display: grid; grid-template-columns: 56px 1fr; gap: 0 20px; } .einrichtung .symbol-rund { grid-row: span 2; margin: 0; } } .jtl-preis { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; border-radius: 28px; padding: 48px; background: radial-gradient(80% 100% at 0% 0%, var(--b-licht), transparent 70%), var(--b-grund); color: var(--b-text); border: 1px solid var(--linie); } .jtl-preis h2 { font-size: clamp(32px, 4vw, 48px); } .jtl-preis .betrag { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; } .jtl-preis .betrag strong { font-family: var(--display); font-size: 72px; font-weight: 750; letter-spacing: -0.05em; line-height: 1; } .jtl-preis .betrag span { color: var(--b-text-2); } .jtl-preis ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .jtl-preis li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--b-text-2); font-size: 16.5px; } .jtl-preis li .symbol { color: var(--marke-text); font-size: 20px; margin-top: 2px; } .jtl-preis a { color: var(--b-text); display: inline-flex; gap: 6px; align-items: center; margin-top: 22px; font-weight: 600; text-decoration: none; } @media (max-width: 860px) { .jtl-preis { grid-template-columns: 1fr; padding: 32px 24px; } } .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } .bento .kachel { display: flex; flex-direction: column; gap: 10px; } .bento .kachel > .symbol { font-size: 28px; color: var(--marke-text); margin-bottom: 10px; } .bento .kachel p { color: var(--text-2); font-size: 16px; } .k-uebersetzung { grid-column: span 4; grid-row: span 2; padding-bottom: 0; } .k-ki { grid-column: span 2; background: var(--marke); border-color: var(--marke); color: #fff; background-image: radial-gradient(90% 70% at 100% 0%, rgb(255 255 255 / .22), transparent 60%); } .bento .k-ki p { color: rgb(255 255 255 / .86); } .bento .k-ki > .symbol { color: #fff; } .k-team { grid-column: span 2; } .k-marken, .k-besucher { grid-column: span 3; } .k-hosting { grid-column: span 6; flex-direction: row !important; align-items: center; gap: 28px !important; padding: 28px 34px; background: radial-gradient(circle at 1px 1px, var(--linie-stark) 1px, transparent 1.5px) 0 0 / 16px 16px, var(--flaeche); } .bento .k-hosting > .symbol { margin: 0; font-size: 36px; } .k-hosting h3 { font-size: 20px; margin-bottom: 4px; } .k-hosting .de { margin-left: auto; font-family: var(--display); font-weight: 750; font-size: 48px; letter-spacing: -0.05em; color: var(--text-3); white-space: nowrap; opacity: .6; } .pillen { list-style: none; margin: auto 0 0; padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .pillen li { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: var(--flaeche-2); color: var(--text-2); border: 1px solid var(--linie); } .k-ki .pillen li { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .2); color: #fff; } .marken-reihe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; } .marken-reihe span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche-2); font-weight: 580; font-size: 14.5px; } .marken-reihe i { width: 24px; height: 24px; border-radius: 50%; } .spur { list-style: none; margin: auto 0 0; padding: 18px 0 0; display: grid; gap: 9px; } .spur li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-2); } .spur li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--linie-stark); flex: none; } .spur li:last-child { color: var(--text); font-weight: 580; } .spur li:last-child::before { border-color: var(--gut); background: var(--gut); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gut) 25%, transparent); } .uebersetzer { margin: 20px 0 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; } .bento .sprechblase { color: var(--text); } .sprechblase { padding: 14px 16px; border-radius: 18px; background: var(--flaeche-2); border: 1px solid var(--linie); font-size: 16.5px; min-height: 80px; display: flex; flex-direction: column; justify-content: center; } .sprechblase small { font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: .08em; } .bento .sprechblase.ziel { background: var(--marke); color: #fff; border-color: transparent; } .sprechblase.ziel small { color: rgb(255 255 255 / .75); } .uebersetzer > .symbol { font-size: 22px; color: var(--marke-text); } .wechsel { transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); } .wechsel.raus { opacity: 0; transform: translateY(-6px); } .k-uebersetzung .kachel-bild { margin-top: 28px; } .k-uebersetzung .kachel-bild img { border-radius: 14px 14px 0 0; border: 1px solid var(--linie); border-bottom: 0; width: 100%; max-height: 360px; object-fit: cover; object-position: top; } @media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-uebersetzung, .k-hosting { grid-column: span 2; } .k-ki, .k-team, .k-marken, .k-besucher { grid-column: span 1; } } @media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bento .kachel { grid-column: auto; padding: 26px; } .k-hosting { flex-direction: column !important; align-items: flex-start; } .k-hosting .de { margin-left: 0; } .uebersetzer { grid-template-columns: 1fr; } .uebersetzer > .symbol { transform: rotate(90deg); justify-self: center; } } .hinweis { display: flex; gap: 12px; align-items: flex-start; background: var(--hinweis); border: 1px solid var(--hinweis-linie); color: var(--hinweis-text); border-radius: 16px; padding: 12px 18px; font-size: 15px; margin-bottom: 36px; max-width: 780px; } .hinweis .symbol { font-size: 20px; margin-top: 1px; } .stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .stufe { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px 26px; display: flex; flex-direction: column; position: relative; } .stufe-beliebt { color: var(--b-text); border: 1px solid rgb(61 155 255 / .5); background: radial-gradient(100% 60% at 50% 0%, var(--b-licht), transparent 70%), var(--b-grund); box-shadow: 0 0 0 1px rgb(61 155 255 / .25), 0 30px 70px -24px rgb(1 109 202 / .45); } .stufe-beliebt .stufe-fuer, .stufe-beliebt li, .stufe-beliebt .stufe-grenzen, .stufe-beliebt .stufe-preis span, .stufe-beliebt li.plus { color: var(--b-text-2); } .stufe-beliebt ul { border-color: var(--b-linie); } .stufe-beliebt li .symbol { color: var(--marke-text); } .stufe-marke { position: absolute; top: 22px; right: 20px; background: var(--marke); color: #fff; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; } .stufe h3 { font-size: 18px; } .stufe-preis { margin: 18px 0 6px; display: flex; align-items: baseline; gap: 6px; } .stufe-preis strong { font-family: var(--display); font-size: 50px; font-weight: 720; letter-spacing: -0.05em; line-height: 1; } .stufe-preis span { color: var(--text-3); font-size: 14.5px; } .stufe-fuer { color: var(--text-2); font-size: 15px; min-height: 46px; } .stufe ul { list-style: none; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid var(--linie); display: grid; gap: 10px; font-size: 14.5px; } .stufe li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; } .stufe li .symbol { color: var(--marke-text); font-size: 16px; margin-top: 3px; } .stufe li.plus { color: var(--text-3); grid-template-columns: 1fr; } .stufe-grenzen { margin-top: auto; padding-top: 22px; font-size: 13.5px; color: var(--text-3); } .custom { margin-top: 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 24px 28px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .custom p { color: var(--text-2); font-size: 15.5px; max-width: 70ch; margin-top: 4px; } .test { margin-top: 22px; font-size: 15px; color: var(--text-2); } @media (max-width: 1100px) { .stufen { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .stufen { grid-template-columns: 1fr; } .stufe-fuer { min-height: 0; } } .apps-kopf { margin: 110px 0 32px; display: grid; gap: 12px; } .apps-kopf h3 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.045em; line-height: 1; } .apps-kopf p { color: var(--text-2); } .apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; } .app { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 22px; display: grid; grid-template-columns: 44px 1fr; gap: 6px 16px; align-content: start; transition: border-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); } .app:hover { border-color: var(--linie-stark); transform: translateY(-2px); } .app-symbol { grid-row: span 3; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--flaeche-2); font-size: 22px; color: var(--text-2); } .app h4 { font-size: 16px; font-weight: 600; } .app p { font-size: 14.5px; color: var(--text-2); } .app-preis { font-size: 14.5px; font-weight: 600; margin-top: 8px; } .app-preis span { font-weight: 400; color: var(--text-3); } .app-preis a { font-weight: 600; margin-left: 8px; text-decoration: none; } .app-bald { opacity: .6; } @media (max-width: 960px) { .apps { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .apps { grid-template-columns: 1fr; } } .faq-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; } .faq-raster .kopfzeile { position: sticky; top: 120px; align-self: start; margin: 0; } .faq-raster .kopfzeile h2 { font-size: clamp(34px, 3.6vw, 50px); } .faq details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; margin-bottom: 10px; transition: border-color .2s; } .faq details[open] { border-color: var(--linie-stark); } .faq summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; font-weight: 600; font-size: 17px; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary .symbol { position: absolute; right: 18px; top: 50%; margin-top: -15px; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--flaeche-2); color: var(--text-2); transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .2s, color .2s; } .faq details[open] summary .symbol { transform: rotate(45deg); background: var(--marke); color: #fff; } .faq details p { color: var(--text-2); padding: 0 24px 22px; font-size: 16px; } @media (max-width: 900px) { .faq-raster { grid-template-columns: 1fr; gap: 36px; } .faq-raster .kopfzeile { position: static; } } .schluss { padding-block: 130px 120px; } .schluss h2 { font-size: clamp(44px, 7.4vw, 108px); letter-spacing: -0.055em; line-height: .93; } .schluss h2 > span { display: block; } .schluss-unten { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-top: 48px; flex-wrap: wrap; } .schluss p { color: var(--b-text-2); font-size: 19px; max-width: 46ch; } .schluss-aktionen { display: flex; gap: 12px; flex-wrap: wrap; } .schluss-mail { margin-top: 18px; color: var(--b-text-2); font-size: 15px; } .schluss-mail a { color: var(--b-text); } .fuss { padding: 70px 0 56px; font-size: 14.5px; color: var(--text-2); } .fuss .huelle { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } .fuss .logo { color: var(--text); } .fuss-mail { margin-top: 20px; } .fuss h4, .fuss .fuss-titel { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--text); font-family: var(--schrift); letter-spacing: 0; line-height: 1.4; } .fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .fuss a { color: var(--text-2); text-decoration: none; } .fuss p a, .nl-klein a { text-decoration: underline; } .fuss a:hover { color: var(--text); text-decoration: underline; } .fuss-marken { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); border-top: 1px solid var(--linie); padding-top: 24px; } @media (max-width: 760px) { .fuss .huelle { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fuss .huelle > :first-child { grid-column: 1 / -1; } } .recht { padding: 140px 0 96px; } .recht .huelle { max-width: 820px; } .recht h1 { font-family: var(--display); font-weight: 720; letter-spacing: -0.045em; font-size: clamp(40px, 5vw, 62px); line-height: 1; margin-bottom: 14px; } .recht .stand { color: var(--text-3); font-size: 15px; margin-bottom: 28px; } .recht h2 { font-family: var(--schrift); font-size: 22px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; margin: 44px 0 12px; } .recht p, .recht li { color: var(--text-2); font-size: 16.5px; } .recht p + p { margin-top: 12px; } .recht ul, .recht ol { padding-left: 22px; display: grid; gap: 6px; margin: 12px 0; } .recht .luecke { background: var(--hinweis); color: var(--hinweis-text); border-radius: 4px; padding: 0 4px; } .entwurf { display: flex; gap: 12px; align-items: flex-start; background: var(--hinweis); border: 1px solid var(--hinweis-linie); color: var(--hinweis-text); border-radius: 16px; padding: 14px 18px; font-size: 15.5px; margin-bottom: 36px; } .entwurf .symbol { font-size: 22px; margin-top: 1px; } .hero-weiter { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--b-text-2); font-size: 15px; text-decoration: none; } .hero-weiter:hover { color: var(--b-text); } .hero-weiter .symbol { font-size: 16px; transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .hero-weiter:hover .symbol { transform: translateY(3px); } .hero-kurz .hero-inhalt { max-width: 900px; padding-bottom: 40px; } .hero-kurz h1 { font-size: clamp(40px, 6.2vw, 88px); } .faelle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: fall; } .fall-karte { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 30px 28px 32px; counter-increment: fall; } .fall-karte::before { content: counter(fall, decimal-leading-zero); position: absolute; top: 24px; right: 24px; font-family: var(--mono); font-size: 13px; color: var(--text-3); } .fall-karte > .symbol { font-size: 30px; color: var(--marke-text); margin-bottom: 20px; } .fall-karte h3 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; line-height: 1.08; } .fall-karte p { margin-top: 14px; color: var(--text-2); font-size: 16px; } .faelle-schluss { margin-top: 28px; display: flex; gap: 14px; align-items: flex-start; max-width: 760px; font-size: 20px; line-height: 1.5; color: var(--text); } .faelle-schluss .symbol { font-size: 26px; color: var(--marke-text); margin-top: 3px; } @media (max-width: 900px) { .faelle { grid-template-columns: 1fr; } .faelle-schluss { font-size: 18px; } } .gruender { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 28px; padding: 44px; } .gruender h2 { font-size: clamp(30px, 3.6vw, 46px); } .gruender-bild img, .gruender-platz { width: 260px; height: 260px; border-radius: 24px; object-fit: cover; } .gruender-platz { display: grid; place-items: center; background: radial-gradient(80% 80% at 30% 20%, rgb(61 155 255 / .5), transparent 70%), var(--b-grund); color: var(--b-text); font-family: var(--display); font-weight: 750; font-size: 72px; letter-spacing: -0.05em; } .gruender-text { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--text-2); max-width: 60ch; } .gruender-name { margin-top: 22px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .gruender-name strong { font-size: 17px; font-weight: 640; } .gruender-name span { color: var(--text-3); font-size: 15px; } .gruender-draht { margin-top: 8px; font-size: 15px; color: var(--text-2); } @media (max-width: 760px) { .gruender { grid-template-columns: 1fr; padding: 28px; gap: 28px; } .gruender-bild img, .gruender-platz { width: 160px; height: 160px; font-size: 48px; border-radius: 20px; } } .rechner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); grid-template-areas: 'kopf ergebnis' 'eingaben ergebnis'; gap: 20px 40px; align-items: start; } .rechner-kopf { grid-area: kopf; } .rechner-kopf h2 { font-size: clamp(34px, 4.4vw, 56px); } .rechner-kopf p { margin-top: 16px; font-size: 19px; color: var(--text-2); max-width: 46ch; } .rechner-eingaben { grid-area: eingaben; display: grid; gap: 22px; margin-top: 10px; } .rechner-feld { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; font-size: 15.5px; color: var(--text-2); } .rechner-feld output { font-family: var(--mono); font-weight: 600; color: var(--text); font-size: 16px; min-width: 4ch; text-align: right; } .rechner-feld input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--marke); height: 28px; cursor: pointer; } .rechner-ergebnis { grid-area: ergebnis; border-radius: 28px; padding: 40px 36px; color: var(--b-text); background: radial-gradient(80% 90% at 100% 0%, var(--b-licht), transparent 70%), var(--b-grund); border: 1px solid var(--linie); } .rechner-zahl { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .rechner-zahl strong { font-family: var(--display); font-size: clamp(64px, 8vw, 104px); font-weight: 750; letter-spacing: -0.06em; line-height: .95; color: var(--marke-text); font-variant-numeric: tabular-nums; } .rechner-zahl span { font-size: 19px; color: var(--b-text-2); } .rechner-ergebnis > p:not(.rechner-zahl) { margin-top: 14px; font-size: 17px; color: var(--b-text-2); } .rechner-tage { color: var(--b-text) !important; font-weight: 580; } .rechner-hinweis { font-size: 13.5px !important; opacity: .75; border-top: 1px solid var(--b-linie); padding-top: 14px; margin-top: 22px !important; } @media (max-width: 900px) { .rechner { grid-template-columns: 1fr; grid-template-areas: 'kopf' 'eingaben' 'ergebnis'; } .rechner-ergebnis { padding: 30px 26px; } } .preise-kopf { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; } .abrechnung { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); gap: 2px; } .abrechnung button { font: inherit; font-size: 14.5px; font-weight: 580; padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color .2s, color .2s; } .abrechnung button.an { background: var(--marke); color: #fff; } .abrechnung em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gut) 18%, transparent); color: var(--gut); } .abrechnung button.an em { background: rgb(255 255 255 / .2); color: #fff; } .stufen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stufe-preis em { font-style: normal; display: none; } .jahr .stufe-preis em { display: inline; } .stufe-anbindung { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--marke-weich); color: var(--marke-text); font-size: 13.5px; line-height: 1.45; display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; } .stufe-beliebt .stufe-anbindung { background: var(--b-glas); color: var(--b-text); } .stufe-anbindung .symbol { font-size: 16px; margin-top: 2px; } .apps-klapp { margin-top: 90px; border-top: 1px solid var(--linie); padding-top: 32px; } .apps-klapp summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .apps-klapp summary::-webkit-details-marker { display: none; } .apps-klapp .apps-kopf { margin: 0; } .apps-klapp .apps-titel { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.045em; line-height: 1; } .apps-klapp .apps-text { display: block; margin-top: 12px; color: var(--text-2); } .apps-klapp summary .knopf .symbol { transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .apps-klapp[open] summary .knopf .symbol { transform: rotate(180deg); } .apps-klapp .apps { margin-top: 32px; } @media (max-width: 1100px) { .stufen-3 { grid-template-columns: 1fr; max-width: 520px; } } .gruendung { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; border-radius: 32px; padding: 56px; color: var(--b-text); background: radial-gradient(60% 70% at 0% 0%, var(--b-licht), transparent 70%), radial-gradient(50% 60% at 100% 100%, var(--b-licht-2), transparent 70%), var(--b-grund); border: 1px solid var(--linie); } .gruendung-kopf h2 { font-size: clamp(38px, 5vw, 66px); margin-top: 24px; } .gruendung-kopf h2 > span { display: block; } .gruendung-kopf > p:not(.hero-pille) { margin-top: 20px; font-size: 19px; color: var(--b-text-2); max-width: 44ch; } .gruendung-kopf .hero-pille { margin-bottom: 0; } .gruendung-balken { height: 8px; border-radius: 999px; background: var(--b-linie-stark); margin: 28px 0 26px; overflow: hidden; } .gruendung-balken i { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: var(--marke); } .gruendung-vorteile { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .gruendung-vorteile li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 18px; padding: 20px 22px; border-radius: 20px; background: var(--b-glas); border: 1px solid var(--b-linie); } .gruendung-vorteile .symbol { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 13px; background: var(--marke); color: #fff; } .gruendung-vorteile h3 { font-size: 17px; } .gruendung-vorteile p { color: var(--b-text-2); font-size: 15px; } @media (max-width: 900px) { .gruendung { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; } } .schluss-kopf { max-width: 760px; } .schluss-kopf > p:not(.schluss-mail) { margin-top: 26px; color: var(--b-text-2); font-size: 19px; max-width: 46ch; } .anfrage { margin-top: 44px; background: var(--b-glas); border: 1px solid var(--b-linie-stark); border-radius: 28px; padding: 32px; display: grid; gap: 24px; backdrop-filter: blur(10px); } .anfrage fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; } .anfrage legend { font-size: 14px; color: var(--b-text-2); margin-bottom: 12px; } .anfrage-art label { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--b-linie-stark); background: var(--b-feld); cursor: pointer; font-size: 15px; font-weight: 560; } .anfrage-art label:has(input:checked) { background: var(--marke); border-color: var(--marke); color: #fff; } .anfrage-art label:has(input:focus-visible) { outline: 2px solid var(--marke-hell); outline-offset: 3px; } .anfrage-art input { position: absolute; opacity: 0; width: 1px; height: 1px; } .anfrage-art label::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--b-text-2); flex: none; } .anfrage-art label:has(input:checked)::before { border-color: #fff; background: radial-gradient(circle, #fff 45%, transparent 50%); } .anfrage-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } .anfrage-felder label { display: grid; gap: 8px; font-size: 14px; color: var(--b-text-2); } .anfrage-felder input, .anfrage-felder select { font: inherit; font-size: 16px; color: var(--b-text); background: var(--b-feld); border: 1px solid var(--b-linie-stark); border-radius: 14px; padding: 13px 16px; width: 100%; min-height: 50px; } .anfrage-felder select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23aab6cc'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 01-11.32 0l-80-80a8 8 0 0111.32-11.32L128 164.69l74.34-74.35a8 8 0 0111.32 11.32z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; } .anfrage-felder select option { color: #0b1322; background: #fff; } .anfrage-felder input::placeholder { color: var(--text-3); opacity: .7; } .anfrage-felder input:focus-visible, .anfrage-felder select:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; border-color: var(--marke-hell); } .anfrage-felder input[aria-invalid="true"] { border-color: #ff7b7b; } .anfrage-honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .anfrage-fuss { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .anfrage-recht { font-size: 13.5px; color: var(--b-text-2); max-width: 52ch; } .anfrage-recht a { color: var(--b-text); } .anfrage button[disabled] { opacity: .6; cursor: progress; } .anfrage-meldung { display: none; padding: 14px 18px; border-radius: 14px; font-size: 15.5px; background: var(--b-glas); border: 1px solid var(--b-linie-stark); } .anfrage-meldung.an { display: block; } .anfrage-meldung.gut { background: color-mix(in srgb, var(--gut) 18%, transparent); border-color: color-mix(in srgb, var(--gut) 40%, transparent); } .anfrage-meldung.schlecht { background: rgb(255 90 90 / .14); border-color: rgb(255 120 120 / .4); } .anfrage-meldung strong { display: block; margin-bottom: 4px; } .anfrage-meldung a { color: var(--b-text); } .anfrage.fertig .anfrage-art, .anfrage.fertig .anfrage-felder, .anfrage.fertig .anfrage-fuss { display: none; } @media (max-width: 640px) { .anfrage { padding: 22px 18px; } .anfrage-felder { grid-template-columns: 1fr; } } .v-legende { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); } .v-legende li { display: inline-flex; align-items: center; gap: 8px; } .v-legende .symbol { font-size: 20px; } .v-legende li:nth-child(1) .symbol { color: var(--gut); } .v-legende li:nth-child(2) .symbol { color: #d99a1b; } .v-legende li:nth-child(3) .symbol { color: #d9484a; } .v-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--rand)); padding: 0 var(--rand); } .vergleich { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 960px; font-size: 15px; } .vergleich th, .vergleich td { text-align: left; vertical-align: top; padding: 18px 16px; border-bottom: 1px solid var(--linie); } .vergleich thead th { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; padding-bottom: 14px; border-bottom: 2px solid var(--linie-stark); } .vergleich thead th .logo { color: var(--text); } .vergleich thead th .logo img { width: 30px; height: 30px; } .vergleich thead th .logo svg { height: 19px; } .vergleich tbody th { font-weight: 600; color: var(--text); width: 17%; } .vergleich td { color: var(--text-2); width: 20.75%; } .vergleich td > span:last-child { display: block; } .v-zeichen { display: inline-flex; margin-bottom: 8px; font-size: 22px; } .v-ja .v-zeichen { color: var(--gut); } .v-teils .v-zeichen { color: #d99a1b; } .v-nein .v-zeichen { color: #d9484a; } .vergleich .v-wir { background: var(--marke-weich); } .vergleich td.v-wir { color: var(--text); } .vergleich thead th.v-wir { border-radius: 16px 16px 0 0; } .vergleich tbody tr:last-child td.v-wir { border-radius: 0 0 16px 16px; } .fazit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .fazit li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 26px; } .fazit h3 { font-size: 20px; margin-bottom: 10px; } .fazit p { font-size: 15.5px; color: var(--text-2); } .fazit li.fazit-wir { background: var(--marke); border-color: var(--marke); color: #fff; } .fazit li.fazit-wir p { color: rgb(255 255 255 / .86); } .quellen-titel { margin-top: 56px; font-size: 17px; } .v-quellen { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 14.5px; color: var(--text-2); } .v-quellen span { color: var(--text-3); font-size: 13px; word-break: break-all; } @media (max-width: 1000px) { .fazit { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .fazit { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: no-preference) { .zeigen.warte { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 80ms); } .zeigen.warte.da { opacity: 1; transform: none; } .hero-inhalt > * { animation: rein .9s cubic-bezier(.16, 1, .3, 1) both; } .hero-inhalt > :nth-child(2) { animation-delay: .08s; } .hero-inhalt > :nth-child(3) { animation-delay: .16s; } .komposition { animation: rein-bild 1.2s cubic-bezier(.16, 1, .3, 1) .2s both; } .widget { animation: rein-widget 1s cubic-bezier(.16, 1, .3, 1) .7s both; } @keyframes rein { from { opacity: 0; transform: translateY(24px); } } @keyframes rein-bild { from { opacity: 0; transform: translateY(70px); } } @keyframes rein-widget { from { opacity: 0; transform: translateY(40px) scale(.96); } } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @media (max-width: 1180px) and (min-width: 441px) { .anmelden span { display: none; } .anmelden { padding: 9px 11px; } } .nl-karte { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 44px 48px; box-shadow: var(--schatten); } .nl-kopf h2 { font-family: var(--display); font-weight: 720; letter-spacing: -0.04em; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.02; } .nl-kopf p { color: var(--text-2); font-size: 17px; margin-top: 14px; max-width: 40ch; } .nl-form { display: grid; gap: 14px; } .nl-zeile { display: flex; gap: 10px; } .nl-zeile input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--text); background: var(--flaeche-2); border: 1px solid var(--linie-stark); border-radius: 999px; padding: 14px 20px; } .nl-zeile input::placeholder { color: var(--text-3); } .nl-zeile input:focus-visible { outline: 2px solid var(--marke); outline-offset: 1px; border-color: transparent; } .nl-zeile .knopf:disabled { opacity: .6; cursor: default; } .nl-einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--text-2); cursor: pointer; } .nl-einwilligung input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--marke); } .nl-klein { font-size: 13px; color: var(--text-3); } .nl-klein a { color: var(--marke-text); } .nl-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .nl-status { font-size: 15px; color: var(--text-2); } .nl-status:empty { display: none; } .nl-status[data-art="ok"] { color: var(--gut); } .nl-status[data-art="fehler"] { color: #d0402f; } .nl-form.fertig .nl-zeile, .nl-form.fertig .nl-einwilligung, .nl-form.fertig .nl-klein { display: none; } @media (max-width: 860px) { .nl-karte { grid-template-columns: 1fr; gap: 26px; padding: 30px 24px; } } @media (max-width: 480px) { .nl-zeile { flex-direction: column; } } .nl-fuss { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; border-top: 1px solid var(--linie); padding-top: 32px; } .nl-fuss p { margin: 0; } .nl-fuss .nl-form .knopf { padding: 13px 22px; font-size: 15px; } @media (max-width: 760px) { .nl-fuss { grid-template-columns: 1fr; gap: 16px; } } .szene [data-s] { transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); } .szene.spielt [data-s]:not(.da):not(.tippt) { opacity: 0; transform: translateY(10px); } .szene.spielt .w-n.ki.tippt { opacity: 1; transform: none; } .szene.spielt .w-n.ki.tippt > :not(.w-tippt) { opacity: 0; } .szene.spielt .w-n.ki.tippt .w-tippt { display: inline-flex; } .szene .w-tippt { display: none; position: absolute; left: 0; top: 0; margin: 0; border: 0; background: transparent; padding: 12px 14px; } @media (prefers-reduced-motion: reduce) { .szene [data-s] { transition: none; } .szene.spielt [data-s] { opacity: 1 !important; transform: none !important; } } .szene.chat { position: relative; } .szene.chat .widget-kopf .kanal-marke { margin-left: auto; } .szene.chat .widget-verlauf { height: auto; min-height: 300px; justify-content: flex-start; mask-image: none; -webkit-mask-image: none; gap: 9px; } .szene.chat .w-n { position: relative; } .szene.chat .w-n p { margin: 0; } .szene.chat .w-n.kunde { align-self: flex-end; } .szene.chat .w-n.ki { align-self: flex-start; padding-top: 8px; } .szene.chat .ki-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #0161b6; letter-spacing: .02em; margin-bottom: 3px; } .szene.chat .ki-label .symbol { font-size: 12px; } .szene.chat .uebersetzt { display: block; margin-top: 6px; font-size: 12px; color: #6a7488; line-height: 1.4; } .szene.chat .w-n.kunde .uebersetzt { color: rgb(255 255 255 / .8); } .szene.chat .uebersetzt .symbol { font-size: 12px; vertical-align: -2px; } .szene.chat .anhang { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: #f0f3f8; font-size: 12.5px; font-weight: 600; color: #0b1322; } .szene.chat .anhang .symbol { font-size: 16px; color: #d9484a; } .szene.chat .nachschlag { align-self: stretch; max-width: none; background: #fff; border: 1px dashed #c5cfdd; border-radius: 14px; padding: 10px 12px; font-size: 12.5px; } .szene.chat .nachschlag b { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #0161b6; margin-bottom: 6px; } .szene.chat .nachschlag dl { margin: 0; display: grid; gap: 3px; } .szene.chat .nachschlag dl div { display: grid; grid-template-columns: 84px 1fr; gap: 8px; } .szene.chat .nachschlag dt { color: #6a7488; } .szene.chat .nachschlag dd { margin: 0; font-family: var(--mono); font-size: 12px; color: #0b1322; word-break: break-all; } .szene.chat .geprueft { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 12px; font-weight: 600; color: #0b6b40; } .szene.chat .w-n.system { align-self: center; } .szene.chat .w-n.system.warn { color: #8a1c1c; background: #fde3e3; } .szene.chat .w-n.uebergabe { align-self: stretch; max-width: none; background: #fff4e0; border: 1px solid #f2d59a; color: #5a4509; border-radius: 14px; font-size: 13px; } .szene.chat .uebergabe b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .szene.chat .uebergabe > span { display: block; margin-top: 3px; } .szene.chat .uebergabe ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; } .szene.chat .w-n.notiz { align-self: flex-end; background: #fff8d6; border: 1px solid #ecd28a; color: #5a4509; font-size: 13px; } .szene.chat .notiz small, .szene.chat .team small { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; margin-bottom: 2px; } .szene.chat .w-n.team { align-self: flex-end; background: var(--marke); color: #fff; border-bottom-right-radius: 5px; } .szene.chat .team small { color: rgb(255 255 255 / .82); } .szene.chat .w-n.team .uebersetzt { color: rgb(255 255 255 / .82); } .szene.chat .w-n.uebersetzung { align-self: flex-end; background: #eef2f8; color: #0b1322; font-size: 13.5px; } .szene.chat .kanal-marke { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / .18); margin-bottom: 4px; } .szene.chat .w-n .kanal-marke { background: rgb(0 0 0 / .14); } .kanal-marke .symbol { font-size: 12px; } .szene.chat.klein { font-size: 13.5px; } .szene.chat.klein .widget-verlauf { min-height: 0; padding: 12px; } .fluss-szene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 1.2fr) auto minmax(60px, 1.2fr) minmax(0, 1fr); align-items: center; gap: 0; } .fluss-knoten { display: grid; gap: 8px; } .fk { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--flaeche-2); border: 1px solid var(--linie); min-width: 0; } .fk strong { display: block; font-size: 15.5px; line-height: 1.2; } .fk span { font-size: 12.5px; color: var(--text-3); } .fluss-knoten.wir .fk { background: var(--marke); border-color: var(--marke); color: #fff; box-shadow: 0 20px 44px -16px rgb(1 109 202 / .9); } .fluss-knoten.wir .fk span { color: rgb(255 255 255 / .82); } .fluss-knoten.wir img { width: 44px; height: 44px; } .fluss-szene .leitung { position: relative; height: 2px; margin: 0 14px; background: repeating-linear-gradient(90deg, var(--linie-stark) 0 6px, transparent 6px 12px); min-height: 2px; overflow: visible; } .fluss-szene .leitung em { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--marke-text); white-space: nowrap; } .fluss-szene .chip { position: absolute; left: 0; top: calc(50% - 13px); transform: translateX(var(--weg, 0)) translateX(-100%); white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--marke-hell); color: var(--marke-text); font-size: 12px; font-weight: 600; box-shadow: 0 6px 16px -8px rgb(1 109 202 / .8); margin-top: calc(var(--n, 0) * -30px); } .fluss-szene .chip::before { content: ''; position: absolute; left: -10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--marke-hell); opacity: 0; } .fluss-szene.spielt .chip { transition: none; } .fluss-szene.spielt .chip:not(.da) { opacity: 0; transform: translateX(0); } .fluss-szene.spielt .chip.da { animation: chip-lauf 1.4s cubic-bezier(.3, .7, .3, 1) both; } @keyframes chip-lauf { from { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } to { opacity: 1; transform: translateX(var(--weg, 0)) translateX(-100%); } } @media (max-width: 860px) { .fluss-szene { grid-template-columns: 1fr; gap: 0; } .fluss-szene .leitung { position: relative; height: auto; min-height: 72px; margin: 0; padding: 14px 0 14px 60px; background: none; display: flex; flex-wrap: wrap; align-content: center; gap: 6px; } .fluss-szene .leitung::before { content: ''; position: absolute; left: 36px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--linie-stark) 0 6px, transparent 6px 12px); } .fluss-szene .leitung em { position: static; transform: none; width: 100%; margin-bottom: 2px; } .fluss-szene .chip { position: static; transform: none !important; margin: 0; animation: none !important; } .fluss-szene.spielt .chip:not(.da) { opacity: 0; } } .fluss-knoten.mehrere .fk { padding: 8px 12px 8px 8px; } .fluss-knoten.mehrere .fk strong { font-size: 14px; } .akte-szene { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 22px; padding: 22px; box-shadow: var(--schatten); font-size: 14.5px; } .akte-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); } .akte-kopf .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--marke); color: #fff; font-weight: 600; font-size: 14px; } .akte-kopf strong { display: block; font-size: 16px; } .akte-kopf div > span { font-size: 13px; color: var(--text-3); } .akte-quelle { margin-left: auto; margin-right: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--marke-text); background: var(--marke-weich); padding: 4px 10px; border-radius: 999px; } .akte-felder { margin: 14px 0 0; display: grid; gap: 8px; } .akte-felder div { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: 12px; } .akte-felder dt { color: var(--text-3); } .akte-felder dd { margin: 0; color: var(--text); font-weight: 560; overflow-wrap: anywhere; } .akte-auftraege { margin-top: 18px; border-top: 1px solid var(--linie); padding-top: 14px; display: grid; gap: 8px; } .akte-auftraege > b { font-size: 12.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; } .akte-auftrag { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--flaeche-2); } .akte-auftrag .nr { font-family: var(--mono); font-weight: 600; } .akte-auftrag .status { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--flaeche); color: var(--text-2); border: 1px solid var(--linie); } .akte-auftrag .status.gut { color: #0b6b40; background: #dff6ea; border-color: transparent; } .akte-auftrag .status.warn { color: #8a1c1c; background: #fde3e3; border-color: transparent; } .akte-auftrag .datum { color: var(--text-3); font-size: 13px; text-align: right; } .akte-auftrag .sendung { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--marke-text); } .akte-szene .nochmal { position: absolute; right: 18px; top: 18px; border: 0; background: var(--marke-weich); color: var(--marke-text); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 16px; } .wechsel-stapel { display: grid; } .wechsel-stapel .wechsel-var { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; } .wechsel-stapel .wechsel-var:not(.da) { opacity: 0; } .wechsel-szene [data-s] { transition: opacity .35s ease, transform .4s cubic-bezier(.2, .8, .2, 1); } .schritt-szene .symbol-rund { position: relative; } .schritt-szene .haken { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--gut); color: #fff; display: grid; place-items: center; font-size: 13px; box-shadow: 0 0 0 3px var(--grund); transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .schritt-szene.spielt li:not(.da) .haken { transform: scale(0); } .schritt-bild { margin: 16px 0 0; } .schritt-bild img, .schritt-bild .platzhalter-bild { width: 100%; border-radius: 12px; border: 1px solid var(--linie); } .platzhalter-bild { aspect-ratio: 4 / 3; display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--flaeche-2) 0 10px, var(--flaeche) 10px 20px); color: var(--text-3); font-size: 13px; text-align: center; padding: 12px; } .menue { position: relative; display: inline-flex; align-items: center; gap: 2px; } .menue-pfeil { border: 0; background: transparent; color: inherit; opacity: .7; cursor: pointer; padding: 4px; display: inline-grid; place-items: center; font-size: 12px; border-radius: 50%; } .menue-pfeil:hover { opacity: 1; } .menue-liste { position: absolute; left: -12px; top: calc(100% + 18px); min-width: 300px; padding: 10px; border-radius: 18px; background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); box-shadow: var(--schatten); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s .25s; } .menue::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 22px; } .menue.offen .menue-liste, .menue:hover .menue-liste, .menue:focus-within .menue-liste { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .menue-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .menue-liste li a { display: flex !important; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; opacity: 1 !important; font-size: 15px; } .menue-liste li a:hover, .menue-liste li a[aria-current] { background: var(--flaeche-2); } .menue-alle { display: flex !important; align-items: center; gap: 6px; margin-top: 6px; padding: 10px 10px 6px; border-top: 1px solid var(--linie); font-weight: 600; opacity: 1 !important; color: var(--marke-text) !important; } .menue-alle .symbol { font-size: 15px; } .logo-kachel { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; border: 1px solid var(--linie); flex: none; overflow: hidden; } .logo-kachel img { width: 34px; height: 34px; object-fit: contain; } .logo-kachel.klein { width: 36px; height: 36px; border-radius: 10px; } .logo-kachel.klein img { width: 22px; height: 22px; } .logo-kachel.symbolisch { background: var(--marke-weich); color: var(--marke-text); font-size: 28px; } .logo-kachel.klein.symbolisch { font-size: 19px; } .logo-kachel.platzhalter { background: var(--flaeche-2); color: var(--text-2); font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.03em; } .logo-kachel.talkward { background: var(--marke); border-color: var(--marke); } .logo-kachel.whatsapp { background: #eafaf0; } .logo-kachel.appicon img { width: 56px; height: 56px; } .logo-kachel.klein.appicon img { width: 36px; height: 36px; }  .logo-kachel.amazon img { width: 100%; height: 100%; } @media (prefers-color-scheme: dark) { .logo-kachel { background: #f7f9fc; } .logo-kachel.symbolisch { background: var(--marke-weich); } .logo-kachel.platzhalter { background: var(--flaeche-2); } } .brotkrumen { margin-bottom: 22px; font-size: 14px; color: var(--b-text-2); } .brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .brotkrumen li + li::before { content: '›'; margin-right: 6px; opacity: .6; } .brotkrumen a { color: inherit; text-decoration: none; } .brotkrumen a:hover { color: var(--b-text); text-decoration: underline; } .brotkrumen [aria-current] { color: var(--b-text); font-weight: 560; } .vertrauen { list-style: none; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; color: var(--text-2); } .vertrauen li { display: inline-flex; align-items: center; gap: 7px; } .vertrauen .symbol { font-size: 17px; color: var(--marke-text); } .fuss-vertrauen { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text-3); } .fuss-vertrauen span::before { content: '✓ '; color: var(--gut); } .fuss .huelle { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } .fuss h4 a { color: var(--text); } .fuss-recht-titel { margin-top: 22px !important; } @media (max-width: 960px) { .fuss .huelle { grid-template-columns: 1fr 1fr; } .fuss .huelle > :first-child { grid-column: 1 / -1; } } .hero-integration { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; padding-bottom: 60px; } .hero-integration h1 { font-size: clamp(38px, 5vw, 68px); } .hero-integration .hero-unten { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; } .hero-integration .hinweis { margin: 0; } .partner-kachel { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; } .partner-kachel .mal { font-family: var(--display); font-size: 22px; color: var(--b-text-2); } .partner-name { margin-left: 8px; font-size: 14.5px; font-weight: 600; color: var(--b-text-2); } .hero-szene .szene.chat { position: relative; right: auto; bottom: auto; width: auto; max-width: 440px; margin: 0 0 0 auto; } @media (max-width: 960px) { .hero-integration { grid-template-columns: 1fr; gap: 40px; } .hero-szene .szene.chat { margin: 0 auto; } } .steckbrief { margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .steckbrief div { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 18px 20px; } .steckbrief dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; } .steckbrief dd { margin: 0; font-size: 15px; color: var(--text-2); } .fakten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; } @media (max-width: 1000px) { .fakten-4 { grid-template-columns: 1fr 1fr; } .steckbrief { grid-template-columns: 1fr; } } @media (max-width: 640px) { .fakten-4 { grid-template-columns: 1fr; } } .akte-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; } .felder-pillen { margin-top: 20px; padding: 0; } .akte-bild { margin: 22px 0 0; } .akte-bild img { border-radius: 14px; border: 1px solid var(--linie); box-shadow: var(--schatten); max-width: min(360px, 100%); } .akte-bild figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-3); } .wechsel-halter { margin-top: 28px; } @media (max-width: 900px) { .akte-raster { grid-template-columns: minmax(0, 1fr); gap: 32px; } } .vergleich-klein { min-width: 640px; } .vergleich-klein tbody th { width: 26%; } .vergleich-klein td { width: 37%; } .v-stand { margin-top: 16px; font-size: 13.5px; color: var(--text-3); } .betrag-klein strong { font-size: 40px !important; } .preis-text { margin-top: 14px; color: var(--b-text-2); font-size: 16px; } .kacheln-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .kacheln-raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } .int-kachel { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 18px; align-items: start; height: 100%; padding: 22px; border-radius: var(--r-karte); background: var(--flaeche); border: 1px solid var(--linie); color: var(--text); text-decoration: none; transition: border-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); } .int-kachel:hover { border-color: var(--linie-stark); transform: translateY(-2px); } .int-kachel > .symbol { font-size: 20px; color: var(--text-3); transition: transform .25s; align-self: center; } .int-kachel:hover > .symbol { transform: translateX(3px); color: var(--marke-text); } .int-kachel-text { display: grid; gap: 4px; font-size: 15px; color: var(--text-2); } .int-kachel-text strong { font-size: 17px; color: var(--text); } .int-kachel-text .typ { font-size: 12.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; } .int-kachel-text .typ em { font-style: normal; color: var(--marke-text); } .int-meta { display: grid; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); font-size: 13.5px; color: var(--text-3); } .int-kachel.alle { background: var(--marke-weich); border-color: transparent; } .kacheln-raster li[hidden] { display: none; } @media (max-width: 1000px) { .kacheln-raster.drei { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .kacheln-raster, .kacheln-raster.drei { grid-template-columns: 1fr; } .int-kachel { padding: 18px; gap: 14px; } } .filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .filter button { font: inherit; font-size: 14.5px; font-weight: 580; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text-2); cursor: pointer; } .filter button.an { background: var(--marke); border-color: var(--marke); color: #fff; } .fehlt { margin-top: 28px; } .hero h1.hero-h1 { font-size: clamp(30px, 3.2vw, 40px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; color: var(--b-text-2); margin-bottom: 14px; } .hero h1.hero-h1 > span { display: inline; } .hero-slogan { font-family: var(--display); font-weight: 760; letter-spacing: -0.055em; line-height: .92; font-size: clamp(44px, 7.8vw, 114px); text-wrap: balance; } .hero-slogan > span { display: block; } .quellen-raster { margin-top: 28px; } .quellen-alle { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 600; text-decoration: none; } .quellen-alle .symbol { transition: transform .25s; } .quellen-alle:hover .symbol { transform: translateX(3px); } .k-whatsapp { grid-column: span 3; } .k-hosting.halb { grid-column: span 3; } .kachel-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font-weight: 600; font-size: 15px; text-decoration: none; } .kachel-link .symbol { font-size: 16px; } .app .app-status { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--marke-weich); color: var(--marke-text); font-size: 11.5px; font-weight: 600; vertical-align: middle; } @media (max-width: 1000px) { .k-whatsapp, .k-hosting.halb { grid-column: span 2; } } @media (max-width: 640px) { .k-whatsapp, .k-hosting.halb { grid-column: auto; } } .int-kachel-text strong { overflow-wrap: anywhere; } .int-kachel-text .nw { white-space: normal; } .szene.chat .widget-kopf div { min-width: 0; } .szene.chat .widget-kopf div > span { display: block; white-space: normal; } .szene.chat .widget-kopf div > span::before { display: inline-block; margin-right: 6px; vertical-align: 1px; } .vergleich-breit { min-width: 2100px; } .vergleich-breit tbody th { position: sticky; left: 0; background: var(--grund); z-index: 1; width: 200px; box-shadow: 1px 0 0 var(--linie); } .vergleich-breit thead th:first-child { position: sticky; left: 0; background: var(--grund); z-index: 2; } .vergleich-breit td { width: auto; min-width: 200px; font-size: 14px; } .fazit-viele { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fazit-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fazit .punkte { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; } .fazit .punkte li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; background: transparent; border: 0; border-radius: 0; padding: 0; color: inherit; } .fazit .punkte .symbol { margin-top: 4px; } .fazit .punkte .symbol { color: var(--marke-text); } .fazit-wir .punkte .symbol { color: #fff; } .v-einzeln { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .v-einzeln a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; font-weight: 600; font-size: 15px; } @media (max-width: 1000px) { .fazit-viele { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .fazit-viele, .fazit-2 { grid-template-columns: 1fr; } } .artikel { padding: 140px 0 60px; } .artikel-huelle { max-width: 1100px; } .artikel-kopf { max-width: 760px; } .artikel-kopf h1 { font-family: var(--display); font-weight: 720; letter-spacing: -0.045em; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.02; } .artikel-kopf .brotkrumen { color: var(--text-3); } .artikel-kopf .brotkrumen [aria-current], .artikel-kopf .brotkrumen a:hover { color: var(--text); } .artikel-lead { margin-top: 20px; font-size: 20px; line-height: 1.5; color: var(--text-2); } .artikel-meta { margin-top: 18px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14.5px; color: var(--text-3); } .artikel-meta .symbol { font-size: 17px; } .entwurf-marke { font-style: normal; padding: 2px 9px; border-radius: 999px; background: var(--hinweis); color: var(--hinweis-text); border: 1px solid var(--hinweis-linie); font-size: 12.5px; } .artikel-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; margin-top: 48px; align-items: start; } .artikel-text { max-width: 720px; font-size: 17.5px; line-height: 1.65; } .artikel-text h2 { font-family: var(--schrift); font-size: 26px; font-weight: 680; letter-spacing: -0.02em; line-height: 1.2; margin: 44px 0 12px; } .artikel-text p + p { margin-top: 14px; } .artikel-text ul, .artikel-text ol { padding-left: 22px; display: grid; gap: 8px; margin: 14px 0; } .artikel-text section > p, .artikel-text li { color: var(--text-2); } .artikel-text li strong { color: var(--text); } .toc { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 20px 24px; font-size: 15px; } .toc strong { display: block; margin-bottom: 8px; } .toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .toc a { color: var(--text-2); text-decoration: none; } .toc a:hover { color: var(--marke-text); text-decoration: underline; } .artikel-text .faq details p { font-size: 16px; } .autor-box { margin-top: 48px; display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 24px; font-size: 15.5px; } .autor-box img { width: 96px; height: 96px; border-radius: 18px; object-fit: cover; } .autor-box strong { display: block; font-size: 17px; } .autor-box span { display: block; color: var(--text-3); font-size: 14px; } .autor-box p { margin-top: 10px; color: var(--text-2); } .autor-box a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; text-decoration: none; } .artikel-seite { position: sticky; top: 110px; } .cta-box { background: radial-gradient(80% 90% at 100% 0%, var(--b-licht), transparent 70%), var(--b-grund); color: var(--b-text); border: 1px solid var(--linie); border-radius: 22px; padding: 26px; display: grid; gap: 12px; } .cta-box strong { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; line-height: 1.1; } .cta-box p { color: var(--b-text-2); font-size: 15px; } .cta-box .knopf { justify-content: center; } .artikel-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .artikel-liste a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px; border-radius: var(--r-karte); background: var(--flaeche); border: 1px solid var(--linie); color: var(--text); text-decoration: none; transition: border-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); } .artikel-liste a:hover { border-color: var(--linie-stark); transform: translateY(-2px); } .artikel-liste .artikel-datum { font-size: 13.5px; color: var(--text-3); } .artikel-liste h3 { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; line-height: 1.1; } .artikel-liste p { color: var(--text-2); font-size: 15.5px; } @media (max-width: 960px) { .artikel-raster { grid-template-columns: 1fr; gap: 32px; } .artikel-seite { position: static; } .artikel-liste { grid-template-columns: 1fr; } } @media (max-width: 560px) { .autor-box { grid-template-columns: 1fr; } .artikel { padding-top: 110px; } } .burger { display: none; border: 0; background: transparent; color: inherit; width: 40px; height: 40px; border-radius: 50%; place-items: center; cursor: pointer; font-size: 24px; margin-left: 2px; } .burger .symbol-zu, .kopf.menue-auf .burger .symbol:not(.symbol-zu) { display: none; } .kopf.menue-auf .burger .symbol-zu { display: block; } .kopf .menue-mobil { display: none; } @media (max-width: 960px) { .burger { display: grid; } .kopf { pointer-events: none; } .kopf.menue-auf { pointer-events: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; inset: 0; padding-bottom: 16px; overflow: auto;background: color-mix(in srgb, var(--grund) 92%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding-top: 16px; } .kopf.menue-auf .kopf-innen { color: var(--text); background: var(--flaeche); border-color: var(--linie); box-shadow: var(--schatten); } .menue-mobil { display: none; pointer-events: auto; max-width: calc(var(--breite) - 20px); margin: 14px auto 0; padding: 8px 6px 16px; color: var(--text); } .kopf .menue-mobil:not([hidden]) { display: grid; gap: 2px; } .menue-mobil > a { display: block; padding: 14px 16px; border-radius: 14px; font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; color: var(--text); text-decoration: none; } .menue-mobil > a:hover { background: var(--flaeche); } .menue-mobil-titel { margin: 14px 16px 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); } .menue-mobil-titel a { color: inherit; text-decoration: none; } .menue-mobil ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .menue-mobil li a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; font-size: 17px; color: var(--text); text-decoration: none; } .menue-mobil li a:hover, .menue-mobil li a[aria-current] { background: var(--flaeche); } .menue-mobil .menue-alle { display: flex; align-items: center; gap: 6px; margin: 8px 16px 0; font-weight: 600; color: var(--marke-text); text-decoration: none; } .menue-mobil-knoepfe { display: grid; gap: 10px; margin: 22px 10px 0; } .menue-mobil-knoepfe .knopf { justify-content: center; } body.menue-offen { overflow: hidden; } } @media (max-width: 960px) { .burger { flex: none; } .kopf.menue-auf { background: color-mix(in srgb, var(--grund) 97%, transparent); } .menue-mobil { padding-bottom: 96px; } } @media (max-width: 600px) { .kopf .anmelden { display: none; } } .laufband-gruppe .logo-kachel { display: inline-grid; place-items: center; } .laufband-gruppe .logo-kachel img { width: 24px; height: 24px; } .hero-start { padding-bottom: 70px; align-items: center; } .hero-start .hero-slogan { font-size: clamp(40px, 5.4vw, 80px); } .hero-start h1.hero-h1 { font-size: clamp(24px, 2.3vw, 32px); } .hero-start .hero-unten { margin-top: 28px; } .hero-start .hero-szene .szene.chat { max-width: 460px; } @media (max-width: 960px) { .hero-start .hero-slogan { font-size: clamp(40px, 9vw, 64px); } } .posteingang-bild { margin: 0 0 44px; } .posteingang-bild img { display: block; width: 100%; height: auto; border-radius: var(--r-karte); border: 1px solid var(--linie); box-shadow: var(--schatten); } .posteingang-bild figcaption { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--text-3); max-width: 80ch; } .logo-kachel.app-logo { grid-row: span 3; width: 44px; height: 44px; border-radius: 13px; } .logo-kachel.app-logo img { width: 28px; height: 28px; } .logo-kachel.app-logo.appicon img { width: 44px; height: 44px; } .suche-knopf { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: inherit; opacity: .85; cursor: pointer; font-size: 20px; } .suche-knopf:hover { opacity: 1; background: rgb(127 127 127 / .14); } .suche { position: fixed; inset: 0; z-index: 60; background: rgb(4 9 21 / .45); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: 96px 16px 16px; } .suche[hidden] { display: none; } .suche-kasten { width: min(680px, 100%); background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 22px; box-shadow: var(--schatten); overflow: hidden; } .suche-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--linie); } .suche-kopf .symbol { font-size: 20px; color: var(--text-3); flex: none; } .suche-kopf input { flex: 1; min-width: 0; font: inherit; font-size: 17px; border: 0; outline: 0; background: transparent; color: inherit; padding: 8px 0; } .suche-kopf input::placeholder { color: var(--text-3); } .suche-zu { border: 0; background: var(--flaeche-2); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; } .suche-liste { list-style: none; margin: 0; padding: 8px; max-height: min(60vh, 520px); overflow: auto; } .suche-treffer { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 8px 10px; border-radius: 14px; text-decoration: none; color: inherit; } .suche-treffer:hover, .suche-treffer.aktiv { background: var(--marke-weich); } .suche-bild { width: 96px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--flaeche-2); border: 1px solid var(--linie); display: grid; place-items: center; flex: none; } .suche-bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .suche-bild.logo { width: 54px; height: 54px; border-radius: 14px; background: #fff; } .suche-bild.logo img { width: 32px; height: 32px; object-fit: contain; } .suche-bild.logo.appicon img { width: 54px; height: 54px; } .suche-bild img[src*="talkward-icon"], .logo-kachel.app-logo img[src*="talkward-icon"] { border-radius: 8px; } .suche-text { min-width: 0; } .suche-text b { display: block; font-weight: 620; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .suche-text small { font-size: 13px; color: var(--text-2); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .suche-treffer em { font-style: normal; font-size: 11.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } .suche-leer { padding: 20px 18px 22px; color: var(--text-2); font-size: 15px; } .suche-fuss { padding: 8px 18px 12px; font-size: 12.5px; color: var(--text-3); border-top: 1px solid var(--linie); } html.suche-auf { overflow: hidden; } @media (max-width: 600px) { .suche { padding: 12px; align-items: stretch; } .suche-kasten { border-radius: 18px; } .suche-liste { max-height: none; } .suche-bild { width: 72px; height: 40px; } .suche-bild.logo { width: 44px; height: 44px; } .suche-bild.logo.appicon img { width: 44px; height: 44px; } .suche-treffer em { display: none; } .suche-fuss { display: none; } } h2 .kicker, h1 .kicker { display: block; font-family: var(--schrift); font-size: 13.5px; font-weight: 640; letter-spacing: .09em; text-transform: uppercase; color: var(--marke-text); margin-bottom: 18px; line-height: 1.3; text-wrap: pretty; } .gruendung h2 .kicker, .demo-karte h2 .kicker, .rechner-kopf h2 .kicker { color: var(--marke-text); } @media (prefers-color-scheme: dark) { h2 .kicker { color: var(--marke-hell); } } @media (max-width: 760px) { h2 .kicker { margin-bottom: 14px; font-size: 12.5px; } } .weiter { margin-top: 36px; display: flex; justify-content: flex-end; } .weiter a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; padding: 12px 18px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text); } .weiter a:hover { border-color: var(--linie-stark); } .weiter a .symbol { font-size: 17px; color: var(--marke-text); transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .weiter a:hover .symbol { transform: translateX(3px); } .rechner-weiter { margin-top: 22px; } .rechner-weiter .knopf { padding: 12px 20px; font-size: 15px; } .gegenueber { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: fall; } .gegenueber-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 4px; } .gegenueber-kopf span { font-size: 13px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 0 4px 10px; display: inline-flex; align-items: center; gap: 8px; } .gegenueber-kopf span:last-child { color: var(--marke-text); } .gegenueber-kopf .symbol { font-size: 16px; } .gegenueber-kopf span::after { content: ''; flex: 1; height: 1px; background: var(--linie); margin-left: 8px; } .gegenueber-kopf span:last-child::after { background: color-mix(in srgb, var(--marke) 30%, transparent); } .gegen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; counter-increment: fall; } .gegen > div { position: relative; border-radius: var(--r-karte); padding: 26px 26px 28px 26px; } .gegen .ohne { background: var(--flaeche); border: 1px solid var(--linie); color: var(--text-2); } .gegen .mit { background: linear-gradient(180deg, var(--marke-weich), transparent 80%), var(--flaeche); border: 1px solid color-mix(in srgb, var(--marke) 28%, transparent); color: var(--text); } .gegen .ohne::before { content: counter(fall, decimal-leading-zero); position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 13px; color: var(--text-3); } .gegen h3 { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; line-height: 1.08; color: var(--text); margin-bottom: 12px; padding-right: 40px; display: flex; gap: 12px; align-items: flex-start; } .gegen h3 .symbol { flex: none; font-size: 24px; color: var(--marke-text); margin-top: 1px; } .gegen p { font-size: 16px; } .gegen .mit b { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--marke-text); margin-bottom: 12px; } .gegen .mit b .symbol { font-size: 15px; } .gegen .mit p { padding-left: 0; } @media (max-width: 760px) { .gegenueber-kopf { display: none; } .gegen { grid-template-columns: 1fr; gap: 8px; } .gegen > div { padding: 22px 20px; } .gegen .ohne b, .gegen .mit b { display: inline-flex; } .gegen .ohne b { color: var(--text-3); align-items: center; gap: 6px; font-size: 12.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; } .gegen .ohne b .symbol { font-size: 15px; } .gegen h3 { font-size: 22px; } } @media (min-width: 761px) { .gegen .ohne b { display: none; } } .band { margin: 0 10px; border-radius: 32px; background: var(--marke); color: #fff; position: relative; isolation: isolate; overflow: hidden; padding: 72px 0; } .band::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 80% at 100% 0%, rgb(255 255 255 / .18), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgb(0 0 0 / .18), transparent 70%); } .band::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgb(255 255 255 / .09) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .09) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(70% 80% at 50% 50%, #000 10%, transparent 80%); -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 10%, transparent 80%); } .band .kopfzeile { margin-bottom: 44px; } .band h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); } .band h2 .kicker { color: rgb(255 255 255 / .8); } .band .kopfzeile p { color: rgb(255 255 255 / .82); } .zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .zahlen li { padding: 26px 26px 24px; border-radius: 20px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(4px); display: grid; gap: 6px; align-content: start; } .zahlen strong { font-family: var(--display); font-weight: 750; font-size: clamp(44px, 4.6vw, 64px); letter-spacing: -0.05em; line-height: .95; font-variant-numeric: tabular-nums; } .zahlen strong small { font-size: .5em; letter-spacing: -0.02em; margin-left: 4px; vertical-align: .2em; } .zahlen span { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; } .zahlen p { font-size: 14.5px; color: rgb(255 255 255 / .8); } @media (max-width: 960px) { .zahlen { grid-template-columns: 1fr 1fr; } .band { padding: 56px 0; } } @media (max-width: 560px) { .zahlen { grid-template-columns: 1fr; } .band { margin: 0 6px; border-radius: 24px; padding: 44px 0; } .zahlen li { padding: 20px; } } .band-abschnitt { padding: 0 0 150px; } @media (max-width: 760px) { .band-abschnitt { padding-bottom: 100px; } } .faelle-zeilen { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--linie); } .faelle-zeilen .fall-karte { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr); gap: 8px 32px; align-items: start; background: transparent; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; padding: 30px 0; } .faelle-zeilen .fall-karte::before { position: static; grid-row: span 2; font-size: 14px; padding-top: 6px; } .faelle-zeilen .fall-karte > .symbol { grid-column: 2; margin: 0 0 8px; font-size: 26px; } .faelle-zeilen .fall-karte h3 { grid-column: 2; font-size: 24px; } .faelle-zeilen .fall-karte p { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding-top: 4px; font-size: 16.5px; } @media (max-width: 760px) { .faelle-zeilen .fall-karte { grid-template-columns: 40px 1fr; padding: 22px 0; gap: 6px 16px; } .faelle-zeilen .fall-karte::before { grid-row: span 3; } .faelle-zeilen .fall-karte p { grid-column: 2; grid-row: auto; padding-top: 4px; } } .hervor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; overflow: hidden; border-radius: var(--r-karte); padding: 52px 56px; color: var(--b-text); border: 1px solid var(--b-linie); background: radial-gradient(60% 70% at 100% 0%, var(--b-licht), transparent 70%), var(--b-grund); } .hervor-pille { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--marke-text); margin-bottom: 18px; } .hervor-pille .symbol { font-size: 18px; } @media (prefers-color-scheme: dark) { .hervor-pille { color: var(--marke-hell); } } .hervor h2 { font-size: clamp(32px, 4vw, 52px); } .hervor-text > p:not(.hervor-pille) { margin-top: 20px; font-size: 18.5px; line-height: 1.5; color: var(--b-text-2); max-width: 44ch; } .hervor-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: hs; } .hervor-schritte li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: 18px; background: var(--b-glas); border: 1px solid var(--b-linie); } .hervor-schritte .symbol-rund { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--marke); box-shadow: 0 10px 26px -10px rgb(1 109 202 / .8); } .hervor-schritte h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; } .hervor-schritte p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--b-text-2); } @media (max-width: 960px) { .hervor { grid-template-columns: 1fr; padding: 32px 22px; gap: 28px; } } .steckbrief.band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 32px; border-radius: 28px; } .steckbrief.band div { background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); border-radius: 18px; padding: 20px 22px; } .steckbrief.band dt { color: rgb(255 255 255 / .75); } .steckbrief.band dd { color: #fff; font-size: 15.5px; font-weight: 500; } @media (max-width: 1000px) { .steckbrief.band { grid-template-columns: 1fr; padding: 22px; } } .v-wahl { display: none; margin-bottom: 26px; padding: 18px 20px; border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie); } .js .v-wahl { display: grid; gap: 12px; } .v-wahl-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; } .v-wahl-label { font-weight: 640; font-size: 16px; } .v-wahl-hinweis { font-size: 13.5px; color: var(--text-3); } .v-wahl-hinweis .klein-nur { display: none; } @media (max-width: 760px) { .v-wahl-hinweis .gross-nur { display: none; } .v-wahl-hinweis .klein-nur { display: inline; } } .v-chips { display: flex; flex-wrap: wrap; gap: 8px; } .v-chip { font: inherit; font-size: 14.5px; font-weight: 580; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background-color .2s, color .2s, border-color .2s; } .v-chip .symbol { font-size: 14px; display: none; } .v-chip.an { background: var(--marke); border-color: var(--marke); color: #fff; } .v-chip.an .symbol { display: block; } .v-chip:hover:not(.an) { border-color: var(--text-3); } .v-chip.fest { background: var(--marke-weich); border-color: transparent; color: var(--marke-text); cursor: default; } .v-chip.fest .symbol { display: block; } .v-wahl-alle { font-size: 14px; } .v-wahl-alle a, .v-wahl-alle button { font: inherit; font-size: 14px; color: var(--marke-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .v-scroll.gewaehlt { overflow: visible; margin: 0; padding: 0; } .gewaehlt .vergleich-breit { min-width: 0; table-layout: fixed; } .gewaehlt .vergleich-breit tbody th, .gewaehlt .vergleich-breit thead th:first-child { position: static; width: 21%; box-shadow: none; } .gewaehlt .vergleich-breit td { width: auto; min-width: 0; font-size: 14.5px; } .gewaehlt .vergleich thead th { position: sticky; top: 92px; z-index: 3; background: var(--grund); } .gewaehlt .vergleich thead th.v-wir { background: linear-gradient(var(--marke-weich), var(--marke-weich)), var(--grund); } .gewaehlt .vergleich [hidden] { display: none; } .gewaehlt .vergleich tbody tr:hover td, .gewaehlt .vergleich tbody tr:hover th { background-color: color-mix(in srgb, var(--flaeche) 60%, transparent); } .gewaehlt .vergleich tbody tr:hover td.v-wir { background-color: color-mix(in srgb, var(--marke) 13%, var(--flaeche)); } @media (max-width: 760px) { .v-scroll.stapelbar { overflow: visible; margin: 0; padding: 0; } .stapelbar .vergleich { min-width: 0; width: 100%; display: block; } .stapelbar .vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .stapelbar .vergleich tbody, .stapelbar .vergleich tr, .stapelbar .vergleich td, .stapelbar .vergleich tbody th { display: block; width: auto; min-width: 0; position: static; box-shadow: none; } .stapelbar .vergleich tr { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; margin-bottom: 12px; padding: 4px 0 8px; } .stapelbar .vergleich tbody th { border: 0; padding: 16px 18px 4px; font-size: 17px; background: transparent; } .stapelbar .vergleich td { border: 0; padding: 12px 18px 10px; font-size: 15px; } .stapelbar .vergleich td::before { content: attr(data-spalte); display: block; font-size: 12px; font-weight: 640; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; } .stapelbar .vergleich td.v-wir { background: var(--marke-weich); border-radius: 12px; margin: 4px 10px; padding: 12px 14px 12px; } .stapelbar .vergleich td.v-wir::before { color: var(--marke-text); } .stapelbar .vergleich td .v-zeichen { display: inline-flex; vertical-align: -3px; margin: 0 6px 0 0; font-size: 18px; } .stapelbar .vergleich td > span:last-child { display: inline; } .stapelbar .vergleich thead th.v-wir, .stapelbar .vergleich tbody tr:last-child td.v-wir { border-radius: 12px; } .v-legende { gap: 10px 16px; } } .kopf-innen { position: relative; } .menue { position: static; } .menue::before { display: none; } .menue-liste { left: 8px; right: 8px; top: calc(100% + 10px); min-width: 0; padding: 22px 22px 16px; border-radius: 24px; } .menue-liste::before { content: ''; position: absolute; left: 0; right: 0; top: -44px; height: 44px; } .menue-gruppen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; } .menue-mehr { display: flex; align-items: center; gap: 6px; margin: 6px 10px 0; padding: 8px 0 4px; border-top: 1px solid var(--linie); font-size: 13.5px; font-weight: 600; color: var(--marke-text); text-decoration: none; } .menue-mehr .symbol { font-size: 15px; } .menue-gruppe h4 { margin: 0 10px 8px; font-family: var(--schrift); font-size: 11.5px; font-weight: 640; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); line-height: 1.3; } .menue-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; } .menue-gruppe + .menue-gruppe { border-left: 1px solid var(--linie); padding-left: 24px; margin-left: -12px; } .menue-liste .menue-alle { margin-top: 14px; padding-top: 12px; } @media (max-width: 1180px) { .menue-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; } .menue-gruppe + .menue-gruppe { border-left: 0; padding-left: 0; margin-left: 0; } .menue-gruppe:nth-child(even) { border-left: 1px solid var(--linie); padding-left: 24px; margin-left: -12px; } } @media (max-width: 960px) { .kopf .menue-mobil > a { padding: 9px 16px; font-size: 21px; } .menue-mobil-gruppen { margin-top: 10px; padding: 0 6px; } .menue-mobil-gruppen .menue-mobil-titel { margin: 8px 10px 6px; } .menue-mobil-gruppe { border-top: 1px solid var(--linie); } .menue-mobil-gruppe:last-of-type { border-bottom: 1px solid var(--linie); } .menue-mobil-gruppe summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 13px 10px; font-size: 15.5px; font-weight: 620; color: var(--text); } .menue-mobil-gruppe summary::-webkit-details-marker { display: none; } .menue-mobil-gruppe summary span { font-size: 12px; font-weight: 600; color: var(--text-3); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; padding: 1px 8px; } .menue-mobil-gruppe summary .symbol { margin-left: auto; font-size: 14px; color: var(--text-3); transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .menue-mobil-gruppe[open] summary .symbol { transform: rotate(180deg); } .menue-mobil-gruppe ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; padding: 0 4px 12px; } .kopf .menue-mobil-gruppe li a { padding: 7px 8px; gap: 9px; font-size: 14.5px; border-radius: 10px; } .menue-mobil-gruppe .logo-kachel.klein { width: 30px; height: 30px; border-radius: 8px; } .menue-mobil-gruppe .logo-kachel.klein img { width: 18px; height: 18px; } .menue-mobil-gruppe .logo-kachel.klein.symbolisch { font-size: 16px; } .kopf .menue-mobil .menue-alle { margin: 12px 16px 0; } } @media (max-width: 400px) { .menue-mobil-gruppe ul { grid-template-columns: 1fr; } } .stufen-preisseite .stufe-knopf { margin-top: 18px; justify-content: center; width: 100%; padding-inline: 14px; text-align: center; } .stufen-preisseite .stufe-preis em { white-space: nowrap; } .pv { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; } .pv th, .pv td { padding: 14px 12px; border-bottom: 1px solid var(--linie); text-align: center; vertical-align: middle; } .pv thead th { position: sticky; top: 72px; z-index: 2; background: var(--grund); border-bottom: 2px solid var(--linie-stark); padding-top: 16px; padding-bottom: 14px; } .pv .pv-ecke { width: 40%; } .pv-stufe { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--text); } .pv-stufe small { display: block; font-family: var(--schrift); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--text-3); margin-top: 2px; } .pv-kurz { display: none; } .pv .pv-beliebt { background-color: var(--marke-weich); } .pv thead th.pv-beliebt { background: linear-gradient(var(--marke-weich), var(--marke-weich)), var(--grund); border-radius: 14px 14px 0 0; color: var(--marke-text); } .pv tbody th { text-align: left; font-weight: 500; color: var(--text); overflow-wrap: break-word; hyphens: auto; } .pv tbody th small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--text-3); line-height: 1.4; } .pv tbody th a { color: inherit; text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; } .pv tbody th a:hover { text-decoration-color: currentColor; } .pv tbody th .app-status { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--marke-weich); color: var(--marke-text); font-size: 11.5px; font-weight: 600; vertical-align: middle; } .pv .pv-gruppe th { padding-top: 34px; font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); border-bottom: 1px solid var(--linie-stark); background: none; } .pv td .symbol { font-size: 21px; color: var(--marke-text); vertical-align: middle; } .pv td .pv-nein .symbol { font-size: 15px; color: var(--text-3); opacity: .55; } .pv-wert { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .pv-preis { font-weight: 500; font-size: 14px; color: var(--text-2); } .pv tbody tr:hover th, .pv tbody tr:hover td { background-color: color-mix(in srgb, var(--flaeche) 70%, transparent); } .pv tbody tr:hover td.pv-beliebt { background-color: color-mix(in srgb, var(--marke) 13%, var(--flaeche)); } .pv tbody tr.pv-gruppe:hover th { background: none; } @media (max-width: 900px) { .pv-lang { display: none; } .pv-kurz { display: inline; } } @media (max-width: 760px) { .pv { font-size: 14px; } .pv th, .pv td { padding: 12px 4px; } .pv tbody th { padding-left: 0; padding-right: 8px; } .pv .pv-ecke { width: 38%; } .pv thead th { top: 64px; } .pv-stufe { font-size: 15px; } .pv-stufe small { font-size: 11.5px; } .pv td .pv-kurz { font-size: 15px; } .pv td .symbol { font-size: 19px; } .pv-preis { font-size: 12px; } .pv-wert { font-size: 13px; } .pv tbody th small { font-size: 12px; } } .preise-mehr { margin-top: 12px; font-size: 15px; color: var(--text-2); } .preise-mehr strong { color: var(--text); } .preise-mehr a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--marke-text); margin-left: 4px; white-space: nowrap; } .branchen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .branche-karte { display: flex; flex-direction: column; gap: 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 26px 24px 24px; } .branche-kopf { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; color: var(--marke-text); } .branche-kopf .symbol { font-size: 20px; } .branche-karte h3 { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1.16; text-wrap: balance; } .branche-karte > p:not(.branche-kopf) { color: var(--text-2); font-size: 15.5px; line-height: 1.55; } .branche-fluss { list-style: none; padding: 0; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .branche-fluss li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.3; padding: 5px 10px; border-radius: 999px; background: var(--flaeche-2); color: var(--text-2); } .branche-fluss li + li::before { content: '→'; color: var(--text-3); margin-left: -2px; } .branche-fluss li:last-child { background: var(--marke-weich); color: var(--marke-text); font-weight: 560; } .galerie { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; } .galerie figure { margin: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; box-shadow: var(--schatten); } .galerie figure:first-child { grid-row: span 2; } .galerie img { display: block; width: 100%; height: auto; } .galerie figcaption { padding: 14px 18px 16px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); border-top: 1px solid var(--linie); } @media (max-width: 960px) { .branchen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .branchen, .galerie { grid-template-columns: 1fr; } .galerie figure:first-child { grid-row: auto; } } .karte-abschnitt { padding: 20px 0 120px; } .karte-band { padding: 64px 0 56px; } .karte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'kopf karte' 'orte karte'; gap: 28px 56px; align-items: center; } .karte-kopf { grid-area: kopf; align-self: end; } .karte-kopf h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); } .karte-kopf h2 .kicker { color: rgb(255 255 255 / .8); } .karte-lead { margin-top: 20px; font-size: 18px; line-height: 1.55; color: rgb(255 255 255 / .84); max-width: 52ch; } .karte-orte-block { grid-area: orte; align-self: start; } .karte-orte { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(255 255 255 / .22); } .karte-orte li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / .22); } .karte-orte .flagge { margin-top: 3px; } .karte-orte li > div > b { display: block; color: #fff; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; } .karte-orte li > div > span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: rgb(255 255 255 / .8); } .karte-option { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgb(255 255 255 / .14); color: #fff; font-size: 14px; font-weight: 600; } .karte-option .symbol { font-size: 17px; } .karte-fuss { margin-top: 14px; font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / .62); } .karte-erklaert { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: rgb(255 255 255 / .82); max-width: 60ch; } .karte-buehne { grid-area: karte; } .karte-rahmen { position: relative; } .karte-svg { display: block; width: 100%; height: auto; overflow: visible; mask-image: radial-gradient(70% 70% at 50% 50%, #000 55%, transparent 100%); -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 55%, transparent 100%); } .k-land path { fill: rgb(255 255 255 / .17); stroke: rgb(255 255 255 / .28); stroke-width: 1; stroke-linejoin: round; } .k-land .k-sonst { fill: rgb(255 255 255 / .07); stroke: rgb(255 255 255 / .14); } .k-land .k-heim { fill: rgb(255 255 255 / .42); } .k-umriss { fill: rgb(255 255 255 / .07); stroke: rgb(255 255 255 / .7); stroke-width: 2; stroke-dasharray: 6 9; stroke-linecap: round; } .k-linie { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 9; } .k-linie-kunde { stroke: #fff; } .k-laeufer { fill: #fff; filter: drop-shadow(0 0 6px rgb(255 255 255 / .9)); } .k-punkt .k-kern { fill: #fff; stroke: var(--marke); stroke-width: 3; } .k-punkt .k-puls { fill: #fff; opacity: .28; transform-origin: center; transform-box: fill-box; animation: k-puls 2.4s ease-out infinite; } .k-kunde .k-kern { fill: var(--marke-hell); stroke: #fff; } .k-kunde .k-puls { fill: var(--marke-hell); } .k-koeln .k-puls { animation-delay: .8s; } .k-paris .k-puls { animation-delay: 1.6s; } @keyframes k-puls { 0% { transform: scale(.35); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } } .k-labels { position: absolute; inset: 0; pointer-events: none; } .k-label { position: absolute; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #fff; border-radius: 999px; padding: 6px 12px 6px 7px; font-size: 13px; line-height: 1.2; color: #07101f; box-shadow: 0 8px 24px -8px rgb(0 20 60 / .45); pointer-events: auto; } .k-label b { font-weight: 640; } .k-label small { font-size: 12px; color: #647086; } .k-label small::before { content: '·'; margin: 0 6px 0 -2px; color: #c4cbd8; } .k-label-kunde { background: var(--marke-hell); color: #fff; } .k-label-kunde small { color: rgb(255 255 255 / .85); } .k-label-kunde small::before { color: rgb(255 255 255 / .6); } .k-lage-r { transform: translate(18px, -50%); } .k-lage-l { transform: translate(calc(-100% - 18px), -50%); } .k-lage-o { transform: translate(-50%, calc(-100% - 20px)); } .k-lage-u { transform: translate(-50%, 20px); } .flagge { flex: none; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); } @media (prefers-reduced-motion: reduce) { .k-linie, .k-punkt .k-puls { animation: none; } .k-laeufer-gruppe { display: none; } .k-linie { stroke-dasharray: 1 7; } .k-punkt .k-puls { opacity: .18; transform: none; } } .karte-route, .karte-lead-kurz { display: none; } @media (max-width: 960px) { .karte { grid-template-columns: 1fr; grid-template-areas: 'kopf' 'karte' 'route' 'orte'; gap: 22px; } .karte-band { padding: 44px 0 38px; } .karte-abschnitt { padding-bottom: 90px; } .karte-lead { font-size: 16.5px; margin-top: 14px; } .karte-orte, .karte-erklaert, .karte-lead:not(.karte-lead-kurz) { display: none; } .karte-lead-kurz { display: block; } .karte-option { margin-top: 4px; } .karte-rahmen { border-radius: 22px; overflow: hidden; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); } .karte-svg { mask-image: none; -webkit-mask-image: none; } .k-label small { display: none; } .k-label { font-size: 13px; padding: 5px 11px 5px 6px; gap: 7px; } .karte-route { display: grid; list-style: none; margin: 0; padding: 0; } .karte-route li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 12px 12px 8px; border-radius: 16px; animation: k-schritt 6s infinite; animation-delay: calc(var(--i) * 1.5s); } .karte-route .flagge { width: 30px; height: 20px; margin-top: 2px; position: relative; z-index: 1; } .karte-route li:not(:last-child)::after { content: ''; position: absolute; left: 24px; top: 36px; bottom: -14px; width: 2px; background: repeating-linear-gradient(rgb(255 255 255 / .55) 0 4px, transparent 4px 9px); } .karte-route li:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 36px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; opacity: 0; z-index: 1; animation: k-route-lauf 6s infinite; animation-delay: calc(var(--i) * 1.5s); } .karte-route b { display: block; color: #fff; font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; } .karte-route b small { font-family: var(--schrift); font-size: 14px; font-weight: 500; letter-spacing: 0; color: rgb(255 255 255 / .78); } .karte-route b small::before { content: '· '; } .karte-route li > div > span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: rgb(255 255 255 / .82); } .k-route-kunde b { color: #fff; } } @keyframes k-schritt { 0%, 22% { background: rgb(255 255 255 / .14); } 28%, 100% { background: rgb(255 255 255 / 0); } } @keyframes k-route-lauf { 0% { top: 36px; opacity: 1; } 24% { top: calc(100% + 4px); opacity: 1; } 25%, 100% { top: calc(100% + 4px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .karte-route li { animation: none; } .karte-route li::before { display: none; } } @media (max-width: 560px) { .k-label { font-size: 12.5px; } .k-labels .flagge { width: 20px; height: 13px; } .karte-kopf h2 { font-size: 30px; } } .al { --al-rot: #e5283a; --al-rot-dunkel: #8f1024; --al-gelb: #d99a00; --al-gruen: var(--gut); --al-dauer: 14s; --al-luecke: 28px; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: var(--al-luecke); align-items: stretch; } .al-stufe { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 22px 20px 22px; box-shadow: var(--schatten); } .al-kopf { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; } .al-nr { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--marke-weich); color: var(--marke-text); font-family: var(--schrift); font-size: 14px; font-weight: 700; } .al-4 .al-nr { background: rgb(229 40 58 / 0.12); color: var(--al-rot); } .al-klein { color: var(--text-3); font-size: 13px; line-height: 1.45; } .al .symbol { width: 1em; height: 1em; flex: none; } .al-stufe:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: calc(-1 * var(--al-luecke) - 1px); width: var(--al-luecke); height: 3px; margin-top: -1.5px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--al-rot) 0 7px, transparent 7px 13px); opacity: .75; z-index: 1; } .al-stufe:not(:last-child)::before { content: ''; position: absolute; top: 50%; right: calc(-1 * var(--al-luecke) + 1px); width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; border-left-color: var(--al-rot); border-right: 0; z-index: 2; } .al-quellen { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .al-quellen li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--flaeche-2); } .al-q-sym { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--flaeche); color: var(--al-rot); font-size: 18px; } .al-quellen li:first-child .al-q-sym { color: var(--marke-text); } .al-quellen strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; } .al-quellen small { display: block; color: var(--text-3); font-size: 12.5px; line-height: 1.3; } .al-weg { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-2); } .al-weg .symbol { font-size: 16px; color: var(--marke-text); } .al-code { margin: 0; padding: 12px 14px; border-radius: 12px; background: #0b1220; color: #d6e2f5; border: 1px solid rgb(255 255 255 / 0.08); font-family: var(--mono); font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; } .al-code .al-m { color: #ff8a7a; font-weight: 700; } .al-code .al-k { color: #7cc4ff; } .al-code .al-s { color: #ffd28a; } .al-kanaele { display: flex; flex-wrap: wrap; gap: 6px; } .al-kanaele span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--flaeche-2); font-size: 13px; font-weight: 500; } .al-kanaele .symbol { font-size: 15px; color: var(--marke-text); } .al-auto { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; } .al-knoten { position: relative; display: grid; gap: 2px; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--flaeche-2); border-left: 4px solid var(--marke); } .al-knoten small { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); } .al-knoten span { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.3; } .al-knoten:not(:last-child)::after { content: ''; position: absolute; left: 22px; bottom: -18px; width: 2px; height: 18px; background: var(--linie-stark); } .al-wenn { border-left-color: var(--al-gelb); } .al-dann { border-left-color: var(--al-rot); background: rgb(229 40 58 / 0.09); } .al-dann .symbol { color: var(--al-rot); font-size: 17px; } .al-ausgaenge { display: flex; flex-wrap: wrap; gap: 6px; } .al-ausgaenge span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--linie-stark); font-size: 12.5px; font-weight: 500; } .al-ja .symbol { color: var(--gut); } .al-nein .symbol { color: var(--text-3); } .al-4 { background: linear-gradient(180deg, rgb(229 40 58 / 0.07), transparent 60%), var(--flaeche); } .al-handys { display: flex; align-items: center; justify-content: center; gap: 8px; } .al-handy { flex: 0 1 132px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; } .al-schirm { position: relative; width: 100%; max-width: 132px; aspect-ratio: 9 / 17.5; border-radius: 24px; border: 5px solid #05070c; background: #0d1422; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 18px 34px -16px rgb(0 0 0 / 0.55); } .al-schirm::before { content: ''; position: absolute; top: 6px; left: 50%; width: 34%; height: 9px; margin-left: -17%; border-radius: 99px; background: #05070c; z-index: 3; } .al-lage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 10px 12px; text-align: center; color: #fff; } .al-klingelt { background: radial-gradient(120% 70% at 50% 30%, #ff5a4d 0%, var(--al-rot) 45%, var(--al-rot-dunkel) 100%); } .al-klingelt small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: .9; } .al-klingelt strong { font-size: 12.5px; font-weight: 700; line-height: 1.2; } .al-klingelt em { font-style: normal; font-size: 10.5px; opacity: .85; line-height: 1.25; } .al-sirene { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: rgb(255 255 255 / 0.2); font-size: 22px; margin-bottom: 2px; } .al-sirene::before, .al-sirene::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgb(255 255 255 / 0.55); opacity: 0; } .al-knopf { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 7px 4px; border-radius: 999px; background: #fff; color: var(--al-rot-dunkel); font-size: 10.5px; font-weight: 700; line-height: 1.15; text-align: center; } .al-ruhe { background: linear-gradient(180deg, #16223a, #0b1120); } .al-ruhe b { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; } .al-ruhe span { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; opacity: .7; } .al-danach { gap: 4px; } .al-danach .symbol { font-size: 30px; margin-bottom: 4px; } .al-danach strong { font-size: 13px; font-weight: 700; } .al-danach span { font-size: 10.5px; opacity: .75; } .al-weiter { background: linear-gradient(180deg, #2a2f3a, #141821); } .al-weiter .symbol { color: #ffb4ab; } .al-ok { background: radial-gradient(120% 70% at 50% 30%, #2bd48a 0%, #0f9a5c 55%, #0a5f3a 100%); } .al-person { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; } .al-person span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--flaeche-2); color: var(--text-2); font-size: 11px; font-weight: 700; } .al-frist { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 74px; padding: 8px 6px; border-radius: 14px; border: 1px dashed var(--linie-stark); color: var(--text-2); font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center; margin-bottom: 26px; overflow-wrap: anywhere; hyphens: auto; } .al-frist .symbol { font-size: 18px; color: var(--al-gelb); } .al-frist .symbol:last-child { font-size: 14px; color: var(--text-3); } .al-fertig { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgb(17 148 90 / 0.1); color: var(--text); font-size: 13.5px; font-weight: 500; line-height: 1.4; } .al-fertig .symbol { color: var(--gut); font-size: 18px; margin-top: 1px; } .al-warnung { max-width: none; margin: 28px 0 0; } .al-warnung .symbol { color: var(--hinweis-text); } .al-h1 .al-danach { opacity: 0; } .al-h2 .al-ruhe, .al-h2 .al-klingelt { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .al-stufe:not(:last-child)::after { animation: al-striche 0.9s linear infinite; } .al-h1 .al-klingelt { animation: al-h1-klingelt var(--al-dauer) infinite; } .al-h1 .al-danach { animation: al-h1-danach var(--al-dauer) infinite; } .al-h2 .al-ruhe { animation: al-h2-ruhe var(--al-dauer) infinite; } .al-h2 .al-klingelt { animation: al-h2-klingelt var(--al-dauer) infinite; } .al-h2 .al-ok { animation: al-h2-ok var(--al-dauer) infinite; } .al-h1 .al-schirm { animation: al-h1-leuchten var(--al-dauer) infinite; } .al-h2 .al-schirm { animation: al-h2-leuchten var(--al-dauer) infinite; } .al-sirene::before { animation: al-welle 1s ease-out infinite; } .al-sirene::after { animation: al-welle 1s ease-out .5s infinite; } .al-sirene .symbol { animation: al-wackeln 0.5s ease-in-out infinite; } .al-frist { animation: al-frist var(--al-dauer) infinite; } .al-fertig { animation: al-fertig var(--al-dauer) infinite; } } @keyframes al-striche { to { background-position: 13px 0; } } @keyframes al-striche-senkrecht { to { background-position: 0 13px; } } @keyframes al-welle { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } } @keyframes al-wackeln { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } } @keyframes al-h1-klingelt { 0%, 40% { opacity: 1; } 44%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes al-h1-danach { 0%, 40% { opacity: 0; } 44%, 96% { opacity: 1; } 100% { opacity: 0; } } @keyframes al-h2-ruhe { 0%, 44% { opacity: 1; } 48%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes al-h2-klingelt { 0%, 44% { opacity: 0; } 48%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } } @keyframes al-h2-ok { 0%, 72% { opacity: 0; } 76%, 96% { opacity: 1; } 100% { opacity: 0; } } @keyframes al-h1-leuchten { 0%, 40% { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 34px -4px rgb(229 40 58 / 0.75); transform: rotate(0); } 2%, 12%, 22%, 32% { transform: rotate(-2deg); } 4%, 14%, 24%, 34% { transform: rotate(2deg); } 6%, 16%, 26%, 36% { transform: rotate(0); } 44%, 100% { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 18px 34px -16px rgb(0 0 0 / 0.55); transform: none; } } @keyframes al-h2-leuchten { 0%, 44% { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 18px 34px -16px rgb(0 0 0 / 0.55); transform: none; } 48%, 72% { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 34px -4px rgb(229 40 58 / 0.75); } 50%, 58%, 66% { transform: rotate(-2deg); } 52%, 60%, 68% { transform: rotate(2deg); } 54%, 62%, 70% { transform: rotate(0); } 76%, 100% { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 30px -6px rgb(17 148 90 / 0.7); transform: none; } } @keyframes al-frist { 0%, 30% { border-color: var(--linie-stark); background: transparent; } 36%, 50% { border-color: var(--al-gelb); background: rgb(217 154 0 / 0.12); } 56%, 100% { border-color: var(--linie-stark); background: transparent; } } @keyframes al-fertig { 0%, 72% { opacity: .35; } 78%, 96% { opacity: 1; } 100% { opacity: .35; } } @media (prefers-color-scheme: dark) { .al-code { background: #060a12; } .al-q-sym { background: var(--flaeche-2); } .al-quellen li, .al-knoten, .al-kanaele span { background: rgb(255 255 255 / 0.04); } .al-dann { background: rgb(229 40 58 / 0.14); } } @media (max-width: 1099px) { .al { grid-template-columns: repeat(2, minmax(0, 1fr)); } .al-2::after, .al-2::before { display: none; } } @media (max-width: 680px) { .al { grid-template-columns: minmax(0, 1fr); --al-luecke: 34px; } .al-stufe { padding: 20px 16px; } .al-2::after, .al-2::before { display: block; } .al-stufe:not(:last-child)::after { top: auto; bottom: calc(-1 * var(--al-luecke) - 1px); right: auto; left: 50%; width: 3px; height: var(--al-luecke); margin: 0 0 0 -1.5px; background: repeating-linear-gradient(180deg, var(--al-rot) 0 7px, transparent 7px 13px); } .al-stufe:not(:last-child)::before { top: auto; right: auto; bottom: calc(-1 * var(--al-luecke) + 1px); left: 50%; margin: 0 0 0 -6px; border: 6px solid transparent; border-top-color: var(--al-rot); border-bottom: 0; } .al-stufe:not(:last-child)::after { animation-name: al-striche-senkrecht; } .al-quellen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .al-quellen li { padding: 8px; gap: 8px; } .al-q-sym { width: 28px; height: 28px; font-size: 16px; } .al-quellen strong { font-size: 13px; } } @media (max-width: 380px) { .al-quellen { grid-template-columns: minmax(0, 1fr); } .al-frist { max-width: 58px; font-size: 10px; } } .ls-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } .ls-karte { display: flex; flex-direction: column; gap: 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 22px 20px 20px; } .ls-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; color: var(--marke-text); } .ls-kanal { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--flaeche-2); color: var(--text-2); letter-spacing: 0; text-transform: none; font-size: 12.5px; } .ls-kanal svg, .ls-kanal .symbol { width: 15px; height: 15px; font-size: 15px; } .ls-kanal.k-whatsapp { color: #128c4b; } .ls-kanal.k-instagram { color: #c13584; } .ls-karte h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1.18; text-wrap: balance; } .ls-karte .szene.chat { position: relative; inset: auto; width: 100%; max-width: none; margin: 0; transform: none; } .ls-karte .szene.chat .widget-verlauf { min-height: 0; max-height: none; } .ls-mail { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche-2); font-size: 13.5px; line-height: 1.5; } .ls-mail-kopf { display: flex; align-items: center; gap: 10px; } .ls-mail-kopf p { margin: 0; } .ls-mail-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--marke-weich); color: var(--marke-text); font-size: 17px; } .ls-mail-betreff { color: var(--text-2); font-weight: 560; } .ls-mail-text { margin: 0; color: var(--text); } .ls-mail-anhang { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--linie); font-size: 12.5px; font-weight: 600; } .ls-mail-anhang .symbol { color: #d9484a; font-size: 16px; } .ls-hoeren { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--marke-weich); } .ls-hoeren figcaption { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--marke-text); } .ls-hoeren audio { width: 100%; height: 36px; } .tw-spieler-box { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; min-width: min(240px, 100%); } .tw-sp-titel { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--marke-text); } .tw-sp-titel .symbol { font-size: 13px; } .szene.chat .tw-spieler { padding: 5px 10px 5px 5px; border-radius: 999px; background: #eef3fb; } .szene.chat .tw-sp-zeit { color: #465266; } .szene.chat .tw-sp-welle i { background: #0161b6; } .szene.chat .js .tw-sp-knopf, .szene.chat .tw-sp-knopf { width: 34px; height: 34px; box-shadow: none; } .ls-mail .tw-spieler { padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); } .tw-spieler { display: flex; align-items: center; gap: 10px; } .js .tw-spieler audio { display: none; } .tw-sp-knopf, .tw-sp-welle, .tw-sp-zeit { display: none; } .js .tw-sp-knopf { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--marke); color: var(--auf-marke); cursor: pointer; box-shadow: 0 6px 16px -6px rgb(1 109 202 / 0.6); transition: transform 0.15s ease, background 0.15s ease; } .js .tw-sp-knopf:hover { background: var(--marke-hover); transform: scale(1.06); } .tw-sp-knopf svg { width: 17px; height: 17px; fill: currentColor; } .tw-sp-knopf .sp-pause, .tw-spieler.spielt .sp-play { display: none; } .tw-spieler.spielt .sp-pause { display: block; } .js .tw-sp-welle { display: flex; flex: 1; min-width: 0; height: 30px; align-items: center; gap: 2px; cursor: pointer; } .tw-sp-welle i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--marke-text); opacity: 0.25; transition: opacity 0.15s; } .tw-sp-welle i.an { opacity: 1; } .tw-spieler.spielt .tw-sp-welle i.an { animation: tw-sp-puls 1.2s ease-in-out infinite; } @keyframes tw-sp-puls { 50% { opacity: 0.7; } } .js .tw-sp-zeit { display: block; flex: none; min-width: 34px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-2); } .tw-sp-knopf:focus-visible, .tw-sp-welle:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .tw-spieler.spielt .tw-sp-welle i.an { animation: none; } .js .tw-sp-knopf { transition: none; } } .ls-wirkung { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linie); } .ls-wirkung-titel { margin: 0 0 8px; font-size: 12.5px; font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); } .ls-wirkung ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ls-wirkung li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--text-2); } .ls-wirkung li .symbol { flex: none; margin-top: 3px; font-size: 16px; color: var(--marke-text); } .ls-fussnote { display: flex; gap: 8px; align-items: flex-start; max-width: 860px; margin: 22px auto 0; font-size: 13.5px; line-height: 1.55; color: var(--text-3); } .ls-fussnote .symbol { flex: none; margin-top: 2px; } @media (max-width: 1100px) { .ls-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .ls-raster { grid-template-columns: 1fr; } .ls-karte { padding: 18px 16px 16px; } } :root { --api-code-grund: #0b1424; --api-code-kopf: #111d33; --api-code-linie: rgb(255 255 255 / 0.08); --api-code-text: #dfe7f5; --api-code-leise: #8391aa; --api-c-str: #9fe0b8; --api-c-key: #8cc4ff; --api-c-zahl: #ffc285; --api-c-wort: #d7a6ff; --api-get: #0f8a55; --api-get-grund: rgb(17 148 90 / 0.12); --api-post: #016dca; --api-post-grund: rgb(1 109 202 / 0.11); --api-delete: #c73b3b; --api-delete-grund: rgb(199 59 59 / 0.11); --api-code-get: #45d394; --api-code-post: #6db2ff; --api-code-delete: #ff8a8a; --api-nav-breite: 268px; } @media (prefers-color-scheme: dark) { :root { --api-code-grund: #070d19; --api-code-kopf: #0d1626; --api-get: #45d394; --api-get-grund: rgb(63 208 138 / 0.14); --api-post: #6db2ff; --api-post-grund: rgb(61 155 255 / 0.15); --api-delete: #ff8a8a; --api-delete-grund: rgb(255 120 120 / 0.14); } } .api-seite { display: grid; grid-template-columns: var(--api-nav-breite) minmax(0, 1fr); max-width: 1520px; margin: 0 auto; padding: 108px var(--rand) 40px; gap: 0 48px; } .api-nav { position: sticky; top: 100px; align-self: start; height: calc(100vh - 116px); } .api-nav-klapp { height: 100%; } .api-nav-klapp > summary { display: none; } .api-nav-innen { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 40px 0; scrollbar-width: thin; } .api-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 0 10px 0 12px; height: 40px; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 12px; color: var(--text-3); } .api-filter:focus-within { border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-weich); } .api-filter .symbol { width: 16px; height: 16px; flex: none; } .api-filter input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); outline: none; } .api-filter kbd { font: 12px var(--mono); color: var(--text-3); border: 1px solid var(--linie-stark); border-radius: 6px; padding: 1px 6px; } .api-nav-gruppe { margin: 22px 0 6px; padding: 0 10px; font-size: 12px; font-weight: 640; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); } .api-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .api-nav li a, .api-nav-block summary a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 9px; color: var(--text-2); text-decoration: none; font-size: 14.5px; line-height: 1.35; } .api-nav li a:hover, .api-nav-block summary a:hover { background: var(--flaeche-2); color: var(--text); } .api-nav a[aria-current] { background: var(--marke-weich); color: var(--marke-text); font-weight: 560; } .api-nav-block { margin-top: 2px; } .api-nav-block summary { list-style: none; display: flex; align-items: center; cursor: pointer; border-radius: 9px; } .api-nav-block summary::-webkit-details-marker { display: none; } .api-nav-block summary a { flex: 1; color: var(--text); font-weight: 560; } .api-nav-block summary .symbol { width: 14px; height: 14px; margin-right: 8px; color: var(--text-3); transition: transform .2s; } .api-nav-block:not([open]) summary .symbol { transform: rotate(-90deg); } .api-nav-block ul { margin: 2px 0 8px 10px; padding-left: 8px; border-left: 1px solid var(--linie); } .api-nav-leer { padding: 10px; color: var(--text-3); font-size: 14px; } .api-methode { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 52px; height: 24px; padding: 0 8px; border-radius: 999px; font: 700 12px/1 var(--mono); letter-spacing: 0.02em; } .api-methode.klein { min-width: 40px; height: 19px; padding: 0 6px; font-size: 10.5px; } .m-get { color: var(--api-get); background: var(--api-get-grund); } .m-post, .m-put, .m-patch { color: var(--api-post); background: var(--api-post-grund); } .m-delete { color: var(--api-delete); background: var(--api-delete-grund); } .api-karte .m-get, .api-karte .m-post, .api-karte .m-put, .api-karte .m-patch, .api-karte .m-delete { background: rgb(255 255 255 / 0.08); } .api-karte .m-get { color: var(--api-code-get); } .api-karte .m-post, .api-karte .m-put, .api-karte .m-patch { color: var(--api-code-post); } .api-karte .m-delete { color: var(--api-code-delete); } .api-haupt { min-width: 0; } .api-kopf { max-width: 820px; padding-bottom: 24px; } .api-kopf .brotkrumen { color: var(--text-3); } .api-titel { display: flex; align-items: center; gap: 14px; margin-top: 10px; } .api-titel h1 { font-family: var(--display); font-weight: 720; letter-spacing: -0.045em; font-size: clamp(38px, 4.6vw, 56px); line-height: 1.02; margin: 0; } .api-version { font: 600 13px var(--mono); color: var(--marke-text); background: var(--marke-weich); border-radius: 999px; padding: 4px 10px; } .api-lead { font-size: 19px; line-height: 1.55; color: var(--text-2); margin: 18px 0 0; } .api-eckdaten { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; } .api-basis-box { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 14px; padding: 6px 6px 6px 14px; } .api-basis-label { font-size: 12px; font-weight: 640; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } .api-basis-box code { font: 14.5px var(--mono); color: var(--text); overflow-wrap: anywhere; } .api-basis-box .api-kopieren { color: var(--text-2); background: var(--flaeche-2); } .api-zahl { font-size: 14px; color: var(--text-3); } .api-zahl a { color: var(--marke-text); text-underline-offset: 3px; } .api-schluessel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 18px 20px; border-radius: 18px; background: var(--marke-weich); border: 1px solid var(--linie); } .api-schluessel p { margin: 4px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.5; } .api-schluessel .knopf { flex: none; } .api-abschnitt { padding-top: 40px; border-top: 1px solid var(--linie); margin-top: 40px; scroll-margin-top: 96px; } .api-abschnitt-kopf { max-width: 820px; } .api-abschnitt h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; margin: 0 0 14px; } .api-anker { color: inherit; text-decoration: none; } .api-anker:hover { color: var(--marke-text); } .api-haupt p { color: var(--text-2); font-size: 16px; line-height: 1.65; margin: 12px 0 0; } .api-haupt p code, .api-haupt td code, .api-feld-kopf code, .api-haupt li p code { font-family: var(--mono); font-size: 0.86em; background: var(--flaeche-2); color: var(--text); border: 1px solid var(--linie); border-radius: 6px; padding: 1px 5px; overflow-wrap: anywhere; } .api-haupt strong { color: var(--text); font-weight: 640; } .api-unter { max-width: 820px; padding-top: 28px; scroll-margin-top: 96px; } .api-unter h3 { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; margin: 0; } .api-abschnitt-kopf .api-karte, .api-unter .api-karte { margin-top: 16px; } .api-tabelle { margin: 16px 0 0; overflow-x: auto; border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); } .api-tabelle table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; } .api-tabelle th, .api-tabelle td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--linie); } .api-tabelle th { font-weight: 640; font-size: 13px; letter-spacing: 0.03em; color: var(--text-3); background: var(--flaeche-2); } .api-tabelle td { color: var(--text-2); } .api-tabelle td:first-child { white-space: nowrap; color: var(--text); } .api-tabelle tr:last-child td { border-bottom: 0; } .api-ep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 44px 0 8px; scroll-margin-top: 90px; } .api-ep + .api-ep { border-top: 1px dashed var(--linie); margin-top: 36px; } .api-ep h3 { font-family: var(--display); font-size: 26px; font-weight: 680; letter-spacing: -0.025em; line-height: 1.15; margin: 0; } .api-ep-pfad { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .api-ep-pfad code { font: 15px var(--mono); color: var(--text); overflow-wrap: anywhere; } .api-ep-pfad .api-basis { color: var(--text-3); } .api-felder-titel { margin: 28px 0 0; padding-bottom: 10px; font-size: 13px; font-weight: 640; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--linie); } .api-felder { list-style: none; margin: 0; padding: 0; } .api-felder li { padding: 14px 0; border-bottom: 1px solid var(--linie); } .api-feld-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .api-feld-kopf code { font-weight: 600; font-size: 14.5px !important; } .api-typ { font: 13px var(--mono); color: var(--text-3); } .api-pflicht { font-size: 12px; font-weight: 600; color: var(--hinweis-text); background: var(--hinweis); border: 1px solid var(--hinweis-linie); border-radius: 999px; padding: 1px 8px; } .api-felder li p { margin: 6px 0 0 !important; font-size: 15px !important; line-height: 1.55 !important; } .api-ep-code { position: sticky; top: 100px; align-self: start; display: grid; gap: 16px; min-width: 0; } .api-karte { background: var(--api-code-grund); border: 1px solid var(--api-code-linie); border-radius: 16px; overflow: hidden; box-shadow: var(--schatten); min-width: 0; } .api-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; background: var(--api-code-kopf); border-bottom: 1px solid var(--api-code-linie); } .api-karte-titel { display: inline-flex; align-items: center; gap: 10px; color: var(--api-code-text); font-size: 13.5px; font-weight: 600; } .api-status { font: 600 12px var(--mono); color: var(--api-code-get); background: rgb(69 211 148 / 0.12); border-radius: 999px; padding: 2px 8px; } .api-kopieren { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: rgb(255 255 255 / 0.06); color: var(--api-code-leise); font: inherit; font-size: 13px; cursor: pointer; } .api-kopieren:hover { color: var(--api-code-text); background: rgb(255 255 255 / 0.12); } .api-kopieren.ok { color: var(--api-code-get); } .api-kopieren .symbol { width: 15px; height: 15px; } .api-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--api-code-linie); overflow-x: auto; } .api-tabs button { border: 0; background: none; color: var(--api-code-leise); font: inherit; font-size: 13.5px; font-weight: 560; padding: 7px 12px 9px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .api-tabs button:hover { color: var(--api-code-text); } .api-tabs button[aria-selected="true"] { color: var(--api-code-text); border-bottom-color: var(--marke-hell); } .api-pre { margin: 0; padding: 16px 18px; overflow: auto; max-height: 460px; font: 13.5px/1.6 var(--mono); color: var(--api-code-text); white-space: pre; tab-size: 2; scrollbar-width: thin; } .api-pre code { font: inherit; background: none; border: 0; padding: 0; color: inherit; } .c-str { color: var(--api-c-str); } .c-key { color: var(--api-c-key); } .c-zahl { color: var(--api-c-zahl); } .c-wort { color: var(--api-c-wort); } .c-kom { color: var(--api-code-leise); font-style: italic; } .api-karte-anfrage .api-pre[data-sprache] { display: none; } [data-sprache="curl"] .api-pre[data-sprache="curl"], [data-sprache="node"] .api-pre[data-sprache="node"], [data-sprache="python"] .api-pre[data-sprache="python"], [data-sprache="php"] .api-pre[data-sprache="php"] { display: block; } @media (max-width: 1240px) { .api-ep { grid-template-columns: minmax(0, 1fr); gap: 24px; } .api-ep-code { position: static; max-width: 820px; } .api-ep-text { max-width: 820px; } } @media (max-width: 1000px) { .api-seite { grid-template-columns: minmax(0, 1fr); padding-top: 96px; } .api-nav { position: sticky; top: 84px; z-index: 5; height: auto; order: 0; margin-bottom: 8px; } .api-nav-klapp { background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 14px; box-shadow: var(--schatten); } .api-nav-klapp > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; font-weight: 600; list-style: none; } .api-nav-klapp > summary::-webkit-details-marker { display: none; } .api-nav-klapp > summary::after { content: '+'; font-size: 20px; color: var(--text-3); } .api-nav-klapp[open] > summary::after { content: '\2212'; } .api-nav-innen { max-height: 60vh; padding: 0 12px 16px; } .api-filter kbd { display: none; } .api-schluessel { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .api-seite { padding-left: 16px; padding-right: 16px; } .api-basis-box { flex-wrap: wrap; } .api-pre { font-size: 12.5px; padding: 14px; } .api-ep h3 { font-size: 23px; } } :root { --flow-leinwand: #fbfcfe; --flow-raster: rgb(12 24 48 / 0.075); --flow-karte: #ffffff; --flow-karte-text: #0b1322; --flow-karte-text-2: #5d6778; --flow-kante: #cdd4df; --flow-licht-a: #016dca; --flow-licht-b: #3d9bff; --flow-gut: #1f9d55; --flow-leiste: #ffffff; --a-ausloeser: #2b6fe0; --a-ki: #7a4fd6; --a-daten: #5b6b80; --a-paket: #5b6b80; --a-webhook: #5b6b80; --a-bedingung: #c07a06; --a-frage: #0e8a8a; --a-nachricht: #1f9d55; --a-termin: #1f9d55; --a-gespraech: #d6307a; --a-team: #1877f2; --a-zeit: #7c8494; --a-notiz: #b8930f; --a-kontakt: #25a55a; --a-extern: #00a1e0; } @media (prefers-color-scheme: dark) { :root { --flow-leinwand: #0a111d; --flow-raster: rgb(255 255 255 / 0.06); --flow-karte: #111a2b; --flow-karte-text: #eef3fb; --flow-karte-text-2: #9aa6bb; --flow-kante: #2b3a52; --flow-licht-a: #3d9bff; --flow-licht-b: #8cc4ff; --flow-gut: #3fd08a; --flow-leiste: #0d1524; --a-ausloeser: #5b93f5; --a-ki: #a283ef; --a-daten: #8fa0b6; --a-paket: #8fa0b6; --a-webhook: #8fa0b6; --a-bedingung: #e6a53a; --a-frage: #3cc1c1; --a-nachricht: #3fd08a; --a-termin: #3fd08a; --a-gespraech: #f06aa8; --a-team: #5b9dff; --a-zeit: #9aa3b3; --a-notiz: #e3c64f; --a-kontakt: #45d394; --a-extern: #3ec3ff; } } .auto-buehne { padding-bottom: 20px; } .auto-kopf { padding-top: 140px; text-align: center; display: grid; justify-items: center; } .auto-kopf .brotkrumen { color: var(--b-text-2); } .auto-pille { display: inline-flex; align-items: center; gap: 7px; margin: 18px 0 0; padding: 6px 13px; border-radius: 999px; background: var(--b-glas); border: 1px solid var(--b-linie-stark); color: var(--marke-text); font-size: 13.5px; font-weight: 600; } .auto-kopf h1 { font-family: var(--display); font-weight: 740; letter-spacing: -0.05em; font-size: clamp(44px, 7vw, 92px); line-height: 0.98; margin: 18px 0 0; color: var(--b-text); } .auto-kopf .hero-unter { margin: 22px auto 0; max-width: 58ch; text-align: center; } .auto-kopf .hero-knoepfe { justify-content: center; margin-top: 28px; } .auto-szene { position: relative; z-index: 1; margin-top: 56px; max-width: 1320px; } .auto-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } .auto-gruppen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .auto-gruppe { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 22px 22px 18px; position: relative; overflow: hidden; } .auto-gruppe::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gf); } .auto-gruppe.g0 { --gf: var(--a-bedingung); } .auto-gruppe.g1 { --gf: var(--a-nachricht); } .auto-gruppe.g2 { --gf: var(--a-kontakt); } .auto-gruppe.g3 { --gf: var(--a-daten); } .auto-gruppe h3 { margin: 0 0 12px; font-size: 17px; } .auto-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .auto-gruppe li { font-size: 15px; color: var(--text-2); padding-left: 16px; position: relative; line-height: 1.4; } .auto-gruppe li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--gf); } .auto-vorlagen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .auto-vorlagen li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 22px; } .auto-vorlagen .symbol { font-size: 26px; color: var(--marke-text); } .auto-vorlagen h3 { margin: 12px 0 6px; font-size: 17px; } .auto-vorlagen p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; } .flow { display: grid; gap: 18px; } .flow-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .flow-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--b-linie-stark); background: var(--b-glas); color: var(--b-text-2); font: inherit; font-size: 14.5px; font-weight: 560; padding: 10px 16px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; backdrop-filter: blur(10px); } .flow-tabs button:hover { color: var(--b-text); background: var(--b-glas-hover); } .flow-tabs button[aria-selected="true"] { color: var(--auf-marke); background: var(--marke); border-color: var(--marke); box-shadow: 0 10px 30px -12px rgb(1 109 202 / .7); } .flow-tabs .symbol { font-size: 17px; } .flow-beispiel { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; height: 620px; } .flow-beispiel[hidden] { display: none; } .flow-chat.widget { position: relative; inset: auto; margin: 0; transform: none; animation: none; width: auto; max-width: none; display: flex; flex-direction: column; min-height: 0; } .flow-chat .widget-kopf .kanal-marke { margin-left: auto; } .flow-chat .widget-verlauf { flex: 1; height: auto; min-height: 0; overflow: hidden; justify-content: flex-end; } .flow-chat .w-n { position: relative; } .flow-chat .w-n p { margin: 0; } .flow-chat .w-n.team { align-self: flex-start; background: #fff4e0; border: 1px solid #f2d59a; color: #3d2f07; border-bottom-left-radius: 5px; } .flow-chat .w-n.team small { display: block; font-size: 11px; font-weight: 700; color: #8a6410; margin-bottom: 2px; } .flow-chat .ki-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #0161b6; letter-spacing: .02em; margin-bottom: 3px; } .flow-chat .anhang { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: #f0f3f8; font-size: 12.5px; font-weight: 600; color: #0b1322; } .flow-chat .anhang .symbol { font-size: 16px; color: #0161b6; } .flow-chat .w-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .flow-chat .w-knoepfe b { font-family: inherit; font-size: 12.5px; font-weight: 600; color: #0161b6; border: 1px solid #b9d4f1; background: #f2f8ff; padding: 5px 11px; border-radius: 999px; word-break: normal; } .flow-chat .w-n u { text-decoration-color: rgb(1 97 182 / .4); text-underline-offset: 2px; color: #0161b6; } .flow-chat .w-n.kunde u { color: #fff; } .flow-chat .w-tippt { position: absolute; left: 0; top: 0; margin: 0; border: 0; background: transparent; padding: 12px 14px; } .flow-editor { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 24px; overflow: hidden; background: var(--flow-leinwand); box-shadow: var(--b-schatten), 0 0 0 1px var(--b-linie-stark); } .flow-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--flow-leiste); border-bottom: 1px solid var(--linie); font-size: 13.5px; z-index: 2; } .flow-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 640; color: var(--text); min-width: 0; } .flow-name .symbol { font-size: 17px; color: var(--marke-text); flex: none; } .flow-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--flow-gut); white-space: nowrap; } .flow-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); } .flow-fenster { position: relative; flex: 1; overflow: hidden; background-image: radial-gradient(var(--flow-raster) 1.2px, transparent 1.3px); background-size: 22px 22px; } .flow-kamera { position: absolute; left: 0; top: 0; width: 1320px; height: 600px; transform-origin: 0 0; transform: translate(8px, 40px) scale(.46); } .flow-kanten { position: absolute; left: 0; top: 0; overflow: visible; } .fk-kante { fill: none; stroke: var(--flow-kante); stroke-width: 2.4; stroke-linecap: round; transition: stroke .5s, opacity .5s, stroke-width .5s; } .fk-kante.lauf { stroke: var(--licht); stroke-width: 3.6; filter: drop-shadow(0 0 6px rgb(61 155 255 / .55)); } .fk-kante.blass, .fk-knoten.blass { opacity: .28; } .fk-kante.zweig-nein { stroke-dasharray: 7 7; } .flow.spielt .fk-kante.zweig-nein.da { stroke-dasharray: 7 7 !important; stroke-dashoffset: 0 !important; } .fk-etikett { position: absolute; z-index: 2; transform: translate(-50%, -50%); box-shadow: 0 2px 8px -3px rgb(10 30 70 / .18); font-size: 12.5px; font-weight: 640; color: var(--flow-karte-text-2); background: var(--flow-karte); border: 1px solid var(--linie-stark); padding: 3px 10px; border-radius: 999px; white-space: nowrap; transition: opacity .4s; } .fk-knoten { position: absolute; width: 212px; transform: translate(-50%, -50%); background: var(--flow-karte); color: var(--flow-karte-text); border: 1px solid var(--linie-stark); border-radius: 16px; padding: 14px 14px 12px; --f: var(--a-daten); box-shadow: 0 1px 2px rgb(10 30 70 / .06), 0 14px 32px -18px color-mix(in srgb, var(--f) 55%, transparent); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .45s; } .fk-knoten::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--f), color-mix(in srgb, var(--f) 45%, transparent)); } .fk-knoten.art-ausloeser { --f: var(--a-ausloeser); } .fk-knoten.art-ki { --f: var(--a-ki); } .fk-knoten.art-daten { --f: var(--a-daten); } .fk-knoten.art-paket { --f: var(--a-paket); } .fk-knoten.art-webhook { --f: var(--a-webhook); } .fk-knoten.art-bedingung { --f: var(--a-bedingung); } .fk-knoten.art-frage { --f: var(--a-frage); } .fk-knoten.art-nachricht { --f: var(--a-nachricht); } .fk-knoten.art-termin { --f: var(--a-termin); } .fk-knoten.art-gespraech { --f: var(--a-gespraech); } .fk-knoten.art-team { --f: var(--a-team); } .fk-knoten.art-zeit { --f: var(--a-zeit); } .fk-knoten.art-notiz { --f: var(--a-notiz); } .fk-knoten.art-kontakt { --f: var(--a-kontakt); } .fk-knoten.art-extern { --f: var(--a-extern); } .fk-kopf { display: flex; align-items: center; gap: 10px; } .fk-kopf > div { min-width: 0; } .fk-kopf small { display: block; font-size: 11.5px; font-weight: 600; color: var(--flow-karte-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fk-kopf strong { display: block; font-size: 15px; font-weight: 650; line-height: 1.25; } .fk-symbol { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--f); background: color-mix(in srgb, var(--f) 14%, transparent); } .fk-knoten .logo-kachel { flex: none; width: 34px; height: 34px; border-radius: 10px; } .fk-knoten .logo-kachel img { width: 22px; height: 22px; } .port { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--flow-karte); border: 2px solid var(--flow-kante); transition: background .3s, border-color .3s, transform .3s; } .port.ein { left: -7px; } .port.aus { right: -7px; } .fk-knoten.art-ausloeser .port.ein { display: none; } .fk-knoten.verbunden .port.ein, .fk-knoten.da .port.aus { border-color: var(--f); } .fk-ergebnis { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--flow-gut); background: color-mix(in srgb, var(--flow-gut) 11%, transparent); line-height: 1.3; } .fk-ergebnis .symbol { flex: none; font-size: 14px; } .fk-knoten.aktiv { border-color: var(--flow-licht-a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--flow-licht-a) 22%, transparent), 0 20px 50px -18px rgb(1 109 202 / .6); transform: translate(-50%, -50%) scale(1.04); } .fk-knoten.aktiv::after { content: ''; position: absolute; inset: -4px; border-radius: 20px; border: 2px solid var(--flow-licht-b); animation: flow-puls 1.1s ease-out infinite; pointer-events: none; } .fk-knoten.erledigt { border-color: color-mix(in srgb, var(--flow-gut) 70%, transparent); } .fk-knoten.erledigt .port.aus { background: var(--flow-gut); border-color: var(--flow-gut); } @keyframes flow-puls { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } } .flow-punkt { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, #fff 0 22%, var(--flow-licht-b) 38%, var(--flow-licht-a) 60%, transparent 72%); box-shadow: 0 0 22px 6px rgb(61 155 255 / .55); transition: opacity .25s; } .flow-punkt.da { opacity: 1; } .flow-zeiger { position: absolute; left: -3px; top: -2px; font-size: 26px; color: var(--flow-karte-text); opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 6px rgb(0 0 0 / .25)); transition: opacity .25s; } .flow-zeiger .symbol { stroke: var(--flow-karte); } .flow-zeiger.da { opacity: 1; } .flow-zeiger::after { content: ''; position: absolute; left: -7px; top: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--flow-licht-a); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s; } .flow-zeiger.zieht::after { opacity: .35; transform: scale(1); } .flow.spielt .fk-knoten:not(.da) { opacity: 0; transform: translate(-50%, -38%) scale(.94); } .flow.spielt .fk-kante:not(.da):not(.lauf) { stroke: var(--flow-licht-a); } .flow.spielt .fk-knoten:not(.mit-ergebnis) .fk-ergebnis { opacity: 0; transform: translateY(-4px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } .fk-ergebnis { transition: opacity .4s, transform .4s, max-height .4s, margin .4s, padding .4s; max-height: 60px; overflow: hidden; } .flow.spielt .fk-etikett:not(.da) { opacity: 0; } .flow.spielt [data-c]:not(.da):not(.tippt) { display: none; } .flow.spielt [data-c].da, .flow.spielt [data-c].tippt { animation: flow-rein .5s cubic-bezier(.2, .8, .2, 1); } @keyframes flow-rein { from { opacity: 0; transform: translateY(12px) scale(.98); } } .flow.spielt .w-n.tippt { display: block; } .flow.spielt .w-n.tippt > :not(.w-tippt) { opacity: 0; } .flow.spielt .w-n.tippt .w-tippt { display: inline-flex; } @media (max-width: 1100px) { .flow-beispiel { grid-template-columns: 300px minmax(0, 1fr); height: 560px; } .auto-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .auto-vorlagen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { .flow-beispiel { grid-template-columns: minmax(0, 1fr); height: auto; } .flow-editor { order: -1; height: 400px; } .flow-chat .widget-verlauf { height: 230px; flex: none; padding: 12px; } .flow-chat .widget-kopf { padding: 11px 14px; gap: 10px; } .flow-chat .widget-kopf img { width: 30px; height: 30px; } .flow-chat .widget-kopf div > span { white-space: nowrap; font-size: 12px; } .flow-chat .widget-kopf .kanal-marke span { display: none; } .flow-leiste { font-size: 13px; padding: 10px 12px; } .flow-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 45%; } .flow-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; } .flow-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; scrollbar-width: none; } .flow-tabs button { flex: none; } .auto-schritte { grid-template-columns: minmax(0, 1fr); } .auto-kopf { padding-top: 120px; } } @media (max-width: 560px) { .auto-gruppen, .auto-vorlagen { grid-template-columns: minmax(0, 1fr); } .flow-editor { height: 360px; } } @media (prefers-reduced-motion: reduce) { .fk-knoten, .fk-kante, .fk-ergebnis, [data-c] { transition: none !important; animation: none !important; } .fk-knoten.aktiv::after { animation: none; } } .ki-entwurf { position: relative; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 18px; height: 600px; } .ke-dialog { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 24px; background: var(--flaeche); border: 1px solid var(--linie-stark); box-shadow: var(--schatten); z-index: 3; } .ke-kopf { display: flex; align-items: center; gap: 10px; } .ke-kopf .symbol { font-size: 20px; color: var(--a-ki); } .ke-kopf strong { font-size: 17px; } .ke-hinweis { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.5; } .ke-eingabe { flex: 1; margin: 0; padding: 16px 16px 18px; border-radius: 16px; background: var(--flaeche-2); border: 1px solid var(--linie); font-size: 16px; line-height: 1.75; color: var(--text); overflow: hidden; transition: border-color .3s, box-shadow .3s; } .ki-entwurf.spielt:not(.baut) .ke-eingabe { border-color: color-mix(in srgb, var(--a-ki) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a-ki) 12%, transparent); } .ke-seg { border-radius: 7px; transition: background .35s, color .35s, box-shadow .35s; } .ke-seg.kw { color: var(--a-ki); font-weight: 680; background: color-mix(in srgb, var(--a-ki) 13%, transparent); padding: 1px 4px; margin: 0 1px; } .ke-seg[data-bezug] { --f: var(--a-daten); } .ke-seg.art-ausloeser { --f: var(--a-ausloeser); } .ke-seg.art-zeit { --f: var(--a-zeit); } .ke-seg.art-ki { --f: var(--a-ki); } .ke-seg.art-daten { --f: var(--a-daten); } .ke-seg.art-nachricht { --f: var(--a-nachricht); } .ke-seg.art-frage { --f: var(--a-frage); } .ke-seg.art-gespraech { --f: var(--a-gespraech); } .ki-entwurf.spielt .ke-seg.kw:not(.da) { background: transparent; } .ki-entwurf.spielt .ke-seg.kw.da { animation: ke-chip .35s cubic-bezier(.2, 1.4, .3, 1); } @keyframes ke-chip { from { background: transparent; } } .ke-seg.an { background: color-mix(in srgb, var(--f) 22%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--f) 40%, transparent); color: var(--text); } .ke-seg.war { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--f) 55%, transparent); } .ke-z { transition: opacity .12s; } .ki-entwurf.spielt .ke-z:not(.da) { opacity: 0; } .ke-z.caret { position: relative; } .ke-z.caret::after { content: ''; position: absolute; right: -2px; top: .15em; bottom: .1em; width: 2px; border-radius: 1px; background: var(--a-ki); animation: ke-blink 1s steps(2, start) infinite; } @keyframes ke-blink { to { visibility: hidden; } } .ke-knopf { position: relative; display: grid; place-items: center; height: 50px; border: 0; border-radius: 999px; font: inherit; font-size: 15.5px; font-weight: 640; color: #fff; overflow: hidden; cursor: default; background: linear-gradient(100deg, var(--a-ki), #016dca); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--a-ki) 70%, transparent); transition: transform .2s; } .ke-knopf > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity .3s, transform .3s; } .ke-knopf .ke-laeuft { opacity: 0; transform: translateY(10px); } .ke-knopf.baut .ke-knopf-text { opacity: 0; transform: translateY(-10px); } .ke-knopf.baut .ke-laeuft { opacity: 1; transform: none; } .ke-knopf.baut::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / .35) 50%, transparent 80%); transform: translateX(-100%); animation: ke-schimmer 1.3s ease-in-out infinite; } @keyframes ke-schimmer { to { transform: translateX(100%); } } .ke-kreis { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: ke-dreh .8s linear infinite; } @keyframes ke-dreh { to { transform: rotate(360deg); } } .ke-knopf.gedrueckt, .ke-veroeff.gedrueckt { transform: scale(.96); } .ke-zeiger { position: absolute; left: 0; top: 0; z-index: 5; transition: transform .6s cubic-bezier(.3, .7, .2, 1), opacity .25s; } .ke-editor { position: relative; } .ke-rechts { display: inline-flex; align-items: center; gap: 10px; } .ke-pille { font-size: 12.5px; font-weight: 640; padding: 4px 11px; border-radius: 999px; color: var(--hinweis-text); background: var(--hinweis); border: 1px solid var(--hinweis-linie); transition: color .3s, background .3s, border-color .3s, opacity .3s; white-space: nowrap; } .ke-pille.live { color: var(--flow-gut); background: color-mix(in srgb, var(--flow-gut) 12%, transparent); border-color: color-mix(in srgb, var(--flow-gut) 35%, transparent); } .ke-veroeff { font-size: 13px; font-weight: 640; color: var(--auf-marke); background: var(--marke); padding: 6px 13px; border-radius: 999px; transition: transform .2s, opacity .3s; white-space: nowrap; } .ki-entwurf.spielt .ke-pille:not(.da), .ki-entwurf.spielt .ke-veroeff:not(.da) { opacity: 0; } .ki-entwurf.live .ke-veroeff { opacity: .45; } .ke-toast { position: absolute; left: 50%; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--flow-karte); border: 1px solid var(--linie-stark); box-shadow: var(--schatten); font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; opacity: 0; transform: translate(-50%, 12px); transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); } .ke-toast .symbol { color: var(--flow-gut); font-size: 17px; } .ke-toast.da { opacity: 1; transform: translate(-50%, 0); } .fk-notiz { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: color-mix(in srgb, var(--a-ki) 85%, var(--flow-karte-text)); background: color-mix(in srgb, var(--a-ki) 10%, transparent); max-height: 60px; overflow: hidden; transition: opacity .4s, transform .4s, max-height .4s, margin .4s, padding .4s; } .fk-notiz .symbol { flex: none; font-size: 13px; color: var(--a-ki); } .ki-entwurf.spielt .fk-knoten:not(.mit-ergebnis) .fk-notiz { opacity: 0; transform: translateY(-4px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } .ki-entwurf.spielt .fk-knoten:not(.da) { opacity: 0; transform: translate(-50%, -50%) scale(.82); filter: blur(6px); } .ki-entwurf .fk-knoten { transition: opacity .5s ease, transform .6s cubic-bezier(.2, 1.4, .3, 1), filter .5s, box-shadow .5s, border-color .5s; } .ki-entwurf .fk-knoten.neu { border-color: var(--a-ki); box-shadow: 0 0 0 5px color-mix(in srgb, var(--a-ki) 18%, transparent), 0 24px 60px -20px color-mix(in srgb, var(--a-ki) 70%, transparent); } .ki-entwurf.spielt .fk-kante:not(.da) { stroke: var(--a-ki); } .ki-entwurf .fk-kante.lauf { stroke: var(--a-ki); stroke-width: 3.4; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--a-ki) 60%, transparent)); } .ki-entwurf.spielt .fk-etikett:not(.da) { opacity: 0; } .ke-editor .flow-fenster::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--a-ki) 12%, transparent), transparent 70%); } .ki-entwurf.baut .ke-editor .flow-fenster::after { opacity: 1; } @media (max-width: 1100px) { .ki-entwurf { grid-template-columns: 330px minmax(0, 1fr); height: 560px; } .ke-eingabe { font-size: 15px; } } @media (max-width: 800px) { .ki-entwurf { grid-template-columns: minmax(0, 1fr); height: auto; } .ki-entwurf .ke-editor { height: 380px; } .ke-eingabe { flex: none; font-size: 15px; } .ke-rechts .ke-veroeff { display: none; } } @media (prefers-reduced-motion: reduce) { .ke-z, .ke-seg, .ki-entwurf .fk-knoten, .fk-notiz, .ke-toast { transition: none !important; } .ke-knopf.baut::after, .ke-kreis, .ke-z.caret::after { animation: none; } } :root { --claude-clay: #d97757; --claude-grund: #faf9f5; --claude-linie: #e8e6dc; --claude-text: #141413; --claude-text-2: #5e5d59; --claude-blase: #f0eee6; --claude-terminal: #141413; --claude-terminal-text: #faf9f5; --claude-terminal-text-2: #b7b5a9; --claude-serif: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --gpt-grund: #ffffff; --gpt-linie: #e3e3e3; --gpt-text: #0d0d0d; --gpt-text-2: #5d5d5d; --gpt-kante: #0d0d0d; --gpt-logo-grund: #0d0d0d; --gpt-logo-filter: invert(1); --gpt-blase: #f4f4f4; --gpt-terminal: #212121; --a-claude: var(--claude-clay); --a-chatgpt: var(--gpt-kante); --a-alarm: #e5283a; --fs-grund: var(--claude-terminal); --fs-text: var(--claude-terminal-text); --fs-text-2: var(--claude-terminal-text-2); } @media (prefers-color-scheme: dark) { :root { --claude-grund: #262624; --claude-linie: #3e3e38; --claude-text: #faf9f5; --claude-text-2: #b7b5a9; --claude-blase: #141413; --gpt-grund: #212121; --gpt-linie: #3a3a3a; --gpt-text: #ffffff; --gpt-text-2: #b4b4b4; --gpt-kante: #ffffff; --gpt-logo-grund: #ffffff; --gpt-logo-filter: none; --gpt-blase: #303030; --gpt-terminal: #181818; --a-alarm: #ff5a68; } } .fk-knoten.art-claude { --f: var(--a-claude); } .fk-knoten.art-chatgpt { --f: var(--a-chatgpt); } .fk-knoten.art-alarm { --f: var(--a-alarm); } .fk-wartet { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; padding: 6px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--f); background: color-mix(in srgb, var(--f) 12%, transparent); line-height: 1.3; max-height: 60px; overflow: hidden; transition: opacity .4s, max-height .4s, margin .4s, padding .4s; } .fk-kreis { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--f) 30%, transparent); border-top-color: var(--f); } .fk-knoten:not(.wartet) .fk-wartet { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } .fk-knoten.wartet .fk-kreis { animation: ka-dreh .9s linear infinite; } .fk-knoten.art-claude.wartet { border-color: var(--f); box-shadow: 0 0 0 4px color-mix(in srgb, var(--f) 20%, transparent), 0 20px 50px -18px color-mix(in srgb, var(--f) 60%, transparent); } .fk-knoten.art-claude.wartet::after { border-color: var(--f); } @keyframes ka-dreh { to { transform: rotate(360deg); } } .flow-chat .w-n.system.warn { color: #8a1c1c; background: #fde3e3; } .kanal-marke.k-meldung .symbol { color: var(--a-alarm); } .flow-sitzung { position: absolute; right: 14px; bottom: 14px; width: min(430px, calc(100% - 28px)); z-index: 3; pointer-events: none; } .fs-fenster { position: absolute; right: 0; bottom: 0; width: 100%; border-radius: 16px; background: var(--fs-grund); color: var(--fs-text); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .06); overflow: hidden; transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); } .flow-sitzung.art-chatgpt { --fs-akzent: var(--a-chatgpt); } .flow-sitzung.art-claude { --fs-akzent: var(--a-claude); } .fs-kopf { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgb(255 255 255 / .08); background: linear-gradient(90deg, color-mix(in srgb, var(--fs-akzent) 22%, transparent), transparent 70%); } .fs-kopf .logo-kachel { width: 30px; height: 30px; border-radius: 8px; border: 0; } .fs-kopf .logo-kachel img { width: 19px; height: 19px; } .fs-kopf > div { min-width: 0; flex: 1; } .fs-kopf strong { display: block; font-size: 13.5px; font-weight: 650; color: #fff; line-height: 1.2; } .fs-kopf > div > span { display: block; font-size: 12px; color: var(--fs-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-zustand { flex: none; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; font-weight: 650; color: #6fe3a5; padding: 3px 9px; border-radius: 999px; background: rgb(111 227 165 / .12); } .fs-zustand::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .flow.spielt .flow-sitzung.offen:not(.fertig) .fs-zustand { color: var(--fs-akzent); background: color-mix(in srgb, var(--fs-akzent) 16%, transparent); } .flow.spielt .flow-sitzung.offen:not(.fertig) .fs-zustand::before { animation: ka-blink 1s ease-in-out infinite; } @keyframes ka-blink { 50% { opacity: .25; } } .fs-zeilen { list-style: none; margin: 0; padding: 10px 14px 13px; display: grid; gap: 5px; } .fs-z { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start; font-family: var(--mono); font-size: 12.5px; line-height: 1.45; color: var(--fs-text); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); } .fs-z > .symbol, .fs-z > .fs-laeuft { grid-area: 1 / 1; margin-top: 2px; } .fs-z > span { grid-area: 1 / 2; overflow-wrap: anywhere; } .fs-z > .symbol { font-size: 14px; color: var(--fs-text-2); transition: opacity .2s; } .fs-z.z-mcp { color: #9fcaff; } .fs-z.z-mcp > .symbol { color: #9fcaff; } .fs-z.z-ok { color: #7ee8b0; } .fs-z.z-ok > .symbol { color: #7ee8b0; } .fs-z.z-json { color: #ffd592; } .fs-z.z-json > .symbol { color: #ffd592; } .fs-laeuft { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .18); border-top-color: var(--fs-akzent); opacity: 0; } .fs-z.jetzt > .symbol { opacity: 0; } .fs-z.jetzt > .fs-laeuft { opacity: 1; animation: ka-dreh .8s linear infinite; } .fs-pille { position: absolute; right: 0; bottom: 0; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--flow-karte); border: 1px solid var(--linie-stark); box-shadow: 0 8px 22px -12px rgb(10 30 70 / .35); font-size: 12.5px; font-weight: 620; color: var(--flow-karte-text); white-space: nowrap; transition: opacity .4s ease, transform .45s cubic-bezier(.2, .8, .2, 1); } .fs-pille .logo-kachel { width: 26px; height: 26px; border-radius: 999px; } .fs-pille .logo-kachel img { width: 16px; height: 16px; } .fs-pille > .symbol { font-size: 15px; color: var(--flow-gut); } .flow:not(.spielt) .fs-fenster { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; } .flow.spielt .flow-sitzung:not(.offen) .fs-fenster { opacity: 0; transform: translateY(18px) scale(.97); } .flow.spielt .fs-z:not(.da) { opacity: 0; transform: translateX(-6px); } .flow.spielt .flow-sitzung:not(.zu) .fs-pille { opacity: 0; transform: translateY(8px) scale(.96); } .ka-buehne { margin-top: 8px; } .ka-andersherum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; } .ka-andersherum .kopfzeile { margin: 0; text-align: left; } .ka-werkzeuge { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; } .ka-werkzeuge li { font-family: var(--mono); font-size: 13px; padding: 5px 10px; border-radius: 8px; background: var(--flaeche-2); color: var(--text-2); border: 1px solid var(--linie); } .ka-werkzeuge li.schreibt { color: var(--marke-text); } .ka-legende { margin: 12px 0 0; font-size: 13.5px; color: var(--text-3); } .szene.assistent { --as-akzent: var(--a-claude); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 22px; box-shadow: var(--schatten); overflow: hidden; display: flex; flex-direction: column; } .szene.assistent.art-chatgpt { --as-akzent: var(--a-chatgpt); } .as-kopf { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--linie); } .as-kopf > div { flex: 1; min-width: 0; } .as-kopf strong { display: block; font-size: 15px; } .as-kopf > div > span { display: block; font-size: 12.5px; color: var(--text-3); } .as-kopf .logo-kachel { border-radius: 10px; } .as-verbunden { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--gut); padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--gut) 12%, transparent); } .as-verlauf { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; min-height: 470px; } .as-n { max-width: 88%; font-size: 14.5px; line-height: 1.5; } .as-n p { margin: 0; } .as-n.du { align-self: flex-end; background: var(--flaeche-2); padding: 10px 14px; border-radius: 18px 18px 6px 18px; } .as-n.ki { align-self: flex-start; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; max-width: 96%; } .as-n.ki .logo-kachel { width: 28px; height: 28px; border-radius: 8px; } .as-n.ki .logo-kachel img { width: 17px; height: 17px; } .as-werkzeug { align-self: flex-start; margin: 0 0 0 38px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--linie); font-size: 12.5px; color: var(--text-2); } .as-werkzeug .symbol { font-size: 14px; color: var(--as-akzent); } .as-werkzeug code { font-family: var(--mono); } .as-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 14px 14px; padding: 10px 10px 10px 16px; border-radius: 14px; border: 1px solid var(--linie); color: var(--text-3); font-size: 14px; } .as-fuss button { border: 0; background: var(--flaeche-2); color: var(--text-2); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 16px; } .ka-code { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .ka-code figure { margin: 0; min-width: 0; } .ka-code figcaption { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text-2); } .ka-code pre { margin: 0; padding: 16px 18px; border-radius: 14px; background: #0b1220; color: #d6e2f5; border: 1px solid rgb(255 255 255 / .08); font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .ka-code .c-k { color: #7cc4ff; } .ka-code .c-s { color: #ffd28a; } .ka-code .c-b { color: #ff9a8a; } .ka-tabelle { width: 100%; border-collapse: collapse; margin-top: 8px; } .ka-tabelle th, .ka-tabelle td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; font-size: 15px; } .ka-tabelle th { font-family: var(--mono); font-weight: 600; font-size: 13.5px; white-space: nowrap; color: var(--marke-text); } .ka-tabelle td:last-child { white-space: nowrap; color: var(--text-3); font-size: 13.5px; } .ka-tabelle thead th { font-family: inherit; color: var(--text-3); font-size: 13px; font-weight: 600; } @media (max-width: 960px) { .ka-andersherum { grid-template-columns: minmax(0, 1fr); gap: 28px; } .ka-code { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 800px) { .flow-sitzung { right: 10px; bottom: 10px; width: calc(100% - 20px); } .fs-z { font-size: 11.5px; } .fs-zeilen { padding: 8px 12px 10px; gap: 4px; } .fs-kopf { padding: 9px 12px; } .as-verlauf { min-height: 520px; } .ka-tabelle td:last-child { white-space: normal; } .ka-tabelle th { white-space: normal; overflow-wrap: anywhere; } } @media (prefers-reduced-motion: reduce) { .fk-wartet, .fs-fenster, .fs-z, .fs-pille { transition: none !important; } .fk-kreis, .fs-laeuft, .fs-zustand::before { animation: none !important; } } .ka-reihen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); } .ka-reihen li { border-bottom: 1px solid var(--linie); } .ka-reihen a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 22px; align-items: center; padding: 24px 6px; color: inherit; text-decoration: none; transition: background .25s; border-radius: 14px; } .ka-reihen a:hover { background: var(--flaeche-2); } .ka-reihen a > .symbol { font-size: 20px; color: var(--marke-text); transition: transform .25s; } .ka-reihen a:hover > .symbol { transform: translateX(4px); } .ka-r-text { display: grid; gap: 3px; } .ka-r-text small { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); } .ka-r-text strong { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .ka-r-text span { color: var(--text-2); font-size: 15.5px; line-height: 1.5; max-width: 62ch; } .ka-ausgaenge { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .ka-ausgaenge span { font-family: var(--mono); font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linie-stark); color: var(--text-2); } .ka-ausgaenge span:first-child { color: var(--gut); border-color: color-mix(in srgb, var(--gut) 40%, transparent); } .ka-mcp { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; color: var(--text-2); font-size: 15px; } .ka-mcp .symbol { flex: none; font-size: 19px; color: var(--marke-text); margin-top: 1px; } @media (max-width: 760px) { .ka-reihen a { grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; padding: 20px 4px; } .ka-ausgaenge { grid-column: 2; justify-content: flex-start; } .ka-reihen a > .symbol { display: none; } .ka-r-text strong { font-size: 19px; } } .fk-knoten.art-claude .fk-kopf small { white-space: normal; line-height: 1.25; } .fk-knoten.art-claude { background: var(--claude-grund); border-color: var(--claude-linie); color: var(--claude-text); } .fk-knoten.art-claude::before { background: var(--claude-clay); } .fk-knoten.art-claude .fk-kopf small { color: var(--claude-text-2); } .fk-knoten.art-claude .fk-kopf strong { font-family: var(--claude-serif); font-weight: 500; font-size: 16px; letter-spacing: 0; } .fk-knoten.art-claude .logo-kachel { background: transparent; border: 0; } .fk-knoten.art-claude .logo-kachel img { width: 26px; height: 26px; } .fk-knoten.art-chatgpt { background: var(--gpt-grund); border-color: var(--gpt-linie); color: var(--gpt-text); } .fk-knoten.art-chatgpt::before { background: var(--gpt-kante); } .fk-knoten.art-chatgpt .fk-kopf small { color: var(--gpt-text-2); } .fk-knoten.art-chatgpt .port.ein, .fk-knoten.art-chatgpt .port.aus { background: var(--gpt-grund); } .fk-knoten.art-claude .port.ein, .fk-knoten.art-claude .port.aus { background: var(--claude-grund); } .fk-knoten.erledigt.art-claude .port.aus, .fk-knoten.erledigt.art-chatgpt .port.aus { background: var(--flow-gut); } .fk-knoten.art-chatgpt .logo-kachel, .flow-sitzung.art-chatgpt .logo-kachel, .szene.assistent.art-chatgpt .logo-kachel { background: var(--gpt-logo-grund); border: 0; } .fk-knoten.art-chatgpt .logo-kachel img, .flow-sitzung.art-chatgpt .fs-pille .logo-kachel img, .szene.assistent.art-chatgpt .logo-kachel img { filter: var(--gpt-logo-filter); width: 20px; height: 20px; } .flow-sitzung.art-claude .logo-kachel, .szene.assistent.art-claude .logo-kachel { background: transparent; border: 0; } .flow-sitzung.art-claude { --fs-grund: var(--claude-terminal); --fs-text: var(--claude-terminal-text); --fs-text-2: var(--claude-terminal-text-2); --fs-akzent: var(--claude-clay); } .flow-sitzung.art-claude .fs-kopf { background: none; border-bottom-color: rgb(250 249 245 / .1); } .flow-sitzung.art-claude .fs-kopf strong { font-family: var(--mono); font-weight: 600; } .flow-sitzung.art-claude .fs-kopf .logo-kachel img { width: 22px; height: 22px; } .flow-sitzung.art-claude .fs-z.z-mcp { color: var(--claude-terminal-text); } .flow-sitzung.art-claude .fs-z.z-mcp > .symbol, .flow-sitzung.art-claude .fs-z.z-schritt > .symbol { color: var(--claude-clay); } .flow-sitzung.art-claude .fs-z.z-schritt { color: var(--claude-terminal-text-2); } .flow-sitzung.art-chatgpt { --fs-grund: var(--gpt-terminal); --fs-text: #ececec; --fs-text-2: #b4b4b4; --fs-akzent: #ffffff; } .flow-sitzung.art-chatgpt .fs-kopf { background: none; border-bottom-color: rgb(255 255 255 / .1); } .flow-sitzung.art-chatgpt .fs-kopf .logo-kachel { background: #ffffff; } .flow-sitzung.art-chatgpt .fs-kopf .logo-kachel img { filter: none; width: 19px; height: 19px; } .flow-sitzung.art-claude .fs-pille .logo-kachel img { width: 18px; height: 18px; } .szene.assistent.art-claude { background: var(--claude-grund); border-color: var(--claude-linie); color: var(--claude-text); } .szene.assistent.art-claude .as-kopf, .szene.assistent.art-claude .as-fuss, .szene.assistent.art-claude .as-werkzeug { border-color: var(--claude-linie); } .szene.assistent.art-claude .as-kopf > div > span, .szene.assistent.art-claude .as-fuss, .szene.assistent.art-claude .as-werkzeug { color: var(--claude-text-2); } .szene.assistent.art-claude .as-kopf strong { font-family: var(--claude-serif); font-weight: 500; font-size: 17px; } .szene.assistent.art-claude .as-n.du { background: var(--claude-blase); } .szene.assistent.art-claude .as-n.ki p { font-family: var(--claude-serif); font-size: 15.5px; line-height: 1.55; } .szene.assistent.art-claude .as-werkzeug .symbol { color: var(--claude-clay); } .szene.assistent.art-claude .as-fuss button { background: var(--claude-blase); color: var(--claude-text-2); } .szene.assistent.art-chatgpt { background: var(--gpt-grund); border-color: var(--gpt-linie); color: var(--gpt-text); } .szene.assistent.art-chatgpt .as-kopf, .szene.assistent.art-chatgpt .as-fuss, .szene.assistent.art-chatgpt .as-werkzeug { border-color: var(--gpt-linie); } .szene.assistent.art-chatgpt .as-kopf > div > span, .szene.assistent.art-chatgpt .as-fuss, .szene.assistent.art-chatgpt .as-werkzeug { color: var(--gpt-text-2); } .szene.assistent.art-chatgpt .as-n.du { background: var(--gpt-blase); border-radius: 22px; } .szene.assistent.art-chatgpt .as-werkzeug .symbol { color: var(--gpt-text); } .szene.assistent.art-chatgpt .as-fuss { border-radius: 26px; } .szene.assistent.art-chatgpt .as-fuss button { background: var(--gpt-text); color: var(--gpt-grund); } .szene.assistent .as-n.ki .logo-kachel img { width: 17px; height: 17px; } .fk-knoten.art-claude.aktiv, .fk-knoten.art-chatgpt.aktiv { border-color: var(--flow-licht-a); } .fk-knoten.art-claude.erledigt, .fk-knoten.art-chatgpt.erledigt { border-color: color-mix(in srgb, var(--flow-gut) 70%, transparent); } .fk-knoten.art-claude.wartet { border-color: var(--claude-clay); } .galerie.claude-verbinden { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; } .galerie.claude-verbinden figure:first-child { grid-row: auto; } .galerie.claude-verbinden figure:nth-child(3) { grid-column: 2; grid-row: 1 / span 3; } @media (max-width: 860px) { .galerie.claude-verbinden { grid-template-columns: 1fr; grid-template-rows: none; } .galerie.claude-verbinden figure:nth-child(3) { grid-column: auto; grid-row: auto; max-width: 420px; } }