/* girocard — Pack-Theme-CSS (gebündelt aus dem Prototyp v0.3.0: tokens + style.css). */
/* girocard — webfont declarations, matched to the LIVE site girocard.eu.

   The live site self-hosts ONE brand family it calls "Girocard" (the Giro Sans
   typeface) in exactly five weights, with this weight mapping:

     300  Light       (Giro-Light)
     400  Regular     (Giro-Regular)
     700  Semibold    (Giro-Semibold)   ← note: 700 renders SEMIBOLD, not bold
     800  Bold        (Giro-Bold)
     900  Black       (Giro-Black)

   There is NO separate body face (no DM Sans) on the live site — headings AND
   body both use "Girocard". We register the family under the SAME name and the
   SAME weight mapping so weights resolve identically to the live site, backing
   it with the locally bundled Giro Sans Pro .ttf cuts. */

/* ---- 300 · Light ---- */
@font-face {
  font-family: 'Girocard';
  src: url('../fonts/GiroSansPro-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Girocard';
  src: url('../fonts/GiroSansPro-LightIt.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}

/* ---- 400 · Regular ---- */
@font-face {
  font-family: 'Girocard';
  src: url('../fonts/GiroSansPro-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Girocard';
  src: url('../fonts/GiroSansPro-It.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---- 700 · Semibold (live maps 700 → Semibold) ---- */
@font-face {
  font-family: 'Girocard';
  src: url('../fonts/GiroSansPro-Semibold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Girocard';
  src: url('../fonts/GiroSansPro-SemiboldIt.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---- 800 · Bold (live maps 800 → Bold) ---- */
@font-face {
  font-family: 'Girocard';
  src: url('../fonts/GiroSansPro-Bold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Girocard';
  src: url('../fonts/GiroSansPro-BoldIt.ttf') format('truetype');
  font-weight: 800; font-style: italic; font-display: swap;
}

/* ---- 900 · Black ---- */
@font-face {
  font-family: 'Girocard';
  src: url('../fonts/GiroSansPro-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Girocard';
  src: url('../fonts/GiroSansPro-BlackIt.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* girocard — Colors, snapped to the LIVE site girocard.eu.
   Source of truth: the site's Elementor global palette (uicore_* design tokens),
   read straight from the live CSS on 2026-06-23:

     uicore_primary   #5DC4E9   light azure-cyan  → THE primary brand accent
     uicore_secondary #C9F0FF   pale cyan
     uicore_accent    #FFFF04   signal yellow (used very sparingly)
     uicore_headline  #1F3A6A   deep navy         → headings, primary buttons
     uicore_body      #666D80   cool grey-blue    → secondary body text
     uicore_dark      #0D0D12   near-black
     uicore_light     #ECEFF3   light grey surface
     uicore_white     #FFFFFF
     + named:         #000E34 strong body ink · #022549 dark navy ·
                      #F6F7FE / #F6F7FC section greys · #E1E1E6 hairline ·
                      #404346 dark grey

   NOTE: there is NO azure #009EE2 anywhere in the live palette. The primary is
   the LIGHT blue #5DC4E9; navy #1F3A6A carries headings and solid buttons. */
:root {
  /* ---- Primary: light azure-cyan (uicore_primary) ---- */
  --gc-hellblau: #5DC4E9;       /* PRIMARY accent — kickers, links-on-dark, fills */
  --gc-hellblau-700: #2BAFDC;   /* hover/pressed (derived) */
  --gc-hellblau-200: #C9F0FF;   /* uicore_secondary — pale cyan */
  --gc-hellblau-100: #E8F7FC;   /* tinted surface (derived) */
  --gc-hellblau-50:  #F3FBFE;   /* faint sky wash (derived) */

  /* ---- Navy (uicore_headline) ---- */
  --gc-nachtblau: #1F3A6A;      /* deep navy — headings, primary buttons on light */
  --gc-nachtblau-800: #022549;  /* dark navy band */
  --gc-nachtblau-900: #00163A;  /* deepest navy footer/hero base (derived from #000E34) */

  /* ---- Ink / body ---- */
  --gc-ink:  #000E34;           /* strong body text on light */
  --gc-body: #666D80;           /* uicore_body — secondary/muted text */
  --gc-dark: #0D0D12;           /* uicore_dark — near-black */

  /* ---- Neutral ramp (snapped to live greys) ---- */
  --gc-white: #FFFFFF;
  --gc-gray-900: #1A1C1E;
  --gc-gray-800: #404346;       /* live dark grey */
  --gc-gray-600: #666D80;       /* = body */
  --gc-gray-400: #9AA0A4;
  --gc-gray-300: #C9CDD0;
  --gc-gray-200: #E1E1E6;       /* live hairline border */
  --gc-gray-100: #ECEFF3;       /* uicore_light */
  --gc-gray-50:  #F6F7FE;       /* live section grey */
  --gc-gray-50b: #F6F7FC;       /* live section grey (variant) */

  /* ---- Signal / semantic accents (used sparingly) ---- */
  --gc-gelb:  #FFFF04;          /* uicore_accent — signal yellow */
  --gc-gruen: #36C26A;          /* success / Zahlungsgarantie ticks */
  --gc-orange:#FF9500;
  --gc-rot:   #E5392E;

  /* ---- Legacy alias: older components reference --gc-blau as "the brand blue".
     The live brand blue is the LIGHT one, so this now points at the primary. ---- */
  --gc-blau: var(--gc-hellblau);
  --gc-blau-600: var(--gc-hellblau-700);
  --gc-blau-700: var(--gc-nachtblau);

  /* ---- Semantic text roles ---- */
  --text-strong: var(--gc-nachtblau);  /* headings — navy */
  --text-body: var(--gc-ink);          /* body copy on light — #000E34 */
  --text-muted: var(--gc-body);        /* secondary — #666D80 */
  --text-on-dark: var(--gc-white);
  --text-accent: var(--gc-hellblau);   /* kickers / eyebrows — light blue */
  --text-link: var(--gc-nachtblau);    /* inline text links — navy (per live) */

  /* ---- Surfaces ---- */
  --surface-page: var(--gc-white);
  --surface-muted: var(--gc-gray-50);  /* #F6F7FE light section */
  --surface-light: var(--gc-gray-100); /* #ECEFF3 */
  --surface-card: var(--gc-white);
  --surface-sky: var(--gc-hellblau-100);
  --surface-dark: var(--gc-nachtblau);
  --surface-darker: var(--gc-nachtblau-900);

  /* ---- Borders ---- */
  --border-subtle: var(--gc-gray-200);  /* #E1E1E6 */
  --border-default: var(--gc-gray-300);
  --border-accent: var(--gc-hellblau);

  /* ---- Brand roles ---- */
  --brand-primary: var(--gc-hellblau); /* light blue accent */
  --brand-ink: var(--gc-nachtblau);    /* navy */

  /* ---- Button roles (live: navy on light, light-blue on dark, navy text-link) ---- */
  --btn-primary-bg: var(--gc-nachtblau);
  --btn-primary-fg: var(--gc-white);
  --btn-ondark-bg: var(--gc-hellblau);
  --btn-ondark-fg: #000000;        /* live: black text on light-blue buttons */
  --btn-text-fg: var(--gc-nachtblau);

  --success: var(--gc-gruen);
  --warning: var(--gc-orange);
  --danger: var(--gc-rot);
  --info: var(--gc-hellblau);

  /* Soft cool shadow used on white cards across the site */
  --shadow-card: 0 12px 32px rgba(15, 42, 90, 0.10);
  --shadow-card-sm: 0 4px 14px rgba(15, 42, 90, 0.08);
  --shadow-focus: 0 0 0 3px rgba(93, 196, 233, 0.45);  /* light-blue focus ring */

  /* Subtle blue wash used behind some sections (light, not a heavy gradient) */
  --wash-sky: linear-gradient(180deg, var(--gc-hellblau-50) 0%, var(--gc-white) 100%);
  --gradient-dark: linear-gradient(160deg, var(--gc-nachtblau) 0%, var(--gc-nachtblau-900) 100%);
}

/* girocard — Typography, matched to the LIVE site girocard.eu.
   ONE family — "Girocard" (the Giro Sans typeface) — for headings AND body,
   exactly like the live site (there is no separate body face). Weights resolve
   via fonts.css: 300 Light · 400 Regular · 700 Semibold · 800 Bold · 900 Black.

   Live measurements (DOM audit of 10 sub-pages): H1 banner 74px w800 white;
   H2 on white 52px or 36px #1F3A6A w800; H3 card titles 27px w800; kicker 16px
   #5DC4E9 w800 uppercase; intro body 18px, card body 15–16px; body ink #000E34.
   Headings are sentence-case and often end with a period — never uppercase-black. */

:root {
  --font-display: 'Girocard', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Girocard', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weights — mapped to the live faces (no 500/600 cut exists on the site) */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-semibold: 700; /* @kind font — live "Semibold" is weight 700 */
  --fw-bold: 800; /* @kind font — live "Bold" is weight 800 */
  --fw-black: 900; /* @kind font */

  /* Type scale (rem, 16px base) — snapped to live px sizes */
  --fs-display: 4.625rem;  /* 74px — banner H1 */
  --fs-h1: 3.25rem;        /* 52px — large section heading */
  --fs-h2: 2.25rem;        /* 36px — standard section heading */
  --fs-h3: 1.6875rem;      /* 27px — card title (most common heading on site) */
  --fs-h4: 1.25rem;        /* 20px */
  --fs-lead: 1.125rem;     /* 18px — intro / lead paragraph */
  --fs-body: 1rem;         /* 16px — card / running body */
  --fs-sm: 0.9375rem;      /* 15px */
  --fs-xs: 0.8125rem;      /* 13px */

  /* Line heights */
  --lh-tight: 1.1;  /* @kind other — big headings */
  --lh-snug: 1.2;   /* @kind other */
  --lh-normal: 1.6; /* @kind other — body */
  --lh-relaxed: 1.7;/* @kind other */

  /* Letter spacing — the live site does NOT track headings (measured: normal) */
  --ls-display: normal; /* @kind other */
  --ls-heading: normal; /* @kind other */
  --ls-caps: 0.08em;     /* @kind other — uppercase kickers */
  --ls-body: 0;          /* @kind other */
}

/* Heading convention: navy (#1F3A6A), bold (w800), sentence case, often with a
   trailing period ("Bezahlen made in Germany."). NEVER uppercase-black. */
.gc-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}
.gc-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--text-strong); }
.gc-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--text-strong); }
.gc-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--text-strong); }
.gc-eyebrow { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-accent); }
.gc-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-body); }
.gc-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); }
.gc-small { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }

/* girocard — Spacing, radii, shadows, motion — matched to the LIVE site.
   Live layout audit: standard section padding 88px 32px; banner padding
   224px 32px 128px 96px; boxed content width 1504px. Buttons are 6px-radius
   rectangles (NOT pills) padded 12px 25px; cards 16px; content images 20px. */
:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Live layout rhythm */
  --space-section: 5.5rem;   /* 88px — standard section vertical padding */
  --space-section-x: 2rem;   /* 32px — standard section horizontal padding */
  --pad-section: 88px 32px;  /* the live "abs-norm-topbottom" section padding */
  --pad-banner: 224px 32px 128px 96px; /* site hero/banner padding */

  /* Radii — live geometry */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;     /* generic cards */
  --radius-xl: 24px;
  --radius-btn: 6px;     /* LIVE button radius (rectangular, not pill) */
  --radius-card: 16px;   /* live content cards */
  --radius-image: 20px;  /* live content images */
  --radius-pill: 999px;  /* badges / header nav pills only */

  /* Button padding (live: 12px 25px) */
  --btn-pad-sm: 9px 18px;
  --btn-pad-md: 12px 25px;
  --btn-pad-lg: 15px 32px;

  /* Shadows — light, cool-tinted, never harsh */
  --shadow-xs: 0 1px 2px rgba(31, 58, 106, 0.06);
  --shadow-sm: 0 2px 8px rgba(31, 58, 106, 0.08);
  --shadow-md: 0 6px 20px rgba(31, 58, 106, 0.10);
  --shadow-lg: 0 16px 40px rgba(16, 35, 71, 0.16);
  --shadow-card: 0 12px 32px rgba(15, 42, 90, 0.10);
  --shadow-focus: 0 0 0 3px rgba(93, 196, 233, 0.45); /* light-blue focus ring */

  /* Borders */
  --border-width: 1px; /* @kind other */
  --border-width-strong: 2px; /* @kind other */

  /* Motion — calm, confident easing; gentle fades, no bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* Layout */
  --container-max: 1504px;  /* live boxed content width */
  --container-wide: 1200px; /* narrower inner grids */
  --container-prose: 680px; /* @kind other */
}

