/* Public homepage only. These selectors are deliberately scoped so existing pages keep their current presentation. */
.zahlen-marketing-page { background: #fff; color: #071538; font-family: Arial, Helvetica, sans-serif; }
.zahlen-marketing-page * { box-sizing: border-box; }
.zahlen-marketing-page a { text-decoration: none; }
.zahlen-marketing-width { width: min(100% - 64px, 1180px); margin-inline: auto; }
.zahlen-marketing-header { width: min(100% - 64px, 1260px); min-height: 97px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.zahlen-marketing-brand { display: inline-flex; align-items: center; }.zahlen-marketing-brand img { display: block; width: auto; height: 70px; max-width: 243px; object-fit: contain; }
.zahlen-marketing-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 3vw, 45px); color: #0752dc; font-size: .9rem; font-weight: 800; }.zahlen-marketing-nav a { color: inherit; }.zahlen-marketing-nav a:hover { color: #003db7; text-decoration: underline; }.zahlen-marketing-nav .zahlen-marketing-login { color: #111; text-transform: uppercase; }
.zahlen-hero { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(35px, 9vw, 140px); padding: 22px 0 76px; }.zahlen-hero-copy { max-width: 700px; padding-top: 62px; }.zahlen-eyebrow { margin: 0 0 14px; color: #064ddd; font-size: .78rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.zahlen-hero h1 { max-width: 760px; margin: 0 0 16px; color: #050505; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -.035em; }.zahlen-hero-own-it { margin: 0 0 22px; font-size: clamp(1.75rem, 3vw, 2.7rem); font-weight: 500; letter-spacing: -.04em; }.zahlen-hero-body { max-width: 680px; margin: 0 0 22px; color: #080808; font-size: clamp(1.2rem, 1.8vw, 1.7rem); font-weight: 600; line-height: 1.06; letter-spacing: -.025em; }.zahlen-hero-free { margin: 0 0 27px; color: #070707; font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 500; }.zahlen-join-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 38px; border-radius: 5px; background: linear-gradient(135deg, #095cf1, #1645db); box-shadow: inset 0 0 0 1px #0c47ca, 0 3px 6px rgba(0, 50, 150, .22); color: #fff; font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 800; transition: transform .15s ease, background .15s ease; }.zahlen-join-button:hover { background: #003ab9; color: #fff; text-decoration: none; transform: translateY(-2px); }
.zahlen-service-list { display: grid; align-content: start; gap: 12px; }.zahlen-service-card { min-height: 174px; padding: 22px 20px; border: 1px solid #d9e0e9; border-radius: 17px; box-shadow: 0 1px 1px rgba(4, 30, 88, .04); }.zahlen-service-card-featured { border-color: #8fc5ff; background: linear-gradient(130deg, #f3f8ff, #fff); }.zahlen-service-card h2 { margin: 0 0 4px; color: #111; font-size: 1rem; line-height: 1.15; }.zahlen-service-card p:last-child { margin: 10px 0 0; color: #101523; font-size: .9rem; line-height: 1.48; }.zahlen-service-price { margin: 0; color: #064ddd; font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; }.zahlen-service-unit { margin: 0; color: #064ddd; font-size: .85rem; font-weight: 800; }
.zahlen-no-ai { margin: 18px 0 0; color: #101a31; font: 700 clamp(1.1rem, 2vw, 1.6rem)/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.015em; }.zahlen-ledger-section { padding-bottom: 72px; }.zahlen-ledger-section h2 { margin: 0; color: #101a31; font: 700 clamp(2rem, 3.7vw, 3.5rem)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }.zahlen-guesses { margin: 0 0 8px; color: #b88735; font: italic clamp(2rem, 3.5vw, 3.4rem)/1.05 Georgia, "Times New Roman", serif; }.zahlen-ledger-intro { max-width: 925px; margin: 0 0 10px; color: #647083; font-size: 1.04rem; font-weight: 700; line-height: 1.3; }.zahlen-retry-ledger { width: 100%; overflow: hidden; border: 1px solid #d8d9d3; color: #13213a; background: #fbfcf8; font-size: .72rem; }.zahlen-retry-ledger img { display: block; width: 100%; max-width: 100%; height: auto; }.zahlen-ledger-head { display: flex; justify-content: space-between; padding: 14px 27px 10px; color: #5e6878; font: 700 .68rem/1.1 monospace; letter-spacing: .04em; text-transform: uppercase; }.zahlen-ledger-row { display: grid; grid-template-columns: 118px 1fr 135px; align-items: center; min-height: 45px; padding: 0 28px; border-bottom: 1px solid #dddeda; }.zahlen-ledger-row strong { font-size: .73rem; }.zahlen-ledger-track { position: relative; min-height: 32px; height: 100%; background-image: linear-gradient(to right, rgba(145, 152, 162, .18) 1px, transparent 1px); background-size: 7.14% 100%; }.zahlen-ledger-track i { position: absolute; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: #ae3c32; }.zahlen-ledger-track i:nth-child(1) { left: 4%; }.zahlen-ledger-track i:nth-child(2) { left: 8%; }.zahlen-ledger-track i:nth-child(3) { left: 21%; }.zahlen-ledger-track i:nth-child(4) { left: 36%; }.zahlen-ledger-track i:nth-child(5) { left: 51%; }.zahlen-ledger-track i:nth-child(6) { left: 67%; }.zahlen-ledger-track i:nth-child(7) { left: 84%; }.zahlen-ledger-status { justify-self: end; padding: 3px 7px; color: #a31f14; border: 1px solid #c4584f; text-align: center; font-size: .68rem; line-height: 1.05; text-transform: uppercase; }.zahlen-ledger-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 13px 0 11px; background: #fff; }.zahlen-ledger-foot p { margin: 0; padding: 0 18px; border-right: 1px solid #eee; color: #18233a; font-weight: 600; line-height: 1.35; }.zahlen-ledger-foot p:last-child { border: 0; }
.zahlen-rules { padding: 0 0 75px; }.zahlen-rules > h2 { margin: 0 0 42px; color: #0d2159; text-align: center; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.04em; }.zahlen-rule-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }.zahlen-rule { position: relative; display: grid; grid-template-columns: 47px 1fr; gap: 18px; }.zahlen-rule:not(:last-child)::after { position: absolute; top: 21px; left: calc(100% - 8px); width: 32px; height: 1px; background: #bbc5d7; content: ""; }.zahlen-rule-number { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 50%; background: #064ddd; color: #fff; box-shadow: 0 2px 3px rgba(0, 32, 105, .2); font-size: 1.6rem; font-weight: 700; }.zahlen-rule h3 { margin: 7px 0 15px; color: #102259; font-size: 1.15rem; }.zahlen-rule p { margin: 0; color: #41536f; font-size: .97rem; line-height: 1.6; }
.zahlen-compounds { background: linear-gradient(115deg, #f0f6ff, #e8f1ff); }.zahlen-compounds-inner { display: grid; grid-template-columns: .8fr 1.25fr; align-items: center; gap: 45px; min-height: 405px; padding-block: 48px; }.zahlen-compounds-copy h2 { margin: 0 0 20px; color: #0b2159; font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -.04em; }.zahlen-compounds-copy > p { max-width: 395px; color: #133266; font-size: 1.05rem; line-height: 1.75; }.zahlen-compounds-copy .zahlen-fine-print { margin-top: 58px; color: #586a87; font-size: .82rem; line-height: 1.45; }.zahlen-fine-print span { margin-right: 8px; font-size: 1.2rem; vertical-align: -2px; }.zahlen-cycle { position: relative; width: min(100%, 600px); aspect-ratio: 1.65; margin: auto; }.zahlen-cycle::before { position: absolute; inset: 18%; border: 2px solid #0b5cf3; border-radius: 50%; content: ""; }.zahlen-cycle::after { position: absolute; inset: 21%; border: 8px solid #edf4ff; border-radius: 50%; content: ""; }.zahlen-cycle-center { position: absolute; z-index: 1; inset: 35% 31%; display: grid; place-content: center; color: #052460; text-align: center; font-size: clamp(.85rem, 1.7vw, 1.25rem); font-weight: 800; line-height: 1.4; }.zahlen-cycle-item { position: absolute; z-index: 2; width: 135px; color: #052460; font-size: .75rem; line-height: 1.25; }.zahlen-cycle-item b { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 5px; border: 2px solid #0759ee; border-radius: 50%; background: #fff; color: #0759ee; font-size: 2rem; font-weight: 400; }.zahlen-cycle-item strong, .zahlen-cycle-item span { display: block; }.zahlen-cycle-item strong { font-size: .82rem; }.zahlen-cycle-top { top: 0; left: 47%; }.zahlen-cycle-right { top: 37%; right: 0; }.zahlen-cycle-bottom { bottom: 0; left: 43%; }.zahlen-cycle-left { top: 37%; left: 0; text-align: right; }.zahlen-cycle-left b { margin-left: auto; }
.zahlen-compliance { padding-block: 62px 94px; }.zahlen-compliance-pci { padding-bottom: 24px; }.zahlen-compliance-x402 { padding-top: 0; }.zahlen-compliance-card { padding: clamp(30px, 4vw, 48px); border-radius: 23px; background: radial-gradient(circle at 88% 85%, #056d9a, transparent 34%), linear-gradient(110deg, #00233c, #003a64 67%, #00456d); color: #fff; box-shadow: 0 6px 15px rgba(0, 38, 65, .14); }.zahlen-eyebrow-light { color: #aed6eb; }.zahlen-compliance-card h2 { margin: 0 0 20px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.05; letter-spacing: -.045em; }.zahlen-compliance-card > p:not(.zahlen-eyebrow) { max-width: 1050px; margin: 0 0 18px; font-size: 1rem; line-height: 1.55; }.zahlen-compliance-chip { display: inline-block; padding: 7px 12px; border: 1px solid #8cc1db; border-radius: 20px; background: rgba(16, 106, 158, .45); color: #fff; font-size: .75rem; font-weight: 700; }.zahlen-compliance-chip:hover { background: rgba(27, 135, 195, .72); color: #fff; }
@media (max-width: 830px) { .zahlen-marketing-header { min-height: 86px; }.zahlen-marketing-nav { gap: 15px; font-size: .78rem; }.zahlen-hero { grid-template-columns: 1fr; gap: 35px; }.zahlen-hero-copy { padding-top: 25px; }.zahlen-service-list { grid-template-columns: repeat(3, 1fr); }.zahlen-service-card { min-height: 0; }.zahlen-compounds-inner { grid-template-columns: 1fr; }.zahlen-compounds-copy > p { max-width: 520px; }.zahlen-compounds-copy .zahlen-fine-print { margin-top: 22px; }.zahlen-cycle { max-width: 580px; }.zahlen-rule-list { gap: 25px; }.zahlen-ledger-row { grid-template-columns: 95px 1fr 120px; padding-inline: 15px; }.zahlen-ledger-head { padding-inline: 15px; } }
@media (max-width: 620px) { .zahlen-marketing-width, .zahlen-marketing-header { width: min(100% - 34px, 1180px); }.zahlen-marketing-header { flex-direction: column; align-items: flex-start; padding-block: 18px; }.zahlen-marketing-nav { width: 100%; justify-content: space-between; gap: 10px; flex-wrap: wrap; }.zahlen-marketing-brand img { width: auto; height: 58px; }.zahlen-service-list, .zahlen-rule-list { grid-template-columns: 1fr; }.zahlen-rule:not(:last-child)::after { display: none; }.zahlen-ledger-section { overflow: hidden; }.zahlen-retry-ledger, .zahlen-ledger-section > .zahlen-retry-ledger { min-width: 0; width: 100%; }.zahlen-ledger-foot { font-size: .61rem; }.zahlen-rules > h2 { margin-bottom: 27px; }.zahlen-rule-list { gap: 28px; }.zahlen-compounds-inner { min-height: 0; }.zahlen-cycle { margin-block: -11px; transform: scale(.94); transform-origin: center; }.zahlen-compliance { padding-block: 42px 56px; } }