/* SeedHub B2B — Gutenberg Block Styles
   Erweitert hgi.css um Block-Editor-spezifische Styles.
   Alle Gutenberg-Core-Blöcke werden ans SeedHub-Design angepasst.
*/

/* ─── Global Block Spacing ─────────────────────────────── */

.entry-content > *,
.wp-block-group__inner-container > * {
  max-width: var(--hgi-max, 1400px);
  margin-left: auto;
  margin-right: auto;
}

.entry-content > .alignwide {
  max-width: calc(var(--hgi-max, 1400px) + 56px);
}

.entry-content > .alignfull {
  max-width: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* ─── Group Block ──────────────────────────────────────── */

.wp-block-group {
  padding: 0;
}

/* Full-bleed sections (alignfull) paint their background edge-to-edge,
   but the readable content must line up with the alignwide/default
   content column (Astra's 1200px container) instead of hugging the
   viewport edge — hence the centering side-padding here. */
.wp-block-group.hgi-section {
  padding: var(--hgi-innen) var(--hgi-gutter-vw);
}

.wp-block-group.hgi-section-dark {
  background: var(--hgi-primary);
  color: var(--hgi-bg);
  padding: var(--hgi-innen) var(--hgi-gutter-vw);
}

.wp-block-group.hgi-section-dark h1,
.wp-block-group.hgi-section-dark h2,
.wp-block-group.hgi-section-dark h3 {
  color: var(--hgi-bg);
}

.wp-block-group.hgi-section-dark p {
  color: rgba(255, 255, 255, 0.7);
}


.wp-block-group.hgi-section-soft {
  background: var(--hgi-bg-soft);
  padding: var(--hgi-innen) var(--hgi-gutter-vw);
}

/* ─── Cover Block (Hero) ───────────────────────────────── */

.wp-block-cover.hgi-hero {
  min-height: 540px;
  padding: 120px 28px 96px;
  border-radius: 0;
}

.wp-block-cover.hgi-hero .wp-block-cover__inner-container {
  max-width: var(--hgi-max);
  margin: 0 auto;
  text-align: center;
}

.wp-block-cover.hgi-hero h1,
.wp-block-cover.hgi-hero .wp-block-heading {
  font-family: var(--hgi-font-display);
  font-size: clamp(36px, 6vw, 82px);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 18px;
}

.wp-block-cover.hgi-hero p {
  font-size: clamp(16px, 2vw, 21px);
  color: rgba(255, 255, 255, 0.8);
  max-width: 680px;
  margin: 0 auto 32px;
  text-wrap: balance;
}

.wp-block-cover.hgi-hero .wp-block-buttons {
  justify-content: center;
  gap: 14px;
}

/* Hero Variant: Light / Soft BG */
.wp-block-cover.hgi-hero-light {
  min-height: 480px;
  padding: 96px 28px 80px;
  background-color: var(--hgi-bg-soft);
}

.wp-block-cover.hgi-hero-light h1,
.wp-block-cover.hgi-hero-light .wp-block-heading {
  color: var(--hgi-ink);
}

.wp-block-cover.hgi-hero-light p {
  color: var(--hgi-ink-2);
}

/* WordPress haengt dem Cover-Block automatisch .is-dark-theme an, wenn es den
   Hintergrund fuer dunkel haelt, und setzt darueber hellen Text. Bei der
   HELLEN Hero-Variante ist das falsch: der Text wuerde hell auf hellem Grund
   stehen. Die Klassenkombination hier explizit gegensetzen, damit die
   Lesbarkeit nicht von WPs Auto-Erkennung abhaengt — greift in Editor und
   Frontend gleichermassen. */
.wp-block-cover.hgi-hero-light.is-dark-theme,
.wp-block-cover.hgi-hero-light.is-dark-theme .wp-block-cover__inner-container {
  color: var(--hgi-ink);
}

.wp-block-cover.hgi-hero-light.is-dark-theme h1,
.wp-block-cover.hgi-hero-light.is-dark-theme h2,
.wp-block-cover.hgi-hero-light.is-dark-theme .wp-block-heading {
  color: var(--hgi-ink);
}

.wp-block-cover.hgi-hero-light.is-dark-theme p {
  color: var(--hgi-ink-2);
}

/* ─── Heading Block ────────────────────────────────────── */

/* Keine Versalien mehr an Ueberschriften (Dirk, 24.09.2026).
 *
 * Am 21.09. galt die Ausnahme ab h3, h1 und h2 blieben in Grossbuchstaben.
 * Jetzt gilt sie fuer alle Ebenen. Die Eyebrow-Zeilen ("QUICK ORDER",
 * "SO GEHT'S LOS") behalten ihre Versalien — das sind Labels ueber einer
 * Ueberschrift, keine Ueberschriften; ihre Regel steht weiter unten und
 * setzt text-transform selbst. */
.wp-block-heading {
  font-family: var(--hgi-font-display);
  text-transform: none;
  letter-spacing: 0.01em;
}

h1.wp-block-heading { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.05; }
/* Abschnittsueberschriften 20 Prozent groesser (Jonas, Entwurf v85; Freigabe
   Dirk 07.10.2026). Feste Stufen an Astras Umbruchpunkten statt clamp, weil
   v85 genau diese drei Werte festlegt: 38 / 31 / 29 px. */
h2.wp-block-heading { font-size: 38px; font-weight: 700; line-height: 1.1; }
@media (max-width: 921px) { h2.wp-block-heading { font-size: 31px; } }
@media (max-width: 544px) { h2.wp-block-heading { font-size: 29px; } }
h3.wp-block-heading { font-size: clamp(20px, 2.5vw, 24px); font-weight: 600; line-height: 1.15; }
h4.wp-block-heading { font-size: 20px; font-weight: 600; line-height: 1.2; }
h5.wp-block-heading { font-size: 18px; font-weight: 600; line-height: 1.25; }
h6.wp-block-heading { font-size: 16px; font-weight: 600; line-height: 1.3; }

/* Eyebrow: small heading style */
.wp-block-heading.hgi-eyebrow {
  font-family: var(--hgi-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--hgi-ink-3);
  margin-bottom: 8px;
}

/* Eyebrows als Absatz: .wp-block-paragraph (15px) steht weiter unten in
   dieser Datei und gewann bei gleicher Spezifitaet gegen .hgi-eyebrow — die
   11px galten nur an den Eyebrows ohne Absatz-Klasse. Gemessen 07.10.2026:
   fuenf Eyebrows der Startseite in 15px statt 11px. */
.wp-block-paragraph.hgi-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--hgi-ink-3);
}

/* ─── Paragraph Block ──────────────────────────────────── */

.wp-block-paragraph {
  font-family: var(--hgi-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--hgi-ink);
}

.wp-block-paragraph.has-large-font-size {
  font-size: 21px;
  line-height: 1.5;
  color: var(--hgi-ink-2);
  text-wrap: balance;
}

/* ─── Buttons Block ────────────────────────────────────── */

.wp-block-buttons {
  gap: 14px;
}

/* hgi-btn-* are also used as standalone classes on plain <button>/<a>
   elements outside Gutenberg (see hgi.css); reset them here so they don't
   also paint a background/box on the Gutenberg wrapper div — only the
   inner .wp-block-button__link should be visually styled. */
.wp-block-button.hgi-btn-accent,
.wp-block-button.hgi-btn-ghost,
.wp-block-button.hgi-btn-sm,
.wp-block-button.hgi-btn-lg {
  background: none;
  padding: 0;
  height: auto;
}

