/**
 * Levels 2026 design tokens.
 *
 * Source: the Oxygen design system of levels.dev (oracle: theme-oracle/assets/css/universal.css,
 * :root blocks + global classes). Every value here is identical to the oracle; the Oxygen name
 * is given in the trailing comment. This is the ONLY file with raw colour values.
 *
 * Schemes: the site defaults to DARK. The scheme class sits on <html>:
 *   html.lvl-dark   dark scheme (default, set server-side, removed by theme.js when the
 *                   visitor switched to light in this browser session)
 *   no class        light scheme
 * Blocks only use the semantic tokens (--lvl-color-text, --lvl-color-bg, accents);
 * they never need to know which scheme is active.
 *
 * Fluid sizes use `cqw` exactly like the oracle. No wrapper on this site sets
 * `container-type`, so cqw resolves to the small viewport width (svw). A block that sets
 * `container-type: inline-size` on a wrapper makes these tokens relative to that wrapper
 * (the oracle does this on the case meta columns only). Do not add container-type casually.
 */

@font-face {
	font-family: "AT Aero Light";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/AtAero-Light.woff2") format("woff2");
}

@font-face {
	font-family: "AT Aero Medium";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/AtAero-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "AT Aero Retina";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/AtAero-Retina.woff2") format("woff2");
}

