/* ===== 01-base.css ===== */
/* ============================================================
   Grundlagen: Schrift, Farben, Seitenrahmen
   ------------------------------------------------------------
   Schrift Inter, SELBST gehostet. Im Shop kam sie per @import von
   Google Fonts (in jeder Section einmal). Das sind dieselben
   Dateien, die Google ausliefert (variable Schrift, 100 bis 900),
   also rendert die Seite gleich fett wie vorher, nur ohne Abruf
   bei Google und damit ohne Einwilligungsfrage.
   Die Sections setzen font-weight bis 950; die Schrift endet bei
   900, der Browser nimmt dann 900 (wie im Shop).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --gg-blue: #548DD4;
  --gg-blue-dark: #3f76b5;
  --gg-blue-deep: #28598f;
  --gg-blue-soft: #6fa3de;
  --gg-dark: #171b20;
  --gg-text: #22272d;
  --gg-muted: #68727d;
  --gg-schrift: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--gg-text);
  font-family: var(--gg-schrift);
  font-size: 16px;
  line-height: 1.6;
  /* Fangnetz gegen Seitwärts-Scrollen (LESSONS Falle 14).
     Kein 100vw irgendwo, das hier ist nur die zweite Sicherung. */
  overflow-x: clip;
}

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

a {
  color: inherit;
}

main {
  display: block;
}

/* Sprung-Link für Tastatur und Screenreader */
.gg-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100000;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--gg-dark);
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
}

.gg-skip:focus {
  top: 12px;
}

:focus-visible {
  outline: 3px solid var(--gg-blue);
  outline-offset: 3px;
}

/* Fehlende Firmendaten: gelb und unübersehbar (gen.js SITE.luecke) */
.gg-luecke {
  padding: 2px 6px;
  border-radius: 6px;
  background: #ffe066;
  color: #3a2c00;
  font-weight: 800;
}

/* ------------------------------------------------------------
   Einblenden beim Scrollen
   ------------------------------------------------------------
   Versteckt wird NUR, wenn skript.js wirklich läuft und die
   Klasse gg-anim gesetzt hat. Fällt das Skript aus, ist alles
   sofort sichtbar (bei FAW blieben ohne diese Regel 17 von 17
   Abschnitten unsichtbar).
   ------------------------------------------------------------ */
.gg-anim [data-gg-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}

.gg-anim [data-gg-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gg-anim [data-gg-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Telefonnummern nicht mitten in der Nummer umbrechen */
.gg-nowrap {
  white-space: nowrap;
}


/* ===== 02-header.css ===== */
/* ============================================================
   Kopfbereich: schwebende Menü-Pille
   ------------------------------------------------------------
   Aus der custom_liquid-Section „Header" des Shops übernommen.
   Geändert gegenüber dem Shop:
   · der Trick, die Section auf 0 Höhe zu drücken, entfällt
     (statisch gibt es keine Section drumherum);
   · der Menüknopf ist ein <summary> in <details> statt eines
     <button> mit Skript. Deshalb steht das aufgeklappte Menü jetzt
     IN der Pille und wird absolut darunter gesetzt;
   · „is-open" heißt jetzt `details[open]`.
   ============================================================ */

#gg-custom-header {
  --gg-line: rgba(84, 141, 212, .18);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  margin: 0;
  padding: 14px 18px;
  background: transparent;
  font-family: var(--gg-schrift);
  pointer-events: none;
}

#gg-custom-header a {
  color: inherit;
  text-decoration: none;
}

#gg-custom-header .gg-header-shell {
  position: relative;
  pointer-events: auto;
  width: min(1240px, 100%);
  margin: 0 auto;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px 10px 18px;
  border: 1px solid rgba(84, 141, 212, .20);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 20%, rgba(84, 141, 212, .12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(248, 251, 255, .78));
  box-shadow:
    0 18px 55px rgba(18, 45, 58, .10),
    inset 0 1px 0 rgba(255, 255, 255, .85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#gg-custom-header .gg-header-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 220px;
}

#gg-custom-header .gg-header-logo img {
  display: block;
  width: 245px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

#gg-custom-header .gg-header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1 1 auto;
}

#gg-custom-header .gg-header-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 999px;
  color: #70777f;
  font-size: 14px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.01em;
  transition: color .22s ease, background .22s ease, transform .22s ease;
  white-space: nowrap;
}

#gg-custom-header .gg-header-nav a:hover,
#gg-custom-header .gg-header-nav a[aria-current="page"] {
  color: #20252b;
  background: rgba(84, 141, 212, .10);
}

#gg-custom-header .gg-header-nav a:hover {
  transform: translateY(-1px);
}

#gg-custom-header .gg-header-action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#gg-custom-header .gg-mobile-cta {
  position: relative;
  isolation: isolate;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 19px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .01em;
  box-shadow:
    0 16px 36px rgba(84, 141, 212, .32),
    0 0 0 6px rgba(84, 141, 212, .09);
  transition: transform .22s ease, box-shadow .22s ease;
  white-space: nowrap;
  overflow: hidden;
}

#gg-custom-header .gg-mobile-cta::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-70%) rotate(10deg);
  transition: transform .65s ease;
}

#gg-custom-header .gg-mobile-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 48px rgba(84, 141, 212, .38),
    0 0 0 8px rgba(84, 141, 212, .11);
}

#gg-custom-header .gg-mobile-cta:hover::before {
  transform: translateX(70%) rotate(10deg);
}

#gg-custom-header .gg-mobile-cta svg {
  width: 17px;
  height: 17px;
  transition: transform .22s ease;
}

#gg-custom-header .gg-mobile-cta:hover svg {
  transform: translateX(3px);
}

/* ---------- Menü für kleine Bildschirme ---------- */

#gg-custom-header .gg-menu {
  display: none;
}

#gg-custom-header .gg-burger {
  list-style: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(84, 141, 212, .20);
  border-radius: 17px;
  background: rgba(255, 255, 255, .82);
  color: #20252b;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(18, 45, 58, .08);
}

#gg-custom-header .gg-burger::-webkit-details-marker {
  display: none;
}

#gg-custom-header .gg-burger::marker {
  content: "";
}

#gg-custom-header .gg-burger-lines {
  width: 21px;
  height: 15px;
  position: relative;
  display: block;
}

#gg-custom-header .gg-burger-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #20252b;
  transition: transform .24s ease, top .24s ease, opacity .18s ease;
}

#gg-custom-header .gg-burger-lines span:nth-child(1) { top: 0; }
#gg-custom-header .gg-burger-lines span:nth-child(2) { top: 6.5px; }
#gg-custom-header .gg-burger-lines span:nth-child(3) { top: 13px; }

#gg-custom-header .gg-menu[open] .gg-burger-lines span:nth-child(1) {
  top: 6.5px;
  transform: rotate(45deg);
}

#gg-custom-header .gg-menu[open] .gg-burger-lines span:nth-child(2) {
  opacity: 0;
}

#gg-custom-header .gg-menu[open] .gg-burger-lines span:nth-child(3) {
  top: 6.5px;
  transform: rotate(-45deg);
}

/* Das Menü hängt unter der Pille, gleich breit wie sie */
#gg-custom-header .gg-mobile-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
}

#gg-custom-header .gg-mobile-menu {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(84, 141, 212, .18);
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 45px rgba(18, 45, 58, .12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#gg-custom-header .gg-mobile-menu a {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(248, 251, 255, .82);
  border: 1px solid rgba(84, 141, 212, .12);
  color: #20252b;
  font-size: 15px;
  font-weight: 900;
}

#gg-custom-header .gg-mobile-menu a span {
  color: #70777f;
  font-size: 18px;
  line-height: 1;
}

#gg-custom-header .gg-mobile-menu .gg-mobile-menu-cta {
  margin-top: 4px;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(84, 141, 212, .32);
}

#gg-custom-header .gg-mobile-menu .gg-mobile-menu-cta span {
  color: #fff;
}

@media screen and (max-width: 980px) {
  #gg-custom-header {
    padding: 10px;
  }

  #gg-custom-header .gg-header-shell {
    min-height: 68px;
    padding: 9px 10px 9px 14px;
    border-radius: 24px;
  }

  #gg-custom-header .gg-header-logo {
    min-width: 0;
    flex: 1 1 auto;
  }

  #gg-custom-header .gg-header-logo img {
    width: 218px;
  }

  #gg-custom-header .gg-header-nav,
  #gg-custom-header .gg-header-action {
    display: none;
  }

  #gg-custom-header .gg-menu {
    display: block;
    flex: 0 0 48px;
  }
}

@media screen and (max-width: 520px) {
  #gg-custom-header {
    padding: 8px;
  }

  #gg-custom-header .gg-header-shell {
    min-height: 64px;
    border-radius: 21px;
  }

  #gg-custom-header .gg-header-logo img {
    width: 190px;
  }

  #gg-custom-header .gg-burger {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  #gg-custom-header .gg-menu {
    flex-basis: 46px;
  }
}

@media screen and (max-width: 370px) {
  #gg-custom-header .gg-header-logo img {
    width: 165px;
  }
}


/* ===== 03-footer.css ===== */
/* ============================================================
   Fußbereich
   ------------------------------------------------------------
   Aus der custom_liquid-Section „Footer" des Shops. Ergänzt: der
   Link „KI-Hinweise" in der Rechtszeile (Art. 50 KI-VO).
   ============================================================ */

#gg-custom-footer {
  position: relative;
  width: 100%;
  padding: 34px 18px 22px;
  background:
    radial-gradient(circle at 12% 18%, rgba(84, 141, 212, .12), transparent 34%),
    linear-gradient(180deg, rgba(247, 251, 255, .65), rgba(255, 255, 255, .98));
  font-family: var(--gg-schrift);
  color: #20252b;
  overflow: hidden;
}

#gg-custom-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(84, 141, 212, .20) 14%,
    rgba(84, 141, 212, .62) 50%,
    rgba(84, 141, 212, .20) 86%,
    transparent 100%);
  box-shadow: 0 0 26px rgba(84, 141, 212, .24);
  pointer-events: none;
}

#gg-custom-footer a {
  color: inherit;
  text-decoration: none;
}