/* ==========================================================================
   girocard — Mr.-Giro-Kampagnen-Landingpage
   Nachbau der final abgestimmten Figma-Vorlage (la red, Frames 216/217).
   Basis: girocard Design-System (tokens/) — self-hosted Giro Sans Pro.
   ========================================================================== */


:root {
  /* Flächenfarben, aus der Vorlage gemessen */
  --lp-navy:        #000E34;   /* dunkle Sektionen + Footer */
  --lp-sky:         #5DC4E9;   /* hellblaue Sektionen + Buttons */
  --lp-card-dark:   #1A2749;   /* Vorteils-Karten auf Navy */
  --lp-card-sky:    #F2FBFF;   /* Vorteils-Karten auf Hellblau */
  --lp-card-tile:   #F6F6FE;   /* Zahlen-Kacheln + FAQ */
}

/* ---------- Reset / Basis ---------- */
/* Resets in :where() (Spezifität 0,0,1): jede gc-*-Klassenregel gewinnt.
   (v1.0.2-Bug: .zeus-section :is(…) = 0,1,1 nullte ALLE Klassen-Margins.) */
.zeus-section, .zeus-section *, .zeus-section *::before, .zeus-section *::after { box-sizing: border-box; }
:where(.zeus-section) :where(img, svg, video) { display: block; max-width: 100%; height: auto; }
:where(.zeus-section) :where(a) { color: inherit; text-decoration: none; }
:where(.zeus-section) :where(ul) { list-style: none; margin: 0; padding: 0; }
:where(.zeus-section) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote) { margin: 0; }
:where(.zeus-section) :where(button) { font: inherit; cursor: pointer; }
:where(.zeus-section) :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