.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--hgi-font-body);
  cursor: pointer;
  transition: transform 0.08s, background 0.15s, color 0.15s;
  text-decoration: none;
  border: 1px solid transparent;
}

.wp-block-button .wp-block-button__link:active {
  transform: scale(0.98);
}

/* Primary (filled) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--hgi-ink);
  color: var(--hgi-bg);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--hgi-accent);
  color: var(--hgi-ink);
}

/* Outline / Ghost */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--hgi-ink);
  border-color: var(--hgi-line-2);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--hgi-accent);
  color: var(--hgi-ink);
  border-color: var(--hgi-accent);
}

/* Accent button via custom class */
.wp-block-button.hgi-btn-accent .wp-block-button__link {
  background: var(--hgi-accent);
  color: var(--hgi-ink);
  border-color: transparent;
}

.wp-block-button.hgi-btn-accent .wp-block-button__link:hover {
  background: var(--hgi-ink);
  color: var(--hgi-bg);
}

/* Small */
.wp-block-button.hgi-btn-sm .wp-block-button__link {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
}

/* Large */
.wp-block-button.hgi-btn-lg .wp-block-button__link {
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

/* ─── Columns Block (Aisles / Features Grid) ───────────── */

.wp-block-columns {
  gap: 24px;
  margin-bottom: 0;
}

.wp-block-column {
  margin-bottom: 0;
}

/* Aisle Cards */
.wp-block-columns.hgi-aisles .wp-block-column {
  padding: 28px;
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius-lg);
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}

.wp-block-columns.hgi-aisles .wp-block-column:hover {
  background: var(--hgi-bg-soft);
}

.wp-block-columns.hgi-aisles h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.wp-block-columns.hgi-aisles p {
  color: var(--hgi-ink-3);
  font-size: 13px;
}

/* ─── Spec Strip (4-col stats row) ─────────────────────── */

.wp-block-columns.hgi-spec-strip {
  gap: 0;
  border-top: 1px solid var(--hgi-line);
  border-bottom: 1px solid var(--hgi-line);
}

.wp-block-columns.hgi-spec-strip > .wp-block-column {
  padding: 28px 24px;
  border-right: 1px solid var(--hgi-line);
}

.wp-block-columns.hgi-spec-strip > .wp-block-column:last-child {
  border-right: 0;
}

/* Die Rinne sitzt seit dem 24.09. am Abschnitt (siehe dort). Die aeusseren
   Spalten bekommen deshalb dasselbe Innenpolster wie die inneren — sonst
   waeren sie um die Rinne breiter und der zentrierte Text stuende schief. */
.wp-block-columns.hgi-spec-strip > .wp-block-column:first-child {
  padding-left: 24px;
}

.wp-block-columns.hgi-spec-strip > .wp-block-column:last-child {
  padding-right: 24px;
}

/* Zentriert statt linksbuendig (Dirk, 24.09.2026). */
.wp-block-columns.hgi-spec-strip > .wp-block-column {
  text-align: center;
}

.wp-block-columns.hgi-spec-strip h3,
.wp-block-columns.hgi-spec-strip .hgi-spec-n {
  font-family: var(--hgi-font-display);
  font-size: 40px;
  /* 700 statt 500 (Dirk, 24.09.2026) — die vier Schlagworte sind die
     Kurzfassung des Angebots und sollen als erstes gelesen werden. */
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 0;
}

.wp-block-columns.hgi-spec-strip p {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  margin-top: 4px;
}

/* ─── Image Block ──────────────────────────────────────── */

/* Abgerundete Ecken, Referenz ist der Sortier-Select der Kategorieseite
   (--hgi-radius-sm). Vorgabe Dirk, 10.09. — loest die Vorgabe "Bilder ohne
   Rundung" vom 03.09. ab. Pills (999px) bleiben davon unberuehrt. */
.wp-block-image img {
  border-radius: var(--hgi-radius-sm);
}

.wp-block-image.hgi-img-bordered img {
  border: 1px solid var(--hgi-line);
}

.wp-block-image.hgi-img-shadow img {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.wp-block-image figcaption {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  text-align: center;
  margin-top: 10px;
}

/* ─── Gallery Block ────────────────────────────────────── */

.wp-block-gallery {
  gap: 12px;
}

.wp-block-gallery .wp-block-image img {
  border-radius: var(--hgi-radius-sm);
  border: 1px solid var(--hgi-line);
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* ─── Separator Block ──────────────────────────────────── */

.wp-block-separator {
  border-top: 1px solid var(--hgi-line);
  border-bottom: none;
  opacity: 1;
}

.wp-block-separator.is-style-wide {
  border-top-width: 1px;
}

.wp-block-separator.is-style-dots {
  border: none;
  color: var(--hgi-ink-3);
}

/* ─── Spacer Block ─────────────────────────────────────── */
/* Defaults are fine — just ensure no background leaks */
.wp-block-spacer {
  background: transparent !important;
}

/* ─── Quote Block ──────────────────────────────────────── */

.wp-block-quote {
  border-left: 3px solid var(--hgi-accent);
  padding: 12px 24px;
  margin: 32px 0;
  font-style: normal;
}

.wp-block-quote p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--hgi-ink);
}

.wp-block-quote cite {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  font-style: normal;
}

/* ─── List Block ───────────────────────────────────────── */

.wp-block-list {
  font-size: 15px;
  line-height: 1.6;
  padding-left: 1.2em;
}

.wp-block-list li {
  margin-bottom: 6px;
}

.wp-block-list li::marker {
  color: var(--hgi-accent);
}

/* ─── Table Block ──────────────────────────────────────── */

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.wp-block-table th,
.wp-block-table td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--hgi-line);
}

.wp-block-table th {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
  font-weight: 500;
  border-bottom-width: 2px;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--hgi-bg-soft);
}

.wp-block-table figcaption {
  font-size: 11px;
  color: var(--hgi-ink-3);
}

/* ─── Media & Text Block ───────────────────────────────── */

.wp-block-media-text {
  gap: 40px;
}

.wp-block-media-text .wp-block-media-text__media img {
  border-radius: var(--hgi-radius-sm);
  border: 1px solid var(--hgi-line);
}

.wp-block-media-text .wp-block-media-text__content {
  padding: 0;
}

/* ─── Social Links Block ───────────────────────────────── */

.wp-block-social-links .wp-social-link {
  background: var(--hgi-bg-soft);
  color: var(--hgi-ink);
  border: 1px solid var(--hgi-line);
  transition: background 0.15s, border-color 0.15s;
}

.wp-block-social-links .wp-social-link:hover {
  background: var(--hgi-accent);
  border-color: var(--hgi-accent);
  color: var(--hgi-ink);
}

/* ─── Navigation Block ─────────────────────────────────── */

.wp-block-navigation a {
  font-size: 13.5px;
  color: var(--hgi-ink-2);
  transition: color 0.15s;
  text-decoration: none;
}

.wp-block-navigation a:hover {
  color: var(--hgi-ink);
}

/* ─── Search Block ─────────────────────────────────────── */

.wp-block-search .wp-block-search__input {
  height: 44px;
  padding: 0 14px;
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line-2);
  border-radius: var(--hgi-radius);
  font-size: 14px;
  color: var(--hgi-ink);
  transition: border-color 0.15s;
}

.wp-block-search .wp-block-search__input:focus {
  border-color: var(--hgi-ink);
  outline: none;
}

.wp-block-search .wp-block-search__button {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--hgi-ink);
  color: var(--hgi-bg);
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.wp-block-search .wp-block-search__button:hover {
  background: var(--hgi-accent);
  color: var(--hgi-ink);
}