#gg-custom-footer .gg-footer-shell {
  width: min(1240px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(84, 141, 212, .18);
  border-radius: 32px;
  background:
    radial-gradient(circle at 8% 20%, rgba(84, 141, 212, .10), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(248, 251, 255, .78));
  box-shadow:
    0 18px 55px rgba(18, 45, 58, .10),
    inset 0 1px 0 rgba(255, 255, 255, .85);
  overflow: hidden;
}

#gg-custom-footer .gg-footer-main {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
}

#gg-custom-footer .gg-footer-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

#gg-custom-footer .gg-footer-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 285px;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(84, 141, 212, .18);
  box-shadow: 0 14px 34px rgba(18, 45, 58, .08);
}

#gg-custom-footer .gg-footer-logo-card img {
  display: block;
  width: 250px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

#gg-custom-footer .gg-footer-text {
  max-width: 430px;
}

#gg-custom-footer .gg-footer-text strong {
  display: block;
  color: #20252b;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -.035em;
  font-weight: 950;
}

#gg-custom-footer .gg-footer-text span {
  display: block;
  margin-top: 7px;
  color: #70777f;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
}

#gg-custom-footer .gg-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

#gg-custom-footer .gg-footer-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(84, 141, 212, .15);
  color: #70777f;
  font-size: 14px;
  line-height: 1;
  font-weight: 850;
  transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
  white-space: nowrap;
}

#gg-custom-footer .gg-footer-link:hover {
  transform: translateY(-2px);
  color: #20252b;
  background: rgba(84, 141, 212, .08);
  border-color: rgba(84, 141, 212, .28);
}

#gg-custom-footer .gg-footer-mobile {
  position: relative;
  isolation: isolate;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 19px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .01em;
  box-shadow:
    0 16px 36px rgba(84, 141, 212, .32),
    0 0 0 6px rgba(84, 141, 212, .09);
  transition: transform .22s ease, box-shadow .22s ease;
  white-space: nowrap;
  overflow: hidden;
}

#gg-custom-footer .gg-footer-mobile::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-70%) rotate(10deg);
  transition: transform .65s ease;
}

#gg-custom-footer .gg-footer-mobile:hover {
  transform: translateY(-2px);
}

#gg-custom-footer .gg-footer-mobile:hover::before {
  transform: translateX(70%) rotate(10deg);
}

#gg-custom-footer .gg-footer-mobile svg {
  width: 17px;
  height: 17px;
}

#gg-custom-footer .gg-footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: end;
  padding: 18px 28px 24px;
  border-top: 1px solid rgba(84, 141, 212, .13);
  background: rgba(255, 255, 255, .38);
}

#gg-custom-footer .gg-footer-credit {
  font-size: .875rem;
  line-height: 1.45;
  color: #000000;
  font-weight: 600;
}

#gg-custom-footer .gg-footer-credit a {
  /* Tippziel mindestens 44 px hoch */
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  margin-top: 0;
  color: #000000;
  opacity: .7;
  transition: opacity .35s ease;
  font-weight: 700;
}

#gg-custom-footer .gg-footer-credit a:hover {
  opacity: 1;
}

#gg-custom-footer .gg-footer-legal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 16px;
  text-align: right;
}

/* Tippziel mindestens 44 px hoch, die Schrift bleibt klein */
#gg-custom-footer .gg-footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #5f6872;
  font-size: 13px;
  line-height: 1;
  font-weight: 850;
  transition: color .22s ease;
  white-space: nowrap;
}

#gg-custom-footer .gg-footer-legal a:hover {
  color: var(--gg-blue-deep);
}

@media screen and (max-width: 900px) {
  #gg-custom-footer {
    padding: 28px 10px 18px;
  }

  #gg-custom-footer .gg-footer-main {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  #gg-custom-footer .gg-footer-brand {
    align-items: flex-start;
    flex-direction: column;
  }

  #gg-custom-footer .gg-footer-logo-card {
    width: 260px;
  }

  #gg-custom-footer .gg-footer-logo-card img {
    width: 225px;
  }

  #gg-custom-footer .gg-footer-actions {
    justify-content: flex-start;
  }

  #gg-custom-footer .gg-footer-bottom {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 18px 22px 22px;
  }

  #gg-custom-footer .gg-footer-legal {
    justify-content: flex-start;
    text-align: left;
  }
}

@media screen and (max-width: 520px) {
  #gg-custom-footer {
    padding: 24px 10px 18px;
  }

  #gg-custom-footer .gg-footer-shell {
    border-radius: 26px;
  }

  #gg-custom-footer .gg-footer-main {
    padding: 18px;
  }

  #gg-custom-footer .gg-footer-logo-card {
    width: 100%;
    border-radius: 21px;
  }

  #gg-custom-footer .gg-footer-logo-card img {
    width: 220px;
  }

  #gg-custom-footer .gg-footer-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  #gg-custom-footer .gg-footer-link,
  #gg-custom-footer .gg-footer-mobile {
    width: 100%;
  }

  #gg-custom-footer .gg-footer-bottom {
    padding: 17px 18px 20px;
  }

  #gg-custom-footer .gg-footer-legal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* ===== 10-start.css ===== */
/* ============================================================
   Startseite: #gg-homepage-hero und #gg-homepage-rest
   ------------------------------------------------------------
   Aus den gleichnamigen custom_liquid-Sections des Shops
   übernommen (Stand 13.10.2026). Es gelten die ENDSTÄNDE:
   · Header-Section „Hintergrund noch heller": Bildfilter mit
     brightness(.88) und hellere Verläufe, im Shop mit !important,
     also auch auf dem Handy (die dunklere Handy-Fassung aus der
     Hero-Section kam dort nie an);
   · Hero-Ende: Fakten 2-spaltig, dritter Fakt entfällt;
   · Section-CSS im Shop-Editor: Markenkarte, Eyebrow und UK-Flagge
     ausgeblendet, Kopfabstand 170 / 130 / 115 px;
   · Ende der Theme-Datei base.css: Kopfbild ab 990 px volle Höhe
     mit 60 px unten, Cyan-Schimmer im ::after, 2 px Leuchtlinie
     an der Unterkante (live nachgemessen am 13.10.2026).
   Gestrichen (Kundenwunsch 13.10.2026): Vertrauensleiste,
   „Einfacher Ablauf", blauer Bestands-Banner, Karten-iframe.
   Alles unter der Section-ID, nichts global.
   ============================================================ */

/* ============================================================
   1. Kopfbild
   ============================================================ */

#gg-homepage-hero {
  color: #ffffff;
  overflow: hidden;
  background: #eef5ff;
}

#gg-homepage-hero a {
  color: inherit;
  text-decoration: none;
}

#gg-homepage-hero .gg-shell {
  width: min(1180px, calc(100% - 34px));
  margin: 0 auto;
}

/* Abstand unter der schwebenden Menü-Pille steckt IM Abschnitt
   (kein Abstandhalter davor, LESSONS 05.08.2026), Werte wie im
   Shop-Editor. Unterkante der Pille, aus 02-header.css gerechnet
   (Logo 600 x 200): bis 118 px am Desktop, 103 px bis 980 px,
   92 px bis 520 px, 83 px bis 370 px. Bis zur H1 kommen noch die
   34 px Innenabstand von .gg-hero-content dazu. */
#gg-homepage-hero .gg-hero {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 170px 0 86px;
  isolation: isolate;
  overflow: hidden;
  background: #eef5ff;
}

/* Im Shop ein CSS-Hintergrund; hier ein echtes Bild, damit Maße,
   alt-Text und KI-Pille greifen. */
#gg-homepage-hero .gg-hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: -4;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.02);
  filter: saturate(1.06) contrast(1.04) brightness(.88);
  pointer-events: none;
}

#gg-homepage-hero .gg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .46) 0%,
      rgba(0, 0, 0, .34) 34%,
      rgba(0, 0, 0, .16) 62%,
      rgba(0, 0, 0, .04) 100%),
    linear-gradient(180deg,
      rgba(0, 0, 0, .05) 0%,
      rgba(0, 0, 0, .03) 42%,
      rgba(0, 0, 0, .10) 100%);
  pointer-events: none;
}

/* Endstand aus dem Ende der Theme-Datei base.css (dort !important,
   live gemessen 13.10.2026). Die Cyan-Töne (#13b8d4) stehen so im
   Shop, nicht das Markenblau. */
#gg-homepage-hero .gg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 22%, rgba(19, 184, 212, .18), transparent 34%),
    radial-gradient(circle at 82% 30%, rgba(19, 184, 212, .14), transparent 32%),
    #ffffff0a;
  pointer-events: none;
}

/* Leuchtlinie an der Unterkante des Kopfbilds (base.css) */
#gg-homepage-hero {
  position: relative;
}

#gg-homepage-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 2px;
  background: linear-gradient(90deg, #13b8d400, #13b8d4a6, #ffffffb8, #13b8d4a6, #13b8d400);
  box-shadow: 0 -10px 28px #13b8d438;
  pointer-events: none;
}

#gg-homepage-hero .gg-hero-bg-soft {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .08));
  pointer-events: none;
}

#gg-homepage-hero .gg-hero-grid {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

#gg-homepage-hero .gg-hero-content {
  position: relative;
  padding: 34px 0;
}

/* Markenkarte und Eyebrow: nur gebaut, wenn MIT_MARKENKARTE in
   _build/seiten/index.js auf true steht (im Shop ausgeblendet). */
#gg-homepage-hero .gg-brand-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding: 13px 16px 13px 13px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 22px;
  box-shadow: 0 18px 58px rgba(0, 0, 0, .14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#gg-homepage-hero .gg-logo-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #f4f9ff, #ffffff);
  border: 1px solid rgba(84, 141, 212, .28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .70), 0 12px 28px rgba(84, 141, 212, .20);
}

#gg-homepage-hero .gg-logo-mark svg {
  width: 42px;
  height: 42px;
}

#gg-homepage-hero .gg-brand-text strong {
  display: block;
  color: #77797d;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.06em;
  font-weight: 950;
}

#gg-homepage-hero .gg-brand-text small {
  display: block;
  margin-top: 4px;
  color: #7d8085;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

#gg-homepage-hero .gg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-shadow: 0 4px 16px rgba(0, 0, 0, .40);
}

#gg-homepage-hero .gg-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-soft));
  box-shadow: 0 0 0 6px rgba(84, 141, 212, .18), 0 0 22px rgba(84, 141, 212, .55);
}