/* ---------- Layout-Primitives ----------
   Live-Referenz girocard.eu (made-in-germany): Sektion trägt `padlr` (0 32px,
   mobil ≤767px 16px), innen boxed Content mit max-width 1504px. */
.padlr { padding-inline: 32px; }
.gc-container { width: 100%; max-width: 1504px; margin-inline: auto; }
.gc-section { padding-block: 88px; }
.gc-section--tight { padding-block: 72px; }
.gc-center { text-align: center; }

/* ---------- Typo-Bausteine ---------- */
/* Kicker/Subheadline — live girocard.eu: 13→18px, w800, IMMER italic + uppercase, lh 1 */
.gc-kicker {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-style: italic;
  font-size: clamp(0.8125rem, 0.6963rem + 0.4762vw, 1.125rem);  /* 13 → 18px */
  line-height: 1;
  text-transform: uppercase;
  color: var(--lp-sky);
  margin-bottom: 14px;
}
.gc-kicker--navy { color: var(--gc-nachtblau); }

.gc-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(3.5rem, 2.8452rem + 2.6667vw, 5.25rem);       /* 56 → 84px (live Hero-H1) */
  line-height: 1.05;
  color: var(--gc-white);
}
.gc-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.1875rem, 1.7188rem + 1.9048vw, 3.4375rem);  /* 35 → 55px (live H2 zentriert) */
  line-height: 1;
  color: var(--gc-nachtblau);
}
.gc-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.0625rem, 1.6299rem + 1.7714vw, 3.225rem);   /* 33 → 51.6px (live heading-medium) */
  line-height: 1;
  color: var(--gc-nachtblau);
}
.gc-h2--light, .gc-h3--light { color: var(--gc-white); }

