/* ==========================================================================
   AIP — CSS framework
   Migrated from Impreza / WPBakery + plugin CSS.

   Fluid range for every clamp() below: 375px → 1300px viewport.
   1300px = your old --site-content-width, so type stops growing exactly
   where the canvas stops growing.

   Section map:
     0.  Self-hosted Montserrat (variable)
     1.  Brand palette
     2.  Semantic colour tokens
     3.  Impreza variable map
     4.  Fluid type scale
     5.  Fluid spacing scale
     6.  Layout tokens
     7.  Base elements
     8.  Typography classes (your legacy names, now fluid)
     9.  Utilities — colour, weight, hyphens, line clamp, width
     10. Spacing / separator aliases
     11. Buttons
     12. Components — stats, interview, media rows, reviews, quotes, info box
     13. Blog content (.my_blog_content)
     14. Gravity Forms
     15. Accessibility
     16. Home hero — 3-image CSS slider
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Self-hosted Montserrat (variable, weights 100–900)

   Files: https://fontsource.org/fonts/montserrat/download  → "Variable" tab
   Location: /wp-content/themes/Impreza-child/fonts/variable/

   Use the variable files only — do not also load the static set, or every
   weight downloads twice.

   IMPORTANT: Impreza must not load Montserrat itself. Theme Options >
   Typography: clear Montserrat from body and all headings, and from
   "Additional Google Fonts". Otherwise the Google CDN request stays and
   you get the font twice.

   Four files, ~130 KB total. The browser only fetches latin-ext when a
   character in that range actually appears, so DE pages never pay for it.

   SIL Open Font License 1.1 — self-hosting is permitted. Keep OFL.txt next
   to the woff2 files to satisfy the licence.
   -------------------------------------------------------------------------- */

/* latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/wp-content/themes/Impreza-child/fonts/variable/montserrat-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/wp-content/themes/Impreza-child/fonts/variable/montserrat-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/wp-content/themes/Impreza-child/fonts/variable/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/wp-content/themes/Impreza-child/fonts/variable/montserrat-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback, so nothing reflows during the swap.
   ascent/descent are Montserrat's real metrics (968/251 per 1000 upem).
   size-adjust is a starting point — Montserrat runs wider than Arial. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 105%;
  ascent-override: 96.8%;
  descent-override: 25.1%;
  line-gap-override: 0%;
}


/* --------------------------------------------------------------------------
   1. Brand palette
   -------------------------------------------------------------------------- */
