/* Theme base styles */

/* Settings
GARANT Design Tokens. Muessen als erstes kommen, alles andere baut darauf auf.
*/

/* ============================================================================
   GARANT Design Tokens

   Farben, Typo und Radius kommen 1:1 aus den Figma Variables der Datei
   "GARANT Gruppe DE Intern". Abstaende aus der Design-System-Sektion
   "Padding" (222:9173), Buttons aus "Buttons" (227:1800).

   Alles mit Praefix --gg-. Die alten Variablen (--bgPrimary, --textGray)
   bleiben unberuehrt, damit die 49 Altmodule weiterlaufen.

   Breakpoints, bewusst gesetzt:
     mobile   < 768px
     tablet   768px bis 1199px   (Desktop-Typo, Tablet-Abstaende)
     desktop  ab 1200px
   Figma definiert Typo nur fuer Mobile und Desktop, Abstaende aber fuer
   drei Staende. Daher nutzt Tablet die Desktop-Typo.
   ========================================================================= */

:root {

  /* --- Farben, aus Figma Variables --------------------------------------- */
  --gg-red: #e3000b;              /* Colors/GARANT Red */
  --gg-red-hover: #b5000a;        /* Colors/Hover Red */
  --gg-dark-grey: #292929;        /* Colors/Dark Grey */
  --gg-grey: #585858;             /* Colors/Grey */
  --gg-light-grey: #f0f0f0;       /* Colors/Light Grey */
  --gg-lightest-grey: #e3e7e7;    /* Neutral/Lightest Grey */
  --gg-white: #ffffff;            /* Colors/True White */
  --gg-black: #000000;            /* Colors/True Black */
  --gg-overlay-light-1: #ffffff33; /* Colors/Light Overlay 1 */
  --gg-overlay-light-2: #ffffff80; /* Colors/Light Overlay 2 */

  /* Rollen, damit Module nicht direkt auf Farbnamen zeigen */
  --gg-text: var(--gg-dark-grey);
  /* Ueberschriften sind im Design ueberwiegend GARANT Red, nachgezaehlt
     im Referenzcode. Auf rotem Grund und auf Bildern drehen sie auf Weiss. */
  --gg-heading: var(--gg-red);
  --gg-text-muted: var(--gg-grey);
  --gg-text-inverse: var(--gg-white);
  --gg-accent: var(--gg-red);
  --gg-accent-hover: var(--gg-red-hover);
  --gg-surface: var(--gg-white);
  --gg-surface-alt: var(--gg-light-grey);
  --gg-surface-accent: var(--gg-red);
  --gg-border: var(--gg-lightest-grey);

  /* --- Schrift ----------------------------------------------------------- */
  --gg-font: 'Maax', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gg-weight-regular: 400;
  --gg-weight-medium: 500;
  --gg-weight-bold: 700;

  /* Typo-Stufen, Mobile. Desktop wird ab 768px ueberschrieben.
     letter-spacing: die Figma-Werte sind PROZENT, nicht px. Nachgerechnet
     am Referenzcode: 52px mit -3 ergibt tracking -1.56px, also -3 Prozent.
     In CSS deshalb em, das ist dasselbe bezogen auf die Schriftgroesse. */
  --gg-h1-size: 36px;    --gg-h1-lh: 1.15; --gg-h1-ls: -0.02em;
  --gg-h2-size: 30px;    --gg-h2-lh: 1.15; --gg-h2-ls: -0.01em;
  --gg-h3-size: 24px;    --gg-h3-lh: 1.15; --gg-h3-ls: -0.01em;
  --gg-h4-size: 20px;    --gg-h4-lh: 1.2;  --gg-h4-ls: -0.01em;
  --gg-h5-size: 18px;    --gg-h5-lh: 1.25; --gg-h5-ls: -0.01em;
  --gg-h6-size: 16px;    --gg-h6-lh: 1.3;  --gg-h6-ls: 0;
  --gg-body-size: 16px;  --gg-body-lh: 1.5; --gg-body-ls: 0;
  --gg-small-size: 14px; --gg-small-lh: 1.6; --gg-small-ls: 0;
  /* Aufzaehlungen sind eine Stufe kleiner als der Fliesstext, Desktop 16
     gegen Body 18. Nachgemessen an Figma 2625:8853: die einzeiligen
     Punkte sind dort 24px hohe Zeilenkaesten, der zweizeilige 48px, das
     ergibt bei 16px genau Zeilenhoehe 1.5. Eigener Token und nicht
     --gg-small-size, weil der an 25 anderen Stellen haengt, etwa
     Blog-Meta und Testimonials. */
  --gg-list-size: 14px;  --gg-list-lh: 1.5; --gg-list-ls: 0;
  --gg-label-size: 12px; --gg-label-lh: 1;  --gg-label-ls: 0;
  --gg-button-size: 18px; --gg-button-lh: 1; --gg-button-ls: 0;

  /* --- Radius ------------------------------------------------------------ */
  --gg-radius: 0;                 /* radius/primary, Flaechen */
  --gg-radius-xs: 4px;            /* kleine Elemente, Tags, Chips */
  --gg-radius-button: 20px;       /* Buttons, ergibt Pillenform */
  --gg-radius-media: 70px;        /* Desktop 110px */
  --gg-radius-media-sm: 50px;     /* Desktop 70px, Blog und Instagram */
  --gg-radius-media-xs: 40px;     /* kleinere Medienflaechen */

  /* --- Abstaende --------------------------------------------------------- */
  /* Skala auf 4er-Basis, plus Spacing/XS = 6 aus Figma */
  --gg-space-xs: 6px;
  --gg-space-1: 4px;
  --gg-space-2: 8px;
  --gg-space-3: 12px;
  --gg-space-4: 16px;
  --gg-space-5: 20px;
  --gg-space-6: 24px;
  --gg-space-8: 32px;
  --gg-space-10: 40px;
  --gg-space-14: 56px;
  --gg-space-18: 72px;
  --gg-space-24: 96px;

  /* Modulabstaende oben und unten, aus Design System "Padding".
     Figma kennt zwei Stufen, Small und Big. none und xl sind ergaenzt,
     damit Redakteure Module auch zusammenschieben oder trennen koennen. */
  --gg-section-none: 0;
  --gg-section-small: 44px;   /* Tablet 56, Desktop 72 */
  --gg-section-big: 62px;     /* Tablet 72, Desktop 96 */
  --gg-section-xl: 96px;      /* Tablet 112, Desktop 144, ergaenzt */

  /* Innerer Rhythmus zwischen Textbloecken */
  --gg-stack-s: var(--gg-space-2);
  /* Titel zu Text ist in Figma 16, nachgezaehlt 79 mal gegen 12 (31) und
     32 (1). Vorher standen hier 20 mobil und 40 auf Desktop, das war
     geraten und in keiner Flaeche belegt. */
  --gg-stack-m: var(--gg-space-4);
  --gg-stack-l: var(--gg-space-6);

  /* --- Container --------------------------------------------------------- */
  --gg-container: 1296px;      /* 1440 minus 2 x 72 */
  --gg-gutter: 20px;           /* Side Padding, Tablet 40, Desktop 72 */
  --gg-measure: 800px;         /* Max-Textbreite aus den Annotationen */
  --gg-measure-narrow: 600px;

  /* --- Header ------------------------------------------------------------ */
  /* Hoehe des globalen Headers, aus dem Figma-Referenzcode:
     98px auf Mobile, 100px ab Tablet. Wird vom Sprungmenue und von allen
     sticky Elementen als Offset gebraucht. */
  --gg-header-height: 98px;

  /* --- Bewegung ---------------------------------------------------------- */
  --gg-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Bild-Overlays ----------------------------------------------------- */
  /* Zwei Farbebenen ueber Bildern, Deckkraft je Zustand aus der Modul-Doku */
  --gg-overlay-black: 0.5;
  --gg-overlay-red: 0.1;
  --gg-overlay-black-active: 0.4;
  --gg-overlay-red-active: 0.4;
}

/* --- Tablet, ab 768px ---------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    /* Typo wechselt hier auf die Desktop-Werte */
    --gg-h1-size: 52px;   --gg-h1-ls: -0.03em;
    --gg-h2-size: 40px;
    --gg-h3-size: 26px;
    --gg-h4-size: 22px;
    --gg-h5-size: 20px;
    --gg-h6-size: 18px;   --gg-h6-ls: -0.01em;
    --gg-body-size: 18px;
    --gg-small-size: 15px;
    --gg-list-size: 16px;
    --gg-label-size: 14px;

    --gg-radius-media: 110px;
    --gg-radius-media-sm: 70px;

    --gg-header-height: 100px;

    --gg-section-small: 56px;
    --gg-section-big: 72px;
    --gg-section-xl: 112px;

    --gg-gutter: 40px;
  }
}

/* --- Desktop, ab 1200px -------------------------------------------------- */
@media (min-width: 1200px) {
  :root {
    --gg-section-small: 72px;
    --gg-section-big: 96px;
    --gg-section-xl: 144px;

    --gg-gutter: 72px;
  }
}

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}
/* ============================================================================
   GARANT Layout-Objekte
   Container, Modulabstaende, vertikaler Rhythmus. Keine Farben, keine Deko.
   ========================================================================= */

