/* =============================================================================
   bunnefeld — Gestaltungsvariante «Harbeck»
   -----------------------------------------------------------------------------
   Zweite Handschrift zum Vergleichen, eingeschaltet über ?stil=harbeck
   (siehe inc/stil-variante.php). Diese Datei ersetzt nichts, sie legt sich als
   letzte Ebene über bundle.css und bunnefeld.css.

   Die Werte sind nicht geschätzt, sondern von harbeck.de abgenommen
   (getComputedStyle über die laufende Seite):

     Schrift    Gabarito, 645 von 700 sichtbaren Elementen
     Ink        rgb(34,34,34)      #222222
     Rot        rgb(223,36,43)     #df242b
     Graufläche rgb(237,237,237)   #ededed
     Dunkelfeld rgb(69,69,69)      #454545
     Radien     20px (Karten) und 35px (Pillen), 50% (Symbole)
                — abgenommen, aber seit 25.08.2026 NICHT übernommen: der
                  Kunde will eckig wie brenderup. Siehe --hb-radius-card.
     Überschriften  700, Versalien, Laufweite ~0.03em, ZENTRIERT,
                    H1 ~31px, H2 ~36px — also deutlich kleiner als bei uns

   Der wichtigste Unterschied ist nicht die Farbe, sondern die Haltung:
   bunnefeld steht heute auf schmaler Versalschrift, harten Kanten und Rot als
   sparsamem Signal. Harbeck ist rund, mittig und trägt Rot als große Fläche.

   Die Schrift liegt lokal im Theme. Google Fonts über das CDN einzubinden wäre
   auf einer deutschen Seite ein vermeidbares Risiko (LG München I, 3 O 17493/20)
   und würde am Consent-Banner hängen.
   ============================================================================= */

@font-face {
  font-family: "Gabarito";
  src: url("../fonts/gabarito-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gabarito";
  src: url("../fonts/gabarito-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -----------------------------------------------------------------------------
   1. Marken- und Formwerte
   -----------------------------------------------------------------------------
   Das Theme rechnet konsequent über Variablen. Deshalb trägt schon dieser Block
   den halben Umbau — Farben, Schriften und Kanten wechseln damit überall,
   auch dort, wo weiter unten keine eigene Regel steht.
   -------------------------------------------------------------------------- */
.stil-harbeck {
  --bf-ink:        #222222;
  --bf-steel-900:  #454545;
  --bf-steel-700:  #555555;
  --bf-steel-500:  #8a8a8a;
  --bf-steel-300:  #c9c9c9;
  --bf-line:       #e3e3e3;
  --bf-bg:         #ffffff;
  --bf-bg-alt:     #ededed;

  --bf-signal:      #df242b;
  --bf-signal-dark: #b0161c;

  /* Bei uns ist der Hauptknopf bewusst schwarz — Rot als Fläche wirkte wie ein
     Preisschild. Harbeck macht genau das Gegenteil und stellt Rot in die Fläche.
     Das ist der Kern des Vorbilds, also übernimmt die Variante es. */
  --bf-btn:       #df242b;
  --bf-btn-hover: #b0161c;

  --bf-sans: "Gabarito", system-ui, sans-serif;
  /* 06.09.: zurück auf den Schmalschnitt. Die Zeile stand seit der Umstellung auf
     Gabarito und hat damit den einzigen Kontrast im Haus abgeschaltet — seitdem
     lief die ganze Seite auf EINER Schrift, und die Rückmeldung «nicht premium»
     kam dreimal. Die Datei dafür liegt längst im Theme und wird in header.php
     sogar vorgeladen: der Browser holt `ibm-plex-sans-condensed-700.woff2` auf
     jeder Seite und zeichnete bisher nichts damit. Siehe Teil 22. */
  --bf-cond: "PlexCond", "Gabarito", system-ui, sans-serif;
  --bf-mono: "Gabarito", system-ui, sans-serif;

  /* Harbecks Überschriften sind klein. H1 misst dort 31px, H2 36px — bei uns
     läuft H1 bis 76px. Die Variante geht auf das Vorbild zu, ohne ganz auf
     dessen Zurückhaltung zu gehen: ein Seitenkopf, den man von der anderen
     Seite des Raums liest, ist kein Fehler. */
  --bf-fs-xs:  14px;
  --bf-fs-sm:  15px;
  --bf-fs-base: 17px;
  --bf-fs-lg:  19px;
  --bf-fs-xl:  clamp(19px, 16px + 0.6vw, 21px);
  --bf-fs-2xl: clamp(24px, 19px + 1.1vw, 30px);
  --bf-fs-3xl: clamp(28px, 21px + 1.5vw, 38px);

  /* Kante statt Rundung. Der Kunde am 25.08.2026 zur Entwurfsfassung: die
     Bilddarstellung sei ihm zu altmodisch, «Bilder eher so wie bei brenderup
     eckig und aneinander». Runde Ecken sind das Erkennungszeichen des
     Vorbilds harbeck — und genau das, was er nicht noch einmal sehen will.
     Die drei Werte stehen deshalb auf 0; jede Kachel, jedes Foto, jeder
     Knopf im ganzen Haus erbt die scharfe Kante von hier.

     Die Variablen bleiben stehen, statt überall gelöscht zu werden: so ist
     die Entscheidung an einer Stelle nachlesbar und an einer Stelle
     umkehrbar. */
  --bf-radius: 0px;
  --hb-radius-card: 0px;
  --hb-radius-pill: 0px;
  /* Eine Fläche, eine Farbe. Der dreistufige Verlauf (Weinrot → Markenrot →
     helles Signalrot) wirkte auf großen Flächen wie Politur; das Rot der
     Marke trägt sich selbst. Ein Hauch Tiefe bleibt, mehr nicht. */
  --hb-rot-verlauf: linear-gradient(100deg, #cf1420 0%, #d7161e 100%);
}

/* -----------------------------------------------------------------------------
   2. Grundschrift
   -----------------------------------------------------------------------------
   Gabarito ist rund und offen; die schmale Versalschrift des Hauses wäre daneben
   ein Fremdkörper. Deshalb geht die Laufweite zurück (die kondensierte Schrift
   brauchte sie, die runde nicht) und die Zeile wird etwas luftiger.
   -------------------------------------------------------------------------- */
.stil-harbeck body,
.stil-harbeck input,
.stil-harbeck select,
.stil-harbeck textarea,
.stil-harbeck button {
  font-family: var(--bf-sans);
}

.stil-harbeck h1, .stil-harbeck h2, .stil-harbeck h3,
.stil-harbeck h4, .stil-harbeck h5, .stil-harbeck h6 {
  font-family: var(--bf-sans);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* Die Kleinschrift des Hauses steht in Mono und trägt die Anmutung «technisches
   Datenblatt». Bei Harbeck gibt es das nicht — dort ist alles dieselbe Schrift,
   nur kleiner. */
.stil-harbeck .bff__facts,
.stil-harbeck .bff__title,
.stil-harbeck .hero__fact,
.stil-harbeck .hero__bar-phone,
.stil-harbeck .bfh__top,
.stil-harbeck .bff__legal {
  font-family: var(--bf-sans);
  letter-spacing: .04em;
}

/* -----------------------------------------------------------------------------
   3. Abschnittsköpfe: mittig statt links
   -----------------------------------------------------------------------------
   Der auffälligste Unterschied nach der Schrift. Bei uns steht über jeder
   Überschrift ein roter Strich und alles beginnt am linken Rand. Harbeck setzt
   Titel und Vorspann mittig in eine schmale Spalte und verzichtet auf den
   Marker.
   -------------------------------------------------------------------------- */
.stil-harbeck .title-block,
.stil-harbeck .categories__head,
.stil-harbeck .projects__head,
.stil-harbeck .reasons__head,
.stil-harbeck .info__head,
.stil-harbeck .products__head {
  text-align: center;
}

.stil-harbeck .title-block__title,
.stil-harbeck .categories__title,
.stil-harbeck .projects__title,
.stil-harbeck .reasons__title,
.stil-harbeck .products__title,
.stil-harbeck .statement__title {
  text-align: center;
}

.stil-harbeck .title-block__text,
.stil-harbeck .categories__text,
.stil-harbeck .projects__text,
.stil-harbeck .reasons__text,
.stil-harbeck .products__text {
  margin-left: auto;
  margin-right: auto;
  max-width: 62ch;
  text-align: center;
}

/* Der rote Marker über den Überschriften ist die Signatur der bestehenden
   Gestaltung — in der Variante hat er keinen Platz. */
.stil-harbeck .title-block__title::before,
.stil-harbeck .simple__title::before,
.stil-harbeck .projects__title::before,
.stil-harbeck .reasons__title::before,
.stil-harbeck .categories__title::before,
.stil-harbeck .section__title::before {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   4. Bedienelemente
   -----------------------------------------------------------------------------
   Bei Harbeck ist die runde Kante das Formprinzip: 20px an Flächen, 35px an
   allem, was gedrückt wird. Genau daran hat der Kunde die Entwurfsfassung
   wiedererkannt («sieht zu sehr nach harbeck aus»), deshalb stehen die beiden
   Radien-Variablen auf 0. Alles andere aus dieser Datei — Mittigkeit, Rot als
   Fläche, Versalien, Laufweite — bleibt.
   -------------------------------------------------------------------------- */
.stil-harbeck .btn,
.stil-harbeck .hero__btn,
.stil-harbeck .projects__btn,
.stil-harbeck .reasons__button,
.stil-harbeck .shop__more-btn,
.stil-harbeck .bfh__cta,
.stil-harbeck .cta__btn,
.stil-harbeck a.btn--primary,
.stil-harbeck button[type="submit"],
.stil-harbeck .single_add_to_cart_button {
  border-radius: var(--hb-radius-pill);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

.stil-harbeck .hero__btn:not(.hero__btn--transparent),
.stil-harbeck .bfh__cta,
.stil-harbeck .shop__more-btn,
.stil-harbeck a.btn--primary,
.stil-harbeck .single_add_to_cart_button {
  background: var(--bf-signal) !important;
  border-color: var(--bf-signal) !important;
  color: #fff !important;
}
.stil-harbeck .hero__btn:not(.hero__btn--transparent):hover,
.stil-harbeck .bfh__cta:hover,
.stil-harbeck .shop__more-btn:hover,
.stil-harbeck a.btn--primary:hover,
.stil-harbeck .single_add_to_cart_button:hover {
  background: var(--bf-signal-dark) !important;
  border-color: var(--bf-signal-dark) !important;
}

.stil-harbeck input[type="text"],
.stil-harbeck input[type="email"],
.stil-harbeck input[type="tel"],
.stil-harbeck input[type="number"],
.stil-harbeck input[type="search"],
.stil-harbeck input[type="password"],
.stil-harbeck select,
.stil-harbeck textarea,
.stil-harbeck .shop__filter-select {
  border-radius: var(--bf-radius);
}
/* =============================================================================
   Variante «Harbeck» — Teil 10: Kopfleiste und Seitenkopf
   -----------------------------------------------------------------------------
   Setzt die Grundlagen aus harbeck.css fort (Schrift, Farben, Radien, Knopfform
   stehen dort bereits) und regelt hier nur, was Kopfleiste und Seitenkopf
   betrifft.

   Drei Dinge macht das Vorbild im Kopf grundsätzlich anders:

     1. Die Leiste liegt durchsichtig über dem Seitenkopf, das Bewegtbild
        beginnt am oberen Bildschirmrand. Erst beim Scrollen wird sie deckend.
     2. Das Wortzeichen steht in der Mitte, Navigation links, Symbole rechts.
     3. Unter dem Seitenkopf schließt ein rotes Band mit Diagonalstreifen ab.

   Die echten Klassennamen stammen aus header.php und blocks/hero/template.php,
   nicht aus dem Vorbild: die dunkle Servicezeile heißt hier `.bfh__service`
   (nicht `.bfh__top`), und die Navigationsliste `.bfh__menu` sitzt in einem
   eigenen `.bfh__nav`.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   10.1 Grundform der Kopfleiste
   -----------------------------------------------------------------------------
   Die Symbolknöpfe im Kopf sind 42×42 und bleiben es. Der Kreis, den sie in
   der ersten Fassung der Variante trugen, war das Erkennungszeichen des
   Vorbilds; sie stehen jetzt als Quadrat da wie bei brenderup.
   -------------------------------------------------------------------------- */

/* Die Servicezeile ist im Vorbild eine schmale, ruhige Zeile über der Marke.
   Bei uns läuft sie in Versalschrift mit weiter Sperrung — in der runden
   Schrift wirkt das gedrängt, also etwas mehr Luft und ein Hauch heller. */
.stil-harbeck .bfh__service {
  background: var(--bf-steel-900);
  color: rgba(255, 255, 255, .82);
}
.stil-harbeck .bfh__service-inner {
  padding-block: 10px;
}


/* -----------------------------------------------------------------------------
   10.2 Wortzeichen in die Mitte
   -----------------------------------------------------------------------------
   `.bfh__inner` ist ein Flex-Streifen mit Logo, Navigation und Symbolen in
   genau dieser Reihenfolge im Markup. Statt das Markup umzubauen, tauscht
   `order` die Sichtreihenfolge; `flex: 1 1 0` an den beiden Außenfeldern gibt
   ihnen dieselbe Breite, wodurch das Logo dazwischen exakt in der Mitte landet
   — auch wenn Navigation und Symbolreihe unterschiedlich breit sind.

   Reicht der Platz nicht, wächst die Navigation über ihren Anteil hinaus
   (min-width bleibt `auto`), das Logo rutscht dann nach rechts aus der Mitte,
   statt dass die Zeile umbricht. Das ist der bessere der beiden Fehlerfälle.
   -------------------------------------------------------------------------- */
.stil-harbeck .bfh__nav {
  order: 1;
  flex: 1 1 0;
  margin-left: 0;
}
.stil-harbeck .bfh__logo {
  order: 2;
  flex: none;
  margin-inline: auto;
}
.stil-harbeck .bfh__actions {
  order: 3;
  flex: 1 1 0;
  justify-content: flex-end;
}

/* Die Menüpunkte tragen im Haus 0.08em Sperrung — die kam von der schmalen
   Versalschrift und ist an der runden Gabarito zu viel des Guten. */
.stil-harbeck .bfh__menu a {
  font-weight: 700;
  letter-spacing: .04em;
  border-bottom-width: 3px;
}

/* Unterhalb von 1024px blendet das Theme die Navigation aus. Damit bleibt vom
   Vorbild-Aufbau nur noch «Menütaste links, Marke mittig, Symbole rechts» —
   und die Menütaste steckt bei uns im rechten Symbolblock. Sie absolut nach
   links zu setzen kostet keine Markup-Änderung und stellt die Dreiteilung her.
   Ohne das Zurücksetzen von `margin-left: auto` (steht ab 900px an
   `.bfh__actions`) würde dieser Rand die freie Fläche schlucken, bevor die
   automatischen Ränder des Logos sie zum Zentrieren bekommen. */
@media (max-width: 1023px) {
  .stil-harbeck .bfh__inner {
    position: relative;
  }
  .stil-harbeck .bfh__actions {
    flex: none;
    margin-left: 0;
  }
  .stil-harbeck .bfh__burger {
    position: absolute;
    left: clamp(16px, 4vw, 32px);
    top: 50%;
    transform: translateY(-50%);
  }
}


/* -----------------------------------------------------------------------------
   10.3 Startseite: die weiße Leiste steht von Anfang an
   -----------------------------------------------------------------------------
   Bis 25.08.2026 stand hier das Gegenteil: die Leiste lag durchsichtig über dem
   Video, Schrift und Zeichen in Weiß, und erst nach 40 Scrollpixeln erschien die
   weiße Fläche. Der Kunde beschreibt genau das als Fehler — «der weiße Header,
   der erst beim Scrollen kommt, soll von Anfang an fixiert sein und beim
   Scrollen genauso mitlaufen».

   Damit fällt der ganze Sonderweg weg: kein `position: fixed` am Kopf, keine
   Weißschrift, kein Verlaufsschleier über dem Film. Die Leiste läuft wieder im
   normalen Fluss und klebt mit dem `position: sticky` aus bunnefeld.css am
   oberen Rand — dieselbe Mechanik wie auf jeder anderen Seite. Das Video
   beginnt jetzt unter der Leiste statt hinter ihr.
   -------------------------------------------------------------------------- */
.stil-harbeck body.home:has(.hero--video) .bfh {
  background: #fff;
}

/* Geklebt wird am Kopf selbst (bunnefeld.css), nicht an der inneren Leiste. */

/* Gescrollt hebt sich die Leiste vom Inhalt ab — das ist alles, was `.is-stuck`
   auf der Startseite noch bewirkt. */
.stil-harbeck body.home:has(.hero--video) .bfh.is-stuck .bfh__bar {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--bf-line);
  box-shadow: 0 10px 30px rgba(20, 24, 27, .10);
}


/* -----------------------------------------------------------------------------
   10.4 Mobile Schublade
   -----------------------------------------------------------------------------
   «Rot ist eine Fläche, kein Akzent» — nirgends lässt sich der Satz billiger
   einlösen als hier: die Schublade füllt ohnehin den ganzen Bildschirm.
   -------------------------------------------------------------------------- */
.stil-harbeck .bfh__mobile {
  background: var(--hb-rot-verlauf);
}
.stil-harbeck .bfh__mobile-inner {
  width: min(560px, 100%);
  max-width: none;
  margin-inline: auto;
}
.stil-harbeck .bfh__mobile-logo img {
  filter: brightness(0) invert(1);
}
.stil-harbeck .bfh__mobile-close {
  border-radius: 0;
  border-color: rgba(255, 255, 255, .38);
}

.stil-harbeck .bfh__mobile-menu a {
  font-family: var(--bf-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .03em;
}
.stil-harbeck .bfh__mobile-menu li {
  border-bottom-color: rgba(255, 255, 255, .26);
}
/* Die Grundregel färbt den Menüpunkt beim Überfahren rot ein. Auf dem roten
   Grund dieser Variante hieße das: der Punkt verschwindet. */
.stil-harbeck .bfh__mobile-menu a:hover {
  color: rgba(255, 255, 255, .68);
}

.stil-harbeck .bfh__mobile-secondary a {
  color: rgba(255, 255, 255, .8);
}
.stil-harbeck .bfh__mobile-contact {
  color: rgba(255, 255, 255, .85);
  border-top-color: rgba(255, 255, 255, .3);
}

/* Der Anfrage-Knopf holt seine Fläche aus `--bf-btn`, und das ist in dieser
   Variante Rot — auf rotem Grund also unsichtbar. Er dreht sich um: weiße
   Fläche, dunkle Schrift. Die Fläche kommt ohne `!important` durch, die
   Schriftfarbe nicht: `.bfh__mobile-cta { color: #fff !important }` steht so in
   bunnefeld.css und wäre sonst nicht zu schlagen. */
.stil-harbeck .bfh__mobile-cta {
  background: #fff;
  color: var(--bf-ink) !important;
  border-radius: var(--hb-radius-pill);
  justify-content: center;
}
.stil-harbeck .bfh__mobile-cta:hover {
  background: var(--bf-bg-alt);
}


/* -----------------------------------------------------------------------------
   10.5 Suchebene
   -----------------------------------------------------------------------------
   Gehört zum Kopf, wird über `.bfh__action` geöffnet und muss deshalb dieselbe
   Formensprache tragen.

   Achtung bei der Spezifität: `.stil-harbeck input[type="search"]` aus dem
   Grundteil der Variante wiegt schwerer als eine einzelne Klasse. Deshalb steht
   `.bfh__search-row` mit im Selektor — sonst behielte das Feld den kleinen
   Radius des Hauses.
   -------------------------------------------------------------------------- */
.stil-harbeck .bfh__search-inner {
  border-radius: var(--hb-radius-card);
}
.stil-harbeck .bfh__search-row .bfh__search-input {
  border-radius: var(--hb-radius-pill);
  padding-inline: 22px;
}
.stil-harbeck .bfh__search-submit,
.stil-harbeck .bfh__search-hints a {
  border-radius: var(--hb-radius-pill);
}
.stil-harbeck .bfh__search-close {
  border-radius: 0;
}
.stil-harbeck .bfh__search-label {
  text-align: center;
}


/* -----------------------------------------------------------------------------
   10.6 Seitenkopf: mittig gesetzt
   -----------------------------------------------------------------------------
   Bei uns steht der Kopftext linksbündig in einer 900px-Spalte. Das Vorbild
   setzt Titel, Vorspann und Knöpfe mittig — und zwar kleiner, als man erwartet:
   die H1 misst dort 31px, bei uns bis zu 76px. Diese Variante geht auf das
   Vorbild zu, ohne dessen Zurückhaltung ganz mitzumachen.
   -------------------------------------------------------------------------- */
.stil-harbeck .hero__content {
  align-items: center;
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}
.stil-harbeck .hero__title {
  font-size: clamp(30px, 20px + 1.9vw, 46px);
  line-height: 1.1;
  letter-spacing: .03em;
}
.stil-harbeck .hero__text {
  max-width: 60ch;
  margin-inline: auto;
}
.stil-harbeck .hero__actions {
  justify-content: center;
}

/* Die Knöpfe des Vorbilds sind klein — 56px Höhe und 40px Innenrand stammen
   aus dem Ursprungs-Theme und wirken neben einer 46px-Überschrift wuchtig. */
.stil-harbeck .hero__btn,
.stil-harbeck .hero__btn--transparent {
  height: 48px;
  padding: 0 28px;
  font-size: var(--bf-fs-sm);
}

/* Der Pfeil ist die Handschrift des Vorbilds am Zweitknopf. `gap: 10px` steht
   bereits am Knopf, der Abstand kommt also von selbst. */
.stil-harbeck .hero__btn--transparent::after {
  content: "→";
  font-size: 1.15em;
  line-height: 1;
}

/* Der große Innenabstand hielt den Platz der früher schwebenden Kopfleiste
   frei. Seit die Leiste wieder im Fluss steht (10.3), wäre er ein Loch über der
   Überschrift — der Seitenkopf beginnt jetzt ohnehin unter ihr. */
.stil-harbeck body.home:has(.hero--video) .hero--video .hero__inner {
  min-height: clamp(440px, 44vw, 640px);
  padding-top: clamp(48px, 5vw, 80px);
}

/* Der Verlauf über dem Video war links am dichtesten, weil dort die Überschrift
   stand. Jetzt steht sie in der Mitte — also ein Verlauf, der oben und unten
   fasst und die Mitte des Bildes frei lässt. Oben dunkelt er stärker ab als
   nötig wäre: dort liegt die weiße Schrift der durchsichtigen Kopfleiste. */
.stil-harbeck .hero--video .hero__head::after {
  background:
    linear-gradient(180deg,
      rgba(17, 17, 17, .34) 0%,
      rgba(17, 17, 17, .20) 30%,
      rgba(17, 17, 17, .30) 66%,
      rgba(17, 17, 17, .62) 100%),
    radial-gradient(120% 95% at 50% 50%,
      rgba(17, 17, 17, 0) 34%,
      rgba(17, 17, 17, .42) 100%);
}


/* -----------------------------------------------------------------------------
   10.7 Bildstreifen
   -----------------------------------------------------------------------------
   Die Rahmen stoßen im Haus mit 2px Fuge auf schwarzem Grund aneinander — eine
   harte, technische Lösung. Zur runden Formensprache passt das Gegenteil:
   abgesetzte Kacheln mit 20px Radius auf einer hellgrauen Bahn. Damit wird aus
   dem Streifen das zweite Band der Startseite: dunkles Video, graue Bahn, rotes
   Band. Genau diese Folge macht das Vorbild aus.
   -------------------------------------------------------------------------- */
.stil-harbeck .hero__band {
  gap: 14px;
  padding: 18px clamp(16px, 4vw, 32px);
  background: var(--bf-bg-alt);
  border-top: 0;
}
.stil-harbeck .hero__frame {
  border-radius: var(--hb-radius-card);
}


/* -----------------------------------------------------------------------------
   10.8 Datenleiste und roter Abschluss
   -----------------------------------------------------------------------------
   Aus der graphitfarbenen Datenleiste wird das rote Band, mit dem das Vorbild
   seinen Seitenkopf schließt — quer über die ganze Breite, nicht als Akzent.
   -------------------------------------------------------------------------- */
/* Kundenwunsch 25.08.2026: «Der rote Balken soll von den weißen Zacken befreit
   werden und der rote Streifen soll nach rechts hin weiß auslaufen.»
   Statt einer weißen Endfarbe läuft der Verlauf auf durchsichtig aus — dahinter
   liegt die weiße Seite, das Ergebnis ist dasselbe, funktioniert aber auch auf
   grauem Grund. Die Zahlen stehen dafür links, in der satten Hälfte. */
.stil-harbeck .hero__bar {
  /* Die Haltepunkte des satten Teils stehen in Pixeln, nicht in Prozent: der
     Inhalt der Leiste ist immer gleich lang (die Nummer endet bei 1440px an
     Position 818), der Verlauf aber richtete sich nach der Fensterbreite. Bei
     700px lag die Telefonnummer dadurch im ausgelaufenen Bereich — weiße
     Schrift auf Blassrosa, gemessen 2,4:1 statt der geforderten 4,5:1.
     Mit festen Pixeln bleibt die Fläche unter dem Text immer satt, und der
     Auslauf nimmt sich genau den Platz, der rechts davon übrig ist. Wird das
     Fenster schmaler als der Text, bleibt der Balken durchgehend rot. */
  background: linear-gradient(90deg,
    #d7161e 0,
    #d7161e max(880px, calc(50% + 190px)),
    rgba(215, 22, 30, 0) 100%);
  border-top: 0;
}
/* 12.09.2026: «эту полосу чуть толще по высоте еще можно» — Polster von 18
   auf 26px, das Band wächst damit von 61 auf 77px. Die Höhe kommt weiter aus
   dem Polster und nicht aus einer festen Zahl: fällt eine Angabe weg oder
   bricht die Zeile um, bleibt der Abstand über und unter der Schrift gleich. */
.stil-harbeck .hero__bar-inner {
  justify-content: flex-start;
  padding-top: 26px;
  padding-bottom: 26px;
}
.stil-harbeck .hero__fact span {
  color: rgba(255, 255, 255, .72);
  letter-spacing: .06em;
}
.stil-harbeck .hero__bar-phone {
  margin-left: 0;
}
/* Die Grundregel färbt die Nummer beim Überfahren rot — auf rotem Grund also
   unsichtbar. Statt der Farbe wechselt hier die Deckkraft. */
.stil-harbeck .hero__bar-phone:hover {
  color: rgba(255, 255, 255, .75);
}

/* Das Diagonalband als Abschluss.
   `!important` ist hier unvermeidbar: bunnefeld.css schaltet mit
   `.hero::before, .hero::after { content: none !important; }` beide
   Pseudoelemente des Seitenkopfs ab, weil das Ursprungs-Theme dort einen
   Bildverlauf hatte. Ohne `!important` entsteht das Element gar nicht erst.
   Alle übrigen Eigenschaften kommen ohne aus.

   `.hero` trägt `overflow: hidden`, das Band sitzt deshalb bündig auf `bottom:
   0` innerhalb des Seitenkopfs; z-index 3 stellt es über die Datenleiste
   (z-index 2). Die durchsichtigen Zwischenräume der Streifen zeigen deren
   roten Verlauf. */
/* Das Diagonalband ist seit 25.08.2026 abgeschaltet — der Kunde will den roten
   Balken ohne die weißen Zacken. `content: none` genügt; die Regel bleibt als
   Spur stehen, weil bunnefeld.css das Pseudoelement ohnehin ausschaltet und ein
   späterer Anlauf hier ansetzen würde. */
.stil-harbeck .hero::after {
  content: none !important;
}

@media (max-width: 620px) {
  /* Am Telefon ist der Balken zu schmal, um auszulaufen — dort bliebe von der
     roten Fläche nichts übrig. Also voller Verlauf und mittige Zeile. */
  .stil-harbeck .hero__bar {
    /* Das helle Ende (#f5352c) trug weiße Schrift nur mit 4,0:1 — unter der
       Grenze von 4,5:1. Eine Nuance dunkler genügt und bleibt derselbe Ton. */
    background: #d7161e;
  }
  .stil-harbeck .hero__bar-inner {
    justify-content: center;
    text-align: center;
  }
  .stil-harbeck .hero__band {
    gap: 10px;
    padding: 12px 16px;
  }
}
/* =============================================================================
   Variante «Harbeck» — Teil 2: die Abschnitte der Start- und Inhaltsseiten
   -----------------------------------------------------------------------------
   Baut auf harbeck.css auf (Schrift, Farbtoken, Radien-Token, Knopfform) und
   ergänzt das, was den Charakter des Vorbilds trägt: die Seite als Folge
   vollbreiter Bänder, Rot als Fläche statt als Akzent, runde Ecken und mittig
   gesetzte Köpfe.

   Alle Blöcke stehen als Geschwister direkt in `<main id="content">` — geprüft
   auf /, /ueber-uns/, /anhaenger/, /kontakt/. Deshalb lässt sich der Wechsel der
   Bänder über die Kinder von `#content` steuern, ohne die Vorlagen anzufassen.

   Reihenfolge in dieser Datei:
     1  Bänder (weiß / #ededed / rot)
     2  Abschnittsköpfe: mittig, schmale Spalte, kein roter Marker
     3  info      — sechs Textkacheln als luftige, mittige Reihe
     4  categories— Bild füllt die Kachel, Versalzeile darunter
     5  projects  — Fotoraster mit 20px
     6  reasons   — weiße Karten auf grauem Band, Ziffer als roter Punkt
     7  cta       — halbe Fläche Rot, daneben das Foto
     8  statement — vollbreites rotes Band
     9  Restliche Blöcke: Radien, Mittigkeit, Symbole
    10  Abschnittsknöpfe: klein, Kontur, Pfeil
    11  Schmale Bildschirme
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Bänder
   -----------------------------------------------------------------------------
   Der heutige Auftritt ist eine durchgehend weiße Fläche, in der Abstände die
   Abschnitte trennen. Bei Harbeck trennt der Grund: jedes Band läuft über die
   volle Breite und wechselt zwischen Weiß, #ededed und Rot. Der Inhalt bleibt
   dabei im `.container`, das ändert sich nicht.

   Statt über `:nth-of-type` zu zählen, steht hier eine ausgeschriebene Liste je
   Farbe. Grund: die Startseite beginnt mit `.hero`, die Unterseiten mit
   `.breadcrumbs` — beim Zählen über den Elementtyp läge die Parität auf jeder
   Seitenart anders und dieselbe Reihe bekäme mal Weiß, mal Grau. Mit der Liste
   ist die Abfolge auf allen vier geprüften Seiten ein sauberer Wechsel.

   `.hero`, `.banner`, `.landing` und `.video` bringen ihren eigenen Grund mit
   (Foto, Verlauf, Schwarz) und stehen deshalb in keiner der Listen.
   -------------------------------------------------------------------------- */

/* Weiße Bänder */
.stil-harbeck #content > .title-block,
.stil-harbeck #content > .categories,
.stil-harbeck #content > .projects,
.stil-harbeck #content > .gallery,
.stil-harbeck #content > .timeline,
.stil-harbeck #content > .picture {
  background: var(--bf-bg);
}

/* Graue Bänder. `.simple` steht hier als Grundfall, weil die Startseite genau
   eine solche Reihe hat und die dort zwischen zwei weiße Bänder gehört. */
.stil-harbeck #content > .info,
.stil-harbeck #content > .reasons,
.stil-harbeck #content > .philosophy,
.stil-harbeck #content > .features,
.stil-harbeck #content > .service,
.stil-harbeck #content > .team,
.stil-harbeck #content > .contact,
.stil-harbeck #content > .simple {
  background: var(--bf-bg-alt);
}

/* /anhaenger/ stellt drei `.simple`-Reihen hintereinander. Alle grau wäre ein
   Klotz von 1.400px Höhe in einer Farbe — also wechselt jede zweite auf Weiß.
   `of .simple` zählt nur die Geschwister dieses Blocks, unabhängig davon, was
   sonst noch in `#content` steht. Browser ohne diese Schreibweise verwerfen die
   Regel und bleiben bei durchgehend Grau: weniger Rhythmus, nichts kaputt. */
.stil-harbeck #content > .simple:nth-child(even of .simple) {
  background: var(--bf-bg);
}

/* Der Seitenkopf ist ein eigener Abschnitt, gehört inhaltlich aber zu dem Band,
   das er ankündigt — auf /anhaenger/ zur ersten Produktreihe, auf /ueber-uns/
   zum Philosophie-Block. Bekäme er stur Weiß, risse eine Kante zwischen
   Überschrift und dem, was sie überschreibt. `:has(+ …)` lässt ihn die Farbe
   des nächsten Geschwisters übernehmen. */
.stil-harbeck #content > .title-block:has(+ .info),
.stil-harbeck #content > .title-block:has(+ .reasons),
.stil-harbeck #content > .title-block:has(+ .philosophy),
.stil-harbeck #content > .title-block:has(+ .features),
.stil-harbeck #content > .title-block:has(+ .service),
.stil-harbeck #content > .title-block:has(+ .team),
.stil-harbeck #content > .title-block:has(+ .contact),
.stil-harbeck #content > .title-block:has(+ .simple:nth-child(odd of .simple)) {
  background: var(--bf-bg-alt);
}

/* Ein Band braucht mehr Innenabstand als eine Reihe auf weißem Grund: die Farbe
   markiert den Anfang, der Abstand muss sie tragen. */
.stil-harbeck #content > .title-block,
.stil-harbeck #content > .categories,
.stil-harbeck #content > .projects,
.stil-harbeck #content > .gallery,
.stil-harbeck #content > .timeline,
.stil-harbeck #content > .picture,
.stil-harbeck #content > .info,
.stil-harbeck #content > .reasons,
.stil-harbeck #content > .philosophy,
.stil-harbeck #content > .features,
.stil-harbeck #content > .service,
.stil-harbeck #content > .team,
.stil-harbeck #content > .contact,
.stil-harbeck #content > .simple,
.stil-harbeck #content > .statement,
.stil-harbeck #content > .cta {
  padding-block: clamp(54px, 36px + 2.6vw, 88px);
}

/* Kopf und der von ihm angekündigte Abschnitt sollen zusammen ein Band bilden.
   Zwei volle Innenabstände dazwischen wären rund 170px Luft zwischen Titel und
   Inhalt — genau die Insel-Wirkung, die die Variante loswerden will. */
.stil-harbeck #content > .title-block { padding-bottom: 0; }
.stil-harbeck #content > .title-block + section { padding-top: 36px; }

/* Der Block läuft heute randlos über die ganze Breite. Bei Harbeck steht auch
   das große Zwischenbild als gerundete Fläche in der Spalte — sonst ist es der
   einzige Inhalt der Seite mit harten Kanten. */
.stil-harbeck .picture .container {
  max-width: 1232px;
  padding-inline: 16px;
}
.stil-harbeck .picture .container img {
  border-radius: var(--hb-radius-card);
  object-fit: cover;
}


/* -----------------------------------------------------------------------------
   2. Abschnittsköpfe
   -----------------------------------------------------------------------------
   harbeck.css setzt bereits `text-align: center` auf einige Köpfe. Das reicht
   nicht: die Köpfe sind Flex-Spalten, `.text` erbt aus dem Grundsatz
   `p { max-width: 68ch }` eine linksbündige Textspalte, und `.philosophy__head`
   ist sogar zweispaltig (Titel links, Vorspann rechts). Hier steht deshalb die
   Kastenform, nicht noch einmal die Ausrichtung.
   -------------------------------------------------------------------------- */
.stil-harbeck .projects__head,
.stil-harbeck .projects--single .projects__head,
.stil-harbeck .features__head,
.stil-harbeck .gallery__head,
.stil-harbeck .timeline__head,
.stil-harbeck .contact__head,
.stil-harbeck .team__head,
.stil-harbeck .statement__head,
.stil-harbeck .philosophy__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stil-harbeck .projects__head .title,
.stil-harbeck .philosophy__head .title {
  max-width: none;
  flex-shrink: 1;
}

.stil-harbeck .projects__head .text,
.stil-harbeck .projects--single .projects__head .text,
.stil-harbeck .features__head .text,
.stil-harbeck .gallery__head .text,
.stil-harbeck .timeline__head .text,
.stil-harbeck .contact__head .text,
.stil-harbeck .team__head .text,
.stil-harbeck .statement__head .text,
.stil-harbeck .philosophy__head .text,
.stil-harbeck .title-block .text {
  width: auto;
  max-width: 62ch;
  margin-inline: auto;
}
/* Sonst steht der Absatz mittig in einer linksbündigen 68ch-Spalte und sitzt
   sichtbar neben der Mitte des Bandes. */
.stil-harbeck .projects__head .text p,
.stil-harbeck .features__head .text p,
.stil-harbeck .gallery__head .text p,
.stil-harbeck .timeline__head .text p,
.stil-harbeck .contact__head .text p,
.stil-harbeck .team__head .text p,
.stil-harbeck .statement__head .text p,
.stil-harbeck .philosophy__head .text p,
.stil-harbeck .title-block .text p,
.stil-harbeck .info__text p {
  max-width: none;
}

/* Der rote Strich über den Überschriften ist die Signatur des Hauses und hat in
   der Variante keinen Platz. harbeck.css versucht das schon, greift aber ins
   Leere: es adressiert `.simple__title`, `.projects__title`, `.reasons__title`
   — die Vorlagen geben dort schlicht `<h2 class="title">` aus. Hier stehen die
   Selektoren, die bunnefeld.css tatsächlich benutzt. */
.stil-harbeck .simple h2.title::before,
.stil-harbeck .projects h2.title::before,
.stil-harbeck .reasons h2.title::before,
.stil-harbeck .products h2.title::before,
.stil-harbeck .philosophy h2.title::before,
.stil-harbeck .timeline h2.title::before,
.stil-harbeck .service h2.title::before,
.stil-harbeck .title-block h2.title::before,
.stil-harbeck .info h2.title.info__head::before {
  content: none;
}


/* -----------------------------------------------------------------------------
   3. info — sechs Textkacheln
   -----------------------------------------------------------------------------
   Heute: sechs weiße Karten mit 1px-Rahmen, linksbündig, darüber je eine
   Ziffer in Schreibmaschinenschrift. Das liest sich als Datenblatt.
   Bei Harbeck ist dieselbe Reihe eine mittig gesetzte Spalte mit viel Luft, die
   Kennzeichnung ist ein rundes Symbol. Der Rahmen fällt weg — das graue Band
   trägt die Reihe bereits.
   -------------------------------------------------------------------------- */
.stil-harbeck .info__grid {
  gap: clamp(30px, 16px + 2vw, 56px);
}

.stil-harbeck .info__item {
  align-items: center;
  text-align: center;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Aus der Datenblatt-Ziffer wird die runde Marke des Vorbilds. Die Schriftart
   kommt aus harbeck.css (dort zeigt auch `--bf-mono` auf Gabarito), deshalb
   steht hier nur die Form. */
.stil-harbeck .info__item::before {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border-radius: 0;
  background: var(--bf-signal);
  color: #fff;
  font-size: var(--bf-fs-sm);
  letter-spacing: .04em;
}

/* Trägt eine Kachel ein eigenes Symbol, wäre die Ziffer daneben eine zweite
   Kennung an derselben Stelle. Auf der Startseite ist heute keins gepflegt,
   das Feld gibt es aber. */
.stil-harbeck .info__item:has(.info__icon)::before { display: none; }
.stil-harbeck .info__icon {
  width: 64px;
  height: 64px;
  padding: 18px;
  margin: 0 auto 10px;
  border-radius: 0;
  background: #fff;
  object-fit: contain;
}

.stil-harbeck .info__title {
  letter-spacing: .04em;
  text-transform: uppercase;
}
.stil-harbeck .info__text {
  max-width: 40ch;
  margin-inline: auto;
}


/* -----------------------------------------------------------------------------
   4. categories — Bildkachel mit Versalzeile darunter
   -----------------------------------------------------------------------------
   Heute liegt die Beschriftung als dunkler Verlauf über dem unteren Drittel des
   Fotos. Harbeck stellt das Produkt frei auf Weiß und setzt eine kurze
   Versalzeile darunter — man sieht die Ware, nicht die Platte davor.
   Dafür muss das absolut positionierte Foto zurück in den Fluss.
   -------------------------------------------------------------------------- */
.stil-harbeck .categories__grid { gap: 20px; }

.stil-harbeck .categories__item {
  aspect-ratio: auto;
  justify-content: flex-start;
  overflow: visible;
  border: 0;
  background: none;
}
/* Der abdunkelnde Verlauf über dem Foto */
.stil-harbeck .categories__item::before { content: none; }

.stil-harbeck .categories__image {
  position: static;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--hb-radius-card);
}

.stil-harbeck .categories__content {
  background: none;
  padding: 18px 12px 0;
  text-align: center;
  gap: 6px;
}
.stil-harbeck .categories__title {
  color: var(--bf-ink);
  letter-spacing: .05em;
}
.stil-harbeck .categories__text { color: var(--bf-steel-700); }

/* Ohne Rahmen hat die Kante nichts mehr zu färben; das Anheben bleibt das
   einzige Zeichen, dass die Kachel ein Link ist. */
.stil-harbeck .categories__item:hover { transform: translateY(-3px); }


/* -----------------------------------------------------------------------------
   5. projects — Fotoraster
   -------------------------------------------------------------------------- */
.stil-harbeck .projects__gallery { gap: 20px; }
.stil-harbeck .projects__gallery:not(:last-of-type) { margin-bottom: 20px; }
.stil-harbeck .projects__gallery-col { gap: 20px; }
.stil-harbeck .projects__gallery-link,
.stil-harbeck .projects__gallery-image {
  border-radius: var(--hb-radius-card);
}

/* Die Referenzwand bringt ihre Maße in einem `<style>`-Block in der Vorlage mit
   (blocks/projects/template.php, `.projects--masonry .projects__masonry-item`).
   Der steht im Körper und damit hinter dieser Datei — die dritte Klasse im
   Selektor entscheidet, nicht die Reihenfolge. */
.stil-harbeck .projects--masonry .projects__masonry { gap: 20px; }
.stil-harbeck .projects--masonry .projects__masonry-item {
  border-radius: var(--hb-radius-card);
}


/* -----------------------------------------------------------------------------
   6. reasons — Gründe als Karten auf grauem Band
   -----------------------------------------------------------------------------
   Auf dem grauen Band werden aus den bisherigen Rahmenkarten weiße Flächen —
   ohne Radius, siehe --hb-radius-card. Die Ziffer war eine graue Kennung am
   Rand und rückt über den Titel.
   -------------------------------------------------------------------------- */
.stil-harbeck .reasons__list { align-items: center; }
.stil-harbeck .reasons__items { gap: 20px; width: 100%; }

.stil-harbeck .reasons__item {
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 36px 28px 38px;
  border: 0;
  border-radius: var(--hb-radius-card);
  background: #fff;
}
.stil-harbeck .reasons__item-info { align-items: center; }

.stil-harbeck .reasons__item-number,
.stil-harbeck .reasons__number {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 0;
  background: var(--bf-signal);
  color: #fff;
  font-size: var(--bf-fs-sm);
  letter-spacing: .04em;
}
.stil-harbeck .reasons__item-title {
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* -----------------------------------------------------------------------------
   7. cta — die große rote Fläche
   -----------------------------------------------------------------------------
   Das ist der Block, an dem sich das Vorbild am deutlichsten zeigt: halbe
   Breite Rot mit weißem Text, daneben das Foto, alles in einer Kachel mit 20px.
   Heute steht der Block auf Graphit, und zwar mit `!important` (bunnefeld.css:
   «CTA: Graphit statt roter Vollfläche»). Ohne `!important` käme keine Farbe
   dagegen an — deshalb steht es an genau diesen drei Stellen und sonst nirgends
   in dieser Datei.

   Der Knopf bleibt unangetastet: bunnefeld.css setzt `.cta .cta__btn` auf Weiß,
   weil er auf dunklem Grund stand. Auf Rot ist Weiß genauso richtig, und die
   Pillenform bringt harbeck.css bereits mit.
   -------------------------------------------------------------------------- */
.stil-harbeck #content > .cta {
  background: var(--bf-bg) !important;
}

.stil-harbeck .cta__card {
  gap: 0;
  padding: 0;
  background: none !important;
  border-radius: var(--hb-radius-card);
  overflow: hidden;
}

.stil-harbeck .cta__content {
  justify-content: center;
  padding: clamp(36px, 20px + 3vw, 68px);
  background: var(--hb-rot-verlauf) !important;
}

.stil-harbeck .cta__title { letter-spacing: .03em; }

/* Innerhalb der beschnittenen Kachel braucht das Foto keinen eigenen Radius —
   sonst blitzt an den Innenecken der rote Grund durch. */
.stil-harbeck .cta__image {
  border-radius: 0;
  height: 100%;
}


/* -----------------------------------------------------------------------------
   8. statement — vollbreites rotes Band
   -----------------------------------------------------------------------------
   Der Block steht heute auf #F3F3F3 und ist damit vom Grau der Nachbarbänder
   kaum zu unterscheiden. Als rotes Band quer über die Seite bekommt die Reihe
   die Rolle, die sie bei Harbeck hat: der eine laute Abschnitt der Seite.
   -------------------------------------------------------------------------- */
.stil-harbeck #content > .statement {
  background: var(--hb-rot-verlauf);
}

.stil-harbeck .statement h2.title,
.stil-harbeck .statement .text,
.stil-harbeck .statement .text p,
.stil-harbeck .statement__card-title {
  color: #fff;
}
.stil-harbeck .statement__card-desc { color: rgba(255, 255, 255, .78); }

.stil-harbeck .statement__media {
  border-radius: var(--hb-radius-card);
}
.stil-harbeck .statement__info { text-align: center; }
.stil-harbeck .statement__card-title {
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Die Pfeilknöpfe bleiben Quadrate. Auf Rot verschwindet ihre helle Kante
   ohnehin, die Fläche allein trägt sie. */
.stil-harbeck .statement__nav-btn,
.stil-harbeck .features__nav-btn,
.stil-harbeck .timeline__nav-btn {
  border-radius: 0;
  border-color: transparent;
}


/* -----------------------------------------------------------------------------
   9. Die übrigen Blöcke: Mittigkeit, Abstände, Symbole
   -----------------------------------------------------------------------------
   Was das Vorbild hier über den Radius löst, lösen wir über Fläche, Mitte und
   Abstand. Die Kante bleibt scharf (siehe --hb-radius-card); die Blöcke
   bringen aus dem Ursprungs-Theme 6px oder 8px mit, die hier auf 0 laufen.
   -------------------------------------------------------------------------- */
.stil-harbeck .simple__image,
.stil-harbeck .simple__gallery-image,
.stil-harbeck .philosophy__image,
.stil-harbeck .features__image,
.stil-harbeck .gallery__image,
.stil-harbeck .team__photo-wrap,
.stil-harbeck .landing__media,
.stil-harbeck .banner__block,
.stil-harbeck .contact__location-image,
.stil-harbeck .contact__map-wrap,
.stil-harbeck .contact__map {
  border-radius: var(--hb-radius-card);
  overflow: hidden;
}

/* simple bleibt zweispaltig — eine mittige Textspalte neben einem Foto wirkt
   verrutscht. Nur die Abstände gehen auf das Maß des Rasters. */
.stil-harbeck .simple__inner { gap: clamp(32px, 16px + 3vw, 64px); }
.stil-harbeck .simple__gallery { gap: 20px; }

/* Auf /anhaenger/ stehen drei solcher Reihen untereinander, die mittlere trägt
   im Markup `simple--reverse`. Dafür gibt es in keiner Datei eine Regel —
   main.css kennt nur `.simple.reverse`, und diesen Wert schreibt das Feld nicht
   mehr. Alle drei Fotos stehen deshalb rechts und die Seite liest sich dreimal
   gleich. Der Wechsel ist gerade in der Bänder-Fassung die halbe Miete. */
.stil-harbeck .simple--reverse .simple__inner { flex-direction: row-reverse; }

/* Die Karussells (gallery, features, statement, timeline) laufen ohne Swiper
   als Raster — die Ersatzregel dafür steht in bunnefeld.css und schlägt jede
   Angabe am einzelnen Block. Der Kachelabstand gehört deshalb an dieselbe
   Stelle, sonst bleibt er wirkungslos. Am gestarteten Karussell darf er nicht
   stehen: dort rechnet Swiper die Spur selbst aus. */
.stil-harbeck .swiper:not(.swiper-initialized) > .swiper-wrapper { gap: 20px; }

/* Abspielknopf und Symbolfläche im Banner: quadratische Felder statt Kreise. */
.stil-harbeck .statement__play,
.stil-harbeck .video__play,
.stil-harbeck .landing__play,
.stil-harbeck .banner__block_icon {
  border-radius: 0;
}

/* features: die Bildunterschrift steht bei Harbeck mittig unter dem Foto. */
.stil-harbeck .features__caption { text-align: center; align-items: center; }
.stil-harbeck .features__caption-title {
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* timeline: die Stationen waren Zeilen unter einer Kante. Als graue Kacheln
   nebeneinander lesen sie sich als Reihe; der rote Punkt auf der Achse bleibt
   das Quadrat, das er im Ursprungs-Theme war. */
.stil-harbeck .timeline .timeline__card {
  align-items: center;
  text-align: center;
  padding: 28px 24px 30px;
  border-top: 0;
  border-radius: var(--hb-radius-card);
  background: var(--bf-bg-alt);
}
.stil-harbeck .timeline .timeline__card::before {
  position: static;
  width: 10px;
  height: 10px;
  margin: 0 auto 6px;
  border-radius: 0;
}
.stil-harbeck .timeline__year { letter-spacing: .08em; }

/* team: Namen und Rolle mittig unter dem Porträt. */
.stil-harbeck .team__member { align-items: center; text-align: center; }
.stil-harbeck .team__grid { gap: 42px 20px; }
.stil-harbeck .team__name {
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* service: auf dem grauen Band werden aus umrandeten Kacheln weiße Flächen. */
.stil-harbeck .service__items { gap: 20px; }
.stil-harbeck .service__item {
  align-items: center;
  text-align: center;
  padding: 30px 24px;
  border: 0;
  border-radius: var(--hb-radius-card);
  background: #fff;
}
.stil-harbeck .service__item img {
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: 0;
  background: var(--bf-bg-alt);
  object-fit: contain;
}
.stil-harbeck .service__item_title {
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* philosophy: der zweispaltige Kopf steht schon oben; hier nur das Bildraster. */
.stil-harbeck .philosophy__gallery { gap: 20px; }

/* contact: Standortkarten und die Karte selbst folgen derselben Kante. */
.stil-harbeck .contact__locations { border-top: 0; }
.stil-harbeck .contact__location-phone,
.stil-harbeck .contact__map-gate-button {
  border-radius: var(--hb-radius-pill);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* banner: der Seitenkopf der Unterseiten steht bei Harbeck mittig im Bild. */
.stil-harbeck .banner__content {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.stil-harbeck .banner__actions { justify-content: center; }
.stil-harbeck .banner__title { letter-spacing: .03em; }


/* -----------------------------------------------------------------------------
   10. Abschnittsknöpfe
   -----------------------------------------------------------------------------
   Bei Harbeck ist der Knopf am Ende eines Abschnitts klein, versal und meist nur
   eine Kontur mit einem Pfeil. Die satte Fläche bleibt dem Hauptweg vorbehalten
   (Seitenkopf, Aufruf-Block, Warenkorb) — die regelt harbeck.css bereits.
   Ohne diese Trennung wären auf der Startseite vier gleich laute rote Flächen.
   -------------------------------------------------------------------------- */
.stil-harbeck .simple__btn,
.stil-harbeck .projects__btn,
.stil-harbeck .reasons__button,
.stil-harbeck .features__btn,
.stil-harbeck .service__btn,
.stil-harbeck .landing__btn,
.stil-harbeck .banner__block_btn {
  height: auto;
  min-height: 44px;
  gap: 10px;
  border-radius: var(--hb-radius-pill);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Aus voller Fläche wird Kontur. `.simple__btn` ist bereits so gesetzt
   (bunnefeld.css, `.btn--secondary`-Gruppe) und steht deshalb nicht in dieser
   Liste — sonst kämpften zwei Regeln um dieselbe Kante. */
.stil-harbeck .projects__btn,
.stil-harbeck .reasons__button,
.stil-harbeck .features__btn,
.stil-harbeck .service__btn {
  background: transparent;
  border: 1px solid var(--bf-ink);
  color: var(--bf-ink);
}
.stil-harbeck .projects__btn:hover,
.stil-harbeck .reasons__button:hover,
.stil-harbeck .features__btn:hover,
.stil-harbeck .service__btn:hover {
  background: var(--bf-ink);
  border-color: var(--bf-ink);
  color: #fff;
  opacity: 1;
}

/* Der Pfeil des Vorbilds. Er sitzt als Flex-Kind im Knopf, den Abstand macht
   das `gap` oben. */
.stil-harbeck .simple__btn::after,
.stil-harbeck .projects__btn::after,
.stil-harbeck .reasons__button::after,
.stil-harbeck .features__btn::after,
.stil-harbeck .service__btn::after,
.stil-harbeck .landing__btn::after {
  content: "\2192";
  font-size: 1.2em;
  line-height: 1;
}

/* `.simple__btn` steht in der Knopfgruppe von bunnefeld.css, und die legt Maß
   und Schriftgrad mit `!important` fest (`padding: 16px 32px !important`,
   `font-size: var(--bf-fs-sm) !important`) — nötig, weil das Ursprungs-Theme
   die Knöpfe sonst auf Mini-Format zieht. Harbecks Knöpfe sind kleiner als
   unsere; ohne `!important` bliebe es hier beim alten Maß. Die übrigen Knöpfe
   oben stehen nicht in jener Gruppe und brauchen es nicht. */
.stil-harbeck .simple__btn {
  padding: 13px 28px !important;
  font-size: var(--bf-fs-xs) !important;
}
.stil-harbeck .projects__btn,
.stil-harbeck .reasons__button,
.stil-harbeck .features__btn,
.stil-harbeck .service__btn,
.stil-harbeck .landing__btn {
  padding: 13px 28px;
  font-size: var(--bf-fs-xs);
}

/* Der Knopf schließt den Abschnitt ab und steht deshalb unter der mittigen
   Achse, nicht am linken Rand. */
.stil-harbeck .projects__btn,
.stil-harbeck .features__btn {
  display: flex;
  width: max-content;
  margin-inline: auto;
}


/* -----------------------------------------------------------------------------
   11. Schmale Bildschirme
   -----------------------------------------------------------------------------
   Auf dem Telefon fallen die Bänder untereinander; wichtig ist nur, dass die
   rote Kachel des Aufruf-Blocks ihre Form behält, wenn Text und Foto
   übereinander stehen, und dass die Innenabstände nicht die halbe Höhe füllen.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .stil-harbeck .cta__content { padding: 32px 24px 36px; }
  .stil-harbeck .cta__media { min-height: 240px; }

  .stil-harbeck .info__grid { gap: 32px; }
  .stil-harbeck .categories__grid,
  .stil-harbeck .projects__gallery,
  .stil-harbeck .projects__gallery-col,
  .stil-harbeck .reasons__items,
  .stil-harbeck .service__items,
  .stil-harbeck .team__grid { gap: 14px; }

  .stil-harbeck .reasons__item { padding: 28px 22px 30px; }
  .stil-harbeck .timeline .timeline__card { padding: 24px 20px 26px; }

  .stil-harbeck #content > .title-block + section { padding-top: 26px; }
}
/* =============================================================================
   Harbeck-Variante — Katalog, Produktseite, Warenkorb
   -----------------------------------------------------------------------------
   Setzt auf den Farben, Schriften und Radien aus dem Kopf dieser Datei auf und
   stellt den kaufenden Teil der Seite auf die Handschrift des Vorbilds um.

   Unsere heutige Kachel ist ein Datenblatt: 1px-Kante, beschnittenes Foto auf
   grauem Grund, Technikchips, fetter Preis. Harbeck macht das Gegenteil — das
   Produkt steht freigestellt auf Weiß, darunter eine kurze Versalzeile, und der
   Preis ist nur eine Angabe unter anderen. Die Kante verschwindet, an ihre
   Stelle tritt beim Überfahren ein weicher Schatten.

   Alle Klassennamen stammen aus inc/shop_archive.php, woocommerce/
   content-single-product-simple.php und woocommerce/cart/mini-cart.php und sind
   gegen das ausgelieferte HTML von /shop/, /product/… und /warenkorb/ geprüft.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Katalog: Kopf und Filterleiste
   -----------------------------------------------------------------------------
   Der Seitentitel steht bei uns links über dem Raster. Harbeck setzt ihn mittig
   über die ganze Breite — dieselbe Achse, auf der auch Filter und Trefferzahl
   liegen, damit die Seite eine Mittellinie hat statt zweier Kanten.
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__head,
.stil-harbeck .shop__title {
  text-align: center;
}

/* Die Leiste ist beim Vorbild ein eigenes helles Band, kein umrandeter Kasten.
   Ohne Kante und mit 20px Radius liest sie sich als Fläche, auf der die Felder
   liegen — der graue Grund steht schon in --bf-bg-alt. */
.stil-harbeck .shop__filters {
  border: 0;
  border-radius: var(--hb-radius-card);
  padding: 22px 26px;
}

/* Die Grundebene gibt allen Eingabefeldern 10px Radius. Im Katalog sind die
   Auswahlfelder beim Vorbild aber Pillen, deshalb steht hier ein Selektor mit
   der Leiste davor — eine Klasse mehr, damit er die allgemeine Regel schlägt,
   ohne dass Formulare außerhalb des Katalogs davon berührt werden. */
.stil-harbeck .shop__filters .shop__filter-select,
.stil-harbeck .shop__filters .shop__filter-range input {
  border-radius: var(--hb-radius-pill);
  border-color: transparent;
  background-color: #fff;
  padding-left: 18px;
}
.stil-harbeck .shop__filters .shop__filter-select:focus,
.stil-harbeck .shop__filters .shop__filter-range input:focus {
  border-color: var(--bf-signal);
}

/* Die Beschriftungen liefen als graue Kleinschrift mit. Bei Harbeck ist jede
   Beschriftung eine kurze schwarze Versalzeile — das hält die Leiste ruhig,
   weil nur noch eine Grauabstufung darin vorkommt. */
.stil-harbeck .shop__filter-label {
  font-size: var(--bf-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--bf-ink);
}

/* „Anzeigen" war schwarz, weil Rot in der bestehenden Gestaltung dem Kauf
   vorbehalten ist. In der Variante trägt Rot die Fläche, also auch diese. */
.stil-harbeck .shop__filter-apply {
  border-radius: var(--hb-radius-pill);
  background: var(--bf-signal);
  border-color: var(--bf-signal);
  font-weight: 700;
  letter-spacing: .06em;
}
/* Eigene Hover-Regel nötig: die Grundfassung setzt ihren Hover mit derselben
   Gewichtung wie die Regel oben, sonst bliebe der Knopf beim Überfahren rot
   stehen und die Rückmeldung ginge verloren. */
.stil-harbeck .shop__filter-apply:hover {
  background: var(--bf-signal-dark);
  border-color: var(--bf-signal-dark);
}

.stil-harbeck .shop__filter-reset {
  font-size: var(--bf-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Die Trefferzahl klebte rechts am Rand. Auf der Mittelachse gehört sie unter
   die Felder, mittig wie der Titel darüber. */
.stil-harbeck .shop__filter-count {
  text-align: center;
}

/* Der Filterknopf erscheint nur auf dem Telefon (er trägt bis dahin `hidden`).
   Als Kontur-Pille in Rot ist er dort der einzige Farbpunkt über dem Raster. */
.stil-harbeck .shop__filter-toggle {
  border-radius: var(--hb-radius-pill);
  border-color: var(--bf-signal);
  color: var(--bf-signal);
  font-weight: 700;
  letter-spacing: .06em;
}
.stil-harbeck .shop__filter-toggle.is-open {
  background: var(--bf-signal);
  border-color: var(--bf-signal);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   Produktkarte
   -----------------------------------------------------------------------------
   Die Kante muss weg: sie ist die Signatur der bestehenden Gestaltung. Was die
   Karte danach zusammenhält, ist der Radius und im Ruhezustand nichts weiter —
   die Karten stehen wie beim Vorbild frei auf Weiß und heben sich erst beim
   Überfahren ab.
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__card {
  border: 0;
  border-radius: var(--hb-radius-card);
  background: #fff;
  box-shadow: none;
  /* Der Übergang der Grundfassung kennt nur border-color und transform; ohne
     diese Zeile springt der Schatten hart an statt zu kommen. */
  transition: box-shadow .24s var(--bf-ease), transform .24s var(--bf-ease);
}
.stil-harbeck .shop__card:hover {
  box-shadow: 0 22px 46px -22px rgba(34, 34, 34, .45);
}

/* Freigestellt auf grauer Fläche: der Beschnitt („cover") war nötig, solange
   die Kachel eine Bildfläche füllen sollte. Der Anhänger soll aber vollständig
   im Bild stehen und Luft um sich haben, deshalb „contain" plus Innenabstand.
   Das Seitenverhältnis liegt an der Hülle, nicht am Bild.

   Der Grund ist grau, nicht weiß — Kundenwunsch 25.08.2026: Bilder freistellen
   und auf grauen Grund, damit es hochwertig aussieht. Die freigestellten Bilder
   liegen als WebP MIT Alpha in der Mediathek; der Grauton kommt also von hier
   und nicht aus dem Bild. Dadurch gibt es keine sichtbare Kante zwischen Motiv
   und Kachel, und ein anderer Grauton zöge alle Bilder mit. */
.stil-harbeck .shop__card-image-wrap {
  aspect-ratio: 4 / 3;
  padding: 0;
  background: var(--bf-bg-alt);
  border-radius: 0;
}
.stil-harbeck .shop__card-image {
  object-fit: cover;
  background: transparent;
}
/* Das freigestellte Motiv braucht die Luft, das Foto füllt die Kachel. Welches
   von beiden vorliegt, entscheidet die Vorlage am Dateinamen
   (bunnefeld_bild_ist_freigestellt in inc/theme_functions.php). */
.stil-harbeck .shop__card-image-wrap--frei { padding: 20px 20px 4px; }
.stil-harbeck .shop__card-image--frei { object-fit: contain; }
/* Ein Foto ohne Beschnitt kann nicht heranfahren, ohne aus seinem Rahmen zu
   laufen. Die Bewegung übernimmt der Schatten der Karte. */
.stil-harbeck .shop__card:hover .shop__card-image {
  transform: none;
}
@media (max-width: 720px) {
  /* Auf dem Telefon steht eine Karte pro Zeile; 4:3 plus Innenabstand wäre dort
     ein halber Bildschirm nur für das Foto. */
  .stil-harbeck .shop__card-image-wrap { aspect-ratio: 3 / 2; }
  .stil-harbeck .shop__card-image-wrap--frei { padding: 14px 14px 2px; }
}

.stil-harbeck .shop__card-badge {
  border-radius: var(--hb-radius-pill);
  padding: 5px 14px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--bf-signal);
}

/* Mittig gesetzte Kacheltexte sind der zweite große Unterschied nach der Kante.
   Die Zeilen darin sind Flex-Reihen und richten sich nicht nach text-align,
   deshalb stehen sie einzeln darunter. */
.stil-harbeck .shop__card-info {
  text-align: center;
}
.stil-harbeck .bf-specline,
.stil-harbeck .shop__card-price-row,
.stil-harbeck .shop__card_wrap,
.stil-harbeck .shop__card-actions {
  justify-content: center;
}

/* 15–16px, 700, Versalien: die Zeile unter dem Bild ist beim Vorbild eine
   Beschriftung, keine Überschrift. Versal steht sie schon, die Laufweite kommt
   von der runden Schrift, die enger gesetzten Buchstaben nicht verträgt. */
.stil-harbeck .shop__card-title {
  font-family: var(--bf-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.3;
}

/* Die Technikchips trugen dieselbe 1px-Kante wie die Karte. Als weiche graue
   Pillen bleiben sie lesbar, ohne die Kante wieder einzuführen. */
.stil-harbeck .bf-specline span {
  border: 0;
  border-radius: var(--hb-radius-pill);
  background: var(--bf-bg-alt);
  padding: 4px 12px;
}

/* „Der Preis ist zurückhaltend": bei uns steht er in 20px und ist damit das
   Lauteste in der Kachel. Auf Textgröße gebracht liest man erst den Namen. */
.stil-harbeck .shop__card-price {
  font-size: var(--bf-fs-base);
  font-weight: 700;
}
.stil-harbeck .shop__card-price::after {
  font-size: var(--bf-fs-xs);
  letter-spacing: .04em;
}

/* Die Omnibus-Zeile stand im Ursprungs-Theme auf 8px und war schlicht nicht zu
   lesen — eine Pflichtangabe, die niemand entziffert, erfüllt ihren Zweck
   nicht. Die Variante zieht sie auf die kleinste Stufe der Skala. */
.stil-harbeck .shop__card-price-meta {
  font-size: var(--bf-fs-xs);
}

/* Der Preishinweis im Sprechblasenfeld ist die letzte Stelle im Katalog, die
   noch auf „Inter" steht; in der Variante spricht die ganze Seite Gabarito. */
.stil-harbeck .shop__card-tooltip {
  font-family: var(--bf-sans);
}

/* -----------------------------------------------------------------------------
   Menge und Warenkorb in der Kachel
   -----------------------------------------------------------------------------
   Die beiden Mengenknöpfe und der Warenkorb sind 44×44 und bleiben Quadrate;
   das Zahlenfeld dazwischen liegt ohne eigene Kante dazwischen.
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__qty-btn,
.stil-harbeck .shop__cart-btn {
  border-radius: 0;
  border-color: var(--bf-line);
}
.stil-harbeck .shop__qty-input {
  border-radius: var(--hb-radius-pill);
  border-color: var(--bf-line);
}

/* Der Warenkorbknopf war eine weiße Kontur neben zwei weiteren weißen Konturen —
   drei gleich aussehende Knöpfe, von denen nur einer kauft. Als rote Scheibe ist
   er die Handlung, auf die es ankommt. Die Strichfarbe steht als Attribut im
   SVG; CSS geht in der Kaskade davor und darf sie deshalb ohne !important
   überschreiben. */
.stil-harbeck .shop__cart-btn {
  background: var(--bf-signal);
  border-color: var(--bf-signal);
}
.stil-harbeck .shop__cart-btn svg path { stroke: #fff; }
.stil-harbeck .shop__cart-btn:hover {
  background: var(--bf-signal-dark);
  border-color: var(--bf-signal-dark);
}
.stil-harbeck .shop__cart-btn:hover svg path { stroke: #fff; }

/* Der Pfeil hinter der Beschriftung ist beim Vorbild fester Bestandteil jedes
   Knopfes. Form und Farbe des Knopfes stehen schon weiter oben in dieser Datei. */
.stil-harbeck .shop__more-btn::after {
  content: "→";
  font-size: 1.1em;
  line-height: 1;
}

/* „Mehr laden" ist der Gegenentwurf zum roten Knopf: nur Kontur, klein, versal,
   mit Pfeil — die zweite Knopfform des Vorbilds. */
.stil-harbeck .shop__load-more-btn {
  border-radius: var(--hb-radius-pill);
  border-color: var(--bf-ink);
  color: var(--bf-ink);
  background: transparent;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.stil-harbeck .shop__load-more-btn::after {
  content: "→";
  font-size: 1.1em;
  line-height: 1;
}
.stil-harbeck .shop__load-more-btn:hover {
  background: var(--bf-ink);
  color: #fff;
  opacity: 1;
}

/* -----------------------------------------------------------------------------
   Produktseite: Galerie
   -----------------------------------------------------------------------------
   Dieselbe Entscheidung wie in der Kachel, nur größer: das Foto steht auf Weiß
   und vollständig im Bild. Der Rahmen um die Bühne entfällt, weil er die runde
   Kante als harte Linie nachzeichnen würde.
   -------------------------------------------------------------------------- */
.stil-harbeck .bf-pd__stage {
  border: 0;
  border-radius: var(--hb-radius-card);
  background: #fff;
  padding: 24px;
}
.stil-harbeck .bf-pd__img {
  object-fit: contain;
}

/* Die Pfeile liegen jetzt auf Weiß statt auf Grau und brauchen deshalb einen
   Schatten, um überhaupt sichtbar zu sein. */
.stil-harbeck .bf-pd__nav {
  border-radius: 0;
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(34, 34, 34, .55);
}
.stil-harbeck .bf-pd__nav:hover {
  background: var(--bf-signal);
  border-color: transparent;
  color: #fff;
}
.stil-harbeck .bf-pd__counter {
  border-radius: var(--hb-radius-pill);
  background: rgba(34, 34, 34, .86);
}

.stil-harbeck .bf-pd__thumb {
  border-radius: 0;
  background: #fff;
}
.stil-harbeck .bf-pd__thumb img {
  object-fit: contain;
}
/* Das aktive Vorschaubild war schwarz umrandet. Rot ist in der Variante die
   Farbe für „hier stehen Sie gerade" und wiederholt sich in den Reitern. */
.stil-harbeck .bf-pd__thumb.is-active {
  border-color: var(--bf-signal);
}

/* -----------------------------------------------------------------------------
   Produktseite: Entscheidungsspalte
   -----------------------------------------------------------------------------
   Der Preis stand zwischen zwei Linien — die Datenblatt-Geste der bestehenden
   Gestaltung. Beim Vorbild ist er ein gerundetes graues Feld: dieselbe
   Hervorhebung, aber als Fläche statt als Kante.
   -------------------------------------------------------------------------- */
.stil-harbeck .bf-pd__price {
  border: 0;
  border-radius: var(--hb-radius-card);
  background: var(--bf-bg-alt);
  padding: 22px 26px;
}
.stil-harbeck .bf-pd__price-value {
  font-weight: 700;
  letter-spacing: .01em;
}

.stil-harbeck .bf-pd__qty {
  border-radius: var(--hb-radius-pill);
  border-color: var(--bf-line);
}
.stil-harbeck .bf-pd__btn {
  border-radius: var(--hb-radius-pill);
  font-weight: 700;
  letter-spacing: .06em;
}
.stil-harbeck .bf-pd__btn--ghost {
  border-color: var(--bf-ink);
}
.stil-harbeck .bf-pd__btn--ghost:hover {
  background: var(--bf-ink);
  border-color: var(--bf-ink);
  color: #fff;
}

/* Der Gedankenstrich vor jedem Vorteil ist eine typografische Geste des Hauses.
   Das Vorbild führt an derselben Stelle den Pfeil, den auch seine Knöpfe tragen. */
.stil-harbeck .bf-pd__usp li::before {
  content: "→";
}

/* Die roten Haken über der Merkmalsliste zogen ihre Farbe aus einer Variablen
   des Ursprungs-Themes (#D7161E) und lagen damit knapp neben dem Rot der
   Variante. Zwei fast gleiche Rottöne auf einer Seite sieht man sofort. */
.stil-harbeck .product-hl__ic {
  color: var(--bf-signal);
}

/* -----------------------------------------------------------------------------
   Produktseite: Reiter und Beschreibungstext
   -----------------------------------------------------------------------------
   Unterstrichene Reiter auf einer Linie sind eine eckige Form. Als Pillenreihe
   auf der Mittelachse folgen sie dem Formprinzip des Vorbilds und markieren den
   aktiven Reiter über die Fläche statt über einen Strich.
   -------------------------------------------------------------------------- */
.stil-harbeck .bf-pd__tabs {
  justify-content: center;
  gap: 8px;
  border-bottom: 0;
}
.stil-harbeck .bf-pd__tab {
  border: 0;
  border-radius: var(--hb-radius-pill);
  margin-bottom: 0;
  padding: 12px 26px;
  background: var(--bf-bg-alt);
  font-family: var(--bf-sans);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--bf-steel-700);
}
.stil-harbeck .bf-pd__tab:hover {
  background: #e2e2e2;
  color: var(--bf-ink);
}
.stil-harbeck .bf-pd__tab.is-active {
  background: var(--bf-signal);
  color: #fff;
}

/* Die FAQ-Fragen liegen in einem eigenen Reiter und standen als nackte Zeilen
   untereinander. Als gerundete graue Felder gehören sie sichtbar zusammen. */
.stil-harbeck .product__accordion-item {
  margin-bottom: 10px;
  padding: 2px 22px;
  border-radius: var(--hb-radius-card);
  background: var(--bf-bg-alt);
}
.stil-harbeck .product__accordion-head {
  font-weight: 700;
}
/* Die Antworten sind die letzte Stelle der Produktseite, an der noch „Inter"
   steht — die Regel des Ursprungs-Themes trifft den Absatz direkt und wird von
   der Grundschrift der Variante sonst nicht erreicht. */
.stil-harbeck .product__accordion-body p {
  font-family: var(--bf-sans);
}

/* -----------------------------------------------------------------------------
   Produktseite: Beratungskarte
   -----------------------------------------------------------------------------
   Hier zeigt sich der Kern des Vorbilds am deutlichsten: die gerundete Karte mit
   rotem Verlauf. Bei uns ist derselbe Kasten hellgrau und umrandet und geht
   neben dem Text unter — genau die Stelle, an der Harbeck Fläche zeigt.
   -------------------------------------------------------------------------- */
.stil-harbeck .bf-pd__aside {
  border: 0;
  border-radius: var(--hb-radius-card);
  background: var(--hb-rot-verlauf);
  color: #fff;
  padding: 30px;
}
.stil-harbeck .bf-pd__aside-label,
.stil-harbeck .bf-pd__aside-phone {
  color: #fff;
}
.stil-harbeck .bf-pd__aside-text,
.stil-harbeck .bf-pd__aside-hours,
.stil-harbeck .bf-pd__aside-note {
  color: rgba(255, 255, 255, .82);
}
.stil-harbeck .bf-pd__aside-note {
  border-top-color: rgba(255, 255, 255, .28);
}
/* Auf rotem Grund kann die Telefonnummer nicht rot werden, wenn man sie berührt. */
.stil-harbeck .bf-pd__aside-phone:hover {
  color: #fff;
  text-decoration: underline;
}
/* Der Knopf in der Karte kehrt das Verhältnis um: weiße Fläche, rote Schrift. */
.stil-harbeck .bf-pd__aside .bf-pd__btn--ghost {
  background: #fff;
  border-color: #fff;
  color: var(--bf-signal);
}
.stil-harbeck .bf-pd__aside .bf-pd__btn--ghost:hover {
  background: var(--bf-ink);
  border-color: var(--bf-ink);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   Ähnliche Modelle
   -----------------------------------------------------------------------------
   Dieselben Karten wie im Katalog, also dieselbe Behandlung — sonst stünden
   unter der Produktseite Kacheln in der alten Handschrift.
   -------------------------------------------------------------------------- */
.stil-harbeck .bf-related__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.stil-harbeck .bf-related__card {
  border: 0;
  border-radius: var(--hb-radius-card);
  text-align: center;
  transition: box-shadow .24s var(--bf-ease);
}
.stil-harbeck .bf-related__card:hover {
  box-shadow: 0 22px 46px -22px rgba(34, 34, 34, .45);
}
.stil-harbeck .bf-related__img {
  background: #fff;
  padding: 16px;
}
.stil-harbeck .bf-related__img img {
  object-fit: contain;
}
.stil-harbeck .bf-related__card:hover .bf-related__img img {
  transform: none;
}
.stil-harbeck .bf-related__body {
  align-items: center;
}
.stil-harbeck .bf-related__name {
  font-family: var(--bf-sans);
  font-size: 16px;
  letter-spacing: .03em;
}

/* -----------------------------------------------------------------------------
   Warenkorb-Schublade
   -----------------------------------------------------------------------------
   Die Schublade fährt von rechts ein und stößt an drei Seiten an den Rand des
   Fensters. Sie schließt bündig ab, ohne Radius an der sichtbaren Kante.
   -------------------------------------------------------------------------- */
.stil-harbeck .bf-cart__panel {
  border-left: 0;
  border-radius: var(--hb-radius-card) 0 0 var(--hb-radius-card);
}
.stil-harbeck .bf-cart .woocommerce-mini-cart__title {
  letter-spacing: .04em;
}
.stil-harbeck .bf-cart .woocommerce_cart_item__img img {
  border-radius: 0;
}
.stil-harbeck .bf-cart .woocommerce-mini-cart__buttons a {
  border-radius: var(--hb-radius-pill);
  font-weight: 700;
  letter-spacing: .06em;
}
/* Der Zurück-Link im leeren Warenkorb ist derselbe Kontur-Knopf wie „Mehr laden". */
.stil-harbeck .bf-cart .link-cart {
  border-radius: var(--hb-radius-pill);
  font-weight: 700;
  letter-spacing: .06em;
}

/* -----------------------------------------------------------------------------
   Warenkorbseite (WooCommerce-Blöcke)
   -----------------------------------------------------------------------------
   Die Seite /warenkorb/ läuft nicht über woocommerce/cart/cart.php, sondern über
   die Blöcke (`wc-block-…`) — das zeigt das ausgelieferte HTML. Die bestehende
   Gestaltung stellt dort JEDES Bauteil mit `border-radius: 0 !important` auf
   eckig, weil WooCommerce seine eigenen Radien ebenfalls hart setzt.

   Ein spezifischerer Selektor allein reicht gegen `!important` nicht: eine
   wichtige Angabe schlägt jede unwichtige, unabhängig von der Spezifität.
   Deshalb steht in diesem Abschnitt — und nur hier — ebenfalls `!important`,
   jeweils mit einer Klasse mehr im Selektor, damit die Variante gewinnt und die
   Grundfassung ohne `.stil-harbeck` unverändert bleibt.

   Die Selektoren teilen sich Warenkorb und Kasse; die Kasse bekommt damit
   dieselben Kanten, was gewollt ist — ein Bestellabschluss, der anders gebaut
   ist als der Katalog davor, wäre der auffälligste Bruch der ganzen Variante.
   -------------------------------------------------------------------------- */
.stil-harbeck .wc-block-components-text-input input,
.stil-harbeck .wc-blocks-components-select__select,
.stil-harbeck .wc-block-components-panel,
.stil-harbeck .wc-block-components-address-card {
  border-radius: var(--bf-radius) !important;
}

.stil-harbeck .wc-block-components-quantity-selector {
  border-radius: var(--hb-radius-pill) !important;
}

.stil-harbeck .wc-block-components-notice-banner {
  border-radius: var(--hb-radius-card) !important;
}

.stil-harbeck .wc-block-cart-item__image img,
.stil-harbeck .wc-block-components-order-summary-item__image img {
  border-radius: 0 !important;
}

/* Der Selektor wiederholt die beiden :not()-Ausschlüsse der Grundfassung, weil
   sonst auch die Mengenpfeile und die Aufklapp-Zeilen zu Pillen würden. */
.stil-harbeck .wc-block-components-button:not(.wc-block-components-panel__button):not(.wc-block-components-quantity-selector__button) {
  border-radius: var(--hb-radius-pill) !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
}
/* Den Fokus-/Hover-Ring zeichnen die Blöcke in einem ::after mit eigenem Radius —
   ohne diese Zeile blitzt eine eckige Kante über der runden Fläche. */
.stil-harbeck .wc-block-components-button::after {
  border-radius: var(--hb-radius-pill) !important;
}

/* Die Summenspalte ist beim Vorbild eine gerundete graue Fläche, keine
   umrandete Box — dieselbe Geste wie beim Preisfeld der Produktseite. */
.stil-harbeck .wc-block-components-sidebar-layout .wc-block-components-sidebar {
  border: 0;
  border-radius: var(--hb-radius-card);
  padding: 28px;
}

/* Die schwarze Linie unter dem Tabellenkopf ist eine harte Kante mitten in einer
   runden Seite; eine helle Linie trennt genauso und drängt sich nicht auf. */
.stil-harbeck .wc-block-cart-items__header {
  border-bottom-color: var(--bf-line);
  letter-spacing: .1em;
}

/* Die Produktnamen stehen in der Zeile auf 20px. Harbecks Überschriften messen
   im Original 31–36px, die Beschriftungen darunter 15–16px — 20px in einer
   Tabellenzeile ist für diese Handschrift zu laut. Die Kettenlänge und das
   `!important` sind aus der Grundfassung übernommen, die dort gegen die eigenen
   langen Selektoren der Blöcke anschreiben musste. */
.stil-harbeck .wc-block-components-product-name,
.stil-harbeck table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
  font-size: 17px !important;
  letter-spacing: .03em;
}

/* Fällt der Block je gegen den klassischen Shortcode zurück (dann greift
   woocommerce/cart/cart.php), soll die Tabelle nicht als einziges Bauteil des
   Shops eckig bleiben. Ungeprüft, weil die Seite heute die Blöcke ausliefert. */
.stil-harbeck .woocommerce table.shop_table {
  border-radius: var(--hb-radius-card);
  overflow: hidden;
}
/* =============================================================================
   Harbeck-Variante — Teil 4: Fußbereich, Formulare, Nebenseiten
   -----------------------------------------------------------------------------
   Setzt auf harbeck.css auf: Schrift, Farbvariablen, mittige Abschnittsköpfe und
   Pillenknöpfe stehen dort schon. Hier geht es um die Seiten, die man erst nach
   dem Klick sieht — und um den Fuß, der auf jeder davon steht.

   Der Fuß ist der auffälligste Unterschied zum Vorbild: unserer steht auf hellem
   Grau mit dunkler Schrift, Harbecks ist ein dunkles Band. Das Umkehren allein
   reicht nicht — bunnefeld.css hat mehrere Regeln, die eigens für den hellen
   Grund geschrieben wurden (weiße Plättchen unter den Kennzahlen, Logo ohne
   Platte, Telefonnummer in Tinte). Die stehen hier alle wieder auf dunkel.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Fußbereich als dunkles Band
   -----------------------------------------------------------------------------
   Zwei Dunkelstufen statt einer: der Hauptteil in Ink, die Rechtszeile im
   Dunkelfeld. So bleibt die Bänderlogik des Vorbilds auch unten erhalten,
   und die Kleinschrift der Pflichtangaben sitzt sichtbar in ihrem eigenen Feld.
   Die abgerundete Oberkante ist kein Zierrat — sie ist dieselbe Kante wie an
   Karten und Knöpfen und macht den Fuß zu einer Fläche, die auf der Seite liegt,
   statt zu einem Rest, der unten übrig bleibt.
   -------------------------------------------------------------------------- */
.stil-harbeck .bff {
  background: var(--bf-ink);
  color: rgba(255, 255, 255, .72);
  border-top: 0;
  border-radius: var(--hb-radius-card) var(--hb-radius-card) 0 0;
}

.stil-harbeck .bff__bar {
  background: var(--bf-steel-900);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.stil-harbeck .bff__bar-inner {
  color: rgba(255, 255, 255, .6);
}

/* Das Logo ist rote Schrift auf durchsichtigem Grund. Auf Ink wäre Rot auf
   Dunkelgrau kaum noch zu lesen, deshalb kommt die weiße Platte zurück, die
   bunnefeld.css für den hellen Fuß entfernt hatte — diesmal mit runder Kante,
   damit sie wie eine Karte wirkt und nicht wie ein aufgeklebter Zettel. */
.stil-harbeck .bff__logo {
  display: inline-block;
  background: #fff;
  padding: 14px 20px;
  border-radius: var(--hb-radius-card);
}
.stil-harbeck .bff__logo img { height: 64px; }

/* Die Kennzahlen standen als weiße Kästchen auf Grau. Weiß auf Dunkel wäre eine
   Reihe leuchtender Blöcke und zöge mehr Aufmerksamkeit als die Kontaktdaten. */
.stil-harbeck .bff__facts span {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  border-radius: var(--hb-radius-pill);
  color: rgba(255, 255, 255, .8);
  padding: 6px 14px;
}

.stil-harbeck .bff__title { color: #fff; }
.stil-harbeck .bff__text,
.stil-harbeck .bff__addr,
.stil-harbeck .bff__hours { color: rgba(255, 255, 255, .68); }
.stil-harbeck .bff__addr strong { color: #fff; }

.stil-harbeck .bff__list a,
.stil-harbeck .bff__contact a,
.stil-harbeck .bff__social a { color: rgba(255, 255, 255, .72); }
.stil-harbeck .bff__list a:hover,
.stil-harbeck .bff__contact a:hover,
.stil-harbeck .bff__social a:hover { color: #fff; }

/* Einziges !important in diesem Teil: bunnefeld.css setzt die Telefonnummer mit
   `color: var(--bf-ink) !important` fest, damit sie auf dem hellen Fuß die
   dunkelste Zeile bleibt. Auf dunklem Grund wäre sie damit unsichtbar, und
   Spezifität allein kommt gegen ein !important nicht an. */
.stil-harbeck .bff__phone { color: #fff !important; }

/* -----------------------------------------------------------------------------
   2. Brotkrume
   -----------------------------------------------------------------------------
   Unter einem mittig gesetzten Seitentitel wirkt eine linksbündige Brotkrume wie
   ein Rest aus einer anderen Seite. Sie rückt mit in die Mitte und wird
   kleingesetzt, damit sie den Titel nicht doppelt ankündigt.
   -------------------------------------------------------------------------- */
.stil-harbeck .breadcrumbs__list { justify-content: center; }
.stil-harbeck .breadcrumbs__current {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
   3. Informationen: aus der Liste werden Karten
   -----------------------------------------------------------------------------
   Bisher lag Beitrag unter Beitrag, getrennt durch Linien, Bild links und Text
   rechts. Das Vorbild kennt diese Zeilenform nicht — dort steht alles in
   gerundeten Kacheln nebeneinander, Bild oben, Versalzeile darunter. Der Kopf
   verliert seine Trennlinie: die Bänder und Kartenkanten übernehmen das Gliedern.
   -------------------------------------------------------------------------- */
.stil-harbeck .news__head {
  border-bottom: 0;
  padding-bottom: 24px;
  text-align: center;
}
.stil-harbeck .news__head-title { font-size: clamp(26px, 20px + 1vw, 34px); }
.stil-harbeck .news__head-lead { margin-inline: auto; }

.stil-harbeck .news__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  border-top: 0;
}
.stil-harbeck .news__item {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--bf-line);
  border-radius: var(--hb-radius-card);
  background: #fff;
  overflow: hidden;
  transition: border-color .18s var(--bf-ease), transform .18s var(--bf-ease);
}
.stil-harbeck .news__item:hover {
  border-color: var(--bf-signal);
  transform: translateY(-3px);
}
.stil-harbeck .news__image-wrap {
  width: 100%;
  border-radius: 0;
}
.stil-harbeck .news__image {
  height: 210px;
  border-radius: 0;
}
.stil-harbeck .news__content {
  width: 100%;
  padding: 24px 24px 28px;
  text-align: center;
  align-items: center;
}
.stil-harbeck .news__title { font-size: 18px; }

/* «Mehr lesen» war ein unterstrichenes Wort. Beim Vorbild ist der Weiterweg
   immer ein kleiner Konturknopf mit Pfeil — der Pfeil ersetzt die Unterstreichung
   als Hinweis, dass es weitergeht. */
.stil-harbeck .news__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 9px 20px;
  border: 1px solid var(--bf-ink);
  border-radius: var(--hb-radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .18s var(--bf-ease), color .18s var(--bf-ease),
              border-color .18s var(--bf-ease);
}
.stil-harbeck .news__link::after { content: "\2192"; }
.stil-harbeck .news__item:hover .news__link {
  background: var(--bf-signal);
  border-color: var(--bf-signal);
  color: #fff;
}

/* Symbole und Seitenzahlen sind beim Vorbild Kreise. */
.stil-harbeck .news__page-btn,
.stil-harbeck .news__page-dots {
  border-radius: 0;
  font-weight: 700;
}
.stil-harbeck .news__page-btn.is-active {
  background: var(--bf-signal);
  border-color: var(--bf-signal);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   4. Einzelbeitrag
   -----------------------------------------------------------------------------
   Der Titel geht mit in die Mitte, die Zwischenüberschriften bleiben links: ein
   Fließtext, dessen Absatzköpfe mittig stehen, verliert die Kante, an der das
   Auge beim Lesen zurückspringt. Mittig ist beim Vorbild die Ankündigung, nicht
   der Text selbst.
   -------------------------------------------------------------------------- */
.stil-harbeck .single-news__title {
  text-align: center;
  font-size: clamp(24px, 19px + 1vw, 32px);
}
.stil-harbeck .single-news__image-wrap { border-radius: var(--hb-radius-card); }
.stil-harbeck .single-news__image { border-radius: 0; }

/* Die verwandten Beiträge lagen als linienlose Zeilen in der Seitenspalte. Als
   Karten sind sie dasselbe Bauteil wie die Kacheln der Übersicht — der Leser
   erkennt sie wieder. */
.stil-harbeck .single-news__related-item {
  padding: 14px;
  border: 1px solid var(--bf-line);
  border-radius: var(--hb-radius-card);
  transition: border-color .18s var(--bf-ease);
}
.stil-harbeck .single-news__related-item:first-of-type { padding-top: 14px; }
.stil-harbeck .single-news__related-item + .single-news__related-item { margin-top: 14px; }
.stil-harbeck .single-news__related-item:hover { border-color: var(--bf-signal); }
.stil-harbeck .single-news__related-image-wrap { border-radius: 0; }
.stil-harbeck .single-news__related-image { border-radius: 0; }
.stil-harbeck .single-news__related-title { font-size: 16px; }

.stil-harbeck .single-news__nav-btn { border-radius: 0; }

/* -----------------------------------------------------------------------------
   5. Rechtstexte und Fehlerseite
   -----------------------------------------------------------------------------
   Wichtig: die Rechtstexte laufen im selben Bauteil wie die SEO-Vorspänne
   (`.title-block`), und harbeck.css setzt dieses Bauteil komplett mittig. Für
   drei Zeilen Vorspann ist das richtig, für vier Bildschirmseiten Datenschutz
   nicht — deshalb hier ausdrücklich zurück auf linksbündig. Die Spalte selbst
   rückt in die Mitte, damit sie unter dem mittigen Titel nicht abkippt.
   -------------------------------------------------------------------------- */
.stil-harbeck .title-block.legal-page .title { text-align: center; }
.stil-harbeck .title-block.legal-page .text {
  text-align: left;
  margin-inline: auto;
}

/* Die Fehlerseite ist beim Vorbild ein Graufeld mit einem einzigen roten Knopf —
   die Grundfarbe der Variante bringt das Grau schon mit. */
.stil-harbeck .error-page { background: var(--bf-bg-alt); }
.stil-harbeck .error-page .container a {
  border-radius: var(--hb-radius-pill);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
   6. Anfrageformular und Contact Form 7
   -----------------------------------------------------------------------------
   Kopf mittig wie jeder andere Abschnittskopf, Felder rund, Absendeknopf als
   rote Pille. Die Feldrahmen sind stark gerundet: das ist die Form, an der man
   das Vorbild als erstes erkennt, und ein Formular ist die Stelle, an der man
   sie am längsten ansieht.
   -------------------------------------------------------------------------- */
.stil-harbeck .cabin-request__head {
  align-items: center;
  text-align: center;
}
.stil-harbeck .cabin-request__head .text {
  max-width: 62ch;
  margin-inline: auto;
}

.stil-harbeck .cabin-request__input {
  border-radius: var(--hb-radius-pill);
  padding: 14px 22px;
}
.stil-harbeck .cabin-request__textarea {
  border-radius: var(--hb-radius-card);
  padding: 18px 22px;
}
.stil-harbeck .cabin-request__input:focus,
.stil-harbeck .cabin-request__textarea:focus { border-color: var(--bf-signal); }

/* Die Feldnamen standen in der Mono-Schrift des Hauses. Beim Vorbild gibt es nur
   eine Schrift; die Kleinteiligkeit entsteht dort über Versalien und Laufweite. */
.stil-harbeck .cabin-request__label {
  font-family: var(--bf-sans);
  font-size: var(--bf-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bf-steel-700);
}

/* Der Absendeknopf füllte als Flex-Kind die volle Formularbreite. Beim Vorbild
   sind Knöpfe klein und stehen mittig unter dem, was sie abschicken. */
.stil-harbeck .wpcf7 .cabin-request__submit,
.stil-harbeck .cabin-request__submit {
  border-radius: var(--hb-radius-pill);
  align-self: center;
  min-width: 280px;
}

/* Das Häkchen der Datenschutz-Zustimmung ist ein natives Kästchen ohne eigene
   Gestaltung. `accent-color` färbt es in der Signalfarbe, ohne es nachzubauen —
   ein selbstgebautes Kästchen ohne sichtbaren Haken wäre hier das größere
   Risiko als eine Ecke, die nicht ganz rund ist. */
.stil-harbeck .cabin-request__agreement input[type="checkbox"] { accent-color: var(--bf-signal); }

/* Die Rückmeldung nach dem Absenden kommt aus dem Stylesheet des Plugins und ist
   dort ein blau umrandeter Kasten. Der Selektor braucht `form` in der Kette,
   weil das Plugin ihn selbst so schreibt und sonst spezifischer bleibt. */
.stil-harbeck .wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 22px;
  border-width: 1px;
  border-radius: var(--hb-radius-card);
}
.stil-harbeck .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: var(--bf-fs-xs);
  color: var(--bf-signal);
}

/* Die Kontaktspalte neben dem Formular ist beim Vorbild kein loser Text, sondern
   ein Graufeld — dieselbe Fläche, die dort ganze Abschnittsbänder trägt, hier
   auf Kartengröße. Die Symbole bekommen die runde Platte, die das Vorbild
   überall für Symbole benutzt. */
.stil-harbeck .cabin-request__contact {
  background: var(--bf-bg-alt);
  border-radius: var(--hb-radius-card);
  padding: clamp(24px, 3vw, 32px);
}
.stil-harbeck .cabin-request__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 0;
  border-radius: 0;
  background: #fff;
}
.stil-harbeck .cabin-request__contact-label {
  font-family: var(--bf-sans);
  letter-spacing: .06em;
}

/* Die beiden Schichten, die auf jeder Seite mitgeladen werden: Preisanfrage und
   Erfolgsmeldung. Sie sind Formulare wie die anderen und dürfen nicht mit
   6px-Ecken aus der Variante fallen. */
.stil-harbeck .price-request-popup__card,
.stil-harbeck .form-success-popup__card { border-radius: var(--hb-radius-card); }
.stil-harbeck .price-request-popup__input { border-radius: var(--hb-radius-pill); padding: 13px 20px; }
.stil-harbeck .price-request-popup__input:focus { border-color: var(--bf-signal); outline: none; }
.stil-harbeck textarea.price-request-popup__input { border-radius: var(--hb-radius-card); }
.stil-harbeck .price-request-popup__submit {
  border-radius: var(--hb-radius-pill);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}
/* Das Schließkreuz war ein blankes Symbol ohne Fläche und dadurch schwer zu
   treffen. Die runde Platte ist gleichzeitig die Symbolform des Vorbilds und
   ein Ziel, das die 44px-Marke für Fingerbedienung fast erreicht. */
.stil-harbeck .price-request-popup__close,
.stil-harbeck .form-success-popup__close {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--bf-bg-alt);
}
.stil-harbeck .price-request-popup__close:hover,
.stil-harbeck .form-success-popup__close:hover { background: var(--bf-steel-300); }

/* -----------------------------------------------------------------------------
   7. Mein Konto
   -----------------------------------------------------------------------------
   Der Kontobereich ist die einzige Seite, auf der der Kunde etwas verwaltet
   statt zu lesen. Er bekommt deshalb genau eine rote Fläche — die Zeile mit der
   Werkstattnummer. Beim Vorbild sind rote Verlaufskarten immer der eine Punkt,
   auf den ein Abschnitt hinauslaufen soll.
   -------------------------------------------------------------------------- */
.stil-harbeck .bf-konto__head { text-align: center; }
.stil-harbeck .bf-konto__eyebrow {
  font-family: var(--bf-sans);
  letter-spacing: .12em;
}

.stil-harbeck .woocommerce-MyAccount-navigation { border-radius: var(--hb-radius-card); }
/* Der aktive Punkt war eine graue Zeile mit rotem Strich an der Kante. Rot als
   Fläche statt als Strich ist der Kern des Vorbilds — und der Strich links
   passte ohnehin nicht mehr in eine Karte mit runden Ecken. */
.stil-harbeck .woocommerce-MyAccount-navigation li.is-active > a,
.stil-harbeck .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active > a {
  background: var(--bf-signal);
  border-left-color: transparent;
  color: #fff;
}
/* Kacheln als Graufelder ohne Rahmen: eine Kante weniger pro Kachel, und die
   Fläche übernimmt das Abgrenzen — so macht es das Vorbild in allen Rastern. */
.stil-harbeck .bf-konto__tile {
  border-color: transparent;
  border-radius: var(--hb-radius-card);
  background: var(--bf-bg-alt);
  padding: 24px;
  text-align: center;
  align-items: center;
}
.stil-harbeck .bf-konto__tile:hover { border-color: var(--bf-signal); }

.stil-harbeck .bf-konto__contact {
  border: 0;
  border-radius: var(--hb-radius-card);
  background: var(--hb-rot-verlauf);
  padding: clamp(24px, 3vw, 32px);
  text-align: center;
}
.stil-harbeck .bf-konto__contact-label {
  font-family: var(--bf-sans);
  color: rgba(255, 255, 255, .8);
}
.stil-harbeck .bf-konto__contact-hours { color: rgba(255, 255, 255, .8); }
.stil-harbeck .bf-konto__contact-phone { color: #fff; }
.stil-harbeck .bf-konto__contact-phone:hover { color: #fff; text-decoration: underline; }

/* Felder, Adresskarten und Tabellen im Konto auf dieselben zwei Radien wie
   überall sonst. */
.stil-harbeck body.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.stil-harbeck body.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.stil-harbeck body.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.stil-harbeck body.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.stil-harbeck body.woocommerce-account .woocommerce-MyAccount-content select,
.stil-harbeck body.woocommerce-account .section.my_account form .form-row input.input-text {
  border-radius: var(--hb-radius-pill);
  padding: 0 22px;
}
.stil-harbeck body.woocommerce-account .woocommerce-MyAccount-content input:focus,
.stil-harbeck body.woocommerce-account .woocommerce-MyAccount-content select:focus { border-color: var(--bf-signal); }

.stil-harbeck .woocommerce-MyAccount-content .woocommerce-Address,
.stil-harbeck .woocommerce-MyAccount-content table.shop_table { border-radius: var(--hb-radius-card); }

.stil-harbeck body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.stil-harbeck body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
.stil-harbeck body.woocommerce-account .section.my_account form .form-row button[type="submit"] {
  border-radius: var(--hb-radius-pill);
  padding: 0 34px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

/* Anmeldeseite: dieselbe Karte, dieselben Pillen. Die Kette ist so lang, weil
   bunnefeld.css sie selbst so schreibt — mit `body`, `:not(.logged-in)` und der
   Formularzeile kommt sonst keine kürzere Regel dagegen an. */
.stil-harbeck body.woocommerce-account:not(.logged-in) .woocommerce { border-radius: var(--hb-radius-card); }
.stil-harbeck body.woocommerce-account:not(.logged-in) .woocommerce > h2 { text-align: center; }
.stil-harbeck body.woocommerce-account:not(.logged-in) .woocommerce > .bf-konto__eyebrow { text-align: center; }
.stil-harbeck body.woocommerce-account:not(.logged-in) .woocommerce .form-row input.input-text {
  border-radius: var(--hb-radius-pill);
  padding: 0 22px;
}
.stil-harbeck body.woocommerce-account:not(.logged-in) .woocommerce .form-row input.input-text:focus { border-color: var(--bf-signal); }
.stil-harbeck body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit,
.stil-harbeck body.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit,
.stil-harbeck body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword button {
  border-radius: var(--hb-radius-pill);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}
.stil-harbeck body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input[type="checkbox"] { accent-color: var(--bf-signal); }
/* =============================================================================
   Korrekturen nach dem ersten Blick im Browser
   -----------------------------------------------------------------------------
   Diese Datei sammelt, was sich erst am gerenderten Bild zeigt. Sie steht
   bewusst am Ende: die Bereichsdateien bleiben dadurch lesbar, und man sieht
   auf einen Blick, was am Entwurf nicht aufging.
   ============================================================================= */

/* Das Diagonalband stand am OBEREN Bildrand statt unter dem Seitenkopf und lag
   quer über der Servicezeile.
   Grund: das Ursprungs-Theme setzt für `.hero::after` bereits `top: 0`. Die
   Regel der Variante ergänzte nur `bottom: 0` — bei gesetzter Höhe ist die
   Box damit überbestimmt, und in dieser Schreibrichtung gewinnt `top`.
   `top: auto` gibt die Kante frei, erst dann greift `bottom`. */
/* (Das Diagonalband gibt es nicht mehr, siehe 10.8 — die Korrektur seiner
   Kante ist damit erledigt.) */

/* «ÜBER UNS» brach im Kopf auf zwei Zeilen und schob die Leiste auseinander.
   Der mittig gesetzte Wortmarke lässt den beiden Außenfeldern weniger Platz als
   im linksbündigen Original, deshalb reicht die alte Laufweite nicht mehr. */
.stil-harbeck .bfh__menu a {
  white-space: nowrap;
}
.stil-harbeck .bfh__menu {
  gap: clamp(12px, 1.4vw, 24px);
}
.stil-harbeck .bfh__menu a {
  letter-spacing: .04em;
  font-size: 15px;
}

/* Zwischen 1024px und 1180px stehen Navigation, Wortmarke und Symbolgruppe zu
   eng beieinander. Das Logo darf dort etwas kleiner werden — es ist im Kopf
   ohnehin doppelt so groß wie im Vorbild. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .stil-harbeck .bfh__logo img { height: 68px; }
  .stil-harbeck .bfh__menu a { font-size: 14px; }
}
/* =============================================================================
   Variante «Harbeck» — Teil 60: Nacharbeit an Seitenkopf und Startseite
   -----------------------------------------------------------------------------
   Durchgesehen wurde die Startseite bei 1440px und bei 1024px, Abschnitt für
   Abschnitt gegen die Aufnahmen von harbeck.de. Die Anlage stimmt: die Bänder
   wechseln Weiß und #ededed, die Köpfe stehen mittig, die Kanten sind rund.
   Was hier steht, sind die Stellen, an denen die Umstellung nicht durchgezogen
   hat — nichts davon erfindet Gestaltung neu.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   60.1 Weiße Kopfleiste über dem Bewegtbild
   -----------------------------------------------------------------------------
   Das Video zeigt eine Schweißnaht: dunkle Fläche, aber ein wanderndes helles
   Feld aus Funken und blaugrünem Licht, das zeitweise genau unter «SHOP» und
   «INFORMATIONEN» steht. Nachgemessen über acht gleichmäßig verteilte Bilder
   des Films: der Grund hinter der Menüzeile erreicht dort einen Kontrast von
   nur 3,9:1 gegen Weiß, hinter der schmalen Servicezeile durchgehend 3,8:1 —
   bei 15px halbfett und 14px mager beides zu wenig, gefordert sind 4,5:1.
   Der Verlauf des Seitenkopfs allein schafft das nicht, weil er über die ganze
   Höhe des Bildes rechnen muss und oben deshalb nicht beliebig dunkel werden
   darf, ohne den Anfang des Films zuzudecken.

   Eine eigene Abdunklung an der Leiste selbst — 171px hoch bei 1440px, 141px bei
   1024px, also genau so hoch wie die Leiste — löst das dort, wo es nötig ist,
   und läuft nach unten auf Null aus, sodass vom Bild nichts verlorengeht.
   Nachgemessen über dieselben acht Bilder liegt der schlechteste Wert danach bei
   5,7:1. Die Abdunklung hängt am durchsichtigen Zustand: sobald die Leiste beim
   Scrollen deckend weiß wird, ist sie wieder weg.

   Kein `backdrop-filter`, kein `filter`, kein `transform` — die Begründung dazu
   steht in 10.3: jedes davon würde Suchebene und mobile Schublade aus dem
   Bildschirm in die Leiste sperren. Ein Hintergrundverlauf tut das nicht.
   -------------------------------------------------------------------------- */
/* Beides ist mit Abschnitt 10.3 hinfällig: die Abdunklung galt der
   durchsichtigen Leiste, die Weißschrift der Servicezeile. Die Leiste ist
   jetzt weiß, die Servicezeile ist ganz entfallen. */


/* -----------------------------------------------------------------------------
   60.2 Das Wortzeichen sitzt nicht in der Mitte
   -----------------------------------------------------------------------------
   Abschnitt 10.2 stellt die Dreiteilung des Vorbilds her — Navigation links,
   Marke mittig, Symbole rechts — und rechnet damit, dass `flex: 1 1 0` an den
   beiden Außenfeldern die Marke von selbst in die Mitte schiebt. Das gelingt
   nur, solange die Navigation in ihre Hälfte passt, und das tut sie bei keiner
   der beiden geprüften Breiten: bei 1440px misst sie 473px bei 440px Anteil,
   bei 1024px 424px bei 375px. Das Logo steht dadurch 32px (1440) bzw. 49px
   (1024) rechts von der Mitte — unter einer Kopfzeile, die exakt mittig steht,
   liest sich das als Fehler und nicht als Absicht. Bei 1024px kommt dazu, dass
   zwischen «KONTAKT» und dem roten Bogen des Zeichens nur 31px bleiben.

   Es fehlt also nicht viel. Die Navigation trägt Maße, die für die schmale
   Versalschrift des Hauses gedacht waren: 0.08em Sperrung (in der Variante
   schon auf 0.04em zurückgenommen), 15px und bis zu 29px Abstand zwischen den
   Punkten. Eine Nummer kleiner genügt, damit sie in ihren Anteil passt und die
   Marke von allein in die Mitte fällt. Beim Vorbild ist die Menüzeile ebenfalls
   klein und eng gesetzt; das ist keine Notlösung, sondern dessen Maß.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .stil-harbeck .bfh__menu {
    gap: 16px;
  }
  .stil-harbeck .bfh__menu a {
    font-size: 14px;
    letter-spacing: .02em;
  }
}

/* Unterhalb von 1120px reicht das noch nicht: dort ist die freie Fläche so
   knapp, dass jeder Punkt der Navigation zählt. Der Abstand zwischen den drei
   Feldern der Leiste geht deshalb zusätzlich zurück — er stammt aus derselben
   Rechnung und ist bei dieser Breite Luft, die der Marke fehlt. */
@media (min-width: 1024px) and (max-width: 1119px) {
  .stil-harbeck .bfh__inner {
    column-gap: 20px;
  }
  .stil-harbeck .bfh__menu {
    gap: 12px;
  }
  .stil-harbeck .bfh__menu a {
    font-size: 13px;
  }
}


/* -----------------------------------------------------------------------------
   60.3 Zwei Überschriften sind mager geblieben
   -----------------------------------------------------------------------------
   Die Beschriftung der Kacheln «Was wir bauen» («ANHÄNGER», «SONDERBAU»,
   «ZUBEHÖR») und der Titel des roten Aufruf-Blocks stehen in 500 statt in 700.
   Beide sind keine Überschriften-Elemente — die eine ein `span`, die andere ein
   `div` —, deshalb greift die Grundregel für h1…h6 aus harbeck.css nicht, und
   sie fallen neben «WAS WIR BAUEN» und «WARUM BUNNEFELD» sichtbar ab. Beim
   Vorbild ist jede Versalzeile fett, ohne Ausnahme.
   -------------------------------------------------------------------------- */
.stil-harbeck .categories__title,
.stil-harbeck .cta__title {
  font-weight: 700;
}


/* -----------------------------------------------------------------------------
   60.4 Zusammengezogene Laufweite an den Abschnittsköpfen
   -----------------------------------------------------------------------------
   Nebeneinander gelesen laufen die Köpfe der Startseite unterschiedlich weit:
   «WAS WIR BAUEN» steht auf den abgenommenen 0.03em, «ANHÄNGER AUS DER
   WERKSTATT», «WARUM BUNNEFELD» und «WAS MIT EINEM BOOTSANHÄNGER BEGANN»
   dagegen auf −0.3px. Die negative Sperrung kommt von der schmalen Versalschrift
   des Hauses, die eng gesetzt werden musste; die runde Gabarito braucht das
   Gegenteil. Bei gleichem Schriftgrad von 30px fällt der Unterschied von einem
   Kopf zum nächsten auf.
   -------------------------------------------------------------------------- */
.stil-harbeck body.home h2.title {
  letter-spacing: .03em;
}


/* -----------------------------------------------------------------------------
   60.5 Bei 1024px bleibt in jeder Kachelreihe eine Kachel allein stehen
   -----------------------------------------------------------------------------
   Beides sind Raster, die ihre Spalten selbst zählen, und beide zählen bei
   dieser Breite eine Spalte zu wenig:

     «Was wir bauen»  — drei Kacheln auf zwei Spalten: «ZUBEHÖR» steht allein
                        in der zweiten Reihe, rechts daneben eine leere Hälfte.
     «Warum bunnefeld» — vier Karten auf drei Spalten: «FÜR DEN GEWERBLICHEN
                        EINSATZ» steht allein in der zweiten Reihe.

   Bei 1440px steht jede der beiden Reihen geschlossen; das Vorbild führt seine
   Kachelreihen ebenfalls immer als volle Zeile. Der Platz ist da — 315px je
   Bildkachel und 231px je Karte —, gezählt wird nur zu grob.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) and (max-width: 1199px) {
  .stil-harbeck body.home .categories__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stil-harbeck body.home .reasons__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* In der schmaleren Spalte wäre der Innenabstand von 28px die halbe
     Textbreite; er geht auf das Maß zurück, das die Karte auch am Telefon hat. */
  .stil-harbeck body.home .reasons__item {
    padding: 30px 20px 32px;
  }
}


/* -----------------------------------------------------------------------------
   60.6 Loch zwischen Ziffer und Titel in den Karten «Warum bunnefeld»
   -----------------------------------------------------------------------------
   Die Karten stehen im Raster alle gleich hoch, und das Ursprungs-Theme verteilt
   ihren Inhalt mit `justify-content: space-between`: die rote Ziffer klebt oben,
   Titel und Text kleben unten, dazwischen steht nichts. Bei «KEIN STANDARD»,
   dem kürzesten der vier Texte, sind das bei 1024px 114px leere Fläche mitten in
   der Karte — die Karte sieht aus, als fehle ihr etwas. Beim Vorbild bilden
   Zeichen, Zeile und Text immer einen zusammenhängenden Stapel.

   `flex-start` statt `space-between` stellt den Stapel her und hält zugleich die
   vier roten Ziffern auf einer Höhe; die unterschiedlich lange Textmenge macht
   dann unten Luft, und das ist die ruhigere der beiden Ungleichheiten.
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .reasons__item {
  justify-content: flex-start;
}
/* =============================================================================
   Variante «Harbeck» — Teil 6.1: Startseite und Kopfleiste am Telefon
   -----------------------------------------------------------------------------
   Diese Datei enthält ausschließlich Media-Queries für schmale Fenster. Sie
   sammelt, was der Entwurf bei 390px und 768px im Browser schuldig blieb —
   nichts davon ist eine neue Idee, alles zieht nach, was auf dem großen Schirm
   längst so gemeint war.

   Nachgemessen wurde bei 320, 360, 390, 414, 480, 600, 640, 768, 820, 1000 und
   1023px Breite. `document.documentElement.scrollWidth` entspricht auf allen
   diesen Breiten `window.innerWidth`: waagerecht scrollt nichts.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   61.1 Die Wortmarke stand nicht in der Mitte
   -----------------------------------------------------------------------------
   Im Bild fiel es sofort auf: bei 390px klebte das Logo fast an der Menütaste,
   rechts daneben blieb ein breiter leerer Streifen bis zu den Symbolen; bei
   768px stand es gut 140px links der Bildmitte. Die Dreiteilung «Menütaste
   links, Marke mittig, Symbole rechts», die 10-kopf.css herstellen wollte, war
   damit nur zur Hälfte da — und ausgerechnet die Marke saß schief.

   Der Grund: 10-kopf.css hebt die Menütaste absolut nach links, die
   Symbolgruppe bleibt aber im Fluss. Das `margin-inline: auto` der Marke
   zentriert sie deshalb nur im Rest der Zeile — also im Raum links neben den
   Symbolen — statt im Fenster.

   Die Marke wird darum selbst aus dem Fluss genommen und auf 50% der Leiste
   gesetzt. Dass die Symbolgruppe im Fluss bleibt, ist Absicht: nur so bleibt
   die Menütaste weiterhin an `.bfh__inner` verankert. Läge die Symbolgruppe
   absolut, wäre sie der neue Bezugsrahmen ihres eigenen Kindes — die Menütaste
   spränge nach rechts in die Symbolreihe zurück.

   `min-height` ersetzt die Höhe, die die Marke im Fluss beigesteuert hat; ohne
   sie fiele die Leiste auf die Höhe der Symbole zusammen. Der Wert ist bewusst
   derselbe Ausdruck wie die Bildhöhe darunter.

   Kein `transform` an der Symbolgruppe oder an `.bfh__inner`, nur an der Marke:
   Suchebene und Schublade liegen als Geschwister von `.bfh__bar` im Markup und
   sind `position: fixed`; ein Transform an einem ihrer Vorfahren würde sie auf
   die Leiste einsperren. Die Marke selbst enthält nur ein Bild.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .stil-harbeck .bfh__inner {
    position: relative;
    min-height: clamp(52px, 14.5vw, 66px);
  }
  .stil-harbeck .bfh__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-inline: 0;
  }
  .stil-harbeck .bfh__actions {
    margin-left: auto;
  }

  /* In der Mitte hat die Marke nur den Platz zwischen Menütaste und Symbolen —
     bei 390px sind das 220px. Mit den 88px Höhe des Ursprungs-Themes ist sie
     193px breit und läge über dem Warenkorb. Die zweite Regel gilt der
     gescrollten Leiste: `.bfh.is-stuck .bfh__logo img` ist spezifischer als der
     Grundwert und würde die Marke sonst beim Scrollen wieder auf 76px
     aufblasen — mitten in die Symbole hinein. Beide Zustände tragen jetzt
     dasselbe Maß, die Leiste springt beim Scrollen also auch nicht mehr.

     Kleiner ist hier ohnehin richtig: das Vorbild führt seine Wortmarke am
     Telefon rund 110px breit, wir liegen mit 124px dicht daneben. */
  .stil-harbeck .bfh__logo img,
  .stil-harbeck .bfh.is-stuck .bfh__logo img {
    height: clamp(52px, 14.5vw, 66px);
    max-height: none;
  }
}

/* Unter 360px reicht auch das nicht: die Symbolgruppe ist 96px breit, die
   Menütaste nur 42px — die Mitte ist dadurch nicht die Mitte des freien Raums,
   und bei 320px schnitte die Marke 9px in den Warenkorb. Weniger Seitenrand und
   ein engerer Symbolabstand geben die fehlenden Pixel zurück, ohne die
   Tastenflächen unter die 44px Mindestgröße zu drücken. */
@media (max-width: 359px) {
  .stil-harbeck .bfh__inner {
    padding-inline: 10px;
    min-height: 44px;
  }
  .stil-harbeck .bfh__burger {
    left: 10px;
  }
  .stil-harbeck .bfh__actions {
    gap: 6px;
  }
  .stil-harbeck .bfh__logo img,
  .stil-harbeck .bfh.is-stuck .bfh__logo img {
    height: 44px;
  }
}


/* -----------------------------------------------------------------------------
   61.2 Der Bildstreifen zeigte sein einziges Bild in der halben Breite
   -----------------------------------------------------------------------------
   Unter dem Video hing bei 390px ein 174px schmales Foto am linken Rand, rechts
   daneben 200px leere graue Bahn. Es sah aus wie ein vergessener Platzhalter.

   bunnefeld.css stellt den Streifen unter 620px fest auf zwei Spalten
   (`grid-template-columns: 1fr 1fr`) und blendet ab dem dritten Rahmen aus —
   sinnvoll bei drei Aufnahmen, aber die Startseite pflegt hier zurzeit nur eine
   einzige. Die feste Zweispaltigkeit überschreibt dabei die Zählung aus
   `[data-count]`, deshalb blieb die rechte Spalte leer.

   Die Regel greift ausdrücklich nur bei `[data-count="1"]`: pflegt der Kunde
   später wieder drei Bilder ein, bleibt es bei den zwei Spalten des Hauses.
   Die 190px Höhe sind kein neuer Wert, sondern der untere Anschlag des
   Grundmaßes `clamp(190px, 19vw, 280px)` — die 168px galten dem halbierten
   Rahmen und lassen ein vollbreites Bild zum Streifen zusammenschrumpfen. */
@media (max-width: 620px) {
  .stil-harbeck .hero__band[data-count="1"] {
    grid-template-columns: 1fr;
  }
  .stil-harbeck .hero__band[data-count="1"] .hero__frame img {
    height: 190px;
  }
}


/* -----------------------------------------------------------------------------
   61.3 Die Kopfzeile stieß bei 390px an beide Ränder
   -----------------------------------------------------------------------------
   «GEBAUT IN HAREN (EMS)» maß in der dritten Zeile genau die 358px der Spalte
   — links und rechts blieb kein einziger Pixel Luft, die Zeile klebte an den
   Kanten. Die Klammer in harbeck.css endet nach unten bei 30px; das ist für
   dieses Fenster zu viel. 26px lassen die Überschrift in zwei Zeilen umbrechen
   und geben ihr an beiden Seiten wieder Rand. Das Vorbild setzt seine H1 selbst
   am großen Schirm nur 31px — klein ist hier die Haltung, nicht der Verzicht. */
@media (max-width: 430px) {
  .stil-harbeck .hero__title {
    font-size: 26px;
  }
}


/* -----------------------------------------------------------------------------
   61.4 «Anhänger besprechen» lief über die volle Breite
   -----------------------------------------------------------------------------
   Unter den Kacheln von «Warum bunnefeld» stand ein 358px breiter Knopf, zwei
   Abschnitte darüber der halb so breite «Alle Anhänger». Zwei Knöpfe derselben
   Art in derselben Spalte, der eine schmal und mittig, der andere randlos —
   das las sich wie ein Fehler, und es ist einer: main.css setzt
   `.reasons__button { width: 100% }` in seiner Telefon-Abteilung. Das Vorbild
   hält seine Knöpfe klein, auch am Telefon.
   Kein `!important` nötig — die Regel in main.css trägt keines und wird von
   `.stil-harbeck` überboten. */
@media (max-width: 768px) {
  .stil-harbeck .reasons__button {
    width: auto;
  }
}


/* -----------------------------------------------------------------------------
   61.5 «Was mit einem Bootsanhänger begann» blieb als einziger Abschnitt links
   -----------------------------------------------------------------------------
   Am großen Schirm stehen Text und Foto dieses Abschnitts nebeneinander; die
   linksbündige Textspalte ist dort richtig. Unter 768px fällt das Foto nach
   oben und der Text darunter über die ganze Breite — und dann steht zwischen
   lauter mittigen Abschnitten («Zubehör» darüber, «Anhänger aus der Werkstatt»
   darunter) plötzlich ein linksbündiger Kopf mit linksbündigem Knopf. Im Bild
   wirkt das wie ein vergessener Rest der alten Handschrift.

   `align-items` gilt dem Knopf: `.simple__content` ist eine Flex-Spalte mit
   `flex-start`, `text-align` allein ließe ihn am linken Rand stehen.
   Der Absatz erbt aus dem Grundsatz `p { max-width: 68ch }` eine Spalte, die
   schmaler ist als das Band; ohne den automatischen Seitenrand stünde der
   mittige Text in einer linksbündigen Spalte und damit sichtbar neben der
   Achse — derselbe Fall, den 20-startseite.css schon für die Abschnittsköpfe
   beschreibt. */
@media (max-width: 768px) {
  .stil-harbeck .simple__content {
    text-align: center;
    align-items: center;
  }
  .stil-harbeck .simple__content .text p {
    margin-inline: auto;
  }
}
/* =============================================================================
   Harbeck-Variante — Nacharbeit Katalog und Produktseite (1440px)
   -----------------------------------------------------------------------------
   Aufgenommen am gerenderten Stand von /shop/, /product-category/anhaenger/
   bootsanhaenger/ und /product/schlauchboot-trailer-bms-led-750-kg/ bei 1440px
   und gegen shop_d.png des Vorbilds gehalten. Es geht hier nicht um neue
   Gestaltung, sondern um die Stellen, an denen die Umstellung im Browser anders
   ankam, als sie in der Datei gedacht war.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Der Katalogtitel stand weiter links
   -----------------------------------------------------------------------------
   Die Absicht der Variante ist notiert: „Harbeck setzt ihn mittig über die ganze
   Breite". Im Bild klebt „SHOP" trotzdem am linken Rand, und auf der
   Kategorieseite ebenso „BOOTSANHÄNGER". Der Grund ist, dass `.shop__head` eine
   Flex-Zeile mit `justify-content: space-between` ist: die Überschrift wird
   darin auf ihre Textbreite geschrumpft, und `text-align: center` hat in einem
   Kasten, der nur so breit ist wie sein Text, nichts mehr zu verteilen. Erst die
   Achse des Elternteils bringt den Titel auf die Mitte, auf der die Brotkrume
   darüber und die Trefferzahl darunter längst stehen.
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__head {
  justify-content: center;
}

/* -----------------------------------------------------------------------------
   Die Filterleiste riss auf der Kategorieseite auf
   -----------------------------------------------------------------------------
   Auf /shop/ passt die Leiste in eine Zeile. Sobald ein Filter gesetzt ist —
   also auf jeder Kategorieseite — kommt „Zurücksetzen" dazu, die Zeile wird zu
   lang, und die Sortierung fällt in eine zweite. Weil sie aus der Grundfassung
   ein `margin-left: auto` mitbringt, wurde sie dort ganz an den rechten Rand
   geworfen: auf /product-category/anhaenger/bootsanhaenger/ klaffte ein 966px
   breites leeres Grauloch mitten in der Leiste, und die Leiste war 250px statt
   158px hoch. Der Umbruch selbst ist mit festen Breiten nicht sicher zu
   vermeiden — die Grundfassung hat es mit Pixelrechnerei versucht und verliert,
   sobald ein Wort länger wird. Deshalb darf hier umgebrochen werden, aber auf
   der Mittelachse: dann liest sich die zweite Zeile als Absicht statt als Loch.
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__filters {
  justify-content: center;
}
/* Das `margin-left: auto` steht in bunnefeld.css ohne !important; die zusätzliche
   Klasse `.stil-harbeck` reicht, um es zu überstimmen. */
.stil-harbeck .shop__filters .shop__filter:has(.shop__filter-select--sort) {
  margin-left: 0;
}

/* -----------------------------------------------------------------------------
   Die Produktkarten wirkten nicht als eine Reihe
   -----------------------------------------------------------------------------
   Im Katalog liegen Fotos und technische Zeichnungen nebeneinander: ein
   hochformatiges Foto vom Hof, daneben drei helle CAD-Blätter mit dünnen Linien.
   Ohne jede Kante steht das Foto als kräftiger Farbblock auf Weiß, während die
   Zeichnung fast verschwindet — die Reihe zerfällt in „Bild, nichts, nichts,
   Bild". Das Vorbild löst genau diesen Fall mit einem Rahmen: in shop_d.png
   trägt jede Kachel eine 1px-Linie in #222222 auf 20px Radius (an den Kacheln
   der Topseller-Reihe nachgemessen). Der Rahmen gibt allen Karten denselben
   Umriss, gleich was darin liegt, und ist damit kein neuer Einfall, sondern die
   Vorlage. Der Schatten beim Überfahren bleibt, wie er ist.
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__card {
  border: 1px solid var(--bf-ink);
}

/* Dieselben Karten stehen unter der Produktseite; ohne diese Zeile stünden dort
   rahmenlose Kacheln neben den gerahmten des Katalogs. */
.stil-harbeck .bf-related__card {
  border: 1px solid var(--bf-ink);
}

/* Seit die Kachel einen Rahmen hat, sieht man ihre Ränder: oben liegen 20px
   zwischen Kante und Bild, unten nur 16px zwischen Warenkorbknopf und Kante —
   der rote Knopf klebte am unteren Rahmen. */
.stil-harbeck .shop__card-actions {
  padding-bottom: 22px;
}

/* -----------------------------------------------------------------------------
   „Passend dazu": die Zeile hörte unten viermal woanders auf
   -----------------------------------------------------------------------------
   Die vier Karten sind gleich hoch (Raster), ihr Inhalt hängt aber oben. Bei
   „Kühl- und Kofferanhänger – Fahrtkühlung, HACCP-zertifiziert" braucht der Name
   drei Zeilen, bei „Anhänger für Notstromaggregate" zwei — dadurch stand
   „Auf Anfrage" in den ersten beiden Karten 18px tiefer als in den anderen und
   die Unterkante der Reihe franste aus. Die Katalogkachel löst das schon so
   (`.shop__card-info { flex: 1 }` plus `margin-top: auto` am Preis); den
   ähnlichen Modellen fehlte dasselbe Paar.
   -------------------------------------------------------------------------- */
.stil-harbeck .bf-related__body {
  flex: 1;
}
.stil-harbeck .bf-related__price {
  margin-top: auto;
}

/* -----------------------------------------------------------------------------
   Grauer Text auf grauer Fläche
   -----------------------------------------------------------------------------
   Die Variante hat zwei Werte gleichzeitig verschoben: die Graufläche wurde von
   #f3f3f2 auf #ededed dunkler und die Nebenschrift von #767674 auf #8a8a8a
   heller. Wo beides aufeinandertrifft — die Technikchips in der Kachel, die
   Trefferzahl und „Zurücksetzen" in der Filterleiste, „inkl. MwSt." im grauen
   Preisfeld der Produktseite — bleiben 2,95:1 übrig; die Zeilen sind auf dem
   Bildschirm kaum zu entziffern, obwohl es Pflichtangaben sind. Auf #ededed
   erreicht #555555 (--bf-steel-700) 6,4:1 und bleibt trotzdem deutlich leiser
   als der Fließtext daneben.
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__card .bf-specline span {
  color: var(--bf-steel-700);
}
.stil-harbeck .shop__filter-count,
.stil-harbeck .shop__filter-reset {
  color: var(--bf-steel-700);
}
.stil-harbeck .bf-pd__price-note {
  color: var(--bf-steel-700);
}

/* Die Merkmalstabelle der Produktseite („Zulässiges Gesamtgewicht", „Nutzlast",
   „Bereifung" …) führt ihre Zeilenköpfe in #8a8a8a auf Weiß: 3,45:1 bei 16px.
   Das sind die Angaben, wegen derer die Seite überhaupt aufgerufen wird — sie
   dürfen nicht blasser stehen als der Wert daneben. Die übrigen hellgrauen
   Kleinzeilen auf Weiß rühren von derselben Variablen her und gehören dorthin
   korrigiert, nicht einzeln hierher. */
.stil-harbeck .product-specs th {
  color: var(--bf-steel-700);
}

/* -----------------------------------------------------------------------------
   Beratungskarte: der Text auf Rot war zu blass
   -----------------------------------------------------------------------------
   Auf der roten Karte stehen Fließtext, Öffnungszeiten und der Versandhinweis in
   Weiß mit 82% Deckung. Über #df242b ergibt das 3,58:1 — für 15px zu wenig, und
   im Bild wirkt der Absatz wie ausgeblichen. Volles Weiß kommt auf 4,76:1; die
   Abstufung zur Überschrift trägt weiterhin Größe und Schnitt, nicht die
   Deckung.
   -------------------------------------------------------------------------- */
.stil-harbeck .bf-pd__aside-text,
.stil-harbeck .bf-pd__aside-hours,
.stil-harbeck .bf-pd__aside-note {
  color: #fff;
}
/* =============================================================================
   Harbeck-Variante — Katalog, Produktseite und Warenkorb im schmalen Fenster
   -----------------------------------------------------------------------------
   Durchgesehen wurde bei 390 x 844 (iPhone-Breite): /shop/ mit geschlossenem und
   mit geöffnetem Filter, die Produktseite BM LED 1.350/1.500/1.800 kg mit allen
   drei Reitern, und /warenkorb/ mit einer Position darin.

   Am Rechner geht der Entwurf auf. Was hier steht, sind ausschließlich die
   Stellen, an denen er im schmalen Fenster auseinanderfällt — meist, weil die
   Grundfassung für das Telefon eigene Regeln mitbringt, die älter sind als die
   Variante und sie überschreiben. Die Datei enthält deshalb nur Media-Queries;
   am Rechner ändert sie nichts.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Produktseite: die gestapelte Spalte
   -----------------------------------------------------------------------------
   Ab 900px stehen Galerie und Kaufspalte nicht mehr nebeneinander, sondern
   untereinander — die Grundfassung löst dafür beide Spalten mit
   `display: contents` auf und macht `.bf-pd__top` zu einer Flex-Spalte. Das
   `align-items: start`, das für das zweispaltige Raster gedacht war (dort meint
   es „oben ausrichten"), meint in der Spalte plötzlich „auf Inhaltsbreite
   schrumpfen".

   Solange der Preis nur zwischen zwei Linien stand, fiel das nicht auf. Als
   graue Fläche der Variante schon: der Kasten war 257 von 358px breit und
   endete mitten in der Zeile, während Titel, Foto und Datenblatt darüber und
   darunter über die volle Breite laufen. Ebenso hörte „Frage zum Produkt
   stellen" gut 50px vor der Kaufzeile darüber auf — zwei Knöpfe übereinander
   mit zwei verschiedenen rechten Kanten.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .stil-harbeck .bf-pd__top {
    align-items: stretch;
  }

  /* Der Pfad ist auf der Produktseite länger als der Bildschirm (792px Inhalt
     bei 358px Platz). Die Variante stellt ihn mittig — bei überlaufendem
     Flex-Inhalt schneidet das aber an BEIDEN Enden ab, und das linke Ende liegt
     außerhalb des Rollbereichs. Im Bild begann der Pfad mit einem nackten „/",
     „Startseite" war weg und auch durch Schieben nicht zu erreichen.
     `safe center` ist genau für diesen Fall gebaut: solange der Pfad passt,
     bleibt er mittig (im Katalog steht „Startseite / SHOP" weiterhin zentriert),
     und erst wenn er überläuft, fängt er links an. Browser, die das Schlüsselwort
     nicht kennen, überspringen die Zeile und bleiben beim heutigen Verhalten. */
  .stil-harbeck .breadcrumbs__list {
    justify-content: safe center;
  }
}


/* -----------------------------------------------------------------------------
   Produktseite: die Reiter
   -----------------------------------------------------------------------------
   Unter 768px stellt die Grundfassung die Reiter auf drei gleich breite Felder
   mit Symbol über der Beschriftung um — das ist auf dem Telefon richtig. Sie
   nimmt ihnen dabei aber mit `background: none !important` und
   `border-radius: 0 !important` genau das weg, was die Variante ihnen gegeben
   hat: die graue Pillenfläche und den roten aktiven Reiter. Übrig blieb die
   alte Handschrift — kantige Felder auf Weiß, dazu eine durchgehende Linie
   darunter und ein roter Strich unter dem aktiven Reiter.

   Die drei !important sind hier unvermeidlich: gegen eine wichtige Angabe hilft
   keine Spezifität, nur eine ebenso wichtige. Sie stehen einzeln bei den drei
   Eigenschaften, die die Grundfassung wichtig setzt, und nicht pauschal.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .stil-harbeck .bf-pd__tabs {
    gap: 8px;
    border-bottom: 0;
  }

  .stil-harbeck .bf-pd__tab,
  .stil-harbeck .product__tab.bf-pd__tab {
    background: var(--bf-bg-alt) !important;   /* gegen `background: none !important` */
    border-radius: var(--hb-radius-card) !important;  /* gegen `border-radius: 0 !important` */
    border-bottom: 0;
    padding: 14px 8px !important;              /* gegen `padding: 14px 6px !important` */
    font-weight: 700;
    /* 15px war zu groß für ein Drittel von 358px: „BESCHREIBUNG" lief bis an
       beide Pillenkanten und berührte sie. Bei 13px bleiben 8px Luft. */
    font-size: 13px;
    letter-spacing: .02em;
  }

  /* Der aktive Reiter ist in der Variante eine rote Fläche, kein Strich. Das
     Symbol darin zieht seine Farbe über `currentColor` mit. */
  .stil-harbeck .bf-pd__tab.is-active,
  .stil-harbeck .product__tab.bf-pd__tab.is-active {
    background: var(--bf-signal) !important;   /* gegen `background: none !important` */
    color: #fff !important;                    /* gegen `color: var(--bf-ink) !important` */
    border-bottom-color: transparent;
  }
}


/* -----------------------------------------------------------------------------
   Katalog: die Fläche hinter „Filter & Sortierung"
   -----------------------------------------------------------------------------
   Die Grundfassung setzt für das Telefon `width: 100%` auf die Auswahlfelder,
   nimmt es sich aber ein paar Zeilen später mit festen Breiten (250px, 190px,
   100px) ohne Media-Query wieder — die späteren Zeilen gewinnen. In der grauen
   Fläche standen die Felder dadurch auf drei verschiedenen Breiten und ließen
   rechts einen ausgefransten Rand: „Alle Produkte" 250px, „Neuheiten" 190px,
   die beiden Preisfelder je 100px, alles linksbündig in 306px Platz.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .stil-harbeck .shop__filters .shop__filter-select,
  .stil-harbeck .shop__filters .shop__filter-select--sort {
    width: 100%;
  }

  /* „von" und „bis" teilen sich die Zeile zu gleichen Teilen, der Gedankenstrich
     bleibt dazwischen stehen. */
  .stil-harbeck .shop__filters .shop__filter-range {
    width: 100%;
  }
  .stil-harbeck .shop__filters .shop__filter-range input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}


/* -----------------------------------------------------------------------------
   Einspaltige Ansicht: Seitentitel und Warenkorbzeile
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* „SHOP" stand links, während darüber der Pfad und darunter Filterknopf,
     Karten, Titel, Chips und Preise alle auf der Mittelachse liegen — der
     einzige linksbündige Punkt der Seite. Das `text-align: center` der Variante
     konnte daran nichts ändern: `.shop__head` ist eine Flex-SPALTE mit
     `align-items: flex-start`, die Überschrift darin also nur 65 von 358px
     breit — in einem 65px breiten Kasten ist mittig gleich links. Gerichtet
     wird deshalb der Kasten, nicht der Text. */
  .stil-harbeck .shop__head {
    align-items: center;
  }

  /* Der Produktname in der Warenkorbzeile stand in einer 189px schmalen Spalte
     und brach mitten im Wort: „MOTORBOOTANHÄNG / ER BM LED". Schuld waren drei
     Dinge zusammen — 17px Versalien, die zusätzliche Laufweite und das
     `overflow-wrap: anywhere` der Blöcke, das lieber irgendwo trennt als eine
     Zeile zu überschreiten. Bei 15px passt „MOTORBOOTANHÄNGER" in eine Zeile;
     falls ein längerer Name kommt, trennt die Silbentrennung an der richtigen
     Stelle (die Seite ist als lang="de" ausgezeichnet).
     Das !important ist nötig, weil schon die Variante hier mit !important
     schreibt — sie musste es gegen die langen Selektoren der Blöcke tun. */
  .stil-harbeck .wc-block-components-product-name,
  .stil-harbeck table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    font-size: 15px !important;
    letter-spacing: .02em;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}
/* =============================================================================
   Harbeck-Variante — Nachzug der Inhaltsseiten
   -----------------------------------------------------------------------------
   Durchgesehen wurden /anhaenger/, /informationen/, ein Beitrag von dort
   (/stuetzlast-achslast-nutzlast/), /miettrailer/, /kontakt/, /ueber-uns/ und
   /impressum/ — jeweils bei 1440px und bei 390px Breite.

   Der Umbau greift auf diesen Seiten fast überall. Was hier steht, sind die
   Stellen, an denen er nicht ankam: drei Abschnitte, die keine der Bänderlisten
   kennt und die deshalb ohne Innenabstand direkt unter der Brotkrume kleben;
   die Rechtstexte, die noch in der alten Schrift überschreiben und deren letzte
   Zeile auf der Fußzeile aufsetzt; ein Formular, dessen Pflicht-Häkchen
   unsichtbar ist; und zwei Reihen, die auf dem Telefon nicht umbrechen.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Die drei vergessenen Bänder
   -----------------------------------------------------------------------------
   `.news` (/informationen/ und /aktuelles/), `.cabin-request` (/kontakt/) und
   `.single-news` (jeder Beitrag) stehen in keiner der Listen aus harbeck.css.
   Folge im Bild: der Seitentitel sitzt 25px unter der Brotkrume und stößt fast
   an sie an, während er auf /anhaenger/, /miettrailer/ und /ueber-uns/ 73px
   Luft hat. Auf dem Beitrag beginnt sogar das Aufmacherfoto direkt unter dem
   Pfad. Dieselbe Zeile Innenabstand wie bei den übrigen Abschnitten setzt die
   drei Seiten wieder auf dasselbe Maß.
   -------------------------------------------------------------------------- */
.stil-harbeck #content > .news,
.stil-harbeck #content > .cabin-request,
.stil-harbeck #content > .single-news {
  padding-block: clamp(54px, 36px + 2.6vw, 88px);
}

/* /informationen/ war die einzige der geprüften Seiten ohne ein einziges Band:
   weißer Pfad, weißer Kopf, weiße Karten, weiße Fußzeile — eine durchgehende
   Fläche ohne jede Gliederung. Das Vorbild stellt seine Beitragskacheln genau
   umgekehrt auf: weiße Karten auf einem grauen Band («News & Events»). Damit
   liegt der Seitenkopf hier auf demselben Grau wie auf den Schwesterseiten. */
.stil-harbeck #content > .news {
  background: var(--bf-bg-alt);
}


/* -----------------------------------------------------------------------------
   2. Kartenliste /informationen/: die Knöpfe auf eine Linie
   -----------------------------------------------------------------------------
   Die drei Kacheln der ersten Reihe sind gleich hoch, ihre «Mehr lesen»-Knöpfe
   standen aber auf drei verschiedenen Höhen — je nachdem, ob die Überschrift
   zwei oder drei Zeilen braucht. Bei der ersten Kachel saß der Knopf 21px
   tiefer als bei den beiden daneben, und unter den kürzeren Kacheln blieb Luft
   stehen. Der Knopf gehört an den unteren Rand der Karte, nicht an das Ende des
   Textes.
   -------------------------------------------------------------------------- */
.stil-harbeck .news__content {
  flex: 1 1 auto;
}
.stil-harbeck .news__link {
  margin-top: auto;
  padding-top: 9px;
}
/* Ohne Mindestabstand klebt der nach unten geschobene Knopf am Anschnitttext,
   sobald eine Kachel ihre Karte ganz ausfüllt. */
.stil-harbeck .news__desc {
  margin-bottom: 16px;
}


/* -----------------------------------------------------------------------------
   3. Brotkrume: auf dem Telefon fehlte ihr Anfang
   -----------------------------------------------------------------------------
   Unterhalb von 900px macht bunnefeld.css aus dem Pfad eine einzeilige
   Schiebespur (`overflow-x: auto`). Zusammen mit der Mittigkeit aus harbeck.css
   läuft ein langer Pfad dann nach BEIDEN Seiten über — und über den linken Rand
   hinaus lässt sich in Chrome nicht zurückschieben. Auf dem Beitrag stand
   deshalb nur «/ STÜTZLAST, ACHSLAST, NUTZLAST: DIE DREI», ohne «Startseite»
   und ohne «Informationen», rechts mitten im Wort abgeschnitten.

   Mittig bleibt der Pfad überall dort, wo er hineinpasst; sobald er länger wird
   als die Spur, beginnt er wieder links.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .stil-harbeck .breadcrumbs__list {
    justify-content: flex-start;
  }
  /* Bei kurzen Pfaden («Startseite / Kontakt») wäre linksbündig ein Rückfall in
     die alte Handschrift. `safe center` zentriert, solange nichts überläuft,
     und schaltet erst beim Überlauf auf links. Browser ohne diese Schreibweise
     verwerfen nur diese eine Zeile und behalten den linksbündigen Fall. */
  .stil-harbeck .breadcrumbs__list {
    justify-content: safe center;
  }
}


/* -----------------------------------------------------------------------------
   4. Rechtstexte: der Schluss fiel in die Fußzeile
   -----------------------------------------------------------------------------
   `#content > .title-block { padding-bottom: 0 }` aus harbeck.css ist für den
   SEO-Vorspann richtig — dort folgt gleich der Abschnitt, den er ankündigt.
   Auf Impressum, AGB, Widerruf und Datenschutz ist der `.title-block` aber der
   letzte und einzige Abschnitt der Seite. Die letzte Zeile («…umgehend
   entfernen.») lag dort auf der gerundeten Oberkante der Fußzeile auf, auf dem
   Telefon schnitt die Rundung sogar in die Zeile hinein.
   -------------------------------------------------------------------------- */
.stil-harbeck #content > .title-block.legal-page,
.stil-harbeck #content > .title-block:last-child {
  padding-bottom: clamp(54px, 36px + 2.6vw, 88px);
}

/* Die Zwischenüberschriften der Rechtstexte standen als einzige Schrift der
   ganzen Variante noch in «Inter» und in Halbfett 500 — main.css setzt das an
   `.title-block .text h2` und ist damit spezifischer als die Grundregel für
   h1–h6 aus harbeck.css. Neben dem Gabarito-700-Titel darüber sah das aus wie
   ein hineinkopierter Fremdtext. */
.stil-harbeck .title-block .text h2,
.stil-harbeck .title-block .text h3,
.stil-harbeck .title-block .text h4 {
  font-family: var(--bf-sans);
  font-weight: 700;
}

/* Die Öffnungszeiten im Impressum stehen in einer Tabelle ohne Zellabstand.
   Die erste Spalte war breiter als ihr Inhalt es zuließ, und im Bild las man
   «Montag bis Donnerstag08:00 – 17:00 Uhr» — zwei Angaben ohne Lücke. */
.stil-harbeck .title-block .text table {
  border-collapse: collapse;
}
.stil-harbeck .title-block .text th,
.stil-harbeck .title-block .text td {
  padding: 3px 28px 3px 0;
  vertical-align: top;
  text-align: left;
}
.stil-harbeck .title-block .text tr > *:last-child {
  padding-right: 0;
}


/* -----------------------------------------------------------------------------
   5. Anfrageformular /kontakt/: das Häkchen war nicht da
   -----------------------------------------------------------------------------
   Die Zustimmung zur Datenschutzerklärung ist Pflichtfeld. Contact Form 7 gibt
   aber ein blankes `<input type="checkbox">` ohne Klasse aus, während main.css
   sein Kästchen an `.cabin-request__agreement-input` hängt — der Selektor greift
   ins Leere. Übrig blieb ein Feld mit `appearance: none` und 0×0 Pixeln: im Bild
   stand nur der Satz «Ich stimme der Datenschutzerklärung zu…», ohne irgendetwas
   davor, das man anklicken könnte.

   Gezeichnet wird, was die Grundfassung gemeint hat — in den Maßen der Variante:
   runde Ecken, rote Fläche im gesetzten Zustand.
   -------------------------------------------------------------------------- */
.stil-harbeck .cabin-request__agreement input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--bf-steel-300);
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  transition: background-color .16s var(--bf-ease), border-color .16s var(--bf-ease);
}
.stil-harbeck .cabin-request__agreement input[type="checkbox"]:hover {
  border-color: var(--bf-signal);
}
.stil-harbeck .cabin-request__agreement input[type="checkbox"]:checked {
  border-color: var(--bf-signal);
  background-color: var(--bf-signal);
  /* Der Haken als Bild im Feld — ein ::before ist an einem `input` nicht
     zeichenbar, weil das Feld ein ersetztes Element ohne Inhalt ist. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.stil-harbeck .cabin-request__agreement input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--bf-signal);
  outline-offset: 2px;
}
/* Die Zeile richtet sich an der Mitte des Kästchens aus statt an seiner
   Oberkante — sonst hängt der 20px-Kasten über der ersten Textzeile. */
.stil-harbeck .cabin-request__agreement .wpcf7-list-item > label {
  align-items: center;
}

/* Die Kleinschrift über den Kontaktangaben («Beratung & Verkauf», «Adresse»,
   «Standort», «Telefon & E-Mail») steht in #8a8a8a. Auf dem Graufeld der
   Kontaktkarte und auf dem grauen Band des Kontaktblocks ergibt das bei 14px
   ein Verhältnis von 2,9:1 — die Zeilen verschwinden fast im Grund. #555555
   ist dieselbe Zurückhaltung bei 6,4:1 und bleibt lesbar. */
.stil-harbeck .cabin-request__contact-label,
.stil-harbeck .contact__location-label,
.stil-harbeck .contact__map-gate-label,
.stil-harbeck .contact__map-gate-note {
  color: var(--bf-steel-700);
}

/* «Karte laden» war der einzige schwarze Knopf auf allen sieben Seiten — ein
   Rest der bestehenden Gestaltung, in der Graphit die Hauptfläche ist. In der
   Variante ist die satte Fläche rot; auf dem grauen Band ist der Knopf zudem
   der einzige Punkt, auf den der Block hinausläuft. */
.stil-harbeck .contact__map-gate-button {
  border-color: var(--bf-btn);
  background: var(--bf-btn);
  color: #fff;
  font-weight: 700;
}
.stil-harbeck .contact__map-gate-button:hover {
  border-color: var(--bf-btn-hover);
  background: var(--bf-btn-hover);
  color: #fff;
}


/* -----------------------------------------------------------------------------
   6. Bild-Text-Reihen: eine leere Bildspalte und ein fehlender Umbruch
   -----------------------------------------------------------------------------
   Auf /miettrailer/ hat die zweite Reihe («So läuft die Miete») gar kein Bild —
   `.simple__media` steht als leerer Kasten im Markup. main.css fängt nur den
   Fall ab, dass die Spalte ganz fehlt (`.simple__content:only-child`). Am
   Rechner stand der Text deshalb in der rechten Hälfte und links lagen 580px
   weiße Fläche; auf dem Telefon wurde daraus eine 165px schmale Spalte am
   rechten Rand, in der jede Zeile drei- bis viermal umbrach.

   Ohne Bild wird die Reihe einspaltig: Titel mittig wie jeder Abschnittskopf
   der Variante, Fließtext linksbündig in einer mittig stehenden Lesespalte —
   dieselbe Aufteilung, die die Variante schon für die Rechtstexte benutzt.
   -------------------------------------------------------------------------- */
/* Geprüft: `:empty` greift hier nicht — Chrome zählt den Zeilenumbruch im
   leeren `<div>` als Inhalt. `:not(:has(.simple__media *))` fragt stattdessen,
   ob die Bildspalte irgendein Element enthält, und trifft auch den Fall, dass
   sie ganz fehlt. `:has()` darf dabei nicht in einem zweiten `:has()` stehen,
   sonst verwirft der Browser die ganze Regel. */
.stil-harbeck .simple__inner:not(:has(.simple__media *)) {
  justify-content: center;
}
.stil-harbeck .simple__inner:not(:has(.simple__media *)) > .simple__media {
  display: none;
}
.stil-harbeck .simple__inner:not(:has(.simple__media *)) > .simple__content {
  width: 100%;
  max-width: 68ch;
  margin-inline: auto;
  align-items: center;
}
.stil-harbeck .simple__inner:not(:has(.simple__media *)) > .simple__content > .title {
  text-align: center;
}
.stil-harbeck .simple__inner:not(:has(.simple__media *)) > .simple__content > .text {
  width: 100%;
}

/* harbeck.css dreht die Reihe mit `simple--reverse` auf `row-reverse`, damit
   die Fotos abwechselnd links und rechts stehen. Die Regel steht aber ohne
   Umgebungsabfrage und ist spezifischer als der Umbruch von main.css. Folge:
   auf dem Telefon blieben genau diese Reihen zweispaltig — auf /anhaenger/ und
   /miettrailer/ standen Foto und Text bei 390px nebeneinander in je 165px
   Breite. Untereinander gilt dieselbe Reihenfolge wie bei den anderen Reihen:
   erst das Foto, dann der Text. */
@media (max-width: 768px) {
  .stil-harbeck .simple--reverse .simple__inner {
    flex-direction: column-reverse;
  }
}


/* -----------------------------------------------------------------------------
   7. Aufruf-Block: die Naht zwischen Rot und Foto
   -----------------------------------------------------------------------------
   Der Block steht auf /anhaenger/, /miettrailer/ und /ueber-uns/ jeweils als
   Abschluss. Er soll eine einzige Kachel mit 20px Ecken sein, halb rot, halb
   Foto. bunnefeld.css gibt der roten Hälfte aber zusätzlich eigene 10px
   (`.cta, .cta__inner, .cta__content, .cta__card`), und die runden Innenecken
   schneiden einen weißen Schlitz in die Naht: zwei Flächen mit unterschiedlich
   runden Ecken statt einer Kachel. Innerhalb der beschnittenen Karte braucht
   die Hälfte keinen eigenen Radius — das Foto daneben hat aus demselben Grund
   schon in harbeck.css keinen mehr.
   -------------------------------------------------------------------------- */
.stil-harbeck .cta__content {
  border-radius: 0;
}

/* Unter 768px stehen die Hälften übereinander. Die Foto-Hälfte hat dort nur
   `min-height`, und eine Mindesthöhe reicht nicht aus, damit die `height: 100%`
   des Fotos aus harbeck.css rechnen kann: das Bild blieb bei seiner
   Eigenhöhe, unter ihm stand ein 39px hoher weißer Streifen, und weil das Foto
   nicht bis zur Kachelkante reichte, wurde es von ihr auch nicht rund
   beschnitten — es endete mit zwei harten Ecken. Eine feste Höhe macht die
   Prozentangabe wieder auflösbar. */
@media (max-width: 768px) {
  .stil-harbeck .cta__media {
    height: 240px;
  }
}
/* =============================================================================
   Harbeck-Variante — Nachlese: Fußbereich und Formulare
   -----------------------------------------------------------------------------
   Diese Datei sammelt, was sich am gerenderten Bild gezeigt hat: geprüft wurden
   Startseite, /kontakt/, /mein-konto/ (samt Passwort-Seite), der Anfrage-Dialog
   und der Fuß auf Shop, Kategorie, Informationen und Warenkorb — jeweils am
   Rechner (1440) und am Telefon (390), dazu die Zwischenbreiten 600 bis 1200.

   Der Fuß selbst steht gut: das dunkle Band trägt, die runde Oberkante schneidet
   sowohl gegen Weiß (Startseite, Katalog) als auch gegen das graue Schlussband
   (/kontakt/) sauber ab. Die Fehler stecken in den Kleinigkeiten — in der
   Rechtszeile ganz unten und vor allem in den Formularen, wo mehrere Regeln aus
   Teil 4 an der Spezifität hängengeblieben sind und deshalb nie gegriffen haben.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Rechtszeile ganz unten
   -----------------------------------------------------------------------------
   Die Pflichtangaben standen mit 60 % Weiß auf dem Dunkelfeld #454545. Das ergibt
   ein sehr helles Grau auf mittlerem Grau — nachgerechnet 4,66:1, also gerade so
   über der Grenze und im Bild deutlich blasser als alles andere im Fuß. Bei einer
   Zeile, in der Umsatzsteuer- und Handelsregisternummer stehen, ist «gerade so
   lesbar» zu wenig. Mit 78 % steigt der Wert auf rund 6,4:1, ohne dass die Zeile
   der Adressspalte darüber die Aufmerksamkeit wegnimmt.
   -------------------------------------------------------------------------- */
.stil-harbeck .bff__bar-inner {
  color: rgba(255, 255, 255, .78);
}

/* Die drei Angaben lagen als Flex-Zeile mit `margin-left: auto` auf der letzten:
   auf dem Rechner klebte «Alle Preise inkl. MwSt.» am rechten Rand, während die
   beiden anderen links standen. Sobald die Zeile umbrach — unterhalb von rund
   910px, also schon auf dem Tablet — rutschte diese dritte Angabe allein in eine
   zweite Zeile und blieb dort rechtsbündig hängen. Auf dem Telefon standen alle
   drei untereinander, die letzte davon als einzige rechts. Das sah nach Versehen
   aus, nicht nach Satz. Mittig gesetzt steht die Zeile auf jeder Breite gleich
   und folgt zugleich der Haltung des Vorbilds, das alles auf die Mittelachse legt.
   -------------------------------------------------------------------------- */
.stil-harbeck .bff__bar-inner {
  justify-content: center;
  text-align: center;
  gap: 6px 22px;
}
.stil-harbeck .bff__vat {
  margin-left: 0;
}

/* Der Rand der Kennzahlen-Pillen stand auf 28 % Weiß und kam damit auf 2,5:1
   gegen den Ink-Grund — im Bild sind die Pillen dadurch eher zu erahnen als zu
   sehen. Die Schrift darin ist hell genug, die Form selbst war es nicht. */
.stil-harbeck .bff__facts span {
  border-color: rgba(255, 255, 255, .4);
}


/* -----------------------------------------------------------------------------
   2. Sichtbarer Fokus in Formularen und im Fuß
   -----------------------------------------------------------------------------
   bundle.css schaltet mit `*, ::after, ::before { outline: none !important }`
   jeden Fokusring der Seite ab. Wer sich mit der Tabulatortaste durch das
   Anfrageformular bewegt, sieht deshalb nichts — bei den Feldern immerhin noch
   den roten Rahmen aus Teil 4, beim Absendeknopf, beim Häkchen und bei den
   Verweisen im Fuß gar nichts. Das ist der einzige Ort in dieser Datei, an dem
   `!important` unvermeidlich ist: gegen ein `!important` kommt Spezifität nicht
   an. `:focus-visible` sorgt dafür, dass der Ring nur bei Tastaturbedienung
   erscheint und der Mausklick unverändert bleibt.
   -------------------------------------------------------------------------- */
.stil-harbeck .cabin-request__input:focus-visible,
.stil-harbeck .cabin-request__textarea:focus-visible,
.stil-harbeck .cabin-request__submit:focus-visible,
.stil-harbeck .cabin-request__agreement input[type="checkbox"]:focus-visible,
.stil-harbeck .price-request-popup__input:focus-visible,
.stil-harbeck .price-request-popup__submit:focus-visible,
.stil-harbeck .price-request-popup__close:focus-visible,
.stil-harbeck .form-success-popup__close:focus-visible,
.stil-harbeck .price-request-popup__agreement-input:focus-visible ~ .price-request-popup__agreement-box,
.stil-harbeck body.woocommerce-account .woocommerce input.input-text:focus-visible,
.stil-harbeck body.woocommerce-account .woocommerce button:focus-visible,
.stil-harbeck body.woocommerce-account .woocommerce input[type="submit"]:focus-visible {
  outline: 2px solid var(--bf-signal) !important;
  outline-offset: 2px;
  border-radius: inherit;
}

/* Im Fuß liegt dieselbe Signalfarbe auf Ink knapp über 3:1 und wäre als dünner
   Ring kaum zu erkennen. Auf dunklem Grund markiert Weiß den Fokus deutlicher. */
.stil-harbeck .bff a:focus-visible,
.stil-harbeck .bff__logo:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px;
  border-radius: 0;
}


/* -----------------------------------------------------------------------------
   3. Das Häkchen der Datenschutz-Zustimmung auf /kontakt/
   -----------------------------------------------------------------------------
   Vor «Ich stimme der Datenschutzerklärung zu» stand im Bild schlicht nichts.
   Contact Form 7 gibt ein natives Kästchen ohne eigene Klasse aus, und bundle.css
   nimmt allen Feldern mit `button, input, select { appearance: none; background:
   none; border: none }` die Darstellung weg — das Kästchen misst dadurch 0×0.
   Die `accent-color`-Regel aus Teil 4 konnte daran nichts ändern: sie färbt eine
   Darstellung, die es nicht mehr gibt. Ohne sichtbares Kästchen kann niemand
   zustimmen, und ohne Zustimmung nimmt das Formular die Anfrage nicht an.

   `appearance: auto` holt die native Darstellung zurück, `accent-color` färbt
   den Haken in der Signalfarbe. Ein nachgebautes Kästchen wäre hier das größere
   Risiko — das native bringt den Haken und die Tastaturbedienung schon mit.
   -------------------------------------------------------------------------- */
.stil-harbeck .cabin-request__agreement input[type="checkbox"],
.stil-harbeck .wpcf7-acceptance input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--bf-signal);
  cursor: pointer;
}

/* Die Zeile daneben ist ein Inline-Block ohne eigene Ausrichtung; damit Kästchen
   und erste Textzeile auf einer Höhe sitzen, bekommt sie eine Flex-Zeile. */
.stil-harbeck .cabin-request__agreement .wpcf7-list-item,
.stil-harbeck .cabin-request__agreement .wpcf7-list-item > label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}


/* -----------------------------------------------------------------------------
   4. Das Häkchen im Anfrage-Dialog
   -----------------------------------------------------------------------------
   Hier gibt es ein nachgebautes Kästchen, aber es misst 14px und trägt einen
   Rand in #cbd5e1 — ein bläuliches Hellgrau, das gegen Weiß auf 1,5:1 kommt und
   im Bild fast verschwindet. Es ist außerdem die einzige Stelle im Entwurf mit
   einem blaustichigen Grau; die Variante rechnet sonst durchweg neutral.
   -------------------------------------------------------------------------- */
.stil-harbeck .price-request-popup__agreement-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--bf-steel-500);
  border-radius: 0;
}
.stil-harbeck .price-request-popup__agreement-input:checked ~ .price-request-popup__agreement-box {
  border: 1px solid var(--bf-signal);
  background: var(--bf-signal);
}
.stil-harbeck .price-request-popup__agreement-input:checked ~ .price-request-popup__agreement-box::after {
  left: 6px;
  top: 2.5px;
  width: 5px;
  height: 9px;
  border-color: #fff;
}


/* -----------------------------------------------------------------------------
   5. Die runden Feldrahmen, die nie ankamen
   -----------------------------------------------------------------------------
   Teil 4 setzt die einzeiligen Felder auf die Pillenform — im Browser blieben sie
   aber bei 10px. Grund ist die Spezifität: harbeck.css sortiert weiter oben alle
   Feldtypen über `.stil-harbeck input[type="text"]` (Klasse + Typ + Attribut) auf
   `--bf-radius`, und das schlägt die spätere Regel `.stil-harbeck
   .cabin-request__input` (zwei Klassen). Sichtbar wurde das als gemischte Ecken
   innerhalb eines einzigen Formulars: 10px an den Feldern, 20px am Textfeld
   darunter, 35px am Absendeknopf. Genau die Dopplung, die das Vorbild nie zeigt.

   Die Kette bekommt deshalb eine dritte Klasse — der Bereichsname des Formulars.
   Damit greift die Absicht aus Teil 4, ohne dass die Suchzeile im Kopf oder die
   Filter im Shop mitgezogen werden; die gehören anderen Dateien.
   -------------------------------------------------------------------------- */
.stil-harbeck .cabin-request .cabin-request__input,
.stil-harbeck .price-request-popup .price-request-popup__input {
  border-radius: var(--hb-radius-pill);
}
/* Das mehrzeilige Feld bleibt bei der Kartenkante: eine Pille um sechs Zeilen
   Text wäre keine Pille mehr, sondern ein Schlauch. */
.stil-harbeck .price-request-popup textarea.price-request-popup__input {
  border-radius: var(--hb-radius-card);
}


/* -----------------------------------------------------------------------------
   6. Der Anfrage-Dialog lief auf dem Telefon aus seiner Karte
   -----------------------------------------------------------------------------
   Bei 390px standen «E-Mail» und «Telefonnummer» weiter nebeneinander, und das
   Telefonfeld ragte 86px über den rechten Kartenrand hinaus — im Bild ist es
   mitten im Wort abgeschnitten. Die Zeile ist Flex ohne Umbruch, und die Felder
   haben keine Breitenangabe; ein Texteingabefeld bringt rund 190px Eigenbreite
   mit, und `min-width: auto` verhindert, dass sie darunter schrumpfen.
   Beides zusammen zu lösen genügt: die Felder dürfen schrumpfen und füllen
   ihre Spalte aus. Auf dem Rechner ändert sich dadurch nichts.
   -------------------------------------------------------------------------- */
.stil-harbeck .price-request-popup__field {
  min-width: 0;
}
.stil-harbeck .price-request-popup__input {
  width: 100%;
}
/* Unter 480px wird aus der Zweierzeile eine Spalte — zwei Felder nebeneinander
   ergeben dort Eingabeflächen, die für einen Daumen zu schmal sind. */
@media (max-width: 480px) {
  .stil-harbeck .price-request-popup__row {
    flex-direction: column;
    gap: 16px;
  }
}


/* -----------------------------------------------------------------------------
   7. Das zweite Rot in den Formularen
   -----------------------------------------------------------------------------
   In den Formularen steckt an mehreren Stellen noch das Rot des Ursprungs-Themes:
   die Fehlerzeile im Anfrage-Dialog und der gesetzte Haken ziehen ihre Farbe aus
   `--color-primary` (#D7161E), das Pflichtfeld-Sternchen bei WooCommerce sogar
   aus einem dritten Rot (#AA0000). Auf der Anmeldeseite steht dieses dunkle
   Sternchen zwei Zeilen über dem Knopf in #DF242B — zwei fast gleiche Rottöne
   übereinander sieht man sofort. Teil 4 hat dieselbe Sache auf der Produktseite
   schon einmal aufgeräumt, in den Formularen blieb sie stehen.

   Die Variable wird nur innerhalb der Formularbereiche umgesetzt statt global:
   so bleibt alles, was außerhalb liegt, in der Hand der übrigen Dateien.
   -------------------------------------------------------------------------- */
.stil-harbeck .cabin-request,
.stil-harbeck .price-request-popup,
.stil-harbeck .form-success-popup,
.stil-harbeck body.woocommerce-account .woocommerce,
.stil-harbeck .bff {
  --color-primary: var(--bf-signal);
}
.stil-harbeck body.woocommerce-account .woocommerce .required,
.stil-harbeck body.woocommerce-account .woocommerce abbr.required {
  color: var(--bf-signal);
  border-bottom: 0;
  text-decoration: none;
}


/* -----------------------------------------------------------------------------
   8. Die Beschriftungen im grauen Kontaktfeld
   -----------------------------------------------------------------------------
   «BERATUNG & VERKAUF» und «LIEBER ANRUFEN» stehen in `--bf-steel-500` (#8a8a8a).
   Solange das Feld weiß war, kam das auf 3,5:1; seit Teil 4 die Fläche auf das
   Grau der Variante legt, sind es nur noch 2,95:1 — im Bild sind die beiden
   Zeilen kaum noch da. Eine Stufe dunkler bringt 6,4:1 und lässt die Rangfolge
   unverändert: die Beschriftung bleibt leiser als die Anschrift darunter.
   -------------------------------------------------------------------------- */
.stil-harbeck .cabin-request__contact .cabin-request__contact-label {
  color: var(--bf-steel-700);
}


/* -----------------------------------------------------------------------------
   9. Rückmeldung des Formular-Plugins
   -----------------------------------------------------------------------------
   Contact Form 7 färbt den Meldungskasten nach Zustand: Blau im Ruhezustand,
   Gelb bei fehlenden Pflichtfeldern, Orange bei Spamverdacht, ein eigenes Rot
   bei Serverfehlern. Teil 4 hat den Kasten in Form gebracht, die Farben aber
   nicht angefasst — nach einer fehlgeschlagenen Anfrage stünde also ein gelb
   umrandeter Kasten unter einem Formular, dessen Palette Rot, Grau und Weiß
   kennt. Fehler bekommen die Signalfarbe, Erfolg das Grün, das im Theme schon
   für die Erfolgsmeldung des Dialogs benutzt wird.
   -------------------------------------------------------------------------- */
.stil-harbeck .wpcf7 form .wpcf7-response-output {
  border-color: var(--bf-steel-300);
  color: var(--bf-ink);
}
.stil-harbeck .wpcf7 form.invalid .wpcf7-response-output,
.stil-harbeck .wpcf7 form.unaccepted .wpcf7-response-output,
.stil-harbeck .wpcf7 form.payment-required .wpcf7-response-output,
.stil-harbeck .wpcf7 form.spam .wpcf7-response-output,
.stil-harbeck .wpcf7 form.failed .wpcf7-response-output,
.stil-harbeck .wpcf7 form.aborted .wpcf7-response-output {
  border-color: var(--bf-signal);
  color: var(--bf-signal);
}
.stil-harbeck .wpcf7 form.sent .wpcf7-response-output {
  border-color: #468432;
  color: #2f5d21;
}


/* -----------------------------------------------------------------------------
   10. Anmeldeseite: fremde Schrift und blasse Verweise
   -----------------------------------------------------------------------------
   Auf /mein-konto/ tragen «Angemeldet bleiben» und «Passwort vergessen?» noch
   die Schriftangabe `"Inter"` aus dem Ursprungs-Theme. bunnefeld.css leitet
   diesen Namen auf IBM Plex Sans um, also stehen mitten im Anmeldeformular zwei
   Zeilen in einer anderen Schrift als die Feldnamen darüber — im vergrößerten
   Bild an den Buchstaben g und a klar zu sehen. Das Vorbild kennt genau eine
   Schrift.

   «Passwort vergessen?» steht zudem in #8a8a8a auf Weiß: 3,45:1, für 14px zu
   wenig. Der Verweis wird ohnehin nur gesucht, wenn man ihn braucht — dann muss
   er lesbar sein.
   -------------------------------------------------------------------------- */
.stil-harbeck body.woocommerce-account .woocommerce,
.stil-harbeck body.woocommerce-account .woocommerce label,
.stil-harbeck body.woocommerce-account .woocommerce span,
.stil-harbeck body.woocommerce-account .woocommerce a,
.stil-harbeck body.woocommerce-account .woocommerce p {
  font-family: var(--bf-sans);
}
.stil-harbeck body.woocommerce-account .woocommerce-LostPassword a {
  color: var(--bf-steel-700);
}
.stil-harbeck body.woocommerce-account .woocommerce-LostPassword a:hover {
  color: var(--bf-ink);
}


/* -----------------------------------------------------------------------------
   11. Eine Handschrift für alle Feldnamen
   -----------------------------------------------------------------------------
   Das Anfrageformular auf /kontakt/ setzt seine Feldnamen seit Teil 4 versal mit
   Laufweite — so, wie das Vorbild seine Kleinschrift durchgängig baut. Der
   Anfrage-Dialog und die Anmeldeseite blieben bei gemischter Schreibung in
   halbfett. Nebeneinander gehalten wirken das drei verschiedene Formulare
   derselben Seite. Hier gilt für alle drei dieselbe Regel.
   -------------------------------------------------------------------------- */
.stil-harbeck .price-request-popup__label,
.stil-harbeck body.woocommerce-account .woocommerce .form-row > label,
.stil-harbeck body.woocommerce-account .woocommerce-form-row > label {
  font-family: var(--bf-sans);
  font-size: var(--bf-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bf-steel-700);
}
/* =============================================================================
   Abschluss: die durchgehenden Befunde
   -----------------------------------------------------------------------------
   Was die sechs Prüfungen unabhängig voneinander in ihren Bereichen gemeldet
   haben, aber keiner allein reparieren konnte, weil es an einer gemeinsamen
   Stelle sitzt.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Lesbarkeit der Nebenschrift
   -----------------------------------------------------------------------------
   Der Entwurf hatte zwei Werte gleichzeitig verschoben: die Nebenschrift wurde
   heller (#767674 → #8a8a8a) und ihr Grund dunkler (#f3f3f2 → #ededed). Beides
   zusammen ergibt 2,9:1 — die Technikangaben in den Produktkacheln, die
   Trefferzahl im Filter und die Pflichtangabe «inkl. MwSt.» waren praktisch
   nicht mehr zu entziffern. Drei Prüfer haben denselben Fall unabhängig
   gemeldet.

   Statt an einem Dutzend Stellen nachzubessern wird der Wert selbst
   zurückgenommen: #6f6f6f trägt auf Weiß 5,3:1 und auf #ededed 4,6:1 und liegt
   damit über der Schwelle für Fließtextgrößen. Die graue Fläche bleibt bei
   #ededed, weil sie vom Vorbild abgenommen ist.
   -------------------------------------------------------------------------- */
.stil-harbeck {
  --bf-steel-500: #6f6f6f;
}

/* -----------------------------------------------------------------------------
   Nur ein Rot
   -----------------------------------------------------------------------------
   Das Wortzeichen liegt als PNG in #d7161e vor — das ist die Hausfarbe. Der
   Entwurf hatte für die Signalfarbe das bei Harbeck abgenommene #df242b
   eingesetzt, und in der gescrollten Kopfleiste standen beide Töne rund 250px
   nebeneinander. Zwei fast gleiche Rot sehen nicht nach Absicht aus, sondern
   nach Fehler.

   Hier gewinnt die Marke des Kunden, nicht die Vorlage: die Variante übernimmt
   Form und Haltung von Harbeck, aber nicht dessen Rot.
   -------------------------------------------------------------------------- */
.stil-harbeck {
  --bf-signal:      #d7161e;
  --bf-signal-dark: #a81117;
  --bf-btn:         #d7161e;
  --bf-btn-hover:   #a81117;
  --hb-rot-verlauf: linear-gradient(100deg, #cf1420 0%, #d7161e 100%);
}

/* -----------------------------------------------------------------------------
   Rote Schrift auf rotem Grund (19.09.2026, noch offen von der Meldung 08.09.)
   -----------------------------------------------------------------------------
   `a:hover { color: var(--bf-signal) }` (bunnefeld.css) hat die Spezifität
   (0,1,1) und schlägt jede Knopfregel, die ihre Schrift nur über eine einzelne
   Klasse setzt (0,1,0) — `.products__button { color:#fff }` (main.css) und
   `.contact__location-phone { color:#fff }` (main.css) sind genau solche
   Regeln, keine von beiden hat einen eigenen `:hover`-Farbwert. Ausserhalb
   dieser Variante war das unsichtbar, weil `--bf-signal` dort dunkelrot und
   der Knopfgrund fast schwarz ist (`--bf-btn:#1a1a19`). Hier oben ist
   `--bf-signal` und `--bf-btn` **derselbe Ton** — beim Überfahren wird die
   Schrift auf dem Knopf unsichtbar:
     - Startseite, „Zum Shop" (`.products__button`): #d7161e Schrift auf
       #d7161e Fläche, Kontrast 1:1.
     - /kontakt/, „Jetzt anrufen" (`.contact__location-phone`): #d7161e Schrift
       auf #a81117 Fläche (Hover-Grund), Kontrast 1.24:1.
   Fix nach demselben Muster wie brumm-digital.de (siehe dortiges Paket
   2026-09-01-knopf-hover-visited): der Schrift ihre Knopffarbe mit höherer
   Spezifität zurückgeben, nicht `a:hover` selbst anfassen. */
.stil-harbeck .products__button:hover,
.stil-harbeck .contact__location-phone:hover {
  color: #fff;
}

/* -----------------------------------------------------------------------------
   Einzelne Nachzügler
   -------------------------------------------------------------------------- */

/* «SHOP» stand als einzige Überschrift der Variante links: `.shop__head` ist
   eine Flex-Spalte mit `align-items: flex-start`, gegen die eine reine
   `text-align`-Regel nichts ausrichtet. */
.stil-harbeck .shop__head {
  align-items: center;
  text-align: center;
}

/* Das Mengenfeld in der Produktkachel blieb eckig: die eigene Grundregel der
   Variante für `input[type="number"]` (0,2,1) schlägt die Klassenregel (0,2,0).
   Der Weg über die Karte hebt die Spezifität, ohne !important zu brauchen. */
.stil-harbeck .shop__card .shop__qty-input,
.stil-harbeck .bf-cart .shop__qty-input {
  border-radius: var(--hb-radius-pill);
}

/* «Zur Kasse» in der Warenkorb-Schublade war ein rechteckiger roter Block direkt
   über einer Pille — bunnefeld.css führt den Knopf in ihrer großen
   `border-radius: 0 !important`-Gruppe für die WooCommerce-Bauteile. Dagegen
   hilft nur dieselbe Gewichtung. */
.stil-harbeck a.button.checkout,
.stil-harbeck .bf-cart__actions .button,
.stil-harbeck .wc-block-cart__submit-button {
  border-radius: var(--hb-radius-pill) !important;
}

/* Die Überschrift der Warenkorbseite trug noch die alte Geste: linksbündig
   unter einem kurzen roten Strich, während in der Variante alle Seitentitel auf
   der Mittelachse stehen. */
.stil-harbeck .wp-block-woocommerce-cart .wc-block-cart__main > h1,
.stil-harbeck .woocommerce-cart-form + h1,
.stil-harbeck .entry-title.cart-title {
  text-align: center;
}

/* Die Mengenpfeile in der Kachel waren mit 1px #e3e3e3 auf Weiß praktisch
   unsichtbar (1,2:1) — man sah nur die Chevrons schweben. Bedienelemente
   brauchen 3:1 gegen ihren Grund. */
.stil-harbeck .shop__qty-btn {
  border-color: var(--bf-steel-300);
}
.stil-harbeck .shop__qty-btn:hover {
  border-color: var(--bf-ink);
}

/* -----------------------------------------------------------------------------
   Der Text im Seitenkopf
   -----------------------------------------------------------------------------
   Mit dem Schweißvideo lag der Text auf einer dunklen Fläche. Der Winterhafen
   ist erheblich heller — Wasser und Himmel liegen um 55 % Helligkeit, und die
   zweite Zeile des Vorspanns stand über der hellsten Stelle. Der Verlauf des
   Entwurfs fasst nur oben und unten an und lässt die Mitte frei, weil der Text
   dort mittig sitzt.

   Statt das ganze Bild abzudunkeln (dann wäre der Hafen wieder grau) liegt der
   Schleier nur unter dem Textblock: ein weicher dunkler Kern, der zu den
   Rändern hin auf null läuft. Das Bild bleibt links und rechts offen.
   -------------------------------------------------------------------------- */
.stil-harbeck .hero--video .hero__head::after {
  background:
    radial-gradient(ellipse 66% 62% at 50% 50%,
      rgba(20, 24, 27, .74) 0%,
      rgba(20, 24, 27, .52) 45%,
      rgba(20, 24, 27, 0) 80%),
    linear-gradient(180deg,
      rgba(20, 24, 27, .55) 0%,
      rgba(20, 24, 27, .14) 26%,
      rgba(20, 24, 27, .14) 74%,
      rgba(20, 24, 27, .45) 100%);
}

/* Seit dem 31.08.2026 steht im Kopf die Aufnahme von der Slipanlage, und deren
   hellste Stelle — der weiße Bootsrumpf — liegt genau hinter der Überschrift.
   Gemessen kam die weiße Schrift dort auf 1,4:1 am Telefon und 4,1:1 am
   Rechner. Am Telefon ist der Ausschnitt enger, der Rumpf füllt mehr Fläche:
   dort braucht es zusätzlich eine gleichmäßige Deckschicht. */
@media (max-width: 767px) {
  .stil-harbeck .hero--video .hero__head::after {
    background:
      radial-gradient(ellipse 96% 62% at 50% 48%,
        rgba(20, 24, 27, .80) 0%,
        rgba(20, 24, 27, .62) 52%,
        rgba(20, 24, 27, .34) 86%),
      linear-gradient(180deg,
        rgba(20, 24, 27, .52) 0%,
        rgba(20, 24, 27, .30) 30%,
        rgba(20, 24, 27, .30) 70%,
        rgba(20, 24, 27, .55) 100%);
  }
}


/* -----------------------------------------------------------------------------
   80. «Warum bunnefeld» mit Zeichnungen
   -----------------------------------------------------------------------------
   Vorher trug jede Karte oben einen roten Kreis mit einer Ziffer — vier gleiche
   rote Punkte, die nichts erzählen. Der Kunde wollte die Vorteile «moderner und
   bildlicher, visuell mit Icons». Jetzt steht dort eine Zeichnung in derselben
   Sprache wie die Einsatzbereiche: Kontur in Tinte, genau ein Teil in Rot.

   Die Ziffer bleibt, aber als kleine Marke neben der Zeichnung statt als
   Hauptdarsteller: sie ordnet, sie wirbt nicht.
   -------------------------------------------------------------------------- */
.stil-harbeck .reasons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stil-harbeck .reasons__item-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  border-radius: 0;
  background: var(--bf-bg-alt);
}
.stil-harbeck .reasons__item-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--bf-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stil-harbeck .reasons__item-icon .reason__akzent {
  stroke: var(--bf-signal);
}
/* Aus dem roten Kreis wird eine Ziffer, die sich zurücknimmt. */
.stil-harbeck .reasons__item-number,
.stil-harbeck .reasons__number {
  width: auto;
  height: auto;
  margin-top: 16px;
  border-radius: 0;
  background: none;
  color: var(--bf-steel-500);
  font-family: var(--bf-mono, monospace);
  font-size: var(--bf-fs-xs);
  letter-spacing: .18em;
}
.stil-harbeck .reasons__item-number::before { content: "— "; }

/* Unter 1100px steht das Wortzeichen mittig und die Symbolgruppe wächst von
   rechts in es hinein: gemessen bei 390px überdeckte der Instagram-Knopf das
   Zeichen um 44px, der Facebook-Knopf um 31px — mit weißem Grund, also
   blickdicht. Die Regel dazu steht in bunnefeld.css, verliert dort aber gegen
   `.stil-harbeck .bfh__action` (eine Klasse mehr). Deshalb hier noch einmal.
   Die Kanäle bleiben über den Fußbereich erreichbar. */
@media (max-width: 1100px) {
  .stil-harbeck .bfh__action--social { display: none; }
}

@media (max-width: 859px) {
  .stil-harbeck .reasons__item-icon { width: 64px; height: 64px; margin-bottom: 14px; }
  .stil-harbeck .reasons__item-icon svg { width: 34px; height: 34px; }
}


/* =============================================================================
   Variante «Harbeck» — Teil 12: eckig und aneinander
   -----------------------------------------------------------------------------
   Kundenwunsch 25.08.2026, wörtlich: «Bilder eher so wie bei brenderup eckig
   und aneinander, einfach moderner.» Darin stecken zwei Anweisungen. Die erste
   — die Kante — ist oben im Variablenblock erledigt: --hb-radius-card,
   --hb-radius-pill und --bf-radius stehen auf 0, damit fällt die Rundung im
   ganzen Haus weg. Hier folgt die zweite: die Kacheln stoßen aneinander,
   statt einzeln auf Abstand zu stehen.

   Warum das mehr ist als ein kleinerer Abstand: eine Reihe freistehender
   Karten liest man als vier Gegenstände, ein zusammenhängendes Raster als eine
   Tafel. Genau daraus entsteht bei brenderup die Ruhe — ein Bildblock, von
   Haarlinien geteilt, ohne Schatten und ohne Anheben beim Überfahren. Das
   Anheben muss deshalb mit weg: eine Kachel, die sich aus einem geschlossenen
   Raster heraushebt, reißt ein Loch hinein.

   Bauweise überall gleich: der Abstand geht auf 0, jede Kachel trägt ihre
   Trennlinie rechts und unten, das Raster schließt oben und links ab. So
   stimmt das Bild auch, wenn die letzte Zeile nicht voll ist — ein Rahmen um
   das ganze Raster würde dort in die Luft zeichnen. Fotoraster (projects)
   brauchen gar keine Linie: dort stoßen die Bilder selbst aneinander.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   12.1 Einsatzbereiche auf der Startseite
   -------------------------------------------------------------------------- */
.stil-harbeck .segmente__grid {
  gap: 0;
  border-top: 1px solid var(--bf-line);
  border-left: 1px solid var(--bf-line);
}
.stil-harbeck .segment {
  border: 0;
  border-right: 1px solid var(--bf-line);
  border-bottom: 1px solid var(--bf-line);
}
/* Das Überfahren zeigt sich als rote Kante oben. Sie liegt innen (`inset`),
   das Raster verrutscht dadurch um keinen Pixel. */
.stil-harbeck .segment:hover {
  transform: none;
  box-shadow: inset 0 3px 0 var(--bf-signal);
  background: #fff;
}
.stil-harbeck .segment:hover .segment__name { color: var(--bf-signal); }

/* Das Zeichenfeld saß als graues Rechteck mit Rand ringsum in der weißen
   Kachel — eine Kiste in einer Kiste, genau die Anmutung, die der Kunde
   «altmodisch» genannt hat. Bei brenderup läuft das Bild bis an die Kante der
   Kachel und der Text steht darunter. Also: Polster von der Kachel nehmen und
   den Texten geben, das Bildfeld füllt die volle Breite. */
.stil-harbeck .segment { padding: 0 0 24px; }
.stil-harbeck .segment__bild {
  margin: 0 0 18px;
  padding: 20px 24px;
  aspect-ratio: 2 / 1.15;
}
.stil-harbeck .segment__name,
.stil-harbeck .segment__text,
.stil-harbeck .segment__link { margin-inline: 20px; }

@media (max-width: 859px) {
  .stil-harbeck .segment { padding: 0 0 20px; }
  .stil-harbeck .segment__bild { padding: 16px 18px; }
  .stil-harbeck .segment__name,
  .stil-harbeck .segment__text,
  .stil-harbeck .segment__link { margin-inline: 16px; }
}
@media (max-width: 520px) {
  .stil-harbeck .segment { padding: 0 0 16px; }
  .stil-harbeck .segment__bild { margin-bottom: 12px; padding: 12px 14px; }
  .stil-harbeck .segment__name,
  .stil-harbeck .segment__text,
  .stil-harbeck .segment__link { margin-inline: 12px; }
}

/* -----------------------------------------------------------------------------
   12.2 «Warum bunnefeld»
   -------------------------------------------------------------------------- */
.stil-harbeck .reasons__items {
  gap: 0;
  border-top: 1px solid var(--bf-line);
  border-left: 1px solid var(--bf-line);
}
.stil-harbeck .reasons__item {
  border: 0;
  border-right: 1px solid var(--bf-line);
  border-bottom: 1px solid var(--bf-line);
  background: #fff;
}

/* Aus dem kleinen Symbolfeld wird ein Bildband über der ganzen Kachelbreite —
   dieselbe Form wie bei den Einsatzbereichen weiter oben auf der Seite. Ein
   76px-Kästchen mitten in einer 300px breiten Kachel war ein Fleck; als Band
   trägt es die Kachel, und die vier Kacheln ergeben nebeneinander eine
   durchgehende Zeile aus Zeichnungen. Genau das meint «bildlicher darstellen»
   aus der Änderungsliste. */
.stil-harbeck .reasons__item { padding: 0 0 30px; }
.stil-harbeck .reasons__item-icon {
  order: -2;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1.05;
  margin: 0 0 20px;
  /* Nicht --bf-bg-alt: die Sektion selbst steht auf genau diesem Grau (gemessen
     rgb(237,237,237)), das Band wäre unsichtbar. Eine Stufe dunkler trennt es
     vom Band der Sektion, ohne eine zweite Farbe einzuführen. */
  background: #e3e3e3;
}
.stil-harbeck .reasons__item-icon svg { width: 76px; height: 76px; }
.stil-harbeck .reasons__item-info,
.stil-harbeck .reasons__item-number { margin-inline: 24px; }

@media (max-width: 859px) {
  .stil-harbeck .reasons__item { padding: 0 0 24px; }
  .stil-harbeck .reasons__item-icon { width: 100%; height: auto; margin-bottom: 16px; }
  .stil-harbeck .reasons__item-icon svg { width: 60px; height: 60px; }
  .stil-harbeck .reasons__item-info,
  .stil-harbeck .reasons__item-number { margin-inline: 18px; }
}

/* -----------------------------------------------------------------------------
   12.3 Produktreihe «Sofort ab Lager» und «Ähnliche Modelle»
   -----------------------------------------------------------------------------
   Die Reihe ist ein Swiper, kein Raster: der Abstand zwischen den Karten kommt
   aus `spaceBetween` in main.js und steht dort auf 0. Übrig bleibt die
   Trennlinie und der Innenabstand — ohne ihn würden Titel und Preis zweier
   Karten über die Haarlinie hinweg aneinanderkleben. Das Foto bleibt bündig
   an der Kante, es ist die Fläche, die die Kachel trägt.
   -------------------------------------------------------------------------- */
.stil-harbeck .products__gallery { border-left: 1px solid var(--bf-line); }
.stil-harbeck .products__card {
  padding-bottom: 22px;
  border-top: 1px solid var(--bf-line);
  border-right: 1px solid var(--bf-line);
  border-bottom: 1px solid var(--bf-line);
  background: #fff;
}
.stil-harbeck .products__card > :not(.products__image-wrap) {
  margin-left: 20px;
  margin-right: 20px;
}
/* Dieselbe Bühne wie im Shop: grauer Grund, ganzes Fahrzeug, kein Beschnitt.
   Vorher stand hier ein 29:30-Ausschnitt mit „cover" — bei einem 6 m langen
   Anhänger schneidet ein fast quadratischer Rahmen vorn und hinten je ein
   Stück ab. */
.stil-harbeck .products__image-wrap {
  aspect-ratio: 3 / 2;
  background: var(--bf-bg-alt);
}
.stil-harbeck .products__image {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  background: transparent;
}
.stil-harbeck .products__image-wrap--frei { padding: 18px 18px 6px; }
.stil-harbeck .products__image--frei { object-fit: contain; }

/* -----------------------------------------------------------------------------
   12.4 Shop-Raster
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__grid {
  gap: 0;
  border-top: 1px solid var(--bf-line);
  border-left: 1px solid var(--bf-line);
}
.stil-harbeck .shop__card {
  border: 0;
  border-right: 1px solid var(--bf-line);
  border-bottom: 1px solid var(--bf-line);
}
.stil-harbeck .shop__card:hover {
  transform: none;
  box-shadow: inset 0 3px 0 var(--bf-signal);
}

/* -----------------------------------------------------------------------------
   12.5 Kategorien auf /anhaenger/ — die Kacheln, die der Kunde gemeint hat
   -----------------------------------------------------------------------------
   Sechs Anhängerfotos in einem Raster: hier steht der Wunsch am wörtlichsten.
   Die Fotos stoßen ohne Linie aneinander, die Beschriftung bekommt den
   Innenabstand, den vorher der Rasterabstand geliefert hat.
   -------------------------------------------------------------------------- */
.stil-harbeck .categories__grid { gap: 0; }
.stil-harbeck .categories__item {
  padding-bottom: 22px;
  border-right: 1px solid var(--bf-line);
  border-bottom: 1px solid var(--bf-line);
  background: #fff;
}
.stil-harbeck .categories__item:hover {
  transform: none;
  box-shadow: inset 0 3px 0 var(--bf-signal);
}
.stil-harbeck .categories__content { padding: 18px 20px 0; }

/* -----------------------------------------------------------------------------
   12.6 Fotoraster: Referenzwand und Galerien
   -----------------------------------------------------------------------------
   Bilder an Bildern, ohne Fuge. Eine Trennlinie zwischen zwei Fotos wäre hier
   ein Zaun; die Bildkanten selbst sind die Gliederung.
   -------------------------------------------------------------------------- */
.stil-harbeck .projects__gallery,
.stil-harbeck .projects__gallery-col,
.stil-harbeck .projects--masonry .projects__masonry { gap: 0; }
.stil-harbeck .projects__gallery:not(:last-of-type) { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   12.7 Nachzügler: was im Haus noch rund war
   -----------------------------------------------------------------------------
   Nachgemessen im Browser über alle sichtbaren Elemente (Startseite,
   /anhaenger/, /shop/, Produktseite, je 1440 und 390px): nach der Umstellung
   auf Kante blieben genau diese drei Stellen rund. Die Pfeilknöpfe der
   Produktreihe und der Zähler am Warenkorb kommen aus dem Ursprungs-Theme;
   das Zustimmungsfenster liefert Complianz mit — es ist das erste, was ein
   Besucher sieht, und darf als einziges Bauteil der Seite keine Ausnahme sein.
   -------------------------------------------------------------------------- */
.stil-harbeck .products__nav-btn,
.stil-harbeck .bfh__badge { border-radius: 0; }

.stil-harbeck .cmplz-cookiebanner,
.stil-harbeck .cmplz-cookiebanner .cmplz-btn,
.stil-harbeck .cmplz-cookiebanner input[type="checkbox"],
.stil-harbeck .cmplz-cookiebanner .cmplz-categories .cmplz-category { border-radius: 0 !important; }


/* =============================================================================
   Variante «Harbeck» — Teil 13: der Seitenkopf, gebaut wie beim Vorbild
   -----------------------------------------------------------------------------
   Auftrag: «Хедер бери с того сайта» — also harbeck.de, und zwar nicht dem
   Eindruck nach, sondern nachgemessen. Aufgenommen am 02.09.2026 bei 1440px:

     Leiste     position: fixed, 90px hoch, Grund rgba(0,0,0,0) — VOLLSTÄNDIG
                durchsichtig; sie schwimmt auf dem Film
     Navigation links ab x=24, 14px, Gewicht 400, weiß, KEINE Versalien
     Wortzeichen mittig
     Symbole    rechts, je 40x40, ohne Rahmen, ohne Fläche, ohne Kreis
     Film       beginnt bei Bildzeile 0, 1440x720, object-fit: cover
     Schrift    LINKS bei x=50, vier Zeilen:
                  «SEIT 1942»            36px / 400 / weiß
                  «IHR SPEZIALIST FÜR»   ~56px / 700 / weiß
                  «ANHÄNGER UND TRAILER» ~56px / 700 / ROT
                  «AUS WAGING AM SEE»    31px / 500 / weiß
     Knöpfe     keine
     Abschluss  rotes Band unten

   Bei uns lag bisher eine weiße, undurchsichtige Leiste ÜBER dem Kopfbild: das
   Bild begann erst bei Bildzeile 127, die Schrift stand mittig, darunter zwei
   Knöpfe. Genau daran liest man den Unterschied zwischen einer Katalogseite und
   einem Auftritt — beim Vorbild ist das Erste, was man sieht, das Fahrzeug.

   Der Kundenwunsch vom 25.08. («Der weiße Header soll von Anfang an fixiert
   sein und beim Scrollen mitlaufen») ist damit nicht verletzt, sondern erfüllt:
   fest ist die Leiste ab dem ersten Bildpunkt. Sie hat nur keinen weißen Grund,
   solange nichts unter ihr durchläuft — genau wie beim Vorbild. Sobald gescrollt
   wird, wird sie weiß und deckend.

   Teil 10.3 weiter oben beschreibt den vorherigen Stand und bleibt als Beleg
   stehen; die Regeln hier stehen später in der Datei und gewinnen.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   13.1 Die Leiste schwimmt auf dem Bild
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .bfh.bfh--ueber {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  transition: background .25s var(--bf-ease);
}
.stil-harbeck body.home .bfh.bfh--ueber .bfh__bar {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Solange die Leiste auf dem Film liegt, ist alles darin weiß. Das Wortzeichen
   ist rot auf Dunkelgrau und wäre auf dem Film weder lesbar noch schön — als
   reine weiße Form ist es beides. `brightness(0)` macht daraus erst Schwarz,
   `invert(1)` dann Weiß; das ist der übliche Weg, ein mehrfarbiges Logo ohne
   zweite Datei einzufärben. */
.stil-harbeck body.home .bfh.bfh--ueber:not(.is-stuck) .bfh__menu > li > a,
.stil-harbeck body.home .bfh.bfh--ueber:not(.is-stuck) .bfh__action,
.stil-harbeck body.home .bfh.bfh--ueber:not(.is-stuck) .bfh__burger {
  color: #fff;
}
.stil-harbeck body.home .bfh.bfh--ueber:not(.is-stuck) .bfh__logo img {
  filter: brightness(0) invert(1);
}
/* Die Unterstreichung des aktiven Punktes ist rot und bleibt es — sie ist auf
   dem dunklen Film der einzige Farbpunkt der Leiste. */

/* Gescrollt: weiß, deckend, mit Schatten. Ab hier ist es wieder die Leiste,
   die jede andere Seite auch trägt. */
.stil-harbeck body.home .bfh.bfh--ueber.is-stuck {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(20, 24, 27, .10);
}

/* Symbole ohne Kasten — beim Vorbild sind es reine Zeichen, 40x40, kein Rahmen,
   keine Fläche. Der Kasten um jedes Symbol war das, was unsere Leiste nach
   Baukasten aussehen ließ. */
.stil-harbeck .bfh__action {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
}
.stil-harbeck .bfh__action:hover {
  border-color: transparent;
  color: var(--bf-signal);
}
.stil-harbeck body.home .bfh.bfh--ueber:not(.is-stuck) .bfh__action:hover {
  color: var(--bf-signal);
}

/* Der Burger trägt am Telefon einen weißen Kasten mit grauer Kante — auf dem
   Film war das der einzige helle Fleck in der Leiste. Auch er wird zum reinen
   Zeichen; gemessen hatte er background: rgb(255,255,255) und eine 1px-Kante. */
.stil-harbeck body.home .bfh.bfh--ueber:not(.is-stuck) .bfh__burger {
  background: transparent;
  border-color: transparent;
}

/* -----------------------------------------------------------------------------
   13.2 Der Film füllt den Kopf
   -----------------------------------------------------------------------------
   Das Vorbild gibt der Bühne 720px bei 1440px Breite (1:2). Wir rechnen in
   Bildschirmhöhe, damit auf einem flachen Notebook nicht der ganze erste
   Bildschirm aus Video besteht: 84vh, gedeckelt bei 780px.
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .hero--video .hero__head {
  min-height: min(84vh, 780px);
  display: flex;
  align-items: center;
}
.stil-harbeck body.home .hero--video .hero__inner {
  min-height: 0;
  padding-top: clamp(96px, 9vw, 132px);   /* Platz für die schwebende Leiste */
  padding-bottom: clamp(40px, 4vw, 64px);
  display: flex;
  align-items: center;
}

.stil-harbeck .hero__stage-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Das Plakat liegt als Grund der Bühne: es steht, bevor der Film geladen ist,
   und es bleibt stehen, wenn jemand Bewegung abbestellt hat.

   07.09.2026: hier stand noch `hero-hafentrailer.webp` — das Plakat des ALTEN
   Films. Beim Wechsel auf `hero-hafen-orbit` (Teil «Video») ist diese eine
   Zeile stehen geblieben. Folge: wer Bewegung abbestellt hat, bekam den Film
   gar nicht zu sehen (Regel darunter) und stattdessen das alte Standbild —
   also genau die Aufnahme, die ersetzt werden sollte. Dazu 219 KB, die
   niemand braucht. */
.stil-harbeck .hero__stage {
  background: #14181b url("../video/hero-hafen-orbit.webp") center / cover no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .stil-harbeck .hero__stage-film { display: none; }
}

/* Der Schleier ist links am dichtesten — dort steht die Schrift — und oben
   kräftig genug, dass die weiße Navigation auf dem hellen Laub lesbar bleibt.
   Rechts bleibt der Anhänger frei; sonst hätte man den Film auch weglassen
   können. */
.stil-harbeck body.home .hero--video .hero__head::after {
  background:
    linear-gradient(90deg,
      rgba(17, 17, 17, .90) 0%,
      rgba(17, 17, 17, .78) 34%,
      rgba(17, 17, 17, .38) 66%,
      rgba(17, 17, 17, .14) 100%),
    linear-gradient(180deg,
      rgba(17, 17, 17, .58) 0%,
      rgba(17, 17, 17, .10) 22%,
      rgba(17, 17, 17, 0) 40%);
}

/* -----------------------------------------------------------------------------
   13.3 Die Schrift steht links, in vier Zeilen
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .hero--video .hero__content {
  align-items: flex-start;
  text-align: left;
  max-width: 820px;
  margin-inline: 0;
  gap: 14px;
}

.stil-harbeck .hero__vorzeile {
  font-family: var(--bf-cond);
  font-size: clamp(19px, 12px + 1.1vw, 32px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

.stil-harbeck body.home .hero--video .hero__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(32px, 17px + 2.9vw, 58px);
  line-height: 1.04;
  letter-spacing: .01em;
  color: #fff;
}
/* Die zweite Zeile trägt die Farbe des Hauses — beim Vorbild ist es die Zeile
   mit dem Produkt, bei uns die mit dem Ort. Getrennt wird in der Vorlage am
   Gedankenstrich des Titels. */
.stil-harbeck .hero__title-zeile--signal { color: var(--bf-signal); }

.stil-harbeck body.home .hero--video .hero__text {
  max-width: 54ch;
  margin-inline: 0;
  color: rgba(255, 255, 255, .86);
  font-size: var(--bf-fs-base);
}
.stil-harbeck body.home .hero--video .hero__actions {
  justify-content: flex-start;
  margin-top: 8px;
}

/* -----------------------------------------------------------------------------
   13.4 Am Telefon
   -----------------------------------------------------------------------------
   Der Film ist 2,35:1. In einen hohen Ausschnitt gezogen bliebe vom Anhänger
   ein Streifen übrig, deshalb ist die Bühne dort flacher — und die Leiste wird
   sofort deckend, weil über dem Burger sonst zu wenig Fläche liegt.
   -------------------------------------------------------------------------- */
/* Nachgemessen am hellsten Bildpunkt unter jedem Textkasten (der Anhänger ist
   verzinkt und damit fast weiß — er läuft im Film quer durch die Überschrift).
   Bei 768 und 390px kam die Überschrift auf 2,5:1 und der Vorspann auf 2,2:1;
   nötig sind 3:1 für große und 4,5:1 für laufende Schrift.

   Bis 1023px steht der Text deshalb UNTEN statt mittig, und der Schleier ist
   dort, wo er steht, kräftig — oben bleibt der Anhänger frei. Ein gleichmäßig
   dunkler Schleier über dem ganzen Bild hätte dieselbe Lesbarkeit gebracht und
   den Film mit erschlagen. */
@media (max-width: 1023px) {
  .stil-harbeck body.home .hero--video .hero__head {
    min-height: min(78vh, 620px);
    align-items: flex-end;
  }
  .stil-harbeck body.home .hero--video .hero__inner {
    padding-top: clamp(92px, 22vw, 128px);
    padding-bottom: clamp(26px, 4vw, 40px);
    align-items: flex-end;
  }
  .stil-harbeck body.home .hero--video .hero__head::after {
    background:
      linear-gradient(180deg,
        rgba(17, 17, 17, .44) 0%,
        rgba(17, 17, 17, .26) 12%,
        rgba(17, 17, 17, .86) 28%,
        rgba(17, 17, 17, .92) 100%);
  }
}


/* =============================================================================
   Variante «Harbeck» — Teil 14: Menü, Knöpfe, Blöcke
   -----------------------------------------------------------------------------
   Nach dem neuen Seitenkopf standen die Blöcke darunter noch in der alten
   Ordnung da: alles innerhalb einer 1.240px-Spalte, Bilder als Rechtecke mit
   Luft ringsum, Knöpfe in drei verschiedenen Größen. Der Kopf war damit der
   einzige Teil der Seite, der wie ein Auftritt aussah.

   Drei Hebel, in dieser Reihenfolge wirksam:
     1. Bilder bis an den Bildschirmrand statt in die Spalte gesperrt.
        Das ist der Unterschied, den man ohne Vergleich sieht.
     2. Eine Knopfgröße für das ganze Haus statt drei.
     3. Bewegung, die aus dem Material kommt (Linie wächst, Pfeil rückt),
        nicht aus Schatten und Anheben.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   14.1 Navigation
   -----------------------------------------------------------------------------
   Bisher: `border-bottom: 3px solid transparent`, beim Überfahren springt die
   Linie in einem Bild von unsichtbar auf rot. Das ist die billigste Art, ein
   Menü zu markieren. Jetzt wächst sie aus der Seite, auf der der Zeiger
   ankommt, und schrumpft zur anderen zurück.

   Der Pfeil der Untermenüs sitzt bereits auf `::after`, die Linie muss
   deshalb auf `::before`.
   -------------------------------------------------------------------------- */
.stil-harbeck .bfh__menu > li > a {
  position: relative;
  padding-bottom: 9px;
  border-bottom-color: transparent;
  letter-spacing: .06em;
}
.stil-harbeck .bfh__menu > li > a:hover,
.stil-harbeck .bfh__menu > li.current-menu-item > a,
.stil-harbeck .bfh__menu > li.current-menu-ancestor > a {
  border-bottom-color: transparent;
}
.stil-harbeck .bfh__menu > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bf-signal);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.stil-harbeck .bfh__menu > li > a:hover::before,
.stil-harbeck .bfh__menu > li.current-menu-item > a::before,
.stil-harbeck .bfh__menu > li.current-menu-ancestor > a::before {
  transform: scaleX(1);
  transform-origin: left center;
}
/* Der Pfeil am Elternpunkt kippt, wenn die Liste offen ist — sonst ist die
   einzige Rückmeldung das Aufklappen selbst. */
.stil-harbeck .bfh__menu > li.menu-item-has-children > a::after {
  transition: transform .25s var(--bf-ease);
}
.stil-harbeck .bfh__menu > li.menu-item-has-children:hover > a::after,
.stil-harbeck .bfh__menu > li.menu-item-has-children.is-open > a::after {
  transform: translateY(-4px) rotate(225deg);
}

/* Das Untermenü war eine weiße Fläche mit weichem Schatten. Als scharfe Karte
   mit Haarlinie gehört es zum Rest des Hauses; die Punkte bekommen beim
   Überfahren einen roten Balken an der Kante statt einer Farbänderung. */
.stil-harbeck .bfh__menu .sub-menu {
  padding: 8px 0;
  border: 1px solid var(--bf-line);
  box-shadow: 0 24px 48px -24px rgba(20, 24, 27, .35);
}
.stil-harbeck .bfh__menu .sub-menu a {
  position: relative;
  padding-left: 22px;
  transition: background .18s var(--bf-ease), color .18s var(--bf-ease);
}
.stil-harbeck .bfh__menu .sub-menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--bf-signal);
  transform: scaleY(0);
  transition: transform .2s var(--bf-ease);
}
.stil-harbeck .bfh__menu .sub-menu a:hover {
  background: var(--bf-bg-alt);
  color: var(--bf-ink);
}
.stil-harbeck .bfh__menu .sub-menu a:hover::before { transform: scaleY(1); }

/* -----------------------------------------------------------------------------
   14.2 Eine Knopfgröße für das ganze Haus
   -----------------------------------------------------------------------------
   Gemessen standen nebeneinander: 42px im Kopf, 48px im Seitenkopf, 56px in der
   Produktreihe. Drei Größen für dieselbe Handlung. Jetzt 52px überall, 46px im
   Kopf (dort ist die Leiste knapp) — mit weiter Sperrung, wie beim Vorbild.
   -------------------------------------------------------------------------- */
.stil-harbeck .btn,
.stil-harbeck .hero__btn,
.stil-harbeck .cta__btn,
.stil-harbeck .projects__btn,
.stil-harbeck .reasons__button,
.stil-harbeck .shop__more-btn,
.stil-harbeck .simple__btn,
.stil-harbeck .products__button:not(.products__button--mobile),
.stil-harbeck .products__button-transparent,
.stil-harbeck a.btn--primary,
.stil-harbeck button[type="submit"],
.stil-harbeck .single_add_to_cart_button {
  height: 52px;
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .22s var(--bf-ease), color .22s var(--bf-ease),
              border-color .22s var(--bf-ease);
}
.stil-harbeck .bfh__cta {
  height: 46px;
  padding: 0 24px;
  font-size: 14px;
  letter-spacing: .1em;
}
/* Der Pfeil rückt beim Überfahren eine Spur nach rechts. Mehr Bewegung braucht
   ein Knopf nicht — Anheben und Schatten sind das, was die Seite alt aussehen
   ließ. */
.stil-harbeck .hero__btn--transparent::after,
.stil-harbeck .simple__btn::after,
.stil-harbeck .reasons__button::after {
  transition: transform .24s var(--bf-ease);
}
.stil-harbeck .hero__btn--transparent:hover::after,
.stil-harbeck .simple__btn:hover::after,
.stil-harbeck .reasons__button:hover::after {
  transform: translateX(4px);
}

/* -----------------------------------------------------------------------------
   14.3 Kopfzeile der Produktreihe
   -----------------------------------------------------------------------------
   Titel und Knopf standen mit `align-items: normal` auf verschiedenen Höhen,
   der Knopf schwebte oben rechts über dem Vorspann. Auf einer Linie gelesen
   sind es zwei Teile einer Zeile.
   -------------------------------------------------------------------------- */
.stil-harbeck .products__head {
  align-items: flex-end;
  gap: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bf-line);
}
.stil-harbeck .products__head-left { max-width: 62ch; }
.stil-harbeck .products__button-transparent { flex: none; }

/* -----------------------------------------------------------------------------
   14.4 «Über uns»: das Foto läuft bis an den Bildschirmrand
   -----------------------------------------------------------------------------
   Das Bild maß 574x431 und saß mit Luft ringsum in der Spalte — ein Rechteck
   auf grauem Grund. Bis an den Rand gezogen wird daraus eine Fläche, die die
   Seite trägt. `margin-right: calc(50% - 50vw)` ist der übliche Weg: die
   Spalte ist mittig, also ist der Abstand zum Fensterrand genau die halbe
   Differenz — und der Kasten wächst um genau diesen Betrag nach rechts.
   -------------------------------------------------------------------------- */
.stil-harbeck .simple:not(.simple--reverse) .simple__media {
  margin-right: calc(50% - 50vw);
  width: auto;
  align-self: stretch;
}
.stil-harbeck .simple--reverse .simple__media {
  margin-left: calc(50% - 50vw);
  width: auto;
  align-self: stretch;
}
.stil-harbeck .simple__image {
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 34vw, 520px);
  object-fit: cover;
}
.stil-harbeck .simple__inner { align-items: stretch; gap: clamp(32px, 4vw, 64px); }
.stil-harbeck .simple__content { align-self: center; }

/* -----------------------------------------------------------------------------
   14.5 «Anfrage senden»: die Kachel über die volle Breite
   -----------------------------------------------------------------------------
   Bisher eine 1.208px breite Karte mit weißem Rand ringsum. Beim Vorbild und
   bei brenderup enden solche Flächen am Bildschirmrand — die Farbe wird zur
   Zone, nicht zum Kasten. Der Text bleibt trotzdem auf der Satzkante der
   Seite stehen: `max(24px, (100vw - 1240px) / 2)` ist genau der Abstand, den
   die Spalte sonst auch hat.
   -------------------------------------------------------------------------- */
.stil-harbeck .cta > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.stil-harbeck .cta__card {
  min-height: clamp(420px, 38vw, 560px);
  align-items: stretch;
}
.stil-harbeck .cta__content {
  padding: clamp(36px, 4vw, 64px) clamp(28px, 4vw, 64px);
  padding-left: max(24px, calc((100vw - 1240px) / 2));
  justify-content: center;
}
.stil-harbeck .cta__media { align-self: stretch; }
.stil-harbeck .cta__image { width: 100%; height: 100%; object-fit: cover; }
.stil-harbeck .cta__title {
  font-size: clamp(28px, 16px + 1.6vw, 42px);
  line-height: 1.08;
}

/* -----------------------------------------------------------------------------
   14.6 Die Zeichnungen tragen ihre Felder
   -----------------------------------------------------------------------------
   In den Einsatzbereichen füllte die Zeichnung 240 von 288px Feldbreite, in
   «Warum bunnefeld» 76 von 300. Beide Felder sind Bildflächen — dann soll
   auch ein Bild darin stehen und kein Zeichen in der Mitte.
   -------------------------------------------------------------------------- */
.stil-harbeck .segment__bild { padding: 14px 16px; }
.stil-harbeck .reasons__item-icon svg { width: 96px; height: 96px; }
@media (max-width: 859px) {
  .stil-harbeck .reasons__item-icon svg { width: 72px; height: 72px; }
}

/* `display: inline-flex` aus 14.2 hätte den Knopf, den das Ursprungs-Theme nur
   am Telefon zeigt (`.products__button--mobile { display: none }`), auch am
   Schreibtisch eingeblendet — er stand dann zweimal auf der Seite. Die Maße
   bekommt er trotzdem, nur eben ohne `display`. */
@media (max-width: 768px) {
  .stil-harbeck .products__button--mobile {
    height: 52px;
    padding: 0 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    align-items: center;
  }
}

/* Der Fließtext in der roten Kachel stand auf 72 % Weiß. Über #d7161e ergibt
   das gerechnet 3,2:1 — für laufende Schrift sind 4,5:1 nötig. Auf 94 % sind
   es 4,7:1, und die Zeile bleibt trotzdem eine Stufe leiser als die
   Überschrift daneben. */
.stil-harbeck .cta__text,
.stil-harbeck .cta__text p { color: rgba(255, 255, 255, .94); }


/* =============================================================================
   Variante «Harbeck» — Teil 15: Ordnung
   -----------------------------------------------------------------------------
   Im Browser nachgezählt, was auf der Startseite tatsächlich stand:

     Überschriften   58 / 38 / 30 / 30 / 30 / 39 px — sechs Größen
     Ausrichtung     links, mittig, mittig, links, links, links — gemischt
     Sektionsabstand 96 / 64 / 73 / 73 / 73 px — vier Werte
     Augenbraue      nur in einem von fünf Abschnitten

   Das ist kein Stilproblem, das ist ein fehlendes System. Eine Seite wirkt
   nicht hochwertig, weil ein einzelner Block schön ist, sondern weil sich
   von oben bis unten dieselben drei Maße wiederholen. Also:

     ein Abstand    --bf-abschnitt
     ein Titelgrad  --bf-titel
     eine Kante     alle Abschnittsköpfe linksbündig, alle mit rotem Marker

   Der Marker gab es in der Grundfassung schon (bunnefeld.css, «Kurzer roter
   Marker über der Überschrift»); die Variante hatte ihn mit `content: none`
   abgeschaltet, weil dort alles mittig stand. Mit linksbündigen Köpfen ist er
   wieder das, wofür er gedacht war: dieselbe Signatur über jedem Abschnitt.
   ============================================================================= */

.stil-harbeck {
  --bf-abschnitt: clamp(76px, 7vw, 124px);
  --bf-titel: clamp(30px, 17px + 1.5vw, 44px);
}

/* -----------------------------------------------------------------------------
   15.1 Ein Abstand für alle Abschnitte
   -------------------------------------------------------------------------- */
/* `#content` muss mit in den Selektor: die Bandregel in Teil 9 adressiert
   `.stil-harbeck #content > .simple` und gewinnt sonst über die Kennung. */
.stil-harbeck body.home #content > .segmente,
.stil-harbeck body.home #content > .products,
.stil-harbeck body.home #content > .simple,
.stil-harbeck body.home #content > .reasons,
.stil-harbeck body.home #content > .cta {
  padding-top: var(--bf-abschnitt);
  padding-bottom: var(--bf-abschnitt);
}

/* -----------------------------------------------------------------------------
   15.2 Ein Titelgrad, eine Kante
   -------------------------------------------------------------------------- */
.stil-harbeck body.home h2.title,
.stil-harbeck body.home .segmente__title,
.stil-harbeck body.home .cta__title {
  font-size: var(--bf-titel);
  line-height: 1.06;
  letter-spacing: .02em;
  text-align: left;
  margin-inline: 0;
}

/* Der rote Marker kommt zurück — jetzt über JEDEM Abschnittskopf, auch über
   den beiden, die ihn in der Grundfassung nie hatten. */
.stil-harbeck body.home .simple h2.title::before,
.stil-harbeck body.home .reasons h2.title::before,
.stil-harbeck body.home .products h2.title::before,
.stil-harbeck body.home .segmente__eyebrow::before,
.stil-harbeck body.home .cta__title::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 0 0 18px;
  background: var(--bf-signal);
}
/* In der roten Kachel wäre Rot auf Rot unsichtbar. */
.stil-harbeck body.home .cta__title::before { background: #fff; }

/* Die Mittigkeit der Variante gilt weiter für Innenseiten; auf der Startseite
   steht jetzt alles auf einer Kante — dieselbe, auf der auch der Seitenkopf
   beginnt. */
.stil-harbeck body.home .segmente__eyebrow,
.stil-harbeck body.home .segmente__lead {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.stil-harbeck body.home .segmente__lead { max-width: 64ch; }
.stil-harbeck body.home .reasons__list { align-items: stretch; }
.stil-harbeck body.home .reasons .title { align-self: flex-start; }

/* Der Vorspann der Produktreihe stand mittig unter einem linksbündigen Titel. */
.stil-harbeck body.home .products__head-left .text,
.stil-harbeck body.home .products__head-left p { text-align: left; }

/* -----------------------------------------------------------------------------
   15.3 Größere Kacheln
   -----------------------------------------------------------------------------
   Fünf Kacheln nebeneinander ergaben auf 1.240px je 240px Breite — darin steht
   eine Zeichnung von 208px und ein Text mit vier Wörtern je Zeile. Drei in der
   ersten Reihe, zwei in der zweiten (je anderthalb Spalten breit) verdoppelt
   die Fläche je Kachel, ohne das Raster zu brechen: gerechnet wird in sechs
   Spalten, jede Kachel nimmt zwei, die letzten beiden drei.
   -------------------------------------------------------------------------- */
/* (Die 3+2-Aufteilung stand hier bis 02.09. — sie ist mit Teil 16.1
   hinfällig: die Kategorien stehen jetzt als fünf gleiche Spalten ohne
   Kachel.) */

/* Vier Karten pro Reihe waren im Shop 288px breit — mit Foto, Titel, zwei
   Chips, Preis und Mengenwähler darin. Drei geben jeder Karte 390px. */
@media (min-width: 1181px) {
  .stil-harbeck .shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stil-harbeck .shop__card-info { padding: 24px 24px 6px; }
  .stil-harbeck .shop__card-actions { padding: 0 24px 24px; }
  .stil-harbeck .shop__card-title { font-size: 21px; }
}

/* Die vier Karten unter «Warum bunnefeld» standen als Letztes noch mittig —
   in einer Reihe, in der alles andere auf der linken Kante steht. Der Text
   rückt mit; das Bildband darüber bleibt mittig, weil dort eine Zeichnung
   steht und kein Satz. */
.stil-harbeck body.home .reasons__item {
  align-items: flex-start;
  text-align: left;
}
.stil-harbeck body.home .reasons__item-info { align-items: flex-start; text-align: left; }
.stil-harbeck body.home .reasons__item-title { text-align: left; }
.stil-harbeck body.home .reasons__item-icon { justify-items: center; }

/* Zwischen 521 und 859px stehen zwei Spalten und fünf Kacheln — die fünfte
   stand allein in der linken Spalte, daneben ein Loch. Sie läuft über beide,
   wie es unterhalb von 520px ohnehin schon der Fall ist. */


/* =============================================================================
   Variante «Harbeck» — Teil 16: die Startseite nach dem Vorbild gebaut
   -----------------------------------------------------------------------------
   Auftrag: «смотри сайт конкурента — давай сделаем 1в1». Also die Startseite
   von harbeck.de am 02.09.2026 bei 1440px aufgenommen und Abschnitt für
   Abschnitt nachgebaut. Ihre Reihenfolge dort:

     1 Film mit Text links            → haben wir (Teil 13)
     2 rotes Band                     → haben wir (hero__bar)
     3 Produktreihe, freigestellt     → haben wir (Teil 12.3)
     4 Kategorien: NUR Bild + Zeile   ← 16.1
     5 zwei Sparten über Kreuz        ← 16.2
     6 Bildergalerie                  → später

   Das Auffällige an 4 und 5: keine Karten. Bei uns steckte jede Kategorie in
   einer Kachel mit Rahmen, Grundfläche, Beschreibung und Link — vier Ebenen
   Verpackung um eine Zeichnung. Beim Vorbild steht das Fahrzeug frei auf Weiß
   und darunter eine Versalzeile. Mehr nicht. Genau so hat es der Kunde in
   der Änderungsliste beschrieben: «übersichtlich auf einen Blick».
   ============================================================================= */

/* -----------------------------------------------------------------------------
   16.1 Kategorien: Zeichnung und Zeile, sonst nichts
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .segmente__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  border: 0;
}
.stil-harbeck body.home .segment {
  position: relative;
  grid-column: auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}
.stil-harbeck body.home .segment:hover { box-shadow: none; background: none; }
.stil-harbeck body.home .segment__bild {
  margin: 0;
  padding: 0;
  aspect-ratio: 3 / 2;
  background: none;
}
.stil-harbeck body.home .segment__name {
  margin: 16px 0 0;
  font-family: var(--bf-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}
/* Beschreibung und Zweitlink fallen weg — beim Vorbild trägt die Zeile allein.
   Der Link bleibt als Fläche über der ganzen Kachel liegen, damit die
   Zeichnung anklickbar ist und der Linktext den Namen für Vorleser behält. */
.stil-harbeck body.home .segment__text { display: none; }
.stil-harbeck body.home .segment__link {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  align-self: stretch;
}
.stil-harbeck body.home .segment__link::after { content: none; }
.stil-harbeck body.home .segment:hover .segment__name { color: var(--bf-signal); }
.stil-harbeck body.home .segment:hover .segment__kontur { stroke: var(--bf-signal); }
.stil-harbeck body.home .segment__kontur { transition: stroke .2s var(--bf-ease); }

/* Der Kopf dieses Abschnitts steht beim Vorbild mittig über der Reihe. */
.stil-harbeck body.home .segmente__eyebrow,
.stil-harbeck body.home .segmente__title,
.stil-harbeck body.home .segmente__lead {
  text-align: center;
  margin-inline: auto;
}
.stil-harbeck body.home .segmente__eyebrow::before { margin-inline: auto; }

@media (max-width: 899px) {
  .stil-harbeck body.home .segmente__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .stil-harbeck body.home .segmente__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stil-harbeck body.home .segment:last-child { grid-column: 1 / -1; }
  .stil-harbeck body.home .segment:last-child .segment__bild { aspect-ratio: 12 / 5; }
}

/* -----------------------------------------------------------------------------
   16.2 Zwei Sparten über Kreuz
   -----------------------------------------------------------------------------
   Vier gleich große Felder, randlos über die volle Breite, ohne Fuge. Der Text
   sitzt in seinem Feld auf der Satzkante der Seite, damit er mit den
   Abschnitten darüber und darunter fluchtet.
   -------------------------------------------------------------------------- */
.schachbrett {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.schachbrett__feld {
  position: relative;
  min-height: clamp(320px, 30vw, 460px);
  display: flex;
}
.schachbrett__feld--rot { background: var(--bf-signal); }
.schachbrett__feld--dunkel { background: #3d3d3d; }
/* Ohne festes Seitenverhältnis bestimmt das Foto die Zeilenhöhe: gemessen war
   die untere Zeile bei 1440px 960px hoch, die obere 468px — ein Kreuz mit zwei
   verschiedenen Etagen. Mit 3:2 sind beide Zeilen gleich hoch, und der
   Textkasten daneben streckt sich mit. */
.schachbrett__feld--bild {
  background: var(--bf-bg-alt);
  aspect-ratio: 3 / 2;
}
.schachbrett__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.schachbrett__inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(32px, 3.4vw, 56px);
  margin: auto 0;
  max-width: 620px;
}
/* Das linke Textfeld beginnt auf der Satzkante der Seite, das rechte endet
   auf ihr — sonst stünde der Text im Kreuz weiter außen als überall sonst. */
.schachbrett__feld--rot .schachbrett__inhalt {
  padding-left: max(24px, calc((100vw - 1240px) / 2));
  margin-left: auto;
}
.schachbrett__feld--dunkel .schachbrett__inhalt {
  padding-right: max(24px, calc((100vw - 1240px) / 2));
}
.schachbrett__titel {
  margin: 0;
  font-family: var(--bf-cond);
  font-size: clamp(26px, 15px + 1.3vw, 38px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.schachbrett__text {
  margin: 0;
  max-width: 46ch;
  font-size: var(--bf-fs-sm);
  line-height: 1.65;
  color: rgba(255, 255, 255, .94);
}
.schachbrett__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(255, 255, 255, .45);
  font-family: var(--bf-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: border-color .22s var(--bf-ease);
}
.schachbrett__link::after { content: "→"; transition: transform .24s var(--bf-ease); }
.schachbrett__link:hover { border-bottom-color: #fff; }
.schachbrett__link:hover::after { transform: translateX(4px); }

/* Am Telefon steht das Kreuz als Folge: Text, Bild, Bild, Text. Zwei Spalten
   à 195px wären für 46 Zeichen je Zeile zu schmal. */
@media (max-width: 899px) {
  .schachbrett { grid-template-columns: minmax(0, 1fr); }
  .schachbrett__feld { min-height: 0; }
  .schachbrett__feld--bild { aspect-ratio: 4 / 3; }
  .schachbrett__feld--rot .schachbrett__inhalt,
  .schachbrett__feld--dunkel .schachbrett__inhalt {
    padding-left: clamp(20px, 5vw, 32px);
    padding-right: clamp(20px, 5vw, 32px);
  }
}

/* Das freigestellte Foto in der Kategoriereihe: es füllt das Feld nicht, es
   steht darin. `contain` plus Seitenverhältnis hält alle fünf Fahrzeuge auf
   derselben Grundlinie, egal wie lang sie sind. */
.stil-harbeck .segment__foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.stil-harbeck body.home .segment__bild { display: block; }
.stil-harbeck body.home .segment:hover .segment__foto {
  transform: scale(1.03);
}
.stil-harbeck .segment__foto { transition: transform .3s var(--bf-ease); }

/* Freigestellte Bilder im Kreuz stehen auf der Fläche, sie füllen sie nicht:
   `cover` würde einem 6 m langen Anhänger vorn und hinten je ein Stück
   abschneiden. */
.schachbrett__feld--bild { padding: clamp(24px, 3vw, 48px); }
.schachbrett__bild { object-fit: contain; }


/* =============================================================================
   Variante «Harbeck» — Teil 17: die fehlenden Abschnitte
   -----------------------------------------------------------------------------
   Die Startseite des Vorbilds hat vierzehn Abschnitte, unsere hatte sieben.
   Aufgenommen am 02.09.2026, die Liste in ihrer Reihenfolge:

      0 Film            1 Produktreihe      2 rotes Aktionsband
      3 Kopf mittig     4 Kategorien        5 Anspruch + zwei Aufnahmen
      6 News            7 Finanzierung      8 Bootsanhänger (rot)
      9 Nutzanhänger   10 Augenbraue+Titel 11 Bildwand
     12 Ausklapper     13 Kategorien im Fuß

   Vier davon fehlten uns ganz: 2, 5, 10 und 11. Sie stehen jetzt als eigene
   Blöcke im Theme. 6 und 7 bleiben aus: News hat der Betrieb nicht, und einen
   Finanzierungsrechner gibt es nicht — beides zu erfinden wäre Fassade.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   17.1 Rotes Aktionsband
   -------------------------------------------------------------------------- */
.aktion { padding: 0; }
.aktion__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(28px, 3vw, 44px) max(24px, calc((100vw - 1240px) / 2));
  background: linear-gradient(100deg, #7c0d13 0%, #c11420 52%, #d7161e 100%);
}
.aktion__bild { display: flex; justify-content: center; }
.aktion__foto {
  width: 100%;
  max-height: clamp(150px, 17vw, 230px);
  object-fit: contain;
  display: block;
}
.aktion__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.aktion__marke {
  font-family: var(--bf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.aktion__titel {
  margin: 0;
  font-family: var(--bf-cond);
  font-size: clamp(24px, 14px + 1.3vw, 36px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.aktion__satz {
  margin: 0;
  max-width: 52ch;
  font-size: var(--bf-fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, .94);
}
.aktion__knopf {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, .7);
  font-family: var(--bf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: background .22s var(--bf-ease), color .22s var(--bf-ease);
}
.aktion__knopf:hover { background: #fff; color: var(--bf-signal); border-color: #fff; }

@media (max-width: 899px) {
  .aktion__inner { grid-template-columns: minmax(0, 1fr); }
  .aktion__foto { max-height: 190px; }
}

/* -----------------------------------------------------------------------------
   17.2 Anspruch neben zwei Aufnahmen
   -------------------------------------------------------------------------- */
.marke { padding: var(--bf-abschnitt, 96px) 0; }
.marke__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 2.2vw, 28px);
  align-items: stretch;
}
.marke__kachel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 3vw, 48px);
  background: linear-gradient(150deg, #a5101a 0%, #d7161e 78%);
  color: #fff;
}
.marke__jahr {
  font-family: var(--bf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.marke__anspruch {
  margin: 0;
  font-family: var(--bf-cond);
  font-size: clamp(28px, 16px + 1.5vw, 42px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.marke__satz {
  margin: 0;
  font-size: var(--bf-fs-sm);
  line-height: 1.65;
  color: rgba(255, 255, 255, .94);
}
.marke__zahlen {
  display: grid;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .3);
}
.marke__zahlen div { display: flex; align-items: baseline; gap: 12px; }
.marke__zahlen dt {
  min-width: 96px;
  font-family: var(--bf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.marke__zahlen dd {
  margin: 0;
  font-family: var(--bf-cond);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
}

.marke__wand {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  gap: clamp(20px, 2.2vw, 28px);
}
.marke__bild { overflow: hidden; background: var(--bf-bg-alt); }
.marke__foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.marke__knopf {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: var(--bf-bg-alt);
  font-family: var(--bf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bf-ink);
  transition: background .22s var(--bf-ease), color .22s var(--bf-ease);
}
.marke__knopf:hover { background: var(--bf-ink); color: #fff; }

@media (max-width: 899px) {
  .marke__inner { grid-template-columns: minmax(0, 1fr); }
  .marke__bild { aspect-ratio: 4 / 3; }
}

/* -----------------------------------------------------------------------------
   17.3 Augenbraue und Überschrift als Zäsur
   -------------------------------------------------------------------------- */
.bandtitel { padding: clamp(56px, 5vw, 88px) 0 clamp(28px, 3vw, 44px); text-align: center; }
.bandtitel__augenbraue {
  display: block;
  margin-bottom: 12px;
  font-family: var(--bf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bf-signal);
}
.bandtitel__titel {
  margin: 0;
  font-family: var(--bf-cond);
  font-size: var(--bf-titel, clamp(30px, 17px + 1.5vw, 44px));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bf-ink);
}

/* -----------------------------------------------------------------------------
   17.4 Bildwand
   -------------------------------------------------------------------------- */
.galeriewand { padding: 0 0 var(--bf-abschnitt, 96px); }
.galeriewand__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.galeriewand__feld { margin: 0; overflow: hidden; background: var(--bf-bg-alt); aspect-ratio: 16 / 9; }
.galeriewand__feld--breit { grid-column: 1 / -1; aspect-ratio: 32 / 9; }
.galeriewand__bild { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 899px) {
  .galeriewand__raster { grid-template-columns: minmax(0, 1fr); }
  .galeriewand__feld--breit { aspect-ratio: 16 / 9; }
}

/* Zwei Überläufe, im Browser gemessen:

   1. «FAHRRADTRANSPORTANHÄNGER» ist ein Wort von 376px in einer 366px breiten
      Spalte — bei 390px schob es die Seite um 10px auf. Deutsche Komposita
      brauchen die Silbentrennung, nicht kleinere Schrift.
   2. Im Kreuz stritten `min-height` und `aspect-ratio`: bei 900px verlangte
      die Mindesthöhe von 320px bei 3:2 eine Breite von 480px, die Spalte war
      450px breit — 30px Überlauf. Das Seitenverhältnis reicht, die
      Mindesthöhe gilt nur noch für die Textfelder. */
.aktion__titel {
  hyphens: auto;
  overflow-wrap: anywhere;
}
.schachbrett__feld--bild { min-height: 0; }


/* =============================================================================
   Variante «Harbeck» — Teil 18: die Kategoriereihe steht wieder auf einer Linie
   =============================================================================
   Im Browser nachgemessen (Startseite, 1440px, alle fünf Kacheln):

     Kachel        Bildfeld   Beschriftung y
     Boot           214x143       2427
     BOS            214x152       2436
     Kommunal       214x143       2427
     Sonderbau      214x143       2427
     Ersatzteile    214x204       2488

   Zwei Fehler in einem Bild. Erstens wächst das Feld: `aspect-ratio: 3/2` gibt
   ihm keine feste Höhe, und `height: 100%` am Foto rechnet sich gegen eine
   unbestimmte Höhe — es fällt auf `auto` zurück, das Foto nimmt sein eigenes
   Verhältnis an und schiebt das Feld auf. Deshalb liegen die fünf Versalzeilen
   auf vier verschiedenen Höhen statt auf einer.

   Zweitens sind die fünf Motive nicht dasselbe: vier Anhänger im Verhältnis
   1,9 bis 3,2 und ein Komplettrad im Verhältnis 1,05. Bei `contain` füllt der
   Anhänger die Breite und bleibt flach, das Rad füllt die Höhe — es stand mit
   204px dreimal so hoch wie der Bootsanhänger mit 66px und zog den Blick als
   einziges Element der Reihe auf sich.

   Beides löst dieselbe Zahl. Das Feld bekommt das Verhältnis 15:7 (214x100) und
   eine absolut liegende Bildfläche: die Höhe ist damit gesetzt, alle fünf
   Zeilen stehen auf einer Linie, und das Rad kann nicht höher werden als der
   längste Anhänger. `object-position` unten stellt die fünf Fahrzeuge auf
   dieselbe Standlinie — sie stehen nebeneinander, statt zu schweben.
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .segment__bild {
  position: relative;
  aspect-ratio: 15 / 7;
}
.stil-harbeck body.home .segment__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}
/* Am Telefon steht die letzte Kachel über beide Spalten; dort ist das Feld
   flacher als die Reihe und braucht seine eigene Standlinie nicht anders. */
@media (max-width: 559px) {
  .stil-harbeck body.home .segment:last-child .segment__bild { aspect-ratio: 12 / 5; }
}

/* -----------------------------------------------------------------------------
   18.2 Die Bildwand stößt aneinander wie alles andere
   -----------------------------------------------------------------------------
   «eckig und aneinander» ist am 02.09. durch das ganze Haus gegangen — Kacheln,
   Produktreihe, Rasterbilder. Die Bildwand am Seitenende ist beim Übertragen des
   Vorbilds mit ihrer Fuge von 24px stehen geblieben und war damit die einzige
   Stelle, an der Fotos noch Abstand halten.
   -------------------------------------------------------------------------- */
.stil-harbeck .galeriewand__raster { gap: 0; }

/* Die eine Aufnahme, die andersherum aufgenommen wurde. `scaleX` statt einer
   zweiten Datei: das Bild bleibt dasselbe, und wenn der Kunde es austauscht,
   fällt hier nur ein Wert im Template weg. Beim Zeigen auf die Kachel läuft
   die Vergrößerung mit — sonst spränge das Bild in die Ausgangslage zurück. */
.stil-harbeck .segment__foto--gespiegelt { transform: scaleX(-1); }
.stil-harbeck body.home .segment:hover .segment__foto--gespiegelt {
  transform: scaleX(-1) scale(1.03);
}

/* -----------------------------------------------------------------------------
   18.3 Die Anspruchskachel: drei Felder, eine Fläche
   -----------------------------------------------------------------------------
   Drei Sachen standen hier quer zum Rest des Hauses.

   Die Fugen. Rote Kachel, Foto, Foto standen mit 28px Abstand nebeneinander —
   die einzige Stelle der Startseite, an der nach dem 02.09. noch Luft zwischen
   Flächen war. Jetzt stoßen sie aneinander wie überall sonst.

   Der Ausschnitt. Nachgemessen sind die Felder 352x534 und damit hochkant,
   beide Aufnahmen sind breiter — `cover` schneidet links und rechts, nicht oben
   und unten. Das eine Foto, in dem Asphalt die halbe Fläche füllte, ist
   ausgetauscht (siehe Template); an der Ausrichtung war nichts zu holen.

   Der graue Balken. Der Verweis auf Instagram lag als 60px hohe graue Fläche
   quer unter beiden Fotos — ein viertes Feld in einem Block, der aus drei
   besteht, und das einzige Grau weit und breit. Er steht jetzt als Zeile unten
   in der roten Kachel, wo auch die Zahlen stehen: derselbe Absender, dieselbe
   Fläche.
   -------------------------------------------------------------------------- */
.stil-harbeck .marke__inner { gap: 0; }
.stil-harbeck .marke__wand {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.stil-harbeck .marke__kanal {
  align-self: start;
  margin-top: 20px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  font-family: var(--bf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: border-color .2s var(--bf-ease);
}
.stil-harbeck .marke__kanal::after { content: " ↗"; }
.stil-harbeck .marke__kanal:hover { border-bottom-color: #fff; }

/* Die Zahlen hielten sich mit `margin: auto 0 0` am unteren Rand fest. Solange
   der graue Balken die rechte Spalte höher machte als die Kachel hoch sein
   musste, riss das ein Loch von 90px zwischen Satz und Trennlinie. Ohne den
   Balken bestimmt der Inhalt der Kachel die Höhe — der Abstand darf wieder
   fest sein. */
.stil-harbeck .marke__zahlen { margin-top: 8px; }


/* -----------------------------------------------------------------------------
   18.4 Grundpreis und der kurze Weg zu Jörg
   -----------------------------------------------------------------------------
   Aus der Änderungsliste vom 25.08.2026: «Bei den Bootsanhängern sollte hinter
   dem Preis Grundpreis stehen und ein Knopf, um Jörg zu erreichen.»

   Auf der Produktseite läuft das Wort als kleine Versalzeile hinter dem Betrag
   mit — hochgestellt, damit es die Ziffernlinie nicht bricht. In der
   Shop-Kachel steht unter dem Betrag ohnehin schon eine Kleinzeile
   («inkl. MwSt.»); dort kommt das Wort davor. Ein zweites Wort neben dem Preis
   hätte in der 280px schmalen Kachel umgebrochen, und die Kacheln einer Reihe
   stünden wieder unterschiedlich hoch.

   Der Weg zu Jörg ist eine Telefonzeile, kein Knopf, der ein Formular öffnet:
   ein Formular gibt es auf derselben Seite schon zweimal. Wer die Ausstattung
   eines Bootsanhängers bespricht, ruft an.
   -------------------------------------------------------------------------- */
.stil-harbeck .bf-pd__grundpreis {
  margin-left: 10px;
  font-family: var(--bf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bf-steel-700);
  vertical-align: 0.55em;
}
.stil-harbeck .shop__card-price--grundpreis::after { content: "Grundpreis · inkl. MwSt."; }

.stil-harbeck .bf-pd__anruf {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 18px;
  border: 1px solid var(--bf-line);
  background: var(--bf-bg-alt);
  color: var(--bf-ink);
  text-decoration: none;
  transition: border-color .2s var(--bf-ease), background .2s var(--bf-ease);
}
.stil-harbeck .bf-pd__anruf:hover {
  border-color: var(--bf-signal);
  background: #fff;
}
.stil-harbeck .bf-pd__anruf svg { flex: none; color: var(--bf-signal); }
.stil-harbeck .bf-pd__anruf-text { display: flex; flex-direction: column; gap: 2px; }
.stil-harbeck .bf-pd__anruf-label {
  font-family: var(--bf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bf-steel-700);
}
.stil-harbeck .bf-pd__anruf-nr {
  font-family: var(--bf-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* -----------------------------------------------------------------------------
   18.5 «Warum bunnefeld»: die Trennlinien fehlten über dem Bildband
   -----------------------------------------------------------------------------
   Auf dem Bildschirm zerfiel die Reihe in zwei Streifen: oben ein
   durchgehendes graues Band ohne jede Gliederung, darunter vier Karten mit
   Haarlinien dazwischen. Es sah aus, als stünden Zeichnungen und Texte in zwei
   verschiedenen Bauteilen.

   Die Linien sind da — sie sind nur unsichtbar. Die Kachelkante ist #e2e2e0,
   das Bildband #e3e3e3: ein Unterschied von einem Punkt je Kanal. Über dem
   weißen Textteil trägt dieselbe Linie, über dem Band verschwindet sie.

   Statt die Kachelkante des ganzen Hauses dunkler zu machen, bekommt das Band
   seine eigene Linie an derselben Stelle — dunkel genug, um auf Grau zu lesen.
   -------------------------------------------------------------------------- */
.stil-harbeck .reasons__item-icon { position: relative; }
.stil-harbeck .reasons__item-icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: #d0d0ce;
}

/* -----------------------------------------------------------------------------
   18.6 «Über uns» auf der Startseite: kürzer, und die erste Zeile trägt
   -----------------------------------------------------------------------------
   Punkt 2 der Änderungsliste: «Über uns auf der Startseite kürzer und moderner».
   Der Text stand als zwei gleich gewichtete Absätze von zusammen 72 Wörtern —
   die Gründungsgeschichte in Fließtext, ohne einen Satz, der allein stehen kann.
   Er ist auf 42 Wörter gekürzt; der erste Satz steht jetzt als Vorspann und
   sagt in einer Zeile, was der Absatz vorher in vier sagte. Die ganze
   Geschichte steht weiter auf /ueber-uns/, wohin der Knopf darunter führt.
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .simple .text .simple__lead {
  margin-bottom: 18px;
  font-size: clamp(19px, 15px + .45vw, 23px);
  line-height: 1.5;
  color: var(--bf-ink);
}

/* =============================================================================
   Variante «Harbeck» — Teil 19: das Anfragefeld
   =============================================================================
   «Darunter die Kachel Anfrage senden nur anders dargestellt viel moderner und
   mit mehr Leben» — Änderungsliste 25.08.2026.

   Vorher: rote Fläche, Überschrift, ein Knopf nach /kontakt/, daneben ein Foto.
   Wer anfragen wollte, verließ die Seite und fing auf der Kontaktseite ein
   zweites Mal an. Jetzt beginnt die Anfrage an der Stelle, an der sie jemandem
   einfällt: drei Felder auf der roten Fläche, darunter die zwei Nummern, für
   die es kein Formular braucht.

   Der Aufbau ist der des Hauses: randlos über die ganze Breite, zwei Hälften
   ohne Fuge, der Text auf der Satzkante der Seite. Das Foto füllt seine Hälfte
   bis zum Bildschirmrand.
   -------------------------------------------------------------------------- */
.stil-harbeck .anfrage { --anfrage-kante: max(24px, (100vw - 1240px) / 2); }
.stil-harbeck .anfrage__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}
.stil-harbeck .anfrage__spalte {
  background: linear-gradient(150deg, #a5101a 0%, #d7161e 78%);
  color: #fff;
}
/* Der Textblock hängt an der rechten Kante seiner Hälfte und beginnt links auf
   der Satzkante der Seite. `max-width` muss die beiden Innenabstände enthalten,
   sonst frisst der linke sie auf: bei 1920px ist die Satzkante 340px breit —
   mit einer festen Grenze von 620px blieben 232px Schriftbreite übrig, und der
   Block wurde 1064 statt 759px hoch. Gerechnet wird deshalb ab der Textbreite. */
.stil-harbeck .anfrage__inhalt {
  --anfrage-innen: clamp(28px, 3vw, 48px);
  max-width: calc(var(--anfrage-kante) + 560px + var(--anfrage-innen));
  margin-left: auto;
  padding: clamp(40px, 4.4vw, 72px) var(--anfrage-innen) clamp(40px, 4.4vw, 72px) var(--anfrage-kante);
}
.stil-harbeck .anfrage__augenbraue {
  margin: 0 0 14px;
  font-family: var(--bf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.stil-harbeck .anfrage__titel {
  margin: 0 0 14px;
  font-family: var(--bf-cond);
  font-size: clamp(28px, 16px + 1.5vw, 42px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.stil-harbeck .anfrage__satz {
  margin: 0 0 26px;
  font-size: var(--bf-fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, .94);
}

/* -- Formular -------------------------------------------------------------- */
.stil-harbeck .anfrage__formular { display: grid; gap: 14px; }
.stil-harbeck .anfrage__zeile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.stil-harbeck .anfrage__feld { display: grid; gap: 6px; }
.stil-harbeck .anfrage__label {
  font-family: var(--bf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
/* Weiße Felder auf Rot wären fünf helle Flächen in einer roten; die Felder
   bleiben deshalb rot und zeigen sich über ihre Kante. Beim Hineinschreiben
   wird die Kante weiß — das ist das einzige, was sich bewegt. */
.stil-harbeck .anfrage__feld input,
.stil-harbeck .anfrage__feld textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 0;
  background: rgba(0, 0, 0, .12);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  transition: border-color .2s var(--bf-ease), background .2s var(--bf-ease);
}
.stil-harbeck .anfrage__feld textarea { resize: vertical; min-height: 84px; }
.stil-harbeck .anfrage__feld input:focus,
.stil-harbeck .anfrage__feld textarea:focus {
  outline: none;
  border-color: #fff;
  background: rgba(0, 0, 0, .2);
}
.stil-harbeck .anfrage__feld input::placeholder,
.stil-harbeck .anfrage__feld textarea::placeholder { color: rgba(255, 255, 255, .6); }

.stil-harbeck .anfrage__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.stil-harbeck .anfrage__zustimmung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}
/* Ein Kästchen auf Rot: `accent-color` färbt nur den Haken, der Rahmen bleibt
   die Systemfarbe und war auf der roten Fläche nicht zu sehen. Deshalb ein
   eigenes Kästchen — weiße Kante, im gesetzten Zustand weiß gefüllt mit rotem
   Haken. Die Tastaturbedienung bleibt die des Browsers. */
.stil-harbeck .anfrage__zustimmung input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1px solid rgba(255, 255, 255, .8);
  background: rgba(0, 0, 0, .12);
  cursor: pointer;
}
.stil-harbeck .anfrage__zustimmung input:checked {
  background: #fff;
  /* Der Haken als Hintergrundbild: eine Zeile statt eines Pseudoelements,
     das an einem `input` ohnehin nicht überall gezeichnet wird. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='%23d7161e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 14px 14px;
}
.stil-harbeck .anfrage__zustimmung input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.stil-harbeck .anfrage__zustimmung a { color: #fff; text-decoration: underline; }

.stil-harbeck .anfrage__knopf {
  justify-self: start;
  min-width: 220px;
  height: 52px;
  margin-top: 6px;
  padding: 0 32px;
  border: 0;
  background: #fff;
  color: var(--bf-ink);
  font-family: var(--bf-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--bf-ease), color .2s var(--bf-ease);
}
.stil-harbeck .anfrage__knopf:hover { background: var(--bf-ink); color: #fff; }
.stil-harbeck .anfrage__knopf[disabled] { opacity: .6; cursor: progress; }

.stil-harbeck .anfrage__meldung { margin: 0; font-size: 14px; line-height: 1.5; }
.stil-harbeck .anfrage__meldung:empty { display: none; }
.stil-harbeck .anfrage__meldung--gut { color: #fff; font-weight: 700; }
.stil-harbeck .anfrage__meldung--fehler { color: #ffe0e0; }

/* -- Die zwei Nummern ------------------------------------------------------ */
.stil-harbeck .anfrage__leute {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .3);
  list-style: none;
}
.stil-harbeck .anfrage__leute li { display: grid; gap: 2px; }
.stil-harbeck .anfrage__leute-label {
  font-family: var(--bf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.stil-harbeck .anfrage__leute-nr {
  font-family: var(--bf-mono);
  font-size: 19px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.stil-harbeck .anfrage__leute-nr:hover { border-bottom-color: #fff; }

/* -- Foto ------------------------------------------------------------------ */
.stil-harbeck .anfrage__bild { position: relative; overflow: hidden; background: var(--bf-bg-alt); }
.stil-harbeck .anfrage__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}
/* Das Porträt springt ein, sobald der Filter eine Mediathek-Nummer liefert. */
.stil-harbeck .anfrage__portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  max-width: 46%;
  background: #fff;
  padding: 10px 10px 8px;
}
.stil-harbeck .anfrage__portrait-foto { display: block; width: 100%; height: auto; }
.stil-harbeck .anfrage__portrait figcaption {
  margin-top: 8px;
  font-family: var(--bf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bf-ink);
}

@media (max-width: 899px) {
  .stil-harbeck .anfrage__raster { grid-template-columns: minmax(0, 1fr); }
  /* Untereinander steht das Foto zuerst: es zeigt, worum es geht, bevor
     jemand gefragt wird, was er braucht. */
  .stil-harbeck .anfrage__bild { order: -1; aspect-ratio: 16 / 10; }
  .stil-harbeck .anfrage__inhalt {
    max-width: none;
    padding-inline: max(20px, (100vw - 1240px) / 2);
  }
}
@media (max-width: 519px) {
  .stil-harbeck .anfrage__zeile { grid-template-columns: minmax(0, 1fr); }
  .stil-harbeck .anfrage__knopf { width: 100%; }
}

/* -----------------------------------------------------------------------------
   19.2 Das stehende Bild
   -----------------------------------------------------------------------------
   Punkt 5 der Änderungsliste: fixierte Hintergrundbilder, wie auf der alten
   Seite. Es bleibt bei einem — die breite Aufnahme über der Bildwand. Zwei
   oder drei davon auf einer Seite wären keine Betonung mehr, sondern ein Tic,
   und das Vorbild hat gar keine.

   Wo es nicht läuft, läuft es sauber nicht: unterhalb von 900px ignoriert
   iOS `fixed` und zeigt das Bild verrutscht — dort steht es still im Rahmen.
   Wer Bewegung abgestellt hat, bekommt dasselbe.
   -------------------------------------------------------------------------- */
.stil-harbeck .galeriewand__feld--fest {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 899px) {
  .stil-harbeck .galeriewand__feld--fest { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .stil-harbeck .galeriewand__feld--fest { background-attachment: scroll; }
}


/* =============================================================================
   Variante «Harbeck» — Teil 20: Farbe, Maß, Größe
   =============================================================================
   Rückmeldung 02.09.2026 (Nacht): «не сильно современный… сверху маленькие
   картинки… gradients красного в белый, некрасивые… прицепы вырезаны, но они
   все сжаты, сбиты карточки… много вещей странных всё склеено… внизу форма,
   потом ещё одна форма, там есть отступ, этого недостаточно.»

   Drei Sachen, und alle drei sind messbar, nicht Geschmack:

     1 Vier rote Verläufe auf einer Seite, drei davon laufen ins Weiße.
     2 Die Reihe der Einsatzbereiche zeigt Fahrzeuge 100px hoch; das Vorbild
       zeigt seine 116 bis 208px hoch (im Browser nachgemessen).
     3 Die Produktkarte ist 302px breit, das Bild darin 265x177 aus einer
       300px-Datei — auf jedem Bildschirm mit doppelter Auflösung unscharf.

   Dazu der Takt: die Startseite fährt 101px Abschnittsabstand, die
   Unterseiten 73, das Kreuz 64, die Zäsur 72/43. Vier Maße sind kein Takt.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   20.1 Kein Verlauf mehr im Rot
   -----------------------------------------------------------------------------
   Ein Verlauf von Rot nach Weiß hat einen Zweck, wenn eine Fläche auslaufen
   soll — er war im August genau dafür gebaut («weiß auslaufen»). Vier davon auf
   einer Seite sind kein Auslauf mehr, sondern ein Effekt, und ein Effekt, den
   jede Bildschirmbreite anders abschneidet. Eine Hausfarbe, die sich sicher
   ist, steht flach.
   -------------------------------------------------------------------------- */
.stil-harbeck { --hb-rot-verlauf: var(--bf-signal); }

.stil-harbeck .hero__bar { background: var(--bf-signal); }
.stil-harbeck .aktion__inner { background: var(--bf-signal); }
.stil-harbeck .marke__kachel { background: var(--bf-signal); }
.stil-harbeck .anfrage__spalte { background: var(--bf-signal); }

/* -----------------------------------------------------------------------------
   20.2 Ein Takt für die ganze Seite
   -----------------------------------------------------------------------------
   `--bf-abschnitt` gab es seit Teil 15, er galt aber nur für fünf Abschnitte
   der Startseite. Alles, was danach dazugekommen ist — Kreuz, Zäsur, Bildwand,
   Anspruchskachel, Anfragefeld — brachte sein eigenes Maß mit, und die
   Unterseiten hatten von Anfang an ein anderes. Jetzt gilt er überall.

   `body` steht mit im Selektor: Teil 15.1 adressiert dieselben Abschnitte als
   `.stil-harbeck body.home #content > .reasons` und gewinnt sonst über das
   zusätzliche Element — die Regel unten wäre wirkungslos (nachgemessen:
   `padding-top` blieb bei 95px).

   Zwei Ausnahmen bleiben, beide gewollt: randlose Farbbänder (das rote Band
   unter dem Kopf, die Aktion) tragen ihren Abstand innen, und ein Abschnitt,
   der der Kopf des nächsten ist (Zäsur über der Bildwand), hält unten nichts.
   -------------------------------------------------------------------------- */
.stil-harbeck { --bf-abschnitt: clamp(72px, 6.6vw, 116px); }

.stil-harbeck body :is(#content, #primary) > .products,
.stil-harbeck body :is(#content, #primary) > .segmente,
.stil-harbeck body :is(#content, #primary) > .marke,
.stil-harbeck body :is(#content, #primary) > .schachbrett,
.stil-harbeck body :is(#content, #primary) > .galeriewand,
.stil-harbeck body :is(#content, #primary) > .simple,
.stil-harbeck body :is(#content, #primary) > .reasons,
.stil-harbeck body :is(#content, #primary) > .anfrage,
.stil-harbeck body :is(#content, #primary) > .cta,
.stil-harbeck body :is(#content, #primary) > .categories,
.stil-harbeck body :is(#content, #primary) > .philosophy,
.stil-harbeck body :is(#content, #primary) > .timeline,
.stil-harbeck body :is(#content, #primary) > .projects,
.stil-harbeck body :is(#content, #primary) > .contact,
.stil-harbeck body :is(#content, #primary) > .cabin-request,
.stil-harbeck body :is(#content, #primary) > .features,
.stil-harbeck body :is(#content, #primary) > .service,
.stil-harbeck body :is(#content, #primary) > .info {
  padding-top: var(--bf-abschnitt);
  padding-bottom: var(--bf-abschnitt);
}

/* Die Zäsur ist die Überschrift der Bildwand, kein eigener Abschnitt. */
.stil-harbeck body :is(#content, #primary) > .bandtitel {
  padding-top: var(--bf-abschnitt);
  padding-bottom: clamp(24px, 2.4vw, 40px);
}
.stil-harbeck body :is(#content, #primary) > .bandtitel + .galeriewand { padding-top: 0; }

/* Zwei Abschnitte auf demselben Grau standen mit zusammen 202px leerer Fläche
   dazwischen — gemessen zwischen «Über uns» und «Warum bunnefeld». Wo die
   Farbe nicht wechselt, gibt es auch keine Kante zu betonen: der gemeinsame
   Abstand ist einer, nicht zwei. */
.stil-harbeck body :is(#content, #primary) > .simple + .reasons,
.stil-harbeck body :is(#content, #primary) > .reasons + .simple { padding-top: 0; }
.stil-harbeck body :is(#content, #primary) > .simple:has(+ .reasons),
.stil-harbeck body :is(#content, #primary) > .reasons:has(+ .simple) {
  padding-bottom: calc(var(--bf-abschnitt) * 0.62);
}

/* Randlose Farbbänder tragen ihren Abstand innen; oben und unten sitzen sie
   auf dem Takt der Nachbarn. */
.stil-harbeck body :is(#content, #primary) > .aktion { padding: 0; }
.stil-harbeck .aktion__inner {
  padding-block: clamp(40px, 4vw, 64px);
}

/* Zwischen dem letzten Abschnitt und dem Fuß stand nichts als der Rest des
   Abschnittsabstands — das Anfragefeld endete rot, gleich darunter begann das
   Dunkelgrau des Fußes. Zwei Farbflächen ohne Übergang lesen sich als eine. */
.stil-harbeck .bff { margin-top: var(--bf-abschnitt); }

/* -----------------------------------------------------------------------------
   20.3 Die Einsatzbereiche werden groß
   -----------------------------------------------------------------------------
   Gemessen: unsere Fahrzeuge standen 66 bis 100px hoch in Feldern von 214px
   Breite. Beim Vorbild sind dieselben Kacheln 166 bis 208px hoch. Fünf
   Bildchen in der Mitte einer 1.440px breiten weißen Fläche — das ist der
   «kleine Bilder oben», von dem die Rückmeldung spricht.

   Die Reihe geht deshalb über die ganze Breite und stößt aneinander wie alles
   andere im Haus. Bei 1.440px ist jede Kachel damit 288 statt 214px breit, das
   Bildfeld 288x216 statt 214x100 — das Fahrzeug wird gut doppelt so groß. Der
   Kopf des Abschnitts bleibt auf der Satzkante stehen.
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .segmente__grid {
  /* Aus der Spalte heraus auf die volle Fensterbreite. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: clamp(28px, 3vw, 48px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--bf-line);
  border-bottom: 1px solid var(--bf-line);
}
.stil-harbeck body.home .segment {
  padding: clamp(20px, 2vw, 32px) 0 clamp(18px, 1.8vw, 28px);
  border-right: 1px solid var(--bf-line);
  background: #fff;
  transition: background .2s var(--bf-ease);
}
.stil-harbeck body.home .segment:last-child { border-right: 0; }
.stil-harbeck body.home .segment:hover { background: var(--bf-bg-alt); }
.stil-harbeck body.home .segment__bild {
  aspect-ratio: 4 / 3;
  margin-inline: clamp(12px, 1.4vw, 24px);
}
.stil-harbeck body.home .segment__name {
  margin-top: clamp(14px, 1.4vw, 22px);
  font-size: 15px;
  letter-spacing: .09em;
}
/* Fast quadratische Motive — das Komplettrad — bekommen Luft, sonst stehen sie
   als einziges Bild der Reihe über die volle Feldhöhe. Die Klasse setzt das
   Template anhand des gemessenen Seitenverhältnisses, nicht die Gestaltung. */
.stil-harbeck .segment__foto--kompakt { padding: 20% 16% 0; }

@media (max-width: 899px) {
  .stil-harbeck body.home .segmente__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stil-harbeck body.home .segment:nth-child(3n) { border-right: 0; }
  .stil-harbeck body.home .segment:last-child { border-right: 1px solid var(--bf-line); }
}
@media (max-width: 559px) {
  .stil-harbeck body.home .segmente__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stil-harbeck body.home .segment:nth-child(3n) { border-right: 1px solid var(--bf-line); }
  .stil-harbeck body.home .segment:nth-child(2n) { border-right: 0; }
  .stil-harbeck body.home .segment:last-child {
    grid-column: 1 / -1;
    border-right: 0;
  }
  .stil-harbeck body.home .segment:last-child .segment__bild { aspect-ratio: 12 / 5; }
}

/* -----------------------------------------------------------------------------
   20.4 Die Produktkarte bekommt Platz
   -----------------------------------------------------------------------------
   Gemessen bei 1.440px: Karte 302x357, Bildfeld 265x177, darunter zweizeiliger
   Titel, Preis, Mengenwähler und Warenkorb — alles auf 261px Breite. Das ist
   der «сжаты, сбиты» aus der Rückmeldung, und es stimmt.

   Mit drei Karten statt vier (main.js) ist die Karte 402px breit. Hier bekommt
   sie den Rest: ein höheres Bildfeld, mehr Innenabstand, größerer Titel und
   Preis, und eine Zeile Luft über den Bedienelementen.
   -------------------------------------------------------------------------- */
.stil-harbeck .products__card { padding-bottom: clamp(20px, 1.8vw, 28px); }
.stil-harbeck .products__card > :not(.products__image-wrap) {
  margin-left: clamp(18px, 1.8vw, 28px);
  margin-right: clamp(18px, 1.8vw, 28px);
}
.stil-harbeck .products__image-wrap { aspect-ratio: 4 / 3; }
.stil-harbeck .products__image-wrap--frei { padding: clamp(16px, 1.8vw, 28px) clamp(16px, 1.8vw, 28px) 8px; }

.stil-harbeck .products__title {
  font-size: clamp(16px, 14px + .3vw, 19px);
  line-height: 1.3;
}
.stil-harbeck .products__price { font-size: clamp(19px, 16px + .4vw, 23px); }
.stil-harbeck .products__info { padding-top: 4px; }
.stil-harbeck .products__controls { margin-top: 16px; }

/* -----------------------------------------------------------------------------
   20.5 Karten, die gleich hoch stehen und in eine Richtung lesen
   -----------------------------------------------------------------------------
   Nachgemessen in der Produktreihe bei 1.440px: die erste Karte 466px hoch, die
   anderen fünf 490. Der Unterschied ist der Titel — «Schlauchboot-Trailer BMS
   LED 750 kg» passt in eine Zeile, alle anderen brauchen zwei. Dadurch stand
   die Bedienzeile der ersten Karte 24px höher als die der Nachbarn, und die
   Reihe war unten ausgefranst. Das ist der «сбиты карточки» aus der Rückmeldung.

   Zwei Zeilen Titel sind also der Normalfall, nicht die Ausnahme: der Titel
   bekommt sie fest, und alles unterhalb sitzt am Kartenboden.

   Dazu die Leserichtung. Titel und Preis standen in derselben Karte
   verschieden: der Titel mittig, der Preis links. Auf einer Seite, deren
   Überschriften seit Teil 15 alle links stehen, ist die Mitte hier ein
   Überbleibsel des Ursprungs-Themes.
   -------------------------------------------------------------------------- */
/* Kein Flex auf der Karte: `.products__image-wrap` wird dann Flex-Element, und
   sein `aspect-ratio` verliert gegen die unbestimmte Höhe des Bildes darin —
   gemessen wuchs das Bildfeld von 301 auf 1.534px. Zwei feste Titelzeilen
   reichen ohnehin: alle anderen Teile der Karte sind fest hoch, der Titel war
   das einzige, was sprang. */
.stil-harbeck .products__title,
.stil-harbeck .shop__card-title {
  text-align: left;
}
.stil-harbeck .products__title {
  display: block;
  /* Zwei Zeilen im aktuellen Grad; `min-height` statt fester Höhe, damit ein
     dritter Zeilenumbruch die Karte wachsen lässt und nicht abschneidet. */
  min-height: calc(2 * 1.3em);
}

/* Der Mengenwähler nahm 240 der 350px Kartenbreite ein, der Warenkorb 44 — das
   Verhältnis war genau falsch herum. Die Menge ist eine Nebensache, das
   Hinzufügen die Handlung. */
.stil-harbeck .products__controls { gap: 10px; }
.stil-harbeck .products__qty-input {
  flex: 0 0 56px;
  width: 56px;
  text-align: center;
}
.stil-harbeck .products__cart-btn {
  flex: 1 1 auto;
  width: auto;
  background: var(--bf-ink);
  border-color: var(--bf-ink);
}
.stil-harbeck .products__cart-btn svg path { stroke: #fff; }
.stil-harbeck .products__cart-btn:hover {
  background: var(--bf-signal);
  border-color: var(--bf-signal);
}

/* Beschriftung am Warenkorbknopf. Unter 1.024px stehen zwei Karten in der
   Reihe und darunter eine; die Beschriftung passt bis hinunter zu zwei
   Spalten, erst am Telefon trägt das Zeichen allein. */
.stil-harbeck .products__cart-btn {
  gap: 10px;
  padding-inline: 16px;
  font-family: var(--bf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
}
@media (max-width: 567px) {
  .stil-harbeck .products__cart-text { display: none; }
}

/* -----------------------------------------------------------------------------
   20.6 Nachmessen: zwei Stellen, die nach der Umstellung nicht passten
   -----------------------------------------------------------------------------
   1. «IN DEN WARENKORB» brach im Knopf auf zwei Zeilen: der Mengenwähler nahm
      mit 56px Feld und zwei 36px-Knöpfen 128 der 350px, für den Knopf blieben
      190 — die Beschriftung braucht bei 13px und .09em rund 150 plus Zeichen,
      Abstand und Innenabstand. Der Wähler wird schmaler, die Schrift kleiner,
      und die Zeile darf nicht mehr brechen.

   2. Randlose Farbbänder trugen den vollen Takt zusätzlich innen. Zwischen der
      Anspruchskachel und dem Kreuz standen dadurch 190px Weiß, bevor die Farbe
      begann. Ein Band, das über die ganze Breite läuft, ist die Zäsur — es
      braucht die halbe.
   -------------------------------------------------------------------------- */
.stil-harbeck .products__qty-input { flex: 0 0 44px; width: 44px; }
.stil-harbeck .products__qty-btn { flex: 0 0 34px; width: 34px; }
.stil-harbeck .products__cart-btn {
  white-space: nowrap;
  gap: 8px;
  padding-inline: 14px;
  font-size: 12px;
  letter-spacing: .06em;
}

.stil-harbeck body :is(#content, #primary) > .schachbrett,
.stil-harbeck body :is(#content, #primary) > .anfrage {
  padding-block: calc(var(--bf-abschnitt) * 0.55);
}

/* -----------------------------------------------------------------------------
   20.7 Was die Umstellung am Telefon aufgeworfen hat
   -----------------------------------------------------------------------------
   Bei 390px nachgemessen:

   1. «KOMMUNAL & GEWERBE» ist bei 15px und .09em Sperrung breiter als die
      Kachel (194px) und lief links aus ihr heraus. In der Reihe mit fünf
      Kacheln am Schreibtisch trägt der Grad; auf zwei Spalten muss er kleiner
      werden, und das Wort darf umbrechen.

   2. «Zum Shop» stand zweimal: einmal als `--mobile` über den Karten, einmal im
      Fuß der Reihe. Das Ursprungs-Theme zeigt den einen statt des anderen; bei
      uns waren beide sichtbar, und der im Fuß war auf 117px gequetscht, sodass
      die Beschriftung umbrach. Der über den Karten stand ohnehin an der
      falschen Stelle — vor der Ware statt danach. Er geht, der im Fuß bekommt
      die ganze Breite.
   -------------------------------------------------------------------------- */
@media (max-width: 559px) {
  .stil-harbeck body.home .segment__name {
    font-size: 12px;
    letter-spacing: .05em;
    padding-inline: 6px;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

@media (max-width: 768px) {
  .stil-harbeck .products__button--mobile { display: none; }
  .stil-harbeck .products__footer { flex-wrap: wrap; gap: 16px; }
  .stil-harbeck .products__footer .products__button { flex: 1 1 100%; }
}

/* -----------------------------------------------------------------------------
   20.8 Der leere Warenkorb
   -----------------------------------------------------------------------------
   Beim Prüflauf über alle Seiten aufgefallen — die Seite lag so seit dem
   Aufsetzen des Shops da:

     «Your cart is currently empty!» und «New in store» auf Englisch,
     darunter vier Produktkacheln mit 10,5px Schrift bei 390px Breite,
     eine davon randlos aus der Spalte gelaufen, Knöpfe als Pillen.

   Der Inhalt ist jetzt deutsch und zeigt statt der vier Kacheln zwei Wege
   (Shop, alle Anhänger) und die Nummer — wer mit leerem Warenkorb hier steht,
   sucht einen Weg, keine zufällige Ware.

   Hier bleibt die Gestaltung: WooCommerce liefert seine Blockknöpfe rund
   (`border-radius: 9999px`, gemessen) und setzt das Zeichen über
   `::before` mittig mit 559px Rand — auf einer Seite, deren Überschrift links
   steht, schwebte es allein in der Mitte.
   -------------------------------------------------------------------------- */
.stil-harbeck .wc-block-cart__empty-cart__title {
  font-family: var(--bf-cond);
  font-size: var(--bf-titel, clamp(30px, 17px + 1.5vw, 44px));
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bf-ink);
}
/* Das Zeichen bleibt weg: WooCommerce legt dort ein trauriges Gesicht als
   70px-Hintergrundbild ab. Kleiner gesetzt wird daraus ein grauer Klecks, und
   ein Smiley ist auf der Seite eines Anhängerbauers ohnehin der einzige seiner
   Art. Die Überschrift sagt dasselbe. */
.stil-harbeck .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  content: none;
}
.stil-harbeck .wp-block-woocommerce-empty-cart-block p {
  max-width: 56ch;
  font-size: var(--bf-fs-md, 16px);
  line-height: 1.65;
  color: var(--bf-steel-700);
}
.stil-harbeck .wp-block-woocommerce-empty-cart-block .wp-block-buttons {
  margin-top: 26px;
  gap: 12px;
}
.stil-harbeck .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  border-radius: 0;
  height: 52px;
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  background: var(--bf-ink);
  color: #fff;
  font-family: var(--bf-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.stil-harbeck .wp-block-woocommerce-empty-cart-block .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--bf-ink);
  border: 1px solid var(--bf-line);
}
.stil-harbeck .wp-block-woocommerce-empty-cart-block .is-style-outline .wp-block-button__link:hover {
  border-color: var(--bf-ink);
}
.stil-harbeck .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
  background: var(--bf-signal);
  color: #fff;
  border-color: var(--bf-signal);
}

/* -----------------------------------------------------------------------------
   20.9 Die Kante gilt jetzt im ganzen Haus
   -----------------------------------------------------------------------------
   Teil 15 hat Titelgrad, Kante und roten Marker eingeführt — aber nur für
   `body.home`. Auf den Unterseiten blieb alles, wie es war, und dort steht es
   gemischt. Programmatisch abgefragt:

     /kontakt/   «Anfrage senden» mittig, «Kontakt» mittig
     /karriere/  «Karriere» mittig, «Der Betrieb» links, «Wen wir suchen» links
     /anhaenger/ «Anhänger» mittig, «Anhängertypen» mittig, drei Zeilen links,
                 «Weitere Aufbauten» wieder mittig
     /ueber-uns/ zwei mittig, eine links
     /miettrailer/ eine mittig, eine links

   Innerhalb einer Seite. Dazu 30px auf den Unterseiten gegen bis zu 44 auf der
   Startseite — zwei Größen für dieselbe Sache.

   Beides gilt ab hier überall. Der Marker läuft mit: er ist die Signatur, die
   einen Abschnittskopf als solchen erkennbar macht.

   `:is(#content, #primary)` statt `#content`: die Shop-Seiten von WooCommerce
   hängen unter `#primary.content-area`, dort gibt es kein `#content` — die
   Regeln liefen an ihnen vorbei. `:is()` nimmt die höhere Kennung seiner
   Argumente, die Gewichtung bleibt also dieselbe.
   -------------------------------------------------------------------------- */
.stil-harbeck :is(#content, #primary) h1.title,
.stil-harbeck :is(#content, #primary) h2.title,
.stil-harbeck :is(#content, #primary) .segmente__title,
.stil-harbeck :is(#content, #primary) .cta__title,
.stil-harbeck :is(#content, #primary) .news__head-title,
.stil-harbeck :is(#content, #primary) .shop__title {
  font-size: var(--bf-titel);
  line-height: 1.06;
  letter-spacing: .02em;
  text-align: left;
  margin-inline: 0;
}

.stil-harbeck :is(#content, #primary) .title-block .title::before,
.stil-harbeck :is(#content, #primary) .simple h2.title::before,
.stil-harbeck :is(#content, #primary) .reasons h2.title::before,
.stil-harbeck :is(#content, #primary) .products h2.title::before,
.stil-harbeck :is(#content, #primary) .philosophy h2.title::before,
.stil-harbeck :is(#content, #primary) .timeline h2.title::before,
.stil-harbeck :is(#content, #primary) .projects h2.title::before,
.stil-harbeck :is(#content, #primary) .cabin-request .title::before,
.stil-harbeck :is(#content, #primary) .contact .title::before,
.stil-harbeck :is(#content, #primary) .news__head-title::before,
.stil-harbeck :is(#content, #primary) .shop__title::before,
.stil-harbeck :is(#content, #primary) .cta__title::before,
.stil-harbeck :is(#content, #primary) .segmente__eyebrow::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 0 0 18px;
  background: var(--bf-signal);
}
/* Auf der roten Fläche wäre Rot auf Rot unsichtbar. */
.stil-harbeck :is(#content, #primary) .cta__title::before { background: #fff; }

/* Was unter einem linksbündigen Kopf steht, steht auch links — sonst hängt der
   Vorspann in der Mitte unter einer Überschrift an der Kante. */
.stil-harbeck :is(#content, #primary) .title-block .text,
.stil-harbeck :is(#content, #primary) .title-block p,
.stil-harbeck :is(#content, #primary) .cabin-request .text,
.stil-harbeck :is(#content, #primary) .cabin-request > .container > p,
.stil-harbeck :is(#content, #primary) .contact .text,
.stil-harbeck :is(#content, #primary) .news__head p,
.stil-harbeck :is(#content, #primary) .philosophy__intro {
  text-align: left;
  margin-inline: 0;
  max-width: 68ch;
}

/* Kartenüberschriften im Nachrichtenraster laufen mit — sie stehen über einem
   linksbündigen Anrisstext. */
.stil-harbeck :is(#content, #primary) .news__title,
.stil-harbeck :is(#content, #primary) .news__excerpt { text-align: left; }
.stil-harbeck :is(#content, #primary) .news__card-foot,
.stil-harbeck :is(#content, #primary) .news__more { justify-content: flex-start; }

/* Die Köpfe selbst sind Flex-Spalten mit `align-items: center` — der Titel
   steht dann in der Mitte, auch wenn seine eigene Schriftausrichtung links
   ist. Programmatisch gefunden: sieben Stellen über fünf Seiten, an denen der
   Kopf so gebaut ist. */
.stil-harbeck :is(#content, #primary) .cabin-request__head,
.stil-harbeck :is(#content, #primary) .contact__head,
.stil-harbeck :is(#content, #primary) .projects__head,
.stil-harbeck :is(#content, #primary) .philosophy__head,
.stil-harbeck :is(#content, #primary) .timeline__head,
.stil-harbeck :is(#content, #primary) .news__head,
.stil-harbeck :is(#content, #primary) .shop__head,
.stil-harbeck :is(#content, #primary) .reasons__list,
.stil-harbeck :is(#content, #primary) .simple__content {
  align-items: flex-start;
  /* Der Shop-Kopf ist eine Flex-Zeile, keine Spalte: dort zentriert
     `justify-content`, nicht `align-items`. Gemessen stand «Shop» danach immer
     noch bei x=669 in einer Spalte, die bei 116 beginnt. */
  justify-content: flex-start;
  text-align: left;
}
.stil-harbeck :is(#content, #primary) .news__content,
.stil-harbeck :is(#content, #primary) .news__desc,
.stil-harbeck :is(#content, #primary) .news__link {
  align-items: flex-start;
  text-align: left;
}

/* -----------------------------------------------------------------------------
   20.10 Auch in den Karten läuft die Schrift in eine Richtung
   -----------------------------------------------------------------------------
   Programmatisch abgefragt, welche Elemente in einer Karte noch mittig stehen:

     Shop-Kachel   Titel links, darunter Chips, Preis, «Grundpreis · inkl.
                   MwSt.» und der Mengenwähler mittig
     Zeitleiste    Jahr und Text mittig
     «Warum …»     auf der Startseite links (Teil 15), auf /ueber-uns/ mittig

   Innerhalb derselben Karte, auf derselben Seite. Die Zeichnung im Bildband
   bleibt mittig — dort steht ein Bild und kein Satz.
   -------------------------------------------------------------------------- */
.stil-harbeck :is(#content, #primary) .shop__card-info,
.stil-harbeck :is(#content, #primary) .shop__card-price-block,
.stil-harbeck :is(#content, #primary) .shop__card-price,
.stil-harbeck :is(#content, #primary) .bf-specline,
.stil-harbeck :is(#content, #primary) .shop__card-actions,
.stil-harbeck :is(#content, #primary) .timeline__card,
.stil-harbeck :is(#content, #primary) .timeline__year,
.stil-harbeck :is(#content, #primary) .timeline__desc,
.stil-harbeck :is(#content, #primary) .reasons__item,
.stil-harbeck :is(#content, #primary) .reasons__item-info,
.stil-harbeck :is(#content, #primary) .reasons__item-title,
.stil-harbeck :is(#content, #primary) .reasons__item-desc,
.stil-harbeck :is(#content, #primary) .reasons__item-number {
  text-align: left;
  align-items: flex-start;
}
.stil-harbeck :is(#content, #primary) .bf-specline { justify-content: flex-start; }
.stil-harbeck :is(#content, #primary) .shop__card-actions { justify-content: flex-start; }
/* Das Bildband trägt eine Zeichnung, keinen Satz — es bleibt mittig. */
.stil-harbeck :is(#content, #primary) .reasons__item-icon {
  align-items: center;
  justify-items: center;
  text-align: center;
}

/* Der rote Punkt über der Jahreszahl stand als Einziges in der Karte noch
   mittig. */
.stil-harbeck :is(#content, #primary) .timeline__card::before,
.stil-harbeck :is(#content, #primary) .timeline__dot { margin-inline: 0; }

/* Eine Farbe für dieselbe Handlung: «In den Warenkorb» ist im Shop und auf der
   Produktseite rot. In der Produktreihe der Startseite stand der Knopf seit
   heute dunkel — schön, aber die dritte Farbe für denselben Griff. */
.stil-harbeck .products__cart-btn {
  background: var(--bf-signal);
  border-color: var(--bf-signal);
}
.stil-harbeck .products__cart-btn:hover {
  background: var(--bf-ink);
  border-color: var(--bf-ink);
}

/* -----------------------------------------------------------------------------
   20.11 Zwei Nachträge aus dem letzten Prüflauf
   -----------------------------------------------------------------------------
   1. Bei 390px liefen zwei Überschriften auf /anhaenger/ aus dem Fenster:
      «Kühlanhänger für Lebensmitteltransporte» 397px und «Vier
      Fahrradtransportanhänger für …» 463px in einer 358px breiten Spalte.
      Deutsche Komposita brechen nicht von selbst; mit Silbentrennung tun sie
      es. Dieselbe Behandlung hat der Aktionstitel am 02.09. bekommen.

   2. `news` (Informationen) und `title-block legal-page` (Impressum, AGB,
      Datenschutz, Versand, Widerrufsrecht) standen als einzige noch auf dem
      alten Maß von 73px.
   -------------------------------------------------------------------------- */
.stil-harbeck :is(#content, #primary) h1.title,
.stil-harbeck :is(#content, #primary) h2.title,
.stil-harbeck :is(#content, #primary) .news__head-title,
.stil-harbeck :is(#content, #primary) .news__title,
.stil-harbeck :is(#content, #primary) .shop__title,
.stil-harbeck :is(#content, #primary) .segmente__title {
  hyphens: auto;
  overflow-wrap: anywhere;
}

.stil-harbeck body :is(#content, #primary) > .news,
.stil-harbeck body :is(#content, #primary) > .legal-page {
  padding-top: var(--bf-abschnitt);
  padding-bottom: var(--bf-abschnitt);
}


/* =============================================================================
   Variante «Harbeck» — Teil 21: die Fuge
   -----------------------------------------------------------------------------
   Rückmeldung 03.09.2026: «тут отступа нет между объектами и все слито, и так
   по всему сайту — сайт не выглядит премиум, он выглядит недоработанным.»

   Teil 12 hatte die Kacheln auf Stoß gesetzt («eckig und aneinander») und sich
   dabei auf brenderup berufen. Das Vorbild dieses Projekts ist aber harbeck.de.
   Am 03.09.2026 dort nachgemessen, bei 1.440px, in der Aktionsreihe — dem
   direkten Gegenstück unserer Reihe «Sofort ab Lager»:

     Raster        1.340px breit, `gap: 16px`, Kachel 436px
     Kachel        KEIN Rahmen, KEINE Fläche, KEIN Schatten, `padding: 0`
     Bild          Figur 436x247, Motiv freigestellt
     Bild→Titel    40px
     Titel         25px / 700, darunter 16px bis zur Zeile mit den Maßen
     Preis→Link    16px

   Und bei uns, dieselbe Stelle, dieselbe Breite:

     Raster        1.208px, `gap: 0`, Kachel 402px, Haarlinien ringsum
     Bühne         401x301, randlos, Grund #ededed
     Bild→Titel    8px
     Text          26px von der Kachelkante eingerückt

   Daraus kommen genau die zwei Sätze der Rückmeldung:

   1. «Всё слито». Die graue Bühne läuft randlos bis zur Kachelkante, die
      Trennlinie ist #e3e3e3 auf #ededed — über die oberen 301px der Reihe steht
      also Grau an Grau mit einer Linie dazwischen, die man nicht sieht. Drei
      Kacheln lesen sich als EINE graue Platte; erst im weißen Textteil darunter
      fallen sie auseinander. Dasselbe Bild in «Warum bunnefeld» (ein Grauband
      über vier Kacheln) und im Shop-Raster.

   2. «Недоработанным». 8px zwischen Bild und Titel sind kein Abstand, das ist
      ein Rest. Und der Kartentext steht 26px von der Kachelkante entfernt,
      während die Abschnittsüberschrift auf der Satzkante bei x=116 sitzt — die
      Seite hat also keine durchgehende linke Kante, obwohl Teil 15 genau das
      als Prinzip ausgerufen hat («eine Kante»).

   Die graue Bühne bleibt. Sie ist Kundenwunsch vom 25.08.2026 («Bilder
   freistellen und auf grauen Grund, damit es hochwertig aussieht») und sie
   funktioniert — sie war nur nie abgegrenzt. Mit einer Fuge von 16px wird aus
   dem einen Band wieder das, was gemeint war: drei getrennte Flächen.

   Die Haarlinien fallen dafür weg. Rahmen UND Fuge zusammen ergeben ein
   Formular; das Vorbild hat die Fuge und keinen Rahmen.
   ============================================================================= */

.stil-harbeck { --bf-fuge: 16px; }

/* -----------------------------------------------------------------------------
   21.1 Produktreihe «Sofort ab Lager» und «Ähnliche Modelle»
   -----------------------------------------------------------------------------
   Die Fuge selbst kommt aus `spaceBetween` in main.js (Swiper rechnet die
   Kachelbreite daraus); hier fallen Rahmen und Einrückung.
   -------------------------------------------------------------------------- */
.stil-harbeck .products__gallery { border-left: 0; }
.stil-harbeck .products__card {
  padding-bottom: 0;
  border: 0;
  background: transparent;
}
/* Text auf die Kachelkante — dieselbe Kante wie die Abschnittsüberschrift. */
.stil-harbeck .products__card > :not(.products__image-wrap) {
  margin-left: 0;
  margin-right: 0;
}
/* 8px waren ein Rest, 28px sind ein Abstand. Beim Vorbild sind es 40px auf
   einer 458px hohen Kachel; unsere ist dichter gesetzt und trägt zusätzlich
   eine Bedienzeile, deshalb der kleinere Wert. */
.stil-harbeck .products__info {
  margin-top: 0;
  padding-top: 28px;
}
.stil-harbeck .products__controls { margin-top: 18px; }

/* -----------------------------------------------------------------------------
   21.2 Shop-Raster
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__grid {
  gap: var(--bf-fuge);
  border-top: 0;
  border-left: 0;
}
.stil-harbeck .shop__card { border: 0; }
/* Beide Blöcke der Karte auf dieselbe Kante — nachgemessen stand der Titel bei
   x=524 und die Bedienzeile darunter bei x=548. */
.stil-harbeck :is(#content, #primary) .shop__card-info,
.stil-harbeck :is(#content, #primary) .shop__card-actions { padding-inline: 0; }

/* -----------------------------------------------------------------------------
   21.3 «Warum bunnefeld»
   -----------------------------------------------------------------------------
   Vier graue Zeichenfelder ohne Fuge sind ein Band, kein Raster. Mit der Fuge
   werden daraus vier Kacheln — weiß auf dem grauen Abschnitt, so wie sie
   gemeint waren.
   -------------------------------------------------------------------------- */
.stil-harbeck .reasons__items {
  gap: var(--bf-fuge);
  border-top: 0;
  border-left: 0;
}
.stil-harbeck .reasons__item { border: 0; }
.stil-harbeck .reasons__item-info,
.stil-harbeck .reasons__item-number { margin-inline: 24px; }

/* -----------------------------------------------------------------------------
   21.4 Kategorien auf /anhaenger/
   -------------------------------------------------------------------------- */
.stil-harbeck .categories__grid { gap: var(--bf-fuge); }
.stil-harbeck .categories__item { border: 0; }
.stil-harbeck .categories__content { padding: 18px 0 0; }

/* -----------------------------------------------------------------------------
   21.5 Einsatzbereiche
   -----------------------------------------------------------------------------
   Zwei Sachen auf einmal, weil eine ohne die andere nicht geht.

   Erstens die Fuge. Sie ist hier größer als in den Produktreihen: die Kacheln
   haben keine Fläche, nur ein freigestelltes Fahrzeug und eine Versalzeile
   darunter. Ohne Grund trägt allein der Abstand die Trennung, und der muss
   entsprechend groß sein — beim Vorbild steht dieselbe Kategoriereihe (sieben
   Kacheln à 247px) auf `gap: 72px`. Teil 16 hatte hier einmal 40px stehen, bevor
   Teil 20.3 auf 0 ging; dorthin zurück.

   Zweitens die Kante. Teil 20.3 hatte die Reihe aus der Spalte heraus auf die
   volle Fensterbreite gezogen, damit die Fahrzeuge größer werden. Solange die
   Kacheln aneinanderstießen und oben wie unten eine Linie hatten, war das ein
   Band und funktionierte. Mit einer Fuge ist es kein Band mehr, sondern fünf
   frei stehende Bilder — und das erste stößt dann mit dem Bootsanhänger an den
   Fensterrand, während die Überschrift darüber bei x=116 auf der Satzkante
   steht. Genau der Bruch, um den es in der Rückmeldung geht.

   Also zurück in die Spalte. Die Kachel misst damit 209 statt 256px; beim
   Vorbild sind es 247 in einer 1.340er Spalte, wir liegen also im selben Maß.
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .segmente__grid {
  width: auto;
  margin-inline: 0;
  gap: clamp(24px, 2.8vw, 40px);
  border-top: 0;
  border-bottom: 0;
}
.stil-harbeck body.home .segment,
.stil-harbeck body.home .segment:nth-child(3n),
.stil-harbeck body.home .segment:nth-child(2n),
.stil-harbeck body.home .segment:last-child { border: 0; }
.stil-harbeck .segment__name,
.stil-harbeck .segment__text,
.stil-harbeck .segment__link { margin-inline: 0; }

/* -----------------------------------------------------------------------------
   21.6 Der Kopf der Einsatzbereiche steht auf derselben Kante wie alle anderen
   -----------------------------------------------------------------------------
   Gemessen im Bild: die Überschrift «FÜNF BEREICHE, EINE HALLE» steht links auf
   der Satzkante, die Augenbraue «EINSATZBEREICHE» und der Vorspann darunter
   stehen mittig — in EINEM Kopf zwei Ausrichtungen. Das ist kein Entwurf,
   sondern das Ergebnis zweier Teile, die sich überlagern: Teil 15 stellt alles
   nach links, Teil 16 stellte diesen einen Kopf mittig, und ein späterer Teil
   holte nur die Überschrift zurück. Sichtbar bleibt der Bruch.
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .segmente__eyebrow,
.stil-harbeck body.home .segmente__title,
.stil-harbeck body.home .segmente__lead {
  text-align: left;
  margin-inline: 0;
}
.stil-harbeck body.home .segmente__eyebrow::before { margin-inline: 0; }

/* -----------------------------------------------------------------------------
   21.7 Luft zwischen Abschnittskopf und Reihe
   -----------------------------------------------------------------------------
   32px zwischen Kopf und Kacheln stehen gegen 95px Abschnittsabstand — der
   Block hat innen keinen Bezug zum Rhythmus außen. 48px stellen ihn her.
   -------------------------------------------------------------------------- */
.stil-harbeck .products__head { margin-bottom: clamp(32px, 3.4vw, 48px); }

@media (max-width: 720px) {
  .stil-harbeck { --bf-fuge: 12px; }
  .stil-harbeck .products__info { padding-top: 20px; }
}

/* -----------------------------------------------------------------------------
   21.8 Die Einsatzbereiche bekommen denselben Grund wie alles andere
   -----------------------------------------------------------------------------
   In der Spalte und mit Fuge stehen die fünf Fahrzeuge frei im Weiß — die
   Reihe hat keinen Körper mehr, und sie ist damit die einzige Stelle im Haus,
   an der ein freigestelltes Fahrzeug NICHT auf grauem Grund steht. Genau das
   ist Kundenwunsch vom 25.08.2026 («Bilder freistellen und auf grauen Grund,
   damit es hochwertig aussieht»), und in der Produktreihe, im Shop und in den
   Kategorien ist es längst so. Eine Ausnahme davon liest sich als Lücke.

   Der Innenabstand wandert dafür von `margin-inline` (Luft neben der Kachel)
   nach `padding` (Luft INNERHALB der Fläche) — sonst stünde das Fahrzeug in
   einem grauen Feld, das schmaler ist als die Kachel.
   -------------------------------------------------------------------------- */
.stil-harbeck body.home .segment__bild {
  margin-inline: 0;
  background: var(--bf-bg-alt);
}
/* Der Abstand steht am Bild und nicht an der Fläche: das Foto liegt seit Teil
   17 `position: absolute; inset: 0` in seinem Feld, und ein `inset: 0` misst
   von der Polsterkante des Elternteils — ein `padding` an der Fläche würde das
   Bild also gar nicht bewegen (nachgemessen: Feld 210x157, Bild 210x157, das
   Fahrzeug stieß beidseitig an den Rand des Graus). */
.stil-harbeck body.home .segment__foto {
  padding: clamp(12px, 1.4vw, 22px) clamp(14px, 1.6vw, 26px) clamp(14px, 1.6vw, 24px);
}
/* Das Komplettrad ist als einziges Motiv fast quadratisch und stünde sonst über
   die volle Feldhöhe — die Ausnahme aus Teil 20.11, auf das neue Polster
   umgerechnet. */
.stil-harbeck body.home .segment__foto--kompakt { padding: 19% 20% 13%; }


/* =============================================================================
   Variante «Harbeck» — Teil 22: zwei Schriften statt einer
   -----------------------------------------------------------------------------
   Rückmeldung 05.09.2026, zum dritten Mal: «сайт не премиум». Nachgezählt auf
   der Startseite: 354 von 359 Textelementen laufen auf Gabarito, und zwar in
   Versalien in neun verschiedenen Rollen — H1 58px, alle H2 33–39px, Augenbrauen
   13px, Knöpfe 13–14px, Segmentnamen 15px, Fußzeilen-Titel 14px, Formularlabels
   13px. Wenn alles gleich laut ruft, gibt es keine Hierarchie; das ist der
   Unterschied zwischen einer gestalteten Seite und einer eingestellten.

   Die Lösung lag schon im Haus. `bunnefeld.css` deklariert seit jeher
   `@font-face` für «PlexCond» (IBM Plex Sans Condensed 600/700), die beiden
   Dateien liegen in `assets/fonts`, und `header.php` lädt sie mit `rel=preload`
   vor. Nur zeigte `--bf-cond` seit der Umstellung wieder auf Gabarito — der
   Browser holte den Schmalschnitt also auf jeder Seite und zeichnete nichts
   damit. Ein toter Download und ein verschenkter Kontrast in einer Zeile.

   Jetzt: Schmalschnitt trägt ALLE Titel, Gabarito bleibt Lesetext. Ein
   Maschinenbaubetrieb liest sich in einem schmalen, technischen Grotesk richtig;
   ein runder geometrischer Grotesk in Versalien liest sich wie eine App.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   22.1 Alle Überschriften auf den Schmalschnitt
   -----------------------------------------------------------------------------
   Die Blocktitel (`schachbrett__titel`, `aktion__titel`, `marke__anspruch`,
   `bandtitel__titel`, `anfrage__titel`, `hero__vorzeile`) standen schon auf
   `var(--bf-cond)` — sie bekommen den Schnitt allein durch die geänderte
   Zeile 79. Hier kommen die dazu, die noch auf der Lesetextschrift liefen:
   die Seitenüberschrift und die Abschnittsüberschriften.
   -------------------------------------------------------------------------- */
.stil-harbeck .hero__title,
.stil-harbeck :is(#content, #primary) h1.title,
.stil-harbeck :is(#content, #primary) h2.title,
.stil-harbeck :is(#content, #primary) h3.title,
.stil-harbeck :is(#content, #primary) .segmente__title,
.stil-harbeck :is(#content, #primary) .cta__title,
.stil-harbeck :is(#content, #primary) .shop__title,
.stil-harbeck :is(#content, #primary) .news__head-title,
.stil-harbeck :is(#content, #primary) .news__title,
.stil-harbeck .product__title,
.stil-harbeck .bfh__badge {
  font-family: var(--bf-cond);
}

/* Der Schmalschnitt trägt bei gleicher Größe mehr Zeichen und wirkt dadurch
   leichter. Damit die Titel nicht kleiner WIRKEN als vorher, geht der Grad um
   gut ein Zehntel hoch und die Laufweite auf 0 zurück — Versalien in einem
   Schmalschnitt brauchen keine zusätzliche Sperrung, die 0.02em aus Teil 15
   waren für den runden Schnitt gedacht. */
.stil-harbeck { --bf-titel: clamp(33px, 18px + 1.7vw, 49px); }
.stil-harbeck body.home h2.title,
.stil-harbeck body.home .segmente__title,
.stil-harbeck body.home .cta__title { letter-spacing: 0; }

/* -----------------------------------------------------------------------------
   22.2 Versalien nur noch dort, wo sie eine Rolle markieren
   -----------------------------------------------------------------------------
   Versalien sind ein Werkzeug für kurze Marker: Augenbrauen, Knöpfe,
   Abschnittsüberschriften. In Fließtextnähe kosten sie Lesbarkeit und geben
   nichts zurück — ein dreizeiliger Kartentitel in Versalien ist kein Akzent
   mehr, sondern Lärm. Diese drei Rollen geben sie ab.
   -------------------------------------------------------------------------- */
.stil-harbeck .reasons__item-title,
.stil-harbeck .bff__title,
.stil-harbeck .anfrage__label {
  text-transform: none;
  letter-spacing: 0;
}
/* Ohne Versalien braucht der Kartentitel etwas mehr Grad, sonst fällt er
   gegenüber dem Fließtext darunter nicht mehr auf. */
.stil-harbeck .reasons__item-title { font-size: clamp(19px, 16px + .4vw, 23px); }


/* =============================================================================
   Variante «Harbeck» — Teil 23: die Kanten, die Teil 21 noch nicht erreicht hat
   -----------------------------------------------------------------------------
   Teil 21 hat die Fugen in den Kachelreihen zurückgeholt. Beim Nachmessen am
   06.09. blieben genau vier Stellen übrig, an denen der zurückgenommene Kurs
   «eckig und aneinander» (02.09.) noch steht — und drei davon liegen in den
   Abschnitten, über die der Kunde jetzt sagt «блоки странно выглядят».
   ============================================================================= */

/* -----------------------------------------------------------------------------
   23.1 Der Text im Kreuz steht endlich auf der Satzkante
   -----------------------------------------------------------------------------
   Teil 16.2 wollte es schon: «Das linke Textfeld beginnt auf der Satzkante der
   Seite». Gemessen bei 1.440px stand es bei x=298, während jede Überschrift des
   Hauses bei x=116 sitzt — 182px daneben, im auffälligsten Block der Seite.

   Der Grund ist eine Kette aus drei Angaben: `.schachbrett__inhalt` hat
   `max-width: 620px`, im Flex-Feld schrumpft die Box aber auf ihren Inhalt
   (gemessen 522px), und `margin-left: auto` schiebt genau diese geschrumpfte
   Box nach rechts. Die Textkante hing damit an der LÄNGE DES TEXTES statt am
   Raster — ein anderer Satz, eine andere Kante.

   Also: die Box füllt das Feld, und die Kante macht allein das Polster. Dazu
   1240 → 1208, das ist das Maß, auf dem der Rest des Hauses steht.
   -------------------------------------------------------------------------- */
.stil-harbeck .schachbrett__inhalt {
  width: 100%;
  max-width: none;
}
.stil-harbeck .schachbrett__feld--rot .schachbrett__inhalt {
  margin-left: 0;
  padding-left: max(24px, calc((100vw - 1208px) / 2));
}
.stil-harbeck .schachbrett__feld--dunkel .schachbrett__inhalt {
  padding-right: max(24px, calc((100vw - 1208px) / 2));
}
/* Die Zeile bleibt lesbar schmal — das macht jetzt der Text selbst und nicht
   mehr die Box, sonst wandert die Kante wieder mit. */
.stil-harbeck .schachbrett__text { max-width: 46ch; }

/* -----------------------------------------------------------------------------
   23.2 Anspruchskachel und Bildwand bekommen die Fuge
   -----------------------------------------------------------------------------
   `marke` und `galeriewand` sind die zwei Blöcke, die Teil 21 nicht angefasst
   hat; beide stehen noch auf `gap: 0` aus Teil 18.2/18.3. Bei `marke` stößt
   damit die rote Kachel randlos an das Foto und Foto an Foto, bei `galeriewand`
   lesen sich drei Aufnahmen als eine Collage. Die Template-Kommentare beider
   Blöcke halten für das Vorbild selbst eine Fuge von 20px fest — sie war beim
   Übertragen verloren gegangen. 16px statt 20, damit es dasselbe Maß ist wie
   in den Reihen.
   -------------------------------------------------------------------------- */
.stil-harbeck .marke__inner { gap: var(--bf-fuge); }
.stil-harbeck .marke__wand { gap: var(--bf-fuge); }
.stil-harbeck .galeriewand__raster { gap: var(--bf-fuge); }

/* Zwei Bilder nebeneinander sind am Telefon zwei Briefmarken (gemessen 195x146).
   Untereinander ist jedes so breit wie die Spalte. */
@media (max-width: 899px) {
  .stil-harbeck .marke__wand { grid-template-columns: minmax(0, 1fr); }
}

/* -----------------------------------------------------------------------------
   23.3 Das Titelband steht auf derselben Kante wie alles andere
   -----------------------------------------------------------------------------
   `bandtitel` war die letzte mittige Überschrift der Startseite — Teil 15 hatte
   alle anderen auf die linke Kante gestellt, dieser Block ist dabei übersehen
   worden. Eine einzelne mittige Überschrift zwischen lauter linksbündigen liest
   sich nicht als Absicht, sondern als Versehen.

   Der Text des Bandes («ANHÄNGER NACH MASS / FÜR JEDEN EINSATZ GEBAUT»)
   wiederholt wörtlich die erste Zeile der Seitenüberschrift und sagt damit
   nichts Neues. Das ist eine Inhaltsfrage und wartet auf den Kunden; hier steht
   nur die Kante.
   -------------------------------------------------------------------------- */
.stil-harbeck .bandtitel { text-align: left; }
.stil-harbeck .bandtitel__augenbraue::before { margin-inline: 0; }

/* -----------------------------------------------------------------------------
   23.4 Der Fuß rückt an das Anfragefeld heran
   -----------------------------------------------------------------------------
   Gemessen: das rote Anfragefeld endet bei y=7724, der Fuß beginnt bei 7871 —
   147px Weiß zwischen zwei vollflächig farbigen Bändern (95px `margin-top` plus
   52px Polster der Sektion). Am Seitenende liest sich das als abgerissen, nicht
   als Abstand. Das Polster der Sektion allein ist der Übergang.
   -------------------------------------------------------------------------- */
.stil-harbeck .bff { margin-top: 0; }


/* =============================================================================
   Variante «Harbeck» — Teil 24: die Bildwand der Anspruchskachel
   -----------------------------------------------------------------------------
   Rückmeldung 06.09.2026: «картинка обрезана». Nachgemessen bei 1.440px war es
   die schlimmste Stelle im Haus: Rahmen 340x534, Datei 340x255 — `object-fit:
   cover` warf 52 Prozent der Bildbreite weg.

   Der Grund lag nicht am Zuschnitt, sondern an der Anordnung. Die Wand ist
   695x534 (die Höhe gibt die rote Kachel daneben vor). Zwei Kacheln
   nebeneinander machen daraus je ein HOCHKANT-Feld von 340x534 — und die beiden
   Dateien sind verschieden ausgerichtet: 1800x1350 quer und 1800x2400 hoch.
   Das Querformat hatte im Hochkantrahmen keine Chance.

   Zwei Fotos passen in 695x534 in keiner Anordnung verlustfrei: nebeneinander
   frisst es die Breite, übereinander die Höhe (je 695x259, also 50 Prozent).
   EIN Querformat dagegen passt fast genau — 1,30 gegen 1,33.
   ============================================================================= */
.stil-harbeck .marke__wand {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}


/* =============================================================================
   Variante «Harbeck» — Teil 25: die Symbolreihe des Vorbilds
   -----------------------------------------------------------------------------
   Auftrag 06.09.2026: «давай сделаем хедер с иконками как здесь» — dazu das
   Bild der Kopfleiste von harbeck.de. Nachgemessen bei 1.440px, damit «wie
   dort» eine Zahl ist und kein Eindruck:

     Reihe      fünf Zeichen, Kästen je 40x40, Schritt 65px (also 25px Fuge)
     Farbe      weiß, Vollformen (Font Awesome `fas`), keine Kontur
     Reihenfolge  Suche · Warenkorb · Konto · Telefon · E-Mail
     die zwei letzten hängen an `tel:004986814090` und `mailto:info@harbeck.de`

   Der Aufbau der Leiste stimmte bei uns schon (Teil 13: durchsichtig, fixiert,
   Kästen ohne Rahmen). Auseinander ging nur die Belegung: auf den Plätzen von
   Telefon und E-Mail standen Instagram und Facebook, und alle Zeichen waren
   Haarkonturen mit 1,4px. Auf einem Film ist eine weiße 1,4px-Linie kaum
   vorhanden — deshalb fährt das Vorbild Vollformen, und deshalb tun wir es
   jetzt auch. Die Fuge von 8px stammte aus der Zeit der umrandeten Kästen: bei
   Rahmen trennt der Rahmen, ohne Rahmen muss es die Fuge tun.
   ============================================================================= */

.stil-harbeck .bfh__actions {
  gap: 22px;
}

/* Der Anfrageknopf ist der einzige Textkörper in der Reihe und braucht die
   Fuge nicht doppelt — vor ihm reicht der halbe Schritt. */
.stil-harbeck .bfh__cta {
  margin-left: -4px;
}

/* Die Vollformen tragen mehr Schwarz als die alten Konturen. In der weißen
   Leiste der Unterseiten wäre reines Schwarz zu laut; das Grau des Hauses hält
   sie auf der Höhe der Menüschrift. Auf dem Film bleiben sie weiß (Teil 13). */
.stil-harbeck .bfh__action {
  color: var(--bf-steel-900);
}
.stil-harbeck .bfh__action:hover {
  color: var(--bf-signal);
}

/* Ab 1101px zeigt die Leiste alle fünf. Darunter blendet bunnefeld.css Telefon
   und E-Mail aus — am Telefon stünden sonst sechs Zeichen nebeneinander, und
   vier waren schon zu viel (Sitzung 30.07., das Konto flog dafür raus). Beide
   Kanäle stehen in der Schublade als Text, Rufnummer und Adresse ausgeschrieben. */

/* Unter 1280px wird es zwischen Wortzeichen und Reihe eng: die Fuge geht auf
   den halben Schritt zurück, bevor irgendetwas umbricht. */
@media (max-width: 1279px) {
  .stil-harbeck .bfh__actions {
    gap: 12px;
  }
}

/* Dasselbe Ausblenden noch einmal mit der Variantenklasse davor. In bunnefeld.css
   steht es hinter `display: inline-flex` und greift dort bereits; hier gewinnt es
   über die Spezifität und damit unabhängig davon, was später in die Basisdatei
   geschrieben wird. Für `--social` steht die Zeile weiter oben (Teil 12) aus
   genau demselben Grund. */
@media (max-width: 1100px) {
  .stil-harbeck .bfh__action--kanal { display: none; }
}


/* =============================================================================
   Variante «Harbeck» — Teil 26: das Menü und die randlosen Farbbänder
   -----------------------------------------------------------------------------
   Rückmeldung 06.09.2026: «меню на том сайте лучше чуть» und «перед и после
   секции белая полоска отступ». Beides nachgemessen bei 1.440px.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   26.1 Das Schriftbild des Menüs
   -----------------------------------------------------------------------------
   Nebeneinandergelegt:

                     Vorbild            wir
     Grad            14px               14px      gleich
     Schrift         Gabarito           Gabarito  gleich
     Gewicht         400                700       doppelt
     Sperrung        0,42px (.03em)     0,84px    doppelt
     Versalien       nein               ja
     Fuge            10px               16px

   Grad und Schrift stimmten also längst. Schwerer wirkt unser Menü, weil
   Gewicht, Sperrung UND Versalsatz gleichzeitig eine Stufe höher stehen —
   drei Verstärker auf derselben Zeile. Das Vorbild schreibt die Navigation
   klein und ruhig und hebt statt dessen die Überschriften heraus; genau
   deshalb liest sie sich «чуть лучше».

   Die Versalien fallen damit im Kopf weg, in den Überschriften bleiben sie:
   dort tragen sie, hier nur auf.
   -------------------------------------------------------------------------- */
.stil-harbeck .bfh__menu > li > a {
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: none;
}

/* Der aktive Punkt trug seine Auszeichnung bisher aus dem Versalsatz mit; ohne
   ihn bleibt die rote Linie das Kennzeichen, und ein halber Gewichtsschritt
   hält ihn auch ohne Farbe auffindbar. */
.stil-harbeck .bfh__menu > li.current-menu-item > a,
.stil-harbeck .bfh__menu > li.current-menu-ancestor > a {
  font-weight: 600;
}

/* 16px Fuge waren auf die breiten Versalwörter gerechnet. Kleingeschrieben
   sind dieselben Punkte kürzer, und die Reihe fiele auseinander. */
.stil-harbeck .bfh__menu {
  gap: 10px;
}
.stil-harbeck .bfh__menu > li > a {
  padding-inline: 6px;
}

/* -----------------------------------------------------------------------------
   26.2 Randlose Farbbänder haben außen nichts mehr
   -----------------------------------------------------------------------------
   Kreuz und Anfragefeld laufen über die volle Breite und tragen ihren Abstand
   innen (`schachbrett__inhalt`, `anfrage__inhalt`). Zusätzlich stand außen der
   halbe Seitentakt — 46px bei 1.280, 52px bei 1.440, 64px ab 1.920.

   Sichtbar wird das genau dort, wo das Band an eine andere Farbe stößt:

     reasons (#ededed)  →  52px WEISS  →  anfrage (rot)
     anfrage (rot)      →  52px WEISS  →  Fuß (#2b2b2b)

   Zwei Farbflächen mit einem hellen Streifen dazwischen lesen sich nicht als
   Abstand, sondern als Fehler im Satz — das ist die «белая полоска» aus der
   Rückmeldung. Teil 20.6 hatte den Takt hier bereits halbiert; die Hälfte war
   die halbe Antwort.

   Teil 20.2 hatte den Abstand zum Fuß seinerzeit mit «zwei Farbflächen ohne
   Übergang lesen sich als eine» begründet. Das Vorbild stößt seine Bänder
   dennoch aneinander, und die Kante zwischen Rot und Dunkelgrau trägt den
   Übergang allein. Der Kunde entscheidet, hier steht nur der Grund.

   `.aktion` steht seit Teil 20.2 auf demselben Weg — das ist also keine
   Ausnahme, sondern die Regel für alle drei randlosen Bänder.
   -------------------------------------------------------------------------- */
.stil-harbeck body :is(#content, #primary) > .schachbrett,
.stil-harbeck body :is(#content, #primary) > .anfrage {
  padding-block: 0;
}


/* =============================================================================
   Variante «Harbeck» — Teil 27: der Seitenkopf schließt mit einer Kante
   -----------------------------------------------------------------------------
   Entscheidung des Kunden am 06.09.2026: die Datenleiste unter dem Film fällt
   weg, weil sie beim Vorbild nicht existiert («вот этого не было там»). Dort
   endet der Kopf mit einer schmalen roten Kante, und der erste Bildschirm zeigt
   nichts als Film und Überschrift.

   Gemessen an der Vorlage des Kunden: das rote Band ist rund 35 von 2.560
   Bildpunkten hoch, umgerechnet auf unsere 1.440px also etwa 20px. Wir fahren
   `clamp(10px, 1.1vw, 16px)` — auf dem Telefon eine Linie, am Schreibtisch eine
   Kante, nie ein Balken.

   Der Inhalt der Leiste ist aus dem Markup verschwunden, nicht nur ausgeblendet
   (hero/template.php). Was dort stand, ist nicht verloren: die Rufnummer sitzt
   seit derselben Sitzung als Hörersymbol in der Kopfleiste, die drei Zahlen
   stehen auf /ueber-uns/ und im Fußbereich.
   ============================================================================= */
.stil-harbeck .hero__bar--kante {
  height: clamp(10px, 1.1vw, 16px);
  padding: 0;
  border: 0;
  background: var(--bf-signal);
}


/* =============================================================================
   Variante «Harbeck» — Teil 28: ein Abstand, wo die Farbe nicht wechselt
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026 zu /anhaenger/, /ueber-uns/ und /karriere/:
   «неравномерные отступы и отступы лишние». Nachgemessen bei 1.440px über acht
   Seiten, wobei der WIRKSAME Grund jedes Abschnitts ermittelt wurde (ein
   durchsichtiger Abschnitt steht auf dem Weiß des Körpers, ist also weiß —
   ein Vergleich der Farbwerte allein übersieht das):

     /              segmente + marke  = 190px auf Weiß
     /anhaenger/    projects + cta    = 190px auf Weiß
     /karriere/     simple   + cta    = 190px auf Weiß
     /projekte/     projects + cta    = 190px auf Weiß

   Zweimal der volle Takt (95px + 95px) an einer Stelle, an der die Farbe gar
   nicht wechselt. Wo keine Kante ist, gibt es auch nichts zu trennen: der
   gemeinsame Abstand ist EINER, nicht zwei.

   Teil 20.2 hatte genau das schon entschieden — aber nur für das eine Paar
   `simple + reasons`, das damals auffiel. Die Begründung galt immer für alle;
   hier steht sie jetzt als Regel über die Gründe statt über eine Liste von
   Paaren, damit neue Abschnitte sie erben, ohne dass jemand daran denkt.

   Der Wert 0,62 ist derselbe wie in Teil 20.2, damit die Seite überall
   denselben halben Takt fährt: 95px werden zu 59px.

   Zwei Dinge bleiben absichtlich, wie sie sind:
   - `title-block` trägt unten ohnehin 0 und kann nicht doppeln.
   - Auf /kontakt/ stehen zwischen Brotkrume und erstem Abschnitt 111px. Das
     ist kein doppelter Takt, sondern der normale Abstand nach einer schmalen
     Navigationszeile — er sieht auf jeder Unterseite gleich aus.
   ============================================================================= */

/* Die beiden Gründe des Hauses, einmal ausgeschrieben. `nth-child(… of …)`
   entscheidet bei `.simple`, welche Reihe grau und welche weiß ist (Regel weiter
   oben); Browser ohne diese Schreibweise verwerfen den ganzen Selektor und
   behalten den doppelten Abstand — schlechter, aber nichts kaputt. */
.stil-harbeck #content > :is(.categories, .products, .segmente, .marke, .galeriewand,
                             .projects, .gallery, .picture, .info, .statement,
                             .timeline, .cta, .cabin-request,
                             .simple:nth-child(even of .simple))
                       + :is(.categories, .products, .segmente, .marke, .galeriewand,
                             .projects, .gallery, .picture, .info, .statement,
                             .timeline, .cta, .cabin-request,
                             .simple:nth-child(even of .simple)),
.stil-harbeck #content > :is(.reasons, .philosophy, .features, .service, .team, .contact,
                             .simple:nth-child(odd of .simple))
                       + :is(.reasons, .philosophy, .features, .service, .team, .contact,
                             .simple:nth-child(odd of .simple)) {
  padding-top: 0;
}

.stil-harbeck #content > :is(.categories, .products, .segmente, .marke, .galeriewand,
                             .projects, .gallery, .picture, .info, .statement,
                             .timeline, .cta, .cabin-request,
                             .simple:nth-child(even of .simple)):has(
                       + :is(.categories, .products, .segmente, .marke, .galeriewand,
                             .projects, .gallery, .picture, .info, .statement,
                             .timeline, .cta, .cabin-request,
                             .simple:nth-child(even of .simple))),
.stil-harbeck #content > :is(.reasons, .philosophy, .features, .service, .team, .contact,
                             .simple:nth-child(odd of .simple)):has(
                       + :is(.reasons, .philosophy, .features, .service, .team, .contact,
                             .simple:nth-child(odd of .simple))) {
  padding-bottom: calc(var(--bf-abschnitt) * 0.62);
}


/* =============================================================================
   Variante «Harbeck» — Teil 29: die Überschrift gehört nach unten
   -----------------------------------------------------------------------------
   Gemessen am 07.09.2026 bei 1.440px, jeweils vom letzten Zeichen darüber bis
   zur Oberkante der Überschrift und von der Unterkante des Blocks bis zum
   ersten Inhalt darunter:

     /anhaenger/  H2 «Anhängertypen im Sonderbau»   über  36px   unter  95px
     /karriere/   H1 «Karriere»                     über  89px   unter 209px
     /ueber-uns/  H1 «Über uns»                     über  89px   unter  96px

   Auf /anhaenger/ steht die Überschrift damit zweieinhalbmal näher an dem, was
   ÜBER ihr liegt, als an dem, was sie ankündigt — also bei der falschen Sache.
   Auf /karriere/ klafft unter dem Seitentitel eine Lücke von 209px.

   Ein `title-block` ist nie ein eigener Abschnitt, sondern der Kopf des
   folgenden. Deshalb bringt der folgende Abschnitt oben nichts mehr mit, und
   der Kopf trägt seinen Abstand selbst — knapp, damit das Verhältnis stimmt:
   oben mehr Luft als unten, ungefähr zwei zu eins.

   Auf der Startseite tut `bandtitel + galeriewand` seit Teil 20.2 genau das.
   Hier gilt dieselbe Regel für die Unterseiten.
   ============================================================================= */
.stil-harbeck #content > .title-block {
  padding-bottom: clamp(18px, 1.9vw, 30px);
}

.stil-harbeck #content > .title-block + :is(.categories, .products, .segmente, .marke,
                                            .galeriewand, .projects, .gallery, .picture,
                                            .info, .statement, .timeline, .cta,
                                            .cabin-request, .simple, .reasons, .philosophy,
                                            .features, .service, .team, .contact) {
  padding-top: 0;
}

/* Zwei Köpfe hintereinander — Seitentitel, darunter der Kopf des ersten
   Abschnitts — brauchen zwischen sich mehr als die 36px, mit denen der zweite
   bisher am ersten klebte. Sonst liest sich das als ein Textklumpen aus vier
   Zeilen statt als zwei Ebenen. */
.stil-harbeck #content > .title-block + .title-block {
  padding-top: clamp(34px, 3.4vw, 56px);
}


/* =============================================================================
   Variante «Harbeck» — Teil 30: ein Schleier statt eines Verlaufs
   -----------------------------------------------------------------------------
   Kundenwunsch 07.09.2026: «на hero section не делал перелив затемнения фона —
   а общее затемнение».

   Bisher lagen dort ZWEI Verläufe übereinander (Teil 13.2): einer von links
   .90 nach rechts .14, darüber einer von oben .58 nach unten 0. Die Absicht war
   richtig — links steht die Schrift, rechts soll der Anhänger frei bleiben —,
   aber das Ergebnis ist ein wanderndes Grau quer durch das Bild. Bei einem Film,
   dessen Kamera ohnehin um das Fahrzeug fährt, kommt das Fahrzeug dabei
   zwangsläufig irgendwann in die dunkle Hälfte.

   Ein gleichmäßiger Schleier hat kein «wo»: er nimmt überall gleich viel Licht,
   das Bild bleibt ein Bild, und die Schrift steht auf einem Grund, der sich
   nicht verändert, während sich der Film dreht.

   Die Dichte ist nicht geschätzt. Gemessen wurde der Kontrast der weißen
   Schrift gegen den Grund dahinter (WCAG), und zwar an FÜNF Stellen des Films,
   damit kein heller Augenblick der Kamerafahrt durchrutscht:

     Schleier   Überschrift   Menü      Grenze ist 4,5:1
       .45         9,96:1     9,53:1
       .38         9,07:1     8,65:1
       .32         8,90:1     7,95:1   ← gewählt
       .26         8,46:1     7,17:1

   Lesbar ist es also in jeder Dichte — der Film ist von sich aus dunkel
   (mittlere Helligkeit 113 von 255). Damit entscheidet nicht mehr die Lesbarkeit,
   sondern das Bild: .32 hält den Kopf ruhig und lässt dem gerade erst
   gerechneten Film sein Licht. Zum Vergleich: links stand vorher .90.

   Am Telefon bleibt der Verlauf: dort liegt die Schrift unten auf dem Bild, und
   ein gleichmäßiger Schleier müsste so dicht sein, dass vom Foto nichts bleibt.
   ============================================================================= */
.stil-harbeck body.home .hero--video .hero__head::after {
  /* 07.09.2026 nachgeschärft von .32 auf .50. Rückmeldung «текст тяжело
     читается». Gemessen war der Kontrast in Ordnung — Überschrift 6,6 bis
     7,6:1 über fünf Stellen des Films, Norm 3,0. Was stört, ist nicht das
     Verhältnis, sondern die UNRUHE des Grundes: die Streuung der Helligkeit
     hinter der Überschrift lag bei σ = 0,0586. Ein Kontrastwert mittelt und
     sieht das nicht; das Auge schon.

     Ein dichterer Schleier senkt beides. Bei .50 fällt σ um 26 Prozent, und
     das Verhältnis steigt mit. Der Film bleibt sichtbar — vorher stand an
     dieser Stelle über Jahre ein Verlauf mit .90 links. */
  background: rgba(17, 17, 17, .50);
}


/* =============================================================================
   Variante «Harbeck» — Teil 31: die Brotkrume steht auf der Satzkante
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026: «хлебные крошки по центру, а не слева». Nachgemessen
   bei 1.440px auf fünf Unterseiten: der Pfad beginnt bei x=634 bis 656, die
   Satzkante der Seite liegt bei x=116. Der Kasten sitzt also richtig — zentriert
   wird sein Inhalt, durch `justify-content: center` (Teil 2).

   Diese Entscheidung war zu ihrer Zeit richtig: damals stand der Seitentitel
   mittig, und eine linksbündige Brotkrume darüber sah aus wie ein Rest aus einer
   anderen Seite. Teil 15 hat die Titel dann auf die linke Kante gestellt — seitdem
   ist es die Brotkrume, die als Einzige woanders steht.

   Damit fallen auch die beiden `safe center`-Regeln für schmale Schirme weg: sie
   lösten das Überlaufproblem der Mitte, und die Mitte gibt es nicht mehr.
   ============================================================================= */
.stil-harbeck .breadcrumbs__list {
  justify-content: flex-start;
}


/* =============================================================================
   Variante «Harbeck» — Teil 32: die zweite Zeile war nicht zu lesen
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026: «текст в hero читается странно». Nachgemessen wurde
   nicht der Eindruck, sondern der Kontrast jeder Zeile gegen den Grund dahinter
   — dazu wurde die Schrift versteckt und der Film darunter aufgenommen, sonst
   zählen die dunklen Punkte der Schrift selbst als Hintergrund mit:

     «Seit 2009»              weiß         9,93:1   ok
     «Anhänger nach Maß»      weiß         7,33:1   ok
     «gebaut in Haren (Ems)»  ROT          1,39:1   Norm für große Schrift: 3,0
     Fließtext                weiß        11,10:1   ok

   Die rote Zeile über acht Stellen des Films geprüft: 1,28 bis 1,41:1. Sie
   erreicht die Grenze in keinem einzigen Augenblick. Der Grund ist nicht der
   Schleier, sondern die Farbe: `#D7161E` hat fast dieselbe Helligkeit wie der
   Film darunter (Grund um 84,86,91). Auch auf reinem Schwarz käme dieses Rot
   über 3,14:1 nicht hinaus — die Zeile war also nie lesbar, der gleichmäßige
   Schleier hat es nur sichtbar gemacht.

   Weiß an derselben Stelle: 6,91:1.

   Also tragen beide Zeilen Weiß. Das Rot verschwindet nicht, es wechselt die
   Rolle: als Strich über der Vorzeile ist es eine Fläche und keine Schrift —
   Flächen unterliegen der Textnorm nicht, und genau so beginnt im Haus jeder
   Abschnitt (`bandtitel__augenbraue::before`). Damit steht das Rot im Kopf
   sogar an der ersten Stelle, an der man hinsieht, statt in einer Zeile, die
   sich im Film auflöst.
   ============================================================================= */
.stil-harbeck body.home .hero--video .hero__title-zeile--signal {
  color: #fff;
}

.stil-harbeck body.home .hero--video .hero__vorzeile {
  display: flex;
  align-items: center;
  gap: 16px;
}
.stil-harbeck body.home .hero--video .hero__vorzeile::before {
  content: "";
  flex: none;
  width: clamp(34px, 3.6vw, 56px);
  height: 3px;
  background: var(--bf-signal);
}


/* =============================================================================
   Variante «Harbeck» — Teil 33: Kopfleiste, Fuß und der Grauton
   -----------------------------------------------------------------------------
   Änderungsliste des Kunden vom 07.09.2026, Punkte 1 bis 3, dazu zwei Punkte
   des Nutzers. Alles nachgemessen, bevor es angefasst wurde.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   33.1 «Bigger Text size Menu»
   -----------------------------------------------------------------------------
   Das Menü stand auf 14px — genau so groß wie beim Vorbild (Teil 26). Der Kunde
   will größer; 16px ist der nächste Schritt, der noch in eine Zeile passt: die
   fünf Punkte messen zusammen 394px statt 348px, und bis zum Wortzeichen bleibt
   Platz. Das Gewicht bleibt bei 400, sonst wäre es wieder die schwere Leiste
   von vorher.
   -------------------------------------------------------------------------- */
.stil-harbeck .bfh__menu > li > a {
  font-size: 16px;
}

/* -----------------------------------------------------------------------------
   33.2 Drei Symbole, enger zusammen
   -----------------------------------------------------------------------------
   «Weniger Icons (max 3 und enger zusammen — sie nehmen zu viel Platz weg)».
   Konto und E-Mail sind aus dem Markup heraus (header.php). Die 22px Fuge kamen
   aus dem Vorbild, das dort fünf Zeichen stehen hat; bei dreien wirkt derselbe
   Abstand auseinandergezogen.
   -------------------------------------------------------------------------- */
.stil-harbeck .bfh__actions {
  gap: 8px;
}
@media (max-width: 1279px) {
  .stil-harbeck .bfh__actions { gap: 6px; }
}

/* -----------------------------------------------------------------------------
   33.3 «Ich würde den Header generell breiter machen»
   -----------------------------------------------------------------------------
   Die Leiste lief im Satzspiegel der Seite: 1.240px, bei 1.440px Fenster also
   100px Rand links und rechts. Der Kopf ist aber kein Textblock — er darf die
   Breite des Fensters nutzen. Bis 1.600px, danach hält ihn der Rand.

   Der Gewinn geht an den Abstand zwischen Wortzeichen und Menü: genau der Punkt
   «Mehr Abstand zum Menü».
   -------------------------------------------------------------------------- */
.stil-harbeck .bfh__inner {
  max-width: min(1600px, 100% - clamp(32px, 4vw, 96px));
}

/* -----------------------------------------------------------------------------
   33.4 Der Fuß trägt kein weißes Kärtchen mehr
   -----------------------------------------------------------------------------
   Nutzer: «в футере не красиво, что лого в белом квадратике». Gemessen: der Fuß
   steht auf #222222, das Wortzeichen saß in einer weißen Platte von 181x92 mit
   14/20 Polster.

   Die Platte kam daher, dass das Logo rote Schrift auf durchsichtigem Grund ist
   und Rot auf Dunkelgrau schlecht liest. Der Weg dorthin ist aber nicht ein
   aufgeklebtes weißes Kärtchen, sondern das, was die mobile Schublade seit
   Langem tut: das Logo als reine weiße Form. `brightness(0)` macht daraus erst
   Schwarz, `invert(1)` dann Weiß — eine Datei, kein zweites Bild.
   -------------------------------------------------------------------------- */
.stil-harbeck .bff__logo {
  background: none;
  padding: 0;
  border-radius: 0;
}
.stil-harbeck .bff__logo img {
  filter: brightness(0) invert(1);
}

/* -----------------------------------------------------------------------------
   33.5 Der Grauton kommt von allegro-boote.de
   -----------------------------------------------------------------------------
   Nutzer: «давай сделаем серый с сайта allegro-boote.de, чтобы премиум был».
   Dort nachgemessen, welche unbunten Flächen wie viel Platz einnehmen:

     #f8f8f8   3.175.924 px²   ← der Ton, der die Seite trägt
     #000000   1.382.886 px²
     #f4f4f4     443.028 px²
     #ffffff     319.559 px²

   Unser `--bf-bg-alt` stand auf #ededed, also elf Stufen dunkler. Der Unterschied
   klingt nach nichts und ist genau der zwischen «grauer Kasten» und «heller
   Bogen»: je näher der Ton am Weiß liegt, desto mehr liest sich der Wechsel als
   Papier und nicht als Fläche.
   -------------------------------------------------------------------------- */
.stil-harbeck {
  --bf-bg-alt: #f8f8f8;
}


/* =============================================================================
   Variante «Harbeck» — Teil 34: weniger Rot, und der rote Abschluss wird ein Zeichen
   -----------------------------------------------------------------------------
   Nutzer: «сильно много красного». Nachgemessen an der ganzen Startseite
   (1.440x8.049, 11,59 Mio Punkte): ROT deckt **14,2 Prozent**, verteilt auf
   sechs Bahnen, vier davon groß:

     y 1.724–2.069   345px hoch, 87% breit   `aktion`
     y 2.701–3.235   534px hoch, 33% breit   `marke`, die Anspruchskachel
     y 3.330–3.810   480px hoch, 49% breit   `schachbrett`, das rote Feld
     y 6.656–7.396   740px hoch, 49% breit   `anfrage`, das Anfragefeld

   Das eigene Regelwerk des Hauses sagt seit dem ersten Tag: «Rot ist Signal,
   keine großen roten Flächen» (CLAUDE.md). Vier Flächen von zusammen 14 Prozent
   sind das Gegenteil davon. Rot, das überall ist, zeigt nirgends mehr hin.

   Zwei Flächen wechseln die Farbe, zwei bleiben:

   - `aktion` wird hell. Es ist die breiteste Bahn der Seite und trägt eine
     Produktankündigung — die kommt vom Foto und vom Wort «Neu im Programm»,
     nicht von der Farbe. Auf dem hellen Grund (jetzt #f8f8f8, Teil 33.5) bleibt
     Rot dort, wo es hingehört: auf der Auszeichnung und dem Knopf.
   - `marke` wird Graphit. Die Kachel trägt weiße Schrift; auf #3d3d3d liest sie
     sich unverändert, und sie steht damit im selben Ton wie das dunkle Feld des
     Kreuzes darunter — zwei Kacheln einer Familie statt zweier Signale.
   - `schachbrett` behält sein rotes Feld: dort ist Rot die eine Hälfte eines
     Paares, dessen andere Hälfte dunkel ist. Das ist der Aufbau des Vorbilds.
   - `anfrage` behält Rot: das ist die Stelle, an der der Besucher etwas tun
     soll. Wenn Rot auf der Seite nur noch einmal groß auftritt, dann hier.
   ============================================================================= */
.stil-harbeck .aktion__inner {
  background: var(--bf-bg-alt);
  color: var(--bf-ink);
}
/* Die Klassennamen stehen hier ausgeschrieben, weil ein erster Anlauf am
   07.09. `aktion__text` und `aktion__auszeichnung` traf — beides gibt es nicht.
   Der Fließtext heißt `aktion__satz`, die Auszeichnung `aktion__marke`, und
   beide blieben dadurch WEISS auf hellem Grund, also unsichtbar. Nachgemessen
   und danach ausgeschrieben; die Namen stammen aus dem Block selbst. */
.stil-harbeck .aktion__titel,
.stil-harbeck .aktion__satz {
  color: var(--bf-ink);
}
.stil-harbeck .aktion__marke {
  /* Rot auf #f8f8f8 ergibt 4,47:1 und liegt damit haarscharf unter der Grenze
     von 4,5:1 für kleine Schrift. Der dunklere Signalton des Hauses trägt
     dieselbe Farbe und kommt auf 6,1:1. */
  color: var(--bf-signal-dark);
}

/* Die Anspruchskachel: Überschrift war Ink und stand nach dem Wechsel auf
   Graphit bei 1,46:1. Auf dunklem Grund ist sie weiß wie alles andere darin. */
.stil-harbeck .marke__anspruch {
  color: #fff;
}
/* Der Knopf war weiß auf Rot; auf hellem Grund braucht er die Farbe selbst. */
.stil-harbeck .aktion__knopf {
  background: var(--bf-signal);
  border-color: var(--bf-signal);
  color: #fff;
}
.stil-harbeck .aktion__knopf:hover {
  background: var(--bf-ink);
  border-color: var(--bf-ink);
  color: #fff;
}

.stil-harbeck .marke__kachel {
  background: #3d3d3d;
}


/* -----------------------------------------------------------------------------
   34.2 Der Abschluss des Seitenkopfs ist kein durchgehender Strich mehr
   -----------------------------------------------------------------------------
   Kunde, Punkt 4: «Keine durchgehende rote Linie, lieber ein Designelement wie
   beim Konkurrenten oder ähnlich».

   Die Linie stammt von heute Vormittag (Teil 27) und war die wörtliche Antwort
   auf «этого не было там» — beim Vorbild schließt der Kopf mit einer roten
   Kante. Beim Vorbild ist diese Kante aber KEIN durchgehender Balken: rechts
   läuft sie in schräge Zacken aus.

   Statt die Zacken zu kopieren — der Kunde hatte sie am 25.08. ausdrücklich
   abgelehnt — läuft der Balken hier nach rechts aus: volle Farbe über das erste
   Drittel, danach ein schräger Abschluss. Das ist ein Zeichen mit Richtung und
   kein Strich, und es nimmt nebenbei zwei Drittel der roten Fläche weg.
   -------------------------------------------------------------------------- */
.stil-harbeck .hero__bar--kante {
  background: none;
  position: relative;
  overflow: hidden;
}
.stil-harbeck .hero__bar--kante::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(38%, 560px);
  background: var(--bf-signal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}


/* =============================================================================
   Variante «Harbeck» — Teil 35: kein Zeichen im Grund (aufgegeben)
   -----------------------------------------------------------------------------
   Am 07.09.2026 stand hier dreimal die Sichel aus dem Logo als Grundzeichen in
   der Anspruchskachel und im Kreuz. Alle drei Fassungen wurden abgelehnt:

     1. gekachelt        → die Blockkanten schnitten das Zeichen an allen vier
                           Seiten an: «искозились патерны»
     2. ganz, klein,     → ein mittelgroßer Bogen in der Ecke las sich als Fleck:
        unten rechts       «подложка не красивая»
     3. groß, rechts,    → «не красиво ты патерн используешь»
        über die Kante

   Der Grund liegt nicht an der Stelle, sondern an der Form. Nachgemessen:
   die Sichel ist ein OFFENER Bogen — 679x422 mit 14 Prozent Deckung, also eine
   Linie von rund 33 Punkten Stärke. Solche Formen tragen als Grundzeichen
   nicht: geschlossene, flächige Marken (ein Buchstabe, ein Wappen, ein Kreis)
   bleiben auch bei 7 Prozent Deckkraft erkennbar, eine dünne Kurve wird zum
   Kratzer. Und die Sichel allein ist ohne den Schriftzug daneben ohnehin nicht
   als bunnefeld zu erkennen — sie ist die Hälfte eines Zeichens.

   Die Datei bleibt in der Mediathek (ID 443). Wenn ein Grundmuster zurückkommt,
   dann nicht mit dieser Form.
   ============================================================================= */

/* =============================================================================
   Variante «Harbeck» — Teil 36: der Film füllt den Bildschirm
   -----------------------------------------------------------------------------
   Nutzer: «сделать видео на высоту экрана».

   Bisher: `min-height: min(84vh, 780px)`. Der Deckel von 780px stammte aus der
   Sorge, auf einem flachen Notebook bestünde sonst der ganze erste Bildschirm
   aus Video (Teil 13.2). Genau das ist jetzt gewollt.

   `100svh` statt `100vh`: `vh` rechnet am Telefon mit der GRÖSSTEN Fensterhöhe,
   also ohne die Leisten des Browsers — der Kopf wäre dort höher als der
   sichtbare Bereich und die Schrift stünde teils darunter. `svh` ist die
   kleinste Höhe und damit die, die immer zu sehen ist. Die Zeile mit `vh` steht
   davor als Rückfall für Browser, die `svh` nicht kennen.

   Der rote Abschluss (Teil 34.2) rutscht damit unter die Kante des ersten
   Bildschirms. Das ist richtig so: er schließt den Kopf ab, er kündigt ihn
   nicht an.
   ============================================================================= */
.stil-harbeck body.home .hero--video .hero__head {
  min-height: 100vh;
  min-height: 100svh;
}


/* =============================================================================
   Variante «Harbeck» — Teil 37: auch das rote Feld des Kreuzes wird hell
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026 zum Feld «Bootsanhänger»: «в этом блоке много
   красного». Es ist nach Teil 34 die letzte große rote Fläche der Startseite —
   480px hoch, halbe Seitenbreite, gemessen 4,0 Prozent der ganzen Seite.

   Damit fällt die letzte Ausnahme. Das Kreuz liest sich jetzt als Paar aus Hell
   und Dunkel: oben links Text auf Hell, oben rechts das Fahrzeug, unten links
   das Fahrzeug, unten rechts Text auf Graphit. Rot bleibt im Feld — aber als
   Linie unter dem Verweis, nicht als Grund.

   Die Schrift dreht sich mit: auf #f8f8f8 wäre Weiß unsichtbar. Der Verweis
   nimmt den dunkleren Signalton, weil das helle Rot auf diesem Grund 4,47:1
   ergibt und damit knapp unter der Grenze für kleine Schrift liegt — dieselbe
   Rechnung wie bei `aktion__marke` in Teil 34.
   ============================================================================= */
.stil-harbeck .schachbrett__feld--rot {
  background: var(--bf-bg-alt);
}
.stil-harbeck .schachbrett__feld--rot .schachbrett__titel,
.stil-harbeck .schachbrett__feld--rot .schachbrett__text {
  color: var(--bf-ink);
}
.stil-harbeck .schachbrett__feld--rot .schachbrett__link {
  color: var(--bf-signal-dark);
  border-bottom-color: var(--bf-signal);
}
.stil-harbeck .schachbrett__feld--rot .schachbrett__link:hover {
  color: var(--bf-ink);
  border-bottom-color: var(--bf-ink);
}


/* =============================================================================
   Variante «Harbeck» — Teil 38: aus drei Grautönen werden zwei
   -----------------------------------------------------------------------------
   Nutzer: «у нас 3 цвета — светло-серый, тёмно-серый и тёмный. Может вместо
   тёмно-серого светлый серый дать?»

   Nachgemessen, wie viel Fläche jeder Ton auf der Startseite trägt:

     #f8f8f8   5,54 Mio px²   die hellen Bänder
     #ffffff   3,37 Mio px²   Kopfleiste und weiße Abschnitte
     #222222   2,24 Mio px²   Seitenkopf und Fuß
     #3d3d3d   0,61 Mio px²   NUR die Anspruchskachel und das dunkle Feld
     #14181b   1,30 Mio px²   der Grund hinter dem Film

   Der Vorschlag trifft genau den Ton, der am wenigsten trägt: #3d3d3d kommt an
   zwei Stellen vor und liegt farblich zwischen dem Dunkel des Fußes und dem
   Hellen der Bänder, ohne die Rolle des einen oder des anderen zu haben. Ein
   Ton, der nur zwischen zwei anderen steht, ist eine Stufe zu viel.

   Also: die beiden Flächen werden hell. Übrig bleiben zwei Gründe — hell für
   den Inhalt, dunkel für Kopf und Fuß, die den Satz einrahmen.

   Die Schrift dreht sich mit, sonst stünde Weiß auf Weiß. Alle Werte danach
   gemessen; keiner unter der Norm.
   ============================================================================= */
.stil-harbeck .marke__kachel,
.stil-harbeck .schachbrett__feld--dunkel {
  background: var(--bf-bg-alt);
}

.stil-harbeck .marke__kachel,
.stil-harbeck .marke__anspruch,
.stil-harbeck .marke__satz,
.stil-harbeck .marke__kachel dd,
.stil-harbeck .schachbrett__feld--dunkel .schachbrett__titel,
.stil-harbeck .schachbrett__feld--dunkel .schachbrett__text {
  color: var(--bf-ink);
}
.stil-harbeck .marke__jahr,
.stil-harbeck .marke__kachel dt {
  color: var(--bf-ink-soft, #5c5c5c);
}
.stil-harbeck .marke__kanal,
.stil-harbeck .schachbrett__feld--dunkel .schachbrett__link {
  color: var(--bf-signal-dark);
  border-bottom-color: var(--bf-signal);
}
.stil-harbeck .marke__kanal:hover,
.stil-harbeck .schachbrett__feld--dunkel .schachbrett__link:hover {
  color: var(--bf-ink);
  border-bottom-color: var(--bf-ink);
}

/* Das Grundzeichen war weiß — auf hellem Grund trägt es nicht mehr. */
.stil-harbeck .marke__kachel::after {
  filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4000%) hue-rotate(350deg);
  opacity: .07;
}


/* =============================================================================
   Variante «Harbeck» — Teil 39: keine Faser (aufgegeben)
   -----------------------------------------------------------------------------
   Am 07.09.2026 lag hier kurz eine Haarlinien-Textur (1px, Schritt 14px, 62°,
   3,5 bzw. 4,5 Prozent Deckkraft) auf den Textkacheln, der Aktionsbahn und dem
   Fuß — als CSS-Verlauf, also ohne Datei und ohne Skalierungsfehler. Sie war
   der vierte Anlauf für einen Grund hinter den Flächen. Rückmeldung: «линии не
   нравятся».

   Damit sind alle vier Wege durch: Logo gekachelt, Logo klein, Logo groß,
   Textur. Die Flächen bleiben glatt. Wenn ein Grundmuster zurückkommt, dann
   nicht auf gut Glück, sondern nach einer Vorlage, die der Kunde zeigt.
   ============================================================================= */


/* =============================================================================
   Variante «Harbeck» — Teil 40: die Fahrzeuge stehen frei im Feld
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026 zum Kreuz: «не красиво ты тут вписал картинку слева».
   Nachgemessen bei 1.440px, beide Bildfelder sind 720x480 mit 43px Polster,
   der Kasten also 634x394 (Verhältnis 1,61):

     Feld oben rechts  Zeichnung 634x412 (1,54) → gemalt 606x394
                       Luft: seitlich 14px, oben/unten 0
     Feld unten links  Foto 633x365 (1,73)      → gemalt 634x365
                       Luft: seitlich 0,  oben/unten 14px

   Jedes Fahrzeug stößt also an zwei Seiten an die Kante, und die beiden Felder
   tun es spiegelverkehrt — mal oben und unten, mal links und rechts. Das ist
   kein Zufall und mit mehr Polster auch nicht zu beheben: `object-fit: contain`
   füllt IMMER eine der beiden Richtungen randlos aus. Solange das Bild so groß
   ist wie sein Kasten, gibt es auf dieser Achse keinen Abstand — egal, wie viel
   Polster das Feld ringsum trägt.

   Also wird das Bild kleiner als sein Kasten: 86 Prozent in beiden Richtungen.
   Damit bleibt auf jeder Seite Luft, unabhängig davon, welches Verhältnis eine
   Aufnahme mitbringt — auch bei jeder künftigen.
   ============================================================================= */
.stil-harbeck .schachbrett__feld--bild {
  display: grid;
  place-items: center;
}
.stil-harbeck .schachbrett__bild {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

/* =============================================================================
   Variante «Harbeck» — Teil 41: Fahrzeuge im Raster ungeschnitten
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026 zum Shop: «тут выводить картинки целыми».
   Nachgemessen bei 1.440px: die Kachel ist 392x294 (4:3), das Foto eines
   Bootsanhängers 730x257 (2,84). Mit `cover` bleiben davon 34 Prozent der
   Breite stehen — Deichsel und Heck standen ausserhalb der Kachel, das
   Fahrzeug war an beiden Enden abgeschnitten. Damals wurde JEDE Kachel auf
   `contain` gestellt.

   22.09.2026, Screenshot des Kunden: das Raster mit den Hoffotos vom 17.09.
   sah danach zusammengewürfelt aus — 16:9 mit Balken oben und unten, 3:4
   mit Balken links und rechts, 4:3 randlos, alles nebeneinander. Nachgemessen
   an allen 22 Kacheln (Aufstellung in inc/theme_functions.php,
   bunnefeld_bild_kachelmodus): kein Hoffoto ist breiter als 16:9, das
   Fahrzeug steht überall mittig mit Luft. Der Beschnitt auf 4:3 nimmt
   Himmel und Pflaster, nicht den Anhänger.

   Deshalb entscheidet jetzt die Vorlage je Bild, wie es liegt:
     --foto  Querformat-Foto: füllt die Kachel, Mitte
     --hoch  Hochformat-Foto: füllt die Kachel, Fokus 60 % — Anhänger und
             Seilwinde stehen im unteren Bilddrittel, mit 50 % wäre das
             Fahrgestell angeschnitten (geprüft an IMG_5062, 5533, 5458)
     --frei  freigestellt ODER breiter als 2:1: ganz zeigen, grauer Grund,
             Innenabstand (Regeln weiter oben, Teil «Freigestellt auf grauer
             Fläche»). Die 2:1-Grenze fängt den Fall vom 07.09. ab.
   ============================================================================= */
.stil-harbeck .shop__card-image--hoch,
.stil-harbeck .products__image--hoch { object-position: 50% 60%; }

/* =============================================================================
   Variante «Harbeck» — Teil 42: der Abschlussblock verliert das Rot und den Spalt
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026 zu /anhaenger/: «не нравится блок красный + снизу
   отступ». Nachgemessen bei 1.440px:

     Kachel        0–1.440 x 4.854–5.401   volle Breite, rote Hälfte 799px
     darunter      5.401–5.496             95px WEISS
     Fuß           ab 5.496                #222222

   Zwei getrennte Fehler an einer Stelle.

   Erstens die Farbe. Teil 34, 37 und 38 haben die großen roten Flächen der
   Startseite nacheinander hell gestellt, bis Rot wieder das war, was das
   Regelwerk verlangt: ein Signal. Auf den Unterseiten blieb dieser Block als
   letzte große rote Bahn übrig — 437.000 px² Vollton unter einer Seite, die
   sonst hell ist. Er wird hell wie `aktion`: Grund #f8f8f8, Schrift Ink, und
   Rot steht nur noch auf dem Knopf und auf dem Strich über der Zeile. Damit
   zeigt Rot auf der ganzen Seite genau auf die eine Handlung.

   Zweitens der Spalt. Die Kachel läuft von Fensterkante zu Fensterkante, die
   Sektion trägt darunter aber weiter ihre 95px Abschnittsabstand (Teil 27).
   Zwischen einer randlosen Bahn und dem dunklen Fuß wird daraus ein weißer
   Streifen, der wie ein Fehler aussieht — der Abstand zwischen zwei Bändern
   gehört zwischen Bänder, nicht zwischen Band und Seitenende. Ist der Block
   der letzte im Satzspiegel, endet die Seite an seiner Unterkante.
   ============================================================================= */
.stil-harbeck .cta__content {
  /* 11.09.2026: war seit heute Vormittag hell (--bf-bg-alt). Hell ist aber der
     Grauton, den die halbe Seite trägt — der Abschluss stand auf demselben
     Grund wie alles davor. Jetzt Ink, siehe Teil 55 am Dateiende.
     Das `!important` bleibt: es schlägt das rote `!important` weiter oben. */
  background: var(--bf-ink) !important;
}
.stil-harbeck .cta__title,
.stil-harbeck :is(#content, #primary) .cta__title {
  color: var(--bf-ink);
}
.stil-harbeck .cta__text,
.stil-harbeck .cta__text p {
  color: var(--bf-ink-soft, #5c5c5c);
}
/* Der Strich über der Zeile war weiß, weil darunter Rot lag. */
.stil-harbeck :is(#content, #primary) .cta__title::before,
.stil-harbeck body.home .cta__title::before {
  background: var(--bf-signal);
}
/* Der Knopf trug die Farbe der Fläche verkehrt herum: weiß auf Rot. Auf hellem
   Grund ist er selbst das Signal — dieselbe Rechnung wie bei `aktion__knopf`
   in Teil 34.

   `!important` steht hier, weil bunnefeld.css den Knopf mit `!important` weiß
   setzt («Der Knopf im dunklen Aufruf-Block ist die Ausnahme»). Diese Ausnahme
   galt der Graphitplatte, die es seit Teil 12.2 nicht mehr gibt; ohne Gegenwehr
   stünde jetzt Weiß auf #f8f8f8, also 1,05:1 — der Knopf war auf dem ersten
   Abzug dieser Änderung tatsächlich unsichtbar. Die Regel der Grundfassung
   bleibt stehen, damit die Variante `?stil=alt` mit ihrem dunklen Block
   weiterhin stimmt. */
.stil-harbeck .cta .cta__btn,
.stil-harbeck .cta__card .cta__btn,
.stil-harbeck a.cta__btn {
  background: var(--bf-signal) !important;
  border-color: var(--bf-signal) !important;
  color: #fff !important;
}
.stil-harbeck .cta .cta__btn:hover,
.stil-harbeck .cta__card .cta__btn:hover,
.stil-harbeck a.cta__btn:hover {
  background: var(--bf-ink) !important;
  border-color: var(--bf-ink) !important;
  color: #fff !important;
}
/* 11.09.2026 nachgezogen: dieser Block ist von heute Vormittag und rechnete
   noch mit dem hellen Grund (#f8f8f8). Seit Teil 55 ist der Abschnitt Ink —
   auf Dunkel kam die Rufnummer damit auf 2,38:1 und war die dunkelste Zeile
   auf schwarzem Grund. Dass die spätere Regel weiter unten (#fff) nicht griff,
   liegt an dieser hier: `.cta a[href^="tel:"]` zählt eine Klasse mehr als
   `.cta__phone-value`. Also an der Quelle geändert statt ein `!important`
   daraufzusetzen. Gemessen danach: Nummer 15,9:1, Beschriftung 8,0:1. */
.stil-harbeck .cta__phone,
.stil-harbeck .cta__phone-label {
  color: rgba(255, 255, 255, .68);
}
.stil-harbeck .cta a[href^="tel:"],
.stil-harbeck .cta__phone-value {
  color: #ffffff;
}
.stil-harbeck .cta__phone-value:hover {
  color: var(--bf-signal-dark);
}

/* Kein Abschnittsabstand unter der randlosen Bahn, wenn sie die Seite
   beschließt. `:last-child` trifft genau diesen Fall und lässt den Block in
   der Mitte einer Seite unangetastet. */
.stil-harbeck body :is(#content, #primary) > .cta:last-child {
  padding-bottom: 0;
}

/* =============================================================================
   Variante «Harbeck» — Teil 43: die bildlose Reihe steht auf der Satzkante
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026 zu /miettrailer/: «странная страница по дизайну».
   Nachgemessen bei 1.440px, die drei Kanten der Seite:

     Brotkrume, Seitentitel, erste Reihe   x = 116
     «So läuft die Miete»                  x = 408   ← mittig, 624px breit
     Foto der ersten Reihe                 x = 807 … 1440

   Die mittlere Kante stammt aus Teil 12.5: fehlt das Bild, wurde die Reihe
   einspaltig, mittig und auf 68ch verengt — gedacht als Rettung gegen die
   damals halbleere rechte Hälfte. Sie hat den Text aus der Flucht der ganzen
   Seite genommen. Seit Teil 24 steht hier alles links auf 116; eine einzelne
   mittige Insel dazwischen ist genau das, was die Seite fremd wirken lässt.

   Statt mittig: die Reihe behält zwei Spalten, nur trägt die linke jetzt die
   Überschrift und die rechte den Text — dieselbe Kopf-links-Satz-rechts-Figur,
   die die Variante auf den Inhaltsseiten ohnehin benutzt. Damit steht der
   Titel auf 116, der Satz füllt die Breite, und es bleibt kein leeres Feld.
   ============================================================================= */
.stil-harbeck .simple__inner:not(:has(.simple__media *)) {
  justify-content: flex-start;
  align-items: start;
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
}
.stil-harbeck .simple__inner:not(:has(.simple__media *)) > .simple__content {
  display: contents;
  width: auto;
  max-width: none;
  margin-inline: 0;
}
.stil-harbeck .simple__inner:not(:has(.simple__media *)) > .simple__content > .title {
  text-align: left;
  margin: 0;
  align-self: start;
}
.stil-harbeck .simple__inner:not(:has(.simple__media *)) > .simple__content > .text {
  width: auto;
  max-width: 68ch;
}
/* Ein Knopf in dieser Reihe gehört unter den Satz, nicht unter die Überschrift. */
.stil-harbeck .simple__inner:not(:has(.simple__media *)) > .simple__content > .simple__btn {
  grid-column: 2;
  justify-self: start;
}
@media (max-width: 900px) {
  .stil-harbeck .simple__inner:not(:has(.simple__media *)) {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 3vw, 28px);
  }
  .stil-harbeck .simple__inner:not(:has(.simple__media *)) > .simple__content > .simple__btn {
    grid-column: 1;
  }
}

/* =============================================================================
   Variante «Harbeck» — Teil 44: die Bildwand bekommt ihre Fuge zurück
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026 zu «Weitere Aufbauten» auf /anhaenger/: «тут не
   красиво галерея выглядит». Zwei Ursachen, nacheinander gemessen.

   Die erste liegt im Block selbst und ist dort behoben (drei feste Spalten
   statt `auto-fill`, s. blocks/projects/template.php): sechs Bilder standen
   4 + 2, die zweite Zeile war zur Hälfte leer.

   Die zweite steht hier. Teil 12.6 hat die Bildraster auf `gap: 0` gesetzt —
   «Bilder an Bildern, ohne Fuge». Diese Regel stammt aus der Vorgabe vom
   25.08 («eckig und aneinander»), die sich auf brenderup.com bezog. Am
   03.09.2026 wurde das Vorbild harbeck.de im Browser bei 1.440px nachgemessen:
   seine Reihen stehen auf `gap: 16px`, nicht auf Stoß. Die Produktreihen haben
   ihre Fuge damals zurückbekommen, die Fotoraster wurden übersehen — sechs
   Aufnahmen auf Stoß lesen sich als eine einzige Collage, und genau das war
   schon einmal die Rückmeldung («всё слито»).

   Also dieselbe Fuge wie im Rest des Hauses. Bei 1.208px Satzbreite bleiben
   damit drei Kacheln zu 392x294.
   ============================================================================= */
.stil-harbeck .projects--masonry .projects__masonry { gap: 16px; }
@media (max-width: 900px) {
  .stil-harbeck .projects--masonry .projects__masonry { gap: 12px; }
}
@media (max-width: 520px) {
  .stil-harbeck .projects--masonry .projects__masonry { gap: 8px; }
}

/* Nachtrag zu Teil 42: die Textkante des Blocks stand auf 100, der Rest der
   Seite auf 116. Der Wert stammt aus Teil 14.5 und rechnet mit 1.240px — das
   ist die Außenkante des Satzspiegels, nicht die Kante, auf der die Schrift
   steht. Gemessen bei 1.440px: Brotkrume, Überschriften, Bildwand und
   Fußspalten beginnen alle bei 116, der Aufruf allein bei 100.

   Der untere Anschlag ist 16px und nicht 24: unterhalb von 1.240px ist der
   Satzspiegel so breit wie das Fenster und trägt 16px Polster — auf dem iPad
   hoch (834px) stand die Überschrift der Seite auf 16, der Aufruf auf 24. */
.stil-harbeck .cta__content {
  padding-left: max(16px, calc((100vw - 1208px) / 2));
}

/* =============================================================================
   Variante «Harbeck» — Teil 45: die Beratungskarte wird dunkel
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026 zur Produktseite: «можно черный блок справа вместо
   красного». Gemessen: die Karte ist 320x404 = 129.000 px² Vollton-Rot, und
   sie steht keine 600px unter dem roten Warenkorb-Knopf (344x60). Zwei rote
   Flächen übereinander, von denen nur eine anklickbar ist — die größere ist
   die stumme.

   Die Karte wird Ink (#222222), also derselbe Ton wie Kopf und Fuß, und das
   Rot rutscht auf den Knopf INNERHALB der Karte. Damit zeigt auf der ganzen
   Produktseite jede rote Fläche auf eine Handlung: Warenkorb, Anfrage.

   Nachgerechnet auf #222222: Weiß 15,9:1, der stille Text auf 82 % Weiß
   10,3:1, der rote Knopf mit weißer Schrift 5,2:1 — alle über der Norm.
   ============================================================================= */
.stil-harbeck .bf-pd__aside {
  background: var(--bf-ink);
}
/* Der Knopf war weiß mit roter Schrift, weil die Fläche rot war. Auf dunklem
   Grund ist Rot wieder verfügbar — und hier ist es richtig, denn der Knopf ist
   das Einzige in der Karte, das etwas tut. */
.stil-harbeck .bf-pd__aside .bf-pd__btn--ghost {
  background: var(--bf-signal);
  border-color: var(--bf-signal);
  color: #fff;
}
.stil-harbeck .bf-pd__aside .bf-pd__btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--bf-ink);
}
.stil-harbeck .bf-pd__aside-phone:hover {
  color: #fff;
}

/* =============================================================================
   Variante «Harbeck» — Teil 46: der Kopf von «Handwerk statt Katalog»
   -----------------------------------------------------------------------------
   Rückmeldung 07.09.2026 zu /ueber-uns/: «не красивая страница со странными
   отступами текста». Nachgemessen bei 1.440px, alle Köpfe aller Seiten
   verglichen (Titel-Kante gegen Text-Kante) — eine einzige Stelle fällt raus:

     philosophy__head   Titel x = 116   Text x = 452   Abstand 336px
     alle anderen Köpfe                 Titel und Text auf derselben Kante

   Die Ursache steht in Teil 2: die Abschnittsköpfe bekamen dort `align-items:
   center` und der Vorspann `margin-inline: auto`. Später zog Teil 24 alle
   Überschriften auf die linke Kante — der Vorspann blieb aber mittig. Bei den
   übrigen Köpfen fällt es nicht auf, weil sie an diesen Stellen gar keinen
   Vorspann tragen; hier trägt er zwei Absätze.

   Der Kopf wird das, was sein Name im Ursprungs-Theme schon meinte und was
   Teil 2 selbst beschreibt («zweispaltig: Titel links, Vorspann rechts») —
   dieselbe Figur wie die bildlose Reihe in Teil 43. Damit steht der Titel auf
   116, der Vorspann füllt die Breite, und die Seite hat wieder zwei Kanten
   statt drei.
   ============================================================================= */
.stil-harbeck .philosophy__head {
  display: grid;
  /* Dieselbe Spalte wie in Teil 43 — die beiden Köpfe sollen eine Figur sein
     und nicht zwei ähnliche. */
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 4vw, 72px);
  text-align: left;
}
.stil-harbeck .philosophy__head .title {
  text-align: left;
  margin: 0;
}
.stil-harbeck .philosophy__head .text {
  margin-inline: 0;
  max-width: 62ch;
}
@media (max-width: 900px) {
  .stil-harbeck .philosophy__head {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 3vw, 24px);
  }
}

/* =============================================================================
   Variante «Harbeck» — Teil 47: die Bildbahn bleibt stehen, der Rest zieht darüber
   -----------------------------------------------------------------------------
   Rückmeldung 08.09.2026: der scrollgebundene Rundgang «работает странно» —
   statt der Bildfolge soll hier ein Foto stehen, und der nächste Abschnitt soll
   sich darüber schieben. Als Vorlage nannte der Nutzer
   ohlmeier-trailer.de/spezial/; dort im Browser nachgesehen:

     Titelfeld   position: fixed, top 0, 504px hoch bei 1.440px Fensterbreite
     Bild        als background-image, cover
     danach      alles Weitere liegt im Fluss und schiebt sich darüber

   Hier steht `sticky` statt `fixed`. Der Unterschied ist nicht Geschmack: ein
   festes Feld fällt aus dem Fluss, dann rutscht der ganze Rest der Seite um
   seine Höhe nach oben und braucht einen Platzhalter, der genau so hoch ist.
   Ein klebendes Feld behält seine Höhe selbst — eine Angabe weniger, die
   auseinanderlaufen kann.

   Damit sich die Nachbarn wirklich DARÜBER schieben und nicht dahinter
   verschwinden, brauchen sie zweierlei: eine eigene Stapelebene und einen
   deckenden Grund. Beides steht unten für alle Geschwister nach der Bahn —
   nicht nur für den direkten Nachbarn, sonst blitzt das Bild später wieder
   durch (nachgesehen: `bandtitel` und `simple` tragen von Haus aus gar keinen
   eigenen Grund, dort schiene das Foto hindurch).
   ============================================================================= */
.bildbahn {
  position: sticky;
  top: 0;
  z-index: 0;
  /* 08.09.2026, Wunsch: höher. Vorher 504px bei 1.440 (das Maß des
     Vorbilds), jetzt 677 — gut drei Viertel der Fensterhöhe, sodass beim
     Darüberziehen des nächsten Abschnitts noch zu sehen ist, WORÜBER er zieht. */
  height: clamp(360px, 47vw, 700px);
  overflow: hidden;
  background: #14181b;
  padding-block: 0;
  display: flex;
  align-items: flex-end;
}
.bildbahn__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bildbahn__text {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(28px, 5vh, 56px);
  padding-bottom: clamp(24px, 4vh, 48px);
  color: #fff;
}
/* Die Vuale liegt nur unter der Schriftzone, nicht über dem ganzen Bild. */
.bildbahn__text::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: calc(100% + clamp(50px, 10vh, 120px));
  background: linear-gradient(to top, rgba(10, 13, 15, .80) 0%, rgba(10, 13, 15, .70) 46%, rgba(10, 13, 15, 0) 100%);
  z-index: -1;
  pointer-events: none;
}
.bildbahn__marke {
  margin: 0 0 12px;
  font-family: var(--bf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.bildbahn__marke::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 0 0 14px;
  background: var(--bf-signal);
}
.bildbahn__titel {
  margin: 0 0 10px;
  max-width: 20ch;
  font-family: var(--bf-cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(26px, 14px + 1.9vw, 44px);
  line-height: 1.06;
  letter-spacing: .02em;
  color: #fff;
}
.bildbahn__satz {
  margin: 0;
  max-width: 46ch;
  font-size: var(--bf-fs-md, 17px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}

/* Alles, was nach der Bahn kommt, zieht darüber hinweg. */
.stil-harbeck body :is(#content, #primary) > .bildbahn ~ * {
  position: relative;
  z-index: 1;
}

/* 14.09.2026, Safari (Handyvideo des Kunden): das Foto lag ÜBER «Über uns» und
   «Warum bunnefeld» — Grund und Überschriften darunter, die Kacheln darüber,
   durch die Fugen schien das Bild. Die Stapelung oben stimmt, Chrome und
   WebKit ohne GPU malen richtig; es ist die Ebenenbildung in Safari. Die
   klebende Bahn bekommt dort immer eine eigene GPU-Ebene, die Nachbarn nur,
   wenn Safari beim Scrollen eine Überdeckung erkennt — das tut er nicht
   zuverlässig, und was ohne eigene Ebene bleibt, malt er in den Seitengrund
   UNTER das Foto. Darüber lagen genau die Teile mit eigener Ebene: die
   eingeblendeten Kacheln (`.bf-reveal` trägt dauerhaft `will-change`).

   Erster Anlauf war, jedem Abschnitt nach der Bahn selbst eine Ebene zu geben
   (`will-change`). Nachgemessen: dann rundet jede Ebene ihre Oberkante für
   sich, und an Abschnittsgrenzen auf halben Pixeln (4.676,27 / 6.048,23 bei
   1.440px) blieb eine 1px-Zeile offen, durch die das Foto schien.

   Jetzt liegt die Bahn UNTER dem Inhalt, nicht neben ihm: `z-index: -1` in
   einem eigenen Stapel. Hat eine Ebene ein Kind mit negativem z-index auf der
   GPU, legt WebKit für ihren übrigen Inhalt pflichtgemäß eine eigene Ebene
   darüber — ohne jede Überdeckungsprüfung. Alle Abschnitte malen in diese
   eine Ebene, also auch keine Fugen zwischen ihnen. #content ist durchsichtig
   und trägt nichts Festes oder Hochgestapeltes, der eigene Stapel nimmt ihm
   nichts. Beide Angaben stehen zusammen unter `@supports`: ohne `:has()`
   landete der negative z-index im Wurzelstapel der Seite — nicht geprüft,
   also bleibt es dort beim alten Stand. */
@supports selector(:has(*)) {
  .stil-harbeck body :is(#content, #primary):has(> .bildbahn) {
    isolation: isolate;
  }
  .stil-harbeck body :is(#content, #primary) > .bildbahn {
    z-index: -1;
  }
}
/* Der deckende Grund steht in `:where()` und hat damit Gewicht NULL: jede
   Regel, die einem Abschnitt einen eigenen Grund gibt, gewinnt darüber. Weiß
   bekommt also nur, wer von sich aus gar keinen hat.

   Ein erster Anlauf zählte die Abschnitte einzeln auf und nahm die drei aus,
   von denen ich annahm, sie brächten einen Grund mit. Nachgemessen: die
   `galeriewand` ist durchsichtig (`rgba(0,0,0,0)`) — durch die Fugen ihres
   Rasters hätte das Foto hindurchgeschienen. Und die Aufzählung war
   spezifischer als die Bänderregel aus Teil 9, hätte also den Wechsel
   grau/weiß der `simple`-Reihen überschrieben. Beides erledigt `:where()`.

   Das `section` steht bewusst AUSSERHALB der Klammer. Mit reinem `:where()`
   war das Gewicht null, und der Stil-Reset des Ursprungs-Themes
   (`html, body, div, … section { background: transparent }`, Gewicht 0-0-1)
   gewann — `bandtitel` und `galeriewand` blieben durchsichtig, gemessen
   `rgba(0,0,0,0)`. Mit dem Elementnamen davor steht es gleichauf mit dem
   Reset und gewinnt, weil harbeck.css später geladen wird; gegen jede
   Abschnittsregel mit Klasse verliert es weiterhin. */
section:where(.stil-harbeck body :is(#content, #primary) > .bildbahn ~ *) {
  background-color: var(--bf-bg, #fff);
}

/* Am Telefon war die Bahn 220px hoch und der Text darin 241 — er stand also
   höher als sein Feld und wurde oben abgeschnitten (die Augenbraue samt rotem
   Strich fehlte). Die Bahn wächst, und unter 560px trägt sie nur noch
   Augenbraue und Überschrift; der Satz steht ohnehin gleich darunter im
   nächsten Abschnitt. */
@media (max-width: 860px) {
  .bildbahn { height: clamp(380px, 72vw, 520px); }
}
@media (max-width: 560px) {
  .bildbahn__satz { display: none; }
  .bildbahn__titel { margin-bottom: 0; }
}
/* Auf flachen Fenstern (Telefon quer) bleibt nur die Überschrift. */
@media (max-height: 520px) {
  .bildbahn { height: 62svh; }
  .bildbahn__satz { display: none; }
  .bildbahn__titel { margin-bottom: 0; }
}


/* =============================================================================
   Variante «Harbeck» — Teil 48: Nachlese der Gerätebreiten
   -----------------------------------------------------------------------------
   Alle Änderungen dieser Sitzung über zehn Formate nachgemessen (390, 430,
   600, 768, 834, 1024, 1180, 1280, 1440 sowie das Telefon quer). Kein
   Querscrollen, nichts ragt heraus, nichts ohne Fläche. Eine Stelle sah in
   den Zahlen trotzdem falsch aus:

   Die Beratungskarte auf der Produktseite. Unter 900px rutscht sie unter den
   Text und wird so breit wie die Spalte — gemessen 736px auf dem iPad hoch,
   812px auf dem Telefon quer. Der Knopf ist `width: 100%` und war damit ein
   752px breites rotes Band. Ein Knopf wird nicht breiter, nur weil sein
   Kasten es wird; er behält sein Maß vom Schreibtisch (320px).
   ============================================================================= */
.stil-harbeck .bf-pd__aside .bf-pd__btn--ghost {
  max-width: 320px;
}

/* =============================================================================
   Variante «Harbeck» — Teil 46: schwarzer Fuß, kräftigere Kleinschrift
   -----------------------------------------------------------------------------
   Drei Rückmeldungen vom 08.09.2026 zu derselben Stelle, dem Fußende:
   «я бы не делал такой светлый шрифт везде», «убери серый фон», «чтобы был
   чёрный футер».

   Gemessen war der Fuß zweifarbig: die Fläche Ink (#222222), die Zeile mit
   Pflichtangaben darunter #454545. Das ist genau der Dunkelgrau-Ton, der im
   September aus dem Haus geflogen ist, weil er zwischen Dunkel und Hell hing
   und keine eigene Aufgabe hatte — hier stand er noch. Er geht jetzt auch hier;
   getrennt wird mit einer Haarlinie, nicht mit einer zweiten Fläche.

   Die Schrift stand auf Weiß mit 60–78 % Deckung, also Grau auf Dunkelgrau.
   Nachgerechnet auf dem neuen Grund #111111:
     Fließtext   88 %  → 13,6:1   (vorher 8,0:1)
     Pflichtzeile 85 % → 12,7:1   (vorher 6,6:1)
     Titel/Zahl 100 %  → 18,1:1
   Das Gewicht bleibt bei 400 — nachgemessen war nirgends ein dünner Schnitt
   im Spiel, blass war allein die Farbe.
   ============================================================================= */
.stil-harbeck .bff {
  background: #111111;
  color: rgba(255, 255, 255, .88);
}
/* Keine zweite Fläche mehr: dieselbe Schwärze, getrennt durch eine Linie. */
.stil-harbeck .bff__bar {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.stil-harbeck .bff__bar-inner {
  color: rgba(255, 255, 255, .85);
}
.stil-harbeck .bff__text,
.stil-harbeck .bff a,
.stil-harbeck .bff p,
.stil-harbeck .bff li {
  color: rgba(255, 255, 255, .88);
}
.stil-harbeck .bff__title,
.stil-harbeck .bff__phone { color: #fff; }
.stil-harbeck .bff a:hover { color: #fff; }

/* =============================================================================
   Variante «Harbeck» — Teil 47: das Klappmenü wird schmal
   -----------------------------------------------------------------------------
   «меню не делать широкое» / «не очень красиво меню открывается» (08.09.2026).

   Gemessen: die Liste war 260px breit — als feste `min-width` gesetzt — für
   zwei Punkte, deren längster («Über uns») 76px Text trägt. Dazu Versalien
   mit 0,05em Sperrung, die aus dem Grundsatz `.bfh__menu a` durchschlugen,
   obwohl die Hauptzeile darüber im September aus dem Versalsatz genommen
   wurde. Also: eine breite Platte, deren Inhalt in der linken Hälfte klebt,
   und zwei Schriftbilder übereinander.

   Jetzt hängt die Breite am Inhalt (`max-content`, Boden 150px), die Punkte
   stehen im selben gemischten Satz wie die Zeile darüber, und die Liste
   beginnt an der linken Kante ihres Elternpunkts statt mittig unter ihm —
   dieselbe Kante wie der rote Strich, der beim Überfahren unter dem
   Elternpunkt erscheint.
   ============================================================================= */
.stil-harbeck .bfh__menu .sub-menu {
  left: 0;
  transform: translate(0, 8px);
  min-width: 150px;
  width: max-content;
  padding: 6px 0;
  transition: opacity .22s var(--bf-ease), transform .22s var(--bf-ease), visibility .22s;
}
.stil-harbeck .bfh__menu > li:hover > .sub-menu,
.stil-harbeck .bfh__menu > li:focus-within > .sub-menu,
.stil-harbeck .bfh__menu > li.is-open > .sub-menu {
  transform: translate(0, 0);
}
.stil-harbeck .bfh__menu .sub-menu a {
  text-transform: none;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 9px 18px;
}

/* =============================================================================
   Variante «Harbeck» — Teil 48: Burger sichtbar, Kopftext höher (Telefon)
   -----------------------------------------------------------------------------
   Rückmeldung 08.09.2026 vom Telefon, zwei Stellen in einem Bild markiert.

   1. Der Burger. Die Regel oben färbt `.bfh__burger` auf Weiß, sobald die
      Leiste über dem Film liegt — nur sind die drei Striche `<span>` mit
      `background: var(--bf-ink)`, also fest #222222. Farbe vererbt sich, eine
      Hintergrundfarbe nicht: der Knopf war weiß, seine Striche blieben
      dunkelgrau auf dunklem Film. Gemessen: rgb(34,34,34) neben Lupe und Korb
      in rgb(255,255,255). Die Striche laufen jetzt auf `currentColor` und
      folgen damit jedem Zustand der Leiste — hell über dem Film, Ink sobald
      sie weiß wird und auf allen Unterseiten.

   2. Der Titelblock. Bis 1023px stand er auf `flex-end`, also unten am
      Bildrand: gemessen begann er bei y=365 von 854 und endete bündig mit der
      Fensterkante. Er steht jetzt mittig im verfügbaren Feld — rund 145px
      höher — und der Anhänger im Bild bleibt darunter frei.
   ============================================================================= */
.bfh__burger span { background: currentColor; }
.bfh__burger { color: var(--bf-ink); }

@media (max-width: 1023px) {
  .stil-harbeck body.home .hero--video .hero__head,
  .stil-harbeck body.home .hero--video .hero__inner {
    align-items: center;
  }
  /* Der Schleier war für Text ganz unten gebaut (ab 28 % kräftig). Weil der
     Text hochrückt, rückt die kräftige Zone mit — sonst begänne die Schrift
     im hellen Teil des Bildes. */
  .stil-harbeck body.home .hero--video .hero__head::after {
    background:
      linear-gradient(180deg,
        rgba(17, 17, 17, .44) 0%,
        rgba(17, 17, 17, .30) 10%,
        rgba(17, 17, 17, .84) 22%,
        rgba(17, 17, 17, .88) 78%,
        rgba(17, 17, 17, .74) 100%);
  }
}

/* =============================================================================
   Variante «Harbeck» — Teil 49: drei Schriftgrößen am Telefon
   -----------------------------------------------------------------------------
   «на мобильной версии не нравится что много разных размеров шрифтов, и есть
   очень маленькие размера, я бы сделал 2-3 разных размера» (08.09.2026).

   Nachgezählt bei 390px über sieben Seiten: 17 verschiedene Größen —
   36, 33, 32, 28, 26, 24, 22, 20, 19, 18, 17, 16, 15, 14, 13, 12 px. Das ist
   keine Leiter, das ist eine Rampe: 19 und 18 und 17 und 16 und 15 stehen
   nebeneinander und lassen sich nicht unterscheiden, sie machen das Bild nur
   unruhig. Und das Kleingedruckte lief bis auf 12px herunter.

   Am Telefon bleiben drei Stufen. Der Unterschied zwischen Rollen wird über
   Gewicht, Versalien und Farbe getragen, nicht über einen weiteren Zwischenwert:

     Groß   30px  Überschriften, Kopfzeile, Preis auf der Produktseite
     Text   17px  Fließtext, Links, Knöpfe, Preise in Kacheln, Spaltentitel
     Klein  14px  Augenbrauen, Pflichtangaben, Kennwerte, Notizen

   Die Leiter der Marken (--bf-fs-*) wird gleich mit umgestellt, damit alles,
   was daran hängt, von selbst mitkommt und keine vierte Größe zurückkehrt.
   ============================================================================= */
@media (max-width: 767px) {
  :root {
    --bf-fs-xs:   14px;
    --bf-fs-sm:   14px;
    --bf-fs-base: 17px;
    --bf-fs-lg:   17px;
    --bf-fs-xl:   17px;
    --bf-fs-2xl:  30px;
    --bf-fs-3xl:  30px;
  }

  /* Groß */
  .stil-harbeck h1,
  .stil-harbeck h2,
  .stil-harbeck .title,
  .stil-harbeck .hero__title-zeile,
  .stil-harbeck .cta__title,
  .stil-harbeck .segmente__title,
  .stil-harbeck .shop__title,
  .stil-harbeck .bandtitel__titel,
  .stil-harbeck .marke__anspruch,
  .stil-harbeck .bf-pd__title,
  .stil-harbeck .bf-pd__price-value,
  .stil-harbeck .bildbahn__titel,
  .stil-harbeck .schachbrett__titel,
  .stil-harbeck .aktion__titel,
  .stil-harbeck .contact__location-title { font-size: 30px; }

  /* Text */
  .stil-harbeck body,
  .stil-harbeck p,
  .stil-harbeck li,
  .stil-harbeck a,
  .stil-harbeck dd,
  .stil-harbeck .text,
  .stil-harbeck .hero__text,
  .stil-harbeck .simple__lead,
  .stil-harbeck .products__price,
  .stil-harbeck .shop__card-price,
  .stil-harbeck .bf-related__price,
  .stil-harbeck .bf-related__title,
  .stil-harbeck .categories__title,
  .stil-harbeck .reasons__item-title,
  .stil-harbeck .cta__phone-value,
  .stil-harbeck .bf-pd__aside-phone,
  .stil-harbeck .bf-pd__aside-label,
  .stil-harbeck .bf-pd__anruf-nr,
  .stil-harbeck .cabin-request__contact-phone,
  .stil-harbeck .product__accordion-head,
  .stil-harbeck .bff__title,
  .stil-harbeck .contact__map-gate-address,
  .stil-harbeck .segment__name,
  .stil-harbeck .hero__btn,
  .stil-harbeck .bf-pd__btn,
  .stil-harbeck .products__button,
  .stil-harbeck .products__button-transparent,
  .stil-harbeck .reasons__button,
  .stil-harbeck .aktion__knopf,
  .stil-harbeck .btn { font-size: 17px; }

  /* Klein — und hier hört es auf, tiefer geht nichts mehr. */
  .stil-harbeck .hero__vorzeile,
  .stil-harbeck .aktion__marke,
  .stil-harbeck .bandtitel__augenbraue,
  .stil-harbeck .bildbahn__marke,
  .stil-harbeck .marke__jahr,
  .stil-harbeck .marke__kanal,
  .stil-harbeck .bf-pd__sku,
  .stil-harbeck .bf-pd__grundpreis,
  .stil-harbeck .bf-pd__anruf-label,
  .stil-harbeck .bf-pd__aside-note,
  .stil-harbeck .bf-pd__aside-hours,
  .stil-harbeck .bf-pd__price-note,
  .stil-harbeck .bf-pd__counter,
  .stil-harbeck .bff__legalnums,
  .stil-harbeck .bff__vat,
  .stil-harbeck .contact__location-label,
  .stil-harbeck .contact__map-gate-label,
  .stil-harbeck .contact__map-gate-note,
  .stil-harbeck .cabin-request__label,
  .stil-harbeck .cabin-request__contact-label,
  .stil-harbeck .breadcrumbs,
  .stil-harbeck .breadcrumbs a,
  .stil-harbeck .breadcrumbs__link,
  .stil-harbeck .breadcrumbs__current,
  .stil-harbeck dt { font-size: 14px; }
}

/* -----------------------------------------------------------------------------
   Teil 49.1 — die Nachlese zur Dreierleiter
   -----------------------------------------------------------------------------
   Nachgemessen blieben vier Größen übrig, die Teil 49 nicht erwischt hat:

   33px  Der Titelgrad hängt nicht an der Marken-Leiter, sondern an einem
         eigenen Merkmal `--bf-titel` (clamp 33–49px), und die Regel dazu
         adressiert `:is(#content, #primary)` — eine Kennung schlägt jede
         Klassenkette. Also wird am Telefon das Merkmal selbst umgestellt,
         nicht die Regel überboten.
   18px  Der Klapptitel der Produktseite.
   16px  Zellen, Auszeichnungen und vier Kachelbeschriftungen, die keiner
         Klasse aus Teil 49 angehören.
   15px  Der Zustimmungsbalken des Plugins.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .stil-harbeck { --bf-titel: 30px; }

  .stil-harbeck strong,
  .stil-harbeck b,
  .stil-harbeck em,
  .stil-harbeck td,
  .stil-harbeck th,
  .stil-harbeck span,
  .stil-harbeck .text p,
  .stil-harbeck .shop__card-title,
  .stil-harbeck .categories__text,
  .stil-harbeck .bf-related__name,
  .stil-harbeck .cta__phone-label,
  .stil-harbeck .product__accordion-head { font-size: 17px; }

  /* Der Balken ist fremder Code, aber er steht auf unserer Seite: seine
     Schrift läuft auf dieselbe Leiter wie alles andere. */
  .stil-harbeck .cmplz-cookiebanner,
  .stil-harbeck .cmplz-cookiebanner p,
  .stil-harbeck .cmplz-cookiebanner .cmplz-title,
  .stil-harbeck .cmplz-btn { font-size: 14px; }

  /* Augenbrauen und Kleingedrucktes bleiben klein — sie stehen NACH den
     17px-Regeln oben, damit ein `span` in einer Augenbraue nicht hochgezogen
     wird. */
  .stil-harbeck .hero__vorzeile,
  .stil-harbeck .hero__vorzeile span,
  .stil-harbeck .aktion__marke,
  .stil-harbeck .bandtitel__augenbraue,
  .stil-harbeck .bildbahn__marke,
  .stil-harbeck .marke__jahr,
  .stil-harbeck .marke__kanal,
  .stil-harbeck .bf-pd__sku,
  .stil-harbeck .bf-pd__grundpreis,
  .stil-harbeck .bf-pd__anruf-label,
  .stil-harbeck .bf-pd__aside-note,
  .stil-harbeck .bf-pd__aside-hours,
  .stil-harbeck .bf-pd__price-note,
  .stil-harbeck .bf-pd__counter,
  .stil-harbeck .bff__legalnums,
  .stil-harbeck .bff__vat,
  .stil-harbeck .contact__location-label,
  .stil-harbeck .contact__map-gate-label,
  .stil-harbeck .contact__map-gate-note,
  .stil-harbeck .cabin-request__label,
  .stil-harbeck .cabin-request__contact-label,
  .stil-harbeck .breadcrumbs,
  .stil-harbeck .breadcrumbs a,
  .stil-harbeck .breadcrumbs__link,
  .stil-harbeck .breadcrumbs__current,
  .stil-harbeck .bf-specline,
  .stil-harbeck .bf-specline span,
  .stil-harbeck dt { font-size: 14px; }
}

/* -----------------------------------------------------------------------------
   Teil 49.2 — die letzten fünf Ausreißer
   -----------------------------------------------------------------------------
   Jeder einzeln nachgeschlagen, wer gewinnt und warum:

     12px  `.stil-harbeck body.home .segment__name` — Klasse plus body.home,
           schlägt die Grundregel aus 49. Wird auf gleicher Höhe beantwortet.
     16px  `.stil-harbeck .products__title` (clamp 16–19) — zwei Klassen gegen
           Klasse-plus-Typ. Gleicher Selektor, später im Blatt.
     18px  steht in einem `<style>` IM Vorlagenblock der Produktseite,
           `.product__panel[data-panel="faq"] .product__accordion-head`.
     15px  gehört dem Zustimmungs-Plugin, drei Klassen tief.
     19px  `.simple__lead` auf den Innenseiten.

   `.segment__link` bleibt bei 0px: das ist kein Text, sondern der Kniff, mit
   dem der Zwischenraum zwischen zwei Inline-Kindern verschwindet. Die Schrift
   darin trägt `.segment__name`.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .stil-harbeck body.home .segment__name { font-size: 14px; }
  .stil-harbeck .products__title { font-size: 17px; }
  .stil-harbeck .simple .simple__lead { font-size: 17px; }
  .stil-harbeck .product__panel[data-panel="faq"] .product__accordion-head { font-size: 17px; }
  .stil-harbeck .cmplz-cookiebanner .cmplz-buttons .cmplz-btn,
  .stil-harbeck .cmplz-cookiebanner .cmplz-message,
  .stil-harbeck .cmplz-cookiebanner .cmplz-title { font-size: 14px; }
}

/* Der letzte Ausreißer: die Vorzeile der Startseite hängt an
   `.stil-harbeck body.home .simple .text .simple__lead` (clamp 19–23px) — vier
   Klassen tief, deshalb hier auf gleicher Höhe beantwortet. */
@media (max-width: 767px) {
  .stil-harbeck body.home .simple .text .simple__lead { font-size: 17px; }
}

/* Und die fünf Antworten im Klappteil der Produktseite — dieselbe Quelle wie
   der Klapptitel: ein `<style>` im Vorlagenblock, `[data-panel="faq"]`. */
@media (max-width: 767px) {
  .stil-harbeck .product__panel[data-panel="faq"] .product__accordion-body p,
  .stil-harbeck .product__panel[data-panel="faq"] .product__accordion-body { font-size: 17px; }
}

/* =============================================================================
   Variante «Harbeck» — Teil 50: Luft im Seitenkopf am Telefon
   -----------------------------------------------------------------------------
   «я бы на телефоне не сжимал бы все так, чуть свободнее в хиро секции»
   (08.09.2026).

   Gemessen bei 390px: Rand 16px, Abstand zwischen den Bauteilen 14px,
   Durchschuss der Überschrift 31,2px auf 30px Schrift (1,04 — die zwei Zeilen
   kleben aneinander), zwischen den beiden Knöpfen 12px. Unter dem letzten
   Knopf standen dagegen 247px ungenutztes Bild: der Block war eng gesetzt,
   obwohl Platz da war.

   Also alles eine Stufe weiter, bezahlt aus dem freien Feld darunter:
     Rand            16 → 22px
     Bauteile        14 → 20px
     Durchschuss   1,04 → 1,14
     Knöpfe          12 → 14px
   Der Block wächst dadurch um rund 40px und bleibt mit Abstand im Bild.
   ============================================================================= */
@media (max-width: 767px) {
  .stil-harbeck body.home .hero--video .hero__inner {
    padding-left: 22px;
    padding-right: 22px;
  }
  .stil-harbeck body.home .hero--video .hero__content { gap: 20px; }
  .stil-harbeck body.home .hero--video .hero__title { line-height: 1.14; }
  .stil-harbeck body.home .hero--video .hero__title-zeile { line-height: 1.14; }
  .stil-harbeck body.home .hero--video .hero__actions { gap: 14px; }
}

/* =============================================================================
   Variante «Harbeck» — Teil 51: eine Kante am Telefon, schwarze Zeichen,
                                 niedrigerer Kopf
   -----------------------------------------------------------------------------
   Drei Rückmeldungen vom 08.09.2026, alle drei nachgemessen:

   1. «меню иконка должна быть в ровень» — der Strich im Bild läuft vom Burger
      hinunter zum roten Strich der Augenbraue. Gemessen standen sie NICHT
      übereinander: die Balken des Burgers begannen bei x=44, der Text des
      Kopfes bei x=22.
      Dahinter steckte mehr als ein Knopf: am Telefon hatte das Haus gar keine
      gemeinsame Kante. Gezählt über die Startseite — 16px (zwölf Stellen),
      20px, 24px, dazu der Kopf auf 22px seit Teil 50. Vier Kanten.
      Jetzt eine: 22px für Abschnitte, Kopfleiste und Fuß. Der Burger bekommt
      -12px, damit nicht sein Kasten, sondern seine BALKEN auf dieser Kante
      stehen (der Kasten bleibt 42px groß — er muss mit dem Daumen zu treffen
      sein). Dasselbe rechts für das letzte Zeichen.

   2. «In the Black Color» zu den drei Zeichen der Leiste — sie standen auf
      rgb(69,69,69), also #454545. Das ist derselbe Zwischengrau, der im
      September aus dem Haus flog und den ich heute schon aus dem Fuß geholt
      habe; in der Leiste stand er noch. Jetzt Ink #222222, dieselbe Schwärze
      wie die Menüschrift daneben. Über dem Film bleiben sie weiß — die Regel
      dafür steht weiter oben und ist enger gefasst.

   3. «чуть высоту баннера уменьшить на телефоне» — der Kopf stand auf
      100svh. Unter dem letzten Knopf lagen 234px ungenutztes Bild. Am Telefon
      jetzt 86svh: bei 844px Fensterhöhe rund 726px, also gut hundert Pixel
      weniger, und unter den Knöpfen bleiben noch etwa 115px Bild.
   ============================================================================= */
@media (max-width: 767px) {
  .stil-harbeck .container,
  .stil-harbeck .bfh__inner,
  .stil-harbeck .bff__inner,
  .stil-harbeck .bff__bar-inner { padding-inline: 22px; }

  /* Der Kasten des Burgers ist 42px breit, die Balken 18px — sie sitzen also
     12px innerhalb. Diese 12px werden herausgezogen, damit die Balken auf der
     Hauskante stehen und nicht der unsichtbare Kasten. */
  .stil-harbeck .bfh__burger { margin-left: -12px; }
  .stil-harbeck .bfh__actions > *:last-child { margin-right: -12px; }

  .stil-harbeck body.home .hero--video .hero__head {
    min-height: 86vh;
    min-height: 86svh;
  }
}

/* Die Zeichen der Leiste: Ink statt #454545. */
.stil-harbeck .bfh__action { color: var(--bf-ink); }

/* =============================================================================
   Variante «Harbeck» — Teil 52: die Schublade wird schwarz und ruhiger
   -----------------------------------------------------------------------------
   «Menü Text smaller and Black background» (08.09.2026), dazu ein Bild vom
   Telefon, auf dem beim Schließen ein roter Streifen über der Seite stehen
   bleibt.

   Gemessen war die Schublade eine vollflächige rote Platte (`--hb-rot-verlauf`)
   mit 22px-Versalien in 700 — auf 390px Breite sind das gut 60 % Vollton-Rot
   auf dem Schirm, und die Punkte laufen fast bis an den Rand. Das war die
   letzte große rote Fläche im Haus; alle anderen sind im September gefallen.

   Jetzt: Ink-Schwarz wie Fuß und Leiste, Punkte auf der Telefonleiter
   (17px oben, 14px in den Unterpunkten statt 22px für beides). Rot bleibt in
   der Schublade nur noch als Strich am aktiven Punkt.

   Zum Streifen: in Chromium bei 390px ist die Schublade nach dem Schließen
   sauber weg (gemessen: display none, hidden, Höhe 0) — nachstellen ließ er
   sich nicht. Die wahrscheinliche Ursache ist die Höhe: `inset: 0` bindet die
   Platte an die DYNAMISCHE Fensterhöhe, und die springt in Safari genau dann,
   wenn die Adressleiste ein- oder ausfährt — also beim Schließen. Deshalb
   steht die Höhe jetzt fest auf `100svh`, der kleinsten sicheren Höhe, und die
   Platte wird beim Schließen zusätzlich hart aus der Malebene genommen.
   ============================================================================= */
.stil-harbeck .bfh__mobile {
  background: #111111;
  height: 100vh;
  height: 100svh;
}
/* Beim Schließen nicht nur durchsichtig, sondern wirklich fort: `opacity: 0`
   allein lässt in Safari eine Malebene stehen. */
.stil-harbeck .bfh__mobile:not(.is-open) {
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
}
.stil-harbeck .bfh__mobile.is-open {
  visibility: visible;
  transform: none;
}

.stil-harbeck .bfh__mobile-menu a {
  font-size: 17px;
  letter-spacing: .02em;
}
.stil-harbeck .bfh__mobile-menu .sub-menu a {
  font-size: 14px;
  font-weight: 500;
}
.stil-harbeck .bfh__mobile-menu li {
  border-bottom-color: rgba(255, 255, 255, .14);
}
.stil-harbeck .bfh__mobile-menu .current-menu-item > a {
  color: #fff;
  box-shadow: inset 3px 0 0 var(--bf-signal);
  padding-left: 12px;
}

/* Nachtrag zu Teil 51: der Burger sitzt `position: absolute` an der Leiste,
   sein `left` zählt ab der Kante des inneren Kastens (x=16). Nachgerechnet
   landen die Balken bei 16 + left, das `margin-left: -12px` ist darin schon
   verrechnet. Für die Hauskante 22px heißt das left: 6px — vorher stand dort
   clamp(16px, 4vw, 32px) und die Balken lagen auf 32. */
@media (max-width: 767px) {
  .stil-harbeck .bfh__burger { left: 6px; }
}

/* =============================================================================
   Variante «Harbeck» — Teil 53: Bildwand ohne Parallaxe, roter Abschluss zurück
                                 im Verlauf und eine Spur breiter
   -----------------------------------------------------------------------------
   Drei Rückmeldungen vom 08.09.2026.

   1. «на этой секции убрать такую анимацию» — gezeigt auf die Bildwand unter
      «Für jeden Einsatz gebaut». Die Bewegung dort war kein Einblenden, sondern
      `background-attachment: fixed`: das Foto stand still, während der Rahmen
      darüber wegscrollte. Unter 900px und bei abbestellter Bewegung war das
      ohnehin abgeschaltet — es lief also nur auf dem großen Schirm, und der
      Ausschnitt verschob sich beim Scrollen bei jeder Fensterhöhe anders.
      Jetzt steht das Bild fest im Rahmen, überall gleich.

   2. «вернуть полосу с градиентом как было ранее» — der Abschluss des
      Seitenkopfs stand seit Teil 20.1 auf flachem Signalrot. Zurück auf den
      Hausverlauf `--hb-rot-verlauf` (#cf1420 → #d7161e, 100°).
      Wichtig zur Einordnung: die Verläufe, die am 02.09. abgelehnt wurden
      («gradients красного в белый, некрасивые»), liefen Rot nach WEISS. Dieser
      hier läuft Rot nach Rot — zwei Nuancen derselben Farbe, kein Auslaufen.

   3. «чтобы та полоса была чуть шире» — gemessen war der Balken 16px hoch bei
      1440 und 10px bei 390. Jetzt 22px bzw. 14px.
   ============================================================================= */
.stil-harbeck .galeriewand__feld--fest {
  background-attachment: scroll;
}

/* 11.09.2026: die Höhenregel ist entfallen — das Band trägt wieder Inhalt und
   bemisst sich nach ihm, siehe Teil 59 am Dateiende. */
/* 11.09.2026, Nachtrag: «что бы она была с градиентом как раньше».
   Hier stand seit heute Vormittag der Hausverlauf #cf1420 → #d7161e. Der ist
   zwar ein Verlauf, aber keiner, den man sieht: beide Enden sind dasselbe
   Dunkelrot, der Abstand zwischen ihnen beträgt in der Helligkeit rund zwei
   Prozent. Auf einem 22px hohen Streifen bleibt davon nichts übrig.

   «Wie früher» ist der Verlauf aus dem ersten Seitenkopf (Stand 481507b,
   vor dem Commit «Farbe flach»): Weinrot → Signalrot → helles Rot über drei
   Haltepunkte. Der hat ein dunkles und ein helles Ende und liest sich deshalb
   als Verlauf. Er läuft ausserdem Rot nach Rot und nicht Rot nach Weiss — das
   war es, was am 02.09. abgelehnt wurde. */
.stil-harbeck .hero__bar--kante::before {
  background: linear-gradient(100deg, #78090e 0%, #d7161e 55%, #e2242b 100%);
}


/* =============================================================================
   Variante «Harbeck» — Teil 54: Anhänger werden besprochen, nicht gekauft
   -----------------------------------------------------------------------------
   Kundenwunsch 11.09.2026: im Shop nur Ersatzteile und Zubehör verkaufen,
   Anhänger dagegen nicht in den Warenkorb, sondern ein Knopf zu Jörg.

   An die Stelle von Mengenwähler und Korb tritt ein Knopf mit Hörer, Name und
   Nummer. Die Nummer steht mit im Knopf: am Telefon wählt der Knopf, am
   Schreibtisch wählt er nichts — dort ist die sichtbare Zahl die eigentliche
   Auskunft. Ein Knopf, der am Rechner nur «anrufen» sagt, ist dort eine
   Sackgasse.

   Der Knopf erbt die Maße der Reihe, in der er steht (`shop__more-btn`,
   `bf-pd__btn`, `products__more-link`) — hier steht nur, was ihn zum Anruf
   macht: Zeichen, Nummer, Laufrichtung.
   ============================================================================= */
.stil-harbeck .bf-joerg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}
.stil-harbeck .bf-joerg__zeichen {
  flex: none;
  width: 18px;
  height: 18px;
}
/* Die Nummer ist Beiwerk im Knopf: gleiche Farbe, ein Stück leiser, und sie
   steht hinter einem senkrechten Strich statt hinter einem Komma — das trennt
   ohne ein weiteres Satzzeichen in Versalien. */
.stil-harbeck .bf-joerg__nr {
  font-family: var(--bf-mono);
  font-size: .92em;
  letter-spacing: 0;
  opacity: .82;
  padding-left: 10px;
  border-left: 1px solid currentColor;
}
/* In der Kachel ist kein Platz für die Nummer — dort trägt der Knopf nur den
   Namen; die Nummer steht eine Klickstrecke weiter auf der Produktseite. */
.stil-harbeck .shop__more-btn.bf-joerg,
.stil-harbeck .products__more-link.bf-joerg,
.stil-harbeck .shop__more-btn.bf-preisanfrage,
.stil-harbeck .products__more-link.bf-preisanfrage {
  width: 100%;
}
.stil-harbeck .bf-pd__buy--gesperrt { display: block; }
.stil-harbeck .bf-pd__buy--gesperrt .bf-joerg { width: 100%; }

/* «Grundpreis» hinter dem Betrag in der Reihe auf der Startseite — dieselbe
   Form wie auf der Produktseite (`bf-pd__grundpreis`). */
.stil-harbeck .products__grundpreis {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--bf-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--bf-steel-500);
  text-transform: none;
}
@media (max-width: 767px) {
  .stil-harbeck .products__grundpreis { font-size: 14px; }
  .stil-harbeck .bf-joerg { gap: 8px; }
  .stil-harbeck .bf-joerg__nr { padding-left: 8px; }
}

/* =============================================================================
   Variante «Harbeck» — Teil 55: der Anfrage-Block als Schlussstein
   -----------------------------------------------------------------------------
   «эта секция была — её вернуть, но сделать её красивее» (11.09.2026).

   Vorgeschichte, damit der Weg klar ist: im August war das Feld vollflächig
   rot, am 08.09. kam «не нравится блок красный», daraufhin wurde es hell
   (#f8f8f8). Hell ist aber genau der Grauton, den die halbe Seite schon trägt —
   der Abschluss stand damit auf demselben Grund wie alles davor und hatte kein
   Gewicht mehr. Gemessen: Fläche 807x547, Grund #f8f8f8, daneben #ffffff.

   Jetzt Ink. Das ist dieselbe Antwort wie bei der Beratungskarte auf der
   Produktseite (Teil 45, dort ausdrücklich gewünscht): dunkle Fläche, weiße
   Schrift, und das Rot sitzt allein auf dem Knopf — der einzigen Stelle, die
   etwas tut. Unter dem Block steht der Fuß auf #111111; die Stufe 222 → 111 ist
   sichtbar genug, um zwei Flächen zu bleiben, und klein genug, dass die Seite
   nach unten hin zusammengeht statt auszufransen.

   Nachgerechnet auf #222222: Überschrift weiß 15,9:1, Fließtext 88 % 13,1:1,
   roter Knopf mit weißer Schrift 5,2:1.
   ============================================================================= */
.stil-harbeck .cta__title,
.stil-harbeck :is(#content, #primary) .cta__title { color: #fff; }
.stil-harbeck .cta__text,
.stil-harbeck .cta__text p { color: rgba(255, 255, 255, .88); }
.stil-harbeck .cta__phone-label { color: rgba(255, 255, 255, .68); }
.stil-harbeck .cta__phone-value { color: #fff; }
.stil-harbeck .cta__phone-value:hover { color: var(--bf-signal); }
/* Der rote Strich über der Überschrift bleibt rot — auf Ink ist er sichtbar,
   und er ist das Zeichen, mit dem jeder Abschnitt der Seite anfängt. */
.stil-harbeck .cta__title::before,
.stil-harbeck :is(#content, #primary) .cta__title::before { background: var(--bf-signal); }

/* Das Foto bekam 633 von 1440 und war damit die kleinere Hälfte, obwohl es das
   einzige Bild im Abschluss ist. Jetzt teilen sich Text und Bild die Breite. */
@media (min-width: 900px) {
  /* Die Karte ist ein Flex-Kasten, kein Raster — `grid-template-columns` lief
     dort ins Leere (gemessen: display:flex, Spalten 807/633). Die Hälften
     werden deshalb an den Kindern gesetzt. */
  .stil-harbeck .cta__content,
  .stil-harbeck .cta__media {
    flex: 1 1 50%;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  /* Der Text stand auf 16px Rand, das Haus steht seit Teil 51 auf 22. */
  .stil-harbeck .cta__content { padding: 40px 22px 44px; }
  /* 240px hohes Bild neben 401px Text las sich als Streifen, nicht als Bild. */
  .stil-harbeck .cta__media { min-height: 280px; }
}


/* =============================================================================
   Variante «Harbeck» — Teil 56: «Warum bunnefeld» nach der Vorlage des Kunden
   -----------------------------------------------------------------------------
   Die Vorlage vom 11.09.2026 zeigt keine Sinnbilder, sondern Zeichnungen: ein
   Fahrgestell mit roten Auszügen auf die Anbauteile, eine Schweißnaht am
   Vierkantrohr in Naheinstellung, den Umlauf aus vier Stationen um einen
   Anhänger. Dazu zwei Dinge, die den Aufbau tragen: die große helle Ziffer
   hinter dem Bild und ein rotes Wort am Schluss der Überschrift.

   Die Ziffer wandert damit von unter den Text nach hinter das Bild. Vorher war
   sie eine Fußzeile («— 01»), die niemand liest; als helle Fläche hinter der
   Zeichnung ordnet sie die vier Kacheln, ohne um Aufmerksamkeit zu bitten.

   Am Telefon bleibt die Ziffer bei den Kacheln mit Zeichnung weg: sie wäre ein
   vierter Schriftgrad in einer Leiste, die seit Teil 49 bewusst nur drei hat
   (30/17/14), und die Reihenfolge ist in einer Spalte ohnehin abzulesen. Bei
   der Zahlenreihe unter «Über uns» ist die Ziffer der Inhalt — dort bleibt sie
   und läuft auf dem Titelgrad mit.

   Der Rahmen der Kachel und die Zeichnung teilen sich die Kante: das Bild geht
   über die volle Kachelbreite, damit es Zeichnung bleibt und nicht Piktogramm
   in einem grauen Kästchen wird. Teil 80 weiter oben («reasons__item-icon»)
   läuft damit leer; er bleibt stehen, weil er nichts mehr trifft.
   -------------------------------------------------------------------------- */
.stil-harbeck .reasons__item {
  align-items: flex-start;
  text-align: left;
}
.stil-harbeck .reasons__bild {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}
.stil-harbeck .reasons__ziffer {
  position: absolute;
  top: -6px;
  left: -4px;
  z-index: 0;
  font-family: var(--bf-cond);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(34, 34, 34, .07);
}
.stil-harbeck .reasons__bild svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
/* Die Zeichnungen stehen in einem Raster und werden verschieden groß gesetzt —
   der Anhänger einmal auf 195 %, in der Flotte auf 66 %. Ohne diese Zeile
   würde die Strichstärke mitskalieren und die vier Bilder hätten vier
   verschiedene Federn. */
.stil-harbeck .reasons__bild svg * { vector-effect: non-scaling-stroke; }
.stil-harbeck .reasons__bild svg path,
.stil-harbeck .reasons__bild svg circle {
  fill: none;
  stroke: var(--bf-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stil-harbeck .reasons__bild .rs-rot path,
.stil-harbeck .reasons__bild .rs-rot circle { stroke: var(--bf-signal); }
.stil-harbeck .reasons__bild .rs-fuell path,
.stil-harbeck .reasons__bild .rs-fuell circle { fill: var(--bf-signal); stroke: none; }
.stil-harbeck .reasons__bild .rs-weiss { stroke: #ffffff; stroke-width: 2.6; }
.stil-harbeck .reasons__bild .rs-grund { fill: #ffffff; stroke: var(--bf-ink); }
.stil-harbeck .reasons__bild .rs-boden { stroke: var(--bf-steel-300); stroke-width: 1.6; }
.stil-harbeck .reasons__bild .rs-naht  { stroke-width: 2.4; }
.stil-harbeck .reasons__bild .rs-fuge  { stroke: var(--bf-steel-300); stroke-width: 1.2; }

/* Kachel ohne Zeichnung — die Zahlenreihe unter «Über uns». Dort ist die Zahl
   die Aussage, also steht sie im Satz und nicht hinter dem Bild. */
.stil-harbeck .reasons__bild--ziffer { margin-bottom: 12px; }
.stil-harbeck .reasons__bild--ziffer .reasons__ziffer {
  position: static;
  display: block;
  font-size: 42px;
  color: var(--bf-steel-300);
}

/* Das rote Wort am Schluss der Überschrift, wie in der Vorlage. */
.stil-harbeck .reasons__titel-rot {
  display: block;
  color: var(--bf-signal);
}

@media (max-width: 767px) {
  .stil-harbeck .reasons__bild:not(.reasons__bild--ziffer) .reasons__ziffer { display: none; }
  .stil-harbeck .reasons__bild--ziffer .reasons__ziffer { font-size: var(--bf-titel); }
  .stil-harbeck .reasons__bild { margin-bottom: 16px; }
}


/* =============================================================================
   Variante «Harbeck» — Teil 57: die Einsatzbereiche werden größer
   -----------------------------------------------------------------------------
   Rückmeldung 11.09.2026: «тут картинки крупнее» und «мелкие сильно».
   Nachgemessen bei 1.440px: die Kachel war 210px breit, das Feld 210×157, und
   das Fahrzeug darin nach Abzug des Polsters rund 164px. Ein Bootsanhänger ist
   dreimal so lang wie hoch — auf 164px bleibt von der Deichsel ein Strich und
   von den Kielrollen ein Punkt. Fünf Kacheln nebeneinander in einer 1.232er
   Spalte lassen einfach nicht mehr zu.

   Also drei statt fünf in der Reihe. Das Raster läuft auf sechs Spalten, jede
   Kachel nimmt zwei — dadurch stehen die beiden Kacheln der zweiten Reihe
   mittig unter den dreien darüber (Spalte 2 und 4) und sind exakt gleich breit.
   Ein Raster aus 3+2 mit gleichen Kacheln, nicht eine angebrochene Reihe.

   Gemessen danach: Kachel 384px, Fahrzeug rund 340px — gut doppelt so groß.

   Das Polster wandert von festen Pixeln auf Prozent. Bei 210px Kachel waren
   23px Seitenpolster 11 % der Breite; dieselben 23px auf 384px wären nur noch
   6 % — das Bild würde beim Vergrößern der Kachel relativ immer luftiger statt
   größer. Prozent halten das Verhältnis fest, egal wie breit die Kachel wird.

   Am Telefon stand die Reihe zweispaltig, das Fahrzeug also auf rund 150px —
   dort ist es am kleinsten von allen. Jetzt eine Spalte, dafür ein flaches Feld
   (2:1 statt 4:3): die Kachel wird dadurch kaum höher als zwei nebeneinander,
   das Fahrzeug aber doppelt so groß.
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   57.2 Doch alle fünf in einer Reihe
   -----------------------------------------------------------------------------
   Rückmeldung 11.09.2026: «нужно что бы было все в 1 ряд / но так тоже неплохо».
   Also zurück in eine Reihe — aber nicht zurück auf 164px Fahrzeug.

   Fünf Kacheln in einer 1.208er Spalte lassen rechnerisch nur rund 230px je
   Kachel zu, daran ist nichts zu drehen. Der Platz kommt deshalb aus zwei
   anderen Töpfen:

     Fuge      40px → 14px      macht 104px frei, das sind 21px je Kachel
     Polster   6 %  → 4 %       macht rund 9px je Kachel frei

   Und aus dem Seitenverhältnis: das Feld war 4:3, ein Anhänger ist 3:1. In
   einem 4:3-Feld ist deshalb über und unter dem Fahrzeug mehr Grau als
   Fahrzeug — das Fahrzeug wirkt klein, obwohl es die volle Breite hat. Bei
   16:9 bleibt die Breite gleich, das Grau drumherum verschwindet, und die
   Reihe wird nebenbei flacher.

   Gemessen bei 1.440px: Kachel 232px, Fahrzeug 214px. Vorher in einer Reihe
   waren es 210 und 164.

   Unter 1.100px wird die Reihe wieder umbrochen — fünf Kacheln auf einem
   Tablet wären 140px breit und damit kleiner als der Zustand, der beanstandet
   wurde.
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .stil-harbeck body.home .segmente__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
  .stil-harbeck body.home .segment { grid-column: auto; }
  .stil-harbeck body.home .segment__bild { aspect-ratio: 16 / 9; }
  .stil-harbeck body.home .segment__foto { padding: 5% 4% 4%; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .stil-harbeck body.home .segmente__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .stil-harbeck body.home .segment { grid-column: span 2; }
  /* Die zweite Reihe mittig unter die erste. */
  .stil-harbeck body.home .segment:nth-child(4) { grid-column: 2 / span 2; }
  .stil-harbeck body.home .segment:nth-child(5) { grid-column: 4 / span 2; }
}

@media (min-width: 560px) and (max-width: 899px) {
  .stil-harbeck body.home .segmente__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stil-harbeck body.home .segment:nth-child(5) { grid-column: 1 / -1; }
  .stil-harbeck body.home .segment:nth-child(5) .segment__bild { aspect-ratio: 12 / 5; }
}

@media (max-width: 559px) {
  .stil-harbeck body.home .segmente__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stil-harbeck body.home .segment,
  .stil-harbeck body.home .segment:last-child { grid-column: 1 / -1; }
  .stil-harbeck body.home .segment__bild,
  .stil-harbeck body.home .segment:last-child .segment__bild { aspect-ratio: 2 / 1; }
}

/* Das Polster in Prozent, damit das Fahrzeug mit der Kachel mitwächst. */
.stil-harbeck body.home .segment__foto { padding: 6% 6% 5%; }
/* Das Komplettrad ist fast quadratisch und stünde sonst über die volle
   Feldhöhe — dieselbe Ausnahme wie bisher, auf das neue Polster umgerechnet. */
.stil-harbeck body.home .segment__foto--kompakt { padding: 13% 14% 9%; }


/* -----------------------------------------------------------------------------
   57.1 Die Zeichnungen bekommen Körper
   -----------------------------------------------------------------------------
   Rückmeldung 11.09.2026: «тут иконки красивее сделать». Die vier Bilder waren
   reine Kontur — nebeneinander liest sich das als Piktogrammsatz, nicht als
   Zeichnung. In der Vorlage des Kunden sind es gerenderte Körper mit Licht und
   Schatten.

   Ohne die Handschrift zu wechseln: die Flächen bekommen einen Ton, das Rohr
   drei (Oberseite hell, Vorderseite mittel, Schnittfläche dunkel — daher liest
   es sich als Körper und nicht als Fläche), und unter jedes Fahrzeug kommt ein
   flacher Schatten. Die Kontur bleibt, was sie war.
   -------------------------------------------------------------------------- */
.stil-harbeck .reasons__bild .rs-f1 { fill: #f4f4f4; stroke: none; }
.stil-harbeck .reasons__bild .rs-f2 { fill: #e8e8e8; stroke: none; }
.stil-harbeck .reasons__bild .rs-f3 { fill: #dcdcdc; stroke: none; }
.stil-harbeck .reasons__bild .rs-schatten { fill: rgba(34, 34, 34, .09); stroke: none; }


/* -----------------------------------------------------------------------------
   57.3 Die Ziffer steht nicht mehr unter der Zeichnung
   -----------------------------------------------------------------------------
   Rückmeldung 11.09.2026: «этот блок странно выглядит еще». Nachgesehen, was
   an der Kachel nicht stimmt — zwei Dinge, beide von heute Vormittag:

   1. Die helle Ziffer lag HINTER der Zeichnung. Bei 01 verdeckte das
      Fahrgestell sie fast ganz, bei 04 lief die Flotte quer durch sie hindurch.
      Übrig blieben Fragmente, die wie ein Druckfehler aussehen. In der Vorlage
      des Kunden ist die Ziffer vollständig lesbar und die Zeichnung liegt
      daneben, nicht darauf.

   2. Zwischen Zeichnung und Überschrift standen rund 60px Leere: 20px Abstand
      plus die untere Hälfte des Zeichenfeldes, die bei drei der vier Bilder
      gar nicht benutzt wird.

   Also: Ziffer über die Zeichnung, in voller Größe lesbar, und der Abstand auf
   das Maß gebracht, das die Zeichnung wirklich braucht.
   -------------------------------------------------------------------------- */
.stil-harbeck .reasons__bild .reasons__ziffer {
  position: static;
  display: block;
  margin-bottom: 2px;
  font-size: 40px;
  line-height: 1;
  color: #dcdcdc;
}
.stil-harbeck .reasons__bild { margin-bottom: 10px; }

@media (max-width: 767px) {
  /* Am Telefon bleibt die Ziffer weg, siehe Teil 56: sie wäre ein vierter
     Schriftgrad in einer Leiste, die bewusst nur drei hat. */
  .stil-harbeck .reasons__bild:not(.reasons__bild--ziffer) .reasons__ziffer { display: none; }
}


/* =============================================================================
   Variante «Harbeck» — Teil 58: die Kopfleiste am Telefon trägt jetzt drei Zeichen
   -----------------------------------------------------------------------------
   Gemessen bei 390px: die Wortmarke lief von 133 bis 257, das erste Zeichen
   begann bei 220 — 37px Überdeckung, die Lupe stand auf dem «ld» von
   «bunnefeld». Bei 360px waren es 47px, bei 430px noch 23px; ab 768px nichts.

   Die Ursache ist hausgemacht und von heute: die Marke sitzt seit Teil 24
   absolut auf `left: 50%`, und die Rechnung dahinter («bei 390px sind das
   220px freie Mitte») galt für ZWEI Zeichen. Am 11.09. kam auf Wunsch das
   Konto-Zeichen dazu — damit ist die Zeichenreihe 132px breit, und die Mitte
   der Leiste liegt nicht mehr in der freien Mitte.

   Eine feste Zahl würde beim nächsten Zeichen wieder brechen. Deshalb rechnet
   jetzt das Raster: Spalte 1 so breit wie die Menütaste, Spalte 3 so breit wie
   die Zeichenreihe, und die Marke steht mittig in dem, was übrig bleibt — und
   schrumpft mit, wenn es eng wird. Die Menütaste bleibt absolut gesetzt, damit
   ihre Balken weiter auf der Hauskante stehen (Teil 51); Spalte 1 hält ihr
   nur den Platz frei.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Erster Anlauf war ein Raster mit `minmax(0, 1fr)` in der Mitte. Gemessen
     bekam die mittlere Spur aber nicht den freien Platz, sondern die Breite
     ihres Inhalts (120 statt 164px) — die Leiste ist selbst ein Flex-Kind,
     und die Spurberechnung fiel entsprechend aus. Mit Flex und automatischen
     Aussenabständen ist das eindeutig: die Marke nimmt die Mitte dessen ein,
     was zwischen Menütaste und Zeichenreihe übrig bleibt.

     Die linke Polsterung hält der Menütaste den Platz frei — sie liegt
     absolut auf der Hauskante (Teil 51) und belegt in der Reihe keinen. */
  .stil-harbeck .bfh__inner {
    display: flex;
    align-items: center;
    padding-left: 64px;
  }
  .stil-harbeck .bfh__logo {
    position: static;
    transform: none;
    margin-inline: auto;
    min-width: 0;
    /* Die Marke darf schrumpfen, die Zeichen nicht: bei 320px ist die Leiste
       288px breit, gebraucht wurden 64 + 124 + 132 + 22 = 342px. Gemessen lag
       das Konto-Zeichen danach komplett ausserhalb des Schirms. */
    flex: 0 1 124px;
  }
  .stil-harbeck .bfh__logo img,
  .stil-harbeck .bfh.is-stuck .bfh__logo img {
    width: 124px;
    max-width: 100%;
    height: auto;
  }
  .stil-harbeck .bfh__actions {
    margin-left: 0;
    flex: 0 0 auto;
  }
}

/* -----------------------------------------------------------------------------
   58.1 Instagram und Facebook in der Schublade werden wieder sichtbar
   -----------------------------------------------------------------------------
   Die beiden Knöpfe tragen seit jeher `color: var(--bf-ink)` (bunnefeld.css).
   Seit die Schublade auf Wunsch schwarz ist (Teil 52, #111111), steht damit
   Tinte auf Tinte: gemessen 1,20:1. Zu sehen war nur der helle Rahmen, Schrift
   und Zeichen verschwanden im Grund — der Kunde fragte deshalb zu Recht, wo
   die Logos geblieben sind. Die Zeichen erben ihre Kontur über `currentColor`,
   eine Farbregel genügt also für Text und Bild.
   -------------------------------------------------------------------------- */
.stil-harbeck .bfh__mobile-social a {
  color: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .24);
}
.stil-harbeck .bfh__mobile-social a:hover {
  color: #ffffff;
  border-color: #ffffff;
}


/* =============================================================================
   Variante «Harbeck» — Teil 59: das Band unter dem Film trägt wieder Inhalt
   -----------------------------------------------------------------------------
   Rückmeldung 11.09.2026: «эта линия была толще и выше + внутри было что-то,
   сейчас короткая надпись».

   Damit ist klar, worauf die drei kurzen Zurufe der letzten Stunde zielten: es
   ging nie um den Farbverlauf allein, sondern um das Band als Ganzes. Bis zum
   06.09. lief unter dem Film eine Datenleiste mit «seit 2009 / über 4.000
   Anhänger / Fertigung Haren (Ems)» und der Rufnummer. Sie wurde damals gegen
   eine 22px hohe Kante ohne Text getauscht — schmal, leer, und rechts schräg
   abgeschnitten. Genau das war gemeint mit «короткая».

   Jetzt wieder das Band: volle Breite, Höhe aus dem Inhalt (18px Polster oben
   und unten, rund 60px am Rechner), weiße Schrift, Rufnummer rechts.

   Der Verlauf ist der von damals, und seine Haltepunkte stehen bewusst in
   Pixeln statt in Prozent: der Text ist immer gleich lang, das Fenster nicht.
   Bei 700px Fensterbreite lag die Rufnummer sonst im ausgelaufenen Teil —
   weiße Schrift auf Blassrosa, gemessen 2,4:1. Mit festen Pixeln bleibt die
   Fläche unter dem Text satt, und der Auslauf nimmt sich nur den Platz, der
   rechts davon übrig bleibt.

   Die Kante aus Teil 34 (`hero__bar--kante`, 38 % Breite mit schrägem Ende)
   steht im Stylesheet weiter, trifft aber nichts mehr: die Klasse ist aus dem
   Markup raus. Sie bleibt als Spur stehen, falls der Kunde die Kante doch
   wiederhaben will.
   -------------------------------------------------------------------------- */
.stil-harbeck .hero__bar {
  height: auto;
  border-top: 0;
  /* 14.09.2026: «справа должно быть больше белого, сейчас лёгкий переход».
     Gemessen lief die satte Fläche bei 1.440px bis 910px, halbe Deckkraft kam
     erst bei 1.400px — weiss war nur der letzte Streifen von rund 40px, auf dem
     Foto des Kunden sah das Band durchgehend rot aus.

     Jetzt: satt bis kurz hinter die Rufnummer, dann in 18 % der Breite ganz
     weg. Die Rufnummer endet immer bei 50 % + 102px (Spalte 1.232px, Text
     702px lang); der Haltepunkt steht 38px dahinter, die Schrift bleibt also
     auf vollem Rot. Bei 1.440px ist das Band ab 1.119px weiss, bei 1.920px ab
     1.446px. Die Zwischenstufen machen den Auslauf weich statt linear —
     linear wirkt er in der Mitte wie eine Kante. */
  --bf-band-satt: max(860px, calc(50% + 140px));
  background: linear-gradient(90deg,
    #78090e 0,
    #d7161e 30%,
    #e01f26 var(--bf-band-satt),
    rgba(224, 31, 38, .62) calc(var(--bf-band-satt) + 6%),
    rgba(224, 31, 38, .24) calc(var(--bf-band-satt) + 12%),
    rgba(224, 31, 38, 0) calc(var(--bf-band-satt) + 18%));
}
/* 12.09.2026: «эту полосу чуть толще по высоте еще можно» — Polster von 18
   auf 26px, das Band wächst damit von 61 auf 77px. Die Höhe kommt weiter aus
   dem Polster und nicht aus einer festen Zahl: fällt eine Angabe weg oder
   bricht die Zeile um, bleibt der Abstand über und unter der Schrift gleich. */
.stil-harbeck .hero__bar-inner {
  justify-content: flex-start;
  padding-top: 26px;
  padding-bottom: 26px;
}
.stil-harbeck .hero__fact span {
  color: rgba(255, 255, 255, .72);
  letter-spacing: .06em;
}
/* Die Nummer steht direkt hinter den drei Angaben und NICHT rechts aussen.
   Das ist kein Geschmack, sondern der Grund für die Pixel-Haltepunkte oben:
   rechts aussen läge sie im auslaufenden Teil des Verlaufs — gemessen weisse
   Schrift auf Blassrosa. Hinter den Angaben endet sie bei 1440px auf Position
   818 und damit mitten in der satten Fläche. */
.stil-harbeck .hero__bar-phone {
  margin-left: 0;
}
/* Die Grundregel färbt die Nummer beim Überfahren rot — auf rotem Grund also
   unsichtbar. Statt der Farbe wechselt hier die Deckkraft. */
.stil-harbeck .hero__bar-phone:hover {
  color: rgba(255, 255, 255, .75);
}

@media (max-width: 767px) {
  /* Hochkant ist das Band zu schmal zum Auslaufen — dort bliebe von der roten
     Fläche nichts übrig. Also durchgehender Verlauf, und die vier Angaben
     stehen untereinander statt in einer Zeile. */
  .stil-harbeck .hero__bar {
    background: linear-gradient(100deg, #78090e 0%, #d7161e 55%, #e2242b 100%);
  }
  /* Hochkant stehen schon drei Zeilen im Band — dort genügt ein kleinerer
     Zuwachs, sonst frisst es den halben ersten Bildschirm. */
  .stil-harbeck .hero__bar-inner {
    gap: 8px 18px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .stil-harbeck .hero__bar-phone { margin-left: 0; }
}

/* Teil 58, Nachtrag 12.09.2026 — schmale Telefone (bis 374px, z. B. iPhone SE
   der ersten Reihe): weniger Freiraum links neben der Menütaste. 64px sind
   42px Taste plus Luft; auf 50px bleibt die Taste frei, und der Marke bleiben
   bei 320px noch rund 100px statt null. */
@media (max-width: 374px) {
  .stil-harbeck .bfh__inner { padding-left: 50px; }
}

/* =============================================================================
   Variante «Harbeck» — Teil 60: Auswahlfelder im Katalog mit eigener Liste
   -----------------------------------------------------------------------------
   22.09.2026, Screenshot des Kunden: das Warengruppen-Menü war das graue
   Systemmenü von macOS, der dreistufige Baum darin eine flache Liste mit
   Gedankenstrichen. Das Menü hinter einem <select> ist nicht gestaltbar,
   deshalb baut bunnefeld-ui.js («Auswahlfelder im Katalog») davor einen Knopf
   und eine eigene Liste; das <select> bleibt unsichtbar im Formular.

   Der Knopf trägt die Klassen des Feldes weiter (.shop__filter-select) und
   erbt so Breite, Höhe, Pfeil und Pillenform — hier stehen nur die Ecken,
   die ein <button> anders hat als ein <select>. Die Liste: weiße Fläche mit
   Kante und Schatten, Einträge in drei Stufen (Wurzel als Versalzeile wie
   die Beschriftungen der Leiste, Gruppe halbfett, Typ normal mit Einzug),
   Trefferzahl rechts in Grau, gewählter Eintrag rot mit Haken.
   ============================================================================= */
.stil-harbeck .bf-auswahl {
  position: relative;
  display: block;
  min-width: 0;
}
/* Das <select> bleibt im Formular (Wert, Absenden, Fall ohne JavaScript),
   nimmt aber keinen Platz und keinen Fokus. Kein display:none, damit
   Browser die Formularwiederherstellung beim Zurück-Knopf nicht überspringen. */
.stil-harbeck .bf-auswahl__native {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}
.stil-harbeck .bf-auswahl__knopf {
  display: block;
  text-align: left;
  cursor: pointer;
  line-height: 46px;
  color: var(--bf-ink);
  transition: border-color .16s var(--bf-ease);
}
.stil-harbeck .bf-auswahl__wert {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.stil-harbeck .bf-auswahl.is-offen .bf-auswahl__knopf,
.stil-harbeck .bf-auswahl__knopf:focus-visible {
  outline: none;
  border-color: var(--bf-signal);
}

.stil-harbeck .bf-auswahl__liste {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(400px, calc(100vw - 32px));
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--bf-line);
  border-radius: var(--hb-radius-card);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .14s var(--bf-ease), transform .18s var(--bf-ease);
}
.stil-harbeck .bf-auswahl__liste.is-offen {
  opacity: 1;
  transform: none;
}
/* Rechts vom Rand: die Sortierung steht am Ende der Zeile, ihre Liste würde
   sonst aus der Leiste laufen. Der Knopf ist breiter als die Liste sein muss. */
.stil-harbeck .shop__filter:has(.shop__filter-select--sort) .bf-auswahl__liste {
  left: auto;
  right: 0;
}

.stil-harbeck .bf-auswahl__eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px calc(16px + var(--einzug, 0px));
  font-family: var(--bf-sans);
  font-size: var(--bf-fs-sm);
  line-height: 1.3;
  color: var(--bf-ink);
  cursor: pointer;
  user-select: none;
}
.stil-harbeck .bf-auswahl__eintrag.is-aktiv { background: var(--bf-bg-alt); }
.stil-harbeck .bf-auswahl__eintrag.is-gewaehlt { color: var(--bf-signal); }
.stil-harbeck .bf-auswahl__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stil-harbeck .bf-auswahl__haken {
  flex: none;
  width: 16px; height: 16px;
  color: var(--bf-signal);
  visibility: hidden;
}
.stil-harbeck .bf-auswahl__eintrag.is-gewaehlt .bf-auswahl__haken { visibility: visible; }
.stil-harbeck .bf-auswahl__zahl {
  flex: none;
  min-width: 2ch;
  text-align: right;
  font-family: var(--bf-mono);
  font-size: var(--bf-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--bf-steel-500);
}
.stil-harbeck .bf-auswahl__eintrag.is-gewaehlt .bf-auswahl__zahl { color: inherit; }

/* Der Baum der Warengruppen. Die Wurzeln («Anhänger», «Zubehör») sind
   Abschnitte: Versalien, Linie darüber, Luft — und trotzdem wählbar, denn
   sie sind selbst Warengruppen mit Trefferzahl. Die Gruppen darunter
   halbfett, die Typen normal, jede Stufe 18px weiter eingerückt. */
.stil-harbeck .bf-auswahl--baum .bf-auswahl__eintrag--e0 {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--bf-line);
  font-size: var(--bf-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stil-harbeck .bf-auswahl--baum .bf-auswahl__eintrag--e0:first-child {
  margin-top: 0;
  padding-top: 9px;
  border-top: 0;
  font-size: var(--bf-fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.stil-harbeck .bf-auswahl--baum .bf-auswahl__eintrag--e1 { --einzug: 18px; font-weight: 600; }
.stil-harbeck .bf-auswahl--baum .bf-auswahl__eintrag--e2 { --einzug: 36px; }
.stil-harbeck .bf-auswahl--baum .bf-auswahl__eintrag--e3 { --einzug: 54px; }
/* Die Typen hängen sichtbar an ihrer Gruppe: eine feine Linie links vom
   Einzug, damit «Bootsanhänger» als Teil von «Boot & Freizeit» gelesen wird. */
.stil-harbeck .bf-auswahl--baum .bf-auswahl__eintrag--e2 .bf-auswahl__name,
.stil-harbeck .bf-auswahl--baum .bf-auswahl__eintrag--e3 .bf-auswahl__name {
  position: relative;
  padding-left: 12px;
}
.stil-harbeck .bf-auswahl--baum .bf-auswahl__eintrag--e2 .bf-auswahl__name::before,
.stil-harbeck .bf-auswahl--baum .bf-auswahl__eintrag--e3 .bf-auswahl__name::before {
  content: "";
  position: absolute;
  left: 0; top: -11px; bottom: -11px;
  border-left: 1px solid var(--bf-line);
}

@media (max-width: 720px) {
  .stil-harbeck .bf-auswahl { width: 100%; }
  .stil-harbeck .bf-auswahl__liste { max-width: 100%; width: 100%; }
  .stil-harbeck .bf-auswahl__eintrag { padding-top: 11px; padding-bottom: 11px; }
  /* Am Telefon ist die Liste so breit wie die Leiste, nicht wie ihr längster
     Eintrag — «Kanu-, Kajak- & SUP-Anhänger» stand dort mit drei Punkten.
     Umbrechen statt abschneiden, der Rand rechts (Haken, Zahl) bleibt stehen. */
  .stil-harbeck .bf-auswahl__name { white-space: normal; }
}


/* =============================================================================
   Variante «Harbeck» — Teil 61: Änderungsliste des Kunden vom 22.09.2026
   -----------------------------------------------------------------------------
   Die Texte auf der Startseite sind länger geworden (Wortlaut des Kunden,
   mehrere Absätze statt eines Satzes), dazu drei neue Bilder und die Grafik
   «Warum Bunnefeld». Was davon Gestaltung braucht, steht hier.
   ============================================================================= */

/* Einsatzbereiche: drei Absätze statt eines Vorspanns. */
.segmente__lead p { margin: 0; }
.segmente__lead p + p { margin-top: .7em; }

/* Kreuz: mehrere Absätze je Feld. Die Fuge des Feldes (18px) trennt sonst
   Absatz von Absatz so weit wie Text von Überschrift. */
.schachbrett__text + .schachbrett__text { margin-top: -6px; }
/* Mit drei Absätzen ist das Textfeld «Bootsanhänger» bei 1.440px 660px hoch,
   das Bildfeld daneben per 3:2 nur 480 — darunter stand eine weiße Lücke.
   Nur `stretch` reicht nicht: dann rechnet 3:2 aus der Höhe die Breite
   zurück (gemessen 990px in einer 720er Spalte). Am Rechner gibt deshalb
   das Textfeld die Zeilenhöhe vor; das Bildfeld hat keine eigene Höhe mehr,
   das Foto liegt absolut darin (86 % wie in Teil 40), und die Mindesthöhe
   von 3:2 steht als `min-height`, falls ein Text einmal kürzer ist. */
@media (min-width: 900px) {
  .stil-harbeck .schachbrett__feld--bild {
    position: relative;
    aspect-ratio: auto;
    min-height: calc(50vw / 1.5);
  }
  .stil-harbeck .schachbrett__bild {
    position: absolute;
    inset: 7%;
  }
}

/* «Anhänger, die halten»: das neue Bild ist hochkant, die Wand quer. Bei
   1.440px ist sie 695x534, das Bild steht 695x827 darin — 293px fallen weg.
   Bei 63 % bleiben Fahnenkopf mit Schriftzug (bis y≈190) und das Stützrad
   des vorderen Anhängers (y≈710) im Rahmen; gemessen an der Datei.
   Das Foto liegt absolut im Feld: mit seiner eigenen Höhe (827px) zog es
   die Wand und damit den ganzen Abschnitt von 545 auf 922px — links stand
   eine leere Kachel. So bestimmt die Kachel die Höhe, das Foto füllt sie. */
.marke__bild { position: relative; }
.marke__foto {
  position: absolute;
  inset: 0;
  object-position: 50% 63%;
}
@media (max-width: 899px) {
  /* Quer 4:3 schnitt am Telefon entweder die Fahne oder die Deichsel ab. */
  .marke__bild { aspect-ratio: 1 / 1; }
  .marke__foto { object-position: 50% 70%; }
}

/* Warum bunnefeld: Bildfeld aus der Kundengrafik, Ziffer im Bild. */
.stil-harbeck .reasons__bild--grafik { margin-bottom: 14px; }
.stil-harbeck .reasons__grafik {
  display: block;
  width: 100%;
  height: auto;
}

/* Bildbahn «Gebaut für Ihr Boot»: zwei Absätze Kundentext und ein neues Bild.
   Bisher lag der Text als dunkle Fläche UNTEN IM BILD. Mit dem längeren
   Kundentext wurde daraus bei 1.440px eine rund 400px hohe Fläche — genau
   über dem Anhänger, und um den geht es in der Rückmeldung («Anhänger muss
   wie im Originalfoto aussehen»). Jetzt steht das Foto ganz und ungedeckt,
   der Text als dunkles Band darunter; am Rechner in zwei Spalten
   (Überschrift | Absätze), damit das Band niedrig bleibt. Das Band behält
   den Grund der Bahn (#14181b), die Bahn klebt weiter (Teil 49). */
.bildbahn {
  height: auto;
  display: block;
}
.bildbahn__bild {
  position: relative;
  height: auto;
}
.bildbahn__text {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.4vw, 48px);
}
.bildbahn__text::before { display: none; }
.bildbahn__satz { display: block; }
.bildbahn__satz + .bildbahn__satz { margin-top: .6em; }
@media (min-width: 900px) {
  .bildbahn__text {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4vw, 72px);
    /* Die dritte, flexible Zeile nimmt die Mehrhöhe der Absatzspalte auf —
       mit nur zwei Zeilen verteilte das Raster sie auf beide, und zwischen
       Augenbraue und Überschrift klafften 70px. */
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }
  .bildbahn__marke,
  .bildbahn__titel { grid-column: 1; }
  .bildbahn__titel { margin-bottom: 0; }
  .bildbahn__saetze {
    grid-column: 2;
    grid-row: 1 / span 3;
    /* Erste Zeile auf Höhe der Überschrift, nicht der Augenbraue. */
    padding-top: 30px;
  }
  .bildbahn__satz { max-width: 68ch; }
}
/* Das Bild ist 2,4:1. Am Telefon wären das 160px — 2,1:1 gibt ihm etwas
   Höhe und nimmt links und rechts je 6 %, Heck und Zugfahrzeug bleiben drin. */
@media (max-width: 899px) {
  .bildbahn__bild { aspect-ratio: 2.1 / 1; }
  .bildbahn__titel { margin-bottom: 14px; }
}

/* =============================================================================
   Teil 62 — 29.09.2026: Rückmeldung per Handyvideo des Kunden
   -----------------------------------------------------------------------------
   Vier Stellen, ein Befund: Text, der schmaler läuft als seine Überschrift oder
   als sein Feld, sieht aus wie abgeschnitten — das Auge liest die leere Fläche
   rechts als fehlenden Text.
   ============================================================================= */

/* 62.1 Einsatzbereiche — die Einleitung war 518px breit unter einer Überschrift
   von 794px (64ch bei 15px), rechts daneben blieb die halbe Seite leer und die
   Kachelreihe darunter lief über die volle Breite: der Text sah abgeschnitten
   aus. Erster Anlauf (Text auf 860px) reichte dem Kunden nicht — die rechte
   Kante hing weiter in der Luft. Jetzt zwei Spalten wie in der Bildbahn:
   Überschrift links, Text rechts; beide Außenkanten sind die der Kachelreihe.
   Die Absätze darin trugen zusätzlich die Hausregel `p { max-width: 68ch }`
   (bunnefeld.css) — die Breite macht hier die Spalte. */
.stil-harbeck body.home .segmente__lead {
  max-width: none;
  font-size: 17px;
  line-height: 1.6;
}
.stil-harbeck body.home .segmente__lead p { max-width: none; }
@media (min-width: 1024px) {
  .stil-harbeck body.home .segmente > .container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  .stil-harbeck body.home .segmente__eyebrow { grid-column: 1 / -1; }
  .stil-harbeck body.home .segmente__title { grid-column: 1; grid-row: 2; margin: 0; }
  .stil-harbeck body.home .segmente__lead {
    grid-column: 2; grid-row: 2;
    margin: 0;
    /* erste Zeile auf Höhe der Versalien der Überschrift */
    padding-top: 5px;
  }
  .stil-harbeck body.home .segmente__grid {
    grid-column: 1 / -1; grid-row: 3;
    margin-top: clamp(36px, 4vw, 56px);
  }
}
@media (max-width: 767px) {
  .stil-harbeck body.home .segmente__lead { font-size: 16px; }
}

/* 62.2 Schachbrett — 46ch waren 373px in einem Feld von 720px; die Überschrift
   «Nutz- und Sonderanhänger» stand 140px über den Text hinaus. */
.stil-harbeck .schachbrett__text {
  max-width: 600px;
  font-size: 16px;
  line-height: 1.65;
}

/* 62.3 Bildbahn — klebt mit der Unterkante, wenn sie höher ist als das Fenster.
   Den Wert setzt das Skript im Block (blocks/bildbahn/template.php); ohne
   Skript bleibt es bei 0 wie bisher. */
.bildbahn { top: var(--bf-bahn-oben, 0px); }

/* 62.4 Ratgeber-Beitrag — Text links über die volle Spalte, rechts die
   Kurzanfrage, die beim Lesen stehen bleibt. */
.stil-harbeck .single-news__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: clamp(32px, 4vw, 72px);
  align-items: stretch;
}
.stil-harbeck .single-news__main { max-width: none; }
.stil-harbeck .single-news__title {
  margin: 22px 0 12px;
  text-align: left;
  font-size: clamp(28px, 18px + 1.4vw, 44px);
}
.stil-harbeck .single-news__body { gap: 0; }
.stil-harbeck .single-news__body > *,
.stil-harbeck .single-news__body p,
.stil-harbeck .single-news__body li { max-width: none; }
.stil-harbeck .single-news__body p,
.stil-harbeck .single-news__body li { font-size: 17px; line-height: 1.7; }

.stil-harbeck .single-news__sidebar { display: block; max-width: none; }
.single-news__anfrage {
  position: sticky;
  top: 124px;
  padding: 30px 28px 28px;
  background: var(--bf-signal, #d7161e);
  color: #fff;
}
.single-news__anfrage-marke {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.single-news__anfrage-titel {
  margin: 0 0 10px;
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  font-size: 28px; line-height: 1.05; letter-spacing: .02em;
  color: #fff;
}
.single-news__anfrage-satz {
  margin: 0 0 20px;
  font-size: 15px; line-height: 1.55;
  color: rgba(255, 255, 255, .94);
}
.stil-harbeck .single-news__anfrage .anfrage__zeile { grid-template-columns: minmax(0, 1fr); }
.stil-harbeck .single-news__anfrage .anfrage__knopf { width: 100%; }
.single-news__anfrage-telefon {
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .9);
}
.single-news__anfrage-telefon a { color: #fff; font-weight: 700; white-space: nowrap; }
.single-news__anfrage-telefon a:hover { color: #fff; text-decoration: underline; }

.single-news__weitere {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: 36px;
  border-top: 1px solid var(--bf-line);
}
.single-news__weitere-titel {
  margin: 0 0 22px;
  font-family: var(--bf-cond); font-weight: 700; text-transform: uppercase;
  font-size: clamp(24px, 18px + 1vw, 32px); line-height: 1.08;
  color: var(--bf-ink);
}
.stil-harbeck .single-news__weitere .single-news__related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.single-news__weitere .single-news__nav { margin-top: 22px; }

@media (max-width: 1023px) {
  .stil-harbeck .single-news__layout { grid-template-columns: minmax(0, 1fr); }
  .single-news__anfrage { position: static; }
  .stil-harbeck .single-news__weitere .single-news__related { grid-template-columns: minmax(0, 1fr); }
}

/* 62.5 Zeichen im Beitragstext (inc/ratgeber-zeichen.php) */
.bf-zeichen {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  color: var(--bf-signal);
}
.stil-harbeck .single-news__body h2.bf-zeichen-titel {
  display: flex; align-items: center; gap: 14px;
}
.single-news__body h2.bf-zeichen-titel .bf-zeichen {
  width: 46px; height: 46px;
  background: var(--bf-bg-alt, #ededed);
}
.single-news__body h2.bf-zeichen-titel .bf-zeichen svg { width: 26px; height: 26px; }

.bf-merk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 10px 0 26px;
  padding: 18px 20px;
  background: var(--bf-bg-alt, #ededed);
  border-left: 3px solid var(--bf-signal);
}
.stil-harbeck .single-news__body .bf-merk p { margin: 0; color: var(--bf-ink); }
.bf-merk .bf-zeichen svg { width: 26px; height: 26px; }

.stil-harbeck .single-news__body .bf-stand {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 30px; padding-top: 16px;
  border-top: 1px solid var(--bf-line);
  font-size: 14px; font-style: italic;
  color: var(--bf-steel-700);
}
.bf-stand .bf-zeichen { color: var(--bf-steel-700); margin-top: 2px; }
.bf-stand .bf-zeichen svg { width: 18px; height: 18px; }

/* Aufzählungen: Haken in Hausrot statt Punkt. */
.stil-harbeck .single-news__body ul { padding-left: 0; list-style: none; }
.stil-harbeck .single-news__body ul li {
  position: relative;
  padding-left: 34px;
  list-style: none;
}
.stil-harbeck .single-news__body ul li::before {
  content: "";
  position: absolute; left: 0; top: .22em;
  width: 22px; height: 22px;
  background: var(--bf-signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =============================================================================
   Teil 63 — 30.09.2026: Kopf als scharfes Standbild mit EINER Fahrt nach vorn
   -----------------------------------------------------------------------------
   Der Film (Veo, stabilisiert, Pendel) war weich und fuhr hin und her. Jetzt das
   Standbild mit Originalpixeln von Boot und Anhänger und einer einzigen, kaum
   merklichen Fahrt auf das Gespann zu: 6 % in 50 s, langsam auslaufend, dann
   Stillstand. Keine Schleife, kein Rücklauf, keine Überblendung — damit auch
   kein Doppelbild. Die zweite Ebene der alten Zoom-Schleife bleibt aus. */
/* 30.09.2026, abends: auch die eine Fahrt raus — «просто зумминг». Das Bild steht, bis der
   Stativ-Film (nur Wasser bewegt sich) da ist. Die Fahrt bleibt als Regel erhalten, nur aus. */
/* 01.10.2026: wieder wie am 29.09. — Kunde: «Stand 29.09. … sah toll aus, hat sich nur nicht
   gedreht. Bitte Stand von gestern verwenden.» Am 29.09. lief die Zoom-Schleife aus bunnefeld.css
   (zwei Ebenen, 28 s, Überblendung); die Sperre hier ist deshalb raus. */
@keyframes bf-kopf-fahrt {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .stil-harbeck .hero__stage-bild { animation: none; }
}

/* =============================================================================
   Teil 64 — 30.09.2026: «Über uns» zählt 01–05, Überschriften der Kacheln auf einer Linie
   -----------------------------------------------------------------------------
   Kunde (Foto aus Safari): «1–5» und «Alle Überschriften auf eine Linie bringen».
   1. Die Kachel ist eine Spalte mit `space-between` (main.css): die Ziffer oben,
      Überschrift und Text an den Boden gedrückt. Bei ungleich viel Text standen
      die drei Überschriften auf drei Höhen (gemessen 1923 / 2038 / 1966 px).
      Auf der Startseite war das schon mit `flex-start` gelöst (Teil 6) — jetzt
      überall: Ziffer, darunter sofort die Überschrift, die Luft fällt nach unten.
   2. «Echtes Handwerk statt Massenware» trägt die 01, die Kacheln 02–04
      (Feld «Nummerierung beginnt bei»), «Qualität, die man merkt» die 05 (Feld
      «Ziffer» im Philosophie-Block). Gleicher Schnitt wie die Kachelziffer, damit
      die fünf als eine Reihe gelesen werden.
   -------------------------------------------------------------------------- */
.stil-harbeck .reasons__item { justify-content: flex-start; }
.stil-harbeck .philosophy__ziffer {
  display: block;
  margin-bottom: 12px;
  font-family: var(--bf-cond);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.03em;
  color: #dcdcdc;
}
@media (max-width: 767px) {
  .stil-harbeck .philosophy__ziffer { font-size: var(--bf-titel); margin-bottom: 8px; }
}

/* =============================================================================
   Teil 65 — 30.09.2026: Karriere — Rufnummer vor dem Knopf, Zwischenüberschrift mit Luft
   -----------------------------------------------------------------------------
   Kunde (Fotos vom MacBook, 30.09.):
   1. CTA «Klingt interessant?» (Karriere 389, Monteur 650): «Statt Bewerbung:
      Ruf einfach an! Button darunter». Die Reihenfolge macht das Template
      (Feld «Telefon über dem Knopf»); die übrigen CTAs bleiben Knopf → Nummer.
      Die Abstände tragen Knopf und Nummer schon selbst (je 26px).
   2. «Dein Profil sieht so aus?» (Monteur) klebte am Absatz darüber — gemessen
      0px: die h3 steht im Fließtext eines simple-Blocks und bekam kein
      margin-top. «Mehr Abstand». Gilt für jede Zwischenüberschrift im Text
      der simple-Blöcke, die nicht ganz oben steht.
   -------------------------------------------------------------------------- */
.stil-harbeck .simple .text > * + :is(h2, h3, h4) { margin-top: 36px; }
.stil-harbeck .simple .text > :is(h2, h3, h4) + * { margin-top: 14px; }

/* =============================================================================
   Teil 66 — 30.09.2026: Gruppenseiten im Shop zeigen ihre Typen als Bildreihe
   -----------------------------------------------------------------------------
   Kunde: «Beim Klicken von Boot & Freizeit sollen folgende Kategorien im Shop
   angezeigt werden» — Bootsanhänger bis 3,5 t, 25/40 km/h bis 18 t, Hafentrailer,
   Pferdeanhänger. Markup: `bunnefeld_shop_typen_kacheln()` (inc/shop_archive.php).
   Gleiche Sprache wie das Menü «Anhänger» (Teil in bunnefeld.css, `.bfh__sortiment-*`):
   freigestelltes Fahrzeug auf Hausgrau, Name in Versalien darunter — nur größer,
   weil die Reihe hier Inhalt ist und nicht Aufklappfeld.
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__typen { margin: 0 0 32px; }
.stil-harbeck .shop__typen-liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 16px;
  margin: 0; padding: 0;
  list-style: none;
}
.stil-harbeck .shop__typ { margin: 0; padding: 0; }
.stil-harbeck .shop__typ::before { content: none; }
.stil-harbeck .shop__typ a {
  display: block;
  text-align: center;
  color: var(--bf-ink);
  text-decoration: none;
}
.stil-harbeck .shop__typ-feld {
  display: flex; align-items: center; justify-content: center;
  height: 150px;
  margin-bottom: 12px;
  padding: 14px;
  background: var(--bf-bg-alt, #ededed);
  overflow: hidden;
}
.stil-harbeck .shop__typ-bild {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform .18s ease;
}
.stil-harbeck .shop__typ a:hover .shop__typ-bild { transform: scale(1.04); }
.stil-harbeck .shop__typ-name {
  display: block;
  font-size: 13px; line-height: 1.35;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.stil-harbeck .shop__typ a:hover .shop__typ-name { color: var(--bf-signal); }
@media (max-width: 900px) {
  .stil-harbeck .shop__typen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .stil-harbeck .shop__typ-feld { height: 120px; padding: 10px; }
  .stil-harbeck .shop__typ-name { font-size: 12px; }
}

/* =============================================================================
   Teil 67 — 30.09.2026: Kopf am Telefon — der Film als Band über dem Text
   -----------------------------------------------------------------------------
   Nutzer (Telefon): «тут ничего не видно». Der 16:9-Film lag hinter dem ganzen
   86-svh-Kopf: hochkant blieb von der Breite knapp ein Drittel (die Mitte des
   Rumpfes), und der Schleier für die Schrift stand bei 84–88 % — vom Gespann war
   nichts zu erkennen.
   Jetzt: unter der festen Leiste (85px) ein Band 3:2 über die volle Breite — der
   Film verliert links und rechts je 5,6 %, Boot, Anhänger und Zugfahrzeug bleiben
   ganz im Bild —, ohne Schleier, unten weich in den dunklen Grund. Darunter
   Vorzeile, Überschrift, Text und Knöpfe auf ruhigem Grund; dort braucht die
   Schrift keinen Schleier mehr.
   ============================================================================= */
@media (max-width: 767px) {
  .stil-harbeck body.home .hero--video .hero__head {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding-top: var(--bf-leiste-hoehe, 85px);
  }
  .stil-harbeck body.home .hero--video .hero__stage {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .stil-harbeck body.home .hero--video .hero__stage::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22%;
    background: linear-gradient(180deg, rgba(20, 24, 27, 0) 0%, var(--bf-ink) 100%);
    pointer-events: none;
  }
  .stil-harbeck body.home .hero--video .hero__head::after { display: none; }
  /* Doppelte Klasse: ältere Regeln (Teil 13, 51) setzen hier 48px oben und 440px Mindesthöhe
     für den Text AUF dem Bild — gemessen blieben 72px Leere unter dem Band. */
  .stil-harbeck body.home .hero.hero--video .hero__head .hero__inner {
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 40px;
    align-items: flex-start;
  }
  .stil-harbeck body.home .hero.hero--video .hero__head .hero__content { padding-top: 0; }
}

/* =============================================================================
   Teil 68 — 01.10.2026: «Gebaut für Ihr Boot» als Fenster wie niemann » Über uns
   -----------------------------------------------------------------------------
   Änderungsliste 26.09.: «Scrollen auf der Startseite wie hier einstellen,
   sodass man drüber wegscrollt, Beispiel: niemann » Über uns». Dort ist es ein
   Band mit fixem Hintergrundfoto (background-attachment: fixed), dunklem
   Schleier und Text auf dem Foto — die Seite läuft normal, nur das Foto steht.
   Am 29.09. ging diese Bewegung in den Kopf; die Bahn klebte weiter (Teil 49,
   62.3), und der nächste Abschnitt überfuhr zuerst ihr dunkles Textband: in
   Safari war von «Gebaut für Ihr Boot» kaum etwas zu lesen.
   Jetzt: die Bahn klebt nirgends mehr. Ab 1024px steht nur das Foto still
   (fixiert, per clip-path auf den Abschnitt beschnitten — wie der Kopf, weil
   es ein <img> ist und kein Hintergrund), Text links auf einem Schleier, der
   nach rechts ausläuft: Anhänger und Boot rechts der Mitte bleiben ungedeckt
   (Rückmeldung 24.09.: «Anhänger muss wie im Originalfoto aussehen»).
   Darunter und bei «weniger Bewegung»: Foto, darunter das dunkle Textband.
   ============================================================================= */
.stil-harbeck body :is(#content, #primary) > .bildbahn {
  position: relative;
  top: auto;
  z-index: 0;
}
/* Das Foto ist seit 01.10. ein höherer Ausschnitt (1,6:1, aus dem 4K-Bild des
   Kopffilms): als Fenster füllt es das ganze Browserfenster, und der flache
   Streifen 2,4:1 (2560×1067) wurde dafür am MacBook auf das 1,5- bis 2-Fache
   hochgezogen — sichtbar unscharf. Ohne Fenster bleibt es der Streifen wie
   vorher, am Telefon 2,1:1 (Teil 61). */
.bildbahn .bildbahn__bild {
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  object-position: 50% 50%;
}
@media (max-width: 899px) {
  .bildbahn .bildbahn__bild { aspect-ratio: 2.1 / 1; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .stil-harbeck body :is(#content, #primary) > .bildbahn {
    display: flex;
    align-items: center;
    min-height: clamp(520px, 76vh, 680px);
    clip-path: inset(0);
  }
  .bildbahn .bildbahn__bild {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    aspect-ratio: auto;
  }
  .bildbahn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
      rgba(10, 13, 15, .82) 0%,
      rgba(10, 13, 15, .70) 30%,
      rgba(10, 13, 15, .28) 54%,
      rgba(10, 13, 15, 0) 72%);
    pointer-events: none;
  }
  .bildbahn .bildbahn__text {
    display: block;
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .bildbahn .bildbahn__titel { margin-bottom: 0; }
  .bildbahn .bildbahn__saetze {
    max-width: 540px;
    padding-top: 22px;
  }
  .bildbahn .bildbahn__satz { max-width: none; }
}

/* =============================================================================
   Teil 69 — 06.10.2026: Pferdeanhänger wieder sichtbar — Typ ohne Foto
   -----------------------------------------------------------------------------
   Kunde: «Boot & Freizeit: Bootsanhänger bis 3,5 t, 25/40 km/h bis 18 t,
   Hafentrailer, Pferdeanhänger — fehlt immer noch». Pferdeanhänger hat weder
   Produkt noch Kategoriebild; am 30.09. stand dort ein leeres graues Feld
   («Wieso ist das leer?»). Jetzt trägt das Feld die Aussage selbst: rote Kante,
   «Bau auf Anfrage» — in der Kachelreihe der Gruppenseite und im Menü «Anhänger».
   Sobald ein Kategoriebild gesetzt ist, verschwindet der Hinweis von allein.
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__typ-feld--leer,
.bfh__sortiment-feld--leer {
  flex-direction: column;
  gap: 10px;
  border-bottom: 3px solid var(--bf-signal, #d7161e);
}
.shop__typ-hinweis,
.bfh__sortiment-hinweis {
  font-family: var(--bf-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bf-steel-700, #5b6168);
}
.shop__typ-hinweis { font-size: 15px; }
.bfh__sortiment-hinweis { font-size: 12px; }
.stil-harbeck .shop__typ a:hover .shop__typ-hinweis,
.bfh__sortiment-punkt a:hover .bfh__sortiment-hinweis { color: var(--bf-signal, #d7161e); }

/* =============================================================================
   Teil 70 — 06.10.2026: Bildmosaik ragt am MacBook des Kunden in den nächsten Abschnitt
   -----------------------------------------------------------------------------
   Foto des Kunden von /bos-einsatz/ (Safari): die zwei kleinen Jetski-Fotos
   standen hochkant und reichten bis an «Mobile Tankanlagen» heran. Im aktuellen
   WebKit und in Chromium sitzt das Mosaik richtig (gemessen 800–1728px) — der
   Unterschied liegt in der Höhe der Kacheln: `height: 100%` (bunnefeld.css,
   «Projektzeilen») löst sich gegen die Rasterzeile auf, die sich wiederum aus
   `aspect-ratio` ergibt. Ältere Safari-Fassungen lösen diesen Kreis anders auf
   und strecken die Kacheln. Jetzt bestimmt allein das Seitenverhältnis die Höhe,
   kein Prozentwert, kein Strecken in der Zeile oder in der Spalte. Die
   Projektseite hat ihr eigenes Raster mit fester Höhe und bleibt, wie sie ist.
   -------------------------------------------------------------------------- */
html:not(.x) body:not(.bf-page-projekte) .simple__gallery { align-items: start; }
html:not(.x) body:not(.bf-page-projekte) .simple__gallery-image {
  height: auto;
  align-self: start;
}
html:not(.x) body:not(.bf-page-projekte) .simple__media:has(> .simple__gallery) { align-self: flex-start; }

/* =============================================================================
   Teil 71 — 06.10.2026: «Über uns» nach dem Word-Dokument des Kunden (04.10.)
   -----------------------------------------------------------------------------
   1. «Karte etwas höher, dass die Oberkante bündig ist mit: Über uns».
      Die Karte gehört zum Block darunter (simple) und stand mittig neben dessen
      Text — 218px unter der Überschrift. Sie wird jetzt nach oben gezogen, bis
      ihre Oberkante auf der Schrift von «Über uns» liegt, und endet mit dem
      Text links. Den Versatz misst bunnefeld-ui.js («Karte Über uns»), weil er
      von der Zeilenzahl der Einleitung abhängt; ohne Skript bleibt alles wie
      bisher. Erst ab 1024px — darunter stehen Text und Karte untereinander.
   2. «Die Texte besser aufteilen, dass die Abstände zwischen den einzelnen
      Abschnitten einheitlich sind». Gemessen (1440px) standen zwischen den
      Textabschnitten 282 / 314 / 91 / 59px — weil der Text neben der hohen
      Karte mittig saß und jeder Block andere Innenabstände mitbringt. Jetzt
      ein Maß für alle fünf Abschnitte der grauen Fläche: --bf-ueber-abstand.
   3. «Das Aufzählen find ich gut, aber kann man 2–4 anders darstellen, dass es
      besser zu 1 und 5 passt?» Bei 01 und 05 steht die Ziffer über einem roten
      Strich und bündig mit der Überschrift; in den Kacheln 02–04 klebte sie
      ohne Strich in der Ecke, 24px links von der Überschrift. Jetzt dieselbe
      Folge: Ziffer — roter Strich — Überschrift, bündig mit dem Kacheltext.
      Gilt für jede Kachel, die statt einer Zeichnung nur ihre Ziffer trägt
      (auch «Zahlen, die für sich sprechen»).
   4. Historie mit Fotos «wie hier» (Vorlage niemann): Foto oben über die volle
      Kachelbreite, darunter Quadrat, Jahr, Text. Feld «Foto» im Block Timeline.
   -------------------------------------------------------------------------- */
.bf-page-ueber-uns { --bf-ueber-abstand: clamp(56px, 6.6vw, 96px); }

/* 2. Einheitliche Abstände in der grauen Fläche (Titel → Karte/Geschichte → 01
      → 02–04 → 05). Die Fläche selbst behält oben und unten ihren Rand. */
/* Teil 28 setzt die Abstände zwischen gleichfarbigen Bändern mit
   `:is(… :nth-child(… of …))` — Spezifität (1,7,0). `#content#content`
   schlägt das nur auf dieser Seite, ohne `!important`. */
.stil-harbeck .bf-page-ueber-uns #content#content > .title-block { padding-bottom: 0; }
.stil-harbeck .bf-page-ueber-uns #content#content > :is(.title-block + .simple,
    .title-block + .simple + .philosophy, .philosophy + .reasons, .reasons + .philosophy) {
  padding-top: var(--bf-ueber-abstand);
}
.stil-harbeck .bf-page-ueber-uns #content#content > :is(.title-block + .simple,
    .title-block + .simple + .philosophy, .philosophy + .reasons) {
  padding-bottom: 0;
}
.stil-harbeck .bf-page-ueber-uns :is(.title-block, .simple, .philosophy) .text > :last-child { margin-bottom: 0; }
.stil-harbeck .bf-page-ueber-uns .philosophy__head { margin-bottom: 0; }
.stil-harbeck .bf-page-ueber-uns .title-block + .simple .simple__inner { align-items: flex-start; }
.stil-harbeck .bf-page-ueber-uns .title-block + .simple .simple__content { align-self: flex-start; }

/* 1. Karte: die Höhe setzt das Skript; die Karte wird darin eingepasst, nicht
      beschnitten, und hängt an der Oberkante. */
@media (min-width: 1024px) {
  .stil-harbeck .bf-page-ueber-uns .simple.bf-karte-hoch .simple__media { align-self: flex-start; }
  .stil-harbeck .bf-page-ueber-uns .simple.bf-karte-hoch .simple__image {
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: left top;
  }
}

/* 3. Ziffer der Kachel wie bei 01 und 05. */
.stil-harbeck .reasons__bild--ziffer {
  width: auto;
  margin: 24px 24px 18px;
}
.stil-harbeck .reasons__bild--ziffer .reasons__ziffer { font-size: 40px; color: #dcdcdc; }
.stil-harbeck .reasons__bild--ziffer::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 12px;
  background: var(--bf-signal, #d7161e);
}
@media (max-width: 859px) {
  .stil-harbeck .reasons__bild--ziffer { margin: 18px 18px 14px; }
}
@media (max-width: 767px) {
  .stil-harbeck .reasons__bild--ziffer .reasons__ziffer { font-size: var(--bf-titel); }
}

/* 4. Historie: Foto oben in der Kachel. Das Quadrat (::before) rückt unter das
      Foto, die Kachel bleibt sonst, wie sie war. */
.stil-harbeck .timeline .timeline__card--bild { padding-top: 0; overflow: hidden; }
.timeline__card--bild::before { order: 1; }
.timeline__card--bild > :not(.timeline__bild) { order: 2; }
.timeline__bild {
  order: 0;
  align-self: stretch;
  margin: 0 -24px 22px;
}
.timeline__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 768px) {
  .timeline__bild { margin: 0 -20px 18px; }
}

/* =============================================================================
   Teil 72 — 08.10.2026: Vertriebszeile über den Shop-Filtern
   -----------------------------------------------------------------------------
   Kunde (Handyvideo vom MacBook, 08.10.): in den Weißraum über den Filtern
   «Text + Telefonsymbol mit der Nummer von Jörg». Seit die Kacheln «Preis
   anfragen» tragen, stand die Nummer sonst nirgends in der Liste. Der Anruf
   hat die Form des Anruf-Kastens der Produktseite (`bf-pd__anruf`): Rahmen,
   rotes Zeichen, Nummer in Mono.
   -------------------------------------------------------------------------- */
.stil-harbeck .shop__vertrieb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 24px;
  text-align: left;
}
.stil-harbeck .shop__vertrieb-text {
  max-width: 760px;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--bf-ink);
}
.stil-harbeck .shop__vertrieb-tel {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border: 1px solid var(--bf-line);
  background: var(--bf-bg-alt);
  color: var(--bf-ink);
  font-family: var(--bf-mono);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .2s var(--bf-ease), background .2s var(--bf-ease);
}
.stil-harbeck .shop__vertrieb-tel:hover {
  border-color: var(--bf-signal);
  background: #fff;
}
.stil-harbeck .shop__vertrieb-tel svg { flex: none; color: var(--bf-signal); }

/* Auf /shop/ ist der Kopf leer (die H1 steht nur für Vorleser da), trug aber
   noch seine 24px Abstand — die Zeile rückt damit in den Weißraum hoch, auf den
   der Kunde gezeigt hat. */
.stil-harbeck .shop__head:has(> .shop__title--nur-vorleser:only-child) { margin-bottom: 0; }

@media (max-width: 767px) {
  .stil-harbeck .shop__vertrieb {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 16px;
    text-align: center;
  }
  .stil-harbeck .shop__vertrieb-text { font-size: 16px; }
  .stil-harbeck .shop__vertrieb-tel { justify-content: center; }
}