#gg-homepage-hero .gg-hero h1 {
  margin: 0;
  max-width: 760px;
  color: #ffffff;
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: .91;
  letter-spacing: -.07em;
  font-weight: 950;
  text-shadow: 0 12px 34px rgba(0, 0, 0, .44);
}

/* Verlaufsschrift: bei background-clip:text nie line-height < 1,
   sonst bekommen Teile der Buchstaben keine Farbe (LESSONS
   04.08.2026, WEBQA Falle 13). Die Zeile steht auf 1, der enge
   Abstand zur weißen Zeile darüber kommt über margin-top. */
#gg-homepage-hero .gg-hero h1 span {
  display: block;
  margin-top: -.05em;
  line-height: 1;
  /* Lesbarkeit, gemessen 13.10.2026: der Shop-Verlauf endete bei #28598f
     (Dunkelblau) über dem abgedunkelten Foto, Kontrast im Mittel 1,2 bis
     2,4 zu 1, nötig sind 3 zu 1. Gleiche Markenfarbe, nur die hellen Töne
     des Blaus und ein enger Schatten als Kante. Zurück zum Shop-Stand:
     Verlauf #548DD4 0%, #3f76b5 52%, #28598f 100% und nur der weite Schatten. */
  background: linear-gradient(135deg, #b4d4f7 0%, #8ab8ec 50%, #6fa3de 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)) drop-shadow(0 12px 24px rgba(0, 0, 0, .36));
}

#gg-homepage-hero .gg-hero-text {
  max-width: 690px;
  margin: 22px 0 30px;
  color: rgba(255, 255, 255, .90);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.72;
  font-weight: 750;
  text-shadow: 0 8px 26px rgba(0, 0, 0, .48);
}

#gg-homepage-hero .gg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

#gg-homepage-hero .gg-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

#gg-homepage-hero .gg-btn-primary {
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(84, 141, 212, .38);
}

#gg-homepage-hero .gg-btn-secondary {
  background: rgba(255, 255, 255, .92);
  color: var(--gg-dark);
  border-color: rgba(255, 255, 255, .38);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#gg-homepage-hero .gg-hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 480px;
  margin-top: 32px;
}

#gg-homepage-hero .gg-fact {
  padding: 17px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .36);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#gg-homepage-hero .gg-fact strong {
  display: block;
  color: var(--gg-dark);
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

#gg-homepage-hero .gg-fact span {
  display: block;
  margin-top: 7px;
  color: #5f6972;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 850;
}

/* Bewegung beim Überfahren nur mit echter Maus, auf dem Handy
   bliebe sie nach dem Antippen hängen. */
@media (hover: hover) and (pointer: fine) {
  #gg-homepage-hero .gg-btn:hover {
    transform: translateY(-3px);
  }

  #gg-homepage-hero .gg-btn-secondary:hover {
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
  }
}

@media (max-width: 1060px) {
  #gg-homepage-hero .gg-hero-bg-image {
    transform: scale(1.04);
  }
}

/* Ab 990 px volle Bildschirmhöhe und 60 px unten (base.css des
   Shops). Dort stand zusätzlich height:100vh: auf niedrigen
   Bildschirmen rutschte der Inhalt dann nach oben unter die
   Menü-Pille (1280 x 720: H1 nur 25 px darunter). Hier nur
   Mindesthöhe, der Abschnitt wächst stattdessen mit. */
@media (min-width: 990px) {
  #gg-homepage-hero .gg-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: 60px;
  }
}

@media (max-width: 980px) {
  #gg-homepage-hero .gg-hero {
    padding-top: 130px;
  }
}

@media (max-width: 720px) {
  #gg-homepage-hero .gg-shell {
    width: min(100% - 24px, 1180px);
  }

  #gg-homepage-hero .gg-hero {
    padding-bottom: 62px;
  }

  #gg-homepage-hero .gg-brand-card {
    width: 100%;
  }

  #gg-homepage-hero .gg-brand-text strong {
    font-size: 20px;
  }

  #gg-homepage-hero .gg-hero h1 {
    font-size: clamp(40px, 13vw, 64px);
  }

  #gg-homepage-hero .gg-hero-text {
    font-size: 16px;
  }

  #gg-homepage-hero .gg-btn {
    width: 100%;
  }

  #gg-homepage-hero .gg-hero-facts {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
  }

  #gg-homepage-hero .gg-hero-bg-image {
    object-position: 62% center;
    transform: scale(1.08);
  }

  #gg-homepage-hero .gg-hero h1,
  #gg-homepage-hero .gg-hero-text {
    text-shadow: 0 10px 28px rgba(0, 0, 0, .54);
  }
}

@media (max-width: 520px) {
  #gg-homepage-hero .gg-hero {
    padding-top: 115px;
  }
}

/* ============================================================
   2. Kategorien, „Warum GG Nutzfahrzeuge", Kontakt
   ============================================================ */

#gg-homepage-rest {
  background:
    radial-gradient(circle at 12% 8%, rgba(84, 141, 212, .14), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(84, 141, 212, .12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfd 48%, #ffffff 100%);
  color: var(--gg-text);
  overflow: hidden;
  padding-bottom: 1px;
}

#gg-homepage-rest a {
  color: inherit;
  text-decoration: none;
}

#gg-homepage-rest img {
  max-width: 100%;
  display: block;
}

#gg-homepage-rest .gg-shell {
  width: min(1180px, calc(100% - 34px));
  margin: 0 auto;
}

#gg-homepage-rest .gg-section {
  position: relative;
  padding: 82px 0;
}

#gg-homepage-rest .gg-section-head {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

#gg-homepage-rest .gg-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--gg-blue-deep);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Shop: line-height .96. Bei Unterlängen (p, g) über Oberlängen
   der nächsten Zeile berührten sich die Buchstaben, deshalb 1.06
   (LESSONS 10.08.2026, deutsche Display-Überschriften). */
#gg-homepage-rest .gg-title {
  margin: 0;
  color: var(--gg-dark);
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -.055em;
  font-weight: 950;
}

#gg-homepage-rest .gg-title span {
  color: var(--gg-blue-deep);
}

#gg-homepage-rest .gg-copy {
  margin: 18px 0 0;
  color: var(--gg-muted);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.75;
  font-weight: 500;
}

#gg-homepage-rest .gg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

#gg-homepage-rest .gg-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

#gg-homepage-rest .gg-btn-primary {
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(84, 141, 212, .32);
}

#gg-homepage-rest .gg-route-btn {
  background: #548DD4;
  background-image: linear-gradient(135deg, #548DD4 0%, #3f76b5 48%, #28598f 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 16px 38px rgba(84, 141, 212, .34);
}

/* ---------- Kategorien ---------- */

#gg-homepage-rest .gg-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Das Einblenden sitzt auf der Zelle, das Anheben beim Überfahren
   auf der Karte darin. Beide an einem Element überschreiben sich
   gegenseitig die transition (LESSONS 07.10.2026, FOMO). */
#gg-homepage-rest .gg-category-cell {
  display: flex;
  min-width: 0;
}

#gg-homepage-rest .gg-category-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(23, 27, 32, .08);
  box-shadow: 0 18px 48px rgba(23, 27, 32, .08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#gg-homepage-rest .gg-category-img {
  position: relative;
  flex: 0 0 auto;
  height: 218px;
  overflow: hidden;
  background: #eaf2fb;
}

/* feste Rahmenhöhe + object-fit, deshalb height:100% statt auto */
#gg-homepage-rest .gg-category-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

#gg-homepage-rest .gg-category-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(23, 27, 32, .46) 100%);
}

#gg-homepage-rest .gg-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--gg-blue-deep);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}

/* KI-Pille: unten links steht das Schild, auf der Bildtafel unten
   die Hinweiskarte. Damit nichts übereinander liegt, sitzt die
   Pille in beiden Fällen oben rechts. */
#gg-homepage-rest .gg-category-img .gg-ki,
#gg-homepage-rest .gg-image-panel .gg-ki {
  top: 10px;
  bottom: auto;
}

#gg-homepage-rest .gg-category-body {
  padding: 23px 22px 24px;
}

#gg-homepage-rest .gg-category-body h3 {
  margin: 0;
  color: var(--gg-dark);
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -.045em;
  font-weight: 950;
}

#gg-homepage-rest .gg-category-body p {
  margin: 11px 0 18px;
  color: var(--gg-muted);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 560;
}

#gg-homepage-rest .gg-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gg-blue-deep);
  font-size: 14px;
  font-weight: 950;
}

/* ---------- Warum GG Nutzfahrzeuge ---------- */

#gg-homepage-rest .gg-split {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 28px;
  align-items: center;
}

#gg-homepage-rest .gg-split-text {
  min-width: 0;
}

#gg-homepage-rest .gg-image-panel {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border-radius: 38px;
  background: #eaf2fb;
  box-shadow: 0 24px 70px rgba(23, 27, 32, .14);
}

/* Bild füllt die Tafel, die Höhe kommt aus min-height */
#gg-homepage-rest .gg-image-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#gg-homepage-rest .gg-image-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(23, 27, 32, .60) 100%),
    radial-gradient(circle at 18% 12%, rgba(84, 141, 212, .28), transparent 38%);
}

#gg-homepage-rest .gg-panel-badge {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 20px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}

#gg-homepage-rest .gg-panel-badge strong {
  display: block;
  color: var(--gg-dark);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.04em;
  font-weight: 950;
}

#gg-homepage-rest .gg-panel-badge span {
  display: block;
  margin-top: 8px;
  color: var(--gg-muted);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

#gg-homepage-rest .gg-benefit-list {
  display: grid;
  gap: 13px;
  margin-top: 26px;
}

#gg-homepage-rest .gg-benefit {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 17px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(23, 27, 32, .08);
  box-shadow: 0 12px 34px rgba(23, 27, 32, .06);
}

#gg-homepage-rest .gg-check {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  font-weight: 950;
  font-size: 15px;
  line-height: 1;
}

#gg-homepage-rest .gg-benefit strong {
  display: block;
  color: var(--gg-dark);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 950;
}

#gg-homepage-rest .gg-benefit span {
  display: block;
  margin-top: 4px;
  color: var(--gg-muted);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 560;
}