.gc-copy {
  font-size: clamp(0.9375rem, 0.8679rem + 0.2857vw, 1.125rem);   /* 15 → 18px (live Copy) */
  line-height: 1.4;
  color: var(--gc-nachtblau);
}
.gc-copy--light { color: var(--gc-white); }
.gc-lead { max-width: 1010px; margin-inline: auto; }

/* Label über den Vorteils-Reihen — live identisch mit dem Kicker-Stil */
.gc-label {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-style: italic;
  font-size: clamp(0.8125rem, 0.6963rem + 0.4762vw, 1.125rem);   /* 13 → 18px */
  line-height: 1;
  text-transform: uppercase;
  color: var(--gc-nachtblau);
  margin-bottom: 20px;
}
.gc-label--light { color: var(--lp-sky); }  /* live: Hellblau auf dunkler Fläche */

/* ---------- Buttons — Live-Geometrie: 6px Radius ---------- */
.gc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--radius-btn);
  font-size: clamp(0.875rem, 0.7822rem + 0.3810vw, 1.125rem);  /* 14 → 18px (live Button) */
  line-height: 1;
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.gc-btn--sky   { background: var(--lp-sky); color: #000000; }
.gc-btn--sky:hover   { background: var(--gc-hellblau-700); }
.gc-btn--navy  { background: var(--lp-navy); color: var(--gc-white); }
.gc-btn--navy:hover  { background: var(--gc-nachtblau); }
.gc-btn--white { background: var(--gc-white); color: var(--gc-nachtblau); }
.gc-btn--white:hover { background: var(--gc-gray-100); }

/* ==========================================================================
   Hero  (Header/Navigation liefert später das WordPress-Theme)
   ========================================================================== */
.gc-hero {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--gc-white);
  background-color: var(--lp-navy);
  background-image: url('../media/hero-platzhalter.jpg');
  background-size: cover;
  background-position: center 40%;
  padding-block: 210px 130px;
}
.gc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,18,44,.55) 0%, rgba(6,18,44,.42) 50%, rgba(6,18,44,.55) 100%);
}
.gc-hero > * { position: relative; z-index: 1; }
.gc-hero__kicker {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-style: italic;
  font-size: clamp(0.8125rem, 0.6963rem + 0.4762vw, 1.125rem);  /* 13 → 18px */
  line-height: 1;
  text-transform: uppercase;
  color: var(--lp-sky);   /* live: Hellblau auf dem Hero-Bild */
  margin-bottom: 12px;
}
.gc-hero__copy {
  max-width: 760px;
  margin-inline: auto;
  margin-block-start: 22px;
  font-size: clamp(0.9375rem, 0.8679rem + 0.2857vw, 1.125rem);  /* 15 → 18px */
  line-height: 1.39;
}

