/* ==========================================================================
   goldgas Design System — BUNDLE (goldgas.css)
   --------------------------------------------------------------------------
   Single-file build: tokens + base + all components, concatenated in order.
   Font @font-face paths are relative to this file (../assets/fonts/*).
   Generated from the source files in this directory; do not hand-edit —
   edit tokens.css / base.css / components/*.css and re-concatenate.
   ========================================================================== */


/* ===== tokens.css ===== */

/* ==========================================================================
   goldgas Design System — Design Tokens
   --------------------------------------------------------------------------
   Two-layer system:
     1. Primitive tokens  (--gg-gold-500, --gg-neutral-100, ...)  raw values
     2. Semantic tokens   (--gg-color-primary, --gg-color-text, ...) reference primitives
   Everything is prefixed `gg-`. Re-theme by editing primitives or by
   overriding semantic tokens. Mirror of tokens/tokens.json (keep in sync).
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. PRIMITIVES — COLOR
     ---------------------------------------------------------------------- */

  /* Gold — the goldgas brand color. gold-500 (#FFC61A) is canonical. */
  --gg-gold-50:  #FFF9E6;
  --gg-gold-100: #FFF0BF;   /* marker / soft highlight   */
  --gg-gold-200: #FFE38A;
  --gg-gold-300: #FFD64D;
  --gg-gold-400: #FFCE33;
  --gg-gold-500: #FFC61A;   /* BRAND PRIMARY             */
  --gg-gold-600: #E6A700;   /* hover / pressed fill      */
  --gg-gold-700: #B88600;
  --gg-gold-800: #8A6500;   /* AA text/link on light     */
  --gg-gold-900: #5C4300;

  /* Green — sustainability / Strom / eco accent. */
  --gg-green-50:  #EAF7F1;
  --gg-green-100: #CDECE0;
  --gg-green-200: #9FDCC5;
  --gg-green-300: #6BCAA8;
  --gg-green-400: #4DC09E;
  --gg-green-500: #33B793;   /* BRAND ECO                 */
  --gg-green-600: #1C9B79;
  --gg-green-700: #157A5C;   /* AA white-text fill / text */
  --gg-green-800: #0F5E47;
  --gg-green-900: #0A4233;

  /* Neutrals — warm-tinted (hue nudged toward the gold). */
  --gg-neutral-0:   #FFFFFF;
  --gg-neutral-50:  #FDFDFC;
  --gg-neutral-100: #F4F2EE;  /* app background (warm)     */
  --gg-neutral-200: #E8E5DF;
  --gg-neutral-300: #D6D2C9;
  --gg-neutral-400: #B5AFA3;
  --gg-neutral-500: #8C8579;
  --gg-neutral-600: #6B6459;  /* AA secondary text         */
  --gg-neutral-700: #4A453C;
  --gg-neutral-800: #2E2A24;
  --gg-neutral-900: #1A1712;  /* warm near-black, body text */

  /* Cool surface (footer / info) — from the live site. */
  --gg-cool-100: #E8F0F1;
  --gg-cool-200: #D7E5E6;

  /* State primitives */
  --gg-success-100: #E4F6EC;
  --gg-success-500: #21B36A;
  --gg-success-700: #0F6B3E;
  --gg-warning-100: #FCEFCB;
  --gg-warning-500: #E8A100;
  --gg-warning-700: #8A6100;
  --gg-error-100:   #FFE1DA;
  --gg-error-500:   #FF583A;
  --gg-error-700:   #C42B12;
  --gg-info-100:    #D7E9F2;
  --gg-info-500:    #2B7DA3;
  --gg-info-700:    #1F6E94;

  /* ----------------------------------------------------------------------
     2. SEMANTIC — COLOR
     ---------------------------------------------------------------------- */

  /* Brand */
  --gg-color-primary:        var(--gg-gold-500);
  --gg-color-primary-hover:  var(--gg-gold-600);
  --gg-color-primary-strong: var(--gg-gold-800);   /* gold as text/link on light */
  --gg-color-on-primary:     var(--gg-neutral-900); /* text on gold fill (AA 11.4:1) */

  --gg-color-eco:        var(--gg-green-500);
  --gg-color-eco-hover:  var(--gg-green-600);
  --gg-color-eco-strong: var(--gg-green-700);       /* eco text / white-text fill */
  --gg-color-on-eco:     var(--gg-neutral-0);

  /* Text */
  --gg-color-text:          var(--gg-neutral-900);
  --gg-color-text-secondary:var(--gg-neutral-600);
  --gg-color-text-muted:    var(--gg-neutral-500);  /* large/non-essential text only */
  --gg-color-text-inverse:  var(--gg-neutral-0);
  --gg-color-text-link:     var(--gg-color-primary-strong);
  --gg-color-text-link-hover:var(--gg-gold-900);

  /* Surfaces & backgrounds */
  --gg-color-bg:            var(--gg-neutral-100);
  --gg-color-surface:       var(--gg-neutral-0);
  --gg-color-surface-raised:var(--gg-neutral-50);
  --gg-color-surface-sunken:var(--gg-neutral-100);
  --gg-color-surface-cool:  var(--gg-cool-200);     /* footer / info panels */
  --gg-color-surface-gold:  var(--gg-gold-50);      /* soft gold panel       */
  --gg-color-surface-dark:  var(--gg-neutral-900);
  --gg-color-on-dark:       var(--gg-neutral-0);

  /* Borders & lines */
  --gg-color-border:        var(--gg-neutral-300);
  --gg-color-border-strong: var(--gg-neutral-400);
  --gg-color-border-subtle: var(--gg-neutral-200);
  --gg-color-divider:       var(--gg-neutral-200);

  /* State (semantic, with surface + border + text variants) */
  --gg-color-success:        var(--gg-success-500);
  --gg-color-success-text:   var(--gg-success-700);
  --gg-color-success-surface:var(--gg-success-100);
  --gg-color-warning:        var(--gg-warning-500);
  --gg-color-warning-text:   var(--gg-warning-700);
  --gg-color-warning-surface:var(--gg-warning-100);
  --gg-color-error:          var(--gg-error-500);
  --gg-color-error-text:     var(--gg-error-700);
  --gg-color-error-surface:  var(--gg-error-100);
  --gg-color-info:           var(--gg-info-500);
  --gg-color-info-text:      var(--gg-info-700);
  --gg-color-info-surface:   var(--gg-info-100);

  /* Focus */
  --gg-color-focus:      var(--gg-gold-800);        /* AA-safe ring color (5.3:1 on white) */
  --gg-color-focus-halo: rgba(255, 198, 26, 0.45);

  /* Signature gradients & effects */
  --gg-gradient-gold:    linear-gradient(135deg, var(--gg-gold-300) 0%, #F5A623 100%);
  --gg-gradient-gold-soft: linear-gradient(135deg, var(--gg-gold-100) 0%, var(--gg-gold-200) 100%);
  --gg-gradient-dark:    linear-gradient(160deg, #211D17 0%, var(--gg-neutral-900) 100%);
  --gg-color-marker:     var(--gg-gold-100);        /* highlighter marker */

  /* ----------------------------------------------------------------------
     3. TYPOGRAPHY
     ---------------------------------------------------------------------- */
  --gg-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gg-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --gg-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Modular scale (rem). Base = 16px. */
  --gg-font-size-xs:   0.75rem;   /* 12 */
  --gg-font-size-sm:   0.875rem;  /* 14 */
  --gg-font-size-base: 1rem;      /* 16 */
  --gg-font-size-md:   1.125rem;  /* 18 */
  --gg-font-size-lg:   1.25rem;   /* 20 */
  --gg-font-size-xl:   1.5rem;    /* 24 */
  --gg-font-size-2xl:  1.875rem;  /* 30 */
  --gg-font-size-3xl:  2.25rem;   /* 36 */
  --gg-font-size-4xl:  2.75rem;   /* 44 */
  --gg-font-size-5xl:  3.5rem;    /* 56 */
  --gg-font-size-6xl:  4.25rem;   /* 68 — display */

  --gg-font-weight-regular:  400;
  --gg-font-weight-medium:   500;
  --gg-font-weight-semibold: 600;
  --gg-font-weight-bold:     700;
  --gg-font-weight-extrabold:800;

  --gg-line-height-tight:   1.1;
  --gg-line-height-snug:    1.2;
  --gg-line-height-heading: 1.25;
  --gg-line-height-normal:  1.5;
  --gg-line-height-relaxed: 1.65;  /* body default */
  --gg-line-height-loose:   1.8;

  --gg-letter-spacing-tight:   -0.02em;
  --gg-letter-spacing-heading: -0.01em;
  --gg-letter-spacing-normal:  0;
  --gg-letter-spacing-wide:    0.02em;
  --gg-letter-spacing-overline:0.08em;  /* uppercase eyebrow labels */

  --gg-measure: 68ch;  /* max line length for body copy */

  /* ----------------------------------------------------------------------
     4. SPACING (4px base scale)
     ---------------------------------------------------------------------- */
  --gg-space-0:  0;
  --gg-space-1:  0.25rem;  /* 4   */
  --gg-space-2:  0.5rem;   /* 8   */
  --gg-space-3:  0.75rem;  /* 12  */
  --gg-space-4:  1rem;     /* 16  */
  --gg-space-5:  1.25rem;  /* 20  */
  --gg-space-6:  1.5rem;   /* 24  */
  --gg-space-7:  2rem;     /* 32  */
  --gg-space-8:  2.5rem;   /* 40  */
  --gg-space-9:  3rem;     /* 48  */
  --gg-space-10: 4rem;     /* 64  */
  --gg-space-11: 5rem;     /* 80  */
  --gg-space-12: 6rem;     /* 96  */
  --gg-space-13: 8rem;     /* 128 */

  /* ----------------------------------------------------------------------
     5. RADII
     ---------------------------------------------------------------------- */
  --gg-radius-xs:  4px;
  --gg-radius-sm:  8px;
  --gg-radius-md:  12px;   /* inputs */
  --gg-radius-lg:  16px;
  --gg-radius-xl:  20px;   /* cards  */
  --gg-radius-2xl: 28px;
  --gg-radius-pill:999px;  /* buttons, badges, toggles */
  --gg-radius-circle: 50%;

  /* ----------------------------------------------------------------------
     6. ELEVATION (warm-tinted, layered) — shadow rgb = neutral-900
     ---------------------------------------------------------------------- */
  --gg-shadow-xs: 0 1px 2px rgba(26, 23, 18, 0.06);
  --gg-shadow-sm: 0 2px 4px rgba(26, 23, 18, 0.06), 0 1px 2px rgba(26, 23, 18, 0.04);
  --gg-shadow-md: 0 4px 12px rgba(26, 23, 18, 0.08), 0 2px 4px rgba(26, 23, 18, 0.04);
  --gg-shadow-lg: 0 12px 28px rgba(26, 23, 18, 0.10), 0 4px 8px rgba(26, 23, 18, 0.05);
  --gg-shadow-xl: 0 24px 48px rgba(26, 23, 18, 0.12), 0 8px 16px rgba(26, 23, 18, 0.06);
  --gg-shadow-gold: 0 8px 24px rgba(255, 178, 0, 0.32);  /* CTA glow */

  /* ----------------------------------------------------------------------
     7. BORDERS
     ---------------------------------------------------------------------- */
  --gg-border-width:       1px;
  --gg-border-width-thick: 2px;
  --gg-border-width-accent:3px;   /* gold heading underline */
  --gg-border-style:       solid;

  /* ----------------------------------------------------------------------
     8. BREAKPOINTS (reference values; use in @media literally)
     sm 576 · md 768 · lg 992 · xl 1200 · 2xl 1400
     ---------------------------------------------------------------------- */
  --gg-breakpoint-sm:  576px;
  --gg-breakpoint-md:  768px;
  --gg-breakpoint-lg:  992px;
  --gg-breakpoint-xl:  1200px;
  --gg-breakpoint-2xl: 1400px;

  --gg-container-max:  1200px;
  --gg-container-wide: 1320px;
  --gg-container-narrow: 768px;
  --gg-container-gutter: var(--gg-space-5);

  /* ----------------------------------------------------------------------
     9. Z-INDEX
     ---------------------------------------------------------------------- */
  --gg-z-base:     0;
  --gg-z-raised:   10;
  --gg-z-dropdown: 1000;
  --gg-z-sticky:   1020;
  --gg-z-header:   1030;
  --gg-z-overlay:  1040;
  --gg-z-modal:    1050;
  --gg-z-popover:  1060;
  --gg-z-toast:    1070;

  /* ----------------------------------------------------------------------
     10. MOTION
     ---------------------------------------------------------------------- */
  --gg-duration-fast:   120ms;
  --gg-duration-base:   200ms;
  --gg-duration-slow:   320ms;
  --gg-duration-slower: 480ms;

  --gg-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);  /* out-quint */
  --gg-ease-out:      cubic-bezier(0.16, 1, 0.30, 1);  /* out-expo  */
  --gg-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --gg-transition-colors: color var(--gg-duration-base) var(--gg-ease-standard),
                          background-color var(--gg-duration-base) var(--gg-ease-standard),
                          border-color var(--gg-duration-base) var(--gg-ease-standard),
                          box-shadow var(--gg-duration-base) var(--gg-ease-standard);
}