/* ---------- Kontakt und Standort ----------
   Im Shop zweispaltig mit Google-Karte rechts. Die Karte entfällt
   (keine Einbettung ohne Einwilligung). Auf breiten Bildschirmen
   stehen jetzt Text und Knöpfe links, die Kontaktliste rechts;
   schmal wieder in der Reihenfolge des Shops: Text, Liste, Knöpfe. */

#gg-homepage-rest .gg-contact-card {
  border-radius: 42px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid rgba(23, 27, 32, .08);
  box-shadow: 0 24px 80px rgba(23, 27, 32, .10);
}

#gg-homepage-rest .gg-contact-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "text liste"
    "knoepfe liste";
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  padding: 34px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 10% 10%, rgba(84, 141, 212, .18), transparent 34%),
    linear-gradient(180deg, #f8fbff, #eef5fd);
  border: 1px solid rgba(84, 141, 212, .14);
}

#gg-homepage-rest .gg-contact-text {
  grid-area: text;
  min-width: 0;
}

#gg-homepage-rest .gg-contact-list {
  grid-area: liste;
  align-self: center;
  display: grid;
  gap: 12px;
  min-width: 0;
}

#gg-homepage-rest .gg-contact-actions {
  grid-area: knoepfe;
  align-self: start;
}

#gg-homepage-rest .gg-contact-info h2 {
  margin: 0;
  color: var(--gg-dark);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.055em;
  font-weight: 950;
}

#gg-homepage-rest .gg-contact-info p {
  margin: 15px 0 24px;
  color: var(--gg-muted);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 570;
}

#gg-homepage-rest .gg-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 44px;
  padding: 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(23, 27, 32, .06);
  color: var(--gg-dark);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 750;
  transition: transform .2s ease, border-color .2s ease;
}

#gg-homepage-rest .gg-contact-item > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

#gg-homepage-rest .gg-contact-item > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--gg-blue-deep);
  stroke-width: 2.4;
  margin-top: 1px;
}

#gg-homepage-rest .gg-whatsapp-link {
  align-items: center;
}

#gg-homepage-rest .gg-whatsapp-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

#gg-homepage-rest .gg-wa-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  color: var(--gg-blue-deep);
}

#gg-homepage-rest .gg-wa-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* UK-Flagge: nur gebaut, wenn MIT_UK_FLAGGE auf true steht */
#gg-homepage-rest .gg-uk-flag {
  position: relative;
  width: 25px;
  height: 17px;
  flex: 0 0 25px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #012169;
  box-shadow: 0 0 0 1px rgba(23, 27, 32, .10);
}

#gg-homepage-rest .gg-uk-flag::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(27deg, transparent 0 39%, #ffffff 39% 47%, #C8102E 47% 52%, #ffffff 52% 60%, transparent 60%),
    linear-gradient(-27deg, transparent 0 39%, #ffffff 39% 47%, #C8102E 47% 52%, #ffffff 52% 60%, transparent 60%),
    linear-gradient(153deg, transparent 0 39%, #ffffff 39% 47%, #C8102E 47% 52%, #ffffff 52% 60%, transparent 60%),
    linear-gradient(-153deg, transparent 0 39%, #ffffff 39% 47%, #C8102E 47% 52%, #ffffff 52% 60%, transparent 60%),
    linear-gradient(90deg, transparent 0 34%, #ffffff 34% 66%, transparent 66%),
    linear-gradient(0deg, transparent 0 28%, #ffffff 28% 72%, transparent 72%),
    linear-gradient(90deg, transparent 0 42%, #C8102E 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 0 39%, #C8102E 39% 61%, transparent 61%);
}

/* ---------- Bewegung beim Überfahren, nur mit echter Maus ---------- */

@media (hover: hover) and (pointer: fine) {
  #gg-homepage-rest .gg-btn:hover {
    transform: translateY(-3px);
  }

  #gg-homepage-rest .gg-route-btn:hover {
    background: #28598f;
    background-image: linear-gradient(135deg, #3f76b5 0%, #28598f 100%);
    box-shadow: 0 20px 46px rgba(84, 141, 212, .42);
  }

  #gg-homepage-rest .gg-category-card:hover {
    transform: translateY(-7px);
    border-color: rgba(84, 141, 212, .30);
    box-shadow: 0 26px 70px rgba(23, 27, 32, .13);
  }

  #gg-homepage-rest .gg-category-card:hover .gg-category-img img {
    transform: scale(1.06);
  }

  #gg-homepage-rest .gg-contact-item[href]:hover {
    transform: translateY(-2px);
    border-color: rgba(84, 141, 212, .34);
  }
}

/* ---------- Umbrüche ---------- */

@media (max-width: 1060px) {
  #gg-homepage-rest .gg-split {
    grid-template-columns: minmax(0, 1fr);
  }

  #gg-homepage-rest .gg-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #gg-homepage-rest .gg-contact-info {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "text"
      "liste"
      "knoepfe";
    grid-template-rows: auto;
  }

  #gg-homepage-rest .gg-contact-actions {
    margin-top: 22px;
  }
}

@media (max-width: 720px) {
  #gg-homepage-rest .gg-shell {
    width: min(100% - 24px, 1180px);
  }

  #gg-homepage-rest .gg-section {
    padding: 58px 0;
  }

  #gg-homepage-rest .gg-btn {
    width: 100%;
  }

  #gg-homepage-rest .gg-category-img {
    height: 210px;
  }

  #gg-homepage-rest .gg-image-panel {
    min-height: 430px;
    border-radius: 30px;
  }

  #gg-homepage-rest .gg-contact-card {
    padding: 14px;
    border-radius: 30px;
  }

  #gg-homepage-rest .gg-contact-info {
    padding: 24px;
    border-radius: 24px;
  }

  #gg-homepage-rest .gg-whatsapp-link {
    align-items: flex-start;
  }
}

/* Im Shop ab 720 px einspaltig. Zwei Karten nebeneinander passen
   aber bis 561 px (Karte dann so breit wie am Desktop) und machen
   die Seite auf großen Handys und kleinen Tablets halb so lang. */
@media (max-width: 560px) {
  #gg-homepage-rest .gg-category-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ===== 20-uber-uns.css ===== */
/* ============================================================
   Über uns  (/uber-uns)
   ------------------------------------------------------------
   Aus der custom_liquid-Section #gg-about-page des Shops. Alles
   unter #gg-about-page, nichts global.
   Geändert gegenüber dem Shop:
   · kein width:100vw / margin-left:calc(50% - 50vw) mehr
     (Seitwärts-Scrollen, LESSONS Falle 14), kein @import von
     Google Fonts (Inter liegt lokal, css/01-base.css);
   · Kopfbild als echtes <img> statt CSS-Hintergrund (:before),
     damit Maße, alt und die KI-Pille greifen; unscharf wie im Shop;
   · Bild unter „Unser Anspruch" absolut gesetzt, feste Höhe +
     object-fit (sonst Streifen durch width/height);
   · Einblenden kommt aus 01-base.css und skript.js, die eigene
     Regel der Section (versteckte ohne Skript alles) entfällt;
   · --gg-blue-soft wird hier NICHT überschrieben (im Shop #eef5fd):
     die KI-Pille nutzt die Variable für ihr Abzeichen;
   · gestrichene Blöcke (Werte, Kontakt, Karte) samt CSS entfernt,
     Unsplash-Foto im Abschluss-Banner entfernt;
   · Abstand oben größer als im Shop: die Menü-Pille schwebt fest
     darüber (Falle 15); Abstand unten größer, damit die KI-Pille
     zwischen Karte und Kennzahlen-Leiste frei steht.
   ============================================================ */

#gg-about-page,
#gg-about-page * {
  box-sizing: border-box;
}

#gg-about-page {
  --gg-line: rgba(84, 141, 212, .16);
  --gg-white: #ffffff;
  --gg-shadow: 0 22px 70px rgba(84, 141, 212, .13);
  --gg-shadow-dark: 0 26px 90px rgba(23, 27, 32, .16);

  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--gg-text);
  font-family: var(--gg-schrift);
  background:
    radial-gradient(circle at 10% 8%, rgba(84, 141, 212, .14), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(84, 141, 212, .10), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f6f9fd 100%);
}

#gg-about-page a {
  color: inherit;
  text-decoration: none;
}

#gg-about-page img {
  display: block;
  max-width: 100%;
}

#gg-about-page .gg-shell {
  width: min(1180px, calc(100% - 34px));
  margin: 0 auto;
}

/* ---------- Kopfbereich ---------- */

#gg-about-page .gg-about-hero {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  display: flex;
  align-items: center;
  padding: 170px 0 96px;
  overflow: hidden;
}

/* Im Shop: :before mit background-image. Jetzt echtes Bild. */
#gg-about-page .gg-about-hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  filter: blur(3.5px) saturate(1.08) contrast(1.05);
  /* Vergrößert, damit der unscharfe Rand außerhalb liegt
     (im Shop: inset -35px + scale 1.025) */
  transform: scale(1.06);
  pointer-events: none;
}

#gg-about-page .gg-about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .78) 39%, rgba(255, 255, 255, .38) 66%, rgba(255, 255, 255, .16) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .10) 42%, #f8fbff 100%),
    radial-gradient(circle at 82% 34%, rgba(84, 141, 212, .20), transparent 35%);
  z-index: 0;
  pointer-events: none;
}

/* KI-Pille des Kopfbilds: Lage steht in 40-ki-kennzeichnung.css
   (.gg-ki--kopf, oben rechts unter der Menü-Pille) */

#gg-about-page .gg-about-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .76fr);
  gap: 44px;
  align-items: center;
}

#gg-about-page .gg-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 22px;
  border: 1px solid rgba(84, 141, 212, .22);
  background: rgba(255, 255, 255, .76);
  color: var(--gg-blue-deep);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 12px 35px rgba(84, 141, 212, .12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#gg-about-page .gg-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  box-shadow: 0 0 0 6px rgba(84, 141, 212, .13);
}

#gg-about-page h1 {
  margin: 0;
  max-width: 780px;
  color: var(--gg-dark);
  font-size: clamp(44px, 6.3vw, 82px);
  line-height: .92;
  letter-spacing: -.07em;
  font-weight: 950;
  overflow-wrap: break-word;
}