/* ─── Latest Posts Block ───────────────────────────────── */

.wp-block-latest-posts li {
  margin-bottom: 18px;
}

.wp-block-latest-posts__post-title {
  font-family: var(--hgi-font-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--hgi-ink);
  text-decoration: none;
}

.wp-block-latest-posts__post-title:hover {
  color: var(--hgi-accent);
}

.wp-block-latest-posts__post-date,
.wp-block-latest-posts__post-author {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hgi-ink-3);
}

/* ─── WooCommerce Blocks ───────────────────────────────── */

/* Product Grid Block */
.wc-block-grid .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.wc-block-grid .wc-block-grid__product {
  display: block !important;
  flex: none;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  border: none;
  padding: 0;
  /* Dieselbe Konvention wie im klassischen Produkt-Loop (Begruendung und
     Ausnahmen im Kopf des Abschnitts "Konvention: content-visibility auf
     Listenseiten" in hgi.css). Hier greift sie fuer Produktraster, die als
     WooCommerce-BLOCK auf einer Seite stehen — dieselbe Art Liste, anderer
     Renderweg. Platzhalter niedriger als bei der Loop-Karte, weil die
     Block-Karte keine Varianten-Chips und keinen Grundpreis zeigt. */
  content-visibility: auto;
  contain-intrinsic-height: auto 380px;
}

@media (max-width: 760px) {
  .wc-block-grid .wc-block-grid__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wc-block-grid .wc-block-grid__product-image img {
  aspect-ratio: 1/1;
  object-fit: cover;
  background: var(--hgi-bg-soft);
  border: 1px solid var(--hgi-img-edge);
  border-radius: var(--hgi-radius-sm);
}

.wc-block-grid .wc-block-grid__product-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hgi-ink);
  line-height: 1.3;
}

.wc-block-grid .wc-block-grid__product-price {
  font-family: var(--hgi-font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--hgi-ink);
}

.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link {
  border-radius: 999px;
  height: 36px;
  font-size: 13px;
}

/* Featured Product / Category Block */
.wp-block-woocommerce-featured-product,
.wp-block-woocommerce-featured-category {
  border-radius: var(--hgi-radius-lg);
  overflow: hidden;
}

.wp-block-woocommerce-featured-product .wp-block-woocommerce-featured-product__title,
.wp-block-woocommerce-featured-category .wp-block-featured-category__title {
  font-family: var(--hgi-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Cart / Checkout Blocks */
.wc-block-cart .wc-block-cart-items__row img {
  width: 72px;
  height: 72px;
  border-radius: var(--hgi-radius-sm);
  background: var(--hgi-bg-soft);
  border: 1px solid var(--hgi-img-edge);
  object-fit: cover;
}

.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea {
  border-radius: var(--hgi-radius);
  border: 1px solid var(--hgi-line-2);
}

.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-text-input textarea:focus {
  border-color: var(--hgi-ink);
  box-shadow: none;
}

/* ─── Custom Block Patterns: Brand Wall ────────────────── */

.wp-block-columns.hgi-brand-wall {
  gap: 16px;
}

.wp-block-columns.hgi-brand-wall .wp-block-column {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius);
  min-height: 80px;
  transition: border-color 0.15s;
}

.wp-block-columns.hgi-brand-wall .wp-block-column:hover {
  border-color: var(--hgi-accent);
}

.wp-block-columns.hgi-brand-wall img {
  max-height: 40px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.2s, opacity 0.2s;
}

.wp-block-columns.hgi-brand-wall img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ─── Custom Block Pattern: CTA Banner ─────────────────── */

.wp-block-group.hgi-cta-banner {
  background: var(--hgi-accent);
  padding: 48px 40px;
  border-radius: var(--hgi-radius-lg);
  text-align: center;
}

.wp-block-group.hgi-cta-banner h2 {
  color: var(--hgi-ink);
  margin-bottom: 12px;
}

.wp-block-group.hgi-cta-banner p {
  color: var(--hgi-accent-ink);
  max-width: 520px;
  margin: 0 auto 24px;
}

.wp-block-group.hgi-cta-banner .wp-block-button__link {
  background: var(--hgi-ink);
  color: var(--hgi-bg);
}

.wp-block-group.hgi-cta-banner .wp-block-button__link:hover {
  background: var(--hgi-surface);
  color: var(--hgi-ink);
}

/* ─── Custom Block Pattern: Trust/USP Strip ────────────── */

.wp-block-columns.hgi-trust-strip {
  gap: 0;
  background: var(--hgi-primary);
  border-radius: var(--hgi-radius-lg);
  overflow: hidden;
  margin: 48px 0 0;
}

.wp-block-columns.hgi-trust-strip > .wp-block-column {
  padding: 24px 20px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.wp-block-columns.hgi-trust-strip > .wp-block-column:last-child {
  border-right: 0;
}

.wp-block-columns.hgi-trust-strip > .wp-block-column:first-child {
  padding-left: var(--hgi-gutter-vw);
}

.wp-block-columns.hgi-trust-strip > .wp-block-column:last-child {
  padding-right: var(--hgi-gutter-vw);
}

.wp-block-columns.hgi-trust-strip h4,
.wp-block-columns.hgi-trust-strip h3 {
  color: var(--hgi-accent);
  font-size: 16px;
  margin: 0 0 4px;
}

.wp-block-columns.hgi-trust-strip p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin: 0;
}

/* ─── Custom Block Pattern: Signup / Kontoeroeffnung ───── */

/* Vollbreiter Abschnitt, Inhalt bleibt auf --hgi-max. Die Kante kommt aus
   --hgi-gutter, damit sie mit den uebrigen Vollbreiten-Abschnitten fluchtet
   statt einen eigenen Wert zu erfinden. */
.wp-block-group.hgi-signup {
  padding: var(--hgi-innen) var(--hgi-gutter);
}

.hgi-signup > .wp-block-columns {
  gap: 64px;
  max-width: var(--hgi-max);
  margin: 0 auto;
}

.hgi-signup h2 {
  margin: 0 0 16px;
}

.hgi-signup .wp-block-column:first-child p:not(.hgi-eyebrow) {
  color: var(--hgi-ink-3);
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 440px;
}

.hgi-signup .wp-block-column.hgi-signup-list {
  background: var(--hgi-bg-soft);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius);
  padding: 32px 36px;
}

.hgi-signup-list h3 {
  font-family: var(--hgi-font-display);
  font-weight: 600;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--hgi-ink-3);
  margin: 0 0 18px;
}

.hgi-signup-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hgi-signup-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--hgi-primary);
  padding: 12px 0;
  border-top: 1px solid var(--hgi-line);
}

.hgi-signup-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Haken als Pseudo-Element, nicht als <span> im Markup: im Editor fuegt eine
   Redakteurin eine ganz normale Listenzeile hinzu und bekommt den Haken
   automatisch. Ein Span muesste sie jedes Mal von Hand mitkopieren. */
.hgi-signup-list li::before {
  content: "✓";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hgi-accent);
  color: var(--hgi-accent-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  margin-top: 1px;
}

.hgi-signup-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hgi-line);
  font-size: 14px;
  color: var(--hgi-ink-3);
}

/* Sprungmarke im Registrierungsformular auf /mein-konto/. Ohne den freien
   Raum verschwindet die Ueberschrift unter der Kopfzeile. */
.hgi-anchor {
  display: block;
  scroll-margin-top: calc(var(--hgi-nav-h) + 24px);
}

