/* =============================================================================
   bunnefeld Anhängerbau — Gestaltungsebene «Werkstatt-Präzision»
   -----------------------------------------------------------------------------
   Richtung: technisch-utilitaristisch, Schweizer Rasterdisziplin. Der Auftritt
   soll nach Metallbau aussehen, nicht nach Wellness — deshalb harte Kanten
   (Radius 2px statt 16px), Stahl- und Graphittöne als Basis und Rot #D7161E
   ausschließlich als Signalfarbe: Buttons, Marker, Indizes. Keine großen roten
   Flächen — Rot verliert sonst genau die Signalwirkung, für die es da ist.

   Typografie trägt den Auftritt: IBM Plex Sans Condensed für Überschriften
   (dicht, technisch), IBM Plex Sans für Fließtext, IBM Plex Mono für alles
   Zahlenhafte — Preise, Zuladung, Maße lesen sich wie ein Datenblatt.
   Alle Schriften liegen lokal (DSGVO: kein Google-Fonts-CDN).

   Diese Datei lädt NACH main.css/bundle.css und überschreibt gezielt.
   ============================================================================= */

/* ---------- Schriften (self-hosted) ---------- */
@font-face {
  font-family: "Plex";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexCond";
  src: url("../fonts/ibm-plex-sans-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexCond";
  src: url("../fonts/ibm-plex-sans-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Neutraler Graphit.
     Fassung 1 war blaustichig (#14181b/#3a454c) und wirkte unterkühlt, Fassung 2
     überkorrigiert ins Warme — der Sandton (#f6f3ed) las sich als Beige/Orange und
     passte nicht zum Metallbau. Jetzt eine neutrale Grauskala: weder blau noch gelb. */
  --bf-ink:        #1a1a19;
  --bf-steel-900:  #292928;
  --bf-steel-700:  #4a4a48;
  --bf-steel-500:  #767674;
  --bf-steel-300:  #bcbcba;
  --bf-line:       #e2e2e0;
  --bf-bg:         #ffffff;
  --bf-bg-alt:     #f3f3f2;

  /* Signal — sparsam einsetzen */
  --bf-signal:      #d7161e;
  --bf-signal-dark: #b01118;

  /* Fläche des Hauptknopfes. Rot war hier eine große satte Fläche und las sich
     wie ein Preisschild — dieselbe Farbe wirkt als Marker, Ziffer oder Pfeil
     wertiger als als Füllung. Rot bleibt Signalfarbe, trägt aber keine Flächen
     mehr. Wer zurück will, ändert diese zwei Zeilen, nicht zehn Regeln. */
  --bf-btn:       #1a1a19;
  --bf-btn-hover: #000000;

  --bf-sans: "Plex", system-ui, sans-serif;
  --bf-cond: "PlexCond", "Plex", system-ui, sans-serif;
  --bf-mono: "PlexMono", ui-monospace, "SF Mono", monospace;

  /* Typoskala — ACHTUNG: in dieser Datei wird bewusst in PX gerechnet.
     Das Ursprungs-Theme setzt `html { font-size: 62.5% }`; ein rem sind hier also
     10px statt 16px. Jede rem-Angabe kam dadurch um Faktor 1,6 zu klein heraus —
     genau das war der Grund für die durchgehend zu kleine Schrift (Fließtext
     landete bei 11,9px, Kleintext bei 9,4px). Deshalb: keine rem in dieser Datei. */
  /* Feste Stufen — der Audit fand 16 verschiedene Schriftgrößen auf der Seite
     (13/14/15/16/17/18/20/21/22/26/32/33/36/40/44/64). Jetzt sieben. */
  --bf-fs-xs:  14px;
  --bf-fs-sm:  16px;
  --bf-fs-base: 18px;
  --bf-fs-lg:  22px;
  --bf-fs-xl:  clamp(20px, 17px + 0.6vw, 22px);
  --bf-fs-2xl: clamp(26px, 20px + 1.4vw, 36px);
  --bf-fs-3xl: clamp(32px, 22px + 2.2vw, 52px);

  /* 2026-08-01: von 2px auf 0. Zwei Pixel Rundung sieht man nicht, sie machen
     die Kante nur unsauber — an einem Knopf ist entweder Radius zu sehen oder
     gar keiner. Die Karten behalten ihre 8px (Abschnitt „Startseite
     freundlicher"), Flächen dürfen weich sein, Bedienelemente nicht. */
  --bf-radius: 0;
  --bf-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Basis ---------- */
/* Das Ursprungs-Theme setzt in main.css und bundle.css `html, body { height: 100% }`.
   Dadurch ist der Körper genau so hoch wie das Fenster, der Inhalt quillt heraus —
   und `.site-container` misst 900px statt der vollen Seite. Für die klebende
   Kopfleiste ist das entscheidend: ihr Bezugsrahmen endet dort, sie löst sich
   nach rund 770px Scrollhöhe wieder ab (gemessen). `min-height` statt `height`
   lässt den Körper mitwachsen; der Fuß bleibt trotzdem unten, dafür sorgt
   `.site-container { min-height: 100vh }`. */
html,
body {
  height: auto;
  min-height: 100%;
}

body {
  font-family: var(--bf-sans);
  font-size: var(--bf-fs-base);
  line-height: 1.62;
  color: var(--bf-steel-700);
  background: var(--bf-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.title, .shop__card-title, .product__title {
  font-family: var(--bf-cond);
  font-weight: 700;
  color: var(--bf-ink);
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-wrap: balance;
}

h1, .title--h1 { font-size: var(--bf-fs-3xl); }
h2, .title      { font-size: var(--bf-fs-2xl); }
h3              { font-size: var(--bf-fs-xl); }

p { max-width: 68ch; }
/* Das Ursprungs-Theme setzt Absätze ohne Abstand — Fließtext klebte zusammen. */
.text p + p, .wysiwyg p + p, .simple__text p + p, .philosophy__text p + p,
.projects__head .text p + p, .cta__text p + p, .entry-content p + p { margin-top: 18px; }

/* Seitentitel (title-block) trägt die Seite — größer und versal wie H1 */
.title-block h2.title, .title-block .title {
  font-size: var(--bf-fs-2xl);
  text-transform: uppercase;
}
.title-block h2.title::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--bf-signal);
  margin-bottom: 20px;
}

a { color: var(--bf-ink); text-underline-offset: 3px; }
a:hover { color: var(--bf-signal); }

/* Zahlen und technische Angaben wie im Datenblatt */
.bf-mono,
.shop__card-price,
.product__price,
.price ins, .price > .amount,
.woocommerce-Price-amount {
  font-family: var(--bf-mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Sektions-Rhythmus ---------- */
/* Sektionsabstand: 112px oben+unten summierten sich zwischen zwei Blöcken auf über
   200px Leerraum — die Startseite zerfiel in einzelne Inseln. */
section { padding-block: clamp(40px, 24px + 3vw, 68px); }
.container { max-width: 1240px; }

/* Eyebrow: kleiner Versal-Marker mit rotem Strich — das einzige „Ornament“ */
.bf-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--bf-mono);
  font-size: var(--bf-fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bf-steel-500);
  margin-bottom: 16px;
}
.bf-eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--bf-signal);
}

/* ---------- Buttons ---------- */
.btn, .shop__more-btn, .simple__btn, .reasons__btn, .cta__btn,
.wpcf7 .cabin-request__submit, .button, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button {
  /* Das Ursprungs-Theme setzt Höhe/Schriftgröße an anderer Stelle — deshalb hier
     alles explizit, sonst schrumpfen einzelne Buttons auf Mini-Format. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: auto;
  font-family: var(--bf-sans);
  font-weight: 600;
  font-size: var(--bf-fs-sm) !important;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--bf-radius);
  padding: 16px 32px !important;
  transition: background-color .18s var(--bf-ease), color .18s var(--bf-ease),
              border-color .18s var(--bf-ease);
}

.btn--primary, .shop__more-btn, .cta__btn,
.wpcf7 .cabin-request__submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.single_add_to_cart_button {
  background: var(--bf-btn) !important;
  border: 1px solid var(--bf-btn) !important;
  color: #fff !important;
}
.btn--primary:hover, .shop__more-btn:hover, .cta__btn:hover,
.wpcf7 .cabin-request__submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover {
  background: var(--bf-btn-hover) !important;
  border-color: var(--bf-btn-hover) !important;
}

.btn--secondary, .simple__btn, .reasons__btn {
  background: transparent !important;
  border: 1px solid var(--bf-ink) !important;
  color: var(--bf-ink) !important;
}
.btn--secondary:hover, .simple__btn:hover, .reasons__btn:hover {
  background: var(--bf-ink) !important;
  color: #fff !important;
}

:focus-visible {
  outline: 2px solid var(--bf-signal);
  outline-offset: 2px;
}

/* ---------- Hero: dunkel, technisch, mit Datenleiste ---------- */
.hero { position: relative; background: var(--bf-steel-900); }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,24,27,.92) 0%, rgba(20,24,27,.72) 42%, rgba(20,24,27,.12) 100%);
  pointer-events: none;
}
.hero__content { position: relative; z-index: 2; }
.hero .title, .hero h1 {
  color: #fff;
  font-size: var(--bf-fs-3xl);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.hero .text, .hero p { color: rgba(255, 255, 255, .78); font-size: var(--bf-fs-lg); }

/* ---------- Karten: 1px-Kante statt Schatten ---------- */
.shop__card, .categories__item, .info__item, .service__item, .features__item {
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  background: #fff;
  box-shadow: none;
  transition: border-color .18s var(--bf-ease), transform .18s var(--bf-ease);
}
.shop__card:hover, .categories__item:hover {
  border-color: var(--bf-steel-500);
  transform: translateY(-2px);
}

/* Kategorien: Bildkachel mit hartem Label statt weicher Overlay-Karte */
.categories__item-title, .categories__title {
  font-family: var(--bf-cond);
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* ---------- Sektionsköpfe: technisch, versal ----------
   Die Blöcke rendern ihre Überschrift schlicht als h2.title — deshalb hier
   sektionsweise adressiert statt über Block-spezifische Klassen. */
.simple h2.title, .projects h2.title, .reasons h2.title,
.products h2.title, .statement h2.title, .philosophy h2.title,
.timeline h2.title, .gallery h2.title, .service h2.title {
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
/* Kurzer roter Marker über der Überschrift — ersetzt dekorative Trennlinien */
.simple h2.title::before, .projects h2.title::before, .reasons h2.title::before,
.products h2.title::before, .philosophy h2.title::before,
.timeline h2.title::before, .service h2.title::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--bf-signal);
  margin-bottom: 20px;
}

/* ---------- Info/USP: nummeriertes Raster ---------- */
.info__items {
  counter-reset: bf-usp;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--bf-line);
  border: 1px solid var(--bf-line);
}
@media (max-width: 900px) {
  .info__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .info__items { grid-template-columns: 1fr; }
}
.info__item {
  position: relative;
  padding: 36px 28px 32px;
  counter-increment: bf-usp;
  border: 0 !important;          /* Karten-Look des Ursprungs-Themes abschalten */
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: #fff;
}
.info__item::before {
  content: "0" counter(bf-usp);
  font-family: var(--bf-mono);
  font-size: var(--bf-fs-sm);
  font-weight: 500;
  color: var(--bf-signal);
  letter-spacing: .12em;
  display: block;
  margin-bottom: 16px;
}
.info__item-title, .info__title {
  font-family: var(--bf-cond);
  font-size: var(--bf-fs-xl);
  color: var(--bf-ink);
}

/* ---------- Reasons: Datenblatt-Zeilen ---------- */
.reasons__item {
  border-top: 1px solid var(--bf-line);
  padding-block: 28px;
}
.reasons__item-number, .reasons__number {
  font-family: var(--bf-mono);
  color: var(--bf-steel-300);
}

/* ---------- CTA: Graphit statt roter Vollfläche ---------- */
.cta, .cta__inner, .cta__content, .cta__card {
  background: var(--bf-steel-900) !important;
  border: 0 !important;          /* rote Umrandung der geerbten Karte weg */
  border-radius: var(--bf-radius);
}
.cta__card { overflow: hidden; }
.cta .title, .cta__title { color: #fff; text-transform: uppercase; }
.cta .text, .cta__text, .cta__label { color: rgba(255, 255, 255, .72); }
.cta__phone, .cta a[href^="tel:"] {
  font-family: var(--bf-mono);
  color: #fff;
}
.cta__phone:hover { color: var(--bf-signal); }

/* ---------- Shop ---------- */
.shop__card-title {
  font-size: var(--bf-fs-lg);
  line-height: 1.2;
}
.shop__card-price { font-size: var(--bf-fs-lg); color: var(--bf-ink); }
.shop__card-price--request { color: var(--bf-signal); }
.shop__card-badge {
  font-family: var(--bf-mono);
  font-size: var(--bf-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--bf-radius);
}

/* Produkt-Datenblatt: Tabellen technisch, nicht dekorativ */
.product__specs table, .woocommerce-product-attributes {
  font-family: var(--bf-mono);
  font-size: var(--bf-fs-sm);
  border-collapse: collapse;
  width: 100%;
}
.product__specs th, .product__specs td,
.woocommerce-product-attributes th, .woocommerce-product-attributes td {
  border-bottom: 1px solid var(--bf-line);
  padding: 12px 8px;
  text-align: left;
}

/* ---------- Header/Footer ---------- */
.header { border-bottom: 1px solid var(--bf-line); }
.header__nav a, .menu-item a {
  font-family: var(--bf-sans);
  font-weight: 500;
  font-size: var(--bf-fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.footer { background: var(--bf-steel-900); color: rgba(255, 255, 255, .72); }
.footer a { color: rgba(255, 255, 255, .86); }
.footer a:hover { color: #fff; }
.footer .title, .footer h2, .footer h3 { color: #fff; }
.footer__bottom, .footer__copyright { font-family: var(--bf-mono); font-size: var(--bf-fs-xs); }

/* Logo bleibt rot auf Weiß — im dunklen Footer invertierte Fläche vermeiden */
.footer__logo img { background: #fff; padding: 10px 14px; border-radius: var(--bf-radius); }

/* ---------- Formulare ---------- */
.cabin-request__input, .cabin-request__textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  padding: 13px 16px;
  font-family: var(--bf-sans);
  font-size: var(--bf-fs-base);
}
.cabin-request__input:focus, .cabin-request__textarea:focus {
  border-color: var(--bf-ink);
  outline: none;
}
.cabin-request__label {
  font-family: var(--bf-mono);
  font-size: var(--bf-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bf-steel-500);
}

/* ---------- Bilder ---------- */
img { border-radius: var(--bf-radius); }
.hero img, .hero__image { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =============================================================================
   Eigener Header & Footer — ersetzen die geerbten Bauteile vollständig
   ============================================================================= */

.bfh__skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--bf-ink); color: #fff; padding: 12px 20px;
}
.bfh__skip:focus { left: 0; }

/* Kopf und Seitenkopf sind hell — und zwar beide.
   Erst war die weiße Leiste zwischen dunkler Servicezeile und dunklem Kopfblock
   eingeklemmt, der Übergang brach hart ab. Der Kopf in Graphit hat die Kante
   zwar geschlossen, aber der Einstieg wurde düster. Also andersherum: weiße
   Leiste, weißer Kopfblock, eine durchgehende helle Fläche — die Kante gibt es
   dann gar nicht erst. Dunkel bleiben nur die schmale Servicezeile ganz oben
   und die Datenleiste unter dem Bildstreifen. */
/* Die Leiste klebt am oberen Rand — und zwar der KOPF selbst, nicht das Kind
   `.bfh__bar`. Letzteres stand bis 31.08.2026 auf `position: sticky`, hatte aber
   nie eine Wirkung: sein Bezugsrahmen ist `.bfh`, und der ist genau so hoch wie
   die Leiste. Ein Element kann in einem Rahmen seiner eigenen Höhe nirgendwo
   hinkleben — gemessen lief die Leiste bei jedem Scrollwert exakt mit
   (top = -scrollY). Mit dem Wegfall der Servicezeile fiel auch der letzte Rest
   Spielraum weg. `.bfh` ist ein Flex-Kind von `.site-container`, dessen Höhe die
   ganze Seite ist — dort greift `sticky`. */
.bfh { position: sticky; top: 0; z-index: 60; background: #fff; }

/* Servicezeile */
/* Instagram und Facebook standen hier vom 25.08. bis zum 06.09.2026 als Symbole
   in der Leiste. Seit der Symbolreihe nach dem Vorbild (harbeck.css, Teil 25)
   belegen Telefon und E-Mail diese zwei Plätze; die Kanäle stehen weiterhin im
   Fußbereich und in der Schublade des Telefons. Die Regel bleibt als Halterung
   stehen, falls die Symbole zurückkehren sollen. */
.bfh__action--social,
.bfh__action--kanal { color: var(--bf-ink-soft, #5c5c5c); }
.bfh__action--social:hover,
.bfh__action--kanal:hover { color: var(--bf-signal); border-color: currentColor; }
/* Das Ausblenden am Telefon steht weiter unten, direkt hinter `.bfh__action` —
   dort, wo `display: inline-flex` gesetzt wird. Hier oben stünde es VOR dieser
   Zeile und würde bei gleicher Spezifität verlieren; genau daran hing am
   06.09. die Symbolreihe am 390px-Schirm mit sechs Zeichen fest. */

.bfh__service {
  background: var(--bf-ink);
  color: rgba(255,255,255,.72);
  font-family: var(--bf-mono);
  font-size: var(--bf-fs-xs);
  letter-spacing: .04em;
}
.bfh__service-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 32px);
  display: flex; align-items: center; gap: 24px;
}
.bfh__service-item--wide { margin-right: auto; }
.bfh__service-phone {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; text-decoration: none;
}
.bfh__service-phone:hover { color: var(--bf-signal); }
@media (max-width: 860px) {
  .bfh__service-item { display: none; }
  .bfh__service-inner { justify-content: center; padding-inline: 16px; }
}

/* Hauptleiste */
.bfh__bar {
  border-bottom: 1px solid var(--bf-line);
  background: #fff;
  position: relative; z-index: 55;
  transition: box-shadow .2s var(--bf-ease);
}
.bfh.is-stuck .bfh__bar { box-shadow: 0 1px 0 var(--bf-line), 0 12px 28px rgba(20,24,27,.07); }
.bfh__inner {
  max-width: 1240px; margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 32px);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
}

/* Logo deutlich größer als im Ursprungs-Theme.
   2026-08-04: auf Kundenwunsch nochmals verdoppelt (42–58px → 84–116px). */
.bfh__logo { display: block; flex: none; }
.bfh__logo img {
  display: block;
  height: clamp(84px, 6.8vw, 116px);
  width: auto;
  border-radius: 0;
  transition: height .2s var(--bf-ease);
}
.bfh.is-stuck .bfh__logo img { height: clamp(72px, 5.2vw, 88px); }
.bfh__logo-text {
  font-family: var(--bf-cond); font-size: 28px; color: var(--bf-signal);
}

/* Navigation */
.bfh__nav { margin-left: auto; }
.bfh__menu {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 32px);
  list-style: none; margin: 0; padding: 0;
}
.bfh__menu a {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--bf-sans);
  font-weight: 600;
  font-size: var(--bf-fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bf-ink);
  border-bottom: 2px solid transparent;
}
.bfh__menu a:hover,
.bfh__menu .current-menu-item > a {
  color: var(--bf-ink);
  border-bottom-color: var(--bf-signal);
}
/* ---------- Aufklappende Unterpunkte ----------
   Neu am 25.08.2026: Das Menü hatte bis dahin nur eine Ebene. «Unternehmen»
   und «Infos» tragen jetzt Kinder, und ohne diese Regeln stünde deren <ul>
   als offene Liste mitten in der Kopfleiste.

   Aufgeklappt wird über `:hover` UND `:focus-within` — mit der Tastatur ist
   die Liste sonst nicht erreichbar. Der Elternpunkt bleibt ein echter Link:
   wer nicht aufklappen kann, landet trotzdem auf einer sinnvollen Seite. */
.bfh__menu > li { position: relative; }

/* Der Pfeil zeigt an, dass es weitergeht — sonst sieht der Punkt aus wie jeder
   andere und niemand fährt ihn an. */
.bfh__menu > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.bfh__menu .sub-menu {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 70;
  min-width: 260px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--bf-line);
  border-radius: 0;
  box-shadow: 0 20px 44px rgba(20, 24, 27, .12);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Zwischen Elternpunkt und Liste liegt die Höhe der Kopfleiste. Ohne diese
   unsichtbare Brücke reißt der Zeigerkontakt auf halbem Weg ab und die Liste
   klappt wieder zu, bevor man sie erreicht. */
.bfh__menu .sub-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -18px;
  height: 18px;
}

.bfh__menu > li:hover > .sub-menu,
.bfh__menu > li:focus-within > .sub-menu,
.bfh__menu > li.is-open > .sub-menu {   /* Fingertipp, siehe bunnefeld-ui.js */
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.bfh__menu .sub-menu a {
  display: block;
  padding: 10px 22px;
  border-bottom: 0;
  letter-spacing: .05em;
  white-space: nowrap;
}
.bfh__menu .sub-menu a:hover,
.bfh__menu .sub-menu .current-menu-item > a {
  color: var(--bf-signal);
  border-bottom: 0;
}

/* ---------- Sortiment unter «Anhänger» (29.09.2026) ----------
   Zwölf Warengruppen als Bildreihe, Vorbild WM Meyer (Änderungsliste 26.09.):
   freigestelltes Fahrzeug, darunter der Name. Das Feld ist breiter als der
   Menüpunkt, deshalb hängt es an der Kopfleiste statt am <li> und wird unter
   ihr zentriert. Auf- und Zuklappen laufen über dieselben Regeln wie die
   schmalen Listen oben (:hover, :focus-within, .is-open). */
.bfh__menu > li.bfh__sortiment { position: static; }
/* Das Feld hängt an der ganzen Kopfzeile (.bfh__inner), nicht an der Navigation:
   die Navigation steht links neben dem Logo, ein dort zentriertes Feld ragte
   rechts aus dem Fenster. */
.bfh__inner { position: relative; }
.bfh__menu > li.bfh__sortiment > .sub-menu {
  left: 0; right: 0;
  margin: 0 auto;
  top: calc(100% - 8px);
  transform: translate(0, 6px);
  width: min(1040px, calc(100vw - 48px));
  min-width: 0;
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst weitet «Fahrradtransportanhänger» seine
     Spalte auf Wortbreite und die letzte Spalte rutscht aus dem Feld. Vier
     Spalten à drei Zeilen — so passen auch die langen Namen in zwei Zeilen. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 16px;
  padding: 26px 28px 22px;
}
.bfh__sortiment-punkt a {
  display: block;
  padding: 0;
  text-align: center;
  white-space: normal;
  letter-spacing: .04em;
}
.bfh__sortiment-feld {
  display: flex; align-items: center; justify-content: center;
  height: 96px;
  margin-bottom: 10px;
  padding: 8px;
  background: var(--bf-bg-alt, #ededed);
}
.bfh__sortiment-bild {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform .18s ease;
}
.bfh__sortiment-punkt a:hover .bfh__sortiment-bild { transform: scale(1.04); }
.bfh__sortiment-name {
  display: block;
  font-size: 12px; line-height: 1.3;
  font-weight: 600;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Ein Punkt ohne Bild (z. B. Pferdeanhänger, Foto folgt) zeigt das Feld leer
   in Hausgrau — die Reihe bleibt gleichmäßig. */
/* Die schmalen Listen zentrieren sich per translate(-50%); das breite Feld
   sitzt über left/right + margin auto und darf nicht mitgeschoben werden. */
.bfh__menu > li.bfh__sortiment:hover > .sub-menu,
.bfh__menu > li.bfh__sortiment:focus-within > .sub-menu,
.bfh__menu > li.bfh__sortiment.is-open > .sub-menu { transform: translate(0, 0); }

@media (max-width: 1023px) { .bfh__nav { display: none; } }

/* Aktionen */
.bfh__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.bfh__action {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  background: #fff; color: var(--bf-ink);
  cursor: pointer;
  transition: border-color .18s var(--bf-ease), color .18s var(--bf-ease);
}
.bfh__action:hover { border-color: var(--bf-ink); }
/* Telefon und E-Mail (früher Instagram und Facebook) fallen unter 1101px weg:
   daneben stehen Suche, Warenkorb und die Menütaste, sechs Zeichen sprengen die
   Zeile. Beide Kanäle stehen in der Schublade als Text. Muss hinter der Zeile
   mit `display: inline-flex` stehen — gleiche Spezifität, es entscheidet die
   Reihenfolge. */
@media (max-width: 1100px) {
  .bfh__action--social,
  .bfh__action--kanal { display: none; }
}
.bfh__badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--bf-signal); color: #fff;
  font-family: var(--bf-mono); font-size: 11px; line-height: 1;
  border-radius: 999px;
}
.bfh__cta {
  display: inline-flex; align-items: center;
  height: 42px; padding: 0 22px;
  background: var(--bf-btn); color: #fff;
  font-weight: 600; font-size: var(--bf-fs-sm);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--bf-radius);
}
.bfh__cta:hover { background: var(--bf-btn-hover); color: #fff; }
@media (max-width: 640px) { .bfh__cta { display: none; } }

.bfh__burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  background: #fff; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.bfh__burger span { display: block; width: 18px; height: 2px; background: var(--bf-ink); }
@media (max-width: 1023px) { .bfh__burger { display: flex; } }

/* Geschlossene Vollbild-Layer wirklich aus dem Weg räumen.
   Das Attribut `hidden` wirkt nur über `display:none` aus dem Browser-Stylesheet — ein
   eigenes `display:grid` (unten) schlägt es. Ohne diese Regel liegt der unsichtbare
   Such-Layer (opacity:0, z-index:90) über der ganzen Seite und schluckt jeden Klick,
   auch den auf Logo, Menü, Warenkorb und Anfrage-Button. */
.bfh__search[hidden],
.bfh__mobile[hidden] { display: none; }

/* Vollbild-Suche */
.bfh__search {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,24,27,.92);
  opacity: 0; transition: opacity .2s var(--bf-ease);
  display: grid; place-items: start center;
  padding: clamp(48px, 12vh, 144px) 20px;
}
.bfh__search.is-open { opacity: 1; }
.bfh__search-inner {
  position: relative;
  width: min(760px, 100%);
  background: #fff;
  border-radius: var(--bf-radius);
  padding: clamp(28px, 4vw, 44px);
}
.bfh__search-label {
  display: block;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--bf-steel-500);
  margin-bottom: 12px;
}
.bfh__search-row { display: flex; gap: 8px; }
.bfh__search-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  padding: 16px 18px;
  font-family: var(--bf-sans); font-size: var(--bf-fs-lg);
  color: var(--bf-ink);
}
.bfh__search-input:focus { outline: none; border-color: var(--bf-ink); }
.bfh__search-submit {
  flex: none;
  background: var(--bf-btn); color: #fff; border: 0;
  border-radius: var(--bf-radius);
  padding: 0 28px;
  font-weight: 600; font-size: var(--bf-fs-sm);
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.bfh__search-submit:hover { background: var(--bf-btn-hover); }
.bfh__search-hints {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 20px;
}
.bfh__search-hints-label {
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--bf-steel-500);
}
.bfh__search-hints a {
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  padding: 6px 12px;
  font-size: var(--bf-fs-sm); text-decoration: none; color: var(--bf-steel-700);
}
.bfh__search-hints a:hover { border-color: var(--bf-ink); color: var(--bf-ink); }
.bfh__search-close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: var(--bf-steel-500);
}
.bfh__search-close:hover { color: var(--bf-ink); }

