/* --------------------------------------------------------------------------
   1. Fonts – lokal ausgeliefert (DSGVO), kein Request an Google
   Archivo ist EIN Variable Font für alle Schnitte; die Faces werden trotzdem
   je Gewicht einzeln deklariert – genau wie in der Design-Umgebung. Ein
   Face mit Gewichtsbereich (500 800) lässt den Browser interpolieren und
   rendert messbar breiter als die diskreten Instanzen des Designs.
   Barlow liefert je Schnitt eine eigene Datei.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var-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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var-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: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var-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: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var-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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400-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: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500-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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-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;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  --gd-blau:            #12315F;
  --gd-blau-hover:      #0C2242;
  --gd-orange:          #ED7F1C;

  --gd-text:            #3C475A;
  --gd-text-2:          #5B677A;
  --gd-text-3:          #6B7788;
  --gd-text-4:          #7A8595;
  --gd-text-5:          #8A94A3;

  --gd-weiss:           #FFFFFF;
  --gd-panel:           #F4F5F7;
  --gd-linie:           #EDEFF3;

  --gd-rahmen:          #E6E9EE;
  --gd-rahmen-2:        #E2E6EC;
  --gd-rahmen-input:    #D9DEE6;
  --gd-rahmen-ph:       #C9D0DA;
  --gd-ph-flaeche:      #FBFCFD;

  --gd-footer-bg:       #12315F;
  --gd-footer-text:     #D6DEEA;
  --gd-footer-dim:      #93A4BF;
  --gd-footer-linie:    #2A4674;

  --gd-fehler:          #D0472B;
  --gd-placeholder:     #A3ACB9;
  --gd-pill-bg:         #EEF1F6;
  --gd-pill-inaktiv:    #9AA5B4;

  --gd-head:            'Archivo', system-ui, sans-serif;
  --gd-body:            'Barlow', system-ui, sans-serif;

  /* Fester Abstand zwischen Logo-Kachel und Claim – gilt in Header und Footer
     gleichermaßen, damit die Wortmarke überall identisch zusammensteht. */
  --gd-logo-gap:        14px;

  --gd-pad-x:           clamp(20px, 4vw, 48px);
  --gd-anker:           96px;
}

/* --------------------------------------------------------------------------
   3. Basis
   -------------------------------------------------------------------------- */
.gd-page {
  margin: 0;
  background: var(--gd-weiss);
  font-family: var(--gd-body);
  font-size: 16px;
  /* Bricks vererbt global 1.7; das Design setzt keine Zeilenhöhe. Ohne diesen
     Reset werden alle Elemente ohne eigene line-height zu hoch (Buttons,
     Labels, Kacheln). */
  line-height: normal;
  color: var(--gd-text);
  -webkit-font-smoothing: antialiased;
}
.gd-page a { color: var(--gd-blau); text-decoration: none; }
.gd-page a:hover { color: var(--gd-orange); }
.gd-page img { max-width: 100%; }
.gd-page input,
.gd-page select,
.gd-page textarea,
.gd-page button { font-family: inherit; box-sizing: border-box; max-width: 100%; }
.gd-page :where(h1, h2, h3, p) { margin: 0; }
/* Überschriften erben sonst eine fremde Zeilenhöhe (1.4); das Design setzt
   keine – eigene Klassen mit expliziter line-height gewinnen weiterhin. */
.gd-page :where(h1, h2, h3, h4, h5, h6) { line-height: normal; }
.gd-page [id] { scroll-margin-top: var(--gd-anker); }

/* Bricks stylt generische Tags per Element-Selektor – hier neutralisiert. */
.gd-page blockquote { font-family: inherit; font-size: inherit; margin: 0; padding-left: 0; border-left: 0; }
.gd-page blockquote cite { font-family: inherit; text-transform: none; opacity: 1; font-size: inherit; }
.gd-page figure { margin: 0; }
.gd-page figcaption { text-align: left; }

/* --------------------------------------------------------------------------
   4. Layout-Wrapper (Section › Container › Block)
   Bricks-Basis-Styles der Layout-Module neutralisieren.
   -------------------------------------------------------------------------- */
.gd-sec {
  display: block;
  width: 100%;
  padding: 0;
}
.gd-inner {
  display: block;
  width: 100%;            /* entscheidend – sonst shrink-to-fit im Flex-Parent */
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--gd-pad-x);
}
.gd-inner--flush { padding-inline: 0; }

/* Vertikale Sektionsabstände – exakt nach Handoff */
.gd-sec--leistungen   { padding-block: clamp(24px, 3vw, 34px) 0; }
.gd-sec--marken       { padding-block: clamp(46px, 5.5vw, 68px) clamp(30px, 4vw, 44px); background: var(--gd-weiss); }
.gd-sec--marken-panel { background: var(--gd-panel); border-top: 1px solid var(--gd-rahmen); border-bottom: 1px solid var(--gd-rahmen); }
.gd-sec--marken-schluss { padding-bottom: clamp(34px, 4vw, 48px); }
.gd-sec--cta-home     { padding-block: 0 clamp(46px, 5.5vw, 68px); }
.gd-sec--anfrage      { padding-block: clamp(28px, 3.5vw, 40px) 0; }
.gd-sec--bierstile    { padding-block: clamp(28px, 3.5vw, 40px) 0; }
.gd-sec--gebinde      { padding-block: clamp(20px, 2.5vw, 28px) 0; }
.gd-sec--cta-kontakt  { padding-block: clamp(28px, 3.5vw, 40px) clamp(46px, 5.5vw, 68px); }
.gd-sec--recht        { padding-block: clamp(40px, 6vw, 64px) clamp(48px, 6vw, 72px); }