:root {
  --navy:            #1c314e;
  --navy-soft:       #617a99;
  --gold:            #af985a;
  --white:           #ffffff;
  --grey:            #f5f5f5;
  --sand:            #f1ede2;

  --navy-15:         rgb(28 49 78 / 0.15);
  --navy-55:         rgb(28 49 78 / 0.55);
  --navy-80:         rgb(28 49 78 / 0.80);
  --navy-85:         rgb(28 49 78 / 0.85);
  --gold-40:         rgb(175 152 90 / 0.40);

  --brand-gradient:  linear-gradient(138deg, #1c314e 60%, #617a99 100%);
}


/* --------------------------------------------------------------------------
   2. Semantic colour tokens
   Use these everywhere, not the raw palette above.
   -------------------------------------------------------------------------- */
:root {
  --bg:              var(--white);
  --bg-alt:          var(--grey);
  --bg-sand:         var(--sand);
  --bg-dark:         var(--navy);
  --bg-dark-grad:    var(--brand-gradient);
  --bg-overlay:      var(--navy-55);

  --text:            var(--navy);
  --text-invert:     var(--white);
  --heading:         var(--navy);

  --link:            var(--navy-soft);
  --link-hover:      var(--gold);

  --primary:         var(--navy);
  --secondary:       var(--gold);
  --accent:          var(--navy-soft);

  --border:          var(--navy);
  --border-accent:   var(--gold);

  --header-bg:       var(--navy);
  --header-bg-grad:  var(--brand-gradient);
  --header-text:     var(--white);
  --header-text-hover: var(--gold);
  --header-transparent-bg: var(--navy-55);

  --footer-bg:       var(--navy);
  --footer-bg-grad:  var(--brand-gradient);
  --footer-text:     var(--white);
  --footer-link:     var(--white);
  --footer-link-hover: var(--gold);
  --footer-border:   var(--gold);

  --input-bg:        var(--grey);
  --input-text:      var(--navy);
  --input-border:    transparent;
}


/* --------------------------------------------------------------------------
   3. Impreza variable map
   Maps Impreza's --color-* names onto the tokens above, so theme output and
   migrated content stay in sync with the palette. Keep this while the site
   runs on Impreza; delete it if you ever move to a builder that doesn't
   emit these names.
   -------------------------------------------------------------------------- */
:root {
  /* Font families — without these, Impreza's own elements keep whatever
     Theme Options > Typography says and ignore the tokens above. */
  --font-family:         var(--font-body);
  --h1-font-family:      var(--font-heading);
  --h2-font-family:      var(--font-heading);
  --h3-font-family:      var(--font-heading);
  --h4-font-family:      var(--font-heading);
  --h5-font-family:      var(--font-heading);
  --h6-font-family:      var(--font-heading);
  --inputs-font-family:  var(--font-body);

  --color-header-middle-bg:            var(--header-bg);
  --color-header-middle-bg-grad:       var(--header-bg-grad);
  --color-header-middle-text:          var(--header-text);
  --color-header-middle-text-hover:    var(--header-text-hover);
  --color-header-transparent-bg:       var(--header-transparent-bg);
  --color-header-transparent-bg-grad:  var(--header-transparent-bg);
  --color-header-transparent-text:     var(--white);
  --color-header-transparent-text-hover: var(--gold);
  --color-header-top-bg:               var(--navy-55);
  --color-header-top-bg-grad:          var(--navy-55);
  --color-chrome-toolbar:              var(--grey);

  --color-content-bg:                  var(--bg);
  --color-content-bg-grad:             var(--bg);
  --color-content-bg-alt:              var(--bg-alt);
  --color-content-bg-alt-grad:         var(--bg-alt);
  --color-content-border:              var(--border);
  --color-content-heading:             var(--heading);
  --color-content-heading-grad:        var(--heading);
  --color-content-text:                var(--text);
  --color-content-link:                var(--link);
  --color-content-link-hover:          var(--link-hover);
  --color-content-primary:             var(--primary);
  --color-content-primary-grad:        var(--primary);
  --color-content-primary-faded:       var(--navy-15);
  --color-content-secondary:           var(--secondary);
  --color-content-secondary-grad:      var(--secondary);
  --color-content-faded:               var(--navy);
  --color-content-overlay:             var(--bg-overlay);
  --color-content-overlay-grad:        var(--bg-overlay);

  --color-footer-bg:                   var(--footer-bg);
  --color-footer-bg-grad:              var(--footer-bg-grad);
  --color-footer-bg-alt:               var(--navy);
  --color-footer-bg-alt-grad:          var(--navy);
  --color-footer-border:               var(--footer-border);
  --color-footer-heading:              var(--white);
  --color-footer-heading-grad:         var(--white);
  --color-footer-text:                 var(--footer-text);
  --color-footer-link:                 var(--footer-link);
  --color-footer-link-hover:           var(--footer-link-hover);
}


/* --------------------------------------------------------------------------
   4. Fluid type scale
   Each token comments its px range: min @375px → max @1300px.
   -------------------------------------------------------------------------- */
:root {
  --font-body:       "Montserrat", "Montserrat Fallback", system-ui, sans-serif;
  --font-heading:    var(--font-body);

  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       600;
  --fw-bold:         700;
  --fw-black:        900;

  /* 13px fixed — legal text, consent labels, validation hints */
  --fs-fine:         0.8125rem;

  /* 13 → 14 — captions, meta, review author */
  --fs-meta:         clamp(0.8125rem, 0.787rem + 0.108vw, 0.875rem);

  /* 15 → 16 — body copy, tables, form fields */
  --fs-body:         clamp(0.9375rem, 0.912rem + 0.108vw, 1rem);

  /* 16 → 18 — lead paragraphs, .textbox, inputs */
  --fs-lead:         clamp(1rem, 0.949rem + 0.216vw, 1.125rem);

  /* 16 → 21 — smallest uppercase subtitle */
  --fs-title-xs:     clamp(1rem, 0.873rem + 0.541vw, 1.3125rem);

  /* 16 → 24 — small uppercase subtitle */
  --fs-title-sm:     clamp(1rem, 0.797rem + 0.865vw, 1.5rem);

  /* 18 → 22 — blog h2/h3/h4, pull quotes */
  --fs-title-md:     clamp(1.125rem, 1.024rem + 0.432vw, 1.375rem);

  /* 18 → 26 — main uppercase subtitle, stat numbers, service titles */
  --fs-title-lg:     clamp(1.125rem, 0.922rem + 0.865vw, 1.625rem);

  /* 26 → 36 — detail page headings */
  --fs-title-xl:     clamp(1.625rem, 1.372rem + 1.081vw, 2.25rem);

  /* 23 → 38 — section heading (was .normaltitel_kleiner) */
  --fs-h3:           clamp(1.4375rem, 1.057rem + 1.622vw, 2.375rem);

  /* 30 → 38 — page/banner h1 */
  --fs-h1:           clamp(1.875rem, 1.672rem + 0.865vw, 2.375rem);

  /* 30 → 48.96 — h2 */
  --fs-h2:           clamp(1.875rem, 1.395rem + 2.05vw, 3.06rem);

  /* 23 → 48 — display heading (was .normaltitel) */
  --fs-display:      clamp(1.4375rem, 0.804rem + 2.703vw, 3rem);

  /* Quote marks */
  --fs-quote-mark:   clamp(1.5rem, 1.297rem + 0.865vw, 2rem);   /* 24 → 32 */
  --fs-quote-mark-lg: clamp(1.875rem, 1.622rem + 1.081vw, 2.5rem); /* 30 → 40 */
  --fs-quote-deco:   clamp(1.375rem, 0.843rem + 2.27vw, 2.6875rem); /* 22 → 43 */

  /* Icons */
  --fs-icon-sm:      clamp(0.875rem, 0.849rem + 0.108vw, 0.9375rem);  /* 14 → 15 */
  --fs-icon-lg:      clamp(4.125rem, 3.112rem + 4.324vw, 6.625rem);   /* 66 → 106 */

  /* Line heights */
  --lh-tight:        1.1;
  --lh-heading:      1.2;
  --lh-snug:         1.3;
  --lh-body:         1.45;
  --lh-loose:        1.53;

  /* Letter spacing */
  --ls-heading:      0.05em;
  --ls-heading-sm:   0.03em;
  --ls-button:       0.04em;
}


/* --------------------------------------------------------------------------
   5. Fluid spacing scale
   Replaces the 14 hard-coded .separator-height-* variants.
   -------------------------------------------------------------------------- */
:root {
  --space-3xs:  0.625rem;                                          /* 10 */
  --space-2xs:  clamp(0.75rem, 0.598rem + 0.649vw, 1.125rem);      /* 12 → 18 */
  --space-xs:   clamp(1.125rem, 0.872rem + 1.081vw, 1.75rem);      /* 18 → 28 */
  --space-sm:   clamp(1.5rem, 1.297rem + 0.865vw, 2rem);           /* 24 → 32 */
  --space-md:   clamp(2rem, 1.848rem + 0.649vw, 2.375rem);         /* 32 → 38 */
  --space-lg:   clamp(2.375rem, 2.02rem + 1.514vw, 3.25rem);       /* 38 → 52 */
  --space-xl:   clamp(2.625rem, 2.118rem + 2.162vw, 3.875rem);     /* 42 → 62 */
  --space-2xl:  clamp(3.5rem, 2.486rem + 4.324vw, 6rem);           /* 56 → 96 */
}


/* --------------------------------------------------------------------------
   6. Layout tokens
   -------------------------------------------------------------------------- */
:root {
  --content-width:   1300px;
  --section-padding: var(--space-2xl);
  --radius:          0;
  --focus-width:     2px;
  --gutter:          clamp(1rem, 0.494rem + 2.162vw, 2.25rem);     /* 16 → 36 */
}


/* --------------------------------------------------------------------------
   7. Base elements
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

strong, b { font-weight: var(--fw-bold); }

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.25s ease;
}
a:hover,
a:focus-visible { color: var(--link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading);
  text-transform: uppercase;
  font-style: normal;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin-block-end: 0.2em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  margin-block-end: 0;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-sm);
  margin-block-end: 0.6em;
}

h4 {
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-sm);
  margin-block-end: 0.6em;
}

h5 {
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-sm);
  margin-block-end: 0.6em;
}

h6 {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading-sm);
  margin-block-end: 0.6em;
}

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

/* Full-height hero. Replaces the --viewport-height JS hack. */
.hero-full { min-height: calc(100dvh - 10vh); }

.hero-arrow {
  position: absolute;
  inset-inline: 0;
  bottom: var(--space-xl);
  text-align: center;
}

@keyframes move-up-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-30px); }
}

