/* vord-store — UI foundation */

:root {
  color-scheme: dark;
  --bg: #101115;
  --bg-elevated: #14161b;
  --surface: #191c22;
  --surface-2: #20242c;
  --surface-3: #292e38;
  --text: #f2f4f8;
  --text-2: #c3c9d2;
  --text-3: #89919e;
  --accent: #3d89fe;
  --accent-hover: #5798ff;
  --accent-soft: rgba(61, 137, 254, 0.14);
  --accent-line: rgba(61, 137, 254, 0.42);
  --ok: #43c66b;
  --warn: #ffb020;
  --danger: #f06a73;
  --border: rgba(230, 234, 240, 0.14);
  --border-soft: rgba(230, 234, 240, 0.08);
  --radius-lg: 22px;
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1120px;
  --content-narrow: 720px;
  --shadow: 0 24px 70px -40px rgba(0, 0, 0, 0.85), inset 0 1px rgba(255, 255, 255, 0.035);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 84% -8%, rgba(61, 137, 254, 0.13), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--text); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(61, 137, 254, 0.5); outline-offset: 3px; }
::selection { background: rgba(61, 137, 254, 0.35); color: #fff; }

/* Navigation */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(16, 17, 21, 0.82);
  backdrop-filter: blur(18px) saturate(130%);
}
.nav-inner {
  min-height: 68px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--text);
  text-decoration: none;
}
.brand svg { width: 25px; height: 25px; display: block; }
.brand .brand-word { font-size: 18px; font-weight: 720; letter-spacing: -0.025em; }
.brand .dot { color: var(--accent); }
.nav-products, .nav-links { display: flex; align-items: center; gap: 4px; }
.nav-products { margin-right: auto; }
.nav-links { margin-left: auto; }
.nav-products a, .nav-links a, .nav-links button.linklike {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  font-weight: 520;
  line-height: 1;
  text-decoration: none;
}
.nav-products a:hover, .nav-links a:hover, .nav-links button.linklike:hover,
.nav-products a.active, .nav-links a.active { color: var(--text); background: var(--surface-2); }
.nav-links form, .inline-form { display: inline; margin: 0; }
.nav-links .nav-cta { margin-left: 6px; color: white; background: var(--accent); }
.nav-links .nav-cta:hover { color: white; background: var(--accent-hover); }

