/* --------------------------------------------------------------------------
   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 {
  --weku-blau:            #193254;
  --weku-blau-hover:      #11233A;
  --weku-orange:          #ED7F1C;

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

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

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

  --weku-footer-bg:       #193254;
  --weku-footer-text:     #D6DEEA;
  --weku-footer-dim:      #93A4BF;
  --weku-footer-linie:    #314769;

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

  --weku-head:            'Archivo', system-ui, sans-serif;
  --weku-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. */
  --weku-logo-gap:        14px;

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

/* --------------------------------------------------------------------------
   3. Basis
   -------------------------------------------------------------------------- */
.weku-page {
  margin: 0;
  background: var(--weku-weiss);
  font-family: var(--weku-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(--weku-text);
  -webkit-font-smoothing: antialiased;
}
.weku-page a { color: var(--weku-blau); text-decoration: none; }
.weku-page a:hover { color: var(--weku-orange); }
.weku-page img { max-width: 100%; }
.weku-page input,
.weku-page select,
.weku-page textarea,
.weku-page button { font-family: inherit; box-sizing: border-box; max-width: 100%; }
.weku-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. */
.weku-page :where(h1, h2, h3, h4, h5, h6) { line-height: normal; }
.weku-page [id] { scroll-margin-top: var(--weku-anker); }

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

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

/* Vertikale Sektionsabstände – exakt nach Handoff */
.weku-sec--leistungen   { padding-block: clamp(24px, 3vw, 34px) 0; }
/* Die Vorteilsleiste sitzt bündig unter dem Hero und läuft über die volle
   Breite – deshalb kein Blockabstand und kein seitlicher Innenabstand. */
.weku-sec--vorteile     { padding-block: 0; background: var(--weku-blau); }
.weku-sec--vorteile .weku-inner { padding-inline: 0; }
.weku-sec--marken       { padding-block: clamp(46px, 5.5vw, 68px) clamp(30px, 4vw, 44px); background: var(--weku-weiss); }
.weku-sec--marken-panel { background: var(--weku-panel); border-top: 1px solid var(--weku-rahmen); border-bottom: 1px solid var(--weku-rahmen); }
.weku-sec--marken-schluss { padding-bottom: clamp(34px, 4vw, 48px); }
.weku-sec--cta-home     { padding-block: 0 clamp(46px, 5.5vw, 68px); }
.weku-sec--anfrage      { padding-block: clamp(28px, 3.5vw, 40px) 0; }
.weku-sec--bierstile    { padding-block: clamp(28px, 3.5vw, 40px) 0; }
.weku-sec--gebinde      { padding-block: clamp(20px, 2.5vw, 28px) 0; }
.weku-sec--cta-kontakt  { padding-block: clamp(28px, 3.5vw, 40px) clamp(46px, 5.5vw, 68px); }
.weku-sec--recht        { padding-block: clamp(40px, 6vw, 64px) clamp(48px, 6vw, 72px); }

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

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

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

/* --------------------------------------------------------------------------
   6. Header: Top-Leiste + Hauptzeile (sticky, einzeilig, gestaffeltes Wegklappen)
   -------------------------------------------------------------------------- */
/* Beide Zeilen kleben gemeinsam: Eine sticky Hauptzeile INNERHALB des
   Header-Wrappers würde nur so lange haften, wie der Wrapper im Bild ist –
   der ist aber nur so hoch wie sein Inhalt. Darum klebt der Wrapper. */
#brx-header { position: sticky; top: 0; z-index: 50; }

/* --- Top-Leiste --- */
.weku-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 32px);
  padding: 0 clamp(16px, 3vw, 48px);
  min-height: 42px;
  background: var(--weku-blau);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--weku-body);
  font-size: 13.5px;
  line-height: 1.2;
}
.weku-topbar__links,
.weku-topbar__rechts {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 28px);
  min-width: 0;
}
.weku-page .weku-topbar__kontakt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}
.weku-page .weku-topbar__kontakt:hover { color: var(--weku-weiss); }
.weku-topbar__kontakt svg { flex-shrink: 0; opacity: 0.85; }

