@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Oswald:wght@400;500;600;700&display=swap');

/* Shared Bitwolt surface finish. Loaded last on user-facing pages.
   The homepage owns its art direction; auth guards, layout, animated scenes,
   charts, form fields, embedded providers and modal geometry remain unchanged. */
body:not(.bw-page-home) {
  --bw-ui: "Manrope", system-ui, sans-serif;
  --bw-display: "Manrope", system-ui, sans-serif;
  font-family: var(--bw-ui);
}

/* Sidebar workspaces are offset from the viewport center. Keep only their
   decorative field inside that workspace, without clipping content or dialogs. */
body:not(.bw-page-home) :is(.mp-workspace, .member-app-main) > .bw-page-ambient {
  left: 0;
  width: 100%;
  transform: none;
}

body:not(.bw-page-home) :is(.bw-header .bw-logo, .footer-logo, .mp-brand, .bitwolt-brand),
body:not(.bw-page-home) #login .logo,
body:not(.bw-page-home):has(#cb-status) .brand {
  font-family: "Oswald", sans-serif !important;
}

body:not(.bw-page-home) :is(
  .bonis-title, .market-title, .auftrag-hero-copy h1, .bw-faq-hero h1
) {
  font-family: var(--bw-display) !important;
  font-size: clamp(2.6rem, 5.25vw, 4.8rem) !important;
  font-weight: 650 !important;
  line-height: 1.08 !important;
  letter-spacing: -.05em !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

body:not(.bw-page-home) :is(
  .bwpr-head h1, .bw-contact-hero h1, .member-page-head h1,
  .mp-page-head h1, .legal-head h1, .member-authority-page .form-header
) {
  font-family: var(--bw-display) !important;
  font-weight: 600;
  line-height: 1.1 !important;
  letter-spacing: -.045em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

body:not(.bw-page-home) .legal-head h1 {
  font-size: clamp(2.05rem, 4.7vw, 3.8rem);
}

body:not(.bw-page-home) #login .auth-visual-copy h1 {
  font-size: clamp(2.7rem, 4.15vw, 4.8rem);
  line-height: 1.1;
  letter-spacing: -.05em;
}

body:not(.bw-page-home) #login #auth-title {
  font-size: clamp(2.2rem, 3.1vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.04em;
  overflow-wrap: break-word;
}

body:not(.bw-page-home) :is(.service-card strong, .service-order-summary h3, .service-form-card h3, .service-success h3) {
  font-family: var(--bw-ui);
  letter-spacing: -.025em;
}

@media (max-width: 680px) {
  body:not(.bw-page-home) :is(.mp-page-head h1, .member-page-head h1) {
    font-size: clamp(1.9rem, 8.5vw, 2.8rem);
    hyphens: none;
  }
  body:not(.bw-page-home) .mp-grid-2 { grid-template-columns: minmax(0, 1fr); }
  body:not(.bw-page-home) :is(.mp-panel, .member-panel) { min-width: 0; }
  body:not(.bw-page-home) :is(.mp-panel-head, .member-panel-head, .mp-progress-meta) { flex-wrap: wrap; }
  body:not(.bw-page-home) :is(.mp-panel-head, .member-panel-head) > div { min-width: 0; max-width: 100%; }
  body:not(.bw-page-home) :is(.mp-panel-head h2, .member-panel-head h2) { overflow-wrap: break-word; hyphens: auto; }
}

html[data-design="future"] body:not(.bw-page-home) {
  --bw-brand-line: rgba(132, 219, 236, .22);
  --bw-brand-quiet-line: rgba(132, 219, 236, .15);
  --bw-brand-muted: #b4cad5;
  --bw-brand-cyan: #87e4ed;
  --bw-brand-mint: #a3e7c0;
  --bw-brand-button: linear-gradient(115deg, #31d3ee 3%, #91f0d6 97%);
  --bw-brand-button-hover: linear-gradient(115deg, #55dff1 3%, #b0f8df 97%);
  --bw-brand-panel:
    radial-gradient(ellipse 78% 88% at 66% 123%, rgba(23, 202, 224, .21), transparent 100%),
    linear-gradient(166deg, #091925 9%, #0c2635 65%, #123e4b);
  --bw-brand-panel-soft:
    radial-gradient(ellipse 75% 72% at 69% 126%, rgba(23, 196, 219, .12), transparent 100%),
    linear-gradient(166deg, #091722 12%, #0b202c 68%, #0e303b);
  --bw-brand-panel-feature:
    radial-gradient(ellipse 85% 85% at 49% 126%, rgba(37, 215, 232, .3), transparent 100%),
    radial-gradient(ellipse 47% 50% at 91% 105%, rgba(137, 225, 171, .09), transparent 100%),
    linear-gradient(166deg, #091a26 7%, #0c2c3b 64%, #114452);
  --bw-brand-panel-mint:
    radial-gradient(ellipse 83% 82% at 76% 120%, rgba(99, 216, 184, .19), transparent 100%),
    linear-gradient(163deg, #0b1b25 9%, #112d36 65%, #16423f);
  --bw-brand-page-background:
    radial-gradient(ellipse 60% 560px at 82% 190px, rgba(11, 116, 157, .15), transparent 100%),
    radial-gradient(ellipse 43% 540px at 8% 690px, rgba(77, 161, 126, .075), transparent 100%),
    linear-gradient(180deg, #07131d, #060e17 66%, #050d14);
  --bw-readable-accent: #87e4ed;
  --bw-readable-positive: #a3e7c0;
  --bw-readable-ink: #eaf8fc;
  --bw-readable-muted: #b4cad5;
  --bw-muted: #afc3cf;
  background: var(--bw-brand-page-background) !important;
}

/* These existing app shells previously covered the shared page atmosphere. */
html[data-design="future"] body:not(.bw-page-home) :is(.member-app-main, .mp-shell) {
  background: transparent !important;
}

/* Primary content surfaces: actual public and member components, not generic
   cards, inputs or nested chart/control containers. */
html[data-design="future"] body:not(.bw-page-home) :is(
  .bonis-summary,
  .reward-editorial,
  .bwpr-panel,
  .bwpr-result,
  .market-terminal,
  .energy-now__card,
  .bw-cp-panel,
  .member-panel,
  .bw-attention-center,
  .bw-order-compact,
  .service-card,
  .service-form-card,
  .service-order-summary,
  .mp-panel:not(.mp-panel--flat),
  .mp-identity
) {
  background: var(--bw-brand-panel) !important;
  border-color: var(--bw-brand-line) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(173, 230, 241, .035) !important;
}

/* Flat profile columns deliberately remain open within the workspace. */
html[data-design="future"] body:not(.bw-page-home) .mp-panel--flat {
  background: transparent !important;
  box-shadow: none !important;
}

/* High-priority surfaces carry the stronger dark-to-light finish. */
html[data-design="future"] body:not(.bw-page-home) :is(
  .member-energy-card,
  .bwpr-result,
  .service-card--primary,
  .bw-contact-editor
) {
  background: var(--bw-brand-panel-feature) !important;
  border-color: rgba(139, 225, 238, .28) !important;
}

html[data-design="future"] body:not(.bw-page-home) :is(.service-card.is-active, .bw-order-compact.is-open) {
  border-color: rgba(138, 231, 234, .5) !important;
  box-shadow: 0 0 0 3px rgba(55, 209, 225, .07), 0 20px 54px rgba(0, 0, 0, .2) !important;
}

html[data-design="future"] body:not(.bw-page-home) :is(.member-energy-card > p, .member-energy-card__facts span) {
  color: var(--bw-brand-muted);
}

html[data-design="future"] body:not(.bw-page-home) :is(
  .auszahlung-guthaben,
  .reward-editorial__spotlight,
  .bw-reward-panel
) {
  background: var(--bw-brand-panel-mint) !important;
  border-color: rgba(144, 222, 193, .25) !important;
}

html[data-design="future"] body:not(.bw-page-home) :is(
  .legal-card,
  .member-authority-page .form-container,
  .member-authority-page .vollmacht-info,
  .member-profile-page .meinedaten-abschnitt
) {
  background: var(--bw-brand-panel-soft) !important;
  border-color: var(--bw-brand-quiet-line) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .16) !important;
}

/* Editorial pages keep their open structure; light dissolves before its
   container edges rather than making every section a new card. */
html[data-design="future"] body:not(.bw-page-home) :is(
  .onboarding-track,
  .service-mode__compare,
  .auftrag-cta-band,
  .bonis-closing,
  .bw-faq-contact
) {
  background: radial-gradient(ellipse 50% 51% at 54% 49%, rgba(11, 171, 203, .105), transparent 100%);
}

html[data-design="future"] body:not(.bw-page-home) :is(.bonis-summary__head, .market-terminal__head) {
  background: rgba(5, 15, 25, .18);
  border-color: var(--bw-brand-quiet-line);
}

/* Keep low-contrast inherited descriptions readable over the lower light. */
html[data-design="future"] body:not(.bw-page-home) :is(
  .bw-copy,
  .page-lead,
  .market-sub,
  .bonis-lead,
  .welcome-msg
) {
  color: var(--bw-brand-muted) !important;
}

html[data-design="future"] body:not(.bw-page-home) :is(.bw-contact-page, .bw-profile-page) {
  --cp-muted: var(--bw-brand-muted);
  --cp-cyan: var(--bw-brand-cyan);
  --cp-green: var(--bw-brand-mint);
  --cp-border: var(--bw-brand-line);
}

/* Main actions share one treatment. Destructive actions, provider sign-in,
   state controls and disabled behavior retain their existing semantics. */
html[data-design="future"] body:not(.bw-page-home) :is(
  .btn--primary,
  .btn-primary,
  .bw-btn,
  .glow-button:not(.danger),
  .auftrag-button,
  .auszahlung-btn,
  .praemienrechner-button,
  .member-app-btn--primary,
  .mp-btn--primary,
  .bw-cp-button--primary,
  .bw-supply-point__primary,
  .bw-order-compact__action--primary,
  .pill.primary,
  .popup-bestaetigen
) {
  background: var(--bw-brand-button) !important;
  color: #052c36 !important;
  border-color: rgba(116, 234, 228, .68) !important;
  box-shadow: 0 8px 24px rgba(16, 192, 216, .17) !important;
}

html[data-design="future"] body:not(.bw-page-home) #login button[type="submit"] {
  background: var(--bw-brand-button) !important;
  color: #052c36 !important;
  border-color: rgba(116, 234, 228, .68) !important;
  box-shadow: 0 8px 24px rgba(16, 192, 216, .17) !important;
}

html[data-design="future"] body:not(.bw-page-home) :is(
  .btn--ghost,
  .member-app-btn:not(.member-app-btn--primary),
  .mp-btn:not(.mp-btn--primary)
) {
  background: rgba(13, 33, 45, .45) !important;
  border-color: rgba(141, 215, 231, .28) !important;
  color: #d4edf3 !important;
}

html[data-design="future"] body:not(.bw-page-home) :is(
  .member-app-btn--primary,
  .mp-btn--primary,
  .glow-button,
  .bw-cp-button--primary,
  .bw-supply-point__primary,
  .popup-bestaetigen
):is(:disabled, [aria-disabled="true"]) {
  box-shadow: none !important;
}

/* Auth keeps its existing landscape, light trails, stars and native forms. */
html[data-design="future"] body:not(.bw-page-home) #login .auth-panel {
  background:
    radial-gradient(ellipse 76% 54% at 65% 108%, rgba(18, 153, 181, .19), transparent 100%),
    linear-gradient(169deg, #07141f 20%, #0a202d 75%, #0d3340);
}

html[data-design="future"] body:not(.bw-page-home):has(#cb-status) .wrap {
  background: var(--bw-brand-panel-feature);
  border-color: var(--bw-brand-line);
}

/* The sidebar and preview workspace remain structurally identical. */
html[data-design="future"] body:not(.bw-page-home) :is(.mp-sidebar, .mp-topbar) {
  background: linear-gradient(180deg, rgba(6, 18, 28, .97), rgba(9, 28, 38, .97)) !important;
  border-color: var(--bw-brand-quiet-line) !important;
}

html[data-design="future"] body:not(.bw-page-home) .mp-nav a[aria-current="page"] {
  background: linear-gradient(115deg, rgba(38, 180, 207, .18), rgba(102, 220, 177, .07));
  border-color: rgba(125, 223, 233, .24);
  color: #e0f8fc;
}

html[data-design="future"] body:not(.bw-page-home) :is(
  .member-inline-chip,
  .mp-status--good,
  .member-metric--positive .member-metric__value,
  .mp-metric--positive strong,
  .mp-survey-reward
) {
  color: var(--bw-brand-mint);
}

html[data-design="future"] body:not(.bw-page-home) .mp-status--warn {
  color: #f0c66b;
}

html[data-design="future"] body:not(.bw-page-home) :is(
  .member-status,
  .member-eyebrow,
  .mp-eyebrow,
  .mp-demo-badge
) {
  color: var(--bw-brand-cyan);
}

@media (min-width: 981px) {
  html[data-design="future"] body[data-scope="member"] .bw-header {
    background: linear-gradient(180deg, #07131e 20%, #0a2431 100%) !important;
    border-right-color: rgba(126, 213, 235, .18) !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  html[data-design="future"] body:not(.bw-page-home) :is(
    .btn--primary, .btn-primary, .bw-btn, .glow-button:not(.danger),
    .auftrag-button, .auszahlung-btn, .praemienrechner-button,
    .member-app-btn--primary, .mp-btn--primary, .bw-cp-button--primary,
    .bw-supply-point__primary, .bw-order-compact__action--primary,
    .pill.primary, .popup-bestaetigen
  ):hover:not(:disabled):not([aria-disabled="true"]),
  html[data-design="future"] body:not(.bw-page-home) #login button[type="submit"]:hover:not(:disabled) {
    background: var(--bw-brand-button-hover) !important;
    border-color: rgba(164, 246, 237, .86) !important;
    box-shadow: 0 10px 28px rgba(16, 192, 216, .22) !important;
  }

  html[data-design="future"] body:not(.bw-page-home) :is(.service-card, .bw-order-compact):hover {
    border-color: rgba(134, 225, 237, .4) !important;
  }
}

/* Classic uses the same restrained cyan/mint direction with dark, readable
   text. Existing form/focus contrast and semantic states stay authoritative. */
html[data-design="classic"] body:not(.bw-page-home) :is(
  .bonis-summary, .reward-editorial, .bwpr-result, .market-terminal,
  .energy-now__card, .bw-contact-editor,
  .member-panel, .mp-panel:not(.mp-panel--flat), .mp-identity
) {
  background: linear-gradient(162deg, #ffffff 43%, #eef9f9 100%) !important;
  border-color: #c6dce3 !important;
}

html[data-design="classic"] body:not(.bw-page-home) :is(
  .reward-editorial__spotlight, .auszahlung-guthaben, .bw-reward-panel
) {
  background: linear-gradient(160deg, #fff 31%, #eff8ee 100%) !important;
}

html[data-design="classic"] body:not(.bw-page-home) :is(.mp-metric--positive strong, .mp-survey-reward, .mp-status--good) {
  color: #426b40;
}

html[data-design="classic"] body:not(.bw-page-home) .mp-status--warn {
  color: #875b09;
}