#gg-about-page h1 span {
  display: block;
  background: linear-gradient(135deg, var(--gg-blue) 0%, var(--gg-blue-dark) 55%, var(--gg-blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#gg-about-page .gg-hero-copy {
  max-width: 690px;
  margin: 24px 0 32px;
  color: #4f5b66;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.72;
  font-weight: 560;
}

#gg-about-page .gg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

#gg-about-page .gg-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

#gg-about-page .gg-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke-width: 2.2;
}

#gg-about-page .gg-btn:hover {
  transform: translateY(-3px);
}

#gg-about-page .gg-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  box-shadow: 0 18px 42px rgba(84, 141, 212, .34), 0 0 0 7px rgba(84, 141, 212, .09);
}

#gg-about-page .gg-btn-primary:hover {
  box-shadow: 0 24px 58px rgba(84, 141, 212, .38), 0 0 0 9px rgba(84, 141, 212, .11);
}

#gg-about-page .gg-btn-secondary {
  color: var(--gg-dark);
  background: rgba(255, 255, 255, .86);
  border-color: rgba(23, 27, 32, .10);
  box-shadow: 0 14px 34px rgba(23, 27, 32, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#gg-about-page .gg-btn-secondary:hover {
  border-color: rgba(84, 141, 212, .34);
  box-shadow: 0 18px 42px rgba(23, 27, 32, .12);
}

/* Karte rechts im Kopfbereich */
#gg-about-page .gg-hero-card {
  padding: 18px;
  border-radius: 36px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: var(--gg-shadow-dark);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#gg-about-page .gg-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  min-height: 130px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(84, 141, 212, .18);
  box-shadow: 0 14px 34px rgba(18, 45, 58, .08);
}

#gg-about-page .gg-hero-logo img {
  width: 310px;
  height: auto;
  object-fit: contain;
}

#gg-about-page .gg-hero-card-content {
  padding: 22px 6px 4px;
}

#gg-about-page .gg-hero-card-content h2 {
  margin: 0;
  color: var(--gg-dark);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.05em;
  font-weight: 950;
}

#gg-about-page .gg-hero-card-content p {
  margin: 12px 0 20px;
  color: var(--gg-muted);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 600;
}

#gg-about-page .gg-quick-list {
  display: grid;
  gap: 10px;
}

#gg-about-page .gg-quick-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 20px;
  background: rgba(248, 251, 255, .88);
  border: 1px solid rgba(23, 27, 32, .07);
}

#gg-about-page .gg-quick-item > div:last-child {
  min-width: 0;
}

#gg-about-page .gg-quick-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  box-shadow: 0 12px 24px rgba(84, 141, 212, .26);
}

#gg-about-page .gg-quick-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.35;
}

#gg-about-page .gg-quick-item strong {
  display: block;
  color: var(--gg-dark);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 950;
  overflow-wrap: anywhere;
}

#gg-about-page .gg-quick-item span {
  display: block;
  margin-top: 4px;
  color: var(--gg-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

/* ---------- Kennzahlen-Leiste ---------- */

#gg-about-page .gg-stats-wrap {
  position: relative;
  z-index: 3;
  margin-top: -42px;
}

#gg-about-page .gg-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(84, 141, 212, .16);
  box-shadow: var(--gg-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#gg-about-page .gg-stat {
  padding: 20px 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  border: 1px solid rgba(23, 27, 32, .06);
}

#gg-about-page .gg-stat strong {
  display: block;
  color: var(--gg-dark);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 950;
}

#gg-about-page .gg-stat span {
  display: block;
  margin-top: 8px;
  color: var(--gg-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 780;
}

/* ---------- Abschnitte ---------- */

#gg-about-page .gg-section {
  position: relative;
  padding: 86px 0;
}

#gg-about-page .gg-section-head {
  max-width: 780px;
  margin: 0 auto 38px;
  text-align: center;
}

#gg-about-page .gg-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--gg-blue-deep);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

#gg-about-page .gg-title {
  margin: 0;
  color: var(--gg-dark);
  font-size: clamp(32px, 4.5vw, 58px);
  /* .96 im Shop: die Ü-Punkte stießen an die Zeile darüber */
  line-height: 1.06;
  letter-spacing: -.06em;
  font-weight: 950;
  overflow-wrap: break-word;
}

#gg-about-page .gg-title span {
  color: var(--gg-blue-deep);
}

#gg-about-page .gg-copy {
  margin: 18px 0 0;
  color: var(--gg-muted);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.75;
  font-weight: 550;
}

/* ---------- Unser Anspruch ---------- */

#gg-about-page .gg-story-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 28px;
  align-items: center;
}

#gg-about-page .gg-image-panel {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 40px;
  background: #eaf2fb;
  box-shadow: var(--gg-shadow-dark);
}

/* Feste Höhe über den Rahmen, Bild füllt ihn (object-fit) */
#gg-about-page .gg-image-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#gg-about-page .gg-image-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(23, 27, 32, .64) 100%),
    radial-gradient(circle at 20% 14%, rgba(84, 141, 212, .30), transparent 38%);
}

/* KI-Pille oben rechts: unten steht das weiße Textschild */
#gg-about-page .gg-image-panel > .gg-ki {
  top: 18px;
  right: 18px;
  bottom: auto;
}

#gg-about-page .gg-image-badge {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 20px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .76);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#gg-about-page .gg-image-badge strong {
  display: block;
  color: var(--gg-dark);
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -.04em;
  font-weight: 950;
}

#gg-about-page .gg-image-badge span {
  display: block;
  margin-top: 8px;
  color: var(--gg-muted);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

#gg-about-page .gg-story-content {
  padding: 8px 0;
}

#gg-about-page .gg-story-content h2 {
  margin: 0;
  color: var(--gg-dark);
  font-size: clamp(32px, 4vw, 54px);
  line-height: .98;
  letter-spacing: -.06em;
  font-weight: 950;
  overflow-wrap: break-word;
}

#gg-about-page .gg-story-content h2 span {
  color: var(--gg-blue-deep);
}

#gg-about-page .gg-story-content p {
  margin: 18px 0 0;
  color: var(--gg-muted);
  font-size: 17px;
  line-height: 1.78;
  font-weight: 550;
}

#gg-about-page .gg-check-list {
  display: grid;
  gap: 13px;
  margin-top: 26px;
}

#gg-about-page .gg-check-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 17px;
  border-radius: 23px;
  background: #fff;
  border: 1px solid rgba(23, 27, 32, .08);
  box-shadow: 0 12px 34px rgba(23, 27, 32, .06);
}

#gg-about-page .gg-check {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  font-size: 15px;
  font-weight: 950;
}

#gg-about-page .gg-check-item strong {
  display: block;
  color: var(--gg-dark);
  font-size: 16px;
  line-height: 1.22;
  font-weight: 950;
}

#gg-about-page .gg-check-item span {
  display: block;
  margin-top: 4px;
  color: var(--gg-muted);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 560;
}

/* ---------- So läuft es ab ---------- */

#gg-about-page .gg-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#gg-about-page .gg-process-card {
  position: relative;
  padding: 24px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(23, 27, 32, .08);
  box-shadow: 0 16px 44px rgba(23, 27, 32, .07);
  overflow: hidden;
}

#gg-about-page .gg-process-card::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 24px;
  width: 48px;
  height: 48px;
  border-radius: 17px;
  background: rgba(84, 141, 212, .11);
}

#gg-about-page .gg-process-number {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(84, 141, 212, .28);
}

#gg-about-page .gg-process-card h3 {
  margin: 22px 0 10px;
  color: var(--gg-dark);
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -.04em;
  font-weight: 950;
}

#gg-about-page .gg-process-card p {
  margin: 0;
  color: var(--gg-muted);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 560;
}

/* ---------- Abschluss-Banner (ohne Fremdfoto) ---------- */

#gg-about-page .gg-stock-cta {
  position: relative;
  overflow: hidden;
  padding: 42px;
  border-radius: 42px;
  color: #fff;
  background: linear-gradient(135deg, rgba(84, 141, 212, .96), rgba(40, 89, 143, .98));
  box-shadow: 0 26px 80px rgba(84, 141, 212, .28);
}

#gg-about-page .gg-stock-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(40, 89, 143, .95), rgba(63, 118, 181, .76), rgba(84, 141, 212, .22)),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .20), transparent 32%);
}

#gg-about-page .gg-stock-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}

#gg-about-page .gg-stock-cta h2 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(32px, 4vw, 54px);
  line-height: .98;
  letter-spacing: -.06em;
  font-weight: 950;
  overflow-wrap: break-word;
}

#gg-about-page .gg-stock-cta p {
  margin: 14px 0 0;
  max-width: 720px;
  color: rgba(255, 255, 255, .88);
  font-size: 17px;
  line-height: 1.72;
  font-weight: 570;
}

#gg-about-page .gg-stock-cta .gg-btn {
  color: var(--gg-dark);
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

/* ---------- Breiten (immer HINTER den Grundregeln, Falle 14) ---------- */

@media screen and (max-width: 1060px) {
  #gg-about-page .gg-about-hero-grid,
  #gg-about-page .gg-story-grid {
    grid-template-columns: 1fr;
  }

  #gg-about-page .gg-about-hero {
    min-height: auto;
    padding: 150px 0 100px;
  }

  #gg-about-page .gg-about-hero-img {
    object-position: center center;
  }

  #gg-about-page .gg-about-hero::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .90) 0%, rgba(255, 255, 255, .68) 48%, rgba(248, 251, 255, .60) 100%),
      radial-gradient(circle at 80% 25%, rgba(84, 141, 212, .22), transparent 36%);
  }

  #gg-about-page .gg-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #gg-about-page .gg-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #gg-about-page .gg-stock-cta-inner {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 720px) {
  #gg-about-page .gg-shell {
    width: min(100% - 24px, 1180px);
  }

  #gg-about-page .gg-about-hero {
    padding: 136px 0 100px;
  }

  #gg-about-page h1 {
    font-size: clamp(40px, 13vw, 64px);
  }

  #gg-about-page .gg-hero-copy {
    font-size: 16px;
  }

  #gg-about-page .gg-btn {
    width: 100%;
  }

  #gg-about-page .gg-stats-grid,
  #gg-about-page .gg-process-grid {
    grid-template-columns: 1fr;
  }

  #gg-about-page .gg-section {
    padding: 60px 0;
  }

  #gg-about-page .gg-image-panel {
    min-height: 430px;
    border-radius: 30px;
  }

  #gg-about-page .gg-image-panel > .gg-ki {
    top: 14px;
    right: 14px;
  }

  #gg-about-page .gg-image-badge {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  #gg-about-page .gg-stock-cta {
    padding: 28px;
    border-radius: 32px;
  }

  #gg-about-page .gg-hero-logo img {
    width: 245px;
  }
}