.weku-topbar__claim {
  font-family: var(--weku-head);
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Sprachumschalter (sitzt in der Top-Leiste) --- */
.weku-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--weku-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.weku-lang svg { opacity: 0.8; margin-right: 1px; }
.weku-lang__aktiv {
  color: var(--weku-weiss);
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.weku-page .weku-lang__link {
  color: rgba(255, 255, 255, 0.6);
  padding: 3px 7px;
}
.weku-page .weku-lang__link:hover { color: var(--weku-weiss); }

/* --- Hauptzeile --- */
/* Drei Spalten statt Flex mit auto-Rändern: Wortmarke links, Navigation exakt
   mittig, Button rechts. Mit Flex teilten sich die automatischen Außenabstände
   der Navigation UND des Buttons den freien Platz zu je einem Drittel – die
   Navigation saß dadurch bei 1/3 statt in der Mitte (gemessen bei 1440px:
   206px links, 378px rechts). Die beiden 1fr-Spalten sind immer gleich breit,
   damit sitzt die Mitte unabhängig von den Breiten von Wortmarke und Button. */
.weku-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  padding: 15px clamp(16px, 3vw, 48px);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--weku-rahmen);
}

/* Die Wortmarke ist ein Inline-SVG und nimmt über currentColor exakt den
   Token-Blauton an – keine zweite Datei für die weiße Fassung nötig. */
.weku-page .weku-logo {
  display: flex;
  align-items: center;
  justify-self: start;
  color: var(--weku-blau);
  line-height: 0;
}
.weku-page .weku-logo:hover { color: var(--weku-blau-hover); }
.weku-logo__svg {
  display: block;
  height: clamp(21px, 2.2vw, 28px);
  width: auto;
}
.weku-logo__bild { display: block; height: 40px; width: auto; }

.weku-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.5vw, 36px);
  white-space: nowrap;
  font-family: var(--weku-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.weku-page .weku-nav__link {
  color: var(--weku-text-2);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.weku-page .weku-nav__link:hover { color: var(--weku-blau); }
.weku-page .weku-nav__link.is-aktiv { color: var(--weku-blau); border-bottom-color: var(--weku-orange); }

.weku-page .weku-header__cta {
  display: flex;
  padding: 13px 22px;
  font-size: 12.5px;
  white-space: nowrap;
  /* Rechte Spalte: rechtsbündig, damit der Button an der Kante sitzt. */
  justify-self: end;
}

/* Gestaffeltes Wegklappen. Reihenfolge: Claim, Navigation,
   Button-Beschriftung. Der Sprachumschalter bleibt auf allen Breiten
   erreichbar – ohne Burger-Menü wäre er sonst mobil gar nicht bedienbar. */
@media (max-width: 1100px) {
  [data-hdr="nav"] { gap: 20px; font-size: 12px; }
}
@media (max-width: 940px) {
  [data-hdr="claim"] { display: none; }
}
@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 die
     Kontaktdaten und den Sprachumschalter. */
  [data-hdr="cta-label"] { display: none; }
  .weku-page [data-hdr="cta"] { padding: 13px 15px; }
  .weku-topbar { font-size: 12.5px; }
}
@media (max-width: 520px) {
  /* Die Telefonnummer bleibt, die E-Mail-Adresse ist die längere Zeile.
     Nur OPTISCH ausblenden, nicht per display:none – sonst bliebe vom Link
     nur das Icon übrig und er hätte für Screenreader keinen Namen mehr. */
  .weku-topbar__links .weku-topbar__kontakt:first-child span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .weku-header { gap: 10px; padding-inline: 12px; }
  .weku-topbar { padding-inline: 12px; gap: 8px; }
  .weku-lang { gap: 3px; font-size: 11.5px; }
  .weku-lang__aktiv, .weku-page .weku-lang__link { padding: 3px 5px; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.weku-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--weku-linie);
  min-height: clamp(400px, 46vw, 560px);
}
.weku-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) {
  .weku-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;
  }

  .weku-hero--kompakt {
    aspect-ratio: 1440 / 470;
    max-height: 80vh;
  }
}
.weku-hero__bild { position: absolute; inset: 0; }
.weku-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. */
.weku-hero__bild--unten img { object-position: center bottom; }
.weku-hero__bild--oben img  { object-position: center top; }
.weku-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* --- Heller Schleier: blaue Schrift auf aufgehelltem Motiv --- */
.weku-hero--hell .weku-hero__scrim {
  background: linear-gradient(100deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 34%, rgba(255,255,255,0) 66%);
}
.weku-hero--hell.weku-hero--kompakt .weku-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%);
}