/* Reduced-motion: neutralize durations globally. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gg-duration-fast: 0.01ms;
    --gg-duration-base: 0.01ms;
    --gg-duration-slow: 0.01ms;
    --gg-duration-slower: 0.01ms;
  }
}

/* ===== base.css ===== */

/* ==========================================================================
   goldgas Design System — Base
   Reset · self-hosted fonts · base typography · layout utilities
   Depends on: tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted Poppins (SIL OFL). Latin subset, woff2. Paths are relative to
   this stylesheet; adjust if you relocate /assets.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/poppins-800.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Modern reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--gg-font-body);
  font-size: var(--gg-font-size-base);
  line-height: var(--gg-line-height-relaxed);
  font-weight: var(--gg-font-weight-regular);
  color: var(--gg-color-text);
  background-color: var(--gg-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
svg { fill: currentColor; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:where(a) { color: inherit; }
p, li { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .gg-display {
  font-family: var(--gg-font-display);
  font-weight: var(--gg-font-weight-bold);
  line-height: var(--gg-line-height-heading);
  letter-spacing: var(--gg-letter-spacing-heading);
  color: var(--gg-color-text);
}

.gg-display    { font-size: clamp(2.75rem, 6vw, var(--gg-font-size-6xl)); line-height: var(--gg-line-height-tight); font-weight: var(--gg-font-weight-extrabold); letter-spacing: var(--gg-letter-spacing-tight); }
h1, .gg-h1     { font-size: clamp(2.25rem, 5vw, var(--gg-font-size-5xl)); line-height: var(--gg-line-height-snug); }
h2, .gg-h2     { font-size: clamp(1.875rem, 4vw, var(--gg-font-size-4xl)); }
h3, .gg-h3     { font-size: var(--gg-font-size-2xl); }
h4, .gg-h4     { font-size: var(--gg-font-size-xl); font-weight: var(--gg-font-weight-semibold); }
h5, .gg-h5     { font-size: var(--gg-font-size-lg); font-weight: var(--gg-font-weight-semibold); }
h6, .gg-h6     { font-size: var(--gg-font-size-md); font-weight: var(--gg-font-weight-semibold); }

p { max-width: var(--gg-measure); }

/* Lead / large intro paragraph */
.gg-lead {
  font-size: var(--gg-font-size-md);
  line-height: var(--gg-line-height-loose);
  color: var(--gg-color-text-secondary);
}
.gg-text-sm   { font-size: var(--gg-font-size-sm); }
.gg-text-xs   { font-size: var(--gg-font-size-xs); }
.gg-text-muted{ color: var(--gg-color-text-secondary); }