.bounce-icon { animation: move-up-down 2s linear infinite; }


/* --------------------------------------------------------------------------
   8. Typography classes
   Your legacy class names kept so migrated content still matches.
   Every size is now a token — no per-class media queries.
   -------------------------------------------------------------------------- */

/* Banner heading — was .bannertitel / .bannertitelspez (identical rules) */
.bannertitel {
  text-align: center;
  color: var(--white);
  margin-inline: auto;
  padding-block-start: 1.125rem;
  border-radius: 0;
  border-block-start: 14px solid var(--secondary);
}
.bannertitel h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  color: inherit;
}
.bannertitel .mybold { font-weight: var(--fw-black); }

/* Display + section headings */
.normaltitel,
.normaltitel_kleiner,
.untertitelfett,
.untertitelfett-24,
.untertitelfett-21 {
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.normaltitel          { font-size: var(--fs-display); font-weight: var(--fw-light); }
.normaltitel_kleiner  { font-size: var(--fs-h3);      font-weight: var(--fw-light); }

.untertitelfett,
.untertitelfett p     { font-size: var(--fs-title-lg); font-weight: var(--fw-black); line-height: var(--lh-snug); text-transform: uppercase; }
.untertitelfett-24,
.untertitelfett-24 p  { font-size: var(--fs-title-sm); font-weight: var(--fw-black); line-height: var(--lh-tight); text-transform: uppercase; }
.untertitelfett-21,
.untertitelfett-21 p  { font-size: var(--fs-title-xs); font-weight: var(--fw-black); line-height: var(--lh-tight); text-transform: uppercase; }

.spezialuntertitellight {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  text-transform: none;
}

/* Body copy */
.lauftext,
.lauftext p,
.tabellentext,
.tabellentext p {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

.lauftext .mybold,
.productlauftext,
.productlauftext p,
.tabellentext-weight-bold,
.tabellentext-weight-bold p {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
}

.tabellentext p,
.tabellentext-weight-bold p { margin-block-end: 0; }

.textbox {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.22;
}

ul.lauftext { margin-inline-start: 1.2rem; margin-block-end: 0; }
ul.lauftext li { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }

/* Fine print */
.fineprint,
.mykontaktmessage {
  font-size: var(--fs-fine);
  font-weight: var(--fw-regular);
  line-height: 1.22;
  color: var(--text);
}


/* --------------------------------------------------------------------------
   9. Utilities
   -------------------------------------------------------------------------- */

/* Colour */
.lightblue-font    { color: var(--navy-soft); }
.darkblue-font     { color: var(--navy); }
.golden-font,
.mygoldcolor,
.myone             { color: var(--gold); }
.whitecolor-font   { color: var(--white); }

.lightblue-border  { border-color: var(--navy-soft); }
.darkblue-border   { border-color: var(--navy); }
.golden-border     { border-color: var(--gold); }
.whitecolor-border { border-color: var(--white); }

.golden_background {
  background-color: var(--gold);
  color: var(--white);
  padding: 0.5rem 0.7rem;
}

/* Weight */
.weight-light   { font-weight: var(--fw-light); }
.weight-regular { font-weight: var(--fw-regular); }
.weight-medium  { font-weight: var(--fw-medium); }
.weight-bold,
.mybold         { font-weight: var(--fw-bold); }
.weight-black   { font-weight: var(--fw-black); }

/* Alignment */
.general-center-text { text-align: center; }

/* Hyphenation — one utility instead of the five duplicated blocks.
   Apply .text-hyphens where German compounds need to break. */
.text-hyphens,
.text-hyphens p {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  -webkit-hyphenate-character: "\2010";
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 1;
  hyphenate-limit-chars: 6 3 2;
}

/* Hyphenate only below the tablet breakpoint */
@media (max-width: 1040px) {
  .text-hyphens\@mobile,
  .text-hyphens\@mobile p {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    -webkit-hyphenate-character: "\2010";
    hyphenate-limit-chars: 6 3 2;
  }
}

.text-no-hyphens,
.text-no-hyphens p {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
}

/* Line clamp — set --lines inline, default 3 */
.limited-lines,
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: var(--lines, 3);
  line-clamp: var(--lines, 3);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Constrained text width — set --w inline (e.g. style="--w: 253px") */
.width-cap {
  width: min(100%, var(--w, 100%));
  white-space: normal;
}

/* Vertical centring helper */
.v-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.responsive { width: 100%; height: auto; }

.special-logo-image {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0.5rem auto;
}

/* Was `.my_blog_content img .special-image-size` — that selector could never
   match, because an <img> has no descendants. Fixed to a class on the image. */
.special-image-size { width: 80%; height: auto; }


/* --------------------------------------------------------------------------
   10. Spacing / separator aliases
   Old class names mapped onto the fluid scale. Prefer the tokens directly
   in new sections and retire these as you rebuild.
   -------------------------------------------------------------------------- */
.separator-height-0    { height: 0; }
.separator-height-10   { height: var(--space-3xs); }
.separator-height-20   { height: var(--space-2xs); }
.separator-height-30,
.separator-height-32   { height: var(--space-xs); }
.separator-height-40,
.separator-height-40-2,
.separator-height-40-3 { height: var(--space-md); }
.separator-height-54   { height: var(--space-lg); }
.separator-height-60,
.separator-height-62   { height: var(--space-xl); }

.myownhr {
  margin-block: var(--space-3xs);
  border: 0;
  border-block-start: 1px solid currentColor;
}

.my-margin-zero        { margin: 0; }
.my-margin-zero-bottom { margin-block-end: 0; }

/* Was .my-margin-box / -zero / -second / -spez — four classes doing the same
   job with different breakpoint values. One stack utility instead. */
.stack > * + * { margin-block-start: var(--stack-gap, var(--space-md)); }

.stack-tight { --stack-gap: var(--space-xs); }
.stack-loose { --stack-gap: var(--space-lg); }


/* --------------------------------------------------------------------------
   11. Buttons
   -------------------------------------------------------------------------- */
.btn,
.mybutton,
.mybuttongold {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  font-style: normal;
  line-height: 1.2;
  letter-spacing: var(--ls-button);
  text-transform: none;
  text-align: center;
  text-decoration: none;
  padding: 0.6em 1.4em;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn:hover,
.btn:focus-visible,
.mybutton:hover,
.mybutton:focus-visible {
  background: var(--secondary);
  color: var(--navy);
}

.btn--gold,
.mybuttongold { background: var(--secondary); }

.btn--gold:hover,
.btn--gold:focus-visible,
.mybuttongold:hover,
.mybuttongold:focus-visible {
  background: var(--primary);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--primary);
}
.btn--outline:hover { background: var(--primary); color: var(--white); }


/* --------------------------------------------------------------------------
   12. Components
   -------------------------------------------------------------------------- */

/* --- Stats row ------------------------------------------------------------
   Was .stats-container + .single-box-container as two separate systems with
   duplicated .stat-number / .stat-text rules. One grid now handles both:
   a single child centres itself, three children split evenly. */
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  font-family: var(--font-body);
}

.stats-container--single { max-width: 350px; }

.stat-box,
.single-stat-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-sm) var(--space-2xs);
  min-height: 140px;
}