/* --- Dunkler Schleier: weiße Schrift auf dunkelblauer Fläche --- */
/* Die Deckung liegt höher als beim hellen Verlauf: Weiße Schrift auf einem
   hellen Sonnenuntergangsmotiv braucht mehr Fläche, um 4,5:1 zu halten. */
.weku-hero--dunkel { background: var(--weku-blau); }
.weku-hero--dunkel .weku-hero__scrim {
  background: linear-gradient(100deg, rgba(25,50,84,0.97) 0%, rgba(25,50,84,0.93) 38%, rgba(25,50,84,0) 74%);
}
.weku-hero--dunkel.weku-hero--kompakt .weku-hero__scrim {
  background: linear-gradient(100deg, rgba(25,50,84,0.97) 0%, rgba(25,50,84,0.94) 42%, rgba(25,50,84,0) 78%);
}
.weku-hero--dunkel .weku-hero__zeile-1 { color: var(--weku-weiss); }
.weku-hero--dunkel .weku-hero__text { color: rgba(255, 255, 255, 0.84); }
/* Auf Dunkelblau kehrt sich der Button um – blau auf blau wäre unsichtbar. */
.weku-page .weku-hero--dunkel .weku-hero__btn { background: var(--weku-weiss); color: var(--weku-blau); }
.weku-page .weku-hero--dunkel .weku-hero__btn:hover,
.weku-page .weku-hero--dunkel .weku-hero__btn:focus-visible {
  background: rgba(255, 255, 255, 0.86);
  color: var(--weku-blau);
}

/* 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) {
  .weku-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    aspect-ratio: auto;
    background: var(--weku-weiss);
  }

  /* Gestapelt trägt der Textblock die Farbe, nicht mehr der Verlauf. */
  .weku-hero--dunkel { background: var(--weku-blau); }

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

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

  .weku-hero__scrim { display: none; }
}

.weku-hero__inhalt {
  position: relative;
  padding: clamp(44px, 6vw, 76px) var(--weku-pad-x);
  max-width: min(560px, 100%);
  pointer-events: none;
}
.weku-hero--kompakt .weku-hero__inhalt { padding-block: clamp(40px, 6vw, 68px); }
.weku-hero__titel {
  font-family: var(--weku-head);
  font-weight: 800;
  font-size: clamp(36px, 5.6vw, 68px);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.weku-hero--kompakt .weku-hero__titel { font-size: clamp(32px, 4.8vw, 56px); line-height: 1.03; }
.weku-hero__zeile-1 { color: var(--weku-blau); display: block; }
.weku-hero__zeile-2 { color: var(--weku-orange); display: block; }
.weku-hero__text {
  margin-top: 26px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--weku-text);
  max-width: 400px;
  text-wrap: pretty;
}
.weku-hero--kompakt .weku-hero__text { margin-top: 22px; font-size: 18px; max-width: 420px; }
.weku-page .weku-hero__btn { margin-top: 32px; pointer-events: auto; }
.weku-hero--kompakt .weku-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.
   -------------------------------------------------------------------------- */
.weku-page .weku-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 */
.weku-bild-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--weku-ph-flaeche);
  border: 1px dashed var(--weku-rahmen-ph);
  border-radius: 4px;
  font-family: var(--weku-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--weku-placeholder);
  text-transform: uppercase;
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. Leistungen / Vorteile – verschachtelte Grids, Trennlinien über gap:1px
   Drei Varianten: blaue Vollbreiten-Leiste (Startseite), Panel mit
   Orangestrich, weiße Karten mit Fließtext (Kontaktseite).
   -------------------------------------------------------------------------- */