/* ─── Custom Block Pattern: USP-Band ───────────────────── */

/* Gerundete Karte auf Inhaltsbreite, nicht vollbreit — so steht sie im
   Entwurf v85 und so hebt sie sich vom Rest ab, ohne die Seite zu zerteilen. */
.wp-block-group.hgi-usps {
  background: var(--hgi-accent);
  border-radius: var(--hgi-radius-lg);
  overflow: hidden;
}

/* Gutenberg-Spalten sind Flex. Hier braucht es ein Raster, damit alle drei
   Spalten gleich breit bleiben, auch wenn ein Text laenger ist. */
.hgi-usps .wp-block-columns.hgi-usps-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 36px 48px;
  margin: 0;
}

.hgi-usps .wp-block-column.hgi-usp {
  text-align: center;
}

.hgi-usp-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hgi-primary);
  color: var(--hgi-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.hgi-usps .hgi-usp h3 {
  font-family: var(--hgi-font-display);
  font-weight: 600;
  font-size: 20px;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--hgi-primary);
  margin: 0 0 10px;
}

.hgi-usps .hgi-usp p {
  margin: 0;
  color: var(--hgi-accent-ink);
  font-size: 16px;
  line-height: 1.6;
}

/* KEIN Farbwechsel beim Hover. Der Entwurf v85 setzt hier Weiss — auf dem
   Akzentgruen sind das 1,67:1, und die Regel "kein weisser Text auf dieser
   Flaeche" steht seit v1.44.0 fest. Stattdessen wird die Unterstreichung
   kraeftiger; das ist auch ohne Farbsehen erkennbar. */
.hgi-usp-link {
  color: var(--hgi-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}

.hgi-usp-link:hover,
.hgi-usp-link:focus-visible {
  text-decoration-thickness: 3px;
}

/* ─── Custom Block Pattern: Quick-Order-Teaser ─────────── */

/* EIGENES PRAEFIX hgi-qot-, nicht hgi-qo-.
 *
 * Die echte Quick-Order-Matrix bringt 85 Klassen unter .hgi-qo- mit
 * (assets/css/hgi-quick-order.css). Eine davon, .hgi-qo-cell, benutzt der
 * Entwurf v85 auch fuer die Attrappe hier — mit voellig anderer Bedeutung
 * (dort eine Flex-Zelle der Matrix, hier ein gestricheltes Kaestchen).
 * hgi-quick-order.css laedt nur auf der Quick-Order-Seite, diese Datei
 * dagegen ueberall: die Teaser-Regel waere also auf der echten Matrix
 * gelandet und haette sie zerlegt. "qot" = quick order teaser.
 */

.wp-block-group.hgi-qot {
  padding: var(--hgi-innen) var(--hgi-gutter);
  background: var(--hgi-bg-soft);
}

.hgi-qot > .wp-block-columns {
  gap: 56px;
  max-width: var(--hgi-max);
  margin: 0 auto;
  align-items: center;
}

.hgi-qot h2 { margin: 0 0 16px; }

.hgi-qot .wp-block-column:first-child p:not(.hgi-eyebrow) {
  color: var(--hgi-ink-3);
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 420px;
}

.hgi-qot-features {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.hgi-qot-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--hgi-primary);
  padding: 10px 0;
}

/* Haken wie im Signup-Block als Pseudo-Element, damit eine neue Zeile im
   Editor ohne mitkopierten Span funktioniert. */
.hgi-qot-features li::before {
  content: "✓";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hgi-accent);
  color: var(--hgi-accent-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  margin-top: 1px;
}

/* ── Die Attrappe ── */

.hgi-qot-mock {
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius-sm);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(61, 27, 4, 0.08);
}

.hgi-qot-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hgi-line);
  background: var(--hgi-bg-soft);
}

.hgi-qot-chip {
  font-size: 12px;
  font-weight: 500;
  color: var(--hgi-primary);
  border: 1px solid var(--hgi-line-2);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--hgi-surface);
}

.hgi-qot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hgi-qot-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hgi-ink-3);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hgi-line);
}

.hgi-qot-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hgi-line);
  color: var(--hgi-primary);
  vertical-align: middle;
}

.hgi-qot-table td.hgi-qot-name { font-weight: 500; }

.hgi-qot-table td.hgi-qot-leer {
  color: var(--hgi-ink-4);
  text-align: center;
}

.hgi-qot-box {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  border: 1px dashed var(--hgi-line-2);
  border-radius: var(--hgi-radius-sm);
  padding: 3px 6px;
  color: var(--hgi-ink-4);
}

.hgi-qot-box.is-gesetzt {
  background: var(--hgi-accent);
  border-style: solid;
  border-color: var(--hgi-accent);
  color: var(--hgi-accent-ink);
  font-weight: 700;
}

.hgi-qot-foot {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 18px;
  background: var(--hgi-primary);
  color: #fff;
}

.hgi-qot-foot-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hgi-ink-4);
  margin-bottom: 2px;
}

.hgi-qot-foot-wert {
  font-family: var(--hgi-font-display);
  font-weight: 600;
  font-size: 15px;
}

.hgi-qot-foot-cta {
  margin-left: auto;
  background: var(--hgi-accent);
  color: var(--hgi-accent-ink);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
}

/* ─── Responsive: Block-specific ───────────────────────── */

@media (max-width: 900px) {
  .wp-block-group.hgi-qot {
    padding: var(--hgi-innen) var(--hgi-gutter);
  }

  .hgi-qot > .wp-block-columns {
    flex-wrap: wrap;
    gap: 32px;
  }

  .hgi-qot > .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }

  .hgi-usps .wp-block-columns.hgi-usps-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 32px;
  }

  .wp-block-group.hgi-signup {
    padding: var(--hgi-innen) var(--hgi-gutter);
  }

  /* Gutenberg stapelt Spalten erst bei 781px. Der Signup-Block wird darueber
     schon zu eng, weil rechts eine Karte mit Innenabstand steht. */
  .hgi-signup > .wp-block-columns {
    flex-wrap: wrap;
    gap: 32px;
  }

  .hgi-signup > .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }

  .wp-block-columns.hgi-spec-strip {
    gap: 0;
  }

  .wp-block-columns.hgi-spec-strip > .wp-block-column {
    border-right: none;
    border-bottom: 1px solid var(--hgi-line);
    padding: 20px 24px;
  }

  .wp-block-columns.hgi-spec-strip > .wp-block-column:last-child {
    border-bottom: none;
  }

  .wp-block-columns.hgi-spec-strip h3 {
    font-size: 28px;
  }

  .wp-block-columns.hgi-trust-strip > .wp-block-column {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 640px) {
  .wp-block-cover.hgi-hero {
    min-height: 400px;
    padding: 64px 16px 56px;
  }

  .wp-block-group.hgi-section,
  .wp-block-group.hgi-section-dark,
  .wp-block-group.hgi-section-soft {
    /* Der Seitenrand als Token, nicht als Zahl (24.09.2026). Die frueheren
       28px waren am 21.09. richtig gedacht — sie sollten die Untergrenze der
       beiden Rinnen treffen — trafen aber ab 1.52.0 daneben, weil die
       Untergrenze seither --hgi-rand ist. Am Telefon stand der Abschnitt
       dadurch 7,5px weiter innen als jeder andere. */
    padding: var(--hgi-innen) var(--hgi-rand);
  }

  .wp-block-group.hgi-cta-banner {
    padding: 32px 20px;
  }

  .wp-block-media-text {
    gap: 24px;
  }

  .wp-block-columns.hgi-brand-wall .wp-block-column {
    padding: 16px;
    min-height: 60px;
  }
}