/* Mobiles Menü */
.bfh__mobile {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bf-ink);
  opacity: 0; transition: opacity .2s var(--bf-ease);
  overflow-y: auto;
}
.bfh__mobile.is-open { opacity: 1; }
.bfh__mobile-inner { padding: 80px 24px 48px; max-width: 520px; }
.bfh__mobile-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; color: #fff; cursor: pointer;
}
.bfh__mobile-menu { list-style: none; margin: 0 0 40px; padding: 0; }
.bfh__mobile-menu li { border-bottom: 1px solid rgba(255,255,255,.12); }
.bfh__mobile-menu a {
  display: block; padding: 16px 0;
  font-family: var(--bf-cond); font-size: 24px; text-transform: uppercase;
  color: #fff; text-decoration: none;
}
.bfh__mobile-menu a:hover { color: var(--bf-signal); }
.bfh__mobile-menu .sub-menu { list-style: none; margin: 0 0 8px; padding: 0 0 0 18px; }
.bfh__mobile-menu .sub-menu li { border-bottom: 0; }
.bfh__mobile-menu .sub-menu a {
  padding: 10px 0;
  font-family: var(--bf-sans);
  font-size: 16px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .78);
}
.bfh__mobile-menu .sub-menu a:hover { color: #fff; }
.bfh__mobile-contact { color: rgba(255,255,255,.7); font-size: var(--bf-fs-sm); }
.bfh__mobile-contact a { display: block; color: #fff; text-decoration: none; margin-bottom: 6px; }
.bfh__mobile-phone { font-family: var(--bf-mono); font-size: var(--bf-fs-lg); }
.bfh__mobile-cta {
  display: inline-flex !important; align-items: center;
  margin-top: 24px; padding: 14px 24px;
  background: var(--bf-btn); color: #fff !important;
  text-transform: uppercase; font-weight: 600; letter-spacing: .06em;
  border-radius: var(--bf-radius);
}
body.bf-locked { overflow: hidden; }

/* ---------- Footer ---------- */
/* 2026-08-01: Der Fuß war graphitschwarz mit roten Spaltentiteln. Schwarz plus
   Rot liest sich billig — es ist die Farbkombination von Sonderangebot und
   Discounter, nicht die eines Metallbaubetriebs. Jetzt hellgraue Fläche mit
   dunkler Schrift: der Fuß bleibt vom weißen Inhalt abgesetzt, drängt sich aber
   nicht vor die Seite. Rot kommt hier gar nicht mehr vor. */
.bff {
  background: var(--bf-bg-alt);
  color: var(--bf-steel-700);
  border-top: 1px solid var(--bf-line);
}
.bff__inner {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(48px, 5vw, 72px) clamp(16px, 4vw, 32px) clamp(32px, 3vw, 48px);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 960px) { .bff__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bff__inner { grid-template-columns: 1fr; } }

/* Die weiße Platte unter dem Logo war nur nötig, solange der Fuß schwarz war —
   auf hellem Grund sähe sie aus wie ein aufgeklebter Zettel. */
.bff__logo { display: inline-block; background: none; padding: 0; }
/* 2026-08-04: doppelte Höhe wie im Kopf, damit beide Marken gleich stark stehen. */
.bff__logo img { display: block; height: 88px; width: auto; border-radius: 0; }
.bff__text { margin-top: 20px; font-size: var(--bf-fs-sm); max-width: 38ch; }
.bff__facts {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .06em; text-transform: uppercase;
}
.bff__facts span {
  border: 1px solid var(--bf-steel-300); border-radius: var(--bf-radius);
  padding: 5px 10px; color: var(--bf-steel-700); background: #fff;
}

.bff__title {
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bf-steel-500); margin-bottom: 16px;
}
.bff__title--spaced { margin-top: 32px; }
.bff__list { list-style: none; margin: 0; padding: 0; }
.bff__list li + li { margin-top: 10px; }
.bff__list--tight li + li { margin-top: 7px; }
.bff__list a, .bff__contact a, .bff__social a {
  color: var(--bf-steel-700); text-decoration: none; font-size: var(--bf-fs-sm);
}
.bff__list a:hover, .bff__contact a:hover, .bff__social a:hover {
  color: var(--bf-ink); text-decoration: underline; text-underline-offset: 3px;
}

.bff__addr { font-size: var(--bf-fs-sm); line-height: 1.6; }
.bff__addr strong { color: var(--bf-ink); font-weight: 600; }
.bff__contact { margin-top: 16px; display: grid; gap: 4px; }
.bff__phone { font-family: var(--bf-mono); font-size: var(--bf-fs-lg); color: var(--bf-ink) !important; }
.bff__hours { margin-top: 16px; font-size: var(--bf-fs-sm); line-height: 1.6; }
.bff__social { margin-top: 20px; display: flex; gap: 16px; }

.bff__bar { border-top: 1px solid var(--bf-line); }
.bff__bar-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 32px);
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  color: var(--bf-steel-500);
}
.bff__vat { margin-left: auto; }

/* =============================================================================
   Shop-Raster: Karten wie Datenblätter
   Ziel: der Preis soll im Verhältnis zur sichtbaren Technik günstig wirken —
   also Technik zeigen, nicht nur Bild und Zahl.
   ============================================================================= */

.shop__cards, .products, ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.shop__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.shop__card-image-wrap { background: var(--bf-bg-alt); }
.shop__card-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  border-radius: 0;
  transition: transform .4s var(--bf-ease);
}
.shop__card:hover .shop__card-image { transform: scale(1.03); }

.shop__card-info { padding: 20px 20px 8px; }
.shop__card-title {
  display: block;
  font-family: var(--bf-cond);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bf-ink);
  text-decoration: none;
  margin-bottom: 10px;
}
.shop__card-title:hover { color: var(--bf-signal); }

/* Technische Kurzdaten unter dem Titel (aus ACF, s. shop_archive.php) */
.bf-specline {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 14px;
  font-family: var(--bf-mono);
  font-size: var(--bf-fs-xs);
  letter-spacing: .04em;
  color: var(--bf-steel-500);
}
.bf-specline span {
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  padding: 4px 8px;
  white-space: nowrap;
}

.shop__card-price {
  font-size: 22px;
  color: var(--bf-ink);
}
.shop__card-price::after {
  content: "inkl. MwSt.";
  display: block;
  font-family: var(--bf-sans);
  font-size: var(--bf-fs-xs);
  font-weight: 400;
  color: var(--bf-steel-500);
  letter-spacing: 0;
  margin-top: 2px;
}
.shop__card-price--request::after { content: "Sonderbau – Preis nach Anfrage"; }

.shop__card-actions { margin-top: auto; padding: 0 20px 20px; }

/* Detailseite: Datenblatt-Anmutung */
.product__price { font-size: clamp(28px, 19.2px + 1.6vw, 40px); }
.product__gallery img { border-radius: var(--bf-radius); }
.bf-datasheet {
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
}
.bf-datasheet__row {
  display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bf-line);
  font-family: var(--bf-mono);
  font-size: var(--bf-fs-sm);
}
.bf-datasheet__row:last-child { border-bottom: 0; }
.bf-datasheet__row span:first-child { color: var(--bf-steel-500); }
.bf-datasheet__row span:last-child { color: var(--bf-ink); }

/* =============================================================================
   Produktseite — Datenblatt statt Wellness-Kachel
   Links das Foto in ruhigem Rahmen, rechts die Entscheidungsspalte: Preis, die
   vier wichtigsten Zahlen, Lieferzeit, Kaufen. Alles Zahlenhafte in Mono.
   ============================================================================= */

.bf-pd { padding-block: clamp(24px, 16px + 2vw, 44px) clamp(48px, 32px + 4vw, 80px); }

.bf-pd__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .bf-pd__top { grid-template-columns: 1fr; } }

/* ---------- Galerie ---------- */
.bf-pd__stage {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bf-bg-alt);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
}
.bf-pd__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bf-pd__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  color: var(--bf-ink); cursor: pointer;
  transition: background .18s var(--bf-ease), border-color .18s var(--bf-ease);
}
.bf-pd__nav:hover { background: #fff; border-color: var(--bf-ink); }
.bf-pd__nav--prev { left: 14px; }
.bf-pd__nav--next { right: 14px; }

.bf-pd__counter {
  position: absolute; right: 14px; bottom: 14px;
  padding: 5px 10px;
  background: rgba(20,24,27,.86); color: #fff;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .06em; border-radius: var(--bf-radius);
}

.bf-pd__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.bf-pd__thumb {
  padding: 0; aspect-ratio: 1;
  background: var(--bf-bg-alt);
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  cursor: pointer; overflow: hidden;
  transition: border-color .18s var(--bf-ease), opacity .18s var(--bf-ease);
  opacity: .72;
}
.bf-pd__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bf-pd__thumb:hover { opacity: 1; }
.bf-pd__thumb.is-active { border-color: var(--bf-ink); opacity: 1; }

/* ---------- Entscheidungsspalte ---------- */
@media (min-width: 901px) { .bf-pd__info { position: sticky; top: 104px; } }

.bf-pd__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 12px; max-width: none;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--bf-steel-500);
}
.bf-pd__eyebrow span + span { padding-left: 12px; border-left: 1px solid var(--bf-line); }

.bf-pd__title {
  font-family: var(--bf-cond); font-weight: 700;
  font-size: clamp(32px, 20.8px + 2vw, 48px);
  line-height: 1.02; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--bf-ink);
  margin: 0 0 24px;
}

.bf-pd__price {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 0;
  border-top: 1px solid var(--bf-line);
  border-bottom: 1px solid var(--bf-line);
}
.bf-pd__price-value {
  font-family: var(--bf-mono); font-weight: 500;
  font-size: clamp(32px, 24px + 1.4vw, 44px);
  letter-spacing: -0.02em; color: var(--bf-ink);
  font-variant-numeric: tabular-nums;
}
.bf-pd__price--request .bf-pd__price-value {
  font-family: var(--bf-cond); text-transform: uppercase; font-size: clamp(24px, 17.6px + 1.2vw, 32px);
}
.bf-pd__price-note { font-size: var(--bf-fs-sm); color: var(--bf-steel-500); }
.bf-pd__price-note a { color: var(--bf-steel-700); text-decoration: underline; }

/* ---------- Staffelpreise (inc/staffelpreise.php) ---------- */
/* Gleiches Raster wie die Eckdaten darunter: zwei Spalten, Mono auf den Zahlen. */
.product__staffel {
  width: 100%; margin: 16px 0 0; border-collapse: collapse;
  font-family: var(--bf-mono); font-size: var(--bf-fs-sm);
}
.product__staffel caption {
  text-align: left; padding-bottom: 8px;
  font-family: var(--bf-cond); text-transform: uppercase; letter-spacing: .06em;
  color: var(--bf-steel-500);
}
.product__staffel th,
.product__staffel td {
  padding: 9px 0; border-bottom: 1px solid var(--bf-line); text-align: left; font-weight: 400;
}
.product__staffel th { color: var(--bf-steel-500); }
.product__staffel td { color: var(--bf-ink); text-align: right; }

/* ---------- Variantenauswahl ---------- */
/* Sichtbar bleibt nur die Auswahlliste. Preis, Menge und der Woo-Knopf stehen
   im eigenen Layout schon darüber und darunter — doppelt wäre es verwirrend. */
.bf-pd__varianten { margin: 24px 0 0; }
.bf-pd__varianten .woocommerce-variation-price,
.bf-pd__varianten .woocommerce-variation-availability,
.bf-pd__varianten .woocommerce-variation-description,
.bf-pd__varianten .quantity,
.bf-pd__varianten .single_add_to_cart_button { display: none !important; }
.bf-pd__varianten table.variations { width: 100%; border-collapse: collapse; }
.bf-pd__varianten table.variations th.label {
  padding: 0 0 8px; text-align: left; font-weight: 400;
  font-family: var(--bf-cond); text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--bf-fs-sm); color: var(--bf-steel-500);
}
.bf-pd__varianten table.variations td.value { display: block; padding: 0; }
.bf-pd__varianten select {
  width: 100%; height: 60px; padding: 0 44px 0 16px;
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  background: #fff; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23444' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  font-family: var(--bf-mono); font-size: var(--bf-fs-base); color: var(--bf-ink);
}
.bf-pd__varianten select:focus-visible { outline: 2px solid var(--bf-signal); outline-offset: 2px; }
.bf-pd__varianten .reset_variations {
  display: inline-block; margin-top: 8px;
  font-size: var(--bf-fs-sm); color: var(--bf-steel-700);
}

.bf-pd__facts { margin: 24px 0 0; }
.bf-pd__fact {
  display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--bf-line);
  font-family: var(--bf-mono); font-size: var(--bf-fs-sm);
}
.bf-pd__fact dt { color: var(--bf-steel-500); }
.bf-pd__fact dd { margin: 0; color: var(--bf-ink); }

.bf-pd__delivery {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 0; max-width: none;
  font-size: var(--bf-fs-sm); color: var(--bf-steel-700);
}
.bf-pd__delivery svg { flex: none; color: var(--bf-signal); }

.bf-pd__buy { display: flex; gap: 12px; margin-top: 24px; }
.bf-pd__qty {
  display: flex; align-items: center; flex: none;
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
}
.bf-pd__qty .product__qty-btn {
  width: 52px; height: 60px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--bf-mono); font-size: 20px; color: var(--bf-ink);
}
.bf-pd__qty .product__qty-btn:hover { color: var(--bf-signal); }
.bf-pd__qty .product__qty-input {
  width: 44px; height: 60px; padding: 0; border: 0; text-align: center;
  background: none; font-family: var(--bf-mono); font-size: var(--bf-fs-base); color: var(--bf-ink);
}

.bf-pd__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 32px;
  border-radius: var(--bf-radius); border: 1px solid transparent;
  font-family: var(--bf-sans); font-weight: 600; font-size: var(--bf-fs-sm);
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: background .18s var(--bf-ease), color .18s var(--bf-ease), border-color .18s var(--bf-ease);
}
.bf-pd__btn--primary { flex: 1; background: var(--bf-btn); color: #fff; }
.bf-pd__btn--primary:hover { background: var(--bf-btn-hover); color: #fff; }
.bf-pd__btn--primary[disabled] { background: var(--bf-bg-alt); color: var(--bf-steel-500); cursor: not-allowed; }
.bf-pd__btn--ghost { width: 100%; background: #fff; border-color: var(--bf-line); color: var(--bf-ink); }
.bf-pd__btn--ghost:hover { border-color: var(--bf-ink); }
.bf-pd__secondary { margin-top: 12px; }

.bf-pd__usp {
  list-style: none; margin: 32px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--bf-line);
  display: grid; gap: 10px;
  font-size: var(--bf-fs-sm); color: var(--bf-steel-700);
}
.bf-pd__usp li { display: flex; gap: 12px; }
.bf-pd__usp li::before { content: "—"; color: var(--bf-signal); flex: none; }

/* ---------- Tabs ---------- */
.bf-pd__details { margin-top: clamp(48px, 32px + 4vw, 80px); }
.bf-pd__tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--bf-line);
  margin-bottom: clamp(28px, 16px + 2vw, 44px);
  background: none; padding: 0;
}
.bf-pd__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 22px; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--bf-cond); font-weight: 600; font-size: 19px;
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--bf-steel-500); cursor: pointer; white-space: nowrap;
  transition: color .18s var(--bf-ease), border-color .18s var(--bf-ease);
}
.bf-pd__tab p { margin: 0; font: inherit; }
.bf-pd__tab:hover { color: var(--bf-ink); }
.bf-pd__tab.is-active { color: var(--bf-ink); border-bottom-color: var(--bf-signal); }
@media (max-width: 560px) { .bf-pd__tab { padding: 12px 16px; font-size: 17px; } }

.bf-pd__panel { display: none; }
.bf-pd__panel.is-active { display: block; }
.bf-pd__panel > .text p,
.bf-pd__panel > .text li { font-size: var(--bf-fs-base); line-height: 1.62; color: var(--bf-steel-700); }
.bf-pd__panel > .text p { max-width: 72ch; }
.bf-pd__panel > .text h2, .bf-pd__panel > .text h3 { margin: 32px 0 12px; }

/* ---------- Ähnliche Modelle: Raster statt kaputtem Slider ---------- */
.bf-related { padding-block: 0 clamp(56px, 32px + 5vw, 96px); }
.bf-related__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;
  padding-top: clamp(40px, 32px + 2vw, 64px); border-top: 1px solid var(--bf-line);
}
.bf-related__title {
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  font-size: var(--bf-fs-xl); color: var(--bf-ink); margin: 0;
}
.bf-related__all {
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--bf-steel-500); text-decoration: none; white-space: nowrap;
}
.bf-related__all:hover { color: var(--bf-signal); }
.bf-related__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;
}
.bf-related__card {
  display: flex; flex-direction: column;
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  background: #fff; overflow: hidden; text-decoration: none;
  transition: border-color .18s var(--bf-ease);
}
.bf-related__card:hover { border-color: var(--bf-ink); }
.bf-related__img { aspect-ratio: 4 / 3; background: var(--bf-bg-alt); overflow: hidden; }
.bf-related__img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--bf-ease);
}
.bf-related__card:hover .bf-related__img img { transform: scale(1.03); }
.bf-related__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.bf-related__name {
  font-family: var(--bf-cond); font-weight: 600; text-transform: uppercase;
  font-size: 19px; line-height: 1.15; color: var(--bf-ink);
}
.bf-related__card:hover .bf-related__name { color: var(--bf-signal); }
.bf-related__price {
  font-family: var(--bf-mono); font-size: var(--bf-fs-base); color: var(--bf-ink);
  font-variant-numeric: tabular-nums; margin-top: auto;
}
.bf-related__price small {
  display: block; font-family: var(--bf-sans); font-size: var(--bf-fs-xs);
  color: var(--bf-steel-500); margin-top: 2px;
}

