/* Hulsberg Quick Fixes – Darstellungskorrekturen (Stand 31.10.2026) */

/* 1) Smartphone/Tablet: Grid-Spalten dürfen schmaler werden als das längste Wort.
      Ursache der abgeschnittenen Texte auf Neukunde werden, Referenzen,
      Lebensmittelindustrie und Impressum. */
@media (max-width: 800px) {
  .r3-landscape__head,
  .r3-club-grid,
  .li-change__head,
  .hnc-values__grid,
  .hulsberg-imprint-v1 .head {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .r3-landscape__head > *,
  .r3-club-grid > *,
  .li-change__head > *,
  .hnc-values__grid > *,
  .hulsberg-imprint-v1 .head > * {
    min-width: 0 !important;
    max-width: 100%;
  }
  /* Gleiches Muster auf weiteren Seiten (Lebensmittelindustrie, Hofseiten) */
  .elementor [class*="__head"] > *,
  .elementor [class*="__grid"] > *,
  .elementor [class*="__paths"] > * {
    min-width: 0;
  }
}

@media (max-width: 767px) {
  /* 1b) Impressum: Seitenabstand im Abschnitt "Unternehmensdaten" wiederherstellen */
  body.page-id-19119 .hulsberg-imprint-v1.imp-data-section .shell {
    width: calc(100% - 28px) !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 767px) {
  /* 2) Lange Wörter in großen Überschriften sauber trennen statt abschneiden.
        Nur sehr lange Wörter (ab 14 Zeichen) werden getrennt. */
  .elementor h1,
  .elementor h2,
  .elementor h3 {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 14 7 7;
  }

  /* 3) Frische & Qualität: Seitenabstand im Kopfbereich */
  .hulsberg-fq-v4 .fq4-shell.fq4-hero__inner {
    width: calc(100% - 30px) !important;
    margin-inline: auto !important;
  }

  /* 4) Startseite, Abschnitt "Regionalität": Seitenabstand und 50-km-Plakette */
  .hg-farms--redesign .hg-shell {
    width: min(100% - 30px, 650px) !important;
    margin-inline: auto !important;
  }
  .hg-farms--redesign .hg-farms__radius {
    right: 6px !important;
  }
}

/* 3b) Frische & Qualität: weißer Streifen unter der Kopfzeile (alle Größen) */
body.page-id-178 .content-wrapper {
  margin-top: 0 !important;
}

@media (min-width: 768px) {
  /* 4b) Startseite, Abschnitt "Regionalität": gleiches Raster wie die übrigen Abschnitte */
  .hg-farms--redesign .hg-shell {
    width: min(1240px, 100% - 64px) !important;
    margin-inline: auto !important;
  }
}

/* 4c) Kopfbereiche mit dunklem Hintergrund: Der gelbe Deko-Ring liegt auf Smartphone
       und Tablet hinter weißem/gelbem Text (z. B. Kontakt, Bremen, Referenzen,
       Hulsbergs Höfe, Downloads). Ring nur noch als dezenter Akzent zeigen. */
@media (max-width: 1100px) {
  .dl-hero::before,
  .zc-hero::before,
  .hulsberg-imprint-v1 .hero::before,
  .dp-hero::before,
  .kt-hero::after,
  .fj-hero::after,
  .dh-hero::after,
  .br2-hero::before,
  .r3-hero::before,
  .ws-hero::before,
  .ps-hero::before,
  .hc1-hero::before,
  .hh5-hero::before {
    opacity: 0.18 !important;
  }
}

/* 5) Cookie-Banner: Links nicht mitten im Wort umbrechen */
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner .cmplz-documents a {
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
  white-space: nowrap;
}
.cmplz-cookiebanner .cmplz-documents ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
}

/* 6) Smartphone/Tablet-Kopfzeile: "Anfragen" neben "Webshop" sichtbar machen.
      Der Original-Linktext bleibt für Screenreader erhalten. */
@media (max-width: 1350px) {
  #fh4-header .fh4-actions {
    gap: 8px !important;
  }
  #fh4-header .fh4-actions .fh4-new {
    display: inline-flex !important;
  }
}
@media (max-width: 560px) {
  #fh4-header .fh4-brand img {
    max-width: 128px !important;
    height: auto !important;
  }
  #fh4-header .fh4-actions {
    gap: 6px !important;
  }
  #fh4-header .fh4-actions a.fh4-btn.fh4-new,
  #fh4-header .fh4-actions a.fh4-btn.fh4-shop {
    font-size: 0 !important;
    min-width: 0 !important;
    padding: 10px !important;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  /* Kurze Beschriftungen auf dem Smartphone: "Anfragen" und "Shop" */
  #fh4-header .fh4-actions a.fh4-btn.fh4-new::after {
    content: "Anfragen" !important;
    font-size: 13px;
    line-height: 1;
  }
  #fh4-header .fh4-actions a.fh4-btn.fh4-shop::after {
    content: "Shop" !important;
    font-size: 13px;
    line-height: 1;
  }
}

/* 7) Footer-Links: größere Tippfläche (mind. 24 px), ohne das Layout zu verschieben */
footer a {
  padding-block: 2px;
}

/* 8) Nicht genutzte Theme-Schrift "Herbarium" nicht mehr laden
      (385 KB je Seite). Gleichnamige Schrift auf lokale Systemschrift umleiten. */
@font-face {
  font-family: "Herbarium";
  src: local("Montserrat"), local("Arial");
}