/*
 * b'steuern — Webfonts
 * FeatureDeck (Display) + General Sans (Body / UI)
 * Binaries shipped from assets/fonts/. Licensed separately — see readme.
 */

/* ─── FeatureDeck — Display / Headlines ─── */
/* ─── General Sans — Body / UI ─── */
/*
 * b'steuern — Color Tokens
 * Regel: Nie zwei gesättigte Farben in einer Komposition.
 * Immer eine Akzentfarbe + Cream + Ink.
 */

:root {
  /* ─── Webflow-Integration ─── */
  --wf-nav-h: 80px;   /* Höhe/Offset der globalen .w-nav — per JS live aus getBoundingClientRect().bottom gesetzt */
  --sel-h:    60px;   /* Höhe des mobilen Section-Selectors (≤720px) */

  /* ─── PRIMARY ─── */
  --color-indigo:        #3D2BD5;   /* Royal Indigo — Primary Brand */
  --color-indigo-50:     #9E94EA;   /* Indigo 50% tint */
  --color-indigo-tint:   #ECEAFB;   /* very light indigo surface */
  --color-deep-blue:     #0E0C1C;   /* Deep Blue — primary text */
  --color-champagne:     #F9F4EC;   /* Champagne — primary background */

  /* ─── ACCENT ─── */
  --color-yellow:        #F6DF35;   /* Happy Lemon — Selbststarter */
  --color-yellow-50:     #FBEF99;   /* Happy Lemon 50% tint */
  --color-yellow-tint:   #FBF1AE;   /* subtle yellow surface */
  --color-pink:          #FF0670;   /* Crimson — GbR, danger */
  --color-fandango:      #C531A4;   /* Fandango / Purple */
  --color-teal:          #00A896;   /* Persian Turquoise — Partnerschaft */
  --color-lavender:      #8B85E8;   /* Lavender — Editorial / Blog */
  --color-coral:         #E37383;   /* Pink Coral */

  /* ─── INK / NEUTRAL (text on light) ─── */
  --color-ink:           #0E0C1C;
  --color-ink-90:        rgba(14, 12, 28, 0.92);
  --color-ink-70:        rgba(14, 12, 28, 0.68);
  --color-ink-55:        rgba(14, 12, 28, 0.55);
  --color-ink-40:        rgba(14, 12, 28, 0.38);
  --color-ink-20:        rgba(14, 12, 28, 0.18);
  --color-ink-line:      rgba(14, 12, 28, 0.09);

  /* ─── SURFACES ─── */
  --color-paper:         #FFFFFF;
  --color-cream:         #F5EFE3;
  --color-cream-deep:    #ECE0C7;

  /* ─── SEMANTIC ─── */
  --color-success:       #1A8A5A;
  --color-error:         #FF0670;
  --color-warning:       #F6DF35;
  --color-info:          #3D2BD5;

  /* ─── SEGMENT SEMANTIC (Bildsprache) ─── */
  --seg-selbststaendige: var(--color-yellow);     /* Einzelunternehmer */
  --seg-partnerschaft:   var(--color-teal);       /* Personengesellschaft */
  --seg-gbr:             var(--color-pink);        /* GbR */
  --seg-holding:         var(--color-indigo);      /* Holding, markenweit */
  --seg-editorial:       var(--color-lavender);    /* Blog, informativ */

  /* ─── BILDSPRACHE · Section-Bild-System (siehe imagery-section-system.md) ───
   * Pro Section: ein Akzent-Ton (Silhouette / Hinter-Zeile / Marker-Stroke)
   * + ein heller Grund-Ton (Bauhaus-Form / Halftone-Grund-Ton).
   * Werte mit `*-soft` Suffix sind tonal abgeleitet und stehen als Platzhalter,
   * bis das visuelle Referenz-Asset final freigegeben ist.
   */
  --sec-01-accent:       var(--color-indigo);      /* Steuererklärung */
  --sec-01-soft:         #D9D4F8;                  /* [Platzhalter] light indigo */

  --sec-02-accent:       var(--color-teal);        /* Jahresabschluss */
  --sec-02-soft:         #CFEDE7;                  /* [Platzhalter] light teal */

  --sec-03-accent:       var(--color-yellow);      /* Buchhaltung */
  --sec-03-accent-ink:   #E9CB2E;                  /* [Platzhalter] Silhouette-Variante (kontrast-tief) */
  --sec-03-soft:         #FBEFA8;                  /* [Platzhalter] light yellow */

  --sec-04-accent:       var(--color-pink);        /* Digitale Steuerberatung */
  --sec-04-soft:         #FFD9E8;                  /* [Platzhalter] light crimson */

  --sec-05-accent:       var(--color-fandango);    /* Vorsorge */
  --sec-05-soft:         #ECD3E6;                  /* [Platzhalter] light fandango */

  --sec-06-accent:       #2A2580;                  /* [Platzhalter] Holding (Deep Blue-Akzent) */
  --sec-06-soft:         #CFD0E8;                  /* [Platzhalter] light deep blue */

  /* Marker-Spec (Outline-Stempel, §9): */
  --marker-stroke:       2px;
  --marker-fill:         var(--color-cream);
  --marker-icon-stroke:  1.75px;
  --marker-icon-box:     20px;

  /* ─── SEMANTIC ALIASES ─── */
  --bg-page:             var(--color-cream);
  --bg-page-alt:         var(--color-champagne);
  --surface-card:        var(--color-paper);
  --surface-raised:      var(--color-paper);
  --surface-sunken:      var(--color-cream-deep);
  --surface-invert:      var(--color-indigo);

  --text-primary:        var(--color-ink);
  --text-body:           var(--color-ink-70);
  --text-muted:          var(--color-ink-55);
  --text-faint:          var(--color-ink-40);
  --text-on-invert:      var(--color-paper);
  --text-link:           var(--color-indigo);

  --border-subtle:       var(--color-ink-line);
  --border-default:      var(--color-ink-20);
  --border-strong:       var(--color-ink-40);

  --focus-ring:          var(--color-indigo);
}
/*
 * b'steuern — Typography Tokens
 * FeatureDeck (Display) + General Sans (Body / UI)
 */

:root {
  /* ─── FAMILIES ─── */
  --font-display: 'FeatureDeck', 'Times New Roman', serif;   /* Headlines, prices, logo-text */
  --font-body:    'General Sans', system-ui, -apple-system, sans-serif; /* Body, UI, nav */

  /* ─── SIZE SCALE ─── */
  --text-xs:    0.6875rem;   /* 11px — labels, badges, caps */
  --text-sm:    0.8125rem;   /* 13px — nav, captions, footnotes */
  --text-base:  1rem;        /* 16px — body */
  --text-md:    1.0625rem;   /* 17px — subtext, lead */
  --text-lg:    1.125rem;    /* 18px — H3, card titles */
  --text-xl:    1.5rem;      /* 24px — H2 small */
  --text-2xl:   2rem;        /* 32px — H2 */
  --text-3xl:   clamp(2rem, 4vw, 3rem);     /* H2 display */
  --text-4xl:   clamp(2.75rem, 6vw, 5rem);  /* H1 hero */

  /* ─── WEIGHTS ─── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── LINE HEIGHT ─── */
  --leading-tight:   1.04;
  --leading-snug:    1.1;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   1.8;

  /* ─── LETTER SPACING ─── */
  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.035em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.07em;
  --tracking-wider:  0.10em;

  /* ─── SEMANTIC TYPE ROLES ─── */
  --type-hero-family:    var(--font-display);
  --type-hero-weight:    var(--weight-medium);
  --type-display-family: var(--font-display);
  --type-body-family:    var(--font-body);
  --type-ui-family:      var(--font-body);

  /* ─── HERO TYPE SIZES (Landing Page) ─── */
  --type-hero-headline-size:  3.25rem;   /* 52px — Desktop H1 hero */
  --type-hero-headline-line:  var(--leading-tight);
  --type-hero-headline-track: var(--tracking-snug);
  --type-hero-subhead-size:   1rem;      /* 16px — Sub-headline under hero H1 */
  --type-hero-subhead-line:   var(--leading-normal);
  --type-hero-subhead-weight: var(--weight-regular);

  /* Mobile fallbacks */
  --type-hero-headline-size-mobile: 2.375rem; /* 38px */
}