/* Textteil + Beratungsspalte: der Fließtext lief vorher als schmale Säule
   ins Leere, rechts blieb die halbe Seite weiß. */
.bf-pd__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .bf-pd__body { grid-template-columns: 1fr; } }

.bf-pd__aside {
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  padding: 24px;
  background: var(--bf-bg-alt);
}
.bf-pd__aside-label {
  margin: 0 0 10px; max-width: none;
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  font-size: 20px; color: var(--bf-ink); line-height: 1.1;
}
.bf-pd__aside-text { margin: 0 0 20px; max-width: none; font-size: var(--bf-fs-sm); }
.bf-pd__aside-phone {
  display: block;
  font-family: var(--bf-mono); font-size: 22px; letter-spacing: -0.02em;
  color: var(--bf-ink); text-decoration: none;
}
.bf-pd__aside-phone:hover { color: var(--bf-signal); }
.bf-pd__aside-hours {
  margin: 6px 0 20px; max-width: none;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs); color: var(--bf-steel-500);
}
.bf-pd__aside .bf-pd__btn--ghost { height: 52px; }
.bf-pd__aside-note {
  margin: 20px 0 0; padding-top: 20px; max-width: none;
  border-top: 1px solid var(--bf-line);
  font-size: var(--bf-fs-xs); color: var(--bf-steel-500);
}

/* =============================================================================
   Mindest-Schriftgrößen für geerbte Bauteile
   Das Ursprungs-Theme setzt an vielen Stellen feste 12–14px (Brotkrumen, Formulare,
   Tabellen). Zusammen mit `html{font-size:62.5%}` las sich das am Bildschirm winzig.
   ============================================================================= */
.breadcrumbs, .breadcrumbs a, .breadcrumbs__link,
.breadcrumbs__sep, .breadcrumbs__current { font-size: var(--bf-fs-sm); }

input, select, textarea,
.wpcf7 input, .wpcf7 select, .wpcf7 textarea,
.woocommerce table.shop_table, .woocommerce-cart-form,
.woocommerce ul.order_details li, .woocommerce-checkout .form-row label {
  font-size: var(--bf-fs-sm);
}

.woocommerce table.shop_table th, .woocommerce table.shop_table td { font-size: var(--bf-fs-sm); }

/* Fußzeile: Adresse, Zeiten und Rechtsangaben waren mit 9–10px unlesbar. */
.bff__text, .bff__addr, .bff__hours, .bff__phone,
.bff__legalnums, .bff__vat, .bff a, .bff li { font-size: var(--bf-fs-sm); }
.bff__title, .bff__title--spaced { font-size: var(--bf-fs-xs); }

/* Servicezeile im Kopf */
.bfh__service-item, .bfh__service-phone { font-size: var(--bf-fs-xs); }

/* «Auf einen Blick» unter der Galerie: füllt die linke Spalte, die neben der
   langen Kaufspalte sonst als weiße Fläche endete. */
.bf-pd__glance { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--bf-line); }
.bf-pd__glance-title {
  margin: 0 0 4px; max-width: none;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--bf-steel-500);
}
.bf-pd__glance .product-hl { margin-top: 14px; }

/* Restliche Kleinschrift aus dem Ursprungs-Theme */
.shop__sort-label, .shop__sort select,
.info__item p, .info__text, .reasons__item p { font-size: var(--bf-fs-sm); }

/* =============================================================================
   Startseite freundlicher: weichere Kanten, wärmere Flächen, mehr Luft
   Die harte 2px-Kante bleibt dort, wo sie Signal ist (Buttons, Marker) — Flächen,
   auf denen Fotos und Text sitzen, bekommen 6–8px und einen warmen Grund.
   ============================================================================= */
.info__item, .shop__card, .products__card, .bf-related__card,
.reasons__item, .categories__card, .projects__item, .bf-pd__aside,
.simple__image img, .philosophy__image img, .cta__card {
  border-radius: 0;
}
.info__item, .reasons__item {
  background: #fff;
  border: 1px solid var(--bf-line);
  padding: 32px 28px;
}
/* Aus den Datenblatt-Zeilen sind hier Karten geworden — mit Grund, Rahmen und
   Radius. Als Zeilen brauchten sie keinen Abstand, sie hatten ja nur eine
   Trennlinie zwischen sich; als Karten stoßen vier Rahmen unvermittelt
   aneinander und ergeben optisch einen einzigen Kasten. Also Abstand dazwischen,
   und die geerbte Linie der Liste weg, damit sie nicht doppelt auf dem ersten
   Rahmen liegt. Die Reihe steht auf der Startseite und unter «Über uns». */
.reasons__items {
  display: flex; flex-direction: column; gap: 14px;
  border-top: 0;
}
.info { background: var(--bf-bg-alt); }

/* Kategorien: die dunkle Platte lag als harter Balken auf dem Foto.
   Jetzt weicher Verlauf von unten — das Foto bleibt sichtbar. */
.categories__card { overflow: hidden; }
.categories__content, .categories__text-wrap {
  background: linear-gradient(to top, rgba(27,25,23,.92) 0%, rgba(27,25,23,.72) 55%, rgba(27,25,23,0) 100%);
}

/* Bilder auf der Startseite: gleiche weiche Kante wie die Karten */
.simple__image, .philosophy__image, .projects__gallery img, .banner__image { border-radius: 0; }

/* Überschriften etwas offener setzen — Versalien ohne enge Sperrung wirken
   weniger nach Werkstattschild und mehr nach Fließtext. */
h2, .title { letter-spacing: -0.005em; }
.simple__title, .philosophy__title { text-transform: none; }

/* Galerie-Fotos der Startseite sind jetzt Links — Zeigefinger und leichtes Heben,
   damit sichtbar ist, dass da etwas passiert. */
.projects__gallery-link { display: block; overflow: hidden; border-radius: 0; }
.projects__gallery-link img { display: block; width: 100%; transition: transform .4s var(--bf-ease); }
.projects__gallery-link:hover img { transform: scale(1.04); }

/* Konto-Symbol im Kopf */
.bfh__action--account.is-in { border-color: var(--bf-ink); }

/* =============================================================================
   Mein Konto — der Bereich war komplett ungestaltet: nacktes Menü links, ein
   Fließsatz rechts, kein Seitentitel. Jetzt zweispaltig mit Kopf über beidem.
   ============================================================================= */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(28px, 3vw, 48px) clamp(16px, 4vw, 32px) clamp(56px, 6vw, 96px);
}
@media (max-width: 820px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr; } }

.bf-konto__head { grid-column: 1 / -1; margin-bottom: 8px; }
.bf-konto__eyebrow {
  margin: 0 0 8px; max-width: none;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--bf-steel-500);
}
.bf-konto__title {
  margin: 0; font-family: var(--bf-cond); font-weight: 700;
  font-size: var(--bf-fs-2xl); text-transform: uppercase; color: var(--bf-ink);
  line-height: 1.02;
}

/* Menü als Karte mit klarer aktiver Zeile */
.woocommerce-MyAccount-navigation {
  border: 1px solid var(--bf-line); border-radius: 0; background: #fff; overflow: hidden;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: block; }
/* Das Ursprungs-Theme gab jedem Punkt 30px Abstand nach unten — in einer Karte
   mit Trennlinien ergab das versetzte Linien und Leerraum am Ende der Karte. */
.woocommerce-MyAccount-navigation li {
  margin: 0 !important; padding: 0;
  border-bottom: 1px solid var(--bf-line);
}
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation a {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px;
  font-family: var(--bf-sans);
  font-size: var(--bf-fs-sm); font-weight: 600; color: var(--bf-steel-700);
  text-decoration: none; border-left: 3px solid transparent;
  transition: background .16s var(--bf-ease), color .16s var(--bf-ease), border-color .16s var(--bf-ease);
}
/* Symbole sind durchweg Konturen und erben die Textfarbe. Die Sonderregeln nach
   Position (nth-child 1 und 4 gefüllt) sind raus — daher der schwarze Fleck. */
.woocommerce-MyAccount-navigation a svg { width: 20px; height: 20px; flex: none; opacity: .8; }
.woocommerce-MyAccount-navigation a svg *,
.woocommerce-MyAccount-navigation li:hover a svg *,
.woocommerce-MyAccount-navigation li.is-active a svg * { stroke: currentColor; fill: none; }
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation li:hover > a { background: var(--bf-bg-alt); color: var(--bf-ink); }
.woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active > a {
  background: var(--bf-bg-alt); color: var(--bf-ink); border-left-color: var(--bf-signal);
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--bf-steel-500); }

/* Inhaltsspalte */
.woocommerce-MyAccount-content { min-width: 0; font-size: var(--bf-fs-base); }
.woocommerce-MyAccount-content > p { max-width: 68ch; }

.bf-konto__hello { margin: 0 0 6px; font-size: var(--bf-fs-lg); color: var(--bf-ink); }
.bf-konto__intro { margin: 0 0 28px; color: var(--bf-steel-700); }

.bf-konto__tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.bf-konto__tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; text-decoration: none;
  border: 1px solid var(--bf-line); border-radius: 0; background: #fff;
  transition: border-color .16s var(--bf-ease), transform .16s var(--bf-ease);
}
.bf-konto__tile:hover { border-color: var(--bf-ink); transform: translateY(-2px); }
.bf-konto__tile-title {
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  font-size: 20px; color: var(--bf-ink);
}
.bf-konto__tile:hover .bf-konto__tile-title { color: var(--bf-signal); }
.bf-konto__tile-text { font-size: var(--bf-fs-sm); color: var(--bf-steel-500); }

.bf-konto__contact {
  border: 1px solid var(--bf-line); border-radius: 0;
  background: var(--bf-bg-alt); padding: 20px 24px;
}
.bf-konto__contact-label {
  margin: 0 0 6px; max-width: none;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--bf-steel-500);
}
.bf-konto__contact-phone {
  font-family: var(--bf-mono); font-size: 24px; color: var(--bf-ink); text-decoration: none;
}
.bf-konto__contact-phone:hover { color: var(--bf-signal); }
.bf-konto__contact-hours { margin: 4px 0 0; max-width: none; font-size: var(--bf-fs-xs); color: var(--bf-steel-500); }

/* Formulare und Tabellen im Konto */
.woocommerce-MyAccount-content form .form-row { margin-bottom: 16px; }
.woocommerce-MyAccount-content label { display: block; margin-bottom: 6px; font-size: var(--bf-fs-sm); font-weight: 600; color: var(--bf-ink); }
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  background: #fff; color: var(--bf-ink); font-family: var(--bf-sans); font-size: var(--bf-fs-sm);
}
.woocommerce-MyAccount-content input:focus, .woocommerce-MyAccount-content select:focus {
  outline: none; border-color: var(--bf-ink);
}
.woocommerce-MyAccount-content .woocommerce-Address {
  border: 1px solid var(--bf-line); border-radius: 0; padding: 20px 24px; background: #fff;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 {
  font-family: var(--bf-cond); text-transform: uppercase; font-size: 22px; color: var(--bf-ink);
}
.woocommerce-MyAccount-content table.shop_table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--bf-line); border-radius: 0; overflow: hidden;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
  padding: 14px 16px; border-bottom: 1px solid var(--bf-line); text-align: left;
}
.woocommerce-MyAccount-content table.shop_table th { background: var(--bf-bg-alt); font-family: var(--bf-mono); font-size: var(--bf-fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--bf-steel-500); }

/* Zwei Erblasten im Kontobereich, die das Layout zerlegt haben:
   1) WooCommerce setzt `.woocommerce-MyAccount-navigation { float:left; width:30% }` —
      im Raster ergab das eine 84px schmale Spalte mit abgeschnittenen Labels.
   2) Das Ursprungs-Theme versteckt <h1> per screen-reader-Technik (position:absolute,
      clip) — der Seitentitel „Mein Konto" war dadurch unsichtbar. */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none; width: 100%; max-width: none;
}
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-account .bf-konto__head h1.bf-konto__title {
  position: static !important; clip: auto !important; clip-path: none !important;
  width: auto !important; height: auto !important; overflow: visible !important;
  margin: 0; padding: 0;
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  font-size: var(--bf-fs-2xl); line-height: 1.02; color: var(--bf-ink);
}

/* Der Kontobereich saß hinter dem Seitenkopf-Abstand des Ursprungs-Themes und begann
   erst nach ~150px Leerraum. */
.woocommerce-account .section.my_account { padding-top: 0; }

/* Adressen: die geerbten Regeln setzten die beiden Karten als halbbreite Float-Spalten,
   im Raster trieben sie versetzt auseinander. Jetzt ein sauberes Zweierraster. */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .section.my_account .woocommerce-Addresses,
.woocommerce-account .section.my_account .woocommerce-Addresses.col2-set {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 20px; float: none; width: auto;
}
.woocommerce-account .woocommerce-Addresses > div,
.woocommerce-account .section.my_account .woocommerce-Addresses .u-column1,
.woocommerce-account .section.my_account .woocommerce-Addresses .u-column2 {
  float: none; width: auto; margin: 0;
}
.woocommerce-account .woocommerce-Address { height: 100%; }
.woocommerce-account .woocommerce-Address-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 12px;
}
.woocommerce-account .woocommerce-Address-title .edit {
  font-size: var(--bf-fs-sm); color: var(--bf-signal); text-decoration: none; white-space: nowrap;
}
.woocommerce-account .woocommerce-Address address { font-style: normal; font-size: var(--bf-fs-sm); }

/* WooCommerce hängt an .col2-set/.u-columns ein Clearfix-Paar (::before/::after,
   display:table). Sobald der Container ein Grid ist, werden diese Pseudo-Elemente
   zu vollwertigen Rasterzellen: sie besetzten (1,1) und (2,2), die beiden echten
   Karten rutschten auf (1,2) und (2,1) — daher standen sie diagonal versetzt. */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after,
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after { content: none; display: none; }

/* Titelzeile der Adresskarte darf umbrechen — „Rechnungsadresse hinzufügen"
   passte neben der Überschrift nicht in die Kartenbreite und lief hinaus. */
.woocommerce-account .woocommerce-Address-title { flex-wrap: wrap; row-gap: 6px; }
.woocommerce-account .woocommerce-Address-title .edit { white-space: normal; }

/* =============================================================================
   Shop: vier Karten pro Reihe und eine offene Warengruppen-Leiste
   Bei 14 Produkten und 17 Kategorien ist die Warengruppe der eigentliche Filter —
   die Schublade („Filter") bleibt für Preis und Attribute.
   ============================================================================= */
.shop__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1180px) { .shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .shop__grid { grid-template-columns: 1fr; gap: 16px; } }


/* Karten werden bei vier Spalten schmaler — Innenabstände und Titel nachziehen,
   damit die Kachel nicht gedrängt wirkt. */
@media (min-width: 1181px) {
  .shop__card-info { padding: 18px 18px 6px; }
  .shop__card-title { font-size: 19px; }
  .shop__card-actions { padding: 0 18px 18px; }
}

/* Techdaten-Chips in der Karte: bei vier Spalten passte „Einzelgenehmigung gemäß
   §13 EG-FGV" nicht mehr in eine Zeile und lief aus der Karte heraus. */
.bf-specline span { white-space: normal; max-width: 100%; }

/* Preise auf eine Linie: die Chip-Zeile ist je nach Produkt ein bis drei Zeilen hoch,
   dadurch sprang der Preis in jeder Karte auf eine andere Höhe. */
.shop__card { display: flex; flex-direction: column; height: 100%; }
.shop__card-info { display: flex; flex-direction: column; flex: 1; }
.shop__card-price { margin-top: auto; padding-top: 12px; }

/* ---------- Offene Filterleiste (ohne Seitenspalte) ---------- */
.shop__filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  margin: 0 0 28px; padding: 20px 22px;
  border: 1px solid var(--bf-line); border-radius: 0;
  background: var(--bf-bg-alt);
}
.shop__filter { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.shop__filter-label {
  font-family: var(--bf-mono); font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bf-steel-500);
}
.shop__filter-select,
.shop__filter-range input {
  height: 48px; padding: 0 14px;
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  background: #fff; color: var(--bf-ink);
  font-family: var(--bf-sans); font-size: var(--bf-fs-sm);
}
.shop__filter-select { min-width: 240px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bf-steel-500) 50%),
                    linear-gradient(135deg, var(--bf-steel-500) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 38px;
}
.shop__filter-select:focus, .shop__filter-range input:focus { outline: none; border-color: var(--bf-ink); }
.shop__filter-range { display: flex; align-items: center; gap: 8px; }
.shop__filter-range input { width: 108px; font-family: var(--bf-mono); }
.shop__filter-range span { color: var(--bf-steel-500); }

.shop__filter-actions { display: flex; align-items: center; gap: 14px; }
.shop__filter-apply {
  height: 48px; padding: 0 26px;
  border: 1px solid var(--bf-ink); border-radius: var(--bf-radius);
  background: var(--bf-ink); color: #fff; cursor: pointer;
  font-family: var(--bf-sans); font-weight: 600; font-size: var(--bf-fs-sm);
  letter-spacing: .04em; text-transform: uppercase;
  transition: background .16s var(--bf-ease);
}
.shop__filter-apply:hover { background: var(--bf-btn-hover); border-color: var(--bf-btn-hover); }
.shop__filter-reset { font-size: var(--bf-fs-sm); color: var(--bf-steel-500); text-decoration: underline; }
.shop__filter-reset:hover { color: var(--bf-signal); }

.shop__filter-count {
  margin: 0 0 0 auto; max-width: none;
  font-family: var(--bf-mono); font-size: var(--bf-fs-sm); color: var(--bf-steel-500);
}
.shop__filter-count strong { color: var(--bf-ink); }

@media (max-width: 720px) {
  .shop__filters { padding: 16px; gap: 12px; }
  .shop__filter, .shop__filter-select { width: 100%; min-width: 0; }
  .shop__filter-actions { width: 100%; }
  .shop__filter-apply { flex: 1; }
  .shop__filter-count { margin: 4px 0 0; }
}

/* Sortierung sitzt jetzt in derselben Leiste — sie ist schmaler als die Warengruppe
   und rutscht ans Ende der Zeile, damit Filter links und Sortierung rechts stehen. */
.shop__filter-select--sort { min-width: 190px; }
.shop__filters .shop__filter:has(.shop__filter-select--sort) { margin-left: auto; }
@media (max-width: 720px) { .shop__filters .shop__filter:has(.shop__filter-select--sort) { margin-left: 0; } }

/* Kopfzeile ohne die alten Bedienelemente: Titel steht allein. */
.shop__head { margin-bottom: 24px; }

/* „Anzeigen" steht direkt hinter den Preisfeldern (nur dafür wird es gebraucht —
   die Listen wirken sofort). Die Trefferzahl bekommt eine eigene Zeile rechts. */
.shop__filter-actions { align-self: flex-end; padding-bottom: 0; }
.shop__filter-count { flex: 1 0 100%; margin: 4px 0 0; text-align: right; }

/* Ein <select> ist so breit wie seine längste Option — „— Schlauchboot- &
   Kleinboottrailer (1)" trieb die Leiste über die Zeile und die Sortierung
   in die nächste. Deshalb feste Breiten statt min-width. */
.shop__filter-select { width: 260px; min-width: 0; text-overflow: ellipsis; }
.shop__filter-select--sort { width: 200px; }
@media (max-width: 1100px) { .shop__filter-select { width: 220px; } }
@media (max-width: 720px)  { .shop__filter-select, .shop__filter-select--sort { width: 100%; } }

/* Es fehlten exakt drei Pixel: 260+260+243+140+200 plus vier 16er-Lücken ergaben
   1167px bei 1164px Innenbreite — die Sortierung fiel deshalb in die zweite Zeile. */
.shop__filters { gap: 14px 14px; }
.shop__filter-select { width: 250px; }
.shop__filter-select--sort { width: 190px; }
.shop__filter-range input { width: 100px; }

/* ---------- Tabs springen nicht mehr ----------
   Die Panels lagen untereinander im Fluss (display:none / block), also war die
   Seite je nach Tab 503px oder 294px hoch — beim Umschalten sprang alles darunter.
   Jetzt liegen alle Panels in derselben Rasterzelle: die Höhe richtet sich nach
   dem längsten Inhalt und bleibt beim Wechseln stehen. */
.bf-pd__panels { display: grid; }
.bf-pd__panel {
  display: block;
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--bf-ease);
}
.bf-pd__panel.is-active { visibility: visible; opacity: 1; pointer-events: auto; }

/* ---------- Shop-Karte kompakter ----------
   Bei vier Spalten wirkte die Kachel zu wuchtig: 4:3-Foto, große Innenabstände
   und 19px-Titel ergaben über 500px Höhe pro Karte. */
.shop__card-image { aspect-ratio: 3 / 2; }
.shop__card-info { padding: 14px 16px 4px; }
.shop__card-title { font-size: 17px; margin-bottom: 8px; }
.bf-specline { gap: 5px; margin-bottom: 10px; font-size: 13px; }
.bf-specline span { padding: 3px 7px; }
.shop__card-price { font-size: 20px; padding-top: 8px; }
.shop__card-price::after { font-size: 13px; }
.shop__card-actions { padding: 0 16px 16px; }
.shop__card-actions .products__qty-btn,
.shop__card-actions .products__cart-btn { height: 42px; }

/* Der graue Streifen unter dem Galeriefoto: WooCommerce setzt
   `.woocommerce img { height: auto }` — spezifischer als `.bf-pd__img`, dadurch
   blieb das Bild auf seiner Eigenhöhe und der Rahmen ragte darunter hervor. */
.woocommerce .bf-pd__stage .bf-pd__img,
.woocommerce-page .bf-pd__stage .bf-pd__img { height: 100%; }

/* ---------- Weniger Schriftwechsel ----------
   Mono war überall: Kopfzeile, Techdaten, Zähler, Chips, Filterlabels. Auf einer
   Seite standen dadurch drei Schriften gleichzeitig und es wirkte unruhig.
   Mono bleibt jetzt dem vorbehalten, wofür es gedacht war: Preis und Artikelnummer. */