/* Eyebrow / overline — the goldgas kicker label */
.gg-eyebrow {
  display: inline-block;
  font-family: var(--gg-font-display);
  font-size: var(--gg-font-size-sm);
  font-weight: var(--gg-font-weight-semibold);
  letter-spacing: var(--gg-letter-spacing-overline);
  text-transform: uppercase;
  color: var(--gg-color-primary-strong);
}

/* Gold underline accent under a heading (signature element) */
.gg-heading--accent {
  position: relative;
  padding-bottom: var(--gg-space-3);
}
.gg-heading--accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: var(--gg-border-width-accent);
  border-radius: var(--gg-radius-pill);
  background: var(--gg-gradient-gold);
}
.gg-heading--accent.gg-heading--center { text-align: center; }
.gg-heading--accent.gg-heading--center::after { left: 50%; transform: translateX(-50%); }

/* Highlighter marker (from the deck) */
.gg-mark {
  background: linear-gradient(transparent 55%, var(--gg-color-marker) 55%);
  padding: 0 0.15em;
}

/* Links (base) — see components/link.css for the full link component */
a { color: var(--gg-color-text-link); text-underline-offset: 0.18em; }
a:hover { color: var(--gg-color-text-link-hover); }

code, kbd, samp, pre { font-family: var(--gg-font-mono); font-size: 0.9em; }

/* --------------------------------------------------------------------------
   Global focus-visible — AA-safe (never bright-gold-on-white alone)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--gg-border-width-thick) solid var(--gg-color-focus);
  outline-offset: 2px;
  border-radius: var(--gg-radius-xs);
}
/* Elements that draw their own ring (buttons, inputs) opt out of the outline */
.gg-btn:focus-visible,
.gg-field__control:focus-visible,
.gg-toggle__input:focus-visible + .gg-toggle__track {
  outline: none;
}

/* --------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------- */
.gg-container {
  width: 100%;
  max-width: var(--gg-container-max);
  margin-inline: auto;
  padding-inline: var(--gg-container-gutter);
}
.gg-container--wide   { max-width: var(--gg-container-wide); }
.gg-container--narrow { max-width: var(--gg-container-narrow); }

/* Vertical section rhythm */
.gg-section { padding-block: var(--gg-space-11); }
@media (max-width: 768px) { .gg-section { padding-block: var(--gg-space-9); } }
.gg-section--tight { padding-block: var(--gg-space-9); }

/* Surfaces */
.gg-surface       { background: var(--gg-color-surface); border-radius: var(--gg-radius-xl); }
.gg-surface--cool { background: var(--gg-color-surface-cool); }
.gg-surface--gold { background: var(--gg-color-surface-gold); }
.gg-surface--dark { background: var(--gg-color-surface-dark); color: var(--gg-color-on-dark); }
.gg-surface--dark :where(h1,h2,h3,h4,h5,h6) { color: var(--gg-color-on-dark); }

/* Stack (vertical flow) */
.gg-stack { display: flex; flex-direction: column; }
.gg-stack > * + * { margin-top: var(--gg-space-4); }
.gg-stack--sm > * + * { margin-top: var(--gg-space-2); }
.gg-stack--lg > * + * { margin-top: var(--gg-space-6); }

/* Cluster (horizontal wrap with gap) */
.gg-cluster { display: flex; flex-wrap: wrap; gap: var(--gg-space-3); align-items: center; }

/* Responsive auto grid */
.gg-grid { display: grid; gap: var(--gg-space-6); }
.gg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.gg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gg-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gg-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
@media (max-width: 992px) {
  .gg-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gg-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gg-grid--2, .gg-grid--3, .gg-grid--4 { grid-template-columns: 1fr; }
}

/* Helpers */
.gg-text-center { text-align: center; }
.gg-mx-auto { margin-inline: auto; }
.gg-mt-0 { margin-top: 0; }
.gg-flow-tight > * + * { margin-top: var(--gg-space-2); }

/* Accessible visually-hidden (keeps content for screen readers) */
.gg-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Skip link */
.gg-skip-link {
  position: absolute; left: var(--gg-space-3); top: -100%;
  z-index: var(--gg-z-toast);
  background: var(--gg-color-surface); color: var(--gg-color-text);
  padding: var(--gg-space-2) var(--gg-space-4);
  border-radius: var(--gg-radius-md);
  box-shadow: var(--gg-shadow-md);
  transition: top var(--gg-duration-base) var(--gg-ease-out);
}
.gg-skip-link:focus { top: var(--gg-space-3); }

/* ===== components/button.css ===== */

/* ==========================================================================
   Component: Button — .gg-btn
   Variants: primary (gold), secondary (eco green), ghost, outline, dark, link
   Sizes: sm, (default), lg · States: hover, active, focus-visible, disabled, loading
   ========================================================================== */

.gg-btn {
  --_gg-btn-bg: var(--gg-color-primary);
  --_gg-btn-fg: var(--gg-color-on-primary);
  --_gg-btn-bg-hover: var(--gg-color-primary-hover);
  --_gg-btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gg-space-2);
  font-family: var(--gg-font-display);
  font-size: var(--gg-font-size-base);
  font-weight: var(--gg-font-weight-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  padding: var(--gg-space-3) var(--gg-space-6);
  min-height: 2.75rem;          /* 44px tap target */
  border: var(--gg-border-width) solid var(--_gg-btn-border);
  border-radius: var(--gg-radius-pill);
  background: var(--_gg-btn-bg);
  color: var(--_gg-btn-fg);
  cursor: pointer;
  user-select: none;
  transition: var(--gg-transition-colors), transform var(--gg-duration-fast) var(--gg-ease-out);
}

.gg-btn:hover { background: var(--_gg-btn-bg-hover); }
.gg-btn:active { transform: translateY(1px); }

.gg-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gg-color-surface), 0 0 0 4px var(--gg-color-focus);
}

.gg-btn:disabled,
.gg-btn[aria-disabled="true"],
.gg-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  pointer-events: none;
}

.gg-btn__icon { width: 1.15em; height: 1.15em; flex: none; }

/* --- Variants --------------------------------------------------------- */

/* Primary: brand gold, near-black text, signature gradient on hover */
.gg-btn--primary {
  --_gg-btn-bg: var(--gg-color-primary);
  --_gg-btn-fg: var(--gg-color-on-primary);
}
.gg-btn--primary:hover {
  background: var(--gg-gradient-gold);
  box-shadow: var(--gg-shadow-gold);
}

/* Secondary: eco green, white text (AA via eco-strong fill) */
.gg-btn--secondary {
  --_gg-btn-bg: var(--gg-color-eco-strong);
  --_gg-btn-fg: var(--gg-color-on-eco);
  --_gg-btn-bg-hover: var(--gg-green-800);
}

/* Outline: gold-strong text + border on transparent */
.gg-btn--outline {
  --_gg-btn-bg: transparent;
  --_gg-btn-fg: var(--gg-color-primary-strong);
  --_gg-btn-border: var(--gg-color-border-strong);
}
.gg-btn--outline:hover {
  background: var(--gg-color-surface-gold);
  border-color: var(--gg-color-primary);
  color: var(--gg-color-primary-strong);
}

