*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--font-mono), monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --font-display: "Space Grotesk";
    --font-body: "DM Sans";
    --font-mono: "Geist Mono";
    --radius: 0.875rem;

    /* ============================================================
       DEEP OBSIDIAN DARK MODE — GLOBAL MASTER THEME
       Universal near-black #0A0A0A canvas, glassmorphism surfaces,
       electric blue + gold glowing radial gradients, Dark
       Neo-Minimalism. These are the DEFAULT tokens so the entire
       site (all pages, navbar, footer, components) renders dark.
       ============================================================ */
    --gradient-primary: linear-gradient(
      135deg,
      oklch(0.62 0.16 255),
      oklch(0.45 0.13 272)
    );
    --gradient-gold: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-silver: linear-gradient(
      180deg,
      oklch(0.98 0.008 258),
      oklch(0.82 0.012 258)
    );
    --gradient-subtle: linear-gradient(
      180deg,
      oklch(0.17 0.01 258),
      oklch(0.13 0.008 258)
    );

    /* Obsidian ambient glows — electric blue & gold radial depth */
    --gradient-obsidian-blue: radial-gradient(
      55% 55% at 18% 8%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
    --gradient-obsidian-gold: radial-gradient(
      50% 50% at 85% 90%,
      oklch(0.82 0.14 85 / 0.1),
      transparent 70%
    );

    --background: 0.13 0.006 258; /* universal #0A0A0A obsidian canvas */
    --foreground: 0.95 0.008 258; /* white-silver primary text */
    --card: 0.17 0.01 258; /* glass card surface */
    --card-foreground: 0.95 0.008 258;
    --popover: 0.16 0.01 258; /* glass dropdown / menu surface */
    --popover-foreground: 0.95 0.008 258;

    --primary: 0.6 0.16 255; /* electric blue */
    --primary-foreground: 0.985 0.01 255;

    --secondary: 0.2 0.012 258; /* lifted dark surface */
    --secondary-foreground: 0.9 0.01 258;
    --muted: 0.2 0.012 258; /* muted dark surface */
    --muted-foreground: 0.78 0.012 258; /* bright body gray ~#E4E4E7 (AA on glass) */

    --accent: 0.82 0.14 85; /* gold accent */
    --accent-foreground: 0.13 0.01 258;
    --accent-orange: 0.72 0.17 55;
    --accent-orange-foreground: 0.98 0.01 55;

    --success: 0.62 0.16 155;
    --success-foreground: 0.13 0.01 155;

    --destructive: 0.62 0.2 25;
    --destructive-foreground: 0.98 0.01 25;

    --border: 0.3 0.012 258; /* 1px milky-white glass hairline */
    --input: 0.3 0.012 258;
    --ring: 0.6 0.16 255;

    --chart-1: 0.6 0.16 255;
    --chart-2: 0.82 0.14 85;
    --chart-3: 0.62 0.16 155;
    --chart-4: 0.72 0.15 58;
    --chart-5: 0.6 0.12 230;

    --sidebar: 0.15 0.01 258;
    --sidebar-foreground: 0.95 0.008 258;
    --sidebar-primary: 0.6 0.16 255;
    --sidebar-primary-foreground: 0.985 0.01 255;
    --sidebar-accent: 0.2 0.012 258;
    --sidebar-accent-foreground: 0.9 0.01 258;
    --sidebar-border: 0.3 0.012 258;
    --sidebar-ring: 0.6 0.16 255;

    /* ============================================================
       RESILIENCE — ERROR / FALLBACK / OFFLINE STATES (additive)
       Soft, calm treatments for the global error boundary, per-page
       skeleton placeholders, and offline/network notices. These are
       NEW tokens only — no existing token is modified. They reuse
       the surrounding OKLCH light theme (card, muted, border,
       destructive) so the states feel native, never jarring.
       ============================================================ */
    --error-soft: 0.965 0.02 25; /* soft error card surface (warm tint) */
    --error-soft-border: 0.86 0.07 25; /* calm error hairline */
    --error-soft-foreground: 0.42 0.09 25; /* readable error text */
    --offline-soft: 0.965 0.02 60; /* soft offline notice surface */
    --offline-soft-border: 0.86 0.06 60; /* calm notice hairline */
    --offline-soft-foreground: 0.45 0.07 60; /* readable notice text */

    /* ============================================================
       SITE-WIDE TAGLINE BANNER (additive, shared light theme)
       The brand signature 'Geld, das arbeitet. Business, das
       skaliert. – fragdenjonathan.de' sits at the very top of every
       page, above the header. Uses the FitLine RED register (the
       strongest, most distinctive brand color) as a global token so
       the banner is consistent on ALL pages — not scoped to the
       Fitline subpage. Near-white display text on deep red = AA+
       contrast; the brand suffix is a gold-gradient accent.
       ============================================================ */
    --tg-red: 0.55 0.22 27; /* tagline banner red (FitLine red) */
    --tg-red-deep: 0.45 0.2 24; /* deeper red for gradient / hover */
    --tg-foreground: 0.985 0.01 60; /* near-white text on red */
    --tg-gold: 0.88 0.16 88; /* gold accent for the brand suffix */
    --tg-gold-deep: 0.72 0.16 58; /* deeper gold for gradient */

    --gradient-tg-red: linear-gradient(
      90deg,
      oklch(0.6 0.22 28),
      oklch(0.45 0.2 24)
    );
    --gradient-tg-gold: linear-gradient(
      135deg,
      oklch(0.9 0.15 90),
      oklch(0.72 0.16 58)
    );

    /* ============================================================
       GLOBAL *++TEXT++ BADGE DESIGN RULE (additive)
       Reusable pill badge for any text wrapped in the *++[Text]++
       marker. On DARK backgrounds the badge text is an extremely
       bright, high-contrast gold/champagne accent (NOT pure white —
       the page already carries a lot of white) that harmonizes with
       the Obsidian dark-blue canvas and acts as a marketing
       eyecatcher. On LIGHT backgrounds it flips to deep navy text
       on a soft gold-tinted surface for readability.
       ============================================================ */
    --badge-bg: 0.2 0.012 258; /* frosted obsidian pill surface */
    --badge-border: 0.85 0.14 85; /* bright gold hairline */
    --badge-border-soft: 0.85 0.14 85 / 0.35; /* subtle gold hairline */
    --badge-text: 0.93 0.12 88; /* bright champagne-gold text (dark bg) */
    --badge-text-strong: 0.96 0.11 92; /* ultra-bright champagne highlight */
    --badge-glow: 0.85 0.14 85 / 0.28; /* soft gold eyecatcher glow */

    /* Light-background register — deep navy text on a gold-tinted surface */
    --badge-bg-light: 0.965 0.03 85; /* soft gold-tinted pill surface */
    --badge-border-light: 0.72 0.15 60 / 0.4; /* gold hairline on light */
    --badge-text-light: 0.16 0.04 258; /* deep navy text (light bg) */

    --gradient-badge-gold: linear-gradient(
      135deg,
      oklch(0.9 0.15 90),
      oklch(0.75 0.16 65)
    );
  }

  /* ============================================================
     DEEP OBSIDIAN — GLOBAL CASCADE SCOPE (MASTER DARK THEME)
     Applying `.obsidian` to the app root re-asserts the global
     Dark Neo-Minimalism tokens on EVERY page, overriding any
     scoped light theme (webdesign, kryptocheck, coachings,
     about, audience, etc.) so the entire site renders on the
     universal #0A0A0A obsidian canvas with glassmorphism
     surfaces and electric-blue/gold accents. Values mirror the
     `:root` dark tokens for a consistent cascade.
     ============================================================ */
  .obsidian {
    --background: 0.13 0.006 258;
    --foreground: 0.95 0.008 258;
    --card: 0.17 0.01 258;
    --card-foreground: 0.95 0.008 258;
    --popover: 0.16 0.01 258;
    --popover-foreground: 0.95 0.008 258;

    --primary: 0.6 0.16 255;
    --primary-foreground: 0.985 0.01 255;

    --secondary: 0.2 0.012 258;
    --secondary-foreground: 0.9 0.01 258;
    --muted: 0.2 0.012 258;
    --muted-foreground: 0.78 0.012 258;

    --accent: 0.82 0.14 85;
    --accent-foreground: 0.13 0.01 258;
    --accent-orange: 0.72 0.17 55;
    --accent-orange-foreground: 0.98 0.01 55;

    --success: 0.62 0.16 155;
    --success-foreground: 0.13 0.01 155;

    --destructive: 0.62 0.2 25;
    --destructive-foreground: 0.98 0.01 25;

    --border: 0.3 0.012 258;
    --input: 0.3 0.012 258;
    --ring: 0.6 0.16 255;

    --sidebar: 0.15 0.01 258;
    --sidebar-foreground: 0.95 0.008 258;
    --sidebar-primary: 0.6 0.16 255;
    --sidebar-primary-foreground: 0.985 0.01 255;
    --sidebar-accent: 0.2 0.012 258;
    --sidebar-accent-foreground: 0.9 0.01 258;
    --sidebar-border: 0.3 0.012 258;
    --sidebar-ring: 0.6 0.16 255;
  }

  /* ============================================================
     DEEP OBSIDIAN — SCOPED LIGHT SUB-THEME OVERRIDES (MASTER DARK)
     When `.obsidian` is applied to the app root, every scoped light
     sub-theme (webdesign, kryptocheck, coachings, auswandern,
     marketing-tools, spende, blog, about, audience, fitline,
     donate-banner) is re-mapped onto the universal #0A0A0A obsidian
     canvas with glassmorphism surfaces and electric-blue/gold
     accents. These descendant selectors out-specify the scoped
     classes so the ENTIRE site renders dark regardless of which
     scoped theme a page mounts. Dark scoped themes (dark-lux,
     glaubensschritt, keine-ausreden, manifest, caffeine-ai,
     core-competencies) are already dark and need no override.
     ============================================================ */
  .obsidian .webdesign {
    --wd-bg: 0.13 0.006 258;
    --wd-card: 0.17 0.01 258;
    --wd-ink: 0.95 0.008 258;
    --wd-muted: 0.78 0.012 258;
    --wd-border: 0.3 0.012 258;
    --wd-gold: 0.82 0.14 85;
    --wd-gold-2: 0.72 0.16 58;
    --wd-orange: 0.72 0.17 55;
    --gradient-wd-gold: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-wd-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
  }

  .obsidian .kryptocheck {
    --kc-bg: 0.13 0.006 258;
    --kc-card: 0.17 0.01 258;
    --kc-foreground: 0.95 0.008 258;
    --kc-muted: 0.78 0.012 258;
    --kc-primary: 0.6 0.16 255;
    --kc-primary-deep: 0.45 0.13 247;
    --kc-primary-foreground: 0.985 0.01 255;
    --kc-success: 0.62 0.16 155;
    --kc-success-foreground: 0.985 0.01 155;
    --kc-border: 0.3 0.012 258;
    --gradient-kc-blue: linear-gradient(
      135deg,
      oklch(0.6 0.16 255),
      oklch(0.45 0.13 247)
    );
    --gradient-kc-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
  }

  .obsidian .marketing-tools {
    --mt-bg: 0.13 0.006 258;
    --mt-card: 0.17 0.01 258;
    --mt-ink: 0.95 0.008 258;
    --mt-muted: 0.78 0.012 258;
    --mt-border: 0.3 0.012 258;
    --mt-gold: 0.82 0.14 85;
    --mt-gold-2: 0.72 0.16 58;
    --mt-orange: 0.72 0.17 55;
    --mt-orange-deep: 0.56 0.17 45;
    --gradient-mt-gold: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-mt-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-mt-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
    --gradient-mt-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.72 0.17 55 / 0.1),
      transparent 70%
    );
  }

  .obsidian .coachings {
    --co-bg: 0.13 0.006 258;
    --co-card: 0.17 0.01 258;
    --co-ink: 0.95 0.008 258;
    --co-muted: 0.78 0.012 258;
    --co-border: 0.3 0.012 258;
    --co-gold: 0.82 0.14 85;
    --co-gold-2: 0.72 0.16 58;
    --co-orange: 0.72 0.17 55;
    --co-orange-deep: 0.56 0.17 45;
    --gradient-co-gold: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-co-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-co-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
    --gradient-co-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.72 0.17 55 / 0.1),
      transparent 70%
    );
  }

  .obsidian .auswandern {
    --aw-bg: 0.13 0.006 258;
    --aw-card: 0.17 0.01 258;
    --aw-ink: 0.95 0.008 258;
    --aw-muted: 0.78 0.012 258;
    --aw-border: 0.3 0.012 258;
    --aw-gold: 0.82 0.14 85;
    --aw-gold-2: 0.72 0.16 58;
    --aw-orange: 0.72 0.17 55;
    --aw-orange-deep: 0.56 0.17 45;
    --gradient-aw-gold: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-aw-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-aw-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
    --gradient-aw-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.72 0.17 55 / 0.1),
      transparent 70%
    );
  }

  .obsidian .spende {
    --sp-bg: 0.13 0.006 258;
    --sp-bg-2: 0.15 0.008 258;
    --sp-card: 0.17 0.01 258;
    --sp-ink: 0.95 0.008 258;
    --sp-muted: 0.78 0.012 258;
    --sp-border: 0.3 0.012 258;
    --sp-gold: 0.82 0.14 85;
    --sp-gold-2: 0.72 0.16 58;
    --sp-orange: 0.72 0.17 55;
    --sp-orange-deep: 0.56 0.17 45;
    --sp-paypal: 0.6 0.16 255;
    --sp-paypal-2: 0.55 0.14 247;
    --sp-success: 0.62 0.16 155;
    --sp-success-foreground: 0.985 0.01 155;
    --gradient-sp-gold: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-sp-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-sp-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
    --gradient-sp-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.72 0.17 55 / 0.1),
      transparent 70%
    );
  }

  .obsidian .blog {
    --font-body: "Lora";
    --font-display: "General Sans";
    --bl-bg: 0.13 0.006 258;
    --bl-bg-2: 0.15 0.008 258;
    --bl-card: 0.17 0.01 258;
    --bl-ink: 0.95 0.008 258;
    --bl-muted: 0.78 0.012 258;
    --bl-border: 0.3 0.012 258;
    --bl-accent: 0.82 0.14 85;
    --bl-accent-deep: 0.72 0.16 58;
    --bl-accent-soft: 0.2 0.012 258;
    --gradient-bl-accent: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-bl-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
  }

  .obsidian .about {
    --ab-bg: 0.13 0.006 258;
    --ab-card: 0.17 0.01 258;
    --ab-ink: 0.95 0.008 258;
    --ab-muted: 0.78 0.012 258;
    --ab-border: 0.3 0.012 258;
    --ab-gold: 0.82 0.14 85;
    --ab-gold-2: 0.72 0.16 58;
    --ab-gold-soft: 0.2 0.012 258;
    --ab-gold-hair: 0.82 0.14 85 / 0.35;
    --ab-orange: 0.72 0.17 55;
    --ab-orange-deep: 0.56 0.17 45;
    --gradient-ab-gold: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-ab-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-ab-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
    --gradient-ab-ambient-orange: radial-gradient(
      45% 45% at 88% 100%,
      oklch(0.72 0.17 55 / 0.1),
      transparent 70%
    );
  }

  .obsidian .audience {
    --au-bg: 0.13 0.006 258;
    --au-card: 0.17 0.01 258;
    --au-ink: 0.95 0.008 258;
    --au-muted: 0.78 0.012 258;
    --au-border: 0.3 0.012 258;
    --au-gold: 0.82 0.14 85;
    --au-gold-2: 0.72 0.16 58;
    --au-gold-soft: 0.2 0.012 258;
    --au-gold-hair: 0.82 0.14 85 / 0.35;
    --au-orange: 0.72 0.17 55;
    --au-orange-deep: 0.56 0.17 45;
    --au-neg: 0.3 0.012 258;
    --au-neg-soft: 0.2 0.012 258;
    --gradient-au-gold: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-au-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-au-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
    --gradient-au-ambient-orange: radial-gradient(
      45% 45% at 88% 100%,
      oklch(0.72 0.17 55 / 0.1),
      transparent 70%
    );
  }

  .obsidian .fitline {
    --fl-red: 0.55 0.22 27;
    --fl-red-deep: 0.45 0.2 24;
    --fl-red-foreground: 0.985 0.01 60;
    --fl-warm-bg: 0.13 0.006 258;
    --fl-warm-card: 0.17 0.01 258;
    --fl-ink: 0.95 0.008 258;
    --fl-muted: 0.78 0.012 258;
    --fl-blue: 0.6 0.16 255;
    --fl-blue-deep: 0.45 0.13 247;
    --fl-blue-foreground: 0.985 0.01 255;
    --fl-navy-bg: 0.13 0.006 258;
    --fl-navy-card: 0.17 0.01 258;
    --fl-navy-border: 0.3 0.012 258;
    --fl-navy-text: 0.95 0.008 258;
    --fl-navy-muted: 0.78 0.012 258;
    --gradient-fl-red: linear-gradient(
      135deg,
      oklch(0.6 0.22 28),
      oklch(0.45 0.2 24)
    );
    --gradient-fl-blue: linear-gradient(
      135deg,
      oklch(0.6 0.16 255),
      oklch(0.45 0.13 247)
    );
    --gradient-fl-ambient-red: radial-gradient(
      60% 60% at 50% 0%,
      oklch(0.55 0.22 27 / 0.14),
      transparent 70%
    );
    --gradient-fl-ambient-blue: radial-gradient(
      60% 60% at 50% 0%,
      oklch(0.6 0.16 255 / 0.18),
      transparent 70%
    );
  }

  .obsidian .donate-banner {
    --db-bg: 0.15 0.008 258;
    --db-bg-2: 0.17 0.01 258;
    --db-ink: 0.95 0.008 258;
    --db-muted: 0.78 0.012 258;
    --db-border: 0.3 0.012 258;
    --db-gold: 0.82 0.14 85;
    --db-gold-2: 0.72 0.16 58;
    --db-orange: 0.72 0.17 55;
    --db-orange-deep: 0.56 0.17 45;
    --db-heart: 0.62 0.2 25;
    --gradient-db-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-db-gold: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-db-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.16 255 / 0.14),
      transparent 70%
    );
  }

  /* ============================================================
     NEW LANDING PAGE — DARK B2B AI AUTOMATION AGENCY THEME
     Scoped under `.landing` so it layers cleanly on the global
     obsidian canvas. Deep navy/black #05070A background with
     vibrant electric-blue + purple atmospheric radial glows behind
     the hero, frosted-glass surfaces, thin milky-white borders,
     electric-blue filled primary CTA + ghost secondary buttons.
     ============================================================ */
  .landing {
    --ld-bg: 0.12 0.012 262; /* deep navy/black #05070A canvas */
    --ld-bg-2: 0.14 0.012 262; /* lifted section panel */
    --ld-card: 0.17 0.014 262; /* dark glass card surface */
    --ld-foreground: 0.96 0.01 258; /* white-silver headline text */
    --ld-muted: 0.78 0.012 258; /* bright light-gray body text */
    --ld-border: 0.32 0.014 262; /* thin milky-white hairline */
    --ld-blue: 0.6 0.16 255; /* electric blue primary */
    --ld-blue-deep: 0.48 0.14 262; /* deeper blue for gradient */
    --ld-purple: 0.6 0.18 295; /* purple secondary glow */
    --ld-blue-foreground: 0.985 0.01 255;

    --gradient-ld-blue: linear-gradient(
      135deg,
      oklch(0.62 0.16 255),
      oklch(0.48 0.14 262)
    );
    --gradient-ld-ambient-blue: radial-gradient(
      55% 55% at 18% 8%,
      oklch(0.6 0.16 255 / 0.2),
      transparent 70%
    );
    --gradient-ld-ambient-purple: radial-gradient(
      50% 50% at 85% 20%,
      oklch(0.6 0.18 295 / 0.18),
      transparent 70%
    );
    --gradient-ld-ambient-bottom: radial-gradient(
      55% 55% at 50% 100%,
      oklch(0.6 0.16 255 / 0.12),
      transparent 70%
    );
  }

  /* ============================================================
     PRIVATE LOAN — DISCREET DARK-LUX THEME (ADDITIVE)
     Exclusive private-banking subpage. Scoped under `.dark-lux`
     so the existing light theme and all existing pages stay
     untouched. Anthracite/dark-navy surfaces, champagne/gold
     accents, refined hairline borders — no shrill marketing.
     ============================================================ */
  .dark-lux {
    --lux-bg: 0.125 0.02 258; /* anthracite / deep-navy canvas */
    --lux-bg-2: 0.15 0.02 258; /* slightly lifted section panel */
    --lux-card: 0.18 0.02 258; /* elevated card surface */
    --lux-foreground: 0.93 0.012 92; /* warm champagne-tinted text */
    --lux-muted: 0.74 0.02 258; /* brightened secondary / supporting text */
    --lux-border: 0.3 0.03 258; /* refined dark border */
    --lux-border-gold: 0.55 0.07 85; /* subtle gold hairline */
    --lux-gold: 0.82 0.12 85; /* champagne / gold accent */
    --lux-gold-2: 0.72 0.13 70; /* deeper gold */
    --lux-champagne: 0.9 0.045 92; /* light champagne highlight */

    --gradient-champagne: linear-gradient(
      135deg,
      oklch(0.86 0.1 90),
      oklch(0.72 0.13 70)
    );
    --gradient-lux-ambient: radial-gradient(
      60% 60% at 50% 0%,
      oklch(0.82 0.12 85 / 0.12),
      transparent 70%
    );
  }

  /* ============================================================
     FITLINE — TWO-ZONE LANDING THEME (ADDITIVE)
     Official FitLine / PM-International presentation subpage.
     Scoped under `.fitline` so the existing light theme and all
     existing pages stay untouched. TWO-ZONE principle:
     Zone 1 (top, product / end-customer): emotional FitLine RED.
     Zone 2 (lower, business / partner): professional BLUE / dark
     navy. Two audiences, two registers, one clean system.
     ============================================================ */
  .fitline {
    /* Zone 1 — product / end-customer (red-dominant) */
    --fl-red: 0.55 0.22 27; /* FitLine red — dominant primary */
    --fl-red-deep: 0.45 0.2 24; /* deeper red for gradient / hover */
    --fl-red-foreground: 0.985 0.01 60; /* near-white text on red */
    --fl-warm-bg: 0.975 0.012 60; /* warm off-white canvas (zone 1) */
    --fl-warm-card: 1 0.006 60; /* elevated warm card */
    --fl-ink: 0.18 0.03 27; /* warm dark text */
    --fl-muted: 0.45 0.03 40; /* supporting text */

    /* Zone 2 — business / partner (blue-dominant) */
    --fl-blue: 0.42 0.13 255; /* professional blue primary */
    --fl-blue-deep: 0.34 0.11 255; /* deeper blue for hover */
    --fl-blue-foreground: 0.985 0.01 255;
    --fl-navy-bg: 0.24 0.03 258; /* lighter slate-navy canvas (zone 2) */
    --fl-navy-card: 0.3 0.03 258; /* elevated navy card, lighter than bg */
    --fl-navy-border: 0.42 0.03 258; /* lighter hairline, visible on lighter navy */
    --fl-navy-text: 0.96 0.012 255; /* near-white text, strong contrast */
    --fl-navy-muted: 0.78 0.02 258; /* lightened muted text, clearly readable */

    --gradient-fl-red: linear-gradient(
      135deg,
      oklch(0.6 0.22 28),
      oklch(0.45 0.2 24)
    );
    --gradient-fl-blue: linear-gradient(
      135deg,
      oklch(0.5 0.13 258),
      oklch(0.34 0.11 255)
    );
    --gradient-fl-ambient-red: radial-gradient(
      60% 60% at 50% 0%,
      oklch(0.6 0.22 28 / 0.14),
      transparent 70%
    );
    --gradient-fl-ambient-blue: radial-gradient(
      60% 60% at 50% 0%,
      oklch(0.5 0.13 258 / 0.18),
      transparent 70%
    );
  }

  /* ============================================================
     KRYPTOCHECK DEUTSCHLAND — TRUST-BLUE DIRECTORY THEME (ADDITIVE)
     MiCA-regulated crypto exchange comparison subpage. Scoped
     under `.kryptocheck` so the existing light theme and all
     existing pages stay untouched. Crisp white canvas, light-gray
     cards, dark-slate text, trust-blue #0284C7 primary, emerald
     #10B981 success for regulatory badges — clean, professional,
     high-conversion comparison UI.
     ============================================================ */
  .kryptocheck {
    --kc-bg: 1.0 0.004 255; /* crisp white canvas */
    --kc-card: 0.972 0.004 258; /* light gray #F8FAFC card surface */
    --kc-foreground: 0.21 0.03 258; /* dark slate #1E293B text */
    --kc-muted: 0.45 0.03 258; /* supporting / secondary text */
    --kc-primary: 0.53 0.14 247; /* trust-blue #0284C7 */
    --kc-primary-deep: 0.45 0.13 247; /* deeper blue for gradient / hover */
    --kc-primary-foreground: 0.985 0.006 255; /* near-white text on blue */
    --kc-success: 0.55 0.16 162; /* emerald green #10B981 */
    --kc-success-foreground: 0.985 0.01 162; /* near-white text on green */
    --kc-border: 0.9 0.014 258; /* soft hairline border */

    --gradient-kc-blue: linear-gradient(
      135deg,
      oklch(0.58 0.14 247),
      oklch(0.45 0.13 247)
    );
    --gradient-kc-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.53 0.14 247 / 0.1),
      transparent 70%
    );
  }

  /* ============================================================
     WEBDESIGN — PREMIUM STUDIO THEME (ADDITIVE)
     Professional web-design service subpage. Scoped under
     `.webdesign` so the existing light theme and all existing
     pages stay untouched. Reuses the global Navy/Gold/Orange
     tokens for brand consistency, adding a refined studio
     treatment: crisp white canvas, deep navy text, a gold
     highlight for the featured pricing package, and a subtle
     grid backdrop — premium, professional, conversion-focused.
     ============================================================ */
  .webdesign {
    --wd-bg: 0.985 0.006 255; /* crisp studio canvas (matches global bg) */
    --wd-card: 1.0 0.004 255; /* elevated white card */
    --wd-ink: 0.16 0.04 258; /* deep navy text */
    --wd-muted: 0.5 0.03 258; /* supporting text */
    --wd-border: 0.9 0.014 258; /* soft hairline */
    --wd-gold: 0.72 0.15 60; /* gold accent (deep enough for text) */
    --wd-gold-2: 0.78 0.15 82; /* brighter gold */
    --wd-orange: 0.68 0.19 55; /* orange accent */

    --gradient-wd-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-wd-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.78 0.15 82 / 0.12),
      transparent 70%
    );
  }

  /* ============================================================
     GLAUBENSSCHRITT — DARK STEWARDSHIP LANDING THEME (ADDITIVE)
     Faith-based wealth & cashflow subpage. Scoped under
     `.glaubensschritt` so the existing light theme and all
     existing pages stay untouched. Deep slate-navy canvas, the
     brand gold gradient as the dominant accent, and the orange
     accent reserved for the WhatsApp CTA — bold, encouraging,
     high-conversion, never shrill.
     ============================================================ */
  .glaubensschritt {
    --gs-bg: 0.125 0.025 258; /* deep slate-navy canvas */
    --gs-bg-2: 0.155 0.025 258; /* lifted section panel */
    --gs-card: 0.19 0.03 258; /* elevated card surface */
    --gs-foreground: 0.94 0.012 92; /* warm champagne-tinted text */
    --gs-muted: 0.78 0.025 258; /* brightened supporting / secondary text */
    --gs-border: 0.32 0.03 258; /* refined dark hairline */
    --gs-border-gold: 0.55 0.08 85; /* subtle gold hairline */
    --gs-gold: 0.82 0.13 85; /* gold accent */
    --gs-gold-2: 0.72 0.14 65; /* deeper gold */
    --gs-orange: 0.68 0.19 55; /* orange accent (WhatsApp CTA) */
    --gs-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */

    --gradient-gs-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-gs-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-gs-ambient: radial-gradient(
      60% 60% at 50% 0%,
      oklch(0.82 0.13 85 / 0.14),
      transparent 70%
    );
    --gradient-gs-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.68 0.19 55 / 0.1),
      transparent 70%
    );
  }

  /* ============================================================
     FASSE MUT — DARK CALLING THEME (ADDITIVE)
     Christian subpage about following God's call without fear.
     Scoped under `.keine-ausreden` so the existing
     light theme and all existing pages stay untouched. Mirrors the
     Glaubensschritt dark Navy/Gold register for brand consistency:
     deep slate-navy canvas, the gold gradient as the dominant
     accent, and the orange reserved for the WhatsApp CTA — bold,
     encouraging, reverent, never shrill.
     ============================================================ */
  .keine-ausreden {
    --ka-bg: 0.125 0.025 258; /* deep slate-navy canvas */
    --ka-bg-2: 0.155 0.025 258; /* lifted section panel */
    --ka-card: 0.19 0.03 258; /* elevated card surface */
    --ka-foreground: 0.94 0.012 92; /* warm champagne-tinted text */
    --ka-muted: 0.78 0.025 258; /* brightened supporting / secondary text */
    --ka-border: 0.32 0.03 258; /* refined dark hairline */
    --ka-border-gold: 0.55 0.08 85; /* subtle gold hairline */
    --ka-gold: 0.82 0.13 85; /* gold accent */
    --ka-gold-2: 0.72 0.14 65; /* deeper gold */
    --ka-orange: 0.68 0.19 55; /* orange accent (WhatsApp CTA) */
    --ka-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */

    --gradient-ka-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-ka-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-ka-ambient: radial-gradient(
      60% 60% at 50% 0%,
      oklch(0.82 0.13 85 / 0.14),
      transparent 70%
    );
    --gradient-ka-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.68 0.19 55 / 0.1),
      transparent 70%
    );
  }

  /* ============================================================
     FINANZIELLE FREIHEIT — DARK MANIFESTO THEME (ADDITIVE)
     Premium, emotional homepage manifesto section (#manifesto).
     Scoped under `.manifest` so the existing light theme and all
     existing sections stay untouched. Deep navy canvas, brand gold
     gradient as the dominant accent, warm champagne-tinted text,
     and the orange reserved for the WhatsApp CTA — an emotional,
     high-conversion register that anchors the homepage between the
     hero and the offer cards, and contrasts the light Dubai band.
     ============================================================ */
  .manifest {
    --mf-bg: 0.12 0.02 258; /* deep navy canvas */
    --mf-bg-2: 0.15 0.02 258; /* lifted section panel */
    --mf-card: 0.19 0.02 258; /* elevated card surface */
    --mf-foreground: 0.94 0.012 92; /* warm champagne-tinted text */
    --mf-muted: 0.78 0.025 258; /* brightened supporting / secondary text */
    --mf-border: 0.3 0.03 258; /* refined dark hairline */
    --mf-border-gold: 0.55 0.08 85; /* subtle gold hairline */
    --mf-gold: 0.82 0.13 85; /* gold accent */
    --mf-gold-2: 0.72 0.14 65; /* deeper gold */
    --mf-orange: 0.68 0.19 55; /* orange accent (WhatsApp CTA) */
    --mf-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */

    --gradient-mf-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-mf-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-mf-ambient: radial-gradient(
      60% 60% at 50% 0%,
      oklch(0.82 0.13 85 / 0.14),
      transparent 70%
    );
    --gradient-mf-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.68 0.19 55 / 0.1),
      transparent 70%
    );
  }

  /* ============================================================
     MARKETING-TOOLS — PREMIUM TOOLKIT THEME (ADDITIVE)
     Digital-marketing tools & resources subpage. Scoped under
     `.marketing-tools` so the existing light theme and all existing
     pages stay untouched. Crisp white canvas, deep navy text, gold
     featured highlights, orange reserved for the WhatsApp CTA —
     premium, conversion-focused, very strong marketing.
     ============================================================ */
  .marketing-tools {
    --mt-bg: 0.985 0.006 255; /* crisp toolkit canvas (matches global bg) */
    --mt-card: 1.0 0.004 255; /* elevated white card */
    --mt-ink: 0.16 0.04 258; /* deep navy text */
    --mt-muted: 0.5 0.03 258; /* supporting text */
    --mt-border: 0.9 0.014 258; /* soft hairline */
    --mt-gold: 0.72 0.15 60; /* gold accent (deep enough for text) */
    --mt-gold-2: 0.78 0.15 82; /* brighter gold */
    --mt-orange: 0.68 0.19 55; /* orange accent (WhatsApp CTA) */
    --mt-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */

    --gradient-mt-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-mt-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-mt-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.78 0.15 82 / 0.12),
      transparent 70%
    );
    --gradient-mt-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.68 0.19 55 / 0.1),
      transparent 70%
    );
  }

  /* ============================================================
     COACHINGS — PREMIUM COACHING PROGRAMS THEME (ADDITIVE)
     Coaching & mentoring subpage. Scoped under `.coachings` so the
     existing light theme and all existing pages stay untouched.
     Crisp white canvas, deep navy text, gold featured program
     highlights, orange reserved for the WhatsApp CTA — premium,
     personal, very strong marketing.
     ============================================================ */
  .coachings {
    --co-bg: 0.985 0.006 255; /* crisp coaching canvas (matches global bg) */
    --co-card: 1.0 0.004 255; /* elevated white card */
    --co-ink: 0.16 0.04 258; /* deep navy text */
    --co-muted: 0.5 0.03 258; /* supporting text */
    --co-border: 0.9 0.014 258; /* soft hairline */
    --co-gold: 0.72 0.15 60; /* gold accent (deep enough for text) */
    --co-gold-2: 0.78 0.15 82; /* brighter gold */
    --co-orange: 0.68 0.19 55; /* orange accent (WhatsApp CTA) */
    --co-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */

    --gradient-co-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-co-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-co-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.78 0.15 82 / 0.12),
      transparent 70%
    );
    --gradient-co-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.68 0.19 55 / 0.1),
      transparent 70%
    );
  }

  /* ============================================================
     AUSWANDERN & ALTERNATIVEN — PREMIUM RELOCATION THEME (ADDITIVE)
     Emigration & lifestyle-alternatives subpage. Scoped under
     `.auswandern` so the existing light theme and all existing pages
     stay untouched. Crisp white canvas, deep navy text, gold featured
     destination highlights, orange reserved for the WhatsApp CTA —
     premium, aspirational, very strong marketing.
     ============================================================ */
  .auswandern {
    --aw-bg: 0.985 0.006 255; /* crisp relocation canvas (matches global bg) */
    --aw-card: 1.0 0.004 255; /* elevated white card */
    --aw-ink: 0.16 0.04 258; /* deep navy text */
    --aw-muted: 0.5 0.03 258; /* supporting text */
    --aw-border: 0.9 0.014 258; /* soft hairline */
    --aw-gold: 0.72 0.15 60; /* gold accent (deep enough for text) */
    --aw-gold-2: 0.78 0.15 82; /* brighter gold */
    --aw-orange: 0.68 0.19 55; /* orange accent (WhatsApp CTA) */
    --aw-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */

    --gradient-aw-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-aw-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-aw-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.78 0.15 82 / 0.12),
      transparent 70%
    );
    --gradient-aw-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.68 0.19 55 / 0.1),
      transparent 70%
    );
  }

  /* ============================================================
     CAFFEINE AI — DARK TECH-INNOVATION THEME (ADDITIVE)
     New Caffeine AI landing page. Scoped under `.caffeine-ai` so
     the existing light theme and all existing sub-themes stay
     untouched. Deep near-black blue-charcoal canvas, an electric
     cyan→violet AI gradient as the signature accent, near-white
     cool text, and a warm amber CTA for conversion pop. Distinct
     from the warm Navy/Gold registers — reads as modern, technical,
     trustworthy, innovative.
     ============================================================ */
  .caffeine-ai {
    --ca-bg: 0.11 0.02 260; /* deep near-black blue-charcoal canvas */
    --ca-bg-2: 0.14 0.02 260; /* lifted section panel */
    --ca-card: 0.17 0.02 260; /* elevated card surface */
    --ca-foreground: 0.95 0.01 260; /* near-white cool text */
    --ca-muted: 0.78 0.02 260; /* brightened supporting / secondary text */
    --ca-border: 0.28 0.02 260; /* dark hairline */
    --ca-border-cyan: 0.55 0.08 200; /* subtle cyan hairline */
    --ca-cyan: 0.78 0.13 195; /* electric cyan accent (primary) */
    --ca-cyan-deep: 0.6 0.15 205; /* deeper cyan for gradient */
    --ca-violet: 0.62 0.18 295; /* violet secondary for gradient */
    --ca-amber: 0.72 0.17 70; /* warm amber CTA accent */
    --ca-amber-deep: 0.6 0.17 55; /* deeper amber for gradient */

    --gradient-ca-ai: linear-gradient(
      135deg,
      oklch(0.78 0.13 195),
      oklch(0.62 0.18 295)
    );
    --gradient-ca-cta: linear-gradient(
      135deg,
      oklch(0.75 0.17 72),
      oklch(0.6 0.17 55)
    );
    --gradient-ca-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.78 0.13 195 / 0.16),
      transparent 70%
    );
    --gradient-ca-ambient-violet: radial-gradient(
      45% 45% at 85% 100%,
      oklch(0.62 0.18 295 / 0.14),
      transparent 70%
    );
  }

  /* ============================================================
     DEINE SPENDE — WARM TRUSTWORTHY DONATION THEME (ADDITIVE)
     Donation subpage. Scoped under `.spende` so the existing light
     theme and all existing sub-themes stay untouched. Warm cream
     canvas, elevated white cards, deep navy text, brand gold as the
     signature accent, and the orange reserved for the primary
     donation CTA — high-converting yet unassuming, warm, clean,
     minimal. Consistent with the global Navy/Gold/Orange register.
     ============================================================ */
  .spende {
    --sp-bg: 0.975 0.012 70; /* warm cream canvas */
    --sp-bg-2: 0.985 0.01 75; /* slightly lifted section panel */
    --sp-card: 1.0 0.006 75; /* elevated warm-white card */
    --sp-ink: 0.16 0.04 258; /* deep navy text */
    --sp-muted: 0.48 0.03 60; /* supporting / secondary text */
    --sp-border: 0.9 0.02 70; /* soft warm hairline */
    --sp-gold: 0.72 0.15 60; /* gold accent (deep enough for text) */
    --sp-gold-2: 0.78 0.15 82; /* brighter gold */
    --sp-orange: 0.68 0.19 55; /* orange accent (donation CTA) */
    --sp-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */
    --sp-paypal: 0.42 0.13 255; /* deep PayPal blue (icon / text) */
    --sp-paypal-2: 0.55 0.14 247; /* brighter PayPal blue (button) */
    --sp-success: 0.45 0.13 150; /* copy-feedback green */
    --sp-success-foreground: 0.985 0.01 150;

    --gradient-sp-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-sp-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-sp-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.78 0.15 82 / 0.12),
      transparent 70%
    );
    --gradient-sp-ambient-orange: radial-gradient(
      50% 50% at 85% 100%,
      oklch(0.68 0.19 55 / 0.1),
      transparent 70%
    );
  }

  /* ============================================================
     GLOBAL DONATION CTA BANNER — WARM CONVERSION THEME (ADDITIVE)
     A site-wide donation call-to-action banner that appears directly
     below the top nav on every page EXCEPT the Spende page. Scoped
     under `.donate-banner` so it presents its OWN warm cream surface
     with a deep-navy text register — this guarantees the banner stays
     highly readable and clearly distinct whether the page behind it
     uses the shared light theme or any dark scoped theme (glaubens-
     schritt, caffeine-ai, keine-ausreden, manifest, etc.). No existing
     token is modified; the banner's self-contained surface adapts to
     any page background by contrast, never by inheritance.
     ============================================================ */
  .donate-banner {
    --db-bg: 0.975 0.012 70; /* warm cream banner surface */
    --db-bg-2: 0.985 0.01 75; /* slightly lifted inner panel */
    --db-ink: 0.16 0.04 258; /* deep navy text — AA+ on cream */
    --db-muted: 0.48 0.03 60; /* supporting / secondary text */
    --db-border: 0.9 0.02 70; /* soft warm hairline */
    --db-gold: 0.72 0.15 60; /* gold accent */
    --db-gold-2: 0.78 0.15 82; /* brighter gold */
    --db-orange: 0.68 0.19 55; /* warm accent — conversion CTA */
    --db-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */
    --db-heart: 0.62 0.2 25; /* warm heart accent */

    --gradient-db-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-db-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-db-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.78 0.15 82 / 0.12),
      transparent 70%
    );
  }

  /* ============================================================
     BLOG-PREDIGTEN — STUDY-BIBLE SERMON BLOG THEME (ADDITIVE)
     New sermon blog subpage. Scoped under `.blog` so the existing
     light theme and all existing sub-themes stay untouched. A
     minimalist, serious study-bible register: muted cream/ivory
     canvas, anthracite body text in the high-readability serif
     (Lora), elegant sans-serif headings (General Sans), generous
     whitespace, and a single elegant bronze accent used sparingly.
     ============================================================ */
  .blog {
    /* Font overrides — the blog uses the high-readability serif Lora for
       body text and the elegant sans-serif General Sans for headings.
       These override the site-wide --font-body (DM Sans) and
       --font-display (Space Grotesk) so every blog helper that resolves
       var(--font-body) / var(--font-display) renders with the required
       study-bible fonts. Site-wide fonts outside .blog are untouched. */
    --font-body: "Lora";
    --font-display: "General Sans";

    --bl-bg: 0.975 0.015 85; /* muted cream/ivory canvas */
    --bl-bg-2: 0.985 0.012 85; /* slightly lifted section panel */
    --bl-card: 0.99 0.012 85; /* elevated ivory card surface */
    --bl-ink: 0.19 0.02 60; /* anthracite body text — AA+ on ivory */
    --bl-muted: 0.5 0.02 60; /* supporting / secondary text */
    --bl-border: 0.9 0.02 80; /* soft warm hairline */
    --bl-accent: 0.5 0.1 65; /* elegant bronze accent (highlights) */
    --bl-accent-deep: 0.4 0.1 62; /* deeper bronze for text / hover */
    --bl-accent-soft: 0.92 0.03 70; /* soft bronze-tinted surface */

    --gradient-bl-accent: linear-gradient(
      135deg,
      oklch(0.6 0.11 70),
      oklch(0.4 0.1 62)
    );
    --gradient-bl-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.6 0.11 70 / 0.08),
      transparent 70%
    );
  }

  /* ============================================================
     ÜBER MICH — PREMIUM PERSONAL PROFILE THEME (ADDITIVE)
     The redesigned 'Über Mich' section on the home page
     (id='ueber-mich'). Scoped under `.about` so the global light
     theme and all other sub-themes stay untouched. Reuses the
     existing Navy/Gold/Orange register (--primary navy, --accent
     gold, --accent-orange) and the site fonts (Space Grotesk +
     DM Sans). Adds only a soft gold-tint surface, gold hairlines,
     and a deep-navy ink for the marketing-strong profile layout:
     profile header + role badges, signature quote, philosophy,
     value pillars, numbered competency cards, and a gold timeline.
     ============================================================ */
  .about {
    --ab-bg: 0.985 0.006 255; /* crisp canvas (matches global bg) */
    --ab-card: 1.0 0.004 255; /* elevated white card */
    --ab-ink: 0.16 0.04 258; /* deep navy text */
    --ab-muted: 0.5 0.03 258; /* supporting / secondary text */
    --ab-border: 0.9 0.014 258; /* soft hairline */
    --ab-gold: 0.72 0.15 60; /* gold accent (deep enough for text) */
    --ab-gold-2: 0.78 0.15 82; /* brighter gold */
    --ab-gold-soft: 0.965 0.03 85; /* soft gold-tinted surface */
    --ab-gold-hair: 0.72 0.15 60 / 0.35; /* subtle gold hairline */
    --ab-orange: 0.68 0.19 55; /* orange accent (sparing) */
    --ab-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */

    --gradient-ab-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-ab-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-ab-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.78 0.15 82 / 0.12),
      transparent 70%
    );
    --gradient-ab-ambient-orange: radial-gradient(
      45% 45% at 88% 100%,
      oklch(0.68 0.19 55 / 0.09),
      transparent 70%
    );
  }

  /* ============================================================
     FÜR WEN — AUDIENCE SECTION THEME (ADDITIVE)
     New 'Für wen ist diese Seite?' audience section on the home
     page (id='fuer-wen'). Scoped under `.audience` so the global
     light theme and all other sub-themes stay untouched. Reuses
     the existing Navy/Gold/Orange register (--primary navy,
     --accent gold, --accent-orange) and the site fonts. Adds a
     dominant gold callout banner for the signature quote and two
     clearly separated blocks: a gold 'IST' block (positive) and a
     muted 'NICHT' block (negative) — visually distinct.
     ============================================================ */
  .audience {
    --au-bg: 0.985 0.006 255; /* crisp canvas (matches global bg) */
    --au-card: 1.0 0.004 255; /* elevated white card */
    --au-ink: 0.16 0.04 258; /* deep navy text */
    --au-muted: 0.5 0.03 258; /* supporting / secondary text */
    --au-border: 0.9 0.014 258; /* soft hairline */
    --au-gold: 0.72 0.15 60; /* gold accent (deep enough for text) */
    --au-gold-2: 0.78 0.15 82; /* brighter gold */
    --au-gold-soft: 0.965 0.03 85; /* soft gold-tinted surface */
    --au-gold-hair: 0.72 0.15 60 / 0.35; /* subtle gold hairline */
    --au-orange: 0.68 0.19 55; /* orange accent (sparing) */
    --au-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */
    --au-neg: 0.55 0.05 258; /* muted navy for the 'NICHT' block */
    --au-neg-soft: 0.955 0.012 258; /* soft muted surface for 'NICHT' */

    --gradient-au-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.16 58)
    );
    --gradient-au-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-au-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.78 0.15 82 / 0.12),
      transparent 70%
    );
    --gradient-au-ambient-orange: radial-gradient(
      45% 45% at 88% 100%,
      oklch(0.68 0.19 55 / 0.09),
      transparent 70%
    );
  }

  /* ============================================================
     CORE COMPETENCIES — DARK 3-PILLAR THEME (ADDITIVE)
     The home page '3-Pillar Core Competencies' section (id='links').
     Scoped under `.core-competencies` so the global light theme and
     all other sub-themes stay untouched. Deep slate-950 / slate-900
     canvas, sharp near-white text, and three distinct glowing accent
     registers — cyan/blue (Glauben & Vision), gold/amber (Freiheit &
     Vermögen), emerald/neon (Strategie & Systeme) — for an
     uncompromising, authoritative, premium register.
     ============================================================ */
  .core-competencies {
    --cc-bg: 0.13 0.02 258; /* deep slate-950 canvas */
    --cc-bg-2: 0.17 0.02 258; /* lifted slate-900 panel */
    --cc-card: 0.19 0.02 258; /* elevated card surface */
    --cc-foreground: 0.96 0.012 258; /* sharp near-white text */
    --cc-muted: 0.78 0.02 258; /* brightened supporting / secondary text */
    --cc-border: 0.3 0.03 258; /* refined dark hairline */

    /* Pillar 1 — Glauben & Vision (cyan / blue) */
    --cc-cyan: 0.78 0.13 195; /* electric cyan accent */
    --cc-cyan-deep: 0.6 0.15 205; /* deeper cyan for gradient */
    --cc-blue: 0.62 0.14 255; /* blue secondary */

    /* Pillar 2 — Freiheit & Vermögen (gold / amber) */
    --cc-gold: 0.82 0.13 85; /* gold accent */
    --cc-gold-2: 0.72 0.14 65; /* deeper gold */
    --cc-amber: 0.78 0.15 70; /* amber accent */

    /* Pillar 3 — Strategie & Systeme (emerald / neon green) */
    --cc-emerald: 0.72 0.16 162; /* emerald accent */
    --cc-emerald-deep: 0.58 0.16 155; /* deeper emerald for gradient */

    --gradient-cc-cyan: linear-gradient(
      135deg,
      oklch(0.78 0.13 195),
      oklch(0.62 0.14 255)
    );
    --gradient-cc-gold: linear-gradient(
      135deg,
      oklch(0.85 0.15 88),
      oklch(0.72 0.14 65)
    );
    --gradient-cc-emerald: linear-gradient(
      135deg,
      oklch(0.72 0.16 162),
      oklch(0.58 0.16 155)
    );
    --gradient-cc-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.78 0.13 195 / 0.12),
      transparent 70%
    );
  }

  /* ============================================================
     PURE BLACK ELITE — ABOVE-THE-FOLD HERO THEME (additive)
     The new homepage hero section that sits directly ABOVE the
     intro video (PortraitBanner). Scoped under `.hero-elite` so the
     global obsidian theme and every other sub-theme stay untouched.
     Absolute pure black #000000 canvas for a frame-less cinema
     look; off-white H1, cool silver-gray H2 with wide letter-spacing,
     and a single cyber-blue #00D8FF accent phrase with a very subtle,
     soft, high-blur glow (15-20% opacity, gentle pulse — never a neon
     tube). Monumental, centered, generous negative space.
     ============================================================ */
  .hero-elite {
    --he-bg: 0 0 0; /* absolute pure black #000000 canvas */
    --he-foreground: 0.96 0.004 258; /* off-white H1 ~#F3F4F6 (avoids halation) */
    --he-muted: 0.72 0.012 258; /* cool silver-gray H2 ~#9CA3AF */
    --he-cyan: 0.78 0.15 205; /* cyber-blue accent #00D8FF */
    --he-cyan-soft: 0.78 0.15 205 / 0.18; /* soft accent glow (subtle, not neon) */

    --gradient-he-ambient: radial-gradient(
      60% 55% at 50% 0%,
      oklch(0.78 0.15 205 / 0.12),
      transparent 70%
    );
    --gradient-he-cyan-glow: radial-gradient(
      45% 45% at 50% 50%,
      oklch(0.78 0.15 205 / 0.18),
      transparent 72%
    );
  }

  /* ============================================================
     VISIONARY — SECULAR CRYPTO/AI MANIFESTO THEME (ADDITIVE)
     The two NEW monumental homepage core-message sections that
     position Jonathan as a crypto/AI visionary. Scoped under
     `.visionary` so the global obsidian theme and every other
     sub-theme stay untouched. Deep blue-charcoal canvas, sharp
     near-white display headlines, a dominant gold 'prophetic
     certainty' accent, and a cyan tech signal for the AI/crypto
     register — secular, uncompromising, no theological language.
     ============================================================ */
  .visionary {
    --vs-bg: 0.11 0.02 260; /* deep near-black blue-charcoal canvas */
    --vs-bg-2: 0.14 0.02 260; /* lifted section panel */
    --vs-card: 0.17 0.02 260; /* elevated card surface */
    --vs-foreground: 0.96 0.012 258; /* sharp near-white display text */
    --vs-muted: 0.78 0.02 260; /* brightened supporting / secondary text */
    --vs-border: 0.3 0.03 260; /* refined dark hairline */
    --vs-border-gold: 0.6 0.1 85; /* subtle gold hairline */
    --vs-gold: 0.84 0.13 88; /* dominant gold 'certainty' accent */
    --vs-gold-2: 0.72 0.14 65; /* deeper gold for gradient */
    --vs-cyan: 0.78 0.13 195; /* cyan tech signal (AI / crypto) */
    --vs-cyan-deep: 0.6 0.15 205; /* deeper cyan for gradient */
    --vs-orange: 0.68 0.19 55; /* orange accent (WhatsApp CTA) */
    --vs-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */

    --gradient-vs-gold: linear-gradient(
      135deg,
      oklch(0.88 0.14 88),
      oklch(0.72 0.16 58)
    );
    --gradient-vs-cyan: linear-gradient(
      135deg,
      oklch(0.78 0.13 195),
      oklch(0.6 0.15 205)
    );
    --gradient-vs-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-vs-ambient: radial-gradient(
      55% 55% at 50% 0%,
      oklch(0.84 0.13 88 / 0.14),
      transparent 70%
    );
    --gradient-vs-ambient-cyan: radial-gradient(
      45% 45% at 85% 100%,
      oklch(0.78 0.13 195 / 0.12),
      transparent 70%
    );
  }

  /* ============================================================
     VISION — 'DIE GROSSE VISION' THEOLOGICAL BOMB THEME (ADDITIVE)
     The new strictly-isolated theological manifesto subpage under
     'Glauben'. Scoped under `.vision` so the secular homepage and
     every other sub-theme stay untouched. A graphic 'bomb': the
     deepest near-black void broken by radiant golden/light elements,
     huge monumental Fraunces serif headlines, hard light/dark
     section alternation, and a bullet-point theological weapon
     section. Gold = the light of God shattering the darkness.
     ============================================================ */
  .vision {
    --font-display: "Fraunces";
    --font-body: "DM Sans";

    --vn-bg: 0.09 0.02 260; /* the deepest void — darker than obsidian */
    --vn-bg-2: 0.12 0.02 260; /* lifted void panel */
    --vn-card: 0.15 0.02 260; /* elevated card surface */
    --vn-foreground: 0.96 0.012 258; /* radiant near-white headline text */
    --vn-muted: 0.8 0.02 260; /* brightened supporting text */
    --vn-border: 0.28 0.03 260; /* dark hairline */
    --vn-border-gold: 0.62 0.12 85; /* radiant gold hairline */
    --vn-gold: 0.88 0.14 88; /* radiant gold — the light of God */
    --vn-gold-2: 0.72 0.15 65; /* deeper gold for gradient */
    --vn-champagne: 0.94 0.05 92; /* light champagne highlight */
    --vn-gold-ink: 0.16 0.04 258; /* deep navy ink on gold panels */
    --vn-orange: 0.68 0.19 55; /* orange accent (WhatsApp CTA) */
    --vn-orange-deep: 0.56 0.17 45; /* deeper orange for gradient */

    --gradient-vn-gold: linear-gradient(
      135deg,
      oklch(0.9 0.15 90),
      oklch(0.72 0.16 58)
    );
    --gradient-vn-cta: linear-gradient(
      135deg,
      oklch(0.72 0.17 65),
      oklch(0.56 0.17 45)
    );
    --gradient-vn-ambient: radial-gradient(
      60% 60% at 50% 0%,
      oklch(0.88 0.14 88 / 0.16),
      transparent 70%
    );
    --gradient-vn-light: radial-gradient(
      50% 50% at 50% 40%,
      oklch(0.9 0.15 90 / 0.22),
      transparent 72%
    );

    /* --- Section-separation system (four hard-contrast sections) ---
       The page must read as four visually SEPARATE blocks, never one
       flowing text page. These tokens drive the alternating hard
       void↔gold banding, the graphic gold rules that cut between
       sections, and the giant ghost numerals that number each block. */
    --vn-void: 0.07 0.018 260; /* deepest black — darker than vn-bg */
    --vn-void-2: 0.1 0.02 260; /* lifted void band for alternation */
    --vn-rule: 0.7 0.14 86; /* hard gold rule between sections */
    --vn-rule-soft: 0.7 0.14 86 / 0.28; /* faint gold hairline */
    --vn-ghost: 0.88 0.14 88 / 0.1; /* giant ghost numeral on void */
    --vn-ghost-ink: 0.16 0.04 258 / 0.14; /* ghost numeral on gold */
    --vn-glow-strong: 0.9 0.15 90 / 0.34; /* radiant light bloom */
    --vn-shadow-void: 0 30px 90px -30px oklch(0.02 0.01 260 / 0.95);
  }

  /* ============================================================
     QUIET LUXURY VOID — LANDING PAGE THEME (ADDITIVE)
     The new /gold-und-diamanten landing page. Scoped under
     `.quiet-void` so the global obsidian theme and every existing
     sub-theme stay untouched. The deepest black canvas with a single
     restrained radial gold glow, a centered gold-gradient H1, a 16:9
     video stage framed by a fine gold hairline and a deep stage
     shadow, and a WhatsApp CTA resting on a deep anthracite surface.
     Luxury here is restraint: almost no color, one gold light source,
     generous negative space.
     ============================================================ */
  .quiet-void {
    --qv-void: 0.06 0.004 260; /* deepest black canvas — below obsidian */
    --qv-anthracite: 0.16 0.008 260; /* deep anthracite surface (CTA / stage) */
    --qv-anthracite-2: 0.19 0.01 260; /* lifted anthracite for hover / inner */
    --qv-foreground: 0.96 0.006 258; /* near-white headline text */
    --qv-muted: 0.76 0.01 258; /* muted caption / micro-copy text */
    --qv-gold: 0.86 0.13 88; /* gold accent — the single light source */
    --qv-gold-2: 0.72 0.15 62; /* deeper gold for gradient tail */
    --qv-gold-hair: 0.72 0.13 82 / 0.42; /* fine gold hairline */
    --qv-border: 0.28 0.01 260; /* neutral dark hairline */

    --gradient-qv-gold: linear-gradient(
      100deg,
      oklch(0.94 0.06 92),
      oklch(0.86 0.13 88) 42%,
      oklch(0.72 0.15 62)
    );
    --gradient-qv-glow: radial-gradient(
      58% 46% at 50% 0%,
      oklch(0.86 0.13 88 / 0.13),
      transparent 70%
    );
    --gradient-qv-cta: linear-gradient(
      135deg,
      oklch(0.2 0.01 260),
      oklch(0.15 0.008 260)
    );
  }

  * {
  border-color: oklch(var(--border));
}
  body {
  background-color: oklch(var(--background));
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    font-size: 1rem;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
  p {
  line-height: 1.625;
}
  /* Global graphics safety — never let media overflow or distort. Images
     scale down to fit their container, keep aspect ratio, and never break
     the horizontal layout. This is additive and does not alter any scoped
     theme's explicit object-fit rules (e.g. .ka-gallery-img contain). */
  img,
  video,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
  }
  button,
  a,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
  /* Clear, legible focus for keyboard users on every interactive element */
  :focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .\!container {
    max-width: 1400px !important;
  }

  .container {
    max-width: 1400px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.-inset-6 {
  inset: -1.5rem;
}
.inset-0 {
  inset: 0px;
}
.-bottom-24 {
  bottom: -6rem;
}
.-right-10 {
  right: -2.5rem;
}
.-top-10 {
  top: -2.5rem;
}
.-top-24 {
  top: -6rem;
}
.-top-3 {
  top: -0.75rem;
}
.bottom-\[-20\%\] {
  bottom: -20%;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-5 {
  left: 1.25rem;
}
.left-\[-10\%\] {
  left: -10%;
}
.right-0 {
  right: 0px;
}
.right-3\.5 {
  right: 0.875rem;
}
.right-6 {
  right: 1.5rem;
}
.right-\[-10\%\] {
  right: -10%;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-6 {
  top: 1.5rem;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.order-first {
  order: -9999;
}
.order-last {
  order: 9999;
}
.col-start-2 {
  grid-column-start: 2;
}
.col-start-3 {
  grid-column-start: 3;
}
.m-0 {
  margin: 0px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-1\.5 {
  width: 0.375rem;
  height: 0.375rem;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-40 {
  width: 10rem;
  height: 10rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-56 {
  width: 14rem;
  height: 14rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-72 {
  width: 18rem;
  height: 18rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-\[24rem\] {
  width: 24rem;
  height: 24rem;
}
.size-\[26rem\] {
  width: 26rem;
  height: 26rem;
}
.size-\[28rem\] {
  width: 28rem;
  height: 28rem;
}
.size-\[30rem\] {
  width: 30rem;
  height: 30rem;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-1 {
  height: 0.25rem;
}
.h-10 {
  height: 2.5rem;
}
.h-16 {
  height: 4rem;
}
.h-3 {
  height: 0.75rem;
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-\[calc\(100dvh-8rem\)\] {
  max-height: calc(100dvh - 8rem);
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-64 {
  min-height: 16rem;
}
.min-h-\[88vh\] {
  min-height: 88vh;
}
.min-h-screen {
  min-height: 100vh;
}
.w-10 {
  width: 2.5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-6 {
  width: 1.5rem;
}
.w-72 {
  width: 18rem;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-16 {
  min-width: 4rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes dropdown-in {

  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.animate-dropdown-in {
  animation: dropdown-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes float {

  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}
@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.resize {
  resize: both;
}
.list-disc {
  list-style-type: disc;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[1fr_auto_1fr\] {
  grid-template-columns: 1fr auto 1fr;
}
.grid-rows-\[0fr\] {
  grid-template-rows: 0fr;
}
.grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: end;
}
.justify-self-center {
  justify-self: center;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-wrap {
  text-wrap: wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[2rem\] {
  border-radius: 2rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[oklch\(var\(--gs-orange\)\/0\.45\)\] {
  border-color: oklch(var(--gs-orange)/0.45);
}
.border-\[oklch\(var\(--ka-orange\)\/0\.45\)\] {
  border-color: oklch(var(--ka-orange)/0.45);
}
.border-\[oklch\(var\(--qv-border\)\)\] {
  border-color: oklch(var(--qv-border));
}
.border-\[oklch\(var\(--qv-gold-hair\)\)\] {
  border-color: oklch(var(--qv-gold-hair));
}
.border-accent {
  --tw-border-opacity: 1;
  border-color: oklch(var(--accent) / var(--tw-border-opacity, 1));
}
.border-accent\/30 {
  border-color: oklch(var(--accent) / 0.3);
}
.border-accent\/40 {
  border-color: oklch(var(--accent) / 0.4);
}
.border-accent\/70 {
  border-color: oklch(var(--accent) / 0.7);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-destructive\/60 {
  border-color: oklch(var(--destructive) / 0.6);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-t-\[oklch\(var\(--qv-gold\)\)\] {
  border-top-color: oklch(var(--qv-gold));
}
.bg-\[oklch\(var\(--gs-orange\)\/0\.12\)\] {
  background-color: oklch(var(--gs-orange)/0.12);
}
.bg-\[oklch\(var\(--ka-orange\)\/0\.12\)\] {
  background-color: oklch(var(--ka-orange)/0.12);
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-accent-foreground {
  background-color: oklch(var(--accent-foreground));
}
.bg-accent\/10 {
  background-color: oklch(var(--accent) / 0.1);
}
.bg-accent\/20 {
  background-color: oklch(var(--accent) / 0.2);
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive\/10 {
  background-color: oklch(var(--destructive) / 0.1);
}
.bg-destructive\/20 {
  background-color: oklch(var(--destructive) / 0.2);
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/30 {
  background-color: oklch(var(--muted) / 0.3);
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-muted {
  --tw-gradient-from: oklch(var(--muted) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: oklch(var(--muted) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-muted\/60 {
  --tw-gradient-to: oklch(var(--muted) / 0.6) var(--tw-gradient-to-position);
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-28 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.font-body {
  font-family: var(--font-body), sans-serif;
}
.font-display {
  font-family: var(--font-display), serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-8 {
  line-height: 2rem;
}
.leading-\[1\.02\] {
  line-height: 1.02;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-\[0\.25em\] {
  letter-spacing: 0.25em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[oklch\(var\(--qv-gold\)\)\] {
  color: oklch(var(--qv-gold));
}
.text-\[oklch\(var\(--qv-muted\)\)\] {
  color: oklch(var(--qv-muted));
}
.text-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.text-amber-50 {
  --tw-text-opacity: 1;
  color: rgb(255 251 235 / var(--tw-text-opacity, 1));
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground\/40 {
  color: oklch(var(--muted-foreground) / 0.4);
}
.text-muted-foreground\/80 {
  color: oklch(var(--muted-foreground) / 0.8);
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-100 {
  --tw-text-opacity: 1;
  color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}
.text-yellow-50 {
  --tw-text-opacity: 1;
  color: rgb(254 252 232 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-foreground {
  accent-color: oklch(var(--foreground));
}
.opacity-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-\[0\.05\] {
  opacity: 0.05;
}
.opacity-\[0\.06\] {
  opacity: 0.06;
}
.opacity-\[0\.08\] {
  opacity: 0.08;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-aw-gold {
  --tw-shadow: 0 14px 34px -14px oklch(0.78 0.15 82 / 0.4);
  --tw-shadow-colored: 0 14px 34px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-ca-card {
  --tw-shadow: 0 18px 48px -16px oklch(0.05 0.01 260 / 0.7);
  --tw-shadow-colored: 0 18px 48px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow: 0 1px 2px oklch(0.3 0.07 258 / 0.04), 0 8px 24px -12px oklch(0.3 0.07 258 / 0.14);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 8px 24px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-co-gold {
  --tw-shadow: 0 14px 34px -14px oklch(0.78 0.15 82 / 0.4);
  --tw-shadow-colored: 0 14px 34px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-cta {
  --tw-shadow: 0 18px 40px -18px oklch(0.02 0.005 260 / 0.85), 0 10px 30px -16px oklch(0.86 0.13 88 / 0.28);
  --tw-shadow-colored: 0 18px 40px -18px var(--tw-shadow-color), 0 10px 30px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-elevated {
  --tw-shadow: 0 12px 32px -8px oklch(0.3 0.07 258 / 0.18);
  --tw-shadow-colored: 0 12px 32px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-gold-glow {
  --tw-shadow: 0 8px 24px -6px oklch(0.78 0.15 82 / 0.35);
  --tw-shadow-colored: 0 8px 24px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-kc-blue {
  --tw-shadow: 0 14px 34px -14px oklch(0.53 0.14 247 / 0.4);
  --tw-shadow-colored: 0 14px 34px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-obsidian-blue {
  --tw-shadow: 0 14px 40px -16px oklch(0.6 0.16 255 / 0.4);
  --tw-shadow-colored: 0 14px 40px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-orange-glow {
  --tw-shadow: 0 8px 24px -6px oklch(0.68 0.19 55 / 0.3);
  --tw-shadow-colored: 0 8px 24px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sp {
  --tw-shadow: 0 14px 34px -14px oklch(0.16 0.04 258 / 0.14);
  --tw-shadow-colored: 0 14px 34px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-stage {
  --tw-shadow: 0 40px 120px -40px oklch(0.02 0.005 260 / 0.9), 0 18px 48px -24px oklch(0.02 0.005 260 / 0.7);
  --tw-shadow-colored: 0 40px 120px -40px var(--tw-shadow-color), 0 18px 48px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-subtle {
  --tw-shadow: 0 2px 12px -2px oklch(0.3 0.07 258 / 0.08);
  --tw-shadow-colored: 0 2px 12px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow-color: oklch(var(--card));
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-2xl {
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_10px_rgba\(255\2c 255\2c 255\2c 0\.35\)\] {
  --tw-drop-shadow: drop-shadow(0 0 10px rgba(255,255,255,0.35));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[grid-template-rows\] {
  transition-property: grid-template-rows;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.fade-in {
  --tw-enter-opacity: 0;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
/* ============================================================
     DEEP OBSIDIAN — GLASSMORPHISM & AMBIENT GLOW UTILITIES
     Global Dark Neo-Minimalism helpers. Semi-transparent frosted
     layers with backdrop-blur and a 1px milky-white border for
     every card / dropdown / menu / form, plus subtle electric-blue
     & gold radial glows for spatial depth. No cheap borders, no
     loud colors, no standard shadows.
     ============================================================ */
.glass {
    background-color: oklch(0.17 0.01 258 / 0.6);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid oklch(0.3 0.012 258 / 0.55);
  }
.glass-card {
    background-color: oklch(0.17 0.01 258 / 0.68);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid oklch(0.32 0.012 258 / 0.5);
    box-shadow: 0 20px 60px -30px oklch(0.03 0.005 258 / 0.9);
  }
.glass-nav {
    background-color: oklch(0.13 0.006 258 / 0.7);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid oklch(0.3 0.012 258 / 0.4);
  }
.glass-dropdown {
    background-color: oklch(0.16 0.01 258 / 0.85);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid oklch(0.32 0.012 258 / 0.5);
    box-shadow: 0 24px 60px -24px oklch(0.03 0.005 258 / 0.95);
  }
.glass-form {
    background-color: oklch(0.16 0.01 258 / 0.66);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid oklch(0.3 0.012 258 / 0.5);
  }
/* ============================================================
     HOME PAGE — DEEP OBSIDIAN GLASS WRAPPERS (additive)
     Signature surfaces for wrapping the original home-page content
     (portrait video banner, hero, Manifesto, Audience, Über mich,
     3-pillar Links, multilingual HeyGen video sections) in the Deep
     Obsidian Dark Mode. Frosted glass + electric-blue & gold radial
     glows + 1px milky-white hairline — no cheap borders, no standard
     shadows. Consumed by HomePage sections under the `.obsidian`
     cascade scope.
     ============================================================ */
/* Section-level glass card with the electric-blue & gold radial glows
     baked in — the primary wrapper for home sections on the obsidian
     canvas. The radial gradients layer over the frosted surface. */
.glass-obsidian {
    position: relative;
    background-color: oklch(0.17 0.01 258 / 0.68);
    background-image: var(--gradient-obsidian-blue),
      var(--gradient-obsidian-gold);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid oklch(0.32 0.012 258 / 0.5);
    box-shadow: 0 20px 60px -30px oklch(0.03 0.005 258 / 0.9), inset 0 1px 0 0
      oklch(0.98 0.01 258 / 0.06);
  }
/* Frosted media frame for the portrait video banner and the multilingual
     HeyGen video sections — a glass panel tuned for embedded video, with a
     milky hairline and soft obsidian shadow so the media reads as a premium
     glass panel floating on the dark canvas. */
.glass-video-frame {
    background-color: oklch(0.13 0.006 258 / 0.6);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid oklch(0.32 0.012 258 / 0.5);
    border-radius: 1.5rem;
    box-shadow: 0 24px 60px -30px oklch(0.03 0.005 258 / 0.9), inset 0 1px 0 0
      oklch(0.98 0.01 258 / 0.06);
    overflow: hidden;
  }
/* Obsidian ambient depth — electric blue & gold radial glows */
.bg-obsidian-blue {
    background-image: var(--gradient-obsidian-blue);
  }
.bg-obsidian-gold {
    background-image: var(--gradient-obsidian-gold);
  }
.bg-obsidian-ambient {
    background-image: var(--gradient-obsidian-blue),
      var(--gradient-obsidian-gold);
  }
/* White-silver gradient text for large tight headlines */
.text-gradient-silver {
    background-image: var(--gradient-silver);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-gold {
    background-image: var(--gradient-gold);
  }
.bg-gradient-subtle {
    background-image: var(--gradient-subtle);
  }
.text-gradient-gold {
    background-image: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.text-gradient-primary {
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-grid-navy {
    background-image: linear-gradient(
        to right,
        oklch(0.16 0.04 258 / 0.06) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        oklch(0.16 0.04 258 / 0.06) 1px,
        transparent 1px
      );
    background-size: 44px 44px;
  }
/* ============================================================
     NEW LANDING PAGE — SURFACE & TEXT HELPERS (additive)
     Consumed by the new B2B AI automation agency landing page only.
     ============================================================ */
.bg-ld {
    background-color: oklch(var(--ld-bg));
  }
.bg-ld-2 {
    background-color: oklch(var(--ld-bg-2));
  }
.bg-ld-2\/60 {
    background-color: oklch(var(--ld-bg-2) / 0.6);
  }
.bg-ld-card {
    background-color: oklch(var(--ld-card));
  }
.text-ld {
    color: oklch(var(--ld-foreground));
  }
.text-ld-muted {
    color: oklch(var(--ld-muted));
  }
.text-ld-blue {
    color: oklch(var(--ld-blue));
  }
.text-ld-blue-foreground {
    color: oklch(var(--ld-blue-foreground));
  }
.border-ld {
    border-color: oklch(var(--ld-border));
  }
.border-ld-blue {
    border-color: oklch(var(--ld-blue));
  }
.bg-gradient-ld-blue {
    background-image: var(--gradient-ld-blue);
  }
.text-gradient-ld-blue {
    background-image: var(--gradient-ld-blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-ld-ambient-blue {
    background-image: var(--gradient-ld-ambient-blue);
  }
.bg-ld-ambient-purple {
    background-image: var(--gradient-ld-ambient-purple);
  }
.bg-ld-ambient-bottom {
    background-image: var(--gradient-ld-ambient-bottom);
  }
/* Dark glass card for the landing page — frosted surface, thin
     milky-white border, soft deep shadow. */
.ld-glass-card {
    background-color: oklch(var(--ld-card) / 0.6);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid oklch(var(--ld-border) / 0.55);
    border-radius: 1rem;
    box-shadow: 0 24px 60px -30px oklch(0.03 0.005 258 / 0.9), inset 0 1px 0 0
      oklch(0.98 0.01 258 / 0.06);
  }
/* Electric-blue filled primary CTA for the landing page */
.btn-ld-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--ld-blue-foreground));
    background-image: var(--gradient-ld-blue);
    box-shadow: 0 14px 34px -14px oklch(0.6 0.16 255 / 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-ld-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -16px oklch(0.6 0.16 255 / 0.65);
    filter: brightness(1.05);
  }
/* Ghost secondary button for the landing page */
.btn-ld-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--ld-foreground));
    background-color: transparent;
    border: 1px solid oklch(var(--ld-border));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-ld-ghost:hover {
    background-color: oklch(var(--ld-card) / 0.6);
    border-color: oklch(var(--ld-blue) / 0.5);
    transform: translateY(-2px);
  }
.focus-ring:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: oklch(var(--background));
}
.profile-ring {
    border-radius: 9999px;
    box-shadow: 0 0 0 4px var(--card), 0 0 0 10px oklch(0.78 0.15 82 / 0.6), 0
      24px 64px -18px oklch(0.3 0.07 258 / 0.25);
  }
/* ============================================================
     BADGE TEXT — INLINE *++...++ MARKER PILL (additive)
     Consumed by the BadgeText component. Recognizes *++Text++
     markers in any text source (i18n strings, data sources, static
     text) and renders them as strongly rounded pill badges: bright
     gold/champagne accent text on a soft gold-tinted dark surface
     with a gold hairline — the signature marketing highlight on the
     obsidian canvas. Strongly rounded (9999px) pill shape per the
     Deep Obsidian badge design rule.
     ============================================================ */
.badge-text {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    color: oklch(0.13 0.01 258); /* dark navy — WCAG-AA on the gold-tinted pill */
    background-color: oklch(0.82 0.14 85 / 0.12); /* soft gold tint */
    border: 1px solid oklch(0.82 0.14 85 / 0.35); /* gold hairline */
    box-shadow: 0 4px 14px -6px oklch(0.78 0.15 82 / 0.4);
    white-space: nowrap;
  }
/* ============================================================
     GLOBAL READABILITY RULE — DARK TEXT ON GOLD-TINTED SURFACES
     (additive, global obsidian scope)
     --accent is gold, so accent-tinted pills/badges
     (bg-accent/5, bg-accent/10, bg-accent/15, bg-accent/20) and the
     accent-foreground-tinted panels (bg-accent-foreground/5 … /20) are
     bright gold/amber surfaces. Near-white text on those surfaces is
     unreadable, so this rule no longer forces a bright color: the
     existing dark text-accent-foreground (dark navy) set on those
     elements now shows through, giving WCAG-AA contrast on every
     gold/amber/yellow surface. Solid gold-gradient buttons keep their
     dark-navy label for the same reason.
     ============================================================ */
.obsidian .bg-accent\/5,
  .obsidian .bg-accent\/10,
  .obsidian .bg-accent\/15,
  .obsidian .bg-accent\/20,
  .obsidian .bg-accent-foreground\/5,
  .obsidian .bg-accent-foreground\/10,
  .obsidian .bg-accent-foreground\/15,
  .obsidian .bg-accent-foreground\/20 {
    color: oklch(0.13 0.01 258); /* dark navy — high contrast on gold tints */
  }
/* ============================================================
     PORTRAIT BANNER — CENTERED GOLD-FRAMED SHOWCASE (additive)
     The 'nieeinechance' image no longer bleeds edge-to-edge.
     Instead it is centered and width-constrained inside a rounded
     frame with a golden ring at the top, echoing the profile
     image's gold-ring (.profile-ring) treatment. A soft gold glow
     sits behind the frame and a gold hairline seam keeps the
     transition into the light hero crisp and on-brand with the
     Navy/Gold/Orange system.
     ============================================================ */
/* The frame wrapper carries an explicit gold gradient border so the
     golden frame is unmistakably visible at the top edge (and all around)
     — a real painted border, not a box-shadow that can be clipped or
     washed out against the light page background. The image sits inside
     with a small inset so the gold band reads as a frame around it. */
.portrait-banner__frame {
    border-radius: 2rem;
    padding: 6px;
    background-image: var(--gradient-gold);
    box-shadow: 0 0 0 4px var(--card), 0 0 0 10px oklch(0.78 0.15 82 / 0.6), 0
      24px 64px -18px oklch(0.3 0.07 258 / 0.25);
  }
.portrait-banner__img {
    display: block;
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    border-radius: calc(2rem - 6px);
  }
/* Refined gold hairline seam where the framed image meets the
     light hero below — keeps the Navy/Gold/Orange register intact. */
.portrait-banner {
    border-bottom: 1px solid oklch(0.78 0.15 82 / 0.35);
  }
/* ============================================================
     FORMAT SELECTOR — SEGMENTED CONTROL (additive, global light)
     Highly visible PNG/JPG/WebP format picker for the
     Erfolgsbanner download dialog. A segmented control on a muted
     track where the active option fills with the brand gold
     gradient + navy text + a soft gold glow — unmistakable at a
     glance. Reuses the global Navy/Gold register so it feels
     native to the light-theme Erfolgsbanner page.
     ============================================================ */
.format-segmented {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem;
    border-radius: 9999px;
    background-color: oklch(var(--muted));
    border: 1px solid oklch(var(--border));
    box-shadow: inset 0 1px 2px oklch(0.3 0.07 258 / 0.06);
  }
.format-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.15rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--muted-foreground));
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.format-option:hover {
    color: oklch(var(--foreground));
    background-color: oklch(var(--card) / 0.6);
  }
.format-option[aria-checked="true"],
  .format-option-active {
    background-image: var(--gradient-gold);
    color: oklch(0.16 0.04 258);
    border-color: transparent;
    box-shadow: 0 6px 18px -6px oklch(0.78 0.15 82 / 0.5);
  }
.link-card {
  border-radius: 1rem;
  background-color: oklch(var(--card));
  --tw-shadow: 0 1px 2px oklch(0.3 0.07 258 / 0.04), 0 8px 24px -12px oklch(0.3 0.07 258 / 0.14);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 8px 24px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: oklch(var(--card));
  --tw-shadow: var(--tw-shadow-colored);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.link-card:hover {
    box-shadow: var(--shadow-elevated);
    transform: translateY(-4px);
  }
/* Caffeine referral card — the signature gold card in the links section.
     Inverts the plain white link cards: a gold-gradient surface with deep
     navy text, a soft gold-glow hover, and a subtle shimmering sheen. */
.referral-card {
  border-radius: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-image: var(--gradient-gold);
    box-shadow: var(--shadow-gold-glow);
    position: relative;
    overflow: hidden;
}
.referral-card:hover {
    box-shadow: var(--shadow-gold-strong);
    transform: translateY(-4px);
  }
/* Sheen sweep across the gold surface on hover */
.referral-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 40%,
      oklch(0.99 0.02 95 / 0.35) 50%,
      transparent 60%
    );
    transform: translateX(-120%);
    transition: transform 0.8s ease;
    pointer-events: none;
  }
.referral-card:hover::after {
    transform: translateX(120%);
  }
/* ============================================================
     QUIET LUXURY VOID — UTILITIES (additive)
     Purely additive helpers for the /gold-und-diamanten landing page.
     All color comes from OKLCH tokens — never raw literals.
     ============================================================ */
/* Centered gold-gradient headline text via background-clip */
.text-gold-gradient {
    background-image: var(--gradient-qv-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
/* 1px fine gold hairline border */
.hairline-gold {
    border: 1px solid oklch(var(--qv-gold-hair));
  }
/* Deep anthracite surface */
.bg-anthracite {
    background-color: oklch(var(--qv-anthracite));
  }
.bg-anthracite-2 {
    background-color: oklch(var(--qv-anthracite-2));
  }
.bg-quiet-void {
    background-color: oklch(var(--qv-void));
  }
.bg-quiet-void-glow {
    background-color: oklch(var(--qv-void));
    background-image: var(--gradient-qv-glow);
  }
/* Soft deep stage shadow — lifts the 16:9 video stage off the void */
.shadow-stage {
    box-shadow: 0 40px 120px -40px oklch(0.02 0.005 260 / 0.9), 0 18px 48px
      -24px oklch(0.02 0.005 260 / 0.7);
  }
/* CTA button shadow — quiet lift with a faint gold bleed */
.shadow-cta {
    box-shadow: 0 18px 40px -18px oklch(0.02 0.005 260 / 0.85), 0 0 0 1px
      oklch(var(--qv-gold-hair)), 0 10px 30px -16px oklch(0.86 0.13 88 / 0.28);
  }
/* Small muted caption text */
.micro-copy {
    font-size: 0.8125rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: oklch(var(--qv-muted));
  }
/* Wide elite letter-spacing */
.tracking-elite {
    letter-spacing: 0.32em;
  }
/* 16:9 video stage — fine gold hairline frame + deep stage shadow */
.video-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid oklch(var(--qv-gold-hair));
    background-color: oklch(var(--qv-anthracite));
    box-shadow: 0 40px 120px -40px oklch(0.02 0.005 260 / 0.9), 0 18px 48px
      -24px oklch(0.02 0.005 260 / 0.7);
  }
/* WhatsApp CTA — anthracite surface, gold hairline, CTA shadow */
.btn-quiet-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(var(--qv-foreground));
    background-image: var(--gradient-qv-cta);
    border: 1px solid oklch(var(--qv-gold-hair));
    box-shadow: 0 18px 40px -18px oklch(0.02 0.005 260 / 0.85), 0 10px 30px
      -16px oklch(0.86 0.13 88 / 0.28);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-quiet-cta:hover {
    transform: translateY(-2px);
    border-color: oklch(var(--qv-gold) / 0.7);
    box-shadow: 0 24px 52px -20px oklch(0.02 0.005 260 / 0.9), 0 14px 36px -16px
      oklch(0.86 0.13 88 / 0.4);
  }
/* Mobile-first helpers */
.touch-target {
    min-height: 44px;
    min-width: 44px;
  }
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
.no-scrollbar::-webkit-scrollbar {
    display: none;
  }
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
/* Orange accent (from profile hoodie) — used sparingly */
.text-accent-orange {
    color: oklch(var(--accent-orange));
  }
.bg-accent-orange {
    background-color: oklch(var(--accent-orange));
  }
.ring-accent-orange {
    --tw-ring-color: oklch(var(--accent-orange));
  }
/* Green success accent — used for the 'Perfekt für Deutschland' badge */
.text-success {
    color: oklch(var(--success));
  }
.bg-success {
    background-color: oklch(var(--success));
  }
.bg-success\/10 {
    background-color: oklch(var(--success) / 0.1);
  }
.text-success-foreground {
    color: oklch(var(--success-foreground));
  }
/* ============================================================
     PRIVATE LOAN — DARK-LUX SURFACE & TEXT HELPERS (additive)
     Consumed by the exclusive private-loan subpage only.
     ============================================================ */
.bg-lux {
    background-color: oklch(var(--lux-bg));
  }
.bg-lux-2 {
    background-color: oklch(var(--lux-bg-2));
  }
.bg-lux-card {
    background-color: oklch(var(--lux-card));
  }
.text-lux {
    color: oklch(var(--lux-foreground));
  }
.text-lux-muted {
    color: oklch(var(--lux-muted));
  }
.text-lux-gold {
    color: oklch(var(--lux-gold));
  }
.border-lux {
    border-color: oklch(var(--lux-border));
  }
.border-lux-gold {
    border-color: oklch(var(--lux-border-gold));
  }
.bg-gradient-champagne {
    background-image: var(--gradient-champagne);
  }
.text-gradient-champagne {
    background-image: var(--gradient-champagne);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-lux-ambient {
    background-image: var(--gradient-lux-ambient);
  }
/* Elevated private-banking card surface */
.lux-card {
    background-color: oklch(var(--lux-card));
    border: 1px solid oklch(var(--lux-border));
    border-radius: 1rem;
  }
/* Discreet private-banking button: champagne hairline + champagne
     text on a dark surface, filling with a champagne gradient on
     hover. No shrill colors, no garish glow. */
.btn-lux {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--lux-border-gold));
    padding: 0.9rem 1.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(var(--lux-champagne));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-lux:hover {
    background-image: var(--gradient-champagne);
    color: oklch(0.16 0.02 258);
    border-color: transparent;
    box-shadow: 0 10px 30px -10px oklch(0.82 0.12 85 / 0.35);
  }
/* Explosive green callout for the 'Ordentlicher Darlehensvertrag' notice.
     A scale-up pop/burst entrance with a pulsing glow ring. Reduced-motion
     users get the static green callout via the global prefers-reduced-motion
     rule in @layer base. */
.notice-explode {
    animation: notice-explode 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
      notice-glow 2.4s ease-in-out 0.9s infinite;
  }
/* ============================================================
     FITLINE — TWO-ZONE SURFACE & TEXT HELPERS (additive)
     Consumed by the FitLine landing subpage only. Scoped helpers
     for the red product zone and the blue/dark partner zone.
     ============================================================ */
/* Zone 1 — product / end-customer surfaces */
.bg-fl-warm {
    background-color: oklch(var(--fl-warm-bg));
  }
.bg-fl-warm-card {
    background-color: oklch(var(--fl-warm-card));
  }
.text-fl-ink {
    color: oklch(var(--fl-ink));
  }
.text-fl-muted {
    color: oklch(var(--fl-muted));
  }
.text-fl-red {
    color: oklch(var(--fl-red));
  }
.bg-fl-red {
    background-color: oklch(var(--fl-red));
  }
.bg-gradient-fl-red {
    background-image: var(--gradient-fl-red);
  }
.text-gradient-fl-red {
    background-image: var(--gradient-fl-red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-fl-red-ambient {
    background-image: var(--gradient-fl-ambient-red);
  }
/* Zone 2 — business / partner surfaces (dark navy) */
.bg-fl-navy {
    background-color: oklch(var(--fl-navy-bg));
  }
.bg-fl-navy-card {
    background-color: oklch(var(--fl-navy-card));
  }
.text-fl-navy-text {
    color: oklch(var(--fl-navy-text));
  }
.text-fl-navy-muted {
    color: oklch(var(--fl-navy-muted));
  }
.text-fl-blue {
    color: oklch(var(--fl-blue));
  }
.bg-fl-blue {
    background-color: oklch(var(--fl-blue));
  }
.bg-gradient-fl-blue {
    background-image: var(--gradient-fl-blue);
  }
.text-gradient-fl-blue {
    background-image: var(--gradient-fl-blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-fl-blue-ambient {
    background-image: var(--gradient-fl-blue-ambient);
  }
.border-fl-navy {
    border-color: oklch(var(--fl-navy-border));
  }
/* FitLine card surface (zone 1) */
.fl-card {
    background-color: oklch(var(--fl-warm-card));
    border: 1px solid oklch(var(--fl-red) / 0.14);
    border-radius: 1.25rem;
  }
.fl-card:hover {
    box-shadow: var(--shadow-fl-red);
    transform: translateY(-4px);
  }
/* Navy partner card surface (zone 2) */
.fl-navy-card {
    background-color: oklch(var(--fl-navy-card));
    border: 1px solid oklch(var(--fl-navy-border));
    border-radius: 1.25rem;
  }
.fl-navy-card:hover {
    box-shadow: var(--shadow-fl-blue);
    transform: translateY(-4px);
  }
/* Primary CTA — FitLine RED (end-customer actions) */
.btn-fl-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--fl-red-foreground));
    background-image: var(--gradient-fl-red);
    box-shadow: 0 10px 28px -10px oklch(0.55 0.22 27 / 0.55);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-fl-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.55 0.22 27 / 0.65);
  }
/* Secondary CTA — outlined BLUE (hero partner action) */
.btn-fl-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 2px solid oklch(var(--fl-blue));
    padding: 0.9rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--fl-blue));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-fl-blue:hover {
    background-image: var(--gradient-fl-blue);
    color: oklch(var(--fl-blue-foreground));
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -12px oklch(0.42 0.13 255 / 0.5);
  }
/* Professional BLUE solid button (partner section, zone 2) */
.btn-fl-blue-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--fl-blue-foreground));
    background-image: var(--gradient-fl-blue);
    box-shadow: 0 10px 28px -10px oklch(0.42 0.13 255 / 0.55);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-fl-blue-solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.42 0.13 255 / 0.65);
  }
/* ============================================================
     KRYPTOCHECK DEUTSCHLAND — SURFACE & TEXT HELPERS (additive)
     Consumed by the MiCA exchange comparison subpage only. Scoped
     helpers for the crisp white / trust-blue comparison UI.
     ============================================================ */
.bg-kc {
    background-color: oklch(var(--kc-bg));
  }
.bg-kc-card {
    background-color: oklch(var(--kc-card));
  }
.text-kc {
    color: oklch(var(--kc-foreground));
  }
.text-kc-muted {
    color: oklch(var(--kc-muted));
  }
.text-kc-primary {
    color: oklch(var(--kc-primary));
  }
.bg-kc-primary {
    background-color: oklch(var(--kc-primary));
  }
.text-kc-success {
    color: oklch(var(--kc-success));
  }
.bg-kc-success {
    background-color: oklch(var(--kc-success));
  }
.text-kc-success-foreground {
    color: oklch(var(--kc-success-foreground));
  }
.border-kc {
    border-color: oklch(var(--kc-border));
  }
.bg-gradient-kc-blue {
    background-image: var(--gradient-kc-blue);
  }
.text-gradient-kc-blue {
    background-image: var(--gradient-kc-blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-kc-ambient {
    background-image: var(--gradient-kc-ambient);
  }
/* ============================================================
     CAFFEINE AI — SURFACE & TEXT HELPERS (additive)
     Consumed by the Caffeine AI landing page only. Scoped helpers
     for the dark tech-innovation UI: cyan/violet AI gradient
     accents, amber conversion CTA, dark elevated cards with cyan
     hairlines, and soft ambient glows.
     ============================================================ */
.bg-ca {
    background-color: oklch(var(--ca-bg));
  }
.bg-ca-2 {
    background-color: oklch(var(--ca-bg-2));
  }
.bg-ca-card {
    background-color: oklch(var(--ca-card));
  }
.text-ca {
    color: oklch(var(--ca-foreground));
  }
.text-ca-muted {
    color: oklch(var(--ca-muted));
  }
.text-ca-cyan {
    color: oklch(var(--ca-cyan));
  }
.text-ca-amber {
    color: oklch(var(--ca-amber));
  }
.border-ca {
    border-color: oklch(var(--ca-border));
  }
.border-ca-cyan {
    border-color: oklch(var(--ca-border-cyan));
  }
.bg-gradient-ca-ai {
    background-image: var(--gradient-ca-ai);
  }
.text-gradient-ca-ai {
    background-image: var(--gradient-ca-ai);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-ca-cta {
    background-image: var(--gradient-ca-cta);
  }
.bg-ca-ambient {
    background-image: var(--gradient-ca-ambient);
  }
.bg-ca-ambient-violet {
    background-image: var(--gradient-ca-ambient-violet);
  }
/* Elevated dark card — dark surface with a cyan hairline */
.ca-card {
    background-color: oklch(var(--ca-card));
    border: 1px solid oklch(var(--ca-border-cyan) / 0.5);
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ca-card:hover {
    box-shadow: var(--shadow-ca-cyan);
    transform: translateY(-4px);
  }
/* Primary CTA — cyan→violet AI gradient pill (hero / main actions) */
.btn-ca-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.11 0.02 260);
    background-image: var(--gradient-ca-ai);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.13 195 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-ca-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.13 195 / 0.55);
  }
/* Conversion CTA — warm amber gradient pill (affiliate sign-up) */
.btn-ca-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.11 0.02 260);
    background-image: var(--gradient-ca-cta);
    box-shadow: 0 10px 28px -10px oklch(0.72 0.17 70 / 0.5);
    animation: ca-pulse-ring 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-ca-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.72 0.17 70 / 0.6);
  }
/* Secondary CTA — cyan hairline outline (secondary action) */
.btn-ca-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--ca-border-cyan));
    padding: 0.9rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--ca-cyan));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-ca-outline:hover {
    background-image: var(--gradient-ca-ai);
    color: oklch(0.11 0.02 260);
    border-color: transparent;
    transform: translateY(-2px);
  }
/* Feature / pillar icon badge — cyan→violet gradient circle */
.ca-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-image: var(--gradient-ca-ai);
    color: oklch(0.11 0.02 260);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px oklch(0.78 0.13 195 / 0.45);
  }
/* Gold-ring profile portrait scoped to the dark caffeine-ai canvas.
     Keeps the brand gold ring the user wants (consistent with the other
     pages) but re-anchors the inner gap to the dark bg and adds a soft
     cyan ambient outer glow so it reads as part of the AI theme. */
.ca-profile-ring {
    border-radius: 9999px;
    box-shadow: 0 0 0 4px oklch(var(--ca-bg)), 0 0 0 10px oklch(0.82 0.13 85), 0
      0 0 14px oklch(0.78 0.13 195 / 0.28), 0 24px 64px -18px
      oklch(0.05 0.01 260 / 0.8);
  }
/* Comparison card surface — crisp light-gray card with soft hairline */
.kc-card {
    background-color: oklch(var(--kc-card));
    border: 1px solid oklch(var(--kc-border));
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.kc-card:hover {
    box-shadow: var(--shadow-kc);
    transform: translateY(-4px);
  }
/* Primary CTA — trust-blue gradient (compare / visit exchange) */
.btn-kc-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--kc-primary-foreground));
    background-image: var(--gradient-kc-blue);
    box-shadow: 0 10px 28px -10px oklch(0.53 0.14 247 / 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-kc-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.53 0.14 247 / 0.6);
  }
/* Secondary CTA — outlined trust-blue (secondary action) */
.btn-kc-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 2px solid oklch(var(--kc-primary));
    padding: 0.85rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--kc-primary));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-kc-outline:hover {
    background-color: oklch(var(--kc-primary));
    color: oklch(var(--kc-primary-foreground));
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -12px oklch(0.53 0.14 247 / 0.45);
  }
/* ============================================================
     WEBDESIGN — SURFACE & TEXT HELPERS (additive)
     Consumed by the professional web-design service subpage
     only. Scoped helpers for the premium studio UI: crisp
     cards, gold featured pricing, navy CTA, orange accents.
     ============================================================ */
.bg-wd {
    background-color: oklch(var(--wd-bg));
  }
.bg-wd-card {
    background-color: oklch(var(--wd-card));
  }
.text-wd {
    color: oklch(var(--wd-ink));
  }
.text-wd-muted {
    color: oklch(var(--wd-muted));
  }
.text-wd-gold {
    color: oklch(var(--wd-gold));
  }
.text-wd-orange {
    color: oklch(var(--wd-orange));
  }
.border-wd {
    border-color: oklch(var(--wd-border));
  }
.border-wd-gold {
    border-color: oklch(var(--wd-gold) / 0.4);
  }
.bg-gradient-wd-gold {
    background-image: var(--gradient-wd-gold);
  }
.text-gradient-wd-gold {
    background-image: var(--gradient-wd-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-wd-ambient {
    background-image: var(--gradient-wd-ambient);
  }
/* Studio card surface — crisp white card with soft hairline */
.wd-card {
    background-color: oklch(var(--wd-card));
    border: 1px solid oklch(var(--wd-border));
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.wd-card:hover {
    box-shadow: var(--shadow-wd);
    transform: translateY(-4px);
  }
/* Featured pricing package — gold gradient surface, deep navy text */
.wd-card-featured {
    background-image: var(--gradient-wd-gold);
    border: none;
    border-radius: 1.25rem;
    box-shadow: var(--shadow-gold-glow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.wd-card-featured:hover {
    box-shadow: var(--shadow-gold-strong);
    transform: translateY(-4px);
  }
/* Primary CTA — deep navy pill with gold text (premium, restrained) */
.btn-wd-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--primary-foreground));
    background-color: oklch(var(--primary));
    box-shadow: 0 10px 28px -10px oklch(0.3 0.07 258 / 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-wd-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.3 0.07 258 / 0.6);
  }
/* Secondary CTA — gold gradient (featured package action) */
.btn-wd-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-wd-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-wd-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
/* Tertiary CTA — outlined navy (secondary action) */
.btn-wd-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 2px solid oklch(var(--primary));
    padding: 0.85rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--primary));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-wd-outline:hover {
    background-color: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -12px oklch(0.3 0.07 258 / 0.45);
  }
/* Service / process step number badge — gold circle */
.wd-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-image: var(--gradient-wd-gold);
    color: oklch(0.16 0.04 258);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px oklch(0.78 0.15 82 / 0.4);
  }
/* ============================================================
     GLAUBENSSCHRITT — DARK STEWARDSHIP SURFACE & TEXT HELPERS
     Consumed by the faith-based wealth & cashflow subpage only.
     ============================================================ */
.bg-gs {
    background-color: oklch(var(--gs-bg));
  }
.bg-gs-2 {
    background-color: oklch(var(--gs-bg-2));
  }
.bg-gs-card {
    background-color: oklch(var(--gs-card));
  }
.text-gs {
    color: oklch(var(--gs-foreground));
  }
.text-gs-muted {
    color: oklch(var(--gs-muted));
  }
.text-gs-gold {
    color: oklch(var(--gs-gold));
  }
.text-gs-orange {
    color: oklch(var(--gs-orange));
  }
.border-gs {
    border-color: oklch(var(--gs-border));
  }
.border-gs-gold {
    border-color: oklch(var(--gs-border-gold));
  }
.bg-gradient-gs-gold {
    background-image: var(--gradient-gs-gold);
  }
.text-gradient-gs-gold {
    background-image: var(--gradient-gs-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-gs-cta {
    background-image: var(--gradient-gs-cta);
  }
.bg-gs-ambient {
    background-image: var(--gradient-gs-ambient);
  }
.bg-gs-ambient-orange {
    background-image: var(--gradient-gs-ambient-orange);
  }
/* Elevated stewardship card — dark surface, gold hairline */
.gs-card {
    background-color: oklch(var(--gs-card));
    border: 1px solid oklch(var(--gs-border-gold) / 0.55);
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.gs-card:hover {
    box-shadow: var(--shadow-gs-gold);
    transform: translateY(-4px);
  }
/* Primary CTA — gold gradient pill (hero / main actions) */
.btn-gs-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-gs-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-gs-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
/* WhatsApp CTA — warm gold-to-orange gradient, soft pulse ring */
.btn-gs-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.99 0.01 60);
    background-image: var(--gradient-gs-cta);
    box-shadow: 0 10px 28px -10px oklch(0.68 0.19 55 / 0.5);
    animation: gs-pulse-ring 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-gs-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.68 0.19 55 / 0.6);
  }
/* Secondary CTA — gold hairline outline (secondary action) */
.btn-gs-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--gs-border-gold));
    padding: 0.9rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--gs-gold));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-gs-outline:hover {
    background-image: var(--gradient-gs-gold);
    color: oklch(0.16 0.04 258);
    border-color: transparent;
    transform: translateY(-2px);
  }
/* Minimalist cross accent — two gold-gradient bars */
.gs-cross {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
  }
.gs-cross::before,
  .gs-cross::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    background-image: var(--gradient-gs-gold);
    box-shadow: 0 6px 18px -6px oklch(0.78 0.15 82 / 0.5);
  }
.gs-cross::before {
    width: 0.3rem;
    height: 100%;
  }
.gs-cross::after {
    width: 100%;
    height: 0.3rem;
  }
/* Talent coin badge — gold circle for the Matthew 25 section */
.gs-talent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-image: var(--gradient-gs-gold);
    color: oklch(0.16 0.04 258);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px oklch(0.78 0.15 82 / 0.45);
  }
/* Stewardship pillar number badge — gold ring circle */
.gs-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--gs-border-gold));
    color: oklch(var(--gs-gold));
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
  }
/* Scripture quote — gold hairline left rule */
.gs-quote {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid oklch(var(--gs-border-gold));
  }
/* ============================================================
     GLAUBENSSCHRITT — READ-ALOUD (VORLESE) CONTROL (additive)
     Prominent gold play button + play/pause/stop control bar for
     the Web-Speech-API read-aloud of the Matthew 25 parable.
     Reuses the existing --gs-* tokens and gs-* patterns — no new
     palette. A large gold-gradient play button with a soft gold
     pulse ring (echoing the gold-ring profile image and gold CTA),
     and a dark elevated transport bar with a gold hairline.
     ============================================================ */
/* Prominent hero play button — large gold-gradient circle with a
     soft gold pulse ring. Deep navy play glyph for strong contrast
     on the gold surface. The pulse ring invites the click that the
     browser autoplay policy requires to start speech. */
.gs-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    background-image: var(--gradient-gs-gold);
    color: oklch(0.16 0.04 258);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.5);
    animation: gs-play-pulse 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.gs-play:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.6);
  }
.gs-play svg {
    width: 1.75rem;
    height: 1.75rem;
  }
/* Read-aloud control bar — elevated dark card with a gold hairline,
     housing the play/pause/stop transport controls and status text.
     Reads as a premium, reverent transport for the scripture. */
.gs-reader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-radius: 9999px;
    background-color: oklch(var(--gs-card));
    border: 1px solid oklch(var(--gs-border-gold) / 0.55);
    padding: 0.5rem 0.75rem;
    box-shadow: var(--shadow-gs);
  }
/* Transport buttons — round gold-hairline circles with gold glyphs.
     The active state fills with the gold gradient + deep navy glyph. */
.gs-reader-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    min-width: 44px;
    min-height: 44px;
    border-radius: 9999px;
    border: 1px solid oklch(var(--gs-border-gold));
    color: oklch(var(--gs-gold));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.gs-reader-btn:hover {
    background-image: var(--gradient-gs-gold);
    color: oklch(0.16 0.04 258);
    border-color: transparent;
    transform: translateY(-2px);
  }
.gs-reader-btn.is-active {
    background-image: var(--gradient-gs-gold);
    color: oklch(0.16 0.04 258);
    border-color: transparent;
  }
.gs-reader-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
/* Status text beside the transport controls — champagne muted. */
.gs-reader-status {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(var(--gs-muted));
    padding: 0 0.5rem;
  }
/* Localized unsupported / no-voice hint — soft gold-tinted pill
     shown instead of a raw error when speech is unavailable. */
.gs-reader-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--gs-border-gold) / 0.5);
    background-color: oklch(var(--gs-card));
    color: oklch(var(--gs-muted));
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
  }
/* Hero cross-silhouette banner — a layered gold-gradient frame with
     an offset hairline and a soft gold glow, presenting the dramatic
     cross image as a premium, reverent opening visual above the hero
     text. The square image sits inside with a crisp inner edge. */
.gs-kreuz-frame {
    position: relative;
    border-radius: 1.5rem;
    padding: 0.75rem;
    background-image: var(--gradient-gs-gold);
    box-shadow: 0 24px 60px -20px oklch(0.05 0.01 258 / 0.8), 0 0 0 1px
      oklch(var(--gs-border-gold) / 0.6), 0 0 60px -12px
      oklch(0.78 0.15 82 / 0.35);
  }
.gs-kreuz-frame::before {
    content: "";
    position: absolute;
    inset: 0.375rem;
    border-radius: 1.15rem;
    border: 1px solid oklch(0.16 0.04 258 / 0.35);
    pointer-events: none;
  }
.gs-kreuz-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 1.15rem;
    -o-object-fit: cover;
       object-fit: cover;
  }
/* Hero declaration under the cross — a striking, golden marketing
     statement that anchors the page's faith register. Gold gradient
     display typography, generous sizing, a soft gold glow, and a
     subtle shimmer sweep so it reads as a reverent, premium banner
     directly beneath the cross image. */
.gs-under-cross {
    margin: 1.75rem auto 0;
    margin-bottom: 2.5rem;
    max-width: 34rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    background-image: var(--gradient-gs-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
    filter: drop-shadow(0 6px 24px oklch(0.78 0.15 82 / 0.35));
  }
/* Author signature under the hero declaration — the name rendered in an
     elegant script/cursive handwriting style with very strong gold marketing
     typography. A large display size, the gold gradient text treatment, and a
     soft gold glow make it read as a reverent, premium signature beneath the
     under-cross sentence. */
.gs-author-name {
    margin: 0 auto;
    padding: 0.5rem 0 0.75rem;
    max-width: 34rem;
    text-align: center;
    font-family: "Great Vibes", "Dancing Script", "Pacifico", "Brush Script MT",
      "Segoe Script", cursive;
    font-size: clamp(2.5rem, 7vw, 4rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
    background-image: var(--gradient-gs-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
    filter: drop-shadow(0 8px 28px oklch(0.78 0.15 82 / 0.45));
  }
/* Website banner — a standalone marketing section between the hero and the
     talents. Presents the uploaded 1920x1080 dark banner image full-width on
     desktop and scaled on mobile without horizontal scroll. The image is a
     static visual (not a link) with a localized heading above it. */
.gs-banner {
    background-color: oklch(var(--gs-bg));
  }
.gs-banner-frame {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid oklch(var(--gs-border-gold) / 0.55);
    box-shadow: 0 24px 60px -20px oklch(0.05 0.01 258 / 0.8), 0 0 60px -12px
      oklch(0.78 0.15 82 / 0.25);
  }
.gs-banner-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
  }
/* ============================================================
     FINANZIELLE FREIHEIT — MANIFESTO SURFACE & TEXT HELPERS
     Consumed by the homepage manifesto section (#manifesto) only.
     Scoped helpers for the dark-navy, gold-accented emotional
     register. All consume the `.manifest` scoped tokens.
     ============================================================ */
.bg-mf {
    background-color: oklch(var(--mf-bg));
  }
.bg-mf-2 {
    background-color: oklch(var(--mf-bg-2));
  }
.bg-mf-card {
    background-color: oklch(var(--mf-card));
  }
.text-mf {
    color: oklch(var(--mf-foreground));
  }
.text-mf-muted {
    color: oklch(var(--mf-muted));
  }
.text-mf-gold {
    color: oklch(var(--mf-gold));
  }
.text-mf-orange {
    color: oklch(var(--mf-orange));
  }
.border-mf {
    border-color: oklch(var(--mf-border));
  }
.border-mf-gold {
    border-color: oklch(var(--mf-border-gold));
  }
.bg-gradient-mf-gold {
    background-image: var(--gradient-mf-gold);
  }
.text-gradient-mf-gold {
    background-image: var(--gradient-mf-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-mf-cta {
    background-image: var(--gradient-mf-cta);
  }
.bg-mf-ambient {
    background-image: var(--gradient-mf-ambient);
  }
.bg-mf-ambient-orange {
    background-image: var(--gradient-mf-ambient-orange);
  }
/* Gold frame treatment for the family photo — a layered gold
     gradient frame with an offset hairline and a soft gold glow.
     The image sits inside with a crisp inner edge; the frame reads
     as a premium, heirloom-style presentation of the family. */
.mf-photo-frame {
    position: relative;
    border-radius: 1.25rem;
    padding: 0.75rem;
    background-image: var(--gradient-mf-gold);
    box-shadow: 0 18px 48px -16px oklch(0.05 0.01 258 / 0.7), 0 0 0 1px
      oklch(var(--mf-border-gold) / 0.6);
  }
.mf-photo-frame::before {
    content: "";
    position: absolute;
    inset: 0.375rem;
    border-radius: 0.9rem;
    border: 1px solid oklch(0.16 0.04 258 / 0.35);
    pointer-events: none;
  }
.mf-photo-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.9rem;
    -o-object-fit: cover;
       object-fit: cover;
  }
/* Two-photo composition wrapper — a grid that holds the large family photo
     (.mf-photo-frame) and the smaller accent couple photo (.mf-accent-photo)
     as clean, non-overlapping siblings. The photos are always stacked
     vertically (single column) on every breakpoint, so the family photo stays
     the full-width primary element and the accent photo sits below it as a
     distinct, larger accent. No overlap, no covering. */
.mf-photo-collage {
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 1.5rem;
  }
/* Accent couple photo — larger square image (man in white blazer, woman
     in yellow blouse) presented in the same gold heirloom frame as the family
     photo. It stacks below the family photo as a distinct sibling, sized to a
     generous fraction of the collage width so both photos read large and
     harmonious. No overlap, no covering. */
.mf-accent-photo {
    position: relative;
    width: 62%;
    max-width: 22rem;
    border-radius: 1rem;
    padding: 0.5rem;
    background-image: var(--gradient-mf-gold);
    box-shadow: 0 18px 48px -16px oklch(0.05 0.01 258 / 0.7), 0 0 0 1px
      oklch(var(--mf-border-gold) / 0.6);
    animation: mf-accent-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.mf-accent-photo::before {
    content: "";
    position: absolute;
    inset: 0.25rem;
    border-radius: 0.7rem;
    border: 1px solid oklch(0.16 0.04 258 / 0.35);
    pointer-events: none;
  }
.mf-accent-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0.7rem;
    -o-object-fit: cover;
       object-fit: cover;
  }
/* Mobile: the accent photo stacks below the family photo as a clean,
     non-overlapping element, slightly smaller than on desktop but still
     generous. */
@media (max-width: 1023px) {
    .mf-photo-collage {
      gap: 1.25rem;
    }
    .mf-accent-photo {
      width: 62%;
      max-width: 16rem;
    }
  }
/* Elevated manifesto card — dark surface, gold hairline */
.mf-card {
    background-color: oklch(var(--mf-card));
    border: 1px solid oklch(var(--mf-border-gold) / 0.55);
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.mf-card:hover {
    box-shadow: var(--shadow-mf-gold);
    transform: translateY(-4px);
  }
/* Primary CTA — gold gradient pill (main manifesto actions) */
.btn-mf-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-mf-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-mf-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
/* WhatsApp CTA — warm gold-to-orange gradient, soft pulse ring */
.btn-mf-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.99 0.01 60);
    background-image: var(--gradient-mf-cta);
    box-shadow: 0 10px 28px -10px oklch(0.68 0.19 55 / 0.5);
    animation: mf-pulse-ring 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-mf-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.68 0.19 55 / 0.6);
  }
/* Secondary CTA — gold hairline outline (secondary action) */
.btn-mf-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--mf-border-gold));
    padding: 0.9rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--mf-gold));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-mf-outline:hover {
    background-image: var(--gradient-mf-gold);
    color: oklch(0.16 0.04 258);
    border-color: transparent;
    transform: translateY(-2px);
  }
/* Manifesto principle badge — gold ring circle for the numbered
     psychological-selling pillars (authority / emotion / loss /
     commitment) */
.mf-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--mf-border-gold));
    color: oklch(var(--mf-gold));
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
  }
/* Manifesto pull-quote — gold hairline left rule */
.mf-quote {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid oklch(var(--mf-border-gold));
  }
/* ============================================================
     I18N — LANGUAGE SWITCHER (additive, shared light theme)
     Compact dropdown/popover in the header + a menu item in the
     mobile menu. Reuses the existing light theme tokens (popover,
     card, muted, border, primary) so no new palette or page
     styling is introduced. Locale labels are shown in their own
     language (endonyms) so users can always find their language.
     ============================================================ */
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.75rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--border));
    background-color: oklch(var(--card));
    color: oklch(var(--foreground));
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.lang-trigger:hover {
    border-color: oklch(var(--primary) / 0.4);
    color: oklch(var(--primary));
  }
/* Compact popover panel — elevated white surface, hairline border */
.lang-menu {
    min-width: 13rem;
    padding: 0.4rem;
    border-radius: 0.875rem;
    border: 1px solid oklch(var(--border));
    background-color: oklch(var(--popover));
    color: oklch(var(--popover-foreground));
    box-shadow: var(--shadow-elevated);
  }
/* Single locale row — endonym label + native script, check on active */
.lang-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: oklch(var(--foreground));
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
.lang-item:hover {
    background-color: oklch(var(--muted));
  }
.lang-item.is-active {
    color: oklch(var(--primary));
    font-weight: 600;
  }
/* Native-script hint (e.g. Cyrillic, CJK) shown muted beside endonym */
.lang-item .lang-native {
    color: oklch(var(--muted-foreground));
    font-size: 0.75rem;
  }
/* Mobile menu row — full-width, roomier touch target */
.lang-item-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: oklch(var(--foreground));
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
.lang-item-mobile:hover {
    background-color: oklch(var(--muted));
  }
.lang-item-mobile.is-active {
    color: oklch(var(--primary));
    font-weight: 600;
  }
/* Regulatory / success badge — emerald pill for MiCA badges */
.kc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(var(--kc-success-foreground));
    background-color: oklch(var(--kc-success));
  }
.kc-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(var(--kc-success));
    background-color: oklch(var(--kc-success) / 0.1);
  }
/* ============================================================
     SOFT FALLBACK / SKELETON STATES (additive, shared light theme)
     Graceful loading placeholders used by dynamic sections (live
     price, countdown, embedded video). A calm shimmer sweep over a
     muted surface — no blank white screens while async content
     resolves. Reuses the existing light-theme tokens (muted, card,
     border) so it blends with every page that uses the shared theme.
     ============================================================ */
@keyframes skeleton-shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
/* Base skeleton block — muted surface with a soft shimmer sweep */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: oklch(var(--muted));
    border-radius: 0.5rem;
  }
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent,
      oklch(var(--card) / 0.7),
      transparent
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
  }
/* Calm inline offline / error notice with a retry action */
.fallback-notice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 1rem;
    border: 1px solid oklch(var(--border));
    background-color: oklch(var(--muted) / 0.5);
    padding: 1.25rem;
  }
.fallback-notice p {
    color: oklch(var(--muted-foreground));
    font-size: 0.9375rem;
    line-height: 1.6;
  }
/* ============================================================
     RESILIENCE — ERROR / FALLBACK / OFFLINE UTILITIES (additive)
     Calm, theme-native treatments for the global error boundary,
     per-page skeleton placeholders, and offline/network notices.
     All consume the existing OKLCH tokens + the additive soft
     tints above, so they adapt to the active theme and never
     introduce a jarring new look.
     ============================================================ */
/* Global error boundary — soft error card with clear message +
     reload action. Centered, elevated, calm warm-tinted treatment. */
.error-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    padding: 3rem 1.75rem;
    text-align: center;
    border-radius: 1.25rem;
    background-color: oklch(var(--card));
    border: 1px solid oklch(var(--error-soft-border));
    box-shadow: var(--shadow-card);
  }
.error-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: oklch(var(--error-soft));
    color: oklch(var(--error-soft-foreground));
  }
.error-panel-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
  }