/* ─── Editor Styles (Block Editor Backend) ─────────────── */

.editor-styles-wrapper {
  font-family: var(--hgi-font-body);
  font-size: 15px;
  color: var(--hgi-ink);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  font-family: var(--hgi-font-display);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ─── Aisles-Karten: die ganze Karte klickbar ──────────────
   Die Karte trug seit v1.x cursor:pointer, enthielt aber keinen Link — sie
   sah klickbar aus und war es nicht. Statt den Zeiger zu entfernen wird das
   Versprechen eingeloest: der "Alle ansehen"-Link im Kartenfuss spannt sich
   per ::after ueber die ganze Karte. Das nutzt das bestehende
   justify-content: space-between, weshalb der Link genau dort sitzt, wo die
   Karte ohnehin Platz dafuer laesst. */

.wp-block-columns.hgi-aisles .wp-block-column {
  position: relative;
}

.hgi-aisle-link {
  margin-top: 16px;
}

.hgi-aisle-link a {
  font-family: var(--hgi-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hgi-ink);
  text-decoration: none;
}

.hgi-aisle-link a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--hgi-radius-lg);
}

.wp-block-columns.hgi-aisles .wp-block-column:hover .hgi-aisle-link a {
  color: var(--hgi-accent-ink);
}

/* ─── Custom Block Pattern: Kontakt ─────────────────────────
   Die Formularfelder kommen von Contact Form 7, die Umgebung von Astra.
   Beide bringen eigene Regeln mit, und beide sind in diesem Projekt schon
   einmal teuer geworden: Das B2B-Registrierungsformular brauchte im
   September acht Einzelkorrekturen, sieben davon gegen Astras Formular-CSS.
   Dieselben Regeln treffen CF7 unveraendert, deshalb stehen die
   Gegenmassnahmen hier von vornherein und nicht erst nach dem ersten
   Screenshot. Jede ist benannt, damit niemand sie fuer Zierrat haelt und
   wegkuerzt. */

.wp-block-group.hgi-contact {
  padding: var(--hgi-innen) var(--hgi-gutter);
  background: var(--hgi-bg-soft);
  scroll-margin-top: calc(var(--hgi-nav-h) + 24px);
}

.hgi-contact > .wp-block-columns {
  gap: 56px;
  max-width: var(--hgi-max);
  margin: 0 auto;
}

.hgi-contact h2 {
  margin: 0 0 16px;
}

.hgi-contact .wp-block-column:first-child p:not(.hgi-eyebrow) {
  color: var(--hgi-ink-3);
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 420px;
}

.hgi-contact .hgi-contact-direkt {
  font-size: 15px;
}

.hgi-contact .hgi-contact-direkt a {
  color: var(--hgi-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Das Formular sitzt auf einer weissen Karte, damit die Felder sich vom
   gedaempften Abschnittsgrund abheben. */
.hgi-contact-formspalte {
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line);
  border-radius: var(--hgi-radius);
  padding: 32px 36px;
}

.hgi-contact .wpcf7-form > p:empty {
  display: none;
}

/* Zwei Felder nebeneinander, unter 640 px untereinander. */
.hgi-contact .hgi-contact-row {
  display: flex;
  gap: 18px;
}

.hgi-contact .hgi-contact-row > .hgi-field {
  flex: 1 1 0;
  min-width: 0;
}

.hgi-contact .hgi-field {
  margin: 0 0 18px;
}

/* GEGEN die Label-Regel des Themes (11 px, Versalien, gesperrt). Sie ist fuer
   Filter- und Tabellenbeschriftungen gedacht; auf einem Kontaktformular wirkt
   sie wie Kleingedrucktes. Dieselbe Regel hat am 17.09. den Zustimmungstext
   der Registrierung in Versalien gesetzt. */
.hgi-contact .hgi-field > label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--hgi-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hgi-ink-2);
}

.hgi-contact .hgi-req {
  color: var(--hgi-danger);
  text-decoration: none;
  border: 0;
  margin-left: 2px;
}

.hgi-contact .hgi-optional {
  font-weight: 400;
  color: var(--hgi-ink-3);
  font-size: 13px;
  margin-left: 4px;
}

/* GEGEN Astras "padding: 1.45em .8em .35em" auf Eingabefeldern. Das Polster
   ist fuer schwebende Beschriftungen gedacht: oben viel, unten wenig. Setzt
   man darauf eine feste Hoehe, bleiben vom Inhalt rund 15 px und der Text
   wird unten abgeschnitten — genau der Befund "Deutschland/Kunde
   abgeschnitten" vom 17.09. Deshalb KEINE height hier: die Hoehe entsteht aus
   dem eigenen, symmetrischen Polster. */
.hgi-contact .wpcf7 input.wpcf7-form-control:not([type="submit"]),
.hgi-contact .wpcf7 textarea.wpcf7-form-control,
.hgi-contact input[type="text"],
.hgi-contact input[type="email"],
.hgi-contact input[type="tel"],
.hgi-contact textarea {
  /* height: auto gegen Astras globales height: 40px auf Eingabefeldern.
     Zusammen mit dessen padding von 12px 16px bleiben davon 14 px Inhalt
     fuer eine Zeilenhoehe von 21 px — der Text wird unten abgeschnitten.
     Das ist derselbe Befund wie am 17.09. an "Deutschland"/"Kunde" im
     Registrierungsformular, nur ueber einen anderen Selektor.

     Der lange Selektor ist kein Zierrat, sondern Spezifitaetsarithmetik:
     Astra liefert ueber sein dynamisches Stylesheet eine eigene
     CF7-Regel, .wpcf7 input.wpcf7-form-control:not([type="submit"]),
     die mit (0,3,1) ueber der urspruenglichen Fassung dieser Regel lag.
     Mit .hgi-contact davor sind es (0,4,1) — gewonnen ohne !important.
     Gemessen im echten Browser am 21.09.2026, nicht geschaetzt. */
  height: auto;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  font-family: var(--hgi-font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--hgi-ink);
  background: var(--hgi-surface);
  border: 1px solid var(--hgi-line-2);
  border-radius: var(--hgi-radius-sm);
  box-shadow: none;
}

.hgi-contact textarea {
  resize: vertical;
  min-height: 132px;
}

.hgi-contact input[type="text"]:focus,
.hgi-contact input[type="email"]:focus,
.hgi-contact input[type="tel"]:focus,
.hgi-contact textarea:focus {
  outline: 2px solid var(--hgi-accent);
  outline-offset: 1px;
  border-color: var(--hgi-ink-3);
}

/* GEGEN Astras Floating-Label-Regel. Sie greift ueber den Feldtyp, nicht ueber
   eine Klasse, und schiebt Beschriftungen mit position:absolute und opacity:0
   aus dem Blick. Am Datei-Upload der Registrierung hat sie am 17.09. das
   Label unsichtbar gemacht, obwohl es im DOM stand und per innerText sauber
   zurueckkam. Lehre daraus: Bei Darstellungsfragen ist das Bild das
   Beweismittel, nicht die DOM-Abfrage. */
.hgi-contact .hgi-field > label,
.hgi-contact .wpcf7-form label {
  position: static;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Einwilligung: Kaestchen und Text nebeneinander, Text als Fliesstext.
   GEGEN Astras "appearance: none" ohne Groessenangabe — das Kaestchen ist
   sonst unsichtbar (Befund vom 17.09. an der Datenschutz-Checkbox). */
.hgi-contact .hgi-contact-consent {
  margin-top: 22px;
}

.hgi-contact .hgi-contact-consent .wpcf7-list-item {
  margin: 0;
}

.hgi-contact .hgi-contact-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  color: var(--hgi-ink-2);
}