/* Ghost: text-only with subtle hover wash */
.gg-btn--ghost {
  --_gg-btn-bg: transparent;
  --_gg-btn-fg: var(--gg-color-text);
}
.gg-btn--ghost:hover { background: var(--gg-color-surface-sunken); }

/* Dark: near-black pill (e.g. "Kundenportal") */
.gg-btn--dark {
  --_gg-btn-bg: var(--gg-color-surface-dark);
  --_gg-btn-fg: var(--gg-color-on-dark);
  --_gg-btn-bg-hover: var(--gg-neutral-800);
}

/* Link-style button */
.gg-btn--link {
  --_gg-btn-bg: transparent;
  --_gg-btn-fg: var(--gg-color-text-link);
  min-height: auto;
  padding: var(--gg-space-1) var(--gg-space-2);
  border-radius: var(--gg-radius-sm);
}
.gg-btn--link:hover { background: transparent; color: var(--gg-color-text-link-hover); text-decoration: underline; }

/* --- Sizes ------------------------------------------------------------ */
.gg-btn--sm { font-size: var(--gg-font-size-sm); padding: var(--gg-space-2) var(--gg-space-4); min-height: 2.25rem; }
.gg-btn--lg { font-size: var(--gg-font-size-md); padding: var(--gg-space-4) var(--gg-space-8); min-height: 3.25rem; }
.gg-btn--block { display: flex; width: 100%; }

/* --- Loading ---------------------------------------------------------- */
.gg-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.gg-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1.1em; height: 1.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--_gg-btn-fg);
  animation: gg-spin 0.6s linear infinite;
}
.gg-btn--primary.is-loading::after,
.gg-btn--outline.is-loading::after,
.gg-btn--ghost.is-loading::after { color: var(--gg-color-text); }

@keyframes gg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gg-btn.is-loading::after { animation-duration: 1.5s; }
}

/* ===== components/link.css ===== */

/* ==========================================================================
   Component: Text link — .gg-link
   ========================================================================== */

.gg-link {
  color: var(--gg-color-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--gg-gold-300);
  border-radius: var(--gg-radius-xs);
  transition: var(--gg-transition-colors);
}
.gg-link:hover {
  color: var(--gg-color-text-link-hover);
  text-decoration-color: currentColor;
}
.gg-link:focus-visible {
  outline: var(--gg-border-width-thick) solid var(--gg-color-focus);
  outline-offset: 2px;
}

/* Subtle link: inherits text color, gold underline on hover */
.gg-link--subtle {
  color: var(--gg-color-text);
  text-decoration: none;
}
.gg-link--subtle:hover {
  color: var(--gg-color-text);
  text-decoration: underline;
  text-decoration-color: var(--gg-color-primary);
}

/* Arrow link — the goldgas "Zur Übersicht ›" pattern */
.gg-link--arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-1);
  font-family: var(--gg-font-display);
  font-weight: var(--gg-font-weight-semibold);
  text-decoration: none;
  color: var(--gg-color-primary-strong);
}
.gg-link--arrow::after {
  content: "›";
  font-size: 1.2em;
  line-height: 1;
  transition: transform var(--gg-duration-base) var(--gg-ease-out);
}
.gg-link--arrow:hover { color: var(--gg-color-text-link-hover); }
.gg-link--arrow:hover::after { transform: translateX(3px); }

/* On dark surfaces */
.gg-surface--dark .gg-link,
.gg-link--on-dark { color: var(--gg-gold-300); text-decoration-color: var(--gg-gold-600); }
.gg-surface--dark .gg-link:hover,
.gg-link--on-dark:hover { color: var(--gg-gold-200); }

/* ===== components/badge.css ===== */

/* ==========================================================================
   Component: Badge / Tag — .gg-badge
   Pill-shaped. Variants: gold, soft, eco, neutral, outline, dashed, dark.
   Modernization signature from the deck's "Verantwortlich" pills.
   ========================================================================== */

.gg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-2);
  font-family: var(--gg-font-display);
  font-size: var(--gg-font-size-sm);
  font-weight: var(--gg-font-weight-semibold);
  line-height: 1;
  padding: 0.4em 0.85em;
  border-radius: var(--gg-radius-pill);
  border: var(--gg-border-width) solid transparent;
  white-space: nowrap;
}

.gg-badge__dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex: none; }

.gg-badge--gold    { background: var(--gg-color-primary); color: var(--gg-color-on-primary); }
.gg-badge--soft    { background: var(--gg-color-surface-gold); color: var(--gg-color-primary-strong); }
.gg-badge--eco     { background: var(--gg-color-eco-strong); color: var(--gg-color-on-eco); }
.gg-badge--eco-soft{ background: var(--gg-green-100); color: var(--gg-green-800); }
.gg-badge--neutral { background: var(--gg-color-surface-sunken); color: var(--gg-color-text-secondary); }
.gg-badge--dark    { background: var(--gg-color-surface-dark); color: var(--gg-color-on-dark); }

.gg-badge--outline { background: transparent; border-color: var(--gg-color-border-strong); color: var(--gg-color-text); }
.gg-badge--dashed  { background: transparent; border-style: dashed; border-color: var(--gg-color-primary); color: var(--gg-color-primary-strong); }

/* State badges */
.gg-badge--success { background: var(--gg-color-success-surface); color: var(--gg-color-success-text); }
.gg-badge--warning { background: var(--gg-color-warning-surface); color: var(--gg-color-warning-text); }
.gg-badge--error   { background: var(--gg-color-error-surface);   color: var(--gg-color-error-text); }
.gg-badge--info    { background: var(--gg-color-info-surface);    color: var(--gg-color-info-text); }

.gg-badge--sm { font-size: var(--gg-font-size-xs); padding: 0.3em 0.7em; }

/* ===== components/form.css ===== */

/* ==========================================================================
   Component: Forms — .gg-field, .gg-input, .gg-select, .gg-check, .gg-toggle
   Labels · helper text · error/success states · all keyboard accessible
   ========================================================================== */

/* --- Field wrapper ---------------------------------------------------- */
.gg-field { display: flex; flex-direction: column; gap: var(--gg-space-2); }

.gg-field__label {
  font-family: var(--gg-font-display);
  font-size: var(--gg-font-size-sm);
  font-weight: var(--gg-font-weight-semibold);
  color: var(--gg-color-text);
}
.gg-field__label .gg-field__req { color: var(--gg-color-error-text); margin-left: 0.15em; }
.gg-field__label .gg-field__optional { color: var(--gg-color-text-secondary); font-weight: var(--gg-font-weight-regular); }

.gg-field__hint {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-color-text-secondary);
  line-height: var(--gg-line-height-normal);
}
.gg-field__message {
  display: flex;
  align-items: flex-start;
  gap: var(--gg-space-1);
  font-size: var(--gg-font-size-sm);
  line-height: var(--gg-line-height-normal);
}
.gg-field__message--error   { color: var(--gg-color-error-text); }
.gg-field__message--success { color: var(--gg-color-success-text); }

/* --- Text input / select control ------------------------------------- */
.gg-field__control,
.gg-input,
.gg-select {
  width: 100%;
  font-family: var(--gg-font-body);
  font-size: var(--gg-font-size-base);
  line-height: var(--gg-line-height-normal);
  color: var(--gg-color-text);
  background: var(--gg-color-surface);
  border: var(--gg-border-width) solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-3) var(--gg-space-4);
  min-height: 2.75rem;
  transition: var(--gg-transition-colors);
  appearance: none;
}
.gg-input::placeholder { color: var(--gg-color-text-muted); }