.bf-pd__eyebrow,
.bf-pd__counter,
.bf-pd__fact,
.bf-pd__aside-hours,
.bf-pd__aside-note,
.bf-specline,
.shop__filter-label,
.shop__filter-count,
.shop__filter-range input,
.bf-related__all,
.bf-related__price,
.bf-konto__eyebrow,
.bf-konto__contact-label,
.bf-konto__contact-hours,
.product-specs {
  font-family: var(--bf-sans);
}
.bf-pd__eyebrow, .shop__filter-label, .bf-konto__eyebrow, .bf-konto__contact-label {
  letter-spacing: .06em;
}
/* Preis und Artikelnummer behalten die technische Anmutung */
.bf-pd__price-value, .bf-pd__sku, .shop__card-price,
.bf-pd__aside-phone, .bf-konto__contact-phone { font-family: var(--bf-mono); }

.bf-pd__glance { margin-top: 30px; padding-top: 24px; }

/* ---------- Produktseite: Schriftgrade zurücknehmen ----------
   Nach dem Umstieg auf px war die Skala auf der Produktseite zu laut: Titel bis
   48px, Preis 44px, Fließtext 18px. Für ein Datenblatt reicht deutlich weniger. */
.bf-pd__title { font-size: clamp(26px, 18px + 1.3vw, 36px); }
.bf-pd__price-value { font-size: clamp(26px, 20px + 0.9vw, 33px); }
.bf-pd__price--request .bf-pd__price-value { font-size: clamp(21px, 17px + 0.7vw, 26px); }
.bf-pd__eyebrow { font-size: 14px; }
.bf-pd__fact { font-size: 15px; }
.bf-pd__delivery { font-size: 16px; }
.bf-pd__usp { font-size: 16px; }
.bf-pd__tab { font-size: 17px; }
.bf-pd__panel > .text p, .bf-pd__panel > .text li { font-size: 17px; }
.bf-pd__aside-label { font-size: 18px; }
.bf-pd__aside-text { font-size: 15px; }
.bf-pd__aside-phone { font-size: 20px; }
.bf-pd__btn { font-size: 15px; }
.bf-pd__qty .product__qty-input { font-size: 16px; }

/* Ähnliche Produkte darunter im selben Maßstab */
.bf-related__title { font-size: clamp(20px, 16px + 0.8vw, 26px); }
.bf-related__name { font-size: 17px; }
.bf-related__price { font-size: 17px; }

/* =============================================================================
   Aufräumen nach dem Seiten-Audit
   Gefunden: 16 verschiedene Schriftgrade, vier Schriftfamilien (darunter das
   fremde Inter aus dem Ursprungs-Theme), uneinheitliche Sektionsabstände und
   ein horizontaler Überlauf auf „Über uns".
   ============================================================================= */

/* 1) Inter kommt in main.css/bundle.css 142-mal vor — statt alle Stellen zu ändern,
      zeigt der Name jetzt auf unsere Schrift. Vierte Familie ist damit weg. */
@font-face { font-family: "Inter"; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

/* 2) Ausreißer der Schriftgrade auf die sieben Stufen ziehen */
.hero__title { font-size: clamp(32px, 22px + 2.2vw, 52px); }
.hero__text { font-size: var(--bf-fs-base); }
h2.title, .title-block h2.title, .products h2.title { font-size: var(--bf-fs-2xl); }
h3, .info__title, .reasons__item-title { font-size: var(--bf-fs-lg); }
.categories__title { font-size: var(--bf-fs-lg); }
.cta__title { font-size: var(--bf-fs-2xl); }
.cta__phone-value { font-size: var(--bf-fs-lg); }
.reasons__item-number { font-size: var(--bf-fs-2xl); }
.shop__title { font-size: var(--bf-fs-2xl); }
/* 29.09.2026: Auf der Katalogseite steht keine sichtbare «Shop»-Überschrift mehr
   (Änderungsliste 26.09.); für Vorleser und Suchmaschinen bleibt die H1 da. */
.shop__title--nur-vorleser {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.shop__card-title, .bf-related__name, .bf-pd__tab { font-size: var(--bf-fs-base); }
.bf-specline, .shop__card-price::after, .shop__cat-count { font-size: var(--bf-fs-xs); }
.bfh__service-item, .bfh__service-phone { font-size: var(--bf-fs-xs); }
.bf-pd__price-value { font-size: clamp(26px, 20px + 1.4vw, 36px); }
.bf-konto__tile-title, .bf-konto__title { font-size: var(--bf-fs-2xl); }
.bf-konto__tile-title { font-size: var(--bf-fs-lg); }

/* 3) Sektionsrhythmus: ein Wert für alle, statt 67 / 44+80 / 0+96 / 8+67 */
section { padding-block: 64px; }
@media (max-width: 900px) { section { padding-block: 44px; } }
.breadcrumbs { padding-block: 16px; }
.hero { padding-block: 0; }
.bf-pd { padding-block: 32px 64px; }
.bf-related { padding-block: 0 64px; }
.title-block { padding-block: 32px 64px; }

/* 4) Karussells ohne Swiper: das CDN-Skript wird nicht geladen, deshalb standen
      die Slides in einer 1748px breiten Reihe und schoben „Über uns" aus dem Bild.
      Ohne JS werden sie jetzt zu einem Raster. */
.swiper:not(.swiper-initialized) > .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  transform: none !important;
}
.swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { width: auto !important; }

/* Letzte Ausreißer nach dem zweiten Auditlauf: 15/17/20/26px raus,
   damit nur die sechs Stufen 14 / 16 / 18 / 22 / 36 / 52 übrig bleiben. */
.bf-pd__fact { font-size: var(--bf-fs-sm); }
.shop__card-price { font-size: var(--bf-fs-lg); }
.bf-related__title { font-size: var(--bf-fs-lg); }
.bf-pd__aside-text, .bf-pd__aside-note, .bf-pd__aside-hours { font-size: var(--bf-fs-sm); }

/* Buttons trugen als einzige noch „Inter" im Stylesheet — jetzt überall unsere Familie. */
.btn, .hero__btn, .projects__btn, .reasons__button, .shop__more-btn,
.filters__submit, .product__btn-price-request, .shop__load-more-btn,
button, input, select, textarea { font-family: var(--bf-sans); }

/* Dritter Auditlauf: die letzten Zwischengrößen auf die Stufen ziehen.
   Endstand: 14 / 16 / 18 / 22 / 28 / 36 / 52 — sieben Grade für die ganze Seite. */
.bf-pd__btn, .bf-pd__aside .bf-pd__btn { font-size: var(--bf-fs-sm); }
.bf-pd__panel > .text p, .bf-pd__panel > .text li { font-size: var(--bf-fs-base); }
.product__qty-btn, .bf-pd__qty .product__qty-btn { font-size: var(--bf-fs-base); }
.bf-pd__aside-phone { font-size: var(--bf-fs-lg); }
.bf-pd__price-value, .bf-pd__price--request .bf-pd__price-value { font-size: 28px; }
.bf-konto__contact-phone { font-size: var(--bf-fs-lg); }

/* Die letzten beiden Stellen mit „Inter" im Stylesheet. */
.shop__more-btn, .woocommerce h2, .products h2, .shop h2 { font-family: var(--bf-cond); }
.shop__more-btn { font-family: var(--bf-sans); }

/* =============================================================================
   Warenkorb-Schublade
   ============================================================================= */
.bf-cart[hidden] { display: none; }
.bf-cart { position: fixed; inset: 0; z-index: 120; }

/* Zurück nach oben
   -----------------------------------------------------------------------------
   Ebene 40: über dem Inhalt, aber unter der Kopfleiste (60), der Suchebene (90),
   der mobilen Schublade (95) und dem Warenkorb (120). Der Knopf soll nie über
   etwas liegen, das gerade geöffnet ist.

   Eckig wie alles im Haus, graphit statt rot: Rot ist hier Signal und nicht die
   Farbe eines Hilfsmittels. Rot wird er erst unter dem Zeiger. */
/* Muss VOR der Grundregel stehen und trotzdem gewinnen: `[hidden]` ist im
   Browser nur `display: none` mit einem Attributselektor und verliert gegen
   `.bf-hoch { display: inline-flex }`. Ohne diese Zeile stand der Knopf auch
   ohne JavaScript da — nachgemessen am 07.09.2026. */
.bf-hoch[hidden] { display: none; }

.bf-hoch {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 40;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  background: var(--bf-steel-900, #454545);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s var(--bf-ease), transform .22s var(--bf-ease),
              background-color .18s var(--bf-ease);
}
.bf-hoch.is-da { opacity: 1; transform: none; pointer-events: auto; }
.bf-hoch:hover { background: var(--bf-signal); }
.bf-hoch:focus-visible { outline: 2px solid var(--bf-signal); outline-offset: 3px; }

/* Bei offener Schublade oder offenem Warenkorb liegt der Körper fest — dann hat
   der Knopf nichts zu suchen. */
body.bf-locked .bf-hoch { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .bf-hoch { transition: opacity .01s linear; transform: none; }
}
.bf-cart__overlay {
  position: absolute; inset: 0; background: rgba(26,26,25,.5);
  opacity: 0; transition: opacity .2s var(--bf-ease);
}
.bf-cart.is-open .bf-cart__overlay { opacity: 1; }
.bf-cart__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(430px, 100%);
  background: #fff; border-left: 1px solid var(--bf-line);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .24s var(--bf-ease);
  /* 2026-08-01: war `overflow-y: auto` — die ganze Schublade rollte, Kopfzeile
     und Summe wanderten mit aus dem Bild. Gerollt wird nur die Warenliste. */
  overflow: hidden;
}
.bf-cart.is-open .bf-cart__panel { transform: none; }

.bf-cart .widget_shopping_cart_content {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}
.bf-cart .woocommerce-mini-cart__top { flex: none; }
.bf-cart .woocommerce-mini-cart__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--bf-line);
}
.bf-cart .woocommerce-mini-cart__title {
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  font-size: var(--bf-fs-lg); color: var(--bf-ink);
}
.bf-cart .close-cart { width: 26px; height: 26px; cursor: pointer; flex: none; }
.bf-cart .close-cart path { stroke: var(--bf-ink); }

.bf-cart ul.woocommerce-mini-cart {
  list-style: none; margin: 0; padding: 8px 24px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.bf-cart .woocommerce-mini-cart-item {
  display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--bf-line);
}
/* Das Ursprungs-Theme stellt Warenkorbzeilen unter 768px auf eine Spalte um —
   gemeint war die Warenkorbseite. In einer 390px breiten Schublade sah das aus
   wie eine Produktkarte: Foto mittig, Titel darunter. Die geerbte Regel greift
   über `.woocommerce ul.cart_list li` und ist damit ein Element spezifischer als
   eine Klassenkette aus `.bf-cart` — deshalb hier Liste und Zeile ausgeschrieben.
   Die Zeile bleibt eine Zeile. */
.bf-cart ul.cart_list li.woocommerce-mini-cart-item {
  flex-direction: row; align-items: flex-start;
}
/* `min-width: 140px` aus dem Ursprungs-Theme überstimmt jede Breitenangabe —
   ohne die Null blieb die Bildspalte 140px, egal was hier steht. */
.bf-cart .woocommerce_cart_item__img { flex: none; width: 84px; min-width: 0; }
.bf-cart .woocommerce_cart_item__content { min-width: 0; flex: 1 1 auto; }
.bf-cart .woocommerce_cart_item__img img {
  width: 84px; height: 64px; object-fit: cover; border-radius: var(--bf-radius);
}
.bf-cart .woocommerce_cart_item__title a {
  font-family: var(--bf-cond); font-weight: 600; text-transform: uppercase;
  font-size: var(--bf-fs-sm); color: var(--bf-ink); text-decoration: none; line-height: 1.2;
}
.bf-cart .product-cart-info { font-size: var(--bf-fs-xs); color: var(--bf-steel-500); margin-top: 4px; }
.bf-cart .price-product-cart {
  font-family: var(--bf-mono); font-size: var(--bf-fs-sm); color: var(--bf-ink); margin: 6px 0 0;
}
.bf-cart .woocommerce-mini-cart__total,
.bf-cart .woocommerce-mini-cart__buttons {
  padding: 16px 24px; border-top: 1px solid var(--bf-line);
}
.bf-cart .woocommerce-mini-cart__total {
  display: flex; align-items: baseline; justify-content: space-between;
  flex: none; margin: 0; font-size: var(--bf-fs-sm);
}
.bf-cart .woocommerce-mini-cart__buttons { flex: none; }
.bf-cart .woocommerce-mini-cart__total strong { font-family: var(--bf-cond); text-transform: uppercase; }
.bf-cart .woocommerce-mini-cart__total .amount { font-family: var(--bf-mono); font-size: var(--bf-fs-lg); color: var(--bf-ink); }
.bf-cart .woocommerce-mini-cart__buttons { display: grid; gap: 10px; }
.bf-cart .woocommerce-mini-cart__buttons a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; border-radius: var(--bf-radius);
  font-family: var(--bf-sans); font-weight: 600; font-size: var(--bf-fs-sm);
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--bf-line); color: var(--bf-ink); background: #fff;
}
.bf-cart .woocommerce-mini-cart__buttons a.checkout {
  background: var(--bf-btn); border-color: var(--bf-btn); color: #fff;
}
.bf-cart .woocommerce-mini-cart__empty-message {
  padding: 40px 24px; text-align: center; color: var(--bf-steel-500); font-size: var(--bf-fs-sm);
}

/* Kurze Seiten: der Fußbereich soll unten stehen, nicht mitten im Fenster —
   darunter blieb sonst weiße Fläche. */
.site-container { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.site-container > main, .site-container > .main-container { flex: 1 0 auto; }
.site-container > footer, .site-container > .bff { flex: none; }

/* Knöpfe der Schublade: sie erbten eine feste Breite aus dem Ursprungs-Theme und
   standen als schmale Blöcke links in der Spalte. Jetzt volle Breite, gleiche Höhe. */
.bf-cart .woocommerce-mini-cart__buttons { padding: 16px 24px 24px; }
.bf-cart .woocommerce-mini-cart__buttons a,
.bf-cart .woocommerce-mini-cart__buttons .button,
.bf-cart .woocommerce-mini-cart__buttons a.button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  margin: 0 !important;
}
.bf-cart .woocommerce-mini-cart__buttons a.checkout,
.bf-cart .woocommerce-mini-cart__buttons a.checkout.button {
  background: var(--bf-btn) !important;
  border-color: var(--bf-btn) !important;
  color: #fff !important;
  order: -1;                      /* „Zur Kasse" steht oben */
}
.bf-cart .woocommerce-mini-cart__buttons a:not(.checkout) {
  background: #fff !important; color: var(--bf-ink) !important;
  border: 1px solid var(--bf-line) !important;
}
.bf-cart .woocommerce-mini-cart__buttons a:not(.checkout):hover { border-color: var(--bf-ink) !important; }

/* Zeile im Warenkorb: „Entfernen" gehört an den Rand der Zeile, nicht zentriert. */
.bf-cart .woocommerce-mini-cart-item .remove,
.bf-cart .woocommerce-mini-cart-item .remove_from_cart_button {
  color: var(--bf-steel-500) !important; font-size: var(--bf-fs-xs);
  text-decoration: underline; align-self: flex-start;
}
.bf-cart .woocommerce-mini-cart-item .remove:hover { color: var(--bf-signal) !important; }

/* Mobiles Menü: Knopf war schmaler als die Liste darüber. */
.bfh__mobile-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; }

/* Die Knopfspalte war ein Grid ohne definierte Spalte — die implizite Spalte nahm
   die Breite des Textes (202px) statt der Panelbreite. */
.bf-cart .woocommerce-mini-cart__buttons {
  grid-template-columns: 1fr;
  justify-content: stretch;
  justify-items: stretch;
  align-items: stretch;
}

/* =============================================================================
   Kundenbereich, zweite Fassung — Altlasten des Ursprungs-Themes
   -----------------------------------------------------------------------------
   Der Kontobereich lag unter drei Stilschichten: bundle.css (altes Shop-Theme),
   main.css (Polarholz-Nachbesserungen) und dieser Datei. Sichtbar war das als
   roter „%"-Kreis mitten in Hinweisen, einer Legende „Passwort ändern" auf dem
   ersten Feldnamen, weißer Schrift auf weißem Grund im Hinweis-Knopf und einer
   Adressüberschrift, die von einem Clearfix-Pseudoelement nach rechts geschoben
   wurde. Die drei Ursachen sind in bundle.css entfernt, hier steht die Gestaltung.
   ============================================================================= */

/* ---------- Hinweise (Bestellungen, Warenkorb, Kasse) ---------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-start; gap: 10px 20px; text-align: left;
  margin: 0 0 24px !important;
  padding: 16px 20px !important;
  border: 1px solid var(--bf-line) !important;
  border-left: 3px solid var(--bf-steel-500) !important;
  border-radius: var(--bf-radius) !important;
  background: var(--bf-bg-alt) !important;
  color: var(--bf-ink) !important;
  font-family: var(--bf-sans); font-size: var(--bf-fs-sm); line-height: 1.5;
  list-style: none;
}
.woocommerce-message { border-left-color: #1f7a4d !important; }
.woocommerce-error   { border-left-color: var(--bf-signal) !important; }
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { content: none !important; display: none !important; }

/* Der Knopf im Hinweis stand als weiße Schrift auf hellem Grund rechts im Fluss —
   praktisch unsichtbar. Jetzt zweiter Rang: Kontur statt Fläche. */
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-error .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-message .button,
.woocommerce-page .woocommerce-error .button {
  float: none !important;
  display: inline-flex !important; align-items: center;
  width: auto !important; height: auto !important;
  margin: 0 !important; padding: 9px 18px !important;
  border: 1px solid var(--bf-ink) !important; border-radius: var(--bf-radius);
  background: transparent !important;
  color: var(--bf-ink) !important;
  font-family: var(--bf-sans); font-size: var(--bf-fs-xs); font-weight: 600;
  letter-spacing: .02em; text-transform: none; text-decoration: none;
}
.woocommerce .woocommerce-info .button:hover,
.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-error .button:hover,
.woocommerce-page .woocommerce-info .button:hover,
.woocommerce-page .woocommerce-message .button:hover,
.woocommerce-page .woocommerce-error .button:hover {
  background: var(--bf-ink) !important; color: #fff !important; text-decoration: none;
}

/* ---------- Formulare im Konto ---------- */
/* Das alte Theme setzte Felder auf 41px feste Höhe mit transparentem Grund —
   im „Passwort ändern"-Block wirkten sie dadurch grau und gesperrt. */
body.woocommerce-account .section.my_account form .form-row input.input-text,
body.woocommerce-account .section.my_account form .form-row textarea,
body.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content select {
  height: 48px; padding: 0 15px;
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  background: #fff; color: var(--bf-ink);
  font-family: var(--bf-sans); font-size: var(--bf-fs-sm);
}
body.woocommerce-account .section.my_account form .form-row textarea { height: auto; padding: 12px 15px; }
body.woocommerce-account .section.my_account form .form-row input.input-text:focus,
body.woocommerce-account .woocommerce-MyAccount-content input:focus,
body.woocommerce-account .woocommerce-MyAccount-content select:focus {
  outline: none; border-color: var(--bf-ink);
}
body.woocommerce-account .section.my_account form .form-row label,
body.woocommerce-account .woocommerce-MyAccount-content label {
  display: block; margin: 0 0 7px;
  font-family: var(--bf-sans); font-size: var(--bf-fs-xs); font-weight: 600;
  color: var(--bf-ink); line-height: 1.4;
}
body.woocommerce-account .section.my_account form .form-row:not(.woocommerce-form-row) label { margin-top: 0; }
body.woocommerce-account .woocommerce-MyAccount-content .required { color: var(--bf-signal); }
body.woocommerce-account .woocommerce-MyAccount-content em,
body.woocommerce-account .woocommerce-MyAccount-content .description {
  display: block; margin-top: 6px;
  font-style: normal; font-size: var(--bf-fs-xs); color: var(--bf-steel-500);
}

/* „Passwort ändern": Legende als eigene Zeile über dem Block.
   2026-08-01: Der Block war ein eingerückter Kasten mit 24px Polster — seine
   Felder begannen dadurch 24px weiter rechts als Vorname/Nachname darüber, und
   die linke Kante des Formulars lief zweimal auseinander. Jetzt trennt eine
   Linie statt eines Kastens: gleiche Fluchtlinie für alle Felder. */
body.woocommerce-account .woocommerce-MyAccount-content form fieldset {
  margin: 36px 0 0; padding: 28px 0 0;
  border: 0; border-top: 1px solid var(--bf-line); border-radius: 0;
  background: transparent;
}
body.woocommerce-account .woocommerce-MyAccount-content form fieldset legend {
  float: none; transform: none;
  width: auto; margin: 0 0 18px; padding: 0;
  font-family: var(--bf-cond); font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: .01em; color: var(--bf-ink);
}
body.woocommerce-account .woocommerce-MyAccount-content form fieldset .form-row:last-child { margin-bottom: 0; }

/* Knöpfe: gefüllt = Hauptweg, Kontur = Nebenweg. */
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
body.woocommerce-account .section.my_account form .form-row button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px;
  border: 1px solid var(--bf-btn); border-radius: var(--bf-radius);
  background: var(--bf-btn); color: #fff;
  font-family: var(--bf-sans); font-size: var(--bf-fs-sm); font-weight: 600;
  letter-spacing: .01em; text-transform: none; cursor: pointer;
}
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
body.woocommerce-account .section.my_account form .form-row button[type="submit"]:hover {
  background: var(--bf-btn-hover); border-color: var(--bf-btn-hover); color: #fff;
}

/* ---------- Adresskarten ---------- */
/* WooCommerce hängt an den Kartentitel einen Clearfix (::before/::after,
   display:table). Im Flex-Container wurde daraus ein echtes Element — es besetzte
   den linken Platz und schob die Überschrift an den rechten Rand. */
.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after { content: none !important; display: none !important; }
/* „Adresse hinzufügen" passt nicht immer neben die Überschrift. space-between
   statt margin-left:auto: rutscht der Link in die zweite Zeile, steht er links
   unter der Überschrift statt einsam in der Mitte. */
.woocommerce-account .woocommerce-Address-title {
  justify-content: space-between; gap: 8px 16px; text-align: left;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  margin: 0; font-family: var(--bf-cond); font-weight: 700; font-size: 20px;
  text-transform: uppercase; text-align: left; color: var(--bf-ink);
}
.woocommerce-account .woocommerce-Address-title .edit { margin-left: 0; }
.woocommerce-account .woocommerce-Address address { color: var(--bf-steel-700); line-height: 1.6; }