.error-panel-message {
    max-width: 20rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(var(--muted-foreground));
  }
/* Calm reload button — neutral, on-brand, no shrill alarm color */
.btn-reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.7rem 1.6rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: oklch(var(--primary-foreground));
    background-color: oklch(var(--primary));
    box-shadow: 0 8px 20px -8px oklch(0.3 0.07 258 / 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-reload:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px oklch(0.3 0.07 258 / 0.5);
  }
/* Per-page soft fallback — skeleton placeholder blocks with a
     subtle shimmer sweep. Reuses the existing `shimmer` keyframe. */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: oklch(var(--muted));
    border-radius: 0.5rem;
  }
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent,
      oklch(var(--card) / 0.7),
      transparent
    );
    background-size: 200% 100%;
    animation: shimmer 2.5s linear infinite;
  }
.skeleton-text {
    height: 0.875rem;
    border-radius: 9999px;
  }
.skeleton-block {
    height: 6rem;
    border-radius: 1rem;
  }
.skeleton-circle {
    border-radius: 9999px;
  }
.skeleton-card {
    background-color: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: 1.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
/* Offline / network-error notice — calm pill, warm neutral tint */
.offline-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background-color: oklch(var(--offline-soft));
    border: 1px solid oklch(var(--offline-soft-border));
    color: oklch(var(--offline-soft-foreground));
  }