/* --- Modulhuelle --------------------------------------------------------- */
/* Jedes GARANT-Modul liegt in .gg-section. Die Abstaende oben und unten
   steuert der Redakteur je Modul ueber zwei Auswahlfelder, die als
   Modifier-Klassen ausgegeben werden. Standard ist "big", das entspricht
   dem Design. */
.gg-section {
  position: relative;
  padding-top: var(--gg-section-big);
  padding-bottom: var(--gg-section-big);
}

.gg-section--pt-none  { padding-top: var(--gg-section-none); }
.gg-section--pt-small { padding-top: var(--gg-section-small); }
.gg-section--pt-big   { padding-top: var(--gg-section-big); }
.gg-section--pt-xl    { padding-top: var(--gg-section-xl); }

.gg-section--pb-none  { padding-bottom: var(--gg-section-none); }
.gg-section--pb-small { padding-bottom: var(--gg-section-small); }
.gg-section--pb-big   { padding-bottom: var(--gg-section-big); }
.gg-section--pb-xl    { padding-bottom: var(--gg-section-xl); }

/* --- Container ----------------------------------------------------------- */
.gg-container {
  width: 100%;
  max-width: calc(var(--gg-container) + 2 * var(--gg-gutter));
  margin-inline: auto;
  padding-inline: var(--gg-gutter);
}

/* Volle Breite, aber mit Seitenabstand. Fuer Module, die randlos sind. */
.gg-container--full {
  max-width: none;
  padding-inline: 0;
}

/* --- Textbreiten --------------------------------------------------------- */
.gg-measure { max-width: var(--gg-measure); }
.gg-measure-narrow { max-width: var(--gg-measure-narrow); }

/* --- Vertikaler Rhythmus ------------------------------------------------- */
/* Abstand zwischen Textbloecken innerhalb eines Moduls. */
/* Doppelte Klasse, sonst wirkungslos an Ueberschriften: die Regel
   `.gg-h1, .gg-h2, ... { margin: 0 }` aus _gg-typography.css hat dieselbe
   Spezifitaet und laedt spaeter. Auf der Testseite waren dadurch 20 von 37
   Abstaenden ohne Wirkung, und zwar ausnahmslos an Ueberschriften, das
   Label klebte am Titel. */
.gg-stack.gg-stack > * + * { margin-top: var(--gg-stack-m); }
.gg-stack--s.gg-stack--s > * + * { margin-top: var(--gg-stack-s); }
.gg-stack--l.gg-stack--l > * + * { margin-top: var(--gg-stack-l); }

/* Nach dem Label folgt der Titel mit 12 auf Mobile und 26 auf Desktop.
   Zusammen mit den 12 aus dem Label selbst ergibt das die 24 und 38 aus
   Figma, nachgezaehlt ueber 79 Flaechen. Ausnahmen im Design: Hero
   Highlight 28, Testimonials Desktop 44, Brand Slider Desktop 52. */
.gg-stack.gg-stack > .gg-label + * { margin-top: var(--gg-space-3); }

@media (min-width: 768px) {
  .gg-stack.gg-stack > .gg-label + * { margin-top: 26px; }
}

/* --- Hintergrundvarianten ------------------------------------------------ */
/* .gg-on-red schaltet ausserdem alle Buttons auf die White-Variante um,
   siehe _gg-buttons.css. Genau so ist es im Design System beschrieben:
   "Automatic button color on all backgrounds except when the background is Red" */
.gg-bg-white { background: var(--gg-surface); color: var(--gg-text); }
.gg-bg-light { background: var(--gg-surface-alt); color: var(--gg-text); }
.gg-bg-red   { background: var(--gg-surface-accent); color: var(--gg-text-inverse); }

/* --- Medien -------------------------------------------------------------- */
/* Vorgabe aus fast jeder Modul-Doku: "All uploaded media should fill the
   image area defined in the design". Ausnahmen nutzen .gg-media--fit. */
.gg-media {
  position: relative;
  overflow: hidden;
}

.gg-media > img,
.gg-media > video,
.gg-media > iframe,
.gg-media > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gg-media--fit > img,
.gg-media--fit > video,
.gg-media--fit > picture > img {
  object-fit: contain;
}

.gg-media--1-1 { aspect-ratio: 1 / 1; }
.gg-media--16-9 { aspect-ratio: 16 / 9; }

/* Runde Ecken. Position kommt je Modul dazu, die Groesse aus den Tokens. */
.gg-round-tl { border-top-left-radius: var(--gg-radius-media); }
.gg-round-tr { border-top-right-radius: var(--gg-radius-media); }
.gg-round-bl { border-bottom-left-radius: var(--gg-radius-media); }
.gg-round-br { border-bottom-right-radius: var(--gg-radius-media); }

.gg-round-sm.gg-round-tl { border-top-left-radius: var(--gg-radius-media-sm); }
.gg-round-sm.gg-round-tr { border-top-right-radius: var(--gg-radius-media-sm); }
.gg-round-sm.gg-round-bl { border-bottom-left-radius: var(--gg-radius-media-sm); }
.gg-round-sm.gg-round-br { border-bottom-right-radius: var(--gg-radius-media-sm); }

/* --- Bild-Overlay -------------------------------------------------------- */
/* Zwei Farbebenen, Schwarz und GARANT Red, Deckkraft aus den Tokens.
   Wird per Pseudoelement gelegt, damit kein Extra-Markup noetig ist. */
.gg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgb(227 0 11 / var(--gg-overlay-red)), rgb(227 0 11 / var(--gg-overlay-red))),
    linear-gradient(0deg, rgb(0 0 0 / var(--gg-overlay-black)), rgb(0 0 0 / var(--gg-overlay-black)));
  transition: background var(--gg-transition);
}

/* Zustand fuer Hover auf Desktop und Active auf Mobile */
.gg-overlay--active::after,
.gg-overlay.is-active::after {
  background:
    linear-gradient(0deg, rgb(227 0 11 / var(--gg-overlay-red-active)), rgb(227 0 11 / var(--gg-overlay-red-active))),
    linear-gradient(0deg, rgb(0 0 0 / var(--gg-overlay-black-active)), rgb(0 0 0 / var(--gg-overlay-black-active)));
}

/* --- Sticky -------------------------------------------------------------- */
/* "Fixed while scrolling" aus den Annotationen bedeutet immer: innerhalb der
   Modulflaeche stehenbleiben. Also sticky, nicht fixed. Der Offset
   beruecksichtigt den Header. Nur ab Tablet, auf Mobile stapeln die Module.

   Und das Sprungmenue, wo eines auf der Seite steht: es liegt fixiert unter
   dem Header und verdeckt genau so viel zusaetzlich. Seine Hoehe schreibt es
   selbst als --gg-anchor-bar an das Wurzelelement, und nur solange es
   wirklich klebt. Ohne Sprungmenue gibt es die Variable nicht, dann greift
   der Standard 0px und der Wert ist derselbe wie vorher. */
:root {
  --gg-sticky-offset: calc(var(--gg-header-height) + var(--gg-anchor-bar, 0px) + var(--gg-space-6));
}

@media (min-width: 768px) {
  .gg-sticky {
    position: sticky;
    top: var(--gg-sticky-offset);
    align-self: flex-start;
  }
}

/* --- Hilfsklassen -------------------------------------------------------- */
.gg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Elements
Base HMTL elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
}

/* Lists */

ul,
ol {
  margin: 0 0 1.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
/* ============================================================================
   GARANT Typografie
   Utility-Klassen fuer modulgesteuerten Text, plus .gg-prose fuer Richtext,
   den Redakteure fuellen. Globale h1 bis h6 werden absichtlich NICHT
   angefasst, damit die Altmodule und css/style.css unveraendert weiterlaufen.
   ========================================================================= */

.gg-h1, .gg-h2, .gg-h3, .gg-h4, .gg-h5, .gg-h6 {
  font-family: var(--gg-font);
  font-weight: var(--gg-weight-medium);
  margin: 0;
  color: var(--gg-heading);
}

.gg-h1 { font-size: var(--gg-h1-size); line-height: var(--gg-h1-lh); letter-spacing: var(--gg-h1-ls); }
.gg-h2 { font-size: var(--gg-h2-size); line-height: var(--gg-h2-lh); letter-spacing: var(--gg-h2-ls); }
.gg-h3 { font-size: var(--gg-h3-size); line-height: var(--gg-h3-lh); letter-spacing: var(--gg-h3-ls); }
.gg-h4 { font-size: var(--gg-h4-size); line-height: var(--gg-h4-lh); letter-spacing: var(--gg-h4-ls); }
.gg-h5 { font-size: var(--gg-h5-size); line-height: var(--gg-h5-lh); letter-spacing: var(--gg-h5-ls); }
.gg-h6 { font-size: var(--gg-h6-size); line-height: var(--gg-h6-lh); letter-spacing: var(--gg-h6-ls); }

.gg-body {
  font-family: var(--gg-font);
  font-weight: var(--gg-weight-regular);
  font-size: var(--gg-body-size);
  line-height: var(--gg-body-lh);
  letter-spacing: var(--gg-body-ls);
  margin: 0;
}

.gg-body-sm {
  font-family: var(--gg-font);
  font-weight: var(--gg-weight-regular);
  font-size: var(--gg-small-size);
  line-height: var(--gg-small-lh);
  letter-spacing: var(--gg-small-ls);
  margin: 0;
}

/* Label, das kleine Element mit dem Quadrat davor. Kommt in fast jedem
   Modul vor, deshalb hier und nicht je Modul. */
.gg-label {
  /* Die Labelzeile hat in Figma durchgehend 12px Abstand nach unten, das
     gehoert zum Label selbst. Nachgezaehlt 102 Labelzeilen mit, 2 ohne. */
  padding-bottom: var(--gg-space-3);
  /* Auf hellem Grund Grey, nicht die Textfarbe des Alt-Themes. Gemessen
     kam vorher #14273c heraus, geerbt aus style.css. */
  color: var(--gg-grey);
  font-family: var(--gg-font);
  font-weight: var(--gg-weight-medium);
  font-size: var(--gg-label-size);
  line-height: var(--gg-label-lh);
  letter-spacing: var(--gg-label-ls);
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-2);
  margin: 0;
}