.dark-blue  { background-color: var(--navy); }
.light-blue { background-color: var(--navy-soft); }

.stat-number {
  color: var(--gold);
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-block-end: 0.625rem;
}

.stat-text {
  color: var(--white);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  max-width: 65%;
}

/* --- Interview blocks ----------------------------------------------------- */
.interview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  margin-block: var(--space-sm);
}

.interviewer-box {
  background: var(--sand);
  padding: var(--space-2xs);
}

.antwort-box {
  background: var(--grey);
  padding: var(--space-2xs);
  border-inline-start: 2px solid var(--navy);
}

.interviewer-box-special {
  background: var(--sand);
  padding: 1rem;
  border: 1px solid var(--gold);
  margin-block: var(--space-sm);
}

/* --- Info box ------------------------------------------------------------- */
.interview-info-box {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--navy);
  margin-block-end: var(--space-sm);
}

.info-box-title {
  background: var(--navy);
  color: var(--white);
  font-weight: var(--fw-bold);
  padding: 0.4rem 1rem;
}

.info-box-content {
  background: var(--grey);
  padding: 1rem;
}

/* --- Media rows ----------------------------------------------------------- */
.si-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  margin-block: var(--space-sm);
  align-items: start;
}

.si-media__img img { display: block; width: 100%; height: auto; }
.si-media__text > :first-child { margin-block-start: 0; }
.si-media__text > :last-child  { margin-block-end: 0; }