/* Full-screen offline / error state — centered, calm */
.offline-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 40vh;
    text-align: center;
    color: oklch(var(--muted-foreground));
  }
.offline-panel-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: oklch(var(--foreground));
  }
/* ============================================================
     MARKETING-TOOLS — SURFACE & TEXT HELPERS (additive)
     Consumed by the marketing-tools subpage only. Scoped helpers
     for the premium toolkit UI: crisp cards, gold featured
     highlights, navy CTA, orange accents.
     ============================================================ */
.bg-mt {
    background-color: oklch(var(--mt-bg));
  }
.bg-mt-card {
    background-color: oklch(var(--mt-card));
  }
.text-mt {
    color: oklch(var(--mt-ink));
  }
.text-mt-muted {
    color: oklch(var(--mt-muted));
  }
.text-mt-gold {
    color: oklch(var(--mt-gold));
  }
.text-mt-orange {
    color: oklch(var(--mt-orange));
  }
.border-mt {
    border-color: oklch(var(--mt-border));
  }
.border-mt-gold {
    border-color: oklch(var(--mt-gold) / 0.4);
  }
.bg-gradient-mt-gold {
    background-image: var(--gradient-mt-gold);
  }
.text-gradient-mt-gold {
    background-image: var(--gradient-mt-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-mt-cta {
    background-image: var(--gradient-mt-cta);
  }
.bg-mt-ambient {
    background-image: var(--gradient-mt-ambient);
  }
.bg-mt-ambient-orange {
    background-image: var(--gradient-mt-ambient-orange);
  }
/* Toolkit card surface — crisp white card with soft hairline */
.mt-card {
    background-color: oklch(var(--mt-card));
    border: 1px solid oklch(var(--mt-border));
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.mt-card:hover {
    box-shadow: var(--shadow-mt);
    transform: translateY(-4px);
  }
/* Featured toolkit card — gold gradient surface, deep navy text */
.mt-card-featured {
    background-image: var(--gradient-mt-gold);
    border: none;
    border-radius: 1.25rem;
    box-shadow: var(--shadow-gold-glow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.mt-card-featured:hover {
    box-shadow: var(--shadow-gold-strong);
    transform: translateY(-4px);
  }
/* Primary CTA — deep navy pill with gold text (premium, restrained) */
.btn-mt-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--primary-foreground));
    background-color: oklch(var(--primary));
    box-shadow: 0 10px 28px -10px oklch(0.3 0.07 258 / 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-mt-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.3 0.07 258 / 0.6);
  }
/* Gold CTA — gold gradient (featured action) */
.btn-mt-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-mt-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-mt-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
/* WhatsApp CTA — warm gold-to-orange gradient, soft pulse ring */
.btn-mt-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.99 0.01 60);
    background-image: var(--gradient-mt-cta);
    box-shadow: 0 10px 28px -10px oklch(0.68 0.19 55 / 0.5);
    animation: mt-pulse-ring 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-mt-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.68 0.19 55 / 0.6);
  }