.gg-label::before {
  content: '';
  display: block;
  /* Figma zeichnet das Labelquadrat mit 10px, nachgezaehlt 102 mal ueber
     alle Flaechen. Die 8px-Quadrate im Design sind Listenpunkte, keine
     Labels. Vorher standen hier 7px, das war geraten. */
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: currentColor;
}

/* --- Richtext ------------------------------------------------------------ */
/* Alles, was aus einem Richtext-Feld kommt. Bewusst eng gehalten, damit
   Redakteure nicht versehentlich Layout brechen koennen.

   Wichtig: css/style.css laedt NACH main.css und setzt
   `p { font-size:18px; line-height: var(--line-height-base) }` direkt auf
   das Element. Eine direkte Regel schlaegt immer Vererbung, egal wie hoch
   die Spezifitaet des Elternteils ist. Deshalb bekommen die Kindelemente
   hier eigene Werte und nicht nur der Container.

   Die Groesse laeuft ueber eine lokale Variable, damit .gg-body-sm auch
   auf einem Richtext-Block wirkt. */
.gg-prose {
  --prose-size: var(--gg-body-size);
  --prose-lh: var(--gg-body-lh);
  --prose-ls: var(--gg-body-ls);
  font-family: var(--gg-font);
  font-size: var(--prose-size);
  line-height: var(--prose-lh);
  letter-spacing: var(--prose-ls);
}

.gg-prose.gg-body-sm {
  --prose-size: var(--gg-small-size);
  --prose-lh: var(--gg-small-lh);
  --prose-ls: var(--gg-small-ls);
}

.gg-prose > *:first-child { margin-top: 0; }
.gg-prose > *:last-child { margin-bottom: 0; }

/* Farbe ausdruecklich, nicht geerbt. Fliesstext ist im Design durchgehend
   Grey #585858, nachgezaehlt 255 Absaetze gegen 0 in Dark Grey. Ohne diese
   Angabe erbte der Text die Farbe des Alt-Themes: gemessen kamen auf einer
   Seite vier verschiedene Werte heraus, #14273c im Text Block und CTA,
   #292929 bei den Kennzahlen, Grey nur dort, wo ein Modul es selbst setzte. */
.gg-prose,
.gg-prose p,
.gg-prose li {
  color: var(--gg-grey);
}

.gg-prose p,
.gg-prose li {
  font-family: var(--gg-font);
  font-size: var(--prose-size);
  line-height: var(--prose-lh);
  letter-spacing: var(--prose-ls);
}

.gg-prose p { margin: 0 0 var(--gg-space-5); }

/* Farbe ausdruecklich, aus demselben Grund wie oben bei p und li: ohne
   Angabe greift `h1 { color: ... }` aus theme-overrides.css. Das sind die
   Ueberschriftsfarben des ALT-Themes aus den Theme-Feldern, gemessen
   rgb(20, 39, 60), also Dunkelblau. Die Regel hat nur 0,0,1, aber sie war
   die einzige, die ueberhaupt eine Farbe setzte, und hat deshalb
   gewonnen. Betroffen waren alle sechs Ebenen und auf rotem Grund
   ebenfalls, dort stand Dunkelblau auf Rot.

   inherit und NICHT var(--gg-heading): das Token steht auf GARANT Red und
   gilt fuer Modultitel mit der Klasse .gg-h2. Eine Zwischenueberschrift im
   Fliesstext ist im Design Grey wie der Text daneben, so steht es auch im
   Kommentar in Text Block/module.css. Mit inherit kommt die Farbe von
   .gg-prose, also Grey, und auf rotem Grund und ueber Bild automatisch
   Weiss. Ein fester Wert muesste dort noch einmal umgeschaltet werden.

   Module, die es anders brauchen, setzen es weiterhin selbst: die
   Stellendetailseite auf Dark Grey, der Blogbeitrag auf Rot. Beide Regeln
   liegen in Modul-CSS und schlagen diese hier ueber die Reihenfolge. */
.gg-prose h1, .gg-prose h2, .gg-prose h3,
.gg-prose h4, .gg-prose h5, .gg-prose h6 {
  font-weight: var(--gg-weight-medium);
  margin: var(--gg-space-8) 0 var(--gg-space-4);
  color: inherit;
}

.gg-prose h1 { font-size: var(--gg-h1-size); line-height: var(--gg-h1-lh); letter-spacing: var(--gg-h1-ls); }
.gg-prose h2 { font-size: var(--gg-h2-size); line-height: var(--gg-h2-lh); letter-spacing: var(--gg-h2-ls); }
.gg-prose h3 { font-size: var(--gg-h3-size); line-height: var(--gg-h3-lh); letter-spacing: var(--gg-h3-ls); }
.gg-prose h4 { font-size: var(--gg-h4-size); line-height: var(--gg-h4-lh); letter-spacing: var(--gg-h4-ls); }
.gg-prose h5 { font-size: var(--gg-h5-size); line-height: var(--gg-h5-lh); letter-spacing: var(--gg-h5-ls); }
.gg-prose h6 { font-size: var(--gg-h6-size); line-height: var(--gg-h6-lh); letter-spacing: var(--gg-h6-ls); }

/* --- figure ---------------------------------------------------------------
   Browser geben `figure` von sich aus `margin: 1em 40px`. Im Theme setzt
   das niemand zurueck. Gemerkt am Testimonial: der Slide ist ein figure,
   Zitat und Name standen dadurch 40 px weiter innen als Label und
   Fortschrittsleiste. Betrifft auch den Bild-Slider im Blogbeitrag.
------------------------------------------------------------------------- */
figure {
  margin: 0;
}

/* --- Listen -------------------------------------------------------------
   Nachgemessen an Text with Media, 333:12854 Desktop und 333:12865 Mobile,
   beide Staende gleich:

     Punkt        8 x 8 px Quadrat in GARANT Red, nicht rund
     zum Text     10 px Abstand
     zwischen     12 px von Punkt zu Punkt
     Text         16 px Regular auf Desktop, Zeilenhoehe 1.5, Grey
     Ausrichtung  Punkt liegt mittig auf der ERSTEN Zeile, in Figma ueber
                  ein Wrapper-Element mit py-7

   Vorher stand hier der Browserpunkt, also ein runder schwarzer Aufzaehl-
   punkt mit 20 px Einzug. Das war nie das Design.

   Zur Groesse: hier stand 15 px aus --gg-small-size. Vorgabe ist eine
   Stufe unter dem Fliesstext, also 16 gegen Body 18. Gegengemessen an
   Figma 2625:8853, wo die Zeilenkaesten der Punkte 24 px hoch sind, bei
   16 px also Zeilenhoehe 1.5. Dafuer gibt es jetzt --gg-list-size,
   mobil 14 gegen Body 16, damit der Abstand zum Fliesstext bleibt.
------------------------------------------------------------------------- */
.gg-prose ul, .gg-prose ol { margin: 0 0 var(--gg-space-5); }

.gg-prose ul { list-style: none; padding-left: 0; }

/* ul:not([class]), weil nicht jede Liste im Fliesstext eine Aufzaehlung
   ist. Module bauen ihre Raster ebenfalls als ul mit li, etwa
   "Blog Post - Image Grid" mit .gg-bloggrid und "Blog Post - Image with
   Description" mit .gg-blogimgtext. Stehen sie in einem .gg-prose, bekam
   dort jedes BILD ein rotes Quadrat davor und 18 Einzug.

   Eine Liste aus dem Rich-Text-Editor traegt nie eine Klasse, eine Liste
   aus einem Modul immer. Genau daran wird unterschieden. Dieselbe
   Ueberlegung wie bei `.gg-prose a:not(.gg-btn)` weiter unten: die
   Ausnahme steht an der Quelle und nicht als Gegenregel je Modul. */
.gg-prose ul:not([class]) > li {
  position: relative;
  /* 8 fuer das Quadrat plus 10 Abstand */
  padding-left: 18px;
}

.gg-prose ul:not([class]) > li::before {
  content: '';
  position: absolute;
  left: 0;
  /* mittig auf der ersten Zeile: halbe Zeilenhoehe minus halber Punkt */
  top: calc((1em * var(--gg-list-lh) - 8px) / 2);
  width: 8px;
  height: 8px;
  background: var(--gg-red);
}

/* Nicht im Design vorgesehen, aber ein roter Punkt auf rotem Grund waere
   unsichtbar. Deshalb dort und ueber Bild in Weiss. */