.gg-field__control:hover,
.gg-input:hover,
.gg-select:hover { border-color: var(--gg-color-border-strong); }

.gg-field__control:focus-visible,
.gg-input:focus-visible,
.gg-select:focus-visible {
  outline: none;
  border-color: var(--gg-color-primary);
  box-shadow: 0 0 0 3px var(--gg-color-focus-halo);
}

.gg-input:disabled,
.gg-select:disabled,
.gg-field__control:disabled {
  background: var(--gg-color-surface-sunken);
  color: var(--gg-color-text-muted);
  cursor: not-allowed;
  border-color: var(--gg-color-border-subtle);
}

textarea.gg-input { min-height: 6rem; resize: vertical; }

/* Select chevron */
.gg-select {
  padding-right: var(--gg-space-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234A453C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--gg-space-4) center;
  background-size: 1rem;
  cursor: pointer;
}

/* Input with leading/trailing adornment (e.g. "kWh/Jahr") */
.gg-input-group { position: relative; display: flex; align-items: stretch; }
.gg-input-group .gg-input { padding-right: 5.5rem; }
.gg-input-group__suffix {
  position: absolute;
  right: var(--gg-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gg-color-text-secondary);
  font-size: var(--gg-font-size-sm);
  pointer-events: none;
}

/* Validation states (apply to control or set .gg-field.is-error on wrapper) */
.gg-field.is-error .gg-field__control,
.gg-field.is-error .gg-input,
.gg-field.is-error .gg-select,
.gg-input[aria-invalid="true"] {
  border-color: var(--gg-color-error);
}
.gg-field.is-error .gg-field__control:focus-visible,
.gg-input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--gg-error-100);
}
.gg-field.is-success .gg-field__control,
.gg-field.is-success .gg-input,
.gg-field.is-success .gg-select { border-color: var(--gg-color-success); }

/* --- Checkbox & Radio ------------------------------------------------- */
.gg-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--gg-space-3);
  cursor: pointer;
  font-size: var(--gg-font-size-base);
  line-height: var(--gg-line-height-normal);
}
.gg-check__input {
  appearance: none;
  flex: none;
  width: 1.4rem; height: 1.4rem;
  margin-top: 0.1em;
  border: var(--gg-border-width-thick) solid var(--gg-color-border-strong);
  background: var(--gg-color-surface);
  cursor: pointer;
  transition: var(--gg-transition-colors);
}
.gg-check__input[type="checkbox"] { border-radius: var(--gg-radius-xs); }
.gg-check__input[type="radio"]    { border-radius: var(--gg-radius-circle); }

.gg-check__input:checked {
  background-color: var(--gg-color-primary);
  border-color: var(--gg-color-primary);
}
.gg-check__input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A1712' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.95rem;
}
.gg-check__input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--gg-color-on-primary) 32%, transparent 36%);
}
.gg-check__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gg-color-focus-halo);
}
.gg-check__input:disabled { opacity: 0.5; cursor: not-allowed; }
.gg-check:has(.gg-check__input:disabled) { cursor: not-allowed; color: var(--gg-color-text-muted); }
.gg-check__text { color: var(--gg-color-text); }

/* --- Toggle / Switch -------------------------------------------------- */
.gg-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-3);
  cursor: pointer;
}
.gg-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.gg-toggle__track {
  position: relative;
  width: 3.25rem; height: 1.85rem;
  flex: none;
  background: var(--gg-color-border-strong);
  border-radius: var(--gg-radius-pill);
  transition: background-color var(--gg-duration-base) var(--gg-ease-out);
}
.gg-toggle__track::after {
  content: "";
  position: absolute;
  top: 0.22rem; left: 0.22rem;
  width: 1.4rem; height: 1.4rem;
  background: var(--gg-neutral-0);
  border-radius: 50%;
  box-shadow: var(--gg-shadow-sm);
  transition: transform var(--gg-duration-base) var(--gg-ease-out);
}
.gg-toggle__input:checked + .gg-toggle__track { background: var(--gg-color-primary); }
.gg-toggle__input:checked + .gg-toggle__track::after { transform: translateX(1.4rem); }
.gg-toggle__input:focus-visible + .gg-toggle__track {
  box-shadow: 0 0 0 3px var(--gg-color-focus-halo);
}
.gg-toggle__input:disabled + .gg-toggle__track { opacity: 0.5; }

/* --- Segmented control (Gas / Strom) ---------------------------------- */
.gg-segmented {
  display: inline-flex;
  padding: var(--gg-space-1);
  background: var(--gg-color-surface-sunken);
  border-radius: var(--gg-radius-pill);
  gap: var(--gg-space-1);
}
.gg-segmented__option {
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-2);
  font-family: var(--gg-font-display);
  font-weight: var(--gg-font-weight-semibold);
  font-size: var(--gg-font-size-sm);
  padding: var(--gg-space-2) var(--gg-space-5);
  border-radius: var(--gg-radius-pill);
  color: var(--gg-color-text-secondary);
  cursor: pointer;
  transition: var(--gg-transition-colors);
}
.gg-segmented__option:hover { color: var(--gg-color-text); }
.gg-segmented__option[aria-pressed="true"],
.gg-segmented__option.is-active {
  background: var(--gg-color-surface-dark);
  color: var(--gg-color-on-dark);
  box-shadow: var(--gg-shadow-sm);
}
.gg-segmented__option:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gg-color-focus-halo); }
.gg-segmented__icon { width: 1.05em; height: 1.05em; }

/* ===== components/card.css ===== */

/* ==========================================================================
   Component: Card — .gg-card
   Variants: default, icon card, tariff/pricing card, feature card
   ========================================================================== */

.gg-card {
  display: flex;
  flex-direction: column;
  background: var(--gg-color-surface);
  border: var(--gg-border-width) solid var(--gg-color-border-subtle);
  border-radius: var(--gg-radius-xl);
  padding: var(--gg-space-7);
  box-shadow: var(--gg-shadow-sm);
  transition: box-shadow var(--gg-duration-base) var(--gg-ease-out),
              transform var(--gg-duration-base) var(--gg-ease-out);
}

/* Interactive card (whole card is a link/button) */
.gg-card--interactive { cursor: pointer; }
.gg-card--interactive:hover { box-shadow: var(--gg-shadow-lg); transform: translateY(-3px); }
.gg-card--interactive:focus-within { box-shadow: 0 0 0 3px var(--gg-color-focus-halo), var(--gg-shadow-md); }

.gg-card__title { font-size: var(--gg-font-size-xl); margin-bottom: var(--gg-space-2); }
.gg-card__body  { color: var(--gg-color-text-secondary); }
.gg-card__footer { margin-top: var(--gg-space-5); }

/* Surface variants */
.gg-card--cool { background: var(--gg-color-surface-cool); border-color: transparent; }
.gg-card--gold { background: var(--gg-color-surface-gold); border-color: transparent; }
.gg-card--dark { background: var(--gg-color-surface-dark); border-color: transparent; color: var(--gg-color-on-dark); }
.gg-card--dark .gg-card__body { color: var(--gg-neutral-300); }
.gg-card--flat { box-shadow: none; }
.gg-card--raised { box-shadow: var(--gg-shadow-md); }

/* --- Icon card -------------------------------------------------------- */
.gg-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--gg-radius-lg);
  background: var(--gg-color-surface-gold);
  color: var(--gg-color-primary-strong);
  margin-bottom: var(--gg-space-4);
}
.gg-card__icon svg { width: 1.6rem; height: 1.6rem; }
.gg-card__icon--eco { background: var(--gg-green-100); color: var(--gg-color-eco-strong); }