/* Outline CTA — navy outline (secondary action) */
.btn-mt-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 2px solid oklch(var(--primary));
    padding: 0.85rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--primary));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-mt-outline:hover {
    background-color: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -12px oklch(0.3 0.07 258 / 0.45);
  }
/* Toolkit / process step number badge — gold circle */
.mt-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-image: var(--gradient-mt-gold);
    color: oklch(0.16 0.04 258);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px oklch(0.78 0.15 82 / 0.4);
  }
/* ============================================================
     COACHINGS — SURFACE & TEXT HELPERS (additive)
     Consumed by the coachings subpage only. Scoped helpers for the
     premium coaching-programs UI: crisp cards, gold featured
     programs, navy CTA, orange accents.
     ============================================================ */
.bg-co {
    background-color: oklch(var(--co-bg));
  }
.bg-co-card {
    background-color: oklch(var(--co-card));
  }
.text-co {
    color: oklch(var(--co-ink));
  }
.text-co-muted {
    color: oklch(var(--co-muted));
  }
.text-co-gold {
    color: oklch(var(--co-gold));
  }
.text-co-orange {
    color: oklch(var(--co-orange));
  }
.border-co {
    border-color: oklch(var(--co-border));
  }
.border-co-gold {
    border-color: oklch(var(--co-gold) / 0.4);
  }