/* Grundlayout */
main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 54px 28px 88px;
}
.page-heading { max-width: var(--content-narrow); margin-bottom: 28px; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.04; letter-spacing: -0.045em; }
h2 { margin: 0 0 10px; font-size: 18px; line-height: 1.25; letter-spacing: -0.015em; }
h3 { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.lede { max-width: 720px; margin: 0; color: var(--text-2); font-size: clamp(16px, 2vw, 19px); line-height: 1.58; }
.muted { margin: 0; color: var(--text-2); font-size: 14.5px; }
.small { color: var(--text-3); font-size: 13px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dashboard-wide { grid-column: 1 / -1; }
.section-gap { margin-top: 28px; }
.per { font-size: 14px; }
.block { display: block; width: 100%; text-align: center; text-decoration: none; line-height: 1.4; }
.content-narrow { max-width: var(--content-narrow); }
.empty-state { padding: 14px 0; }
.vertical-actions { display: flex; align-items: stretch; flex-direction: column; gap: 10px; }
.vertical-actions .btn { width: 100%; }
.filter-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.filter-row .field { margin: 0; }
.preformatted { overflow-x: auto; white-space: pre-wrap; word-break: break-all; font-family: var(--mono); font-size: 13px; }
.attachment-link { margin-right: 8px; }

/* Landingpages */
.landing-main { padding-top: 72px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  align-items: center;
  gap: clamp(48px, 8vw, 104px);
  min-height: 430px;
}
.hero-copy { max-width: 620px; }
.eyebrow {
  margin: 0 0 18px;
  color: #8fbaff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-copy h1 { max-width: 720px; }
.hero-copy .lede { margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-hint { margin: 14px 0 0; }
.cockpit-preview {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 13px;
  background: rgba(25, 28, 34, 0.86);
  box-shadow: var(--shadow);
}
.cockpit-preview::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(61, 137, 254, 0.4), transparent 45%);
  filter: blur(14px);
  opacity: 0.6;
}
.window-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 7px 10px; border-bottom: 1px solid var(--border-soft); }
.traffic { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.traffic:nth-child(2) { background: #febc2e; }
.traffic:nth-child(3) { background: #28c840; }
.window-title { margin-left: 7px; color: var(--text-3); font-family: var(--mono); font-size: 11px; }
.session-list { display: grid; gap: 10px; padding-top: 13px; }
.session-tile { min-height: 78px; padding: 15px 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-elevated); }
.session-head { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 650; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 14px currentColor; }
.status-dot.wait { background: var(--warn); }
.status-dot.idle { background: #69717e; }
.terminal-line { height: 6px; margin-top: 14px; border-radius: 10px; background: linear-gradient(90deg, #67707d 32%, transparent 32% 37%, #3b414b 37% 74%, transparent 74%); opacity: 0.52; }
.chat-preview { display: flex; min-height: 304px; flex-direction: column; }
.chat-thread { display: grid; flex: 1; align-content: start; gap: 11px; padding: 16px 4px 14px; }
.chat-bubble { display: grid; width: min(76%, 280px); gap: 8px; padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--bg-elevated); }
.chat-bubble-user { justify-self: end; width: min(52%, 190px); background: rgba(61, 137, 254, 0.18); border-color: rgba(61, 137, 254, 0.3); }
.chat-line, .chat-status-line, .chat-input-line { display: block; height: 6px; border-radius: 10px; background: #69717e; opacity: 0.52; }
.chat-line.medium { width: 74%; }
.chat-line.short { width: 48%; }
.chat-status { display: flex; align-items: center; gap: 9px; padding: 4px 4px 0; }
.chat-status .status-dot { width: 7px; height: 7px; flex: 0 0 auto; }
.chat-status-line { width: 88px; background: #4e5865; }
.chat-composer { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px; border: 1px solid var(--border-soft); border-radius: 12px; background: #151820; }
.chat-input-line { flex: 1; min-width: 0; background: #4e5865; }
.chat-send { width: 28px; height: 24px; flex: 0 0 auto; border-radius: 8px; background: rgba(61, 137, 254, 0.72); }
.benefit-section { margin-top: 86px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.benefit-card { min-height: 190px; padding: 24px; }
.benefit-index { display: block; margin-bottom: 44px; color: #76a9ff; font-family: var(--mono); font-size: 12px; }
.benefit-card .muted { margin-top: 11px; }
.product-switch { margin: 38px auto 0; color: var(--text-3); text-align: center; }
.product-switch a { color: var(--text-2); font-weight: 550; }

/* Karten und Formulare */
.card {
  background: linear-gradient(150deg, rgba(30, 34, 42, 0.98), rgba(24, 27, 33, 0.98));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.card.tight { padding: 22px 24px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.card-head h2 { margin: 0; }
.field { margin-top: 18px; }
.field:first-child { margin-top: 0; }
.field label { display: block; margin-bottom: 7px; color: var(--text-2); font-size: 13px; font-weight: 540; }
.field input, .field select, .qty input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #101217;
  color: var(--text);
  font-size: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:hover, .field select:hover, .qty input:hover { border-color: rgba(230, 234, 240, 0.24); }
.field input:focus, .field select:focus, .qty input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field .err { margin-top: 7px; color: var(--danger); font-size: 13px; }
.field-hint { margin-top: 7px; color: var(--text-3); font-size: 12.5px; }
.form-stack { margin-top: 24px; }
.form-actions { margin-top: 24px; }
.auth-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; line-height: 1.5; }
.auth-links .separator { color: #59616d; }

.btn {
  min-height: 44px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: white;
  cursor: pointer;
  font-weight: 650;
  line-height: 1.15;
  text-decoration: none;
  transition: transform 0.14s, background 0.14s, border-color 0.14s;
}
.btn:hover { color: white; background: var(--accent-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.block { width: 100%; }
.btn.secondary { border-color: var(--border); background: var(--surface-2); color: var(--text); }
.btn.secondary:hover { background: var(--surface-3); color: var(--text); }
.btn.ghost { border-color: var(--border); background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { border-color: rgba(240, 106, 115, 0.38); background: rgba(240, 106, 115, 0.08); color: #ff969d; }
.btn.danger:hover { background: rgba(240, 106, 115, 0.15); color: #ffacb1; }
.btn.sm { min-height: 44px; padding: 8px 12px; font-size: 13px; }
.btn:disabled { opacity: 0.48; cursor: not-allowed; transform: none; }
.center-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Auth-Shell */
.auth-main { padding-top: 46px; padding-bottom: 56px; display: grid; place-items: center; }
.auth-stage { width: min(100%, 960px); display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(380px, 1.1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow); }
.auth-aside { min-height: 570px; padding: 42px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--border-soft); background: radial-gradient(circle at 30% 15%, rgba(61, 137, 254, 0.19), transparent 18rem), #14171d; }
.auth-aside-mark { color: var(--text-3); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.auth-aside .cockpit-preview { box-shadow: none; }
.auth-panel { padding: 54px 56px; display: flex; flex-direction: column; justify-content: center; }
.auth-panel h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.auth-panel .lede { font-size: 16px; }

/* Status, Daten und Listen */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 650; }
.badge.pro { border-color: var(--accent-line); background: var(--accent-soft); color: #91bcff; }
.badge.ok { border-color: rgba(67, 198, 107, 0.38); background: rgba(67, 198, 107, 0.11); color: #70dc90; }
.badge.warn { border-color: rgba(255, 176, 32, 0.38); background: rgba(255, 176, 32, 0.1); color: #ffc35a; }
.badge.muted { color: var(--text-3); }
.flash { margin-bottom: 18px; padding: 13px 15px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; }
.flash.ok { border-color: rgba(67, 198, 107, 0.32); background: rgba(67, 198, 107, 0.08); color: #7add97; }
.flash.err { border-color: rgba(240, 106, 115, 0.34); background: rgba(240, 106, 115, 0.08); color: #ff9aa1; }
.flash.info { color: var(--text-2); }
.flash.warn { border-color: rgba(255, 176, 32, 0.3); background: rgba(255, 176, 32, 0.07); color: #ffd078; }
.verify-banner { align-items: center; flex-wrap: wrap; }
.verify-banner > span { flex: 1 1 300px; }
.rows { display: flex; flex-direction: column; }
.row { min-height: 64px; padding: 14px 0; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--border-soft); }
.row:first-child { border-top: 0; }
.row .grow { min-width: 0; flex: 1; }
.row .name { color: var(--text); font-size: 14.5px; font-weight: 620; }
.row .sub { overflow: hidden; color: var(--text-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.text-link { color: var(--accent-strong); font-size: 14px; font-weight: 620; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.dot-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-2); }
.kvs { display: flex; flex-direction: column; }
.kv { padding: 11px 0; display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--border-soft); font-size: 14px; }
.kv:first-child { padding-top: 0; border-top: 0; }
.kv .k { color: var(--text-2); }
.kv .v { text-align: right; font-weight: 620; }
.buy-group { margin: 14px 0; padding: 14px 0; border-top: 1px solid var(--border-soft); }
.buy-group:first-child { border-top: 0; }
.buy-group-label { margin-bottom: 8px; color: var(--text-3); font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.buy-group .inline-form + .inline-form { margin-left: 7px; }
.progress { height: 8px; margin: 10px 0 16px; overflow: hidden; border-radius: 99px; background: var(--border); }
.progress > span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #78adff); }
.price { margin: 18px 0 3px; font-size: 36px; font-weight: 720; letter-spacing: -0.035em; }
.price .per { color: var(--text-2); font-size: 14px; font-weight: 450; letter-spacing: 0; }
.numeric, .price, .price-equivalent, .tax-note, input[type="number"] { font-variant-numeric: tabular-nums; }

/* Billing v2 */
.pricing-section { margin-top: 88px; scroll-margin-top: 88px; }
.pricing-heading { max-width: var(--content-narrow); margin-bottom: var(--space-5); }
.pricing-heading h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.035em; }
.pricing-form { display: grid; gap: var(--space-5); }
.pricing-form.card { padding: var(--space-6); }
.pricing-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.pricing-form legend { margin-bottom: var(--space-2); color: var(--text-2); font-size: 13px; font-weight: 650; }
.cycle-toggle, .owner-tier { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cycle-toggle legend, .owner-tier legend { flex-basis: 100%; }
.cycle-toggle label, .owner-tier label {
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
}
.cycle-toggle label:has(input:checked), .owner-tier label:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}
.cycle-toggle input, .owner-tier input { width: 18px; height: 18px; accent-color: var(--accent); }
.tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.tier-choice {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.tier-choice-head { min-height: 48px; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.tier-choice .price { margin: var(--space-4) 0 0; }
.price-equivalent { margin: 0; color: var(--text-2); font-size: 14px; font-weight: 620; }
.cycle-month { display: none; }
.pricing-form:has(input[name="cycle"][value="month"]:checked) .cycle-year { display: none; }
.pricing-form:has(input[name="cycle"][value="month"]:checked) .cycle-month { display: inline; }
.pricing-form:has(input[name="cycle"][value="month"]:checked) p.cycle-month { display: block; }
.pricing-form:has(input[name="cycle"][value="month"]:checked) .tier-choice-head .badge { visibility: hidden; }
.tax-note { margin: var(--space-1) 0 var(--space-4); color: var(--text-3); font-size: 12px; }
.tier-choice > label, .storage-choice > label { display: block; margin-top: var(--space-4); color: var(--text-2); font-size: 13px; font-weight: 650; }
.tier-choice .quantity-stepper, .storage-choice .quantity-stepper { margin-top: var(--space-2); }
.storage-choice { padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface-2); }
.storage-choice > label { margin-top: 0; }
.pricing-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pricing-actions .btn { flex: 1 1 240px; }
.trial-terms { margin: 0; padding: var(--space-4); border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--text-2); }
.state-note { margin: 0; }
.product-slots { gap: var(--space-5); }
.product-slot > .card-head { align-items: flex-start; }
.product-slot .eyebrow { margin-bottom: var(--space-1); }
.slot-summary { display: grid; gap: var(--space-4); }
.operation-panel { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.operation-panel .card-head { margin-bottom: var(--space-3); }
.operation-panel .btn { margin-top: var(--space-3); }
.operation-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.operation-state { padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); }
.operation-state h4 { margin-bottom: var(--space-2); font-size: 13px; color: var(--text-2); }
.billing-slot-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4); }
.billing-slot-actions > form { margin: 0; }
.billing-change, .cancel-confirm { margin: 0; }
.billing-change summary, .cancel-confirm summary { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent); font-weight: 650; cursor: pointer; }
.billing-change summary:focus-visible, .cancel-confirm summary:focus-visible { border-radius: var(--radius-sm); }
.billing-change[open], .cancel-confirm[open] { flex-basis: 100%; }
.cancel-confirm > p { margin: var(--space-3) 0; }
.cancel-confirm > form { margin-top: var(--space-3); }
.billing-preview-form { margin-top: var(--space-3); }
.billing-preview-result { min-height: 44px; padding: var(--space-3); border-radius: var(--radius-sm); }
.billing-preview-result:empty { display: none; }
.billing-preview-result.loading { border: 1px solid var(--border); background: var(--surface-2); }
.billing-preview-result.success { border: 1px solid var(--accent-line); background: var(--accent-soft); }
.billing-preview-result.error { border: 1px solid var(--danger); background: var(--surface-2); }
.billing-preview-result h3 { margin-bottom: var(--space-3); }
.billing-preview-result ul { margin: 0; padding-left: var(--space-4); color: var(--text-2); }
.quantity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.storage-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.storage-metrics > div { padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-2); }
.storage-metrics span, .storage-metrics strong { display: block; }
.storage-metrics span { color: var(--text-3); font-size: 12px; }
.storage-metrics strong { margin-top: var(--space-1); font-variant-numeric: tabular-nums; }
.pool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.assignment-status { margin-top: var(--space-2); overflow: visible; white-space: normal; }
.assignment-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) var(--space-1) var(--space-1) 0; }
.member-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.keybox, .key { margin: 12px 0; padding: 13px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #101217; }
.keybox code, .key code { min-width: 0; flex: 1; color: var(--text); font-family: var(--mono); font-size: 12px; word-break: break-all; }
.copy { padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 650; }
.copy:hover { background: var(--surface-3); }
.copy.done, .copy.ok { color: var(--ok); }

/* Funnel-Kompatibilität */
.center-wrap { flex: 1; width: 100%; padding: 42px 24px; display: grid; place-items: center; }
.funnel-wrap { width: min(100%, 500px); display: grid; place-items: center; gap: 18px; }
.funnel-wrap .card { width: 100%; }
.funnel-brand { display: flex; justify-content: center; }
.funnel-wrap .btn { width: 100%; margin-top: 22px; }
.quantity-stepper { width: 100%; display: grid; grid-template-columns: 44px minmax(64px, 1fr) 44px; align-items: stretch; gap: var(--space-2); margin-top: var(--space-2); }
.quantity-stepper input[type="number"] { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); text-align: center; font-variant-numeric: tabular-nums; }
.quantity-stepper input[type="number"]:hover { border-color: rgba(230, 234, 240, 0.24); }
.quantity-stepper input[type="number"]:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.quantity-stepper input[type="number"]::-webkit-inner-spin-button, .quantity-stepper input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; }
.quantity-stepper input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.quantity-stepper-button { min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 22px; font-weight: 560; line-height: 1; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.quantity-stepper-button:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-soft); }
.quantity-stepper-button:active:not(:disabled) { transform: translateY(1px); background: var(--surface-3); }
.quantity-stepper-button:disabled { opacity: 0.42; cursor: not-allowed; }
.total { margin-top: 12px; color: var(--text-2); font-size: 14px; }
.lang-switch { color: var(--text-3); font-size: 12px; }
.lang-switch a { color: var(--text-2); text-decoration: none; }
.lang-switch a:hover, .lang-switch a.active, .lang-switch strong { color: var(--text); font-weight: 650; }

footer { border-top: 1px solid var(--border-soft); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--text-3); font-size: 12.5px; }
.footer-links { display: flex; align-items: center; gap: 14px; }
.footer-links a { color: var(--text-2); }

@media (max-width: 840px) {
  .nav-inner { padding: 0 20px; gap: 12px; }
  .nav-products { display: none; }
  .nav-links { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a, .nav-links button.linklike { white-space: nowrap; }
  main { padding: 42px 20px 68px; }
  .landing-main { padding-top: 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 42px; min-height: 0; }
  .cockpit-preview { max-width: 560px; }
  .benefit-section { margin-top: 64px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-card { min-height: auto; }
  .benefit-index { margin-bottom: 24px; }
  .tier-grid { grid-template-columns: 1fr; }
  .pool-grid { grid-template-columns: 1fr; }
  .operation-states { grid-template-columns: 1fr; }
  .quantity-grid { grid-template-columns: 1fr; }
  .auth-stage { grid-template-columns: 1fr; max-width: 600px; }
  .auth-aside { display: none; }
  .auth-panel { padding: 46px; }
}

@media (max-width: 560px) {
  .nav-inner { min-height: 60px; }
  .brand .brand-word { display: none; }
  .brand svg { width: 27px; height: 27px; }
  .nav-links { margin-left: auto; }
  .nav-links a, .nav-links button.linklike { min-height: 44px; padding: 8px 10px; font-size: 13px; }
  .nav-links .nav-cta { margin-left: 2px; }
  main { padding: 34px 16px 54px; }
  .landing-main { padding-top: 38px; }
  h1 { font-size: clamp(2rem, 11vw, 2.7rem); }
  .hero-copy .lede { margin-top: 16px; }
  .hero-actions .btn { flex: 1 1 160px; }
  .card { padding: 22px; border-radius: 18px; }
  .auth-main { padding: 22px 12px 38px; }
  .auth-stage { border-radius: 20px; }
  .auth-panel { padding: 32px 24px; }
  .auth-panel h1 { font-size: 2rem; }
  .auth-links { flex-direction: column; gap: 5px; }
  .auth-links .separator { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .pricing-form.card { padding: 20px; }
  .tier-choice { padding: 20px; }
  .tier-choice-head { flex-direction: column; }
  .storage-metrics { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-wide { grid-column: auto; }
  .row { align-items: flex-start; flex-wrap: wrap; }
  .row form, .row .btn { margin-left: 52px; }
  .invoice-row .grow { flex: 1 1 180px; }
  .invoice-row .sub { overflow: visible; text-overflow: clip; white-space: normal; }
  .invoice-row .btn { margin-left: auto; }
  .center-actions > .btn, .center-actions > form { flex: 1 1 100%; }
  .center-actions > form .btn { width: 100%; }
  .kv { align-items: flex-start; flex-direction: column; gap: 4px; }
  .kv .v { text-align: left; }
  .buy-group .inline-form { display: block; margin: 7px 0 0; }
  .buy-group .inline-form + .inline-form { margin-left: 0; }
  .buy-group .btn { width: 100%; }
  .footer-inner { padding: 24px 18px; align-items: flex-start; flex-direction: column; gap: 12px; }
  .footer-links { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}