@media (max-width: 640px) {
  :root {
    --type-hero-headline-size: var(--type-hero-headline-size-mobile);
  }
}
/*
 * b'steuern — Spacing, Radius, Shadow, Layout, Z-index
 * 4px base scale. Shape rule: border-radius near-zero in the product world.
 */

:root {
  /* ─── SPACING (4px base) ─── */
  --s-1:  0.25rem;   /*  4px */
  --s-2:  0.5rem;    /*  8px */
  --s-3:  0.75rem;   /* 12px */
  --s-4:  1rem;      /* 16px */
  --s-5:  1.25rem;   /* 20px */
  --s-6:  1.5rem;    /* 24px */
  --s-8:  2rem;      /* 32px */
  --s-10: 2.5rem;    /* 40px */
  --s-12: 3rem;      /* 48px */
  --s-16: 4rem;      /* 64px */
  --s-20: 5rem;      /* 80px */
  --s-24: 6rem;      /* 96px */

  /* ─── BORDER RADIUS — strictly minimal ─── */
  --radius-none:  0;
  --radius-sm:    2px;    /* buttons, badges, cards — default */
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-full:  9999px; /* pills only */

  /* ─── BORDER WIDTH ─── */
  --border-hair:  1px;
  --border-thick: 1.5px;
  --border-accent: 3px;   /* left-accent on highlight boxes */

  /* ─── SHADOWS — soft, low, ink-tinted ─── */
  --shadow-xs:  0 1px 1px rgba(14, 12, 28, 0.03);
  --shadow-sm:  0 1px 2px rgba(14, 12, 28, 0.04),
                0 2px 6px rgba(14, 12, 28, 0.04);
  --shadow-md:  0 2px 4px rgba(14, 12, 28, 0.04),
                0 8px 16px -4px rgba(14, 12, 28, 0.06),
                0 16px 32px -8px rgba(14, 12, 28, 0.08);
  --shadow-nav: 0 1px 2px rgba(14, 12, 28, 0.04),
                0 4px 12px -4px rgba(14, 12, 28, 0.08);

  /* ─── LAYOUT ─── */
  --container-max:   1280px;
  --container-pad:   var(--s-8);
  --nav-height:      60px;

  /* ─── Z-INDEX ─── */
  --z-base:    0;   /* @kind other */
  --z-raised:  10;  /* @kind other */
  --z-nav:     100; /* @kind other */
  --z-overlay: 200; /* @kind other */
  --z-modal:   300; /* @kind other */
  --z-toast:   400; /* @kind other */
}
/*
 * b'steuern — Motion Tokens + Utilities
 * Präzise, nicht verspielt. Bewegung kommuniziert Klarheit.
 * Fast on hover, controlled on entry, springy on modals.
 */

:root {
  /* ─── EASING ─── */
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);       /* @kind other */
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --ease-linear:  linear;                            /* @kind other */

  /* ─── DURATION ─── */
  --dur-instant:  80ms;    /* @kind other */
  --dur-fast:     150ms;   /* @kind other */
  --dur-base:     220ms;   /* @kind other */
  --dur-slow:     350ms;   /* @kind other */
  --dur-slower:   500ms;   /* @kind other */
}

/* ─── KEYFRAMES ─── */
@keyframes bs-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bs-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bs-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── ENTRANCE UTILITIES ─── */
.bs-animate-fade-up { animation: bs-fade-up var(--dur-slow) var(--ease-out) both; }
.bs-animate-fade-in { animation: bs-fade-in var(--dur-base) var(--ease-out) both; }
.bs-animate-scale-in { animation: bs-scale-in var(--dur-slow) var(--ease-spring) both; }

/* ─── STAGGER ─── */
.bs-stagger > *:nth-child(1) { animation-delay: 0ms; }
.bs-stagger > *:nth-child(2) { animation-delay: 60ms; }
.bs-stagger > *:nth-child(3) { animation-delay: 120ms; }
.bs-stagger > *:nth-child(4) { animation-delay: 180ms; }
.bs-stagger > *:nth-child(5) { animation-delay: 240ms; }
.bs-stagger > *:nth-child(6) { animation-delay: 300ms; }