.bg-gradient-co-gold {
    background-image: var(--gradient-co-gold);
  }
.text-gradient-co-gold {
    background-image: var(--gradient-co-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-co-cta {
    background-image: var(--gradient-co-cta);
  }
.bg-co-ambient {
    background-image: var(--gradient-co-ambient);
  }
.bg-co-ambient-orange {
    background-image: var(--gradient-co-ambient-orange);
  }
/* Coaching card surface — crisp white card with soft hairline */
.co-card {
    background-color: oklch(var(--co-card));
    border: 1px solid oklch(var(--co-border));
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.co-card:hover {
    box-shadow: var(--shadow-co);
    transform: translateY(-4px);
  }
/* Featured coaching card — gold gradient surface, deep navy text */
.co-card-featured {
    background-image: var(--gradient-co-gold);
    border: none;
    border-radius: 1.25rem;
    box-shadow: var(--shadow-gold-glow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.co-card-featured:hover {
    box-shadow: var(--shadow-gold-strong);
    transform: translateY(-4px);
  }
/* Primary CTA — deep navy pill with gold text (premium, restrained) */
.btn-co-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--primary-foreground));
    background-color: oklch(var(--primary));
    box-shadow: 0 10px 28px -10px oklch(0.3 0.07 258 / 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-co-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.3 0.07 258 / 0.6);
  }
/* Gold CTA — gold gradient (featured program action) */
.btn-co-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-co-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-co-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
/* WhatsApp CTA — warm gold-to-orange gradient, soft pulse ring */
.btn-co-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.99 0.01 60);
    background-image: var(--gradient-co-cta);
    box-shadow: 0 10px 28px -10px oklch(0.68 0.19 55 / 0.5);
    animation: co-pulse-ring 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-co-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.68 0.19 55 / 0.6);
  }
/* Outline CTA — navy outline (secondary action) */
.btn-co-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 2px solid oklch(var(--primary));
    padding: 0.85rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--primary));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-co-outline:hover {
    background-color: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -12px oklch(0.3 0.07 258 / 0.45);
  }
/* Coaching program step / pillar number badge — gold circle */
.co-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-image: var(--gradient-co-gold);
    color: oklch(0.16 0.04 258);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px oklch(0.78 0.15 82 / 0.4);
  }
/* ============================================================
     AUSWANDERN & ALTERNATIVEN — SURFACE & TEXT HELPERS (additive)
     Consumed by the auswandern subpage only. Scoped helpers for the
     premium relocation UI: crisp cards, gold featured destinations,
     navy CTA, orange accents.
     ============================================================ */
.bg-aw {
    background-color: oklch(var(--aw-bg));
  }
.bg-aw-card {
    background-color: oklch(var(--aw-card));
  }
.text-aw {
    color: oklch(var(--aw-ink));
  }
.text-aw-muted {
    color: oklch(var(--aw-muted));
  }
.text-aw-gold {
    color: oklch(var(--aw-gold));
  }
.text-aw-orange {
    color: oklch(var(--aw-orange));
  }
.border-aw {
    border-color: oklch(var(--aw-border));
  }
.border-aw-gold {
    border-color: oklch(var(--aw-gold) / 0.4);
  }
.bg-gradient-aw-gold {
    background-image: var(--gradient-aw-gold);
  }
.text-gradient-aw-gold {
    background-image: var(--gradient-aw-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-aw-cta {
    background-image: var(--gradient-aw-cta);
  }
.bg-aw-ambient {
    background-image: var(--gradient-aw-ambient);
  }
.bg-aw-ambient-orange {
    background-image: var(--gradient-aw-ambient-orange);
  }
/* Relocation card surface — crisp white card with soft hairline */
.aw-card {
    background-color: oklch(var(--aw-card));
    border: 1px solid oklch(var(--aw-border));
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.aw-card:hover {
    box-shadow: var(--shadow-aw);
    transform: translateY(-4px);
  }
/* Featured destination card — gold gradient surface, deep navy text */
.aw-card-featured {
    background-image: var(--gradient-aw-gold);
    border: none;
    border-radius: 1.25rem;
    box-shadow: var(--shadow-gold-glow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.aw-card-featured:hover {
    box-shadow: var(--shadow-gold-strong);
    transform: translateY(-4px);
  }
/* Primary CTA — deep navy pill with gold text (premium, restrained) */
.btn-aw-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--primary-foreground));
    background-color: oklch(var(--primary));
    box-shadow: 0 10px 28px -10px oklch(0.3 0.07 258 / 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-aw-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.3 0.07 258 / 0.6);
  }
/* Gold CTA — gold gradient (featured destination action) */
.btn-aw-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-aw-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-aw-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
/* WhatsApp CTA — warm gold-to-orange gradient, soft pulse ring */
.btn-aw-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.99 0.01 60);
    background-image: var(--gradient-aw-cta);
    box-shadow: 0 10px 28px -10px oklch(0.68 0.19 55 / 0.5);
    animation: aw-pulse-ring 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-aw-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.68 0.19 55 / 0.6);
  }
/* Outline CTA — navy outline (secondary action) */
.btn-aw-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 2px solid oklch(var(--primary));
    padding: 0.85rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--primary));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-aw-outline:hover {
    background-color: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -12px oklch(0.3 0.07 258 / 0.45);
  }
/* Relocation / process step number badge — gold circle */
.aw-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-image: var(--gradient-aw-gold);
    color: oklch(0.16 0.04 258);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px oklch(0.78 0.15 82 / 0.4);
  }
/* ============================================================
     GROUPED TOP NAVIGATION — DROPDOWN PARENT TABS (additive)
     Shared light-theme navigation system for the header. Four
     parent tabs (Cashflow, Gesundheit, Blockchain & Krypto,
     Webdienstleistungen) reveal a clickable dropdown of sub-items
     on hover/click (desktop) and as an accordion (mobile). Reuses
     the existing navy/gold/orange register and the shared light
     theme tokens (popover, card, muted, border, primary) so the
     dropdown feels native to the current header. No new palette,
     no new fonts, no edits to other pages.
     ============================================================ */
/* Parent tab trigger — the "Über-Reiter" label with a chevron.
     Matches the existing flat-tab look, adding a subtle chevron that
     rotates 180deg when the group is open. */
.nav-parent {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0.375rem 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: oklch(var(--foreground));
    background-color: transparent;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
.nav-parent:hover {
    color: oklch(var(--foreground));
    background-color: oklch(var(--muted) / 0.6);
  }
.nav-parent.is-open {
    color: oklch(var(--foreground));
    background-color: oklch(var(--muted) / 0.6);
  }
/* Chevron indicator — small caret that rotates when the group opens.
     Rendered in the same dark black as the parent tab text so the whole
     visible parent tab (label + caret) shares one color. */
.nav-chevron {
    width: 0.875rem;
    height: 0.875rem;
    color: oklch(var(--foreground));
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
.nav-parent:hover .nav-chevron,
  .nav-parent.is-open .nav-chevron {
    color: oklch(var(--foreground));
  }
.nav-parent.is-open .nav-chevron {
    transform: rotate(180deg);
  }
/* Dropdown panel — elevated white card, hairline border, gold
     top accent bar. Sits directly under the parent tab. */
.nav-dropdown {
    min-width: 15rem;
    padding: 0.5rem;
    border-radius: 0.875rem;
    border: 1px solid oklch(var(--border));
    background-color: oklch(var(--popover));
    color: oklch(var(--popover-foreground));
    box-shadow: var(--shadow-elevated);
    position: relative;
    /* The dropdown renders via Radix Portal at the body level, so it is a
       sibling of the header and the donate banner. Give it a z-index above
       the header (z-40) and the donate banner's .donate-banner__inner
       (z-index: 1) so the sub-tabs always paint in front of the 'Deine
       Spende' button instead of being hidden behind it. */
    z-index: 50;
  }
/* Gold hairline accent along the top edge of the open panel */
.nav-dropdown::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    border-radius: 9999px;
    background-image: var(--gradient-gold);
    opacity: 0.9;
  }
/* Dropdown item — clickable link to the sub-page. Gold text +
     gold chevron on hover, with a soft muted pill highlight. */
.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: oklch(var(--foreground));
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
.nav-item:hover {
    background-color: oklch(var(--muted));
    color: oklch(var(--foreground));
  }
.nav-item.is-active {
    color: oklch(var(--foreground));
    font-weight: 600;
  }
.nav-item .nav-item-arrow {
    width: 0.875rem;
    height: 0.875rem;
    color: oklch(var(--muted-foreground));
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
  }
.nav-item:hover .nav-item-arrow {
    opacity: 1;
    transform: translateX(0);
    color: oklch(var(--foreground));
  }
/* Mobile accordion row — full-width parent trigger with roomier
     touch target, chevron rotates on open. */
.nav-parent-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: oklch(var(--foreground));
    background-color: transparent;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
.nav-parent-mobile:hover,
  .nav-parent-mobile.is-open {
    color: oklch(var(--foreground));
    background-color: oklch(var(--muted) / 0.6);
  }
.nav-parent-mobile.is-open .nav-chevron {
    transform: rotate(180deg);
  }
/* Mobile accordion content — nested sub-item list, indented under
     the parent row. Uses the shared .nav-item look. */
.nav-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0 0.25rem 1rem;
  }
.nav-submenu .nav-item {
    font-size: 0.9375rem;
  }
/* ============================================================
     SITE-WIDE TAGLINE BANNER — SURFACE & TEXT HELPERS (additive)
     The brand signature banner at the very top of every page, above
     the header. Full-width, high-contrast FitLine RED band with bold
     Space Grotesk display type. The 'fragdenjonathan.de' suffix is
     rendered as a gold-gradient accent for a premium contrast detail.
     Fully readable on desktop and mobile without clipping: the text
     is centered, balances across lines, and the vertical padding
     scales with the viewport. Consumes the global --tg-* tokens so
     it works on every page regardless of subpage theme.
     ============================================================ */
.tagline-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.625rem 1rem;
    background-image: var(--gradient-tg-red);
    color: oklch(var(--tg-foreground));
    text-align: center;
    position: relative;
    overflow: hidden;
  }
/* Soft ambient glow so the band reads as premium, not flat */
.tagline-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      60% 120% at 50% 0%,
      oklch(0.6 0.22 28 / 0.35),
      transparent 70%
    );
    pointer-events: none;
  }
/* Inner text container — max width keeps long lines readable */
.tagline-banner__inner {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    max-width: 72rem;
    width: 100%;
    position: relative;
    z-index: 1;
  }
/* The brand statement — bold Space Grotesk display, near-white on
     red for AA+ contrast. Scales from 0.95rem on mobile to 1.125rem
     on desktop; balance wraps gracefully without clipping. */
.tagline-banner__text {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.4vw, 1.125rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.35;
    color: oklch(var(--tg-foreground));
    text-wrap: balance;
  }
/* The en-dash separator between the statement and the brand — styled
     to match the statement so the full slogan reads verbatim:
     'Geld, das arbeitet. Business, das skaliert. – fragdenjonathan.de'. */
.tagline-banner__separator {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.4vw, 1.125rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.35;
    color: oklch(var(--tg-foreground));
  }
/* The brand suffix 'fragdenjonathan.de' — gold-gradient accent that
     elevates the signature above the plain white statement. */
.tagline-banner__brand {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.4vw, 1.125rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.35;
    white-space: nowrap;
    background-image: var(--gradient-tg-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
/* The brand suffix ' von fragdenjonathan.de' — plain near-white text that
     follows the gold 'Jonathan Kühnle' name, matching the rest of the
     sentence so the fixed brand reads verbatim in every language. */
.tagline-banner__brand-suffix {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.4vw, 1.125rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.35;
    white-space: nowrap;
    color: oklch(var(--tg-foreground));
  }
/* The emphasized marketing words inside the tagline sentence — a heavier
     bold weight than the surrounding statement so 'Hebel' / 'finanziellen
     Freiheit' (and their translations) stand out while staying white. */
.tagline-banner__strong {
    font-weight: 800;
    color: oklch(var(--tg-foreground));
  }
/* Thin gold hairline along the bottom edge, separating the banner
     from the header below — echoes the site's gold accent language. */
.tagline-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-image: var(--gradient-tg-gold);
    opacity: 0.9;
    z-index: 1;
  }
/* ============================================================
     FASSE MUT — DARK CALLING SURFACE & TEXT HELPERS (additive)
     Consumed by the 'Fasse Mut' Christian subpage only. Scoped
     helpers for the dark Navy/Gold register, mirroring the
     Glaubensschritt page. Includes the banner preview sections with
     download buttons, the scripture-quote treatment, and the calling
     pillar badges.
     ============================================================ */
.bg-ka {
    background-color: oklch(var(--ka-bg));
  }
.bg-ka-2 {
    background-color: oklch(var(--ka-bg-2));
  }
.bg-ka-card {
    background-color: oklch(var(--ka-card));
  }
.text-ka {
    color: oklch(var(--ka-foreground));
  }
.text-ka-muted {
    color: oklch(var(--ka-muted));
  }
.text-ka-gold {
    color: oklch(var(--ka-gold));
  }
.text-ka-orange {
    color: oklch(var(--ka-orange));
  }
.border-ka {
    border-color: oklch(var(--ka-border));
  }
.border-ka-gold {
    border-color: oklch(var(--ka-border-gold));
  }
.bg-gradient-ka-gold {
    background-image: var(--gradient-ka-gold);
  }
.text-gradient-ka-gold {
    background-image: var(--gradient-ka-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-ka-cta {
    background-image: var(--gradient-ka-cta);
  }
.bg-ka-ambient {
    background-image: var(--gradient-ka-ambient);
  }
.bg-ka-ambient-orange {
    background-image: var(--gradient-ka-ambient-orange);
  }
/* Elevated calling card — dark surface, gold hairline */
.ka-card {
    background-color: oklch(var(--ka-card));
    border: 1px solid oklch(var(--ka-border-gold) / 0.55);
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ka-card:hover {
    box-shadow: var(--shadow-ka-gold);
    transform: translateY(-4px);
  }
/* Primary CTA — gold gradient pill (hero / main actions) */
.btn-ka-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-ka-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-ka-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
/* Secondary CTA — gold hairline outline (secondary action) */
.btn-ka-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--ka-border-gold));
    padding: 0.9rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--ka-gold));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-ka-outline:hover {
    background-image: var(--gradient-ka-gold);
    color: oklch(0.16 0.04 258);
    border-color: transparent;
    transform: translateY(-2px);
  }
/* WhatsApp CTA — gold gradient pill, dark readable text.
     Matches the .btn-ka-download 'Jetzt Banner erstellen' styling. */
.btn-ka-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-ka-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-ka-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
/* Scripture quote — gold hairline left rule */
.ka-quote {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid oklch(var(--ka-border-gold));
  }
/* Calling pillar number badge — gold ring circle */
.ka-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--ka-border-gold));
    color: oklch(var(--ka-gold));
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
  }
/* Hero declaration under the cross — gold gradient display text.
     Mirrors the Glaubensschritt .gs-under-cross treatment in the
     Keine-Ausreden register. */
.ka-under-cross {
    margin: 1.75rem auto 0;
    margin-bottom: 2.5rem;
    max-width: 34rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    background-image: var(--gradient-ka-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
    filter: drop-shadow(0 6px 24px oklch(0.78 0.15 82 / 0.35));
  }
/* Author signature under the hero declaration — elegant script/cursive
     handwriting in strong gold marketing typography. Mirrors the
     Glaubensschritt .gs-author-name treatment in the Keine-Ausreden register. */
.ka-author-name {
    margin: 0 auto;
    padding: 0.5rem 0 0.75rem;
    max-width: 34rem;
    text-align: center;
    font-family: "Great Vibes", "Dancing Script", "Pacifico", "Brush Script MT",
      "Segoe Script", cursive;
    font-size: clamp(2.5rem, 7vw, 4rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
    background-image: var(--gradient-ka-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
    filter: drop-shadow(0 8px 28px oklch(0.78 0.15 82 / 0.45));
  }
/* Banner preview section — a framed 16/9 banner image with a
     localized heading above and a gold download button below.
     Mirrors the Glaubensschritt .gs-banner treatment. */
.ka-banner {
    background-color: oklch(var(--ka-bg));
  }
.ka-banner-frame {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid oklch(var(--ka-border-gold) / 0.55);
    box-shadow: 0 24px 60px -20px oklch(0.05 0.01 258 / 0.8), 0 0 60px -12px
      oklch(0.78 0.15 82 / 0.25);
  }
.ka-banner-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
  }
/* Download button — gold gradient pill with a download glyph.
     Mirrors the Glaubensschritt .btn-gs-primary gold style. */
.btn-ka-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-ka-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-ka-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
.btn-ka-download svg {
    width: 1.125rem;
    height: 1.125rem;
  }
/* ============================================================
     FASSE MUT — HIGH-RESOLUTION BANNER GALLERY (additive)
     Extends the single banner preview into a gallery that presents
     every uploaded banner design at full resolution, uncropped,
     each with a localized download button. Reuses the existing
     --ka-* tokens, .ka-banner-frame, and .btn-ka-download. The key
     change from the single preview: images use `object-fit: contain`
     on a slightly deeper backdrop so the banner is shown EXACTLY as
     designed (no 16/9 cover-crop), at its native aspect ratio.
     ============================================================ */
/* Section label — gold, uppercase, wide-tracked. Matches the
     existing .ka-* label language. */
.ka-gallery-heading {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(var(--ka-gold));
  }
/* Gallery grid — single column on mobile, two columns on desktop.
     Each banner reads as a distinct, generous exhibit card. */
.ka-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
@media (min-width: 1024px) {
    .ka-gallery {
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
    }
  }
/* Gallery item — elevated dark card with a gold hairline. The
     banner sits inside a deeper backdrop so the full, uncropped
     image reads crisply against the navy canvas. */
.ka-gallery-item {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: oklch(var(--ka-card));
    border: 1px solid oklch(var(--ka-border-gold) / 0.55);
    border-radius: 1.5rem;
    padding: 1rem;
    box-shadow: var(--shadow-ka);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ka-gallery-item:hover {
    box-shadow: var(--shadow-ka-gold);
    transform: translateY(-4px);
  }
/* Gallery frame — a slightly deeper inset panel that presents the
     banner at its native aspect ratio WITHOUT cropping. `contain`
     guarantees the design is shown exactly as uploaded, edge to edge. */
.ka-gallery-frame {
    position: relative;
    overflow: hidden;
    border-radius: 1.125rem;
    background-color: oklch(0.105 0.02 258);
    border: 1px solid oklch(var(--ka-border) / 0.6);
  }
.ka-gallery-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    -o-object-fit: contain;
       object-fit: contain;
  }
/* Gallery meta row — localized title + resolution badge. */
.ka-gallery-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.25rem 0.25rem;
  }
.ka-gallery-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--ka-foreground));
    text-wrap: balance;
  }