.weku-leistungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 1px;
}
.weku-leistungen__gruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px;
}
.weku-leistung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 38px 28px;
  text-align: center;
}
.weku-leistung__titel {
  font-family: var(--weku-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.07em;
  color: var(--weku-blau);
  text-transform: uppercase;
}
.weku-leistung__strich { width: 26px; height: 2px; background: var(--weku-orange); }

/* --- Variante Startseite: blaue Leiste direkt unter dem Hero --- */
/* Die Trennlinien entstehen wie überall über gap:1px plus Hintergrund des
   Containers – hier eine aufgehellte Fassung des Blautons statt border-right. */
.weku-leistungen--leiste,
.weku-leistungen--leiste .weku-leistungen__gruppe {
  background: rgba(255, 255, 255, 0.17);
}
.weku-leistungen--leiste .weku-leistung {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.4vw, 36px);
  background: var(--weku-blau);
  color: var(--weku-weiss);
}
/* Die Leiste stellt Icon und Text NEBENEINANDER und braucht deshalb breitere
   Spalten als die zentrierten Varianten. Gemessen: Unter ~270px Zellbreite
   läuft „GETRÄNKEGROSSHANDEL" aus der Zelle; 290px lassen Luft.

   Hier stehen die Umbrüche bewusst als feste Punkte statt als zwei gestapelte
   auto-fit-Ebenen wie bei den anderen Varianten. Grund: Bildet die äußere
   Ebene zwei Spalten, die innere aber nur eine, stehen oben die Vorteile 1
   und 3 und darunter 2 und 4 – die Leserichtung springt. Mit festen Punkten
   fallen beide Ebenen zusammen: 4 → 2 → 1, immer in der richtigen Folge.
   Die Trennlinien entstehen unverändert über gap:1px. */
.weku-leistungen--leiste,
.weku-leistungen--leiste .weku-leistungen__gruppe {
  grid-template-columns: 1fr;
}
@media (min-width: 580px) {
  .weku-leistungen--leiste .weku-leistungen__gruppe { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1160px) {
  .weku-leistungen--leiste { grid-template-columns: repeat(2, 1fr); }
}
.weku-leistungen--leiste .weku-leistung > svg { flex-shrink: 0; }
.weku-leistungen--leiste .weku-leistung__titel {
  color: var(--weku-weiss);
  font-size: clamp(12px, 1.05vw, 13.5px);
  line-height: 1.35;
  letter-spacing: 0.06em;
  /* Fangnetz für längere Begriffe: min-width:0 erlaubt dem Flex-Kind
     überhaupt erst zu schrumpfen, hyphens trennt dann sauber statt zu
     überlaufen. Greift nur, wenn das Wort sonst nicht passt. */
  min-width: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* --- Variante Panel + Orangestrich --- */
.weku-leistungen--strich {
  background: var(--weku-rahmen-2);
  border: 1px solid var(--weku-rahmen);
  border-radius: 6px;
  overflow: hidden;
}
.weku-leistungen--strich .weku-leistungen__gruppe { background: var(--weku-rahmen-2); }
.weku-leistungen--strich .weku-leistung { background: var(--weku-panel); }

/* --- Variante Kontaktseite: weiße Karten auf hellen Linien, Text statt Strich --- */
.weku-leistungen--text {
  background: var(--weku-linie);
  border: 1px solid var(--weku-rahmen);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(25, 50, 84, 0.04);
}
.weku-leistungen--text .weku-leistungen__gruppe { background: var(--weku-linie); }
.weku-leistungen--text .weku-leistung { background: var(--weku-weiss); gap: 14px; padding: 34px 26px; }
.weku-leistung__text { font-size: 14.5px; line-height: 1.55; color: var(--weku-text-3); }

/* --------------------------------------------------------------------------
   9. Markenbereiche – Hauptmarken-Kacheln + CSS-only Marquee
   -------------------------------------------------------------------------- */
.weku-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. */
  --weku-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. */
  --weku-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) {
  .weku-marken__kacheln { grid-template-columns: repeat(3, minmax(0, var(--weku-kachel-b))); }
}

@media (max-width: 600px) {
  .weku-marken__kacheln { grid-template-columns: repeat(2, minmax(0, var(--weku-kachel-b))); }
}
.weku-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(--weku-weiss);
  border: 1px solid var(--weku-rahmen);
  border-radius: 5px;
}
.weku-tile img {
  max-width: 100%;
  max-height: var(--weku-kachel-h, 132px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.weku-tile__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--weku-rahmen-ph);
  border-radius: 4px;
  background: var(--weku-ph-flaeche);
  font-family: var(--weku-head);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--weku-placeholder);
  text-transform: uppercase;
  text-align: center;
}