/* ---------- Anmeldeseite (ausgeloggt) ---------- */
/* Vorher: eine Karte ohne Kopfzeile direkt unter dem Header, alles zentriert. */
body.woocommerce-account:not(.logged-in) .section.my_account { padding: 56px 0 88px; }
body.woocommerce-account:not(.logged-in) .woocommerce {
  display: block !important;
  width: 100%; max-width: 460px; margin: 0 auto !important;
  padding: 32px !important;
  border: 1px solid var(--bf-line); border-radius: 0; background: #fff;
  text-align: left;
}

/* Seit 25.08.2026 steht neben dem Anmelden auch das Registrieren (Kundenwunsch:
   «Registrieren als Button fehlt beim Anmelden»). WooCommerce liefert dafür
   sein zweispaltiges `#customer_login`. Die Karte war auf genau ein Formular
   ausgelegt — in 460px gequetscht brach die Überschrift Buchstabe für Buchstabe
   um. Also: breitere Karte und zwei echte Spalten mit Trennlinie. */
body.woocommerce-account:not(.logged-in) .woocommerce:has(#customer_login) {
  max-width: 900px;
}
body.woocommerce-account:not(.logged-in) #customer_login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 0;
}
body.woocommerce-account:not(.logged-in) #customer_login > .col-2 {
  border-left: 1px solid var(--bf-line);
}
/* WooCommerce lässt die beiden Spalten mit `float` und `width: 48%` laufen —
   im Raster gerechnet ergibt das 48% von 397px, und das Formular darin noch
   einmal 48% davon: 91px für ein Anmeldefeld. Beides zurücksetzen. */
body.woocommerce-account:not(.logged-in) #customer_login > .col-1,
body.woocommerce-account:not(.logged-in) #customer_login > .col-2 {
  float: none;
  width: 100%;
  max-width: none;
  padding: 0;          /* das Original setzt 50px rundum — in der Spalte ein Loch */
}
body.woocommerce-account:not(.logged-in) #customer_login > .col-2 { padding-left: 40px; }
body.woocommerce-account:not(.logged-in) #customer_login form {
  width: 100%;
  max-width: none;
}
@media (max-width: 767px) {
  body.woocommerce-account:not(.logged-in) #customer_login {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.woocommerce-account:not(.logged-in) #customer_login > .col-2 {
    padding-left: 0; padding-top: 32px;
    border-left: 0; border-top: 1px solid var(--bf-line);
  }
}

/* Der Datenschutzhinweis der Registrierung ist Fließtext, kein Formularfeld —
   in Feldgröße gesetzt erschlägt er die Spalte. */
body.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text p,
body.woocommerce-account:not(.logged-in) #customer_login .col-2 form > p:not(.form-row) {
  font-size: var(--bf-fs-xs);
  line-height: 1.55;
  color: var(--bf-steel-500);
}
body.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  margin: 0 0 24px !important; text-align: left;
  font-family: var(--bf-cond); font-weight: 700; font-size: 26px;
  text-transform: uppercase; color: var(--bf-ink);
}
body.woocommerce-account:not(.logged-in) form.login,
body.woocommerce-account:not(.logged-in) form.register,
body.woocommerce-account:not(.logged-in) form.woocommerce-ResetPassword {
  display: block !important; width: 100%; text-align: left;
}
/* Die Zeilen des Anmeldeformulars standen als Flex-Spalte mit align-items:center —
   Feldname, Feld und Knopf waren dadurch mittig statt an der linken Kante. */
body.woocommerce-account:not(.logged-in) .woocommerce .form-row {
  display: block !important; margin: 0 0 18px; text-align: left;
}
body.woocommerce-account:not(.logged-in) .woocommerce .form-row label {
  display: block; width: 100%; margin: 0 0 7px; text-align: left;
  font-family: var(--bf-sans); font-size: var(--bf-fs-xs); font-weight: 600; color: var(--bf-ink);
}
body.woocommerce-account:not(.logged-in) .woocommerce .form-row input.input-text {
  width: 100%; height: 48px; padding: 0 15px;
  border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  background: #fff; color: var(--bf-ink); font-size: var(--bf-fs-sm);
}
body.woocommerce-account:not(.logged-in) .woocommerce .form-row input.input-text:focus { outline: none; border-color: var(--bf-ink); }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
  display: inline-flex !important; align-items: center; gap: 10px;
  margin: 0 0 18px; font-size: var(--bf-fs-xs); font-weight: 400; color: var(--bf-steel-700);
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword button {
  display: flex !important; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 0 24px; margin: 0;
  border: 1px solid var(--bf-btn); border-radius: var(--bf-radius);
  background: var(--bf-btn); color: #fff;
  font-family: var(--bf-sans); font-size: var(--bf-fs-sm); font-weight: 600; cursor: pointer;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit:hover,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit:hover {
  background: var(--bf-btn-hover); border-color: var(--bf-btn-hover);
}
/* „Passwort vergessen?" ist ein Nebenweg und war knallrot wie der Hauptknopf.
   Die geerbte Regel ist eine Klasse spezifischer (.not-logged-in …) — deshalb
   hier dieselbe Kette plus .section.my_account. */
body.woocommerce-account.not-logged-in .section.my_account .woocommerce-LostPassword,
body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword {
  margin: 16px 0 0; text-align: left;
}
body.woocommerce-account.not-logged-in .section.my_account .woocommerce-LostPassword a,
body.woocommerce-account.not-logged-in .section.my_account form .lost_password a {
  font-size: var(--bf-fs-xs); color: var(--bf-steel-500);
  text-decoration: underline; text-underline-offset: 3px;
}
body.woocommerce-account.not-logged-in .section.my_account .woocommerce-LostPassword a:hover,
body.woocommerce-account.not-logged-in .section.my_account form .lost_password a:hover { color: var(--bf-ink); }

/* Zeile über dem Titel und Hinweis unter dem Formular (aus inc/myaccount.php).
   Beide sitzen innerhalb der Karte — der WooCommerce-Hook feuert dort. */
body.woocommerce-account:not(.logged-in) .woocommerce > .bf-konto__eyebrow {
  margin: 0 0 6px; max-width: none; text-align: left;
}
.bf-login__note {
  clear: both;
  margin: 28px 0 0; padding-top: 18px;
  border-top: 1px solid var(--bf-line);
  font-size: var(--bf-fs-xs); color: var(--bf-steel-500); text-align: left; line-height: 1.55;
}
.bf-login__note a { color: var(--bf-steel-700); text-decoration: underline; text-underline-offset: 3px; }
.bf-login__note a:hover { color: var(--bf-signal); }

/* =============================================================================
   Kontaktseite: Standortzeile und Karte
   -----------------------------------------------------------------------------
   Die Standortzeile lief auf vier gleich breiten Spalten (300px 1fr 1fr 1fr).
   Der Firmenname füllte seine Spalte zu einem Achtel, die drei Datenblöcke
   standen untereinander in der nächsten — dazwischen klaffte eine halbe
   Bildschirmbreite Leere und die Zeile wurde unnötig hoch.
   Jetzt: Bild, Name mit Knopf darunter, drei Datenblöcke nebeneinander.
   ============================================================================= */
.contact__locations { border-top: 1px solid var(--bf-line); }
/* Der Knopf sitzt unter dem Firmennamen statt in einer vierten Spalte: sonst
   bleiben für Anschrift, Telefon und Zeiten je 150px und die E-Mail-Adresse
   bricht mitten im Wort um. Benannte Bereiche, damit die schmaleren Fassungen
   in main.css (≤1024px, ≤768px) weiter greifen. */
.contact__location {
  grid-template-columns: 240px minmax(180px, 220px) minmax(0, 1fr);
  grid-template-areas:
    "image name    details"
    "image actions details";
  column-gap: 36px; row-gap: 18px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--bf-line);
}
.contact__location-image { grid-area: image; aspect-ratio: 4 / 3; border-radius: 0; }
.contact__location-name { grid-area: name; }
.contact__location-actions { grid-area: actions; align-self: start; }
.contact__location-details { grid-area: details; }
.contact__location-img { height: 100%; }
.contact__location-title {
  font-family: var(--bf-cond); font-weight: 700; font-size: 22px;
  text-transform: uppercase; letter-spacing: .01em; color: var(--bf-ink);
}

/* Die drei Blöcke (Adresse, Telefon, Zeiten) nebeneinander statt gestapelt.
   auto-fit, damit sie auf schmalen Bildschirmen von selbst auf zwei und eine
   Spalte fallen, statt die E-Mail-Adresse zu zerhacken. */
.contact__location-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px 28px; align-items: start;
}
.contact__location-label {
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--bf-steel-500);
}
.contact__location-text {
  font-size: var(--bf-fs-sm); font-weight: 400; color: var(--bf-ink); line-height: 1.55;
  overflow-wrap: break-word;
}
.contact__location-phone {
  height: 48px; padding: 0 20px; margin-bottom: 0;
  border-radius: var(--bf-radius); background: var(--bf-btn);
  font-size: var(--bf-fs-sm); font-weight: 600;
}
.contact__location-phone:hover { opacity: 1; background: var(--bf-btn-hover); }
.contact__location-email { font-size: var(--bf-fs-xs); color: var(--bf-steel-700); }

/* Die schmalen Fassungen müssen hier stehen: main.css hat zwar welche, wird aber
   vor dieser Datei geladen — die Grundregel oben hätte sie sonst überstimmt und
   das Dreispaltenraster wäre auf dem Telefon stehen geblieben (Datenspalte lag
   außerhalb des Bildschirms). */
@media (max-width: 1024px) {
  .contact__location {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas:
      "image name"
      "image actions"
      "details details";
    column-gap: 28px; row-gap: 16px;
  }
}
@media (max-width: 700px) {
  .contact__location {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "name"
      "details"
      "actions";
    row-gap: 18px;
  }
  .contact__location-details { grid-template-columns: 1fr; gap: 18px; }
  .contact__location-phone { width: auto; }
}

/* ---------- Karte: erst fragen, dann laden ---------- */
/* Vorher stand hier ein leeres graues Rechteck: im Kopf lag nur das Stylesheet
   von Leaflet, das Skript fehlte. Jetzt liegt Leaflet im Theme und wird nach
   dem Klick nachgeladen — die Kacheln (und damit die IP des Besuchers) gehen
   erst dann an OpenStreetMap. */