/* ==========================================================================
   Zahlen-Kacheln
   ========================================================================== */
.gc-facts { padding-block: 64px 0; }
.gc-facts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gc-fact {
  background: var(--lp-card-tile);
  border-radius: var(--radius-card);
  padding: 34px 24px 38px;
  text-align: center;
}
.gc-fact__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.75rem);   /* 32 → 44px */
  line-height: 1.1;
  color: var(--gc-nachtblau);
}
.gc-fact__label {
  margin-block-start: 10px;
  font-size: clamp(0.9375rem, 0.8679rem + 0.2857vw, 1.125rem);  /* Copy-Klasse */
  line-height: 1.4;
  color: var(--gc-nachtblau);
}

/* ==========================================================================
   Zweispalter (Bild + Text)
   ========================================================================== */
.gc-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 68px;
  align-items: center;
}
.gc-split__media img { width: 100%; border-radius: var(--radius-image); }
.gc-split .gc-copy { margin-block-start: 20px; }
.gc-split__cta { margin-block-start: 28px; }

/* ==========================================================================
   „Auf welcher Seite stehst du?" — zwei Bildkacheln mit CTA
   ========================================================================== */
.gc-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-block-start: 44px; }
.gc-choice__item { position: relative; border-radius: var(--radius-image); overflow: hidden; display: block; }
.gc-choice__item img { width: 100%; aspect-ratio: 1224 / 1186; object-fit: cover; }
.gc-choice__cta {
  position: absolute;
  inset-inline: 28px;
  inset-block-end: 28px;
  background: var(--lp-sky);
  color: #000000;
  border-radius: var(--radius-btn);
  padding: 15px 20px;
  text-align: center;
  font-size: clamp(0.875rem, 0.7822rem + 0.3810vw, 1.125rem);  /* Button-Klasse 14 → 18px */
  line-height: 1;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.gc-choice__item:hover .gc-choice__cta { background: var(--gc-hellblau-700); }

/* ==========================================================================
   Vorteils-Karten
   ========================================================================== */
.gc-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.gc-benefit { border-radius: var(--radius-card); padding: 26px 24px 30px; }
.gc-benefit__icon { width: 63px; height: 63px; margin-bottom: 26px; }
.gc-benefit__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.25rem, 1.2036rem + 0.1905vw, 1.375rem);   /* 20 → 22px (live Card-Titel) */
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.gc-benefit__text {
  font-size: clamp(0.9375rem, 0.8679rem + 0.2857vw, 1.125rem); /* 15 → 18px (live Card-Text) */
  line-height: 1.4;
}