.gg-on-red .gg-prose ul:not([class]) > li::before,
.gg-on-image .gg-prose ul:not([class]) > li::before,
.gg-on-dark .gg-prose ul:not([class]) > li::before { background: var(--gg-white); }

.gg-prose ol { padding-left: var(--gg-space-5); }

/* Listen sind eine Stufe kleiner als die Absatzgroesse: 16 gegen 18 auf
   Desktop, 14 gegen 16 mobil. Eigene Stufe, siehe --gg-list-size. */
.gg-prose li {
  font-size: var(--gg-list-size);
  line-height: var(--gg-list-lh);
  letter-spacing: var(--gg-list-ls);
  margin-bottom: var(--gg-space-3);
}

.gg-prose li:last-child { margin-bottom: 0; }

/* HubSpots Richtext verpackt Eintraege oft als <li><p>Text</p></li>, je
   nachdem wie der Redakteur die Liste angelegt oder eingefuegt hat. Die
   Groesse am <li> erreicht den Text dann nicht: das <p> darin holt sich
   seine 18px von `.gg-prose p`, gleiche Spezifitaet, aber eigenes
   Element. Genau daran blieb ein Punkt auf Absatzgroesse stehen, waehrend
   die uebrigen stimmten.
   Der Absatzabstand muss mit weg, sonst reisst er die 12px zwischen den
   Punkten auf var(--gg-space-5) auf. */
.gg-prose li p {
  font-size: var(--gg-list-size);
  line-height: var(--gg-list-lh);
  letter-spacing: var(--gg-list-ls);
  margin: 0;
}

/* :not(.gg-btn), weil ein Button im Fliesstext kein Fliesstextlink ist.

   `.gg-prose a` hat die Spezifitaet 0,1,1 und schlaegt damit `.gg-btn`
   und `.gg-btn--primary`, die beide nur 0,1,0 haben. Jeder Button
   innerhalb eines .gg-prose bekam dadurch rote, unterstrichene Schrift.
   Beim Primary stand damit rote Schrift auf rotem Grund, der Text war
   schlicht nicht zu lesen. Nachgemessen an "Buttons - Blog Posts".

   Die Ausnahme steht hier an der Quelle und nicht als Gegenregel in
   _gg-buttons.css. Eine Gegenregel muesste jede betroffene Eigenschaft
   einzeln festnageln und dabei die Varianten auf rotem Grund
   ueberholen, die selbst nur 0,2,0 haben. So faellt der Button einfach
   aus der Regel heraus.

   :not() traegt die Spezifitaet seines Arguments, die Regel steht also
   auf 0,2,1. Fuer gewoehnliche Links im Fliesstext aendert das nichts,
   dort konkurriert niemand. */
.gg-prose a:not(.gg-btn) {
  color: var(--gg-accent);
  text-decoration: underline;
  transition: color var(--gg-transition);
}
.gg-prose a:not(.gg-btn):hover { color: var(--gg-accent-hover); }

.gg-prose strong { font-weight: var(--gg-weight-bold); }

/* --- Kontextumschaltung -------------------------------------------------- */
/* Auf rotem Grund und ueber Bildern drehen Ueberschriften und Text auf Weiss.
   Buttons schalten dadurch ebenfalls automatisch um, siehe _gg-buttons.css. */
.gg-on-red, .gg-on-image, .gg-on-dark {
  --gg-heading: var(--gg-white);
  --gg-text: var(--gg-white);
  --gg-text-muted: var(--gg-overlay-light-2);
}

/* Auf Rot, ueber Bild und auf dunklem Grund ist der Fliesstext reines
   Weiss, 34 Absaetze im Design. */
.gg-on-red .gg-prose, .gg-on-red .gg-prose p, .gg-on-red .gg-prose li,
.gg-on-image .gg-prose, .gg-on-image .gg-prose p, .gg-on-image .gg-prose li,
.gg-on-dark .gg-prose, .gg-on-dark .gg-prose p, .gg-on-dark .gg-prose li {
  color: var(--gg-white);
}

/* Auf Rot und ueber Bild ist das Label reines Weiss, nicht abgesenkt.
   Belegt an CTA Banner 334:10100 und am Hero-Highlight. */
.gg-on-red .gg-label,
.gg-on-image .gg-label,
.gg-on-dark .gg-label { color: var(--gg-white); }

/* Auf rotem Grund dreht sich die Textfarbe */
.gg-on-red .gg-prose a:not(.gg-btn) { color: var(--gg-white); }
.gg-on-red .gg-prose a:not(.gg-btn):hover { color: var(--gg-overlay-light-2); }
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }

/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Header DND sections */

.header .dnd-section {
  padding: 0;
}

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
}

.header__row-1 {
  padding-top: 1rem;
}

.header__row-1,
.header__row-2 {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
  }

  .header__column {
    position: relative;
  }

  .header__row-1 {
    padding-top: 0;
  }

  .header__row-2 {
    justify-content: center;
    padding: 1.05rem;
  }
}

/* Navigation skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Logo */

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: auto;
  max-width: 200px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .header__logo {
    margin: 0 auto;
    width: 100%;
  }
}

.header__logo img {
  max-width: 100%;
}

.header__logo .logo-company-name {
  font-size: 1.167rem;
  margin-top: 0.7rem;
}

.header__logo--main {
  padding-top: 1rem;
}

/* Search bar */

.header__search {
  padding: 0 1rem;
  width: auto;
}



  .hs-search-field__form {
    position: relative;
  }

  .header__search .hs-search-field__label {
    flex-basis: auto;
  }



.header__search .hs-search-field__input {
  
  height: 45px;
  padding: 0 0.7rem;
}



  .header__search .hs-search-field__button {
    padding: 0;
    fill: #000;
    background-color: transparent;
    border: none;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .header__search .hs-search-field__button svg {
    height: 25px;
  }


.header__search .hs-search-field--open .hs-search-field__input {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  max-width: 100%;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: #FFF;
  border: 2px solid #D1D6DC;
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid #D1D6DC;
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: #494A52;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

@media (min-width: 767px) {
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search label {
    margin: 0 1rem 0 0;
  }

  .header__search .hs-search-field__input {
    width: auto;
  }
}

@media (max-width: 767px) {
  .header__search {
    border-top: 2px solid #CED4DB;
    order: 1;
    padding: 1.05rem;
  }
}

/* Language switcher */

.header__language-switcher {
  cursor: pointer;
  padding-right: 1.4rem;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

.header__language-switcher .lang_list_class {
  border: 2px solid;
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  display: block;
  left: calc(100% - 24px);
  opacity: 0;
  min-width: 100px;
  padding-top: 0;
  text-align: left;
  top: 100%;
  transition: opacity 0.3s;
  visibility: hidden;
}

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  transition: opacity 0.3s;
  visibility: visible;
}

.header__language-switcher .lang_list_class:before {
  left: 70%;
  top: -25px;
}

.header__language-switcher .lang_list_class:after {
  left: 70%;
  top: -22px;
}

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  transition: 0.3s;
}

.header__language-switcher .lang_list_class li {
  border: none;
  font-size: 18px;
  padding: 0.35rem 0.7rem;
}

.header__language-switcher .lang_list_class li:first-child {
  border-radius: 6px 6px 0 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.header__language-switcher .lang_list_class li:hover {
  transition: background-color 0.3s;
}

.header__language-switcher--label {
  display: flex;
  position: relative;
}

.header__language-switcher--label-current {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  margin-bottom: 0.175rem;
  margin-left: 0.7rem;
}

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #494A52;
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

@media (max-width: 767px) {
  .header__language-switcher {
    border-top: 2px solid #CED4DB;
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    left: 30px;
    opacity: 1;
    padding: 0 1.05rem;
    top: 0;
    visibility: visible;
  }

  .header__language-switcher .lang_list_class li {
    background-color: inherit;
    font-size: 0.917rem;
  }

  .header__language-switcher--label-current {
    display: none;
  }

  .header__language-switcher .globe_class {
    background-image: none;
  }

  .header__language-switcher .lang_list_class li:hover{
    background-color: inherit;
  }

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }
    /* V1 lang switcher updates to keep "in line" w/ v0 mobile styles */
    .header__language-switcher .hs-language-switcher__menu {
        display: block;
        box-shadow:none!important;
        background: transparent;
    }
    .header__language-switcher .hs-language-switcher__menu a {
        font-size: 20px!important;
    }
    .header__language-switcher .hs-language-switcher__button {
        display: none;
    }
  }

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 767px) {
  .header__navigation,
  .header__search,
  .header__language-switcher {
    display: none;
    width: 100%;
  }

  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    background-color: #F8FAFC;
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }

  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    cursor: pointer;
    margin: 0 5vw;
    position: relative;
  }

  .header__navigation--toggle.hide,
  .header__search--toggle.hide,
  .header__language-switcher--toggle.hide {
    display: none;
  }

  .header__navigation--toggle.open,
  .header__search--toggle.open,
  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__navigation--toggle:after,
  .header__search--toggle:after,
  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__navigation--toggle.open:after,
  .header__search--toggle.open:after,
  .header__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__navigation--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__navigation--toggle:after {
    content: "Menu";
  }

  .header__language-switcher--toggle {
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__language-switcher--toggle:after {
    content: "Language";
  }

  .header__search--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__search--toggle:after {
    content: "Search";
  }

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

  .header__close--toggle.show {
    display: block;
  }
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
/* ============================================================================
   GARANT Buttons
   Quelle: Design System, Sektion "Buttons" (227:1800).

   Drei Typen: Primary, Secondary, Tertiary.
   Je Typ zwei Farbvarianten, Default und White. Die Variante waehlt der
   Redakteur NICHT aus, sie schaltet automatisch um: auf rotem Grund gilt
   White. Im Design System steht dazu wortwoertlich
   "Automatic button color on all backgrounds except when the background is Red".
   Umgesetzt ueber die Elternklasse .gg-on-red.

   Pfeil: je Button ein Schalter "Button Arrow", per Default an.
   ========================================================================= */

.gg-btn {
  /* Masse aus dem Referenzcode: pt 10, pr 12, pb 9, pl 14, gap 8 */
  display: inline-flex;
  /* Nie auf die Breite des Elternteils strecken. In einer Flex-Spalte ist
     align-self standardmaessig stretch, der Button lief dann auf die volle
     Kartenbreite und weil er seinen Inhalt mittig setzt, stand die Schrift
     in der Kartenmitte statt links. Aufgefallen an den Content Cards und
     der Blog-Uebersicht, Figma setzt dort `items-start`. */
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: var(--gg-space-2);
  padding: 10px 12px 9px 14px;
  border: 1.5px solid transparent;
  border-radius: var(--gg-radius-button);
  font-family: var(--gg-font);
  font-weight: var(--gg-weight-bold);
  font-size: var(--gg-button-size);
  line-height: var(--gg-button-lh);
  letter-spacing: var(--gg-button-ls);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--gg-transition),
              border-color var(--gg-transition),
              color var(--gg-transition);
}