.hgi-contact .hgi-contact-consent input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--hgi-accent-ink);
}

.hgi-contact .hgi-contact-consent .wpcf7-list-item-label {
  flex: 1 1 auto;
}

.hgi-contact .hgi-contact-consent a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Der Honigtopf. Nicht display:none, sondern aus dem Sichtfeld geschoben:
   Ein Teil der Bots prueft auf display:none und laesst solche Felder aus.
   Zusaetzlich aria-hidden im Markup und tabindex -1 am Feld, damit weder
   Screenreader noch Tastaturbedienung je hier landen. */
.hgi-contact .hgi-contact-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hgi-contact .hgi-contact-submit {
  margin-top: 24px;
}

.hgi-contact input[type="submit"] {
  font-family: var(--hgi-font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--hgi-primary);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* KEIN Weiss auf dem Akzentgruen. #a8d3a8 gegen Weiss ergibt 1,67:1; die
   Regel steht seit v1.44.0 fest und gilt auch hier. Gegen --hgi-accent-ink
   sind es 9,25:1. */
.hgi-contact input[type="submit"]:hover,
.hgi-contact input[type="submit"]:focus-visible {
  background: var(--hgi-accent);
  color: var(--hgi-accent-ink);
}

/* CF7-Rueckmeldungen: Fehler rot, Erfolg im Akzentton, beide als Flaeche und
   nicht nur als farbiger Rand — ein 1-px-Rahmen wird uebersehen. */
.hgi-contact .wpcf7 form .wpcf7-response-output {
  margin: 22px 0 0;
  padding: 14px 18px;
  border: 0;
  border-left: 4px solid var(--hgi-ink-3);
  background: var(--hgi-bg-soft);
  font-size: 15px;
  border-radius: 0 var(--hgi-radius-sm) var(--hgi-radius-sm) 0;
}

.hgi-contact .wpcf7 form.sent .wpcf7-response-output {
  border-left-color: var(--hgi-accent-ink);
  background: var(--hgi-accent-bg);
}

.hgi-contact .wpcf7 form.invalid .wpcf7-response-output,
.hgi-contact .wpcf7 form.failed .wpcf7-response-output,
.hgi-contact .wpcf7 form.spam .wpcf7-response-output {
  border-left-color: var(--hgi-danger);
  background: color-mix(in oklab, var(--hgi-danger) 10%, #fff);
}

.hgi-contact .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--hgi-danger);
}

.hgi-contact .wpcf7-not-valid {
  border-color: var(--hgi-danger);
}

.hgi-contact .wpcf7-spinner {
  margin: 0 0 0 12px;
  vertical-align: middle;
}

/* hCaptcha: Der Rahmen steht schon, das Feld kommt erst mit den Schluesseln
   (siehe Konzept vom 21.09.). Bis dahin greift die Regel ins Leere — das ist
   billiger als eine zweite Runde CSS, wenn das Kaestchen auftaucht. */
.hgi-contact .h-captcha {
  margin-top: 20px;
}

.hgi-contact .hgi-contact-fehlt {
  padding: 16px 18px;
  border-left: 4px solid var(--hgi-danger);
  background: var(--hgi-bg-soft);
  font-size: 15px;
}

/* ─── Custom Block Pattern: SEO-Textblock ───────────────────
   Absichtlich leise. Der Block dient Suchmaschinen und dem Leser, der ganz
   durchgescrollt hat; er darf niemandem im Weg stehen. Kleinerer Grad,
   reduzierter Kontrast, keine Karten, kein Akzentgruen. */

.wp-block-group.hgi-seo {
  /* --hgi-gutter-vw und nicht --hgi-gutter (24.09.2026): Der Abschnitt ist
     vollbreit, sein Elternelement .entry-content aber nur 1200px — die
     100%-Rechnung ergibt dort 0, die Untergrenze greift, und der Inhalt
     beginnt am Seitenrand statt auf der Achse. Solange ALLES darin
     zentriert wurde, fiel das nicht auf: Zentrieren in einem symmetrisch
     gepolsterten vollbreiten Abschnitt trifft die Achse von selbst. Seit
     die Absaetze linksbuendig stehen, muss das Polster selbst stimmen. */
  padding: var(--hgi-innen) var(--hgi-gutter-vw);
  /* Kein eigenes margin mehr: "margin: 0" hier hat (0,2,0) und schlug damit
     die Rhythmus-Regel "body .entry-content > * + *" (0,1,1) — zwei Klassen
     wiegen schwerer als eine Klasse plus ein Typ. Der Abschnitt klebte
     dadurch als einziger direkt am vorigen (gemessen 0 statt 75px). */
  border-top: 1px solid var(--hgi-line);
}

.hgi-seo > * {
  max-width: var(--hgi-max);
  margin-left: auto;
  margin-right: auto;
}

/* Die H1 kam mit 1.71.0 dazu, nach der Zentrier-Entscheidung unten, und
   stand als einziges Element linksbuendig in voller Breite (Dirk, iPhone,
   07.10.2026). Dieselbe Mitte und Lesebreite wie h2 und Absaetze. */
.hgi-seo h1 {
  max-width: 78ch;
  margin-inline: auto;
  text-align: center;
}

.hgi-seo h2 {
  font-size: 22px;
  color: var(--hgi-ink-2);
  margin: 0 0 16px;
  max-width: 78ch;
  margin-inline: auto;
  text-align: center;
}

/* Zentriert (Jonas ueber Dirk, 28.09.2026) — Ruecknahme von 1.52.5.
 *
 * DIE GESCHICHTE, damit sie niemand ein drittes Mal dreht: Bis zum 24.09.
 * war der Block zentriert, aber nur halb — ".hgi-seo > *" gibt allen Kindern
 * margin:auto, und zusammen mit den 78ch stand der 650px breite Absatz in
 * der VOLLEN Abschnittsbreite zentriert, waehrend die Ueberschrift ihre
 * vollen 1200px behielt und links begann. Bei 1600px Fenster: Absatz auf
 * 474, Ueberschrift auf 200. Zwei verschiedene linke Kanten in einem Block
 * — genau das hat Jonas damals als "strange" gemeldet.
 *
 * Am 24.09. wurde es aufgeloest, indem BEIDE nach links kamen. Jetzt wird es
 * aufgeloest, indem beide dieselbe Mitte bekommen: Die Ueberschrift erhaelt
 * dieselbe Lesebreite wie die Absaetze — ohne sie behaelt sie ihre vollen
 * 1200px, und zentrierter Text in einem 1200er-Kasten ueber zentriertem
 * Text in einem 650er-Kasten haette wieder zwei Achsen.
 *
 * Beides ist eine gueltige Antwort auf denselben Fehler. Falsch ist nur,
 * eine der beiden halb umzusetzen.
 *
 * Das !important bleibt und richtet sich gegen ein fremdes: WordPress'
 * Layout-CSS setzt fuer ".is-layout-constrained > *" margin-left/right mit
 * !important. */
.hgi-seo p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--hgi-ink-3);
  margin: 0 0 14px;
  max-width: 78ch;
  text-align: center;
  margin-inline: auto !important;
}

.hgi-seo p:last-child {
  margin-bottom: 0;
}

/* Die Markenlinks sind der eigentliche Nutzen des Absatzes: interne Links auf
   die Markenseiten. Sie duerfen sichtbar sein, ohne den Absatz zu zerhacken. */