.contact__map-wrap {
  position: relative; margin-top: 24px;
  border: 1px solid var(--bf-line); border-radius: 0; overflow: hidden;
  background: var(--bf-bg-alt);
}
.contact__map-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 380px; padding: 40px 24px; text-align: center;
}
.contact__map-gate-label {
  margin: 0; max-width: none;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--bf-steel-500);
}
.contact__map-gate-address {
  margin: 0; max-width: none;
  font-family: var(--bf-cond); font-weight: 700; font-size: 24px;
  text-transform: uppercase; color: var(--bf-ink);
}
.contact__map-gate-note {
  margin: 4px 0 0; max-width: 44ch;
  font-size: var(--bf-fs-xs); color: var(--bf-steel-500); line-height: 1.55;
}
.contact__map-gate-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px;
  margin-top: 14px;
}
.contact__map-gate-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 1px solid var(--bf-ink); border-radius: var(--bf-radius);
  background: var(--bf-ink); color: #fff;
  font-family: var(--bf-sans); font-size: var(--bf-fs-sm); font-weight: 600; cursor: pointer;
  transition: background .16s var(--bf-ease), color .16s var(--bf-ease);
}
.contact__map-gate-button:hover { background: #fff; color: var(--bf-ink); }
.contact__map-gate-link {
  font-size: var(--bf-fs-xs); color: var(--bf-steel-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.contact__map-gate-link:hover { color: var(--bf-signal); }

.contact__map { display: none; height: 380px; margin-top: 0; border-radius: 0; background: var(--bf-bg-alt); }
.contact__map-wrap.is-loaded .contact__map-gate { display: none; }
.contact__map-wrap.is-loaded .contact__map { display: block; }
.contact__map .leaflet-container { font-family: var(--bf-sans); }

/* =============================================================================
   Projektzeilen (/projekte/, Startseite): Bildraster
   -----------------------------------------------------------------------------
   Die Galerie im „simple"-Block verteilte die Fotos auf zwei Spalten und gab
   ihnen abwechselnd 374px und 182px Höhe. Bei drei Bildern endete die rechte
   Spalte auf halber Höhe — neben dem Text stand ein Loch, darunter ein
   versetztes Foto. Jetzt ein Raster gleich hoher Kacheln.
   ============================================================================= */
.simple__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  align-content: start;
}
.simple__gallery-image {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 0; background: var(--bf-bg-alt);
}
/* Ein Foto allein füllt die Spalte, ungerade Anzahl: das erste führt breit. */
.simple__gallery--single { grid-template-columns: 1fr; }
.simple__gallery--single .simple__gallery-image { aspect-ratio: 16 / 10; }
.simple__gallery--lead .simple__gallery-image:first-child {
  grid-column: 1 / -1; aspect-ratio: 16 / 9;
}
@media (max-width: 700px) {
  .simple__gallery { gap: 10px; }
  .simple__gallery--lead .simple__gallery-image:first-child { aspect-ratio: 16 / 10; }
}

/* =============================================================================
   Firmengeschichte (/ueber-uns/)
   -----------------------------------------------------------------------------
   Der Block lief als Slider mit 360px breiten Karten in einer Reihe, die nur
   ~145px pro Platz hergab: die Karten lagen übereinander, die Verbindungslinie
   der einen Station strich quer durch die Jahreszahl der nächsten. Jetzt ein
   Raster gleich breiter Stationen, Linie und Punkt als Kante der Karte.
   ============================================================================= */
.timeline__row-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.timeline__item { display: block; min-width: 0; }
/* Die Verbindungsgrafik war ein 64px breites SVG zwischen den Karten — im Raster
   hat sie keine Aufgabe mehr und lag nur noch im Text. */
.timeline__connector { display: none !important; }

.timeline__item .timeline__card,
.timeline__card {
  width: auto; height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 0 0;
  border: 0; border-top: 1px solid var(--bf-line); border-radius: 0;
  position: relative;
}
/* Punkt auf der Zeitachse — Rot als Signal, sonst nichts Farbiges im Block. */
.timeline__card::before {
  content: ""; position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; background: var(--bf-signal);
}
.timeline__year {
  font-family: var(--bf-mono); font-size: var(--bf-fs-sm); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bf-ink);
}
.timeline__desc,
.timeline__desc p { font-size: var(--bf-fs-sm); color: var(--bf-steel-700); line-height: 1.6; }
.timeline__nav { display: none; }

@media (max-width: 700px) {
  .timeline__row-inner { grid-template-columns: 1fr; gap: 16px; }
}

/* =============================================================================
   Shop-Kacheln: Löcher zwischen Titel und Preis
   -----------------------------------------------------------------------------
   Der Preis steht bewusst unten auf einer Linie (sonst springt er in jeder Kachel
   auf eine andere Höhe). Bezahlt wurde das mit Leere: die Datenzeile war je nach
   Produkt 0 bis 124px hoch — bei Zubehör ohne Technikdaten klaffte darüber ein
   halber Kachelraum. Die Zeile ist jetzt immer da und immer einzeilig
   (s. shop_archive.php), der Titel hält zwei Zeilen frei. Rest: eine Zeile
   Unterschied statt fünf.
   ============================================================================= */
.shop__card-title {
  line-height: 1.2;
  min-height: 2.4em;                 /* zwei Zeilen Titel */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.bf-specline {
  min-height: 26px;                  /* eine Zeile Kurzdaten, auch wenn leer */
  flex-wrap: nowrap;
  overflow: hidden;
}
.bf-specline span {
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.bf-specline:empty { margin-bottom: 10px; }

/* =============================================================================
   Bildbetrachter (assets/js/bunnefeld-lightbox.js)
   -----------------------------------------------------------------------------
   Vorher lag nur das Stylesheet von Magnific Popup im Kopf, das Skript fehlte —
   ein Klick aufs Foto öffnete die nackte Bilddatei. Jetzt eigener Betrachter
   ohne Fremdbibliothek: Vollbild, Blättern, Tastatur, Wischen.
   ============================================================================= */
.bf-zoomable { cursor: zoom-in; }

.bf-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: clamp(16px, 4vw, 48px);
  background: rgba(16, 16, 15, .94);
  animation: bf-lightbox-in .18s var(--bf-ease);
}
.bf-lightbox[hidden] { display: none; }
@keyframes bf-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
body.bf-lightbox-open { overflow: hidden; }

.bf-lightbox__figure {
  margin: 0; max-width: min(1400px, 100%); max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.bf-lightbox__image {
  display: block; max-width: 100%; max-height: calc(100vh - 150px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 0; background: #1a1a19;
}
.bf-lightbox__caption {
  margin: 0; max-width: 70ch; text-align: center;
  font-size: var(--bf-fs-xs); color: rgba(255, 255, 255, .72);
}

.bf-lightbox__close,
.bf-lightbox__nav {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--bf-radius);
  background: transparent; color: #fff; cursor: pointer;
  transition: background .16s var(--bf-ease), border-color .16s var(--bf-ease);
}
.bf-lightbox__close:hover,
.bf-lightbox__nav:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.bf-lightbox__close { position: absolute; top: 20px; right: 20px; }
.bf-lightbox.is-single .bf-lightbox__nav { display: none; }

.bf-lightbox__counter {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .1em; color: rgba(255, 255, 255, .6);
}

@media (max-width: 700px) {
  .bf-lightbox { padding: 12px; }
  .bf-lightbox__nav { position: absolute; bottom: 16px; }
  .bf-lightbox__nav--prev { left: 16px; }
  .bf-lightbox__nav--next { right: 16px; }
  .bf-lightbox__counter { bottom: 32px; }
  .bf-lightbox__image { max-height: calc(100vh - 190px); }
}

/* =============================================================================
   Einblenden beim Scrollen (assets/js/bunnefeld-reveal.js)
   Die Klasse setzt ausschließlich das Skript — ohne JavaScript bleibt nichts
   unsichtbar. Bei „weniger Bewegung" im System läuft gar nichts an.
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .bf-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--bf-ease), transform .5s var(--bf-ease);
    transition-delay: var(--bf-reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .bf-reveal.is-in { opacity: 1; transform: none; }
}

/* =============================================================================
   Kopf der Startseite, vierte Fassung: Schrift trägt, Fotos stehen als Streifen
   -----------------------------------------------------------------------------
   Drei Anläufe mit vollflächigem Foto sind an derselben Sache gescheitert:
   Fassung 1 legte einen dunklen Verlauf über die ganze Fläche — aus dem
   Novemberhof wurde ein Abend im Nieselregen. Fassung 2 (zwei Hälften) war
   sauber, aber brav. Fassung 3 dunkelte nur unten ab; auf dem weißen Bord des
   Kühlkoffers wurde daraus ein grauer Schleier, und «MASS» stand weiß auf Weiß.

   Der Grund liegt nicht am Aufbau, sondern am Material: alle 134 Aufnahmen der
   Mediathek sind Katalogfotos im Format 4:3, entstanden auf dem Hof vor der
   Hecke. In eine breite Fläche gezogen wird davon der halbe Anhänger
   abgeschnitten. Also trägt jetzt die Typografie auf Graphit, und die Fotos
   stehen darunter in eigenen Rahmen — keines mit Text darauf. Damit hängt der
   Kopf nicht mehr davon ab, wie gut das nächste Foto ausfällt.
   ============================================================================= */
.hero {
  position: relative;
  /* main.css setzt hier align-items:center — dadurch war die Datenleiste nur so
     breit wie ihr Inhalt und stand als Kasten mitten im Bild. */
  display: block;
  min-height: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
.hero::before, .hero::after { content: none !important; }

.hero__head { background: #fff; }
.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 92px; padding-bottom: 52px; }
.hero__content {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  max-width: 900px;
}
.hero .title, .hero h1, .hero__title {
  margin: 0; color: var(--bf-ink);
  font-family: var(--bf-cond); font-weight: 700;
  font-size: clamp(34px, 18px + 3.6vw, 76px);
  line-height: .98; letter-spacing: -0.01em; text-transform: uppercase;
}
.hero .text, .hero p, .hero__text {
  margin: 0; max-width: 56ch;
  color: var(--bf-steel-700); font-size: var(--bf-fs-lg); line-height: 1.55;
}

/* Der zweite Knopf war weiß auf Graphit gedacht. Auf hellem Grund wäre er
   unsichtbar — hier bekommt er die Kontur des Hauses. */
.hero__actions .hero__btn--transparent {
  color: var(--bf-ink);
  border-color: var(--bf-ink);
  background: transparent;
}
.hero__actions .hero__btn--transparent:hover {
  background: var(--bf-ink); color: #fff; border-color: var(--bf-ink);
}
.hero__actions { margin-top: 10px; gap: 14px; flex-wrap: wrap; }

/* ---------- Bildstreifen ----------
   Feste Höhe statt fester Seitenverhältnisse: die Vorlagen sind mal 4:3, mal
   16:9, mal hochkant. Eine gemeinsame Bandhöhe bindet sie zu einer Zeile
   zusammen, `cover` schneidet den Rest weg. Zwei Pixel Fuge zeigen, dass es
   drei Aufnahmen sind und keine Montage. */
.hero__band {
  display: grid;
  grid-template-columns: repeat(var(--hero-frames, 3), 1fr);
  gap: 2px;
  background: var(--bf-ink);
  border-top: 1px solid var(--bf-line);
}
.hero__band[data-count="1"] { --hero-frames: 1; }
.hero__band[data-count="2"] { --hero-frames: 2; }
.hero__band[data-count="4"] { --hero-frames: 4; }
.hero__frame { margin: 0; overflow: hidden; }
.hero__frame img {
  display: block; width: 100%; height: clamp(190px, 19vw, 280px);
  object-fit: cover; object-position: 50% 55%;
}

/* ---------- Datenleiste am Fuß des Kopfs ---------- */
.hero__bar {
  position: relative; z-index: 2;
  background: var(--bf-ink);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero__bar-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px clamp(24px, 3vw, 52px);
  padding-top: 14px; padding-bottom: 14px;
}
.hero__fact {
  font-family: var(--bf-mono); font-size: var(--bf-fs-sm); color: #fff; white-space: nowrap;
}
.hero__fact span {
  margin-right: 8px;
  font-size: var(--bf-fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.hero__bar-phone {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  font-family: var(--bf-mono); font-size: var(--bf-fs-sm); color: #fff; text-decoration: none;
  white-space: nowrap;
}
.hero__bar-phone:hover { color: var(--bf-signal); }

@media (max-width: 900px) {
  .hero__inner { padding-top: 60px; padding-bottom: 40px; }
}
/* Auf dem Telefon werden aus drei Spalten zwei Rahmen nebeneinander: bei 390 px
   wäre jeder Ausschnitt gut 120 px breit — vom Anhänger bliebe ein Streifen
   Blech. Der dritte Rahmen entfällt lieber, als dass alle drei unlesbar werden. */
@media (max-width: 620px) {
  .hero__inner { padding-top: 34px; padding-bottom: 34px; }
  /* 22px Fließtext füllen hochkant den halben Bildschirm, bevor der erste Knopf
     kommt — auf dem Telefon reicht das Grundmaß. */
  .hero .text, .hero p, .hero__text { font-size: var(--bf-fs-base); }
  .hero__band { grid-template-columns: 1fr 1fr; }
  .hero__band .hero__frame:nth-child(n + 3) { display: none; }
  .hero__frame img { height: 168px; }
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; }
  .hero__actions .hero__btn {
    width: 100%; height: auto; min-height: 52px; padding: 14px 24px; justify-content: center;
  }
  .hero__bar-phone { margin-left: 0; }
}

/* =============================================================================
   Produktseite: ein Abstandsmaß und eine Schriftordnung
   -----------------------------------------------------------------------------
   Die Kaufspalte hatte gleichzeitig einen Flex-Abstand von 28px UND eigene
   Ränder an fast jedem Block (24 / 24 / 32 + 20 Innenabstand). Zwischen zwei
   Zeilen standen dadurch mal 28, mal 52, mal 80px — von außen sieht das nach
   Zufall aus. Jetzt trägt der Flex-Abstand allein, die Ränder sind bei null.
   Dazu eine Schriftordnung: Überschriften schmal und versal, Kleinlabels Mono,
   Fließtext Plex — statt drei Größen (14/16/18) im selben Absatzblock.
   ============================================================================= */
.bf-pd__info { display: flex; flex-direction: column; gap: 24px; }
.bf-pd__info > .bf-pd__eyebrow,
.bf-pd__info > .bf-pd__title,
.bf-pd__info > .bf-pd__facts,
.bf-pd__info > .bf-pd__usp,
.bf-pd__info > .product__buy-row,
.bf-pd__info > .bf-pd__buy { margin: 0; }
.bf-pd__price { padding: 20px 0; }
.bf-pd__usp { padding-top: 24px; }
.bf-pd__buy { margin-top: 0; }

/* Linke Spalte im gleichen Takt wie die rechte. */
.bf-pd__glance { margin-top: 32px; padding-top: 24px; }
.bf-pd__glance .product-hl { margin-top: 12px; }

/* 57,6px kamen aus einer rem-Angabe des Ursprungs-Themes (1rem = 10px) und
   passten in keine Reihe mit 24/32/48. */
.bf-pd__top { gap: 48px; }
.bf-pd__body { gap: 40px; }

/* Überschriften im Beschreibungstext liefen als fetter Fließtext — auf einer
   Seite, deren Titel und Reiter schmal und versal gesetzt sind. */
.bf-pd__panels h2,
.bf-pd__panels h3,
.bf-pd__panels h4 {
  font-family: var(--bf-cond); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; color: var(--bf-ink);
  margin: 28px 0 10px;
}
.bf-pd__panels h2 { font-size: 24px; }
.bf-pd__panels h3 { font-size: 20px; }
.bf-pd__panels h4 { font-size: 18px; }
.bf-pd__panels > *:first-child, .bf-pd__panel > *:first-child { margin-top: 0; }
.bf-pd__panels p, .bf-pd__panels li { font-size: var(--bf-fs-sm); line-height: 1.6; color: var(--bf-steel-700); }
.bf-pd__panels p { margin: 0 0 12px; }

/* Lange deutsche Komposita in schmalen Kacheln: ohne Trennung bricht der Browser
   hart hinter dem letzten passenden Buchstaben — „FAHRRADTRANSPORTANHÄNG / ER".
   Mit Silbentrennung (die Seite ist als lang="de" ausgezeichnet) steht dort ein
   Trennstrich an der richtigen Stelle. */
.shop__card-title,
.bf-related__title,
.bf-related a,
.categories__title,
.projects__item-title {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* =============================================================================
   Kopf auf dem Telefon
   -----------------------------------------------------------------------------
   In der Leiste standen vier Symbole nebeneinander (Suche, Konto, Warenkorb,
   Menü) — bei 390px eine gedrängte Reihe. Das Konto ist dort das schwächste
   Symbol (Gewerbekunden fragen an, sie verwalten kein Profil) und wandert in die
   Schublade. Die Schublade selbst hatte oben nur ein X und unten viel Leere;
   jetzt Logo oben, Kontaktblock unten am Rand.
   ============================================================================= */
@media (max-width: 640px) {
  .bfh__action--account { display: none; }
  .bfh__actions { gap: 6px; }
  .bfh__logo img { max-height: 68px; }
}

.bfh__mobile-inner {
  display: flex; flex-direction: column; min-height: 100vh;
  padding: 18px 20px 32px; max-width: 520px;
}
.bfh__mobile-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.bfh__mobile-logo { display: inline-flex; align-items: center; }
.bfh__mobile-logo img { max-height: 68px; width: auto; display: block; }
.bfh__mobile-logo .bfh__logo-text { color: #fff; font-family: var(--bf-cond); font-size: 22px; }
/* Der Schließer saß absolut oben rechts — jetzt Teil der Kopfzeile. */
.bfh__mobile-close {
  position: static; flex: none;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--bf-radius);
  background: transparent; color: #fff;
}
.bfh__mobile-close:hover { border-color: #fff; }

.bfh__mobile-menu { margin: 0 0 24px; }

.bfh__mobile-secondary {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 24px;
}
.bfh__mobile-secondary a {
  font-size: var(--bf-fs-sm); color: rgba(255, 255, 255, .65); text-decoration: none;
}
.bfh__mobile-secondary a:hover { color: #fff; }

/* Kontakt und Anfrage kleben unten am Rand statt in der Mitte zu schweben. */
.bfh__mobile-contact {
  margin-top: auto; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* =============================================================================
   Ratgeber: Übersicht und Beitrag
   -----------------------------------------------------------------------------
   Die Vorlagen kamen aus dem Ursprungs-Theme und trugen dessen Optik: Listen
   ohne Aufzählungszeichen (der Poster-Shop hatte `list-style: none` global
   gesetzt), Überschriften in einer anderen Schrift als der Rest des Auftritts,
   kein Kopf über der Liste. Hier wird beides in die Sprache des Hauses geholt.
   ============================================================================= */

/* ---------- Kopf der Übersichtsseite ---------- */
.news__head { padding-top: 6px; padding-bottom: 34px; border-bottom: 1px solid var(--bf-line); }
.news__head-title {
  margin: 0; color: var(--bf-ink);
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 20px + 2vw, 52px); line-height: 1.02; letter-spacing: -0.01em;
}
.news__head-lead {
  margin: 16px 0 0; max-width: 62ch;
  color: var(--bf-steel-700); font-size: var(--bf-fs-lg); line-height: 1.55;
}

/* ---------- Beitrag ---------- */
.single-news__title {
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  line-height: 1.02; letter-spacing: -0.01em;
}
.single-news__body h2,
.single-news__body h3 {
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  color: var(--bf-ink); line-height: 1.08; letter-spacing: -0.005em;
}
.single-news__body h2 { font-size: clamp(24px, 18px + 1vw, 32px); margin: 40px 0 14px; }
.single-news__body h3 { font-size: clamp(20px, 16px + 0.6vw, 24px); margin: 30px 0 10px; }
.single-news__body p { margin: 0 0 16px; line-height: 1.65; }

/* Der Ursprungs-Shop hat Aufzählungen global die Punkte genommen — im Fließtext
   eines Ratgebers werden daraus Sätze, die wie ein Absatz aussehen. */
.single-news__body ul,
.single-news__body ol {
  margin: 0 0 20px; padding-left: 1.35em;
  list-style: revert;
}
.single-news__body ul li,
.single-news__body ol li {
  margin-bottom: 8px; line-height: 1.6; list-style: revert;
}
.single-news__body ul li::marker { color: var(--bf-signal); }
.single-news__body a { color: var(--bf-signal); text-underline-offset: 3px; }
.single-news__body strong { color: var(--bf-ink); }
.single-news__body em { color: var(--bf-steel-700); }

/* Überschrift des Info-Blocks: gleicher Abstand zum Raster wie bei den
   benachbarten Abschnitten, damit die Kacheln nicht am Titel kleben. */
.info h2.title.info__head { margin: 0 0 28px; text-transform: uppercase; letter-spacing: -0.01em; }
.info h2.title.info__head::before {
  content: ""; display: block; width: 40px; height: 3px;
  background: var(--bf-signal); margin-bottom: 20px;
}

/* =============================================================================
   Projektseite: Text nach oben statt in die Mitte
   -----------------------------------------------------------------------------
   `.simple__inner` steht auf `align-items: center`. Bei einer einzelnen
   Abbildung ist das richtig. Auf der Projektseite ist die Bildspalte aber eine
   Wand aus drei Fotos (545px) und die Textspalte 222px hoch — der Text schwebte
   in deren Mitte, oben und unten je gut 160px Leere. Gemessen an drei Reihen
   waren das rund 640px Nichts auf einer Seite mit drei Projekten.

   `:has()` grenzt die Regel auf genau die Reihen ein, die eine Bilderwand
   haben; Browser ohne `:has()` bleiben beim bisherigen Verhalten.
   ============================================================================= */
.simple__inner:has(.simple__gallery) { align-items: flex-start; }

/* =============================================================================
   Hauptknopf: ruhige Graphitfläche
   -----------------------------------------------------------------------------
   Die Fläche kommt aus `--bf-btn` (Tokenblock oben). Rot war hier eine große
   satte Füllung und las sich wie ein Preisschild.

   Ein roter Pfeil im Knopf war der Zwischenschritt dahin — er wirkte altbacken
   und ist wieder raus. Der Knopf sagt jetzt gar nichts über die Farbe, er ist
   einfach eine ruhige Fläche; die Signalfarbe lebt in den Markern über den
   Überschriften, den Ziffern der Kacheln, dem Warenkorb-Zähler und den Links.
   ============================================================================= */
.hero__btn:not(.hero__btn--transparent),
.bfh__cta,
.shop__more-btn,
a.btn--primary {
  background: var(--bf-btn) !important;
  border-color: var(--bf-btn) !important;
  color: #fff !important;
}
.hero__btn:not(.hero__btn--transparent):hover,
.bfh__cta:hover,
.shop__more-btn:hover,
a.btn--primary:hover {
  background: var(--bf-btn-hover) !important;
  border-color: var(--bf-btn-hover) !important;
  color: #fff !important;
}

/* Der Knopf im dunklen Aufruf-Block ist die Ausnahme.
   Solange er rot war, stand er auf der Graphitplatte für sich. Mit `--bf-btn`
   bekam er #1a1a19 auf #292928 — ein Kontrast von 1,2:1, also praktisch
   unsichtbar: ein schwarzes Rechteck auf schwarzem Grund. Auf dunklem Grund
   dreht sich das Verhältnis um, der Hauptweg ist hier die helle Fläche. */
.cta .cta__btn,
.cta__card .cta__btn,
a.cta__btn {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--bf-ink) !important;
}
.cta .cta__btn:hover,
.cta__card .cta__btn:hover,
a.cta__btn:hover {
  background: var(--bf-line) !important;
  border-color: var(--bf-line) !important;
  color: var(--bf-ink) !important;
}

/* Der Seitenkopf-Knopf erbt aus main.css noch Inter, 6px Radius und die rote
   Fläche des Ursprungs-Themes — hier auf die Hausform gezogen. */
.hero__btn {
  font-family: var(--bf-sans);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--bf-radius);
}
.hero__btn:hover { opacity: 1; }

/* =============================================================================
   Runde 2026-08-01 — Teil 1: Konto, Warenkorb, Kacheln
   ============================================================================= */

/* Leerer Warenkorb: die Meldung soll die Schublade füllen, nicht als schmaler
   Streifen unter der Kopfzeile kleben. */
.bf-cart .woocommerce-mini-cart__empty-message {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
}
.bf-cart .link-cart {
  flex: none; display: block; margin: 0 24px 24px;
  padding: 15px 20px; text-align: center;
  border: 1px solid var(--bf-line); color: var(--bf-ink);
  font-size: var(--bf-fs-sm); font-weight: 600; text-decoration: none;
  text-transform: uppercase; letter-spacing: .04em;
}
.bf-cart .link-cart:hover { border-color: var(--bf-ink); }

/* -----------------------------------------------------------------------------
   Hinweise im Konto: Satz oben, Knopf darunter
   -----------------------------------------------------------------------------
   Auf /mein-konto/orders/ standen Satz und Knopf auf zwei verschiedenen Achsen:
   „Es wurde noch keine Bestellung aufgegeben" schwebte in der Mitte der Zeile,
   der Knopf saß links darunter und ragte unten aus dem Kasten.
   Ursache ist der Bau des Kastens: WooCommerce schreibt den Satz als nackten
   Textknoten neben den Knopf. Im Flex-Container wird daraus ein anonymes
   Element, das sich weder ordnen noch ausrichten lässt — `order`, `align-items`
   und `text-align` greifen an ihm vorbei. Deshalb kein Flex: als Block steht der
   Satz auf seiner Zeile, der Knopf auf seiner, beide an derselben linken Kante.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
  display: block !important;
  text-align: left !important;
}
/* `display: flex` statt `inline-flex`: nur ein Element auf Blockebene beginnt
   eine neue Zeile. Als Inline-Element hing der Knopf hinter dem Satz und ragte
   unten aus dem Kasten heraus. */
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-error .button {
  display: flex !important;
  width: max-content !important;
  margin: 14px 0 0 !important;
}

/* -----------------------------------------------------------------------------
   Adresskarten: beide Karten gleich gebaut
   -----------------------------------------------------------------------------
   „Rechnungsadresse hinzufügen" saß in der einen Karte als roter Link neben der
   Überschrift, in der anderen darunter — je nachdem, ob der Text noch in die
   Zeile passte. Zwei Karten nebeneinander, zwei verschiedene Bauweisen. Der Link
   steht jetzt immer unter dem Text als schmaler Knopf mit Kontur; Rot war hier
   ohnehin fehl am Platz, es ist ein Nebenweg, kein Hauptweg.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-Addresses { align-items: stretch; }
.woocommerce-account .woocommerce-Address {
  display: flex; flex-direction: column; align-items: flex-start;
}
/* Der Knopf steckt im `<header>` neben der Überschrift, der Text steht als
   Geschwister darunter — in dieser Verschachtelung lässt sich die Reihenfolge
   nicht ändern. `display: contents` löst den Header auf: Überschrift und Knopf
   werden direkte Kinder der Karte, und dann greift `order`.
   Reihenfolge in der Karte: Überschrift, Text, Knopf am Fuß. */
.woocommerce-account .woocommerce-Address-title { display: contents; }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { order: 1; margin: 0 0 12px; }
.woocommerce-account .woocommerce-Address address,
.woocommerce-account .woocommerce-Address > p { order: 2; flex: 1 1 auto; margin: 0 0 18px; }
.woocommerce-account .woocommerce-Address .edit {
  order: 3; margin-top: auto;
  display: inline-flex !important; align-items: center; justify-content: center;
  width: max-content !important; min-width: 0 !important;
  min-height: 40px; padding: 0 18px;
  border: 1px solid var(--bf-ink); border-radius: 0;
  background: transparent; color: var(--bf-ink) !important;
  font-family: var(--bf-sans); font-size: var(--bf-fs-xs); font-weight: 600;
  letter-spacing: .02em; text-decoration: none !important;
}
.woocommerce-account .woocommerce-Address .edit:hover {
  background: var(--bf-ink); color: #fff !important;
}

/* -----------------------------------------------------------------------------
   „Warum bunnefeld" / „Zahlen, die für sich sprechen": Kacheln statt Zeilen
   -----------------------------------------------------------------------------
   Die Reihe war eine Liste voller Karten über die ganze Breite: links Titel und
   zwei Zeilen Text, rechts am Rand eine 40px große graue Ziffer — dazwischen bis
   zu 400px Nichts. Bei vier Punkten viermal dieselbe Leere übereinander.
   Als Raster aus Kacheln steht die Ziffer als Kennung über dem Titel, und die
   Fläche wird von Inhalt getragen statt von Abstand. Betrifft Startseite und
   «Über uns» — dieselbe Reihe, dasselbe Problem.
   -------------------------------------------------------------------------- */
.reasons__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  border-top: 0;
}
.reasons__item {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  padding: 28px 26px 30px;
  border: 1px solid var(--bf-line); border-bottom: 1px solid var(--bf-line);
  background: #fff;
}
.reasons__item-info { gap: 8px; }
.reasons__item-number, .reasons__number {
  order: -1;
  font-family: var(--bf-mono); font-size: var(--bf-fs-sm); font-weight: 500;
  letter-spacing: .12em; color: var(--bf-steel-500);
}
.reasons__item-title { font-family: var(--bf-cond); font-size: var(--bf-fs-xl); line-height: 1.15; }
@media (max-width: 620px) {
  .reasons__items { grid-template-columns: 1fr; }
}

/* =============================================================================
   Runde 2026-08-01 — Teil 2: /projekte/ neu gebaut
   -----------------------------------------------------------------------------
   Vorher: drei gleich gebaute Reihen aus halber Textspalte und halber Bildspalte.
   Der Text war je rund 200px hoch, die Reihe 673px — links stand also zweimal so
   viel Leere wie Inhalt, und weil alle drei Reihen identisch aufgebaut waren,
   las sich die Seite wie dreimal dieselbe. Die Fotos, das Einzige, was ein
   Sonderfahrzeug wirklich zeigt, waren dabei 279px klein.

   Jetzt ein Referenzblatt: Kopfzeile über die volle Breite (links Kennung und
   Titel, rechts die Beschreibung), darunter die Bildwand über die volle Breite —
   ein großes Foto und zwei Ausschnitte daneben. Eine Haarlinie trennt die
   Projekte. Kein Absatz hängt mehr in der Mitte von Nichts, und das Leitfoto ist
   statt 279px rund 780px breit.

   Der Anker `bf-page-projekte` kommt aus dem body_class-Filter in
   inc/theme_functions.php.
   ============================================================================= */
body.bf-page-projekte main { counter-reset: bf-proj; }

body.bf-page-projekte .simple {
  padding: 0;
  counter-increment: bf-proj;
  background: none;
}
body.bf-page-projekte .simple > .container {
  padding-top: 52px;
  padding-bottom: 56px;
  border-top: 1px solid var(--bf-line);
}
body.bf-page-projekte .simple:first-of-type > .container { border-top: 0; padding-top: 8px; }

/* Kopfzeile: Kennung und Titel links, Beschreibung rechts. */
body.bf-page-projekte .simple__inner { display: block; }
body.bf-page-projekte .simple__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 8px 64px;
  width: 100%;
  margin-bottom: 28px;
}
body.bf-page-projekte .simple__content .title {
  grid-column: 1; margin: 0;
  font-size: var(--bf-fs-2xl); line-height: 1.08; text-transform: uppercase;
}
/* Der rote Strich über dem Titel wird zur laufenden Nummer — dieselbe Stelle,
   dieselbe Größe, aber sie sagt jetzt etwas. */
body.bf-page-projekte .simple__content .title::before {
  content: counter(bf-proj, decimal-leading-zero);
  display: block;
  width: auto; height: auto;
  margin: 0 0 14px;
  background: none;
  font-family: var(--bf-mono); font-size: var(--bf-fs-sm); font-weight: 500;
  letter-spacing: .14em; color: var(--bf-steel-500);
}
body.bf-page-projekte .simple__content .text {
  grid-column: 2; grid-row: 1 / span 3;
  max-width: 62ch;
}
body.bf-page-projekte .simple__content .simple__btn { grid-column: 1; margin-top: 6px; }

/* Bildwand über die volle Breite: ein Leitfoto, zwei Ausschnitte daneben. */
body.bf-page-projekte .simple__media { width: 100%; display: block; }
body.bf-page-projekte .simple__gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* Die Zeilen müssen ausdrücklich stehen: `grid-row: 1 / -1` zählt nur Linien
     des ausdrücklichen Rasters. Mit `grid-auto-rows` gab es keine zweite Linie,
     das Leitfoto blieb einzeilig und unten rechts klaffte ein Loch. */
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 21 / 9;
  gap: 12px;
}
body.bf-page-projekte .simple__gallery-image {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}
body.bf-page-projekte .simple__gallery--lead .simple__gallery-image:first-child,
body.bf-page-projekte .simple__gallery .simple__gallery-image:first-child {
  grid-column: 1; grid-row: 1 / span 2;
  aspect-ratio: auto;
}
/* Ein einzelnes Foto: volle Breite, keine leere Spalte. */
body.bf-page-projekte .simple__gallery--single {
  grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 21 / 9;
}
body.bf-page-projekte .simple__gallery--single .simple__gallery-image:first-child {
  grid-row: 1 / span 1;
}

@media (max-width: 900px) {
  body.bf-page-projekte .simple__content {
    grid-template-columns: 1fr; gap: 12px;
  }
  body.bf-page-projekte .simple__content .text { grid-column: 1; grid-row: auto; }
  body.bf-page-projekte .simple__content .simple__btn { grid-column: 1; }
  body.bf-page-projekte .simple__gallery { aspect-ratio: 16 / 10; gap: 8px; }
}
@media (max-width: 620px) {
  body.bf-page-projekte .simple__gallery {
    grid-template-columns: 1fr 1fr; aspect-ratio: auto;
    grid-template-rows: none; grid-auto-rows: auto;
  }
  body.bf-page-projekte .simple__gallery .simple__gallery-image:first-child {
    grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10;
  }
  body.bf-page-projekte .simple__gallery-image { aspect-ratio: 4 / 3; }
}

/* „Weitere Aufbauten": sechs Kacheln liefen als 4 + 2 aus — die letzte Reihe
   halb leer. Drei Spalten ergeben zwei volle Reihen. */
body.bf-page-projekte .projects--masonry .projects__masonry {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 700px) {
  body.bf-page-projekte .projects--masonry .projects__masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
}

/* =============================================================================
   Runde 2026-08-01 — Teil 3: Warenkorb, Kasse, Bestellbestätigung
   -----------------------------------------------------------------------------
   Diese drei Seiten waren als Einzige nie gestaltet worden: Warenkorb und Kasse
   stehen auf den WooCommerce-Blöcken (`wc-block-…`), die Bestätigung auf der
   klassischen Ausgabe (`woocommerce-order…`). Beide bringen ihr eigenes
   Stylesheet mit — Systemschrift, 4px-Radien, blasse Linien, eigene Knopfform.
   Neben dem Rest der Seite las sich das wie ein fremdes Fenster im Shop, und
   ausgerechnet dort, wo der Kunde Geld ausgibt.

   Hier steht nur Gestaltung: Hausschrift, harte Kanten, unsere Linien und
   Knöpfe. An der Mechanik der Blöcke ist nichts angefasst.
   ============================================================================= */

/* ---------- Seitenkopf: Warenkorb / Kasse / Bestätigung ---------- */
body.bf-page-warenkorb .section_in > h1,
body.bf-page-kasse .section_in > h1 {
  margin: 0 0 32px;
  font-family: var(--bf-cond); font-weight: 700;
  font-size: var(--bf-fs-3xl); line-height: 1.05;
  text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--bf-ink);
}
body.bf-page-warenkorb .section_in > h1::before,
body.bf-page-kasse .section_in > h1::before {
  content: ""; display: block; width: 40px; height: 3px;
  background: var(--bf-signal); margin-bottom: 20px;
}
body.bf-page-warenkorb .section.cart,
body.bf-page-kasse .section { padding: 48px 0 88px; }

/* =============================================================================
   WooCommerce-Blöcke (Warenkorb + Kasse)
   ============================================================================= */
.wc-block-components-main,
.wc-block-components-sidebar,
.wc-block-cart,
.wc-block-checkout {
  font-family: var(--bf-sans);
  color: var(--bf-ink);
}
.wc-block-components-button,
.wc-block-components-text-input input,
.wc-block-components-text-input,
.wc-blocks-components-select__select,
.wc-blocks-components-select,
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector input,
.wc-block-components-panel,
.wc-block-components-notice-banner,
.wc-block-components-sidebar-layout .wc-block-components-sidebar,
.wc-block-components-address-card,
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img {
  border-radius: 0 !important;
}

/* ---------- Überschriften der Blöcke ---------- */
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--bf-cond) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--bf-ink) !important;
}
.wc-block-components-checkout-step__title { font-size: 22px !important; }
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--bf-mono) !important; font-weight: 500 !important;
  font-size: var(--bf-fs-xs) !important; letter-spacing: .14em !important;
  color: var(--bf-steel-500) !important;
}
.wc-block-components-checkout-step__description {
  font-size: var(--bf-fs-sm); color: var(--bf-steel-500);
}