/* The card title with gold underline accent (matches site quick-links) */
.gg-card__title--accent { position: relative; padding-bottom: var(--gg-space-3); }
.gg-card__title--accent::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.5rem; height: var(--gg-border-width-accent);
  border-radius: var(--gg-radius-pill);
  background: var(--gg-gradient-gold);
}

/* --- Tariff / pricing card ------------------------------------------- */
.gg-tariff {
  display: flex;
  flex-direction: column;
  background: var(--gg-color-surface);
  border: var(--gg-border-width) solid var(--gg-color-border-subtle);
  border-radius: var(--gg-radius-xl);
  padding: var(--gg-space-7);
  box-shadow: var(--gg-shadow-sm);
  position: relative;
  overflow: hidden;
}
.gg-tariff--featured {
  border-color: var(--gg-color-primary);
  box-shadow: var(--gg-shadow-lg);
}
.gg-tariff--featured::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 5px;
  background: var(--gg-gradient-gold);
}
.gg-tariff__badge { position: absolute; top: var(--gg-space-5); right: var(--gg-space-5); }
.gg-tariff__name { font-size: var(--gg-font-size-lg); font-weight: var(--gg-font-weight-semibold); color: var(--gg-color-text-secondary); }
.gg-tariff__price {
  display: flex; align-items: baseline; gap: var(--gg-space-2);
  margin-block: var(--gg-space-3) var(--gg-space-1);
}
.gg-tariff__amount { font-family: var(--gg-font-display); font-size: var(--gg-font-size-4xl); font-weight: var(--gg-font-weight-extrabold); line-height: 1; }
.gg-tariff__period { color: var(--gg-color-text-secondary); font-size: var(--gg-font-size-base); }
.gg-tariff__note { color: var(--gg-color-text-secondary); font-size: var(--gg-font-size-sm); }

.gg-tariff__features { list-style: none; padding: 0; margin: var(--gg-space-6) 0; display: flex; flex-direction: column; gap: var(--gg-space-3); }
.gg-tariff__feature { display: flex; align-items: flex-start; gap: var(--gg-space-3); }
.gg-tariff__feature::before {
  content: "";
  flex: none;
  width: 1.35rem; height: 1.35rem;
  margin-top: 0.1em;
  background-color: var(--gg-color-eco-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm3.5 5.2l-4 4.2a.7.7 0 01-1 .02L4.6 8.6a.7.7 0 01.98-1l1.4 1.36 3.5-3.7a.7.7 0 011.02.96z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm3.5 5.2l-4 4.2a.7.7 0 01-1 .02L4.6 8.6a.7.7 0 01.98-1l1.4 1.36 3.5-3.7a.7.7 0 011.02.96z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gg-tariff__cta { margin-top: auto; }

/* ===== components/alert.css ===== */

/* ==========================================================================
   Component: Alert / Notice — .gg-alert
   Variants: info, success, warning, error. Full-tint surface + icon (no
   side-stripe borders). role="status" / role="alert" set in markup.
   ========================================================================== */

.gg-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--gg-space-3);
  padding: var(--gg-space-4) var(--gg-space-5);
  border-radius: var(--gg-radius-lg);
  border: var(--gg-border-width) solid transparent;
  background: var(--gg-color-info-surface);
  color: var(--gg-color-text);
}
.gg-alert__icon {
  flex: none;
  width: 1.4rem; height: 1.4rem;
  margin-top: 0.1em;
}
.gg-alert__content { flex: 1; min-width: 0; }
.gg-alert__title {
  font-family: var(--gg-font-display);
  font-weight: var(--gg-font-weight-semibold);
  margin-bottom: var(--gg-space-1);
}
.gg-alert__body { color: var(--gg-color-text-secondary); font-size: var(--gg-font-size-sm); line-height: var(--gg-line-height-normal); }
.gg-alert__close {
  flex: none;
  width: 1.75rem; height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gg-radius-sm);
  color: var(--gg-color-text-secondary);
  transition: var(--gg-transition-colors);
}
.gg-alert__close:hover { background: rgba(26,23,18,0.06); color: var(--gg-color-text); }

.gg-alert--info    { background: var(--gg-color-info-surface);    border-color: var(--gg-info-100); }
.gg-alert--info    .gg-alert__icon { color: var(--gg-color-info-text); }
.gg-alert--success { background: var(--gg-color-success-surface); border-color: var(--gg-success-100); }
.gg-alert--success .gg-alert__icon { color: var(--gg-color-success-text); }
.gg-alert--warning { background: var(--gg-color-warning-surface); border-color: var(--gg-warning-100); }
.gg-alert--warning .gg-alert__icon { color: var(--gg-color-warning-text); }
.gg-alert--error   { background: var(--gg-color-error-surface);   border-color: var(--gg-error-100); }
.gg-alert--error   .gg-alert__icon { color: var(--gg-color-error-text); }

/* ===== components/accordion.css ===== */

/* ==========================================================================
   Component: Accordion / FAQ — .gg-accordion
   Uses native <details>/<summary> so it works with zero JavaScript.
   Optional JS (js/components.js) adds single-open behaviour + smooth height.
   ========================================================================== */

.gg-accordion { display: flex; flex-direction: column; gap: var(--gg-space-3); }

.gg-accordion__item {
  background: var(--gg-color-surface);
  border: var(--gg-border-width) solid var(--gg-color-border-subtle);
  border-radius: var(--gg-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--gg-duration-base) var(--gg-ease-out);
}
.gg-accordion__item[open] { box-shadow: var(--gg-shadow-sm); }

.gg-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gg-space-4);
  padding: var(--gg-space-4) var(--gg-space-5);
  font-family: var(--gg-font-display);
  font-weight: var(--gg-font-weight-semibold);
  font-size: var(--gg-font-size-md);
  cursor: pointer;
  list-style: none;
  transition: var(--gg-transition-colors);
}
.gg-accordion__header::-webkit-details-marker { display: none; }
.gg-accordion__header:hover { color: var(--gg-color-primary-strong); }
.gg-accordion__header:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gg-color-focus);
}

.gg-accordion__icon {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--gg-color-primary-strong);
  transition: transform var(--gg-duration-base) var(--gg-ease-out);
}
.gg-accordion__icon::before {
  content: ""; width: 0.75rem; height: 0.75rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.gg-accordion__item[open] .gg-accordion__icon { transform: rotate(180deg); }

.gg-accordion__panel {
  padding: 0 var(--gg-space-5) var(--gg-space-5);
  color: var(--gg-color-text-secondary);
  line-height: var(--gg-line-height-relaxed);
}
.gg-accordion__panel > * + * { margin-top: var(--gg-space-3); }

/* Smooth open animation when JS sets the panel max-height (progressive) */
@media (prefers-reduced-motion: no-preference) {
  .gg-accordion__item[open] .gg-accordion__panel { animation: gg-accordion-in var(--gg-duration-slow) var(--gg-ease-out); }
}
@keyframes gg-accordion-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* FAQ layout: optional category tabs beside the accordion */
.gg-faq { display: grid; grid-template-columns: 220px 1fr; gap: var(--gg-space-8); align-items: start; }
@media (max-width: 768px) { .gg-faq { grid-template-columns: 1fr; gap: var(--gg-space-5); } }
.gg-faq__tabs { display: flex; flex-direction: column; gap: var(--gg-space-1); }
.gg-faq__tab {
  text-align: left;
  padding: var(--gg-space-3) var(--gg-space-4);
  border-radius: var(--gg-radius-md);
  font-family: var(--gg-font-display);
  font-weight: var(--gg-font-weight-medium);
  color: var(--gg-color-text-secondary);
  transition: var(--gg-transition-colors);
}
.gg-faq__tab:hover { background: var(--gg-color-surface-sunken); color: var(--gg-color-text); }
.gg-faq__tab[aria-selected="true"] { background: var(--gg-color-surface-dark); color: var(--gg-color-on-dark); }
@media (max-width: 768px) { .gg-faq__tabs { flex-direction: row; flex-wrap: wrap; } }

/* ===== components/table.css ===== */

/* ==========================================================================
   Component: Table — .gg-table
   Responsive (horizontal scroll on small screens). Zebra + hover optional.
   ========================================================================== */

.gg-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--gg-radius-lg);
  border: var(--gg-border-width) solid var(--gg-color-border-subtle);
}