.hgi-seo a {
  color: var(--hgi-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--hgi-line-2);
  text-underline-offset: 2px;
}

.hgi-seo a:hover,
.hgi-seo a:focus-visible {
  color: var(--hgi-ink);
  text-decoration-color: currentColor;
}

/* ─── Responsive: Kontakt und SEO ──────────────────────── */

@media (max-width: 880px) {
  .hgi-contact > .wp-block-columns {
    gap: 32px;
  }

  .hgi-contact-formspalte {
    padding: 26px 22px;
  }
}

@media (max-width: 640px) {
  .wp-block-group.hgi-contact {
    padding: 40px var(--hgi-gutter);
  }

  .hgi-contact .hgi-contact-row {
    flex-direction: column;
    gap: 0;
  }

  .hgi-contact input[type="submit"] {
    width: 100%;
  }

  .wp-block-group.hgi-seo {
    padding: var(--hgi-innen) var(--hgi-gutter-vw);
  }
}


/* ─── Senkrechte Achse: Astras Standard-Blockpolster ───────
   BEFUND 21.09.2026 (Dirk, mit eingezeichneten Linien): Der Spec-Strip
   ("One Hub / DE-Lager / B2B+ / 1:1") beginnt 45 px weiter rechts als der
   Signup-Block darueber. An zwei Viewportbreiten nachgemessen — die
   Abweichung ist an beiden gleich, also strukturell und nicht zufaellig.

   URSACHE ist nicht der Abschnitt, sondern eine Regel von Astra:

     .entry-content > .wp-block-group,
     .entry-content > .wp-block-columns, ...
       { padding-left/right: var(--wp--custom--ast-default-block-left-padding) }

   Das sind 45 px am Schreibtisch, 30 px am Tablet, 22,5 px am Telefon. Die
   Abschnitte, die stimmen (hgi-signup, hgi-contact, hgi-seo, hgi-section),
   ueberschreiben das mit einer eigenen Regel auf --hgi-gutter. Die uebrigen
   tun es nicht und erben Astras Wert — sie sitzen dadurch neben der Achse,
   ohne dass man ihnen ansieht, warum.

   Die Achse ist die 1200er-Spalte: links max(28px, (100% - 1200px) / 2),
   rechts dasselbe. --hgi-gutter rechnet genau das aus.

   AUSDRUECKLICH NICHT MIT KORRIGIERT: .hgi-usps. Der Block ist eine echte
   Karte mit Flaeche (#a8d3a8) und 16 px Radius; seine Kanten liegen bereits
   auf der Achse, das Innenpolster ist gewollt. Ein Text, der die Kante
   seiner eigenen Karte beruehrt, waere der schlechtere Tausch. Dasselbe gilt
   fuer die Signup-Karte. */

.entry-content > .wp-block-columns.hgi-spec-strip {
  /* Seit der Text zentriert steht (Dirk, 24.09.2026), traegt der ABSCHNITT
     die Rinne und nicht mehr die erste und letzte Spalte.
     
     Der Grund ist nicht Geschmack, sondern Arithmetik: Solange das Polster
     in den aeusseren Spalten sass, waren die vier Spalten unterschiedlich
     breit — bei 1920px gemessen 648 / 312 / 312 / 647. Linksbuendig faellt
     das nicht auf, weil jeder Text an seiner eigenen Spaltenkante beginnt.
     Zentriert wuerde daraus ein sichtbar ungleicher Rhythmus: die beiden
     aeusseren Beschriftungen saessen weiter aussen als die inneren.

     Mit der Rinne am Abschnitt sind alle vier Spalten gleich breit, und die
     Linien oben und unten laufen trotzdem ueber die volle Breite — sie
     haengen am Rahmen, den das Polster nur innen verschiebt. Die
     senkrechten Trennlinien enden jetzt am Raster statt am Bildschirmrand,
     was bei gleich breiten Spalten die richtige Kante ist. */
  padding-inline: var(--hgi-gutter-vw);
  /* Luft zwischen den Linien wie in v85 (30px); vorher klebten die
     Schlagworte mit 28px Spaltenpolster an den Rahmenlinien. */
  padding-block: 30px;
}

/* ─── Senkrechter Rhythmus ─────────────────────────────────────────────
 *
 * Ein Abstand zwischen Abschnitten, und er kommt aus EINER Quelle (Dirk,
 * 24.09.2026). Vorher addierten sich drei: Astras Block-Polster, eigene
 * Polster und eigene Aussenabstaende — gemessen 90px bis 168px zwischen
 * den Abschnitten, am auffaelligsten mit 90px zwischen der Ueberschrift
 * "Topseller diesen Monat" und ihrem eigenen Produktraster.
 *
 * Astras Polster wird nicht ueberschrieben, sondern auf null gerechnet:
 * Seine Regel liest zwei Custom Properties, und die setzen wir hier. Damit
 * bleibt seine Regel stehen und wirkt nicht mehr — kein Wettlauf um
 * Spezifitaet, und der waagerechte Wert bleibt unangetastet. */
.entry-content {
  --wp--custom--ast-default-block-top-padding: 0px;
  --wp--custom--ast-default-block-bottom-padding: 0px;
}

/* Der Abstand haengt am FOLGENDEN Abschnitt. So bekommt der erste keinen
   (er steht direkt unter dem Hero) und kein Abstand entsteht doppelt. */
body .entry-content > * {
  margin-block: 0;
}

body .entry-content > * + * {
  margin-block-start: var(--hgi-abschnitt);
}

/* Vollflaechige Baender stossen an ihre Nachbarn an (Dirk, 24.09.2026).
 *
 * Quick Order und Kontakt tragen eine eigene Flaeche. Mit Aussenabstand
 * schwebten sie: zwischen Band und Nachbar blitzte der Seitengrund durch,
 * und weil sich die beiden Toene kaum unterscheiden (oklch 0.96 gegen
 * #fafaf5), sah der Streifen nach Darstellungsfehler aus statt nach Absicht.
 * Im Entwurf v85 gab es diesen Fall nicht — dort trug jeder Abschnitt eine
 * Flaeche und sie stiessen aneinander.
 *
 * Der Abstand verschwindet nicht, er wandert nach innen: Das Band bekommt
 * den vollen Abschnittsabstand als Innenpolster, sein Aussenabstand und der
 * des Nachfolgers fallen weg. Zwischen zwei Inhalten liegen damit weiterhin
 * 5rem — nur laeuft die Flaeche jetzt durch. */
body .entry-content > .hgi-qot,
body .entry-content > .hgi-contact,
body .entry-content > .hgi-qot + *,
body .entry-content > .hgi-contact + * {
  margin-block-start: 0;
}

body .entry-content > .hgi-qot,
body .entry-content > .hgi-contact {
  padding-block: var(--hgi-abschnitt);
}

/* Slider und Aktions-Karten sind EIN Block, kein zweiter Abschnitt (Jonas
   ueber Dirk, 28.09.2026): 1rem statt der 5rem des Abschnittsrhythmus.
   Oben die Buehne, direkt darunter die Angebote — mit dem vollen Abstand
   lasen sie sich als zwei voneinander unabhaengige Abschnitte.

   1rem sind hier nicht 16px: Astra setzt die rem-Basis responsiv auf
   93.75 Prozent (Schreibtisch) und 85.5 Prozent (Telefon), der Abstand ist
   also 15px bzw. 13.7px. Das ist so gewollt — er atmet mit dem uebrigen
   Raster. Wer eine feste Zahl ueber alle Geraete will, schreibt hier px.

   Zwei Klassen plus Typ (0,3,1) gegen den Rhythmus "body .entry-content >
   * + *" (0,1,1). */