/* ─── HOVER UTILITIES ─── */
.bs-hover-lift {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.bs-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.bs-hover-dim { transition: opacity var(--dur-fast) var(--ease-out); }
.bs-hover-dim:hover { opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  .bs-animate-fade-up,
  .bs-animate-fade-in,
  .bs-animate-scale-in { animation: none; }
}
/*
 * b'steuern — Design System
 * Global CSS entry point. Consumers link this one file.
 * Keep this as @import lines only.
 */

/*
 * b'steuern — Webfonts
 * FeatureDeck (Display) + General Sans (Body / UI)
 * Binaries shipped from assets/fonts/. Licensed separately — see readme.
 */

/* ─── FeatureDeck — Display / Headlines ─── */
/* ─── General Sans — Body / UI ─── */
/*
 * b'steuern — Color Tokens
 * Regel: Nie zwei gesättigte Farben in einer Komposition.
 * Immer eine Akzentfarbe + Cream + Ink.
 */

:root {
  /* ─── PRIMARY ─── */
  --color-indigo:        #3D2BD5;   /* Royal Indigo — Primary Brand */
  --color-indigo-50:     #9E94EA;   /* Indigo 50% tint */
  --color-indigo-tint:   #ECEAFB;   /* very light indigo surface */
  --color-deep-blue:     #0E0C1C;   /* Deep Blue — primary text */
  --color-champagne:     #F9F4EC;   /* Champagne — primary background */

  /* ─── ACCENT ─── */
  --color-yellow:        #F6DF35;   /* Happy Lemon — Selbststarter */
  --color-yellow-50:     #FBEF99;   /* Happy Lemon 50% tint */
  --color-yellow-tint:   #FBF1AE;   /* subtle yellow surface */
  --color-pink:          #FF0670;   /* Crimson — GbR, danger */
  --color-fandango:      #C531A4;   /* Fandango / Purple */
  --color-teal:          #00A896;   /* Persian Turquoise — Partnerschaft */
  --color-lavender:      #8B85E8;   /* Lavender — Editorial / Blog */
  --color-coral:         #E37383;   /* Pink Coral */

  /* ─── INK / NEUTRAL (text on light) ─── */
  --color-ink:           #0E0C1C;
  --color-ink-90:        rgba(14, 12, 28, 0.92);
  --color-ink-70:        rgba(14, 12, 28, 0.68);
  --color-ink-55:        rgba(14, 12, 28, 0.55);
  --color-ink-40:        rgba(14, 12, 28, 0.38);
  --color-ink-20:        rgba(14, 12, 28, 0.18);
  --color-ink-line:      rgba(14, 12, 28, 0.09);

  /* ─── SURFACES ─── */
  --color-paper:         #FFFFFF;
  --color-cream:         #F5EFE3;
  --color-cream-deep:    #ECE0C7;

  /* ─── SEMANTIC ─── */
  --color-success:       #1A8A5A;
  --color-error:         #FF0670;
  --color-warning:       #F6DF35;
  --color-info:          #3D2BD5;

  /* ─── SEGMENT SEMANTIC (Bildsprache) ─── */
  --seg-selbststaendige: var(--color-yellow);     /* Einzelunternehmer */
  --seg-partnerschaft:   var(--color-teal);       /* Personengesellschaft */
  --seg-gbr:             var(--color-pink);        /* GbR */
  --seg-holding:         var(--color-indigo);      /* Holding, markenweit */
  --seg-editorial:       var(--color-lavender);    /* Blog, informativ */

  /* ─── BILDSPRACHE · Section-Bild-System (siehe imagery-section-system.md) ───
   * Pro Section: ein Akzent-Ton (Silhouette / Hinter-Zeile / Marker-Stroke)
   * + ein heller Grund-Ton (Bauhaus-Form / Halftone-Grund-Ton).
   * Werte mit `*-soft` Suffix sind tonal abgeleitet und stehen als Platzhalter,
   * bis das visuelle Referenz-Asset final freigegeben ist.
   */
  --sec-01-accent:       var(--color-indigo);      /* Steuererklärung */
  --sec-01-soft:         #D9D4F8;                  /* [Platzhalter] light indigo */

  --sec-02-accent:       var(--color-teal);        /* Jahresabschluss */
  --sec-02-soft:         #CFEDE7;                  /* [Platzhalter] light teal */

  --sec-03-accent:       var(--color-yellow);      /* Buchhaltung */
  --sec-03-accent-ink:   #E9CB2E;                  /* [Platzhalter] Silhouette-Variante (kontrast-tief) */
  --sec-03-soft:         #FBEFA8;                  /* [Platzhalter] light yellow */

  --sec-04-accent:       var(--color-pink);        /* Digitale Steuerberatung */
  --sec-04-soft:         #FFD9E8;                  /* [Platzhalter] light crimson */

  --sec-05-accent:       var(--color-fandango);    /* Vorsorge */
  --sec-05-soft:         #ECD3E6;                  /* [Platzhalter] light fandango */

  --sec-06-accent:       #2A2580;                  /* [Platzhalter] Holding (Deep Blue-Akzent) */
  --sec-06-soft:         #CFD0E8;                  /* [Platzhalter] light deep blue */

  /* Marker-Spec (Outline-Stempel, §9): */
  --marker-stroke:       2px;
  --marker-fill:         var(--color-cream);
  --marker-icon-stroke:  1.75px;
  --marker-icon-box:     20px;

  /* ─── SEMANTIC ALIASES ─── */
  --bg-page:             var(--color-cream);
  --bg-page-alt:         var(--color-champagne);
  --surface-card:        var(--color-paper);
  --surface-raised:      var(--color-paper);
  --surface-sunken:      var(--color-cream-deep);
  --surface-invert:      var(--color-indigo);

  --text-primary:        var(--color-ink);
  --text-body:           var(--color-ink-70);
  --text-muted:          var(--color-ink-55);
  --text-faint:          var(--color-ink-40);
  --text-on-invert:      var(--color-paper);
  --text-link:           var(--color-indigo);

  --border-subtle:       var(--color-ink-line);
  --border-default:      var(--color-ink-20);
  --border-strong:       var(--color-ink-40);

  --focus-ring:          var(--color-indigo);
}

/*
 * b'steuern — Typography Tokens
 * FeatureDeck (Display) + General Sans (Body / UI)
 */

:root {
  /* ─── FAMILIES ─── */
  --font-display: 'FeatureDeck', 'Times New Roman', serif;   /* Headlines, prices, logo-text */
  --font-body:    'General Sans', system-ui, -apple-system, sans-serif; /* Body, UI, nav */

  /* ─── SIZE SCALE ─── */
  --text-xs:    0.6875rem;   /* 11px — labels, badges, caps */
  --text-sm:    0.8125rem;   /* 13px — nav, captions, footnotes */
  --text-base:  1rem;        /* 16px — body */
  --text-md:    1.0625rem;   /* 17px — subtext, lead */
  --text-lg:    1.125rem;    /* 18px — H3, card titles */
  --text-xl:    1.5rem;      /* 24px — H2 small */
  --text-2xl:   2rem;        /* 32px — H2 */
  --text-3xl:   clamp(2rem, 4vw, 3rem);     /* H2 display */
  --text-4xl:   clamp(2.75rem, 6vw, 5rem);  /* H1 hero */

  /* ─── WEIGHTS ─── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── LINE HEIGHT ─── */
  --leading-tight:   1.04;
  --leading-snug:    1.1;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   1.8;

  /* ─── LETTER SPACING ─── */
  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.035em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.07em;
  --tracking-wider:  0.10em;

  /* ─── SEMANTIC TYPE ROLES ─── */
  --type-hero-family:    var(--font-display);
  --type-hero-weight:    var(--weight-medium);
  --type-display-family: var(--font-display);
  --type-body-family:    var(--font-body);
  --type-ui-family:      var(--font-body);

  /* ─── HERO TYPE SIZES (Landing Page) ─── */
  --type-hero-headline-size:  3.25rem;   /* 52px — Desktop H1 hero */
  --type-hero-headline-line:  var(--leading-tight);
  --type-hero-headline-track: var(--tracking-snug);
  --type-hero-subhead-size:   1rem;      /* 16px — Sub-headline under hero H1 */
  --type-hero-subhead-line:   var(--leading-normal);
  --type-hero-subhead-weight: var(--weight-regular);

  /* Mobile fallbacks */
  --type-hero-headline-size-mobile: 2.375rem; /* 38px */
}

@media (max-width: 640px) {
  :root {
    --type-hero-headline-size: var(--type-hero-headline-size-mobile);
  }
}

/*
 * b'steuern — Spacing, Radius, Shadow, Layout, Z-index
 * 4px base scale. Shape rule: border-radius near-zero in the product world.
 */

:root {
  /* ─── SPACING (4px base) ─── */
  --s-1:  0.25rem;   /*  4px */
  --s-2:  0.5rem;    /*  8px */
  --s-3:  0.75rem;   /* 12px */
  --s-4:  1rem;      /* 16px */
  --s-5:  1.25rem;   /* 20px */
  --s-6:  1.5rem;    /* 24px */
  --s-8:  2rem;      /* 32px */
  --s-10: 2.5rem;    /* 40px */
  --s-12: 3rem;      /* 48px */
  --s-16: 4rem;      /* 64px */
  --s-20: 5rem;      /* 80px */
  --s-24: 6rem;      /* 96px */

  /* ─── BORDER RADIUS — strictly minimal ─── */
  --radius-none:  0;
  --radius-sm:    2px;    /* buttons, badges, cards — default */
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-full:  9999px; /* pills only */

  /* ─── BORDER WIDTH ─── */
  --border-hair:  1px;
  --border-thick: 1.5px;
  --border-accent: 3px;   /* left-accent on highlight boxes */

  /* ─── SHADOWS — soft, low, ink-tinted ─── */
  --shadow-xs:  0 1px 1px rgba(14, 12, 28, 0.03);
  --shadow-sm:  0 1px 2px rgba(14, 12, 28, 0.04),
                0 2px 6px rgba(14, 12, 28, 0.04);
  --shadow-md:  0 2px 4px rgba(14, 12, 28, 0.04),
                0 8px 16px -4px rgba(14, 12, 28, 0.06),
                0 16px 32px -8px rgba(14, 12, 28, 0.08);
  --shadow-nav: 0 1px 2px rgba(14, 12, 28, 0.04),
                0 4px 12px -4px rgba(14, 12, 28, 0.08);

  /* ─── LAYOUT ─── */
  --container-max:   1280px;
  --container-pad:   var(--s-8);
  --nav-height:      60px;

  /* ─── Z-INDEX ─── */
  --z-base:    0;   /* @kind other */
  --z-raised:  10;  /* @kind other */
  --z-nav:     100; /* @kind other */
  --z-overlay: 200; /* @kind other */
  --z-modal:   300; /* @kind other */
  --z-toast:   400; /* @kind other */
}

/*
 * b'steuern — Motion Tokens + Utilities
 * Präzise, nicht verspielt. Bewegung kommuniziert Klarheit.
 * Fast on hover, controlled on entry, springy on modals.
 */

:root {
  /* ─── EASING ─── */
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);       /* @kind other */
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --ease-linear:  linear;                            /* @kind other */

  /* ─── DURATION ─── */
  --dur-instant:  80ms;    /* @kind other */
  --dur-fast:     150ms;   /* @kind other */
  --dur-base:     220ms;   /* @kind other */
  --dur-slow:     350ms;   /* @kind other */
  --dur-slower:   500ms;   /* @kind other */
}

