/* ==========================================================================
   Product pages — each product's own brand inside <main>.
   The Gesuntech header and footer stay in Gesuntech colours: only <main class="pb pb-…"> is re-themed.
   How it works: the --gt-* palette and --font-display are re-declared on <main>, and the semantic
   --color-* roles are re-declared here too so they pick up the product palette (custom properties
   resolve where they are declared, so re-declaring only the palette would not be enough).
   Load after site.css, with the product's fonts from assets/css/fonts/.
   ========================================================================== */

.pb {
  --color-bg:            var(--gt-warm-white);
  --color-surface:       var(--gt-surface);
  --color-surface-soft:  var(--gt-soft-green);
  --color-surface-warm:  var(--gt-sand);
  --color-surface-inverse: var(--gt-deep-teal);
  --color-text:          var(--gt-charcoal);
  --color-text-muted:    var(--gt-muted);
  --color-text-subtle:   var(--gt-subtle);
  --color-heading:       var(--pb-heading, var(--gt-deep-teal));
  --color-text-inverse:  var(--gt-warm-white);
  --color-text-inverse-muted: var(--pb-inverse-muted, var(--gt-soft-green));
  --color-link:          var(--gt-deep-teal);
  --color-primary:       var(--gt-deep-teal);
  --color-primary-hover: var(--gt-deep-teal-hover);
  --color-on-primary:    var(--gt-warm-white);
  --color-accent:        var(--gt-teal-mist);
  --color-accent-text:   var(--gt-teal-mist-ink);
  --color-alert:         var(--gt-clay);
  --color-alert-text:    var(--gt-clay-ink);
  --color-border:        var(--gt-line);
  --color-border-strong: var(--gt-line-strong);
  --color-focus:         var(--gt-teal-mist-ink);
  display: block;
  background: var(--color-bg);
  color: var(--color-text);
  padding-bottom: var(--section-y);
}
.pb + .site-footer { margin-top: 0; }
.pb :focus-visible { outline-color: var(--color-focus); }

/* Product lock-ups: mark image + name set in the product font */
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-heading); }
.lockup img { width: auto; }
.lockup__name { font-family: var(--font-display); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }

/* Real screenshots in a simple window frame */
.shot { margin: 0; }
.shot__frame { border-radius: 14px; overflow: hidden; background: var(--gt-deep-teal); box-shadow: var(--shadow-lg); border: 1px solid rgba(0, 0, 0, 0.08); }
.shot__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; }
.shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.shot__bar span { margin-left: 10px; font-size: 11px; color: rgba(255, 255, 255, 0.72); }
.shot__frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; background: #F4F0E8; }
.shot figcaption { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-text-subtle); }
.shot a { display: block; }