/* --------------------------------------------------------------------------
   5. Buttons
   Orange ist reine Akzentfarbe – keine Flächenbuttons.
   -------------------------------------------------------------------------- */
.gd-page .gd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gd-blau);
  color: var(--gd-weiss);
  border: 0;
  padding: 17px 28px;
  border-radius: 4px;
  font-family: var(--gd-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}
.gd-page .gd-btn:hover,
.gd-page .gd-btn:focus-visible { background: var(--gd-blau-hover); color: var(--gd-weiss); }
.gd-page .gd-btn svg { flex-shrink: 0; }
.gd-page .gd-btn--kompakt { padding: 17px 26px; }
.gd-page .gd-btn--voll {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 17px 22px;
  gap: 11px;
  letter-spacing: 0.08em;
  text-align: center;
}

/* Orangestrich unter Überschriften */
.gd-strich { width: 52px; height: 3px; background: var(--gd-orange); margin-top: 14px; }
.gd-strich--mitte { margin-inline: auto; }
.gd-strich--klein { width: 44px; margin-top: 12px; }
.gd-strich--hero { margin-top: 20px; }

/* Sektionskopf */
.gd-kopf { text-align: center; }
.gd-kopf__titel {
  font-family: var(--gd-head);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: 0.02em;
  color: var(--gd-blau);
  text-transform: uppercase;
}
.gd-kopf--klein .gd-kopf__titel { font-size: clamp(20px, 2.4vw, 25px); }

/* --------------------------------------------------------------------------
   6. Header (sticky, einzeilig, gestaffeltes Wegklappen)
   -------------------------------------------------------------------------- */
#brx-header { position: sticky; top: 0; z-index: 50; }

.gd-header {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  padding: 14px clamp(16px, 3vw, 48px);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gd-rahmen);
}
/* Logo + Claim sind eine Einheit und werden nie getrennt oder unterschiedlich
   weit auseinandergezogen. */
.gd-logo-lockup {
  display: flex;
  align-items: center;
  gap: var(--gd-logo-gap);
  flex-shrink: 0;
}

.gd-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--gd-blau);
  border-radius: 9px;
  padding: 9px 15px;
  line-height: 1;
  flex-shrink: 0;
}
.gd-logo__zeile {
  font-family: var(--gd-head);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.015em;
  color: var(--gd-weiss);
}
.gd-page .gd-logo:hover .gd-logo__zeile { color: var(--gd-weiss); }
.gd-logo__bild { display: block; height: 46px; width: auto; }