/* Variant A: small icon/portrait + text.
   Fluid column width replaces the three breakpoints you had. */
.si-media--16-56 { grid-template-columns: 1fr; }
.si-media--16-56 .si-media__img { display: flex; justify-content: center; }
.si-media--16-56 .si-media__img img { width: clamp(140px, 14vw, 100%); max-width: 80%; }

@media (min-width: 601px) {
  .si-media--16-56 { grid-template-columns: clamp(140px, 16%, 200px) 1fr; }
  .si-media--16-56 .si-media__img { justify-content: start; }
  .si-media--16-56 .si-media__img img { width: 100%; max-width: 100%; }
}

/* Variant B: half / half, stacks on mobile */
@media (min-width: 1024px) {
  .si-media--50-50-stack { grid-template-columns: 1fr 1fr; }
}

/* Variant C: half / half, image first below 1024 */
@media (min-width: 1025px) {
  .si-media--50-50-swap-1024 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .si-media--50-50-swap-1024 .si-media__img  { order: 1; }
  .si-media--50-50-swap-1024 .si-media__text { order: 2; }
}

/* --- Customer reviews ----------------------------------------------------- */
.kundenbewertung-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-2xs);
  background: var(--sand);
}

.kundenbewertung-item > :last-child { margin-block-start: auto; }