/* ======================= APlus Invoicing ======================= */
.pb-aplus {
  --gt-deep-teal: #0F2A25;       /* APlus deep green: primary, headings */
  --gt-deep-teal-hover: #1B3F37;
  --gt-teal-mist: #F26422;       /* APlus orange: accents, not for small text */
  --gt-teal-mist-ink: #B4440F;   /* orange that passes 4.5:1 on the cream background */
  --gt-soft-green: #EFE7DA;      /* soft section */
  --gt-warm-white: #F7F3EC;      /* page background, as in the app */
  --gt-charcoal: #18221F;
  --gt-sand: #F1E4D4;
  --gt-clay: #F26422;
  --gt-clay-ink: #B4440F;
  --gt-logo-leaf: #FF9A62;
  --gt-muted: #4A524E;
  --gt-subtle: #5D6460;
  --gt-line: #E5DCCD;
  --gt-line-strong: #A39A8C;
  --pb-inverse-muted: #D6E0DC;
  --font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
}
.pb-aplus h1, .pb-aplus h2, .pb-aplus h3 { font-weight: 700; letter-spacing: -0.025em; }
.ap-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--space-6); position: relative; overflow: hidden; }
.ap-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-9); align-items: center; }
.ap-hero .lockup img { height: 44px; }
.ap-hero h1 { margin-top: var(--space-7); }
.ap-hero h1 em { font-style: normal; color: var(--gt-teal-mist-ink); }
.ap-hero .gt-lead { margin-top: var(--space-5); }
.ap-hero .actions { margin-top: var(--space-7); }
.ap-hero .note { margin-top: var(--space-4); }
.ap-hero__shot { position: relative; }
.ap-hero__shot::before { content: ""; position: absolute; inset: 12% -40vw -18% 18%; border-radius: var(--radius-xl) 0 0 var(--radius-xl); background: var(--gt-deep-teal); z-index: 0; }
.ap-hero__shot::after { content: ""; position: absolute; left: -4%; top: -6%; width: 22%; height: 12%; background: var(--gt-teal-mist); transform: skewX(-22deg); border-radius: 4px; z-index: 0; }
.ap-hero__shot .shot { position: relative; z-index: 1; }
.ap-hero__shot figcaption { position: relative; z-index: 1; color: var(--pb-inverse-muted); }
@media (max-width: 960px) {
  .ap-hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .ap-hero__shot::before { inset: 14% -10% -10% 10%; }
}
.btn-orange { background: var(--gt-teal-mist); color: #10221E; }
.btn-orange:hover { background: #FF7A3D; color: #10221E; }
.ap-tour { padding-top: calc(var(--section-y) + var(--space-6)); }
.ap-tour__tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.ap-tour .tabs__list { margin-bottom: 0; }
.ap-tour .panel-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); }
.theme-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--gt-surface); border: 1px solid var(--color-border); }
.theme-switch button { min-height: 36px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--gt-muted); font: inherit; font-size: var(--text-small); font-weight: 500; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { background: var(--gt-deep-teal); color: #fff; }
.no-js .theme-switch { display: none; }
[data-shot-theme="light"] .shot--dark, [data-shot-theme="dark"] .shot--light { display: none; }
.shot--dark .shot__frame img { background: #10221E; }

/* ======================= GymManX Pro ======================= */
.pb-gym {
  --gt-deep-teal: #0F172A;       /* Charcoal: primary, headings */
  --gt-deep-teal-hover: #1E293B;
  --gt-teal-mist: #D7FF3F;       /* Energy Lime: accents and buttons on dark only */
  --gt-teal-mist-ink: #45573E;   /* Steel Green, darkened to pass 4.5:1 on Warm White */
  --gt-soft-green: #E8ECE9;      /* Mist */
  --gt-warm-white: #FAF9F5;      /* Warm White */
  --gt-charcoal: #0F172A;
  --gt-sand: #EEF0EA;
  --gt-clay: #FF8A6A;            /* Active Coral */
  --gt-clay-ink: #B5462A;
  --gt-logo-leaf: #D7FF3F;
  --gt-muted: #3F4A5A;
  --gt-subtle: #566070;
  --gt-line: #DFE3DF;
  --gt-line-strong: #98A19B;
  --pb-inverse-muted: #C9D1CC;
  --font-display: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
}
.pb-gym h1, .pb-gym h2, .pb-gym h3 { letter-spacing: -0.03em; }
.gx-hero { position: relative; overflow: hidden; background: #0F172A; color: #FAF9F5; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.gx-hero::before { content: ""; position: absolute; right: -8%; top: -30%; width: 38%; height: 160%; background: linear-gradient(180deg, rgba(215, 255, 63, 0) 0%, rgba(215, 255, 63, 0.16) 100%); transform: skewX(-24deg); pointer-events: none; }
.gx-hero::after { content: ""; position: absolute; right: 9%; top: -20%; width: 3.2%; height: 150%; background: #D7FF3F; transform: skewX(-24deg); opacity: 0.85; pointer-events: none; }
.gx-hero .gt-container { position: relative; z-index: 1; }
.gx-hero .lockup { color: #FAF9F5; }
.gx-hero .lockup img { height: 34px; }
.gx-hero .lockup__name { font-size: 1.375rem; }
.lockup__name .pro { color: #D7FF3F; font-weight: 500; margin-left: 0.18em; }
.pb-gym .lockup__name .pro { color: #D7FF3F; }
.gx-hero .gt-eyebrow { display: block; margin-top: var(--space-8); color: #D7FF3F; }
.gx-hero h1 { margin-top: var(--space-4); color: #FAF9F5; font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4rem); line-height: 1.04; max-width: 46rem; }
.gx-hero h1 span { display: block; color: #D7FF3F; }
.gx-hero .gt-lead { margin-top: var(--space-5); color: #C9D1CC; max-width: 38rem; }
.gx-hero .actions { margin-top: var(--space-7); }
.btn-lime { background: #D7FF3F; color: #0F172A; }
.btn-lime:hover { background: #E4FF7A; color: #0F172A; }
.btn-ghost-light { background: transparent; border-color: rgba(250, 249, 245, 0.55); color: #FAF9F5; }
.btn-ghost-light:hover { background: #FAF9F5; color: #0F172A; }
.gx-hero__mock { margin-top: var(--space-9); position: relative; }
.gx-hero__mock .mock { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.gx-note { padding-top: var(--space-4); }
.gx-note .note { color: var(--gt-subtle); }

/* GymManX mockups in GymManX colours */
.pb-gym .mock { background: #fff; color: #0F172A; }
.pb-gym .mock__bar { background: #E8ECE9; }
.pb-gym .mock__bar i { background: #C5CCC7; }
.pb-gym .mock-gym .mock__side { background: #0F172A; color: #C9D1CC; }
.pb-gym .mock-gym .mock__side b { color: #FAF9F5; }
.pb-gym .mock-gym .mock__side b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #D7FF3F; margin-left: 6px; vertical-align: middle; }
.pb-gym .mock-gym .mock__side span.on { background: rgba(215, 255, 63, 0.14); color: #FAF9F5; box-shadow: inset 2px 0 0 #D7FF3F; }
.pb-gym .mock__main { background: #F4F5F1; }
.pb-gym .mock__kpi, .pb-gym .mock__panel, .pb-gym .mock__pipeline div { border-color: #E3E7E3; }
.pb-gym .mock__kpi strong, .pb-gym .mock__title { color: #0F172A; }
.pb-gym .mock__title em { background: #D7FF3F; color: #0F172A; }
.pb-gym .mock__bars i { background: #0F172A; }
.pb-gym .mock__bars i:nth-child(even) { background: #D7FF3F; }
.pb-gym .mock__pipeline i { background: #E8ECE9; }
.pb-gym .mock__pipeline i.alt { background: #D7FF3F; }
.pb-gym .mock-insight i { background: #D7FF3F; }
.pb-gym .tabs__tab[aria-selected="true"] { background: #0F172A; color: #D7FF3F; }
.pb-gym .tick-list li::before { border-color: #0F172A; }
.pb-gym .point svg { color: #0F172A; background: #D7FF3F; border-radius: 10px; padding: 6px; width: 36px; height: 36px; }
.pb-gym .cta-band { background: #0F172A; }
.pb-gym .cta-band p { color: #C9D1CC; }
.pb-gym .cta-band::after { border-color: rgba(215, 255, 63, 0.5); border-radius: 0; transform: skewX(-24deg); }
.pb-gym .gt-badge--green { background: #D7FF3F; color: #0F172A; }

/* ======================= Homoeo Gesundheit ======================= */
.pb-homoeo {
  --gt-deep-teal: #4E6B4F;       /* Herbal Green: primary buttons */
  --gt-deep-teal-hover: #3E573F;
  --gt-teal-mist: #A7B893;       /* Sage */
  --gt-teal-mist-ink: #4E6B4F;
  --gt-soft-green: #E9EDE0;
  --gt-warm-white: #F8F3EA;      /* Warm Cream */
  --gt-charcoal: #3A2E24;        /* Deep Brown, darkened for body text */
  --gt-sand: #E7D6C3;            /* Sand */
  --gt-clay: #D97F64;            /* Terracotta */
  --gt-clay-ink: #A9533A;        /* Terracotta that passes contrast on cream */
  --gt-logo-leaf: #A7B893;
  --gt-muted: #5B4636;           /* Deep Brown */
  --gt-subtle: #6A5646;
  --gt-line: #E5D9C9;
  --gt-line-strong: #A8998A;
  --pb-heading: #2F261E;
  --font-display: "Red Hat Display", "Inter", ui-sans-serif, system-ui, sans-serif;
}
.hg-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); background: linear-gradient(115deg, #F8F3EA 0%, #F8F3EA 52%, #F1E3D2 100%); }
.hg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-9); align-items: center; }
.hg-lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.hg-lockup img { height: 56px; width: auto; }
.hg-lockup__name { font-family: var(--font-display); line-height: 0.95; color: #2F261E; font-size: 1.5rem; letter-spacing: -0.02em; }
.hg-lockup__name b { display: block; font-weight: 600; }
.hg-lockup__name span { display: block; font-weight: 500; }
.hg-tagline { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; color: #A9533A; }
.hg-hero .gt-badge { margin-top: var(--space-8); background: #E7D6C3; color: #3A2E24; }
.hg-hero .gt-badge .gt-badge__dot { background: #D97F64; }
.hg-hero h1 { margin-top: var(--space-5); font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4rem); line-height: 1.04; font-weight: 600; color: #2F261E; letter-spacing: -0.025em; }
.hg-hero h1 em { font-style: italic; font-weight: 600; color: #A9533A; }
.hg-hero .gt-lead { margin-top: var(--space-5); color: #4A3B2F; font-size: 1.25rem; max-width: 34rem; }
.hg-hero .hg-sub { margin-top: var(--space-4); color: var(--gt-muted); max-width: 34rem; }
.hg-hero__art { position: relative; aspect-ratio: 1; max-width: 420px; justify-self: center; width: 100%; }
.hg-hero__art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #F3E7D8 60%, #E7D6C3 100%); }
.hg-hero__art img { position: absolute; inset: 18%; width: 64%; height: 64%; object-fit: contain; }
@media (max-width: 860px) {
  .hg-hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hg-hero__art { display: none; }
}
.hg-notify { margin-top: var(--space-8); }
.hg-notify h2 { font-size: var(--text-h4); font-weight: 600; color: #2F261E; }
.hg-notify .actions { margin-top: var(--space-4); }
.hg-notify .note { margin-top: var(--space-4); color: var(--gt-subtle); }
.pb-homoeo .gt-btn--outline { border-color: #4E6B4F; color: #3E573F; }
.pb-homoeo .gt-btn--outline:hover { background: #4E6B4F; color: #F8F3EA; }
.hg-pillars { padding-block: var(--section-y) 0; }
.hg-pillars .grid-3 { margin-top: var(--space-7); }
.hg-pillars .point { border-top-color: #E7D6C3; }
.hg-pillars .point__num { color: #A9533A; }
.hg-pillars .point h3 { color: #2F261E; }