.gd-claim {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--gd-head);
  font-weight: 800;
  /* Der Claim wird nie ausgeblendet, sondern skaliert mit – sonst passt die
     Leiste in mittleren Breiten nicht mehr einzeilig. */
  font-size: clamp(12px, 1.35vw, 19px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gd-claim__oben { color: var(--gd-blau); }
.gd-claim__unten { color: var(--gd-orange); }

.gd-header__rechts {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 26px);
  justify-content: flex-end;
  margin-left: auto;
  width: auto;              /* Bricks-Block-Default width:100% zurücksetzen */
}
.gd-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 34px);
  white-space: nowrap;
  font-family: var(--gd-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.gd-page .gd-nav__link {
  color: var(--gd-text-2);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.gd-page .gd-nav__link:hover { color: var(--gd-blau); }
.gd-page .gd-nav__link.is-aktiv { color: var(--gd-blau); border-bottom-color: var(--gd-orange); }

.gd-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gd-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.gd-lang__aktiv { color: var(--gd-blau); padding: 5px 8px; border-radius: 3px; background: var(--gd-pill-bg); }
.gd-page .gd-lang__link { color: var(--gd-pill-inaktiv); padding: 5px 8px; }
.gd-page .gd-lang__link:hover { color: var(--gd-blau); }

.gd-page .gd-header__cta {
  display: flex;
  padding: 13px 20px;
  font-size: 12.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Einzige Media Queries im Design: gestaffeltes Wegklappen der Kopfleiste */
/* Gestaffeltes Wegklappen – der Claim gehört zur Wortmarke und bleibt als
   Einziges immer stehen. Reihenfolge daher: Sprachpille, Navigation,
   Button-Beschriftung. */
/* Der Sprachumschalter bleibt auf allen Breiten erreichbar – ohne Burger-Menü
   ist er sonst mobil gar nicht bedienbar. Platz schafft stattdessen die
   Navigation, die früher wegklappt, und die Button-Beschriftung. */
@media (max-width: 1000px) {
  [data-hdr="nav"] { gap: 20px; font-size: 12px; }
}
@media (max-width: 860px) {
  [data-hdr="nav"] { display: none; }
}
@media (max-width: 620px) {
  /* Ab hier trägt der Button nur noch das Icon – der Platz geht an den
     Sprachumschalter, der ohne Burger-Menü sonst mobil unerreichbar wäre. */
  [data-hdr="cta-label"] { display: none; }
  .gd-page [data-hdr="cta"] { padding: 13px 15px; }
}
@media (max-width: 460px) {
  [data-hdr="logo"] { font-size: 20px; }
}
/* Kleinste Geräte: Logo, Claim und Umschalter rücken zusammen, statt dass
   einer davon wegfällt. */
@media (max-width: 360px) {
  .gd-header { gap: 10px; padding-inline: 12px; }
  .gd-header__rechts { gap: 8px; }
  .gd-logo { padding: 8px 11px; }
  [data-hdr="logo"] { font-size: 18px; }
  .gd-claim { font-size: 11px; }
  .gd-lang { gap: 4px; font-size: 11px; }
  .gd-lang__aktiv, .gd-page .gd-lang__link { padding: 4px 6px; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.gd-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--gd-linie);
  min-height: clamp(400px, 46vw, 560px);
}
.gd-hero--kompakt { min-height: clamp(340px, 42vw, 470px); }

/* Oberhalb der Designbreite wächst der Hero mit: Die Höhe folgt ab hier dem
   Seitenverhältnis von 1440px, wodurch der Bildausschnitt konstant bleibt.
   Ohne das deckelt die min-height bei 560px, während die Box immer breiter
   wird – object-fit:cover schneidet dann oben und unten immer mehr weg
   (bei 1920px knapp die Hälfte der Bildhöhe, bei 2560px fast zwei Drittel).
   Die max-height ist an die Fensterhöhe gekoppelt, nicht an einen festen
   Pixelwert: So bleibt der Ausschnitt auf üblichen Breitbildschirmen konstant
   und der Hero wird trotzdem nie höher als der sichtbare Bereich. */
@media (min-width: 1440px) {
  .gd-hero {
    /* width:100% ist nötig: Greift die max-height, leitet der Browser aus dem
       Seitenverhältnis sonst die BREITE aus der gedeckelten Höhe ab und der
       Hero wird schmaler als die Seite. */
    width: 100%;
    aspect-ratio: 1440 / 560;
    max-height: 88vh;
  }

  .gd-hero--kompakt {
    aspect-ratio: 1440 / 470;
    max-height: 80vh;
  }
}
.gd-hero__bild { position: absolute; inset: 0; }
.gd-hero__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Steuert, welcher Teil erhalten bleibt, wenn cover das Motiv beschneidet. */
.gd-hero__bild--unten img { object-position: center bottom; }
.gd-hero__bild--oben img  { object-position: center top; }
.gd-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 34%, rgba(255,255,255,0) 66%);
  pointer-events: none;
}
.gd-hero--kompakt .gd-hero__scrim {
  background: linear-gradient(100deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.92) 40%, rgba(255,255,255,0) 74%);
}

/* Der diagonale Verlauf des Designs setzt eine breite Bühne voraus: Text links,
   Motiv rechts. Auf schmalen Schirmen liegt der Text mitten im Bild – gemessener
   Kontrast bis herunter auf 1,1:1 (nötig sind 4,5:1). Statt das Motiv unter
   einem Schleier zu begraben, wird der Hero gestapelt: Text auf hellem Grund,
   darunter das Bild in voller Breite und unberührt.

   Die Umschaltung liegt bei 1080px, weil der Verlauf des Designs erst ab rund
   1100px genug Deckung liefert (gemessen: 4,5:1 wird bei 1024px knapp verfehlt,
   ab 1100px sicher erreicht). So gibt es nur zwei Zustände – gestapelt oder
   der originale Verlauf – und keinen zusätzlichen Schleier dazwischen. */
@media (max-width: 1080px) {
  .gd-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    aspect-ratio: auto;
    background: var(--gd-weiss);
  }

  .gd-hero__inhalt {
    order: 1;
    padding: clamp(28px, 7vw, 44px) var(--gd-pad-x) clamp(22px, 5vw, 32px);
    max-width: 100%;
  }

  .gd-hero__bild {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(230px, 58vw, 360px);
  }

  .gd-hero__scrim { display: none; }
}

.gd-hero__inhalt {
  position: relative;
  padding: clamp(44px, 6vw, 76px) var(--gd-pad-x);
  max-width: min(560px, 100%);
  pointer-events: none;
}
.gd-hero--kompakt .gd-hero__inhalt { padding-block: clamp(40px, 6vw, 68px); }
.gd-hero__titel {
  font-family: var(--gd-head);
  font-weight: 800;
  font-size: clamp(36px, 5.6vw, 68px);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.gd-hero--kompakt .gd-hero__titel { font-size: clamp(32px, 4.8vw, 56px); line-height: 1.03; }
.gd-hero__zeile-1 { color: var(--gd-blau); display: block; }
.gd-hero__zeile-2 { color: var(--gd-orange); display: block; }
.gd-hero__text {
  margin-top: 26px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--gd-text);
  max-width: 400px;
  text-wrap: pretty;
}
.gd-hero--kompakt .gd-hero__text { margin-top: 22px; font-size: 18px; max-width: 420px; }
.gd-page .gd-hero__btn { margin-top: 32px; pointer-events: auto; }
.gd-hero--kompakt .gd-hero__btn { margin-top: 30px; }