.ka-gallery-res {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1px solid oklch(var(--ka-border-gold) / 0.6);
    padding: 0.3rem 0.75rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: oklch(var(--ka-gold));
    background-color: transparent;
  }
/* Download action — reuses the existing gold download pill, aligned
     full-width under the banner for a clear, single primary action. */
.ka-gallery .btn-ka-download {
    width: 100%;
  }
/* ============================================================
     ERFOLGSBANNER — HERO + FORMAT SELECTOR (additive)
     The Erfolgsbanner App's showcase layout adapted to the dark
     Navy/Gold register. Reuses the existing --ka-* tokens and the
     .btn-ka-primary / .btn-ka-outline pills; only the new hero and
     format-selector surfaces are added. No new palette.
     ============================================================ */
/* Hero — deep navy canvas with a soft gold ambient glow at the top
     and the orange ambient accent at the lower corner, mirroring the
     Erfolgsbanner App's motivational opening. */
.ka-hero {
    position: relative;
    overflow: hidden;
    background-color: oklch(var(--ka-bg));
  }
.ka-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-ka-ambient);
    pointer-events: none;
  }
.ka-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-ka-ambient-orange);
    pointer-events: none;
  }
.ka-hero__inner {
    position: relative;
    z-index: 1;
  }
/* Hero eyebrow label — small gold uppercase kicker above the title */
.ka-hero-eyebrow {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(var(--ka-gold));
  }
/* Hero title — large gold-gradient display heading, balanced */
.ka-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    background-image: var(--gradient-ka-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 24px oklch(0.78 0.15 82 / 0.3));
  }
/* Hero subtitle — warm champagne muted supporting text */
.ka-hero-subtitle {
    max-width: 42rem;
    font-size: 1.125rem;
    line-height: 1.7;
    color: oklch(var(--ka-muted));
    text-wrap: balance;
  }
/* Hero action row — the two Erfolgsbanner App buttons */
.ka-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
/* Format selector — a labelled panel of 11 format chips. The gold
     hairline wrapper reads as a distinct toolbar between the hero and
     the gallery. */
.ka-format-selector {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border: 1px solid oklch(var(--ka-border-gold) / 0.55);
    border-radius: 1.25rem;
    background-color: oklch(var(--ka-card));
    padding: 1.5rem;
    box-shadow: var(--shadow-ka);
  }
.ka-format-selector__label {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(var(--ka-gold));
  }
.ka-format-selector__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
@media (min-width: 640px) {
    .ka-format-selector__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
@media (min-width: 1024px) {
    .ka-format-selector__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
/* Format chip — gold hairline pill, dark surface. Active format
     fills with the gold gradient and deep-navy text for a clear
     selected state. */
.ka-format-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 44px;
    border-radius: 0.875rem;
    border: 1px solid oklch(var(--ka-border-gold) / 0.55);
    background-color: transparent;
    padding: 0.7rem 1rem;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--ka-foreground));
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ka-format-chip:hover {
    border-color: oklch(var(--ka-gold));
    box-shadow: var(--shadow-ka-gold);
    transform: translateY(-2px);
  }
.ka-format-chip.is-active {
    background-image: var(--gradient-ka-gold);
    color: oklch(0.16 0.04 258);
    border-color: transparent;
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
  }
.ka-format-chip__dim {
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0.75;
  }
/* Current-format display — 'Aktuell: … · 1200 x 630 px' pill */
.ka-format-current {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--ka-border-gold) / 0.6);
    padding: 0.5rem 1rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--ka-gold));
    background-color: transparent;
  }
.ka-format-current strong {
    font-weight: 700;
    color: oklch(var(--ka-foreground));
  }
/* ============================================================
     ERFOLGSBANNER — MARKETING-FUNNEL SECTIONS (additive)
     New marketing sections for the redesigned Erfolgsbanner page:
     Motivations-Hero (profile + gold ring), 3-step how-to, application
     examples, quotes + social proof, story, FAQ accordion, and the
     final conversion CTA (WhatsApp / email). ALL additive — reuses the
     existing --ka-* tokens and the .ka-hero / .ka-gallery / .btn-ka-*
     surfaces verbatim. No new palette, no changes to existing tokens.
     ============================================================ */
/* Section header — a shared gold eyebrow + champagne display title
     used to open every marketing section below. Mirrors the ka-hero
     eyebrow language so all funnel sections read as one family. */
.ka-section-eyebrow {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(var(--ka-gold));
  }
.ka-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: oklch(var(--ka-foreground));
    text-wrap: balance;
  }
.ka-section-title em {
    font-style: normal;
    background-image: var(--gradient-ka-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.ka-section-lead {
    max-width: 40rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: oklch(var(--ka-muted));
    text-wrap: balance;
  }
/* Motivations-Hero — a split hero with the circular profile image
     (gold ring + soft gold glow) on one side and the motivational
     headline on the other. Sits on the existing .ka-hero canvas. */
.ka-hero-profile {
    position: relative;
    flex-shrink: 0;
  }
/* Soft gold ambient glow behind the profile ring */
.ka-hero-profile::before {
    content: "";
    position: absolute;
    inset: -2.5rem;
    border-radius: 9999px;
    background-image: var(--gradient-ka-ambient);
    filter: blur(6px);
    pointer-events: none;
  }
.ka-hero-profile .profile-ring {
    position: relative;
    z-index: 1;
  }
/* 3-step how-to — a row of numbered step cards. Each card is an
     elevated dark surface with a gold ring number badge and a short
     description, guiding the visitor from pick → customize → download. */
.ka-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
@media (min-width: 768px) {
    .ka-steps {
      grid-template-columns: repeat(3, 1fr);
    }
  }
.ka-step-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: oklch(var(--ka-card));
    border: 1px solid oklch(var(--ka-border-gold) / 0.55);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: var(--shadow-ka);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ka-step-card:hover {
    box-shadow: var(--shadow-ka-gold);
    transform: translateY(-4px);
  }
/* Gold ring number badge — echoes the existing .ka-step treatment */
.ka-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--ka-border-gold));
    color: oklch(var(--ka-gold));
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
  }
.ka-step-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--ka-foreground));
    text-wrap: balance;
  }
.ka-step-card p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: oklch(var(--ka-muted));
  }
/* Application examples — visual cards referencing the banner groups
     (Social Media, Motivation, Glaubensschritt, Dubai, Zitate). Each
     card is a dark surface with a gold tag and a mini banner preview
     frame, linking back to the matching gallery group. */
.ka-examples {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
@media (min-width: 640px) {
    .ka-examples {
      grid-template-columns: repeat(2, 1fr);
    }
  }
@media (min-width: 1024px) {
    .ka-examples {
      grid-template-columns: repeat(3, 1fr);
    }
  }
.ka-example-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: oklch(var(--ka-card));
    border: 1px solid oklch(var(--ka-border-gold) / 0.55);
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-ka);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ka-example-card:hover {
    box-shadow: var(--shadow-ka-gold);
    transform: translateY(-4px);
  }
/* Mini banner preview — a deep inset panel presenting the banner at
     its native aspect ratio, uncropped, echoing .ka-gallery-frame. */
.ka-example-frame {
    position: relative;
    overflow: hidden;
    border-radius: 0.875rem;
    background-color: oklch(0.105 0.02 258);
    border: 1px solid oklch(var(--ka-border) / 0.6);
  }
.ka-example-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    -o-object-fit: contain;
       object-fit: contain;
  }
.ka-example-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    border-radius: 9999px;
    border: 1px solid oklch(var(--ka-border-gold) / 0.6);
    padding: 0.3rem 0.75rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(var(--ka-gold));
  }
.ka-example-card h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--ka-foreground));
  }
.ka-example-card p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: oklch(var(--ka-muted));
  }
/* Quotes + social proof — a featured pull-quote plus testimonial
     cards that build trust. The pull-quote uses the gold hairline
     left rule (echoing .ka-quote); testimonials are dark cards with
     a gold avatar ring and star rating. */
.ka-quotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
@media (min-width: 1024px) {
    .ka-quotes {
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
    }
  }
.ka-pull-quote {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    border-left: 2px solid oklch(var(--ka-border-gold));
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: oklch(var(--ka-foreground));
    text-wrap: balance;
  }
.ka-pull-quote::before {
    content: "\201C";
    position: absolute;
    top: -0.75rem;
    left: 0.5rem;
    font-family: var(--font-display);
    font-size: 3.5rem;
    line-height: 1;
    background-image: var(--gradient-ka-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.ka-testimonial {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: oklch(var(--ka-card));
    border: 1px solid oklch(var(--ka-border-gold) / 0.55);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-ka);
  }
.ka-testimonial p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: oklch(var(--ka-muted));
  }
.ka-testimonial__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
.ka-testimonial__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--ka-border-gold));
    color: oklch(var(--ka-gold));
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
  }
.ka-testimonial__name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: oklch(var(--ka-foreground));
  }
.ka-testimonial__role {
    font-size: 0.8125rem;
    color: oklch(var(--ka-muted));
  }
.ka-stars {
    display: inline-flex;
    gap: 0.15rem;
    color: oklch(var(--ka-gold));
    font-size: 0.875rem;
  }
/* Story — a personal narrative band with the gold-ring profile
     image and a CTA to the gallery. Alternates on the lifted panel
     surface (.ka-bg-2) to break the rhythm from the surrounding
     sections. */
.ka-story {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    background-color: oklch(var(--ka-bg-2));
    border: 1px solid oklch(var(--ka-border-gold) / 0.4);
    border-radius: 1.5rem;
    padding: 2rem;
  }
@media (min-width: 1024px) {
    .ka-story {
      grid-template-columns: 0.8fr 1.2fr;
    }
  }
.ka-story-profile {
    position: relative;
    justify-self: center;
  }
.ka-story-profile::before {
    content: "";
    position: absolute;
    inset: -2rem;
    border-radius: 9999px;
    background-image: var(--gradient-ka-ambient);
    filter: blur(6px);
    pointer-events: none;
  }
.ka-story-profile .profile-ring {
    position: relative;
    z-index: 1;
  }
.ka-story-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
.ka-story-body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: oklch(var(--ka-foreground));
    text-wrap: balance;
  }
.ka-story-body p {
    font-size: 1rem;
    line-height: 1.7;
    color: oklch(var(--ka-muted));
  }
/* FAQ — an accordion of gold-hairline rows. The question is a
     display-font trigger with a rotating chevron; the answer expands
     beneath in champagne muted text. */
.ka-faq {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
.ka-faq-item {
    border: 1px solid oklch(var(--ka-border-gold) / 0.55);
    border-radius: 1rem;
    background-color: oklch(var(--ka-card));
    overflow: hidden;
    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ka-faq-item.is-open {
    border-color: oklch(var(--ka-gold) / 0.7);
  }
.ka-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 44px;
    padding: 1rem 1.25rem;
    text-align: left;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: oklch(var(--ka-foreground));
    background-color: transparent;
    cursor: pointer;
  }
.ka-faq-q svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: oklch(var(--ka-gold));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ka-faq-item.is-open .ka-faq-q svg {
    transform: rotate(180deg);
  }
.ka-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ka-faq-item.is-open .ka-faq-a {
    max-height: 30rem;
  }
.ka-faq-a p {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: oklch(var(--ka-muted));
  }
/* Final conversion CTA — a closing band on the deep navy canvas with
     a gold ambient glow, a bold gold-gradient headline, and the two
     direct-contact buttons (WhatsApp + email). */
.ka-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid oklch(var(--ka-border-gold) / 0.5);
    border-radius: 1.5rem;
    background-color: oklch(var(--ka-card));
    padding: 3rem 2rem;
    box-shadow: var(--shadow-ka);
  }
.ka-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-ka-ambient);
    pointer-events: none;
  }
.ka-cta > * {
    position: relative;
    z-index: 1;
  }
.ka-cta-title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
    background-image: var(--gradient-ka-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 24px oklch(0.78 0.15 82 / 0.3));
  }
.ka-cta-lead {
    max-width: 34rem;
    margin: 1rem auto 0;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: oklch(var(--ka-muted));
    text-wrap: balance;
  }
.ka-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
  }
/* Email CTA — a gold hairline outline pill for the direct email
     contact (Jonathan.kuehnle@protonmail.com). Complements the existing
     .btn-ka-whatsapp solid pill; shares the .btn-ka-outline language
     so both contact actions read as one family. */
.btn-ka-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--ka-border-gold));
    padding: 1rem 2.1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--ka-gold));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-ka-email:hover {
    background-image: var(--gradient-ka-gold);
    color: oklch(0.16 0.04 258);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -12px oklch(0.78 0.15 82 / 0.45);
  }
.btn-ka-email svg {
    width: 1.125rem;
    height: 1.125rem;
  }
/* ============================================================
     READABILITY & GRAPHICS REFINEMENT (additive, shared + ka-*)
     A focused readability pass over the Erfolgsbanner funnel and the
     shared CTA language. Strengthens button legibility (larger labels,
     adequate touch targets), improves muted-text contrast, and keeps
     banner/gallery imagery sharp and undistorted. All additive — no
     existing token values or scoped theme surfaces are changed.
     ============================================================ */
/* Buttons — guarantee an adequate touch target and a clear, readable
     label on every primary CTA across the shared + ka-* registers. */
.btn-ka-primary,
  .btn-ka-download,
  .btn-ka-whatsapp,
  .btn-ka-email,
  .btn-ka-outline,
  .btn-gs-primary,
  .btn-gs-whatsapp,
  .btn-gs-outline,
  .btn-mf-primary,
  .btn-mf-whatsapp,
  .btn-mf-outline,
  .btn-wd-primary,
  .btn-wd-gold,
  .btn-wd-outline,
  .btn-mt-primary,
  .btn-mt-gold,
  .btn-mt-whatsapp,
  .btn-mt-outline,
  .btn-co-primary,
  .btn-co-gold,
  .btn-co-whatsapp,
  .btn-co-outline,
  .btn-aw-primary,
  .btn-aw-gold,
  .btn-aw-whatsapp,
  .btn-aw-outline,
  .btn-fl-red,
  .btn-fl-blue,
  .btn-fl-blue-solid,
  .btn-kc-primary,
  .btn-kc-outline,
  .btn-reload,
  .btn-lux {
    min-height: 48px;
    font-size: 1rem;
  }
/* Slightly larger, clearer labels on the primary gold CTAs so the
     download / contact action is unmistakable on all devices. */
.btn-ka-primary,
  .btn-ka-download,
  .btn-ka-whatsapp,
  .btn-ka-email,
  .btn-gs-primary,
  .btn-gs-whatsapp,
  .btn-mf-primary,
  .btn-mf-whatsapp,
  .btn-wd-gold,
  .btn-mt-gold,
  .btn-co-gold,
  .btn-aw-gold {
    font-size: 1.0625rem;
    font-weight: 700;
  }
/* Format chip — replace the low-contrast opacity dim with a solid,
     readable muted tone so the dimension label stays legible. */
.ka-format-chip__dim {
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 1;
    color: oklch(var(--ka-muted));
  }
/* Erfolgsbanner body text — slightly stronger muted tone for better
     contrast on the deep navy canvas (small text stays readable). */
.ka-hero-subtitle,
  .ka-section-lead,
  .ka-step-card p,
  .ka-example-card p,
  .ka-testimonial p,
  .ka-story-body p,
  .ka-faq-a p,
  .ka-cta-lead {
    color: oklch(0.72 0.02 258);
  }
/* Banner / gallery imagery — keep every preview crisp and correctly
     proportioned. The ka-* frames already use object-fit: contain so the
     design is shown uncropped; this guarantees no distortion and a sharp
     render at the native aspect ratio. */
.ka-gallery-img,
  .ka-example-frame img,
  .ka-banner-img {
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
.ka-gallery-frame,
  .ka-example-frame,
  .ka-banner-frame {
    background-color: oklch(0.105 0.02 258);
  }
/* Section titles — keep display headings tight and balanced for
     legibility across languages. */
.ka-section-title,
  .ka-hero-title,
  .ka-cta-title,
  .ka-story-body h3 {
    text-wrap: balance;
  }
/* ============================================================
     DEINE SPENDE — WARM DONATION SURFACE & TEXT HELPERS (additive)
     Consumed by the 'Deine Spende' donation subpage only. Scoped
     helpers for the warm, trustworthy Navy/Gold/Orange register:
     cream canvas, elevated white cards, gold accents, and the
     orange reserved for the primary donation CTA. Clean, minimal,
     high-converting yet unassuming.
     ============================================================ */
.bg-sp {
    background-color: oklch(var(--sp-bg));
  }
.bg-sp-2 {
    background-color: oklch(var(--sp-bg-2));
  }
.bg-sp-card {
    background-color: oklch(var(--sp-card));
  }
.text-sp {
    color: oklch(var(--sp-ink));
  }
.text-sp-muted {
    color: oklch(var(--sp-muted));
  }
.text-sp-gold {
    color: oklch(var(--sp-gold));
  }
.text-sp-orange {
    color: oklch(var(--sp-orange));
  }
.border-sp {
    border-color: oklch(var(--sp-border));
  }
.border-sp-gold {
    border-color: oklch(var(--sp-gold) / 0.4);
  }
.bg-gradient-sp-gold {
    background-image: var(--gradient-sp-gold);
  }
.text-gradient-sp-gold {
    background-image: var(--gradient-sp-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-sp-cta {
    background-image: var(--gradient-sp-cta);
  }
.bg-sp-ambient {
    background-image: var(--gradient-sp-ambient);
  }
.bg-sp-ambient-orange {
    background-image: var(--gradient-sp-ambient-orange);
  }
/* Warm donation hero — cream canvas with a soft gold ambient glow
     at the top and the orange ambient accent at the lower corner. */
.sp-hero {
    position: relative;
    overflow: hidden;
    background-color: oklch(var(--sp-bg));
  }
.sp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-sp-ambient);
    pointer-events: none;
  }
.sp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-sp-ambient-orange);
    pointer-events: none;
  }
.sp-hero__inner {
    position: relative;
    z-index: 1;
  }
/* Hero eyebrow — small gold uppercase kicker above the title */
.sp-eyebrow {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(var(--sp-gold));
  }
/* Hero title — large deep-navy display heading with a gold-gradient
     accent word. Warm, confident, never shrill. */
.sp-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: oklch(var(--sp-ink));
    text-wrap: balance;
  }
.sp-title em {
    font-style: normal;
    background-image: var(--gradient-sp-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
/* Hero lead — warm navy supporting text, generous line height */
.sp-lead {
    max-width: 42rem;
    font-size: 1.125rem;
    line-height: 1.7;
    color: oklch(var(--sp-muted));
    text-wrap: balance;
  }
/* Gold-ring profile portrait on the warm cream canvas. Keeps the
     brand gold ring consistent with the other pages but re-anchors
     the inner gap to the warm cream bg and adds a soft gold ambient
     outer glow so it reads as part of the donation theme. */
.sp-profile-ring {
    border-radius: 9999px;
    box-shadow: 0 0 0 4px oklch(var(--sp-bg)), 0 0 0 10px oklch(0.78 0.15 82), 0
      0 0 14px oklch(0.78 0.15 82 / 0.18), 0 24px 64px -18px
      oklch(0.3 0.07 258 / 0.25);
  }
/* Section header — gold eyebrow + deep-navy display title used to
     open each payment group. Mirrors the hero eyebrow language so all
     donation sections read as one family. */
.sp-section-eyebrow {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(var(--sp-gold));
  }
.sp-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 3.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: oklch(var(--sp-ink));
    text-wrap: balance;
  }
.sp-section-lead {
    max-width: 40rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: oklch(var(--sp-muted));
    text-wrap: balance;
  }
/* Donation card — elevated warm-white card with a soft hairline.
     Gentle hover lift; no shrill glow. */
.sp-card {
    background-color: oklch(var(--sp-card));
    border: 1px solid oklch(var(--sp-border));
    border-radius: 1.25rem;
    box-shadow: var(--shadow-card);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.sp-card:hover {
    box-shadow: var(--shadow-sp);
    transform: translateY(-4px);
  }
/* Payment-method icon badge — gold ring circle for the coin / bank
     glyph. Echoes the brand gold ring language. */
.sp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--sp-gold) / 0.45);
    color: oklch(var(--sp-gold));
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    background-color: oklch(var(--sp-bg-2));
    flex-shrink: 0;
  }
/* Card title — coin / method name in display type */
.sp-card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--sp-ink));
  }
/* Card meta — network / holder hint in muted supporting text */
.sp-card-meta {
    font-size: 0.875rem;
    line-height: 1.55;
    color: oklch(var(--sp-muted));
  }
/* Address code block — clearly readable monospace field with a soft
     recessed warm surface and a hairline border. */
.sp-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid oklch(var(--sp-border));
    background-color: oklch(var(--sp-bg-2));
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: oklch(var(--sp-ink));
    word-break: break-all;
  }
/* Copy button — gold hairline pill with a copy glyph. On success the
     frontend toggles `.is-copied` to flash a green 'Kopiert!' state. */
.btn-sp-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
    border-radius: 9999px;
    border: 1px solid oklch(var(--sp-gold) / 0.5);
    padding: 0.5rem 1rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(var(--sp-gold));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-sp-copy:hover {
    background-image: var(--gradient-sp-gold);
    color: oklch(0.16 0.04 258);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.4);
  }
.btn-sp-copy svg {
    width: 1rem;
    height: 1rem;
  }
/* Copied feedback — brief green flash, then the frontend reverts. */
.btn-sp-copy.is-copied {
    background-color: oklch(var(--sp-success));
    color: oklch(var(--sp-success-foreground));
    border-color: transparent;
    box-shadow: 0 8px 22px -8px oklch(0.45 0.13 150 / 0.5);
  }
/* QR code container — a clean white square with a hairline border,
     framing the generated QR for each payment method. */
.sp-qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    border-radius: 0.875rem;
    border: 1px solid oklch(var(--sp-border));
    background-color: oklch(var(--sp-card));
  }
.sp-qr img,
  .sp-qr canvas {
    display: block;
    width: 7rem;
    height: 7rem;
  }
/* Primary donation CTA — warm gold-to-orange gradient pill with a
     soft pulse ring. The single most prominent action on the page. */
.btn-sp-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.99 0.01 60);
    background-image: var(--gradient-sp-cta);
    box-shadow: 0 10px 28px -10px oklch(0.68 0.19 55 / 0.5);
    animation: sp-pulse-ring 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-sp-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.68 0.19 55 / 0.6);
  }
/* Secondary CTA — gold hairline outline (secondary action) */
.btn-sp-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--sp-gold) / 0.5);
    padding: 0.9rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--sp-gold));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-sp-outline:hover {
    background-image: var(--gradient-sp-gold);
    color: oklch(0.16 0.04 258);
    border-color: transparent;
    transform: translateY(-2px);
  }
/* Warm outro band — lifted warm panel with a gold hairline, holding
     the closing thank-you and the discreet network/IBAN check hint. */
.sp-outro {
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid oklch(var(--sp-gold) / 0.4);
    border-radius: 1.5rem;
    background-color: oklch(var(--sp-bg-2));
    padding: 3rem 2rem;
  }
.sp-outro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-sp-ambient);
    pointer-events: none;
  }
.sp-outro > * {
    position: relative;
    z-index: 1;
  }
.sp-outro-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: oklch(var(--sp-ink));
  }
.sp-outro-title em {
    font-style: normal;
    background-image: var(--gradient-sp-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.sp-outro-lead {
    max-width: 34rem;
    margin: 1rem auto 0;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: oklch(var(--sp-muted));
    text-wrap: balance;
  }
.sp-outro-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--sp-border));
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(var(--sp-muted));
    background-color: oklch(var(--sp-card));
  }
/* Private-initiative disclaimer — a warm, friendly notice clarifying
     that this is a private initiative and no tax-deductible donation
     receipt (Zuwendungsbestätigung) can be issued, while still thanking
     supporters. A soft elevated panel with a gold hairline and a small
     shield badge, consistent with the Navy/Gold/Orange register. */
.sp-disclaimer {
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid oklch(var(--sp-gold) / 0.4);
    border-radius: 1.5rem;
    background-color: oklch(var(--sp-bg-2));
    padding: 2.5rem 2rem;
  }
.sp-disclaimer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-sp-ambient);
    pointer-events: none;
  }
.sp-disclaimer > * {
    position: relative;
    z-index: 1;
  }
.sp-disclaimer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--sp-gold) / 0.45);
    color: oklch(var(--sp-gold));
    background-color: oklch(var(--sp-card));
    box-shadow: 0 8px 20px -8px oklch(0.78 0.15 82 / 0.4);
  }
.sp-disclaimer-title {
    margin-top: 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: oklch(var(--sp-ink));
    text-wrap: balance;
  }
.sp-disclaimer-text {
    max-width: 40rem;
    margin: 0.875rem auto 0;
    font-size: 1rem;
    line-height: 1.7;
    color: oklch(var(--sp-muted));
    text-wrap: balance;
  }
/* ============================================================
     GLOBAL DONATION CTA BANNER — SURFACE & TEXT HELPERS (additive)
     Consumed by the site-wide donation banner (rendered below the
     top nav on every page EXCEPT Spende). The banner wraps its root
     in the `.donate-banner` scope class so the --db-* tokens resolve.
     It presents its own warm cream surface so it stays readable and
     distinct on any page background (light or dark scoped theme).
     ============================================================ */
.bg-db {
    background-color: oklch(var(--db-bg));
  }
.bg-db-2 {
    background-color: oklch(var(--db-bg-2));
  }
.text-db {
    color: oklch(var(--db-ink));
  }
.text-db-muted {
    color: oklch(var(--db-muted));
  }
.text-db-gold {
    color: oklch(var(--db-gold));
  }
.text-db-heart {
    color: oklch(var(--db-heart));
  }
.border-db {
    border-color: oklch(var(--db-border));
  }
.border-db-gold {
    border-color: oklch(var(--db-gold) / 0.4);
  }
.bg-gradient-db-cta {
    background-image: var(--gradient-db-cta);
  }
.bg-gradient-db-gold {
    background-image: var(--gradient-db-gold);
  }
.text-gradient-db-gold {
    background-image: var(--gradient-db-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-db-ambient {
    background-image: var(--gradient-db-ambient);
  }
/* Banner container — a self-contained warm cream surface with a
     gold hairline and a soft gold ambient glow. Renders as an
     elevated band directly under the nav, distinct from any page
     background behind it. */
.donate-banner__bar {
    position: relative;
    overflow: hidden;
    background-color: oklch(var(--db-bg));
    border-top: 1px solid oklch(var(--db-border));
    border-bottom: 1px solid oklch(var(--db-gold) / 0.4);
  }
.donate-banner__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-db-ambient);
    pointer-events: none;
  }