.gg-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.gg-btn__arrow {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  transition: transform var(--gg-transition);
}

.gg-btn:hover .gg-btn__arrow { transform: translateX(2px); }

/* --- Primary ------------------------------------------------------------- */
.gg-btn--primary {
  background: var(--gg-red);
  border-color: var(--gg-red);
  color: var(--gg-white);
}

.gg-btn--primary:hover {
  background: var(--gg-red-hover);
  border-color: var(--gg-red-hover);
  color: var(--gg-white);
}

/* --- Secondary ----------------------------------------------------------- */
.gg-btn--secondary {
  background: transparent;
  border-color: var(--gg-red);
  color: var(--gg-red);
}

.gg-btn--secondary:hover {
  border-color: var(--gg-red-hover);
  color: var(--gg-red-hover);
}

/* --- Tertiary ------------------------------------------------------------ */
/* Reiner Textlink. Kein Rahmen, kein Hintergrund, und ohne Seitenpolster,
   damit er im Textfluss auf der Kante sitzt. */
.gg-btn--tertiary {
  background: transparent;
  border-color: transparent;
  padding-inline: 0;
  /* Grey, nicht Dark Grey. Buttontext in Maax Bold 18 kommt im Design 161
     mal in Grey, 116 mal Weiss, 73 mal Rot und NULL mal in Dark Grey vor.
     Vorher stand hier --gg-text, also Dark Grey. */
  color: var(--gg-grey);
}

.gg-btn--tertiary .gg-btn__arrow { color: var(--gg-red); }

.gg-btn--tertiary:hover {
  color: var(--gg-red);
}

/* ============================================================================
   Variante White, greift automatisch auf rotem Grund
   ========================================================================= */

.gg-on-red .gg-btn--primary {
  background: var(--gg-white);
  border-color: var(--gg-white);
  color: var(--gg-red);
}

.gg-on-red .gg-btn--primary:hover {
  background: var(--gg-overlay-light-2);
  border-color: transparent;
  color: var(--gg-red);
}

.gg-on-red .gg-btn--secondary {
  background: transparent;
  border-color: var(--gg-white);
  color: var(--gg-white);
}

.gg-on-red .gg-btn--secondary:hover {
  border-color: var(--gg-overlay-light-2);
  color: var(--gg-overlay-light-2);
}

.gg-on-red .gg-btn--tertiary {
  color: var(--gg-white);
}

.gg-on-red .gg-btn--tertiary .gg-btn__arrow { color: var(--gg-white); }

.gg-on-red .gg-btn--tertiary:hover {
  color: var(--gg-overlay-light-2);
}

/* Auf Bildern mit dunklem Overlay gilt dasselbe wie auf rotem Grund */
.gg-on-image .gg-btn--secondary {
  border-color: var(--gg-white);
  color: var(--gg-white);
}
.gg-on-image .gg-btn--tertiary {
  color: var(--gg-white);
}
.gg-on-image .gg-btn--tertiary .gg-btn__arrow { color: var(--gg-white); }

/* Und die Hover-Zustaende dazu. Sie fehlten, es griff der helle Standard:
   ueber einem Bild wurde der sekundaere Button beim Hovern dunkelrot und
   damit fast unlesbar, der tertiaere ebenso. Auf hellem Grund ist Hover
   Hover-Red, auf Rot, Bild und Dunkel 50 Prozent Weiss. */
.gg-on-image .gg-btn--secondary:hover,
.gg-on-dark .gg-btn--secondary:hover {
  border-color: var(--gg-overlay-light-2);
  color: var(--gg-overlay-light-2);
}

.gg-on-image .gg-btn--tertiary:hover,
.gg-on-dark .gg-btn--tertiary:hover {
  color: var(--gg-overlay-light-2);
}

.gg-on-image .gg-btn--tertiary:hover .gg-btn__arrow,
.gg-on-dark .gg-btn--tertiary:hover .gg-btn__arrow,
.gg-on-red .gg-btn--tertiary:hover .gg-btn__arrow {
  color: var(--gg-overlay-light-2);
}

.gg-on-dark .gg-btn--primary:hover {
  background: var(--gg-overlay-light-2);
  border-color: transparent;
  color: var(--gg-dark-grey);
}

/* --- Button-Gruppe ------------------------------------------------------- */
.gg-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gg-space-3);
}

.gg-btn-group:empty { display: none; }

/* ============================================================================
   Zustaende gegen das Alt-Theme absichern

   `css/theme-overrides.css` stylt Buttons global aus den Theme-Fields:

     button, .yellowCTA, .button, .hs-button { border: 1px solid #14273c;
       border-radius: 0; background-color: ...; color: ...; }
     button:hover, button:focus, button:active { border: ...; color: ...;
       background-color: ...; border-radius: ...; }

   Im Ruhezustand ist das harmlos, `button` hat nur die Spezifitaet 0,0,1 und
   verliert gegen jede Klasse. Beim Hovern ist `button:hover` aber 0,1,1 und
   schlaegt damit eine einzelne Klasse. Betroffen sind genau vier
   Eigenschaften: border, border-radius, background-color und color.

   Einmal reingelaufen: der Burger wurde beim Hovern quadratisch und bekam
   einen blauen Rahmen. Deshalb werden die Zustaende hier mit doppelter Klasse
   festgenagelt, das ergibt 0,2,x und gewinnt verlaesslich.
   ========================================================================= */

.gg-burger.gg-burger:hover,
.gg-burger.gg-burger:focus,
.gg-burger.gg-burger:active {
  border: 0;
  border-radius: 50%;
  background-color: var(--gg-red-hover);
  color: var(--gg-white);
}

.gg-nav__toggle.gg-nav__toggle:hover,
.gg-nav__toggle.gg-nav__toggle:focus,
.gg-nav__toggle.gg-nav__toggle:active {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--gg-red-hover);
}

.gg-accordion__toggle.gg-accordion__toggle:hover,
.gg-accordion__toggle.gg-accordion__toggle:focus,
.gg-accordion__toggle.gg-accordion__toggle:active {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--gg-red);
}

.gg-slider__arrow.gg-slider__arrow:hover,
.gg-slider__arrow.gg-slider__arrow:focus,
.gg-slider__arrow.gg-slider__arrow:active,
.gg-slidernav__arrow.gg-slidernav__arrow:hover,
.gg-slidernav__arrow.gg-slidernav__arrow:focus,
.gg-slidernav__arrow.gg-slidernav__arrow:active {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--gg-red-hover);
}

/* Ruhezustand weiss, beim Ueberfahren GARANT Red. Die Regel steht hier und
   nicht in _gg-media.css, weil sie die wirksame ist: doppelt beklasst, um
   `button:hover` aus dem Alt-Theme zu schlagen.

   Zwei Regeln, weil zwei Dinge zu trennen sind.

   Erstens muss das Alt-Theme in JEDEM Zustand ruhiggestellt werden, auch
   bei blankem :focus. Genau dafuer stand hier `background-color:
   transparent`. Als ich :focus einmal auf :focus-visible umgestellt habe,
   griff das nach einem Mausklick nicht mehr und das Alt-Theme malte einen
   dunklen Kasten hinter den Pfeil.

   Zweitens soll die rote Farbe nur beim Ueberfahren kommen, per Tastatur
   und solange die Maustaste unten ist. Nach einem Klick bleibt der Pfeil
   weiss. Deshalb hier :focus-visible und nicht :focus. Der Fokusrahmen in
   _gg-media.css haengt ebenfalls an :focus-visible. */