.kundenbewertung-inhalt {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

.kundenbewergung-name {           /* typo preserved from source — see notes */
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1;
}

/* Star rating (Gravity Forms) */
.gf-rating-star {
  color: var(--navy-soft);
  cursor: pointer;
  font-size: var(--fs-title-xs);
}
.gf-rating-star + .gf-rating-star { padding-inline-start: 4px; }
.gf-rating-star-active { color: var(--gold); }
.gf-rating-star:hover  { color: var(--navy); }

/* --- Inline quote --------------------------------------------------------- */
.myquote {
  font-size: var(--fs-title-md);
  font-weight: var(--fw-bold);
  color: var(--gold);
  line-height: var(--lh-heading);
  font-family: var(--font-heading);
}

.myquote::before,
.myquote::after {
  font-size: var(--fs-quote-mark);
  font-weight: var(--fw-bold);
  color: var(--gold);
  line-height: 0;
  font-family: var(--font-heading);
}
.myquote::before { content: "«"; margin-inline-end: 0.2rem; }
.myquote::after  { content: "»"; margin-inline-start: 0.2rem; }

/* Decorative quote marks around pull-out text */
.quota-mark {
  font-size: var(--fs-quote-deco);
  color: var(--gold);
  line-height: 0.8;
}
.quota-mark--left  { margin-inline-end: 0.4rem; }
.quota-mark--right { margin-inline-start: 0.4rem; }

/* --- Service box ---------------------------------------------------------- */
.service-box { display: flex; align-items: center; gap: 1.2rem; }

.service-box__title {
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--link);
  padding-block-end: 0;
}

/* --- Bars ----------------------------------------------------------------- */
.golden-bar {
  background: var(--secondary);
  padding: 0.3rem 0.6rem 0.1rem;
}

.blue-bar {
  background: var(--border);
  padding: 0.6rem;
  text-align: center;
  width: min(80%, 60ch);
  margin-inline: auto;
}

/* --- Text box with rule --------------------------------------------------- */
.outer-text-box { display: flex; justify-content: center; align-items: center; }

.text-box { position: relative; text-align: center; }
.text-box::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 110px);
  height: 2px;
  background-color: var(--text);
}


/* --------------------------------------------------------------------------
   13. Blog content
   -------------------------------------------------------------------------- */
.my_blog_content p,
.my_blog_content ul li,
.my_blog_content ol li {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  margin-block: 0;
  padding-block: 0 0.6rem;
}

.my_blog_content p:last-child { padding-block: 0.3rem; }

.my_blog_content p strong,
.my_blog_content .my_bold_text { color: var(--navy); font-weight: var(--fw-bold); }

.my_blog_content h2,
.my_blog_content h3,
.my_blog_content h4,
.my_blog_content p:has(.my_bold_text),
.my_blog_content p:has(.my_special_text) {
  font-size: var(--fs-title-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-transform: none;
  padding-block: 0;
  margin-block: 1rem 0.1rem;
}

.my_blog_content p:has(.my_special_text) { margin-block-end: 0.3rem; }

.my_blog_content img { width: 100%; height: auto; }

.my_blog_content figure {
  width: 100%;
  height: auto;
  background-color: var(--grey);
  font-style: italic;
  margin-block: 0.6rem;
}

/* Was a list of hard-coded #attachment_4270…4350 IDs. Add .figure-narrow to
   the figure in the editor instead — no CSS edit per new image. */
.my_blog_content figure.figure-narrow { width: 80%; }

.my_blog_content .wp-caption-text,
.my_blog_content .image-caption {
  display: block;
  font-size: 80%;
  font-weight: var(--fw-regular);
  font-style: italic;
  line-height: var(--lh-heading);
  padding: 0.3rem;
  margin: 0;
  text-align: center;
}

.my_blog_content blockquote {
  position: relative;
  font-family: var(--font-heading);
  font-size: var(--fs-title-md);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  color: var(--gold);
  background-color: #f9f9f9;
  border-inline-start: 5px solid var(--gold);
  margin: 0;
  padding: 20px 30px;
}

.my_blog_content blockquote p { margin: 0; padding: 0; font-weight: var(--fw-bold); }

.my_blog_content blockquote::before,
.my_blog_content blockquote::after {
  position: absolute;
  font-family: var(--font-heading);
  font-size: var(--fs-quote-mark-lg);
  font-weight: var(--fw-bold);
  color: var(--gold);
  line-height: 0;
  opacity: 1;
}
.my_blog_content blockquote::before { content: "«"; left: 10px; top: 10px; }
.my_blog_content blockquote::after  { content: "»"; right: 10px; bottom: 10px; }

.my_blog_content a.my_normal_link,
.my_blog_content .my_normal_link a { color: var(--gold); }

/* Blog buttons reuse the button component */
.my_blog_content .mybutton a,
.my_blog_content a .mybutton,
.my_blog_content .mybuttongold a,
.my_blog_content a .mybuttongold { display: inline-block; }


/* --------------------------------------------------------------------------
   14. Gravity Forms
   Form IDs removed: rules now apply to every form. Add a form-specific
   class in GF settings if one form ever needs to differ.
   -------------------------------------------------------------------------- */
:root {
  --input-font-size: var(--fs-lead);
  --input-height: 2.8em;
  --input-padding: 1em;
  --checkbox-size: 1.5em;
}

.gform_wrapper.gravity-theme input:not([type="submit"]),
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-transform: none;
  background: var(--input-bg);
  color: var(--input-text);
  border: 0;
  border-radius: var(--radius);
  padding: var(--input-padding);
}