.donate-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 1.75rem;
  }
/* High-converting CTA button — a warm gold-to-orange gradient pill
     with a soft pulse ring. The label 'Deine „einfach so“ Spende'
     sits in deep navy on the warm gradient for strong contrast and
     immediate attention. Links to the #spende anchor. */
.btn-db-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.99 0.01 60);
    background-image: var(--gradient-db-cta);
    box-shadow: 0 10px 28px -10px oklch(0.68 0.19 55 / 0.5);
    animation: db-pulse-ring 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-db-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.68 0.19 55 / 0.6);
  }
.btn-db-cta svg {
    width: 1.125rem;
    height: 1.125rem;
  }
/* Cursive thank-you line — the 'Jonathan und Familie sagen danke
     und Gottes Segen' message rendered in the elegant Great Vibes
     script with a warm heart icon. Deep navy on the cream surface
     for AA+ readability. */
.db-thanks {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    font-family: "Great Vibes", "Dancing Script", "Pacifico", "Brush Script MT",
      "Segoe Script", cursive;
    font-size: clamp(1.5rem, 3.5vw, 2.125rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: oklch(var(--db-ink));
    text-wrap: balance;
  }
.db-thanks svg {
    width: 1.25rem;
    height: 1.25rem;
    color: oklch(var(--db-heart));
    flex-shrink: 0;
  }
/* ============================================================
     DEINE SPENDE — PAYPAL CARD HELPERS (additive)
     The PayPal donation card on the Spende page. Unlike the
     copy-address cards, PayPal is a LINK card: it routes the donor
     to the PayPal account (@jonakuehnle / j.kuehnle@proton.me). It
     reuses the existing .sp-card / .sp-icon / .sp-card-title /
     .sp-card-meta / .sp-address surfaces, adding a PayPal-blue
     accent for the icon badge and a PayPal-blue action button.
     ============================================================ */
.text-sp-paypal {
    color: oklch(var(--sp-paypal));
  }
.bg-sp-paypal {
    background-color: oklch(var(--sp-paypal));
  }
.border-sp-paypal {
    border-color: oklch(var(--sp-paypal) / 0.45);
  }
/* PayPal icon badge — overrides the gold ring with the PayPal-blue
     register so the method is instantly recognizable. */
.sp-icon.sp-icon-paypal {
    border-color: oklch(var(--sp-paypal) / 0.45);
    color: oklch(var(--sp-paypal));
  }
/* PayPal action button — a deep PayPal-blue pill that opens the
     donor's PayPal in a new tab. Near-white label for AA+ contrast. */
.btn-sp-paypal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.985 0.01 255);
    background-image: linear-gradient(
      135deg,
      oklch(var(--sp-paypal-2)),
      oklch(var(--sp-paypal))
    );
    box-shadow: 0 10px 28px -10px oklch(0.42 0.13 255 / 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-sp-paypal:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.42 0.13 255 / 0.6);
  }
.btn-sp-paypal svg {
    width: 1.125rem;
    height: 1.125rem;
  }
/* ============================================================
     BLOG-PREDIGTEN — STUDY-BIBLE SURFACE & TEXT HELPERS (additive)
     Consumed by the sermon blog subpage only. Scoped helpers for
     the minimalist cream/ivory study-bible UI: anthracite serif
     body, elegant sans-serif headings, and a single bronze accent.
     ============================================================ */
.bg-bl {
    background-color: oklch(var(--bl-bg));
  }
.bg-bl-2 {
    background-color: oklch(var(--bl-bg-2));
  }
.bg-bl-card {
    background-color: oklch(var(--bl-card));
  }
.text-bl {
    color: oklch(var(--bl-ink));
  }
.text-bl-muted {
    color: oklch(var(--bl-muted));
  }
.text-bl-accent {
    color: oklch(var(--bl-accent));
  }
.text-bl-accent-deep {
    color: oklch(var(--bl-accent-deep));
  }
.border-bl {
    border-color: oklch(var(--bl-border));
  }
.border-bl-accent {
    border-color: oklch(var(--bl-accent) / 0.5);
  }
.bg-bl-accent-soft {
    background-color: oklch(var(--bl-accent-soft));
  }
.bg-gradient-bl-accent {
    background-image: var(--gradient-bl-accent);
  }
.text-gradient-bl-accent {
    background-image: var(--gradient-bl-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-bl-ambient {
    background-image: var(--gradient-bl-ambient);
  }
/* Sermon card — elevated ivory card with a soft warm hairline and a
     gentle bronze-tinted lift on hover. Minimal and serious. */
.bl-card {
    background-color: oklch(var(--bl-card));
    border: 1px solid oklch(var(--bl-border));
    border-radius: 1.125rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.bl-card:hover {
    box-shadow: var(--shadow-bl);
    transform: translateY(-3px);
  }
/* Elegant accent button — bronze gradient pill for the primary
     sermon-blog action (e.g. 'Predigt lesen'). Deep ivory label. */
.btn-bl-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.9rem 1.8rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(0.985 0.01 85);
    background-image: var(--gradient-bl-accent);
    box-shadow: 0 10px 28px -10px oklch(0.5 0.1 65 / 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-bl-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.5 0.1 65 / 0.5);
  }
/* Secondary action — bronze hairline outline (secondary link) */
.btn-bl-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--bl-accent) / 0.55);
    padding: 0.85rem 1.8rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--bl-accent-deep));
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-bl-outline:hover {
    background-color: oklch(var(--bl-accent-soft));
    transform: translateY(-2px);
  }
/* Sermon category / meta badge — soft bronze-tinted pill */
.bl-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--bl-accent) / 0.35);
    background-color: oklch(var(--bl-accent-soft));
    color: oklch(var(--bl-accent-deep));
    padding: 0.3rem 0.8rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
/* Scripture quote — bronze left rule for pull quotes */
.bl-quote {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid oklch(var(--bl-accent) / 0.6);
    font-family: var(--font-body);
    font-style: italic;
    color: oklch(var(--bl-ink));
  }
/* Editorial prose — high-readability serif body with generous line
     height for long-form sermon reading. */
.bl-prose {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.85;
    color: oklch(var(--bl-ink));
  }
/* Bronze-ring profile portrait scoped to the blog's ivory canvas.
     Re-anchors the inner gap to the ivory card and uses the elegant
     bronze accent for the ring, consistent with the study-bible theme. */
.bl-profile-ring {
    border-radius: 9999px;
    box-shadow: 0 0 0 4px oklch(var(--bl-card)), 0 0 0 10px
      oklch(var(--bl-accent) / 0.55), 0 24px 64px -18px
      oklch(0.19 0.02 60 / 0.25);
  }
/* ============================================================
     ÜBER MICH — SURFACE & TEXT HELPERS (additive)
     Consumed by the redesigned 'Über Mich' section on the home
     page only. Scoped helpers for the premium personal-profile UI
     in the existing Navy/Gold/Orange register.
     ============================================================ */
.bg-ab {
    background-color: oklch(var(--ab-bg));
  }
.bg-ab-card {
    background-color: oklch(var(--ab-card));
  }
.bg-ab-gold-soft {
    background-color: oklch(var(--ab-gold-soft));
  }
.text-ab {
    color: oklch(var(--ab-ink));
  }
.text-ab-muted {
    color: oklch(var(--ab-muted));
  }
.text-ab-gold {
    color: oklch(var(--ab-gold));
  }
.text-ab-orange {
    color: oklch(var(--ab-orange));
  }
.border-ab {
    border-color: oklch(var(--ab-border));
  }
.border-ab-gold {
    border-color: oklch(var(--ab-gold-hair));
  }
.bg-gradient-ab-gold {
    background-image: var(--gradient-ab-gold);
  }
.text-gradient-ab-gold {
    background-image: var(--gradient-ab-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-ab-cta {
    background-image: var(--gradient-ab-cta);
  }
.bg-ab-ambient {
    background-image: var(--gradient-ab-ambient);
  }
.bg-ab-ambient-orange {
    background-image: var(--gradient-ab-ambient-orange);
  }
/* Profile eyebrow label — gold uppercase kicker above headings */
.ab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: oklch(var(--ab-gold));
  }
.ab-eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 9999px;
    background-image: var(--gradient-ab-gold);
  }
/* Section title — deep navy display heading with a gold accent word */
.ab-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: oklch(var(--ab-ink));
    text-wrap: balance;
  }
/* Role badge — gold-gradient pill with deep navy text. Used in the
     profile header for each of Jonathan's roles. */
.ab-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    padding: 0.45rem 1rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-ab-gold);
    box-shadow: 0 6px 16px -6px oklch(0.78 0.15 82 / 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ab-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px oklch(0.78 0.15 82 / 0.5);
  }
/* Outline role badge — gold hairline pill for secondary roles */
.ab-badge-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    padding: 0.45rem 1rem;
    border: 1px solid oklch(var(--ab-gold-hair));
    background-color: oklch(var(--ab-gold-soft));
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--ab-ink));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ab-badge-outline:hover {
    border-color: oklch(var(--ab-gold));
    color: oklch(var(--ab-gold));
    transform: translateY(-2px);
  }
/* Signature quote block — gold left rule, oversized gold quotation
     mark, italic display text. The marketing centerpiece. */
.ab-quote {
    position: relative;
    padding: 2.25rem 2rem 2.25rem 3.25rem;
    border-radius: 1.5rem;
    background-color: oklch(var(--ab-card));
    border: 1px solid oklch(var(--ab-gold-hair));
    box-shadow: 0 18px 48px -20px oklch(0.3 0.07 258 / 0.2);
  }
.ab-quote::before {
    content: "\201C";
    position: absolute;
    top: 0.5rem;
    left: 1.15rem;
    font-family: var(--font-display);
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 700;
    background-image: var(--gradient-ab-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
  }
.ab-quote::after {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    left: 2.5rem;
    width: 3px;
    border-radius: 9999px;
    background-image: var(--gradient-ab-gold);
  }
.ab-quote-text {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: oklch(var(--ab-ink));
    text-wrap: balance;
  }
/* Elevated profile card — white surface, soft gold hairline */
.ab-card {
    background-color: oklch(var(--ab-card));
    border: 1px solid oklch(var(--ab-gold-hair));
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px oklch(0.3 0.07 258 / 0.04), 0 8px 24px -12px
      oklch(0.3 0.07 258 / 0.14);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ab-card:hover {
    box-shadow: 0 14px 34px -14px oklch(0.3 0.07 258 / 0.18);
    transform: translateY(-4px);
  }
/* Gold icon badge — gradient circle for value pillars / competency
     section markers. Deep navy glyph. */
.ab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-image: var(--gradient-ab-gold);
    color: oklch(0.16 0.04 258);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px oklch(0.78 0.15 82 / 0.45);
    flex-shrink: 0;
  }
/* Numbered step badge — gold ring circle for competency cards */
.ab-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--ab-gold-hair));
    background-color: oklch(var(--ab-gold-soft));
    color: oklch(var(--ab-gold));
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    flex-shrink: 0;
  }
/* Value pillar card — white surface with a gold icon badge and a
     subtle gold top hairline. Used for the 4 Grundwerte. */
.ab-value {
    background-color: oklch(var(--ab-card));
    border: 1px solid oklch(var(--ab-gold-hair));
    border-radius: 1.25rem;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ab-value:hover {
    box-shadow: 0 14px 34px -14px oklch(0.78 0.15 82 / 0.3);
    transform: translateY(-4px);
  }
/* Competency card — numbered gold badge + navy title + body */
.ab-competency {
    background-color: oklch(var(--ab-card));
    border: 1px solid oklch(var(--ab-gold-hair));
    border-radius: 1.25rem;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ab-competency:hover {
    box-shadow: 0 14px 34px -14px oklch(0.78 0.15 82 / 0.3);
    transform: translateY(-4px);
  }
/* Gold timeline — vertical gold rule with gold node dots. Used for
     the career + education history. */
.ab-timeline {
    position: relative;
    padding-left: 2.25rem;
  }
.ab-timeline::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0.5rem;
    width: 2px;
    border-radius: 9999px;
    background-image: var(--gradient-ab-gold);
  }
.ab-timeline-item {
    position: relative;
    padding-bottom: 1.75rem;
  }
.ab-timeline-item:last-child {
    padding-bottom: 0;
  }
.ab-timeline-item::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: -2.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background-image: var(--gradient-ab-gold);
    box-shadow: 0 0 0 4px oklch(var(--ab-card)), 0 4px 12px -4px
      oklch(0.78 0.15 82 / 0.5);
  }
.ab-timeline-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.35rem 0.9rem;
    background-image: var(--gradient-ab-gold);
    color: oklch(0.16 0.04 258);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
/* ============================================================
     FÜR WEN — AUDIENCE SURFACE & TEXT HELPERS (additive)
     Consumed by the home-page audience section (#fuer-wen) only.
     Scoped helpers for the two-block 'IST / NICHT' layout: a
     dominant gold callout banner, a gold 'IST' block, and a muted
     'NICHT' block — visually distinct within the Navy/Gold/Orange
     register.
     ============================================================ */
.bg-au {
    background-color: oklch(var(--au-bg));
  }
.bg-au-card {
    background-color: oklch(var(--au-card));
  }
.bg-au-gold-soft {
    background-color: oklch(var(--au-gold-soft));
  }
.bg-au-neg {
    background-color: oklch(var(--au-neg));
  }
.text-au {
    color: oklch(var(--au-ink));
  }
.text-au-muted {
    color: oklch(var(--au-muted));
  }
.text-au-gold {
    color: oklch(var(--au-gold));
  }
.text-au-orange {
    color: oklch(var(--au-orange));
  }
.border-au {
    border-color: oklch(var(--au-border));
  }
.border-au-gold {
    border-color: oklch(var(--au-gold-hair));
  }
.bg-gradient-au-gold {
    background-image: var(--gradient-au-gold);
  }
.text-gradient-au-gold {
    background-image: var(--gradient-au-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-au-ambient {
    background-image: var(--gradient-au-ambient);
  }
.bg-au-ambient-orange {
    background-image: var(--gradient-au-ambient-orange);
  }
/* Dominant callout banner — the signature quote. A gold-gradient
     surface with deep navy text, a soft gold glow, and a subtle
     sheen sweep on hover. Reads as the marketing centerpiece of the
     audience section. */
.au-banner {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    background-image: var(--gradient-au-gold);
    box-shadow: var(--shadow-gold-glow);
  }
.au-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 40%,
      oklch(0.99 0.02 95 / 0.35) 50%,
      transparent 60%
    );
    transform: translateX(-120%);
    transition: transform 0.8s ease;
    pointer-events: none;
  }
.au-banner:hover::after {
    transform: translateX(120%);
  }
.au-banner-text {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: oklch(0.16 0.04 258);
    text-wrap: balance;
  }
/* 'IST' block — gold-tinted positive surface */
.au-is {
    background-color: oklch(var(--au-gold-soft));
    border: 1px solid oklch(var(--au-gold-hair));
    border-radius: 1.5rem;
  }
.au-is-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-au-gold);
  }
/* 'NICHT' block — muted negative surface */
.au-not {
    background-color: oklch(var(--au-neg-soft));
    border: 1px solid oklch(var(--au-border));
    border-radius: 1.5rem;
  }
.au-not-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(var(--au-muted));
    background-color: oklch(var(--au-neg));
  }
/* ============================================================
     CORE COMPETENCIES — DARK 3-PILLAR SURFACE & TEXT HELPERS
     Consumed by the home page 3-Pillar Core Competencies section
     only. Scoped helpers for the dark slate-950 register with the
     three glowing accent registers (cyan / gold / emerald).
     ============================================================ */
.bg-cc {
    background-color: oklch(var(--cc-bg));
  }
.bg-cc-2 {
    background-color: oklch(var(--cc-bg-2));
  }
.bg-cc-card {
    background-color: oklch(var(--cc-card));
  }
.text-cc {
    color: oklch(var(--cc-foreground));
  }
.text-cc-muted {
    color: oklch(var(--cc-muted));
  }
.border-cc {
    border-color: oklch(var(--cc-border));
  }
.text-cc-cyan {
    color: oklch(var(--cc-cyan));
  }
.text-cc-gold {
    color: oklch(var(--cc-gold));
  }
.text-cc-emerald {
    color: oklch(var(--cc-emerald));
  }
.bg-gradient-cc-cyan {
    background-image: var(--gradient-cc-cyan);
  }
.text-gradient-cc-cyan {
    background-image: var(--gradient-cc-cyan);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-cc-gold {
    background-image: var(--gradient-cc-gold);
  }
.text-gradient-cc-gold {
    background-image: var(--gradient-cc-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-cc-emerald {
    background-image: var(--gradient-cc-emerald);
  }
.text-gradient-cc-emerald {
    background-image: var(--gradient-cc-emerald);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-cc-ambient {
    background-image: var(--gradient-cc-ambient);
  }
/* Elevated dark pillar card — dark surface with a hairline border
     and a soft ambient glow. The accent border + glow are driven by
     the per-pillar modifier class (.cc-card--cyan / --gold / --emerald)
     so each pillar glows in its own register on hover. */
.cc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: oklch(var(--cc-card));
    border: 1px solid oklch(var(--cc-border));
    border-radius: 1.25rem;
    padding: 2rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.cc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-cc-ambient);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
.cc-card:hover {
    transform: translateY(-6px);
  }
.cc-card:hover::before {
    opacity: 1;
  }
.cc-card > * {
    position: relative;
    z-index: 1;
  }
/* Per-pillar glowing border + shadow on hover */
.cc-card--cyan:hover {
    border-color: oklch(var(--cc-cyan) / 0.55);
    box-shadow: 0 0 0 1px oklch(var(--cc-cyan) / 0.35), 0 24px 60px -20px
      oklch(0.78 0.13 195 / 0.35);
  }
/* Pillar icon badge — gradient circle with a dark glyph */
.cc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    color: oklch(0.13 0.02 258);
    box-shadow: 0 8px 22px -8px oklch(0.05 0.01 258 / 0.6);
    flex-shrink: 0;
  }
.cc-icon--cyan {
    background-image: var(--gradient-cc-cyan);
  }
.cc-icon--gold {
    background-image: var(--gradient-cc-gold);
  }
.cc-icon--emerald {
    background-image: var(--gradient-cc-emerald);
  }
/* Pillar badge — soft tinted pill with a hairline border */
.cc-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.4rem;
    border-radius: 9999px;
    padding: 0.35rem 0.85rem;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
.cc-badge--cyan {
    color: oklch(var(--cc-cyan));
    background-color: oklch(var(--cc-cyan) / 0.1);
    border: 1px solid oklch(var(--cc-cyan) / 0.3);
  }
.cc-badge--gold {
    color: oklch(var(--cc-gold));
    background-color: oklch(var(--cc-gold) / 0.1);
    border: 1px solid oklch(var(--cc-gold) / 0.3);
  }
.cc-badge--emerald {
    color: oklch(var(--cc-emerald));
    background-color: oklch(var(--cc-emerald) / 0.1);
    border: 1px solid oklch(var(--cc-emerald) / 0.3);
  }
/* Pillar title — sharp display heading */
.cc-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: oklch(var(--cc-foreground));
    text-wrap: balance;
  }
/* Pillar bullet list — check/sparkle icons with muted text */
.cc-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 0.25rem;
  }
.cc-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: oklch(var(--cc-muted));
  }
.cc-list li svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
  }
.cc-list--cyan li svg {
    color: oklch(var(--cc-cyan));
  }
.cc-list--gold li svg {
    color: oklch(var(--cc-gold));
  }
.cc-list--emerald li svg {
    color: oklch(var(--cc-emerald));
  }
/* Section header badge — cyan pill above the H2 */
.cc-eyebrow {
    display: inline-block;
    background-color: oklch(var(--cc-cyan) / 0.1);
    color: oklch(var(--cc-cyan));
    border: 1px solid oklch(var(--cc-cyan) / 0.3);
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
/* Section headline — sharp near-white display heading */
.cc-heading {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: oklch(var(--cc-foreground));
    text-wrap: balance;
  }
.cc-heading em {
    font-style: normal;
    background-image: var(--gradient-cc-cyan);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
/* Section subheadline — muted supporting text */
.cc-subhead {
    max-width: 44rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: oklch(var(--cc-muted));
    text-wrap: balance;
  }
/* CTA footer banner — elevated dark panel with a cyan ambient glow */
.cc-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid oklch(var(--cc-border));
    border-radius: 1.5rem;
    background-color: oklch(var(--cc-bg-2));
    padding: 3rem 2rem;
  }
.cc-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-cc-ambient);
    pointer-events: none;
  }
.cc-cta > * {
    position: relative;
    z-index: 1;
  }
.cc-cta-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: oklch(var(--cc-foreground));
    text-wrap: balance;
  }
.cc-cta-title em {
    font-style: normal;
    background-image: var(--gradient-cc-cyan);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
/* Primary CTA — cyan solid pill with dark text */
.btn-cc-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.13 0.02 258);
    background-color: oklch(var(--cc-cyan));
    box-shadow: 0 10px 28px -10px oklch(0.78 0.13 195 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-cc-primary:hover {
    background-color: oklch(0.85 0.12 195);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.13 195 / 0.55);
  }
.btn-cc-primary svg {
    width: 1.125rem;
    height: 1.125rem;
  }
/* ============================================================
     GLOBAL *++TEXT++ BADGE DESIGN RULE — PILL BADGE (additive)
     Reusable badge rendered for any text wrapped in the *++[Text]++
     marker. Strongly rounded (pill) corners with a frosted obsidian
     surface and a bright gold/champagne hairline. On dark backgrounds
     the text is an extremely bright, high-contrast gold/champagne
     accent (NOT pure white) for the marketing eyecatcher effect;
     on light backgrounds it flips to deep navy on a gold-tinted
     surface. Apply `.badge-marker--dark` / `.badge-marker--light`
     (or the auto `.badge-marker`) to match the surrounding surface.
     ============================================================ */
.badge-marker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    padding: 0.4rem 1rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    background-color: oklch(var(--badge-bg) / 0.6);
    border: 1px solid oklch(var(--badge-border-soft));
    color: oklch(var(--badge-text));
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 8px 24px -12px oklch(0.03 0.005 258 / 0.9), inset 0 1px 0 0
      oklch(0.98 0.01 258 / 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
/* Dark-background variant — the marketing eyecatcher. Extremely
     bright gold/champagne text with a soft gold glow, harmonizing
     with the Obsidian dark-blue canvas instead of competing with
     the page's existing white. */
.badge-marker--dark {
    background-color: oklch(var(--badge-bg) / 0.6);
    border-color: oklch(var(--badge-border-soft));
    color: oklch(var(--badge-text));
    box-shadow: 0 8px 24px -12px oklch(0.03 0.005 258 / 0.9), 0 0 24px -8px
      oklch(var(--badge-glow)), inset 0 1px 0 0 oklch(0.98 0.01 258 / 0.06);
  }
.badge-marker--dark:hover {
    border-color: oklch(var(--badge-border) / 0.7);
    color: oklch(var(--badge-text-strong));
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -12px oklch(0.03 0.005 258 / 0.9), 0 0 32px -6px
      oklch(var(--badge-glow)), inset 0 1px 0 0 oklch(0.98 0.01 258 / 0.08);
  }
/* Light-background variant — deep navy text on a soft gold-tinted
     surface with a gold hairline. Readable and premium on light pages. */
.badge-marker--light {
    background-color: oklch(var(--badge-bg-light));
    border-color: oklch(var(--badge-border-light));
    color: oklch(var(--badge-text-light));
    box-shadow: 0 1px 2px oklch(0.3 0.07 258 / 0.04);
  }
.badge-marker--light:hover {
    border-color: oklch(0.72 0.15 60 / 0.6);
    transform: translateY(-2px);
  }
/* Filled gold-gradient variant — maximum marketing impact. A gold
     gradient surface with deep navy text and a soft gold glow. */
.badge-marker--gold {
    background-image: var(--gradient-badge-gold);
    border-color: transparent;
    color: oklch(0.16 0.04 258);
    box-shadow: 0 6px 18px -6px oklch(0.78 0.15 82 / 0.5);
  }
.badge-marker--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -8px oklch(0.78 0.15 82 / 0.6);
  }
/* Inline placement helper — keeps the badge baseline-aligned when it
     appears inside a paragraph of running text. */
.badge-marker--inline {
    vertical-align: baseline;
    margin: 0 0.1em;
  }
/* ============================================================
     PURE BLACK ELITE — HERO SURFACE & TEXT HELPERS (additive)
     Consumed by the above-the-fold homepage hero only. Scoped under
     `.hero-elite` so the global obsidian theme stays untouched.
     Absolute pure-black canvas, off-white monumental H1, cool
     silver-gray H2 with wide tracking, and one cyber-blue accent
     phrase with a soft, subtle glow. Centered with generous
     negative space so it thrones above the intro video.
     ============================================================ */
.bg-he {
    background-color: oklch(var(--he-bg));
  }
.text-he {
    color: oklch(var(--he-foreground));
  }
.text-he-muted {
    color: oklch(var(--he-muted));
  }
.text-he-cyan {
    color: oklch(var(--he-cyan));
  }
.bg-he-ambient {
    background-image: var(--gradient-he-ambient);
  }
.bg-he-cyan-glow {
    background-image: var(--gradient-he-cyan-glow);
  }
/* Monumental off-white H1 — massive, heavy, tight-tracked display
     with a deliberate line break. Pure black canvas behind it. */
.he-h1 {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 8vw, 6.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: oklch(var(--he-foreground));
    text-wrap: balance;
    text-rendering: optimizeLegibility;
  }
/* Cool silver-gray H2 — light weight, wide letter-spacing for a
     cinematic contrast against the heavy H1. */
.he-h2 {
    max-width: 46rem;
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 2vw, 1.375rem);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: oklch(var(--he-muted));
    text-wrap: balance;
  }
/* Cyber-blue accent phrase — the single hero highlight. Cyber-blue
     #00D8FF text with an extremely subtle, soft, high-blur glow and a
     gentle pulse. Deliberately NOT a neon tube: low opacity, large
     blur radius, restrained. */
.he-accent {
    color: oklch(var(--he-cyan));
    text-shadow: 0 0 32px oklch(var(--he-cyan-soft)), 0 0 64px
      oklch(var(--he-cyan-soft));
    animation: hero-pulse 4.5s ease-in-out infinite;
  }
/* Soft ambient glow layer behind the hero content — a wide, faint
     cyan radial that breathes life into the pure-black void without
     breaking the frame-less cinema look. */
.he-glow {
    position: absolute;
    inset: 0;
    background-image: var(--gradient-he-ambient);
    pointer-events: none;
  }
/* ============================================================
     VISIONARY — SECULAR CRYPTO/AI MANIFESTO SURFACE & TEXT HELPERS
     Consumed by the two NEW monumental homepage core-message
     sections only. Scoped under `.visionary`.
     ============================================================ */
.bg-vs {
    background-color: oklch(var(--vs-bg));
  }
.bg-vs-2 {
    background-color: oklch(var(--vs-bg-2));
  }
.bg-vs-card {
    background-color: oklch(var(--vs-card));
  }
.text-vs {
    color: oklch(var(--vs-foreground));
  }
.text-vs-muted {
    color: oklch(var(--vs-muted));
  }
.text-vs-gold {
    color: oklch(var(--vs-gold));
  }
.text-vs-cyan {
    color: oklch(var(--vs-cyan));
  }
.text-vs-orange {
    color: oklch(var(--vs-orange));
  }
.border-vs {
    border-color: oklch(var(--vs-border));
  }
.border-vs-gold {
    border-color: oklch(var(--vs-border-gold));
  }