.gg-media__arrow.gg-media__arrow:hover,
.gg-media__arrow.gg-media__arrow:focus,
.gg-media__arrow.gg-media__arrow:focus-visible,
.gg-media__arrow.gg-media__arrow:active {
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.gg-media__arrow.gg-media__arrow:hover,
.gg-media__arrow.gg-media__arrow:focus-visible,
.gg-media__arrow.gg-media__arrow:active {
  color: var(--gg-red);
}

.gg-timeline__year.gg-timeline__year:hover,
.gg-timeline__year.gg-timeline__year:focus,
.gg-timeline__year.gg-timeline__year:active {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--gg-grey);
}

.gg-timeline__year.gg-timeline__year.is-active {
  color: var(--gg-red);
}

/* Kategorie-Tags haben eigene Zustaende, siehe GG People und GG Blog Listing */
.gg-tag.gg-tag:hover,
.gg-tag.gg-tag:focus,
.gg-tag.gg-tag:active {
  border: 1.5px solid var(--gg-red);
  border-radius: var(--gg-radius-button);
  background-color: transparent;
  color: var(--gg-red);
}

.gg-tag.gg-tag.is-selected,
.gg-tag.gg-tag.is-selected:hover,
.gg-tag.gg-tag.is-selected:focus {
  border: 1.5px solid var(--gg-red);
  border-radius: var(--gg-radius-button);
  background-color: var(--gg-red);
  color: var(--gg-white);
}

/* Buttons, die als <button> ausgegeben werden, etwa Nachladen im Blog
   und das Instagram-Embed. */
.gg-btn.gg-btn--primary:hover,
.gg-btn.gg-btn--primary:focus,
.gg-btn.gg-btn--primary:active {
  border: 1.5px solid var(--gg-red-hover);
  border-radius: var(--gg-radius-button);
  background-color: var(--gg-red-hover);
  color: var(--gg-white);
}

.gg-btn.gg-btn--secondary:hover,
.gg-btn.gg-btn--secondary:focus,
.gg-btn.gg-btn--secondary:active {
  border: 1.5px solid var(--gg-red-hover);
  border-radius: var(--gg-radius-button);
  background-color: transparent;
  color: var(--gg-red-hover);
}

.gg-btn.gg-btn--tertiary:hover,
.gg-btn.gg-btn--tertiary:focus,
.gg-btn.gg-btn--tertiary:active {
  /* WICHTIG: dieselbe Rahmenbreite und derselbe Radius wie im Ruhezustand.
     Hier stand vorher `border: 0` und `border-radius: 0`. Die Basis hat
     1.5px durchsichtigen Rahmen, der Button wurde beim Hovern also um
     3px schmaler und niedriger und die Schrift ist gesprungen. */
  border: 1.5px solid transparent;
  border-radius: var(--gg-radius-button);
  background-color: transparent;
  color: var(--gg-red);
}

/* Auf rotem Grund gilt weiterhin die White-Variante. Diese Selektoren haben
   schon zwei Klassen und gewinnen daher ohnehin. */
.gg-on-red .gg-btn.gg-btn--primary:hover {
  background-color: var(--gg-overlay-light-2);
  border-color: transparent;
  color: var(--gg-red);
}

.gg-on-red .gg-btn.gg-btn--secondary:hover {
  background-color: transparent;
  border-color: var(--gg-overlay-light-2);
  color: var(--gg-overlay-light-2);
}

.gg-on-red .gg-btn.gg-btn--tertiary:hover { color: var(--gg-overlay-light-2); }

/* Ueber Bild und auf dunklem Grund gilt dasselbe, auch fuer <button>. */
.gg-on-image .gg-btn.gg-btn--secondary:hover,
.gg-on-dark .gg-btn.gg-btn--secondary:hover {
  background-color: transparent;
  border-color: var(--gg-overlay-light-2);
  color: var(--gg-overlay-light-2);
}

.gg-on-image .gg-btn.gg-btn--tertiary:hover,
.gg-on-dark .gg-btn.gg-btn--tertiary:hover { color: var(--gg-overlay-light-2); }

.gg-on-dark .gg-btn.gg-btn--primary:hover {
  background-color: var(--gg-overlay-light-2);
  border-color: transparent;
  color: var(--gg-dark-grey);
}

/* Dunkle Flaechen, etwa der Footer, verhalten sich wie rote: die Buttons
   schalten auf die White-Variante. */
.gg-on-dark .gg-btn--primary { background: var(--gg-white); border-color: var(--gg-white); color: var(--gg-dark-grey); }
.gg-on-dark .gg-btn--secondary { border-color: var(--gg-white); color: var(--gg-white); }
.gg-on-dark .gg-btn--tertiary { color: var(--gg-white); }
.gg-on-dark .gg-btn--tertiary .gg-btn__arrow { color: var(--gg-white); }

/* ----------------------------------------------------------------------------
   Und dieselbe Falle noch einmal, diesmal ueber den inaktiven Zustand:
   `button:disabled` aus main.css hat ebenfalls 0,1,1 und setzt
   `background-color: #d0d0d0` und `color: #e6e6e6`.

   Swiper setzt an den Enden nicht nur die Klasse `swiper-button-disabled`,
   sondern auch das Attribut `disabled`. Damit bekam JEDER inaktive
   Slider-Pfeil im Theme eine graue Kachel: Slider, Logo Slider,
   Testimonials und der Beitrags-Slider, gemessen auf der Testseite.

   Figma zeigt dort nur das Icon, ohne Flaeche, in GARANT Red mit 20 Prozent
   Deckkraft (Komponente slider arrow, `opacity-20`).
---------------------------------------------------------------------------- */
.gg-slider__arrow.gg-slider__arrow:disabled,
.gg-slider__arrow.gg-slider__arrow.swiper-button-disabled,
.gg-slidernav__arrow.gg-slidernav__arrow:disabled,
.gg-slidernav__arrow.gg-slidernav__arrow.swiper-button-disabled,
.gg-media__arrow.gg-media__arrow:disabled,
.gg-media__arrow.gg-media__arrow.swiper-button-disabled {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--gg-red);
  opacity: 0.2;
  cursor: default;
}

/* Ueber Bild, auf Rot und auf dunklem Grund bleibt der Pfeil weiss. */
.gg-on-red .gg-media__arrow.gg-media__arrow:disabled,
.gg-on-red .gg-media__arrow.gg-media__arrow.swiper-button-disabled,
.gg-on-image .gg-media__arrow.gg-media__arrow:disabled,
.gg-on-image .gg-media__arrow.gg-media__arrow.swiper-button-disabled,
.gg-on-dark .gg-media__arrow.gg-media__arrow:disabled,
.gg-on-dark .gg-media__arrow.gg-media__arrow.swiper-button-disabled {
  color: var(--gg-white);
}
/* ============================================================================
   GARANT Medien, Breadcrumbs, Medien-Slider
   Gemeinsam genutzt von Hero, Text with Media, Brand Slider und anderen.
   ========================================================================= */

/* --- Video --------------------------------------------------------------- */
.gg-media__video,
.gg-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* HubSpot rendert seinen Videoplayer in einen eigenen Wrapper.
   Der muss die Flaeche fuellen, sonst bleibt das Video winzig. */
.gg-media .hs-video-widget,
.gg-media .hs-video-container,
.gg-media > div:not([class]) {
  width: 100%;
  height: 100%;
}

/* --- Medien-Slider ------------------------------------------------------- */
.gg-media__slider {
  width: 100%;
  height: 100%;
}

.gg-media__slider .swiper-wrapper { height: 100%; }

.gg-media__slider .swiper-slide {
  height: 100%;
}

.gg-media__slider .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pfeile. Masse aus dem Referenzcode: 48 x 47, Polster 10, Abstand 8.
   Aus der Annotation: ausblenden, wenn es kein Slider ist. */
/* Referenzcode des Hero-Sliders: die Pfeilgruppe sitzt im Bildbereich mit
   72px seitlichem und 40px unterem Abstand, Abstand zwischen den Pfeilen 8.
   Auf Mobile weniger, dort ist der Seitenabstand 20. */
.gg-media__nav {
  position: absolute;
  right: var(--gg-space-5);
  bottom: var(--gg-space-5);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--gg-space-2);
}

@media (min-width: 768px) {
  .gg-media__nav {
    right: var(--gg-space-10);
    bottom: var(--gg-space-8);
  }
}

@media (min-width: 1200px) {
  .gg-media__nav {
    right: var(--gg-space-18);
    bottom: var(--gg-space-10);
  }
}

.gg-media__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 47px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--gg-white);
  transition: opacity var(--gg-transition), color var(--gg-transition);
}

.gg-media__arrow svg { width: 100%; height: 100%; }

.gg-media__arrow.swiper-button-disabled {
  opacity: 0.2;
  cursor: default;
}

.gg-media__arrow:focus-visible {
  outline: 2px solid var(--gg-white);
  outline-offset: 2px;
}

/* --- Fortschrittsleiste des Medien-Sliders -------------------------------
   Referenzcode des Hero-Sliders: Track 6px hoch, volle Breite,
   Light Grey #f0f0f0, Indikator in GARANT Red.
   Aus der Annotation: nur zeigen, wenn es ein Slider ist. Das ergibt sich
   hier von selbst, weil das Markup nur im Slider-Zweig entsteht.
-------------------------------------------------------------------------- */
/* Eine echte Fortschrittsleiste: die Spur liegt in Light Grey, die
   Fuellflaeche laeuft in GARANT Red von links nach rechts voll. Vorher war
   das Swipers Scrollbar, also ein Block von einem Drittel Breite, der
   mitwanderte; das las sich wie Abschnitte und nicht wie Fortschritt.
   Mit dem Wegfall der Klasse .swiper-scrollbar entfaellt auch der frueher
   noetige Spezifitaetstrick gegen css/swiper.bundle.min.css. */