/* --------------------------------------------------------------------------
   Kennzeichnung KI-generierter Bilder
   Liegt unten rechts IM Bild und ist dauerhaft sichtbar. Muss über dem
   Hero-Scrim liegen, sonst verblasst es unter dem weißen Verlauf. Der leichte
   Schatten hält die schwarze Pille auch auf dunklen Motiven ablesbar.
   -------------------------------------------------------------------------- */
.gd-page .gd-ki-label {
  position: absolute;
  /* Dichter in die Ecke gerückt, damit die Kennzeichnung nicht ins Motiv
     hineinragt – sichtbar bleibt sie dadurch unverändert. */
  right: clamp(6px, 0.7vw, 10px);
  bottom: clamp(6px, 0.7vw, 10px);
  z-index: 3;
  width: auto;
  height: clamp(38px, 3.4vw, 44px);
  max-width: 40%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Platzhalter für noch fehlende Bilder */
.gd-bild-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--gd-ph-flaeche);
  border: 1px dashed var(--gd-rahmen-ph);
  border-radius: 4px;
  font-family: var(--gd-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--gd-placeholder);
  text-transform: uppercase;
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. Leistungen – verschachtelte Grids, Trennlinien über gap:1px
   -------------------------------------------------------------------------- */
.gd-leistungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 1px;
  background: var(--gd-rahmen-2);
  border: 1px solid var(--gd-rahmen);
  border-radius: 6px;
  overflow: hidden;
}
.gd-leistungen__gruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px;
  background: var(--gd-rahmen-2);
}
.gd-leistung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 38px 28px;
  text-align: center;
  background: var(--gd-panel);
}
.gd-leistung__titel {
  font-family: var(--gd-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.07em;
  color: var(--gd-blau);
  text-transform: uppercase;
}
.gd-leistung__strich { width: 26px; height: 2px; background: var(--gd-orange); }

/* Variante Kontaktseite: weiße Karten auf hellen Linien, Text statt Strich */
.gd-leistungen--text { background: var(--gd-linie); box-shadow: 0 1px 2px rgba(18, 49, 95, 0.04); }
.gd-leistungen--text .gd-leistungen__gruppe { background: var(--gd-linie); }
.gd-leistungen--text .gd-leistung { background: var(--gd-weiss); gap: 14px; padding: 34px 26px; }
.gd-leistung__text { font-size: 14.5px; line-height: 1.55; color: var(--gd-text-3); }

/* --------------------------------------------------------------------------
   9. Markenbereiche – Hauptmarken-Kacheln + CSS-only Marquee
   -------------------------------------------------------------------------- */
.gd-marken__kacheln {
  /* Kachelhöhe als Variable: die Bildbegrenzung unten greift denselben Wert in
     absoluten Einheiten ab. max-height:100% wäre eine Prozentangabe, deren
     Auflösung gegen eine clamp()-Höhe je nach Engine und Ladezeitpunkt kippen
     kann – dann sprengt das Logo die Kachel. */
  --gd-kachel-h: clamp(96px, 24vw, 132px);
  /* Obergrenze der Kachelbreite – 209px ist der Designwert bei 1440px.
     Sie greift NUR bei drei und zwei Spalten: dort würden die Kacheln sonst
     auf 360px gedehnt und die Logos entsprechend groß. In der Sechserreihe
     dürfen die Kacheln mitwachsen. */
  --gd-kachel-b: 209px;

  display: grid;
  /* Feste Spaltenzahlen statt auto-fit: bei sechs Kacheln erzeugen 4 oder 5
     Spalten eine Restzeile mit 2 bzw. 1 Kachel. Erlaubt sind deshalb nur
     Teiler von 6 – sechs, drei, zwei. Die Umbruchpunkte liegen dort, wo die
     Kachel sonst unter die gestalteten ~170px fiele. */
  grid-template-columns: repeat(6, 1fr);
  justify-content: center;
  gap: 18px;
  margin-top: 38px;
}

@media (max-width: 1200px) {
  .gd-marken__kacheln { grid-template-columns: repeat(3, minmax(0, var(--gd-kachel-b))); }
}

@media (max-width: 600px) {
  .gd-marken__kacheln { grid-template-columns: repeat(2, minmax(0, var(--gd-kachel-b))); }
}
.gd-tile {
  overflow: hidden;   /* letzte Sicherung: nichts verlässt je die Kachel */
  /* Das Design rechnet content-box (Browser-Default); WordPress setzt global
     border-box. Ohne diesen Reset wird die Kachel 38px flacher als gestaltet:
     132px Inhalt + 2×18px Padding + 2×1px Rahmen = 170px. */
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  padding: 18px;
  background: var(--gd-weiss);
  border: 1px solid var(--gd-rahmen);
  border-radius: 5px;
}
.gd-tile img {
  max-width: 100%;
  max-height: var(--gd-kachel-h, 132px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.gd-tile__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--gd-rahmen-ph);
  border-radius: 4px;
  background: var(--gd-ph-flaeche);
  font-family: var(--gd-head);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gd-placeholder);
  text-transform: uppercase;
  text-align: center;
}

