/* Smile.ONX WALL Markenfarben (Hell + Dunkel) */
:root {
  --primary: #D5FA42;
  --primary-dark: #C9EE32;
  --hub-link: #527032;
  --hub-button-text: #152C2D;
  --doc-brand: #112B37;
  --wall-page: #FAFBF7;
  --wall-ink: #152C2D;
  --wall-muted: #62685F;
  --wall-border: #DCE0D6;
  --wall-petrol: #112B37;
  --wall-lime: #D5FA42;
  --wall-soft: #F0F2EA;
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html, body {
  font-family: var(--font-sans);
}
html[data-theme="light"],
html:not([data-theme="dark"]) {
  color-scheme: light;
}
html[data-theme="light"] body,
html:not([data-theme="dark"]) body {
  background: #FAFBF7;
  color: #152C2D;
}
html[data-theme="light"] .cc-app,
html:not([data-theme="dark"]) .cc-app {
  --primary: #D5FA42;
  --primary-dark: #C9EE32;
  --cc-accent: #D5FA42;
  --cc-accent-light: #D5FA42;
  --cc-accent-tint: color-mix(in srgb, #D5FA42 22%, white);
  --cc-hero-gradient: linear-gradient(180deg, color-mix(in srgb, #D5FA42 28%, #FAFBF7), #FAFBF7 88%);
  --cc-bg: #FAFBF7;
  --cc-surface: #ffffff;
  --cc-border: #DCE0D6;
  --cc-text: #152C2D;
  --cc-muted: #62685F;
  background: #FAFBF7;
  color: #152C2D;
}
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="dark"] .cc-app {
  --primary: #D5FA42;
  --primary-dark: #C9EE32;
  --cc-accent: #D5FA42;
  --cc-accent-light: #D5FA42;
  --cc-accent-tint: color-mix(in srgb, #D5FA42 28%, transparent);
  --hub-link: #D5FA42;
  --hub-button-text: #152C2D;
}
.cc-rail {
  background: #112B37 !important;
  color: #F3F6F4 !important;
  border-right: 1px solid rgba(255,255,255,.08);
}
.cc-rail__link, .cc-rail__label, .cc-rail__username, .cc-rail__userrole {
  color: #F3F6F4 !important;
}
.cc-rail__link.is-active,
.cc-rail__link:hover {
  background: rgba(213, 250, 66, 0.14) !important;
  color: #D5FA42 !important;
}
.cc-rail__avatar {
  background: #D5FA42 !important;
  color: #152C2D !important;
}
.cc-content .btn-primary,
.cc-content .btn-primary:link,
.cc-content a.btn-primary,
.btn-primary,
.btn-primary:link {
  background: #D5FA42 !important;
  border-color: #D5FA42 !important;
  color: #152C2D !important;
}
.cc-content .btn-primary:hover,
.btn-primary:hover {
  background: #C9EE32 !important;
  border-color: #C9EE32 !important;
  color: #152C2D !important;
}
html[data-theme="light"] a:not(.btn):not(.cc-rail__link):not(.cc-rail__sublink),
html:not([data-theme="dark"]) a:not(.btn):not(.cc-rail__link):not(.cc-rail__sublink) {
  color: #527032;
}
h1, h2, .cc-hero-band h1, .page-header h1 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] .cc-hero-band h1,
html[data-theme="light"] .page-header h1,
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) .cc-hero-band h1,
html:not([data-theme="dark"]) .page-header h1 {
  color: #152C2D;
}
.portal-app {
  --portal-accent: #D5FA42;
  --portal-accent-dark: #C9EE32;
  --portal-accent-tint: color-mix(in srgb, #D5FA42 22%, white);
  --color-brand: #D5FA42;
  --color-brand-hover: #C9EE32;
  --color-brand-active: #C9EE32;
  --color-brand-tint: color-mix(in srgb, #D5FA42 22%, white);
}
::selection {
  background: #D5FA42;
  color: #152C2D;
}