/* ---------- Tabellenkopf des Warenkorbs: Datenblatt-Zeile ---------- */
.wc-block-cart-items__header {
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bf-steel-500);
  border-bottom: 1px solid var(--bf-ink);
}
.wc-block-cart-items__row { border-bottom: 1px solid var(--bf-line); }
.wc-block-cart-item__wrap { padding-block: 20px; }
/* Die Blöcke setzen die Größe über lange Ketten (`table.wc-block-cart-items
   .wc-block-cart-items__row …`) auf die WordPress-Vorgabe „small" — 13px, also
   kleiner als der Fließtext. Der Produktname ist aber das Wichtigste in der
   Zeile, deshalb hier dieselbe Kettenlänge. */
.wc-block-components-product-name,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
  font-family: var(--bf-cond) !important; font-weight: 600;
  font-size: 20px !important; text-transform: uppercase; line-height: 1.15;
  color: var(--bf-ink) !important; text-decoration: none;
}
/* In der schmalen Bestellübersicht darf er kleiner sein. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name,
.wc-block-components-order-summary-item .wc-block-components-product-name {
  font-size: 15px !important;
}
.wc-block-components-product-name:hover { color: var(--bf-ink) !important; text-decoration: underline; }
.wc-block-components-product-metadata__description {
  font-size: var(--bf-fs-xs); color: var(--bf-steel-500); line-height: 1.5;
}
.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount,
.wc-block-formatted-money-amount {
  font-family: var(--bf-mono); color: var(--bf-ink);
}
.wc-block-cart-item__remove-link {
  font-size: var(--bf-fs-xs) !important; color: var(--bf-steel-500) !important;
  text-decoration: underline; text-underline-offset: 3px;
}
.wc-block-cart-item__remove-link:hover { color: var(--bf-signal) !important; }

/* ---------- Mengenwähler ---------- */
.wc-block-components-quantity-selector {
  border: 1px solid var(--bf-line);
  max-width: 132px;
}
.wc-block-components-quantity-selector::after { display: none !important; }
.wc-block-components-quantity-selector__button {
  color: var(--bf-ink) !important; font-size: 18px;
  min-height: 42px;
}
.wc-block-components-quantity-selector__button:hover { background: var(--bf-bg-alt) !important; }
.wc-block-components-quantity-selector__input {
  font-family: var(--bf-mono); font-size: var(--bf-fs-sm); color: var(--bf-ink);
  min-height: 42px;
}

/* ---------- Rechte Spalte: Summe ---------- */
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
  background: var(--bf-bg-alt);
  border: 1px solid var(--bf-line);
  padding: 24px;
}
.wc-block-components-totals-wrapper { border-color: var(--bf-line) !important; }
.wc-block-components-totals-item__label { font-size: var(--bf-fs-sm); color: var(--bf-steel-700); }
.wc-block-components-totals-item__value { font-family: var(--bf-mono); color: var(--bf-ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--bf-cond); font-weight: 700; font-size: var(--bf-fs-lg);
  text-transform: uppercase; color: var(--bf-ink);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--bf-mono); font-size: 24px; color: var(--bf-ink);
}
.wc-block-components-totals-footer-item-tax,
.wc-block-components-totals-item__description {
  font-size: var(--bf-fs-xs); color: var(--bf-steel-500);
}
.wc-block-components-panel__button {
  font-family: var(--bf-sans) !important; font-size: var(--bf-fs-sm) !important;
  font-weight: 600 !important; color: var(--bf-ink) !important;
}

/* ---------- Knöpfe der Blöcke: Hausform ---------- */
.wc-block-components-button:not(.wc-block-components-panel__button):not(.wc-block-components-quantity-selector__button) {
  min-height: 52px !important;
  padding: 0 28px !important;
  border-radius: 0 !important;
  background: var(--bf-btn) !important;
  border: 1px solid var(--bf-btn) !important;
  color: #fff !important;
  font-family: var(--bf-sans) !important; font-weight: 600 !important;
  font-size: var(--bf-fs-sm) !important;
  letter-spacing: .04em; text-transform: uppercase;
}
.wc-block-components-button:not(.wc-block-components-panel__button):not(.wc-block-components-quantity-selector__button):hover {
  background: var(--bf-btn-hover) !important; border-color: var(--bf-btn-hover) !important;
}
.wc-block-components-button__text { color: inherit !important; }
/* Der Rahmen, den die Blöcke als Fokus-/Hover-Ring zeichnen, sitzt in einem
   ::after mit eigenem Radius — sonst blitzt eine runde Kante über der eckigen. */
.wc-block-components-button::after { border-radius: 0 !important; }
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button { width: 100%; }

/* ---------- Formularfelder der Kasse ---------- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-blocks-components-select__select {
  min-height: 52px;
  border: 1px solid var(--bf-line) !important;
  border-radius: 0 !important;
  background: #fff;
  font-family: var(--bf-sans); font-size: var(--bf-fs-sm); color: var(--bf-ink);
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
  outline: none;
  border-color: var(--bf-ink) !important;
  box-shadow: none !important;
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  font-family: var(--bf-sans); color: var(--bf-steel-500);
}
.wc-block-components-text-input.is-active label {
  font-size: var(--bf-fs-xs); color: var(--bf-steel-500);
}
.wc-block-components-checkbox__label { font-size: var(--bf-fs-sm); color: var(--bf-steel-700); }
.wc-block-components-address-form__address_2-toggle,
.wc-block-checkout__terms {
  font-size: var(--bf-fs-xs); color: var(--bf-steel-500);
}
.wc-block-checkout__terms a,
.wc-block-checkout__guest-checkout-notice a { color: var(--bf-ink); text-underline-offset: 3px; }

/* ---------- Hinweise ---------- */
.wc-block-components-notice-banner {
  border: 1px solid var(--bf-line) !important;
  border-left: 3px solid var(--bf-steel-500) !important;
  border-radius: 0 !important;
  background: var(--bf-bg-alt) !important;
  color: var(--bf-ink) !important;
  font-size: var(--bf-fs-sm);
}
.wc-block-components-notice-banner.is-error { border-left-color: var(--bf-signal) !important; }
.wc-block-components-notice-banner.is-success { border-left-color: #1f7a4d !important; }
/* Am Symbol des Hinweises wird nichts gedreht: Es ist zweifarbig gezeichnet
   (Scheibe plus ausgesparter Glyph). Ein eigener `fill` macht daraus einen
   vollen Punkt ohne Ausrufezeichen — WooCommerce färbt es selbst richtig. */

/* =============================================================================
   Bestellbestätigung (klassische Ausgabe, `/kasse/order-received/…`)
   ============================================================================= */
.woocommerce-order { font-family: var(--bf-sans); color: var(--bf-ink); }
.woocommerce-notice--success {
  margin: 0 0 28px;
  padding: 16px 20px;
  border: 1px solid var(--bf-line); border-left: 3px solid #1f7a4d;
  background: var(--bf-bg-alt);
  font-size: var(--bf-fs-base);
}
/* Die Eckdaten standen als nackte Liste nebeneinander. Als Datenblattzeile mit
   Trennlinien liest man Nummer, Datum und Betrag auf einen Blick. */
/* Bleibt Flex — die geerbte Regel setzt `display:flex` spezifischer, als eine
   Klasse hier überschreiben kann. Mit `flex: 1` füllen die Felder die Zeile
   trotzdem gleichmäßig, statt links zu kleben. */
ul.woocommerce-order-overview {
  display: flex; flex-wrap: wrap;
  gap: 1px; margin: 0 0 40px; padding: 0; list-style: none;
  background: var(--bf-line); border: 1px solid var(--bf-line);
}
ul.woocommerce-order-overview li {
  flex: 1 1 160px;
  margin: 0; padding: 18px 20px; border: 0 !important; background: #fff;
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--bf-steel-500);
}
ul.woocommerce-order-overview li strong {
  display: block; margin-top: 8px;
  font-family: var(--bf-mono); font-size: var(--bf-fs-lg); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--bf-ink);
}
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-order h2 {
  margin: 0 0 18px;
  font-family: var(--bf-cond); font-weight: 700; font-size: 22px;
  text-transform: uppercase; color: var(--bf-ink);
}
.woocommerce-table--order-details {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--bf-line);
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: 14px 18px; border: 0; border-bottom: 1px solid var(--bf-line);
  text-align: left; font-size: var(--bf-fs-sm);
}
.woocommerce-table--order-details thead th {
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--bf-steel-500);
  border-bottom: 1px solid var(--bf-ink);
}
.woocommerce-table--order-details td.woocommerce-table__product-total,
.woocommerce-table--order-details tfoot td { font-family: var(--bf-mono); }
.woocommerce-table--order-details tfoot th { font-weight: 600; }
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0; font-size: var(--bf-fs-base);
}
/* Der Produktname war rot — die geerbte Regel greift über `.woocommerce a` und
   ist spezifischer als eine Klasse allein. */
.woocommerce-order .woocommerce-table__product-name a,
td.woocommerce-table__product-name a {
  color: var(--bf-ink) !important; text-decoration: none;
  font-family: var(--bf-cond); font-weight: 600; text-transform: uppercase;
}
.woocommerce-order .woocommerce-table__product-name a:hover { text-decoration: underline; }
.woocommerce-customer-details address {
  padding: 20px; border: 1px solid var(--bf-line); background: var(--bf-bg-alt);
  font-style: normal; line-height: 1.7; font-size: var(--bf-fs-sm);
}
.woocommerce-customer-details--email,
.woocommerce-customer-details--phone { color: var(--bf-steel-700); }

/* Die Aktionsknöpfe der Bestätigung („Bezahlen", „Abbrechen", „Widerrufen")
   waren die letzten roten Flächen im Shop — sie stehen in einer eigenen
   geerbten Kette und wurden von den Regeln weiter oben nicht erwischt. */
.woocommerce-order .woocommerce-button,
.woocommerce-order a.button,
.woocommerce-order .button,
.woocommerce-order-details .button,
p.bf-withdrawal-link a,
.woocommerce-order .bf-withdrawal-link {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 46px !important; width: auto !important;
  padding: 0 22px !important; margin: 0 8px 8px 0 !important;
  border: 1px solid var(--bf-ink) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--bf-ink) !important;
  font-family: var(--bf-sans) !important; font-weight: 600 !important;
  font-size: var(--bf-fs-xs) !important; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none !important;
}
.woocommerce-order .woocommerce-button:hover,
.woocommerce-order a.button:hover,
.woocommerce-order .button:hover {
  background: var(--bf-ink) !important; color: #fff !important;
}
/* „Bezahlen" ist der Hauptweg und darf gefüllt sein. */
.woocommerce-order .woocommerce-button.pay,
.woocommerce-order a.button.pay {
  background: var(--bf-btn) !important; border-color: var(--bf-btn) !important;
  color: #fff !important;
}
.woocommerce-order .woocommerce-button.pay:hover,
.woocommerce-order a.button.pay:hover {
  background: var(--bf-btn-hover) !important; border-color: var(--bf-btn-hover) !important;
}

@media (max-width: 700px) {
  .woocommerce-table--order-details th,
  .woocommerce-table--order-details td { padding: 12px 14px; }
  ul.woocommerce-order-overview { grid-template-columns: 1fr; }
}

/* ---------- Bestätigungsseite, Zustand „E-Mail bestätigen" ----------
   Ruft jemand den Bestätigungslink später oder auf einem anderen Gerät auf,
   zeigt WooCommerce statt der Bestellung ein kleines Formular. Es steht
   außerhalb von `.woocommerce-order` — die Regeln oben griffen daran vorbei,
   der Knopf war die letzte rote Fläche im Shop. */
form.woocommerce-verify-email {
  max-width: 520px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--bf-line);
  background: var(--bf-bg-alt);
}
form.woocommerce-verify-email > p { margin: 0 0 18px; font-size: var(--bf-fs-sm); line-height: 1.6; }
form.woocommerce-verify-email a { color: var(--bf-ink); text-underline-offset: 3px; }
form.woocommerce-verify-email label {
  display: block; margin: 0 0 7px;
  font-family: var(--bf-sans); font-size: var(--bf-fs-xs); font-weight: 600; color: var(--bf-ink);
}
form.woocommerce-verify-email .required { color: var(--bf-signal); }
form.woocommerce-verify-email input.input-text {
  width: 100%; height: 48px; padding: 0 15px;
  border: 1px solid var(--bf-line); border-radius: 0;
  background: #fff; font-family: var(--bf-sans); font-size: var(--bf-fs-sm); color: var(--bf-ink);
}
form.woocommerce-verify-email input.input-text:focus { outline: none; border-color: var(--bf-ink); }
form.woocommerce-verify-email .form-row:last-child { margin-bottom: 0; }
form.woocommerce-verify-email button.button,
form.woocommerce-verify-email .woocommerce-button {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 48px !important; width: auto !important;
  padding: 0 26px !important; margin: 0 !important;
  border: 1px solid var(--bf-btn) !important; border-radius: 0 !important;
  background: var(--bf-btn) !important; color: #fff !important;
  font-family: var(--bf-sans) !important; font-weight: 600 !important;
  font-size: var(--bf-fs-sm) !important; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
}
form.woocommerce-verify-email button.button:hover {
  background: var(--bf-btn-hover) !important; border-color: var(--bf-btn-hover) !important;
}

/* ---------- Kontaktspalte neben dem Anfrageformular ----------
   Die Spalte war ungestaltet: rote unterstrichene Links, „Mail:" und „Tel:"
   als Präfix vor Werten, die daneben schon ein Symbol und darüber eine
   Beschriftung haben. Sie trug außerdem Anschrift und Öffnungszeiten — die
   stehen einen Block tiefer samt Karte noch einmal und in der Fußzeile ein
   drittes Mal. Jetzt zwei Wege, mehr nicht: schreiben oder anrufen. */
.cabin-request__contact { display: grid; gap: 24px; }
.cabin-request__contact-row { display: flex; align-items: flex-start; gap: 14px; }
.cabin-request__contact-icon { flex: none; line-height: 0; margin-top: 2px; }
.cabin-request__contact-icon svg path { stroke: var(--bf-steel-500); }
.cabin-request__contact-label {
  font-family: var(--bf-mono); font-size: var(--bf-fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--bf-steel-500);
  margin-bottom: 6px;
}
.cabin-request__contact-value { font-size: var(--bf-fs-sm); line-height: 1.6; color: var(--bf-ink); }
.cabin-request__contact-link {
  display: inline-block;
  color: var(--bf-ink) !important;
  text-decoration: underline; text-decoration-color: var(--bf-steel-300);
  text-underline-offset: 4px;
}
.cabin-request__contact-link:hover { text-decoration-color: var(--bf-ink); }
.cabin-request__contact-phone {
  font-family: var(--bf-mono); font-size: var(--bf-fs-lg);
}
.cabin-request__contact-locations { display: grid; gap: 24px; }

/* =============================================================================
   Runde 2026-08-01 — Teil 4: das Telefon
   -----------------------------------------------------------------------------
   Gesammelte Rückmeldungen: Logo zu klein und die Symbole kleben daneben statt
   am rechten Rand; die Kacheln der Startseite zu flach und ohne Überschrift;
   der Filter im Katalog frisst den ersten Bildschirm; eine Produktkarte passt
   nicht ins Bild; auf der Produktseite steht der Name erst nach Galerie und
   Merkmalen; die Reiter sind drei winzige Symbole.
   ============================================================================= */

/* ---------- Kopf ---------- */
@media (max-width: 900px) {
  /* Die Navigation trug `margin-left: auto` und schob die Symbole nach rechts.
     Auf dem Telefon ist sie ausgeblendet — damit fiel der Schub weg und die
     Symbole standen dicht neben dem Logo, rechts daneben 145px Leere. */
  .bfh__actions { margin-left: auto; }
}
@media (max-width: 640px) {
  /* 2026-08-04: verdoppelt (44 → 88px, gescrollt 38 → 76px). */
  .bfh__logo img { max-height: 88px; height: 88px; }
  .bfh.is-stuck .bfh__logo img { max-height: 76px; height: 76px; }
  .bfh__actions { gap: 8px; }
  .bfh__action { width: 44px; height: 44px; }
  .bfh__inner { padding-inline: 16px; }
}

/* ---------- Startseite: Kacheln «Was wir bauen» ---------- */
@media (max-width: 700px) {
  /* Die Kacheln waren 175px hoch — bei voller Breite ein Streifen, auf dem vom
     Anhänger nichts zu erkennen war. Ein Foto ist hier das Argument. */
  .categories__grid { gap: 12px; }
  .categories__item { aspect-ratio: 4 / 3; }
  .categories__image { width: 100%; height: 100%; object-fit: cover; }
  .categories__content { padding: 20px; }
}

/* ---------- Katalog: Filter und Karten ---------- */
@media (max-width: 720px) {
  /* Der Filter stand als Spalte aus sechs Zeilen à 78px — 487px, also der ganze
     erste Bildschirm, bevor ein Produkt zu sehen war. Zwei Spalten für die
     schmalen Felder halbieren das. */
  .shop__filters {
    display: none;
    padding: 14px;
    gap: 10px;
  }
  .shop__filters.is-open { display: flex; }
  .shop__filter-label { margin-bottom: 4px; }
  .shop__filter-actions { margin: 0; }
  .shop__filter-count { text-align: right; }

  .shop__filter-toggle {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 50px; margin-bottom: 16px;
    padding: 0 20px;
    border: 1px solid var(--bf-ink); border-radius: 0;
    background: #fff; color: var(--bf-ink);
    font-family: var(--bf-sans); font-weight: 600; font-size: var(--bf-fs-sm);
    letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  }
  .shop__filter-toggle.is-open { background: var(--bf-ink); color: #fff; }

  /* Das Kartenfoto war quadratisch: 356px Bild plus 198px Text plus 68px
     Knopfzeile — 656px, eine Karte passte nicht auf den Schirm. */
  .shop__card-image-wrap { aspect-ratio: 3 / 2; }
  .shop__card-info { padding: 14px 16px 12px; gap: 6px; }
  .shop__card-actions { padding: 0 16px 16px; }
}

/* ---------- Produktseite ---------- */
@media (max-width: 900px) {
  /* Reihenfolge. Im Markup steht die Galerie vor der Textspalte — am Rechner
     richtig, weil beide nebeneinander liegen. Untereinander bedeutet es: erst
     sechs Fotos und eine Merkmalsliste, und irgendwo darunter erfährt man, wie
     das Produkt heißt und was es kostet. `display: contents` löst die beiden
     Spalten auf, dann lassen sich ihre Kinder in eine Reihenfolge bringen:
     Name → Foto → Preis → Daten → Kaufen → Rest. */
  .bf-pd__top { display: flex; flex-direction: column; gap: 18px; }
  .bf-pd__gallery, .bf-pd__info { display: contents; }
  .bf-pd__eyebrow { order: 1; margin: 0; }
  .bf-pd__title   { order: 2; margin: 0; }
  .bf-pd__stage   { order: 3; }
  .bf-pd__thumbs  { order: 4; }
  .bf-pd__price   { order: 5; }
  .bf-pd__facts   { order: 6; }
  .bf-pd__buy     { order: 7; }
  .bf-pd__secondary { order: 8; }
  .bf-pd__glance  { order: 9; }
  .bf-pd__usp     { order: 10; }

  /* Sechs Vorschaubilder als Raster waren ein eigener Bildschirm. Als Streifen
     zum Wischen kosten sie eine Zeile. */
  .bf-pd__thumbs {
    display: flex; gap: 8px; margin: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Ohne diese Zeilen bestimmt der Inhalt die Breite: Flex-Kinder haben
       `min-width: auto`, der Streifen wurde 496px breit und schob die ganze
       Seite seitlich hinaus, statt in sich zu rollen. */
    width: 100%; max-width: 100%; min-width: 0;
  }
  .bf-pd__thumbs::-webkit-scrollbar { display: none; }
  .bf-pd__thumb { flex: none; width: 76px; }

  /* Der Pfad lief über drei Zeilen. Eine Zeile zum Schieben reicht. */
  .breadcrumbs__list {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    white-space: nowrap;
    width: 100%; max-width: 100%; min-width: 0;
  }
  .breadcrumbs__list::-webkit-scrollbar { display: none; }
  .breadcrumbs__link, .breadcrumbs__current { flex: none; }
}

/* Datenblatt-Zeilen: 14px Polster oben und unten je Zeile ergaben bei vier
   Angaben 240px. Die Angaben sind kurz, sie brauchen keine Luft dieser Größe. */
.bf-pd__facts > div,
.bf-pd__facts .bf-pd__fact { padding-block: 9px; }

/* ---------- Reiter ---------- */
/* Am Telefon drei gleich breite Reiter mit Beschriftung statt drei Symbolen. */
@media (max-width: 768px) {
  .bf-pd__tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; padding: 0; background: none; border-radius: 0;
    border-bottom: 1px solid var(--bf-line);
    margin-bottom: 24px;
  }
  .bf-pd__tab, .product__tab.bf-pd__tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; width: 100%;
    padding: 14px 6px !important;
    background: none !important; border-radius: 0 !important;
    border-bottom: 2px solid transparent;
    font-size: 15px; line-height: 1.15; text-align: center;
    white-space: normal;
  }
  .bf-pd__tab p, .product__tab p { display: block !important; }
  .bf-pd__tab svg { flex: none; }
  .bf-pd__tab.is-active, .product__tab.bf-pd__tab.is-active {
    background: none !important; border-radius: 0 !important;
    color: var(--bf-ink) !important; border-bottom-color: var(--bf-signal);
  }
}