.weku-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. */
  --weku-slider-h: 66px;
  --weku-slider-w: 187px;
  overflow: hidden;
  margin-top: 30px;
  padding: 8px 0;
  border-top: 1px solid var(--weku-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%);
}
.weku-marquee--panel { border-top-color: var(--weku-rahmen-2); }
.weku-marquee--solo { margin-top: 34px; padding: 10px 0; border-top: 0; }
.weku-marquee__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: weku-marquee-right 78s linear infinite;
}
.weku-marquee__track--links { animation-name: weku-marquee-left; }
.weku-marquee__track--d60  { animation-duration: 60s; }
.weku-marquee__track--d70  { animation-duration: 70s; }
.weku-marquee__track--d78  { animation-duration: 78s; }
.weku-marquee__track--d88  { animation-duration: 88s; }
.weku-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). */
.weku-marquee__track--d120 { animation-duration: 120s; }
.weku-marquee__track--d150 { animation-duration: 150s; }
.weku-marquee__track--d170 { animation-duration: 170s; }
.weku-marquee__track--d200 { animation-duration: 200s; }
.weku-marquee__track--d250 { animation-duration: 250s; }
.weku-marquee__track--d300 { animation-duration: 300s; }
/* Größere Logos für hochformatige Embleme (Weingüter). Die Standardhöhe von
   66px ist auf breite Schriftzüge gemünzt; ein quadratisches Emblem schrumpft
   damit auf ~66px Breite und wird unleserlich. */
.weku-marquee--gross {
  --weku-slider-h: clamp(72px, 6.5vw, 104px);
  --weku-slider-w: clamp(150px, 15vw, 260px);
}

/* 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. */
.weku-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. */
  --weku-slider-h: clamp(72px, 6.5vw, 104px);
  --weku-slider-w: clamp(150px, 15vw, 260px);
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.weku-marquee--statisch .weku-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) {
  .weku-marquee--statisch .weku-marquee__track { grid-template-columns: repeat(3, auto); }
}
@media (max-width: 460px) {
  .weku-marquee--statisch .weku-marquee__track { grid-template-columns: repeat(2, auto); }
}
.weku-marquee__track img {
  height: var(--weku-slider-h);
  width: auto;
  max-width: var(--weku-slider-w);
  object-fit: contain;
  display: block;
  opacity: 0.9;
}
.weku-marquee__ph {
  box-sizing: content-box;   /* wie die Kachel: Maße plus Rahmen */
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--weku-slider-h);
  width: var(--weku-slider-w);
  flex: 0 0 var(--weku-slider-w);
  border: 1px dashed var(--weku-rahmen-ph);
  border-radius: 4px;
  background: var(--weku-ph-flaeche);
  font-family: var(--weku-head);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--weku-placeholder);
  text-transform: uppercase;
  text-align: center;
}

/* --- Slider mit Karten: jedes Logo bekommt eine eigene weiße Kachel --- */
.weku-marquee--karten {
  --weku-slider-h: 58px;
  --weku-slider-w: 124px;
  margin-top: 34px;
  padding: 4px 0 6px;
  border-top: 0;
}
.weku-marquee--karten .weku-marquee__karte {
  /* Wie die Hauptmarken-Kachel content-box: Maße plus Innenabstand plus
     Rahmen, damit die Kachelhöhe der gestalteten entspricht. */
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--weku-slider-h);
  width: var(--weku-slider-w);
  flex: 0 0 var(--weku-slider-w);
  padding: 16px 20px;
  background: var(--weku-weiss);
  border: 1px solid var(--weku-rahmen);
  border-radius: 6px;
}
.weku-marquee--karten .weku-marquee__karte img { opacity: 1; }
.weku-marquee--karten .weku-marquee__ph { border: 0; background: none; }
/* Engere Gap als das freie Band – die Kacheln bringen ihren eigenen Weißraum
   mit. Der Ausgleich in den Keyframes ist die halbe Gap und muss deshalb
   mitgeführt werden, sonst springt der Loop. */