@media screen and (max-width: 520px) {
  #gg-about-page .gg-about-hero {
    padding: 128px 0 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gg-about-page *,
  #gg-about-page *::before,
  #gg-about-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ===== 21-kontakt.css ===== */
/* ============================================================
   Kontaktseite (#gg-contact-page) und Danke-Seite (#gg-danke-page)
   ------------------------------------------------------------
   Aus der custom_liquid-Section „Kontakt" des Shops übernommen
   (Kopie in _recherche/shop-2026-10-13/html/pages_contact.html).
   Geändert gegenüber dem Shop:
   · kein width:100vw / margin-left:calc(50% - 50vw) mehr
     (Seitwärts-Scrollen, LESSONS Falle 14), kein @import von
     Google Fonts (Inter kommt lokal aus 01-base.css);
   · Kopfbild als echtes <img> statt url() im :before, damit
     Maße, alt und KI-Pille greifen;
   · Abstand oben so, dass der erste Inhalt auf jeder Breite
     sicher unter der schwebenden Menü-Pille beginnt (Falle 15);
   · Eingabefelder 16 px (iPad/iPhone zoomen unter 16 px);
   · Karten-, Mini-Kachel- und Banner-Regeln entfallen mit den
     gestrichenen Abschnitten; neue Standort-Karte nutzt die
     Kartenregeln von „Hinweis zur Anfrage";
   · Einblenden steuert 01-base.css (data-gg-reveal), hier nichts.
   ============================================================ */

#gg-contact-page,
#gg-danke-page {
  --gg-line: rgba(84, 141, 212, .16);
  --gg-white: #ffffff;
  --gg-shadow: 0 22px 70px rgba(84, 141, 212, .13);
  --gg-shadow-dark: 0 26px 90px rgba(23, 27, 32, .16);

  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--gg-text);
  font-family: var(--gg-schrift);
  background:
    radial-gradient(circle at 10% 8%, rgba(84, 141, 212, .14), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(84, 141, 212, .10), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f6f9fd 100%);
}

#gg-contact-page a,
#gg-danke-page a {
  color: inherit;
  text-decoration: none;
}

#gg-contact-page img {
  display: block;
  max-width: 100%;
}

#gg-contact-page .gg-shell,
#gg-danke-page .gg-shell {
  width: min(1180px, calc(100% - 34px));
  margin: 0 auto;
}

/* ---------- Kopfbereich ---------- */

#gg-contact-page .gg-contact-hero {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  display: flex;
  align-items: center;
  /* Menü-Pille endet am Desktop bei rund 116 px */
  padding: 170px 0 88px;
  overflow: hidden;
}

/* Unscharfes Kopfbild. Im Shop ein :before mit inset:-35px, damit
   die weichgezeichneten Ränder außerhalb liegen; hier dasselbe mit
   einem echten <img>. max-width:none ist nötig, sonst kappt die
   Grundregel img{max-width:100%} die Überbreite. */
#gg-contact-page .gg-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#gg-contact-page .gg-hero-bg-image {
  position: absolute;
  top: -35px;
  left: -35px;
  width: calc(100% + 70px);
  height: calc(100% + 70px);
  max-width: none;
  object-fit: cover;
  object-position: right center;
  filter: blur(3.5px) saturate(1.08) contrast(1.05);
  transform: scale(1.025);
}

#gg-contact-page .gg-contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .78) 39%, rgba(255, 255, 255, .38) 66%, rgba(255, 255, 255, .16) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .10) 42%, #f8fbff 100%),
    radial-gradient(circle at 82% 34%, rgba(84, 141, 212, .20), transparent 35%);
  z-index: 0;
  pointer-events: none;
}

#gg-contact-page .gg-contact-hero > .gg-shell {
  position: relative;
  z-index: 1;
}

#gg-contact-page .gg-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
  gap: 44px;
  align-items: center;
}

/* KI-Pille über Bild und Verlauf */
#gg-contact-page .gg-contact-hero > .gg-ki {
  z-index: 5;
}

#gg-contact-page .gg-badge,
#gg-danke-page .gg-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 22px;
  border: 1px solid rgba(84, 141, 212, .22);
  background: rgba(255, 255, 255, .76);
  color: var(--gg-blue-deep);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 12px 35px rgba(84, 141, 212, .12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#gg-contact-page .gg-badge::before,
#gg-danke-page .gg-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  box-shadow: 0 0 0 6px rgba(84, 141, 212, .13);
}

#gg-contact-page h1,
#gg-danke-page h1 {
  margin: 0;
  max-width: 780px;
  color: var(--gg-dark);
  font-size: clamp(44px, 6.3vw, 82px);
  line-height: .92;
  letter-spacing: -.07em;
  font-weight: 950;
}

#gg-contact-page h1 span,
#gg-danke-page h1 span {
  display: block;
  background: linear-gradient(135deg, var(--gg-blue) 0%, var(--gg-blue-dark) 55%, var(--gg-blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#gg-contact-page .gg-hero-copy {
  max-width: 690px;
  margin: 24px 0 32px;
  color: #4f5b66;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.72;
  font-weight: 560;
}

/* ---------- Knöpfe ---------- */

#gg-contact-page .gg-btn-row,
#gg-danke-page .gg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

#gg-contact-page .gg-btn,
#gg-danke-page .gg-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

#gg-contact-page .gg-btn svg,
#gg-danke-page .gg-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke-width: 2.2;
}

#gg-contact-page .gg-btn:hover,
#gg-danke-page .gg-btn:hover {
  transform: translateY(-3px);
}

#gg-contact-page .gg-btn-primary,
#gg-danke-page .gg-btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  box-shadow: 0 18px 42px rgba(84, 141, 212, .34), 0 0 0 7px rgba(84, 141, 212, .09);
}

#gg-contact-page .gg-btn-primary:hover,
#gg-danke-page .gg-btn-primary:hover {
  box-shadow: 0 24px 58px rgba(84, 141, 212, .38), 0 0 0 9px rgba(84, 141, 212, .11);
}

#gg-contact-page .gg-btn-secondary,
#gg-danke-page .gg-btn-secondary {
  color: var(--gg-dark);
  background: rgba(255, 255, 255, .86);
  border-color: rgba(23, 27, 32, .10);
  box-shadow: 0 14px 34px rgba(23, 27, 32, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#gg-contact-page .gg-btn-secondary:hover,
#gg-danke-page .gg-btn-secondary:hover {
  border-color: rgba(84, 141, 212, .34);
  box-shadow: 0 18px 42px rgba(23, 27, 32, .12);
}

/* ---------- Karte im Kopfbereich ---------- */

#gg-contact-page .gg-hero-card {
  padding: 18px;
  border-radius: 36px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: var(--gg-shadow-dark);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#gg-contact-page .gg-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  min-height: 130px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(84, 141, 212, .18);
  box-shadow: 0 14px 34px rgba(18, 45, 58, .08);
}

#gg-contact-page .gg-hero-logo img {
  width: 310px;
  height: auto;
  object-fit: contain;
}

#gg-contact-page .gg-quick-list {
  display: grid;
  gap: 10px;
  padding: 18px 4px 2px;
}

#gg-contact-page .gg-quick-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 44px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(248, 251, 255, .88);
  border: 1px solid rgba(23, 27, 32, .07);
  transition: transform .2s ease, border-color .2s ease;
}

#gg-contact-page a.gg-quick-item:hover {
  transform: translateY(-2px);
  border-color: rgba(84, 141, 212, .30);
}

#gg-contact-page .gg-quick-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  box-shadow: 0 12px 24px rgba(84, 141, 212, .26);
}

#gg-contact-page .gg-quick-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.35;
}

#gg-contact-page .gg-quick-text {
  min-width: 0;
}

#gg-contact-page .gg-quick-item strong {
  display: block;
  color: var(--gg-dark);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 950;
  overflow-wrap: anywhere;
}

#gg-contact-page .gg-quick-text > span {
  display: block;
  margin-top: 4px;
  color: var(--gg-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

/* ---------- Formular-Abschnitt ---------- */

#gg-contact-page .gg-section {
  position: relative;
  padding: 86px 0;
}

#gg-contact-page .gg-section-head {
  max-width: 780px;
  margin: 0 auto 38px;
  text-align: center;
}

#gg-contact-page .gg-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--gg-blue-deep);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

#gg-contact-page .gg-title {
  margin: 0;
  color: var(--gg-dark);
  font-size: clamp(32px, 4.5vw, 58px);
  line-height: 1.06;
  letter-spacing: -.06em;
  font-weight: 950;
}

#gg-contact-page .gg-title span {
  color: var(--gg-blue-deep);
}

/* Breit: Hinweis (oben) und Standort (darunter) links, Formular
   rechts über beide Zeilen. Schmal: eine Spalte in Quelltext-
   Reihenfolge Hinweis, Formular, Standort. */
#gg-contact-page .gg-main-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  grid-template-rows: auto 1fr;
  gap: 18px 24px;
  align-items: start;
}

#gg-contact-page .gg-info-hinweis {
  grid-column: 1;
  grid-row: 1;
}

#gg-contact-page .gg-info-standort {
  grid-column: 1;
  grid-row: 2;
}

#gg-contact-page .gg-form-card {
  grid-column: 2;
  grid-row: 1 / span 2;
}

#gg-contact-page .gg-info-card {
  padding: 26px;
  border-radius: 32px;
  background: #ffffff;
  border: 1px solid rgba(23, 27, 32, .08);
  box-shadow: 0 18px 48px rgba(23, 27, 32, .07);
}

#gg-contact-page .gg-info-card h3 {
  margin: 0 0 12px;
  color: var(--gg-dark);
  font-size: 25px;
  line-height: 1.06;
  letter-spacing: -.045em;
  font-weight: 950;
}