.gd-marquee {
  /* Normierung aller Slider-Elemente an einer Stelle. Handoff-Basis war
     60px/170px; auf Kundenwunsch 10% größer. Die Gap (56px) bleibt unberührt –
     an ihr hängt der -28px-Ausgleich der Keyframes. */
  --gd-slider-h: 66px;
  --gd-slider-w: 187px;
  overflow: hidden;
  margin-top: 30px;
  padding: 8px 0;
  border-top: 1px solid var(--gd-linie);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.gd-marquee--panel { border-top-color: var(--gd-rahmen-2); }
.gd-marquee--solo { margin-top: 34px; padding: 10px 0; border-top: 0; }
.gd-marquee__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: gd-marquee-right 78s linear infinite;
}
.gd-marquee__track--links { animation-name: gd-marquee-left; }
.gd-marquee__track--d60  { animation-duration: 60s; }
.gd-marquee__track--d70  { animation-duration: 70s; }
.gd-marquee__track--d78  { animation-duration: 78s; }
.gd-marquee__track--d88  { animation-duration: 88s; }
.gd-marquee__track--d100 { animation-duration: 100s; }
/* Längere Laufzeiten für lange Markenlisten: das Tempo ergibt sich aus
   Streckenlänge ÷ Laufzeit – mehr Logos brauchen also mehr Sekunden, sonst
   rast der Slider. Zielwert ist das ruhige Tempo des Designs (~32 px/s). */
.gd-marquee__track--d120 { animation-duration: 120s; }
.gd-marquee__track--d150 { animation-duration: 150s; }
.gd-marquee__track--d170 { animation-duration: 170s; }
.gd-marquee__track--d200 { animation-duration: 200s; }
.gd-marquee__track--d250 { animation-duration: 250s; }
.gd-marquee__track--d300 { animation-duration: 300s; }
/* Ruhendes Band: zu wenige Logos für einen Lauf. Ohne Animation ist die Strecke
   nicht mehr breiter als der Container – deshalb entfallen max-content und die
   seitliche Maske (die sonst die äußeren Logos anschneidet), und die Reihe wird
   zentriert. Auf schmalen Breiten darf sie umbrechen. */
.gd-marquee--statisch {
  /* Weingüter führen hochformatige Embleme statt breiter Schriftzüge. Die
     66px des laufenden Bandes sind für die Höhe gedacht und lassen ein
     quadratisches Logo auf ~66px Breite schrumpfen – unleserlich. Das ruhende
     Band nutzt die freie Breite und darf deutlich größer werden. */
  --gd-slider-h: clamp(72px, 6.5vw, 104px);
  --gd-slider-w: clamp(150px, 15vw, 260px);
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.gd-marquee--statisch .gd-marquee__track {
  /* Spaltenzahl explizit statt Umbruch nach Restplatz: frei umbrechend ergab
     bei 600px ein 4+1 mit einzelnem Logo in der zweiten Zeile. 5 / 3 / 2. */
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  justify-items: center;
  align-items: center;
  width: auto;
  gap: clamp(26px, 4.5vw, 56px);
  animation: none;
}
@media (max-width: 860px) {
  .gd-marquee--statisch .gd-marquee__track { grid-template-columns: repeat(3, auto); }
}
@media (max-width: 460px) {
  .gd-marquee--statisch .gd-marquee__track { grid-template-columns: repeat(2, auto); }
}
.gd-marquee__track img {
  height: var(--gd-slider-h);
  width: auto;
  max-width: var(--gd-slider-w);
  object-fit: contain;
  display: block;
  opacity: 0.9;
}
.gd-marquee__ph {
  box-sizing: content-box;   /* wie die Kachel: Maße plus Rahmen */
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--gd-slider-h);
  width: var(--gd-slider-w);
  flex: 0 0 var(--gd-slider-w);
  border: 1px dashed var(--gd-rahmen-ph);
  border-radius: 4px;
  background: var(--gd-ph-flaeche);
  font-family: var(--gd-head);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gd-placeholder);
  text-transform: uppercase;
  text-align: center;
}

/* -28px = halbe Gap; ohne Ausgleich springt der Loop pro Zyklus sichtbar. */
@keyframes gd-marquee-left  { from { transform: translateX(0); }                    to { transform: translateX(calc(-50% - 28px)); } }
@keyframes gd-marquee-right { from { transform: translateX(calc(-50% - 28px)); }    to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  [data-marquee] { animation: none !important; }
}

.gd-marken__schluss {
  margin-top: 26px;
  text-align: center;
  font-size: 15px;
  color: var(--gd-text-3);
}

/* Mobil: unter ~398px reicht die Breite für die zweite Spalte nicht mehr, das
   Design fällt auf EINE – die Kachel wird zum 335×132-Briefkasten. Darum dort
   zwei feste Spalten mit engerem Raster. Oberhalb greift wieder auto-fit, die
   Spaltenzahl bleibt also exakt wie gestaltet. */
@media (max-width: 400px) {
  .gd-marken__kacheln { gap: 12px; }
  .gd-tile { padding: 12px; }
}
/* Die Kachelhöhe schrumpft auf schmalen Geräten mit, sonst nimmt ein
   quadratisches Logo (Paulaner) fast die ganze Kachelfläche ein.
   Ab 550px aufwärts sind es unverändert die gestalteten 132px. */
.gd-tile { height: var(--gd-kachel-h, 132px); }

/* --------------------------------------------------------------------------
   10. CTA-Panel
   -------------------------------------------------------------------------- */