.gg-media .gg-media__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Staffelung innerhalb von .gg-media:
     1 Swiper-Container, 2 Overlay, 3 Fortschrittsleiste, 4 Pfeile */
  z-index: 3;
  /* Referenzcode des Hero-Sliders: 6px hoch, volle Breite */
  height: 4px;
  background: var(--gg-light-grey);
  overflow: hidden;
}

/* Gefuellt wird per scaleX, nicht per width: das laeuft auf dem Compositor
   und ruckelt nicht, waehrend das Skript den Wert je Bildschirmaufbau
   nachzieht. Deshalb hier auch bewusst KEIN transition, die Bewegung
   kommt aus den Werten selbst. */
.gg-media .gg-media__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gg-red);
}

/* --- Breadcrumbs --------------------------------------------------------- */
/* Referenzcode: Abstand 6, 14px, nicht aktive Einträge 40 Prozent Deckkraft. */
.gg-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gg-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gg-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--gg-space-xs);
  /* Grey auf hellem Grund, 333:11671 zeigt 14px Grey. */
  color: var(--gg-grey);
  font-family: var(--gg-font);
  font-weight: var(--gg-weight-medium);
  font-size: var(--gg-label-size);
  line-height: 1.2;
  color: inherit;
  transition: opacity var(--gg-transition);
}

.gg-breadcrumbs__item:not(:last-child) { opacity: 0.4; }

.gg-breadcrumbs__item:not(:last-child)::after {
  content: '/';
  opacity: 0.6;
}

.gg-breadcrumbs__item a {
  color: inherit;
  text-decoration: none;
  transition: color var(--gg-transition);
}

/* Zeigerzustand: Rot und volle Deckkraft, kein Unterstrich.
   Die eigene Farbe muss gesetzt sein, sonst greift `a:hover` aus
   theme-overrides.css mit 0,1,1 und die Breadcrumbs springen auf die
   Ankerfarbe des Alt-Themes. `.gg-breadcrumbs__item a:hover` hat 0,2,1
   und gewinnt. */
.gg-breadcrumbs__item a:hover,
.gg-breadcrumbs__item a:focus-visible {
  color: var(--gg-red);
  text-decoration: none;
}

/* Die 0.4 sitzen am <li>, der Zeiger liegt aber am <a> darin. Deshalb
   ueber :has zurueckdrehen. Mit `li:hover` wuerde auch der Trennstrich
   die Deckkraft anheben, der gehoert als ::after zum selben <li>. */
.gg-breadcrumbs__item:not(:last-child):has(a:hover),
.gg-breadcrumbs__item:not(:last-child):has(a:focus-visible) { opacity: 1; }

/* --- Slider-Navigation, gemeinsam ---------------------------------------
   Genutzt von Brand Slider, Logo Slider, Testimonials.
   Masse aus dem Referenzcode: 48 x 47, Polster 10, Abstand 8,
   deaktiviert bei 20 Prozent Deckkraft.
-------------------------------------------------------------------------- */
.gg-slidernav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gg-space-2);
  margin-top: var(--gg-space-8);
}

.gg-slidernav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 47px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--gg-red);
  transition: color var(--gg-transition), opacity var(--gg-transition);
}

.gg-slidernav__arrow svg { display: block; width: 100%; height: 100%; }
.gg-slidernav__arrow:hover { color: var(--gg-red-hover); }

.gg-slidernav__arrow.swiper-button-disabled {
  opacity: 0.2;
  cursor: default;
}

.gg-slidernav__arrow:focus-visible {
  outline: 2px solid var(--gg-red);
  outline-offset: 3px;
}

.gg-on-red .gg-slidernav__arrow { color: var(--gg-white); }

/* Ueber Bild und auf Rot sind die Breadcrumbs weiss. */
.gg-on-image .gg-breadcrumbs__item,
.gg-on-red .gg-breadcrumbs__item,
.gg-on-dark .gg-breadcrumbs__item { color: var(--gg-white); }

/* Auf Rot waere ein rotes Hover unsichtbar, ueber einem Bild schlecht
   lesbar. Dort bleibt es weiss, die volle Deckkraft ist der Effekt. */
.gg-on-image .gg-breadcrumbs__item a:hover,
.gg-on-image .gg-breadcrumbs__item a:focus-visible,
.gg-on-red .gg-breadcrumbs__item a:hover,
.gg-on-red .gg-breadcrumbs__item a:focus-visible,
.gg-on-dark .gg-breadcrumbs__item a:hover,
.gg-on-dark .gg-breadcrumbs__item a:focus-visible { color: var(--gg-white); }
/* ============================================================================
   GARANT Beitragskarte
   Gemeinsam genutzt von Blog Listing und Related Blog Articles.

   Lag vorher komplett in modules/Blog Listing.module/module.css. HubSpot
   laedt das CSS eines Moduls aber nur auf Seiten, auf denen dieses Modul
   auch steht. Auf einer Seite mit Related Blog Articles ohne Blog Listing
   fehlten deshalb saemtliche Kartenregeln: kein Seitenverhaeltnis, keine
   Abstaende, kein Hover. Genau das war zu sehen, die Bilder standen in
   ihrer Originalhoehe nebeneinander.
   ========================================================================= */

.gg-blogcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-5);
  height: 100%;
}

.gg-blogcard[hidden] { display: none; }

.gg-blogcard__link { position: absolute; inset: 0; z-index: 2; }

.gg-blogcard__media { aspect-ratio: 4 / 3; }

/* Zoom im Hover. 600ms statt --gg-transition mit 250: bei einer so
   kleinen Bewegung wie 1.04 wirkt kurz wie ein Ruck. Die Kurve ist
   dieselbe wie im Token. */
.gg-blogcard__media img { transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }

.gg-blogcard__body { display: flex; flex-direction: column; gap: var(--gg-space-2); flex: 1 1 auto; }

.gg-blogcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gg-space-3);
  font-family: var(--gg-font);
  font-size: var(--gg-label-size);
  color: var(--gg-grey);
}

.gg-blogcard__category { color: var(--gg-red); font-weight: var(--gg-weight-medium); }

/* Titel und Text nach dem Figma-Bauteil Blog Card (2380:560).

   Groesse fest und NICHT ueber die Token-Stufen: das Bauteil steht in
   beiden Rahmen, Desktop wie Mobil, mit derselben Variante device=desktop,
   also ueberall 18 und 15. Die Token faellen unter 768 auf 16 und 14.

   Werte aus dem Bauteil: Desktop/H6 ist Maax Medium 18, Zeilenhoehe 1.3,
   Laufweite -0.18px, das sind die -0.01em aus dem Token. Desktop/Body
   small ist Maax Regular 15, Zeilenhoehe 1.6. Farbe fuer beides ist Grey.

   Vorher trug der Titel nur .gg-h4, also 22 auf Desktop mit Zeilenhoehe
   1.2, und gar keine Farbe. Ohne Farbe griff die Vorgabe von .gg-h4, und
   die ist GARANT Red, deshalb war die ganze Karte rot und der Hover ohne
   Wirkung. */
.gg-blogcard__title {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gg-grey);
  transition: color var(--gg-transition);
}

.gg-blogcard__text {
  margin: 0;
  font-family: var(--gg-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gg-grey);
}

.gg-blogcard__button { margin-top: auto; padding-top: var(--gg-space-3); }

/* Hover laut Annotation: leichter Bildzoom, Titel wird GARANT Red,
   Button in Hover. */
@media (hover: hover) {
  .gg-blogcard:hover .gg-blogcard__media img { transform: scale(1.04); }
  .gg-blogcard:hover .gg-blogcard__title { color: var(--gg-red); }
  .gg-blogcard:hover .gg-blogcard__button { color: var(--gg-red); }
}

@media (prefers-reduced-motion: reduce) {
  .gg-blogcard__media img, .gg-blogcard__title { transition: none; }
}
/* ============================================================================
   GARANT Hero, gemeinsame Basis
   Genutzt von Hero - Full Height, Hero - Small Height und Hero - Blog Posts.
   Liegt hier und nicht in module.css, weil drei Module dieselben Regeln
   brauchen und HubSpot module.css nicht zwischen Modulen teilen kann.
   ========================================================================= */

.gg-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--gg-white);
}

/* Mindesthoehen aus den Annotationen.
   750 ist die BILDflaeche, nicht die Sektion. Unter dem Bild liegt noch das
   rote Band, siehe module.css. Figma 2618:8263 misst deshalb 771.5 fuer den
   ganzen Rahmen bei 750 Bild. Hier 770 = 750 + 20 Band, passend zu
   --gg-hero-band-y. Vorher stand hier 750, das Bild war damit nur 730 hoch. */
.gg-hero--full { min-height: 770px; }
.gg-hero--full.gg-hero--text-only { min-height: 600px; }
.gg-hero--small { min-height: 380px; }

@media (max-width: 767px) {
  /* Annotation zur Mobile-Flaeche 333:11381 nennt 600px, das ist wieder das
     Bild. Figma 2618:8270 misst 616 fuer den Rahmen: 600 + 16 Band. */
  .gg-hero--full { min-height: 616px; }
  .gg-hero--small { min-height: 320px; }
}