:root {
	/* ---------- Brand palette (scheme independent) ---------- */
	--lvl-color-shade-white: #f3f5fc;            /* --text-shade-white */
	--lvl-color-light-white: #f3f5fc80;          /* --text-light-white */
	--lvl-color-black-brand: #090920;            /* --text-black-brand */
	--lvl-color-white: #ffffff;                  /* toggle knob, .btn--large, .js-mode-active */
	--lvl-color-grey: #434456;                   /* .border-3, gform icon cards hover */
	--lvl-color-timeline-track: #e3e3e3;         /* .timeline_progress-bar (timeline block) */
	--lvl-color-rule: #808080;                   /* UA hr colour "gray": border of the separator style "Abschnittswechsel" */
	--lvl-color-violet-glow: #9580ff;            /* toggle knob shadow, .text--blogkachel:hover (fixed) */
	--lvl-color-card-border: #8b8bc3;            /* .lvl-guide-card border (post-cards block) */
	--lvl-color-icon-dark: #333333;              /* .lvl--channel-icon (channels block) */
	--lvl-color-discord: #5865f2;                /* Discord logo fill (channels block) */
	--lvl-color-glass: rgba(255, 255, 255, 0.15);        /* reel play button (lvl-hero-video) */
	--lvl-color-glass-hover: rgba(255, 255, 255, 0.3);
	--lvl-color-glass-border: rgba(255, 255, 255, 0.4);

	/* Newsletter card (blog posts, Gravity Forms Form 4). Live levels.dev (plugin
	   levels-feedback-form, .lvl-theme) hard-codes these, so they are the same in BOTH
	   schemes: html.lvl-dark does not override them. */
	--lvl-color-form-card: #ffffff;              /* .lvl-theme --lvl-bg: card background */
	--lvl-color-form-field: #f7f7fb;             /* .lvl-theme --lvl-surface: input fill */
	--lvl-color-form-border: #d8d8e8;            /* .lvl-theme --lvl-border: input border */
	--lvl-color-form-muted: #5a5a7a;             /* .lvl-theme --lvl-text-muted: description */
	--lvl-color-form-text: var(--lvl-color-black-brand);   /* .lvl-theme --lvl-text, button fill */
	--lvl-color-form-on-button: var(--lvl-color-shade-white); /* .lvl-theme --lvl-btn-fg */

	/* Funnel quiz cards (acf/lvl-form, GF class levels-funnel). Live universal.css
	   "Funnel-Styles" hard-codes them: same in BOTH schemes. */
	--lvl-color-funnel-card: #0d0e1f;            /* .gchoice label background */
	--lvl-color-funnel-card-border: #22233a;     /* .gchoice label border */
	--lvl-color-funnel-icon-bg: #13142a;         /* icon band without accent */
	--lvl-color-funnel-green: #8aff80;
	--lvl-color-funnel-pink: #ff80bf;
	--lvl-color-funnel-red: #f3795e;             /* KI funnel "ai_no" */
	--lvl-color-funnel-teal: #80ffea;
	--lvl-color-funnel-violet: #9580ff;
	--lvl-color-funnel-yellow: #ffff80;
	--lvl-color-funnel-orange: #ffcf80;

	--lvl-color-brand-yellow: #e8d15e;           /* --brand-yellow */
	--lvl-color-brand-orange: #f09162;           /* --brand-orange */
	--lvl-color-brand-rose: #ce7aa3;             /* --brand-rose */
	--lvl-color-brand-green: #8cb369;            /* --brand-green */
	--lvl-color-brand-violet: #8d8bd9;           /* --brand-violet */
	--lvl-color-brand-teal: #6cb4b1;             /* --brand-teal */
	--lvl-color-brand-yellow-rgb: 232, 209, 94;  /* --brand-yellow-rgb */
	--lvl-color-brand-orange-rgb: 240, 145, 98;  /* --brand-orange-rgb */
	--lvl-color-brand-rose-rgb: 206, 122, 163;   /* --brand-rose-rgb */
	--lvl-color-brand-violet-rgb: 141, 139, 217; /* --brand-violet-rgb */
	--lvl-color-brand-teal-rgb: 108, 180, 177;   /* --brand-teal-rgb */

	/* ---------- Semantic colours: LIGHT scheme ---------- */
	--lvl-color-text: var(--lvl-color-black-brand);    /* --text-color */
	--lvl-color-bg: var(--lvl-color-shade-white);      /* --bg-color */
	--lvl-color-inverse: #ffffff;                      /* --inverse-color */
	--lvl-color-yellow: var(--lvl-color-brand-yellow); /* --yellow */
	--lvl-color-pink: var(--lvl-color-brand-rose);     /* --pink */
	--lvl-color-orange: var(--lvl-color-brand-orange); /* --orange */
	--lvl-color-violet: var(--lvl-color-brand-violet); /* --violet */
	--lvl-color-teal: var(--lvl-color-brand-teal);     /* --teal */
	--lvl-color-green: var(--lvl-color-brand-green);   /* --green */
	--lvl-color-yellow-rgb: var(--lvl-color-brand-yellow-rgb);
	--lvl-color-pink-rgb: var(--lvl-color-brand-rose-rgb);
	--lvl-color-orange-rgb: var(--lvl-color-brand-orange-rgb);
	--lvl-color-violet-rgb: var(--lvl-color-brand-violet-rgb);
	--lvl-color-teal-rgb: var(--lvl-color-brand-teal-rgb);
	--lvl-color-primary: var(--lvl-color-brand-rose);  /* --brand-primary-color */
	--lvl-color-selection: var(--lvl-color-brand-rose); /* ::selection */
	--lvl-color-logo: var(--lvl-color-black-brand);    /* #logo */

	/* Gradients */
	--lvl-gradient-warm: linear-gradient(90deg, var(--lvl-color-yellow) 0%, var(--lvl-color-orange) 100%); /* --gradient-warm */
	--lvl-gradient-text-warm: linear-gradient(90deg, var(--lvl-color-yellow) 0%, var(--lvl-color-orange) 50%, var(--lvl-color-pink) 100%); /* .bg-gradient--warm */
	--lvl-gradient-text-cold: linear-gradient(90deg, var(--lvl-color-violet) 0%, var(--lvl-color-teal) 50%, var(--lvl-color-green) 100%); /* .bg-gradient--cold */
	--lvl-gradient-primary: linear-gradient(180deg, rgba(149, 128, 255, 1), rgba(149, 128, 255, 0.2)); /* .bg-gradient--primary (channels block, both schemes) */

	/* Shadows */
	--lvl-shadow-glow: 0 0 1.25rem 0 var(--lvl-color-violet);        /* .btn:hover */
	--lvl-shadow-glow-brand: 0 0 1.25rem 0 var(--lvl-color-brand-violet); /* .lvl-guide-card:hover, highlight cards */

	/* Mask icons (benefit lists): --check-icon, --icon-x. Used with mask-image, so the
	   fill colour inside the data URI is irrelevant. */
	--lvl-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 23'%3E%3Cpath fill='black' d='M10.6088 20.7898L2.24284 12.4238L0 14.6666L6.50076 21.1674C8.7684 23.435 12.4449 23.4349 14.7124 21.1674L33.5139 2.24069L31.2733 0L10.6088 20.7898Z'/%3E%3C/svg%3E");
	--lvl-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 31'%3E%3Cpath fill='black' d='M30.4289 2.15529L17.2932 15.291L30.4268 28.4244L28.2736 30.5776L16.9304 19.2344C14.7513 17.0554 14.7513 13.5224 16.9304 11.3433L28.2736 0L30.4289 2.15529ZM0 28.5499L13.1357 15.4142L0.00206985 2.28074L2.15529 0.127518L13.4985 11.4708C15.6776 13.6498 15.6777 17.1828 13.4985 19.3619L2.15529 30.7052L0 28.5499Z'/%3E%3C/svg%3E");

	/* ---------- Typography ---------- */
	--lvl-font-light: "AT Aero Light", sans-serif;    /* body */
	--lvl-font-medium: "AT Aero Medium", sans-serif;  /* h1-h6, .label, .h1-style */
	--lvl-font-retina: "AT Aero Retina", sans-serif;  /* .body-retina */

	--lvl-fs-mega: clamp(3rem, 8cqw, 6.75rem);        /* --base-mega, .mega */
	--lvl-fs-h1: clamp(1.6rem, 3.89cqw, 3.5rem);      /* --h1-base */
	--lvl-fs-h2: clamp(1.4rem, 3cqw, 2.5rem);         /* --h2-base */
	--lvl-fs-h3: 2rem;                                /* h3-h6 */
	--lvl-fs-lg: clamp(1.1rem, 1.8cqw, 1.4rem);       /* --base-lg */
	--lvl-fs-body: 1.25rem;                           /* body */
	--lvl-fs-base: 1rem;                              /* 16px: toggle, Oxygen body default */
	--lvl-fs-xs: clamp(0.8rem, 2cqw, 1rem);           /* --base-xs, .text--xs, .label */
	--lvl-fs-sm: 0.875rem;                            /* 14px: footer copy (.footer-text), .larndmark < 768px */
	--lvl-fs-menu-mobile: 1.5rem;                     /* off-canvas menu items */

	--lvl-lh-body: 1.6;
	--lvl-lh-h1: normal;
	--lvl-lh-h2: 1.2;
	--lvl-lh-h3: 1.3;
	--lvl-lh-tight: 1;                                /* .h1-style, .btn */
	--lvl-lh-menu: 1.15;                              /* .lvl-hover-inner */

	--lvl-fw-light: 300;                              /* headings as authored in Oxygen */
	--lvl-fw-regular: 400;
	--lvl-fw-medium: 500;                             /* .btn, .label, .h1-style */

	--lvl-ls-button: 0.1rem;                          /* .btn letter-spacing */
	--lvl-ls-label: 0.25rem;                          /* .label, .larndmark letter-spacing (4px) */

	/* ---------- Spacing ---------- */
	--lvl-space-5: clamp(0.125rem, 0.3cqw, 0.3125rem);           /* --base-5 */
	--lvl-space-20: clamp(0.8rem, 1.8cqw, 1.25rem);   /* --base-20, .mb-20 */
	--lvl-space-40: clamp(1.2rem, 3.2cqw, 2.5rem);    /* --base-40, .mb-40 */
	--lvl-space-50: clamp(1.4rem, 3.8cqw, 3.125rem);  /* --base-50, .gap-50 */
	--lvl-space-60: clamp(1.8rem, 4.2cqw, 3.75rem);   /* --base-60 */
	--lvl-space-78: clamp(3rem, 5cqw, 4.875rem);      /* --base-78 */
	--lvl-space-6rem: clamp(2.4rem, 7cqw, 6rem);      /* --base-6rem, .mb-6 */
	--lvl-space-100: clamp(3.4rem, 9cqw, 6.2rem);     /* --base-100, section padding, .mb-100 */
	--lvl-space-xs: 0.625rem;                         /* 10px: .mb-10, menu link padding */
	--lvl-space-s: 1rem;                              /* 16px */
	--lvl-space-m: 1.875rem;                          /* --pd-m 30px */
	--lvl-space-l: 3.125rem;                          /* 50px: footer column gap */
	--lvl-grid-size: 6.25rem;                         /* --grid-size 100px */

	/* ---------- Layout ---------- */
	--lvl-container-max: 96.25rem;                    /* 1540px: .ct-section-inner-wrap max-width */
	--lvl-container-pad: 1.25rem;                     /* 20px: inner wrap side padding */
	--lvl-section-pad: var(--lvl-space-100);          /* inner wrap top/bottom padding */
	--lvl-width-text: 50rem;                          /* 800px: .max-width-text, .w-800 */
	--lvl-width-narrow: 62.5rem;                      /* 1000px: .w-1000 */
	--lvl-width-700: 43.75rem;                        /* 700px: .w-700 */
	--lvl-width-case-grid: 90rem;                     /* 1440px: case grid max width */
	--lvl-header-height: 6rem;                        /* 96px at >= 992px, measured */
	--lvl-z-header: 2147483640;                       /* sticky header (Oxygen value) */
	--lvl-z-offcanvas: 2147483642;

	/* ---------- Radii ---------- */
	--lvl-radius-btn: 1.875rem;                       /* .btn */
	--lvl-radius-pill: 62.5rem;                        /* .btn--large */
	--lvl-radius-toggle: 3rem;                        /* .toggle-dark-mode */
	--lvl-radius-label: 1rem;                         /* .label--bg */
	--lvl-radius-card: 1.25rem;                       /* .radius-20, cards */
	--lvl-radius-round: 50%;

	/* ---------- Motion ---------- */
	--lvl-duration-fast: 0.15s;                       /* .transition-default, toggle knob */
	--lvl-duration-menu: 0.5s;                        /* menu hover roll */
	--lvl-duration-offcanvas: 0.4s;                   /* off-canvas fade-left */
	--lvl-duration-reveal: 1s;                        /* AOS fade-up (.fade-in-animation) */
	--lvl-ease-out: ease-out;
	--lvl-ease-menu: cubic-bezier(0.05, 0.93, 0.36, 1);
	--lvl-ease-reveal: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* AOS ease-in-out-quad */
	--lvl-reveal-distance: 6.25rem;                     /* AOS fade-up distance */
	--lvl-filter-logo: brightness(0) saturate(100%); /* client logos (acf/lvl-client-logos): black; oracle left the white logos unfiltered (invisible) */
}