.gd-cta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  background: var(--gd-panel);
  border: 1px solid var(--gd-rahmen);
  border-radius: 6px;
  overflow: hidden;
  align-items: stretch;
}
 /* Die Zeilenhöhe des Panels richtet sich nach der Textspalte. Sobald der Text
    auf großen Schirmen nicht mehr umbricht, bleibt die Höhe stehen, während die
    Bildspalte weiter wächst – das Bild wird flach (bei 1920px 2,9:1, bei 3440px
    5,4:1). Eine mitwachsende Mindesthöhe hält es bei ~2:1. Bis 1440px greift
    sie nicht, dort bestimmt weiterhin der Text die Höhe wie im Design. */
.gd-cta__bild { position: relative; min-height: clamp(260px, 26vw, 620px); }
/* :not() – sonst greift die Regel auch auf das KI-Label im selben Container
   und bläht es auf Bildgröße auf. */
.gd-cta__bild img:not(.gd-ki-label) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-cta--hoch .gd-cta__bild { min-height: clamp(270px, 26vw, 620px); }
.gd-cta__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: clamp(28px, 4vw, 46px);
}
.gd-cta--gestapelt .gd-cta__inhalt {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 20px;
}
.gd-cta__text { max-width: 400px; }
.gd-cta--gestapelt .gd-cta__text { max-width: 100%; }
.gd-cta__titel {
  font-family: var(--gd-head);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 29px);
  line-height: 1.18;
  color: var(--gd-blau);
  text-transform: uppercase;
}
.gd-akzent { color: var(--gd-orange); }
.gd-cta__strich { width: 44px; height: 3px; background: var(--gd-orange); margin-top: 16px; }
.gd-cta__absatz { margin-top: 18px; font-size: 16px; line-height: 1.62; color: var(--gd-text-2); }
.gd-cta--gestapelt .gd-cta__absatz { max-width: 440px; }
/* Nur die gestapelte Variante (Kontaktseite) setzt den Button nach oben; in
   der nebeneinander-Variante zentriert ihn align-items:center wie im Design.
   Fällt erst bei hohen Zeilen auf – auf breiten Schirmen sonst oben rechts. */
.gd-page .gd-cta__btn { flex-shrink: 0; }
.gd-page .gd-cta--gestapelt .gd-cta__btn { align-self: flex-start; }

/* --------------------------------------------------------------------------
   11. Anfrage + Lieferantenportal
   -------------------------------------------------------------------------- */
.gd-anfrage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  width: 100%;
}
.gd-karte {
  background: var(--gd-weiss);
  border: 1px solid var(--gd-rahmen);
  border-radius: 6px;
  padding: clamp(22px, 3vw, 36px);
}
.gd-karte--panel { background: var(--gd-panel); }
.gd-karte__titel {
  font-family: var(--gd-head);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 25px);
  letter-spacing: 0.02em;
  color: var(--gd-blau);
  text-transform: uppercase;
}