.bg-gradient-vs-gold {
    background-image: var(--gradient-vs-gold);
  }
.text-gradient-vs-gold {
    background-image: var(--gradient-vs-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.text-gradient-vs-cyan {
    background-image: var(--gradient-vs-cyan);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-vs-cta {
    background-image: var(--gradient-vs-cta);
  }
.bg-vs-ambient {
    background-image: var(--gradient-vs-ambient);
  }
.bg-vs-ambient-cyan {
    background-image: var(--gradient-vs-ambient-cyan);
  }
/* Monumental secular manifesto headline — huge, heavy, tight-tracked
     Space Grotesk. The dominant voice of the two new homepage sections. */
.vs-h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: oklch(var(--vs-foreground));
    text-wrap: balance;
    text-rendering: optimizeLegibility;
  }
/* Supporting manifesto line — brightened secondary text under the H1. */
.vs-lead {
    max-width: 46rem;
    font-family: var(--font-body);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: oklch(var(--vs-muted));
    text-wrap: balance;
  }
/* Gold 'certainty' accent — the prophetic-voice highlight word. */
.vs-accent {
    color: oklch(var(--vs-gold));
  }
/* Elevated visionary card — dark surface, gold hairline */
.vs-card {
    background-color: oklch(var(--vs-card));
    border: 1px solid oklch(var(--vs-border-gold) / 0.55);
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.vs-card:hover {
    box-shadow: var(--shadow-vs-gold);
    transform: translateY(-4px);
  }
/* Primary CTA — gold gradient pill (main visionary actions) */
.btn-vs-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-vs-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-vs-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
/* WhatsApp CTA — warm gold-to-orange gradient, soft pulse ring */
.btn-vs-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.99 0.01 60);
    background-image: var(--gradient-vs-cta);
    box-shadow: 0 10px 28px -10px oklch(0.68 0.19 55 / 0.5);
    animation: vs-pulse-ring 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-vs-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.68 0.19 55 / 0.6);
  }
/* ============================================================
     VISION — 'DIE GROSSE VISION' THEOLOGICAL SURFACE & TEXT HELPERS
     Consumed by the strictly-isolated theological manifesto subpage
     only. Scoped under `.vision`. Graphic bomb: void-black broken
     by radiant gold, monumental Fraunces serif headlines, bullet
     weapon section.
     ============================================================ */
.bg-vn {
    background-color: oklch(var(--vn-bg));
  }
.bg-vn-2 {
    background-color: oklch(var(--vn-bg-2));
  }
.bg-vn-card {
    background-color: oklch(var(--vn-card));
  }
.text-vn {
    color: oklch(var(--vn-foreground));
  }
.text-vn-muted {
    color: oklch(var(--vn-muted));
  }
.text-vn-gold {
    color: oklch(var(--vn-gold));
  }
.text-vn-champagne {
    color: oklch(var(--vn-champagne));
  }
.text-vn-orange {
    color: oklch(var(--vn-orange));
  }
.border-vn {
    border-color: oklch(var(--vn-border));
  }
.border-vn-gold {
    border-color: oklch(var(--vn-border-gold));
  }
.bg-gradient-vn-gold {
    background-image: var(--gradient-vn-gold);
  }
.text-gradient-vn-gold {
    background-image: var(--gradient-vn-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.bg-gradient-vn-cta {
    background-image: var(--gradient-vn-cta);
  }
.bg-vn-ambient {
    background-image: var(--gradient-vn-ambient);
  }
.bg-vn-light {
    background-image: var(--gradient-vn-light);
  }
/* Monumental theological headline — huge Fraunces serif, the prophetic
     'bomb' voice. Radiant near-white on the void, or navy on gold panels. */
.vn-h1 {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 8vw, 6.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: oklch(var(--vn-foreground));
    text-wrap: balance;
    text-rendering: optimizeLegibility;
  }
/* Section-level theological heading — still monumental but smaller. */
.vn-h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: oklch(var(--vn-foreground));
    text-wrap: balance;
  }
/* Supporting scripture line — brightened body text under headings. */
.vn-lead {
    max-width: 44rem;
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 2vw, 1.375rem);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: oklch(var(--vn-muted));
    text-wrap: balance;
  }
/* Radiant gold accent — the light-of-God highlight word. */
.vn-accent {
    color: oklch(var(--vn-gold));
  }
/* Radiant gold panel — the light breaking the void. Deep navy ink text
     on a gold-gradient surface for hard, high-contrast reversal. */
.vn-gold-panel {
    background-image: var(--gradient-vn-gold);
    color: oklch(var(--vn-gold-ink));
    border-radius: 1.5rem;
    box-shadow: 0 18px 48px -16px oklch(0.05 0.01 258 / 0.7), 0 0 60px -12px
      oklch(0.78 0.15 82 / 0.35);
  }
.vn-gold-panel .vn-h2,
  .vn-gold-panel .vn-lead {
    color: oklch(var(--vn-gold-ink));
  }
/* Elevated vision card — dark void surface, radiant gold hairline */
.vn-card {
    background-color: oklch(var(--vn-card));
    border: 1px solid oklch(var(--vn-border-gold) / 0.55);
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.vn-card:hover {
    box-shadow: var(--shadow-vn-gold);
    transform: translateY(-4px);
  }
/* Theological weapon bullet — radiant gold marker on the void. A
     crisp, hard bullet list for the Matthew 25 weapon section: no text
     walls, each point a single decisive strike. */
.vn-bullet {
    position: relative;
    padding-left: 2.25rem;
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    color: oklch(var(--vn-foreground));
  }
.vn-bullet::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    background-image: var(--gradient-vn-gold);
    box-shadow: 0 0 18px -4px oklch(0.78 0.15 82 / 0.6);
  }
/* Primary CTA — radiant gold gradient pill (main vision actions) */
.btn-vn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.95rem 1.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.16 0.04 258);
    background-image: var(--gradient-vn-gold);
    box-shadow: 0 10px 28px -10px oklch(0.78 0.15 82 / 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-vn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.78 0.15 82 / 0.55);
  }
/* WhatsApp CTA — warm gold-to-orange gradient, soft pulse ring */
.btn-vn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 1rem 2.1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: oklch(0.99 0.01 60);
    background-image: var(--gradient-vn-cta);
    box-shadow: 0 10px 28px -10px oklch(0.68 0.19 55 / 0.5);
    animation: vn-pulse-ring 2.6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
.btn-vn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px oklch(0.68 0.19 55 / 0.6);
  }
/* ============================================================
     VISION — FOUR-SECTION HARD-CONTRAST SEPARATION SYSTEM (additive)
     The four sections of 'Die grosse Vision' must read as four
     visually SEPARATE blocks — a dark, high-contrast manifesto with
     golden light elements, never one flowing text page. These
     helpers provide the banding, the graphic gold rules that cut
     between blocks, the giant ghost numerals that number each
     section, and the radiant light bloom that breaks the void.
     All consume the existing --vn-* tokens. No new palette.
     ============================================================ */
/* --- Section band surfaces (hard alternation) --- */
/* VOID band — the deepest black canvas. The default register for
     the odd-numbered sections; darker than the page canvas so each
     section reads as its own carved block. */
.vn-band-void {
    position: relative;
    background-color: oklch(var(--vn-void));
    box-shadow: var(--vn-shadow-void);
  }
/* VOID-2 band — a slightly lifted void for alternating dark
     sections, so two adjacent dark sections still read as separate. */
.vn-band-void-2 {
    position: relative;
    background-color: oklch(var(--vn-void-2));
  }
/* GOLD band — the radiant light breaking the void. A full-bleed
     gold-gradient surface with deep navy ink. The hard reversal is
     the page's signature contrast. */
.vn-band-gold {
    position: relative;
    background-image: var(--gradient-vn-gold);
    color: oklch(var(--vn-gold-ink));
    box-shadow: 0 24px 70px -24px oklch(0.05 0.01 258 / 0.8), 0 0 80px -16px
      oklch(0.78 0.15 82 / 0.4);
  }
.vn-band-gold .vn-h2,
  .vn-band-gold .vn-lead,
  .vn-band-gold .vn-section-title {
    color: oklch(var(--vn-gold-ink));
  }
/* --- Graphic gold rules that cut between sections --- */
/* Hard gold rule — a thick, radiant bar that severs one section
     from the next. Reads as a deliberate graphic cut, not a hairline. */
.vn-rule {
    height: 3px;
    width: 100%;
    border: none;
    background-image: var(--gradient-vn-gold);
    box-shadow: 0 0 24px -2px oklch(0.78 0.15 82 / 0.55);
  }
/* Centered short gold rule — a decisive 5rem bar above a heading. */
.vn-rule-short {
    display: block;
    height: 3px;
    width: 5rem;
    border: none;
    border-radius: 9999px;
    background-image: var(--gradient-vn-gold);
    box-shadow: 0 0 20px -2px oklch(0.78 0.15 82 / 0.5);
  }
/* Faint gold hairline — a subtle separator for use inside a band. */
.vn-hairline {
    height: 1px;
    width: 100%;
    border: none;
    background-color: oklch(var(--vn-rule-soft));
  }
/* --- Section header block: numbered, ruled, unmistakably separate --- */
/* The section header wrapper. Sits at the top of every one of the
     four sections and carries the number, eyebrow, H2 and gold rule
     as one graphic unit. */
.vn-section-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
/* Section number — a gold-gradient numeral in a gold-hairline ring.
     Immediately signals "this is a distinct, numbered section". */
.vn-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--vn-border-gold));
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    background-image: var(--gradient-vn-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    box-shadow: 0 0 28px -8px oklch(0.78 0.15 82 / 0.5);
    flex-shrink: 0;
  }
/* On a gold band the ring flips to navy ink so it stays visible. */
.vn-band-gold .vn-section-num {
    border-color: oklch(0.16 0.04 258 / 0.35);
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: oklch(var(--vn-gold-ink));
    box-shadow: none;
  }
/* Section eyebrow — small gold uppercase kicker above the H2. */
.vn-section-eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: oklch(var(--vn-gold));
  }
.vn-band-gold .vn-section-eyebrow {
    color: oklch(var(--vn-gold-ink));
    opacity: 0.75;
  }
/* Section title — the section's own H2. Monumental Fraunces, but one
     step below .vn-h1 so the four section headings share a register. */
.vn-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4.5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: oklch(var(--vn-foreground));
    text-wrap: balance;
  }
/* --- Giant ghost numeral — the section's number as a watermark --- */
/* A huge, ultra-low-contrast numeral bled into the band's corner.
     Reinforces the four-section structure without adding copy. */
.vn-ghost-num {
    position: absolute;
    top: -0.15em;
    right: -0.05em;
    font-family: var(--font-display);
    font-size: clamp(8rem, 26vw, 20rem);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.05em;
    color: oklch(var(--vn-ghost));
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    z-index: 0;
  }
.vn-band-gold .vn-ghost-num {
    color: oklch(var(--vn-ghost-ink));
  }
/* Keep real section content above the ghost numeral watermark. */
.vn-band-void > *,
  .vn-band-void-2 > *,
  .vn-band-gold > * {
    position: relative;
    z-index: 1;
  }
/* --- Radiant light bloom --- */
/* A wide gold radial bloom that breaks the void behind a section's
     content — the "light of God" atmosphere, restrained to a glow. */
.vn-bloom {
    position: absolute;
    inset: 0;
    background-image: var(--gradient-vn-light);
    pointer-events: none;
    z-index: 0;
  }
/* Stronger bloom for the section that carries the page's climax. */
.vn-bloom-strong {
    background-image: radial-gradient(
      55% 55% at 50% 45%,
      oklch(var(--vn-glow-strong)),
      transparent 72%
    );
  }
/* --- Gold panel, hardened for the four-section rhythm --- */
/* The existing .vn-gold-panel, with a crisp inner keyline so the
     light panel reads as a hard-edged slab rather than a soft glow. */
.vn-gold-panel--hard {
    position: relative;
    border-radius: 0;
    box-shadow: 0 30px 90px -30px oklch(0.02 0.01 260 / 0.95), 0 0 90px -20px
      oklch(0.78 0.15 82 / 0.45);
  }
.vn-gold-panel--hard::after {
    content: "";
    position: absolute;
    inset: 0.75rem;
    border: 1px solid oklch(0.16 0.04 258 / 0.22);
    pointer-events: none;
    border-radius: 0.25rem;
  }
/* --- Bullet weapon, hardened --- */
/* Decisive bullet list for the hard bullet-point section. Each point
     is a single strike: a radiant gold marker on the void, generous
     vertical rhythm, no paragraph walls. */
.vn-bullet-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
.vn-bullet-list > li {
    position: relative;
    padding-left: 2.5rem;
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
    color: oklch(var(--vn-foreground));
  }
.vn-bullet-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 9999px;
    background-image: var(--gradient-vn-gold);
    box-shadow: 0 0 20px -4px oklch(0.78 0.15 82 / 0.65);
  }
.vn-band-gold .vn-bullet-list > li {
    color: oklch(var(--vn-gold-ink));
  }
.vn-band-gold .vn-bullet-list > li::before {
    background-image: none;
    background-color: oklch(var(--vn-gold-ink));
    box-shadow: none;
  }
/* --- Section CTA footer --- */
/* Every section ends in a dominant WhatsApp CTA. This wrapper gives
     the CTA its own ruled footer zone so the section terminates with
     a hard, deliberate edge rather than trailing off. */
.vn-section-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid oklch(var(--vn-rule-soft));
  }
.vn-band-gold .vn-section-cta {
    border-top-color: oklch(0.16 0.04 258 / 0.25);
  }
/* --- Motion: the four sections rise in sequence --- */
.vn-section-rise {
    animation: vn-section-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.vn-section-rise--2 {
    animation-delay: 0.12s;
  }
.vn-section-rise--3 {
    animation-delay: 0.24s;
  }
.vn-section-rise--4 {
    animation-delay: 0.36s;
  }
/* ============================================================
     PREMIUM PORTRAIT FRAME — 'THE OPERATOR' TRUST ANCHOR (additive)
     Editorial, high-contrast framed portrait treatment for the
     existing operator-promotion.webp image. Consumed by the Vision
     page and the two creed pages (Apostolikum, Nicänum).
     Layered shadows for depth, a fine gold hairline/rule as the
     frame, and a subtle gold bloom behind the image. The portrait is
     always a statement — never a filler. Reuses the --vn-* void/gold
     vocabulary; no new palette.
     ============================================================ */
/* The frame wrapper. A real painted gold hairline border (not a
     shadow that can be clipped), an inset navy keyline, and layered
     shadows: a deep void drop, a mid gold lift, and a soft gold
     bloom. Padding creates the fine gold rule around the image. */
.vn-portrait-frame {
    position: relative;
    display: block;
    border-radius: 1.75rem;
    padding: 6px;
    background-image: var(--gradient-vn-gold);
    box-shadow:
      0 30px 90px -30px oklch(0.02 0.01 260 / 0.95), 0 18px 48px
      -18px oklch(0.05 0.01 258 / 0.7), 0 0 70px -14px oklch(0.88 0.14 88 / 0.4),
      inset 0 1px 0 0 oklch(0.98 0.01 258 / 0.08);
  }
/* The inner keyline — a fine navy hairline inset just inside the
     gold rule, sharpening the editorial, high-contrast frame edge. */
.vn-portrait-frame::after {
    content: "";
    position: absolute;
    inset: 0.55rem;
    border: 1px solid oklch(0.16 0.04 258 / 0.22);
    border-radius: 1.25rem;
    pointer-events: none;
    z-index: 2;
  }
/* The image itself. Cover-cropped, centered on the subject, with a
     tight radius inside the gold rule so the frame reads as a frame. */
.vn-portrait-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center top;
       object-position: center top;
    border-radius: 1.35rem;
    filter: contrast(1.08) saturate(1.04);
  }
/* Subtle gold bloom behind the framed portrait — a wide radial that
     lifts the image off the void without washing it out. */
.vn-portrait-bloom {
    position: absolute;
    inset: -12%;
    background-image: radial-gradient(
      55% 55% at 50% 40%,
      oklch(0.88 0.14 88 / 0.22),
      transparent 72%
    );
    pointer-events: none;
    z-index: 0;
    animation: vn-light-breathe 5s ease-in-out infinite;
  }
/* Authority block — pairs the framed portrait with a dominant
     WhatsApp CTA. Mobile: portrait on top, CTA directly beneath.
     Desktop (lg): portrait left, CTA beside it in a glass panel. */
.vn-authority {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }
@media (min-width: 1024px) {
    .vn-authority {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
      gap: 3.5rem;
    }
  }
/* The portrait column — constrained so the image never dominates
     the band, centered on mobile. */
.vn-authority-portrait {
    position: relative;
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
  }
@media (min-width: 1024px) {
    .vn-authority-portrait {
      margin-inline: 0;
      max-width: none;
    }
  }
/* The CTA column — a frosted glass panel that carries the dominant
     WhatsApp action beside (desktop) or beneath (mobile) the image. */
.vn-authority-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem;
    border-radius: 1.5rem;
    background-color: oklch(var(--vn-card) / 0.6);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid oklch(var(--vn-border-gold) / 0.45);
    box-shadow: 0 24px 60px -30px oklch(0.02 0.01 260 / 0.9), inset 0 1px 0 0
      oklch(0.98 0.01 258 / 0.06);
  }
/* On a gold band the glass panel flips to a navy-ink treatment so it
     stays legible on the radiant surface. */
.vn-band-gold .vn-authority-cta {
    background-color: oklch(0.16 0.04 258 / 0.08);
    border-color: oklch(0.16 0.04 258 / 0.25);
    color: oklch(var(--vn-gold-ink));
    box-shadow: 0 24px 60px -30px oklch(0.05 0.01 258 / 0.5), inset 0 1px 0 0
      oklch(0.98 0.01 258 / 0.2);
  }
/* The authority headline — the trust statement beside the portrait. */
.vn-authority-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: oklch(var(--vn-foreground));
    text-wrap: balance;
  }
.vn-band-gold .vn-authority-title {
    color: oklch(var(--vn-gold-ink));
  }
/* The authority supporting line. */
.vn-authority-lead {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    font-weight: 400;
    line-height: 1.7;
    color: oklch(var(--vn-muted));
  }
.vn-band-gold .vn-authority-lead {
    color: oklch(0.16 0.04 258 / 0.78);
  }
/* ============================================================
     CREED PAGES — APOSTOLIKUM / NICÄNUM (additive)
     Structure for the two historical confession pages. Each page
     carries exactly THREE giant design headings, each followed by a
     readable verbatim text block — generous vertical rhythm, clear
     hierarchy, never a text wall. Reuses the .vision scope tokens
     (--vn-*) and the vn-band-* / vn-rule / vn-section-head /
     vn-ghost-num / vn-section-cta / btn-vn-whatsapp vocabulary.
     ============================================================ */
/* Creed hero — the page's opening statement zone. Deepest void with
     a gold ambient bloom, a monumental eyebrow, the page title, and a
     short lead. Sits above the three numbered creed bands. */
.vn-creed-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 9vw, 7rem);
    background-color: oklch(var(--vn-void));
    box-shadow: var(--vn-shadow-void);
  }
/* Creed hero title — the page's monumental Fraunces statement. */
.vn-creed-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 4.25rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: oklch(var(--vn-foreground));
    text-wrap: balance;
    text-rendering: optimizeLegibility;
  }
/* Creed hero lead — the readable supporting line under the title. */
.vn-creed-lead {
    max-width: 44rem;
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 2vw, 1.375rem);
    font-weight: 400;
    line-height: 1.7;
    color: oklch(var(--vn-muted));
    text-wrap: balance;
  }
/* Creed section band — one of the three numbered blocks. Generous
     vertical rhythm so each block reads as its own chapter, never a
     wall of text. Alternates via .vn-band-void / .vn-band-void-2 /
     .vn-band-gold, applied alongside this class. */
.vn-creed-band {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4rem, 10vw, 8rem);
  }
/* The giant design heading — the 'riesige Design-Überschrift' that
     opens each of the three creed sections. Monumental Fraunces,
     deliberately larger than a normal section title so the three
     headings structure the whole page at a glance. */
.vn-creed-heading {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: oklch(var(--vn-foreground));
    text-wrap: balance;
    text-rendering: optimizeLegibility;
    text-align: center;
  }
.vn-band-gold .vn-creed-heading {
    color: oklch(var(--vn-gold-ink));
  }
/* The verbatim text block beneath a creed heading. Centered, with an
     elegant measure, generous line-height, and a clear rhythm between
     the stanza lines — the historical confession text is quoted 1:1,
     never reflowed into a dense wall. */
.vn-creed-text {
    max-width: 44rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    text-wrap: pretty;
    font-family: var(--font-body);
    font-size: clamp(1.125rem, 1.9vw, 1.3125rem);
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: 0.002em;
    color: oklch(var(--vn-muted));
  }
.vn-creed-text p {
    margin: 0;
  }
/* The closing 'Amen.' — set apart as the confession's final seal. */
.vn-creed-text p:last-child {
    margin-top: 1.25rem;
    font-family: var(--font-display);
    font-size: 1.15em;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: oklch(var(--vn-foreground));
  }
.vn-band-gold .vn-creed-text p:last-child {
    color: oklch(var(--vn-gold-ink));
  }
/* Verbatim scripture-grade emphasis inside the confession text. */
.vn-creed-text strong,
  .vn-creed-text em {
    color: oklch(var(--vn-foreground));
    font-weight: 600;
  }
.vn-band-gold .vn-creed-text,
  .vn-band-gold .vn-creed-text strong,
  .vn-band-gold .vn-creed-text em {
    color: oklch(var(--vn-gold-ink));
  }
.vn-band-gold .vn-creed-text {
    opacity: 0.82;
  }
/* Creed portrait/CTA block — the trust anchor at the foot of a creed
     page. Wraps the .vn-authority layout in a ruled footer zone so the
     page terminates with the framed portrait and a dominant WhatsApp
     CTA, never trailing off. */
.vn-creed-portrait-cta {
    position: relative;
    padding-block: clamp(4rem, 9vw, 7rem);
    border-top: 1px solid oklch(var(--vn-rule-soft));
  }
.\[overflow-wrap\:anywhere\] {
  overflow-wrap: anywhere;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans.woff2") format("woff2");
  font-display: swap;
}

/* Great Vibes — elegant script/cursive handwriting font (OFL-licensed),
   self-hosted as woff2 subsets. Used for the author signature on the
   Glaubensschritt page. latin-ext covers the umlaut "ü" in "Kühnle". */
@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/GreatVibes-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/GreatVibes-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lora — high-readability serif for the sermon blog body text. A classic
   book face with warm, humanist proportions that reads beautifully at
   length, ideal for the study-bible look. */
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/Lora.woff2") format("woff2");
  font-display: swap;
}

/* General Sans — elegant, refined sans-serif for the sermon blog headings.
   Clean and serious, it pairs with Lora for a minimalist study-bible
   register that stays consistent with the site's premium aesthetic. */
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/GeneralSans.woff2") format("woff2");
  font-display: swap;
}

/* Fraunces — a dramatic, editorial serif display face for the 'Die grosse
   Vision' theological manifesto page. Its high-contrast, slightly
   old-style proportions give scripture-grade headlines a prophetic,
   monumental gravitas that the secular Space Grotesk register cannot
   carry. Used ONLY inside the `.vision` scope so the rest of the site
   keeps its clean Space Grotesk/DM Sans identity. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces.woff2") format("woff2");
  font-display: swap;
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.last\:mb-0:last-child {
  margin-bottom: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-accent\/40:hover {
  border-color: oklch(var(--accent) / 0.4);
}
.hover\:border-accent\/70:hover {
  border-color: oklch(var(--accent) / 0.7);
}
.hover\:border-primary\/40:hover {
  border-color: oklch(var(--primary) / 0.4);
}
.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.hover\:text-\[oklch\(var\(--qv-foreground\)\)\]:hover {
  color: oklch(var(--qv-foreground));
}
.hover\:text-accent:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}
.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:no-underline:hover {
  text-decoration-line: none;
}
.hover\:shadow-card:hover {
  --tw-shadow: 0 1px 2px oklch(0.3 0.07 258 / 0.04), 0 8px 24px -12px oklch(0.3 0.07 258 / 0.14);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 8px 24px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-elevated:hover {
  --tw-shadow: 0 12px 32px -8px oklch(0.3 0.07 258 / 0.18);
  --tw-shadow-colored: 0 12px 32px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-obsidian-blue:hover {
  --tw-shadow: 0 14px 40px -16px oklch(0.6 0.16 255 / 0.4);
  --tw-shadow-colored: 0 14px 40px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-card:hover {
  --tw-shadow-color: oklch(var(--card));
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:brightness-105:hover {
  --tw-brightness: brightness(1.05);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:border-ld-blue\/60:hover {
    border-color: oklch(var(--ld-blue) / 0.6);
  }
.hover\:border-lux-gold:hover {
    border-color: oklch(var(--lux-border-gold));
  }
.hover\:text-kc-primary:hover {
    color: oklch(var(--kc-primary));
  }
.hover\:text-bl-accent:hover {
    color: oklch(var(--bl-accent));
  }
.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-accent:focus-visible {
  --tw-ring-offset-color: oklch(var(--accent) / 1);
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: oklch(var(--background));
}
.focus-visible\:ring-offset-card:focus-visible {
  --tw-ring-offset-color: oklch(var(--card));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group:hover .group-hover\:-translate-y-0\.5 {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:text-accent-orange {
    color: oklch(var(--accent-orange));
  }
.group:hover .group-hover\:text-bl-accent-deep {
    color: oklch(var(--bl-accent-deep));
  }
@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}
.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}
@media (min-width: 640px) {

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}
@media (min-width: 768px) {

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-start-auto {
    grid-column-start: auto;
  }

  .md\:mt-10 {
    margin-top: 2.5rem;
  }

  .md\:mt-12 {
    margin-top: 3rem;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:size-72 {
    width: 18rem;
    height: 18rem;
  }

  .md\:h-24 {
    height: 6rem;
  }

  .md\:w-px {
    width: 1px;
  }

  .md\:min-w-20 {
    min-width: 5rem;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

  .md\:grid-cols-\[minmax\(0\2c 20rem\)_1fr_minmax\(0\2c 20rem\)\] {
    grid-template-columns: minmax(0,20rem) 1fr minmax(0,20rem);
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-start {
    justify-content: flex-start;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:gap-14 {
    gap: 3.5rem;
  }

  .md\:gap-3 {
    gap: 0.75rem;
  }

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .md\:justify-self-auto {
    justify-self: auto;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:p-14 {
    padding: 3.5rem;
  }

  .md\:p-7 {
    padding: 1.75rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .md\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .md\:py-36 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .md\:pb-20 {
    padding-bottom: 5rem;
  }

  .md\:pb-24 {
    padding-bottom: 6rem;
  }

  .md\:pb-28 {
    padding-bottom: 7rem;
  }

  .md\:pt-20 {
    padding-top: 5rem;
  }

  .md\:pt-28 {
    padding-top: 7rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:leading-8 {
    line-height: 2rem;
  }

  .md\:leading-9 {
    line-height: 2.25rem;
  }
}
@media (min-width: 1024px) {

  .lg\:order-first {
    order: -9999;
  }

  .lg\:order-none {
    order: 0;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:row-span-2 {
    grid-row: span 2 / span 2;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:size-80 {
    width: 20rem;
    height: 20rem;
  }

  .lg\:max-w-none {
    max-width: none;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.1fr_0\.9fr\] {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .lg\:grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .lg\:grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .lg\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:justify-self-end {
    justify-self: end;
  }

  .lg\:text-left {
    text-align: left;
  }
}
@media (min-width: 1280px) {

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .xl\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .xl\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}
.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}
.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}
a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}