/* ---------- Semantic colours: DARK scheme (default) ----------
   `:root .editor-styles-wrapper` = the block editor canvas, which always shows the
   site default (dark). WordPress leaves selectors that already contain the wrapper
   untouched when it scopes add_editor_style() files; on the front end it never matches. */
.lvl-dark,
:root .editor-styles-wrapper {
	--lvl-color-text: var(--lvl-color-shade-white);
	--lvl-color-bg: var(--lvl-color-black-brand);
	--lvl-color-inverse: var(--lvl-color-black-brand);
	--lvl-color-yellow: #ffff80;
	--lvl-color-pink: #ff80bf;
	--lvl-color-orange: #ffca80;
	--lvl-color-violet: #9580ff;
	--lvl-color-teal: #80ffea;
	--lvl-color-green: #8aff80;
	--lvl-color-yellow-rgb: 255, 255, 128;
	--lvl-color-pink-rgb: 255, 128, 191;
	--lvl-color-orange-rgb: 255, 202, 128;
	--lvl-color-violet-rgb: 149, 128, 255;
	--lvl-color-teal-rgb: 128, 255, 234;
	--lvl-color-primary: #ff80bf;
	--lvl-color-logo: var(--lvl-color-shade-white);

	/* Re-declared so they pick up the dark accents. */
	--lvl-gradient-warm: linear-gradient(90deg, var(--lvl-color-yellow) 0%, var(--lvl-color-orange) 100%);
	--lvl-gradient-text-warm: linear-gradient(90deg, var(--lvl-color-yellow) 0%, var(--lvl-color-orange) 50%, var(--lvl-color-pink) 100%);
	--lvl-gradient-text-cold: linear-gradient(90deg, var(--lvl-color-violet) 0%, var(--lvl-color-teal) 50%, var(--lvl-color-green) 100%);
	--lvl-shadow-glow: 0 0 1.25rem 0 var(--lvl-color-violet);
	--lvl-filter-logo: brightness(0) saturate(100%) invert(1); /* body.dark-mode .dark-logos .lvl--logo-client */
}