body .entry-content > .hgi-carousel-wrap--slider + .hgi-carousel-wrap--cta {
  margin-block-start: 1rem;
}

/* AUSNAHME fuer das gruene USP-Band (Dirk, 29.09.2026): Was danach kommt,
   bekommt den Abschnittsabstand zurueck.

   Die Regel darueber (1.56.3, 24.09.) laesst vollflaechige Baender an ihre
   Nachbarn anstossen, und das bleibt richtig — sie ist fuer die Kante
   zwischen einem Band und dem SEITENGRUND gemacht. Dort liegen die Toene so
   dicht beieinander (oklch(0.96 0.005 100) gegen #fafaf5), dass eine Luecke
   wie ein Darstellungsfehler aussah statt wie Absicht.

   Am USP-Band ist die Lage umgekehrt: Dort stossen DREI Flaechen kurz
   hintereinander aufeinander — Seitengrund, Gruen (rgb(168,211,168)) und das
   Grau der Quick Order. Zwischen Gruen und Grau ist der Unterschied gross
   genug, dass ein Zwischenraum als Zwischenraum liest; ohne ihn stapeln sich
   drei Farbfelder auf zwei Kanten.

   KEIN zusaetzlicher Trennstrich: Der Zwischenraum TRENNT bereits. Eine
   Linie darin waeren zwei Trennsignale auf einem Millimeter — derselbe
   Fehler, den die Regel weiter unten fuer den SEO-Block vermeidet.

   Spezifitaet (0,3,1) ueber .wp-block-group, damit die Regel nicht von der
   Reihenfolge abhaengt: Die Null-Regel fuer .hgi-qot traegt (0,2,1). */
body .entry-content > .wp-block-group.hgi-usps + * {
  margin-block-start: var(--hgi-abschnitt);
}

/* Die Trennlinie des SEO-Blocks ist ueberfluessig, wo direkt darueber die
   Kante eines Bandes liegt — zwei Trennsignale auf einem Millimeter. */
body .entry-content > .hgi-contact + .hgi-seo,
body .entry-content > .hgi-qot + .hgi-seo {
  border-top: 0;
}

/* Zwei Bloecke, ein Abschnitt: eine Kopfzeile (Eyebrow, Ueberschrift, "Alle
   ansehen") und das Raster darunter sind im Editor getrennt, gehoeren aber
   zusammen. Zwischen ihnen steht der Titelabstand, nicht der Abschnitts-
   abstand — das ist der Fall "Topseller diesen Monat" (Dirk, 24.09.). */
body .entry-content > .alignwide + .alignwide {
  margin-block-start: var(--hgi-titel);
}

/* Die Treppe innerhalb eines Abschnitts: Label, Ueberschrift, Text. */
.entry-content .hgi-eyebrow {
  /* 4px wie in v85 — bei 11px Schrift wirkten 7,5px wie ein eigener Absatz */
  margin-block-end: 4px;
}

.entry-content h2.wp-block-heading {
  margin-block: 0 1rem;
}

/* Blocks, die WordPress bereits auf 1200 begrenzt (alignwide), brauchen ab
   dieser Breite gar kein seitliches Polster mehr — ihre Kante IST die Achse.
   1264 px ist der Punkt, ab dem die Spalte ihre vollen 1200 px erreicht. */
@media (min-width: 1264px) {
  .entry-content > .wp-block-group.alignwide,
  .entry-content > .wp-block-columns.alignwide {
    padding-inline: 0;
  }
}

/* Darunter zieht WordPress den Block auf die volle Fensterbreite, und bis
   zum 24.09. bekam er dafuer ein Polster von 28px. Das war eine Rechnung
   mit zwei Unbekannten: der Block startet wegen seiner 100vw-Rechnung nicht
   exakt bei 0, und 28 war ohnehin nicht der Rand, auf dem der Rest der Seite
   steht (der lag bei Astras 20). Gemessen am 24.09.: 8px neben der Achse an
   Tablet und Telefon.

   Jetzt wird die Vollbreite gar nicht erst hergestellt: ohne eigenen Rand
   und ohne negative Aussenabstaende IST die Kante des Blocks die Kante von
   .entry-content — also die Achse, ohne Nachrechnen. Beide betroffenen
   Bloecke (Topseller-Zeile und die Kopfzeile darueber) tragen keine eigene
   Flaeche, die bis zum Bildschirmrand laufen muesste. */
@media (max-width: 1263px) {
  /* .ast-separate-container davor, und das ist kein Zierrat: Astra zieht
     alignwide/alignfull unterhalb von 1200px ueber
     "margin-left: calc(-1 * min(var(--ast-container-default-xlg-padding), 20px))"
     aus dem Container heraus — mit (0,3,0) und aus einer Datei, die NACH
     dieser hier geladen wird. Eine gleich starke Regel verliert deshalb,
     auch wenn sie richtig gerechnet ist; gemessen am 24.09.: der Block
     stand danach 20px LINKS der Achse statt 9px rechts davon. Mit der
     Container-Klasse davor sind es (0,4,0), und die Regel kommt an.

     Nachtrag 07.10.2026 (Dirk, iPhone-Screenshot): Die Startseite laeuft
     inzwischen als .ast-plain-container, dort greift Astras Variante
     ".ast-plain-container .entry-content[data-ast-blocks-layout] > .alignwide"
     (0,4,0). Die Topseller standen wieder 20px links der Achse, bei x=1.
     Die eigene Zeile fuer diesen Container hat (0,5,0).

     margin-left/right statt margin-inline, weil Astra die physischen
     Eigenschaften setzt und ein Nebeneinander von logischer und physischer
     Schreibweise nur davon abhaengt, wer zuletzt deklariert wurde. */
  .ast-separate-container .entry-content > .wp-block-group.alignwide,
  .ast-separate-container .entry-content > .wp-block-columns.alignwide,
  .ast-plain-container .entry-content[data-ast-blocks-layout] > .wp-block-group.alignwide,
  .ast-plain-container .entry-content[data-ast-blocks-layout] > .wp-block-columns.alignwide,
  .entry-content > .wp-block-group.alignwide,
  .entry-content > .wp-block-columns.alignwide {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding-inline: 0;
  }
}

/* ─── Versalien nur bis h2 ─────────────────────────────────
   Dirk am 21.09.: Ueberschriften ab h3 in Gross- und Kleinschreibung.

   Zwei Regeln setzen sie bisher auf Versalien — Astras
   "h3, .entry-content :where(h3)" und unser eigenes .wp-block-heading. Die
   meisten h3 der Startseite hoben das schon einzeln wieder auf (Spec-Strip,
   USP-Band, Karussell); uebrig blieb "DAS BRAUCHEN WIR VON DIR" im
   Signup-Block, das die Versalien sogar noch einmal ausdruecklich setzte.

   Statt die naechste Einzelausnahme zu schreiben, gilt die Aussage jetzt
   einmal fuer alle: h1 und h2 tragen die Versalien der Marke, ab h3 ist
   Fliesstext-Schreibweise. Damit kommt keine neue Ueberschrift mehr
   versehentlich in Grossbuchstaben heraus.

   Spezifitaet: Astras :where() zaehlt null, seine Regel wiegt (0,1,0) —
   ".entry-content h3" mit (0,1,1) reicht, kein !important noetig. */

.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  text-transform: none;
}