.gd-portal__intro { margin-top: 22px; font-size: 16px; line-height: 1.65; color: var(--gd-text-2); }
.gd-portal__liste { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.gd-portal__punkt { display: flex; gap: 16px; align-items: flex-start; }
.gd-portal__punkt > svg { flex-shrink: 0; margin-top: 2px; }
.gd-portal__titel {
  font-family: var(--gd-head);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  color: var(--gd-blau);
  text-transform: uppercase;
}
.gd-portal__text { margin-top: 7px; font-size: 15px; line-height: 1.6; color: var(--gd-text-3); }
.gd-page .gd-portal__btn { margin-top: 30px; }

/* DSGVO-Zeile unter dem Formular – bleibt Theme-Markup */
.gd-dsgvo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  font-size: 13px;
  color: var(--gd-text-4);
}
.gd-dsgvo svg { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   12. Icon-Raster (Bierstile / Gebinde)
   -------------------------------------------------------------------------- */
.gd-raster-karte {
  background: var(--gd-weiss);
  border: 1px solid var(--gd-rahmen);
  border-radius: 6px;
  padding: clamp(24px, 3vw, 34px) clamp(16px, 2.5vw, 30px);
}
.gd-raster-karte--panel { background: var(--gd-panel); }
.gd-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr));
  gap: 12px;
  margin-top: 26px;
}
.gd-raster--eng { grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr)); gap: 10px; }
.gd-raster__karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  background: var(--gd-weiss);
  border: 1px solid var(--gd-rahmen);
  border-radius: 4px;
  padding: 18px 6px;
}
.gd-raster__label {
  font-family: var(--gd-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gd-blau);
  text-transform: uppercase;
}
.gd-raster--eng .gd-raster__label { line-height: 1.4; letter-spacing: 0.04em; text-align: center; }
.gd-raster__hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 15px;
  color: var(--gd-text-3);
  text-align: center;
}
.gd-raster__hinweis svg { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.gd-footer {
  background: var(--gd-footer-bg);
  color: var(--gd-footer-text);
  padding: clamp(34px, 4vw, 46px) var(--gd-pad-x) 24px;
}
.gd-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 1px;
  background: var(--gd-footer-linie);
}
.gd-footer__gruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: 1px;
  background: var(--gd-footer-linie);
}
.gd-footer__block { padding: 2px 26px; background: var(--gd-footer-bg); }
.gd-footer__block--marke { padding-left: 0; }
.gd-footer__logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--gd-weiss);
  border-radius: 9px;
  padding: 10px 16px;
  line-height: 1;
  width: max-content;
}
.gd-footer__logo-zeile {
  font-family: var(--gd-head);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--gd-blau);
}
.gd-footer__claim {
  font-family: var(--gd-head);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.gd-footer__claim-oben { color: var(--gd-weiss); }
.gd-footer__claim-unten { color: var(--gd-orange); }
.gd-footer__label {
  font-family: var(--gd-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gd-weiss);
  text-transform: uppercase;
}
.gd-footer__wert { margin-top: 12px; font-size: 15px; line-height: 1.75; }
.gd-footer__kontakt { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; font-size: 15px; }
.gd-footer__zeile { display: flex; align-items: center; gap: 10px; }
.gd-footer__zeile svg { flex-shrink: 0; }
.gd-page .gd-footer a { color: var(--gd-footer-text); }
.gd-page .gd-footer a:hover { color: var(--gd-orange); }
.gd-tabnum { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
/* Höhere Spezifität als der generische Footer-Link, sonst schlägt der durch. */
.gd-page .gd-footer a.gd-footer__web { color: var(--gd-orange); font-weight: 600; }
.gd-page .gd-footer a.gd-footer__web:hover { color: var(--gd-weiss); }
.gd-footer__fuss {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--gd-footer-linie);
  font-size: 13px;
  color: var(--gd-footer-dim);
}
.gd-footer__rechtslinks { display: flex; gap: 26px; flex-wrap: wrap; }
.gd-page .gd-footer__fuss a { color: var(--gd-footer-dim); }
.gd-page .gd-footer__fuss a:hover { color: var(--gd-orange); }

/* Mobil: sobald das Raster umbricht, sitzt das seitliche Blockpadding (26px)
   quer zur Leserichtung – die Blöcke stehen dann gegen den Logoblock
   eingerückt, und die 1px-Trennlinien kleben ohne Luft an den Texten.
   Unter 900px steht links alles bündig an der Containerkante, die Einrückung
   bekommt nur die rechte Spalte; unter 470px stapelt ohnehin alles. */
@media (max-width: 900px) {
  .gd-footer__block { padding: 16px 0 16px 24px; }
  .gd-footer__gruppe > .gd-footer__block:first-child { padding-left: 0; }
}
@media (max-width: 470px) {
  .gd-footer__block { padding: 16px 0; }
  .gd-footer__fuss { gap: 8px 26px; margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   14. Rechtsseiten
   -------------------------------------------------------------------------- */
.gd-recht__titel {
  font-family: var(--gd-head);
  font-weight: 800;
  font-size: clamp(32px, 4.8vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--gd-blau);
  text-transform: uppercase;
}
.gd-recht {
  display: flex;
  flex-direction: column;
  gap: 34px;
  max-width: min(760px, 100%);
  margin-top: clamp(30px, 4vw, 42px);
}
.gd-recht__abschnitt { display: flex; flex-direction: column; gap: 13px; }
.gd-recht h2 {
  font-family: var(--gd-head);
  font-weight: 700;
  font-size: clamp(17px, 2.1vw, 21px);
  letter-spacing: 0.04em;
  color: var(--gd-blau);
  text-transform: uppercase;
}
.gd-recht p { font-size: 17px; line-height: 1.72; color: var(--gd-text); text-wrap: pretty; }
.gd-daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px 32px;
  background: var(--gd-panel);
  border: 1px solid var(--gd-rahmen);
  border-radius: 6px;
  padding: clamp(22px, 3vw, 32px);
}
.gd-daten__label {
  font-family: var(--gd-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gd-text-5);
  text-transform: uppercase;
}
.gd-daten__wert { margin-top: 7px; font-size: 16px; line-height: 1.6; color: var(--gd-blau); }
.gd-num { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   15. WPForms – Optik komplett über Theme-Klassen
   WPForms-CSS gewinnt je nach Ladereihenfolge, daher gezielt !important.
   -------------------------------------------------------------------------- */
.gd-formular { margin-top: 28px; }
.gd-page .gd-formular .wpforms-container { margin: 0 !important; }
.gd-page .gd-formular .wpforms-form { display: flex; flex-direction: column; gap: 20px; }
.gd-page .gd-formular .wpforms-field { padding: 0 !important; margin: 0 !important; }
.gd-page .gd-formular .wpforms-field-container { display: flex; flex-direction: column; gap: 20px; }

/* Layout-Feld: Zeile 1 dreispaltig, Zeile 2 zweispaltig – fluid statt fixer Prozente */
.gd-page .gd-formular .wpforms-field-layout-columns {
  display: grid !important;
  margin: 0 !important;   /* WPForms setzt -10px Gutter-Ränder */
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  gap: 18px !important;
}
.gd-page .gd-formular .wpforms-field-layout-preset-50-50 {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)) !important;
}
.gd-page .gd-formular .wpforms-layout-column {
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gd-page .gd-formular .wpforms-layout-column .wpforms-field { width: 100% !important; }

.gd-page .gd-formular .wpforms-field-label {
  display: block;
  margin: 0 0 8px !important;
  font-family: var(--gd-head) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: normal !important;
  color: var(--gd-blau) !important;
  text-transform: none !important;
}
.gd-page .gd-formular .wpforms-required-label {
  color: var(--gd-fehler) !important;
  font-weight: inherit !important;   /* Stern in derselben Stärke wie das Label */
}
/* Als versteckt markierte Feldüberschriften bleiben versteckt – die Regel für
   .wpforms-field-label oben würde sie sonst wieder sichtbar machen (betrifft
   die Layout-Zeilen und die Einwilligung). */
.gd-page .gd-formular .wpforms-field-label.wpforms-label-hide,
.gd-page .gd-formular .wpforms-field-layout > .wpforms-field-label { display: none !important; }
.gd-page .gd-formular .wpforms-field-sublabel,
.gd-page .gd-formular .wpforms-field-description { font-size: 13px; color: var(--gd-text-4); }

.gd-page .gd-formular input[type="text"],
.gd-page .gd-formular input[type="email"],
.gd-page .gd-formular input[type="tel"],
.gd-page .gd-formular select,
.gd-page .gd-formular textarea {
  width: 100% !important;
  max-width: 100% !important;
  height: 46px;
  padding: 0 14px !important;
  background: var(--gd-weiss) !important;
  border: 1px solid var(--gd-rahmen-input) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--gd-body) !important;
  font-size: 15px !important;
  color: var(--gd-blau) !important;
}
.gd-page .gd-formular select { padding: 0 12px !important; color: var(--gd-text-2) !important; }
.gd-page .gd-formular textarea {
  height: auto;
  min-height: 128px;
  padding: 13px 14px !important;
  line-height: 1.6 !important;
  resize: vertical;
}
.gd-page .gd-formular ::placeholder { color: var(--gd-placeholder); opacity: 1; }
.gd-page .gd-formular input:focus,
.gd-page .gd-formular select:focus,
.gd-page .gd-formular textarea:focus {
  outline: none;
  border-color: var(--gd-orange) !important;
  box-shadow: 0 0 0 3px rgba(237, 127, 28, 0.15) !important;
}

.gd-page .gd-formular .wpforms-submit-container { padding: 0 !important; margin: 0 !important; }
.gd-page .gd-formular button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  gap: 11px;
  background: var(--gd-blau) !important;
  color: var(--gd-weiss) !important;
  border: 0 !important;
  padding: 16px 26px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--gd-head) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.09em !important;
  line-height: normal !important;
  text-transform: uppercase !important;
  cursor: pointer;
}
.gd-page .gd-formular button[type="submit"]:hover { background: var(--gd-blau-hover) !important; }
/* Papierflieger-Icon links im Submit */
.gd-page .gd-formular button[type="submit"]::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--gd-icon-flieger) center / contain no-repeat;
  mask: var(--gd-icon-flieger) center / contain no-repeat;
}
:root {
  --gd-icon-flieger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M21.4 2.6L2.8 10.2l6.6 2.6 2.6 6.6z'/%3E%3Cpath d='M21.4 2.6L9.4 12.8'/%3E%3C/svg%3E");
  --gd-icon-schloss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

.gd-page .gd-formular .wpforms-error,
.gd-page .gd-formular label.wpforms-error {
  color: var(--gd-fehler) !important;
  font-size: 13px !important;
  margin-top: 6px;
}
.gd-page .gd-formular input.wpforms-error,
.gd-page .gd-formular select.wpforms-error,
.gd-page .gd-formular textarea.wpforms-error { border-color: var(--gd-fehler) !important; }

/* Einwilligungs-Checkbox – Optik wie die Datenschutzzeile darunter */
.gd-page .gd-formular .wpforms-field-gdpr-checkbox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gd-page .gd-formular .wpforms-field-gdpr-checkbox li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gd-page .gd-formular .wpforms-field-gdpr-checkbox input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--gd-blau);
  border: 1px solid var(--gd-rahmen-input);
  border-radius: 3px;
  cursor: pointer;
}
.gd-page .gd-formular .wpforms-field-gdpr-checkbox .wpforms-field-label-inline {
  margin: 0 !important;
  font-family: var(--gd-body) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--gd-text-4) !important;
  text-transform: none !important;
  cursor: pointer;
}
.gd-page .gd-formular .wpforms-field-gdpr-checkbox a { color: var(--gd-blau); text-decoration: underline; }
.gd-page .gd-formular .wpforms-field-gdpr-checkbox a:hover { color: var(--gd-orange); }

/* Bestätigung ersetzt die Datenschutzzeile an derselben Stelle:
   gleiche Zeile, gleiches Schloss-Icon, Archivo 600 / #12315F. */
.gd-page .gd-formular .wpforms-confirmation-container-full,
.gd-page .gd-formular .wpforms-confirmation-container {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--gd-head) !important;
  font-weight: 600;
  font-size: 13px;
  color: var(--gd-blau) !important;
}
.gd-page .gd-formular .wpforms-confirmation-container-full::before,
.gd-page .gd-formular .wpforms-confirmation-container::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: var(--gd-text-4);
  -webkit-mask: var(--gd-icon-schloss) center / contain no-repeat;
  mask: var(--gd-icon-schloss) center / contain no-repeat;
}
.gd-page .gd-formular .wpforms-confirmation-container-full p,
.gd-page .gd-formular .wpforms-confirmation-container p { margin: 0; }

/* … und verdrängt dabei die Theme-Datenschutzzeile. */
.gd-anfrage:has(.wpforms-confirmation-container-full) .gd-dsgvo,
.gd-anfrage:has(.wpforms-confirmation-container) .gd-dsgvo { display: none; }