.gc-benefits--dark .gc-benefit { background: var(--lp-card-dark); }
.gc-benefits--dark .gc-benefit__title { color: var(--lp-sky); }
.gc-benefits--dark .gc-benefit__text  { color: var(--gc-white); }

.gc-benefits--light .gc-benefit { background: var(--lp-card-sky); }
.gc-benefits--light .gc-benefit__title { color: var(--gc-nachtblau); }
.gc-benefits--light .gc-benefit__text  { color: var(--gc-nachtblau); }

/* ==========================================================================
   Sektions-Flächen
   ========================================================================== */
.gc-band-navy { background: var(--lp-navy); color: var(--gc-white); }
.gc-band-sky  { background: var(--lp-sky);  color: var(--gc-nachtblau); }

/* ==========================================================================
   girocard-Shop
   ========================================================================== */
.gc-shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block-start: 44px; }
.gc-product {
  background: var(--gc-white);
  border-radius: var(--radius-card);
  padding: 14px 14px 24px;
  text-align: left;
}
.gc-product img { width: 100%; aspect-ratio: 736 / 788; object-fit: cover; border-radius: var(--radius-md); }
.gc-product__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  color: var(--gc-nachtblau);
  margin: 20px 0 6px;
  padding-inline: 10px;
}
.gc-product__price {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  color: var(--lp-sky);
  padding-inline: 10px;
}
.gc-shop__cta { display: flex; justify-content: center; margin-block-start: 40px; }

/* ==========================================================================
   Testimonial
   ========================================================================== */
.gc-quote { padding-block: 110px; text-align: center; }
.gc-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(1.625rem, 0.9rem + 2.2vw, 2.5rem);   /* 26 → 40px */
  line-height: 1.2;
  color: var(--gc-nachtblau);
  max-width: 980px;
  margin-inline: auto;
}
.gc-quote figcaption {
  margin-block-start: 30px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  color: var(--gc-nachtblau);
}
.gc-dots { display: flex; justify-content: center; align-items: center; gap: 12px; margin-block-start: 56px; }
.gc-dots span { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--gc-gray-300); }
.gc-dots span[aria-current="true"] { width: 56px; height: 9px; background: var(--lp-sky); }

/* ==========================================================================
   Kampagnen-Videos
   ========================================================================== */
.gc-videos { display: grid; grid-template-columns: 994fr 372fr 994fr; gap: 24px; margin-block-start: 48px; }
.gc-video { position: relative; border-radius: var(--radius-image); overflow: hidden; display: block; }
.gc-video img { width: 100%; aspect-ratio: 994 / 564; object-fit: cover; }
.gc-video--narrow img { aspect-ratio: 372 / 564; }
.gc-video__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: 62px;
  height: 62px;
  border-radius: var(--radius-pill);
  background: var(--lp-sky);
  display: grid;
  place-items: center;
  transition: scale var(--dur-base) var(--ease-out);
}
.gc-video:hover .gc-video__play { scale: 1.08; }
.gc-video__play svg { width: 22px; height: 24px; color: var(--gc-white); }

/* ==========================================================================
   FAQ — exakt wie girocard.eu/fuer-unternehmen/haeufig-gestellte-fragen-b2b/
   (dort vermessen: Karte #F6F7FC r20 pad 0 64px, Abstand 32px; summary 30px 10px
   gap 20px, Pfeil-Icon 19px hellblau LINKS; Titel 29→19px w600 navy;
   Antwort 18→15px lh 1.4 ink, eingerückt unter den Titel; initial geschlossen)
   ========================================================================== */