.weku-marquee--karten .weku-marquee__track {
  gap: 24px;
  animation-name: weku-marquee-right-karten;
}
.weku-marquee--karten .weku-marquee__track--links { animation-name: weku-marquee-left-karten; }

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

.weku-marken__schluss {
  margin-top: 26px;
  text-align: center;
  font-size: 15px;
  color: var(--weku-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) {
  .weku-marken__kacheln { gap: 12px; }
  .weku-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. */
.weku-tile { height: var(--weku-kachel-h, 132px); }

/* --------------------------------------------------------------------------
   10. CTA-Panel
   -------------------------------------------------------------------------- */
.weku-cta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  background: var(--weku-panel);
  border: 1px solid var(--weku-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. */
.weku-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. */
.weku-cta__bild img:not(.weku-ki-label) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.weku-cta--hoch .weku-cta__bild { min-height: clamp(270px, 26vw, 620px); }
.weku-cta__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: clamp(28px, 4vw, 46px);
}
.weku-cta--gestapelt .weku-cta__inhalt {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 20px;
}
.weku-cta__text { max-width: 400px; }
.weku-cta--gestapelt .weku-cta__text { max-width: 100%; }
.weku-cta__titel {
  font-family: var(--weku-head);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 29px);
  line-height: 1.18;
  color: var(--weku-blau);
  text-transform: uppercase;
}
.weku-akzent { color: var(--weku-orange); }
.weku-cta__strich { width: 44px; height: 3px; background: var(--weku-orange); margin-top: 16px; }
.weku-cta__absatz { margin-top: 18px; font-size: 16px; line-height: 1.62; color: var(--weku-text-2); }
.weku-cta--gestapelt .weku-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. */
.weku-page .weku-cta__btn { flex-shrink: 0; }
.weku-page .weku-cta--gestapelt .weku-cta__btn { align-self: flex-start; }

/* --------------------------------------------------------------------------
   11. Anfrage + Lieferantenportal
   -------------------------------------------------------------------------- */
.weku-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%;
}
.weku-karte {
  background: var(--weku-weiss);
  border: 1px solid var(--weku-rahmen);
  border-radius: 6px;
  padding: clamp(22px, 3vw, 36px);
}
.weku-karte--panel { background: var(--weku-panel); }
.weku-karte__titel {
  font-family: var(--weku-head);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 25px);
  letter-spacing: 0.02em;
  color: var(--weku-blau);
  text-transform: uppercase;
}

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

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

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

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.weku-footer {
  background: var(--weku-footer-bg);
  color: var(--weku-footer-text);
  padding: clamp(34px, 4vw, 46px) var(--weku-pad-x) 24px;
}
.weku-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 1px;
  background: var(--weku-footer-linie);
}
.weku-footer__gruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: 1px;
  background: var(--weku-footer-linie);
}
.weku-footer__block { padding: 2px 26px; background: var(--weku-footer-bg); }
.weku-footer__block--marke { padding-left: 0; }
/* Marke im Footer: Wortmarke über dem Claim, nicht daneben – im Footer ist
   die Spalte schmaler als die Kopfzeile. */