.gg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gg-font-size-base);
  background: var(--gg-color-surface);
}

.gg-table caption {
  text-align: left;
  padding: var(--gg-space-4) var(--gg-space-5);
  color: var(--gg-color-text-secondary);
  font-size: var(--gg-font-size-sm);
}

.gg-table thead th {
  font-family: var(--gg-font-display);
  font-size: var(--gg-font-size-xs);
  font-weight: var(--gg-font-weight-semibold);
  letter-spacing: var(--gg-letter-spacing-overline);
  text-transform: uppercase;
  color: var(--gg-color-text-secondary);
  text-align: left;
  padding: var(--gg-space-4) var(--gg-space-5);
  border-bottom: var(--gg-border-width-thick) solid var(--gg-color-border);
  white-space: nowrap;
}

.gg-table tbody td {
  padding: var(--gg-space-4) var(--gg-space-5);
  border-top: var(--gg-border-width) solid var(--gg-color-divider);
  vertical-align: top;
  line-height: var(--gg-line-height-normal);
}

.gg-table tbody tr:first-child td { border-top: none; }

.gg-table--zebra tbody tr:nth-child(even) { background: var(--gg-color-surface-sunken); }
.gg-table--hover  tbody tr { transition: background-color var(--gg-duration-fast) var(--gg-ease-standard); }
.gg-table--hover  tbody tr:hover { background: var(--gg-color-surface-gold); }

.gg-table__num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.gg-table__highlight { font-weight: var(--gg-font-weight-semibold); color: var(--gg-color-primary-strong); }

/* Compact density */
.gg-table--compact thead th,
.gg-table--compact tbody td { padding: var(--gg-space-2) var(--gg-space-4); }

/* ===== components/header.css ===== */

/* ==========================================================================
   Component: Header + Navigation — .gg-header
   Sticky white bar · logo · primary nav · utility actions · mobile drawer
   Mobile nav toggled by js/components.js (works as a fallback :target too).
   ========================================================================== */

.gg-header {
  position: sticky;
  top: 0;
  z-index: var(--gg-z-header);
  background: var(--gg-color-surface);
  border-bottom: var(--gg-border-width) solid var(--gg-color-border-subtle);
}
.gg-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gg-space-6);
  min-height: 4.5rem;
  padding-block: var(--gg-space-3);
}
.gg-header__logo { display: inline-flex; align-items: center; flex: none; }
.gg-header__logo img, .gg-header__logo svg { height: 2.25rem; width: auto; }

.gg-header__nav { display: flex; align-items: center; gap: var(--gg-space-2); flex: 1; }
.gg-nav { display: flex; align-items: center; gap: var(--gg-space-1); }
.gg-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-2);
  font-family: var(--gg-font-display);
  font-weight: var(--gg-font-weight-medium);
  font-size: var(--gg-font-size-base);
  color: var(--gg-color-text);
  text-decoration: none;
  padding: var(--gg-space-2) var(--gg-space-3);
  border-radius: var(--gg-radius-md);
  white-space: nowrap;
  transition: var(--gg-transition-colors);
}
.gg-nav__link:hover { background: var(--gg-color-surface-sunken); color: var(--gg-color-text); }
.gg-nav__link[aria-current="page"] { color: var(--gg-color-primary-strong); }
.gg-nav__icon { width: 1.15em; height: 1.15em; color: var(--gg-color-primary-strong); }

.gg-header__actions { display: flex; align-items: center; gap: var(--gg-space-3); flex: none; }
.gg-header__iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--gg-radius-pill);
  color: var(--gg-color-text);
  transition: var(--gg-transition-colors);
}
.gg-header__iconbtn:hover { background: var(--gg-color-surface-sunken); }

/* Burger */
.gg-header__burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  border-radius: var(--gg-radius-md);
  color: var(--gg-color-text);
}
.gg-header__burger:hover { background: var(--gg-color-surface-sunken); }
.gg-header__burger svg { width: 1.5rem; height: 1.5rem; }

/* --- Responsive: stacked nav (no-JS) → collapsible drawer (with JS) ---- */
@media (max-width: 992px) {
  /* No-JS fallback: the inner row wraps and the nav stacks full-width,
     visibly, below the logo. The burger stays hidden because it does nothing
     without JS. This is the graceful-degradation baseline. */
  .gg-header__inner { flex-wrap: wrap; }
  .gg-header__nav {
    flex-basis: 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gg-space-2);
    padding-top: var(--gg-space-3);
  }
  .gg-nav { flex-direction: column; align-items: stretch; gap: var(--gg-space-1); width: 100%; }
  .gg-nav__link { padding: var(--gg-space-3) var(--gg-space-4); font-size: var(--gg-font-size-md); }
  .gg-header__nav .gg-header__actions { flex-direction: column; align-items: stretch; gap: var(--gg-space-2); margin-top: var(--gg-space-3); }
  .gg-header__nav .gg-header__actions .gg-btn { width: 100%; }

  /* JS-enhanced (.gg-js added by js/components.js): collapse into a drawer. */
  .gg-js .gg-header__burger { display: inline-flex; }
  .gg-js .gg-header__nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    order: initial;
    background: var(--gg-color-surface);
    padding: var(--gg-space-5);
    border-bottom: var(--gg-border-width) solid var(--gg-color-border);
    box-shadow: var(--gg-shadow-lg);
    transform: translateY(-120%);
    transition: transform var(--gg-duration-slow) var(--gg-ease-out);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
  }
  .gg-js .gg-header.is-open .gg-header__nav { transform: translateY(0); }
}

/* Pull utility actions to the right of nav on desktop */
@media (min-width: 992px) {
  .gg-header__nav { justify-content: flex-end; }
  .gg-header__nav .gg-nav { margin-right: auto; }
}

/* ===== components/footer.css ===== */

/* ==========================================================================
   Component: Footer — .gg-footer
   Light blue-gray surface (brand), link columns, legal row.
   ========================================================================== */

.gg-footer {
  background: var(--gg-color-surface-cool);
  color: var(--gg-color-text);
  padding-block: var(--gg-space-11) var(--gg-space-7);
}
.gg-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--gg-space-8);
}
@media (max-width: 992px) { .gg-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gg-space-7); } }
@media (max-width: 560px) { .gg-footer__grid { grid-template-columns: 1fr; } }

.gg-footer__brand { max-width: 28ch; }
.gg-footer__brand img, .gg-footer__brand svg { height: 2rem; width: auto; margin-bottom: var(--gg-space-4); }
.gg-footer__tagline { color: var(--gg-color-text-secondary); font-size: var(--gg-font-size-sm); }

.gg-footer__col-title {
  font-family: var(--gg-font-display);
  font-size: var(--gg-font-size-base);
  font-weight: var(--gg-font-weight-semibold);
  margin-bottom: var(--gg-space-4);
}
.gg-footer__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gg-space-2); }
.gg-footer__link {
  color: var(--gg-color-text);
  text-decoration: none;
  font-size: var(--gg-font-size-base);
  transition: var(--gg-transition-colors);
}
.gg-footer__link:hover { color: var(--gg-color-primary-strong); text-decoration: underline; }