.gc-faq { margin-block-start: 48px; display: flex; flex-direction: column; gap: 32px; }
.gc-faq__item {
  background: #F6F7FC;
  border-radius: 20px;
  padding: 0 64px;
  interpolate-size: allow-keywords;
}
.gc-faq__item summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 10px;
  cursor: pointer;
  list-style: none;
}
.gc-faq__item summary::-webkit-details-marker { display: none; }
.gc-faq__icon {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--lp-sky);
  transition: rotate var(--dur-base) var(--ease-standard);
}
.gc-faq__item[open] .gc-faq__icon { rotate: 180deg; }
.gc-faq__q {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.1875rem, 0.9554rem + 0.9524vw, 1.8125rem);  /* 19 → 29px */
  line-height: 1.1;
  color: var(--gc-nachtblau);
}
.gc-faq__item[open] .gc-faq__q { color: #1F2124; }
.gc-faq__body {
  padding: 9px 0 14px 50px;   /* Einrückung = Icon 19 + gap 20 + summary-pad 10 */
}
.gc-faq__body p {
  font-size: clamp(0.9375rem, 0.8679rem + 0.2857vw, 1.125rem);   /* Copy 15 → 18px */
  line-height: 1.4;
  color: var(--gc-ink);
}
.gc-faq__body p + p { margin-block-start: 12px; }
/* Sanfte Öffnung (Chrome 131+; andere Browser springen) */
.gc-faq__item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: content-visibility var(--dur-slow) allow-discrete, block-size var(--dur-slow) var(--ease-standard);
}
.gc-faq__item[open]::details-content { block-size: auto; }

/* ==========================================================================
   Responsive   (Footer liefert später das WordPress-Theme)
   ========================================================================== */
@media (max-width: 1100px) {
  .gc-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-split { gap: 44px; }
  .gc-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-video--narrow img { aspect-ratio: 994 / 564; }
}

@media (max-width: 900px) {
  .gc-hero { padding-block: 160px 96px; }
  .gc-section { padding-block: 64px; }

  .gc-split { grid-template-columns: 1fr; gap: 32px; }
  .gc-split--media-first .gc-split__media { order: -1; }

  .gc-facts__grid { grid-template-columns: 1fr; }
  .gc-choice { grid-template-columns: 1fr; gap: 24px; }
  .gc-shop { grid-template-columns: 1fr; }
  .gc-videos { grid-template-columns: 1fr; }
  .gc-quote { padding-block: 72px; }
}

/* Live-Breakpoint girocard.eu: mobil ≤767px */
@media (max-width: 767px) {
  .padlr { padding-inline: 16px; }

  .gc-faq { gap: 24px; }
  .gc-faq__item { padding: 0 16px; }
  .gc-faq__item summary { padding: 15px 0; gap: 12px; }
  .gc-faq__body { padding: 12px 0 15px 31px; }   /* Einrückung = Icon 19 + gap 12 */
}

@media (max-width: 640px) {
  .gc-benefits { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .zeus-section * { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Zeus-Integration — Section-Padding kommt vom Spacing-Trait (Inner-Wrapper).
   Prototyp-Klassen mit reiner Padding-Rolle werden am Zeus-Wrapper neutralisiert
   (Formeta-Lektion „Ursache A": Prototyp-Padding + Trait-Padding addieren sich).
   ========================================================================== */
.zeus-section.gc-hero,
.zeus-section.gc-facts,
.zeus-section.gc-section,
.zeus-section.gc-section--tight,
.zeus-section.gc-quote { padding-block: 0; }

/* CTA-Slot im Hero (Zukunfts-Slot — Vorlage hat keine Hero-Buttons; Optik wie Kampagnen-CTAs) */
.gc-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-block-start: 24px; }

/* Zeus-Inner = Container: Breite je data-zeus-container.
   Max-Width = Prototyp-Contentbreite + 2×32px Trait-container_pad, denn das
   Trait-Padding sitzt INNEN am Inner (Prototyp: padlr außen an der Section).
   boxed-1500 ⇒ 1504px Content wie .gc-container im Prototyp. */
.zeus-section > .zeus-section-inner { width: 100%; margin-inline: auto; }
[data-zeus-container="boxed-1500"] > .zeus-section-inner { max-width: 1568px; }
[data-zeus-container="boxed-1200"] > .zeus-section-inner { max-width: 1264px; }
[data-zeus-container="narrow-960"] > .zeus-section-inner { max-width: 1024px; }
[data-zeus-container="full"] > .zeus-section-inner { max-width: none; }

/* Fly-in-Effekte: Keyframes/Klassen injiziert gc-anim.js zur Laufzeit selbst —
   FlyingPress-RUCSS würde sie hier strippen (Klassen stehen beim Crawl nicht im DOM). */