.weku-footer__marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--weku-logo-gap);
}
.weku-footer__logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 100%;
  color: var(--weku-weiss);
}
.weku-footer__claim {
  font-family: var(--weku-head);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.weku-footer__claim-oben { color: var(--weku-weiss); }
.weku-footer__claim-unten { color: var(--weku-orange); }
.weku-footer__label {
  font-family: var(--weku-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--weku-weiss);
  text-transform: uppercase;
}
.weku-footer__wert { margin-top: 12px; font-size: 15px; line-height: 1.75; }
.weku-footer__kontakt { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; font-size: 15px; }
.weku-footer__zeile { display: flex; align-items: center; gap: 10px; }
.weku-footer__zeile svg { flex-shrink: 0; }
.weku-page .weku-footer a { color: var(--weku-footer-text); }
.weku-page .weku-footer a:hover { color: var(--weku-orange); }
.weku-tabnum { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
/* Höhere Spezifität als der generische Footer-Link, sonst schlägt der durch. */
.weku-page .weku-footer a.weku-footer__web { color: var(--weku-orange); font-weight: 600; }
.weku-page .weku-footer a.weku-footer__web:hover { color: var(--weku-weiss); }
.weku-footer__fuss {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--weku-footer-linie);
  font-size: 13px;
  color: var(--weku-footer-dim);
}
.weku-footer__rechtslinks { display: flex; gap: 26px; flex-wrap: wrap; }
.weku-page .weku-footer__fuss a { color: var(--weku-footer-dim); }
.weku-page .weku-footer__fuss a:hover { color: var(--weku-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) {
  .weku-footer__block { padding: 16px 0 16px 24px; }
  .weku-footer__gruppe > .weku-footer__block:first-child { padding-left: 0; }
}
@media (max-width: 470px) {
  .weku-footer__block { padding: 16px 0; }
  .weku-footer__fuss { gap: 8px 26px; margin-top: 24px; }
}

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

/* Layout-Feld: Zeile 1 dreispaltig, Zeile 2 zweispaltig – fluid statt fixer Prozente */
.weku-page .weku-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;
}
.weku-page .weku-formular .wpforms-field-layout-preset-50-50 {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)) !important;
}
.weku-page .weku-formular .wpforms-layout-column {
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.weku-page .weku-formular .wpforms-layout-column .wpforms-field { width: 100% !important; }

.weku-page .weku-formular .wpforms-field-label {
  display: block;
  margin: 0 0 8px !important;
  font-family: var(--weku-head) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: normal !important;
  color: var(--weku-blau) !important;
  text-transform: none !important;
}
.weku-page .weku-formular .wpforms-required-label {
  color: var(--weku-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). */
.weku-page .weku-formular .wpforms-field-label.wpforms-label-hide,
.weku-page .weku-formular .wpforms-field-layout > .wpforms-field-label { display: none !important; }
.weku-page .weku-formular .wpforms-field-sublabel,
.weku-page .weku-formular .wpforms-field-description { font-size: 13px; color: var(--weku-text-4); }

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

.weku-page .weku-formular .wpforms-submit-container { padding: 0 !important; margin: 0 !important; }
.weku-page .weku-formular button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  gap: 11px;
  background: var(--weku-blau) !important;
  color: var(--weku-weiss) !important;
  border: 0 !important;
  padding: 16px 26px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--weku-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;
}
.weku-page .weku-formular button[type="submit"]:hover { background: var(--weku-blau-hover) !important; }
/* Papierflieger-Icon links im Submit */
.weku-page .weku-formular button[type="submit"]::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--weku-icon-flieger) center / contain no-repeat;
  mask: var(--weku-icon-flieger) center / contain no-repeat;
}
:root {
  --weku-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");
  --weku-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");
}

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

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

/* Bestätigung ersetzt die Datenschutzzeile an derselben Stelle:
   gleiche Zeile, gleiches Schloss-Icon, Archivo 600 / #193254. */
.weku-page .weku-formular .wpforms-confirmation-container-full,
.weku-page .weku-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(--weku-head) !important;
  font-weight: 600;
  font-size: 13px;
  color: var(--weku-blau) !important;
}
.weku-page .weku-formular .wpforms-confirmation-container-full::before,
.weku-page .weku-formular .wpforms-confirmation-container::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: var(--weku-text-4);
  -webkit-mask: var(--weku-icon-schloss) center / contain no-repeat;
  mask: var(--weku-icon-schloss) center / contain no-repeat;
}
.weku-page .weku-formular .wpforms-confirmation-container-full p,
.weku-page .weku-formular .wpforms-confirmation-container p { margin: 0; }

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