.gg-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gg-space-4);
  margin-top: var(--gg-space-9);
  padding-top: var(--gg-space-6);
  border-top: var(--gg-border-width) solid rgba(26,23,18,0.12);
}
.gg-footer__legal { display: flex; flex-wrap: wrap; gap: var(--gg-space-5); }
.gg-footer__legal a { color: var(--gg-color-text-secondary); text-decoration: none; font-size: var(--gg-font-size-sm); }
.gg-footer__legal a:hover { color: var(--gg-color-text); text-decoration: underline; }
.gg-footer__copy { color: var(--gg-color-text-secondary); font-size: var(--gg-font-size-sm); }

.gg-footer__social { display: flex; gap: var(--gg-space-2); }
.gg-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--gg-radius-pill);
  background: var(--gg-color-surface);
  color: var(--gg-color-text);
  transition: var(--gg-transition-colors);
}
.gg-footer__social a:hover { background: var(--gg-color-primary); color: var(--gg-color-on-primary); }
.gg-footer__social svg { width: 1.2rem; height: 1.2rem; }

/* ===== components/hero.css ===== */

/* ==========================================================================
   Component: Hero — .gg-hero
   Two-column: copy (+ optional inline tariff calculator) and a photographic
   image masked into the goldgas organic arch (curved left edge). Signature.
   ========================================================================== */

.gg-hero { background: var(--gg-color-bg); overflow: clip; }
.gg-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--gg-space-9);
  padding-block: var(--gg-space-10);
}
@media (max-width: 992px) {
  .gg-hero__inner { grid-template-columns: 1fr; gap: var(--gg-space-7); padding-block: var(--gg-space-8); }
}

.gg-hero__content { max-width: 36rem; }
.gg-hero__title {
  font-size: clamp(2.25rem, 5.5vw, var(--gg-font-size-5xl));
  line-height: var(--gg-line-height-snug);
  font-weight: var(--gg-font-weight-extrabold);
  letter-spacing: var(--gg-letter-spacing-tight);
}
.gg-hero__subtitle {
  font-size: var(--gg-font-size-lg);
  color: var(--gg-color-text-secondary);
  margin-top: var(--gg-space-3);
}
.gg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gg-space-3); margin-top: var(--gg-space-6); }

/* Masked-arch image (curved left edge → rounded top-right) */
.gg-hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 40% 0 var(--gg-radius-2xl) var(--gg-radius-2xl) / 60% 0 var(--gg-radius-2xl) var(--gg-radius-2xl);
  overflow: hidden;
  box-shadow: var(--gg-shadow-lg);
}
.gg-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 992px) {
  .gg-hero__media { aspect-ratio: 16 / 10; border-radius: var(--gg-radius-2xl); }
}

/* Inline tariff calculator card sitting in the hero */
.gg-tariff-calc {
  background: var(--gg-color-surface);
  border: var(--gg-border-width) solid var(--gg-color-border-subtle);
  border-radius: var(--gg-radius-xl);
  box-shadow: var(--gg-shadow-md);
  padding: var(--gg-space-6);
  margin-top: var(--gg-space-6);
}
.gg-tariff-calc__label {
  font-family: var(--gg-font-display);
  font-weight: var(--gg-font-weight-semibold);
  margin-bottom: var(--gg-space-4);
  display: block;
}
.gg-tariff-calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gg-space-4); margin-block: var(--gg-space-4); }
@media (max-width: 480px) { .gg-tariff-calc__row { grid-template-columns: 1fr; } }
.gg-tariff-calc__cta { margin-top: var(--gg-space-2); }

/* Centered/simple hero variant (no media) */
.gg-hero--centered .gg-hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.gg-hero--centered .gg-hero__actions { justify-content: center; }

/* ===== components/cta.css ===== */

/* ==========================================================================
   Component: CTA section — .gg-cta
   Full-width call-to-action band. Variants: gold gradient, dark, soft.
   ========================================================================== */

.gg-cta {
  border-radius: var(--gg-radius-2xl);
  padding: var(--gg-space-10) var(--gg-space-9);
  text-align: center;
  background: var(--gg-color-surface-gold);
}
@media (max-width: 768px) { .gg-cta { padding: var(--gg-space-8) var(--gg-space-5); } }

.gg-cta__inner { max-width: 46rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--gg-space-4); }
.gg-cta__title { font-size: clamp(1.75rem, 3.5vw, var(--gg-font-size-3xl)); }
.gg-cta__text { color: var(--gg-color-text-secondary); font-size: var(--gg-font-size-md); }
.gg-cta__actions { display: flex; flex-wrap: wrap; gap: var(--gg-space-3); justify-content: center; margin-top: var(--gg-space-2); }

/* Gold gradient band (signature) */
.gg-cta--gold {
  background: var(--gg-gradient-gold);
  color: var(--gg-color-on-primary);
}
.gg-cta--gold .gg-cta__title { color: var(--gg-color-on-primary); }
.gg-cta--gold .gg-cta__text { color: rgba(26,23,18,0.75); }

/* Dark band — gold eyebrow + white headline (deck closing slide) */
.gg-cta--dark {
  background: var(--gg-gradient-dark);
  color: var(--gg-color-on-dark);
}
.gg-cta--dark .gg-cta__title { color: var(--gg-color-on-dark); }
.gg-cta--dark .gg-cta__text { color: var(--gg-neutral-300); }
.gg-cta--dark .gg-eyebrow { color: var(--gg-gold-400); }

/* ===== components/trustbar.css ===== */

/* ==========================================================================
   Component: Trust bar — .gg-trustbar
   Award seals / ratings row. Plus a rating block (.gg-rating) with stars.
   ========================================================================== */

.gg-trustbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gg-space-7);
  padding-block: var(--gg-space-6);
}
.gg-trustbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gg-space-2);
  text-align: center;
  color: var(--gg-color-text-secondary);
  max-width: 12rem;
}
.gg-trustbar__seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.5rem; height: 4.5rem;
  border-radius: var(--gg-radius-circle);
  background: var(--gg-color-surface);
  border: var(--gg-border-width) solid var(--gg-color-border-subtle);
  box-shadow: var(--gg-shadow-xs);
  color: var(--gg-color-primary-strong);
}
.gg-trustbar__seal svg { width: 2rem; height: 2rem; }
.gg-trustbar__title { font-family: var(--gg-font-display); font-weight: var(--gg-font-weight-semibold); color: var(--gg-color-text); font-size: var(--gg-font-size-sm); }
.gg-trustbar__sub { font-size: var(--gg-font-size-xs); }

/* --- Rating block (e.g. CHECK24 4,5/5) -------------------------------- */
.gg-rating { display: inline-flex; align-items: center; gap: var(--gg-space-3); }
.gg-rating__stars { display: inline-flex; gap: 0.1rem; color: var(--gg-color-primary); }
.gg-rating__stars svg { width: 1.25rem; height: 1.25rem; }
.gg-rating__star--empty { color: var(--gg-color-border-strong); }
.gg-rating__score { font-family: var(--gg-font-display); font-weight: var(--gg-font-weight-bold); }
.gg-rating__count { color: var(--gg-color-text-secondary); font-size: var(--gg-font-size-sm); }

/* Compact inline trust strip (logos) */
.gg-trustbar--logos { gap: var(--gg-space-9); opacity: 0.95; }
.gg-trustbar--logos .gg-trustbar__item { flex-direction: row; color: var(--gg-color-text); font-weight: var(--gg-font-weight-semibold); }