#gg-contact-page .gg-info-card h3 span {
  color: var(--gg-blue-deep);
}

#gg-contact-page .gg-info-card p {
  margin: 0;
  color: var(--gg-muted);
  font-size: 15px;
  line-height: 1.72;
  font-weight: 560;
}

#gg-contact-page .gg-info-standort .gg-kicker {
  margin-bottom: 10px;
}

#gg-contact-page .gg-info-standort .gg-btn-row {
  margin-top: 20px;
}

#gg-contact-page .gg-form-card {
  padding: 24px;
  border-radius: 38px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(84, 141, 212, .18);
  box-shadow: var(--gg-shadow-dark);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#gg-contact-page .gg-form-inner {
  padding: 30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 10%, rgba(84, 141, 212, .13), transparent 34%),
    linear-gradient(180deg, #ffffff, #f4f8fd);
  border: 1px solid rgba(84, 141, 212, .13);
}

#gg-contact-page .gg-form-inner h2 {
  margin: 0;
  color: var(--gg-dark);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 950;
}

#gg-contact-page .gg-form-inner > p {
  margin: 14px 0 24px;
  color: var(--gg-muted);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 560;
}

#gg-contact-page .gg-form {
  position: relative;
  display: grid;
  gap: 14px;
}

#gg-contact-page .gg-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#gg-contact-page .gg-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

#gg-contact-page .gg-field label {
  color: var(--gg-dark);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.01em;
}

/* 16 px: darunter zoomen iPad und iPhone beim Antippen ins Feld */
#gg-contact-page .gg-field input,
#gg-contact-page .gg-field select,
#gg-contact-page .gg-field textarea {
  width: 100%;
  min-height: 52px;
  margin: 0;
  border: 1px solid rgba(23, 27, 32, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  color: var(--gg-dark);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  padding: 0 16px;
  box-shadow: 0 12px 28px rgba(23, 27, 32, .04);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#gg-contact-page .gg-field textarea {
  display: block;
  min-height: 150px;
  padding: 15px 16px;
  resize: vertical;
}

#gg-contact-page .gg-field input:focus,
#gg-contact-page .gg-field select:focus,
#gg-contact-page .gg-field textarea:focus {
  border-color: rgba(84, 141, 212, .55);
  background: #ffffff;
  box-shadow: 0 0 0 5px rgba(84, 141, 212, .10), 0 12px 28px rgba(23, 27, 32, .05);
}

#gg-contact-page .gg-field input::placeholder,
#gg-contact-page .gg-field textarea::placeholder {
  color: #9aa3ab;
  font-weight: 600;
  opacity: 1;
}

#gg-contact-page .gg-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .70);
  border: 1px solid rgba(23, 27, 32, .07);
  color: var(--gg-muted);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 650;
  cursor: pointer;
}

#gg-contact-page .gg-consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--gg-blue-deep);
  flex: 0 0 18px;
}

#gg-contact-page .gg-consent a {
  color: var(--gg-blue-deep);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#gg-contact-page .gg-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}

#gg-contact-page .gg-form-note {
  color: var(--gg-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

/* Honigtopf für Spam-Programme, für Menschen unsichtbar */
#gg-contact-page .gg-hidden-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- Danke-Seite ---------- */

#gg-danke-page {
  /* Menü-Pille endet am Desktop bei rund 116 px */
  padding: 180px 0 110px;
  min-height: 72vh;
}

#gg-danke-page .gg-danke-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 44px;
  border-radius: 38px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(84, 141, 212, .18);
  box-shadow: var(--gg-shadow-dark);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#gg-danke-page h1 {
  font-size: clamp(38px, 5.4vw, 66px);
}

/* „Anfrage“ hat eine Unterlänge; bei line-height unter 1 und
   background-clip:text würde das g sonst unten abgeschnitten. */
#gg-danke-page h1 span {
  padding-bottom: .08em;
}

#gg-danke-page .gg-danke-copy {
  max-width: 620px;
  margin: 22px 0 30px;
  color: #4f5b66;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.72;
  font-weight: 560;
}

/* ---------- Breiten ---------- */

@media screen and (max-width: 1060px) {
  #gg-contact-page .gg-hero-grid,
  #gg-contact-page .gg-main-grid {
    grid-template-columns: 1fr;
  }

  #gg-contact-page .gg-main-grid {
    grid-template-rows: none;
  }

  #gg-contact-page .gg-info-hinweis,
  #gg-contact-page .gg-info-standort,
  #gg-contact-page .gg-form-card {
    grid-column: auto;
    grid-row: auto;
  }

  #gg-contact-page .gg-contact-hero {
    min-height: auto;
    padding: 160px 0 78px;
  }

  #gg-contact-page .gg-hero-bg-image {
    object-position: center center;
  }

  #gg-contact-page .gg-contact-hero::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .90) 0%, rgba(255, 255, 255, .68) 48%, rgba(248, 251, 255, .60) 100%),
      radial-gradient(circle at 80% 25%, rgba(84, 141, 212, .22), transparent 36%);
  }
}

@media screen and (max-width: 980px) {
  /* Menü-Pille hier rund 100 px hoch */
  #gg-contact-page .gg-contact-hero {
    padding-top: 145px;
  }

  #gg-danke-page {
    padding-top: 150px;
  }
}

@media screen and (max-width: 720px) {
  #gg-contact-page .gg-shell,
  #gg-danke-page .gg-shell {
    width: min(100% - 24px, 1180px);
  }

  /* Shop: 122px oben, Pille endet hier aber bei rund 103 px */
  #gg-contact-page .gg-contact-hero {
    padding: 140px 0 62px;
  }

  #gg-contact-page h1 {
    font-size: clamp(40px, 13vw, 64px);
  }

  #gg-danke-page h1 {
    font-size: clamp(36px, 11vw, 60px);
  }

  #gg-contact-page .gg-hero-copy {
    font-size: 16px;
  }

  #gg-contact-page .gg-section {
    padding: 60px 0;
  }

  #gg-contact-page .gg-btn,
  #gg-danke-page .gg-btn {
    width: 100%;
  }

  #gg-contact-page .gg-form-row {
    grid-template-columns: 1fr;
  }

  #gg-contact-page .gg-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  #gg-contact-page .gg-form-card {
    padding: 14px;
    border-radius: 30px;
  }

  #gg-contact-page .gg-form-inner {
    padding: 22px;
    border-radius: 24px;
  }

  #gg-contact-page .gg-info-card {
    padding: 24px;
    border-radius: 30px;
  }

  #gg-contact-page .gg-hero-logo img {
    width: 245px;
  }

  #gg-danke-page {
    padding: 140px 0 80px;
    min-height: 0;
  }

  #gg-danke-page .gg-danke-card {
    padding: 26px;
    border-radius: 30px;
  }
}

@media screen and (max-width: 520px) {
  /* Menü-Pille hier rund 90 px hoch */
  /* Shop: 112px oben, Pille endet hier bei rund 91 px */
  #gg-contact-page .gg-contact-hero {
    padding: 128px 0 58px;
  }

  #gg-danke-page {
    padding-top: 128px;
  }

  #gg-danke-page .gg-danke-card {
    padding: 22px 18px;
  }
}

@media screen and (max-width: 370px) {
  #gg-contact-page .gg-btn,
  #gg-danke-page .gg-btn {
    padding-left: 16px;
    padding-right: 16px;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gg-contact-page *,
  #gg-contact-page *::before,
  #gg-contact-page *::after,
  #gg-danke-page *,
  #gg-danke-page *::before,
  #gg-danke-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ===== 30-textseiten.css ===== */
/* ============================================================
   Textseiten: Impressum, Datenschutz, 404 (auch für Danke)
   ------------------------------------------------------------
   Im alten Shop lagen Impressum und Datenschutz im Shopify-
   Standardlayout unter /policies/…, eine eigene Fehlerseite gab
   es nicht. Gestaltung hier im Look der Kontaktseite (helle
   Fläche, weiße Karten, Blau als Akzent), aber ruhig: es sind
   Lesetexte, keine Werbeflächen.

   Bausteine, alle unter .gg-textseite (nichts global):

     <section class="gg-textseite">          Rahmen + Abstand unter der Pille
       <div class="gg-text-wrap">            Lesebreite
         <p class="gg-text-kicker">          kleine Pille über der Überschrift
         <h1> … <p class="gg-text-vorspann">
         <div class="gg-text-karte">         weiße Karte: h2, h3, p, ul, dl
           <dl class="gg-text-daten">
             <div class="gg-text-zeile"><dt>…</dt><dd>…</dd></div>
           <div class="gg-text-hinweis">     blauer Hinweiskasten
             <span class="gg-text-hinweis-zeichen">KI</span><p>…</p>
         <div class="gg-text-knoepfe">
           <a class="gg-text-btn">           blau
           <a class="gg-text-btn gg-text-btn--hell">
         <nav class="gg-text-links">         kleine Zusatzlinks
     Mittig und schmaler (404, Danke): zusätzlich
     .gg-textseite--mitte, große Zahl: <p class="gg-text-gross">.

   ABSTAND OBEN: Die Menü-Pille (02-header.css) ist
   position:fixed und schwebt über dem Inhalt. Ihre Unterkante
   liegt je nach Breite bei etwa 118 px (Desktop, Logo 245 px
   breit), 103 px (bis 980 px) und 83 bis 91 px (Handy). Der
   obere Innenabstand liegt überall deutlich darunter, damit die
   Pille nie über dem ersten Inhalt hängt (LESSONS Falle 15).
   Wer die Pille größer macht, muss hier nachziehen.
   ============================================================ */

.gg-textseite {
  position: relative;
  isolation: isolate;
  padding: 172px 0 clamp(64px, 8vw, 112px);
  color: var(--gg-text);
  font-family: var(--gg-schrift);
  background:
    radial-gradient(circle at 10% 4%, rgba(84, 141, 212, .14), transparent 32%),
    radial-gradient(circle at 90% 12%, rgba(84, 141, 212, .10), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 46%, #f6f9fd 100%);
}

/* Sprungziele (z. B. /impressum#ki-hinweise) landen unter der
   Pille. skript.js misst die echte Höhe, das hier ist der
   Rückfall ohne Skript. */
.gg-textseite [id] {
  scroll-margin-top: 150px;
}

.gg-textseite .gg-text-wrap {
  width: min(880px, calc(100% - 40px));
  margin: 0 auto;
}

.gg-textseite--mitte .gg-text-wrap {
  width: min(680px, calc(100% - 40px));
  text-align: center;
}

/* ---------- Kopf der Textseite ---------- */

.gg-textseite .gg-text-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 9px 14px;
  border: 1px solid rgba(84, 141, 212, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--gg-blue-deep);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 12px 35px rgba(84, 141, 212, .12);
}

.gg-textseite .gg-text-kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  box-shadow: 0 0 0 5px rgba(84, 141, 212, .13);
}