/* --- Hintergrund --------------------------------------------------------- */
/* Bewusst KEIN z-index hier.
   Mit z-index: 0 spannt dieses Element einen eigenen Stapelkontext auf und
   sperrt seine Kinder darin ein. Die Slider-Pfeile liegen darin und kamen
   deshalb nie ueber .gg-hero__inner mit z-index 1, sie waren nicht
   klickbar. Ohne z-index malt der Hintergrund in Dokumentreihenfolge, also
   weiterhin hinter dem Inhalt, aber die Pfeile mit ihrem eigenen z-index
   koennen nach vorn. */
.gg-hero__bg {
  position: absolute;
  inset: 0;
}

.gg-hero__bg .gg-media,
.gg-hero__bg .gg-media img,
.gg-hero__bg .gg-media__slider { height: 100%; }

.gg-hero__bg .gg-media { position: absolute; inset: 0; }

/* --- Video als Hintergrund ------------------------------------------------
   Ziel ist dasselbe wie beim Bild: die Flaeche fuellen, Rest abschneiden.
   Beim Bild reicht dafuer object-fit: cover, weil <img> uns gehoert. Beim
   Video gehoert uns nichts davon:

   - HubSpots Player rendert ein <iframe>, und auf iframes wirkt object-fit
     nicht. Es braucht die Mitte-plus-Ueberstand-Technik.
   - Der Player setzt seine Groesse per INLINE-Style. Inline schlaegt jede
     Regel aus einer Datei. Zwei Anlaeufe ohne !important sind genau daran
     gescheitert, das Video blieb in Naturgroesse oben links stehen.

   Deshalb hier !important, eng begrenzt auf .gg-media--video im Hero. Diese
   Klasse setzt das Makro nur beim Medientyp Video, Bild und Slider sind
   nicht betroffen. `div` statt `> *`, damit beliebig tiefe Huellen erwischt
   werden, ohne Knoepfe und Spans anzufassen.
------------------------------------------------------------------------- */
.gg-hero__bg .gg-media--video div {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* <video> kann object-fit, also exakt dieselbe Regel wie beim Bild. */
.gg-hero__bg .gg-media--video video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none;
}

/* <iframe> kann kein object-fit. Zweiter Anlauf, weil der erste nur
   "einpassen" ergab: schwarze bzw. rote Balken links und rechts.

   Der erste Versuch stand auf width:auto + min-width:100% + aspect-ratio.
   Das loest der Browser in dieser Lage zur Containergroesse auf, das iframe
   war also genau so gross wie der Hero. Ein 16:9-Video in einer Flaeche, die
   breiter als 16:9 ist, wird dann innen eingepasst, und daneben steht Rot.

   Jetzt wird die Groesse gerechnet statt aufgeloest. Der Hero laeuft ueber
   die volle Fensterbreite, also ist 100vw seine Breite, und die Hoehe steht
   als Mindesthoehe fest. Daraus die kleinste 16:9-Flaeche, die BEIDE Masse
   sicher ueberdeckt:

     Breite = groesserer Wert aus (Fensterbreite, Hoehe x Verhaeltnis)
     Hoehe  = groesserer Wert aus (Fensterbreite / Verhaeltnis, Hoehe)

   Das Verhaeltnis kommt aus --gg-video-arn. Das Makro gg.media() setzt die
   Variable aus den echten Massen des Videos. Vorher stand hier fest 16:9,
   und genau daran ist es gescheitert: ein 4:3-Video wurde vom Player in
   die 16:9-Flaeche eingepasst, links und rechts blieb Rot stehen. Fehlen
   die Masse, gilt 1.7778 als Rueckfall. Weil Flaeche und Video jetzt
   dieselbe Form haben, bleibt der Inhalt randlos. min-width/min-height bleiben als Boden stehen, falls
   der Hero durch langen Text hoeher wird als seine Mindesthoehe.
------------------------------------------------------------------------- */
.gg-hero__bg .gg-media--video iframe {
  --gg-video-h: 616px;              /* Hero-Mindesthoehe mobil */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: max(100vw, calc(var(--gg-video-h) * var(--gg-video-arn, 1.7778))) !important;
  height: max(calc(100vw / var(--gg-video-arn, 1.7778)), var(--gg-video-h)) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .gg-hero__bg .gg-media--video iframe { --gg-video-h: 770px; }
}

/* --- Inhalt -------------------------------------------------------------- */
.gg-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Vorgabe, falls keine Abstandsklasse gesetzt ist */
  padding-top: var(--gg-section-big);
  padding-bottom: var(--gg-section-big);
}

/* Die Abstandsauswahl des Redakteurs muss gewinnen. Die Modifier aus
   _gg-layout.css haben nur eine Klasse und verlieren gegen .gg-hero__inner,
   weil diese Datei spaeter laedt. Deshalb hier mit doppelter Klasse.
   Vorher war das Feld im Editor sichtbar, ohne jede Wirkung. */
.gg-hero__inner.gg-section--pt-none  { padding-top: var(--gg-section-none); }
.gg-hero__inner.gg-section--pt-small { padding-top: var(--gg-section-small); }
.gg-hero__inner.gg-section--pt-big   { padding-top: var(--gg-section-big); }
.gg-hero__inner.gg-section--pt-xl    { padding-top: var(--gg-section-xl); }

.gg-hero__inner.gg-section--pb-none  { padding-bottom: var(--gg-section-none); }
.gg-hero__inner.gg-section--pb-small { padding-bottom: var(--gg-section-small); }
.gg-hero__inner.gg-section--pb-big   { padding-bottom: var(--gg-section-big); }
.gg-hero__inner.gg-section--pb-xl    { padding-bottom: var(--gg-section-xl); }

/* Die H1 steht in jedem Hero in Versalien, so zeichnet Figma sie in allen
   Hero-Rahmen (2618:8263 und die Varianten). Bewusst per text-transform und
   nicht als Vorgabe an den Redakteur: der Titel bleibt im Editor, im
   Quelltext und fuer Screenreader normal geschrieben, nur die Darstellung
   ist gross. Gilt fuer alle drei Hero-Module, sie teilen sich .gg-hero. */
.gg-hero .gg-h1 { text-transform: uppercase; }

.gg-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gg-space-5);
  max-width: var(--gg-measure);
}

/* Die Einleitung im Hero ist 18px Medium mit Zeilenhoehe 1.3, also H6,
   nicht der normale Fliesstext. Nachgesehen im Referenzcode. */
.gg-hero__lead {
  font-family: var(--gg-font);
  font-weight: var(--gg-weight-medium);
  font-size: var(--gg-h6-size);
  line-height: var(--gg-h6-lh);
  letter-spacing: var(--gg-h6-ls);
  margin: 0;
}

.gg-hero__lead p { margin: 0; }
.gg-hero__lead p + p { margin-top: var(--gg-space-3); }

.gg-hero .gg-btn-group { padding-top: var(--gg-space-5); }

/* --- Varianten ohne Bild ------------------------------------------------- */
.gg-hero--bg-red { background: var(--gg-red); }
.gg-hero--bg-white { background: var(--gg-white); }

/* Auf weissem Grund dreht die Textfarbe zurueck */
.gg-hero--bg-white {
  color: var(--gg-text);
  --gg-heading: var(--gg-red);
}

/* --- Layout Image Bottom ------------------------------------------------- */
/* Bild sitzt unten, Text darueber auf weissem Grund. */
.gg-hero--image-bottom {
  display: block;
  /* Grey wie im Rahmen 333:11671, dort ist der Text 18px Grey. */
  color: var(--gg-grey);
  --gg-heading: var(--gg-red);
  min-height: 0;
}

.gg-hero--image-bottom .gg-hero__bg {
  position: relative;
  inset: auto;
  /* Die Annotation an 333:11678 sagt ausdruecklich "Image area: Fixed
     height", in Figma 450px, auf Desktop und Mobile gleich. Vorher stand
     hier ein Seitenverhaeltnis, das war geraten. */
  height: 450px;
}
/* ============================================================================
   GARANT Map
   Das SVG kommt aus dem Theme GARANT International 2026, siehe das Partial
   gg-europe-map.html. Die Farben laufen hier ueber die GARANT-Tokens,
   im Original standen feste Werte (#d7d7d7 und #3a3f45).
   ========================================================================= */

.gg-map__svg { width: 100%; }

.gg-map__svg .europe-map-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Laender im Hintergrund, nicht anklickbar */
.gg-map__svg .context {
  fill: var(--gg-light-grey);
  stroke: var(--gg-light-grey);
  stroke-width: 0.4;
  stroke-linejoin: round;
}

/* Anklickbare Laender. Grey #585858, nicht Dark Grey #292929. */
.gg-map__svg .country {
  fill: var(--gg-grey);
  stroke: var(--gg-grey);
  stroke-width: 0.4;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill var(--gg-transition), stroke var(--gg-transition);
}

.gg-map__svg a.country-link:hover .country,
.gg-map__svg a.country-link:focus-visible .country {
  fill: var(--gg-red);
  stroke: var(--gg-red);
}

.gg-map__svg a.country-link:focus-visible {
  outline: 2px solid var(--gg-red);
  outline-offset: 2px;
}

.gg-map__svg #map-bg { fill: transparent; }

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}