/* ---------- Warenkorb-Schublade: kein Loch in der Mitte ---------- */
/* Die Warenliste war `flex: 1` und drückte Summe und Knöpfe an den unteren Rand.
   Bei einer Position stand dazwischen ein halber Bildschirm Weiß. Jetzt wächst
   die Liste nur so weit wie ihr Inhalt; erst wenn sie länger wird als der Platz,
   rollt sie — Summe und Knöpfe bleiben in beiden Fällen sichtbar. */
.bf-cart ul.woocommerce-mini-cart { flex: 0 1 auto; }
.bf-cart .woocommerce-mini-cart__empty-message { flex: 0 1 auto; padding: 48px 24px; }

/* Der Filterknopf gehört nur aufs Telefon — am Rechner steht der Filter offen. */
@media (min-width: 721px) { .shop__filter-toggle { display: none !important; } }

/* ---------- Produktseite: Luft zwischen den Abschnitten ----------
   Die Seite war nicht falsch gebaut, nur weit: zwischen Kaufblock, Reitern und
   „Passend dazu" lagen je 80px. Bei drei Abschnitten sind das 240px Nichts, die
   man scrollen muss, ohne dass etwas dazukommt. */
.bf-pd__details { margin-top: clamp(36px, 24px + 2.4vw, 56px); }
.bf-pd { padding-block: clamp(20px, 14px + 1.6vw, 36px) clamp(36px, 24px + 3vw, 56px); }
.bf-pd__glance { margin-top: 20px; }

/* ---------- Suche auf dem Telefon ----------
   Die Karte war breiter als der Bildschirm: «Suchen» und das Schließkreuz
   standen außerhalb, die Vorschläge liefen über den Rand. Am Telefon steht das
   Feld über dem Knopf statt daneben — nebeneinander bleibt für die Eingabe
   ohnehin kein Platz. */
@media (max-width: 640px) {
  .bfh__search { padding: 84px 16px 24px; place-items: start stretch; }
  .bfh__search-inner {
    box-sizing: border-box;
    width: 100%; max-width: 100%;
    padding: 22px 18px;
  }
  .bfh__search-row { flex-direction: column; gap: 10px; }
  .bfh__search-input { width: 100%; font-size: var(--bf-fs-base); padding: 14px 16px; }
  .bfh__search-submit { width: 100%; min-height: 50px; padding: 0 20px; }
  .bfh__search-hints { gap: 8px; margin-top: 16px; }
  .bfh__search-hints a { padding: 6px 10px; font-size: var(--bf-fs-xs); }
  .bfh__search-close { top: 6px; right: 6px; }
  .bfh__search-label { padding-right: 44px; }
}
/* Auch am Rechner darf die Karte nie breiter werden als ihr Platz. */
.bfh__search-inner { box-sizing: border-box; max-width: 100%; }

/* ---------- Bestellübersicht an der Kasse ----------
   Die Zeile war in drei starre Spalten geteilt: 48px Bild, 156px Text (davon
   24px Polster) und 120px Preis. Der Name brach dadurch auf drei Zeilen um,
   während neben dem Preis die halbe Spalte leer blieb, und der Betrag stieß an
   den Rand. Jetzt nimmt der Preis nur seine Breite, den Rest bekommt der Name.
   Die Kurzbeschreibung ist raus: An der Kasse ist die Entscheidung gefallen,
   dort zählen Name, Menge und Betrag — nicht der Werbetext. */
.wc-block-components-sidebar .wc-block-components-order-summary,
.wc-block-components-order-summary { padding-inline: 0 !important; }
.wc-block-components-sidebar-layout .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar { padding: 20px !important; }

.wc-block-components-order-summary-item {
  gap: 14px;
  padding-block: 16px !important;
}
/* Die Blöcke setzen 48px über die Kette `.wc-block-components-order-summary …`
   — eine Klasse mehr als hier, deshalb dieselbe Kette. 48px neben einem
   zweizeiligen Namen sind eine Briefmarke; 64px zeigen den Anhänger. */
/* `!important`, weil `checkout.css` der Blöcke NACH dieser Datei geladen wird —
   bei gleicher Spezifität gewinnt sonst immer das Blockstylesheet. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image { flex: none; width: 64px !important; }
.wc-block-components-order-summary .wc-block-components-order-summary-item__image img,
.wc-block-components-order-summary-item__image img { width: 64px !important; height: auto; }
.wc-block-components-order-summary-item__description {
  flex: 1 1 auto; min-width: 0;
  padding: 0 !important;
}
.wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto; width: auto !important; min-width: 0;
  padding: 0 !important; text-align: right; white-space: nowrap;
  font-family: var(--bf-mono);
}
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
  display: none;
}
.wc-block-components-order-summary-item .wc-block-components-product-price {
  font-size: var(--bf-fs-xs); color: var(--bf-steel-500);
}

/* =============================================================================
   Seitenkopf mit Bewegtbild (Fassung 5, 2026-08)
   -----------------------------------------------------------------------------
   Der Kunde will einen Kopf wie bei harbeck.de. Sein eigenes Material trägt das
   nicht, deshalb läuft hier eine Fertigungsaufnahme — Stahl und Schweißnaht,
   kein fremder Anhänger.

   Zwei Dinge tragen die Fläche: das 20-kB-Standbild vom ersten Moment an, das
   Video erst danach und nur am Rechner. Fehlt die Datei im Theme, greift diese
   ganze Sektion nicht und der Kopf sieht aus wie vorher — deswegen steht hier
   alles hinter `.hero--video`.
   ============================================================================= */
.hero--video .hero__head {
  position: relative;
  background: var(--bf-ink);
}
.hero__stage {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--bf-ink);
}
.hero__stage-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Die Fahrt geht auf das Gespann zu, nicht auf die Bildmitte: Boot und
     Anhänger liegen knapp links der Mitte und etwas über der Grundlinie. */
  transform-origin: 46% 50%;
  will-change: transform, opacity;
  animation:
    bf-kopf-zoom var(--bf-kopf-takt) linear infinite,
    bf-kopf-blende var(--bf-kopf-takt) linear infinite;
}
/* Der Zwilling läuft einen halben Takt versetzt: während er sichtbar ist, setzt
   die erste Ebene ihre Fahrt unbemerkt zurück. */
.hero__stage-bild--b { animation-delay: calc(var(--bf-kopf-takt) / -2); }

.hero__stage { --bf-kopf-takt: 28s; }

/* 29.09.2026, Änderungsliste 26.09.: «Scrollen auf der Startseite wie bei
   niemann » Über uns einstellen, sodass man drüber wegscrollt.» Dort ist das
   Kopfbild ein fixer Hintergrund (background-attachment: fixed), die Seite
   schiebt sich darüber. Hier steht das Bild als <img> mit der Zoomfahrt, deshalb
   die Bühne fixieren und den Kopf mit clip-path auf seinen Kasten beschneiden —
   was aus dem Kasten läuft, wird nicht gemalt. Die Höhe der Bühne setzt ein
   kleines Skript im Hero-Template auf die Höhe des Kopfes (bf-kopf-hoehe).
   Nur ab 1024px und nur ohne «weniger Bewegung»: auf dem Telefon ruckelt
   Fixiertes in Safari, und wer Bewegung abbestellt, bekommt den ruhigen Kopf. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero--video .hero__head { clip-path: inset(0); }
  .hero--video .hero__stage {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto;
    height: var(--bf-kopf-hoehe, 100vh);
  }
}

@keyframes bf-kopf-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}
/* Sichtbar ist jede Ebene eine halbe Runde; die Übergänge liegen in den acht
   Prozent davor und danach. */
@keyframes bf-kopf-blende {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  50%  { opacity: 1; }
  58%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Der Verlauf ist links am dichtesten: dort steht die Überschrift. Rechts bleibt
   die Schweißnaht sichtbar, sonst hätte man das Video auch weglassen können. */
.hero--video .hero__head::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(20, 24, 27, .90) 0%,
      rgba(20, 24, 27, .80) 34%,
      rgba(20, 24, 27, .40) 66%,
      rgba(20, 24, 27, .22) 100%),
    linear-gradient(180deg, rgba(20, 24, 27, .35) 0%, rgba(20, 24, 27, 0) 30%);
}

.hero--video .hero__inner {
  min-height: clamp(400px, 42vw, 600px);
  display: flex; align-items: center;
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(48px, 5vw, 84px);
}

.hero--video .hero__title { color: #fff; }
.hero--video .hero__text,
.hero--video .hero p { color: rgba(255, 255, 255, .84); }

/* Auf dunklem Grund dreht sich die Logik der Knöpfe um. Der erste war schwarz
   auf Weiß gedacht und verschwand im Video fast vollständig — er wird weiß.
   Der zweite bekommt die Kontur zurück, für die er ursprünglich gedacht war. */
/* !important, weil die Grundregel des Knopfes weiter oben ebenfalls mit
   !important arbeitet — dieselbe Ausnahme wie beim dunklen Aufruf-Block. */
.hero--video .hero__actions .hero__btn:not(.hero__btn--transparent) {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--bf-ink) !important;
}
.hero--video .hero__actions .hero__btn:not(.hero__btn--transparent):hover {
  background: var(--bf-signal) !important;
  border-color: var(--bf-signal) !important;
  color: #ffffff !important;
}
.hero--video .hero__actions .hero__btn--transparent {
  color: #fff; border-color: rgba(255, 255, 255, .55);
}
.hero--video .hero__actions .hero__btn--transparent:hover {
  background: #fff; color: var(--bf-ink); border-color: #fff;
}

@media (max-width: 767px) {
  .hero--video .hero__inner { min-height: 320px; }
  /* Am Telefon steht das Gespann im Hochformat-Ausschnitt weiter links; die
     Fahrt geht dorthin, sonst zieht sie ins leere Pflaster. */
  .hero__stage-bild { transform-origin: 38% 46%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Wer weniger Bewegung eingestellt hat, bekommt das stehende Bild — eine
     Ebene reicht dafür, die zweite wäre nur eine zweite Deckschicht. */
  .hero__stage-bild { animation: none; }
  .hero__stage-bild--b { display: none; }
}

/* Die Produktreihe steht seit dem 01.09.2026 auf der Startseite — vorher war
   der Block nirgends im Einsatz, deshalb fiel das nie auf: `section.products`
   ist ein Grid, und ein Grid-Kind hat `min-width: auto`. Es darf also nicht
   unter seine Mindestbreite schrumpfen, und die Mindestbreite der Kartenreihe
   liegt über 1.200px. Am Telefon sprengte der Kasten dadurch die Seite —
   gemessener Querlauf bis 1.240px bei 390px Fensterbreite. `min-width: 0` gibt
   die Schrumpfung frei; erst danach misst Swiper die richtige Breite und
   rechnet die Kartenbreite daraus. */
/* Namenskollision: die Regel für die Katalogliste weiter oben
   (`.shop__cards, .products, ul.products`) setzt ein Raster aus 300px breiten
   Spalten — gemeint ist WooCommerces `ul.products`, sie trifft aber auch die
   Sektion dieses Blocks. Deshalb hier ausdrücklich `section.products`. */
section.products { grid-template-columns: minmax(0, 1fr); }
/* `min-width: 0` allein genügt nicht: der Kasten wird nicht gestreckt, sondern
   nach Inhalt bemessen und läuft dabei bis an seine max-width von 1.240px —
   auch in einer 390px breiten Spalte. Erst die ausdrückliche Breite bindet ihn
   an die Spalte, die jetzt (siehe oben) die volle Sektionsbreite ist. */
section.products > .container { min-width: 0; width: 100%; justify-self: stretch; }

/* Kanäle in der Schublade und im Fuß: dieselben Glyphen wie in der Leiste,
   damit ein Besucher am Telefon sie überhaupt findet. */
.bfh__mobile-social {
  display: flex; gap: 10px; margin-top: 18px;
}
.bfh__mobile-social a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--bf-line); border-radius: 0;
  font-size: var(--bf-fs-sm); color: var(--bf-ink); text-decoration: none;
}
.bfh__mobile-social a:hover { border-color: var(--bf-ink); }
.bff__social { display: inline-flex; align-items: center; gap: 7px; }

/* =============================================================================
   Einsatzbereiche — die fünf Zeichnungen auf der Startseite
   -----------------------------------------------------------------------------
   Gezeichnet statt fotografiert: ein Foto zeigt einen gebauten Anhänger, eine
   Zeichnung die Gattung. Deshalb tragen alle fünf dieselbe Strichstärke und
   dieselbe Grundgeometrie — der Unterschied zwischen den Kacheln ist dann genau
   der Unterschied zwischen den Bereichen und nicht der zwischen zwei Hoffotos.

   Fünf Spalten sind auf 1440px die richtige Zahl (je 252px); darunter wird auf
   drei, zwei und eine gebrochen. Die Zeichnung sitzt in einem Feld mit festem
   Seitenverhältnis, damit die Namen aller Kacheln auf einer Linie stehen.
   ============================================================================= */
.segmente { padding: clamp(56px, 7vw, 96px) 0; background: #fff; }
.segmente__eyebrow {
  /* `p { max-width: 68ch }` (Zeile 140) deckelt auch diese Zeile. Mit
     `margin: 0 0 10px` steht der gedeckelte Kasten links, und `text-align:
     center` zentriert dann nur innerhalb dieses Kastens — die Zeile hing links,
     während Überschrift und Vorspann mittig standen. Andere Augenbrauen im Haus
     setzen dafür `max-width: none`. */
  margin: 0 auto 10px; max-width: none; text-align: center;
  font-family: var(--bf-sans); font-size: var(--bf-fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bf-signal);
}
.segmente__title {
  margin: 0 0 14px; text-align: center;
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 38px); letter-spacing: .02em; color: var(--bf-ink);
}
.segmente__lead {
  max-width: 62ch; margin: 0 auto clamp(36px, 4vw, 56px); text-align: center;
  font-size: var(--bf-fs-sm); line-height: 1.6; color: var(--bf-steel-700);
}
.segmente__grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px;
}
.segment {
  display: flex; flex-direction: column;
  padding: 22px 20px 24px;
  border: 1px solid var(--bf-line); border-radius: 0;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.segment:hover {
  border-color: rgba(20, 24, 27, .18);
  box-shadow: 0 16px 34px rgba(20, 24, 27, .07);
  transform: translateY(-3px);
}
/* Das Zeichenfeld: heller Grund, damit die reine Kontur eine Fläche hat, auf der
   sie steht — sonst schwebt sie im Weiß der Karte. */
.segment__bild {
  display: grid; place-items: center;
  margin-bottom: 18px; padding: 6px 10px;
  aspect-ratio: 2 / 1.05;
  border-radius: 0; background: var(--bf-bg-alt);
}
.segment__bild svg { width: 100%; height: auto; }
.segment__kontur {
  fill: none; stroke: var(--bf-ink);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.segment__akzent {
  fill: none; stroke: var(--bf-signal);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.segment__akzent--gestrichelt { stroke-dasharray: 7 7; opacity: .85; }
.segment__name {
  margin: 0 0 8px;
  font-family: var(--bf-cond); font-weight: 700; font-size: 19px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--bf-ink);
}
.segment__text {
  margin: 0 0 16px; font-size: var(--bf-fs-xs); line-height: 1.6; color: var(--bf-steel-700);
  hyphens: auto;
}
/* Der Link steht unten bündig, auch wenn die Texte verschieden lang sind. */
.segment__link {
  margin-top: auto;
  font-family: var(--bf-sans); font-size: var(--bf-fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--bf-ink); border-bottom: 1px solid var(--bf-line); padding-bottom: 3px;
  align-self: flex-start;
  transition: color .18s ease, border-color .18s ease;
}
.segment__link::after { content: " →"; }
.segment__link:hover { color: var(--bf-signal); border-color: var(--bf-signal); }

@media (max-width: 1199px) {
  .segmente__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .segmente__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .segment { padding: 18px 16px 20px; }
}
/* Einspaltig hätte der Besucher am Telefon 1.865px bis zur fünften Kategorie
   scrollen müssen — das Gegenteil von «auf einen Blick». Also auch dort zwei
   Spalten; die fünfte Karte läuft über beide, damit keine Lücke bleibt. */
@media (max-width: 520px) {
  .segmente__grid { gap: 10px; }
  .segment { padding: 14px 12px 16px; }
  .segment__bild { margin-bottom: 12px; padding: 4px 6px; }
  .segment__name { font-size: 16px; }
  .segment__text { font-size: 12px; line-height: 1.55; }
  .segment:last-child { grid-column: 1 / -1; }
  .segment:last-child .segment__bild { aspect-ratio: 12 / 5; }
}

/* ===========================================================================
   Contact Form 7 — 16.09.2026
   ---------------------------------------------------------------------------
   Seit alle drei Formulare über CF7 laufen (inc/kontaktformular-cf7.php), wird
   das Stylesheet des Plugins nicht mehr geladen: seine Gestaltung ist blau
   umrandet und passt nirgends her. Was davon gebraucht wird, steht hier —
   und zwar nur das: die für Bildschirmleser versteckte Antwortliste, die
   versteckten Felder, der Hinweis am fehlerhaften Feld und der Kringel beim
   Absenden.

   Dazu die eine Zeile, die das Markup wieder geradebiegt: CF7 legt um jedes
   Feld ein <span class="wpcf7-form-control-wrap"> und um das ganze Formular
   ein <div class="wpcf7">. In einem Raster oder Flex-Block wären das fremde
   Kinder, die die Spalten sprengen. `display: contents` nimmt ihnen die
   eigene Box — die Felder stehen wieder dort, wo sie vorher standen.
   ========================================================================= */

.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
  word-break: normal !important;
}
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7-form-control-wrap { position: relative; }
.wpcf7-list-item { display: inline-block; margin: 0 0 0 1em; }
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after { content: " "; }
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  color: #d7161e;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output:empty { display: none; }
.wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0 24px;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color: #23282d;
  opacity: .75;
}
.wpcf7 form.submitting .wpcf7-spinner { visibility: visible; }
.wpcf7-spinner::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border: none;
  border-radius: 100%;
  background-color: #fbfbfc;
  transform-origin: 8px 8px;
  animation: bf-cf7-kringel 1000ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wpcf7-spinner::before { animation: bf-cf7-blinken 2000ms linear infinite; }
}
@keyframes bf-cf7-kringel { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bf-cf7-blinken { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } }
.wpcf7 [inert] { opacity: .5; }
.wpcf7 .wpcf7-submit:disabled { cursor: not-allowed; }

/* -- Kurzanfrage der Startseite (Block `acf/anfrage`) ---------------------- */
.anfrage__inhalt .wpcf7,
.anfrage__formular .wpcf7-form-control-wrap,
.anfrage__feld .wpcf7-form-control-wrap,
.anfrage__zustimmung .wpcf7-form-control-wrap,
.anfrage__zustimmung .wpcf7-acceptance,
.anfrage__zustimmung .wpcf7-list-item,
.anfrage__zustimmung .wpcf7-list-item > label,
.anfrage__zustimmung .wpcf7-list-item-label { display: contents; }
.anfrage__zustimmung .wpcf7-list-item { margin: 0; }
.anfrage .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 0;
  color: #ffe0e0;
  font-size: 14px;
  line-height: 1.5;
}
.anfrage form.sent .wpcf7-response-output { color: #fff; font-weight: 700; }
.anfrage .wpcf7-not-valid-tip { color: #ffe0e0; }

/* -- Preisanfrage am Produkt (Fensterchen in der Fußzeile) ----------------- */
.price-request-popup__form-wrap .wpcf7,
.price-request-popup__field .wpcf7-form-control-wrap,
.price-request-popup__agreement .wpcf7-form-control-wrap,
.price-request-popup__agreement .wpcf7-acceptance,
.price-request-popup__agreement .wpcf7-list-item,
.price-request-popup__agreement .wpcf7-list-item > label,
.price-request-popup__agreement .wpcf7-list-item-label { display: contents; }
.price-request-popup__agreement .wpcf7-list-item { margin: 0; }
/* Das echte Kästchen bleibt unsichtbar, gezeichnet wird `…__agreement-box`.
   Der Haken hängt jetzt an `:has()`, weil das Kästchen in der Hülle von CF7
   kein Geschwister des Feldes mehr ist, sondern dessen Nachbar eine Ebene
   tiefer. */
.price-request-popup__agreement input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.price-request-popup__agreement label:has(input:checked) .price-request-popup__agreement-box {
  border: 2px solid var(--color-primary);
}
.price-request-popup__agreement label:has(input:checked) .price-request-popup__agreement-box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 6px;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.price-request-popup .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-primary);
  font-size: 13px;
  line-height: 1.5;
}

/* -- Kontaktseite: Antwort des Formulars ohne den blauen Rahmen von CF7 ---- */
.cabin-request .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 0;
  border-left: 3px solid var(--color-primary);
  background: #f6f7f8;
  font-size: 14px;
  line-height: 1.5;
}
.cabin-request form.sent .wpcf7-response-output { border-left-color: #468432; }