.gg-textseite h1 {
  max-width: 820px;
  margin: 0 0 16px;
  color: var(--gg-dark);
  font-size: clamp(36px, 5.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -.055em;
  font-weight: 900;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.gg-textseite--mitte h1 {
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(30px, 4.4vw, 48px);
}

.gg-textseite .gg-text-vorspann {
  max-width: 680px;
  margin: 0 0 36px;
  color: #4f5b66;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.7;
  font-weight: 550;
}

.gg-textseite--mitte .gg-text-vorspann {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

/* Große Zahl auf der Fehlerseite */
.gg-textseite .gg-text-gross {
  margin: 0 0 6px;
  color: var(--gg-blue);
  font-size: clamp(88px, 18vw, 168px);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 900;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gg-textseite .gg-text-gross {
    background: linear-gradient(135deg, var(--gg-blue) 0%, var(--gg-blue-dark) 55%, var(--gg-blue-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Rand gegen abgeschnittene Kanten bei Verlaufsschrift */
    padding: 0 .06em .04em;
  }
}

/* ---------- Karten, in denen die Rechtstexte stehen ---------- */

.gg-textseite .gg-text-karte {
  margin-bottom: 18px;
  padding: clamp(22px, 3.4vw, 40px);
  border: 1px solid rgba(23, 27, 32, .08);
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(23, 27, 32, .07);
  overflow-wrap: break-word;
}

.gg-textseite .gg-text-karte h2 {
  margin: 0 0 16px;
  color: var(--gg-dark);
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.2;
  letter-spacing: -.035em;
  font-weight: 900;
}

.gg-textseite .gg-text-karte h3 {
  margin: 28px 0 10px;
  color: var(--gg-dark);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 850;
}

.gg-textseite .gg-text-karte h2 + h3 {
  margin-top: 4px;
}

.gg-textseite .gg-text-karte p,
.gg-textseite .gg-text-karte li {
  max-width: 66ch;
  color: #3f4852;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 500;
}

.gg-textseite .gg-text-karte p {
  margin: 0 0 14px;
}

.gg-textseite .gg-text-karte p:last-child {
  margin-bottom: 0;
}

.gg-textseite .gg-text-karte ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.gg-textseite .gg-text-karte ul:last-child {
  margin-bottom: 0;
}

.gg-textseite .gg-text-karte li {
  margin-bottom: 8px;
}

.gg-textseite .gg-text-karte li::marker {
  color: var(--gg-blue);
}

.gg-textseite .gg-text-karte a {
  color: var(--gg-blue-deep);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.gg-textseite .gg-text-karte a:hover {
  color: var(--gg-blue-dark);
}

.gg-textseite .gg-text-karte strong {
  color: var(--gg-dark);
  font-weight: 800;
}

.gg-textseite .gg-text-klein {
  color: var(--gg-muted);
  font-size: 14px;
  font-weight: 550;
}

.gg-textseite .gg-text-stand {
  color: var(--gg-muted);
  font-weight: 650;
}

/* Datenzeilen (Impressum, Verantwortlicher) */
.gg-textseite .gg-text-daten {
  margin: 0 0 14px;
}

.gg-textseite .gg-text-daten:last-child {
  margin-bottom: 0;
}

.gg-textseite .gg-text-zeile {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 6px 18px;
  padding: 13px 0;
  border-top: 1px solid rgba(23, 27, 32, .07);
}

.gg-textseite .gg-text-zeile:first-child {
  border-top: 0;
  padding-top: 0;
}

.gg-textseite .gg-text-zeile dt {
  padding-top: 3px;
  color: var(--gg-blue-deep);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.gg-textseite .gg-text-zeile dd {
  margin: 0;
  color: var(--gg-dark);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 650;
  overflow-wrap: anywhere;
}

/* Hinweiskasten (KI) */
.gg-textseite .gg-text-hinweis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(84, 141, 212, .18);
  border-radius: 22px;
  background: rgba(84, 141, 212, .07);
}

.gg-textseite .gg-text-hinweis-zeichen {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gg-blue-soft), var(--gg-blue));
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 10px 22px rgba(84, 141, 212, .26);
}

/* ---------- Knöpfe ---------- */

.gg-textseite .gg-text-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.gg-textseite--mitte .gg-text-knoepfe {
  justify-content: center;
}

.gg-textseite .gg-text-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark));
  box-shadow: 0 18px 42px rgba(84, 141, 212, .34), 0 0 0 7px rgba(84, 141, 212, .09);
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.gg-textseite .gg-text-btn:hover {
  transform: translateY(-3px);
}

.gg-textseite .gg-text-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.gg-textseite .gg-text-btn--hell {
  color: var(--gg-dark);
  background: rgba(255, 255, 255, .9);
  border-color: rgba(23, 27, 32, .10);
  box-shadow: 0 14px 34px rgba(23, 27, 32, .08);
}

.gg-textseite .gg-text-btn--hell:hover {
  border-color: rgba(84, 141, 212, .34);
}

/* Zusatzlinks unter den Knöpfen */
.gg-textseite .gg-text-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 22px;
}

.gg-textseite--mitte .gg-text-links {
  justify-content: center;
}

.gg-textseite .gg-text-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #4f5b66;
  font-size: 15px;
  font-weight: 750;
  text-decoration: none;
  transition: color .22s ease;
}

.gg-textseite .gg-text-links a:hover {
  color: var(--gg-blue-deep);
}

/* ---------- kleinere Bildschirme ---------- */

@media screen and (max-width: 980px) {
  .gg-textseite {
    padding-top: 144px;
  }

  .gg-textseite [id] {
    scroll-margin-top: 130px;
  }
}

@media screen and (max-width: 680px) {
  .gg-textseite .gg-text-zeile {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  /* Telefon- und Mailadresse sind auf dem Handy eigene Tippziele */
  .gg-textseite .gg-text-zeile dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .gg-textseite .gg-text-knoepfe {
    display: grid;
  }

  .gg-textseite .gg-text-btn {
    width: 100%;
  }
}

@media screen and (max-width: 520px) {
  .gg-textseite {
    padding-top: 124px;
  }

  .gg-textseite [id] {
    scroll-margin-top: 112px;
  }

  .gg-textseite .gg-text-wrap,
  .gg-textseite--mitte .gg-text-wrap {
    width: calc(100% - 24px);
  }

  .gg-textseite h1 {
    font-size: clamp(32px, 9.4vw, 40px);
  }

  .gg-textseite--mitte h1 {
    font-size: clamp(27px, 7.6vw, 34px);
  }

  .gg-textseite .gg-text-karte {
    padding: 22px 18px;
    border-radius: 24px;
  }

  /* Lange Wörter wie „Verbraucherstreitbeilegungsgesetz“ passen
     bei 320 px nicht in eine Zeile, deshalb Silbentrennung
     (Sprache kommt aus <html lang="de">). */
  .gg-textseite .gg-text-karte p,
  .gg-textseite .gg-text-karte li,
  .gg-textseite .gg-text-vorspann {
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .gg-textseite .gg-text-hinweis {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gg-textseite .gg-text-btn,
  .gg-textseite .gg-text-links a {
    transition: none;
  }

  .gg-textseite .gg-text-btn:hover {
    transform: none;
  }
}

@media print {
  .gg-textseite {
    padding: 0;
    background: none;
  }

  .gg-textseite .gg-text-karte {
    box-shadow: none;
    border-color: #cccccc;
    break-inside: avoid;
  }

  .gg-textseite .gg-text-knoepfe,
  .gg-textseite .gg-text-links {
    display: none;
  }
}


/* ===== 40-ki-kennzeichnung.css ===== */
/* ============================================================
   KI-Kennzeichnung: Artikel 50 KI-Verordnung (seit 02.08.2026)
   ------------------------------------------------------------
   WELCHE Bilder gekennzeichnet werden, steht in `SITE.kiBilder`
   in _build/gen.js, nicht hier.
   Die Pille sitzt IM Bild, eigene dunkle Fläche, damit sie auf
   jedem Motiv lesbar bleibt. Auf jeder Bildschirmgröße gleich
   groß (9,5 px); ein ins Bild gebrannter Text wäre auf dem Handy
   unleserlich klein.
   ============================================================ */

/* Klein und dezent (Kundenwunsch 14.10.2026): lesbar, aber kein Blickfang. */
.gg-ki {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 20px);
  padding: 3px 7px 3px 5px;
  border-radius: 999px;
  border: 0;
  background: rgba(17, 21, 26, .62);
  color: rgba(255, 255, 255, .92);
  font-family: var(--gg-schrift);
  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  text-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
  pointer-events: none;
}

.gg-ki-zeichen {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  color: #b4d4f7;
}

/* Kopfbild: oben rechts direkt unter der festen Menü-Pille, damit der
   Hinweis beim ersten Aufruf auf JEDER Bildschirmgröße sichtbar ist.
   Die Werte = Unterkante der Menü-Pille + 10 px (gemessen 13.10.2026:
   117 px Desktop, 102 px bis 980, 91 px bis 520). */
.gg-ki.gg-ki--kopf {
  top: 128px;
  right: 22px;
  bottom: auto;
}

@media (max-width: 980px) {
  .gg-ki.gg-ki--kopf {
    top: 112px;
    right: 14px;
  }
}

@media (max-width: 520px) {
  .gg-ki.gg-ki--kopf {
    top: 100px;
    right: 12px;
  }
}

/* Bezugspunkt für die Pille */
.gg-ki-rahmen {
  position: relative;
}

@media print {
  .gg-ki {
    position: static;
    background: none;
    border-color: #999;
    color: #000;
  }
}