/* ─── KEYFRAMES ─── */
@keyframes bs-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bs-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bs-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── ENTRANCE UTILITIES ─── */
.bs-animate-fade-up { animation: bs-fade-up var(--dur-slow) var(--ease-out) both; }
.bs-animate-fade-in { animation: bs-fade-in var(--dur-base) var(--ease-out) both; }
.bs-animate-scale-in { animation: bs-scale-in var(--dur-slow) var(--ease-spring) both; }

/* ─── STAGGER ─── */
.bs-stagger > *:nth-child(1) { animation-delay: 0ms; }
.bs-stagger > *:nth-child(2) { animation-delay: 60ms; }
.bs-stagger > *:nth-child(3) { animation-delay: 120ms; }
.bs-stagger > *:nth-child(4) { animation-delay: 180ms; }
.bs-stagger > *:nth-child(5) { animation-delay: 240ms; }
.bs-stagger > *:nth-child(6) { animation-delay: 300ms; }

/* ─── HOVER UTILITIES ─── */
.bs-hover-lift {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.bs-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.bs-hover-dim { transition: opacity var(--dur-fast) var(--ease-out); }
.bs-hover-dim:hover { opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  .bs-animate-fade-up,
  .bs-animate-fade-in,
  .bs-animate-scale-in { animation: none; }
}


/* ─────────────────────────────────────────────────────────────
 * Brand Atom · Check Glyph (square caps, miter joins)
 * Verbindlich für alle ✓-Auszeichnungen außerhalb der React-Components.
 *
 * Markup:
 *   <svg class="bs-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
 *        stroke-width="2.5" stroke-linecap="square" stroke-linejoin="miter"
 *        aria-hidden="true">
 *     <path d="M5 12l5 5L20 6"/>
 *   </svg>
 *
 * Default-Größe 1em, skaliert über `font-size` oder explizite width/height.
 * Farbe via `color:` (currentColor).
 * ───────────────────────────────────────────────────────────── */
.bs-check {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
}

/* ─────────────────────────────────────────────────────────────
 * Bildsprache · Section-Bild-System
 * Vollständige Spezifikation: imagery-section-system.md
 *
 * Zwei verbindliche Foreground-Atome pro Section-Bild:
 *   .bs-marker   — Outline-Stempel (§9): Rechteck, 2px Akzent-Stroke,
 *                  Cream-Fill, 1 Lucide-Icon (eckige Caps) + 1–2 Worte
 *                  General Sans Medium. Outcome, faktisch, nominal.
 *   .bs-backline — Hinter-Zeile (§10): Akzent-Block mit weißer
 *                  General Sans, ~3–6 Worte gesprochene Sprache.
 *                  Wird zu 25–40 % von der Figur verdeckt.
 *
 * Die Sektionsfarbe wird per `--accent` gesetzt — entweder inline
 * (style="--accent: var(--sec-01-accent)") oder über eine Section-
 * Klasse, die `--accent` overridet. Default = Indigo.
 *
 * Gelb-Section (sec-03): wegen Kontrasts auf Cream wechseln Stroke +
 * Icon-Farbe auf Ink — `.bs-marker.is-yellow` setzt das automatisch.
 * ───────────────────────────────────────────────────────────── */

.bs-marker {
  --accent: var(--color-indigo);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--marker-fill, var(--color-cream));
  border: var(--marker-stroke, 2px) solid var(--accent);
  color: var(--accent);
  padding: 8px 12px;
  border-radius: 0;
  font-family: var(--font-body, 'General Sans', sans-serif);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
}
.bs-marker > svg {
  width: var(--marker-icon-box, 20px);
  height: var(--marker-icon-box, 20px);
  stroke: currentColor;
  stroke-width: var(--marker-icon-stroke, 1.75);
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
  flex-shrink: 0;
  display: block;
}
.bs-marker.is-yellow {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.bs-backline {
  --accent: var(--color-indigo);
  display: inline-block;
  background: var(--accent);
  color: var(--color-paper);
  padding: 10px 16px;
  border-radius: 0;
  font-family: var(--font-body, 'General Sans', sans-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
}
.bs-backline.is-yellow {
  color: var(--color-ink);
}

/* ─────────────────────────────────────────────────────────────
 * Brand Atom · Eyebrow on Tint (`bs-eyebrow`)
 * Verbindlicher Stil für Section-Eyebrows (Hero, Group-Header,
 * Card-Header). General Sans 500, Caps, Letter-Spacing wide.
 *
 * WICHTIG · Hintergrund-Regel:
 *   Die Tint-Farbe ist KEIN Default — sie wird durch den
 *   Seiten-/Card-Hintergrund bestimmt:
 *
 *     Page-BG cream  → Eyebrow-BG paper (white)        ← default
 *     Page-BG paper  → Eyebrow-BG indigo-tint
 *     Page-BG indigo → Eyebrow-BG paper, Text indigo
 *
 *   Steuerung über Modifier `.on-cream` / `.on-paper` / `.on-indigo`,
 *   oder direkt über die CSS-Variable `--bs-eyebrow-bg`.
 *
 * Markup:
 *   <span class="bs-eyebrow on-cream">Transparente Preise</span>
 *   <span class="bs-eyebrow on-paper">Für Privatpersonen</span>
 *
 * Modifier `.is-plain` für die randlose Variante (kein Tint).
 * Modifier `.is-yellow` / `.is-teal` / `.is-pink` für
 * segment-codierte Varianten (Selbststarter / Partnerschaft / GbR).
 * ───────────────────────────────────────────────────────────── */
.bs-eyebrow {
  --bs-eyebrow-bg: var(--color-paper);  /* default fits cream pages */
  --bs-eyebrow-color: var(--color-indigo);
  display: inline-block;
  font-family: var(--font-body, 'General Sans', sans-serif);
  font-weight: 500;
  font-size: var(--text-xs, 0.6875rem);
  line-height: 1;
  letter-spacing: var(--tracking-wide, 0.07em);
  text-transform: uppercase;
  color: var(--bs-eyebrow-color);
  background: var(--bs-eyebrow-bg);
  padding: 8px 12px;
  border-radius: 0;
}
.bs-eyebrow.on-cream  { --bs-eyebrow-bg: var(--color-paper); }
.bs-eyebrow.on-paper  { --bs-eyebrow-bg: var(--color-indigo-tint); }
.bs-eyebrow.on-indigo { --bs-eyebrow-bg: var(--color-paper); --bs-eyebrow-color: var(--color-indigo); }
.bs-eyebrow.is-plain {
  background: transparent;
  padding: 0;
}
.bs-eyebrow.is-yellow {
  --bs-eyebrow-color: var(--color-ink);
  --bs-eyebrow-bg: var(--color-yellow-tint);
}
.bs-eyebrow.is-teal {
  --bs-eyebrow-color: var(--color-teal);
  --bs-eyebrow-bg: rgba(0, 168, 150, 0.12);
}
.bs-eyebrow.is-pink {
  --bs-eyebrow-color: var(--color-pink);
  --bs-eyebrow-bg: rgba(255, 6, 112, 0.10);
}

  /* ════════════════════════════════════════════════════════════
   * Preise und Gebühren — b'steuern Subpage
   * Alle Werte aus dem Design-System; General Sans = 500 (Projekt-Regel).
   * ════════════════════════════════════════════════════════════ */
  :root {
    --nav-h: 0px;
    --row-light: var(--color-paper);
    --row-dark:  var(--color-cream);
    --inset:     var(--s-3);   /* dunkle Zeilen nicht randabfallend */
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--color-cream);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-weight: 500;                 /* General Sans = 500 */
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--color-yellow); color: var(--color-ink); }

  .wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
  }

  /* ── HERO ───────────────────────────────────────────────────── */
  .hero { padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); }
  .hero-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-indigo);
    margin-bottom: var(--s-4);
    background: var(--color-paper);
    padding: 7px 12px;
    border: 1px solid var(--color-ink-line);
  }
  .hero h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 7vw, 4.75rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--s-3);
    color: var(--color-ink);
  }
  .hero p {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(var(--text-md), 2.1vw, 1.375rem);
    line-height: var(--leading-normal);
    color: var(--color-ink-70);
    margin: 0 0 var(--s-8);
    max-width: 56ch;
  }
  .hero-meta {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-55);
    border-top: 1px solid var(--color-ink-line);
    padding-top: var(--s-3);
  }

  /* ── INLINE ANCHOR NAV (am Seitenkopf, nicht sticky — scrollt natürlich raus) ── */
  .anchor-nav {
    background: transparent;
    padding: var(--s-5) 0;
  }
  .anchor-nav .wrap {
    display: flex;
    justify-content: center;
  }

  /* ── MINI ANCHOR NAV (fixed, slidet beim Hochscrollen rein) ── */
  .anchor-mini {
    position: fixed;
    top: var(--wf-nav-h); left: 0; right: 0;
    z-index: var(--z-nav);
    background: transparent;
    padding: 0;
    transform: translateY(calc(-100% - var(--wf-nav-h)));
    transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
  }
  .anchor-mini.is-visible {
    transform: translateY(0);
  }
  .anchor-mini .wrap {
    display: flex;
    justify-content: center;
    background: transparent;
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 0;
  }
  .anchor-mini-inner {
    display: flex;
    justify-content: center;
    background: transparent;
    border-bottom: 0;
    padding: var(--s-3) 0;
  }
  .anchor-mini .anchor-tabbar {
    padding: 3px;
    box-shadow: none;
  }
  .anchor-mini .anchor-link {
    padding: var(--s-2) var(--s-4);
    font-size: var(--text-sm);
    gap: 8px;
  }
  .anchor-mini .anchor-link .ico,
  .anchor-mini .anchor-link .ico svg {
    width: 16px;
    height: 16px;
  }
  body:has(.anchor-mini.is-visible) {
    --nav-h: 60px;
  }
  .anchor-tabbar {
    display: inline-flex;
    background: var(--color-paper);
    border: 1px solid var(--color-ink-line);
    padding: 5px;
    box-shadow:
      0 1px 2px rgba(14, 12, 28, 0.04),
      0 8px 20px -6px rgba(14, 12, 28, 0.08);
    transform-origin: center top;
    transition: transform 320ms cubic-bezier(.4, 0, .2, 1), padding 320ms cubic-bezier(.4, 0, .2, 1), box-shadow 240ms ease;
  }
  .anchor-nav.is-docked .anchor-tabbar {
    transform: scale(0.78);
    padding: 3px;
    box-shadow: 0 1px 2px rgba(14, 12, 28, 0.06);
  }
  .anchor-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--color-ink);
    text-decoration: none;
    padding: var(--s-4) var(--s-6);
    cursor: pointer;
    transition: background var(--dur-fast, 150ms) ease, color var(--dur-fast, 150ms) ease;
  }
  /* Label-Variants entfernt — nur noch volle Labels */
  .anchor-link:hover:not(.is-current) { background: var(--color-cream); }
  .anchor-link.is-current { background: var(--color-ink); color: var(--color-paper); }
  .anchor-link:focus-visible { outline: 2px solid var(--color-indigo); outline-offset: 2px; }

  /* Icon-slot — sichtbar nur bei Hover oder is-current, klappt sanft auf */
  .anchor-link .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    overflow: hidden;
    transition: width 220ms cubic-bezier(.2,.7,.2,1), height 220ms ease, opacity 160ms ease, margin-right 220ms cubic-bezier(.2,.7,.2,1);
    flex-shrink: 0;
  }
  .anchor-link .ico svg {
    width: 20px; height: 20px; display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
    fill: none;
  }
  .anchor-link:not(.is-current):not(:hover):not(:focus-visible) .ico {
    width: 0;
    opacity: 0;
    margin-right: -10px;
  }

  /* ── GROUP (one full pricing table) ─────────────────────────── */
  .group {
    padding: clamp(56px, 8vw, 112px) 0 var(--s-12);
    scroll-margin-top: calc(var(--wf-nav-h) + var(--nav-h) + var(--s-8));
  }
  .group + .group { padding-top: var(--s-20); }

  .group-head { margin-bottom: var(--s-10); max-width: 720px; }
  .group-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-style: normal;
    font-size: var(--text-xs);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-indigo);
    background: var(--color-paper);
    padding: 8px 12px;
    margin-bottom: var(--s-4);
    -webkit-font-smoothing: antialiased;
  }
  /* Section-codierte Eyebrow-Farben */
  #betriebliche-steuererklaerung .group-eyebrow { color: var(--color-indigo); }
  #einkommensteuererklaerung .group-eyebrow { color: var(--color-lavender); }
  #lohnabrechnung .group-eyebrow { color: var(--color-teal); }
  #zusaetzliche-leistungen .group-eyebrow { color: var(--color-coral); }
  .group-h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 3.25rem);
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-tight);
    margin: 0 0 var(--s-3);
    color: var(--color-ink);
  }
  .group-sub {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-md);
    color: var(--color-ink);
    margin: 0;
  }

  /* ── TABLE ──────────────────────────────────────────────────── */
  .tbl-wrap {
    background: var(--color-paper);
    overflow: visible;
  }
  .tbl-scroll { overflow-x: visible; -webkit-overflow-scrolling: touch; }
  .tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-family: var(--font-body);
    font-weight: 500;
  }
  .tbl col.col-label { width: 40%; }
  .tbl col.col-pkg   { width: 20%; }

  /* — Package header (sticky bei top: var(--nav-h), 0 default; rückt beim Mini-Slide nach unten) — */
  .tbl thead th {
    background: var(--color-paper);
    text-align: left;
    vertical-align: top;
    padding: var(--s-6) var(--s-5);
    border-bottom: 1px solid var(--color-ink-20);
    position: sticky;
    top: calc(var(--wf-nav-h) + var(--nav-h));
    z-index: 8;
    transition: top 280ms cubic-bezier(.4, 0, .2, 1);
  }
  .tbl thead th.col-th-pkg { text-align: left; }
  .pkg-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-snug);
    color: var(--color-ink);
    margin-bottom: var(--s-1);
  }
  .pkg-price {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-snug);
    color: var(--color-indigo);
    font-feature-settings: "tnum";
  }
  .pkg-price small {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-ink-55);
    margin-left: 2px;
    letter-spacing: 0;
  }
  .pkg-tagline {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-ink-70);
    margin-top: var(--s-2);
    line-height: var(--leading-normal);
  }

  /* Sticky-Header Mini-CTA — kleiner Indigo-Text-Link unter dem Preis */
  .pkg-cta {
    display: inline-block;
    margin-top: var(--s-3);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-indigo);
    text-decoration: none;
    transition: opacity 140ms ease;
  }
  .pkg-cta:hover { opacity: 0.6; }
  .pkg-cta:focus-visible {
    outline: 2px solid var(--color-indigo);
    outline-offset: 2px;
  }

  /* — Section sub-band — Headline IST Teil der Tabelle (paper), Cream-Gap-Row trennt visuell — */
  .tbl tr.gap td {
    padding: 0;
    height: var(--s-12);
    background: var(--color-cream);
    border: none;
    background-image: none;
  }
  .tbl tr.sec td {
    padding: var(--s-8) var(--s-5) var(--s-4);
    background: var(--color-paper);
    border: none;
  }
  .sec-meta {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-ink-55);
    margin-bottom: var(--s-2);
  }
  .sec-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    letter-spacing: var(--tracking-snug);
    line-height: 1.15;
    color: var(--color-ink);
    margin: 0;
    padding-top: 2px;
  }

  /* Feature rows — hairline-only, mit Inset (Linie endet vor Tabellen-Rand) */
  .tbl tbody tr.row td {
    padding: var(--s-5) var(--s-5);
    vertical-align: top;
    line-height: var(--leading-normal);
    background-color: var(--color-paper);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
  }
  /* Inset-Hairline: erste Zelle blendet links aus, letzte rechts, mittlere durchgehend */
  .tbl tbody tr.row td:first-child {
    background-image: linear-gradient(to right, transparent 0, transparent var(--s-5), var(--color-ink-line) var(--s-5), var(--color-ink-line) 100%);
  }
  .tbl tbody tr.row td:last-child {
    background-image: linear-gradient(to right, var(--color-ink-line) 0, var(--color-ink-line) calc(100% - var(--s-5)), transparent calc(100% - var(--s-5)), transparent 100%);
  }
  .tbl tbody tr.row td:not(:first-child):not(:last-child) {
    background-image: linear-gradient(var(--color-ink-line), var(--color-ink-line));
  }

  /* Hairline der letzten Zeile jeder Sektion ausblenden (vor Gap-Row, vor Ideal-Row, oder am Tabellen-Ende) */
  .tbl tbody tr.row:has(+ tr.gap) td,
  .tbl tbody tr.row:has(+ tr.row-ideal) td,
  .tbl tbody tr.row:last-child td {
    background-image: none;
  }
  .tbl tbody tr.row td.cell-label {
    font-family: var(--font-body);
    font-weight: 500;
  }
  .feat-title {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--color-ink);
    line-height: var(--leading-snug);
  }
  .feat-desc {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-ink-55);
    margin-top: var(--s-1);
    line-height: var(--leading-normal);
  }

  /* Hairline-only: kein Alternating, kein border-bottom (Linie wird via background-image gezeichnet) */
  .tbl tbody tr.row.is-light td,
  .tbl tbody tr.row.is-dark  td { background-color: var(--color-paper); }
  .tbl tbody tr.row td { border-bottom: none; }

  /* — Hover-Highlight (sehr dezent) — */
  .tbl tbody tr.row { transition: background-color 140ms ease; }
  .tbl tbody tr.row:hover td {
    background-color: #FAF6EE;
  }

  /* Cell values */
  .tbl td.cell-val { text-align: center; font-family: var(--font-body); font-weight: 500; }
  .cell-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-indigo);
    width: 22px; height: 22px;
  }
  .cell-check svg { width: 20px; height: 20px; display: block; }
  .cell-val--note {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  }
  .cell-note {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    color: var(--color-ink-55);
    line-height: var(--leading-snug);
  }
  .cell-no {
    display: inline-block;
    color: var(--color-ink-40);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-lg);
    line-height: 1;
  }
  .cell-price {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-ink);
    line-height: var(--leading-snug);
    font-feature-settings: "tnum";
  }

  /* Final "Ideal für" row — emphasized */
  .tbl tbody tr.row-ideal td {
    background: #FBF1AE;
    border-top: 1px solid var(--color-ink-20);
    padding: var(--s-8) var(--s-5);
    vertical-align: top;
  }
  .ideal-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .ideal-text {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-ink);
    line-height: var(--leading-normal);
    margin: 0;
  }

  /* ── Footnote ───────────────────────────────────────────────── */
  .tbl-foot {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    color: var(--color-ink-55);
    margin: var(--s-4) 0 0 var(--s-2);
  }

  /* ── CTA after each table ───────────────────────────────────── */
  .tbl-cta {
    margin-top: var(--s-8);
    padding: var(--s-8) var(--s-8);
    background: var(--color-indigo);
    color: var(--color-paper);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    flex-wrap: wrap;
  }
  .tbl-cta-text {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-snug);
    color: var(--color-paper);
    max-width: 56ch;
    margin: 0;
  }
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--color-ink);
    background: var(--color-yellow);
    border: none;
    padding: var(--s-4) var(--s-6);
    text-decoration: none;
    cursor: pointer;
    transition: transform 80ms ease, background var(--dur-fast, 150ms) ease;
  }
  .btn-primary:hover { background: color-mix(in srgb, var(--color-yellow) 88%, black); }
  .btn-primary:active { transform: scale(0.98); }
  .btn-primary:focus-visible {
    outline: 2px solid var(--color-paper);
    outline-offset: 3px;
  }


  /* — Single-price tables (Lohnabrechnung, Zusätzliche Leistungen) — */
  .tbl--single col.col-label { width: 80%; }
  .tbl--single col.col-pkg   { width: 20%; }
  .tbl--single thead th.col-th-pkg { text-align: left; padding-left: var(--s-5); }
  .tbl--single tbody td.cell-val { text-align: left; padding-left: var(--s-5); }
  .tbl--single .cell-price { font-family: var(--font-body); font-weight: 500; }
  .group--single .pkg-tabs { display: none !important; }

  /* ── MOBILE PACKAGE TABS ────────────────────────────────────── */
  .pkg-tabs {
    display: none;
    background: var(--color-paper);
    border: 1px solid var(--color-ink-line);
    padding: 4px;
    gap: 0;
    margin-bottom: 0;
    width: 100%;
  }
  .pkg-tab {
    flex: 1;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-ink);
    background: transparent;
    border: none;
    padding: var(--s-3) var(--s-2);
    cursor: pointer;
    line-height: 1.1;
    text-align: center;
    transition: background var(--dur-fast, 150ms) ease, color var(--dur-fast, 150ms) ease;
  }
  .pkg-tab:hover:not(.is-active) { background: var(--color-cream); }
  .pkg-tab.is-active { background: var(--color-ink); color: var(--color-paper); }
  .pkg-tab:focus-visible { outline: 2px solid var(--color-indigo); outline-offset: -2px; }

  /* ── PAGE FOOTER ────────────────────────────────────────────── */
  .pagefoot {
    margin-top: clamp(56px, 7vw, 96px);
    border-top: 1px solid var(--color-ink-line);
    background: var(--color-cream);
  }
  .pagefoot-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-8) 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-ink-55);
    flex-wrap: wrap;
    gap: var(--s-3);
  }
  .wordmark {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-lg);
    color: var(--color-ink);
    letter-spacing: var(--tracking-snug);
  }
  .wordmark .tick { color: var(--color-yellow); }
  .wordmark .b { color: var(--color-indigo); }

  /* ── TABLET ─────────────────────────────────────────────────── */
  @media (max-width: 1000px) {
    .tbl col.col-label { width: 34%; }
    .tbl col.col-pkg   { width: 22%; }
    .pkg-name  { font-size: var(--text-lg); }
    .pkg-price { font-size: var(--text-base); }
    .tbl-scroll .tbl { min-width: 680px; }
  }

  /* ── MOBILE ─────────────────────────────────────────────────── */
  @media (max-width: 720px) {
    .hero { padding: 48px 0 24px; }
    .group { padding: 48px 0 var(--s-8); }
    .group + .group { padding-top: var(--s-6); }

    .pkg-tabs { display: flex; margin-bottom: var(--s-4); }
    .tbl-scroll { overflow-x: hidden; }
    .tbl-scroll .tbl { min-width: 0; width: 100%; }
    .tbl col.col-label { width: 62%; }
    .tbl col.col-pkg   { width: 38%; }

    /* nur aktives Paket zeigen */
    .group .pkg-col { display: none; }
    .group[data-active="1"] .pkg-col.pkg-1,
    .group[data-active="2"] .pkg-col.pkg-2,
    .group[data-active="3"] .pkg-col.pkg-3 { display: table-cell; }

    /* THEAD auf Mobile ausblenden — Tabs zeigen das aktive Paket schon an */
    .tbl thead { display: none; }

    .tbl tr.sec td { padding: var(--s-8) var(--s-4) var(--s-3); }
    .sec-title { font-size: var(--text-lg); line-height: 1.2; }
    .sec-meta { font-size: var(--text-xs); }

    .tbl tbody tr.row td { padding: var(--s-4) var(--s-4); }
    .feat-title { font-size: var(--text-sm); word-break: break-word; hyphens: auto; }
    .feat-desc  { font-size: var(--text-xs); word-break: break-word; hyphens: auto; }

    .tbl-cta { padding: var(--s-6); flex-direction: column; align-items: flex-start; }
    .tbl-cta-text { font-size: var(--text-lg); }
    .anchor-link { padding: var(--s-2) var(--s-3); font-size: var(--text-xs); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  }

  /* ═══ MOBILE SELECTOR ═══ */
  .mobile-selector { display: none; }
  .mobile-sheet-backdrop { display: none; }
  .mobile-sheet { display: none; }

  @media (max-width: 720px) {
    /* Hide desktop nav + mini on mobile */
    .anchor-nav { display: none !important; }
    .anchor-mini { display: none !important; }
    /* Old pkg-tabs werden zum inline-pkg styled */
    .pkg-tabs { background: var(--color-paper); border: 1px solid var(--color-ink-line); padding: 4px; display: flex; gap: 4px; }
    .pkg-tab { flex: 1; background: transparent; border: none; padding: 10px 4px; font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--color-ink); cursor: pointer; line-height: 1.1; }
    .pkg-tab.is-active { background: var(--color-ink); color: var(--color-paper); }

    .mobile-selector {
      display: block;
      position: fixed; top: var(--wf-nav-h); left: 0; right: 0;
      z-index: var(--z-nav);
      background: var(--color-cream);
      padding: var(--s-3) var(--s-4);
      border-bottom: 1px solid var(--color-ink-line);
      transform: translateY(calc(-100% - var(--wf-nav-h)));
      transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
    }
    .mobile-selector.is-visible { transform: translateY(0); }
    .mobile-selector-btn {
      width: 100%; background: var(--color-paper); border: 1px solid var(--color-ink-line);
      padding: 10px 12px; display: flex; align-items: center; gap: 12px; cursor: pointer;
      font-family: var(--font-body); font-weight: 500; color: var(--color-ink); text-align: left;
    }
    .mobile-selector-ico {
      width: 28px; height: 28px; flex-shrink: 0;
      background: var(--color-indigo); color: var(--color-paper);
      display: flex; align-items: center; justify-content: center;
      transition: background-color 220ms ease;
    }
    .mobile-selector-ico svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; fill: none; }
    .mobile-selector-text { flex: 1; font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-ink); line-height: 1.2; }
    .mobile-selector-chevron { width: 20px; height: 20px; stroke: var(--color-ink); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; fill: none; transition: transform 220ms cubic-bezier(.4,0,.2,1); }
    .mobile-selector.is-open .mobile-selector-chevron { transform: rotate(180deg); }

    /* (kein body padding-top: Webflow-Navbar ist sticky, kein fixed-Offset nötig) */

    /* Pkg-tabs: zusammenhängendes Pill wie Desktop-Tab-Bar */
    .pkg-tabs {
      position: sticky;
      top: calc(var(--wf-nav-h) + var(--nav-h));
      z-index: calc(var(--z-nav) - 1);
      display: flex;
      justify-content: center;
      gap: 0;
      padding: 32px 0 32px 0;
      margin: 0;
      box-sizing: content-box;
      background: transparent;
      border: none;
      width: auto;
      margin: 0;
      transform: none;
      transition: background-color 220ms ease;
    }
    /* Beim Andocken: full-width weißer Streifen hinter dem Pill — Padding bleibt symmetrisch */
    .pkg-tabs::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 100vw;
      transform: translateX(-50%);
      background: var(--color-paper);
      border-bottom: 1px solid var(--color-ink-line);
      opacity: 0;
      z-index: -1;
      transition: opacity 220ms ease;
      pointer-events: none;
    }
    .pkg-tabs.is-stuck::before { opacity: 1; }

    .pkg-tab {
      flex: 0 0 auto;
      min-width: 0;
      background: var(--color-paper);
      border: 1px solid var(--color-ink-line);
      padding: 10px 14px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 13px;
      color: var(--color-ink);
      cursor: pointer;
      margin: 0;
    }
    .pkg-tab + .pkg-tab { border-left: none; }
    .pkg-tab.is-active {
      background: var(--color-ink);
      color: var(--color-paper);
      border-color: var(--color-ink);
    }

    /* Tabelle auf Mobile: auto-Layout damit versteckte Spalten keine Breite reservieren */
    .tbl { table-layout: auto; }

    /* Tabellen-Zeilen full-width (aus .wrap-Padding ausbrechen) */
    .tbl-wrap { margin-left: calc(var(--container-pad) * -1); margin-right: calc(var(--container-pad) * -1); }

    .mobile-sheet-backdrop {
      display: block; position: fixed; inset: 0;
      background: rgba(14,12,28,0.5);
      opacity: 0; pointer-events: none;
      transition: opacity 220ms ease; z-index: calc(var(--z-nav) + 1);
    }
    .mobile-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
    .mobile-sheet {
      display: block; position: fixed; left: 0; right: 0; bottom: 0;
      background: var(--color-paper);
      transform: translateY(100%);
      transition: transform 320ms cubic-bezier(.4,0,.2,1);
      z-index: calc(var(--z-nav) + 2);
      max-height: 80vh; overflow-y: auto;
      padding: 12px 0 20px;
    }
    .mobile-sheet.is-open { transform: translateY(0); }
    .mobile-sheet-handle { width: 40px; height: 4px; background: var(--color-ink-20); margin: 0 auto 16px; }
    .mobile-sheet h3 { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-ink-55); margin: 8px 20px; }
    .mobile-sheet-opt { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; border-bottom: 1px solid var(--color-ink-line); background: var(--color-paper); transition: background 140ms ease; }
    .mobile-sheet-opt:last-child { border-bottom: none; }
    .mobile-sheet-opt:active { background: var(--color-cream); }
    .mobile-sheet-opt.is-active { background: var(--color-ink); color: var(--color-paper); }
    .mobile-sheet-opt.is-active .mso-text, .mobile-sheet-opt.is-active .mso-text .sub { color: var(--color-paper); }
    .mso-ico { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--color-paper); }
    .mobile-sheet-opt[data-value="Betriebliche Steuererklärung"] .mso-ico { background: var(--color-indigo); }
    .mobile-sheet-opt[data-value="Einkommensteuererklärung"] .mso-ico { background: var(--color-lavender); }
    .mobile-sheet-opt[data-value="Lohnabrechnung"] .mso-ico { background: var(--color-teal); }
    .mobile-sheet-opt[data-value="Zusätzliche Leistungen"] .mso-ico { background: var(--color-coral); }
    .mso-ico svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; fill: none; }
    .mobile-sheet-opt.is-active .mso-ico { background: var(--color-paper); }
    .mobile-sheet-opt.is-active[data-value="Betriebliche Steuererklärung"] .mso-ico { color: var(--color-indigo); }
    .mobile-sheet-opt.is-active[data-value="Einkommensteuererklärung"] .mso-ico { color: var(--color-lavender); }
    .mobile-sheet-opt.is-active[data-value="Lohnabrechnung"] .mso-ico { color: var(--color-teal); }
    .mobile-sheet-opt.is-active[data-value="Zusätzliche Leistungen"] .mso-ico { color: var(--color-coral); }
    .mso-text { flex: 1; font-family: var(--font-body); font-weight: 500; color: var(--color-ink); font-size: 15px; }
    .mso-text .sub { display: block; font-size: 12px; color: var(--color-ink-55); margin-top: 2px; }
    .mso-check { width: 20px; height: 20px; flex-shrink: 0; border: 1px solid var(--color-ink-20); background: var(--color-paper); display: flex; align-items: center; justify-content: center; }
    .mobile-sheet-opt.is-active .mso-check { border-color: var(--color-paper); }
    .mso-check svg { width: 14px; height: 14px; stroke: var(--color-ink); stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; fill: none; opacity: 0; }
    .mobile-sheet-opt.is-active .mso-check svg { opacity: 1; }
  }