.gform_wrapper.gravity-theme input[type="checkbox"],
.gform_wrapper.gravity-theme input[type="radio"],
.gform_wrapper.gravity-theme input.gfield-choice-input {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  padding: 0;
  border: 1px solid var(--navy);
  accent-color: var(--gold);
}

::placeholder { font-size: var(--fs-body); color: var(--navy); opacity: 1; }

.gform_wrapper.gravity-theme .gform_fields {
  row-gap: var(--space-3xs);
  column-gap: 1rem;
}

.gform_wrapper.gravity-theme .gform_footer,
.gform_wrapper.gravity-theme .gform_page_footer {
  margin: 0;
  padding-block: var(--space-lg) 0;
}

/* Submit button — replaces five near-identical #gform_submit_button_N rules.
   `text-transform: normal` in the original was invalid; it's `none`. */
.gform_wrapper [type="submit"].gform_button {
  font-family: inherit;
  font-size: var(--fs-body);
  font-style: normal;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-button);
  text-transform: none;
  padding: 0.6em 1.4em;
  border: 0;
  border-radius: var(--radius);
  background: var(--secondary);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.gform_wrapper [type="submit"].gform_button:hover,
.gform_wrapper [type="submit"].gform_button:focus-visible {
  background: var(--primary);
  color: var(--white);
}

/* Labels and descriptions */
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper .gform_description {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  color: var(--secondary);
}

.gform_wrapper.gravity-theme .gfield_description,
.gform_wrapper.gravity-theme .gfield_radio,
.gform_wrapper.gravity-theme .gfield_checkbox {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

.gform_wrapper .gfield_consent_label,
.gform_wrapper .gfield_consent_description,
.gform_wrapper .my-consent-field .gfield_checkbox label {
  font-size: var(--fs-fine);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  color: var(--text);
}

/* Section spacing inside long forms */
.gform_wrapper .my_additional_person .gfield_label,
.gform_wrapper .my_newsletter_sign_up .gfield_label,
.gform_wrapper .datei_upload .gfield_label,
.gform_wrapper .my_frequent_question { padding-block-start: var(--space-lg); }

.gform_wrapper .interest_choices { margin-block-start: var(--space-lg); }

.gform_wrapper .my_privacy_checkbox .ginput_container_checkbox,
.gform_wrapper .my_newsletter_checkbox .ginput_container_checkbox { padding-block-start: 1rem; }

/* File upload */
.gform_wrapper .datei_upload .gform_drop_area {
  background-color: var(--bg-alt);
  border: 0;
}
.gform_wrapper .datei_upload .gform_drop_instructions { display: none; }
.gform_wrapper .datei_upload .gform_button_select_files {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  background-color: var(--gold-40);
  border-width: 0;
}
.gform_wrapper .datei_upload .gform_fileupload_rules,
.gform_wrapper .ginput_preview_list {
  font-size: var(--fs-fine);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  color: var(--secondary);
}

/* Validation */
.gform_wrapper.gravity-theme .gform_validation_errors > h2 {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
}
.gform_wrapper.gravity-theme .gform_validation_errors > ol a {
  font-size: var(--fs-fine);
  font-weight: var(--fw-bold);
}
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

/* Confirmation message — replaces twelve rules (six forms × desktop/mobile
   duplicates with display:none). One class; override --cm-width per form. */
.confirmation-message {
  width: min(100%, var(--cm-width, 400px));
  margin-inline: auto;
  padding: 1.25rem 0.625rem;
  background-color: var(--secondary);
  color: var(--white);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  text-align: center;
}

.confirmation-message .mybold { font-weight: var(--fw-bold); }

/* Two-column form rows — was my_45_column / my_40_column / my_82_column /
   my_18_column with a manual stacking query. Auto-fit grid instead. */
.gform_wrapper .gform_fields .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0 1rem;
}
.gform_wrapper .gform_fields .form-row--salutation {
  grid-template-columns: minmax(min(120px, 100%), 0.2fr) 1fr;
}