/* ─── Webflow-Integration: Mobile-Selector reserviert Platz wie die Desktop-Mini-Bar ─── */
@media (max-width: 720px) {
  /* anchor-mini ist hier display:none — sein is-visible darf --nav-h nicht beeinflussen */
  body:has(.anchor-mini.is-visible)    { --nav-h: 0px; }
  body:has(.mobile-selector.is-visible){ --nav-h: var(--sel-h); }
}


/* ════════════════════════════════════════════════════════════════════
 * Sorglos PLUS · "Bald verfügbar"-Zustand
 * Scope: NUR die Betriebliche Tabelle (pkg-3 = "L Paket" in der Einkommen-
 * Tabelle bleibt unberührt). Grauen über color statt opacity, damit das
 * dunkle Badge voll deckend bleibt.
 * ════════════════════════════════════════════════════════════════════ */
#betriebliche-steuererklaerung .pkg-soon-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-paper);
  background: var(--color-ink);
  padding: 4px 9px;
  margin-bottom: var(--s-2);
}

/* Spalteninhalt ausgrauen — Kopf + alle JS-gerenderten Zellen */
#betriebliche-steuererklaerung .pkg-col.pkg-3 .pkg-name  { color: var(--text-muted); }
#betriebliche-steuererklaerung .pkg-col.pkg-3 .pkg-price { color: var(--text-muted); }
#betriebliche-steuererklaerung .pkg-col.pkg-3 .cell-price { color: var(--text-faint); }
#betriebliche-steuererklaerung .pkg-col.pkg-3 .cell-check { color: var(--text-faint); }
#betriebliche-steuererklaerung .pkg-col.pkg-3 .cell-no    { color: var(--text-faint); }
#betriebliche-steuererklaerung .pkg-col.pkg-3 .ideal-text { color: var(--text-faint); }

/* CTA durch stillen Hinweis ersetzt (kein klickbarer Link mehr) */
#betriebliche-steuererklaerung .pkg-cta--muted {
  display: inline-block;
  margin-top: var(--s-3);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  cursor: default;
}

/* ─── Tab-Bar (Mini, beim Hochscrollen): weiße Fläche = exakte Tabellenbreite ─── */
/* Tabelle ist durch .pr-container (max-width 1070) auf 1070−64=1006px begrenzt, zentriert. */
.anchor-mini .wrap {
  background-color: transparent;
  background-image: linear-gradient(#ffffff, #ffffff);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: min(1006px, calc(100vw - 64px)) 100%;
}