/* Frequency checkbox group */
.gform_wrapper .my_frequent_checkbox {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  padding-block-start: 0.625rem;
}
.gform_wrapper .my_frequent_checkbox .gfield_checkbox {
  border-block-end: 2px solid var(--link-hover);
  width: 100%;
}
.gform_wrapper .my_frequent_checkbox .gfield_checkbox label { padding-block-end: 0.625rem; }

@media (min-width: 611px) {
  .gform_wrapper .my_frequent_checkbox .gfield_checkbox { width: 85%; }
}

.gform_wrapper .my_frequent,
.gform_wrapper .all_frequent_checkbox {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--link-hover);
  margin-block-end: 0.5rem;
}

/* reCAPTCHA badge */
.grecaptcha-badge { visibility: hidden; }


/* --------------------------------------------------------------------------
   15. Accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-width) solid var(--secondary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   16. Home hero — 3-image CSS slider

   Your code, unchanged. Depends on --hero-image-1/2/3 being set on the
   section itself, each as a full url(...) value.

   Note: this block is Impreza-bound (.l-section-h, .w-vwrapper) and keeps
   its fixed px heights rather than the fluid scale above. See notes.
   -------------------------------------------------------------------------- */

.home-hero-section {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: 580px !important;
    height: 580px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding-top: 110px !important; /* Clears transparent header on mobile/tablet */
    padding-bottom: 0 !important;
}

@media (min-width: 1025px) {
    .home-hero-section {
        min-height: 650px !important;
        height: 650px !important;
        padding-top: 130px !important; /* Clears transparent header on desktop */
    }
}

/* Shared layer properties */
.home-hero-section::before,
.home-hero-section::after,
.home-hero-section .hero-layer-3 {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    pointer-events: none;
    will-change: opacity, transform;
}

/* Image 1 (::before) */
.home-hero-section::before {
    z-index: 1;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        var(--hero-image-1);
    animation: 
        aip-fade-1 21s infinite ease-in-out,
        aip-zoom 21s infinite ease-in-out;
}

/* Image 2 (::after) */
.home-hero-section::after {
    z-index: 2;
    opacity: 0;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        var(--hero-image-2);
    animation: 
        aip-fade-2 21s infinite ease-in-out,
        aip-zoom 21s infinite ease-in-out;
}

/* Image 3 (.hero-layer-3) */
.home-hero-section .hero-layer-3 {
    z-index: 3;
    opacity: 0;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        var(--hero-image-3);
    animation: 
        aip-fade-3 21s infinite ease-in-out,
        aip-zoom 21s infinite ease-in-out;
}

/* Foreground content & typography */
.home-hero-section > .l-section-h {
    position: relative !important;
    width: 100% !important;
    z-index: 10 !important;
    padding-top: 0 !important;
    margin: 0 auto !important;
}

.home-hero-section .w-vwrapper {
    position: relative !important;
    z-index: 11 !important;
    margin-top: 0 !important;
}

/* Enforce pure white headline & content */
.home-hero-section h1,
.home-hero-section h1 span,
.home-hero-section .bannertitel,
.home-hero-section .bannertitel * {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
}

/* Fallback color prevents white flash during crossfade calculations */
.home-hero-section {
    background-color: #1a2530 !important;
}

/* 3-image seamless overlap cycle (21s total) */
@keyframes aip-fade-1 {
    0%       { opacity: 1; }
    33.33%   { opacity: 1; }
    38%      { opacity: 0; }  /* Holds solid until Image 2 is fully visible */
    95.24%   { opacity: 0; }
    100%     { opacity: 1; }
}

@keyframes aip-fade-2 {
    0%       { opacity: 0; }
    28.57%   { opacity: 0; }
    33.33%   { opacity: 1; }
    66.67%   { opacity: 1; }
    71.5%    { opacity: 0; }  /* Holds solid until Image 3 is fully visible */
    100%     { opacity: 0; }
}

@keyframes aip-fade-3 {
    0%       { opacity: 0; }
    61.90%   { opacity: 0; }
    66.67%   { opacity: 1; }
    95.24%   { opacity: 1; }
    100%     { opacity: 0; }  /* Fades out as Image 1 takes over */
}

/* Subtle continuous zoom */
@keyframes aip-zoom {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
    .home-hero-section::before {
        animation: none;
        transform: none;
        opacity: 1;
    }
    .home-hero-section::after,
    .home-hero-section .hero-layer-3 {
        display: none;
    }
}